@economic/taco 1.12.3 → 1.13.0

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

@@ -1,85 +0,0 @@
-import { forwardRef, useEffect, createElement, cloneElement } from 'react';
-import cn from 'classnames';
-import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
-import { Icon } from '../Icon/Icon.js';
-import { getInputClasses, getButtonStateClasses } from './util.js';
-
-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(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []); // home and end keys only navigate to the start/end of input value if the input container does not scroll
-  // 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
-
-  const handleKeyDown = event => {
-    if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
-      event.preventDefault();
-      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
-      event.currentTarget.setSelectionRange(position, position);
-    }
-
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-
-  const input = /*#__PURE__*/createElement("input", Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "input",
-    onKeyDown: handleKeyDown,
-    ref: inputRef
-  }));
-
-  if (hasContainer) {
-    let extra;
-
-    if (button) {
-      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 = /*#__PURE__*/cloneElement(button, {
-        className: buttonClassName,
-        disabled
-      });
-    } else if (icon) {
-      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
-      });
-      extra = typeof icon === 'string' ? /*#__PURE__*/createElement(Icon, {
-        className: iconClassName,
-        name: icon
-      }) : /*#__PURE__*/cloneElement(icon, {
-        className: cn(iconClassName, icon.props.className)
-      });
-    }
-
-    const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
-    return /*#__PURE__*/createElement("div", {
-      className: containerClassName,
-      "data-taco": "input-container"
-    }, input, extra);
-  }
-
-  return input;
-});
-
-export { Input };
-//# sourceMappingURL=Input.js.map

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

@@ -1 +0,0 @@
-{"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,gBAAG5B,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,gBAAG7B,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,gBACIJ,aAAA,CAACkC,IAAD;QAAMrB,SAAS,EAAEoB;QAAeE,IAAI,EAAE/B;OAAtC,CADJ,gBAGIJ,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,oBACIb,aAAA,MAAA;MAAKa,SAAS,EAAEuB;mBAA8B;KAA9C,EACKR,KADL,EAEKC,KAFL,CADJ;;;EAQJ,OAAOD,KAAP;AACH,CA/EoB;;;;"}

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

@@ -1,22 +0,0 @@
-import cn from 'classnames';
-
-const getInputClasses = props => {
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center', {
-    'cursor-not-allowed text-black bg-grey': props.readOnly,
-    'border-grey text-opacity-25 cursor-not-allowed': props.disabled,
-    'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,
-    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,
-    'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark': !props.invalid,
-    'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark': props.invalid
-  });
-};
-const getButtonStateClasses = invalid => {
-  if (invalid) {
-    return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
-  }
-
-  return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
-};
-
-export { getButtonStateClasses, getInputClasses };
-//# sourceMappingURL=util.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\n\nexport const getInputClasses = props => {\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n            'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark':\n                !props.invalid,\n            'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark':\n                props.invalid,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n    }\n\n    return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","highlighted","invalid","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,OAAOC,EAAE,CACL,gKADK,EAEL;IACI,yCAAyCD,KAAK,CAACE,QADnD;IAEI,kDAAkDF,KAAK,CAACG,QAF5D;IAGI,8BAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;IAII,4BAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;IAKI,uIACI,CAACH,KAAK,CAACK,OANf;IAOI,oIACIL,KAAK,CAACK;GAVT,CAAT;AAaH;MAEYC,qBAAqB,GAAID,OAAD;EACjC,IAAIA,OAAJ,EAAa;IACT,OAAO,6HAAP;;;EAGJ,OAAO,mHAAP;AACH;;;;"}

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

@@ -1,57 +0,0 @@
-import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
-import { ScrollableList } from './ScrollableList.js';
-import { useListbox } from './useListbox.js';
-import { useMultiListbox } from './useMultiListbox.js';
-
-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 /*#__PURE__*/createElement("span", {
-    "data-taco": "listbox",
-    className: className
-  }, /*#__PURE__*/createElement(ScrollableList, Object.assign({}, list, {
-    style: { ...list.style,
-      maxHeight: 'calc(12rem + 2px)'
-      /* (6 * option height) + listbox border */
-
-    }
-  })), /*#__PURE__*/createElement("input", Object.assign({}, input, {
-    className: "hidden",
-    type: "text"
-  })));
-});
-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 /*#__PURE__*/createElement("span", {
-    "data-taco": "listbox",
-    className: className
-  }, /*#__PURE__*/createElement(ScrollableList, Object.assign({}, list, {
-    style: { ...list.style,
-      maxHeight: 'calc(12rem + 2px + 2px)'
-      /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
-
-    }
-  })), /*#__PURE__*/createElement("input", Object.assign({}, input, {
-    className: "hidden",
-    type: "text"
-  })));
-});
-
-export { Listbox, MultiListbox };
-//# sourceMappingURL=Listbox.js.map

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

@@ -1 +0,0 @@
-{"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,oBACIJ,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,oBACIJ,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

@@ -1,174 +0,0 @@
-import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react';
-import cn from 'classnames';
-import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
-import { Spinner } from '../Spinner/Spinner.js';
-import { useLocalization } from '../Provider/Provider.js';
-import { Checkbox } from '../Checkbox/Checkbox.js';
-import { getInputClasses } from '../Input/util.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 = getNextIndexFromKey(event.key, data.length, index);
-
-  if (nextIndex) {
-    if (nextIndex === index) {
-      return index;
-    } else if (data[nextIndex] && data[nextIndex].disabled) {
-      return getNextEnabledItem(event, data, nextIndex);
-    }
-  }
-
-  return nextIndex;
-};
-
-const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref) {
-  const {
-    data,
-    disabled,
-    highlighted,
-    id,
-    invalid: _,
-    loading,
-    onChange: setCurrentIndex,
-    onClick,
-    onFocus,
-    onKeyDown,
-    readOnly,
-    scrollOnFocus = false,
-    value: currentIndex,
-    multiselect,
-    selectedIndexes = [],
-    allOptionsSelected = false,
-    ...otherProps
-  } = props;
-  const listRef = useProxiedRef(ref);
-  const itemRefs = useMemo(() => data.map(() => /*#__PURE__*/createRef()), [data]);
-  const {
-    texts
-  } = useLocalization();
-  const {
-    scrollTo
-  } = useListScrollTo(listRef, itemRefs);
-  useEffect(() => {
-    var _itemRefs$currentInde;
-
-    if (currentIndex && (_itemRefs$currentInde = itemRefs[currentIndex]) !== null && _itemRefs$currentInde !== void 0 && _itemRefs$currentInde.current) {
-      var _itemRefs$currentInde2;
-
-      (_itemRefs$currentInde2 = itemRefs[currentIndex].current) === null || _itemRefs$currentInde2 === void 0 ? void 0 : _itemRefs$currentInde2.scrollIntoView({
-        block: 'center'
-      });
-    }
-  }, []);
-  useEffect(() => {
-    scrollTo(currentIndex);
-  }, [currentIndex]);
-
-  const handleKeyDown = event => {
-    const nextIndex = getNextEnabledItem(event, data, currentIndex);
-
-    if (nextIndex !== undefined && nextIndex !== currentIndex) {
-      event.preventDefault();
-      scrollTo(nextIndex);
-      setCurrentIndex(nextIndex);
-    }
-
-    if (onKeyDown) {
-      event.persist();
-      const index = nextIndex !== undefined ? nextIndex : currentIndex;
-      onKeyDown(event, index);
-    }
-  };
-
-  const handleClick = index => event => {
-    setCurrentIndex(index);
-
-    if (onClick) {
-      event.persist();
-      onClick(event, index);
-    }
-  };
-
-  const handleFocus = event => {
-    if (scrollOnFocus) {
-      scrollTo(currentIndex);
-    }
-
-    if (onFocus) {
-      event.persist();
-      onFocus(event);
-    }
-  };
-
-  const getOptionCheckedState = (optionValue, index) => {
-    if (optionValue === '#ALL-OPTIONS#') {
-      return allOptionsSelected;
-    } else if (!optionValue || !selectedIndexes) {
-      return false;
-    } else {
-      return selectedIndexes.findIndex(i => i === index) !== -1;
-    }
-  };
-
-  const list = { ...otherProps,
-    className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
-      'yt-list--multiselect': multiselect,
-      'pointer-events-none': disabled,
-      'cursor-not-allowed': disabled || readOnly
-    }, otherProps.className),
-    disabled,
-    id,
-    onFocus: !disabled && !readOnly ? handleFocus : undefined,
-    onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,
-    readOnly,
-    ref: listRef,
-    role: 'listbox',
-    tabIndex: otherProps.tabIndex || 0
-  };
-  const options = data.map((option, index) => {
-    const depth = option.path ? option.path.split('.').length - 1 : 0;
-    return {
-      'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
-      'data-focused': currentIndex === index,
-      children: option.text,
-      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue', {
-        'sticky top-0 font-bold': depth === 0 && !!option.hasChildren
-      }),
-      disabled: option.disabled,
-      icon: option.icon,
-      id: getId(id, option.value),
-      key: getId(id, option.value),
-      onClick: !disabled && !readOnly ? handleClick(index) : undefined,
-      ref: itemRefs[index],
-      role: 'option',
-      style: depth > 0 ? {
-        paddingLeft: `${depth + 1}rem`
-      } : undefined
-    };
-  });
-  return /*#__PURE__*/createElement("ul", Object.assign({}, list, {
-    "data-taco": "scrollable-list"
-  }), loading ? /*#__PURE__*/createElement("li", {
-    className: "yt-list__empty"
-  }, /*#__PURE__*/createElement("span", null, /*#__PURE__*/createElement(Spinner, {
-    delay: 0
-  })), /*#__PURE__*/createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({
-    children,
-    icon,
-    ...optionProps
-  }) => /*#__PURE__*/createElement("li", Object.assign({}, optionProps), icon, /*#__PURE__*/createElement("span", {
-    className: "flex-grow truncate text-left"
-  }, children), multiselect && /*#__PURE__*/createElement(Checkbox, {
-    checked: optionProps['aria-selected'],
-    onChange: () => null,
-    className: "pointer-events-none ml-2 self-center p-px"
-  }))) : /*#__PURE__*/createElement("li", {
-    className: "yt-list__empty"
-  }, /*#__PURE__*/createElement("span", null, texts.listbox.empty)));
-});
-
-export { ScrollableList, getId };
-//# sourceMappingURL=ScrollableList.js.map

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

@@ -1 +0,0 @@
-{"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":";;;;;;;;;;MA2FaA,KAAK,GAAG,CAACC,EAAD,EAAaC,KAAb,QAA2DD,MAAMC;;AAEtF,MAAMC,kBAAkB,GAAG,CACvBC,KADuB,EAEvBC,IAFuB,EAGvBC,KAHuB;EAKvB,MAAMC,SAAS,GAAGC,mBAAmB,CAACJ,KAAK,CAACK,GAAP,EAAYJ,IAAI,CAACK,MAAjB,EAAyBJ,KAAzB,CAArC;;EAEA,IAAIC,SAAJ,EAAe;IACX,IAAIA,SAAS,KAAKD,KAAlB,EAAyB;MACrB,OAAOA,KAAP;KADJ,MAEO,IAAID,IAAI,CAACE,SAAD,CAAJ,IAAmBF,IAAI,CAACE,SAAD,CAAJ,CAAgBI,QAAvC,EAAiD;MACpD,OAAOR,kBAAkB,CAACC,KAAD,EAAQC,IAAR,EAAcE,SAAd,CAAzB;;;;EAIR,OAAOA,SAAP;AACH,CAhBD;;MAkBaK,cAAc,gBAAGC,UAAA,CAAiB,SAASD,cAAT,CAC3CE,KAD2C,EAE3CC,GAF2C;EAI3C,MAAM;IACFV,IADE;IAEFM,QAFE;IAGFK,WAHE;IAIFf,EAJE;IAKFgB,OAAO,EAAEC,CALP;IAMFC,OANE;IAOFC,QAAQ,EAAEC,eAPR;IAQFC,OARE;IASFC,OATE;IAUFC,SAVE;IAWFC,QAXE;IAYFC,aAAa,GAAG,KAZd;IAaFxB,KAAK,EAAEyB,YAbL;IAcFC,WAdE;IAeFC,eAAe,GAAG,EAfhB;IAgBFC,kBAAkB,GAAG,KAhBnB;IAiBF,GAAGC;MACHjB,KAlBJ;EAmBA,MAAMkB,OAAO,GAAGC,aAAa,CAAmBlB,GAAnB,CAA7B;EACA,MAAMmB,QAAQ,GAAGrB,OAAA,CAAc,MAAMR,IAAI,CAAC8B,GAAL,CAAS,mBAAMtB,SAAA,EAAf,CAApB,EAAsE,CAACR,IAAD,CAAtE,CAAjB;EACA,MAAM;IAAE+B;MAAUC,eAAe,EAAjC;EACA,MAAM;IAAEC;MAAaC,eAAe,CAACP,OAAD,EAAUE,QAAV,CAApC;EAEArB,SAAA,CAAgB;;;IACZ,IAAIc,YAAY,6BAAIO,QAAQ,CAACP,YAAD,CAAZ,kDAAI,sBAAwBa,OAA5C,EAAqD;MAAA;;MACjD,0BAAAN,QAAQ,CAACP,YAAD,CAAR,CAAuBa,OAAvB,kFAAgCC,cAAhC,CAA+C;QAC3CC,KAAK,EAAE;OADX;;GAFR,EAMG,EANH;EAQA7B,SAAA,CAAgB;IACZyB,QAAQ,CAACX,YAAD,CAAR;GADJ,EAEG,CAACA,YAAD,CAFH;;EAIA,MAAMgB,aAAa,GAAIvC,KAAD;IAClB,MAAMG,SAAS,GAAGJ,kBAAkB,CAACC,KAAD,EAAQC,IAAR,EAAcsB,YAAd,CAApC;;IAEA,IAAIpB,SAAS,KAAKqC,SAAd,IAA2BrC,SAAS,KAAKoB,YAA7C,EAA2D;MACvDvB,KAAK,CAACyC,cAAN;MACAP,QAAQ,CAAC/B,SAAD,CAAR;MACAc,eAAe,CAACd,SAAD,CAAf;;;IAGJ,IAAIiB,SAAJ,EAAe;MACXpB,KAAK,CAAC0C,OAAN;MACA,MAAMxC,KAAK,GAAGC,SAAS,KAAKqC,SAAd,GAA0BrC,SAA1B,GAAsCoB,YAApD;MACAH,SAAS,CAACpB,KAAD,EAAQE,KAAR,CAAT;;GAZR;;EAgBA,MAAMyC,WAAW,GAAIzC,KAAD,IAAoBF,KAAD;IACnCiB,eAAe,CAACf,KAAD,CAAf;;IAEA,IAAIgB,OAAJ,EAAa;MACTlB,KAAK,CAAC0C,OAAN;MACAxB,OAAO,CAAClB,KAAD,EAAQE,KAAR,CAAP;;GALR;;EASA,MAAM0C,WAAW,GAAI5C,KAAD;IAChB,IAAIsB,aAAJ,EAAmB;MACfY,QAAQ,CAACX,YAAD,CAAR;;;IAGJ,IAAIJ,OAAJ,EAAa;MACTnB,KAAK,CAAC0C,OAAN;MACAvB,OAAO,CAACnB,KAAD,CAAP;;GAPR;;EAWA,MAAM6C,qBAAqB,GAAG,CAACC,WAAD,EAAsB5C,KAAtB;IAC1B,IAAI4C,WAAW,KAAK,eAApB,EAAqC;MACjC,OAAOpB,kBAAP;KADJ,MAEO,IAAI,CAACoB,WAAD,IAAgB,CAACrB,eAArB,EAAsC;MACzC,OAAO,KAAP;KADG,MAEA;MACH,OAAOA,eAAe,CAACsB,SAAhB,CAA0BC,CAAC,IAAIA,CAAC,KAAK9C,KAArC,MAAgD,CAAC,CAAxD;;GANR;;EAUA,MAAM+C,IAAI,GAC+E,EACrF,GAAGtB,UADkF;IAErFuB,SAAS,EAAEC,EAAE,CACT,gEADS,EAETC,eAAe,CAAC1C,KAAD,CAFN,EAGT;MACI,wBAAwBc,WAD5B;MAEI,uBAAuBjB,QAF3B;MAGI,sBAAsBA,QAAQ,IAAIc;KAN7B,EAQTM,UAAU,CAACuB,SARF,CAFwE;IAYrF3C,QAZqF;IAarFV,EAbqF;IAcrFsB,OAAO,EAAE,CAACZ,QAAD,IAAa,CAACc,QAAd,GAAyBuB,WAAzB,GAAuCJ,SAdqC;IAerFpB,SAAS,EAAE,CAACb,QAAD,IAAa,CAACc,QAAd,GAAyBkB,aAAzB,GAAyCC,SAfiC;IAgBrFnB,QAhBqF;IAiBrFV,GAAG,EAAEiB,OAjBgF;IAkBrFyB,IAAI,EAAE,SAlB+E;IAmBrFC,QAAQ,EAAE3B,UAAU,CAAC2B,QAAX,IAAuB;GApBrC;EAuBA,MAAMC,OAAO,GAAGtD,IAAI,CAAC8B,GAAL,CAAS,CAACyB,MAAD,EAAStD,KAAT;IACrB,MAAMuD,KAAK,GAAGD,MAAM,CAACE,IAAP,GAAcF,MAAM,CAACE,IAAP,CAAYC,KAAZ,CAAkB,GAAlB,EAAuBrD,MAAvB,GAAgC,CAA9C,GAAkD,CAAhE;IAEA,OAAO;MACH,iBAAiBkB,WAAW,GAAGqB,qBAAqB,CAACe,MAAM,CAACJ,MAAM,CAAC1D,KAAR,CAAP,EAAuBI,KAAvB,CAAxB,GAAwDqB,YAAY,KAAKrB,KADlG;MAEH,gBAAgBqB,YAAY,KAAKrB,KAF9B;MAGH2D,QAAQ,EAAEL,MAAM,CAACM,IAHd;MAIHZ,SAAS,EAAEC,EAAE,CACT,yGADS,EAET;QACI,0BAA0BM,KAAK,KAAK,CAAV,IAAe,CAAC,CAACD,MAAM,CAACO;OAH7C,CAJV;MAUHxD,QAAQ,EAAEiD,MAAM,CAACjD,QAVd;MAWHyD,IAAI,EAAER,MAAM,CAACQ,IAXV;MAYHnE,EAAE,EAAED,KAAK,CAACC,EAAD,EAAK2D,MAAM,CAAC1D,KAAZ,CAZN;MAaHO,GAAG,EAAET,KAAK,CAACC,EAAD,EAAK2D,MAAM,CAAC1D,KAAZ,CAbP;MAcHoB,OAAO,EAAE,CAACX,QAAD,IAAa,CAACc,QAAd,GAAyBsB,WAAW,CAACzC,KAAD,CAApC,GAA8CsC,SAdpD;MAeH7B,GAAG,EAAEmB,QAAQ,CAAC5B,KAAD,CAfV;MAgBHmD,IAAI,EAAE,QAhBH;MAiBHY,KAAK,EACDR,KAAK,GAAG,CAAR,GACM;QACIS,WAAW,KAAKT,KAAK,GAAG;OAFlC,GAIMjB;KAtBd;GAHY,CAAhB;EA6BA,oBACI/B,aAAA,KAAA,oBAAQwC;iBAAgB;IAAxB,EACKlC,OAAO,gBACJN,aAAA,KAAA;IAAIyC,SAAS,EAAC;GAAd,eACIzC,aAAA,OAAA,MAAA,eACIA,aAAA,CAAC0D,OAAD;IAASC,KAAK,EAAE;GAAhB,CADJ,CADJ,eAII3D,aAAA,OAAA,MAAA,EAAOuB,KAAK,CAACqC,OAAN,CAActD,OAArB,CAJJ,CADI,GAOJwC,OAAO,CAACjD,MAAR,GACAiD,OAAO,CAACxB,GAAR,CAAY,CAAC;IAAE8B,QAAF;IAAYG,IAAZ;IAAkB,GAAGM;GAAtB,kBACR7D,aAAA,KAAA,oBAAQ6D,YAAR,EACKN,IADL,eAEIvD,aAAA,OAAA;IAAMyC,SAAS,EAAC;GAAhB,EAAgDW,QAAhD,CAFJ,EAGKrC,WAAW,iBACRf,aAAA,CAAC8D,QAAD;IACIC,OAAO,EAAEF,WAAW,CAAC,eAAD;IACpBtD,QAAQ,EAAE,MAAM;IAChBkC,SAAS,EAAC;GAHd,CAJR,CADJ,CADA,gBAeAzC,aAAA,KAAA;IAAIyC,SAAS,EAAC;GAAd,eACIzC,aAAA,OAAA,MAAA,EAAOuB,KAAK,CAACqC,OAAN,CAAcI,KAArB,CADJ,CAvBR,CADJ;AA8BH,CAxK6B;;;;"}

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

@@ -1,146 +0,0 @@
-import { useMemo, useEffect } from 'react';
-import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
-import { v4 } from 'uuid';
-import { useFlattenedData, getIndexFromValue, getActiveDescendant, setInputValueByRef, findByValue, sanitizeItem } from './util.js';
-import { useTypeahead } from './useTypeahead.js';
-
-const useListbox = ({
-  data: externalData = [],
-  defaultValue,
-  disabled,
-  emptyValue,
-  id: nativeId,
-  invalid,
-  name,
-  onChange,
-  onFocus,
-  onKeyDown,
-  value = emptyValue,
-  ...otherProps
-}, ref) => {
-  const data = useFlattenedData(emptyValue !== undefined ? [{
-    text: '',
-    value: emptyValue
-  }, ...externalData] : externalData);
-  const id = useMemo(() => nativeId || v4(), [nativeId]);
-  const inputRef = useProxiedRef(ref);
-  const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
-  const {
-    getNextIndex
-  } = useTypeahead({
-    data,
-    currentIndex
-  });
-
-  const setInputValueByIndex = index => {
-    if (index !== undefined) {
-      const option = data[index];
-
-      if (option && !option.disabled) {
-        setInputValueByRef(inputRef.current, option.value);
-      }
-    }
-  };
-
-  const handleListboxChange = index => {
-    setInputValueByIndex(index);
-  };
-
-  useEffect(() => {
-    if (data.length && currentIndex === undefined) {
-      if (defaultValue !== undefined) {
-        const defaultValueIndex = getIndexFromValue(data, defaultValue);
-
-        if (defaultValueIndex !== undefined) {
-          setInputValueByIndex(defaultValueIndex);
-        }
-      } else {
-        setInputValueByIndex(0);
-      }
-    }
-  }, [data]);
-
-  const handleListboxKeyDown = event => {
-    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.length === 1 && /(\w)/g.test(charKey)) {
-      const nextIndex = getNextIndex(charKey);
-
-      if (nextIndex > -1 && nextIndex !== currentIndex) {
-        setInputValueByIndex(nextIndex);
-      }
-
-      return;
-    }
-
-    if (onKeyDown) {
-      event.persist();
-      onKeyDown(event);
-    }
-  };
-
-  const handleListboxFocus = event => {
-    if (currentIndex === undefined && data.length) {
-      setInputValueByIndex(0);
-    }
-
-    if (onFocus) {
-      event.persist();
-      onFocus(event);
-    }
-  };
-
-  const handleInputChange = event => {
-    event.persist();
-
-    if (onChange) {
-      var _item$path$split, _item$path;
-
-      const item = findByValue(data, event.target.value);
-      event.detail = sanitizeItem(item);
-      const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
-
-      if (indexes.length > 1) {
-        // we don't want to map the current item
-        indexes.pop(); // we need to rebuild the path as we map
-
-        let lastPath;
-        event.detail.parents = indexes.map(i => {
-          lastPath = lastPath ? [lastPath, i].join('.') : i;
-          return sanitizeItem(data.find(i => i.path === lastPath));
-        });
-      }
-
-      onChange(event);
-    }
-  };
-
-  const list = { ...otherProps,
-    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
-    data,
-    disabled,
-    id,
-    invalid,
-    onChange: handleListboxChange,
-    onFocus: handleListboxFocus,
-    onKeyDown: handleListboxKeyDown,
-    scrollOnFocus: true,
-    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
-    value: currentIndex
-  };
-  const input = {
-    name,
-    onChange: handleInputChange,
-    ref: inputRef,
-    tabIndex: -1,
-    value: value !== null && value !== void 0 ? value : ''
-  };
-  return {
-    list,
-    input
-  };
-};
-
-export { useListbox };
-//# sourceMappingURL=useListbox.js.map

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

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