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]+$".