@pega/cosmos-react-work 5.0.0-dev.4.7 → 5.0.0-dev.4.8

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

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

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-declare const CaseSummary: FC;
-export default CaseSummary;
-//# sourceMappingURL=CaseSummary.d.ts.map

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

@@ -1 +0,0 @@
-{"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,18 +0,0 @@
-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/CaseHeader';
-import { StyledCaseSummary, StyledCaseSummaryInfo, StyledCaseSummaryContainer } from './CaseView.styles';
-import { useCaseViewContext } from './CaseView.context';
-import CaseSummaryFields from './CaseSummaryFields';
-registerIcon(arrowMicroLeftIcon);
-const CaseSummary = () => {
-    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 +0,0 @@
-{"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

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { CaseSummaryFieldsProps } from './CaseView.types';
-declare const CaseSummaryFields: FC<CaseSummaryFieldsProps & ForwardProps>;
-export default CaseSummaryFields;
-//# sourceMappingURL=CaseSummaryFields.d.ts.map

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

@@ -1 +0,0 @@
-{"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,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { Grid, useI18n, useBreakpoint } from '@pega/cosmos-react-core';
-import { StyledCaseSummaryFields, StyledSummaryPrimaryList, StyledSummarySecondaryList } from './CaseView.styles';
-import { useCaseViewContext } from './CaseView.context';
-const CaseSummaryFields = ({ primary, secondary, inSummaryPanel }) => {
-    const t = useI18n();
-    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 +0,0 @@
-{"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.context.d.ts

@@ -1,5 +0,0 @@
-import { CaseViewContextValue } from './CaseView.types';
-declare const CaseViewContext: import("react").Context<CaseViewContextValue>;
-export declare const useCaseViewContext: () => CaseViewContextValue;
-export default CaseViewContext;
-//# sourceMappingURL=CaseView.context.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CaseView.context.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CAAkE,CAAC;AAExF,eAAO,MAAM,kBAAkB,4BAAoC,CAAC;AAEpE,eAAe,eAAe,CAAC"}

package/lib/components/CaseView/CaseView.context.js

@@ -1,5 +0,0 @@
-import { createContext, useContext } from 'react';
-const CaseViewContext = createContext({});
-export const useCaseViewContext = () => useContext(CaseViewContext);
-export default CaseViewContext;
-//# sourceMappingURL=CaseView.context.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CaseView.context.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIlD,MAAM,eAAe,GAAG,aAAa,CAAuB,EAA0B,CAAC,CAAC;AAExF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAEpE,eAAe,eAAe,CAAC","sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { CaseViewContextValue } from './CaseView.types';\n\nconst CaseViewContext = createContext<CaseViewContextValue>({} as CaseViewContextValue);\n\nexport const useCaseViewContext = () => useContext(CaseViewContext);\n\nexport default CaseViewContext;\n"]}

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

@@ -1,8 +0,0 @@
-import { FC } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { CaseViewProps } from './CaseView.types';
-declare const _default: FC<CaseViewProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header", "heading", "subheading", "icon", "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 +0,0 @@
-{"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;;;;AAupBvE,wBAAyD"}

package/lib/components/CaseView/CaseView.js

@@ -1,421 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useLayoutEffect, useState } from 'react';
-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, StyledExpandCollapseUtilitiesButton, StyledUtilitiesHeading } from './CaseView.styles';
-import CaseViewContext from './CaseView.context';
-import CaseSummaryFields from './CaseSummaryFields';
-import { getCaseViewTestIds } from './CaseView.test-ids';
-registerIcon(moveRightSolidIcon, moveLeftSolidIcon);
-// 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
-summaryFields, summaryExpanded: summaryExpandedProp = true, onToggleSummary, 
-// Case tabs
-tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick }, 
-// Workarea related content props
-banners, stages, tasks, tabContent: tabContentProp = [], 
-// Utilities content and state props
-utilities, utilitiesSummaryItems, utilitiesExpanded: utilitiesExpandedProp = true, onToggleUtilities, 
-// Etc...
-persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
-    const testIds = useTestIds(testId, getCaseViewTestIds);
-    // General util hooks
-    const t = useI18n();
-    const direction = useDirection();
-    const { loadedRef } = useConfiguration();
-    // 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}`;
-    // Summary state handling
-    let summaryExpanded = !isPreview && !!summaryExpandedProp;
-    if (persistentUtility) {
-        summaryExpanded = xlOrAbove;
-    }
-    // Focus heading on initial mount
-    useEffect(() => {
-        if (!caseViewRef.current)
-            return;
-        if (loadedRef.current) {
-            focusHeadingOrContainer(caseViewRef.current, heading);
-        }
-        else {
-            loadedRef.current = true;
-        }
-    }, [caseId]);
-    // Utilities state handling
-    // Used in coordination with a layoutEffect below to determine the utilities state on initial render.
-    // Attempted with a ref but it did not work. Using state and enforcing a render in addition to the change render for lgOrAbove seems to fix...
-    const [obeyUtilitiesExpandedProp, setObeyUtilitiesExpandedProp] = useState(lgOrAbove);
-    // Allow the utilitiesExpandedProp to drive the utilities' state after the initial render
-    useLayoutEffect(() => {
-        if (lgOrAbove)
-            setObeyUtilitiesExpandedProp(true);
-    }, [lgOrAbove]);
-    // Tracks whether a resize forced the onToggleUtilities to close the utilities when it's a drawer
-    const utilitiesToggledByResize = useRef(false);
-    // If the initial render is within the MD size, where the utility drawer renders, it must begin collapsed
-    const utilitiesExpanded = obeyUtilitiesExpandedProp ? utilitiesExpandedProp : false;
-    // Handles utilities state based on breakpoint changes.
-    useAfterInitialEffect(() => {
-        // If we change into the MD breakpoint range and the utilities state is expanded call the toggle prop to collapse it with controlled state
-        if (mdOrAbove && !lgOrAbove && utilitiesExpandedProp) {
-            onToggleUtilities?.();
-            utilitiesToggledByResize.current = true;
-        }
-        if (lgOrAbove) {
-            if (utilitiesToggledByResize.current && !utilitiesExpandedProp) {
-                onToggleUtilities?.();
-            }
-            utilitiesToggledByResize.current = false;
-        }
-        // Purposely not listing utilitiesExpanded as a dependency as it is not a trigger and will be captured when BPs change
-    }, [mdOrAbove, lgOrAbove]);
-    // Handles focus of toggle button when toggled in drawer mode and when browser is resized
-    useEffect(() => {
-        if (isToggleButtonFocused.current) {
-            toggleButtonRef.current?.focus();
-        }
-        if (!toggleButtonRef.current) {
-            // Toggle button is not on DOM.
-            isToggleButtonFocused.current = false;
-        }
-    }, [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: _jsx(CaseSummaryFields, { ...summaryFields }) }) }))
-        };
-        let items = tabItemsProp;
-        let content = tabContentProp;
-        if (mdOrAbove) {
-            if (!summaryExpanded || (persistentUtility && !xlOrAbove)) {
-                items = [summaryTab, ...tabItemsProp];
-                content = [summaryTabContent, ...tabContentProp];
-            }
-            return [items, content];
-        }
-        const utilityTabsItems = [];
-        const utilityTabsContent = [];
-        if (utilities) {
-            utilityTabsItems.push({ id: utilitiesTabId, name: t('utilities') });
-            utilityTabsContent.push({
-                id: utilitiesTabId,
-                content: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: utilities })
-            });
-        }
-        if (persistentUtility) {
-            utilityTabsItems.push({ id: persistentUtilityTabId, name: persistentUtility.title });
-            utilityTabsContent.push({ id: persistentUtilityTabId, content: persistentUtility?.content });
-        }
-        items = [summaryTab, ...tabItemsProp, ...utilityTabsItems];
-        content = [summaryTabContent, ...tabContentProp, ...utilityTabsContent];
-        return [items, content];
-    }, [
-        tabItemsProp,
-        summaryTabId,
-        mdOrAbove,
-        summaryExpanded,
-        persistentUtility,
-        xlOrAbove,
-        tabContentProp,
-        utilities,
-        utilitiesTabId,
-        persistentUtilityTabId
-    ]);
-    // Grid layout props
-    let caseViewGridContainer = {
-        cols: 'minmax(0, 1fr)',
-        colGap: 0,
-        rows: 'minmax(0, max-content) auto',
-        areas: `
-      "summary"
-      "work-area"
-    `
-    };
-    const sharedGridProps = {
-        colGap: 2,
-        rows: caseViewGridContainer.rows
-    };
-    if (persistentUtility) {
-        if (xlOrAbove) {
-            caseViewGridContainer = {
-                ...sharedGridProps,
-                cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',
-                areas: '"summary work-area persistentUtility utilities"'
-            };
-        }
-        else if (mdOrAbove) {
-            caseViewGridContainer = {
-                ...sharedGridProps,
-                cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',
-                areas: `
-          "summary summary summary"
-          "work-area persistentUtility utilities"
-        `
-            };
-        }
-    }
-    else if (summaryExpanded) {
-        if (mdOrAbove) {
-            caseViewGridContainer = {
-                ...sharedGridProps,
-                cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',
-                areas: '"summary work-area utilities"'
-            };
-        }
-    }
-    else if (mdOrAbove) {
-        caseViewGridContainer = {
-            ...sharedGridProps,
-            cols: 'minmax(0, 1fr) minmax(0, max-content)',
-            areas: `
-            "summary summary"
-            "work-area utilities"
-          `
-        };
-    }
-    // Apply sticky columns
-    const scrollStickOptions = useRef({
-        elements: []
-    });
-    const stickOffset = useMemo(() => {
-        if (windowIsAvailable && caseViewRef.current) {
-            return parseFloat(window.getComputedStyle(caseViewRef.current).getPropertyValue('--appshell-offset'));
-        }
-        return 0;
-    }, [caseViewRef.current]);
-    useScrollStick(
-    // isMediumOrAbove means side by side columns | | |
-    mdOrAbove ? { ...scrollStickOptions.current, offset: stickOffset } : undefined);
-    // Preview set summary tab active
-    useEffect(() => {
-        if (isPreview) {
-            onTabClick(summaryTabId);
-        }
-    }, []);
-    // Initial tab selection
-    useEffect(() => {
-        if (mdOrAbove &&
-            summaryExpanded &&
-            !persistentUtility &&
-            (currentTabId === summaryTabId || currentTabId === utilitiesTabId)) {
-            onTabClick(tabItemsProp[0]?.id);
-        }
-        // Toggle utilities tab selection
-        if (mdOrAbove && [utilitiesTabId, persistentUtilityTabId].includes(currentTabId)) {
-            onTabClick(initialTabId);
-        }
-    }, [mdOrAbove]);
-    // Initial / summary tab selection
-    useEffect(() => {
-        if (!smOrAbove && currentTabId === initialTabId) {
-            onTabClick(summaryTabId);
-        }
-        else if (smOrAbove && currentTabId === summaryTabId) {
-            onTabClick(initialTabId);
-        }
-    }, [smOrAbove]);
-    // Summary tab selection
-    useEffect(() => {
-        if (isPreview) {
-            onTabClick(summaryTabId);
-        }
-    }, [isPreview]);
-    // Initial tab selection
-    useEffect(() => {
-        if (summaryExpanded && currentTabId === summaryTabId) {
-            onTabClick(initialTabId);
-        }
-    }, [summaryExpanded]);
-    // Handles scrolling to tab content for newly clicked tab
-    useEffect(() => {
-        if (!tabContentEl)
-            return;
-        const scrollPos = window.scrollY;
-        const windowHeight = document.documentElement.clientHeight;
-        const bottomPos = scrollPos + windowHeight * 0.8;
-        const tabContentPos = tabContentEl.offsetTop;
-        if (tabContentPos > bottomPos) {
-            const top = tabContentPos - windowHeight * 0.2;
-            window.scrollTo({ top, behavior: 'smooth' });
-        }
-    }, [currentTabId]);
-    // We need a css variable for the height of the case summary when it is collapsed into a header like layout
-    useLayoutEffect(() => {
-        if (!caseViewRef.current || !summaryRef.current)
-            return;
-        caseViewRef.current.style.setProperty('--summary-height', `${!summaryExpanded ? summaryRef.current.offsetHeight : 0}px`);
-    }, [summaryExpanded]);
-    // CaseView context value
-    // Choosing not to memo for now due to extent of deps and how often they change. Optimize as needed.
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
-    const ctxValue = {
-        testIds,
-        caseId,
-        heading,
-        subheading,
-        caseLink,
-        parentCases,
-        icon,
-        followed,
-        onFollowedChange,
-        actions,
-        promotedActions,
-        onEdit,
-        summaryFields,
-        tabs: {
-            items: tabItems,
-            onClick: onTabClick,
-            currentTabId
-        },
-        stages,
-        tasks,
-        persistentUtility,
-        intelligentGuidance,
-        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, { "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), ref: (el) => {
-                                workAreaRef.current = el;
-                                if (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
-                            }, item: {
-                                area: 'utilities'
-                            }, "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)) &&
-                                    utilitiesSummaryItems &&
-                                    utilitiesSummaryItems.length > 0 && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems }))] }))] }) }), intelligentGuidance] }));
-};
-export default withTestIds(CaseView, getCaseViewTestIds);
-//# sourceMappingURL=CaseView.js.map