@vaadin/react-components 24.7.0-alpha1 → 24.7.0-alpha10

package/ContextMenu.d.ts

@@ -15,13 +15,13 @@ export type ContextMenuProps = Partial<Omit<_ContextMenuProps, 'opened' | 'rende
     items?: Array<ContextMenuItem>;
     onItemSelected?: (event: ContextMenuItemSelectedEvent) => void;
 }>;
-declare const ForwardedContextMenu: import("react").ForwardRefExoticComponent<Partial<Omit<Partial<import("./utils/createComponent.js").ThemedWebComponentProps<ContextMenuElement, Readonly<{
+declare const ForwardedContextMenu: import("react").ForwardRefExoticComponent<Partial<Omit<Partial<import("./utils/createComponent.js").ThemedWebComponentProps<ContextMenuElement<_ContextMenuItem>, Readonly<{
     onItemSelected: import("@lit/react").EventName<import("@vaadin/context-menu").ContextMenuEventMap["item-selected"]>;
     onOpenedChanged: import("@lit/react").EventName<import("@vaadin/context-menu").ContextMenuEventMap["opened-changed"]>;
 }>>>, "opened" | "items" | "renderer" | "onItemSelected">> & Readonly<{
     renderer?: ComponentType<ContextMenuReactRendererProps> | null;
     items?: Array<ContextMenuItem>;
     onItemSelected?: (event: ContextMenuItemSelectedEvent) => void;
-}> & import("react").RefAttributes<ContextMenuElement>>;
+}> & import("react").RefAttributes<ContextMenuElement<_ContextMenuItem>>>;
 export { ForwardedContextMenu as ContextMenu };
 //# sourceMappingURL=ContextMenu.d.ts.map

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,MAAM,OAAO,CAAC;AAC7F,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,GAAG,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IAC/E,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,WAAW,CAAC;IAAE,KAAK,EAAE,eAAe,CAAA;CAAE,CAAC,CAAC;AAKnF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,gBAAgB,CAAC,CAAC,GACjH,QAAQ,CAAC;IACP,QAAQ,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,GAAG,IAAI,CAAC;IAE/D,KAAK,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IAE/B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,IAAI,CAAC;CAChE,CAAC,CAAC;AAgCL,QAAA,MAAM,oBAAoB;;;;eArCX,aAAa,CAAC,6BAA6B,CAAC,GAAG,IAAI;YAEtD,KAAK,CAAC,eAAe,CAAC;qBAEb,CAAC,KAAK,EAAE,4BAA4B,KAAK,IAAI;uDAiCd,CAAC;AAErD,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,MAAM,OAAO,CAAC;AAC7F,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,GAAG,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IAC/E,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,WAAW,CAAC;IAAE,KAAK,EAAE,eAAe,CAAA;CAAE,CAAC,CAAC;AAKnF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,gBAAgB,CAAC,CAAC,GACjH,QAAQ,CAAC;IACP,QAAQ,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,GAAG,IAAI,CAAC;IAE/D,KAAK,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IAE/B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,IAAI,CAAC;CAChE,CAAC,CAAC;AAgCL,QAAA,MAAM,oBAAoB;;;;eArCX,aAAa,CAAC,6BAA6B,CAAC,GAAG,IAAI;YAEtD,KAAK,CAAC,eAAe,CAAC;qBAEb,CAAC,KAAK,EAAE,4BAA4B,KAAK,IAAI;yEAiCd,CAAC;AAErD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,CAAC"}

package/MenuBar.d.ts

@@ -16,11 +16,13 @@ export type MenuBarProps = Partial<Omit<_MenuBarProps, 'items' | 'onItemSelected
     items?: Array<MenuBarItem>;
     onItemSelected?: (event: MenuBarItemSelectedEvent) => void;
 }>;
-declare const ForwardedMenuBar: import("react").ForwardRefExoticComponent<Partial<Omit<Partial<import("./utils/createComponent.js").ThemedWebComponentProps<MenuBarElement, Readonly<{
-    onItemSelected: import("@lit/react").EventName<import("@vaadin/menu-bar").MenuBarEventMap["item-selected"]>;
-}>>>, "items" | "onItemSelected">> & Readonly<{
+declare const ForwardedMenuBar: import("react").ForwardRefExoticComponent<Partial<Omit<Partial<Omit<import("react").HTMLAttributes<MenuBarElement<_MenuBarItem>>, "autofocus" | "items" | "disabled" | "i18n" | "overlayClass" | "close" | "onItemSelected" | "openOnHover" | "reverseCollapse" | "tabNavigation"> & {
+    readonly onItemSelected?: ((e: import("@vaadin/menu-bar/src/vaadin-menu-bar.js").MenuBarItemSelectedEvent<_MenuBarItem>) => void) | undefined;
+} & Partial<Omit<MenuBarElement<_MenuBarItem>, keyof HTMLElement>> & {
+    autofocus?: boolean;
+}>, "items" | "onItemSelected">> & Readonly<{
     items?: Array<MenuBarItem>;
     onItemSelected?: (event: MenuBarItemSelectedEvent) => void;
-}> & import("react").RefAttributes<MenuBarElement>>;
+}> & import("react").RefAttributes<MenuBarElement<_MenuBarItem>>>;
 export { ForwardedMenuBar as MenuBar };
 //# sourceMappingURL=MenuBar.d.ts.map

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,MAAM,OAAO,CAAC;AACzE,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,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACvE,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACvE,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,CAAC,CAAC;AAE3E,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC,GACjF,QAAQ,CAAC;IACP,KAAK,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE3B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI,CAAC;CAC5D,CAAC,CAAC;AAyBL,QAAA,MAAM,gBAAgB;;;YA5BV,KAAK,CAAC,WAAW,CAAC;qBAET,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI;mDA0BlB,CAAC;AAE7C,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,MAAM,OAAO,CAAC;AACzE,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,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACvE,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACvE,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,CAAC,CAAC;AAE3E,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC,GACjF,QAAQ,CAAC;IACP,KAAK,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE3B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI,CAAC;CAC5D,CAAC,CAAC;AAyBL,QAAA,MAAM,gBAAgB;;;;;YA5BV,KAAK,CAAC,WAAW,CAAC;qBAET,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI;iEA0BlB,CAAC;AAE7C,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,CAAC"}

package/css/lumo/utilities/FlexboxAndGrid.module.css

@@ -316,19 +316,19 @@
 
   /* === Responsive design === */
   @media (min-width: 640px) {
-    .sm\\items-baseline {
+    .sm\\:items-baseline {
       align-items: baseline;
     }
-    .sm\\items-center {
+    .sm\\:items-center {
       align-items: center;
     }
-    .sm\\items-end {
+    .sm\\:items-end {
       align-items: flex-end;
     }
-    .sm\\items-start {
+    .sm\\:items-start {
       align-items: flex-start;
     }
-    .sm\\items-stretch {
+    .sm\\:items-stretch {
       align-items: stretch;
     }
     .sm\\:flex-col {
@@ -376,19 +376,19 @@
   }
 
   @media (min-width: 768px) {
-    .md\\items-baseline {
+    .md\\:items-baseline {
       align-items: baseline;
     }
-    .md\\items-center {
+    .md\\:items-center {
       align-items: center;
     }
-    .md\\items-end {
+    .md\\:items-end {
       align-items: flex-end;
     }
-    .md\\items-start {
+    .md\\:items-start {
       align-items: flex-start;
     }
-    .md\\items-stretch {
+    .md\\:items-stretch {
       align-items: stretch;
     }
     .md\\:flex-col {
@@ -435,19 +435,19 @@
     }
   }
   @media (min-width: 1024px) {
-    .lg\\items-baseline {
+    .lg\\:items-baseline {
       align-items: baseline;
     }
-    .lg\\items-center {
+    .lg\\:items-center {
       align-items: center;
     }
-    .lg\\items-end {
+    .lg\\:items-end {
       align-items: flex-end;
     }
-    .lg\\items-start {
+    .lg\\:items-start {
       align-items: flex-start;
     }
-    .lg\\items-stretch {
+    .lg\\:items-stretch {
       align-items: stretch;
     }
     .lg\\:flex-col {
@@ -494,19 +494,19 @@
     }
   }
   @media (min-width: 1280px) {
-    .xl\\items-baseline {
+    .xl\\:items-baseline {
       align-items: baseline;
     }
-    .xl\\items-center {
+    .xl\\:items-center {
       align-items: center;
     }
-    .xl\\items-end {
+    .xl\\:items-end {
       align-items: flex-end;
     }
-    .xl\\items-start {
+    .xl\\:items-start {
       align-items: flex-start;
     }
-    .xl\\items-stretch {
+    .xl\\:items-stretch {
       align-items: stretch;
     }
     .xl\\:flex-col {
@@ -553,19 +553,19 @@
     }
   }
   @media (min-width: 1536px) {
-    .\\32xl\\items-baseline {
+    .\\32xl\\:items-baseline {
       align-items: baseline;
     }
-    .\\32xl\\items-center {
+    .\\32xl\\:items-center {
       align-items: center;
     }
-    .\\32xl\\items-end {
+    .\\32xl\\:items-end {
       align-items: flex-end;
     }
-    .\\32xl\\items-start {
+    .\\32xl\\:items-start {
       align-items: flex-start;
     }
-    .\\32xl\\items-stretch {
+    .\\32xl\\:items-stretch {
       align-items: stretch;
     }
     .\\32xl\\:flex-col {

package/css/lumo/utilities/Transition.module.css

@@ -1,41 +1,43 @@
 /* Generated file, do not edit */
 
 
-  .transition-none {
-    transition: none;
+  .transition {
+    transition-property: -webkit-backdrop-filter, backdrop-filter, background-color, border-color, box-shadow, color,
+      fill, filter, opacity, rotate, scale, stroke, text-decoration-color, transform, translate;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-all {
-    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .transition {
-    transition:
-      color,
-      background-color,
-      border-color,
-      text-decoration-color,
-      fill,
-      stroke,
-      opacity,
-      box-shadow,
-      transform,
-      filter,
-      backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: all;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-colors {
-    transition:
-      color,
-      background-color,
-      border-color,
-      text-decoration-color,
-      fill,
-      stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: background-color, border-color, color, fill, stroke, text-decoration-color;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-opacity {
-    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: opacity;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-shadow {
-    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: box-shadow;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-transform {
-    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: rotate, scale, transform, translate;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
+  }
+
+  .transition-none {
+    transition-property: none;
   }

package/generated/ContextMenu.d.ts

@@ -9,8 +9,8 @@ export type ContextMenuEventMap = Readonly<{
     onOpenedChanged: EventName<_ContextMenuEventMap["opened-changed"]>;
 }>;
 export type ContextMenuProps = WebComponentProps<ContextMenuElement, ContextMenuEventMap>;
-export declare const ContextMenu: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<ContextMenuElement, Readonly<{
+export declare const ContextMenu: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<ContextMenuElement<import("@vaadin/context-menu/vaadin-context-menu.js").ContextMenuItem>, Readonly<{
     onItemSelected: EventName<_ContextMenuEventMap["item-selected"]>;
     onOpenedChanged: EventName<_ContextMenuEventMap["opened-changed"]>;
-}>>> & React.RefAttributes<ContextMenuElement>) => React.ReactElement | null;
+}>>> & React.RefAttributes<ContextMenuElement<import("@vaadin/context-menu/vaadin-context-menu.js").ContextMenuItem>>) => React.ReactElement | null;
 //# sourceMappingURL=ContextMenu.d.ts.map

package/generated/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../src/generated/ContextMenu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,KAAK,mBAAmB,IAAI,oBAAoB,EAAG,MAAM,6CAA6C,CAAC;AACnJ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,kBAAkB,GAAG,CAAC;AAC/B,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACvC,cAAc,EAAE,SAAS,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC;IACjE,eAAe,EAAE,SAAS,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC,CAAC;CACtE,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;AAC1F,eAAO,MAAM,WAAW;oBALJ,SAAS,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC;qBAC/C,SAAS,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;4EAMpE,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../src/generated/ContextMenu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,KAAK,mBAAmB,IAAI,oBAAoB,EAAG,MAAM,6CAA6C,CAAC;AACnJ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,kBAAkB,GAAG,CAAC;AAC/B,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACvC,cAAc,EAAE,SAAS,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC;IACjE,eAAe,EAAE,SAAS,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC,CAAC;CACtE,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;AAC1F,eAAO,MAAM,WAAW;oBALJ,SAAS,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC;qBAC/C,SAAS,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;mJAMpE,CAAC"}

package/generated/MenuBar.d.ts

@@ -8,7 +8,9 @@ export type MenuBarEventMap = Readonly<{
     onItemSelected: EventName<_MenuBarEventMap["item-selected"]>;
 }>;
 export type MenuBarProps = WebComponentProps<MenuBarElement, MenuBarEventMap>;
-export declare const MenuBar: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<MenuBarElement, Readonly<{
-    onItemSelected: EventName<_MenuBarEventMap["item-selected"]>;
-}>>> & React.RefAttributes<MenuBarElement>) => React.ReactElement | null;
+export declare const MenuBar: (props: Partial<Omit<React.HTMLAttributes<MenuBarElement<import("@vaadin/menu-bar/vaadin-menu-bar.js").MenuBarItem>>, "autofocus" | "items" | "disabled" | "i18n" | "overlayClass" | "close" | "onItemSelected" | "openOnHover" | "reverseCollapse" | "tabNavigation"> & {
+    readonly onItemSelected?: ((e: import("@vaadin/menu-bar/vaadin-menu-bar.js").MenuBarItemSelectedEvent<import("@vaadin/menu-bar/vaadin-menu-bar.js").MenuBarItem>) => void) | undefined;
+} & Partial<Omit<MenuBarElement<import("@vaadin/menu-bar/vaadin-menu-bar.js").MenuBarItem>, keyof HTMLElement>> & {
+    autofocus?: boolean;
+}> & React.RefAttributes<MenuBarElement<import("@vaadin/menu-bar/vaadin-menu-bar.js").MenuBarItem>>) => React.ReactElement | null;
 //# sourceMappingURL=MenuBar.d.ts.map

package/generated/MenuBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuBar.d.ts","sourceRoot":"","sources":["../src/generated/MenuBar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,KAAK,eAAe,IAAI,gBAAgB,EAAG,MAAM,qCAAqC,CAAC;AAC3H,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,cAAc,GAAG,CAAC;AAC3B,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACnC,cAAc,EAAE,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;CAChE,CAAC,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAC9E,eAAO,MAAM,OAAO;oBAJA,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;wEAM9D,CAAC"}
+{"version":3,"file":"MenuBar.d.ts","sourceRoot":"","sources":["../src/generated/MenuBar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,KAAK,eAAe,IAAI,gBAAgB,EAAG,MAAM,qCAAqC,CAAC;AAC3H,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,cAAc,GAAG,CAAC;AAC3B,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACnC,cAAc,EAAE,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;CAChE,CAAC,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAC9E,eAAO,MAAM,OAAO;;;;iIAElB,CAAC"}

package/index.d.ts

@@ -55,8 +55,8 @@ export * from "./RadioButton.js";
 export * from "./RadioGroup.js";
 export * from "./Scroller.js";
 export * from "./Select.js";
-export * from "./SideNavItem.js";
 export * from "./SideNav.js";
+export * from "./SideNavItem.js";
 export * from "./SplitLayout.js";
 export * from "./Tab.js";
 export * from "./Tabs.js";

package/index.js

@@ -55,8 +55,8 @@ export * from "./RadioButton.js";
 export * from "./RadioGroup.js";
 export * from "./Scroller.js";
 export * from "./Select.js";
-export * from "./SideNavItem.js";
 export * from "./SideNav.js";
+export * from "./SideNavItem.js";
 export * from "./SplitLayout.js";
 export * from "./Tab.js";
 export * from "./Tabs.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/react-components",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -26,74 +26,74 @@
     "version": "tsx ../../scripts/package-json-version.ts"
   },
   "dependencies": {
-    "@lit/react": "^1.0.6",
-    "@vaadin/a11y-base": "24.7.0-alpha1",
-    "@vaadin/accordion": "24.7.0-alpha1",
-    "@vaadin/app-layout": "24.7.0-alpha1",
-    "@vaadin/avatar": "24.7.0-alpha1",
-    "@vaadin/avatar-group": "24.7.0-alpha1",
-    "@vaadin/button": "24.7.0-alpha1",
-    "@vaadin/card": "24.7.0-alpha1",
-    "@vaadin/checkbox": "24.7.0-alpha1",
-    "@vaadin/checkbox-group": "24.7.0-alpha1",
-    "@vaadin/combo-box": "24.7.0-alpha1",
-    "@vaadin/component-base": "24.7.0-alpha1",
-    "@vaadin/confirm-dialog": "24.7.0-alpha1",
-    "@vaadin/context-menu": "24.7.0-alpha1",
-    "@vaadin/custom-field": "24.7.0-alpha1",
-    "@vaadin/date-picker": "24.7.0-alpha1",
-    "@vaadin/date-time-picker": "24.7.0-alpha1",
-    "@vaadin/details": "24.7.0-alpha1",
-    "@vaadin/dialog": "24.7.0-alpha1",
-    "@vaadin/email-field": "24.7.0-alpha1",
-    "@vaadin/field-base": "24.7.0-alpha1",
-    "@vaadin/field-highlighter": "24.7.0-alpha1",
-    "@vaadin/form-layout": "24.7.0-alpha1",
-    "@vaadin/grid": "24.7.0-alpha1",
-    "@vaadin/horizontal-layout": "24.7.0-alpha1",
-    "@vaadin/icon": "24.7.0-alpha1",
-    "@vaadin/icons": "24.7.0-alpha1",
-    "@vaadin/input-container": "24.7.0-alpha1",
-    "@vaadin/integer-field": "24.7.0-alpha1",
-    "@vaadin/item": "24.7.0-alpha1",
-    "@vaadin/list-box": "24.7.0-alpha1",
-    "@vaadin/lit-renderer": "24.7.0-alpha1",
-    "@vaadin/login": "24.7.0-alpha1",
-    "@vaadin/menu-bar": "24.7.0-alpha1",
-    "@vaadin/message-input": "24.7.0-alpha1",
-    "@vaadin/message-list": "24.7.0-alpha1",
-    "@vaadin/multi-select-combo-box": "24.7.0-alpha1",
-    "@vaadin/notification": "24.7.0-alpha1",
-    "@vaadin/number-field": "24.7.0-alpha1",
-    "@vaadin/overlay": "24.7.0-alpha1",
-    "@vaadin/password-field": "24.7.0-alpha1",
-    "@vaadin/popover": "24.7.0-alpha1",
-    "@vaadin/progress-bar": "24.7.0-alpha1",
-    "@vaadin/radio-group": "24.7.0-alpha1",
-    "@vaadin/scroller": "24.7.0-alpha1",
-    "@vaadin/select": "24.7.0-alpha1",
-    "@vaadin/side-nav": "24.7.0-alpha1",
-    "@vaadin/split-layout": "24.7.0-alpha1",
-    "@vaadin/tabs": "24.7.0-alpha1",
-    "@vaadin/tabsheet": "24.7.0-alpha1",
-    "@vaadin/text-area": "24.7.0-alpha1",
-    "@vaadin/text-field": "24.7.0-alpha1",
-    "@vaadin/time-picker": "24.7.0-alpha1",
-    "@vaadin/tooltip": "24.7.0-alpha1",
-    "@vaadin/upload": "24.7.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha1",
-    "@vaadin/vertical-layout": "24.7.0-alpha1",
-    "@vaadin/virtual-list": "24.7.0-alpha1"
+    "@lit/react": "^1.0.7",
+    "@vaadin/a11y-base": "24.7.0-alpha10",
+    "@vaadin/accordion": "24.7.0-alpha10",
+    "@vaadin/app-layout": "24.7.0-alpha10",
+    "@vaadin/avatar": "24.7.0-alpha10",
+    "@vaadin/avatar-group": "24.7.0-alpha10",
+    "@vaadin/button": "24.7.0-alpha10",
+    "@vaadin/card": "24.7.0-alpha10",
+    "@vaadin/checkbox": "24.7.0-alpha10",
+    "@vaadin/checkbox-group": "24.7.0-alpha10",
+    "@vaadin/combo-box": "24.7.0-alpha10",
+    "@vaadin/component-base": "24.7.0-alpha10",
+    "@vaadin/confirm-dialog": "24.7.0-alpha10",
+    "@vaadin/context-menu": "24.7.0-alpha10",
+    "@vaadin/custom-field": "24.7.0-alpha10",
+    "@vaadin/date-picker": "24.7.0-alpha10",
+    "@vaadin/date-time-picker": "24.7.0-alpha10",
+    "@vaadin/details": "24.7.0-alpha10",
+    "@vaadin/dialog": "24.7.0-alpha10",
+    "@vaadin/email-field": "24.7.0-alpha10",
+    "@vaadin/field-base": "24.7.0-alpha10",
+    "@vaadin/field-highlighter": "24.7.0-alpha10",
+    "@vaadin/form-layout": "24.7.0-alpha10",
+    "@vaadin/grid": "24.7.0-alpha10",
+    "@vaadin/horizontal-layout": "24.7.0-alpha10",
+    "@vaadin/icon": "24.7.0-alpha10",
+    "@vaadin/icons": "24.7.0-alpha10",
+    "@vaadin/input-container": "24.7.0-alpha10",
+    "@vaadin/integer-field": "24.7.0-alpha10",
+    "@vaadin/item": "24.7.0-alpha10",
+    "@vaadin/list-box": "24.7.0-alpha10",
+    "@vaadin/lit-renderer": "24.7.0-alpha10",
+    "@vaadin/login": "24.7.0-alpha10",
+    "@vaadin/menu-bar": "24.7.0-alpha10",
+    "@vaadin/message-input": "24.7.0-alpha10",
+    "@vaadin/message-list": "24.7.0-alpha10",
+    "@vaadin/multi-select-combo-box": "24.7.0-alpha10",
+    "@vaadin/notification": "24.7.0-alpha10",
+    "@vaadin/number-field": "24.7.0-alpha10",
+    "@vaadin/overlay": "24.7.0-alpha10",
+    "@vaadin/password-field": "24.7.0-alpha10",
+    "@vaadin/popover": "24.7.0-alpha10",
+    "@vaadin/progress-bar": "24.7.0-alpha10",
+    "@vaadin/radio-group": "24.7.0-alpha10",
+    "@vaadin/scroller": "24.7.0-alpha10",
+    "@vaadin/select": "24.7.0-alpha10",
+    "@vaadin/side-nav": "24.7.0-alpha10",
+    "@vaadin/split-layout": "24.7.0-alpha10",
+    "@vaadin/tabs": "24.7.0-alpha10",
+    "@vaadin/tabsheet": "24.7.0-alpha10",
+    "@vaadin/text-area": "24.7.0-alpha10",
+    "@vaadin/text-field": "24.7.0-alpha10",
+    "@vaadin/time-picker": "24.7.0-alpha10",
+    "@vaadin/tooltip": "24.7.0-alpha10",
+    "@vaadin/upload": "24.7.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha10",
+    "@vaadin/vertical-layout": "24.7.0-alpha10",
+    "@vaadin/virtual-list": "24.7.0-alpha10"
   },
   "author": "Vaadin Ltd.",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@types/react": "^18.2.37 || ^19",
+    "@types/react-dom": "^18.2.15 || ^19",
+    "react": "^18.2.0 || ^19",
+    "react-dom": "^18.2.0 || ^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {

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.7.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.7.0-alpha10"});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.7.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.7.0-alpha10',\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"]
 }