@economic/taco 1.1.5-alpha.102 → 1.1.5-alpha.127

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

@@ -1,25 +1,25 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useEffect, createElement, cloneElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 import { getInputClasses, getButtonStateClasses } from './util.js';
 
-var _excluded = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoFocus"];
-var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
-  var button = props.button,
-      icon = props.icon,
-      invalid = props.invalid,
-      onKeyDown = props.onKeyDown,
-      autoFocus = props.autoFocus,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var inputRef = useProxiedRef(ref);
-  var hasContainer = button || icon;
-  var className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
+const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
+  const {
+    button,
+    icon,
+    highlighted,
+    invalid,
+    onKeyDown,
+    autoFocus,
+    ...otherProps
+  } = props;
+  const inputRef = useProxiedRef(ref);
+  const hasContainer = button || icon;
+  const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
     'pr-8': !!hasContainer
   }, !hasContainer && otherProps.className);
-  useEffect(function () {
+  useEffect(() => {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
@@ -27,10 +27,10 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
   // if it has scroll height then the browser reverts to native scrolling behaviour only
   // so we manually override it to ensure _our_ desired behaviour remains intact
 
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
       event.preventDefault();
-      var position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
       event.currentTarget.setSelectionRange(position, position);
     }
 
@@ -39,7 +39,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
     }
   };
 
-  var input = createElement("input", Object.assign({}, otherProps, {
+  const input = createElement("input", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
@@ -47,19 +47,19 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
   }));
 
   if (hasContainer) {
-    var extra;
+    let extra;
 
     if (button) {
-      var _cn;
-
-      var disabled = button.props.disabled || otherProps.disabled;
-      var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(invalid)] = !props.disabled, _cn), button.props.className);
+      const disabled = button.props.disabled || otherProps.disabled;
+      const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
+        [getButtonStateClasses(invalid)]: !props.disabled
+      }, button.props.className);
       extra = cloneElement(button, {
         className: buttonClassName,
-        disabled: disabled
+        disabled
       });
     } else if (icon) {
-      var iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
+      const iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
         'text-grey-dark': props.disabled,
         'text-grey-darkest': !props.disabled
       });
@@ -71,7 +71,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
       });
     }
 
-    var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
+    const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
     return createElement("div", {
       className: containerClassName,
       "data-taco": "input-container"

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n    /** Draws attention to the input 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\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const hasContainer = button || icon;\n    const className = cn(\n        getInputClasses(props),\n        'min-h-[theme(spacing.8)] pointer-events-all',\n        {\n            'pr-8': !!hasContainer,\n        },\n        !hasContainer && otherProps.className\n    );\n\n    React.useEffect(() => {\n        if (autoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, []);\n\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\n\n    if (hasContainer) {\n        let extra: any;\n\n        if (button) {\n            const disabled = button.props.disabled || otherProps.disabled;\n            const buttonClassName = cn(\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\n                {\n                    [getButtonStateClasses(invalid)]: !props.disabled,\n                },\n                button.props.className\n            );\n            extra = React.cloneElement(button, {\n                className: buttonClassName,\n                disabled,\n            });\n        } else if (icon) {\n            const iconClassName = cn(\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\n                {\n                    'text-grey-dark': props.disabled,\n                    'text-grey-darkest': !props.disabled,\n                }\n            );\n            extra =\n                typeof icon === 'string' ? (\n                    <Icon className={iconClassName} name={icon} />\n                ) : (\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\n                );\n        }\n\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\n\n        return (\n            <div className={containerClassName} data-taco=\"input-container\">\n                {input}\n                {extra}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["Input","React","props","ref","button","icon","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n    /** Draws attention to the input 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\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const hasContainer = button || icon;\n    const className = cn(\n        getInputClasses(props),\n        'min-h-[theme(spacing.8)] pointer-events-all',\n        {\n            'pr-8': !!hasContainer,\n        },\n        !hasContainer && otherProps.className\n    );\n\n    React.useEffect(() => {\n        if (autoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, []);\n\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\n\n    if (hasContainer) {\n        let extra: any;\n\n        if (button) {\n            const disabled = button.props.disabled || otherProps.disabled;\n            const buttonClassName = cn(\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\n                {\n                    [getButtonStateClasses(invalid)]: !props.disabled,\n                },\n                button.props.className\n            );\n            extra = React.cloneElement(button, {\n                className: buttonClassName,\n                disabled,\n            });\n        } else if (icon) {\n            const iconClassName = cn(\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\n                {\n                    'text-grey-dark': props.disabled,\n                    'text-grey-darkest': !props.disabled,\n                }\n            );\n            extra =\n                typeof icon === 'string' ? (\n                    <Icon className={iconClassName} name={icon} />\n                ) : (\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\n                );\n        }\n\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\n\n        return (\n            <div className={containerClassName} data-taco=\"input-container\">\n                {input}\n                {extra}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["Input","React","props","ref","button","icon","highlighted","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":";;;;;;MAiBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,MAAM;IAAEC,MAAF;IAAUC,IAAV;IAAgBC,WAAhB;IAA6BC,OAA7B;IAAsCC,SAAtC;IAAiDC,SAAjD;IAA4D,GAAGC;MAAeR,KAApF;EACA,MAAMS,QAAQ,GAAGC,aAAa,CAAmBT,GAAnB,CAA9B;EACA,MAAMU,YAAY,GAAGT,MAAM,IAAIC,IAA/B;EACA,MAAMS,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAACd,KAAD,CADC,EAEhB,6CAFgB,EAGhB;IACI,QAAQ,CAAC,CAACW;GAJE,EAMhB,CAACA,YAAD,IAAiBH,UAAU,CAACI,SANZ,CAApB;EASAb,SAAA,CAAgB;IACZ,IAAIQ,SAAS,IAAIE,QAAQ,CAACM,OAA1B,EAAmC;MAC/BN,QAAQ,CAACM,OAAT,CAAiBC,KAAjB;;GAFR,EAIG,EAJH;;;;EASA,MAAMC,aAAa,GAAIC,KAAD;IAClB,IAAI,CAACA,KAAK,CAACC,QAAP,KAAoBD,KAAK,CAACE,GAAN,KAAc,MAAd,IAAwBF,KAAK,CAACE,GAAN,KAAc,KAA1D,CAAJ,EAAsE;MAClEF,KAAK,CAACG,cAAN;MACA,MAAMC,QAAQ,GAAGJ,KAAK,CAACE,GAAN,KAAc,KAAd,GAAsBF,KAAK,CAACK,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;MACAP,KAAK,CAACK,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;;;IAGJ,IAAIhB,SAAJ,EAAe;MACXA,SAAS,CAACY,KAAD,CAAT;;GARR;;EAYA,MAAMS,KAAK,GAAG5B,aAAA,QAAA,oBAAWS;IAAYI,SAAS,EAAEA;iBAAqB;IAAQN,SAAS,EAAEW;IAAehB,GAAG,EAAEQ;IAA9F,CAAd;;EAEA,IAAIE,YAAJ,EAAkB;IACd,IAAIiB,KAAJ;;IAEA,IAAI1B,MAAJ,EAAY;MACR,MAAM2B,QAAQ,GAAG3B,MAAM,CAACF,KAAP,CAAa6B,QAAb,IAAyBrB,UAAU,CAACqB,QAArD;MACA,MAAMC,eAAe,GAAGjB,EAAE,CACtB,2HADsB,EAEtB;QACI,CAACkB,qBAAqB,CAAC1B,OAAD,CAAtB,GAAkC,CAACL,KAAK,CAAC6B;OAHvB,EAKtB3B,MAAM,CAACF,KAAP,CAAaY,SALS,CAA1B;MAOAgB,KAAK,GAAG7B,YAAA,CAAmBG,MAAnB,EAA2B;QAC/BU,SAAS,EAAEkB,eADoB;QAE/BD;OAFI,CAAR;KATJ,MAaO,IAAI1B,IAAJ,EAAU;MACb,MAAM6B,aAAa,GAAGnB,EAAE,CACpB,8GADoB,EAEpB;QACI,kBAAkBb,KAAK,CAAC6B,QAD5B;QAEI,qBAAqB,CAAC7B,KAAK,CAAC6B;OAJZ,CAAxB;MAOAD,KAAK,GACD,OAAOzB,IAAP,KAAgB,QAAhB,GACIJ,aAAA,CAACkC,IAAD;QAAMrB,SAAS,EAAEoB;QAAeE,IAAI,EAAE/B;OAAtC,CADJ,GAGIJ,YAAA,CAAmBI,IAAnB,EAAyB;QAAES,SAAS,EAAEC,EAAE,CAACmB,aAAD,EAAgB7B,IAAI,CAACH,KAAL,CAAWY,SAA3B;OAAxC,CAJR;;;IAQJ,MAAMuB,kBAAkB,GAAGtB,EAAE,CAAC,8CAAD,EAAiDL,UAAU,CAACI,SAA5D,CAA7B;IAEA,OACIb,aAAA,MAAA;MAAKa,SAAS,EAAEuB;mBAA8B;KAA9C,EACKR,KADL,EAEKC,KAFL,CADJ;;;EAQJ,OAAOD,KAAP;AACH,CA/EoB;;;;"}

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

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

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

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

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

@@ -5,13 +5,13 @@ import { useLocalization } from '../Provider/Provider.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 import { getInputClasses } from '../Input/util.js';
-import { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation.js';
+import { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation.js';
 import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
 
 const getId = (id, value) => `${id}_${value}`;
 
 const getNextEnabledItem = (event, data, index) => {
-  const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
+  const nextIndex = getNextIndexFromKey(event.key, data.length, index);
 
   if (nextIndex) {
     if (nextIndex === index) {

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

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

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

@@ -61,9 +61,10 @@ const useListbox = ({
   }, [data]);
 
   const handleListboxKeyDown = event => {
-    const charKey = String.fromCharCode(event.keyCode);
+    const charKey = event.key; // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
+    // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
 
-    if (charKey.match(/(\w)/g)) {
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
       const nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {

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

@@ -1 +1 @@
-{"version":3,"file":"useListbox.js","sources":["../../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { ListboxProps } from './Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\nimport { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        invalid,\n        name,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value = emptyValue,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const data = useFlattenedData(emptyValue !== undefined ? [{ text: '', value: emptyValue }, ...externalData] : externalData);\n    const id = React.useMemo(() => nativeId || uuid(), [nativeId]);\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value);\n            }\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setInputValueByIndex(index);\n    };\n\n    React.useEffect(() => {\n        if (data.length && currentIndex === undefined) {\n            if (defaultValue !== undefined) {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\n            } else {\n                setInputValueByIndex(0);\n            }\n        }\n    }, [data]);\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        const charKey = String.fromCharCode(event.keyCode);\n\n        if (charKey.match(/(\\w)/g)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setInputValueByIndex(nextIndex);\n            }\n            return;\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (currentIndex === undefined && data.length) {\n            setInputValueByIndex(0);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(data, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(data.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const list: ScrollableListProps = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        data,\n        disabled,\n        id,\n        invalid,\n        onChange: handleListboxChange,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: true,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useListbox","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 = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setInputValueByIndex(nextIndex);\n            }\n            return;\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (currentIndex === undefined && data.length) {\n            setInputValueByIndex(0);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(data, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(data.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const list: ScrollableListProps = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        data,\n        disabled,\n        id,\n        invalid,\n        onChange: handleListboxChange,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: true,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useListbox","data","externalData","defaultValue","disabled","emptyValue","id","nativeId","invalid","name","onChange","onFocus","onKeyDown","value","otherProps","ref","useFlattenedData","undefined","text","React","uuid","inputRef","useProxiedRef","currentIndex","getIndexFromValue","getNextIndex","useTypeahead","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","item","findByValue","target","detail","sanitizeItem","indexes","path","split","pop","lastPath","parents","map","i","join","find","list","getActiveDescendant","scrollOnFocus","tabIndex","input"],"mappings":"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"}

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

@@ -2,7 +2,6 @@ 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';
 
@@ -101,9 +100,10 @@ const useMultiListbox = ({
   };
 
   const handleListboxKeyDown = (event, index) => {
-    const charKey = String.fromCharCode(event.keyCode);
+    const charKey = event.key; // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
+    // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
 
-    if (charKey.match(/(\w)/g)) {
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
       const nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {
@@ -113,22 +113,22 @@ const useMultiListbox = ({
       return;
     }
 
-    switch (event.keyCode) {
-      case keycode('space'):
+    switch (event.key) {
+      case ' ':
         {
           event.preventDefault();
           setInputValueByIndex(index);
           break;
         }
 
-      case keycode('enter'):
+      case 'Enter':
         {
           setInputValueByIndex(index);
           break;
         }
     }
 
-    setCurrentIndex(index);
+    setCurrentIndex(index !== undefined ? index : 0);
 
     if (onKeyDown) {
       event.persist();

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

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

package/dist/esm/components/Menu/Menu.js

@@ -1,4 +1,3 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useMemo, createElement } from 'react';
 import { MenuContext } from './Context.js';
 import { Root } from '@radix-ui/react-dropdown-menu';
@@ -11,39 +10,22 @@ import { RadioGroup } from './components/RadioGroup.js';
 import { Separator } from './components/Separator.js';
 import { Header } from './components/Header.js';
 
-var _excluded = ["children", "trigger"];
-var Menu = function Menu(externalProps) {
-  var children = externalProps.children,
-      trigger = externalProps.trigger,
-      props = _objectWithoutPropertiesLoose(externalProps, _excluded);
-
-  var _React$useState = useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
-
-  var _React$useState2 = useState(false),
-      indented = _React$useState2[0],
-      setIndented = _React$useState2[1];
-
-  var _React$useState3 = useState(undefined),
-      minWidth = _React$useState3[0],
-      _setMinWidth = _React$useState3[1];
-
-  var context = useMemo(function () {
-    return {
-      indented: indented,
-      registerIndentation: function registerIndentation() {
-        return setIndented(true);
-      },
-      minWidth: minWidth,
-      setMinWidth: function setMinWidth(width) {
-        return _setMinWidth(width);
-      },
-      close: function close() {
-        return setOpen(false);
-      }
-    };
-  }, [indented, minWidth]);
+const Menu = externalProps => {
+  const {
+    children,
+    trigger,
+    ...props
+  } = externalProps;
+  const [open, setOpen] = useState(false);
+  const [indented, setIndented] = useState(false);
+  const [minWidth, setMinWidth] = useState(undefined);
+  const context = useMemo(() => ({
+    indented,
+    registerIndentation: () => setIndented(true),
+    minWidth,
+    setMinWidth: width => setMinWidth(width),
+    close: () => setOpen(false)
+  }), [indented, minWidth]);
   return createElement(MenuContext.Provider, {
     value: context
   }, createElement(Root, Object.assign({}, props, {

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { MenuContext } from './Context';\nimport { Content } from './components/Content';\nimport { Item } from './components/Item';\nimport { Link } from './components/Link';\nimport { Trigger } from './components/Trigger';\nimport { Checkbox } from './components/Checkbox';\nimport { RadioGroup } from './components/RadioGroup';\nimport { Separator } from './components/Separator';\nimport { Header } from './components/Header';\n\nexport type MenuProps = {\n    children: React.ReactNode;\n    id?: string;\n    /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nexport const Menu = (externalProps: MenuProps): JSX.Element => {\n    const { children, trigger, ...props } = externalProps;\n    const [open, setOpen] = React.useState(false);\n    const [indented, setIndented] = React.useState(false);\n    const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\n\n    const context = React.useMemo(\n        () => ({\n            indented,\n            registerIndentation: () => setIndented(true),\n            minWidth,\n            setMinWidth: (width: number) => setMinWidth(width),\n            close: () => setOpen(false),\n        }),\n        [indented, minWidth]\n    );\n\n    return (\n        <MenuContext.Provider value={context}>\n            <DropdownMenuPrimitive.Root {...props} modal={false} open={open} onOpenChange={setOpen}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DropdownMenuPrimitive.Root>\n        </MenuContext.Provider>\n    );\n};\nMenu.Trigger = Trigger;\nMenu.Content = Content;\nMenu.Item = Item;\nMenu.Link = Link;\nMenu.Checkbox = Checkbox;\nMenu.Separator = Separator;\nMenu.Header = Header;\nMenu.RadioGroup = RadioGroup;\n"],"names":["Menu","externalProps","children","trigger","props","React","open","setOpen","indented","setIndented","undefined","minWidth","setMinWidth","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;;;IAmBaA,IAAI,GAAG,SAAPA,IAAO,CAACC,aAAD;EAChB,IAAQC,QAAR,GAAwCD,aAAxC,CAAQC,QAAR;MAAkBC,OAAlB,GAAwCF,aAAxC,CAAkBE,OAAlB;MAA8BC,KAA9B,iCAAwCH,aAAxC;;EACA,sBAAwBI,QAAA,CAAe,KAAf,CAAxB;MAAOC,IAAP;MAAaC,OAAb;;EACA,uBAAgCF,QAAA,CAAe,KAAf,CAAhC;MAAOG,QAAP;MAAiBC,WAAjB;;EACA,uBAAgCJ,QAAA,CAAmCK,SAAnC,CAAhC;MAAOC,QAAP;MAAiBC,YAAjB;;EAEA,IAAMC,OAAO,GAAGR,OAAA,CACZ;IAAA,OAAO;MACHG,QAAQ,EAARA,QADG;MAEHM,mBAAmB,EAAE;QAAA,OAAML,WAAW,CAAC,IAAD,CAAjB;OAFlB;MAGHE,QAAQ,EAARA,QAHG;MAIHC,WAAW,EAAE,qBAACG,KAAD;QAAA,OAAmBH,YAAW,CAACG,KAAD,CAA9B;OAJV;MAKHC,KAAK,EAAE;QAAA,OAAMT,OAAO,CAAC,KAAD,CAAb;;KALX;GADY,EAQZ,CAACC,QAAD,EAAWG,QAAX,CARY,CAAhB;EAWA,OACIN,aAAA,CAACY,WAAW,CAACC,QAAb;IAAsBC,KAAK,EAAEN;GAA7B,EACIR,aAAA,CAACe,IAAD,oBAAgChB;IAAOiB,KAAK,EAAE;IAAOf,IAAI,EAAEA;IAAMgB,YAAY,EAAEf;IAA/E,EACKJ,OAAO,IAAIE,aAAA,CAACkB,OAAD,MAAA,EAAUpB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDF,IAAI,CAACuB,OAAL,GAAeA,OAAf;AACAvB,IAAI,CAACwB,OAAL,GAAeA,OAAf;AACAxB,IAAI,CAACyB,IAAL,GAAYA,IAAZ;AACAzB,IAAI,CAAC0B,IAAL,GAAYA,IAAZ;AACA1B,IAAI,CAAC2B,QAAL,GAAgBA,QAAhB;AACA3B,IAAI,CAAC4B,SAAL,GAAiBA,SAAjB;AACA5B,IAAI,CAAC6B,MAAL,GAAcA,MAAd;AACA7B,IAAI,CAAC8B,UAAL,GAAkBA,UAAlB;;;;"}
+{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { MenuContext } from './Context';\nimport { Content } from './components/Content';\nimport { Item } from './components/Item';\nimport { Link } from './components/Link';\nimport { Trigger } from './components/Trigger';\nimport { Checkbox } from './components/Checkbox';\nimport { RadioGroup } from './components/RadioGroup';\nimport { Separator } from './components/Separator';\nimport { Header } from './components/Header';\n\nexport type MenuProps = {\n    children: React.ReactNode;\n    id?: string;\n    /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nexport const Menu = (externalProps: MenuProps): JSX.Element => {\n    const { children, trigger, ...props } = externalProps;\n    const [open, setOpen] = React.useState(false);\n    const [indented, setIndented] = React.useState(false);\n    const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\n\n    const context = React.useMemo(\n        () => ({\n            indented,\n            registerIndentation: () => setIndented(true),\n            minWidth,\n            setMinWidth: (width: number) => setMinWidth(width),\n            close: () => setOpen(false),\n        }),\n        [indented, minWidth]\n    );\n\n    return (\n        <MenuContext.Provider value={context}>\n            <DropdownMenuPrimitive.Root {...props} modal={false} open={open} onOpenChange={setOpen}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DropdownMenuPrimitive.Root>\n        </MenuContext.Provider>\n    );\n};\nMenu.Trigger = Trigger;\nMenu.Content = Content;\nMenu.Item = Item;\nMenu.Link = Link;\nMenu.Checkbox = Checkbox;\nMenu.Separator = Separator;\nMenu.Header = Header;\nMenu.RadioGroup = RadioGroup;\n"],"names":["Menu","externalProps","children","trigger","props","open","setOpen","React","indented","setIndented","minWidth","setMinWidth","undefined","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;MAmBaA,IAAI,GAAIC,aAAD;EAChB,MAAM;IAAEC,QAAF;IAAYC,OAAZ;IAAqB,GAAGC;MAAUH,aAAxC;EACA,MAAM,CAACI,IAAD,EAAOC,OAAP,IAAkBC,QAAA,CAAe,KAAf,CAAxB;EACA,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0BF,QAAA,CAAe,KAAf,CAAhC;EACA,MAAM,CAACG,QAAD,EAAWC,WAAX,IAA0BJ,QAAA,CAAmCK,SAAnC,CAAhC;EAEA,MAAMC,OAAO,GAAGN,OAAA,CACZ,OAAO;IACHC,QADG;IAEHM,mBAAmB,EAAE,MAAML,WAAW,CAAC,IAAD,CAFnC;IAGHC,QAHG;IAIHC,WAAW,EAAGI,KAAD,IAAmBJ,WAAW,CAACI,KAAD,CAJxC;IAKHC,KAAK,EAAE,MAAMV,OAAO,CAAC,KAAD;GALxB,CADY,EAQZ,CAACE,QAAD,EAAWE,QAAX,CARY,CAAhB;EAWA,OACIH,aAAA,CAACU,WAAW,CAACC,QAAb;IAAsBC,KAAK,EAAEN;GAA7B,EACIN,aAAA,CAACa,IAAD,oBAAgChB;IAAOiB,KAAK,EAAE;IAAOhB,IAAI,EAAEA;IAAMiB,YAAY,EAAEhB;IAA/E,EACKH,OAAO,IAAII,aAAA,CAACgB,OAAD,MAAA,EAAUpB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDF,IAAI,CAACuB,OAAL,GAAeA,OAAf;AACAvB,IAAI,CAACwB,OAAL,GAAeA,OAAf;AACAxB,IAAI,CAACyB,IAAL,GAAYA,IAAZ;AACAzB,IAAI,CAAC0B,IAAL,GAAYA,IAAZ;AACA1B,IAAI,CAAC2B,QAAL,GAAgBA,QAAhB;AACA3B,IAAI,CAAC4B,SAAL,GAAiBA,SAAjB;AACA5B,IAAI,CAAC6B,MAAL,GAAcA,MAAd;AACA7B,IAAI,CAAC8B,UAAL,GAAkBA,UAAlB;;;;"}