@pega/cosmos-react-work 3.0.0-dev.4.1 → 3.0.0-dev.6.0

package/lib/components/AppAnnouncement/AppAnnouncement.js

@@ -83,9 +83,9 @@ export const StyledAppAnnouncement = styled.article(props => {
 StyledAppAnnouncement.defaultProps = defaultThemeProp;
 const AppAnnouncement = forwardRef(({ heading, description, details, whatsNewLink, image, onDismiss, ...restProps }, ref) => {
     const t = useI18n();
-    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' }, void 0) }, void 0)), _jsx(Text, { variant: 'h2', children: heading || t('app_announcement_details_list_header') }, void 0), _jsxs("div", { children: [description && _jsx("p", { children: description }, void 0), details && (_jsx("ul", { children: details.map((item, index) => {
+    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());
-                        }) }, void 0)), whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: t('app_announcement_whats_new_button_label') }, void 0))] }, void 0)] }, void 0));
+                        }) })), whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: t('app_announcement_whats_new_button_label') }))] })] }));
 });
 export default AppAnnouncement;
 //# sourceMappingURL=AppAnnouncement.js.map

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   * 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  (\n    {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      image,\n      onDismiss,\n      ...restProps\n    }: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) => {\n    const t = useI18n();\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              {t('app_announcement_whats_new_button_label')}\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;AA8BxB,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,CACE,EACE,OAAO,EACP,WAAW,EACX,OAAO,EACP,YAAY,EACZ,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EAC0B,EACxC,GAAgC,EAChC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,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,CAAC,CAAC,yCAAyC,CAAC,GACtC,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   * 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  (\n    {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      image,\n      onDismiss,\n      ...restProps\n    }: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) => {\n    const t = useI18n();\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              {t('app_announcement_whats_new_button_label')}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default AppAnnouncement;\n"]}

package/lib/components/CaseHeader/CaseHeader.js

@@ -94,10 +94,10 @@ const CaseHeader = forwardRef(({ caseId, heading, caseLink = { href: '' }, paren
         return {
             ...action,
             primary: action.text,
-            visual: action.icon ? _jsx(Icon, { name: action.icon }, void 0) : null
+            visual: action.icon ? _jsx(Icon, { name: action.icon }) : null
         };
     });
-    return (_jsxs(Flex, { ...restProps, as: StyledCaseHeader, container: { gap: 2, alignItems: 'start' }, ref: ref, children: [icon && (_jsx(Flex, { container: true, item: { shrink: 0 }, as: StyledCaseIconWrap, children: icon }, void 0)), _jsxs(Flex, { as: StyledCaseHeaderText, container: { direction: 'column' }, item: { grow: 1, shrink: 0, basis: '0' }, children: [_jsx(Text, { variant: 'h1', children: href ? (_jsx(Link, { ...restLinkProps, href: href, children: heading }, void 0)) : (heading) }, void 0), _jsx(Breadcrumbs, { path: [...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }] }, void 0)] }, void 0), _jsxs("div", { children: [onEdit && (_jsx(Button, { icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), children: _jsx(Icon, { name: 'pencil' }, void 0) }, void 0)), _jsx(MenuButton, { icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
+    return (_jsxs(Flex, { ...restProps, as: StyledCaseHeader, container: { gap: 2, alignItems: 'start' }, ref: ref, children: [icon && (_jsx(Flex, { container: true, item: { shrink: 0 }, as: StyledCaseIconWrap, children: icon })), _jsxs(Flex, { as: StyledCaseHeaderText, container: { direction: 'column' }, item: { grow: 1, shrink: 0, basis: '0' }, children: [_jsx(Text, { variant: 'h1', children: href ? (_jsx(Link, { ...restLinkProps, href: href, children: heading })) : (heading) }), _jsx(Breadcrumbs, { path: [...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }] })] }), _jsxs("div", { children: [onEdit && (_jsx(Button, { icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), children: _jsx(Icon, { name: 'pencil' }) })), _jsx(MenuButton, { icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
                             items: followed !== undefined
                                 ? [
                                     {
@@ -113,7 +113,7 @@ const CaseHeader = forwardRef(({ caseId, heading, caseLink = { href: '' }, paren
                             ? {
                                 portal: true
                             }
-                            : undefined }, void 0)] }, void 0)] }, void 0));
+                            : undefined })] })] }));
 });
 export default CaseHeader;
 //# sourceMappingURL=CaseHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, ReactElement, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';\n\nimport {\n  Action,\n  Breadcrumbs,\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  StyledBreadcrumbs,\n  StyledIcon,\n  StyledPopover,\n  defaultThemeProp,\n  ForwardProps,\n  tryCatch,\n  calculateFontSize,\n  Link,\n  StyledButton,\n  StyledText,\n  MenuItemProps,\n  Button,\n  MenuButton,\n  useI18n,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\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\nregisterIcon(pencilIcon, moreIcon);\n\nexport interface CaseHeaderProps extends NoChildrenProp {\n  /** Any actions that will be used for various actions on the CaseView. */\n  actions?: Action[];\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n  /**\n   * Indicator for the current size of the users screen.\n   * @internal\n   */\n  isMediumOrAbove?: boolean;\n  /** A Case ID to display in the heading. */\n  caseId: string;\n  /** A text region for the title of the CaseView. */\n  heading: string;\n  /** A set of props including an href that will be forwarded to the case heading and caseId. */\n  caseLink?: { href: string } & ForwardProps;\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: ReactElement;\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange.  */\n  followed?: boolean;\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n  const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n  return css`\n    background-color: ${theme.base.palette['brand-primary']};\n    color: ${color};\n    padding: calc(2 * ${theme.base.spacing});\n    position: relative;\n\n    ${StyledMenu} {\n      color: ${theme.base.palette['foreground-color']};\n      z-index: ${theme.base['z-index'].popover + 1};\n    }\n  `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nconst StyledCaseIconWrap = styled.div(({ theme }) => {\n  const spacing = theme.base.spacing;\n  const borderRadius = theme.base['border-radius'];\n  const backgroundColor = tryCatch(() => {\n    const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n    return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n  });\n\n  return css`\n    background: ${backgroundColor};\n    border-radius: calc(${borderRadius} / 2);\n    width: calc(5 * ${spacing});\n    height: calc(5 * ${spacing});\n    ${StyledIcon} {\n      font-size: calc(3 * ${spacing});\n      margin: auto;\n    }\n  `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledFollowIconWrap = styled.label`\n  font-size: 1.25rem;\n  input {\n    ${hideVisually}\n  }\n\n  input:focus + svg {\n    box-shadow: ${({ theme }) => theme.base.shadow['focus-inverted']};\n  }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledCaseHeaderText = styled.div(({ theme }) => {\n  const color = readableColor(theme.base.palette['brand-primary']);\n  const transparentColor = tryCatch(() => transparentize(0.2, color));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    word-break: break-word;\n\n    ${StyledBreadcrumbs} {\n      > a,\n      > span,\n      > button,\n      > svg {\n        color: ${transparentColor};\n        font-size: ${fontSize.s};\n        font-weight: normal;\n      }\n\n      > a,\n      > button {\n        &:focus {\n          box-shadow: ${theme.base.shadow['focus-inverted']};\n        }\n      }\n\n      ${StyledPopover} {\n        color: ${theme.base.palette['foreground-color']};\n      }\n    }\n\n    > ${StyledText} > ${StyledButton} {\n      color: ${color};\n    }\n  `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nconst CaseHeader: FunctionComponent<CaseHeaderProps & ForwardProps> = forwardRef(\n  (\n    {\n      caseId,\n      heading,\n      caseLink = { href: '' },\n      parentCases,\n      isMediumOrAbove = true,\n      icon,\n      followed,\n      onFollowedChange,\n      actions = [],\n      onEdit,\n      ...restProps\n    }: PropsWithoutRef<CaseHeaderProps>,\n    ref: CaseHeaderProps['ref']\n  ) => {\n    const { href, ...restLinkProps } = caseLink;\n    const t = useI18n();\n    const menuItems: MenuItemProps[] = actions.map(action => {\n      return {\n        ...action,\n        primary: action.text,\n        visual: action.icon ? <Icon name={action.icon} /> : null\n      };\n    });\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledCaseHeader}\n        container={{ gap: 2, alignItems: 'start' }}\n        ref={ref}\n      >\n        {icon && (\n          <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n            {icon}\n          </Flex>\n        )}\n        <Flex\n          as={StyledCaseHeaderText}\n          container={{ direction: 'column' }}\n          item={{ grow: 1, shrink: 0, basis: '0' }}\n        >\n          <Text variant='h1'>\n            {href ? (\n              <Link {...restLinkProps} href={href}>\n                {heading}\n              </Link>\n            ) : (\n              heading\n            )}\n          </Text>\n          <Breadcrumbs\n            path={[...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }]}\n          />\n        </Flex>\n        <div>\n          {onEdit && (\n            <Button icon variant='simple' onClick={onEdit} label={t('edit')}>\n              <Icon name='pencil' />\n            </Button>\n          )}\n          <MenuButton\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                      ...menuItems\n                    ]\n                  : menuItems,\n              scrollAt: 20\n            }}\n            popover={\n              isMediumOrAbove\n                ? {\n                    portal: true\n                  }\n                : undefined\n            }\n          />\n        </div>\n      </Flex>\n    );\n  }\n);\n\nexport default CaseHeader;\n"]}
+{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, ReactElement, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';\n\nimport {\n  Action,\n  Breadcrumbs,\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  StyledBreadcrumbs,\n  StyledIcon,\n  StyledPopover,\n  defaultThemeProp,\n  ForwardProps,\n  tryCatch,\n  calculateFontSize,\n  Link,\n  StyledButton,\n  StyledText,\n  MenuItemProps,\n  Button,\n  MenuButton,\n  useI18n,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\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\nregisterIcon(pencilIcon, moreIcon);\n\nexport interface CaseHeaderProps extends NoChildrenProp {\n  /** Any actions that will be used for various actions on the CaseView. */\n  actions?: Action[];\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n  /**\n   * Indicator for the current size of the users screen.\n   * @internal\n   */\n  isMediumOrAbove?: boolean;\n  /** A Case ID to display in the heading. */\n  caseId: string;\n  /** A text region for the title of the CaseView. */\n  heading: string;\n  /** A set of props including an href that will be forwarded to the case heading and caseId. */\n  caseLink?: { href: string } & ForwardProps;\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: ReactElement;\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange.  */\n  followed?: boolean;\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n  const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n  return css`\n    background-color: ${theme.base.palette['brand-primary']};\n    color: ${color};\n    padding: calc(2 * ${theme.base.spacing});\n    position: relative;\n\n    ${StyledMenu} {\n      color: ${theme.base.palette['foreground-color']};\n      z-index: ${theme.base['z-index'].popover + 1};\n    }\n  `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nconst StyledCaseIconWrap = styled.div(({ theme }) => {\n  const spacing = theme.base.spacing;\n  const borderRadius = theme.base['border-radius'];\n  const backgroundColor = tryCatch(() => {\n    const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n    return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n  });\n\n  return css`\n    background: ${backgroundColor};\n    border-radius: calc(${borderRadius} / 2);\n    width: calc(5 * ${spacing});\n    height: calc(5 * ${spacing});\n    ${StyledIcon} {\n      font-size: calc(3 * ${spacing});\n      margin: auto;\n    }\n  `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledFollowIconWrap = styled.label`\n  font-size: 1.25rem;\n  input {\n    ${hideVisually}\n  }\n\n  input:focus + svg {\n    box-shadow: ${({ theme }) => theme.base.shadow['focus-inverted']};\n  }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledCaseHeaderText = styled.div(({ theme }) => {\n  const color = readableColor(theme.base.palette['brand-primary']);\n  const transparentColor = tryCatch(() => transparentize(0.2, color));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    word-break: break-word;\n\n    ${StyledBreadcrumbs} {\n      > a,\n      > span,\n      > button,\n      > svg {\n        color: ${transparentColor};\n        font-size: ${fontSize.s};\n        font-weight: normal;\n      }\n\n      > a,\n      > button {\n        &:focus {\n          box-shadow: ${theme.base.shadow['focus-inverted']};\n        }\n      }\n\n      ${StyledPopover} {\n        color: ${theme.base.palette['foreground-color']};\n      }\n    }\n\n    > ${StyledText} > ${StyledButton} {\n      color: ${color};\n    }\n  `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nconst CaseHeader: FunctionComponent<CaseHeaderProps & ForwardProps> = forwardRef(\n  (\n    {\n      caseId,\n      heading,\n      caseLink = { href: '' },\n      parentCases,\n      isMediumOrAbove = true,\n      icon,\n      followed,\n      onFollowedChange,\n      actions = [],\n      onEdit,\n      ...restProps\n    }: PropsWithoutRef<CaseHeaderProps>,\n    ref: CaseHeaderProps['ref']\n  ) => {\n    const { href, ...restLinkProps } = caseLink;\n    const t = useI18n();\n    const menuItems: MenuItemProps[] = actions.map(action => {\n      return {\n        ...action,\n        primary: action.text,\n        visual: action.icon ? <Icon name={action.icon} /> : null\n      };\n    });\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledCaseHeader}\n        container={{ gap: 2, alignItems: 'start' }}\n        ref={ref}\n      >\n        {icon && (\n          <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n            {icon}\n          </Flex>\n        )}\n        <Flex\n          as={StyledCaseHeaderText}\n          container={{ direction: 'column' }}\n          item={{ grow: 1, shrink: 0, basis: '0' }}\n        >\n          <Text variant='h1'>\n            {href ? (\n              <Link {...restLinkProps} href={href}>\n                {heading}\n              </Link>\n            ) : (\n              heading\n            )}\n          </Text>\n          <Breadcrumbs\n            path={[...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }]}\n          />\n        </Flex>\n        <div>\n          {onEdit && (\n            <Button icon variant='simple' onClick={onEdit} label={t('edit')}>\n              <Icon name='pencil' />\n            </Button>\n          )}\n          <MenuButton\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                      ...menuItems\n                    ]\n                  : menuItems,\n              scrollAt: 20\n            }}\n            popover={\n              isMediumOrAbove\n                ? {\n                    portal: true\n                  }\n                : undefined\n            }\n          />\n        </div>\n      </Flex>\n    );\n  }\n);\n\nexport default CaseHeader;\n"]}

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,EAMb,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,EAId,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,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;AAkED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+FnE,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,EAMb,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,EAKd,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,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,CA+FnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CasePreview/CasePreview.js

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
 import { Drawer, Icon, registerIcon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useElement, useDirection, useI18n, AppShellContext } from '@pega/cosmos-react-core';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import CaseView, { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer } from '../CaseView';
+import CaseView, { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledSummaryRegion } from '../CaseView';
 registerIcon(timesIcon);
 const StyledPreviewHeader = styled.div(({ theme }) => {
     return css `
@@ -37,6 +37,11 @@ const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {
       @media (pointer: coarse) {
         height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});
       }
+
+      ${StyledSummaryRegion} {
+        position: relative;
+        top: 0;
+      }
     }
 
     ${StyledCaseViewContent} {
@@ -74,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, "aria-label": t('close_preview'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0) }, void 0), _jsx(CaseView, { forceMobile: true, caseId: caseId, parentCases: parentCases, heading: heading, 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 }, void 0)] }, void 0));
+    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, "aria-label": t('close_preview'), children: _jsx(Icon, { name: 'times' }) }) }), _jsx(CaseView, { forceMobile: true, caseId: caseId, parentCases: parentCases, heading: heading, 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 })] }));
 });
 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} 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} from '../CaseView';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps extends CaseViewProps {\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\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      parentCases,\n      heading,\n      caseLink,\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            aria-label={t('close_preview')}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledPreviewActions>\n\n        <CaseView\n          forceMobile\n          caseId={caseId}\n          parentCases={parentCases}\n          heading={heading}\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        />\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} 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 extends CaseViewProps {\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      parentCases,\n      heading,\n      caseLink,\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            aria-label={t('close_preview')}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledPreviewActions>\n\n        <CaseView\n          forceMobile\n          caseId={caseId}\n          parentCases={parentCases}\n          heading={heading}\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        />\n      </Drawer>\n    );\n  }\n);\n\nexport default CasePreview;\n"]}

package/lib/components/CaseSummary/CaseSummary.js

@@ -112,7 +112,7 @@ const CaseSummary = forwardRef((props, ref) => {
                             ? expandOrCollapseLabel
                             : undefined, "aria-label": ['expanding', 'collapsing'].includes(animationState)
                             ? expandOrCollapseA11y
-                            : undefined, visible: showExpandCollapse || !expanded || focusWithin, tabIndex: 0, icon: true, compact: true, ref: expandCollapseBtnRef, children: _jsx(Icon, { name: 'arrow-micro-left' }, void 0) }, void 0), _jsx(ExpandCollapse, { dimension: 'width', min: isMediumOrAbove || !expanded ? fixedWidth : '100%', max: '100%', collapsed: expanded, onBeforeExpand: () => {
+                            : undefined, visible: showExpandCollapse || !expanded || focusWithin, tabIndex: 0, icon: true, compact: true, ref: expandCollapseBtnRef, children: _jsx(Icon, { name: 'arrow-micro-left' }) }), _jsx(ExpandCollapse, { dimension: 'width', min: isMediumOrAbove || !expanded ? fixedWidth : '100%', max: '100%', collapsed: expanded, onBeforeExpand: () => {
                             setAnimStateAndUpdateParent('collapsing');
                             onBeforeCollapse?.();
                         }, onAfterExpand: () => {
@@ -124,7 +124,7 @@ const CaseSummary = forwardRef((props, ref) => {
                         }, onAfterCollapse: () => {
                             setAnimStateAndUpdateParent('expanded');
                             onAfterExpand?.();
-                        }, as: StyledExpandCollapse, animationState: animationState, ref: headerRef, children: _jsx(CaseHeader, { ...caseHeaderProps }, void 0) }, void 0)] }, void 0)) : (_jsx(CaseHeader, { ...caseHeaderProps }, void 0)), _jsxs(StyledCaseSummaryInfo, { children: [isMediumOrAbove && summary, showTabs && isMediumOrAbove && (_jsx(Tabs, { type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }, void 0))] }, void 0)] }, void 0));
+                        }, as: StyledExpandCollapse, animationState: animationState, ref: headerRef, children: _jsx(CaseHeader, { ...caseHeaderProps }) })] })) : (_jsx(CaseHeader, { ...caseHeaderProps })), _jsxs(StyledCaseSummaryInfo, { children: [isMediumOrAbove && summary, showTabs && isMediumOrAbove && (_jsx(Tabs, { type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }))] })] }));
 });
 export default CaseSummary;
 //# sourceMappingURL=CaseSummary.js.map

package/lib/components/CaseSummary/CaseSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSummary.js","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  MouseEvent,\n  useState,\n  useEffect,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Tabs,\n  Tab,\n  ForwardProps,\n  ExpandCollapse,\n  defaultThemeProp,\n  useConsolidatedRef,\n  Icon,\n  registerIcon,\n  useI18n,\n  useFocusWithin,\n  Button,\n  StyledIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';\n\nimport CaseHeader, { CaseHeaderProps } from '../CaseHeader';\n\nregisterIcon(arrowMicroLeftIcon);\n\nexport interface CaseSummaryProps extends CaseHeaderProps {\n  /** A region to display any summary information about the CaseView. */\n  summary: ReactNode;\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n  /**\n   * Forces rendering in the mobile layout, regardless of screen size.\n   * @internal\n   */\n  forceMobile?: boolean;\n  /**\n   * Indicator for a desktop size.\n   * @internal\n   */\n  desktop?: boolean;\n  /** The fixed width string is needed for the expandable and collapsible header. */\n  fixedWidth?: string;\n  /** A boolean that toggles the collapsible feature of the case summary. */\n  collapsible?: boolean;\n  onBeforeCollapse?: () => void;\n  onAfterCollapse?: () => void;\n  onBeforeExpand?: () => void;\n  onAfterExpand?: () => void;\n  /** A callback that will return the animation state of the case summary. */\n  onAnimationStateChange?: (state: AnimationState) => void;\n  /** Ref for the header element inside the Case Summary */\n  headerRef?: Ref<HTMLDivElement>;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype AnimationState = 'expanding' | 'expanded' | 'collapsing' | 'collapsed';\n\nexport const StyledCaseSummary = styled.div<{ expanded?: boolean; fixedWidth?: string }>(\n  ({ theme, expanded, fixedWidth }) => {\n    return css`\n      position: relative;\n      width: ${fixedWidth || 'auto'};\n      max-width: ${fixedWidth ? 'none' : '100%'};\n      height: 100%;\n\n      ${expanded &&\n      css`\n        @media (min-width: ${theme.base.breakpoints.md}) {\n          &:hover {\n            &::after {\n              content: '';\n              position: absolute;\n              top: 0;\n              bottom: 0;\n              inset-inline-start: 100%;\n              width: 0.75rem;\n            }\n          }\n        }\n      `}\n    `;\n  }\n);\n\nexport const StyledCaseSummaryInfo = styled.div`\n  overflow: auto;\n  flex: 1;\n`;\n\nconst StyledExpandCollapse = styled.div<{ animationState: AnimationState }>(\n  ({ animationState }) => {\n    const expandingOrCollapsing = ['expanding', 'collapsing'].includes(animationState);\n    return css`\n      position: ${expandingOrCollapsing ? 'fixed' : 'relative'};\n      top: ${expandingOrCollapsing ? 'var(--appshell-offset, 0)' : 0};\n    `;\n  }\n);\n\nconst StyledExpandCollapseButton = styled(Button)<{\n  expanded: boolean;\n  headerHeight: number;\n  animationState: AnimationState;\n  visible: boolean;\n}>(({ theme, expanded, headerHeight, animationState, visible }) => {\n  return css`\n    border-radius: ${expanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};\n    box-shadow: ${theme.base.shadow.low};\n    border: none;\n    opacity: ${visible ? '1' : '0'};\n    position: ${animationState === 'collapsing' ? 'fixed' : 'absolute'};\n    inset-inline-start: ${expanded ? 'calc(100% - 0.75rem)' : 0};\n    top: calc(calc(${headerHeight}px / 2) - 0.75rem);\n    z-index: 1;\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n      transform: rotate(${expanded ? '0' : '180deg'});\n    }\n  `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nconst CaseSummary: FunctionComponent<CaseSummaryProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CaseSummaryProps>, ref: CaseSummaryProps['ref']) => {\n    const {\n      icon,\n      heading,\n      caseId,\n      caseLink,\n      parentCases,\n      followed,\n      onFollowedChange,\n      actions,\n      onEdit,\n      summary,\n      tabs,\n      forceMobile,\n      collapsible = false,\n      desktop = true,\n      fixedWidth,\n      onBeforeCollapse,\n      onAfterCollapse,\n      onBeforeExpand,\n      onAfterExpand,\n      onAnimationStateChange,\n      headerRef: caseSummaryHeaderRef,\n      ...restProps\n    } = props;\n\n    const [showExpandCollapse, setShowExpandCollapse] = useState(false);\n    const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n    const [expanded, setExpanded] = useState(true);\n    const isMediumOrAbove = !forceMobile && desktop;\n    const [animationState, setAnimationState] = useState('expanded');\n    const [collapsedHeight, setCollapsedHeight] = useState(0);\n    const caseSummaryRef = useConsolidatedRef(ref);\n    const focusWithin = useFocusWithin<HTMLDivElement>([caseSummaryRef.current]);\n    const t = useI18n();\n\n    const setAnimStateAndUpdateParent = (state: AnimationState) => {\n      setAnimationState(state);\n      onAnimationStateChange?.(state);\n    };\n\n    const headerRef = useConsolidatedRef<HTMLDivElement>(caseSummaryHeaderRef);\n\n    const showTabs = (isMediumOrAbove && tabs.items.length > 1) || !isMediumOrAbove;\n\n    const caseHeaderProps = {\n      actions,\n      onEdit,\n      isMediumOrAbove,\n      caseId,\n      parentCases,\n      heading,\n      caseLink,\n      icon,\n      followed,\n      onFollowedChange,\n      style: {\n        maxHeight: ['expanding', 'collapsed', 'collapsing'].includes(animationState)\n          ? `${collapsedHeight}px`\n          : 'auto'\n      }\n    };\n\n    useEffect(() => {\n      if (['expanded'].includes(animationState)) {\n        setCollapsedHeight(headerRef.current?.offsetHeight || 0);\n      }\n    }, [animationState, headerRef.current]);\n\n    const expandOrCollapseLabel = expanded ? t('collapse') : t('expand');\n    const expandOrCollapseA11y = expanded ? t('collapse_summary_panel') : t('expand_summary_panel');\n\n    return (\n      <Flex\n        as={StyledCaseSummary}\n        expanded={expanded}\n        fixedWidth={fixedWidth}\n        container={{ direction: 'column' }}\n        item={{ shrink: 0 }}\n        ref={caseSummaryRef}\n        style={{\n          marginTop: ['collapsing', 'expanding'].includes(animationState)\n            ? `${collapsedHeight}px`\n            : 0\n        }}\n        onMouseEnter={() => {\n          setShowExpandCollapse(true);\n        }}\n        onMouseLeave={() => {\n          setShowExpandCollapse(false);\n        }}\n        {...restProps}\n      >\n        {collapsible ? (\n          <>\n            <StyledExpandCollapseButton\n              onClick={() => setExpanded(!expanded)}\n              expanded={expanded}\n              headerHeight={collapsedHeight}\n              animationState={animationState}\n              label={\n                ['expanded', 'collapsed'].includes(animationState)\n                  ? expandOrCollapseLabel\n                  : undefined\n              }\n              aria-label={\n                ['expanding', 'collapsing'].includes(animationState)\n                  ? expandOrCollapseA11y\n                  : undefined\n              }\n              visible={showExpandCollapse || !expanded || focusWithin}\n              tabIndex={0}\n              icon\n              compact\n              ref={expandCollapseBtnRef}\n            >\n              <Icon name='arrow-micro-left' />\n            </StyledExpandCollapseButton>\n            <ExpandCollapse\n              dimension='width'\n              min={isMediumOrAbove || !expanded ? fixedWidth : '100%'}\n              max='100%'\n              collapsed={expanded}\n              onBeforeExpand={() => {\n                setAnimStateAndUpdateParent('collapsing');\n                onBeforeCollapse?.();\n              }}\n              onAfterExpand={() => {\n                setAnimStateAndUpdateParent('collapsed');\n                onAfterCollapse?.();\n              }}\n              onBeforeCollapse={() => {\n                setAnimStateAndUpdateParent('expanding');\n                onBeforeExpand?.();\n              }}\n              onAfterCollapse={() => {\n                setAnimStateAndUpdateParent('expanded');\n                onAfterExpand?.();\n              }}\n              as={StyledExpandCollapse}\n              animationState={animationState}\n              ref={headerRef}\n            >\n              <CaseHeader {...caseHeaderProps} />\n            </ExpandCollapse>\n          </>\n        ) : (\n          <CaseHeader {...caseHeaderProps} />\n        )}\n        <StyledCaseSummaryInfo>\n          {isMediumOrAbove && summary}\n\n          {showTabs && isMediumOrAbove && (\n            <Tabs\n              type='vertical'\n              tabs={tabs.items}\n              onTabClick={tabs.onClick}\n              currentTabId={tabs.currentTabId}\n            />\n          )}\n        </StyledCaseSummaryInfo>\n      </Flex>\n    );\n  }\n);\n\nexport default CaseSummary;\n"]}
+{"version":3,"file":"CaseSummary.js","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  MouseEvent,\n  useState,\n  useEffect,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Tabs,\n  Tab,\n  ForwardProps,\n  ExpandCollapse,\n  defaultThemeProp,\n  useConsolidatedRef,\n  Icon,\n  registerIcon,\n  useI18n,\n  useFocusWithin,\n  Button,\n  StyledIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';\n\nimport CaseHeader, { CaseHeaderProps } from '../CaseHeader';\n\nregisterIcon(arrowMicroLeftIcon);\n\nexport interface CaseSummaryProps extends CaseHeaderProps {\n  /** A region to display any summary information about the CaseView. */\n  summary: ReactNode;\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n  /**\n   * Forces rendering in the mobile layout, regardless of screen size.\n   * @internal\n   */\n  forceMobile?: boolean;\n  /**\n   * Indicator for a desktop size.\n   * @internal\n   */\n  desktop?: boolean;\n  /** The fixed width string is needed for the expandable and collapsible header. */\n  fixedWidth?: string;\n  /** A boolean that toggles the collapsible feature of the case summary. */\n  collapsible?: boolean;\n  onBeforeCollapse?: () => void;\n  onAfterCollapse?: () => void;\n  onBeforeExpand?: () => void;\n  onAfterExpand?: () => void;\n  /** A callback that will return the animation state of the case summary. */\n  onAnimationStateChange?: (state: AnimationState) => void;\n  /** Ref for the header element inside the Case Summary */\n  headerRef?: Ref<HTMLDivElement>;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype AnimationState = 'expanding' | 'expanded' | 'collapsing' | 'collapsed';\n\nexport const StyledCaseSummary = styled.div<{ expanded?: boolean; fixedWidth?: string }>(\n  ({ theme, expanded, fixedWidth }) => {\n    return css`\n      position: relative;\n      width: ${fixedWidth || 'auto'};\n      max-width: ${fixedWidth ? 'none' : '100%'};\n      height: 100%;\n\n      ${expanded &&\n      css`\n        @media (min-width: ${theme.base.breakpoints.md}) {\n          &:hover {\n            &::after {\n              content: '';\n              position: absolute;\n              top: 0;\n              bottom: 0;\n              inset-inline-start: 100%;\n              width: 0.75rem;\n            }\n          }\n        }\n      `}\n    `;\n  }\n);\n\nexport const StyledCaseSummaryInfo = styled.div`\n  overflow: auto;\n  flex: 1;\n`;\n\nconst StyledExpandCollapse = styled.div<{ animationState: AnimationState }>(\n  ({ animationState }) => {\n    const expandingOrCollapsing = ['expanding', 'collapsing'].includes(animationState);\n    return css`\n      position: ${expandingOrCollapsing ? 'fixed' : 'relative'};\n      top: ${expandingOrCollapsing ? 'var(--appshell-offset, 0)' : 0};\n    `;\n  }\n);\n\nconst StyledExpandCollapseButton = styled(Button)<{\n  expanded: boolean;\n  headerHeight: number;\n  animationState: AnimationState;\n  visible: boolean;\n}>(({ theme, expanded, headerHeight, animationState, visible }) => {\n  return css`\n    border-radius: ${expanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};\n    box-shadow: ${theme.base.shadow.low};\n    border: none;\n    opacity: ${visible ? '1' : '0'};\n    position: ${animationState === 'collapsing' ? 'fixed' : 'absolute'};\n    inset-inline-start: ${expanded ? 'calc(100% - 0.75rem)' : 0};\n    top: calc(calc(${headerHeight}px / 2) - 0.75rem);\n    z-index: 1;\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n      transform: rotate(${expanded ? '0' : '180deg'});\n    }\n  `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nconst CaseSummary: FunctionComponent<CaseSummaryProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CaseSummaryProps>, ref: CaseSummaryProps['ref']) => {\n    const {\n      icon,\n      heading,\n      caseId,\n      caseLink,\n      parentCases,\n      followed,\n      onFollowedChange,\n      actions,\n      onEdit,\n      summary,\n      tabs,\n      forceMobile,\n      collapsible = false,\n      desktop = true,\n      fixedWidth,\n      onBeforeCollapse,\n      onAfterCollapse,\n      onBeforeExpand,\n      onAfterExpand,\n      onAnimationStateChange,\n      headerRef: caseSummaryHeaderRef,\n      ...restProps\n    } = props;\n\n    const [showExpandCollapse, setShowExpandCollapse] = useState(false);\n    const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n    const [expanded, setExpanded] = useState(true);\n    const isMediumOrAbove = !forceMobile && desktop;\n    const [animationState, setAnimationState] = useState('expanded');\n    const [collapsedHeight, setCollapsedHeight] = useState(0);\n    const caseSummaryRef = useConsolidatedRef(ref);\n    const focusWithin = useFocusWithin<HTMLDivElement>([caseSummaryRef.current]);\n    const t = useI18n();\n\n    const setAnimStateAndUpdateParent = (state: AnimationState) => {\n      setAnimationState(state);\n      onAnimationStateChange?.(state);\n    };\n\n    const headerRef = useConsolidatedRef<HTMLDivElement>(caseSummaryHeaderRef);\n\n    const showTabs = (isMediumOrAbove && tabs.items.length > 1) || !isMediumOrAbove;\n\n    const caseHeaderProps = {\n      actions,\n      onEdit,\n      isMediumOrAbove,\n      caseId,\n      parentCases,\n      heading,\n      caseLink,\n      icon,\n      followed,\n      onFollowedChange,\n      style: {\n        maxHeight: ['expanding', 'collapsed', 'collapsing'].includes(animationState)\n          ? `${collapsedHeight}px`\n          : 'auto'\n      }\n    };\n\n    useEffect(() => {\n      if (['expanded'].includes(animationState)) {\n        setCollapsedHeight(headerRef.current?.offsetHeight || 0);\n      }\n    }, [animationState, headerRef.current]);\n\n    const expandOrCollapseLabel = expanded ? t('collapse') : t('expand');\n    const expandOrCollapseA11y = expanded ? t('collapse_summary_panel') : t('expand_summary_panel');\n\n    return (\n      <Flex\n        as={StyledCaseSummary}\n        expanded={expanded}\n        fixedWidth={fixedWidth}\n        container={{ direction: 'column' }}\n        item={{ shrink: 0 }}\n        ref={caseSummaryRef}\n        style={{\n          marginTop: ['collapsing', 'expanding'].includes(animationState)\n            ? `${collapsedHeight}px`\n            : 0\n        }}\n        onMouseEnter={() => {\n          setShowExpandCollapse(true);\n        }}\n        onMouseLeave={() => {\n          setShowExpandCollapse(false);\n        }}\n        {...restProps}\n      >\n        {collapsible ? (\n          <>\n            <StyledExpandCollapseButton\n              onClick={() => setExpanded(!expanded)}\n              expanded={expanded}\n              headerHeight={collapsedHeight}\n              animationState={animationState}\n              label={\n                ['expanded', 'collapsed'].includes(animationState)\n                  ? expandOrCollapseLabel\n                  : undefined\n              }\n              aria-label={\n                ['expanding', 'collapsing'].includes(animationState)\n                  ? expandOrCollapseA11y\n                  : undefined\n              }\n              visible={showExpandCollapse || !expanded || focusWithin}\n              tabIndex={0}\n              icon\n              compact\n              ref={expandCollapseBtnRef}\n            >\n              <Icon name='arrow-micro-left' />\n            </StyledExpandCollapseButton>\n            <ExpandCollapse\n              dimension='width'\n              min={isMediumOrAbove || !expanded ? fixedWidth : '100%'}\n              max='100%'\n              collapsed={expanded}\n              onBeforeExpand={() => {\n                setAnimStateAndUpdateParent('collapsing');\n                onBeforeCollapse?.();\n              }}\n              onAfterExpand={() => {\n                setAnimStateAndUpdateParent('collapsed');\n                onAfterCollapse?.();\n              }}\n              onBeforeCollapse={() => {\n                setAnimStateAndUpdateParent('expanding');\n                onBeforeExpand?.();\n              }}\n              onAfterCollapse={() => {\n                setAnimStateAndUpdateParent('expanded');\n                onAfterExpand?.();\n              }}\n              as={StyledExpandCollapse}\n              animationState={animationState}\n              ref={headerRef}\n            >\n              <CaseHeader {...caseHeaderProps} />\n            </ExpandCollapse>\n          </>\n        ) : (\n          <CaseHeader {...caseHeaderProps} />\n        )}\n        <StyledCaseSummaryInfo>\n          {isMediumOrAbove && summary}\n\n          {showTabs && isMediumOrAbove && (\n            <Tabs\n              type='vertical'\n              tabs={tabs.items}\n              onTabClick={tabs.onClick}\n              currentTabId={tabs.currentTabId}\n            />\n          )}\n        </StyledCaseSummaryInfo>\n      </Flex>\n    );\n  }\n);\n\nexport default CaseSummary;\n"]}

package/lib/components/CaseSummaryFields/CaseSummaryFields.js

@@ -19,7 +19,7 @@ export const StyledCaseSummaryFields = styled.div(({ theme }) => {
 });
 StyledCaseSummaryFields.defaultProps = defaultThemeProp;
 const CaseSummaryFields = forwardRef(({ primaryFields, secondaryFields, ...restProps }, ref) => {
-    return (_jsxs(Grid, { ...restProps, as: StyledCaseSummaryFields, ref: ref, container: { rowGap: 2 }, children: [_jsx(FieldValueList, { variant: 'stacked', fields: primaryFields }, void 0), _jsx(FieldValueList, { variant: 'inline', fields: secondaryFields }, void 0)] }, void 0));
+    return (_jsxs(Grid, { ...restProps, as: StyledCaseSummaryFields, ref: ref, container: { rowGap: 2 }, children: [_jsx(FieldValueList, { variant: 'stacked', fields: primaryFields }), _jsx(FieldValueList, { variant: 'inline', fields: secondaryFields })] }));
 });
 export default CaseSummaryFields;
 //# sourceMappingURL=CaseSummaryFields.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,UAAU,EAA2C,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;QAElC,oBAAoB;;;QAGpB,gBAAgB;qBACH,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;GAG3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAmBxD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CACE,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,SAAS,EAA2C,EACzF,GAAkC,EAClC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,EAAE,EAAE,uBAAuB,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAClF,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,aAAa,WAAI,EAC3D,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,WAAI,YACvD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { ReactNode, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Grid,\n  FieldValueList,\n  StyledFieldValueList,\n  StyledFieldValue,\n  calculateFontSize,\n  defaultThemeProp,\n  ForwardProps,\n  FontSize\n} from '@pega/cosmos-react-core';\n\nexport const StyledCaseSummaryFields = styled.div(({ theme }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n\n    > ${StyledFieldValueList}:first-child {\n      grid-template-columns: 16ch auto;\n\n      ${StyledFieldValue} {\n        font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n        font-weight: ${theme.components.text.h1['font-weight']};\n      }\n    }\n  `;\n});\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport interface CaseSummaryFieldsProps {\n  /** The primary summary fields to display above secondary fields. */\n  primaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n  /** The secondary summary fields to display below primary fields. */\n  secondaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CaseSummaryFields: FunctionComponent<CaseSummaryFieldsProps & ForwardProps> = forwardRef(\n  (\n    { primaryFields, secondaryFields, ...restProps }: PropsWithoutRef<CaseSummaryFieldsProps>,\n    ref: CaseSummaryFieldsProps['ref']\n  ) => {\n    return (\n      <Grid {...restProps} as={StyledCaseSummaryFields} ref={ref} container={{ rowGap: 2 }}>\n        <FieldValueList variant='stacked' fields={primaryFields} />\n        <FieldValueList variant='inline' fields={secondaryFields} />\n      </Grid>\n    );\n  }\n);\n\nexport default CaseSummaryFields;\n"]}
+{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,UAAU,EAA2C,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;QAElC,oBAAoB;;;QAGpB,gBAAgB;qBACH,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;GAG3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAmBxD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CACE,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,SAAS,EAA2C,EACzF,GAAkC,EAClC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,EAAE,EAAE,uBAAuB,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAClF,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,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { ReactNode, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Grid,\n  FieldValueList,\n  StyledFieldValueList,\n  StyledFieldValue,\n  calculateFontSize,\n  defaultThemeProp,\n  ForwardProps,\n  FontSize\n} from '@pega/cosmos-react-core';\n\nexport const StyledCaseSummaryFields = styled.div(({ theme }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n\n    > ${StyledFieldValueList}:first-child {\n      grid-template-columns: 16ch auto;\n\n      ${StyledFieldValue} {\n        font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n        font-weight: ${theme.components.text.h1['font-weight']};\n      }\n    }\n  `;\n});\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport interface CaseSummaryFieldsProps {\n  /** The primary summary fields to display above secondary fields. */\n  primaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n  /** The secondary summary fields to display below primary fields. */\n  secondaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CaseSummaryFields: FunctionComponent<CaseSummaryFieldsProps & ForwardProps> = forwardRef(\n  (\n    { primaryFields, secondaryFields, ...restProps }: PropsWithoutRef<CaseSummaryFieldsProps>,\n    ref: CaseSummaryFieldsProps['ref']\n  ) => {\n    return (\n      <Grid {...restProps} as={StyledCaseSummaryFields} ref={ref} container={{ rowGap: 2 }}>\n        <FieldValueList variant='stacked' fields={primaryFields} />\n        <FieldValueList variant='inline' fields={secondaryFields} />\n      </Grid>\n    );\n  }\n);\n\nexport default CaseSummaryFields;\n"]}

package/lib/components/CaseView/CaseView.js

@@ -128,7 +128,7 @@ const CaseView = (props) => {
         }
     }, [currentTabId]);
     const tabContent = useMemo(() => {
-        const summaryTabContent = { id: summaryTabId, content: _jsx(Card, { children: summary }, void 0) };
+        const summaryTabContent = { id: summaryTabId, content: _jsx(Card, { children: summary }) };
         if (isMediumOrAbove)
             return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
                 ? [summaryTabContent, ...tabContentProp]
@@ -137,7 +137,7 @@ const CaseView = (props) => {
         if (utilities)
             utilityTabs.push({
                 id: utilitiesTabId,
-                content: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: utilities }, void 0)
+                content: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: utilities })
             });
         if (persistentUtility)
             utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });
@@ -227,7 +227,7 @@ const CaseView = (props) => {
                     }, onAfterCollapse: () => setSummaryPanelCollapsed(true), onBeforeExpand: () => {
                         animateSummaryPanel('open');
                         setSummaryPanelCollapsed(false);
-                    }, onAnimationStateChange: setSummaryAnimationState }, void 0) }, void 0), _jsxs(Flex, { container: {
+                    }, onAnimationStateChange: setSummaryAnimationState }) }), _jsxs(Flex, { container: {
                     direction: 'column',
                     alignContent: 'start',
                     rowGap: 2
@@ -239,9 +239,9 @@ const CaseView = (props) => {
                         (persistentUtility && !isExtraLargeOrAbove)
                         ? '1rem'
                         : 0
-                }, children: [banners && _jsx("div", { children: banners }, void 0), stages && _jsx("div", { children: stages }, void 0), tasks && _jsx("div", { children: tasks }, void 0), (!isMediumOrAbove ||
+                }, children: [banners && _jsx("div", { children: banners }), stages && _jsx("div", { children: stages }), tasks && _jsx("div", { children: tasks }), (!isMediumOrAbove ||
                         (persistentUtility && !isExtraLargeOrAbove) ||
-                        summaryPanelCollapsed) && (_jsx(Tabs, { tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId }, void 0)), _jsx(StyledTabContent, { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { currentTabId: currentTabId, tabId: id, children: content }, id))) }, void 0)] }, void 0), persistentUtility && isMediumOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, children: persistentUtility.content }, void 0)), !isLargeOrAbove && (_jsx(Drawer, { as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility, children: _jsxs(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_utilities_panel'), children: _jsx(Icon, { name: `move-${direction.end}-solid` }, void 0) }, void 0) }, void 0), utilities] }, void 0) }, void 0)), utilities && isMediumOrAbove && (_jsxs(Grid, { ref: (el) => {
+                        summaryPanelCollapsed) && (_jsx(Tabs, { tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId })), _jsx(StyledTabContent, { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { currentTabId: currentTabId, tabId: id, children: content }, id))) })] }), persistentUtility && isMediumOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, children: persistentUtility.content })), !isLargeOrAbove && (_jsx(Drawer, { as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility, children: _jsxs(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_utilities_panel'), children: _jsx(Icon, { name: `move-${direction.end}-solid` }) }) }), utilities] }) })), utilities && isMediumOrAbove && (_jsxs(Grid, { ref: (el) => {
                     if (el)
                         (scrollStickOptions.current?.elements).push(el);
                 }, as: StyledCaseViewUtilities, container: {
@@ -253,7 +253,7 @@ const CaseView = (props) => {
                     ? {
                         transform: `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
                     }
-                    : undefined, children: [_jsx(Flex, { container: { justify: utilitiesShown ? 'end' : 'center' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_utilities_panel' : 'expand_utilities_panel'), children: _jsx(Icon, { name: utilitiesIcon }, void 0) }, void 0) }, void 0), _jsx(Flex, { container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : undefined, hidden: !utilitiesShown || !isLargeOrAbove, children: utilities }, void 0), (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }, void 0))] }, void 0))] }, void 0));
+                    : undefined, children: [_jsx(Flex, { container: { justify: utilitiesShown ? 'end' : 'center' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_utilities_panel' : 'expand_utilities_panel'), children: _jsx(Icon, { name: utilitiesIcon }) }) }), _jsx(Flex, { container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : undefined, hidden: !utilitiesShown || !isLargeOrAbove, children: utilities }), (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }))] }))] }));
 };
 export default CaseView;
 //# sourceMappingURL=CaseView.js.map

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 {\n  ReactNode,\n  FC,\n  MouseEvent,\n  KeyboardEvent,\n  useContext,\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useRef,\n  useLayoutEffect\n} 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} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport AppShellContext from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';\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, { CaseSummaryProps } from '../CaseSummary';\n\nimport UtilitiesSummary, { UtilitiesSummaryProps } from './UtilitiesSummary';\nimport {\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledTabContent,\n  StyledPersistentUtility,\n  StyledSummaryRegion,\n  StyledCaseViewUtilities,\n  StyledUtilToggle\n} from './CaseView.styles';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nexport interface CaseViewProps extends CaseSummaryProps {\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n  /** A region that is used to hold Utility components for example SummaryList. */\n  utilities?: ReactNode;\n  /** The utilities summary array will be used to render the minimized the utilities card. */\n  utilitiesSummaryItems?: UtilitiesSummaryProps['items'];\n  /** Collapses the utilities by default on load */\n  defaultCollapsedUtilities?: boolean;\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n}\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = (props: CaseViewProps) => {\n  const {\n    caseId,\n    parentCases,\n    heading,\n    caseLink,\n    icon,\n    followed,\n    onFollowedChange,\n    summary,\n    tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },\n    stages,\n    tasks,\n    tabContent: tabContentProp = [],\n    utilities,\n    utilitiesSummaryItems,\n    defaultCollapsedUtilities = false,\n    actions,\n    onEdit,\n    banners,\n    persistentUtility,\n    forceMobile,\n    ...restProps\n  } = props;\n  const t = useI18n();\n  const caseViewRef = useRef<HTMLDivElement>(null);\n  const caseViewSummaryRef: CaseSummaryProps['ref'] = useRef(null);\n  const caseSummaryHeaderRef = useRef<HTMLDivElement>(null);\n  const caseViewSummaryContainerRef = useRef<HTMLDivElement>(null);\n  const [tabContentEl, setTabContentEl] = useElement<HTMLElement>(null);\n  let isExtraLargeOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });\n  let isLargeOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n  let isMediumOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n  if (forceMobile) {\n    isExtraLargeOrAbove = false;\n    isLargeOrAbove = false;\n    isMediumOrAbove = false;\n  }\n\n  const { headerEl } = useContext(AppShellContext);\n\n  const [summaryAnimationState, setSummaryAnimationState] = useState('expanded');\n\n  const summaryTabId = `summary-${caseId}`;\n  const utilitiesTabId = `utilities-${caseId}`;\n  const persistentUtilityTabId = `persistent-utility-${caseId}`;\n  const [utilitiesShown, setUtilitiesShown] = useState(\n    isLargeOrAbove && !defaultCollapsedUtilities\n  );\n  const initialUserUtilState = defaultCollapsedUtilities ? 'hidden' : undefined;\n  const [userUtilState, setUserUtilState] = useState<undefined | 'shown' | 'hidden'>(\n    initialUserUtilState\n  );\n  const [summaryPanelCollapsed, setSummaryPanelCollapsed] = useState(false);\n\n  const hasSideBySideColumns = isMediumOrAbove;\n  const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n    elements: []\n  });\n\n  const getOffsets = () => {\n    const appshellHeaderHeight = headerEl?.offsetHeight || 0;\n\n    const summaryHeight =\n      !isMediumOrAbove || (persistentUtility && !isExtraLargeOrAbove) || summaryPanelCollapsed\n        ? caseViewSummaryRef?.current?.offsetHeight || 0\n        : 0;\n\n    return {\n      sticky: appshellHeaderHeight + summaryHeight,\n      summary: summaryHeight\n    };\n  };\n\n  const [offsets, setOffsets] = useState(getOffsets);\n\n  useScrollStick(\n    hasSideBySideColumns ? { ...scrollStickOptions.current, offset: offsets.sticky } : undefined\n  );\n\n  const toggleUtilities = useCallback((e: MouseEvent | KeyboardEvent) => {\n    if (e.type === 'keydown' && (e as KeyboardEvent).key !== 'Enter') {\n      return;\n    }\n\n    setUtilitiesShown(shown => {\n      setUserUtilState(shown ? 'hidden' : 'shown');\n      return !shown;\n    });\n  }, []);\n\n  useLayoutEffect(() => {\n    setOffsets(getOffsets());\n  }, [isExtraLargeOrAbove, isLargeOrAbove, isMediumOrAbove, headerEl, summaryPanelCollapsed]);\n\n  useEffect(() => {\n    if (isLargeOrAbove) {\n      setUtilitiesShown(userUtilState !== 'hidden');\n    } else {\n      setUtilitiesShown(false);\n    }\n  }, [isLargeOrAbove]);\n\n  useEffect(() => {\n    if (\n      isMediumOrAbove &&\n      !summaryPanelCollapsed &&\n      !persistentUtility &&\n      (currentTabId === summaryTabId || currentTabId === utilitiesTabId)\n    ) {\n      onTabClick(tabItemsProp[0]?.id);\n    }\n  }, [\n    isMediumOrAbove,\n    onTabClick,\n    currentTabId,\n    summaryTabId,\n    utilitiesTabId,\n    summaryPanelCollapsed\n  ]);\n\n  useEffect(() => {\n    if ((isMediumOrAbove && !isLargeOrAbove && utilities) || persistentUtility)\n      setUtilitiesShown(false);\n  }, [isMediumOrAbove, utilities]);\n\n  useEffect(() => {\n    if (persistentUtility && currentTabId === persistentUtilityTabId) onTabClick(summaryTabId);\n  }, [persistentUtility]);\n\n  const tabItems: TabsProps['tabs'] = useMemo(() => {\n    const summaryTab = { id: summaryTabId, name: 'Summary' };\n    if (isMediumOrAbove)\n      return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)\n        ? [summaryTab, ...tabItemsProp]\n        : tabItemsProp;\n\n    const utilityTabs = [];\n\n    if (utilities) utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });\n    if (persistentUtility && !isMediumOrAbove)\n      utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n\n    return [summaryTab, ...tabItemsProp, ...utilityTabs];\n  }, [\n    isMediumOrAbove,\n    isExtraLargeOrAbove,\n    summaryTabId,\n    utilitiesTabId,\n    persistentUtilityTabId,\n    utilities,\n    persistentUtility,\n    tabItemsProp,\n    summaryPanelCollapsed\n  ]);\n\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  const tabContent = useMemo(() => {\n    const summaryTabContent = { id: summaryTabId, content: <Card>{summary}</Card> };\n    if (isMediumOrAbove)\n      return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)\n        ? [summaryTabContent, ...tabContentProp]\n        : tabContentProp;\n\n    const utilityTabs = [];\n    if (utilities)\n      utilityTabs.push({\n        id: utilitiesTabId,\n        content: <Flex container={{ direction: 'column', gap: 2 }}>{utilities}</Flex>\n      });\n    if (persistentUtility)\n      utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n    return [summaryTabContent, ...tabContentProp, ...utilityTabs];\n  }, [\n    currentTabId,\n    tabContentProp,\n    summary,\n    summaryTabId,\n    utilities,\n    utilitiesTabId,\n    isMediumOrAbove,\n    isExtraLargeOrAbove\n  ]);\n\n  const direction = useDirection();\n\n  const utilitiesIcon = utilitiesShown\n    ? `move-${direction.end}-solid`\n    : `move-${direction.start}-solid`;\n\n  let caseViewGridContainer = {\n    cols: 'minmax(0, 1fr)',\n    colGap: 0,\n    rows: 'minmax(0, max-content) auto',\n    areas: '\"case-nav\" \"content\"'\n  };\n  let fixedSummaryWidth = '100%';\n\n  if (!forceMobile && !persistentUtility && !summaryPanelCollapsed) {\n    fixedSummaryWidth = isLargeOrAbove ? '25rem' : '22rem';\n    if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav content utilities\"'\n      };\n    }\n  } else if (summaryPanelCollapsed) {\n    if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: 'minmax(0, 1fr) minmax(0, max-content)',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav case-nav\" \"content utilities\"'\n      };\n    }\n  } else if (persistentUtility) {\n    if (isExtraLargeOrAbove) {\n      fixedSummaryWidth = '25rem';\n      caseViewGridContainer = {\n        cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav content persistentUtility utilities\"'\n      };\n    } else if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav case-nav case-nav\" \"content persistentUtility utilities\"'\n      };\n    }\n  }\n\n  const animateSummaryPanel = (type: 'open' | 'close') => {\n    if (type === 'close') {\n      const animation = [{ width: fixedSummaryWidth }, { width: 0 }];\n      caseViewSummaryContainerRef.current?.animate(animation, 250);\n    } else {\n      const animation = [{ width: 0 }, { width: isLargeOrAbove ? '25rem' : '22rem' }];\n      caseViewSummaryContainerRef.current?.animate(animation, 250);\n    }\n  };\n\n  return (\n    <Grid\n      as={StyledCaseView}\n      stickyOffset={offsets.sticky}\n      ref={caseViewRef}\n      container={caseViewGridContainer}\n      item={{ area: 'caseView' }}\n      forceMobile={forceMobile}\n      isMediumOrAbove={isMediumOrAbove}\n      {...restProps}\n    >\n      <Grid\n        as={StyledSummaryRegion}\n        item={{ area: 'case-nav' }}\n        forceMobile={forceMobile}\n        desktop={\n          isMediumOrAbove && (!persistentUtility || isExtraLargeOrAbove) && !summaryPanelCollapsed\n        }\n        isLargeOrAbove={isLargeOrAbove}\n        ref={caseViewSummaryContainerRef}\n        style={\n          ['collapsing', 'expanding'].includes(summaryAnimationState)\n            ? {\n                overflow: 'hidden'\n              }\n            : undefined\n        }\n      >\n        <CaseSummary\n          ref={caseViewSummaryRef}\n          headerRef={caseSummaryHeaderRef}\n          caseId={caseId}\n          heading={heading}\n          caseLink={caseLink}\n          icon={icon}\n          followed={followed}\n          onFollowedChange={onFollowedChange}\n          parentCases={parentCases}\n          summary={summary}\n          actions={actions}\n          onEdit={onEdit}\n          tabs={{\n            items: tabItems,\n            onClick: onTabClick,\n            currentTabId\n          }}\n          forceMobile={forceMobile}\n          desktop={\n            ((isMediumOrAbove && !persistentUtility) || isExtraLargeOrAbove) &&\n            !summaryPanelCollapsed\n          }\n          fixedWidth={isMediumOrAbove ? fixedSummaryWidth : undefined}\n          collapsible={isMediumOrAbove && !persistentUtility}\n          collapsed={summaryPanelCollapsed}\n          onBeforeCollapse={() => {\n            animateSummaryPanel('close');\n          }}\n          onAfterCollapse={() => setSummaryPanelCollapsed(true)}\n          onBeforeExpand={() => {\n            animateSummaryPanel('open');\n            setSummaryPanelCollapsed(false);\n          }}\n          onAnimationStateChange={setSummaryAnimationState}\n        />\n      </Grid>\n\n      <Flex\n        container={{\n          direction: 'column',\n          alignContent: 'start',\n          rowGap: 2\n        }}\n        as={StyledCaseViewContent}\n        forceMobile={forceMobile}\n        isMediumOrAbove={isMediumOrAbove}\n        persistentUtility={Boolean(persistentUtility)}\n        style={{\n          transform: ['collapsing', 'expanding'].includes(summaryAnimationState)\n            ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `\n            : undefined,\n          marginInlineStart:\n            (summaryPanelCollapsed && isMediumOrAbove) ||\n            (persistentUtility && !isExtraLargeOrAbove)\n              ? '1rem'\n              : 0\n        }}\n      >\n        {banners && <div>{banners}</div>}\n        {stages && <div>{stages}</div>}\n        {tasks && <div>{tasks}</div>}\n        {(!isMediumOrAbove ||\n          (persistentUtility && !isExtraLargeOrAbove) ||\n          summaryPanelCollapsed) && (\n          <Tabs tabs={tabItems} onTabClick={onTabClick} currentTabId={currentTabId} />\n        )}\n        <StyledTabContent ref={setTabContentEl}>\n          {tabContent?.map(({ id, content }) => (\n            <TabPanel currentTabId={currentTabId} tabId={id} key={id}>\n              {content}\n            </TabPanel>\n          ))}\n        </StyledTabContent>\n      </Flex>\n\n      {persistentUtility && isMediumOrAbove && (\n        <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }}>\n          {persistentUtility.content}\n        </Grid>\n      )}\n      {!isLargeOrAbove && (\n        <Drawer\n          as={StyledCaseDrawer}\n          open={utilitiesShown && isMediumOrAbove}\n          position='fixed'\n          placement={direction.end}\n          shadow\n          nullWhenClosed\n          hasPersistentUtility={!!persistentUtility}\n        >\n          <Flex as={StyledCaseDrawerContent} container={{ direction: 'column', gap: 2 }}>\n            <Flex container={{ justify: 'end' }}>\n              <Button\n                variant='simple'\n                icon\n                onClick={toggleUtilities}\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      {utilities && isMediumOrAbove && (\n        <Grid\n          ref={(el: HTMLDivElement) => {\n            if (el) (scrollStickOptions.current?.elements).push(el);\n          }}\n          as={StyledCaseViewUtilities}\n          container={{\n            cols: 'minmax(0, 1fr)',\n            rowGap: 2\n          }}\n          item={{\n            area: 'utilities'\n          }}\n          utilitiesShown={utilitiesShown && isLargeOrAbove}\n          style={\n            ['collapsing', 'expanding'].includes(summaryAnimationState)\n              ? {\n                  transform: `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `\n                }\n              : undefined\n          }\n        >\n          <Flex container={{ justify: utilitiesShown ? 'end' : 'center' }}>\n            <Button\n              variant='simple'\n              icon\n              onClick={toggleUtilities}\n              as={StyledUtilToggle}\n              label={t(utilitiesShown ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n            >\n              <Icon name={utilitiesIcon} />\n            </Button>\n          </Flex>\n          <Flex\n            container={\n              utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : undefined\n            }\n            hidden={!utilitiesShown || !isLargeOrAbove}\n          >\n            {utilities}\n          </Flex>\n\n          {(!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (\n            <UtilitiesSummary\n              items={utilitiesSummaryItems || []}\n              onClick={toggleUtilities}\n              onKeyDown={toggleUtilities}\n            />\n          )}\n        </Grid>\n      )}\n    </Grid>\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 {\n  ReactNode,\n  FC,\n  MouseEvent,\n  KeyboardEvent,\n  useContext,\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useRef,\n  useLayoutEffect\n} 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} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport AppShellContext from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';\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, { CaseSummaryProps } from '../CaseSummary';\n\nimport UtilitiesSummary, { UtilitiesSummaryProps } from './UtilitiesSummary';\nimport {\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledTabContent,\n  StyledPersistentUtility,\n  StyledSummaryRegion,\n  StyledCaseViewUtilities,\n  StyledUtilToggle\n} from './CaseView.styles';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nexport interface CaseViewProps extends CaseSummaryProps {\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n  /** A region that is used to hold Utility components for example SummaryList. */\n  utilities?: ReactNode;\n  /** The utilities summary array will be used to render the minimized the utilities card. */\n  utilitiesSummaryItems?: UtilitiesSummaryProps['items'];\n  /** Collapses the utilities by default on load */\n  defaultCollapsedUtilities?: boolean;\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n}\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = (props: CaseViewProps) => {\n  const {\n    caseId,\n    parentCases,\n    heading,\n    caseLink,\n    icon,\n    followed,\n    onFollowedChange,\n    summary,\n    tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },\n    stages,\n    tasks,\n    tabContent: tabContentProp = [],\n    utilities,\n    utilitiesSummaryItems,\n    defaultCollapsedUtilities = false,\n    actions,\n    onEdit,\n    banners,\n    persistentUtility,\n    forceMobile,\n    ...restProps\n  } = props;\n  const t = useI18n();\n  const caseViewRef = useRef<HTMLDivElement>(null);\n  const caseViewSummaryRef: CaseSummaryProps['ref'] = useRef(null);\n  const caseSummaryHeaderRef = useRef<HTMLDivElement>(null);\n  const caseViewSummaryContainerRef = useRef<HTMLDivElement>(null);\n  const [tabContentEl, setTabContentEl] = useElement<HTMLElement>(null);\n  let isExtraLargeOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });\n  let isLargeOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n  let isMediumOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n  if (forceMobile) {\n    isExtraLargeOrAbove = false;\n    isLargeOrAbove = false;\n    isMediumOrAbove = false;\n  }\n\n  const { headerEl } = useContext(AppShellContext);\n\n  const [summaryAnimationState, setSummaryAnimationState] = useState('expanded');\n\n  const summaryTabId = `summary-${caseId}`;\n  const utilitiesTabId = `utilities-${caseId}`;\n  const persistentUtilityTabId = `persistent-utility-${caseId}`;\n  const [utilitiesShown, setUtilitiesShown] = useState(\n    isLargeOrAbove && !defaultCollapsedUtilities\n  );\n  const initialUserUtilState = defaultCollapsedUtilities ? 'hidden' : undefined;\n  const [userUtilState, setUserUtilState] = useState<undefined | 'shown' | 'hidden'>(\n    initialUserUtilState\n  );\n  const [summaryPanelCollapsed, setSummaryPanelCollapsed] = useState(false);\n\n  const hasSideBySideColumns = isMediumOrAbove;\n  const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n    elements: []\n  });\n\n  const getOffsets = () => {\n    const appshellHeaderHeight = headerEl?.offsetHeight || 0;\n\n    const summaryHeight =\n      !isMediumOrAbove || (persistentUtility && !isExtraLargeOrAbove) || summaryPanelCollapsed\n        ? caseViewSummaryRef?.current?.offsetHeight || 0\n        : 0;\n\n    return {\n      sticky: appshellHeaderHeight + summaryHeight,\n      summary: summaryHeight\n    };\n  };\n\n  const [offsets, setOffsets] = useState(getOffsets);\n\n  useScrollStick(\n    hasSideBySideColumns ? { ...scrollStickOptions.current, offset: offsets.sticky } : undefined\n  );\n\n  const toggleUtilities = useCallback((e: MouseEvent | KeyboardEvent) => {\n    if (e.type === 'keydown' && (e as KeyboardEvent).key !== 'Enter') {\n      return;\n    }\n\n    setUtilitiesShown(shown => {\n      setUserUtilState(shown ? 'hidden' : 'shown');\n      return !shown;\n    });\n  }, []);\n\n  useLayoutEffect(() => {\n    setOffsets(getOffsets());\n  }, [isExtraLargeOrAbove, isLargeOrAbove, isMediumOrAbove, headerEl, summaryPanelCollapsed]);\n\n  useEffect(() => {\n    if (isLargeOrAbove) {\n      setUtilitiesShown(userUtilState !== 'hidden');\n    } else {\n      setUtilitiesShown(false);\n    }\n  }, [isLargeOrAbove]);\n\n  useEffect(() => {\n    if (\n      isMediumOrAbove &&\n      !summaryPanelCollapsed &&\n      !persistentUtility &&\n      (currentTabId === summaryTabId || currentTabId === utilitiesTabId)\n    ) {\n      onTabClick(tabItemsProp[0]?.id);\n    }\n  }, [\n    isMediumOrAbove,\n    onTabClick,\n    currentTabId,\n    summaryTabId,\n    utilitiesTabId,\n    summaryPanelCollapsed\n  ]);\n\n  useEffect(() => {\n    if ((isMediumOrAbove && !isLargeOrAbove && utilities) || persistentUtility)\n      setUtilitiesShown(false);\n  }, [isMediumOrAbove, utilities]);\n\n  useEffect(() => {\n    if (persistentUtility && currentTabId === persistentUtilityTabId) onTabClick(summaryTabId);\n  }, [persistentUtility]);\n\n  const tabItems: TabsProps['tabs'] = useMemo(() => {\n    const summaryTab = { id: summaryTabId, name: 'Summary' };\n    if (isMediumOrAbove)\n      return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)\n        ? [summaryTab, ...tabItemsProp]\n        : tabItemsProp;\n\n    const utilityTabs = [];\n\n    if (utilities) utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });\n    if (persistentUtility && !isMediumOrAbove)\n      utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n\n    return [summaryTab, ...tabItemsProp, ...utilityTabs];\n  }, [\n    isMediumOrAbove,\n    isExtraLargeOrAbove,\n    summaryTabId,\n    utilitiesTabId,\n    persistentUtilityTabId,\n    utilities,\n    persistentUtility,\n    tabItemsProp,\n    summaryPanelCollapsed\n  ]);\n\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  const tabContent = useMemo(() => {\n    const summaryTabContent = { id: summaryTabId, content: <Card>{summary}</Card> };\n    if (isMediumOrAbove)\n      return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)\n        ? [summaryTabContent, ...tabContentProp]\n        : tabContentProp;\n\n    const utilityTabs = [];\n    if (utilities)\n      utilityTabs.push({\n        id: utilitiesTabId,\n        content: <Flex container={{ direction: 'column', gap: 2 }}>{utilities}</Flex>\n      });\n    if (persistentUtility)\n      utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n    return [summaryTabContent, ...tabContentProp, ...utilityTabs];\n  }, [\n    currentTabId,\n    tabContentProp,\n    summary,\n    summaryTabId,\n    utilities,\n    utilitiesTabId,\n    isMediumOrAbove,\n    isExtraLargeOrAbove\n  ]);\n\n  const direction = useDirection();\n\n  const utilitiesIcon = utilitiesShown\n    ? `move-${direction.end}-solid`\n    : `move-${direction.start}-solid`;\n\n  let caseViewGridContainer = {\n    cols: 'minmax(0, 1fr)',\n    colGap: 0,\n    rows: 'minmax(0, max-content) auto',\n    areas: '\"case-nav\" \"content\"'\n  };\n  let fixedSummaryWidth = '100%';\n\n  if (!forceMobile && !persistentUtility && !summaryPanelCollapsed) {\n    fixedSummaryWidth = isLargeOrAbove ? '25rem' : '22rem';\n    if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav content utilities\"'\n      };\n    }\n  } else if (summaryPanelCollapsed) {\n    if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: 'minmax(0, 1fr) minmax(0, max-content)',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav case-nav\" \"content utilities\"'\n      };\n    }\n  } else if (persistentUtility) {\n    if (isExtraLargeOrAbove) {\n      fixedSummaryWidth = '25rem';\n      caseViewGridContainer = {\n        cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav content persistentUtility utilities\"'\n      };\n    } else if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav case-nav case-nav\" \"content persistentUtility utilities\"'\n      };\n    }\n  }\n\n  const animateSummaryPanel = (type: 'open' | 'close') => {\n    if (type === 'close') {\n      const animation = [{ width: fixedSummaryWidth }, { width: 0 }];\n      caseViewSummaryContainerRef.current?.animate(animation, 250);\n    } else {\n      const animation = [{ width: 0 }, { width: isLargeOrAbove ? '25rem' : '22rem' }];\n      caseViewSummaryContainerRef.current?.animate(animation, 250);\n    }\n  };\n\n  return (\n    <Grid\n      as={StyledCaseView}\n      stickyOffset={offsets.sticky}\n      ref={caseViewRef}\n      container={caseViewGridContainer}\n      item={{ area: 'caseView' }}\n      forceMobile={forceMobile}\n      isMediumOrAbove={isMediumOrAbove}\n      {...restProps}\n    >\n      <Grid\n        as={StyledSummaryRegion}\n        item={{ area: 'case-nav' }}\n        forceMobile={forceMobile}\n        desktop={\n          isMediumOrAbove && (!persistentUtility || isExtraLargeOrAbove) && !summaryPanelCollapsed\n        }\n        isLargeOrAbove={isLargeOrAbove}\n        ref={caseViewSummaryContainerRef}\n        style={\n          ['collapsing', 'expanding'].includes(summaryAnimationState)\n            ? {\n                overflow: 'hidden'\n              }\n            : undefined\n        }\n      >\n        <CaseSummary\n          ref={caseViewSummaryRef}\n          headerRef={caseSummaryHeaderRef}\n          caseId={caseId}\n          heading={heading}\n          caseLink={caseLink}\n          icon={icon}\n          followed={followed}\n          onFollowedChange={onFollowedChange}\n          parentCases={parentCases}\n          summary={summary}\n          actions={actions}\n          onEdit={onEdit}\n          tabs={{\n            items: tabItems,\n            onClick: onTabClick,\n            currentTabId\n          }}\n          forceMobile={forceMobile}\n          desktop={\n            ((isMediumOrAbove && !persistentUtility) || isExtraLargeOrAbove) &&\n            !summaryPanelCollapsed\n          }\n          fixedWidth={isMediumOrAbove ? fixedSummaryWidth : undefined}\n          collapsible={isMediumOrAbove && !persistentUtility}\n          collapsed={summaryPanelCollapsed}\n          onBeforeCollapse={() => {\n            animateSummaryPanel('close');\n          }}\n          onAfterCollapse={() => setSummaryPanelCollapsed(true)}\n          onBeforeExpand={() => {\n            animateSummaryPanel('open');\n            setSummaryPanelCollapsed(false);\n          }}\n          onAnimationStateChange={setSummaryAnimationState}\n        />\n      </Grid>\n\n      <Flex\n        container={{\n          direction: 'column',\n          alignContent: 'start',\n          rowGap: 2\n        }}\n        as={StyledCaseViewContent}\n        forceMobile={forceMobile}\n        isMediumOrAbove={isMediumOrAbove}\n        persistentUtility={Boolean(persistentUtility)}\n        style={{\n          transform: ['collapsing', 'expanding'].includes(summaryAnimationState)\n            ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `\n            : undefined,\n          marginInlineStart:\n            (summaryPanelCollapsed && isMediumOrAbove) ||\n            (persistentUtility && !isExtraLargeOrAbove)\n              ? '1rem'\n              : 0\n        }}\n      >\n        {banners && <div>{banners}</div>}\n        {stages && <div>{stages}</div>}\n        {tasks && <div>{tasks}</div>}\n        {(!isMediumOrAbove ||\n          (persistentUtility && !isExtraLargeOrAbove) ||\n          summaryPanelCollapsed) && (\n          <Tabs tabs={tabItems} onTabClick={onTabClick} currentTabId={currentTabId} />\n        )}\n        <StyledTabContent ref={setTabContentEl}>\n          {tabContent?.map(({ id, content }) => (\n            <TabPanel currentTabId={currentTabId} tabId={id} key={id}>\n              {content}\n            </TabPanel>\n          ))}\n        </StyledTabContent>\n      </Flex>\n\n      {persistentUtility && isMediumOrAbove && (\n        <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }}>\n          {persistentUtility.content}\n        </Grid>\n      )}\n      {!isLargeOrAbove && (\n        <Drawer\n          as={StyledCaseDrawer}\n          open={utilitiesShown && isMediumOrAbove}\n          position='fixed'\n          placement={direction.end}\n          shadow\n          nullWhenClosed\n          hasPersistentUtility={!!persistentUtility}\n        >\n          <Flex as={StyledCaseDrawerContent} container={{ direction: 'column', gap: 2 }}>\n            <Flex container={{ justify: 'end' }}>\n              <Button\n                variant='simple'\n                icon\n                onClick={toggleUtilities}\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      {utilities && isMediumOrAbove && (\n        <Grid\n          ref={(el: HTMLDivElement) => {\n            if (el) (scrollStickOptions.current?.elements).push(el);\n          }}\n          as={StyledCaseViewUtilities}\n          container={{\n            cols: 'minmax(0, 1fr)',\n            rowGap: 2\n          }}\n          item={{\n            area: 'utilities'\n          }}\n          utilitiesShown={utilitiesShown && isLargeOrAbove}\n          style={\n            ['collapsing', 'expanding'].includes(summaryAnimationState)\n              ? {\n                  transform: `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `\n                }\n              : undefined\n          }\n        >\n          <Flex container={{ justify: utilitiesShown ? 'end' : 'center' }}>\n            <Button\n              variant='simple'\n              icon\n              onClick={toggleUtilities}\n              as={StyledUtilToggle}\n              label={t(utilitiesShown ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n            >\n              <Icon name={utilitiesIcon} />\n            </Button>\n          </Flex>\n          <Flex\n            container={\n              utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : undefined\n            }\n            hidden={!utilitiesShown || !isLargeOrAbove}\n          >\n            {utilities}\n          </Flex>\n\n          {(!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (\n            <UtilitiesSummary\n              items={utilitiesSummaryItems || []}\n              onClick={toggleUtilities}\n              onKeyDown={toggleUtilities}\n            />\n          )}\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport default CaseView;\n"]}

package/lib/components/CaseView/MobileCaseView.js

@@ -19,7 +19,7 @@ StyledMobileCaseViewHeader.defaultProps = defaultThemeProp;
 /** @deprecated */
 const MobileCaseView = (props) => {
     const { tabs, tabContent, title, ...restProps } = props;
-    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledMobileCaseView, ...restProps, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { shrink: 0 }, as: StyledMobileCaseViewHeader, children: [_jsx(Text, { as: 'h1', children: title }, void 0), _jsx(Tabs, { ...tabs, type: 'horizontal', inverted: true }, void 0)] }, void 0), tabContent] }, void 0));
+    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledMobileCaseView, ...restProps, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { shrink: 0 }, as: StyledMobileCaseViewHeader, children: [_jsx(Text, { as: 'h1', children: title }), _jsx(Tabs, { ...tabs, type: 'horizontal', inverted: true })] }), tabContent] }));
 };
 export default MobileCaseView;
 //# sourceMappingURL=MobileCaseView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MobileCaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,IAAI,EAEJ,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAA;WAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;sBAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;IAE/D,UAAU;eACC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE/C,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrD,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,kBAAkB;AAClB,MAAM,cAAc,GAA2C,CAAC,KAA0B,EAAE,EAAE;IAC5F,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,KAAM,SAAS,aAC/E,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,YAAE,KAAK,WAAQ,EAC5B,KAAC,IAAI,OAAK,IAAI,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,iBAAG,YACxC,EACN,UAAU,YACN,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Flex,\n  Tabs,\n  TabsProps,\n  Text,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport { StyledText } from '@pega/cosmos-react-core/lib/components/Text/Text';\n\nexport interface MobileCaseViewProps {\n  title: string;\n  tabs: TabsProps;\n  tabContent: ReactNode;\n}\n\nexport const StyledMobileCaseView = styled.div`\n  min-height: 100vh;\n  background-color: #e9eef3;\n`;\n\nexport const StyledMobileCaseViewHeader = styled.header`\n  color: ${props => props.theme.base.palette.light};\n  background-color: ${props => props.theme.base.palette.interactive};\n\n  ${StyledText} {\n    padding: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledMobileCaseView.defaultProps = defaultThemeProp;\nStyledMobileCaseViewHeader.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst MobileCaseView: FC<ForwardProps & MobileCaseViewProps> = (props: MobileCaseViewProps) => {\n  const { tabs, tabContent, title, ...restProps } = props;\n\n  return (\n    <Flex container={{ direction: 'column' }} as={StyledMobileCaseView} {...restProps}>\n      <Flex\n        container={{ direction: 'column' }}\n        item={{ shrink: 0 }}\n        as={StyledMobileCaseViewHeader}\n      >\n        <Text as='h1'>{title}</Text>\n        <Tabs {...tabs} type='horizontal' inverted />\n      </Flex>\n      {tabContent}\n    </Flex>\n  );\n};\n\nexport default MobileCaseView;\n"]}
+{"version":3,"file":"MobileCaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,IAAI,EAEJ,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAA;WAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;sBAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;IAE/D,UAAU;eACC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE/C,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrD,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,kBAAkB;AAClB,MAAM,cAAc,GAA2C,CAAC,KAA0B,EAAE,EAAE;IAC5F,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,KAAM,SAAS,aAC/E,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,YAAE,KAAK,GAAQ,EAC5B,KAAC,IAAI,OAAK,IAAI,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,SAAG,IACxC,EACN,UAAU,IACN,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Flex,\n  Tabs,\n  TabsProps,\n  Text,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport { StyledText } from '@pega/cosmos-react-core/lib/components/Text/Text';\n\nexport interface MobileCaseViewProps {\n  title: string;\n  tabs: TabsProps;\n  tabContent: ReactNode;\n}\n\nexport const StyledMobileCaseView = styled.div`\n  min-height: 100vh;\n  background-color: #e9eef3;\n`;\n\nexport const StyledMobileCaseViewHeader = styled.header`\n  color: ${props => props.theme.base.palette.light};\n  background-color: ${props => props.theme.base.palette.interactive};\n\n  ${StyledText} {\n    padding: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledMobileCaseView.defaultProps = defaultThemeProp;\nStyledMobileCaseViewHeader.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst MobileCaseView: FC<ForwardProps & MobileCaseViewProps> = (props: MobileCaseViewProps) => {\n  const { tabs, tabContent, title, ...restProps } = props;\n\n  return (\n    <Flex container={{ direction: 'column' }} as={StyledMobileCaseView} {...restProps}>\n      <Flex\n        container={{ direction: 'column' }}\n        item={{ shrink: 0 }}\n        as={StyledMobileCaseViewHeader}\n      >\n        <Text as='h1'>{title}</Text>\n        <Tabs {...tabs} type='horizontal' inverted />\n      </Flex>\n      {tabContent}\n    </Flex>\n  );\n};\n\nexport default MobileCaseView;\n"]}