@simplybusiness/mobius 10.4.0 → 10.4.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 +13 -0
- package/dist/cjs/components/AddressLookup/AddressLookup.js +5 -4
- package/dist/cjs/components/AddressLookup/AddressLookup.js.map +2 -2
- package/dist/cjs/components/AddressLookup/index.js +5 -4
- package/dist/cjs/components/AddressLookup/index.js.map +2 -2
- package/dist/cjs/components/Alert/Alert.js +5 -4
- package/dist/cjs/components/Alert/Alert.js.map +2 -2
- package/dist/cjs/components/Alert/index.js +5 -4
- package/dist/cjs/components/Alert/index.js.map +2 -2
- package/dist/cjs/components/Checkbox/Checkbox.js +5 -4
- package/dist/cjs/components/Checkbox/Checkbox.js.map +2 -2
- package/dist/cjs/components/Checkbox/CheckboxGroup.js +5 -4
- package/dist/cjs/components/Checkbox/CheckboxGroup.js.map +2 -2
- package/dist/cjs/components/Checkbox/index.js +5 -4
- package/dist/cjs/components/Checkbox/index.js.map +2 -2
- package/dist/cjs/components/Combobox/Combobox.js +5 -4
- package/dist/cjs/components/Combobox/Combobox.js.map +2 -2
- package/dist/cjs/components/Combobox/index.js +5 -4
- package/dist/cjs/components/Combobox/index.js.map +2 -2
- package/dist/cjs/components/DateField/DateField.js +5 -4
- package/dist/cjs/components/DateField/DateField.js.map +2 -2
- package/dist/cjs/components/DateField/index.js +5 -4
- package/dist/cjs/components/DateField/index.js.map +2 -2
- package/dist/cjs/components/ErrorMessage/ErrorMessage.js +5 -4
- package/dist/cjs/components/ErrorMessage/ErrorMessage.js.map +2 -2
- package/dist/cjs/components/ErrorMessage/index.js +5 -4
- package/dist/cjs/components/ErrorMessage/index.js.map +2 -2
- package/dist/cjs/components/ExpandableText/ExpandableText.js +5 -4
- package/dist/cjs/components/ExpandableText/ExpandableText.js.map +2 -2
- package/dist/cjs/components/ExpandableText/index.js +5 -4
- package/dist/cjs/components/ExpandableText/index.js.map +2 -2
- package/dist/cjs/components/MaskedField/MaskedField.js +5 -4
- package/dist/cjs/components/MaskedField/MaskedField.js.map +2 -2
- package/dist/cjs/components/MaskedField/index.js +6 -5
- package/dist/cjs/components/MaskedField/index.js.map +2 -2
- package/dist/cjs/components/NumberField/NumberField.js +5 -4
- package/dist/cjs/components/NumberField/NumberField.js.map +2 -2
- package/dist/cjs/components/NumberField/index.js +5 -4
- package/dist/cjs/components/NumberField/index.js.map +2 -2
- package/dist/cjs/components/PasswordField/PasswordField.js +5 -4
- package/dist/cjs/components/PasswordField/PasswordField.js.map +2 -2
- package/dist/cjs/components/PasswordField/index.js +5 -4
- package/dist/cjs/components/PasswordField/index.js.map +2 -2
- package/dist/cjs/components/Radio/Radio.js +5 -4
- package/dist/cjs/components/Radio/Radio.js.map +2 -2
- package/dist/cjs/components/Radio/RadioGroup.js +5 -4
- package/dist/cjs/components/Radio/RadioGroup.js.map +2 -2
- package/dist/cjs/components/Radio/index.js +5 -4
- package/dist/cjs/components/Radio/index.js.map +2 -2
- package/dist/cjs/components/Select/Select.js +5 -4
- package/dist/cjs/components/Select/Select.js.map +2 -2
- package/dist/cjs/components/Select/index.js +5 -4
- package/dist/cjs/components/Select/index.js.map +2 -2
- package/dist/cjs/components/TextArea/TextArea.js +5 -4
- package/dist/cjs/components/TextArea/TextArea.js.map +2 -2
- package/dist/cjs/components/TextArea/index.js +5 -4
- package/dist/cjs/components/TextArea/index.js.map +2 -2
- package/dist/cjs/components/TextField/TextField.js +5 -4
- package/dist/cjs/components/TextField/TextField.js.map +2 -2
- package/dist/cjs/components/TextField/index.js +5 -4
- package/dist/cjs/components/TextField/index.js.map +2 -2
- package/dist/cjs/components/TextOrHTML/TextOrHTML.js +5 -4
- package/dist/cjs/components/TextOrHTML/TextOrHTML.js.map +2 -2
- package/dist/cjs/components/TextOrHTML/index.js +5 -4
- package/dist/cjs/components/TextOrHTML/index.js.map +2 -2
- package/dist/cjs/components/index.js +6 -5
- package/dist/cjs/components/index.js.map +2 -2
- package/dist/cjs/index.js +6 -5
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/meta.json +103 -103
- package/dist/esm/{chunk-4WVJNNBK.js → chunk-2HUMNED2.js} +2 -2
- package/dist/esm/{chunk-N4WQ6522.js → chunk-2VEO5SSY.js} +2 -2
- package/dist/esm/{chunk-AFU7BFCD.js → chunk-576SEJGC.js} +3 -3
- package/dist/esm/{chunk-QPIA6BGW.js → chunk-6JCU4CGA.js} +2 -2
- package/dist/esm/{chunk-X6EPYQKX.js → chunk-F5ELD54X.js} +2 -2
- package/dist/esm/{chunk-ZN5TRIVZ.js → chunk-GV36OVX7.js} +2 -2
- package/dist/esm/{chunk-JNAQ76CR.js → chunk-HGNWNZ5E.js} +2 -2
- package/dist/esm/{chunk-ONDOONBM.js → chunk-HUSMC5GZ.js} +2 -2
- package/dist/esm/{chunk-UIIXVY6K.js → chunk-IQKS662C.js} +2 -2
- package/dist/esm/{chunk-DYTHXKMX.js → chunk-KTJCAQT4.js} +6 -5
- package/dist/esm/chunk-KTJCAQT4.js.map +7 -0
- package/dist/esm/{chunk-5OFXPT4J.js → chunk-M62U4QGQ.js} +2 -2
- package/dist/esm/{chunk-UQVAEWY2.js → chunk-MZJT3USG.js} +2 -2
- package/dist/esm/{chunk-FKTDL7KO.js → chunk-OAG5T7NC.js} +2 -2
- package/dist/esm/{chunk-M2NDSQR5.js → chunk-P6YHEIFT.js} +2 -2
- package/dist/esm/{chunk-P5VEI574.js → chunk-S4CU4XRB.js} +2 -2
- package/dist/esm/{chunk-4NBLO5WK.js → chunk-X4CMSAET.js} +2 -2
- package/dist/esm/{chunk-KQZ3MNK5.js → chunk-XNEQHHNV.js} +2 -2
- package/dist/esm/components/AddressLookup/AddressLookup.js +5 -5
- package/dist/esm/components/AddressLookup/index.js +5 -5
- package/dist/esm/components/Alert/Alert.js +2 -2
- package/dist/esm/components/Alert/index.js +2 -2
- package/dist/esm/components/Checkbox/Checkbox.js +3 -3
- 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 +2 -2
- package/dist/esm/components/ErrorMessage/index.js +2 -2
- package/dist/esm/components/ExpandableText/ExpandableText.js +2 -2
- package/dist/esm/components/ExpandableText/index.js +2 -2
- package/dist/esm/components/MaskedField/MaskedField.js +3 -3
- 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/index.js +4 -4
- package/dist/esm/components/Radio/Radio.js +3 -3
- package/dist/esm/components/Radio/RadioGroup.js +3 -3
- package/dist/esm/components/Radio/index.js +4 -4
- package/dist/esm/components/Select/Select.js +3 -3
- package/dist/esm/components/Select/index.js +3 -3
- package/dist/esm/components/TextArea/TextArea.js +3 -3
- package/dist/esm/components/TextArea/index.js +3 -3
- package/dist/esm/components/TextField/TextField.js +3 -3
- package/dist/esm/components/TextField/index.js +3 -3
- package/dist/esm/components/TextOrHTML/TextOrHTML.js +1 -1
- package/dist/esm/components/TextOrHTML/index.js +1 -1
- package/dist/esm/components/index.js +17 -17
- package/dist/esm/index.js +17 -17
- package/dist/esm/meta.json +191 -191
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/TextOrHTML/TextOrHTML.test.tsx +45 -8
- package/src/components/TextOrHTML/TextOrHTML.tsx +7 -4
- package/dist/esm/chunk-DYTHXKMX.js.map +0 -7
- /package/dist/esm/{chunk-4WVJNNBK.js.map → chunk-2HUMNED2.js.map} +0 -0
- /package/dist/esm/{chunk-N4WQ6522.js.map → chunk-2VEO5SSY.js.map} +0 -0
- /package/dist/esm/{chunk-AFU7BFCD.js.map → chunk-576SEJGC.js.map} +0 -0
- /package/dist/esm/{chunk-QPIA6BGW.js.map → chunk-6JCU4CGA.js.map} +0 -0
- /package/dist/esm/{chunk-X6EPYQKX.js.map → chunk-F5ELD54X.js.map} +0 -0
- /package/dist/esm/{chunk-ZN5TRIVZ.js.map → chunk-GV36OVX7.js.map} +0 -0
- /package/dist/esm/{chunk-JNAQ76CR.js.map → chunk-HGNWNZ5E.js.map} +0 -0
- /package/dist/esm/{chunk-ONDOONBM.js.map → chunk-HUSMC5GZ.js.map} +0 -0
- /package/dist/esm/{chunk-UIIXVY6K.js.map → chunk-IQKS662C.js.map} +0 -0
- /package/dist/esm/{chunk-5OFXPT4J.js.map → chunk-M62U4QGQ.js.map} +0 -0
- /package/dist/esm/{chunk-UQVAEWY2.js.map → chunk-MZJT3USG.js.map} +0 -0
- /package/dist/esm/{chunk-FKTDL7KO.js.map → chunk-OAG5T7NC.js.map} +0 -0
- /package/dist/esm/{chunk-M2NDSQR5.js.map → chunk-P6YHEIFT.js.map} +0 -0
- /package/dist/esm/{chunk-P5VEI574.js.map → chunk-S4CU4XRB.js.map} +0 -0
- /package/dist/esm/{chunk-4NBLO5WK.js.map → chunk-X4CMSAET.js.map} +0 -0
- /package/dist/esm/{chunk-KQZ3MNK5.js.map → chunk-XNEQHHNV.js.map} +0 -0
|
@@ -271,7 +271,8 @@ Text.displayName = "Text";
|
|
|
271
271
|
|
|
272
272
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
273
273
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
274
|
-
var
|
|
274
|
+
var BLOCK_TAG = /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\s>/]/i;
|
|
275
|
+
var containsBlockHTML = (text) => BLOCK_TAG.test(text);
|
|
275
276
|
var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
|
|
276
277
|
var buildTextClasses = (textProps, htmlClassName) => {
|
|
277
278
|
const { variant, elementType, spacing, className } = textProps;
|
|
@@ -294,9 +295,9 @@ var TextOrHTML = ({
|
|
|
294
295
|
autoDetect = false,
|
|
295
296
|
...textProps
|
|
296
297
|
}) => {
|
|
297
|
-
const
|
|
298
|
+
const hasBlockContent = autoDetect && containsBlockHTML(text);
|
|
298
299
|
const dangerousHTML = (0, import_react3.useMemo)(() => ({ __html: text }), [text]);
|
|
299
|
-
if (autoDetect && !
|
|
300
|
+
if (autoDetect && !hasBlockContent) {
|
|
300
301
|
const { variant, spacing, elementType, className, ...domProps } = textProps;
|
|
301
302
|
const Element = getElementType(variant, elementType);
|
|
302
303
|
const classes = buildTextClasses(textProps, htmlClassName);
|
|
@@ -310,7 +311,7 @@ var TextOrHTML = ({
|
|
|
310
311
|
}
|
|
311
312
|
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Element, { ref, ...domProps, className: classes, children: text });
|
|
312
313
|
}
|
|
313
|
-
const DangerousComponent = htmlElementType ?? (
|
|
314
|
+
const DangerousComponent = htmlElementType ?? (hasBlockContent ? "div" : "span");
|
|
314
315
|
const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
315
316
|
DangerousComponent,
|
|
316
317
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/DateField/index.tsx", "../../../../src/components/DateField/DateField.tsx", "../../../../src/utils/mergeRefs.ts", "../../../../src/components/TextField/TextField.tsx", "../../../../src/utils/spaceDelimitedList.ts", "../../../../src/hooks/useLabel/useLabel.tsx", "../../../../src/hooks/useTextField/useTextField.tsx", "../../../../src/hooks/useValidationClasses/useValidationClasses.ts", "../../../../src/components/ErrorMessage/ErrorMessage.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx", "../../../../src/components/Label/Label.tsx", "../../../../src/components/Stack/Stack.tsx", "../../../../src/components/TextField/adornmentWithClassName.ts", "../../../../src/components/DateField/validation.ts"],
|
|
4
|
-
"sourcesContent": ["export * from \"./DateField\";\nexport * from \"./validation\";\n", "\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type { FocusEvent, RefAttributes } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport {\n TextField,\n type TextFieldElementType,\n type TextFieldProps,\n} from \"../TextField\";\nimport { convertToDateFormat, isValidDate } from \"./validation\";\n\nexport interface DateFieldProps\n extends Omit<TextFieldProps, \"type\">, RefAttributes<TextFieldElementType> {\n /** The earliest date allowed for the input. */\n min?: string;\n /** The latest date allowed for the input. */\n max?: string;\n /** Date format to use. */\n format?: string;\n}\n\nexport const MIN_MAX_ERROR =\n '\"min\" value should not be greater than \"max\" value.';\n\nexport const DateField = ({ ref, ...props }: DateFieldProps) => {\n const {\n min,\n max,\n format,\n className,\n errorMessage,\n defaultValue,\n value,\n ...otherProps\n } = props;\n const [error, setError] = useState<string | undefined>(errorMessage);\n const [isInvalid, setIsInvalid] = useState<boolean | undefined>(undefined);\n const localRef = useRef<TextFieldElementType>(null);\n const classes = classNames(\"mobius-date-field\", className);\n\n // If a custom format is provided, convert the min, max,\n // and defaultValue dates to that format\n const formattedMin = min ? convertToDateFormat(min, format) : undefined;\n const formattedMax = max ? convertToDateFormat(max, format) : undefined;\n const formattedDefaultValue = defaultValue\n ? convertToDateFormat(defaultValue, format)\n : undefined;\n const formattedValue = value ? convertToDateFormat(value, format) : undefined;\n\n const setInvalidState = (error?: string) => {\n setError(error);\n setIsInvalid(true);\n };\n\n const setValidState = () => {\n setError(props.errorMessage);\n setIsInvalid(false);\n };\n\n // Validate min and max values\n useEffect(() => {\n if (!isValidDate(min, format)) {\n setInvalidState(`Invalid min date: ${min}`);\n return;\n }\n if (!isValidDate(max, format)) {\n setInvalidState(`Invalid max date: ${max}`);\n return;\n }\n\n if (min && max) {\n const minDate = new Date(min);\n const maxDate = new Date(max);\n if (minDate > maxDate) {\n setInvalidState(MIN_MAX_ERROR);\n } else {\n setValidState();\n }\n } else {\n setValidState();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [min, max, format]);\n\n const validate = () => {\n // If 'min' or 'max' values are provided, checkValidity() will\n // validate the date and return a boolean\n const isValidInput = localRef.current?.checkValidity();\n\n if (!isValidInput) {\n setInvalidState(\"Invalid date input\");\n } else {\n setValidState();\n }\n };\n\n // User has interacted with the component and navigated away\n const handleBlur = (event: FocusEvent<Element>) => {\n validate();\n otherProps.onBlur?.(event);\n };\n\n return (\n <TextField\n ref={mergeRefs([localRef, ref])}\n className={classes}\n type=\"date\"\n min={formattedMin}\n max={formattedMax}\n errorMessage={errorMessage ?? error}\n isInvalid={isInvalid}\n defaultValue={formattedDefaultValue}\n value={formattedValue}\n onBlur={handleBlur}\n {...otherProps}\n />\n );\n};\n\nDateField.displayName = \"DateField\";\n", "// Ref: https://github.com/gregberge/react-merge-refs/blob/812fefa4390884a4a2d1bc489d869bd088df8ff5/src/index.tsx\nimport type { MutableRefObject, LegacyRef, RefCallback } from \"react\";\n\nexport function mergeRefs<T = unknown>(\n refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>,\n): RefCallback<T> {\n return value => {\n refs.forEach(ref => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref != null) {\n (ref as MutableRefObject<T | null>).current = value;\n }\n });\n };\n}\n", "\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type {\n HTMLInputTypeAttribute,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps, FocusEvents } from \"../../types\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\nimport \"./TextField.css\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n extends\n DOMProps,\n FocusEvents,\n UseTextFieldProps,\n RefAttributes<TextFieldElementType> {\n className?: string;\n errorMessage?: string;\n children?: ReactNode;\n label?: string;\n type?: Exclude<\n HTMLInputTypeAttribute,\n | \"button\"\n | \"checkbox\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"file\"\n | \"image\"\n | \"month\"\n | \"radio\"\n | \"range\"\n | \"reset\"\n | \"submit\"\n | \"week\"\n >;\n prefixInside?: ReactElement;\n prefixOutside?: ReactElement;\n suffixInside?: ReactElement;\n suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField = ({ ref, ...props }: TextFieldProps) => {\n const {\n isDisabled,\n type = \"text\",\n isInvalid,\n className,\n label,\n errorMessage,\n children,\n isRequired,\n prefixInside,\n prefixOutside,\n suffixInside,\n suffixOutside,\n autoComplete,\n isReadOnly,\n ...otherProps\n } = props;\n\n const resolvedAutoComplete =\n autoComplete ??\n (type === \"email\" ? \"email\" : type === \"tel\" ? \"tel\" : undefined);\n\n const { inputProps, labelProps, errorMessageProps } = useTextField({\n ...props,\n autoComplete: resolvedAutoComplete,\n \"aria-errormessage\": errorMessage,\n });\n\n const hidden = type === \"hidden\";\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const textfieldClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n \"--is-hidden\": hidden,\n [className || \"\"]: true,\n };\n\n const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n const labelClasses = classNames(\n {\n \"--is-disabled\": isDisabled,\n },\n validationClasses,\n );\n\n const containerClasses = classNames(\n \"mobius\",\n \"mobius-text-field\",\n sharedClasses,\n );\n\n const inputClasses = classNames(\n \"mobius\",\n \"mobius-text-field__input\",\n sharedClasses,\n );\n\n const inputWrapperClasses = classNames(\n \"mobius-text-field__input-wrapper\",\n sharedClasses,\n );\n\n return (\n <Stack gap=\"xs\" className={containerClasses}>\n {label && !hidden && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className=\"mobius-text-field__inner-container\">\n {adornmentWithClassName(\n prefixOutside,\n labelClasses,\n \"mobius-text-field__prefix-outside\",\n )}\n <div className={inputWrapperClasses}>\n {adornmentWithClassName(\n prefixInside,\n labelClasses,\n \"mobius-text-field__prefix-inside\",\n )}\n <input\n {...otherProps}\n {...inputProps}\n ref={ref}\n type={type}\n className={inputClasses}\n />\n {adornmentWithClassName(\n suffixInside,\n labelClasses,\n \"mobius-text-field__suffix-inside\",\n )}\n </div>\n {adornmentWithClassName(\n suffixOutside,\n labelClasses,\n \"mobius-text-field__suffix-outside\",\n )}\n </div>\n {children && (\n <div className=\"mobius-text-field__children\">{children}</div>\n )}\n\n <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n </Stack>\n );\n};\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n", "export function spaceDelimitedList(\n list: (string | null | undefined)[],\n): string | undefined {\n return list.filter(Boolean).join(\" \") || undefined;\n}\n", "import type { LabelHTMLAttributes } from \"react\";\nimport { useId, useRef } from \"react\";\n\nexport type UseLabelProps = {\n id?: string | undefined;\n label?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n labelElementType?: \"label\" | \"span\" | undefined;\n};\n\nexport type UseLabelReturn = {\n labelProps: {\n id?: string | undefined;\n } & LabelHTMLAttributes<HTMLLabelElement>;\n fieldProps: LabellingProps;\n};\n\nexport type LabellingProps = {\n id?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n \"aria-describedby\"?: string | undefined;\n \"aria-details\"?: string | undefined;\n};\n\nexport function useLabel({\n id: providedId,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n labelElementType = \"label\",\n}: UseLabelProps) {\n let labelProps: UseLabelReturn[\"labelProps\"] = {};\n let fieldProps: UseLabelReturn[\"fieldProps\"] = {};\n\n const hasWarnedAboutMissingLabels = useRef(false);\n\n const fallbackId = useId();\n const id = providedId || fallbackId;\n const labelId = useId();\n\n if (label) {\n ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;\n labelProps = {\n id: labelId,\n htmlFor: labelElementType === \"label\" ? id : undefined,\n };\n } else if (\n !ariaLabelledby &&\n !ariaLabel &&\n !hasWarnedAboutMissingLabels.current\n ) {\n hasWarnedAboutMissingLabels.current = true;\n console.warn(\n \"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility\",\n );\n }\n\n fieldProps = {\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n };\n\n return {\n labelProps,\n fieldProps,\n };\n}\n", "import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport type { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n const {\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n inputElementType = \"input\",\n } = props;\n const { labelProps, fieldProps } = useLabel(props);\n\n const descriptionId = useId();\n const descriptionProps = { id: descriptionId };\n\n const errorMessageId = useId();\n const errorMessageProps = { id: errorMessageId };\n\n const ariaDescribedBy = spaceDelimitedList([\n props.description && descriptionId,\n props.errorMessage && errorMessageId,\n props[\"aria-describedby\"],\n ]);\n\n return {\n descriptionProps,\n errorMessageProps,\n labelProps,\n inputProps: {\n defaultValue: props.defaultValue,\n value: props.value,\n onChange: props.onChange,\n disabled: isDisabled,\n readOnly: isReadOnly,\n required: isRequired,\n \"aria-required\": isRequired === true ? true : undefined,\n \"aria-invalid\": props.isInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": props[\"aria-errormessage\"],\n role: props.role,\n\n type: inputElementType === \"input\" ? props.type : undefined,\n pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n autoComplete: props.autoComplete,\n maxLength: props.maxLength,\n minLength: props.minLength,\n name: props.name,\n placeholder: props.placeholder,\n inputMode: props.inputMode,\n\n // Clipboard events\n onCopy: props.onCopy,\n onCut: props.onCut,\n onPaste: props.onPaste,\n\n // Composition events\n onCompositionEnd: props.onCompositionEnd,\n onCompositionStart: props.onCompositionStart,\n onCompositionUpdate: props.onCompositionUpdate,\n\n // Selection events\n onSelect: props.onSelect,\n\n // Input events\n onBeforeInput: props.onBeforeInput,\n onInput: props.onInput,\n\n // Focus events\n onFocus: props.onFocus,\n onBlur: props.onBlur,\n\n ...fieldProps,\n },\n };\n}\n", "import type { Validation } from \"../../types\";\n\nexport type GetValidationClassesProps = Pick<Validation, \"isInvalid\">;\n\nexport const useValidationClasses = (props: GetValidationClassesProps) => {\n const { isInvalid } = props;\n\n if (isInvalid) {\n return \"--is-invalid\";\n }\n\n if (isInvalid === false) {\n return \"--is-valid\";\n }\n\n return \"\";\n};\n", "import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\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", "import type React from \"react\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Label.css\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n React.JSX.IntrinsicElements[\"label\"],\n \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n extends IntrinsicLabel, DOMProps, RefAttributes<LabelElementType> {\n children?: ReactNode;\n className?: string;\n elementType?: \"label\" | \"span\";\n}\n\nconst Label = ({ ref, ...props }: LabelProps) => {\n const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n const classes = classNames(\"mobius\", \"mobius-label\", props.className);\n otherProps.className = classes;\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {children}\n </Element>\n );\n};\n\nLabel.displayName = \"Label\";\nexport { Label };\n", "import type { Ref, RefAttributes, ReactNode } from \"react\";\nimport type React from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { SpacingType } from \"../../types\";\nimport \"./Stack.css\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n children?: ReactNode;\n /** How big a gap between items */\n gap?: SpacingType;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack = ({ ref, ...props }: StackProps) => {\n const { elementType: Element = \"div\", gap, ...otherProps } = props;\n\n const classes = classNames(\n \"mobius\",\n \"mobius-stack\",\n {\n [`--gap-${gap}`]: gap,\n },\n otherProps.className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nStack.displayName = \"Stack\";\n", "import classNames from \"classnames/dedupe\";\nimport type { ReactElement } from \"react\";\nimport { cloneElement } from \"react\";\n\nexport const adornmentWithClassName = (\n component?: ReactElement,\n validationClasses?: string,\n className?: string,\n) => {\n if (!component) return null;\n\n return cloneElement(component, {\n className: classNames(\n (component.props as { className?: string }).className,\n validationClasses,\n className,\n ),\n } as { className: string });\n};\n", "// Convert a custom format date string to the format \"yyyy-mm-dd\".\nexport const convertToDateFormat = (date: string, format?: string): string => {\n const dateParts = date.split(/[-/]/);\n const formatParts = format ? format.split(/[-/]/) : [\"yyyy\", \"mm\", \"dd\"];\n const dateObj: { [key: string]: number } = {};\n const formattedDate: string[] = [];\n\n for (let i = 0; i < formatParts.length; i++) {\n dateObj[formatParts[i]] = dateParts[i] ? parseInt(dateParts[i], 10) : 0;\n }\n\n formattedDate.push(dateObj[\"yyyy\"]?.toString() || \"0000\");\n formattedDate.push(\n (dateObj[\"mm\"] < 10 ? \"0\" : \"\") + (dateObj[\"mm\"]?.toString() || \"00\"),\n );\n formattedDate.push(\n (dateObj[\"dd\"] < 10 ? \"0\" : \"\") + (dateObj[\"dd\"]?.toString() || \"00\"),\n );\n\n return formattedDate.join(\"-\");\n};\n\nexport const isValidDate = (date?: string, format = \"yyyy-mm-dd\"): boolean => {\n if (!date) return true;\n\n // Convert date to standard format\n const standardDate = convertToDateFormat(date, format);\n\n // Parse the standardized date\n const [yearStr, monthStr, dayStr] = standardDate.split(\"-\");\n const year = parseInt(yearStr, 10);\n const month = parseInt(monthStr, 10);\n const day = parseInt(dayStr, 10);\n\n // Validate month range\n if (month < 1 || month > 12) {\n return false;\n }\n\n // Check if day is valid for the month\n const daysInMonth = new Date(year, month, 0).getDate();\n return day > 0 && day <= daysInMonth;\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["export * from \"./DateField\";\nexport * from \"./validation\";\n", "\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type { FocusEvent, RefAttributes } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport {\n TextField,\n type TextFieldElementType,\n type TextFieldProps,\n} from \"../TextField\";\nimport { convertToDateFormat, isValidDate } from \"./validation\";\n\nexport interface DateFieldProps\n extends Omit<TextFieldProps, \"type\">, RefAttributes<TextFieldElementType> {\n /** The earliest date allowed for the input. */\n min?: string;\n /** The latest date allowed for the input. */\n max?: string;\n /** Date format to use. */\n format?: string;\n}\n\nexport const MIN_MAX_ERROR =\n '\"min\" value should not be greater than \"max\" value.';\n\nexport const DateField = ({ ref, ...props }: DateFieldProps) => {\n const {\n min,\n max,\n format,\n className,\n errorMessage,\n defaultValue,\n value,\n ...otherProps\n } = props;\n const [error, setError] = useState<string | undefined>(errorMessage);\n const [isInvalid, setIsInvalid] = useState<boolean | undefined>(undefined);\n const localRef = useRef<TextFieldElementType>(null);\n const classes = classNames(\"mobius-date-field\", className);\n\n // If a custom format is provided, convert the min, max,\n // and defaultValue dates to that format\n const formattedMin = min ? convertToDateFormat(min, format) : undefined;\n const formattedMax = max ? convertToDateFormat(max, format) : undefined;\n const formattedDefaultValue = defaultValue\n ? convertToDateFormat(defaultValue, format)\n : undefined;\n const formattedValue = value ? convertToDateFormat(value, format) : undefined;\n\n const setInvalidState = (error?: string) => {\n setError(error);\n setIsInvalid(true);\n };\n\n const setValidState = () => {\n setError(props.errorMessage);\n setIsInvalid(false);\n };\n\n // Validate min and max values\n useEffect(() => {\n if (!isValidDate(min, format)) {\n setInvalidState(`Invalid min date: ${min}`);\n return;\n }\n if (!isValidDate(max, format)) {\n setInvalidState(`Invalid max date: ${max}`);\n return;\n }\n\n if (min && max) {\n const minDate = new Date(min);\n const maxDate = new Date(max);\n if (minDate > maxDate) {\n setInvalidState(MIN_MAX_ERROR);\n } else {\n setValidState();\n }\n } else {\n setValidState();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [min, max, format]);\n\n const validate = () => {\n // If 'min' or 'max' values are provided, checkValidity() will\n // validate the date and return a boolean\n const isValidInput = localRef.current?.checkValidity();\n\n if (!isValidInput) {\n setInvalidState(\"Invalid date input\");\n } else {\n setValidState();\n }\n };\n\n // User has interacted with the component and navigated away\n const handleBlur = (event: FocusEvent<Element>) => {\n validate();\n otherProps.onBlur?.(event);\n };\n\n return (\n <TextField\n ref={mergeRefs([localRef, ref])}\n className={classes}\n type=\"date\"\n min={formattedMin}\n max={formattedMax}\n errorMessage={errorMessage ?? error}\n isInvalid={isInvalid}\n defaultValue={formattedDefaultValue}\n value={formattedValue}\n onBlur={handleBlur}\n {...otherProps}\n />\n );\n};\n\nDateField.displayName = \"DateField\";\n", "// Ref: https://github.com/gregberge/react-merge-refs/blob/812fefa4390884a4a2d1bc489d869bd088df8ff5/src/index.tsx\nimport type { MutableRefObject, LegacyRef, RefCallback } from \"react\";\n\nexport function mergeRefs<T = unknown>(\n refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>,\n): RefCallback<T> {\n return value => {\n refs.forEach(ref => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref != null) {\n (ref as MutableRefObject<T | null>).current = value;\n }\n });\n };\n}\n", "\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type {\n HTMLInputTypeAttribute,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps, FocusEvents } from \"../../types\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\nimport \"./TextField.css\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n extends\n DOMProps,\n FocusEvents,\n UseTextFieldProps,\n RefAttributes<TextFieldElementType> {\n className?: string;\n errorMessage?: string;\n children?: ReactNode;\n label?: string;\n type?: Exclude<\n HTMLInputTypeAttribute,\n | \"button\"\n | \"checkbox\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"file\"\n | \"image\"\n | \"month\"\n | \"radio\"\n | \"range\"\n | \"reset\"\n | \"submit\"\n | \"week\"\n >;\n prefixInside?: ReactElement;\n prefixOutside?: ReactElement;\n suffixInside?: ReactElement;\n suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField = ({ ref, ...props }: TextFieldProps) => {\n const {\n isDisabled,\n type = \"text\",\n isInvalid,\n className,\n label,\n errorMessage,\n children,\n isRequired,\n prefixInside,\n prefixOutside,\n suffixInside,\n suffixOutside,\n autoComplete,\n isReadOnly,\n ...otherProps\n } = props;\n\n const resolvedAutoComplete =\n autoComplete ??\n (type === \"email\" ? \"email\" : type === \"tel\" ? \"tel\" : undefined);\n\n const { inputProps, labelProps, errorMessageProps } = useTextField({\n ...props,\n autoComplete: resolvedAutoComplete,\n \"aria-errormessage\": errorMessage,\n });\n\n const hidden = type === \"hidden\";\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const textfieldClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n \"--is-hidden\": hidden,\n [className || \"\"]: true,\n };\n\n const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n const labelClasses = classNames(\n {\n \"--is-disabled\": isDisabled,\n },\n validationClasses,\n );\n\n const containerClasses = classNames(\n \"mobius\",\n \"mobius-text-field\",\n sharedClasses,\n );\n\n const inputClasses = classNames(\n \"mobius\",\n \"mobius-text-field__input\",\n sharedClasses,\n );\n\n const inputWrapperClasses = classNames(\n \"mobius-text-field__input-wrapper\",\n sharedClasses,\n );\n\n return (\n <Stack gap=\"xs\" className={containerClasses}>\n {label && !hidden && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className=\"mobius-text-field__inner-container\">\n {adornmentWithClassName(\n prefixOutside,\n labelClasses,\n \"mobius-text-field__prefix-outside\",\n )}\n <div className={inputWrapperClasses}>\n {adornmentWithClassName(\n prefixInside,\n labelClasses,\n \"mobius-text-field__prefix-inside\",\n )}\n <input\n {...otherProps}\n {...inputProps}\n ref={ref}\n type={type}\n className={inputClasses}\n />\n {adornmentWithClassName(\n suffixInside,\n labelClasses,\n \"mobius-text-field__suffix-inside\",\n )}\n </div>\n {adornmentWithClassName(\n suffixOutside,\n labelClasses,\n \"mobius-text-field__suffix-outside\",\n )}\n </div>\n {children && (\n <div className=\"mobius-text-field__children\">{children}</div>\n )}\n\n <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n </Stack>\n );\n};\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n", "export function spaceDelimitedList(\n list: (string | null | undefined)[],\n): string | undefined {\n return list.filter(Boolean).join(\" \") || undefined;\n}\n", "import type { LabelHTMLAttributes } from \"react\";\nimport { useId, useRef } from \"react\";\n\nexport type UseLabelProps = {\n id?: string | undefined;\n label?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n labelElementType?: \"label\" | \"span\" | undefined;\n};\n\nexport type UseLabelReturn = {\n labelProps: {\n id?: string | undefined;\n } & LabelHTMLAttributes<HTMLLabelElement>;\n fieldProps: LabellingProps;\n};\n\nexport type LabellingProps = {\n id?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n \"aria-describedby\"?: string | undefined;\n \"aria-details\"?: string | undefined;\n};\n\nexport function useLabel({\n id: providedId,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n labelElementType = \"label\",\n}: UseLabelProps) {\n let labelProps: UseLabelReturn[\"labelProps\"] = {};\n let fieldProps: UseLabelReturn[\"fieldProps\"] = {};\n\n const hasWarnedAboutMissingLabels = useRef(false);\n\n const fallbackId = useId();\n const id = providedId || fallbackId;\n const labelId = useId();\n\n if (label) {\n ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;\n labelProps = {\n id: labelId,\n htmlFor: labelElementType === \"label\" ? id : undefined,\n };\n } else if (\n !ariaLabelledby &&\n !ariaLabel &&\n !hasWarnedAboutMissingLabels.current\n ) {\n hasWarnedAboutMissingLabels.current = true;\n console.warn(\n \"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility\",\n );\n }\n\n fieldProps = {\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n };\n\n return {\n labelProps,\n fieldProps,\n };\n}\n", "import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport type { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n const {\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n inputElementType = \"input\",\n } = props;\n const { labelProps, fieldProps } = useLabel(props);\n\n const descriptionId = useId();\n const descriptionProps = { id: descriptionId };\n\n const errorMessageId = useId();\n const errorMessageProps = { id: errorMessageId };\n\n const ariaDescribedBy = spaceDelimitedList([\n props.description && descriptionId,\n props.errorMessage && errorMessageId,\n props[\"aria-describedby\"],\n ]);\n\n return {\n descriptionProps,\n errorMessageProps,\n labelProps,\n inputProps: {\n defaultValue: props.defaultValue,\n value: props.value,\n onChange: props.onChange,\n disabled: isDisabled,\n readOnly: isReadOnly,\n required: isRequired,\n \"aria-required\": isRequired === true ? true : undefined,\n \"aria-invalid\": props.isInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": props[\"aria-errormessage\"],\n role: props.role,\n\n type: inputElementType === \"input\" ? props.type : undefined,\n pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n autoComplete: props.autoComplete,\n maxLength: props.maxLength,\n minLength: props.minLength,\n name: props.name,\n placeholder: props.placeholder,\n inputMode: props.inputMode,\n\n // Clipboard events\n onCopy: props.onCopy,\n onCut: props.onCut,\n onPaste: props.onPaste,\n\n // Composition events\n onCompositionEnd: props.onCompositionEnd,\n onCompositionStart: props.onCompositionStart,\n onCompositionUpdate: props.onCompositionUpdate,\n\n // Selection events\n onSelect: props.onSelect,\n\n // Input events\n onBeforeInput: props.onBeforeInput,\n onInput: props.onInput,\n\n // Focus events\n onFocus: props.onFocus,\n onBlur: props.onBlur,\n\n ...fieldProps,\n },\n };\n}\n", "import type { Validation } from \"../../types\";\n\nexport type GetValidationClassesProps = Pick<Validation, \"isInvalid\">;\n\nexport const useValidationClasses = (props: GetValidationClassesProps) => {\n const { isInvalid } = props;\n\n if (isInvalid) {\n return \"--is-invalid\";\n }\n\n if (isInvalid === false) {\n return \"--is-valid\";\n }\n\n return \"\";\n};\n", "import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\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\n// Block-level tags that cannot be nested inside <p>.\nconst BLOCK_TAG =\n /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\\s>/]/i;\nconst containsBlockHTML = (text: string) => BLOCK_TAG.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 hasBlockContent = autoDetect && containsBlockHTML(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 && !hasBlockContent) {\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 ?? (hasBlockContent ? \"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", "import type React from \"react\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Label.css\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n React.JSX.IntrinsicElements[\"label\"],\n \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n extends IntrinsicLabel, DOMProps, RefAttributes<LabelElementType> {\n children?: ReactNode;\n className?: string;\n elementType?: \"label\" | \"span\";\n}\n\nconst Label = ({ ref, ...props }: LabelProps) => {\n const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n const classes = classNames(\"mobius\", \"mobius-label\", props.className);\n otherProps.className = classes;\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {children}\n </Element>\n );\n};\n\nLabel.displayName = \"Label\";\nexport { Label };\n", "import type { Ref, RefAttributes, ReactNode } from \"react\";\nimport type React from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { SpacingType } from \"../../types\";\nimport \"./Stack.css\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n children?: ReactNode;\n /** How big a gap between items */\n gap?: SpacingType;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack = ({ ref, ...props }: StackProps) => {\n const { elementType: Element = \"div\", gap, ...otherProps } = props;\n\n const classes = classNames(\n \"mobius\",\n \"mobius-stack\",\n {\n [`--gap-${gap}`]: gap,\n },\n otherProps.className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nStack.displayName = \"Stack\";\n", "import classNames from \"classnames/dedupe\";\nimport type { ReactElement } from \"react\";\nimport { cloneElement } from \"react\";\n\nexport const adornmentWithClassName = (\n component?: ReactElement,\n validationClasses?: string,\n className?: string,\n) => {\n if (!component) return null;\n\n return cloneElement(component, {\n className: classNames(\n (component.props as { className?: string }).className,\n validationClasses,\n className,\n ),\n } as { className: string });\n};\n", "// Convert a custom format date string to the format \"yyyy-mm-dd\".\nexport const convertToDateFormat = (date: string, format?: string): string => {\n const dateParts = date.split(/[-/]/);\n const formatParts = format ? format.split(/[-/]/) : [\"yyyy\", \"mm\", \"dd\"];\n const dateObj: { [key: string]: number } = {};\n const formattedDate: string[] = [];\n\n for (let i = 0; i < formatParts.length; i++) {\n dateObj[formatParts[i]] = dateParts[i] ? parseInt(dateParts[i], 10) : 0;\n }\n\n formattedDate.push(dateObj[\"yyyy\"]?.toString() || \"0000\");\n formattedDate.push(\n (dateObj[\"mm\"] < 10 ? \"0\" : \"\") + (dateObj[\"mm\"]?.toString() || \"00\"),\n );\n formattedDate.push(\n (dateObj[\"dd\"] < 10 ? \"0\" : \"\") + (dateObj[\"dd\"]?.toString() || \"00\"),\n );\n\n return formattedDate.join(\"-\");\n};\n\nexport const isValidDate = (date?: string, format = \"yyyy-mm-dd\"): boolean => {\n if (!date) return true;\n\n // Convert date to standard format\n const standardDate = convertToDateFormat(date, format);\n\n // Parse the standardized date\n const [yearStr, monthStr, dayStr] = standardDate.split(\"-\");\n const year = parseInt(yearStr, 10);\n const month = parseInt(monthStr, 10);\n const day = parseInt(dayStr, 10);\n\n // Validate month range\n if (month < 1 || month > 12) {\n return false;\n }\n\n // Check if day is valid for the month\n const daysInMonth = new Date(year, month, 0).getDate();\n return day > 0 && day <= daysInMonth;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,IAAAA,iBAAuB;AAEvB,IAAAC,gBAA4C;;;ACDrC,SAAS,UACd,MACgB;AAChB,SAAO,WAAS;AACd,SAAK,QAAQ,SAAO;AAClB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,KAAK;AAAA,MACX,WAAW,OAAO,MAAM;AACtB,QAAC,IAAmC,UAAU;AAAA,MAChD;AAAA,IACF,CAAC;AAAA,EACH;AACF;;;ACbA,IAAAC,iBAAuB;;;ACFhB,SAAS,mBACd,MACoB;AACpB,SAAO,KAAK,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAC3C;;;ACHA,mBAA8B;AAyBvB,SAAS,SAAS;AAAA,EACvB,IAAI;AAAA,EACJ;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,mBAAmB;AACrB,GAAkB;AAChB,MAAI,aAA2C,CAAC;AAChD,MAAI,aAA2C,CAAC;AAEhD,QAAM,kCAA8B,qBAAO,KAAK;AAEhD,QAAM,iBAAa,oBAAM;AACzB,QAAM,KAAK,cAAc;AACzB,QAAM,cAAU,oBAAM;AAEtB,MAAI,OAAO;AACT,qBAAiB,iBAAiB,GAAG,OAAO,IAAI,cAAc,KAAK;AACnE,iBAAa;AAAA,MACX,IAAI;AAAA,MACJ,SAAS,qBAAqB,UAAU,KAAK;AAAA,IAC/C;AAAA,EACF,WACE,CAAC,kBACD,CAAC,aACD,CAAC,4BAA4B,SAC7B;AACA,gCAA4B,UAAU;AACtC,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,eAAa;AAAA,IACX;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;;ACrEA,IAAAC,gBAAsB;AAKf,SAAS,aAAa,OAA8C;AACzE,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa;AAAA,IACb,mBAAmB;AAAA,EACrB,IAAI;AACJ,QAAM,EAAE,YAAY,WAAW,IAAI,SAAS,KAAK;AAEjD,QAAM,oBAAgB,qBAAM;AAC5B,QAAM,mBAAmB,EAAE,IAAI,cAAc;AAE7C,QAAM,qBAAiB,qBAAM;AAC7B,QAAM,oBAAoB,EAAE,IAAI,eAAe;AAE/C,QAAM,kBAAkB,mBAAmB;AAAA,IACzC,MAAM,eAAe;AAAA,IACrB,MAAM,gBAAgB;AAAA,IACtB,MAAM,kBAAkB;AAAA,EAC1B,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB,eAAe,OAAO,OAAO;AAAA,MAC9C,gBAAgB,MAAM;AAAA,MACtB,oBAAoB;AAAA,MACpB,qBAAqB,MAAM,mBAAmB;AAAA,MAC9C,MAAM,MAAM;AAAA,MAEZ,MAAM,qBAAqB,UAAU,MAAM,OAAO;AAAA,MAClD,SAAS,qBAAqB,UAAU,MAAM,UAAU;AAAA,MAExD,cAAc,MAAM;AAAA,MACpB,WAAW,MAAM;AAAA,MACjB,WAAW,MAAM;AAAA,MACjB,MAAM,MAAM;AAAA,MACZ,aAAa,MAAM;AAAA,MACnB,WAAW,MAAM;AAAA;AAAA,MAGjB,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA;AAAA,MAGf,kBAAkB,MAAM;AAAA,MACxB,oBAAoB,MAAM;AAAA,MAC1B,qBAAqB,MAAM;AAAA;AAAA,MAG3B,UAAU,MAAM;AAAA;AAAA,MAGhB,eAAe,MAAM;AAAA,MACrB,SAAS,MAAM;AAAA;AAAA,MAGf,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM;AAAA,MAEd,GAAG;AAAA,IACL;AAAA,EACF;AACF;;;ACzEO,IAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM,EAAE,UAAU,IAAI;AAEtB,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO;AACvB,WAAO;AAAA,EACT;AAEA,SAAO;AACT;;;AChBA,mBAAsB;AACtB,IAAAC,iBAAuB;;;ACDvB,oBAAuB;AAEvB,kBAAO;AA2CH;AAzCJ,IAAM,cAAc;AAEpB,IAAM,wBAAwB,CAAC,QAC7B,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAEpC,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AAEA,QAAM,cAAU,cAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA,eAAe,WAAW;AAAA,IAC1B,UAAU,IAAI;AAAA,IACd;AAAA,IACA;AAAA,MACE,CAAC,GAAG,WAAW,KAAK,GAAG;AAAA,MACvB,CAAC,GAAG,WAAW,OAAO,GAAG,QAAQ;AAAA,MACjC,CAAC,GAAG,WAAW,eAAe,GAAG;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,OAAO,QAAQ,YAAY,IAAI;AACjD,QAAM,oBAAoB,SAAS,MAAM,GAAG,EAAE,KAAK,GAAG;AAEtD,QAAM,eAAe,GAAG,sBAAsB,iBAAiB,CAAC;AAChE,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAK;AAAA,MACL,OAAM;AAAA,MACN,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B,OAAO,EAAE,MAAM;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,oDAAC,WAAO,qBAAU;AAAA,QAClB,4CAAC,UAAK,MAAK,gBAAe,GAAG,aAAa;AAAA;AAAA;AAAA,EAC5C;AAEJ;;;AC5DA,IAAAC,iBAAuB;AAEvB,IAAAC,gBAAwB;;;ACDxB,IAAAC,iBAAuB;AAEvB,kBAAO;AAwDE,IAAAC,sBAAA;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,eAAAC;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,6CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,KAAK,cAAc;;;ADMb,IAAAC,sBAAA;AA3DN,IAAM,YACJ;AACF,IAAM,oBAAoB,CAAC,SAAiB,UAAU,KAAK,IAAI;AAC/D,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,kBAAkB,IAAI;AAI5D,QAAM,oBAAgB,uBAAQ,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;;;AFjGzB,0BAAO;AAkBH,IAAAC,sBAAA;AAVG,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,cAAU,eAAAC,SAAW,UAAU,wBAAwB,SAAS;AAEtE,MAAI,CAAC,aAAc,QAAO;AAE1B,SACE,8CAAC,SAAI,IAAQ,WAAW,SAAS,eAAY,gBAAe,MAAK,SAC/D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,QACV,eAAY;AAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,aAAY;AAAA,QACZ,WAAU;AAAA,QACV,MAAM;AAAA;AAAA,IACR;AAAA,KACF;AAEJ;AAEA,aAAa,cAAc;;;AInC3B,IAAAC,iBAAuB;AAEvB,mBAAO;AAsBH,IAAAC,sBAAA;AAPJ,IAAM,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,MAAkB;AAC/C,QAAM,EAAE,aAAa,UAAU,SAAS,UAAU,GAAG,WAAW,IAAI;AAEpE,QAAM,cAAU,eAAAC,SAAW,UAAU,gBAAgB,MAAM,SAAS;AACpE,aAAW,YAAY;AAEvB,SACE,6CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAC3C,UACH;AAEJ;AAEA,MAAM,cAAc;;;AC9BpB,IAAAC,iBAAuB;AAGvB,mBAAO;AA2BE,IAAAC,sBAAA;AAZF,IAAM,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,MAAkB;AACtD,QAAM,EAAE,aAAa,UAAU,OAAO,KAAK,GAAG,WAAW,IAAI;AAE7D,QAAM,cAAU,eAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,MACE,CAAC,SAAS,GAAG,EAAE,GAAG;AAAA,IACpB;AAAA,IACA,WAAW;AAAA,EACb;AAEA,SAAO,6CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,MAAM,cAAc;;;ACnCpB,IAAAC,iBAAuB;AAEvB,IAAAC,gBAA6B;AAEtB,IAAM,yBAAyB,CACpC,WACA,mBACA,cACG;AACH,MAAI,CAAC,UAAW,QAAO;AAEvB,aAAO,4BAAa,WAAW;AAAA,IAC7B,eAAW,eAAAC;AAAA,MACR,UAAU,MAAiC;AAAA,MAC5C;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAA0B;AAC5B;;;AXDA,uBAAO;AA2GC,IAAAC,sBAAA;AAtER,IAAM,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,MAAsB;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,uBACJ,iBACC,SAAS,UAAU,UAAU,SAAS,QAAQ,QAAQ;AAEzD,QAAM,EAAE,YAAY,YAAY,kBAAkB,IAAI,aAAa;AAAA,IACjE,GAAG;AAAA,IACH,cAAc;AAAA,IACd,qBAAqB;AAAA,EACvB,CAAC;AAED,QAAM,SAAS,SAAS;AAExB,QAAM,oBAAoB,qBAAqB,EAAE,UAAU,CAAC;AAE5D,QAAM,mBAAmB;AAAA,IACvB,iBAAiB;AAAA,IACjB,iBAAiB,OAAO,eAAe,aAAa;AAAA,IACpD,iBAAiB,OAAO,eAAe,aAAa,CAAC;AAAA,IACrD,eAAe;AAAA,IACf,CAAC,aAAa,EAAE,GAAG;AAAA,EACrB;AAEA,QAAM,oBAAgB,eAAAC,SAAW,mBAAmB,gBAAgB;AAEpE,QAAM,mBAAe,eAAAA;AAAA,IACnB;AAAA,MACE,iBAAiB;AAAA,IACnB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,uBAAmB,eAAAA;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,mBAAe,eAAAA;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,0BAAsB,eAAAA;AAAA,IAC1B;AAAA,IACA;AAAA,EACF;AAEA,SACE,8CAAC,SAAM,KAAI,MAAK,WAAW,kBACxB;AAAA,aAAS,CAAC,UACT,6CAAC,SAAO,GAAG,YAAY,WAAW,cAC/B,iBACH;AAAA,IAEF,8CAAC,SAAI,WAAU,sCACZ;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,8CAAC,SAAI,WAAW,qBACb;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,WAAW;AAAA;AAAA,QACb;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,SACF;AAAA,MACC;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,OACF;AAAA,IACC,YACC,6CAAC,SAAI,WAAU,+BAA+B,UAAS;AAAA,IAGzD,6CAAC,gBAAc,GAAG,mBAAmB,cAA4B;AAAA,KACnE;AAEJ;AAEA,UAAU,cAAc;;;AYvKjB,IAAM,sBAAsB,CAAC,MAAc,WAA4B;AAC5E,QAAM,YAAY,KAAK,MAAM,MAAM;AACnC,QAAM,cAAc,SAAS,OAAO,MAAM,MAAM,IAAI,CAAC,QAAQ,MAAM,IAAI;AACvE,QAAM,UAAqC,CAAC;AAC5C,QAAM,gBAA0B,CAAC;AAEjC,WAAS,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK;AAC3C,YAAQ,YAAY,CAAC,CAAC,IAAI,UAAU,CAAC,IAAI,SAAS,UAAU,CAAC,GAAG,EAAE,IAAI;AAAA,EACxE;AAEA,gBAAc,KAAK,QAAQ,MAAM,GAAG,SAAS,KAAK,MAAM;AACxD,gBAAc;AAAA,KACX,QAAQ,IAAI,IAAI,KAAK,MAAM,OAAO,QAAQ,IAAI,GAAG,SAAS,KAAK;AAAA,EAClE;AACA,gBAAc;AAAA,KACX,QAAQ,IAAI,IAAI,KAAK,MAAM,OAAO,QAAQ,IAAI,GAAG,SAAS,KAAK;AAAA,EAClE;AAEA,SAAO,cAAc,KAAK,GAAG;AAC/B;AAEO,IAAM,cAAc,CAAC,MAAe,SAAS,iBAA0B;AAC5E,MAAI,CAAC,KAAM,QAAO;AAGlB,QAAM,eAAe,oBAAoB,MAAM,MAAM;AAGrD,QAAM,CAAC,SAAS,UAAU,MAAM,IAAI,aAAa,MAAM,GAAG;AAC1D,QAAM,OAAO,SAAS,SAAS,EAAE;AACjC,QAAM,QAAQ,SAAS,UAAU,EAAE;AACnC,QAAM,MAAM,SAAS,QAAQ,EAAE;AAG/B,MAAI,QAAQ,KAAK,QAAQ,IAAI;AAC3B,WAAO;AAAA,EACT;AAGA,QAAM,cAAc,IAAI,KAAK,MAAM,OAAO,CAAC,EAAE,QAAQ;AACrD,SAAO,MAAM,KAAK,OAAO;AAC3B;;;Ad+DI,IAAAC,sBAAA;AAlFG,IAAM,gBACX;AAEK,IAAM,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,MAAsB;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAACC,QAAO,QAAQ,QAAI,wBAA6B,YAAY;AACnE,QAAM,CAAC,WAAW,YAAY,QAAI,wBAA8B,MAAS;AACzE,QAAM,eAAW,sBAA6B,IAAI;AAClD,QAAM,cAAU,eAAAC,SAAW,qBAAqB,SAAS;AAIzD,QAAM,eAAe,MAAM,oBAAoB,KAAK,MAAM,IAAI;AAC9D,QAAM,eAAe,MAAM,oBAAoB,KAAK,MAAM,IAAI;AAC9D,QAAM,wBAAwB,eAC1B,oBAAoB,cAAc,MAAM,IACxC;AACJ,QAAM,iBAAiB,QAAQ,oBAAoB,OAAO,MAAM,IAAI;AAEpE,QAAM,kBAAkB,CAACD,WAAmB;AAC1C,aAASA,MAAK;AACd,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,MAAM,YAAY;AAC3B,iBAAa,KAAK;AAAA,EACpB;AAGA,+BAAU,MAAM;AACd,QAAI,CAAC,YAAY,KAAK,MAAM,GAAG;AAC7B,sBAAgB,qBAAqB,GAAG,EAAE;AAC1C;AAAA,IACF;AACA,QAAI,CAAC,YAAY,KAAK,MAAM,GAAG;AAC7B,sBAAgB,qBAAqB,GAAG,EAAE;AAC1C;AAAA,IACF;AAEA,QAAI,OAAO,KAAK;AACd,YAAM,UAAU,IAAI,KAAK,GAAG;AAC5B,YAAM,UAAU,IAAI,KAAK,GAAG;AAC5B,UAAI,UAAU,SAAS;AACrB,wBAAgB,aAAa;AAAA,MAC/B,OAAO;AACL,sBAAc;AAAA,MAChB;AAAA,IACF,OAAO;AACL,oBAAc;AAAA,IAChB;AAAA,EAEF,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC;AAErB,QAAM,WAAW,MAAM;AAGrB,UAAM,eAAe,SAAS,SAAS,cAAc;AAErD,QAAI,CAAC,cAAc;AACjB,sBAAgB,oBAAoB;AAAA,IACtC,OAAO;AACL,oBAAc;AAAA,IAChB;AAAA,EACF;AAGA,QAAM,aAAa,CAAC,UAA+B;AACjD,aAAS;AACT,eAAW,SAAS,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,UAAU,CAAC,UAAU,GAAG,CAAC;AAAA,MAC9B,WAAW;AAAA,MACX,MAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,cAAc,gBAAgBA;AAAA,MAC9B;AAAA,MACA,cAAc;AAAA,MACd,OAAO;AAAA,MACP,QAAQ;AAAA,MACP,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,UAAU,cAAc;",
|
|
6
6
|
"names": ["import_dedupe", "import_react", "import_dedupe", "import_react", "import_dedupe", "classNames", "import_dedupe", "import_react", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_react", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime", "error", "classNames"]
|
|
7
7
|
}
|
|
@@ -127,7 +127,8 @@ Text.displayName = "Text";
|
|
|
127
127
|
|
|
128
128
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
129
129
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
130
|
-
var
|
|
130
|
+
var BLOCK_TAG = /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\s>/]/i;
|
|
131
|
+
var containsBlockHTML = (text) => BLOCK_TAG.test(text);
|
|
131
132
|
var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
|
|
132
133
|
var buildTextClasses = (textProps, htmlClassName) => {
|
|
133
134
|
const { variant, elementType, spacing, className } = textProps;
|
|
@@ -150,9 +151,9 @@ var TextOrHTML = ({
|
|
|
150
151
|
autoDetect = false,
|
|
151
152
|
...textProps
|
|
152
153
|
}) => {
|
|
153
|
-
const
|
|
154
|
+
const hasBlockContent = autoDetect && containsBlockHTML(text);
|
|
154
155
|
const dangerousHTML = (0, import_react.useMemo)(() => ({ __html: text }), [text]);
|
|
155
|
-
if (autoDetect && !
|
|
156
|
+
if (autoDetect && !hasBlockContent) {
|
|
156
157
|
const { variant, spacing, elementType, className, ...domProps } = textProps;
|
|
157
158
|
const Element = getElementType(variant, elementType);
|
|
158
159
|
const classes = buildTextClasses(textProps, htmlClassName);
|
|
@@ -166,7 +167,7 @@ var TextOrHTML = ({
|
|
|
166
167
|
}
|
|
167
168
|
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Element, { ref, ...domProps, className: classes, children: text });
|
|
168
169
|
}
|
|
169
|
-
const DangerousComponent = htmlElementType ?? (
|
|
170
|
+
const DangerousComponent = htmlElementType ?? (hasBlockContent ? "div" : "span");
|
|
170
171
|
const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
171
172
|
DangerousComponent,
|
|
172
173
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/ErrorMessage/ErrorMessage.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx"],
|
|
4
|
-
"sourcesContent": ["import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,IAAAA,iBAAuB;;;ACDvB,oBAAuB;AAEvB,kBAAO;AA2CH;AAzCJ,IAAM,cAAc;AAEpB,IAAM,wBAAwB,CAAC,QAC7B,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAEpC,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AAEA,QAAM,cAAU,cAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA,eAAe,WAAW;AAAA,IAC1B,UAAU,IAAI;AAAA,IACd;AAAA,IACA;AAAA,MACE,CAAC,GAAG,WAAW,KAAK,GAAG;AAAA,MACvB,CAAC,GAAG,WAAW,OAAO,GAAG,QAAQ;AAAA,MACjC,CAAC,GAAG,WAAW,eAAe,GAAG;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,OAAO,QAAQ,YAAY,IAAI;AACjD,QAAM,oBAAoB,SAAS,MAAM,GAAG,EAAE,KAAK,GAAG;AAEtD,QAAM,eAAe,GAAG,sBAAsB,iBAAiB,CAAC;AAChE,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAK;AAAA,MACL,OAAM;AAAA,MACN,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B,OAAO,EAAE,MAAM;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,oDAAC,WAAO,qBAAU;AAAA,QAClB,4CAAC,UAAK,MAAK,gBAAe,GAAG,aAAa;AAAA;AAAA;AAAA,EAC5C;AAEJ;;;AC5DA,IAAAC,iBAAuB;AAEvB,mBAAwB;;;ACDxB,IAAAC,iBAAuB;AAEvB,kBAAO;AAwDE,IAAAC,sBAAA;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,eAAAC;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,6CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,KAAK,cAAc;;;
|
|
4
|
+
"sourcesContent": ["import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\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\n// Block-level tags that cannot be nested inside <p>.\nconst BLOCK_TAG =\n /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\\s>/]/i;\nconst containsBlockHTML = (text: string) => BLOCK_TAG.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 hasBlockContent = autoDetect && containsBlockHTML(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 && !hasBlockContent) {\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 ?? (hasBlockContent ? \"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": "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",
|
|
6
6
|
"names": ["import_dedupe", "classNames", "import_dedupe", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames"]
|
|
7
7
|
}
|
|
@@ -129,7 +129,8 @@ Text.displayName = "Text";
|
|
|
129
129
|
|
|
130
130
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
131
131
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
132
|
-
var
|
|
132
|
+
var BLOCK_TAG = /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\s>/]/i;
|
|
133
|
+
var containsBlockHTML = (text) => BLOCK_TAG.test(text);
|
|
133
134
|
var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
|
|
134
135
|
var buildTextClasses = (textProps, htmlClassName) => {
|
|
135
136
|
const { variant, elementType, spacing, className } = textProps;
|
|
@@ -152,9 +153,9 @@ var TextOrHTML = ({
|
|
|
152
153
|
autoDetect = false,
|
|
153
154
|
...textProps
|
|
154
155
|
}) => {
|
|
155
|
-
const
|
|
156
|
+
const hasBlockContent = autoDetect && containsBlockHTML(text);
|
|
156
157
|
const dangerousHTML = (0, import_react.useMemo)(() => ({ __html: text }), [text]);
|
|
157
|
-
if (autoDetect && !
|
|
158
|
+
if (autoDetect && !hasBlockContent) {
|
|
158
159
|
const { variant, spacing, elementType, className, ...domProps } = textProps;
|
|
159
160
|
const Element = getElementType(variant, elementType);
|
|
160
161
|
const classes = buildTextClasses(textProps, htmlClassName);
|
|
@@ -168,7 +169,7 @@ var TextOrHTML = ({
|
|
|
168
169
|
}
|
|
169
170
|
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Element, { ref, ...domProps, className: classes, children: text });
|
|
170
171
|
}
|
|
171
|
-
const DangerousComponent = htmlElementType ?? (
|
|
172
|
+
const DangerousComponent = htmlElementType ?? (hasBlockContent ? "div" : "span");
|
|
172
173
|
const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
173
174
|
DangerousComponent,
|
|
174
175
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/ErrorMessage/index.tsx", "../../../../src/components/ErrorMessage/ErrorMessage.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx"],
|
|
4
|
-
"sourcesContent": ["export * from \"./ErrorMessage\";\n", "import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAsB;AACtB,IAAAA,iBAAuB;;;ACDvB,oBAAuB;AAEvB,kBAAO;AA2CH;AAzCJ,IAAM,cAAc;AAEpB,IAAM,wBAAwB,CAAC,QAC7B,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAEpC,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AAEA,QAAM,cAAU,cAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA,eAAe,WAAW;AAAA,IAC1B,UAAU,IAAI;AAAA,IACd;AAAA,IACA;AAAA,MACE,CAAC,GAAG,WAAW,KAAK,GAAG;AAAA,MACvB,CAAC,GAAG,WAAW,OAAO,GAAG,QAAQ;AAAA,MACjC,CAAC,GAAG,WAAW,eAAe,GAAG;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,OAAO,QAAQ,YAAY,IAAI;AACjD,QAAM,oBAAoB,SAAS,MAAM,GAAG,EAAE,KAAK,GAAG;AAEtD,QAAM,eAAe,GAAG,sBAAsB,iBAAiB,CAAC;AAChE,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAK;AAAA,MACL,OAAM;AAAA,MACN,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B,OAAO,EAAE,MAAM;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,oDAAC,WAAO,qBAAU;AAAA,QAClB,4CAAC,UAAK,MAAK,gBAAe,GAAG,aAAa;AAAA;AAAA;AAAA,EAC5C;AAEJ;;;AC5DA,IAAAC,iBAAuB;AAEvB,mBAAwB;;;ACDxB,IAAAC,iBAAuB;AAEvB,kBAAO;AAwDE,IAAAC,sBAAA;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,eAAAC;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,6CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,KAAK,cAAc;;;
|
|
4
|
+
"sourcesContent": ["export * from \"./ErrorMessage\";\n", "import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\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\n// Block-level tags that cannot be nested inside <p>.\nconst BLOCK_TAG =\n /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\\s>/]/i;\nconst containsBlockHTML = (text: string) => BLOCK_TAG.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 hasBlockContent = autoDetect && containsBlockHTML(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 && !hasBlockContent) {\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 ?? (hasBlockContent ? \"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": "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",
|
|
6
6
|
"names": ["import_dedupe", "classNames", "import_dedupe", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames"]
|
|
7
7
|
}
|
|
@@ -503,7 +503,8 @@ Text.displayName = "Text";
|
|
|
503
503
|
|
|
504
504
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
505
505
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
506
|
-
var
|
|
506
|
+
var BLOCK_TAG = /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\s>/]/i;
|
|
507
|
+
var containsBlockHTML = (text) => BLOCK_TAG.test(text);
|
|
507
508
|
var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
|
|
508
509
|
var buildTextClasses = (textProps, htmlClassName) => {
|
|
509
510
|
const { variant, elementType, spacing, className } = textProps;
|
|
@@ -526,9 +527,9 @@ var TextOrHTML = ({
|
|
|
526
527
|
autoDetect = false,
|
|
527
528
|
...textProps
|
|
528
529
|
}) => {
|
|
529
|
-
const
|
|
530
|
+
const hasBlockContent = autoDetect && containsBlockHTML(text);
|
|
530
531
|
const dangerousHTML = (0, import_react3.useMemo)(() => ({ __html: text }), [text]);
|
|
531
|
-
if (autoDetect && !
|
|
532
|
+
if (autoDetect && !hasBlockContent) {
|
|
532
533
|
const { variant, spacing, elementType, className, ...domProps } = textProps;
|
|
533
534
|
const Element = getElementType(variant, elementType);
|
|
534
535
|
const classes = buildTextClasses(textProps, htmlClassName);
|
|
@@ -542,7 +543,7 @@ var TextOrHTML = ({
|
|
|
542
543
|
}
|
|
543
544
|
) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Element, { ref, ...domProps, className: classes, children: text });
|
|
544
545
|
}
|
|
545
|
-
const DangerousComponent = htmlElementType ?? (
|
|
546
|
+
const DangerousComponent = htmlElementType ?? (hasBlockContent ? "div" : "span");
|
|
546
547
|
const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
547
548
|
DangerousComponent,
|
|
548
549
|
{
|