@economic/taco 1.1.13-alpha.0 → 1.3.0

package/dist/esm/components/Listbox/Listbox.js

@@ -1,53 +1,52 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { ScrollableList } from './ScrollableList.js';
 import { useListbox } from './useListbox.js';
 import { useMultiListbox } from './useMultiListbox.js';
 
-var _excluded = ["className"],
-    _excluded2 = ["className"];
-var Listbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
-  var externalClassName = props.className,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var _useListbox = useListbox(otherProps, ref),
-      list = _useListbox.list,
-      input = _useListbox.input;
-
-  var className = cn('bg-white inline-flex relative w-full', externalClassName);
+const Listbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
+  const {
+    className: externalClassName,
+    ...otherProps
+  } = props;
+  const {
+    list,
+    input
+  } = useListbox(otherProps, ref);
+  const className = cn('bg-white inline-flex relative w-full', externalClassName);
   return createElement("span", {
     "data-taco": "listbox",
     className: className
   }, createElement(ScrollableList, Object.assign({}, list, {
-    style: _extends({}, list.style, {
+    style: { ...list.style,
       maxHeight: 'calc(12rem + 2px)'
       /* (6 * option height) + listbox border */
 
-    })
+    }
   })), createElement("input", Object.assign({}, input, {
     className: "hidden",
     type: "text"
   })));
 });
-var MultiListbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
-  var externalClassName = props.className,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
-
-  var _useMultiListbox = useMultiListbox(otherProps, ref),
-      list = _useMultiListbox.list,
-      input = _useMultiListbox.input;
-
-  var className = cn('bg-white inline-flex relative w-full', externalClassName);
+const MultiListbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
+  const {
+    className: externalClassName,
+    ...otherProps
+  } = props;
+  const {
+    list,
+    input
+  } = useMultiListbox(otherProps, ref);
+  const className = cn('bg-white inline-flex relative w-full', externalClassName);
   return createElement("span", {
     "data-taco": "listbox",
     className: className
   }, createElement(ScrollableList, Object.assign({}, list, {
-    style: _extends({}, list.style, {
+    style: { ...list.style,
       maxHeight: 'calc(12rem + 2px + 2px)'
       /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
 
-    })
+    }
   })), createElement("input", Object.assign({}, input, {
     className: "hidden",
     type: "text"

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,kBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;MAAQK,IAAR,eAAQA,IAAR;MAAcC,KAAd,eAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eAAOJ,IAAI,CAACI,KAAZ;MAAmBC,SAAS,EAAE;;;;IAFvC,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACzC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,uBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;MAAQK,IAAR,oBAAQA,IAAR;MAAcC,KAAd,oBAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eACEJ,IAAI,CAACI,KADP;MAEDC,SAAS,EAAE;;;;IAJnB,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}
+{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","className","externalClassName","otherProps","list","input","useListbox","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;MAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgC,GAAGC;MAAeJ,KAAxD;EACA,MAAM;IAAEK,IAAF;IAAQC;MAAUC,UAAU,CAACH,UAAD,EAAaH,GAAb,CAAlC;EACA,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;EAEA,OACIJ,aAAA,OAAA;iBAAgB;IAAUG,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;IACJK,KAAK,EAAE,EAAE,GAAGL,IAAI,CAACK,KAAV;MAAiBC,SAAS,EAAE;;;;IAFvC,CADJ,EAKIZ,aAAA,QAAA,oBAAWO;IAAOJ,SAAS,EAAC;IAASU,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;MAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACzC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgC,GAAGC;MAAeJ,KAAxD;EACA,MAAM;IAAEK,IAAF;IAAQC;MAAUQ,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;EACA,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;EAEA,OACIJ,aAAA,OAAA;iBAAgB;IAAUG,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;IACJK,KAAK,EAAE,EACH,GAAGL,IAAI,CAACK,KADL;MAEHC,SAAS,EAAE;;;;IAJnB,CADJ,EAQIZ,aAAA,QAAA,oBAAWO;IAAOJ,SAAS,EAAC;IAASU,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

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

@@ -1,4 +1,3 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react';
 import cn from 'classnames';
 import { Spinner } from '../Spinner/Spinner.js';
@@ -6,17 +5,13 @@ import { useLocalization } from '../Provider/Provider.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 import { getInputClasses } from '../Input/util.js';
-import { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation.js';
+import { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation.js';
 import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
 
-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;
-};
+const getId = (id, value) => `${id}_${value}`;
 
-var getNextEnabledItem = function getNextEnabledItem(event, data, index) {
-  var nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
+const getNextEnabledItem = (event, data, index) => {
+  const nextIndex = getNextIndexFromKey(event.key, data.length, index);
 
   if (nextIndex) {
     if (nextIndex === index) {
@@ -29,40 +24,35 @@ var getNextEnabledItem = function getNextEnabledItem(event, data, index) {
   return nextIndex;
 };
 
-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 = useProxiedRef(ref);
-  var itemRefs = useMemo(function () {
-    return data.map(function () {
-      return createRef();
-    });
-  }, [data]);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var _useListScrollTo = useListScrollTo(listRef, itemRefs),
-      scrollTo = _useListScrollTo.scrollTo;
-
-  useEffect(function () {
+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 = useProxiedRef(ref);
+  const itemRefs = useMemo(() => data.map(() => createRef()), [data]);
+  const {
+    texts
+  } = useLocalization();
+  const {
+    scrollTo
+  } = useListScrollTo(listRef, itemRefs);
+  useEffect(() => {
     var _itemRefs$currentInde;
 
     if (currentIndex && (_itemRefs$currentInde = itemRefs[currentIndex]) !== null && _itemRefs$currentInde !== void 0 && _itemRefs$currentInde.current) {
@@ -73,12 +63,12 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
       });
     }
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     scrollTo(currentIndex);
   }, [currentIndex]);
 
-  var handleKeyDown = function handleKeyDown(event) {
-    var nextIndex = getNextEnabledItem(event, data, currentIndex);
+  const handleKeyDown = event => {
+    const nextIndex = getNextEnabledItem(event, data, currentIndex);
 
     if (nextIndex !== undefined && nextIndex !== currentIndex) {
       event.preventDefault();
@@ -88,23 +78,21 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
 
     if (onKeyDown) {
       event.persist();
-      var index = nextIndex !== undefined ? nextIndex : currentIndex;
+      const index = nextIndex !== undefined ? nextIndex : currentIndex;
       onKeyDown(event, index);
     }
   };
 
-  var handleClick = function handleClick(index) {
-    return function (event) {
-      setCurrentIndex(index);
+  const handleClick = index => event => {
+    setCurrentIndex(index);
 
-      if (onClick) {
-        event.persist();
-        onClick(event, index);
-      }
-    };
+    if (onClick) {
+      event.persist();
+      onClick(event, index);
+    }
   };
 
-  var handleFocus = function handleFocus(event) {
+  const handleFocus = event => {
     if (scrollOnFocus) {
       scrollTo(currentIndex);
     }
@@ -115,36 +103,33 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
     }
   };
 
-  var getOptionCheckedState = function getOptionCheckedState(optionValue, index) {
+  const getOptionCheckedState = (optionValue, index) => {
     if (optionValue === '#ALL-OPTIONS#') {
       return allOptionsSelected;
     } else if (!optionValue || !selectedIndexes) {
       return false;
     } else {
-      return selectedIndexes.findIndex(function (i) {
-        return i === index;
-      }) !== -1;
+      return selectedIndexes.findIndex(i => i === index) !== -1;
     }
   };
 
-  var list = _extends({}, otherProps, {
+  const list = { ...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: disabled,
-    id: id,
+    disabled,
+    id,
     onFocus: !disabled && !readOnly ? handleFocus : undefined,
     onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,
-    readOnly: readOnly,
+    readOnly,
     ref: listRef,
     role: 'listbox',
     tabIndex: otherProps.tabIndex || 0
-  });
-
-  var options = data.map(function (option, index) {
-    var depth = option.path ? option.path.split('.').length - 1 : 0;
+  };
+  const options = data.map((option, index) => {
+    const depth = option.path ? option.path.split('.').length - 1 : 0;
     return {
       'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
       'data-focused': currentIndex === index,
@@ -160,7 +145,7 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
       ref: itemRefs[index],
       role: 'option',
       style: depth > 0 ? {
-        paddingLeft: depth + 1 + "rem"
+        paddingLeft: `${depth + 1}rem`
       } : undefined
     };
   });
@@ -170,21 +155,17 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
     className: "yt-list__empty"
   }, createElement("span", null, createElement(Spinner, {
     delay: 0
-  })), createElement("span", null, texts.listbox.loading)) : options.length ? options.map(function (_ref) {
-    var children = _ref.children,
-        icon = _ref.icon,
-        optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
-
-    return createElement("li", Object.assign({}, optionProps), icon, createElement("span", {
-      className: "flex-grow truncate text-left"
-    }, children), multiselect && createElement(Checkbox, {
-      checked: optionProps['aria-selected'],
-      onChange: function onChange() {
-        return null;
-      },
-      className: "pointer-events-none ml-2 self-center p-px"
-    }));
-  }) : createElement("li", {
+  })), createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({
+    children,
+    icon,
+    ...optionProps
+  }) => createElement("li", Object.assign({}, optionProps), icon, createElement("span", {
+    className: "flex-grow truncate text-left"
+  }, children), multiselect && createElement(Checkbox, {
+    checked: optionProps['aria-selected'],
+    onChange: () => null,
+    className: "pointer-events-none ml-2 self-center p-px"
+  }))) : createElement("li", {
     className: "yt-list__empty"
   }, createElement("span", null, texts.listbox.empty)));
 });

package/dist/esm/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 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\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 = getNextIndexFromKeycode(event.keyCode, 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 = useProxiedRef<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\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 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: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\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 focus:border-blue',\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    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                                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","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","current","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","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 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\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 = useProxiedRef<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\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 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: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\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 focus:border-blue',\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    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                                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","useProxiedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","current","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

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

@@ -1,46 +1,40 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo, useEffect } from 'react';
 import { v4 } from 'uuid';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 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 = useProxiedRef(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 = useProxiedRef(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);
@@ -48,14 +42,14 @@ var useListbox = function useListbox(_ref, ref) {
     }
   };
 
-  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);
@@ -66,11 +60,12 @@ var useListbox = function useListbox(_ref, ref) {
     }
   }, [data]);
 
-  var handleListboxKeyDown = function handleListboxKeyDown(event) {
-    var charKey = String.fromCharCode(event.keyCode);
+  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.match(/(\w)/g)) {
-      var nextIndex = getNextIndex(charKey);
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
+      const nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setInputValueByIndex(nextIndex);
@@ -85,7 +80,7 @@ var useListbox = function useListbox(_ref, ref) {
     }
   };
 
-  var handleListboxFocus = function handleListboxFocus(event) {
+  const handleListboxFocus = event => {
     if (currentIndex === undefined && data.length) {
       setInputValueByIndex(0);
     }
@@ -96,26 +91,24 @@ var useListbox = function useListbox(_ref, ref) {
     }
   };
 
-  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));
         });
       }
 
@@ -123,30 +116,29 @@ var useListbox = function useListbox(_ref, ref) {
     }
   };
 
-  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
   };
 };