@simplybusiness/mobius 10.3.4 → 10.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/components/AddressLookup/AddressLookup.js +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/Modal/Modal.js +6 -0
- package/dist/cjs/components/Modal/Modal.js.map +2 -2
- package/dist/cjs/components/Modal/index.js +6 -0
- package/dist/cjs/components/Modal/index.js.map +2 -2
- package/dist/cjs/components/Modal/types.js.map +1 -1
- 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 +12 -5
- package/dist/cjs/components/index.js.map +2 -2
- package/dist/cjs/index.js +12 -5
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/meta.json +114 -114
- 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-KXLTGNKF.js → chunk-JJUTS5ET.js} +7 -1
- package/dist/esm/chunk-JJUTS5ET.js.map +7 -0
- 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-DZVBN6ZI.js → chunk-PEEQNAIN.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/Modal/Modal.js +1 -1
- package/dist/esm/components/Modal/index.js +2 -2
- 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 +19 -19
- package/dist/esm/index.js +19 -19
- package/dist/esm/meta.json +208 -208
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Modal/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/Modal/Modal.tsx +6 -0
- package/src/components/Modal/types.ts +1 -0
- 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-KXLTGNKF.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-DZVBN6ZI.js.map → chunk-PEEQNAIN.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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Select/Select.tsx", "../../../../src/utils/spaceDelimitedList.ts", "../../../../src/hooks/useLabel/useLabel.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"],
|
|
4
|
-
"sourcesContent": ["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ChangeEvent, ReactElement, RefAttributes } from \"react\";\nimport { useId } from \"react\";\nimport { useValidationClasses } from \"../../hooks\";\nimport type { UseLabelProps } from \"../../hooks/useLabel\";\nimport { useLabel } from \"../../hooks/useLabel\";\nimport type { DOMProps, Validation } from \"../../types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Icon } from \"../Icon\";\nimport { Label } from \"../Label\";\nimport type { OptionProps } from \"../Option\";\nimport { Stack } from \"../Stack\";\nimport \"./Select.css\";\n\nexport type SelectElementType = HTMLSelectElement;\nexport interface SelectProps\n extends\n UseLabelProps,\n Validation,\n DOMProps,\n RefAttributes<SelectElementType> {\n name?: string;\n onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;\n value?: string;\n defaultValue?: string;\n className?: string;\n errorMessage?: string;\n children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;\n \"aria-describedby\"?: string;\n isDisabled?: boolean;\n}\n\nconst Select = ({ ref, ...props }: SelectProps) => {\n const {\n label,\n onChange,\n isInvalid,\n errorMessage,\n isDisabled = false,\n isRequired,\n ...otherProps\n } = props;\n\n const { labelProps, fieldProps } = useLabel({\n label,\n ...otherProps,\n });\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const stateClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n };\n\n const sharedClasses = classNames(validationClasses, stateClasses);\n\n const wrapperClasses = classNames(\n \"mobius-select__wrapper\",\n sharedClasses,\n otherProps.className,\n );\n const selectClasses = classNames(\n \"mobius-select\",\n sharedClasses,\n otherProps.className,\n );\n const labelClasses = classNames(\n \"mobius-label\",\n sharedClasses,\n otherProps.className,\n );\n const iconClasses = classNames(\"mobius-select__icon\", sharedClasses);\n const errorMessageId = useId();\n const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n const describedBy = spaceDelimitedList([\n shouldErrorMessageShow,\n props[\"aria-describedby\"],\n ]);\n\n const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <Stack className=\"mobius mobius-select__outer\" gap=\"xs\">\n {label && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className={wrapperClasses}>\n <select\n {...otherProps}\n {...fieldProps}\n ref={ref}\n multiple={false}\n className={selectClasses}\n disabled={isDisabled}\n aria-invalid={!!errorMessage}\n aria-describedby={describedBy}\n aria-required={isRequired}\n required={isRequired}\n onChange={handleChange}\n />\n <span className={iconClasses}>\n <Icon icon={chevronDown} />\n </span>\n </div>\n {errorMessage && (\n <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n )}\n </Stack>\n );\n};\n\nSelect.displayName = \"Select\";\nexport { Select };\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 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"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ChangeEvent, ReactElement, RefAttributes } from \"react\";\nimport { useId } from \"react\";\nimport { useValidationClasses } from \"../../hooks\";\nimport type { UseLabelProps } from \"../../hooks/useLabel\";\nimport { useLabel } from \"../../hooks/useLabel\";\nimport type { DOMProps, Validation } from \"../../types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Icon } from \"../Icon\";\nimport { Label } from \"../Label\";\nimport type { OptionProps } from \"../Option\";\nimport { Stack } from \"../Stack\";\nimport \"./Select.css\";\n\nexport type SelectElementType = HTMLSelectElement;\nexport interface SelectProps\n extends\n UseLabelProps,\n Validation,\n DOMProps,\n RefAttributes<SelectElementType> {\n name?: string;\n onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;\n value?: string;\n defaultValue?: string;\n className?: string;\n errorMessage?: string;\n children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;\n \"aria-describedby\"?: string;\n isDisabled?: boolean;\n}\n\nconst Select = ({ ref, ...props }: SelectProps) => {\n const {\n label,\n onChange,\n isInvalid,\n errorMessage,\n isDisabled = false,\n isRequired,\n ...otherProps\n } = props;\n\n const { labelProps, fieldProps } = useLabel({\n label,\n ...otherProps,\n });\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const stateClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n };\n\n const sharedClasses = classNames(validationClasses, stateClasses);\n\n const wrapperClasses = classNames(\n \"mobius-select__wrapper\",\n sharedClasses,\n otherProps.className,\n );\n const selectClasses = classNames(\n \"mobius-select\",\n sharedClasses,\n otherProps.className,\n );\n const labelClasses = classNames(\n \"mobius-label\",\n sharedClasses,\n otherProps.className,\n );\n const iconClasses = classNames(\"mobius-select__icon\", sharedClasses);\n const errorMessageId = useId();\n const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n const describedBy = spaceDelimitedList([\n shouldErrorMessageShow,\n props[\"aria-describedby\"],\n ]);\n\n const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <Stack className=\"mobius mobius-select__outer\" gap=\"xs\">\n {label && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className={wrapperClasses}>\n <select\n {...otherProps}\n {...fieldProps}\n ref={ref}\n multiple={false}\n className={selectClasses}\n disabled={isDisabled}\n aria-invalid={!!errorMessage}\n aria-describedby={describedBy}\n aria-required={isRequired}\n required={isRequired}\n onChange={handleChange}\n />\n <span className={iconClasses}>\n <Icon icon={chevronDown} />\n </span>\n </div>\n {errorMessage && (\n <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n )}\n </Stack>\n );\n};\n\nSelect.displayName = \"Select\";\nexport { Select };\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 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_icons", "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_jsx_runtime", "classNames"]
|
|
7
7
|
}
|
|
@@ -189,7 +189,8 @@ Text.displayName = "Text";
|
|
|
189
189
|
|
|
190
190
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
191
191
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
192
|
-
var
|
|
192
|
+
var BLOCK_TAG = /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\s>/]/i;
|
|
193
|
+
var containsBlockHTML = (text) => BLOCK_TAG.test(text);
|
|
193
194
|
var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
|
|
194
195
|
var buildTextClasses = (textProps, htmlClassName) => {
|
|
195
196
|
const { variant, elementType, spacing, className } = textProps;
|
|
@@ -212,9 +213,9 @@ var TextOrHTML = ({
|
|
|
212
213
|
autoDetect = false,
|
|
213
214
|
...textProps
|
|
214
215
|
}) => {
|
|
215
|
-
const
|
|
216
|
+
const hasBlockContent = autoDetect && containsBlockHTML(text);
|
|
216
217
|
const dangerousHTML = (0, import_react2.useMemo)(() => ({ __html: text }), [text]);
|
|
217
|
-
if (autoDetect && !
|
|
218
|
+
if (autoDetect && !hasBlockContent) {
|
|
218
219
|
const { variant, spacing, elementType, className, ...domProps } = textProps;
|
|
219
220
|
const Element = getElementType(variant, elementType);
|
|
220
221
|
const classes = buildTextClasses(textProps, htmlClassName);
|
|
@@ -228,7 +229,7 @@ var TextOrHTML = ({
|
|
|
228
229
|
}
|
|
229
230
|
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Element, { ref, ...domProps, className: classes, children: text });
|
|
230
231
|
}
|
|
231
|
-
const DangerousComponent = htmlElementType ?? (
|
|
232
|
+
const DangerousComponent = htmlElementType ?? (hasBlockContent ? "div" : "span");
|
|
232
233
|
const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
233
234
|
DangerousComponent,
|
|
234
235
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Select/index.tsx", "../../../../src/components/Select/Select.tsx", "../../../../src/utils/spaceDelimitedList.ts", "../../../../src/hooks/useLabel/useLabel.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"],
|
|
4
|
-
"sourcesContent": ["export * from \"./Select\";\n", "\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ChangeEvent, ReactElement, RefAttributes } from \"react\";\nimport { useId } from \"react\";\nimport { useValidationClasses } from \"../../hooks\";\nimport type { UseLabelProps } from \"../../hooks/useLabel\";\nimport { useLabel } from \"../../hooks/useLabel\";\nimport type { DOMProps, Validation } from \"../../types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Icon } from \"../Icon\";\nimport { Label } from \"../Label\";\nimport type { OptionProps } from \"../Option\";\nimport { Stack } from \"../Stack\";\nimport \"./Select.css\";\n\nexport type SelectElementType = HTMLSelectElement;\nexport interface SelectProps\n extends\n UseLabelProps,\n Validation,\n DOMProps,\n RefAttributes<SelectElementType> {\n name?: string;\n onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;\n value?: string;\n defaultValue?: string;\n className?: string;\n errorMessage?: string;\n children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;\n \"aria-describedby\"?: string;\n isDisabled?: boolean;\n}\n\nconst Select = ({ ref, ...props }: SelectProps) => {\n const {\n label,\n onChange,\n isInvalid,\n errorMessage,\n isDisabled = false,\n isRequired,\n ...otherProps\n } = props;\n\n const { labelProps, fieldProps } = useLabel({\n label,\n ...otherProps,\n });\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const stateClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n };\n\n const sharedClasses = classNames(validationClasses, stateClasses);\n\n const wrapperClasses = classNames(\n \"mobius-select__wrapper\",\n sharedClasses,\n otherProps.className,\n );\n const selectClasses = classNames(\n \"mobius-select\",\n sharedClasses,\n otherProps.className,\n );\n const labelClasses = classNames(\n \"mobius-label\",\n sharedClasses,\n otherProps.className,\n );\n const iconClasses = classNames(\"mobius-select__icon\", sharedClasses);\n const errorMessageId = useId();\n const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n const describedBy = spaceDelimitedList([\n shouldErrorMessageShow,\n props[\"aria-describedby\"],\n ]);\n\n const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <Stack className=\"mobius mobius-select__outer\" gap=\"xs\">\n {label && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className={wrapperClasses}>\n <select\n {...otherProps}\n {...fieldProps}\n ref={ref}\n multiple={false}\n className={selectClasses}\n disabled={isDisabled}\n aria-invalid={!!errorMessage}\n aria-describedby={describedBy}\n aria-required={isRequired}\n required={isRequired}\n onChange={handleChange}\n />\n <span className={iconClasses}>\n <Icon icon={chevronDown} />\n </span>\n </div>\n {errorMessage && (\n <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n )}\n </Stack>\n );\n};\n\nSelect.displayName = \"Select\";\nexport { Select };\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 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"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["export * from \"./Select\";\n", "\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ChangeEvent, ReactElement, RefAttributes } from \"react\";\nimport { useId } from \"react\";\nimport { useValidationClasses } from \"../../hooks\";\nimport type { UseLabelProps } from \"../../hooks/useLabel\";\nimport { useLabel } from \"../../hooks/useLabel\";\nimport type { DOMProps, Validation } from \"../../types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Icon } from \"../Icon\";\nimport { Label } from \"../Label\";\nimport type { OptionProps } from \"../Option\";\nimport { Stack } from \"../Stack\";\nimport \"./Select.css\";\n\nexport type SelectElementType = HTMLSelectElement;\nexport interface SelectProps\n extends\n UseLabelProps,\n Validation,\n DOMProps,\n RefAttributes<SelectElementType> {\n name?: string;\n onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;\n value?: string;\n defaultValue?: string;\n className?: string;\n errorMessage?: string;\n children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;\n \"aria-describedby\"?: string;\n isDisabled?: boolean;\n}\n\nconst Select = ({ ref, ...props }: SelectProps) => {\n const {\n label,\n onChange,\n isInvalid,\n errorMessage,\n isDisabled = false,\n isRequired,\n ...otherProps\n } = props;\n\n const { labelProps, fieldProps } = useLabel({\n label,\n ...otherProps,\n });\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const stateClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n };\n\n const sharedClasses = classNames(validationClasses, stateClasses);\n\n const wrapperClasses = classNames(\n \"mobius-select__wrapper\",\n sharedClasses,\n otherProps.className,\n );\n const selectClasses = classNames(\n \"mobius-select\",\n sharedClasses,\n otherProps.className,\n );\n const labelClasses = classNames(\n \"mobius-label\",\n sharedClasses,\n otherProps.className,\n );\n const iconClasses = classNames(\"mobius-select__icon\", sharedClasses);\n const errorMessageId = useId();\n const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n const describedBy = spaceDelimitedList([\n shouldErrorMessageShow,\n props[\"aria-describedby\"],\n ]);\n\n const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <Stack className=\"mobius mobius-select__outer\" gap=\"xs\">\n {label && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className={wrapperClasses}>\n <select\n {...otherProps}\n {...fieldProps}\n ref={ref}\n multiple={false}\n className={selectClasses}\n disabled={isDisabled}\n aria-invalid={!!errorMessage}\n aria-describedby={describedBy}\n aria-required={isRequired}\n required={isRequired}\n onChange={handleChange}\n />\n <span className={iconClasses}>\n <Icon icon={chevronDown} />\n </span>\n </div>\n {errorMessage && (\n <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n )}\n </Stack>\n );\n};\n\nSelect.displayName = \"Select\";\nexport { Select };\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 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_icons", "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_jsx_runtime", "classNames"]
|
|
7
7
|
}
|
|
@@ -250,7 +250,8 @@ Text.displayName = "Text";
|
|
|
250
250
|
|
|
251
251
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
252
252
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
253
|
-
var
|
|
253
|
+
var BLOCK_TAG = /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\s>/]/i;
|
|
254
|
+
var containsBlockHTML = (text) => BLOCK_TAG.test(text);
|
|
254
255
|
var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
|
|
255
256
|
var buildTextClasses = (textProps, htmlClassName) => {
|
|
256
257
|
const { variant, elementType, spacing, className } = textProps;
|
|
@@ -273,9 +274,9 @@ var TextOrHTML = ({
|
|
|
273
274
|
autoDetect = false,
|
|
274
275
|
...textProps
|
|
275
276
|
}) => {
|
|
276
|
-
const
|
|
277
|
+
const hasBlockContent = autoDetect && containsBlockHTML(text);
|
|
277
278
|
const dangerousHTML = (0, import_react3.useMemo)(() => ({ __html: text }), [text]);
|
|
278
|
-
if (autoDetect && !
|
|
279
|
+
if (autoDetect && !hasBlockContent) {
|
|
279
280
|
const { variant, spacing, elementType, className, ...domProps } = textProps;
|
|
280
281
|
const Element = getElementType(variant, elementType);
|
|
281
282
|
const classes = buildTextClasses(textProps, htmlClassName);
|
|
@@ -289,7 +290,7 @@ var TextOrHTML = ({
|
|
|
289
290
|
}
|
|
290
291
|
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Element, { ref, ...domProps, className: classes, children: text });
|
|
291
292
|
}
|
|
292
|
-
const DangerousComponent = htmlElementType ?? (
|
|
293
|
+
const DangerousComponent = htmlElementType ?? (hasBlockContent ? "div" : "span");
|
|
293
294
|
const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
294
295
|
DangerousComponent,
|
|
295
296
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/TextArea/TextArea.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/TextAreaInput/TextAreaInput.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type { RefAttributes } from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { TextAreaInput } from \"../TextAreaInput\";\nimport \"./TextArea.css\";\n\nexport type TextAreaElementType = HTMLTextAreaElement;\n\nexport interface TextAreaProps\n extends UseTextFieldProps, DOMProps, RefAttributes<TextAreaElementType> {\n className?: string;\n errorMessage?: string;\n}\n\nconst TextArea = ({ ref, ...props }: TextAreaProps) => {\n const {\n isDisabled,\n className,\n errorMessage,\n label,\n isInvalid,\n ...otherProps\n } = props;\n\n const { inputProps, labelProps, errorMessageProps } = useTextField(props);\n\n // Set class name for atom, including interaction state\n const classes = classNames(\"mobius\", \"mobius-text-area\", className);\n const validationClasses = useValidationClasses({ isInvalid });\n const inputClasses = classNames(\"mobius-text-area__input\", validationClasses);\n const labelClasses = classNames(\n {\n \"--is-disabled\": isDisabled,\n },\n validationClasses,\n );\n\n return (\n <Stack className={classes} gap=\"xs\">\n {label && (\n <Label {...labelProps} className={labelClasses}>\n {props.label}\n </Label>\n )}\n <TextAreaInput\n {...otherProps}\n {...inputProps}\n ref={ref}\n className={inputClasses}\n isDisabled={isDisabled}\n aria-invalid={errorMessage != null}\n />\n <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n </Stack>\n );\n};\n\nTextArea.displayName = \"TextArea\";\nexport { TextArea };\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 { RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type TextAreaInputElementType = HTMLTextAreaElement;\n\nexport interface InteractionStateProps {\n isSelected?: boolean;\n isDisabled?: boolean;\n}\n\nexport interface TextAreaInputProps\n extends\n DOMProps,\n InteractionStateProps,\n RefAttributes<TextAreaInputElementType> {\n className?: string;\n isReadOnly?: boolean;\n isRequired?: boolean;\n}\n\nconst TextAreaInput = ({ ref, ...props }: TextAreaInputProps) => {\n // Extract interaction props:\n const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } =\n props;\n\n const classes = classNames(\n \"mobius\",\n \"mobius-text-area__input\",\n {\n \"--is-disabled\": isDisabled,\n \"--is-selected\": isSelected,\n \"--is-required\": isRequired,\n },\n otherProps.className,\n );\n\n return (\n <textarea\n ref={ref}\n {...otherProps}\n required={isRequired}\n readOnly={isReadOnly}\n className={classes}\n />\n );\n};\n\nTextAreaInput.displayName = \"TextAreaInput\";\nexport { TextAreaInput };\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type { RefAttributes } from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { TextAreaInput } from \"../TextAreaInput\";\nimport \"./TextArea.css\";\n\nexport type TextAreaElementType = HTMLTextAreaElement;\n\nexport interface TextAreaProps\n extends UseTextFieldProps, DOMProps, RefAttributes<TextAreaElementType> {\n className?: string;\n errorMessage?: string;\n}\n\nconst TextArea = ({ ref, ...props }: TextAreaProps) => {\n const {\n isDisabled,\n className,\n errorMessage,\n label,\n isInvalid,\n ...otherProps\n } = props;\n\n const { inputProps, labelProps, errorMessageProps } = useTextField(props);\n\n // Set class name for atom, including interaction state\n const classes = classNames(\"mobius\", \"mobius-text-area\", className);\n const validationClasses = useValidationClasses({ isInvalid });\n const inputClasses = classNames(\"mobius-text-area__input\", validationClasses);\n const labelClasses = classNames(\n {\n \"--is-disabled\": isDisabled,\n },\n validationClasses,\n );\n\n return (\n <Stack className={classes} gap=\"xs\">\n {label && (\n <Label {...labelProps} className={labelClasses}>\n {props.label}\n </Label>\n )}\n <TextAreaInput\n {...otherProps}\n {...inputProps}\n ref={ref}\n className={inputClasses}\n isDisabled={isDisabled}\n aria-invalid={errorMessage != null}\n />\n <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n </Stack>\n );\n};\n\nTextArea.displayName = \"TextArea\";\nexport { TextArea };\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 { RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type TextAreaInputElementType = HTMLTextAreaElement;\n\nexport interface InteractionStateProps {\n isSelected?: boolean;\n isDisabled?: boolean;\n}\n\nexport interface TextAreaInputProps\n extends\n DOMProps,\n InteractionStateProps,\n RefAttributes<TextAreaInputElementType> {\n className?: string;\n isReadOnly?: boolean;\n isRequired?: boolean;\n}\n\nconst TextAreaInput = ({ ref, ...props }: TextAreaInputProps) => {\n // Extract interaction props:\n const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } =\n props;\n\n const classes = classNames(\n \"mobius\",\n \"mobius-text-area__input\",\n {\n \"--is-disabled\": isDisabled,\n \"--is-selected\": isSelected,\n \"--is-required\": isRequired,\n },\n otherProps.className,\n );\n\n return (\n <textarea\n ref={ref}\n {...otherProps}\n required={isRequired}\n readOnly={isReadOnly}\n className={classes}\n />\n );\n};\n\nTextAreaInput.displayName = \"TextAreaInput\";\nexport { TextAreaInput };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["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_jsx_runtime", "classNames", "import_jsx_runtime", "classNames"]
|
|
7
7
|
}
|
|
@@ -251,7 +251,8 @@ Text.displayName = "Text";
|
|
|
251
251
|
|
|
252
252
|
// src/components/TextOrHTML/TextOrHTML.tsx
|
|
253
253
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
254
|
-
var
|
|
254
|
+
var BLOCK_TAG = /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\s>/]/i;
|
|
255
|
+
var containsBlockHTML = (text) => BLOCK_TAG.test(text);
|
|
255
256
|
var containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
|
|
256
257
|
var buildTextClasses = (textProps, htmlClassName) => {
|
|
257
258
|
const { variant, elementType, spacing, className } = textProps;
|
|
@@ -274,9 +275,9 @@ var TextOrHTML = ({
|
|
|
274
275
|
autoDetect = false,
|
|
275
276
|
...textProps
|
|
276
277
|
}) => {
|
|
277
|
-
const
|
|
278
|
+
const hasBlockContent = autoDetect && containsBlockHTML(text);
|
|
278
279
|
const dangerousHTML = (0, import_react3.useMemo)(() => ({ __html: text }), [text]);
|
|
279
|
-
if (autoDetect && !
|
|
280
|
+
if (autoDetect && !hasBlockContent) {
|
|
280
281
|
const { variant, spacing, elementType, className, ...domProps } = textProps;
|
|
281
282
|
const Element = getElementType(variant, elementType);
|
|
282
283
|
const classes = buildTextClasses(textProps, htmlClassName);
|
|
@@ -290,7 +291,7 @@ var TextOrHTML = ({
|
|
|
290
291
|
}
|
|
291
292
|
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Element, { ref, ...domProps, className: classes, children: text });
|
|
292
293
|
}
|
|
293
|
-
const DangerousComponent = htmlElementType ?? (
|
|
294
|
+
const DangerousComponent = htmlElementType ?? (hasBlockContent ? "div" : "span");
|
|
294
295
|
const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
295
296
|
DangerousComponent,
|
|
296
297
|
{
|