@simplybusiness/mobius 5.8.0 → 5.9.0

package/dist/esm/components/Combobox/Combobox.js

@@ -1,36 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
-import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { forwardRef, useId, useRef, useState } from "react";
+import { useOnUnmount } from "../../hooks";
 import { TextField } from "../TextField";
+import { VisuallyHidden } from "../VisuallyHidden";
 import { Listbox } from "./Listbox"; // Import Listbox component
 import { useComboboxHighlight } from "./useComboboxHighlight";
-import { filterOptions, getOptionValue, isOptionGroup } from "./utils";
+import { useComboboxOptions } from "./useComboboxOptions";
+import { getOptionValue, isOptionGroup } from "./utils";
 export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { defaultValue, options, asyncOptions, onSelected, className, placeholder, icon } = props;
+    const { defaultValue, options, asyncOptions, delay, minLength, onSelected, className, placeholder, icon, ...otherProps } = props;
     const fallbackRef = useRef(null);
     const [inputValue, setInputValue] = useState(defaultValue || "");
     const [isOpen, setIsOpen] = useState(false);
-    const [filteredOptions, setFilteredOptions] = useState([]);
+    const { filteredOptions, isLoading } = useComboboxOptions({
+        options,
+        asyncOptions,
+        inputValue,
+        delay,
+        minLength
+    });
     const { highlightedIndex, highlightedGroupIndex, highlightNextOption, highlightPreviousOption, highlightFirstOption, highlightLastOption, clearHighlight } = useComboboxHighlight(filteredOptions);
     const inputRef = ref || fallbackRef;
     const listboxId = useId();
+    const statusId = useId();
     const blurTimeoutRef = useRef(null);
-    useEffect(()=>{
-        const fetchOptions = async ()=>{
-            if (asyncOptions) {
-                const result = await asyncOptions(inputValue);
-                setFilteredOptions(result);
-            } else {
-                setFilteredOptions(filterOptions(options, inputValue));
-            }
-        };
-        fetchOptions();
-    }, [
-        inputValue,
-        options,
-        asyncOptions
-    ]);
+    const showListbox = isOpen && filteredOptions.length > 0;
     const handleFocus = ()=>{
+        if (filteredOptions.length === 0) return;
         if (blurTimeoutRef.current) {
             clearTimeout(blurTimeoutRef.current);
             blurTimeoutRef.current = null;
@@ -42,6 +39,11 @@ export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
             setIsOpen(false);
         }, 150);
     };
+    useOnUnmount(()=>{
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+    });
     const handleInputChange = (e)=>{
         const newValue = e.target.value;
         setInputValue(newValue);
@@ -53,7 +55,7 @@ export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
         if (!value) return;
         setIsOpen(false);
         setInputValue(value);
-        onSelected === null || onSelected === void 0 ? void 0 : onSelected(value);
+        onSelected === null || onSelected === void 0 ? void 0 : onSelected(option);
     };
     function getHighlightedOption() {
         if (highlightedIndex === -1) return undefined;
@@ -100,12 +102,23 @@ export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
         }
     };
     const classes = classNames("mobius mobius-combobox", {
-        expanded: isOpen
+        "mobius-combobox--is-expanded": isOpen,
+        "mobius-combobox--is-loading": isLoading
     }, className);
     return /*#__PURE__*/ _jsxs("div", {
+        "data-testid": "mobius-combobox__wrapper",
         className: classes,
         children: [
+            isLoading && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                role: "status",
+                "aria-live": "polite",
+                id: statusId,
+                elementType: "div",
+                className: "mobius-combobox__status",
+                children: "Loading options"
+            }),
             /*#__PURE__*/ _jsx(TextField, {
+                ...otherProps,
                 className: "mobius-combobox__input",
                 role: "combobox",
                 value: inputValue,
@@ -115,6 +128,7 @@ export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
                 onKeyDown: handleKeyDown,
                 onChange: handleInputChange,
                 autoComplete: "off",
+                "aria-describedby": isLoading ? statusId : undefined,
                 "aria-autocomplete": "list",
                 "aria-haspopup": "listbox",
                 "aria-controls": listboxId,
@@ -123,13 +137,12 @@ export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
                 prefixInside: icon,
                 ref: inputRef
             }),
-            isOpen && /*#__PURE__*/ _jsx(Listbox, {
+            showListbox && /*#__PURE__*/ _jsx(Listbox, {
                 id: listboxId,
                 options: filteredOptions,
                 highlightedIndex: highlightedIndex,
                 highlightedGroupIndex: highlightedGroupIndex,
-                onOptionSelect: handleOptionSelect,
-                expanded: isOpen
+                onOptionSelect: handleOptionSelect
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ForwardedRefComponent } from \"../../types\";\nimport { TextField } from \"../TextField\";\nimport { Listbox } from \"./Listbox\"; // Import Listbox component\nimport type {\n  ComboboxElementType,\n  ComboboxOption,\n  ComboboxOptions,\n  ComboboxProps,\n  ComboboxRef,\n} from \"./types\";\nimport { useComboboxHighlight } from \"./useComboboxHighlight\";\nimport { filterOptions, getOptionValue, isOptionGroup } from \"./utils\";\n\nexport const Combobox: ForwardedRefComponent<\n  ComboboxProps,\n  ComboboxElementType\n> = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {\n  const {\n    defaultValue,\n    options,\n    asyncOptions,\n    onSelected,\n    className,\n    placeholder,\n    icon,\n  } = props;\n\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const [inputValue, setInputValue] = useState(defaultValue || \"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [filteredOptions, setFilteredOptions] = useState<ComboboxOptions>([]);\n  const {\n    highlightedIndex,\n    highlightedGroupIndex,\n    highlightNextOption,\n    highlightPreviousOption,\n    highlightFirstOption,\n    highlightLastOption,\n    clearHighlight,\n  } = useComboboxHighlight(filteredOptions);\n\n  const inputRef = ref || fallbackRef;\n  const listboxId = useId();\n  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    const fetchOptions = async () => {\n      if (asyncOptions) {\n        const result = await asyncOptions(inputValue);\n        setFilteredOptions(result);\n      } else {\n        setFilteredOptions(filterOptions(options, inputValue));\n      }\n    };\n\n    fetchOptions();\n  }, [inputValue, options, asyncOptions]);\n\n  const handleFocus = () => {\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current);\n      blurTimeoutRef.current = null;\n    }\n    setIsOpen(true);\n  };\n\n  const handleBlur = () => {\n    blurTimeoutRef.current = setTimeout(() => {\n      setIsOpen(false);\n    }, 150);\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInputValue(newValue);\n    setIsOpen(true);\n    clearHighlight();\n  };\n\n  const handleOptionSelect = (option: ComboboxOption) => {\n    const value = getOptionValue(option);\n    if (!value) return;\n    setIsOpen(false);\n    setInputValue(value);\n    onSelected?.(value);\n  };\n\n  function getHighlightedOption() {\n    if (highlightedIndex === -1) return undefined;\n\n    if (isOptionGroup(filteredOptions)) {\n      const group = filteredOptions[highlightedGroupIndex];\n      return group?.options[highlightedIndex];\n    }\n\n    return filteredOptions[highlightedIndex];\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightNextOption();\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightPreviousOption();\n        break;\n      case \"Home\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightFirstOption();\n        break;\n      case \"End\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightLastOption();\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (isOpen) {\n          handleOptionSelect(getHighlightedOption()!);\n        }\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        setIsOpen(false);\n        clearHighlight();\n        break;\n      default:\n      // Do nothing\n    }\n  };\n\n  const classes = classNames(\n    \"mobius mobius-combobox\",\n    { expanded: isOpen },\n    className,\n  );\n\n  return (\n    <div className={classes}>\n      <TextField\n        className=\"mobius-combobox__input\"\n        role=\"combobox\"\n        value={inputValue}\n        placeholder={placeholder}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onChange={handleInputChange}\n        autoComplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={isOpen}\n        aria-activedescendant={\n          highlightedIndex === -1\n            ? undefined\n            : `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`\n        }\n        prefixInside={icon}\n        ref={inputRef}\n      />\n      {isOpen && (\n        <Listbox\n          id={listboxId}\n          options={filteredOptions}\n          highlightedIndex={highlightedIndex}\n          highlightedGroupIndex={highlightedGroupIndex}\n          onOptionSelect={handleOptionSelect}\n          expanded={isOpen}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["classNames","forwardRef","useEffect","useId","useRef","useState","TextField","Listbox","useComboboxHighlight","filterOptions","getOptionValue","isOptionGroup","Combobox","props","ref","defaultValue","options","asyncOptions","onSelected","className","placeholder","icon","fallbackRef","inputValue","setInputValue","isOpen","setIsOpen","filteredOptions","setFilteredOptions","highlightedIndex","highlightedGroupIndex","highlightNextOption","highlightPreviousOption","highlightFirstOption","highlightLastOption","clearHighlight","inputRef","listboxId","blurTimeoutRef","fetchOptions","result","handleFocus","current","clearTimeout","handleBlur","setTimeout","handleInputChange","e","newValue","target","value","handleOptionSelect","option","getHighlightedOption","undefined","group","handleKeyDown","key","preventDefault","classes","expanded","div","role","onFocus","onBlur","onKeyDown","onChange","autoComplete","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","prefixInside","id","onOptionSelect"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { forwardRef, useId, useRef, useState } from \"react\";\nimport { useOnUnmount } from \"../../hooks\";\nimport type { ForwardedRefComponent } from \"../../types\";\nimport { TextField } from \"../TextField\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { Listbox } from \"./Listbox\"; // Import Listbox component\nimport type {\n  ComboboxElementType,\n  ComboboxOption,\n  ComboboxProps,\n  ComboboxRef,\n} from \"./types\";\nimport { useComboboxHighlight } from \"./useComboboxHighlight\";\nimport { useComboboxOptions } from \"./useComboboxOptions\";\nimport { getOptionValue, isOptionGroup } from \"./utils\";\n\nexport const Combobox: ForwardedRefComponent<\n  ComboboxProps,\n  ComboboxElementType\n> = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {\n  const {\n    defaultValue,\n    options,\n    asyncOptions,\n    delay,\n    minLength,\n    onSelected,\n    className,\n    placeholder,\n    icon,\n    ...otherProps\n  } = props;\n\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const [inputValue, setInputValue] = useState(defaultValue || \"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const { filteredOptions, isLoading } = useComboboxOptions({\n    options,\n    asyncOptions,\n    inputValue,\n    delay,\n    minLength,\n  });\n  const {\n    highlightedIndex,\n    highlightedGroupIndex,\n    highlightNextOption,\n    highlightPreviousOption,\n    highlightFirstOption,\n    highlightLastOption,\n    clearHighlight,\n  } = useComboboxHighlight(filteredOptions);\n\n  const inputRef = ref || fallbackRef;\n  const listboxId = useId();\n  const statusId = useId();\n  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const showListbox = isOpen && filteredOptions.length > 0;\n\n  const handleFocus = () => {\n    if (filteredOptions.length === 0) return;\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current);\n      blurTimeoutRef.current = null;\n    }\n    setIsOpen(true);\n  };\n\n  const handleBlur = () => {\n    blurTimeoutRef.current = setTimeout(() => {\n      setIsOpen(false);\n    }, 150);\n  };\n\n  useOnUnmount(() => {\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current);\n    }\n  });\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInputValue(newValue);\n    setIsOpen(true);\n    clearHighlight();\n  };\n\n  const handleOptionSelect = (option: ComboboxOption) => {\n    const value = getOptionValue(option);\n    if (!value) return;\n    setIsOpen(false);\n    setInputValue(value);\n    onSelected?.(option);\n  };\n\n  function getHighlightedOption() {\n    if (highlightedIndex === -1) return undefined;\n\n    if (isOptionGroup(filteredOptions)) {\n      const group = filteredOptions[highlightedGroupIndex];\n      return group?.options[highlightedIndex];\n    }\n\n    return filteredOptions[highlightedIndex];\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightNextOption();\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightPreviousOption();\n        break;\n      case \"Home\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightFirstOption();\n        break;\n      case \"End\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightLastOption();\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (isOpen) {\n          handleOptionSelect(getHighlightedOption()!);\n        }\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        setIsOpen(false);\n        clearHighlight();\n        break;\n      default:\n      // Do nothing\n    }\n  };\n\n  const classes = classNames(\n    \"mobius mobius-combobox\",\n    {\n      \"mobius-combobox--is-expanded\": isOpen,\n      \"mobius-combobox--is-loading\": isLoading,\n    },\n    className,\n  );\n\n  return (\n    <div data-testid=\"mobius-combobox__wrapper\" className={classes}>\n      {isLoading && (\n        <VisuallyHidden\n          role=\"status\"\n          aria-live=\"polite\"\n          id={statusId}\n          elementType=\"div\"\n          className=\"mobius-combobox__status\"\n        >\n          Loading options\n        </VisuallyHidden>\n      )}\n      <TextField\n        {...otherProps}\n        className=\"mobius-combobox__input\"\n        role=\"combobox\"\n        value={inputValue}\n        placeholder={placeholder}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onChange={handleInputChange}\n        autoComplete=\"off\"\n        aria-describedby={isLoading ? statusId : undefined}\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={isOpen}\n        aria-activedescendant={\n          highlightedIndex === -1\n            ? undefined\n            : `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`\n        }\n        prefixInside={icon}\n        ref={inputRef}\n      />\n      {showListbox && (\n        <Listbox\n          id={listboxId}\n          options={filteredOptions}\n          highlightedIndex={highlightedIndex}\n          highlightedGroupIndex={highlightedGroupIndex}\n          onOptionSelect={handleOptionSelect}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["classNames","forwardRef","useId","useRef","useState","useOnUnmount","TextField","VisuallyHidden","Listbox","useComboboxHighlight","useComboboxOptions","getOptionValue","isOptionGroup","Combobox","props","ref","defaultValue","options","asyncOptions","delay","minLength","onSelected","className","placeholder","icon","otherProps","fallbackRef","inputValue","setInputValue","isOpen","setIsOpen","filteredOptions","isLoading","highlightedIndex","highlightedGroupIndex","highlightNextOption","highlightPreviousOption","highlightFirstOption","highlightLastOption","clearHighlight","inputRef","listboxId","statusId","blurTimeoutRef","showListbox","length","handleFocus","current","clearTimeout","handleBlur","setTimeout","handleInputChange","e","newValue","target","value","handleOptionSelect","option","getHighlightedOption","undefined","group","handleKeyDown","key","preventDefault","classes","div","data-testid","role","aria-live","id","elementType","onFocus","onBlur","onKeyDown","onChange","autoComplete","aria-describedby","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","prefixInside","onOptionSelect"],"mappings":"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"}

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

@@ -2,10 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import { Option } from "./Option";
 import { isOptionGroup } from "./utils";
-export const Listbox = ({ id, options, highlightedIndex, highlightedGroupIndex, onOptionSelect, expanded = false })=>{
-    const classes = classNames("mobius-combobox__list", {
-        expanded
-    });
+export const Listbox = ({ id, options, highlightedIndex, highlightedGroupIndex, onOptionSelect })=>{
+    const classes = classNames("mobius-combobox__list");
     return /*#__PURE__*/ _jsx("div", {
         role: "listbox",
         id: id,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Combobox/Listbox.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { Option } from \"./Option\";\nimport type { ComboboxOption, ComboboxOptions } from \"./types\";\nimport { isOptionGroup } from \"./utils\";\n\nexport type ListboxProps = {\n  id: string;\n  options: ComboboxOptions;\n  highlightedIndex: number;\n  highlightedGroupIndex: number;\n  onOptionSelect: (option: ComboboxOption) => void;\n  expanded?: boolean;\n};\n\nexport const Listbox = ({\n  id,\n  options,\n  highlightedIndex,\n  highlightedGroupIndex,\n  onOptionSelect,\n  expanded = false,\n}: ListboxProps) => {\n  const classes = classNames(\"mobius-combobox__list\", {\n    expanded,\n  });\n\n  return (\n    <div role=\"listbox\" id={id} className={classes}>\n      {isOptionGroup(options)\n        ? options.map((option, groupIndex) => (\n            <ul\n              role=\"group\"\n              key={option.heading}\n              aria-labelledby={`${id}-group-${groupIndex}`}\n              className=\"mobius-combobox__group\"\n            >\n              <li\n                role=\"presentation\"\n                id={`${id}-group-${groupIndex}`}\n                className=\"mobius-combobox__group-label\"\n              >\n                {option.heading}\n              </li>\n              {option.options.map((groupOption, index) => (\n                <Option\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={`${id}-option-${groupIndex}-${index}`}\n                  option={groupOption}\n                  index={index}\n                  groupIndex={groupIndex}\n                  isHighlighted={\n                    highlightedIndex === index &&\n                    highlightedGroupIndex === groupIndex\n                  }\n                  onOptionSelect={onOptionSelect}\n                  id={id}\n                />\n              ))}\n            </ul>\n          ))\n        : options.map((option, index) => (\n            <Option\n              // eslint-disable-next-line react/no-array-index-key\n              key={index}\n              option={option}\n              index={index}\n              isHighlighted={highlightedIndex === index}\n              onOptionSelect={onOptionSelect}\n              id={id}\n            />\n          ))}\n    </div>\n  );\n};\n"],"names":["classNames","Option","isOptionGroup","Listbox","id","options","highlightedIndex","highlightedGroupIndex","onOptionSelect","expanded","classes","div","role","className","map","option","groupIndex","ul","aria-labelledby","li","heading","groupOption","index","isHighlighted"],"mappings":";AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,aAAa,QAAQ,UAAU;AAWxC,OAAO,MAAMC,UAAU,CAAC,EACtBC,EAAE,EACFC,OAAO,EACPC,gBAAgB,EAChBC,qBAAqB,EACrBC,cAAc,EACdC,WAAW,KAAK,EACH;IACb,MAAMC,UAAUV,WAAW,yBAAyB;QAClDS;IACF;IAEA,qBACE,KAACE;QAAIC,MAAK;QAAUR,IAAIA;QAAIS,WAAWH;kBACpCR,cAAcG,WACXA,QAAQS,GAAG,CAAC,CAACC,QAAQC,2BACnB,MAACC;gBACCL,MAAK;gBAELM,mBAAiB,GAAGd,GAAG,OAAO,EAAEY,YAAY;gBAC5CH,WAAU;;kCAEV,KAACM;wBACCP,MAAK;wBACLR,IAAI,GAAGA,GAAG,OAAO,EAAEY,YAAY;wBAC/BH,WAAU;kCAETE,OAAOK,OAAO;;oBAEhBL,OAAOV,OAAO,CAACS,GAAG,CAAC,CAACO,aAAaC,sBAChC,KAACrB;4BAGCc,QAAQM;4BACRC,OAAOA;4BACPN,YAAYA;4BACZO,eACEjB,qBAAqBgB,SACrBf,0BAA0BS;4BAE5BR,gBAAgBA;4BAChBJ,IAAIA;2BATC,GAAGA,GAAG,QAAQ,EAAEY,WAAW,CAAC,EAAEM,OAAO;;eAdzCP,OAAOK,OAAO,KA4BvBf,QAAQS,GAAG,CAAC,CAACC,QAAQO,sBACnB,KAACrB;gBAGCc,QAAQA;gBACRO,OAAOA;gBACPC,eAAejB,qBAAqBgB;gBACpCd,gBAAgBA;gBAChBJ,IAAIA;eALCkB;;AAUnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Combobox/Listbox.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { Option } from \"./Option\";\nimport type { ComboboxOption, ComboboxOptions } from \"./types\";\nimport { isOptionGroup } from \"./utils\";\n\nexport type ListboxProps = {\n  id: string;\n  options: ComboboxOptions;\n  highlightedIndex: number;\n  highlightedGroupIndex: number;\n  onOptionSelect: (option: ComboboxOption) => void;\n};\n\nexport const Listbox = ({\n  id,\n  options,\n  highlightedIndex,\n  highlightedGroupIndex,\n  onOptionSelect,\n}: ListboxProps) => {\n  const classes = classNames(\"mobius-combobox__list\");\n\n  return (\n    <div role=\"listbox\" id={id} className={classes}>\n      {isOptionGroup(options)\n        ? options.map((option, groupIndex) => (\n            <ul\n              role=\"group\"\n              key={option.heading}\n              aria-labelledby={`${id}-group-${groupIndex}`}\n              className=\"mobius-combobox__group\"\n            >\n              <li\n                role=\"presentation\"\n                id={`${id}-group-${groupIndex}`}\n                className=\"mobius-combobox__group-label\"\n              >\n                {option.heading}\n              </li>\n              {option.options.map((groupOption, index) => (\n                <Option\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={`${id}-option-${groupIndex}-${index}`}\n                  option={groupOption}\n                  index={index}\n                  groupIndex={groupIndex}\n                  isHighlighted={\n                    highlightedIndex === index &&\n                    highlightedGroupIndex === groupIndex\n                  }\n                  onOptionSelect={onOptionSelect}\n                  id={id}\n                />\n              ))}\n            </ul>\n          ))\n        : options.map((option, index) => (\n            <Option\n              // eslint-disable-next-line react/no-array-index-key\n              key={index}\n              option={option}\n              index={index}\n              isHighlighted={highlightedIndex === index}\n              onOptionSelect={onOptionSelect}\n              id={id}\n            />\n          ))}\n    </div>\n  );\n};\n"],"names":["classNames","Option","isOptionGroup","Listbox","id","options","highlightedIndex","highlightedGroupIndex","onOptionSelect","classes","div","role","className","map","option","groupIndex","ul","aria-labelledby","li","heading","groupOption","index","isHighlighted"],"mappings":";AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,aAAa,QAAQ,UAAU;AAUxC,OAAO,MAAMC,UAAU,CAAC,EACtBC,EAAE,EACFC,OAAO,EACPC,gBAAgB,EAChBC,qBAAqB,EACrBC,cAAc,EACD;IACb,MAAMC,UAAUT,WAAW;IAE3B,qBACE,KAACU;QAAIC,MAAK;QAAUP,IAAIA;QAAIQ,WAAWH;kBACpCP,cAAcG,WACXA,QAAQQ,GAAG,CAAC,CAACC,QAAQC,2BACnB,MAACC;gBACCL,MAAK;gBAELM,mBAAiB,GAAGb,GAAG,OAAO,EAAEW,YAAY;gBAC5CH,WAAU;;kCAEV,KAACM;wBACCP,MAAK;wBACLP,IAAI,GAAGA,GAAG,OAAO,EAAEW,YAAY;wBAC/BH,WAAU;kCAETE,OAAOK,OAAO;;oBAEhBL,OAAOT,OAAO,CAACQ,GAAG,CAAC,CAACO,aAAaC,sBAChC,KAACpB;4BAGCa,QAAQM;4BACRC,OAAOA;4BACPN,YAAYA;4BACZO,eACEhB,qBAAqBe,SACrBd,0BAA0BQ;4BAE5BP,gBAAgBA;4BAChBJ,IAAIA;2BATC,GAAGA,GAAG,QAAQ,EAAEW,WAAW,CAAC,EAAEM,OAAO;;eAdzCP,OAAOK,OAAO,KA4BvBd,QAAQQ,GAAG,CAAC,CAACC,QAAQO,sBACnB,KAACpB;gBAGCa,QAAQA;gBACRO,OAAOA;gBACPC,eAAehB,qBAAqBe;gBACpCb,gBAAgBA;gBAChBJ,IAAIA;eALCiB;;AAUnB,EAAE"}

package/dist/esm/components/Combobox/fixtures.js

@@ -222,7 +222,7 @@ export const FRUITS_OBJECTS = [
         value: "watermelon"
     }
 ];
-export const FRUITS_GROUPS = [
+export const FRUITS_STRING_GROUPS = [
     {
         heading: "A-L",
         options: [
@@ -278,6 +278,194 @@ export const FRUITS_GROUPS = [
         ]
     }
 ];
+export const FRUITS_OBJECT_GROUPS = [
+    {
+        heading: "A-L",
+        options: [
+            {
+                label: "Apple",
+                value: "apple"
+            },
+            {
+                label: "Apricot",
+                value: "apricot"
+            },
+            {
+                label: "Avocado",
+                value: "avocado"
+            },
+            {
+                label: "Banana",
+                value: "banana"
+            },
+            {
+                label: "Blackberry",
+                value: "blackberry"
+            },
+            {
+                label: "Blueberry",
+                value: "blueberry"
+            },
+            {
+                label: "Cantaloupe",
+                value: "cantaloupe"
+            },
+            {
+                label: "Cherry",
+                value: "cherry"
+            },
+            {
+                label: "Clementine",
+                value: "clementine"
+            },
+            {
+                label: "Coconut",
+                value: "coconut"
+            },
+            {
+                label: "Cranberry",
+                value: "cranberry"
+            },
+            {
+                label: "Date",
+                value: "date"
+            },
+            {
+                label: "Dragonfruit",
+                value: "dragonfruit"
+            },
+            {
+                label: "Durian",
+                value: "durian"
+            },
+            {
+                label: "Elderberry",
+                value: "elderberry"
+            },
+            {
+                label: "Fig",
+                value: "fig"
+            },
+            {
+                label: "Grape",
+                value: "grape"
+            },
+            {
+                label: "Grapefruit",
+                value: "grapefruit"
+            },
+            {
+                label: "Guava",
+                value: "guava"
+            },
+            {
+                label: "Honeydew",
+                value: "honeydew"
+            },
+            {
+                label: "Jackfruit",
+                value: "jackfruit"
+            },
+            {
+                label: "Kiwi",
+                value: "kiwi"
+            },
+            {
+                label: "Kumquat",
+                value: "kumquat"
+            },
+            {
+                label: "Lemon",
+                value: "lemon"
+            },
+            {
+                label: "Lime",
+                value: "lime"
+            },
+            {
+                label: "Lychee",
+                value: "lychee"
+            }
+        ]
+    },
+    {
+        heading: "M-Z",
+        options: [
+            {
+                label: "Mango",
+                value: "mango"
+            },
+            {
+                label: "Mulberry",
+                value: "mulberry"
+            },
+            {
+                label: "Nectarine",
+                value: "nectarine"
+            },
+            {
+                label: "Orange",
+                value: "orange"
+            },
+            {
+                label: "Papaya",
+                value: "papaya"
+            },
+            {
+                label: "Passionfruit",
+                value: "passionfruit"
+            },
+            {
+                label: "Peach",
+                value: "peach"
+            },
+            {
+                label: "Pear",
+                value: "pear"
+            },
+            {
+                label: "Persimmon",
+                value: "persimmon"
+            },
+            {
+                label: "Pineapple",
+                value: "pineapple"
+            },
+            {
+                label: "Plum",
+                value: "plum"
+            },
+            {
+                label: "Pomegranate",
+                value: "pomegranate"
+            },
+            {
+                label: "Raspberry",
+                value: "raspberry"
+            },
+            {
+                label: "Redcurrant",
+                value: "redcurrant"
+            },
+            {
+                label: "Starfruit",
+                value: "starfruit"
+            },
+            {
+                label: "Strawberry",
+                value: "strawberry"
+            },
+            {
+                label: "Tangerine",
+                value: "tangerine"
+            },
+            {
+                label: "Watermelon",
+                value: "watermelon"
+            }
+        ]
+    }
+];
 export const US_STATES = [
     "Alabama",
     "Alaska",

package/dist/esm/components/Combobox/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Combobox/fixtures.tsx"],"sourcesContent":["export const FRUITS = [\n  \"Apple\",\n  \"Apricot\",\n  \"Avocado\",\n  \"Banana\",\n  \"Blackberry\",\n  \"Blueberry\",\n  \"Cantaloupe\",\n  \"Cherry\",\n  \"Clementine\",\n  \"Coconut\",\n  \"Cranberry\",\n  \"Date\",\n  \"Dragonfruit\",\n  \"Durian\",\n  \"Elderberry\",\n  \"Fig\",\n  \"Grape\",\n  \"Grapefruit\",\n  \"Guava\",\n  \"Honeydew\",\n  \"Jackfruit\",\n  \"Kiwi\",\n  \"Kumquat\",\n  \"Lemon\",\n  \"Lime\",\n  \"Lychee\",\n  \"Mango\",\n  \"Mulberry\",\n  \"Nectarine\",\n  \"Orange\",\n  \"Papaya\",\n  \"Passionfruit\",\n  \"Peach\",\n  \"Pear\",\n  \"Persimmon\",\n  \"Pineapple\",\n  \"Plum\",\n  \"Pomegranate\",\n  \"Raspberry\",\n  \"Redcurrant\",\n  \"Starfruit\",\n  \"Strawberry\",\n  \"Tangerine\",\n  \"Watermelon\",\n];\n\nexport const FRUITS_OBJECTS = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Apricot\", value: \"apricot\" },\n  { label: \"Avocado\", value: \"avocado\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Blackberry\", value: \"blackberry\" },\n  { label: \"Blueberry\", value: \"blueberry\" },\n  { label: \"Cantaloupe\", value: \"cantaloupe\" },\n  { label: \"Cherry\", value: \"cherry\" },\n  { label: \"Clementine\", value: \"clementine\" },\n  { label: \"Coconut\", value: \"coconut\" },\n  { label: \"Cranberry\", value: \"cranberry\" },\n  { label: \"Date\", value: \"date\" },\n  { label: \"Dragonfruit\", value: \"dragonfruit\" },\n  { label: \"Durian\", value: \"durian\" },\n  { label: \"Elderberry\", value: \"elderberry\" },\n  { label: \"Fig\", value: \"fig\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Grapefruit\", value: \"grapefruit\" },\n  { label: \"Guava\", value: \"guava\" },\n  { label: \"Honeydew\", value: \"honeydew\" },\n  { label: \"Jackfruit\", value: \"jackfruit\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Kumquat\", value: \"kumquat\" },\n  { label: \"Lemon\", value: \"lemon\" },\n  { label: \"Lime\", value: \"lime\" },\n  { label: \"Lychee\", value: \"lychee\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Mulberry\", value: \"mulberry\" },\n  { label: \"Nectarine\", value: \"nectarine\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Papaya\", value: \"papaya\" },\n  { label: \"Passionfruit\", value: \"passionfruit\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n  { label: \"Persimmon\", value: \"persimmon\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Plum\", value: \"plum\" },\n  { label: \"Pomegranate\", value: \"pomegranate\" },\n  { label: \"Raspberry\", value: \"raspberry\" },\n  { label: \"Redcurrant\", value: \"redcurrant\" },\n  { label: \"Starfruit\", value: \"starfruit\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Tangerine\", value: \"tangerine\" },\n  { label: \"Watermelon\", value: \"watermelon\" },\n];\n\nexport const FRUITS_GROUPS = [\n  {\n    heading: \"A-L\",\n    options: [\n      \"Apple\",\n      \"Apricot\",\n      \"Avocado\",\n      \"Banana\",\n      \"Blackberry\",\n      \"Blueberry\",\n      \"Cantaloupe\",\n      \"Cherry\",\n      \"Clementine\",\n      \"Coconut\",\n      \"Cranberry\",\n      \"Date\",\n      \"Dragonfruit\",\n      \"Durian\",\n      \"Elderberry\",\n      \"Fig\",\n      \"Grape\",\n      \"Grapefruit\",\n      \"Guava\",\n      \"Honeydew\",\n      \"Jackfruit\",\n      \"Kiwi\",\n      \"Kumquat\",\n      \"Lemon\",\n      \"Lime\",\n      \"Lychee\",\n    ],\n  },\n  {\n    heading: \"M-Z\",\n    options: [\n      \"Mango\",\n      \"Mulberry\",\n      \"Nectarine\",\n      \"Orange\",\n      \"Papaya\",\n      \"Passionfruit\",\n      \"Peach\",\n      \"Pear\",\n      \"Persimmon\",\n      \"Pineapple\",\n      \"Plum\",\n      \"Pomegranate\",\n      \"Raspberry\",\n      \"Redcurrant\",\n      \"Starfruit\",\n      \"Strawberry\",\n      \"Tangerine\",\n      \"Watermelon\",\n    ],\n  },\n];\n\nexport const US_STATES = [\n  \"Alabama\",\n  \"Alaska\",\n  \"Arizona\",\n  \"Arkansas\",\n  \"California\",\n  \"Colorado\",\n  \"Connecticut\",\n  \"Delaware\",\n  \"District Of Columbia\",\n  \"Florida\",\n  \"Georgia\",\n  \"Hawaii\",\n  \"Idaho\",\n  \"Illinois\",\n  \"Indiana\",\n  \"Iowa\",\n  \"Kansas\",\n  \"Kentucky\",\n  \"Louisiana\",\n  \"Maine\",\n  \"Maryland\",\n  \"Massachusetts\",\n  \"Michigan\",\n  \"Minnesota\",\n  \"Mississippi\",\n  \"Missouri\",\n  \"Montana\",\n  \"Nebraska\",\n  \"Nevada\",\n  \"New Hampshire\",\n  \"New Jersey\",\n  \"New Mexico\",\n  \"New York\",\n  \"North Carolina\",\n  \"North Dakota\",\n  \"Ohio\",\n  \"Oklahoma\",\n  \"Oregon\",\n  \"Pennsylvania\",\n  \"Rhode Island\",\n  \"South Carolina\",\n  \"South Dakota\",\n  \"Tennessee\",\n  \"Texas\",\n  \"Utah\",\n  \"Vermont\",\n  \"Virginia\",\n  \"Washington\",\n  \"West Virginia\",\n  \"Wisconsin\",\n  \"Wyoming\",\n];\n"],"names":["FRUITS","FRUITS_OBJECTS","label","value","FRUITS_GROUPS","heading","options","US_STATES"],"mappings":"AAAA,OAAO,MAAMA,SAAS;IACpB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAAC;AAEF,OAAO,MAAMC,iBAAiB;IAC5B;QAAEC,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAWC,OAAO;IAAU;IACrC;QAAED,OAAO;QAAWC,OAAO;IAAU;IACrC;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAWC,OAAO;IAAU;IACrC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAeC,OAAO;IAAc;IAC7C;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAYC,OAAO;IAAW;IACvC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAWC,OAAO;IAAU;IACrC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAYC,OAAO;IAAW;IACvC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAAgBC,OAAO;IAAe;IAC/C;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAeC,OAAO;IAAc;IAC7C;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAcC,OAAO;IAAa;CAC5C,CAAC;AAEF,OAAO,MAAMC,gBAAgB;IAC3B;QACEC,SAAS;QACTC,SAAS;YACP;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACA;QACED,SAAS;QACTC,SAAS;YACP;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;CACD,CAAC;AAEF,OAAO,MAAMC,YAAY;IACvB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAAC"}
+{"version":3,"sources":["../../../../src/components/Combobox/fixtures.tsx"],"sourcesContent":["export const FRUITS = [\n  \"Apple\",\n  \"Apricot\",\n  \"Avocado\",\n  \"Banana\",\n  \"Blackberry\",\n  \"Blueberry\",\n  \"Cantaloupe\",\n  \"Cherry\",\n  \"Clementine\",\n  \"Coconut\",\n  \"Cranberry\",\n  \"Date\",\n  \"Dragonfruit\",\n  \"Durian\",\n  \"Elderberry\",\n  \"Fig\",\n  \"Grape\",\n  \"Grapefruit\",\n  \"Guava\",\n  \"Honeydew\",\n  \"Jackfruit\",\n  \"Kiwi\",\n  \"Kumquat\",\n  \"Lemon\",\n  \"Lime\",\n  \"Lychee\",\n  \"Mango\",\n  \"Mulberry\",\n  \"Nectarine\",\n  \"Orange\",\n  \"Papaya\",\n  \"Passionfruit\",\n  \"Peach\",\n  \"Pear\",\n  \"Persimmon\",\n  \"Pineapple\",\n  \"Plum\",\n  \"Pomegranate\",\n  \"Raspberry\",\n  \"Redcurrant\",\n  \"Starfruit\",\n  \"Strawberry\",\n  \"Tangerine\",\n  \"Watermelon\",\n];\n\nexport const FRUITS_OBJECTS = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Apricot\", value: \"apricot\" },\n  { label: \"Avocado\", value: \"avocado\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Blackberry\", value: \"blackberry\" },\n  { label: \"Blueberry\", value: \"blueberry\" },\n  { label: \"Cantaloupe\", value: \"cantaloupe\" },\n  { label: \"Cherry\", value: \"cherry\" },\n  { label: \"Clementine\", value: \"clementine\" },\n  { label: \"Coconut\", value: \"coconut\" },\n  { label: \"Cranberry\", value: \"cranberry\" },\n  { label: \"Date\", value: \"date\" },\n  { label: \"Dragonfruit\", value: \"dragonfruit\" },\n  { label: \"Durian\", value: \"durian\" },\n  { label: \"Elderberry\", value: \"elderberry\" },\n  { label: \"Fig\", value: \"fig\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Grapefruit\", value: \"grapefruit\" },\n  { label: \"Guava\", value: \"guava\" },\n  { label: \"Honeydew\", value: \"honeydew\" },\n  { label: \"Jackfruit\", value: \"jackfruit\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Kumquat\", value: \"kumquat\" },\n  { label: \"Lemon\", value: \"lemon\" },\n  { label: \"Lime\", value: \"lime\" },\n  { label: \"Lychee\", value: \"lychee\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Mulberry\", value: \"mulberry\" },\n  { label: \"Nectarine\", value: \"nectarine\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Papaya\", value: \"papaya\" },\n  { label: \"Passionfruit\", value: \"passionfruit\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n  { label: \"Persimmon\", value: \"persimmon\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Plum\", value: \"plum\" },\n  { label: \"Pomegranate\", value: \"pomegranate\" },\n  { label: \"Raspberry\", value: \"raspberry\" },\n  { label: \"Redcurrant\", value: \"redcurrant\" },\n  { label: \"Starfruit\", value: \"starfruit\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Tangerine\", value: \"tangerine\" },\n  { label: \"Watermelon\", value: \"watermelon\" },\n];\n\nexport const FRUITS_STRING_GROUPS = [\n  {\n    heading: \"A-L\",\n    options: [\n      \"Apple\",\n      \"Apricot\",\n      \"Avocado\",\n      \"Banana\",\n      \"Blackberry\",\n      \"Blueberry\",\n      \"Cantaloupe\",\n      \"Cherry\",\n      \"Clementine\",\n      \"Coconut\",\n      \"Cranberry\",\n      \"Date\",\n      \"Dragonfruit\",\n      \"Durian\",\n      \"Elderberry\",\n      \"Fig\",\n      \"Grape\",\n      \"Grapefruit\",\n      \"Guava\",\n      \"Honeydew\",\n      \"Jackfruit\",\n      \"Kiwi\",\n      \"Kumquat\",\n      \"Lemon\",\n      \"Lime\",\n      \"Lychee\",\n    ],\n  },\n  {\n    heading: \"M-Z\",\n    options: [\n      \"Mango\",\n      \"Mulberry\",\n      \"Nectarine\",\n      \"Orange\",\n      \"Papaya\",\n      \"Passionfruit\",\n      \"Peach\",\n      \"Pear\",\n      \"Persimmon\",\n      \"Pineapple\",\n      \"Plum\",\n      \"Pomegranate\",\n      \"Raspberry\",\n      \"Redcurrant\",\n      \"Starfruit\",\n      \"Strawberry\",\n      \"Tangerine\",\n      \"Watermelon\",\n    ],\n  },\n];\n\nexport const FRUITS_OBJECT_GROUPS = [\n  {\n    heading: \"A-L\",\n    options: [\n      { label: \"Apple\", value: \"apple\" },\n      { label: \"Apricot\", value: \"apricot\" },\n      { label: \"Avocado\", value: \"avocado\" },\n      { label: \"Banana\", value: \"banana\" },\n      { label: \"Blackberry\", value: \"blackberry\" },\n      { label: \"Blueberry\", value: \"blueberry\" },\n      { label: \"Cantaloupe\", value: \"cantaloupe\" },\n      { label: \"Cherry\", value: \"cherry\" },\n      { label: \"Clementine\", value: \"clementine\" },\n      { label: \"Coconut\", value: \"coconut\" },\n      { label: \"Cranberry\", value: \"cranberry\" },\n      { label: \"Date\", value: \"date\" },\n      { label: \"Dragonfruit\", value: \"dragonfruit\" },\n      { label: \"Durian\", value: \"durian\" },\n      { label: \"Elderberry\", value: \"elderberry\" },\n      { label: \"Fig\", value: \"fig\" },\n      { label: \"Grape\", value: \"grape\" },\n      { label: \"Grapefruit\", value: \"grapefruit\" },\n      { label: \"Guava\", value: \"guava\" },\n      { label: \"Honeydew\", value: \"honeydew\" },\n      { label: \"Jackfruit\", value: \"jackfruit\" },\n      { label: \"Kiwi\", value: \"kiwi\" },\n      { label: \"Kumquat\", value: \"kumquat\" },\n      { label: \"Lemon\", value: \"lemon\" },\n      { label: \"Lime\", value: \"lime\" },\n      { label: \"Lychee\", value: \"lychee\" },\n    ],\n  },\n  {\n    heading: \"M-Z\",\n    options: [\n      { label: \"Mango\", value: \"mango\" },\n      { label: \"Mulberry\", value: \"mulberry\" },\n      { label: \"Nectarine\", value: \"nectarine\" },\n      { label: \"Orange\", value: \"orange\" },\n      { label: \"Papaya\", value: \"papaya\" },\n      { label: \"Passionfruit\", value: \"passionfruit\" },\n      { label: \"Peach\", value: \"peach\" },\n      { label: \"Pear\", value: \"pear\" },\n      { label: \"Persimmon\", value: \"persimmon\" },\n      { label: \"Pineapple\", value: \"pineapple\" },\n      { label: \"Plum\", value: \"plum\" },\n      { label: \"Pomegranate\", value: \"pomegranate\" },\n      { label: \"Raspberry\", value: \"raspberry\" },\n      { label: \"Redcurrant\", value: \"redcurrant\" },\n      { label: \"Starfruit\", value: \"starfruit\" },\n      { label: \"Strawberry\", value: \"strawberry\" },\n      { label: \"Tangerine\", value: \"tangerine\" },\n      { label: \"Watermelon\", value: \"watermelon\" },\n    ],\n  },\n];\n\nexport const US_STATES = [\n  \"Alabama\",\n  \"Alaska\",\n  \"Arizona\",\n  \"Arkansas\",\n  \"California\",\n  \"Colorado\",\n  \"Connecticut\",\n  \"Delaware\",\n  \"District Of Columbia\",\n  \"Florida\",\n  \"Georgia\",\n  \"Hawaii\",\n  \"Idaho\",\n  \"Illinois\",\n  \"Indiana\",\n  \"Iowa\",\n  \"Kansas\",\n  \"Kentucky\",\n  \"Louisiana\",\n  \"Maine\",\n  \"Maryland\",\n  \"Massachusetts\",\n  \"Michigan\",\n  \"Minnesota\",\n  \"Mississippi\",\n  \"Missouri\",\n  \"Montana\",\n  \"Nebraska\",\n  \"Nevada\",\n  \"New Hampshire\",\n  \"New Jersey\",\n  \"New Mexico\",\n  \"New York\",\n  \"North Carolina\",\n  \"North Dakota\",\n  \"Ohio\",\n  \"Oklahoma\",\n  \"Oregon\",\n  \"Pennsylvania\",\n  \"Rhode Island\",\n  \"South Carolina\",\n  \"South Dakota\",\n  \"Tennessee\",\n  \"Texas\",\n  \"Utah\",\n  \"Vermont\",\n  \"Virginia\",\n  \"Washington\",\n  \"West Virginia\",\n  \"Wisconsin\",\n  \"Wyoming\",\n];\n"],"names":["FRUITS","FRUITS_OBJECTS","label","value","FRUITS_STRING_GROUPS","heading","options","FRUITS_OBJECT_GROUPS","US_STATES"],"mappings":"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"}

package/dist/esm/components/Combobox/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Combobox/types.tsx"],"sourcesContent":["import type { ReactElement, Ref } from \"react\";\nimport type { TextFieldElementType, TextFieldProps } from \"../TextField\";\n\nexport type ComboboxBaseProps = TextFieldProps & {\n  /** An icon to display in TextField (left side) */\n  icon?: ReactElement;\n  /** The default value of the selected option */\n  defaultValue?: string | undefined;\n  /** Callback when the selected option changes */\n  onSelected?: ((value: string) => void) | undefined;\n};\n\nexport type ComboboxSyncProps = ComboboxBaseProps & {\n  /** The list of options to display in the dropdown */\n  options: ComboboxOptions;\n  asyncOptions?: never;\n  delay?: never;\n  minLength?: never;\n};\n\nexport type ComboboxAsyncProps = ComboboxBaseProps & {\n  options?: never;\n  delay?: number;\n  minLength?: number;\n  /** A function that returns a list of options to display in the dropdown */\n  asyncOptions:\n    | ((inputValue: string) => ComboboxOptions)\n    | ((\n        inputValue: string,\n        options?: { signal?: AbortSignal },\n      ) => Promise<ComboboxOptions>);\n};\n\nexport type ComboboxProps = ComboboxAsyncProps | ComboboxSyncProps;\n\nexport type ComboboxOption = string | { label: string; value: string };\n\nexport type ComboboxOptionGroup = {\n  heading: string;\n  options: ComboboxOption[];\n};\n\nexport type ComboboxOptions = ComboboxOption[] | ComboboxOptionGroup[];\n\nexport type ComboboxElementType = TextFieldElementType;\n\nexport type ComboboxRef = Ref<ComboboxElementType>;\n\nexport type ComboboxOptionProps = {\n  option: ComboboxOption;\n  index: number;\n  groupIndex?: number;\n  isHighlighted: boolean;\n  onOptionSelect: (option: ComboboxOption) => void;\n  id: string;\n};\n"],"names":[],"mappings":"AAgDA,WAOE"}
+{"version":3,"sources":["../../../../src/components/Combobox/types.tsx"],"sourcesContent":["import type { ReactElement, Ref } from \"react\";\nimport type { TextFieldElementType, TextFieldProps } from \"../TextField\";\n\nexport type ComboboxBaseProps = TextFieldProps & {\n  /** An icon to display in TextField (left side) */\n  icon?: ReactElement;\n  /** The default value of the selected option */\n  defaultValue?: string | undefined;\n  /** Callback when the selected option changes */\n  onSelected?: ((value: ComboboxOption) => void) | undefined;\n};\n\nexport type ComboboxSyncProps = ComboboxBaseProps & {\n  /** The list of options to display in the dropdown */\n  options: ComboboxOptions;\n  asyncOptions?: never;\n  delay?: never;\n  minLength?: never;\n};\n\nexport type ComboboxAsyncProps = ComboboxBaseProps & {\n  options?: never;\n  delay?: number;\n  minLength?: number;\n  /** A function that returns a list of options to display in the dropdown */\n  asyncOptions:\n    | ((inputValue: string) => ComboboxOptions)\n    | ((\n        inputValue: string,\n        options?: { signal?: AbortSignal },\n      ) => Promise<ComboboxOptions>);\n};\n\nexport type ComboboxProps = ComboboxAsyncProps | ComboboxSyncProps;\n\nexport type ComboboxOption = string | { label: string; value: string };\n\nexport type ComboboxOptionGroup = {\n  heading: string;\n  options: ComboboxOption[];\n};\n\nexport type ComboboxOptions = ComboboxOption[] | ComboboxOptionGroup[];\n\nexport type ComboboxElementType = TextFieldElementType;\n\nexport type ComboboxRef = Ref<ComboboxElementType>;\n\nexport type ComboboxOptionProps = {\n  option: ComboboxOption;\n  index: number;\n  groupIndex?: number;\n  isHighlighted: boolean;\n  onOptionSelect: (option: ComboboxOption) => void;\n  id: string;\n};\n"],"names":[],"mappings":"AAgDA,WAOE"}

package/dist/esm/components/Combobox/useComboboxOptions.js

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import { filterOptions } from "./utils";
+import { useDebouncedValue } from "../../hooks";
+export function useComboboxOptions({ options, asyncOptions, delay = 300, minLength = 3, inputValue = "" }) {
+    const [filteredOptions, setFilteredOptions] = useState([]);
+    const debouncedInputValue = useDebouncedValue(inputValue, // Don't debounce synchronous options
+    options ? 0 : delay);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(()=>{
+        const controller = new AbortController();
+        const { signal } = controller;
+        const fetchOptions = async ()=>{
+            setIsLoading(true);
+            setError(null);
+            try {
+                if (asyncOptions) {
+                    if (debouncedInputValue.length < minLength) {
+                        setFilteredOptions([]);
+                        return;
+                    }
+                    const result = await asyncOptions(debouncedInputValue, {
+                        signal
+                    });
+                    setFilteredOptions(result);
+                } else {
+                    // @ts-expect-error options will always be set here, fix the types
+                    setFilteredOptions(filterOptions(options, debouncedInputValue));
+                }
+            } catch (e) {
+                if (e instanceof DOMException && e.name === "AbortError") {
+                    // Ignore abort errors
+                    return;
+                }
+                setError(e);
+            } finally{
+                setIsLoading(false);
+            }
+        };
+        fetchOptions();
+        return ()=>{
+            controller.abort();
+        };
+    }, [
+        debouncedInputValue,
+        options,
+        asyncOptions,
+        delay,
+        minLength
+    ]);
+    return {
+        filteredOptions,
+        isLoading,
+        error,
+        isError: error != null
+    };
+}
+
+//# sourceMappingURL=useComboboxOptions.js.map

package/dist/esm/components/Combobox/useComboboxOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Combobox/useComboboxOptions.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ComboboxOptions, ComboboxProps } from \"./types\";\nimport { filterOptions } from \"./utils\";\nimport { useDebouncedValue } from \"../../hooks\";\n\nexport type UseComboboxOptionsProps = Pick<\n  ComboboxProps,\n  \"options\" | \"asyncOptions\" | \"delay\" | \"minLength\"\n> & {\n  inputValue?: string;\n};\n\nexport function useComboboxOptions({\n  options,\n  asyncOptions,\n  delay = 300,\n  minLength = 3,\n  inputValue = \"\",\n}: UseComboboxOptionsProps) {\n  const [filteredOptions, setFilteredOptions] = useState<ComboboxOptions>([]);\n  const debouncedInputValue = useDebouncedValue(\n    inputValue,\n    // Don't debounce synchronous options\n    options ? 0 : delay,\n  );\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    const { signal } = controller;\n\n    const fetchOptions = async () => {\n      setIsLoading(true);\n      setError(null);\n      try {\n        if (asyncOptions) {\n          if (debouncedInputValue.length < minLength) {\n            setFilteredOptions([]);\n            return;\n          }\n          const result = await asyncOptions(debouncedInputValue, { signal });\n          setFilteredOptions(result);\n        } else {\n          // @ts-expect-error options will always be set here, fix the types\n          setFilteredOptions(filterOptions(options, debouncedInputValue));\n        }\n      } catch (e: unknown) {\n        if (e instanceof DOMException && e.name === \"AbortError\") {\n          // Ignore abort errors\n          return;\n        }\n        setError(e as Error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    fetchOptions();\n\n    return () => {\n      controller.abort();\n    };\n  }, [debouncedInputValue, options, asyncOptions, delay, minLength]);\n\n  return { filteredOptions, isLoading, error, isError: error != null };\n}\n"],"names":["useEffect","useState","filterOptions","useDebouncedValue","useComboboxOptions","options","asyncOptions","delay","minLength","inputValue","filteredOptions","setFilteredOptions","debouncedInputValue","isLoading","setIsLoading","error","setError","controller","AbortController","signal","fetchOptions","length","result","e","DOMException","name","abort","isError"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C,SAASC,aAAa,QAAQ,UAAU;AACxC,SAASC,iBAAiB,QAAQ,cAAc;AAShD,OAAO,SAASC,mBAAmB,EACjCC,OAAO,EACPC,YAAY,EACZC,QAAQ,GAAG,EACXC,YAAY,CAAC,EACbC,aAAa,EAAE,EACS;IACxB,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGV,SAA0B,EAAE;IAC1E,MAAMW,sBAAsBT,kBAC1BM,YACA,qCAAqC;IACrCJ,UAAU,IAAIE;IAEhB,MAAM,CAACM,WAAWC,aAAa,GAAGb,SAAS;IAC3C,MAAM,CAACc,OAAOC,SAAS,GAAGf,SAAuB;IAEjDD,UAAU;QACR,MAAMiB,aAAa,IAAIC;QACvB,MAAM,EAAEC,MAAM,EAAE,GAAGF;QAEnB,MAAMG,eAAe;YACnBN,aAAa;YACbE,SAAS;YACT,IAAI;gBACF,IAAIV,cAAc;oBAChB,IAAIM,oBAAoBS,MAAM,GAAGb,WAAW;wBAC1CG,mBAAmB,EAAE;wBACrB;oBACF;oBACA,MAAMW,SAAS,MAAMhB,aAAaM,qBAAqB;wBAAEO;oBAAO;oBAChER,mBAAmBW;gBACrB,OAAO;oBACL,kEAAkE;oBAClEX,mBAAmBT,cAAcG,SAASO;gBAC5C;YACF,EAAE,OAAOW,GAAY;gBACnB,IAAIA,aAAaC,gBAAgBD,EAAEE,IAAI,KAAK,cAAc;oBACxD,sBAAsB;oBACtB;gBACF;gBACAT,SAASO;YACX,SAAU;gBACRT,aAAa;YACf;QACF;QAEAM;QAEA,OAAO;YACLH,WAAWS,KAAK;QAClB;IACF,GAAG;QAACd;QAAqBP;QAASC;QAAcC;QAAOC;KAAU;IAEjE,OAAO;QAAEE;QAAiBG;QAAWE;QAAOY,SAASZ,SAAS;IAAK;AACrE"}

package/dist/esm/components/VisuallyHidden/VisuallyHidden.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function VisuallyHidden(props) {
-    const { className, children, elementType: Component = "div" } = props;
+    const { className, children, elementType: Component = "div", ...otherProps } = props;
     return /*#__PURE__*/ _jsx(Component, {
         className: className,
         style: {
@@ -15,6 +15,7 @@ export function VisuallyHidden(props) {
             width: "1px",
             whiteSpace: "nowrap"
         },
+        ...otherProps,
         children: children
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import type { JSXElementConstructor, ReactNode } from \"react\";\n\nexport interface VisuallyHiddenProps {\n  /** The content to visually hide. */\n  children?: ReactNode;\n\n  className?: string;\n\n  /**\n   * The element type for the container. Defaults to 'div'\n   */\n  elementType?: string | JSXElementConstructor<any>;\n}\n\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n  const { className, children, elementType: Component = \"div\" } = props;\n\n  return (\n    <Component\n      className={className}\n      style={{\n        border: 0,\n        clip: \"rect(0 0 0 0)\",\n        clipPath: \"inset(50%)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: 0,\n        position: \"absolute\",\n        width: \"1px\",\n        whiteSpace: \"nowrap\",\n      }}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["VisuallyHidden","props","className","children","elementType","Component","style","border","clip","clipPath","height","margin","overflow","padding","position","width","whiteSpace"],"mappings":";AAcA,OAAO,SAASA,eAAeC,KAA0B;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,aAAaC,YAAY,KAAK,EAAE,GAAGJ;IAEhE,qBACE,KAACI;QACCH,WAAWA;QACXI,OAAO;YACLC,QAAQ;YACRC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,QAAQ;YACRC,UAAU;YACVC,SAAS;YACTC,UAAU;YACVC,OAAO;YACPC,YAAY;QACd;kBAECb;;AAGP"}
+{"version":3,"sources":["../../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import type { AriaRole, JSXElementConstructor, ReactNode } from \"react\";\n\nexport interface VisuallyHiddenProps {\n  /** The content to visually hide. */\n  children?: ReactNode;\n  id?: string;\n  role?: AriaRole;\n\n  className?: string;\n\n  /**\n   * The element type for the container. Defaults to 'div'\n   */\n  elementType?: string | JSXElementConstructor<any>;\n}\n\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n  const {\n    className,\n    children,\n    elementType: Component = \"div\",\n    ...otherProps\n  } = props;\n\n  return (\n    <Component\n      className={className}\n      style={{\n        border: 0,\n        clip: \"rect(0 0 0 0)\",\n        clipPath: \"inset(50%)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: 0,\n        position: \"absolute\",\n        width: \"1px\",\n        whiteSpace: \"nowrap\",\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["VisuallyHidden","props","className","children","elementType","Component","otherProps","style","border","clip","clipPath","height","margin","overflow","padding","position","width","whiteSpace"],"mappings":";AAgBA,OAAO,SAASA,eAAeC,KAA0B;IACvD,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,aAAaC,YAAY,KAAK,EAC9B,GAAGC,YACJ,GAAGL;IAEJ,qBACE,KAACI;QACCH,WAAWA;QACXK,OAAO;YACLC,QAAQ;YACRC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,QAAQ;YACRC,UAAU;YACVC,SAAS;YACTC,UAAU;YACVC,OAAO;YACPC,YAAY;QACd;QACC,GAAGX,UAAU;kBAEbH;;AAGP"}

package/dist/esm/hooks/index.js

@@ -1,11 +1,13 @@
 export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
+export * from "./useDebouncedValue";
 export * from "./useDeprecationWarning";
 export * from "./useDialog";
 export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
+export * from "./useOnUnmount";
 export * from "./usePrefersReducedMotion";
 export * from "./useRenderCount";
 export * from "./useTextField";

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDeprecationWarning\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./usePrefersReducedMotion\";\nexport * from \"./useRenderCount\";\nexport * from \"./useTextField\";\nexport * from \"./useValidationClasses\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,0BAA0B;AACxC,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,4BAA4B;AAC1C,cAAc,mBAAmB;AACjC,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB;AACvC,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDebouncedValue\";\nexport * from \"./useDeprecationWarning\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useOnUnmount\";\nexport * from \"./usePrefersReducedMotion\";\nexport * from \"./useRenderCount\";\nexport * from \"./useTextField\";\nexport * from \"./useValidationClasses\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,0BAA0B;AACxC,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,4BAA4B;AAC1C,cAAc,mBAAmB;AACjC,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB;AACvC,cAAc,mBAAmB"}

package/dist/esm/hooks/useDebouncedValue/index.js

@@ -0,0 +1,3 @@
+export * from "./useDebouncedValue";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/useDebouncedValue/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDebouncedValue/index.tsx"],"sourcesContent":["export * from \"./useDebouncedValue\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB"}