@simplybusiness/mobius 6.6.0 → 6.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 6.7.0
+
+### Minor Changes
+
+- 1a28ffc: Add support for auto-stacking in RadioGroup
+
 ## 6.6.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -3738,12 +3738,19 @@ var Radio = (0, import_react62.forwardRef)(
       selected,
       setSelected,
       isRequired,
+      onOverflow,
       ...otherProps
     } = props;
     const realDisabled = groupDisabled || isDisabled;
     const isMultiline = label && children;
     const isControlled = selected !== void 0;
     const isChecked = isControlled ? selected === value : defaultChecked;
+    const contentRef = (0, import_react62.useRef)(null);
+    const prevOverflowRef = (0, import_react62.useRef)({
+      vertical: false,
+      horizontal: false
+    });
+    const currentOrientation = otherProps.orientation;
     const hasIconFirst = (0, import_react62.useMemo)(() => {
       if (!children || import_react62.Children.count(children) === 0) return false;
       const firstChild = import_react62.Children.toArray(children)[0];
@@ -3751,6 +3758,29 @@ var Radio = (0, import_react62.forwardRef)(
       const props2 = firstChild.props;
       return "icon" in props2 && props2.icon !== void 0;
     }, [children]);
+    (0, import_react62.useLayoutEffect)(() => {
+      if (!contentRef.current || !onOverflow) return;
+      if (currentOrientation === "vertical") {
+        return;
+      }
+      const element = contentRef.current;
+      const scrollOverflowVertical = element.scrollHeight > element.clientHeight;
+      const scrollOverflowHorizontal = element.scrollWidth > element.clientWidth;
+      const styles = window.getComputedStyle(element);
+      const lineHeight = parseFloat(styles.lineHeight);
+      const fontSize = parseFloat(styles.fontSize);
+      const singleLineHeight = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight;
+      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;
+      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,
@@ -3801,10 +3831,10 @@ var Radio = (0, import_react62.forwardRef)(
             ...rest
           }
         ),
-        isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mobius-radio__content--multiline", children: [
+        isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "mobius-radio__extra-content", children })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "mobius-radio__content", children: label || children })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
       ] }),
       errorMessage && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ErrorMessage, { errorMessage })
     ] });
@@ -3840,15 +3870,34 @@ var RadioGroup = (0, import_react63.forwardRef)((props, ref) => {
     isReadOnly,
     name,
     onChange,
+    autoStack = false,
     ...rest
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
   const [selected, setSelected] = (0, import_react63.useState)(defaultSelected);
+  const overflowsRef = (0, import_react63.useRef)({});
+  const [hasOverflow, setHasOverflow] = (0, import_react63.useState)(false);
   (0, import_react63.useEffect)(() => {
     if (value !== void 0) {
       setSelected(value);
     }
   }, [value]);
+  const handleOverflow = (0, import_react63.useCallback)(
+    (radioValue, overflow) => {
+      overflowsRef.current = {
+        ...overflowsRef.current,
+        [radioValue]: overflow
+      };
+      const anyOverflow = Object.values(overflowsRef.current).some(
+        (o) => o.vertical || o.horizontal
+      );
+      if (anyOverflow !== hasOverflow) {
+        setHasOverflow(anyOverflow);
+      }
+    },
+    [hasOverflow]
+  );
+  const effectiveOrientation = autoStack && orientation === "horizontal" && hasOverflow ? "vertical" : orientation;
   const validationClasses = useValidationClasses({
     validationState,
     isInvalid
@@ -3857,7 +3906,7 @@ var RadioGroup = (0, import_react63.forwardRef)((props, ref) => {
     "--is-disabled": isDisabled,
     "--is-required": typeof isRequired === "boolean" && isRequired,
     "--is-optional": typeof isRequired === "boolean" && !isRequired,
-    [`--is-${orientation}`]: true,
+    [`--is-${effectiveOrientation}`]: true,
     [className || ""]: true
   };
   const radioGroupClasses = (0, import_dedupe39.default)(
@@ -3867,7 +3916,7 @@ var RadioGroup = (0, import_react63.forwardRef)((props, ref) => {
     validationClasses
   );
   const radioWrapperClasses = (0, import_dedupe39.default)("mobius-radio__wrapper", {
-    [`--is-${orientation}`]: true
+    [`--is-${effectiveOrientation}`]: true
   });
   const labelClasses = (0, import_dedupe39.default)(radioClasses, validationClasses);
   const errorMessageId = (0, import_react63.useId)();
@@ -3889,7 +3938,7 @@ var RadioGroup = (0, import_react63.forwardRef)((props, ref) => {
       "aria-invalid": isInvalid,
       "aria-label": props["aria-label"],
       "aria-labelledby": props["aria-labelledby"] || labelId,
-      "aria-orientation": orientation,
+      "aria-orientation": effectiveOrientation,
       "aria-readonly": isReadOnly,
       "aria-required": isRequired,
       ref,
@@ -3899,10 +3948,11 @@ var RadioGroup = (0, import_react63.forwardRef)((props, ref) => {
         label && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: radioWrapperClasses, children: import_react63.Children.map(children, (child) => {
           if ((0, import_react63.isValidElement)(child)) {
+            const childValue = child.props.value;
             return (0, import_react63.cloneElement)(
               child,
               {
-                orientation,
+                orientation: effectiveOrientation,
                 groupDisabled: isDisabled,
                 name: nameAttribute,
                 selected: selected || defaultSelected,
@@ -3910,7 +3960,8 @@ var RadioGroup = (0, import_react63.forwardRef)((props, ref) => {
                 setSelected,
                 isRequired,
                 "aria-describedby": describedBy,
-                onChange
+                onChange,
+                onOverflow: childValue ? (overflow) => handleOverflow(childValue, overflow) : void 0
               }
             );
           }

package/dist/esm/index.js

@@ -3639,7 +3639,14 @@ Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
 import classNames41 from "classnames/dedupe";
-import { Children as Children7, forwardRef as forwardRef38, isValidElement as isValidElement5, useMemo as useMemo3 } from "react";
+import {
+  Children as Children7,
+  forwardRef as forwardRef38,
+  isValidElement as isValidElement5,
+  useLayoutEffect,
+  useMemo as useMemo3,
+  useRef as useRef16
+} from "react";
 import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
 var Radio = forwardRef38(
   (props, ref) => {
@@ -3657,12 +3664,19 @@ var Radio = forwardRef38(
       selected,
       setSelected,
       isRequired,
+      onOverflow,
       ...otherProps
     } = props;
     const realDisabled = groupDisabled || isDisabled;
     const isMultiline = label && children;
     const isControlled = selected !== void 0;
     const isChecked = isControlled ? selected === value : defaultChecked;
+    const contentRef = useRef16(null);
+    const prevOverflowRef = useRef16({
+      vertical: false,
+      horizontal: false
+    });
+    const currentOrientation = otherProps.orientation;
     const hasIconFirst = useMemo3(() => {
       if (!children || Children7.count(children) === 0) return false;
       const firstChild = Children7.toArray(children)[0];
@@ -3670,6 +3684,29 @@ var Radio = forwardRef38(
       const props2 = firstChild.props;
       return "icon" in props2 && props2.icon !== void 0;
     }, [children]);
+    useLayoutEffect(() => {
+      if (!contentRef.current || !onOverflow) return;
+      if (currentOrientation === "vertical") {
+        return;
+      }
+      const element = contentRef.current;
+      const scrollOverflowVertical = element.scrollHeight > element.clientHeight;
+      const scrollOverflowHorizontal = element.scrollWidth > element.clientWidth;
+      const styles = window.getComputedStyle(element);
+      const lineHeight = parseFloat(styles.lineHeight);
+      const fontSize = parseFloat(styles.fontSize);
+      const singleLineHeight = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight;
+      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;
+      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,
@@ -3720,10 +3757,10 @@ var Radio = forwardRef38(
             ...rest
           }
         ),
-        isMultiline ? /* @__PURE__ */ jsxs24("div", { className: "mobius-radio__content--multiline", children: [
+        isMultiline ? /* @__PURE__ */ jsxs24("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
           /* @__PURE__ */ jsx50("div", { className: "mobius-radio__content-first-line", children: label }),
           /* @__PURE__ */ jsx50("div", { className: "mobius-radio__extra-content", children })
-        ] }) : /* @__PURE__ */ jsx50("div", { className: "mobius-radio__content", children: label || children })
+        ] }) : /* @__PURE__ */ jsx50("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
       ] }),
       errorMessage && /* @__PURE__ */ jsx50(ErrorMessage, { errorMessage })
     ] });
@@ -3738,8 +3775,10 @@ import {
   cloneElement as cloneElement10,
   forwardRef as forwardRef39,
   isValidElement as isValidElement6,
+  useCallback as useCallback6,
   useEffect as useEffect22,
   useId as useId10,
+  useRef as useRef17,
   useState as useState20
 } from "react";
 import { jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -3767,15 +3806,34 @@ var RadioGroup = forwardRef39((props, ref) => {
     isReadOnly,
     name,
     onChange,
+    autoStack = false,
     ...rest
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
   const [selected, setSelected] = useState20(defaultSelected);
+  const overflowsRef = useRef17({});
+  const [hasOverflow, setHasOverflow] = useState20(false);
   useEffect22(() => {
     if (value !== void 0) {
       setSelected(value);
     }
   }, [value]);
+  const handleOverflow = useCallback6(
+    (radioValue, overflow) => {
+      overflowsRef.current = {
+        ...overflowsRef.current,
+        [radioValue]: overflow
+      };
+      const anyOverflow = Object.values(overflowsRef.current).some(
+        (o) => o.vertical || o.horizontal
+      );
+      if (anyOverflow !== hasOverflow) {
+        setHasOverflow(anyOverflow);
+      }
+    },
+    [hasOverflow]
+  );
+  const effectiveOrientation = autoStack && orientation === "horizontal" && hasOverflow ? "vertical" : orientation;
   const validationClasses = useValidationClasses({
     validationState,
     isInvalid
@@ -3784,7 +3842,7 @@ var RadioGroup = forwardRef39((props, ref) => {
     "--is-disabled": isDisabled,
     "--is-required": typeof isRequired === "boolean" && isRequired,
     "--is-optional": typeof isRequired === "boolean" && !isRequired,
-    [`--is-${orientation}`]: true,
+    [`--is-${effectiveOrientation}`]: true,
     [className || ""]: true
   };
   const radioGroupClasses = classNames42(
@@ -3794,7 +3852,7 @@ var RadioGroup = forwardRef39((props, ref) => {
     validationClasses
   );
   const radioWrapperClasses = classNames42("mobius-radio__wrapper", {
-    [`--is-${orientation}`]: true
+    [`--is-${effectiveOrientation}`]: true
   });
   const labelClasses = classNames42(radioClasses, validationClasses);
   const errorMessageId = useId10();
@@ -3816,7 +3874,7 @@ var RadioGroup = forwardRef39((props, ref) => {
       "aria-invalid": isInvalid,
       "aria-label": props["aria-label"],
       "aria-labelledby": props["aria-labelledby"] || labelId,
-      "aria-orientation": orientation,
+      "aria-orientation": effectiveOrientation,
       "aria-readonly": isReadOnly,
       "aria-required": isRequired,
       ref,
@@ -3826,10 +3884,11 @@ var RadioGroup = forwardRef39((props, ref) => {
         label && /* @__PURE__ */ jsx51(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
         /* @__PURE__ */ jsx51("div", { className: radioWrapperClasses, children: Children8.map(children, (child) => {
           if (isValidElement6(child)) {
+            const childValue = child.props.value;
             return cloneElement10(
               child,
               {
-                orientation,
+                orientation: effectiveOrientation,
                 groupDisabled: isDisabled,
                 name: nameAttribute,
                 selected: selected || defaultSelected,
@@ -3837,7 +3896,8 @@ var RadioGroup = forwardRef39((props, ref) => {
                 setSelected,
                 isRequired,
                 "aria-describedby": describedBy,
-                onChange
+                onChange,
+                onOverflow: childValue ? (overflow) => handleOverflow(childValue, overflow) : void 0
               }
             );
           }
@@ -3971,10 +4031,10 @@ Select.displayName = "Select";
 
 // src/components/Slider/Slider.tsx
 import classNames46 from "classnames/dedupe";
-import { useRef as useRef16, useState as useState21 } from "react";
+import { useRef as useRef18, useState as useState21 } from "react";
 
 // src/components/Slider/helpers.ts
-import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo4 } from "react";
 function numberFormatter(value, formatOptions, locale = navigator.languages?.[0] || "en-GB") {
   if (!formatOptions) {
     return value?.toString() || "";
@@ -4004,7 +4064,7 @@ var Slider = (props) => {
     formatOptions,
     isDisabled = false
   } = props;
-  const trackRef = useRef16(null);
+  const trackRef = useRef18(null);
   const [currentValue, setCurrentValue] = useState21(
     value || defaultValue || 0
   );
@@ -4402,7 +4462,7 @@ Title.displayName = "Title";
 
 // src/components/Trust/Trust.tsx
 import classNames60 from "classnames/dedupe";
-import { forwardRef as forwardRef55, useEffect as useEffect24, useRef as useRef17, useState as useState23 } from "react";
+import { forwardRef as forwardRef55, useEffect as useEffect24, useRef as useRef19, useState as useState23 } from "react";
 
 // src/components/Trust/constants.ts
 var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
@@ -4479,7 +4539,7 @@ var Trust = forwardRef55((props, ref) => {
     className
   } = props;
   const [isMounted, setIsMounted] = useState23(false);
-  const trustRef = useRef17(null);
+  const trustRef = useRef19(null);
   const {
     templateId,
     className: variantClassName,
@@ -4539,7 +4599,7 @@ var Trust = forwardRef55((props, ref) => {
 
 // src/components/ExpandableText/ExpandableText.tsx
 import classNames61 from "classnames/dedupe";
-import { forwardRef as forwardRef56, useEffect as useEffect25, useId as useId12, useRef as useRef18, useState as useState24 } from "react";
+import { forwardRef as forwardRef56, useEffect as useEffect25, useId as useId12, useRef as useRef20, useState as useState24 } from "react";
 import { jsx as jsx71, jsxs as jsxs32 } from "react/jsx-runtime";
 var ExpandableText = forwardRef56((props, ref) => {
   const {
@@ -4556,7 +4616,7 @@ var ExpandableText = forwardRef56((props, ref) => {
   } = props;
   const [isExpanded, setIsExpanded] = useState24(false);
   const [isCollapsed, setIsCollapsed] = useState24(false);
-  const textRef = useRef18(null);
+  const textRef = useRef20(null);
   const { down } = useBreakpoint();
   const baseId = useId12();
   const expandButtonId = `expandable-text-expand-${baseId}`;
@@ -4624,11 +4684,11 @@ var ExpandableText = forwardRef56((props, ref) => {
 ExpandableText.displayName = "ExpandableText";
 
 // src/components/MaskedField/MaskedField.tsx
-import { forwardRef as forwardRef57, useCallback as useCallback7, useEffect as useEffect26 } from "react";
+import { forwardRef as forwardRef57, useCallback as useCallback8, useEffect as useEffect26 } from "react";
 import { useIMask } from "react-imask";
 import { jsx as jsx72 } from "react/jsx-runtime";
 var useAcceptHandler = (onChange, useMaskedValue, name) => {
-  return useCallback7(
+  return useCallback8(
     (maskedValue, maskInstance) => {
       if (!onChange) {
         return;
@@ -4644,7 +4704,7 @@ var useAcceptHandler = (onChange, useMaskedValue, name) => {
   );
 };
 var useCombinedRef = (imaskRef, forwardedRef) => {
-  return useCallback7(
+  return useCallback8(
     (element) => {
       imaskRef.current = element;
       if (typeof forwardedRef === "function") {
@@ -4657,7 +4717,7 @@ var useCombinedRef = (imaskRef, forwardedRef) => {
   );
 };
 var useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
-  return useCallback7(
+  return useCallback8(
     (event) => {
       if (!onBlur || !maskRef.current) {
         return;