@simplybusiness/mobius 5.8.0 → 5.9.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 5.9.0
+
+### Minor Changes
+
+- 3a925d9: Add async support to Combobox
+
+### Patch Changes
+
+- e3a86f9: Display combobox label
+
+## 5.8.1
+
+### Patch Changes
+
+- Updated dependencies [78d44a8]
+  - @simplybusiness/icons@4.16.0
+
 ## 5.8.0
 
 ### Minor Changes

package/dist/cjs/components/Combobox/Combobox.js

@@ -11,9 +11,12 @@ Object.defineProperty(exports, "Combobox", {
 const _jsxruntime = require("react/jsx-runtime");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _react = require("react");
+const _hooks = require("../../hooks");
 const _TextField = require("../TextField");
+const _VisuallyHidden = require("../VisuallyHidden");
 const _Listbox = require("./Listbox");
 const _useComboboxHighlight = require("./useComboboxHighlight");
+const _useComboboxOptions = require("./useComboboxOptions");
 const _utils = require("./utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -21,31 +24,25 @@ function _interop_require_default(obj) {
     };
 }
 const Combobox = /*#__PURE__*/ (0, _react.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 = (0, _react.useRef)(null);
     const [inputValue, setInputValue] = (0, _react.useState)(defaultValue || "");
     const [isOpen, setIsOpen] = (0, _react.useState)(false);
-    const [filteredOptions, setFilteredOptions] = (0, _react.useState)([]);
+    const { filteredOptions, isLoading } = (0, _useComboboxOptions.useComboboxOptions)({
+        options,
+        asyncOptions,
+        inputValue,
+        delay,
+        minLength
+    });
     const { highlightedIndex, highlightedGroupIndex, highlightNextOption, highlightPreviousOption, highlightFirstOption, highlightLastOption, clearHighlight } = (0, _useComboboxHighlight.useComboboxHighlight)(filteredOptions);
     const inputRef = ref || fallbackRef;
     const listboxId = (0, _react.useId)();
+    const statusId = (0, _react.useId)();
     const blurTimeoutRef = (0, _react.useRef)(null);
-    (0, _react.useEffect)(()=>{
-        const fetchOptions = async ()=>{
-            if (asyncOptions) {
-                const result = await asyncOptions(inputValue);
-                setFilteredOptions(result);
-            } else {
-                setFilteredOptions((0, _utils.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;
@@ -57,6 +54,11 @@ const Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             setIsOpen(false);
         }, 150);
     };
+    (0, _hooks.useOnUnmount)(()=>{
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+    });
     const handleInputChange = (e)=>{
         const newValue = e.target.value;
         setInputValue(newValue);
@@ -68,7 +70,7 @@ const Combobox = /*#__PURE__*/ (0, _react.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;
@@ -115,12 +117,23 @@ const Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         }
     };
     const classes = (0, _dedupe.default)("mobius mobius-combobox", {
-        expanded: isOpen
+        "mobius-combobox--is-expanded": isOpen,
+        "mobius-combobox--is-loading": isLoading
     }, className);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": "mobius-combobox__wrapper",
         className: classes,
         children: [
+            isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                role: "status",
+                "aria-live": "polite",
+                id: statusId,
+                elementType: "div",
+                className: "mobius-combobox__status",
+                children: "Loading options"
+            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.TextField, {
+                ...otherProps,
                 className: "mobius-combobox__input",
                 role: "combobox",
                 value: inputValue,
@@ -130,6 +143,7 @@ const Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 onKeyDown: handleKeyDown,
                 onChange: handleInputChange,
                 autoComplete: "off",
+                "aria-describedby": isLoading ? statusId : undefined,
                 "aria-autocomplete": "list",
                 "aria-haspopup": "listbox",
                 "aria-controls": listboxId,
@@ -138,13 +152,12 @@ const Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 prefixInside: icon,
                 ref: inputRef
             }),
-            isOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Listbox.Listbox, {
+            showListbox && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Listbox.Listbox, {
                 id: listboxId,
                 options: filteredOptions,
                 highlightedIndex: highlightedIndex,
                 highlightedGroupIndex: highlightedGroupIndex,
-                onOptionSelect: handleOptionSelect,
-                expanded: isOpen
+                onOptionSelect: handleOptionSelect
             })
         ]
     });

package/dist/cjs/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":["Combobox","forwardRef","props","ref","defaultValue","options","asyncOptions","onSelected","className","placeholder","icon","fallbackRef","useRef","inputValue","setInputValue","useState","isOpen","setIsOpen","filteredOptions","setFilteredOptions","highlightedIndex","highlightedGroupIndex","highlightNextOption","highlightPreviousOption","highlightFirstOption","highlightLastOption","clearHighlight","useComboboxHighlight","inputRef","listboxId","useId","blurTimeoutRef","useEffect","fetchOptions","result","filterOptions","handleFocus","current","clearTimeout","handleBlur","setTimeout","handleInputChange","e","newValue","target","value","handleOptionSelect","option","getOptionValue","getHighlightedOption","undefined","isOptionGroup","group","handleKeyDown","key","preventDefault","classes","classNames","expanded","div","TextField","role","onFocus","onBlur","onKeyDown","onChange","autoComplete","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","prefixInside","Listbox","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":["Combobox","forwardRef","props","ref","defaultValue","options","asyncOptions","delay","minLength","onSelected","className","placeholder","icon","otherProps","fallbackRef","useRef","inputValue","setInputValue","useState","isOpen","setIsOpen","filteredOptions","isLoading","useComboboxOptions","highlightedIndex","highlightedGroupIndex","highlightNextOption","highlightPreviousOption","highlightFirstOption","highlightLastOption","clearHighlight","useComboboxHighlight","inputRef","listboxId","useId","statusId","blurTimeoutRef","showListbox","length","handleFocus","current","clearTimeout","handleBlur","setTimeout","useOnUnmount","handleInputChange","e","newValue","target","value","handleOptionSelect","option","getOptionValue","getHighlightedOption","undefined","isOptionGroup","group","handleKeyDown","key","preventDefault","classes","classNames","div","data-testid","VisuallyHidden","role","aria-live","id","elementType","TextField","onFocus","onBlur","onKeyDown","onChange","autoComplete","aria-describedby","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","prefixInside","Listbox","onOptionSelect"],"mappings":"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"}

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

@@ -17,10 +17,8 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const Listbox = ({ id, options, highlightedIndex, highlightedGroupIndex, onOptionSelect, expanded = false })=>{
-    const classes = (0, _classnames.default)("mobius-combobox__list", {
-        expanded
-    });
+const Listbox = ({ id, options, highlightedIndex, highlightedGroupIndex, onOptionSelect })=>{
+    const classes = (0, _classnames.default)("mobius-combobox__list");
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         role: "listbox",
         id: id,

package/dist/cjs/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":["Listbox","id","options","highlightedIndex","highlightedGroupIndex","onOptionSelect","expanded","classes","classNames","div","role","className","isOptionGroup","map","option","groupIndex","ul","aria-labelledby","li","heading","groupOption","index","Option","isHighlighted"],"mappings":";;;;+BAcaA;;;eAAAA;;;;mEAdU;wBACA;uBAEO;;;;;;AAWvB,MAAMA,UAAU,CAAC,EACtBC,EAAE,EACFC,OAAO,EACPC,gBAAgB,EAChBC,qBAAqB,EACrBC,cAAc,EACdC,WAAW,KAAK,EACH;IACb,MAAMC,UAAUC,IAAAA,mBAAU,EAAC,yBAAyB;QAClDF;IACF;IAEA,qBACE,qBAACG;QAAIC,MAAK;QAAUT,IAAIA;QAAIU,WAAWJ;kBACpCK,IAAAA,oBAAa,EAACV,WACXA,QAAQW,GAAG,CAAC,CAACC,QAAQC,2BACnB,sBAACC;gBACCN,MAAK;gBAELO,mBAAiB,GAAGhB,GAAG,OAAO,EAAEc,YAAY;gBAC5CJ,WAAU;;kCAEV,qBAACO;wBACCR,MAAK;wBACLT,IAAI,GAAGA,GAAG,OAAO,EAAEc,YAAY;wBAC/BJ,WAAU;kCAETG,OAAOK,OAAO;;oBAEhBL,OAAOZ,OAAO,CAACW,GAAG,CAAC,CAACO,aAAaC,sBAChC,qBAACC,cAAM;4BAGLR,QAAQM;4BACRC,OAAOA;4BACPN,YAAYA;4BACZQ,eACEpB,qBAAqBkB,SACrBjB,0BAA0BW;4BAE5BV,gBAAgBA;4BAChBJ,IAAIA;2BATC,GAAGA,GAAG,QAAQ,EAAEc,WAAW,CAAC,EAAEM,OAAO;;eAdzCP,OAAOK,OAAO,KA4BvBjB,QAAQW,GAAG,CAAC,CAACC,QAAQO,sBACnB,qBAACC,cAAM;gBAGLR,QAAQA;gBACRO,OAAOA;gBACPE,eAAepB,qBAAqBkB;gBACpChB,gBAAgBA;gBAChBJ,IAAIA;eALCoB;;AAUnB"}
+{"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":["Listbox","id","options","highlightedIndex","highlightedGroupIndex","onOptionSelect","classes","classNames","div","role","className","isOptionGroup","map","option","groupIndex","ul","aria-labelledby","li","heading","groupOption","index","Option","isHighlighted"],"mappings":";;;;+BAaaA;;;eAAAA;;;;mEAbU;wBACA;uBAEO;;;;;;AAUvB,MAAMA,UAAU,CAAC,EACtBC,EAAE,EACFC,OAAO,EACPC,gBAAgB,EAChBC,qBAAqB,EACrBC,cAAc,EACD;IACb,MAAMC,UAAUC,IAAAA,mBAAU,EAAC;IAE3B,qBACE,qBAACC;QAAIC,MAAK;QAAUR,IAAIA;QAAIS,WAAWJ;kBACpCK,IAAAA,oBAAa,EAACT,WACXA,QAAQU,GAAG,CAAC,CAACC,QAAQC,2BACnB,sBAACC;gBACCN,MAAK;gBAELO,mBAAiB,GAAGf,GAAG,OAAO,EAAEa,YAAY;gBAC5CJ,WAAU;;kCAEV,qBAACO;wBACCR,MAAK;wBACLR,IAAI,GAAGA,GAAG,OAAO,EAAEa,YAAY;wBAC/BJ,WAAU;kCAETG,OAAOK,OAAO;;oBAEhBL,OAAOX,OAAO,CAACU,GAAG,CAAC,CAACO,aAAaC,sBAChC,qBAACC,cAAM;4BAGLR,QAAQM;4BACRC,OAAOA;4BACPN,YAAYA;4BACZQ,eACEnB,qBAAqBiB,SACrBhB,0BAA0BU;4BAE5BT,gBAAgBA;4BAChBJ,IAAIA;2BATC,GAAGA,GAAG,QAAQ,EAAEa,WAAW,CAAC,EAAEM,OAAO;;eAdzCP,OAAOK,OAAO,KA4BvBhB,QAAQU,GAAG,CAAC,CAACC,QAAQO,sBACnB,qBAACC,cAAM;gBAGLR,QAAQA;gBACRO,OAAOA;gBACPE,eAAenB,qBAAqBiB;gBACpCf,gBAAgBA;gBAChBJ,IAAIA;eALCmB;;AAUnB"}

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

@@ -12,12 +12,15 @@ _export(exports, {
     FRUITS: function() {
         return FRUITS;
     },
-    FRUITS_GROUPS: function() {
-        return FRUITS_GROUPS;
-    },
     FRUITS_OBJECTS: function() {
         return FRUITS_OBJECTS;
     },
+    FRUITS_OBJECT_GROUPS: function() {
+        return FRUITS_OBJECT_GROUPS;
+    },
+    FRUITS_STRING_GROUPS: function() {
+        return FRUITS_STRING_GROUPS;
+    },
     US_STATES: function() {
         return US_STATES;
     }
@@ -246,7 +249,7 @@ const FRUITS_OBJECTS = [
         value: "watermelon"
     }
 ];
-const FRUITS_GROUPS = [
+const FRUITS_STRING_GROUPS = [
     {
         heading: "A-L",
         options: [
@@ -302,6 +305,194 @@ const FRUITS_GROUPS = [
         ]
     }
 ];
+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"
+            }
+        ]
+    }
+];
 const US_STATES = [
     "Alabama",
     "Alaska",

package/dist/cjs/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_GROUPS","FRUITS_OBJECTS","US_STATES","label","value","heading","options"],"mappings":";;;;;;;;;;;IAAaA,MAAM;eAANA;;IA8FAC,aAAa;eAAbA;;IA/CAC,cAAc;eAAdA;;IAwGAC,SAAS;eAATA;;;AAvJN,MAAMH,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;AAEM,MAAME,iBAAiB;IAC5B;QAAEE,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;AAEM,MAAMJ,gBAAgB;IAC3B;QACEK,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;AAEM,MAAMJ,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"}
+{"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","FRUITS_OBJECT_GROUPS","FRUITS_STRING_GROUPS","US_STATES","label","value","heading","options"],"mappings":"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"}

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useComboboxOptions", {
+    enumerable: true,
+    get: function() {
+        return useComboboxOptions;
+    }
+});
+const _react = require("react");
+const _utils = require("./utils");
+const _hooks = require("../../hooks");
+function useComboboxOptions({ options, asyncOptions, delay = 300, minLength = 3, inputValue = "" }) {
+    const [filteredOptions, setFilteredOptions] = (0, _react.useState)([]);
+    const debouncedInputValue = (0, _hooks.useDebouncedValue)(inputValue, // Don't debounce synchronous options
+    options ? 0 : delay);
+    const [isLoading, setIsLoading] = (0, _react.useState)(false);
+    const [error, setError] = (0, _react.useState)(null);
+    (0, _react.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((0, _utils.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/cjs/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":["useComboboxOptions","options","asyncOptions","delay","minLength","inputValue","filteredOptions","setFilteredOptions","useState","debouncedInputValue","useDebouncedValue","isLoading","setIsLoading","error","setError","useEffect","controller","AbortController","signal","fetchOptions","length","result","filterOptions","e","DOMException","name","abort","isError"],"mappings":";;;;+BAYgBA;;;eAAAA;;;uBAZoB;uBAEN;uBACI;AAS3B,SAASA,mBAAmB,EACjCC,OAAO,EACPC,YAAY,EACZC,QAAQ,GAAG,EACXC,YAAY,CAAC,EACbC,aAAa,EAAE,EACS;IACxB,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGC,IAAAA,eAAQ,EAAkB,EAAE;IAC1E,MAAMC,sBAAsBC,IAAAA,wBAAiB,EAC3CL,YACA,qCAAqC;IACrCJ,UAAU,IAAIE;IAEhB,MAAM,CAACQ,WAAWC,aAAa,GAAGJ,IAAAA,eAAQ,EAAC;IAC3C,MAAM,CAACK,OAAOC,SAAS,GAAGN,IAAAA,eAAQ,EAAe;IAEjDO,IAAAA,gBAAS,EAAC;QACR,MAAMC,aAAa,IAAIC;QACvB,MAAM,EAAEC,MAAM,EAAE,GAAGF;QAEnB,MAAMG,eAAe;YACnBP,aAAa;YACbE,SAAS;YACT,IAAI;gBACF,IAAIZ,cAAc;oBAChB,IAAIO,oBAAoBW,MAAM,GAAGhB,WAAW;wBAC1CG,mBAAmB,EAAE;wBACrB;oBACF;oBACA,MAAMc,SAAS,MAAMnB,aAAaO,qBAAqB;wBAAES;oBAAO;oBAChEX,mBAAmBc;gBACrB,OAAO;oBACL,kEAAkE;oBAClEd,mBAAmBe,IAAAA,oBAAa,EAACrB,SAASQ;gBAC5C;YACF,EAAE,OAAOc,GAAY;gBACnB,IAAIA,aAAaC,gBAAgBD,EAAEE,IAAI,KAAK,cAAc;oBACxD,sBAAsB;oBACtB;gBACF;gBACAX,SAASS;YACX,SAAU;gBACRX,aAAa;YACf;QACF;QAEAO;QAEA,OAAO;YACLH,WAAWU,KAAK;QAClB;IACF,GAAG;QAACjB;QAAqBR;QAASC;QAAcC;QAAOC;KAAU;IAEjE,OAAO;QAAEE;QAAiBK;QAAWE;QAAOc,SAASd,SAAS;IAAK;AACrE"}

package/dist/cjs/components/VisuallyHidden/VisuallyHidden.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "VisuallyHidden", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 function VisuallyHidden(props) {
-    const { className, children, elementType: Component = "div" } = props;
+    const { className, children, elementType: Component = "div", ...otherProps } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Component, {
         className: className,
         style: {
@@ -25,6 +25,7 @@ function VisuallyHidden(props) {
             width: "1px",
             whiteSpace: "nowrap"
         },
+        ...otherProps,
         children: children
     });
 }

package/dist/cjs/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":";;;;+BAcgBA;;;eAAAA;;;;AAAT,SAASA,eAAeC,KAA0B;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,aAAaC,YAAY,KAAK,EAAE,GAAGJ;IAEhE,qBACE,qBAACI;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":";;;;+BAgBgBA;;;eAAAA;;;;AAAT,SAASA,eAAeC,KAA0B;IACvD,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,aAAaC,YAAY,KAAK,EAC9B,GAAGC,YACJ,GAAGL;IAEJ,qBACE,qBAACI;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/cjs/hooks/index.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./useBodyScrollLock"), exports);
 _export_star(require("./useBreakpoint"), exports);
 _export_star(require("./useButton"), exports);
+_export_star(require("./useDebouncedValue"), exports);
 _export_star(require("./useDeprecationWarning"), exports);
 _export_star(require("./useDialog"), exports);
 _export_star(require("./useDialogPolyfill"), exports);
 _export_star(require("./useLabel"), exports);
 _export_star(require("./useOnClickOutside"), exports);
+_export_star(require("./useOnUnmount"), exports);
 _export_star(require("./usePrefersReducedMotion"), exports);
 _export_star(require("./useRenderCount"), exports);
 _export_star(require("./useTextField"), exports);