@simplybusiness/mobius 10.3.1 → 10.3.3

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-HPUPB75I.js → chunk-DYTHXKMX.js}

@@ -8,7 +8,7 @@ import classNames from "classnames/dedupe";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 var isBlockHTML = (text) => /^\s*<[a-z]/i.test(text);
-var containsHTML = (text) => /<[a-z/]/i.test(text);
+var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
 var buildTextClasses = (textProps, htmlClassName) => {
   const { variant, elementType, spacing, className } = textProps;
   const variantType = variant || getElementType(variant, elementType);
@@ -64,4 +64,4 @@ TextOrHTML.displayName = "TextOrHTML";
 export {
   TextOrHTML
 };
-//# sourceMappingURL=chunk-HPUPB75I.js.map
+//# sourceMappingURL=chunk-DYTHXKMX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/TextOrHTML/TextOrHTML.tsx"],
+  "sourcesContent": ["import classNames from \"classnames/dedupe\";\nimport type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text, getElementType } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst isBlockHTML = (text: string) => /^\\s*<[a-z]/i.test(text);\nconst containsHTML = (text: string) =>\n  /<[a-z/]/i.test(text) || /&(?:#\\d+|#x[\\da-f]+|[a-z]\\w*);/i.test(text); // tag or entity\n\nconst buildTextClasses = (\n  textProps: Omit<TextProps, \"children\">,\n  htmlClassName?: string,\n) => {\n  const { variant, elementType, spacing, className } = textProps;\n  const variantType = variant || getElementType(variant, elementType);\n  return classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n    htmlClassName,\n  );\n};\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n  autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType,\n  textWrapper = false,\n  autoDetect = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const textIsBlockHTML = autoDetect && isBlockHTML(text);\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  // Non-block text with autoDetect: render directly on a Text-equivalent element,\n  // avoiding unnecessary <span> nesting inside <p>.\n  if (autoDetect && !textIsBlockHTML) {\n    const { variant, spacing, elementType, className, ...domProps } = textProps;\n    const Element = getElementType(variant, elementType);\n    const classes = buildTextClasses(textProps, htmlClassName);\n\n    return containsHTML(text) ? (\n      <Element\n        ref={ref}\n        {...domProps}\n        className={classes}\n        dangerouslySetInnerHTML={dangerousHTML}\n      />\n    ) : (\n      <Element ref={ref} {...domProps} className={classes}>\n        {text}\n      </Element>\n    );\n  }\n\n  const DangerousComponent =\n    htmlElementType ?? (textIsBlockHTML ? \"div\" : \"span\");\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (textWrapper) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n"],
+  "mappings": ";;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAS,eAAe;AA+DlB;AAzDN,IAAM,cAAc,CAAC,SAAiB,cAAc,KAAK,IAAI;AAC7D,IAAM,eAAe,CAAC,SACpB,WAAW,KAAK,IAAI,KAAK,kCAAkC,KAAK,IAAI;AAEtE,IAAM,mBAAmB,CACvB,WACA,kBACG;AACH,QAAM,EAAE,SAAS,aAAa,SAAS,UAAU,IAAI;AACrD,QAAM,cAAc,WAAW,eAAe,SAAS,WAAW;AAClE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,IACA;AAAA,EACF;AACF;AAgBA,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,MAAuB;AACrB,QAAM,kBAAkB,cAAc,YAAY,IAAI;AAItD,QAAM,gBAAgB,QAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAI9D,MAAI,cAAc,CAAC,iBAAiB;AAClC,UAAM,EAAE,SAAS,SAAS,aAAa,WAAW,GAAG,SAAS,IAAI;AAClE,UAAM,UAAU,eAAe,SAAS,WAAW;AACnD,UAAM,UAAU,iBAAiB,WAAW,aAAa;AAEzD,WAAO,aAAa,IAAI,IACtB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,yBAAyB;AAAA;AAAA,IAC3B,IAEA,oBAAC,WAAQ,KAAW,GAAG,UAAU,WAAW,SACzC,gBACH;AAAA,EAEJ;AAEA,QAAM,qBACJ,oBAAoB,kBAAkB,QAAQ;AAChD,QAAM,mBACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,yBAAyB;AAAA;AAAA,EAC3B;AAGF,MAAI,aAAa;AACf,WACE,oBAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
+  "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-NRU3WNV7.js → chunk-JNAQ76CR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-TKIP5Q5H.js";
 import {
   TextOrHTML
-} from "./chunk-HPUPB75I.js";
+} from "./chunk-DYTHXKMX.js";
 
 // src/components/Alert/Alert.tsx
 import { circleInfo, circleTick, error, warning } from "@simplybusiness/icons";
@@ -68,4 +68,4 @@ Alert.displayName = "Alert";
 export {
   Alert
 };
-//# sourceMappingURL=chunk-NRU3WNV7.js.map
+//# sourceMappingURL=chunk-JNAQ76CR.js.map

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"]
+}