@simplybusiness/mobius 5.5.0 → 5.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 5.6.0
+
+### Minor Changes
+
+- 7352bc8: Support home/end key navigation in Combobox component
+- b2d5b4b: Add support for group headings to `Combobox` component
+- 3708724: Add props and docs to Combobox
+
+### Patch Changes
+
+- 3da7d02: Fix leaking React props
+
 ## 5.5.0
 
 ### Minor Changes

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

@@ -9,32 +9,34 @@ Object.defineProperty(exports, "Combobox", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _react = require("react");
 const _TextField = require("../TextField");
+const _Listbox = require("./Listbox");
+const _useComboboxHighlight = require("./useComboboxHighlight");
+const _utils = require("./utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const getOptionValue = (option)=>typeof option === "string" ? option : option.value;
-const getOptionLabel = (option)=>typeof option === "string" ? option : option.label;
 const Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { defaultValue, options, onSelected } = props;
-    const fallbackRef = (0, _react.useRef)();
+    const { defaultValue, options, onSelected, className, placeholder, icon } = props;
+    const fallbackRef = (0, _react.useRef)(null);
     const [inputValue, setInputValue] = (0, _react.useState)(defaultValue || "");
     const [isOpen, setIsOpen] = (0, _react.useState)(false);
-    const [highlightedIndex, setHighlightedIndex] = (0, _react.useState)(-1);
     const [filteredOptions, setFilteredOptions] = (0, _react.useState)([]);
+    const { highlightedIndex, highlightedGroupIndex, highlightNextOption, highlightPreviousOption, highlightFirstOption, highlightLastOption, clearHighlight } = (0, _useComboboxHighlight.useComboboxHighlight)(filteredOptions);
     const inputRef = ref || fallbackRef;
     const listboxId = (0, _react.useId)();
+    const blurTimeoutRef = (0, _react.useRef)(null);
     (0, _react.useEffect)(()=>{
         const fetchOptions = async ()=>{
             if (typeof options === "function") {
                 const result = await options(inputValue);
                 setFilteredOptions(result);
             } else {
-                setFilteredOptions(options.filter((option)=>getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())));
+                setFilteredOptions((0, _utils.filterOptions)(options, inputValue));
             }
         };
         fetchOptions();
@@ -43,84 +45,105 @@ const Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         options
     ]);
     const handleFocus = ()=>{
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+            blurTimeoutRef.current = null;
+        }
         setIsOpen(true);
     };
     const handleBlur = ()=>{
-        setIsOpen(false);
+        blurTimeoutRef.current = setTimeout(()=>{
+            setIsOpen(false);
+        }, 150);
     };
     const handleInputChange = (e)=>{
         const newValue = e.target.value;
         setInputValue(newValue);
         setIsOpen(true);
-        setHighlightedIndex(-1);
+        clearHighlight();
     };
     const handleOptionSelect = (option)=>{
-        const value = getOptionValue(option);
+        const value = (0, _utils.getOptionValue)(option);
+        if (!value) return;
         setIsOpen(false);
         setInputValue(value);
         onSelected === null || onSelected === void 0 ? void 0 : onSelected(value);
     };
+    function getHighlightedOption() {
+        if (highlightedIndex === -1) return undefined;
+        if ((0, _utils.isOptionGroup)(filteredOptions)) {
+            const group = filteredOptions[highlightedGroupIndex];
+            return group === null || group === void 0 ? void 0 : group.options[highlightedIndex];
+        }
+        return filteredOptions[highlightedIndex];
+    }
     const handleKeyDown = (e)=>{
         switch(e.key){
             case "ArrowDown":
                 e.preventDefault();
                 setIsOpen(true);
-                setHighlightedIndex((prev)=>prev < filteredOptions.length - 1 ? prev + 1 : 0);
+                highlightNextOption();
                 break;
             case "ArrowUp":
                 e.preventDefault();
                 setIsOpen(true);
-                setHighlightedIndex((prev)=>prev > 0 ? prev - 1 : filteredOptions.length - 1);
+                highlightPreviousOption();
+                break;
+            case "Home":
+                e.preventDefault();
+                setIsOpen(true);
+                highlightFirstOption();
+                break;
+            case "End":
+                e.preventDefault();
+                setIsOpen(true);
+                highlightLastOption();
                 break;
             case "Enter":
                 e.preventDefault();
-                if (isOpen && highlightedIndex >= 0) {
-                    handleOptionSelect(filteredOptions[highlightedIndex]);
-                } else if (isOpen && highlightedIndex === -1 && filteredOptions.length > 0) {
-                    handleOptionSelect(filteredOptions[0]);
+                if (isOpen) {
+                    handleOptionSelect(getHighlightedOption());
                 }
                 break;
             case "Escape":
                 e.preventDefault();
                 setIsOpen(false);
-                setHighlightedIndex(-1);
+                clearHighlight();
                 break;
             default:
         }
     };
+    const classes = (0, _dedupe.default)("mobius mobius-combobox", {
+        expanded: isOpen
+    }, className);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        className: "mobius mobius-combobox",
+        className: classes,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.TextField, {
                 className: "mobius-combobox__input",
                 role: "combobox",
                 value: inputValue,
+                placeholder: placeholder,
                 onFocus: handleFocus,
                 onBlur: handleBlur,
                 onKeyDown: handleKeyDown,
                 onChange: handleInputChange,
+                autoComplete: "off",
                 "aria-autocomplete": "list",
                 "aria-haspopup": "listbox",
                 "aria-controls": listboxId,
                 "aria-expanded": isOpen,
-                "aria-activedescendant": highlightedIndex === -1 ? undefined : `${listboxId}-option-${highlightedIndex}`,
-                // @ts-expect-error I have no idea how ref typing works
+                "aria-activedescendant": highlightedIndex === -1 ? undefined : `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`,
+                prefixInside: icon,
                 ref: inputRef
             }),
-            isOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)("ul", {
-                role: "listbox",
+            isOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Listbox.Listbox, {
                 id: listboxId,
-                className: "mobius-combobox__list",
-                children: filteredOptions.map((option, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
-                        role: "option",
-                        id: `${listboxId}-option-${index}`,
-                        "aria-selected": highlightedIndex === index,
-                        onMouseDown: ()=>handleOptionSelect(option),
-                        className: (0, _dedupe.default)("mobius-combobox__option", {
-                            "mobius-combobox__option--is-highlighted": highlightedIndex === index
-                        }),
-                        children: getOptionLabel(option)
-                    }, getOptionValue(option)))
+                options: filteredOptions,
+                highlightedIndex: highlightedIndex,
+                highlightedGroupIndex: highlightedGroupIndex,
+                onOptionSelect: handleOptionSelect,
+                expanded: isOpen
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState, useEffect } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { TextField } from \"../TextField\";\nimport type {\n  ComboboxProps,\n  ComboboxElementType,\n  ComboboxRef,\n  ComboboxOption,\n} from \"./types\";\nimport type { ForwardedRefComponent } from \"../../types\";\n\nconst getOptionValue = (option: ComboboxOption) =>\n  typeof option === \"string\" ? option : option.value;\n\nconst getOptionLabel = (option: ComboboxOption) =>\n  typeof option === \"string\" ? option : option.label;\n\nexport const Combobox: ForwardedRefComponent<\n  ComboboxProps,\n  ComboboxElementType\n> = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {\n  const { defaultValue, options, onSelected } = props;\n\n  const fallbackRef = useRef();\n  const [inputValue, setInputValue] = useState(defaultValue || \"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const [filteredOptions, setFilteredOptions] = useState<ComboboxOption[]>([]);\n  const inputRef = ref || fallbackRef;\n  const listboxId = useId();\n\n  useEffect(() => {\n    const fetchOptions = async () => {\n      if (typeof options === \"function\") {\n        const result = await options(inputValue);\n        setFilteredOptions(result);\n      } else {\n        setFilteredOptions(\n          options.filter(option =>\n            getOptionLabel(option)\n              .toLowerCase()\n              .includes(inputValue.toLowerCase()),\n          ),\n        );\n      }\n    };\n\n    fetchOptions();\n  }, [inputValue, options]);\n\n  const handleFocus = () => {\n    setIsOpen(true);\n  };\n\n  const handleBlur = () => {\n    setIsOpen(false);\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInputValue(newValue);\n    setIsOpen(true);\n    setHighlightedIndex(-1);\n  };\n\n  const handleOptionSelect = (option: ComboboxOption) => {\n    const value = getOptionValue(option);\n    setIsOpen(false);\n    setInputValue(value);\n    onSelected?.(value);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setIsOpen(true);\n        setHighlightedIndex(prev =>\n          prev < filteredOptions.length - 1 ? prev + 1 : 0,\n        );\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setIsOpen(true);\n        setHighlightedIndex(prev =>\n          prev > 0 ? prev - 1 : filteredOptions.length - 1,\n        );\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (isOpen && highlightedIndex >= 0) {\n          handleOptionSelect(filteredOptions[highlightedIndex]);\n        } else if (\n          isOpen &&\n          highlightedIndex === -1 &&\n          filteredOptions.length > 0\n        ) {\n          handleOptionSelect(filteredOptions[0]);\n        }\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        setIsOpen(false);\n        setHighlightedIndex(-1);\n        break;\n      default:\n      // Do nothing\n    }\n  };\n\n  return (\n    <div className=\"mobius mobius-combobox\">\n      <TextField\n        className=\"mobius-combobox__input\"\n        role=\"combobox\"\n        value={inputValue}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onChange={handleInputChange}\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-${highlightedIndex}`\n        }\n        // @ts-expect-error I have no idea how ref typing works\n        ref={inputRef}\n      />\n      {isOpen && (\n        <ul role=\"listbox\" id={listboxId} className=\"mobius-combobox__list\">\n          {filteredOptions.map((option, index) => (\n            <li\n              role=\"option\"\n              key={getOptionValue(option)}\n              id={`${listboxId}-option-${index}`}\n              aria-selected={highlightedIndex === index}\n              onMouseDown={() => handleOptionSelect(option)}\n              className={classNames(\"mobius-combobox__option\", {\n                \"mobius-combobox__option--is-highlighted\":\n                  highlightedIndex === index,\n              })}\n            >\n              {getOptionLabel(option)}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n});\n"],"names":["Combobox","getOptionValue","option","value","getOptionLabel","label","forwardRef","props","ref","defaultValue","options","onSelected","fallbackRef","useRef","inputValue","setInputValue","useState","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","filteredOptions","setFilteredOptions","inputRef","listboxId","useId","useEffect","fetchOptions","result","filter","toLowerCase","includes","handleFocus","handleBlur","handleInputChange","e","newValue","target","handleOptionSelect","handleKeyDown","key","preventDefault","prev","length","div","className","TextField","role","onFocus","onBlur","onKeyDown","onChange","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","undefined","ul","id","map","index","li","aria-selected","onMouseDown","classNames"],"mappings":"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"}
+{"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 { defaultValue, options, onSelected, className, placeholder, 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 (typeof options === \"function\") {\n        const result = await options(inputValue);\n        setFilteredOptions(result);\n      } else {\n        setFilteredOptions(filterOptions(options, inputValue));\n      }\n    };\n\n    fetchOptions();\n  }, [inputValue, options]);\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","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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"}

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Listbox", {
+    enumerable: true,
+    get: function() {
+        return Listbox;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _Option = require("./Option");
+const _utils = require("./utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const Listbox = ({ id, options, highlightedIndex, highlightedGroupIndex, onOptionSelect, expanded = false })=>{
+    const classes = (0, _classnames.default)("mobius-combobox__list", {
+        expanded
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        role: "listbox",
+        id: id,
+        className: classes,
+        children: (0, _utils.isOptionGroup)(options) ? options.map((option, groupIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("ul", {
+                role: "group",
+                "aria-labelledby": `${id}-group-${groupIndex}`,
+                className: "mobius-combobox__group",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        role: "presentation",
+                        id: `${id}-group-${groupIndex}`,
+                        className: "mobius-combobox__group-label",
+                        children: option.heading
+                    }),
+                    option.options.map((groupOption, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Option.Option, {
+                            option: groupOption,
+                            index: index,
+                            groupIndex: groupIndex,
+                            isHighlighted: highlightedIndex === index && highlightedGroupIndex === groupIndex,
+                            onOptionSelect: onOptionSelect,
+                            id: id
+                        }, `${id}-option-${groupIndex}-${index}`))
+                ]
+            }, option.heading)) : options.map((option, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Option.Option, {
+                option: option,
+                index: index,
+                isHighlighted: highlightedIndex === index,
+                onOptionSelect: onOptionSelect,
+                id: id
+            }, index))
+    });
+};
+
+//# sourceMappingURL=Listbox.js.map

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

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

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Option", {
+    enumerable: true,
+    get: function() {
+        return Option;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _utils = require("./utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const Option = ({ option, index, groupIndex = 0, isHighlighted, onOptionSelect, id })=>{
+    const optionRef = (0, _react.useRef)(null);
+    (0, _react.useEffect)(()=>{
+        if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
+            optionRef.current.scrollIntoView({
+                block: "nearest"
+            });
+        }
+    }, [
+        isHighlighted
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+        ref: optionRef,
+        role: "option",
+        id: `${id}-option-${groupIndex}-${index}`,
+        "aria-selected": isHighlighted,
+        onMouseDown: ()=>onOptionSelect(option),
+        className: (0, _dedupe.default)("mobius-combobox__option", {
+            "mobius-combobox__option--is-highlighted": isHighlighted
+        }),
+        children: (0, _utils.getOptionLabel)(option)
+    }, (0, _utils.getOptionValue)(option));
+};
+
+//# sourceMappingURL=Option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Combobox/Option.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { getOptionValue, getOptionLabel } from \"./utils\";\nimport type { ComboboxOptionProps } from \"./types\";\n\nexport const Option = ({\n  option,\n  index,\n  groupIndex = 0,\n  isHighlighted,\n  onOptionSelect,\n  id,\n}: ComboboxOptionProps) => {\n  const optionRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (\n      isHighlighted &&\n      optionRef.current &&\n      optionRef.current.scrollIntoView\n    ) {\n      optionRef.current.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [isHighlighted]);\n\n  return (\n    <li\n      ref={optionRef}\n      role=\"option\"\n      key={getOptionValue(option)}\n      id={`${id}-option-${groupIndex}-${index}`}\n      aria-selected={isHighlighted}\n      onMouseDown={() => onOptionSelect(option)}\n      className={classNames(\"mobius-combobox__option\", {\n        \"mobius-combobox__option--is-highlighted\": isHighlighted,\n      })}\n    >\n      {getOptionLabel(option)}\n    </li>\n  );\n};\n"],"names":["Option","option","index","groupIndex","isHighlighted","onOptionSelect","id","optionRef","useRef","useEffect","current","scrollIntoView","block","li","ref","role","aria-selected","onMouseDown","className","classNames","getOptionLabel","getOptionValue"],"mappings":";;;;+BAKaA;;;eAAAA;;;;uBALqB;+DACX;uBACwB;;;;;;AAGxC,MAAMA,SAAS,CAAC,EACrBC,MAAM,EACNC,KAAK,EACLC,aAAa,CAAC,EACdC,aAAa,EACbC,cAAc,EACdC,EAAE,EACkB;IACpB,MAAMC,YAAYC,IAAAA,aAAM,EAAgB;IAExCC,IAAAA,gBAAS,EAAC;QACR,IACEL,iBACAG,UAAUG,OAAO,IACjBH,UAAUG,OAAO,CAACC,cAAc,EAChC;YACAJ,UAAUG,OAAO,CAACC,cAAc,CAAC;gBAAEC,OAAO;YAAU;QACtD;IACF,GAAG;QAACR;KAAc;IAElB,qBACE,qBAACS;QACCC,KAAKP;QACLQ,MAAK;QAELT,IAAI,GAAGA,GAAG,QAAQ,EAAEH,WAAW,CAAC,EAAED,OAAO;QACzCc,iBAAeZ;QACfa,aAAa,IAAMZ,eAAeJ;QAClCiB,WAAWC,IAAAA,eAAU,EAAC,2BAA2B;YAC/C,2CAA2Cf;QAC7C;kBAECgB,IAAAA,qBAAc,EAACnB;OARXoB,IAAAA,qBAAc,EAACpB;AAW1B"}

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

@@ -12,8 +12,14 @@ _export(exports, {
     FRUITS: function() {
         return FRUITS;
     },
+    FRUITS_GROUPS: function() {
+        return FRUITS_GROUPS;
+    },
     FRUITS_OBJECTS: function() {
         return FRUITS_OBJECTS;
+    },
+    US_STATES: function() {
+        return US_STATES;
     }
 });
 const FRUITS = [
@@ -240,5 +246,114 @@ const FRUITS_OBJECTS = [
         value: "watermelon"
     }
 ];
+const FRUITS_GROUPS = [
+    {
+        heading: "A-L",
+        options: [
+            "Apple",
+            "Apricot",
+            "Avocado",
+            "Banana",
+            "Blackberry",
+            "Blueberry",
+            "Cantaloupe",
+            "Cherry",
+            "Clementine",
+            "Coconut",
+            "Cranberry",
+            "Date",
+            "Dragonfruit",
+            "Durian",
+            "Elderberry",
+            "Fig",
+            "Grape",
+            "Grapefruit",
+            "Guava",
+            "Honeydew",
+            "Jackfruit",
+            "Kiwi",
+            "Kumquat",
+            "Lemon",
+            "Lime",
+            "Lychee"
+        ]
+    },
+    {
+        heading: "M-Z",
+        options: [
+            "Mango",
+            "Mulberry",
+            "Nectarine",
+            "Orange",
+            "Papaya",
+            "Passionfruit",
+            "Peach",
+            "Pear",
+            "Persimmon",
+            "Pineapple",
+            "Plum",
+            "Pomegranate",
+            "Raspberry",
+            "Redcurrant",
+            "Starfruit",
+            "Strawberry",
+            "Tangerine",
+            "Watermelon"
+        ]
+    }
+];
+const US_STATES = [
+    "Alabama",
+    "Alaska",
+    "Arizona",
+    "Arkansas",
+    "California",
+    "Colorado",
+    "Connecticut",
+    "Delaware",
+    "District Of Columbia",
+    "Florida",
+    "Georgia",
+    "Hawaii",
+    "Idaho",
+    "Illinois",
+    "Indiana",
+    "Iowa",
+    "Kansas",
+    "Kentucky",
+    "Louisiana",
+    "Maine",
+    "Maryland",
+    "Massachusetts",
+    "Michigan",
+    "Minnesota",
+    "Mississippi",
+    "Missouri",
+    "Montana",
+    "Nebraska",
+    "Nevada",
+    "New Hampshire",
+    "New Jersey",
+    "New Mexico",
+    "New York",
+    "North Carolina",
+    "North Dakota",
+    "Ohio",
+    "Oklahoma",
+    "Oregon",
+    "Pennsylvania",
+    "Rhode Island",
+    "South Carolina",
+    "South Dakota",
+    "Tennessee",
+    "Texas",
+    "Utah",
+    "Vermont",
+    "Virginia",
+    "Washington",
+    "West Virginia",
+    "Wisconsin",
+    "Wyoming"
+];
 
 //# sourceMappingURL=fixtures.js.map

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"],"names":["FRUITS","FRUITS_OBJECTS","label","value"],"mappings":";;;;;;;;;;;IAAaA,MAAM;eAANA;;IA+CAC,cAAc;eAAdA;;;AA/CN,MAAMD,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,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"}
+{"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"}

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useComboboxHighlight", {
+    enumerable: true,
+    get: function() {
+        return useComboboxHighlight;
+    }
+});
+const _react = require("react");
+const _utils = require("./utils");
+function useComboboxHighlight(options) {
+    const [highlightedIndex, setHighlightedIndex] = (0, _react.useState)(options.length ? 0 : -1);
+    const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, _react.useState)(0);
+    function highlightNextOption() {
+        const isGroup = (0, _utils.isOptionGroup)(options);
+        if (isGroup) {
+            const group = options[highlightedGroupIndex];
+            if (highlightedIndex === group.options.length - 1) {
+                if (highlightedGroupIndex === options.length - 1) {
+                    return; // At the end of last group
+                }
+                // Move to next group
+                setHighlightedIndex(0);
+                setHighlightedGroupIndex(highlightedGroupIndex + 1);
+            } else {
+                setHighlightedIndex(highlightedIndex + 1);
+            }
+        } else {
+            if (highlightedIndex === options.length - 1) {
+                return; // At the end of options
+            }
+            setHighlightedIndex(highlightedIndex + 1);
+        }
+    }
+    function highlightPreviousOption() {
+        const isGroup = (0, _utils.isOptionGroup)(options);
+        if (highlightedIndex === 0 && highlightedGroupIndex === 0) {
+            return; // Already at start
+        }
+        if (isGroup) {
+            if (highlightedIndex === 0) {
+                // Move to previous group
+                const prevGroupIndex = highlightedGroupIndex - 1;
+                const prevGroup = options[prevGroupIndex];
+                setHighlightedGroupIndex(prevGroupIndex);
+                setHighlightedIndex(prevGroup.options.length - 1);
+            } else {
+                setHighlightedIndex(highlightedIndex - 1);
+            }
+        } else {
+            setHighlightedIndex(highlightedIndex - 1);
+        }
+    }
+    function highlightFirstOption() {
+        setHighlightedIndex(0);
+        setHighlightedGroupIndex(0);
+    }
+    function highlightLastOption() {
+        const isGroup = (0, _utils.isOptionGroup)(options);
+        if (isGroup) {
+            const lastGroupIndex = options.length - 1;
+            const lastGroup = options[lastGroupIndex];
+            setHighlightedGroupIndex(lastGroupIndex);
+            setHighlightedIndex(lastGroup.options.length - 1);
+        } else {
+            setHighlightedIndex(options.length - 1);
+        }
+    }
+    const clearHighlight = ()=>{
+        setHighlightedIndex(options.length ? 0 : -1);
+        setHighlightedGroupIndex(0);
+    };
+    return {
+        highlightedIndex,
+        highlightedGroupIndex,
+        highlightPreviousOption,
+        highlightNextOption,
+        highlightFirstOption,
+        highlightLastOption,
+        clearHighlight
+    };
+}
+
+//# sourceMappingURL=useComboboxHighlight.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Combobox/useComboboxHighlight.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ComboboxOptions } from \"./types\";\nimport { isOptionGroup } from \"./utils\";\n\nexport function useComboboxHighlight(options: ComboboxOptions) {\n  const [highlightedIndex, setHighlightedIndex] = useState(\n    options.length ? 0 : -1,\n  );\n  const [highlightedGroupIndex, setHighlightedGroupIndex] = useState(0);\n\n  function highlightNextOption() {\n    const isGroup = isOptionGroup(options);\n\n    if (isGroup) {\n      const group = options[highlightedGroupIndex];\n      if (highlightedIndex === group.options.length - 1) {\n        if (highlightedGroupIndex === options.length - 1) {\n          return; // At the end of last group\n        }\n        // Move to next group\n        setHighlightedIndex(0);\n        setHighlightedGroupIndex(highlightedGroupIndex + 1);\n      } else {\n        setHighlightedIndex(highlightedIndex + 1);\n      }\n    } else {\n      if (highlightedIndex === options.length - 1) {\n        return; // At the end of options\n      }\n      setHighlightedIndex(highlightedIndex + 1);\n    }\n  }\n\n  function highlightPreviousOption() {\n    const isGroup = isOptionGroup(options);\n\n    if (highlightedIndex === 0 && highlightedGroupIndex === 0) {\n      return; // Already at start\n    }\n\n    if (isGroup) {\n      if (highlightedIndex === 0) {\n        // Move to previous group\n        const prevGroupIndex = highlightedGroupIndex - 1;\n        const prevGroup = options[prevGroupIndex];\n        setHighlightedGroupIndex(prevGroupIndex);\n        setHighlightedIndex(prevGroup.options.length - 1);\n      } else {\n        setHighlightedIndex(highlightedIndex - 1);\n      }\n    } else {\n      setHighlightedIndex(highlightedIndex - 1);\n    }\n  }\n\n  function highlightFirstOption() {\n    setHighlightedIndex(0);\n    setHighlightedGroupIndex(0);\n  }\n\n  function highlightLastOption() {\n    const isGroup = isOptionGroup(options);\n\n    if (isGroup) {\n      const lastGroupIndex = options.length - 1;\n      const lastGroup = options[lastGroupIndex];\n      setHighlightedGroupIndex(lastGroupIndex);\n      setHighlightedIndex(lastGroup.options.length - 1);\n    } else {\n      setHighlightedIndex(options.length - 1);\n    }\n  }\n\n  const clearHighlight = () => {\n    setHighlightedIndex(options.length ? 0 : -1);\n    setHighlightedGroupIndex(0);\n  };\n\n  return {\n    highlightedIndex,\n    highlightedGroupIndex,\n    highlightPreviousOption,\n    highlightNextOption,\n    highlightFirstOption,\n    highlightLastOption,\n    clearHighlight,\n  };\n}\n"],"names":["useComboboxHighlight","options","highlightedIndex","setHighlightedIndex","useState","length","highlightedGroupIndex","setHighlightedGroupIndex","highlightNextOption","isGroup","isOptionGroup","group","highlightPreviousOption","prevGroupIndex","prevGroup","highlightFirstOption","highlightLastOption","lastGroupIndex","lastGroup","clearHighlight"],"mappings":";;;;+BAIgBA;;;eAAAA;;;uBAJS;uBAEK;AAEvB,SAASA,qBAAqBC,OAAwB;IAC3D,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EACtDH,QAAQI,MAAM,GAAG,IAAI,CAAC;IAExB,MAAM,CAACC,uBAAuBC,yBAAyB,GAAGH,IAAAA,eAAQ,EAAC;IAEnE,SAASI;QACP,MAAMC,UAAUC,IAAAA,oBAAa,EAACT;QAE9B,IAAIQ,SAAS;YACX,MAAME,QAAQV,OAAO,CAACK,sBAAsB;YAC5C,IAAIJ,qBAAqBS,MAAMV,OAAO,CAACI,MAAM,GAAG,GAAG;gBACjD,IAAIC,0BAA0BL,QAAQI,MAAM,GAAG,GAAG;oBAChD,QAAQ,2BAA2B;gBACrC;gBACA,qBAAqB;gBACrBF,oBAAoB;gBACpBI,yBAAyBD,wBAAwB;YACnD,OAAO;gBACLH,oBAAoBD,mBAAmB;YACzC;QACF,OAAO;YACL,IAAIA,qBAAqBD,QAAQI,MAAM,GAAG,GAAG;gBAC3C,QAAQ,wBAAwB;YAClC;YACAF,oBAAoBD,mBAAmB;QACzC;IACF;IAEA,SAASU;QACP,MAAMH,UAAUC,IAAAA,oBAAa,EAACT;QAE9B,IAAIC,qBAAqB,KAAKI,0BAA0B,GAAG;YACzD,QAAQ,mBAAmB;QAC7B;QAEA,IAAIG,SAAS;YACX,IAAIP,qBAAqB,GAAG;gBAC1B,yBAAyB;gBACzB,MAAMW,iBAAiBP,wBAAwB;gBAC/C,MAAMQ,YAAYb,OAAO,CAACY,eAAe;gBACzCN,yBAAyBM;gBACzBV,oBAAoBW,UAAUb,OAAO,CAACI,MAAM,GAAG;YACjD,OAAO;gBACLF,oBAAoBD,mBAAmB;YACzC;QACF,OAAO;YACLC,oBAAoBD,mBAAmB;QACzC;IACF;IAEA,SAASa;QACPZ,oBAAoB;QACpBI,yBAAyB;IAC3B;IAEA,SAASS;QACP,MAAMP,UAAUC,IAAAA,oBAAa,EAACT;QAE9B,IAAIQ,SAAS;YACX,MAAMQ,iBAAiBhB,QAAQI,MAAM,GAAG;YACxC,MAAMa,YAAYjB,OAAO,CAACgB,eAAe;YACzCV,yBAAyBU;YACzBd,oBAAoBe,UAAUjB,OAAO,CAACI,MAAM,GAAG;QACjD,OAAO;YACLF,oBAAoBF,QAAQI,MAAM,GAAG;QACvC;IACF;IAEA,MAAMc,iBAAiB;QACrBhB,oBAAoBF,QAAQI,MAAM,GAAG,IAAI,CAAC;QAC1CE,yBAAyB;IAC3B;IAEA,OAAO;QACLL;QACAI;QACAM;QACAJ;QACAO;QACAC;QACAG;IACF;AACF"}