@simplybusiness/mobius 10.3.2 → 10.3.4

package/dist/esm/chunk-CUOVI2HT.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-CUOVI2HT.js.map

package/dist/esm/chunk-CUOVI2HT.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/chunk-F4RQKLF7.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-F4RQKLF7.js.map

package/dist/esm/chunk-F4RQKLF7.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/chunk-FKTDL7KO.js

@@ -0,0 +1,355 @@
+import {
+  Listbox
+} from "./chunk-PQSPISME.js";
+import {
+  useComboboxHighlight
+} from "./chunk-XZUQV54A.js";
+import {
+  useComboboxOptions
+} from "./chunk-GU5OMKTM.js";
+import {
+  getOptionLabel,
+  getOptionValue,
+  isOptionGroup
+} from "./chunk-2JLZNSLY.js";
+import {
+  TextField
+} from "./chunk-UIIXVY6K.js";
+import {
+  VisuallyHidden
+} from "./chunk-PRZRE6A5.js";
+import {
+  useBreakpoint
+} from "./chunk-7FQ7SXK4.js";
+
+// src/components/Combobox/Combobox.tsx
+import { useOnUnmount } from "@simplybusiness/mobius-hooks";
+import classNames from "classnames/dedupe";
+import { useEffect, useId, useRef, useState } from "react";
+import "@simplybusiness/mobius/src/components/Combobox/Combobox.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ComboboxInner = ({
+  ref,
+  ...props
+}) => {
+  const {
+    id,
+    defaultValue,
+    value,
+    options,
+    asyncOptions,
+    delay,
+    minSearchLength,
+    onSelected,
+    className,
+    placeholder,
+    icon,
+    onBlur,
+    onFocus,
+    onChange,
+    // onSearched, // unused prop, consider removing
+    optionComponent,
+    optionTestIdPrefix,
+    errorMessage,
+    ...otherProps
+  } = props;
+  const skipNextDebounceRef = useRef(false);
+  const fallbackRef = useRef(null);
+  const [inputValue, setInputValue] = useState(defaultValue || "");
+  const [isOpen, setIsOpen] = useState(false);
+  const [isChanging, setIsChanging] = useState(false);
+  const { filteredOptions, updateFilteredOptions, isLoading, error } = useComboboxOptions({
+    options,
+    asyncOptions,
+    inputValue,
+    delay,
+    minSearchLength,
+    skipNextDebounceRef
+  });
+  const [validationError, setValidationError] = useState(
+    error?.message || errorMessage
+  );
+  const {
+    highlightedIndex,
+    highlightedGroupIndex,
+    highlightNextOption,
+    highlightPreviousOption,
+    highlightFirstOption,
+    highlightLastOption,
+    clearHighlight
+  } = useComboboxHighlight(filteredOptions);
+  const inputRef = ref || fallbackRef;
+  const listboxId = useId();
+  const statusId = useId();
+  const blurTimeoutRef = useRef(null);
+  const userInteractedRef = useRef(false);
+  const justSelectedRef = useRef(false);
+  const { down } = useBreakpoint();
+  const isMobile = down("md");
+  useEffect(() => {
+    setValidationError(error?.message || errorMessage);
+  }, [error, errorMessage]);
+  const getEmptyValue = () => {
+    const firstOption = filteredOptions ? isOptionGroup(filteredOptions) ? filteredOptions[0]?.options[0] : filteredOptions[0] : options ? isOptionGroup(options) ? options[0]?.options[0] : options[0] : void 0;
+    if (typeof firstOption === "string") {
+      return "";
+    }
+    return { label: "", value: "" };
+  };
+  const handleFocus = (e) => {
+    onFocus?.(e);
+    if (!filteredOptions || filteredOptions.length === 0) return;
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+    const isNaturalFocus = userInteractedRef.current || e.relatedTarget !== null;
+    if (userInteractedRef.current) {
+      userInteractedRef.current = false;
+    }
+    if (justSelectedRef.current && !isNaturalFocus) {
+      return;
+    }
+    if (isNaturalFocus) {
+      setIsOpen(true);
+      justSelectedRef.current = false;
+    }
+  };
+  useEffect(() => {
+    if (!inputRef || typeof inputRef === "function") return;
+    const inputElement = inputRef.current;
+    if (!inputElement) return;
+    const handleMouseDown = () => {
+      userInteractedRef.current = true;
+    };
+    inputElement.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      inputElement.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [inputRef]);
+  useOnUnmount(() => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+    }
+  });
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setValidationError(void 0);
+    justSelectedRef.current = false;
+    setIsChanging(true);
+    if (!asyncOptions) {
+      setIsOpen(true);
+    }
+    clearHighlight();
+    onChange?.(e);
+  };
+  const handleOptionSelect = (option) => {
+    const val = getOptionValue(option);
+    if (!val && val !== "") return;
+    if (typeof option === "object" && "callback" in option && option.callback && typeof option.callback === "function") {
+      justSelectedRef.current = true;
+      setTimeout(() => {
+        if (inputRef && typeof inputRef !== "function" && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 0);
+      const callbackPromise = option.callback();
+      updateFilteredOptions(callbackPromise);
+      callbackPromise.then(() => {
+        setIsOpen(true);
+        setIsChanging(true);
+      }).catch(() => {
+      });
+      return;
+    }
+    skipNextDebounceRef.current = true;
+    justSelectedRef.current = true;
+    setIsChanging(false);
+    setValidationError(void 0);
+    setIsOpen(false);
+    setInputValue(val);
+    onSelected?.(option);
+  };
+  const getFirstOption = () => {
+    if (!filteredOptions) return void 0;
+    if (isOptionGroup(filteredOptions)) {
+      return filteredOptions[0]?.options[0];
+    }
+    return filteredOptions[0];
+  };
+  const getHighlightedOption = () => {
+    if (!filteredOptions) return void 0;
+    if (highlightedIndex === -1) return void 0;
+    if (isOptionGroup(filteredOptions)) {
+      const group = filteredOptions[highlightedGroupIndex];
+      return group?.options[highlightedIndex];
+    }
+    return filteredOptions[highlightedIndex];
+  };
+  const getHighlightedOptionId = () => {
+    const option = getHighlightedOption();
+    if (!option) return void 0;
+    if (isOptionGroup(filteredOptions)) {
+      return `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`;
+    }
+    return `${listboxId}-option-${highlightedIndex}`;
+  };
+  const handleBlur = (e) => {
+    if (!justSelectedRef.current) {
+      const typedText = inputValue.trim();
+      const typedTextLower = typedText.toLowerCase();
+      const highlightedOption = getHighlightedOption();
+      const label = getOptionLabel(highlightedOption);
+      if (typedTextLower === label?.toLowerCase()) {
+        setTimeout(() => {
+          handleOptionSelect(highlightedOption);
+        }, 0);
+      } else if (typedText === "") {
+        setTimeout(() => {
+          handleOptionSelect(getEmptyValue());
+        }, 0);
+      } else {
+        setValidationError(
+          errorMessage || "Please select an option from the list"
+        );
+        setTimeout(() => {
+          setInputValue("");
+        }, 0);
+      }
+    }
+    blurTimeoutRef.current = setTimeout(() => {
+      onBlur?.(e);
+      setIsOpen(false);
+      setIsChanging(false);
+    }, 150);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightNextOption();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightPreviousOption();
+        break;
+      case "Home":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightFirstOption();
+        break;
+      case "End":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightLastOption();
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen) {
+          const selectedOption = getHighlightedOption() || getFirstOption();
+          if (selectedOption) {
+            handleOptionSelect(selectedOption);
+          }
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setInputValue("");
+        setIsOpen(false);
+        clearHighlight();
+        break;
+      default:
+    }
+  };
+  useEffect(() => {
+    if (value) {
+      setInputValue(value);
+    }
+  }, [value]);
+  useEffect(() => {
+    if (asyncOptions && isChanging) {
+      setIsOpen(!!filteredOptions && filteredOptions.length > 0);
+    }
+  }, [filteredOptions, asyncOptions, isChanging]);
+  const classes = classNames(
+    "mobius mobius-combobox",
+    {
+      "mobius-combobox--is-expanded": isOpen,
+      "mobius-combobox--is-loading": isLoading,
+      "mobius-combobox--is-mobile": isMobile
+    },
+    className
+  );
+  const getStatusMessage = () => {
+    if (isLoading) return "Loading options";
+    if (!filteredOptions || filteredOptions.length === 0) {
+      return isChanging ? "No options found" : "";
+    }
+    const count = isOptionGroup(filteredOptions) ? filteredOptions.reduce((sum, group) => sum + group.options.length, 0) : filteredOptions.length;
+    return isOpen && isChanging ? `${count} option${count === 1 ? "" : "s"} available` : "";
+  };
+  return /* @__PURE__ */ jsxs("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
+    /* @__PURE__ */ jsx(
+      VisuallyHidden,
+      {
+        role: "status",
+        "aria-live": "polite",
+        id: statusId,
+        elementType: "div",
+        className: "mobius-combobox__status",
+        children: getStatusMessage()
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ...otherProps,
+        className: "mobius-combobox__input",
+        role: "combobox",
+        value: inputValue,
+        placeholder,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onChange: handleInputChange,
+        autoComplete: "off",
+        "aria-describedby": isLoading ? statusId : void 0,
+        "aria-autocomplete": "list",
+        "aria-haspopup": "listbox",
+        "aria-controls": isOpen ? listboxId : void 0,
+        "aria-expanded": isOpen,
+        "aria-activedescendant": highlightedIndex === -1 ? void 0 : getHighlightedOptionId(),
+        prefixInside: icon,
+        ref: inputRef,
+        errorMessage: errorMessage || validationError || error?.message
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Listbox,
+      {
+        id: listboxId,
+        isOpen,
+        isLoading,
+        options: filteredOptions,
+        highlightedIndex,
+        highlightedGroupIndex,
+        onOptionSelect: handleOptionSelect,
+        optionComponent,
+        optionTestIdPrefix
+      }
+    )
+  ] });
+};
+var Combobox = ComboboxInner;
+
+export {
+  Combobox
+};
+//# sourceMappingURL=chunk-FKTDL7KO.js.map

package/dist/esm/chunk-FKTDL7KO.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/Combobox/Combobox.tsx"],
+  "sourcesContent": ["import { useOnUnmount } from \"@simplybusiness/mobius-hooks\";\nimport classNames from \"classnames/dedupe\";\nimport type React from \"react\";\nimport type { FocusEvent } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { TextField } from \"../TextField\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { Listbox } from \"./Listbox\"; // Import Listbox component\nimport type { ComboboxOption, ComboboxProps, ComboboxRef } from \"./types\";\nimport { useComboboxHighlight } from \"./useComboboxHighlight\";\nimport { useComboboxOptions } from \"./useComboboxOptions\";\nimport { getOptionLabel, getOptionValue, isOptionGroup } from \"./utils\";\nimport \"./Combobox.css\";\n\nconst ComboboxInner = <T extends ComboboxOption>({\n  ref,\n  ...props\n}: ComboboxProps<T>) => {\n  const {\n    id,\n    defaultValue,\n    value,\n    options,\n    asyncOptions,\n    delay,\n    minSearchLength,\n    onSelected,\n    className,\n    placeholder,\n    icon,\n    onBlur,\n    onFocus,\n    onChange,\n    // onSearched, // unused prop, consider removing\n    optionComponent,\n    optionTestIdPrefix,\n    errorMessage,\n    ...otherProps\n  } = props;\n  // Avoid re-fetching after selecting an option\n  const skipNextDebounceRef = useRef(false);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const [inputValue, setInputValue] = useState(defaultValue || \"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [isChanging, setIsChanging] = useState(false);\n  const { filteredOptions, updateFilteredOptions, isLoading, error } =\n    useComboboxOptions({\n      options,\n      asyncOptions,\n      inputValue,\n      delay,\n      minSearchLength,\n      skipNextDebounceRef,\n    });\n  const [validationError, setValidationError] = useState(\n    error?.message || errorMessage,\n  );\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 statusId = useId();\n  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const userInteractedRef = useRef(false);\n  const justSelectedRef = useRef(false);\n  const { down } = useBreakpoint();\n  const isMobile = down(\"md\");\n\n  useEffect(() => {\n    setValidationError(error?.message || errorMessage);\n  }, [error, errorMessage]);\n\n  // Helper to create properly-typed empty value based on option type\n  const getEmptyValue = (): T => {\n    // Check first available option to determine if we're using string or object options\n    const firstOption = filteredOptions\n      ? isOptionGroup(filteredOptions)\n        ? filteredOptions[0]?.options[0]\n        : filteredOptions[0]\n      : options\n        ? isOptionGroup(options)\n          ? options[0]?.options[0]\n          : options[0]\n        : undefined;\n\n    // If options are strings, return empty string\n    if (typeof firstOption === \"string\") {\n      return \"\" as T;\n    }\n\n    // If options are objects, return empty object with same shape\n    return { label: \"\", value: \"\" } as T;\n  };\n\n  const handleFocus = (e: FocusEvent) => {\n    onFocus?.(e);\n    if (!filteredOptions || filteredOptions.length === 0) return;\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current);\n      blurTimeoutRef.current = null;\n    }\n\n    // Check if this is natural focus (user click/Tab) or programmatic focus\n    const isNaturalFocus =\n      userInteractedRef.current || e.relatedTarget !== null;\n    if (userInteractedRef.current) {\n      userInteractedRef.current = false;\n    }\n\n    // Block opening only if programmatic focus right after selection\n    if (justSelectedRef.current && !isNaturalFocus) {\n      return;\n    }\n\n    // Open dropdown for natural focus\n    if (isNaturalFocus) {\n      setIsOpen(true);\n      justSelectedRef.current = false;\n    }\n  };\n\n  useEffect(() => {\n    if (!inputRef || typeof inputRef === \"function\") return;\n    const inputElement = inputRef.current;\n    if (!inputElement) return;\n\n    const handleMouseDown = () => {\n      // Track that user clicked/interacted with input\n      userInteractedRef.current = true;\n    };\n\n    inputElement.addEventListener(\"mousedown\", handleMouseDown);\n    return () => {\n      inputElement.removeEventListener(\"mousedown\", handleMouseDown);\n    };\n  }, [inputRef]);\n\n  useOnUnmount(() => {\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current);\n    }\n  });\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInputValue(newValue);\n    setValidationError(undefined);\n    justSelectedRef.current = false;\n    setIsChanging(true);\n    // Only open immediately for sync options; async options controlled by useEffect\n    if (!asyncOptions) {\n      setIsOpen(true);\n    }\n    clearHighlight();\n    onChange?.(e);\n  };\n\n  const handleOptionSelect = (option: T) => {\n    const val = getOptionValue(option);\n\n    // Allow empty values to pass through\n    if (!val && val !== \"\") return;\n\n    if (\n      typeof option === \"object\" &&\n      \"callback\" in option &&\n      option.callback &&\n      typeof option.callback === \"function\"\n    ) {\n      justSelectedRef.current = true;\n      setTimeout(() => {\n        if (inputRef && typeof inputRef !== \"function\" && inputRef.current) {\n          inputRef.current.focus();\n        }\n      }, 0);\n      const callbackPromise = option.callback();\n      updateFilteredOptions(callbackPromise);\n      callbackPromise\n        .then(() => {\n          setIsOpen(true);\n          setIsChanging(true);\n        })\n        .catch(() => {\n          // error handled inside updateFilteredOptions via setError\n        });\n      return;\n    }\n\n    // Prevent re-fetching options after selecting an option\n    skipNextDebounceRef.current = true;\n    justSelectedRef.current = true;\n\n    setIsChanging(false);\n    setValidationError(undefined);\n    setIsOpen(false);\n    setInputValue(val);\n    onSelected?.(option);\n  };\n\n  const getFirstOption = () => {\n    if (!filteredOptions) return undefined;\n    if (isOptionGroup(filteredOptions)) {\n      return filteredOptions[0]?.options[0];\n    }\n\n    return filteredOptions[0];\n  };\n\n  const getHighlightedOption = () => {\n    if (!filteredOptions) return undefined;\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 getHighlightedOptionId = () => {\n    const option = getHighlightedOption();\n    if (!option) return undefined;\n\n    if (isOptionGroup(filteredOptions)) {\n      return `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`;\n    }\n\n    return `${listboxId}-option-${highlightedIndex}`;\n  };\n\n  const handleBlur = (e: FocusEvent<Element, Element>) => {\n    // Force selection if user has matched an entry by typing (not already selected)\n    // Defer this to allow natural focus flow to complete first\n    if (!justSelectedRef.current) {\n      const typedText = inputValue.trim();\n      const typedTextLower = typedText.toLowerCase();\n      const highlightedOption = getHighlightedOption();\n      const label = getOptionLabel(highlightedOption);\n\n      if (typedTextLower === label?.toLowerCase()) {\n        // Exact match with an option\n        setTimeout(() => {\n          handleOptionSelect(highlightedOption as T);\n        }, 0);\n      } else if (typedText === \"\") {\n        // Allow empty values\n        setTimeout(() => {\n          handleOptionSelect(getEmptyValue());\n        }, 0);\n      } else {\n        // Invalid value (not in options and not empty)\n        setValidationError(\n          errorMessage || \"Please select an option from the list\",\n        );\n        setTimeout(() => {\n          setInputValue(\"\");\n        }, 0);\n      }\n    }\n\n    blurTimeoutRef.current = setTimeout(() => {\n      onBlur?.(e);\n      setIsOpen(false);\n      setIsChanging(false);\n    }, 150);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        justSelectedRef.current = false;\n        setIsOpen(true);\n        highlightNextOption();\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        justSelectedRef.current = false;\n        setIsOpen(true);\n        highlightPreviousOption();\n        break;\n      case \"Home\":\n        e.preventDefault();\n        justSelectedRef.current = false;\n        setIsOpen(true);\n        highlightFirstOption();\n        break;\n      case \"End\":\n        e.preventDefault();\n        justSelectedRef.current = false;\n        setIsOpen(true);\n        highlightLastOption();\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (isOpen) {\n          const selectedOption = getHighlightedOption() || getFirstOption();\n          if (selectedOption) {\n            handleOptionSelect(selectedOption);\n          }\n        }\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        setInputValue(\"\");\n        setIsOpen(false);\n        clearHighlight();\n        break;\n      default:\n      // Do nothing\n    }\n  };\n\n  useEffect(() => {\n    if (value) {\n      setInputValue(value);\n    }\n  }, [value]);\n\n  // Open and close the combobox based on async filtered options\n  useEffect(() => {\n    if (asyncOptions && isChanging) {\n      setIsOpen(!!filteredOptions && filteredOptions.length > 0);\n    }\n  }, [filteredOptions, asyncOptions, isChanging]);\n\n  const classes = classNames(\n    \"mobius mobius-combobox\",\n    {\n      \"mobius-combobox--is-expanded\": isOpen,\n      \"mobius-combobox--is-loading\": isLoading,\n      \"mobius-combobox--is-mobile\": isMobile,\n    },\n    className,\n  );\n\n  const getStatusMessage = () => {\n    if (isLoading) return \"Loading options\";\n    if (!filteredOptions || filteredOptions.length === 0) {\n      return isChanging ? \"No options found\" : \"\";\n    }\n    const count = isOptionGroup(filteredOptions)\n      ? filteredOptions.reduce((sum, group) => sum + group.options.length, 0)\n      : filteredOptions.length;\n    return isOpen && isChanging\n      ? `${count} option${count === 1 ? \"\" : \"s\"} available`\n      : \"\";\n  };\n\n  return (\n    <div id={id} data-testid=\"mobius-combobox__wrapper\" className={classes}>\n      <VisuallyHidden\n        role=\"status\"\n        aria-live=\"polite\"\n        id={statusId}\n        elementType=\"div\"\n        className=\"mobius-combobox__status\"\n      >\n        {getStatusMessage()}\n      </VisuallyHidden>\n      <TextField\n        {...otherProps}\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-describedby={isLoading ? statusId : undefined}\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-controls={isOpen ? listboxId : undefined}\n        aria-expanded={isOpen}\n        aria-activedescendant={\n          highlightedIndex === -1 ? undefined : getHighlightedOptionId()\n        }\n        prefixInside={icon}\n        ref={inputRef}\n        errorMessage={errorMessage || validationError || error?.message}\n      />\n      <Listbox\n        id={listboxId}\n        isOpen={isOpen}\n        isLoading={isLoading}\n        options={filteredOptions}\n        highlightedIndex={highlightedIndex}\n        highlightedGroupIndex={highlightedGroupIndex}\n        onOptionSelect={handleOptionSelect}\n        optionComponent={optionComponent}\n        optionTestIdPrefix={optionTestIdPrefix}\n      />\n    </div>\n  );\n};\n\nexport const Combobox = ComboboxInner as <T extends ComboboxOption>(\n  props: ComboboxProps<T> & { ref?: ComboboxRef },\n) => React.JSX.Element;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/chunk-KQZ3MNK5.js

@@ -0,0 +1,100 @@
+import {
+  convertToDateFormat,
+  isValidDate
+} from "./chunk-CI5GCPUG.js";
+import {
+  TextField
+} from "./chunk-UIIXVY6K.js";
+import {
+  mergeRefs
+} from "./chunk-QGGILW3D.js";
+
+// src/components/DateField/DateField.tsx
+import classNames from "classnames/dedupe";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var MIN_MAX_ERROR = '"min" value should not be greater than "max" value.';
+var DateField = ({ ref, ...props }) => {
+  const {
+    min,
+    max,
+    format,
+    className,
+    errorMessage,
+    defaultValue,
+    value,
+    ...otherProps
+  } = props;
+  const [error, setError] = useState(errorMessage);
+  const [isInvalid, setIsInvalid] = useState(void 0);
+  const localRef = useRef(null);
+  const classes = classNames("mobius-date-field", className);
+  const formattedMin = min ? convertToDateFormat(min, format) : void 0;
+  const formattedMax = max ? convertToDateFormat(max, format) : void 0;
+  const formattedDefaultValue = defaultValue ? convertToDateFormat(defaultValue, format) : void 0;
+  const formattedValue = value ? convertToDateFormat(value, format) : void 0;
+  const setInvalidState = (error2) => {
+    setError(error2);
+    setIsInvalid(true);
+  };
+  const setValidState = () => {
+    setError(props.errorMessage);
+    setIsInvalid(false);
+  };
+  useEffect(() => {
+    if (!isValidDate(min, format)) {
+      setInvalidState(`Invalid min date: ${min}`);
+      return;
+    }
+    if (!isValidDate(max, format)) {
+      setInvalidState(`Invalid max date: ${max}`);
+      return;
+    }
+    if (min && max) {
+      const minDate = new Date(min);
+      const maxDate = new Date(max);
+      if (minDate > maxDate) {
+        setInvalidState(MIN_MAX_ERROR);
+      } else {
+        setValidState();
+      }
+    } else {
+      setValidState();
+    }
+  }, [min, max, format]);
+  const validate = () => {
+    const isValidInput = localRef.current?.checkValidity();
+    if (!isValidInput) {
+      setInvalidState("Invalid date input");
+    } else {
+      setValidState();
+    }
+  };
+  const handleBlur = (event) => {
+    validate();
+    otherProps.onBlur?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ref: mergeRefs([localRef, ref]),
+      className: classes,
+      type: "date",
+      min: formattedMin,
+      max: formattedMax,
+      errorMessage: errorMessage ?? error,
+      isInvalid,
+      defaultValue: formattedDefaultValue,
+      value: formattedValue,
+      onBlur: handleBlur,
+      ...otherProps
+    }
+  );
+};
+DateField.displayName = "DateField";
+
+export {
+  MIN_MAX_ERROR,
+  DateField
+};
+//# sourceMappingURL=chunk-KQZ3MNK5.js.map

package/dist/esm/chunk-KQZ3MNK5.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/DateField/DateField.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type { FocusEvent, RefAttributes } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport {\n  TextField,\n  type TextFieldElementType,\n  type TextFieldProps,\n} from \"../TextField\";\nimport { convertToDateFormat, isValidDate } from \"./validation\";\n\nexport interface DateFieldProps\n  extends Omit<TextFieldProps, \"type\">, RefAttributes<TextFieldElementType> {\n  /** The earliest date allowed for the input. */\n  min?: string;\n  /** The latest date allowed for the input. */\n  max?: string;\n  /** Date format to use. */\n  format?: string;\n}\n\nexport const MIN_MAX_ERROR =\n  '\"min\" value should not be greater than \"max\" value.';\n\nexport const DateField = ({ ref, ...props }: DateFieldProps) => {\n  const {\n    min,\n    max,\n    format,\n    className,\n    errorMessage,\n    defaultValue,\n    value,\n    ...otherProps\n  } = props;\n  const [error, setError] = useState<string | undefined>(errorMessage);\n  const [isInvalid, setIsInvalid] = useState<boolean | undefined>(undefined);\n  const localRef = useRef<TextFieldElementType>(null);\n  const classes = classNames(\"mobius-date-field\", className);\n\n  // If a custom format is provided, convert the min, max,\n  // and defaultValue dates to that format\n  const formattedMin = min ? convertToDateFormat(min, format) : undefined;\n  const formattedMax = max ? convertToDateFormat(max, format) : undefined;\n  const formattedDefaultValue = defaultValue\n    ? convertToDateFormat(defaultValue, format)\n    : undefined;\n  const formattedValue = value ? convertToDateFormat(value, format) : undefined;\n\n  const setInvalidState = (error?: string) => {\n    setError(error);\n    setIsInvalid(true);\n  };\n\n  const setValidState = () => {\n    setError(props.errorMessage);\n    setIsInvalid(false);\n  };\n\n  // Validate min and max values\n  useEffect(() => {\n    if (!isValidDate(min, format)) {\n      setInvalidState(`Invalid min date: ${min}`);\n      return;\n    }\n    if (!isValidDate(max, format)) {\n      setInvalidState(`Invalid max date: ${max}`);\n      return;\n    }\n\n    if (min && max) {\n      const minDate = new Date(min);\n      const maxDate = new Date(max);\n      if (minDate > maxDate) {\n        setInvalidState(MIN_MAX_ERROR);\n      } else {\n        setValidState();\n      }\n    } else {\n      setValidState();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [min, max, format]);\n\n  const validate = () => {\n    // If 'min' or 'max' values are provided, checkValidity() will\n    // validate the date and return a boolean\n    const isValidInput = localRef.current?.checkValidity();\n\n    if (!isValidInput) {\n      setInvalidState(\"Invalid date input\");\n    } else {\n      setValidState();\n    }\n  };\n\n  // User has interacted with the component and navigated away\n  const handleBlur = (event: FocusEvent<Element>) => {\n    validate();\n    otherProps.onBlur?.(event);\n  };\n\n  return (\n    <TextField\n      ref={mergeRefs([localRef, ref])}\n      className={classes}\n      type=\"date\"\n      min={formattedMin}\n      max={formattedMax}\n      errorMessage={errorMessage ?? error}\n      isInvalid={isInvalid}\n      defaultValue={formattedDefaultValue}\n      value={formattedValue}\n      onBlur={handleBlur}\n      {...otherProps}\n    />\n  );\n};\n\nDateField.displayName = \"DateField\";\n"],
+  "mappings": ";;;;;;;;;;;;AAEA,OAAO,gBAAgB;AAEvB,SAAS,WAAW,QAAQ,gBAAgB;AAqGxC;AAlFG,IAAM,gBACX;AAEK,IAAM,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,MAAsB;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,YAAY;AACnE,QAAM,CAAC,WAAW,YAAY,IAAI,SAA8B,MAAS;AACzE,QAAM,WAAW,OAA6B,IAAI;AAClD,QAAM,UAAU,WAAW,qBAAqB,SAAS;AAIzD,QAAM,eAAe,MAAM,oBAAoB,KAAK,MAAM,IAAI;AAC9D,QAAM,eAAe,MAAM,oBAAoB,KAAK,MAAM,IAAI;AAC9D,QAAM,wBAAwB,eAC1B,oBAAoB,cAAc,MAAM,IACxC;AACJ,QAAM,iBAAiB,QAAQ,oBAAoB,OAAO,MAAM,IAAI;AAEpE,QAAM,kBAAkB,CAACA,WAAmB;AAC1C,aAASA,MAAK;AACd,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,MAAM,YAAY;AAC3B,iBAAa,KAAK;AAAA,EACpB;AAGA,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,KAAK,MAAM,GAAG;AAC7B,sBAAgB,qBAAqB,GAAG,EAAE;AAC1C;AAAA,IACF;AACA,QAAI,CAAC,YAAY,KAAK,MAAM,GAAG;AAC7B,sBAAgB,qBAAqB,GAAG,EAAE;AAC1C;AAAA,IACF;AAEA,QAAI,OAAO,KAAK;AACd,YAAM,UAAU,IAAI,KAAK,GAAG;AAC5B,YAAM,UAAU,IAAI,KAAK,GAAG;AAC5B,UAAI,UAAU,SAAS;AACrB,wBAAgB,aAAa;AAAA,MAC/B,OAAO;AACL,sBAAc;AAAA,MAChB;AAAA,IACF,OAAO;AACL,oBAAc;AAAA,IAChB;AAAA,EAEF,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC;AAErB,QAAM,WAAW,MAAM;AAGrB,UAAM,eAAe,SAAS,SAAS,cAAc;AAErD,QAAI,CAAC,cAAc;AACjB,sBAAgB,oBAAoB;AAAA,IACtC,OAAO;AACL,oBAAc;AAAA,IAChB;AAAA,EACF;AAGA,QAAM,aAAa,CAAC,UAA+B;AACjD,aAAS;AACT,eAAW,SAAS,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,UAAU,CAAC,UAAU,GAAG,CAAC;AAAA,MAC9B,WAAW;AAAA,MACX,MAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,cAAc,gBAAgB;AAAA,MAC9B;AAAA,MACA,cAAc;AAAA,MACd,OAAO;AAAA,MACP,QAAQ;AAAA,MACP,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,UAAU,cAAc;",
+  "names": ["error"]
+}

package/dist/esm/chunk-M2NDSQR5.js

@@ -0,0 +1,106 @@
+import {
+  ErrorMessage
+} from "./chunk-UQVAEWY2.js";
+import {
+  Stack
+} from "./chunk-XH3OJQMW.js";
+import {
+  Label
+} from "./chunk-ZN7OWLZY.js";
+import {
+  Icon
+} from "./chunk-TKIP5Q5H.js";
+import {
+  useLabel
+} from "./chunk-YLEFK7S2.js";
+import {
+  useValidationClasses
+} from "./chunk-DYOFXXZD.js";
+import {
+  spaceDelimitedList
+} from "./chunk-DTWRSP5P.js";
+
+// src/components/Select/Select.tsx
+import { chevronDown } from "@simplybusiness/icons";
+import classNames from "classnames/dedupe";
+import { useId } from "react";
+import "@simplybusiness/mobius/src/components/Select/Select.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Select = ({ ref, ...props }) => {
+  const {
+    label,
+    onChange,
+    isInvalid,
+    errorMessage,
+    isDisabled = false,
+    isRequired,
+    ...otherProps
+  } = props;
+  const { labelProps, fieldProps } = useLabel({
+    label,
+    ...otherProps
+  });
+  const validationClasses = useValidationClasses({ isInvalid });
+  const stateClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired
+  };
+  const sharedClasses = classNames(validationClasses, stateClasses);
+  const wrapperClasses = classNames(
+    "mobius-select__wrapper",
+    sharedClasses,
+    otherProps.className
+  );
+  const selectClasses = classNames(
+    "mobius-select",
+    sharedClasses,
+    otherProps.className
+  );
+  const labelClasses = classNames(
+    "mobius-label",
+    sharedClasses,
+    otherProps.className
+  );
+  const iconClasses = classNames("mobius-select__icon", sharedClasses);
+  const errorMessageId = useId();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
+    label && /* @__PURE__ */ jsx(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          ...otherProps,
+          ...fieldProps,
+          ref,
+          multiple: false,
+          className: selectClasses,
+          disabled: isDisabled,
+          "aria-invalid": !!errorMessage,
+          "aria-describedby": describedBy,
+          "aria-required": isRequired,
+          required: isRequired,
+          onChange: handleChange
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: iconClasses, children: /* @__PURE__ */ jsx(Icon, { icon: chevronDown }) })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+};
+Select.displayName = "Select";
+
+export {
+  Select
+};
+//# sourceMappingURL=chunk-M2NDSQR5.js.map

package/dist/esm/chunk-M2NDSQR5.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/Select/Select.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ChangeEvent, ReactElement, RefAttributes } from \"react\";\nimport { useId } from \"react\";\nimport { useValidationClasses } from \"../../hooks\";\nimport type { UseLabelProps } from \"../../hooks/useLabel\";\nimport { useLabel } from \"../../hooks/useLabel\";\nimport type { DOMProps, Validation } from \"../../types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Icon } from \"../Icon\";\nimport { Label } from \"../Label\";\nimport type { OptionProps } from \"../Option\";\nimport { Stack } from \"../Stack\";\nimport \"./Select.css\";\n\nexport type SelectElementType = HTMLSelectElement;\nexport interface SelectProps\n  extends\n    UseLabelProps,\n    Validation,\n    DOMProps,\n    RefAttributes<SelectElementType> {\n  name?: string;\n  onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;\n  value?: string;\n  defaultValue?: string;\n  className?: string;\n  errorMessage?: string;\n  children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;\n  \"aria-describedby\"?: string;\n  isDisabled?: boolean;\n}\n\nconst Select = ({ ref, ...props }: SelectProps) => {\n  const {\n    label,\n    onChange,\n    isInvalid,\n    errorMessage,\n    isDisabled = false,\n    isRequired,\n    ...otherProps\n  } = props;\n\n  const { labelProps, fieldProps } = useLabel({\n    label,\n    ...otherProps,\n  });\n\n  const validationClasses = useValidationClasses({ isInvalid });\n\n  const stateClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n    \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n  };\n\n  const sharedClasses = classNames(validationClasses, stateClasses);\n\n  const wrapperClasses = classNames(\n    \"mobius-select__wrapper\",\n    sharedClasses,\n    otherProps.className,\n  );\n  const selectClasses = classNames(\n    \"mobius-select\",\n    sharedClasses,\n    otherProps.className,\n  );\n  const labelClasses = classNames(\n    \"mobius-label\",\n    sharedClasses,\n    otherProps.className,\n  );\n  const iconClasses = classNames(\"mobius-select__icon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n\n  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <Stack className=\"mobius mobius-select__outer\" gap=\"xs\">\n      {label && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className={wrapperClasses}>\n        <select\n          {...otherProps}\n          {...fieldProps}\n          ref={ref}\n          multiple={false}\n          className={selectClasses}\n          disabled={isDisabled}\n          aria-invalid={!!errorMessage}\n          aria-describedby={describedBy}\n          aria-required={isRequired}\n          required={isRequired}\n          onChange={handleChange}\n        />\n        <span className={iconClasses}>\n          <Icon icon={chevronDown} />\n        </span>\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </Stack>\n  );\n};\n\nSelect.displayName = \"Select\";\nexport { Select };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,mBAAmB;AAC5B,OAAO,gBAAgB;AAEvB,SAAS,aAAa;AAWtB,OAAO;AA8EC,cAIF,YAJE;AA1DR,IAAM,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,MAAmB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,YAAY,WAAW,IAAI,SAAS;AAAA,IAC1C;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,QAAM,oBAAoB,qBAAqB,EAAE,UAAU,CAAC;AAE5D,QAAM,eAAe;AAAA,IACnB,iBAAiB;AAAA,IACjB,iBAAiB,OAAO,eAAe,aAAa;AAAA,IACpD,iBAAiB,OAAO,eAAe,aAAa,CAAC;AAAA,EACvD;AAEA,QAAM,gBAAgB,WAAW,mBAAmB,YAAY;AAEhE,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb;AACA,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb;AACA,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb;AACA,QAAM,cAAc,WAAW,uBAAuB,aAAa;AACnE,QAAM,iBAAiB,MAAM;AAC7B,QAAM,yBAAyB,eAAe,iBAAiB;AAC/D,QAAM,cAAc,mBAAmB;AAAA,IACrC;AAAA,IACA,MAAM,kBAAkB;AAAA,EAC1B,CAAC;AAED,QAAM,eAAe,CAAC,MAAsC;AAC1D,QAAI,UAAU;AACZ,eAAS,CAAC;AAAA,IACZ;AAAA,EACF;AAEA,SACE,qBAAC,SAAM,WAAU,+BAA8B,KAAI,MAChD;AAAA,aACC,oBAAC,SAAO,GAAG,YAAY,WAAW,cAC/B,iBACH;AAAA,IAEF,qBAAC,SAAI,WAAW,gBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ;AAAA,UACA,UAAU;AAAA,UACV,WAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAc,CAAC,CAAC;AAAA,UAChB,oBAAkB;AAAA,UAClB,iBAAe;AAAA,UACf,UAAU;AAAA,UACV,UAAU;AAAA;AAAA,MACZ;AAAA,MACA,oBAAC,UAAK,WAAW,aACf,8BAAC,QAAK,MAAM,aAAa,GAC3B;AAAA,OACF;AAAA,IACC,gBACC,oBAAC,gBAAa,IAAI,gBAAgB,cAA4B;AAAA,KAElE;AAEJ;AAEA,OAAO,cAAc;",
+  "names": []
+}