@pega/cosmos-react-work 4.0.0-dev.13.0 → 4.0.0-dev.14.1

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

@@ -1,33 +1,19 @@
 import { FunctionComponent, Ref } from 'react';
 import { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
 export interface AppAnnouncementProps extends BaseProps, NoChildrenProp {
-    /**
-     * Heading text for the announcement.
-     */
+    /** Heading text for the announcement. */
     heading?: string;
-    /**
-     * Description text for the announcement.
-     */
+    /** Description text for the announcement. */
     description?: string;
-    /**
-     * Announcement details to be displayed in form of bulleted list.
-     */
+    /** Announcement details to be displayed in form of bulleted list. */
     details?: string[];
-    /**
-     * Url to open with What's new link.
-     */
+    /** Url to open with What's new link. */
     whatsNewLink?: string;
-    /**
-     * Content to populate the announcement button.
-     */
+    /** Content to populate the announcement button. */
     whatsNewText?: string;
-    /**
-     * An image source for the decorative background.
-     */
+    /** An image source for the decorative background. */
     image?: string;
-    /**
-     * Callback when user dismisses the announcements.
-     */
+    /** Callback when user dismisses the announcements. */
     onDismiss?: () => void;
     ref?: Ref<HTMLElement>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EASL,SAAS,EACT,YAAY,EAEZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,8IAoFhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CA8C3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EASL,SAAS,EACT,YAAY,EAEZ,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,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,8IAoFhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CA+C3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppAnnouncement/AppAnnouncement.js

@@ -85,7 +85,8 @@ const AppAnnouncement = forwardRef((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("p", { children: description }), details && (_jsx("ul", { children: details.map((item, index) => {
-                            return _jsx("li", { children: item }, index.toString());
+                            // eslint-disable-next-line react/no-array-index-key
+                            return _jsx("li", { children: item }, index);
                         }) })), whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: whatsNewText }))] })] }));
 });
 export default AppAnnouncement;

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

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  tryCatch,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  useDirection,\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  /**\n   * Heading text for the announcement.\n   */\n  heading?: string;\n  /**\n   * Description text for the announcement.\n   */\n  description?: string;\n  /**\n   * Announcement details to be displayed in form of bulleted list.\n   */\n  details?: string[];\n  /**\n   * Url to open with What's new link.\n   */\n  whatsNewLink?: string;\n  /**\n   * Content to populate the announcement button.\n   */\n  whatsNewText?: string;\n  /**\n   * An image source for the decorative background.\n   */\n  image?: string;\n  /**\n   * Callback when user dismisses the announcements.\n   */\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<Pick<AppAnnouncementProps, 'image'>>(props => {\n  const {\n    theme: {\n      base: {\n        palette: { 'brand-primary': brandBackground },\n        shadow,\n        spacing\n      },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = tryCatch(() => readableColor(brandBackground));\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${brandBackground};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\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      margin-bottom: ${spacing};\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      width: 75%;\n      position: relative;\n      z-index: 2;\n\n      p,\n      ul {\n        padding-top: calc(2 * ${spacing});\n      }\n\n      ul {\n        padding-inline-start: calc(2 * ${spacing});\n      }\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        &:enabled:focus,\n        &:not([disabled]):focus {\n          box-shadow: ${shadow.focus};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: FunctionComponent<AppAnnouncementProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<AppAnnouncementProps>, ref: AppAnnouncementProps['ref']) => {\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 && <p>{description}</p>}\n          {details && (\n            <ul>\n              {details.map((item, index) => {\n                return <li key={index.toString()}>{item}</li>;\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"]}
+{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  tryCatch,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  useDirection,\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  /** 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<Pick<AppAnnouncementProps, 'image'>>(props => {\n  const {\n    theme: {\n      base: {\n        palette: { 'brand-primary': brandBackground },\n        shadow,\n        spacing\n      },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = tryCatch(() => readableColor(brandBackground));\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${brandBackground};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\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      margin-bottom: ${spacing};\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      width: 75%;\n      position: relative;\n      z-index: 2;\n\n      p,\n      ul {\n        padding-top: calc(2 * ${spacing});\n      }\n\n      ul {\n        padding-inline-start: calc(2 * ${spacing});\n      }\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        &:enabled:focus,\n        &:not([disabled]):focus {\n          box-shadow: ${shadow.focus};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: FunctionComponent<AppAnnouncementProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<AppAnnouncementProps>, ref: AppAnnouncementProps['ref']) => {\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 && <p>{description}</p>}\n          {details && (\n            <ul>\n              {details.map((item, index) => {\n                // eslint-disable-next-line react/no-array-index-key\n                return <li key={index}>{item}</li>;\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"]}

package/lib/components/CasePreview/CasePreview.d.ts

@@ -3,9 +3,7 @@ import { ForwardProps, BaseProps, TestIdProp, NoChildrenProp } from '@pega/cosmo
 import { CaseViewProps } from '../CaseView';
 import { CaseViewContextValue } from '../CaseView/CaseView.types';
 export interface CasePreviewProps extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summaryFields' | 'tabs' | 'tabContent' | 'stages' | 'tasks' | 'banners' | 'utilities' | 'utilitiesSummaryItems'>, NoChildrenProp, TestIdProp, BaseProps {
-    /**
-     * A set of props including an href that will be forwarded to the case preview's heading and subheading.
-     */
+    /** A set of props including an href that will be forwarded to the case preview's heading and subheading. */
     caseLink?: CaseViewContextValue['caseLink'];
     /** If true, the Case Preview will be visible. */
     open: boolean;

package/lib/components/CasePreview/CasePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAQL,YAAY,EAMZ,SAAS,EACT,UAAU,EACV,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,EAKd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAMlE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,eAAe,GACf,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,SAAS,GACT,WAAW,GACX,uBAAuB,CAC1B,EACD,cAAc,EACd,UAAU,EACV,SAAS;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAuED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAsGnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAQL,YAAY,EAMZ,SAAS,EACT,UAAU,EACV,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,EAKd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAMlE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,eAAe,GACf,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,SAAS,GACT,WAAW,GACX,uBAAuB,CAC1B,EACD,cAAc,EACd,UAAU,EACV,SAAS;IACX,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAuED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAsGnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CasePreview/CasePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useState,\n  useCallback,\n  useEffect,\n  useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Drawer,\n  Icon,\n  registerIcon,\n  Button,\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  ForwardProps,\n  useBreakpoint,\n  useElement,\n  useDirection,\n  useI18n,\n  AppShellContext,\n  BaseProps,\n  TestIdProp,\n  NoChildrenProp,\n  useTestIds\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n  CaseViewProps,\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledSummaryRegion\n} from '../CaseView';\nimport { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n  extends Pick<\n      CaseViewProps,\n      | 'caseId'\n      | 'heading'\n      | 'subheading'\n      | 'parentCases'\n      | 'icon'\n      | 'followed'\n      | 'onFollowedChange'\n      | 'actions'\n      | 'promotedActions'\n      | 'onEdit'\n      | 'summaryFields'\n      | 'tabs'\n      | 'tabContent'\n      | 'stages'\n      | 'tasks'\n      | 'banners'\n      | 'utilities'\n      | 'utilitiesSummaryItems'\n    >,\n    NoChildrenProp,\n    TestIdProp,\n    BaseProps {\n  /**\n   * A set of props including an href that will be forwarded to the case preview's heading and subheading.\n   */\n  caseLink?: CaseViewContextValue['caseLink'];\n  /** If true, the Case Preview will be visible. */\n  open: boolean;\n  /** Callback fired before Case Preview opens. */\n  onBeforeOpen?: () => void;\n  /** Callback fired after Case Preview opens. */\n  onAfterOpen?: () => void;\n  /** Callback fired before Case Preview closes. */\n  onBeforeClose?: () => void;\n  /** Callback fired after Case Preview closes. */\n  onAfterClose?: () => void;\n  /** Callback fired when a click action occurs outside of the Case Preview. */\n  onOuterClick?: () => void;\n  /** Reference to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n  return css`\n    z-index: ${theme.base['z-index'].drawer};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'brand-primary': brandPrimary }\n      }\n    }\n  }) => {\n    const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n    return css`\n      background-color: ${brandPrimary};\n      padding: ${spacing} calc(2 * ${spacing}) 0;\n\n      button {\n        color: ${buttonColor};\n      }\n    `;\n  }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n  return css`\n    height: calc(100vh - var(--appshell-offset, 0rem));\n    top: var(--appshell-offset, 0);\n    z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n    ${StyledCaseView} {\n      height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n      @media (pointer: coarse) {\n        height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n      }\n\n      ${StyledSummaryRegion} {\n        position: relative;\n        top: 0;\n      }\n    }\n\n    ${StyledCaseViewContent} {\n      overflow-y: auto;\n      margin-bottom: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});\n\n      @media (pointer: coarse) {\n        margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n      }\n\n      & > :last-child {\n        padding-bottom: calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) => {\n    const {\n      testId,\n      open: openProp,\n      caseId,\n      heading,\n      subheading,\n      caseLink,\n      parentCases,\n      icon,\n      followed,\n      onFollowedChange,\n      summaryFields,\n      tabs,\n      stages,\n      tasks,\n      tabContent,\n      utilities,\n      utilitiesSummaryItems,\n      actions,\n      banners,\n      onEdit,\n      ...restProps\n    } = props;\n    const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n    const t = useI18n();\n    const { previewTriggerRef } = useContext(AppShellContext);\n    const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [open, setOpen] = useState(openProp);\n    const direction = useDirection();\n\n    const closePreview = useCallback(() => {\n      setOpen(false);\n      previewTriggerRef.current?.focus();\n    }, []);\n\n    useEffect(() => {\n      setOpen(openProp);\n    }, [openProp]);\n\n    useEffect(() => {\n      if (openProp && closeButtonEl) {\n        closeButtonEl.focus();\n      }\n    }, [openProp, closeButtonEl]);\n\n    return (\n      <Drawer\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledPreviewDrawer}\n        role='complementary'\n        forwardedAs={Flex}\n        container={{ direction: 'column' }}\n        ref={ref}\n        open={open && isSmallOrAbove}\n        position='fixed'\n        placement={direction.end}\n        aria-label={t('preview_of_noun', [heading])}\n        shadow\n        nullWhenClosed\n      >\n        <StyledPreviewActions>\n          <Button\n            data-testid={testIds.close}\n            variant='simple'\n            icon\n            onClick={closePreview}\n            ref={setCloseButtonEl}\n            label={t('close_preview')}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledPreviewActions>\n\n        <CaseView\n          caseId={caseId}\n          parentCases={parentCases}\n          heading={heading}\n          subheading={subheading}\n          caseLink={caseLink}\n          icon={icon}\n          followed={followed}\n          onFollowedChange={onFollowedChange}\n          summaryFields={summaryFields}\n          tabs={tabs}\n          stages={stages}\n          tasks={tasks}\n          tabContent={tabContent}\n          utilities={utilities}\n          utilitiesSummaryItems={utilitiesSummaryItems}\n          actions={actions}\n          banners={banners}\n          onEdit={onEdit}\n          isPreview\n        />\n      </Drawer>\n    );\n  }\n);\n\nexport default CasePreview;\n"]}
+{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useState,\n  useCallback,\n  useEffect,\n  useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Drawer,\n  Icon,\n  registerIcon,\n  Button,\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  ForwardProps,\n  useBreakpoint,\n  useElement,\n  useDirection,\n  useI18n,\n  AppShellContext,\n  BaseProps,\n  TestIdProp,\n  NoChildrenProp,\n  useTestIds\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n  CaseViewProps,\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledSummaryRegion\n} from '../CaseView';\nimport { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n  extends Pick<\n      CaseViewProps,\n      | 'caseId'\n      | 'heading'\n      | 'subheading'\n      | 'parentCases'\n      | 'icon'\n      | 'followed'\n      | 'onFollowedChange'\n      | 'actions'\n      | 'promotedActions'\n      | 'onEdit'\n      | 'summaryFields'\n      | 'tabs'\n      | 'tabContent'\n      | 'stages'\n      | 'tasks'\n      | 'banners'\n      | 'utilities'\n      | 'utilitiesSummaryItems'\n    >,\n    NoChildrenProp,\n    TestIdProp,\n    BaseProps {\n  /** A set of props including an href that will be forwarded to the case preview's heading and subheading. */\n  caseLink?: CaseViewContextValue['caseLink'];\n  /** If true, the Case Preview will be visible. */\n  open: boolean;\n  /** Callback fired before Case Preview opens. */\n  onBeforeOpen?: () => void;\n  /** Callback fired after Case Preview opens. */\n  onAfterOpen?: () => void;\n  /** Callback fired before Case Preview closes. */\n  onBeforeClose?: () => void;\n  /** Callback fired after Case Preview closes. */\n  onAfterClose?: () => void;\n  /** Callback fired when a click action occurs outside of the Case Preview. */\n  onOuterClick?: () => void;\n  /** Reference to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n  return css`\n    z-index: ${theme.base['z-index'].drawer};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'brand-primary': brandPrimary }\n      }\n    }\n  }) => {\n    const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n    return css`\n      background-color: ${brandPrimary};\n      padding: ${spacing} calc(2 * ${spacing}) 0;\n\n      button {\n        color: ${buttonColor};\n      }\n    `;\n  }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n  return css`\n    height: calc(100vh - var(--appshell-offset, 0rem));\n    top: var(--appshell-offset, 0);\n    z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n    ${StyledCaseView} {\n      height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n      @media (pointer: coarse) {\n        height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n      }\n\n      ${StyledSummaryRegion} {\n        position: relative;\n        top: 0;\n      }\n    }\n\n    ${StyledCaseViewContent} {\n      overflow-y: auto;\n      margin-bottom: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});\n\n      @media (pointer: coarse) {\n        margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n      }\n\n      & > :last-child {\n        padding-bottom: calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) => {\n    const {\n      testId,\n      open: openProp,\n      caseId,\n      heading,\n      subheading,\n      caseLink,\n      parentCases,\n      icon,\n      followed,\n      onFollowedChange,\n      summaryFields,\n      tabs,\n      stages,\n      tasks,\n      tabContent,\n      utilities,\n      utilitiesSummaryItems,\n      actions,\n      banners,\n      onEdit,\n      ...restProps\n    } = props;\n    const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n    const t = useI18n();\n    const { previewTriggerRef } = useContext(AppShellContext);\n    const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [open, setOpen] = useState(openProp);\n    const direction = useDirection();\n\n    const closePreview = useCallback(() => {\n      setOpen(false);\n      previewTriggerRef.current?.focus();\n    }, []);\n\n    useEffect(() => {\n      setOpen(openProp);\n    }, [openProp]);\n\n    useEffect(() => {\n      if (openProp && closeButtonEl) {\n        closeButtonEl.focus();\n      }\n    }, [openProp, closeButtonEl]);\n\n    return (\n      <Drawer\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledPreviewDrawer}\n        role='complementary'\n        forwardedAs={Flex}\n        container={{ direction: 'column' }}\n        ref={ref}\n        open={open && isSmallOrAbove}\n        position='fixed'\n        placement={direction.end}\n        aria-label={t('preview_of_noun', [heading])}\n        shadow\n        nullWhenClosed\n      >\n        <StyledPreviewActions>\n          <Button\n            data-testid={testIds.close}\n            variant='simple'\n            icon\n            onClick={closePreview}\n            ref={setCloseButtonEl}\n            label={t('close_preview')}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledPreviewActions>\n\n        <CaseView\n          caseId={caseId}\n          parentCases={parentCases}\n          heading={heading}\n          subheading={subheading}\n          caseLink={caseLink}\n          icon={icon}\n          followed={followed}\n          onFollowedChange={onFollowedChange}\n          summaryFields={summaryFields}\n          tabs={tabs}\n          stages={stages}\n          tasks={tasks}\n          tabContent={tabContent}\n          utilities={utilities}\n          utilitiesSummaryItems={utilitiesSummaryItems}\n          actions={actions}\n          banners={banners}\n          onEdit={onEdit}\n          isPreview\n        />\n      </Drawer>\n    );\n  }\n);\n\nexport default CasePreview;\n"]}

package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4D,MAAM,OAAO,CAAC;AAqCrF,QAAA,MAAM,UAAU,EAAE,EAgSjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/CaseView/CaseHeader/CaseHeader.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Breadcrumbs, Flex, getEdge, Icon, registerIcon, Text, Link, Button, MenuButton, throttle, useDirection, useI18n, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
+import * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';
+import { StyledCaseHeader, StyledCaseIconWrap, StyledCaseHeaderText, StyledExpandCollapseButton, StyledSubheading, StyledHeaderActions, StyledCaseHeaderPromotedAction, StyledHeaderBreadcrumbBlock } from '../CaseView.styles';
+import { useCaseViewContext } from '../CaseView.context';
+import Summary from './Summary';
+registerIcon(pencilIcon, moreIcon);
+const CaseHeader = () => {
+    const t = useI18n();
+    const { ltr } = useDirection();
+    const { testIds, caseId, icon, heading, subheading, actions, caseLink, parentCases, onEdit, followed, onFollowedChange, promotedActions, summaryId, summaryExpanded, summaryFields, onToggleSummary, isPreview, aboveSM, aboveMD, persistentUtility } = useCaseViewContext();
+    const [wrapPromotedActions, setWrapPromotedActions] = useState(false);
+    const [breadcrumbMaxWidth, setBreadcrumbMaxWidth] = useState();
+    const [summaryResetID, setSummaryResetID] = useState(Math.random());
+    const wrapActionsBreakpoint = useRef(null);
+    const contentsEl = useRef(null);
+    const headerGroupEl = useRef(null);
+    const actionsContainerEl = useRef(null);
+    const caseActions = actions
+        ? actions.map(action => {
+            return {
+                ...action,
+                primary: action.text,
+                visual: action.icon ? _jsx(Icon, { name: action.icon }) : null
+            };
+        })
+        : undefined;
+    const toggleButtonRef = useRef(null);
+    // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.
+    useAfterInitialEffect(() => {
+        if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {
+            toggleButtonRef.current.blur();
+            setTimeout(() => {
+                toggleButtonRef.current?.focus();
+            }, 0);
+        }
+    }, [summaryExpanded]);
+    const showExpandCollapse = !isPreview && aboveMD;
+    const collapsedMainHeader = (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);
+    // Actions wrapping
+    useLayoutEffect(() => {
+        if (!wrapPromotedActions &&
+            contentsEl.current &&
+            headerGroupEl.current &&
+            actionsContainerEl.current) {
+            const contentStart = getEdge({
+                el: contentsEl.current,
+                side: 'leading',
+                ltr
+            });
+            const headerGroupEnd = getEdge({
+                el: headerGroupEl.current,
+                side: 'trailing',
+                ltr
+            });
+            const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;
+            wrapActionsBreakpoint.current =
+                Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);
+        }
+        const promotedActionsWrapHandler = () => {
+            if (wrapActionsBreakpoint.current && contentsEl.current) {
+                setWrapPromotedActions(Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current);
+            }
+        };
+        const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));
+        promotedActionsWrapHandler();
+        if (contentsEl.current) {
+            resizeObserver.observe(contentsEl.current, { box: 'border-box' });
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [
+        contentsEl,
+        headerGroupEl,
+        actionsContainerEl,
+        promotedActions,
+        heading,
+        subheading,
+        wrapPromotedActions
+    ]);
+    // Set Breadcrumbs max-width
+    useEffect(() => {
+        if (headerGroupEl.current && heading) {
+            if (!wrapPromotedActions) {
+                const headingWidth = headerGroupEl.current.querySelector('h1')?.offsetWidth;
+                setBreadcrumbMaxWidth(headingWidth);
+            }
+            else {
+                setBreadcrumbMaxWidth(undefined);
+            }
+        }
+    }, [headerGroupEl, heading, wrapPromotedActions]);
+    // Reset summary
+    useEffect(() => {
+        setSummaryResetID(Math.random());
+    }, [heading, summaryFields, promotedActions]);
+    return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 2 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, "aria-expanded": summaryExpanded ? 'true' : 'false', "aria-controls": summaryId, children: _jsx(Icon, { name: 'arrow-micro-left' }) })), icon && (_jsx(Flex, { container: true, item: { shrink: 0 }, as: StyledCaseIconWrap, children: icon })), _jsxs(Flex, { as: StyledCaseHeaderText, container: {
+                            direction: 'column',
+                            pad: [0, 0, 0, 1],
+                            alignItems: 'start'
+                        }, item: aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }, ref: headerGroupEl, children: [_jsx(Text, { "data-testid": testIds.heading, variant: 'h1', children: caseLink ? _jsx(Link, { ...caseLink, children: heading }) : heading }), subheading && (!parentCases || subheading !== caseId) && (_jsx(StyledSubheading, { "data-testid": testIds.subheading, children: subheading })), parentCases && ((!wrapPromotedActions && breadcrumbMaxWidth) || wrapPromotedActions) && (_jsx(StyledHeaderBreadcrumbBlock, { breadcrumbWidth: breadcrumbMaxWidth, children: _jsx(Breadcrumbs, { forwardedAs: 'p', path: [
+                                        ...parentCases,
+                                        {
+                                            ...caseLink,
+                                            id: caseId,
+                                            primary: caseId,
+                                            href: caseLink?.href
+                                        }
+                                    ] }) }))] }), collapsedMainHeader && !wrapPromotedActions && (_jsx(Summary, { siblingRef: actionsContainerEl }, summaryResetID)), _jsxs(Flex, { as: StyledHeaderActions, item: { shrink: 0, alignSelf: 'center' }, container: { alignItems: 'start', pad: [0, 0, 0, 2] }, offsetEnd: !summaryExpanded, ref: actionsContainerEl, children: [collapsedMainHeader &&
+                                !wrapPromotedActions &&
+                                promotedActions &&
+                                promotedActions.length > 0 ? (_jsx(_Fragment, { children: promotedActions.map(promotedAction => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => promotedAction.onClick?.(promotedAction.id, e), children: promotedAction.text }, promotedAction.id))) })) : null, onEdit && (_jsx(Button, { "data-testid": testIds.edit, icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), children: _jsx(Icon, { name: 'pencil' }) })), caseActions && (_jsx(MenuButton, { "data-testid": testIds.actions, icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
+                                    items: followed !== undefined
+                                        ? [
+                                            {
+                                                id: 'follow',
+                                                primary: followed ? t('unfollow') : t('follow'),
+                                                onClick: () => onFollowedChange?.(!followed)
+                                            },
+                                            ...caseActions
+                                        ]
+                                        : caseActions,
+                                    scrollAt: 20
+                                } }))] })] }), (!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&
+                promotedActions &&
+                promotedActions.length > 0 ? (_jsx(Flex, { "data-testid": testIds.promotedActions, container: { justify: 'start', wrap: 'wrap', gap: 1 }, children: promotedActions.map(({ id, text, onClick }) => (_jsx("div", { children: _jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => onClick?.(id, e), children: text }) }, text))) })) : null] }));
+};
+export default CaseHeader;
+//# sourceMappingURL=CaseHeader.js.map

package/lib/components/CaseView/CaseHeader/CaseHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EAEJ,MAAM,EACN,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,0BAA0B,EAC1B,gBAAgB,EAChB,mBAAmB,EACnB,8BAA8B,EAC9B,2BAA2B,EAC5B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,UAAU,GAAO,GAAG,EAAE;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,MAAM,EACJ,OAAO,EACP,MAAM,EACN,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,eAAe,EACf,aAAa,EACb,eAAe,EACf,SAAS,EACT,OAAO,EACP,OAAO,EACP,iBAAiB,EAClB,GAAG,kBAAkB,EAAE,CAAC;IAEzB,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACnF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAExF,MAAM,qBAAqB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,MAAM,WAAW,GAAgC,OAAO;QACtD,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACnB,OAAO;gBACL,GAAG,MAAM;gBACT,OAAO,EAAE,MAAM,CAAC,IAAI;gBACpB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI;aACzD,CAAC;QACJ,CAAC,CAAC;QACJ,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,kGAAkG;IAClG,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,eAAe,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;YACjF,eAAe,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC/B,UAAU,CAAC,GAAG,EAAE;gBACd,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACnC,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,kBAAkB,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;IACjD,MAAM,mBAAmB,GACvB,CAAC,CAAC,SAAS,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,eAAe,CAAC,CAAC;IAElF,mBAAmB;IACnB,eAAe,CAAC,GAAG,EAAE;QACnB,IACE,CAAC,mBAAmB;YACpB,UAAU,CAAC,OAAO;YAClB,aAAa,CAAC,OAAO;YACrB,kBAAkB,CAAC,OAAO,EAC1B;YACA,MAAM,YAAY,GAAG,OAAO,CAAC;gBAC3B,EAAE,EAAE,UAAU,CAAC,OAAO;gBACtB,IAAI,EAAE,SAAS;gBACf,GAAG;aACJ,CAAC,CAAC;YACH,MAAM,cAAc,GAAG,OAAO,CAAC;gBAC7B,EAAE,EAAE,aAAa,CAAC,OAAO;gBACzB,IAAI,EAAE,UAAU;gBAChB,GAAG;aACJ,CAAC,CAAC;YACH,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAEvF,qBAAqB,CAAC,OAAO;gBAC3B,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;SAC1F;QAED,MAAM,0BAA0B,GAAG,GAAG,EAAE;YACtC,IAAI,qBAAqB,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE;gBACvD,sBAAsB,CACpB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,qBAAqB,CAAC,OAAO,CAC1E,CAAC;aACH;QACH,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC,CAAC;QAEpF,0BAA0B,EAAE,CAAC;QAE7B,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;SACnE;QAED,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE;QACD,UAAU;QACV,aAAa;QACb,kBAAkB;QAClB,eAAe;QACf,OAAO;QACP,UAAU;QACV,mBAAmB;KACpB,CAAC,CAAC;IAEH,4BAA4B;IAC5B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,CAAC,OAAO,IAAI,OAAO,EAAE;YACpC,IAAI,CAAC,mBAAmB,EAAE;gBACxB,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;gBAC5E,qBAAqB,CAAC,YAAY,CAAC,CAAC;aACrC;iBAAM;gBACL,qBAAqB,CAAC,SAAS,CAAC,CAAC;aAClC;SACF;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAElD,gBAAgB;IAChB,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAE9C,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,MAAM,EAC3B,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAE1C,MAAC,IAAI,IAAC,SAAS,QAAC,GAAG,EAAE,UAAU,aAC5B,kBAAkB,IAAI,eAAe,IAAI,CAAC,iBAAiB,IAAI,CAC9D,KAAC,0BAA0B,IACzB,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,EACjE,IAAI,QACJ,OAAO,yBACQ,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAClC,SAAS,YAExB,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,GAAG,GACL,CAC9B,EAEA,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,SAAS,QAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,kBAAkB,YACxD,IAAI,GACA,CACR,EAGD,MAAC,IAAI,IACH,EAAE,EAAE,oBAAoB,EACxB,SAAS,EAAE;4BACT,SAAS,EAAE,QAAQ;4BACnB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;4BACjB,UAAU,EAAE,OAAO;yBACpB,EACD,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAChF,GAAG,EAAE,aAAa,aAElB,KAAC,IAAI,mBAAc,OAAO,CAAC,OAAO,EAAE,OAAO,EAAC,IAAI,YAC7C,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,OAAK,QAAQ,YAAG,OAAO,GAAQ,CAAC,CAAC,CAAC,OAAO,GACrD,EAEN,UAAU,IAAI,CAAC,CAAC,WAAW,IAAI,UAAU,KAAK,MAAM,CAAC,IAAI,CACxD,KAAC,gBAAgB,mBAAc,OAAO,CAAC,UAAU,YAAG,UAAU,GAAoB,CACnF,EAEA,WAAW,IAAI,CAAC,CAAC,CAAC,mBAAmB,IAAI,kBAAkB,CAAC,IAAI,mBAAmB,CAAC,IAAI,CACvF,KAAC,2BAA2B,IAAC,eAAe,EAAE,kBAAkB,YAC9D,KAAC,WAAW,IACV,WAAW,EAAC,GAAG,EACf,IAAI,EAAE;wCACJ,GAAG,WAAW;wCACd;4CACE,GAAG,QAAQ;4CACX,EAAE,EAAE,MAAM;4CACV,OAAO,EAAE,MAAM;4CACf,IAAI,EAAE,QAAQ,EAAE,IAAI;yCACrB;qCACF,GACD,GAC0B,CAC/B,IACI,EAGN,mBAAmB,IAAI,CAAC,mBAAmB,IAAI,CAC9C,KAAC,OAAO,IAAC,UAAU,EAAE,kBAAkB,IAAO,cAAc,CAAI,CACjE,EAGD,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EACvB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EACxC,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EACrD,SAAS,EAAE,CAAC,eAAe,EAC3B,GAAG,EAAE,kBAAkB,aAEtB,mBAAmB;gCACpB,CAAC,mBAAmB;gCACpB,eAAe;gCACf,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3B,4BACG,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,CACrC,KAAC,8BAA8B,IAC7B,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAC5C,cAAc,CAAC,OAAO,EAAE,CAAC,cAAc,CAAC,EAAE,EAAE,CAAC,CAAC,YAI/C,cAAc,CAAC,IAAI,IAFf,cAAc,CAAC,EAAE,CAGS,CAClC,CAAC,GACD,CACJ,CAAC,CAAC,CAAC,IAAI,EAEP,MAAM,IAAI,CACT,KAAC,MAAM,mBACQ,OAAO,CAAC,IAAI,EACzB,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,YAEhB,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACf,CACV,EAEA,WAAW,IAAI,CACd,KAAC,UAAU,mBACI,OAAO,CAAC,OAAO,EAC5B,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,IAAI,EAAE;oCACJ,KAAK,EACH,QAAQ,KAAK,SAAS;wCACpB,CAAC,CAAC;4CACE;gDACE,EAAE,EAAE,QAAQ;gDACZ,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;gDAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC,CAAC,QAAQ,CAAC;6CAC7C;4CACD,GAAG,WAAW;yCACf;wCACH,CAAC,CAAC,WAAW;oCACjB,QAAQ,EAAE,EAAE;iCACb,GACD,CACH,IACI,IACF,EAGN,CAAC,CAAC,mBAAmB,IAAI,mBAAmB,IAAI,CAAC,OAAO,CAAC;gBAC1D,eAAe;gBACf,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3B,KAAC,IAAI,mBACU,OAAO,CAAC,eAAe,EACpC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,YAEpD,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAC9C,wBACE,KAAC,8BAA8B,IAC7B,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAE9D,IAAI,GAC0B,IANzB,IAAI,CAOR,CACP,CAAC,GACG,CACR,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC, MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n  Breadcrumbs,\n  Flex,\n  getEdge,\n  Icon,\n  registerIcon,\n  Text,\n  Link,\n  MenuItemProps,\n  Button,\n  MenuButton,\n  throttle,\n  useDirection,\n  useI18n,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\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  StyledCaseHeader,\n  StyledCaseIconWrap,\n  StyledCaseHeaderText,\n  StyledExpandCollapseButton,\n  StyledSubheading,\n  StyledHeaderActions,\n  StyledCaseHeaderPromotedAction,\n  StyledHeaderBreadcrumbBlock\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n  const t = useI18n();\n  const { ltr } = useDirection();\n\n  const {\n    testIds,\n    caseId,\n    icon,\n    heading,\n    subheading,\n    actions,\n    caseLink,\n    parentCases,\n    onEdit,\n    followed,\n    onFollowedChange,\n    promotedActions,\n    summaryId,\n    summaryExpanded,\n    summaryFields,\n    onToggleSummary,\n    isPreview,\n    aboveSM,\n    aboveMD,\n    persistentUtility\n  } = useCaseViewContext();\n\n  const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n  const [breadcrumbMaxWidth, setBreadcrumbMaxWidth] = useState<number | undefined>();\n  const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n  const wrapActionsBreakpoint = useRef<number | null>(null);\n  const contentsEl = useRef<HTMLDivElement>(null);\n  const headerGroupEl = useRef<HTMLElement>(null);\n  const actionsContainerEl = useRef<HTMLDivElement>(null);\n\n  const caseActions: MenuItemProps[] | undefined = actions\n    ? actions.map(action => {\n        return {\n          ...action,\n          primary: action.text,\n          visual: action.icon ? <Icon name={action.icon} /> : null\n        };\n      })\n    : undefined;\n\n  const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n  // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n  useAfterInitialEffect(() => {\n    if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n      toggleButtonRef.current.blur();\n      setTimeout(() => {\n        toggleButtonRef.current?.focus();\n      }, 0);\n    }\n  }, [summaryExpanded]);\n\n  const showExpandCollapse = !isPreview && aboveMD;\n  const collapsedMainHeader =\n    (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);\n\n  // Actions wrapping\n  useLayoutEffect(() => {\n    if (\n      !wrapPromotedActions &&\n      contentsEl.current &&\n      headerGroupEl.current &&\n      actionsContainerEl.current\n    ) {\n      const contentStart = getEdge({\n        el: contentsEl.current,\n        side: 'leading',\n        ltr\n      });\n      const headerGroupEnd = getEdge({\n        el: headerGroupEl.current,\n        side: 'trailing',\n        ltr\n      });\n      const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n      wrapActionsBreakpoint.current =\n        Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n    }\n\n    const promotedActionsWrapHandler = () => {\n      if (wrapActionsBreakpoint.current && contentsEl.current) {\n        setWrapPromotedActions(\n          Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n        );\n      }\n    };\n\n    const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n    promotedActionsWrapHandler();\n\n    if (contentsEl.current) {\n      resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [\n    contentsEl,\n    headerGroupEl,\n    actionsContainerEl,\n    promotedActions,\n    heading,\n    subheading,\n    wrapPromotedActions\n  ]);\n\n  // Set Breadcrumbs max-width\n  useEffect(() => {\n    if (headerGroupEl.current && heading) {\n      if (!wrapPromotedActions) {\n        const headingWidth = headerGroupEl.current.querySelector('h1')?.offsetWidth;\n        setBreadcrumbMaxWidth(headingWidth);\n      } else {\n        setBreadcrumbMaxWidth(undefined);\n      }\n    }\n  }, [headerGroupEl, heading, wrapPromotedActions]);\n\n  // Reset summary\n  useEffect(() => {\n    setSummaryResetID(Math.random());\n  }, [heading, summaryFields, promotedActions]);\n\n  return (\n    <Flex\n      data-testid={testIds.header}\n      as={StyledCaseHeader}\n      container={{ direction: 'column', gap: 2 }}\n    >\n      <Flex container ref={contentsEl}>\n        {showExpandCollapse && onToggleSummary && !persistentUtility && (\n          <StyledExpandCollapseButton\n            ref={toggleButtonRef}\n            onClick={onToggleSummary}\n            label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n            icon\n            compact\n            aria-expanded={summaryExpanded ? 'true' : 'false'}\n            aria-controls={summaryId}\n          >\n            <Icon name='arrow-micro-left' />\n          </StyledExpandCollapseButton>\n        )}\n\n        {icon && (\n          <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n            {icon}\n          </Flex>\n        )}\n\n        {/* header group */}\n        <Flex\n          as={StyledCaseHeaderText}\n          container={{\n            direction: 'column',\n            pad: [0, 0, 0, 1],\n            alignItems: 'start'\n          }}\n          item={aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }}\n          ref={headerGroupEl}\n        >\n          <Text data-testid={testIds.heading} variant='h1'>\n            {caseLink ? <Link {...caseLink}>{heading}</Link> : heading}\n          </Text>\n\n          {subheading && (!parentCases || subheading !== caseId) && (\n            <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n          )}\n\n          {parentCases && ((!wrapPromotedActions && breadcrumbMaxWidth) || wrapPromotedActions) && (\n            <StyledHeaderBreadcrumbBlock breadcrumbWidth={breadcrumbMaxWidth}>\n              <Breadcrumbs\n                forwardedAs='p'\n                path={[\n                  ...parentCases,\n                  {\n                    ...caseLink,\n                    id: caseId,\n                    primary: caseId,\n                    href: caseLink?.href\n                  }\n                ]}\n              />\n            </StyledHeaderBreadcrumbBlock>\n          )}\n        </Flex>\n\n        {/* summary */}\n        {collapsedMainHeader && !wrapPromotedActions && (\n          <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n        )}\n\n        {/* inline actions */}\n        <Flex\n          as={StyledHeaderActions}\n          item={{ shrink: 0, alignSelf: 'center' }}\n          container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n          offsetEnd={!summaryExpanded}\n          ref={actionsContainerEl}\n        >\n          {collapsedMainHeader &&\n          !wrapPromotedActions &&\n          promotedActions &&\n          promotedActions.length > 0 ? (\n            <>\n              {promotedActions.map(promotedAction => (\n                <StyledCaseHeaderPromotedAction\n                  variant='secondary'\n                  onClick={(e: MouseEvent<HTMLButtonElement>) =>\n                    promotedAction.onClick?.(promotedAction.id, e)\n                  }\n                  key={promotedAction.id}\n                >\n                  {promotedAction.text}\n                </StyledCaseHeaderPromotedAction>\n              ))}\n            </>\n          ) : null}\n\n          {onEdit && (\n            <Button\n              data-testid={testIds.edit}\n              icon\n              variant='simple'\n              onClick={onEdit}\n              label={t('edit')}\n            >\n              <Icon name='pencil' />\n            </Button>\n          )}\n\n          {caseActions && (\n            <MenuButton\n              data-testid={testIds.actions}\n              icon='more'\n              iconOnly\n              variant='simple'\n              text={t('actions')}\n              menu={{\n                items:\n                  followed !== undefined\n                    ? [\n                        {\n                          id: 'follow',\n                          primary: followed ? t('unfollow') : t('follow'),\n                          onClick: () => onFollowedChange?.(!followed)\n                        },\n                        ...caseActions\n                      ]\n                    : caseActions,\n                scrollAt: 20\n              }}\n            />\n          )}\n        </Flex>\n      </Flex>\n\n      {/* wrapped promoted actions */}\n      {(!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&\n      promotedActions &&\n      promotedActions.length > 0 ? (\n        <Flex\n          data-testid={testIds.promotedActions}\n          container={{ justify: 'start', wrap: 'wrap', gap: 1 }}\n        >\n          {promotedActions.map(({ id, text, onClick }) => (\n            <div key={text}>\n              <StyledCaseHeaderPromotedAction\n                variant='secondary'\n                onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n              >\n                {text}\n              </StyledCaseHeaderPromotedAction>\n            </div>\n          ))}\n        </Flex>\n      ) : null}\n    </Flex>\n  );\n};\n\nexport default CaseHeader;\n"]}

package/lib/components/CaseView/CaseHeader/Summary.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+declare const Summary: ({ siblingRef }: {
+    siblingRef: RefObject<HTMLDivElement>;
+}) => JSX.Element;
+export default Summary;
+//# sourceMappingURL=Summary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AA+C/D,QAAA,MAAM,OAAO;gBAAkC,UAAU,cAAc,CAAC;iBAkQvE,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Flex, getEdge, registerIcon, StyledStackedFieldValue, StyledLabel, StyledFieldName, useDirection, useChToPxConversionFactor } from '@pega/cosmos-react-core';
+import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
+import * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';
+import { StyledHeaderSummary, StyledHeaderSummaryValue, StyledHeaderSummaryBlock } from '../CaseView.styles';
+import { useCaseViewContext } from '../CaseView.context';
+registerIcon(pencilIcon, moreIcon);
+const Field = ({ item, primary, truncate }) => {
+    const { name, value, simpleValue } = item;
+    const displayValue = simpleValue ?? value ?? _jsx("span", { children: "\u2013\u2013" });
+    return (_jsxs(StyledStackedFieldValue, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: name }), _jsx(StyledHeaderSummaryValue, { bold: primary, truncate: truncate, children: displayValue })] }));
+};
+const Summary = ({ siblingRef }) => {
+    const { ltr } = useDirection();
+    const { summaryFields } = useCaseViewContext();
+    const chToPxConversionFactor = useChToPxConversionFactor();
+    const containerRef = useRef(null);
+    const listRef = useRef(null);
+    const primaryItems = summaryFields?.primary ?? [];
+    const secondaryItems = summaryFields?.secondary ?? [];
+    const items = [...primaryItems, ...secondaryItems];
+    const [displayCount, setDisplayCount] = useState(items.length);
+    const [truncatedIndices, setTruncatedIndices] = useState(items.map((_, i) => i));
+    const priorTrailingEdgeStack = useRef([]);
+    const priorAvailableSpace = useRef(null);
+    const evalItemAddition = ({ nextSiblingLeadingEdge }) => {
+        const indicesToTruncate = truncatedIndices ? [...truncatedIndices] : [];
+        let nextDisplayCount = displayCount;
+        const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();
+        for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {
+            const priorEdge = reversedTrailingEdgeStack[i];
+            const shouldRender = ltr
+                ? priorEdge < nextSiblingLeadingEdge
+                : priorEdge > nextSiblingLeadingEdge;
+            if (shouldRender) {
+                priorTrailingEdgeStack.current.pop();
+                if (!indicesToTruncate.includes(nextDisplayCount)) {
+                    indicesToTruncate.push(nextDisplayCount);
+                }
+                nextDisplayCount += 1;
+            }
+            else {
+                break;
+            }
+        }
+        return { indicesToTruncate, nextDisplayCount };
+    };
+    const evalTruncationReduction = ({ listChildren, availableSpace }) => {
+        const indicesToTruncate = [];
+        let hasAvailableSpace = availableSpace;
+        listChildren.forEach((item, index) => {
+            const valueEl = item.lastChild;
+            const truncatedSpace = valueEl.scrollWidth - valueEl.offsetWidth;
+            const shouldTruncate = hasAvailableSpace - truncatedSpace < 0;
+            if (shouldTruncate) {
+                if (!truncatedIndices?.includes(index)) {
+                    hasAvailableSpace += truncatedSpace;
+                }
+                indicesToTruncate.push(index);
+            }
+            else if (truncatedIndices?.includes(index)) {
+                hasAvailableSpace -= truncatedSpace;
+            }
+        });
+        return { indicesToTruncate };
+    };
+    const evalTruncationIncrease = ({ listChildren, availableSpace }) => {
+        const indicesToTruncate = [];
+        const lastIndex = listChildren.length - 1;
+        let hasAvailableSpace = availableSpace;
+        [...listChildren].reverse().forEach((item, index) => {
+            if (truncatedIndices?.includes(lastIndex - index)) {
+                indicesToTruncate.push(lastIndex - index);
+            }
+            else if (hasAvailableSpace < 0) {
+                const truncatedElMaxWidth = 20 * chToPxConversionFactor;
+                const valueEl = item.lastChild;
+                const spaceToTruncate = Math.max(valueEl.offsetWidth - truncatedElMaxWidth, 0);
+                if (spaceToTruncate) {
+                    indicesToTruncate.push(lastIndex - index);
+                    hasAvailableSpace += spaceToTruncate;
+                }
+            }
+        });
+        return { indicesToTruncate, availableSpace: hasAvailableSpace };
+    };
+    const evalItemRemoval = ({ listChildren, availableSpace, nextSiblingLeadingEdge }) => {
+        let nextDisplayCount = displayCount;
+        let hasAvailableSpace = availableSpace;
+        let lastChildIndex = listChildren.length - 1;
+        do {
+            const itemTrailingEdge = getEdge({
+                el: listChildren[lastChildIndex],
+                side: 'trailing',
+                ltr
+            });
+            hasAvailableSpace = ltr
+                ? nextSiblingLeadingEdge - itemTrailingEdge
+                : itemTrailingEdge - nextSiblingLeadingEdge;
+            if (hasAvailableSpace < 0) {
+                priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];
+                nextDisplayCount -= 1;
+                lastChildIndex -= 1;
+            }
+        } while (hasAvailableSpace < 0 && lastChildIndex > -1);
+        return { displayCount: nextDisplayCount };
+    };
+    const evaluateSummaryDisplay = () => {
+        const containerEl = containerRef.current;
+        if (!containerEl)
+            return;
+        const listChildren = Array.from(listRef.current?.children ?? []);
+        const lastSummaryItem = listChildren.length ? listChildren[listChildren.length - 1] : undefined;
+        const nextSibling = siblingRef?.current ?? document.body;
+        const nextSiblingLeadingEdge = getEdge({
+            el: nextSibling,
+            side: 'leading',
+            ltr
+        });
+        const testEdge = lastSummaryItem
+            ? getEdge({ el: lastSummaryItem, side: 'trailing', ltr })
+            : getEdge({ el: containerEl, side: 'leading', ltr });
+        let availableSpace = ltr
+            ? nextSiblingLeadingEdge - testEdge
+            : testEdge - nextSiblingLeadingEdge;
+        if (availableSpace === priorAvailableSpace.current)
+            return;
+        priorAvailableSpace.current = availableSpace;
+        let indicesToTruncate;
+        let nextDisplayCount = displayCount;
+        if (availableSpace >= 0) {
+            if (displayCount !== items.length) {
+                const additionsConfig = evalItemAddition({ nextSiblingLeadingEdge });
+                indicesToTruncate = additionsConfig.indicesToTruncate;
+                nextDisplayCount = additionsConfig.nextDisplayCount;
+            }
+            else if (truncatedIndices?.length) {
+                const truncationConfig = evalTruncationReduction({
+                    listChildren,
+                    availableSpace
+                });
+                indicesToTruncate = truncationConfig.indicesToTruncate;
+            }
+        }
+        else if (listChildren) {
+            const truncationConfig = evalTruncationIncrease({
+                listChildren,
+                availableSpace
+            });
+            indicesToTruncate = truncationConfig.indicesToTruncate;
+            availableSpace = truncationConfig.availableSpace;
+            if (availableSpace < 0) {
+                const removalConfig = evalItemRemoval({
+                    listChildren,
+                    availableSpace,
+                    nextSiblingLeadingEdge
+                });
+                nextDisplayCount = removalConfig.displayCount;
+            }
+        }
+        setDisplayCount(nextDisplayCount);
+        if (indicesToTruncate) {
+            setTruncatedIndices(indicesToTruncate);
+        }
+    };
+    // Initial display evaluation
+    useEffect(() => {
+        evaluateSummaryDisplay();
+    }, []);
+    // Overflow resize observer
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(evaluateSummaryDisplay);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current, { box: 'border-box' });
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [evaluateSummaryDisplay]);
+    return (_jsx(Flex, { as: StyledHeaderSummaryBlock, item: { grow: 1, shrink: 1 }, ref: containerRef, hasItems: displayCount > 0, children: _jsx(Flex, { as: StyledHeaderSummary, container: { gap: 4 }, ref: listRef, children: items.slice(0, displayCount).map((item, index) => {
+                return (_jsx(Field, { item: item, primary: !!primaryItems?.length && index < primaryItems.length, truncate: !!truncatedIndices?.includes(index) }, item.name));
+            }) }) }));
+};
+export default Summary;
+//# sourceMappingURL=Summary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Summary.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react';\n\nimport {\n  Flex,\n  getEdge,\n  registerIcon,\n  StyledStackedFieldValue,\n  StyledLabel,\n  StyledFieldName,\n  useDirection,\n  useChToPxConversionFactor\n} from '@pega/cosmos-react-core';\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 { SummaryField } from '../CaseView.types';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst Field = ({\n  item,\n  primary,\n  truncate\n}: {\n  item: SummaryField;\n  primary: boolean;\n  truncate: boolean;\n}) => {\n  const { name, value, simpleValue } = item;\n  const displayValue = simpleValue ?? value ?? <span>&ndash;&ndash;</span>;\n\n  return (\n    <StyledStackedFieldValue>\n      <StyledLabel as={StyledFieldName}>{name}</StyledLabel>\n      <StyledHeaderSummaryValue bold={primary} truncate={truncate}>\n        {displayValue}\n      </StyledHeaderSummaryValue>\n    </StyledStackedFieldValue>\n  );\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 = valueEl.scrollWidth - valueEl.offsetWidth;\n      const shouldTruncate = 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(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 = ltr\n        ? nextSiblingLeadingEdge - itemTrailingEdge\n        : itemTrailingEdge - nextSiblingLeadingEdge;\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\n    let availableSpace = ltr\n      ? nextSiblingLeadingEdge - testEdge\n      : testEdge - nextSiblingLeadingEdge;\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  }, []);\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      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              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/CaseSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAW3B,QAAA,MAAM,WAAW,EAAE,EAwBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAe3B,QAAA,MAAM,WAAW,EAAE,EAwBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CaseView/CaseSummary.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Tabs, registerIcon } from '@pega/cosmos-react-core';
 import * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';
-import CaseHeader from './CaseHeader';
-import { StyledCaseSummary, StyledCaseSummaryInfo } from './CaseView.styles';
+import CaseHeader from './CaseHeader/CaseHeader';
+import { StyledCaseSummary, StyledCaseSummaryInfo, StyledCaseSummaryContainer } from './CaseView.styles';
 import { useCaseViewContext } from './CaseView.context';
 registerIcon(arrowMicroLeftIcon);
 const CaseSummary = () => {
     const { testIds, summary, summaryExpanded, tabs, aboveMD, isPreview } = useCaseViewContext();
-    return (_jsxs(Flex, { as: StyledCaseSummary, container: { direction: 'column' }, item: { shrink: 0 }, children: [_jsx(CaseHeader, {}), aboveMD && !isPreview && summaryExpanded && (summary || tabs.items.length > 1) && (_jsxs(StyledCaseSummaryInfo, { children: [summary, tabs.items.length > 1 && (_jsx(Tabs, { "data-testid": testIds.tabs, type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }))] }))] }));
+    return (_jsxs(Flex, { as: StyledCaseSummary, container: { direction: 'column' }, item: { shrink: 0 }, children: [_jsx(CaseHeader, {}), aboveMD && !isPreview && summaryExpanded && (summary || tabs.items.length > 1) && (_jsxs(StyledCaseSummaryInfo, { children: [_jsx(StyledCaseSummaryContainer, { children: summary }), tabs.items.length > 1 && (_jsx(Tabs, { "data-testid": testIds.tabs, type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }))] }))] }));
 };
 export default CaseSummary;
 //# sourceMappingURL=CaseSummary.js.map