@economic/taco 2.47.0-server.4 → 2.47.0-server.5

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

@@ -1,5 +1,6 @@
 import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react';
 import cn from 'clsx';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { Spinner } from '../Spinner/Spinner.js';
@@ -8,9 +9,13 @@ import { getInputClasses } from '../Input/util.js';
 import { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation.js';
 import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
 
-const getId = (id, value) => `${id}_${value}`;
-const getNextEnabledItem = (event, data, index) => {
-  const nextIndex = getNextIndexFromKey(event.key, data.length, index);
+var _excluded = ["data", "disabled", "highlighted", "id", "invalid", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
+  _excluded2 = ["children", "icon"];
+var getId = function getId(id, value) {
+  return id + "_" + value;
+};
+var getNextEnabledItem = function getNextEnabledItem(event, data, index) {
+  var nextIndex = getNextIndexFromKey(event.key, data.length, index);
   if (nextIndex) {
     if (nextIndex === index) {
       return index;
@@ -20,35 +25,36 @@ const getNextEnabledItem = (event, data, index) => {
   }
   return nextIndex;
 };
-const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref) {
-  const {
-    data,
-    disabled,
-    highlighted,
-    id,
-    invalid: _,
-    loading,
-    onChange: setCurrentIndex,
-    onClick,
-    onFocus,
-    onKeyDown,
-    readOnly,
-    scrollOnFocus = false,
-    value: currentIndex,
-    multiselect,
-    selectedIndexes = [],
-    allOptionsSelected = false,
-    ...otherProps
-  } = props;
-  const listRef = useMergedRef(ref);
-  const itemRefs = useMemo(() => data.map(() => /*#__PURE__*/createRef()), [data]);
-  const {
-    texts
-  } = useLocalization();
-  const {
-    scrollTo
-  } = useListScrollTo(listRef, itemRefs);
-  useEffect(() => {
+var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref) {
+  var data = props.data,
+    disabled = props.disabled,
+    id = props.id,
+    loading = props.loading,
+    setCurrentIndex = props.onChange,
+    onClick = props.onClick,
+    onFocus = props.onFocus,
+    onKeyDown = props.onKeyDown,
+    readOnly = props.readOnly,
+    _props$scrollOnFocus = props.scrollOnFocus,
+    scrollOnFocus = _props$scrollOnFocus === void 0 ? false : _props$scrollOnFocus,
+    currentIndex = props.value,
+    multiselect = props.multiselect,
+    _props$selectedIndexe = props.selectedIndexes,
+    selectedIndexes = _props$selectedIndexe === void 0 ? [] : _props$selectedIndexe,
+    _props$allOptionsSele = props.allOptionsSelected,
+    allOptionsSelected = _props$allOptionsSele === void 0 ? false : _props$allOptionsSele,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var listRef = useMergedRef(ref);
+  var itemRefs = useMemo(function () {
+    return data.map(function () {
+      return /*#__PURE__*/createRef();
+    });
+  }, [data]);
+  var _useLocalization = useLocalization(),
+    texts = _useLocalization.texts;
+  var _useListScrollTo = useListScrollTo(listRef, itemRefs),
+    scrollTo = _useListScrollTo.scrollTo;
+  useEffect(function () {
     var _itemRefs$currentInde;
     if (currentIndex && (_itemRefs$currentInde = itemRefs[currentIndex]) !== null && _itemRefs$currentInde !== void 0 && _itemRefs$currentInde.current) {
       var _itemRefs$currentInde2;
@@ -57,11 +63,11 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
       });
     }
   }, []);
-  useEffect(() => {
+  useEffect(function () {
     scrollTo(currentIndex);
   }, [currentIndex]);
-  const handleKeyDown = event => {
-    const nextIndex = getNextEnabledItem(event, data, currentIndex);
+  var handleKeyDown = function handleKeyDown(event) {
+    var nextIndex = getNextEnabledItem(event, data, currentIndex);
     if (nextIndex !== undefined && nextIndex !== currentIndex) {
       event.preventDefault();
       scrollTo(nextIndex);
@@ -69,21 +75,23 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
     }
     if (onKeyDown) {
       event.persist();
-      const index = nextIndex !== undefined ? nextIndex : currentIndex;
+      var index = nextIndex !== undefined ? nextIndex : currentIndex;
       onKeyDown(event, index);
     }
     // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable
     // list are not executed.
     event.stopPropagation();
   };
-  const handleClick = index => event => {
-    setCurrentIndex(index);
-    if (onClick) {
-      event.persist();
-      onClick(event, index);
-    }
+  var handleClick = function handleClick(index) {
+    return function (event) {
+      setCurrentIndex(index);
+      if (onClick) {
+        event.persist();
+        onClick(event, index);
+      }
+    };
   };
-  const handleFocus = event => {
+  var handleFocus = function handleFocus(event) {
     if (scrollOnFocus) {
       scrollTo(currentIndex);
     }
@@ -92,17 +100,19 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
       onFocus(event);
     }
   };
-  const getOptionCheckedState = (optionValue, index) => {
+  var getOptionCheckedState = function getOptionCheckedState(optionValue, index) {
     if (optionValue === '#ALL-OPTIONS#') {
       return allOptionsSelected;
     } else if (!optionValue || !selectedIndexes) {
       return false;
     } else {
-      return selectedIndexes.findIndex(i => i === index) !== -1;
+      return selectedIndexes.findIndex(function (i) {
+        return i === index;
+      }) !== -1;
     }
   };
-  const options = data.map((option, index) => {
-    const depth = option.path ? option.path.split('.').length - 1 : 0;
+  var options = data.map(function (option, index) {
+    var depth = option.path ? option.path.split('.').length - 1 : 0;
     return {
       'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
       'data-focused': currentIndex === index,
@@ -118,48 +128,50 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
       ref: itemRefs[index],
       role: 'option',
       style: depth > 0 ? {
-        paddingLeft: `${depth + 1}rem`
+        paddingLeft: depth + 1 + "rem"
       } : undefined
     };
   });
-  const list = {
-    ...otherProps,
+  var list = _extends({}, otherProps, {
     className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
       'yt-list--multiselect': multiselect,
       'pointer-events-none': disabled,
       'cursor-not-allowed': disabled || readOnly
     }, otherProps.className),
-    disabled,
-    id,
+    disabled: disabled,
+    id: id,
     onFocus: !disabled && !readOnly ? handleFocus : undefined,
     onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,
-    readOnly,
+    readOnly: readOnly,
     ref: listRef,
     role: options.length <= 0 || loading ? 'presentation' : 'listbox',
     tabIndex: otherProps.tabIndex || 0
-  };
+  });
   return /*#__PURE__*/createElement("ul", Object.assign({}, list, {
     "data-taco": "scrollable-list"
   }), loading ? (/*#__PURE__*/createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/createElement("span", null, /*#__PURE__*/createElement(Spinner, {
     delay: 0
-  })), /*#__PURE__*/createElement("span", null, texts.listbox.loading))) : options.length ? options.map(({
-    children,
-    icon,
-    ...optionProps
-  }) => (/*#__PURE__*/createElement("li", Object.assign({}, optionProps), icon, /*#__PURE__*/createElement("span", {
-    className: "flex-grow truncate text-left"
-  }, children), multiselect && (/*#__PURE__*/createElement(Checkbox
-  // In multiselect variant, this checkbox only acts as visual representation of item being selected,
-  // so need to be taken out of screen reader scope.
-  , {
-    "aria-hidden": true,
-    tabIndex: -1,
-    checked: optionProps['aria-selected'],
-    onChange: () => null,
-    className: "pointer-events-none ml-2 self-center p-px"
-  }))))) : (/*#__PURE__*/createElement("li", {
+  })), /*#__PURE__*/createElement("span", null, texts.listbox.loading))) : options.length ? options.map(function (_ref) {
+    var children = _ref.children,
+      icon = _ref.icon,
+      optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    return /*#__PURE__*/createElement("li", Object.assign({}, optionProps), icon, /*#__PURE__*/createElement("span", {
+      className: "flex-grow truncate text-left"
+    }, children), multiselect && (/*#__PURE__*/createElement(Checkbox
+    // In multiselect variant, this checkbox only acts as visual representation of item being selected,
+    // so need to be taken out of screen reader scope.
+    , {
+      "aria-hidden": true,
+      tabIndex: -1,
+      checked: optionProps['aria-selected'],
+      onChange: function onChange() {
+        return null;
+      },
+      className: "pointer-events-none ml-2 self-center p-px"
+    })));
+  }) : (/*#__PURE__*/createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/createElement("span", null, texts.listbox.empty))));
 });

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","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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"}
+{"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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"}

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

@@ -1,51 +1,55 @@
 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';
 
-const useListbox = ({
-  data: externalData = [],
-  defaultValue,
-  disabled,
-  emptyValue,
-  id: nativeId,
-  invalid,
-  name,
-  onChange,
-  onFocus,
-  onKeyDown,
-  value = emptyValue,
-  ...otherProps
-}, ref) => {
-  const data = useFlattenedData(emptyValue !== undefined ? [{
+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 ? [{
     text: '',
     value: emptyValue
-  }, ...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 => {
+  }].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) {
     if (index !== undefined) {
-      const option = data[index];
+      var option = data[index];
       if (option && !option.disabled) {
         setInputValueByRef(inputRef.current, option.value);
       }
     }
   };
-  const handleListboxChange = index => {
+  var handleListboxChange = function handleListboxChange(index) {
     setInputValueByIndex(index);
   };
-  useEffect(() => {
+  useEffect(function () {
     if (data.length && currentIndex === undefined) {
       if (defaultValue !== undefined) {
-        const defaultValueIndex = getIndexFromValue(data, defaultValue);
+        var defaultValueIndex = getIndexFromValue(data, defaultValue);
         if (defaultValueIndex !== undefined) {
           setInputValueByIndex(defaultValueIndex);
         }
@@ -54,12 +58,12 @@ const useListbox = ({
       }
     }
   }, [data]);
-  const handleListboxKeyDown = event => {
-    const charKey = event.key;
+  var handleListboxKeyDown = function handleListboxKeyDown(event) {
+    var 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)) {
-      const nextIndex = getNextIndex(charKey);
+      var nextIndex = getNextIndex(charKey);
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setInputValueByIndex(nextIndex);
       }
@@ -70,7 +74,7 @@ const useListbox = ({
       onKeyDown(event);
     }
   };
-  const handleListboxFocus = event => {
+  var handleListboxFocus = function handleListboxFocus(event) {
     if (currentIndex === undefined && data.length) {
       setInputValueByIndex(0);
     }
@@ -79,50 +83,51 @@ const useListbox = ({
       onFocus(event);
     }
   };
-  const handleInputChange = event => {
+  var handleInputChange = function handleInputChange(event) {
     event.persist();
     if (onChange) {
       var _item$path$split, _item$path;
-      const item = findByValue(data, event.target.value);
+      var item = findByValue(data, event.target.value);
       event.detail = sanitizeItem(item);
-      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 : [];
+      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 : [];
       if (indexes.length > 1) {
         // we don't want to map the current item
         indexes.pop();
         // we need to rebuild the path as we map
-        let lastPath;
-        event.detail.parents = indexes.map(i => {
+        var lastPath;
+        event.detail.parents = indexes.map(function (i) {
           lastPath = lastPath ? [lastPath, i].join('.') : i;
-          return sanitizeItem(data.find(i => i.path === lastPath));
+          return sanitizeItem(data.find(function (i) {
+            return i.path === lastPath;
+          }));
         });
       }
       onChange(event);
     }
   };
-  const list = {
-    ...otherProps,
+  var list = _extends({}, otherProps, {
     'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
-    data,
-    disabled,
-    id,
-    invalid,
+    data: data,
+    disabled: disabled,
+    id: id,
+    invalid: invalid,
     onChange: handleListboxChange,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,
     scrollOnFocus: true,
     tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
     value: currentIndex
-  };
-  const input = {
-    name,
+  });
+  var input = {
+    name: name,
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
     value: value !== null && value !== void 0 ? value : ''
   };
   return {
-    list,
-    input
+    list: list,
+    input: 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","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":";;;;;;MAaaA,UAAU,GAAGA,CACtB;EACIC,IAAI,EAAEC,YAAY,GAAG,EAAE;EACvBC,YAAY;EACZC,QAAQ;EACRC,UAAU;EACVC,EAAE,EAAEC,QAAQ;EACZC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,KAAK,GAAGR,UAAU;EAClB,GAAGS;CACQ,EACfC,GAAgC;EAEhC,MAAMd,IAAI,GAAGe,gBAAgB,CAACX,UAAU,KAAKY,SAAS,GAAG,CAAC;IAAEC,IAAI,EAAE,EAAE;IAAEL,KAAK,EAAER;GAAY,EAAE,GAAGH,YAAY,CAAC,GAAGA,YAAY,CAAC;EAC3H,MAAMI,EAAE,GAAGa,OAAa,CAAC,MAAMZ,QAAQ,IAAIa,EAAI,EAAE,EAAE,CAACb,QAAQ,CAAC,CAAC;EAC9D,MAAMc,QAAQ,GAAGC,YAAY,CAAmBP,GAAG,CAAC;EACpD,MAAMQ,YAAY,GAAGV,KAAK,KAAKI,SAAS,GAAGO,iBAAiB,CAACvB,IAAI,EAAEY,KAAK,CAAC,GAAGI,SAAS;EACrF,MAAM;IAAEQ;GAAc,GAAGC,YAAY,CAAC;IAAEzB,IAAI;IAAEsB;GAAc,CAAC;EAE7D,MAAMI,oBAAoB,GAAIC,KAAyB;IACnD,IAAIA,KAAK,KAAKX,SAAS,EAAE;MACrB,MAAMY,MAAM,GAAG5B,IAAI,CAAC2B,KAAK,CAAC;MAE1B,IAAIC,MAAM,IAAI,CAACA,MAAM,CAACzB,QAAQ,EAAE;QAC5B0B,kBAAkB,CAACT,QAAQ,CAACU,OAAO,EAAEF,MAAM,CAAChB,KAAK,CAAC;;;GAG7D;EAED,MAAMmB,mBAAmB,GAAIJ,KAAa;IACtCD,oBAAoB,CAACC,KAAK,CAAC;GAC9B;EAEDT,SAAe,CAAC;IACZ,IAAIlB,IAAI,CAACgC,MAAM,IAAIV,YAAY,KAAKN,SAAS,EAAE;MAC3C,IAAId,YAAY,KAAKc,SAAS,EAAE;QAC5B,MAAMiB,iBAAiB,GAAGV,iBAAiB,CAACvB,IAAI,EAAEE,YAAY,CAAC;QAE/D,IAAI+B,iBAAiB,KAAKjB,SAAS,EAAE;UACjCU,oBAAoB,CAACO,iBAAiB,CAAC;;OAE9C,MAAM;QACHP,oBAAoB,CAAC,CAAC,CAAC;;;GAGlC,EAAE,CAAC1B,IAAI,CAAC,CAAC;EAEV,MAAMkC,oBAAoB,GAAIC,KAAuC;IACjE,MAAMC,OAAO,GAAGD,KAAK,CAACE,GAAG;;;IAIzB,IAAID,OAAO,CAACJ,MAAM,KAAK,CAAC,IAAI,OAAO,CAACM,IAAI,CAACF,OAAO,CAAC,EAAE;MAC/C,MAAMG,SAAS,GAAGf,YAAY,CAACY,OAAO,CAAC;MAEvC,IAAIG,SAAS,GAAG,CAAC,CAAC,IAAIA,SAAS,KAAKjB,YAAY,EAAE;QAC9CI,oBAAoB,CAACa,SAAS,CAAC;;MAEnC;;IAGJ,IAAI5B,SAAS,EAAE;MACXwB,KAAK,CAACK,OAAO,EAAE;MACf7B,SAAS,CAACwB,KAAK,CAAC;;GAEvB;EAED,MAAMM,kBAAkB,GAAIN,KAAoC;IAC5D,IAAIb,YAAY,KAAKN,SAAS,IAAIhB,IAAI,CAACgC,MAAM,EAAE;MAC3CN,oBAAoB,CAAC,CAAC,CAAC;;IAG3B,IAAIhB,OAAO,EAAE;MACTyB,KAAK,CAACK,OAAO,EAAE;MACf9B,OAAO,CAACyB,KAAK,CAAC;;GAErB;EAED,MAAMO,iBAAiB,GAAIP,KAA0C;IACjEA,KAAK,CAACK,OAAO,EAAE;IAEf,IAAI/B,QAAQ,EAAE;MAAA,IAAAkC,gBAAA,EAAAC,UAAA;MACV,MAAMC,IAAI,GAAGC,WAAW,CAAC9C,IAAI,EAAEmC,KAAK,CAACY,MAAM,CAACnC,KAAK,CAAC;MACjDuB,KAAa,CAACa,MAAM,GAAGC,YAAY,CAACJ,IAAI,CAAC;MAE1C,MAAMK,OAAO,IAAAP,gBAAA,GAAGE,IAAI,aAAJA,IAAI,wBAAAD,UAAA,GAAJC,IAAI,CAAEM,IAAI,cAAAP,UAAA,uBAAVA,UAAA,CAAYQ,KAAK,CAAC,GAAG,CAAC,cAAAT,gBAAA,cAAAA,gBAAA,GAAI,EAAE;MAE5C,IAAIO,OAAO,CAAClB,MAAM,GAAG,CAAC,EAAE;;QAEpBkB,OAAO,CAACG,GAAG,EAAE;;QAEb,IAAIC,QAAgB;QAEnBnB,KAAa,CAACa,MAAM,CAACO,OAAO,GAAGL,OAAO,CAACM,GAAG,CAACC,CAAC;UACzCH,QAAQ,GAAGA,QAAQ,GAAG,CAACA,QAAQ,EAAEG,CAAC,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,GAAGD,CAAC;UACjD,OAAOR,YAAY,CAACjD,IAAI,CAAC2D,IAAI,CAACF,CAAC,IAAIA,CAAC,CAACN,IAAI,KAAKG,QAAQ,CAAC,CAAC;SAC3D,CAAC;;MAGN7C,QAAQ,CAAC0B,KAAK,CAAC;;GAEtB;EAED,MAAMyB,IAAI,GAAwB;IAC9B,GAAG/C,UAAU;IACb,uBAAuB,EAAEgD,mBAAmB,CAAC7D,IAAI,EAAEsB,YAAY,EAAEjB,EAAE,CAAC;IACpEL,IAAI;IACJG,QAAQ;IACRE,EAAE;IACFE,OAAO;IACPE,QAAQ,EAAEsB,mBAAmB;IAC7BrB,OAAO,EAAE+B,kBAAkB;IAC3B9B,SAAS,EAAEuB,oBAAoB;IAC/B4B,aAAa,EAAE,IAAI;IACnBC,QAAQ,EAAE5D,QAAQ,GAAG,CAAC,CAAC,GAAGU,UAAU,CAACkD,QAAQ,GAAGlD,UAAU,CAACkD,QAAQ,GAAG,CAAC;IACvEnD,KAAK,EAAEU;GACV;EAED,MAAM0C,KAAK,GAAG;IACVxD,IAAI;IACJC,QAAQ,EAAEiC,iBAAiB;IAC3B5B,GAAG,EAAEM,QAAQ;IACb2C,QAAQ,EAAE,CAAC,CAAC;IACZnD,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI;GACnB;EAED,OAAO;IAAEgD,IAAI;IAAEI;GAAO;AAC1B;;;;"}
+{"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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"}