@simplybusiness/mobius 10.4.0 → 10.4.1

package/package.json

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

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

@@ -128,14 +128,14 @@ describe("TextOrHTML", () => {
   });
 
   describe("autoDetect prop", () => {
-    it("detects HTML content and renders as a div without Text wrapper", () => {
+    it("detects inline HTML content and renders in a Text-equivalent element", () => {
       const { container } = render(
         <TextOrHTML text="<strong>Bold text</strong>" autoDetect />,
       );
-      expect(container.firstChild?.nodeName).toBe("DIV");
-      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-      const div = container.querySelector("div");
-      expect(div?.innerHTML).toBe("<strong>Bold text</strong>");
+      expect(container.firstChild?.nodeName).toBe("P");
+      expect((container.firstChild as HTMLElement)?.innerHTML).toBe(
+        "<strong>Bold text</strong>",
+      );
     });
 
     it("detects plain text and renders directly in a Text component without nested span", () => {
@@ -225,7 +225,7 @@ describe("TextOrHTML", () => {
       const { container } = render(
         <TextOrHTML
           htmlElementType="span"
-          text="<strong>HTML</strong>"
+          text="<div>Block HTML</div>"
           autoDetect
         />,
       );
@@ -235,7 +235,7 @@ describe("TextOrHTML", () => {
     it("wraps HTML in Text when both autoDetect and textWrapper are true", () => {
       render(
         <TextOrHTML
-          text="<strong>Bold</strong>"
+          text="<div>Block</div>"
           htmlElementType="span"
           autoDetect
           textWrapper
@@ -246,7 +246,7 @@ describe("TextOrHTML", () => {
       expect(element).toHaveClass(CLASS_NAME);
       // eslint-disable-next-line testing-library/no-node-access
       const span = element.querySelector("span");
-      expect(span?.innerHTML).toBe("<strong>Bold</strong>");
+      expect(span?.innerHTML).toBe("<div>Block</div>");
     });
 
     it("passes className to Text wrapper when autoDetect wraps plain text", () => {
@@ -271,6 +271,43 @@ describe("TextOrHTML", () => {
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
       expect(container.querySelector(`.${CLASS_NAME}`)).toBeNull();
     });
+
+    it("detects block-level tags appearing after leading prose", () => {
+      const { container } = render(
+        <TextOrHTML
+          text="Estimate the total: <ul><li>Item one</li><li>Item two</li></ul>"
+          autoDetect
+        />,
+      );
+      expect(container.firstChild?.nodeName).toBe("DIV");
+    });
+
+    it("detects block-level tags appearing after leading prose with <br>", () => {
+      const { container } = render(
+        <TextOrHTML
+          text="Estimate the total amount: <br> <ul> <li> Yourself </li> </ul>"
+          autoDetect
+        />,
+      );
+      expect(container.firstChild?.nodeName).toBe("DIV");
+    });
+
+    it("treats text with only <br> as inline, not block", () => {
+      const { container } = render(
+        <TextOrHTML text="Line one <br> Line two" autoDetect />,
+      );
+      expect(container.firstChild?.nodeName).toBe("P");
+    });
+
+    it("treats text with only inline tags as inline", () => {
+      const { container } = render(
+        <TextOrHTML
+          text="This has <em>emphasis</em> and <strong>bold</strong>"
+          autoDetect
+        />,
+      );
+      expect(container.firstChild?.nodeName).toBe("P");
+    });
   });
 
   // See: https://github.com/facebook/react/issues/31660

package/src/components/TextOrHTML/TextOrHTML.tsx

@@ -6,7 +6,10 @@ import { Text, getElementType } from "../Text/Text";
 
 export type HTMLElementType = "span" | "div";
 
-const isBlockHTML = (text: string) => /^\s*<[a-z]/i.test(text);
+// Block-level tags that cannot be nested inside <p>.
+const BLOCK_TAG =
+  /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\s>/]/i;
+const containsBlockHTML = (text: string) => BLOCK_TAG.test(text);
 const containsHTML = (text: string) =>
   /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text); // tag or entity
 
@@ -49,7 +52,7 @@ const TextOrHTML = ({
   autoDetect = false,
   ...textProps
 }: TextOrHTMLProps) => {
-  const textIsBlockHTML = autoDetect && isBlockHTML(text);
+  const hasBlockContent = autoDetect && containsBlockHTML(text);
 
   // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders
   // See: https://github.com/facebook/react/issues/31660
@@ -57,7 +60,7 @@ const TextOrHTML = ({
 
   // Non-block text with autoDetect: render directly on a Text-equivalent element,
   // avoiding unnecessary <span> nesting inside <p>.
-  if (autoDetect && !textIsBlockHTML) {
+  if (autoDetect && !hasBlockContent) {
     const { variant, spacing, elementType, className, ...domProps } = textProps;
     const Element = getElementType(variant, elementType);
     const classes = buildTextClasses(textProps, htmlClassName);
@@ -77,7 +80,7 @@ const TextOrHTML = ({
   }
 
   const DangerousComponent =
-    htmlElementType ?? (textIsBlockHTML ? "div" : "span");
+    htmlElementType ?? (hasBlockContent ? "div" : "span");
   const dangerousElement = (
     <DangerousComponent
       className={htmlClassName}

package/dist/esm/chunk-DYTHXKMX.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) =>\n  /<[a-z/]/i.test(text) || /&(?:#\\d+|#x[\\da-f]+|[a-z]\\w*);/i.test(text); // tag or entity\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;AA+DlB;AAzDN,IAAM,cAAc,CAAC,SAAiB,cAAc,KAAK,IAAI;AAC7D,IAAM,eAAe,CAAC,SACpB,WAAW,KAAK,IAAI,KAAK,kCAAkC,KAAK,IAAI;AAEtE,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": []
-}