@simplybusiness/mobius 6.5.2 → 6.5.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 6.5.3
+
+### Patch Changes
+
+- af113aa: Fix accessibility issues with Combobox and US State Question
+- e95d7af: Fix React 19 dangerouslySetInnerHTML regression in TextOrHTML
+
 ## 6.5.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1575,6 +1575,8 @@ var ComboboxInner = (0, import_react24.forwardRef)(
     const listboxId = (0, import_react24.useId)();
     const statusId = (0, import_react24.useId)();
     const blurTimeoutRef = (0, import_react24.useRef)(null);
+    const userInteractedRef = (0, import_react24.useRef)(false);
+    const justSelectedRef = (0, import_react24.useRef)(false);
     const { down } = useBreakpoint();
     const isMobile = down("md");
     const handleFocus = (e) => {
@@ -1584,8 +1586,31 @@ var ComboboxInner = (0, import_react24.forwardRef)(
         clearTimeout(blurTimeoutRef.current);
         blurTimeoutRef.current = null;
       }
-      setIsOpen(true);
+      const isNaturalFocus = userInteractedRef.current || e.relatedTarget !== null;
+      if (userInteractedRef.current) {
+        userInteractedRef.current = false;
+      }
+      if (justSelectedRef.current && !isNaturalFocus) {
+        justSelectedRef.current = false;
+        return;
+      }
+      if (isNaturalFocus) {
+        setIsOpen(true);
+        justSelectedRef.current = false;
+      }
     };
+    (0, import_react24.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);
@@ -1594,7 +1619,11 @@ var ComboboxInner = (0, import_react24.forwardRef)(
     const handleInputChange = (e) => {
       const newValue = e.target.value;
       setInputValue(newValue);
+      justSelectedRef.current = false;
       setIsChanging(true);
+      if (!asyncOptions) {
+        setIsOpen(true);
+      }
       clearHighlight();
       onChange?.(e);
     };
@@ -1607,6 +1636,7 @@ var ComboboxInner = (0, import_react24.forwardRef)(
         return;
       }
       skipNextDebounceRef.current = true;
+      justSelectedRef.current = true;
       setIsChanging(false);
       setIsOpen(false);
       setInputValue(val);
@@ -1637,11 +1667,15 @@ var ComboboxInner = (0, import_react24.forwardRef)(
       return `${listboxId}-option-${highlightedIndex}`;
     };
     const handleBlur = (e) => {
-      const typedText = inputValue.trim().toLowerCase();
-      const highlightedOption = getHighlightedOption();
-      const label = getOptionLabel(highlightedOption);
-      if (typedText === label?.toLowerCase()) {
-        handleOptionSelect(highlightedOption);
+      if (!justSelectedRef.current) {
+        const typedText = inputValue.trim().toLowerCase();
+        const highlightedOption = getHighlightedOption();
+        const label = getOptionLabel(highlightedOption);
+        if (typedText === label?.toLowerCase()) {
+          setTimeout(() => {
+            handleOptionSelect(highlightedOption);
+          }, 0);
+        }
       }
       blurTimeoutRef.current = setTimeout(() => {
         onBlur?.(e);
@@ -1652,21 +1686,25 @@ var ComboboxInner = (0, import_react24.forwardRef)(
       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;
@@ -1707,8 +1745,16 @@ var ComboboxInner = (0, import_react24.forwardRef)(
       },
       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__ */ (0, import_jsx_runtime12.jsxs)("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
-      isLoading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         VisuallyHidden,
         {
           role: "status",
@@ -1716,7 +1762,7 @@ var ComboboxInner = (0, import_react24.forwardRef)(
           id: statusId,
           elementType: "div",
           className: "mobius-combobox__status",
-          children: "Loading options"
+          children: getStatusMessage()
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1735,6 +1781,7 @@ var ComboboxInner = (0, import_react24.forwardRef)(
           "aria-describedby": isLoading ? statusId : void 0,
           "aria-autocomplete": "list",
           "aria-haspopup": "listbox",
+          "aria-owns": listboxId,
           "aria-controls": listboxId,
           "aria-expanded": isOpen,
           "aria-activedescendant": highlightedIndex === -1 ? void 0 : getHighlightedOptionId(),
@@ -4382,11 +4429,12 @@ var TextOrHTML = (0, import_react79.forwardRef)(
     ...textProps
   }, ref) => {
     const DangerousComponent = htmlElementType;
+    const dangerousHTML = (0, import_react79.useMemo)(() => ({ __html: text }), [text]);
     const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       DangerousComponent,
       {
         className: htmlClassName,
-        dangerouslySetInnerHTML: { __html: text }
+        dangerouslySetInnerHTML: dangerousHTML
       }
     );
     if (textWrapper) {

package/dist/esm/index.js

@@ -1464,6 +1464,8 @@ var ComboboxInner = forwardRef6(
     const listboxId = useId4();
     const statusId = useId4();
     const blurTimeoutRef = useRef7(null);
+    const userInteractedRef = useRef7(false);
+    const justSelectedRef = useRef7(false);
     const { down } = useBreakpoint();
     const isMobile = down("md");
     const handleFocus = (e) => {
@@ -1473,8 +1475,31 @@ var ComboboxInner = forwardRef6(
         clearTimeout(blurTimeoutRef.current);
         blurTimeoutRef.current = null;
       }
-      setIsOpen(true);
+      const isNaturalFocus = userInteractedRef.current || e.relatedTarget !== null;
+      if (userInteractedRef.current) {
+        userInteractedRef.current = false;
+      }
+      if (justSelectedRef.current && !isNaturalFocus) {
+        justSelectedRef.current = false;
+        return;
+      }
+      if (isNaturalFocus) {
+        setIsOpen(true);
+        justSelectedRef.current = false;
+      }
     };
+    useEffect14(() => {
+      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);
@@ -1483,7 +1508,11 @@ var ComboboxInner = forwardRef6(
     const handleInputChange = (e) => {
       const newValue = e.target.value;
       setInputValue(newValue);
+      justSelectedRef.current = false;
       setIsChanging(true);
+      if (!asyncOptions) {
+        setIsOpen(true);
+      }
       clearHighlight();
       onChange?.(e);
     };
@@ -1496,6 +1525,7 @@ var ComboboxInner = forwardRef6(
         return;
       }
       skipNextDebounceRef.current = true;
+      justSelectedRef.current = true;
       setIsChanging(false);
       setIsOpen(false);
       setInputValue(val);
@@ -1526,11 +1556,15 @@ var ComboboxInner = forwardRef6(
       return `${listboxId}-option-${highlightedIndex}`;
     };
     const handleBlur = (e) => {
-      const typedText = inputValue.trim().toLowerCase();
-      const highlightedOption = getHighlightedOption();
-      const label = getOptionLabel(highlightedOption);
-      if (typedText === label?.toLowerCase()) {
-        handleOptionSelect(highlightedOption);
+      if (!justSelectedRef.current) {
+        const typedText = inputValue.trim().toLowerCase();
+        const highlightedOption = getHighlightedOption();
+        const label = getOptionLabel(highlightedOption);
+        if (typedText === label?.toLowerCase()) {
+          setTimeout(() => {
+            handleOptionSelect(highlightedOption);
+          }, 0);
+        }
       }
       blurTimeoutRef.current = setTimeout(() => {
         onBlur?.(e);
@@ -1541,21 +1575,25 @@ var ComboboxInner = forwardRef6(
       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;
@@ -1596,8 +1634,16 @@ var ComboboxInner = forwardRef6(
       },
       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__ */ jsxs7("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
-      isLoading && /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx12(
         VisuallyHidden,
         {
           role: "status",
@@ -1605,7 +1651,7 @@ var ComboboxInner = forwardRef6(
           id: statusId,
           elementType: "div",
           className: "mobius-combobox__status",
-          children: "Loading options"
+          children: getStatusMessage()
         }
       ),
       /* @__PURE__ */ jsx12(
@@ -1624,6 +1670,7 @@ var ComboboxInner = forwardRef6(
           "aria-describedby": isLoading ? statusId : void 0,
           "aria-autocomplete": "list",
           "aria-haspopup": "listbox",
+          "aria-owns": listboxId,
           "aria-controls": listboxId,
           "aria-expanded": isOpen,
           "aria-activedescendant": highlightedIndex === -1 ? void 0 : getHighlightedOptionId(),
@@ -4302,7 +4349,7 @@ var TextArea = forwardRef52((props, ref) => {
 TextArea.displayName = "TextArea";
 
 // src/components/TextOrHTML/TextOrHTML.tsx
-import { forwardRef as forwardRef53 } from "react";
+import { forwardRef as forwardRef53, useMemo as useMemo5 } from "react";
 import { jsx as jsx68 } from "react/jsx-runtime";
 var TextOrHTML = forwardRef53(
   ({
@@ -4313,11 +4360,12 @@ var TextOrHTML = forwardRef53(
     ...textProps
   }, ref) => {
     const DangerousComponent = htmlElementType;
+    const dangerousHTML = useMemo5(() => ({ __html: text }), [text]);
     const dangerousElement = /* @__PURE__ */ jsx68(
       DangerousComponent,
       {
         className: htmlClassName,
-        dangerouslySetInnerHTML: { __html: text }
+        dangerouslySetInnerHTML: dangerousHTML
       }
     );
     if (textWrapper) {