@skodaflow/web-library 2.1.0

package/README.md

@@ -0,0 +1,107 @@
+# `@skodaflow/web-library@2.x`
+
+> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
+> https://skodaauto.frontify.com/d/SCWeidKKNkoy
+> 
+> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
+
+## Installation
+
+#### Authorization
+You need to have an access to Azure artifacts registry joined with @skodaflow scope:
+registry=https://tfs.skoda-auto.com/tfs/WFA/_packaging/skodaflow-npm/npm/registry/ 
+
+For detail information about access visit: 
+https://tfs.skoda-auto.com/tfs/WFA/Skoda_Flow/_packaging?_a=connect&feed=skodaflow-npm
+
+#### Install package
+
+For NPM use command:
+```
+npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library --save
+```
+
+For Yarn use command: 
+```
+yarn add @mui/material @emotion/react @emotion/styled @skodaflow/web-library
+```
+@mui/material is the peer dependency but minimal required version is 5.0.1.
+According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies.
+For more details: https://mui.com/getting-started/installation/
+
+## Usage
+
+**1. Step.**
+In the root component of your application, for example in app.jsx use SkodaTheme.
+```
+import { SkodaTheme } from '@skodaflow/web-library';
+```
+Then wrap your app into SkodaTheme:
+```
+<SkodaTheme>
+   <App />
+</SkodaTheme>
+```
+All content inside this wrapper will now styled according to Skoda Flow Design System.
+Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be aplied only on child elements.
+For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet:
+```
+import '@skodaflow/web-library/theme/skoda/globals.css';
+```
+
+**1.1 Fonts.**
+If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
+```
+import '@skodaflow/web-library/theme/skoda/fonts.css'
+```
+Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
+
+**1.2 Icons.**
+If your application need to use SkodaNext icon font, include icon font asset too.
+```
+import '@skodaflow/web-library/theme/skoda/icons.css'
+```
+
+**2. Step.** Use prepared components from library, for example: Button.
+```
+import {Button} from '@skodaflow/web-library'
+
+const MyComponents = () => {
+	return <Button label="Primary" />
+}
+```
+
+For detailed documentation about Flow foundation visit:
+https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
+
+For preview of components and Storybook visit: 
+https://primereactdesigner.azurewebsites.net/#/stories
+
+
+## Additional usage
+
+All components are now based on most powerfull and popular library @mui/material.
+This core library was used for speed up development of flow components and web-library is the set of high order components designed by Skoda Flow theme.
+For more details about core library please visit: https://mui.com/
+
+If there is no prepared component in @skodaflow/web-library what you need, 
+you still can use all components available in core MUI library.
+
+#### Migration from 1.x to 2.x
+
+1. update @skodaflow/web-library to version 2.x and install dependencies
+```
+npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library@^2.0.0 --save
+```
+2. wrap your application to SkodaTheme
+```
+import { SkodaTheme } from '@skodaflow/web-library';
+
+<SkodaTheme>
+   <App />
+</SkodaTheme>
+```
+3. Remove this import from root: ~~import '@skodaflow/web-library/theme/skoda'~~
+
+
+

package/build/README.md

@@ -0,0 +1,107 @@
+# `@skodaflow/web-library@2.x`
+
+> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
+> https://skodaauto.frontify.com/d/SCWeidKKNkoy
+> 
+> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
+
+## Installation
+
+#### Authorization
+You need to have an access to Azure artifacts registry joined with @skodaflow scope:
+registry=https://tfs.skoda-auto.com/tfs/WFA/_packaging/skodaflow-npm/npm/registry/ 
+
+For detail information about access visit: 
+https://tfs.skoda-auto.com/tfs/WFA/Skoda_Flow/_packaging?_a=connect&feed=skodaflow-npm
+
+#### Install package
+
+For NPM use command:
+```
+npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library --save
+```
+
+For Yarn use command: 
+```
+yarn add @mui/material @emotion/react @emotion/styled @skodaflow/web-library
+```
+@mui/material is the peer dependency but minimal required version is 5.0.1.
+According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies.
+For more details: https://mui.com/getting-started/installation/
+
+## Usage
+
+**1. Step.**
+In the root component of your application, for example in app.jsx use SkodaTheme.
+```
+import { SkodaTheme } from '@skodaflow/web-library';
+```
+Then wrap your app into SkodaTheme:
+```
+<SkodaTheme>
+   <App />
+</SkodaTheme>
+```
+All content inside this wrapper will now styled according to Skoda Flow Design System.
+Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be aplied only on child elements.
+For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet:
+```
+import '@skodaflow/web-library/theme/skoda/globals.css';
+```
+
+**1.1 Fonts.**
+If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
+```
+import '@skodaflow/web-library/theme/skoda/fonts.css'
+```
+Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
+
+**1.2 Icons.**
+If your application need to use SkodaNext icon font, include icon font asset too.
+```
+import '@skodaflow/web-library/theme/skoda/icons.css'
+```
+
+**2. Step.** Use prepared components from library, for example: Button.
+```
+import {Button} from '@skodaflow/web-library'
+
+const MyComponents = () => {
+	return <Button label="Primary" />
+}
+```
+
+For detailed documentation about Flow foundation visit:
+https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
+
+For preview of components and Storybook visit: 
+https://primereactdesigner.azurewebsites.net/#/stories
+
+
+## Additional usage
+
+All components are now based on most powerfull and popular library @mui/material.
+This core library was used for speed up development of flow components and web-library is the set of high order components designed by Skoda Flow theme.
+For more details about core library please visit: https://mui.com/
+
+If there is no prepared component in @skodaflow/web-library what you need, 
+you still can use all components available in core MUI library.
+
+#### Migration from 1.x to 2.x
+
+1. update @skodaflow/web-library to version 2.x and install dependencies
+```
+npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library@^2.0.0 --save
+```
+2. wrap your application to SkodaTheme
+```
+import { SkodaTheme } from '@skodaflow/web-library';
+
+<SkodaTheme>
+   <App />
+</SkodaTheme>
+```
+3. Remove this import from root: ~~import '@skodaflow/web-library/theme/skoda'~~
+
+
+

package/build/components/accordion/accordion.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { TransitionProps } from '@mui/material/transitions/transition';
+/**
+ * @interface AccordionItem
+ * @description The interface describing the object that has to be provided to the array property 'items' in Accordion component.
+ * When accordion.allowMultipleExpand is set to false and more than one item has isDefaultExpanded set to true, only the first occurrence in the array will be deafault expanded.
+ * If no id is provided the component item receives indexed id -> panel${index}. The object is not changes.
+ * The property id is also the key of the every accordion component.
+ */
+export interface AccordionItem {
+    id?: string;
+    title: string;
+    content: string | React.ReactNode;
+    isDefaultExpanded?: boolean;
+    disabled?: boolean;
+}
+/**
+ * @interface AccordionProps
+ * @description Base definition of SkodaFlow Accordion component independent on core implementation.
+ * Properties are inherited from HTML Div element
+ */
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The content of the component.
+     */
+    items: Array<AccordionItem>;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: object;
+    /**
+     * Callback fired when the expand/collapse state is changed.
+     */
+    onChange?: (panel: string, value: boolean) => void;
+    /**
+     *  The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * If true, the preview text is showed. If the item.content is no typeof string, no preview will be show.
+     */
+    previewContent?: boolean;
+    /**
+     * The component used for the transition.
+     */
+    TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
+        children?: React.ReactElement<any, any>;
+    }>;
+    /**
+     * Props applied to the transition element.
+     */
+    TransitionProps?: object;
+    /**
+     * If true, the transition is disabled.
+     */
+    disableAnimation?: boolean;
+    /**
+     * The props provided to the top level container element.
+     */
+    accordionContainerProps?: object;
+    /**
+     * If provided, a max height will be given to every accordion panel. The string provided should be in pixels, eg. {number}px . No max height by default.
+     */
+    accordionPanelMaxHeight?: string;
+    /**
+     * If true, more than 1 accordion panels can be opened simultaneously.
+     */
+    allowMultipleExpand?: boolean;
+}
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './accordion';

package/build/components/backdrop/backdrop.d.ts

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     *  If true, the component is shown. Default value false
+     */
+    open: boolean;
+    /**
+     *  Override or extend the styles applied to the component.
+     */
+    classes?: object;
+    /**
+     *  The component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component?: string | ReactNode;
+    /**
+     *  The components used for each slot inside the Backdrop. Either a string to use a HTML element or a component.
+     */
+    components?: object;
+    /**
+     * The props used for each slot inside the Backdrop.
+     */
+    componentsProps?: object;
+    /**
+     * If true, the backdrop is invisible. It can be used when rendering a popover or a custom select component. Default value is false
+     */
+    invisible?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
+     */
+    transitionDuration?: number | object;
+    /**
+     * Additional onClose callback that needs to be provided when the state of the backdrop is controlled from outside.
+     */
+    onClose?: (isOpen: boolean) => void;
+}
+export declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/backdrop/index.d.ts

@@ -0,0 +1 @@
+export * from './backdrop';

package/build/components/banner/banner.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ButtonVariant } from '../common/type/ButtonVariant';
+export interface BannerProps {
+    /**
+     * Variant of banner defines different look and style
+     */
+    variant: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Icon name base on Icon component
+     */
+    icon?: string;
+    /**
+     * Icon Type if icon is normal or filled
+     */
+    iconIsFilled?: boolean;
+    /**
+     * Text of banner
+     */
+    textContent?: string;
+    /**
+     * Dismiss Button label
+     */
+    buttonLabel?: string;
+    /**
+     * Dismiss Button variant
+     */
+    buttonVariant?: ButtonVariant;
+    /**
+     * Dismiss button callback
+     */
+    buttonCallback?: (payload: any) => void;
+    /**
+     * Additional Button show/hide
+     */
+    additionalButton?: boolean;
+    /**
+     * Additional Button variant
+     */
+    additionalButtonVariant?: ButtonVariant;
+    /**
+     * Additional Button Label
+     */
+    additionalButtonLabel?: string;
+    /**
+     * Additional Button Callback
+     */
+    additionalButtonCallback?: (payload: any) => void;
+    /**
+     * Additional Button Callback
+     */
+    analyticsCallback?: (payload: any) => void;
+    /**
+     * Visibility control over whole banner
+     */
+    isVisible?: boolean;
+}
+export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/banner/index.d.ts

@@ -0,0 +1 @@
+export * from './banner';

package/build/components/button/button.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+/**
+ * @type ButtonVariants
+ * @description The variants of the Button component.
+ */
+export declare enum ButtonVariants {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    GHOST = "ghost",
+    TERTIARY = "tertiary",
+    NAVIGATION = "navigation"
+}
+/**
+ * @interface ButtonProps
+ * @description Base definition of SkodaFlow Button independent on core implementation.
+ * Properties are inherited from HTML Button element
+ */
+export interface ButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'color' | 'size'> {
+    /**
+     * Varian of button defines different look and style
+     */
+    variant?: ButtonVariants;
+    /**
+     * Label is used as inner HTML text of button
+     */
+    label?: string;
+    /**
+     * Icon name. For example "check". If no prefix is defined, default SKODA icon font is used
+     */
+    icon?: string;
+    /**
+     * Compact, minimalistic view of component
+     */
+    compact?: boolean;
+    /**
+     * Disabled, not clickable button
+     */
+    disabled?: boolean;
+    /**
+     * If true, the button will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    direction?: 'forward' | 'back';
+}
+/**
+ * @description SkodaFlow Button component.
+ * Properties are inherited from HTML Button element.
+ * @param props ButtonProps
+ * @returns React Functional Component
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/build/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button';

package/build/components/cardContainer/cardContainer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * @interface CardContainerProps
+ * @description Base definition of SkodaFlow CardContainer independent on core implementation.
+ * Properties are inherited from HTML Div element.
+ */
+export interface CardContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Control the clicked state. The state can be controlled from outside if isClickable is true.
+     */
+    isClicked?: boolean;
+    /**
+     * If true the container can be clicked.
+     */
+    isClickable?: boolean;
+    /**
+     * Additional onClickCallback when the CardContainer is clicked. The onClickCallback works only if isClickable is true.
+     */
+    onClickCallback?: (state: boolean) => void;
+}
+export declare const CardContainer: React.ForwardRefExoticComponent<CardContainerProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/cardContainer/index.d.ts

@@ -0,0 +1 @@
+export * from './cardContainer';

package/build/components/cardMenu/cardMenu.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { Placement } from '../../utils/enum';
+/**
+ * @interface CardMenuItem
+ * @description The interface describing the object that has to be provided to the array property 'items' in CardMenu component.
+ * If url is provided the menuItem becomes link.
+ */
+export interface CardMenuItem {
+    text: string;
+    callback?: () => void;
+    disabled?: boolean;
+    icon?: string;
+    isChecked?: boolean;
+    url?: string;
+    target?: string;
+}
+/**
+ * @type CardMenuItemsArray
+ * @description Array of CardMenuItem.
+ */
+export declare type CardMenuItemsArray = Array<CardMenuItem>;
+/**
+ * @interface CardMenuProps
+ * @description Base definition of SkodaFlow CardMenu independent on core implementation.
+ * Properties are inherited from HTML Div element.
+ */
+export interface CardMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true the drawer is shown.
+     */
+    open: boolean;
+    /**
+     * The content of the component.
+     */
+    items: CardMenuItemsArray;
+    /**
+     * React useState hook set function used to update the passed items to the component.
+     */
+    setItems?: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose: () => void;
+    /**
+     * An HTML element used to set the position of the popper.
+     */
+    anchorRef: React.RefObject<HTMLElement>;
+    /**
+     * If header is provided, a text will be displayed on top of the elements.
+     */
+    header?: string;
+    /**
+     * If true, multiple item select will be enabled. Property 'setItems' must be provided in order allowMultiselect to work.
+     * Items: CardMenuItemsArray provided to the component must have isChecked propery provided in order allowMultiselect to work..
+     */
+    allowMultiselect?: boolean;
+    /**
+     * Callback fired when item is clicked.
+     */
+    onItemClick?: (itemText: string) => void;
+    /**
+     *  The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     *  Override or extend the styles applied to the component.
+     */
+    classes?: object;
+    /**
+     * Popper placement. Default is 'bottom'.
+     */
+    placement?: Placement;
+    /**
+     * If true, a switch button is added to the items allowing to select or deselect all of the items.
+     * Property allowMultiselect should be true in order hasToggleSelection to work. Only available for the desktop version of the MenuCard.
+     */
+    hasToggleSelection?: boolean;
+    /**
+     * The toggle label displayed when groupToggleSelection is true. Default is "Select all".
+     */
+    toggleLabel?: string;
+}
+export declare const CardMenu: React.ForwardRefExoticComponent<CardMenuProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/cardMenu/hooks/useCardMenu.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CardMenuItem, CardMenuItemsArray } from '../cardMenu';
+export declare const useCardMenu: (items: CardMenuItemsArray, allowMultiselect: boolean, setItems: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>, onItemClick: (itemText: string) => void, onClose: () => void) => {
+    onClickHandler: (item: CardMenuItem) => void;
+    onToggleChange: (_: React.ChangeEvent<HTMLInputElement>, checkedState: boolean) => void;
+    isToggleChecked: boolean;
+};

package/build/components/cardMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './cardMenu';

package/build/components/cardMenu/styled/drawerStyled.d.ts

@@ -0,0 +1,6 @@
+export declare const DrawerStyled: import("@emotion/styled").StyledComponent<import("@mui/material/Drawer").DrawerProps & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    theme?: any;
+    hasHeader: boolean;
+}, {}, {}>;

package/build/components/cardMenu/styled/menuListStyled.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const MenuListStyled: import("@emotion/styled").StyledComponent<{
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+    children?: import("react").ReactNode;
+    disabledItemsFocusable?: boolean;
+    disableListWrap?: boolean;
+    variant?: "menu" | "selectedMenu";
+} & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ListClasses>;
+    dense?: boolean;
+    disablePadding?: boolean;
+    subheader?: import("react").ReactNode;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+} & import("@mui/material/OverridableComponent").CommonProps & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "slot" | "style" | "title" | "className" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    ref?: ((instance: HTMLUListElement) => void) | import("react").RefObject<HTMLUListElement>;
+}, "slot" | "title" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    theme?: any;
+    allowMultiselect?: boolean;
+}, {}, {}>;