@simplybusiness/mobius 5.4.0 → 5.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # 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
+
+- af05836: Adds `role` attribute to `useTextfield` hook
+- ec04e00: Fix `Checkbox` is not checked when clicked
+- a0d927d: Add keyboard events to `useTextField` props
+- cc9aad5: Add `Combobox` component
+- d1b33b1: Add Rocket Lawyer theme
+
 ## 5.4.0
 
 ### Minor Changes

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -25,16 +25,26 @@ function _interop_require_default(obj) {
 }
 const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, selected, defaultSelected = false, isReadOnly, isLastItem, name, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
+    const [checked, setChecked] = (0, _react.useState)(defaultSelected);
     const fallbackRef = (0, _react.useRef)(null);
     const refObj = ref || fallbackRef;
     const inputId = (0, _react.useId)();
+    const isControlled = typeof selected === "boolean";
+    (0, _react.useEffect)(()=>{
+        if (isControlled) {
+            setChecked(selected);
+        }
+    }, [
+        selected,
+        isControlled
+    ]);
     const validationClasses = (0, _hooks.useValidationClasses)({
         validationState,
         isInvalid
     });
     const sharedClasses = (0, _dedupe.default)({
         "--is-disabled": isDisabled,
-        "--is-selected": selected,
+        "--is-selected": checked,
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     }, validationClasses);
@@ -51,11 +61,11 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     ]);
     const labelId = (0, _react.useId)();
     const handleChange = (event)=>{
+        setChecked(!checked);
         if (onChange) {
             onChange(event, isLastItem);
         }
     };
-    const isControlled = typeof props.selected === "boolean";
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.Stack, {
         gap: "xs",
         className: wrapperClasses,
@@ -74,8 +84,7 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         className: inputClasses,
                         onChange: handleChange,
                         type: "checkbox",
-                        checked: selected,
-                        defaultChecked: isControlled ? undefined : defaultSelected,
+                        checked: checked,
                         required: isRequired,
                         id: id || inputId,
                         name: name,
@@ -83,7 +92,7 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         ...rest
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
-                        icon: selected ? _icons.squareTick : _icons.square,
+                        icon: checked ? _icons.squareTick : _icons.square,
                         size: "md",
                         className: iconClasses
                     }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChangeEvent, forwardRef, useRef, useId } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\nimport { Stack } from \"../Stack\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    selected,\n    defaultSelected = false,\n    isReadOnly,\n    isLastItem,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox\",\n    sharedClasses,\n    className,\n  );\n  const labelClasses = classNames(\"mobius-checkbox__label\", sharedClasses);\n  const inputClasses = classNames(\"mobius-checkbox__input\", sharedClasses);\n  const iconClasses = classNames(\"mobius-checkbox__icon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event, isLastItem);\n    }\n  };\n\n  const isControlled = typeof props.selected === \"boolean\";\n\n  return (\n    <Stack gap=\"xs\" className={wrapperClasses}>\n      <label className={labelClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onChange={handleChange}\n          type=\"checkbox\"\n          checked={selected}\n          defaultChecked={isControlled ? undefined : defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          name={name}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={selected ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius-checkbox__visible-label\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </Stack>\n  );\n});\n"],"names":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","selected","defaultSelected","isReadOnly","isLastItem","name","value","ariaDescribedBy","rest","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","sharedClasses","classNames","wrapperClasses","labelClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","isControlled","Stack","gap","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","type","checked","defaultChecked","required","Icon","icon","squareTick","square","size","span","ErrorMessage"],"mappings":"AAAA;;;;;+BAaaA;;;eAAAA;;;;uBAX0C;+DAChC;uBACY;8BACN;oCAGM;uBACE;sBAChB;uBACC;;;;;;AAEf,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,UAAU,EACVC,IAAI,EACJC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGlB;IACJ,MAAMmB,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASpB,OAAOkB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CnB;QACAC;IACF;IACA,MAAMmB,gBAAgBC,IAAAA,eAAU,EAC9B;QACE,iBAAiBvB;QACjB,iBAAiBO;QACjB,iBAAiB,OAAON,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAmB;IAEF,sEAAsE;IACtE,MAAMI,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD,eACAjB;IAEF,MAAMoB,eAAeF,IAAAA,eAAU,EAAC,0BAA0BD;IAC1D,MAAMI,eAAeH,IAAAA,eAAU,EAAC,0BAA0BD;IAC1D,MAAMK,cAAcJ,IAAAA,eAAU,EAAC,yBAAyBD;IACxD,MAAMM,iBAAiBT,IAAAA,YAAK;IAC5B,MAAMU,yBAAyBvB,eAAesB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAhB;KACD;IACD,MAAMoB,UAAUd,IAAAA,YAAK;IAErB,MAAMe,eAAe,CAACC;QACpB,IAAI/B,UAAU;YACZA,SAAS+B,OAAOzB;QAClB;IACF;IAEA,MAAM0B,eAAe,OAAOxC,MAAMW,QAAQ,KAAK;IAE/C,qBACE,sBAAC8B,YAAK;QAACC,KAAI;QAAKjC,WAAWmB;;0BACzB,sBAACzB;gBAAMM,WAAWoB;;kCAChB,qBAACc;wBACCC,oBAAkBT;wBAClBU,qBAAmBZ;wBACnBa,gBAAcvC;wBACdwC,mBAAiBV;wBACjBW,UAAUnC;wBACVoC,UAAU7C;wBACVH,KAAKoB;wBACLZ,WAAWqB;wBACXtB,UAAU8B;wBACVY,MAAK;wBACLC,SAASxC;wBACTyC,gBAAgBZ,eAAeN,YAAYtB;wBAC3CyC,UAAUhD;wBACVH,IAAIA,MAAMoB;wBACVP,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAACoC,UAAI;wBACHC,MAAM5C,WAAW6C,iBAAU,GAAGC,aAAM;wBACpCC,MAAK;wBACLjD,WAAWsB;;kCAEb,qBAAC4B;wBAAKzD,IAAImC;wBAAS5B,WAAU;kCAC1BN;;;;0BAGL,qBAACyD,0BAAY;gBAAC1D,IAAI8B;gBAAgBtB,cAAcA;;;;AAGtD"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useId,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\nimport { Stack } from \"../Stack\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    selected,\n    defaultSelected = false,\n    isReadOnly,\n    isLastItem,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [checked, setChecked] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n\n  const isControlled = typeof selected === \"boolean\";\n  useEffect(() => {\n    if (isControlled) {\n      setChecked(selected);\n    }\n  }, [selected, isControlled]);\n\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": checked,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox\",\n    sharedClasses,\n    className,\n  );\n  const labelClasses = classNames(\"mobius-checkbox__label\", sharedClasses);\n  const inputClasses = classNames(\"mobius-checkbox__input\", sharedClasses);\n  const iconClasses = classNames(\"mobius-checkbox__icon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    setChecked(!checked);\n    if (onChange) {\n      onChange(event, isLastItem);\n    }\n  };\n\n  return (\n    <Stack gap=\"xs\" className={wrapperClasses}>\n      <label className={labelClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onChange={handleChange}\n          type=\"checkbox\"\n          checked={checked}\n          required={isRequired}\n          id={id || inputId}\n          name={name}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={checked ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius-checkbox__visible-label\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </Stack>\n  );\n});\n"],"names":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","selected","defaultSelected","isReadOnly","isLastItem","name","value","ariaDescribedBy","rest","checked","setChecked","useState","fallbackRef","useRef","refObj","inputId","useId","isControlled","useEffect","validationClasses","useValidationClasses","sharedClasses","classNames","wrapperClasses","labelClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","Stack","gap","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","type","required","Icon","icon","squareTick","square","size","span","ErrorMessage"],"mappings":"AAAA;;;;;+BAoBaA;;;eAAAA;;;;uBAXN;+DACgB;uBACY;8BACN;oCAGM;uBACE;sBAChB;uBACC;;;;;;AAEf,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,UAAU,EACVC,IAAI,EACJC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGlB;IACJ,MAAM,CAACmB,SAASC,WAAW,GAAGC,IAAAA,eAAQ,EAAUT;IAChD,MAAMU,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASvB,OAAOqB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IAErB,MAAMC,eAAe,OAAOhB,aAAa;IACzCiB,IAAAA,gBAAS,EAAC;QACR,IAAID,cAAc;YAChBP,WAAWT;QACb;IACF,GAAG;QAACA;QAAUgB;KAAa;IAE3B,MAAME,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CxB;QACAC;IACF;IACA,MAAMwB,gBAAgBC,IAAAA,eAAU,EAC9B;QACE,iBAAiB5B;QACjB,iBAAiBe;QACjB,iBAAiB,OAAOd,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAwB;IAEF,sEAAsE;IACtE,MAAMI,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD,eACAtB;IAEF,MAAMyB,eAAeF,IAAAA,eAAU,EAAC,0BAA0BD;IAC1D,MAAMI,eAAeH,IAAAA,eAAU,EAAC,0BAA0BD;IAC1D,MAAMK,cAAcJ,IAAAA,eAAU,EAAC,yBAAyBD;IACxD,MAAMM,iBAAiBX,IAAAA,YAAK;IAC5B,MAAMY,yBAAyB5B,eAAe2B,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACArB;KACD;IACD,MAAMyB,UAAUhB,IAAAA,YAAK;IAErB,MAAMiB,eAAe,CAACC;QACpBxB,WAAW,CAACD;QACZ,IAAIX,UAAU;YACZA,SAASoC,OAAO9B;QAClB;IACF;IAEA,qBACE,sBAAC+B,YAAK;QAACC,KAAI;QAAKrC,WAAWwB;;0BACzB,sBAAC9B;gBAAMM,WAAWyB;;kCAChB,qBAACa;wBACCC,oBAAkBR;wBAClBS,qBAAmBX;wBACnBY,gBAAc3C;wBACd4C,mBAAiBT;wBACjBU,UAAUvC;wBACVwC,UAAUjD;wBACVH,KAAKuB;wBACLf,WAAW0B;wBACX3B,UAAUmC;wBACVW,MAAK;wBACLnC,SAASA;wBACToC,UAAUlD;wBACVH,IAAIA,MAAMuB;wBACVV,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAACsC,UAAI;wBACHC,MAAMtC,UAAUuC,iBAAU,GAAGC,aAAM;wBACnCC,MAAK;wBACLnD,WAAW2B;;kCAEb,qBAACyB;wBAAK3D,IAAIwC;wBAASjC,WAAU;kCAC1BN;;;;0BAGL,qBAAC2D,0BAAY;gBAAC5D,IAAImC;gBAAgB3B,cAAcA;;;;AAGtD"}

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

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Combobox", {
+    enumerable: true,
+    get: function() {
+        return Combobox;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+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 Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    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 [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((0, _utils.filterOptions)(options, inputValue));
+            }
+        };
+        fetchOptions();
+    }, [
+        inputValue,
+        options
+    ]);
+    const handleFocus = ()=>{
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+            blurTimeoutRef.current = null;
+        }
+        setIsOpen(true);
+    };
+    const handleBlur = ()=>{
+        blurTimeoutRef.current = setTimeout(()=>{
+            setIsOpen(false);
+        }, 150);
+    };
+    const handleInputChange = (e)=>{
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        setIsOpen(true);
+        clearHighlight();
+    };
+    const handleOptionSelect = (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);
+                highlightNextOption();
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setIsOpen(true);
+                highlightPreviousOption();
+                break;
+            case "Home":
+                e.preventDefault();
+                setIsOpen(true);
+                highlightFirstOption();
+                break;
+            case "End":
+                e.preventDefault();
+                setIsOpen(true);
+                highlightLastOption();
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (isOpen) {
+                    handleOptionSelect(getHighlightedOption());
+                }
+                break;
+            case "Escape":
+                e.preventDefault();
+                setIsOpen(false);
+                clearHighlight();
+                break;
+            default:
+        }
+    };
+    const classes = (0, _dedupe.default)("mobius mobius-combobox", {
+        expanded: isOpen
+    }, className);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        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-${highlightedGroupIndex}-${highlightedIndex}`,
+                prefixInside: icon,
+                ref: inputRef
+            }),
+            isOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Listbox.Listbox, {
+                id: listboxId,
+                options: filteredOptions,
+                highlightedIndex: highlightedIndex,
+                highlightedGroupIndex: highlightedGroupIndex,
+                onOptionSelect: handleOptionSelect,
+                expanded: isOpen
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=Combobox.js.map

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

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