@simplybusiness/mobius 10.3.0 → 10.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/components/AddressLookup/AddressLookup.js +224 -198
- package/dist/cjs/components/AddressLookup/AddressLookup.js.map +3 -3
- package/dist/cjs/components/AddressLookup/index.js +224 -198
- package/dist/cjs/components/AddressLookup/index.js.map +3 -3
- package/dist/cjs/components/Alert/Alert.js +37 -11
- package/dist/cjs/components/Alert/Alert.js.map +3 -3
- package/dist/cjs/components/Alert/index.js +37 -11
- package/dist/cjs/components/Alert/index.js.map +3 -3
- package/dist/cjs/components/Checkbox/Checkbox.js +199 -173
- package/dist/cjs/components/Checkbox/Checkbox.js.map +3 -3
- package/dist/cjs/components/Checkbox/CheckboxGroup.js +199 -173
- package/dist/cjs/components/Checkbox/CheckboxGroup.js.map +3 -3
- package/dist/cjs/components/Checkbox/index.js +199 -173
- package/dist/cjs/components/Checkbox/index.js.map +3 -3
- package/dist/cjs/components/Combobox/Combobox.js +224 -198
- package/dist/cjs/components/Combobox/Combobox.js.map +3 -3
- package/dist/cjs/components/Combobox/index.js +224 -198
- package/dist/cjs/components/Combobox/index.js.map +3 -3
- package/dist/cjs/components/DateField/DateField.js +215 -189
- package/dist/cjs/components/DateField/DateField.js.map +3 -3
- package/dist/cjs/components/DateField/index.js +215 -189
- package/dist/cjs/components/DateField/index.js.map +3 -3
- package/dist/cjs/components/ErrorMessage/ErrorMessage.js +199 -173
- package/dist/cjs/components/ErrorMessage/ErrorMessage.js.map +3 -3
- package/dist/cjs/components/ErrorMessage/index.js +199 -173
- package/dist/cjs/components/ErrorMessage/index.js.map +3 -3
- package/dist/cjs/components/ExpandableText/ExpandableText.js +196 -170
- package/dist/cjs/components/ExpandableText/ExpandableText.js.map +3 -3
- package/dist/cjs/components/ExpandableText/index.js +196 -170
- package/dist/cjs/components/ExpandableText/index.js.map +3 -3
- package/dist/cjs/components/MaskedField/MaskedField.js +215 -189
- package/dist/cjs/components/MaskedField/MaskedField.js.map +3 -3
- package/dist/cjs/components/MaskedField/index.js +215 -189
- package/dist/cjs/components/MaskedField/index.js.map +3 -3
- package/dist/cjs/components/NumberField/NumberField.js +215 -189
- package/dist/cjs/components/NumberField/NumberField.js.map +3 -3
- package/dist/cjs/components/NumberField/index.js +215 -189
- package/dist/cjs/components/NumberField/index.js.map +3 -3
- package/dist/cjs/components/PasswordField/PasswordField.js +215 -189
- package/dist/cjs/components/PasswordField/PasswordField.js.map +3 -3
- package/dist/cjs/components/PasswordField/ShowHideButton.js +196 -170
- package/dist/cjs/components/PasswordField/ShowHideButton.js.map +3 -3
- package/dist/cjs/components/PasswordField/index.js +215 -189
- package/dist/cjs/components/PasswordField/index.js.map +3 -3
- package/dist/cjs/components/Radio/Radio.js +199 -173
- package/dist/cjs/components/Radio/Radio.js.map +3 -3
- package/dist/cjs/components/Radio/RadioGroup.js +199 -173
- package/dist/cjs/components/Radio/RadioGroup.js.map +3 -3
- package/dist/cjs/components/Radio/index.js +199 -173
- package/dist/cjs/components/Radio/index.js.map +3 -3
- package/dist/cjs/components/Select/Select.js +199 -173
- package/dist/cjs/components/Select/Select.js.map +3 -3
- package/dist/cjs/components/Select/index.js +199 -173
- package/dist/cjs/components/Select/index.js.map +3 -3
- package/dist/cjs/components/Text/Text.js +2 -1
- package/dist/cjs/components/Text/Text.js.map +2 -2
- package/dist/cjs/components/Text/index.js +2 -1
- package/dist/cjs/components/Text/index.js.map +2 -2
- package/dist/cjs/components/TextArea/TextArea.js +199 -173
- package/dist/cjs/components/TextArea/TextArea.js.map +3 -3
- package/dist/cjs/components/TextArea/index.js +199 -173
- package/dist/cjs/components/TextArea/index.js.map +3 -3
- package/dist/cjs/components/TextField/TextField.js +215 -189
- package/dist/cjs/components/TextField/TextField.js.map +3 -3
- package/dist/cjs/components/TextField/index.js +215 -189
- package/dist/cjs/components/TextField/index.js.map +3 -3
- package/dist/cjs/components/TextOrHTML/TextOrHTML.js +32 -6
- package/dist/cjs/components/TextOrHTML/TextOrHTML.js.map +3 -3
- package/dist/cjs/components/TextOrHTML/index.js +32 -6
- package/dist/cjs/components/TextOrHTML/index.js.map +3 -3
- package/dist/cjs/components/index.js +205 -178
- package/dist/cjs/components/index.js.map +3 -3
- package/dist/cjs/index.js +205 -178
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/meta.json +299 -119
- package/dist/esm/{chunk-ZS5MFZHD.js → chunk-A66R42LG.js} +2 -1
- package/dist/esm/{chunk-ZS5MFZHD.js.map → chunk-A66R42LG.js.map} +2 -2
- package/dist/esm/chunk-DYTHXKMX.js +67 -0
- package/dist/esm/chunk-DYTHXKMX.js.map +7 -0
- package/dist/esm/{chunk-QWD72EVP.js → chunk-JNAQ76CR.js} +2 -2
- package/dist/esm/{chunk-I6EUIFUJ.js → chunk-W2RQH4WS.js} +2 -2
- package/dist/esm/components/AddressLookup/AddressLookup.js +4 -4
- package/dist/esm/components/AddressLookup/index.js +4 -4
- package/dist/esm/components/Alert/Alert.js +3 -3
- package/dist/esm/components/Alert/index.js +3 -3
- package/dist/esm/components/Checkbox/Checkbox.js +4 -4
- package/dist/esm/components/Checkbox/CheckboxGroup.js +4 -4
- package/dist/esm/components/Checkbox/index.js +4 -4
- package/dist/esm/components/Combobox/Combobox.js +4 -4
- package/dist/esm/components/Combobox/index.js +4 -4
- package/dist/esm/components/DateField/DateField.js +4 -4
- package/dist/esm/components/DateField/index.js +4 -4
- package/dist/esm/components/ErrorMessage/ErrorMessage.js +4 -4
- package/dist/esm/components/ErrorMessage/index.js +4 -4
- package/dist/esm/components/ExpandableText/ExpandableText.js +4 -4
- package/dist/esm/components/ExpandableText/index.js +4 -4
- package/dist/esm/components/MaskedField/MaskedField.js +4 -4
- package/dist/esm/components/MaskedField/index.js +4 -4
- package/dist/esm/components/NumberField/NumberField.js +4 -4
- package/dist/esm/components/NumberField/index.js +4 -4
- package/dist/esm/components/PasswordField/PasswordField.js +4 -4
- package/dist/esm/components/PasswordField/ShowHideButton.js +4 -4
- package/dist/esm/components/PasswordField/index.js +4 -4
- package/dist/esm/components/Radio/Radio.js +4 -4
- package/dist/esm/components/Radio/RadioGroup.js +4 -4
- package/dist/esm/components/Radio/index.js +4 -4
- package/dist/esm/components/Select/Select.js +4 -4
- package/dist/esm/components/Select/index.js +4 -4
- package/dist/esm/components/Text/Text.js +5 -3
- package/dist/esm/components/Text/index.js +5 -3
- package/dist/esm/components/TextArea/TextArea.js +4 -4
- package/dist/esm/components/TextArea/index.js +4 -4
- package/dist/esm/components/TextField/TextField.js +4 -4
- package/dist/esm/components/TextField/index.js +4 -4
- package/dist/esm/components/TextOrHTML/TextOrHTML.js +2 -2
- package/dist/esm/components/TextOrHTML/index.js +2 -2
- package/dist/esm/components/index.js +7 -5
- package/dist/esm/index.js +7 -5
- package/dist/esm/meta.json +176 -161
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Text/Text.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/Table/Table.test.tsx +2 -5
- package/src/components/Text/Text.test.tsx +3 -4
- package/src/components/Text/Text.tsx +1 -1
- package/src/components/TextOrHTML/TextOrHTML.test.tsx +54 -3
- package/src/components/TextOrHTML/TextOrHTML.tsx +46 -9
- package/dist/esm/chunk-VIDKIVA6.js +0 -40
- package/dist/esm/chunk-VIDKIVA6.js.map +0 -7
- /package/dist/esm/{chunk-QWD72EVP.js.map → chunk-JNAQ76CR.js.map} +0 -0
- /package/dist/esm/{chunk-I6EUIFUJ.js.map → chunk-W2RQH4WS.js.map} +0 -0
|
@@ -33,6 +33,7 @@ __export(TextOrHTML_exports, {
|
|
|
33
33
|
TextOrHTML: () => TextOrHTML
|
|
34
34
|
});
|
|
35
35
|
module.exports = __toCommonJS(TextOrHTML_exports);
|
|
36
|
+
var import_dedupe2 = __toESM(require("classnames/dedupe"));
|
|
36
37
|
var import_react = require("react");
|
|
37
38
|
|
|
38
39
|
// src/components/Text/Text.tsx
|
|
@@ -65,7 +66,20 @@ Text.displayName = "Text";
|
|
|
65
66
|
|
|
66
67
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
67
68
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
68
|
-
var
|
|
69
|
+
var isBlockHTML = (text) => /^\s*<[a-z]/i.test(text);
|
|
70
|
+
var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
|
|
71
|
+
var buildTextClasses = (textProps, htmlClassName) => {
|
|
72
|
+
const { variant, elementType, spacing, className } = textProps;
|
|
73
|
+
const variantType = variant || getElementType(variant, elementType);
|
|
74
|
+
return (0, import_dedupe2.default)(
|
|
75
|
+
"mobius",
|
|
76
|
+
"mobius-text",
|
|
77
|
+
{ [`--is-${variantType}`]: variantType },
|
|
78
|
+
{ [`--has-line-height-${spacing}`]: spacing },
|
|
79
|
+
className,
|
|
80
|
+
htmlClassName
|
|
81
|
+
);
|
|
82
|
+
};
|
|
69
83
|
var TextOrHTML = ({
|
|
70
84
|
ref,
|
|
71
85
|
text,
|
|
@@ -75,11 +89,23 @@ var TextOrHTML = ({
|
|
|
75
89
|
autoDetect = false,
|
|
76
90
|
...textProps
|
|
77
91
|
}) => {
|
|
78
|
-
const
|
|
79
|
-
const shouldWrapInText = autoDetect ? textWrapper || !textIsHTML : textWrapper;
|
|
80
|
-
const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
|
|
81
|
-
const DangerousComponent = resolvedElementType;
|
|
92
|
+
const textIsBlockHTML = autoDetect && isBlockHTML(text);
|
|
82
93
|
const dangerousHTML = (0, import_react.useMemo)(() => ({ __html: text }), [text]);
|
|
94
|
+
if (autoDetect && !textIsBlockHTML) {
|
|
95
|
+
const { variant, spacing, elementType, className, ...domProps } = textProps;
|
|
96
|
+
const Element = getElementType(variant, elementType);
|
|
97
|
+
const classes = buildTextClasses(textProps, htmlClassName);
|
|
98
|
+
return containsHTML(text) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
99
|
+
Element,
|
|
100
|
+
{
|
|
101
|
+
ref,
|
|
102
|
+
...domProps,
|
|
103
|
+
className: classes,
|
|
104
|
+
dangerouslySetInnerHTML: dangerousHTML
|
|
105
|
+
}
|
|
106
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Element, { ref, ...domProps, className: classes, children: text });
|
|
107
|
+
}
|
|
108
|
+
const DangerousComponent = htmlElementType ?? (textIsBlockHTML ? "div" : "span");
|
|
83
109
|
const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
84
110
|
DangerousComponent,
|
|
85
111
|
{
|
|
@@ -87,7 +113,7 @@ var TextOrHTML = ({
|
|
|
87
113
|
dangerouslySetInnerHTML: dangerousHTML
|
|
88
114
|
}
|
|
89
115
|
);
|
|
90
|
-
if (
|
|
116
|
+
if (textWrapper) {
|
|
91
117
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { ref, ...textProps, children: dangerousElement });
|
|
92
118
|
}
|
|
93
119
|
return dangerousElement;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["classNames", "import_jsx_runtime"]
|
|
4
|
+
"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", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"body\"\n | \"small\"\n | \"legal\"\n | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n /** HTML element for the text */\n elementType?: ElementType;\n /** Specify font size override */\n variant?: TextVariantType;\n /** Specify compact line height override */\n spacing?: \"loose\" | \"tight\";\n /** Custom class name for setting specific CSS */\n className?: string;\n children: ReactNode;\n style?: React.CSSProperties;\n}\n\nexport const getElementType = (\n variant: TextVariantType | undefined,\n elementType: ElementType | undefined,\n): ElementType => {\n // Explicit elementType always wins\n if (elementType) {\n return elementType;\n }\n // Infer element from variant\n if (variant && [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant)) {\n return variant as ElementType;\n }\n return \"p\";\n};\n\nconst Text = ({ ref, elementType, ...props }: TextProps) => {\n // Remove non-DOM props from element\n const { variant, className, spacing, ...otherProps } = props;\n\n // If a variant is supplied, set the class name and element type\n const Element: ElementType = getElementType(variant, elementType);\n const variantType = variant || Element;\n const classes = classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,iBAAuB;AAEvB,mBAAwB;;;ACDxB,oBAAuB;AAEvB,kBAAO;AAwDE;AA9BF,IAAM,iBAAiB,CAC5B,SACA,gBACgB;AAEhB,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,CAAC,MAAM,MAAM,MAAM,IAAI,EAAE,SAAS,OAAO,GAAG;AACzD,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,IAAM,OAAO,CAAC,EAAE,KAAK,aAAa,GAAG,MAAM,MAAiB;AAE1D,QAAM,EAAE,SAAS,WAAW,SAAS,GAAG,WAAW,IAAI;AAGvD,QAAM,UAAuB,eAAe,SAAS,WAAW;AAChE,QAAM,cAAc,WAAW;AAC/B,QAAM,cAAU,cAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,4CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,KAAK,cAAc;;;ADGb,IAAAC,sBAAA;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,aAAO,eAAAC;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,oBAAgB,sBAAQ,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,6CAAC,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,6CAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
|
|
6
|
+
"names": ["import_dedupe", "classNames", "import_jsx_runtime", "classNames"]
|
|
7
7
|
}
|
|
@@ -35,6 +35,7 @@ __export(TextOrHTML_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(TextOrHTML_exports);
|
|
36
36
|
|
|
37
37
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
38
|
+
var import_dedupe2 = __toESM(require("classnames/dedupe"));
|
|
38
39
|
var import_react = require("react");
|
|
39
40
|
|
|
40
41
|
// src/components/Text/Text.tsx
|
|
@@ -67,7 +68,20 @@ Text.displayName = "Text";
|
|
|
67
68
|
|
|
68
69
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
69
70
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
70
|
-
var
|
|
71
|
+
var isBlockHTML = (text) => /^\s*<[a-z]/i.test(text);
|
|
72
|
+
var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
|
|
73
|
+
var buildTextClasses = (textProps, htmlClassName) => {
|
|
74
|
+
const { variant, elementType, spacing, className } = textProps;
|
|
75
|
+
const variantType = variant || getElementType(variant, elementType);
|
|
76
|
+
return (0, import_dedupe2.default)(
|
|
77
|
+
"mobius",
|
|
78
|
+
"mobius-text",
|
|
79
|
+
{ [`--is-${variantType}`]: variantType },
|
|
80
|
+
{ [`--has-line-height-${spacing}`]: spacing },
|
|
81
|
+
className,
|
|
82
|
+
htmlClassName
|
|
83
|
+
);
|
|
84
|
+
};
|
|
71
85
|
var TextOrHTML = ({
|
|
72
86
|
ref,
|
|
73
87
|
text,
|
|
@@ -77,11 +91,23 @@ var TextOrHTML = ({
|
|
|
77
91
|
autoDetect = false,
|
|
78
92
|
...textProps
|
|
79
93
|
}) => {
|
|
80
|
-
const
|
|
81
|
-
const shouldWrapInText = autoDetect ? textWrapper || !textIsHTML : textWrapper;
|
|
82
|
-
const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
|
|
83
|
-
const DangerousComponent = resolvedElementType;
|
|
94
|
+
const textIsBlockHTML = autoDetect && isBlockHTML(text);
|
|
84
95
|
const dangerousHTML = (0, import_react.useMemo)(() => ({ __html: text }), [text]);
|
|
96
|
+
if (autoDetect && !textIsBlockHTML) {
|
|
97
|
+
const { variant, spacing, elementType, className, ...domProps } = textProps;
|
|
98
|
+
const Element = getElementType(variant, elementType);
|
|
99
|
+
const classes = buildTextClasses(textProps, htmlClassName);
|
|
100
|
+
return containsHTML(text) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
101
|
+
Element,
|
|
102
|
+
{
|
|
103
|
+
ref,
|
|
104
|
+
...domProps,
|
|
105
|
+
className: classes,
|
|
106
|
+
dangerouslySetInnerHTML: dangerousHTML
|
|
107
|
+
}
|
|
108
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Element, { ref, ...domProps, className: classes, children: text });
|
|
109
|
+
}
|
|
110
|
+
const DangerousComponent = htmlElementType ?? (textIsBlockHTML ? "div" : "span");
|
|
85
111
|
const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
86
112
|
DangerousComponent,
|
|
87
113
|
{
|
|
@@ -89,7 +115,7 @@ var TextOrHTML = ({
|
|
|
89
115
|
dangerouslySetInnerHTML: dangerousHTML
|
|
90
116
|
}
|
|
91
117
|
);
|
|
92
|
-
if (
|
|
118
|
+
if (textWrapper) {
|
|
93
119
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { ref, ...textProps, children: dangerousElement });
|
|
94
120
|
}
|
|
95
121
|
return dangerousElement;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/TextOrHTML/index.tsx", "../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx"],
|
|
4
|
-
"sourcesContent": ["export * from \"./TextOrHTML\";\n", "import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;
|
|
6
|
-
"names": ["classNames", "import_jsx_runtime"]
|
|
4
|
+
"sourcesContent": ["export * from \"./TextOrHTML\";\n", "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", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"body\"\n | \"small\"\n | \"legal\"\n | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n /** HTML element for the text */\n elementType?: ElementType;\n /** Specify font size override */\n variant?: TextVariantType;\n /** Specify compact line height override */\n spacing?: \"loose\" | \"tight\";\n /** Custom class name for setting specific CSS */\n className?: string;\n children: ReactNode;\n style?: React.CSSProperties;\n}\n\nexport const getElementType = (\n variant: TextVariantType | undefined,\n elementType: ElementType | undefined,\n): ElementType => {\n // Explicit elementType always wins\n if (elementType) {\n return elementType;\n }\n // Infer element from variant\n if (variant && [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant)) {\n return variant as ElementType;\n }\n return \"p\";\n};\n\nconst Text = ({ ref, elementType, ...props }: TextProps) => {\n // Remove non-DOM props from element\n const { variant, className, spacing, ...otherProps } = props;\n\n // If a variant is supplied, set the class name and element type\n const Element: ElementType = getElementType(variant, elementType);\n const variantType = variant || Element;\n const classes = classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,iBAAuB;AAEvB,mBAAwB;;;ACDxB,oBAAuB;AAEvB,kBAAO;AAwDE;AA9BF,IAAM,iBAAiB,CAC5B,SACA,gBACgB;AAEhB,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,CAAC,MAAM,MAAM,MAAM,IAAI,EAAE,SAAS,OAAO,GAAG;AACzD,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,IAAM,OAAO,CAAC,EAAE,KAAK,aAAa,GAAG,MAAM,MAAiB;AAE1D,QAAM,EAAE,SAAS,WAAW,SAAS,GAAG,WAAW,IAAI;AAGvD,QAAM,UAAuB,eAAe,SAAS,WAAW;AAChE,QAAM,cAAc,WAAW;AAC/B,QAAM,cAAU,cAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,4CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,KAAK,cAAc;;;ADGb,IAAAC,sBAAA;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,aAAO,eAAAC;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,oBAAgB,sBAAQ,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,6CAAC,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,6CAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
|
|
6
|
+
"names": ["import_dedupe", "classNames", "import_jsx_runtime", "classNames"]
|
|
7
7
|
}
|