@simplybusiness/mobius 5.3.1 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 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
+
+- b4eec50: Add support for `lastItemDisables` on `CheckboxGroup` component
+
+### Patch Changes
+
+- 2085451: Prevent calling `onChange` on `CheckboxGroup` on initial render
+- 37bf8fa: Package updates
+- Updated dependencies [5bc73ef]
+  - @simplybusiness/icons@4.15.0
+
 ## 5.3.1
 
 ### Patch Changes

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

@@ -24,18 +24,27 @@ function _interop_require_default(obj) {
     };
 }
 const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, name, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
-    const [selected, setSelected] = (0, _react.useState)(defaultSelected);
+    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,23 +60,10 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         ariaDescribedBy
     ]);
     const labelId = (0, _react.useId)();
-    const toggleState = ()=>{
-        setSelected(!selected);
-    };
-    const handleClick = (event)=>{
-        const isMouseEvent = event.clientX;
-        if (isMouseEvent) {
-            toggleState();
-        }
-    };
     const handleChange = (event)=>{
+        setChecked(!checked);
         if (onChange) {
-            onChange(event);
-        }
-    };
-    const handleKeyDown = (event)=>{
-        if (event.code === "Space") {
-            toggleState();
+            onChange(event, isLastItem);
         }
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.Stack, {
@@ -86,11 +82,9 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         disabled: isDisabled,
                         ref: refObj,
                         className: inputClasses,
-                        onClick: handleClick,
                         onChange: handleChange,
-                        onKeyDown: handleKeyDown,
                         type: "checkbox",
-                        defaultChecked: defaultSelected,
+                        checked: checked,
                         required: isRequired,
                         id: id || inputId,
                         name: name,
@@ -98,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 {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\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    defaultSelected = false,\n    isReadOnly,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\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 toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\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          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={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","defaultSelected","isReadOnly","name","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","sharedClasses","classNames","wrapperClasses","labelClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","Stack","gap","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","Icon","icon","squareTick","square","size","span","ErrorMessage"],"mappings":"AAAA;;;;;+BAqBaA;;;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,kBAAkB,KAAK,EACvBC,UAAU,EACVC,IAAI,EACJC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGhB;IACJ,MAAM,CAACiB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAUR;IAClD,MAAMS,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASrB,OAAOmB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CpB;QACAC;IACF;IACA,MAAMoB,gBAAgBC,IAAAA,eAAU,EAC9B;QACE,iBAAiBxB;QACjB,iBAAiBa;QACjB,iBAAiB,OAAOZ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAoB;IAEF,sEAAsE;IACtE,MAAMI,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD,eACAlB;IAEF,MAAMqB,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,yBAAyBxB,eAAeuB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAnB;KACD;IACD,MAAMuB,UAAUd,IAAAA,YAAK;IAErB,MAAMe,cAAc;QAClBrB,YAAY,CAACD;IACf;IAEA,MAAMuB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIjC,UAAU;YACZA,SAASiC;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE,sBAACQ,YAAK;QAACC,KAAI;QAAKvC,WAAWoB;;0BACzB,sBAAC1B;gBAAMM,WAAWqB;;kCAChB,qBAACmB;wBACCC,oBAAkBd;wBAClBe,qBAAmBjB;wBACnBkB,gBAAc7C;wBACd8C,mBAAiBf;wBACjBgB,UAAU1C;wBACV2C,UAAUnD;wBACVH,KAAKqB;wBACLb,WAAWsB;wBACXyB,SAAShB;wBACThC,UAAUoC;wBACVa,WAAWZ;wBACXa,MAAK;wBACLC,gBAAgBhD;wBAChBiD,UAAUvD;wBACVH,IAAIA,MAAMqB;wBACVV,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAAC6C,UAAI;wBACHC,MAAM7C,WAAW8C,iBAAU,GAAGC,aAAM;wBACpCC,MAAK;wBACLxD,WAAWuB;;kCAEb,qBAACkC;wBAAKhE,IAAIoC;wBAAS7B,WAAU;kCAC1BN;;;;0BAGL,qBAACgE,0BAAY;gBAACjE,IAAI+B;gBAAgBvB,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/Checkbox/CheckboxGroup.js

@@ -10,19 +10,20 @@ Object.defineProperty(exports, "CheckboxGroup", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
-const _Label = require("../Label");
-const _ErrorMessage = require("../ErrorMessage");
-const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
+const _react = require("react");
 const _hooks = require("../../hooks");
+const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
+const _ErrorMessage = require("../ErrorMessage");
+const _Label = require("../Label");
+const _Checkbox = require("./Checkbox");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
+    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, lastItemDisables = false, ...rest } = props;
     const [selected, setSelected] = (0, _react.useState)(defaultValue);
     const checkboxGroupClasses = (0, _dedupe.default)("mobius", "mobius-checkbox-group", className, {
         "--is-horizontal": orientation === "horizontal",
@@ -44,11 +45,17 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         props["aria-describedby"]
     ]);
     const labelId = (0, _react.useId)();
-    const handleChange = (event)=>{
+    const handleChange = (event, isLastItem = false)=>{
         const { target: { value, checked } } = event;
         if (!checked) {
             setSelected(selected.filter((item)=>item !== value));
         }
+        if (checked && lastItemDisables && isLastItem) {
+            setSelected([
+                value
+            ]);
+            return;
+        }
         if (checked) {
             setSelected([
                 ...selected,
@@ -56,14 +63,21 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             ]);
         }
     };
+    // HACK: This is a workaround to ensure that the onChange event is not
+    //       fired on the initial render.
+    const renderCount = (0, _hooks.useRenderCount)();
     (0, _react.useEffect)(()=>{
-        if (onChange) {
+        if (onChange && renderCount > 1) {
             onChange(selected);
         }
     }, [
         selected,
-        onChange
+        onChange,
+        renderCount
     ]);
+    const childrenArray = _react.Children.toArray(children);
+    const lastCheckbox = childrenArray.filter((child)=>/*#__PURE__*/ (0, _react.isValidElement)(child) && child.type === _Checkbox.Checkbox).pop();
+    const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         ...rest,
         "aria-labelledby": props["aria-labelledby"] || labelId,
@@ -82,14 +96,18 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: "mobius-checkbox-group__wrapper",
-                children: _react.Children.map(children, (child)=>{
+                children: childrenArray.map((child)=>{
                     if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
+                        // lastItemDisables support
+                        const isLastItem = child === lastCheckbox;
+                        const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
                         return /*#__PURE__*/ (0, _react.cloneElement)(child, {
-                            isDisabled,
+                            isDisabled: isChildDisabled,
                             isRequired,
                             isReadOnly,
                             isInvalid,
-                            defaultSelected: selected.includes(child.props.value),
+                            isLastItem,
+                            selected: selected.includes(child.props.value),
                             onChange: handleChange,
                             "aria-describedby": describedBy
                         });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox-group\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-checkbox-group__wrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","validationClasses","useValidationClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","target","value","checked","filter","item","useEffect","div","aria-labelledby","role","style","Children","count","Label","elementType","id","map","child","isValidElement","cloneElement","defaultSelected","includes","ErrorMessage"],"mappings":"AAAA;;;;;+BA0BaA;;;eAAAA;;;;uBAdN;+DACgB;uBAQD;8BACO;oCACM;uBACE;;;;;;AAE9B,MAAMA,8BAGTC,IAAAA,iBAAU,EAAC,CAACC,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAWN;IACnD,MAAMO,uBAAuBC,IAAAA,eAAU,EACrC,UACA,yBACAX,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMiB,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CjB;QACAC;IACF;IACA,MAAMiB,eAAeH,IAAAA,eAAU,EAC7B;QACE,iBAAiBjB;IACnB,GACAkB;IAEF,MAAMG,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBhB,eAAec,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA1B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM8B,UAAUL,IAAAA,YAAK;IAErB,MAAMM,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZlB,YAAYD,SAASoB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXlB,YAAY;mBAAID;gBAAUkB;aAAM;QAClC;IACF;IAEAI,IAAAA,gBAAS,EAAC;QACR,IAAI9B,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,sBAAC+B;QACE,GAAGxB,IAAI;QACRyB,mBAAiBxC,KAAK,CAAC,kBAAkB,IAAI8B;QAC7C7B,KAAKA;QACLQ,WAAWU;QACXsB,MAAK;QACLC,OACE;YACE,4BAA4B5B,eAAe6B,eAAQ,CAACC,KAAK,CAACjC;QAC5D;;YAGDT,uBACC,qBAAC2C,YAAK;gBAACC,aAAY;gBAAOC,IAAIjB;gBAASrB,WAAWc;0BAC/CrB;;0BAGL,qBAACqC;gBAAI9B,WAAU;0BACZkC,eAAQ,CAACK,GAAG,CAACrC,UAAUsC,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC9C;4BACAC;4BACAS;4BACAP;4BACA8C,iBAAiBpC,SAASqC,QAAQ,CAACJ,MAAMjD,KAAK,CAACkC,KAAK;4BACpD1B,UAAUuB;4BACV,oBAAoBH;wBACtB;oBACF;oBAEA,OAAOqB;gBACT;;YAEDvC,8BACC,qBAAC4C,0BAAY;gBAACP,IAAIvB;gBAAgBd,cAAcA;;;;AAIxD"}
+{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  type ChangeEvent,\n  type ReactElement,\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport { useRenderCount, useValidationClasses } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Checkbox } from \"./Checkbox\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    lastItemDisables = false,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox-group\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (\n    event: ChangeEvent<CheckboxElementType>,\n    isLastItem = false,\n  ) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked && lastItemDisables && isLastItem) {\n      setSelected([value]);\n      return;\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  // HACK: This is a workaround to ensure that the onChange event is not\n  //       fired on the initial render.\n  const renderCount = useRenderCount();\n  useEffect(() => {\n    if (onChange && renderCount > 1) {\n      onChange(selected);\n    }\n  }, [selected, onChange, renderCount]);\n\n  const childrenArray = Children.toArray(children);\n  const lastCheckbox = childrenArray\n    .filter(\n      child =>\n        isValidElement(child) && (child as ReactElement).type === Checkbox,\n    )\n    .pop() as ReactElement<CheckboxElementType> | undefined;\n  const lastCheckboxIsChecked =\n    lastCheckbox && selected.includes(lastCheckbox.props.value);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-checkbox-group__wrapper\">\n        {childrenArray.map(child => {\n          if (isValidElement(child)) {\n            // lastItemDisables support\n            const isLastItem = child === lastCheckbox;\n            const isChildDisabled =\n              isDisabled ||\n              (lastItemDisables && lastCheckboxIsChecked && !isLastItem);\n\n            return cloneElement(child as ReactElement, {\n              isDisabled: isChildDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              isLastItem,\n              selected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","lastItemDisables","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","validationClasses","useValidationClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","isLastItem","target","value","checked","filter","item","renderCount","useRenderCount","useEffect","childrenArray","Children","toArray","lastCheckbox","child","isValidElement","type","Checkbox","pop","lastCheckboxIsChecked","includes","div","aria-labelledby","role","style","count","Label","elementType","id","map","isChildDisabled","cloneElement","ErrorMessage"],"mappings":"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"}

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

@@ -0,0 +1,129 @@
+"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 _react = require("react");
+const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _TextField = require("../TextField");
+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 [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 inputRef = ref || fallbackRef;
+    const listboxId = (0, _react.useId)();
+    (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())));
+            }
+        };
+        fetchOptions();
+    }, [
+        inputValue,
+        options
+    ]);
+    const handleFocus = ()=>{
+        setIsOpen(true);
+    };
+    const handleBlur = ()=>{
+        setIsOpen(false);
+    };
+    const handleInputChange = (e)=>{
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        setIsOpen(true);
+        setHighlightedIndex(-1);
+    };
+    const handleOptionSelect = (option)=>{
+        const value = getOptionValue(option);
+        setIsOpen(false);
+        setInputValue(value);
+        onSelected === null || onSelected === void 0 ? void 0 : onSelected(value);
+    };
+    const handleKeyDown = (e)=>{
+        switch(e.key){
+            case "ArrowDown":
+                e.preventDefault();
+                setIsOpen(true);
+                setHighlightedIndex((prev)=>prev < filteredOptions.length - 1 ? prev + 1 : 0);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setIsOpen(true);
+                setHighlightedIndex((prev)=>prev > 0 ? prev - 1 : filteredOptions.length - 1);
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (isOpen && highlightedIndex >= 0) {
+                    handleOptionSelect(filteredOptions[highlightedIndex]);
+                } else if (isOpen && highlightedIndex === -1 && filteredOptions.length > 0) {
+                    handleOptionSelect(filteredOptions[0]);
+                }
+                break;
+            case "Escape":
+                e.preventDefault();
+                setIsOpen(false);
+                setHighlightedIndex(-1);
+                break;
+            default:
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "mobius mobius-combobox",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.TextField, {
+                className: "mobius-combobox__input",
+                role: "combobox",
+                value: inputValue,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                onChange: handleInputChange,
+                "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
+                ref: inputRef
+            }),
+            isOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)("ul", {
+                role: "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)))
+            })
+        ]
+    });
+});
+
+//# 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 { 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":";;;;+BAiBaA;;;eAAAA;;;;uBAjBkD;+DACxC;2BACG;;;;;;AAS1B,MAAMC,iBAAiB,CAACC,SACtB,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAEpD,MAAMC,iBAAiB,CAACF,SACtB,OAAOA,WAAW,WAAWA,SAASA,OAAOG,KAAK;AAE7C,MAAML,yBAGTM,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EAAEC,YAAY,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGJ;IAE9C,MAAMK,cAAcC,IAAAA,aAAM;IAC1B,MAAM,CAACC,YAAYC,cAAc,GAAGC,IAAAA,eAAQ,EAACP,gBAAgB;IAC7D,MAAM,CAACQ,QAAQC,UAAU,GAAGF,IAAAA,eAAQ,EAAC;IACrC,MAAM,CAACG,kBAAkBC,oBAAoB,GAAGJ,IAAAA,eAAQ,EAAC,CAAC;IAC1D,MAAM,CAACK,iBAAiBC,mBAAmB,GAAGN,IAAAA,eAAQ,EAAmB,EAAE;IAC3E,MAAMO,WAAWf,OAAOI;IACxB,MAAMY,YAAYC,IAAAA,YAAK;IAEvBC,IAAAA,gBAAS,EAAC;QACR,MAAMC,eAAe;YACnB,IAAI,OAAOjB,YAAY,YAAY;gBACjC,MAAMkB,SAAS,MAAMlB,QAAQI;gBAC7BQ,mBAAmBM;YACrB,OAAO;gBACLN,mBACEZ,QAAQmB,MAAM,CAAC3B,CAAAA,SACbE,eAAeF,QACZ4B,WAAW,GACXC,QAAQ,CAACjB,WAAWgB,WAAW;YAGxC;QACF;QAEAH;IACF,GAAG;QAACb;QAAYJ;KAAQ;IAExB,MAAMsB,cAAc;QAClBd,UAAU;IACZ;IAEA,MAAMe,aAAa;QACjBf,UAAU;IACZ;IAEA,MAAMgB,oBAAoB,CAACC;QACzB,MAAMC,WAAWD,EAAEE,MAAM,CAAClC,KAAK;QAC/BY,cAAcqB;QACdlB,UAAU;QACVE,oBAAoB,CAAC;IACvB;IAEA,MAAMkB,qBAAqB,CAACpC;QAC1B,MAAMC,QAAQF,eAAeC;QAC7BgB,UAAU;QACVH,cAAcZ;QACdQ,uBAAAA,iCAAAA,WAAaR;IACf;IAEA,MAAMoC,gBAAgB,CAACJ;QACrB,OAAQA,EAAEK,GAAG;YACX,KAAK;gBACHL,EAAEM,cAAc;gBAChBvB,UAAU;gBACVE,oBAAoBsB,CAAAA,OAClBA,OAAOrB,gBAAgBsB,MAAM,GAAG,IAAID,OAAO,IAAI;gBAEjD;YACF,KAAK;gBACHP,EAAEM,cAAc;gBAChBvB,UAAU;gBACVE,oBAAoBsB,CAAAA,OAClBA,OAAO,IAAIA,OAAO,IAAIrB,gBAAgBsB,MAAM,GAAG;gBAEjD;YACF,KAAK;gBACHR,EAAEM,cAAc;gBAChB,IAAIxB,UAAUE,oBAAoB,GAAG;oBACnCmB,mBAAmBjB,eAAe,CAACF,iBAAiB;gBACtD,OAAO,IACLF,UACAE,qBAAqB,CAAC,KACtBE,gBAAgBsB,MAAM,GAAG,GACzB;oBACAL,mBAAmBjB,eAAe,CAAC,EAAE;gBACvC;gBACA;YACF,KAAK;gBACHc,EAAEM,cAAc;gBAChBvB,UAAU;gBACVE,oBAAoB,CAAC;gBACrB;YACF;QAEF;IACF;IAEA,qBACE,sBAACwB;QAAIC,WAAU;;0BACb,qBAACC,oBAAS;gBACRD,WAAU;gBACVE,MAAK;gBACL5C,OAAOW;gBACPkC,SAAShB;gBACTiB,QAAQhB;gBACRiB,WAAWX;gBACXY,UAAUjB;gBACVkB,qBAAkB;gBAClBC,iBAAc;gBACdC,iBAAe9B;gBACf+B,iBAAetC;gBACfuC,yBACErC,qBAAqB,CAAC,IAClBsC,YACA,GAAGjC,UAAU,QAAQ,EAAEL,kBAAkB;gBAE/C,uDAAuD;gBACvDX,KAAKe;;YAENN,wBACC,qBAACyC;gBAAGX,MAAK;gBAAUY,IAAInC;gBAAWqB,WAAU;0BACzCxB,gBAAgBuC,GAAG,CAAC,CAAC1D,QAAQ2D,sBAC5B,qBAACC;wBACCf,MAAK;wBAELY,IAAI,GAAGnC,UAAU,QAAQ,EAAEqC,OAAO;wBAClCE,iBAAe5C,qBAAqB0C;wBACpCG,aAAa,IAAM1B,mBAAmBpC;wBACtC2C,WAAWoB,IAAAA,eAAU,EAAC,2BAA2B;4BAC/C,2CACE9C,qBAAqB0C;wBACzB;kCAECzD,eAAeF;uBATXD,eAAeC;;;;AAgBlC"}