@simplybusiness/mobius 6.6.0 → 6.7.0

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

@@ -3,6 +3,10 @@ import type { ForwardedRefComponent } from "../../types/components";
 import type { DOMProps } from "../../types/dom";
 import type { HTMLElementEvent } from "../../types/events";
 export type RadioElementType = HTMLInputElement;
+export type RadioOverflowInfo = {
+    vertical: boolean;
+    horizontal: boolean;
+};
 export type AriaRadioProps = {
     /**
      * Defines a string value that labels the current element.
@@ -31,20 +35,14 @@ export interface RadioProps extends DOMProps, AriaRadioProps, RefAttributes<Radi
     onChange?: (event: HTMLElementEvent<RadioElementType>) => void;
     defaultChecked?: boolean;
     /**
-     * **Internal:** Do not use
+     * Callback fired when label overflow state changes.
+     * Only invoked when the Radio is in horizontal orientation to prevent infinite loops with autoStack.
+     * Provides information about vertical and horizontal overflow.
      */
+    onOverflow?: (overflow: RadioOverflowInfo) => void;
     groupDisabled?: boolean;
-    /**
-     * **Internal:** Do not use
-     */
     name?: string;
-    /**
-     * **Internal:** Do not use
-     */
     selected?: string;
-    /**
-     * **Internal:** Do not use
-     */
     setSelected?: React.Dispatch<React.SetStateAction<string>>;
     isRequired?: boolean;
 }

package/dist/types/src/components/Radio/Radio.stories.d.ts

@@ -10,4 +10,5 @@ export declare const Invalid: StoryType;
 export declare const WithIconViaChildren: StoryType;
 export declare const ComplexLabel: StoryType;
 export declare const HorizontalLayout: StoryType;
+export declare const AutoStack: StoryType;
 export default meta;

package/dist/types/src/components/Radio/RadioGroup.d.ts

@@ -10,6 +10,11 @@ export interface RadioGroupProps extends DOMProps, Validation, RefAttributes<Rad
     orientation?: "horizontal" | "vertical";
     errorMessage?: string;
     onChange?: (event: HTMLElementEvent<HTMLInputElement>) => void;
+    /**
+     * Automatically change orientation from horizontal to vertical when any Radio label overflows.
+     * Only applies when orientation is set to "horizontal".
+     */
+    autoStack?: boolean;
     "aria-label"?: string;
     "aria-labelledby"?: string;
     "aria-errormessage"?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "6.6.0",
+  "version": "6.7.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Radio/Radio.css

@@ -93,6 +93,7 @@
   position: relative;
   cursor: pointer;
   background-color: var(--radio-label-background);
+  word-break: break-all;
 
   /* Disabled */
   &.--is-disabled {

package/src/components/Radio/Radio.stories.tsx

@@ -1,13 +1,13 @@
+import { rocketLaunch, screwdriverWrench, truck } from "@simplybusiness/icons";
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Divider } from "../Divider";
 import { Flex } from "../Flex";
+import { Icon } from "../Icon";
 import { Radio } from "./Radio";
 import type { RadioGroupProps } from "./RadioGroup";
 import { RadioGroup } from "./RadioGroup";
-import { rocketLaunch, screwdriverWrench, truck } from "@simplybusiness/icons";
-import { Icon } from "../Icon";
 
 type StoryType = StoryObj<typeof RadioGroup>;
 
@@ -222,4 +222,49 @@ export const HorizontalLayout: StoryType = {
   },
 };
 
+export const AutoStack: StoryType = {
+  render: () => (
+    <div>
+      <p style={{ marginBottom: "20px" }}>
+        With <code>autoStack</code> enabled, RadioGroup automatically changes
+        from horizontal to vertical orientation when any radio label overflows.
+        Resize the container to see it in action.
+      </p>
+      <div
+        style={{
+          maxWidth: "400px",
+          border: "1px dashed #ccc",
+          padding: "10px",
+        }}
+      >
+        <RadioGroup
+          label="Payment Options (with autoStack)"
+          orientation="horizontal"
+          autoStack
+        >
+          <Radio value="credit" label="Credit Card" />
+          <Radio value="debit" label="Debit Card" />
+        </RadioGroup>
+      </div>
+      <div
+        style={{
+          marginTop: "30px",
+          maxWidth: "200px",
+          border: "1px dashed #ccc",
+          padding: "10px",
+        }}
+      >
+        <RadioGroup
+          label="Same options, narrower container"
+          orientation="horizontal"
+          autoStack
+        >
+          <Radio value="credit" label="Credit Card" />
+          <Radio value="debit" label="Debit Card" />
+        </RadioGroup>
+      </div>
+    </div>
+  ),
+};
+
 export default meta;

package/src/components/Radio/Radio.test.tsx

@@ -10,6 +10,41 @@ const LABEL_CLASS = "mobius-label";
 const RADIO_WRAPPER_CLASS = "mobius-radio__wrapper";
 const RADIO_INPUT_CLASS = "mobius-radio__input";
 
+const mockElementDimensions = (
+  element: Element,
+  dimensions: {
+    scrollHeight?: number;
+    clientHeight?: number;
+    scrollWidth?: number;
+    clientWidth?: number;
+  },
+) => {
+  Object.entries(dimensions).forEach(([key, value]) => {
+    Object.defineProperty(element, key, {
+      configurable: true,
+      value,
+    });
+  });
+};
+
+const mockOverflow = (element: Element) => {
+  mockElementDimensions(element, {
+    scrollHeight: 100,
+    clientHeight: 50,
+    scrollWidth: 100,
+    clientWidth: 100,
+  });
+};
+
+const mockNoOverflow = (element: Element) => {
+  mockElementDimensions(element, {
+    scrollHeight: 50,
+    clientHeight: 50,
+    scrollWidth: 100,
+    clientWidth: 100,
+  });
+};
+
 describe("Radio", () => {
   it("should render without error", () => {
     const view = render(
@@ -837,3 +872,257 @@ describe.skip("focus behavior", () => {
     expect(selectedOption).toHaveFocus();
   });
 });
+
+describe("overflow detection", () => {
+  describe("Radio onOverflow callback", () => {
+    it("should call onOverflow with vertical overflow when content height exceeds container", () => {
+      const onOverflow = jest.fn();
+
+      const { container, rerender } = render(
+        <Radio value="test" label="Test Label" onOverflow={onOverflow} />,
+      );
+
+      const contentElement = container.querySelector(
+        ".mobius-radio__content",
+      ) as HTMLElement;
+
+      // Mock overflow: scrollHeight > clientHeight
+      mockOverflow(contentElement);
+
+      // Trigger useLayoutEffect by re-rendering
+      rerender(
+        <Radio
+          value="test"
+          label="Test Label Updated"
+          onOverflow={onOverflow}
+        />,
+      );
+
+      expect(onOverflow).toHaveBeenCalledWith({
+        vertical: true,
+        horizontal: false,
+      });
+    });
+
+    it("should call onOverflow with horizontal overflow when content width exceeds container", () => {
+      const onOverflow = jest.fn();
+
+      const { container, rerender } = render(
+        <Radio value="test" label="Test Label" onOverflow={onOverflow} />,
+      );
+
+      const contentElement = container.querySelector(
+        ".mobius-radio__content",
+      ) as HTMLElement;
+
+      // Mock overflow: scrollWidth > clientWidth
+      mockElementDimensions(contentElement, {
+        scrollHeight: 50,
+        clientHeight: 50,
+        scrollWidth: 200,
+        clientWidth: 100,
+      });
+
+      // Trigger useLayoutEffect by re-rendering
+      rerender(
+        <Radio
+          value="test"
+          label="Test Label Updated"
+          onOverflow={onOverflow}
+        />,
+      );
+
+      expect(onOverflow).toHaveBeenCalledWith({
+        vertical: false,
+        horizontal: true,
+      });
+    });
+
+    it("should call onOverflow with both overflow types when content exceeds in both dimensions", () => {
+      const onOverflow = jest.fn();
+
+      const { container, rerender } = render(
+        <Radio value="test" label="Test Label" onOverflow={onOverflow} />,
+      );
+
+      const contentElement = container.querySelector(
+        ".mobius-radio__content",
+      ) as HTMLElement;
+
+      // Mock overflow in both dimensions
+      mockElementDimensions(contentElement, {
+        scrollHeight: 100,
+        clientHeight: 50,
+        scrollWidth: 200,
+        clientWidth: 100,
+      });
+
+      // Trigger useLayoutEffect by re-rendering
+      rerender(
+        <Radio
+          value="test"
+          label="Test Label Updated"
+          onOverflow={onOverflow}
+        />,
+      );
+
+      expect(onOverflow).toHaveBeenCalledWith({
+        vertical: true,
+        horizontal: true,
+      });
+    });
+
+    it("should not call onOverflow when content fits within container and state has not changed", () => {
+      const onOverflow = jest.fn();
+
+      const { container, rerender } = render(
+        <Radio value="test" label="Test Label" onOverflow={onOverflow} />,
+      );
+
+      const contentElement = container.querySelector(
+        ".mobius-radio__content",
+      ) as HTMLElement;
+
+      mockNoOverflow(contentElement);
+
+      // Trigger useLayoutEffect by re-rendering
+      rerender(
+        <Radio
+          value="test"
+          label="Test Label Updated"
+          onOverflow={onOverflow}
+        />,
+      );
+
+      // Should not be called because overflow state didn't change (was false, still false)
+      expect(onOverflow).not.toHaveBeenCalled();
+    });
+
+    it("should not call onOverflow when callback is not provided", () => {
+      const { container } = render(<Radio value="test" label="Test Label" />);
+
+      const contentElement = container.querySelector(
+        ".mobius-radio__content",
+      ) as HTMLElement;
+
+      // Mock overflow
+      Object.defineProperty(contentElement, "scrollHeight", {
+        configurable: true,
+        value: 100,
+      });
+      Object.defineProperty(contentElement, "clientHeight", {
+        configurable: true,
+        value: 50,
+      });
+
+      // Should not throw
+      expect(() => {
+        render(<Radio value="test" label="Test Label Updated" />);
+      }).not.toThrow();
+    });
+  });
+
+  describe("RadioGroup autoStack", () => {
+    it("should change orientation from horizontal to vertical when overflow detected and autoStack is true", () => {
+      const { container, rerender } = render(
+        <RadioGroup label="Color" orientation="horizontal" autoStack>
+          <Radio value="red">Red</Radio>
+          <Radio value="blue">Blue</Radio>
+        </RadioGroup>,
+      );
+
+      // Initially should be horizontal
+      expect(container.firstChild).toHaveClass("--is-horizontal");
+      expect(container.firstChild).toHaveAttribute(
+        "aria-orientation",
+        "horizontal",
+      );
+
+      const radioContents = container.querySelectorAll(
+        ".mobius-radio__content",
+      );
+
+      mockOverflow(radioContents[0]);
+      mockNoOverflow(radioContents[1]);
+
+      // Trigger overflow detection by re-rendering
+      rerender(
+        <RadioGroup label="Color Updated" orientation="horizontal" autoStack>
+          <Radio value="red">Red</Radio>
+          <Radio value="blue">Blue</Radio>
+        </RadioGroup>,
+      );
+
+      // Should now be vertical
+      expect(container.firstChild).toHaveClass("--is-vertical");
+      expect(container.firstChild).toHaveAttribute(
+        "aria-orientation",
+        "vertical",
+      );
+    });
+
+    it("should not change orientation when autoStack is false", () => {
+      const { container, rerender } = render(
+        <RadioGroup label="Color" orientation="horizontal" autoStack={false}>
+          <Radio value="red">Red</Radio>
+          <Radio value="blue">Blue</Radio>
+        </RadioGroup>,
+      );
+
+      const radioContents = container.querySelectorAll(
+        ".mobius-radio__content",
+      );
+
+      mockOverflow(radioContents[0]);
+
+      // Trigger overflow detection
+      rerender(
+        <RadioGroup
+          label="Color Updated"
+          orientation="horizontal"
+          autoStack={false}
+        >
+          <Radio value="red">Red</Radio>
+          <Radio value="blue">Blue</Radio>
+        </RadioGroup>,
+      );
+
+      // Should still be horizontal
+      expect(container.firstChild).toHaveClass("--is-horizontal");
+      expect(container.firstChild).toHaveAttribute(
+        "aria-orientation",
+        "horizontal",
+      );
+    });
+
+    it("should not change orientation when initial orientation is vertical", () => {
+      const { container, rerender } = render(
+        <RadioGroup label="Color" orientation="vertical" autoStack>
+          <Radio value="red">Red</Radio>
+          <Radio value="blue">Blue</Radio>
+        </RadioGroup>,
+      );
+
+      const radioContents = container.querySelectorAll(
+        ".mobius-radio__content",
+      );
+
+      mockOverflow(radioContents[0]);
+
+      // Trigger overflow detection
+      rerender(
+        <RadioGroup label="Color Updated" orientation="vertical" autoStack>
+          <Radio value="red">Red</Radio>
+          <Radio value="blue">Blue</Radio>
+        </RadioGroup>,
+      );
+
+      // Should remain vertical (no change)
+      expect(container.firstChild).toHaveClass("--is-vertical");
+      expect(container.firstChild).toHaveAttribute(
+        "aria-orientation",
+        "vertical",
+      );
+    });
+  });
+});

package/src/components/Radio/Radio.tsx

@@ -2,7 +2,14 @@
 
 import classNames from "classnames/dedupe";
 import type { ReactNode, Ref, RefAttributes } from "react";
-import { Children, forwardRef, isValidElement, useMemo } from "react";
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
 import type { ForwardedRefComponent } from "../../types/components";
 import type { DOMProps } from "../../types/dom";
 import type { HTMLElementEvent } from "../../types/events";
@@ -11,6 +18,11 @@ import { Label } from "../Label";
 
 export type RadioElementType = HTMLInputElement;
 
+export type RadioOverflowInfo = {
+  vertical: boolean;
+  horizontal: boolean;
+};
+
 export type AriaRadioProps = {
   /**
    * Defines a string value that labels the current element.
@@ -43,20 +55,18 @@ export interface RadioProps
   onChange?: (event: HTMLElementEvent<RadioElementType>) => void;
   defaultChecked?: boolean;
   /**
-   * **Internal:** Do not use
+   * Callback fired when label overflow state changes.
+   * Only invoked when the Radio is in horizontal orientation to prevent infinite loops with autoStack.
+   * Provides information about vertical and horizontal overflow.
    */
+  onOverflow?: (overflow: RadioOverflowInfo) => void;
+  // Internal:** Do not use
   groupDisabled?: boolean;
-  /**
-   * **Internal:** Do not use
-   */
+  // Internal:** Do not use
   name?: string;
-  /**
-   * **Internal:** Do not use
-   */
+  // Internal:** Do not use
   selected?: string;
-  /**
-   * **Internal:** Do not use
-   */
+  // Internal:** Do not use
   setSelected?: React.Dispatch<React.SetStateAction<string>>;
   isRequired?: boolean;
 }
@@ -79,6 +89,7 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
       selected,
       setSelected,
       isRequired,
+      onOverflow,
       ...otherProps
     } = props;
     const realDisabled = groupDisabled || isDisabled;
@@ -86,6 +97,19 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
     const isControlled = selected !== undefined;
     const isChecked = isControlled ? selected === value : defaultChecked;
 
+    const contentRef = useRef<HTMLDivElement>(null);
+    const prevOverflowRef = useRef<RadioOverflowInfo>({
+      vertical: false,
+      horizontal: false,
+    });
+
+    // Extract orientation from otherProps for overflow detection
+    // @ts-expect-error - orientation is passed via cloneElement
+    const currentOrientation = otherProps.orientation as
+      | "horizontal"
+      | "vertical"
+      | undefined;
+
     const hasIconFirst = useMemo(() => {
       if (!children || Children.count(children) === 0) return false;
 
@@ -96,6 +120,52 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
       return "icon" in props && props.icon !== undefined;
     }, [children]);
 
+    // Detect overflow and call callback
+    useLayoutEffect(() => {
+      if (!contentRef.current || !onOverflow) return;
+
+      // Only detect overflow when in horizontal orientation
+      // This prevents infinite loops when autoStack switches to vertical
+      if (currentOrientation === "vertical") {
+        return;
+      }
+
+      const element = contentRef.current;
+
+      // Check for content being cut off (true overflow)
+      const scrollOverflowVertical =
+        element.scrollHeight > element.clientHeight;
+      const scrollOverflowHorizontal =
+        element.scrollWidth > element.clientWidth;
+
+      // Check for multi-line text wrapping by comparing height to single line height
+      const styles = window.getComputedStyle(element);
+      const lineHeight = parseFloat(styles.lineHeight);
+      const fontSize = parseFloat(styles.fontSize);
+      const singleLineHeight = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight;
+
+      // Tolerance multiplier to account for sub-pixel rendering and line-height variations.
+      // If element height is greater than single line, text has wrapped.
+      const WRAP_DETECTION_TOLERANCE = 1.1;
+      const hasWrapped =
+        element.clientHeight > singleLineHeight * WRAP_DETECTION_TOLERANCE;
+
+      const vertical = scrollOverflowVertical || hasWrapped;
+      const horizontal = scrollOverflowHorizontal;
+
+      const newOverflowState = { vertical, horizontal };
+      const prevOverflow = prevOverflowRef.current;
+
+      // Only call callback if state actually changed
+      if (
+        newOverflowState.vertical !== prevOverflow.vertical ||
+        newOverflowState.horizontal !== prevOverflow.horizontal
+      ) {
+        prevOverflowRef.current = newOverflowState;
+        onOverflow(newOverflowState);
+      }
+    }, [label, children, onOverflow, currentOrientation]);
+
     const radioClasses = {
       "--is-disabled": realDisabled,
       "--is-selected": selected === value,
@@ -157,12 +227,14 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
             {...rest}
           />
           {isMultiline ? (
-            <div className="mobius-radio__content--multiline">
+            <div ref={contentRef} className="mobius-radio__content--multiline">
               <div className="mobius-radio__content-first-line">{label}</div>
               <div className="mobius-radio__extra-content">{children}</div>
             </div>
           ) : (
-            <div className="mobius-radio__content">{label || children}</div>
+            <div ref={contentRef} className="mobius-radio__content">
+              {label || children}
+            </div>
           )}
         </Label>
         {errorMessage && <ErrorMessage errorMessage={errorMessage} />}