npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.12.0 → 2.0.0-dev.14.1 - Mend

@pega/cosmos-react-work 2.0.0-dev.12.0 → 2.0.0-dev.14.1

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,YAAY,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI1F,OAAO,EACL,MAAM,EASN,YAAY,EAMZ,aAAa,EAId,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAMpB,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC;IAC3C,kFAAkF;IAClF,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,qDAAqD;IACrD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,~~4GAa3B~~,CAAC;AA4EH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA8FjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,YAAY,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI1F,OAAO,EACL,MAAM,EASN,YAAY,EAMZ,aAAa,EAId,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAMpB,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC;IAC3C,kFAAkF;IAClF,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,qDAAqD;IACrD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,4GAc3B,CAAC;AA4EH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA8FjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -10,6 +10,7 @@ export const StyledCaseHeader = styled.header(({ theme }) => {
     background-color: ${theme.base.palette['brand-primary']};
     color: ${color};
     padding: calc(2 * ${theme.base.spacing});
+    position: relative;
     ${StyledMenu} {
       color: ${theme.base.palette['foreground-color']};
@@ -93,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\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":";AAAA,OAAO,EAAE,UAAU,EAAyD,MAAM,OAAO,CAAC;AAC1F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEnF,OAAO,EAEL,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,gBAAgB,EAEhB,QAAQ,EACR,iBAAiB,EACjB,IAAI,EACJ,YAAY,EACZ,UAAU,EAEV,MAAM,EACN,UAAU,EACV,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AA8BrF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAEjF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;aAC9C,KAAK;wBACM,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGpC,UAAU;eACD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;iBACpC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,GAAG,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IACnC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;QACpC,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;QACtE,OAAO,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,0BAA0B,CAAC;IAC9E,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,CAAA;kBACM,eAAe;0BACP,YAAY;sBAChB,OAAO;uBACN,OAAO;MACxB,UAAU;4BACY,OAAO;;;GAGhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAA;;;MAGnC,YAAY;;;;kBAIA,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;CAEnE,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;IACjE,MAAM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IACpE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;;;MAGN,iBAAiB;;;;;iBAKN,gBAAgB;qBACZ,QAAQ,CAAC,CAAC;;;;;;;wBAOP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;;;QAInD,aAAa;iBACJ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;QAI/C,UAAU,MAAM,YAAY;eACrB,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,MAAM,EACN,OAAO,EACP,QAAQ,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,EACvB,WAAW,EACX,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAChB,OAAO,GAAG,EAAE,EACZ,MAAM,EACN,GAAG,SAAS,EACqB,EACnC,GAA2B,EAC3B,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,GAAG,QAAQ,CAAC;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAoB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACtD,OAAO;YACL,GAAG,MAAM;YACT,OAAO,EAAE,MAAM,CAAC,IAAI;YACpB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,WAAI,CAAC,CAAC,CAAC,IAAI;SACzD,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,IAAI,oBACC,SAAS,IACb,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAC3C,GAAG,EAAE,GAAG,iBAEP,IAAI,IAAI,CACP,KAAC,IAAI,kBAAC,SAAS,QAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,kBAAkB,gBAC5E,IAAI,YACA,CACR,EACD,MAAC,IAAI,kBACH,EAAE,EAAE,oBAAoB,EACxB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,iBAExC,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBACf,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,IAAI,oBAAK,aAAa,IAAE,IAAI,EAAE,IAAI,gBAChC,OAAO,YACH,CACR,CAAC,CAAC,CAAC,CACF,OAAO,CACR,YACI,EACP,KAAC,WAAW,IACV,IAAI,EAAE,CAAC,GAAG,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,EAAE,GAAG,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,WACvF,aACG,EACP,0BACG,MAAM,IAAI,CACT,KAAC,MAAM,kBAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,gBAC7D,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,WAAG,YACf,CACV,EACD,KAAC,UAAU,IACT,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,IAAI,EAAE;4BACJ,KAAK,EACH,QAAQ,KAAK,SAAS;gCACpB,CAAC,CAAC;oCACE;wCACE,EAAE,EAAE,QAAQ;wCACZ,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;wCAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC,CAAC,QAAQ,CAAC;qCAC7C;oCACD,GAAG,SAAS;iCACb;gCACH,CAAC,CAAC,SAAS;4BACf,QAAQ,EAAE,EAAE;yBACb,EACD,OAAO,EACL,eAAe;4BACb,CAAC,CAAC;gCACE,MAAM,EAAE,IAAI;6BACb;4BACH,CAAC,CAAC,SAAS,WAEf,YACE,aACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","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

@@ -10,10 +10,26 @@ export interface CaseSummaryProps extends CaseHeaderProps {
         onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
         currentTabId: string;
     };
+    /** The fixed width string is needed for the expandable and collapsible header. */
+    fixedWidth?: string;
+    /** A boolean that toggles the collapsible feature of the case summary. */
+    collapsible?: boolean;
+    onBeforeCollapse?: () => void;
+    onAfterCollapse?: () => void;
+    onBeforeExpand?: () => void;
+    onAfterExpand?: () => void;
+    /** A callback that will return the animation state of the case summary. */
+    onAnimationStateChange?: (state: AnimationState) => void;
+    /** Ref for the header element inside the Case Summary */
+    headerRef?: Ref<HTMLDivElement>;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledCaseSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare type AnimationState = 'expanding' | 'expanded' | 'collapsing' | 'collapsed';
+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,~~EAAc~~,iBAAiB,~~EAAmB~~,SAAS,~~EAAE~~,GAAG,~~EAAE~~,UAAU,~~EAAE~~,MAAM,OAAO,CAAC;~~AAGnG~~,OAAO,~~EAAc~~,GAAG,~~EAAE~~,YAAY,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAExE~~,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,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,~~yGAAe~~,CAAC;~~AAE9C~~,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CAyDnE~~,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

@@ -1,14 +1,122 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { Flex, Tabs } from '@pega/cosmos-react-core';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, Tabs, ExpandCollapse, defaultThemeProp, useConsolidatedRef, Icon, useI18n, useFocusWithin, Button, StyledIcon } from '@pega/cosmos-react-core';
 import CaseHeader from '../CaseHeader';
-export const StyledCaseSummary = styled.div ``;
+export const StyledCaseSummary = styled.div(({ fixedWidth }) => {
+    return css `
+    position: relative;
+    width: ${fixedWidth || 'auto'};
+    max-width: ${fixedWidth ? 'none' : '100%'};
+    height: 100%;
+    &:hover {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        inset-inline-start: 100%;
+        width: 0.75rem;
+      }
+    }
+  `;
+});
+export const StyledCaseSummaryInfo = styled.div `
+  overflow: auto;
+  flex: 1;
+`;
+const StyledExpandCollapse = styled.div(({ animationState }) => {
+    const expandingOrCollapsing = ['expanding', 'collapsing'].includes(animationState);
+    return css `
+      position: ${expandingOrCollapsing ? 'fixed' : 'relative'};
+      top: ${expandingOrCollapsing ? 'var(--appshell-offset, 0)' : 0};
+    `;
+});
+const StyledExpandCollapseButton = styled(Button)(({ theme, expanded, headerHeight, animationState, visible }) => {
+    return css `
+    border-radius: ${expanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};
+    box-shadow: ${theme.base.shadow.high};
+    border: none;
+    opacity: ${visible ? '1' : '0'};
+    position: ${animationState === 'collapsing' ? 'fixed' : 'absolute'};
+    inset-inline-start: ${expanded ? 'calc(100% - 0.75rem)' : 0};
+    top: calc(calc(${headerHeight}px / 2) - 0.75rem);
+    z-index: 1;
+    ${StyledIcon} {
+      width: 1.5rem;
+      height: 1.5rem;
+      transform: rotate(${expanded ? '0' : '180deg'});
+    }
+  `;
+});
+StyledExpandCollapseButton.defaultProps = defaultThemeProp;
 const CaseSummary = forwardRef((props, ref) => {
-    const { icon, heading, caseId, caseLink, parentCases, followed, onFollowedChange, actions, onEdit, summary, tabs, forceMobile, desktop = true, ...restProps } = props;
+    const { icon, heading, caseId, caseLink, parentCases, followed, onFollowedChange, actions, onEdit, summary, tabs, forceMobile, collapsible = false, desktop = true, fixedWidth, onBeforeCollapse, onAfterCollapse, onBeforeExpand, onAfterExpand, onAnimationStateChange, headerRef: caseSummaryHeaderRef, ...restProps } = props;
+    const [showExpandCollapse, setShowExpandCollapse] = useState(false);
+    const expandCollapseBtnRef = useRef(null);
+    const [collapsed, setCollapsed] = useState(true);
     const isMediumOrAbove = !forceMobile && desktop;
+    const [animationState, setAnimationState] = useState('expanded');
+    const [collapsedHeight, setCollapsedHeight] = useState(0);
+    const caseSummaryRef = useConsolidatedRef(ref);
+    const focusWithin = useFocusWithin([caseSummaryRef.current]);
+    const t = useI18n();
+    const setAnimStateAndUpdateParent = (state) => {
+        setAnimationState(state);
+        onAnimationStateChange?.(state);
+    };
+    const headerRef = useConsolidatedRef(caseSummaryHeaderRef);
     const showTabs = (isMediumOrAbove && tabs.items.length > 1) || !isMediumOrAbove;
-    return (_jsxs(Flex, Object.assign({ as: StyledCaseSummary, container: { direction: 'column' }, item: { shrink: 0 }, ref: ref }, restProps, { children: [_jsx(CaseHeader, { actions: actions, onEdit: onEdit, isMediumOrAbove: isMediumOrAbove, caseId: caseId, parentCases: parentCases, heading: heading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange }, void 0), isMediumOrAbove && summary, showTabs && isMediumOrAbove && (_jsx(Tabs, { type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }, void 0))] }), void 0));
+    const caseHeaderProps = {
+        actions,
+        onEdit,
+        isMediumOrAbove,
+        caseId,
+        parentCases,
+        heading,
+        caseLink,
+        icon,
+        followed,
+        onFollowedChange,
+        style: {
+            maxHeight: ['expanding', 'collapsed', 'collapsing'].includes(animationState)
+                ? `${collapsedHeight}px`
+                : 'auto'
+        }
+    };
+    useEffect(() => {
+        if (['expanded'].includes(animationState)) {
+            setCollapsedHeight(headerRef.current?.offsetHeight || 0);
+        }
+    }, [animationState, headerRef.current]);
+    const expandOrCollapseNoun = collapsed ? t('collapse_noun') : t('expand_noun');
+    return (_jsxs(Flex, Object.assign({ as: StyledCaseSummary, fixedWidth: fixedWidth, container: { direction: 'column' }, item: { shrink: 0 }, ref: caseSummaryRef, style: {
+            marginTop: ['collapsing', 'expanding'].includes(animationState)
+                ? `${collapsedHeight}px`
+                : 0
+        }, onMouseEnter: () => {
+            setShowExpandCollapse(true);
+        }, onMouseLeave: () => {
+            setShowExpandCollapse(false);
+        } }, restProps, { children: [collapsible ? (_jsxs(_Fragment, { children: [_jsx(StyledExpandCollapseButton, Object.assign({ onClick: () => setCollapsed(!collapsed), expanded: collapsed, headerHeight: collapsedHeight, animationState: animationState, label: ['expanded', 'collapsed'].includes(animationState)
+                            ? expandOrCollapseNoun
+                            : undefined, "aria-label": ['expanding', 'collapsing'].includes(animationState)
+                            ? expandOrCollapseNoun
+                            : 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: () => {
+                            setAnimStateAndUpdateParent('collapsed');
+                            onAfterCollapse?.();
+                        }, onBeforeCollapse: () => {
+                            setAnimStateAndUpdateParent('expanding');
+                            onBeforeExpand?.();
+                        }, 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)), _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":";AAAA,OAAO,EAAE,UAAU,EAAkE,MAAM,OAAO,CAAC;AACnG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAqB,MAAM,yBAAyB,CAAC;AAExE,OAAO,UAA+B,MAAM,eAAe,CAAC;AAyB5D,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,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,OAAO,GAAG,IAAI,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,CAAC,WAAW,IAAI,OAAO,CAAC;IAEhD,MAAM,QAAQ,GAAG,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAEhF,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,iBAAiB,EACrB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,GAAG,EAAE,GAAG,IACJ,SAAS,eAEb,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe,EAChC,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,WAClC,EAED,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,aACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled from 'styled-components';\n\nimport { Flex, Tabs, Tab, ForwardProps } 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 what layout the summary should render itself in.\n * @internal\n /\n desktop?: boolean;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledCaseSummary = styled.div``;\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 desktop = true,\n ...restProps\n } = props;\n\n const isMediumOrAbove = !forceMobile && desktop;\n\n const showTabs = (isMediumOrAbove && tabs.items.length > 1) \|\| !isMediumOrAbove;\n\n return (\n <Flex\n as={StyledCaseSummary}\n container={{ direction: 'column' }}\n item={{ shrink: 0 }}\n ref={ref}\n {...restProps}\n >\n <CaseHeader\n actions={actions}\n onEdit={onEdit}\n isMediumOrAbove={isMediumOrAbove}\n caseId={caseId}\n parentCases={parentCases}\n heading={heading}\n caseLink={caseLink}\n icon={icon}\n followed={followed}\n onFollowedChange={onFollowedChange}\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":"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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 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/CaseSummaryFields/CaseSummaryFields.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseSummaryFields.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,~~EAML~~,YAAY,~~EACb~~,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,uBAAuB,~~yGAQnC~~,CAAC;~~AAIF~~,MAAM,WAAW,sBAAsB;IACrC,oEAAoE;IACpE,aAAa,EAAE;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,SAAS,CAAC;KAClB,EAAE,CAAC;IACJ,oEAAoE;IACpE,eAAe,EAAE;QACf,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,SAAS,CAAC;KAClB,EAAE,CAAC;IACJ,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,~~CA0B~~/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"CaseSummaryFields.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAOL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,uBAAuB,yGAelC,CAAC;AAIH,MAAM,WAAW,sBAAsB;IACrC,oEAAoE;IACpE,aAAa,EAAE;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,SAAS,CAAC;KAClB,EAAE,CAAC;IACJ,oEAAoE;IACpE,eAAe,EAAE;QACf,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,SAAS,CAAC;KAClB,EAAE,CAAC;IACJ,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAY/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,22 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Grid, FieldValueList, StyledFieldValueList, Text, defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledCaseSummaryFields = styled.div(({ theme }) => css `
+import { Grid, FieldValueList, StyledFieldValueList, StyledFieldValue, calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledCaseSummaryFields = styled.div(({ theme }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
     padding: calc(2 * ${theme.base.spacing});
     > ${StyledFieldValueList}:first-child {
       grid-template-columns: 16ch auto;
+      ${StyledFieldValue} {
+        font-size: ${fontSizes[theme.components.text.h1['font-size']]};
+        font-weight: ${theme.components.text.h1['font-weight']};
+      }
     }
-  `);
+  `;
+});
 StyledCaseSummaryFields.defaultProps = defaultThemeProp;
 const CaseSummaryFields = forwardRef(({ primaryFields, secondaryFields, ...restProps }, ref) => {
-    return (_jsxs(Grid, Object.assign({}, restProps, { as: StyledCaseSummaryFields, ref: ref, container: { rowGap: 2 } }, { children: [_jsx(FieldValueList, { variant: 'stacked', fields: primaryFields.map(field => typeof field.value === 'string'
-                    ? {
-                        ...field,
-                        value: (_jsx(Text, Object.assign({ variant: 'h1', as: 'span' }, { children: field.value }), void 0))
-                    }
-                    : field) }, void 0), _jsx(FieldValueList, { variant: 'inline', fields: secondaryFields }, void 0)] }), void 0));
+    return (_jsxs(Grid, Object.assign({}, 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));
 });
 export default CaseSummaryFields;
 //# sourceMappingURL=CaseSummaryFields.js.map

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

	@@ -1 +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,~~IAAI~~,~~EACJ~~,gBAAgB,~~EAEjB~~,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,~~CAC/C~~,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;~~wBACI~~,KAAK,CAAC,IAAI,CAAC,OAAO;;QAElC,oBAAoB;;;~~GAGzB~~,~~CACF~~,CAAC;~~AAEF~~,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,oBAAK,SAAS,IAAE,EAAE,EAAE,uBAAuB,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,iBAClF,KAAC,cAAc,~~IACb~~,OAAO,EAAC,SAAS,~~EACjB~~,MAAM,EAAE,aAAa,~~CAAC~~,~~GAAG~~,~~CAAC,KAAK,CAAC,EAAE,CAChC,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ;oBAC7B,CAAC,CAAC;wBACE,GAAG,KAAK;wBACR,KAAK,EAAE,CACL,~~KAAC,~~IAAI,kBAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,gBACzB,KAAK,CAAC,KAAK,YACP,CACR;qBACF;oBACH,CAAC,CAAC,KAAK,CACV,WACD,EACF,KAAC,~~cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,WAAI,aACvD,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 ~~Text~~,\n defaultThemeProp,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport const StyledCaseSummaryFields = styled.div(\n ({ theme }) => css`\n padding: calc(2 * ${theme.base.spacing});\n\n > ${StyledFieldValueList}:first-child {\n grid-template-columns: 16ch auto;\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\n variant='stacked'\n fields={primaryFields.map(field =>\n typeof field.value === 'string'\n ? {\n ...field,\n value: (\n <Text variant='h1' as='span'>\n {field.value}~~\n </Text>\n )\n }\n :~~ ~~field\n )}\n~~ />\n <FieldValueList variant='inline' fields={secondaryFields} />\n </Grid>\n );\n }\n);\n\nexport default CaseSummaryFields;\n"]}
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,oBAAK,SAAS,IAAE,EAAE,EAAE,uBAAuB,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,iBAClF,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,aAAa,WAAI,EAC3D,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,WAAI,aACvD,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.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,32 +21,11 @@ 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;
+    }[];
 }
-export declare const StyledCaseViewContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    forceMobile?: boolean | undefined;
-    isMediumOrAbove?: boolean | undefined;
-    persistentUtility?: boolean | undefined;
-}, never>;
-export declare const StyledMobileTabs: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TabsProps & ForwardProps>, import("styled-components").DefaultTheme, {
-    fullWidth: boolean;
-}, never>;
-export declare const StyledCaseViewUtilities: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    utilitiesShown: boolean;
-}, never>;
-export declare const StyledCaseView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    forceMobile?: boolean | undefined;
-    isMediumOrAbove?: boolean | undefined;
-    summaryOffset: number;
-}, never>;
-export declare const StyledSummaryRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    forceMobile?: boolean | undefined;
-    desktop?: boolean | undefined;
-}, never>;
-export declare const StyledCaseDrawer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseDrawerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPersistentUtility: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ScrollStick: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const CaseView: FC<CaseViewProps & ForwardProps>;
 export default CaseView;
 //# sourceMappingURL=CaseView.d.ts.map

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;~~AAGf~~,OAAO,EASL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAIjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;~~AAE7E~~,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~~,~~eAAO,MAAM,qBAAqB;;;;SAoBhC,CAAC;AAEH,eAAO,MAAM,gBAAgB;eAA6B,~~OAAO~~;SAQ/D~~,~~CAAC;AAcH~~,~~eAAO~~,~~MAAM,uBAAuB;oBAAgC,OAAO;SAQ1E,~~CAAC;~~AAIF~~,~~eAAO~~,~~MAAM~~,~~cAAc;;;mBAGV,~~MAAM~~;SAiBrB~~,~~CAAC~~;~~AAIH~~,~~eAAO~~,~~MAAM,mBAAmB;;;SAsB9B,~~CAAC;~~AAIH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC~~;~~AAIH~~,~~eAAO,MAAM,uBAAuB,yGAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC;AAEF,~~QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,~~CA4U9C~~,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"}