npm - @pega/cosmos-react-work - Versions diffs - 9.0.0-build.9.9 → 9.0.0 - Mend

@pega/cosmos-react-work 9.0.0-build.9.9 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (276) hide show

package/lib/components/ConfigurableLayout/LayoutCell.js CHANGED Viewed

@@ -7,36 +7,36 @@ import widthConfigOptions from './options';
 import { itemMinWidth, cellGap } from './defaults';
 const StyledCell = styled.div(({ fillAvailable = true, percentageWidth, minWidth, theme }) => {
     return css `
-      /* variables */
-      --marginGap: calc(${cellGap} * ${theme.base.spacing});
-      --totalMargin: calc(2 * var(--marginGap));
-      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));
-      --maxWidth: calc(100% - var(--totalMargin));
+    /* variables */
+    --marginGap: calc(${cellGap} * ${theme.base.spacing});
+    --totalMargin: calc(2 * var(--marginGap));
+    --percentageBasis: calc(${percentageWidth} - var(--totalMargin));
+    --maxWidth: calc(100% - var(--totalMargin));
-      /* styles */
-      flex-wrap: wrap;
-      flex-basis: var(--percentageBasis);
-      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});
-      max-width: var(--maxWidth);
-      margin-block-end: var(--totalMargin);
-      margin-inline: var(--marginGap);
+    /* styles */
+    flex-wrap: wrap;
+    flex-basis: var(--percentageBasis);
+    min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});
+    max-width: var(--maxWidth);
+    margin-block-end: var(--totalMargin);
+    margin-inline: var(--marginGap);
-      ${!fillAvailable &&
+    ${!fillAvailable &&
         css `
-        flex-grow: 0;
-      `}
+      flex-grow: 0;
+    `}
-      ${StyledAppAnnouncement} {
-        align-self: stretch;
-      }
+    ${StyledAppAnnouncement} {
+      align-self: stretch;
+    }
-      > *,
-      > [data-config-root] > * {
-        width: 100%;
-        height: auto;
-        overflow-x: auto;
-      }
-    `;
+    > *,
+    > [data-config-root] > * {
+      width: 100%;
+      height: auto;
+      overflow-x: auto;
+    }
+  `;
 });
 StyledCell.defaultProps = defaultThemeProp;
 const validWidthUnits = ['px', 'ch', 'rem', 'em'];

package/lib/components/ConfigurableLayout/LayoutCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;~~AAGhD~~,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,~~CAC3B~~,CAAC,~~EACC~~,aAAa,GAAG,IAAI,~~EACpB~~,eAAe,~~EACf~~,QAAQ,~~EACR~~,KAAK,~~EAMN~~,EAAE,EAAE;~~IACH~~,OAAO,GAAG,CAAA;;~~0BAEY~~,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;~~gCAEzB~~,eAAe;;;;;;~~wCAMP~~,QAAQ,IAAI,YAAY;;;;;~~QAKxD~~,CAAC,aAAa;QAChB,GAAG,CAAA;;~~OAEF~~;;~~QAEC~~,qBAAqB;;;;;;;;;;~~KAUxB~~,CAAC;AACJ,CAAC,~~CACF~~,CAAC;~~AACF~~,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,GAAG,KAAK,IAAI,CAAC;QACtB,CAAC;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC,CAAC;YACD,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,GACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css } from 'styled-components';\~~nimport type { DefaultTheme } from 'styled-components';\~~n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div~~(\n (~~{\n ~~fillAvailable = true,\n percentageWidth,\n minWidth,\n theme\n~~ ~~}: {\n~~ fillAvailable: boolean;\n percentageWidth?: string;\n minWidth?: string \| undefined;\n theme: ~~DefaultTheme;\n~~ }) => {\n return css`\n /* variables /\n --marginGap: calc(${cellGap} ${theme.base.spacing});\n --totalMargin: calc(2 * var(--marginGap));\n --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n --maxWidth: calc(100% - var(--totalMargin));\n\n /* styles /\n flex-wrap: wrap;\n flex-basis: var(--percentageBasis);\n min-width: min(var(--maxWidth), ${minWidth \|\| itemMinWidth});\n max-width: var(--maxWidth);\n margin-block-end: var(--totalMargin);\n margin-inline: var(--marginGap);\n\n ${!fillAvailable &&\n css`\n flex-grow: 0;\n `}\n\n ${StyledAppAnnouncement} {\n align-self: stretch;\n }\n\n > ,\n > [data-config-root] > * {\n width: 100%;\n height: auto;\n overflow-x: auto;\n }\n `;\n }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n const percentageWidth = useMemo(() => {\n return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] \|\| '100%';\n }, [layoutConfig.width]);\n const minWidth = useMemo(() => {\n const value = layoutConfig.minWidth;\n\n if (typeof value === 'number') {\n return `${value}px`;\n }\n\n if (\n Array.isArray(value) &&\n value.length >= 2 &&\n typeof value[0] === 'number' &&\n validWidthUnits.includes(value[1])\n ) {\n return `${value[0]}${value[1]}`;\n }\n }, [layoutConfig.minWidth]);\n\n return config?.content ? (\n <Flex\n as={StyledCell}\n item={{\n grow: 1\n }}\n container={{ justify: 'stretch', alignItems: 'start' }}\n fillAvailable={layoutConfig.fillAvailable}\n percentageWidth={percentageWidth}\n minWidth={minWidth}\n >\n {config.content}\n </Flex>\n ) : null;\n};\n\nexport default LayoutCell;\n"]}
1	+ {"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAI1B,CAAC,EAAE,aAAa,GAAG,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;;wBAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;8BAEzB,eAAe;;;;;;sCAMP,QAAQ,IAAI,YAAY;;;;;MAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;KAEF;;MAEC,qBAAqB;;;;;;;;;;GAUxB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,GAAG,KAAK,IAAI,CAAC;QACtB,CAAC;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC,CAAC;YACD,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,GACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div<{\n fillAvailable: boolean;\n percentageWidth?: string;\n minWidth?: string \| undefined;\n}>(({ fillAvailable = true, percentageWidth, minWidth, theme }) => {\n return css`\n /* variables /\n --marginGap: calc(${cellGap} ${theme.base.spacing});\n --totalMargin: calc(2 * var(--marginGap));\n --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n --maxWidth: calc(100% - var(--totalMargin));\n\n /* styles /\n flex-wrap: wrap;\n flex-basis: var(--percentageBasis);\n min-width: min(var(--maxWidth), ${minWidth \|\| itemMinWidth});\n max-width: var(--maxWidth);\n margin-block-end: var(--totalMargin);\n margin-inline: var(--marginGap);\n\n ${!fillAvailable &&\n css`\n flex-grow: 0;\n `}\n\n ${StyledAppAnnouncement} {\n align-self: stretch;\n }\n\n > ,\n > [data-config-root] > * {\n width: 100%;\n height: auto;\n overflow-x: auto;\n }\n `;\n});\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n const percentageWidth = useMemo(() => {\n return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] \|\| '100%';\n }, [layoutConfig.width]);\n const minWidth = useMemo(() => {\n const value = layoutConfig.minWidth;\n\n if (typeof value === 'number') {\n return `${value}px`;\n }\n\n if (\n Array.isArray(value) &&\n value.length >= 2 &&\n typeof value[0] === 'number' &&\n validWidthUnits.includes(value[1])\n ) {\n return `${value[0]}${value[1]}`;\n }\n }, [layoutConfig.minWidth]);\n\n return config?.content ? (\n <Flex\n as={StyledCell}\n item={{\n grow: 1\n }}\n container={{ justify: 'stretch', alignItems: 'start' }}\n fillAvailable={layoutConfig.fillAvailable}\n percentageWidth={percentageWidth}\n minWidth={minWidth}\n >\n {config.content}\n </Flex>\n ) : null;\n};\n\nexport default LayoutCell;\n"]}

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

@@ -1,5 +1,11 @@
 import type { ReactNode, Ref } from 'react';
 import type { ForwardRefForwardPropsComponent, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export interface ConfirmationAction {
+    /** Label text for the button */
+    label: string;
+    /** Callback when the button is clicked */
+    onClick: () => void;
+}
 export interface ConfirmationProps extends NoChildrenProp {
     /** The title of the confirmation */
     title?: string;
@@ -11,6 +17,10 @@ export interface ConfirmationProps extends NoChildrenProp {
     tasks?: ReactNode;
     /** Called when the done/close button is clicked */
     onClose?: () => void;
+    /** Secondary action button (e.g. "View ticket") */
+    secondaryAction?: ConfirmationAction;
+    /** Primary action button (e.g. "Return Home") */
+    primaryAction?: ConfirmationAction;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLElement>;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAc7D,OAAO,KAAK,EACV,+BAA+B,EAC/B,kBAAkB,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAUD,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,~~CAiDpE~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAc7D,OAAO,KAAK,EACV,+BAA+B,EAC/B,kBAAkB,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,kBAAkB;IACjC,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,iDAAiD;IACjD,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAUD,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CAsEpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -14,7 +14,7 @@ const StyledConfirmationDetails = styled.div(() => {
     }
   `;
 });
-const Confirmation = forwardRef(function Confirmation({ title, details, whatsNext, tasks, onClose, ...restProps }, ref) {
+const Confirmation = forwardRef(function Confirmation({ title, details, whatsNext, tasks, onClose, secondaryAction, primaryAction, ...restProps }, ref) {
     const t = useI18n();
     const detailsContext = useContext(DetailsContext);
     const detailsCtxValue = useMemo(() => {
@@ -23,7 +23,7 @@ const Confirmation = forwardRef(function Confirmation({ title, details, whatsNex
             depth: 4
         };
     }, [detailsContext]);
-    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [title && _jsx(Text, { variant: 'h3', children: title }), details && (_jsx(DetailsContext.Provider, { value: detailsCtxValue, children: _jsx(StyledConfirmationDetails, { children: details }) })), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks, onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsxs(Button, { onClick: onClose, variant: 'primary', children: [t('done'), title ? _jsx(VisuallyHiddenText, { children: `- ${title}` }) : null] }) }))] }) }) }));
+    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [title && _jsx(Text, { variant: 'h3', children: title }), details && (_jsx(DetailsContext.Provider, { value: detailsCtxValue, children: _jsx(StyledConfirmationDetails, { children: details }) })), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks, (onClose || secondaryAction || primaryAction) && (_jsxs(Flex, { container: { justify: 'end', gap: 1 }, children: [secondaryAction && (_jsx(Button, { onClick: secondaryAction.onClick, variant: 'secondary', children: secondaryAction.label })), primaryAction && (_jsx(Button, { onClick: primaryAction.onClick, variant: 'primary', children: primaryAction.label })), onClose && (_jsxs(Button, { onClick: onClose, variant: 'primary', children: [t('done'), title ? _jsx(VisuallyHiddenText, { children: `- ${title}` }) : null] }))] }))] }) }) }));
 });
 export default Confirmation;
 //# sourceMappingURL=Confirmation.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvF,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAiBpD~~,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAChD,OAAO,GAAG,CAAA;QACJ,aAAa,MAAM,0BAA0B;;;GAGlD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAuD,UAAU,CACjF,SAAS,YAAY,CACnB,~~EAAE~~,KAAK,~~EAAE~~,OAAO,~~EAAE~~,SAAS,~~EAAE~~,KAAK,~~EAAE~~,OAAO,~~EAAE~~,GAAG,SAAS,~~EAAsC~~,~~EAC/F~~,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO;YACL,GAAG,cAAc;YACjB,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC7C,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAE1C,OAAO,IAAI,CACV,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YAC7C,KAAC,yBAAyB,cAAE,OAAO,GAA6B,GACxC,CAC3B,EAEA,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EAEA,KAAK,EAEL,OAAO,IAAI,~~CACV~~,~~KAAC~~,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,~~YACjC~~,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,aACxC,CAAC,CAAC,MAAM,CAAC,EACT,KAAK,CAAC,CAAC,CAAC,KAAC,kBAAkB,cAAE,KAAK,KAAK,EAAE,GAAsB,CAAC,CAAC,CAAC,IAAI,IAChE,~~GACJ~~,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, useContext, useMemo } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardContent,\n Flex,\n Text,\n useI18n,\n UnorderedList,\n Button,\n defaultThemeProp,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n UnorderedListProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n /** The title of the confirmation /\n title?: string;\n /* Region for a Field Value List component /\n details?: ReactNode;\n /* Array of React nodes to be put into a list /\n whatsNext?: UnorderedListProps['items'];\n /* Region for a Tasks component /\n tasks?: ReactNode;\n /* Called when the done/close button is clicked /\n onClose?: () => void;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledConfirmationDetails = styled.div(() => {\n return css`\n > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {\n margin-block-start: 0;\n }\n `;\n});\n\nconst Confirmation: ForwardRefForwardPropsComponent<ConfirmationProps> = forwardRef(\n function Confirmation(\n { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n ref\n ) {\n const t = useI18n();\n const detailsContext = useContext(DetailsContext);\n\n const detailsCtxValue = useMemo(() => {\n return {\n ...detailsContext,\n depth: 4\n };\n }, [detailsContext]);\n\n return (\n <Card {...restProps} ref={ref}>\n <CardContent>\n <Flex container={{ gap: 3, direction: 'column' }}>\n {title && <Text variant='h3'>{title}</Text>}\n\n {details && (\n <DetailsContext.Provider value={detailsCtxValue}>\n <StyledConfirmationDetails>{details}</StyledConfirmationDetails>\n </DetailsContext.Provider>\n )}\n\n {whatsNext && (\n <Flex container={{ gap: 1, direction: 'column' }}>\n <Text variant='h4'>{t('confirmation_whats_next')}</Text>\n <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n </Flex>\n )}\n\n {tasks}\n\n {onClose && (\n <Flex container={{ justify: 'end' }}>\n <Button onClick={~~onClose~~} variant='primary'>\n {t('done')}\n {title ? <VisuallyHiddenText>{`- ${title}`}</VisuallyHiddenText> : null}\n </Button>\n </Flex>\n )}\n </Flex>\n </CardContent>\n </Card>\n );\n }\n);\n\nexport default Confirmation;\n"]}
1	+ {"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useMemo } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardContent,\n Flex,\n Text,\n useI18n,\n UnorderedList,\n Button,\n defaultThemeProp,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n UnorderedListProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationAction {\n /** Label text for the button /\n label: string;\n /* Callback when the button is clicked /\n onClick: () => void;\n}\n\nexport interface ConfirmationProps extends NoChildrenProp {\n /* The title of the confirmation /\n title?: string;\n /* Region for a Field Value List component /\n details?: ReactNode;\n /* Array of React nodes to be put into a list /\n whatsNext?: UnorderedListProps['items'];\n /* Region for a Tasks component /\n tasks?: ReactNode;\n /* Called when the done/close button is clicked /\n onClose?: () => void;\n /* Secondary action button (e.g. \"View ticket\") /\n secondaryAction?: ConfirmationAction;\n /* Primary action button (e.g. \"Return Home\") /\n primaryAction?: ConfirmationAction;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledConfirmationDetails = styled.div(() => {\n return css`\n > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {\n margin-block-start: 0;\n }\n `;\n});\n\nconst Confirmation: ForwardRefForwardPropsComponent<ConfirmationProps> = forwardRef(\n function Confirmation(\n {\n title,\n details,\n whatsNext,\n tasks,\n onClose,\n secondaryAction,\n primaryAction,\n ...restProps\n }: PropsWithoutRef<ConfirmationProps>,\n ref\n ) {\n const t = useI18n();\n const detailsContext = useContext(DetailsContext);\n\n const detailsCtxValue = useMemo(() => {\n return {\n ...detailsContext,\n depth: 4\n };\n }, [detailsContext]);\n\n return (\n <Card {...restProps} ref={ref}>\n <CardContent>\n <Flex container={{ gap: 3, direction: 'column' }}>\n {title && <Text variant='h3'>{title}</Text>}\n\n {details && (\n <DetailsContext.Provider value={detailsCtxValue}>\n <StyledConfirmationDetails>{details}</StyledConfirmationDetails>\n </DetailsContext.Provider>\n )}\n\n {whatsNext && (\n <Flex container={{ gap: 1, direction: 'column' }}>\n <Text variant='h4'>{t('confirmation_whats_next')}</Text>\n <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n </Flex>\n )}\n\n {tasks}\n\n {(onClose \|\| secondaryAction \|\| primaryAction) && (\n <Flex container={{ justify: 'end', gap: 1 }}>\n {secondaryAction && (\n <Button onClick={secondaryAction.onClick} variant='secondary'>\n {secondaryAction.label}\n </Button>\n )}\n {primaryAction && (\n <Button onClick={primaryAction.onClick} variant='primary'>\n {primaryAction.label}\n </Button>\n )}\n {onClose && (\n <Button onClick={onClose} variant='primary'>\n {t('done')}\n {title ? <VisuallyHiddenText>{`- ${title}`}</VisuallyHiddenText> : null}\n </Button>\n )}\n </Flex>\n )}\n </Flex>\n </CardContent>\n </Card>\n );\n }\n);\n\nexport default Confirmation;\n"]}

package/lib/components/Confirmation/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { default } from './Confirmation';
-export type { ConfirmationProps } from './Confirmation';
+export type { ConfirmationProps, ConfirmationAction } from './Confirmation';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Confirmation/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Confirmation/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Confirmation';\nexport type { ConfirmationProps } from './Confirmation';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Confirmation';\nexport type { ConfirmationProps, ConfirmationAction } from './Confirmation';\n"]}

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

@@ -1,5 +1,5 @@
 import type { PropsWithoutRef, ReactNode, Ref } from 'react';
-import type { AdditionalInfoProps, TestIdProp } from '@pega/cosmos-react-core';
+import type { AdditionalInfoProps, BannerProps, TestIdProp } from '@pega/cosmos-react-core';
 export type DetailsProps = TestIdProp & {
     /**
      * FieldValueItems to display as highlighted data above children
@@ -27,6 +27,7 @@ export type DetailsProps = TestIdProp & {
     arrangement?: 'narrowWide' | 'wideNarrow';
     /** Style variant applied to element */
     variant?: 'field-group';
+    banner?: BannerProps;
     ref?: Ref<HTMLDivElement>;
 } & ({
     /** Text used as heading of list */
@@ -49,7 +50,7 @@ export type DetailsProps = TestIdProp & {
     defaultCollapsed?: never;
 });
 declare const _default: import("react").ForwardRefExoticComponent<PropsWithoutRef<DetailsProps> & import("react").RefAttributes<HTMLDivElement>> & {
-    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse"]>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse", "banner"]>;
 };
 export default _default;
 //# sourceMappingURL=Details.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAmB7D,OAAO,KAAK,~~EAAE~~,mBAAmB,~~EAAc~~,UAAU,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAgB3F~~,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,EACH;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;QACV,CAAC,CAAC,EAAE,KAAK,CAAC;KACX,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;KACX,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;KACd,CAAC;IACN,6BAA6B;IAC7B,WAAW,CAAC,EAAE,YAAY,GAAG,YAAY,CAAC;IAC1C,uCAAuC;IACvC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,GAAG,CACE;IACE,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,gBAAgB,CAAC,EAAE,KAAK,CAAC;CAC1B,CACJ,CAAC;;;;~~AAiOJ~~,wBAAuD"}
1	+ {"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAmB7D,OAAO,KAAK,EACV,mBAAmB,EACnB,WAAW,EAEX,UAAU,EACX,MAAM,yBAAyB,CAAC;AAkBjC,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,EACH;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;QACV,CAAC,CAAC,EAAE,KAAK,CAAC;KACX,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;KACX,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;KACd,CAAC;IACN,6BAA6B;IAC7B,WAAW,CAAC,EAAE,YAAY,GAAG,YAAY,CAAC;IAC1C,uCAAuC;IACvC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,GAAG,CACE;IACE,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,gBAAgB,CAAC,EAAE,KAAK,CAAC;CAC1B,CACJ,CAAC;;;;AA8OJ,wBAAuD"}

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';
 import { remToPx } from 'polished';
-import { AdditionalInfo, Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n, HTML, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { AdditionalInfo, Banner, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n, HTML, useTestIds, withTestIds } from '@pega/cosmos-react-core';
 import { getDetailsTestIds } from './Details.test-ids';
 import DetailsContext from './DetailsContext';
-import { StyledFieldValueGroupLabel, StyledDetails, StyledHighlightedDetailList, StyledDetailDescription, StyledDetailColumns, columnGapMultiplier, StyledDetailColumn } from './Details.styles';
+import { StyledFieldValueGroupLabel, StyledDetails, StyledHighlightedDetailList, StyledDetailDescription, StyledDetailBanner, StyledDetailColumns, columnGapMultiplier, StyledDetailColumn, StyledNameText } from './Details.styles';
 const oneRemInPx = parseInt(remToPx(1), 10);
-const Details = forwardRef(function Details({ testId, highlightedData, columns, name, description, arrangement, variant, collapsible = false, defaultCollapsed = false, additionalInfo: additionalInfoProp }, ref) {
+const Details = forwardRef(function Details({ testId, highlightedData, columns, name, description, arrangement, variant, banner, collapsible = false, defaultCollapsed = false, additionalInfo: additionalInfoProp }, ref) {
     const testIds = useTestIds(testId, getDetailsTestIds);
     const t = useI18n();
     const { longestLabelLength, depth, ...context } = useContext(DetailsContext);
@@ -78,19 +78,20 @@ const Details = forwardRef(function Details({ testId, highlightedData, columns,
     // Memoized Elements
     const applyVariant = asFieldGroup ? 'field-group' : undefined;
     const nameText = useMemo(() => {
-        return _jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name });
+        return (_jsx(StyledNameText, { variant: `h${Math.min(headingDepth, 6)}`, children: name }));
     }, [name, headingDepth]);
     const additionalInfo = useMemo(() => {
         return name && additionalInfoProp ? (_jsx(AdditionalInfo, { heading: additionalInfoProp.heading, contextualLabel: name, children: additionalInfoProp.content })) : undefined;
     }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);
     const content = useMemo(() => {
-        return (_jsxs(_Fragment, { children: [description && (_jsx(StyledDetailDescription, { "data-testid": testIds.description, children: _jsx(HTML, { as: 'p', content: description }) })), highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { "data-testid": testIds.highlightedData, as: StyledHighlightedDetailList, container: { wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }, children: highlightedData.map((child, i) => (
+        return (_jsxs(_Fragment, { children: [banner && (_jsx(StyledDetailBanner, { children: _jsx(Banner, { "data-testid": testIds.banner, ...banner }) })), description && (_jsx(StyledDetailDescription, { "data-testid": testIds.description, children: _jsx(HTML, { as: 'p', content: description }) })), highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { "data-testid": testIds.highlightedData, as: StyledHighlightedDetailList, container: { wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }, role: 'none', children: highlightedData.map((child, i) => (
                             // eslint-disable-next-line react/no-array-index-key
                             _jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), _jsxs(Flex, { as: StyledDetailColumns, container: {
                         direction: 'row',
                         colGap: columnGapMultiplier
                     }, "data-testid": testIds.data, arrangement: arrangement, variant: applyVariant, columnCount: applyColumnCount, children: [_jsx(StyledDetailColumn, { children: columns.a }), columns.b && _jsx(StyledDetailColumn, { children: columns.b }), columns.c && _jsx(StyledDetailColumn, { children: columns.c })] })] }));
     }, [
+        banner,
         highlightedData,
         columnCount,
         columns.a,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n AdditionalInfo,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ExpandCollapse,\n Button,\n Flex,\n Icon,\n useChToPxConversionFactor,\n useI18n,\n HTML,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { AdditionalInfoProps, HeadingTag, TestIdProp } from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledHighlightedDetailList,\n StyledDetailDescription,\n StyledDetailColumns,\n columnGapMultiplier,\n StyledDetailColumn\n} from './Details.styles';\n\ntype ColumnCount = 1 \| 2 \| 3;\n\nexport type DetailsProps = TestIdProp & {\n /*\n FieldValueItems to display as highlighted data above children\n /\n highlightedData?: ReactNode[];\n /* Copy placed in paragraph below the name /\n description?: string;\n /\n Template children separated into 1-3 columns {a, b, c}\n /\n columns:\n \| {\n a: ReactNode;\n b?: never;\n c?: never;\n }\n \| {\n a: ReactNode;\n b: ReactNode;\n c?: never;\n }\n \| {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n };\n /* Arrangement of columns /\n arrangement?: 'narrowWide' \| 'wideNarrow';\n /* Style variant applied to element /\n variant?: 'field-group';\n ref?: Ref<HTMLDivElement>;\n} & (\n \| {\n /* Text used as heading of list /\n name: string;\n /* Pass a heading and content to show additional information on the list /\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /\n Whether the items children can be collapsed (only applies if name is provided)\n * @default false\n /\n collapsible?: boolean;\n defaultCollapsed?: boolean;\n }\n \| {\n name?: undefined;\n additionalInfo?: never;\n collapsible?: never;\n defaultCollapsed?: never;\n }\n );\n\nconst oneRemInPx = parseInt(remToPx(1), 10);\n\nconst Details = forwardRef(function Details(\n {\n testId,\n highlightedData,\n columns,\n name,\n description,\n arrangement,\n variant,\n collapsible = false,\n defaultCollapsed = false,\n additionalInfo: additionalInfoProp\n }: PropsWithoutRef<DetailsProps>,\n ref: DetailsProps['ref']\n) {\n const testIds = useTestIds(testId, getDetailsTestIds);\n const t = useI18n();\n const { longestLabelLength, depth, ...context } = useContext(DetailsContext);\n\n const containerRef = useConsolidatedRef(ref);\n const [open, setOpen] = useState(!defaultCollapsed);\n\n // Observer and state for mobile.\n const columnCount = (() => {\n let count: ColumnCount = 1;\n\n if (columns.b) count = 2;\n if (columns.c) count = 3;\n\n return count;\n })();\n const {\n base: {\n 'content-width': { sm: smContentWidth }\n }\n } = useTheme();\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const fitsThreeColumns = useBreakpoint('xl', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n const fitsTwoColumns = useBreakpoint('md', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n const [contentMobileView, setContentMobileView] = useState(false);\n\n const applyColumnCount = (() => {\n if (columnCount !== 1) {\n if (columnCount === 3 && fitsThreeColumns) {\n return 3;\n }\n if (fitsTwoColumns) {\n return 2;\n }\n return 1;\n }\n\n return columnCount;\n })();\n\n useEffect(() => {\n const checkBreakpoint = (elementWidth: number) => {\n const minWidthPx = parseInt(smContentWidth, 10) chToPxConversionFactor;\n const colGapPxAllowance = oneRemInPx * (0.5 * columnGapMultiplier) * (columnCount - 1);\n const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n setContentMobileView(elementWidth < mobileViewBreakpoint);\n };\n const resizeObserver = new ResizeObserver(entries => {\n const containerPxWidth = entries[0].contentRect.width;\n checkBreakpoint(containerPxWidth);\n });\n\n if (containerRef.current) {\n checkBreakpoint(containerRef.current.offsetWidth);\n resizeObserver.observe(containerRef.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [columnCount]);\n\n // Context\n const headingDepth = depth ? Math.max(depth, 2) : 2;\n const asFieldGroup = variant === 'field-group' && !!name && !description && !highlightedData;\n\n const contextValue = useMemo(() => {\n return {\n ...context,\n mobileView: contentMobileView,\n depth: name ? headingDepth + 1 : headingDepth,\n inFieldGroup: context.inFieldGroup ? true : asFieldGroup,\n longestLabelLength\n };\n }, [name, headingDepth, longestLabelLength, contentMobileView, asFieldGroup, context]);\n\n // Memoized Elements\n const applyVariant = asFieldGroup ? 'field-group' : undefined;\n\n const nameText = useMemo(() => {\n return <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n }, [name, headingDepth]);\n\n const additionalInfo = useMemo(() => {\n return name && additionalInfoProp ? (\n <AdditionalInfo heading={additionalInfoProp.heading} contextualLabel={name}>\n {additionalInfoProp.content}\n </AdditionalInfo>\n ) : undefined;\n }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n const content = useMemo(() => {\n return (\n <>\n {description && (\n <StyledDetailDescription data-testid={testIds.description}>\n <HTML as='p' content={description} />\n </StyledDetailDescription>\n )}\n\n {highlightedData && (\n <>\n <Flex\n data-testid={testIds.highlightedData}\n as={StyledHighlightedDetailList}\n container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n >\n {highlightedData.map((child, i) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={i}>{child}</Fragment>\n ))}\n </Flex>\n\n <hr />\n </>\n )}\n\n <Flex\n as={StyledDetailColumns}\n container={{\n direction: 'row',\n colGap: columnGapMultiplier\n }}\n data-testid={testIds.data}\n arrangement={arrangement}\n variant={applyVariant}\n columnCount={applyColumnCount}\n >\n <StyledDetailColumn>{columns.a}</StyledDetailColumn>\n {columns.b && <StyledDetailColumn>{columns.b}</StyledDetailColumn>}\n {columns.c && <StyledDetailColumn>{columns.c}</StyledDetailColumn>}\n </Flex>\n </>\n );\n }, [\n highlightedData,\n columnCount,\n columns.a,\n columns.b,\n columns.c,\n arrangement,\n testIds,\n fitsTwoColumns,\n fitsThreeColumns,\n description\n ]);\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails\n data-testid={testIds.root}\n ref={containerRef}\n variant={applyVariant}\n columnCount={applyColumnCount}\n >\n {name && (\n <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {collapsible ? (\n <>\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n <Icon name='caret-right' />\n {nameText}\n </Flex>\n </Button>\n {additionalInfo}\n </>\n ) : (\n <>\n {nameText}\n {additionalInfo}\n </>\n )}\n </Flex>\n </StyledFieldValueGroupLabel>\n )}\n\n {collapsible ? (\n <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n {content}\n </ExpandCollapse>\n ) : (\n content\n )}\n </StyledDetails>\n </DetailsContext.Provider>\n );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}
1	+ {"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n AdditionalInfo,\n Banner,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ExpandCollapse,\n Button,\n Flex,\n Icon,\n useChToPxConversionFactor,\n useI18n,\n HTML,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n AdditionalInfoProps,\n BannerProps,\n HeadingTag,\n TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledHighlightedDetailList,\n StyledDetailDescription,\n StyledDetailBanner,\n StyledDetailColumns,\n columnGapMultiplier,\n StyledDetailColumn,\n StyledNameText\n} from './Details.styles';\n\ntype ColumnCount = 1 \| 2 \| 3;\n\nexport type DetailsProps = TestIdProp & {\n /*\n FieldValueItems to display as highlighted data above children\n /\n highlightedData?: ReactNode[];\n /* Copy placed in paragraph below the name /\n description?: string;\n /\n Template children separated into 1-3 columns {a, b, c}\n /\n columns:\n \| {\n a: ReactNode;\n b?: never;\n c?: never;\n }\n \| {\n a: ReactNode;\n b: ReactNode;\n c?: never;\n }\n \| {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n };\n /* Arrangement of columns /\n arrangement?: 'narrowWide' \| 'wideNarrow';\n /* Style variant applied to element /\n variant?: 'field-group';\n banner?: BannerProps;\n ref?: Ref<HTMLDivElement>;\n} & (\n \| {\n /* Text used as heading of list /\n name: string;\n /* Pass a heading and content to show additional information on the list /\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /\n Whether the items children can be collapsed (only applies if name is provided)\n * @default false\n /\n collapsible?: boolean;\n defaultCollapsed?: boolean;\n }\n \| {\n name?: undefined;\n additionalInfo?: never;\n collapsible?: never;\n defaultCollapsed?: never;\n }\n );\n\nconst oneRemInPx = parseInt(remToPx(1), 10);\n\nconst Details = forwardRef(function Details(\n {\n testId,\n highlightedData,\n columns,\n name,\n description,\n arrangement,\n variant,\n banner,\n collapsible = false,\n defaultCollapsed = false,\n additionalInfo: additionalInfoProp\n }: PropsWithoutRef<DetailsProps>,\n ref: DetailsProps['ref']\n) {\n const testIds = useTestIds(testId, getDetailsTestIds);\n const t = useI18n();\n const { longestLabelLength, depth, ...context } = useContext(DetailsContext);\n\n const containerRef = useConsolidatedRef(ref);\n const [open, setOpen] = useState(!defaultCollapsed);\n\n // Observer and state for mobile.\n const columnCount = (() => {\n let count: ColumnCount = 1;\n\n if (columns.b) count = 2;\n if (columns.c) count = 3;\n\n return count;\n })();\n const {\n base: {\n 'content-width': { sm: smContentWidth }\n }\n } = useTheme();\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const fitsThreeColumns = useBreakpoint('xl', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n const fitsTwoColumns = useBreakpoint('md', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n const [contentMobileView, setContentMobileView] = useState(false);\n\n const applyColumnCount = (() => {\n if (columnCount !== 1) {\n if (columnCount === 3 && fitsThreeColumns) {\n return 3;\n }\n if (fitsTwoColumns) {\n return 2;\n }\n return 1;\n }\n\n return columnCount;\n })();\n\n useEffect(() => {\n const checkBreakpoint = (elementWidth: number) => {\n const minWidthPx = parseInt(smContentWidth, 10) chToPxConversionFactor;\n const colGapPxAllowance = oneRemInPx * (0.5 * columnGapMultiplier) * (columnCount - 1);\n const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n setContentMobileView(elementWidth < mobileViewBreakpoint);\n };\n const resizeObserver = new ResizeObserver(entries => {\n const containerPxWidth = entries[0].contentRect.width;\n checkBreakpoint(containerPxWidth);\n });\n\n if (containerRef.current) {\n checkBreakpoint(containerRef.current.offsetWidth);\n resizeObserver.observe(containerRef.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [columnCount]);\n\n // Context\n const headingDepth = depth ? Math.max(depth, 2) : 2;\n const asFieldGroup = variant === 'field-group' && !!name && !description && !highlightedData;\n\n const contextValue = useMemo(() => {\n return {\n ...context,\n mobileView: contentMobileView,\n depth: name ? headingDepth + 1 : headingDepth,\n inFieldGroup: context.inFieldGroup ? true : asFieldGroup,\n longestLabelLength\n };\n }, [name, headingDepth, longestLabelLength, contentMobileView, asFieldGroup, context]);\n\n // Memoized Elements\n const applyVariant = asFieldGroup ? 'field-group' : undefined;\n\n const nameText = useMemo(() => {\n return (\n <StyledNameText variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>\n {name}\n </StyledNameText>\n );\n }, [name, headingDepth]);\n\n const additionalInfo = useMemo(() => {\n return name && additionalInfoProp ? (\n <AdditionalInfo heading={additionalInfoProp.heading} contextualLabel={name}>\n {additionalInfoProp.content}\n </AdditionalInfo>\n ) : undefined;\n }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n const content = useMemo(() => {\n return (\n <>\n {banner && (\n <StyledDetailBanner>\n <Banner data-testid={testIds.banner} {...banner} />\n </StyledDetailBanner>\n )}\n\n {description && (\n <StyledDetailDescription data-testid={testIds.description}>\n <HTML as='p' content={description} />\n </StyledDetailDescription>\n )}\n\n {highlightedData && (\n <>\n <Flex\n data-testid={testIds.highlightedData}\n as={StyledHighlightedDetailList}\n container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n role='none'\n >\n {highlightedData.map((child, i) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={i}>{child}</Fragment>\n ))}\n </Flex>\n\n <hr />\n </>\n )}\n\n <Flex\n as={StyledDetailColumns}\n container={{\n direction: 'row',\n colGap: columnGapMultiplier\n }}\n data-testid={testIds.data}\n arrangement={arrangement}\n variant={applyVariant}\n columnCount={applyColumnCount}\n >\n <StyledDetailColumn>{columns.a}</StyledDetailColumn>\n {columns.b && <StyledDetailColumn>{columns.b}</StyledDetailColumn>}\n {columns.c && <StyledDetailColumn>{columns.c}</StyledDetailColumn>}\n </Flex>\n </>\n );\n }, [\n banner,\n highlightedData,\n columnCount,\n columns.a,\n columns.b,\n columns.c,\n arrangement,\n testIds,\n fitsTwoColumns,\n fitsThreeColumns,\n description\n ]);\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails\n data-testid={testIds.root}\n ref={containerRef}\n variant={applyVariant}\n columnCount={applyColumnCount}\n >\n {name && (\n <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {collapsible ? (\n <>\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n <Icon name='caret-right' />\n {nameText}\n </Flex>\n </Button>\n {additionalInfo}\n </>\n ) : (\n <>\n {nameText}\n {additionalInfo}\n </>\n )}\n </Flex>\n </StyledFieldValueGroupLabel>\n )}\n\n {collapsible ? (\n <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n {content}\n </ExpandCollapse>\n ) : (\n content\n )}\n </StyledDetails>\n </DetailsContext.Provider>\n );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}

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

@@ -1,16 +1,11 @@
 import type { DefaultTheme } from 'styled-components';
-import type { StyledFieldValueListProps } from '@pega/cosmos-react-core';
+import type { StyledFieldValueListProps, PropsWithDefaults } from '@pega/cosmos-react-core';
 import type { DetailsProps } from './Details';
 interface StyledDetailsListProps extends StyledFieldValueListProps {
     /** Whether individual list items all have labels stacks on top */
     stacked?: boolean;
     /** The character length applied to all list labels */
     labelLength?: number;
-    /**
-     * Whether to apply narrow list styles
-     * @default false
-     */
-    narrow?: boolean;
     theme: DefaultTheme;
 }
 interface StyledDetailColumnsProps {
@@ -29,19 +24,26 @@ interface StyledDetailColumnsProps {
     variant?: DetailsProps['variant'];
     theme: DefaultTheme;
 }
+type StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;
 export declare const columnGapMultiplier = 5.5;
 export declare const oneColumnDetailsColumnWidth = "100ch";
 export declare const multiColumnDetailsColumnWidth = "80ch";
-export declare const StyledFieldValueGroupLabel: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledDetailDescription: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledDetailColumn: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledHighlightedDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
-export declare const StyledInlineFieldValueItem: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledDetailsList: import("styled-components").StyledComponent<"dl", DefaultTheme, StyledFieldValueListProps & Pick<StyledDetailsListProps, keyof StyledDetailsListProps> & Required<Pick<StyledDetailsListProps, never>>, never>;
-export declare const StyledDetails: import("styled-components").StyledComponent<"div", DefaultTheme, {
+export declare const StyledNameText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").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("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledFieldValueGroupLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledDetailDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledDetailBanner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledDetailColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledHighlightedDetailList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, never>> & string;
+export declare const StyledInlineFieldValueItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledDetailsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "variant"> & StyledFieldValueListProps, "ref"> & {
+    ref?: ((instance: HTMLDListElement | 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<HTMLDListElement> | null | undefined;
+}, StyledDetailsListPropsWithDefaults>> & string;
+export declare const StyledDetails: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     variant?: DetailsProps["variant"];
     columnCount?: number;
-}, never>;
-export declare const StyledDetailColumns: import("styled-components").StyledComponent<"div", DefaultTheme, StyledDetailColumnsProps, never>;
+}>> & string;
+export declare const StyledDetailColumns: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledDetailColumnsProps>> & string;
 export {};
 //# sourceMappingURL=Details.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;~~AActD~~,OAAO,KAAK,EACV,yBAAyB,~~EAG1B~~,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB~~;;;OAGG;IACH~~,~~MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,~~KAAK,EAAE,YAAY,CAAC;CACrB;AAED,UAAU,wBAAwB;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,YAAY,CAAC;CACrB;~~AAKD~~,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,2BAA2B,UAAU,CAAC;AACnD,eAAO,MAAM,6BAA6B,SAAS,CAAC;AAEpD,eAAO,MAAM,0BAA0B,~~6EAkCrC~~,CAAC;AAIH,eAAO,MAAM,uBAAuB,~~6EAYlC~~,CAAC;AAIH,eAAO,MAAM,kBAAkB,~~6EAW7B~~,CAAC;AAIH,eAAO,MAAM,2BAA2B,~~4EAuBtC~~,CAAC;AAIH,eAAO,MAAM,0BAA0B,~~6EAItC~~,CAAC;AAEF,eAAO,MAAM,iBAAiB,~~gNAgI5B,~~CAAC;AAgBH,eAAO,MAAM,aAAa;cACd,YAAY,CAAC,SAAS,CAAC;kBACnB,MAAM;~~SAmEpB~~,CAAC;AAIH,eAAO,MAAM,mBAAmB,~~mGAgF~~/B,CAAC"}
1	+ {"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAetD,OAAO,KAAK,EACV,yBAAyB,EAEzB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,UAAU,wBAAwB;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,KAAK,kCAAkC,GAAG,iBAAiB,CAAC,sBAAsB,CAAC,CAAC;AAGpF,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,2BAA2B,UAAU,CAAC;AACnD,eAAO,MAAM,6BAA6B,SAAS,CAAC;AAEpD,eAAO,MAAM,cAAc;;yLAE1B,CAAC;AAEF,eAAO,MAAM,0BAA0B,6NAkCrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAYlC,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAQ7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAW7B,CAAC;AAIH,eAAO,MAAM,2BAA2B,iOAuBtC,CAAC;AAIH,eAAO,MAAM,0BAA0B,6NAItC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;gDAsI5B,CAAC;AAgBH,eAAO,MAAM,aAAa;cACd,YAAY,CAAC,SAAS,CAAC;kBACnB,MAAM;YAmEpB,CAAC;AAIH,eAAO,MAAM,mBAAmB,6PAgF/B,CAAC"}

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

@@ -1,12 +1,15 @@
 import styled, { css } from 'styled-components';
 import { useContext } from 'react';
 import { transparentize } from 'polished';
-import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButtonLink } from '@pega/cosmos-react-core';
+import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButtonLink, Text } from '@pega/cosmos-react-core';
 import DetailsContext from './DetailsContext';
 const rowGapMultiplier = 1;
 export const columnGapMultiplier = 5.5;
 export const oneColumnDetailsColumnWidth = '100ch';
 export const multiColumnDetailsColumnWidth = '80ch';
+export const StyledNameText = styled(Text) `
+  word-break: break-word;
+`;
 export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
     const { base: { spacing, animation, palette } } = theme;
     const { rtl } = useDirection();
@@ -43,6 +46,13 @@ export const StyledDetailDescription = styled.div(({ theme }) => {
   `;
 });
 StyledDetailDescription.defaultProps = defaultThemeProp;
+export const StyledDetailBanner = styled.div(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    margin-block-end: calc(1.5 * ${spacing});
+  `;
+});
+StyledDetailBanner.defaultProps = defaultThemeProp;
 export const StyledDetailColumn = styled.div(({ theme }) => {
     const { base: { spacing } } = theme;
     return css `
@@ -80,8 +90,8 @@ export const StyledInlineFieldValueItem = styled.div `
     min-width: 0;
   }
 `;
-export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelLength, variant, theme, narrow = false }) => {
-    const { base: { spacing, palette }, components: { details: { 'field-label': fieldLabelPosition }, 'field-value-list': { inline: { detached } } } } = theme;
+export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelLength, variant, theme }) => {
+    const { base: { spacing, palette, 'content-width': { md } }, components: { details: { 'field-label': fieldLabelPosition }, 'field-value-list': { inline: { detached } } } } = theme;
     const { inFieldGroup } = useContext(DetailsContext);
     const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';
     const isValueComparison = variant === 'value-comparison';
@@ -94,6 +104,8 @@ export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelL
     width: 100%;
     max-width: ${oneColumnDetailsColumnWidth};
     height: fit-content;
+    container-type: inline-size;
+    container-name: details-list;
     ${StyledFieldValue} {
       word-break: break-word;
@@ -172,23 +184,24 @@ export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelL
     `}
       /* Responsive behavior */
-      ${narrow &&
-        !labelTop &&
+      ${!labelTop &&
         !isValueComparison &&
         css `
-      ${StyledInlineFieldValueItem} {
-        grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);
+      @container details-list (width < ${md}) {
+        ${StyledInlineFieldValueItem} {
+          grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);
-        ${inFieldGroup &&
+          ${inFieldGroup &&
             css `
-          grid-template-columns:
-            minmax(0, calc(${labelLength}ch - ${spacing}))
-            minmax(calc(50% + 0.5 * ${spacing}), 1fr);
-        `}
-      }
+            grid-template-columns:
+              minmax(0, calc(${labelLength}ch - ${spacing}))
+              minmax(calc(50% + 0.5 * ${spacing}), 1fr);
+          `}
+        }
-      dd {
-        min-width: 50%;
+        dd {
+          min-width: 50%;
+        }
       }
     `}
   `;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledFieldValueList,\n StyledIcon,\n useDirection,\n StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n StyledFieldValueListProps,\n FontSize,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n /** Whether individual list items all have labels stacks on top /\n stacked?: boolean;\n /* The character length applied to all list labels /\n labelLength?: number;\n /\n Whether to apply narrow list styles\n * @default false\n /\n narrow?: boolean;\n theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n /\n Number of columns in the list\n * @default 1\n /\n columnCount?: 1 \| 2 \| 3;\n /\n Arrangement of columns\n /\n arrangement?: DetailsProps['arrangement'];\n /\n Style variations\n /\n variant?: DetailsProps['variant'];\n theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing, animation, palette }\n } = theme;\n const { rtl } = useDirection();\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n return css`\n width: 100%;\n grid-column: 1 / -1;\n margin-block-end: calc(${rowGapMultiplier} ${spacing});\n ${detached &&\n css`\n border-bottom: 0.0625rem solid ${palette['border-line']};\n padding-bottom: calc(0.5 * ${spacing});\n `}\n\n ${StyledButtonLink} ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n const {\n base: {\n spacing,\n 'content-width': { xl }\n }\n } = theme;\n\n return css`\n max-width: ${xl};\n margin-block-end: calc(1.5 * ${spacing});\n `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n display: flex;\n flex-direction: column;\n row-gap: calc(${rowGapMultiplier} * ${spacing});\n width: 100%;\n `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n > * {\n min-width: 0;\n }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n stacked,\n labelLength,\n variant,\n theme,\n narrow = false\n}) => {\n const {\n base: { spacing, palette },\n components: {\n details: { 'field-label': fieldLabelPosition },\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n const { inFieldGroup } = useContext(DetailsContext);\n const labelTop = (stacked \|\| fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n const isValueComparison = variant === 'value-comparison';\n const fieldValueGapMultiplier = 2;\n\n return css`\n /* Field Grid Styles /\n display: flex;\n flex-direction: column;\n row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} ${spacing})`};\n width: 100%;\n max-width: ${oneColumnDetailsColumnWidth};\n height: fit-content;\n\n ${StyledFieldValue} {\n word-break: break-word;\n overflow: auto;\n\n /* Negative margin to account for overflow clipping of focus indicator /\n padding: 0.3rem;\n margin: -0.3rem;\n }\n\n ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n width: 100%;\n }\n\n ${StyledInlineFieldValueItem} {\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n grid-template-rows: max-content;\n column-gap: calc(${fieldValueGapMultiplier} ${spacing});\n ${detached &&\n css`\n padding-block: calc(0.5 * ${spacing});\n &:not(:last-child) {\n border-bottom: 0.0625rem dashed ${palette['border-line']};\n }\n `}\n\n ${inFieldGroup &&\n css`\n grid-template-columns:\n minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n minmax(14ch, 1fr);\n `};\n }\n\n ${StyledStackedFieldValue} {\n ${detached &&\n css`\n padding-block: calc(0.5 * ${spacing});\n &:not(:last-child) {\n border-bottom: 0.0625rem dashed ${palette['border-line']};\n }\n `}\n }\n\n /* Stacked Label Styles /\n ${labelTop &&\n css`\n grid-template-columns: minmax(0, 1fr);\n row-gap: 0;\n\n dt {\n max-width: 100%;\n }\n\n ${!isValueComparison &&\n css`\n ${StyledStackedFieldValue}:not(:first-child) {\n margin-block-start: calc(${rowGapMultiplier} ${spacing});\n }\n `}\n `}\n\n /* Value Comparison Styles /\n ${isValueComparison &&\n css`\n display: grid;\n grid-template-columns: auto auto;\n column-gap: 0;\n row-gap: calc(0.5 ${spacing});\n\n > dd {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n `}\n\n /* Responsive behavior /\n ${narrow &&\n !labelTop &&\n !isValueComparison &&\n css`\n ${StyledInlineFieldValueItem} {\n grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n ${inFieldGroup &&\n css`\n grid-template-columns:\n minmax(0, calc(${labelLength}ch - ${spacing}))\n minmax(calc(50% + 0.5 ${spacing}), 1fr);\n `}\n }\n\n dd {\n min-width: 50%;\n }\n `}\n `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n return css`\n > ${StyledFieldValueGroupLabel} {\n margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n }\n\n > ${StyledDetailDescription}:first-child {\n margin-block-start: calc(1.5 * ${spacing});\n }\n `;\n};\n\nexport const StyledDetails = styled.div<{\n variant?: DetailsProps['variant'];\n columnCount?: number;\n}>(({ variant, columnCount, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'border-line': borderColor }\n },\n components: {\n 'form-control': { 'border-width': borderWidth },\n button: { 'border-radius': buttonBorderRadius },\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n return css`\n &:not(:first-child) {\n ${spacingTop(spacing)}\n }\n\n ${variant === 'field-group' &&\n css`\n & + ${StyledDetailsList} {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n ${columnCount === 1 &&\n css`\n position: relative;\n padding-inline-start: ${spacing};\n\n ${detached &&\n css`\n padding-inline-start: calc(1.25 * ${spacing});\n `}\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: calc(-1 * ${spacing});\n inset-block-end: 0;\n inset-inline-start: 0;\n width: ${borderWidth};\n background: ${borderColor};\n\n ${detached &&\n css`\n inset-block-start: 0;\n width: 0.25rem;\n background: ${transparentize(0.67, borderColor)};\n border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n `}\n }\n `}\n `}\n\n ${!variant &&\n detached &&\n css`\n & + ${StyledDetailsList} {\n margin-block-start: 0;\n border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};\n }\n `};\n `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n ({ theme, arrangement, columnCount = 1 }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n width: 100%;\n\n ${columnCount === 2 &&\n !arrangement &&\n css`\n flex-wrap: wrap;\n `}\n\n ${columnCount === 1 &&\n css`\n flex-direction: column;\n row-gap: calc(${rowGapMultiplier} * ${spacing});\n `};\n\n /* Column Widths /\n > ${StyledDetailColumn} {\n overflow: hidden;\n\n / Negative margin to account for overflow clipping of focus indicator /\n padding: 0.3rem;\n margin: -0.3rem;\n\n ${columnCount === 3 &&\n css`\n width: ${multiColumnDetailsColumnWidth};\n max-width: calc(33.33% - (${columnGapMultiplier} ${spacing} * 2) / 3);\n `}\n\n ${columnCount === 2 &&\n css`\n width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n max-width: unset;\n\n &:nth-child(3) > ${StyledDetails}:first-child {\n ${spacingTop(spacing)}\n }\n `}\n\n ${columnCount !== 1 &&\n css`\n ${arrangement === 'narrowWide' &&\n css`\n &:nth-child(2) {\n width: calc(\n ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n );\n max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n }\n `}\n\n ${arrangement === 'wideNarrow' &&\n css`\n &:nth-child(1) {\n width: calc(\n ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n );\n max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n }\n `}\n `}\n\n ${columnCount === 1 &&\n css`\n width: 100%;\n max-width: 100%;\n\n &:not(:first-child) > ${StyledDetails}:first-child {\n ${spacingTop(spacing)}\n }\n `}\n }\n `;\n }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledFieldValueList,\n StyledIcon,\n useDirection,\n StyledButtonLink,\n Text\n} from '@pega/cosmos-react-core';\nimport type {\n StyledFieldValueListProps,\n FontSize,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n /** Whether individual list items all have labels stacks on top /\n stacked?: boolean;\n /* The character length applied to all list labels /\n labelLength?: number;\n theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n /\n Number of columns in the list\n * @default 1\n /\n columnCount?: 1 \| 2 \| 3;\n /\n Arrangement of columns\n /\n arrangement?: DetailsProps['arrangement'];\n /\n Style variations\n /\n variant?: DetailsProps['variant'];\n theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledNameText = styled(Text)`\n word-break: break-word;\n`;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing, animation, palette }\n } = theme;\n const { rtl } = useDirection();\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n return css`\n width: 100%;\n grid-column: 1 / -1;\n margin-block-end: calc(${rowGapMultiplier} ${spacing});\n ${detached &&\n css`\n border-bottom: 0.0625rem solid ${palette['border-line']};\n padding-bottom: calc(0.5 * ${spacing});\n `}\n\n ${StyledButtonLink} ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n const {\n base: {\n spacing,\n 'content-width': { xl }\n }\n } = theme;\n\n return css`\n max-width: ${xl};\n margin-block-end: calc(1.5 * ${spacing});\n `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailBanner = styled.div(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n margin-block-end: calc(1.5 * ${spacing});\n `;\n});\n\nStyledDetailBanner.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n display: flex;\n flex-direction: column;\n row-gap: calc(${rowGapMultiplier} * ${spacing});\n width: 100%;\n `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n > * {\n min-width: 0;\n }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n stacked,\n labelLength,\n variant,\n theme\n}) => {\n const {\n base: {\n spacing,\n palette,\n 'content-width': { md }\n },\n components: {\n details: { 'field-label': fieldLabelPosition },\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n const { inFieldGroup } = useContext(DetailsContext);\n const labelTop = (stacked \|\| fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n const isValueComparison = variant === 'value-comparison';\n const fieldValueGapMultiplier = 2;\n\n return css`\n /* Field Grid Styles /\n display: flex;\n flex-direction: column;\n row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} ${spacing})`};\n width: 100%;\n max-width: ${oneColumnDetailsColumnWidth};\n height: fit-content;\n container-type: inline-size;\n container-name: details-list;\n\n ${StyledFieldValue} {\n word-break: break-word;\n overflow: auto;\n\n /* Negative margin to account for overflow clipping of focus indicator /\n padding: 0.3rem;\n margin: -0.3rem;\n }\n\n ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n width: 100%;\n }\n\n ${StyledInlineFieldValueItem} {\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n grid-template-rows: max-content;\n column-gap: calc(${fieldValueGapMultiplier} ${spacing});\n ${detached &&\n css`\n padding-block: calc(0.5 * ${spacing});\n &:not(:last-child) {\n border-bottom: 0.0625rem dashed ${palette['border-line']};\n }\n `}\n\n ${inFieldGroup &&\n css`\n grid-template-columns:\n minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n minmax(14ch, 1fr);\n `};\n }\n\n ${StyledStackedFieldValue} {\n ${detached &&\n css`\n padding-block: calc(0.5 * ${spacing});\n &:not(:last-child) {\n border-bottom: 0.0625rem dashed ${palette['border-line']};\n }\n `}\n }\n\n /* Stacked Label Styles /\n ${labelTop &&\n css`\n grid-template-columns: minmax(0, 1fr);\n row-gap: 0;\n\n dt {\n max-width: 100%;\n }\n\n ${!isValueComparison &&\n css`\n ${StyledStackedFieldValue}:not(:first-child) {\n margin-block-start: calc(${rowGapMultiplier} ${spacing});\n }\n `}\n `}\n\n /* Value Comparison Styles /\n ${isValueComparison &&\n css`\n display: grid;\n grid-template-columns: auto auto;\n column-gap: 0;\n row-gap: calc(0.5 ${spacing});\n\n > dd {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n `}\n\n /* Responsive behavior /\n ${!labelTop &&\n !isValueComparison &&\n css`\n @container details-list (width < ${md}) {\n ${StyledInlineFieldValueItem} {\n grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n ${inFieldGroup &&\n css`\n grid-template-columns:\n minmax(0, calc(${labelLength}ch - ${spacing}))\n minmax(calc(50% + 0.5 ${spacing}), 1fr);\n `}\n }\n\n dd {\n min-width: 50%;\n }\n }\n `}\n `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n return css`\n > ${StyledFieldValueGroupLabel} {\n margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n }\n\n > ${StyledDetailDescription}:first-child {\n margin-block-start: calc(1.5 * ${spacing});\n }\n `;\n};\n\nexport const StyledDetails = styled.div<{\n variant?: DetailsProps['variant'];\n columnCount?: number;\n}>(({ variant, columnCount, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'border-line': borderColor }\n },\n components: {\n 'form-control': { 'border-width': borderWidth },\n button: { 'border-radius': buttonBorderRadius },\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n return css`\n &:not(:first-child) {\n ${spacingTop(spacing)}\n }\n\n ${variant === 'field-group' &&\n css`\n & + ${StyledDetailsList} {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n ${columnCount === 1 &&\n css`\n position: relative;\n padding-inline-start: ${spacing};\n\n ${detached &&\n css`\n padding-inline-start: calc(1.25 * ${spacing});\n `}\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: calc(-1 * ${spacing});\n inset-block-end: 0;\n inset-inline-start: 0;\n width: ${borderWidth};\n background: ${borderColor};\n\n ${detached &&\n css`\n inset-block-start: 0;\n width: 0.25rem;\n background: ${transparentize(0.67, borderColor)};\n border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n `}\n }\n `}\n `}\n\n ${!variant &&\n detached &&\n css`\n & + ${StyledDetailsList} {\n margin-block-start: 0;\n border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};\n }\n `};\n `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n ({ theme, arrangement, columnCount = 1 }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n width: 100%;\n\n ${columnCount === 2 &&\n !arrangement &&\n css`\n flex-wrap: wrap;\n `}\n\n ${columnCount === 1 &&\n css`\n flex-direction: column;\n row-gap: calc(${rowGapMultiplier} * ${spacing});\n `};\n\n /* Column Widths /\n > ${StyledDetailColumn} {\n overflow: hidden;\n\n / Negative margin to account for overflow clipping of focus indicator /\n padding: 0.3rem;\n margin: -0.3rem;\n\n ${columnCount === 3 &&\n css`\n width: ${multiColumnDetailsColumnWidth};\n max-width: calc(33.33% - (${columnGapMultiplier} ${spacing} * 2) / 3);\n `}\n\n ${columnCount === 2 &&\n css`\n width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n max-width: unset;\n\n &:nth-child(3) > ${StyledDetails}:first-child {\n ${spacingTop(spacing)}\n }\n `}\n\n ${columnCount !== 1 &&\n css`\n ${arrangement === 'narrowWide' &&\n css`\n &:nth-child(2) {\n width: calc(\n ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n );\n max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n }\n `}\n\n ${arrangement === 'wideNarrow' &&\n css`\n &:nth-child(1) {\n width: calc(\n ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n );\n max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n }\n `}\n `}\n\n ${columnCount === 1 &&\n css`\n width: 100%;\n max-width: 100%;\n\n &:not(:first-child) > ${StyledDetails}:first-child {\n ${spacingTop(spacing)}\n }\n `}\n }\n `;\n }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}