npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.12.1 → 2.0.0-dev.14.2 - Mend

@pega/cosmos-react-work 2.0.0-dev.12.1 → 2.0.0-dev.14.2

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

Files changed (90) hide show

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

@@ -94,7 +94,7 @@ const CaseHeader = forwardRef(({ caseId, heading, caseLink = { href: '' }, paren
             visual: action.icon ? _jsx(Icon, { name: action.icon }, void 0) : null
         };
     });
-    return (_jsxs(Flex, Object.assign({}, restProps, { as: StyledCaseHeader, container: { gap: 2, alignItems: 'center' }, ref: ref }, { children: [icon && (_jsx(Flex, Object.assign({ container: true, item: { shrink: 0, alignSelf: 'start' }, as: StyledCaseIconWrap }, { children: icon }), void 0)), _jsxs(Flex, Object.assign({ as: StyledCaseHeaderText, container: { direction: 'column-reverse' }, item: { grow: 1, shrink: 0, basis: '0' } }, { children: [_jsx(Text, Object.assign({ variant: 'h1' }, { children: href ? (_jsx(Link, Object.assign({}, 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, Object.assign({ 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, Object.assign({}, restProps, { as: StyledCaseHeader, container: { gap: 2, alignItems: 'center' }, ref: ref }, { children: [icon && (_jsx(Flex, Object.assign({ container: true, item: { shrink: 0, alignSelf: 'start' }, as: StyledCaseIconWrap }, { children: icon }), void 0)), _jsxs(Flex, Object.assign({ as: StyledCaseHeaderText, container: { direction: 'column' }, item: { grow: 1, shrink: 0, basis: '0' } }, { children: [_jsx(Text, Object.assign({ variant: 'h1' }, { children: href ? (_jsx(Link, Object.assign({}, 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, Object.assign({ 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: {
                             items: followed !== undefined
                                 ? [
                                     {

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

	@@ -1 +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 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} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nexport interface CaseHeaderProps {\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: 'center' }}\n ref={ref}\n >\n {icon && (\n <Flex container item={{ shrink: 0, alignSelf: 'start' }} as={StyledCaseIconWrap}>\n {icon}\n </Flex>\n )}\n <Flex\n as={StyledCaseHeaderText}\n container={{ direction: 'column-reverse' }}\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"]}
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 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} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nexport interface CaseHeaderProps {\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: 'center' }}\n ref={ref}\n >\n {icon && (\n <Flex container item={{ shrink: 0, alignSelf: 'start' }} 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.js CHANGED Viewed

@@ -31,20 +31,20 @@ const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ caseSummaryEl, theme })
       z-index: calc(${theme.base['z-index'].drawer} + 500);
       ${StyledCaseView} {
-        height: calc(100vh - ${theme.base.spacing} - ${theme.base.sizes['touch-mouse']});
+        height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});
         @media (pointer: coarse) {
-          height: calc(100vh - ${theme.base.spacing} - ${theme.base.sizes['touch-finger']});
+          height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});
         }
       }
       ${StyledCaseViewContent} {
         overflow-y: auto;
         margin-top: ${`${offsetHeight}px`};
-        margin-bottom: calc(${theme.base.sizes['touch-mouse']} + ${theme.base.spacing});
+        margin-bottom: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});
         @media (pointer: coarse) {
-          margin-bottom: calc(${theme.base.sizes['touch-finger']} + ${theme.base.spacing});
+          margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
         }
         & > :last-child {
@@ -54,10 +54,10 @@ const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ caseSummaryEl, theme })
       ${StyledSummaryRegion} {
         position: fixed;
-        top: calc(${theme.base.sizes['touch-mouse']} + ${theme.base.spacing});
+        top: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});
         @media (pointer: coarse) {
-          top: calc(${theme.base.sizes['touch-finger']} + ${theme.base.spacing});
+          top: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
         }
       }
     `;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,QAAQ,EACR,WAAW,EACX,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAEhB,aAAa,EACb,UAAU,EACV,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,QAAQ,EAAE,EAEf,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAmBrB,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;wBACnB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;GAC7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,OAAO,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EAC3C,EACF,EACF,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;IAEhE,OAAO,GAAG,CAAA;0BACY,YAAY;iBACrB,OAAO,aAAa,OAAO;;;iBAG3B,WAAW;;KAEvB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,mBAAmB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAClD,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,MAAM,YAAY,GAAG,aAAa,EAAE,YAAY,IAAI,CAAC,CAAC;IAEtD,OAAO,GAAG,CAAA;;;sBAGQ,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;;QAE1C,cAAc;+BACS,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,~~aAAa~~,CAAC;;;~~iCAGrD~~,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,~~cAAc~~,CAAC;;;;~~QAIjF~~,qBAAqB;;sBAEP,GAAG,YAAY,IAAI;8BACX,KAAK,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,~~aAAa~~,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;;~~gCAGrD~~,KAAK,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,~~cAAc~~,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;;;~~qCAInD~~,KAAK,CAAC,IAAI,CAAC,OAAO;;;;QAI/C,mBAAmB;;oBAEP,KAAK,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,~~aAAa~~,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;;~~sBAGrD~~,KAAK,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,~~cAAc~~,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;;~~KAGzE~~,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAA4B,EAAE,EAAE;IACzE,MAAM,EACJ,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,UAAU,EACV,SAAS,EACT,qBAAqB,EACrB,OAAO,EACP,OAAO,EACP,MAAM,EACN,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,EAAkB,CAAC;IACvE,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,MAAC,MAAM,oBACD,SAAS,IACb,EAAE,EAAE,mBAAmB,EACvB,aAAa,EAAE,aAAa,IAAI,SAAS,EACzC,WAAW,EAAE,IAAI,EACjB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,IAAI,cAAc,EAC5B,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,SAAS,CAAC,GAAG,EACxB,MAAM,QACN,cAAc,uBAEd,KAAC,oBAAoB,cACnB,KAAC,MAAM,kBAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,OAAO,EAAE,YAAY,gBACjD,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,YACd,WACY,EAEvB,KAAC,QAAQ,IACP,WAAW,QACX,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,gBAAgB,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,qBAAqB,EAAE,qBAAqB,EAC5C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,WACd,aACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useCallback,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Drawer,\n Icon,\n Button,\n Flex,\n tryCatch,\n defaultThemeProp,\n ForwardProps,\n useBreakpoint,\n useElement,\n useDirection\n} from '@pega/cosmos-react-core';\n\nimport CaseView, {\n CaseViewProps,\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer,\n StyledSummaryRegion\n} from '../CaseView';\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)<{ caseSummaryEl?: HTMLDivElement }>(\n ({ caseSummaryEl, theme }) => {\n const offsetHeight = caseSummaryEl?.offsetHeight \|\| 0;\n\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~~.sizes~~['~~touch~~-mouse']});\n\n @media (pointer: coarse) {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base~~.sizes~~['~~touch~~-finger']});\n }\n }\n\n ${StyledCaseViewContent} {\n overflow-y: auto;\n margin-top: ${`${offsetHeight}px`};\n margin-bottom: calc(${theme.base~~.sizes~~['~~touch~~-mouse']} + ${theme.base.spacing});\n\n @media (pointer: coarse) {\n margin-bottom: calc(${theme.base~~.sizes~~['~~touch~~-finger']} + ${theme.base.spacing});\n }\n\n & > :last-child {\n padding-bottom: calc(2 * ${theme.base.spacing});\n }\n }\n\n ${StyledSummaryRegion} {\n position: fixed;\n top: calc(${theme.base~~.sizes~~['~~touch~~-mouse']} + ${theme.base.spacing});\n\n @media (pointer: coarse) {\n top: calc(${theme.base~~.sizes~~['~~touch~~-finger']} + ${theme.base.spacing});\n }\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\n const [caseSummaryEl, setCaseSummaryEl] = useElement<HTMLDivElement>();\n const isSmallOrAbove = useBreakpoint('sm');\n const [open, setOpen] = useState(openProp);\n const direction = useDirection();\n\n const closePreview = useCallback(() => {\n setOpen(false);\n }, []);\n\n useEffect(() => {\n setOpen(openProp);\n }, [openProp]);\n\n return (\n <Drawer\n {...restProps}\n as={StyledPreviewDrawer}\n caseSummaryEl={caseSummaryEl ?? undefined}\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={ref}\n open={open && isSmallOrAbove}\n position='fixed'\n placement={direction.end}\n shadow\n nullWhenClosed\n >\n <StyledPreviewActions>\n <Button variant='simple' icon onClick={closePreview}>\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 caseSummaryRef={setCaseSummaryEl}\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"]}
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} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Drawer,\n Icon,\n Button,\n Flex,\n tryCatch,\n defaultThemeProp,\n ForwardProps,\n useBreakpoint,\n useElement,\n useDirection\n} from '@pega/cosmos-react-core';\n\nimport CaseView, {\n CaseViewProps,\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer,\n StyledSummaryRegion\n} from '../CaseView';\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)<{ caseSummaryEl?: HTMLDivElement }>(\n ({ caseSummaryEl, theme }) => {\n const offsetHeight = caseSummaryEl?.offsetHeight \|\| 0;\n\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-top: ${`${offsetHeight}px`};\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 ${StyledSummaryRegion} {\n position: fixed;\n top: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});\n\n @media (pointer: coarse) {\n top: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n }\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\n const [caseSummaryEl, setCaseSummaryEl] = useElement<HTMLDivElement>();\n const isSmallOrAbove = useBreakpoint('sm');\n const [open, setOpen] = useState(openProp);\n const direction = useDirection();\n\n const closePreview = useCallback(() => {\n setOpen(false);\n }, []);\n\n useEffect(() => {\n setOpen(openProp);\n }, [openProp]);\n\n return (\n <Drawer\n {...restProps}\n as={StyledPreviewDrawer}\n caseSummaryEl={caseSummaryEl ?? undefined}\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={ref}\n open={open && isSmallOrAbove}\n position='fixed'\n placement={direction.end}\n shadow\n nullWhenClosed\n >\n <StyledPreviewActions>\n <Button variant='simple' icon onClick={closePreview}>\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 caseSummaryRef={setCaseSummaryEl}\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.d.ts CHANGED Viewed

@@ -29,6 +29,7 @@ declare type AnimationState = 'expanding' | 'expanded' | 'collapsing' | 'collaps
 export declare const StyledCaseSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     fixedWidth?: string | undefined;
 }, never>;
+export declare const StyledCaseSummaryInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const CaseSummary: FunctionComponent<CaseSummaryProps & ForwardProps>;
 export default CaseSummary;
 //# sourceMappingURL=CaseSummary.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EACH,UAAU,EAIX,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,GAAG,EACH,YAAY,EASb,MAAM,yBAAyB,CAAC;AAEjC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,sEAAsE;IACtE,OAAO,EAAE,SAAS,CAAC;IACnB,qFAAqF;IACrF,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACzF,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IAWF,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,2EAA2E;IAC3E,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzD,yDAAyD;IACzD,SAAS,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,aAAK,cAAc,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAE5E,eAAO,MAAM,iBAAiB;;SAkB5B,CAAC;~~AA2CH~~,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CAiKnE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EACH,UAAU,EAIX,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,GAAG,EACH,YAAY,EASb,MAAM,yBAAyB,CAAC;AAEjC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,sEAAsE;IACtE,OAAO,EAAE,SAAS,CAAC;IACnB,qFAAqF;IACrF,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACzF,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IAWF,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,2EAA2E;IAC3E,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzD,yDAAyD;IACzD,SAAS,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,aAAK,cAAc,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAE5E,eAAO,MAAM,iBAAiB;;SAkB5B,CAAC;AAEH,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAsCF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAmKnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -8,7 +8,7 @@ export const StyledCaseSummary = styled.div(({ fixedWidth }) => {
     position: relative;
     width: ${fixedWidth || 'auto'};
     max-width: ${fixedWidth ? 'none' : '100%'};
-    min-height: 100%;
+    height: 100%;
     &:hover {
       &::after {
@@ -22,6 +22,10 @@ export const StyledCaseSummary = styled.div(({ fixedWidth }) => {
     }
   `;
 });
+export const StyledCaseSummaryInfo = styled.div `
+  overflow: auto;
+  flex: 1;
+`;
 const StyledExpandCollapse = styled.div(({ animationState }) => {
     const expandingOrCollapsing = ['expanding', 'collapsing'].includes(animationState);
     return css `
@@ -34,12 +38,7 @@ const StyledExpandCollapseButton = styled(Button)(({ theme, expanded, headerHeig
     border-radius: ${expanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};
     box-shadow: ${theme.base.shadow.high};
     border: none;
-    display: 'flex';
     opacity: ${visible ? '1' : '0'};
-    align-items: center;
-    justify-content: center;
-    min-height: 1.5rem;
-    min-width: 1.5rem;
     position: ${animationState === 'collapsing' ? 'fixed' : 'absolute'};
     inset-inline-start: ${expanded ? 'calc(100% - 0.75rem)' : 0};
     top: calc(calc(${headerHeight}px / 2) - 0.75rem);
@@ -105,7 +104,7 @@ const CaseSummary = forwardRef((props, ref) => {
                             ? expandOrCollapseNoun
                             : undefined, "aria-label": ['expanding', 'collapsing'].includes(animationState)
                             ? expandOrCollapseNoun
-                            : undefined, visible: showExpandCollapse || !collapsed || focusWithin, tabIndex: 0, icon: true, ref: expandCollapseBtnRef }, { children: _jsx(Icon, { name: 'arrow-micro-left' }, void 0) }), void 0), _jsx(ExpandCollapse, Object.assign({ dimension: 'width', min: isMediumOrAbove || !collapsed ? fixedWidth : '100%', max: '100%', collapsed: collapsed, onBeforeExpand: () => {
+                            : undefined, visible: showExpandCollapse || !collapsed || focusWithin, tabIndex: 0, icon: true, compact: true, ref: expandCollapseBtnRef }, { children: _jsx(Icon, { name: 'arrow-micro-left' }, void 0) }), void 0), _jsx(ExpandCollapse, Object.assign({ dimension: 'width', min: isMediumOrAbove || !collapsed ? fixedWidth : '100%', max: '100%', collapsed: collapsed, onBeforeExpand: () => {
                             setAnimStateAndUpdateParent('collapsing');
                             onBeforeCollapse?.();
                         }, onAfterExpand: () => {
@@ -117,7 +116,7 @@ const CaseSummary = forwardRef((props, ref) => {
                         }, onAfterCollapse: () => {
                             setAnimStateAndUpdateParent('expanded');
                             onAfterExpand?.();
-                        }, as: StyledExpandCollapse, animationState: animationState, ref: headerRef }, { children: _jsx(CaseHeader, Object.assign({}, caseHeaderProps), void 0) }), void 0)] }, void 0)) : (_jsx(CaseHeader, Object.assign({}, caseHeaderProps), void 0)), isMediumOrAbove && summary, showTabs && isMediumOrAbove && (_jsx(Tabs, { type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }, void 0))] }), void 0));
+                        }, as: StyledExpandCollapse, animationState: animationState, ref: headerRef }, { children: _jsx(CaseHeader, Object.assign({}, caseHeaderProps), void 0) }), void 0)] }, void 0)) : (_jsx(CaseHeader, Object.assign({}, 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));
 });
 export default CaseSummary;
 //# sourceMappingURL=CaseSummary.js.map

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

	@@ -1 +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 useI18n,\n useFocusWithin,\n Button,\n StyledIcon\n} from '@pega/cosmos-react-core';\n\nimport CaseHeader, { CaseHeaderProps } from '../CaseHeader';\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<{ fixedWidth?: string }>(({ fixedWidth }) => {\n return css`\n position: relative;\n width: ${fixedWidth \|\| 'auto'};\n max-width: ${fixedWidth ? 'none' : '100%'};\n min-height: 100%;\n\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\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.high};\n border: none;\n display: 'flex';\n opacity: ${visible ? '1' : '0'};\n align-items: center;\n justify-content: center;\n min-height: 1.5rem;\n min-width: 1.5rem;\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 [collapsed, setCollapsed] = 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 expandOrCollapseNoun = collapsed ? t('collapse_noun') : t('expand_noun');\n\n return (\n <Flex\n as={StyledCaseSummary}\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={() => setCollapsed(!collapsed)}\n expanded={collapsed}\n headerHeight={collapsedHeight}\n animationState={animationState}\n label={\n ['expanded', 'collapsed'].includes(animationState)\n ? expandOrCollapseNoun\n : undefined\n }\n aria-label={\n ['expanding', 'collapsing'].includes(animationState)\n ? expandOrCollapseNoun\n : undefined\n }\n visible={showExpandCollapse \|\| !collapsed \|\| focusWithin}\n tabIndex={0}\n icon\n ref={expandCollapseBtnRef}\n >\n <Icon name='arrow-micro-left' />\n </StyledExpandCollapseButton>\n <ExpandCollapse\n dimension='width'\n min={isMediumOrAbove \|\| !collapsed ? fixedWidth : '100%'}\n max='100%'\n collapsed={collapsed}\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\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 </Flex>\n );\n }\n);\n\nexport default CaseSummary;\n"]}
1	+ {"version":3,"file":"CaseSummary.js","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMV,QAAQ,EACR,SAAS,EACT,MAAM,EACP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EAGJ,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,cAAc,EACd,MAAM,EACN,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,UAA+B,MAAM,eAAe,CAAC;AAuC5D,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA0B,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;IACtF,OAAO,GAAG,CAAA;;aAEC,UAAU,IAAI,MAAM;iBAChB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;;;;;;;;;;GAa1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG9C,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE;IACrB,MAAM,qBAAqB,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IACnF,OAAO,GAAG,CAAA;kBACI,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU;aACjD,qBAAqB,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;KAC/D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAK9C,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;qBACS,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB;kBAC5C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;eAEzB,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;gBAClB,cAAc,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU;0BAC5C,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;qBAC1C,YAAY;;;MAG3B,UAAU;;;0BAGU,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ;;GAEhD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAA4B,EAAE,EAAE;IACzE,MAAM,EACJ,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,WAAW,EACX,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,IAAI,EACd,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,aAAa,EACb,sBAAsB,EACtB,SAAS,EAAE,oBAAoB,EAC/B,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,oBAAoB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,CAAC,WAAW,IAAI,OAAO,CAAC;IAChD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IACjE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,cAAc,CAAiB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,2BAA2B,GAAG,CAAC,KAAqB,EAAE,EAAE;QAC5D,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,sBAAsB,EAAE,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,kBAAkB,CAAiB,oBAAoB,CAAC,CAAC;IAE3E,MAAM,QAAQ,GAAG,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAEhF,MAAM,eAAe,GAAG;QACtB,OAAO;QACP,MAAM;QACN,eAAe;QACf,MAAM;QACN,WAAW;QACX,OAAO;QACP,QAAQ;QACR,IAAI;QACJ,QAAQ;QACR,gBAAgB;QAChB,KAAK,EAAE;YACL,SAAS,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC;gBAC1E,CAAC,CAAC,GAAG,eAAe,IAAI;gBACxB,CAAC,CAAC,MAAM;SACX;KACF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;YACzC,kBAAkB,CAAC,SAAS,CAAC,OAAO,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IAExC,MAAM,oBAAoB,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAE/E,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,iBAAiB,EACrB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,GAAG,EAAE,cAAc,EACnB,KAAK,EAAE;YACL,SAAS,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC;gBAC7D,CAAC,CAAC,GAAG,eAAe,IAAI;gBACxB,CAAC,CAAC,CAAC;SACN,EACD,YAAY,EAAE,GAAG,EAAE;YACjB,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YACjB,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,IACG,SAAS,eAEZ,WAAW,CAAC,CAAC,CAAC,CACb,8BACE,KAAC,0BAA0B,kBACzB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,EACvC,QAAQ,EAAE,SAAS,EACnB,YAAY,EAAE,eAAe,EAC7B,cAAc,EAAE,cAAc,EAC9B,KAAK,EACH,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC;4BAChD,CAAC,CAAC,oBAAoB;4BACtB,CAAC,CAAC,SAAS,gBAGb,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC;4BAClD,CAAC,CAAC,oBAAoB;4BACtB,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,WAAW,EACxD,QAAQ,EAAE,CAAC,EACX,IAAI,QACJ,OAAO,QACP,GAAG,EAAE,oBAAoB,gBAEzB,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,WAAG,YACL,EAC7B,KAAC,cAAc,kBACb,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,eAAe,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EACxD,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,GAAG,EAAE;4BACnB,2BAA2B,CAAC,YAAY,CAAC,CAAC;4BAC1C,gBAAgB,EAAE,EAAE,CAAC;wBACvB,CAAC,EACD,aAAa,EAAE,GAAG,EAAE;4BAClB,2BAA2B,CAAC,WAAW,CAAC,CAAC;4BACzC,eAAe,EAAE,EAAE,CAAC;wBACtB,CAAC,EACD,gBAAgB,EAAE,GAAG,EAAE;4BACrB,2BAA2B,CAAC,WAAW,CAAC,CAAC;4BACzC,cAAc,EAAE,EAAE,CAAC;wBACrB,CAAC,EACD,eAAe,EAAE,GAAG,EAAE;4BACpB,2BAA2B,CAAC,UAAU,CAAC,CAAC;4BACxC,aAAa,EAAE,EAAE,CAAC;wBACpB,CAAC,EACD,EAAE,EAAE,oBAAoB,EACxB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,SAAS,gBAEd,KAAC,UAAU,oBAAK,eAAe,UAAI,YACpB,YAChB,CACJ,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,oBAAK,eAAe,UAAI,CACpC,EACD,MAAC,qBAAqB,eACnB,eAAe,IAAI,OAAO,EAE1B,QAAQ,IAAI,eAAe,IAAI,CAC9B,KAAC,IAAI,IACH,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,YAAY,EAAE,IAAI,CAAC,YAAY,WAC/B,CACH,YACqB,aACnB,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","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 useI18n,\n useFocusWithin,\n Button,\n StyledIcon\n} from '@pega/cosmos-react-core';\n\nimport CaseHeader, { CaseHeaderProps } from '../CaseHeader';\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<{ fixedWidth?: string }>(({ fixedWidth }) => {\n return css`\n position: relative;\n width: ${fixedWidth \|\| 'auto'};\n max-width: ${fixedWidth ? 'none' : '100%'};\n height: 100%;\n\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\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.high};\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 [collapsed, setCollapsed] = 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 expandOrCollapseNoun = collapsed ? t('collapse_noun') : t('expand_noun');\n\n return (\n <Flex\n as={StyledCaseSummary}\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={() => setCollapsed(!collapsed)}\n expanded={collapsed}\n headerHeight={collapsedHeight}\n animationState={animationState}\n label={\n ['expanded', 'collapsed'].includes(animationState)\n ? expandOrCollapseNoun\n : undefined\n }\n aria-label={\n ['expanding', 'collapsing'].includes(animationState)\n ? expandOrCollapseNoun\n : undefined\n }\n visible={showExpandCollapse \|\| !collapsed \|\| 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 \|\| !collapsed ? fixedWidth : '100%'}\n max='100%'\n collapsed={collapsed}\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/CaseView/CaseView.d.ts CHANGED Viewed

@@ -11,6 +11,8 @@ export interface CaseViewProps extends CaseSummaryProps {
     utilities?: ReactNode;
     /** The utilities summary array will be used to render the minimized the utilities card. */
     utilitiesSummaryItems?: UtilitiesSummaryProps['items'];
+    /** Collapses the utilities by default on load */
+    defaultCollapsedUtilities?: boolean;
     /** A region above the center column to display banners. */
     banners?: ReactNode;
     /** A region to the right reserved for persistent utilities. */
@@ -19,7 +21,10 @@ export interface CaseViewProps extends CaseSummaryProps {
         title: string;
     };
     /** A region within the center column that is controlled by tabs in CaseSummary. */
-    tabContent?: ReactNode;
+    tabContent?: {
+        content: ReactNode;
+        id: string;
+    }[];
 }
 declare const CaseView: FC<CaseViewProps & ForwardProps>;
 export default CaseView;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,EAAE,EAWH,MAAM,OAAO,CAAC;AAEf,OAAO,~~EAQL~~,YAAY,~~EAMb~~,MAAM,yBAAyB,CAAC;AAIjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAa7E,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gFAAgF;IAChF,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,2FAA2F;IAC3F,qBAAqB,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvD,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,mFAAmF;IACnF,UAAU,CAAC,EAAE,SAAS,CAAC;~~CAMxB~~;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,~~CAqY9C~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,EAAE,EAWH,MAAM,OAAO,CAAC;AAEf,OAAO,EASL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAIjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAa7E,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gFAAgF;IAChF,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,2FAA2F;IAC3F,qBAAqB,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvD,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,mFAAmF;IACnF,UAAU,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAMnD;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA6b9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useState, useCallback, useMemo, useRef, useLayoutEffect } from 'react';
-import { Button, Flex, Grid, Icon, TabPanel, useBreakpoint, useScrollStick, Card, Drawer, useI18n, useDirection, useConsolidatedRef } from '@pega/cosmos-react-core';
+import { Button, Flex, Grid, Icon, TabPanel, useBreakpoint, useScrollStick, useElement, Card, Drawer, useI18n, useDirection, useConsolidatedRef } from '@pega/cosmos-react-core';
 import AppShellContext from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';
 import CaseSummary from '../CaseSummary';
 import UtilitiesSummary from './UtilitiesSummary';
 import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledCaseViewContent, StyledPersistentUtility, StyledSummaryRegion, StyledCaseViewUtilities, StyledMobileTabs, StyledUtilToggle } from './CaseView.styles';
 const CaseView = (props) => {
-    const { caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, caseSummaryRef, tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick }, stages, tasks, tabContent: tabContentProp, utilities, utilitiesSummaryItems, actions, onEdit, banners, persistentUtility, forceMobile, ...restProps } = props;
+    const { caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, caseSummaryRef, tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick }, stages, tasks, tabContent: tabContentProp = [], utilities, utilitiesSummaryItems, defaultCollapsedUtilities = false, actions, onEdit, banners, persistentUtility, forceMobile, ...restProps } = props;
     const t = useI18n();
     const caseViewRef = useRef(null);
     const caseViewSummaryRef = useConsolidatedRef(caseSummaryRef);
     const caseSummaryHeaderRef = useRef(null);
     const caseViewSummaryContainerRef = useRef(null);
+    const [tabContentEl, setTabContentEl] = useElement(null);
     let isExtraLargeOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });
     let isLargeOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });
     let isMediumOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });
@@ -36,8 +37,9 @@ const CaseView = (props) => {
     const summaryTabId = `summary-${caseId}`;
     const utilitiesTabId = `utilities-${caseId}`;
     const persistentUtilityTabId = `persistent-utility-${caseId}`;
-    const [utilitiesShown, setUtilitiesShown] = useState(isLargeOrAbove);
-    const [userUtilState, setUserUtilState] = useState();
+    const [utilitiesShown, setUtilitiesShown] = useState(isLargeOrAbove && !defaultCollapsedUtilities);
+    const initialUserUtilState = defaultCollapsedUtilities ? 'hidden' : undefined;
+    const [userUtilState, setUserUtilState] = useState(initialUserUtilState);
     const [summaryPanelCollapsed, setSummaryPanelCollapsed] = useState(false);
     const hasSideBySideColumns = isMediumOrAbove;
     const scrollStickOptions = useRef({
@@ -66,11 +68,19 @@ const CaseView = (props) => {
     }, [isLargeOrAbove]);
     useEffect(() => {
         if (isMediumOrAbove &&
+            !summaryPanelCollapsed &&
             !persistentUtility &&
             (currentTabId === summaryTabId || currentTabId === utilitiesTabId)) {
             onTabClick(tabItemsProp[0]?.id);
         }
-    }, [isMediumOrAbove, onTabClick, currentTabId, summaryTabId, utilitiesTabId]);
+    }, [
+        isMediumOrAbove,
+        onTabClick,
+        currentTabId,
+        summaryTabId,
+        utilitiesTabId,
+        summaryPanelCollapsed
+    ]);
     useEffect(() => {
         if ((isMediumOrAbove && !isLargeOrAbove && utilities) || persistentUtility)
             setUtilitiesShown(false);
@@ -80,18 +90,20 @@ const CaseView = (props) => {
             onTabClick(summaryTabId);
     }, [persistentUtility]);
     const tabItems = useMemo(() => {
+        const summaryTab = { id: summaryTabId, name: 'Summary' };
         if (isMediumOrAbove)
-            return persistentUtility || summaryPanelCollapsed
-                ? [{ id: summaryTabId, name: 'Summary' }, ...tabItemsProp]
+            return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
+                ? [summaryTab, ...tabItemsProp]
                 : tabItemsProp;
         const utilityTabs = [];
         if (utilities)
             utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });
         if (persistentUtility && !isMediumOrAbove)
             utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });
-        return [{ id: summaryTabId, name: 'Summary' }, ...tabItemsProp, ...utilityTabs];
+        return [summaryTab, ...tabItemsProp, ...utilityTabs];
     }, [
         isMediumOrAbove,
+        isExtraLargeOrAbove,
         summaryTabId,
         utilitiesTabId,
         persistentUtilityTabId,
@@ -100,16 +112,43 @@ const CaseView = (props) => {
         tabItemsProp,
         summaryPanelCollapsed
     ]);
-    const tabContent = useMemo(() => {
-        if (currentTabId === summaryTabId)
-            return _jsx(Card, { children: summary }, void 0);
-        if (currentTabId === utilitiesTabId) {
-            return _jsx(Flex, Object.assign({ container: { direction: 'column', gap: 2 } }, { children: utilities }), void 0);
+    useEffect(() => {
+        if (!tabContentEl)
+            return;
+        const scrollPos = window.scrollY;
+        const windowHeight = document.documentElement.clientHeight;
+        const bottomPos = scrollPos + windowHeight * 0.8;
+        const tabContentPos = tabContentEl.offsetTop;
+        if (tabContentPos > bottomPos) {
+            const top = tabContentPos - windowHeight * 0.2;
+            window.scrollTo({ top, behavior: 'smooth' });
         }
-        if (currentTabId === persistentUtilityTabId)
-            return persistentUtility?.content;
-        return tabContentProp;
-    }, [currentTabId, tabContentProp, summary, summaryTabId, utilities, utilitiesTabId]);
+    }, [currentTabId]);
+    const tabContent = useMemo(() => {
+        const summaryTabContent = { id: summaryTabId, content: _jsx(Card, { children: summary }, void 0) };
+        if (isMediumOrAbove)
+            return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
+                ? [summaryTabContent, ...tabContentProp]
+                : tabContentProp;
+        const utilityTabs = [];
+        if (utilities)
+            utilityTabs.push({
+                id: utilitiesTabId,
+                content: _jsx(Flex, Object.assign({ container: { direction: 'column', gap: 2 } }, { children: utilities }), void 0)
+            });
+        if (persistentUtility)
+            utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });
+        return [summaryTabContent, ...tabContentProp, ...utilityTabs];
+    }, [
+        currentTabId,
+        tabContentProp,
+        summary,
+        summaryTabId,
+        utilities,
+        utilitiesTabId,
+        isMediumOrAbove,
+        isExtraLargeOrAbove
+    ]);
     const direction = useDirection();
     const utilitiesIcon = utilitiesShown
         ? `move-${direction.end}-solid`
@@ -192,9 +231,9 @@ const CaseView = (props) => {
                 }, item: { area: 'content' }, as: StyledCaseViewContent, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove, persistentUtility: Boolean(persistentUtility), style: {
                     transform: ['collapsing', 'expanding'].includes(summaryAnimationState)
                         ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
-                        : 'translate(0, 0)',
-                    marginInlineStart: summaryPanelCollapsed ? '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 || persistentUtility || summaryPanelCollapsed) && (_jsx(StyledMobileTabs, { type: 'horizontal', tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId, fullWidth: !isMediumOrAbove }, void 0)), currentTabId ? _jsx(TabPanel, Object.assign({ tabId: currentTabId }, { children: tabContent }), void 0) : tabContent] }), void 0), persistentUtility && isMediumOrAbove && (_jsx(Grid, Object.assign({ as: StyledPersistentUtility, item: { area: 'persistentUtility' } }, { children: persistentUtility.content }), void 0)), !isLargeOrAbove && (_jsx(Drawer, Object.assign({ as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility }, { children: _jsxs(Flex, Object.assign({ as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 } }, { children: [_jsx(Flex, Object.assign({ container: { justify: 'end' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_noun', t('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, Object.assign({ ref: (el) => {
+                        : undefined,
+                    marginInlineStart: summaryPanelCollapsed || (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 || persistentUtility || summaryPanelCollapsed) && (_jsx(StyledMobileTabs, { type: 'horizontal', tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId, fullWidth: !isMediumOrAbove }, void 0)), _jsx("div", Object.assign({ ref: setTabContentEl }, { children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, Object.assign({ currentTabId: currentTabId, tabId: id }, { children: content }), id))) }), void 0)] }), void 0), persistentUtility && isMediumOrAbove && (_jsx(Grid, Object.assign({ as: StyledPersistentUtility, item: { area: 'persistentUtility' } }, { children: persistentUtility.content }), void 0)), !isLargeOrAbove && (_jsx(Drawer, Object.assign({ as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility }, { children: _jsxs(Flex, Object.assign({ as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 } }, { children: [_jsx(Flex, Object.assign({ container: { justify: 'end' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_noun', t('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, Object.assign({ ref: (el) => {
                     if (el)
                         (scrollStickOptions.current?.elements).push(el);
                 }, as: StyledCaseViewUtilities, container: {
@@ -202,11 +241,11 @@ const CaseView = (props) => {
                     rowGap: 2
                 }, item: {
                     area: 'utilities'
-                }, utilitiesShown: utilitiesShown && isLargeOrAbove, style: {
-                    transform: ['collapsing', 'expanding'].includes(summaryAnimationState)
-                        ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
-                        : 'translate(0, 0)'
-                } }, { children: [_jsx(Flex, Object.assign({ container: { justify: utilitiesShown ? 'end' : 'center' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_noun' : 'expand_noun', t('utilities_panel')) }, { children: _jsx(Icon, { name: utilitiesIcon }, void 0) }), void 0) }), void 0), _jsx(Flex, Object.assign({ container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : false, hidden: !utilitiesShown || !isLargeOrAbove }, { children: utilities }), void 0), (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }, void 0))] }), void 0))] }), void 0));
+                }, utilitiesShown: utilitiesShown && isLargeOrAbove, style: ['collapsing', 'expanding'].includes(summaryAnimationState)
+                    ? {
+                        transform: `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
+                    }
+                    : undefined }, { children: [_jsx(Flex, Object.assign({ container: { justify: utilitiesShown ? 'end' : 'center' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_noun' : 'expand_noun', t('utilities_panel')) }, { children: _jsx(Icon, { name: utilitiesIcon }, void 0) }), void 0) }), void 0), _jsx(Flex, Object.assign({ container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : false, hidden: !utilitiesShown || !isLargeOrAbove }, { children: utilities }), void 0), (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }, void 0))] }), void 0))] }), void 0));
 };
 export default CaseView;
 //# sourceMappingURL=CaseView.js.map