From e2a642764e260c1d7e4236313b590c0552033766 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Wed, 8 Jul 2026 11:46:51 +0300 Subject: [PATCH] chore: format code using Prettier to fix warning (#386) --- dev/pages/ComboBox.tsx | 1 - dev/pages/ConfirmDialog.tsx | 1 - dev/pages/ContextMenu.tsx | 1 - dev/pages/DatePicker.tsx | 1 - dev/pages/Select.tsx | 1 - dev/pages/TextField.tsx | 1 - dev/pages/master-detail-layout-styles.css | 12 +-- packages/react-components-pro/package.json | 2 +- packages/react-components/package.json | 2 +- .../src/MasterDetailLayout.tsx | 75 +++++++++++-------- packages/react-components/src/MenuBar.tsx | 13 +++- types/schema.d.ts | 8 +- 12 files changed, 62 insertions(+), 56 deletions(-) diff --git a/dev/pages/ComboBox.tsx b/dev/pages/ComboBox.tsx index 66d7c9a0..2ce35830 100644 --- a/dev/pages/ComboBox.tsx +++ b/dev/pages/ComboBox.tsx @@ -214,7 +214,6 @@ export default function ComboBoxPage() { return (
- {/* Demo component section */}

ComboBox

diff --git a/dev/pages/ConfirmDialog.tsx b/dev/pages/ConfirmDialog.tsx index bc987ed8..44d820c7 100644 --- a/dev/pages/ConfirmDialog.tsx +++ b/dev/pages/ConfirmDialog.tsx @@ -51,7 +51,6 @@ export default function ConfirmDialogPage() { return (
- {/* Demo component section */}

ConfirmDialog

diff --git a/dev/pages/ContextMenu.tsx b/dev/pages/ContextMenu.tsx index e4b648ea..1a411d22 100644 --- a/dev/pages/ContextMenu.tsx +++ b/dev/pages/ContextMenu.tsx @@ -121,7 +121,6 @@ export default function ContextMenuPage() { } `}
- {/* Demo component section */}

ContextMenu

diff --git a/dev/pages/DatePicker.tsx b/dev/pages/DatePicker.tsx index 33a4349b..d9928f58 100644 --- a/dev/pages/DatePicker.tsx +++ b/dev/pages/DatePicker.tsx @@ -47,7 +47,6 @@ export default function DatePickerPage() { return (
- {/* Demo component section */}

DatePicker

diff --git a/dev/pages/Select.tsx b/dev/pages/Select.tsx index 8fe7ebf0..22910652 100644 --- a/dev/pages/Select.tsx +++ b/dev/pages/Select.tsx @@ -74,7 +74,6 @@ export default function SelectPage() { return (
- {/* Demo component section */}

Select

diff --git a/dev/pages/TextField.tsx b/dev/pages/TextField.tsx index 7c283f55..5b404f35 100644 --- a/dev/pages/TextField.tsx +++ b/dev/pages/TextField.tsx @@ -32,7 +32,6 @@ export default function TextFieldPage() { return (
- {/* Demo component section */}

TextField

diff --git a/dev/pages/master-detail-layout-styles.css b/dev/pages/master-detail-layout-styles.css index 41a27def..a0e280f3 100644 --- a/dev/pages/master-detail-layout-styles.css +++ b/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; -} \ No newline at end of file + border-block-start: solid 1px #ccc; +} diff --git a/packages/react-components-pro/package.json b/packages/react-components-pro/package.json index 9b27b7ea..0b55f52e 100644 --- a/packages/react-components-pro/package.json +++ b/packages/react-components-pro/package.json @@ -147,4 +147,4 @@ "./utils/createComponent.js": "./utils/createComponent.js", "./utils/createComponent.js.map": "./utils/createComponent.js.map" } -} \ No newline at end of file +} diff --git a/packages/react-components/package.json b/packages/react-components/package.json index abb17e3d..5a946c76 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -558,4 +558,4 @@ "./renderers/useSimpleRenderer.js": "./renderers/useSimpleRenderer.js", "./renderers/useSimpleRenderer.js.map": "./renderers/useSimpleRenderer.js.map" } -} \ No newline at end of file +} diff --git a/packages/react-components/src/MasterDetailLayout.tsx b/packages/react-components/src/MasterDetailLayout.tsx index 99b59bed..34cb029a 100644 --- a/packages/react-components/src/MasterDetailLayout.tsx +++ b/packages/react-components/src/MasterDetailLayout.tsx @@ -19,7 +19,11 @@ function Master({ children }: MasterProps) { } function DetailPlaceholder({ children }: DetailPlaceholderProps) { - return
{children}
; + return ( +
+ {children} +
+ ); } /** @@ -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 , , and components are allowed. Check the component docs for proper usage.', ); diff --git a/packages/react-components/src/MenuBar.tsx b/packages/react-components/src/MenuBar.tsx index 490b9550..c90c1694 100644 --- a/packages/react-components/src/MenuBar.tsx +++ b/packages/react-components/src/MenuBar.tsx @@ -22,16 +22,23 @@ export type MenuBarItem = Omit<_MenuBarItem>; }; -export type MenuBarItemSelectedEvent = CustomEvent<{ value: MenuBarItem }>; +export type MenuBarItemSelectedEvent = CustomEvent<{ + value: MenuBarItem; +}>; -export type MenuBarProps = Partial> & +export type MenuBarProps = Partial< + Omit<_MenuBarProps, 'items' | 'onItemSelected'> +> & Readonly<{ items?: Array; onItemSelected?: (event: MenuBarItemSelectedEvent) => void; }>; -function MenuBar(props: MenuBarProps, ref: ForwardedRef): ReactElement | null { +function MenuBar( + props: MenuBarProps, + ref: ForwardedRef, +): ReactElement | null { const [itemPortals, webComponentItems] = mapItemsWithComponents(props.items, 'vaadin-menu-bar-item'); const onItemSelected = props.onItemSelected; diff --git a/types/schema.d.ts b/types/schema.d.ts index 02c565c2..14cadd3d 100644 --- a/types/schema.d.ts +++ b/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]+$".