@economic/taco 1.0.5 → 1.0.8

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

@@ -0,0 +1,154 @@
+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 ? [{
+    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) {
+    if (index !== undefined) {
+      var option = data[index];
+
+      if (option && !option.disabled) {
+        setInputValueByRef(inputRef.current, option.value);
+      }
+    }
+  };
+
+  var handleListboxChange = function handleListboxChange(index) {
+    setInputValueByIndex(index);
+  };
+
+  useEffect(function () {
+    if (data.length && currentIndex === undefined) {
+      if (defaultValue !== undefined) {
+        var defaultValueIndex = getIndexFromValue(data, defaultValue);
+
+        if (defaultValueIndex !== undefined) {
+          setInputValueByIndex(defaultValueIndex);
+        }
+      } else {
+        setInputValueByIndex(0);
+      }
+    }
+  }, [data]);
+
+  var handleListboxKeyDown = function handleListboxKeyDown(event) {
+    var charKey = String.fromCharCode(event.keyCode);
+
+    if (charKey.match(/(\w)/g)) {
+      var nextIndex = getNextIndex(charKey);
+
+      if (nextIndex > -1 && nextIndex !== currentIndex) {
+        setInputValueByIndex(nextIndex);
+      }
+
+      return;
+    }
+
+    if (onKeyDown) {
+      event.persist();
+      onKeyDown(event);
+    }
+  };
+
+  var handleListboxFocus = function handleListboxFocus(event) {
+    if (currentIndex === undefined && data.length) {
+      setInputValueByIndex(0);
+    }
+
+    if (onFocus) {
+      event.persist();
+      onFocus(event);
+    }
+  };
+
+  var handleInputChange = function handleInputChange(event) {
+    event.persist();
+
+    if (onChange) {
+      var _item$path$split, _item$path;
+
+      var 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 : [];
+
+      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) {
+          lastPath = lastPath ? [lastPath, i].join('.') : i;
+          return sanitizeItem(data.find(function (i) {
+            return i.path === lastPath;
+          }));
+        });
+      }
+
+      onChange(event);
+    }
+  };
+
+  var list = _extends({}, otherProps, {
+    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
+    data: data,
+    disabled: disabled,
+    id: id,
+    invalid: invalid,
+    onChange: handleListboxChange,
+    onFocus: handleListboxFocus,
+    onKeyDown: handleListboxKeyDown,
+    scrollOnFocus: true,
+    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
+    value: currentIndex
+  });
+
+  var input = {
+    name: name,
+    onChange: handleInputChange,
+    ref: inputRef,
+    tabIndex: -1,
+    value: value !== null && value !== void 0 ? value : ''
+  };
+  return {
+    list: list,
+    input: input
+  };
+};
+
+export { useListbox };
+//# sourceMappingURL=useListbox.js.map

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

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

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

@@ -0,0 +1,223 @@
+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 () {
+    return [{
+      text: texts.listbox.allOption,
+      value: '#ALL-OPTIONS#'
+    }].concat(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 () {
+    if (defaultValue && !value) {
+      setInputValueByRef(inputRef.current, defaultValue.toString());
+    }
+  }, []);
+  useEffect(function () {
+    var selectableItemsCount = data.filter(function (item) {
+      return !item.disabled;
+    }).length - 1;
+
+    if (selectableItemsCount === selectedIndexes.length) {
+      setAllOptionsSelected(true);
+    } else {
+      setAllOptionsSelected(false);
+    }
+  }, [selectedIndexes, data]);
+
+  var setInputValueByIndex = function setInputValueByIndex(index) {
+    if (index !== undefined) {
+      var 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
+
+        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(',');
+          } else {
+            newInputValue = '';
+          }
+        } else {
+          // Handling rest options
+          if (optionAlreadySelected) {
+            newInputValue = currentValuesArray.filter(function (val) {
+              return val !== String(option.value);
+            }).join(',');
+          } else {
+            newInputValue = currentInputValue ? currentInputValue + "," + option.value : option.value;
+          }
+        }
+
+        setInputValueByRef(inputRef.current, newInputValue);
+      }
+    }
+  };
+
+  var handleListboxClick = function handleListboxClick(event, index) {
+    event.preventDefault();
+
+    if (!data[index].disabled) {
+      setCurrentIndex(index);
+      setInputValueByIndex(index);
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  var handleListboxKeyDown = function handleListboxKeyDown(event, index) {
+    var charKey = String.fromCharCode(event.keyCode);
+
+    if (charKey.match(/(\w)/g)) {
+      var nextIndex = getNextIndex(charKey);
+
+      if (nextIndex > -1 && nextIndex !== currentIndex) {
+        setCurrentIndex(nextIndex);
+      }
+
+      return;
+    }
+
+    switch (event.keyCode) {
+      case keycode('space'):
+        {
+          event.preventDefault();
+          setInputValueByIndex(index);
+          break;
+        }
+
+      case keycode('enter'):
+        {
+          setInputValueByIndex(index);
+          break;
+        }
+    }
+
+    setCurrentIndex(index);
+
+    if (onKeyDown) {
+      event.persist();
+      onKeyDown(event);
+    }
+  };
+
+  var handleListboxFocus = function handleListboxFocus(event) {
+    if (onFocus) {
+      event.persist();
+      onFocus(event);
+    }
+  };
+
+  var handleInputChange = function 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);
+
+        if (item) {
+          detail.push(item);
+        }
+      });
+      event.detail = detail;
+      onChange(event);
+    }
+  };
+
+  var list = _extends({}, otherProps, {
+    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
+    'aria-multiselectable': true,
+    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,
+    multiselect: true,
+    allOptionsSelected: allOptionsSelected
+  });
+
+  var input = {
+    name: name,
+    onChange: handleInputChange,
+    ref: inputRef,
+    tabIndex: -1,
+    value: value !== null && value !== void 0 ? value : ''
+  };
+  return {
+    list: list,
+    input: input
+  };
+};
+
+export { useMultiListbox };
+//# sourceMappingURL=useMultiListbox.js.map

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

@@ -0,0 +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":";;;;;;;;;;IAeaA,eAAe,GAAG,SAAlBA,eAAkB,OAe3BC,GAf2B;uBAEvBC;MAAMC,sCAAe;MACrBC,oBAAAA;MACAC,gBAAAA;MAEIC,gBAAJC;MACAC,YAAAA;MACAC,eAAAA;MACAC,gBAAAA;MACAC,eAAAA;MACAC,iBAAAA;MACAC,aAAAA;MACGC;;AAIP,yBAAkBC,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AACA,MAAMT,EAAE,GAAGU,OAAA,CAAc;AAAA,WAAMX,QAAQ,IAAIY,EAAI,EAAtB;AAAA,GAAd,EAAwC,CAACZ,QAAD,CAAxC,CAAX;AACA,MAAMa,QAAQ,GAAGC,aAAa,CAAmBnB,GAAnB,CAA9B;AACA,MAAMC,IAAI,GAAGe,OAAA,CAAc;AACvB,YAAQ;AAAEI,MAAAA,IAAI,EAAEL,KAAK,CAACM,OAAN,CAAcC,SAAtB;AAAiCV,MAAAA,KAAK,EAAE;AAAxC,KAAR,SAAsEV,YAAtE;AACH,GAFY,EAEV,CAACA,YAAD,CAFU,CAAb;;AAGA,wBAAwCc,QAAA,CAAeO,iBAAiB,CAACtB,IAAD,EAAOW,KAAP,CAAjB,IAAkC,CAAjD,CAAxC;AAAA,MAAOY,YAAP;AAAA,MAAqBC,eAArB;;AACA,yBAAoDT,QAAA,CAAe,KAAf,CAApD;AAAA,MAAOU,kBAAP;AAAA,MAA2BC,qBAA3B;;AACA,sBAAyBC,YAAY,CAAC;AAAE3B,IAAAA,IAAI,EAAJA,IAAF;AAAQuB,IAAAA,YAAY,EAAZA;AAAR,GAAD,CAArC;AAAA,MAAQK,YAAR,iBAAQA,YAAR;;AACA,yBAA8Cb,QAAA,CAAec,2BAA2B,CAAC7B,IAAD,EAAOW,KAAP,CAA1C,CAA9C;AAAA,MAAOmB,eAAP;AAAA,MAAwBC,kBAAxB;;AAEAhB,EAAAA,SAAA,CAAgB;AACZ,QAAIb,YAAY,IAAI,CAACS,KAArB,EAA4B;AACxBqB,MAAAA,kBAAkB,CAACf,QAAQ,CAACgB,OAAV,EAAmB/B,YAAY,CAACgC,QAAb,EAAnB,CAAlB;AACH;AACJ,GAJD,EAIG,EAJH;AAMAnB,EAAAA,SAAA,CAAgB;AACZ,QAAMoB,oBAAoB,GAAGnC,IAAI,CAACoC,MAAL,CAAY,UAAAC,IAAI;AAAA,aAAI,CAACA,IAAI,CAAClC,QAAV;AAAA,KAAhB,EAAoCmC,MAApC,GAA6C,CAA1E;;AAEA,QAAIH,oBAAoB,KAAKL,eAAe,CAACQ,MAA7C,EAAqD;AACjDZ,MAAAA,qBAAqB,CAAC,IAAD,CAArB;AACH,KAFD,MAEO;AACHA,MAAAA,qBAAqB,CAAC,KAAD,CAArB;AACH;AACJ,GARD,EAQG,CAACI,eAAD,EAAkB9B,IAAlB,CARH;;AAUA,MAAMuC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD;AACzB,QAAIA,KAAK,KAAKC,SAAd,EAAyB;AACrB,UAAMC,MAAM,GAAG1C,IAAI,CAACwC,KAAD,CAAnB;;AAEA,UAAIE,MAAM,IAAI,CAACA,MAAM,CAACvC,QAAtB,EAAgC;AAAA;;AAC5B,YAAIwC,aAAa,GAA4B,EAA7C;AACA,YAAMC,iBAAiB,wBAAG3B,QAAQ,CAACgB,OAAZ,sDAAG,kBAAkBtB,KAA5C;AACA,YAAMkC,kBAAkB,GAAG,CAAAD,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,YAAAA,iBAAiB,CAAEE,KAAnB,CAAyB,GAAzB,MAAiC,EAA5D;AACA,YAAMC,qBAAqB,GAAGF,kBAAkB,CAACG,SAAnB,CAA6B,UAAAC,GAAG;AAAA,iBAAIA,GAAG,KAAKC,MAAM,CAACR,MAAM,CAAC/B,KAAR,CAAlB;AAAA,SAAhC,MAAsE,CAAC,CAArG,CAJ4B;;AAO5B,YAAI+B,MAAM,CAAC/B,KAAP,KAAiB,eAArB,EAAsC;AAClC,cAAI,CAACc,kBAAL,EAAyB;AACrBkB,YAAAA,aAAa,GAAG3C,IAAI,CACfoC,MADW,CACJ,UAACM,MAAD,EAASF,KAAT;AAAA,qBAAmBA,KAAK,KAAK,CAAV,IAAe,CAACE,MAAM,CAACvC,QAA1C;AAAA,aADI,EAEXgD,GAFW,CAEP,UAAAT,MAAM;AAAA,qBAAIA,MAAM,CAAC/B,KAAX;AAAA,aAFC,EAGXyC,IAHW,CAGN,GAHM,CAAhB;AAIH,WALD,MAKO;AACHT,YAAAA,aAAa,GAAG,EAAhB;AACH;AACJ,SATD,MASO;AACH;AACA,cAAII,qBAAJ,EAA2B;AACvBJ,YAAAA,aAAa,GAAGE,kBAAkB,CAACT,MAAnB,CAA0B,UAAAa,GAAG;AAAA,qBAAIA,GAAG,KAAKC,MAAM,CAACR,MAAM,CAAC/B,KAAR,CAAlB;AAAA,aAA7B,EAA+DyC,IAA/D,CAAoE,GAApE,CAAhB;AACH,WAFD,MAEO;AACHT,YAAAA,aAAa,GAAGC,iBAAiB,GAAMA,iBAAN,SAA2BF,MAAM,CAAC/B,KAAlC,GAA4C+B,MAAM,CAAC/B,KAApF;AACH;AACJ;;AAEDqB,QAAAA,kBAAkB,CAACf,QAAQ,CAACgB,OAAV,EAAmBU,aAAnB,CAAlB;AACH;AACJ;AACJ,GAhCD;;AAkCA,MAAMU,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAyCd,KAAzC;AACvBc,IAAAA,KAAK,CAACC,cAAN;;AAEA,QAAI,CAACvD,IAAI,CAACwC,KAAD,CAAJ,CAAYrC,QAAjB,EAA2B;AACvBqB,MAAAA,eAAe,CAACgB,KAAD,CAAf;AACAD,MAAAA,oBAAoB,CAACC,KAAD,CAApB;AACH;;AAED,QAAIjC,OAAJ,EAAa;AACTA,MAAAA,OAAO,CAAC+C,KAAD,CAAP;AACH;AACJ,GAXD;;AAaA,MAAME,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACF,KAAD,EAA0Cd,KAA1C;AACzB,QAAMiB,OAAO,GAAGP,MAAM,CAACQ,YAAP,CAAoBJ,KAAK,CAACK,OAA1B,CAAhB;;AAEA,QAAIF,OAAO,CAACG,KAAR,CAAc,OAAd,CAAJ,EAA4B;AACxB,UAAMC,SAAS,GAAGjC,YAAY,CAAC6B,OAAD,CAA9B;;AAEA,UAAII,SAAS,GAAG,CAAC,CAAb,IAAkBA,SAAS,KAAKtC,YAApC,EAAkD;AAC9CC,QAAAA,eAAe,CAACqC,SAAD,CAAf;AACH;;AACD;AACH;;AAED,YAAQP,KAAK,CAACK,OAAd;AACI,WAAKG,OAAO,CAAC,OAAD,CAAZ;AAAuB;AACnBR,UAAAA,KAAK,CAACC,cAAN;AACAhB,UAAAA,oBAAoB,CAACC,KAAD,CAApB;AACA;AACH;;AAED,WAAKsB,OAAO,CAAC,OAAD,CAAZ;AAAuB;AACnBvB,UAAAA,oBAAoB,CAACC,KAAD,CAApB;AACA;AACH;AAVL;;AAcAhB,IAAAA,eAAe,CAACgB,KAAD,CAAf;;AAEA,QAAI9B,SAAJ,EAAe;AACX4C,MAAAA,KAAK,CAACS,OAAN;AACArD,MAAAA,SAAS,CAAC4C,KAAD,CAAT;AACH;AACJ,GAhCD;;AAkCA,MAAMU,kBAAkB,GAAG,SAArBA,kBAAqB,CAACV,KAAD;AACvB,QAAI7C,OAAJ,EAAa;AACT6C,MAAAA,KAAK,CAACS,OAAN;AACAtD,MAAAA,OAAO,CAAC6C,KAAD,CAAP;AACH;AACJ,GALD;;AAOA,MAAMW,iBAAiB,GAAG,SAApBA,iBAAoB,CAACX,KAAD;AACtBA,IAAAA,KAAK,CAACS,OAAN;AAEAhC,IAAAA,kBAAkB,CAACF,2BAA2B,CAAC7B,IAAD,EAAOsD,KAAK,CAACY,MAAN,CAAavD,KAApB,CAA5B,CAAlB;;AAEA,QAAIH,QAAJ,EAAc;AACV,UAAM2D,MAAM,GAAyB,EAArC;AACA,UAAMC,WAAW,GAAGd,KAAK,CAACY,MAAN,CAAavD,KAAb,CAAmBmC,KAAnB,CAAyB,GAAzB,CAApB;AAEAsB,MAAAA,WAAW,CAACC,OAAZ,CAAoB,UAAApB,GAAG;AACnB,YAAMZ,IAAI,GAAGiC,WAAW,CAACtE,IAAD,EAAOiD,GAAP,CAAxB;;AACA,YAAIZ,IAAJ,EAAU;AACN8B,UAAAA,MAAM,CAACI,IAAP,CAAYlC,IAAZ;AACH;AACJ,OALD;AAMCiB,MAAAA,KAAa,CAACa,MAAd,GAAuBA,MAAvB;AAED3D,MAAAA,QAAQ,CAAC8C,KAAD,CAAR;AACH;AACJ,GAnBD;;AAqBA,MAAMkB,IAAI,gBACH5D,UADG;AAEN,6BAAyB6D,mBAAmB,CAACzE,IAAD,EAAOuB,YAAP,EAAqBlB,EAArB,CAFtC;AAGN,4BAAwB,IAHlB;AAINL,IAAAA,IAAI,EAAJA,IAJM;AAKNG,IAAAA,QAAQ,EAARA,QALM;AAMNE,IAAAA,EAAE,EAAFA,EANM;AAONG,IAAAA,QAAQ,EAAE;AAAA,aAAM,IAAN;AAAA,KAPJ;AAQND,IAAAA,OAAO,EAAE8C,kBARH;AASN5C,IAAAA,OAAO,EAAEuD,kBATH;AAUNtD,IAAAA,SAAS,EAAE8C,oBAVL;AAWNkB,IAAAA,aAAa,EAAE,KAXT;AAYNC,IAAAA,QAAQ,EAAExE,QAAQ,GAAG,CAAC,CAAJ,GAAQS,UAAU,CAAC+D,QAAX,GAAsB/D,UAAU,CAAC+D,QAAjC,GAA4C,CAZhE;AAaNhE,IAAAA,KAAK,EAAEY,YAbD;AAcNO,IAAAA,eAAe,EAAfA,eAdM;AAeN8C,IAAAA,WAAW,EAAE,IAfP;AAgBNnD,IAAAA,kBAAkB,EAAlBA;AAhBM,IAAV;;AAmBA,MAAMoD,KAAK,GAAG;AACVvE,IAAAA,IAAI,EAAJA,IADU;AAEVE,IAAAA,QAAQ,EAAEyD,iBAFA;AAGVlE,IAAAA,GAAG,EAAEkB,QAHK;AAIV0D,IAAAA,QAAQ,EAAE,CAAC,CAJD;AAKVhE,IAAAA,KAAK,EAAEA,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;AALN,GAAd;AAQA,SAAO;AAAE6D,IAAAA,IAAI,EAAJA,IAAF;AAAQK,IAAAA,KAAK,EAALA;AAAR,GAAP;AACH;;;;"}

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

@@ -0,0 +1,27 @@
+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 () {
+    typeaheadQuery.current = undefined;
+  });
+
+  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
+  };
+};
+
+export { useTypeahead };
+//# sourceMappingURL=useTypeahead.js.map

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

@@ -0,0 +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;AACjC,MAAMC,cAAc,GAAGC,MAAA,EAAvB;AACA,MAAMC,mBAAmB,GAAGC,QAAQ,CAAC,IAAD,EAAO;AACvCH,IAAAA,cAAc,CAACI,OAAf,GAAyBC,SAAzB;AACH,GAFmC,CAApC;;AAIA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,OAAD;AACjB,QAAMC,KAAK,GAAG,CAACR,cAAc,CAACI,OAAf,GAAyBJ,cAAc,CAACI,OAAf,GAAyBG,OAAlD,GAA4DA,OAA7D,EAAsEE,WAAtE,EAAd;AACA,QAAMC,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,YAAY,EAAZA;AAAF,GAAP;AACH;;;;"}

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

@@ -0,0 +1,187 @@
+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';
+
+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';
+  }
+
+  setInputValueByRef$1(input, getValue(value), event);
+};
+var getIndexFromValue = function getIndexFromValue(data, value) {
+  var index = data.findIndex(function (option) {
+    return getValue(option.value) === getValue(value);
+  });
+  return index > -1 ? index : undefined;
+};
+var getSelectedIndexesFromValue = function getSelectedIndexesFromValue(data, value) {
+  if (typeof value !== 'string') return [];
+  return value.split(',').map(function (v) {
+    return data.findIndex(function (o) {
+      return String(o.value) === v;
+    });
+  }).filter(function (v) {
+    return v !== -1;
+  });
+};
+var findByValue = function findByValue(data, value) {
+  return data.find(function (option) {
+    return getValue(option.value) === getValue(value);
+  });
+};
+var searchForString = function searchForString(child, value, strategy) {
+  if (strategy === void 0) {
+    strategy = 'includes';
+  }
+
+  try {
+    var _child$props;
+
+    if (typeof child !== 'string' && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
+      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(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 (_unused) {
+    return false;
+  }
+};
+
+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;
+    }
+
+    return searchForString(option.text, query, 'startsWith');
+  });
+  return index > -1 ? index + firstIndex : -1;
+};
+
+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);
+  }
+
+  return index;
+};
+var getActiveDescendant = function getActiveDescendant(data, currentIndex, id) {
+  return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;
+};
+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(function (childItem, childPath) {
+          return flatten(childItem, childPath, currentPath, isItemDisabled);
+        });
+      }
+    };
+
+    data.forEach(function (item, index) {
+      flatten(item, index);
+    });
+    return items;
+  }, [data]);
+};
+var sanitizeItem = function sanitizeItem(item) {
+  if (item) {
+    var rest = _objectWithoutPropertiesLoose(item, _excluded);
+
+    return rest;
+  }
+
+  return undefined;
+};
+var getOptionParents = function getOptionParents(data, path) {
+  var _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
+
+    var lastPath;
+    return indexes.map(function (i) {
+      lastPath = lastPath ? [lastPath, i].join('.') : i;
+      return sanitizeItem(data.find(function (i) {
+        return i.path === lastPath;
+      }));
+    });
+  }
+
+  return null;
+};
+var filterData = function filterData(data, value) {
+  if (value === void 0) {
+    value = '';
+  }
+
+  if (value === '' || value === null) {
+    return data;
+  }
+
+  var filteredOptionValues = new Set();
+
+  var shouldFilterOption = function shouldFilterOption(option) {
+    if (option.disabled) {
+      return false;
+    }
+
+    return searchForString(option.text, String(value));
+  };
+
+  data.forEach(function (option) {
+    if (shouldFilterOption(option)) {
+      var parents = getOptionParents(data, option.path);
+      filteredOptionValues.add(option.value);
+
+      if (parents !== null) {
+        parents.forEach(function (option) {
+          return filteredOptionValues.add(option === null || option === void 0 ? void 0 : option.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 };
+//# sourceMappingURL=util.js.map