npm - @pega/cosmos-react-work - Versions diffs - 4.0.0-dev.13.0 → 4.0.0-dev.14.0 - Mend

@pega/cosmos-react-work 4.0.0-dev.13.0 → 4.0.0-dev.14.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 (68) hide show

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

@@ -37,10 +37,12 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     // Tab content
     const [tabContentEl, setTabContentEl] = useElement(null);
     // Breakpoint booleans
+    const smOrAbove = useBreakpoint('sm');
     const mdOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });
     const lgOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });
     const xlOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });
     // DOM ids
+    const initialTabId = tabItemsProp[0]?.id;
     const summaryTabId = `summary-${caseId}`;
     const utilitiesTabId = `utilities-${caseId}`;
     const persistentUtilityTabId = `persistent-utility-${caseId}`;
@@ -102,11 +104,16 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
         const utilityTabs = [];
         if (utilities)
             utilityTabs.push({ id: utilitiesTabId, name: t('utilities') });
-        if (persistentUtility && !mdOrAbove) {
+        if (persistentUtility) {
             utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });
         }
-        return [summaryTab, ...tabItemsProp, ...utilityTabs];
+        if (isPreview || !smOrAbove || !summaryExpanded) {
+            return [summaryTab, ...tabItemsProp, ...utilityTabs];
+        }
+        return [...tabItemsProp, ...utilityTabs];
     }, [
+        isPreview,
+        smOrAbove,
         mdOrAbove,
         xlOrAbove,
         summaryTabId,
@@ -138,10 +145,15 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
         if (persistentUtility) {
             utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });
         }
-        return [summaryTabContent, ...tabContentProp, ...utilityTabs];
+        if (isPreview || !smOrAbove || !summaryExpanded) {
+            return [summaryTabContent, ...tabContentProp, ...utilityTabs];
+        }
+        return [...tabContentProp, ...utilityTabs];
     }, [
         summaryTabId,
-        summary,
+        summaryFields,
+        isPreview,
+        smOrAbove,
         mdOrAbove,
         summaryExpanded,
         persistentUtility,
@@ -228,11 +240,25 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
             (currentTabId === summaryTabId || currentTabId === utilitiesTabId)) {
             onTabClick(tabItemsProp[0]?.id);
         }
-    }, [mdOrAbove, summaryExpanded]);
+        // Toggle utilities tab selection
+        if (mdOrAbove && [utilitiesTabId, persistentUtilityTabId].includes(currentTabId)) {
+            onTabClick(initialTabId);
+        }
+    }, [mdOrAbove]);
     useEffect(() => {
-        if (persistentUtility && currentTabId === persistentUtilityTabId)
+        // Toggle summary tab selection
+        if (!smOrAbove && currentTabId === initialTabId) {
             onTabClick(summaryTabId);
-    }, [persistentUtility]);
+        }
+        else if (smOrAbove && currentTabId === summaryTabId) {
+            onTabClick(initialTabId);
+        }
+    }, [smOrAbove]);
+    useEffect(() => {
+        if (isPreview) {
+            onTabClick(summaryTabId);
+        }
+    }, [isPreview]);
     // Handles scrolling to tab content for newly clicked tab
     useEffect(() => {
         if (!tabContentEl)
@@ -254,6 +280,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     }, [summaryExpanded]);
     // CaseView context value
     // Choosing not to memo for now due to extent of deps and how often they change. Optimize as needed.
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
     const ctxValue = {
         testIds,
         caseId,
@@ -268,6 +295,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
         promotedActions,
         onEdit,
         summary,
+        summaryFields,
         tabs: {
             items: tabItems,
             onClick: onTabClick,
@@ -280,6 +308,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
         utilitiesExpanded,
         onToggleSummary,
         isPreview,
+        aboveSM: smOrAbove,
         aboveMD: mdOrAbove,
         aboveLG: lgOrAbove,
         aboveXL: xlOrAbove
@@ -295,7 +324,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
                                 rowGap: 2
                             }, as: StyledWorkArea, persistentUtility: Boolean(persistentUtility), children: [banners && _jsx("div", { "data-testid": testIds.banners, children: banners }), stages && _jsx("div", { "data-testid": testIds.stages, children: stages }), tasks && _jsx("div", { "data-testid": testIds.tasks, children: tasks }), (!mdOrAbove || (persistentUtility && !xlOrAbove) || !summaryExpanded) && (_jsx(Tabs, { "data-testid": testIds.tabs, tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId })), _jsx("div", { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { "data-testid": currentTabId === id ? testIds.tabContent : undefined, 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, { "data-testid": testIds.utilities, ref: (el) => {
                                 if (el)
-                                    (scrollStickOptions.current?.elements).push(el);
+                                    scrollStickOptions.current?.elements.push(el);
                             }, as: StyledUtilities, container: {
                                 cols: 'minmax(0, 1fr)',
                                 rowGap: 2,
@@ -309,7 +338,7 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
                                             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 }))] }))] }) }), intelligentGuidance] }));
+                                        }, 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, "aria-expanded": utilitiesExpanded ? 'true' : 'false', "aria-controls": lgOrAbove ? utilitiesId : utilitiesDrawerId }))] }))] }) }), intelligentGuidance] }));
 };
 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 { 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 focusHeadingOrContainer,\n useConfiguration,\n useTestIds\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 StyledSummaryTabContent,\n StyledUtilities,\n StyledUtilToggle\n} from './CaseView.styles';\nimport { CaseViewContextValue, CaseViewProps } from './CaseView.types';\nimport CaseViewContext from './CaseView.context';\nimport CaseSummaryFields from './CaseSummaryFields';\nimport { getCaseViewTestIds } from './CaseView.test-ids';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n testId,\n\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 summaryFields,\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 intelligentGuidance,\n isPreview = false,\n ...restProps\n}: CaseViewProps) => {\n const testIds = useTestIds(testId, getCaseViewTestIds);\n\n const summary = useMemo(() => {\n return <CaseSummaryFields {...summaryFields} />;\n }, [summaryFields]);\n\n // General util hooks\n const t = useI18n();\n const direction = useDirection();\n const { loadedRef } = useConfiguration();\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 = !isPreview && !!summaryExpandedProp;\n\n if (persistentUtility) {\n summaryExpanded = xlOrAbove;\n }\n\n // Focus heading on initial mount\n useEffect(() => {\n if (!caseViewRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(caseViewRef.current, heading);\n } else {\n loadedRef.current = true;\n }\n }, [caseId]);\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: t('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: t('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 = {\n id: summaryTabId,\n content: (\n <Card>\n <StyledSummaryTabContent>{summary}</StyledSummaryTabContent>\n </Card>\n )\n };\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 (isPreview) {\n onTabClick(summaryTabId);\n }\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 testIds,\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 intelligentGuidance,\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 <>\n <CaseViewContext.Provider value={ctxValue}>\n {/* Root element /}\n <Grid\n data-testid={testIds.root}\n {...restProps}\n as={StyledCaseView}\n ref={caseViewRef}\n container={caseViewGridContainer}\n item={{ area: 'case-view' }}\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 data-testid={testIds.banners}>{banners}</div>}\n {stages && <div data-testid={testIds.stages}>{stages}</div>}\n {tasks && <div data-testid={testIds.tasks}>{tasks}</div>}\n\n {(!mdOrAbove \|\| (persistentUtility && !xlOrAbove) \|\| !summaryExpanded) && (\n <Tabs\n data-testid={testIds.tabs}\n tabs={tabItems}\n onTabClick={onTabClick}\n currentTabId={currentTabId}\n />\n )}\n\n <div ref={setTabContentEl}>\n {tabContent?.map(({ id, content }) => (\n <TabPanel\n data-testid={currentTabId === id ? testIds.tabContent : undefined}\n currentTabId={currentTabId}\n tabId={id}\n key={id}\n >\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 data-testid={testIds.utilities}\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(\n utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel'\n )}\n >\n <Icon\n name={`move-${utilitiesExpanded ? direction.end : direction.start}-solid`}\n />\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 {intelligentGuidance}\n </>\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 focusHeadingOrContainer,\n useConfiguration,\n useTestIds\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 StyledSummaryTabContent,\n StyledUtilities,\n StyledUtilToggle\n} from './CaseView.styles';\nimport { CaseViewContextValue, CaseViewProps } from './CaseView.types';\nimport CaseViewContext from './CaseView.context';\nimport CaseSummaryFields from './CaseSummaryFields';\nimport { getCaseViewTestIds } from './CaseView.test-ids';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n testId,\n\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 summaryFields,\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 intelligentGuidance,\n isPreview = false,\n ...restProps\n}: CaseViewProps) => {\n const testIds = useTestIds(testId, getCaseViewTestIds);\n\n const summary = useMemo(() => {\n return <CaseSummaryFields {...summaryFields} />;\n }, [summaryFields]);\n\n // General util hooks\n const t = useI18n();\n const direction = useDirection();\n const { loadedRef } = useConfiguration();\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 smOrAbove = useBreakpoint('sm');\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 initialTabId = tabItemsProp[0]?.id;\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 = !isPreview && !!summaryExpandedProp;\n\n if (persistentUtility) {\n summaryExpanded = xlOrAbove;\n }\n\n // Focus heading on initial mount\n useEffect(() => {\n if (!caseViewRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(caseViewRef.current, heading);\n } else {\n loadedRef.current = true;\n }\n }, [caseId]);\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: t('summary') };\n if (mdOrAbove) {\n return !summaryExpanded \|\| (persistentUtility && !xlOrAbove)\n ? [summaryTab, ...tabItemsProp]\n : tabItemsProp;\n }\n\n const utilityTabs = [];\n if (utilities) utilityTabs.push({ id: utilitiesTabId, name: t('utilities') });\n if (persistentUtility) {\n utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n }\n\n if (isPreview \|\| !smOrAbove \|\| !summaryExpanded) {\n return [summaryTab, ...tabItemsProp, ...utilityTabs];\n }\n\n return [...tabItemsProp, ...utilityTabs];\n }, [\n isPreview,\n smOrAbove,\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 = {\n id: summaryTabId,\n content: (\n <Card>\n <StyledSummaryTabContent>{summary}</StyledSummaryTabContent>\n </Card>\n )\n };\n\n if (mdOrAbove) {\n return !summaryExpanded \|\| (persistentUtility && !xlOrAbove)\n ? [summaryTabContent, ...tabContentProp]\n : tabContentProp;\n }\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 }\n if (persistentUtility) {\n utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n }\n\n if (isPreview \|\| !smOrAbove \|\| !summaryExpanded) {\n return [summaryTabContent, ...tabContentProp, ...utilityTabs];\n }\n\n return [...tabContentProp, ...utilityTabs];\n }, [\n summaryTabId,\n summaryFields,\n isPreview,\n smOrAbove,\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 (isPreview) {\n onTabClick(summaryTabId);\n }\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 // Toggle utilities tab selection\n if (mdOrAbove && [utilitiesTabId, persistentUtilityTabId].includes(currentTabId)) {\n onTabClick(initialTabId);\n }\n }, [mdOrAbove]);\n\n useEffect(() => {\n // Toggle summary tab selection\n if (!smOrAbove && currentTabId === initialTabId) {\n onTabClick(summaryTabId);\n } else if (smOrAbove && currentTabId === summaryTabId) {\n onTabClick(initialTabId);\n }\n }, [smOrAbove]);\n\n useEffect(() => {\n if (isPreview) {\n onTabClick(summaryTabId);\n }\n }, [isPreview]);\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 // eslint-disable-next-line react/jsx-no-constructed-context-values\n const ctxValue: CaseViewContextValue = {\n testIds,\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 summaryFields,\n tabs: {\n items: tabItems,\n onClick: onTabClick,\n currentTabId\n },\n persistentUtility,\n intelligentGuidance,\n summaryId,\n summaryExpanded,\n utilitiesExpanded,\n onToggleSummary,\n isPreview,\n aboveSM: smOrAbove,\n aboveMD: mdOrAbove,\n aboveLG: lgOrAbove,\n aboveXL: xlOrAbove\n };\n\n // Here we go...\n return (\n <>\n <CaseViewContext.Provider value={ctxValue}>\n {/* Root element /}\n <Grid\n data-testid={testIds.root}\n {...restProps}\n as={StyledCaseView}\n ref={caseViewRef}\n container={caseViewGridContainer}\n item={{ area: 'case-view' }}\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 data-testid={testIds.banners}>{banners}</div>}\n {stages && <div data-testid={testIds.stages}>{stages}</div>}\n {tasks && <div data-testid={testIds.tasks}>{tasks}</div>}\n\n {(!mdOrAbove \|\| (persistentUtility && !xlOrAbove) \|\| !summaryExpanded) && (\n <Tabs\n data-testid={testIds.tabs}\n tabs={tabItems}\n onTabClick={onTabClick}\n currentTabId={currentTabId}\n />\n )}\n\n <div ref={setTabContentEl}>\n {tabContent?.map(({ id, content }) => (\n <TabPanel\n data-testid={currentTabId === id ? testIds.tabContent : undefined}\n currentTabId={currentTabId}\n tabId={id}\n key={id}\n >\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 data-testid={testIds.utilities}\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(\n utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel'\n )}\n >\n <Icon\n name={`move-${utilitiesExpanded ? direction.end : direction.start}-solid`}\n />\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 aria-expanded={utilitiesExpanded ? 'true' : 'false'}\n aria-controls={lgOrAbove ? utilitiesId : utilitiesDrawerId}\n />\n )}\n </Grid>\n )}\n </Grid>\n </CaseViewContext.Provider>\n {intelligentGuidance}\n </>\n );\n};\n\nexport default CaseView;\n"]}

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

@@ -1,23 +1,40 @@
-export declare const StyledCaseSummaryFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSummaryPrimaryList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSummarySecondaryList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSummaryTabContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseIconWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFollowIconWrap: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSubheading: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseHeaderText: import("styled-components").StyledComponent<"hgroup", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPromotedActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseSummaryInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledExpandCollapseButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledWorkArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledUtilToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledUtilities: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, 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>;
-export declare const StyledCaseView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+import { DefaultTheme } from 'styled-components';
+export declare const StyledCaseSummaryFields: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledSummaryPrimaryList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
+export declare const StyledSummarySecondaryList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
+export declare const StyledSummaryTabContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
+export declare const StyledCaseHeader: import("styled-components").StyledComponent<"header", DefaultTheme, {}, never>;
+export declare const StyledCaseIconWrap: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledFollowIconWrap: import("styled-components").StyledComponent<"label", DefaultTheme, {}, never>;
+export declare const StyledSubheading: import("styled-components").StyledComponent<"p", DefaultTheme, {}, never>;
+export declare const StyledCaseHeaderText: import("styled-components").StyledComponent<"hgroup", DefaultTheme, {}, never>;
+export declare const StyledHeaderBreadcrumbBlock: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    breadcrumbWidth?: number | undefined;
+}, never>;
+export declare const StyledHeaderSummaryBlock: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    hasItems: boolean;
+}, never>;
+export declare const StyledCaseSummaryInfo: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledCaseSummaryContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledExpandCollapseButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
+export declare const StyledCaseSummary: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledWorkArea: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledUtilToggle: import("styled-components").StyledComponent<"button", DefaultTheme, {}, never>;
+export declare const StyledUtilities: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledSummary: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledCaseDrawer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledCaseDrawerContent: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledPersistentUtility: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const ScrollStick: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledCaseView: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledHeaderSummary: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
+export declare const StyledHeaderSummaryValue: import("styled-components").StyledComponent<"dd", DefaultTheme, {
+    bold?: boolean | undefined;
+    truncate?: boolean | undefined;
+    theme: DefaultTheme;
+}, never>;
+export declare const StyledHeaderActions: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    offsetEnd: boolean;
+}, never>;
+export declare const StyledCaseHeaderPromotedAction: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
 //# sourceMappingURL=CaseView.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"~~AA2BA~~,eAAO,MAAM,uBAAuB,~~yGAKlC~~,CAAC;AAIH,eAAO,MAAM,wBAAwB,~~6OAWnC~~,CAAC;AAIH,eAAO,MAAM,0BAA0B,~~6OAMrC~~,CAAC;AAEH,eAAO,MAAM,uBAAuB,~~0OAsBlC~~,CAAC;AAIH,eAAO,MAAM,gBAAgB,~~4GAmB3B~~,CAAC;AAIH,eAAO,MAAM,kBAAkB,~~yGAkB7B~~,CAAC;AAIH,eAAO,MAAM,oBAAoB,~~2GAShC,~~CAAC;AAIF,eAAO,MAAM,gBAAgB,~~uGAAa~~,CAAC;AAI3C,eAAO,MAAM,oBAAoB,~~4GA0C~~/B,CAAC;AAIH,eAAO,MAAM,~~qBAAqB~~,~~yGAIhC~~,CAAC;AAIH,eAAO,MAAM,qBAAqB,~~yGAYhC~~,CAAC;AAIH,eAAO,MAAM,0BAA0B,~~qOAuBrC~~,CAAC;AAIH,eAAO,MAAM,iBAAiB,~~yGAqC5B~~,CAAC;AAIH,eAAO,MAAM,cAAc,~~yGA6BzB~~,CAAC;AAIH,eAAO,MAAM,gBAAgB,~~4GAM3B~~,CAAC;AAIH,eAAO,MAAM,eAAe,~~yGAY1B~~,CAAC;AAIH,eAAO,MAAM,aAAa,~~yGAyBxB~~,CAAC;AAIH,eAAO,MAAM,gBAAgB,~~yGAU3B~~,CAAC;AAIH,eAAO,MAAM,uBAAuB,~~yGAOlC~~,CAAC;AAIH,eAAO,MAAM,uBAAuB,~~yGAUlC~~,CAAC;AAIH,eAAO,MAAM,WAAW,~~yGAGvB~~,CAAC;AAEF,eAAO,MAAM,cAAc,~~yGAiBzB~~,CAAC"}
1	+ {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAuC9D,eAAO,MAAM,uBAAuB,6EAKlC,CAAC;AAIH,eAAO,MAAM,wBAAwB,iNAWnC,CAAC;AAIH,eAAO,MAAM,0BAA0B,iNAMrC,CAAC;AAEH,eAAO,MAAM,uBAAuB,8MAsBlC,CAAC;AAIH,eAAO,MAAM,gBAAgB,gFAmB3B,CAAC;AAIH,eAAO,MAAM,kBAAkB,6EAkB7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,+EAShC,CAAC;AAIF,eAAO,MAAM,gBAAgB,2EAAa,CAAC;AAI3C,eAAO,MAAM,oBAAoB,gFA2C/B,CAAC;AAIH,eAAO,MAAM,2BAA2B;;SAOvC,CAAC;AAEF,eAAO,MAAM,wBAAwB;cAA0B,OAAO;SAuBpE,CAAC;AAIH,eAAO,MAAM,qBAAqB,6EAYhC,CAAC;AAIH,eAAO,MAAM,0BAA0B,6EAIrC,CAAC;AAIH,eAAO,MAAM,0BAA0B,yMA6BrC,CAAC;AAIH,eAAO,MAAM,iBAAiB,6EAsD5B,CAAC;AAIH,eAAO,MAAM,cAAc,6EA6BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,gFAM3B,CAAC;AAIH,eAAO,MAAM,eAAe,6EAY1B,CAAC;AAIH,eAAO,MAAM,aAAa,6EAyBxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,6EAU3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAUlC,CAAC;AAIH,eAAO,MAAM,WAAW,6EAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,6EAiBzB,CAAC;AAIH,eAAO,MAAM,mBAAmB,4EA6C9B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;WACsC,YAAY;SAmCtF,CAAC;AAIF,eAAO,MAAM,mBAAmB;eAA2B,OAAO;SAShE,CAAC;AAEH,eAAO,MAAM,8BAA8B,yMA8BzC,CAAC"}

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

@@ -1,10 +1,12 @@
 import styled, { css } from 'styled-components';
-import { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';
-import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButton, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList } from '@pega/cosmos-react-core';
+import { getContrast, hideVisually, meetsContrastGuidelines, parseToHsl, readableColor, rgba, transparentize } from 'polished';
+import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue } from '@pega/cosmos-react-core';
 import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
 import { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';
+import { StyledButtonLink } from '@pega/cosmos-react-core/lib/components/Button/Button';
 import { useCaseViewContext } from './CaseView.context';
 const labelChWidth = 16;
+const inlineEndButtonOffset = '0.375rem';
 export const StyledCaseSummaryFields = styled.div(({ theme }) => {
     return css `
     padding-block: calc(1.5 * ${theme.base.spacing});
@@ -57,7 +59,7 @@ export const StyledCaseHeader = styled.header(({ theme }) => {
     return css `
     background-color: ${theme.base.palette['brand-primary']};
     color: ${color};
-    padding: calc(2 * ${theme.base.spacing});
+    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
     position: relative;
     h1:focus-visible {
@@ -82,10 +84,10 @@ export const StyledCaseIconWrap = styled.div(({ theme }) => {
     return css `
     background: ${backgroundColor};
     border-radius: calc(${borderRadius} / 2);
-    width: calc(5 * ${spacing});
-    height: calc(5 * ${spacing});
+    width: calc(3 * ${spacing});
+    height: calc(3 * ${spacing});
     ${StyledIcon} {
-      font-size: calc(3 * ${spacing});
+      font-size: calc(2 * ${spacing});
       margin: auto;
     }
   `;
@@ -115,6 +117,7 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
   `;
     return css `
     word-break: break-word;
+    padding-inline-end: calc(2 * ${theme.base.spacing});
     ${StyledSubheading} {
       ${idStyle}
@@ -140,18 +143,36 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
       }
     }
-    > ${StyledText} > ${StyledButton} {
+    > ${StyledText} > ${StyledLink} {
       color: ${color};
     }
   `;
 });
 StyledCaseHeaderText.defaultProps = defaultThemeProp;
-export const StyledPromotedActions = styled.div(({ theme }) => {
+export const StyledHeaderBreadcrumbBlock = styled.div(({ breadcrumbWidth }) => {
+    return css `
+      width: ${breadcrumbWidth ? `${breadcrumbWidth}px` : '100%'};
+      max-width: 100%;
+    `;
+});
+export const StyledHeaderSummaryBlock = styled.div(({ hasItems, theme }) => {
+    const { base: { spacing, palette: { 'brand-primary': primary } } } = theme;
+    const color = readableColor(primary);
+    const transparentColor = tryCatch(() => transparentize(0.5, color));
     return css `
-    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    border-inline-start: 0.0625rem solid transparent;
+    ${hasItems &&
+        css `
+      border-color: ${transparentColor};
+    `}
+    ${StyledStackedFieldValue}:first-child {
+      margin-inline-start: calc(2 * ${spacing});
+    }
   `;
 });
-StyledPromotedActions.defaultProps = defaultThemeProp;
+StyledHeaderSummaryBlock.defaultProps = defaultThemeProp;
 export const StyledCaseSummaryInfo = styled.div(() => {
     const { intelligentGuidance } = useCaseViewContext();
     return css `
@@ -165,6 +186,12 @@ export const StyledCaseSummaryInfo = styled.div(() => {
   `;
 });
 StyledCaseSummaryInfo.defaultProps = defaultThemeProp;
+export const StyledCaseSummaryContainer = styled.div(({ theme }) => {
+    return css `
+    padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
+  `;
+});
+StyledCaseSummaryContainer.defaultProps = defaultThemeProp;
 export const StyledExpandCollapseButton = styled(Button)(({ theme }) => {
     const { summaryExpanded } = useCaseViewContext();
     return css `
@@ -184,13 +211,20 @@ export const StyledExpandCollapseButton = styled(Button)(({ theme }) => {
     ${StyledIcon} {
       width: 1.5rem;
       height: 1.5rem;
-      transform: rotate(${summaryExpanded ? 0 : css `180deg`});
+      ${summaryExpanded
+        ? css `
+            transform: rotate(0);
+          `
+        : css `
+            transform: rotate(180deg);
+          `}
     }
   `;
 });
 StyledExpandCollapseButton.defaultProps = defaultThemeProp;
-export const StyledCaseSummary = styled.div(() => {
+export const StyledCaseSummary = styled.div(({ theme }) => {
     const { summaryExpanded, aboveMD, aboveLG } = useCaseViewContext();
+    const { base: { spacing } } = theme;
     return css `
     position: relative;
     height: 100%;
@@ -199,7 +233,13 @@ export const StyledCaseSummary = styled.div(() => {
         css `
       ${summaryExpanded
             ? css `
-            width: ${aboveLG ? css `25rem` : css `22rem`};
+            ${aboveLG
+                ? css `
+                  width: 25rem;
+                `
+                : css `
+                  width: 22rem;
+                `}
             &:focus-within,
             &:hover {
@@ -219,8 +259,16 @@ export const StyledCaseSummary = styled.div(() => {
           `
             : css `
             width: 100%;
             ${StyledExpandCollapseButton} {
               opacity: 1;
+              transform: translateY(50%);
+              margin-inline-start: calc(2 * ${spacing});
+              border-radius: 50%;
+              svg {
+                transform: rotate(-90deg);
+              }
             }
           `}
     `}
@@ -260,7 +308,7 @@ export const StyledUtilToggle = styled.button(({ theme }) => {
     return css `
     align-self: flex-end;
     color: ${theme.base.palette['foreground-color']};
-    margin-inline-end: 0.375rem;
+    margin-inline-end: ${inlineEndButtonOffset};
   `;
 });
 StyledUtilToggle.defaultProps = defaultThemeProp;
@@ -358,4 +406,106 @@ export const StyledCaseView = styled.div(({ theme }) => {
   `;
 });
 StyledCaseView.defaultProps = defaultThemeProp;
+export const StyledHeaderSummary = styled.dl(({ theme }) => {
+    const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
+    const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;
+    const color = readableColor(primary);
+    const transparentColor = tryCatch(() => transparentize(0.1, color));
+    return css `
+    max-width: 100%;
+    min-width: 0;
+    ${StyledLabel} {
+      color: ${transparentColor};
+    }
+    ${StyledFieldValue} {
+      color: ${color};
+    }
+    /* stylelint-disable no-duplicate-selectors */
+    ${StyledLabel},
+    ${StyledFieldValue} {
+      white-space: nowrap;
+    }
+    /* stylelint-enable no-duplicate-selectors */
+    ${StyledButtonLink},
+    ${StyledLink} {
+      &:focus-visible {
+        box-shadow: inset 0 0 0 0.0625rem ${color};
+      }
+      ${!interactiveUsable &&
+        css `
+        color: ${color};
+        text-decoration: underline;
+      `}
+    }
+  `;
+});
+StyledHeaderSummary.defaultProps = defaultThemeProp;
+export const StyledHeaderSummaryValue = styled(StyledFieldValue)(({ bold, truncate, theme }) => {
+    const { base: { 'content-width': { xs } }, components: { text: { h1: { 'font-weight': h1Weight } } } } = theme;
+    return css `
+      overflow: hidden;
+      text-overflow: ellipsis;
+      ${truncate &&
+        css `
+        max-width: ${xs};
+      `}
+      ${bold &&
+        css `
+        font-weight: ${h1Weight};
+      `}
+      /**
+       * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from
+       * factoring into scrollWidth of element when determining truncation.
+       **/
+      > :not([hidden]) {
+        display: inline;
+      }
+    `;
+});
+StyledHeaderSummaryValue.defaultProps = defaultThemeProp;
+export const StyledHeaderActions = styled.div(({ offsetEnd }) => {
+    return css `
+    margin-inline-start: auto;
+    ${offsetEnd &&
+        css `
+      padding-inline-end: ${inlineEndButtonOffset};
+    `}
+  `;
+});
+export const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {
+    const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
+    const interactiveUsable = getContrast(primary, interactive) >= 4.5;
+    const color = interactiveUsable ? interactive : readableColor(primary);
+    let hoverBackground = rgba(color, 0.15);
+    if (interactiveUsable) {
+        hoverBackground = readableHue(hoverBackground, color);
+    }
+    return css `
+    --button-background-color: ${primary};
+    color: ${color};
+    background-color: ${primary};
+    border-color: ${color};
+    @media (hover: hover) {
+      &:hover {
+        --button-background-color: ${hoverBackground};
+        color: ${color};
+        background-color: ${hoverBackground};
+        border-color: ${color};
+      }
+    }
+  `;
+});
+StyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;
 //# sourceMappingURL=CaseView.styles.js.map