@simplybusiness/mobius 9.0.1 → 9.1.0

package/dist/types/src/components/Combobox/Listbox.d.ts

@@ -8,5 +8,6 @@ export type ListboxProps<T extends ComboboxOption> = {
     highlightedGroupIndex: number;
     onOptionSelect: (option: T) => void;
     optionComponent?: ComboboxBaseProps<T>["optionComponent"];
+    optionTestIdPrefix?: string;
 };
-export declare const Listbox: <T extends ComboboxOption>({ id, isOpen, options, highlightedIndex, highlightedGroupIndex, onOptionSelect, optionComponent, }: ListboxProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Listbox: <T extends ComboboxOption>({ id, isOpen, options, highlightedIndex, highlightedGroupIndex, onOptionSelect, optionComponent, optionTestIdPrefix, }: ListboxProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/Combobox/Option.d.ts

@@ -1,2 +1,2 @@
 import type { ComboboxOption, ComboboxOptionProps } from "./types";
-export declare const Option: <T extends ComboboxOption>({ option, isHighlighted, onOptionSelect, optionComponent: OptionComponent, id, }: ComboboxOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Option: <T extends ComboboxOption>({ option, isHighlighted, onOptionSelect, optionComponent: OptionComponent, optionTestIdPrefix, id, }: ComboboxOptionProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/Combobox/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./Combobox";
 export * from "./types";
+export { buildOptionTestId } from "./utils";

package/dist/types/src/components/Combobox/types.d.ts

@@ -13,6 +13,8 @@ export type ComboboxBaseProps<T extends ComboboxOption = ComboboxOption> = TextF
     /** Callback when the selected option changes */
     onSelected?: ((value: T) => void) | undefined;
     optionComponent?: (props: Pick<ComboboxOptionProps<T>, "option" | "isHighlighted">) => ReactElement;
+    /** Prefix for option data-testid attributes (default: "combobox-option") */
+    optionTestIdPrefix?: string;
 };
 export type ComboboxSyncProps<T extends ComboboxOption = ComboboxOption> = ComboboxBaseProps<T> & {
     /** The list of options to display in the dropdown */
@@ -46,4 +48,5 @@ export type ComboboxOptionProps<T extends ComboboxOption = ComboboxOption> = {
     isHighlighted: boolean;
     onOptionSelect: (option: T) => void;
     id: string;
+    optionTestIdPrefix?: string;
 };

package/dist/types/src/components/Combobox/utils.d.ts

@@ -4,3 +4,4 @@ export declare const getOptionValue: (option: ComboboxOption | undefined) => str
 export declare const getOptionLabel: (option: ComboboxOption | undefined) => string | undefined;
 export declare function filterOptions<T extends ComboboxOption>(options: ComboboxOptions<T>, inputValue: string): ComboboxOptions<T>;
 export declare function clamp(value: number, min: number, max: number): number;
+export declare const buildOptionTestId: (prefix: string, value: string) => string;

package/dist/types/src/components/MaskedField/MaskedField.d.ts

@@ -4,6 +4,7 @@ import type { TextFieldProps } from "../TextField";
 export type MaskedFieldElementType = HTMLInputElement;
 export interface MaskedFieldProps extends Omit<TextFieldProps, "type" | "ref">, RefAttributes<MaskedFieldElementType> {
     mask: FactoryOpts;
+    "data-testid"?: string;
     /**
      * If true, onChange and onBlur events will emit the masked (formatted) value.
      * If false (default), events will emit the unmasked (raw) value.

package/dist/types/src/components/MaskedField/index.d.ts

@@ -1 +1,6 @@
-export * from "./MaskedField";
+import type { MaskedFieldProps } from "./MaskedField";
+export declare function MaskedField(props: MaskedFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MaskedField {
+    var displayName: string;
+}
+export type { MaskedFieldProps, MaskedFieldRef, MaskedFieldElementType, } from "./MaskedField";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -56,7 +56,9 @@
     "lint:css": "lint-css",
     "lint:css:fix": "lint-css --fix"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "src/**/*.css"
+  ],
   "devDependencies": {
     "@eslint/compat": "^2.0.2",
     "@eslint/eslintrc": "^3.3.4",
@@ -92,6 +94,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.18",
+    "@loadable/component": "^5.16.7",
     "@simplybusiness/icons": "^5.0.3",
     "@simplybusiness/mobius-hooks": "^0.1.1",
     "classnames": "^2.5.1",

package/src/components/Combobox/Combobox.test.tsx

@@ -127,6 +127,32 @@ describe("Combobox", () => {
         expect(ids.size).toBe(getFlatOptions(options).length);
       });
 
+      it("should give each option a data-testid based on its value", () => {
+        render(<Combobox label="Fruit" options={options} />);
+        const input = screen.getByRole("combobox");
+        fireEvent.mouseDown(input);
+        fireEvent.focus(input);
+        const firstOption = screen.getAllByRole("option")[0];
+        const testId = firstOption.getAttribute("data-testid");
+        expect(testId).toMatch(/^combobox-option-.+$/);
+      });
+
+      it("should use a custom optionTestIdPrefix when provided", () => {
+        render(
+          <Combobox
+            label="Fruit"
+            options={options}
+            optionTestIdPrefix="trade-option"
+          />,
+        );
+        const input = screen.getByRole("combobox");
+        fireEvent.mouseDown(input);
+        fireEvent.focus(input);
+        const firstOption = screen.getAllByRole("option")[0];
+        const testId = firstOption.getAttribute("data-testid");
+        expect(testId).toMatch(/^trade-option-.+$/);
+      });
+
       it("should render custom option component when optionComponent is provided", async () => {
         const CustomOption = ({
           option,
@@ -212,7 +238,7 @@ describe("Combobox", () => {
           expect(onSelected).toHaveBeenCalledWith(getFirstOption(options));
         });
 
-        it("should NOT call the onSelected callback when a user blurs and the typed text does not match an option label", async () => {
+        it("should show validation error and clear input when a user blurs with invalid text", async () => {
           const onSelected = vi.fn();
           render(
             <Combobox
@@ -224,8 +250,69 @@ describe("Combobox", () => {
           const input = screen.getByRole("combobox");
           await user.click(input);
           await user.type(input, "app");
-          await user.tab();
-          expect(onSelected).not.toHaveBeenCalled();
+          await act(async () => {
+            await user.tab();
+            vi.advanceTimersByTime(200);
+          });
+          await vi.waitFor(() => {
+            expect(onSelected).not.toHaveBeenCalled();
+            expect(input).toHaveValue("");
+            expect(
+              screen.getByText("Please select an option from the list"),
+            ).toBeInTheDocument();
+          });
+        });
+
+        it("should call onSelected with empty value when user clears input and blurs", async () => {
+          const onSelected = vi.fn();
+          render(
+            <Combobox
+              label="Fruit"
+              options={options}
+              onSelected={onSelected}
+              defaultValue="Apple"
+            />,
+          );
+          const input = screen.getByRole("combobox");
+          await user.click(input);
+          await user.clear(input);
+          await act(async () => {
+            await user.tab();
+            vi.advanceTimersByTime(200);
+          });
+          await vi.waitFor(() => {
+            // String options emit "", object options emit { label: "", value: "" }
+            const firstOption = getFirstOption(options);
+            const expectedEmpty =
+              typeof firstOption === "string" ? "" : { label: "", value: "" };
+            expect(onSelected).toHaveBeenCalledWith(expectedEmpty);
+            expect(input).toHaveValue("");
+          });
+        });
+
+        it("should clear validation error when user starts typing again", async () => {
+          render(<Combobox label="Fruit" options={options} />);
+          const input = screen.getByRole("combobox");
+          await user.click(input);
+          await user.type(input, "xyz");
+          await act(async () => {
+            await user.tab();
+            vi.advanceTimersByTime(200);
+          });
+          await vi.waitFor(() => {
+            expect(
+              screen.getByText("Please select an option from the list"),
+            ).toBeInTheDocument();
+          });
+
+          // Start typing again
+          await user.click(input);
+          await user.type(input, "a");
+          await vi.waitFor(() => {
+            expect(
+              screen.queryByText("Please select an option from the list"),
+            ).not.toBeInTheDocument();
+          });
         });
 
         it("should update the input value when an option is selected", async () => {
@@ -798,6 +885,80 @@ describe("Combobox", () => {
         const wrapper = screen.getByTestId("mobius-combobox__wrapper");
         expect(wrapper).not.toHaveClass("mobius-combobox--is-loading");
       });
+
+      it("should call onSelected with empty value when user clears async input and blurs", async () => {
+        const onSelected = vi.fn();
+        render(
+          <Combobox
+            label="Fruit"
+            asyncOptions={asyncOptions}
+            onSelected={onSelected}
+            defaultValue="Apple"
+          />,
+        );
+        const input = screen.getByRole("combobox");
+        await user.click(input);
+        await user.clear(input);
+        await user.tab();
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+        await vi.waitFor(() => {
+          // Async combobox needs to infer type - check what was actually called
+          // For empty values, it looks at the first option from the last loaded set
+          // Since we're testing across different option types, just verify empty was called
+          expect(onSelected).toHaveBeenCalled();
+          const callArg = onSelected.mock.calls[0][0];
+          // Verify it's an empty value (either "" or { label: "", value: "" })
+          if (typeof callArg === "string") {
+            expect(callArg).toBe("");
+          } else {
+            expect(callArg).toEqual({ label: "", value: "" });
+          }
+          expect(input).toHaveValue("");
+        });
+      });
+
+      it("should show validation error when user enters invalid text in async combobox", async () => {
+        const onSelected = vi.fn();
+        render(
+          <Combobox
+            label="Fruit"
+            asyncOptions={asyncOptions}
+            onSelected={onSelected}
+          />,
+        );
+        const input = screen.getByRole("combobox");
+        await user.click(input);
+        await user.type(input, "berry");
+
+        // Wait for async options to load
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(1100);
+        });
+
+        // Clear and type invalid text
+        await user.clear(input);
+        await user.type(input, "xyz");
+
+        // Wait for async to complete with no results
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(1100);
+        });
+
+        // Blur to trigger validation
+        await user.tab();
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+
+        await vi.waitFor(() => {
+          expect(
+            screen.getByText("Please select an option from the list"),
+          ).toBeInTheDocument();
+          expect(input).toHaveValue("");
+        });
+      });
     });
   });
 });

package/src/components/Combobox/Combobox.tsx

@@ -33,6 +33,7 @@ const ComboboxInner = <T extends ComboboxOption>({
     onChange,
     // onSearched, // unused prop, consider removing
     optionComponent,
+    optionTestIdPrefix,
     errorMessage,
     ...otherProps
   } = props;
@@ -51,6 +52,9 @@ const ComboboxInner = <T extends ComboboxOption>({
       minSearchLength,
       skipNextDebounceRef,
     });
+  const [validationError, setValidationError] = useState(
+    error?.message || errorMessage,
+  );
   const {
     highlightedIndex,
     highlightedGroupIndex,
@@ -70,6 +74,32 @@ const ComboboxInner = <T extends ComboboxOption>({
   const { down } = useBreakpoint();
   const isMobile = down("md");
 
+  useEffect(() => {
+    setValidationError(error?.message || errorMessage);
+  }, [error, errorMessage]);
+
+  // Helper to create properly-typed empty value based on option type
+  const getEmptyValue = (): T => {
+    // Check first available option to determine if we're using string or object options
+    const firstOption = filteredOptions
+      ? isOptionGroup(filteredOptions)
+        ? filteredOptions[0]?.options[0]
+        : filteredOptions[0]
+      : options
+        ? isOptionGroup(options)
+          ? options[0]?.options[0]
+          : options[0]
+        : undefined;
+
+    // If options are strings, return empty string
+    if (typeof firstOption === "string") {
+      return "" as T;
+    }
+
+    // If options are objects, return empty object with same shape
+    return { label: "", value: "" } as T;
+  };
+
   const handleFocus = (e: FocusEvent) => {
     onFocus?.(e);
     if (!filteredOptions || filteredOptions.length === 0) return;
@@ -122,6 +152,7 @@ const ComboboxInner = <T extends ComboboxOption>({
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     setInputValue(newValue);
+    setValidationError(undefined);
     justSelectedRef.current = false;
     setIsChanging(true);
     // Only open immediately for sync options; async options controlled by useEffect
@@ -134,7 +165,9 @@ const ComboboxInner = <T extends ComboboxOption>({
 
   const handleOptionSelect = (option: T) => {
     const val = getOptionValue(option);
-    if (!val) return;
+
+    // Allow empty values to pass through
+    if (!val && val !== "") return;
 
     if (
       typeof option === "object" &&
@@ -156,6 +189,7 @@ const ComboboxInner = <T extends ComboboxOption>({
     justSelectedRef.current = true;
 
     setIsChanging(false);
+    setValidationError(undefined);
     setIsOpen(false);
     setInputValue(val);
     onSelected?.(option);
@@ -197,14 +231,29 @@ const ComboboxInner = <T extends ComboboxOption>({
     // Force selection if user has matched an entry by typing (not already selected)
     // Defer this to allow natural focus flow to complete first
     if (!justSelectedRef.current) {
-      const typedText = inputValue.trim().toLowerCase();
+      const typedText = inputValue.trim();
+      const typedTextLower = typedText.toLowerCase();
       const highlightedOption = getHighlightedOption();
       const label = getOptionLabel(highlightedOption);
 
-      if (typedText === label?.toLowerCase()) {
+      if (typedTextLower === label?.toLowerCase()) {
+        // Exact match with an option
         setTimeout(() => {
           handleOptionSelect(highlightedOption as T);
         }, 0);
+      } else if (typedText === "") {
+        // Allow empty values
+        setTimeout(() => {
+          handleOptionSelect(getEmptyValue());
+        }, 0);
+      } else {
+        // Invalid value (not in options and not empty)
+        setValidationError(
+          errorMessage || "Please select an option from the list",
+        );
+        setTimeout(() => {
+          setInputValue("");
+        }, 0);
       }
     }
 
@@ -330,7 +379,7 @@ const ComboboxInner = <T extends ComboboxOption>({
         }
         prefixInside={icon}
         ref={inputRef}
-        errorMessage={errorMessage || error?.message || undefined}
+        errorMessage={errorMessage || validationError || error?.message}
       />
       <Listbox
         id={listboxId}
@@ -341,6 +390,7 @@ const ComboboxInner = <T extends ComboboxOption>({
         highlightedGroupIndex={highlightedGroupIndex}
         onOptionSelect={handleOptionSelect}
         optionComponent={optionComponent}
+        optionTestIdPrefix={optionTestIdPrefix}
       />
     </div>
   );

package/src/components/Combobox/Listbox.tsx

@@ -30,6 +30,7 @@ export type ListboxProps<T extends ComboboxOption> = {
   highlightedGroupIndex: number;
   onOptionSelect: (option: T) => void;
   optionComponent?: ComboboxBaseProps<T>["optionComponent"];
+  optionTestIdPrefix?: string;
 };
 
 export const Listbox = <T extends ComboboxOption>({
@@ -40,6 +41,7 @@ export const Listbox = <T extends ComboboxOption>({
   highlightedGroupIndex,
   onOptionSelect,
   optionComponent,
+  optionTestIdPrefix,
 }: ListboxProps<T>) => {
   const classes = classNames("mobius-combobox__list", {
     "mobius-combobox__list--hidden": !isOpen,
@@ -102,6 +104,7 @@ export const Listbox = <T extends ComboboxOption>({
                   }
                   onOptionSelect={onOptionSelect}
                   optionComponent={optionComponent}
+                  optionTestIdPrefix={optionTestIdPrefix}
                   id={getOptionId(groupOption, groupIndex, index)}
                 />
               ))}
@@ -115,6 +118,7 @@ export const Listbox = <T extends ComboboxOption>({
                 isHighlighted={highlightedIndex === index}
                 onOptionSelect={onOptionSelect}
                 optionComponent={optionComponent}
+                optionTestIdPrefix={optionTestIdPrefix}
                 id={getOptionId(option, 0, index)}
               />
             ))

package/src/components/Combobox/Option.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import classNames from "classnames/dedupe";
-import { getOptionValue, getOptionLabel } from "./utils";
+import { getOptionValue, getOptionLabel, buildOptionTestId } from "./utils";
 import type { ComboboxOption, ComboboxOptionProps } from "./types";
 
 export const Option = <T extends ComboboxOption>({
@@ -8,9 +8,15 @@ export const Option = <T extends ComboboxOption>({
   isHighlighted,
   onOptionSelect,
   optionComponent: OptionComponent,
+  optionTestIdPrefix,
   id,
 }: ComboboxOptionProps<T>) => {
   const optionRef = useRef<HTMLLIElement>(null);
+  const optionValue = getOptionValue(option) || "";
+  const testId = buildOptionTestId(
+    optionTestIdPrefix || "combobox-option",
+    optionValue,
+  );
 
   useEffect(() => {
     if (
@@ -26,6 +32,7 @@ export const Option = <T extends ComboboxOption>({
     <li
       ref={optionRef}
       role="option"
+      data-testid={testId}
       key={getOptionValue(option)}
       id={id}
       aria-selected={isHighlighted}

package/src/components/Combobox/index.tsx

@@ -1,2 +1,3 @@
 export * from "./Combobox";
 export * from "./types";
+export { buildOptionTestId } from "./utils";

package/src/components/Combobox/types.tsx

@@ -16,6 +16,8 @@ export type ComboboxBaseProps<T extends ComboboxOption = ComboboxOption> =
     optionComponent?: (
       props: Pick<ComboboxOptionProps<T>, "option" | "isHighlighted">,
     ) => ReactElement;
+    /** Prefix for option data-testid attributes (default: "combobox-option") */
+    optionTestIdPrefix?: string;
   };
 
 export type ComboboxSyncProps<T extends ComboboxOption = ComboboxOption> =
@@ -66,4 +68,5 @@ export type ComboboxOptionProps<T extends ComboboxOption = ComboboxOption> = {
   isHighlighted: boolean;
   onOptionSelect: (option: T) => void;
   id: string;
+  optionTestIdPrefix?: string;
 };

package/src/components/Combobox/utils.test.tsx

@@ -4,6 +4,7 @@ import {
   getOptionValue,
   filterOptions,
   clamp,
+  buildOptionTestId,
 } from "./utils";
 import type { ComboboxOptions } from "./types";
 
@@ -104,6 +105,44 @@ describe("Combobox utils", () => {
     });
   });
 
+  describe("buildOptionTestId", () => {
+    it("should build a test ID from prefix and value", () => {
+      expect(buildOptionTestId("combobox-option", "Florist")).toBe(
+        "combobox-option-florist",
+      );
+    });
+
+    it("should replace spaces with hyphens", () => {
+      expect(buildOptionTestId("trade-option", "Dog Walking")).toBe(
+        "trade-option-dog-walking",
+      );
+    });
+
+    it("should handle multiple consecutive spaces", () => {
+      expect(buildOptionTestId("combobox-option", "Foo   Bar")).toBe(
+        "combobox-option-foo-bar",
+      );
+    });
+
+    it("should replace punctuation with hyphens", () => {
+      expect(buildOptionTestId("trade-option", "Painter & Decorator")).toBe(
+        "trade-option-painter-decorator",
+      );
+    });
+
+    it("should handle slashes and special characters", () => {
+      expect(
+        buildOptionTestId("trade-option", "Coffee Shop / Sandwich Bar"),
+      ).toBe("trade-option-coffee-shop-sandwich-bar");
+    });
+
+    it("should trim leading and trailing whitespace", () => {
+      expect(buildOptionTestId("combobox-option", "  Florist  ")).toBe(
+        "combobox-option-florist",
+      );
+    });
+  });
+
   describe("clamp", () => {
     it("should clamp to the min value", () => {
       expect(clamp(-1, 0, 10)).toBe(0);

package/src/components/Combobox/utils.tsx

@@ -49,3 +49,10 @@ export function filterOptions<T extends ComboboxOption>(
 export function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max);
 }
+
+export const buildOptionTestId = (prefix: string, value: string): string =>
+  `${prefix}-${value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")}`;

package/src/components/Drawer/Drawer.mdx

@@ -82,7 +82,7 @@ const LogoHeader = () => {
       >
         <Drawer.Header>
           <img
-            src="https://quote.simplybusiness.com/assets/logos/insurers/harborway_insurance-1a46ba508f3dfcc89aa2498e7680ed15bd1704ccb01c614eb5335bd7b25e0537.png"
+            src="https://quote.simplybusiness.com/assets/logos/insurers/harborway_insurance.png"
             alt="Provider logo"
           />
         </Drawer.Header>

package/src/components/Drawer/Drawer.stories.tsx

@@ -72,7 +72,7 @@ const LogoHeader = ({ direction, closeLabel }: DrawerProps) => {
       >
         <Drawer.Header>
           <img
-            src="https://quote.simplybusiness.com/assets/logos/insurers/harborway_insurance-1a46ba508f3dfcc89aa2498e7680ed15bd1704ccb01c614eb5335bd7b25e0537.png"
+            src="https://quote.simplybusiness.com/assets/logos/insurers/harborway_insurance.png"
             alt="Provider logo"
           />
         </Drawer.Header>

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;

package/src/components/MaskedField/MaskedField.tsx

@@ -14,6 +14,7 @@ export interface MaskedFieldProps
     Omit<TextFieldProps, "type" | "ref">,
     RefAttributes<MaskedFieldElementType> {
   mask: FactoryOpts;
+  "data-testid"?: string;
   /**
    * If true, onChange and onBlur events will emit the masked (formatted) value.
    * If false (default), events will emit the unmasked (raw) value.

package/src/components/MaskedField/index.tsx

@@ -1 +1,42 @@
-export * from "./MaskedField";
+"use client";
+
+import loadable from "@loadable/component";
+import { TextField } from "../TextField";
+import type { MaskedFieldProps } from "./MaskedField";
+
+/** Lazy-loads MaskedField (and react-imask) so consumers importing only TextField don't bundle react-imask. */
+const LoadableMaskedField = loadable(() => import("./MaskedField"), {
+  resolveComponent: mod => mod.MaskedField,
+});
+
+export function MaskedField(props: MaskedFieldProps) {
+  const {
+    mask: _mask,
+    useMaskedValue: _useMaskedValue,
+    "data-testid": _dataTestId,
+    ref: forwardedRef,
+    ...textFieldProps
+  } = props;
+  return (
+    <LoadableMaskedField
+      {...props}
+      fallback={
+        <TextField
+          {...textFieldProps}
+          ref={forwardedRef}
+          type="text"
+          isDisabled
+          isReadOnly
+        />
+      }
+    />
+  );
+}
+
+MaskedField.displayName = "MaskedField";
+
+export type {
+  MaskedFieldProps,
+  MaskedFieldRef,
+  MaskedFieldElementType,
+} from "./MaskedField";