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

@pega/cosmos-react-work 9.0.0-build.27.0 → 9.0.0-build.27.10

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

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

@@ -21,6 +21,7 @@ export interface AppAnnouncementProps extends BaseProps, NoChildrenProp {
     onDismiss?: () => void;
     ref?: Ref<HTMLElement>;
 }
+export declare const StyledAppAnnouncementContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledAppAnnouncement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, Pick<AppAnnouncementProps, "image" | "fitToParent">>> & string;
 declare const AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps>;
 export default AppAnnouncement;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAelD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,~~kRA4FhC~~,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,~~CAsD1E~~,CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAelD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,4BAA4B,6NAiCvC,CAAC;AAIH,eAAO,MAAM,qBAAqB,kRA4EhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CAwD1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -8,6 +8,36 @@ const StyledDismissButton = styled.button `
   font-size: 1.25rem;
   border: none;
 `;
+export const StyledAppAnnouncementContent = styled.div(props => {
+    const { theme: { base: { spacing } } } = props;
+    return css `
+    max-height: 12rem;
+    overflow-y: auto;
+    margin-block-start: calc(1.5 * ${spacing});
+    margin-inline: calc(-2 * ${spacing});
+    padding-inline: calc(2 * ${spacing});
+    p,
+    ul {
+      line-height: 1.4;
+    }
+    ul {
+      padding-inline-start: calc(2 * ${spacing});
+    }
+    p + ul {
+      margin-block-start: calc(1.5 * ${spacing});
+    }
+    li {
+      &:not(:last-child) {
+        margin-block-end: ${spacing};
+      }
+    }
+  `;
+});
+StyledAppAnnouncementContent.defaultProps = defaultThemeProp;
 export const StyledAppAnnouncement = styled.article(props => {
     const { theme: { base: { shadow, spacing }, components: { card: { 'border-radius': borderRadius }, announcement: { background, 'foreground-color': foregroundColor } } }, image } = props;
     const { end } = useDirection();
@@ -60,22 +90,6 @@ export const StyledAppAnnouncement = styled.article(props => {
       position: relative;
       z-index: 2;
-      p,
-      ul {
-        padding-block-start: calc(1.5 * ${spacing});
-        line-height: 1.4;
-      }
-      ul {
-        padding-inline-start: calc(2 * ${spacing});
-      }
-      li {
-        &:not(:last-child) {
-          margin-block-end: ${spacing};
-        }
-      }
       ${StyledButton} {
         margin-top: calc(2 * ${spacing});
         white-space: normal;
@@ -92,11 +106,11 @@ StyledAppAnnouncement.defaultProps = defaultThemeProp;
 const AppAnnouncement = forwardRef(function AppAnnouncement(props, ref) {
     const t = useI18n();
     const { heading, description, details, whatsNewLink, whatsNewText = t('app_announcement_whats_new_button_label'), image, onDismiss, ...restProps } = props;
-    return (_jsxs(StyledAppAnnouncement, { ...restProps, ref: ref, image: image, children: [onDismiss && (_jsx(Button, { as: StyledDismissButton, variant: 'simple', icon: true, onClick: onDismiss, "aria-label": t('app_announcement_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) })), _jsx(Text, { variant: 'h2', children: heading || t('app_announcement_details_list_header') }), _jsxs("div", { children: [description && _jsx(HTML, { as: 'p', content: description }), !!details?.length && (_jsx("ul", { children: details.map((item, index) => {
-                            return (
-                            // eslint-disable-next-line react/no-array-index-key
-                            _jsx("li", { children: _jsx(HTML, { content: item }) }, index));
-                        }) })), whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: whatsNewText }))] })] }));
+    return (_jsxs(StyledAppAnnouncement, { ...restProps, ref: ref, image: image, children: [onDismiss && (_jsx(Button, { as: StyledDismissButton, variant: 'simple', icon: true, onClick: onDismiss, "aria-label": t('app_announcement_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) })), _jsx(Text, { variant: 'h2', children: heading || t('app_announcement_details_list_header') }), _jsxs("div", { children: [_jsxs(StyledAppAnnouncementContent, { children: [description && _jsx(HTML, { as: 'p', content: description }), !!details?.length && (_jsx("ul", { children: details.map((item, index) => {
+                                    return (
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    _jsx("li", { children: _jsx(HTML, { content: item }) }, index));
+                                }) }))] }), whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: whatsNewText }))] })] }));
 });
 export default AppAnnouncement;
 //# sourceMappingURL=AppAnnouncement.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,YAAY,EACZ,wBAAwB,EACxB,IAAI,EACL,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAwBxB,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;;;CAGxC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,OAAO,CAEjD,KAAK,CAAC,EAAE;IACR,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACvC,YAAY,EAAE,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAClE,EACF,EACD,KAAK,EACN,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,wBAAwB,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAEpE,OAAO,GAAG,CAAA;wBACY,OAAO;kBACb,UAAU;qBACP,YAAY;aACpB,KAAK;;;MAGZ,KAAK,CAAC,WAAW,IAAI,mBAAmB;;;yBAGrB,KAAK;6BACD,GAAG;;;;;;;;;;;0BAWN,OAAO;;;;;;;;MAQ3B,mBAAmB;;;;;;;;;;sBAUH,MAAM,CAAC,KAAK~~;;;;;;;;;;0CAUQ~~,~~OAAO;;;;;yCAKR,OAAO;;;;;8BAKlB,OAAO;;;;QAI7B,~~YAAY;+BACW,OAAO;;;;;wBAKd,MAAM,CAAC,KAAK;;;;GAIjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,eAAe,GAA0D,UAAU,CACvF,SAAS,eAAe,CACtB,KAA4C,EAC5C,GAAgC;IAEhC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EACJ,OAAO,EACP,WAAW,EACX,OAAO,EACP,YAAY,EACZ,YAAY,GAAG,CAAC,CAAC,yCAAyC,CAAC,EAC3D,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,qBAAqB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,aACzD,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,EAAE,EAAE,mBAAmB,EACvB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,SAAS,gBACN,CAAC,CAAC,4CAA4C,CAAC,YAE3D,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,EACD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,IAAI,CAAC,CAAC,sCAAsC,CAAC,GAAQ,EAChF,~~0BACG~~,WAAW,IAAI,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,GAAI,EACpD,CAAC,CAAC,OAAO,EAAE,MAAM,IAAI,CACpB,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;~~4BAC3B~~,OAAO;~~4BACL~~,oDAAoD;~~4BACpD~~,uBACE,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,GAAI,IADhB,KAAK,CAET,CACN,CAAC;~~wBACJ~~,CAAC,CAAC,GACC,CACN,~~EACA~~,YAAY,IAAI,CACf,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,YAC5D,YAAY,GACN,CACV,IACG,IACgB,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n StyledButton,\n Text,\n Icon,\n registerIcon,\n useI18n,\n defaultThemeProp,\n useDirection,\n calculateForegroundColor,\n HTML\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n /** Heading text for the announcement. /\n heading?: string;\n /* Description text for the announcement. /\n description?: string;\n /* Announcement details to be displayed in form of bulleted list. /\n details?: string[];\n /* Url to open with What's new link. /\n whatsNewLink?: string;\n /* Content to populate the announcement button. /\n whatsNewText?: string;\n /* An image source for the decorative background. /\n image?: string;\n /\n Whether to fit AppAnnouncement widget in the parent element.\n /\n fitToParent?: boolean;\n /* Callback when user dismisses the announcements. /\n onDismiss?: () => void;\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n font-size: 1.25rem;\n border: none;\n`;\n\nexport const StyledAppAnnouncement = styled.article<\n Pick<AppAnnouncementProps, 'image' \| 'fitToParent'>\n>(props => {\n const {\n theme: {\n base: { shadow, spacing },\n components: {\n card: { 'border-radius': borderRadius },\n announcement: { background, 'foreground-color': foregroundColor }\n }\n },\n image\n } = props;\n\n const { end } = useDirection();\n const color = calculateForegroundColor(background, foregroundColor);\n\n return css`\n padding: calc(2 ${spacing});\n background: ${background};\n border-radius: ${borderRadius};\n color: ${color};\n position: relative;\n\n ${props.fitToParent && 'block-size: 100%;'};\n\n &::after {\n background: url('${image}') no-repeat;\n background-position: ${end} bottom;\n background-size: contain;\n background-origin: content-box;\n opacity: 0.2;\n content: '';\n display: block;\n position: absolute;\n width: 50%;\n height: 100%;\n inset-inline-end: 0;\n bottom: 0;\n padding: calc(2 * ${spacing});\n }\n\n h2 {\n position: relative;\n z-index: 2;\n }\n\n ${StyledDismissButton} {\n position: absolute;\n top: 0.75rem;\n inset-inline-end: 0.75rem;\n color: inherit;\n z-index: 3;\n &:enabled:hover {\n background: #ffffff19;\n }\n &:enabled:focus {\n box-shadow: ${shadow.focus};\n }\n }\n\n > div {\n position: relative;\n z-index: 2;\n\n p,\n ul {\n padding-block-start: calc(1.5 * ${spacing});\n line-height: 1.4;\n }\n\n ul {\n padding-inline-start: calc(2 * ${spacing});\n }\n\n li {\n &:not(:last-child) {\n margin-block-end: ${spacing};\n }\n }\n\n ${StyledButton} {\n margin-top: calc(2 * ${spacing});\n white-space: normal;\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${shadow.focus};\n }\n }\n }\n `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n function AppAnnouncement(\n props: PropsWithoutRef<AppAnnouncementProps>,\n ref: AppAnnouncementProps['ref']\n ) {\n const t = useI18n();\n const {\n heading,\n description,\n details,\n whatsNewLink,\n whatsNewText = t('app_announcement_whats_new_button_label'),\n image,\n onDismiss,\n ...restProps\n } = props;\n\n return (\n <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n {onDismiss && (\n <Button\n as={StyledDismissButton}\n variant='simple'\n icon\n onClick={onDismiss}\n aria-label={t('app_announcement_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </Button>\n )}\n <Text variant='h2'>{heading \|\| t('app_announcement_details_list_header')}</Text>\n <div>\n {description && <HTML as='p' content={description} />}\n {!!details?.length && (\n <ul>\n {details.map((item, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <li key={index}>\n <HTML content={item} />\n </li>\n );\n })}\n </ul>\n )}\n {whatsNewLink && (\n <Button variant='secondary' href={whatsNewLink} target='_blank'>\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default AppAnnouncement;\n"]}
1	+ {"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n StyledButton,\n Text,\n Icon,\n registerIcon,\n useI18n,\n defaultThemeProp,\n useDirection,\n calculateForegroundColor,\n HTML\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n /** Heading text for the announcement. /\n heading?: string;\n /* Description text for the announcement. /\n description?: string;\n /* Announcement details to be displayed in form of bulleted list. /\n details?: string[];\n /* Url to open with What's new link. /\n whatsNewLink?: string;\n /* Content to populate the announcement button. /\n whatsNewText?: string;\n /* An image source for the decorative background. /\n image?: string;\n /\n Whether to fit AppAnnouncement widget in the parent element.\n /\n fitToParent?: boolean;\n /* Callback when user dismisses the announcements. /\n onDismiss?: () => void;\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n font-size: 1.25rem;\n border: none;\n`;\n\nexport const StyledAppAnnouncementContent = styled.div(props => {\n const {\n theme: {\n base: { spacing }\n }\n } = props;\n\n return css`\n max-height: 12rem;\n overflow-y: auto;\n margin-block-start: calc(1.5 ${spacing});\n margin-inline: calc(-2 * ${spacing});\n padding-inline: calc(2 * ${spacing});\n\n p,\n ul {\n line-height: 1.4;\n }\n\n ul {\n padding-inline-start: calc(2 * ${spacing});\n }\n\n p + ul {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n li {\n &:not(:last-child) {\n margin-block-end: ${spacing};\n }\n }\n `;\n});\n\nStyledAppAnnouncementContent.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncement = styled.article<\n Pick<AppAnnouncementProps, 'image' \| 'fitToParent'>\n>(props => {\n const {\n theme: {\n base: { shadow, spacing },\n components: {\n card: { 'border-radius': borderRadius },\n announcement: { background, 'foreground-color': foregroundColor }\n }\n },\n image\n } = props;\n\n const { end } = useDirection();\n const color = calculateForegroundColor(background, foregroundColor);\n\n return css`\n padding: calc(2 * ${spacing});\n background: ${background};\n border-radius: ${borderRadius};\n color: ${color};\n position: relative;\n\n ${props.fitToParent && 'block-size: 100%;'};\n\n &::after {\n background: url('${image}') no-repeat;\n background-position: ${end} bottom;\n background-size: contain;\n background-origin: content-box;\n opacity: 0.2;\n content: '';\n display: block;\n position: absolute;\n width: 50%;\n height: 100%;\n inset-inline-end: 0;\n bottom: 0;\n padding: calc(2 * ${spacing});\n }\n\n h2 {\n position: relative;\n z-index: 2;\n }\n\n ${StyledDismissButton} {\n position: absolute;\n top: 0.75rem;\n inset-inline-end: 0.75rem;\n color: inherit;\n z-index: 3;\n &:enabled:hover {\n background: #ffffff19;\n }\n &:enabled:focus {\n box-shadow: ${shadow.focus};\n }\n }\n\n > div {\n position: relative;\n z-index: 2;\n\n ${StyledButton} {\n margin-top: calc(2 * ${spacing});\n white-space: normal;\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${shadow.focus};\n }\n }\n }\n `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n function AppAnnouncement(\n props: PropsWithoutRef<AppAnnouncementProps>,\n ref: AppAnnouncementProps['ref']\n ) {\n const t = useI18n();\n const {\n heading,\n description,\n details,\n whatsNewLink,\n whatsNewText = t('app_announcement_whats_new_button_label'),\n image,\n onDismiss,\n ...restProps\n } = props;\n\n return (\n <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n {onDismiss && (\n <Button\n as={StyledDismissButton}\n variant='simple'\n icon\n onClick={onDismiss}\n aria-label={t('app_announcement_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </Button>\n )}\n <Text variant='h2'>{heading \|\| t('app_announcement_details_list_header')}</Text>\n <div>\n <StyledAppAnnouncementContent>\n {description && <HTML as='p' content={description} />}\n {!!details?.length && (\n <ul>\n {details.map((item, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <li key={index}>\n <HTML content={item} />\n </li>\n );\n })}\n </ul>\n )}\n </StyledAppAnnouncementContent>\n {whatsNewLink && (\n <Button variant='secondary' href={whatsNewLink} target='_blank'>\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default AppAnnouncement;\n"]}

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

@@ -4,8 +4,8 @@ import type { TaskItemProps } from '../Tasks/TaskList';
 export interface AssignmentsProps extends NoChildrenProp {
     /** An array of TaskItemProps to generate the list. */
     items: TaskItemProps[];
-    /** Integer representing the total count of tasks. */
-    count: number;
+    /** Optional total count of tasks. When omitted, the count badge is hidden. */
+    count?: number;
     /**
      * Controls the collapsed state of the assignments list.
      * @default false

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Assignments.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAchC,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIvD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,~~qDAAqD~~;~~IACrD~~,KAAK,EAAE,MAAM,CAAC;~~IACd~~;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CA2DpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"Assignments.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAchC,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIvD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CA2DpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -11,7 +11,7 @@ const Assignments = ({ items, count, collapsed, onToggleCollapsed, ...restProps
         return openItem ? _jsx(TaskItem, { ...openItem, headingTag: 'h2' }) : _jsx(TaskList, { items: items });
     }, [items, openItem]);
     const tasks = _jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) });
-    const header = (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && _jsx(Icon, { name: 'caret-right' }), _jsx(Text, { variant: 'h2', children: t('assignments') }), _jsx(Count, { children: count })] }));
+    const header = (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && _jsx(Icon, { name: 'caret-right' }), _jsx(Text, { variant: 'h2', children: t('assignments') }), count !== undefined && _jsx(Count, { children: count })] }));
     return (_jsxs(StyledAssignments, { ...restProps, openItem: !!openItem, "data-app-region": true, "data-focusable-form-container": '', children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && onToggleCollapsed && (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                             onToggleCollapsed();
                         }, "aria-controls": assignmentsId, "aria-expanded": !collapsed, "aria-label": t('assignments'), children: header })), collapsed === undefined && header] })), typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: tasks })) : (tasks)] }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Assignments.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAkB7E,MAAM,WAAW,GAAwC,CAAC,EACxD,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,QAAQ,EAAE,UAAU,EAAC,IAAI,GAAG,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAC5F,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAe,CAAC;IAEzF,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,OAAO,SAAS,KAAK,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC9D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,~~EAC5C~~,KAAC,KAAK,cAAE,KAAK,GAAS,~~IACjB~~,CACR,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,OACZ,SAAS,EACb,QAAQ,EAAE,CAAC,CAAC,QAAQ,4DAEU,EAAE,aAE/B,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CACtD,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,CAAC;wBACtB,CAAC,mBACc,aAAa,mBACb,CAAC,SAAS,gBACb,CAAC,CAAC,aAAa,CAAC,YAE3B,MAAM,GACY,CACtB,EACA,SAAS,KAAK,SAAS,IAAI,MAAM,IACvB,CACd,EAEA,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClE,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,KAAK,GAAkB,CAC/D,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FC } from 'react';\n\nimport {\n CardHeader,\n useI18n,\n EmptyState,\n ExpandCollapse,\n Icon,\n Text,\n Count,\n Flex,\n useUID,\n CardContent\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem } from '../Tasks/TaskList';\nimport type { TaskItemProps } from '../Tasks/TaskList';\n\nimport { StyledAssignments, StyledExpandButton } from './Assignments.styles';\n\nexport interface AssignmentsProps extends NoChildrenProp {\n /** An array of TaskItemProps to generate the list. /\n items: TaskItemProps[];\n /* ~~Integer~~ ~~representing the~~ total count of tasks. /\n count: number;\n /\n Controls the collapsed state of the assignments list.\n * @default false\n /\n collapsed?: boolean;\n /\n Call when the user clicks the collapsed element.\n */\n onToggleCollapsed?: () => void;\n}\n\nconst Assignments: FC<ForwardProps & AssignmentsProps> = ({\n items,\n count,\n collapsed,\n onToggleCollapsed,\n ...restProps\n}) => {\n const openItem = items.find(item => item.content);\n const t = useI18n();\n const assignmentsId = useUID();\n\n const TaskItems = useMemo(() => {\n return openItem ? <TaskItem {...openItem} headingTag='h2' /> : <TaskList items={items} />;\n }, [items, openItem]);\n\n const tasks = <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>;\n\n const header = (\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {typeof collapsed === 'boolean' && <Icon name='caret-right' />}\n <Text variant='h2'>{t('assignments')}</Text>\n <Count>{count}</Count>\n </Flex>\n );\n\n return (\n <StyledAssignments\n {...restProps}\n openItem={!!openItem}\n data-app-region\n data-focusable-form-container=''\n >\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {typeof collapsed === 'boolean' && onToggleCollapsed && (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed();\n }}\n aria-controls={assignmentsId}\n aria-expanded={!collapsed}\n aria-label={t('assignments')}\n >\n {header}\n </StyledExpandButton>\n )}\n {collapsed === undefined && header}\n </CardHeader>\n )}\n\n {typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (\n <ExpandCollapse collapsed={collapsed}>{tasks}</ExpandCollapse>\n ) : (\n tasks\n )}\n </StyledAssignments>\n );\n};\n\nexport default Assignments;\n"]}
1	+ {"version":3,"file":"Assignments.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAkB7E,MAAM,WAAW,GAAwC,CAAC,EACxD,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,QAAQ,EAAE,UAAU,EAAC,IAAI,GAAG,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAC5F,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAe,CAAC;IAEzF,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,OAAO,SAAS,KAAK,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC9D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,EAC3C,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,cAAE,KAAK,GAAS,IACzC,CACR,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,OACZ,SAAS,EACb,QAAQ,EAAE,CAAC,CAAC,QAAQ,4DAEU,EAAE,aAE/B,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CACtD,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,CAAC;wBACtB,CAAC,mBACc,aAAa,mBACb,CAAC,SAAS,gBACb,CAAC,CAAC,aAAa,CAAC,YAE3B,MAAM,GACY,CACtB,EACA,SAAS,KAAK,SAAS,IAAI,MAAM,IACvB,CACd,EAEA,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClE,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,KAAK,GAAkB,CAC/D,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FC } from 'react';\n\nimport {\n CardHeader,\n useI18n,\n EmptyState,\n ExpandCollapse,\n Icon,\n Text,\n Count,\n Flex,\n useUID,\n CardContent\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem } from '../Tasks/TaskList';\nimport type { TaskItemProps } from '../Tasks/TaskList';\n\nimport { StyledAssignments, StyledExpandButton } from './Assignments.styles';\n\nexport interface AssignmentsProps extends NoChildrenProp {\n /** An array of TaskItemProps to generate the list. /\n items: TaskItemProps[];\n /* Optional total count of tasks. When omitted, the count badge is hidden. /\n count?: number;\n /\n Controls the collapsed state of the assignments list.\n * @default false\n /\n collapsed?: boolean;\n /\n Call when the user clicks the collapsed element.\n */\n onToggleCollapsed?: () => void;\n}\n\nconst Assignments: FC<ForwardProps & AssignmentsProps> = ({\n items,\n count,\n collapsed,\n onToggleCollapsed,\n ...restProps\n}) => {\n const openItem = items.find(item => item.content);\n const t = useI18n();\n const assignmentsId = useUID();\n\n const TaskItems = useMemo(() => {\n return openItem ? <TaskItem {...openItem} headingTag='h2' /> : <TaskList items={items} />;\n }, [items, openItem]);\n\n const tasks = <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>;\n\n const header = (\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {typeof collapsed === 'boolean' && <Icon name='caret-right' />}\n <Text variant='h2'>{t('assignments')}</Text>\n {count !== undefined && <Count>{count}</Count>}\n </Flex>\n );\n\n return (\n <StyledAssignments\n {...restProps}\n openItem={!!openItem}\n data-app-region\n data-focusable-form-container=''\n >\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {typeof collapsed === 'boolean' && onToggleCollapsed && (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed();\n }}\n aria-controls={assignmentsId}\n aria-expanded={!collapsed}\n aria-label={t('assignments')}\n >\n {header}\n </StyledExpandButton>\n )}\n {collapsed === undefined && header}\n </CardHeader>\n )}\n\n {typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (\n <ExpandCollapse collapsed={collapsed}>{tasks}</ExpandCollapse>\n ) : (\n tasks\n )}\n </StyledAssignments>\n );\n};\n\nexport default Assignments;\n"]}

package/lib/components/CaseView/CaseHeader/Summary.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA2DvC,QAAA,MAAM,OAAO,GAAI,gBAAgB;IAAE,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;CAAE,~~4CAmQzE~~,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA2DvC,QAAA,MAAM,OAAO,GAAI,gBAAgB;IAAE,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;CAAE,4CA0QzE,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/CaseView/CaseHeader/Summary.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Flex, getEdge, registerIcon, StyledStackedFieldValue, StyledLabel, StyledFieldName, useDirection, useChToPxConversionFactor, useTestIds, withTestIds, NoValue } from '@pega/cosmos-react-core';
 import { getFieldValueItemTestIds } from '@pega/cosmos-react-core/lib/components/FieldValueList/FieldValueList.test-ids';
 import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
@@ -11,7 +11,7 @@ const Field = withTestIds(({ testId, item, primary, truncate }) => {
     const { name, value, simpleValue } = item;
     const displayValue = simpleValue ?? value ?? _jsx(NoValue, {});
     const testIds = useTestIds(testId, getFieldValueItemTestIds);
-    return (_jsxs(StyledStackedFieldValue, { "data-testid": testIds.root, children: [_jsx(StyledLabel, { as: StyledFieldName, "data-testid": testIds.name, children: name }), _jsx(StyledHeaderSummaryValue, { bold: primary, truncate: truncate, "data-testid": testIds.value, children: displayValue })] }));
+    return (_jsxs(StyledStackedFieldValue, { "data-testid": testIds.root, "data-editable-anchor": true, children: [_jsx(StyledLabel, { as: StyledFieldName, "data-testid": testIds.name, children: name }), _jsx(StyledHeaderSummaryValue, { bold: primary, truncate: truncate, "data-testid": testIds.value, children: displayValue })] }));
 }, getFieldValueItemTestIds);
 const Summary = ({ siblingRef }) => {
     const { ltr } = useDirection();
@@ -166,6 +166,13 @@ const Summary = ({ siblingRef }) => {
     useEffect(() => {
         evaluateSummaryDisplay();
     }, [items]);
+    // If primary or secondary fields change, reset state
+    useLayoutEffect(() => {
+        setTruncatedIndices([]);
+        setDisplayCount(items.length);
+        priorTrailingEdgeStack.current = [];
+        priorAvailableSpace.current = null;
+    }, [summaryFields.primary, summaryFields.secondary]);
     // Overflow resize observer
     useEffect(() => {
         const resizeObserver = new ResizeObserver(evaluateSummaryDisplay);

package/lib/components/CaseView/CaseHeader/Summary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Summary.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { RefObject } from 'react';\n\nimport {\n Flex,\n getEdge,\n registerIcon,\n StyledStackedFieldValue,\n StyledLabel,\n StyledFieldName,\n useDirection,\n useChToPxConversionFactor,\n useTestIds,\n withTestIds,\n NoValue,\n type TestIdProp\n} from '@pega/cosmos-react-core';\nimport { getFieldValueItemTestIds } from '@pega/cosmos-react-core/lib/components/FieldValueList/FieldValueList.test-ids';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n StyledHeaderSummary,\n StyledHeaderSummaryValue,\n StyledHeaderSummaryBlock\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\nimport type { SummaryField } from '../CaseView.types';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst Field = withTestIds(\n ({\n testId,\n item,\n primary,\n truncate\n }: {\n item: SummaryField;\n primary: boolean;\n truncate: boolean;\n } & TestIdProp) => {\n const { name, value, simpleValue } = item;\n const displayValue = simpleValue ?? value ?? <NoValue />;\n const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n return (\n <StyledStackedFieldValue data-testid={testIds.root}>\n <StyledLabel as={StyledFieldName} data-testid={testIds.name}>\n {name}\n </StyledLabel>\n <StyledHeaderSummaryValue bold={primary} truncate={truncate} data-testid={testIds.value}>\n {displayValue}\n </StyledHeaderSummaryValue>\n </StyledStackedFieldValue>\n );\n },\n getFieldValueItemTestIds\n);\n\nconst Summary = ({ siblingRef }: { siblingRef: RefObject<HTMLDivElement> }) => {\n const { ltr } = useDirection();\n const { summaryFields } = useCaseViewContext();\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDListElement>(null);\n\n const primaryItems = summaryFields?.primary ?? [];\n const secondaryItems = summaryFields?.secondary ?? [];\n const items = [...primaryItems, ...secondaryItems];\n\n const [displayCount, setDisplayCount] = useState(items.length);\n const [truncatedIndices, setTruncatedIndices] = useState<number[] \| undefined>(\n items.map((_, i) => i)\n );\n\n const priorTrailingEdgeStack = useRef<number[]>([]);\n const priorAvailableSpace = useRef<number \| null>(null);\n\n const evalItemAddition = ({\n nextSiblingLeadingEdge\n }: {\n nextSiblingLeadingEdge: number;\n }): {\n indicesToTruncate: number[];\n nextDisplayCount: number;\n } => {\n const indicesToTruncate: number[] = truncatedIndices ? [...truncatedIndices] : [];\n let nextDisplayCount = displayCount;\n\n const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();\n for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {\n const priorEdge = reversedTrailingEdgeStack[i];\n\n const shouldRender = ltr\n ? priorEdge < nextSiblingLeadingEdge\n : priorEdge > nextSiblingLeadingEdge;\n\n if (shouldRender) {\n priorTrailingEdgeStack.current.pop();\n\n if (!indicesToTruncate.includes(nextDisplayCount)) {\n indicesToTruncate.push(nextDisplayCount);\n }\n\n nextDisplayCount += 1;\n } else {\n break;\n }\n }\n\n return { indicesToTruncate, nextDisplayCount };\n };\n\n const evalTruncationReduction = ({\n listChildren,\n availableSpace\n }: {\n listChildren: Element[];\n availableSpace: number;\n }): {\n indicesToTruncate: number[];\n } => {\n const indicesToTruncate: number[] = [];\n let hasAvailableSpace = availableSpace;\n\n listChildren.forEach((item, index) => {\n const valueEl = item.lastChild as HTMLElement;\n const truncatedSpace = Math.floor(valueEl.scrollWidth - valueEl.offsetWidth);\n const shouldTruncate = truncatedSpace === 0 ? false : hasAvailableSpace - truncatedSpace <= 0;\n\n if (shouldTruncate) {\n if (!truncatedIndices?.includes(index)) {\n hasAvailableSpace += truncatedSpace;\n }\n\n indicesToTruncate.push(index);\n } else if (truncatedIndices?.includes(index)) {\n hasAvailableSpace -= truncatedSpace;\n }\n });\n\n return { indicesToTruncate };\n };\n\n const evalTruncationIncrease = ({\n listChildren,\n availableSpace\n }: {\n listChildren: Element[];\n availableSpace: number;\n }): {\n indicesToTruncate: number[];\n availableSpace: number;\n } => {\n const indicesToTruncate: number[] = [];\n const lastIndex = listChildren.length - 1;\n let hasAvailableSpace = availableSpace;\n\n [...listChildren].reverse().forEach((item, index) => {\n if (truncatedIndices?.includes(lastIndex - index)) {\n indicesToTruncate.push(lastIndex - index);\n } else if (hasAvailableSpace < 0) {\n const truncatedElMaxWidth = 20 * chToPxConversionFactor;\n const valueEl = item.lastChild as HTMLElement;\n const spaceToTruncate = Math.max(Math.floor(valueEl.offsetWidth - truncatedElMaxWidth), 0);\n\n if (spaceToTruncate) {\n indicesToTruncate.push(lastIndex - index);\n hasAvailableSpace += spaceToTruncate;\n }\n }\n });\n\n return { indicesToTruncate, availableSpace: hasAvailableSpace };\n };\n\n const evalItemRemoval = ({\n listChildren,\n availableSpace,\n nextSiblingLeadingEdge\n }: {\n listChildren: Element[];\n availableSpace: number;\n nextSiblingLeadingEdge: number;\n }): { displayCount: number } => {\n let nextDisplayCount = displayCount;\n let hasAvailableSpace = availableSpace;\n let lastChildIndex = listChildren.length - 1;\n\n do {\n const itemTrailingEdge = getEdge({\n el: listChildren[lastChildIndex],\n side: 'trailing',\n ltr\n });\n hasAvailableSpace = Math.floor(\n ltr ? nextSiblingLeadingEdge - itemTrailingEdge : itemTrailingEdge - nextSiblingLeadingEdge\n );\n\n if (hasAvailableSpace < 0) {\n priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];\n\n nextDisplayCount -= 1;\n lastChildIndex -= 1;\n }\n } while (hasAvailableSpace < 0 && lastChildIndex > -1);\n\n return { displayCount: nextDisplayCount };\n };\n\n const evaluateSummaryDisplay = () => {\n const containerEl = containerRef.current;\n if (!containerEl) return;\n\n const listChildren = Array.from(listRef.current?.children ?? []);\n const lastSummaryItem = listChildren.length ? listChildren[listChildren.length - 1] : undefined;\n const nextSibling = siblingRef?.current ?? document.body;\n const nextSiblingLeadingEdge = getEdge({\n el: nextSibling,\n side: 'leading',\n ltr\n });\n const testEdge = lastSummaryItem\n ? getEdge({ el: lastSummaryItem, side: 'trailing', ltr })\n : getEdge({ el: containerEl, side: 'leading', ltr });\n let availableSpace = Math.floor(\n ltr ? nextSiblingLeadingEdge - testEdge : testEdge - nextSiblingLeadingEdge\n );\n if (availableSpace === priorAvailableSpace.current) return;\n\n priorAvailableSpace.current = availableSpace;\n\n let indicesToTruncate: number[] \| undefined;\n let nextDisplayCount = displayCount;\n\n if (availableSpace >= 0) {\n if (displayCount !== items.length) {\n const additionsConfig = evalItemAddition({ nextSiblingLeadingEdge });\n\n indicesToTruncate = additionsConfig.indicesToTruncate;\n nextDisplayCount = additionsConfig.nextDisplayCount;\n } else if (truncatedIndices?.length) {\n const truncationConfig = evalTruncationReduction({\n listChildren,\n availableSpace\n });\n\n indicesToTruncate = truncationConfig.indicesToTruncate;\n }\n } else if (listChildren) {\n const truncationConfig = evalTruncationIncrease({\n listChildren,\n availableSpace\n });\n\n indicesToTruncate = truncationConfig.indicesToTruncate;\n availableSpace = truncationConfig.availableSpace;\n\n if (availableSpace < 0) {\n const removalConfig = evalItemRemoval({\n listChildren,\n availableSpace,\n nextSiblingLeadingEdge\n });\n\n nextDisplayCount = removalConfig.displayCount;\n }\n }\n\n setDisplayCount(nextDisplayCount);\n\n if (indicesToTruncate) {\n setTruncatedIndices(indicesToTruncate);\n }\n };\n\n // Initial display evaluation\n useEffect(() => {\n evaluateSummaryDisplay();\n }, [items]);\n\n // Overflow resize observer\n useEffect(() => {\n const resizeObserver = new ResizeObserver(evaluateSummaryDisplay);\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [evaluateSummaryDisplay]);\n\n return (\n <Flex\n as={StyledHeaderSummaryBlock}\n item={{ grow: 1, shrink: 1 }}\n container={{ pad: [0.5, 0], alignItems: 'center' }}\n ref={containerRef}\n hasItems={displayCount > 0}\n >\n <Flex as={StyledHeaderSummary} container={{ gap: 4 }} ref={listRef}>\n {items.slice(0, displayCount).map((item, index) => {\n return (\n <Field\n testId={item.testId}\n item={item}\n primary={!!primaryItems?.length && index < primaryItems.length}\n truncate={!!truncatedIndices?.includes(index)}\n key={item.name}\n />\n );\n })}\n </Flex>\n </Flex>\n );\n};\n\nexport default Summary;\n"]}
1	+ {"version":3,"file":"Summary.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EACL,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,uBAAuB,EACvB,WAAW,EACX,eAAe,EACf,YAAY,EACZ,yBAAyB,EACzB,UAAU,EACV,WAAW,EACX,OAAO,EAER,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,+EAA+E,CAAC;AACzH,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,EACzB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzD,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,EACC,MAAM,EACN,IAAI,EACJ,OAAO,EACP,QAAQ,EAKI,EAAE,EAAE;IAChB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAC1C,MAAM,YAAY,GAAG,WAAW,IAAI,KAAK,IAAI,KAAC,OAAO,KAAG,CAAC;IACzD,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAE7D,OAAO,CACL,MAAC,uBAAuB,mBAAc,OAAO,CAAC,IAAI,2CAChD,KAAC,WAAW,IAAC,EAAE,EAAE,eAAe,iBAAe,OAAO,CAAC,IAAI,YACxD,IAAI,GACO,EACd,KAAC,wBAAwB,IAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,iBAAe,OAAO,CAAC,KAAK,YACpF,YAAY,GACY,IACH,CAC3B,CAAC;AACJ,CAAC,EACD,wBAAwB,CACzB,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,EAAE,UAAU,EAA6C,EAAE,EAAE;IAC5E,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC/C,MAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAC;IAE3D,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,MAAM,YAAY,GAAG,aAAa,EAAE,OAAO,IAAI,EAAE,CAAC;IAClD,MAAM,cAAc,GAAG,aAAa,EAAE,SAAS,IAAI,EAAE,CAAC;IACtD,MAAM,KAAK,GAAG,CAAC,GAAG,YAAY,EAAE,GAAG,cAAc,CAAC,CAAC;IAEnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CACtD,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CACvB,CAAC;IAEF,MAAM,sBAAsB,GAAG,MAAM,CAAW,EAAE,CAAC,CAAC;IACpD,MAAM,mBAAmB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAExD,MAAM,gBAAgB,GAAG,CAAC,EACxB,sBAAsB,EAGvB,EAGC,EAAE;QACF,MAAM,iBAAiB,GAAa,gBAAgB,CAAC,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAClF,IAAI,gBAAgB,GAAG,YAAY,CAAC;QAEpC,MAAM,yBAAyB,GAAG,CAAC,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,CAAC;QAChF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,yBAAyB,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7D,MAAM,SAAS,GAAG,yBAAyB,CAAC,CAAC,CAAC,CAAC;YAE/C,MAAM,YAAY,GAAG,GAAG;gBACtB,CAAC,CAAC,SAAS,GAAG,sBAAsB;gBACpC,CAAC,CAAC,SAAS,GAAG,sBAAsB,CAAC;YAEvC,IAAI,YAAY,EAAE,CAAC;gBACjB,sBAAsB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;gBAErC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC;oBAClD,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;gBAC3C,CAAC;gBAED,gBAAgB,IAAI,CAAC,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,MAAM;YACR,CAAC;QACH,CAAC;QACD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC;IACjD,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,EAC/B,YAAY,EACZ,cAAc,EAIf,EAEC,EAAE;QACF,MAAM,iBAAiB,GAAa,EAAE,CAAC;QACvC,IAAI,iBAAiB,GAAG,cAAc,CAAC;QAEvC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACnC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAwB,CAAC;YAC9C,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;YAC7E,MAAM,cAAc,GAAG,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,GAAG,cAAc,IAAI,CAAC,CAAC;YAE9F,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;oBACvC,iBAAiB,IAAI,cAAc,CAAC;gBACtC,CAAC;gBAED,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;iBAAM,IAAI,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC7C,iBAAiB,IAAI,cAAc,CAAC;YACtC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,CAAC,EAC9B,YAAY,EACZ,cAAc,EAIf,EAGC,EAAE;QACF,MAAM,iBAAiB,GAAa,EAAE,CAAC;QACvC,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1C,IAAI,iBAAiB,GAAG,cAAc,CAAC;QAEvC,CAAC,GAAG,YAAY,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAClD,IAAI,gBAAgB,EAAE,QAAQ,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC;gBAClD,iBAAiB,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC;YAC5C,CAAC;iBAAM,IAAI,iBAAiB,GAAG,CAAC,EAAE,CAAC;gBACjC,MAAM,mBAAmB,GAAG,EAAE,GAAG,sBAAsB,CAAC;gBACxD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAwB,CAAC;gBAC9C,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,GAAG,mBAAmB,CAAC,EAAE,CAAC,CAAC,CAAC;gBAE3F,IAAI,eAAe,EAAE,CAAC;oBACpB,iBAAiB,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC;oBAC1C,iBAAiB,IAAI,eAAe,CAAC;gBACvC,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;IAClE,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,EACvB,YAAY,EACZ,cAAc,EACd,sBAAsB,EAKvB,EAA4B,EAAE;QAC7B,IAAI,gBAAgB,GAAG,YAAY,CAAC;QACpC,IAAI,iBAAiB,GAAG,cAAc,CAAC;QACvC,IAAI,cAAc,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAE7C,GAAG,CAAC;YACF,MAAM,gBAAgB,GAAG,OAAO,CAAC;gBAC/B,EAAE,EAAE,YAAY,CAAC,cAAc,CAAC;gBAChC,IAAI,EAAE,UAAU;gBAChB,GAAG;aACJ,CAAC,CAAC;YACH,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAC5B,GAAG,CAAC,CAAC,CAAC,sBAAsB,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,GAAG,sBAAsB,CAC5F,CAAC;YAEF,IAAI,iBAAiB,GAAG,CAAC,EAAE,CAAC;gBAC1B,sBAAsB,CAAC,OAAO,GAAG,CAAC,GAAG,sBAAsB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;gBAEvF,gBAAgB,IAAI,CAAC,CAAC;gBACtB,cAAc,IAAI,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,QAAQ,iBAAiB,GAAG,CAAC,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE;QAEvD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAC;IAC5C,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC;QACzC,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,IAAI,EAAE,CAAC,CAAC;QACjE,MAAM,eAAe,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAChG,MAAM,WAAW,GAAG,UAAU,EAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC;QACzD,MAAM,sBAAsB,GAAG,OAAO,CAAC;YACrC,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,SAAS;YACf,GAAG;SACJ,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,eAAe;YAC9B,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;YACzD,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC;QACvD,IAAI,cAAc,GAAG,IAAI,CAAC,KAAK,CAC7B,GAAG,CAAC,CAAC,CAAC,sBAAsB,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,GAAG,sBAAsB,CAC5E,CAAC;QACF,IAAI,cAAc,KAAK,mBAAmB,CAAC,OAAO;YAAE,OAAO;QAE3D,mBAAmB,CAAC,OAAO,GAAG,cAAc,CAAC;QAE7C,IAAI,iBAAuC,CAAC;QAC5C,IAAI,gBAAgB,GAAG,YAAY,CAAC;QAEpC,IAAI,cAAc,IAAI,CAAC,EAAE,CAAC;YACxB,IAAI,YAAY,KAAK,KAAK,CAAC,MAAM,EAAE,CAAC;gBAClC,MAAM,eAAe,GAAG,gBAAgB,CAAC,EAAE,sBAAsB,EAAE,CAAC,CAAC;gBAErE,iBAAiB,GAAG,eAAe,CAAC,iBAAiB,CAAC;gBACtD,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,CAAC;YACtD,CAAC;iBAAM,IAAI,gBAAgB,EAAE,MAAM,EAAE,CAAC;gBACpC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC;oBAC/C,YAAY;oBACZ,cAAc;iBACf,CAAC,CAAC;gBAEH,iBAAiB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC;YACzD,CAAC;QACH,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACxB,MAAM,gBAAgB,GAAG,sBAAsB,CAAC;gBAC9C,YAAY;gBACZ,cAAc;aACf,CAAC,CAAC;YAEH,iBAAiB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC;YACvD,cAAc,GAAG,gBAAgB,CAAC,cAAc,CAAC;YAEjD,IAAI,cAAc,GAAG,CAAC,EAAE,CAAC;gBACvB,MAAM,aAAa,GAAG,eAAe,CAAC;oBACpC,YAAY;oBACZ,cAAc;oBACd,sBAAsB;iBACvB,CAAC,CAAC;gBAEH,gBAAgB,GAAG,aAAa,CAAC,YAAY,CAAC;YAChD,CAAC;QACH,CAAC;QAED,eAAe,CAAC,gBAAgB,CAAC,CAAC;QAElC,IAAI,iBAAiB,EAAE,CAAC;YACtB,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEF,6BAA6B;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,sBAAsB,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,qDAAqD;IACrD,eAAe,CAAC,GAAG,EAAE;QACnB,mBAAmB,CAAC,EAAE,CAAC,CAAC;QACxB,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC9B,sBAAsB,CAAC,OAAO,GAAG,EAAE,CAAC;QACpC,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;IACrC,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;IAErD,2BAA2B;IAC3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,sBAAsB,CAAC,CAAC;QAElE,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;QACtE,CAAC;QAED,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,wBAAwB,EAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAC5B,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAClD,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,YAAY,GAAG,CAAC,YAE1B,KAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,OAAO,YAC/D,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAChD,OAAO,CACL,KAAC,KAAK,IACJ,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,YAAY,EAAE,MAAM,IAAI,KAAK,GAAG,YAAY,CAAC,MAAM,EAC9D,QAAQ,EAAE,CAAC,CAAC,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,IACxC,IAAI,CAAC,IAAI,CACd,CACH,CAAC;YACJ,CAAC,CAAC,GACG,GACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { RefObject } from 'react';\n\nimport {\n Flex,\n getEdge,\n registerIcon,\n StyledStackedFieldValue,\n StyledLabel,\n StyledFieldName,\n useDirection,\n useChToPxConversionFactor,\n useTestIds,\n withTestIds,\n NoValue,\n type TestIdProp\n} from '@pega/cosmos-react-core';\nimport { getFieldValueItemTestIds } from '@pega/cosmos-react-core/lib/components/FieldValueList/FieldValueList.test-ids';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n StyledHeaderSummary,\n StyledHeaderSummaryValue,\n StyledHeaderSummaryBlock\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\nimport type { SummaryField } from '../CaseView.types';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst Field = withTestIds(\n ({\n testId,\n item,\n primary,\n truncate\n }: {\n item: SummaryField;\n primary: boolean;\n truncate: boolean;\n } & TestIdProp) => {\n const { name, value, simpleValue } = item;\n const displayValue = simpleValue ?? value ?? <NoValue />;\n const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n return (\n <StyledStackedFieldValue data-testid={testIds.root} data-editable-anchor>\n <StyledLabel as={StyledFieldName} data-testid={testIds.name}>\n {name}\n </StyledLabel>\n <StyledHeaderSummaryValue bold={primary} truncate={truncate} data-testid={testIds.value}>\n {displayValue}\n </StyledHeaderSummaryValue>\n </StyledStackedFieldValue>\n );\n },\n getFieldValueItemTestIds\n);\n\nconst Summary = ({ siblingRef }: { siblingRef: RefObject<HTMLDivElement> }) => {\n const { ltr } = useDirection();\n const { summaryFields } = useCaseViewContext();\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDListElement>(null);\n\n const primaryItems = summaryFields?.primary ?? [];\n const secondaryItems = summaryFields?.secondary ?? [];\n const items = [...primaryItems, ...secondaryItems];\n\n const [displayCount, setDisplayCount] = useState(items.length);\n const [truncatedIndices, setTruncatedIndices] = useState<number[] \| undefined>(\n items.map((_, i) => i)\n );\n\n const priorTrailingEdgeStack = useRef<number[]>([]);\n const priorAvailableSpace = useRef<number \| null>(null);\n\n const evalItemAddition = ({\n nextSiblingLeadingEdge\n }: {\n nextSiblingLeadingEdge: number;\n }): {\n indicesToTruncate: number[];\n nextDisplayCount: number;\n } => {\n const indicesToTruncate: number[] = truncatedIndices ? [...truncatedIndices] : [];\n let nextDisplayCount = displayCount;\n\n const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();\n for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {\n const priorEdge = reversedTrailingEdgeStack[i];\n\n const shouldRender = ltr\n ? priorEdge < nextSiblingLeadingEdge\n : priorEdge > nextSiblingLeadingEdge;\n\n if (shouldRender) {\n priorTrailingEdgeStack.current.pop();\n\n if (!indicesToTruncate.includes(nextDisplayCount)) {\n indicesToTruncate.push(nextDisplayCount);\n }\n\n nextDisplayCount += 1;\n } else {\n break;\n }\n }\n return { indicesToTruncate, nextDisplayCount };\n };\n\n const evalTruncationReduction = ({\n listChildren,\n availableSpace\n }: {\n listChildren: Element[];\n availableSpace: number;\n }): {\n indicesToTruncate: number[];\n } => {\n const indicesToTruncate: number[] = [];\n let hasAvailableSpace = availableSpace;\n\n listChildren.forEach((item, index) => {\n const valueEl = item.lastChild as HTMLElement;\n const truncatedSpace = Math.floor(valueEl.scrollWidth - valueEl.offsetWidth);\n const shouldTruncate = truncatedSpace === 0 ? false : hasAvailableSpace - truncatedSpace <= 0;\n\n if (shouldTruncate) {\n if (!truncatedIndices?.includes(index)) {\n hasAvailableSpace += truncatedSpace;\n }\n\n indicesToTruncate.push(index);\n } else if (truncatedIndices?.includes(index)) {\n hasAvailableSpace -= truncatedSpace;\n }\n });\n\n return { indicesToTruncate };\n };\n\n const evalTruncationIncrease = ({\n listChildren,\n availableSpace\n }: {\n listChildren: Element[];\n availableSpace: number;\n }): {\n indicesToTruncate: number[];\n availableSpace: number;\n } => {\n const indicesToTruncate: number[] = [];\n const lastIndex = listChildren.length - 1;\n let hasAvailableSpace = availableSpace;\n\n [...listChildren].reverse().forEach((item, index) => {\n if (truncatedIndices?.includes(lastIndex - index)) {\n indicesToTruncate.push(lastIndex - index);\n } else if (hasAvailableSpace < 0) {\n const truncatedElMaxWidth = 20 * chToPxConversionFactor;\n const valueEl = item.lastChild as HTMLElement;\n const spaceToTruncate = Math.max(Math.floor(valueEl.offsetWidth - truncatedElMaxWidth), 0);\n\n if (spaceToTruncate) {\n indicesToTruncate.push(lastIndex - index);\n hasAvailableSpace += spaceToTruncate;\n }\n }\n });\n\n return { indicesToTruncate, availableSpace: hasAvailableSpace };\n };\n\n const evalItemRemoval = ({\n listChildren,\n availableSpace,\n nextSiblingLeadingEdge\n }: {\n listChildren: Element[];\n availableSpace: number;\n nextSiblingLeadingEdge: number;\n }): { displayCount: number } => {\n let nextDisplayCount = displayCount;\n let hasAvailableSpace = availableSpace;\n let lastChildIndex = listChildren.length - 1;\n\n do {\n const itemTrailingEdge = getEdge({\n el: listChildren[lastChildIndex],\n side: 'trailing',\n ltr\n });\n hasAvailableSpace = Math.floor(\n ltr ? nextSiblingLeadingEdge - itemTrailingEdge : itemTrailingEdge - nextSiblingLeadingEdge\n );\n\n if (hasAvailableSpace < 0) {\n priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];\n\n nextDisplayCount -= 1;\n lastChildIndex -= 1;\n }\n } while (hasAvailableSpace < 0 && lastChildIndex > -1);\n\n return { displayCount: nextDisplayCount };\n };\n\n const evaluateSummaryDisplay = () => {\n const containerEl = containerRef.current;\n if (!containerEl) return;\n\n const listChildren = Array.from(listRef.current?.children ?? []);\n const lastSummaryItem = listChildren.length ? listChildren[listChildren.length - 1] : undefined;\n const nextSibling = siblingRef?.current ?? document.body;\n const nextSiblingLeadingEdge = getEdge({\n el: nextSibling,\n side: 'leading',\n ltr\n });\n const testEdge = lastSummaryItem\n ? getEdge({ el: lastSummaryItem, side: 'trailing', ltr })\n : getEdge({ el: containerEl, side: 'leading', ltr });\n let availableSpace = Math.floor(\n ltr ? nextSiblingLeadingEdge - testEdge : testEdge - nextSiblingLeadingEdge\n );\n if (availableSpace === priorAvailableSpace.current) return;\n\n priorAvailableSpace.current = availableSpace;\n\n let indicesToTruncate: number[] \| undefined;\n let nextDisplayCount = displayCount;\n\n if (availableSpace >= 0) {\n if (displayCount !== items.length) {\n const additionsConfig = evalItemAddition({ nextSiblingLeadingEdge });\n\n indicesToTruncate = additionsConfig.indicesToTruncate;\n nextDisplayCount = additionsConfig.nextDisplayCount;\n } else if (truncatedIndices?.length) {\n const truncationConfig = evalTruncationReduction({\n listChildren,\n availableSpace\n });\n\n indicesToTruncate = truncationConfig.indicesToTruncate;\n }\n } else if (listChildren) {\n const truncationConfig = evalTruncationIncrease({\n listChildren,\n availableSpace\n });\n\n indicesToTruncate = truncationConfig.indicesToTruncate;\n availableSpace = truncationConfig.availableSpace;\n\n if (availableSpace < 0) {\n const removalConfig = evalItemRemoval({\n listChildren,\n availableSpace,\n nextSiblingLeadingEdge\n });\n\n nextDisplayCount = removalConfig.displayCount;\n }\n }\n\n setDisplayCount(nextDisplayCount);\n\n if (indicesToTruncate) {\n setTruncatedIndices(indicesToTruncate);\n }\n };\n\n // Initial display evaluation\n useEffect(() => {\n evaluateSummaryDisplay();\n }, [items]);\n\n // If primary or secondary fields change, reset state\n useLayoutEffect(() => {\n setTruncatedIndices([]);\n setDisplayCount(items.length);\n priorTrailingEdgeStack.current = [];\n priorAvailableSpace.current = null;\n }, [summaryFields.primary, summaryFields.secondary]);\n\n // Overflow resize observer\n useEffect(() => {\n const resizeObserver = new ResizeObserver(evaluateSummaryDisplay);\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [evaluateSummaryDisplay]);\n\n return (\n <Flex\n as={StyledHeaderSummaryBlock}\n item={{ grow: 1, shrink: 1 }}\n container={{ pad: [0.5, 0], alignItems: 'center' }}\n ref={containerRef}\n hasItems={displayCount > 0}\n >\n <Flex as={StyledHeaderSummary} container={{ gap: 4 }} ref={listRef}>\n {items.slice(0, displayCount).map((item, index) => {\n return (\n <Field\n testId={item.testId}\n item={item}\n primary={!!primaryItems?.length && index < primaryItems.length}\n truncate={!!truncatedIndices?.includes(index)}\n key={item.name}\n />\n );\n })}\n </Flex>\n </Flex>\n );\n};\n\nexport default Summary;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;~~AAwCtD~~,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iEAAiE,CAAC;AAiC5G,eAAO,MAAM,wBAAwB;cACzB,OAAO;;~~2BAJV~~,CAAC;~~iDA8BR~~,CAAC;AAIH,eAAO,MAAM,0BAA0B;~~2BAlC9B~~,CAAC;~~iDAwCR~~,CAAC;AAEH,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6ZAelC,CAAC;AAIH,eAAO,MAAM,oBAAoB;;yLAI/B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;0LAE/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NA6C3B,CAAC;AAIH,eAAO,MAAM,oBAAoB,sOAUhC,CAAC;AAIF,eAAO,MAAM,gBAAgB,yOAAa,CAAC;AAI3C,eAAO,MAAM,8BAA8B;;2LA6CzC,CAAC;AAIH,eAAO,MAAM,mBAAmB;eAA2B,OAAO;YAmBhE,CAAC;AAIH,eAAO,MAAM,oBAAoB,uNAyD/B,CAAC;AAIH,eAAO,MAAM,wBAAwB;cAA0B,OAAO;YAoBpE,CAAC;AAmCH,eAAO,MAAM,mBAAmB,iOAgD9B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;WAC5B,OAAO;eACH,OAAO;WACX,YAAY;YAiCnB,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NA6BjC,CAAC;AAIF,eAAO,MAAM,0BAA0B,6NAkBrC,CAAC;AAIH,eAAO,MAAM,0BAA0B;;2LASrC,CAAC;AAIH,eAAO,MAAM,iCAAiC;;2BAgC5C,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAuD7B,CAAC;AAIF,eAAO,MAAM,WAAW,6NAavB,CAAC;AAGF,eAAO,MAAM,qBAAqB,6NAuEjC,CAAC;AAKF,eAAO,MAAM,iCAAiC,6NAM5C,CAAC;AAEH,eAAO,MAAM,cAAc,6NA4I1B,CAAC;AAIF,eAAO,MAAM,sBAAsB;;yLAAiB,CAAC;AAErD,eAAO,MAAM,mCAAmC;;2BAO9C,CAAC;AAMH,eAAO,MAAM,eAAe,6NAsC1B,CAAC;AAIH,eAAO,MAAM,aAAa,6NAiEzB,CAAC;AAIF,eAAO,MAAM,gBAAgB;oBACX,oBAAoB,CAAC,eAAe,CAAC;wBACjC,OAAO;YA+B3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAwBnC,CAAC;AAIF,eAAO,MAAM,uBAAuB;gCAA4C,OAAO;YAatF,CAAC;AAIF,eAAO,MAAM,yBAAyB,6NAQpC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAIlC,CAAC;AAIH,eAAO,MAAM,WAAW,6NAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,6NAgG1B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;yLAMjC,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;~~sSAoB5B~~,CAAC;AAIH,eAAO,MAAM,sBAAsB,6NAAe,CAAC;AAEnD,eAAO,MAAM,kBAAkB,kaAwB7B,CAAC"}
1	+ {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAyCtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iEAAiE,CAAC;AAiC5G,eAAO,MAAM,wBAAwB;cACzB,OAAO;;2BAiBG,CAAC;iDASrB,CAAC;AAIH,eAAO,MAAM,0BAA0B;2BAbjB,CAAC;iDAmBrB,CAAC;AAEH,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6ZAelC,CAAC;AAIH,eAAO,MAAM,oBAAoB;;yLAI/B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;0LAE/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NA6C3B,CAAC;AAIH,eAAO,MAAM,oBAAoB,sOAUhC,CAAC;AAIF,eAAO,MAAM,gBAAgB,yOAAa,CAAC;AAI3C,eAAO,MAAM,8BAA8B;;2LA6CzC,CAAC;AAIH,eAAO,MAAM,mBAAmB;eAA2B,OAAO;YAmBhE,CAAC;AAIH,eAAO,MAAM,oBAAoB,uNAyD/B,CAAC;AAIH,eAAO,MAAM,wBAAwB;cAA0B,OAAO;YAoBpE,CAAC;AAmCH,eAAO,MAAM,mBAAmB,iOAgD9B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;WAC5B,OAAO;eACH,OAAO;WACX,YAAY;YAiCnB,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NA6BjC,CAAC;AAIF,eAAO,MAAM,0BAA0B,6NAkBrC,CAAC;AAIH,eAAO,MAAM,0BAA0B;;2LASrC,CAAC;AAIH,eAAO,MAAM,iCAAiC;;2BAgC5C,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAuD7B,CAAC;AAIF,eAAO,MAAM,WAAW,6NAavB,CAAC;AAGF,eAAO,MAAM,qBAAqB,6NAuEjC,CAAC;AAKF,eAAO,MAAM,iCAAiC,6NAM5C,CAAC;AAEH,eAAO,MAAM,cAAc,6NA4I1B,CAAC;AAIF,eAAO,MAAM,sBAAsB;;yLAAiB,CAAC;AAErD,eAAO,MAAM,mCAAmC;;2BAO9C,CAAC;AAMH,eAAO,MAAM,eAAe,6NAsC1B,CAAC;AAIH,eAAO,MAAM,aAAa,6NAiEzB,CAAC;AAIF,eAAO,MAAM,gBAAgB;oBACX,oBAAoB,CAAC,eAAe,CAAC;wBACjC,OAAO;YA+B3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAwBnC,CAAC;AAIF,eAAO,MAAM,uBAAuB;gCAA4C,OAAO;YAatF,CAAC;AAIF,eAAO,MAAM,yBAAyB,6NAQpC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAIlC,CAAC;AAIH,eAAO,MAAM,WAAW,6NAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,6NAgG1B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;yLAMjC,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;sSAsB5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,6NAAe,CAAC;AAEnD,eAAO,MAAM,kBAAkB,kaAwB7B,CAAC"}

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { getContrast, hideVisually, meetsContrastGuidelines, rgba, transparentize } from 'polished';
 import { useContext } from 'react';
-import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, StyledCard, Text, readableColor, AppShellContext, AIButton, StyledButton, calculateForegroundColor, calculateBackgroundAndContrastColor, isSolidColor, StyledSummaryListItem, StyledProgressBackdrop, Image, Icon, animations, useDirection } from '@pega/cosmos-react-core';
+import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledInlineFieldValueRow, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, StyledCard, Text, readableColor, AppShellContext, AIButton, StyledButton, calculateForegroundColor, calculateBackgroundAndContrastColor, isSolidColor, StyledSummaryListItem, StyledProgressBackdrop, Image, Icon, animations, useDirection } from '@pega/cosmos-react-core';
 import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
 import { headerHeight } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
@@ -76,7 +76,7 @@ export const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {
         max-width: ${oneColumnDetailsColumnWidth};
       }
-      > ${StyledFieldValue} {
+      > ${StyledFieldValue}, > ${StyledInlineFieldValueRow} > ${StyledFieldValue} {
         max-width: calc(${oneColumnDetailsColumnWidth} - ${labelWidth} - 2 * ${spacing});
       }
     }
@@ -921,7 +921,9 @@ export const StyledCoachButton = styled(AIButton)(({ theme: { base: { spacing, b
     position: fixed;
     width: 2.75rem;
     height: 2.75rem;
-    inset-block-end: calc(2 * ${spacing} + var(--appshell-bottom-offset, 0rem));
+    inset-block-end: calc(
+      var(--footer-height, var(--appshell-bottom-offset, 0rem)) + 2 * ${spacing}
+    );
     inset-inline-end: calc(2 * ${spacing});
     ${previewActive &&
         css `