npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.4.3 → 10.0.0-build.4.5 - Mend

@pega/cosmos-react-core 10.0.0-build.4.3 → 10.0.0-build.4.5

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

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

@@ -49,7 +49,15 @@ export type FieldGroupProps = BaseProps & {
     collapsed?: never;
     onToggleCollapsed?: never;
 });
-export declare const StyledFieldGroupName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../HTML").HTMLProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("../HTML").HTMLProps> & {
+    getTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const StyledFieldGroupChildren: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFieldGroupName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("../Text").TextProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledFieldHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & BaseProps & import("../..").AsProp & {
     children?: ReactNode;
     ref?: Ref<Element>;
@@ -417,15 +425,12 @@ export declare const StyledFieldGroupContent: import("styled-components/dist/typ
     ref?: import("react").RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }), import("styled-components/dist/types").BaseObject>> & string & Omit<ForwardRefForwardPropsComponent<import("../Grid").GridProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledFieldGroupLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, Pick<FieldGroupProps, "collapsed">>> & string;
-export declare const StyledFieldGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
+export declare const StyledFieldGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {
+    $hasDescription?: boolean;
+}>> & string;
 export declare const StyledGroupContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     border?: boolean;
 }>> & string;
-export declare const StyledDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../HTML").HTMLProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("../..").ForwardProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("../HTML").HTMLProps> & {
-    getTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
-}, keyof import("react").Component<any, {}, any>>;
 declare const FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps>;
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;~~AAK1F~~,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAM7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;~~AA4CJ~~,eAAO,MAAM,oBAAoB~~,+NAAgB~~,CAAC;~~AAElD~~,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,~~6QA+BlC~~,CAAC;AAIF,eAAO,MAAM,gBAAgB~~,+OAkB5B~~,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;~~YAkB~~/D,CAAC;AAiCH,~~eAAO,MAAM,iBAAiB;;;;iDAI7B,CAAC;AAEF,~~QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,~~CA8F~~/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAM7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AAUJ,eAAO,MAAM,iBAAiB;;;;iDAU5B,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAAe,CAAC;AAoCrD,eAAO,MAAM,oBAAoB;;uIAAiB,CAAC;AAEnD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,6QAwBlC,CAAC;AAIF,eAAO,MAAM,gBAAgB;sBAAuC,OAAO;YAa1E,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;YAS/D,CAAC;AAiCH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAmG/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

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

@@ -18,6 +18,18 @@ import { calculateFontSize, omitProps } from '../../styles';
 import AdditionalInfo from '../AdditionalInfo';
 registerIcon(caretRightIcon);
 registerIcon(warnSolidIcon);
+export const StyledDescription = styled(HTML)(({ theme }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    /* Prevent instruction text from contributing to modal width calculation */
+    width: 0;
+    min-width: 100%;
+    color: rgb(from currentColor r g b / ${theme.base.transparency['transparent-2']});
+    font-size: ${fontSizes.xs};
+  `;
+});
+StyledDescription.defaultProps = defaultThemeProp;
+export const StyledFieldGroupChildren = styled.div ``;
 // Styles
 const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
     const { rtl } = useDirection();
@@ -38,19 +50,14 @@ const StyledErrorIcon = styled(Icon)(({ theme: { base: { palette } } }) => css `
     color: ${palette.urgent};
   `);
 StyledErrorIcon.defaultProps = defaultThemeProp;
-export const StyledFieldGroupName = styled.span ``;
+export const StyledFieldGroupName = styled(Text) ``;
 export const StyledFieldHeader = styled(Flex) `
   word-break: break-word;
 `;
 export const StyledFieldGroupContent = styled(Grid) ``;
-export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))(({ collapsed, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
+export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))(({ theme: { base: { animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
     return css `
       width: 100%;
-      margin-bottom: 0;
-      ${!collapsed &&
-        css `
-        margin-block-end: calc(1.5 * ${spacing});
-      `}
       transition: margin-block-end ${animation.speed} ${animation.timing.ease};
       > ${StyledExpandButton} {
@@ -63,26 +70,27 @@ export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collap
     `;
 });
 StyledFieldGroupLegend.defaultProps = defaultThemeProp;
-export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { text } } }) => {
-    const fontSizes = calculateFontSize(fontSize, fontScale);
+export const StyledFieldGroup = styled.fieldset(({ theme, $hasDescription }) => {
     return css `
       border: none;
-      & ${StyledFieldGroupName} {
-        font-size: ${fontSizes[text.h3['font-size']]};
-        font-weight: ${text.h3['font-weight']};
-      }
+      ${!$hasDescription &&
+        css `
+        & > ${StyledFieldGroupLegend}:not(:has([aria-expanded='false'])) {
+          margin-block-end: calc(${theme.base.spacing} / 2);
+        }
+      `}
     `;
 });
 StyledFieldGroup.defaultProps = defaultThemeProp;
 export const StyledGroupContainer = styled.div(({ theme, border }) => {
-    const { base: { palette: { 'border-line': borderColor }, spacing, 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-width': borderWidth } } } = theme;
     if (!border)
         return null;
     return css `
-    padding: ${spacing};
-    border-radius: calc(${baseBorderRadius} / 2);
-    border: ${borderWidth} solid ${borderColor};
+    padding: calc(2 * ${theme.base.spacing});
+    border-radius: calc(${theme.base['border-radius']} / 2);
+    border: ${theme.components['form-control']['border-width']} solid
+      ${theme.base.palette['border-line']};
   `;
 });
 StyledGroupContainer.defaultProps = defaultThemeProp;
@@ -90,20 +98,15 @@ StyledGroupContainer.defaultProps = defaultThemeProp;
 const FieldGroupLegend = ({ name, contextualLabel, children, collapsed, actions, additionalInfo }) => {
     return (_jsx(StyledFieldGroupLegend, { collapsed: collapsed, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledFieldHeader, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, contextualLabel: contextualLabel || name, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions, contextualLabel: contextualLabel })] }) }));
 };
-export const StyledDescription = styled(HTML) `
-  /* Prevent instruction text from contributing to modal width calculation */
-  width: 0;
-  min-width: 100%;
-`;
 const FieldGroup = forwardRef(function FieldGroup({ children, description, banner, name, contextualLabel, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, variant, status, ...restProps }, ref) {
     const t = useI18n();
     const uid = useUID();
-    const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 2 }, children: [banner && _jsx(Banner, { ...banner }), description && (_jsx(StyledDescription, { id: `${uid}-description`, forwardedAs: 'p', content: description })), _jsx("div", { children: children })] }));
-    return (_jsx(StyledGroupContainer, { border: variant === 'form-group', children: _jsxs(StyledFieldGroup, { "aria-label": contextualLabel || name, "aria-describedby": description ? `${uid}-description` : undefined, as: name ? 'fieldset' : 'div', ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, name: name, contextualLabel: contextualLabel, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
+    const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 0.5 }, children: [banner && _jsx(Banner, { ...banner }), description && (_jsx(StyledDescription, { id: `${uid}-description`, forwardedAs: 'p', content: description })), _jsx(StyledFieldGroupChildren, { children: children })] }));
+    return (_jsx(StyledGroupContainer, { border: variant === 'form-group', children: _jsxs(StyledFieldGroup, { "aria-label": contextualLabel || name, "aria-describedby": description ? `${uid}-description` : undefined, as: name ? 'fieldset' : 'div', ...restProps, ref: ref, "$hasDescription": !!description, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, name: name, contextualLabel: contextualLabel, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                             onToggleCollapsed?.();
                         }, "aria-expanded": !collapsed, "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [
                             contextualLabel || name
-                        ]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsxs(_Fragment, { children: [status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }) }));
+                        ]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { variant: 'h3', forwardedAs: 'span', children: name }))] }) })) : (_jsxs(_Fragment, { children: [status === 'error' ? _jsx(StyledErrorIcon, { name: 'warn-solid' }) : null, headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { variant: 'h3', forwardedAs: 'span', children: name }))] })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }) }));
 });
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport Banner from '../Banner';\nimport type { BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\nregisterIcon(warnSolidIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /* A banner to be displayed above the controls. /\n banner?: BannerProps;\n /* The display and markup variant to apply to the group. /\n variant?: 'form-group';\n /* Indicates validation status for error display in the header. /\n status?: 'error';\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n} & (\n \| {\n /* The name associated with the Field Group. /\n name: string;\n /* Provides a contextual label for the name. /\n contextualLabel?: string;\n /* Select the heading tag for header /\n headingTag?: HeadingTag;\n /* Provides additional info relevant to the field group. /\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /\n Controls the collapsed state of the field group.\n * Passing undefined will render the field group as non-collapsible.\n * @default false\n /\n collapsed?: boolean;\n /\n Called when user clicks the toggle button.\n /\n onToggleCollapsed?: () => void;\n }\n \| {\n name?: undefined;\n contextualLabel?: never;\n headingTag?: never;\n additionalInfo?: never;\n actions?: never;\n collapsed?: never;\n onToggleCollapsed?: never;\n }\n );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n name: NonNullable<FieldGroupProps['name']>;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n theme: {\n base: { animation }\n }\n}) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon}:first-child {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon}:first-child {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nconst StyledErrorIcon = styled(Icon)(\n ({\n theme: {\n base: { palette }\n }\n }) => css`\n color: ${palette.urgent};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)`\n word-break: break-word;\n`;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))<\n Pick<FieldGroupProps, 'collapsed'>\n>(\n ({\n collapsed,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${!collapsed &&\n css`\n margin-block-end: calc(1.5 ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ border?: boolean }>(({ theme, border }) => {\n const {\n base: {\n palette: { 'border-line': borderColor },\n spacing,\n 'border-radius': baseBorderRadius\n },\n components: {\n 'form-control': { 'border-width': borderWidth }\n }\n } = theme;\n if (!border) return null;\n\n return css`\n padding: ${spacing};\n border-radius: calc(${baseBorderRadius} / 2);\n border: ${borderWidth} solid ${borderColor};\n `;\n});\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n name,\n contextualLabel,\n children,\n collapsed,\n actions,\n additionalInfo\n}: FieldGroupLegendProps) => {\n return (\n <StyledFieldGroupLegend collapsed={collapsed}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n {children}\n {additionalInfo && (\n <AdditionalInfo\n heading={additionalInfo.heading}\n contextualLabel={contextualLabel \|\| name}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nexport const StyledDescription = styled(HTML)`\n /* Prevent instruction text from contributing to modal width calculation */\n width: 0;\n min-width: 100%;\n`;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n {\n children,\n description,\n banner,\n name,\n contextualLabel,\n additionalInfo,\n actions,\n collapsed,\n headingTag,\n onToggleCollapsed,\n variant,\n status,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n) {\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n {banner && <Banner {...banner} />}\n {description && (\n <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n )}\n <div>{children}</div>\n </StyledFieldGroupContent>\n );\n\n return (\n <StyledGroupContainer border={variant === 'form-group'}>\n <StyledFieldGroup\n aria-label={contextualLabel \|\| name}\n aria-describedby={description ? `${uid}-description` : undefined}\n as={name ? 'fieldset' : 'div'}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend\n collapsed={collapsed}\n actions={actions}\n additionalInfo={additionalInfo}\n name={name}\n contextualLabel={contextualLabel}\n >\n {typeof collapsed === 'boolean' ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed?.();\n }}\n aria-expanded={!collapsed}\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n contextualLabel \|\| name\n ])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n\n {typeof collapsed === 'boolean' ? (\n <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n </StyledGroupContainer>\n );\n});\n\nexport default FieldGroup;\n"]}
1	+ {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport Banner from '../Banner';\nimport type { BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\nregisterIcon(warnSolidIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /* A banner to be displayed above the controls. /\n banner?: BannerProps;\n /* The display and markup variant to apply to the group. /\n variant?: 'form-group';\n /* Indicates validation status for error display in the header. /\n status?: 'error';\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n} & (\n \| {\n /* The name associated with the Field Group. /\n name: string;\n /* Provides a contextual label for the name. /\n contextualLabel?: string;\n /* Select the heading tag for header /\n headingTag?: HeadingTag;\n /* Provides additional info relevant to the field group. /\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /\n Controls the collapsed state of the field group.\n * Passing undefined will render the field group as non-collapsible.\n * @default false\n /\n collapsed?: boolean;\n /\n Called when user clicks the toggle button.\n /\n onToggleCollapsed?: () => void;\n }\n \| {\n name?: undefined;\n contextualLabel?: never;\n headingTag?: never;\n additionalInfo?: never;\n actions?: never;\n collapsed?: never;\n onToggleCollapsed?: never;\n }\n );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n name: NonNullable<FieldGroupProps['name']>;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\nexport const StyledDescription = styled(HTML)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n / Prevent instruction text from contributing to modal width calculation /\n width: 0;\n min-width: 100%;\n color: rgb(from currentColor r g b / ${theme.base.transparency['transparent-2']});\n font-size: ${fontSizes.xs};\n `;\n});\n\nStyledDescription.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupChildren = styled.div``;\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n theme: {\n base: { animation }\n }\n}) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon}:first-child {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon}:first-child {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nconst StyledErrorIcon = styled(Icon)(\n ({\n theme: {\n base: { palette }\n }\n }) => css`\n color: ${palette.urgent};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled(Text)``;\n\nexport const StyledFieldHeader = styled(Flex)`\n word-break: break-word;\n`;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))<\n Pick<FieldGroupProps, 'collapsed'>\n>(\n ({\n theme: {\n base: {\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset<{ $hasDescription?: boolean }>(\n ({ theme, $hasDescription }) => {\n return css`\n border: none;\n\n ${!$hasDescription &&\n css`\n & > ${StyledFieldGroupLegend}:not(:has([aria-expanded='false'])) {\n margin-block-end: calc(${theme.base.spacing} / 2);\n }\n `}\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ border?: boolean }>(({ theme, border }) => {\n if (!border) return null;\n\n return css`\n padding: calc(2 ${theme.base.spacing});\n border-radius: calc(${theme.base['border-radius']} / 2);\n border: ${theme.components['form-control']['border-width']} solid\n ${theme.base.palette['border-line']};\n `;\n});\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n name,\n contextualLabel,\n children,\n collapsed,\n actions,\n additionalInfo\n}: FieldGroupLegendProps) => {\n return (\n <StyledFieldGroupLegend collapsed={collapsed}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n {children}\n {additionalInfo && (\n <AdditionalInfo\n heading={additionalInfo.heading}\n contextualLabel={contextualLabel \|\| name}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n {\n children,\n description,\n banner,\n name,\n contextualLabel,\n additionalInfo,\n actions,\n collapsed,\n headingTag,\n onToggleCollapsed,\n variant,\n status,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n) {\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 0.5 }}>\n {banner && <Banner {...banner} />}\n {description && (\n <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n )}\n <StyledFieldGroupChildren>{children}</StyledFieldGroupChildren>\n </StyledFieldGroupContent>\n );\n\n return (\n <StyledGroupContainer border={variant === 'form-group'}>\n <StyledFieldGroup\n aria-label={contextualLabel \|\| name}\n aria-describedby={description ? `${uid}-description` : undefined}\n as={name ? 'fieldset' : 'div'}\n {...restProps}\n ref={ref}\n $hasDescription={!!description}\n >\n {name && (\n <FieldGroupLegend\n collapsed={collapsed}\n actions={actions}\n additionalInfo={additionalInfo}\n name={name}\n contextualLabel={contextualLabel}\n >\n {typeof collapsed === 'boolean' ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed?.();\n }}\n aria-expanded={!collapsed}\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n contextualLabel \|\| name\n ])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName variant='h3' forwardedAs='span'>\n {name}\n </StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName variant='h3' forwardedAs='span'>\n {name}\n </StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n\n {typeof collapsed === 'boolean' ? (\n <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n </StyledGroupContainer>\n );\n});\n\nexport default FieldGroup;\n"]}

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

@@ -1,5 +1,5 @@
 import type { FC, ReactNode, ComponentType, ReactElement } from 'react';
-import type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';
+import type { Action, ExcludeStrict, ForwardProps, HeadingTag, OmitStrict, TestIdProp } from '../../types';
 import type { FlexProps } from '../Flex';
 import type { FormControlProps } from '../FormControl';
 import type { LabelProps } from '../Label';
@@ -42,6 +42,11 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
      * @default false
      */
     labelAfter?: boolean;
+    /**
+     * Sets the visual variant/styling of the label.
+     * @default 'default'
+     */
+    labelVariant?: 'default' | HeadingTag;
     /**
      * Property used to check whether input type is radio to handle styling for RadioCheck
      * @default false
@@ -73,6 +78,9 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
 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 StyledHeadingLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Text").TextProps>, keyof import("react").Component<any, {}, any>>;
 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;
 }>> & string;

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;AAe3C,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"}
1	+ {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAEF,SAAS,EACT,aAAa,EACb,YAAY,EAGb,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,MAAM,EACN,aAAa,EACb,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACX,MAAM,aAAa,CAAC;AAErB,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;AAe3C,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,SAAS,GAAG,UAAU,CAAC;IACtC;;;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,kBAAkB;;uJAAiB,CAAC;AAEjD,eAAO,MAAM,cAAc;YAAwB,OAAO;YAUxD,CAAC;AAEH,eAAO,MAAM,eAAe;gBAEZ,OAAO;wBACC,OAAO;kBACb,OAAO;YAwFvB,CAAC;;;;AAoWH,wBAA2D"}

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

@@ -63,6 +63,7 @@ export const StyledFormFieldInfo = styled.div(({ status, infoAbove, theme }) =>
   `;
 });
 StyledFormFieldInfo.defaultProps = defaultThemeProp;
+export const StyledHeadingLabel = styled(Text) ``;
 export const StyledLabelRow = styled.div(({ inline }) => {
     if (inline) {
         return css `
@@ -96,14 +97,17 @@ export const StyledFormField = styled.div(props => {
       flex-shrink: 0;
     }
-    > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {
+    > :is(${StyledLabel}, ${StyledHeadingLabel}),
+    > ${StyledLabelRow}, > ${StyledFlex}:has(> :is(${StyledLabel}, ${StyledHeadingLabel})) {
       &:not(:empty) {
         margin-bottom: calc(0.25 * ${spacing});
         min-height: ${hitAreaCompact};
       }
     }
-    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {
+    > :is(${StyledLabel}, ${StyledHeadingLabel}),
+    > ${StyledLabelRow} > :is(${StyledLabel}, ${StyledHeadingLabel}),
+    > ${StyledFlex} > :is(${StyledLabel}, ${StyledHeadingLabel}) {
       ${required &&
         css `
         &::after {
@@ -121,11 +125,11 @@ export const StyledFormField = styled.div(props => {
     ${asFieldset &&
         showAdditionalInfo &&
         css `
-      > ${StyledFlex} > ${StyledLabel} {
+      > ${StyledFlex} > :is(${StyledLabel}, ${StyledHeadingLabel}) {
         display: block;
       }
-      > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {
+      > ${StyledFlex}:has(> :is(${StyledLabel}, ${StyledHeadingLabel})) > ${StyledAdditionalInfo} {
         align-self: flex-start;
       }
     `}
@@ -137,7 +141,7 @@ export const StyledFormField = styled.div(props => {
       grid-template-rows: auto 1fr;
       align-items: start;
-      ${StyledFlex}:has(> ${StyledLabel}), ${StyledFlex}:has(> ${StyledLabelRow}) {
+      ${StyledFlex}:has(> :is(${StyledLabel}, ${StyledHeadingLabel})), ${StyledFlex}:has(> ${StyledLabelRow}) {
         grid-row: span 2;
       }
     `}
@@ -163,7 +167,7 @@ const statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', success:
 const FormField = forwardRef(function FormField(props, ref) {
     const uid = useUID();
     const theme = useTheme();
-    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs: labelAsProp = 'label', labelFor = id, labelId: labelIdProp, labelHidden = false, labelAfter = false, info, status, suppressAnnouncements, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = theme.components['form-field'].layout === 'inline', onClear, actions, container, additionalInfo, suggestion, 'aria-describedby': ariaDescribedBy, className, ...restProps } = props;
+    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs: labelAsProp = 'label', labelFor = id, labelId: labelIdProp, labelHidden = false, labelAfter = false, labelVariant = 'default', info, status, suppressAnnouncements, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = theme.components['form-field'].layout === 'inline', onClear, actions, container, additionalInfo, suggestion, 'aria-describedby': ariaDescribedBy, className, ...restProps } = props;
     const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';
     const testIds = useTestIds(testId, getFormFieldTestIds);
     const asFieldset = as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');
@@ -178,10 +182,22 @@ const FormField = forwardRef(function FormField(props, ref) {
     const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;
     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: labelInline, ref: labelRef, children: label }), showAdditionalInfo && labelText && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, contextualLabel: labelText, children: additionalInfo.content }))] }));
+    const labelContent = (_jsxs(_Fragment, { children: [(() => {
+                const baseLabelProps = {
+                    'data-testid': testIds.label,
+                    children: label,
+                    id: labelId,
+                    htmlFor: labelAs === 'label' ? labelFor : undefined,
+                    onClick: (e) => {
+                        if (readOnly)
+                            e.preventDefault();
+                    }
+                };
+                if (labelVariant === 'default' || labelHidden) {
+                    return (_jsx(Label, { ...baseLabelProps, as: labelAs, labelHidden: labelHidden, inline: labelInline, ref: labelRef }));
+                }
+                return (_jsx(StyledHeadingLabel, { ...baseLabelProps, forwardedAs: labelAs, variant: labelVariant, ref: labelRef }));
+            })(), 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: labelInline ? 'start' : 'stretch', shrink: labelInline ? 0 : undefined }, inline: labelInline, children: labelContent }));

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';\n\nimport AIButton from '../AIButton';\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 { calculateFontSize, getReadableStatusColor } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Text, { StyledText } from '../Text';\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 * as polarisSolidIcon from '../Icon/icons/polaris-solid.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, polarisSolidIcon);\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 StyledSuggestionWrapper = styled(Flex)<Pick<FormControlProps, 'status'>>(({\n theme,\n status\n}) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { 'form-control': formControl }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const infoFontSize = fontSizes.xxs;\n\n return css`\n ${StyledText} {\n ${(!status \|\| status === 'pending') &&\n css`\n color: ${formControl['foreground-color']};\n font-size: ${infoFontSize};\n `}\n }\n `;\n});\n\nStyledSuggestionWrapper.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 suggestion,\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 hasAutoInputSuggestion = status === 'pending' && !!suggestion && 'onReject' in suggestion;\n const hasSuggestion = hasAutoInputSuggestion \|\| (!!suggestion && 'value' in suggestion);\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 <StyledFormFieldInfo\n data-testid={testIds.info}\n status={status}\n id={`${id}-info`}\n infoAbove={infoAbove}\n >\n {'value' in suggestion && (\n <StyledSuggestionWrapper container={{ alignItems: 'center', gap: 0.2 }} status={status}>\n <Icon size='font-size' name='polaris-solid' />{' '}\n <Text>{`${t('suggestion_suggested_value')}:`}</Text>\n <AIButton\n variant='link'\n icon={null}\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n suggestion.onAccept();\n focusables[0]?.focus();\n }}\n label={suggestion.value}\n aria-label={`${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n />\n </StyledSuggestionWrapper>\n )}\n {'onReject' in suggestion &&\n ('previousValue' in suggestion && suggestion.previousValue ? (\n <StyledSuggestionWrapper container={{ alignItems: 'center', gap: 0.2 }} status={status}>\n <Text>{`${t('suggestion_previous_value')}:`}</Text>\n <Button\n variant='link'\n data-testid={testIds.suggestionReject}\n onClick={() => {\n suggestion.onReject();\n focusables[0]?.focus();\n }}\n aria-label={`${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {suggestion.previousValue}\n </Button>\n </StyledSuggestionWrapper>\n ) : (\n <AIButton\n variant='link'\n icon={null}\n data-testid={testIds.suggestionReject}\n onClick={() => {\n suggestion.onReject();\n focusables[0]?.focus();\n }}\n label={t('suggestion_clear')}\n aria-label={`${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n />\n ))}\n\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\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 suggestion?.onAccept();\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={hasAutoInputSuggestion ? 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":"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","sourcesContent":["import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';\nimport type {\n FC,\n MouseEvent,\n ReactNode,\n ComponentType,\n ReactElement,\n PropsWithoutRef,\n Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport AIButton from '../AIButton';\nimport { defaultThemeProp } from '../../theme';\nimport type {\n Action,\n ExcludeStrict,\n ForwardProps,\n HeadingTag,\n OmitStrict,\n TestIdProp\n} 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 { calculateFontSize, getReadableStatusColor } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Text, { StyledText } from '../Text';\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 * as polarisSolidIcon from '../Icon/icons/polaris-solid.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, polarisSolidIcon);\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 Sets the visual variant/styling of the label.\n * @default 'default'\n /\n labelVariant?: 'default' \| HeadingTag;\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 StyledHeadingLabel = styled(Text)``;\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 > :is(${StyledLabel}, ${StyledHeadingLabel}),\n > ${StyledLabelRow}, > ${StyledFlex}:has(> :is(${StyledLabel}, ${StyledHeadingLabel})) {\n &:not(:empty) {\n margin-bottom: calc(0.25 * ${spacing});\n min-height: ${hitAreaCompact};\n }\n }\n\n > :is(${StyledLabel}, ${StyledHeadingLabel}),\n > ${StyledLabelRow} > :is(${StyledLabel}, ${StyledHeadingLabel}),\n > ${StyledFlex} > :is(${StyledLabel}, ${StyledHeadingLabel}) {\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} > :is(${StyledLabel}, ${StyledHeadingLabel}) {\n display: block;\n }\n\n > ${StyledFlex}:has(> :is(${StyledLabel}, ${StyledHeadingLabel})) > ${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(> :is(${StyledLabel}, ${StyledHeadingLabel})), ${StyledFlex}:has(> ${StyledLabelRow}) {\n grid-row: span 2;\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionWrapper = styled(Flex)<Pick<FormControlProps, 'status'>>(({\n theme,\n status\n}) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { 'form-control': formControl }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const infoFontSize = fontSizes.xxs;\n\n return css`\n ${StyledText} {\n ${(!status \|\| status === 'pending') &&\n css`\n color: ${formControl['foreground-color']};\n font-size: ${infoFontSize};\n `}\n }\n `;\n});\n\nStyledSuggestionWrapper.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 labelVariant = 'default',\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 suggestion,\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 hasAutoInputSuggestion = status === 'pending' && !!suggestion && 'onReject' in suggestion;\n const hasSuggestion = hasAutoInputSuggestion \|\| (!!suggestion && 'value' in suggestion);\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 {(() => {\n const baseLabelProps = {\n 'data-testid': testIds.label,\n children: label,\n id: labelId,\n htmlFor: labelAs === 'label' ? labelFor : undefined,\n onClick: (e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }\n };\n\n if (labelVariant === 'default' \|\| labelHidden) {\n return (\n <Label\n {...baseLabelProps}\n as={labelAs}\n labelHidden={labelHidden}\n inline={labelInline}\n ref={labelRef}\n />\n );\n }\n\n return (\n <StyledHeadingLabel\n {...baseLabelProps}\n forwardedAs={labelAs}\n variant={labelVariant}\n ref={labelRef}\n />\n );\n })()}\n\n {showAdditionalInfo && labelText && (\n <AdditionalInfo\n data-testid={testIds.additionalInfo}\n heading={additionalInfo.heading}\n contextualLabel={labelText}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </>\n );\n\n 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 <StyledFormFieldInfo\n data-testid={testIds.info}\n status={status}\n id={`${id}-info`}\n infoAbove={infoAbove}\n >\n {'value' in suggestion && (\n <StyledSuggestionWrapper container={{ alignItems: 'center', gap: 0.2 }} status={status}>\n <Icon size='font-size' name='polaris-solid' />{' '}\n <Text>{`${t('suggestion_suggested_value')}:`}</Text>\n <AIButton\n variant='link'\n icon={null}\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n suggestion.onAccept();\n focusables[0]?.focus();\n }}\n label={suggestion.value}\n aria-label={`${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n />\n </StyledSuggestionWrapper>\n )}\n {'onReject' in suggestion &&\n ('previousValue' in suggestion && suggestion.previousValue ? (\n <StyledSuggestionWrapper container={{ alignItems: 'center', gap: 0.2 }} status={status}>\n <Text>{`${t('suggestion_previous_value')}:`}</Text>\n <Button\n variant='link'\n data-testid={testIds.suggestionReject}\n onClick={() => {\n suggestion.onReject();\n focusables[0]?.focus();\n }}\n aria-label={`${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {suggestion.previousValue}\n </Button>\n </StyledSuggestionWrapper>\n ) : (\n <AIButton\n variant='link'\n icon={null}\n data-testid={testIds.suggestionReject}\n onClick={() => {\n suggestion.onReject();\n focusables[0]?.focus();\n }}\n label={t('suggestion_clear')}\n aria-label={`${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n />\n ))}\n\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\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 suggestion?.onAccept();\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={hasAutoInputSuggestion ? 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;AAMhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GACzB,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,GAAG;IACrC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC;;;;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,CACJ,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OA8BhC,CAAC;;;;~~AAuNH~~,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;AAMhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GACzB,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,GAAG;IACrC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC;;;;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,CACJ,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OA8BhC,CAAC;;;;AAwNH,wBAAuE"}

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

@@ -155,7 +155,7 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
             });
         });
     }, [children, name, disabled, readOnly, variant, onChange]);
-    return (_jsx(FormField, { testId: testIds, as: StyledRadioCheckGroup, ref: containerRef, name: name, disabled: disabled, required: required, ...restProps, inline: false, suggestion: suggestion, isRadioCheck: true, onClear: onClear,
+    return (_jsx(FormField, { testId: testIds, as: StyledRadioCheckGroup, ref: containerRef, name: name, disabled: disabled, required: required, ...restProps, inline: false, suggestion: suggestion, isRadioCheck: true, labelVariant: variant === 'card-grid' ? 'h3' : undefined, onClear: onClear,
         // Prevents blur when any input within the group is actively focused.
         onMouseDown: (e) => {
             restProps.onMouseDown?.(e);

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';\nimport EmptyState, { StyledEmptyState } from '../EmptyState';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> &\n Pick<FormControlProps, 'suggestion'> & {\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(({ theme }) => {\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 ${StyledEmptyState} {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: ${theme.components.card['border-radius']};\n padding: calc(2 ${theme.base.spacing});\n }\n `;\n});\n\nStyledRadioCheckGroup.defaultProps = defaultThemeProp;\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 suggestion,\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 if (!children \|\| Children.toArray(children).filter(Boolean).length === 0) return;\n\n return Children.map(children, child => {\n if (!child) return null;\n return 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 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 suggestion={suggestion}\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 {(() => {\n if (!mapChildren) {\n return <EmptyState variant='bordered' />;\n }\n\n return 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 })()}\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';\nimport EmptyState, { StyledEmptyState } from '../EmptyState';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> &\n Pick<FormControlProps, 'suggestion'> & {\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(({ theme }) => {\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 ${StyledEmptyState} {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: ${theme.components.card['border-radius']};\n padding: calc(2 ${theme.base.spacing});\n }\n `;\n});\n\nStyledRadioCheckGroup.defaultProps = defaultThemeProp;\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 suggestion,\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 if (!children \|\| Children.toArray(children).filter(Boolean).length === 0) return;\n\n return Children.map(children, child => {\n if (!child) return null;\n return 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 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 suggestion={suggestion}\n isRadioCheck\n labelVariant={variant === 'card-grid' ? 'h3' : undefined}\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 {(() => {\n if (!mapChildren) {\n return <EmptyState variant='bordered' />;\n }\n\n return 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 })()}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}

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

@@ -1,5 +1,5 @@
 import type { SelectionCardProps } from './SelectionCard.types';
-export declare const focusableSelector = "a[href], button, input, textarea, select, details, video[controls], audio[controls]";
+export declare const focusableSelector = "a[href], button, input, textarea, select, details, video[controls], audio[controls], div[role=\"button\"]";
 declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectionCardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     getTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["content", "image", "label", "actions"]>;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAIV,kBAAkB,EAEnB,MAAM,uBAAuB,CAAC;AAW/B,eAAO,MAAM,iBAAiB,~~wFACyD~~,CAAC;;;;~~AAuSxF~~,wBAAmE"}
1	+ {"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAIV,kBAAkB,EAEnB,MAAM,uBAAuB,CAAC;AAW/B,eAAO,MAAM,iBAAiB,8GAC6E,CAAC;;;;AAyS5G,wBAAmE"}

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

@@ -17,7 +17,7 @@ registerIcon(pictureIcon);
 const isTileContent = (img) => {
     return 'foregroundColor' in img;
 };
-export const focusableSelector = 'a[href], button, input, textarea, select, details, video[controls], audio[controls]';
+export const focusableSelector = 'a[href], button, input, textarea, select, details, video[controls], audio[controls], div[role="button"]';
 const SingleField = ({ id, 'data-testid': testId, truncate, value }) => {
     const [el, setEl] = useElement(null);
     return (_jsxs(_Fragment, { children: [_jsx(StyledSingleField, { ref: setEl, id: id, "data-testid": testId, truncate: truncate, children: value }), truncate && el && (_jsx(Tooltip, { target: el, smart: true, children: value }))] }));
@@ -58,13 +58,13 @@ const SelectionCard = forwardRef(function SelectionCard(props, ref) {
         setHasInteractiveElements(focusables?.length || 0);
         setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);
         focusables?.forEach(el => el.hasAttribute('data-main-focus')
-            ? el.removeAttribute('tabindex')
+            ? el.setAttribute('tabindex', '0')
             : el.setAttribute('tabindex', '-1'));
     }, [additionalInfo, fields, actions]);
     useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);
     useFocusWithin([focusOnInput ? null : contentRef], focused => contentRef.current
         ?.querySelectorAll(focusableSelector)
-        .forEach(el => (focused ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1'))));
+        .forEach(el => focused ? el.setAttribute('tabindex', '0') : el.setAttribute('tabindex', '-1')));
     useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [
         containerRef
     ]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionCard.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useEffect,\n useRef,\n useState,\n useMemo,\n useLayoutEffect,\n useCallback,\n cloneElement\n} from 'react';\nimport type { KeyboardEvent, PropsWithoutRef, ReactNode, RefObject } from 'react';\n\nimport { getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n useConsolidatedRef,\n useElement,\n useEscape,\n useFocusTrap,\n useFocusWithin,\n useI18n,\n usePrevious,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport type { GridProps } from '../Grid';\nimport Flex from '../Flex';\nimport FieldValueList from '../FieldValueList';\nimport type { FieldValueListItemProps } from '../FieldValueList';\nimport { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\nimport ShowMoreLess from '../ShowMoreLess';\nimport Tooltip from '../Tooltip';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n StyledSelectionCard,\n StyledContentContainer,\n StyledImageContainer,\n StyledSelectionCardInline,\n StyledSelectionCardStacked,\n StyledValueList,\n StyledHeader,\n StyledImageCell,\n StyledContentCell,\n StyledTileContent,\n StyledCardFooter,\n StyledSingleField\n} from './SelectionCard.styles';\nimport type {\n FieldValueItemPropsOmitName,\n ImagePlacement,\n ImageSize,\n SelectionCardProps,\n SelectionCardTile\n} from './SelectionCard.types';\nimport SelectionCardActions from './SelectionCardActions';\n\nregisterIcon(pictureIcon);\n\nconst isTileContent = (\n img: NonNullable<SelectionCardProps['image']>\n): img is SelectionCardTile & { placement?: ImagePlacement; size?: ImageSize } => {\n return 'foregroundColor' in img;\n};\n\nexport const focusableSelector =\n 'a[href], button, input, textarea, select, details, video[controls], audio[controls]';\n\nconst SingleField = ({\n id,\n 'data-testid': testId,\n truncate,\n value\n}: {\n id: string;\n 'data-testid'?: string;\n truncate?: boolean;\n value: ReactNode;\n}) => {\n const [el, setEl] = useElement<HTMLDivElement>(null);\n return (\n <>\n <StyledSingleField ref={setEl} id={id} data-testid={testId} truncate={truncate}>\n {value}\n </StyledSingleField>\n {truncate && el && (\n <Tooltip target={el} smart>\n {value}\n </Tooltip>\n )}\n </>\n );\n};\n\nconst useContentHeight = (\n contentRef: RefObject<HTMLElement>,\n targetRef: RefObject<HTMLElement>\n) => {\n useLayoutEffect(() => {\n if (!contentRef.current \|\| !targetRef.current) return;\n\n const resizeObserver = new ResizeObserver(() => {\n requestAnimationFrame(() => {\n targetRef.current?.style.setProperty(\n '--content-height',\n `${contentRef.current?.scrollHeight}px`\n );\n });\n });\n\n resizeObserver.observe(contentRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n};\n\nconst SelectionCard = forwardRef<\n RefElement<SelectionCardProps>,\n PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n 'aria-label': label,\n heading,\n disabled = false,\n readOnly,\n image,\n footer,\n fields = [],\n onClick,\n onKeyDown,\n actions,\n additionalInfo,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const contentRef = useRef<HTMLDivElement>(null);\n const containerRef = useConsolidatedRef(ref);\n\n const [focusOnInput, setFocusOnInput] = useState(false);\n const [hasInteractiveElements, setHasInteractiveElements] = useState(0);\n const [isBrokenImage, setIsBrokenImage] = useState(false);\n const isTile = image !== undefined && isTileContent(image);\n const tile = isTile ? image : undefined;\n const resolvedImageSrc = !isTile ? image?.src : undefined;\n const prevImageSrc = usePrevious(resolvedImageSrc);\n const testIds = useTestIds(testId, getSelectionCardTestIds);\n const contentId = `${id}-content`;\n\n const hasAdditionalContent = fields.length > 0;\n\n useEffect(() => {\n const focusables = containerRef.current?.querySelectorAll(focusableSelector);\n setHasInteractiveElements(focusables?.length \|\| 0);\n setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);\n focusables?.forEach(el =>\n el.hasAttribute('data-main-focus')\n ? el.removeAttribute('tabindex')\n : el.setAttribute('tabindex', '-1')\n );\n }, [additionalInfo, fields, actions]);\n\n useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);\n\n useFocusWithin([focusOnInput ? null : contentRef], focused =>\n contentRef.current\n ?.querySelectorAll(focusableSelector)\n .forEach(el => (focused ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1')))\n );\n\n useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [\n containerRef\n ]);\n\n useContentHeight(contentRef, containerRef);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (\n event.key === 'Enter' &&\n containerRef.current === getActiveElement() &&\n (!focusOnInput \|\| (focusOnInput && hasInteractiveElements > 1))\n ) {\n event.preventDefault();\n contentRef.current?.querySelectorAll<HTMLElement>(focusableSelector)[0]?.focus();\n }\n onKeyDown?.(event);\n },\n [containerRef, contentRef]\n );\n\n const imageContent = useMemo(() => {\n if (!image) return undefined;\n\n const innerContent = tile ? (\n <StyledTileContent\n data-tile-content\n foregroundColor={tile.foregroundColor}\n backgroundColor={tile.backgroundColor}\n size={tile.size}\n >\n {tile.icon ? <Icon name={tile.icon} /> : tile.text \|\| <Icon name='picture' />}\n </StyledTileContent>\n ) : (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledImageContainer}\n placement={image.placement}\n size={image.size}\n >\n {(isBrokenImage && resolvedImageSrc === prevImageSrc) \|\| resolvedImageSrc === undefined ? (\n <Icon name='picture' aria-label={t('image_load_error')} />\n ) : (\n <StyledImage\n data-testid={testIds.image}\n {...image}\n onError={() => setIsBrokenImage(true)}\n onLoad={() => setIsBrokenImage(false)}\n />\n )}\n </Flex>\n );\n\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledImageCell}\n placement={image.placement}\n size={image.size}\n isTile={isTile}\n style={\n !isTile && image.src && !isBrokenImage ? { '--bg-image': `url(${image.src})` } : undefined\n }\n >\n {innerContent}\n </Flex>\n );\n }, [\n isBrokenImage,\n prevImageSrc,\n image?.placement,\n image?.size,\n tile?.icon,\n tile?.text,\n tile?.foregroundColor,\n tile?.backgroundColor\n ]);\n\n let asProp: GridProps['as'] = StyledSelectionCard;\n if (image) {\n asProp = (image.placement ?? 'inline-start').startsWith('block')\n ? StyledSelectionCardStacked\n : StyledSelectionCardInline;\n }\n\n const isFieldValueListItemProps = (\n item: FieldValueListItemProps \| FieldValueItemPropsOmitName\n ): item is FieldValueListItemProps => {\n return hasProp(item, 'name');\n };\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n id={id}\n onClick={onClick}\n as={asProp}\n placement={image?.placement}\n size={image?.size}\n container={{ cols: '1fr', rows: 'auto' }}\n disabled={disabled}\n readOnly={readOnly}\n role={hasInteractiveElements ? 'group' : 'article'}\n aria-label={label}\n ref={containerRef}\n data-main-focus={focusOnInput ? undefined : true}\n tabIndex={focusOnInput ? undefined : 0}\n onKeyDown={handleKeyDown}\n >\n {image && image.placement !== 'inline-end' && imageContent}\n {/* element needed to get actual content height of the content container */}\n <StyledContentCell>\n <Flex\n as={StyledContentContainer}\n container={{ direction: 'column', gap: 0.75 }}\n ref={contentRef}\n >\n <Flex as={StyledHeader} container={{ alignItems: 'center', justify: 'between' }}>\n {isValidElement(heading) ? (\n cloneElement(heading, {\n ...{\n tabIndex: focusOnInput ? undefined : -1,\n additionalInfo,\n 'data-main-focus': focusOnInput ? true : undefined,\n 'aria-details': hasAdditionalContent ? contentId : undefined\n }\n })\n ) : (\n <span\n data-testid={testIds.label}\n aria-details={hasAdditionalContent ? contentId : undefined}\n >\n {heading}\n </span>\n )}\n {actions && (\n <SelectionCardActions\n data-testid={testIds.actions}\n actions={actions}\n disabled={disabled}\n contextualLabel={label}\n />\n )}\n </Flex>\n {hasAdditionalContent &&\n (fields.every(field => isFieldValueListItemProps(field)) ? (\n <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n ) : (\n <>\n {fields.length === 1 ? (\n <SingleField\n id={contentId}\n data-testid={testIds.content}\n truncate={fields[0].truncate}\n value={fields[0].value}\n />\n ) : (\n <Flex\n container={{ direction: 'column', gap: 1 }}\n as={StyledValueList}\n id={contentId}\n data-testid={testIds.content}\n >\n {fields.map(field => (\n <li key={field.id}>\n {field.truncate ? (\n <ShowMoreLess lines={3}>{field.value}</ShowMoreLess>\n ) : (\n field.value\n )}\n </li>\n ))}\n </Flex>\n )}\n </>\n ))}\n </Flex>\n {footer && <StyledCardFooter>{footer}</StyledCardFooter>}\n </StyledContentCell>\n {image?.placement === 'inline-end' && imageContent}\n </Grid>\n );\n});\n\nexport default withTestIds(SelectionCard, getSelectionCardTestIds);\n"]}
1	+ {"version":3,"file":"SelectionCard.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useEffect,\n useRef,\n useState,\n useMemo,\n useLayoutEffect,\n useCallback,\n cloneElement\n} from 'react';\nimport type { KeyboardEvent, PropsWithoutRef, ReactNode, RefObject } from 'react';\n\nimport { getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n useConsolidatedRef,\n useElement,\n useEscape,\n useFocusTrap,\n useFocusWithin,\n useI18n,\n usePrevious,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport type { GridProps } from '../Grid';\nimport Flex from '../Flex';\nimport FieldValueList from '../FieldValueList';\nimport type { FieldValueListItemProps } from '../FieldValueList';\nimport { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\nimport ShowMoreLess from '../ShowMoreLess';\nimport Tooltip from '../Tooltip';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n StyledSelectionCard,\n StyledContentContainer,\n StyledImageContainer,\n StyledSelectionCardInline,\n StyledSelectionCardStacked,\n StyledValueList,\n StyledHeader,\n StyledImageCell,\n StyledContentCell,\n StyledTileContent,\n StyledCardFooter,\n StyledSingleField\n} from './SelectionCard.styles';\nimport type {\n FieldValueItemPropsOmitName,\n ImagePlacement,\n ImageSize,\n SelectionCardProps,\n SelectionCardTile\n} from './SelectionCard.types';\nimport SelectionCardActions from './SelectionCardActions';\n\nregisterIcon(pictureIcon);\n\nconst isTileContent = (\n img: NonNullable<SelectionCardProps['image']>\n): img is SelectionCardTile & { placement?: ImagePlacement; size?: ImageSize } => {\n return 'foregroundColor' in img;\n};\n\nexport const focusableSelector =\n 'a[href], button, input, textarea, select, details, video[controls], audio[controls], div[role=\"button\"]';\n\nconst SingleField = ({\n id,\n 'data-testid': testId,\n truncate,\n value\n}: {\n id: string;\n 'data-testid'?: string;\n truncate?: boolean;\n value: ReactNode;\n}) => {\n const [el, setEl] = useElement<HTMLDivElement>(null);\n return (\n <>\n <StyledSingleField ref={setEl} id={id} data-testid={testId} truncate={truncate}>\n {value}\n </StyledSingleField>\n {truncate && el && (\n <Tooltip target={el} smart>\n {value}\n </Tooltip>\n )}\n </>\n );\n};\n\nconst useContentHeight = (\n contentRef: RefObject<HTMLElement>,\n targetRef: RefObject<HTMLElement>\n) => {\n useLayoutEffect(() => {\n if (!contentRef.current \|\| !targetRef.current) return;\n\n const resizeObserver = new ResizeObserver(() => {\n requestAnimationFrame(() => {\n targetRef.current?.style.setProperty(\n '--content-height',\n `${contentRef.current?.scrollHeight}px`\n );\n });\n });\n\n resizeObserver.observe(contentRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n};\n\nconst SelectionCard = forwardRef<\n RefElement<SelectionCardProps>,\n PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n 'aria-label': label,\n heading,\n disabled = false,\n readOnly,\n image,\n footer,\n fields = [],\n onClick,\n onKeyDown,\n actions,\n additionalInfo,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const contentRef = useRef<HTMLDivElement>(null);\n const containerRef = useConsolidatedRef(ref);\n\n const [focusOnInput, setFocusOnInput] = useState(false);\n const [hasInteractiveElements, setHasInteractiveElements] = useState(0);\n const [isBrokenImage, setIsBrokenImage] = useState(false);\n const isTile = image !== undefined && isTileContent(image);\n const tile = isTile ? image : undefined;\n const resolvedImageSrc = !isTile ? image?.src : undefined;\n const prevImageSrc = usePrevious(resolvedImageSrc);\n const testIds = useTestIds(testId, getSelectionCardTestIds);\n const contentId = `${id}-content`;\n\n const hasAdditionalContent = fields.length > 0;\n\n useEffect(() => {\n const focusables = containerRef.current?.querySelectorAll(focusableSelector);\n setHasInteractiveElements(focusables?.length \|\| 0);\n setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);\n focusables?.forEach(el =>\n el.hasAttribute('data-main-focus')\n ? el.setAttribute('tabindex', '0')\n : el.setAttribute('tabindex', '-1')\n );\n }, [additionalInfo, fields, actions]);\n\n useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);\n\n useFocusWithin([focusOnInput ? null : contentRef], focused =>\n contentRef.current\n ?.querySelectorAll(focusableSelector)\n .forEach(el =>\n focused ? el.setAttribute('tabindex', '0') : el.setAttribute('tabindex', '-1')\n )\n );\n\n useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [\n containerRef\n ]);\n\n useContentHeight(contentRef, containerRef);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (\n event.key === 'Enter' &&\n containerRef.current === getActiveElement() &&\n (!focusOnInput \|\| (focusOnInput && hasInteractiveElements > 1))\n ) {\n event.preventDefault();\n contentRef.current?.querySelectorAll<HTMLElement>(focusableSelector)[0]?.focus();\n }\n onKeyDown?.(event);\n },\n [containerRef, contentRef]\n );\n\n const imageContent = useMemo(() => {\n if (!image) return undefined;\n\n const innerContent = tile ? (\n <StyledTileContent\n data-tile-content\n foregroundColor={tile.foregroundColor}\n backgroundColor={tile.backgroundColor}\n size={tile.size}\n >\n {tile.icon ? <Icon name={tile.icon} /> : tile.text \|\| <Icon name='picture' />}\n </StyledTileContent>\n ) : (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledImageContainer}\n placement={image.placement}\n size={image.size}\n >\n {(isBrokenImage && resolvedImageSrc === prevImageSrc) \|\| resolvedImageSrc === undefined ? (\n <Icon name='picture' aria-label={t('image_load_error')} />\n ) : (\n <StyledImage\n data-testid={testIds.image}\n {...image}\n onError={() => setIsBrokenImage(true)}\n onLoad={() => setIsBrokenImage(false)}\n />\n )}\n </Flex>\n );\n\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledImageCell}\n placement={image.placement}\n size={image.size}\n isTile={isTile}\n style={\n !isTile && image.src && !isBrokenImage ? { '--bg-image': `url(${image.src})` } : undefined\n }\n >\n {innerContent}\n </Flex>\n );\n }, [\n isBrokenImage,\n prevImageSrc,\n image?.placement,\n image?.size,\n tile?.icon,\n tile?.text,\n tile?.foregroundColor,\n tile?.backgroundColor\n ]);\n\n let asProp: GridProps['as'] = StyledSelectionCard;\n if (image) {\n asProp = (image.placement ?? 'inline-start').startsWith('block')\n ? StyledSelectionCardStacked\n : StyledSelectionCardInline;\n }\n\n const isFieldValueListItemProps = (\n item: FieldValueListItemProps \| FieldValueItemPropsOmitName\n ): item is FieldValueListItemProps => {\n return hasProp(item, 'name');\n };\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n id={id}\n onClick={onClick}\n as={asProp}\n placement={image?.placement}\n size={image?.size}\n container={{ cols: '1fr', rows: 'auto' }}\n disabled={disabled}\n readOnly={readOnly}\n role={hasInteractiveElements ? 'group' : 'article'}\n aria-label={label}\n ref={containerRef}\n data-main-focus={focusOnInput ? undefined : true}\n tabIndex={focusOnInput ? undefined : 0}\n onKeyDown={handleKeyDown}\n >\n {image && image.placement !== 'inline-end' && imageContent}\n {/* element needed to get actual content height of the content container */}\n <StyledContentCell>\n <Flex\n as={StyledContentContainer}\n container={{ direction: 'column', gap: 0.75 }}\n ref={contentRef}\n >\n <Flex as={StyledHeader} container={{ alignItems: 'center', justify: 'between' }}>\n {isValidElement(heading) ? (\n cloneElement(heading, {\n ...{\n tabIndex: focusOnInput ? undefined : -1,\n additionalInfo,\n 'data-main-focus': focusOnInput ? true : undefined,\n 'aria-details': hasAdditionalContent ? contentId : undefined\n }\n })\n ) : (\n <span\n data-testid={testIds.label}\n aria-details={hasAdditionalContent ? contentId : undefined}\n >\n {heading}\n </span>\n )}\n {actions && (\n <SelectionCardActions\n data-testid={testIds.actions}\n actions={actions}\n disabled={disabled}\n contextualLabel={label}\n />\n )}\n </Flex>\n {hasAdditionalContent &&\n (fields.every(field => isFieldValueListItemProps(field)) ? (\n <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n ) : (\n <>\n {fields.length === 1 ? (\n <SingleField\n id={contentId}\n data-testid={testIds.content}\n truncate={fields[0].truncate}\n value={fields[0].value}\n />\n ) : (\n <Flex\n container={{ direction: 'column', gap: 1 }}\n as={StyledValueList}\n id={contentId}\n data-testid={testIds.content}\n >\n {fields.map(field => (\n <li key={field.id}>\n {field.truncate ? (\n <ShowMoreLess lines={3}>{field.value}</ShowMoreLess>\n ) : (\n field.value\n )}\n </li>\n ))}\n </Flex>\n )}\n </>\n ))}\n </Flex>\n {footer && <StyledCardFooter>{footer}</StyledCardFooter>}\n </StyledContentCell>\n {image?.placement === 'inline-end' && imageContent}\n </Grid>\n );\n});\n\nexport default withTestIds(SelectionCard, getSelectionCardTestIds);\n"]}

package/lib/components/SelectionCard/SelectionCardDisplay.d.ts CHANGED Viewed

@@ -1,8 +1,13 @@
 import type { ReactNode } from 'react';
 import type { HeadingTag, OmitStrict } from '../../types';
+import type { MetaListProps } from '../MetaList';
 import type { SelectionCardProps } from './SelectionCard.types';
 export interface SelectionCardDisplayProps extends OmitStrict<SelectionCardProps, 'heading' | 'disabled'> {
     label: NonNullable<ReactNode>;
+    /** Metadata items displayed below the heading. */
+    subheading?: MetaListProps['items'];
+    /** Optional visual displayed before the heading. */
+    visual?: ReactNode;
     /**
      * Uses specific heading tag for header.
      * @default h4

package/lib/components/SelectionCard/SelectionCardDisplay.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionCardDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAKtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,MAAM,WAAW,yBACf,SAAQ,UAAU,CAAC,kBAAkB,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9D,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;;;;~~AAmCD~~,wBAA0E"}
1	+ {"version":3,"file":"SelectionCardDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAKtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,MAAM,WAAW,yBACf,SAAQ,UAAU,CAAC,kBAAkB,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9D,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B,kDAAkD;IAClD,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;;;;AA4CD,wBAA0E"}

package/lib/components/SelectionCard/SelectionCardDisplay.js CHANGED Viewed

@@ -2,15 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useTestIds, useUID } from '../../hooks';
 import Text from '../Text';
+import SummaryItem from '../SummaryItem';
+import MetaList from '../MetaList';
 import { withTestIds } from '../../utils';
 import { getSelectionCardTestIds } from './SelectionCard.test-ids';
 import SelectionCard from './SelectionCard';
 const SelectionCardDisplay = forwardRef(function SelectionCardDisplay(props, ref) {
     const uid = useUID();
-    const { testId, id = uid, 'aria-label': ariaLabel, label, headingTag = 'h4', ...restProps } = props;
+    const { testId, id = uid, 'aria-label': ariaLabel, label, subheading, visual, headingTag = 'h4', ...restProps } = props;
     const labelId = `${id}-label`;
     const testIds = useTestIds(testId, getSelectionCardTestIds);
-    return (_jsx(SelectionCard, { ...restProps, testId: testIds, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelId, heading: _jsx(Text, { variant: headingTag, as: 'span', id: labelId, "data-testid": testIds.label, children: label }), ref: ref }));
+    return (_jsx(SelectionCard, { ...restProps, testId: testIds, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelId, heading: _jsx(SummaryItem, { primary: _jsx(Text, { variant: headingTag, as: 'span', id: labelId, "data-testid": testIds.label, children: label }), secondary: subheading?.length ? _jsx(MetaList, { items: subheading }) : undefined, visual: visual, layout: 'stacked' }), ref: ref }));
 });
 export default withTestIds(SelectionCardDisplay, getSelectionCardTestIds);
 //# sourceMappingURL=SelectionCardDisplay.js.map

package/lib/components/SelectionCard/SelectionCardDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionCardDisplay.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,aAAa,MAAM,iBAAiB,CAAC;~~AAY5C~~,MAAM,oBAAoB,GAAG,UAAU,CAGrC,SAAS,oBAAoB,CAAC,KAAK,EAAE,GAAG;IACxC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,UAAU,GAAG,IAAI,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,GAAG,EAAE,QAAQ,CAAC;IAE9B,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAE5D,OAAO,CACL,KAAC,aAAa,OACR,SAAS,EACb,MAAM,EAAE,OAAO,gBACH,SAAS,qBACJ,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAChD,OAAO,EACL,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,OAAO,iBAAe,OAAO,CAAC,KAAK,YACzE,KAAK,GACD,EAET,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\n\nimport type { HeadingTag, OmitStrict, RefElement } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\nimport { withTestIds } from '../../utils';\n\nimport type { SelectionCardProps } from './SelectionCard.types';\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport SelectionCard from './SelectionCard';\n\nexport interface SelectionCardDisplayProps\n extends OmitStrict<SelectionCardProps, 'heading' \| 'disabled'> {\n label: NonNullable<ReactNode>;\n /*\n Uses specific heading tag for header.\n * @default h4\n */\n headingTag?: HeadingTag;\n}\n\nconst SelectionCardDisplay = forwardRef<\n RefElement<SelectionCardDisplayProps>,\n PropsWithoutRef<SelectionCardDisplayProps>\n>(function SelectionCardDisplay(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n 'aria-label': ariaLabel,\n label,\n headingTag = 'h4',\n ...restProps\n } = props;\n const labelId = `${id}-label`;\n\n const testIds = useTestIds(testId, getSelectionCardTestIds);\n\n return (\n <SelectionCard\n {...restProps}\n testId={testIds}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabel ? undefined : labelId}\n heading={\n <Text variant={headingTag} as='span' id={labelId} data-testid={testIds.label}>\n {label}\n </Text>\n }\n ref={ref}\n />\n );\n});\n\nexport default withTestIds(SelectionCardDisplay, getSelectionCardTestIds);\n"]}
1	+ {"version":3,"file":"SelectionCardDisplay.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAgB5C,MAAM,oBAAoB,GAAG,UAAU,CAGrC,SAAS,oBAAoB,CAAC,KAAK,EAAE,GAAG;IACxC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,GAAG,IAAI,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,GAAG,EAAE,QAAQ,CAAC;IAE9B,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAE5D,OAAO,CACL,KAAC,aAAa,OACR,SAAS,EACb,MAAM,EAAE,OAAO,gBACH,SAAS,qBACJ,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAChD,OAAO,EACL,KAAC,WAAW,IACV,OAAO,EACL,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,OAAO,iBAAe,OAAO,CAAC,KAAK,YACzE,KAAK,GACD,EAET,SAAS,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,CAAC,SAAS,EAC3E,MAAM,EAAE,MAAM,EACd,MAAM,EAAC,SAAS,GAChB,EAEJ,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\n\nimport type { HeadingTag, OmitStrict, RefElement } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport MetaList from '../MetaList';\nimport type { MetaListProps } from '../MetaList';\nimport { withTestIds } from '../../utils';\n\nimport type { SelectionCardProps } from './SelectionCard.types';\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport SelectionCard from './SelectionCard';\n\nexport interface SelectionCardDisplayProps\n extends OmitStrict<SelectionCardProps, 'heading' \| 'disabled'> {\n label: NonNullable<ReactNode>;\n /** Metadata items displayed below the heading. /\n subheading?: MetaListProps['items'];\n /* Optional visual displayed before the heading. /\n visual?: ReactNode;\n /\n Uses specific heading tag for header.\n * @default h4\n */\n headingTag?: HeadingTag;\n}\n\nconst SelectionCardDisplay = forwardRef<\n RefElement<SelectionCardDisplayProps>,\n PropsWithoutRef<SelectionCardDisplayProps>\n>(function SelectionCardDisplay(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n 'aria-label': ariaLabel,\n label,\n subheading,\n visual,\n headingTag = 'h4',\n ...restProps\n } = props;\n const labelId = `${id}-label`;\n\n const testIds = useTestIds(testId, getSelectionCardTestIds);\n\n return (\n <SelectionCard\n {...restProps}\n testId={testIds}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabel ? undefined : labelId}\n heading={\n <SummaryItem\n primary={\n <Text variant={headingTag} as='span' id={labelId} data-testid={testIds.label}>\n {label}\n </Text>\n }\n secondary={subheading?.length ? <MetaList items={subheading} /> : undefined}\n visual={visual}\n layout='stacked'\n />\n }\n ref={ref}\n />\n );\n});\n\nexport default withTestIds(SelectionCardDisplay, getSelectionCardTestIds);\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "10.0.0-build.4.3",
+  "version": "10.0.0-build.4.5",
   "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",