@simplybusiness/mobius 10.3.1 → 10.3.3

package/package.json

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

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,7 +1,7 @@
 import { error } from "@simplybusiness/icons";
 import classNames from "classnames/dedupe";
-import { TextOrHTML } from "../..";
 import { Icon } from "../Icon";
+import { TextOrHTML } from "../TextOrHTML";
 import "./ErrorMessage.css";
 
 export interface ErrorMessageProps {

package/src/components/ExpandableText/ExpandableText.tsx

@@ -4,8 +4,10 @@ import classNames from "classnames/dedupe";
 import type React from "react";
 import type { RefAttributes } from "react";
 import { useEffect, useId, useRef, useState } from "react";
-import { Accordion, TextOrHTML, useBreakpoint } from "../..";
+import { useBreakpoint } from "../../hooks";
 import type { DOMProps } from "../../types";
+import { Accordion } from "../Accordion";
+import { TextOrHTML } from "../TextOrHTML";
 import type { AccordionProps } from "../Accordion/Accordion";
 import type { TextProps } from "../Text/Text";
 import "./ExpandableText.css";

package/src/components/PasswordField/ShowHideButton.tsx

@@ -1,5 +1,5 @@
 import { eye, eyeSlash } from "@simplybusiness/icons";
-import { Icon } from "../..";
+import { Icon } from "../Icon";
 
 export interface ShowHideButtonProps {
   show?: boolean;

package/src/components/TextOrHTML/TextOrHTML.test.tsx

@@ -183,6 +183,24 @@ describe("TextOrHTML", () => {
       expect(element).toHaveTextContent("This is bold text");
     });
 
+    it("decodes HTML entities in text that contains no HTML tags with autoDetect", () => {
+      const entities = [
+        { text: "before & after", expected: "before & after" },
+        { text: "before &lt; after", expected: "before < after" },
+        { text: "before &gt; after", expected: "before > after" },
+        { text: "before &#39; after", expected: "before ' after" },
+        { text: "before &quot; after", expected: 'before " after' },
+      ];
+
+      for (const { text, expected } of entities) {
+        const { unmount } = render(
+          <TextOrHTML text={text} autoDetect data-testid="test" />,
+        );
+        expect(screen.getByTestId("test")).toHaveTextContent(expected);
+        unmount();
+      }
+    });
+
     it("detects HTML with leading whitespace", () => {
       const { container } = render(
         <TextOrHTML text="  <div>Indented HTML</div>" autoDetect />,

package/src/components/TextOrHTML/TextOrHTML.tsx

@@ -7,7 +7,8 @@ import { Text, getElementType } from "../Text/Text";
 export type HTMLElementType = "span" | "div";
 
 const isBlockHTML = (text: string) => /^\s*<[a-z]/i.test(text);
-const containsHTML = (text: string) => /<[a-z/]/i.test(text);
+const containsHTML = (text: string) =>
+  /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text); // tag or entity
 
 const buildTextClasses = (
   textProps: Omit<TextProps, "children">,

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/TextOrHTML/TextOrHTML.tsx"],
-  "sourcesContent": ["import classNames from \"classnames/dedupe\";\nimport type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text, getElementType } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst isBlockHTML = (text: string) => /^\\s*<[a-z]/i.test(text);\nconst containsHTML = (text: string) => /<[a-z/]/i.test(text);\n\nconst buildTextClasses = (\n  textProps: Omit<TextProps, \"children\">,\n  htmlClassName?: string,\n) => {\n  const { variant, elementType, spacing, className } = textProps;\n  const variantType = variant || getElementType(variant, elementType);\n  return classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n    htmlClassName,\n  );\n};\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n  autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType,\n  textWrapper = false,\n  autoDetect = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const textIsBlockHTML = autoDetect && isBlockHTML(text);\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  // Non-block text with autoDetect: render directly on a Text-equivalent element,\n  // avoiding unnecessary <span> nesting inside <p>.\n  if (autoDetect && !textIsBlockHTML) {\n    const { variant, spacing, elementType, className, ...domProps } = textProps;\n    const Element = getElementType(variant, elementType);\n    const classes = buildTextClasses(textProps, htmlClassName);\n\n    return containsHTML(text) ? (\n      <Element\n        ref={ref}\n        {...domProps}\n        className={classes}\n        dangerouslySetInnerHTML={dangerousHTML}\n      />\n    ) : (\n      <Element ref={ref} {...domProps} className={classes}>\n        {text}\n      </Element>\n    );\n  }\n\n  const DangerousComponent =\n    htmlElementType ?? (textIsBlockHTML ? \"div\" : \"span\");\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (textWrapper) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n"],
-  "mappings": ";;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAS,eAAe;AA8DlB;AAxDN,IAAM,cAAc,CAAC,SAAiB,cAAc,KAAK,IAAI;AAC7D,IAAM,eAAe,CAAC,SAAiB,WAAW,KAAK,IAAI;AAE3D,IAAM,mBAAmB,CACvB,WACA,kBACG;AACH,QAAM,EAAE,SAAS,aAAa,SAAS,UAAU,IAAI;AACrD,QAAM,cAAc,WAAW,eAAe,SAAS,WAAW;AAClE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,IACA;AAAA,EACF;AACF;AAgBA,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,MAAuB;AACrB,QAAM,kBAAkB,cAAc,YAAY,IAAI;AAItD,QAAM,gBAAgB,QAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAI9D,MAAI,cAAc,CAAC,iBAAiB;AAClC,UAAM,EAAE,SAAS,SAAS,aAAa,WAAW,GAAG,SAAS,IAAI;AAClE,UAAM,UAAU,eAAe,SAAS,WAAW;AACnD,UAAM,UAAU,iBAAiB,WAAW,aAAa;AAEzD,WAAO,aAAa,IAAI,IACtB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,yBAAyB;AAAA;AAAA,IAC3B,IAEA,oBAAC,WAAQ,KAAW,GAAG,UAAU,WAAW,SACzC,gBACH;AAAA,EAEJ;AAEA,QAAM,qBACJ,oBAAoB,kBAAkB,QAAQ;AAChD,QAAM,mBACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,yBAAyB;AAAA;AAAA,EAC3B;AAGF,MAAI,aAAa;AACf,WACE,oBAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
-  "names": []
-}