npm - @pega/cosmos-react-core - Versions diffs - 5.0.0-dev.1.0 → 5.0.0-dev.10.0 - Mend

@pega/cosmos-react-core 5.0.0-dev.1.0 → 5.0.0-dev.10.0

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.

Files changed (2275) hide show

package/lib/components/FormField/FormField.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useEffect, useState, forwardRef } from 'react';
+import { cloneElement, useEffect, forwardRef, useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { readableColor, rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import Actions from '../Actions';
-import { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';
+import { useConsolidatedRef, useDirection, useI18n, useLiveLog, useTestIds, useUID } from '../../hooks';
 import Label, { StyledLabel } from '../Label';
 import { calculateFontSize, getHoverColors } from '../../styles';
 import VisuallyHiddenText from '../VisuallyHiddenText';
@@ -15,7 +15,7 @@ import Icon, { registerIcon } from '../Icon';
 import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';
 import * as checkIcon from '../Icon/icons/check.icon';
-import AdditionalInfo from '../AdditionalInfo';
+import AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';
 import { getFormFieldTestIds } from './FormField.test-ids';
 registerIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);
 const StyledStatusIcon = styled(Icon)(({ theme, status }) => {
@@ -43,9 +43,22 @@ export const StyledFormFieldInfo = styled.div(({ status, theme: { base: { 'font-
     `;
 });
 StyledFormFieldInfo.defaultProps = defaultThemeProp;
-const StyledLabelRow = styled.div ``;
+const StyledRequiredAsterisk = styled.span(({ theme }) => {
+    const { base: { palette: { urgent } } } = theme;
+    return css `
+    vertical-align: top;
+    color: ${urgent};
+  `;
+});
+StyledRequiredAsterisk.defaultProps = defaultThemeProp;
+const StyledLabelRow = styled.div `
+  ${StyledRequiredAsterisk} {
+    margin-inline-end: auto;
+  }
+`;
 export const StyledFormField = styled.div(props => {
-    const { disabled, required, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing } } } = props;
+    const { labelAsLegend, showAdditionalInfo, disabled, required, theme: { base: { 'disabled-opacity': disabledOpacity, spacing } } } = props;
+    const { ltr } = useDirection();
     return css `
     ${disabled &&
         css `
@@ -61,18 +74,40 @@ export const StyledFormField = styled.div(props => {
     }
     > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {
-      &::after {
-        display: ${required ? 'inline' : 'none'};
-        content: '\\00a0*';
-        vertical-align: top;
-        color: ${urgent};
-      }
       ${disabled &&
         css `
         cursor: not-allowed;
       `}
     }
+    ${labelAsLegend &&
+        (showAdditionalInfo || required) &&
+        css `
+      display: block;
+      > legend {
+        float: ${ltr ? 'left' : 'right'};
+      }
+      > ${StyledRequiredAsterisk} {
+        float: ${ltr ? 'left' : 'right'};
+        ${!showAdditionalInfo &&
+            css `
+          + * {
+            clear: both;
+          }
+        `}
+      }
+      > ${StyledAdditionalInfo} {
+        float: ${ltr ? 'right' : 'left'};
+        + * {
+          clear: both;
+        }
+      }
+    `}
   `;
 });
 StyledFormField.defaultProps = defaultThemeProp;
@@ -111,35 +146,35 @@ const StyledSuggestionButton = styled(Button)(({ theme: { base: { 'font-size': f
     `;
 });
 StyledSuggestionButton.defaultProps = defaultThemeProp;
-const StyledInfo = styled.span `
-  display: contents;
-`;
 const statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };
 const FormField = forwardRef(function FormField(props, ref) {
     const uid = useUID();
     const { testId, children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, actions, container, additionalInfo, onResolveSuggestion, ...restProps } = props;
     const testIds = useTestIds(testId, getFormFieldTestIds);
     const t = useI18n();
+    const { announceAssertive } = useLiveLog();
     const labelAsLegend = labelAs === 'legend';
     const hasSuggestion = status === 'pending' && !!onResolveSuggestion;
     const consolidatedRef = useConsolidatedRef(ref);
+    const labelRef = useRef(null);
+    const [labelText, setLabelText] = useState(null);
     const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;
-    const labelAndInfo = (_jsxs(_Fragment, { children: [_jsx(Label, { "data-testid": testIds.label, id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
+    const labelContent = (_jsxs(_Fragment, { children: [_jsx(Label, { "data-testid": testIds.label, id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
                     if (readOnly)
                         e.preventDefault();
-                }, inline: inline, children: label }), showAdditionalInfo && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, children: additionalInfo.content }))] }));
-    const labelRow = showAdditionalInfo && !isRadioCheck ? (_jsx(Flex, { as: StyledLabelRow, container: { justify: 'between', alignItems: 'end' }, item: { alignSelf: 'stretch' }, children: labelAndInfo })) : (labelAndInfo);
-    // We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.
-    // This is to ensure screen readers will announce info on errors when role is set to alert.
-    // Needs testing to confirm. Currently the expected sequence would be:
-    // - FormField renders with no error and no info
-    // - user input triggers an error status
-    // - props passed set error status and provide info text
-    // - effect runs and sets live region state which renders and is announced
-    const [liveRegionInfo, setLiveRegionInfo] = useState(null);
+                }, inline: inline, ref: labelRef, children: label }), required && !labelHidden && (_jsx(StyledRequiredAsterisk, { "aria-hidden": true, children: "\u00A0*" })), showAdditionalInfo && labelText && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, contextualLabel: labelText, children: additionalInfo.content }))] }));
+    const labelRow = !isRadioCheck && !labelAsLegend ? (_jsx(Flex, { as: StyledLabelRow, container: { justify: 'between', alignItems: 'end' }, item: { alignSelf: 'stretch' }, children: labelContent })) : (labelContent);
     useEffect(() => {
-        setLiveRegionInfo(info);
-    }, [info]);
+        setLabelText(labelRef.current?.textContent ?? null);
+    }, [label]);
+    useEffect(() => {
+        if (status === 'error' || status === 'warning') {
+            let message = `${t(status)} ${info}`;
+            if (labelRef.current?.textContent)
+                message = `${labelRef.current?.textContent} ${message}`;
+            announceAssertive({ message, type: status });
+        }
+    }, [status, info]);
     // fieldset or single form control element
     let content = labelAsLegend
         ? controlElement
@@ -149,11 +184,7 @@ const FormField = forwardRef(function FormField(props, ref) {
     if (actions) {
         content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 })] }));
     }
-    let infoContent = (
-    // Region for additional info, help or error message.
-    // Withholding aria-live="assertive" to avoid iOS issue. See below.
-    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles
-    _jsxs(Flex, { "data-testid": testIds.info, status: status, role: status === 'error' || status === 'warning' ? 'alert' : undefined, as: StyledFormFieldInfo, container: { alignItems: 'center' }, children: [status && status !== 'pending' && typeof label === 'string' && (_jsx(VisuallyHiddenText, { "aria-hidden": true, children: label })), _jsxs(StyledInfo, { id: `${id}-info`, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: ` ${t(status)} ` })] })), liveRegionInfo] })] }));
+    let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center' }, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
     if (charLimitDisplay) {
         infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay })] }));
     }
@@ -180,7 +211,7 @@ const FormField = forwardRef(function FormField(props, ref) {
             direction: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : undefined,
             ...container
-        }, as: StyledFormField, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: consolidatedRef, children: [(labelAsLegend || !labelAfter) && labelRow, content, !labelAsLegend && labelAfter && labelRow, !readOnly && infoContent] }));
+        }, as: StyledFormField, labelAsLegend: labelAsLegend, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: consolidatedRef, children: [(labelAsLegend || !labelAfter) && labelRow, content, !labelAsLegend && labelAfter && labelRow, !readOnly && infoContent] }));
 });
 export default withTestIds(FormField, getFormFieldTestIds);
 //# sourceMappingURL=FormField.js.map

package/lib/components/FormField/FormField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n ReactNode,\n ComponentType,\n cloneElement,\n ReactElement,\n useEffect,\n useState,\n PropsWithoutRef,\n forwardRef,\n Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo from '../AdditionalInfo';\n\nimport { getFormFieldTestIds, elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' \| 'value' \| 'defaultValue'>,\n TestIdProp<typeof elements> {\n /** Pass a single form control component i.e. Input \| TextArea \| Select \| etc.. /\n children: ReactElement \| ReactElement[];\n /\n An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n /\n id?: string;\n /\n Determines how the wrapping label should be rendered.\n * @default 'label'\n /\n labelAs?: LabelProps['as'];\n /\n Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n /\n labelFor?: LabelProps['htmlFor'];\n /\n Sets the id of the label.\n * @default undefined\n /\n labelId?: LabelProps['id'];\n /\n Visually hides the label region.\n * @default false\n /\n labelHidden?: boolean;\n /\n Visually places the label after the input.\n * @default false\n /\n labelAfter?: boolean;\n /\n Property used to check whether input type is radio to handle styling for RadioCheck\n * @default false\n /\n isRadioCheck?: boolean;\n /\n Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default 'div'\n /\n as?: 'div' \| 'fieldset' \| ComponentType<any>;\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: boolean;\n /* Optionally utilized by Input or Select. /\n actions?: Action[];\n /* Enables Flex container prop pass through. /\n container?: ExcludeStrict<FlexProps['container'], true>;\n /* Character remaining count. Typically used on Textareas only /\n charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n ({ theme, status }) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${theme.components['form-field'][status]['status-color']};\n vertical-align: baseline;\n margin-inline-end: 0.5ch;\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n ({\n status,\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n }\n }) => {\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n max-width: max-content;\n margin-top: calc(0.25 ${spacing});\n font-size: ${infoFontSize};\n word-break: break-word;\n ${status &&\n formField[status] &&\n css`\n color: ${formField[status]['status-color']};\n `}\n `;\n }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nconst StyledLabelRow = styled.div``;\n\nexport const StyledFormField = styled.div<FormFieldProps>(props => {\n const {\n disabled,\n required,\n theme: {\n base: {\n palette: { urgent },\n 'disabled-opacity': disabledOpacity,\n spacing\n }\n }\n } = props;\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n > ${StyledLabel}, > ${StyledLabelRow} {\n margin-bottom: calc(0.25 * ${spacing});\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n &::after {\n display: ${required ? 'inline' : 'none'};\n content: '\\\\00a0';\n vertical-align: top;\n color: ${urgent};\n }\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n ({\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': baseRadius,\n spacing\n },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n 'form-field': formField\n }\n }\n }) => {\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = formField.pending['status-color'];\n const hoverColors = getHoverColors(backgroundColor);\n const color = tryCatch(() => readableColor(backgroundColor));\n const borderColor = color ? rgba(color, 0.4) : color;\n\n return css`\n background-color: ${backgroundColor};\n color: ${color};\n font-size: ${buttonFontSize};\n min-width: calc(3 ${spacing});\n min-height: calc(3 * ${spacing});\n padding: 0 ${spacing};\n border-radius: 0;\n border: none;\n &:first-child {\n border-inline-end: ${borderWidth} solid ${borderColor};\n border-end-start-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: calc(2 * ${spacing});\n }\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\n &:hover {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n\n @media (pointer: coarse) {\n min-height: 2rem;\n }\n `;\n }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst StyledInfo = styled.span`\n display: contents;\n`;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n props: PropsWithoutRef<FormFieldProps>,\n ref: Ref<HTMLElement>\n) {\n const uid = useUID();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs = 'label',\n labelFor = id,\n labelId,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = false,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const t = useI18n();\n const labelAsLegend: boolean = labelAs === 'legend';\n const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n const consolidatedRef = useConsolidatedRef(ref);\n\n const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n\n const labelAndInfo = (\n <>\n <Label\n data-testid={testIds.label}\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={inline}\n >\n {label}\n </Label>\n {showAdditionalInfo && (\n <AdditionalInfo data-testid={testIds.additionalInfo} heading={additionalInfo.heading}>\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </>\n );\n\n const labelRow =\n showAdditionalInfo && !isRadioCheck ? (\n <Flex\n as={StyledLabelRow}\n container={{ justify: 'between', alignItems: 'end' }}\n item={{ alignSelf: 'stretch' }}\n >\n {labelAndInfo}\n </Flex>\n ) : (\n labelAndInfo\n );\n\n // We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n // This is to ensure screen readers will announce info on errors when role is set to alert.\n // Needs testing to confirm. Currently the expected sequence would be:\n // - FormField renders with no error and no info\n // - user input triggers an error status\n // - props passed set error status and provide info text\n // - effect runs and sets live region state which renders and is announced\n const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n useEffect(() => {\n setLiveRegionInfo(info);\n }, [info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'] = labelAsLegend\n ? controlElement\n : cloneElement(controlElement as ReactElement, {\n 'aria-describedby': info && `${id}-info`\n });\n\n if (actions) {\n content = (\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = (\n // Region for additional info, help or error message.\n // Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n <Flex\n data-testid={testIds.info}\n status={status}\n role={status === 'error' \|\| status === 'warning' ? 'alert' : undefined}\n as={StyledFormFieldInfo}\n container={{ alignItems: 'center' }}\n >\n {status && status !== 'pending' && typeof label === 'string' && (\n <VisuallyHiddenText aria-hidden>{label}</VisuallyHiddenText>\n )}\n <StyledInfo id={`${id}-info`}>\n {status && status !== 'pending' && (\n <>\n <StyledStatusIcon status={status} name={statusIconMap[status]} />\n <VisuallyHiddenText>{` ${t(status)} `}</VisuallyHiddenText>\n </>\n )}\n {liveRegionInfo}\n </StyledInfo>\n </Flex>\n );\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n if (hasSuggestion) {\n const focusables = getFocusables(consolidatedRef);\n infoContent = (\n <Flex container={{ alignItems: 'start', justify: 'between' }}>\n <StyledFormFieldInfo data-testid={testIds.info} status={status} id={`${id}-info`}>\n {t('suggestion_info')}\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\n <Flex container={{ wrap: 'nowrap' }}>\n <StyledSuggestionButton\n data-testid={testIds.suggestionReject}\n onClick={() => {\n onResolveSuggestion(false);\n focusables[0]?.focus();\n }}\n aria-label={t('reject_suggestion_button_a11y')}\n >\n {t('no')}\n </StyledSuggestionButton>\n <StyledSuggestionButton\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n onResolveSuggestion(true);\n focusables[0]?.focus();\n }}\n aria-label={t('accept_suggestion_button_a11y')}\n >\n {t('yes')}\n </StyledSuggestionButton>\n </Flex>\n </Flex>\n );\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n const target = e.target as HTMLElement;\n if (!target.closest('button')) {\n e.preventDefault();\n onResolveSuggestion?.(true);\n }\n }\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{\n direction: inline ? 'row' : 'column',\n alignItems: inline ? 'center' : undefined,\n ...container\n }}\n as={StyledFormField}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onKeyDown={hasSuggestion ? onKeyDown : undefined}\n aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n ref={consolidatedRef}\n >\n {(labelAsLegend \|\| !labelAfter) && labelRow}\n {content}\n {!labelAsLegend && labelAfter && labelRow}\n {!readOnly && infoContent}\n </Flex>\n );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}
1	+ {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cloneElement, useEffect, forwardRef, useState, useRef } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport {\n useConsolidatedRef,\n useDirection,\n useI18n,\n useLiveLog,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' \| 'value' \| 'defaultValue'>,\n TestIdProp<typeof elements> {\n /** Pass a single form control component i.e. Input \| TextArea \| Select \| etc.. /\n children: ReactElement \| ReactElement[];\n /\n An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n /\n id?: string;\n /\n Determines how the wrapping label should be rendered.\n * @default 'label'\n /\n labelAs?: LabelProps['as'];\n /\n Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n /\n labelFor?: LabelProps['htmlFor'];\n /\n Sets the id of the label.\n * @default undefined\n /\n labelId?: LabelProps['id'];\n /\n Visually hides the label region.\n * @default false\n /\n labelHidden?: boolean;\n /\n Visually places the label after the input.\n * @default false\n /\n labelAfter?: boolean;\n /\n Property used to check whether input type is radio to handle styling for RadioCheck\n * @default false\n /\n isRadioCheck?: boolean;\n /\n Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default 'div'\n /\n as?: 'div' \| 'fieldset' \| ComponentType<any>;\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: boolean;\n /* Optionally utilized by Input or Select. /\n actions?: Action[];\n /* Enables Flex container prop pass through. /\n container?: ExcludeStrict<FlexProps['container'], true>;\n /* Character remaining count. Typically used on Textareas only /\n charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n ({ theme, status }) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${theme.components['form-field'][status]['status-color']};\n vertical-align: baseline;\n margin-inline-end: 0.5ch;\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n ({\n status,\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n }\n }) => {\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n max-width: max-content;\n margin-top: calc(0.25 ${spacing});\n font-size: ${infoFontSize};\n word-break: break-word;\n ${status &&\n formField[status] &&\n css`\n color: ${formField[status]['status-color']};\n `}\n `;\n }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nconst StyledRequiredAsterisk = styled.span(({ theme }) => {\n const {\n base: {\n palette: { urgent }\n }\n } = theme;\n\n return css`\n vertical-align: top;\n color: ${urgent};\n `;\n});\n\nStyledRequiredAsterisk.defaultProps = defaultThemeProp;\n\nconst StyledLabelRow = styled.div`\n ${StyledRequiredAsterisk} {\n margin-inline-end: auto;\n }\n`;\n\nexport const StyledFormField = styled.div<\n FormFieldProps & { labelAsLegend: boolean; showAdditionalInfo: boolean }\n>(props => {\n const {\n labelAsLegend,\n showAdditionalInfo,\n disabled,\n required,\n theme: {\n base: { 'disabled-opacity': disabledOpacity, spacing }\n }\n } = props;\n const { ltr } = useDirection();\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n > ${StyledLabel}, > ${StyledLabelRow} {\n margin-bottom: calc(0.25 * ${spacing});\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n\n ${labelAsLegend &&\n (showAdditionalInfo \|\| required) &&\n css`\n display: block;\n\n > legend {\n float: ${ltr ? 'left' : 'right'};\n }\n\n > ${StyledRequiredAsterisk} {\n float: ${ltr ? 'left' : 'right'};\n\n ${!showAdditionalInfo &&\n css`\n + * {\n clear: both;\n }\n `}\n }\n\n > ${StyledAdditionalInfo} {\n float: ${ltr ? 'right' : 'left'};\n\n + * {\n clear: both;\n }\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n ({\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': baseRadius,\n spacing\n },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n 'form-field': formField\n }\n }\n }) => {\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = formField.pending['status-color'];\n const hoverColors = getHoverColors(backgroundColor);\n const color = tryCatch(() => readableColor(backgroundColor));\n const borderColor = color ? rgba(color, 0.4) : color;\n\n return css`\n background-color: ${backgroundColor};\n color: ${color};\n font-size: ${buttonFontSize};\n min-width: calc(3 * ${spacing});\n min-height: calc(3 * ${spacing});\n padding: 0 ${spacing};\n border-radius: 0;\n border: none;\n &:first-child {\n border-inline-end: ${borderWidth} solid ${borderColor};\n border-end-start-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: calc(2 * ${spacing});\n }\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\n &:hover {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n\n @media (pointer: coarse) {\n min-height: 2rem;\n }\n `;\n }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n props: PropsWithoutRef<FormFieldProps>,\n ref: Ref<HTMLElement>\n) {\n const uid = useUID();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs = 'label',\n labelFor = id,\n labelId,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = false,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const labelAsLegend: boolean = labelAs === 'legend';\n const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n const consolidatedRef = useConsolidatedRef(ref);\n const labelRef = useRef<HTMLLabelElement \| HTMLLegendElement>(null);\n const [labelText, setLabelText] = useState<string \| null>(null);\n\n const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n\n const labelContent = (\n <>\n <Label\n data-testid={testIds.label}\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={inline}\n ref={labelRef}\n >\n {label}\n </Label>\n\n {required && !labelHidden && (\n <StyledRequiredAsterisk aria-hidden> *</StyledRequiredAsterisk>\n )}\n\n {showAdditionalInfo && labelText && (\n <AdditionalInfo\n data-testid={testIds.additionalInfo}\n heading={additionalInfo.heading}\n contextualLabel={labelText}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </>\n );\n\n const labelRow =\n !isRadioCheck && !labelAsLegend ? (\n <Flex\n as={StyledLabelRow}\n container={{ justify: 'between', alignItems: 'end' }}\n item={{ alignSelf: 'stretch' }}\n >\n {labelContent}\n </Flex>\n ) : (\n labelContent\n );\n\n useEffect(() => {\n setLabelText(labelRef.current?.textContent ?? null);\n }, [label]);\n\n useEffect(() => {\n if (status === 'error' \|\| status === 'warning') {\n let message = `${t(status)} ${info}`;\n if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n announceAssertive({ message, type: status });\n }\n }, [status, info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'] = labelAsLegend\n ? controlElement\n : cloneElement(controlElement as ReactElement, {\n 'aria-describedby': info && `${id}-info`\n });\n\n if (actions) {\n content = (\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = (\n <Flex\n id={`${id}-info`}\n data-testid={testIds.info}\n status={status}\n as={StyledFormFieldInfo}\n container={{ alignItems: 'center' }}\n >\n {status && status !== 'pending' && (\n <>\n <StyledStatusIcon status={status} name={statusIconMap[status]} />\n <VisuallyHiddenText>{`${t(status)} `}</VisuallyHiddenText>\n </>\n )}\n {info}\n </Flex>\n );\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n if (hasSuggestion) {\n const focusables = getFocusables(consolidatedRef);\n infoContent = (\n <Flex container={{ alignItems: 'start', justify: 'between' }}>\n <StyledFormFieldInfo data-testid={testIds.info} status={status} id={`${id}-info`}>\n {t('suggestion_info')}\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\n <Flex container={{ wrap: 'nowrap' }}>\n <StyledSuggestionButton\n data-testid={testIds.suggestionReject}\n onClick={() => {\n onResolveSuggestion(false);\n focusables[0]?.focus();\n }}\n aria-label={t('reject_suggestion_button_a11y')}\n >\n {t('no')}\n </StyledSuggestionButton>\n <StyledSuggestionButton\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n onResolveSuggestion(true);\n focusables[0]?.focus();\n }}\n aria-label={t('accept_suggestion_button_a11y')}\n >\n {t('yes')}\n </StyledSuggestionButton>\n </Flex>\n </Flex>\n );\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n const target = e.target as HTMLElement;\n if (!target.closest('button')) {\n e.preventDefault();\n onResolveSuggestion?.(true);\n }\n }\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{\n direction: inline ? 'row' : 'column',\n alignItems: inline ? 'center' : undefined,\n ...container\n }}\n as={StyledFormField}\n labelAsLegend={labelAsLegend}\n showAdditionalInfo={showAdditionalInfo}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onKeyDown={hasSuggestion ? onKeyDown : undefined}\n aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n ref={consolidatedRef}\n >\n {(labelAsLegend \|\| !labelAfter) && labelRow}\n {content}\n {!labelAsLegend && labelAfter && labelRow}\n {!readOnly && infoContent}\n </Flex>\n );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}

package/lib/components/Grid/Grid.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '../../types';
-import GridProps from './Grid.types';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '../../types';
+import type GridProps from './Grid.types';
 export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & GridProps, never>;
 declare const Grid: FunctionComponent<GridProps & ForwardProps>;
 export default Grid;

package/lib/components/Grid/Grid.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,~~EAAc~~,iBAAiB,EAAmB,MAAM,OAAO,CAAC;~~AAGvE~~,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;~~AAG3C~~,OAAO,SAAS,MAAM,cAAc,CAAC;~~AAwLrC~~,eAAO,MAAM,UAAU,qHAqCtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAKpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAwL1C,eAAO,MAAM,UAAU,qHAqCtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAKpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Grid/Grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,~~EAAsC~~,MAAM,OAAO,CAAC;~~AACvE~~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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport GridProps from './Grid.types';\n\nconst prefix = (value: string) => {\n if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n return value;\n};\n\nconst getContainerStyles = (gridProps: GridProps['container']) => {\n if (!gridProps) return;\n\n if (gridProps === true) {\n return css`\n display: grid;\n `;\n }\n\n const {\n inline,\n pad,\n cols,\n autoCols,\n rows,\n autoRows,\n autoFlow,\n areas,\n template,\n colGap,\n rowGap,\n gap,\n justifyItems,\n justifyContent,\n alignItems,\n alignContent\n } = gridProps;\n\n return css`\n display: ${inline ? 'inline-grid' : 'grid'};\n\n ${pad !== undefined &&\n css`\n padding: ${({\n theme: {\n base: { spacing }\n }\n }) => (Array.isArray(pad) ? pad : [pad]).map(p => `calc(${p} * ${spacing})`).join(' ')};\n `}\n\n ${cols &&\n css`\n grid-template-columns: ${cols};\n `}\n\n ${autoCols &&\n css`\n grid-auto-columns: ${autoCols};\n `}\n\n ${rows &&\n css`\n grid-template-rows: ${rows};\n `}\n\n ${autoRows &&\n css`\n grid-auto-rows: ${autoRows};\n `}\n\n ${autoFlow &&\n css`\n grid-auto-flow: ${autoFlow};\n `}\n\n ${areas &&\n css`\n grid-template-areas: ${areas};\n `}\n\n ${template &&\n css`\n grid-template: ${template};\n `}\n\n ${gap !== undefined &&\n css`\n gap: calc(${gap} * ${props => props.theme.base.spacing});\n `}\n\n ${colGap !== undefined &&\n css`\n column-gap: calc(${colGap} * ${props => props.theme.base.spacing});\n `}\n\n ${rowGap !== undefined &&\n css`\n row-gap: calc(${rowGap} * ${props => props.theme.base.spacing});\n `}\n\n ${justifyItems &&\n css`\n justify-items: ${justifyItems};\n `}\n\n ${justifyContent &&\n css`\n justify-content: ${prefix(justifyContent)};\n `}\n\n ${alignItems &&\n css`\n align-items: ${alignItems};\n `}\n\n ${alignContent &&\n css`\n align-content: ${prefix(alignContent)};\n `}\n `;\n};\n\nconst getItemStyles = (props: GridProps['item']) => {\n if (!props) return;\n\n const {\n colStart,\n colEnd,\n colStartEnd,\n rowStart,\n rowEnd,\n rowStartEnd,\n area,\n justifySelf,\n alignSelf\n } = props;\n\n return css`\n ${colStart &&\n css`\n grid-column-start: ${colStart};\n `}\n\n ${colEnd &&\n css`\n grid-column-end: ${colEnd};\n `}\n\n ${colStartEnd &&\n css`\n grid-column: ${colStartEnd};\n `}\n\n ${rowStart &&\n css`\n grid-row-start: ${rowStart};\n `}\n\n ${rowEnd &&\n css`\n grid-row-end: ${rowEnd};\n `}\n\n ${rowStartEnd &&\n css`\n grid-row: ${rowStartEnd};\n `}\n\n ${area &&\n css`\n grid-area: ${area};\n `}\n\n ${justifySelf &&\n css`\n justify-self: ${justifySelf};\n `}\n\n ${alignSelf &&\n css`\n align-self: ${alignSelf};\n `}\n `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledGrid = styled.div<GridProps>(\n ({\n container,\n item,\n theme: {\n base: { breakpoints: themeBreakpoints }\n },\n xs,\n sm,\n md,\n lg,\n xl\n }) => {\n const breakpoints = {\n xs,\n sm,\n md,\n lg,\n xl\n };\n\n return css`\n ${getContainerStyles(container)}\n ${getItemStyles(item)}\n\n ${breakpointOrder.map(\n breakpoint =>\n breakpoints[breakpoint] &&\n css`\n @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n ${getContainerStyles(breakpoints[breakpoint]?.container)}\n ${getItemStyles(breakpoints[breakpoint]?.item)}\n }\n `\n )}\n `;\n }\n);\n\nStyledGrid.defaultProps = defaultThemeProp;\n\nconst Grid: FunctionComponent<GridProps & ForwardProps> = forwardRef(function Grid(\n props: PropsWithoutRef<GridProps>,\n ref: GridProps['ref']\n) {\n return <StyledGrid {...props} ref={ref} />;\n});\n\nexport default Grid;\n"]}
1	+ {"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport type GridProps from './Grid.types';\n\nconst prefix = (value: string) => {\n if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n return value;\n};\n\nconst getContainerStyles = (gridProps: GridProps['container']) => {\n if (!gridProps) return;\n\n if (gridProps === true) {\n return css`\n display: grid;\n `;\n }\n\n const {\n inline,\n pad,\n cols,\n autoCols,\n rows,\n autoRows,\n autoFlow,\n areas,\n template,\n colGap,\n rowGap,\n gap,\n justifyItems,\n justifyContent,\n alignItems,\n alignContent\n } = gridProps;\n\n return css`\n display: ${inline ? 'inline-grid' : 'grid'};\n\n ${pad !== undefined &&\n css`\n padding: ${({\n theme: {\n base: { spacing }\n }\n }) => (Array.isArray(pad) ? pad : [pad]).map(p => `calc(${p} * ${spacing})`).join(' ')};\n `}\n\n ${cols &&\n css`\n grid-template-columns: ${cols};\n `}\n\n ${autoCols &&\n css`\n grid-auto-columns: ${autoCols};\n `}\n\n ${rows &&\n css`\n grid-template-rows: ${rows};\n `}\n\n ${autoRows &&\n css`\n grid-auto-rows: ${autoRows};\n `}\n\n ${autoFlow &&\n css`\n grid-auto-flow: ${autoFlow};\n `}\n\n ${areas &&\n css`\n grid-template-areas: ${areas};\n `}\n\n ${template &&\n css`\n grid-template: ${template};\n `}\n\n ${gap !== undefined &&\n css`\n gap: calc(${gap} * ${props => props.theme.base.spacing});\n `}\n\n ${colGap !== undefined &&\n css`\n column-gap: calc(${colGap} * ${props => props.theme.base.spacing});\n `}\n\n ${rowGap !== undefined &&\n css`\n row-gap: calc(${rowGap} * ${props => props.theme.base.spacing});\n `}\n\n ${justifyItems &&\n css`\n justify-items: ${justifyItems};\n `}\n\n ${justifyContent &&\n css`\n justify-content: ${prefix(justifyContent)};\n `}\n\n ${alignItems &&\n css`\n align-items: ${alignItems};\n `}\n\n ${alignContent &&\n css`\n align-content: ${prefix(alignContent)};\n `}\n `;\n};\n\nconst getItemStyles = (props: GridProps['item']) => {\n if (!props) return;\n\n const {\n colStart,\n colEnd,\n colStartEnd,\n rowStart,\n rowEnd,\n rowStartEnd,\n area,\n justifySelf,\n alignSelf\n } = props;\n\n return css`\n ${colStart &&\n css`\n grid-column-start: ${colStart};\n `}\n\n ${colEnd &&\n css`\n grid-column-end: ${colEnd};\n `}\n\n ${colStartEnd &&\n css`\n grid-column: ${colStartEnd};\n `}\n\n ${rowStart &&\n css`\n grid-row-start: ${rowStart};\n `}\n\n ${rowEnd &&\n css`\n grid-row-end: ${rowEnd};\n `}\n\n ${rowStartEnd &&\n css`\n grid-row: ${rowStartEnd};\n `}\n\n ${area &&\n css`\n grid-area: ${area};\n `}\n\n ${justifySelf &&\n css`\n justify-self: ${justifySelf};\n `}\n\n ${alignSelf &&\n css`\n align-self: ${alignSelf};\n `}\n `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledGrid = styled.div<GridProps>(\n ({\n container,\n item,\n theme: {\n base: { breakpoints: themeBreakpoints }\n },\n xs,\n sm,\n md,\n lg,\n xl\n }) => {\n const breakpoints = {\n xs,\n sm,\n md,\n lg,\n xl\n };\n\n return css`\n ${getContainerStyles(container)}\n ${getItemStyles(item)}\n\n ${breakpointOrder.map(\n breakpoint =>\n breakpoints[breakpoint] &&\n css`\n @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n ${getContainerStyles(breakpoints[breakpoint]?.container)}\n ${getItemStyles(breakpoints[breakpoint]?.item)}\n }\n `\n )}\n `;\n }\n);\n\nStyledGrid.defaultProps = defaultThemeProp;\n\nconst Grid: FunctionComponent<GridProps & ForwardProps> = forwardRef(function Grid(\n props: PropsWithoutRef<GridProps>,\n ref: GridProps['ref']\n) {\n return <StyledGrid {...props} ref={ref} />;\n});\n\nexport default Grid;\n"]}

package/lib/components/Grid/Grid.types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { ReactNode, Ref } from 'react';
-import { BaseProps, AsProp, RequireAtLeastOne } from '../../types';
+import type { ReactNode, Ref } from 'react';
+import type { BaseProps, AsProp, RequireAtLeastOne } from '../../types';
 export interface GridContainerProps {
     /**
      * Display the grid as an inline-grid.
@@ -107,5 +107,5 @@ type GridProps = RequireAtLeastOne<BaseGridProps & BaseProps & AsProp & {
     /** Override props for the grid at extra large screen size. */
     xl?: BreakpointGridProps;
 }, 'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
-export default GridProps;
+export type { GridProps as default };
 //# sourceMappingURL=Grid.types.d.ts.map

package/lib/components/Grid/Grid.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAEvC~~,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;~~AAEnE~~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~~AAEF~~,~~eAAe~~,SAAS,CAAC"}
1	+ {"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Grid/Grid.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Grid.types.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, AsProp, RequireAtLeastOne } from '../../types';\n\nexport interface GridContainerProps {\n /*\n Display the grid as an inline-grid.\n * @default false\n /\n inline?: boolean;\n /* Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. /\n pad?:\n \| number\n \| [topRightBottomLeft: number]\n \| [topBottom: number, rightLeft: number]\n \| [top: number, rightLeft: number, bottom: number]\n \| [top: number, right: number, bottom: number, left: number];\n /* [grid-template-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) /\n cols?: string;\n /* [grid-auto-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) /\n autoCols?: string;\n /* [grid-template-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) /\n rows?: string;\n /* [grid-auto-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) /\n autoRows?: string;\n /* [grid-auto-flow](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-flow) /\n autoFlow?: 'row' \| 'column' \| 'row dense' \| 'column dense';\n /* [grid-template-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas) /\n areas?: string;\n /* [grid-template](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template) /\n template?: string;\n /\n Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n * [column-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)\n /\n colGap?: number;\n /\n Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n * [row-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)\n /\n rowGap?: number;\n /\n Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n * [gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-gap)\n /\n gap?: number;\n /\n [justify-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-items)\n * @default 'stretch'\n /\n justifyItems?: 'start' \| 'end' \| 'center' \| 'stretch';\n /\n [justify-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-content)\n * @default 'start'\n /\n justifyContent?: 'start' \| 'end' \| 'center' \| 'stretch' \| 'around' \| 'between' \| 'evenly';\n /\n [align-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-items)\n * @default 'stretch'\n /\n alignItems?: 'stretch' \| 'start' \| 'end' \| 'center';\n /\n [align-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-content)\n * @default 'start'\n /\n alignContent?: 'start' \| 'end' \| 'center' \| 'stretch' \| 'around' \| 'between' \| 'evenly';\n}\n\nexport interface GridItemProps {\n /* [grid-column-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) /\n colStart?: string;\n /* [grid-column-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) /\n colEnd?: string;\n /* [grid-column](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) /\n colStartEnd?: string;\n /* [grid-row-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) /\n rowStart?: string;\n /* [grid-row-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) /\n rowEnd?: string;\n /* [grid-row](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) /\n rowStartEnd?: string;\n /* [grid-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-area) /\n area?: string;\n /\n [justify-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-self)\n * @default 'stretch'\n /\n justifySelf?: 'start' \| 'end' \| 'center' \| 'stretch';\n /\n [align-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-self)\n * @default 'stretch'\n /\n alignSelf?: 'stretch' \| 'start' \| 'end' \| 'center';\n}\n\nexport interface BaseGridProps {\n /* Creates a [grid container.](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-display) /\n container?: GridContainerProps \| true;\n /* Designate as a Grid item to leverage grid item props. /\n item?: GridItemProps;\n}\n\ntype BreakpointGridProps = RequireAtLeastOne<BaseGridProps, 'container' \| 'item'>;\n\ntype GridProps = RequireAtLeastOne<\n BaseGridProps &\n BaseProps &\n AsProp & {\n /* Any ReactNode to use as grid items. To leverage item based props, use Grid with \"item\" prop. /\n children?: ReactNode;\n /* Ref for the grid element. /\n ref?: Ref<Element>;\n /* Override props for the grid at extra small screen size. /\n xs?: BreakpointGridProps;\n /* Override props for the grid at small screen size. /\n sm?: BreakpointGridProps;\n /* Override props for the grid at medium screen size. /\n md?: BreakpointGridProps;\n /* Override props for the grid at large screen size. /\n lg?: BreakpointGridProps;\n /* Override props for the grid at extra large screen size. */\n xl?: BreakpointGridProps;\n },\n 'container' \| 'item' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'\n>;\n\nexport default ~~GridProps~~;\n"]}
1	+ {"version":3,"file":"Grid.types.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, AsProp, RequireAtLeastOne } from '../../types';\n\nexport interface GridContainerProps {\n /*\n Display the grid as an inline-grid.\n * @default false\n /\n inline?: boolean;\n /* Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. /\n pad?:\n \| number\n \| [topRightBottomLeft: number]\n \| [topBottom: number, rightLeft: number]\n \| [top: number, rightLeft: number, bottom: number]\n \| [top: number, right: number, bottom: number, left: number];\n /* [grid-template-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) /\n cols?: string;\n /* [grid-auto-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) /\n autoCols?: string;\n /* [grid-template-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) /\n rows?: string;\n /* [grid-auto-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) /\n autoRows?: string;\n /* [grid-auto-flow](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-flow) /\n autoFlow?: 'row' \| 'column' \| 'row dense' \| 'column dense';\n /* [grid-template-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas) /\n areas?: string;\n /* [grid-template](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template) /\n template?: string;\n /\n Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n * [column-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)\n /\n colGap?: number;\n /\n Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n * [row-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)\n /\n rowGap?: number;\n /\n Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n * [gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-gap)\n /\n gap?: number;\n /\n [justify-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-items)\n * @default 'stretch'\n /\n justifyItems?: 'start' \| 'end' \| 'center' \| 'stretch';\n /\n [justify-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-content)\n * @default 'start'\n /\n justifyContent?: 'start' \| 'end' \| 'center' \| 'stretch' \| 'around' \| 'between' \| 'evenly';\n /\n [align-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-items)\n * @default 'stretch'\n /\n alignItems?: 'stretch' \| 'start' \| 'end' \| 'center';\n /\n [align-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-content)\n * @default 'start'\n /\n alignContent?: 'start' \| 'end' \| 'center' \| 'stretch' \| 'around' \| 'between' \| 'evenly';\n}\n\nexport interface GridItemProps {\n /* [grid-column-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) /\n colStart?: string;\n /* [grid-column-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) /\n colEnd?: string;\n /* [grid-column](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) /\n colStartEnd?: string;\n /* [grid-row-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) /\n rowStart?: string;\n /* [grid-row-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) /\n rowEnd?: string;\n /* [grid-row](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) /\n rowStartEnd?: string;\n /* [grid-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-area) /\n area?: string;\n /\n [justify-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-self)\n * @default 'stretch'\n /\n justifySelf?: 'start' \| 'end' \| 'center' \| 'stretch';\n /\n [align-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-self)\n * @default 'stretch'\n /\n alignSelf?: 'stretch' \| 'start' \| 'end' \| 'center';\n}\n\nexport interface BaseGridProps {\n /* Creates a [grid container.](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-display) /\n container?: GridContainerProps \| true;\n /* Designate as a Grid item to leverage grid item props. /\n item?: GridItemProps;\n}\n\ntype BreakpointGridProps = RequireAtLeastOne<BaseGridProps, 'container' \| 'item'>;\n\ntype GridProps = RequireAtLeastOne<\n BaseGridProps &\n BaseProps &\n AsProp & {\n /* Any ReactNode to use as grid items. To leverage item based props, use Grid with \"item\" prop. /\n children?: ReactNode;\n /* Ref for the grid element. /\n ref?: Ref<Element>;\n /* Override props for the grid at extra small screen size. /\n xs?: BreakpointGridProps;\n /* Override props for the grid at small screen size. /\n sm?: BreakpointGridProps;\n /* Override props for the grid at medium screen size. /\n md?: BreakpointGridProps;\n /* Override props for the grid at large screen size. /\n lg?: BreakpointGridProps;\n /* Override props for the grid at extra large screen size. */\n xl?: BreakpointGridProps;\n },\n 'container' \| 'item' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'\n>;\n\n// No way to do 'export default type GridProps = ...'\n// eslint-disable-next-line no-restricted-exports\nexport type { GridProps as default };\n"]}

package/lib/components/HTML/HTML.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { FunctionComponent, Ref } from 'react';
-import { DefaultTheme } from 'styled-components';
-import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
-export interface HTMLProps extends BaseProps, NoChildrenProp {
+import type { FunctionComponent, Ref } from 'react';
+import type { DefaultTheme } from 'styled-components';
+import type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
+export interface HTMLProps extends BaseProps, NoChildrenProp, TestIdProp {
     content: string;
     customTags?: string[];
     ref?: Ref<HTMLDivElement>;
@@ -10,6 +10,8 @@ export declare const listStyles: import("styled-components").FlattenSimpleInterp
 export declare const getTableStyles: (theme: DefaultTheme) => import("styled-components").FlattenSimpleInterpolation;
 export declare const getHtmlStyles: (theme: DefaultTheme) => string;
 export declare const StyledHTML: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-declare const HTML: FunctionComponent<HTMLProps & ForwardProps>;
-export default HTML;
+declare const _default: FunctionComponent<HTMLProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+};
+export default _default;
 //# sourceMappingURL=HTML.d.ts.map

package/lib/components/HTML/HTML.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,~~EAEL~~,iBAAiB,~~EAEjB~~,GAAG,~~EAIJ~~,MAAM,OAAO,CAAC;~~AACf~~,~~OAAe~~,~~EAAO~~,YAAY,EAAE,MAAM,mBAAmB,CAAC;~~AAM9D~~,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;~~AAGtE~~,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;~~IAC1D~~,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,wDA2CtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,YAAY,WAwDhD,CAAC;AAEF,eAAO,MAAM,UAAU,~~6EAoBrB~~,CAAC~~;AA0CH~~,~~QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAuBpD,CAAC;AAEH,eAAe,IAAI,CAAC~~"}
1	+ {"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQvF,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,wDA2CtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,YAAY,WAwDhD,CAAC;AAEF,eAAO,MAAM,UAAU,6EAqBrB,CAAC;;;;AA4EH,wBAAiD"}

package/lib/components/HTML/HTML.js CHANGED Viewed

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import dompurify from 'dompurify';
+import createDOMPurify from 'dompurify';
 import { StyledPopover } from '../Popover';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
-import { sameOrigin } from '../../utils';
+import { sameOrigin, withTestIds } from '../../utils';
+import { useTestIds } from '../../hooks';
+import { getHTMLTestIds } from './HTML.test-ids';
+const DOMPurify = createDOMPurify();
 export const listStyles = css `
   ul,
   ol {
@@ -137,6 +140,7 @@ export const StyledHTML = styled.div(({ theme }) => {
     width: 100%;
     overflow-x: auto;
     overflow-wrap: break-word;
+    contain: paint;
     ${getHtmlStyles(theme)}
     ${StyledPopover} ul {
@@ -154,54 +158,58 @@ export const StyledHTML = styled.div(({ theme }) => {
   `;
 });
 StyledHTML.defaultProps = defaultThemeProp;
-const targetBlankSet = new WeakSet();
-dompurify.addHook('beforeSanitizeAttributes', node => {
-    // Can be passed text nodes
-    if (!(node instanceof HTMLElement || node instanceof SVGElement))
-        return;
-    node.removeAttribute('class');
-    if (node.tagName === 'A' &&
-        node.hasAttribute('href') &&
-        node.getAttribute('target') === '_blank') {
-        targetBlankSet.add(node);
-    }
-});
-dompurify.addHook('afterSanitizeAttributes', node => {
-    if (node.tagName === 'A' && node.hasAttribute('href')) {
-        const href = node.getAttribute('href');
-        let fullURL;
-        try {
-            fullURL = new URL(href, window.location.href);
-        }
-        catch (e) {
+if (DOMPurify.isSupported) {
+    const targetBlankSet = new WeakSet();
+    DOMPurify.addHook('beforeSanitizeAttributes', node => {
+        // Can be passed text nodes
+        if (!(node instanceof HTMLElement || node instanceof SVGElement))
             return;
+        node.removeAttribute('class');
+        if (node.tagName === 'A' &&
+            node.hasAttribute('href') &&
+            node.getAttribute('target') === '_blank') {
+            targetBlankSet.add(node);
         }
-        if (!sameOrigin(window.location, fullURL)) {
-            node.setAttribute('target', '_blank');
-            node.setAttribute('rel', 'noopener');
+    });
+    DOMPurify.addHook('afterSanitizeAttributes', node => {
+        if (node.tagName === 'A' && node.hasAttribute('href')) {
+            const href = node.getAttribute('href');
+            let fullURL;
+            try {
+                fullURL = new URL(href, window.location.href);
+            }
+            catch (e) {
+                return;
+            }
+            if (!sameOrigin(window.location, fullURL)) {
+                node.setAttribute('target', '_blank');
+                node.setAttribute('rel', 'noopener');
+            }
+            else if (targetBlankSet.has(node)) {
+                node.setAttribute('target', '_blank');
+                targetBlankSet.delete(node);
+            }
         }
-        else if (targetBlankSet.has(node)) {
-            node.setAttribute('target', '_blank');
-            targetBlankSet.delete(node);
-        }
-    }
-});
-const HTML = forwardRef(function HTML({ content, customTags, ...restProps }, ref) {
+    });
+}
+const HTML = forwardRef(function HTML({ testId, content, customTags, ...restProps }, ref) {
     const [mounted, setMounted] = useState(false);
     const sanitizedHtml = useMemo(() => {
         // Don't render content on the server at all.
-        return mounted
-            ? dompurify.sanitize(content, {
+        return mounted && DOMPurify.isSupported
+            ? DOMPurify.sanitize(content, {
+                FORBID_TAGS: ['style'],
                 CUSTOM_ELEMENT_HANDLING: {
                     tagNameCheck: customTags ? tagName => customTags.includes(tagName) : null
                 }
             })
             : '';
     }, [content, customTags, mounted]);
+    const testIds = useTestIds(testId, getHTMLTestIds);
     useEffect(() => {
         setMounted(true);
     }, []);
-    return (_jsx(StyledHTML, { ...restProps, dangerouslySetInnerHTML: { __html: sanitizedHtml }, ref: ref }));
+    return (_jsx(StyledHTML, { "data-testid": testIds.root, ...restProps, dangerouslySetInnerHTML: { __html: sanitizedHtml }, ref: ref }));
 });
-export default HTML;
+export default withTestIds(HTML, getHTMLTestIds);
 //# sourceMappingURL=HTML.js.map