npm - @pega/cosmos-react-work - Versions diffs - 3.0.0-dev.2.1 → 3.0.0-dev.20.0 - Mend

@pega/cosmos-react-work 3.0.0-dev.2.1 → 3.0.0-dev.20.0

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

Files changed (126) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB;;;;SAqBhC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAM3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;oBAAgC,OAAO;SAQ1E,CAAC;AAIF,eAAO,MAAM,cAAc;;;kBAGX,MAAM;SAiBpB,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;SAiB9B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,~~yGAQlC~~,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC"}
1	+ {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB;;;;SAqBhC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAM3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;oBAAgC,OAAO;SAQ1E,CAAC;AAIF,eAAO,MAAM,cAAc;;;kBAGX,MAAM;SAiBpB,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;SAiB9B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGASlC,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC"}

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

@@ -94,6 +94,7 @@ export const StyledPersistentUtility = styled.div(() => {
     max-width: 60ch;
     overflow: auto;
     position: sticky;
+    z-index: 1;
     height: var(--case-view-content-height);
     top: var(--case-view-header-offset);
   `;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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~~;;;;;;GAMT~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGpC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledCaseViewContent = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n persistentUtility?: boolean;\n}>(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {\n return css`\n grid-area: content;\n padding: calc(2 * ${theme.base.spacing});\n\n ${persistentUtility &&\n isMediumOrAbove &&\n css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n `}\n\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n `}\n `;\n});\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n return css`\n align-self: flex-end;\n color: ${theme.base.palette['foreground-color']};\n margin-inline-end: 0.375rem;\n `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewUtilities = styled.div<{ utilitiesShown: boolean }>(\n ({ utilitiesShown, theme }) => {\n return css`\n width: ${utilitiesShown ? '25rem' : 'auto'};\n height: max-content;\n padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});\n `;\n }\n);\n\nStyledCaseViewUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledCaseView = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n stickyOffset: number;\n}>(({ theme, forceMobile, isMediumOrAbove, stickyOffset }) => {\n return css`\n --case-view-header-offset: ${stickyOffset}px;\n --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));\n min-height: calc(100vh - var(--appshell-offset, 0rem));\n position: relative;\n background-color: ${theme.base.palette['app-background']};\n\n > :last-child {\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n margin-inline-end: calc(2 * ${theme.base.spacing});\n `}\n }\n `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryRegion = styled.div<{\n forceMobile?: boolean;\n desktop?: boolean;\n}>(({ theme, forceMobile, desktop }) => {\n return css`\n position: sticky;\n top: var(--appshell-offset, 0);\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: ${theme.base['z-index'].popover};\n\n ${!forceMobile &&\n desktop &&\n css`\n height: var(--case-view-content-height);\n `}\n `;\n});\n\nStyledSummaryRegion.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n z-index: ${theme.base['z-index'].drawer - 1};\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n padding: calc(2 * ${theme.base.spacing});\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(() => {\n return css`\n max-width: 60ch;\n overflow: auto;\n position: sticky;\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n"]}
1	+ {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledCaseViewContent = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n persistentUtility?: boolean;\n}>(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {\n return css`\n grid-area: content;\n padding: calc(2 * ${theme.base.spacing});\n\n ${persistentUtility &&\n isMediumOrAbove &&\n css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n `}\n\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n `}\n `;\n});\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n return css`\n align-self: flex-end;\n color: ${theme.base.palette['foreground-color']};\n margin-inline-end: 0.375rem;\n `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewUtilities = styled.div<{ utilitiesShown: boolean }>(\n ({ utilitiesShown, theme }) => {\n return css`\n width: ${utilitiesShown ? '25rem' : 'auto'};\n height: max-content;\n padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});\n `;\n }\n);\n\nStyledCaseViewUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledCaseView = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n stickyOffset: number;\n}>(({ theme, forceMobile, isMediumOrAbove, stickyOffset }) => {\n return css`\n --case-view-header-offset: ${stickyOffset}px;\n --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));\n min-height: calc(100vh - var(--appshell-offset, 0rem));\n position: relative;\n background-color: ${theme.base.palette['app-background']};\n\n > :last-child {\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n margin-inline-end: calc(2 * ${theme.base.spacing});\n `}\n }\n `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryRegion = styled.div<{\n forceMobile?: boolean;\n desktop?: boolean;\n}>(({ theme, forceMobile, desktop }) => {\n return css`\n position: sticky;\n top: var(--appshell-offset, 0);\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: ${theme.base['z-index'].popover};\n\n ${!forceMobile &&\n desktop &&\n css`\n height: var(--case-view-content-height);\n `}\n `;\n});\n\nStyledSummaryRegion.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n z-index: ${theme.base['z-index'].drawer - 1};\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n padding: calc(2 * ${theme.base.spacing});\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(() => {\n return css`\n max-width: 60ch;\n overflow: auto;\n position: sticky;\n z-index: 1;\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n"]}

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

@@ -19,7 +19,7 @@ StyledMobileCaseViewHeader.defaultProps = defaultThemeProp;
 /** @deprecated */
 const MobileCaseView = (props) => {
     const { tabs, tabContent, title, ...restProps } = props;
-    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledMobileCaseView, ...restProps, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { shrink: 0 }, as: StyledMobileCaseViewHeader, children: [_jsx(Text, { as: 'h1', children: title }, void 0), _jsx(Tabs, { ...tabs, type: 'horizontal', inverted: true }, void 0)] }, void 0), tabContent] }, void 0));
+    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledMobileCaseView, ...restProps, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { shrink: 0 }, as: StyledMobileCaseViewHeader, children: [_jsx(Text, { as: 'h1', children: title }), _jsx(Tabs, { ...tabs, type: 'horizontal', inverted: true })] }), tabContent] }));
 };
 export default MobileCaseView;
 //# sourceMappingURL=MobileCaseView.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MobileCaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,IAAI,EAEJ,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAA;WAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;sBAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;IAE/D,UAAU;eACC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE/C,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrD,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,kBAAkB;AAClB,MAAM,cAAc,GAA2C,CAAC,KAA0B,EAAE,EAAE;IAC5F,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,KAAM,SAAS,aAC/E,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,YAAE,KAAK,~~WAAQ~~,EAC5B,KAAC,IAAI,OAAK,IAAI,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,~~iBAAG~~,~~YACxC~~,EACN,UAAU,~~YACN~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Flex,\n Tabs,\n TabsProps,\n Text,\n defaultThemeProp,\n ForwardProps\n} from '@pega/cosmos-react-core';\nimport { StyledText } from '@pega/cosmos-react-core/lib/components/Text/Text';\n\nexport interface MobileCaseViewProps {\n title: string;\n tabs: TabsProps;\n tabContent: ReactNode;\n}\n\nexport const StyledMobileCaseView = styled.div`\n min-height: 100vh;\n background-color: #e9eef3;\n`;\n\nexport const StyledMobileCaseViewHeader = styled.header`\n color: ${props => props.theme.base.palette.light};\n background-color: ${props => props.theme.base.palette.interactive};\n\n ${StyledText} {\n padding: ${props => props.theme.base.spacing};\n }\n`;\n\nStyledMobileCaseView.defaultProps = defaultThemeProp;\nStyledMobileCaseViewHeader.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst MobileCaseView: FC<ForwardProps & MobileCaseViewProps> = (props: MobileCaseViewProps) => {\n const { tabs, tabContent, title, ...restProps } = props;\n\n return (\n <Flex container={{ direction: 'column' }} as={StyledMobileCaseView} {...restProps}>\n <Flex\n container={{ direction: 'column' }}\n item={{ shrink: 0 }}\n as={StyledMobileCaseViewHeader}\n >\n <Text as='h1'>{title}</Text>\n <Tabs {...tabs} type='horizontal' inverted />\n </Flex>\n {tabContent}\n </Flex>\n );\n};\n\nexport default MobileCaseView;\n"]}
1	+ {"version":3,"file":"MobileCaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,IAAI,EAEJ,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAA;WAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;sBAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;IAE/D,UAAU;eACC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE/C,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrD,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,kBAAkB;AAClB,MAAM,cAAc,GAA2C,CAAC,KAA0B,EAAE,EAAE;IAC5F,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,KAAM,SAAS,aAC/E,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,YAAE,KAAK,GAAQ,EAC5B,KAAC,IAAI,OAAK,IAAI,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,SAAG,IACxC,EACN,UAAU,IACN,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Flex,\n Tabs,\n TabsProps,\n Text,\n defaultThemeProp,\n ForwardProps\n} from '@pega/cosmos-react-core';\nimport { StyledText } from '@pega/cosmos-react-core/lib/components/Text/Text';\n\nexport interface MobileCaseViewProps {\n title: string;\n tabs: TabsProps;\n tabContent: ReactNode;\n}\n\nexport const StyledMobileCaseView = styled.div`\n min-height: 100vh;\n background-color: #e9eef3;\n`;\n\nexport const StyledMobileCaseViewHeader = styled.header`\n color: ${props => props.theme.base.palette.light};\n background-color: ${props => props.theme.base.palette.interactive};\n\n ${StyledText} {\n padding: ${props => props.theme.base.spacing};\n }\n`;\n\nStyledMobileCaseView.defaultProps = defaultThemeProp;\nStyledMobileCaseViewHeader.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst MobileCaseView: FC<ForwardProps & MobileCaseViewProps> = (props: MobileCaseViewProps) => {\n const { tabs, tabContent, title, ...restProps } = props;\n\n return (\n <Flex container={{ direction: 'column' }} as={StyledMobileCaseView} {...restProps}>\n <Flex\n container={{ direction: 'column' }}\n item={{ shrink: 0 }}\n as={StyledMobileCaseViewHeader}\n >\n <Text as='h1'>{title}</Text>\n <Tabs {...tabs} type='horizontal' inverted />\n </Flex>\n {tabContent}\n </Flex>\n );\n};\n\nexport default MobileCaseView;\n"]}

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

@@ -14,8 +14,8 @@ const UtilitiesSummary = ({ items = [], ...restProps }) => {
                     direction: 'column',
                     alignItems: 'center',
                     gap: 0.5
-                }, item: { grow: 1 }, children: [_jsx(Icon, { name: item.iconName }, void 0), item.count !== undefined && _jsx(Count, { variant: 'default', children: item.count }, void 0)] }, item.iconName));
-        }) }, void 0)) : null;
+                }, item: { grow: 1 }, children: [_jsx(Icon, { name: item.iconName }), item.count !== undefined && _jsx(Count, { variant: 'default', children: item.count })] }, item.iconName));
+        }) })) : null;
 };
 export default UtilitiesSummary;
 //# sourceMappingURL=UtilitiesSummary.js.map

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

	@@ -1 +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,OACC,SAAS,EACb,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,wBAAwB,CAAC,EAAE,EACvE,EAAE,EAAE,sBAAsB,YAEzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,~~WAAI~~,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,CAAC,KAAK,~~WAAS~~,KAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,~~WACG~~,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_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"]}
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,OACC,SAAS,EACb,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,wBAAwB,CAAC,EAAE,EACvE,EAAE,EAAE,sBAAsB,YAEzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,CAAC,KAAK,GAAS,KAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,GACG,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_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/ConfigurableLayout/ConfigurableLayout.js CHANGED Viewed

@@ -87,7 +87,7 @@ const ConfigurableLayout = forwardRef(({ items, arrangement }, ref) => {
         }
         return null;
     }, [items, renderMode]);
-    return (_jsx(StyledConfigurableLayout, { children: _jsxs(Flex, { as: StyledCellGrid, container: { wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }, item: { basis: containerMinWidth, grow: 1 }, ref: ref, children: [_jsx(StyledContainerRuler, { ref: containerRulerRef }, void 0), content] }, void 0) }, void 0));
+    return (_jsx(StyledConfigurableLayout, { children: _jsxs(Flex, { as: StyledCellGrid, container: { wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }, item: { basis: containerMinWidth, grow: 1 }, ref: ref, children: [_jsx(StyledContainerRuler, { ref: containerRulerRef }), content] }) }));
 });
 export default ConfigurableLayout;
 //# sourceMappingURL=ConfigurableLayout.js.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"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~~WAAI~~,EAC/C,OAAO,~~YACH~~,~~WACkB~~,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useState, useEffect, useRef, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n return css`\n overflow: hidden;\n `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n return css`\n /* Note: inset position used to negate \"column\" inline margin on items /\n position: relative;\n width: calc(100% + ${cellGap 2} * ${theme.base.spacing});\n max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n return css`\n margin-inline: calc(${cellGap} * ${theme.base.spacing});\n width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(\n ({ items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>, ref: Ref<HTMLElement>) => {\n const [renderMode, setRenderMode] = useState<'direct' \| 'double' \| 'full'>('direct');\n const containerRulerRef = useRef<HTMLDivElement>(null);\n\n // Update render mode when arrangement wraps\n useEffect(() => {\n const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n if (activeArrangement) {\n switch (arrangement.size) {\n case 'main':\n setRenderMode('direct');\n break;\n case 'half':\n setRenderMode('double');\n break;\n case 'narrow':\n setRenderMode('full');\n break;\n default:\n setRenderMode('direct');\n break;\n }\n\n return;\n }\n\n // Use direct by default\n setRenderMode('direct');\n }, [arrangement?.hasWrapped]);\n\n const content = useMemo(() => {\n if (items && !!items.length) {\n return items.map(itemConfig => {\n const config = {\n ...itemConfig,\n layoutConfig: { ...itemConfig.layoutConfig }\n };\n\n if (renderMode !== 'direct') {\n switch (renderMode) {\n case 'double': {\n const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n '1/4': '1/2',\n '1/3': '2/3',\n '1/2': 'full',\n '2/3': 'full',\n '3/4': 'full',\n full: 'full'\n };\n\n config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n break;\n }\n case 'full':\n config.layoutConfig.width = 'full';\n break;\n default:\n config.layoutConfig.width = 'full';\n break;\n }\n }\n\n return <LayoutCell key={`${itemConfig.id}--${renderMode}`} config={config} />;\n });\n }\n\n return null;\n }, [items, renderMode]);\n\n return (\n <StyledConfigurableLayout>\n <Flex\n as={StyledCellGrid}\n container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n item={{ basis: containerMinWidth, grow: 1 }}\n ref={ref}\n >\n <StyledContainerRuler ref={containerRulerRef} />\n {content}\n </Flex>\n </StyledConfigurableLayout>\n );\n }\n);\n\nexport default ConfigurableLayout;\n"]}
1	+ {"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAwB,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAExD,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC/C,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;;;yBAGa,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;6BAC/B,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;0BACtC,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;kCACvB,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9D,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;0BACc,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;yBAChC,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;GACzD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,kBAAkB,GAAG,UAAU,CACnC,CAAC,EAAE,KAAK,EAAE,WAAW,EAA4C,EAAE,GAAqB,EAAE,EAAE;IAC1F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAA+B,QAAQ,CAAC,CAAC;IACrF,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEvD,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,WAAW,EAAE,UAAU,KAAK,SAAS,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;QAE3F,IAAI,iBAAiB,EAAE;YACrB,QAAQ,WAAW,CAAC,IAAI,EAAE;gBACxB,KAAK,MAAM;oBACT,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACxB,MAAM;gBACR,KAAK,MAAM;oBACT,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACxB,MAAM;gBACR,KAAK,QAAQ;oBACX,aAAa,CAAC,MAAM,CAAC,CAAC;oBACtB,MAAM;gBACR;oBACE,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACxB,MAAM;aACT;YAED,OAAO;SACR;QAED,wBAAwB;QACxB,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE9B,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE;YAC3B,OAAO,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;gBAC5B,MAAM,MAAM,GAAG;oBACb,GAAG,UAAU;oBACb,YAAY,EAAE,EAAE,GAAG,UAAU,CAAC,YAAY,EAAE;iBAC7C,CAAC;gBAEF,IAAI,UAAU,KAAK,QAAQ,EAAE;oBAC3B,QAAQ,UAAU,EAAE;wBAClB,KAAK,QAAQ,CAAC,CAAC;4BACb,MAAM,WAAW,GAAuD;gCACtE,KAAK,EAAE,KAAK;gCACZ,KAAK,EAAE,KAAK;gCACZ,KAAK,EAAE,MAAM;gCACb,KAAK,EAAE,MAAM;gCACb,KAAK,EAAE,MAAM;gCACb,IAAI,EAAE,MAAM;6BACb,CAAC;4BAEF,MAAM,CAAC,YAAY,CAAC,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;4BAEnE,MAAM;yBACP;wBACD,KAAK,MAAM;4BACT,MAAM,CAAC,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC;4BACnC,MAAM;wBACR;4BACE,MAAM,CAAC,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC;4BACnC,MAAM;qBACT;iBACF;gBAED,OAAO,KAAC,UAAU,IAAyC,MAAM,EAAE,MAAM,IAAjD,GAAG,UAAU,CAAC,EAAE,KAAK,UAAU,EAAE,CAAoB,CAAC;YAChF,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,KAAC,wBAAwB,cACvB,MAAC,IAAI,IACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,EACtE,IAAI,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,EAAE,EAC3C,GAAG,EAAE,GAAG,aAER,KAAC,oBAAoB,IAAC,GAAG,EAAE,iBAAiB,GAAI,EAC/C,OAAO,IACH,GACkB,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useState, useEffect, useRef, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n return css`\n overflow: hidden;\n `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n return css`\n /* Note: inset position used to negate \"column\" inline margin on items /\n position: relative;\n width: calc(100% + ${cellGap 2} * ${theme.base.spacing});\n max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n return css`\n margin-inline: calc(${cellGap} * ${theme.base.spacing});\n width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(\n ({ items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>, ref: Ref<HTMLElement>) => {\n const [renderMode, setRenderMode] = useState<'direct' \| 'double' \| 'full'>('direct');\n const containerRulerRef = useRef<HTMLDivElement>(null);\n\n // Update render mode when arrangement wraps\n useEffect(() => {\n const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n if (activeArrangement) {\n switch (arrangement.size) {\n case 'main':\n setRenderMode('direct');\n break;\n case 'half':\n setRenderMode('double');\n break;\n case 'narrow':\n setRenderMode('full');\n break;\n default:\n setRenderMode('direct');\n break;\n }\n\n return;\n }\n\n // Use direct by default\n setRenderMode('direct');\n }, [arrangement?.hasWrapped]);\n\n const content = useMemo(() => {\n if (items && !!items.length) {\n return items.map(itemConfig => {\n const config = {\n ...itemConfig,\n layoutConfig: { ...itemConfig.layoutConfig }\n };\n\n if (renderMode !== 'direct') {\n switch (renderMode) {\n case 'double': {\n const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n '1/4': '1/2',\n '1/3': '2/3',\n '1/2': 'full',\n '2/3': 'full',\n '3/4': 'full',\n full: 'full'\n };\n\n config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n break;\n }\n case 'full':\n config.layoutConfig.width = 'full';\n break;\n default:\n config.layoutConfig.width = 'full';\n break;\n }\n }\n\n return <LayoutCell key={`${itemConfig.id}--${renderMode}`} config={config} />;\n });\n }\n\n return null;\n }, [items, renderMode]);\n\n return (\n <StyledConfigurableLayout>\n <Flex\n as={StyledCellGrid}\n container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n item={{ basis: containerMinWidth, grow: 1 }}\n ref={ref}\n >\n <StyledContainerRuler ref={containerRulerRef} />\n {content}\n </Flex>\n </StyledConfigurableLayout>\n );\n }\n);\n\nexport default ConfigurableLayout;\n"]}

package/lib/components/ConfigurableLayout/LayoutCell.js CHANGED Viewed

@@ -58,7 +58,7 @@ const LayoutCell = ({ config }) => {
     }, [layoutConfig.minWidth]);
     return config?.content ? (_jsx(Flex, { as: StyledCell, item: {
             grow: 1
-        }, container: { justify: 'stretch', alignItems: 'start' }, fillAvailable: layoutConfig.fillAvailable, percentageWidth: percentageWidth, minWidth: minWidth, children: config.content }, void 0)) : null;
+        }, container: { justify: 'stretch', alignItems: 'start' }, fillAvailable: layoutConfig.fillAvailable, percentageWidth: percentageWidth, minWidth: minWidth, children: config.content })) : null;
 };
 export default LayoutCell;
 //# sourceMappingURL=LayoutCell.js.map

package/lib/components/ConfigurableLayout/LayoutCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EACC,aAAa,GAAG,IAAI,EACpB,eAAe,EACf,QAAQ,EACR,KAAK,EAMN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;0BAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;gCAEzB,eAAe;;;;;;wCAMP,QAAQ,IAAI,YAAY;;;;;QAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;OAEF;;QAEC,qBAAqB;;;;;;;;;KASxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,GAAG,KAAK,IAAI,CAAC;SACrB;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC;YACA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,~~WACV~~,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div(\n ({\n fillAvailable = true,\n percentageWidth,\n minWidth,\n theme\n }: {\n fillAvailable: boolean;\n percentageWidth?: string;\n minWidth?: string \| undefined;\n theme: DefaultTheme;\n }) => {\n return css`\n /* variables /\n --marginGap: calc(${cellGap} ${theme.base.spacing});\n --totalMargin: calc(2 * var(--marginGap));\n --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n --maxWidth: calc(100% - var(--totalMargin));\n\n /* styles /\n flex-wrap: wrap;\n flex-basis: var(--percentageBasis);\n min-width: min(var(--maxWidth), ${minWidth \|\| itemMinWidth});\n max-width: var(--maxWidth);\n margin-block-end: var(--totalMargin);\n margin-inline: var(--marginGap);\n\n ${!fillAvailable &&\n css`\n flex-grow: 0;\n `}\n\n ${StyledAppAnnouncement} {\n align-self: stretch;\n }\n\n > {\n width: 100%;\n height: auto;\n overflow-x: auto;\n }\n `;\n }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n const percentageWidth = useMemo(() => {\n return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] \|\| '100%';\n }, [layoutConfig.width]);\n const minWidth = useMemo(() => {\n const value = layoutConfig.minWidth;\n\n if (typeof value === 'number') {\n return `${value}px`;\n }\n\n if (\n Array.isArray(value) &&\n value.length >= 2 &&\n typeof value[0] === 'number' &&\n validWidthUnits.includes(value[1])\n ) {\n return `${value[0]}${value[1]}`;\n }\n }, [layoutConfig.minWidth]);\n\n return config?.content ? (\n <Flex\n as={StyledCell}\n item={{\n grow: 1\n }}\n container={{ justify: 'stretch', alignItems: 'start' }}\n fillAvailable={layoutConfig.fillAvailable}\n percentageWidth={percentageWidth}\n minWidth={minWidth}\n >\n {config.content}\n </Flex>\n ) : null;\n};\n\nexport default LayoutCell;\n"]}
1	+ {"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EACC,aAAa,GAAG,IAAI,EACpB,eAAe,EACf,QAAQ,EACR,KAAK,EAMN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;0BAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;gCAEzB,eAAe;;;;;;wCAMP,QAAQ,IAAI,YAAY;;;;;QAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;OAEF;;QAEC,qBAAqB;;;;;;;;;KASxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,GAAG,KAAK,IAAI,CAAC;SACrB;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC;YACA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,GACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div(\n ({\n fillAvailable = true,\n percentageWidth,\n minWidth,\n theme\n }: {\n fillAvailable: boolean;\n percentageWidth?: string;\n minWidth?: string \| undefined;\n theme: DefaultTheme;\n }) => {\n return css`\n /* variables /\n --marginGap: calc(${cellGap} ${theme.base.spacing});\n --totalMargin: calc(2 * var(--marginGap));\n --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n --maxWidth: calc(100% - var(--totalMargin));\n\n /* styles /\n flex-wrap: wrap;\n flex-basis: var(--percentageBasis);\n min-width: min(var(--maxWidth), ${minWidth \|\| itemMinWidth});\n max-width: var(--maxWidth);\n margin-block-end: var(--totalMargin);\n margin-inline: var(--marginGap);\n\n ${!fillAvailable &&\n css`\n flex-grow: 0;\n `}\n\n ${StyledAppAnnouncement} {\n align-self: stretch;\n }\n\n > {\n width: 100%;\n height: auto;\n overflow-x: auto;\n }\n `;\n }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n const percentageWidth = useMemo(() => {\n return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] \|\| '100%';\n }, [layoutConfig.width]);\n const minWidth = useMemo(() => {\n const value = layoutConfig.minWidth;\n\n if (typeof value === 'number') {\n return `${value}px`;\n }\n\n if (\n Array.isArray(value) &&\n value.length >= 2 &&\n typeof value[0] === 'number' &&\n validWidthUnits.includes(value[1])\n ) {\n return `${value[0]}${value[1]}`;\n }\n }, [layoutConfig.minWidth]);\n\n return config?.content ? (\n <Flex\n as={StyledCell}\n item={{\n grow: 1\n }}\n container={{ justify: 'stretch', alignItems: 'start' }}\n fillAvailable={layoutConfig.fillAvailable}\n percentageWidth={percentageWidth}\n minWidth={minWidth}\n >\n {config.content}\n </Flex>\n ) : null;\n};\n\nexport default LayoutCell;\n"]}

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Ref } from 'react';
-declare const useTrackWrappedRegions: (regionElArray: (HTMLElement | null)[], disabled?: boolean | undefined) => {
+declare const useTrackWrappedRegions: (regionElArray: (HTMLElement | null)[], disabled?: boolean) => {
     containerRef: Ref<HTMLElement | null>;
     regionWrappedStates: boolean[];
 };

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzD,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE;~~kBAEpB~~,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
1	+ {"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzD,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,aAC1B,OAAO;kBACD,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

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

@@ -2,9 +2,9 @@ import { FunctionComponent, ReactNode, Ref } from 'react';
 import { ForwardProps, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';
 export interface ConfirmationProps extends NoChildrenProp {
     /** The title of the confirmation */
-    title: string;
+    title?: string;
     /** Region for a Field Value List component */
-    details: ReactNode;
+    details?: ReactNode;
     /** Array of React nodes to be put into a list  */
     whatsNext?: UnorderedListProps['items'];
     /** Region for a Tasks component */

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

	@@ -1 +1 @@
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,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,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"}
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,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,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,CAqCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -8,7 +8,7 @@ const StyledWhatsNextList = styled(UnorderedList) `
 StyledWhatsNextList.defaultProps = defaultThemeProp;
 const Confirmation = forwardRef(({ title, details, whatsNext, tasks, onClose, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', children: title }, void 0), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_details') }, void 0), details] }, void 0), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_whats_next') }, void 0), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList }, void 0)] }, void 0)), tasks && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_open_tasks') }, void 0), tasks] }, void 0)), onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { onClick: onClose, variant: 'primary', children: t('done') }, void 0) }, void 0))] }, void 0) }, void 0) }, void 0));
+    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [title && _jsx(Text, { variant: 'h2', children: title }), details && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_details') }), details] })), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks, onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { onClick: onClose, variant: 'primary', children: t('done') }) }))] }) }) }));
 });
 export default Confirmation;
 //# sourceMappingURL=Confirmation.js.map

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

	@@ -1 +1 @@
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,EAGjB,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,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,~~aAC9C~~,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,~~WAAQ~~,~~EACjC~~,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,~~WAAQ~~,EACpD,OAAO,~~YACH~~,~~EACN~~,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,~~WAAQ~~,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,~~WAAI~~,~~YAC7D~~,CACR,EACA,KAAK,~~IAAI~~,~~CACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,~~OAAO,~~EAAC,~~IAAI,~~YAAE,CAAC,CAAC,yBAAyB,CAAC,WAAQ,EACvD,KAAK,YACD,CACR,EACA,OAAO,IAAI,~~CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,~~WACH~~,~~WACJ~~,CACR,~~YACI~~,~~WACK~~,~~WACT~~,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 NoChildrenProp\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 extends NoChildrenProp {\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"]}
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,EAGjB,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,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC7C,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAC1C,OAAO,IAAI,CACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACpD,OAAO,IACH,CACR,EACA,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EACA,KAAK,EACL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,GACH,GACJ,CACR,IACI,GACK,GACT,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 NoChildrenProp\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 extends NoChildrenProp {\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 {title && <Text variant='h2'>{title}</Text>}\n {details && (\n <Flex container={{ gap: 1, direction: 'column' }}>\n <Text variant='h3'>{t('confirmation_details')}</Text>\n {details}\n </Flex>\n )}\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 {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/Details/Details.d.ts CHANGED Viewed

@@ -1,13 +1,14 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { FieldValueListProps, ForwardProps, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
-export interface DetailsProps extends BaseProps, NoChildrenProp {
-    /** The set of field values to render in the Highlighted Data list. */
-    highlightedFields?: FieldValueListProps['fields'];
-    /** List of React components below the highlighted data and line seperation. */
-    regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];
+import { FC, ReactNode, Ref } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+interface DetailsProps {
+    highlightedData?: ReactNode[];
+    children?: ReactNode;
+    columnCount?: 1 | 2 | 3;
+    name?: string;
+    nested?: boolean;
+    asFlex?: boolean;
+    ref?: Ref<HTMLDListElement>;
 }
-export declare const StyledDetails: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledHighlightedFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Details: FunctionComponent<DetailsProps & ForwardProps>;
+declare const Details: FC<DetailsProps & ForwardProps>;
 export default Details;
 //# sourceMappingURL=Details.d.ts.map

package/lib/components/Details/Details.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~iBAAiB~~,~~EAAE,~~SAAS,~~EAAE~~,MAAM,OAAO,CAAC;~~AAGrD~~,OAAO,EAKL,~~mBAAmB,EACnB,~~YAAY,~~EACZ~~,~~SAAS,EAGT,cAAc,EACf,~~MAAM,yBAAyB,CAAC;~~AAEjC~~,~~MAAM~~,~~WAAW~~,~~YAAa~~,~~SAAQ~~,SAAS,EAAE,~~cAAc~~;~~IAC7D~~,~~sEAAsE;IACtE~~,~~iBAAiB,~~CAAC,EAAE,~~mBAAmB~~,CAAC,~~QAAQ~~,CAAC,CAAC~~;IAClD,+EAA+E;IAC/E~~,~~OAAO~~,CAAC,~~EAAE~~,CAAC,~~SAAS,~~CAAC,~~GAAG~~,CAAC,~~SAAS,~~EAAE,~~SAAS~~,CAAC,~~GAAG~~,CAAC,~~SAAS,~~EAAE,~~SAAS~~,~~EAAE~~,~~SAAS~~,CAAC,CAAC;~~CACpF;AAED~~,~~eAAO~~,~~MAAM~~,~~aAAa~~,~~yGAAe~~,CAAC~~;AAE1C~~,~~eAAO~~,~~MAAM~~,~~uBAAuB,yGAmBlC,~~CAAC;~~AAIH~~,QAAA,MAAM,OAAO,EAAE,~~iBAAiB~~,CAAC,YAAY,GAAG,YAAY,~~CA4B3D~~,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAEF,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAYjC,UAAU,YAAY;IACpB,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,YAAY,CAgH5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -1,38 +1,59 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from 'styled-components';
-import { Grid, defaultThemeProp, FieldValueList, StyledFieldValueList, calculateFontSize } from '@pega/cosmos-react-core';
-export const StyledDetails = styled.div ``;
-export const StyledHighlightedFields = styled.div(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    return css `
-    ${StyledFieldValueList} {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
-      padding-block-end: calc(1.5 * ${theme.base.spacing});
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-      column-gap: calc(5 * ${theme.base.spacing});
-      dd {
-        font-size: ${fontSize[theme.components.text.h1['font-size']]};
-        font-weight: ${theme.components.text.h1['font-weight']};
-      }
-    }
-    & + div {
-      padding-block-start: calc(1.5 * ${theme.base.spacing});
-    }
-  `;
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';
+import { remToPx } from 'polished';
+import { Text, useBreakpoint, useConsolidatedRef, useTheme } from '@pega/cosmos-react-core';
+import DetailsContext from './DetailsContext';
+import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp, chToRem } from './Details.styles';
+const Details = forwardRef(({ highlightedData, children, columnCount = 1, name = undefined, nested = false, asFlex = false }, ref) => {
+    const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);
+    const { base: { 'content-width': { sm } } } = useTheme();
+    const isSmallOrAbove = useBreakpoint('sm');
+    const listRef = useConsolidatedRef(ref);
+    const flexRow = useBreakpoint(columnCount > 2 ? 'md' : 'sm', {
+        breakpointRef: listRef,
+        themeProp: 'content-width'
+    });
+    const [flexContextMobileView, setFlexContextMobileView] = useState(false);
+    const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));
+    const headingDepth = depth ?? 1;
+    const applyMobileView = asFlex
+        ? mobileView || (flexRow && flexContextMobileView) || !isSmallOrAbove
+        : mobileView || !isSmallOrAbove;
+    const contextValue = useMemo(() => {
+        return {
+            mobileView: applyMobileView,
+            depth: name ? headingDepth + 1 : headingDepth,
+            longestLabelLength,
+            ...context
+        };
+    }, [applyMobileView, name, headingDepth, longestLabelLength, context]);
+    /**
+     * Mount resize observer to update flex context mobile view & run initial check.
+     */
+    useEffect(() => {
+        const checkBreakpoint = (elementWidth) => {
+            const minWidthRem = chToRem(parseInt(sm, 10));
+            const minWidthPx = parseInt(remToPx(minWidthRem), 10);
+            const oneRemInPx = parseInt(remToPx(1), 10);
+            const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);
+            const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;
+            setFlexContextMobileView(elementWidth < mobileViewBreakpoint);
+        };
+        const resizeObserver = new ResizeObserver(entries => {
+            const containerPxWidth = entries[0].contentRect.width;
+            checkBreakpoint(containerPxWidth);
+        });
+        if (listRef.current) {
+            checkBreakpoint(listRef.current.offsetWidth);
+            resizeObserver.observe(listRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [listRef, columnCount]);
+    return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { children: [name && (_jsx(StyledFieldValueGroupLabel, { children: _jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name }) })), highlightedData && (_jsxs(_Fragment, { children: [_jsx(StyledHighlightedDetailList, { as: nested ? 'div' : 'dl', children: highlightedData.map((child, i) => (
+                            // eslint-disable-next-line react/no-array-index-key
+                            _jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), _jsx(StyledDetailList, { ref: listRef, as: nested ? 'div' : 'dl', columnCount: columnCount, labelLength: labelLength, stacked: applyMobileView, hasName: !!name, nested: nested, flex: asFlex, wrapped: asFlex ? !flexRow : false, children: children })] }) }));
 });
-StyledHighlightedFields.defaultProps = defaultThemeProp;
-const Details = ({ highlightedFields, regions }) => {
-    return (_jsxs(StyledDetails, { children: [highlightedFields && (_jsx(StyledHighlightedFields, { children: _jsx(FieldValueList, { variant: 'stacked', fields: highlightedFields }, void 0) }, void 0)), regions && regions.length > 0 && (_jsx(Grid, { container: {
-                    cols: 'repeat(auto-fit, minmax(30ch, 1fr))',
-                    alignItems: 'start',
-                    alignContent: 'start',
-                    gap: 2
-                }, children: regions?.map((colItem, i) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return _jsx("div", { children: colItem }, i);
-                }) }, void 0))] }, void 0));
-};
 export default Details;
 //# sourceMappingURL=Details.js.map