@economic/taco 1.0.9 → 1.1.0

package/dist/esm/components/Input/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\r\n\r\nexport const getInputClasses = props => {\r\n    return cn(\r\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center',\r\n        {\r\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\r\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\r\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\r\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\r\n            'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark':\r\n                !props.invalid,\r\n            'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark':\r\n                props.invalid,\r\n        }\r\n    );\r\n};\r\n\r\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\r\n    if (invalid) {\r\n        return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\r\n    }\r\n\r\n    return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\r\n};\r\n"],"names":["getInputClasses","props","cn","readOnly","disabled","highlighted","invalid","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;AAChC,SAAOC,EAAE,CACL,gKADK,EAEL;AACI,6CAAyCD,KAAK,CAACE,QADnD;AAEI,sDAAkDF,KAAK,CAACG,QAF5D;AAGI,kCAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;AAII,gCAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;AAKI,2IACI,CAACH,KAAK,CAACK,OANf;AAOI,wIACIL,KAAK,CAACK;AARd,GAFK,CAAT;AAaH;MAEYC,qBAAqB,GAAID,OAAD;AACjC,MAAIA,OAAJ,EAAa;AACT,WAAO,6HAAP;AACH;;AAED,SAAO,mHAAP;AACH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\n\nexport const getInputClasses = props => {\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n            'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark':\n                !props.invalid,\n            'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark':\n                props.invalid,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n    }\n\n    return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","highlighted","invalid","getButtonStateClasses"],"mappings":";;IAEaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;AAChC,SAAOC,EAAE,CACL,gKADK,EAEL;AACI,6CAAyCD,KAAK,CAACE,QADnD;AAEI,sDAAkDF,KAAK,CAACG,QAF5D;AAGI,kCAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;AAII,gCAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;AAKI,2IACI,CAACH,KAAK,CAACK,OANf;AAOI,wIACIL,KAAK,CAACK;AARd,GAFK,CAAT;AAaH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,OAAD;AACjC,MAAIA,OAAJ,EAAa;AACT,WAAO,6HAAP;AACH;;AAED,SAAO,mHAAP;AACH;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { useListbox } from './useListbox';\r\nimport { useMultiListbox } from './useMultiListbox';\r\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\r\n\r\nexport type ListboxItem = ScrollableListItem;\r\nexport type ListboxValue = ScrollableListItemValue;\r\n\r\nexport type ListboxTexts = {\r\n    /**\r\n     * Text displayed in the listbox if no data provided.\r\n     * To read more about how to provide the text, see [Provider](component:provider) component\r\n     */\r\n    empty: string;\r\n    /**\r\n     * Text displayed in the listbox to indicate the data is loading.\r\n     * Read more about how to provide the text in [Provider](component:provider) component\r\n     */\r\n    loading: string;\r\n    /**\r\n     * The first option displayed in a multiselect listbox that selects all available options.\r\n     * Read more about how to provide the text in [Provider](component:provider) component\r\n     */\r\n    allOption: string;\r\n};\r\n\r\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\r\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\r\n        /** Data indicating the options in listbox */\r\n        data?: ListboxItem[];\r\n        /**\r\n         * Initial value of the listbox.\r\n         * This is used when listbox is mounted, if no value is provided.\r\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\r\n         */\r\n        defaultValue?: ListboxValue;\r\n        /** Set what value should have an empty option in listbox */\r\n        emptyValue?: ListboxValue;\r\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\r\n        highlighted?: boolean;\r\n        /* Whether the input is in an invalid state */\r\n        invalid?: boolean;\r\n        /**\r\n         * Shows a loading indicator with a text next to it.\r\n         * Read more about how to provide the text in [Provider](component:provider) component\r\n         */\r\n        loading?: boolean;\r\n        /**\r\n         * Value of the listbox representing the selected item.\r\n         * It needs to be an existing value from the provided data\r\n         */\r\n        value?: ListboxValue;\r\n    };\r\n\r\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, ...otherProps } = props;\r\n    const { list, input } = useListbox(otherProps, ref);\r\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n    return (\r\n        <span data-taco=\"listbox\" className={className}>\r\n            <ScrollableList\r\n                {...list}\r\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\r\n            />\r\n            <input {...input} className=\"hidden\" type=\"text\" />\r\n        </span>\r\n    );\r\n});\r\n\r\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, ...otherProps } = props;\r\n    const { list, input } = useMultiListbox(otherProps, ref);\r\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n    return (\r\n        <span data-taco=\"listbox\" className={className}>\r\n            <ScrollableList\r\n                {...list}\r\n                style={{\r\n                    ...list.style,\r\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\r\n                }}\r\n            />\r\n            <input {...input} className=\"hidden\" type=\"text\" />\r\n        </span>\r\n    );\r\n});\r\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}
+{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\r\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\r\nimport './ScrollableList.css';\r\nimport { Spinner } from '../Spinner/Spinner';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { Checkbox } from '../Checkbox/Checkbox';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type ScrollableListItemValue = string | number | boolean | null;\r\n\r\nexport type ScrollableListItem = {\r\n    /**\r\n     * Set whether the item is disabled.\r\n     * This will both change the style and make the item unselectable\r\n     */\r\n    disabled?: boolean;\r\n    /* Specifies whether the item has child items -- intended for internal use only */\r\n    hasChildren?: boolean;\r\n    /** Place an icon before the item's text */\r\n    icon?: React.ReactElement;\r\n    /* The index path to the item -- intended for internal use only */\r\n    path?: string;\r\n    /** Text describing the item */\r\n    text: string | JSX.Element;\r\n    /** Value of the item */\r\n    value: ScrollableListItemValue;\r\n    /** Child items to show hierarchical data */\r\n    children?: ScrollableListItem[];\r\n};\r\n\r\n/** @internal */\r\nexport type ScrollableListProps = Omit<\r\n    React.HTMLAttributes<HTMLUListElement>,\r\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\r\n> & {\r\n    /** Data indicating the options in scrollable list */\r\n    data: ScrollableListItem[];\r\n    /** Sets the list to be disabled */\r\n    disabled?: boolean;\r\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /** Set an id for the scrollable list */\r\n    id: string;\r\n    /* Whether the input is in an invalid state */\r\n    invalid?: boolean;\r\n    /**\r\n     * Shows a loading indicator with a text next to it.\r\n     * Read more about how to provide the text in `Provider` component.\r\n     */\r\n    loading?: boolean;\r\n    /**\r\n     * Handler called when current active/selected option changes in a scrollable list.\r\n     * @param index indicates the index of the current active option\r\n     */\r\n    onChange: (index: number) => void;\r\n    /** Handler called when option is clicked */\r\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\r\n    /**\r\n     * Set whether the selected item should be scrolled into view when listbox is focused.\r\n     * Default value is `false`\r\n     */\r\n    scrollOnFocus?: boolean;\r\n    /** Handler called when a key is pressed */\r\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\r\n    /* Sets the list to read only mode */\r\n    readOnly?: boolean;\r\n    /**\r\n     * Value of the scrollable list representing the selected item.\r\n     * It needs to be an existing value from the provided data.\r\n     */\r\n    value: number | undefined;\r\n    /**\r\n     * Allows to select multiple items from the list\r\n     */\r\n    multiselect?: boolean;\r\n    /**\r\n     * Contains the currently selected values when multiselect mode is ON.\r\n     */\r\n    selectedIndexes?: number[];\r\n    /**\r\n     * True when all available (not disabled) options are selected\r\n     */\r\n    allOptionsSelected?: boolean;\r\n};\r\n\r\n/** @internal */\r\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\r\n\r\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\r\n\r\nconst getNextEnabledItem = (\r\n    event: React.KeyboardEvent<HTMLElement>,\r\n    data: ScrollableListItem[],\r\n    index: number | undefined\r\n): number | undefined => {\r\n    const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);\r\n\r\n    if (nextIndex) {\r\n        if (nextIndex === index) {\r\n            return index;\r\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\r\n            return getNextEnabledItem(event, data, nextIndex);\r\n        }\r\n    }\r\n\r\n    return nextIndex;\r\n};\r\n\r\nexport const ScrollableList = React.forwardRef(function ScrollableList(\r\n    props: ScrollableListProps,\r\n    ref: React.Ref<HTMLUListElement>\r\n) {\r\n    const {\r\n        data,\r\n        disabled,\r\n        highlighted,\r\n        id,\r\n        invalid: _,\r\n        loading,\r\n        onChange: setCurrentIndex,\r\n        onClick,\r\n        onFocus,\r\n        onKeyDown,\r\n        readOnly,\r\n        scrollOnFocus = false,\r\n        value: currentIndex,\r\n        multiselect,\r\n        selectedIndexes = [],\r\n        allOptionsSelected = false,\r\n        ...otherProps\r\n    } = props;\r\n    const listRef = useProxiedRef<HTMLUListElement>(ref);\r\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\r\n    const { texts } = useLocalization();\r\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\r\n\r\n    React.useEffect(() => {\r\n        if (currentIndex && itemRefs[currentIndex]?.current) {\r\n            itemRefs[currentIndex].current?.scrollIntoView({\r\n                block: 'center',\r\n            });\r\n        }\r\n    }, []);\r\n\r\n    React.useEffect(() => {\r\n        scrollTo(currentIndex);\r\n    }, [currentIndex]);\r\n\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\r\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\r\n\r\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\r\n            event.preventDefault();\r\n            scrollTo(nextIndex);\r\n            setCurrentIndex(nextIndex);\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            event.persist();\r\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\r\n            onKeyDown(event, index);\r\n        }\r\n    };\r\n\r\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\r\n        setCurrentIndex(index);\r\n\r\n        if (onClick) {\r\n            event.persist();\r\n            onClick(event, index);\r\n        }\r\n    };\r\n\r\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\r\n        if (scrollOnFocus) {\r\n            scrollTo(currentIndex);\r\n        }\r\n\r\n        if (onFocus) {\r\n            event.persist();\r\n            onFocus(event);\r\n        }\r\n    };\r\n\r\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\r\n        if (optionValue === '#ALL-OPTIONS#') {\r\n            return allOptionsSelected;\r\n        } else if (!optionValue || !selectedIndexes) {\r\n            return false;\r\n        } else {\r\n            return selectedIndexes.findIndex(i => i === index) !== -1;\r\n        }\r\n    };\r\n\r\n    const list: React.HTMLAttributes<HTMLUListElement> &\r\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\r\n        ...otherProps,\r\n        className: cn(\r\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\r\n            getInputClasses(props),\r\n            {\r\n                'yt-list--multiselect': multiselect,\r\n                'pointer-events-none': disabled,\r\n                'cursor-not-allowed': disabled || readOnly,\r\n            },\r\n            otherProps.className\r\n        ),\r\n        disabled,\r\n        id,\r\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\r\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\r\n        readOnly,\r\n        ref: listRef,\r\n        role: 'listbox',\r\n        tabIndex: otherProps.tabIndex || 0,\r\n    };\r\n\r\n    const options = data.map((option, index) => {\r\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\r\n\r\n        return {\r\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\r\n            'data-focused': currentIndex === index,\r\n            children: option.text,\r\n            className: cn(\r\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue',\r\n                {\r\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\r\n                }\r\n            ),\r\n            disabled: option.disabled,\r\n            icon: option.icon,\r\n            id: getId(id, option.value),\r\n            key: getId(id, option.value),\r\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\r\n            ref: itemRefs[index],\r\n            role: 'option',\r\n            style:\r\n                depth > 0\r\n                    ? {\r\n                          paddingLeft: `${depth + 1}rem`,\r\n                      }\r\n                    : undefined,\r\n        };\r\n    });\r\n\r\n    return (\r\n        <ul {...list} data-taco=\"scrollable-list\">\r\n            {loading ? (\r\n                <li className=\"yt-list__empty\">\r\n                    <span>\r\n                        <Spinner delay={0} />\r\n                    </span>\r\n                    <span>{texts.listbox.loading}</span>\r\n                </li>\r\n            ) : options.length ? (\r\n                options.map(({ children, icon, ...optionProps }) => (\r\n                    <li {...optionProps}>\r\n                        {icon}\r\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\r\n                        {multiselect && (\r\n                            <Checkbox\r\n                                checked={optionProps['aria-selected']}\r\n                                onChange={() => null}\r\n                                className=\"pointer-events-none ml-2 self-center p-px\"\r\n                            />\r\n                        )}\r\n                    </li>\r\n                ))\r\n            ) : (\r\n                <li className=\"yt-list__empty\">\r\n                    <span>{texts.listbox.empty}</span>\r\n                </li>\r\n            )}\r\n        </ul>\r\n    );\r\n});\r\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","current","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        invalid: _,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useProxiedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","current","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

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

@@ -1,40 +1,46 @@
+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';
 
-const useListbox = ({
-  data: externalData = [],
-  defaultValue,
-  disabled,
-  emptyValue,
-  id: nativeId,
-  invalid,
-  name,
-  onChange,
-  onFocus,
-  onKeyDown,
-  value = emptyValue,
-  ...otherProps
-}, ref) => {
-  const data = useFlattenedData(emptyValue !== undefined ? [{
+var _excluded = ["data", "defaultValue", "disabled", "emptyValue", "id", "invalid", "name", "onChange", "onFocus", "onKeyDown", "value"];
+var useListbox = function useListbox(_ref, ref) {
+  var _ref$data = _ref.data,
+      externalData = _ref$data === void 0 ? [] : _ref$data,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      emptyValue = _ref.emptyValue,
+      nativeId = _ref.id,
+      invalid = _ref.invalid,
+      name = _ref.name,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onKeyDown = _ref.onKeyDown,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? emptyValue : _ref$value,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var data = useFlattenedData(emptyValue !== undefined ? [{
     text: '',
     value: emptyValue
-  }, ...externalData] : externalData);
-  const id = useMemo(() => nativeId || v4(), [nativeId]);
-  const inputRef = useProxiedRef(ref);
-  const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
-  const {
-    getNextIndex
-  } = useTypeahead({
-    data,
-    currentIndex
-  });
-
-  const setInputValueByIndex = index => {
+  }].concat(externalData) : externalData);
+  var id = useMemo(function () {
+    return nativeId || v4();
+  }, [nativeId]);
+  var inputRef = 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) {
-      const option = data[index];
+      var option = data[index];
 
       if (option && !option.disabled) {
         setInputValueByRef(inputRef.current, option.value);
@@ -42,14 +48,14 @@ const useListbox = ({
     }
   };
 
-  const handleListboxChange = index => {
+  var handleListboxChange = function handleListboxChange(index) {
     setInputValueByIndex(index);
   };
 
-  useEffect(() => {
+  useEffect(function () {
     if (data.length && currentIndex === undefined) {
       if (defaultValue !== undefined) {
-        const defaultValueIndex = getIndexFromValue(data, defaultValue);
+        var defaultValueIndex = getIndexFromValue(data, defaultValue);
 
         if (defaultValueIndex !== undefined) {
           setInputValueByIndex(defaultValueIndex);
@@ -60,11 +66,11 @@ const useListbox = ({
     }
   }, [data]);
 
-  const handleListboxKeyDown = event => {
-    const charKey = String.fromCharCode(event.keyCode);
+  var handleListboxKeyDown = function handleListboxKeyDown(event) {
+    var charKey = String.fromCharCode(event.keyCode);
 
     if (charKey.match(/(\w)/g)) {
-      const nextIndex = getNextIndex(charKey);
+      var nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setInputValueByIndex(nextIndex);
@@ -79,7 +85,7 @@ const useListbox = ({
     }
   };
 
-  const handleListboxFocus = event => {
+  var handleListboxFocus = function handleListboxFocus(event) {
     if (currentIndex === undefined && data.length) {
       setInputValueByIndex(0);
     }
@@ -90,24 +96,26 @@ const useListbox = ({
     }
   };
 
-  const handleInputChange = event => {
+  var handleInputChange = function handleInputChange(event) {
     event.persist();
 
     if (onChange) {
       var _item$path$split, _item$path;
 
-      const item = findByValue(data, event.target.value);
+      var item = findByValue(data, event.target.value);
       event.detail = sanitizeItem(item);
-      const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
+      var indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
 
       if (indexes.length > 1) {
         // we don't want to map the current item
         indexes.pop(); // we need to rebuild the path as we map
 
-        let lastPath;
-        event.detail.parents = indexes.map(i => {
+        var lastPath;
+        event.detail.parents = indexes.map(function (i) {
           lastPath = lastPath ? [lastPath, i].join('.') : i;
-          return sanitizeItem(data.find(i => i.path === lastPath));
+          return sanitizeItem(data.find(function (i) {
+            return i.path === lastPath;
+          }));
         });
       }
 
@@ -115,29 +123,30 @@ const useListbox = ({
     }
   };
 
-  const list = { ...otherProps,
+  var list = _extends({}, otherProps, {
     'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
-    data,
-    disabled,
-    id,
-    invalid,
+    data: data,
+    disabled: disabled,
+    id: id,
+    invalid: invalid,
     onChange: handleListboxChange,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,
     scrollOnFocus: true,
     tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
     value: currentIndex
-  };
-  const input = {
-    name,
+  });
+
+  var input = {
+    name: name,
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
     value: value !== null && value !== void 0 ? value : ''
   };
   return {
-    list,
-    input
+    list: list,
+    input: input
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"useListbox.js","sources":["../../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { ListboxProps } from './Listbox';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\r\nimport { ScrollableListProps } 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 useListbox = (\r\n    {\r\n        data: externalData = [],\r\n        defaultValue,\r\n        disabled,\r\n        emptyValue,\r\n        id: nativeId,\r\n        invalid,\r\n        name,\r\n        onChange,\r\n        onFocus,\r\n        onKeyDown,\r\n        value = emptyValue,\r\n        ...otherProps\r\n    }: ListboxProps,\r\n    ref: React.Ref<HTMLInputElement>\r\n): useListbox => {\r\n    const data = useFlattenedData(emptyValue !== undefined ? [{ text: '', value: emptyValue }, ...externalData] : externalData);\r\n    const id = React.useMemo(() => nativeId || uuid(), [nativeId]);\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;\r\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\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                setInputValueByRef(inputRef.current, option.value);\r\n            }\r\n        }\r\n    };\r\n\r\n    const handleListboxChange = (index: number): void => {\r\n        setInputValueByIndex(index);\r\n    };\r\n\r\n    React.useEffect(() => {\r\n        if (data.length && currentIndex === undefined) {\r\n            if (defaultValue !== undefined) {\r\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\r\n\r\n                if (defaultValueIndex !== undefined) {\r\n                    setInputValueByIndex(defaultValueIndex);\r\n                }\r\n            } else {\r\n                setInputValueByIndex(0);\r\n            }\r\n        }\r\n    }, [data]);\r\n\r\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): 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                setInputValueByIndex(nextIndex);\r\n            }\r\n            return;\r\n        }\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 (currentIndex === undefined && data.length) {\r\n            setInputValueByIndex(0);\r\n        }\r\n\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        if (onChange) {\r\n            const item = findByValue(data, event.target.value);\r\n            (event as any).detail = sanitizeItem(item);\r\n\r\n            const indexes = item?.path?.split('.') ?? [];\r\n\r\n            if (indexes.length > 1) {\r\n                // we don't want to map the current item\r\n                indexes.pop();\r\n                // we need to rebuild the path as we map\r\n                let lastPath: string;\r\n\r\n                (event as any).detail.parents = indexes.map(i => {\r\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\r\n                    return sanitizeItem(data.find(i => i.path === lastPath));\r\n                });\r\n            }\r\n\r\n            onChange(event);\r\n        }\r\n    };\r\n\r\n    const list: ScrollableListProps = {\r\n        ...otherProps,\r\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\r\n        data,\r\n        disabled,\r\n        id,\r\n        invalid,\r\n        onChange: handleListboxChange,\r\n        onFocus: handleListboxFocus,\r\n        onKeyDown: handleListboxKeyDown,\r\n        scrollOnFocus: true,\r\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\r\n        value: currentIndex,\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":["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","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 = 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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"}