npm - @pega/cosmos-react-work - Versions diffs - 3.0.0-dev.9.1 → 3.0.0-rc.1 - Mend

@pega/cosmos-react-work 3.0.0-dev.9.1 → 3.0.0-rc.1

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

Files changed (152) hide show

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

@@ -1,259 +1,287 @@
 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, Tabs } from '@pega/cosmos-react-core';
-import AppShellContext from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';
+import { useEffect, useMemo, useRef, useLayoutEffect, useState } from 'react';
+import { Button, Flex, Grid, Icon, registerIcon, TabPanel, useBreakpoint, useScrollStick, useElement, Card, Drawer, useI18n, useDirection, Tabs, useAfterInitialEffect, windowIsAvailable } from '@pega/cosmos-react-core';
 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 CaseSummary from './CaseSummary';
 import UtilitiesSummary from './UtilitiesSummary';
-import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledCaseViewContent, StyledPersistentUtility, StyledSummaryRegion, StyledCaseViewUtilities, StyledUtilToggle } from './CaseView.styles';
+import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledWorkArea, StyledPersistentUtility, StyledSummary, StyledUtilities, StyledUtilToggle } from './CaseView.styles';
+import CaseViewContext from './CaseView.context';
 registerIcon(moveRightSolidIcon, moveLeftSolidIcon);
-const CaseView = (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 CaseView = ({
+// Case data mostly visually related to the case header
+caseId, heading, subheading, caseLink, parentCases, icon, followed, onFollowedChange, onEdit, actions, promotedActions,
+// Summary content and state props
+summary, summaryExpanded: summaryExpandedProp = true, onToggleSummary,
+// Case tabs
+tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },
+// Workarea related content props
+banners, stages, tasks, tabContent: tabContentProp = [],
+// Utilities content and state props
+utilities, utilitiesSummaryItems, utilitiesExpanded: utilitiesExpandedProp = true, onToggleUtilities,
+// Etc...
+persistentUtility, isPreview = false, ...restProps }) => {
+    // General util hooks
     const t = useI18n();
+    const direction = useDirection();
+    // Element refs
     const caseViewRef = useRef(null);
-    const caseViewSummaryRef = useRef(null);
-    const caseSummaryHeaderRef = useRef(null);
-    const caseViewSummaryContainerRef = useRef(null);
+    const summaryRef = useRef(null);
+    // Tab content
     const [tabContentEl, setTabContentEl] = useElement(null);
-    let isExtraLargeOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });
-    let isLargeOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });
-    let isMediumOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });
-    if (forceMobile) {
-        isExtraLargeOrAbove = false;
-        isLargeOrAbove = false;
-        isMediumOrAbove = false;
-    }
-    const { headerEl } = useContext(AppShellContext);
-    const [summaryAnimationState, setSummaryAnimationState] = useState('expanded');
+    // Breakpoint booleans
+    const mdOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });
+    const lgOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });
+    const xlOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });
+    // DOM ids
     const summaryTabId = `summary-${caseId}`;
     const utilitiesTabId = `utilities-${caseId}`;
     const persistentUtilityTabId = `persistent-utility-${caseId}`;
-    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: []
-    });
-    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;
-        }
-        setUtilitiesShown(shown => {
-            setUserUtilState(shown ? 'hidden' : 'shown');
-            return !shown;
-        });
-    }, []);
+    const summaryId = `summary-${caseId}`;
+    const utilitiesId = `utilities-${caseId}`;
+    const utilitiesDrawerId = `utilities-drawer-${caseId}`;
+    // Summary state handling
+    let summaryExpanded = !!summaryExpandedProp;
+    if (persistentUtility) {
+        summaryExpanded = xlOrAbove;
+    }
+    // Utilities state handling
+    // Used in coordination with a layoutEffect below to determine the utilities state on initial render.
+    // Attempted with a ref but it did not work. Using state and enforcing a render in addition to the change render for lgOrAbove seems to fix...
+    const [obeyUtilitiesExpandedProp, setObeyUtilitiesExpandedProp] = useState(lgOrAbove);
+    // Allow the utilitiesExpandedProp to drive the utilities' state after the initial render
     useLayoutEffect(() => {
-        setOffsets(getOffsets());
-    }, [isExtraLargeOrAbove, isLargeOrAbove, isMediumOrAbove, headerEl, summaryPanelCollapsed]);
-    useEffect(() => {
-        if (isLargeOrAbove) {
-            setUtilitiesShown(userUtilState !== 'hidden');
+        if (lgOrAbove)
+            setObeyUtilitiesExpandedProp(true);
+    }, [lgOrAbove]);
+    // Tracks whether a resize forced the onToggleUtilities to close the utilities when it's a drawer
+    const utilitiesToggledByResize = useRef(false);
+    // If the initial render is within the MD size, where the utility drawer renders, it must begin collapsed
+    const utilitiesExpanded = obeyUtilitiesExpandedProp ? utilitiesExpandedProp : false;
+    // Handles utilities state based on breakpoint changes.
+    useAfterInitialEffect(() => {
+        // If we change into the MD breakpoint range and the utilities state is expanded call the toggle prop to collapse it with controlled state
+        if (mdOrAbove && !lgOrAbove && utilitiesExpandedProp) {
+            onToggleUtilities?.();
+            utilitiesToggledByResize.current = true;
         }
-        else {
-            setUtilitiesShown(false);
+        if (lgOrAbove) {
+            if (utilitiesToggledByResize.current && !utilitiesExpandedProp) {
+                onToggleUtilities?.();
+            }
+            utilitiesToggledByResize.current = false;
         }
-    }, [isLargeOrAbove]);
-    useEffect(() => {
-        if (isMediumOrAbove &&
-            !summaryPanelCollapsed &&
-            !persistentUtility &&
-            (currentTabId === summaryTabId || currentTabId === utilitiesTabId)) {
-            onTabClick(tabItemsProp[0]?.id);
-        }
-    }, [
-        isMediumOrAbove,
-        onTabClick,
-        currentTabId,
-        summaryTabId,
-        utilitiesTabId,
-        summaryPanelCollapsed
-    ]);
-    useEffect(() => {
-        if ((isMediumOrAbove && !isLargeOrAbove && utilities) || persistentUtility)
-            setUtilitiesShown(false);
-    }, [isMediumOrAbove, utilities]);
-    useEffect(() => {
-        if (persistentUtility && currentTabId === persistentUtilityTabId)
-            onTabClick(summaryTabId);
-    }, [persistentUtility]);
+        // Purposely not listing utilitiesExpanded as a dependency as it is not a trigger and will be captured when BPs change
+    }, [mdOrAbove, lgOrAbove]);
+    // Generate the tab items based on props and viewport conditions
     const tabItems = useMemo(() => {
         const summaryTab = { id: summaryTabId, name: 'Summary' };
-        if (isMediumOrAbove)
-            return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
+        if (mdOrAbove) {
+            return !summaryExpanded || (persistentUtility && !xlOrAbove)
                 ? [summaryTab, ...tabItemsProp]
                 : tabItemsProp;
+        }
         const utilityTabs = [];
         if (utilities)
             utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });
-        if (persistentUtility && !isMediumOrAbove)
+        if (persistentUtility && !mdOrAbove) {
             utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });
+        }
         return [summaryTab, ...tabItemsProp, ...utilityTabs];
     }, [
-        isMediumOrAbove,
-        isExtraLargeOrAbove,
+        mdOrAbove,
+        xlOrAbove,
         summaryTabId,
         utilitiesTabId,
         persistentUtilityTabId,
         utilities,
         persistentUtility,
         tabItemsProp,
-        summaryPanelCollapsed
+        summaryExpanded
     ]);
-    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' });
-        }
-    }, [currentTabId]);
+    // Setup tab content
     const tabContent = useMemo(() => {
         const summaryTabContent = { id: summaryTabId, content: _jsx(Card, { children: summary }) };
-        if (isMediumOrAbove)
-            return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
+        if (mdOrAbove) {
+            return !summaryExpanded || (persistentUtility && !xlOrAbove)
                 ? [summaryTabContent, ...tabContentProp]
                 : tabContentProp;
+        }
         const utilityTabs = [];
-        if (utilities)
+        if (utilities) {
             utilityTabs.push({
                 id: utilitiesTabId,
                 content: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: utilities })
             });
-        if (persistentUtility)
+        }
+        if (persistentUtility) {
             utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });
+        }
         return [summaryTabContent, ...tabContentProp, ...utilityTabs];
     }, [
-        currentTabId,
-        tabContentProp,
-        summary,
         summaryTabId,
+        summary,
+        mdOrAbove,
+        summaryExpanded,
+        persistentUtility,
+        xlOrAbove,
+        tabContentProp,
         utilities,
         utilitiesTabId,
-        isMediumOrAbove,
-        isExtraLargeOrAbove
+        persistentUtilityTabId
     ]);
-    const direction = useDirection();
-    const utilitiesIcon = utilitiesShown
-        ? `move-${direction.end}-solid`
-        : `move-${direction.start}-solid`;
+    // Grid layout props
     let caseViewGridContainer = {
         cols: 'minmax(0, 1fr)',
         colGap: 0,
         rows: 'minmax(0, max-content) auto',
-        areas: '"case-nav" "content"'
+        areas: `
+      "summary"
+      "work-area"
+    `
+    };
+    const sharedGridProps = {
+        colGap: 2,
+        rows: caseViewGridContainer.rows
     };
-    let fixedSummaryWidth = '100%';
-    if (!forceMobile && !persistentUtility && !summaryPanelCollapsed) {
-        fixedSummaryWidth = isLargeOrAbove ? '25rem' : '22rem';
-        if (isLargeOrAbove || isMediumOrAbove) {
+    if (persistentUtility) {
+        if (xlOrAbove) {
             caseViewGridContainer = {
-                cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',
-                colGap: 2,
-                rows: caseViewGridContainer.rows,
-                areas: '"case-nav content utilities"'
+                ...sharedGridProps,
+                cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',
+                areas: '"summary work-area persistentUtility utilities"'
             };
         }
-    }
-    else if (summaryPanelCollapsed) {
-        if (isLargeOrAbove || isMediumOrAbove) {
+        else if (mdOrAbove) {
             caseViewGridContainer = {
-                cols: 'minmax(0, 1fr) minmax(0, max-content)',
-                colGap: 2,
-                rows: caseViewGridContainer.rows,
-                areas: '"case-nav case-nav" "content utilities"'
+                ...sharedGridProps,
+                cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',
+                areas: `
+          "summary summary summary"
+          "work-area persistentUtility 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) {
+    else if (summaryExpanded) {
+        if (mdOrAbove) {
             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"'
+                ...sharedGridProps,
+                cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',
+                areas: '"summary work-area utilities"'
             };
         }
     }
-    const animateSummaryPanel = (type) => {
-        if (type === 'close') {
-            const animation = [{ width: fixedSummaryWidth }, { width: 0 }];
-            caseViewSummaryContainerRef.current?.animate(animation, 250);
+    else if (mdOrAbove) {
+        caseViewGridContainer = {
+            ...sharedGridProps,
+            cols: 'minmax(0, 1fr) minmax(0, max-content)',
+            areas: `
+            "summary summary"
+            "work-area utilities"
+          `
+        };
+    }
+    // Apply sticky columns
+    const scrollStickOptions = useRef({
+        elements: []
+    });
+    const stickOffset = useMemo(() => {
+        if (windowIsAvailable && caseViewRef.current) {
+            return parseFloat(window.getComputedStyle(caseViewRef.current).getPropertyValue('--appshell-offset'));
+        }
+        return 0;
+    }, [caseViewRef.current]);
+    useScrollStick(
+    // isMediumOrAbove means side by side columns | | |
+    mdOrAbove ? { ...scrollStickOptions.current, offset: stickOffset } : undefined);
+    useEffect(() => {
+        if (mdOrAbove &&
+            summaryExpanded &&
+            !persistentUtility &&
+            (currentTabId === summaryTabId || currentTabId === utilitiesTabId)) {
+            onTabClick(tabItemsProp[0]?.id);
         }
-        else {
-            const animation = [{ width: 0 }, { width: isLargeOrAbove ? '25rem' : '22rem' }];
-            caseViewSummaryContainerRef.current?.animate(animation, 250);
+    }, [mdOrAbove, summaryExpanded]);
+    useEffect(() => {
+        if (persistentUtility && currentTabId === persistentUtilityTabId)
+            onTabClick(summaryTabId);
+    }, [persistentUtility]);
+    // Handles scrolling to tab content for newly clicked tab
+    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' });
         }
+    }, [currentTabId]);
+    // We need a css variable for the height of the case summary when it is collapsed into a header like layout
+    useLayoutEffect(() => {
+        if (!caseViewRef.current || !summaryRef.current)
+            return;
+        caseViewRef.current.style.setProperty('--summary-height', `${!summaryExpanded ? summaryRef.current.offsetHeight : 0}px`);
+    }, [summaryExpanded]);
+    // CaseView context value
+    // Choosing not to memo for now due to extent of deps and how often they change. Optimize as needed.
+    const ctxValue = {
+        caseId,
+        heading,
+        subheading,
+        caseLink,
+        parentCases,
+        icon,
+        followed,
+        onFollowedChange,
+        actions,
+        promotedActions,
+        onEdit,
+        summary,
+        tabs: {
+            items: tabItems,
+            onClick: onTabClick,
+            currentTabId
+        },
+        persistentUtility,
+        summaryId,
+        summaryExpanded,
+        utilitiesExpanded,
+        onToggleSummary,
+        isPreview,
+        aboveMD: mdOrAbove,
+        aboveLG: lgOrAbove,
+        aboveXL: xlOrAbove
     };
-    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, 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 }) }), _jsxs(Flex, { container: {
-                    direction: 'column',
-                    alignContent: 'start',
-                    rowGap: 2
-                }, 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 }), stages && _jsx("div", { children: stages }), tasks && _jsx("div", { children: tasks }), (!isMediumOrAbove ||
-                        (persistentUtility && !isExtraLargeOrAbove) ||
-                        summaryPanelCollapsed) && (_jsx(Tabs, { tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId })), _jsx("div", { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { currentTabId: currentTabId, tabId: id, children: content }, id))) })] }), persistentUtility && isMediumOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, children: persistentUtility.content })), !isLargeOrAbove && (_jsx(Drawer, { as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility, children: _jsxs(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_utilities_panel'), children: _jsx(Icon, { name: `move-${direction.end}-solid` }) }) }), utilities] }) })), utilities && isMediumOrAbove && (_jsxs(Grid, { ref: (el) => {
-                    if (el)
-                        (scrollStickOptions.current?.elements).push(el);
-                }, as: StyledCaseViewUtilities, container: {
-                    cols: 'minmax(0, 1fr)',
-                    rowGap: 2
-                }, item: {
-                    area: 'utilities'
-                }, 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_utilities_panel' : 'expand_utilities_panel'), children: _jsx(Icon, { name: utilitiesIcon }) }) }), _jsx(Flex, { container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : undefined, hidden: !utilitiesShown || !isLargeOrAbove, children: utilities }), (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }))] }))] }));
+    // Here we go...
+    return (_jsx(CaseViewContext.Provider, { value: ctxValue, children: _jsxs(Grid, { as: StyledCaseView, ref: caseViewRef, container: caseViewGridContainer, item: { area: 'case-view' }, ...restProps, children: [_jsx(Grid
+                // Used for aria-controls on the toggle button
+                , {
+                    // Used for aria-controls on the toggle button
+                    id: summaryId, as: StyledSummary, item: { area: 'summary' }, desktop: mdOrAbove && (!persistentUtility || xlOrAbove) && !summaryExpanded, isLargeOrAbove: lgOrAbove, ref: summaryRef, children: _jsx(CaseSummary, {}) }), _jsxs(Flex, { container: {
+                        direction: 'column',
+                        alignContent: 'start',
+                        rowGap: 2
+                    }, as: StyledWorkArea, persistentUtility: Boolean(persistentUtility), children: [banners && _jsx("div", { children: banners }), stages && _jsx("div", { children: stages }), tasks && _jsx("div", { children: tasks }), (!mdOrAbove || (persistentUtility && !xlOrAbove) || !summaryExpanded) && (_jsx(Tabs, { tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId })), _jsx("div", { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { currentTabId: currentTabId, tabId: id, children: content }, id))) })] }), persistentUtility && mdOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, children: persistentUtility.content })), utilities && mdOrAbove && !lgOrAbove && utilitiesExpanded && (_jsx(Drawer, { as: StyledCaseDrawer, open: utilitiesExpanded, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility, children: _jsxs(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 }, id: utilitiesDrawerId, children: [_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { "aria-expanded": utilitiesExpanded ? 'true' : 'false', "aria-controls": utilitiesDrawerId, variant: 'simple', icon: true, onClick: onToggleUtilities, as: StyledUtilToggle, label: t('collapse_utilities_panel'), children: _jsx(Icon, { name: `move-${direction.end}-solid` }) }) }), utilities] }) })), utilities && mdOrAbove && (_jsxs(Grid, { ref: (el) => {
+                        if (el)
+                            (scrollStickOptions.current?.elements).push(el);
+                    }, as: StyledUtilities, container: {
+                        cols: 'minmax(0, 1fr)',
+                        rowGap: 2,
+                        pad: [2, 0, 2]
+                    }, item: {
+                        area: 'utilities'
+                    }, children: [_jsx(Flex, { container: { justify: utilitiesExpanded ? 'end' : 'center' }, children: _jsx(Button, { "aria-expanded": utilitiesExpanded ? 'true' : 'false', "aria-controls": lgOrAbove ? utilitiesId : utilitiesDrawerId, variant: 'simple', icon: true, onClick: () => {
+                                    if (!obeyUtilitiesExpandedProp && utilitiesExpandedProp) {
+                                        setObeyUtilitiesExpandedProp(true);
+                                    }
+                                    else {
+                                        onToggleUtilities?.();
+                                    }
+                                }, as: StyledUtilToggle, label: t(utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel'), children: _jsx(Icon, { name: `move-${utilitiesExpanded ? direction.end : direction.start}-solid` }) }) }), lgOrAbove && utilitiesExpanded && (_jsx(Flex, { container: { direction: 'column', gap: 2 }, id: utilitiesId, children: utilities })), (!utilitiesExpanded || (mdOrAbove && !lgOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems, onClick: onToggleUtilities, "aria-expanded": utilitiesExpanded ? 'true' : 'false', "aria-controls": lgOrAbove ? utilitiesId : utilitiesDrawerId }))] }))] }) }));
 };
 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 {\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"]}
1	+ {"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useMemo, useRef, useLayoutEffect, useState } 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 useAfterInitialEffect,\n windowIsAvailable\n} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\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 from './CaseSummary';\nimport UtilitiesSummary from './UtilitiesSummary';\nimport {\n StyledCaseDrawer,\n StyledCaseDrawerContent,\n StyledCaseView,\n StyledWorkArea,\n StyledPersistentUtility,\n StyledSummary,\n StyledUtilities,\n StyledUtilToggle\n} from './CaseView.styles';\nimport { CaseViewContextValue, CaseViewProps } from './CaseView.types';\nimport CaseViewContext from './CaseView.context';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n // Case data mostly visually related to the case header\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n onEdit,\n actions,\n promotedActions,\n\n // Summary content and state props\n summary,\n summaryExpanded: summaryExpandedProp = true,\n onToggleSummary,\n\n // Case tabs\n tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },\n\n // Workarea related content props\n banners,\n stages,\n tasks,\n tabContent: tabContentProp = [],\n\n // Utilities content and state props\n utilities,\n utilitiesSummaryItems,\n utilitiesExpanded: utilitiesExpandedProp = true,\n onToggleUtilities,\n\n // Etc...\n persistentUtility,\n isPreview = false,\n ...restProps\n}: CaseViewProps) => {\n // General util hooks\n const t = useI18n();\n const direction = useDirection();\n\n // Element refs\n const caseViewRef = useRef<HTMLDivElement>(null);\n const summaryRef = useRef<HTMLDivElement>(null);\n\n // Tab content\n const [tabContentEl, setTabContentEl] = useElement<HTMLElement>(null);\n\n // Breakpoint booleans\n const mdOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n const lgOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n const xlOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });\n\n // DOM ids\n const summaryTabId = `summary-${caseId}`;\n const utilitiesTabId = `utilities-${caseId}`;\n const persistentUtilityTabId = `persistent-utility-${caseId}`;\n const summaryId = `summary-${caseId}`;\n const utilitiesId = `utilities-${caseId}`;\n const utilitiesDrawerId = `utilities-drawer-${caseId}`;\n\n // Summary state handling\n let summaryExpanded = !!summaryExpandedProp;\n if (persistentUtility) {\n summaryExpanded = xlOrAbove;\n }\n\n // Utilities state handling\n\n // Used in coordination with a layoutEffect below to determine the utilities state on initial render.\n // Attempted with a ref but it did not work. Using state and enforcing a render in addition to the change render for lgOrAbove seems to fix...\n const [obeyUtilitiesExpandedProp, setObeyUtilitiesExpandedProp] = useState(lgOrAbove);\n\n // Allow the utilitiesExpandedProp to drive the utilities' state after the initial render\n useLayoutEffect(() => {\n if (lgOrAbove) setObeyUtilitiesExpandedProp(true);\n }, [lgOrAbove]);\n\n // Tracks whether a resize forced the onToggleUtilities to close the utilities when it's a drawer\n const utilitiesToggledByResize = useRef(false);\n\n // If the initial render is within the MD size, where the utility drawer renders, it must begin collapsed\n const utilitiesExpanded = obeyUtilitiesExpandedProp ? utilitiesExpandedProp : false;\n\n // Handles utilities state based on breakpoint changes.\n useAfterInitialEffect(() => {\n // If we change into the MD breakpoint range and the utilities state is expanded call the toggle prop to collapse it with controlled state\n if (mdOrAbove && !lgOrAbove && utilitiesExpandedProp) {\n onToggleUtilities?.();\n utilitiesToggledByResize.current = true;\n }\n\n if (lgOrAbove) {\n if (utilitiesToggledByResize.current && !utilitiesExpandedProp) {\n onToggleUtilities?.();\n }\n\n utilitiesToggledByResize.current = false;\n }\n // Purposely not listing utilitiesExpanded as a dependency as it is not a trigger and will be captured when BPs change\n }, [mdOrAbove, lgOrAbove]);\n\n // Generate the tab items based on props and viewport conditions\n const tabItems: TabsProps['tabs'] = useMemo(() => {\n const summaryTab = { id: summaryTabId, name: 'Summary' };\n if (mdOrAbove) {\n return !summaryExpanded \|\| (persistentUtility && !xlOrAbove)\n ? [summaryTab, ...tabItemsProp]\n : tabItemsProp;\n }\n const utilityTabs = [];\n if (utilities) utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });\n if (persistentUtility && !mdOrAbove) {\n utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n }\n\n return [summaryTab, ...tabItemsProp, ...utilityTabs];\n }, [\n mdOrAbove,\n xlOrAbove,\n summaryTabId,\n utilitiesTabId,\n persistentUtilityTabId,\n utilities,\n persistentUtility,\n tabItemsProp,\n summaryExpanded\n ]);\n\n // Setup tab content\n const tabContent = useMemo(() => {\n const summaryTabContent = { id: summaryTabId, content: <Card>{summary}</Card> };\n\n if (mdOrAbove) {\n return !summaryExpanded \|\| (persistentUtility && !xlOrAbove)\n ? [summaryTabContent, ...tabContentProp]\n : tabContentProp;\n }\n\n const utilityTabs = [];\n\n if (utilities) {\n utilityTabs.push({\n id: utilitiesTabId,\n content: <Flex container={{ direction: 'column', gap: 2 }}>{utilities}</Flex>\n });\n }\n\n if (persistentUtility) {\n utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n }\n\n return [summaryTabContent, ...tabContentProp, ...utilityTabs];\n }, [\n summaryTabId,\n summary,\n mdOrAbove,\n summaryExpanded,\n persistentUtility,\n xlOrAbove,\n tabContentProp,\n utilities,\n utilitiesTabId,\n persistentUtilityTabId\n ]);\n\n // Grid layout props\n let caseViewGridContainer = {\n cols: 'minmax(0, 1fr)',\n colGap: 0,\n rows: 'minmax(0, max-content) auto',\n areas: `\n \"summary\"\n \"work-area\"\n `\n };\n\n const sharedGridProps = {\n colGap: 2,\n rows: caseViewGridContainer.rows\n };\n\n if (persistentUtility) {\n if (xlOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n areas: '\"summary work-area persistentUtility utilities\"'\n };\n } else if (mdOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n areas: `\n \"summary summary summary\"\n \"work-area persistentUtility utilities\"\n `\n };\n }\n } else if (summaryExpanded) {\n if (mdOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',\n areas: '\"summary work-area utilities\"'\n };\n }\n } else if (mdOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, 1fr) minmax(0, max-content)',\n areas: `\n \"summary summary\"\n \"work-area utilities\"\n `\n };\n }\n\n // Apply sticky columns\n const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n elements: []\n });\n\n const stickOffset = useMemo(() => {\n if (windowIsAvailable && caseViewRef.current) {\n return parseFloat(\n window.getComputedStyle(caseViewRef.current).getPropertyValue('--appshell-offset')\n );\n }\n\n return 0;\n }, [caseViewRef.current]);\n\n useScrollStick(\n // isMediumOrAbove means side by side columns \| \| \|\n mdOrAbove ? { ...scrollStickOptions.current, offset: stickOffset } : undefined\n );\n\n useEffect(() => {\n if (\n mdOrAbove &&\n summaryExpanded &&\n !persistentUtility &&\n (currentTabId === summaryTabId \|\| currentTabId === utilitiesTabId)\n ) {\n onTabClick(tabItemsProp[0]?.id);\n }\n }, [mdOrAbove, summaryExpanded]);\n\n useEffect(() => {\n if (persistentUtility && currentTabId === persistentUtilityTabId) onTabClick(summaryTabId);\n }, [persistentUtility]);\n\n // Handles scrolling to tab content for newly clicked tab\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 // We need a css variable for the height of the case summary when it is collapsed into a header like layout\n useLayoutEffect(() => {\n if (!caseViewRef.current \|\| !summaryRef.current) return;\n\n caseViewRef.current.style.setProperty(\n '--summary-height',\n `${!summaryExpanded ? summaryRef.current.offsetHeight : 0}px`\n );\n }, [summaryExpanded]);\n\n // CaseView context value\n // Choosing not to memo for now due to extent of deps and how often they change. Optimize as needed.\n const ctxValue: CaseViewContextValue = {\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n actions,\n promotedActions,\n onEdit,\n summary,\n tabs: {\n items: tabItems,\n onClick: onTabClick,\n currentTabId\n },\n persistentUtility,\n summaryId,\n summaryExpanded,\n utilitiesExpanded,\n onToggleSummary,\n isPreview,\n aboveMD: mdOrAbove,\n aboveLG: lgOrAbove,\n aboveXL: xlOrAbove\n };\n\n // Here we go...\n return (\n <CaseViewContext.Provider value={ctxValue}>\n {/* Root element /}\n <Grid\n as={StyledCaseView}\n ref={caseViewRef}\n container={caseViewGridContainer}\n item={{ area: 'case-view' }}\n {...restProps}\n >\n {/ Summary /}\n <Grid\n // Used for aria-controls on the toggle button\n id={summaryId}\n as={StyledSummary}\n item={{ area: 'summary' }}\n desktop={mdOrAbove && (!persistentUtility \|\| xlOrAbove) && !summaryExpanded}\n isLargeOrAbove={lgOrAbove}\n ref={summaryRef}\n >\n <CaseSummary />\n </Grid>\n\n {/ Work area /}\n <Flex\n container={{\n direction: 'column',\n alignContent: 'start',\n rowGap: 2\n }}\n as={StyledWorkArea}\n persistentUtility={Boolean(persistentUtility)}\n >\n {banners && <div>{banners}</div>}\n {stages && <div>{stages}</div>}\n {tasks && <div>{tasks}</div>}\n\n {(!mdOrAbove \|\| (persistentUtility && !xlOrAbove) \|\| !summaryExpanded) && (\n <Tabs tabs={tabItems} onTabClick={onTabClick} 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 </Flex>\n\n {/ Persistent utility column /}\n {persistentUtility && mdOrAbove && (\n <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }}>\n {persistentUtility.content}\n </Grid>\n )}\n\n {/ Utility drawer /}\n {utilities && mdOrAbove && !lgOrAbove && utilitiesExpanded && (\n <Drawer\n as={StyledCaseDrawer}\n open={utilitiesExpanded}\n position='fixed'\n placement={direction.end}\n shadow\n nullWhenClosed\n hasPersistentUtility={!!persistentUtility}\n >\n <Flex\n as={StyledCaseDrawerContent}\n container={{ direction: 'column', gap: 2 }}\n id={utilitiesDrawerId}\n >\n <Flex container={{ justify: 'end' }}>\n <Button\n aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n aria-controls={utilitiesDrawerId}\n variant='simple'\n icon\n onClick={onToggleUtilities}\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\n {/ Utilities */}\n {utilities && mdOrAbove && (\n <Grid\n ref={(el: HTMLDivElement) => {\n if (el) (scrollStickOptions.current?.elements).push(el);\n }}\n as={StyledUtilities}\n container={{\n cols: 'minmax(0, 1fr)',\n rowGap: 2,\n pad: [2, 0, 2]\n }}\n item={{\n area: 'utilities'\n }}\n >\n <Flex container={{ justify: utilitiesExpanded ? 'end' : 'center' }}>\n <Button\n aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n aria-controls={lgOrAbove ? utilitiesId : utilitiesDrawerId}\n variant='simple'\n icon\n onClick={() => {\n if (!obeyUtilitiesExpandedProp && utilitiesExpandedProp) {\n setObeyUtilitiesExpandedProp(true);\n } else {\n onToggleUtilities?.();\n }\n }}\n as={StyledUtilToggle}\n label={t(utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n >\n <Icon name={`move-${utilitiesExpanded ? direction.end : direction.start}-solid`} />\n </Button>\n </Flex>\n\n {lgOrAbove && utilitiesExpanded && (\n <Flex container={{ direction: 'column', gap: 2 }} id={utilitiesId}>\n {utilities}\n </Flex>\n )}\n\n {(!utilitiesExpanded \|\| (mdOrAbove && !lgOrAbove)) && (\n <UtilitiesSummary\n items={utilitiesSummaryItems}\n onClick={onToggleUtilities}\n aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n aria-controls={lgOrAbove ? utilitiesId : utilitiesDrawerId}\n />\n )}\n </Grid>\n )}\n </Grid>\n </CaseViewContext.Provider>\n );\n};\n\nexport default CaseView;\n"]}