@pega/cosmos-react-work 4.0.0-dev.1.2 → 4.0.0-dev.10.1

package/lib/components/AppAnnouncement/AppAnnouncement.js

@@ -52,7 +52,7 @@ export const StyledAppAnnouncement = styled.article(props => {
         background: #ffffff19;
       }
       &:enabled:focus {
-        box-shadow: ${shadow['focus-inverted']};
+        box-shadow: ${shadow.focus};
       }
     }
 
@@ -74,7 +74,7 @@ export const StyledAppAnnouncement = styled.article(props => {
         margin-top: calc(2 * ${spacing});
         &:enabled:focus,
         &:not([disabled]):focus {
-          box-shadow: ${shadow['focus-inverted']};
+          box-shadow: ${shadow.focus};
         }
       }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,gBAAgB,EAGhB,YAAY,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAkCxB,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;;;CAGxC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,OAAO,CAAsC,KAAK,CAAC,EAAE;IAC/F,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAC7C,MAAM,EACN,OAAO,EACR,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACD,KAAK,EACN,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IAE7D,OAAO,GAAG,CAAA;wBACY,OAAO;kBACb,eAAe;qBACZ,YAAY;aACpB,KAAK;;;;yBAIO,KAAK;6BACD,GAAG;;;;;;;;;;;0BAWN,OAAO;;;;;;uBAMV,OAAO;;;MAGxB,mBAAmB;;;;;;;;;;sBAUH,MAAM,CAAC,gBAAgB,CAAC;;;;;;;;;;;gCAWd,OAAO;;;;yCAIE,OAAO;;;QAGxC,YAAY;+BACW,OAAO;;;wBAGd,MAAM,CAAC,gBAAgB,CAAC;;;;GAI7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,eAAe,GAA2D,UAAU,CACxF,CAAC,KAA4C,EAAE,GAAgC,EAAE,EAAE;IACjF,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,sBAAI,WAAW,GAAK,EACnC,OAAO,IAAI,CACV,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;4BAC3B,OAAO,uBAA4B,IAAI,IAAvB,KAAK,CAAC,QAAQ,EAAE,CAAa,CAAC;wBAChD,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, 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-inverted']};\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-inverted']};\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":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,gBAAgB,EAGhB,YAAY,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAkCxB,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;;;CAGxC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,OAAO,CAAsC,KAAK,CAAC,EAAE;IAC/F,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAC7C,MAAM,EACN,OAAO,EACR,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACD,KAAK,EACN,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IAE7D,OAAO,GAAG,CAAA;wBACY,OAAO;kBACb,eAAe;qBACZ,YAAY;aACpB,KAAK;;;;yBAIO,KAAK;6BACD,GAAG;;;;;;;;;;;0BAWN,OAAO;;;;;;uBAMV,OAAO;;;MAGxB,mBAAmB;;;;;;;;;;sBAUH,MAAM,CAAC,KAAK;;;;;;;;;;;gCAWF,OAAO;;;;yCAIE,OAAO;;;QAGxC,YAAY;+BACW,OAAO;;;wBAGd,MAAM,CAAC,KAAK;;;;GAIjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,eAAe,GAA2D,UAAU,CACxF,CAAC,KAA4C,EAAE,GAAgC,EAAE,EAAE;IACjF,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,sBAAI,WAAW,GAAK,EACnC,OAAO,IAAI,CACV,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;4BAC3B,OAAO,uBAA4B,IAAI,IAAvB,KAAK,CAAC,QAAQ,EAAE,CAAa,CAAC;wBAChD,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, 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"]}

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

@@ -1,7 +1,7 @@
 import { FunctionComponent, Ref } from 'react';
 import { ForwardProps, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
 import { CaseViewProps } from '../CaseView';
-export interface CasePreviewProps extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'caseLink' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summary' | 'tabs' | 'tabContent' | 'stages' | 'tasks' | 'banners' | 'utilities' | 'utilitiesSummaryItems'>, NoChildrenProp, BaseProps {
+export interface CasePreviewProps extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'caseLink' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summaryFields' | 'tabs' | 'tabContent' | 'stages' | 'tasks' | 'banners' | 'utilities' | 'utilitiesSummaryItems'>, NoChildrenProp, BaseProps {
     /** If true, the Case Preview will be visible. */
     open: boolean;
     /** Callback fired before Case Preview opens. */

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,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,EAKd,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,UAAU,GACV,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,SAAS,GACT,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,SAAS,GACT,WAAW,GACX,uBAAuB,CAC1B,EACD,cAAc,EACd,SAAS;IACX,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,CAiGnE,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,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,EAKd,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,UAAU,GACV,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,SAAS;IACX,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,CAiGnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CasePreview/CasePreview.js

@@ -60,7 +60,7 @@ const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {
 });
 StyledPreviewDrawer.defaultProps = defaultThemeProp;
 const CasePreview = forwardRef((props, ref) => {
-    const { open: openProp, caseId, heading, subheading, caseLink, parentCases, icon, followed, onFollowedChange, summary, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, onEdit, ...restProps } = props;
+    const { open: openProp, caseId, heading, subheading, caseLink, parentCases, icon, followed, onFollowedChange, summaryFields, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, onEdit, ...restProps } = props;
     const t = useI18n();
     const { previewTriggerRef } = useContext(AppShellContext);
     const [closeButtonEl, setCloseButtonEl] = useElement();
@@ -79,7 +79,7 @@ const CasePreview = forwardRef((props, ref) => {
             closeButtonEl.focus();
         }
     }, [openProp, closeButtonEl]);
-    return (_jsxs(Drawer, { ...restProps, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, "aria-label": t('preview_of_noun', [heading]), shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { children: _jsx(Button, { variant: 'simple', icon: true, onClick: closePreview, ref: setCloseButtonEl, label: t('close_preview'), children: _jsx(Icon, { name: 'times' }) }) }), _jsx(CaseView, { caseId: caseId, parentCases: parentCases, heading: heading, subheading: subheading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summary: summary, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit, isPreview: true })] }));
+    return (_jsxs(Drawer, { ...restProps, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, "aria-label": t('preview_of_noun', [heading]), shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { children: _jsx(Button, { variant: 'simple', icon: true, onClick: closePreview, ref: setCloseButtonEl, label: t('close_preview'), children: _jsx(Icon, { name: 'times' }) }) }), _jsx(CaseView, { caseId: caseId, parentCases: parentCases, heading: heading, subheading: subheading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summaryFields: summaryFields, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit, isPreview: true })] }));
 });
 export default CasePreview;
 //# sourceMappingURL=CasePreview.js.map

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  NoChildrenProp\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';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n  extends Pick<\n      CaseViewProps,\n      | 'caseId'\n      | 'heading'\n      | 'subheading'\n      | 'caseLink'\n      | 'parentCases'\n      | 'icon'\n      | 'followed'\n      | 'onFollowedChange'\n      | 'actions'\n      | 'promotedActions'\n      | 'onEdit'\n      | 'summary'\n      | 'tabs'\n      | 'tabContent'\n      | 'stages'\n      | 'tasks'\n      | 'banners'\n      | 'utilities'\n      | 'utilitiesSummaryItems'\n    >,\n    NoChildrenProp,\n    BaseProps {\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      open: openProp,\n      caseId,\n      heading,\n      subheading,\n      caseLink,\n      parentCases,\n      icon,\n      followed,\n      onFollowedChange,\n      summary,\n      tabs,\n      stages,\n      tasks,\n      tabContent,\n      utilities,\n      utilitiesSummaryItems,\n      actions,\n      banners,\n      onEdit,\n      ...restProps\n    } = props;\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        {...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            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          summary={summary}\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  NoChildrenProp\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';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n  extends Pick<\n      CaseViewProps,\n      | 'caseId'\n      | 'heading'\n      | 'subheading'\n      | 'caseLink'\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    BaseProps {\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      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 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        {...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            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/CaseSummaryFields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSummaryFields.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummaryFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAwB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,GAAG,YAAY,CAUhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"CaseSummaryFields.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummaryFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAQ,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAOtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,GAAG,YAAY,CAwBhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/CaseView/CaseSummaryFields.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid, FieldValueList } from '@pega/cosmos-react-core';
-import { StyledCaseSummaryFields } from './CaseView.styles';
-const CaseSummaryFields = ({ primaryFields, secondaryFields }) => {
-    return (_jsxs(Grid, { as: StyledCaseSummaryFields, container: { rowGap: 2 }, children: [_jsx(FieldValueList, { variant: 'stacked', fields: primaryFields }), _jsx(FieldValueList, { variant: 'inline', fields: secondaryFields })] }));
+import { Grid, useI18n } from '@pega/cosmos-react-core';
+import { StyledCaseSummaryFields, StyledSummaryPrimaryList, StyledSummarySecondaryList } from './CaseView.styles';
+const CaseSummaryFields = ({ primary, secondary }) => {
+    const t = useI18n();
+    return (_jsxs(Grid, { as: StyledCaseSummaryFields, container: { rowGap: 2 }, children: [primary && (_jsx(StyledSummaryPrimaryList, { variant: 'stacked', fields: primary, "aria-label": t('primary_summary_fields') })), secondary && (_jsx(StyledSummarySecondaryList, { variant: 'inline', fields: secondary, "aria-label": t('summary_fields') }))] }));
 };
 export default CaseSummaryFields;
 //# sourceMappingURL=CaseSummaryFields.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummaryFields.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAgB,MAAM,yBAAyB,CAAC;AAE7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,MAAM,iBAAiB,GAA8C,CAAC,EACpE,aAAa,EACb,eAAe,EACyB,EAAE,EAAE;IAC5C,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,uBAAuB,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aACzD,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,aAAa,GAAI,EAC3D,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,GAAI,IACvD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { FC, PropsWithoutRef } from 'react';\n\nimport { Grid, FieldValueList, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { StyledCaseSummaryFields } from './CaseView.styles';\nimport { CaseSummaryFieldsProps } from './CaseView.types';\n\nconst CaseSummaryFields: FC<CaseSummaryFieldsProps & ForwardProps> = ({\n  primaryFields,\n  secondaryFields\n}: PropsWithoutRef<CaseSummaryFieldsProps>) => {\n  return (\n    <Grid as={StyledCaseSummaryFields} container={{ rowGap: 2 }}>\n      <FieldValueList variant='stacked' fields={primaryFields} />\n      <FieldValueList variant='inline' fields={secondaryFields} />\n    </Grid>\n  );\n};\n\nexport default CaseSummaryFields;\n"]}
+{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummaryFields.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,mBAAmB,CAAC;AAG3B,MAAM,iBAAiB,GAA8C,CAAC,EACpE,OAAO,EACP,SAAS,EAC+B,EAAE,EAAE;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,uBAAuB,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aACxD,OAAO,IAAI,CACV,KAAC,wBAAwB,IACvB,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,OAAO,gBACH,CAAC,CAAC,wBAAwB,CAAC,GACvC,CACH,EACA,SAAS,IAAI,CACZ,KAAC,0BAA0B,IACzB,OAAO,EAAC,QAAQ,EAChB,MAAM,EAAE,SAAS,gBACL,CAAC,CAAC,gBAAgB,CAAC,GAC/B,CACH,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { FC, PropsWithoutRef } from 'react';\n\nimport { Grid, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nimport {\n  StyledCaseSummaryFields,\n  StyledSummaryPrimaryList,\n  StyledSummarySecondaryList\n} from './CaseView.styles';\nimport { CaseSummaryFieldsProps } from './CaseView.types';\n\nconst CaseSummaryFields: FC<CaseSummaryFieldsProps & ForwardProps> = ({\n  primary,\n  secondary\n}: PropsWithoutRef<CaseSummaryFieldsProps>) => {\n  const t = useI18n();\n\n  return (\n    <Grid as={StyledCaseSummaryFields} container={{ rowGap: 2 }}>\n      {primary && (\n        <StyledSummaryPrimaryList\n          variant='stacked'\n          fields={primary}\n          aria-label={t('primary_summary_fields')}\n        />\n      )}\n      {secondary && (\n        <StyledSummarySecondaryList\n          variant='inline'\n          fields={secondary}\n          aria-label={t('summary_fields')}\n        />\n      )}\n    </Grid>\n  );\n};\n\nexport default CaseSummaryFields;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAyD,MAAM,OAAO,CAAC;AAElF,OAAO,EAUL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAiBjC,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKvE,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAid9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAyD,MAAM,OAAO,CAAC;AAElF,OAAO,EAUL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMvE,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA+e9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/CaseView/CaseView.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useLayoutEffect, useState } from 'react';
-import { Button, Flex, Grid, Icon, registerIcon, TabPanel, useBreakpoint, useScrollStick, useElement, Card, Drawer, useI18n, useDirection, Tabs, useAfterInitialEffect, windowIsAvailable } from '@pega/cosmos-react-core';
+import { Button, Flex, Grid, Icon, registerIcon, TabPanel, useBreakpoint, useScrollStick, useElement, Card, Drawer, useI18n, useDirection, Tabs, useAfterInitialEffect, windowIsAvailable, focusHeadingOrContainer, useConfiguration } from '@pega/cosmos-react-core';
 import * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';
 import * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';
 import CaseSummary from './CaseSummary';
 import UtilitiesSummary from './UtilitiesSummary';
-import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledWorkArea, StyledPersistentUtility, StyledSummary, StyledUtilities, StyledUtilToggle } from './CaseView.styles';
+import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledWorkArea, StyledPersistentUtility, StyledSummary, StyledSummaryTabContent, StyledUtilities, StyledUtilToggle } from './CaseView.styles';
 import CaseViewContext from './CaseView.context';
+import CaseSummaryFields from './CaseSummaryFields';
 registerIcon(moveRightSolidIcon, moveLeftSolidIcon);
 const CaseView = ({ 
 // Case data mostly visually related to the case header
 caseId, heading, subheading, caseLink, parentCases, icon, followed, onFollowedChange, onEdit, actions, promotedActions, 
 // Summary content and state props
-summary, summaryExpanded: summaryExpandedProp = true, onToggleSummary, 
+summaryFields, summaryExpanded: summaryExpandedProp = true, onToggleSummary, 
 // Case tabs
 tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick }, 
 // Workarea related content props
@@ -21,9 +22,13 @@ banners, stages, tasks, tabContent: tabContentProp = [],
 utilities, utilitiesSummaryItems, utilitiesExpanded: utilitiesExpandedProp = true, onToggleUtilities, 
 // Etc...
 persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
+    const summary = useMemo(() => {
+        return _jsx(CaseSummaryFields, { ...summaryFields });
+    }, [summaryFields]);
     // General util hooks
     const t = useI18n();
     const direction = useDirection();
+    const { loadedRef } = useConfiguration();
     // Element refs
     const caseViewRef = useRef(null);
     const summaryRef = useRef(null);
@@ -41,10 +46,21 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     const utilitiesId = `utilities-${caseId}`;
     const utilitiesDrawerId = `utilities-drawer-${caseId}`;
     // Summary state handling
-    let summaryExpanded = !!summaryExpandedProp;
+    let summaryExpanded = !isPreview && !!summaryExpandedProp;
     if (persistentUtility) {
         summaryExpanded = xlOrAbove;
     }
+    // Focus heading on initial mount
+    useEffect(() => {
+        if (!caseViewRef.current)
+            return;
+        if (loadedRef.current) {
+            focusHeadingOrContainer(caseViewRef.current, heading);
+        }
+        else {
+            loadedRef.current = true;
+        }
+    }, [caseId]);
     // Utilities state handling
     // Used in coordination with a layoutEffect below to determine the utilities state on initial render.
     // Attempted with a ref but it did not work. Using state and enforcing a render in addition to the change render for lgOrAbove seems to fix...
@@ -75,7 +91,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     }, [mdOrAbove, lgOrAbove]);
     // Generate the tab items based on props and viewport conditions
     const tabItems = useMemo(() => {
-        const summaryTab = { id: summaryTabId, name: 'Summary' };
+        const summaryTab = { id: summaryTabId, name: t('summary') };
         if (mdOrAbove) {
             return !summaryExpanded || (persistentUtility && !xlOrAbove)
                 ? [summaryTab, ...tabItemsProp]
@@ -83,7 +99,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
         }
         const utilityTabs = [];
         if (utilities)
-            utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });
+            utilityTabs.push({ id: utilitiesTabId, name: t('utilities') });
         if (persistentUtility && !mdOrAbove) {
             utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });
         }
@@ -101,7 +117,10 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     ]);
     // Setup tab content
     const tabContent = useMemo(() => {
-        const summaryTabContent = { id: summaryTabId, content: _jsx(Card, { children: summary }) };
+        const summaryTabContent = {
+            id: summaryTabId,
+            content: (_jsx(Card, { children: _jsx(StyledSummaryTabContent, { children: summary }) }))
+        };
         if (mdOrAbove) {
             return !summaryExpanded || (persistentUtility && !xlOrAbove)
                 ? [summaryTabContent, ...tabContentProp]
@@ -195,6 +214,11 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     useScrollStick(
     // isMediumOrAbove means side by side columns | | |
     mdOrAbove ? { ...scrollStickOptions.current, offset: stickOffset } : undefined);
+    useEffect(() => {
+        if (isPreview) {
+            onTabClick(summaryTabId);
+        }
+    }, []);
     useEffect(() => {
         if (mdOrAbove &&
             summaryExpanded &&

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useMemo, useRef, useLayoutEffect, useState } from 'react';\n\nimport {\n  Button,\n  Flex,\n  Grid,\n  Icon,\n  registerIcon,\n  TabPanel,\n  useBreakpoint,\n  useScrollStick,\n  useElement,\n  ForwardProps,\n  Card,\n  Drawer,\n  useI18n,\n  useDirection,\n  Tabs,\n  TabsProps,\n  useAfterInitialEffect,\n  windowIsAvailable\n} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';\nimport * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';\n\nimport CaseSummary from './CaseSummary';\nimport UtilitiesSummary from './UtilitiesSummary';\nimport {\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledCaseView,\n  StyledWorkArea,\n  StyledPersistentUtility,\n  StyledSummary,\n  StyledUtilities,\n  StyledUtilToggle\n} from './CaseView.styles';\nimport { CaseViewContextValue, CaseViewProps } from './CaseView.types';\nimport CaseViewContext from './CaseView.context';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n  // Case data mostly visually related to the case header\n  caseId,\n  heading,\n  subheading,\n  caseLink,\n  parentCases,\n  icon,\n  followed,\n  onFollowedChange,\n  onEdit,\n  actions,\n  promotedActions,\n\n  // Summary content and state props\n  summary,\n  summaryExpanded: summaryExpandedProp = true,\n  onToggleSummary,\n\n  // Case tabs\n  tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },\n\n  // Workarea related content props\n  banners,\n  stages,\n  tasks,\n  tabContent: tabContentProp = [],\n\n  // Utilities content and state props\n  utilities,\n  utilitiesSummaryItems,\n  utilitiesExpanded: utilitiesExpandedProp = true,\n  onToggleUtilities,\n\n  // Etc...\n  persistentUtility,\n  intelligentGuidance,\n  isPreview = false,\n  ...restProps\n}: CaseViewProps) => {\n  // General util hooks\n  const t = useI18n();\n  const direction = useDirection();\n\n  // Element refs\n  const caseViewRef = useRef<HTMLDivElement>(null);\n  const summaryRef = useRef<HTMLDivElement>(null);\n\n  // Tab content\n  const [tabContentEl, setTabContentEl] = useElement<HTMLElement>(null);\n\n  // Breakpoint booleans\n  const mdOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n  const lgOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n  const xlOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });\n\n  // DOM ids\n  const summaryTabId = `summary-${caseId}`;\n  const utilitiesTabId = `utilities-${caseId}`;\n  const persistentUtilityTabId = `persistent-utility-${caseId}`;\n  const summaryId = `summary-${caseId}`;\n  const utilitiesId = `utilities-${caseId}`;\n  const utilitiesDrawerId = `utilities-drawer-${caseId}`;\n\n  // Summary state handling\n  let summaryExpanded = !!summaryExpandedProp;\n  if (persistentUtility) {\n    summaryExpanded = xlOrAbove;\n  }\n\n  // Utilities state handling\n\n  // Used in coordination with a layoutEffect below to determine the utilities state on initial render.\n  // Attempted with a ref but it did not work. Using state and enforcing a render in addition to the change render for lgOrAbove seems to fix...\n  const [obeyUtilitiesExpandedProp, setObeyUtilitiesExpandedProp] = useState(lgOrAbove);\n\n  // Allow the utilitiesExpandedProp to drive the utilities' state after the initial render\n  useLayoutEffect(() => {\n    if (lgOrAbove) setObeyUtilitiesExpandedProp(true);\n  }, [lgOrAbove]);\n\n  // Tracks whether a resize forced the onToggleUtilities to close the utilities when it's a drawer\n  const utilitiesToggledByResize = useRef(false);\n\n  // If the initial render is within the MD size, where the utility drawer renders, it must begin collapsed\n  const utilitiesExpanded = obeyUtilitiesExpandedProp ? utilitiesExpandedProp : false;\n\n  // Handles utilities state based on breakpoint changes.\n  useAfterInitialEffect(() => {\n    // If we change into the MD breakpoint range and the utilities state is expanded call the toggle prop to collapse it with controlled state\n    if (mdOrAbove && !lgOrAbove && utilitiesExpandedProp) {\n      onToggleUtilities?.();\n      utilitiesToggledByResize.current = true;\n    }\n\n    if (lgOrAbove) {\n      if (utilitiesToggledByResize.current && !utilitiesExpandedProp) {\n        onToggleUtilities?.();\n      }\n\n      utilitiesToggledByResize.current = false;\n    }\n    // Purposely not listing utilitiesExpanded as a dependency as it is not a trigger and will be captured when BPs change\n  }, [mdOrAbove, lgOrAbove]);\n\n  // Generate the tab items based on props and viewport conditions\n  const tabItems: TabsProps['tabs'] = useMemo(() => {\n    const summaryTab = { id: summaryTabId, name: 'Summary' };\n    if (mdOrAbove) {\n      return !summaryExpanded || (persistentUtility && !xlOrAbove)\n        ? [summaryTab, ...tabItemsProp]\n        : tabItemsProp;\n    }\n    const utilityTabs = [];\n    if (utilities) utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });\n    if (persistentUtility && !mdOrAbove) {\n      utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n    }\n\n    return [summaryTab, ...tabItemsProp, ...utilityTabs];\n  }, [\n    mdOrAbove,\n    xlOrAbove,\n    summaryTabId,\n    utilitiesTabId,\n    persistentUtilityTabId,\n    utilities,\n    persistentUtility,\n    tabItemsProp,\n    summaryExpanded\n  ]);\n\n  // Setup tab content\n  const tabContent = useMemo(() => {\n    const summaryTabContent = { id: summaryTabId, content: <Card>{summary}</Card> };\n\n    if (mdOrAbove) {\n      return !summaryExpanded || (persistentUtility && !xlOrAbove)\n        ? [summaryTabContent, ...tabContentProp]\n        : tabContentProp;\n    }\n\n    const utilityTabs = [];\n\n    if (utilities) {\n      utilityTabs.push({\n        id: utilitiesTabId,\n        content: <Flex container={{ direction: 'column', gap: 2 }}>{utilities}</Flex>\n      });\n    }\n\n    if (persistentUtility) {\n      utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n    }\n\n    return [summaryTabContent, ...tabContentProp, ...utilityTabs];\n  }, [\n    summaryTabId,\n    summary,\n    mdOrAbove,\n    summaryExpanded,\n    persistentUtility,\n    xlOrAbove,\n    tabContentProp,\n    utilities,\n    utilitiesTabId,\n    persistentUtilityTabId\n  ]);\n\n  // Grid layout props\n  let caseViewGridContainer = {\n    cols: 'minmax(0, 1fr)',\n    colGap: 0,\n    rows: 'minmax(0, max-content) auto',\n    areas: `\n      \"summary\"\n      \"work-area\"\n    `\n  };\n\n  const sharedGridProps = {\n    colGap: 2,\n    rows: caseViewGridContainer.rows\n  };\n\n  if (persistentUtility) {\n    if (xlOrAbove) {\n      caseViewGridContainer = {\n        ...sharedGridProps,\n        cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        areas: '\"summary work-area persistentUtility utilities\"'\n      };\n    } else if (mdOrAbove) {\n      caseViewGridContainer = {\n        ...sharedGridProps,\n        cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        areas: `\n          \"summary summary summary\"\n          \"work-area persistentUtility utilities\"\n        `\n      };\n    }\n  } else if (summaryExpanded) {\n    if (mdOrAbove) {\n      caseViewGridContainer = {\n        ...sharedGridProps,\n        cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',\n        areas: '\"summary work-area utilities\"'\n      };\n    }\n  } else if (mdOrAbove) {\n    caseViewGridContainer = {\n      ...sharedGridProps,\n      cols: 'minmax(0, 1fr) minmax(0, max-content)',\n      areas: `\n            \"summary summary\"\n            \"work-area utilities\"\n          `\n    };\n  }\n\n  // Apply sticky columns\n  const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n    elements: []\n  });\n\n  const stickOffset = useMemo(() => {\n    if (windowIsAvailable && caseViewRef.current) {\n      return parseFloat(\n        window.getComputedStyle(caseViewRef.current).getPropertyValue('--appshell-offset')\n      );\n    }\n\n    return 0;\n  }, [caseViewRef.current]);\n\n  useScrollStick(\n    // isMediumOrAbove means side by side columns | | |\n    mdOrAbove ? { ...scrollStickOptions.current, offset: stickOffset } : undefined\n  );\n\n  useEffect(() => {\n    if (\n      mdOrAbove &&\n      summaryExpanded &&\n      !persistentUtility &&\n      (currentTabId === summaryTabId || currentTabId === utilitiesTabId)\n    ) {\n      onTabClick(tabItemsProp[0]?.id);\n    }\n  }, [mdOrAbove, summaryExpanded]);\n\n  useEffect(() => {\n    if (persistentUtility && currentTabId === persistentUtilityTabId) onTabClick(summaryTabId);\n  }, [persistentUtility]);\n\n  // Handles scrolling to tab content for newly clicked tab\n  useEffect(() => {\n    if (!tabContentEl) return;\n    const scrollPos = window.scrollY;\n    const windowHeight = document.documentElement.clientHeight;\n    const bottomPos = scrollPos + windowHeight * 0.8;\n    const tabContentPos = tabContentEl.offsetTop;\n    if (tabContentPos > bottomPos) {\n      const top = tabContentPos - windowHeight * 0.2;\n      window.scrollTo({ top, behavior: 'smooth' });\n    }\n  }, [currentTabId]);\n\n  // We need a css variable for the height of the case summary when it is collapsed into a header like layout\n  useLayoutEffect(() => {\n    if (!caseViewRef.current || !summaryRef.current) return;\n\n    caseViewRef.current.style.setProperty(\n      '--summary-height',\n      `${!summaryExpanded ? summaryRef.current.offsetHeight : 0}px`\n    );\n  }, [summaryExpanded]);\n\n  // CaseView context value\n  // Choosing not to memo for now due to extent of deps and how often they change. Optimize as needed.\n  const ctxValue: CaseViewContextValue = {\n    caseId,\n    heading,\n    subheading,\n    caseLink,\n    parentCases,\n    icon,\n    followed,\n    onFollowedChange,\n    actions,\n    promotedActions,\n    onEdit,\n    summary,\n    tabs: {\n      items: tabItems,\n      onClick: onTabClick,\n      currentTabId\n    },\n    persistentUtility,\n    intelligentGuidance,\n    summaryId,\n    summaryExpanded,\n    utilitiesExpanded,\n    onToggleSummary,\n    isPreview,\n    aboveMD: mdOrAbove,\n    aboveLG: lgOrAbove,\n    aboveXL: xlOrAbove\n  };\n\n  // Here we go...\n  return (\n    <>\n      <CaseViewContext.Provider value={ctxValue}>\n        {/* Root element */}\n        <Grid\n          as={StyledCaseView}\n          ref={caseViewRef}\n          container={caseViewGridContainer}\n          item={{ area: 'case-view' }}\n          {...restProps}\n        >\n          {/* Summary */}\n          <Grid\n            // Used for aria-controls on the toggle button\n            id={summaryId}\n            as={StyledSummary}\n            item={{ area: 'summary' }}\n            desktop={mdOrAbove && (!persistentUtility || xlOrAbove) && !summaryExpanded}\n            isLargeOrAbove={lgOrAbove}\n            ref={summaryRef}\n          >\n            <CaseSummary />\n          </Grid>\n\n          {/* Work area */}\n          <Flex\n            container={{\n              direction: 'column',\n              alignContent: 'start',\n              rowGap: 2\n            }}\n            as={StyledWorkArea}\n            persistentUtility={Boolean(persistentUtility)}\n          >\n            {banners && <div>{banners}</div>}\n            {stages && <div>{stages}</div>}\n            {tasks && <div>{tasks}</div>}\n\n            {(!mdOrAbove || (persistentUtility && !xlOrAbove) || !summaryExpanded) && (\n              <Tabs tabs={tabItems} onTabClick={onTabClick} currentTabId={currentTabId} />\n            )}\n\n            <div ref={setTabContentEl}>\n              {tabContent?.map(({ id, content }) => (\n                <TabPanel currentTabId={currentTabId} tabId={id} key={id}>\n                  {content}\n                </TabPanel>\n              ))}\n            </div>\n          </Flex>\n\n          {/* Persistent utility column */}\n          {persistentUtility && mdOrAbove && (\n            <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }}>\n              {persistentUtility.content}\n            </Grid>\n          )}\n\n          {/* Utility drawer */}\n          {utilities && mdOrAbove && !lgOrAbove && utilitiesExpanded && (\n            <Drawer\n              as={StyledCaseDrawer}\n              open={utilitiesExpanded}\n              position='fixed'\n              placement={direction.end}\n              shadow\n              nullWhenClosed\n              hasPersistentUtility={!!persistentUtility}\n            >\n              <Flex\n                as={StyledCaseDrawerContent}\n                container={{ direction: 'column', gap: 2 }}\n                id={utilitiesDrawerId}\n              >\n                <Flex container={{ justify: 'end' }}>\n                  <Button\n                    aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n                    aria-controls={utilitiesDrawerId}\n                    variant='simple'\n                    icon\n                    onClick={onToggleUtilities}\n                    as={StyledUtilToggle}\n                    label={t('collapse_utilities_panel')}\n                  >\n                    <Icon name={`move-${direction.end}-solid`} />\n                  </Button>\n                </Flex>\n                {utilities}\n              </Flex>\n            </Drawer>\n          )}\n\n          {/* Utilities */}\n          {utilities && mdOrAbove && (\n            <Grid\n              ref={(el: HTMLDivElement) => {\n                if (el) (scrollStickOptions.current?.elements).push(el);\n              }}\n              as={StyledUtilities}\n              container={{\n                cols: 'minmax(0, 1fr)',\n                rowGap: 2,\n                pad: [2, 0, 2]\n              }}\n              item={{\n                area: 'utilities'\n              }}\n            >\n              <Flex container={{ justify: utilitiesExpanded ? 'end' : 'center' }}>\n                <Button\n                  aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n                  aria-controls={lgOrAbove ? utilitiesId : utilitiesDrawerId}\n                  variant='simple'\n                  icon\n                  onClick={() => {\n                    if (!obeyUtilitiesExpandedProp && utilitiesExpandedProp) {\n                      setObeyUtilitiesExpandedProp(true);\n                    } else {\n                      onToggleUtilities?.();\n                    }\n                  }}\n                  as={StyledUtilToggle}\n                  label={t(\n                    utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel'\n                  )}\n                >\n                  <Icon\n                    name={`move-${utilitiesExpanded ? direction.end : direction.start}-solid`}\n                  />\n                </Button>\n              </Flex>\n\n              {lgOrAbove && utilitiesExpanded && (\n                <Flex container={{ direction: 'column', gap: 2 }} id={utilitiesId}>\n                  {utilities}\n                </Flex>\n              )}\n\n              {(!utilitiesExpanded || (mdOrAbove && !lgOrAbove)) && (\n                <UtilitiesSummary\n                  items={utilitiesSummaryItems}\n                  onClick={onToggleUtilities}\n                  aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n                  aria-controls={lgOrAbove ? utilitiesId : utilitiesDrawerId}\n                />\n              )}\n            </Grid>\n          )}\n        </Grid>\n      </CaseViewContext.Provider>\n      {intelligentGuidance}\n    </>\n  );\n};\n\nexport default CaseView;\n"]}
+{"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useMemo, useRef, useLayoutEffect, useState } from 'react';\n\nimport {\n  Button,\n  Flex,\n  Grid,\n  Icon,\n  registerIcon,\n  TabPanel,\n  useBreakpoint,\n  useScrollStick,\n  useElement,\n  ForwardProps,\n  Card,\n  Drawer,\n  useI18n,\n  useDirection,\n  Tabs,\n  TabsProps,\n  useAfterInitialEffect,\n  windowIsAvailable,\n  focusHeadingOrContainer,\n  useConfiguration\n} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';\nimport * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';\n\nimport CaseSummary from './CaseSummary';\nimport UtilitiesSummary from './UtilitiesSummary';\nimport {\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledCaseView,\n  StyledWorkArea,\n  StyledPersistentUtility,\n  StyledSummary,\n  StyledSummaryTabContent,\n  StyledUtilities,\n  StyledUtilToggle\n} from './CaseView.styles';\nimport { CaseViewContextValue, CaseViewProps } from './CaseView.types';\nimport CaseViewContext from './CaseView.context';\nimport CaseSummaryFields from './CaseSummaryFields';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n  // Case data mostly visually related to the case header\n  caseId,\n  heading,\n  subheading,\n  caseLink,\n  parentCases,\n  icon,\n  followed,\n  onFollowedChange,\n  onEdit,\n  actions,\n  promotedActions,\n\n  // Summary content and state props\n  summaryFields,\n  summaryExpanded: summaryExpandedProp = true,\n  onToggleSummary,\n\n  // Case tabs\n  tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },\n\n  // Workarea related content props\n  banners,\n  stages,\n  tasks,\n  tabContent: tabContentProp = [],\n\n  // Utilities content and state props\n  utilities,\n  utilitiesSummaryItems,\n  utilitiesExpanded: utilitiesExpandedProp = true,\n  onToggleUtilities,\n\n  // Etc...\n  persistentUtility,\n  intelligentGuidance,\n  isPreview = false,\n  ...restProps\n}: CaseViewProps) => {\n  const summary = useMemo(() => {\n    return <CaseSummaryFields {...summaryFields} />;\n  }, [summaryFields]);\n\n  // General util hooks\n  const t = useI18n();\n  const direction = useDirection();\n  const { loadedRef } = useConfiguration();\n\n  // Element refs\n  const caseViewRef = useRef<HTMLDivElement>(null);\n  const summaryRef = useRef<HTMLDivElement>(null);\n\n  // Tab content\n  const [tabContentEl, setTabContentEl] = useElement<HTMLElement>(null);\n\n  // Breakpoint booleans\n  const mdOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n  const lgOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n  const xlOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });\n\n  // DOM ids\n  const summaryTabId = `summary-${caseId}`;\n  const utilitiesTabId = `utilities-${caseId}`;\n  const persistentUtilityTabId = `persistent-utility-${caseId}`;\n  const summaryId = `summary-${caseId}`;\n  const utilitiesId = `utilities-${caseId}`;\n  const utilitiesDrawerId = `utilities-drawer-${caseId}`;\n\n  // Summary state handling\n  let summaryExpanded = !isPreview && !!summaryExpandedProp;\n\n  if (persistentUtility) {\n    summaryExpanded = xlOrAbove;\n  }\n\n  // Focus heading on initial mount\n  useEffect(() => {\n    if (!caseViewRef.current) return;\n\n    if (loadedRef.current) {\n      focusHeadingOrContainer(caseViewRef.current, heading);\n    } else {\n      loadedRef.current = true;\n    }\n  }, [caseId]);\n\n  // Utilities state handling\n\n  // Used in coordination with a layoutEffect below to determine the utilities state on initial render.\n  // Attempted with a ref but it did not work. Using state and enforcing a render in addition to the change render for lgOrAbove seems to fix...\n  const [obeyUtilitiesExpandedProp, setObeyUtilitiesExpandedProp] = useState(lgOrAbove);\n\n  // Allow the utilitiesExpandedProp to drive the utilities' state after the initial render\n  useLayoutEffect(() => {\n    if (lgOrAbove) setObeyUtilitiesExpandedProp(true);\n  }, [lgOrAbove]);\n\n  // Tracks whether a resize forced the onToggleUtilities to close the utilities when it's a drawer\n  const utilitiesToggledByResize = useRef(false);\n\n  // If the initial render is within the MD size, where the utility drawer renders, it must begin collapsed\n  const utilitiesExpanded = obeyUtilitiesExpandedProp ? utilitiesExpandedProp : false;\n\n  // Handles utilities state based on breakpoint changes.\n  useAfterInitialEffect(() => {\n    // If we change into the MD breakpoint range and the utilities state is expanded call the toggle prop to collapse it with controlled state\n    if (mdOrAbove && !lgOrAbove && utilitiesExpandedProp) {\n      onToggleUtilities?.();\n      utilitiesToggledByResize.current = true;\n    }\n\n    if (lgOrAbove) {\n      if (utilitiesToggledByResize.current && !utilitiesExpandedProp) {\n        onToggleUtilities?.();\n      }\n\n      utilitiesToggledByResize.current = false;\n    }\n    // Purposely not listing utilitiesExpanded as a dependency as it is not a trigger and will be captured when BPs change\n  }, [mdOrAbove, lgOrAbove]);\n\n  // Generate the tab items based on props and viewport conditions\n  const tabItems: TabsProps['tabs'] = useMemo(() => {\n    const summaryTab = { id: summaryTabId, name: t('summary') };\n    if (mdOrAbove) {\n      return !summaryExpanded || (persistentUtility && !xlOrAbove)\n        ? [summaryTab, ...tabItemsProp]\n        : tabItemsProp;\n    }\n    const utilityTabs = [];\n    if (utilities) utilityTabs.push({ id: utilitiesTabId, name: t('utilities') });\n    if (persistentUtility && !mdOrAbove) {\n      utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n    }\n\n    return [summaryTab, ...tabItemsProp, ...utilityTabs];\n  }, [\n    mdOrAbove,\n    xlOrAbove,\n    summaryTabId,\n    utilitiesTabId,\n    persistentUtilityTabId,\n    utilities,\n    persistentUtility,\n    tabItemsProp,\n    summaryExpanded\n  ]);\n\n  // Setup tab content\n  const tabContent = useMemo(() => {\n    const summaryTabContent = {\n      id: summaryTabId,\n      content: (\n        <Card>\n          <StyledSummaryTabContent>{summary}</StyledSummaryTabContent>\n        </Card>\n      )\n    };\n\n    if (mdOrAbove) {\n      return !summaryExpanded || (persistentUtility && !xlOrAbove)\n        ? [summaryTabContent, ...tabContentProp]\n        : tabContentProp;\n    }\n\n    const utilityTabs = [];\n\n    if (utilities) {\n      utilityTabs.push({\n        id: utilitiesTabId,\n        content: <Flex container={{ direction: 'column', gap: 2 }}>{utilities}</Flex>\n      });\n    }\n\n    if (persistentUtility) {\n      utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n    }\n\n    return [summaryTabContent, ...tabContentProp, ...utilityTabs];\n  }, [\n    summaryTabId,\n    summary,\n    mdOrAbove,\n    summaryExpanded,\n    persistentUtility,\n    xlOrAbove,\n    tabContentProp,\n    utilities,\n    utilitiesTabId,\n    persistentUtilityTabId\n  ]);\n\n  // Grid layout props\n  let caseViewGridContainer = {\n    cols: 'minmax(0, 1fr)',\n    colGap: 0,\n    rows: 'minmax(0, max-content) auto',\n    areas: `\n      \"summary\"\n      \"work-area\"\n    `\n  };\n\n  const sharedGridProps = {\n    colGap: 2,\n    rows: caseViewGridContainer.rows\n  };\n\n  if (persistentUtility) {\n    if (xlOrAbove) {\n      caseViewGridContainer = {\n        ...sharedGridProps,\n        cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        areas: '\"summary work-area persistentUtility utilities\"'\n      };\n    } else if (mdOrAbove) {\n      caseViewGridContainer = {\n        ...sharedGridProps,\n        cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        areas: `\n          \"summary summary summary\"\n          \"work-area persistentUtility utilities\"\n        `\n      };\n    }\n  } else if (summaryExpanded) {\n    if (mdOrAbove) {\n      caseViewGridContainer = {\n        ...sharedGridProps,\n        cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',\n        areas: '\"summary work-area utilities\"'\n      };\n    }\n  } else if (mdOrAbove) {\n    caseViewGridContainer = {\n      ...sharedGridProps,\n      cols: 'minmax(0, 1fr) minmax(0, max-content)',\n      areas: `\n            \"summary summary\"\n            \"work-area utilities\"\n          `\n    };\n  }\n\n  // Apply sticky columns\n  const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n    elements: []\n  });\n\n  const stickOffset = useMemo(() => {\n    if (windowIsAvailable && caseViewRef.current) {\n      return parseFloat(\n        window.getComputedStyle(caseViewRef.current).getPropertyValue('--appshell-offset')\n      );\n    }\n\n    return 0;\n  }, [caseViewRef.current]);\n\n  useScrollStick(\n    // isMediumOrAbove means side by side columns | | |\n    mdOrAbove ? { ...scrollStickOptions.current, offset: stickOffset } : undefined\n  );\n\n  useEffect(() => {\n    if (isPreview) {\n      onTabClick(summaryTabId);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (\n      mdOrAbove &&\n      summaryExpanded &&\n      !persistentUtility &&\n      (currentTabId === summaryTabId || currentTabId === utilitiesTabId)\n    ) {\n      onTabClick(tabItemsProp[0]?.id);\n    }\n  }, [mdOrAbove, summaryExpanded]);\n\n  useEffect(() => {\n    if (persistentUtility && currentTabId === persistentUtilityTabId) onTabClick(summaryTabId);\n  }, [persistentUtility]);\n\n  // Handles scrolling to tab content for newly clicked tab\n  useEffect(() => {\n    if (!tabContentEl) return;\n    const scrollPos = window.scrollY;\n    const windowHeight = document.documentElement.clientHeight;\n    const bottomPos = scrollPos + windowHeight * 0.8;\n    const tabContentPos = tabContentEl.offsetTop;\n    if (tabContentPos > bottomPos) {\n      const top = tabContentPos - windowHeight * 0.2;\n      window.scrollTo({ top, behavior: 'smooth' });\n    }\n  }, [currentTabId]);\n\n  // We need a css variable for the height of the case summary when it is collapsed into a header like layout\n  useLayoutEffect(() => {\n    if (!caseViewRef.current || !summaryRef.current) return;\n\n    caseViewRef.current.style.setProperty(\n      '--summary-height',\n      `${!summaryExpanded ? summaryRef.current.offsetHeight : 0}px`\n    );\n  }, [summaryExpanded]);\n\n  // CaseView context value\n  // Choosing not to memo for now due to extent of deps and how often they change. Optimize as needed.\n  const ctxValue: CaseViewContextValue = {\n    caseId,\n    heading,\n    subheading,\n    caseLink,\n    parentCases,\n    icon,\n    followed,\n    onFollowedChange,\n    actions,\n    promotedActions,\n    onEdit,\n    summary,\n    tabs: {\n      items: tabItems,\n      onClick: onTabClick,\n      currentTabId\n    },\n    persistentUtility,\n    intelligentGuidance,\n    summaryId,\n    summaryExpanded,\n    utilitiesExpanded,\n    onToggleSummary,\n    isPreview,\n    aboveMD: mdOrAbove,\n    aboveLG: lgOrAbove,\n    aboveXL: xlOrAbove\n  };\n\n  // Here we go...\n  return (\n    <>\n      <CaseViewContext.Provider value={ctxValue}>\n        {/* Root element */}\n        <Grid\n          as={StyledCaseView}\n          ref={caseViewRef}\n          container={caseViewGridContainer}\n          item={{ area: 'case-view' }}\n          {...restProps}\n        >\n          {/* Summary */}\n          <Grid\n            // Used for aria-controls on the toggle button\n            id={summaryId}\n            as={StyledSummary}\n            item={{ area: 'summary' }}\n            desktop={mdOrAbove && (!persistentUtility || xlOrAbove) && !summaryExpanded}\n            isLargeOrAbove={lgOrAbove}\n            ref={summaryRef}\n          >\n            <CaseSummary />\n          </Grid>\n\n          {/* Work area */}\n          <Flex\n            container={{\n              direction: 'column',\n              alignContent: 'start',\n              rowGap: 2\n            }}\n            as={StyledWorkArea}\n            persistentUtility={Boolean(persistentUtility)}\n          >\n            {banners && <div>{banners}</div>}\n            {stages && <div>{stages}</div>}\n            {tasks && <div>{tasks}</div>}\n\n            {(!mdOrAbove || (persistentUtility && !xlOrAbove) || !summaryExpanded) && (\n              <Tabs tabs={tabItems} onTabClick={onTabClick} currentTabId={currentTabId} />\n            )}\n\n            <div ref={setTabContentEl}>\n              {tabContent?.map(({ id, content }) => (\n                <TabPanel currentTabId={currentTabId} tabId={id} key={id}>\n                  {content}\n                </TabPanel>\n              ))}\n            </div>\n          </Flex>\n\n          {/* Persistent utility column */}\n          {persistentUtility && mdOrAbove && (\n            <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }}>\n              {persistentUtility.content}\n            </Grid>\n          )}\n\n          {/* Utility drawer */}\n          {utilities && mdOrAbove && !lgOrAbove && utilitiesExpanded && (\n            <Drawer\n              as={StyledCaseDrawer}\n              open={utilitiesExpanded}\n              position='fixed'\n              placement={direction.end}\n              shadow\n              nullWhenClosed\n              hasPersistentUtility={!!persistentUtility}\n            >\n              <Flex\n                as={StyledCaseDrawerContent}\n                container={{ direction: 'column', gap: 2 }}\n                id={utilitiesDrawerId}\n              >\n                <Flex container={{ justify: 'end' }}>\n                  <Button\n                    aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n                    aria-controls={utilitiesDrawerId}\n                    variant='simple'\n                    icon\n                    onClick={onToggleUtilities}\n                    as={StyledUtilToggle}\n                    label={t('collapse_utilities_panel')}\n                  >\n                    <Icon name={`move-${direction.end}-solid`} />\n                  </Button>\n                </Flex>\n                {utilities}\n              </Flex>\n            </Drawer>\n          )}\n\n          {/* Utilities */}\n          {utilities && mdOrAbove && (\n            <Grid\n              ref={(el: HTMLDivElement) => {\n                if (el) (scrollStickOptions.current?.elements).push(el);\n              }}\n              as={StyledUtilities}\n              container={{\n                cols: 'minmax(0, 1fr)',\n                rowGap: 2,\n                pad: [2, 0, 2]\n              }}\n              item={{\n                area: 'utilities'\n              }}\n            >\n              <Flex container={{ justify: utilitiesExpanded ? 'end' : 'center' }}>\n                <Button\n                  aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n                  aria-controls={lgOrAbove ? utilitiesId : utilitiesDrawerId}\n                  variant='simple'\n                  icon\n                  onClick={() => {\n                    if (!obeyUtilitiesExpandedProp && utilitiesExpandedProp) {\n                      setObeyUtilitiesExpandedProp(true);\n                    } else {\n                      onToggleUtilities?.();\n                    }\n                  }}\n                  as={StyledUtilToggle}\n                  label={t(\n                    utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel'\n                  )}\n                >\n                  <Icon\n                    name={`move-${utilitiesExpanded ? direction.end : direction.start}-solid`}\n                  />\n                </Button>\n              </Flex>\n\n              {lgOrAbove && utilitiesExpanded && (\n                <Flex container={{ direction: 'column', gap: 2 }} id={utilitiesId}>\n                  {utilities}\n                </Flex>\n              )}\n\n              {(!utilitiesExpanded || (mdOrAbove && !lgOrAbove)) && (\n                <UtilitiesSummary\n                  items={utilitiesSummaryItems}\n                  onClick={onToggleUtilities}\n                  aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n                  aria-controls={lgOrAbove ? utilitiesId : utilitiesDrawerId}\n                />\n              )}\n            </Grid>\n          )}\n        </Grid>\n      </CaseViewContext.Provider>\n      {intelligentGuidance}\n    </>\n  );\n};\n\nexport default CaseView;\n"]}

package/lib/components/CaseView/CaseView.styles.d.ts

@@ -1,4 +1,7 @@
 export declare const StyledCaseSummaryFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSummaryPrimaryList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSummarySecondaryList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSummaryTabContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCaseHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCaseIconWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFollowIconWrap: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,uBAAuB,yGAelC,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAc3B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAkB7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,2GAShC,CAAC;AAIF,eAAO,MAAM,gBAAgB,uGAAa,CAAC;AAI3C,eAAO,MAAM,oBAAoB,4GA0C/B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAYhC,CAAC;AAIH,eAAO,MAAM,0BAA0B,qOAuBrC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAqC5B,CAAC;AAIH,eAAO,MAAM,cAAc,yGA6BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAM3B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAY1B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAyBxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAUlC,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,yGAiBzB,CAAC"}
+{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,uBAAuB,yGAKlC,CAAC;AAIH,eAAO,MAAM,wBAAwB,6OAWnC,CAAC;AAIH,eAAO,MAAM,0BAA0B,6OAMrC,CAAC;AAEH,eAAO,MAAM,uBAAuB,0OAsBlC,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAmB3B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAkB7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,2GAShC,CAAC;AAIF,eAAO,MAAM,gBAAgB,uGAAa,CAAC;AAI3C,eAAO,MAAM,oBAAoB,4GA0C/B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAYhC,CAAC;AAIH,eAAO,MAAM,0BAA0B,qOAuBrC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAqC5B,CAAC;AAIH,eAAO,MAAM,cAAc,yGA6BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAM3B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAY1B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAyBxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAUlC,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,yGAiBzB,CAAC"}

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

@@ -1,24 +1,57 @@
 import styled, { css } from 'styled-components';
 import { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';
-import { Button, calculateFontSize, defaultThemeProp, StyledBreadcrumbs, StyledButton, StyledFieldValue, StyledFieldValueList, StyledIcon, StyledPopover, StyledText, StyledTooltip, tryCatch } from '@pega/cosmos-react-core';
+import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButton, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList } from '@pega/cosmos-react-core';
 import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
+import { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';
 import { useCaseViewContext } from './CaseView.context';
+const labelChWidth = 16;
 export const StyledCaseSummaryFields = styled.div(({ theme }) => {
+    return css `
+    padding-block: calc(1.5 * ${theme.base.spacing});
+    padding-inline: calc(2 * ${theme.base.spacing});
+  `;
+});
+StyledCaseSummaryFields.defaultProps = defaultThemeProp;
+export const StyledSummaryPrimaryList = styled(FieldValueList)(({ theme }) => {
     const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-    padding: calc(2 * ${theme.base.spacing});
+    grid-template-columns: ${labelChWidth}ch auto;
 
-    > ${StyledFieldValueList}:first-child {
-      grid-template-columns: 16ch auto;
+    ${StyledFieldValue} {
+      font-size: ${fontSizes[theme.components.text.h1['font-size']]};
+      font-weight: ${theme.components.text.h1['font-weight']};
+    }
+  `;
+});
+StyledSummaryPrimaryList.defaultProps = defaultThemeProp;
+export const StyledSummarySecondaryList = styled(FieldValueList)(() => {
+    return css `
+    ${StyledStackedFieldValue} {
+      grid-column: 1 / -1;
+    }
+  `;
+});
+export const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {
+    const { base: { spacing } } = theme;
+    const containerWidthCh = colCountChWidth[1].containerWidth;
+    const containerWidthMinusLabel = `${containerWidthCh - labelChWidth}ch`;
+    return css `
+    ${StyledCaseSummaryFields} {
+      padding: 0;
+    }
 
-      ${StyledFieldValue} {
-        font-size: ${fontSizes[theme.components.text.h1['font-size']]};
-        font-weight: ${theme.components.text.h1['font-weight']};
+    ${StyledSummarySecondaryList} {
+      > ${StyledStackedFieldValue} {
+        max-width: ${containerWidthCh}ch;
+      }
+
+      > ${StyledFieldValue} {
+        max-width: calc(${containerWidthMinusLabel} - 2 * ${spacing});
       }
     }
   `;
 });
-StyledCaseSummaryFields.defaultProps = defaultThemeProp;
+StyledSummaryTabContent.defaultProps = defaultThemeProp;
 export const StyledCaseHeader = styled.header(({ theme }) => {
     const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));
     return css `
@@ -27,6 +60,11 @@ export const StyledCaseHeader = styled.header(({ theme }) => {
     padding: calc(2 * ${theme.base.spacing});
     position: relative;
 
+    h1:focus-visible {
+      outline: transparent;
+      box-shadow: ${theme.base.shadow.focus};
+    }
+
     ${StyledMenu} {
       color: ${theme.base.palette['foreground-color']};
       z-index: ${theme.base['z-index'].popover + 1};
@@ -60,7 +98,7 @@ export const StyledFollowIconWrap = styled.label `
   }
 
   input:focus + svg {
-    box-shadow: ${({ theme }) => theme.base.shadow['focus-inverted']};
+    box-shadow: ${({ theme }) => theme.base.shadow.focus};
   }
 `;
 StyledFollowIconWrap.defaultProps = defaultThemeProp;
@@ -93,7 +131,7 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
       > a,
       > button {
         &:focus {
-          box-shadow: ${theme.base.shadow['focus-inverted']};
+          box-shadow: ${theme.base.shadow.focus};
         }
       }