@simplybusiness/mobius 9.3.0 → 9.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "9.3.0",
+  "version": "9.3.2",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
       "import": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
     },
+    "./package.json": "./package.json",
     "./src/*.css": "./src/*.css"
   },
   "publishConfig": {
@@ -36,6 +37,7 @@
         "import": "./dist/esm/index.js",
         "default": "./dist/esm/index.js"
       },
+      "./package.json": "./package.json",
       "./src/*.css": "./src/*.css"
     }
   },

package/src/components/Combobox/Combobox.mdx

@@ -35,15 +35,58 @@ type ComboboxOptions = T[] | ComboboxOptionGroup<T>[];
 
 ### Dynamic / asynchronous use
 
-`Combobox` provides a useful primitive with which to build more dynamic selector components, such as `Trade Selector` and `Adddress Lookup`.
+`Combobox` provides a useful primitive with which to build more dynamic selector components, such as `Trade Selector` and `Address Lookup`.
 
-For these kinds of component, options (list) data is not known and must be fetched, typically from an API, as the user types. In this case, the `options` prop can be overloaded with a function that returns a promise.
+For these kinds of component, options (list) data is not known and must be fetched, typically from an API, as the user types. Use the `asyncOptions` prop with a function that receives the current input and returns a promise of options:
 
 ```ts
-type OptionsFetcher = (inputValue: string) => Promise<Options>;
+type AsyncOptionsFetcher = (
+  inputValue: string,
+  options?: { signal?: AbortSignal },
+) => Promise<Options>;
 ```
 
-In asynchronous mode, you are strongly encouraged to provide a `delay` value in milliseconds, to debounce API requests.
+The Combobox calls `asyncOptions` **imperatively** when the debounced input changes. Pass the optional `signal` to your fetch so in-flight requests can be cancelled when the user types again.
+
+- Provide a `delay` value (e.g. 300ms) to debounce API requests.
+- Use `minSearchLength` to avoid fetching until the user has typed enough characters.
+
+**When options come from parent state** (e.g. TanStack Query's `data` from `useQuery`, or a separate fetch triggered by `onChange`), use the sync `options` prop instead of `asyncOptions`. The Combobox only re-calls `asyncOptions` when the debounced input changes, so it won't see updates when your parent state changes. Pass `options={...}` derived from your state so the options update when the fetch completes.
+
+**When using TanStack Query** (or similar) with `asyncOptions`, avoid calling Hooks (like `useQuery`) inside `asyncOptions`, as this violates the [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks). Instead, use `queryClient.fetchQuery` inside `asyncOptions`, or call `useQuery` at the component level and pass `options={data ?? []}` to the Combobox:
+
+- ❌ **Bad**: `useQuery` inside `asyncOptions` — `useQuery` is a React Hook and must be called at the top level of a component, not from an imperative callback. While `useQuery` *can* re-run when the query key includes the input, it should not be invoked from `asyncOptions`.
+- ✅ **Good**: `queryClient.fetchQuery` inside `asyncOptions` — imperative, query key includes input, respects AbortSignal.
+
+Example with TanStack Query:
+
+{/* prettier-ignore */}
+```jsx
+import { useQueryClient } from "@tanstack/react-query";
+import { Combobox } from "@simplybusiness/mobius";
+
+function FruitSelector() {
+  const queryClient = useQueryClient();
+  const fetchOptions = async (
+    inputValue: string,
+    { signal }: { signal?: AbortSignal } = {}
+  ) => {
+    return queryClient.fetchQuery({
+      queryKey: ["fruits", inputValue],
+      queryFn: () => fetchFruits(inputValue, { signal }),
+    });
+  };
+  return (
+    <Combobox
+      label="Select a fruit"
+      asyncOptions={fetchOptions}
+      delay={300}
+      minSearchLength={3}
+    />
+  );
+}
+// fetchFruits(inputValue, { signal }) is your API function — pass signal for cancellation
+```
 
 ### Overriding selection behaviour
 
@@ -138,6 +181,7 @@ import { search } from "@simplybusiness/icons";
 You can customize how options are rendered using the `optionComponent` prop. This allows you to create custom layouts, add icons, or apply custom styling to individual options.
 
 The `optionComponent` prop accepts a component that receives two props:
+
 - `option`: The option data object
 - `isHighlighted`: A boolean indicating if the option is currently highlighted
 
@@ -147,7 +191,7 @@ The `optionComponent` prop accepts a component that receives two props:
 const options = [
   { id: "apple", label: "Apple", title: "Heading 1" },
   { id: "apricot", label: "Apricot", title: "Heading 2" },
-  { id: "etc", label: "etc.", title: "Heading 3" }
+  { id: "etc", label: "etc.", title: "Heading 3" },
 ];
 
 function MyCustomOptionComponent({ option, isHighlighted }) {
@@ -159,7 +203,7 @@ function MyCustomOptionComponent({ option, isHighlighted }) {
   );
 }
 
-<Combobox options={OPTIONS} optionComponent={MyCustomOptionComponent} />
+<Combobox options={OPTIONS} optionComponent={MyCustomOptionComponent} />;
 ```
 
 <Story of={ComboboxStories.CustomOptionComponent} />

package/src/components/ErrorMessage/ErrorMessage.css

@@ -4,7 +4,7 @@
   gap: var(--error-message-grid-gap, var(--size-xs));
   grid-template-columns: min-content 1fr;
   color: var(--color-error);
-  
+
   & a {
     color: var(--color-link);
     outline: none;
@@ -24,9 +24,9 @@
   }
 }
 
-.mobius-error-message__icon {
-  width: var(--error-message-icon-width, auto);
-  height: var(--error-message-icon-height, auto);
+.mobius-error-message__icon.mobius-icon {
+  width: var(--error-message-icon-width, 1em);
+  height: var(--error-message-icon-height, 1em);
   overflow: hidden;
 }
 

package/src/components/Modal/Modal.css

@@ -138,7 +138,7 @@
   }
 }
 
-.mobius-modal__close {
+.mobius-modal__close.mobius-button {
   /* negative padding to match the padding of the header, so it aligns
      horizontally */
   padding: calc(var(--size-sm) * -1);

package/src/components/Popover/Popover.css

@@ -19,7 +19,7 @@
   padding-bottom: var(--size-sm);
 }
 
-.mobius-popover__close-button {
+.mobius-popover__close-button.mobius-button {
   padding: 0;
   border: none;
   margin-left: auto;
@@ -27,7 +27,7 @@
   color: var(--color-text-popover);
 }
 
-.mobius-popover__close-icon {
+.mobius-popover__close-icon.mobius-icon {
   height: 1.1em;
 }
 

package/src/components/Popover/Popover.test.tsx

@@ -127,6 +127,100 @@ describe("Popover", () => {
     });
   });
 
+  describe("click isolation", () => {
+    it("does not activate a parent label when clicking popover content", async () => {
+      const triggerText = "Click me";
+      const bodyText = "Popover body";
+      const onCheckboxChange = vi.fn();
+
+      render(
+        <label htmlFor="test-checkbox">
+          <input
+            id="test-checkbox"
+            type="checkbox"
+            onChange={onCheckboxChange}
+          />
+          <Popover trigger={<button type="button">{triggerText}</button>}>
+            <span>{bodyText}</span>
+          </Popover>
+        </label>,
+      );
+
+      fireEvent.click(screen.getByText(triggerText));
+
+      await waitFor(() => {
+        expect(screen.getByText(bodyText)).toBeInTheDocument();
+      });
+
+      fireEvent.click(screen.getByText(bodyText));
+
+      expect(onCheckboxChange).not.toHaveBeenCalled();
+    });
+
+    it("allows default behavior for links inside the popover", async () => {
+      const triggerText = "Click me";
+      const onCheckboxChange = vi.fn();
+
+      render(
+        <label htmlFor="test-checkbox">
+          <input
+            id="test-checkbox"
+            type="checkbox"
+            onChange={onCheckboxChange}
+          />
+          <Popover trigger={<button type="button">{triggerText}</button>}>
+            <a href="https://example.com">Example link</a>
+          </Popover>
+        </label>,
+      );
+
+      fireEvent.click(screen.getByText(triggerText));
+
+      await waitFor(() => {
+        expect(screen.getByText("Example link")).toBeInTheDocument();
+      });
+
+      const link = screen.getByText("Example link");
+
+      const clickEvent = new MouseEvent("click", { bubbles: true });
+      const preventDefaultSpy = vi.spyOn(clickEvent, "preventDefault");
+
+      link.dispatchEvent(clickEvent);
+
+      expect(preventDefaultSpy).not.toHaveBeenCalled();
+      expect(onCheckboxChange).not.toHaveBeenCalled();
+    });
+
+    it("does not activate a parent label when clicking the close button", async () => {
+      const triggerText = "Click me";
+      const bodyText = "Popover body";
+      const onCheckboxChange = vi.fn();
+
+      render(
+        <label htmlFor="test-checkbox">
+          <input
+            id="test-checkbox"
+            type="checkbox"
+            onChange={onCheckboxChange}
+          />
+          <Popover trigger={<button type="button">{triggerText}</button>}>
+            <span>{bodyText}</span>
+          </Popover>
+        </label>,
+      );
+
+      fireEvent.click(screen.getByText(triggerText));
+
+      await waitFor(() => {
+        expect(screen.getByText(bodyText)).toBeInTheDocument();
+      });
+
+      fireEvent.click(screen.getByLabelText("Close"));
+
+      expect(onCheckboxChange).not.toHaveBeenCalled();
+    });
+  });
+
   describe("events", () => {
     it("calls onOpen when Popover is opened", async () => {
       const sampleText = "Sample Text";

package/src/components/Popover/Popover.tsx

@@ -12,7 +12,7 @@ import {
 import { cross } from "@simplybusiness/icons";
 import classNames from "classnames/dedupe";
 import type { ReactElement, ReactNode, RefAttributes } from "react";
-import { cloneElement, useRef, useState } from "react";
+import { cloneElement, useCallback, useEffect, useRef, useState } from "react";
 import { useWindowEvent } from "@simplybusiness/mobius-hooks";
 import type { DOMProps } from "../../types";
 import { Button } from "../Button";
@@ -38,6 +38,7 @@ const OFFSET_FROM_CONTENT_DEFAULT = 10;
 export const Popover = (props: PopoverProps) => {
   const { trigger, children, onOpen, onClose, className } = props;
   const arrowRef = useRef(null);
+  const floatingContainerRef = useRef<HTMLDivElement | null>(null);
   const [isOpen, setIsOpen] = useState(false);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
@@ -72,6 +73,33 @@ export const Popover = (props: PopoverProps) => {
     className,
   );
 
+  const setFloatingRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      refs.setFloating(node);
+      floatingContainerRef.current = node;
+    },
+    [refs],
+  );
+
+  // Native listener to prevent clicks inside the popover from activating
+  // interactive ancestors. Must be native because React's onClick fires
+  // too late via delegation.
+  useEffect(() => {
+    const el = floatingContainerRef.current;
+    if (!el) return;
+
+    const preventLabelActivation = (e: Event) => {
+      const target = e.target as HTMLElement;
+      // Allow default behavior for interactive elements (links, inputs, etc.)
+      // so they remain functional inside the popover.
+      if (!target.closest("a[href], input, select, textarea")) {
+        e.preventDefault();
+      }
+    };
+    el.addEventListener("click", preventLabelActivation);
+    return () => el.removeEventListener("click", preventLabelActivation);
+  }, [isOpen]);
+
   const toggleVisibility = () => {
     if (isOpen) {
       setIsOpen(false);
@@ -107,7 +135,7 @@ export const Popover = (props: PopoverProps) => {
       {isOpen && (
         <div
           className={containerClasses}
-          ref={refs.setFloating}
+          ref={setFloatingRef}
           style={floatingStyles}
           {...getFloatingProps()}
         >

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/Popover/Popover.tsx"],
-  "sourcesContent": ["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactElement, ReactNode, RefAttributes } from \"react\";\nimport { cloneElement, useRef, useState } from \"react\";\nimport { useWindowEvent } from \"@simplybusiness/mobius-hooks\";\nimport type { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport \"./Popover.css\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps, RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius-popover__container\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(\n      (trigger.props as { className?: string }).className,\n      \"mobius-popover__toggle\",\n    ),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  } as Record<string, unknown>);\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius-popover\">\n            <header className=\"mobius-popover__header\">\n              <Button\n                type=\"button\"\n                className=\"mobius-popover__close-button\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius-popover__close-icon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius-popover__body\">{children}</div>\n          </div>\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={20}\n            className=\"mobius-popover__arrow-icon\"\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],
-  "mappings": ";;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,OAAO,gBAAgB;AAEvB,SAAS,cAAc,QAAQ,gBAAgB;AAC/C,SAAS,sBAAsB;AAI/B,OAAO;AAqFH,mBAkBY,KATN,YATN;AArEJ,IAAM,8BAA8B;AAE7B,IAAM,UAAU,CAAC,UAAwB;AAC9C,QAAM,EAAE,SAAS,UAAU,QAAQ,SAAS,UAAU,IAAI;AAC1D,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,EAAE,MAAM,gBAAgB,QAAQ,IAAI,YAAY;AAAA,IACpD,MAAM;AAAA,IACN,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,SAAS;AAAA,MACX,CAAC;AAAA,MACD,OAAO,2BAA2B;AAAA,MAClC,MAAM;AAAA,MACN,KAAK;AAAA,IACP;AAAA,EACF,CAAC;AACD,QAAM,UAAU,WAAW,SAAS;AAAA,IAClC,SAAS;AAAA,IACT,cAAc,CAAC,UAAsB;AAEnC,YAAM,SAAS,KAAK,UAAU;AAC9B,YAAM,gBAAgB,CAAC,QAAQ,SAAS,MAAM,MAAqB;AACnE,UAAI,eAAe;AACjB,kBAAU;AAAA,MACZ;AACA,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AACD,QAAM,EAAE,mBAAmB,iBAAiB,IAAI,gBAAgB,CAAC,OAAO,CAAC;AAEzE,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,QAAI,QAAQ;AACV,gBAAU,KAAK;AACf,gBAAU;AACV;AAAA,IACF;AAEA,cAAU,IAAI;AACd,aAAS;AAAA,EACX;AAEA,QAAM,mBAAmB,aAAa,SAAS;AAAA,IAC7C,KAAK,KAAK;AAAA,IACV,WAAW;AAAA,MACR,QAAQ,MAAiC;AAAA,MAC1C;AAAA,IACF;AAAA,IACA,SAAS;AAAA,IACT,GAAG,kBAAkB;AAAA,EACvB,CAA4B;AAE5B,iBAAe,WAAW,OAAK;AAC7B,QAAI,EAAE,QAAQ,UAAU;AACtB,gBAAU;AACV,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF,CAAC;AAED,SACE,iCACG;AAAA;AAAA,IACA,UACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,KAAK,KAAK;AAAA,QACV,OAAO;AAAA,QACN,GAAG,iBAAiB;AAAA,QAErB;AAAA,+BAAC,SAAI,WAAU,kBACb;AAAA,gCAAC,YAAO,WAAU,0BAChB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAW;AAAA,gBACX,SAAQ;AAAA,gBAER;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAM;AAAA,oBACN,MAAK;AAAA,oBACL,WAAU;AAAA;AAAA,gBACZ;AAAA;AAAA,YACF,GACF;AAAA,YACA,oBAAC,SAAI,WAAU,wBAAwB,UAAS;AAAA,aAClD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL;AAAA,cACA,OAAO;AAAA,cACP,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;",
-  "names": []
-}