@economic/taco 1.1.13-alpha.0 → 1.3.0

package/dist/esm/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 { useProxiedRef } from '../../utils/hooks/useProxiedRef';\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 = useProxiedRef<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 = String.fromCharCode(event.keyCode);\n\n        if (charKey.match(/(\\w)/g)) {\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","data","externalData","defaultValue","disabled","emptyValue","nativeId","id","invalid","name","onChange","onFocus","onKeyDown","value","otherProps","useFlattenedData","undefined","text","React","uuid","inputRef","useProxiedRef","currentIndex","getIndexFromValue","useTypeahead","getNextIndex","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","String","fromCharCode","keyCode","match","nextIndex","persist","handleListboxFocus","handleInputChange","item","findByValue","target","detail","sanitizeItem","indexes","path","split","pop","lastPath","parents","map","i","join","find","list","getActiveDescendant","scrollOnFocus","tabIndex","input"],"mappings":"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"}
+{"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 { useProxiedRef } from '../../utils/hooks/useProxiedRef';\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 = useProxiedRef<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","useProxiedRef","currentIndex","getIndexFromValue","getNextIndex","useTypeahead","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","item","findByValue","target","detail","sanitizeItem","indexes","path","split","pop","lastPath","parents","map","i","join","find","list","getActiveDescendant","scrollOnFocus","tabIndex","input"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useMultiListbox.js","sources":["../../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport { useLocalization } from '../Provider/Provider';\nimport { ListboxProps } from './Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\nimport { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || uuid(), [nativeId]);\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.findIndex(val => val === String(option.value)) !== -1;\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (!allOptionsSelected) {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    } else {\n                        newInputValue = '';\n                    }\n                } else {\n                    // Handling rest options\n                    if (optionAlreadySelected) {\n                        newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                    } else {\n                        newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                    }\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (!data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index: number): void => {\n        const charKey = String.fromCharCode(event.keyCode);\n\n        if (charKey.match(/(\\w)/g)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.keyCode) {\n            case keycode('space'): {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case keycode('enter'): {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useMultiListbox","ref","data","externalData","defaultValue","disabled","nativeId","id","name","onClick","onChange","onFocus","onKeyDown","value","otherProps","useLocalization","texts","React","uuid","inputRef","useProxiedRef","text","listbox","allOption","getIndexFromValue","currentIndex","setCurrentIndex","allOptionsSelected","setAllOptionsSelected","useTypeahead","getNextIndex","getSelectedIndexesFromValue","selectedIndexes","setSelectedIndexes","setInputValueByRef","current","toString","selectableItemsCount","filter","item","length","setInputValueByIndex","index","undefined","option","newInputValue","currentInputValue","currentValuesArray","split","optionAlreadySelected","findIndex","val","String","map","join","handleListboxClick","event","preventDefault","handleListboxKeyDown","charKey","fromCharCode","keyCode","match","nextIndex","keycode","persist","handleListboxFocus","handleInputChange","target","detail","valuesArray","forEach","findByValue","push","list","getActiveDescendant","scrollOnFocus","tabIndex","multiselect","input"],"mappings":"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"}
+{"version":3,"file":"useMultiListbox.js","sources":["../../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { useLocalization } from '../Provider/Provider';\nimport { ListboxProps } from './Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\nimport { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || uuid(), [nativeId]);\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.findIndex(val => val === String(option.value)) !== -1;\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (!allOptionsSelected) {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    } else {\n                        newInputValue = '';\n                    }\n                } else {\n                    // Handling rest options\n                    if (optionAlreadySelected) {\n                        newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                    } else {\n                        newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                    }\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (!data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index: number): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useMultiListbox","data","externalData","defaultValue","disabled","emptyValue","_","id","nativeId","name","onClick","onChange","onFocus","onKeyDown","value","otherProps","ref","texts","useLocalization","React","uuid","inputRef","useProxiedRef","text","listbox","allOption","currentIndex","setCurrentIndex","getIndexFromValue","allOptionsSelected","setAllOptionsSelected","getNextIndex","useTypeahead","selectedIndexes","setSelectedIndexes","getSelectedIndexesFromValue","setInputValueByRef","current","toString","selectableItemsCount","filter","item","length","setInputValueByIndex","index","undefined","option","newInputValue","currentInputValue","currentValuesArray","split","optionAlreadySelected","findIndex","val","String","map","join","handleListboxClick","event","preventDefault","handleListboxKeyDown","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","target","detail","valuesArray","forEach","findByValue","push","list","getActiveDescendant","scrollOnFocus","tabIndex","multiselect","input"],"mappings":";;;;;;;MAcaA,eAAe,GAAG,CAC3B;EACIC,IAAI,EAAEC,YAAY,GAAG,EADzB;EAEIC,YAFJ;EAGIC,QAHJ;EAIIC,UAAU,EAAEC,CAJhB;EAKIC,EAAE,EAAEC,QALR;EAMIC,IANJ;EAOIC,OAPJ;EAQIC,QARJ;EASIC,OATJ;EAUIC,SAVJ;EAWIC,KAXJ;EAYI,GAAGC;AAZP,CAD2B,EAe3BC,GAf2B;EAiB3B,MAAM;IAAEC;MAAUC,eAAe,EAAjC;EACA,MAAMX,EAAE,GAAGY,OAAA,CAAc,MAAMX,QAAQ,IAAIY,EAAI,EAApC,EAAwC,CAACZ,QAAD,CAAxC,CAAX;EACA,MAAMa,QAAQ,GAAGC,aAAa,CAAmBN,GAAnB,CAA9B;EACA,MAAMf,IAAI,GAAGkB,OAAA,CAAc;IACvB,OAAO,CAAC;MAAEI,IAAI,EAAEN,KAAK,CAACO,OAAN,CAAcC,SAAtB;MAAiCX,KAAK,EAAE;KAAzC,EAA4D,GAAGZ,YAA/D,CAAP;GADS,EAEV,CAACA,YAAD,CAFU,CAAb;EAGA,MAAM,CAACwB,YAAD,EAAeC,eAAf,IAAkCR,QAAA,CAAeS,iBAAiB,CAAC3B,IAAD,EAAOa,KAAP,CAAjB,IAAkC,CAAjD,CAAxC;EACA,MAAM,CAACe,kBAAD,EAAqBC,qBAArB,IAA8CX,QAAA,CAAe,KAAf,CAApD;EACA,MAAM;IAAEY;MAAiBC,YAAY,CAAC;IAAE/B,IAAF;IAAQyB;GAAT,CAArC;EACA,MAAM,CAACO,eAAD,EAAkBC,kBAAlB,IAAwCf,QAAA,CAAegB,2BAA2B,CAAClC,IAAD,EAAOa,KAAP,CAA1C,CAA9C;EAEAK,SAAA,CAAgB;IACZ,IAAIhB,YAAY,IAAI,CAACW,KAArB,EAA4B;MACxBsB,kBAAkB,CAACf,QAAQ,CAACgB,OAAV,EAAmBlC,YAAY,CAACmC,QAAb,EAAnB,CAAlB;;GAFR,EAIG,EAJH;EAMAnB,SAAA,CAAgB;IACZ,MAAMoB,oBAAoB,GAAGtC,IAAI,CAACuC,MAAL,CAAYC,IAAI,IAAI,CAACA,IAAI,CAACrC,QAA1B,EAAoCsC,MAApC,GAA6C,CAA1E;;IAEA,IAAIH,oBAAoB,KAAKN,eAAe,CAACS,MAA7C,EAAqD;MACjDZ,qBAAqB,CAAC,IAAD,CAArB;KADJ,MAEO;MACHA,qBAAqB,CAAC,KAAD,CAArB;;GANR,EAQG,CAACG,eAAD,EAAkBhC,IAAlB,CARH;;EAUA,MAAM0C,oBAAoB,GAAIC,KAAD;IACzB,IAAIA,KAAK,KAAKC,SAAd,EAAyB;MACrB,MAAMC,MAAM,GAAG7C,IAAI,CAAC2C,KAAD,CAAnB;;MAEA,IAAIE,MAAM,IAAI,CAACA,MAAM,CAAC1C,QAAtB,EAAgC;QAAA;;QAC5B,IAAI2C,aAAa,GAA4B,EAA7C;QACA,MAAMC,iBAAiB,wBAAG3B,QAAQ,CAACgB,OAAZ,sDAAG,kBAAkBvB,KAA5C;QACA,MAAMmC,kBAAkB,GAAG,CAAAD,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,YAAAA,iBAAiB,CAAEE,KAAnB,CAAyB,GAAzB,MAAiC,EAA5D;QACA,MAAMC,qBAAqB,GAAGF,kBAAkB,CAACG,SAAnB,CAA6BC,GAAG,IAAIA,GAAG,KAAKC,MAAM,CAACR,MAAM,CAAChC,KAAR,CAAlD,MAAsE,CAAC,CAArG,CAJ4B;;QAO5B,IAAIgC,MAAM,CAAChC,KAAP,KAAiB,eAArB,EAAsC;UAClC,IAAI,CAACe,kBAAL,EAAyB;YACrBkB,aAAa,GAAG9C,IAAI,CACfuC,MADW,CACJ,CAACM,MAAD,EAASF,KAAT,KAAmBA,KAAK,KAAK,CAAV,IAAe,CAACE,MAAM,CAAC1C,QADtC,EAEXmD,GAFW,CAEPT,MAAM,IAAIA,MAAM,CAAChC,KAFV,EAGX0C,IAHW,CAGN,GAHM,CAAhB;WADJ,MAKO;YACHT,aAAa,GAAG,EAAhB;;SAPR,MASO;;UAEH,IAAII,qBAAJ,EAA2B;YACvBJ,aAAa,GAAGE,kBAAkB,CAACT,MAAnB,CAA0Ba,GAAG,IAAIA,GAAG,KAAKC,MAAM,CAACR,MAAM,CAAChC,KAAR,CAA/C,EAA+D0C,IAA/D,CAAoE,GAApE,CAAhB;WADJ,MAEO;YACHT,aAAa,GAAGC,iBAAiB,MAAMA,qBAAqBF,MAAM,CAAChC,OAAlC,GAA4CgC,MAAM,CAAChC,KAApF;;;;QAIRsB,kBAAkB,CAACf,QAAQ,CAACgB,OAAV,EAAmBU,aAAnB,CAAlB;;;GA7BZ;;EAkCA,MAAMU,kBAAkB,GAAG,CAACC,KAAD,EAAyCd,KAAzC;IACvBc,KAAK,CAACC,cAAN;;IAEA,IAAI,CAAC1D,IAAI,CAAC2C,KAAD,CAAJ,CAAYxC,QAAjB,EAA2B;MACvBuB,eAAe,CAACiB,KAAD,CAAf;MACAD,oBAAoB,CAACC,KAAD,CAApB;;;IAGJ,IAAIlC,OAAJ,EAAa;MACTA,OAAO,CAACgD,KAAD,CAAP;;GATR;;EAaA,MAAME,oBAAoB,GAAG,CAACF,KAAD,EAA0Cd,KAA1C;IACzB,MAAMiB,OAAO,GAAGH,KAAK,CAACI,GAAtB;;;IAIA,IAAID,OAAO,CAACnB,MAAR,KAAmB,CAAnB,IAAwB,QAAQqB,IAAR,CAAaF,OAAb,CAA5B,EAAmD;MAC/C,MAAMG,SAAS,GAAGjC,YAAY,CAAC8B,OAAD,CAA9B;;MAEA,IAAIG,SAAS,GAAG,CAAC,CAAb,IAAkBA,SAAS,KAAKtC,YAApC,EAAkD;QAC9CC,eAAe,CAACqC,SAAD,CAAf;;;MAEJ;;;IAGJ,QAAQN,KAAK,CAACI,GAAd;MACI,KAAK,GAAL;QAAU;UACNJ,KAAK,CAACC,cAAN;UACAhB,oBAAoB,CAACC,KAAD,CAApB;UACA;;;MAGJ,KAAK,OAAL;QAAc;UACVD,oBAAoB,CAACC,KAAD,CAApB;UACA;;;;IAKRjB,eAAe,CAACiB,KAAD,CAAf;;IAEA,IAAI/B,SAAJ,EAAe;MACX6C,KAAK,CAACO,OAAN;MACApD,SAAS,CAAC6C,KAAD,CAAT;;GAhCR;;EAoCA,MAAMQ,kBAAkB,GAAIR,KAAD;IACvB,IAAI9C,OAAJ,EAAa;MACT8C,KAAK,CAACO,OAAN;MACArD,OAAO,CAAC8C,KAAD,CAAP;;GAHR;;EAOA,MAAMS,iBAAiB,GAAIT,KAAD;IACtBA,KAAK,CAACO,OAAN;IAEA/B,kBAAkB,CAACC,2BAA2B,CAAClC,IAAD,EAAOyD,KAAK,CAACU,MAAN,CAAatD,KAApB,CAA5B,CAAlB;;IAEA,IAAIH,QAAJ,EAAc;MACV,MAAM0D,MAAM,GAAyB,EAArC;MACA,MAAMC,WAAW,GAAGZ,KAAK,CAACU,MAAN,CAAatD,KAAb,CAAmBoC,KAAnB,CAAyB,GAAzB,CAApB;MAEAoB,WAAW,CAACC,OAAZ,CAAoBlB,GAAG;QACnB,MAAMZ,IAAI,GAAG+B,WAAW,CAACvE,IAAD,EAAOoD,GAAP,CAAxB;;QACA,IAAIZ,IAAJ,EAAU;UACN4B,MAAM,CAACI,IAAP,CAAYhC,IAAZ;;OAHR;MAMCiB,KAAa,CAACW,MAAd,GAAuBA,MAAvB;MAED1D,QAAQ,CAAC+C,KAAD,CAAR;;GAjBR;;EAqBA,MAAMgB,IAAI,GAAG,EACT,GAAG3D,UADM;IAET,yBAAyB4D,mBAAmB,CAAC1E,IAAD,EAAOyB,YAAP,EAAqBnB,EAArB,CAFnC;IAGT,wBAAwB,IAHf;IAITN,IAJS;IAKTG,QALS;IAMTG,EANS;IAOTI,QAAQ,EAAE,MAAM,IAPP;IAQTD,OAAO,EAAE+C,kBARA;IAST7C,OAAO,EAAEsD,kBATA;IAUTrD,SAAS,EAAE+C,oBAVF;IAWTgB,aAAa,EAAE,KAXN;IAYTC,QAAQ,EAAEzE,QAAQ,GAAG,CAAC,CAAJ,GAAQW,UAAU,CAAC8D,QAAX,GAAsB9D,UAAU,CAAC8D,QAAjC,GAA4C,CAZ7D;IAaT/D,KAAK,EAAEY,YAbE;IAcTO,eAdS;IAeT6C,WAAW,EAAE,IAfJ;IAgBTjD;GAhBJ;EAmBA,MAAMkD,KAAK,GAAG;IACVtE,IADU;IAEVE,QAAQ,EAAEwD,iBAFA;IAGVnD,GAAG,EAAEK,QAHK;IAIVwD,QAAQ,EAAE,CAAC,CAJD;IAKV/D,KAAK,EAAEA,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;GALpB;EAQA,OAAO;IAAE4D,IAAF;IAAQK;GAAf;AACH;;;;"}

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

@@ -2,24 +2,25 @@ import { useRef } from 'react';
 import useTimer from '../../utils/hooks/useTimer.js';
 import { findNextIndexByValue } from './util.js';
 
-var useTypeahead = function useTypeahead(_ref) {
-  var data = _ref.data,
-      currentIndex = _ref.currentIndex;
-  var typeaheadQuery = useRef();
-  var typeaheadQueryTimer = useTimer(1000, function () {
+const useTypeahead = ({
+  data,
+  currentIndex
+}) => {
+  const typeaheadQuery = useRef();
+  const typeaheadQueryTimer = useTimer(1000, () => {
     typeaheadQuery.current = undefined;
   });
 
-  var getNextIndex = function getNextIndex(charKey) {
-    var query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();
-    var nextIndex = findNextIndexByValue(data, query, currentIndex);
+  const getNextIndex = charKey => {
+    const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();
+    const nextIndex = findNextIndexByValue(data, query, currentIndex);
     typeaheadQueryTimer.start();
     typeaheadQuery.current = query;
     return nextIndex;
   };
 
   return {
-    getNextIndex: getNextIndex
+    getNextIndex
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"useTypeahead.js","sources":["../../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { findNextIndexByValue } from './util';\nimport { ScrollableListItem } from './ScrollableList';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>();\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":["useTypeahead","data","currentIndex","typeaheadQuery","React","typeaheadQueryTimer","useTimer","current","undefined","getNextIndex","charKey","query","toLowerCase","nextIndex","findNextIndexByValue","start"],"mappings":";;;;IAcaA,YAAY,GAAG,SAAfA,YAAe;MAAGC,YAAAA;MAAMC,oBAAAA;EACjC,IAAMC,cAAc,GAAGC,MAAA,EAAvB;EACA,IAAMC,mBAAmB,GAAGC,QAAQ,CAAC,IAAD,EAAO;IACvCH,cAAc,CAACI,OAAf,GAAyBC,SAAzB;GADgC,CAApC;;EAIA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,OAAD;IACjB,IAAMC,KAAK,GAAG,CAACR,cAAc,CAACI,OAAf,GAAyBJ,cAAc,CAACI,OAAf,GAAyBG,OAAlD,GAA4DA,OAA7D,EAAsEE,WAAtE,EAAd;IACA,IAAMC,SAAS,GAAGC,oBAAoB,CAACb,IAAD,EAAOU,KAAP,EAAcT,YAAd,CAAtC;IAEAG,mBAAmB,CAACU,KAApB;IACAZ,cAAc,CAACI,OAAf,GAAyBI,KAAzB;IAEA,OAAOE,SAAP;GAPJ;;EAUA,OAAO;IAAEJ,YAAY,EAAZA;GAAT;AACH;;;;"}
+{"version":3,"file":"useTypeahead.js","sources":["../../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { findNextIndexByValue } from './util';\nimport { ScrollableListItem } from './ScrollableList';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>();\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":["useTypeahead","data","currentIndex","typeaheadQuery","React","typeaheadQueryTimer","useTimer","current","undefined","getNextIndex","charKey","query","toLowerCase","nextIndex","findNextIndexByValue","start"],"mappings":";;;;MAcaA,YAAY,GAAG,CAAC;EAAEC,IAAF;EAAQC;AAAR,CAAD;EACxB,MAAMC,cAAc,GAAGC,MAAA,EAAvB;EACA,MAAMC,mBAAmB,GAAGC,QAAQ,CAAC,IAAD,EAAO;IACvCH,cAAc,CAACI,OAAf,GAAyBC,SAAzB;GADgC,CAApC;;EAIA,MAAMC,YAAY,GAAIC,OAAD;IACjB,MAAMC,KAAK,GAAG,CAACR,cAAc,CAACI,OAAf,GAAyBJ,cAAc,CAACI,OAAf,GAAyBG,OAAlD,GAA4DA,OAA7D,EAAsEE,WAAtE,EAAd;IACA,MAAMC,SAAS,GAAGC,oBAAoB,CAACb,IAAD,EAAOU,KAAP,EAAcT,YAAd,CAAtC;IAEAG,mBAAmB,CAACU,KAApB;IACAZ,cAAc,CAACI,OAAf,GAAyBI,KAAzB;IAEA,OAAOE,SAAP;GAPJ;;EAUA,OAAO;IAAEJ;GAAT;AACH;;;;"}