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

package/lib/components/CaseView/CaseHeader/Summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Summary.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react';\n\nimport {\n  Flex,\n  getEdge,\n  registerIcon,\n  StyledStackedFieldValue,\n  StyledLabel,\n  StyledFieldName,\n  useDirection,\n  useChToPxConversionFactor,\n  NoValue\n} from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n  StyledHeaderSummary,\n  StyledHeaderSummaryValue,\n  StyledHeaderSummaryBlock\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\nimport { SummaryField } from '../CaseView.types';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst Field = ({\n  item,\n  primary,\n  truncate\n}: {\n  item: SummaryField;\n  primary: boolean;\n  truncate: boolean;\n}) => {\n  const { name, value, simpleValue } = item;\n  const displayValue = simpleValue ?? value ?? <NoValue />;\n\n  return (\n    <StyledStackedFieldValue>\n      <StyledLabel as={StyledFieldName}>{name}</StyledLabel>\n      <StyledHeaderSummaryValue bold={primary} truncate={truncate}>\n        {displayValue}\n      </StyledHeaderSummaryValue>\n    </StyledStackedFieldValue>\n  );\n};\n\nconst Summary = ({ siblingRef }: { siblingRef: RefObject<HTMLDivElement> }) => {\n  const { ltr } = useDirection();\n  const { summaryFields } = useCaseViewContext();\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDListElement>(null);\n\n  const primaryItems = summaryFields?.primary ?? [];\n  const secondaryItems = summaryFields?.secondary ?? [];\n  const items = [...primaryItems, ...secondaryItems];\n\n  const [displayCount, setDisplayCount] = useState(items.length);\n  const [truncatedIndices, setTruncatedIndices] = useState<number[] | undefined>(\n    items.map((_, i) => i)\n  );\n\n  const priorTrailingEdgeStack = useRef<number[]>([]);\n  const priorAvailableSpace = useRef<number | null>(null);\n\n  const evalItemAddition = ({\n    nextSiblingLeadingEdge\n  }: {\n    nextSiblingLeadingEdge: number;\n  }): {\n    indicesToTruncate: number[];\n    nextDisplayCount: number;\n  } => {\n    const indicesToTruncate: number[] = truncatedIndices ? [...truncatedIndices] : [];\n    let nextDisplayCount = displayCount;\n\n    const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();\n    for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {\n      const priorEdge = reversedTrailingEdgeStack[i];\n\n      const shouldRender = ltr\n        ? priorEdge < nextSiblingLeadingEdge\n        : priorEdge > nextSiblingLeadingEdge;\n\n      if (shouldRender) {\n        priorTrailingEdgeStack.current.pop();\n\n        if (!indicesToTruncate.includes(nextDisplayCount)) {\n          indicesToTruncate.push(nextDisplayCount);\n        }\n\n        nextDisplayCount += 1;\n      } else {\n        break;\n      }\n    }\n\n    return { indicesToTruncate, nextDisplayCount };\n  };\n\n  const evalTruncationReduction = ({\n    listChildren,\n    availableSpace\n  }: {\n    listChildren: Element[];\n    availableSpace: number;\n  }): {\n    indicesToTruncate: number[];\n  } => {\n    const indicesToTruncate: number[] = [];\n    let hasAvailableSpace = availableSpace;\n\n    listChildren.forEach((item, index) => {\n      const valueEl = item.lastChild as HTMLElement;\n      const truncatedSpace = Math.floor(valueEl.scrollWidth - valueEl.offsetWidth);\n      const shouldTruncate = truncatedSpace === 0 ? false : hasAvailableSpace - truncatedSpace <= 0;\n\n      if (shouldTruncate) {\n        if (!truncatedIndices?.includes(index)) {\n          hasAvailableSpace += truncatedSpace;\n        }\n\n        indicesToTruncate.push(index);\n      } else if (truncatedIndices?.includes(index)) {\n        hasAvailableSpace -= truncatedSpace;\n      }\n    });\n\n    return { indicesToTruncate };\n  };\n\n  const evalTruncationIncrease = ({\n    listChildren,\n    availableSpace\n  }: {\n    listChildren: Element[];\n    availableSpace: number;\n  }): {\n    indicesToTruncate: number[];\n    availableSpace: number;\n  } => {\n    const indicesToTruncate: number[] = [];\n    const lastIndex = listChildren.length - 1;\n    let hasAvailableSpace = availableSpace;\n\n    [...listChildren].reverse().forEach((item, index) => {\n      if (truncatedIndices?.includes(lastIndex - index)) {\n        indicesToTruncate.push(lastIndex - index);\n      } else if (hasAvailableSpace < 0) {\n        const truncatedElMaxWidth = 20 * chToPxConversionFactor;\n        const valueEl = item.lastChild as HTMLElement;\n        const spaceToTruncate = Math.max(Math.floor(valueEl.offsetWidth - truncatedElMaxWidth), 0);\n\n        if (spaceToTruncate) {\n          indicesToTruncate.push(lastIndex - index);\n          hasAvailableSpace += spaceToTruncate;\n        }\n      }\n    });\n\n    return { indicesToTruncate, availableSpace: hasAvailableSpace };\n  };\n\n  const evalItemRemoval = ({\n    listChildren,\n    availableSpace,\n    nextSiblingLeadingEdge\n  }: {\n    listChildren: Element[];\n    availableSpace: number;\n    nextSiblingLeadingEdge: number;\n  }): { displayCount: number } => {\n    let nextDisplayCount = displayCount;\n    let hasAvailableSpace = availableSpace;\n    let lastChildIndex = listChildren.length - 1;\n\n    do {\n      const itemTrailingEdge = getEdge({\n        el: listChildren[lastChildIndex],\n        side: 'trailing',\n        ltr\n      });\n      hasAvailableSpace = Math.floor(\n        ltr ? nextSiblingLeadingEdge - itemTrailingEdge : itemTrailingEdge - nextSiblingLeadingEdge\n      );\n\n      if (hasAvailableSpace < 0) {\n        priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];\n\n        nextDisplayCount -= 1;\n        lastChildIndex -= 1;\n      }\n    } while (hasAvailableSpace < 0 && lastChildIndex > -1);\n\n    return { displayCount: nextDisplayCount };\n  };\n\n  const evaluateSummaryDisplay = () => {\n    const containerEl = containerRef.current;\n    if (!containerEl) return;\n\n    const listChildren = Array.from(listRef.current?.children ?? []);\n    const lastSummaryItem = listChildren.length ? listChildren[listChildren.length - 1] : undefined;\n    const nextSibling = siblingRef?.current ?? document.body;\n    const nextSiblingLeadingEdge = getEdge({\n      el: nextSibling,\n      side: 'leading',\n      ltr\n    });\n    const testEdge = lastSummaryItem\n      ? getEdge({ el: lastSummaryItem, side: 'trailing', ltr })\n      : getEdge({ el: containerEl, side: 'leading', ltr });\n    let availableSpace = Math.floor(\n      ltr ? nextSiblingLeadingEdge - testEdge : testEdge - nextSiblingLeadingEdge\n    );\n    if (availableSpace === priorAvailableSpace.current) return;\n\n    priorAvailableSpace.current = availableSpace;\n\n    let indicesToTruncate: number[] | undefined;\n    let nextDisplayCount = displayCount;\n\n    if (availableSpace >= 0) {\n      if (displayCount !== items.length) {\n        const additionsConfig = evalItemAddition({ nextSiblingLeadingEdge });\n\n        indicesToTruncate = additionsConfig.indicesToTruncate;\n        nextDisplayCount = additionsConfig.nextDisplayCount;\n      } else if (truncatedIndices?.length) {\n        const truncationConfig = evalTruncationReduction({\n          listChildren,\n          availableSpace\n        });\n\n        indicesToTruncate = truncationConfig.indicesToTruncate;\n      }\n    } else if (listChildren) {\n      const truncationConfig = evalTruncationIncrease({\n        listChildren,\n        availableSpace\n      });\n\n      indicesToTruncate = truncationConfig.indicesToTruncate;\n      availableSpace = truncationConfig.availableSpace;\n\n      if (availableSpace < 0) {\n        const removalConfig = evalItemRemoval({\n          listChildren,\n          availableSpace,\n          nextSiblingLeadingEdge\n        });\n\n        nextDisplayCount = removalConfig.displayCount;\n      }\n    }\n\n    setDisplayCount(nextDisplayCount);\n\n    if (indicesToTruncate) {\n      setTruncatedIndices(indicesToTruncate);\n    }\n  };\n\n  // Initial display evaluation\n  useEffect(() => {\n    evaluateSummaryDisplay();\n  }, []);\n\n  // Overflow resize observer\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(evaluateSummaryDisplay);\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current, { box: 'border-box' });\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [evaluateSummaryDisplay]);\n\n  return (\n    <Flex\n      as={StyledHeaderSummaryBlock}\n      item={{ grow: 1, shrink: 1 }}\n      container={{ pad: [0.5, 0], alignItems: 'center' }}\n      ref={containerRef}\n      hasItems={displayCount > 0}\n    >\n      <Flex as={StyledHeaderSummary} container={{ gap: 4 }} ref={listRef}>\n        {items.slice(0, displayCount).map((item, index) => {\n          return (\n            <Field\n              item={item}\n              primary={!!primaryItems?.length && index < primaryItems.length}\n              truncate={!!truncatedIndices?.includes(index)}\n              key={item.name}\n            />\n          );\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Summary;\n"]}

package/lib/components/CaseView/CaseSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAW3B,QAAA,MAAM,WAAW,EAAE,EAuBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAgBpC,QAAA,MAAM,WAAW,EAAE,EA6BlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CaseView/CaseSummary.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { Flex, Tabs, registerIcon } from '@pega/cosmos-react-core';
 import * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';
-import CaseHeader from './CaseHeader';
-import { StyledCaseSummary, StyledCaseSummaryInfo } from './CaseView.styles';
+import CaseHeader from './CaseHeader/CaseHeader';
+import { StyledCaseSummary, StyledCaseSummaryInfo, StyledCaseSummaryContainer } from './CaseView.styles';
 import { useCaseViewContext } from './CaseView.context';
+import CaseSummaryFields from './CaseSummaryFields';
 registerIcon(arrowMicroLeftIcon);
 const CaseSummary = () => {
-    const { summary, summaryExpanded, tabs, aboveMD, isPreview } = useCaseViewContext();
-    return (_jsxs(Flex, { as: StyledCaseSummary, container: { direction: 'column' }, item: { shrink: 0 }, children: [_jsx(CaseHeader, {}), aboveMD && !isPreview && summaryExpanded && (summary || tabs.items.length > 1) && (_jsxs(StyledCaseSummaryInfo, { children: [summary, tabs.items.length > 1 && (_jsx(Tabs, { type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }))] }))] }));
+    const { testIds, summaryFields, summaryExpanded, tabs, aboveMD, isPreview } = useCaseViewContext();
+    const summary = useMemo(() => {
+        return _jsx(CaseSummaryFields, { ...summaryFields, inSummaryPanel: true });
+    }, [summaryFields]);
+    return (_jsxs(Flex, { as: StyledCaseSummary, container: { direction: 'column' }, item: { shrink: 0 }, children: [_jsx(CaseHeader, {}), aboveMD && !isPreview && summaryExpanded && (summary || tabs.items.length > 1) && (_jsxs(StyledCaseSummaryInfo, { children: [_jsx(StyledCaseSummaryContainer, { children: summary }), tabs.items.length > 1 && (_jsx(Tabs, { "data-testid": testIds.tabs, type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }))] }))] }));
 };
 export default CaseSummary;
 //# sourceMappingURL=CaseSummary.js.map

package/lib/components/CaseView/CaseSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummary.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAE9G,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,YAAY,CAAC,kBAAkB,CAAC,CAAC;AAEjC,MAAM,WAAW,GAAO,GAAG,EAAE;IAC3B,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAEpF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAClF,KAAC,UAAU,KAAG,EAEb,OAAO,IAAI,CAAC,SAAS,IAAI,eAAe,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACjF,MAAC,qBAAqB,eACnB,OAAO,EAEP,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,KAAC,IAAI,IACH,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,YAAY,EAAE,IAAI,CAAC,YAAY,GAC/B,CACH,IACqB,CACzB,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Tabs, registerIcon } from '@pega/cosmos-react-core';\nimport * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';\n\nimport CaseHeader from './CaseHeader';\nimport { StyledCaseSummary, StyledCaseSummaryInfo } from './CaseView.styles';\nimport { useCaseViewContext } from './CaseView.context';\n\nregisterIcon(arrowMicroLeftIcon);\n\nconst CaseSummary: FC = () => {\n  const { summary, summaryExpanded, tabs, aboveMD, isPreview } = useCaseViewContext();\n\n  return (\n    <Flex as={StyledCaseSummary} container={{ direction: 'column' }} item={{ shrink: 0 }}>\n      <CaseHeader />\n\n      {aboveMD && !isPreview && summaryExpanded && (summary || tabs.items.length > 1) && (\n        <StyledCaseSummaryInfo>\n          {summary}\n\n          {tabs.items.length > 1 && (\n            <Tabs\n              type='vertical'\n              tabs={tabs.items}\n              onTabClick={tabs.onClick}\n              currentTabId={tabs.currentTabId}\n            />\n          )}\n        </StyledCaseSummaryInfo>\n      )}\n    </Flex>\n  );\n};\n\nexport default CaseSummary;\n"]}
+{"version":3,"file":"CaseSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAE9G,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC3B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,YAAY,CAAC,kBAAkB,CAAC,CAAC;AAEjC,MAAM,WAAW,GAAO,GAAG,EAAE;IAC3B,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,GACzE,kBAAkB,EAAE,CAAC;IAEvB,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,KAAC,iBAAiB,OAAK,aAAa,EAAE,cAAc,SAAG,CAAC;IACjE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAClF,KAAC,UAAU,KAAG,EAEb,OAAO,IAAI,CAAC,SAAS,IAAI,eAAe,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACjF,MAAC,qBAAqB,eACpB,KAAC,0BAA0B,cAAE,OAAO,GAA8B,EAEjE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,YAAY,EAAE,IAAI,CAAC,YAAY,GAC/B,CACH,IACqB,CACzB,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, useMemo } from 'react';\n\nimport { Flex, Tabs, registerIcon } from '@pega/cosmos-react-core';\nimport * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';\n\nimport CaseHeader from './CaseHeader/CaseHeader';\nimport {\n  StyledCaseSummary,\n  StyledCaseSummaryInfo,\n  StyledCaseSummaryContainer\n} from './CaseView.styles';\nimport { useCaseViewContext } from './CaseView.context';\nimport CaseSummaryFields from './CaseSummaryFields';\n\nregisterIcon(arrowMicroLeftIcon);\n\nconst CaseSummary: FC = () => {\n  const { testIds, summaryFields, summaryExpanded, tabs, aboveMD, isPreview } =\n    useCaseViewContext();\n\n  const summary = useMemo(() => {\n    return <CaseSummaryFields {...summaryFields} inSummaryPanel />;\n  }, [summaryFields]);\n\n  return (\n    <Flex as={StyledCaseSummary} container={{ direction: 'column' }} item={{ shrink: 0 }}>\n      <CaseHeader />\n\n      {aboveMD && !isPreview && summaryExpanded && (summary || tabs.items.length > 1) && (\n        <StyledCaseSummaryInfo>\n          <StyledCaseSummaryContainer>{summary}</StyledCaseSummaryContainer>\n\n          {tabs.items.length > 1 && (\n            <Tabs\n              data-testid={testIds.tabs}\n              type='vertical'\n              tabs={tabs.items}\n              onTabClick={tabs.onClick}\n              currentTabId={tabs.currentTabId}\n            />\n          )}\n        </StyledCaseSummaryInfo>\n      )}\n    </Flex>\n  );\n};\n\nexport default CaseSummary;\n"]}

package/lib/components/CaseView/CaseSummaryFields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSummaryFields.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummaryFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAQ,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAOtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,GAAG,YAAY,CAwBhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"CaseSummaryFields.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummaryFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA2B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAQ,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAOrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,GAAG,YAAY,CAsChE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/CaseView/CaseSummaryFields.js

@@ -1,9 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid, useI18n } from '@pega/cosmos-react-core';
+import { useRef } from 'react';
+import { Grid, useI18n, useBreakpoint } from '@pega/cosmos-react-core';
 import { StyledCaseSummaryFields, StyledSummaryPrimaryList, StyledSummarySecondaryList } from './CaseView.styles';
-const CaseSummaryFields = ({ primary, secondary }) => {
+import { useCaseViewContext } from './CaseView.context';
+const CaseSummaryFields = ({ primary, secondary, inSummaryPanel }) => {
     const t = useI18n();
-    return (_jsxs(Grid, { as: StyledCaseSummaryFields, container: { rowGap: 2 }, children: [primary && (_jsx(StyledSummaryPrimaryList, { variant: 'stacked', fields: primary, "aria-label": t('primary_summary_fields') })), secondary && (_jsx(StyledSummarySecondaryList, { variant: 'inline', fields: secondary, "aria-label": t('summary_fields') }))] }));
+    const { testIds } = useCaseViewContext();
+    const containerRef = useRef(null);
+    const isSMContentWidthOrAbove = useBreakpoint('sm', {
+        breakpointRef: containerRef,
+        themeProp: 'content-width'
+    });
+    const wrapped = !inSummaryPanel && !isSMContentWidthOrAbove;
+    return (_jsxs(Grid, { "data-testid": testIds.summaryFields, as: StyledCaseSummaryFields, container: { rowGap: 2 }, ref: containerRef, children: [primary && (_jsx(StyledSummaryPrimaryList, { variant: 'stacked', fields: primary, "aria-label": t('primary_summary_fields'), wrapped: wrapped })), secondary && (_jsx(StyledSummarySecondaryList, { variant: wrapped ? 'stacked' : 'inline', fields: secondary, "aria-label": t('summary_fields') }))] }));
 };
 export default CaseSummaryFields;
 //# sourceMappingURL=CaseSummaryFields.js.map

package/lib/components/CaseView/CaseSummaryFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummaryFields.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,mBAAmB,CAAC;AAG3B,MAAM,iBAAiB,GAA8C,CAAC,EACpE,OAAO,EACP,SAAS,EAC+B,EAAE,EAAE;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,uBAAuB,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aACxD,OAAO,IAAI,CACV,KAAC,wBAAwB,IACvB,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,OAAO,gBACH,CAAC,CAAC,wBAAwB,CAAC,GACvC,CACH,EACA,SAAS,IAAI,CACZ,KAAC,0BAA0B,IACzB,OAAO,EAAC,QAAQ,EAChB,MAAM,EAAE,SAAS,gBACL,CAAC,CAAC,gBAAgB,CAAC,GAC/B,CACH,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { FC, PropsWithoutRef } from 'react';\n\nimport { Grid, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nimport {\n  StyledCaseSummaryFields,\n  StyledSummaryPrimaryList,\n  StyledSummarySecondaryList\n} from './CaseView.styles';\nimport { CaseSummaryFieldsProps } from './CaseView.types';\n\nconst CaseSummaryFields: FC<CaseSummaryFieldsProps & ForwardProps> = ({\n  primary,\n  secondary\n}: PropsWithoutRef<CaseSummaryFieldsProps>) => {\n  const t = useI18n();\n\n  return (\n    <Grid as={StyledCaseSummaryFields} container={{ rowGap: 2 }}>\n      {primary && (\n        <StyledSummaryPrimaryList\n          variant='stacked'\n          fields={primary}\n          aria-label={t('primary_summary_fields')}\n        />\n      )}\n      {secondary && (\n        <StyledSummarySecondaryList\n          variant='inline'\n          fields={secondary}\n          aria-label={t('summary_fields')}\n        />\n      )}\n    </Grid>\n  );\n};\n\nexport default CaseSummaryFields;\n"]}
+{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseSummaryFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAgB,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAErF,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,iBAAiB,GAA8C,CAAC,EACpE,OAAO,EACP,SAAS,EACT,cAAc,EAC0B,EAAE,EAAE;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACzC,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,CAAC,cAAc,IAAI,CAAC,uBAAuB,CAAC;IAE5D,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,aAAa,EAClC,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACxB,GAAG,EAAE,YAAY,aAEhB,OAAO,IAAI,CACV,KAAC,wBAAwB,IACvB,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,OAAO,gBACH,CAAC,CAAC,wBAAwB,CAAC,EACvC,OAAO,EAAE,OAAO,GAChB,CACH,EACA,SAAS,IAAI,CACZ,KAAC,0BAA0B,IACzB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACvC,MAAM,EAAE,SAAS,gBACL,CAAC,CAAC,gBAAgB,CAAC,GAC/B,CACH,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { FC, PropsWithoutRef, useRef } from 'react';\n\nimport { Grid, ForwardProps, useI18n, useBreakpoint } from '@pega/cosmos-react-core';\n\nimport {\n  StyledCaseSummaryFields,\n  StyledSummaryPrimaryList,\n  StyledSummarySecondaryList\n} from './CaseView.styles';\nimport { CaseSummaryFieldsProps } from './CaseView.types';\nimport { useCaseViewContext } from './CaseView.context';\n\nconst CaseSummaryFields: FC<CaseSummaryFieldsProps & ForwardProps> = ({\n  primary,\n  secondary,\n  inSummaryPanel\n}: PropsWithoutRef<CaseSummaryFieldsProps>) => {\n  const t = useI18n();\n  const { testIds } = useCaseViewContext();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const isSMContentWidthOrAbove = useBreakpoint('sm', {\n    breakpointRef: containerRef,\n    themeProp: 'content-width'\n  });\n  const wrapped = !inSummaryPanel && !isSMContentWidthOrAbove;\n\n  return (\n    <Grid\n      data-testid={testIds.summaryFields}\n      as={StyledCaseSummaryFields}\n      container={{ rowGap: 2 }}\n      ref={containerRef}\n    >\n      {primary && (\n        <StyledSummaryPrimaryList\n          variant='stacked'\n          fields={primary}\n          aria-label={t('primary_summary_fields')}\n          wrapped={wrapped}\n        />\n      )}\n      {secondary && (\n        <StyledSummarySecondaryList\n          variant={wrapped ? 'stacked' : 'inline'}\n          fields={secondary}\n          aria-label={t('summary_fields')}\n        />\n      )}\n    </Grid>\n  );\n};\n\nexport default CaseSummaryFields;\n"]}

package/lib/components/CaseView/CaseView.d.ts

@@ -1,6 +1,8 @@
 import { FC } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { CaseViewProps } from './CaseView.types';
-declare const CaseView: FC<CaseViewProps & ForwardProps>;
-export default CaseView;
+declare const _default: FC<CaseViewProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header", "heading", "subheading", "edit", "actions", "promoted-actions", "summary-fields", "banners", "stages", "tasks", "tabs", "tab-content", "utilities"]>;
+};
+export default _default;
 //# sourceMappingURL=CaseView.d.ts.map

package/lib/components/CaseView/CaseView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAyD,MAAM,OAAO,CAAC;AAElF,OAAO,EAUL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMvE,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA+e9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAyD,MAAM,OAAO,CAAC;AAElF,OAAO,EASL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAmBjC,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;;;;AAqpBvE,wBAAyD"}

package/lib/components/CaseView/CaseView.js

@@ -1,15 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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, focusHeadingOrContainer, useConfiguration } from '@pega/cosmos-react-core';
+import { Flex, Grid, Icon, registerIcon, TabPanel, useBreakpoint, useScrollStick, useElement, Card, Drawer, useI18n, useDirection, Tabs, useAfterInitialEffect, windowIsAvailable, focusHeadingOrContainer, useConfiguration, useTestIds, withTestIds } 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 UtilitiesSummary from './UtilitiesSummary';
-import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledWorkArea, StyledPersistentUtility, StyledSummary, StyledSummaryTabContent, StyledUtilities, StyledUtilToggle } from './CaseView.styles';
+import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledWorkArea, StyledPersistentUtility, StyledSummary, StyledSummaryTabContent, StyledUtilities, StyledExpandCollapseUtilitiesButton, StyledUtilitiesHeading } from './CaseView.styles';
 import CaseViewContext from './CaseView.context';
 import CaseSummaryFields from './CaseSummaryFields';
+import { getCaseViewTestIds } from './CaseView.test-ids';
 registerIcon(moveRightSolidIcon, moveLeftSolidIcon);
-const CaseView = ({ 
+// This function is responsible for auto sizing table height in case tab panels.
+const resizeTable = (tabPanelEl, workAreaEl) => {
+    tabPanelEl.style.removeProperty('--content-height-in-view');
+    // .rs-wrapper is currently the class used by the table component which needs to be targeted.
+    const tables = Array.from(tabPanelEl.querySelectorAll('.rs-wrapper')).filter(table => table.getBoundingClientRect().width !== 0);
+    // Only perform this logic when there is a single table in a tab's panel.
+    if (tables.length !== 1)
+        return;
+    // This selector finds the table's root element as they are always wrapped in a Card.
+    const table = tables[0].closest('article');
+    if (!table)
+        return;
+    const tabPanelRect = tabPanelEl.getBoundingClientRect();
+    const tableRect = table.getBoundingClientRect();
+    const vpHeight = document.documentElement.clientHeight;
+    const tableRectOffsetTop = tableRect.top + window.scrollY;
+    const workAreaPaddingBlockEnd = 
+    // px unit are required for proper CSS calc calculation.
+    window.getComputedStyle(workAreaEl).getPropertyValue('padding-block-end') || '0px';
+    // Accounts for content rendered after the table.
+    const tableBottomToTabPanelBottom = tabPanelRect.bottom - tableRect.bottom;
+    // Sets a CSS variable for available height based on screen size and view state.
+    // Defines an available minimum height of ~600px.
+    tabPanelEl.style.setProperty('--content-height-in-view', `max(calc(${vpHeight - tableRectOffsetTop - tableBottomToTabPanelBottom}px - ${workAreaPaddingBlockEnd}), 37.5rem)`);
+};
+const CaseView = ({ testId, 
 // 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
@@ -22,9 +48,7 @@ banners, stages, tasks, tabContent: tabContentProp = [],
 utilities, utilitiesSummaryItems, utilitiesExpanded: utilitiesExpandedProp = true, onToggleUtilities, 
 // Etc...
 persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
-    const summary = useMemo(() => {
-        return _jsx(CaseSummaryFields, { ...summaryFields });
-    }, [summaryFields]);
+    const testIds = useTestIds(testId, getCaseViewTestIds);
     // General util hooks
     const t = useI18n();
     const direction = useDirection();
@@ -32,19 +56,22 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     // Element refs
     const caseViewRef = useRef(null);
     const summaryRef = useRef(null);
+    // undefined used to allow ref to be mutable. Element set below in ref callback for scroll stick.
+    const workAreaRef = useRef();
+    const toggleButtonRef = useRef(null);
+    const isToggleButtonFocused = useRef(false);
     // 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}`;
-    const summaryId = `summary-${caseId}`;
-    const utilitiesId = `utilities-${caseId}`;
-    const utilitiesDrawerId = `utilities-drawer-${caseId}`;
     // Summary state handling
     let summaryExpanded = !isPreview && !!summaryExpandedProp;
     if (persistentUtility) {
@@ -89,57 +116,51 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
         }
         // 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: t('summary') };
-        if (mdOrAbove) {
-            return !summaryExpanded || (persistentUtility && !xlOrAbove)
-                ? [summaryTab, ...tabItemsProp]
-                : tabItemsProp;
+    // Handles focus of toggle button when toggled in drawer mode and when browser is resized
+    useEffect(() => {
+        if (isToggleButtonFocused.current) {
+            toggleButtonRef.current?.focus();
         }
-        const utilityTabs = [];
-        if (utilities)
-            utilityTabs.push({ id: utilitiesTabId, name: t('utilities') });
-        if (persistentUtility && !mdOrAbove) {
-            utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });
+        if (!toggleButtonRef.current) {
+            // Toggle button is not on DOM.
+            isToggleButtonFocused.current = false;
         }
-        return [summaryTab, ...tabItemsProp, ...utilityTabs];
-    }, [
-        mdOrAbove,
-        xlOrAbove,
-        summaryTabId,
-        utilitiesTabId,
-        persistentUtilityTabId,
-        utilities,
-        persistentUtility,
-        tabItemsProp,
-        summaryExpanded
-    ]);
-    // Setup tab content
-    const tabContent = useMemo(() => {
+    }, [utilitiesExpanded, mdOrAbove, lgOrAbove]);
+    // Prepare tabs
+    const [tabItems, tabContent] = useMemo(() => {
+        const summaryTab = { id: summaryTabId, name: t('summary') };
         const summaryTabContent = {
             id: summaryTabId,
-            content: (_jsx(Card, { children: _jsx(StyledSummaryTabContent, { children: summary }) }))
+            content: (_jsx(Card, { children: _jsx(StyledSummaryTabContent, { children: _jsx(CaseSummaryFields, { ...summaryFields }) }) }))
         };
+        let items = tabItemsProp;
+        let content = tabContentProp;
         if (mdOrAbove) {
-            return !summaryExpanded || (persistentUtility && !xlOrAbove)
-                ? [summaryTabContent, ...tabContentProp]
-                : tabContentProp;
+            if (!summaryExpanded || (persistentUtility && !xlOrAbove)) {
+                items = [summaryTab, ...tabItemsProp];
+                content = [summaryTabContent, ...tabContentProp];
+            }
+            return [items, content];
         }
-        const utilityTabs = [];
+        const utilityTabsItems = [];
+        const utilityTabsContent = [];
         if (utilities) {
-            utilityTabs.push({
+            utilityTabsItems.push({ id: utilitiesTabId, name: t('utilities') });
+            utilityTabsContent.push({
                 id: utilitiesTabId,
                 content: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: utilities })
             });
         }
         if (persistentUtility) {
-            utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });
+            utilityTabsItems.push({ id: persistentUtilityTabId, name: persistentUtility.title });
+            utilityTabsContent.push({ id: persistentUtilityTabId, content: persistentUtility?.content });
         }
-        return [summaryTabContent, ...tabContentProp, ...utilityTabs];
+        items = [summaryTab, ...tabItemsProp, ...utilityTabsItems];
+        content = [summaryTabContent, ...tabContentProp, ...utilityTabsContent];
+        return [items, content];
     }, [
+        tabItemsProp,
         summaryTabId,
-        summary,
         mdOrAbove,
         summaryExpanded,
         persistentUtility,
@@ -214,11 +235,13 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
     useScrollStick(
     // isMediumOrAbove means side by side columns | | |
     mdOrAbove ? { ...scrollStickOptions.current, offset: stickOffset } : undefined);
+    // Preview set summary tab active
     useEffect(() => {
         if (isPreview) {
             onTabClick(summaryTabId);
         }
     }, []);
+    // Initial tab selection
     useEffect(() => {
         if (mdOrAbove &&
             summaryExpanded &&
@@ -226,11 +249,32 @@ 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]);
+    // Initial / summary tab selection
     useEffect(() => {
-        if (persistentUtility && currentTabId === persistentUtilityTabId)
+        if (!smOrAbove && currentTabId === initialTabId) {
+            onTabClick(summaryTabId);
+        }
+        else if (smOrAbove && currentTabId === summaryTabId) {
+            onTabClick(initialTabId);
+        }
+    }, [smOrAbove]);
+    // Summary tab selection
+    useEffect(() => {
+        if (isPreview) {
             onTabClick(summaryTabId);
-    }, [persistentUtility]);
+        }
+    }, [isPreview]);
+    // Initial tab selection
+    useEffect(() => {
+        if (summaryExpanded && currentTabId === summaryTabId) {
+            onTabClick(initialTabId);
+        }
+    }, [summaryExpanded]);
     // Handles scrolling to tab content for newly clicked tab
     useEffect(() => {
         if (!tabContentEl)
@@ -252,7 +296,9 @@ 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,
         heading,
         subheading,
@@ -264,49 +310,110 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
         actions,
         promotedActions,
         onEdit,
-        summary,
+        summaryFields,
         tabs: {
             items: tabItems,
             onClick: onTabClick,
             currentTabId
         },
+        stages,
+        tasks,
         persistentUtility,
         intelligentGuidance,
-        summaryId,
         summaryExpanded,
         utilitiesExpanded,
         onToggleSummary,
         isPreview,
+        aboveSM: smOrAbove,
         aboveMD: mdOrAbove,
         aboveLG: lgOrAbove,
         aboveXL: xlOrAbove
     };
+    const currentTabPanelRef = useRef(null);
+    // The following effects are dedicated to resizeTable handling.
+    useLayoutEffect(() => {
+        if (!currentTabPanelRef.current || !workAreaRef.current)
+            return;
+        const currentTabPanelEl = currentTabPanelRef.current;
+        const workAreaEl = workAreaRef.current;
+        resizeTable(currentTabPanelEl, workAreaEl);
+        const onTabChange = () => {
+            resizeTable(currentTabPanelEl, workAreaEl);
+        };
+        // TODO: optimize
+        const mo = new MutationObserver(() => {
+            resizeTable(currentTabPanelEl, workAreaEl);
+        });
+        mo.observe(currentTabPanelEl, { childList: true, subtree: true });
+        currentTabPanelEl.addEventListener('cosmos-tab-changed', onTabChange);
+        return () => {
+            mo.disconnect();
+            currentTabPanelEl.removeEventListener('cosmos-tab-changed', onTabChange);
+        };
+    });
+    const [bannersStagesTasksEl, setBannersStagesTasksEl] = useElement(null);
+    useEffect(() => {
+        if (!bannersStagesTasksEl)
+            return;
+        const observer = new ResizeObserver(() => {
+            if (!currentTabPanelRef.current || !workAreaRef.current)
+                return;
+            resizeTable(currentTabPanelRef.current, workAreaRef.current);
+        });
+        observer.observe(bannersStagesTasksEl);
+        return () => {
+            observer.disconnect();
+        };
+    }, [bannersStagesTasksEl]);
+    useEffect(() => {
+        const onResize = () => {
+            if (!currentTabPanelRef.current || !workAreaRef.current)
+                return;
+            resizeTable(currentTabPanelRef.current, workAreaRef.current);
+        };
+        window.addEventListener('resize', onResize);
+        return () => {
+            window.removeEventListener('resize', onResize);
+        };
+    }, []);
+    const utilitiesHeading = (_jsx(StyledUtilitiesHeading, { variant: 'h2', children: t('utilities') }));
+    const utilitiesToggleButton = (_jsx(StyledExpandCollapseUtilitiesButton, { compact: true, icon: true, label: t(utilitiesExpanded ? 'collapse' : 'expand'), "aria-label": t(utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel'), onClick: () => {
+            if (!obeyUtilitiesExpandedProp && utilitiesExpandedProp) {
+                setObeyUtilitiesExpandedProp(true);
+            }
+            else {
+                onToggleUtilities?.();
+            }
+        }, onFocus: () => {
+            isToggleButtonFocused.current = true;
+        }, onBlur: () => {
+            isToggleButtonFocused.current = false;
+        }, ref: toggleButtonRef, children: _jsx(Icon, { name: 'arrow-micro-left' }) }));
     // Here we go...
-    return (_jsxs(_Fragment, { children: [_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: {
+    return (_jsxs(_Fragment, { children: [_jsx(CaseViewContext.Provider, { value: ctxValue, children: _jsxs(Grid, { "data-testid": testIds.root, ...restProps, as: StyledCaseView, ref: caseViewRef, container: caseViewGridContainer, item: { area: 'case-view' }, children: [_jsx(Grid, { 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) => {
+                            }, as: StyledWorkArea, persistentUtility: Boolean(persistentUtility), ref: (el) => {
+                                workAreaRef.current = el;
                                 if (el)
-                                    (scrollStickOptions.current?.elements).push(el);
+                                    scrollStickOptions.current?.elements.push(el);
+                            }, children: [(banners || stages || tasks) && (_jsxs(Flex, { container: {
+                                        direction: 'column',
+                                        alignContent: 'start',
+                                        rowGap: 2
+                                    }, ref: setBannersStagesTasksEl, 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, ref: currentTabId === id ? currentTabPanelRef : undefined, children: content }, id))) })] }), persistentUtility && mdOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, "data-app-region": true, 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 }, "data-app-region": true, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [utilitiesHeading, utilitiesToggleButton] }), utilities] }) })), utilities && mdOrAbove && (_jsxs(Grid, { "data-testid": testIds.utilities, ref: (el) => {
+                                if (el)
+                                    scrollStickOptions.current?.elements.push(el);
                             }, as: StyledUtilities, container: {
                                 cols: 'minmax(0, 1fr)',
-                                rowGap: 2,
-                                pad: [2, 0, 2]
+                                rowGap: 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 }))] }))] }) }), intelligentGuidance] }));
+                            }, "data-app-region": lgOrAbove || !utilitiesExpanded || undefined, "aria-label": t('utilities_label'), children: [_jsxs(Flex, { container: {
+                                        alignItems: 'center',
+                                        justify: utilitiesExpanded ? 'between' : 'center'
+                                    }, children: [utilitiesHeading, !lgOrAbove && utilitiesExpanded ? null : utilitiesToggleButton] }), utilitiesExpanded && lgOrAbove && utilities, (!utilitiesExpanded || (mdOrAbove && !lgOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems }))] }))] }) }), intelligentGuidance] }));
 };
-export default CaseView;
+export default withTestIds(CaseView, getCaseViewTestIds);
 //# sourceMappingURL=CaseView.js.map