@economic/taco 13.0.0 → 14.0.0-tanstack-virtual-update.0

package/dist/components/List/components/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../../src/components/List/components/Link.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../Icon/Icon';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\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","Icon","Item"],"mappings":";;;;;AAWO,MAAM,OAAO,MAAM,WAA6C,SAASA,MAAK,OAAO,KAAK;AAC7F,QAAM,aAAa,MAAM,KAAK,WAAW,MAAM;AAC/C,QAAM,UAAU,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAM,aAAa,kBAAkB,iBAAiB;AAE5E,MAAI,YAAY;AACZ,WAAO,sBAAA,cAACC,KAAAA,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,QAAO,UAAS,KAAI,uBAAsB,SAAkB,IAAA,CAAU;AAAA,EACzG;AAEA,6CAAQA,KAAAA,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,SAAkB,KAAU;AAC/D,CAAC;;"}
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/List/components/Link.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '@/components';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\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","Icon","Item"],"mappings":";;;;;AAWO,MAAM,OAAO,MAAM,WAA6C,SAASA,MAAK,OAAO,KAAK;AAC7F,QAAM,aAAa,MAAM,KAAK,WAAW,MAAM;AAC/C,QAAM,UAAU,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAM,aAAa,kBAAkB,iBAAiB;AAE5E,MAAI,YAAY;AACZ,WAAO,sBAAA,cAACC,KAAAA,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,QAAO,UAAS,KAAI,uBAAsB,SAAkB,IAAA,CAAU;AAAA,EACzG;AAEA,6CAAQA,KAAAA,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,SAAkB,KAAU;AAC/D,CAAC;;"}

package/dist/components/List/components/Link.js

@@ -1,6 +1,6 @@
 import React__default from "react";
-import { Icon } from "../../Icon/Icon.js";
 import { Item } from "./Item.js";
+import { Icon } from "../../Icon/Icon.js";
 const Link = React__default.forwardRef(function Link2(props, ref) {
   const isExternal = props.href.startsWith("http");
   const control = /* @__PURE__ */ React__default.createElement(Icon, { name: isExternal ? "link-external" : "chevron-right" });

package/dist/components/List/components/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/List/components/Link.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../Icon/Icon';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\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":["React","Link"],"mappings":";;;AAWO,MAAM,OAAOA,eAAM,WAA6C,SAASC,MAAK,OAAO,KAAK;AAC7F,QAAM,aAAa,MAAM,KAAK,WAAW,MAAM;AAC/C,QAAM,UAAUD,+BAAA,cAAC,MAAA,EAAK,MAAM,aAAa,kBAAkB,iBAAiB;AAE5E,MAAI,YAAY;AACZ,WAAOA,+BAAA,cAAC,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,QAAO,UAAS,KAAI,uBAAsB,SAAkB,IAAA,CAAU;AAAA,EACzG;AAEA,sDAAQ,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,SAAkB,KAAU;AAC/D,CAAC;"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/List/components/Link.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '@/components';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\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":["React","Link"],"mappings":";;;AAWO,MAAM,OAAOA,eAAM,WAA6C,SAASC,MAAK,OAAO,KAAK;AAC7F,QAAM,aAAa,MAAM,KAAK,WAAW,MAAM;AAC/C,QAAM,UAAUD,+BAAA,cAAC,MAAA,EAAK,MAAM,aAAa,kBAAkB,iBAAiB;AAE5E,MAAI,YAAY;AACZ,WAAOA,+BAAA,cAAC,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,QAAO,UAAS,KAAI,uBAAsB,SAAkB,IAAA,CAAU;AAAA,EACzG;AAEA,sDAAQ,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,SAAkB,KAAU;AAC/D,CAAC;"}

package/dist/components/List/components/Toggle.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
 const useControlled = require("../../../hooks/useControlled.cjs");
-const Checkbox$1 = require("../../Checkbox/Checkbox.cjs");
-const Switch$1 = require("../../Switch/Switch.cjs");
 const Item = require("./Item.cjs");
+const Switch$1 = require("../../Switch/Switch.cjs");
+const Checkbox$1 = require("../../Checkbox/Checkbox.cjs");
 const ToggleItem = React.forwardRef(function Toggle(props, ref) {
   const { controlRef, onToggle, ...attributes } = props;
   function handleClick(event) {

package/dist/components/List/components/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useControlled } from '../../../hooks/useControlled';\nimport type { ControlledCheckboxProps } from '../../Checkbox/Checkbox';\nimport { Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport type { ControlledSwitchProps } from '../../Switch/Switch';\nimport { Switch as TacoSwitch } from '../../Switch/Switch';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\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] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-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, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-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":["Item","Switch","useControlled","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;;;AAkBA,MAAM,aAAa,MAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAO,sBAAA,cAACA,KAAAA,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAAS,MAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAY,MAAM,OAAyB,IAAI;AAErD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAW,MAAM,WAA8C,SAASF,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAc,MAAM,OAAyB,IAAI;AAEvD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACE,WAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;;;"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { ControlledCheckboxProps, ControlledSwitchProps } from '@/components';\nimport { Checkbox as TacoCheckbox, Switch as TacoSwitch } from '@/components';\nimport { useControlled } from '@/hooks/useControlled';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\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] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-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, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-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":["Item","Switch","useControlled","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;;;AAgBA,MAAM,aAAa,MAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAO,sBAAA,cAACA,KAAAA,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAAS,MAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAY,MAAM,OAAyB,IAAI;AAErD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAW,MAAM,WAA8C,SAASF,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAc,MAAM,OAAyB,IAAI;AAEvD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACE,WAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;;;"}

package/dist/components/List/components/Toggle.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-import { ControlledCheckboxProps } from '../../Checkbox/Checkbox';
-import { ControlledSwitchProps } from '../../Switch/Switch';
+import { ControlledCheckboxProps, ControlledSwitchProps } from '../..';
 import { ComposableListItemProps } from './Item';
 export type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;
 export declare const Switch: React.ForwardRefExoticComponent<ComposableListItemProps<"div"> & Omit<ControlledSwitchProps, "title"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/List/components/Toggle.js

@@ -1,9 +1,9 @@
 import cn from "clsx";
 import React__default from "react";
 import { useControlled } from "../../../hooks/useControlled.js";
-import { Checkbox as Checkbox$1 } from "../../Checkbox/Checkbox.js";
-import { Switch as Switch$1 } from "../../Switch/Switch.js";
 import { Item } from "./Item.js";
+import { Switch as Switch$1 } from "../../Switch/Switch.js";
+import { Checkbox as Checkbox$1 } from "../../Checkbox/Checkbox.js";
 const ToggleItem = React__default.forwardRef(function Toggle(props, ref) {
   const { controlRef, onToggle, ...attributes } = props;
   function handleClick(event) {

package/dist/components/List/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useControlled } from '../../../hooks/useControlled';\nimport type { ControlledCheckboxProps } from '../../Checkbox/Checkbox';\nimport { Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport type { ControlledSwitchProps } from '../../Switch/Switch';\nimport { Switch as TacoSwitch } from '../../Switch/Switch';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\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] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-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, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-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":["React","Switch","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;AAkBA,MAAM,aAAaA,eAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAOA,+BAAA,cAAC,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAASA,eAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAYD,eAAM,OAAyB,IAAI;AAErD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACE;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOF,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAWA,eAAM,WAA8C,SAASC,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAcD,eAAM,OAAyB,IAAI;AAEvD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACG;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOH,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;"}
+{"version":3,"file":"Toggle.js","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { ControlledCheckboxProps, ControlledSwitchProps } from '@/components';\nimport { Checkbox as TacoCheckbox, Switch as TacoSwitch } from '@/components';\nimport { useControlled } from '@/hooks/useControlled';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\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] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-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, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-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":["React","Switch","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;AAgBA,MAAM,aAAaA,eAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAOA,+BAAA,cAAC,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAASA,eAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAYD,eAAM,OAAyB,IAAI;AAErD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACE;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOF,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAWA,eAAM,WAA8C,SAASC,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAcD,eAAM,OAAyB,IAAI;AAEvD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACG;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOH,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;"}

package/dist/components/Listbox/Listbox.d.ts

@@ -45,7 +45,7 @@ export type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'on
      */
     value?: ListboxValue;
 };
-export declare const Listbox: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "onFocus" | "onChange"> & Omit<React.InputHTMLAttributes<HTMLElement>, "onChange" | "defaultValue" | "value"> & {
+export declare const Listbox: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "onFocus" | "onChange"> & Omit<React.InputHTMLAttributes<HTMLElement>, "defaultValue" | "onChange" | "value"> & {
     /** Data indicating the options in listbox */
     data?: ListboxItem[];
     /**
@@ -71,7 +71,7 @@ export declare const Listbox: React.ForwardRefExoticComponent<Pick<React.InputHT
      */
     value?: ListboxValue;
 } & React.RefAttributes<HTMLInputElement>>;
-export declare const MultiListbox: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "onFocus" | "onChange"> & Omit<React.InputHTMLAttributes<HTMLElement>, "onChange" | "defaultValue" | "value"> & {
+export declare const MultiListbox: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "onFocus" | "onChange"> & Omit<React.InputHTMLAttributes<HTMLElement>, "defaultValue" | "onChange" | "value"> & {
     /** Data indicating the options in listbox */
     data?: ListboxItem[];
     /**

package/dist/components/Listbox/ScrollableList.cjs

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
+const util = require("../Input/util.cjs");
 const useMergedRef = require("../../hooks/useMergedRef.cjs");
 const useListKeyboardNavigation = require("../../utils/hooks/useListKeyboardNavigation.cjs");
 const useListScrollTo = require("../../utils/hooks/useListScrollTo.cjs");
-const Checkbox = require("../Checkbox/Checkbox.cjs");
-const util = require("../Input/util.cjs");
+;/* empty css                     */
 const Localization = require("../Provider/Localization.cjs");
 const Spinner = require("../Spinner/Spinner.cjs");
-;/* empty css                     */
+const Checkbox = require("../Checkbox/Checkbox.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/components/Listbox/ScrollableList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.cjs","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\nimport { useLocalization } from '../Provider/Localization';\nimport { Spinner } from '../Spinner/Spinner';\n\nimport './ScrollableList.css';\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<{ className?: string }>;\n    /** The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.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        }\n        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: _1,\n        id,\n        invalid: _2,\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 ? currentIndex : nextIndex;\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        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\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 w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:bg-blue-500 focus:text-white',\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            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\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 data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </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":["getNextIndexFromKey","React","ScrollableList","useMergedRef","useLocalization","useListScrollTo","getInputClasses","Spinner","Checkbox"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.cjs","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Checkbox, Spinner, useLocalization } from '@/components';\nimport { getInputClasses } from '@/components/Input/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { getNextIndexFromKey } from '@/utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '@/utils/hooks/useListScrollTo';\n\nimport './ScrollableList.css';\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<{ className?: string }>;\n    /** The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.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        }\n        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: _1,\n        id,\n        invalid: _2,\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 ? currentIndex : nextIndex;\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        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\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 w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:bg-blue-500 focus:text-white',\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            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\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 data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </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":["getNextIndexFromKey","React","ScrollableList","useMergedRef","useLocalization","useListScrollTo","getInputClasses","Spinner","Checkbox"],"mappings":"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"}

package/dist/components/Listbox/ScrollableList.d.ts

@@ -75,7 +75,7 @@ export type ScrollableListProps = Omit<React.HTMLAttributes<HTMLUListElement>, '
 /** @internal */
 export type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;
 export declare const getId: (id: string, value: ScrollableListItemValue) => string;
-export declare const ScrollableList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLUListElement>, "id" | "onChange" | "onKeyDown" | "onClick" | "defaultValue"> & {
+export declare const ScrollableList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLUListElement>, "defaultValue" | "id" | "onChange" | "onKeyDown" | "onClick"> & {
     /** Data indicating the options in scrollable list */
     data: ScrollableListItem[];
     /** Sets the list to be disabled */

package/dist/components/Listbox/ScrollableList.js

@@ -1,13 +1,13 @@
 import cn from "clsx";
 import * as React from "react";
+import { getInputClasses } from "../Input/util.js";
 import { useMergedRef } from "../../hooks/useMergedRef.js";
 import { getNextIndexFromKey } from "../../utils/hooks/useListKeyboardNavigation.js";
 import { useListScrollTo } from "../../utils/hooks/useListScrollTo.js";
-import { Checkbox } from "../Checkbox/Checkbox.js";
-import { getInputClasses } from "../Input/util.js";
+/* empty css                   */
 import { useLocalization } from "../Provider/Localization.js";
 import { Spinner } from "../Spinner/Spinner.js";
-/* empty css                   */
+import { Checkbox } from "../Checkbox/Checkbox.js";
 const getId = (id, value) => `${id}_${value}`;
 const getNextEnabledItem = (event, data, index) => {
   const nextIndex = getNextIndexFromKey(event.key, data.length, index);

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\nimport { useLocalization } from '../Provider/Localization';\nimport { Spinner } from '../Spinner/Spinner';\n\nimport './ScrollableList.css';\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<{ className?: string }>;\n    /** The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.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        }\n        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: _1,\n        id,\n        invalid: _2,\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 ? currentIndex : nextIndex;\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        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\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 w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:bg-blue-500 focus:text-white',\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            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\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 data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </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":["ScrollableList"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Checkbox, Spinner, useLocalization } from '@/components';\nimport { getInputClasses } from '@/components/Input/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { getNextIndexFromKey } from '@/utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '@/utils/hooks/useListScrollTo';\n\nimport './ScrollableList.css';\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<{ className?: string }>;\n    /** The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | React.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        }\n        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: _1,\n        id,\n        invalid: _2,\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 ? currentIndex : nextIndex;\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        }\n\n        if (!optionValue || !selectedIndexes) {\n            return false;\n        }\n\n        return selectedIndexes.some(i => i === index);\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 w-full flex-[0_0_2rem] cursor-pointer items-center bg-white px-3 focus:border-blue-500 focus:bg-blue-500 focus:text-white',\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            'm-0 inline-flex h-auto list-none flex-col overflow-y-auto !p-0',\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 data-taco=\"list-option\" className=\"flex-grow truncate text-left\">\n                            {children}\n                        </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":["ScrollableList"],"mappings":"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"}

package/dist/components/Listbox/useListbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\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 ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\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                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\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":["useFlattenedData","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","setInputValueByRef","findByValue","sanitizeItem","i","getActiveDescendant"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,aAAa,CACtB;AAAA,EACI,MAAM,eAAe,CAAA;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACP,GACA,QACa;AACb,QAAM,OAAOA,KAAAA,iBAAiB,eAAe,SAAY,eAAe,CAAC,EAAE,MAAM,IAAI,OAAO,WAAA,GAAc,GAAG,YAAY,CAAC;AAC1H,QAAM,KAAKC,iBAAM,QAAQ,MAAM,YAAYC,cAAA,GAAU,CAAC,QAAQ,CAAC;AAC/D,QAAM,WAAWC,aAAAA,aAA+B,GAAG;AACnD,QAAM,eAAe,UAAU,SAAY,SAAYC,KAAAA,kBAAkB,MAAM,KAAK;AACpF,QAAM,EAAE,aAAA,IAAiBC,aAAAA,aAAa,EAAE,MAAM,cAAc;AAE5D,QAAM,uBAAuB,CAAC,UAAoC;AAC9D,QAAI,UAAU,QAAW;AACrB,YAAM,SAAS,KAAK,KAAK;AAEzB,UAAI,UAAU,CAAC,OAAO,UAAU;AAC5BC,aAAAA,mBAAmB,SAAS,SAAS,OAAO,KAAK;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,sBAAsB,CAAC,UAAwB;AACjD,yBAAqB,KAAK;AAAA,EAC9B;AAEAL,mBAAM,UAAU,MAAM;AAClB,QAAI,KAAK,UAAU,iBAAiB,QAAW;AAC3C,UAAI,iBAAiB,QAAW;AAC5B,6BAAqB,CAAC;AAAA,MAC1B,OAAO;AACH,cAAM,oBAAoBG,KAAAA,kBAAkB,MAAM,YAAY;AAE9D,YAAI,sBAAsB,QAAW;AACjC,+BAAqB,iBAAiB;AAAA,QAC1C;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,uBAAuB,CAAC,UAAkD;AAC5E,UAAM,UAAU,MAAM;AAItB,QAAI,QAAQ,WAAW,KAAK,QAAQ,KAAK,OAAO,GAAG;AAC/C,YAAM,YAAY,aAAa,OAAO;AAEtC,UAAI,YAAY,MAAM,cAAc,cAAc;AAC9C,6BAAqB,SAAS;AAAA,MAClC;AACA;AAAA,IACJ;AAEA,QAAI,WAAW;AACX,YAAM,QAAA;AACN,gBAAU,KAAK;AAAA,IACnB;AAAA,EACJ;AAEA,QAAM,qBAAqB,CAAC,UAA+C;AACvE,QAAI,iBAAiB,UAAa,KAAK,QAAQ;AAC3C,2BAAqB,CAAC;AAAA,IAC1B;AAEA,QAAI,SAAS;AACT,YAAM,QAAA;AACN,cAAQ,KAAK;AAAA,IACjB;AAAA,EACJ;AAEA,QAAM,oBAAoB,CAAC,UAAqD;AAC5E,UAAM,QAAA;AAEN,QAAI,UAAU;AACV,YAAM,OAAOG,KAAAA,YAAY,MAAM,MAAM,OAAO,KAAK;AAChD,YAAc,SAASC,KAAAA,aAAa,IAAI;AAEzC,YAAM,UAAU,MAAM,MAAM,MAAM,GAAG,KAAK,CAAA;AAE1C,UAAI,QAAQ,SAAS,GAAG;AAEpB,gBAAQ,IAAA;AAER,YAAI;AAEH,cAAc,OAAO,UAAU,QAAQ,IAAI,CAAA,MAAK;AAC7C,qBAAW,WAAW,CAAC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI;AAChD,iBAAOA,KAAAA,aAAa,KAAK,KAAK,CAAAC,OAAKA,GAAE,SAAS,QAAQ,CAAC;AAAA,QAC3D,CAAC;AAAA,MACL;AAEA,eAAS,KAAK;AAAA,IAClB;AAAA,EACJ;AAEA,QAAM,OAA4B;AAAA,IAC9B,GAAG;AAAA,IACH,yBAAyBC,KAAAA,oBAAoB,MAAM,cAAc,EAAE;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,UAAU,WAAW,KAAK,WAAW,WAAW,WAAW,WAAW;AAAA,IACtE,OAAO;AAAA,EAAA;AAGX,QAAM,QAAQ;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU;AAAA,IACV,OAAO,SAAS;AAAA,EAAA;AAGpB,SAAO,EAAE,MAAM,MAAA;AACnB;;"}
+{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\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 ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\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                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\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":["useFlattenedData","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","setInputValueByRef","findByValue","sanitizeItem","i","getActiveDescendant"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"useListbox.js","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\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 ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\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                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\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":["i"],"mappings":"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"}
+{"version":3,"file":"useListbox.js","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\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 ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\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                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\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":["i"],"mappings":"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"}

package/dist/components/Listbox/useMultiListbox.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const nanoid = require("nanoid");
 const React = require("react");
 const useMergedRef = require("../../hooks/useMergedRef.cjs");
-const Localization = require("../Provider/Localization.cjs");
 const useTypeahead = require("./useTypeahead.cjs");
 const util = require("./util.cjs");
+const Localization = require("../Provider/Localization.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/components/Listbox/useMultiListbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMultiListbox.cjs","sources":["../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.some(val => val === String(option.value));\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (allOptionsSelected) {\n                        newInputValue = '';\n                    } else {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    }\n                } else if (optionAlreadySelected) {\n                    newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                } else {\n                    newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (data[index] && !data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index?: number): void => {\n        const charKey = 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                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index === undefined ? 0 : index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useLocalization","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","getSelectedIndexesFromValue","setInputValueByRef","option","index","findByValue","getActiveDescendant"],"mappings":"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"}
+{"version":3,"file":"useMultiListbox.cjs","sources":["../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useLocalization } from '@/components';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.some(val => val === String(option.value));\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (allOptionsSelected) {\n                        newInputValue = '';\n                    } else {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    }\n                } else if (optionAlreadySelected) {\n                    newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                } else {\n                    newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (data[index] && !data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index?: number): void => {\n        const charKey = 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                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index === undefined ? 0 : index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useLocalization","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","getSelectedIndexesFromValue","setInputValueByRef","option","index","findByValue","getActiveDescendant"],"mappings":"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"}

package/dist/components/Listbox/useMultiListbox.js

@@ -1,9 +1,9 @@
 import { nanoid } from "nanoid";
 import * as React from "react";
 import { useMergedRef } from "../../hooks/useMergedRef.js";
-import { useLocalization } from "../Provider/Localization.js";
 import { useTypeahead } from "./useTypeahead.js";
 import { getIndexFromValue, getSelectedIndexesFromValue, setInputValueByRef, getActiveDescendant, findByValue } from "./util.js";
+import { useLocalization } from "../Provider/Localization.js";
 const useMultiListbox = ({
   data: externalData = [],
   defaultValue,

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

@@ -1 +1 @@
-{"version":3,"file":"useMultiListbox.js","sources":["../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.some(val => val === String(option.value));\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (allOptionsSelected) {\n                        newInputValue = '';\n                    } else {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    }\n                } else if (optionAlreadySelected) {\n                    newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                } else {\n                    newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (data[index] && !data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index?: number): void => {\n        const charKey = 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                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index === undefined ? 0 : index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["option","index"],"mappings":"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"}
+{"version":3,"file":"useMultiListbox.js","sources":["../../../src/components/Listbox/useMultiListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useLocalization } from '@/components';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps, ScrollableListItem, ScrollableListItemValue } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, getSelectedIndexesFromValue, findByValue, getActiveDescendant } from './util';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useMultiListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue: _,\n        id: nativeId,\n        name,\n        onClick,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const { texts } = useLocalization();\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const data = React.useMemo(() => {\n        return [{ text: texts.listbox.allOption, value: '#ALL-OPTIONS#' }, ...externalData];\n    }, [externalData]);\n    const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);\n    const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n    const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));\n\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByRef(inputRef.current, defaultValue.toString());\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const selectableItemsCount = data.filter(item => !item.disabled).length - 1;\n\n        if (selectableItemsCount === selectedIndexes.length) {\n            setAllOptionsSelected(true);\n        } else {\n            setAllOptionsSelected(false);\n        }\n    }, [selectedIndexes, data]);\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                let newInputValue: ScrollableListItemValue = '';\n                const currentInputValue = inputRef.current?.value;\n                const currentValuesArray = currentInputValue?.split(',') || [];\n                const optionAlreadySelected = currentValuesArray.some(val => val === String(option.value));\n\n                // Handling the select_all option\n                if (option.value === '#ALL-OPTIONS#') {\n                    if (allOptionsSelected) {\n                        newInputValue = '';\n                    } else {\n                        newInputValue = data\n                            .filter((option, index) => index !== 0 && !option.disabled)\n                            .map(option => option.value)\n                            .join(',');\n                    }\n                } else if (optionAlreadySelected) {\n                    newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');\n                } else {\n                    newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;\n                }\n\n                setInputValueByRef(inputRef.current, newInputValue);\n            }\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n\n        if (data[index] && !data[index].disabled) {\n            setCurrentIndex(index);\n            setInputValueByIndex(index);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>, index?: number): void => {\n        const charKey = 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                setCurrentIndex(nextIndex);\n            }\n            return;\n        }\n\n        switch (event.key) {\n            case ' ': {\n                event.preventDefault();\n                setInputValueByIndex(index);\n                break;\n            }\n\n            case 'Enter': {\n                setInputValueByIndex(index);\n                break;\n            }\n\n            default:\n        }\n        setCurrentIndex(index === undefined ? 0 : index);\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));\n\n        if (onChange) {\n            const detail: ScrollableListItem[] = [];\n            const valuesArray = event.target.value.split(',');\n\n            valuesArray.forEach(val => {\n                const item = findByValue(data, val);\n                if (item) {\n                    detail.push(item);\n                }\n            });\n            (event as any).detail = detail;\n\n            onChange(event);\n        }\n    };\n\n    const list = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        'aria-multiselectable': true,\n        data,\n        disabled,\n        id,\n        onChange: () => null,\n        onClick: handleListboxClick,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: false,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n        selectedIndexes,\n        multiselect: true,\n        allOptionsSelected,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["option","index"],"mappings":"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"}

package/dist/components/Listbox/useTypeahead.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTypeahead.cjs","sources":["../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTimer } from '../../utils/hooks/useTimer';\n\nimport type { ScrollableListItem } from './ScrollableList';\nimport { findNextIndexByValue } from './util';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>(undefined);\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":["React","useTimer","findNextIndexByValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,eAAe,CAAC,EAAE,MAAM,mBAAoD;AACrF,QAAM,iBAAiBA,iBAAM,OAA2B,MAAS;AACjE,QAAM,sBAAsBC,kBAAS,KAAM,MAAM;AAC7C,mBAAe,UAAU;AAAA,EAC7B,CAAC;AAED,QAAM,eAAe,CAAC,YAA4B;AAC9C,UAAM,SAAS,eAAe,UAAU,eAAe,UAAU,UAAU,SAAS,YAAA;AACpF,UAAM,YAAYC,KAAAA,qBAAqB,MAAM,OAAO,YAAY;AAEhE,wBAAoB,MAAA;AACpB,mBAAe,UAAU;AAEzB,WAAO;AAAA,EACX;AAEA,SAAO,EAAE,aAAA;AACb;;"}
+{"version":3,"file":"useTypeahead.cjs","sources":["../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTimer } from '@/utils/hooks/useTimer';\n\nimport type { ScrollableListItem } from './ScrollableList';\nimport { findNextIndexByValue } from './util';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>(undefined);\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":["React","useTimer","findNextIndexByValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,eAAe,CAAC,EAAE,MAAM,mBAAoD;AACrF,QAAM,iBAAiBA,iBAAM,OAA2B,MAAS;AACjE,QAAM,sBAAsBC,kBAAS,KAAM,MAAM;AAC7C,mBAAe,UAAU;AAAA,EAC7B,CAAC;AAED,QAAM,eAAe,CAAC,YAA4B;AAC9C,UAAM,SAAS,eAAe,UAAU,eAAe,UAAU,UAAU,SAAS,YAAA;AACpF,UAAM,YAAYC,KAAAA,qBAAqB,MAAM,OAAO,YAAY;AAEhE,wBAAoB,MAAA;AACpB,mBAAe,UAAU;AAEzB,WAAO;AAAA,EACX;AAEA,SAAO,EAAE,aAAA;AACb;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useTypeahead.js","sources":["../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTimer } from '../../utils/hooks/useTimer';\n\nimport type { ScrollableListItem } from './ScrollableList';\nimport { findNextIndexByValue } from './util';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>(undefined);\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":[],"mappings":";;;AAgBO,MAAM,eAAe,CAAC,EAAE,MAAM,mBAAoD;AACrF,QAAM,iBAAiB,MAAM,OAA2B,MAAS;AACjE,QAAM,sBAAsB,SAAS,KAAM,MAAM;AAC7C,mBAAe,UAAU;AAAA,EAC7B,CAAC;AAED,QAAM,eAAe,CAAC,YAA4B;AAC9C,UAAM,SAAS,eAAe,UAAU,eAAe,UAAU,UAAU,SAAS,YAAA;AACpF,UAAM,YAAY,qBAAqB,MAAM,OAAO,YAAY;AAEhE,wBAAoB,MAAA;AACpB,mBAAe,UAAU;AAEzB,WAAO;AAAA,EACX;AAEA,SAAO,EAAE,aAAA;AACb;"}
+{"version":3,"file":"useTypeahead.js","sources":["../../../src/components/Listbox/useTypeahead.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTimer } from '@/utils/hooks/useTimer';\n\nimport type { ScrollableListItem } from './ScrollableList';\nimport { findNextIndexByValue } from './util';\n\ntype useTypeahead = {\n    getNextIndex: (key: string) => number;\n};\n\ntype useTypeaheadProps = {\n    data: ScrollableListItem[];\n    currentIndex: number | undefined;\n};\n\nexport const useTypeahead = ({ data, currentIndex }: useTypeaheadProps): useTypeahead => {\n    const typeaheadQuery = React.useRef<string | undefined>(undefined);\n    const typeaheadQueryTimer = useTimer(1000, () => {\n        typeaheadQuery.current = undefined;\n    });\n\n    const getNextIndex = (charKey: string): number => {\n        const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();\n        const nextIndex = findNextIndexByValue(data, query, currentIndex);\n\n        typeaheadQueryTimer.start();\n        typeaheadQuery.current = query;\n\n        return nextIndex;\n    };\n\n    return { getNextIndex };\n};\n"],"names":[],"mappings":";;;AAgBO,MAAM,eAAe,CAAC,EAAE,MAAM,mBAAoD;AACrF,QAAM,iBAAiB,MAAM,OAA2B,MAAS;AACjE,QAAM,sBAAsB,SAAS,KAAM,MAAM;AAC7C,mBAAe,UAAU;AAAA,EAC7B,CAAC;AAED,QAAM,eAAe,CAAC,YAA4B;AAC9C,UAAM,SAAS,eAAe,UAAU,eAAe,UAAU,UAAU,SAAS,YAAA;AACpF,UAAM,YAAY,qBAAqB,MAAM,OAAO,YAAY;AAEhE,wBAAoB,MAAA;AACpB,mBAAe,UAAU;AAEzB,WAAO;AAAA,EACX;AAEA,SAAO,EAAE,aAAA;AACb;"}