npm - @pega/cosmos-react-core - Versions diffs - 9.0.0-build.29.15 → 9.0.0-build.29.16 - Mend

@pega/cosmos-react-core 9.0.0-build.29.15 → 9.0.0-build.29.16

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 (15) hide show

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

@@ -70,8 +70,8 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
     /** Suppresses announcements for status changes. */
     suppressAnnouncements?: boolean;
 }
-export declare const StyledFormFieldInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<FormControlProps, "status"> & Pick<FormFieldProps, "inline"> & {
-    $infoAbove?: boolean;
+export declare const StyledFormFieldInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<FormControlProps, "status"> & {
+    infoAbove?: boolean;
 }>> & string;
 export declare const StyledLabelRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     inline: boolean;
@@ -79,6 +79,7 @@ export declare const StyledLabelRow: import("styled-components/dist/types").ISty
 export declare const StyledFormField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FormFieldProps & {
     asFieldset: boolean;
     showAdditionalInfo: boolean;
+    labelInline?: boolean;
 }>> & string;
 declare const _default: FC<FormFieldProps & ForwardProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;~~AAmB3C~~,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAyBD,eAAO,MAAM,mBAAmB;~~iBACqD~~,OAAO;~~YAqC1F~~,CAAC;AAIH,eAAO,MAAM,cAAc;YAAwB,OAAO;YAUxD,CAAC;AAEH,eAAO,MAAM,eAAe;~~gBACK~~,OAAO;~~wBAAsB~~,OAAO;~~YAuEnE~~,CAAC;;;;AAiVH,wBAA2D"}
1	+ {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAkB3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAyBD,eAAO,MAAM,mBAAmB;gBACmB,OAAO;YA6BxD,CAAC;AAIH,eAAO,MAAM,cAAc;YAAwB,OAAO;YAUxD,CAAC;AAEH,eAAO,MAAM,eAAe;gBAEZ,OAAO;wBACC,OAAO;kBACb,OAAO;YAqFvB,CAAC;;;;AAiVH,wBAA2D"}

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

@@ -35,24 +35,16 @@ const StyledClearButton = styled(Button)(({ theme }) => {
   `;
 });
 StyledClearButton.defaultProps = defaultThemeProp;
-export const StyledFormFieldInfo = styled.div(({ status, inline, $infoAbove, theme }) => {
+export const StyledFormFieldInfo = styled.div(({ status, infoAbove, theme }) => {
     const { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { 'form-field': formField } } = theme;
     const fontSizes = calculateFontSize(fontSize, fontScale);
     const infoFontSize = fontSizes.xxs;
-    const labelFontSize = fontSizes[theme.components.text.primary['font-size']];
     return css `
-    max-width: max-content;
     font-size: ${infoFontSize};
     word-break: break-word;
-    ${inline &&
-        css `
-      padding-inline-start: calc(${labelFontSize} / ${infoFontSize} * 14ch);
-      min-width: 100%;
-    `}
     &:not(:empty) {
-      ${$infoAbove
+      ${infoAbove
         ? css `
             margin-block-end: calc(0.25 * ${spacing});
           `
@@ -81,7 +73,7 @@ export const StyledLabelRow = styled.div(({ inline }) => {
     }
 });
 export const StyledFormField = styled.div(props => {
-    const { asFieldset, showAdditionalInfo, disabled, required, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing, 'hit-area': { 'compact-min': hitAreaCompact } } } } = props;
+    const { asFieldset, showAdditionalInfo, disabled, required, labelInline, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing, 'hit-area': { 'compact-min': hitAreaCompact } } } } = props;
     return css `
     ${disabled &&
         css `
@@ -135,6 +127,18 @@ export const StyledFormField = styled.div(props => {
         align-self: flex-start;
       }
     `}
+    ${labelInline &&
+        css `
+      display: grid;
+      grid-template-columns: 14ch 1fr;
+      grid-template-rows: auto 1fr;
+      align-items: start;
+      ${StyledFlex}:has(> ${StyledLabel}), ${StyledFlex}:has(> ${StyledLabelRow}) {
+        grid-row: span 2;
+      }
+    `}
   `;
 });
 StyledFormField.defaultProps = defaultThemeProp;
@@ -193,15 +197,15 @@ const FormField = forwardRef(function FormField(props, ref) {
     const labelRef = useRef(null);
     const [labelText, setLabelText] = useState(null);
     const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;
-    const labelInline = inline && !isRadioCheck;
+    const labelInline = inline && !isRadioCheck && !labelHidden;
     const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;
     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, ref: labelRef, children: label }), showAdditionalInfo && labelText && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, contextualLabel: labelText, children: additionalInfo.content }))] }));
+                }, inline: labelInline, ref: labelRef, children: label }), showAdditionalInfo && labelText && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, contextualLabel: labelText, children: additionalInfo.content }))] }));
     let labelRow;
     if (!isRadioCheck && !asFieldset && !labelHidden) {
-        labelRow = (_jsx(Flex, { as: StyledLabelRow, container: { justify: labelInline ? 'start' : 'between', alignItems: 'end' }, item: { alignSelf: 'stretch', shrink: labelInline ? 0 : undefined }, inline: labelInline, children: labelContent }));
+        labelRow = (_jsx(Flex, { as: StyledLabelRow, container: { justify: labelInline ? 'start' : 'between', alignItems: 'end' }, item: { alignSelf: labelInline ? 'start' : 'stretch', shrink: labelInline ? 0 : undefined }, inline: labelInline, children: labelContent }));
     }
     else if (asFieldset && !labelHidden) {
         labelRow = (_jsx(Flex, { container: {
@@ -241,13 +245,13 @@ const FormField = forwardRef(function FormField(props, ref) {
     if (actions) {
         content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, item: { grow: labelInline ? 1 : undefined }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 })] }));
     }
-    let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center', gap: 0.5 }, inline: labelInline, "$infoAbove": infoAbove, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { alignSelf: 'start' }, as: StyledStatusIcon, status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
+    let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center', gap: 0.5 }, infoAbove: infoAbove, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { alignSelf: 'start' }, as: 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 })] }));
     }
     if (hasSuggestion) {
         const focusables = getFocusables(consolidatedRef);
-        infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, "$infoAbove": infoAbove, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionReject, onClick: () => {
+        infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, infoAbove: infoAbove, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionReject, onClick: () => {
                                 onResolveSuggestion(false);
                                 focusables[0]?.focus();
                             }, "aria-label": `${t('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`, children: t('no') }), _jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionAccept, onClick: () => {
@@ -270,11 +274,11 @@ const FormField = forwardRef(function FormField(props, ref) {
     if (asFieldset && info)
         descriptionIds.push(`${id}-info`);
     return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: {
-            direction: inline ? 'row' : 'column',
-            alignItems: inline ? 'center' : undefined,
+            direction: inline && !labelHidden ? 'row' : 'column',
+            alignItems: inline && !labelHidden ? 'center' : undefined,
             wrap: isRadioCheck || inline ? 'wrap' : undefined,
             ...container
-        }, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, !readOnly && infoAbove && infoContent, content, !asFieldset && labelAfter && labelRow, !readOnly && !infoAbove && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
+        }, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, labelInline: labelInline, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, !readOnly && infoAbove && infoContent, content, !asFieldset && labelAfter && labelRow, !readOnly && !infoAbove && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
                     onClear();
                 }, children: t('clear_selection') }))] }));
 });

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 { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { StyledFlex } from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport {\n calculateFontSize,\n getHoverColors,\n readableColor,\n getReadableStatusColor,\n type FontSize\n} from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\nimport { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, diamondMinusIcon, 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 /* Id of additional describing element. /\n 'aria-describedby'?: string;\n /* Callback invoked when the clear button is clicked. If provided will render the clear button. /\n onClear?: () => void;\n /* Suppresses announcements for status changes. /\n suppressAnnouncements?: boolean;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(({\n theme,\n status\n}) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${getReadableStatusColor(theme, status)};\n vertical-align: baseline;\n `;\n});\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n return css`\n margin-block-start: calc(${theme.base.spacing} / 2);\n align-self: start;\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<\n Pick<FormControlProps, 'status'> & Pick<FormFieldProps, 'inline'> & { $infoAbove?: boolean }\n>(({ status, inline, $infoAbove, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const infoFontSize = fontSizes.xxs;\n const labelFontSize = fontSizes[theme.components.text.primary['font-size'] as FontSize];\n\n return css`\n max-width: max-content;\n font-size: ${infoFontSize};\n word-break: break-word;\n\n ${inline &&\n css`\n padding-inline-start: calc(${labelFontSize} / ${infoFontSize} 14ch);\n min-width: 100%;\n `}\n\n &:not(:empty) {\n ${$infoAbove\n ? css`\n margin-block-end: calc(0.25 * ${spacing});\n `\n : css`\n margin-block-start: calc(0.25 * ${spacing});\n `}\n }\n\n ${status &&\n formField[status] &&\n css`\n color: ${getReadableStatusColor(theme, status)};\n `}\n `;\n});\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.div<{ inline: boolean }>(({ inline }) => {\n if (inline) {\n return css`\n flex-shrink: 0;\n width: 14ch;\n ${StyledAdditionalInfo} {\n align-self: center;\n }\n `;\n }\n});\n\nexport const StyledFormField = styled.div<\n FormFieldProps & { asFieldset: boolean; showAdditionalInfo: boolean }\n>(props => {\n const {\n asFieldset,\n showAdditionalInfo,\n disabled,\n required,\n theme: {\n base: {\n palette: { urgent },\n 'disabled-opacity': disabledOpacity,\n spacing,\n 'hit-area': { 'compact-min': hitAreaCompact }\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 &:has(${StyledRadioCheckInput}:only-of-type) {\n ${StyledFormFieldInfo} {\n min-width: 100%;\n }\n }\n\n ${StyledFlex}:has(${StyledRadioCheck}) {\n flex-shrink: 0;\n }\n\n > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {\n &:not(:empty) {\n margin-bottom: calc(0.25 * ${spacing});\n min-height: ${hitAreaCompact};\n }\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {\n ${required &&\n css`\n &::after {\n content: ${'\"\\\\00a0\" / \"\"'};\n color: ${urgent};\n }\n `}\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n\n ${asFieldset &&\n showAdditionalInfo &&\n css`\n > ${StyledFlex} > ${StyledLabel} {\n display: block;\n }\n\n > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {\n align-self: flex-start;\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(({ theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth }\n }\n } = theme;\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = getReadableStatusColor(theme, 'pending');\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\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\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\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\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', 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 theme = useTheme();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs: labelAsProp = 'label',\n labelFor = id,\n labelId: labelIdProp,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n suppressAnnouncements,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = theme.components['form-field'].layout === 'inline',\n onClear,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n 'aria-describedby': ariaDescribedBy,\n className,\n ...restProps\n } = props;\n\n const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const asFieldset =\n as === 'fieldset' \|\| (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const labelAs = asFieldset ? 'span' : labelAsProp;\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 const labelInline = inline && !isRadioCheck;\n const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;\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 {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 let labelRow: ReactNode;\n if (!isRadioCheck && !asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n as={StyledLabelRow}\n container={{ justify: labelInline ? 'start' : 'between', alignItems: 'end' }}\n item={{ alignSelf: 'stretch', shrink: labelInline ? 0 : undefined }}\n inline={labelInline}\n >\n {labelContent}\n </Flex>\n );\n } else if (asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n container={{\n alignItems: 'end',\n justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined\n }}\n >\n {labelContent}\n </Flex>\n );\n } else {\n labelRow = labelContent;\n }\n\n useEffect(() => {\n setLabelText(labelRef.current?.textContent ?? null);\n }, [label]);\n\n useEffect(() => {\n if (suppressAnnouncements \|\| (status !== 'error' && status !== 'warning')) return;\n\n let message = t(status);\n\n if (typeof info === 'string') message = `${message} ${info}`;\n\n if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n\n announceAssertive({ message, type: status });\n }, [status, info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'];\n if (asFieldset \|\| Children.count(controlElement) > 1) {\n content = controlElement;\n } else {\n const controlElementAriaDescribedBy = Children.only(controlElement).props[\n 'aria-describedby'\n ] as string \| undefined;\n content = cloneElement(controlElement as ReactElement, {\n 'aria-describedby':\n [controlElementAriaDescribedBy, info && !readOnly ? `${id}-info` : undefined]\n .join(' ')\n .trim() \|\| undefined\n });\n }\n\n if (actions) {\n content = (\n <Flex\n container={{ alignItems: 'center', gap: 0.5 }}\n item={{ grow: labelInline ? 1 : undefined }}\n >\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', gap: 0.5 }}\n inline={labelInline}\n $infoAbove={infoAbove}\n >\n {status && status !== 'pending' && (\n <>\n <Flex\n item={{ alignSelf: 'start' }}\n as={StyledStatusIcon}\n status={status}\n name={statusIconMap[status]}\n />\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\n data-testid={testIds.info}\n status={status}\n id={`${id}-info`}\n $infoAbove={infoAbove}\n >\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('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\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('yes')}, ${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\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 const descriptionIds = [];\n if (ariaDescribedBy) descriptionIds.push(ariaDescribedBy);\n if (asFieldset && info) descriptionIds.push(`${id}-info`);\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 wrap: isRadioCheck \|\| inline ? 'wrap' : undefined,\n ...container\n }}\n as={StyledFormField}\n asFieldset={asFieldset}\n isRadioCheck={isRadioCheck}\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={descriptionIds.length ? descriptionIds.join(' ') : undefined}\n aria-labelledby={asFieldset ? labelId : undefined}\n ref={consolidatedRef}\n className={createClassName('form-field', className, { status })}\n >\n {(asFieldset \|\| !labelAfter) && labelRow}\n {!readOnly && infoAbove && infoContent}\n {content}\n {!asFieldset && labelAfter && labelRow}\n {!readOnly && !infoAbove && infoContent}\n {isRadioCheck && onClear && (\n <StyledClearButton\n variant='link'\n onClick={() => {\n onClear();\n }}\n >\n {t('clear_selection')}\n </StyledClearButton>\n )}\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":";AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACpG,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,sBAAsB,EACvB,MAAM,cAAc,CAAC;AACtB,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,gBAAgB,MAAM,kCAAkC,CAAC;AACrE,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,cAAc,EAAE,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAG3D,YAAY,CAAC,aAAa,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;AAuEzD,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAoD,CAAC,EACxF,KAAK,EACL,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;aAGC,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;+BACmB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAE3C,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IACjC,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,EACjE,UAAU,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EACxC,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC;IAEnC,OAAO,GAAG,CAAA;iBACK,YAAY;;;;QAIrB,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;4CAC+B,OAAO;WACxC;QACH,CAAC,CAAC,GAAG,CAAA;8CACiC,OAAO;WAC1C;;;MAGL,MAAM;QACR,SAAS,CAAC,MAAM,CAAC;QACjB,GAAG,CAAA;eACQ,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAC;KAC/C;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,GAAG,CAAA;;;QAGN,oBAAoB;;;KAGvB,CAAC;IACJ,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAMvC,KAAK,CAAC,EAAE;IACR,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,MAAM,EAAE,EACnB,kBAAkB,EAAE,eAAe,EACnC,OAAO,EACP,UAAU,EAAE,EAAE,aAAa,EAAE,cAAc,EAAE,EAC9C,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;MACN,QAAQ;QACV,GAAG,CAAA;iBACU,eAAe;;;KAG3B;;;;YAIO,qBAAqB;QACzB,mBAAmB;;;;;MAKrB,UAAU,QAAQ,gBAAgB;;;;QAIhC,WAAW,OAAO,cAAc,OAAO,UAAU,UAAU,WAAW;;qCAEzC,OAAO;sBACtB,cAAc;;;;QAI5B,WAAW,OAAO,cAAc,MAAM,WAAW,OAAO,UAAU,MAAM,WAAW;QACnF,QAAQ;QACV,GAAG,CAAA;;qBAEY,gBAAgB;mBAClB,MAAM;;OAElB;;QAEC,QAAQ;QACV,GAAG,CAAA;;OAEF;;;MAGD,UAAU;QACZ,kBAAkB;QAClB,GAAG,CAAA;UACG,UAAU,MAAM,WAAW;;;;UAI3B,UAAU,UAAU,WAAW,OAAO,oBAAoB;;;KAG/D;;MAEC,WAAW;QACb,GAAG,CAAA;;;;;;QAMC,UAAU,UAAU,WAAW,MAAM,UAAU,UAAU,cAAc;;;KAG1E;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,OAAO,EAAE,EAC9F,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,EACzE,EACF,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACvE,MAAM,eAAe,GAAG,sBAAsB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,OAAO,GAAG,CAAA;wBACY,eAAe;aAC1B,KAAK;iBACD,cAAc;0BACL,OAAO;2BACN,OAAO;iBACjB,OAAO;;;;;2BAKG,WAAW,UAAU,WAAW;sCACrB,UAAU,MAAM,MAAM;sCACtB,OAAO;;;;oCAIT,UAAU,MAAM,MAAM;;;;;eAK3C,WAAW,CAAC,UAAU;0BACX,WAAW,CAAC,UAAU;;;;;;GAM7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,aAAa,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AAE1F,MAAM,SAAS,GAAsC,UAAU,CAAC,SAAS,SAAS,CAChF,KAAsC,EACtC,GAAqB;IAErB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EACJ,MAAM,EACN,QAAQ,EAAE,cAAc,EACxB,EAAE,GAAG,GAAG,EACR,EAAE,GAAG,KAAK,EACV,KAAK,EACL,OAAO,EAAE,WAAW,GAAG,OAAO,EAC9B,QAAQ,GAAG,EAAE,EACb,OAAO,EAAE,WAAW,EACpB,WAAW,GAAG,KAAK,EACnB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,MAAM,EACN,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,MAAM,KAAK,QAAQ,EAC3D,OAAO,EACP,OAAO,EACP,SAAS,EACT,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAAE,eAAe,EACnC,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,sBAAsB,CAAC,KAAK,OAAO,CAAC;IACrF,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAExD,MAAM,UAAU,GACd,EAAE,KAAK,UAAU,IAAI,CAAC,OAAO,EAAE,KAAK,QAAQ,IAAI,QAAQ,IAAI,EAAE,IAAI,EAAE,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC;IAC9F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC3C,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC;IAClD,MAAM,aAAa,GAAG,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,mBAAmB,CAAC;IACpE,MAAM,eAAe,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IACpE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEhE,MAAM,kBAAkB,GAAG,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,CAAC;IACzE,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC;IAC5D,MAAM,OAAO,GAAG,UAAU,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC;IAEzE,MAAM,YAAY,GAAG,CACnB,8BACE,KAAC,KAAK,mBACS,OAAO,CAAC,KAAK,EAC1B,EAAE,EAAE,OAAO,EACX,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACnD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,IAAI,QAAQ;wBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnC,CAAC,EACD,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,QAAQ,YAEZ,KAAK,GACA,EAEP,kBAAkB,IAAI,SAAS,IAAI,CAClC,KAAC,cAAc,mBACA,OAAO,CAAC,cAAc,EACnC,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,eAAe,EAAE,SAAS,YAEzB,cAAc,CAAC,OAAO,GACR,CAClB,IACA,CACJ,CAAC;IAEF,IAAI,QAAmB,CAAC;IACxB,IAAI,CAAC,YAAY,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,EAAE,CAAC;QACjD,QAAQ,GAAG,CACT,KAAC,IAAI,IACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAC5E,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,EAC3F,MAAM,EAAE,WAAW,YAElB,YAAY,GACR,CACR,CAAC;IACJ,CAAC;SAAM,IAAI,UAAU,IAAI,CAAC,WAAW,EAAE,CAAC;QACtC,QAAQ,GAAG,CACT,KAAC,IAAI,IACH,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK;gBACjB,OAAO,EAAE,kBAAkB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aACrE,YAEA,YAAY,GACR,CACR,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,QAAQ,GAAG,YAAY,CAAC;IAC1B,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,SAAS,CAAC;YAAE,OAAO;QAElF,IAAI,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;QAExB,IAAI,OAAO,IAAI,KAAK,QAAQ;YAAE,OAAO,GAAG,GAAG,OAAO,IAAI,IAAI,EAAE,CAAC;QAE7D,IAAI,QAAQ,CAAC,OAAO,EAAE,WAAW;YAAE,OAAO,GAAG,GAAG,QAAQ,CAAC,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,CAAC;QAE3F,iBAAiB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnB,0CAA0C;IAC1C,IAAI,OAAmC,CAAC;IACxC,IAAI,UAAU,IAAI,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;QACrD,OAAO,GAAG,cAAc,CAAC;IAC3B,CAAC;SAAM,CAAC;QACN,MAAM,6BAA6B,GAAG,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,KAAK,CACvE,kBAAkB,CACG,CAAC;QACxB,OAAO,GAAG,YAAY,CAAC,cAA8B,EAAE;YACrD,kBAAkB,EAChB,CAAC,6BAA6B,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;iBAC1E,IAAI,CAAC,GAAG,CAAC;iBACT,IAAI,EAAE,IAAI,SAAS;SACzB,CAAC,CAAC;IACL,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,GAAG,CACR,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,aAE1C,OAAO,EACR,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,GAAI,IACjC,CACR,CAAC;IACJ,CAAC;IAED,IAAI,WAAW,GAAG,CAChB,MAAC,IAAI,IACH,EAAE,EAAE,GAAG,EAAE,OAAO,iBACH,OAAO,CAAC,IAAI,EACzB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC7C,SAAS,EAAE,SAAS,aAEnB,MAAM,IAAI,MAAM,KAAK,SAAS,IAAI,CACjC,8BACE,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAC5B,EAAE,EAAE,gBAAgB,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,GAC3B,EACF,KAAC,kBAAkB,cAAE,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,GAAsB,IACzD,CACJ,EACA,IAAI,IACA,CACR,CAAC;IAEF,IAAI,gBAAgB,EAAE,CAAC;QACrB,WAAW,GAAG,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,WAAW,EACZ,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,YAAG,gBAAgB,GAAQ,IAC/C,CACR,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,MAAM,UAAU,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;QAClD,WAAW,GAAG,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,aAC1D,MAAC,mBAAmB,mBACL,OAAO,CAAC,IAAI,EACzB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,GAAG,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,aAEnB,CAAC,CAAC,iBAAiB,CAAC,EACrB,KAAC,kBAAkB,iBAAW,QAAQ,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAsB,IAChE,EACtB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,aACjC,KAAC,sBAAsB,mBACR,OAAO,CAAC,gBAAgB,EACrC,OAAO,EAAE,GAAG,EAAE;gCACZ,mBAAmB,CAAC,KAAK,CAAC,CAAC;gCAC3B,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;4BACzB,CAAC,gBACW,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,+BAA+B,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,YAEnG,CAAC,CAAC,IAAI,CAAC,GACe,EACzB,KAAC,sBAAsB,mBACR,OAAO,CAAC,gBAAgB,EACrC,OAAO,EAAE,GAAG,EAAE;gCACZ,mBAAmB,CAAC,IAAI,CAAC,CAAC;gCAC1B,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;4BACzB,CAAC,gBACW,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,+BAA+B,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,YAEpG,CAAC,CAAC,KAAK,CAAC,GACc,IACpB,IACF,CACR,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;YACvC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,mBAAmB,EAAE,CAAC,IAAI,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,IAAI,eAAe;QAAE,cAAc,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC1D,IAAI,UAAU,IAAI,IAAI;QAAE,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1D,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;YACpD,UAAU,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;YACzD,IAAI,EAAE,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YACjD,GAAG,SAAS;SACb,EACD,EAAE,EAAE,eAAe,EACnB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,WAAW,EAAE,EAAE,EACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,sBAC9B,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,qBAC7D,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACjD,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,eAAe,CAAC,YAAY,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,aAE9D,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,IAAI,QAAQ,EACvC,CAAC,QAAQ,IAAI,SAAS,IAAI,WAAW,EACrC,OAAO,EACP,CAAC,UAAU,IAAI,UAAU,IAAI,QAAQ,EACrC,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,WAAW,EACtC,YAAY,IAAI,OAAO,IAAI,CAC1B,KAAC,iBAAiB,IAChB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,CAAC;gBACZ,CAAC,YAEA,CAAC,CAAC,iBAAiB,CAAC,GACH,CACrB,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { StyledFlex } from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport {\n calculateFontSize,\n getHoverColors,\n readableColor,\n getReadableStatusColor\n} from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\nimport { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, diamondMinusIcon, 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 /* Id of additional describing element. /\n 'aria-describedby'?: string;\n /* Callback invoked when the clear button is clicked. If provided will render the clear button. /\n onClear?: () => void;\n /* Suppresses announcements for status changes. /\n suppressAnnouncements?: boolean;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(({\n theme,\n status\n}) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${getReadableStatusColor(theme, status)};\n vertical-align: baseline;\n `;\n});\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n return css`\n margin-block-start: calc(${theme.base.spacing} / 2);\n align-self: start;\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<\n Pick<FormControlProps, 'status'> & { infoAbove?: boolean }\n>(({ status, infoAbove, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const infoFontSize = fontSizes.xxs;\n\n return css`\n font-size: ${infoFontSize};\n word-break: break-word;\n\n &:not(:empty) {\n ${infoAbove\n ? css`\n margin-block-end: calc(0.25 ${spacing});\n `\n : css`\n margin-block-start: calc(0.25 * ${spacing});\n `}\n }\n\n ${status &&\n formField[status] &&\n css`\n color: ${getReadableStatusColor(theme, status)};\n `}\n `;\n});\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.div<{ inline: boolean }>(({ inline }) => {\n if (inline) {\n return css`\n flex-shrink: 0;\n width: 14ch;\n ${StyledAdditionalInfo} {\n align-self: center;\n }\n `;\n }\n});\n\nexport const StyledFormField = styled.div<\n FormFieldProps & {\n asFieldset: boolean;\n showAdditionalInfo: boolean;\n labelInline?: boolean;\n }\n>(props => {\n const {\n asFieldset,\n showAdditionalInfo,\n disabled,\n required,\n labelInline,\n theme: {\n base: {\n palette: { urgent },\n 'disabled-opacity': disabledOpacity,\n spacing,\n 'hit-area': { 'compact-min': hitAreaCompact }\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 &:has(${StyledRadioCheckInput}:only-of-type) {\n ${StyledFormFieldInfo} {\n min-width: 100%;\n }\n }\n\n ${StyledFlex}:has(${StyledRadioCheck}) {\n flex-shrink: 0;\n }\n\n > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {\n &:not(:empty) {\n margin-bottom: calc(0.25 * ${spacing});\n min-height: ${hitAreaCompact};\n }\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {\n ${required &&\n css`\n &::after {\n content: ${'\"\\\\00a0\" / \"\"'};\n color: ${urgent};\n }\n `}\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n\n ${asFieldset &&\n showAdditionalInfo &&\n css`\n > ${StyledFlex} > ${StyledLabel} {\n display: block;\n }\n\n > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {\n align-self: flex-start;\n }\n `}\n\n ${labelInline &&\n css`\n display: grid;\n grid-template-columns: 14ch 1fr;\n grid-template-rows: auto 1fr;\n align-items: start;\n\n ${StyledFlex}:has(> ${StyledLabel}), ${StyledFlex}:has(> ${StyledLabelRow}) {\n grid-row: span 2;\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(({ theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth }\n }\n } = theme;\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = getReadableStatusColor(theme, 'pending');\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\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\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\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\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', 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 theme = useTheme();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs: labelAsProp = 'label',\n labelFor = id,\n labelId: labelIdProp,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n suppressAnnouncements,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = theme.components['form-field'].layout === 'inline',\n onClear,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n 'aria-describedby': ariaDescribedBy,\n className,\n ...restProps\n } = props;\n\n const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const asFieldset =\n as === 'fieldset' \|\| (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const labelAs = asFieldset ? 'span' : labelAsProp;\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 const labelInline = inline && !isRadioCheck && !labelHidden;\n const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;\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={labelInline}\n ref={labelRef}\n >\n {label}\n </Label>\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 let labelRow: ReactNode;\n if (!isRadioCheck && !asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n as={StyledLabelRow}\n container={{ justify: labelInline ? 'start' : 'between', alignItems: 'end' }}\n item={{ alignSelf: labelInline ? 'start' : 'stretch', shrink: labelInline ? 0 : undefined }}\n inline={labelInline}\n >\n {labelContent}\n </Flex>\n );\n } else if (asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n container={{\n alignItems: 'end',\n justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined\n }}\n >\n {labelContent}\n </Flex>\n );\n } else {\n labelRow = labelContent;\n }\n\n useEffect(() => {\n setLabelText(labelRef.current?.textContent ?? null);\n }, [label]);\n\n useEffect(() => {\n if (suppressAnnouncements \|\| (status !== 'error' && status !== 'warning')) return;\n\n let message = t(status);\n\n if (typeof info === 'string') message = `${message} ${info}`;\n\n if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n\n announceAssertive({ message, type: status });\n }, [status, info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'];\n if (asFieldset \|\| Children.count(controlElement) > 1) {\n content = controlElement;\n } else {\n const controlElementAriaDescribedBy = Children.only(controlElement).props[\n 'aria-describedby'\n ] as string \| undefined;\n content = cloneElement(controlElement as ReactElement, {\n 'aria-describedby':\n [controlElementAriaDescribedBy, info && !readOnly ? `${id}-info` : undefined]\n .join(' ')\n .trim() \|\| undefined\n });\n }\n\n if (actions) {\n content = (\n <Flex\n container={{ alignItems: 'center', gap: 0.5 }}\n item={{ grow: labelInline ? 1 : undefined }}\n >\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', gap: 0.5 }}\n infoAbove={infoAbove}\n >\n {status && status !== 'pending' && (\n <>\n <Flex\n item={{ alignSelf: 'start' }}\n as={StyledStatusIcon}\n status={status}\n name={statusIconMap[status]}\n />\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\n data-testid={testIds.info}\n status={status}\n id={`${id}-info`}\n infoAbove={infoAbove}\n >\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('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\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('yes')}, ${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\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 const descriptionIds = [];\n if (ariaDescribedBy) descriptionIds.push(ariaDescribedBy);\n if (asFieldset && info) descriptionIds.push(`${id}-info`);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{\n direction: inline && !labelHidden ? 'row' : 'column',\n alignItems: inline && !labelHidden ? 'center' : undefined,\n wrap: isRadioCheck \|\| inline ? 'wrap' : undefined,\n ...container\n }}\n as={StyledFormField}\n asFieldset={asFieldset}\n isRadioCheck={isRadioCheck}\n showAdditionalInfo={showAdditionalInfo}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n labelInline={labelInline}\n onKeyDown={hasSuggestion ? onKeyDown : undefined}\n aria-describedby={descriptionIds.length ? descriptionIds.join(' ') : undefined}\n aria-labelledby={asFieldset ? labelId : undefined}\n ref={consolidatedRef}\n className={createClassName('form-field', className, { status })}\n >\n {(asFieldset \|\| !labelAfter) && labelRow}\n {!readOnly && infoAbove && infoContent}\n {content}\n {!asFieldset && labelAfter && labelRow}\n {!readOnly && !infoAbove && infoContent}\n {isRadioCheck && onClear && (\n <StyledClearButton\n variant='link'\n onClick={() => {\n onClear();\n }}\n >\n {t('clear_selection')}\n </StyledClearButton>\n )}\n </Flex>\n );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACF,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OAwBhC,CAAC;;;;~~AAkMH~~,wBAAuE"}
1	+ {"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACF,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OAwBhC,CAAC;;;;AA4MH,wBAAuE"}

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

@@ -35,24 +35,32 @@ export const StyledRadioCheckGroup = styled.fieldset(() => {
     }
   `;
 });
+const getCardGridColumns = (cardWidth) => css `
+  @container (min-width: calc(2 * ${cardWidth})) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @container (min-width: calc(3 * ${cardWidth})) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @container (min-width: calc(4 * ${cardWidth})) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`;
 const getCardGridContainerStyles = (theme) => {
-    const cardWidth = theme.base['content-width'].md;
+    const defaultCardWidth = theme.base['content-width'].sm;
+    const inlineImageCardWidth = theme.base['content-width'].md;
     return css `
     display: grid;
     gap: ${theme.base.spacing};
     grid-template-columns: 1fr;
     grid-auto-rows: 1fr;
-    @container (min-width: calc(2 * ${cardWidth})) {
-      grid-template-columns: repeat(2, 1fr);
-    }
-    @container (min-width: calc(3 * ${cardWidth})) {
-      grid-template-columns: repeat(3, 1fr);
-    }
+    ${getCardGridColumns(defaultCardWidth)}
-    @container (min-width: calc(4 * ${cardWidth})) {
-      grid-template-columns: repeat(4, 1fr);
+    &:has(${StyledSelectionCardInline}) {
+      ${getCardGridColumns(inlineImageCardWidth)}
     }
   `;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> & {\n /** Accepts Checkboxes or RadioButtons as children. /\n children: ReactElement \| ReactElement[];\n /\n Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback invoked when the clear button is clicked. If provided will render the clear button. /\n onClear?: FormFieldProps['onClear'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: FormFieldProps['inline'];\n /* Used to toggle the auto stacking feature of an inlined group.\n * @default true\n /\n autoStack?: boolean;\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /\n Controls the styling of the child RadioChecks.\n * @default 'simple'\n /\n variant?: RadioCheckProps['variant'] \| 'card-grid';\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /\n Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n /\n arrowNavigation?: boolean;\n /* Ref forwarded to the wrapping element. /\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(() => {\n return css`\n container-type: inline-size;\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n / To enlarge the image containers to the size of the biggest one /\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n `;\n});\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n const cardWidth = theme.base['content-width'].md;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n\n @container (min-width: calc(2 ${cardWidth})) {\n grid-template-columns: repeat(2, 1fr);\n }\n\n @container (min-width: calc(3 * ${cardWidth})) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @container (min-width: calc(4 * ${cardWidth})) {\n grid-template-columns: repeat(4, 1fr);\n }\n `;\n};\n\nconst StyledCardGrid = styled.div<{\n renderInline: boolean;\n autoStack: boolean;\n childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n if (!renderInline) {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: minmax(min-content, max-content);\n grid-auto-rows: 1fr;\n `;\n }\n\n return autoStack\n ? getCardGridContainerStyles(theme)\n : css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(${childCount}, 1fr);\n grid-auto-rows: 1fr;\n `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(\n () =>\n Children.map(children, child =>\n cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled \|\| child.props.disabled,\n readOnly: readOnly \|\| child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly \|\| child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n })\n ),\n [children, name, disabled, readOnly, variant, onChange]\n );\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n inline={false}\n isRadioCheck\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) \|\| !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {variant === 'card-grid' ? (\n <StyledCardGrid\n ref={setOptionsEl}\n renderInline={renderInline}\n autoStack={autoStack}\n childCount={Children.count(children)}\n >\n {mapChildren}\n </StyledCardGrid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n )}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
1	+ {"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> & {\n /** Accepts Checkboxes or RadioButtons as children. /\n children: ReactElement \| ReactElement[];\n /\n Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback invoked when the clear button is clicked. If provided will render the clear button. /\n onClear?: FormFieldProps['onClear'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: FormFieldProps['inline'];\n /* Used to toggle the auto stacking feature of an inlined group.\n * @default true\n /\n autoStack?: boolean;\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /\n Controls the styling of the child RadioChecks.\n * @default 'simple'\n /\n variant?: RadioCheckProps['variant'] \| 'card-grid';\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /\n Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n /\n arrowNavigation?: boolean;\n /* Ref forwarded to the wrapping element. /\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(() => {\n return css`\n container-type: inline-size;\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n / To enlarge the image containers to the size of the biggest one /\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n `;\n});\n\nconst getCardGridColumns = (cardWidth: string) => css`\n @container (min-width: calc(2 ${cardWidth})) {\n grid-template-columns: repeat(2, 1fr);\n }\n\n @container (min-width: calc(3 * ${cardWidth})) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @container (min-width: calc(4 * ${cardWidth})) {\n grid-template-columns: repeat(4, 1fr);\n }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n const defaultCardWidth = theme.base['content-width'].sm;\n const inlineImageCardWidth = theme.base['content-width'].md;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n\n ${getCardGridColumns(defaultCardWidth)}\n\n &:has(${StyledSelectionCardInline}) {\n ${getCardGridColumns(inlineImageCardWidth)}\n }\n `;\n};\n\nconst StyledCardGrid = styled.div<{\n renderInline: boolean;\n autoStack: boolean;\n childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n if (!renderInline) {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: minmax(min-content, max-content);\n grid-auto-rows: 1fr;\n `;\n }\n\n return autoStack\n ? getCardGridContainerStyles(theme)\n : css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(${childCount}, 1fr);\n grid-auto-rows: 1fr;\n `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(\n () =>\n Children.map(children, child =>\n cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled \|\| child.props.disabled,\n readOnly: readOnly \|\| child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly \|\| child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n })\n ),\n [children, name, disabled, readOnly, variant, onChange]\n );\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n inline={false}\n isRadioCheck\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) \|\| !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {variant === 'card-grid' ? (\n <StyledCardGrid\n ref={setOptionsEl}\n renderInline={renderInline}\n autoStack={autoStack}\n childCount={Children.count(children)}\n >\n {mapChildren}\n </StyledCardGrid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n )}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAIF,kBAAkB,EAElB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CACjD;;;;~~AAwMD~~,wBAAyD"}
1	+ {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAIF,kBAAkB,EAElB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CACjD;;;;AA+ND,wBAAyD"}

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState, useEffect, useRef } from 'react';
+import { forwardRef, useCallback, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import { hasProp, withTestIds } from '../../utils';
 import { useConsolidatedRef, useElement, useI18n, useLiveLog, useTestIds, useUID } from '../../hooks';
 import Text from '../Text';
 import VisuallyHiddenText from '../VisuallyHiddenText';
-import StyledTextArea from './TextArea.styles';
+import StyledTextArea, { textAreaMaxHeight } from './TextArea.styles';
 import { getTextAreaTestIds } from './TextArea.test-ids';
 const warnCharCount = 30;
 const TextArea = forwardRef(function TextArea(props, ref) {
@@ -19,6 +19,7 @@ const TextArea = forwardRef(function TextArea(props, ref) {
     const [textAreaEl, setTextAreaEl] = useElement();
     const textAreaRef = useConsolidatedRef(ref, setTextAreaEl);
     const prevHeightRef = useRef(0);
+    const heightPxRef = useRef(0);
     const focusTimeoutRef = useRef(NaN);
     const { announceAssertive } = useLiveLog();
     const controlProp = {};
@@ -53,6 +54,12 @@ const TextArea = forwardRef(function TextArea(props, ref) {
     const recalculateHeight = useCallback(() => {
         if (!textAreaRef.current)
             return;
+        const baseHeightPx = heightPxRef.current;
+        const currentHeight = parseFloat(getComputedStyle(textAreaRef.current).getPropertyValue('--textarea-height'));
+        textAreaRef.current.style.marginBlockEnd =
+            currentHeight > baseHeightPx
+                ? `calc(min(${textAreaMaxHeight}, ${currentHeight}px) - ${baseHeightPx}px)`
+                : '0';
         textAreaRef.current.style.setProperty('--textarea-height', 'auto');
         // Remove scrollbar width to avoid interference with calculation.
         textAreaRef.current.style.setProperty('scrollbar-width', 'none');
@@ -60,8 +67,14 @@ const TextArea = forwardRef(function TextArea(props, ref) {
         const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;
         // Set height to auto then scrollHeight + borderWidth to resize TextArea to content
         textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);
+        textAreaRef.current.style.removeProperty('margin-block-end');
         textAreaRef.current.style.removeProperty('scrollbar-width');
     }, []);
+    useLayoutEffect(() => {
+        if (!textAreaRef.current)
+            return;
+        heightPxRef.current = textAreaRef.current.offsetHeight;
+    }, [textAreaEl]);
     useEffect(() => {
         if (!textAreaRef.current)
             return;
@@ -80,6 +93,12 @@ const TextArea = forwardRef(function TextArea(props, ref) {
         const observer = new ResizeObserver(entries => {
             const currentHeight = entries[0].contentRect.height;
             if (prevHeightRef.current === 0 && currentHeight > 0) {
+                const textareaHeight = getComputedStyle(textAreaEl)
+                    .getPropertyValue('--textarea-height')
+                    .trim();
+                if (!textareaHeight || textareaHeight === 'auto' || textareaHeight === 'unset') {
+                    heightPxRef.current = textAreaEl.offsetHeight;
+                }
                 recalculateHeight();
             }
             prevHeightRef.current = currentHeight;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useState, useEffect, useRef } from 'react';\nimport type {\n FC,\n Ref,\n PropsWithoutRef,\n ChangeEvent,\n ChangeEventHandler,\n FocusEvent,\n FocusEventHandler\n} from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport {\n useConsolidatedRef,\n useElement,\n useI18n,\n useLiveLog,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledTextArea from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /** Minimum length of characters that can be input. /\n minLength?: number;\n /* Maximum length of characters that can be input. /\n maxLength?: number;\n /\n Allows the user to resize the Text Area. This prop is ignored if autoResize is true.\n * @default false\n /\n resizable?: boolean;\n /\n Enables the Text Area to resize itself automatically.\n * @default true\n /\n autoResize?: boolean;\n /\n Display a live character count in relation to the maxLength.\n * @default false\n /\n displayCharCount?: boolean;\n /\n Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n}\n\nconst warnCharCount = 30;\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(function TextArea(\n props: PropsWithoutRef<TextAreaProps>,\n ref: Ref<HTMLTextAreaElement>\n) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = true,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n onResolveSuggestion,\n ...restProps\n } = props;\n const t = useI18n();\n\n const testIds = useTestIds(testId, getTextAreaTestIds);\n const [charCount, setCharCount] = useState(value?.length ?? defaultValue?.length ?? 0);\n const [focused, setFocused] = useState(false);\n const [textAreaEl, setTextAreaEl] = useElement<HTMLTextAreaElement>();\n const textAreaRef = useConsolidatedRef(ref, setTextAreaEl);\n const prevHeightRef = useRef(0);\n const focusTimeoutRef = useRef(NaN);\n const { announceAssertive } = useLiveLog();\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (maxLength !== undefined) {\n if (e.target.value.length >= maxLength) {\n announceAssertive({ message: t('text_area_character_limit'), type: 'warning' });\n } else if (maxLength > warnCharCount) {\n const prevCharsRemaining = maxLength - charCount;\n const charsRemaining = maxLength - e.target.value.length;\n\n if (charsRemaining < warnCharCount && prevCharsRemaining >= warnCharCount) {\n announceAssertive({\n message: t('text_area_characters_remaining', [`${warnCharCount}`]),\n type: 'warning'\n });\n }\n }\n }\n\n if (!hardStop \|\| maxLength === undefined \|\| e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n }\n },\n [onChangeProp, charCount, hardStop, maxLength, announceAssertive, t]\n );\n\n const recalculateHeight = useCallback(() => {\n if (!textAreaRef.current) return;\n\n textAreaRef.current.style.setProperty('--textarea-height', 'auto');\n\n // Remove scrollbar width to avoid interference with calculation.\n textAreaRef.current.style.setProperty('scrollbar-width', 'none');\n\n const scrollHeight = textAreaRef.current.scrollHeight;\n const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;\n // Set height to auto then scrollHeight + borderWidth to resize TextArea to content\n textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);\n\n textAreaRef.current.style.removeProperty('scrollbar-width');\n }, []);\n\n useEffect(() => {\n if (!textAreaRef.current) return;\n\n if (autoResize) {\n recalculateHeight();\n } else {\n textAreaRef.current.style.removeProperty('--textarea-height');\n }\n }, [value, autoResize, recalculateHeight]);\n\n // Recalculate height when the element becomes visible after being displayed none.\n useEffect(() => {\n if (!textAreaEl \|\| !autoResize) return;\n\n prevHeightRef.current = textAreaEl.offsetHeight;\n\n const observer = new ResizeObserver(entries => {\n const currentHeight = entries[0].contentRect.height;\n if (prevHeightRef.current === 0 && currentHeight > 0) {\n recalculateHeight();\n }\n prevHeightRef.current = currentHeight;\n });\n\n observer.observe(textAreaEl);\n return () => observer.disconnect();\n }, [autoResize, recalculateHeight, textAreaEl]);\n\n useEffect(\n () => () => {\n clearTimeout(focusTimeoutRef.current);\n },\n []\n );\n\n const TextAreaControl = (\n <StyledFormControl\n data-testid={testIds.control}\n ref={textAreaRef}\n id={id}\n aria-describedby={\n // Remove when focused to prevent each change in character count from being announced.\n !focused && displayCharCount && typeof maxLength === 'number'\n ? `${id}-charCount`\n : undefined\n }\n required={required}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n autoResize={autoResize}\n resizable={autoResize ? false : resizable}\n maxLength={hardStop ? maxLength : undefined}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n {...controlProp}\n {...restProps}\n onChange={onChange}\n onFocus={(e: FocusEvent<HTMLTextAreaElement>) => {\n // Need to delay so screen readers will include the character count in announcement on initial focus.\n // Shorter delays did not seem to work.\n focusTimeoutRef.current = window.setTimeout(() => {\n setFocused(true);\n }, 250);\n\n restProps.onFocus?.(e);\n }}\n onBlur={(e: FocusEvent<HTMLTextAreaElement>) => {\n clearTimeout(focusTimeoutRef.current);\n setFocused(false);\n restProps.onBlur?.(e);\n }}\n as={StyledTextArea}\n />\n );\n\n return label \|\| displayCharCount ? (\n <FormField\n testId={testIds}\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n readOnly={readOnly}\n info={info}\n status={status}\n charLimitDisplay={\n displayCharCount && typeof maxLength === 'number' ? (\n <Text id={`${id}-charCount`} readOnly={readOnly} variant='secondary'>\n {maxLength >= 0 ? t('x_of_y', [charCount \|\| '0', maxLength]) : charCount}{' '}\n <VisuallyHiddenText>{t('characters_typed')}</VisuallyHiddenText>\n </Text>\n ) : undefined\n }\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {TextAreaControl}\n </FormField>\n ) : (\n TextAreaControl\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}
1	+ {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useState, useEffect, useRef, useLayoutEffect } from 'react';\nimport type {\n FC,\n Ref,\n PropsWithoutRef,\n ChangeEvent,\n ChangeEventHandler,\n FocusEvent,\n FocusEventHandler\n} from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport {\n useConsolidatedRef,\n useElement,\n useI18n,\n useLiveLog,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledTextArea, { textAreaMaxHeight } from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /** Minimum length of characters that can be input. /\n minLength?: number;\n /* Maximum length of characters that can be input. /\n maxLength?: number;\n /\n Allows the user to resize the Text Area. This prop is ignored if autoResize is true.\n * @default false\n /\n resizable?: boolean;\n /\n Enables the Text Area to resize itself automatically.\n * @default true\n /\n autoResize?: boolean;\n /\n Display a live character count in relation to the maxLength.\n * @default false\n /\n displayCharCount?: boolean;\n /\n Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n}\n\nconst warnCharCount = 30;\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(function TextArea(\n props: PropsWithoutRef<TextAreaProps>,\n ref: Ref<HTMLTextAreaElement>\n) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = true,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n onResolveSuggestion,\n ...restProps\n } = props;\n const t = useI18n();\n\n const testIds = useTestIds(testId, getTextAreaTestIds);\n const [charCount, setCharCount] = useState(value?.length ?? defaultValue?.length ?? 0);\n const [focused, setFocused] = useState(false);\n const [textAreaEl, setTextAreaEl] = useElement<HTMLTextAreaElement>();\n const textAreaRef = useConsolidatedRef(ref, setTextAreaEl);\n const prevHeightRef = useRef(0);\n const heightPxRef = useRef(0);\n const focusTimeoutRef = useRef(NaN);\n const { announceAssertive } = useLiveLog();\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (maxLength !== undefined) {\n if (e.target.value.length >= maxLength) {\n announceAssertive({ message: t('text_area_character_limit'), type: 'warning' });\n } else if (maxLength > warnCharCount) {\n const prevCharsRemaining = maxLength - charCount;\n const charsRemaining = maxLength - e.target.value.length;\n\n if (charsRemaining < warnCharCount && prevCharsRemaining >= warnCharCount) {\n announceAssertive({\n message: t('text_area_characters_remaining', [`${warnCharCount}`]),\n type: 'warning'\n });\n }\n }\n }\n\n if (!hardStop \|\| maxLength === undefined \|\| e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n }\n },\n [onChangeProp, charCount, hardStop, maxLength, announceAssertive, t]\n );\n\n const recalculateHeight = useCallback(() => {\n if (!textAreaRef.current) return;\n\n const baseHeightPx = heightPxRef.current;\n const currentHeight = parseFloat(\n getComputedStyle(textAreaRef.current).getPropertyValue('--textarea-height')\n );\n textAreaRef.current.style.marginBlockEnd =\n currentHeight > baseHeightPx\n ? `calc(min(${textAreaMaxHeight}, ${currentHeight}px) - ${baseHeightPx}px)`\n : '0';\n\n textAreaRef.current.style.setProperty('--textarea-height', 'auto');\n\n // Remove scrollbar width to avoid interference with calculation.\n textAreaRef.current.style.setProperty('scrollbar-width', 'none');\n\n const scrollHeight = textAreaRef.current.scrollHeight;\n const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;\n // Set height to auto then scrollHeight + borderWidth to resize TextArea to content\n textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);\n\n textAreaRef.current.style.removeProperty('margin-block-end');\n\n textAreaRef.current.style.removeProperty('scrollbar-width');\n }, []);\n\n useLayoutEffect(() => {\n if (!textAreaRef.current) return;\n heightPxRef.current = textAreaRef.current.offsetHeight;\n }, [textAreaEl]);\n\n useEffect(() => {\n if (!textAreaRef.current) return;\n\n if (autoResize) {\n recalculateHeight();\n } else {\n textAreaRef.current.style.removeProperty('--textarea-height');\n }\n }, [value, autoResize, recalculateHeight]);\n\n // Recalculate height when the element becomes visible after being displayed none.\n useEffect(() => {\n if (!textAreaEl \|\| !autoResize) return;\n\n prevHeightRef.current = textAreaEl.offsetHeight;\n\n const observer = new ResizeObserver(entries => {\n const currentHeight = entries[0].contentRect.height;\n if (prevHeightRef.current === 0 && currentHeight > 0) {\n const textareaHeight = getComputedStyle(textAreaEl)\n .getPropertyValue('--textarea-height')\n .trim();\n if (!textareaHeight \|\| textareaHeight === 'auto' \|\| textareaHeight === 'unset') {\n heightPxRef.current = textAreaEl.offsetHeight;\n }\n recalculateHeight();\n }\n prevHeightRef.current = currentHeight;\n });\n\n observer.observe(textAreaEl);\n return () => observer.disconnect();\n }, [autoResize, recalculateHeight, textAreaEl]);\n\n useEffect(\n () => () => {\n clearTimeout(focusTimeoutRef.current);\n },\n []\n );\n\n const TextAreaControl = (\n <StyledFormControl\n data-testid={testIds.control}\n ref={textAreaRef}\n id={id}\n aria-describedby={\n // Remove when focused to prevent each change in character count from being announced.\n !focused && displayCharCount && typeof maxLength === 'number'\n ? `${id}-charCount`\n : undefined\n }\n required={required}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n autoResize={autoResize}\n resizable={autoResize ? false : resizable}\n maxLength={hardStop ? maxLength : undefined}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n {...controlProp}\n {...restProps}\n onChange={onChange}\n onFocus={(e: FocusEvent<HTMLTextAreaElement>) => {\n // Need to delay so screen readers will include the character count in announcement on initial focus.\n // Shorter delays did not seem to work.\n focusTimeoutRef.current = window.setTimeout(() => {\n setFocused(true);\n }, 250);\n\n restProps.onFocus?.(e);\n }}\n onBlur={(e: FocusEvent<HTMLTextAreaElement>) => {\n clearTimeout(focusTimeoutRef.current);\n setFocused(false);\n restProps.onBlur?.(e);\n }}\n as={StyledTextArea}\n />\n );\n\n return label \|\| displayCharCount ? (\n <FormField\n testId={testIds}\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n readOnly={readOnly}\n info={info}\n status={status}\n charLimitDisplay={\n displayCharCount && typeof maxLength === 'number' ? (\n <Text id={`${id}-charCount`} readOnly={readOnly} variant='secondary'>\n {maxLength >= 0 ? t('x_of_y', [charCount \|\| '0', maxLength]) : charCount}{' '}\n <VisuallyHiddenText>{t('characters_typed')}</VisuallyHiddenText>\n </Text>\n ) : undefined\n }\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {TextAreaControl}\n </FormField>\n ) : (\n TextAreaControl\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}

package/lib/components/TextArea/TextArea.styles.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+export declare const textAreaMaxHeight = "90vh";
 declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
     resizable: boolean;
     autoResize: boolean;

package/lib/components/TextArea/TextArea.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;eAAgC,OAAO;gBAAc,OAAO;YAuB/E,CAAC;AAIF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,SAAS,CAAC;AAExC,QAAA,MAAM,cAAc;eAAgC,OAAO;gBAAc,OAAO;YAuB/E,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/lib/components/TextArea/TextArea.styles.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
+export const textAreaMaxHeight = '90vh';
 const StyledTextArea = styled.textarea(({ resizable, autoResize }) => {
     return css `
       width: 100%;
@@ -18,7 +19,7 @@ const StyledTextArea = styled.textarea(({ resizable, autoResize }) => {
         : css `
             resize: none;
             overflow: auto;
-            max-height: 90vh;
+            max-height: ${textAreaMaxHeight};
           `}
     `;
 });

package/lib/components/TextArea/TextArea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CACpC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE;IAC5B,OAAO,GAAG,CAAA;;oBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;iBAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;QAE7D,UAAU;QACZ,GAAG,CAAA;;OAEF;QACC,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA~~;;;;WAIF~~;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean; autoResize: boolean }>(\n ({ resizable, autoResize }) => {\n return css`\n width: 100%;\n min-height: ${props => props.theme.components['text-area']['min-height']};\n padding: ${props => props.theme.components['text-area'].padding};\n appearance: none;\n ${autoResize &&\n css`\n height: var(--textarea-height, auto);\n `}\n ${resizable\n ? css`\n resize: vertical;\n overflow: hidden;\n `\n : css`\n resize: none;\n overflow: auto;\n max-height: ~~90vh~~;\n `}\n `;\n }\n);\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}
1	+ {"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AAExC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CACpC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE;IAC5B,OAAO,GAAG,CAAA;;oBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;iBAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;QAE7D,UAAU;QACZ,GAAG,CAAA;;OAEF;QACC,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA;;;0BAGa,iBAAiB;WAChC;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nexport const textAreaMaxHeight = '90vh';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean; autoResize: boolean }>(\n ({ resizable, autoResize }) => {\n return css`\n width: 100%;\n min-height: ${props => props.theme.components['text-area']['min-height']};\n padding: ${props => props.theme.components['text-area'].padding};\n appearance: none;\n ${autoResize &&\n css`\n height: var(--textarea-height, auto);\n `}\n ${resizable\n ? css`\n resize: vertical;\n overflow: hidden;\n `\n : css`\n resize: none;\n overflow: auto;\n max-height: ${textAreaMaxHeight};\n `}\n `;\n }\n);\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "9.0.0-build.29.15",
+  "version": "9.0.0-build.29.16",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",