npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.2.1 → 2.0.0-dev.20.0 - Mend

@pega/cosmos-react-work 2.0.0-dev.2.1 → 2.0.0-dev.20.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 (180) hide show

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

@@ -1,132 +1,54 @@
-import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, Flex, Grid, Icon, TabPanel, useBreakpoint, useScrollStick, defaultThemeProp, Card, Drawer, useTheme, useI18n } from '@pega/cosmos-react-core';
+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 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';
-const persistentUtilityWidth = '60ch';
-export const StyledCaseViewContent = styled.div(({ theme, forceMobile, isMediumOrAbove }) => {
-    return css `
-    padding: calc(2 * ${theme.base.spacing});
-    ${!forceMobile &&
-        isMediumOrAbove &&
-        css `
-      padding: calc(2 * ${theme.base.spacing}) 0;
-    `}
-  `;
-});
-StyledCaseViewContent.defaultProps = defaultThemeProp;
-const StyledUtilToggle = styled.button(({ theme }) => {
-    return css `
-    align-self: flex-end;
-    color: ${theme.base.palette['foreground-color']};
-    margin-inline-end: 0.375rem;
-  `;
-});
-StyledUtilToggle.defaultProps = defaultThemeProp;
-const StyledCaseViewUtilities = styled.div(({ utilitiesShown, theme }) => {
-    return css `
-      width: ${utilitiesShown ? '25rem' : 'auto'};
-      height: max-content;
-      padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});
-    `;
-});
-StyledCaseViewUtilities.defaultProps = defaultThemeProp;
-export const StyledCaseView = styled.div(({ theme, forceMobile, isMediumOrAbove }) => {
-    return css `
-      min-height: 100vh;
-      position: relative;
-      background-color: ${theme.base.palette['app-background']};
-      > :last-child {
-        ${!forceMobile &&
-        isMediumOrAbove &&
-        css `
-          margin-inline-end: calc(2 * ${theme.base.spacing});
-        `}
-      }
-    `;
-});
-StyledCaseView.defaultProps = defaultThemeProp;
-export const StyledSummaryRegion = styled.div(({ theme, forceMobile, isMediumOrAbove }) => {
-    return css `
-      position: sticky;
-      top: 0;
-      width: 100%;
-      background-color: ${theme.base.palette['primary-background']};
-      overflow: auto;
-      ${(forceMobile || !isMediumOrAbove) &&
-        css `
-        z-index: ${theme.base['z-index'].popover + 1};
-      `}
-      ${!forceMobile &&
-        isMediumOrAbove &&
-        css `
-        height: 100vh;
-      `}
-    `;
-});
-StyledSummaryRegion.defaultProps = defaultThemeProp;
-export const StyledCaseDrawer = styled.div(({ hasPersistentUtility, theme }) => {
-    return css `
-      min-width: 21.875rem;
-      max-width: 31.25rem;
-      width: calc((100vw - 31.25rem) / 10 + 21.875rem);
-      background-color: ${theme.base.palette['primary-background']};
-      height: 100vh;
-      ${hasPersistentUtility &&
-        css `
-        @media (min-width: ${theme.base.breakpoints.md}) {
-          ${theme.base.rtl ? 'left' : 'right'}: ${persistentUtilityWidth};
-        }
-      `}
-    `;
-});
-StyledCaseDrawer.defaultProps = defaultThemeProp;
-export const StyledCaseDrawerContent = styled.div(({ theme }) => {
-    return css `
-    background-color: ${theme.base.palette['app-background']};
-    padding: calc(2 * ${theme.base.spacing});
-    height: 100%;
-    overflow: auto;
-  `;
-});
-StyledCaseDrawerContent.defaultProps = defaultThemeProp;
-export const StyledPersistentUtility = styled.div(({ theme }) => {
-    return css `
-    z-index: calc(${theme.base['z-index'].drawer} + 400);
-  `;
-});
-StyledPersistentUtility.defaultProps = defaultThemeProp;
-export const ScrollStick = styled.div `
-  position: sticky;
-  top: 0;
-`;
+import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledCaseViewContent, StyledPersistentUtility, StyledSummaryRegion, StyledCaseViewUtilities, StyledMobileTabs, 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, actions, banners, persistentUtility, forceMobile, ...restProps } = props;
+    const { caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, caseSummaryRef, tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick }, stages, tasks, tabContent: tabContentProp = [], utilities, utilitiesSummaryItems, defaultCollapsedUtilities = false, actions, onEdit, banners, persistentUtility, forceMobile, ...restProps } = props;
     const t = useI18n();
     const caseViewRef = useRef(null);
+    const caseViewSummaryRef = useConsolidatedRef(caseSummaryRef);
+    const caseSummaryHeaderRef = useRef(null);
+    const caseViewSummaryContainerRef = useRef(null);
+    const [tabContentEl, setTabContentEl] = useElement(null);
+    let isExtraLargeOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });
     let isLargeOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });
     let isMediumOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });
-    const isViewPortMediumOrAbove = useBreakpoint('md');
     if (forceMobile) {
+        isExtraLargeOrAbove = false;
         isLargeOrAbove = false;
         isMediumOrAbove = false;
     }
+    const { headerEl } = useContext(AppShellContext);
+    const [summaryAnimationState, setSummaryAnimationState] = useState('expanded');
     const summaryTabId = `summary-${caseId}`;
     const utilitiesTabId = `utilities-${caseId}`;
     const persistentUtilityTabId = `persistent-utility-${caseId}`;
-    const [utilitiesShown, setUtilitiesShown] = useState(isLargeOrAbove);
-    const [userUtilState, setUserUtilState] = useState();
-    const theme = useTheme();
+    const [utilitiesShown, setUtilitiesShown] = useState(isLargeOrAbove && !defaultCollapsedUtilities);
+    const initialUserUtilState = defaultCollapsedUtilities ? 'hidden' : undefined;
+    const [userUtilState, setUserUtilState] = useState(initialUserUtilState);
+    const [summaryPanelCollapsed, setSummaryPanelCollapsed] = useState(false);
     const hasSideBySideColumns = isMediumOrAbove;
     const scrollStickOptions = useRef({
         elements: []
     });
-    useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);
+    const getOffsets = () => {
+        const appshellHeaderHeight = headerEl?.offsetHeight || 0;
+        const summaryHeight = !isMediumOrAbove || (persistentUtility && !isExtraLargeOrAbove) || summaryPanelCollapsed
+            ? caseViewSummaryRef?.current?.offsetHeight || 0
+            : 0;
+        return {
+            sticky: appshellHeaderHeight + summaryHeight,
+            summary: summaryHeight
+        };
+    };
+    const [offsets, setOffsets] = useState(getOffsets);
+    useScrollStick(hasSideBySideColumns ? { ...scrollStickOptions.current, offset: offsets.sticky } : undefined);
     const toggleUtilities = useCallback((e) => {
         if (e.type === 'keydown' && e.key !== 'Enter') {
             return;
@@ -136,6 +58,9 @@ const CaseView = (props) => {
             return !shown;
         });
     }, []);
+    useLayoutEffect(() => {
+        setOffsets(getOffsets());
+    }, [isExtraLargeOrAbove, isLargeOrAbove, isMediumOrAbove, headerEl, summaryPanelCollapsed]);
     useEffect(() => {
         if (isLargeOrAbove) {
             setUtilitiesShown(userUtilState !== 'hidden');
@@ -145,131 +70,190 @@ const CaseView = (props) => {
         }
     }, [isLargeOrAbove]);
     useEffect(() => {
-        var _a;
-        if (isMediumOrAbove) {
-            if (currentTabId === summaryTabId || currentTabId === utilitiesTabId)
-                onTabClick((_a = tabItemsProp[0]) === null || _a === void 0 ? void 0 : _a.id);
+        if (isMediumOrAbove &&
+            !summaryPanelCollapsed &&
+            !persistentUtility &&
+            (currentTabId === summaryTabId || currentTabId === utilitiesTabId)) {
+            onTabClick(tabItemsProp[0]?.id);
         }
-    }, [isMediumOrAbove, onTabClick, currentTabId, summaryTabId, utilitiesTabId]);
+    }, [
+        isMediumOrAbove,
+        onTabClick,
+        currentTabId,
+        summaryTabId,
+        utilitiesTabId,
+        summaryPanelCollapsed
+    ]);
     useEffect(() => {
-        if (isMediumOrAbove && !isLargeOrAbove && utilities)
+        if ((isMediumOrAbove && !isLargeOrAbove && utilities) || persistentUtility)
             setUtilitiesShown(false);
     }, [isMediumOrAbove, utilities]);
     useEffect(() => {
-        if (isViewPortMediumOrAbove && persistentUtility) {
-            if (currentTabId === persistentUtilityTabId)
-                onTabClick(summaryTabId);
-        }
-    }, [isViewPortMediumOrAbove, persistentUtility]);
+        if (persistentUtility && currentTabId === persistentUtilityTabId)
+            onTabClick(summaryTabId);
+    }, [persistentUtility]);
     const tabItems = useMemo(() => {
+        const summaryTab = { id: summaryTabId, name: 'Summary' };
         if (isMediumOrAbove)
-            return tabItemsProp;
+            return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
+                ? [summaryTab, ...tabItemsProp]
+                : tabItemsProp;
         const utilityTabs = [];
         if (utilities)
             utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });
-        if (persistentUtility && !isViewPortMediumOrAbove)
+        if (persistentUtility && !isMediumOrAbove)
             utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });
-        return [{ id: summaryTabId, name: 'Summary' }, ...tabItemsProp, ...utilityTabs];
+        return [summaryTab, ...tabItemsProp, ...utilityTabs];
     }, [
         isMediumOrAbove,
-        isViewPortMediumOrAbove,
+        isExtraLargeOrAbove,
         summaryTabId,
         utilitiesTabId,
         persistentUtilityTabId,
         utilities,
         persistentUtility,
-        tabItemsProp
+        tabItemsProp,
+        summaryPanelCollapsed
     ]);
-    const tabContent = useMemo(() => {
-        if (currentTabId === summaryTabId)
-            return React.createElement(Card, null, summary);
-        if (currentTabId === utilitiesTabId) {
-            return React.createElement(Flex, { container: { direction: 'column', itemGap: 2 } }, utilities);
+    useEffect(() => {
+        if (!tabContentEl)
+            return;
+        const scrollPos = window.scrollY;
+        const windowHeight = document.documentElement.clientHeight;
+        const bottomPos = scrollPos + windowHeight * 0.8;
+        const tabContentPos = tabContentEl.offsetTop;
+        if (tabContentPos > bottomPos) {
+            const top = tabContentPos - windowHeight * 0.2;
+            window.scrollTo({ top, behavior: 'smooth' });
         }
-        if (currentTabId === persistentUtilityTabId)
-            return persistentUtility === null || persistentUtility === void 0 ? void 0 : persistentUtility.content;
-        return tabContentProp;
-    }, [currentTabId, tabContentProp, summary, summaryTabId, utilities, utilitiesTabId]);
-    let utilitiesIcon = theme.base.rtl ? 'move-right-solid' : 'move-left-solid';
-    if (utilitiesShown)
-        utilitiesIcon = theme.base.rtl ? 'move-left-solid' : 'move-right-solid';
+    }, [currentTabId]);
+    const tabContent = useMemo(() => {
+        const summaryTabContent = { id: summaryTabId, content: _jsx(Card, { children: summary }, void 0) };
+        if (isMediumOrAbove)
+            return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
+                ? [summaryTabContent, ...tabContentProp]
+                : tabContentProp;
+        const utilityTabs = [];
+        if (utilities)
+            utilityTabs.push({
+                id: utilitiesTabId,
+                content: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: utilities }, void 0)
+            });
+        if (persistentUtility)
+            utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });
+        return [summaryTabContent, ...tabContentProp, ...utilityTabs];
+    }, [
+        currentTabId,
+        tabContentProp,
+        summary,
+        summaryTabId,
+        utilities,
+        utilitiesTabId,
+        isMediumOrAbove,
+        isExtraLargeOrAbove
+    ]);
+    const direction = useDirection();
+    const utilitiesIcon = utilitiesShown
+        ? `move-${direction.end}-solid`
+        : `move-${direction.start}-solid`;
     let caseViewGridContainer = {
         cols: 'minmax(0, 1fr)',
         colGap: 0,
         rows: 'minmax(0, max-content) auto',
         areas: '"case-nav" "content"'
     };
-    if (!forceMobile) {
-        if (isLargeOrAbove) {
+    let fixedSummaryWidth = '100%';
+    if (!forceMobile && !persistentUtility && !summaryPanelCollapsed) {
+        fixedSummaryWidth = isLargeOrAbove ? '25rem' : '22rem';
+        if (isLargeOrAbove || isMediumOrAbove) {
             caseViewGridContainer = {
-                cols: '25rem minmax(0, 1fr) minmax(0, max-content)',
+                cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',
                 colGap: 2,
-                rows: 'minmax(0, max-content) auto',
+                rows: caseViewGridContainer.rows,
                 areas: '"case-nav content utilities"'
             };
         }
-        else if (isMediumOrAbove) {
+    }
+    else if (summaryPanelCollapsed) {
+        if (isLargeOrAbove || isMediumOrAbove) {
             caseViewGridContainer = {
-                cols: '22rem minmax(0, 1fr) minmax(0, max-content)',
+                cols: 'minmax(0, 1fr) minmax(0, max-content)',
                 colGap: 2,
-                rows: 'minmax(0, max-content) auto',
-                areas: '"case-nav content utilities"'
+                rows: caseViewGridContainer.rows,
+                areas: '"case-nav case-nav" "content utilities"'
+            };
+        }
+    }
+    else if (persistentUtility) {
+        if (isExtraLargeOrAbove) {
+            fixedSummaryWidth = '25rem';
+            caseViewGridContainer = {
+                cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',
+                colGap: 2,
+                rows: caseViewGridContainer.rows,
+                areas: '"case-nav content persistentUtility utilities"'
+            };
+        }
+        else if (isLargeOrAbove || isMediumOrAbove) {
+            caseViewGridContainer = {
+                cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',
+                colGap: 2,
+                rows: caseViewGridContainer.rows,
+                areas: '"case-nav case-nav case-nav" "content persistentUtility utilities"'
             };
         }
     }
-    return (React.createElement(Grid, { container: { cols: 'minmax(0, 1fr)', areas: '"caseView"' }, md: persistentUtility
-            ? {
-                container: {
-                    cols: `minmax(0, 1fr) ${persistentUtilityWidth}`,
-                    areas: '"caseView persistentUtility"'
-                }
-            }
-            : undefined },
-        React.createElement(Grid, { as: StyledCaseView, ref: caseViewRef, container: caseViewGridContainer, item: { area: 'caseView' }, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove, ...restProps },
-            React.createElement(Grid, { as: StyledSummaryRegion, item: { area: 'case-nav' }, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove },
-                React.createElement(CaseSummary, { ref: caseSummaryRef, caseId: caseId, heading: heading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, parentCases: parentCases, summary: summary, actions: actions, tabs: {
+    const animateSummaryPanel = (type) => {
+        if (type === 'close') {
+            const animation = [{ width: fixedSummaryWidth }, { width: 0 }];
+            caseViewSummaryContainerRef.current?.animate(animation, 250);
+        }
+        else {
+            const animation = [{ width: 0 }, { width: isLargeOrAbove ? '25rem' : '22rem' }];
+            caseViewSummaryContainerRef.current?.animate(animation, 250);
+        }
+    };
+    return (_jsxs(Grid, { as: StyledCaseView, stickyOffset: offsets.sticky, ref: caseViewRef, container: caseViewGridContainer, item: { area: 'caseView' }, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove, ...restProps, children: [_jsx(Grid, { as: StyledSummaryRegion, item: { area: 'case-nav' }, forceMobile: forceMobile, desktop: isMediumOrAbove && (!persistentUtility || isExtraLargeOrAbove) && !summaryPanelCollapsed, isLargeOrAbove: isLargeOrAbove, ref: caseViewSummaryContainerRef, style: ['collapsing', 'expanding'].includes(summaryAnimationState)
+                    ? {
+                        overflow: 'hidden'
+                    }
+                    : undefined, children: _jsx(CaseSummary, { ref: caseViewSummaryRef, headerRef: caseSummaryHeaderRef, caseId: caseId, heading: heading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, parentCases: parentCases, summary: summary, actions: actions, onEdit: onEdit, tabs: {
                         items: tabItems,
                         onClick: onTabClick,
                         currentTabId
-                    }, forceMobile: forceMobile, caseViewRef: caseViewRef })),
-            React.createElement(Grid, { container: {
+                    }, forceMobile: forceMobile, desktop: ((isMediumOrAbove && !persistentUtility) || isExtraLargeOrAbove) &&
+                        !summaryPanelCollapsed, fixedWidth: isMediumOrAbove ? fixedSummaryWidth : undefined, collapsible: isMediumOrAbove && !persistentUtility, collapsed: summaryPanelCollapsed, onBeforeCollapse: () => {
+                        animateSummaryPanel('close');
+                    }, onAfterCollapse: () => setSummaryPanelCollapsed(true), onBeforeExpand: () => {
+                        animateSummaryPanel('open');
+                        setSummaryPanelCollapsed(false);
+                    }, onAnimationStateChange: setSummaryAnimationState }, void 0) }, void 0), _jsxs(Grid, { container: {
                     cols: 'minmax(0, 1fr)',
-                    rows: isMediumOrAbove || currentTabId === summaryTabId
-                        ? `repeat(${banners ? '3' : '2'}, minmax(min-content, max-content)) auto`
-                        : 'auto',
+                    alignContent: 'start',
                     rowGap: 2
-                }, item: { area: 'content' }, as: StyledCaseViewContent, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove },
-                (isMediumOrAbove || currentTabId === summaryTabId) && banners && React.createElement("div", null, banners),
-                (isMediumOrAbove || currentTabId === summaryTabId) && stages && React.createElement("div", null, stages),
-                (isMediumOrAbove || currentTabId === summaryTabId) && tasks && React.createElement("div", null, tasks),
-                currentTabId ? React.createElement(TabPanel, { tabId: currentTabId }, tabContent) : tabContent),
-            !isLargeOrAbove && (React.createElement(Drawer, { as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: theme.base.rtl ? 'left' : 'right', shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility },
-                React.createElement(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', itemGap: 2 } },
-                    React.createElement(Flex, { container: { justify: 'end' } },
-                        React.createElement(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, "aria-label": t('collapse_noun', t('utilities_panel')) },
-                            React.createElement(Icon, { name: theme.base.rtl ? 'move-left-solid' : 'move-right-solid' }))),
-                    utilities))),
-            utilities && isMediumOrAbove && (React.createElement(Grid, { ref: (el) => {
-                    var _a;
+                }, item: { area: 'content' }, as: StyledCaseViewContent, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove, persistentUtility: Boolean(persistentUtility), style: {
+                    transform: ['collapsing', 'expanding'].includes(summaryAnimationState)
+                        ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
+                        : undefined,
+                    marginInlineStart: (summaryPanelCollapsed && isMediumOrAbove) ||
+                        (persistentUtility && !isExtraLargeOrAbove)
+                        ? '1rem'
+                        : 0
+                }, children: [banners && _jsx("div", { children: banners }, void 0), stages && _jsx("div", { children: stages }, void 0), tasks && _jsx("div", { children: tasks }, void 0), (!isMediumOrAbove ||
+                        (persistentUtility && !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_noun', [t('utilities_panel')]), children: _jsx(Icon, { name: `move-${direction.end}-solid` }, void 0) }, void 0) }, void 0), utilities] }, void 0) }, void 0)), utilities && isMediumOrAbove && (_jsxs(Grid, { ref: (el) => {
                     if (el)
-                        ((_a = scrollStickOptions.current) === null || _a === void 0 ? void 0 : _a.elements).push(el);
+                        (scrollStickOptions.current?.elements).push(el);
                 }, as: StyledCaseViewUtilities, container: {
                     cols: 'minmax(0, 1fr)',
                     rowGap: 2
                 }, item: {
                     area: 'utilities'
-                }, utilitiesShown: utilitiesShown && isLargeOrAbove },
-                React.createElement(Flex, { container: { justify: utilitiesShown ? 'end' : 'center' } },
-                    React.createElement(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_noun' : 'expand_noun', t('utilities_panel')) },
-                        React.createElement(Icon, { name: utilitiesIcon }))),
-                React.createElement(Flex, { ref: (el) => {
-                        var _a;
-                        if (el)
-                            ((_a = scrollStickOptions.current) === null || _a === void 0 ? void 0 : _a.elements).push(el);
-                    }, container: utilitiesShown && isLargeOrAbove ? { direction: 'column', itemGap: 2 } : false, hidden: !utilitiesShown || !isLargeOrAbove }, utilities),
-                (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (React.createElement(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }))))),
-        persistentUtility && isViewPortMediumOrAbove && (React.createElement(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' } },
-            React.createElement(ScrollStick, null, persistentUtility.content)))));
+                }, utilitiesShown: utilitiesShown && isLargeOrAbove, style: ['collapsing', 'expanding'].includes(summaryAnimationState)
+                    ? {
+                        transform: `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
+                    }
+                    : undefined, children: [_jsx(Flex, { container: { justify: utilitiesShown ? 'end' : 'center' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_noun' : 'expand_noun', [t('utilities_panel')]), children: _jsx(Icon, { name: utilitiesIcon }, void 0) }, void 0) }, void 0), _jsx(Flex, { container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : false, hidden: !utilitiesShown || !isLargeOrAbove, children: utilities }, void 0), (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }, void 0))] }, void 0))] }, void 0));
 };
 export default CaseView;
 //# sourceMappingURL=CaseView.js.map

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 React, {\n ReactNode,\n FC,\n MouseEvent,\n KeyboardEvent,\n useEffect,\n useState,\n useCallback,\n useMemo,\n useRef,\n Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Flex,\n Grid,\n Icon,\n TabPanel,\n useBreakpoint,\n useScrollStick,\n defaultThemeProp,\n ForwardProps,\n Card,\n Drawer,\n useTheme,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\n\nimport CaseSummary, { CaseSummaryProps } from '../CaseSummary';\n\nimport UtilitiesSummary, { UtilitiesSummaryProps } from './UtilitiesSummary';\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 /* 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?: ReactNode;\n /\n A ref for the CaseSummary region.\n * @internal\n /\n caseSummaryRef?: Ref<HTMLDivElement>;\n}\n\nconst persistentUtilityWidth = '60ch';\n\nexport const StyledCaseViewContent = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n}>(({ theme, forceMobile, isMediumOrAbove }) => {\n return css`\n padding: calc(2 ${theme.base.spacing});\n\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n `}\n `;\n});\n\nStyledCaseViewContent.defaultProps = defaultThemeProp;\n\nconst 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\nconst 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<{ forceMobile?: boolean; isMediumOrAbove?: boolean }>(\n ({ theme, forceMobile, isMediumOrAbove }) => {\n return css`\n min-height: 100vh;\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);\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryRegion = styled.div<{ forceMobile?: boolean; isMediumOrAbove?: boolean }>(\n ({ theme, forceMobile, isMediumOrAbove }) => {\n return css`\n position: sticky;\n top: 0;\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n overflow: auto;\n\n ${(forceMobile \|\| !isMediumOrAbove) &&\n css`\n z-index: ${theme.base['z-index'].popover + 1};\n `}\n\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n height: 100vh;\n `}\n `;\n }\n);\n\nStyledSummaryRegion.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div<{ hasPersistentUtility?: boolean }>(\n ({ hasPersistentUtility, 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: 100vh;\n\n ${hasPersistentUtility &&\n css`\n @media (min-width: ${theme.base.breakpoints.md}) {\n ${theme.base.rtl ? 'left' : 'right'}: ${persistentUtilityWidth};\n }\n `}\n `;\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(({ theme }) => {\n return css`\n z-index: calc(${theme.base['z-index'].drawer} + 400);\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\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 actions,\n banners,\n persistentUtility,\n forceMobile,\n ...restProps\n } = props;\n const t = useI18n();\n const caseViewRef = useRef<HTMLDivElement>(null);\n let isLargeOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n let isMediumOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n const isViewPortMediumOrAbove = useBreakpoint('md');\n if (forceMobile) {\n isLargeOrAbove = false;\n isMediumOrAbove = false;\n }\n\n const summaryTabId = `summary-${caseId}`;\n const utilitiesTabId = `utilities-${caseId}`;\n const persistentUtilityTabId = `persistent-utility-${caseId}`;\n const [utilitiesShown, setUtilitiesShown] = useState(isLargeOrAbove);\n const [userUtilState, setUserUtilState] = useState<undefined \| 'shown' \| 'hidden'>();\n const theme = useTheme();\n\n const hasSideBySideColumns = isMediumOrAbove;\n const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n elements: []\n });\n\n useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\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 useEffect(() => {\n if (isLargeOrAbove) {\n setUtilitiesShown(userUtilState !== 'hidden');\n } else {\n setUtilitiesShown(false);\n }\n }, [isLargeOrAbove]);\n\n useEffect(() => {\n if (isMediumOrAbove) {\n if (currentTabId === summaryTabId \|\| currentTabId === utilitiesTabId)\n onTabClick(tabItemsProp[0]?.id);\n }\n }, [isMediumOrAbove, onTabClick, currentTabId, summaryTabId, utilitiesTabId]);\n\n useEffect(() => {\n if (isMediumOrAbove && !isLargeOrAbove && utilities) setUtilitiesShown(false);\n }, [isMediumOrAbove, utilities]);\n\n useEffect(() => {\n if (isViewPortMediumOrAbove && persistentUtility) {\n if (currentTabId === persistentUtilityTabId) onTabClick(summaryTabId);\n }\n }, [isViewPortMediumOrAbove, persistentUtility]);\n\n const tabItems = useMemo(() => {\n if (isMediumOrAbove) return tabItemsProp;\n const utilityTabs = [];\n\n if (utilities) utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });\n if (persistentUtility && !isViewPortMediumOrAbove)\n utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n\n return [{ id: summaryTabId, name: 'Summary' }, ...tabItemsProp, ...utilityTabs];\n }, [\n isMediumOrAbove,\n isViewPortMediumOrAbove,\n summaryTabId,\n utilitiesTabId,\n persistentUtilityTabId,\n utilities,\n persistentUtility,\n tabItemsProp\n ]);\n\n const tabContent = useMemo(() => {\n if (currentTabId === summaryTabId) return <Card>{summary}</Card>;\n if (currentTabId === utilitiesTabId) {\n return <Flex container={{ direction: 'column', itemGap: 2 }}>{utilities}</Flex>;\n }\n if (currentTabId === persistentUtilityTabId) return persistentUtility?.content;\n\n return tabContentProp;\n }, [currentTabId, tabContentProp, summary, summaryTabId, utilities, utilitiesTabId]);\n\n let utilitiesIcon = theme.base.rtl ? 'move-right-solid' : 'move-left-solid';\n if (utilitiesShown) utilitiesIcon = theme.base.rtl ? 'move-left-solid' : 'move-right-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\n if (!forceMobile) {\n if (isLargeOrAbove) {\n caseViewGridContainer = {\n cols: '25rem minmax(0, 1fr) minmax(0, max-content)',\n colGap: 2,\n rows: 'minmax(0, max-content) auto',\n areas: '\"case-nav content utilities\"'\n };\n } else if (isMediumOrAbove) {\n caseViewGridContainer = {\n cols: '22rem minmax(0, 1fr) minmax(0, max-content)',\n colGap: 2,\n rows: 'minmax(0, max-content) auto',\n areas: '\"case-nav content utilities\"'\n };\n }\n }\n\n return (\n <Grid\n container={{ cols: 'minmax(0, 1fr)', areas: '\"caseView\"' }}\n md={\n persistentUtility\n ? {\n container: {\n cols: `minmax(0, 1fr) ${persistentUtilityWidth}`,\n areas: '\"caseView persistentUtility\"'\n }\n }\n : undefined\n }\n >\n <Grid\n as={StyledCaseView}\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 isMediumOrAbove={isMediumOrAbove}\n >\n <CaseSummary\n ref={caseSummaryRef}\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 tabs={{\n items: tabItems,\n onClick: onTabClick,\n currentTabId\n }}\n forceMobile={forceMobile}\n caseViewRef={caseViewRef}\n />\n </Grid>\n\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n rows:\n isMediumOrAbove \|\| currentTabId === summaryTabId\n ? `repeat(${banners ? '3' : '2'}, minmax(min-content, max-content)) auto`\n : 'auto',\n rowGap: 2\n }}\n item={{ area: 'content' }}\n as={StyledCaseViewContent}\n forceMobile={forceMobile}\n isMediumOrAbove={isMediumOrAbove}\n >\n {(isMediumOrAbove \|\| currentTabId === summaryTabId) && banners && <div>{banners}</div>}\n {(isMediumOrAbove \|\| currentTabId === summaryTabId) && stages && <div>{stages}</div>}\n {(isMediumOrAbove \|\| currentTabId === summaryTabId) && tasks && <div>{tasks}</div>}\n {currentTabId ? <TabPanel tabId={currentTabId}>{tabContent}</TabPanel> : tabContent}\n </Grid>\n\n {!isLargeOrAbove && (\n <Drawer\n as={StyledCaseDrawer}\n open={utilitiesShown && isMediumOrAbove}\n position='fixed'\n placement={theme.base.rtl ? 'left' : 'right'}\n shadow\n nullWhenClosed\n hasPersistentUtility={!!persistentUtility}\n >\n <Flex as={StyledCaseDrawerContent} container={{ direction: 'column', itemGap: 2 }}>\n <Flex container={{ justify: 'end' }}>\n <Button\n variant='simple'\n icon\n onClick={toggleUtilities}\n as={StyledUtilToggle}\n aria-label={t('collapse_noun', t('utilities_panel'))}\n >\n <Icon name={theme.base.rtl ? 'move-left-solid' : 'move-right-solid'} />\n </Button>\n </Flex>\n\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 >\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_noun' : 'expand_noun', t('utilities_panel'))}\n >\n <Icon name={utilitiesIcon} />\n </Button>\n </Flex>\n\n <Flex\n ref={(el: HTMLDivElement) => {\n if (el) (scrollStickOptions.current?.elements).push(el);\n }}\n container={\n utilitiesShown && isLargeOrAbove ? { direction: 'column', itemGap: 2 } : false\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 {persistentUtility && isViewPortMediumOrAbove && (\n <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }}>\n <ScrollStick>{persistentUtility.content}</ScrollStick>\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 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_noun', [t('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_noun' : 'expand_noun', [t('utilities_panel')])}\n >\n <Icon name={utilitiesIcon} />\n </Button>\n </Flex>\n <Flex\n container={utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : false}\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 ADDED Viewed

@@ -0,0 +1,24 @@
+export declare const StyledCaseViewContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    forceMobile?: boolean | undefined;
+    isMediumOrAbove?: boolean | undefined;
+    persistentUtility?: boolean | undefined;
+}, never>;
+export declare const StyledMobileTabs: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TabsProps & 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;
+}, never>;
+export declare const StyledCaseView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    forceMobile?: boolean | undefined;
+    isMediumOrAbove?: boolean | undefined;
+    stickyOffset: number;
+}, never>;
+export declare const StyledSummaryRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    forceMobile?: boolean | undefined;
+    desktop?: boolean | undefined;
+}, never>;
+export declare const StyledCaseDrawer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseDrawerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPersistentUtility: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ScrollStick: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=CaseView.styles.d.ts.map

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

@@ -0,0 +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"}