chore: format code using Prettier to fix warning (#386) (CP: 25.2)

dev/pages/ComboBox.tsx

@@ -214,7 +214,6 @@ export default function ComboBoxPage() {
 
   return (
     <div style={{ display: 'grid', gridTemplateRows: 'auto auto', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
-
       {/* Demo component section */}
       <div style={{ gridColumn: '1 / -1' }}>
         <h1>ComboBox</h1>

dev/pages/ConfirmDialog.tsx

@@ -51,7 +51,6 @@ export default function ConfirmDialogPage() {
 
   return (
     <div style={{ display: 'grid', gridTemplateRows: 'auto auto', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
-
       {/* Demo component section */}
       <div style={{ gridColumn: '1 / -1' }}>
         <h1>ConfirmDialog</h1>

dev/pages/ContextMenu.tsx

@@ -121,7 +121,6 @@ export default function ContextMenuPage() {
         }
       `}</style>
       <div style={{ display: 'grid', gridTemplateRows: 'auto auto', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
-
         {/* Demo component section */}
         <div style={{ gridColumn: '1 / -1' }}>
           <h1>ContextMenu</h1>

dev/pages/DatePicker.tsx

@@ -47,7 +47,6 @@ export default function DatePickerPage() {
 
   return (
     <div style={{ display: 'grid', gridTemplateRows: 'auto auto', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
-
       {/* Demo component section */}
       <div style={{ gridColumn: '1 / -1' }}>
         <h1>DatePicker</h1>

dev/pages/Select.tsx

@@ -74,7 +74,6 @@ export default function SelectPage() {
 
   return (
     <div style={{ display: 'grid', gridTemplateRows: 'auto auto', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
-
       {/* Demo component section */}
       <div style={{ gridColumn: '1 / -1' }}>
         <h1>Select</h1>

dev/pages/TextField.tsx

@@ -32,7 +32,6 @@ export default function TextFieldPage() {
 
   return (
     <div style={{ display: 'grid', gridTemplateRows: 'auto auto', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
-
       {/* Demo component section */}
       <div style={{ gridColumn: '1 / -1' }}>
         <h1>TextField</h1>

dev/pages/master-detail-layout-styles.css

@@ -1,20 +1,20 @@
 html,
 body {
-    height: 100%;
+  height: 100%;
 }
 
 vaadin-master-detail-layout {
-    border: solid 1px #ccc;
+  border: solid 1px #ccc;
 }
 
 vaadin-master-detail-layout:is([overlay], [stack])::part(detail) {
-    background: #fff;
+  background: #fff;
 }
 
 vaadin-master-detail-layout[orientation='horizontal'][overlay]::part(detail) {
-    border-inline-start: solid 1px #ccc;
+  border-inline-start: solid 1px #ccc;
 }
 
 vaadin-master-detail-layout[orientation='vertical'][overlay]::part(detail) {
-    border-block-start: solid 1px #ccc;
-}
+  border-block-start: solid 1px #ccc;
+}

packages/react-components-pro/package.json

@@ -147,4 +147,4 @@
     "./utils/createComponent.js": "./utils/createComponent.js",
     "./utils/createComponent.js.map": "./utils/createComponent.js.map"
   }
-}
+}

packages/react-components/package.json

@@ -558,4 +558,4 @@
     "./renderers/useSimpleRenderer.js": "./renderers/useSimpleRenderer.js",
     "./renderers/useSimpleRenderer.js.map": "./renderers/useSimpleRenderer.js.map"
   }
-}
+}

packages/react-components/src/MasterDetailLayout.tsx

@@ -19,7 +19,11 @@ function Master({ children }: MasterProps) {
 }
 
 function DetailPlaceholder({ children }: DetailPlaceholderProps) {
-  return <div slot="detail-placeholder" style={{ height: '100%' }}>{children}</div>;
+  return (
+    <div slot="detail-placeholder" style={{ height: '100%' }}>
+      {children}
+    </div>
+  );
 }
 
 /**
@@ -88,36 +92,38 @@ function Detail({ children }: DetailProps) {
 
       // _startTransition calls the callback synchronously for add/replace,
       // and asynchronously for remove.
-      layout._startTransition(transitionType, async () => {
-        if (transitionType === 'replace' && currentDetailsRef.current) {
-          // For replace, _startTransition moved the current div to the
-          // detail-outgoing slot for the outgoing animation. Clone it so the
-          // WC can animate the clone out, then hide the React-managed original
-          // so the WC's post-animation cleanup won't remove it from the DOM.
-          const clone = currentDetailsRef.current.cloneNode(true) as HTMLElement;
-          clone.setAttribute('slot', 'detail-outgoing');
-          layout.appendChild(clone);
-          currentDetailsRef.current.setAttribute('slot', 'detail-hidden');
-        } else if (currentDetailsRef.current) {
-          currentDetailsRef.current.setAttribute('slot', 'detail-hidden');
-        }
-        if (nextDetailsRef.current) {
-          nextDetailsRef.current.style.display = '';
-          const hasNext = nextDetailsRef.current.childElementCount > 0;
-          nextDetailsRef.current.setAttribute('slot', hasNext ? 'detail' : 'detail-hidden');
-        }
-
-        // Wait for Lit elements to render
-        await Promise.resolve();
-
-        // Recompute layout state with the new DOM
-        layout.recalculateLayout();
-      }).then(() => {
-        // Animation finished — sync React state to match DOM reality
-        setCurrentChildren(children);
-        currentDetailsKey.current = nextDetailsKey;
-        setState('idle');
-      });
+      layout
+        ._startTransition(transitionType, async () => {
+          if (transitionType === 'replace' && currentDetailsRef.current) {
+            // For replace, _startTransition moved the current div to the
+            // detail-outgoing slot for the outgoing animation. Clone it so the
+            // WC can animate the clone out, then hide the React-managed original
+            // so the WC's post-animation cleanup won't remove it from the DOM.
+            const clone = currentDetailsRef.current.cloneNode(true) as HTMLElement;
+            clone.setAttribute('slot', 'detail-outgoing');
+            layout.appendChild(clone);
+            currentDetailsRef.current.setAttribute('slot', 'detail-hidden');
+          } else if (currentDetailsRef.current) {
+            currentDetailsRef.current.setAttribute('slot', 'detail-hidden');
+          }
+          if (nextDetailsRef.current) {
+            nextDetailsRef.current.style.display = '';
+            const hasNext = nextDetailsRef.current.childElementCount > 0;
+            nextDetailsRef.current.setAttribute('slot', hasNext ? 'detail' : 'detail-hidden');
+          }
+
+          // Wait for Lit elements to render
+          await Promise.resolve();
+
+          // Recompute layout state with the new DOM
+          layout.recalculateLayout();
+        })
+        .then(() => {
+          // Animation finished — sync React state to match DOM reality
+          setCurrentChildren(children);
+          currentDetailsKey.current = nextDetailsKey;
+          setState('idle');
+        });
     }
   }, [state, currentChildren]);
 
@@ -150,7 +156,12 @@ function validateChildren(children: React.ReactNode) {
   React.Children.forEach(children, (child) => {
     // Ignore non-React elements
     // We especially want to ignore text nodes to allow for whitespace resulting from formatting
-    if (React.isValidElement(child) && child.type !== Master && child.type !== Detail && child.type !== DetailPlaceholder) {
+    if (
+      React.isValidElement(child) &&
+      child.type !== Master &&
+      child.type !== Detail &&
+      child.type !== DetailPlaceholder
+    ) {
       throw new Error(
         'Invalid child in MasterDetailLayout. Only <MasterDetailLayout.Master>, <MasterDetailLayout.Detail>, and <MasterDetailLayout.DetailPlaceholder> components are allowed. Check the component docs for proper usage.',
       );

packages/react-components/src/MenuBar.tsx

@@ -22,16 +22,23 @@ export type MenuBarItem<TItemData extends object = object> = Omit<_MenuBarItem<T
   children?: Array<SubMenuItem<TItemData>>;
 };
 
-export type MenuBarItemSelectedEvent<TItem extends MenuBarItem = MenuBarItem> = CustomEvent<{ value: MenuBarItem<TItem> }>;
+export type MenuBarItemSelectedEvent<TItem extends MenuBarItem = MenuBarItem> = CustomEvent<{
+  value: MenuBarItem<TItem>;
+}>;
 
-export type MenuBarProps<TItem extends MenuBarItem = MenuBarItem> = Partial<Omit<_MenuBarProps, 'items' | 'onItemSelected'>> &
+export type MenuBarProps<TItem extends MenuBarItem = MenuBarItem> = Partial<
+  Omit<_MenuBarProps, 'items' | 'onItemSelected'>
+> &
   Readonly<{
     items?: Array<TItem>;
 
     onItemSelected?: (event: MenuBarItemSelectedEvent<TItem>) => void;
   }>;
 
-function MenuBar<TItem extends MenuBarItem = MenuBarItem>(props: MenuBarProps<TItem>, ref: ForwardedRef<MenuBarElement>): ReactElement | null {
+function MenuBar<TItem extends MenuBarItem = MenuBarItem>(
+  props: MenuBarProps<TItem>,
+  ref: ForwardedRef<MenuBarElement>,
+): ReactElement | null {
   const [itemPortals, webComponentItems] = mapItemsWithComponents(props.items, 'vaadin-menu-bar-item');
 
   const onItemSelected = props.onItemSelected;

types/schema.d.ts

@@ -28,13 +28,7 @@ export type Pattern =
  * via the `patternProperty` "^/(html|css|js)/[^/\n\r]+$".
  */
 export type NameConverter =
-  | 'as-is'
-  | 'PascalCase'
-  | 'camelCase'
-  | 'lowercase'
-  | 'UPPERCASE'
-  | 'kebab-case'
-  | 'snake_case';
+  'as-is' | 'PascalCase' | 'camelCase' | 'lowercase' | 'UPPERCASE' | 'kebab-case' | 'snake_case';
 /**
  * This interface was referenced by `undefined`'s JSON-Schema definition
  * via the `patternProperty` "^/(html|css|js)/[^/\n\r]+$".