@simplybusiness/mobius 9.2.0 → 9.3.0

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

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Combobox/types.tsx
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Combobox/types.tsx"],
+  "sourcesContent": ["import type { ReactElement, Ref } from \"react\";\nimport type { TextFieldElementType, TextFieldProps } from \"../TextField\";\n\nexport type ComboboxOption =\n  | string\n  | { id?: string; label: string; value: string };\n\nexport type ComboboxBaseProps<T extends ComboboxOption = ComboboxOption> =\n  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: T) => void) | undefined;\n    optionComponent?: (\n      props: Pick<ComboboxOptionProps<T>, \"option\" | \"isHighlighted\">,\n    ) => ReactElement;\n    /** Prefix for option data-testid attributes (default: \"combobox-option\") */\n    optionTestIdPrefix?: string;\n  };\n\nexport type ComboboxSyncProps<T extends ComboboxOption = ComboboxOption> =\n  ComboboxBaseProps<T> & {\n    /** The list of options to display in the dropdown */\n    options: ComboboxOptions<T>;\n    asyncOptions?: never;\n    delay?: never;\n    minSearchLength?: never;\n    onSearched?: never;\n  };\n\nexport type ComboboxAsyncProps<T extends ComboboxOption = ComboboxOption> =\n  ComboboxBaseProps<T> & {\n    options?: never;\n    delay?: number;\n    minSearchLength?: number | undefined;\n    /** A function that returns a list of options to display in the dropdown */\n    asyncOptions:\n      | ((inputValue: string) => ComboboxOptions<T>)\n      | ((\n          inputValue: string,\n          options?: { signal?: AbortSignal },\n        ) => Promise<ComboboxOptions<T>>);\n    onSearched?: (searchTerm: string) => void;\n  };\n\nexport type ComboboxProps<T extends ComboboxOption = ComboboxOption> =\n  | ComboboxAsyncProps<T>\n  | ComboboxSyncProps<T>;\n\nexport type ComboboxOptionGroup<T extends ComboboxOption = ComboboxOption> = {\n  heading: string;\n  options: readonly T[];\n};\n\nexport type ComboboxOptions<T extends ComboboxOption = ComboboxOption> =\n  | T[]\n  | ComboboxOptionGroup<T>[];\n\nexport type ComboboxElementType = TextFieldElementType;\n\nexport type ComboboxRef = Ref<ComboboxElementType>;\n\nexport type ComboboxOptionProps<T extends ComboboxOption = ComboboxOption> = {\n  option: T;\n  optionComponent?: ComboboxBaseProps<T>[\"optionComponent\"];\n  isHighlighted: boolean;\n  onOptionSelect: (option: T) => void;\n  id: string;\n  optionTestIdPrefix?: string;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,115 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Combobox/useComboboxHighlight.tsx
+var useComboboxHighlight_exports = {};
+__export(useComboboxHighlight_exports, {
+  useComboboxHighlight: () => useComboboxHighlight
+});
+module.exports = __toCommonJS(useComboboxHighlight_exports);
+var import_react = require("react");
+
+// src/components/Combobox/utils.tsx
+function isOptionGroup(options) {
+  if (!options) return false;
+  return typeof options[0] === "object" && "options" in options[0] && options[0].options !== void 0 && "heading" in options[0] && options[0].heading !== void 0;
+}
+
+// src/components/Combobox/useComboboxHighlight.tsx
+function useComboboxHighlight(options) {
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react.useState)(
+    options && options.length ? 0 : -1
+  );
+  const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react.useState)(0);
+  function highlightNextOption() {
+    const isGroup = isOptionGroup(options);
+    if (!options) {
+      return;
+    }
+    if (isGroup) {
+      const group = options[highlightedGroupIndex];
+      if (highlightedIndex === group.options.length - 1) {
+        if (highlightedGroupIndex === options.length - 1) {
+          return;
+        }
+        setHighlightedIndex(0);
+        setHighlightedGroupIndex(highlightedGroupIndex + 1);
+      } else {
+        setHighlightedIndex(highlightedIndex + 1);
+      }
+    } else {
+      if (highlightedIndex === options.length - 1) {
+        return;
+      }
+      setHighlightedIndex(highlightedIndex + 1);
+    }
+  }
+  function highlightPreviousOption() {
+    const isGroup = isOptionGroup(options);
+    if (highlightedIndex === 0 && highlightedGroupIndex === 0) {
+      return;
+    }
+    if (isGroup) {
+      if (highlightedIndex === 0) {
+        const prevGroupIndex = highlightedGroupIndex - 1;
+        const prevGroup = options[prevGroupIndex];
+        setHighlightedGroupIndex(prevGroupIndex);
+        setHighlightedIndex(prevGroup.options.length - 1);
+      } else {
+        setHighlightedIndex(highlightedIndex - 1);
+      }
+    } else {
+      setHighlightedIndex(highlightedIndex - 1);
+    }
+  }
+  function highlightFirstOption() {
+    setHighlightedIndex(0);
+    setHighlightedGroupIndex(0);
+  }
+  function highlightLastOption() {
+    const isGroup = isOptionGroup(options);
+    if (!options) {
+      return;
+    }
+    if (isGroup) {
+      const lastGroupIndex = options.length - 1;
+      const lastGroup = options[lastGroupIndex];
+      setHighlightedGroupIndex(lastGroupIndex);
+      setHighlightedIndex(lastGroup.options.length - 1);
+    } else {
+      setHighlightedIndex(options.length - 1);
+    }
+  }
+  const clearHighlight = () => {
+    setHighlightedIndex(
+      typeof options === "undefined" || options.length ? 0 : -1
+    );
+    setHighlightedGroupIndex(0);
+  };
+  return {
+    highlightedIndex,
+    highlightedGroupIndex,
+    highlightPreviousOption,
+    highlightNextOption,
+    highlightFirstOption,
+    highlightLastOption,
+    clearHighlight
+  };
+}
+//# sourceMappingURL=useComboboxHighlight.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Combobox/useComboboxHighlight.tsx", "../../../../src/components/Combobox/utils.tsx"],
+  "sourcesContent": ["import { useState } from \"react\";\nimport type { ComboboxOptions } from \"./types\";\nimport { isOptionGroup } from \"./utils\";\n\nexport function useComboboxHighlight(options: ComboboxOptions | undefined) {\n  const [highlightedIndex, setHighlightedIndex] = useState(\n    options && options.length ? 0 : -1,\n  );\n  const [highlightedGroupIndex, setHighlightedGroupIndex] = useState(0);\n\n  function highlightNextOption() {\n    const isGroup = isOptionGroup(options);\n\n    if (!options) {\n      return;\n    }\n\n    if (isGroup) {\n      const group = options[highlightedGroupIndex];\n      if (highlightedIndex === group.options.length - 1) {\n        if (highlightedGroupIndex === options.length - 1) {\n          return; // At the end of last group\n        }\n        // Move to next group\n        setHighlightedIndex(0);\n        setHighlightedGroupIndex(highlightedGroupIndex + 1);\n      } else {\n        setHighlightedIndex(highlightedIndex + 1);\n      }\n    } else {\n      if (highlightedIndex === options.length - 1) {\n        return; // At the end of options\n      }\n      setHighlightedIndex(highlightedIndex + 1);\n    }\n  }\n\n  function highlightPreviousOption() {\n    const isGroup = isOptionGroup(options);\n\n    if (highlightedIndex === 0 && highlightedGroupIndex === 0) {\n      return; // Already at start\n    }\n\n    if (isGroup) {\n      if (highlightedIndex === 0) {\n        // Move to previous group\n        const prevGroupIndex = highlightedGroupIndex - 1;\n        const prevGroup = options[prevGroupIndex];\n        setHighlightedGroupIndex(prevGroupIndex);\n        setHighlightedIndex(prevGroup.options.length - 1);\n      } else {\n        setHighlightedIndex(highlightedIndex - 1);\n      }\n    } else {\n      setHighlightedIndex(highlightedIndex - 1);\n    }\n  }\n\n  function highlightFirstOption() {\n    setHighlightedIndex(0);\n    setHighlightedGroupIndex(0);\n  }\n\n  function highlightLastOption() {\n    const isGroup = isOptionGroup(options);\n\n    if (!options) {\n      return;\n    }\n\n    if (isGroup) {\n      const lastGroupIndex = options.length - 1;\n      const lastGroup = options[lastGroupIndex];\n      setHighlightedGroupIndex(lastGroupIndex);\n      setHighlightedIndex(lastGroup.options.length - 1);\n    } else {\n      setHighlightedIndex(options.length - 1);\n    }\n  }\n\n  const clearHighlight = () => {\n    setHighlightedIndex(\n      typeof options === \"undefined\" || options.length ? 0 : -1,\n    );\n    setHighlightedGroupIndex(0);\n  };\n\n  return {\n    highlightedIndex,\n    highlightedGroupIndex,\n    highlightPreviousOption,\n    highlightNextOption,\n    highlightFirstOption,\n    highlightLastOption,\n    clearHighlight,\n  };\n}\n", "import type {\n  ComboboxOption,\n  ComboboxOptionGroup,\n  ComboboxOptions,\n} from \"./types\";\n\n// FIXME: This might be better handled with Zod\nexport function isOptionGroup<T extends ComboboxOption>(\n  options: ComboboxOptions<T> | undefined,\n): options is ComboboxOptionGroup<T>[] {\n  if (!options) return false;\n  return (\n    typeof options[0] === \"object\" &&\n    \"options\" in options[0] &&\n    options[0].options !== undefined &&\n    \"heading\" in options[0] &&\n    options[0].heading !== undefined\n  );\n}\n\nexport const getOptionValue = (option: ComboboxOption | undefined) =>\n  typeof option === \"string\" ? option : option?.value;\n\nexport const getOptionLabel = (option: ComboboxOption | undefined) =>\n  typeof option === \"string\" ? option : option?.label;\n\nexport function filterOptions<T extends ComboboxOption>(\n  options: ComboboxOptions<T>,\n  inputValue: string,\n): ComboboxOptions<T> {\n  if (isOptionGroup(options)) {\n    return options\n      .map(optionGroup => ({\n        ...optionGroup,\n        options: optionGroup.options.filter(option =>\n          getOptionLabel(option)!\n            .toLowerCase()\n            .includes(inputValue.toLowerCase()),\n        ),\n      }))\n      .filter(optionGroup => optionGroup.options.length > 0);\n  }\n\n  return options.filter(option =>\n    getOptionLabel(option)!.toLowerCase().includes(inputValue.toLowerCase()),\n  );\n}\n\nexport function clamp(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n\nexport const buildOptionTestId = (prefix: string, value: string): string =>\n  `${prefix}-${value\n    .trim()\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\")}`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;;;ACOlB,SAAS,cACd,SACqC;AACrC,MAAI,CAAC,QAAS,QAAO;AACrB,SACE,OAAO,QAAQ,CAAC,MAAM,YACtB,aAAa,QAAQ,CAAC,KACtB,QAAQ,CAAC,EAAE,YAAY,UACvB,aAAa,QAAQ,CAAC,KACtB,QAAQ,CAAC,EAAE,YAAY;AAE3B;;;ADdO,SAAS,qBAAqB,SAAsC;AACzE,QAAM,CAAC,kBAAkB,mBAAmB,QAAI;AAAA,IAC9C,WAAW,QAAQ,SAAS,IAAI;AAAA,EAClC;AACA,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,CAAC;AAEpE,WAAS,sBAAsB;AAC7B,UAAM,UAAU,cAAc,OAAO;AAErC,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,QAAI,SAAS;AACX,YAAM,QAAQ,QAAQ,qBAAqB;AAC3C,UAAI,qBAAqB,MAAM,QAAQ,SAAS,GAAG;AACjD,YAAI,0BAA0B,QAAQ,SAAS,GAAG;AAChD;AAAA,QACF;AAEA,4BAAoB,CAAC;AACrB,iCAAyB,wBAAwB,CAAC;AAAA,MACpD,OAAO;AACL,4BAAoB,mBAAmB,CAAC;AAAA,MAC1C;AAAA,IACF,OAAO;AACL,UAAI,qBAAqB,QAAQ,SAAS,GAAG;AAC3C;AAAA,MACF;AACA,0BAAoB,mBAAmB,CAAC;AAAA,IAC1C;AAAA,EACF;AAEA,WAAS,0BAA0B;AACjC,UAAM,UAAU,cAAc,OAAO;AAErC,QAAI,qBAAqB,KAAK,0BAA0B,GAAG;AACzD;AAAA,IACF;AAEA,QAAI,SAAS;AACX,UAAI,qBAAqB,GAAG;AAE1B,cAAM,iBAAiB,wBAAwB;AAC/C,cAAM,YAAY,QAAQ,cAAc;AACxC,iCAAyB,cAAc;AACvC,4BAAoB,UAAU,QAAQ,SAAS,CAAC;AAAA,MAClD,OAAO;AACL,4BAAoB,mBAAmB,CAAC;AAAA,MAC1C;AAAA,IACF,OAAO;AACL,0BAAoB,mBAAmB,CAAC;AAAA,IAC1C;AAAA,EACF;AAEA,WAAS,uBAAuB;AAC9B,wBAAoB,CAAC;AACrB,6BAAyB,CAAC;AAAA,EAC5B;AAEA,WAAS,sBAAsB;AAC7B,UAAM,UAAU,cAAc,OAAO;AAErC,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,QAAI,SAAS;AACX,YAAM,iBAAiB,QAAQ,SAAS;AACxC,YAAM,YAAY,QAAQ,cAAc;AACxC,+BAAyB,cAAc;AACvC,0BAAoB,UAAU,QAAQ,SAAS,CAAC;AAAA,IAClD,OAAO;AACL,0BAAoB,QAAQ,SAAS,CAAC;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,iBAAiB,MAAM;AAC3B;AAAA,MACE,OAAO,YAAY,eAAe,QAAQ,SAAS,IAAI;AAAA,IACzD;AACA,6BAAyB,CAAC;AAAA,EAC5B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,129 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Combobox/useComboboxOptions.ts
+var useComboboxOptions_exports = {};
+__export(useComboboxOptions_exports, {
+  useComboboxOptions: () => useComboboxOptions
+});
+module.exports = __toCommonJS(useComboboxOptions_exports);
+var import_mobius_hooks = require("@simplybusiness/mobius-hooks");
+var import_react = require("react");
+
+// src/components/Combobox/utils.tsx
+function isOptionGroup(options) {
+  if (!options) return false;
+  return typeof options[0] === "object" && "options" in options[0] && options[0].options !== void 0 && "heading" in options[0] && options[0].heading !== void 0;
+}
+var getOptionLabel = (option) => typeof option === "string" ? option : option?.label;
+function filterOptions(options, inputValue) {
+  if (isOptionGroup(options)) {
+    return options.map((optionGroup) => ({
+      ...optionGroup,
+      options: optionGroup.options.filter(
+        (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
+      )
+    })).filter((optionGroup) => optionGroup.options.length > 0);
+  }
+  return options.filter(
+    (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
+  );
+}
+
+// src/components/Combobox/useComboboxOptions.ts
+function useComboboxOptions({
+  options,
+  asyncOptions,
+  delay = 300,
+  minSearchLength = 3,
+  inputValue = "",
+  skipNextDebounceRef,
+  onSearched
+}) {
+  const [filteredOptions, setFilteredOptions] = (0, import_react.useState)(void 0);
+  const debouncedInputValue = (0, import_mobius_hooks.useDebouncedValue)(
+    inputValue,
+    // Don't debounce synchronous options
+    options ? 0 : delay
+  );
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const asyncOptionsRef = (0, import_react.useRef)(asyncOptions);
+  asyncOptionsRef.current = asyncOptions;
+  const onSearchedRef = (0, import_react.useRef)(onSearched);
+  onSearchedRef.current = onSearched;
+  (0, import_react.useEffect)(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+    const fetchOptions = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        if (asyncOptionsRef.current) {
+          if (debouncedInputValue.length < minSearchLength) {
+            setFilteredOptions(void 0);
+            return;
+          }
+          const result = await asyncOptionsRef.current(debouncedInputValue, {
+            signal
+          });
+          setFilteredOptions(result);
+          onSearchedRef.current?.(debouncedInputValue);
+        } else if (options) {
+          setFilteredOptions(filterOptions(options, debouncedInputValue));
+        } else {
+          setError(new Error("No options provided"));
+        }
+      } catch (e) {
+        if (e instanceof DOMException && e.name === "AbortError") {
+          return;
+        }
+        setError(e);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    if (!skipNextDebounceRef?.current) {
+      void fetchOptions();
+    } else {
+      skipNextDebounceRef.current = false;
+    }
+    return () => {
+      controller.abort();
+    };
+  }, [
+    debouncedInputValue,
+    options,
+    delay,
+    minSearchLength,
+    skipNextDebounceRef
+  ]);
+  function updateFilteredOptions(newOptions) {
+    setIsLoading(true);
+    return newOptions.then(setFilteredOptions).catch(setError).finally(() => setIsLoading(false));
+  }
+  return {
+    filteredOptions,
+    updateFilteredOptions,
+    isLoading,
+    error,
+    isError: error != null
+  };
+}
+//# sourceMappingURL=useComboboxOptions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Combobox/useComboboxOptions.ts", "../../../../src/components/Combobox/utils.tsx"],
+  "sourcesContent": ["import { useDebouncedValue } from \"@simplybusiness/mobius-hooks\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { ComboboxOption, ComboboxOptions, ComboboxProps } from \"./types\";\nimport { filterOptions } from \"./utils\";\n\nexport type UseComboboxOptionsProps<T extends ComboboxOption> = Pick<\n  ComboboxProps<T>,\n  \"options\" | \"asyncOptions\" | \"delay\" | \"minSearchLength\"\n> & {\n  skipNextDebounceRef?: React.MutableRefObject<boolean>;\n  inputValue?: string;\n  onSearched?: (searchTerm: string) => void;\n};\n\nexport function useComboboxOptions<T extends ComboboxOption>({\n  options,\n  asyncOptions,\n  delay = 300,\n  minSearchLength = 3,\n  inputValue = \"\",\n  skipNextDebounceRef,\n  onSearched,\n}: UseComboboxOptionsProps<T>) {\n  const [filteredOptions, setFilteredOptions] = useState<\n    ComboboxOptions<T> | undefined\n  >(undefined);\n  const debouncedInputValue = useDebouncedValue(\n    inputValue,\n    // Don't debounce synchronous options\n    options ? 0 : delay,\n  );\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  // Keep refs to latest callbacks so the fetch effect doesn't re-run when\n  // their references change (e.g. due to un-memoised props in parent)\n  const asyncOptionsRef = useRef(asyncOptions);\n  asyncOptionsRef.current = asyncOptions;\n  const onSearchedRef = useRef(onSearched);\n  onSearchedRef.current = onSearched;\n\n  useEffect(() => {\n    const controller = new AbortController();\n    const { signal } = controller;\n\n    const fetchOptions = async () => {\n      setIsLoading(true);\n      setError(null);\n      try {\n        if (asyncOptionsRef.current) {\n          if (debouncedInputValue.length < minSearchLength) {\n            setFilteredOptions(undefined);\n            return;\n          }\n          const result = await asyncOptionsRef.current(debouncedInputValue, {\n            signal,\n          });\n          setFilteredOptions(result);\n          onSearchedRef.current?.(debouncedInputValue);\n        } else if (options) {\n          setFilteredOptions(filterOptions(options, debouncedInputValue));\n        } else {\n          setError(new Error(\"No options provided\"));\n        }\n      } catch (e: unknown) {\n        if (e instanceof DOMException && e.name === \"AbortError\") {\n          // Ignore abort errors\n          return;\n        }\n        setError(e as Error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    if (!skipNextDebounceRef?.current) {\n      void fetchOptions();\n    } else {\n      skipNextDebounceRef.current = false;\n    }\n\n    return () => {\n      controller.abort();\n    };\n  }, [\n    debouncedInputValue,\n    options,\n    delay,\n    minSearchLength,\n    skipNextDebounceRef,\n  ]);\n\n  function updateFilteredOptions(newOptions: Promise<ComboboxOptions<T>>) {\n    setIsLoading(true);\n    return newOptions\n      .then(setFilteredOptions)\n      .catch(setError)\n      .finally(() => setIsLoading(false));\n  }\n\n  return {\n    filteredOptions,\n    updateFilteredOptions,\n    isLoading,\n    error,\n    isError: error != null,\n  };\n}\n", "import type {\n  ComboboxOption,\n  ComboboxOptionGroup,\n  ComboboxOptions,\n} from \"./types\";\n\n// FIXME: This might be better handled with Zod\nexport function isOptionGroup<T extends ComboboxOption>(\n  options: ComboboxOptions<T> | undefined,\n): options is ComboboxOptionGroup<T>[] {\n  if (!options) return false;\n  return (\n    typeof options[0] === \"object\" &&\n    \"options\" in options[0] &&\n    options[0].options !== undefined &&\n    \"heading\" in options[0] &&\n    options[0].heading !== undefined\n  );\n}\n\nexport const getOptionValue = (option: ComboboxOption | undefined) =>\n  typeof option === \"string\" ? option : option?.value;\n\nexport const getOptionLabel = (option: ComboboxOption | undefined) =>\n  typeof option === \"string\" ? option : option?.label;\n\nexport function filterOptions<T extends ComboboxOption>(\n  options: ComboboxOptions<T>,\n  inputValue: string,\n): ComboboxOptions<T> {\n  if (isOptionGroup(options)) {\n    return options\n      .map(optionGroup => ({\n        ...optionGroup,\n        options: optionGroup.options.filter(option =>\n          getOptionLabel(option)!\n            .toLowerCase()\n            .includes(inputValue.toLowerCase()),\n        ),\n      }))\n      .filter(optionGroup => optionGroup.options.length > 0);\n  }\n\n  return options.filter(option =>\n    getOptionLabel(option)!.toLowerCase().includes(inputValue.toLowerCase()),\n  );\n}\n\nexport function clamp(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n\nexport const buildOptionTestId = (prefix: string, value: string): string =>\n  `${prefix}-${value\n    .trim()\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\")}`;\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Combobox/utils.tsx
+var utils_exports = {};
+__export(utils_exports, {
+  buildOptionTestId: () => buildOptionTestId,
+  clamp: () => clamp,
+  filterOptions: () => filterOptions,
+  getOptionLabel: () => getOptionLabel,
+  getOptionValue: () => getOptionValue,
+  isOptionGroup: () => isOptionGroup
+});
+module.exports = __toCommonJS(utils_exports);
+function isOptionGroup(options) {
+  if (!options) return false;
+  return typeof options[0] === "object" && "options" in options[0] && options[0].options !== void 0 && "heading" in options[0] && options[0].heading !== void 0;
+}
+var getOptionValue = (option) => typeof option === "string" ? option : option?.value;
+var getOptionLabel = (option) => typeof option === "string" ? option : option?.label;
+function filterOptions(options, inputValue) {
+  if (isOptionGroup(options)) {
+    return options.map((optionGroup) => ({
+      ...optionGroup,
+      options: optionGroup.options.filter(
+        (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
+      )
+    })).filter((optionGroup) => optionGroup.options.length > 0);
+  }
+  return options.filter(
+    (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
+  );
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+var buildOptionTestId = (prefix, value) => `${prefix}-${value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")}`;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Combobox/utils.tsx"],
+  "sourcesContent": ["import type {\n  ComboboxOption,\n  ComboboxOptionGroup,\n  ComboboxOptions,\n} from \"./types\";\n\n// FIXME: This might be better handled with Zod\nexport function isOptionGroup<T extends ComboboxOption>(\n  options: ComboboxOptions<T> | undefined,\n): options is ComboboxOptionGroup<T>[] {\n  if (!options) return false;\n  return (\n    typeof options[0] === \"object\" &&\n    \"options\" in options[0] &&\n    options[0].options !== undefined &&\n    \"heading\" in options[0] &&\n    options[0].heading !== undefined\n  );\n}\n\nexport const getOptionValue = (option: ComboboxOption | undefined) =>\n  typeof option === \"string\" ? option : option?.value;\n\nexport const getOptionLabel = (option: ComboboxOption | undefined) =>\n  typeof option === \"string\" ? option : option?.label;\n\nexport function filterOptions<T extends ComboboxOption>(\n  options: ComboboxOptions<T>,\n  inputValue: string,\n): ComboboxOptions<T> {\n  if (isOptionGroup(options)) {\n    return options\n      .map(optionGroup => ({\n        ...optionGroup,\n        options: optionGroup.options.filter(option =>\n          getOptionLabel(option)!\n            .toLowerCase()\n            .includes(inputValue.toLowerCase()),\n        ),\n      }))\n      .filter(optionGroup => optionGroup.options.length > 0);\n  }\n\n  return options.filter(option =>\n    getOptionLabel(option)!.toLowerCase().includes(inputValue.toLowerCase()),\n  );\n}\n\nexport function clamp(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n\nexport const buildOptionTestId = (prefix: string, value: string): string =>\n  `${prefix}-${value\n    .trim()\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\")}`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOO,SAAS,cACd,SACqC;AACrC,MAAI,CAAC,QAAS,QAAO;AACrB,SACE,OAAO,QAAQ,CAAC,MAAM,YACtB,aAAa,QAAQ,CAAC,KACtB,QAAQ,CAAC,EAAE,YAAY,UACvB,aAAa,QAAQ,CAAC,KACtB,QAAQ,CAAC,EAAE,YAAY;AAE3B;AAEO,IAAM,iBAAiB,CAAC,WAC7B,OAAO,WAAW,WAAW,SAAS,QAAQ;AAEzC,IAAM,iBAAiB,CAAC,WAC7B,OAAO,WAAW,WAAW,SAAS,QAAQ;AAEzC,SAAS,cACd,SACA,YACoB;AACpB,MAAI,cAAc,OAAO,GAAG;AAC1B,WAAO,QACJ,IAAI,kBAAgB;AAAA,MACnB,GAAG;AAAA,MACH,SAAS,YAAY,QAAQ;AAAA,QAAO,YAClC,eAAe,MAAM,EAClB,YAAY,EACZ,SAAS,WAAW,YAAY,CAAC;AAAA,MACtC;AAAA,IACF,EAAE,EACD,OAAO,iBAAe,YAAY,QAAQ,SAAS,CAAC;AAAA,EACzD;AAEA,SAAO,QAAQ;AAAA,IAAO,YACpB,eAAe,MAAM,EAAG,YAAY,EAAE,SAAS,WAAW,YAAY,CAAC;AAAA,EACzE;AACF;AAEO,SAAS,MAAM,OAAe,KAAa,KAAa;AAC7D,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAEO,IAAM,oBAAoB,CAAC,QAAgB,UAChD,GAAG,MAAM,IAAI,MACV,KAAK,EACL,YAAY,EACZ,QAAQ,eAAe,GAAG,EAC1B,QAAQ,YAAY,EAAE,CAAC;",
+  "names": []
+}

package/dist/cjs/components/Container/Container.js

@@ -0,0 +1,68 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Container/Container.tsx
+var Container_exports = {};
+__export(Container_exports, {
+  Container: () => Container
+});
+module.exports = __toCommonJS(Container_exports);
+var import_dedupe = __toESM(require("classnames/dedupe"));
+
+// src/utils/sizeClasses.ts
+var sizeClasses = (size) => {
+  if (!size) {
+    return {};
+  }
+  return {
+    "--is-xxs": size === "xxs",
+    "--is-xs": size === "xs",
+    "--is-sm": size === "sm",
+    "--is-md": size === "md",
+    "--is-lg": size === "lg",
+    "--is-xl": size === "xl",
+    "--is-xxl": size === "xxl"
+  };
+};
+
+// src/components/Container/Container.tsx
+var import_Container = require("@simplybusiness/mobius/src/components/Container/Container.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Container = ({ ref, ...props }) => {
+  const { elementType: Element = "div", size = "md", ...otherProps } = props;
+  const classes = (0, import_dedupe.default)(
+    "mobius",
+    "mobius-container",
+    sizeClasses(size),
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { ref, ...otherProps, className: classes });
+};
+Container.displayName = "Container";
+//# sourceMappingURL=Container.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Container/Container.tsx", "../../../../src/utils/sizeClasses.ts"],
+  "sourcesContent": ["import type {\n  RefAttributes,\n  ReactNode,\n  ElementType,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\nimport \"./Container.css\";\n\nexport type ContainerElementType = HTMLElement;\n\nexport interface ContainerProps\n  extends DOMProps, RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: ElementType;\n  size?: SizeType;\n  children?: ReactNode;\n  style?: CSSProperties;\n}\n\nconst Container = ({ ref, ...props }: ContainerProps) => {\n  const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-container\",\n    sizeClasses(size),\n    otherProps.className,\n  );\n\n  return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nContainer.displayName = \"Container\";\nexport { Container };\n", "import type { SizeType } from \"../types/size\";\n\nexport const sizeClasses = (size: SizeType | undefined) => {\n  if (!size) {\n    return {};\n  }\n\n  return {\n    \"--is-xxs\": size === \"xxs\",\n    \"--is-xs\": size === \"xs\",\n    \"--is-sm\": size === \"sm\",\n    \"--is-md\": size === \"md\",\n    \"--is-lg\": size === \"lg\",\n    \"--is-xl\": size === \"xl\",\n    \"--is-xxl\": size === \"xxl\",\n  };\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,oBAAuB;;;ACJhB,IAAM,cAAc,CAAC,SAA+B;AACzD,MAAI,CAAC,MAAM;AACT,WAAO,CAAC;AAAA,EACV;AAEA,SAAO;AAAA,IACL,YAAY,SAAS;AAAA,IACrB,WAAW,SAAS;AAAA,IACpB,WAAW,SAAS;AAAA,IACpB,WAAW,SAAS;AAAA,IACpB,WAAW,SAAS;AAAA,IACpB,WAAW,SAAS;AAAA,IACpB,YAAY,SAAS;AAAA,EACvB;AACF;;;ADNA,uBAAO;AA0BE;AAVT,IAAM,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,MAAsB;AACvD,QAAM,EAAE,aAAa,UAAU,OAAO,OAAO,MAAM,GAAG,WAAW,IAAI;AAErE,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA,YAAY,IAAI;AAAA,IAChB,WAAW;AAAA,EACb;AAEA,SAAO,4CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,UAAU,cAAc;",
+  "names": ["classNames"]
+}

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

@@ -0,0 +1,70 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Container/index.tsx
+var Container_exports = {};
+__export(Container_exports, {
+  Container: () => Container
+});
+module.exports = __toCommonJS(Container_exports);
+
+// src/components/Container/Container.tsx
+var import_dedupe = __toESM(require("classnames/dedupe"));
+
+// src/utils/sizeClasses.ts
+var sizeClasses = (size) => {
+  if (!size) {
+    return {};
+  }
+  return {
+    "--is-xxs": size === "xxs",
+    "--is-xs": size === "xs",
+    "--is-sm": size === "sm",
+    "--is-md": size === "md",
+    "--is-lg": size === "lg",
+    "--is-xl": size === "xl",
+    "--is-xxl": size === "xxl"
+  };
+};
+
+// src/components/Container/Container.tsx
+var import_Container = require("@simplybusiness/mobius/src/components/Container/Container.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Container = ({ ref, ...props }) => {
+  const { elementType: Element = "div", size = "md", ...otherProps } = props;
+  const classes = (0, import_dedupe.default)(
+    "mobius",
+    "mobius-container",
+    sizeClasses(size),
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { ref, ...otherProps, className: classes });
+};
+Container.displayName = "Container";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Container/index.tsx", "../../../../src/components/Container/Container.tsx", "../../../../src/utils/sizeClasses.ts"],
+  "sourcesContent": ["export * from \"./Container\";\n", "import type {\n  RefAttributes,\n  ReactNode,\n  ElementType,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\nimport \"./Container.css\";\n\nexport type ContainerElementType = HTMLElement;\n\nexport interface ContainerProps\n  extends DOMProps, RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: ElementType;\n  size?: SizeType;\n  children?: ReactNode;\n  style?: CSSProperties;\n}\n\nconst Container = ({ ref, ...props }: ContainerProps) => {\n  const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-container\",\n    sizeClasses(size),\n    otherProps.className,\n  );\n\n  return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nContainer.displayName = \"Container\";\nexport { Container };\n", "import type { SizeType } from \"../types/size\";\n\nexport const sizeClasses = (size: SizeType | undefined) => {\n  if (!size) {\n    return {};\n  }\n\n  return {\n    \"--is-xxs\": size === \"xxs\",\n    \"--is-xs\": size === \"xs\",\n    \"--is-sm\": size === \"sm\",\n    \"--is-md\": size === \"md\",\n    \"--is-lg\": size === \"lg\",\n    \"--is-xl\": size === \"xl\",\n    \"--is-xxl\": size === \"xxl\",\n  };\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,oBAAuB;;;ACJhB,IAAM,cAAc,CAAC,SAA+B;AACzD,MAAI,CAAC,MAAM;AACT,WAAO,CAAC;AAAA,EACV;AAEA,SAAO;AAAA,IACL,YAAY,SAAS;AAAA,IACrB,WAAW,SAAS;AAAA,IACpB,WAAW,SAAS;AAAA,IACpB,WAAW,SAAS;AAAA,IACpB,WAAW,SAAS;AAAA,IACpB,WAAW,SAAS;AAAA,IACpB,YAAY,SAAS;AAAA,EACvB;AACF;;;ADNA,uBAAO;AA0BE;AAVT,IAAM,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,MAAsB;AACvD,QAAM,EAAE,aAAa,UAAU,OAAO,OAAO,MAAM,GAAG,WAAW,IAAI;AAErE,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA,YAAY,IAAI;AAAA,IAChB,WAAW;AAAA,EACb;AAEA,SAAO,4CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,UAAU,cAAc;",
+  "names": ["classNames"]
+}