@simplybusiness/mobius 6.3.2 → 6.3.3

package/dist/esm/index.js

@@ -4423,7 +4423,7 @@ var ExpandableText = forwardRef55((props, ref) => {
     setIsCollapsed(isOverflowing);
   }, [text, shouldCollapse, maxLines]);
   if (breakpoint && !shouldCollapse) {
-    return /* @__PURE__ */ jsx70("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx70(Text, { ...textProps, children: text }) });
+    return /* @__PURE__ */ jsx70("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx70(Text, { ...textProps, children: /* @__PURE__ */ jsx70("span", { dangerouslySetInnerHTML: { __html: text } }) }) });
   }
   const handleAccordionChange = (expanded) => {
     setIsExpanded(expanded);
@@ -4452,7 +4452,7 @@ var ExpandableText = forwardRef55((props, ref) => {
             style: textContainerStyle,
             "data-testid": "expandable-text-content",
             "aria-describedby": isCollapsed ? expandButtonId : void 0,
-            children: /* @__PURE__ */ jsx70(Text, { elementType: "span", ...textProps, children: text })
+            children: /* @__PURE__ */ jsx70(Text, { elementType: "span", ...textProps, children: /* @__PURE__ */ jsx70("span", { dangerouslySetInnerHTML: { __html: text } }) })
           }
         ),
         isCollapsed && /* @__PURE__ */ jsx70(
@@ -4476,7 +4476,7 @@ var ExpandableText = forwardRef55((props, ref) => {
 ExpandableText.displayName = "ExpandableText";
 
 // src/components/MaskedField/MaskedField.tsx
-import { forwardRef as forwardRef56 } from "react";
+import { forwardRef as forwardRef56, useEffect as useEffect26 } from "react";
 import { useIMask } from "react-imask";
 import { jsx as jsx71 } from "react/jsx-runtime";
 var createSyntheticEvent = (options) => {
@@ -4511,10 +4511,17 @@ var MaskedField = forwardRef56((props, ref) => {
   const {
     ref: maskRef,
     value: maskedValue,
-    unmaskedValue
+    unmaskedValue,
+    setValue
   } = useIMask(mask, {
-    defaultValue
+    defaultValue: value || defaultValue
   });
+  useEffect26(() => {
+    const valueToCompare = useMaskedValue ? maskedValue : unmaskedValue;
+    if (value !== void 0 && value !== valueToCompare) {
+      setValue(value);
+    }
+  }, [value, setValue]);
   const handleChange = (event) => {
     if (onChange) {
       onChange(

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

@@ -33,6 +33,9 @@ export type LoqateAddressDetailsItem = {
     Line2: string;
     PostalCode: string;
     Label: string;
+    SubBuilding?: string;
+    BuildingNumber?: string;
+    Street?: string;
 };
 export type LoqateAddressDetailsResponse = {
     Items: LoqateAddressDetailsItem[];

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

@@ -5,7 +5,7 @@ import type { AccordionProps } from "../Accordion/Accordion";
 export type ExpandableTextElementType = HTMLDivElement;
 export type ExpandableTextRef = React.Ref<ExpandableTextElementType>;
 export interface ExpandableTextProps extends DOMProps {
-    /** The text content to display */
+    /** The text content to display (can be plain text or HTML) */
     text: string;
     /** Maximum number of lines to show when collapsed */
     maxLines?: number;

package/package.json

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

package/src/components/AddressLookup/types.tsx

@@ -39,6 +39,10 @@ export type LoqateAddressDetailsItem = {
   Line2: string;
   PostalCode: string;
   Label: string;
+  // US only fields
+  SubBuilding?: string;
+  BuildingNumber?: string;
+  Street?: string;
 };
 
 export type LoqateAddressDetailsResponse = {

package/src/components/ExpandableText/ExpandableText.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { ExpandableText } from "./ExpandableText";
 
@@ -184,9 +184,15 @@ describe("ExpandableText", () => {
       />,
     );
 
-    const textElement = screen.getByText(longText);
-    expect(textElement).toBeInTheDocument();
-    expect(textElement).toHaveClass("custom-text-class");
+    // Verify the text is rendered within an element that has all the custom classes
+    const content = screen.getByTestId("expandable-text-content");
+
+    // The Text component with custom classes should be within the content
+    const textWithCustomClass = within(content).getByText(longText, {
+      selector: ".mobius-text.custom-text-class.--is-small *",
+    });
+
+    expect(textWithCustomClass).toBeInTheDocument();
   });
 
   it("passes accordionProps to Accordion component", async () => {

package/src/components/ExpandableText/ExpandableText.tsx

@@ -12,7 +12,7 @@ export type ExpandableTextElementType = HTMLDivElement;
 export type ExpandableTextRef = React.Ref<ExpandableTextElementType>;
 
 export interface ExpandableTextProps extends DOMProps {
-  /** The text content to display */
+  /** The text content to display (can be plain text or HTML) */
   text: string;
   /** Maximum number of lines to show when collapsed */
   maxLines?: number;
@@ -77,7 +77,9 @@ export const ExpandableText: ForwardedRefComponent<
   if (breakpoint && !shouldCollapse) {
     return (
       <div ref={ref} className={className} {...otherProps}>
-        <Text {...textProps}>{text}</Text>
+        <Text {...textProps}>
+          <span dangerouslySetInnerHTML={{ __html: text }} />
+        </Text>
       </div>
     );
   }
@@ -112,7 +114,7 @@ export const ExpandableText: ForwardedRefComponent<
         aria-describedby={isCollapsed ? expandButtonId : undefined}
       >
         <Text elementType="span" {...textProps}>
-          {text}
+          <span dangerouslySetInnerHTML={{ __html: text }} />
         </Text>
       </div>
       {isCollapsed && (

package/src/components/MaskedField/MaskedField.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MaskedField } from ".";
+import type { ReactMaskOpts } from "react-imask";
 
 const commaSeparatedNumberMask = {
   mask: Number,
@@ -17,6 +18,30 @@ const usPhoneNumberMask = {
 const WRAPPER_CLASS_NAME = "mobius-text-field";
 const INPUT_CLASS_NAME = "mobius-text-field__input";
 
+// Helper component for controlled component tests
+const TestComponent = ({
+  value,
+  mask = usPhoneNumberMask,
+  useMaskedValue,
+  label = "Phone Number",
+  ...props
+}: {
+  value: string;
+  mask?: ReactMaskOpts;
+  useMaskedValue?: boolean;
+  label?: string;
+  [key: string]: unknown;
+}) => (
+  <MaskedField
+    mask={mask}
+    label={label}
+    data-testid="masked-field"
+    value={value}
+    useMaskedValue={useMaskedValue}
+    {...props}
+  />
+);
+
 describe("MaskedField", () => {
   it("should render without errors", () => {
     render(
@@ -390,6 +415,126 @@ describe("MaskedField", () => {
       const input = screen.getByTestId("masked-field");
       expect(input).toHaveValue("(123) 456-7890");
     });
+
+    it("should update when value prop changes (controlled behavior)", () => {
+      const { rerender } = render(<TestComponent value="1234567890" />);
+
+      const input = screen.getByTestId("masked-field");
+      expect(input).toHaveValue("(123) 456-7890");
+
+      // Change the value prop to simulate server-side update
+      rerender(<TestComponent value="9876543210" />);
+
+      // The input should reflect the new value
+      expect(input).toHaveValue("(987) 654-3210");
+    });
+
+    it("should handle masked value input when useMaskedValue is true", () => {
+      const { rerender } = render(
+        <TestComponent value="(123) 456-7890" useMaskedValue={true} />,
+      );
+
+      const input = screen.getByTestId("masked-field");
+      expect(input).toHaveValue("(123) 456-7890");
+
+      // Change to a different masked value
+      rerender(<TestComponent value="(987) 654-3210" />);
+
+      // The input should reflect the new masked value
+      expect(input).toHaveValue("(987) 654-3210");
+    });
+
+    it("should handle unmasked value input when useMaskedValue is false", () => {
+      const { rerender } = render(
+        <TestComponent value="1234567890" useMaskedValue={false} />,
+      );
+
+      const input = screen.getByTestId("masked-field");
+      expect(input).toHaveValue("(123) 456-7890");
+
+      // Change to a different unmasked value
+      rerender(<TestComponent value="9876543210" />);
+
+      // The input should reflect the new value (displayed as masked)
+      expect(input).toHaveValue("(987) 654-3210");
+    });
+
+    it("should not update when value prop matches current internal state", () => {
+      const setValue = jest.fn();
+
+      // Mock useIMask to spy on setValue calls
+      const originalUseIMask = jest.requireActual("react-imask").useIMask;
+      const reactIMask = jest.requireActual("react-imask");
+      jest.spyOn(reactIMask, "useIMask").mockImplementation((mask, options) => {
+        const result = originalUseIMask(mask, options);
+        return {
+          ...result,
+          setValue: setValue,
+        };
+      });
+
+      const { rerender } = render(<TestComponent value="1234567890" />);
+
+      // Clear any initial setValue calls
+      setValue.mockClear();
+
+      // Re-render with the same value
+      rerender(<TestComponent value="1234567890" />);
+
+      // setValue should not be called since the value hasn't actually changed
+      expect(setValue).not.toHaveBeenCalled();
+
+      // Restore original implementation
+      jest.restoreAllMocks();
+    });
+
+    it("should handle partial phone number updates", () => {
+      const { rerender } = render(<TestComponent value="123" />);
+
+      const input = screen.getByTestId("masked-field");
+      expect(input).toHaveValue("(123");
+
+      // Update to a longer partial number
+      rerender(<TestComponent value="12345" />);
+
+      expect(input).toHaveValue("(123) 45");
+    });
+
+    it("should handle empty value updates", () => {
+      const { rerender } = render(<TestComponent value="1234567890" />);
+
+      const input = screen.getByTestId("masked-field");
+      expect(input).toHaveValue("(123) 456-7890");
+
+      // Clear the value
+      rerender(<TestComponent value="" />);
+
+      expect(input).toHaveValue("");
+    });
+
+    it("should work with number masks and controlled values", () => {
+      const { rerender } = render(
+        <TestComponent
+          value="1234567"
+          mask={commaSeparatedNumberMask}
+          label="Number"
+        />,
+      );
+
+      const input = screen.getByTestId("masked-field");
+      expect(input).toHaveValue("1,234,567");
+
+      // Update to different number
+      rerender(
+        <TestComponent
+          value="9876543"
+          mask={commaSeparatedNumberMask}
+          label="Number"
+        />,
+      );
+
+      expect(input).toHaveValue("9,876,543");
+    });
   });
 
   describe("accessibility", () => {

package/src/components/MaskedField/MaskedField.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { Ref, RefAttributes } from "react";
-import { forwardRef } from "react";
+import { forwardRef, useEffect } from "react";
 import type { ReactMaskOpts } from "react-imask";
 import { useIMask } from "react-imask";
 import type { DOMProps } from "../../types/dom";
@@ -72,10 +72,19 @@ export const MaskedField: ForwardedRefComponent<
     ref: maskRef,
     value: maskedValue,
     unmaskedValue,
+    setValue,
   } = useIMask(mask, {
-    defaultValue,
+    defaultValue: value || defaultValue,
   });
 
+  // Handle controlled behavior - sync external value changes with internal mask state
+  useEffect(() => {
+    const valueToCompare = useMaskedValue ? maskedValue : unmaskedValue;
+    if (value !== undefined && value !== valueToCompare) {
+      setValue(value);
+    }
+  }, [value, setValue]);
+
   // Enhanced onChange handler that provides the unmasked value
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (onChange) {