@economic/taco 2.47.0-server.9 → 2.48.0

package/dist/esm/packages/taco/src/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        } else 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,\n        id,\n        invalid: _,\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 ? nextIndex : currentIndex;\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        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\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 className=\"flex-grow truncate text-left\">{children}</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":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","_props$scrollOnFocus","scrollOnFocus","currentIndex","multiselect","_props$selectedIndexe","selectedIndexes","_props$allOptionsSele","allOptionsSelected","otherProps","_objectWithoutPropertiesLoose","_excluded","listRef","useMergedRef","itemRefs","map","_useLocalization","useLocalization","texts","_useListScrollTo","useListScrollTo","scrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","_extends","getInputClasses","tabIndex","Spinner","delay","listbox","_ref","optionProps","_excluded2","Checkbox","checked","empty"],"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 | 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        } else 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,\n        id,\n        invalid: _,\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 ? nextIndex : currentIndex;\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        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\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 className=\"flex-grow truncate text-left\">{children}</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":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Listbox/useListbox.js

@@ -1,55 +1,51 @@
 import { useMemo, useEffect } from 'react';
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { v4 } from 'uuid';
 import { useFlattenedData, getIndexFromValue, getActiveDescendant, setInputValueByRef, findByValue, sanitizeItem } from './util.js';
 import { useTypeahead } from './useTypeahead.js';
 
-var _excluded = ["data", "defaultValue", "disabled", "emptyValue", "id", "invalid", "name", "onChange", "onFocus", "onKeyDown", "value"];
-var useListbox = function useListbox(_ref, ref) {
-  var _ref$data = _ref.data,
-    externalData = _ref$data === void 0 ? [] : _ref$data,
-    defaultValue = _ref.defaultValue,
-    disabled = _ref.disabled,
-    emptyValue = _ref.emptyValue,
-    nativeId = _ref.id,
-    invalid = _ref.invalid,
-    name = _ref.name,
-    onChange = _ref.onChange,
-    onFocus = _ref.onFocus,
-    onKeyDown = _ref.onKeyDown,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? emptyValue : _ref$value,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var data = useFlattenedData(emptyValue !== undefined ? [{
+const useListbox = ({
+  data: externalData = [],
+  defaultValue,
+  disabled,
+  emptyValue,
+  id: nativeId,
+  invalid,
+  name,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value = emptyValue,
+  ...otherProps
+}, ref) => {
+  const data = useFlattenedData(emptyValue !== undefined ? [{
     text: '',
     value: emptyValue
-  }].concat(externalData) : externalData);
-  var id = useMemo(function () {
-    return nativeId || v4();
-  }, [nativeId]);
-  var inputRef = useMergedRef(ref);
-  var currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
-  var _useTypeahead = useTypeahead({
-      data: data,
-      currentIndex: currentIndex
-    }),
-    getNextIndex = _useTypeahead.getNextIndex;
-  var setInputValueByIndex = function setInputValueByIndex(index) {
+  }, ...externalData] : externalData);
+  const id = useMemo(() => nativeId || v4(), [nativeId]);
+  const inputRef = useMergedRef(ref);
+  const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
+  const {
+    getNextIndex
+  } = useTypeahead({
+    data,
+    currentIndex
+  });
+  const setInputValueByIndex = index => {
     if (index !== undefined) {
-      var option = data[index];
+      const option = data[index];
       if (option && !option.disabled) {
         setInputValueByRef(inputRef.current, option.value);
       }
     }
   };
-  var handleListboxChange = function handleListboxChange(index) {
+  const handleListboxChange = index => {
     setInputValueByIndex(index);
   };
-  useEffect(function () {
+  useEffect(() => {
     if (data.length && currentIndex === undefined) {
       if (defaultValue !== undefined) {
-        var defaultValueIndex = getIndexFromValue(data, defaultValue);
+        const defaultValueIndex = getIndexFromValue(data, defaultValue);
         if (defaultValueIndex !== undefined) {
           setInputValueByIndex(defaultValueIndex);
         }
@@ -58,12 +54,12 @@ var useListbox = function useListbox(_ref, ref) {
       }
     }
   }, [data]);
-  var handleListboxKeyDown = function handleListboxKeyDown(event) {
-    var charKey = event.key;
+  const handleListboxKeyDown = event => {
+    const charKey = event.key;
     // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
     // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
     if (charKey.length === 1 && /(\w)/g.test(charKey)) {
-      var nextIndex = getNextIndex(charKey);
+      const nextIndex = getNextIndex(charKey);
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setInputValueByIndex(nextIndex);
       }
@@ -74,7 +70,7 @@ var useListbox = function useListbox(_ref, ref) {
       onKeyDown(event);
     }
   };
-  var handleListboxFocus = function handleListboxFocus(event) {
+  const handleListboxFocus = event => {
     if (currentIndex === undefined && data.length) {
       setInputValueByIndex(0);
     }
@@ -83,51 +79,50 @@ var useListbox = function useListbox(_ref, ref) {
       onFocus(event);
     }
   };
-  var handleInputChange = function handleInputChange(event) {
+  const handleInputChange = event => {
     event.persist();
     if (onChange) {
       var _item$path$split, _item$path;
-      var item = findByValue(data, event.target.value);
+      const item = findByValue(data, event.target.value);
       event.detail = sanitizeItem(item);
-      var indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
+      const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
       if (indexes.length > 1) {
         // we don't want to map the current item
         indexes.pop();
         // we need to rebuild the path as we map
-        var lastPath;
-        event.detail.parents = indexes.map(function (i) {
+        let lastPath;
+        event.detail.parents = indexes.map(i => {
           lastPath = lastPath ? [lastPath, i].join('.') : i;
-          return sanitizeItem(data.find(function (i) {
-            return i.path === lastPath;
-          }));
+          return sanitizeItem(data.find(i => i.path === lastPath));
         });
       }
       onChange(event);
     }
   };
-  var list = _extends({}, otherProps, {
+  const list = {
+    ...otherProps,
     'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
-    data: data,
-    disabled: disabled,
-    id: id,
-    invalid: invalid,
+    data,
+    disabled,
+    id,
+    invalid,
     onChange: handleListboxChange,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,
     scrollOnFocus: true,
     tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
     value: currentIndex
-  });
-  var input = {
-    name: name,
+  };
+  const input = {
+    name,
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
     value: value !== null && value !== void 0 ? value : ''
   };
   return {
-    list: list,
-    input: input
+    list,
+    input
   };
 };
 

package/dist/esm/packages/taco/src/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 { v4 as uuid } from 'uuid';\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 ? [{ text: '', value: emptyValue }, ...externalData] : externalData);\n    const id = React.useMemo(() => nativeId || uuid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;\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                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\n            } else {\n                setInputValueByIndex(0);\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":["useListbox","_ref","ref","data","externalData","_ref$data","defaultValue","disabled","emptyValue","nativeId","id","invalid","name","onChange","onFocus","onKeyDown","_ref$value","value","otherProps","_objectWithoutPropertiesLoose","_excluded","useFlattenedData","undefined","text","concat","React","uuid","inputRef","useMergedRef","currentIndex","getIndexFromValue","_useTypeahead","useTypeahead","getNextIndex","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","_item$path$split","_item$path","item","findByValue","target","detail","sanitizeItem","indexes","path","split","pop","lastPath","parents","map","i","join","find","list","_extends","getActiveDescendant","scrollOnFocus","tabIndex","input"],"mappings":"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"}
+{"version":3,"file":"useListbox.js","sources":["../../../../../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\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 ? [{ text: '', value: emptyValue }, ...externalData] : externalData);\n    const id = React.useMemo(() => nativeId || uuid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;\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                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\n            } else {\n                setInputValueByIndex(0);\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":["useListbox","data","externalData","defaultValue","disabled","emptyValue","id","nativeId","invalid","name","onChange","onFocus","onKeyDown","value","otherProps","ref","useFlattenedData","undefined","text","React","uuid","inputRef","useMergedRef","currentIndex","getIndexFromValue","getNextIndex","useTypeahead","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","_item$path$split","_item$path","item","findByValue","target","detail","sanitizeItem","indexes","path","split","pop","lastPath","parents","map","i","join","find","list","getActiveDescendant","scrollOnFocus","tabIndex","input"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Listbox/useMultiListbox.js

@@ -1,103 +1,86 @@
 import { useMemo, useState, useEffect } from 'react';
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { v4 } from 'uuid';
 import { getIndexFromValue, getSelectedIndexesFromValue, setInputValueByRef, getActiveDescendant, findByValue } from './util.js';
 import { useTypeahead } from './useTypeahead.js';
 
-var _excluded = ["data", "defaultValue", "disabled", "emptyValue", "id", "name", "onClick", "onChange", "onFocus", "onKeyDown", "value"];
-var useMultiListbox = function useMultiListbox(_ref, ref) {
-  var _ref$data = _ref.data,
-    externalData = _ref$data === void 0 ? [] : _ref$data,
-    defaultValue = _ref.defaultValue,
-    disabled = _ref.disabled,
-    nativeId = _ref.id,
-    name = _ref.name,
-    onClick = _ref.onClick,
-    onChange = _ref.onChange,
-    onFocus = _ref.onFocus,
-    onKeyDown = _ref.onKeyDown,
-    value = _ref.value,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useLocalization = useLocalization(),
-    texts = _useLocalization.texts;
-  var id = useMemo(function () {
-    return nativeId || v4();
-  }, [nativeId]);
-  var inputRef = useMergedRef(ref);
-  var data = useMemo(function () {
+const useMultiListbox = ({
+  data: externalData = [],
+  defaultValue,
+  disabled,
+  emptyValue: _,
+  id: nativeId,
+  name,
+  onClick,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value,
+  ...otherProps
+}, ref) => {
+  const {
+    texts
+  } = useLocalization();
+  const id = useMemo(() => nativeId || v4(), [nativeId]);
+  const inputRef = useMergedRef(ref);
+  const data = useMemo(() => {
     return [{
       text: texts.listbox.allOption,
       value: '#ALL-OPTIONS#'
-    }].concat(externalData);
+    }, ...externalData];
   }, [externalData]);
-  var _React$useState = useState(getIndexFromValue(data, value) || 0),
-    currentIndex = _React$useState[0],
-    setCurrentIndex = _React$useState[1];
-  var _React$useState2 = useState(false),
-    allOptionsSelected = _React$useState2[0],
-    setAllOptionsSelected = _React$useState2[1];
-  var _useTypeahead = useTypeahead({
-      data: data,
-      currentIndex: currentIndex
-    }),
-    getNextIndex = _useTypeahead.getNextIndex;
-  var _React$useState3 = useState(getSelectedIndexesFromValue(data, value)),
-    selectedIndexes = _React$useState3[0],
-    setSelectedIndexes = _React$useState3[1];
-  useEffect(function () {
+  const [currentIndex, setCurrentIndex] = useState(getIndexFromValue(data, value) || 0);
+  const [allOptionsSelected, setAllOptionsSelected] = useState(false);
+  const {
+    getNextIndex
+  } = useTypeahead({
+    data,
+    currentIndex
+  });
+  const [selectedIndexes, setSelectedIndexes] = useState(getSelectedIndexesFromValue(data, value));
+  useEffect(() => {
     if (defaultValue && !value) {
       setInputValueByRef(inputRef.current, defaultValue.toString());
     }
   }, []);
-  useEffect(function () {
-    var selectableItemsCount = data.filter(function (item) {
-      return !item.disabled;
-    }).length - 1;
+  useEffect(() => {
+    const selectableItemsCount = data.filter(item => !item.disabled).length - 1;
     if (selectableItemsCount === selectedIndexes.length) {
       setAllOptionsSelected(true);
     } else {
       setAllOptionsSelected(false);
     }
   }, [selectedIndexes, data]);
-  var setInputValueByIndex = function setInputValueByIndex(index) {
+  const setInputValueByIndex = index => {
     if (index !== undefined) {
-      var option = data[index];
+      const option = data[index];
       if (option && !option.disabled) {
         var _inputRef$current;
-        var newInputValue = '';
-        var currentInputValue = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
-        var currentValuesArray = (currentInputValue === null || currentInputValue === void 0 ? void 0 : currentInputValue.split(',')) || [];
-        var optionAlreadySelected = currentValuesArray.findIndex(function (val) {
-          return val === String(option.value);
-        }) !== -1;
+        let newInputValue = '';
+        const currentInputValue = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
+        const currentValuesArray = (currentInputValue === null || currentInputValue === void 0 ? void 0 : currentInputValue.split(',')) || [];
+        const optionAlreadySelected = currentValuesArray.findIndex(val => val === String(option.value)) !== -1;
         // Handling the select_all option
         if (option.value === '#ALL-OPTIONS#') {
           if (!allOptionsSelected) {
-            newInputValue = data.filter(function (option, index) {
-              return index !== 0 && !option.disabled;
-            }).map(function (option) {
-              return option.value;
-            }).join(',');
+            newInputValue = data.filter((option, index) => index !== 0 && !option.disabled).map(option => option.value).join(',');
           } else {
             newInputValue = '';
           }
         } else {
           // Handling rest options
           if (optionAlreadySelected) {
-            newInputValue = currentValuesArray.filter(function (val) {
-              return val !== String(option.value);
-            }).join(',');
+            newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');
           } else {
-            newInputValue = currentInputValue ? currentInputValue + "," + option.value : option.value;
+            newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;
           }
         }
         setInputValueByRef(inputRef.current, newInputValue);
       }
     }
   };
-  var handleListboxClick = function handleListboxClick(event, index) {
+  const handleListboxClick = (event, index) => {
     event.preventDefault();
     if (!data[index].disabled) {
       setCurrentIndex(index);
@@ -107,12 +90,12 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
       onClick(event);
     }
   };
-  var handleListboxKeyDown = function handleListboxKeyDown(event, index) {
-    var charKey = event.key;
+  const handleListboxKeyDown = (event, index) => {
+    const charKey = event.key;
     // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
     // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
     if (charKey.length === 1 && /(\w)/g.test(charKey)) {
-      var nextIndex = getNextIndex(charKey);
+      const nextIndex = getNextIndex(charKey);
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setCurrentIndex(nextIndex);
       }
@@ -137,20 +120,20 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
       onKeyDown(event);
     }
   };
-  var handleListboxFocus = function handleListboxFocus(event) {
+  const handleListboxFocus = event => {
     if (onFocus) {
       event.persist();
       onFocus(event);
     }
   };
-  var handleInputChange = function handleInputChange(event) {
+  const handleInputChange = event => {
     event.persist();
     setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));
     if (onChange) {
-      var detail = [];
-      var valuesArray = event.target.value.split(',');
-      valuesArray.forEach(function (val) {
-        var item = findByValue(data, val);
+      const detail = [];
+      const valuesArray = event.target.value.split(',');
+      valuesArray.forEach(val => {
+        const item = findByValue(data, val);
         if (item) {
           detail.push(item);
         }
@@ -159,35 +142,34 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
       onChange(event);
     }
   };
-  var list = _extends({}, otherProps, {
+  const list = {
+    ...otherProps,
     'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
     'aria-multiselectable': true,
-    data: data,
-    disabled: disabled,
-    id: id,
-    onChange: function onChange() {
-      return null;
-    },
+    data,
+    disabled,
+    id,
+    onChange: () => null,
     onClick: handleListboxClick,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,
     scrollOnFocus: false,
     tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
     value: currentIndex,
-    selectedIndexes: selectedIndexes,
+    selectedIndexes,
     multiselect: true,
-    allOptionsSelected: allOptionsSelected
-  });
-  var input = {
-    name: name,
+    allOptionsSelected
+  };
+  const input = {
+    name,
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
     value: value !== null && value !== void 0 ? value : ''
   };
   return {
-    list: list,
-    input: input
+    list,
+    input
   };
 };
 

package/dist/esm/packages/taco/src/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 { v4 as uuid } from 'uuid';\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 || uuid(), [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.findIndex(val => val === String(option.value)) !== -1;\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (!allOptionsSelected) {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    } else {\n                        newInputValue = '';\n                    }\n                } else {\n                    // Handling rest options\n                    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\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].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 ? index : 0);\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":["useMultiListbox","_ref","ref","data","externalData","_ref$data","defaultValue","disabled","nativeId","id","name","onClick","onChange","onFocus","onKeyDown","value","otherProps","_objectWithoutPropertiesLoose","_excluded","_useLocalization","useLocalization","texts","React","uuid","inputRef","useMergedRef","text","listbox","allOption","concat","_React$useState","getIndexFromValue","currentIndex","setCurrentIndex","_React$useState2","allOptionsSelected","setAllOptionsSelected","_useTypeahead","useTypeahead","getNextIndex","_React$useState3","getSelectedIndexesFromValue","selectedIndexes","setSelectedIndexes","setInputValueByRef","current","toString","selectableItemsCount","filter","item","length","setInputValueByIndex","index","undefined","option","_inputRef$current","newInputValue","currentInputValue","currentValuesArray","split","optionAlreadySelected","findIndex","val","String","map","join","handleListboxClick","event","preventDefault","handleListboxKeyDown","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","target","detail","valuesArray","forEach","findByValue","push","list","_extends","getActiveDescendant","scrollOnFocus","tabIndex","multiselect","input"],"mappings":"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"}
+{"version":3,"file":"useMultiListbox.js","sources":["../../../../../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\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 || uuid(), [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.findIndex(val => val === String(option.value)) !== -1;\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (!allOptionsSelected) {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    } else {\n                        newInputValue = '';\n                    }\n                } else {\n                    // Handling rest options\n                    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\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].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 ? index : 0);\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":["useMultiListbox","data","externalData","defaultValue","disabled","emptyValue","_","id","nativeId","name","onClick","onChange","onFocus","onKeyDown","value","otherProps","ref","texts","useLocalization","React","uuid","inputRef","useMergedRef","text","listbox","allOption","currentIndex","setCurrentIndex","getIndexFromValue","allOptionsSelected","setAllOptionsSelected","getNextIndex","useTypeahead","selectedIndexes","setSelectedIndexes","getSelectedIndexesFromValue","setInputValueByRef","current","toString","selectableItemsCount","filter","item","length","setInputValueByIndex","index","undefined","option","_inputRef$current","newInputValue","currentInputValue","currentValuesArray","split","optionAlreadySelected","findIndex","val","String","map","join","handleListboxClick","event","preventDefault","handleListboxKeyDown","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","target","detail","valuesArray","forEach","findByValue","push","list","getActiveDescendant","scrollOnFocus","tabIndex","multiselect","input"],"mappings":";;;;;;;MAcaA,eAAe,GAAGA,CAC3B;EACIC,IAAI,EAAEC,YAAY,GAAG,EAAE;EACvBC,YAAY;EACZC,QAAQ;EACRC,UAAU,EAAEC,CAAC;EACbC,EAAE,EAAEC,QAAQ;EACZC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,KAAK;EACL,GAAGC;CACQ,EACfC,GAAgC;EAEhC,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMX,EAAE,GAAGY,OAAa,CAAC,MAAMX,QAAQ,IAAIY,EAAI,EAAE,EAAE,CAACZ,QAAQ,CAAC,CAAC;EAC9D,MAAMa,QAAQ,GAAGC,YAAY,CAAmBN,GAAG,CAAC;EACpD,MAAMf,IAAI,GAAGkB,OAAa,CAAC;IACvB,OAAO,CAAC;MAAEI,IAAI,EAAEN,KAAK,CAACO,OAAO,CAACC,SAAS;MAAEX,KAAK,EAAE;KAAiB,EAAE,GAAGZ,YAAY,CAAC;GACtF,EAAE,CAACA,YAAY,CAAC,CAAC;EAClB,MAAM,CAACwB,YAAY,EAAEC,eAAe,CAAC,GAAGR,QAAc,CAACS,iBAAiB,CAAC3B,IAAI,EAAEa,KAAK,CAAC,IAAI,CAAC,CAAC;EAC3F,MAAM,CAACe,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGX,QAAc,CAAC,KAAK,CAAC;EACzE,MAAM;IAAEY;GAAc,GAAGC,YAAY,CAAC;IAAE/B,IAAI;IAAEyB;GAAc,CAAC;EAC7D,MAAM,CAACO,eAAe,EAAEC,kBAAkB,CAAC,GAAGf,QAAc,CAACgB,2BAA2B,CAAClC,IAAI,EAAEa,KAAK,CAAC,CAAC;EAEtGK,SAAe,CAAC;IACZ,IAAIhB,YAAY,IAAI,CAACW,KAAK,EAAE;MACxBsB,kBAAkB,CAACf,QAAQ,CAACgB,OAAO,EAAElC,YAAY,CAACmC,QAAQ,EAAE,CAAC;;GAEpE,EAAE,EAAE,CAAC;EAENnB,SAAe,CAAC;IACZ,MAAMoB,oBAAoB,GAAGtC,IAAI,CAACuC,MAAM,CAACC,IAAI,IAAI,CAACA,IAAI,CAACrC,QAAQ,CAAC,CAACsC,MAAM,GAAG,CAAC;IAE3E,IAAIH,oBAAoB,KAAKN,eAAe,CAACS,MAAM,EAAE;MACjDZ,qBAAqB,CAAC,IAAI,CAAC;KAC9B,MAAM;MACHA,qBAAqB,CAAC,KAAK,CAAC;;GAEnC,EAAE,CAACG,eAAe,EAAEhC,IAAI,CAAC,CAAC;EAE3B,MAAM0C,oBAAoB,GAAIC,KAAyB;IACnD,IAAIA,KAAK,KAAKC,SAAS,EAAE;MACrB,MAAMC,MAAM,GAAG7C,IAAI,CAAC2C,KAAK,CAAC;MAE1B,IAAIE,MAAM,IAAI,CAACA,MAAM,CAAC1C,QAAQ,EAAE;QAAA,IAAA2C,iBAAA;QAC5B,IAAIC,aAAa,GAA4B,EAAE;QAC/C,MAAMC,iBAAiB,IAAAF,iBAAA,GAAG1B,QAAQ,CAACgB,OAAO,cAAAU,iBAAA,uBAAhBA,iBAAA,CAAkBjC,KAAK;QACjD,MAAMoC,kBAAkB,GAAG,CAAAD,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEE,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE;QAC9D,MAAMC,qBAAqB,GAAGF,kBAAkB,CAACG,SAAS,CAACC,GAAG,IAAIA,GAAG,KAAKC,MAAM,CAACT,MAAM,CAAChC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;;QAGtG,IAAIgC,MAAM,CAAChC,KAAK,KAAK,eAAe,EAAE;UAClC,IAAI,CAACe,kBAAkB,EAAE;YACrBmB,aAAa,GAAG/C,IAAI,CACfuC,MAAM,CAAC,CAACM,MAAM,EAAEF,KAAK,KAAKA,KAAK,KAAK,CAAC,IAAI,CAACE,MAAM,CAAC1C,QAAQ,CAAC,CAC1DoD,GAAG,CAACV,MAAM,IAAIA,MAAM,CAAChC,KAAK,CAAC,CAC3B2C,IAAI,CAAC,GAAG,CAAC;WACjB,MAAM;YACHT,aAAa,GAAG,EAAE;;SAEzB,MAAM;;UAEH,IAAII,qBAAqB,EAAE;YACvBJ,aAAa,GAAGE,kBAAkB,CAACV,MAAM,CAACc,GAAG,IAAIA,GAAG,KAAKC,MAAM,CAACT,MAAM,CAAChC,KAAK,CAAC,CAAC,CAAC2C,IAAI,CAAC,GAAG,CAAC;WAC3F,MAAM;YACHT,aAAa,GAAGC,iBAAiB,GAAG,GAAGA,iBAAiB,IAAIH,MAAM,CAAChC,KAAK,EAAE,GAAGgC,MAAM,CAAChC,KAAK;;;QAIjGsB,kBAAkB,CAACf,QAAQ,CAACgB,OAAO,EAAEW,aAAa,CAAC;;;GAG9D;EAED,MAAMU,kBAAkB,GAAGA,CAACC,KAAsC,EAAEf,KAAa;IAC7Ee,KAAK,CAACC,cAAc,EAAE;IAEtB,IAAI,CAAC3D,IAAI,CAAC2C,KAAK,CAAC,CAACxC,QAAQ,EAAE;MACvBuB,eAAe,CAACiB,KAAK,CAAC;MACtBD,oBAAoB,CAACC,KAAK,CAAC;;IAG/B,IAAIlC,OAAO,EAAE;MACTA,OAAO,CAACiD,KAAK,CAAC;;GAErB;EAED,MAAME,oBAAoB,GAAGA,CAACF,KAAuC,EAAEf,KAAc;IACjF,MAAMkB,OAAO,GAAGH,KAAK,CAACI,GAAG;;;IAIzB,IAAID,OAAO,CAACpB,MAAM,KAAK,CAAC,IAAI,OAAO,CAACsB,IAAI,CAACF,OAAO,CAAC,EAAE;MAC/C,MAAMG,SAAS,GAAGlC,YAAY,CAAC+B,OAAO,CAAC;MAEvC,IAAIG,SAAS,GAAG,CAAC,CAAC,IAAIA,SAAS,KAAKvC,YAAY,EAAE;QAC9CC,eAAe,CAACsC,SAAS,CAAC;;MAE9B;;IAGJ,QAAQN,KAAK,CAACI,GAAG;MACb,KAAK,GAAG;QAAE;UACNJ,KAAK,CAACC,cAAc,EAAE;UACtBjB,oBAAoB,CAACC,KAAK,CAAC;UAC3B;;MAGJ,KAAK,OAAO;QAAE;UACVD,oBAAoB,CAACC,KAAK,CAAC;UAC3B;;;IAKRjB,eAAe,CAACiB,KAAK,KAAKC,SAAS,GAAGD,KAAK,GAAG,CAAC,CAAC;IAEhD,IAAI/B,SAAS,EAAE;MACX8C,KAAK,CAACO,OAAO,EAAE;MACfrD,SAAS,CAAC8C,KAAK,CAAC;;GAEvB;EAED,MAAMQ,kBAAkB,GAAIR,KAAoC;IAC5D,IAAI/C,OAAO,EAAE;MACT+C,KAAK,CAACO,OAAO,EAAE;MACftD,OAAO,CAAC+C,KAAK,CAAC;;GAErB;EAED,MAAMS,iBAAiB,GAAIT,KAA0C;IACjEA,KAAK,CAACO,OAAO,EAAE;IAEfhC,kBAAkB,CAACC,2BAA2B,CAAClC,IAAI,EAAE0D,KAAK,CAACU,MAAM,CAACvD,KAAK,CAAC,CAAC;IAEzE,IAAIH,QAAQ,EAAE;MACV,MAAM2D,MAAM,GAAyB,EAAE;MACvC,MAAMC,WAAW,GAAGZ,KAAK,CAACU,MAAM,CAACvD,KAAK,CAACqC,KAAK,CAAC,GAAG,CAAC;MAEjDoB,WAAW,CAACC,OAAO,CAAClB,GAAG;QACnB,MAAMb,IAAI,GAAGgC,WAAW,CAACxE,IAAI,EAAEqD,GAAG,CAAC;QACnC,IAAIb,IAAI,EAAE;UACN6B,MAAM,CAACI,IAAI,CAACjC,IAAI,CAAC;;OAExB,CAAC;MACDkB,KAAa,CAACW,MAAM,GAAGA,MAAM;MAE9B3D,QAAQ,CAACgD,KAAK,CAAC;;GAEtB;EAED,MAAMgB,IAAI,GAAG;IACT,GAAG5D,UAAU;IACb,uBAAuB,EAAE6D,mBAAmB,CAAC3E,IAAI,EAAEyB,YAAY,EAAEnB,EAAE,CAAC;IACpE,sBAAsB,EAAE,IAAI;IAC5BN,IAAI;IACJG,QAAQ;IACRG,EAAE;IACFI,QAAQ,EAAEA,MAAM,IAAI;IACpBD,OAAO,EAAEgD,kBAAkB;IAC3B9C,OAAO,EAAEuD,kBAAkB;IAC3BtD,SAAS,EAAEgD,oBAAoB;IAC/BgB,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE1E,QAAQ,GAAG,CAAC,CAAC,GAAGW,UAAU,CAAC+D,QAAQ,GAAG/D,UAAU,CAAC+D,QAAQ,GAAG,CAAC;IACvEhE,KAAK,EAAEY,YAAY;IACnBO,eAAe;IACf8C,WAAW,EAAE,IAAI;IACjBlD;GACH;EAED,MAAMmD,KAAK,GAAG;IACVvE,IAAI;IACJE,QAAQ,EAAEyD,iBAAiB;IAC3BpD,GAAG,EAAEK,QAAQ;IACbyD,QAAQ,EAAE,CAAC,CAAC;IACZhE,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI;GACnB;EAED,OAAO;IAAE6D,IAAI;IAAEK;GAAO;AAC1B;;;;"}