@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/Listbox/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox"],"mappings":";;;;;AAuDO,MAAM,UAAU,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAAkC;AAC5G,QAAM,EAAE,WAAW,mBAAmB,GAAG,WAAe,IAAA;AACxD,QAAM,EAAE,MAAM,MAAA,IAAU,WAAW,YAAY,GAAG;AAC5C,QAAA,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACK,sBAAA,cAAA,QAAA,EAAK,aAAU,WAAU,aACtB,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QAAE,GAAG,KAAK;AAAA,QAAO,WAAW;AAAA;AAAA,MAAA;AAAA,IAA+D;AAAA,EACtG,uCACC,SAAO,EAAA,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;AAEM,MAAM,eAAe,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAAkC;AACjH,QAAM,EAAE,WAAW,mBAAmB,GAAG,WAAe,IAAA;AACxD,QAAM,EAAE,MAAM,MAAA,IAAU,gBAAgB,YAAY,GAAG;AACjD,QAAA,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACK,sBAAA,cAAA,QAAA,EAAK,aAAU,WAAU,aACtB,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QACH,GAAG,KAAK;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IACf;AAAA,EACJ,uCACC,SAAO,EAAA,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;"}
+{"version":3,"file":"Listbox.js","sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox"],"mappings":";;;;;AAuDO,MAAM,UAAU,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAAkC;AAC5G,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAU,WAAW,YAAY,GAAG;AAClD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACI,sBAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtB,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QAAE,GAAG,KAAK;AAAA,QAAO,WAAW;AAAA;AAAA,MAAA;AAAA,IAA+D;AAAA,EAAA,uCAErG,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;AAEM,MAAM,eAAe,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAAkC;AACjH,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAU,gBAAgB,YAAY,GAAG;AACvD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACI,sBAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtB,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QACH,GAAG,KAAK;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IACf;AAAA,EAAA,uCAEH,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;"}

package/dist/components/Listbox/ScrollableList.cjs

@@ -65,9 +65,8 @@ const ScrollableList = React__namespace.forwardRef(function ScrollableList2(prop
   const { texts } = Localization.useLocalization();
   const { scrollTo } = useListScrollTo.useListScrollTo(listRef, itemRefs);
   React__namespace.useEffect(() => {
-    var _a, _b;
-    if (currentIndex && ((_a = itemRefs[currentIndex]) == null ? void 0 : _a.current)) {
-      (_b = itemRefs[currentIndex].current) == null ? void 0 : _b.scrollIntoView({
+    if (currentIndex && itemRefs[currentIndex]?.current) {
+      itemRefs[currentIndex].current?.scrollIntoView({
         block: "center"
       });
     }
@@ -121,7 +120,7 @@ const ScrollableList = React__namespace.forwardRef(function ScrollableList2(prop
       "data-focused": currentIndex === index,
       children: option.text,
       className: cn(
-        "flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500",
+        "flex w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:wcag-blue-500",
         {
           "sticky top-0 font-bold": depth === 0 && !!option.hasChildren
         }
@@ -141,7 +140,7 @@ const ScrollableList = React__namespace.forwardRef(function ScrollableList2(prop
   const list = {
     ...otherProps,
     className: cn(
-      "inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto",
+      "m-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0",
       util.getInputClasses(props),
       {
         "yt-list--multiselect": multiselect,

package/dist/components/Listbox/ScrollableList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.cjs","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        }\n        if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted: _1,\n        id,\n        invalid: _2,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex === undefined ? currentIndex : nextIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getNextIndexFromKey","React","ScrollableList","useMergedRef","useLocalization","useListScrollTo","getInputClasses","Spinner","Checkbox"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.cjs","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        }\n        if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted: _1,\n        id,\n        invalid: _2,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex === undefined ? currentIndex : nextIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:wcag-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getNextIndexFromKey","React","ScrollableList","useMergedRef","useLocalization","useListScrollTo","getInputClasses","Spinner","Checkbox"],"mappings":"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"}

package/dist/components/Listbox/ScrollableList.d.ts

@@ -11,7 +11,7 @@ export type ScrollableListItem = {
     icon?: React.ReactElement;
     path?: string;
     /** Text describing the item */
-    text: string | JSX.Element;
+    text: string | React.JSX.Element;
     /** Value of the item */
     value: ScrollableListItemValue;
     /** Child items to show hierarchical data */

package/dist/components/Listbox/ScrollableList.js

@@ -46,9 +46,8 @@ const ScrollableList = React.forwardRef(function ScrollableList2(props, ref) {
   const { texts } = useLocalization();
   const { scrollTo } = useListScrollTo(listRef, itemRefs);
   React.useEffect(() => {
-    var _a, _b;
-    if (currentIndex && ((_a = itemRefs[currentIndex]) == null ? void 0 : _a.current)) {
-      (_b = itemRefs[currentIndex].current) == null ? void 0 : _b.scrollIntoView({
+    if (currentIndex && itemRefs[currentIndex]?.current) {
+      itemRefs[currentIndex].current?.scrollIntoView({
         block: "center"
       });
     }
@@ -102,7 +101,7 @@ const ScrollableList = React.forwardRef(function ScrollableList2(props, ref) {
       "data-focused": currentIndex === index,
       children: option.text,
       className: cn(
-        "flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500",
+        "flex w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:wcag-blue-500",
         {
           "sticky top-0 font-bold": depth === 0 && !!option.hasChildren
         }
@@ -122,7 +121,7 @@ const ScrollableList = React.forwardRef(function ScrollableList2(props, ref) {
   const list = {
     ...otherProps,
     className: cn(
-      "inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto",
+      "m-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0",
       getInputClasses(props),
       {
         "yt-list--multiselect": multiselect,

package/dist/components/Listbox/ScrollableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        }\n        if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted: _1,\n        id,\n        invalid: _2,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex === undefined ? currentIndex : nextIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["ScrollableList"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        }\n        if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted: _1,\n        id,\n        invalid: _2,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex === undefined ? currentIndex : nextIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:wcag-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["ScrollableList"],"mappings":"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"}

package/dist/components/Listbox/useListbox.cjs

@@ -88,12 +88,11 @@ const useListbox = ({
     }
   };
   const handleInputChange = (event) => {
-    var _a;
     event.persist();
     if (onChange) {
       const item = util.findByValue(data, event.target.value);
       event.detail = util.sanitizeItem(item);
-      const indexes = ((_a = item == null ? void 0 : item.path) == null ? void 0 : _a.split(".")) ?? [];
+      const indexes = item?.path?.split(".") ?? [];
       if (indexes.length > 1) {
         indexes.pop();
         let lastPath;

package/dist/components/Listbox/useListbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\nimport { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        invalid,\n        name,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value = emptyValue,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const data = useFlattenedData(emptyValue === undefined ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value);\n            }\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setInputValueByIndex(index);\n    };\n\n    React.useEffect(() => {\n        if (data.length && currentIndex === undefined) {\n            if (defaultValue === undefined) {\n                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\n            }\n        }\n    }, [data]);\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setInputValueByIndex(nextIndex);\n            }\n            return;\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (currentIndex === undefined && data.length) {\n            setInputValueByIndex(0);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(data, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(data.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const list: ScrollableListProps = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        data,\n        disabled,\n        id,\n        invalid,\n        onChange: handleListboxChange,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: true,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useFlattenedData","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","setInputValueByRef","findByValue","sanitizeItem","i","getActiveDescendant"],"mappings":"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"}
+{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\nimport { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        invalid,\n        name,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value = emptyValue,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const data = useFlattenedData(emptyValue === undefined ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value);\n            }\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setInputValueByIndex(index);\n    };\n\n    React.useEffect(() => {\n        if (data.length && currentIndex === undefined) {\n            if (defaultValue === undefined) {\n                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\n            }\n        }\n    }, [data]);\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setInputValueByIndex(nextIndex);\n            }\n            return;\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (currentIndex === undefined && data.length) {\n            setInputValueByIndex(0);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(data, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(data.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const list: ScrollableListProps = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        data,\n        disabled,\n        id,\n        invalid,\n        onChange: handleListboxChange,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: true,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useFlattenedData","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","setInputValueByRef","findByValue","sanitizeItem","i","getActiveDescendant"],"mappings":"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"}

package/dist/components/Listbox/useListbox.js

@@ -69,12 +69,11 @@ const useListbox = ({
     }
   };
   const handleInputChange = (event) => {
-    var _a;
     event.persist();
     if (onChange) {
       const item = findByValue(data, event.target.value);
       event.detail = sanitizeItem(item);
-      const indexes = ((_a = item == null ? void 0 : item.path) == null ? void 0 : _a.split(".")) ?? [];
+      const indexes = item?.path?.split(".") ?? [];
       if (indexes.length > 1) {
         indexes.pop();
         let lastPath;

package/dist/components/Listbox/useListbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListbox.js","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\nimport { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        invalid,\n        name,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value = emptyValue,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const data = useFlattenedData(emptyValue === undefined ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value);\n            }\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setInputValueByIndex(index);\n    };\n\n    React.useEffect(() => {\n        if (data.length && currentIndex === undefined) {\n            if (defaultValue === undefined) {\n                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\n            }\n        }\n    }, [data]);\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setInputValueByIndex(nextIndex);\n            }\n            return;\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (currentIndex === undefined && data.length) {\n            setInputValueByIndex(0);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(data, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(data.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const list: ScrollableListProps = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        data,\n        disabled,\n        id,\n        invalid,\n        onChange: handleListboxChange,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: true,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["i"],"mappings":"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"}
+{"version":3,"file":"useListbox.js","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\nimport { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        invalid,\n        name,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value = emptyValue,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const data = useFlattenedData(emptyValue === undefined ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value);\n            }\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setInputValueByIndex(index);\n    };\n\n    React.useEffect(() => {\n        if (data.length && currentIndex === undefined) {\n            if (defaultValue === undefined) {\n                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\n            }\n        }\n    }, [data]);\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setInputValueByIndex(nextIndex);\n            }\n            return;\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (currentIndex === undefined && data.length) {\n            setInputValueByIndex(0);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(data, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(data.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const list: ScrollableListProps = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        data,\n        disabled,\n        id,\n        invalid,\n        onChange: handleListboxChange,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: true,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["i"],"mappings":"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"}

package/dist/components/Listbox/useMultiListbox.cjs

@@ -61,13 +61,12 @@ const useMultiListbox = ({
     }
   }, [selectedIndexes, data]);
   const setInputValueByIndex = (index) => {
-    var _a;
     if (index !== void 0) {
       const option = data[index];
       if (option && !option.disabled) {
         let newInputValue = "";
-        const currentInputValue = (_a = inputRef.current) == null ? void 0 : _a.value;
-        const currentValuesArray = (currentInputValue == null ? void 0 : currentInputValue.split(",")) || [];
+        const currentInputValue = inputRef.current?.value;
+        const currentValuesArray = currentInputValue?.split(",") || [];
         const optionAlreadySelected = currentValuesArray.some((val) => val === String(option.value));
         if (option.value === "#ALL-OPTIONS#") {
           if (allOptionsSelected) {

package/dist/components/Listbox/useMultiListbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMultiListbox.cjs","sources":["../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport { useLocalization } from '../Provider/Localization';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\nimport { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.some(val => val === String(option.value));\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (allOptionsSelected) {\n                        newInputValue = '';\n                    } else {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    }\n                } else if (optionAlreadySelected) {\n                    newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                } else {\n                    newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (data[index] && !data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index?: number): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index === undefined ? 0 : index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useLocalization","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","getSelectedIndexesFromValue","setInputValueByRef","option","index","findByValue","getActiveDescendant"],"mappings":"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"}
+{"version":3,"file":"useMultiListbox.cjs","sources":["../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport { useLocalization } from '../Provider/Localization';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\nimport { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.some(val => val === String(option.value));\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (allOptionsSelected) {\n                        newInputValue = '';\n                    } else {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    }\n                } else if (optionAlreadySelected) {\n                    newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                } else {\n                    newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (data[index] && !data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index?: number): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index === undefined ? 0 : index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useLocalization","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","getSelectedIndexesFromValue","setInputValueByRef","option","index","findByValue","getActiveDescendant"],"mappings":"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"}

package/dist/components/Listbox/useMultiListbox.js

@@ -42,13 +42,12 @@ const useMultiListbox = ({
     }
   }, [selectedIndexes, data]);
   const setInputValueByIndex = (index) => {
-    var _a;
     if (index !== void 0) {
       const option = data[index];
       if (option && !option.disabled) {
         let newInputValue = "";
-        const currentInputValue = (_a = inputRef.current) == null ? void 0 : _a.value;
-        const currentValuesArray = (currentInputValue == null ? void 0 : currentInputValue.split(",")) || [];
+        const currentInputValue = inputRef.current?.value;
+        const currentValuesArray = currentInputValue?.split(",") || [];
         const optionAlreadySelected = currentValuesArray.some((val) => val === String(option.value));
         if (option.value === "#ALL-OPTIONS#") {
           if (allOptionsSelected) {

package/dist/components/Listbox/useMultiListbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMultiListbox.js","sources":["../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport { useLocalization } from '../Provider/Localization';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\nimport { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.some(val => val === String(option.value));\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (allOptionsSelected) {\n                        newInputValue = '';\n                    } else {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    }\n                } else if (optionAlreadySelected) {\n                    newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                } else {\n                    newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (data[index] && !data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index?: number): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index === undefined ? 0 : index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["option","index"],"mappings":"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"}
+{"version":3,"file":"useMultiListbox.js","sources":["../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport { useLocalization } from '../Provider/Localization';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\nimport { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.some(val => val === String(option.value));\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (allOptionsSelected) {\n                        newInputValue = '';\n                    } else {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    }\n                } else if (optionAlreadySelected) {\n                    newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                } else {\n                    newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (data[index] && !data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index?: number): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index === undefined ? 0 : index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["option","index"],"mappings":"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"}

package/dist/components/Listbox/useTypeahead.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTypeahead.cjs","sources":["../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { findNextIndexByValue } from './util';\nimport { ScrollableListItem } from './ScrollableList';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>(undefined);\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":["React","useTimer","findNextIndexByValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,eAAe,CAAC,EAAE,MAAM,mBAAoD;AAC/E,QAAA,iBAAiBA,iBAAM,OAA2B,MAAS;AAC3D,QAAA,sBAAsBC,kBAAS,KAAM,MAAM;AAC7C,mBAAe,UAAU;AAAA,EAAA,CAC5B;AAEK,QAAA,eAAe,CAAC,YAA4B;AAC9C,UAAM,SAAS,eAAe,UAAU,eAAe,UAAU,UAAU,SAAS,YAAY;AAChG,UAAM,YAAYC,KAAA,qBAAqB,MAAM,OAAO,YAAY;AAEhE,wBAAoB,MAAM;AAC1B,mBAAe,UAAU;AAElB,WAAA;AAAA,EACX;AAEA,SAAO,EAAE,aAAa;AAC1B;;"}
+{"version":3,"file":"useTypeahead.cjs","sources":["../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { findNextIndexByValue } from './util';\nimport { ScrollableListItem } from './ScrollableList';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>(undefined);\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":["React","useTimer","findNextIndexByValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,eAAe,CAAC,EAAE,MAAM,mBAAoD;AACrF,QAAM,iBAAiBA,iBAAM,OAA2B,MAAS;AACjE,QAAM,sBAAsBC,kBAAS,KAAM,MAAM;AAC7C,mBAAe,UAAU;AAAA,EAC7B,CAAC;AAED,QAAM,eAAe,CAAC,YAA4B;AAC9C,UAAM,SAAS,eAAe,UAAU,eAAe,UAAU,UAAU,SAAS,YAAA;AACpF,UAAM,YAAYC,KAAAA,qBAAqB,MAAM,OAAO,YAAY;AAEhE,wBAAoB,MAAA;AACpB,mBAAe,UAAU;AAEzB,WAAO;AAAA,EACX;AAEA,SAAO,EAAE,aAAA;AACb;;"}

package/dist/components/Listbox/useTypeahead.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTypeahead.js","sources":["../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { findNextIndexByValue } from './util';\nimport { ScrollableListItem } from './ScrollableList';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>(undefined);\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":[],"mappings":";;;AAcO,MAAM,eAAe,CAAC,EAAE,MAAM,mBAAoD;AAC/E,QAAA,iBAAiB,MAAM,OAA2B,MAAS;AAC3D,QAAA,sBAAsB,SAAS,KAAM,MAAM;AAC7C,mBAAe,UAAU;AAAA,EAAA,CAC5B;AAEK,QAAA,eAAe,CAAC,YAA4B;AAC9C,UAAM,SAAS,eAAe,UAAU,eAAe,UAAU,UAAU,SAAS,YAAY;AAChG,UAAM,YAAY,qBAAqB,MAAM,OAAO,YAAY;AAEhE,wBAAoB,MAAM;AAC1B,mBAAe,UAAU;AAElB,WAAA;AAAA,EACX;AAEA,SAAO,EAAE,aAAa;AAC1B;"}
+{"version":3,"file":"useTypeahead.js","sources":["../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { findNextIndexByValue } from './util';\nimport { ScrollableListItem } from './ScrollableList';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>(undefined);\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":[],"mappings":";;;AAcO,MAAM,eAAe,CAAC,EAAE,MAAM,mBAAoD;AACrF,QAAM,iBAAiB,MAAM,OAA2B,MAAS;AACjE,QAAM,sBAAsB,SAAS,KAAM,MAAM;AAC7C,mBAAe,UAAU;AAAA,EAC7B,CAAC;AAED,QAAM,eAAe,CAAC,YAA4B;AAC9C,UAAM,SAAS,eAAe,UAAU,eAAe,UAAU,UAAU,SAAS,YAAA;AACpF,UAAM,YAAY,qBAAqB,MAAM,OAAO,YAAY;AAEhE,wBAAoB,MAAA;AACpB,mBAAe,UAAU;AAEzB,WAAO;AAAA,EACX;AAEA,SAAO,EAAE,aAAA;AACb;"}

package/dist/components/Listbox/util.cjs

@@ -19,15 +19,14 @@ const findByValue = (data, value) => {
   return data.find((option) => getValue(option.value) === getValue(value));
 };
 const searchForString = (child, value, strategy = "includes") => {
-  var _a, _b, _c;
   try {
-    if (typeof child !== "string" && ((_a = child.props) == null ? void 0 : _a.children)) {
-      if (Array.isArray((_b = child.props) == null ? void 0 : _b.children)) {
+    if (typeof child !== "string" && child.props?.children) {
+      if (Array.isArray(child.props?.children)) {
         return !!child.props.children.some(
           (subChild) => searchForString(subChild, value, strategy)
         );
       }
-      return searchForString((_c = child.props) == null ? void 0 : _c.children, value, strategy);
+      return searchForString(child.props?.children, value, strategy);
     }
     return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
   } catch {
@@ -86,7 +85,7 @@ const sanitizeItem = (item) => {
   return void 0;
 };
 const getOptionParents = (data, path) => {
-  const indexes = (path == null ? void 0 : path.split(".")) ?? [];
+  const indexes = path?.split(".") ?? [];
   if (indexes.length > 1) {
     indexes.pop();
     let lastPath;
@@ -113,7 +112,7 @@ const filterData = (data, value = "") => {
       const parents = getOptionParents(data, option.path);
       filteredOptionValues.add(option.value);
       if (parents !== null) {
-        parents.forEach((option2) => filteredOptionValues.add(option2 == null ? void 0 : option2.value));
+        parents.forEach((option2) => filteredOptionValues.add(option2?.value));
       }
     }
   });