@pega/cosmos-react-work 2.0.0-dev.14.3 → 2.0.0-dev.15.0

package/lib/components/CaseView/CaseView.js

@@ -233,7 +233,7 @@ const CaseView = (props) => {
                         ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
                         : undefined,
                     marginInlineStart: summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove) ? '1rem' : 0
-                } }, { children: [banners && _jsx("div", { children: banners }, void 0), stages && _jsx("div", { children: stages }, void 0), tasks && _jsx("div", { children: tasks }, void 0), (!isMediumOrAbove || persistentUtility || summaryPanelCollapsed) && (_jsx(StyledMobileTabs, { type: 'horizontal', tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId, fullWidth: !isMediumOrAbove }, void 0)), _jsx("div", Object.assign({ ref: setTabContentEl }, { children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, Object.assign({ currentTabId: currentTabId, tabId: id }, { children: content }), id))) }), void 0)] }), void 0), persistentUtility && isMediumOrAbove && (_jsx(Grid, Object.assign({ as: StyledPersistentUtility, item: { area: 'persistentUtility' } }, { children: persistentUtility.content }), void 0)), !isLargeOrAbove && (_jsx(Drawer, Object.assign({ as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility }, { children: _jsxs(Flex, Object.assign({ as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 } }, { children: [_jsx(Flex, Object.assign({ container: { justify: 'end' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_noun', t('utilities_panel')) }, { children: _jsx(Icon, { name: `move-${direction.end}-solid` }, void 0) }), void 0) }), void 0), utilities] }), void 0) }), void 0)), utilities && isMediumOrAbove && (_jsxs(Grid, Object.assign({ ref: (el) => {
+                } }, { children: [banners && _jsx("div", { children: banners }, void 0), stages && _jsx("div", { children: stages }, void 0), tasks && _jsx("div", { children: tasks }, void 0), (!isMediumOrAbove || persistentUtility || summaryPanelCollapsed) && (_jsx(StyledMobileTabs, { type: 'horizontal', tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId, fullWidth: !isMediumOrAbove }, void 0)), _jsx("div", Object.assign({ ref: setTabContentEl }, { children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, Object.assign({ currentTabId: currentTabId, tabId: id }, { children: content }), id))) }), void 0)] }), void 0), persistentUtility && isMediumOrAbove && (_jsx(Grid, Object.assign({ as: StyledPersistentUtility, item: { area: 'persistentUtility' } }, { children: persistentUtility.content }), void 0)), !isLargeOrAbove && (_jsx(Drawer, Object.assign({ as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility }, { children: _jsxs(Flex, Object.assign({ as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 } }, { children: [_jsx(Flex, Object.assign({ container: { justify: 'end' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_noun', [t('utilities_panel')]) }, { children: _jsx(Icon, { name: `move-${direction.end}-solid` }, void 0) }), void 0) }), void 0), utilities] }), void 0) }), void 0)), utilities && isMediumOrAbove && (_jsxs(Grid, Object.assign({ ref: (el) => {
                     if (el)
                         (scrollStickOptions.current?.elements).push(el);
                 }, as: StyledCaseViewUtilities, container: {
@@ -245,7 +245,7 @@ const CaseView = (props) => {
                     ? {
                         transform: `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
                     }
-                    : undefined }, { children: [_jsx(Flex, Object.assign({ container: { justify: utilitiesShown ? 'end' : 'center' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_noun' : 'expand_noun', t('utilities_panel')) }, { children: _jsx(Icon, { name: utilitiesIcon }, void 0) }), void 0) }), void 0), _jsx(Flex, Object.assign({ container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : false, hidden: !utilitiesShown || !isLargeOrAbove }, { children: utilities }), void 0), (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }, void 0))] }), void 0))] }), void 0));
+                    : undefined }, { children: [_jsx(Flex, Object.assign({ container: { justify: utilitiesShown ? 'end' : 'center' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_noun' : 'expand_noun', [t('utilities_panel')]) }, { children: _jsx(Icon, { name: utilitiesIcon }, void 0) }), void 0) }), void 0), _jsx(Flex, Object.assign({ container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : false, hidden: !utilitiesShown || !isLargeOrAbove }, { children: utilities }), void 0), (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }, void 0))] }), void 0))] }), void 0));
 };
 export default CaseView;
 //# sourceMappingURL=CaseView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ReactNode,\n  FC,\n  MouseEvent,\n  KeyboardEvent,\n  useContext,\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useRef,\n  Ref,\n  useLayoutEffect\n} from 'react';\n\nimport {\n  Button,\n  Flex,\n  Grid,\n  Icon,\n  TabPanel,\n  useBreakpoint,\n  useScrollStick,\n  useElement,\n  ForwardProps,\n  Card,\n  Drawer,\n  useI18n,\n  useDirection,\n  useConsolidatedRef,\n  TabsProps\n} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport AppShellContext from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';\n\nimport CaseSummary, { CaseSummaryProps } from '../CaseSummary';\n\nimport UtilitiesSummary, { UtilitiesSummaryProps } from './UtilitiesSummary';\nimport {\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledPersistentUtility,\n  StyledSummaryRegion,\n  StyledCaseViewUtilities,\n  StyledMobileTabs,\n  StyledUtilToggle\n} from './CaseView.styles';\n\nexport interface CaseViewProps extends CaseSummaryProps {\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n  /** A region that is used to hold Utility components for example SummaryList. */\n  utilities?: ReactNode;\n  /** The utilities summary array will be used to render the minimized the utilities card. */\n  utilitiesSummaryItems?: UtilitiesSummaryProps['items'];\n  /** Collapses the utilities by default on load */\n  defaultCollapsedUtilities?: boolean;\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n  /**\n   * A ref for the CaseSummary region.\n   * @internal\n   */\n  caseSummaryRef?: Ref<HTMLDivElement>;\n}\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = (props: CaseViewProps) => {\n  const {\n    caseId,\n    parentCases,\n    heading,\n    caseLink,\n    icon,\n    followed,\n    onFollowedChange,\n    summary,\n    caseSummaryRef,\n    tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },\n    stages,\n    tasks,\n    tabContent: tabContentProp = [],\n    utilities,\n    utilitiesSummaryItems,\n    defaultCollapsedUtilities = false,\n    actions,\n    onEdit,\n    banners,\n    persistentUtility,\n    forceMobile,\n    ...restProps\n  } = props;\n  const t = useI18n();\n  const caseViewRef = useRef<HTMLDivElement>(null);\n  const caseViewSummaryRef = useConsolidatedRef(caseSummaryRef);\n  const caseSummaryHeaderRef = useRef<HTMLDivElement>(null);\n  const caseViewSummaryContainerRef = useRef<HTMLDivElement>(null);\n  const [tabContentEl, setTabContentEl] = useElement<HTMLElement>(null);\n  let isExtraLargeOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });\n  let isLargeOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n  let isMediumOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n  if (forceMobile) {\n    isExtraLargeOrAbove = false;\n    isLargeOrAbove = false;\n    isMediumOrAbove = false;\n  }\n\n  const { headerEl } = useContext(AppShellContext);\n\n  const getOffsets = () => {\n    const appshellHeaderHeight = headerEl?.offsetHeight || 0;\n\n    const summaryHeight =\n      !isMediumOrAbove || (persistentUtility && !isExtraLargeOrAbove)\n        ? caseViewSummaryRef?.current?.offsetHeight || 0\n        : 0;\n\n    return {\n      sticky: appshellHeaderHeight + summaryHeight,\n      summary: summaryHeight\n    };\n  };\n\n  const [offsets, setOffsets] = useState(getOffsets);\n  const [summaryAnimationState, setSummaryAnimationState] = useState('expanded');\n\n  const summaryTabId = `summary-${caseId}`;\n  const utilitiesTabId = `utilities-${caseId}`;\n  const persistentUtilityTabId = `persistent-utility-${caseId}`;\n  const [utilitiesShown, setUtilitiesShown] = useState(\n    isLargeOrAbove && !defaultCollapsedUtilities\n  );\n  const initialUserUtilState = defaultCollapsedUtilities ? 'hidden' : undefined;\n  const [userUtilState, setUserUtilState] = useState<undefined | 'shown' | 'hidden'>(\n    initialUserUtilState\n  );\n  const [summaryPanelCollapsed, setSummaryPanelCollapsed] = useState(false);\n\n  const hasSideBySideColumns = isMediumOrAbove;\n  const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n    elements: []\n  });\n\n  useScrollStick(\n    hasSideBySideColumns ? { ...scrollStickOptions.current, offset: offsets.sticky } : undefined\n  );\n\n  const toggleUtilities = useCallback((e: MouseEvent | KeyboardEvent) => {\n    if (e.type === 'keydown' && (e as KeyboardEvent).key !== 'Enter') {\n      return;\n    }\n\n    setUtilitiesShown(shown => {\n      setUserUtilState(shown ? 'hidden' : 'shown');\n      return !shown;\n    });\n  }, []);\n\n  useLayoutEffect(() => {\n    setOffsets(getOffsets());\n  }, [isExtraLargeOrAbove, isLargeOrAbove, isMediumOrAbove, headerEl]);\n\n  useEffect(() => {\n    if (isLargeOrAbove) {\n      setUtilitiesShown(userUtilState !== 'hidden');\n    } else {\n      setUtilitiesShown(false);\n    }\n  }, [isLargeOrAbove]);\n\n  useEffect(() => {\n    if (\n      isMediumOrAbove &&\n      !summaryPanelCollapsed &&\n      !persistentUtility &&\n      (currentTabId === summaryTabId || currentTabId === utilitiesTabId)\n    ) {\n      onTabClick(tabItemsProp[0]?.id);\n    }\n  }, [\n    isMediumOrAbove,\n    onTabClick,\n    currentTabId,\n    summaryTabId,\n    utilitiesTabId,\n    summaryPanelCollapsed\n  ]);\n\n  useEffect(() => {\n    if ((isMediumOrAbove && !isLargeOrAbove && utilities) || persistentUtility)\n      setUtilitiesShown(false);\n  }, [isMediumOrAbove, utilities]);\n\n  useEffect(() => {\n    if (persistentUtility && currentTabId === persistentUtilityTabId) onTabClick(summaryTabId);\n  }, [persistentUtility]);\n\n  const tabItems: TabsProps['tabs'] = useMemo(() => {\n    const summaryTab = { id: summaryTabId, name: 'Summary' };\n    if (isMediumOrAbove)\n      return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)\n        ? [summaryTab, ...tabItemsProp]\n        : tabItemsProp;\n\n    const utilityTabs = [];\n\n    if (utilities) utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });\n    if (persistentUtility && !isMediumOrAbove)\n      utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n\n    return [summaryTab, ...tabItemsProp, ...utilityTabs];\n  }, [\n    isMediumOrAbove,\n    isExtraLargeOrAbove,\n    summaryTabId,\n    utilitiesTabId,\n    persistentUtilityTabId,\n    utilities,\n    persistentUtility,\n    tabItemsProp,\n    summaryPanelCollapsed\n  ]);\n\n  useEffect(() => {\n    if (!tabContentEl) return;\n    const scrollPos = window.scrollY;\n    const windowHeight = document.documentElement.clientHeight;\n    const bottomPos = scrollPos + windowHeight * 0.8;\n    const tabContentPos = tabContentEl.offsetTop;\n    if (tabContentPos > bottomPos) {\n      const top = tabContentPos - windowHeight * 0.2;\n      window.scrollTo({ top, behavior: 'smooth' });\n    }\n  }, [currentTabId]);\n\n  const tabContent = useMemo(() => {\n    const summaryTabContent = { id: summaryTabId, content: <Card>{summary}</Card> };\n    if (isMediumOrAbove)\n      return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)\n        ? [summaryTabContent, ...tabContentProp]\n        : tabContentProp;\n\n    const utilityTabs = [];\n    if (utilities)\n      utilityTabs.push({\n        id: utilitiesTabId,\n        content: <Flex container={{ direction: 'column', gap: 2 }}>{utilities}</Flex>\n      });\n    if (persistentUtility)\n      utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n    return [summaryTabContent, ...tabContentProp, ...utilityTabs];\n  }, [\n    currentTabId,\n    tabContentProp,\n    summary,\n    summaryTabId,\n    utilities,\n    utilitiesTabId,\n    isMediumOrAbove,\n    isExtraLargeOrAbove\n  ]);\n\n  const direction = useDirection();\n\n  const utilitiesIcon = utilitiesShown\n    ? `move-${direction.end}-solid`\n    : `move-${direction.start}-solid`;\n\n  let caseViewGridContainer = {\n    cols: 'minmax(0, 1fr)',\n    colGap: 0,\n    rows: 'minmax(0, max-content) auto',\n    areas: '\"case-nav\" \"content\"'\n  };\n  let fixedSummaryWidth = '100%';\n\n  if (!forceMobile && !persistentUtility && !summaryPanelCollapsed) {\n    fixedSummaryWidth = isLargeOrAbove ? '25rem' : '22rem';\n    if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: `minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)`,\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav content utilities\"'\n      };\n    }\n  } else if (summaryPanelCollapsed) {\n    if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: `minmax(0, 1fr) minmax(0, max-content)`,\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav case-nav\" \"content utilities\"'\n      };\n    }\n  } else if (persistentUtility) {\n    if (isExtraLargeOrAbove) {\n      fixedSummaryWidth = '25rem';\n      caseViewGridContainer = {\n        cols: `minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))`,\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav content persistentUtility utilities\"'\n      };\n    } else if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav case-nav case-nav\" \"content persistentUtility utilities\"'\n      };\n    }\n  }\n\n  const animateSummaryPanel = (type: 'open' | 'close') => {\n    if (type === 'close') {\n      const animation = [{ width: fixedSummaryWidth }, { width: 0 }];\n      caseViewSummaryContainerRef.current?.animate(animation, 250);\n    } else {\n      const animation = [{ width: 0 }, { width: isLargeOrAbove ? '25rem' : '22rem' }];\n      caseViewSummaryContainerRef.current?.animate(animation, 250);\n    }\n  };\n\n  return (\n    <Grid\n      as={StyledCaseView}\n      summaryOffset={offsets.summary}\n      ref={caseViewRef}\n      container={caseViewGridContainer}\n      item={{ area: 'caseView' }}\n      forceMobile={forceMobile}\n      isMediumOrAbove={isMediumOrAbove}\n      {...restProps}\n    >\n      <Grid\n        as={StyledSummaryRegion}\n        item={{ area: 'case-nav' }}\n        forceMobile={forceMobile}\n        desktop={\n          isMediumOrAbove && (!persistentUtility || isExtraLargeOrAbove) && !summaryPanelCollapsed\n        }\n        isLargeOrAbove={isLargeOrAbove}\n        ref={caseViewSummaryContainerRef}\n        style={\n          ['collapsing', 'expanding'].includes(summaryAnimationState)\n            ? {\n                overflow: 'hidden'\n              }\n            : undefined\n        }\n      >\n        <CaseSummary\n          ref={caseViewSummaryRef}\n          headerRef={caseSummaryHeaderRef}\n          caseId={caseId}\n          heading={heading}\n          caseLink={caseLink}\n          icon={icon}\n          followed={followed}\n          onFollowedChange={onFollowedChange}\n          parentCases={parentCases}\n          summary={summary}\n          actions={actions}\n          onEdit={onEdit}\n          tabs={{\n            items: tabItems,\n            onClick: onTabClick,\n            currentTabId\n          }}\n          forceMobile={forceMobile}\n          desktop={\n            ((isMediumOrAbove && !persistentUtility) || isExtraLargeOrAbove) &&\n            !summaryPanelCollapsed\n          }\n          fixedWidth={isMediumOrAbove ? fixedSummaryWidth : undefined}\n          collapsible={isMediumOrAbove && !persistentUtility}\n          collapsed={summaryPanelCollapsed}\n          onBeforeCollapse={() => {\n            animateSummaryPanel('close');\n          }}\n          onAfterCollapse={() => setSummaryPanelCollapsed(true)}\n          onBeforeExpand={() => {\n            animateSummaryPanel('open');\n            setSummaryPanelCollapsed(false);\n          }}\n          onAnimationStateChange={setSummaryAnimationState}\n        />\n      </Grid>\n\n      <Grid\n        container={{\n          cols: 'minmax(0, 1fr)',\n          alignContent: 'start',\n          rowGap: 2\n        }}\n        item={{ area: 'content' }}\n        as={StyledCaseViewContent}\n        forceMobile={forceMobile}\n        isMediumOrAbove={isMediumOrAbove}\n        persistentUtility={Boolean(persistentUtility)}\n        style={{\n          transform: ['collapsing', 'expanding'].includes(summaryAnimationState)\n            ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `\n            : undefined,\n          marginInlineStart:\n            summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove) ? '1rem' : 0\n        }}\n      >\n        {banners && <div>{banners}</div>}\n        {stages && <div>{stages}</div>}\n        {tasks && <div>{tasks}</div>}\n        {(!isMediumOrAbove || persistentUtility || summaryPanelCollapsed) && (\n          <StyledMobileTabs\n            type='horizontal'\n            tabs={tabItems}\n            onTabClick={onTabClick}\n            currentTabId={currentTabId}\n            fullWidth={!isMediumOrAbove}\n          />\n        )}\n        <div ref={setTabContentEl}>\n          {tabContent?.map(({ id, content }) => (\n            <TabPanel currentTabId={currentTabId} tabId={id} key={id}>\n              {content}\n            </TabPanel>\n          ))}\n        </div>\n      </Grid>\n\n      {persistentUtility && isMediumOrAbove && (\n        <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }}>\n          {persistentUtility.content}\n        </Grid>\n      )}\n      {!isLargeOrAbove && (\n        <Drawer\n          as={StyledCaseDrawer}\n          open={utilitiesShown && isMediumOrAbove}\n          position='fixed'\n          placement={direction.end}\n          shadow\n          nullWhenClosed\n          hasPersistentUtility={!!persistentUtility}\n        >\n          <Flex as={StyledCaseDrawerContent} container={{ direction: 'column', gap: 2 }}>\n            <Flex container={{ justify: 'end' }}>\n              <Button\n                variant='simple'\n                icon\n                onClick={toggleUtilities}\n                as={StyledUtilToggle}\n                label={t('collapse_noun', t('utilities_panel'))}\n              >\n                <Icon name={`move-${direction.end}-solid`} />\n              </Button>\n            </Flex>\n            {utilities}\n          </Flex>\n        </Drawer>\n      )}\n      {utilities && isMediumOrAbove && (\n        <Grid\n          ref={(el: HTMLDivElement) => {\n            if (el) (scrollStickOptions.current?.elements).push(el);\n          }}\n          as={StyledCaseViewUtilities}\n          container={{\n            cols: 'minmax(0, 1fr)',\n            rowGap: 2\n          }}\n          item={{\n            area: 'utilities'\n          }}\n          utilitiesShown={utilitiesShown && isLargeOrAbove}\n          style={\n            ['collapsing', 'expanding'].includes(summaryAnimationState)\n              ? {\n                  transform: `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `\n                }\n              : undefined\n          }\n        >\n          <Flex container={{ justify: utilitiesShown ? 'end' : 'center' }}>\n            <Button\n              variant='simple'\n              icon\n              onClick={toggleUtilities}\n              as={StyledUtilToggle}\n              label={t(utilitiesShown ? 'collapse_noun' : 'expand_noun', t('utilities_panel'))}\n            >\n              <Icon name={utilitiesIcon} />\n            </Button>\n          </Flex>\n          <Flex\n            container={utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : false}\n            hidden={!utilitiesShown || !isLargeOrAbove}\n          >\n            {utilities}\n          </Flex>\n\n          {(!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (\n            <UtilitiesSummary\n              items={utilitiesSummaryItems || []}\n              onClick={toggleUtilities}\n              onKeyDown={toggleUtilities}\n            />\n          )}\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport default CaseView;\n"]}
+{"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ReactNode,\n  FC,\n  MouseEvent,\n  KeyboardEvent,\n  useContext,\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useRef,\n  Ref,\n  useLayoutEffect\n} from 'react';\n\nimport {\n  Button,\n  Flex,\n  Grid,\n  Icon,\n  TabPanel,\n  useBreakpoint,\n  useScrollStick,\n  useElement,\n  ForwardProps,\n  Card,\n  Drawer,\n  useI18n,\n  useDirection,\n  useConsolidatedRef,\n  TabsProps\n} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport AppShellContext from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';\n\nimport CaseSummary, { CaseSummaryProps } from '../CaseSummary';\n\nimport UtilitiesSummary, { UtilitiesSummaryProps } from './UtilitiesSummary';\nimport {\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledPersistentUtility,\n  StyledSummaryRegion,\n  StyledCaseViewUtilities,\n  StyledMobileTabs,\n  StyledUtilToggle\n} from './CaseView.styles';\n\nexport interface CaseViewProps extends CaseSummaryProps {\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n  /** A region that is used to hold Utility components for example SummaryList. */\n  utilities?: ReactNode;\n  /** The utilities summary array will be used to render the minimized the utilities card. */\n  utilitiesSummaryItems?: UtilitiesSummaryProps['items'];\n  /** Collapses the utilities by default on load */\n  defaultCollapsedUtilities?: boolean;\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n  /**\n   * A ref for the CaseSummary region.\n   * @internal\n   */\n  caseSummaryRef?: Ref<HTMLDivElement>;\n}\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = (props: CaseViewProps) => {\n  const {\n    caseId,\n    parentCases,\n    heading,\n    caseLink,\n    icon,\n    followed,\n    onFollowedChange,\n    summary,\n    caseSummaryRef,\n    tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },\n    stages,\n    tasks,\n    tabContent: tabContentProp = [],\n    utilities,\n    utilitiesSummaryItems,\n    defaultCollapsedUtilities = false,\n    actions,\n    onEdit,\n    banners,\n    persistentUtility,\n    forceMobile,\n    ...restProps\n  } = props;\n  const t = useI18n();\n  const caseViewRef = useRef<HTMLDivElement>(null);\n  const caseViewSummaryRef = useConsolidatedRef(caseSummaryRef);\n  const caseSummaryHeaderRef = useRef<HTMLDivElement>(null);\n  const caseViewSummaryContainerRef = useRef<HTMLDivElement>(null);\n  const [tabContentEl, setTabContentEl] = useElement<HTMLElement>(null);\n  let isExtraLargeOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });\n  let isLargeOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n  let isMediumOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n  if (forceMobile) {\n    isExtraLargeOrAbove = false;\n    isLargeOrAbove = false;\n    isMediumOrAbove = false;\n  }\n\n  const { headerEl } = useContext(AppShellContext);\n\n  const getOffsets = () => {\n    const appshellHeaderHeight = headerEl?.offsetHeight || 0;\n\n    const summaryHeight =\n      !isMediumOrAbove || (persistentUtility && !isExtraLargeOrAbove)\n        ? caseViewSummaryRef?.current?.offsetHeight || 0\n        : 0;\n\n    return {\n      sticky: appshellHeaderHeight + summaryHeight,\n      summary: summaryHeight\n    };\n  };\n\n  const [offsets, setOffsets] = useState(getOffsets);\n  const [summaryAnimationState, setSummaryAnimationState] = useState('expanded');\n\n  const summaryTabId = `summary-${caseId}`;\n  const utilitiesTabId = `utilities-${caseId}`;\n  const persistentUtilityTabId = `persistent-utility-${caseId}`;\n  const [utilitiesShown, setUtilitiesShown] = useState(\n    isLargeOrAbove && !defaultCollapsedUtilities\n  );\n  const initialUserUtilState = defaultCollapsedUtilities ? 'hidden' : undefined;\n  const [userUtilState, setUserUtilState] = useState<undefined | 'shown' | 'hidden'>(\n    initialUserUtilState\n  );\n  const [summaryPanelCollapsed, setSummaryPanelCollapsed] = useState(false);\n\n  const hasSideBySideColumns = isMediumOrAbove;\n  const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n    elements: []\n  });\n\n  useScrollStick(\n    hasSideBySideColumns ? { ...scrollStickOptions.current, offset: offsets.sticky } : undefined\n  );\n\n  const toggleUtilities = useCallback((e: MouseEvent | KeyboardEvent) => {\n    if (e.type === 'keydown' && (e as KeyboardEvent).key !== 'Enter') {\n      return;\n    }\n\n    setUtilitiesShown(shown => {\n      setUserUtilState(shown ? 'hidden' : 'shown');\n      return !shown;\n    });\n  }, []);\n\n  useLayoutEffect(() => {\n    setOffsets(getOffsets());\n  }, [isExtraLargeOrAbove, isLargeOrAbove, isMediumOrAbove, headerEl]);\n\n  useEffect(() => {\n    if (isLargeOrAbove) {\n      setUtilitiesShown(userUtilState !== 'hidden');\n    } else {\n      setUtilitiesShown(false);\n    }\n  }, [isLargeOrAbove]);\n\n  useEffect(() => {\n    if (\n      isMediumOrAbove &&\n      !summaryPanelCollapsed &&\n      !persistentUtility &&\n      (currentTabId === summaryTabId || currentTabId === utilitiesTabId)\n    ) {\n      onTabClick(tabItemsProp[0]?.id);\n    }\n  }, [\n    isMediumOrAbove,\n    onTabClick,\n    currentTabId,\n    summaryTabId,\n    utilitiesTabId,\n    summaryPanelCollapsed\n  ]);\n\n  useEffect(() => {\n    if ((isMediumOrAbove && !isLargeOrAbove && utilities) || persistentUtility)\n      setUtilitiesShown(false);\n  }, [isMediumOrAbove, utilities]);\n\n  useEffect(() => {\n    if (persistentUtility && currentTabId === persistentUtilityTabId) onTabClick(summaryTabId);\n  }, [persistentUtility]);\n\n  const tabItems: TabsProps['tabs'] = useMemo(() => {\n    const summaryTab = { id: summaryTabId, name: 'Summary' };\n    if (isMediumOrAbove)\n      return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)\n        ? [summaryTab, ...tabItemsProp]\n        : tabItemsProp;\n\n    const utilityTabs = [];\n\n    if (utilities) utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });\n    if (persistentUtility && !isMediumOrAbove)\n      utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n\n    return [summaryTab, ...tabItemsProp, ...utilityTabs];\n  }, [\n    isMediumOrAbove,\n    isExtraLargeOrAbove,\n    summaryTabId,\n    utilitiesTabId,\n    persistentUtilityTabId,\n    utilities,\n    persistentUtility,\n    tabItemsProp,\n    summaryPanelCollapsed\n  ]);\n\n  useEffect(() => {\n    if (!tabContentEl) return;\n    const scrollPos = window.scrollY;\n    const windowHeight = document.documentElement.clientHeight;\n    const bottomPos = scrollPos + windowHeight * 0.8;\n    const tabContentPos = tabContentEl.offsetTop;\n    if (tabContentPos > bottomPos) {\n      const top = tabContentPos - windowHeight * 0.2;\n      window.scrollTo({ top, behavior: 'smooth' });\n    }\n  }, [currentTabId]);\n\n  const tabContent = useMemo(() => {\n    const summaryTabContent = { id: summaryTabId, content: <Card>{summary}</Card> };\n    if (isMediumOrAbove)\n      return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)\n        ? [summaryTabContent, ...tabContentProp]\n        : tabContentProp;\n\n    const utilityTabs = [];\n    if (utilities)\n      utilityTabs.push({\n        id: utilitiesTabId,\n        content: <Flex container={{ direction: 'column', gap: 2 }}>{utilities}</Flex>\n      });\n    if (persistentUtility)\n      utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n    return [summaryTabContent, ...tabContentProp, ...utilityTabs];\n  }, [\n    currentTabId,\n    tabContentProp,\n    summary,\n    summaryTabId,\n    utilities,\n    utilitiesTabId,\n    isMediumOrAbove,\n    isExtraLargeOrAbove\n  ]);\n\n  const direction = useDirection();\n\n  const utilitiesIcon = utilitiesShown\n    ? `move-${direction.end}-solid`\n    : `move-${direction.start}-solid`;\n\n  let caseViewGridContainer = {\n    cols: 'minmax(0, 1fr)',\n    colGap: 0,\n    rows: 'minmax(0, max-content) auto',\n    areas: '\"case-nav\" \"content\"'\n  };\n  let fixedSummaryWidth = '100%';\n\n  if (!forceMobile && !persistentUtility && !summaryPanelCollapsed) {\n    fixedSummaryWidth = isLargeOrAbove ? '25rem' : '22rem';\n    if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: `minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)`,\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav content utilities\"'\n      };\n    }\n  } else if (summaryPanelCollapsed) {\n    if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: `minmax(0, 1fr) minmax(0, max-content)`,\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav case-nav\" \"content utilities\"'\n      };\n    }\n  } else if (persistentUtility) {\n    if (isExtraLargeOrAbove) {\n      fixedSummaryWidth = '25rem';\n      caseViewGridContainer = {\n        cols: `minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))`,\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav content persistentUtility utilities\"'\n      };\n    } else if (isLargeOrAbove || isMediumOrAbove) {\n      caseViewGridContainer = {\n        cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n        colGap: 2,\n        rows: caseViewGridContainer.rows,\n        areas: '\"case-nav case-nav case-nav\" \"content persistentUtility utilities\"'\n      };\n    }\n  }\n\n  const animateSummaryPanel = (type: 'open' | 'close') => {\n    if (type === 'close') {\n      const animation = [{ width: fixedSummaryWidth }, { width: 0 }];\n      caseViewSummaryContainerRef.current?.animate(animation, 250);\n    } else {\n      const animation = [{ width: 0 }, { width: isLargeOrAbove ? '25rem' : '22rem' }];\n      caseViewSummaryContainerRef.current?.animate(animation, 250);\n    }\n  };\n\n  return (\n    <Grid\n      as={StyledCaseView}\n      summaryOffset={offsets.summary}\n      ref={caseViewRef}\n      container={caseViewGridContainer}\n      item={{ area: 'caseView' }}\n      forceMobile={forceMobile}\n      isMediumOrAbove={isMediumOrAbove}\n      {...restProps}\n    >\n      <Grid\n        as={StyledSummaryRegion}\n        item={{ area: 'case-nav' }}\n        forceMobile={forceMobile}\n        desktop={\n          isMediumOrAbove && (!persistentUtility || isExtraLargeOrAbove) && !summaryPanelCollapsed\n        }\n        isLargeOrAbove={isLargeOrAbove}\n        ref={caseViewSummaryContainerRef}\n        style={\n          ['collapsing', 'expanding'].includes(summaryAnimationState)\n            ? {\n                overflow: 'hidden'\n              }\n            : undefined\n        }\n      >\n        <CaseSummary\n          ref={caseViewSummaryRef}\n          headerRef={caseSummaryHeaderRef}\n          caseId={caseId}\n          heading={heading}\n          caseLink={caseLink}\n          icon={icon}\n          followed={followed}\n          onFollowedChange={onFollowedChange}\n          parentCases={parentCases}\n          summary={summary}\n          actions={actions}\n          onEdit={onEdit}\n          tabs={{\n            items: tabItems,\n            onClick: onTabClick,\n            currentTabId\n          }}\n          forceMobile={forceMobile}\n          desktop={\n            ((isMediumOrAbove && !persistentUtility) || isExtraLargeOrAbove) &&\n            !summaryPanelCollapsed\n          }\n          fixedWidth={isMediumOrAbove ? fixedSummaryWidth : undefined}\n          collapsible={isMediumOrAbove && !persistentUtility}\n          collapsed={summaryPanelCollapsed}\n          onBeforeCollapse={() => {\n            animateSummaryPanel('close');\n          }}\n          onAfterCollapse={() => setSummaryPanelCollapsed(true)}\n          onBeforeExpand={() => {\n            animateSummaryPanel('open');\n            setSummaryPanelCollapsed(false);\n          }}\n          onAnimationStateChange={setSummaryAnimationState}\n        />\n      </Grid>\n\n      <Grid\n        container={{\n          cols: 'minmax(0, 1fr)',\n          alignContent: 'start',\n          rowGap: 2\n        }}\n        item={{ area: 'content' }}\n        as={StyledCaseViewContent}\n        forceMobile={forceMobile}\n        isMediumOrAbove={isMediumOrAbove}\n        persistentUtility={Boolean(persistentUtility)}\n        style={{\n          transform: ['collapsing', 'expanding'].includes(summaryAnimationState)\n            ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `\n            : undefined,\n          marginInlineStart:\n            summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove) ? '1rem' : 0\n        }}\n      >\n        {banners && <div>{banners}</div>}\n        {stages && <div>{stages}</div>}\n        {tasks && <div>{tasks}</div>}\n        {(!isMediumOrAbove || persistentUtility || summaryPanelCollapsed) && (\n          <StyledMobileTabs\n            type='horizontal'\n            tabs={tabItems}\n            onTabClick={onTabClick}\n            currentTabId={currentTabId}\n            fullWidth={!isMediumOrAbove}\n          />\n        )}\n        <div ref={setTabContentEl}>\n          {tabContent?.map(({ id, content }) => (\n            <TabPanel currentTabId={currentTabId} tabId={id} key={id}>\n              {content}\n            </TabPanel>\n          ))}\n        </div>\n      </Grid>\n\n      {persistentUtility && isMediumOrAbove && (\n        <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }}>\n          {persistentUtility.content}\n        </Grid>\n      )}\n      {!isLargeOrAbove && (\n        <Drawer\n          as={StyledCaseDrawer}\n          open={utilitiesShown && isMediumOrAbove}\n          position='fixed'\n          placement={direction.end}\n          shadow\n          nullWhenClosed\n          hasPersistentUtility={!!persistentUtility}\n        >\n          <Flex as={StyledCaseDrawerContent} container={{ direction: 'column', gap: 2 }}>\n            <Flex container={{ justify: 'end' }}>\n              <Button\n                variant='simple'\n                icon\n                onClick={toggleUtilities}\n                as={StyledUtilToggle}\n                label={t('collapse_noun', [t('utilities_panel')])}\n              >\n                <Icon name={`move-${direction.end}-solid`} />\n              </Button>\n            </Flex>\n            {utilities}\n          </Flex>\n        </Drawer>\n      )}\n      {utilities && isMediumOrAbove && (\n        <Grid\n          ref={(el: HTMLDivElement) => {\n            if (el) (scrollStickOptions.current?.elements).push(el);\n          }}\n          as={StyledCaseViewUtilities}\n          container={{\n            cols: 'minmax(0, 1fr)',\n            rowGap: 2\n          }}\n          item={{\n            area: 'utilities'\n          }}\n          utilitiesShown={utilitiesShown && isLargeOrAbove}\n          style={\n            ['collapsing', 'expanding'].includes(summaryAnimationState)\n              ? {\n                  transform: `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `\n                }\n              : undefined\n          }\n        >\n          <Flex container={{ justify: utilitiesShown ? 'end' : 'center' }}>\n            <Button\n              variant='simple'\n              icon\n              onClick={toggleUtilities}\n              as={StyledUtilToggle}\n              label={t(utilitiesShown ? 'collapse_noun' : 'expand_noun', [t('utilities_panel')])}\n            >\n              <Icon name={utilitiesIcon} />\n            </Button>\n          </Flex>\n          <Flex\n            container={utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : false}\n            hidden={!utilitiesShown || !isLargeOrAbove}\n          >\n            {utilities}\n          </Flex>\n\n          {(!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (\n            <UtilitiesSummary\n              items={utilitiesSummaryItems || []}\n              onClick={toggleUtilities}\n              onKeyDown={toggleUtilities}\n            />\n          )}\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport default CaseView;\n"]}

package/lib/components/CaseView/UtilitiesSummary.js

@@ -9,7 +9,7 @@ export const StyledUtilitiesSummary = styled.div(({ theme }) => {
 });
 const UtilitiesSummary = ({ items = [], ...restProps }) => {
     const t = useI18n();
-    return items.length ? (_jsx(Card, Object.assign({}, restProps, { interactive: true, tabIndex: 0, role: 'button', container: { direction: 'column', alignItems: 'center', gap: 3 }, "aria-label": `${t('utilities_summary')} ${t('expand_noun', t('utilities_panel'))}`, as: StyledUtilitiesSummary }, { children: items.map(item => {
+    return items.length ? (_jsx(Card, Object.assign({}, restProps, { interactive: true, tabIndex: 0, role: 'button', container: { direction: 'column', alignItems: 'center', gap: 3 }, "aria-label": `${t('utilities_summary')}, ${t('expand_noun', [t('utilities_panel')])}`, as: StyledUtilitiesSummary }, { children: items.map(item => {
             return (_jsxs(Flex, Object.assign({ container: {
                     direction: 'column',
                     alignItems: 'center',

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

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAMzF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA4D,CAAC,EACjF,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,oBACC,SAAS,IACb,WAAW,QACX,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,gBACpD,GAAG,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,EACjF,EAAE,EAAE,sBAAsB,gBAEzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,kBACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,iBAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,WAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,kBAAC,OAAO,EAAC,SAAS,gBAAE,IAAI,CAAC,KAAK,YAAS,MAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,YACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nexport interface UtilitiesSummaryProps {\n  items: { iconName: string; count?: number }[];\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n  return css`\n    width: 2.75rem;\n    padding: ${theme.base.spacing} 0;\n  `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps & ForwardProps> = ({\n  items = [],\n  ...restProps\n}: UtilitiesSummaryProps) => {\n  const t = useI18n();\n  return items.length ? (\n    <Card\n      {...restProps}\n      interactive\n      tabIndex={0}\n      role='button'\n      container={{ direction: 'column', alignItems: 'center', gap: 3 }}\n      aria-label={`${t('utilities_summary')} ${t('expand_noun', t('utilities_panel'))}`}\n      as={StyledUtilitiesSummary}\n    >\n      {items.map(item => {\n        return (\n          <Flex\n            container={{\n              direction: 'column',\n              alignItems: 'center',\n              gap: 0.5\n            }}\n            item={{ grow: 1 }}\n            key={item.iconName}\n          >\n            <Icon name={item.iconName} />\n            {item.count !== undefined && <Count variant='default'>{item.count}</Count>}\n          </Flex>\n        );\n      })}\n    </Card>\n  ) : null;\n};\n\nexport default UtilitiesSummary;\n"]}
+{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAMzF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA4D,CAAC,EACjF,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,oBACC,SAAS,IACb,WAAW,QACX,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,gBACpD,GAAG,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EACpF,EAAE,EAAE,sBAAsB,gBAEzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,kBACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,iBAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,WAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,kBAAC,OAAO,EAAC,SAAS,gBAAE,IAAI,CAAC,KAAK,YAAS,MAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,YACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nexport interface UtilitiesSummaryProps {\n  items: { iconName: string; count?: number }[];\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n  return css`\n    width: 2.75rem;\n    padding: ${theme.base.spacing} 0;\n  `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps & ForwardProps> = ({\n  items = [],\n  ...restProps\n}: UtilitiesSummaryProps) => {\n  const t = useI18n();\n  return items.length ? (\n    <Card\n      {...restProps}\n      interactive\n      tabIndex={0}\n      role='button'\n      container={{ direction: 'column', alignItems: 'center', gap: 3 }}\n      aria-label={`${t('utilities_summary')}, ${t('expand_noun', [t('utilities_panel')])}`}\n      as={StyledUtilitiesSummary}\n    >\n      {items.map(item => {\n        return (\n          <Flex\n            container={{\n              direction: 'column',\n              alignItems: 'center',\n              gap: 0.5\n            }}\n            item={{ grow: 1 }}\n            key={item.iconName}\n          >\n            <Icon name={item.iconName} />\n            {item.count !== undefined && <Count variant='default'>{item.count}</Count>}\n          </Flex>\n        );\n      })}\n    </Card>\n  ) : null;\n};\n\nexport default UtilitiesSummary;\n"]}

package/lib/components/Confirmation/Confirmation.d.ts

@@ -0,0 +1,19 @@
+import { FunctionComponent, ReactNode, Ref } from 'react';
+import { ForwardProps, UnorderedListProps } from '@pega/cosmos-react-core';
+export interface ConfirmationProps {
+    /** The title of the confirmation */
+    title: string;
+    /** Region for a Field Value List component */
+    details: ReactNode;
+    /** Array of React nodes to be put into a list  */
+    whatsNext?: UnorderedListProps['items'];
+    /** Region for a Tasks component */
+    tasks?: ReactNode;
+    /** Called when the done/close button is clicked */
+    onClose?: () => void;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLElement>;
+}
+declare const Confirmation: FunctionComponent<ConfirmationProps & ForwardProps>;
+export default Confirmation;
+//# sourceMappingURL=Confirmation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAwCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Confirmation/Confirmation.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Card, CardContent, Flex, Text, useI18n, UnorderedList, Button, defaultThemeProp } from '@pega/cosmos-react-core';
+const StyledWhatsNextList = styled(UnorderedList) `
+  padding-inline-start: 0;
+`;
+StyledWhatsNextList.defaultProps = defaultThemeProp;
+const Confirmation = forwardRef(({ title, details, whatsNext, tasks, onClose, ...restProps }, ref) => {
+    const t = useI18n();
+    return (_jsx(Card, Object.assign({}, restProps, { ref: ref }, { children: _jsx(CardContent, { children: _jsxs(Flex, Object.assign({ container: { gap: 3, direction: 'column' } }, { children: [_jsx(Text, Object.assign({ variant: 'h2' }, { children: title }), void 0), _jsxs(Flex, Object.assign({ container: { gap: 1, direction: 'column' } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: t('confirmation_details') }), void 0), details] }), void 0), whatsNext && (_jsxs(Flex, Object.assign({ container: { gap: 1, direction: 'column' } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: t('confirmation_whats_next') }), void 0), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList }, void 0)] }), void 0)), tasks && (_jsxs(Flex, Object.assign({ container: { gap: 1, direction: 'column' } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: t('confirmation_open_tasks') }), void 0), tasks] }), void 0)), onClose && (_jsx(Flex, Object.assign({ container: { justify: 'end' } }, { children: _jsx(Button, Object.assign({ onClick: onClose, variant: 'primary' }, { children: t('done') }), void 0) }), void 0))] }), void 0) }, void 0) }), void 0));
+});
+export default Confirmation;
+//# sourceMappingURL=Confirmation.js.map

package/lib/components/Confirmation/Confirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,gBAC3B,KAAC,WAAW,cACV,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAC9C,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,KAAK,YAAQ,EACjC,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAC9C,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,CAAC,CAAC,sBAAsB,CAAC,YAAQ,EACpD,OAAO,aACH,EACN,SAAS,IAAI,CACZ,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAC9C,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,CAAC,CAAC,yBAAyB,CAAC,YAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,WAAI,aAC7D,CACR,EACA,KAAK,IAAI,CACR,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAC9C,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,CAAC,CAAC,yBAAyB,CAAC,YAAQ,EACvD,KAAK,aACD,CACR,EACA,OAAO,IAAI,CACV,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,gBACjC,KAAC,MAAM,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,gBACxC,CAAC,CAAC,MAAM,CAAC,YACH,YACJ,CACR,aACI,WACK,YACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  ForwardProps,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  UnorderedListProps\n} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps {\n  /** The title of the confirmation */\n  title: string;\n  /** Region for a Field Value List component */\n  details: ReactNode;\n  /** Array of React nodes to be put into a list  */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  (\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) => {\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            <Text variant='h2'>{title}</Text>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h3'>{t('confirmation_details')}</Text>\n              {details}\n            </Flex>\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n            {tasks && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_open_tasks')}</Text>\n                {tasks}\n              </Flex>\n            )}\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}

package/lib/components/Confirmation/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Confirmation';
+export { ConfirmationProps } from './Confirmation';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Confirmation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Confirmation/index.js

@@ -0,0 +1,2 @@
+export { default } from './Confirmation';
+//# sourceMappingURL=index.js.map

package/lib/components/Confirmation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Confirmation';\nexport { ConfirmationProps } from './Confirmation';\n"]}

package/lib/components/SearchResults/Filter.js

@@ -69,7 +69,7 @@ const Filter = ({ onFilterChange, onClearFilter, name, expanded = true, ...contr
         default:
             filterControl = null;
     }
-    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, Object.assign({ container: { justify: 'between' } }, { children: [_jsxs(Flex, Object.assign({ as: FilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', name) }, { children: [_jsx(Icon, { name: 'caret-down' }, void 0), _jsx(Text, Object.assign({ variant: 'h3', as: 'span' }, { children: name }), void 0)] }), void 0), filterActive && (_jsx(Button, Object.assign({ variant: 'link', onClick: () => onClearFilter?.(name) }, { children: t('clear') }), void 0))] }), void 0), _jsx(ExpandCollapse, Object.assign({ collapsed: !filterExpanded }, { children: filterControl }), void 0)] }, void 0));
+    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, Object.assign({ container: { justify: 'between' } }, { children: [_jsxs(Flex, Object.assign({ as: FilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name]) }, { children: [_jsx(Icon, { name: 'caret-down' }, void 0), _jsx(Text, Object.assign({ variant: 'h3', as: 'span' }, { children: name }), void 0)] }), void 0), filterActive && (_jsx(Button, Object.assign({ variant: 'link', onClick: () => onClearFilter?.(name) }, { children: t('clear') }), void 0))] }), void 0), _jsx(ExpandCollapse, Object.assign({ collapsed: !filterExpanded }, { children: filterControl }), void 0)] }, void 0));
 };
 export default Filter;
 //# sourceMappingURL=Filter.js.map

package/lib/components/SearchResults/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  ExpandCollapse,\n  Flex,\n  Icon,\n  StyledIcon,\n  RadioButton,\n  RadioButtonGroup,\n  Text,\n  defaultThemeProp,\n  useI18n,\n  calculateFontSize,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nimport { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\n\ninterface FilterComponentProps {\n  onFilterChange?: SearchResultsProps['onFilterChange'];\n  onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst StyledFilter = styled.div(props => {\n  const { base } = props.theme;\n  return css`\n    border-bottom: 0.0625rem solid ${base.palette['border-line']};\n    padding-bottom: calc(${base.spacing} * 2);\n    margin-bottom: calc(${base.spacing} * 2);\n\n    > :last-child > :first-child {\n      padding-block-start: ${base.spacing};\n    }\n  `;\n});\n\nconst FilterButton = styled(Button)(({ theme: { base } }) => {\n  const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n  const { rtl } = useDirection();\n  return css`\n    font-size: ${fontSize.xl};\n\n    ${StyledIcon} {\n      transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n    }\n\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(0);\n    }\n\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(calc(${rtl ? '1' : '-1'} * 90deg));\n    }\n  `;\n});\n\nFilterButton.defaultProps = defaultThemeProp;\n\nconst Filter = ({\n  onFilterChange,\n  onClearFilter,\n  name,\n  expanded = true,\n  ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n  const t = useI18n();\n  const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n  let filterControl;\n  let filterActive = false;\n  // eslint-disable-next-line sonarjs/no-small-switch\n  switch (control.type) {\n    case 'select': {\n      const { selectType, items } = control;\n      let SelectFilterGroup = CheckboxGroup;\n      let SelectFilter = Checkbox;\n      if (selectType === 'single-select') {\n        SelectFilterGroup = RadioButtonGroup;\n        SelectFilter = RadioButton;\n      }\n      filterControl = (\n        <SelectFilterGroup\n          label={name}\n          labelHidden\n          onChange={e => {\n            const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n            if (!item) return;\n            const newItem = { ...item, checked: !item.checked };\n\n            onFilterChange?.({\n              name,\n              type: control.type,\n              value: newItem\n            });\n          }}\n        >\n          {control.items.map((filterOption: SelectFilterItemProps) => {\n            if (filterOption.checked) filterActive = true;\n            return (\n              <SelectFilter\n                key={filterOption.id}\n                id={filterOption.id}\n                name={filterOption.name}\n                label={filterOption.label}\n                checked={filterOption.checked}\n              />\n            );\n          })}\n        </SelectFilterGroup>\n      );\n      break;\n    }\n    default:\n      filterControl = null;\n  }\n\n  return (\n    <StyledFilter>\n      <Flex container={{ justify: 'between' }}>\n        <Flex\n          as={FilterButton}\n          container={{ gap: 1, alignItems: 'center' }}\n          variant='text'\n          onClick={() => setFilterExpanded(curr => !curr)}\n          aria-expanded={filterExpanded}\n          aria-label={t(filterExpanded ? 'collapse_noun' : 'expand_noun', name)}\n        >\n          <Icon name='caret-down' />\n          <Text variant='h3' as='span'>\n            {name}\n          </Text>\n        </Flex>\n        {filterActive && (\n          <Button variant='link' onClick={() => onClearFilter?.(name)}>\n            {t('clear')}\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n    </StyledFilter>\n  );\n};\n\nexport default Filter;\n"]}
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  ExpandCollapse,\n  Flex,\n  Icon,\n  StyledIcon,\n  RadioButton,\n  RadioButtonGroup,\n  Text,\n  defaultThemeProp,\n  useI18n,\n  calculateFontSize,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nimport { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\n\ninterface FilterComponentProps {\n  onFilterChange?: SearchResultsProps['onFilterChange'];\n  onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst StyledFilter = styled.div(props => {\n  const { base } = props.theme;\n  return css`\n    border-bottom: 0.0625rem solid ${base.palette['border-line']};\n    padding-bottom: calc(${base.spacing} * 2);\n    margin-bottom: calc(${base.spacing} * 2);\n\n    > :last-child > :first-child {\n      padding-block-start: ${base.spacing};\n    }\n  `;\n});\n\nconst FilterButton = styled(Button)(({ theme: { base } }) => {\n  const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n  const { rtl } = useDirection();\n  return css`\n    font-size: ${fontSize.xl};\n\n    ${StyledIcon} {\n      transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n    }\n\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(0);\n    }\n\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(calc(${rtl ? '1' : '-1'} * 90deg));\n    }\n  `;\n});\n\nFilterButton.defaultProps = defaultThemeProp;\n\nconst Filter = ({\n  onFilterChange,\n  onClearFilter,\n  name,\n  expanded = true,\n  ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n  const t = useI18n();\n  const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n  let filterControl;\n  let filterActive = false;\n  // eslint-disable-next-line sonarjs/no-small-switch\n  switch (control.type) {\n    case 'select': {\n      const { selectType, items } = control;\n      let SelectFilterGroup = CheckboxGroup;\n      let SelectFilter = Checkbox;\n      if (selectType === 'single-select') {\n        SelectFilterGroup = RadioButtonGroup;\n        SelectFilter = RadioButton;\n      }\n      filterControl = (\n        <SelectFilterGroup\n          label={name}\n          labelHidden\n          onChange={e => {\n            const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n            if (!item) return;\n            const newItem = { ...item, checked: !item.checked };\n\n            onFilterChange?.({\n              name,\n              type: control.type,\n              value: newItem\n            });\n          }}\n        >\n          {control.items.map((filterOption: SelectFilterItemProps) => {\n            if (filterOption.checked) filterActive = true;\n            return (\n              <SelectFilter\n                key={filterOption.id}\n                id={filterOption.id}\n                name={filterOption.name}\n                label={filterOption.label}\n                checked={filterOption.checked}\n              />\n            );\n          })}\n        </SelectFilterGroup>\n      );\n      break;\n    }\n    default:\n      filterControl = null;\n  }\n\n  return (\n    <StyledFilter>\n      <Flex container={{ justify: 'between' }}>\n        <Flex\n          as={FilterButton}\n          container={{ gap: 1, alignItems: 'center' }}\n          variant='text'\n          onClick={() => setFilterExpanded(curr => !curr)}\n          aria-expanded={filterExpanded}\n          aria-label={t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name])}\n        >\n          <Icon name='caret-down' />\n          <Text variant='h3' as='span'>\n            {name}\n          </Text>\n        </Flex>\n        {filterActive && (\n          <Button variant='link' onClick={() => onClearFilter?.(name)}>\n            {t('clear')}\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n    </StyledFilter>\n  );\n};\n\nexport default Filter;\n"]}

package/lib/components/SearchResults/SearchResults.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { Button, Card, CardContent, Count, defaultThemeProp, Flex, Grid, Icon, Modal, ModalManagerContext, EmptyState, SearchInput, Selectable, Text, useI18n, useBreakpoint, useAfterInitialEffect } from '@pega/cosmos-react-core';
@@ -35,7 +35,7 @@ SelectedFilters.defaultProps = defaultThemeProp;
 const FilterModal = (props) => {
     const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;
     const t = useI18n();
-    return (_jsx(Modal, Object.assign({ heading: t('filters'), autoWidth: true }, { children: _jsxs(Grid, Object.assign({ as: ModalFilterContent, container: { rowGap: 2 } }, { children: [_jsxs(Flex, Object.assign({ container: { gap: 1, alignItems: 'center' } }, { children: [_jsxs(Text, Object.assign({ as: CountText, variant: 'secondary' }, { children: [count, " ", t('count_results')] }), void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, Object.assign({ variant: 'link', onClick: onClearAllFilters }, { children: t('clear_all') }), void 0))] }), void 0), !!activeFilters.length && (_jsx(Flex, Object.assign({ as: SelectedFilters, container: { direction: 'row', gap: 1 } }, { children: activeFilters.map(filter => {
+    return (_jsx(Modal, Object.assign({ heading: t('filters'), autoWidth: true }, { children: _jsxs(Grid, Object.assign({ as: ModalFilterContent, container: { rowGap: 2 } }, { children: [_jsxs(Flex, Object.assign({ container: { gap: 1, alignItems: 'center' } }, { children: [_jsx(Text, Object.assign({ as: CountText, variant: 'secondary' }, { children: t('count_results', [], { count }) }), void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, Object.assign({ variant: 'link', onClick: onClearAllFilters }, { children: t('clear_all') }), void 0))] }), void 0), !!activeFilters.length && (_jsx(Flex, Object.assign({ as: SelectedFilters, container: { direction: 'row', gap: 1 } }, { children: activeFilters.map(filter => {
                         return (_jsx(Selectable, Object.assign({ id: filter.id, onRemove: () => onFilterChange?.({
                                 name: filter.groupName,
                                 type: filter.type,
@@ -112,7 +112,7 @@ const SearchResults = forwardRef(({ results, searchInputProps, count, filters, o
                             rows: 'auto 1fr',
                             areas: '"meta" "items"'
                         } }, { children: [_jsxs(Grid, Object.assign({ item: { area: 'meta' }, container: { rowGap: 1 } }, { children: [_jsxs(Flex, Object.assign({ container: { justify: 'between', alignItems: 'center' } }, { children: [_jsx(Text, Object.assign({ as: CountText, variant: 'secondary' }, { children: searchInputProps.value !== '' || results.length > 0
-                                                    ? `${count} ${t('count_results')}`
+                                                    ? t('count_results', [], { count: results.length })
                                                     : '' }), void 0), !isMedium && !!filters.length && (_jsxs(Button, Object.assign({ variant: 'simple', onClick: openFiltersModal }, { children: [_jsx(Icon, { name: activeFilters.length > 0 ? 'filter-on' : 'filter' }, void 0), "\u00A0", t('filters'), "\u00A0", _jsx(Count, { children: activeFilters.length }, void 0)] }), void 0))] }), void 0), !!activeFilters.length && (_jsx(Flex, Object.assign({ as: SelectedFilters, container: { direction: 'row', gap: 1 } }, { children: activeFilters.map(filter => {
                                             return (_jsx(Selectable, Object.assign({ id: filter.id, onRemove: () => onFilterChange?.({
                                                     name: filter.groupName,

package/lib/components/SearchResults/SearchResults.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ComponentProps\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Count,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  Modal,\n  ModalMethods,\n  ModalManagerContext,\n  EmptyState,\n  SearchInput,\n  Selectable,\n  Text,\n  useI18n,\n  useBreakpoint,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport {\n  SearchResultsProps,\n  SearchResultProps,\n  FilterProps,\n  ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\n\nconst StyledSearchResults = styled.div``;\n\nStyledSearchResults.defaultProps = defaultThemeProp;\n\nconst FilterTitle = styled.span(({ theme: { base } }) => {\n  return css`\n    padding-bottom: calc(2 * ${base.spacing});\n  `;\n});\n\nFilterTitle.defaultProps = defaultThemeProp;\n\nconst CountText = styled.span(({ theme: { base } }) => {\n  return css`\n    font-weight: ${base['font-weight']['semi-bold']};\n  `;\n});\n\nCountText.defaultProps = defaultThemeProp;\n\nconst ModalFilterContent = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      margin-top: calc(0.25 * ${spacing});\n      width: 25rem;\n    `;\n  }\n);\n\nModalFilterContent.defaultProps = defaultThemeProp;\n\nconst SelectedFilters = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      overflow-x: auto;\n      padding-bottom: calc(0.5 * ${spacing});\n    `;\n  }\n);\n\nSelectedFilters.defaultProps = defaultThemeProp;\n\nconst FilterModal = (\n  props: Pick<\n    SearchResultsProps,\n    'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n  > & {\n    activeFilters: ActiveFilters[];\n  }\n) => {\n  const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n  const t = useI18n();\n\n  return (\n    <Modal heading={t('filters')} autoWidth>\n      <Grid as={ModalFilterContent} container={{ rowGap: 2 }}>\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Text as={CountText} variant='secondary'>\n            {count} {t('count_results')}\n          </Text>\n          {onClearAllFilters && !!activeFilters.length && (\n            <Button variant='link' onClick={onClearAllFilters}>\n              {t('clear_all')}\n            </Button>\n          )}\n        </Flex>\n        {!!activeFilters.length && (\n          <Flex as={SelectedFilters} container={{ direction: 'row', gap: 1 }}>\n            {activeFilters.map(filter => {\n              return (\n                <Selectable\n                  key={filter.id}\n                  id={filter.id}\n                  onRemove={() =>\n                    onFilterChange?.({\n                      name: filter.groupName,\n                      type: filter.type,\n                      value: filter.resetValue\n                    })\n                  }\n                >\n                  {`${filter.groupName}: ${filter.name}`}\n                </Selectable>\n              );\n            })}\n          </Flex>\n        )}\n        <div>\n          {filters.map((filter: FilterProps) => {\n            return (\n              <Filter\n                key={filter.name}\n                onFilterChange={onFilterChange}\n                onClearFilter={onClearFilter}\n                {...filter}\n              />\n            );\n          })}\n        </div>\n      </Grid>\n    </Modal>\n  );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n  (\n    {\n      results,\n      searchInputProps,\n      count,\n      filters,\n      onFilterChange,\n      onClearAllFilters,\n      onClearFilter,\n      onShowMore,\n      ...restProps\n    }: PropsWithoutRef<SearchResultsProps>,\n    ref: SearchResultsProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMedium = useBreakpoint('md');\n    const { create } = useContext(ModalManagerContext);\n    const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n    const { placeholder = t('search_placeholder_default') } = searchInputProps;\n\n    const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              resetValue: { ...item, checked: false },\n              groupName: group.name,\n              type: group.type\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n\n    const openFiltersModal = () => {\n      filtersMethods.current = create(FilterModal, {\n        activeFilters,\n        count,\n        filters,\n        onFilterChange,\n        onClearFilter,\n        onClearAllFilters\n      });\n    };\n\n    useAfterInitialEffect(() => {\n      if (filtersMethods.current) {\n        filtersMethods.current.update({\n          activeFilters,\n          count,\n          filters\n        });\n      }\n    }, [activeFilters, count, filters]);\n\n    useAfterInitialEffect(() => {\n      if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n    }, [isMedium]);\n\n    return (\n      <Card>\n        <CardContent>\n          <Grid\n            {...restProps}\n            as={StyledSearchResults}\n            ref={ref}\n            md={\n              filters.length\n                ? {\n                    container: {\n                      cols: '15rem auto',\n                      areas: '\"search search\" \"filters results\"'\n                    }\n                  }\n                : {}\n            }\n            s={\n              filters.length\n                ? {\n                    container: {\n                      cols: 'auto'\n                    }\n                  }\n                : {}\n            }\n            container={{ rows: '1fr auto', areas: '\"search\" \"results\"', rowGap: 2, colGap: 4 }}\n          >\n            <Grid item={{ area: 'search' }}>\n              <SearchInput {...searchInputProps} placeholder={placeholder} />\n            </Grid>\n            {isMedium && !!filters.length && (\n              <Grid item={{ area: 'filters', alignSelf: 'start' }}>\n                <Flex as={FilterTitle} container={{ justify: 'between' }}>\n                  <Text variant='h2'>{t('filters')}</Text>\n                  {onClearAllFilters && !!activeFilters.length && (\n                    <Button variant='link' onClick={onClearAllFilters}>\n                      {t('clear_all')}\n                    </Button>\n                  )}\n                </Flex>\n                {filters.map((filter: FilterProps) => {\n                  return (\n                    <Filter\n                      key={filter.name}\n                      onFilterChange={onFilterChange}\n                      onClearFilter={onClearFilter}\n                      {...filter}\n                    />\n                  );\n                })}\n              </Grid>\n            )}\n            <Grid\n              item={{ area: 'results' }}\n              container={{\n                alignItems: 'center',\n                rowGap: 2,\n                rows: 'auto 1fr',\n                areas: '\"meta\" \"items\"'\n              }}\n            >\n              <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n                <Flex container={{ justify: 'between', alignItems: 'center' }}>\n                  <Text as={CountText} variant='secondary'>\n                    {searchInputProps.value !== '' || results.length > 0\n                      ? `${count} ${t('count_results')}`\n                      : ''}\n                  </Text>\n                  {!isMedium && !!filters.length && (\n                    <Button variant='simple' onClick={openFiltersModal}>\n                      <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n                      &nbsp;{t('filters')}&nbsp;\n                      <Count>{activeFilters.length}</Count>\n                    </Button>\n                  )}\n                </Flex>\n                {!!activeFilters.length && (\n                  <Flex as={SelectedFilters} container={{ direction: 'row', gap: 1 }}>\n                    {activeFilters.map(filter => {\n                      return (\n                        <Selectable\n                          key={filter.id}\n                          id={filter.id}\n                          onRemove={() =>\n                            onFilterChange?.({\n                              name: filter.groupName,\n                              type: filter.type,\n                              value: filter.resetValue\n                            })\n                          }\n                        >\n                          {`${filter.groupName}: ${filter.name}`}\n                        </Selectable>\n                      );\n                    })}\n                  </Flex>\n                )}\n              </Grid>\n              <Grid\n                item={{ area: 'items', alignSelf: results.length ? 'start' : 'center' }}\n                container={{ rowGap: 4 }}\n              >\n                {results.length ? (\n                  results.map((result: SearchResultProps) => {\n                    return <SearchResult key={result.id} {...result} />;\n                  })\n                ) : (\n                  <Grid item={{ alignSelf: 'stretch' }}>\n                    <EmptyState\n                      message={searchInputProps.value === '' ? t('empty_search') : undefined}\n                    />\n                  </Grid>\n                )}\n              </Grid>\n              {onShowMore && (\n                <Flex container={{ justify: 'center' }}>\n                  <Button variant='link' onClick={onShowMore}>\n                    {t('show_more')}\n                  </Button>\n                </Flex>\n              )}\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default SearchResults;\n"]}
+{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ComponentProps\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Count,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  Modal,\n  ModalMethods,\n  ModalManagerContext,\n  EmptyState,\n  SearchInput,\n  Selectable,\n  Text,\n  useI18n,\n  useBreakpoint,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport {\n  SearchResultsProps,\n  SearchResultProps,\n  FilterProps,\n  ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\n\nconst StyledSearchResults = styled.div``;\n\nStyledSearchResults.defaultProps = defaultThemeProp;\n\nconst FilterTitle = styled.span(({ theme: { base } }) => {\n  return css`\n    padding-bottom: calc(2 * ${base.spacing});\n  `;\n});\n\nFilterTitle.defaultProps = defaultThemeProp;\n\nconst CountText = styled.span(({ theme: { base } }) => {\n  return css`\n    font-weight: ${base['font-weight']['semi-bold']};\n  `;\n});\n\nCountText.defaultProps = defaultThemeProp;\n\nconst ModalFilterContent = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      margin-top: calc(0.25 * ${spacing});\n      width: 25rem;\n    `;\n  }\n);\n\nModalFilterContent.defaultProps = defaultThemeProp;\n\nconst SelectedFilters = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      overflow-x: auto;\n      padding-bottom: calc(0.5 * ${spacing});\n    `;\n  }\n);\n\nSelectedFilters.defaultProps = defaultThemeProp;\n\nconst FilterModal = (\n  props: Pick<\n    SearchResultsProps,\n    'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n  > & {\n    activeFilters: ActiveFilters[];\n  }\n) => {\n  const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n  const t = useI18n();\n\n  return (\n    <Modal heading={t('filters')} autoWidth>\n      <Grid as={ModalFilterContent} container={{ rowGap: 2 }}>\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Text as={CountText} variant='secondary'>\n            {t('count_results', [], { count })}\n          </Text>\n          {onClearAllFilters && !!activeFilters.length && (\n            <Button variant='link' onClick={onClearAllFilters}>\n              {t('clear_all')}\n            </Button>\n          )}\n        </Flex>\n        {!!activeFilters.length && (\n          <Flex as={SelectedFilters} container={{ direction: 'row', gap: 1 }}>\n            {activeFilters.map(filter => {\n              return (\n                <Selectable\n                  key={filter.id}\n                  id={filter.id}\n                  onRemove={() =>\n                    onFilterChange?.({\n                      name: filter.groupName,\n                      type: filter.type,\n                      value: filter.resetValue\n                    })\n                  }\n                >\n                  {`${filter.groupName}: ${filter.name}`}\n                </Selectable>\n              );\n            })}\n          </Flex>\n        )}\n        <div>\n          {filters.map((filter: FilterProps) => {\n            return (\n              <Filter\n                key={filter.name}\n                onFilterChange={onFilterChange}\n                onClearFilter={onClearFilter}\n                {...filter}\n              />\n            );\n          })}\n        </div>\n      </Grid>\n    </Modal>\n  );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n  (\n    {\n      results,\n      searchInputProps,\n      count,\n      filters,\n      onFilterChange,\n      onClearAllFilters,\n      onClearFilter,\n      onShowMore,\n      ...restProps\n    }: PropsWithoutRef<SearchResultsProps>,\n    ref: SearchResultsProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMedium = useBreakpoint('md');\n    const { create } = useContext(ModalManagerContext);\n    const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n    const { placeholder = t('search_placeholder_default') } = searchInputProps;\n\n    const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              resetValue: { ...item, checked: false },\n              groupName: group.name,\n              type: group.type\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n\n    const openFiltersModal = () => {\n      filtersMethods.current = create(FilterModal, {\n        activeFilters,\n        count,\n        filters,\n        onFilterChange,\n        onClearFilter,\n        onClearAllFilters\n      });\n    };\n\n    useAfterInitialEffect(() => {\n      if (filtersMethods.current) {\n        filtersMethods.current.update({\n          activeFilters,\n          count,\n          filters\n        });\n      }\n    }, [activeFilters, count, filters]);\n\n    useAfterInitialEffect(() => {\n      if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n    }, [isMedium]);\n\n    return (\n      <Card>\n        <CardContent>\n          <Grid\n            {...restProps}\n            as={StyledSearchResults}\n            ref={ref}\n            md={\n              filters.length\n                ? {\n                    container: {\n                      cols: '15rem auto',\n                      areas: '\"search search\" \"filters results\"'\n                    }\n                  }\n                : {}\n            }\n            s={\n              filters.length\n                ? {\n                    container: {\n                      cols: 'auto'\n                    }\n                  }\n                : {}\n            }\n            container={{ rows: '1fr auto', areas: '\"search\" \"results\"', rowGap: 2, colGap: 4 }}\n          >\n            <Grid item={{ area: 'search' }}>\n              <SearchInput {...searchInputProps} placeholder={placeholder} />\n            </Grid>\n            {isMedium && !!filters.length && (\n              <Grid item={{ area: 'filters', alignSelf: 'start' }}>\n                <Flex as={FilterTitle} container={{ justify: 'between' }}>\n                  <Text variant='h2'>{t('filters')}</Text>\n                  {onClearAllFilters && !!activeFilters.length && (\n                    <Button variant='link' onClick={onClearAllFilters}>\n                      {t('clear_all')}\n                    </Button>\n                  )}\n                </Flex>\n                {filters.map((filter: FilterProps) => {\n                  return (\n                    <Filter\n                      key={filter.name}\n                      onFilterChange={onFilterChange}\n                      onClearFilter={onClearFilter}\n                      {...filter}\n                    />\n                  );\n                })}\n              </Grid>\n            )}\n            <Grid\n              item={{ area: 'results' }}\n              container={{\n                alignItems: 'center',\n                rowGap: 2,\n                rows: 'auto 1fr',\n                areas: '\"meta\" \"items\"'\n              }}\n            >\n              <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n                <Flex container={{ justify: 'between', alignItems: 'center' }}>\n                  <Text as={CountText} variant='secondary'>\n                    {searchInputProps.value !== '' || results.length > 0\n                      ? t('count_results', [], { count: results.length })\n                      : ''}\n                  </Text>\n                  {!isMedium && !!filters.length && (\n                    <Button variant='simple' onClick={openFiltersModal}>\n                      <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n                      &nbsp;{t('filters')}&nbsp;\n                      <Count>{activeFilters.length}</Count>\n                    </Button>\n                  )}\n                </Flex>\n                {!!activeFilters.length && (\n                  <Flex as={SelectedFilters} container={{ direction: 'row', gap: 1 }}>\n                    {activeFilters.map(filter => {\n                      return (\n                        <Selectable\n                          key={filter.id}\n                          id={filter.id}\n                          onRemove={() =>\n                            onFilterChange?.({\n                              name: filter.groupName,\n                              type: filter.type,\n                              value: filter.resetValue\n                            })\n                          }\n                        >\n                          {`${filter.groupName}: ${filter.name}`}\n                        </Selectable>\n                      );\n                    })}\n                  </Flex>\n                )}\n              </Grid>\n              <Grid\n                item={{ area: 'items', alignSelf: results.length ? 'start' : 'center' }}\n                container={{ rowGap: 4 }}\n              >\n                {results.length ? (\n                  results.map((result: SearchResultProps) => {\n                    return <SearchResult key={result.id} {...result} />;\n                  })\n                ) : (\n                  <Grid item={{ alignSelf: 'stretch' }}>\n                    <EmptyState\n                      message={searchInputProps.value === '' ? t('empty_search') : undefined}\n                    />\n                  </Grid>\n                )}\n              </Grid>\n              {onShowMore && (\n                <Flex container={{ justify: 'center' }}>\n                  <Button variant='link' onClick={onShowMore}>\n                    {t('show_more')}\n                  </Button>\n                </Flex>\n              )}\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default SearchResults;\n"]}

package/lib/components/SearchResults/SearchResults.types.d.ts

@@ -45,8 +45,8 @@ export interface TextFilterProps extends BaseFilterProps {
     /** The value of the filter. */
     value?: string;
     /**
-     * Placeholder text. The default value is a locale translation of 'Search...'
-     * @default "Search..."
+     * Placeholder text. The default value is a locale translation of 'Search…'
+     * @default "Search…"
      */
     placeholder?: string;
 }

package/lib/components/SearchResults/SearchResults.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.types.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  LinkProps,\n  MetaListProps,\n  OmitStrict,\n  RadioCheckProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\ninterface BaseFilterProps {\n  /** The name of the filter. */\n  name: string;\n  /**\n   * Determines if the filter will start in an expanded state.\n   * @default true\n   */\n  expanded?: boolean;\n}\n\nexport interface SelectFilterItemProps {\n  /** The id for the filter option. */\n  id: NonNullable<RadioCheckProps['id']>;\n  /** The label for the filter option. */\n  label: RadioCheckProps['label'];\n  /** Determines if the filter option is active or not. */\n  checked: RadioCheckProps['checked'];\n  /** The name for the filter item that will show in the selected filters section */\n  name: NonNullable<RadioCheckProps['name']>;\n}\n\nexport interface SelectFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a select filter. */\n  type: 'select';\n  /** The set of options for the filter. */\n  items: SelectFilterItemProps[];\n  /**\n   * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.\n   * @default \"multi-select\"\n   */\n  selectType?: 'single-select' | 'multi-select';\n}\n\nexport interface ActiveSelectFilter {\n  id: SelectFilterItemProps['id'];\n  name: SelectFilterItemProps['name'];\n  resetValue: SelectFilterItemProps & { checked: false };\n  groupName: SelectFilterProps['name'];\n  type: SelectFilterProps['type'];\n}\n\nexport interface TextFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a text filter. */\n  type: 'text';\n  /** The value of the filter. */\n  value?: string;\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search...'\n   * @default \"Search...\"\n   */\n  placeholder?: string;\n}\n\n// For use later: export type FilterProps = TextFilterProps | SelectFilterProps;\nexport type FilterProps = SelectFilterProps;\n\nexport type ActiveFilters = ActiveSelectFilter;\n\nexport interface SearchResultProps {\n  /** The id of the search result to be displayed. */\n  id: string;\n  /** The title of the search result. */\n  title: string;\n  /** LinkProps to be passed to . */\n  link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;\n  /** A description for the search result. */\n  description?: string;\n  /** A list of elements to be rendered within a MetaList categorizing the result. */\n  meta?: MetaListProps['items'];\n}\n\ninterface BaseFilterEvent {\n  name: string;\n}\ninterface SelectFilterEvent extends BaseFilterEvent {\n  type: 'select';\n  value: SelectFilterItemProps;\n}\n\n// For use later: export type FilterEvent = SelectFilterEvent | TextFilterEvent;\nexport type FilterEvent = SelectFilterEvent;\n\nexport interface SearchResultsProps {\n  /** A set of results to render for a given search. */\n  results: SearchResultProps[];\n  /** Props related to the SearchInput. */\n  searchInputProps: SearchInputProps;\n  /** The number of total results related to a given search. */\n  count: number;\n  /** A set of filters and their current states for a given search. */\n  filters: FilterProps[];\n  /** Callback that is fired when the value of a filter changes. */\n  onFilterChange?: (filter: FilterEvent) => void;\n  /** Callback that is fired when the Clear all button is clicked. */\n  onClearAllFilters?: () => void;\n  /** Callback that is fired when the Clear button is clicked within a filter. */\n  onClearFilter?: (name: BaseFilterProps['name']) => void;\n  /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */\n  onShowMore?: () => void;\n  /** A ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"SearchResults.types.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  LinkProps,\n  MetaListProps,\n  OmitStrict,\n  RadioCheckProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\ninterface BaseFilterProps {\n  /** The name of the filter. */\n  name: string;\n  /**\n   * Determines if the filter will start in an expanded state.\n   * @default true\n   */\n  expanded?: boolean;\n}\n\nexport interface SelectFilterItemProps {\n  /** The id for the filter option. */\n  id: NonNullable<RadioCheckProps['id']>;\n  /** The label for the filter option. */\n  label: RadioCheckProps['label'];\n  /** Determines if the filter option is active or not. */\n  checked: RadioCheckProps['checked'];\n  /** The name for the filter item that will show in the selected filters section */\n  name: NonNullable<RadioCheckProps['name']>;\n}\n\nexport interface SelectFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a select filter. */\n  type: 'select';\n  /** The set of options for the filter. */\n  items: SelectFilterItemProps[];\n  /**\n   * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.\n   * @default \"multi-select\"\n   */\n  selectType?: 'single-select' | 'multi-select';\n}\n\nexport interface ActiveSelectFilter {\n  id: SelectFilterItemProps['id'];\n  name: SelectFilterItemProps['name'];\n  resetValue: SelectFilterItemProps & { checked: false };\n  groupName: SelectFilterProps['name'];\n  type: SelectFilterProps['type'];\n}\n\nexport interface TextFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a text filter. */\n  type: 'text';\n  /** The value of the filter. */\n  value?: string;\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default \"Search…\"\n   */\n  placeholder?: string;\n}\n\n// For use later: export type FilterProps = TextFilterProps | SelectFilterProps;\nexport type FilterProps = SelectFilterProps;\n\nexport type ActiveFilters = ActiveSelectFilter;\n\nexport interface SearchResultProps {\n  /** The id of the search result to be displayed. */\n  id: string;\n  /** The title of the search result. */\n  title: string;\n  /** LinkProps to be passed to . */\n  link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;\n  /** A description for the search result. */\n  description?: string;\n  /** A list of elements to be rendered within a MetaList categorizing the result. */\n  meta?: MetaListProps['items'];\n}\n\ninterface BaseFilterEvent {\n  name: string;\n}\ninterface SelectFilterEvent extends BaseFilterEvent {\n  type: 'select';\n  value: SelectFilterItemProps;\n}\n\n// For use later: export type FilterEvent = SelectFilterEvent | TextFilterEvent;\nexport type FilterEvent = SelectFilterEvent;\n\nexport interface SearchResultsProps {\n  /** A set of results to render for a given search. */\n  results: SearchResultProps[];\n  /** Props related to the SearchInput. */\n  searchInputProps: SearchInputProps;\n  /** The number of total results related to a given search. */\n  count: number;\n  /** A set of filters and their current states for a given search. */\n  filters: FilterProps[];\n  /** Callback that is fired when the value of a filter changes. */\n  onFilterChange?: (filter: FilterEvent) => void;\n  /** Callback that is fired when the Clear all button is clicked. */\n  onClearAllFilters?: () => void;\n  /** Callback that is fired when the Clear button is clicked within a filter. */\n  onClearFilter?: (name: BaseFilterProps['name']) => void;\n  /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */\n  onShowMore?: () => void;\n  /** A ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAwD,MAAM,OAAO,CAAC;AAGhG,OAAO,EAGL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAsMzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAwD,MAAM,OAAO,CAAC;AAGhG,OAAO,EAGL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAwMzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Stages/Stages.js

@@ -94,7 +94,7 @@ const Stages = (props) => {
             setRequestDismiss(false);
         }
     }, [activeStageEl, requestDismiss]);
-    const RenderModal = ({ heading = t('lifecycle', caseTitle || 'Case') }) => {
+    const RenderModal = ({ heading = t('lifecycle', [caseTitle || 'Case']) }) => {
         return (_jsx(Modal, Object.assign({}, restProps, { heading: heading, onRequestDismiss: () => setRequestDismiss(true) }, { children: stages.map((stage, id) => (_jsx(StepsContainer, { currentStage: [stage] }, id.toString()))) }), void 0));
     };
     const openModal = () => {

package/lib/components/Stages/Stages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, useRef, useEffect, useContext, useCallback } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  Flex,\n  ForwardProps,\n  useElement,\n  useOuterEvent,\n  Popover,\n  useI18n,\n  Button,\n  ModalManagerContext,\n  ModalProps,\n  Modal,\n  getFocusables,\n  useBreakpoint,\n  debounce,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nimport { StagesProps } from './Stages.types';\nimport StepsContainer from './StepsContainer';\nimport { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = (props: StagesProps) => {\n  const { current, stages, caseTitle, ...restProps } = props;\n  const t = useI18n();\n\n  const [stagesEl, setStagesEl] = useElement<HTMLDivElement>();\n  const [currentStageNameEl, setCurrentStageNameEl] = useElement<HTMLSpanElement>();\n  const [currentStageButtonEl, setCurrentStageButtonEl] = useElement<HTMLButtonElement>();\n\n  const [activeStageIndex, setActiveStageIndex] = useState<number>(0);\n  const activeStageObj = stages[activeStageIndex];\n  const stagesRefs = useRef<HTMLElement[]>([]);\n  const activeStageEl = stagesRefs.current[activeStageIndex];\n  const { create } = useContext(ModalManagerContext);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [showPopover, setShowPopover] = useState(false);\n  const popoverContentRef = useRef(null);\n  const isSmallOrAbove = useBreakpoint('sm');\n  const focusableElements = getFocusables(popoverContentRef);\n\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  const resizeObserver = new ResizeObserver(\n    debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n    }, 100)\n  );\n\n  const theme = useTheme();\n\n  const intersectionObserver = new IntersectionObserver(\n    entries => {\n      if (entries[0].intersectionRatio < 1) {\n        if (stagesEl) setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));\n        setCompressedView(true);\n      }\n    },\n    { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 }\n  );\n\n  useEffect(() => {\n    if (stagesEl && currentStageNameEl) {\n      intersectionObserver.observe(currentStageNameEl as Element);\n      resizeObserver.observe(stagesEl);\n\n      return () => {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }\n  }, [stagesEl, currentStageNameEl, compressedView]);\n\n  useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {\n    if (showPopover) {\n      setShowPopover(false);\n      e.preventDefault();\n    }\n  });\n\n  const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {\n    if (!showPopover) ev.preventDefault();\n  };\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') {\n        setShowPopover(false);\n        activeStageEl?.focus();\n      }\n    },\n    [activeStageEl]\n  );\n\n  const onKeyDownPopover = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && event.shiftKey) {\n        const firstFocusable = focusableElements[0];\n\n        if (document.activeElement === firstFocusable) {\n          stagesRefs.current[activeStageIndex + 1]?.focus();\n          setShowPopover(false);\n        }\n      }\n\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const lastFocusable = focusableElements[focusableElements.length - 1];\n\n        if (document.activeElement === lastFocusable) {\n          activeStageEl?.focus();\n          setShowPopover(false);\n        }\n      }\n    },\n    [activeStageEl, focusableElements, activeStageIndex]\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onKeyDown]);\n\n  useEffect(() => {\n    if (focusableElements.length) focusableElements[0].focus();\n  }, [popoverEl]);\n\n  const [requestDismiss, setRequestDismiss] = useState(false);\n\n  useEffect(() => {\n    if (requestDismiss) {\n      setShowPopover(false);\n      activeStageEl?.focus();\n      setRequestDismiss(false);\n    }\n  }, [activeStageEl, requestDismiss]);\n\n  const RenderModal = ({ heading = t('lifecycle', caseTitle || 'Case') }: Partial<ModalProps>) => {\n    return (\n      <Modal {...restProps} heading={heading} onRequestDismiss={() => setRequestDismiss(true)}>\n        {stages.map((stage, id) => (\n          <StepsContainer currentStage={[stage]} key={id.toString()} />\n        ))}\n      </Modal>\n    );\n  };\n\n  const openModal = () => {\n    setShowPopover(false);\n    create(RenderModal);\n  };\n\n  const isCurrent = (stageId: string) => current === stageId;\n\n  return (\n    <>\n      <Flex container as={StyledStages} ref={setStagesEl} {...restProps}>\n        {stages.map((stage, index) => (\n          <Flex\n            container={{ justify: 'center', alignItems: 'center' }}\n            as={StyledStage}\n            item={{ grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }}\n            aria-current={isCurrent(stage.id) ? 'step' : undefined}\n            aria-label={`Stage ${stage.name}`}\n            key={`stage-${stage.id}`}\n            ref={(el: HTMLButtonElement) => {\n              stagesRefs.current[index] = el;\n              if (isCurrent(stage.id)) setCurrentStageButtonEl(el);\n            }}\n            onMouseDown={onMouseDown}\n            onClick={() => {\n              setActiveStageIndex(index);\n              if (isSmallOrAbove) {\n                setShowPopover(!showPopover);\n              } else {\n                openModal();\n              }\n            }}\n          >\n            {stage.complete && <Icon name='check' />}\n            {!(stage.complete && compressedView) && (\n              <StyledInnerStage\n                ref={isCurrent(stage.id) ? setCurrentStageNameEl : undefined}\n                ellipsis={isCurrent(stage.id) && compressedView}\n              >\n                {!isCurrent(stage.id) && compressedView ? index + 1 : stage.name}\n              </StyledInnerStage>\n            )}\n          </Flex>\n        ))}\n      </Flex>\n      <Flex ref={popoverContentRef}>\n        <Popover\n          as={StyledStagePopover}\n          show={showPopover && isSmallOrAbove}\n          target={stagesRefs.current[activeStageIndex]}\n          id='id'\n          ref={setPopoverRef}\n          arrow\n          placement='bottom-start'\n          onKeyDown={onKeyDownPopover}\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['bottom-end', 'right', 'left']\n              }\n            }\n          ]}\n        >\n          <StepsContainer currentStage={[activeStageObj]} />\n          <Button variant='secondary' onClick={openModal}>\n            {t('stage_see_full_lifecycle')}\n          </Button>\n        </Popover>\n      </Flex>\n    </>\n  );\n};\n\nexport default Stages;\n"]}
+{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, useRef, useEffect, useContext, useCallback } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  Flex,\n  ForwardProps,\n  useElement,\n  useOuterEvent,\n  Popover,\n  useI18n,\n  Button,\n  ModalManagerContext,\n  ModalProps,\n  Modal,\n  getFocusables,\n  useBreakpoint,\n  debounce,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nimport { StagesProps } from './Stages.types';\nimport StepsContainer from './StepsContainer';\nimport { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = (props: StagesProps) => {\n  const { current, stages, caseTitle, ...restProps } = props;\n  const t = useI18n();\n\n  const [stagesEl, setStagesEl] = useElement<HTMLDivElement>();\n  const [currentStageNameEl, setCurrentStageNameEl] = useElement<HTMLSpanElement>();\n  const [currentStageButtonEl, setCurrentStageButtonEl] = useElement<HTMLButtonElement>();\n\n  const [activeStageIndex, setActiveStageIndex] = useState<number>(0);\n  const activeStageObj = stages[activeStageIndex];\n  const stagesRefs = useRef<HTMLElement[]>([]);\n  const activeStageEl = stagesRefs.current[activeStageIndex];\n  const { create } = useContext(ModalManagerContext);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [showPopover, setShowPopover] = useState(false);\n  const popoverContentRef = useRef(null);\n  const isSmallOrAbove = useBreakpoint('sm');\n  const focusableElements = getFocusables(popoverContentRef);\n\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  const resizeObserver = new ResizeObserver(\n    debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n    }, 100)\n  );\n\n  const theme = useTheme();\n\n  const intersectionObserver = new IntersectionObserver(\n    entries => {\n      if (entries[0].intersectionRatio < 1) {\n        if (stagesEl) setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));\n        setCompressedView(true);\n      }\n    },\n    { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 }\n  );\n\n  useEffect(() => {\n    if (stagesEl && currentStageNameEl) {\n      intersectionObserver.observe(currentStageNameEl as Element);\n      resizeObserver.observe(stagesEl);\n\n      return () => {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }\n  }, [stagesEl, currentStageNameEl, compressedView]);\n\n  useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {\n    if (showPopover) {\n      setShowPopover(false);\n      e.preventDefault();\n    }\n  });\n\n  const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {\n    if (!showPopover) ev.preventDefault();\n  };\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') {\n        setShowPopover(false);\n        activeStageEl?.focus();\n      }\n    },\n    [activeStageEl]\n  );\n\n  const onKeyDownPopover = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && event.shiftKey) {\n        const firstFocusable = focusableElements[0];\n\n        if (document.activeElement === firstFocusable) {\n          stagesRefs.current[activeStageIndex + 1]?.focus();\n          setShowPopover(false);\n        }\n      }\n\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const lastFocusable = focusableElements[focusableElements.length - 1];\n\n        if (document.activeElement === lastFocusable) {\n          activeStageEl?.focus();\n          setShowPopover(false);\n        }\n      }\n    },\n    [activeStageEl, focusableElements, activeStageIndex]\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onKeyDown]);\n\n  useEffect(() => {\n    if (focusableElements.length) focusableElements[0].focus();\n  }, [popoverEl]);\n\n  const [requestDismiss, setRequestDismiss] = useState(false);\n\n  useEffect(() => {\n    if (requestDismiss) {\n      setShowPopover(false);\n      activeStageEl?.focus();\n      setRequestDismiss(false);\n    }\n  }, [activeStageEl, requestDismiss]);\n\n  const RenderModal = ({\n    heading = t('lifecycle', [caseTitle || 'Case'])\n  }: Partial<ModalProps>) => {\n    return (\n      <Modal {...restProps} heading={heading} onRequestDismiss={() => setRequestDismiss(true)}>\n        {stages.map((stage, id) => (\n          <StepsContainer currentStage={[stage]} key={id.toString()} />\n        ))}\n      </Modal>\n    );\n  };\n\n  const openModal = () => {\n    setShowPopover(false);\n    create(RenderModal);\n  };\n\n  const isCurrent = (stageId: string) => current === stageId;\n\n  return (\n    <>\n      <Flex container as={StyledStages} ref={setStagesEl} {...restProps}>\n        {stages.map((stage, index) => (\n          <Flex\n            container={{ justify: 'center', alignItems: 'center' }}\n            as={StyledStage}\n            item={{ grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }}\n            aria-current={isCurrent(stage.id) ? 'step' : undefined}\n            aria-label={`Stage ${stage.name}`}\n            key={`stage-${stage.id}`}\n            ref={(el: HTMLButtonElement) => {\n              stagesRefs.current[index] = el;\n              if (isCurrent(stage.id)) setCurrentStageButtonEl(el);\n            }}\n            onMouseDown={onMouseDown}\n            onClick={() => {\n              setActiveStageIndex(index);\n              if (isSmallOrAbove) {\n                setShowPopover(!showPopover);\n              } else {\n                openModal();\n              }\n            }}\n          >\n            {stage.complete && <Icon name='check' />}\n            {!(stage.complete && compressedView) && (\n              <StyledInnerStage\n                ref={isCurrent(stage.id) ? setCurrentStageNameEl : undefined}\n                ellipsis={isCurrent(stage.id) && compressedView}\n              >\n                {!isCurrent(stage.id) && compressedView ? index + 1 : stage.name}\n              </StyledInnerStage>\n            )}\n          </Flex>\n        ))}\n      </Flex>\n      <Flex ref={popoverContentRef}>\n        <Popover\n          as={StyledStagePopover}\n          show={showPopover && isSmallOrAbove}\n          target={stagesRefs.current[activeStageIndex]}\n          id='id'\n          ref={setPopoverRef}\n          arrow\n          placement='bottom-start'\n          onKeyDown={onKeyDownPopover}\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['bottom-end', 'right', 'left']\n              }\n            }\n          ]}\n        >\n          <StepsContainer currentStage={[activeStageObj]} />\n          <Button variant='secondary' onClick={openModal}>\n            {t('stage_see_full_lifecycle')}\n          </Button>\n        </Popover>\n      </Flex>\n    </>\n  );\n};\n\nexport default Stages;\n"]}

package/lib/components/Stakeholders/StakeholderForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StakeholderForm.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;qEAM3D,KAAK,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,UAAU,CAAC;AAJxE,wBA8DE"}
+{"version":3,"file":"StakeholderForm.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;qEAM3D,KAAK,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,UAAU,CAAC;AAJxE,wBAqEE"}