@simplybusiness/mobius 5.4.0 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

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,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":"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"}

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

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    FRUITS: function() {
+        return FRUITS;
+    },
+    FRUITS_OBJECTS: function() {
+        return FRUITS_OBJECTS;
+    }
+});
+const FRUITS = [
+    "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",
+    "Mango",
+    "Mulberry",
+    "Nectarine",
+    "Orange",
+    "Papaya",
+    "Passionfruit",
+    "Peach",
+    "Pear",
+    "Persimmon",
+    "Pineapple",
+    "Plum",
+    "Pomegranate",
+    "Raspberry",
+    "Redcurrant",
+    "Starfruit",
+    "Strawberry",
+    "Tangerine",
+    "Watermelon"
+];
+const FRUITS_OBJECTS = [
+    {
+        label: "Apple",
+        value: "apple"
+    },
+    {
+        label: "Apricot",
+        value: "apricot"
+    },
+    {
+        label: "Avocado",
+        value: "avocado"
+    },
+    {
+        label: "Banana",
+        value: "banana"
+    },
+    {
+        label: "Blackberry",
+        value: "blackberry"
+    },
+    {
+        label: "Blueberry",
+        value: "blueberry"
+    },
+    {
+        label: "Cantaloupe",
+        value: "cantaloupe"
+    },
+    {
+        label: "Cherry",
+        value: "cherry"
+    },
+    {
+        label: "Clementine",
+        value: "clementine"
+    },
+    {
+        label: "Coconut",
+        value: "coconut"
+    },
+    {
+        label: "Cranberry",
+        value: "cranberry"
+    },
+    {
+        label: "Date",
+        value: "date"
+    },
+    {
+        label: "Dragonfruit",
+        value: "dragonfruit"
+    },
+    {
+        label: "Durian",
+        value: "durian"
+    },
+    {
+        label: "Elderberry",
+        value: "elderberry"
+    },
+    {
+        label: "Fig",
+        value: "fig"
+    },
+    {
+        label: "Grape",
+        value: "grape"
+    },
+    {
+        label: "Grapefruit",
+        value: "grapefruit"
+    },
+    {
+        label: "Guava",
+        value: "guava"
+    },
+    {
+        label: "Honeydew",
+        value: "honeydew"
+    },
+    {
+        label: "Jackfruit",
+        value: "jackfruit"
+    },
+    {
+        label: "Kiwi",
+        value: "kiwi"
+    },
+    {
+        label: "Kumquat",
+        value: "kumquat"
+    },
+    {
+        label: "Lemon",
+        value: "lemon"
+    },
+    {
+        label: "Lime",
+        value: "lime"
+    },
+    {
+        label: "Lychee",
+        value: "lychee"
+    },
+    {
+        label: "Mango",
+        value: "mango"
+    },
+    {
+        label: "Mulberry",
+        value: "mulberry"
+    },
+    {
+        label: "Nectarine",
+        value: "nectarine"
+    },
+    {
+        label: "Orange",
+        value: "orange"
+    },
+    {
+        label: "Papaya",
+        value: "papaya"
+    },
+    {
+        label: "Passionfruit",
+        value: "passionfruit"
+    },
+    {
+        label: "Peach",
+        value: "peach"
+    },
+    {
+        label: "Pear",
+        value: "pear"
+    },
+    {
+        label: "Persimmon",
+        value: "persimmon"
+    },
+    {
+        label: "Pineapple",
+        value: "pineapple"
+    },
+    {
+        label: "Plum",
+        value: "plum"
+    },
+    {
+        label: "Pomegranate",
+        value: "pomegranate"
+    },
+    {
+        label: "Raspberry",
+        value: "raspberry"
+    },
+    {
+        label: "Redcurrant",
+        value: "redcurrant"
+    },
+    {
+        label: "Starfruit",
+        value: "starfruit"
+    },
+    {
+        label: "Strawberry",
+        value: "strawberry"
+    },
+    {
+        label: "Tangerine",
+        value: "tangerine"
+    },
+    {
+        label: "Watermelon",
+        value: "watermelon"
+    }
+];
+
+//# sourceMappingURL=fixtures.js.map

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

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

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./Combobox"), exports);
+_export_star(require("./types"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Combobox/index.tsx"],"sourcesContent":["export * from \"./Combobox\";\nexport * from \"./types\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Combobox/types.tsx"],"names":[],"mappings":""}

package/dist/cjs/components/index.js

@@ -8,6 +8,7 @@ _export_star(require("./Box"), exports);
 _export_star(require("./Breadcrumbs"), exports);
 _export_star(require("./Button"), exports);
 _export_star(require("./Checkbox"), exports);
+_export_star(require("./Combobox"), exports);
 _export_star(require("./Container"), exports);
 _export_star(require("./Divider"), exports);
 _export_star(require("./Drawer"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.tsx"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./Alert\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Checkbox\";\nexport * from \"./Container\";\nexport * from \"./Divider\";\nexport * from \"./Drawer\";\nexport * from \"./DropdownMenu\";\nexport * from \"./ErrorMessage\";\nexport * from \"./Fieldset\";\nexport * from \"./Flex\";\nexport * from \"./Grid\";\nexport * from \"./Icon\";\nexport * from \"./Image\";\nexport * from \"./Label\";\nexport * from \"./Link\";\nexport * from \"./LinkButton\";\nexport * from \"./List\";\nexport * from \"./LoadingIndicator\";\nexport * from \"./Logo\";\nexport * from \"./Modal\";\nexport * from \"./NumberField\";\nexport * from \"./Option\";\nexport * from \"./PasswordField\";\nexport * from \"./Popover\";\nexport * from \"./Progress\";\nexport * from \"./Radio\";\nexport * from \"./Segment\";\nexport * from \"./Select\";\nexport * from \"./Slider\";\nexport * from \"./Stack\";\nexport * from \"./SVG\";\nexport * from \"./Table\";\nexport * from \"./Text\";\nexport * from \"./TextArea\";\nexport * from \"./TextAreaInput\";\nexport * from \"./TextField\";\nexport * from \"./Title\";\nexport * from \"./Trust\";\nexport * from \"./VisuallyHidden\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}
+{"version":3,"sources":["../../../src/components/index.tsx"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./Alert\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Checkbox\";\nexport * from \"./Combobox\";\nexport * from \"./Container\";\nexport * from \"./Divider\";\nexport * from \"./Drawer\";\nexport * from \"./DropdownMenu\";\nexport * from \"./ErrorMessage\";\nexport * from \"./Fieldset\";\nexport * from \"./Flex\";\nexport * from \"./Grid\";\nexport * from \"./Icon\";\nexport * from \"./Image\";\nexport * from \"./Label\";\nexport * from \"./Link\";\nexport * from \"./LinkButton\";\nexport * from \"./List\";\nexport * from \"./LoadingIndicator\";\nexport * from \"./Logo\";\nexport * from \"./Modal\";\nexport * from \"./NumberField\";\nexport * from \"./Option\";\nexport * from \"./PasswordField\";\nexport * from \"./Popover\";\nexport * from \"./Progress\";\nexport * from \"./Radio\";\nexport * from \"./Segment\";\nexport * from \"./Select\";\nexport * from \"./Slider\";\nexport * from \"./Stack\";\nexport * from \"./SVG\";\nexport * from \"./Table\";\nexport * from \"./Text\";\nexport * from \"./TextArea\";\nexport * from \"./TextAreaInput\";\nexport * from \"./TextField\";\nexport * from \"./Title\";\nexport * from \"./Trust\";\nexport * from \"./VisuallyHidden\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}

package/dist/cjs/hooks/useTextField/useTextField.js

@@ -41,6 +41,7 @@ function useTextField(props) {
             "aria-invalid": props.isInvalid,
             "aria-describedby": ariaDescribedBy,
             "aria-errormessage": props["aria-errormessage"],
+            role: props.role,
             type: inputElementType === "input" ? props.type : undefined,
             pattern: inputElementType === "input" ? props.pattern : undefined,
             autoComplete: props.autoComplete,

package/dist/cjs/hooks/useTextField/useTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useTextField/useTextField.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n  const {\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    inputElementType = \"input\",\n  } = props;\n  const { labelProps, fieldProps } = useLabel(props);\n\n  const descriptionId = useId();\n  const descriptionProps = { id: descriptionId };\n\n  const errorMessageId = useId();\n  const errorMessageProps = { id: errorMessageId };\n\n  const ariaDescribedBy = spaceDelimitedList([\n    props.description && descriptionId,\n    props.errorMessage && errorMessageId,\n    props[\"aria-describedby\"],\n  ]);\n\n  return {\n    descriptionProps,\n    errorMessageProps,\n    labelProps,\n    inputProps: {\n      defaultValue: props.defaultValue,\n      value: props.value,\n      onChange: props.onChange,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      \"aria-required\": isRequired === true ? true : undefined,\n      \"aria-invalid\": props.isInvalid,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": props[\"aria-errormessage\"],\n\n      type: inputElementType === \"input\" ? props.type : undefined,\n      pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n      autoComplete: props.autoComplete,\n      maxLength: props.maxLength,\n      minLength: props.minLength,\n      name: props.name,\n      placeholder: props.placeholder,\n      inputMode: props.inputMode,\n\n      // Clipboard events\n      onCopy: props.onCopy,\n      onCut: props.onCut,\n      onPaste: props.onPaste,\n\n      // Composition events\n      onCompositionEnd: props.onCompositionEnd,\n      onCompositionStart: props.onCompositionStart,\n      onCompositionUpdate: props.onCompositionUpdate,\n\n      // Selection events\n      onSelect: props.onSelect,\n\n      // Input events\n      onBeforeInput: props.onBeforeInput,\n      onInput: props.onInput,\n\n      // Focus events\n      onFocus: props.onFocus,\n      onBlur: props.onBlur,\n\n      ...fieldProps,\n    },\n  };\n}\n"],"names":["useTextField","props","isDisabled","isReadOnly","isRequired","inputElementType","labelProps","fieldProps","useLabel","descriptionId","useId","descriptionProps","id","errorMessageId","errorMessageProps","ariaDescribedBy","spaceDelimitedList","description","errorMessage","inputProps","defaultValue","value","onChange","disabled","readOnly","undefined","isInvalid","type","pattern","autoComplete","maxLength","minLength","name","placeholder","inputMode","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onSelect","onBeforeInput","onInput","onFocus","onBlur"],"mappings":";;;;+BAKgBA;;;eAAAA;;;uBALM;oCACa;0BACV;AAGlB,SAASA,aAAaC,KAAwB;IACnD,MAAM,EACJC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,mBAAmB,OAAO,EAC3B,GAAGJ;IACJ,MAAM,EAAEK,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ,EAACP;IAE5C,MAAMQ,gBAAgBC,IAAAA,YAAK;IAC3B,MAAMC,mBAAmB;QAAEC,IAAIH;IAAc;IAE7C,MAAMI,iBAAiBH,IAAAA,YAAK;IAC5B,MAAMI,oBAAoB;QAAEF,IAAIC;IAAe;IAE/C,MAAME,kBAAkBC,IAAAA,sCAAkB,EAAC;QACzCf,MAAMgB,WAAW,IAAIR;QACrBR,MAAMiB,YAAY,IAAIL;QACtBZ,KAAK,CAAC,mBAAmB;KAC1B;IAED,OAAO;QACLU;QACAG;QACAR;QACAa,YAAY;YACVC,cAAcnB,MAAMmB,YAAY;YAChCC,OAAOpB,MAAMoB,KAAK;YAClBC,UAAUrB,MAAMqB,QAAQ;YACxBC,UAAUrB;YACVsB,UAAUrB;YACV,iBAAiBC,eAAe,OAAO,OAAOqB;YAC9C,gBAAgBxB,MAAMyB,SAAS;YAC/B,oBAAoBX;YACpB,qBAAqBd,KAAK,CAAC,oBAAoB;YAE/C0B,MAAMtB,qBAAqB,UAAUJ,MAAM0B,IAAI,GAAGF;YAClDG,SAASvB,qBAAqB,UAAUJ,MAAM2B,OAAO,GAAGH;YAExDI,cAAc5B,MAAM4B,YAAY;YAChCC,WAAW7B,MAAM6B,SAAS;YAC1BC,WAAW9B,MAAM8B,SAAS;YAC1BC,MAAM/B,MAAM+B,IAAI;YAChBC,aAAahC,MAAMgC,WAAW;YAC9BC,WAAWjC,MAAMiC,SAAS;YAE1B,mBAAmB;YACnBC,QAAQlC,MAAMkC,MAAM;YACpBC,OAAOnC,MAAMmC,KAAK;YAClBC,SAASpC,MAAMoC,OAAO;YAEtB,qBAAqB;YACrBC,kBAAkBrC,MAAMqC,gBAAgB;YACxCC,oBAAoBtC,MAAMsC,kBAAkB;YAC5CC,qBAAqBvC,MAAMuC,mBAAmB;YAE9C,mBAAmB;YACnBC,UAAUxC,MAAMwC,QAAQ;YAExB,eAAe;YACfC,eAAezC,MAAMyC,aAAa;YAClCC,SAAS1C,MAAM0C,OAAO;YAEtB,eAAe;YACfC,SAAS3C,MAAM2C,OAAO;YACtBC,QAAQ5C,MAAM4C,MAAM;YAEpB,GAAGtC,UAAU;QACf;IACF;AACF"}
+{"version":3,"sources":["../../../../src/hooks/useTextField/useTextField.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n  const {\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    inputElementType = \"input\",\n  } = props;\n  const { labelProps, fieldProps } = useLabel(props);\n\n  const descriptionId = useId();\n  const descriptionProps = { id: descriptionId };\n\n  const errorMessageId = useId();\n  const errorMessageProps = { id: errorMessageId };\n\n  const ariaDescribedBy = spaceDelimitedList([\n    props.description && descriptionId,\n    props.errorMessage && errorMessageId,\n    props[\"aria-describedby\"],\n  ]);\n\n  return {\n    descriptionProps,\n    errorMessageProps,\n    labelProps,\n    inputProps: {\n      defaultValue: props.defaultValue,\n      value: props.value,\n      onChange: props.onChange,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      \"aria-required\": isRequired === true ? true : undefined,\n      \"aria-invalid\": props.isInvalid,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": props[\"aria-errormessage\"],\n      role: props.role,\n\n      type: inputElementType === \"input\" ? props.type : undefined,\n      pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n      autoComplete: props.autoComplete,\n      maxLength: props.maxLength,\n      minLength: props.minLength,\n      name: props.name,\n      placeholder: props.placeholder,\n      inputMode: props.inputMode,\n\n      // Clipboard events\n      onCopy: props.onCopy,\n      onCut: props.onCut,\n      onPaste: props.onPaste,\n\n      // Composition events\n      onCompositionEnd: props.onCompositionEnd,\n      onCompositionStart: props.onCompositionStart,\n      onCompositionUpdate: props.onCompositionUpdate,\n\n      // Selection events\n      onSelect: props.onSelect,\n\n      // Input events\n      onBeforeInput: props.onBeforeInput,\n      onInput: props.onInput,\n\n      // Focus events\n      onFocus: props.onFocus,\n      onBlur: props.onBlur,\n\n      ...fieldProps,\n    },\n  };\n}\n"],"names":["useTextField","props","isDisabled","isReadOnly","isRequired","inputElementType","labelProps","fieldProps","useLabel","descriptionId","useId","descriptionProps","id","errorMessageId","errorMessageProps","ariaDescribedBy","spaceDelimitedList","description","errorMessage","inputProps","defaultValue","value","onChange","disabled","readOnly","undefined","isInvalid","role","type","pattern","autoComplete","maxLength","minLength","name","placeholder","inputMode","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onSelect","onBeforeInput","onInput","onFocus","onBlur"],"mappings":";;;;+BAKgBA;;;eAAAA;;;uBALM;oCACa;0BACV;AAGlB,SAASA,aAAaC,KAAwB;IACnD,MAAM,EACJC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,mBAAmB,OAAO,EAC3B,GAAGJ;IACJ,MAAM,EAAEK,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ,EAACP;IAE5C,MAAMQ,gBAAgBC,IAAAA,YAAK;IAC3B,MAAMC,mBAAmB;QAAEC,IAAIH;IAAc;IAE7C,MAAMI,iBAAiBH,IAAAA,YAAK;IAC5B,MAAMI,oBAAoB;QAAEF,IAAIC;IAAe;IAE/C,MAAME,kBAAkBC,IAAAA,sCAAkB,EAAC;QACzCf,MAAMgB,WAAW,IAAIR;QACrBR,MAAMiB,YAAY,IAAIL;QACtBZ,KAAK,CAAC,mBAAmB;KAC1B;IAED,OAAO;QACLU;QACAG;QACAR;QACAa,YAAY;YACVC,cAAcnB,MAAMmB,YAAY;YAChCC,OAAOpB,MAAMoB,KAAK;YAClBC,UAAUrB,MAAMqB,QAAQ;YACxBC,UAAUrB;YACVsB,UAAUrB;YACV,iBAAiBC,eAAe,OAAO,OAAOqB;YAC9C,gBAAgBxB,MAAMyB,SAAS;YAC/B,oBAAoBX;YACpB,qBAAqBd,KAAK,CAAC,oBAAoB;YAC/C0B,MAAM1B,MAAM0B,IAAI;YAEhBC,MAAMvB,qBAAqB,UAAUJ,MAAM2B,IAAI,GAAGH;YAClDI,SAASxB,qBAAqB,UAAUJ,MAAM4B,OAAO,GAAGJ;YAExDK,cAAc7B,MAAM6B,YAAY;YAChCC,WAAW9B,MAAM8B,SAAS;YAC1BC,WAAW/B,MAAM+B,SAAS;YAC1BC,MAAMhC,MAAMgC,IAAI;YAChBC,aAAajC,MAAMiC,WAAW;YAC9BC,WAAWlC,MAAMkC,SAAS;YAE1B,mBAAmB;YACnBC,QAAQnC,MAAMmC,MAAM;YACpBC,OAAOpC,MAAMoC,KAAK;YAClBC,SAASrC,MAAMqC,OAAO;YAEtB,qBAAqB;YACrBC,kBAAkBtC,MAAMsC,gBAAgB;YACxCC,oBAAoBvC,MAAMuC,kBAAkB;YAC5CC,qBAAqBxC,MAAMwC,mBAAmB;YAE9C,mBAAmB;YACnBC,UAAUzC,MAAMyC,QAAQ;YAExB,eAAe;YACfC,eAAe1C,MAAM0C,aAAa;YAClCC,SAAS3C,MAAM2C,OAAO;YAEtB,eAAe;YACfC,SAAS5C,MAAM4C,OAAO;YACtBC,QAAQ7C,MAAM6C,MAAM;YAEpB,GAAGvC,UAAU;QACf;IACF;AACF"}