@economic/taco 2.40.0 → 2.40.2

package/dist/esm/packages/taco/src/components/List/components/Link.js

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { Icon } from '../../Icon/Icon.js';
+import { Item } from './Item.js';
+
+const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
+  const isExternal = props.href.startsWith('http');
+  const control = /*#__PURE__*/React__default.createElement(Icon, {
+    name: isExternal ? 'link-external' : 'chevron-right'
+  });
+  if (isExternal) {
+    return /*#__PURE__*/React__default.createElement(Item, Object.assign({}, props, {
+      as: "a",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      control: control,
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Item, Object.assign({}, props, {
+    as: "a",
+    control: control,
+    ref: ref
+  }));
+});
+
+export { Link };
+//# sourceMappingURL=Link.js.map

package/dist/esm/packages/taco/src/components/List/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../../../../../../../src/components/List/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport { Item, ComposableListItemProps } from './Item';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListLinkProps = ComposableListItemProps<'a'> & {\n    href: string;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, ListLinkProps>(function Link(props, ref) {\n    const isExternal = props.href.startsWith('http');\n    const control = <Icon name={isExternal ? 'link-external' : 'chevron-right'} />;\n\n    if (isExternal) {\n        return <Item {...props} as=\"a\" target=\"_blank\" rel=\"noopener noreferrer\" control={control} ref={ref} />;\n    }\n\n    return <Item {...props} as=\"a\" control={control} ref={ref} />;\n});\n"],"names":["Link","React","forwardRef","props","ref","isExternal","href","startsWith","control","Icon","name","Item","as","target","rel"],"mappings":";;;;MAQaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAmC,SAASF,IAAIA,CAACG,KAAK,EAAEC,GAAG;EAC3F,MAAMC,UAAU,GAAGF,KAAK,CAACG,IAAI,CAACC,UAAU,CAAC,MAAM,CAAC;EAChD,MAAMC,OAAO,gBAAGP,6BAACQ,IAAI;IAACC,IAAI,EAAEL,UAAU,GAAG,eAAe,GAAG;IAAmB;EAE9E,IAAIA,UAAU,EAAE;IACZ,oBAAOJ,6BAACU,IAAI,oBAAKR,KAAK;MAAES,EAAE,EAAC,GAAG;MAACC,MAAM,EAAC,QAAQ;MAACC,GAAG,EAAC,qBAAqB;MAACN,OAAO,EAAEA,OAAO;MAAEJ,GAAG,EAAEA;OAAO;;EAG3G,oBAAOH,6BAACU,IAAI,oBAAKR,KAAK;IAAES,EAAE,EAAC,GAAG;IAACJ,OAAO,EAAEA,OAAO;IAAEJ,GAAG,EAAEA;KAAO;AACjE,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/List/components/Toggle.js

@@ -0,0 +1,105 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Checkbox as Checkbox$1 } from '../../Checkbox/Checkbox.js';
+import { Item } from './Item.js';
+import { Switch as Switch$1 } from '../../Switch/Switch.js';
+
+const ToggleItem = /*#__PURE__*/React__default.forwardRef(function Toggle(props, ref) {
+  const {
+    controlRef,
+    onToggle,
+    ...attributes
+  } = props;
+  function handleClick(event) {
+    var _controlRef$current;
+    if (typeof props.onClick === 'function') {
+      props.onClick(event);
+    }
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    // If event target is not a control and not an element inside the control, then trigger click of the control
+    if (event.target !== controlRef.current && !((_controlRef$current = controlRef.current) !== null && _controlRef$current !== void 0 && _controlRef$current.contains(event.target))) {
+      onToggle();
+      return;
+    }
+  }
+  function handleKeyDown(event) {
+    var _controlRef$current2;
+    if (typeof props.onKeyDown === 'function') {
+      props.onKeyDown(event);
+    }
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    // If event target is not a control and not an element inside the control, then send appropriate "activate" keyboard shortcuts to the control as a click
+    if ((event.key === 'Enter' || event.key === ' ') && event.target !== controlRef.current && !((_controlRef$current2 = controlRef.current) !== null && _controlRef$current2 !== void 0 && _controlRef$current2.contains(event.target))) {
+      onToggle();
+      return;
+    }
+  }
+  const className = cn('group/toggle', props.className);
+  return /*#__PURE__*/React__default.createElement(Item, Object.assign({}, attributes, {
+    className: className,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }));
+});
+const Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, ref) {
+  const {
+    checked: externalChecked,
+    onChange,
+    ...attributes
+  } = props;
+  const [checked, setChecked] = React__default.useState(externalChecked);
+  const switchRef = React__default.useRef(null);
+  const toggle = React__default.useCallback(() => {
+    setChecked(!checked);
+    onChange(!checked);
+  }, [checked, onChange]);
+  const control = /*#__PURE__*/React__default.createElement(Switch$1, {
+    checked: checked,
+    className: "group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700",
+    disabled: props.disabled,
+    onChange: toggle,
+    ref: switchRef,
+    tabIndex: -1
+  });
+  return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
+    control: control,
+    controlRef: switchRef,
+    ref: ref,
+    onToggle: toggle
+  }));
+});
+const Checkbox = /*#__PURE__*/React__default.forwardRef(function Switch(props, ref) {
+  const {
+    checked: externalChecked,
+    onChange,
+    ...attributes
+  } = props;
+  const [checked, setChecked] = React__default.useState(externalChecked);
+  const checkboxRef = React__default.useRef(null);
+  const toggle = React__default.useCallback(() => {
+    setChecked(!checked);
+    onChange(!checked);
+  }, [checked, onChange]);
+  const control = /*#__PURE__*/React__default.createElement(Checkbox$1, {
+    checked: checked,
+    className: "group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700",
+    disabled: props.disabled,
+    onChange: toggle,
+    ref: checkboxRef,
+    tabIndex: -1
+  });
+  return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
+    control: control,
+    controlRef: checkboxRef,
+    ref: ref,
+    onToggle: toggle
+  }));
+});
+
+export { Checkbox, Switch };
+//# sourceMappingURL=Toggle.js.map

package/dist/esm/packages/taco/src/components/List/components/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../../../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ControlledSwitchProps, Switch as TacoSwitch } from '../../Switch/Switch';\nimport { ControlledCheckboxProps, Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport { Item, ComposableListItemProps } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: JSX.Element;\n    controlRef: React.RefObject<HTMLButtonElement>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const switchRef = React.useRef<HTMLButtonElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const checkboxRef = React.useRef<HTMLButtonElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["ToggleItem","React","forwardRef","Toggle","props","ref","controlRef","onToggle","attributes","handleClick","event","onClick","isDefaultPrevented","target","current","_controlRef$current","contains","handleKeyDown","onKeyDown","key","_controlRef$current2","className","cn","Item","Switch","checked","externalChecked","onChange","setChecked","useState","switchRef","useRef","toggle","useCallback","control","TacoSwitch","disabled","tabIndex","Checkbox","checkboxRef","TacoCheckbox"],"mappings":";;;;;;AAYA,MAAMA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAA8B,SAASC,MAAMA,CAACC,KAAK,EAAEC,GAAG;EACvF,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAErD,SAASK,WAAWA,CAACC,KAAuC;;IACxD,IAAI,OAAON,KAAK,CAACO,OAAO,KAAK,UAAU,EAAE;MACrCP,KAAK,CAACO,OAAO,CAACD,KAAK,CAAC;;IAGxB,IAAIA,KAAK,CAACE,kBAAkB,EAAE,EAAE;MAC5B;;;IAIJ,IAAIF,KAAK,CAACG,MAAM,KAAKP,UAAU,CAACQ,OAAO,IAAI,GAAAC,mBAAA,GAACT,UAAU,CAACQ,OAAO,cAAAC,mBAAA,eAAlBA,mBAAA,CAAoBC,QAAQ,CAACN,KAAK,CAACG,MAAqB,CAAC,GAAE;MACnGN,QAAQ,EAAE;MACV;;;EAIR,SAASU,aAAaA,CAACP,KAA0C;;IAC7D,IAAI,OAAON,KAAK,CAACc,SAAS,KAAK,UAAU,EAAE;MACvCd,KAAK,CAACc,SAAS,CAACR,KAAK,CAAC;;IAG1B,IAAIA,KAAK,CAACE,kBAAkB,EAAE,EAAE;MAC5B;;;IAIJ,IACI,CAACF,KAAK,CAACS,GAAG,KAAK,OAAO,IAAIT,KAAK,CAACS,GAAG,KAAK,GAAG,KAC3CT,KAAK,CAACG,MAAM,KAAKP,UAAU,CAACQ,OAAO,IACnC,GAAAM,oBAAA,GAACd,UAAU,CAACQ,OAAO,cAAAM,oBAAA,eAAlBA,oBAAA,CAAoBJ,QAAQ,CAACN,KAAK,CAACG,MAAqB,CAAC,GAC5D;MACEN,QAAQ,EAAE;MACV;;;EAIR,MAAMc,SAAS,GAAGC,EAAE,CAAC,cAAc,EAAElB,KAAK,CAACiB,SAAS,CAAC;EACrD,oBAAOpB,6BAACsB,IAAI,oBAAKf,UAAU;IAAEa,SAAS,EAAEA,SAAS;IAAEV,OAAO,EAAEF,WAAW;IAAES,SAAS,EAAED,aAAa;IAAEZ,GAAG,EAAEA;KAAO;AACnH,CAAC,CAAC;MAIWmB,MAAM,gBAAGvB,cAAK,CAACC,UAAU,CAAkC,SAASsB,MAAMA,CAACpB,KAAK,EAAEC,GAAG;EAC9F,MAAM;IAAEoB,OAAO,EAAEC,eAAe;IAAEC,QAAQ;IAAE,GAAGnB;GAAY,GAAGJ,KAAK;EACnE,MAAM,CAACqB,OAAO,EAAEG,UAAU,CAAC,GAAG3B,cAAK,CAAC4B,QAAQ,CAAUH,eAAe,CAAC;EACtE,MAAMI,SAAS,GAAG7B,cAAK,CAAC8B,MAAM,CAAoB,IAAI,CAAC;EAEvD,MAAMC,MAAM,GAAG/B,cAAK,CAACgC,WAAW,CAAC;IAC7BL,UAAU,CAAC,CAACH,OAAO,CAAC;IACpBE,QAAQ,CAAC,CAACF,OAAO,CAAC;GACrB,EAAE,CAACA,OAAO,EAAEE,QAAQ,CAAC,CAAC;EAEvB,MAAMO,OAAO,gBACTjC,6BAACkC,QAAU;IACPV,OAAO,EAAEA,OAAO;IAChBJ,SAAS,EAAC,8GAA8G;IACxHe,QAAQ,EAAEhC,KAAK,CAACgC,QAAQ;IACxBT,QAAQ,EAAEK,MAAM;IAChB3B,GAAG,EAAEyB,SAAS;IACdO,QAAQ,EAAE,CAAC;IAElB;EAED,oBAAOpC,6BAACD,UAAU,oBAAKQ,UAAU;IAAE0B,OAAO,EAAEA,OAAO;IAAE5B,UAAU,EAAEwB,SAAS;IAAEzB,GAAG,EAAEA,GAAG;IAAEE,QAAQ,EAAEyB;KAAU;AAC9G,CAAC;MAIYM,QAAQ,gBAAGrC,cAAK,CAACC,UAAU,CAAkC,SAASsB,MAAMA,CAACpB,KAAK,EAAEC,GAAG;EAChG,MAAM;IAAEoB,OAAO,EAAEC,eAAe;IAAEC,QAAQ;IAAE,GAAGnB;GAAY,GAAGJ,KAAK;EACnE,MAAM,CAACqB,OAAO,EAAEG,UAAU,CAAC,GAAG3B,cAAK,CAAC4B,QAAQ,CAAUH,eAAe,CAAC;EACtE,MAAMa,WAAW,GAAGtC,cAAK,CAAC8B,MAAM,CAAoB,IAAI,CAAC;EAEzD,MAAMC,MAAM,GAAG/B,cAAK,CAACgC,WAAW,CAAC;IAC7BL,UAAU,CAAC,CAACH,OAAO,CAAC;IACpBE,QAAQ,CAAC,CAACF,OAAO,CAAC;GACrB,EAAE,CAACA,OAAO,EAAEE,QAAQ,CAAC,CAAC;EAEvB,MAAMO,OAAO,gBACTjC,6BAACuC,UAAY;IACTf,OAAO,EAAEA,OAAO;IAChBJ,SAAS,EAAC,8KAA8K;IACxLe,QAAQ,EAAEhC,KAAK,CAACgC,QAAQ;IACxBT,QAAQ,EAAEK,MAAM;IAChB3B,GAAG,EAAEkC,WAAW;IAChBF,QAAQ,EAAE,CAAC;IAElB;EAED,oBAAOpC,6BAACD,UAAU,oBAAKQ,UAAU;IAAE0B,OAAO,EAAEA,OAAO;IAAE5B,UAAU,EAAEiC,WAAW;IAAElC,GAAG,EAAEA,GAAG;IAAEE,QAAQ,EAAEyB;KAAU;AAChH,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Listbox/Listbox.js

@@ -0,0 +1,55 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'clsx';
+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/packages/taco/src/components/Listbox/Listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","sources":["../../../../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\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,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAAgC;EAC1G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAC7D,MAAM;IAAEK,IAAI;IAAEC;GAAO,GAAGC,UAAU,CAACH,UAAU,EAAEH,GAAG,CAAC;EACnD,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAsC,EAAEL,iBAAiB,CAAC;EAE/E,oBACIJ;iBAAgB,SAAS;IAACG,SAAS,EAAEA;kBACjCH,cAACU,cAAc,oBACPJ,IAAI;IACRK,KAAK,EAAE;MAAE,GAAGL,IAAI,CAACK,KAAK;MAAEC,SAAS,EAAE,mBAAmB;;KACxD,eACFZ,yCAAWO,KAAK;IAAEJ,SAAS,EAAC,QAAQ;IAACU,IAAI,EAAC;KAAS,CAChD;AAEf,CAAC;MAEYC,YAAY,gBAAGd,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAAgC;EAC/G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAC7D,MAAM;IAAEK,IAAI;IAAEC;GAAO,GAAGQ,eAAe,CAACV,UAAU,EAAEH,GAAG,CAAC;EACxD,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAsC,EAAEL,iBAAiB,CAAC;EAE/E,oBACIJ;iBAAgB,SAAS;IAACG,SAAS,EAAEA;kBACjCH,cAACU,cAAc,oBACPJ,IAAI;IACRK,KAAK,EAAE;MACH,GAAGL,IAAI,CAACK,KAAK;MACbC,SAAS,EAAE,yBAAyB;;KAE1C,eACFZ,yCAAWO,KAAK;IAAEJ,SAAS,EAAC,QAAQ;IAACU,IAAI,EAAC;KAAS,CAChD;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js

@@ -0,0 +1,168 @@
+import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react';
+import cn from 'clsx';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { useLocalization } from '../Provider/Localization.js';
+import { Spinner } from '../Spinner/Spinner.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 = useMergedRef(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);
+    }
+    // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable
+    // list are not executed.
+    event.stopPropagation();
+  };
+  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 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-500 focus:border-blue-500', {
+        '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
+    };
+  });
+  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: options.length <= 0 || loading ? 'presentation' : 'listbox',
+    tabIndex: otherProps.tabIndex || 0
+  };
+  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
+  // In multiselect variant, this checkbox only acts as visual representation of item being selected,
+  // so need to be taken out of screen reader scope.
+  , {
+    "aria-hidden": true,
+    tabIndex: -1,
+    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/packages/taco/src/components/Listbox/ScrollableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableList.js","sources":["../../../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\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 = useMergedRef<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        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\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 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-500 focus:border-blue-500',\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    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: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\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                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\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","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Listbox/useListbox.js

@@ -0,0 +1,130 @@
+import { useMemo, useEffect } from 'react';
+import { useMergedRef } from '../../hooks/useMergedRef.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 = useMergedRef(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/packages/taco/src/components/Listbox/useListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListbox.js","sources":["../../../../../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { ListboxProps } from './Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\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 = useMergedRef<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","useMergedRef","currentIndex","getIndexFromValue","getNextIndex","useTypeahead","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","_item$path$split","_item$path","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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"}