@economic/taco 1.0.9 → 1.1.2

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

@@ -1,3 +1,4 @@
+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';
@@ -6,47 +7,62 @@ import keycode from 'keycode';
 import { getIndexFromValue, getSelectedIndexesFromValue, setInputValueByRef, getActiveDescendant, findByValue } from './util.js';
 import { useTypeahead } from './useTypeahead.js';
 
-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(() => {
+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 () {
     return [{
       text: texts.listbox.allOption,
       value: '#ALL-OPTIONS#'
-    }, ...externalData];
+    }].concat(externalData);
   }, [externalData]);
-  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(() => {
+
+  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 () {
     if (defaultValue && !value) {
       setInputValueByRef(inputRef.current, defaultValue.toString());
     }
   }, []);
-  useEffect(() => {
-    const selectableItemsCount = data.filter(item => !item.disabled).length - 1;
+  useEffect(function () {
+    var selectableItemsCount = data.filter(function (item) {
+      return !item.disabled;
+    }).length - 1;
 
     if (selectableItemsCount === selectedIndexes.length) {
       setAllOptionsSelected(true);
@@ -55,30 +71,38 @@ const useMultiListbox = ({
     }
   }, [selectedIndexes, data]);
 
-  const setInputValueByIndex = index => {
+  var setInputValueByIndex = function setInputValueByIndex(index) {
     if (index !== undefined) {
-      const option = data[index];
+      var option = data[index];
 
       if (option && !option.disabled) {
         var _inputRef$current;
 
-        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
+        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
 
         if (option.value === '#ALL-OPTIONS#') {
           if (!allOptionsSelected) {
-            newInputValue = data.filter((option, index) => index !== 0 && !option.disabled).map(option => option.value).join(',');
+            newInputValue = data.filter(function (option, index) {
+              return index !== 0 && !option.disabled;
+            }).map(function (option) {
+              return option.value;
+            }).join(',');
           } else {
             newInputValue = '';
           }
         } else {
           // Handling rest options
           if (optionAlreadySelected) {
-            newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');
+            newInputValue = currentValuesArray.filter(function (val) {
+              return val !== String(option.value);
+            }).join(',');
           } else {
-            newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;
+            newInputValue = currentInputValue ? currentInputValue + "," + option.value : option.value;
           }
         }
 
@@ -87,7 +111,7 @@ const useMultiListbox = ({
     }
   };
 
-  const handleListboxClick = (event, index) => {
+  var handleListboxClick = function handleListboxClick(event, index) {
     event.preventDefault();
 
     if (!data[index].disabled) {
@@ -100,11 +124,11 @@ const useMultiListbox = ({
     }
   };
 
-  const handleListboxKeyDown = (event, index) => {
-    const charKey = String.fromCharCode(event.keyCode);
+  var handleListboxKeyDown = function handleListboxKeyDown(event, index) {
+    var charKey = String.fromCharCode(event.keyCode);
 
     if (charKey.match(/(\w)/g)) {
-      const nextIndex = getNextIndex(charKey);
+      var nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setCurrentIndex(nextIndex);
@@ -136,22 +160,22 @@ const useMultiListbox = ({
     }
   };
 
-  const handleListboxFocus = event => {
+  var handleListboxFocus = function handleListboxFocus(event) {
     if (onFocus) {
       event.persist();
       onFocus(event);
     }
   };
 
-  const handleInputChange = event => {
+  var handleInputChange = function handleInputChange(event) {
     event.persist();
     setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));
 
     if (onChange) {
-      const detail = [];
-      const valuesArray = event.target.value.split(',');
-      valuesArray.forEach(val => {
-        const item = findByValue(data, val);
+      var detail = [];
+      var valuesArray = event.target.value.split(',');
+      valuesArray.forEach(function (val) {
+        var item = findByValue(data, val);
 
         if (item) {
           detail.push(item);
@@ -162,33 +186,36 @@ const useMultiListbox = ({
     }
   };
 
-  const list = { ...otherProps,
+  var list = _extends({}, otherProps, {
     'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
     'aria-multiselectable': true,
-    data,
-    disabled,
-    id,
-    onChange: () => null,
+    data: data,
+    disabled: disabled,
+    id: id,
+    onChange: function onChange() {
+      return 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
-  };
-  const input = {
-    name,
+    allOptionsSelected: allOptionsSelected
+  });
+
+  var input = {
+    name: name,
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
     value: value !== null && value !== void 0 ? value : ''
   };
   return {
-    list,
-    input
+    list: list,
+    input: input
   };
 };
 

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

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

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

@@ -2,25 +2,24 @@ import { useRef } from 'react';
 import useTimer from '../../utils/hooks/useTimer.js';
 import { findNextIndexByValue } from './util.js';
 
-const useTypeahead = ({
-  data,
-  currentIndex
-}) => {
-  const typeaheadQuery = useRef();
-  const typeaheadQueryTimer = useTimer(1000, () => {
+var useTypeahead = function useTypeahead(_ref) {
+  var data = _ref.data,
+      currentIndex = _ref.currentIndex;
+  var typeaheadQuery = useRef();
+  var typeaheadQueryTimer = useTimer(1000, function () {
     typeaheadQuery.current = undefined;
   });
 
-  const getNextIndex = charKey => {
-    const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();
-    const nextIndex = findNextIndexByValue(data, query, currentIndex);
+  var getNextIndex = function getNextIndex(charKey) {
+    var query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();
+    var 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';\r\nimport useTimer from '../../utils/hooks/useTimer';\r\nimport { findNextIndexByValue } from './util';\r\nimport { ScrollableListItem } from './ScrollableList';\r\n\r\ntype useTypeahead = {\r\n    getNextIndex: (key: string) => number;\r\n};\r\n\r\ntype useTypeaheadProps = {\r\n    data: ScrollableListItem[];\r\n    currentIndex: number | undefined;\r\n};\r\n\r\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\r\n    const typeaheadQuery = React.useRef<string | undefined>();\r\n    const typeaheadQueryTimer = useTimer(1000, () => {\r\n        typeaheadQuery.current = undefined;\r\n    });\r\n\r\n    const getNextIndex = (charKey: string): number => {\r\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\r\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\r\n\r\n        typeaheadQueryTimer.start();\r\n        typeaheadQuery.current = query;\r\n\r\n        return nextIndex;\r\n    };\r\n\r\n    return { getNextIndex };\r\n};\r\n"],"names":["useTypeahead","data","currentIndex","typeaheadQuery","React","typeaheadQueryTimer","useTimer","current","undefined","getNextIndex","charKey","query","toLowerCase","nextIndex","findNextIndexByValue","start"],"mappings":";;;;MAcaA,YAAY,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAAD;AACxB,QAAMC,cAAc,GAAGC,MAAA,EAAvB;AACA,QAAMC,mBAAmB,GAAGC,QAAQ,CAAC,IAAD,EAAO;AACvCH,IAAAA,cAAc,CAACI,OAAf,GAAyBC,SAAzB;AACH,GAFmC,CAApC;;AAIA,QAAMC,YAAY,GAAIC,OAAD;AACjB,UAAMC,KAAK,GAAG,CAACR,cAAc,CAACI,OAAf,GAAyBJ,cAAc,CAACI,OAAf,GAAyBG,OAAlD,GAA4DA,OAA7D,EAAsEE,WAAtE,EAAd;AACA,UAAMC,SAAS,GAAGC,oBAAoB,CAACb,IAAD,EAAOU,KAAP,EAAcT,YAAd,CAAtC;AAEAG,IAAAA,mBAAmB,CAACU,KAApB;AACAZ,IAAAA,cAAc,CAACI,OAAf,GAAyBI,KAAzB;AAEA,WAAOE,SAAP;AACH,GARD;;AAUA,SAAO;AAAEJ,IAAAA;AAAF,GAAP;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":";;;;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;;;;"}

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

@@ -1,24 +1,47 @@
+import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { getId } from './ScrollableList.js';
 import { setInputValueByRef as setInputValueByRef$1 } from '../../utils/input.js';
 
-const getValue = value => String(value !== null && value !== void 0 ? value : '');
+var _excluded = ["hasChildren", "path"];
+
+var getValue = function getValue(value) {
+  return String(value !== null && value !== void 0 ? value : '');
+};
+
+var setInputValueByRef = function setInputValueByRef(input, value, event) {
+  if (event === void 0) {
+    event = 'change';
+  }
 
-const setInputValueByRef = (input, value, event = 'change') => {
   setInputValueByRef$1(input, getValue(value), event);
 };
-const getIndexFromValue = (data, value) => {
-  const index = data.findIndex(option => getValue(option.value) === getValue(value));
+var getIndexFromValue = function getIndexFromValue(data, value) {
+  var index = data.findIndex(function (option) {
+    return getValue(option.value) === getValue(value);
+  });
   return index > -1 ? index : undefined;
 };
-const getSelectedIndexesFromValue = (data, value) => {
+var getSelectedIndexesFromValue = function getSelectedIndexesFromValue(data, value) {
   if (typeof value !== 'string') return [];
-  return value.split(',').map(v => data.findIndex(o => String(o.value) === v)).filter(v => v !== -1);
+  return value.split(',').map(function (v) {
+    return data.findIndex(function (o) {
+      return String(o.value) === v;
+    });
+  }).filter(function (v) {
+    return v !== -1;
+  });
 };
-const findByValue = (data, value) => {
-  return data.find(option => getValue(option.value) === getValue(value));
+var findByValue = function findByValue(data, value) {
+  return data.find(function (option) {
+    return getValue(option.value) === getValue(value);
+  });
 };
-const searchForString = (child, value, strategy = 'includes') => {
+var searchForString = function searchForString(child, value, strategy) {
+  if (strategy === void 0) {
+    strategy = 'includes';
+  }
+
   try {
     var _child$props;
 
@@ -26,20 +49,26 @@ const searchForString = (child, value, strategy = 'includes') => {
       var _child$props2, _child$props3;
 
       if (Array.isArray((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.children)) {
-        return !!child.props.children.find(subChild => searchForString(subChild, value, strategy));
+        return !!child.props.children.find(function (subChild) {
+          return searchForString(subChild, value, strategy);
+        });
       }
 
       return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
     } else {
       return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
     }
-  } catch {
+  } catch (_unused) {
     return false;
   }
 };
 
-const getIndexInRangeByValue = (data, query, firstIndex, lastIndex = data.length) => {
-  const index = data.slice(firstIndex, lastIndex).findIndex(option => {
+var getIndexInRangeByValue = function getIndexInRangeByValue(data, query, firstIndex, lastIndex) {
+  if (lastIndex === void 0) {
+    lastIndex = data.length;
+  }
+
+  var index = data.slice(firstIndex, lastIndex).findIndex(function (option) {
     if (option.disabled) {
       return false;
     }
@@ -49,9 +78,9 @@ const getIndexInRangeByValue = (data, query, firstIndex, lastIndex = data.length
   return index > -1 ? index + firstIndex : -1;
 };
 
-const findNextIndexByValue = (data, query, activeIndex) => {
-  const firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;
-  let index = getIndexInRangeByValue(data, query, firstIndex);
+var findNextIndexByValue = function findNextIndexByValue(data, query, activeIndex) {
+  var firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;
+  var index = getIndexInRangeByValue(data, query, firstIndex);
 
   if (index === -1) {
     index = getIndexInRangeByValue(data, query, 0, activeIndex);
@@ -59,71 +88,76 @@ const findNextIndexByValue = (data, query, activeIndex) => {
 
   return index;
 };
-const getActiveDescendant = (data, currentIndex, id) => {
+var getActiveDescendant = function getActiveDescendant(data, currentIndex, id) {
   return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;
 };
-const useFlattenedData = data => {
-  return React__default.useMemo(() => {
-    const items = [];
-
-    const flatten = (item, path, parentPath, parentDisabled) => {
-      const currentPath = parentPath ? `${parentPath}.${path}` : `${path}`;
-      const isItemDisabled = parentDisabled || item.disabled;
-      items.push({ ...item,
+var useFlattenedData = function useFlattenedData(data) {
+  return React__default.useMemo(function () {
+    var items = [];
+
+    var flatten = function flatten(item, path, parentPath, parentDisabled) {
+      var currentPath = parentPath ? parentPath + "." + path : "" + path;
+      var isItemDisabled = parentDisabled || item.disabled;
+      items.push(_extends({}, item, {
         disabled: isItemDisabled,
         path: currentPath,
         hasChildren: !!item.children
-      });
+      }));
 
       if (item.children) {
-        item.children.forEach((childItem, childPath) => flatten(childItem, childPath, currentPath, isItemDisabled));
+        item.children.forEach(function (childItem, childPath) {
+          return flatten(childItem, childPath, currentPath, isItemDisabled);
+        });
       }
     };
 
-    data.forEach((item, index) => {
+    data.forEach(function (item, index) {
       flatten(item, index);
     });
     return items;
   }, [data]);
 };
-const sanitizeItem = item => {
+var sanitizeItem = function sanitizeItem(item) {
   if (item) {
-    const {
-      hasChildren: _1,
-      path: _2,
-      ...rest
-    } = item;
+    var rest = _objectWithoutPropertiesLoose(item, _excluded);
+
     return rest;
   }
 
   return undefined;
 };
-const getOptionParents = (data, path) => {
+var getOptionParents = function getOptionParents(data, path) {
   var _path$split;
 
-  const indexes = (_path$split = path === null || path === void 0 ? void 0 : path.split('.')) !== null && _path$split !== void 0 ? _path$split : [];
+  var indexes = (_path$split = path === null || path === void 0 ? void 0 : path.split('.')) !== null && _path$split !== void 0 ? _path$split : [];
 
   if (indexes.length > 1) {
     // we don't want to map the current item
     indexes.pop(); // we need to rebuild the path as we map
 
-    let lastPath;
-    return indexes.map(i => {
+    var lastPath;
+    return indexes.map(function (i) {
       lastPath = lastPath ? [lastPath, i].join('.') : i;
-      return sanitizeItem(data.find(i => i.path === lastPath));
+      return sanitizeItem(data.find(function (i) {
+        return i.path === lastPath;
+      }));
     });
   }
 
   return null;
 };
-const filterData = (data, value = '') => {
+var filterData = function filterData(data, value) {
+  if (value === void 0) {
+    value = '';
+  }
+
   if (value === '' || value === null) {
     return data;
   }
 
-  const filteredOptionValues = new Set();
+  var filteredOptionValues = new Set();
 
-  const shouldFilterOption = option => {
+  var shouldFilterOption = function shouldFilterOption(option) {
     if (option.disabled) {
       return false;
     }
@@ -131,19 +165,22 @@ const filterData = (data, value = '') => {
     return searchForString(option.text, String(value));
   };
 
-  data.forEach(option => {
+  data.forEach(function (option) {
     if (shouldFilterOption(option)) {
-      const parents = getOptionParents(data, option.path);
+      var parents = getOptionParents(data, option.path);
       filteredOptionValues.add(option.value);
 
       if (parents !== null) {
-        parents.forEach(option => filteredOptionValues.add(option === null || option === void 0 ? void 0 : option.value));
+        parents.forEach(function (option) {
+          return filteredOptionValues.add(option === null || option === void 0 ? void 0 : option.value);
+        });
       }
     }
   });
-  return data.filter(({
-    value
-  }) => filteredOptionValues.has(value));
+  return data.filter(function (_ref) {
+    var value = _ref.value;
+    return filteredOptionValues.has(value);
+  });
 };
 
 export { filterData, findByValue, findNextIndexByValue, getActiveDescendant, getIndexFromValue, getOptionParents, getSelectedIndexesFromValue, sanitizeItem, searchForString, setInputValueByRef, useFlattenedData };