@vaadin/react-components 24.8.0-alpha1 → 24.8.0-alpha12

package/ContextMenu.d.ts

@@ -8,7 +8,7 @@ export type ContextMenuItem<TItemData extends object = object> = Omit<_ContextMe
     children?: Array<ContextMenuItem<TItemData>>;
 };
 export type ContextMenuItemSelectedEvent<TItem extends ContextMenuItem = ContextMenuItem> = CustomEvent<{
-    value: TItem;
+    value: ContextMenuItem<TItem>;
 }>;
 export type ContextMenuProps<TItem extends ContextMenuItem = ContextMenuItem> = Partial<Omit<_ContextMenuProps, 'opened' | 'renderer' | 'items' | 'onItemSelected'>> & Readonly<{
     renderer?: ComponentType<ContextMenuReactRendererProps> | null;

package/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["src/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACjH,OAAO,EAEL,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,IAAI,iBAAiB,EAC1C,KAAK,eAAe,IAAI,gBAAgB,EACzC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,yBAAyB,EAAsB,MAAM,mCAAmC,CAAC;AAGvG,cAAc,4BAA4B,CAAC;AAE3C,MAAM,MAAM,6BAA6B,GAAG,yBAAyB,CAAC,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAEtH,MAAM,MAAM,eAAe,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACnE,gBAAgB,CAAC,SAAS,CAAC,EAC3B,WAAW,GAAG,UAAU,CACzB,GAAG;IACF,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,4BAA4B,CAAC,KAAK,SAAS,eAAe,GAAG,eAAe,IAAI,WAAW,CAAC;IACtG,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAKH,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,eAAe,GAAG,eAAe,IAAI,OAAO,CACrF,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,gBAAgB,CAAC,CAC5E,GACC,QAAQ,CAAC;IACP,QAAQ,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,GAAG,IAAI,CAAC;IAE/D,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAErB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACvE,CAAC,CAAC;AAmCL,QAAA,MAAM,oBAAoB,EAA8B,CAAC,KAAK,SAAS,eAAe,GAAG,eAAe,EACtG,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,kBAAkB,CAAC,KAC/D,YAAY,GAAG,IAAI,CAAC;AAEzB,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["src/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACjH,OAAO,EAEL,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,IAAI,iBAAiB,EAC1C,KAAK,eAAe,IAAI,gBAAgB,EACzC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,yBAAyB,EAAsB,MAAM,mCAAmC,CAAC;AAGvG,cAAc,4BAA4B,CAAC;AAE3C,MAAM,MAAM,6BAA6B,GAAG,yBAAyB,CAAC,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAEtH,MAAM,MAAM,eAAe,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACnE,gBAAgB,CAAC,SAAS,CAAC,EAC3B,WAAW,GAAG,UAAU,CACzB,GAAG;IACF,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,4BAA4B,CAAC,KAAK,SAAS,eAAe,GAAG,eAAe,IAAI,WAAW,CAAC;IACtG,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CAC/B,CAAC,CAAC;AAKH,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,eAAe,GAAG,eAAe,IAAI,OAAO,CACrF,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,gBAAgB,CAAC,CAC5E,GACC,QAAQ,CAAC;IACP,QAAQ,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,GAAG,IAAI,CAAC;IAE/D,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAErB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACvE,CAAC,CAAC;AAmCL,QAAA,MAAM,oBAAoB,EAA8B,CAAC,KAAK,SAAS,eAAe,GAAG,eAAe,EACtG,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,kBAAkB,CAAC,KAC/D,YAAY,GAAG,IAAI,CAAC;AAEzB,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,CAAC"}

package/ContextMenu.js

@@ -1,2 +1,2 @@
-export*from"@vaadin/context-menu/vaadin-context-menu.js";import{forwardRef as s}from"react";import{ContextMenu as C}from"@vaadin/context-menu/vaadin-context-menu.js";import*as u from"react";import{createComponent as d}from"./utils/createComponent.js";var M={onItemSelected:"item-selected",onOpenedChanged:"opened-changed"},o=d({elementClass:C,events:M,react:u,tagName:"vaadin-context-menu"});import{useContextRenderer as l}from"./renderers/useContextRenderer.js";import{getOriginalItem as c,mapItemsWithComponents as I}from"./utils/mapItemsWithComponents.js";import{jsxs as E}from"react/jsx-runtime";function i(e,m){let[r,p]=l(e.renderer),[a,x]=I(e.items,"vaadin-context-menu-item"),n=e.onItemSelected;return E(o,{...e,ref:m,renderer:p,items:x,onItemSelected:n?t=>{Object.assign(t.detail,{value:c(t.detail.value)}),n(t)}:void 0,children:[e.children,r,a]})}var g=s(i);export{g as ContextMenu,C as ContextMenuElement};
+export*from"@vaadin/context-menu/vaadin-context-menu.js";import{forwardRef as s}from"react";import{ContextMenu as C}from"@vaadin/context-menu/vaadin-context-menu.js";import*as u from"react";import{createComponent as d}from"./utils/createComponent.js";var M={onItemSelected:"item-selected",onOpenedChanged:"opened-changed"},o=d({elementClass:C,events:M,react:u,tagName:"vaadin-context-menu"});import{useContextRenderer as l}from"./renderers/useContextRenderer.js";import{getOriginalItem as c,mapItemsWithComponents as I}from"./utils/mapItemsWithComponents.js";import{jsxs as E}from"react/jsx-runtime";function i(e,m){let[r,p]=l(e.renderer),[x,a]=I(e.items,"vaadin-context-menu-item"),n=e.onItemSelected;return E(o,{...e,ref:m,renderer:p,items:a,onItemSelected:n?t=>{Object.assign(t.detail,{value:c(t.detail.value)}),n(t)}:void 0,children:[e.children,r,x]})}var g=s(i);export{g as ContextMenu,C as ContextMenuElement};
 //# sourceMappingURL=ContextMenu.js.map

package/ContextMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/ContextMenu.tsx", "src/generated/ContextMenu.ts"],
-  "sourcesContent": ["export * from \"@vaadin/context-menu/vaadin-context-menu.js\";\nimport { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';\nimport {\n  ContextMenu as _ContextMenu,\n  type ContextMenuRendererContext,\n  type ContextMenuElement,\n  type ContextMenuProps as _ContextMenuProps,\n  type ContextMenuItem as _ContextMenuItem,\n} from './generated/ContextMenu.js';\nimport { type ReactContextRendererProps, useContextRenderer } from './renderers/useContextRenderer.js';\nimport { getOriginalItem, mapItemsWithComponents } from './utils/mapItemsWithComponents.js';\n\nexport * from './generated/ContextMenu.js';\n\nexport type ContextMenuReactRendererProps = ReactContextRendererProps<ContextMenuRendererContext, ContextMenuElement>;\n\nexport type ContextMenuItem<TItemData extends object = object> = Omit<\n  _ContextMenuItem<TItemData>,\n  'component' | 'children'\n> & {\n  component?: ReactElement | string;\n\n  children?: Array<ContextMenuItem<TItemData>>;\n};\n\nexport type ContextMenuItemSelectedEvent<TItem extends ContextMenuItem = ContextMenuItem> = CustomEvent<{\n  value: TItem;\n}>;\n\n// The 'opened' property is omitted because it is readonly in the web component.\n// So you cannot set it up manually, only read from the component.\n// For changing the property, use specific methods of the component.\nexport type ContextMenuProps<TItem extends ContextMenuItem = ContextMenuItem> = Partial<\n  Omit<_ContextMenuProps, 'opened' | 'renderer' | 'items' | 'onItemSelected'>\n> &\n  Readonly<{\n    renderer?: ComponentType<ContextMenuReactRendererProps> | null;\n\n    items?: Array<TItem>;\n\n    onItemSelected?: (event: ContextMenuItemSelectedEvent<TItem>) => void;\n  }>;\n\nfunction ContextMenu<TItem extends ContextMenuItem = ContextMenuItem>(\n  props: ContextMenuProps<TItem>,\n  ref: ForwardedRef<ContextMenuElement>,\n): ReactElement | null {\n  const [portals, renderer] = useContextRenderer(props.renderer);\n  const [itemPortals, webComponentItems] = mapItemsWithComponents(props.items, 'vaadin-context-menu-item');\n\n  const onItemSelected = props.onItemSelected;\n  const mappedOnItemSelected = onItemSelected\n    ? (event: CustomEvent<{ value: _ContextMenuItem }>) => {\n        // Replace the mapped web component item with the original item\n        Object.assign(event.detail, {\n          value: getOriginalItem(event.detail.value),\n        });\n\n        onItemSelected(event as ContextMenuItemSelectedEvent<TItem>);\n      }\n    : undefined;\n  return (\n    <_ContextMenu\n      {...props}\n      ref={ref}\n      renderer={renderer}\n      items={webComponentItems}\n      onItemSelected={mappedOnItemSelected}\n    >\n      {props.children}\n      {portals}\n      {itemPortals}\n    </_ContextMenu>\n  );\n}\n\nconst ForwardedContextMenu = forwardRef(ContextMenu) as <TItem extends ContextMenuItem = ContextMenuItem>(\n  props: ContextMenuProps<TItem> & RefAttributes<ContextMenuElement>,\n) => ReactElement | null;\n\nexport { ForwardedContextMenu as ContextMenu };\n", "import type { EventName } from \"@lit/react\";\nimport { ContextMenu as ContextMenuElement, type ContextMenuEventMap as _ContextMenuEventMap, } from \"@vaadin/context-menu/vaadin-context-menu.js\";\nimport * as React from \"react\";\nimport { createComponent, type WebComponentProps } from \"../utils/createComponent.js\";\nexport { ContextMenuElement, };\nexport type ContextMenuEventMap = Readonly<{\n    onItemSelected: EventName<_ContextMenuEventMap[\"item-selected\"]>;\n    onOpenedChanged: EventName<_ContextMenuEventMap[\"opened-changed\"]>;\n}>;\nconst events = { onItemSelected: \"item-selected\", onOpenedChanged: \"opened-changed\" } as ContextMenuEventMap;\nexport type ContextMenuProps = WebComponentProps<ContextMenuElement, ContextMenuEventMap>;\nexport const ContextMenu = createComponent({\n    elementClass: ContextMenuElement, events, react: React, tagName: \"vaadin-context-menu\"\n});\n"],
+  "sourcesContent": ["export * from \"@vaadin/context-menu/vaadin-context-menu.js\";\nimport { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';\nimport {\n  ContextMenu as _ContextMenu,\n  type ContextMenuRendererContext,\n  type ContextMenuElement,\n  type ContextMenuProps as _ContextMenuProps,\n  type ContextMenuItem as _ContextMenuItem,\n} from './generated/ContextMenu.js';\nimport { type ReactContextRendererProps, useContextRenderer } from './renderers/useContextRenderer.js';\nimport { getOriginalItem, mapItemsWithComponents } from './utils/mapItemsWithComponents.js';\n\nexport * from './generated/ContextMenu.js';\n\nexport type ContextMenuReactRendererProps = ReactContextRendererProps<ContextMenuRendererContext, ContextMenuElement>;\n\nexport type ContextMenuItem<TItemData extends object = object> = Omit<\n  _ContextMenuItem<TItemData>,\n  'component' | 'children'\n> & {\n  component?: ReactElement | string;\n\n  children?: Array<ContextMenuItem<TItemData>>;\n};\n\nexport type ContextMenuItemSelectedEvent<TItem extends ContextMenuItem = ContextMenuItem> = CustomEvent<{\n  value: ContextMenuItem<TItem>;\n}>;\n\n// The 'opened' property is omitted because it is readonly in the web component.\n// So you cannot set it up manually, only read from the component.\n// For changing the property, use specific methods of the component.\nexport type ContextMenuProps<TItem extends ContextMenuItem = ContextMenuItem> = Partial<\n  Omit<_ContextMenuProps, 'opened' | 'renderer' | 'items' | 'onItemSelected'>\n> &\n  Readonly<{\n    renderer?: ComponentType<ContextMenuReactRendererProps> | null;\n\n    items?: Array<TItem>;\n\n    onItemSelected?: (event: ContextMenuItemSelectedEvent<TItem>) => void;\n  }>;\n\nfunction ContextMenu<TItem extends ContextMenuItem = ContextMenuItem>(\n  props: ContextMenuProps<TItem>,\n  ref: ForwardedRef<ContextMenuElement>,\n): ReactElement | null {\n  const [portals, renderer] = useContextRenderer(props.renderer);\n  const [itemPortals, webComponentItems] = mapItemsWithComponents(props.items, 'vaadin-context-menu-item');\n\n  const onItemSelected = props.onItemSelected;\n  const mappedOnItemSelected = onItemSelected\n    ? (event: CustomEvent<{ value: _ContextMenuItem }>) => {\n        // Replace the mapped web component item with the original item\n        Object.assign(event.detail, {\n          value: getOriginalItem(event.detail.value),\n        });\n\n        onItemSelected(event as ContextMenuItemSelectedEvent<TItem>);\n      }\n    : undefined;\n  return (\n    <_ContextMenu\n      {...props}\n      ref={ref}\n      renderer={renderer}\n      items={webComponentItems}\n      onItemSelected={mappedOnItemSelected}\n    >\n      {props.children}\n      {portals}\n      {itemPortals}\n    </_ContextMenu>\n  );\n}\n\nconst ForwardedContextMenu = forwardRef(ContextMenu) as <TItem extends ContextMenuItem = ContextMenuItem>(\n  props: ContextMenuProps<TItem> & RefAttributes<ContextMenuElement>,\n) => ReactElement | null;\n\nexport { ForwardedContextMenu as ContextMenu };\n", "import type { EventName } from \"@lit/react\";\nimport { ContextMenu as ContextMenuElement, type ContextMenuEventMap as _ContextMenuEventMap, } from \"@vaadin/context-menu/vaadin-context-menu.js\";\nimport * as React from \"react\";\nimport { createComponent, type WebComponentProps } from \"../utils/createComponent.js\";\nexport { ContextMenuElement, };\nexport type ContextMenuEventMap = Readonly<{\n    onItemSelected: EventName<_ContextMenuEventMap[\"item-selected\"]>;\n    onOpenedChanged: EventName<_ContextMenuEventMap[\"opened-changed\"]>;\n}>;\nconst events = { onItemSelected: \"item-selected\", onOpenedChanged: \"opened-changed\" } as ContextMenuEventMap;\nexport type ContextMenuProps = WebComponentProps<ContextMenuElement, ContextMenuEventMap>;\nexport const ContextMenu = createComponent({\n    elementClass: ContextMenuElement, events, react: React, tagName: \"vaadin-context-menu\"\n});\n"],
   "mappings": "AAAA,WAAc,8CACd,OAAgD,cAAAA,MAAyD,QCAzG,OAAS,eAAeC,MAA6E,8CACrG,UAAYC,MAAW,QACvB,OAAS,mBAAAC,MAA+C,6BAMxD,IAAMC,EAAS,CAAE,eAAgB,gBAAiB,gBAAiB,gBAAiB,EAEvEC,EAAcC,EAAgB,CACvC,aAAcC,EAAoB,OAAAH,EAAQ,MAAOI,EAAO,QAAS,qBACrE,CAAC,EDJD,OAAyC,sBAAAC,MAA0B,oCACnE,OAAS,mBAAAC,EAAiB,0BAAAC,MAA8B,oCAoDpD,eAAAC,MAAA,oBAnBJ,SAASC,EACPC,EACAC,EACqB,CACrB,GAAM,CAACC,EAASC,CAAQ,EAAIR,EAAmBK,EAAM,QAAQ,EACvD,CAACI,EAAaC,CAAiB,EAAIR,EAAuBG,EAAM,MAAO,0BAA0B,EAEjGM,EAAiBN,EAAM,eAW7B,OACEF,EAACC,EAAA,CACE,GAAGC,EACJ,IAAKC,EACL,SAAUE,EACV,MAAOE,EACP,eAhByBC,EACxBC,GAAoD,CAEnD,OAAO,OAAOA,EAAM,OAAQ,CAC1B,MAAOX,EAAgBW,EAAM,OAAO,KAAK,CAC3C,CAAC,EAEDD,EAAeC,CAA4C,CAC7D,EACA,OASC,UAAAP,EAAM,SACNE,EACAE,GACH,CAEJ,CAEA,IAAMI,EAAuBC,EAAWV,CAAW",
   "names": ["forwardRef", "ContextMenuElement", "React", "createComponent", "events", "ContextMenu", "createComponent", "ContextMenuElement", "React", "useContextRenderer", "getOriginalItem", "mapItemsWithComponents", "jsxs", "ContextMenu", "props", "ref", "portals", "renderer", "itemPortals", "webComponentItems", "onItemSelected", "event", "ForwardedContextMenu", "forwardRef"]
 }

package/FormRow.d.ts

@@ -0,0 +1,2 @@
+export * from './generated/FormRow.js';
+//# sourceMappingURL=FormRow.d.ts.map

package/FormRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRow.d.ts","sourceRoot":"","sources":["src/FormRow.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/FormRow.js

@@ -0,0 +1,2 @@
+export*from"@vaadin/form-layout/vaadin-form-row.js";import{FormRow as o}from"@vaadin/form-layout/vaadin-form-row.js";import*as e from"react";import{createComponent as r}from"./utils/createComponent.js";var t={},n=r({elementClass:o,events:t,react:e,tagName:"vaadin-form-row"});export{n as FormRow,o as FormRowElement};
+//# sourceMappingURL=FormRow.js.map

package/FormRow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/FormRow.ts", "src/generated/FormRow.ts"],
+  "sourcesContent": ["export * from \"@vaadin/form-layout/vaadin-form-row.js\";\nexport * from './generated/FormRow.js';\n", "import type {} from \"@lit/react\";\nimport { FormRow as FormRowElement, } from \"@vaadin/form-layout/vaadin-form-row.js\";\nimport * as React from \"react\";\nimport { createComponent, type WebComponentProps } from \"../utils/createComponent.js\";\nexport { FormRowElement, };\nexport type FormRowEventMap = Readonly<{}>;\nconst events = {} as FormRowEventMap;\nexport type FormRowProps = WebComponentProps<FormRowElement, FormRowEventMap>;\nexport const FormRow = createComponent({\n    elementClass: FormRowElement, events, react: React, tagName: \"vaadin-form-row\"\n});\n"],
+  "mappings": "AAAA,WAAc,yCCCd,OAAS,WAAWA,MAAuB,yCAC3C,UAAYC,MAAW,QACvB,OAAS,mBAAAC,MAA+C,6BAGxD,IAAMC,EAAS,CAAC,EAEHC,EAAUC,EAAgB,CACnC,aAAcC,EAAgB,OAAAH,EAAQ,MAAOI,EAAO,QAAS,iBACjE,CAAC",
+  "names": ["FormRowElement", "React", "createComponent", "events", "FormRow", "createComponent", "FormRowElement", "React"]
+}

package/MasterDetailLayout.d.ts

@@ -0,0 +1,20 @@
+import { MasterDetailLayout as _MasterDetailLayout } from './generated/MasterDetailLayout.js';
+import React from 'react';
+export * from './generated/MasterDetailLayout.js';
+type MasterProps = React.PropsWithChildren<{}>;
+type DetailProps = React.PropsWithChildren<{}>;
+/**
+ * Compares two sets of React children to detect meaningful changes, ignoring text nodes.
+ * Compares by component type and key.
+ *
+ * @param prevChildren Previous children
+ * @param nextChildren Current children
+ * @returns True if the non-text children are meaningfully different, false otherwise
+ */
+export declare function areChildrenDifferent(prevChildren: React.ReactNode, nextChildren: React.ReactNode): boolean;
+declare const MasterDetailLayout: React.ComponentType<React.ComponentProps<typeof _MasterDetailLayout>> & {
+    Master: React.FC<MasterProps>;
+    Detail: React.FC<DetailProps>;
+};
+export { MasterDetailLayout };
+//# sourceMappingURL=MasterDetailLayout.d.ts.map

package/MasterDetailLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetailLayout.d.ts","sourceRoot":"","sources":["src/MasterDetailLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,mBAAmB,EAE1C,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,cAAc,mCAAmC,CAAC;AAElD,KAAK,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAC/C,KAAK,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAW/C;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,SAAS,GAAG,OAAO,CA2B1G;AA0ED,QAAA,MAAM,kBAAkB,EAA0B,KAAK,CAAC,aAAa,CACnE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CACjD,GAAG;IACF,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAC9B,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AAIF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/MasterDetailLayout.js

@@ -0,0 +1,2 @@
+export*from"@vaadin/master-detail-layout/vaadin-master-detail-layout.js";import{MasterDetailLayout as C}from"@vaadin/master-detail-layout/vaadin-master-detail-layout.js";import*as E from"react";import{createComponent as R}from"./utils/createComponent.js";var v={},d=R({elementClass:C,events:v,react:E,tagName:"vaadin-master-detail-layout"});import l,{useEffect as L,useLayoutEffect as P,useRef as p,useState as m}from"react";import{Fragment as b,jsx as f,jsxs as g}from"react/jsx-runtime";function x({children:e}){return e}function T(e,r){let n=l.Children.toArray(e).filter(t=>l.isValidElement(t)),s=l.Children.toArray(r).filter(t=>l.isValidElement(t));if(n.length!==s.length)return!0;for(let t=0;t<n.length;t++){let a=n[t],o=s[t];if(a.type!==o.type||a.key!==o.key)return!0}return!1}function A({children:e}){let r=p(null),n=p(0),s=p(null),t=n.current+1,[a,o]=m("idle"),[u,y]=m(e);return P(()=>{let c=r.current?.closest("vaadin-master-detail-layout");if(c){if(a==="idle"){let i=r.current.childElementCount>0;r.current.setAttribute("slot",i?"detail":"detail-hidden")}else if(a==="starting"){let i=r.current.childElementCount>0,M=s.current.childElementCount>0,h=i&&M?"replace":i?"remove":"add";c._startTransition(h,()=>{o("ready"),y(e),n.current=t})}else if(a==="ready"){let i=r.current.childElementCount>0;r.current.setAttribute("slot",i?"detail":"detail-hidden"),c._finishTransition().then(()=>{o("idle")})}}},[a,u]),L(()=>{a==="idle"&&(T(u,e)?o("starting"):y(e))},[a,e]),g(b,{children:[f("div",{ref:r,style:{display:"contents"},children:u},n.current),a==="starting"&&f("div",{ref:s,style:{display:"none"},children:e},t)]})}var D=d;D.Master=x;D.Detail=A;export{D as MasterDetailLayout,C as MasterDetailLayoutElement,T as areChildrenDifferent};
+//# sourceMappingURL=MasterDetailLayout.js.map

package/MasterDetailLayout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/MasterDetailLayout.tsx", "src/generated/MasterDetailLayout.ts"],
+  "sourcesContent": ["export * from \"@vaadin/master-detail-layout/vaadin-master-detail-layout.js\";\nimport {\n  MasterDetailLayout as _MasterDetailLayout,\n  MasterDetailLayoutElement,\n} from './generated/MasterDetailLayout.js';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nexport * from './generated/MasterDetailLayout.js';\n\ntype MasterProps = React.PropsWithChildren<{}>;\ntype DetailProps = React.PropsWithChildren<{}>;\n\ntype MasterDetailLayoutElementWithInternalAPI = MasterDetailLayoutElement & {\n  _startTransition: (transitionType: 'add' | 'remove' | 'replace', callback: () => void) => void;\n  _finishTransition: () => Promise<void>;\n};\n\nfunction Master({ children }: MasterProps) {\n  return children;\n}\n\n/**\n * Compares two sets of React children to detect meaningful changes, ignoring text nodes.\n * Compares by component type and key.\n *\n * @param prevChildren Previous children\n * @param nextChildren Current children\n * @returns True if the non-text children are meaningfully different, false otherwise\n */\nexport function areChildrenDifferent(prevChildren: React.ReactNode, nextChildren: React.ReactNode): boolean {\n  // Convert to arrays and filter out text nodes\n  const prevArray = React.Children.toArray(prevChildren).filter((child) => React.isValidElement(child));\n  const nextArray = React.Children.toArray(nextChildren).filter((child) => React.isValidElement(child));\n\n  // If lengths are different, children have changed\n  if (prevArray.length !== nextArray.length) {\n    return true;\n  }\n\n  // Compare each element by type and key\n  for (let i = 0; i < prevArray.length; i++) {\n    const prevChild = prevArray[i] as React.ReactElement;\n    const nextChild = nextArray[i] as React.ReactElement;\n\n    // Compare by type\n    if (prevChild.type !== nextChild.type) {\n      return true;\n    }\n\n    // Compare by key (React.Children.toArray adds keys if missing)\n    if (prevChild.key !== nextChild.key) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\nfunction Detail({ children }: DetailProps) {\n  const currentDetailsRef = useRef<HTMLDivElement>(null);\n  const currentDetailsKey = useRef<number>(0);\n  const nextDetailsRef = useRef<HTMLDivElement>(null);\n  const nextDetailsKey = currentDetailsKey.current + 1;\n  const [state, setState] = useState('idle');\n  const [currentChildren, setCurrentChildren] = useState(children);\n\n  useLayoutEffect(() => {\n    const layout = currentDetailsRef.current?.closest(\n      'vaadin-master-detail-layout',\n    ) as MasterDetailLayoutElementWithInternalAPI;\n    if (!layout) {\n      return;\n    }\n\n    if (state === 'idle') {\n      // No transition in progress\n      // Just update slot name\n      const hasChildren = currentDetailsRef.current!.childElementCount > 0;\n      currentDetailsRef.current!.setAttribute('slot', hasChildren ? 'detail' : 'detail-hidden');\n    } else if (state === 'starting') {\n      // Transition is starting and old and (invisible) new details are rendered\n      // Determine the transition type based on old and new detail contents\n      const hasCurrentDetails = currentDetailsRef.current!.childElementCount > 0;\n      const hasNextDetails = nextDetailsRef.current!.childElementCount > 0;\n      const transitionType = hasCurrentDetails && hasNextDetails ? 'replace' : hasCurrentDetails ? 'remove' : 'add';\n      // Start transition to capture old DOM state\n      layout._startTransition(transitionType, () => {\n        // Once old DOM state is captured, render with new details only\n        setState('ready');\n        setCurrentChildren(children);\n        currentDetailsKey.current = nextDetailsKey;\n      });\n    } else if (state === 'ready') {\n      // Transition is ready and new details are rendered\n      // Update slot name to either show or hide the new details\n      const hasChildren = currentDetailsRef.current!.childElementCount > 0;\n      currentDetailsRef.current!.setAttribute('slot', hasChildren ? 'detail' : 'detail-hidden');\n      // Finish transition to animate to new DOM state\n      layout._finishTransition().then(() => {\n        // Transition is finished, reset state\n        setState('idle');\n      });\n    }\n  }, [state, currentChildren]);\n\n  useEffect(() => {\n    if (state !== 'idle') {\n      return;\n    }\n    if (areChildrenDifferent(currentChildren, children)) {\n      setState('starting');\n    } else {\n      setCurrentChildren(children);\n    }\n  }, [state, children]);\n\n  return (\n    <>\n      <div ref={currentDetailsRef} key={currentDetailsKey.current} style={{ display: 'contents' }}>\n        {currentChildren}\n      </div>\n      {state === 'starting' && (\n        <div ref={nextDetailsRef} key={nextDetailsKey} style={{ display: 'none' }}>\n          {children}\n        </div>\n      )}\n    </>\n  );\n}\n\nconst MasterDetailLayout = _MasterDetailLayout as React.ComponentType<\n  React.ComponentProps<typeof _MasterDetailLayout>\n> & {\n  Master: React.FC<MasterProps>;\n  Detail: React.FC<DetailProps>;\n};\nMasterDetailLayout.Master = Master;\nMasterDetailLayout.Detail = Detail;\n\nexport { MasterDetailLayout };\n", "import type {} from \"@lit/react\";\nimport { MasterDetailLayout as MasterDetailLayoutElement, } from \"@vaadin/master-detail-layout/vaadin-master-detail-layout.js\";\nimport * as React from \"react\";\nimport { createComponent, type WebComponentProps } from \"../utils/createComponent.js\";\nexport { MasterDetailLayoutElement, };\nexport type MasterDetailLayoutEventMap = Readonly<{}>;\nconst events = {} as MasterDetailLayoutEventMap;\nexport type MasterDetailLayoutProps = WebComponentProps<MasterDetailLayoutElement, MasterDetailLayoutEventMap>;\nexport const MasterDetailLayout = createComponent({\n    elementClass: MasterDetailLayoutElement, events, react: React, tagName: \"vaadin-master-detail-layout\"\n});\n"],
+  "mappings": "AAAA,WAAc,8DCCd,OAAS,sBAAsBA,MAAkC,8DACjE,UAAYC,MAAW,QACvB,OAAS,mBAAAC,MAA+C,6BAGxD,IAAMC,EAAS,CAAC,EAEHC,EAAqBC,EAAgB,CAC9C,aAAcC,EAA2B,OAAAH,EAAQ,MAAOI,EAAO,QAAS,6BAC5E,CAAC,EDLD,OAAOC,GAAS,aAAAC,EAAW,mBAAAC,EAAiB,UAAAC,EAAQ,YAAAC,MAAgB,QAgHhE,mBAAAC,EACE,OAAAC,EADF,QAAAC,MAAA,oBApGJ,SAASC,EAAO,CAAE,SAAAC,CAAS,EAAgB,CACzC,OAAOA,CACT,CAUO,SAASC,EAAqBC,EAA+BC,EAAwC,CAE1G,IAAMC,EAAYb,EAAM,SAAS,QAAQW,CAAY,EAAE,OAAQG,GAAUd,EAAM,eAAec,CAAK,CAAC,EAC9FC,EAAYf,EAAM,SAAS,QAAQY,CAAY,EAAE,OAAQE,GAAUd,EAAM,eAAec,CAAK,CAAC,EAGpG,GAAID,EAAU,SAAWE,EAAU,OACjC,MAAO,GAIT,QAASC,EAAI,EAAGA,EAAIH,EAAU,OAAQG,IAAK,CACzC,IAAMC,EAAYJ,EAAUG,CAAC,EACvBE,EAAYH,EAAUC,CAAC,EAQ7B,GALIC,EAAU,OAASC,EAAU,MAK7BD,EAAU,MAAQC,EAAU,IAC9B,MAAO,EAEX,CAEA,MAAO,EACT,CAEA,SAASC,EAAO,CAAE,SAAAV,CAAS,EAAgB,CACzC,IAAMW,EAAoBjB,EAAuB,IAAI,EAC/CkB,EAAoBlB,EAAe,CAAC,EACpCmB,EAAiBnB,EAAuB,IAAI,EAC5CoB,EAAiBF,EAAkB,QAAU,EAC7C,CAACG,EAAOC,CAAQ,EAAIrB,EAAS,MAAM,EACnC,CAACsB,EAAiBC,CAAkB,EAAIvB,EAASK,CAAQ,EAE/D,OAAAP,EAAgB,IAAM,CACpB,IAAM0B,EAASR,EAAkB,SAAS,QACxC,6BACF,EACA,GAAKQ,GAIL,GAAIJ,IAAU,OAAQ,CAGpB,IAAMK,EAAcT,EAAkB,QAAS,kBAAoB,EACnEA,EAAkB,QAAS,aAAa,OAAQS,EAAc,SAAW,eAAe,CAC1F,SAAWL,IAAU,WAAY,CAG/B,IAAMM,EAAoBV,EAAkB,QAAS,kBAAoB,EACnEW,EAAiBT,EAAe,QAAS,kBAAoB,EAC7DU,EAAiBF,GAAqBC,EAAiB,UAAYD,EAAoB,SAAW,MAExGF,EAAO,iBAAiBI,EAAgB,IAAM,CAE5CP,EAAS,OAAO,EAChBE,EAAmBlB,CAAQ,EAC3BY,EAAkB,QAAUE,CAC9B,CAAC,CACH,SAAWC,IAAU,QAAS,CAG5B,IAAMK,EAAcT,EAAkB,QAAS,kBAAoB,EACnEA,EAAkB,QAAS,aAAa,OAAQS,EAAc,SAAW,eAAe,EAExFD,EAAO,kBAAkB,EAAE,KAAK,IAAM,CAEpCH,EAAS,MAAM,CACjB,CAAC,CACH,EACF,EAAG,CAACD,EAAOE,CAAe,CAAC,EAE3BzB,EAAU,IAAM,CACVuB,IAAU,SAGVd,EAAqBgB,EAAiBjB,CAAQ,EAChDgB,EAAS,UAAU,EAEnBE,EAAmBlB,CAAQ,EAE/B,EAAG,CAACe,EAAOf,CAAQ,CAAC,EAGlBF,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,IAAKc,EAAmD,MAAO,CAAE,QAAS,UAAW,EACvF,SAAAM,GAD+BL,EAAkB,OAEpD,EACCG,IAAU,YACTlB,EAAC,OAAI,IAAKgB,EAAqC,MAAO,CAAE,QAAS,MAAO,EACrE,SAAAb,GAD4Bc,CAE/B,GAEJ,CAEJ,CAEA,IAAMU,EAAqBA,EAM3BA,EAAmB,OAASzB,EAC5ByB,EAAmB,OAASd",
+  "names": ["MasterDetailLayoutElement", "React", "createComponent", "events", "MasterDetailLayout", "createComponent", "MasterDetailLayoutElement", "React", "React", "useEffect", "useLayoutEffect", "useRef", "useState", "Fragment", "jsx", "jsxs", "Master", "children", "areChildrenDifferent", "prevChildren", "nextChildren", "prevArray", "child", "nextArray", "i", "prevChild", "nextChild", "Detail", "currentDetailsRef", "currentDetailsKey", "nextDetailsRef", "nextDetailsKey", "state", "setState", "currentChildren", "setCurrentChildren", "layout", "hasChildren", "hasCurrentDetails", "hasNextDetails", "transitionType", "MasterDetailLayout"]
+}

package/MenuBar.d.ts

@@ -10,7 +10,7 @@ export type MenuBarItem<TItemData extends object = object> = Omit<_MenuBarItem<T
     children?: Array<SubMenuItem<TItemData>>;
 };
 export type MenuBarItemSelectedEvent<TItem extends MenuBarItem = MenuBarItem> = CustomEvent<{
-    value: TItem;
+    value: MenuBarItem<TItem>;
 }>;
 export type MenuBarProps<TItem extends MenuBarItem = MenuBarItem> = Partial<Omit<_MenuBarProps, 'items' | 'onItemSelected'>> & Readonly<{
     items?: Array<TItem>;

package/MenuBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuBar.d.ts","sourceRoot":"","sources":["src/MenuBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,YAAY,IAAI,aAAa,EAClC,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,wBAAwB,CAAC;AAGhC,cAAc,wBAAwB,CAAC;AAEvC,MAAM,MAAM,WAAW,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACrH,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACrH,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW,IAAI,WAAW,CAAC;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAE9G,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC,GAC1H,QAAQ,CAAC;IACP,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAErB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC,CAAC;AAyBL,QAAA,MAAM,gBAAgB,EAA0B,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW,EACtF,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,cAAc,CAAC,KACvD,YAAY,GAAG,IAAI,CAAC;AAEzB,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"MenuBar.d.ts","sourceRoot":"","sources":["src/MenuBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,YAAY,IAAI,aAAa,EAClC,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,wBAAwB,CAAC;AAGhC,cAAc,wBAAwB,CAAC;AAEvC,MAAM,MAAM,WAAW,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACrH,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACrH,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW,IAAI,WAAW,CAAC;IAAE,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,CAAA;CAAE,CAAC,CAAC;AAE3H,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC,GAC1H,QAAQ,CAAC;IACP,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAErB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC,CAAC;AAyBL,QAAA,MAAM,gBAAgB,EAA0B,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW,EACtF,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,cAAc,CAAC,KACvD,YAAY,GAAG,IAAI,CAAC;AAEzB,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,CAAC"}

package/MenuBar.js

@@ -1,2 +1,2 @@
-export*from"@vaadin/menu-bar/vaadin-menu-bar.js";import{forwardRef as I}from"react";import{MenuBar as u}from"@vaadin/menu-bar/vaadin-menu-bar.js";import*as p from"react";import{createComponent as M}from"./utils/createComponent.js";var s={onItemSelected:"item-selected"},a=M({elementClass:u,events:s,react:p,tagName:"vaadin-menu-bar"});import{getOriginalItem as l,mapItemsWithComponents as c}from"./utils/mapItemsWithComponents.js";import{jsxs as B}from"react/jsx-runtime";function d(e,r){let[m,o]=c(e.items,"vaadin-menu-bar-item"),n=e.onItemSelected;return B(a,{...e,ref:r,items:o,onItemSelected:n?t=>{Object.assign(t.detail,{value:l(t.detail.value)}),n(t)}:void 0,children:[e.children,m]})}var x=I(d);export{x as MenuBar,u as MenuBarElement};
+export*from"@vaadin/menu-bar/vaadin-menu-bar.js";import{forwardRef as s}from"react";import{MenuBar as u}from"@vaadin/menu-bar/vaadin-menu-bar.js";import*as p from"react";import{createComponent as M}from"./utils/createComponent.js";var I={onItemSelected:"item-selected"},a=M({elementClass:u,events:I,react:p,tagName:"vaadin-menu-bar"});import{getOriginalItem as l,mapItemsWithComponents as c}from"./utils/mapItemsWithComponents.js";import{jsxs as B}from"react/jsx-runtime";function d(e,r){let[m,o]=c(e.items,"vaadin-menu-bar-item"),n=e.onItemSelected;return B(a,{...e,ref:r,items:o,onItemSelected:n?t=>{Object.assign(t.detail,{value:l(t.detail.value)}),n(t)}:void 0,children:[e.children,m]})}var x=s(d);export{x as MenuBar,u as MenuBarElement};
 //# sourceMappingURL=MenuBar.js.map

package/MenuBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/MenuBar.tsx", "src/generated/MenuBar.ts"],
-  "sourcesContent": ["export * from \"@vaadin/menu-bar/vaadin-menu-bar.js\";\nimport { type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';\nimport {\n  MenuBar as _MenuBar,\n  type MenuBarElement,\n  type MenuBarProps as _MenuBarProps,\n  type MenuBarItem as _MenuBarItem,\n  type SubMenuItem as _SubMenuItem,\n} from './generated/MenuBar.js';\nimport { getOriginalItem, mapItemsWithComponents } from './utils/mapItemsWithComponents.js';\n\nexport * from './generated/MenuBar.js';\n\nexport type SubMenuItem<TItemData extends object = object> = Omit<_SubMenuItem<TItemData>, 'component' | 'children'> & {\n  component?: ReactElement | string;\n\n  children?: Array<SubMenuItem<TItemData>>;\n};\n\nexport type MenuBarItem<TItemData extends object = object> = Omit<_MenuBarItem<TItemData>, 'component' | 'children'> & {\n  component?: ReactElement | string;\n\n  children?: Array<SubMenuItem<TItemData>>;\n};\n\nexport type MenuBarItemSelectedEvent<TItem extends MenuBarItem = MenuBarItem> = CustomEvent<{ value: TItem }>;\n\nexport type MenuBarProps<TItem extends MenuBarItem = MenuBarItem> = Partial<Omit<_MenuBarProps, 'items' | 'onItemSelected'>> &\n  Readonly<{\n    items?: Array<TItem>;\n\n    onItemSelected?: (event: MenuBarItemSelectedEvent<TItem>) => void;\n  }>;\n\nfunction MenuBar<TItem extends MenuBarItem = MenuBarItem>(props: MenuBarProps<TItem>, ref: ForwardedRef<MenuBarElement>): ReactElement | null {\n  const [itemPortals, webComponentItems] = mapItemsWithComponents(props.items, 'vaadin-menu-bar-item');\n\n  const onItemSelected = props.onItemSelected;\n  const mappedOnItemSelected = onItemSelected\n    ? (event: CustomEvent<{ value: _MenuBarItem }>) => {\n        // Replace the mapped web component item with the original item\n        Object.assign(event.detail, {\n          value: getOriginalItem(event.detail.value),\n        });\n\n        onItemSelected(event as MenuBarItemSelectedEvent<TItem>);\n      }\n    : undefined;\n\n  return (\n    <_MenuBar {...props} ref={ref} items={webComponentItems} onItemSelected={mappedOnItemSelected}>\n      {props.children}\n      {itemPortals}\n    </_MenuBar>\n  );\n}\n\nconst ForwardedMenuBar = forwardRef(MenuBar) as <TItem extends MenuBarItem = MenuBarItem>(\n  props: MenuBarProps<TItem> & RefAttributes<MenuBarElement>,\n) => ReactElement | null;\n\nexport { ForwardedMenuBar as MenuBar };\n", "import type { EventName } from \"@lit/react\";\nimport { MenuBar as MenuBarElement, type MenuBarEventMap as _MenuBarEventMap, } from \"@vaadin/menu-bar/vaadin-menu-bar.js\";\nimport * as React from \"react\";\nimport { createComponent, type WebComponentProps } from \"../utils/createComponent.js\";\nexport { MenuBarElement, };\nexport type MenuBarEventMap = Readonly<{\n    onItemSelected: EventName<_MenuBarEventMap[\"item-selected\"]>;\n}>;\nconst events = { onItemSelected: \"item-selected\" } as MenuBarEventMap;\nexport type MenuBarProps = WebComponentProps<MenuBarElement, MenuBarEventMap>;\nexport const MenuBar = createComponent({\n    elementClass: MenuBarElement, events, react: React, tagName: \"vaadin-menu-bar\"\n});\n"],
+  "sourcesContent": ["export * from \"@vaadin/menu-bar/vaadin-menu-bar.js\";\nimport { type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';\nimport {\n  MenuBar as _MenuBar,\n  type MenuBarElement,\n  type MenuBarProps as _MenuBarProps,\n  type MenuBarItem as _MenuBarItem,\n  type SubMenuItem as _SubMenuItem,\n} from './generated/MenuBar.js';\nimport { getOriginalItem, mapItemsWithComponents } from './utils/mapItemsWithComponents.js';\n\nexport * from './generated/MenuBar.js';\n\nexport type SubMenuItem<TItemData extends object = object> = Omit<_SubMenuItem<TItemData>, 'component' | 'children'> & {\n  component?: ReactElement | string;\n\n  children?: Array<SubMenuItem<TItemData>>;\n};\n\nexport type MenuBarItem<TItemData extends object = object> = Omit<_MenuBarItem<TItemData>, 'component' | 'children'> & {\n  component?: ReactElement | string;\n\n  children?: Array<SubMenuItem<TItemData>>;\n};\n\nexport type MenuBarItemSelectedEvent<TItem extends MenuBarItem = MenuBarItem> = CustomEvent<{ value: MenuBarItem<TItem> }>;\n\nexport type MenuBarProps<TItem extends MenuBarItem = MenuBarItem> = Partial<Omit<_MenuBarProps, 'items' | 'onItemSelected'>> &\n  Readonly<{\n    items?: Array<TItem>;\n\n    onItemSelected?: (event: MenuBarItemSelectedEvent<TItem>) => void;\n  }>;\n\nfunction MenuBar<TItem extends MenuBarItem = MenuBarItem>(props: MenuBarProps<TItem>, ref: ForwardedRef<MenuBarElement>): ReactElement | null {\n  const [itemPortals, webComponentItems] = mapItemsWithComponents(props.items, 'vaadin-menu-bar-item');\n\n  const onItemSelected = props.onItemSelected;\n  const mappedOnItemSelected = onItemSelected\n    ? (event: CustomEvent<{ value: _MenuBarItem }>) => {\n        // Replace the mapped web component item with the original item\n        Object.assign(event.detail, {\n          value: getOriginalItem(event.detail.value),\n        });\n\n        onItemSelected(event as MenuBarItemSelectedEvent<TItem>);\n      }\n    : undefined;\n\n  return (\n    <_MenuBar {...props} ref={ref} items={webComponentItems} onItemSelected={mappedOnItemSelected}>\n      {props.children}\n      {itemPortals}\n    </_MenuBar>\n  );\n}\n\nconst ForwardedMenuBar = forwardRef(MenuBar) as <TItem extends MenuBarItem = MenuBarItem>(\n  props: MenuBarProps<TItem> & RefAttributes<MenuBarElement>,\n) => ReactElement | null;\n\nexport { ForwardedMenuBar as MenuBar };\n", "import type { EventName } from \"@lit/react\";\nimport { MenuBar as MenuBarElement, type MenuBarEventMap as _MenuBarEventMap, } from \"@vaadin/menu-bar/vaadin-menu-bar.js\";\nimport * as React from \"react\";\nimport { createComponent, type WebComponentProps } from \"../utils/createComponent.js\";\nexport { MenuBarElement, };\nexport type MenuBarEventMap = Readonly<{\n    onItemSelected: EventName<_MenuBarEventMap[\"item-selected\"]>;\n}>;\nconst events = { onItemSelected: \"item-selected\" } as MenuBarEventMap;\nexport type MenuBarProps = WebComponentProps<MenuBarElement, MenuBarEventMap>;\nexport const MenuBar = createComponent({\n    elementClass: MenuBarElement, events, react: React, tagName: \"vaadin-menu-bar\"\n});\n"],
   "mappings": "AAAA,WAAc,sCACd,OAA4B,cAAAA,MAAyD,QCArF,OAAS,WAAWC,MAAiE,sCACrF,UAAYC,MAAW,QACvB,OAAS,mBAAAC,MAA+C,6BAKxD,IAAMC,EAAS,CAAE,eAAgB,eAAgB,EAEpCC,EAAUC,EAAgB,CACnC,aAAcC,EAAgB,OAAAH,EAAQ,MAAOI,EAAO,QAAS,iBACjE,CAAC,EDHD,OAAS,mBAAAC,EAAiB,0BAAAC,MAA8B,oCAyCpD,eAAAC,MAAA,oBAhBJ,SAASC,EAAiDC,EAA4BC,EAAwD,CAC5I,GAAM,CAACC,EAAaC,CAAiB,EAAIN,EAAuBG,EAAM,MAAO,sBAAsB,EAE7FI,EAAiBJ,EAAM,eAY7B,OACEF,EAACC,EAAA,CAAU,GAAGC,EAAO,IAAKC,EAAK,MAAOE,EAAmB,eAZ9BC,EACxBC,GAAgD,CAE/C,OAAO,OAAOA,EAAM,OAAQ,CAC1B,MAAOT,EAAgBS,EAAM,OAAO,KAAK,CAC3C,CAAC,EAEDD,EAAeC,CAAwC,CACzD,EACA,OAIC,UAAAL,EAAM,SACNE,GACH,CAEJ,CAEA,IAAMI,EAAmBC,EAAWR,CAAO",
   "names": ["forwardRef", "MenuBarElement", "React", "createComponent", "events", "MenuBar", "createComponent", "MenuBarElement", "React", "getOriginalItem", "mapItemsWithComponents", "jsxs", "MenuBar", "props", "ref", "itemPortals", "webComponentItems", "onItemSelected", "event", "ForwardedMenuBar", "forwardRef"]
 }

package/css/lumo/mixins/RequiredField.css

@@ -6,10 +6,10 @@
     color: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
     font-weight: var(--vaadin-input-field-label-font-weight, 500);
     font-size: var(--vaadin-input-field-label-font-size, var(--lumo-font-size-s));
-    margin-left: calc(var(--lumo-border-radius-m) / 4);
     transition: color 0.2s;
     line-height: 1;
-    padding-right: 1em;
+    padding-inline-start: calc(var(--lumo-border-radius-m) / 4);
+    padding-inline-end: 1em;
     padding-bottom: 0.5em;
     /* As a workaround for diacritics being cut off, add a top padding and a
     negative margin to compensate */
@@ -93,16 +93,6 @@
 
   /* RTL specific styles */
 
-  :host([dir='rtl']) [part='label'] {
-    margin-left: 0;
-    margin-right: calc(var(--lumo-border-radius-m) / 4);
-  }
-
-  :host([dir='rtl']) [part='label'] {
-    padding-left: 1em;
-    padding-right: 0;
-  }
-
   :host([dir='rtl']) [part='required-indicator']::after {
     right: auto;
     left: 0;

package/generated/MasterDetailLayout.d.ts

@@ -0,0 +1,9 @@
+import { MasterDetailLayout as MasterDetailLayoutElement } from "@vaadin/master-detail-layout/vaadin-master-detail-layout.js";
+import * as React from "react";
+import { type WebComponentProps } from "../utils/createComponent.js";
+export * from "@vaadin/master-detail-layout/vaadin-master-detail-layout.js";
+export { MasterDetailLayoutElement, };
+export type MasterDetailLayoutEventMap = Readonly<{}>;
+export type MasterDetailLayoutProps = WebComponentProps<MasterDetailLayoutElement, MasterDetailLayoutEventMap>;
+export declare const MasterDetailLayout: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<MasterDetailLayoutElement, Readonly<{}>>> & React.RefAttributes<MasterDetailLayoutElement>) => React.ReactElement | null;
+//# sourceMappingURL=MasterDetailLayout.d.ts.map

package/generated/MasterDetailLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetailLayout.d.ts","sourceRoot":"","sources":["../src/generated/MasterDetailLayout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,IAAI,yBAAyB,EAAG,MAAM,6DAA6D,CAAC;AAC/H,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,6DAA6D,CAAC;AAC5E,OAAO,EAAE,yBAAyB,GAAG,CAAC;AACtC,MAAM,MAAM,0BAA0B,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEtD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,yBAAyB,EAAE,0BAA0B,CAAC,CAAC;AAC/G,eAAO,MAAM,kBAAkB,wMAE7B,CAAC"}

package/index.d.ts

@@ -37,11 +37,12 @@ export * from "./Grid.js";
 export * from "./HorizontalLayout.js";
 export * from "./Iconset.js";
 export * from "./Icon.js";
-export * from "./Item.js";
 export * from "./IntegerField.js";
+export * from "./Item.js";
 export * from "./ListBox.js";
 export * from "./LoginForm.js";
 export * from "./LoginOverlay.js";
+export * from "./MasterDetailLayout.js";
 export * from "./MenuBar.js";
 export * from "./MessageInput.js";
 export * from "./Message.js";

package/index.js

@@ -37,11 +37,12 @@ export * from "./Grid.js";
 export * from "./HorizontalLayout.js";
 export * from "./Iconset.js";
 export * from "./Icon.js";
-export * from "./Item.js";
 export * from "./IntegerField.js";
+export * from "./Item.js";
 export * from "./ListBox.js";
 export * from "./LoginForm.js";
 export * from "./LoginOverlay.js";
+export * from "./MasterDetailLayout.js";
 export * from "./MenuBar.js";
 export * from "./MessageInput.js";
 export * from "./Message.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/react-components",
-  "version": "24.8.0-alpha1",
+  "version": "24.8.0-alpha12",
   "publishConfig": {
     "access": "public"
   },
@@ -27,65 +27,66 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.7",
-    "@vaadin/a11y-base": "24.8.0-alpha1",
-    "@vaadin/accordion": "24.8.0-alpha1",
-    "@vaadin/app-layout": "24.8.0-alpha1",
-    "@vaadin/avatar": "24.8.0-alpha1",
-    "@vaadin/avatar-group": "24.8.0-alpha1",
-    "@vaadin/button": "24.8.0-alpha1",
-    "@vaadin/card": "24.8.0-alpha1",
-    "@vaadin/checkbox": "24.8.0-alpha1",
-    "@vaadin/checkbox-group": "24.8.0-alpha1",
-    "@vaadin/combo-box": "24.8.0-alpha1",
-    "@vaadin/component-base": "24.8.0-alpha1",
-    "@vaadin/confirm-dialog": "24.8.0-alpha1",
-    "@vaadin/context-menu": "24.8.0-alpha1",
-    "@vaadin/custom-field": "24.8.0-alpha1",
-    "@vaadin/date-picker": "24.8.0-alpha1",
-    "@vaadin/date-time-picker": "24.8.0-alpha1",
-    "@vaadin/details": "24.8.0-alpha1",
-    "@vaadin/dialog": "24.8.0-alpha1",
-    "@vaadin/email-field": "24.8.0-alpha1",
-    "@vaadin/field-base": "24.8.0-alpha1",
-    "@vaadin/field-highlighter": "24.8.0-alpha1",
-    "@vaadin/form-layout": "24.8.0-alpha1",
-    "@vaadin/grid": "24.8.0-alpha1",
-    "@vaadin/horizontal-layout": "24.8.0-alpha1",
-    "@vaadin/icon": "24.8.0-alpha1",
-    "@vaadin/icons": "24.8.0-alpha1",
-    "@vaadin/input-container": "24.8.0-alpha1",
-    "@vaadin/integer-field": "24.8.0-alpha1",
-    "@vaadin/item": "24.8.0-alpha1",
-    "@vaadin/list-box": "24.8.0-alpha1",
-    "@vaadin/lit-renderer": "24.8.0-alpha1",
-    "@vaadin/login": "24.8.0-alpha1",
-    "@vaadin/menu-bar": "24.8.0-alpha1",
-    "@vaadin/message-input": "24.8.0-alpha1",
-    "@vaadin/message-list": "24.8.0-alpha1",
-    "@vaadin/multi-select-combo-box": "24.8.0-alpha1",
-    "@vaadin/notification": "24.8.0-alpha1",
-    "@vaadin/number-field": "24.8.0-alpha1",
-    "@vaadin/overlay": "24.8.0-alpha1",
-    "@vaadin/password-field": "24.8.0-alpha1",
-    "@vaadin/popover": "24.8.0-alpha1",
-    "@vaadin/progress-bar": "24.8.0-alpha1",
-    "@vaadin/radio-group": "24.8.0-alpha1",
-    "@vaadin/scroller": "24.8.0-alpha1",
-    "@vaadin/select": "24.8.0-alpha1",
-    "@vaadin/side-nav": "24.8.0-alpha1",
-    "@vaadin/split-layout": "24.8.0-alpha1",
-    "@vaadin/tabs": "24.8.0-alpha1",
-    "@vaadin/tabsheet": "24.8.0-alpha1",
-    "@vaadin/text-area": "24.8.0-alpha1",
-    "@vaadin/text-field": "24.8.0-alpha1",
-    "@vaadin/time-picker": "24.8.0-alpha1",
-    "@vaadin/tooltip": "24.8.0-alpha1",
-    "@vaadin/upload": "24.8.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha1",
-    "@vaadin/vertical-layout": "24.8.0-alpha1",
-    "@vaadin/virtual-list": "24.8.0-alpha1"
+    "@vaadin/a11y-base": "24.8.0-alpha12",
+    "@vaadin/accordion": "24.8.0-alpha12",
+    "@vaadin/app-layout": "24.8.0-alpha12",
+    "@vaadin/avatar": "24.8.0-alpha12",
+    "@vaadin/avatar-group": "24.8.0-alpha12",
+    "@vaadin/button": "24.8.0-alpha12",
+    "@vaadin/card": "24.8.0-alpha12",
+    "@vaadin/checkbox": "24.8.0-alpha12",
+    "@vaadin/checkbox-group": "24.8.0-alpha12",
+    "@vaadin/combo-box": "24.8.0-alpha12",
+    "@vaadin/component-base": "24.8.0-alpha12",
+    "@vaadin/confirm-dialog": "24.8.0-alpha12",
+    "@vaadin/context-menu": "24.8.0-alpha12",
+    "@vaadin/custom-field": "24.8.0-alpha12",
+    "@vaadin/date-picker": "24.8.0-alpha12",
+    "@vaadin/date-time-picker": "24.8.0-alpha12",
+    "@vaadin/details": "24.8.0-alpha12",
+    "@vaadin/dialog": "24.8.0-alpha12",
+    "@vaadin/email-field": "24.8.0-alpha12",
+    "@vaadin/field-base": "24.8.0-alpha12",
+    "@vaadin/field-highlighter": "24.8.0-alpha12",
+    "@vaadin/form-layout": "24.8.0-alpha12",
+    "@vaadin/grid": "24.8.0-alpha12",
+    "@vaadin/horizontal-layout": "24.8.0-alpha12",
+    "@vaadin/icon": "24.8.0-alpha12",
+    "@vaadin/icons": "24.8.0-alpha12",
+    "@vaadin/input-container": "24.8.0-alpha12",
+    "@vaadin/integer-field": "24.8.0-alpha12",
+    "@vaadin/item": "24.8.0-alpha12",
+    "@vaadin/list-box": "24.8.0-alpha12",
+    "@vaadin/lit-renderer": "24.8.0-alpha12",
+    "@vaadin/login": "24.8.0-alpha12",
+    "@vaadin/master-detail-layout": "24.8.0-alpha12",
+    "@vaadin/menu-bar": "24.8.0-alpha12",
+    "@vaadin/message-input": "24.8.0-alpha12",
+    "@vaadin/message-list": "24.8.0-alpha12",
+    "@vaadin/multi-select-combo-box": "24.8.0-alpha12",
+    "@vaadin/notification": "24.8.0-alpha12",
+    "@vaadin/number-field": "24.8.0-alpha12",
+    "@vaadin/overlay": "24.8.0-alpha12",
+    "@vaadin/password-field": "24.8.0-alpha12",
+    "@vaadin/popover": "24.8.0-alpha12",
+    "@vaadin/progress-bar": "24.8.0-alpha12",
+    "@vaadin/radio-group": "24.8.0-alpha12",
+    "@vaadin/scroller": "24.8.0-alpha12",
+    "@vaadin/select": "24.8.0-alpha12",
+    "@vaadin/side-nav": "24.8.0-alpha12",
+    "@vaadin/split-layout": "24.8.0-alpha12",
+    "@vaadin/tabs": "24.8.0-alpha12",
+    "@vaadin/tabsheet": "24.8.0-alpha12",
+    "@vaadin/text-area": "24.8.0-alpha12",
+    "@vaadin/text-field": "24.8.0-alpha12",
+    "@vaadin/time-picker": "24.8.0-alpha12",
+    "@vaadin/tooltip": "24.8.0-alpha12",
+    "@vaadin/upload": "24.8.0-alpha12",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha12",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha12",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha12",
+    "@vaadin/vertical-layout": "24.8.0-alpha12",
+    "@vaadin/virtual-list": "24.8.0-alpha12"
   },
   "author": "Vaadin Ltd.",
   "license": "Apache-2.0",
@@ -220,6 +221,10 @@
       "types": "./FormLayout.d.ts",
       "default": "./FormLayout.js"
     },
+    "./FormRow.js": {
+      "types": "./FormRow.d.ts",
+      "default": "./FormRow.js"
+    },
     "./Grid.js": {
       "types": "./Grid.d.ts",
       "default": "./Grid.js"
@@ -292,6 +297,10 @@
       "types": "./LoginOverlay.d.ts",
       "default": "./LoginOverlay.js"
     },
+    "./MasterDetailLayout.js": {
+      "types": "./MasterDetailLayout.d.ts",
+      "default": "./MasterDetailLayout.js"
+    },
     "./MenuBar.js": {
       "types": "./MenuBar.d.ts",
       "default": "./MenuBar.js"
@@ -425,6 +434,7 @@
     "./EmailField": "./EmailField.js",
     "./FormItem": "./FormItem.js",
     "./FormLayout": "./FormLayout.js",
+    "./FormRow": "./FormRow.js",
     "./Grid": "./Grid.js",
     "./GridColumn": "./GridColumn.js",
     "./GridColumnGroup": "./GridColumnGroup.js",
@@ -443,6 +453,7 @@
     "./ListBox": "./ListBox.js",
     "./LoginForm": "./LoginForm.js",
     "./LoginOverlay": "./LoginOverlay.js",
+    "./MasterDetailLayout": "./MasterDetailLayout.js",
     "./MenuBar": "./MenuBar.js",
     "./Message": "./Message.js",
     "./MessageInput": "./MessageInput.js",

package/utils/createComponent.js

@@ -1,2 +1,2 @@
-import{createComponent as n}from"@lit/react";window.Vaadin??={},window.Vaadin.registrations??=[],window.Vaadin.registrations.push({is:"@vaadin/react-components",version:"24.8.0-alpha1"});function s(e){const{elementClass:t}=e;return n("_properties"in t?{...e,elementClass:{name:t.name,prototype:{...t._properties,hidden:Boolean}}}:e)}export{s as createComponent};
+import{createComponent as n}from"@lit/react";window.Vaadin??={},window.Vaadin.registrations??=[],window.Vaadin.registrations.push({is:"@vaadin/react-components",version:"24.8.0-alpha12"});function s(e){const{elementClass:t}=e;return n("_properties"in t?{...e,elementClass:{name:t.name,prototype:{...t._properties,hidden:Boolean}}}:e)}export{s as createComponent};
 //# sourceMappingURL=createComponent.js.map

package/utils/createComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/utils/createComponent.ts"],
-  "sourcesContent": ["import { createComponent as _createComponent, type EventName } from '@lit/react';\nimport type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';\nimport type React from 'react';\nimport type { RefAttributes } from 'react';\n\ndeclare const __VERSION__: string;\n\ndeclare global {\n  interface VaadinRegistration {\n    is: string;\n    version: string;\n  }\n\n  interface Vaadin {\n    registrations?: VaadinRegistration[];\n  }\n\n  interface Window {\n    // @ts-expect-error: Different declaration from one of the dependencies.\n    Vaadin?: Vaadin;\n  }\n}\n\nwindow.Vaadin ??= {};\nwindow.Vaadin.registrations ??= [];\nwindow.Vaadin.registrations.push({\n  is: '@vaadin/react-components',\n  version: /* updated-by-script */ '24.8.0-alpha1',\n});\n\n// TODO: Remove when types from @lit-labs/react are exported\nexport type EventNames = Record<string, EventName | string>;\ntype Constructor<T> = { new (): T; name: string };\ntype PolymerConstructor<T> = Constructor<T> & { _properties: Record<string, unknown> };\ntype Options<I extends HTMLElement, E extends EventNames = {}> = Readonly<{\n  displayName?: string;\n  elementClass: Constructor<I> | PolymerConstructor<I>;\n  events?: E;\n  react: typeof window.React;\n  tagName: string;\n}>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]?: R[K] extends EventName ? (e: R[K]['__eventType']) => void : (e: Event) => void;\n};\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO: LoginOverlay has \"autofocus\" property, so we add it back manually.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>> & { autofocus?: boolean };\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n  React.HTMLAttributes<I>,\n  // Prefer type of provided event handler props or those on element over\n  // built-in HTMLAttributes\n  keyof E | keyof ElementProps<I>\n> &\n  EventListeners<E> &\n  ElementProps<I>;\n\nexport type ThemedWebComponentProps<\n  I extends ThemePropertyMixinClass & HTMLElement,\n  E extends EventNames = {},\n> = ComponentProps<I, E> & {\n  /**\n   * Attribute that can be used by the component to apply built-in style variants,\n   * or to propagate its value to the sub-components in Shadow DOM.\n   *\n   * @see ThemePropertyMixinClass#_theme\n   */\n  theme?: string;\n};\n\ntype AllWebComponentProps<I extends HTMLElement, E extends EventNames = {}> = I extends ThemePropertyMixinClass\n  ? ThemedWebComponentProps<I, E>\n  : ComponentProps<I, E>;\n\nexport type WebComponentProps<I extends HTMLElement, E extends EventNames = {}> = Partial<AllWebComponentProps<I, E>>;\n\n// We need a separate declaration here; otherwise, the TypeScript fails into the\n// endless loop trying to resolve the typings.\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>(\n  options: Options<I, E>,\n): (props: WebComponentProps<I, E> & RefAttributes<I>) => React.ReactElement | null;\n\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>(options: Options<I, E>): any {\n  const { elementClass } = options;\n\n  return _createComponent(\n    '_properties' in elementClass\n      ? {\n          ...options,\n          // TODO: improve or remove the Polymer workaround\n          // 'createComponent' relies on key presence on the custom element class,\n          // but Polymer defines properties on the prototype when the first element\n          // is created. Workaround: pass a mock object with properties in\n          // the prototype.\n          elementClass: {\n            // @ts-expect-error: it is a specific workaround for Polymer classes.\n            name: elementClass.name,\n            prototype: { ...elementClass._properties, hidden: Boolean },\n          },\n        }\n      : options,\n  );\n}\n"],
-  "mappings": "AAAA,OAAS,mBAAmBA,MAAwC,aAuBpE,OAAO,SAAW,CAAC,EACnB,OAAO,OAAO,gBAAkB,CAAC,EACjC,OAAO,OAAO,cAAc,KAAK,CAC/B,GAAI,2BACJ,QAAiC,eACnC,CAAC,EA2DM,SAASC,EAAkEC,EAA6B,CAC7G,KAAM,CAAE,aAAAC,CAAa,EAAID,EAEzB,OAAOF,EACL,gBAAiBG,EACb,CACE,GAAGD,EAMH,aAAc,CAEZ,KAAMC,EAAa,KACnB,UAAW,CAAE,GAAGA,EAAa,YAAa,OAAQ,OAAQ,CAC5D,CACF,EACAD,CACN,CACF",
+  "sourcesContent": ["import { createComponent as _createComponent, type EventName } from '@lit/react';\nimport type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';\nimport type React from 'react';\nimport type { RefAttributes } from 'react';\n\ndeclare const __VERSION__: string;\n\ndeclare global {\n  interface VaadinRegistration {\n    is: string;\n    version: string;\n  }\n\n  interface Vaadin {\n    registrations?: VaadinRegistration[];\n  }\n\n  interface Window {\n    // @ts-expect-error: Different declaration from one of the dependencies.\n    Vaadin?: Vaadin;\n  }\n}\n\nwindow.Vaadin ??= {};\nwindow.Vaadin.registrations ??= [];\nwindow.Vaadin.registrations.push({\n  is: '@vaadin/react-components',\n  version: /* updated-by-script */ '24.8.0-alpha12',\n});\n\n// TODO: Remove when types from @lit-labs/react are exported\nexport type EventNames = Record<string, EventName | string>;\ntype Constructor<T> = { new (): T; name: string };\ntype PolymerConstructor<T> = Constructor<T> & { _properties: Record<string, unknown> };\ntype Options<I extends HTMLElement, E extends EventNames = {}> = Readonly<{\n  displayName?: string;\n  elementClass: Constructor<I> | PolymerConstructor<I>;\n  events?: E;\n  react: typeof window.React;\n  tagName: string;\n}>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]?: R[K] extends EventName ? (e: R[K]['__eventType']) => void : (e: Event) => void;\n};\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO: LoginOverlay has \"autofocus\" property, so we add it back manually.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>> & { autofocus?: boolean };\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n  React.HTMLAttributes<I>,\n  // Prefer type of provided event handler props or those on element over\n  // built-in HTMLAttributes\n  keyof E | keyof ElementProps<I>\n> &\n  EventListeners<E> &\n  ElementProps<I>;\n\nexport type ThemedWebComponentProps<\n  I extends ThemePropertyMixinClass & HTMLElement,\n  E extends EventNames = {},\n> = ComponentProps<I, E> & {\n  /**\n   * Attribute that can be used by the component to apply built-in style variants,\n   * or to propagate its value to the sub-components in Shadow DOM.\n   *\n   * @see ThemePropertyMixinClass#_theme\n   */\n  theme?: string;\n};\n\ntype AllWebComponentProps<I extends HTMLElement, E extends EventNames = {}> = I extends ThemePropertyMixinClass\n  ? ThemedWebComponentProps<I, E>\n  : ComponentProps<I, E>;\n\nexport type WebComponentProps<I extends HTMLElement, E extends EventNames = {}> = Partial<AllWebComponentProps<I, E>>;\n\n// We need a separate declaration here; otherwise, the TypeScript fails into the\n// endless loop trying to resolve the typings.\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>(\n  options: Options<I, E>,\n): (props: WebComponentProps<I, E> & RefAttributes<I>) => React.ReactElement | null;\n\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>(options: Options<I, E>): any {\n  const { elementClass } = options;\n\n  return _createComponent(\n    '_properties' in elementClass\n      ? {\n          ...options,\n          // TODO: improve or remove the Polymer workaround\n          // 'createComponent' relies on key presence on the custom element class,\n          // but Polymer defines properties on the prototype when the first element\n          // is created. Workaround: pass a mock object with properties in\n          // the prototype.\n          elementClass: {\n            // @ts-expect-error: it is a specific workaround for Polymer classes.\n            name: elementClass.name,\n            prototype: { ...elementClass._properties, hidden: Boolean },\n          },\n        }\n      : options,\n  );\n}\n"],
+  "mappings": "AAAA,OAAS,mBAAmBA,MAAwC,aAuBpE,OAAO,SAAW,CAAC,EACnB,OAAO,OAAO,gBAAkB,CAAC,EACjC,OAAO,OAAO,cAAc,KAAK,CAC/B,GAAI,2BACJ,QAAiC,gBACnC,CAAC,EA2DM,SAASC,EAAkEC,EAA6B,CAC7G,KAAM,CAAE,aAAAC,CAAa,EAAID,EAEzB,OAAOF,EACL,gBAAiBG,EACb,CACE,GAAGD,EAMH,aAAc,CAEZ,KAAMC,EAAa,KACnB,UAAW,CAAE,GAAGA,EAAa,YAAa,OAAQ,OAAQ,CAC5D,CACF,EACAD,CACN,CACF",
   "names": ["_createComponent", "createComponent", "options", "elementClass"]
 }