npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-rc.2 → 2.0.0 - Mend

@pega/cosmos-react-work 2.0.0-rc.2 → 2.0.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,~~EAIJ~~,MAAM,OAAO,CAAC;AAIf,OAAO,EAQL,YAAY,~~EAIb~~,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,~~EAKd~~,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;~~AAgFD~~,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CAiFnE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAQL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,EAId,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAkED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+FnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback, useEffect } from 'react';
+import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
-import { Drawer, Icon, registerIcon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useElement, useDirection } from '@pega/cosmos-react-core';
+import { Drawer, Icon, registerIcon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useElement, useDirection, useI18n, AppShellContext } from '@pega/cosmos-react-core';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import CaseView, { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledSummaryRegion } from '../CaseView';
+import CaseView, { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer } from '../CaseView';
 registerIcon(timesIcon);
 const StyledPreviewHeader = styled.div(({ theme }) => {
     return css `
@@ -25,59 +25,56 @@ const StyledPreviewActions = styled.div(({ theme: { base: { spacing, palette: {
     `;
 });
 StyledPreviewActions.defaultProps = defaultThemeProp;
-const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ caseSummaryEl, theme }) => {
-    const offsetHeight = caseSummaryEl?.offsetHeight || 0;
+const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {
     return css `
-      height: calc(100vh - var(--appshell-offset, 0rem));
-      top: var(--appshell-offset, 0);
-      z-index: calc(${theme.base['z-index'].drawer} + 500);
+    height: calc(100vh - var(--appshell-offset, 0rem));
+    top: var(--appshell-offset, 0);
+    z-index: calc(${theme.base['z-index'].drawer} + 500);
-      ${StyledCaseView} {
-        height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});
+    ${StyledCaseView} {
+      height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});
-        @media (pointer: coarse) {
-          height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});
-        }
+      @media (pointer: coarse) {
+        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['hit-area']['mouse-min']} + ${theme.base.spacing});
-        @media (pointer: coarse) {
-          margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
-        }
+    ${StyledCaseViewContent} {
+      overflow-y: auto;
+      margin-bottom: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});
-        & > :last-child {
-          padding-bottom: calc(2 * ${theme.base.spacing});
-        }
+      @media (pointer: coarse) {
+        margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
       }
-      ${StyledSummaryRegion} {
-        position: fixed;
-        top: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});
-        @media (pointer: coarse) {
-          top: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
-        }
+      & > :last-child {
+        padding-bottom: calc(2 * ${theme.base.spacing});
       }
-    `;
+    }
+  `;
 });
 StyledPreviewDrawer.defaultProps = defaultThemeProp;
 const CasePreview = forwardRef((props, ref) => {
     const { open: openProp, caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, onEdit, ...restProps } = props;
-    const [caseSummaryEl, setCaseSummaryEl] = useElement();
+    const t = useI18n();
+    const { previewTriggerRef } = useContext(AppShellContext);
+    const [closeButtonEl, setCloseButtonEl] = useElement();
     const isSmallOrAbove = useBreakpoint('sm');
     const [open, setOpen] = useState(openProp);
     const direction = useDirection();
     const closePreview = useCallback(() => {
         setOpen(false);
+        previewTriggerRef.current?.focus();
     }, []);
     useEffect(() => {
         setOpen(openProp);
     }, [openProp]);
-    return (_jsxs(Drawer, { ...restProps, as: StyledPreviewDrawer, caseSummaryEl: caseSummaryEl ?? undefined, forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { children: _jsx(Button, { variant: 'simple', icon: true, onClick: closePreview, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0) }, void 0), _jsx(CaseView, { forceMobile: true, caseId: caseId, parentCases: parentCases, heading: heading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summary: summary, caseSummaryRef: setCaseSummaryEl, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit }, void 0)] }, void 0));
+    useEffect(() => {
+        if (openProp && closeButtonEl) {
+            closeButtonEl.focus();
+        }
+    }, [openProp, closeButtonEl]);
+    return (_jsxs(Drawer, { ...restProps, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, "aria-label": t('preview_of_noun', [heading]), shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { children: _jsx(Button, { variant: 'simple', icon: true, onClick: closePreview, ref: setCloseButtonEl, "aria-label": t('close_preview'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0) }, void 0), _jsx(CaseView, { forceMobile: true, caseId: caseId, parentCases: parentCases, heading: heading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summary: summary, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit }, void 0)] }, void 0));
 });
 export default CasePreview;
 //# sourceMappingURL=CasePreview.js.map

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,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAEhB,aAAa,EACb,UAAU,EACV,YAAY,~~EACb~~,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,QAAQ,EAAE,EAEf,cAAc,EACd,qBAAqB,EACrB,gBAAgB,~~EAChB~~,~~mBAAmB,EACpB,~~MAAM,aAAa,CAAC;AAErB,YAAY,CAAC,SAAS,CAAC,CAAC;AAmBxB,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,UAAU,CAAC,CAAC,WAAW,CAAC~~;;;iCAGzD~~,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;~~QAIrF~~,qBAAqB;;~~sBAEP~~,~~GAAG,YAAY,IAAI;8BACX,~~KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;;~~gCAGzD~~,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;;;~~qCAIvD~~,KAAK,CAAC,IAAI,CAAC,OAAO~~;;;;QAI/C,mBAAmB;;oBAEP,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO~~;;;~~sBAGzD~~,~~KAAK,~~CAAC~~,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;;KAG7E,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,OACD,SAAS,EACb,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,mBAEd,KAAC,oBAAoB,cACnB,KAAC,MAAM,~~IAAC~~,OAAO,EAAC,QAAQ,~~EAAC~~,IAAI,~~QAAC~~,OAAO,EAAE,YAAY,~~YACjD~~,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,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,YACK,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 registerIcon,\n Button,\n Flex,\n tryCatch,\n defaultThemeProp,\n ForwardProps,\n useBreakpoint,\n useElement,\n useDirection\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n CaseViewProps,\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer~~,\n StyledSummaryRegion~~\n} from '../CaseView';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps extends CaseViewProps {\n /** If true, the Case Preview will be visible. /\n open: boolean;\n /* Callback fired before Case Preview opens. /\n onBeforeOpen?: () => void;\n /* Callback fired after Case Preview opens. /\n onAfterOpen?: () => void;\n /* Callback fired before Case Preview closes. /\n onBeforeClose?: () => void;\n /* Callback fired after Case Preview closes. /\n onAfterClose?: () => void;\n /* Callback fired when a click action occurs outside of the Case Preview. /\n onOuterClick?: () => void;\n /* Reference to the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].drawer};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'brand-primary': brandPrimary }\n }\n }\n }) => {\n const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background-color: ${brandPrimary};\n padding: ${spacing} calc(2 ${spacing}) 0;\n\n button {\n color: ${buttonColor};\n }\n `;\n }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)~~<{ 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"]}
1	+ {"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useCallback,\n useEffect,\n useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Drawer,\n Icon,\n registerIcon,\n Button,\n Flex,\n tryCatch,\n defaultThemeProp,\n ForwardProps,\n useBreakpoint,\n useElement,\n useDirection,\n useI18n,\n AppShellContext\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n CaseViewProps,\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer\n} from '../CaseView';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps extends CaseViewProps {\n /** If true, the Case Preview will be visible. /\n open: boolean;\n /* Callback fired before Case Preview opens. /\n onBeforeOpen?: () => void;\n /* Callback fired after Case Preview opens. /\n onAfterOpen?: () => void;\n /* Callback fired before Case Preview closes. /\n onBeforeClose?: () => void;\n /* Callback fired after Case Preview closes. /\n onAfterClose?: () => void;\n /* Callback fired when a click action occurs outside of the Case Preview. /\n onOuterClick?: () => void;\n /* Reference to the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].drawer};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'brand-primary': brandPrimary }\n }\n }\n }) => {\n const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background-color: ${brandPrimary};\n padding: ${spacing} calc(2 ${spacing}) 0;\n\n button {\n color: ${buttonColor};\n }\n `;\n }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n return css`\n height: calc(100vh - var(--appshell-offset, 0rem));\n top: var(--appshell-offset, 0);\n z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n ${StyledCaseView} {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n }\n }\n\n ${StyledCaseViewContent} {\n overflow-y: auto;\n margin-bottom: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});\n\n @media (pointer: coarse) {\n margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n }\n\n & > :last-child {\n padding-bottom: calc(2 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) => {\n const {\n open: openProp,\n caseId,\n parentCases,\n heading,\n caseLink,\n icon,\n followed,\n onFollowedChange,\n summary,\n tabs,\n stages,\n tasks,\n tabContent,\n utilities,\n utilitiesSummaryItems,\n actions,\n banners,\n onEdit,\n ...restProps\n } = props;\n const t = useI18n();\n const { previewTriggerRef } = useContext(AppShellContext);\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const isSmallOrAbove = useBreakpoint('sm');\n const [open, setOpen] = useState(openProp);\n const direction = useDirection();\n\n const closePreview = useCallback(() => {\n setOpen(false);\n previewTriggerRef.current?.focus();\n }, []);\n\n useEffect(() => {\n setOpen(openProp);\n }, [openProp]);\n\n useEffect(() => {\n if (openProp && closeButtonEl) {\n closeButtonEl.focus();\n }\n }, [openProp, closeButtonEl]);\n\n return (\n <Drawer\n {...restProps}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={ref}\n open={open && isSmallOrAbove}\n position='fixed'\n placement={direction.end}\n aria-label={t('preview_of_noun', [heading])}\n shadow\n nullWhenClosed\n >\n <StyledPreviewActions>\n <Button\n variant='simple'\n icon\n onClick={closePreview}\n ref={setCloseButtonEl}\n aria-label={t('close_preview')}\n >\n <Icon name='times' />\n </Button>\n </StyledPreviewActions>\n\n <CaseView\n forceMobile\n caseId={caseId}\n parentCases={parentCases}\n heading={heading}\n caseLink={caseLink}\n icon={icon}\n followed={followed}\n onFollowedChange={onFollowedChange}\n summary={summary}\n tabs={tabs}\n stages={stages}\n tasks={tasks}\n tabContent={tabContent}\n utilities={utilities}\n utilitiesSummaryItems={utilitiesSummaryItems}\n actions={actions}\n banners={banners}\n onEdit={onEdit}\n />\n </Drawer>\n );\n }\n);\n\nexport default CasePreview;\n"]}

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,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,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;;;~~SAuB7B~~,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAsCF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqKnE,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,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,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;;;SAyB7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAsCF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqKnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -5,7 +5,7 @@ import { Flex, Tabs, ExpandCollapse, defaultThemeProp, useConsolidatedRef, Icon,
 import * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';
 import CaseHeader from '../CaseHeader';
 registerIcon(arrowMicroLeftIcon);
-export const StyledCaseSummary = styled.div(({ expanded, fixedWidth }) => {
+export const StyledCaseSummary = styled.div(({ theme, expanded, fixedWidth }) => {
     return css `
       position: relative;
       width: ${fixedWidth || 'auto'};
@@ -14,14 +14,16 @@ export const StyledCaseSummary = styled.div(({ expanded, fixedWidth }) => {
       ${expanded &&
         css `
-        &:hover {
-          &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            inset-inline-start: 100%;
-            width: 0.75rem;
+        @media (min-width: ${theme.base.breakpoints.md}) {
+          &:hover {
+            &::after {
+              content: '';
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              inset-inline-start: 100%;
+              width: 0.75rem;
+            }
           }
         }
       `}

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

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,EAUL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAMjC,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,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,~~CAoc9C~~,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,EAUH,MAAM,OAAO,CAAC;AAEf,OAAO,EAUL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAMjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAc7E,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;CACnD;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,18 +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, registerIcon, TabPanel, useBreakpoint, useScrollStick, useElement, Card, Drawer, useI18n, useDirection, useConsolidatedRef } from '@pega/cosmos-react-core';
+import { Button, Flex, Grid, Icon, registerIcon, TabPanel, useBreakpoint, useScrollStick, useElement, Card, Drawer, useI18n, useDirection, Tabs } from '@pega/cosmos-react-core';
 import AppShellContext from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';
 import * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';
 import * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';
 import CaseSummary from '../CaseSummary';
 import UtilitiesSummary from './UtilitiesSummary';
-import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledCaseViewContent, StyledPersistentUtility, StyledSummaryRegion, StyledCaseViewUtilities, StyledMobileTabs, StyledUtilToggle } from './CaseView.styles';
+import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledCaseViewContent, StyledPersistentUtility, StyledSummaryRegion, StyledCaseViewUtilities, StyledUtilToggle } from './CaseView.styles';
 registerIcon(moveRightSolidIcon, moveLeftSolidIcon);
 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, defaultCollapsedUtilities = false, actions, onEdit, banners, persistentUtility, forceMobile, ...restProps } = props;
+    const { caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, 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 caseViewSummaryRef = useRef(null);
     const caseSummaryHeaderRef = useRef(null);
     const caseViewSummaryContainerRef = useRef(null);
     const [tabContentEl, setTabContentEl] = useElement(null);
@@ -227,11 +227,11 @@ const CaseView = (props) => {
                     }, onAfterCollapse: () => setSummaryPanelCollapsed(true), onBeforeExpand: () => {
                         animateSummaryPanel('open');
                         setSummaryPanelCollapsed(false);
-                    }, onAnimationStateChange: setSummaryAnimationState }, void 0) }, void 0), _jsxs(Grid, { container: {
-                    cols: 'minmax(0, 1fr)',
+                    }, onAnimationStateChange: setSummaryAnimationState }, void 0) }, void 0), _jsxs(Flex, { container: {
+                    direction: 'column',
                     alignContent: 'start',
                     rowGap: 2
-                }, item: { area: 'content' }, as: StyledCaseViewContent, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove, persistentUtility: Boolean(persistentUtility), style: {
+                }, as: StyledCaseViewContent, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove, persistentUtility: Boolean(persistentUtility), style: {
                     transform: ['collapsing', 'expanding'].includes(summaryAnimationState)
                         ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
                         : undefined,
@@ -241,7 +241,7 @@ const CaseView = (props) => {
                         : 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 && !isExtraLargeOrAbove) ||
-                        summaryPanelCollapsed) && (_jsx(StyledMobileTabs, { type: 'horizontal', tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId }, void 0)), _jsx("div", { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { currentTabId: currentTabId, tabId: id, children: content }, id))) }, void 0)] }, void 0), persistentUtility && isMediumOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, children: persistentUtility.content }, void 0)), !isLargeOrAbove && (_jsx(Drawer, { as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility, children: _jsxs(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_utilities_panel'), children: _jsx(Icon, { name: `move-${direction.end}-solid` }, void 0) }, void 0) }, void 0), utilities] }, void 0) }, void 0)), utilities && isMediumOrAbove && (_jsxs(Grid, { ref: (el) => {
+                        summaryPanelCollapsed) && (_jsx(Tabs, { tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId }, void 0)), _jsx("div", { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { currentTabId: currentTabId, tabId: id, children: content }, id))) }, void 0)] }, void 0), persistentUtility && isMediumOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, children: persistentUtility.content }, void 0)), !isLargeOrAbove && (_jsx(Drawer, { as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility, children: _jsxs(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_utilities_panel'), children: _jsx(Icon, { name: `move-${direction.end}-solid` }, void 0) }, void 0) }, void 0), utilities] }, void 0) }, void 0)), utilities && isMediumOrAbove && (_jsxs(Grid, { ref: (el) => {
                     if (el)
                         (scrollStickOptions.current?.elements).push(el);
                 }, as: StyledCaseViewUtilities, container: {

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

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

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

@@ -3,7 +3,6 @@ export declare const StyledCaseViewContent: import("styled-components").StyledCo
     isMediumOrAbove?: boolean | undefined;
     persistentUtility?: boolean | undefined;
 }, never>;
-export declare const StyledMobileTabs: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TabsProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledUtilToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCaseViewUtilities: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     utilitiesShown: boolean;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB;;;;~~SAoBhC~~,CAAC;AAEH,eAAO,MAAM,gBAAgB,~~mOAI3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,~~4GAM3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;oBAAgC,OAAO;SAQ1E,CAAC;AAIF,eAAO,MAAM,cAAc;;;kBAGX,MAAM;SAiBpB,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;SAiB9B,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"}
1	+ {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB;;;;SAqBhC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAM3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;oBAAgC,OAAO;SAQ1E,CAAC;AAIF,eAAO,MAAM,cAAc;;;kBAGX,MAAM;SAiBpB,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;SAiB9B,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"}

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

@@ -1,7 +1,8 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Tabs } from '@pega/cosmos-react-core';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
 export const StyledCaseViewContent = styled.div(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {
     return css `
+    grid-area: content;
     padding: calc(2 * ${theme.base.spacing});
     ${persistentUtility &&
@@ -17,12 +18,6 @@ export const StyledCaseViewContent = styled.div(({ theme, forceMobile, isMediumO
     `}
   `;
 });
-export const StyledMobileTabs = styled(Tabs)(({ theme }) => {
-    return css `
-    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-  `;
-});
-StyledMobileTabs.defaultProps = defaultThemeProp;
 export const StyledUtilToggle = styled.button(({ theme }) => {
     return css `
     align-self: flex-end;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,~~IAAI,EAAE,~~MAAM,yBAAyB,CAAC;~~AAEjE~~,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAI5C,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,iBAAiB,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA~~;wBACY~~,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEpC,iBAAiB;QACnB,eAAe;QACf,GAAG,CAAA;sCAC+B,KAAK,CAAC,IAAI,CAAC,OAAO;KACnD;;MAEC,CAAC,WAAW;QACd,eAAe;QACf,GAAG,CAAA;0BACmB,KAAK,CAAC,IAAI,CAAC,OAAO;KACvC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,~~IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;qCACyB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;GACnE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,~~MAAM,CAAC,~~MAAM,gBAAgB,GAAG,MAAM,~~CAAC,~~MAAM,CAAC,CAAC,~~EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;GAEhD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5B,OAAO,GAAG,CAAA;eACC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;0BAEtB,KAAK,CAAC,IAAI,CAAC,OAAO,gBAAgB,KAAK,CAAC,IAAI,CAAC,OAAO;KACzE,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAIrC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;iCACqB,YAAY;;;;wBAIrB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;;QAGpD,CAAC,WAAW;QACd,eAAe;QACf,GAAG,CAAA;sCAC6B,KAAK,CAAC,IAAI,CAAC,OAAO;OACjD;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAG1C,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE;IACrC,OAAO,GAAG,CAAA;;;;wBAIY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;eACjD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO;;MAEtC,CAAC,WAAW;QACd,OAAO;QACP,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;wBAIY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;eAGjD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC;GAC5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;wBACpC,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACrD,OAAO,GAAG,CAAA;;;;;;GAMT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGpC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, ~~Tabs~~ } from '@pega/cosmos-react-core';\n\nexport const StyledCaseViewContent = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n persistentUtility?: boolean;\n}>(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n\n ${persistentUtility &&\n isMediumOrAbove &&\n css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n `}\n\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n `}\n `;\n});\n\nexport const StyledMobileTabs = styled(Tabs)(({ theme }) => {\n return css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `;\n});\n\nStyledMobileTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n return css`\n align-self: flex-end;\n color: ${theme.base.palette['foreground-color']};\n margin-inline-end: 0.375rem;\n `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewUtilities = styled.div<{ utilitiesShown: boolean }>(\n ({ utilitiesShown, theme }) => {\n return css`\n width: ${utilitiesShown ? '25rem' : 'auto'};\n height: max-content;\n padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});\n `;\n }\n);\n\nStyledCaseViewUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledCaseView = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n stickyOffset: number;\n}>(({ theme, forceMobile, isMediumOrAbove, stickyOffset }) => {\n return css`\n --case-view-header-offset: ${stickyOffset}px;\n --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));\n min-height: calc(100vh - var(--appshell-offset, 0rem));\n position: relative;\n background-color: ${theme.base.palette['app-background']};\n\n > :last-child {\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n margin-inline-end: calc(2 * ${theme.base.spacing});\n `}\n }\n `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryRegion = styled.div<{\n forceMobile?: boolean;\n desktop?: boolean;\n}>(({ theme, forceMobile, desktop }) => {\n return css`\n position: sticky;\n top: var(--appshell-offset, 0);\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: ${theme.base['z-index'].popover};\n\n ${!forceMobile &&\n desktop &&\n css`\n height: var(--case-view-content-height);\n `}\n `;\n});\n\nStyledSummaryRegion.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n z-index: ${theme.base['z-index'].drawer - 1};\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n padding: calc(2 * ${theme.base.spacing});\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(() => {\n return css`\n max-width: 60ch;\n overflow: auto;\n position: sticky;\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n"]}
1	+ {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledCaseViewContent = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n persistentUtility?: boolean;\n}>(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {\n return css`\n grid-area: content;\n padding: calc(2 * ${theme.base.spacing});\n\n ${persistentUtility &&\n isMediumOrAbove &&\n css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n `}\n\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n `}\n `;\n});\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n return css`\n align-self: flex-end;\n color: ${theme.base.palette['foreground-color']};\n margin-inline-end: 0.375rem;\n `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewUtilities = styled.div<{ utilitiesShown: boolean }>(\n ({ utilitiesShown, theme }) => {\n return css`\n width: ${utilitiesShown ? '25rem' : 'auto'};\n height: max-content;\n padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});\n `;\n }\n);\n\nStyledCaseViewUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledCaseView = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n stickyOffset: number;\n}>(({ theme, forceMobile, isMediumOrAbove, stickyOffset }) => {\n return css`\n --case-view-header-offset: ${stickyOffset}px;\n --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));\n min-height: calc(100vh - var(--appshell-offset, 0rem));\n position: relative;\n background-color: ${theme.base.palette['app-background']};\n\n > :last-child {\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n margin-inline-end: calc(2 * ${theme.base.spacing});\n `}\n }\n `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryRegion = styled.div<{\n forceMobile?: boolean;\n desktop?: boolean;\n}>(({ theme, forceMobile, desktop }) => {\n return css`\n position: sticky;\n top: var(--appshell-offset, 0);\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: ${theme.base['z-index'].popover};\n\n ${!forceMobile &&\n desktop &&\n css`\n height: var(--case-view-content-height);\n `}\n `;\n});\n\nStyledSummaryRegion.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n z-index: ${theme.base['z-index'].drawer - 1};\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n padding: calc(2 * ${theme.base.spacing});\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(() => {\n return css`\n max-width: 60ch;\n overflow: auto;\n position: sticky;\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n"]}

package/lib/components/ConfigurableLayout/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export { default } from './ConfigurableLayout';
 export { default as useTrackWrappedRegions } from './useTrackWrappedRegions';
+export { ConfigurableLayoutProps } from './ConfigurableLayout.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/ConfigurableLayout/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/components/ConfigurableLayout/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { default } from './ConfigurableLayout';\nexport { default as useTrackWrappedRegions } from './useTrackWrappedRegions';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { default } from './ConfigurableLayout';\nexport { default as useTrackWrappedRegions } from './useTrackWrappedRegions';\nexport { ConfigurableLayoutProps } from './ConfigurableLayout.types';\n"]}

package/lib/components/SearchResults/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { default } from './SearchResults';
-export { SearchResultsProps } from './SearchResults.types';
+export { SearchResultsProps, SearchResultProps, FilterEvent } from './SearchResults.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/SearchResults/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/components/SearchResults/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SearchResults/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './SearchResults';\nexport { SearchResultsProps } from './SearchResults.types';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SearchResults/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './SearchResults';\nexport { SearchResultsProps, SearchResultProps, FilterEvent } from './SearchResults.types';\n"]}

package/lib/components/Stakeholders/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { default } from './Stakeholders';
-export { StakeholdersProps } from './Stakeholders.types';
+export { StakeholdersProps, Role, Stakeholder } from './Stakeholders.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Stakeholders/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/Stakeholders/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Stakeholders';\nexport { StakeholdersProps } from './Stakeholders.types';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Stakeholders';\nexport { StakeholdersProps, Role, Stakeholder } from './Stakeholders.types';\n"]}

package/lib/components/Tags/index.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
-export { default } from './Tags';
-export { TagsProps } from './Tags';
+export { default, TagsProps, SelectedTag } from './Tags';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Tags/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,~~MAAM~~,~~QAAQ,CAAC;AACjC,OAAO,~~EAAE,~~SAAS~~,EAAE,MAAM,QAAQ,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/Tags/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tags/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,~~EAAE~~,MAAM,QAAQ,CAAC","sourcesContent":["export { default } ~~from~~ ~~'./Tags';\nexport { TagsProps~~ } from './Tags';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tags/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAA0B,MAAM,QAAQ,CAAC","sourcesContent":["export { default, TagsProps, SelectedTag } from './Tags';\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAEf,OAAO,~~EAAE~~,YAAY,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAGvD~~,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAIlD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,~~CAkD7D~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAIlD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAqE7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,18 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment, useEffect, useState } from 'react';
+import { Progress, useConsolidatedRef, useItemIntersection } from '@pega/cosmos-react-core';
 import { isSameGroup, sortByDate } from './utils';
-import { StyledDate, StyledTimelineTable } from './Timeline.styles';
+import { StyledDate, StyledTimelineTable, StyledLoadingCell } from './Timeline.styles';
 import TimelineItem from './TimelineItem';
-const Timeline = forwardRef(({ activity, currentTime, sortOrder = 'descending', groupBy = 'date', ...restProps }, ref) => {
+const Timeline = forwardRef(({ activity, currentTime, sortOrder = 'descending', groupBy = 'date', loading, loadMore, ...restProps }, ref) => {
     const [sortedData, setSortedData] = useState(() => sortByDate(activity, sortOrder));
+    const tableRef = useConsolidatedRef(ref);
+    useItemIntersection(tableRef, activity.length - 1, () => {
+        if (!loading)
+            loadMore?.();
+    }, ':scope > tbody > tr');
     useEffect(() => {
         setSortedData(sortByDate(activity, sortOrder));
     }, [activity, sortOrder]);
-    return (_jsx(StyledTimelineTable, { ref: ref, ...restProps, children: _jsx("tbody", { children: sortedData.map((item, index) => {
-                const isFirstItemInGroup = !isSameGroup(sortedData[index - 1]?.date, item.date, groupBy);
-                const isLastItemInGroup = !isSameGroup(sortedData[index + 1]?.date, item.date, groupBy);
-                return (_jsxs(Fragment, { children: [isFirstItemInGroup && groupBy !== 'none' && (_jsx("tr", { children: _jsx("td", { colSpan: 3, children: _jsx(StyledDate, { variant: groupBy, format: 'long', value: item.date }, void 0) }, void 0) }, void 0)), _jsx(TimelineItem, { item: item, timeFormat: groupBy === 'date' ? 'time' : 'datetime', prevItemDate: isFirstItemInGroup ? undefined : sortedData[index - 1].date, nextItemDate: isLastItemInGroup ? undefined : sortedData[index + 1].date, currentTime: currentTime }, void 0)] }, item.id));
-            }) }, void 0) }, void 0));
+    return (_jsx(StyledTimelineTable, { ref: tableRef, ...restProps, children: _jsxs("tbody", { children: [sortedData.map((item, index) => {
+                    const isFirstItemInGroup = !isSameGroup(sortedData[index - 1]?.date, item.date, groupBy);
+                    const isLastItemInGroup = !isSameGroup(sortedData[index + 1]?.date, item.date, groupBy);
+                    return (_jsxs(Fragment, { children: [isFirstItemInGroup && groupBy !== 'none' && (_jsx("tr", { children: _jsx("td", { colSpan: 3, children: _jsx(StyledDate, { variant: groupBy, format: 'long', value: item.date }, void 0) }, void 0) }, void 0)), _jsx(TimelineItem, { item: item, timeFormat: groupBy === 'date' ? 'time' : 'datetime', prevItemDate: isFirstItemInGroup ? undefined : sortedData[index - 1].date, nextItemDate: isLastItemInGroup ? undefined : sortedData[index + 1].date, currentTime: currentTime }, void 0)] }, item.id));
+                }), loading && (_jsx("tr", { children: _jsx(StyledLoadingCell, { colSpan: 3, children: _jsx(Progress, { placement: 'local' }, void 0) }, void 0) }, void 0))] }, void 0) }, void 0));
 });
 export default Timeline;
 //# sourceMappingURL=Timeline.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EAGR,SAAS,EACT,QAAQ,EACT,MAAM,OAAO,CAAC;~~AAIf~~,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;~~AACpE~~,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EACE,QAAQ,EACR,WAAW,EACX,SAAS,GAAG,YAAY,EACxB,OAAO,GAAG,MAAM,EAChB,GAAG,SAAS,EACmB,EACjC,GAAyB,EACzB,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAEpF,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,KAAC,mBAAmB,IAAC,GAAG,EAAE,~~GAAG~~,KAAM,SAAS,~~YAC1C~~,~~0BACG~~,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;~~gBAC9B~~,MAAM,kBAAkB,GAAG,CAAC,WAAW,CACrC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EAC3B,IAAI,CAAC,IAAI,EACT,OAAO,CACR,CAAC;~~gBACF~~,MAAM,iBAAiB,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;~~gBACxF~~,OAAO,CACL,MAAC,QAAQ,eACN,kBAAkB,IAAI,OAAO,KAAK,MAAM,IAAI,CAC3C,uBACE,aAAI,OAAO,EAAE,CAAC,YACZ,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,WAAI,WAC7D,WACF,CACN,EACD,KAAC,YAAY,IACX,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EACpD,YAAY,EAAE,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,EACzE,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,EACxE,WAAW,EAAE,WAAW,WACxB,KAdW,IAAI,CAAC,EAAE,CAeX,CACZ,CAAC;~~YACJ~~,CAAC,CAAC,~~WACI~~,WACY,CACvB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n forwardRef,\n Fragment,\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useState\n} from 'react';\n\nimport { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { isSameGroup, sortByDate } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport { StyledDate, StyledTimelineTable } from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: FunctionComponent<TimelineProps & ForwardProps> = forwardRef(\n (\n {\n activity,\n currentTime,\n sortOrder = 'descending',\n groupBy = 'date',\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\n ) => {\n const [sortedData, setSortedData] = useState(() => sortByDate(activity, sortOrder));\n\n useEffect(() => {\n setSortedData(sortByDate(activity, sortOrder));\n }, [activity, sortOrder]);\n\n return (\n <StyledTimelineTable ref={~~ref~~} {...restProps}>\n <tbody>\n {sortedData.map((item, index) => {\n const isFirstItemInGroup = !isSameGroup(\n sortedData[index - 1]?.date,\n item.date,\n groupBy\n );\n const isLastItemInGroup = !isSameGroup(sortedData[index + 1]?.date, item.date, groupBy);\n return (\n <Fragment key={item.id}>\n {isFirstItemInGroup && groupBy !== 'none' && (\n <tr>\n <td colSpan={3}>\n <StyledDate variant={groupBy} format='long' value={item.date} />\n </td>\n </tr>\n )}\n <TimelineItem\n item={item}\n timeFormat={groupBy === 'date' ? 'time' : 'datetime'}\n prevItemDate={isFirstItemInGroup ? undefined : sortedData[index - 1].date}\n nextItemDate={isLastItemInGroup ? undefined : sortedData[index + 1].date}\n currentTime={currentTime}\n />\n </Fragment>\n );\n })}\n </tbody>\n </StyledTimelineTable>\n );\n }\n);\n\nexport default Timeline;\n"]}
1	+ {"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n Fragment,\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useState\n} from 'react';\n\nimport {\n Progress,\n ForwardProps,\n useConsolidatedRef,\n useItemIntersection\n} from '@pega/cosmos-react-core';\n\nimport { isSameGroup, sortByDate } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport { StyledDate, StyledTimelineTable, StyledLoadingCell } from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: FunctionComponent<TimelineProps & ForwardProps> = forwardRef(\n (\n {\n activity,\n currentTime,\n sortOrder = 'descending',\n groupBy = 'date',\n loading,\n loadMore,\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\n ) => {\n const [sortedData, setSortedData] = useState(() => sortByDate(activity, sortOrder));\n\n const tableRef = useConsolidatedRef(ref);\n useItemIntersection(\n tableRef,\n activity.length - 1,\n () => {\n if (!loading) loadMore?.();\n },\n ':scope > tbody > tr'\n );\n\n useEffect(() => {\n setSortedData(sortByDate(activity, sortOrder));\n }, [activity, sortOrder]);\n\n return (\n <StyledTimelineTable ref={tableRef} {...restProps}>\n <tbody>\n {sortedData.map((item, index) => {\n const isFirstItemInGroup = !isSameGroup(\n sortedData[index - 1]?.date,\n item.date,\n groupBy\n );\n const isLastItemInGroup = !isSameGroup(sortedData[index + 1]?.date, item.date, groupBy);\n return (\n <Fragment key={item.id}>\n {isFirstItemInGroup && groupBy !== 'none' && (\n <tr>\n <td colSpan={3}>\n <StyledDate variant={groupBy} format='long' value={item.date} />\n </td>\n </tr>\n )}\n <TimelineItem\n item={item}\n timeFormat={groupBy === 'date' ? 'time' : 'datetime'}\n prevItemDate={isFirstItemInGroup ? undefined : sortedData[index - 1].date}\n nextItemDate={isLastItemInGroup ? undefined : sortedData[index + 1].date}\n currentTime={currentTime}\n />\n </Fragment>\n );\n })}\n {loading && (\n <tr>\n <StyledLoadingCell colSpan={3}>\n <Progress placement='local' />\n </StyledLoadingCell>\n </tr>\n )}\n </tbody>\n </StyledTimelineTable>\n );\n }\n);\n\nexport default Timeline;\n"]}

package/lib/components/Timeline/Timeline.styles.d.ts CHANGED Viewed

@@ -17,5 +17,6 @@ export declare const StyledTimelineTable: import("styled-components").StyledComp
 export declare const StyledDate: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTimeWrapper: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTime: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLoadingCell: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {}, never>;
 export {};
 //# sourceMappingURL=Timeline.styles.d.ts.map

package/lib/components/Timeline/Timeline.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"~~AAgBA~~,eAAO,MAAM,UAAU,mOASrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,0OAU5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SAOnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,mOAM5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,mOAU7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,8HA4D/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,2GA+B9B,CAAC;AAIH,eAAO,MAAM,UAAU,8OAetB,CAAC;AAIF,eAAO,MAAM,iBAAiB,wGAQ5B,CAAC;AAIH,eAAO,MAAM,UAAU,8OAKrB,CAAC"}
1	+ {"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,UAAU,mOASrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,0OAU5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SAOnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,mOAM5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,mOAU7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,8HA4D/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,2GA+B9B,CAAC;AAIH,eAAO,MAAM,UAAU,8OAetB,CAAC;AAIF,eAAO,MAAM,iBAAiB,wGAQ5B,CAAC;AAIH,eAAO,MAAM,UAAU,8OAKrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAO7B,CAAC"}

package/lib/components/Timeline/Timeline.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Button, calculateFontSize, Card, CardContent, DateTimeDisplay, defaultThemeProp, Flex, Grid, StyledIcon, useDirection } from '@pega/cosmos-react-core';
+import { Button, calculateFontSize, Card, CardContent, DateTimeDisplay, defaultThemeProp, Flex, Grid, StyledBackdrop, StyledIcon, useDirection } from '@pega/cosmos-react-core';
 export const StyledCard = styled(Card)(({ theme }) => {
     return css `
     border-top: 0.0625rem solid ${theme.base.colors.slate.light};
@@ -172,4 +172,12 @@ export const StyledTime = styled(DateTimeDisplay)(({ theme }) => {
   `;
 });
 StyledTime.defaultProps = defaultThemeProp;
+export const StyledLoadingCell = styled.td `
+  position: relative;
+  height: 2.8rem;
+  ${StyledBackdrop} {
+    background: transparent;
+  }
+`;
 //# sourceMappingURL=Timeline.styles.js.map

package/lib/components/Timeline/Timeline.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n calculateFontSize,\n Card,\n CardContent,\n DateTimeDisplay,\n defaultThemeProp,\n Flex,\n FontSize,\n Grid,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n border-top: 0.0625rem solid ${theme.base.colors.slate.light};\n padding: ${theme.base.spacing} 0;\n &:not(& &) {\n border-radius: 0;\n background-color: transparent;\n }\n `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n return css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing} 0;\n padding-inline-start: ${theme.base['hit-area']['mouse-min']};\n @media (pointer: coarse) {\n padding-inline-start: ${theme.base['hit-area']['finger-min']};\n }\n }\n `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n return css`\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n color: ${theme.components.button.color};\n `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n padding: 0;\n min-height: 2rem;\n ${StyledToggleButton} {\n align-self: start;\n }\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n return css`\n border-radius: 50%;\n color: ${theme.base.palette.light};\n background: ${theme.base.palette.info};\n & > ${StyledIcon} {\n height: 1em;\n width: 1em;\n }\n `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n hasPrev: boolean;\n hasNext: boolean;\n isPrevFuture: boolean;\n isNextFuture: boolean;\n hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.td<StyledBulletWrapperProps>(\n ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n const { rtl } = useDirection();\n return css`\n position: relative;\n text-align: center;\n padding-top: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n\n ${hasPrev &&\n css`\n &::before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n inset-inline-start: 50%;\n transform: translateX(${rtl ? '50%' : '-50%'});\n width: 0.0625rem;\n height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n ${theme.base.palette.info};\n }\n `}\n\n ${hasNext &&\n css`\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n inset-inline-start: 50%;\n transform: translateX(${rtl ? '50%' : '-50%'});\n width: 0.0625rem;\n height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n ${theme.base.palette.info};\n }\n `}\n\n & > ${StyledTimelineIcon} {\n position: relative;\n margin: 0;\n z-index: 1;\n width: ${hasIcon ? '1.5rem' : '0.5rem'};\n height: ${hasIcon ? '1.5rem' : '0.5rem'};\n }\n\n @media (min-width: ${theme.base.breakpoints.sm}) {\n padding-top: calc(${theme.base.spacing} + 0.0625rem);\n &::before {\n height: calc(${theme.base.spacing} + 0.75rem);\n }\n &::after {\n top: calc(${theme.base.spacing} + 0.75rem);\n height: calc(100% - ${theme.base.spacing} - 0.75rem);\n }\n }\n `;\n }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineTable = styled.table(({ theme }) => {\n return css`\n tr {\n td {\n border-inline-start: ${theme.base.spacing} solid transparent;\n border-inline-end: ${theme.base.spacing} solid transparent;\n vertical-align: top;\n }\n td:first-child {\n border-inline-start: none;\n }\n\n td:last-child {\n border-inline-end: none;\n }\n }\n border-collapse: collapse;\n width: 100%;\n @media (min-width: ${theme.base.breakpoints.sm}) {\n column-gap: ${theme.base.spacing};\n tr {\n td {\n border-inline-start: calc(0.5 * ${theme.base.spacing}) solid transparent;\n border-inline-end: calc(0.5 * ${theme.base.spacing}) solid transparent;\n }\n }\n ${StyledCard} {\n padding: calc(0.5 * ${theme.base.spacing}) 0;\n }\n }\n `;\n});\n\nStyledTimelineTable.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled(DateTimeDisplay)(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n return css`\n display: block;\n padding: calc(3 * ${spacing}) 0 calc(1.25 * ${spacing});\n font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n `;\n }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTimeWrapper = styled.td(({ theme }) => {\n return css`\n @media (min-width: ${theme.base.breakpoints.sm}) {\n text-align: end;\n line-height: ${theme.base['hit-area']['mouse-min']};\n padding-top: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n }\n `;\n});\n\nStyledTimeWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n return css`\n opacity: ${theme.base.transparency['transparent-2']};\n white-space: nowrap;\n `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n calculateFontSize,\n Card,\n CardContent,\n DateTimeDisplay,\n defaultThemeProp,\n Flex,\n FontSize,\n Grid,\n StyledBackdrop,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n border-top: 0.0625rem solid ${theme.base.colors.slate.light};\n padding: ${theme.base.spacing} 0;\n &:not(& &) {\n border-radius: 0;\n background-color: transparent;\n }\n `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n return css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing} 0;\n padding-inline-start: ${theme.base['hit-area']['mouse-min']};\n @media (pointer: coarse) {\n padding-inline-start: ${theme.base['hit-area']['finger-min']};\n }\n }\n `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n return css`\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n color: ${theme.components.button.color};\n `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n padding: 0;\n min-height: 2rem;\n ${StyledToggleButton} {\n align-self: start;\n }\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n return css`\n border-radius: 50%;\n color: ${theme.base.palette.light};\n background: ${theme.base.palette.info};\n & > ${StyledIcon} {\n height: 1em;\n width: 1em;\n }\n `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n hasPrev: boolean;\n hasNext: boolean;\n isPrevFuture: boolean;\n isNextFuture: boolean;\n hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.td<StyledBulletWrapperProps>(\n ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n const { rtl } = useDirection();\n return css`\n position: relative;\n text-align: center;\n padding-top: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n\n ${hasPrev &&\n css`\n &::before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n inset-inline-start: 50%;\n transform: translateX(${rtl ? '50%' : '-50%'});\n width: 0.0625rem;\n height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n ${theme.base.palette.info};\n }\n `}\n\n ${hasNext &&\n css`\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n inset-inline-start: 50%;\n transform: translateX(${rtl ? '50%' : '-50%'});\n width: 0.0625rem;\n height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n ${theme.base.palette.info};\n }\n `}\n\n & > ${StyledTimelineIcon} {\n position: relative;\n margin: 0;\n z-index: 1;\n width: ${hasIcon ? '1.5rem' : '0.5rem'};\n height: ${hasIcon ? '1.5rem' : '0.5rem'};\n }\n\n @media (min-width: ${theme.base.breakpoints.sm}) {\n padding-top: calc(${theme.base.spacing} + 0.0625rem);\n &::before {\n height: calc(${theme.base.spacing} + 0.75rem);\n }\n &::after {\n top: calc(${theme.base.spacing} + 0.75rem);\n height: calc(100% - ${theme.base.spacing} - 0.75rem);\n }\n }\n `;\n }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineTable = styled.table(({ theme }) => {\n return css`\n tr {\n td {\n border-inline-start: ${theme.base.spacing} solid transparent;\n border-inline-end: ${theme.base.spacing} solid transparent;\n vertical-align: top;\n }\n td:first-child {\n border-inline-start: none;\n }\n\n td:last-child {\n border-inline-end: none;\n }\n }\n border-collapse: collapse;\n width: 100%;\n @media (min-width: ${theme.base.breakpoints.sm}) {\n column-gap: ${theme.base.spacing};\n tr {\n td {\n border-inline-start: calc(0.5 * ${theme.base.spacing}) solid transparent;\n border-inline-end: calc(0.5 * ${theme.base.spacing}) solid transparent;\n }\n }\n ${StyledCard} {\n padding: calc(0.5 * ${theme.base.spacing}) 0;\n }\n }\n `;\n});\n\nStyledTimelineTable.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled(DateTimeDisplay)(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n return css`\n display: block;\n padding: calc(3 * ${spacing}) 0 calc(1.25 * ${spacing});\n font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n `;\n }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTimeWrapper = styled.td(({ theme }) => {\n return css`\n @media (min-width: ${theme.base.breakpoints.sm}) {\n text-align: end;\n line-height: ${theme.base['hit-area']['mouse-min']};\n padding-top: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n }\n `;\n});\n\nStyledTimeWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n return css`\n opacity: ${theme.base.transparency['transparent-2']};\n white-space: nowrap;\n `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.td`\n position: relative;\n height: 2.8rem;\n\n ${StyledBackdrop} {\n background: transparent;\n }\n`;\n"]}

package/lib/components/Timeline/Timeline.types.d.ts CHANGED Viewed

@@ -32,6 +32,13 @@ export default interface TimelineProps extends BaseProps, NoChildrenProp {
      * @default "date"
      */
     groupBy?: TimelineGroupBy;
+    /**
+     * Show a Progress indicator at the end of a list where newly loaded items will be appended.
+     * @default false
+     */
+    loading?: boolean;
+    /** Callback to fetch more activity items */
+    loadMore?: () => void;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLTableElement>;
 }

package/lib/components/Timeline/Timeline.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iEAAiE,CAAC;AAElG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,oBAAY,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,oBAAY,eAAe,GACvB,OAAO,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC,GACvE,MAAM,CAAC;AAEX,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}
1	+ {"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iEAAiE,CAAC;AAElG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,oBAAY,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,oBAAY,eAAe,GACvB,OAAO,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC,GACvE,MAAM,CAAC;AAEX,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}

package/lib/components/Timeline/Timeline.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport {\n BaseProps,\n FieldValueListProps,\n IconProps,\n NoChildrenProp,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTimeDisplay';\n\nexport interface ActivityObject {\n /** Unique id for activity /\n id: string;\n /* Date as ISO8601 string, timestamp or native Date object. /\n date: string \| number \| Date;\n /* Header region for rendering text and links. /\n title: ReactNode;\n /* Name of the icon (to be selected from default Pega icon set) /\n icon?: IconProps['name'];\n /* Represents the current status of activity /\n status?: StatusProps;\n /* The set of field values to render in the list. /\n content?: FieldValueListProps['fields'] \| ReactNode;\n}\n\nexport type TimelineSortOrder = 'ascending' \| 'descending';\nexport type TimelineGroupBy =\n \| Extract<DateTimeVariant, 'date' \| 'monthyear' \| 'quarteryear' \| 'year'>\n \| 'none';\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n /* List of activity /\n activity: ActivityObject[];\n /* Current time as Date /\n currentTime: Date;\n /\n List of activity sorted in ascending or descending order.\n * @default \"descending\"\n /\n sortOrder?: TimelineSortOrder;\n /\n List of activity grouped by day, month, quarter or year.\n * @default \"date\"\n /\n groupBy?: TimelineGroupBy;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLTableElement>;\n}\n"]}
1	+ {"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport {\n BaseProps,\n FieldValueListProps,\n IconProps,\n NoChildrenProp,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTimeDisplay';\n\nexport interface ActivityObject {\n /** Unique id for activity /\n id: string;\n /* Date as ISO8601 string, timestamp or native Date object. /\n date: string \| number \| Date;\n /* Header region for rendering text and links. /\n title: ReactNode;\n /* Name of the icon (to be selected from default Pega icon set) /\n icon?: IconProps['name'];\n /* Represents the current status of activity /\n status?: StatusProps;\n /* The set of field values to render in the list. /\n content?: FieldValueListProps['fields'] \| ReactNode;\n}\n\nexport type TimelineSortOrder = 'ascending' \| 'descending';\nexport type TimelineGroupBy =\n \| Extract<DateTimeVariant, 'date' \| 'monthyear' \| 'quarteryear' \| 'year'>\n \| 'none';\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n /* List of activity /\n activity: ActivityObject[];\n /* Current time as Date /\n currentTime: Date;\n /\n List of activity sorted in ascending or descending order.\n * @default \"descending\"\n /\n sortOrder?: TimelineSortOrder;\n /\n List of activity grouped by day, month, quarter or year.\n * @default \"date\"\n /\n groupBy?: TimelineGroupBy;\n /\n Show a Progress indicator at the end of a list where newly loaded items will be appended.\n * @default false\n /\n loading?: boolean;\n /* Callback to fetch more activity items /\n loadMore?: () => void;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLTableElement>;\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-rc.2",
+    "@pega/cosmos-react-core": "2.0.0",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",