@simplybusiness/mobius 5.6.0 → 5.7.0

package/dist/esm/components/Combobox/Combobox.js

@@ -6,7 +6,7 @@ import { Listbox } from "./Listbox"; // Import Listbox component
 import { useComboboxHighlight } from "./useComboboxHighlight";
 import { filterOptions, getOptionValue, isOptionGroup } from "./utils";
 export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { defaultValue, options, onSelected, className, placeholder, icon } = props;
+    const { defaultValue, options, asyncOptions, onSelected, className, placeholder, icon } = props;
     const fallbackRef = useRef(null);
     const [inputValue, setInputValue] = useState(defaultValue || "");
     const [isOpen, setIsOpen] = useState(false);
@@ -17,8 +17,8 @@ export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
     const blurTimeoutRef = useRef(null);
     useEffect(()=>{
         const fetchOptions = async ()=>{
-            if (typeof options === "function") {
-                const result = await options(inputValue);
+            if (asyncOptions) {
+                const result = await asyncOptions(inputValue);
                 setFilteredOptions(result);
             } else {
                 setFilteredOptions(filterOptions(options, inputValue));
@@ -27,7 +27,8 @@ export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
         fetchOptions();
     }, [
         inputValue,
-        options
+        options,
+        asyncOptions
     ]);
     const handleFocus = ()=>{
         if (blurTimeoutRef.current) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ForwardedRefComponent } from \"../../types\";\nimport { TextField } from \"../TextField\";\nimport { Listbox } from \"./Listbox\"; // Import Listbox component\nimport type {\n  ComboboxElementType,\n  ComboboxOption,\n  ComboboxOptions,\n  ComboboxProps,\n  ComboboxRef,\n} from \"./types\";\nimport { useComboboxHighlight } from \"./useComboboxHighlight\";\nimport { filterOptions, getOptionValue, isOptionGroup } from \"./utils\";\n\nexport const Combobox: ForwardedRefComponent<\n  ComboboxProps,\n  ComboboxElementType\n> = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {\n  const { defaultValue, options, onSelected, className, placeholder, icon } =\n    props;\n\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const [inputValue, setInputValue] = useState(defaultValue || \"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [filteredOptions, setFilteredOptions] = useState<ComboboxOptions>([]);\n  const {\n    highlightedIndex,\n    highlightedGroupIndex,\n    highlightNextOption,\n    highlightPreviousOption,\n    highlightFirstOption,\n    highlightLastOption,\n    clearHighlight,\n  } = useComboboxHighlight(filteredOptions);\n\n  const inputRef = ref || fallbackRef;\n  const listboxId = useId();\n  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    const fetchOptions = async () => {\n      if (typeof options === \"function\") {\n        const result = await options(inputValue);\n        setFilteredOptions(result);\n      } else {\n        setFilteredOptions(filterOptions(options, inputValue));\n      }\n    };\n\n    fetchOptions();\n  }, [inputValue, options]);\n\n  const handleFocus = () => {\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current);\n      blurTimeoutRef.current = null;\n    }\n    setIsOpen(true);\n  };\n\n  const handleBlur = () => {\n    blurTimeoutRef.current = setTimeout(() => {\n      setIsOpen(false);\n    }, 150);\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInputValue(newValue);\n    setIsOpen(true);\n    clearHighlight();\n  };\n\n  const handleOptionSelect = (option: ComboboxOption) => {\n    const value = getOptionValue(option);\n    if (!value) return;\n    setIsOpen(false);\n    setInputValue(value);\n    onSelected?.(value);\n  };\n\n  function getHighlightedOption() {\n    if (highlightedIndex === -1) return undefined;\n\n    if (isOptionGroup(filteredOptions)) {\n      const group = filteredOptions[highlightedGroupIndex];\n      return group?.options[highlightedIndex];\n    }\n\n    return filteredOptions[highlightedIndex];\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightNextOption();\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightPreviousOption();\n        break;\n      case \"Home\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightFirstOption();\n        break;\n      case \"End\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightLastOption();\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (isOpen) {\n          handleOptionSelect(getHighlightedOption()!);\n        }\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        setIsOpen(false);\n        clearHighlight();\n        break;\n      default:\n      // Do nothing\n    }\n  };\n\n  const classes = classNames(\n    \"mobius mobius-combobox\",\n    { expanded: isOpen },\n    className,\n  );\n\n  return (\n    <div className={classes}>\n      <TextField\n        className=\"mobius-combobox__input\"\n        role=\"combobox\"\n        value={inputValue}\n        placeholder={placeholder}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onChange={handleInputChange}\n        autoComplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={isOpen}\n        aria-activedescendant={\n          highlightedIndex === -1\n            ? undefined\n            : `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`\n        }\n        prefixInside={icon}\n        ref={inputRef}\n      />\n      {isOpen && (\n        <Listbox\n          id={listboxId}\n          options={filteredOptions}\n          highlightedIndex={highlightedIndex}\n          highlightedGroupIndex={highlightedGroupIndex}\n          onOptionSelect={handleOptionSelect}\n          expanded={isOpen}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["classNames","forwardRef","useEffect","useId","useRef","useState","TextField","Listbox","useComboboxHighlight","filterOptions","getOptionValue","isOptionGroup","Combobox","props","ref","defaultValue","options","onSelected","className","placeholder","icon","fallbackRef","inputValue","setInputValue","isOpen","setIsOpen","filteredOptions","setFilteredOptions","highlightedIndex","highlightedGroupIndex","highlightNextOption","highlightPreviousOption","highlightFirstOption","highlightLastOption","clearHighlight","inputRef","listboxId","blurTimeoutRef","fetchOptions","result","handleFocus","current","clearTimeout","handleBlur","setTimeout","handleInputChange","e","newValue","target","value","handleOptionSelect","option","getHighlightedOption","undefined","group","handleKeyDown","key","preventDefault","classes","expanded","div","role","onFocus","onBlur","onKeyDown","onChange","autoComplete","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","prefixInside","id","onOptionSelect"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ForwardedRefComponent } from \"../../types\";\nimport { TextField } from \"../TextField\";\nimport { Listbox } from \"./Listbox\"; // Import Listbox component\nimport type {\n  ComboboxElementType,\n  ComboboxOption,\n  ComboboxOptions,\n  ComboboxProps,\n  ComboboxRef,\n} from \"./types\";\nimport { useComboboxHighlight } from \"./useComboboxHighlight\";\nimport { filterOptions, getOptionValue, isOptionGroup } from \"./utils\";\n\nexport const Combobox: ForwardedRefComponent<\n  ComboboxProps,\n  ComboboxElementType\n> = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {\n  const {\n    defaultValue,\n    options,\n    asyncOptions,\n    onSelected,\n    className,\n    placeholder,\n    icon,\n  } = props;\n\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const [inputValue, setInputValue] = useState(defaultValue || \"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [filteredOptions, setFilteredOptions] = useState<ComboboxOptions>([]);\n  const {\n    highlightedIndex,\n    highlightedGroupIndex,\n    highlightNextOption,\n    highlightPreviousOption,\n    highlightFirstOption,\n    highlightLastOption,\n    clearHighlight,\n  } = useComboboxHighlight(filteredOptions);\n\n  const inputRef = ref || fallbackRef;\n  const listboxId = useId();\n  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    const fetchOptions = async () => {\n      if (asyncOptions) {\n        const result = await asyncOptions(inputValue);\n        setFilteredOptions(result);\n      } else {\n        setFilteredOptions(filterOptions(options, inputValue));\n      }\n    };\n\n    fetchOptions();\n  }, [inputValue, options, asyncOptions]);\n\n  const handleFocus = () => {\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current);\n      blurTimeoutRef.current = null;\n    }\n    setIsOpen(true);\n  };\n\n  const handleBlur = () => {\n    blurTimeoutRef.current = setTimeout(() => {\n      setIsOpen(false);\n    }, 150);\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInputValue(newValue);\n    setIsOpen(true);\n    clearHighlight();\n  };\n\n  const handleOptionSelect = (option: ComboboxOption) => {\n    const value = getOptionValue(option);\n    if (!value) return;\n    setIsOpen(false);\n    setInputValue(value);\n    onSelected?.(value);\n  };\n\n  function getHighlightedOption() {\n    if (highlightedIndex === -1) return undefined;\n\n    if (isOptionGroup(filteredOptions)) {\n      const group = filteredOptions[highlightedGroupIndex];\n      return group?.options[highlightedIndex];\n    }\n\n    return filteredOptions[highlightedIndex];\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightNextOption();\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightPreviousOption();\n        break;\n      case \"Home\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightFirstOption();\n        break;\n      case \"End\":\n        e.preventDefault();\n        setIsOpen(true);\n        highlightLastOption();\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (isOpen) {\n          handleOptionSelect(getHighlightedOption()!);\n        }\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        setIsOpen(false);\n        clearHighlight();\n        break;\n      default:\n      // Do nothing\n    }\n  };\n\n  const classes = classNames(\n    \"mobius mobius-combobox\",\n    { expanded: isOpen },\n    className,\n  );\n\n  return (\n    <div className={classes}>\n      <TextField\n        className=\"mobius-combobox__input\"\n        role=\"combobox\"\n        value={inputValue}\n        placeholder={placeholder}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onChange={handleInputChange}\n        autoComplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={isOpen}\n        aria-activedescendant={\n          highlightedIndex === -1\n            ? undefined\n            : `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`\n        }\n        prefixInside={icon}\n        ref={inputRef}\n      />\n      {isOpen && (\n        <Listbox\n          id={listboxId}\n          options={filteredOptions}\n          highlightedIndex={highlightedIndex}\n          highlightedGroupIndex={highlightedGroupIndex}\n          onOptionSelect={handleOptionSelect}\n          expanded={isOpen}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["classNames","forwardRef","useEffect","useId","useRef","useState","TextField","Listbox","useComboboxHighlight","filterOptions","getOptionValue","isOptionGroup","Combobox","props","ref","defaultValue","options","asyncOptions","onSelected","className","placeholder","icon","fallbackRef","inputValue","setInputValue","isOpen","setIsOpen","filteredOptions","setFilteredOptions","highlightedIndex","highlightedGroupIndex","highlightNextOption","highlightPreviousOption","highlightFirstOption","highlightLastOption","clearHighlight","inputRef","listboxId","blurTimeoutRef","fetchOptions","result","handleFocus","current","clearTimeout","handleBlur","setTimeout","handleInputChange","e","newValue","target","value","handleOptionSelect","option","getHighlightedOption","undefined","group","handleKeyDown","key","preventDefault","classes","expanded","div","role","onFocus","onBlur","onKeyDown","onChange","autoComplete","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","prefixInside","id","onOptionSelect"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEvE,SAASC,SAAS,QAAQ,eAAe;AACzC,SAASC,OAAO,QAAQ,YAAY,CAAC,2BAA2B;AAQhE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,aAAa,EAAEC,cAAc,EAAEC,aAAa,QAAQ,UAAU;AAEvE,OAAO,MAAMC,yBAGTX,WAAW,CAACY,OAAsBC;IACpC,MAAM,EACJC,YAAY,EACZC,OAAO,EACPC,YAAY,EACZC,UAAU,EACVC,SAAS,EACTC,WAAW,EACXC,IAAI,EACL,GAAGR;IAEJ,MAAMS,cAAclB,OAAyB;IAC7C,MAAM,CAACmB,YAAYC,cAAc,GAAGnB,SAASU,gBAAgB;IAC7D,MAAM,CAACU,QAAQC,UAAU,GAAGrB,SAAS;IACrC,MAAM,CAACsB,iBAAiBC,mBAAmB,GAAGvB,SAA0B,EAAE;IAC1E,MAAM,EACJwB,gBAAgB,EAChBC,qBAAqB,EACrBC,mBAAmB,EACnBC,uBAAuB,EACvBC,oBAAoB,EACpBC,mBAAmB,EACnBC,cAAc,EACf,GAAG3B,qBAAqBmB;IAEzB,MAAMS,WAAWtB,OAAOQ;IACxB,MAAMe,YAAYlC;IAClB,MAAMmC,iBAAiBlC,OAA8B;IAErDF,UAAU;QACR,MAAMqC,eAAe;YACnB,IAAItB,cAAc;gBAChB,MAAMuB,SAAS,MAAMvB,aAAaM;gBAClCK,mBAAmBY;YACrB,OAAO;gBACLZ,mBAAmBnB,cAAcO,SAASO;YAC5C;QACF;QAEAgB;IACF,GAAG;QAAChB;QAAYP;QAASC;KAAa;IAEtC,MAAMwB,cAAc;QAClB,IAAIH,eAAeI,OAAO,EAAE;YAC1BC,aAAaL,eAAeI,OAAO;YACnCJ,eAAeI,OAAO,GAAG;QAC3B;QACAhB,UAAU;IACZ;IAEA,MAAMkB,aAAa;QACjBN,eAAeI,OAAO,GAAGG,WAAW;YAClCnB,UAAU;QACZ,GAAG;IACL;IAEA,MAAMoB,oBAAoB,CAACC;QACzB,MAAMC,WAAWD,EAAEE,MAAM,CAACC,KAAK;QAC/B1B,cAAcwB;QACdtB,UAAU;QACVS;IACF;IAEA,MAAMgB,qBAAqB,CAACC;QAC1B,MAAMF,QAAQxC,eAAe0C;QAC7B,IAAI,CAACF,OAAO;QACZxB,UAAU;QACVF,cAAc0B;QACdhC,uBAAAA,iCAAAA,WAAagC;IACf;IAEA,SAASG;QACP,IAAIxB,qBAAqB,CAAC,GAAG,OAAOyB;QAEpC,IAAI3C,cAAcgB,kBAAkB;YAClC,MAAM4B,QAAQ5B,eAAe,CAACG,sBAAsB;YACpD,OAAOyB,kBAAAA,4BAAAA,MAAOvC,OAAO,CAACa,iBAAiB;QACzC;QAEA,OAAOF,eAAe,CAACE,iBAAiB;IAC1C;IAEA,MAAM2B,gBAAgB,CAACT;QACrB,OAAQA,EAAEU,GAAG;YACX,KAAK;gBACHV,EAAEW,cAAc;gBAChBhC,UAAU;gBACVK;gBACA;YACF,KAAK;gBACHgB,EAAEW,cAAc;gBAChBhC,UAAU;gBACVM;gBACA;YACF,KAAK;gBACHe,EAAEW,cAAc;gBAChBhC,UAAU;gBACVO;gBACA;YACF,KAAK;gBACHc,EAAEW,cAAc;gBAChBhC,UAAU;gBACVQ;gBACA;YACF,KAAK;gBACHa,EAAEW,cAAc;gBAChB,IAAIjC,QAAQ;oBACV0B,mBAAmBE;gBACrB;gBACA;YACF,KAAK;gBACHN,EAAEW,cAAc;gBAChBhC,UAAU;gBACVS;gBACA;YACF;QAEF;IACF;IAEA,MAAMwB,UAAU3D,WACd,0BACA;QAAE4D,UAAUnC;IAAO,GACnBN;IAGF,qBACE,MAAC0C;QAAI1C,WAAWwC;;0BACd,KAACrD;gBACCa,WAAU;gBACV2C,MAAK;gBACLZ,OAAO3B;gBACPH,aAAaA;gBACb2C,SAAStB;gBACTuB,QAAQpB;gBACRqB,WAAWT;gBACXU,UAAUpB;gBACVqB,cAAa;gBACbC,qBAAkB;gBAClBC,iBAAc;gBACdC,iBAAejC;gBACfkC,iBAAe9C;gBACf+C,yBACE3C,qBAAqB,CAAC,IAClByB,YACA,GAAGjB,UAAU,QAAQ,EAAEP,sBAAsB,CAAC,EAAED,kBAAkB;gBAExE4C,cAAcpD;gBACdP,KAAKsB;;YAENX,wBACC,KAAClB;gBACCmE,IAAIrC;gBACJrB,SAASW;gBACTE,kBAAkBA;gBAClBC,uBAAuBA;gBACvB6C,gBAAgBxB;gBAChBS,UAAUnC;;;;AAKpB,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Combobox/types.tsx"],"sourcesContent":["import type { ReactElement, Ref } from \"react\";\nimport type { TextFieldElementType, TextFieldProps } from \"../TextField\";\n\nexport type ComboboxProps = TextFieldProps & {\n  /** The list of options to display in the dropdown */\n  options:\n    | ComboboxOptions\n    | ((filter: string) => ComboboxOptions)\n    | ((filter: string) => Promise<ComboboxOptions>);\n  /** An icon to display in TextField (left side) */\n  icon?: ReactElement;\n  /** The default value of the selected option */\n  defaultValue?: string | undefined;\n  /** Callback when the selected option changes */\n  onSelected?: ((value: string) => void) | undefined;\n};\n\nexport type ComboboxOption = string | { label: string; value: string };\n\nexport type ComboboxOptionGroup = {\n  heading: string;\n  options: ComboboxOption[];\n};\n\nexport type ComboboxOptions = ComboboxOption[] | ComboboxOptionGroup[];\n\nexport type ComboboxElementType = TextFieldElementType;\n\nexport type ComboboxRef = Ref<ComboboxElementType>;\n\nexport type ComboboxOptionProps = {\n  option: ComboboxOption;\n  index: number;\n  groupIndex?: number;\n  isHighlighted: boolean;\n  onOptionSelect: (option: ComboboxOption) => void;\n  id: string;\n};\n"],"names":[],"mappings":"AA8BA,WAOE"}
+{"version":3,"sources":["../../../../src/components/Combobox/types.tsx"],"sourcesContent":["import type { ReactElement, Ref } from \"react\";\nimport type { TextFieldElementType, TextFieldProps } from \"../TextField\";\n\nexport type ComboboxBaseProps = TextFieldProps & {\n  /** An icon to display in TextField (left side) */\n  icon?: ReactElement;\n  /** The default value of the selected option */\n  defaultValue?: string | undefined;\n  /** Callback when the selected option changes */\n  onSelected?: ((value: string) => void) | undefined;\n};\n\nexport type ComboboxSyncProps = ComboboxBaseProps & {\n  /** The list of options to display in the dropdown */\n  options: ComboboxOptions;\n  asyncOptions?: never;\n  delay?: never;\n  minLength?: never;\n};\n\nexport type ComboboxAsyncProps = ComboboxBaseProps & {\n  options?: never;\n  delay?: number;\n  minLength?: number;\n  /** A function that returns a list of options to display in the dropdown */\n  asyncOptions:\n    | ((inputValue: string) => ComboboxOptions)\n    | ((\n        inputValue: string,\n        options?: { signal?: AbortSignal },\n      ) => Promise<ComboboxOptions>);\n};\n\nexport type ComboboxProps = ComboboxAsyncProps | ComboboxSyncProps;\n\nexport type ComboboxOption = string | { label: string; value: string };\n\nexport type ComboboxOptionGroup = {\n  heading: string;\n  options: ComboboxOption[];\n};\n\nexport type ComboboxOptions = ComboboxOption[] | ComboboxOptionGroup[];\n\nexport type ComboboxElementType = TextFieldElementType;\n\nexport type ComboboxRef = Ref<ComboboxElementType>;\n\nexport type ComboboxOptionProps = {\n  option: ComboboxOption;\n  index: number;\n  groupIndex?: number;\n  isHighlighted: boolean;\n  onOptionSelect: (option: ComboboxOption) => void;\n  id: string;\n};\n"],"names":[],"mappings":"AAgDA,WAOE"}

package/dist/types/components/Combobox/types.d.ts

@@ -1,8 +1,6 @@
 import type { ReactElement, Ref } from "react";
 import type { TextFieldElementType, TextFieldProps } from "../TextField";
-export type ComboboxProps = TextFieldProps & {
-    /** The list of options to display in the dropdown */
-    options: ComboboxOptions | ((filter: string) => ComboboxOptions) | ((filter: string) => Promise<ComboboxOptions>);
+export type ComboboxBaseProps = TextFieldProps & {
     /** An icon to display in TextField (left side) */
     icon?: ReactElement;
     /** The default value of the selected option */
@@ -10,6 +8,23 @@ export type ComboboxProps = TextFieldProps & {
     /** Callback when the selected option changes */
     onSelected?: ((value: string) => void) | undefined;
 };
+export type ComboboxSyncProps = ComboboxBaseProps & {
+    /** The list of options to display in the dropdown */
+    options: ComboboxOptions;
+    asyncOptions?: never;
+    delay?: never;
+    minLength?: never;
+};
+export type ComboboxAsyncProps = ComboboxBaseProps & {
+    options?: never;
+    delay?: number;
+    minLength?: number;
+    /** A function that returns a list of options to display in the dropdown */
+    asyncOptions: ((inputValue: string) => ComboboxOptions) | ((inputValue: string, options?: {
+        signal?: AbortSignal;
+    }) => Promise<ComboboxOptions>);
+};
+export type ComboboxProps = ComboboxAsyncProps | ComboboxSyncProps;
 export type ComboboxOption = string | {
     label: string;
     value: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Combobox/Combobox.tsx

@@ -17,8 +17,15 @@ export const Combobox: ForwardedRefComponent<
   ComboboxProps,
   ComboboxElementType
 > = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {
-  const { defaultValue, options, onSelected, className, placeholder, icon } =
-    props;
+  const {
+    defaultValue,
+    options,
+    asyncOptions,
+    onSelected,
+    className,
+    placeholder,
+    icon,
+  } = props;
 
   const fallbackRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(defaultValue || "");
@@ -40,8 +47,8 @@ export const Combobox: ForwardedRefComponent<
 
   useEffect(() => {
     const fetchOptions = async () => {
-      if (typeof options === "function") {
-        const result = await options(inputValue);
+      if (asyncOptions) {
+        const result = await asyncOptions(inputValue);
         setFilteredOptions(result);
       } else {
         setFilteredOptions(filterOptions(options, inputValue));
@@ -49,7 +56,7 @@ export const Combobox: ForwardedRefComponent<
     };
 
     fetchOptions();
-  }, [inputValue, options]);
+  }, [inputValue, options, asyncOptions]);
 
   const handleFocus = () => {
     if (blurTimeoutRef.current) {

package/src/components/Combobox/types.tsx

@@ -1,12 +1,7 @@
 import type { ReactElement, Ref } from "react";
 import type { TextFieldElementType, TextFieldProps } from "../TextField";
 
-export type ComboboxProps = TextFieldProps & {
-  /** The list of options to display in the dropdown */
-  options:
-    | ComboboxOptions
-    | ((filter: string) => ComboboxOptions)
-    | ((filter: string) => Promise<ComboboxOptions>);
+export type ComboboxBaseProps = TextFieldProps & {
   /** An icon to display in TextField (left side) */
   icon?: ReactElement;
   /** The default value of the selected option */
@@ -15,6 +10,29 @@ export type ComboboxProps = TextFieldProps & {
   onSelected?: ((value: string) => void) | undefined;
 };
 
+export type ComboboxSyncProps = ComboboxBaseProps & {
+  /** The list of options to display in the dropdown */
+  options: ComboboxOptions;
+  asyncOptions?: never;
+  delay?: never;
+  minLength?: never;
+};
+
+export type ComboboxAsyncProps = ComboboxBaseProps & {
+  options?: never;
+  delay?: number;
+  minLength?: number;
+  /** A function that returns a list of options to display in the dropdown */
+  asyncOptions:
+    | ((inputValue: string) => ComboboxOptions)
+    | ((
+        inputValue: string,
+        options?: { signal?: AbortSignal },
+      ) => Promise<ComboboxOptions>);
+};
+
+export type ComboboxProps = ComboboxAsyncProps | ComboboxSyncProps;
+
 export type ComboboxOption = string | { label: string; value: string };
 
 export type ComboboxOptionGroup = {

package/src/public-whitelist.test.ts

@@ -32,4 +32,4 @@ test("Doesn't add new publicly published packages without appsec approval", asyn
       expect(PUBLIC_PACKAGE_WHITELIST).toContain(packageJson.name);
     }
   }
-});
+}, 30_000); // Set timeout to 30 seconds