npm - @pega/cosmos-react-wss - Versions diffs - 10.0.0-build.11.0 → 10.0.0-build.12.1 - Mend

@pega/cosmos-react-wss 10.0.0-build.11.0 → 10.0.0-build.12.1

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 (11) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModernCaseView.d.ts","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,OAAO,CAAC;AAmBzD,OAAO,KAAK,EAAE,YAAY,EAAO,MAAM,yBAAyB,CAAC;AAGjE,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,4BAA4B,CAAC;AAqBxE,QAAA,MAAM,cAAc,GAAI,+LAmBrB,eAAe,CAAC,aAAa,CAAC,GAAG,YAAY,~~4CAmZ~~/C,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"ModernCaseView.d.ts","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,OAAO,CAAC;AAmBzD,OAAO,KAAK,EAAE,YAAY,EAAO,MAAM,yBAAyB,CAAC;AAGjE,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,4BAA4B,CAAC;AAqBxE,QAAA,MAAM,cAAc,GAAI,+LAmBrB,eAAe,CAAC,aAAa,CAAC,GAAG,YAAY,4CAqZ/C,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -33,9 +33,9 @@ const ModernCaseView = ({ caseId, heading, subheading, icon, color, actions, sta
     const hasSummaryFields = hasPrimarySummaryFields || hasSecondarySummaryFields;
     const hasSummaryContent = Boolean(summary?.content);
     const detailRegions = useMemo(() => {
-        if (detailTabs?.length)
-            return detailTabs;
-        return details ? [details] : [];
+        const fallbackRegions = details ? [details] : [];
+        const regions = detailTabs?.length ? detailTabs : fallbackRegions;
+        return regions.filter(region => region.id !== 'PegaPlatform__pyCasePulse' && region.id !== 'pyCasePulse');
     }, [detailTabs, details]);
     const { iconForeground, iconBackground } = useMemo(() => {
         const backgroundSetting = theme.components['case-view'].icon.background;
@@ -195,7 +195,7 @@ const ModernCaseView = ({ caseId, heading, subheading, icon, color, actions, sta
     const showActions = !isCreateStage && (promotedActions.length > 0 || !!actions?.length);
     const shouldWrapPromotedActions = !isSmallOrAbove || wrapPromotedActions;
     const showDesktopSummary = !isCreateStage && isSmallOrAbove;
-    return (_jsxs(StyledModernCaseView, { "$isCreateStage": isCreateStage, ...(isCreateStage && { 'data-create-stage': '' }), ...restProps, children: [_jsx(StyledModernCaseHeader, { "$color": color, "$isSmallOrAbove": isSmallOrAbove, children: _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2, alignItems: 'start' }, ref: contentEl, as: StyledModernContentContainer, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'start', gap: 2 }, item: { grow: 1 }, children: [_jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [icon && (_jsx(StyledModernCaseViewIcon, { name: icon, emphasized: true, size: 'l', foreground: iconForeground, background: iconBackground, "$color": color })), _jsxs(Flex, { as: StyledModernCaseHeaderText, container: { direction: 'column', alignItems: 'start', justify: 'center' }, item: { shrink: 1 }, ref: headerEl, children: [_jsx(Text, { variant: 'h1', children: heading }), subheading && (_jsx(StyledModernCaseSubheading, { "$color": color, children: Array.isArray(subheading) ? _jsx(MetaList, { items: subheading }) : subheading }))] })] }), showActions && (_jsxs(Flex, { container: { gap: 1 }, ref: actionsContainerEl, children: [!shouldWrapPromotedActions && promotedActionButtons, actions && actions.length > 0 && (_jsx(StyledCaseHeaderMenuButton, { icon: actionsIconOnly ? 'more' : undefined, iconOnly: actionsIconOnly, variant: 'simple', text: t('actions'), "aria-label": t('actions_for', [caseId]), menu: {
+    return (_jsxs(StyledModernCaseView, { "$isCreateStage": isCreateStage, ...(isCreateStage && { 'data-create-stage': '' }), ...restProps, children: [_jsx(StyledModernCaseHeader, { "$color": color, "$isSmallOrAbove": isSmallOrAbove, children: _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2, alignItems: 'start' }, ref: contentEl, as: StyledModernContentContainer, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'start', gap: 2 }, item: { grow: 1 }, children: [_jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [icon && (_jsx(StyledModernCaseViewIcon, { name: icon, emphasized: true, foreground: iconForeground, background: iconBackground, "$color": color })), _jsxs(Flex, { as: StyledModernCaseHeaderText, container: { direction: 'column', alignItems: 'start', justify: 'center' }, item: { shrink: 1 }, ref: headerEl, children: [_jsx(Text, { variant: 'h1', children: heading }), subheading && (_jsx(StyledModernCaseSubheading, { "$color": color, children: Array.isArray(subheading) ? _jsx(MetaList, { items: subheading }) : subheading }))] })] }), showActions && (_jsxs(Flex, { container: { gap: 1 }, ref: actionsContainerEl, children: [!shouldWrapPromotedActions && promotedActionButtons, actions && actions.length > 0 && (_jsx(StyledCaseHeaderMenuButton, { icon: actionsIconOnly ? 'more' : undefined, iconOnly: actionsIconOnly, variant: 'simple', text: t('actions'), "aria-label": t('actions_for', [caseId]), menu: {
                                                 items: actions.map(action => ({
                                                     ...action,
                                                     primary: action.text,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModernCaseView.js","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { parseToHsl } from 'polished';\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n CardContent,\n Flex,\n Icon,\n MetaList,\n TabPanel,\n Tabs,\n Text,\n getEdge,\n readableColor,\n throttle,\n tryCatch,\n useBreakpoint,\n useDirection,\n useI18n,\n useTheme\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\nimport { resolveCaseTypeColor } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\n\nimport type { CaseViewProps, Region } from '../CaseView/CaseView.types';\nimport { StyledCaseHeaderMenuButton } from '../CaseView/CaseView.styles';\n\nimport {\n StyledModernCaseHeader,\n StyledModernCaseHeaderPromotedAction,\n StyledModernCaseHeaderText,\n StyledModernCaseSubheading,\n StyledModernCaseView,\n StyledModernCaseViewIcon,\n StyledModernContent,\n StyledModernContentContainer,\n StyledModernStagesContainer,\n StyledModernSummary,\n StyledModernSummaryCard,\n StyledModernSummaryFieldsDivider,\n StyledModernSummaryPrimaryList,\n StyledModernSummarySecondaryList,\n resolveModernCaseViewIconColor\n} from './ModernCaseView.styles';\n\nconst ModernCaseView = ({\n caseId,\n heading,\n subheading,\n icon,\n color,\n actions,\n stages,\n tasks,\n summary,\n details,\n tabs: detailTabs,\n feed,\n utility,\n promotedActions = [],\n showPulse = true,\n showUtility = true,\n isCreateStage = false,\n ...restProps\n}: PropsWithoutRef<CaseViewProps> & ForwardProps) => {\n const t = useI18n();\n const theme = useTheme();\n const { ltr } = useDirection();\n\n const isSmallOrAbove = useBreakpoint('sm');\n const isMediumOrAbove = useBreakpoint('md');\n\n const actionsIconOnly = promotedActions.length > 0 \|\| !isMediumOrAbove;\n\n const tabsRef = useRef<HTMLElement \| null>(null);\n const singleRegionRef = useRef<HTMLDivElement>(null);\n const restoreTabFocus = useRef(false);\n const contentEl = useRef<HTMLDivElement>(null);\n const headerEl = useRef<HTMLDivElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const wrapActionsBreakpoint = useRef<number \| null>(null);\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n\n const setTabsRef = useCallback((element: HTMLElement \| null) => {\n if (!element && tabsRef.current?.contains(document.activeElement)) {\n restoreTabFocus.current = true;\n }\n tabsRef.current = element;\n }, []);\n\n const primarySummaryFields = summary?.primarySummaryFields ?? [];\n const secondarySummaryFields = summary?.secondarySummaryFields ?? [];\n const hasPrimarySummaryFields = primarySummaryFields.length > 0;\n const hasSecondarySummaryFields = secondarySummaryFields.length > 0;\n const hasSummaryFields = hasPrimarySummaryFields \|\| hasSecondarySummaryFields;\n const hasSummaryContent = Boolean(summary?.content);\n\n const detailRegions = useMemo(() => {\n if (detailTabs?.length) return detailTabs;\n return details ? [details] : [];\n }, [detailTabs, details]);\n\n const { iconForeground, iconBackground } = useMemo(() => {\n const backgroundSetting = theme.components['case-view'].icon.background;\n const foregroundSetting = theme.components['case-view'].icon.color;\n const usesIconGradient = backgroundSetting.includes('var(--gradient-');\n\n const resolvedIconBackground =\n backgroundSetting !== 'auto'\n ? backgroundSetting\n : tryCatch(\n () => {\n const { lightness } = parseToHsl(theme.components['case-view'].header.background);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n },\n () => 'transparent'\n );\n\n let resolvedIconForeground =\n foregroundSetting !== 'auto'\n ? foregroundSetting\n : theme.components['case-view'].header['foreground-color'];\n\n if (foregroundSetting === 'auto' && usesIconGradient) {\n resolvedIconForeground = 'auto';\n }\n\n if (resolvedIconForeground === 'auto') {\n const caseTypeIconColor =\n theme.base['case-type-colors'] !== 'ignored'\n ? resolveCaseTypeColor(theme, color)\n : undefined;\n resolvedIconForeground = readableColor(\n usesIconGradient\n ? resolveModernCaseViewIconColor(theme, color)\n : caseTypeIconColor ?? resolvedIconBackground,\n { mode: 'light', level: 'AANonText' }\n );\n }\n\n return { iconForeground: resolvedIconForeground, iconBackground: resolvedIconBackground };\n }, [theme, color]);\n\n const promotedActionButtons = useMemo(\n () =>\n promotedActions.map(action => (\n <StyledModernCaseHeaderPromotedAction\n variant='secondary'\n href={action.href}\n disabled={action.disabled}\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n key={action.id}\n $color={color}\n >\n {action.text}\n </StyledModernCaseHeaderPromotedAction>\n )),\n [promotedActions, color]\n );\n\n const summaryFieldsCard = useMemo(\n () =>\n hasSummaryFields ? (\n <StyledModernSummaryCard>\n {hasPrimarySummaryFields && (\n <CardContent>\n <StyledModernSummaryPrimaryList\n variant='stacked'\n fields={primarySummaryFields}\n aria-label={t('primary_summary_fields')}\n $isSmallOrAbove={isSmallOrAbove}\n />\n </CardContent>\n )}\n {hasPrimarySummaryFields && hasSecondarySummaryFields && (\n <StyledModernSummaryFieldsDivider />\n )}\n {hasSecondarySummaryFields && (\n <CardContent>\n <StyledModernSummarySecondaryList\n variant='stacked'\n fields={secondarySummaryFields}\n aria-label={t('summary_fields')}\n $isSmallOrAbove={isSmallOrAbove}\n />\n </CardContent>\n )}\n </StyledModernSummaryCard>\n ) : null,\n [\n hasSummaryFields,\n hasPrimarySummaryFields,\n hasSecondarySummaryFields,\n primarySummaryFields,\n secondarySummaryFields,\n isSmallOrAbove,\n t\n ]\n );\n\n // Desktop: details + pulse + utilities. Mobile: summary is prepended as the first tab.\n const bodyTabs = useMemo(() => {\n const tabs: { id: string; name: Tab['name']; content: Region }[] = [];\n\n if (!isSmallOrAbove) {\n const summaryLabel = summary?.label ?? t('summary');\n\n if (hasSummaryFields) {\n tabs.push({\n id: 'summary',\n name: summaryLabel,\n content: { label: summaryLabel, content: summaryFieldsCard }\n });\n } else if (summary?.content) {\n tabs.push({ id: 'summary', name: summary.label, content: summary });\n }\n }\n\n detailRegions.forEach((region, index) => {\n if (!region.content) return;\n tabs.push({\n id: region.id ? `details-id-${region.id}` : `details-index-${index}`,\n name: region.label,\n content: region\n });\n });\n\n if (feed?.content && showPulse) tabs.push({ id: 'pulse', name: feed.label, content: feed });\n if (utility?.content && showUtility) {\n tabs.push({ id: 'utilities', name: utility.label, content: utility });\n }\n\n return tabs;\n }, [\n isSmallOrAbove,\n summary,\n detailRegions,\n feed,\n utility,\n summaryFieldsCard,\n hasSummaryFields,\n showPulse,\n showUtility,\n t\n ]);\n\n const [currentTabId, setCurrentTabId] = useState(() => bodyTabs[0]?.id ?? 'details');\n\n useEffect(() => {\n if (!bodyTabs.length) return;\n\n if (!bodyTabs.some(tab => tab.id === currentTabId)) {\n setCurrentTabId(bodyTabs[0].id);\n }\n }, [bodyTabs, currentTabId]);\n\n useLayoutEffect(() => {\n if (restoreTabFocus.current) {\n restoreTabFocus.current = false;\n singleRegionRef.current?.focus();\n }\n }, [bodyTabs, isCreateStage]);\n\n useLayoutEffect(() => {\n wrapActionsBreakpoint.current = null;\n setWrapPromotedActions(false);\n }, [\n promotedActions,\n actions,\n heading,\n subheading,\n icon,\n color,\n isSmallOrAbove,\n isMediumOrAbove,\n isCreateStage,\n ltr\n ]);\n\n useLayoutEffect(() => {\n if (!isSmallOrAbove \|\| isCreateStage \|\| !promotedActions.length) return;\n // Measure changed content after restoring the natural, unwrapped action row.\n if (wrapPromotedActions && wrapActionsBreakpoint.current === null) return;\n\n if (\n !wrapPromotedActions &&\n contentEl.current &&\n actionsContainerEl.current &&\n headerEl.current\n ) {\n const contentStart = getEdge({ el: contentEl.current, side: 'leading', ltr });\n const headerGroupEnd = getEdge({ el: headerEl.current, side: 'trailing', ltr });\n const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n wrapActionsBreakpoint.current =\n Math.abs(Math.ceil(contentStart) - Math.ceil(headerGroupEnd)) +\n Math.ceil(actionsContainerWidth);\n }\n\n const promotedActionsWrapHandler = () => {\n if (wrapActionsBreakpoint.current !== null && contentEl.current) {\n const availableWidth = Math.ceil(contentEl.current.offsetWidth) - 20;\n setWrapPromotedActions(availableWidth < wrapActionsBreakpoint.current);\n }\n };\n\n const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n promotedActionsWrapHandler();\n\n if (contentEl.current) {\n resizeObserver.observe(contentEl.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n contentEl,\n actionsContainerEl,\n headerEl,\n promotedActions,\n actions,\n heading,\n subheading,\n icon,\n color,\n wrapPromotedActions,\n isSmallOrAbove,\n isMediumOrAbove,\n isCreateStage,\n ltr\n ]);\n\n const showActions = !isCreateStage && (promotedActions.length > 0 \|\| !!actions?.length);\n const shouldWrapPromotedActions = !isSmallOrAbove \|\| wrapPromotedActions;\n const showDesktopSummary = !isCreateStage && isSmallOrAbove;\n\n return (\n <StyledModernCaseView\n $isCreateStage={isCreateStage}\n {...(isCreateStage && { 'data-create-stage': '' })}\n {...restProps}\n >\n <StyledModernCaseHeader $color={color} $isSmallOrAbove={isSmallOrAbove}>\n <Flex\n container={{ direction: 'column', gap: 2, pad: 2, alignItems: 'start' }}\n ref={contentEl}\n as={StyledModernContentContainer}\n >\n <Flex container={{ justify: 'between', alignItems: 'start', gap: 2 }} item={{ grow: 1 }}>\n <Flex container={{ gap: 2, alignItems: 'center' }}>\n {icon && (\n <StyledModernCaseViewIcon\n name={icon}\n emphasized\n size='l'\n foreground={iconForeground}\n background={iconBackground}\n $color={color}\n />\n )}\n\n <Flex\n as={StyledModernCaseHeaderText}\n container={{ direction: 'column', alignItems: 'start', justify: 'center' }}\n item={{ shrink: 1 }}\n ref={headerEl}\n >\n <Text variant='h1'>{heading}</Text>\n\n {subheading && (\n <StyledModernCaseSubheading $color={color}>\n {Array.isArray(subheading) ? <MetaList items={subheading} /> : subheading}\n </StyledModernCaseSubheading>\n )}\n </Flex>\n </Flex>\n\n {showActions && (\n <Flex container={{ gap: 1 }} ref={actionsContainerEl}>\n {!shouldWrapPromotedActions && promotedActionButtons}\n\n {actions && actions.length > 0 && (\n <StyledCaseHeaderMenuButton\n icon={actionsIconOnly ? 'more' : undefined}\n iconOnly={actionsIconOnly}\n variant='simple'\n text={t('actions')}\n aria-label={t('actions_for', [caseId])}\n menu={{\n items: actions.map(action => ({\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : undefined\n })),\n scrollAt: 20\n }}\n />\n )}\n </Flex>\n )}\n </Flex>\n\n {shouldWrapPromotedActions && !isCreateStage && promotedActions.length > 0 && (\n <Flex\n item={{ grow: 1 }}\n container={{ justify: 'start', gap: 1, alignItems: 'center', wrap: 'wrap' }}\n >\n {promotedActionButtons}\n </Flex>\n )}\n </Flex>\n </StyledModernCaseHeader>\n\n <Flex container={{ direction: 'column', gap: 2, pad: 2 }} as={StyledModernContentContainer}>\n {!isCreateStage && stages?.content && (\n <StyledModernStagesContainer>{stages.content}</StyledModernStagesContainer>\n )}\n\n {tasks?.content && (\n <div role='region' aria-label={tasks.label}>\n {tasks.content}\n </div>\n )}\n\n {showDesktopSummary && (hasSummaryFields \|\| hasSummaryContent) && (\n <StyledModernSummary role='region' aria-label={summary?.label ?? t('summary')}>\n {hasSummaryFields ? summaryFieldsCard : summary?.content}\n </StyledModernSummary>\n )}\n\n {!isCreateStage && bodyTabs.length === 1 && (\n <StyledModernContent\n role='region'\n aria-label={bodyTabs[0].content.label}\n tabIndex={-1}\n ref={singleRegionRef}\n >\n {bodyTabs[0].content.content}\n </StyledModernContent>\n )}\n\n {!isCreateStage && bodyTabs.length > 1 && (\n <div>\n <Tabs\n tabs={bodyTabs}\n currentTabId={currentTabId}\n onTabClick={setCurrentTabId}\n ref={setTabsRef}\n />\n\n {bodyTabs.map(tab => (\n <TabPanel\n tabId={tab.id}\n currentTabId={currentTabId}\n key={tab.id}\n tablistRef={tabsRef}\n >\n <StyledModernContent>{tab.content.content}</StyledModernContent>\n </TabPanel>\n ))}\n </div>\n )}\n </Flex>\n </StyledModernCaseView>\n );\n};\n\nexport default ModernCaseView;\n"]}
1	+ {"version":3,"file":"ModernCaseView.js","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { parseToHsl } from 'polished';\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n CardContent,\n Flex,\n Icon,\n MetaList,\n TabPanel,\n Tabs,\n Text,\n getEdge,\n readableColor,\n throttle,\n tryCatch,\n useBreakpoint,\n useDirection,\n useI18n,\n useTheme\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\nimport { resolveCaseTypeColor } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\n\nimport type { CaseViewProps, Region } from '../CaseView/CaseView.types';\nimport { StyledCaseHeaderMenuButton } from '../CaseView/CaseView.styles';\n\nimport {\n StyledModernCaseHeader,\n StyledModernCaseHeaderPromotedAction,\n StyledModernCaseHeaderText,\n StyledModernCaseSubheading,\n StyledModernCaseView,\n StyledModernCaseViewIcon,\n StyledModernContent,\n StyledModernContentContainer,\n StyledModernStagesContainer,\n StyledModernSummary,\n StyledModernSummaryCard,\n StyledModernSummaryFieldsDivider,\n StyledModernSummaryPrimaryList,\n StyledModernSummarySecondaryList,\n resolveModernCaseViewIconColor\n} from './ModernCaseView.styles';\n\nconst ModernCaseView = ({\n caseId,\n heading,\n subheading,\n icon,\n color,\n actions,\n stages,\n tasks,\n summary,\n details,\n tabs: detailTabs,\n feed,\n utility,\n promotedActions = [],\n showPulse = true,\n showUtility = true,\n isCreateStage = false,\n ...restProps\n}: PropsWithoutRef<CaseViewProps> & ForwardProps) => {\n const t = useI18n();\n const theme = useTheme();\n const { ltr } = useDirection();\n\n const isSmallOrAbove = useBreakpoint('sm');\n const isMediumOrAbove = useBreakpoint('md');\n\n const actionsIconOnly = promotedActions.length > 0 \|\| !isMediumOrAbove;\n\n const tabsRef = useRef<HTMLElement \| null>(null);\n const singleRegionRef = useRef<HTMLDivElement>(null);\n const restoreTabFocus = useRef(false);\n const contentEl = useRef<HTMLDivElement>(null);\n const headerEl = useRef<HTMLDivElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const wrapActionsBreakpoint = useRef<number \| null>(null);\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n\n const setTabsRef = useCallback((element: HTMLElement \| null) => {\n if (!element && tabsRef.current?.contains(document.activeElement)) {\n restoreTabFocus.current = true;\n }\n tabsRef.current = element;\n }, []);\n\n const primarySummaryFields = summary?.primarySummaryFields ?? [];\n const secondarySummaryFields = summary?.secondarySummaryFields ?? [];\n const hasPrimarySummaryFields = primarySummaryFields.length > 0;\n const hasSecondarySummaryFields = secondarySummaryFields.length > 0;\n const hasSummaryFields = hasPrimarySummaryFields \|\| hasSecondarySummaryFields;\n const hasSummaryContent = Boolean(summary?.content);\n\n const detailRegions = useMemo(() => {\n const fallbackRegions = details ? [details] : [];\n const regions = detailTabs?.length ? detailTabs : fallbackRegions;\n return regions.filter(\n region => region.id !== 'PegaPlatform__pyCasePulse' && region.id !== 'pyCasePulse'\n );\n }, [detailTabs, details]);\n\n const { iconForeground, iconBackground } = useMemo(() => {\n const backgroundSetting = theme.components['case-view'].icon.background;\n const foregroundSetting = theme.components['case-view'].icon.color;\n const usesIconGradient = backgroundSetting.includes('var(--gradient-');\n\n const resolvedIconBackground =\n backgroundSetting !== 'auto'\n ? backgroundSetting\n : tryCatch(\n () => {\n const { lightness } = parseToHsl(theme.components['case-view'].header.background);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n },\n () => 'transparent'\n );\n\n let resolvedIconForeground =\n foregroundSetting !== 'auto'\n ? foregroundSetting\n : theme.components['case-view'].header['foreground-color'];\n\n if (foregroundSetting === 'auto' && usesIconGradient) {\n resolvedIconForeground = 'auto';\n }\n\n if (resolvedIconForeground === 'auto') {\n const caseTypeIconColor =\n theme.base['case-type-colors'] !== 'ignored'\n ? resolveCaseTypeColor(theme, color)\n : undefined;\n resolvedIconForeground = readableColor(\n usesIconGradient\n ? resolveModernCaseViewIconColor(theme, color)\n : caseTypeIconColor ?? resolvedIconBackground,\n { mode: 'light', level: 'AANonText' }\n );\n }\n\n return { iconForeground: resolvedIconForeground, iconBackground: resolvedIconBackground };\n }, [theme, color]);\n\n const promotedActionButtons = useMemo(\n () =>\n promotedActions.map(action => (\n <StyledModernCaseHeaderPromotedAction\n variant='secondary'\n href={action.href}\n disabled={action.disabled}\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n key={action.id}\n $color={color}\n >\n {action.text}\n </StyledModernCaseHeaderPromotedAction>\n )),\n [promotedActions, color]\n );\n\n const summaryFieldsCard = useMemo(\n () =>\n hasSummaryFields ? (\n <StyledModernSummaryCard>\n {hasPrimarySummaryFields && (\n <CardContent>\n <StyledModernSummaryPrimaryList\n variant='stacked'\n fields={primarySummaryFields}\n aria-label={t('primary_summary_fields')}\n $isSmallOrAbove={isSmallOrAbove}\n />\n </CardContent>\n )}\n {hasPrimarySummaryFields && hasSecondarySummaryFields && (\n <StyledModernSummaryFieldsDivider />\n )}\n {hasSecondarySummaryFields && (\n <CardContent>\n <StyledModernSummarySecondaryList\n variant='stacked'\n fields={secondarySummaryFields}\n aria-label={t('summary_fields')}\n $isSmallOrAbove={isSmallOrAbove}\n />\n </CardContent>\n )}\n </StyledModernSummaryCard>\n ) : null,\n [\n hasSummaryFields,\n hasPrimarySummaryFields,\n hasSecondarySummaryFields,\n primarySummaryFields,\n secondarySummaryFields,\n isSmallOrAbove,\n t\n ]\n );\n\n // Desktop: details + pulse + utilities. Mobile: summary is prepended as the first tab.\n const bodyTabs = useMemo(() => {\n const tabs: { id: string; name: Tab['name']; content: Region }[] = [];\n\n if (!isSmallOrAbove) {\n const summaryLabel = summary?.label ?? t('summary');\n\n if (hasSummaryFields) {\n tabs.push({\n id: 'summary',\n name: summaryLabel,\n content: { label: summaryLabel, content: summaryFieldsCard }\n });\n } else if (summary?.content) {\n tabs.push({ id: 'summary', name: summary.label, content: summary });\n }\n }\n\n detailRegions.forEach((region, index) => {\n if (!region.content) return;\n tabs.push({\n id: region.id ? `details-id-${region.id}` : `details-index-${index}`,\n name: region.label,\n content: region\n });\n });\n\n if (feed?.content && showPulse) tabs.push({ id: 'pulse', name: feed.label, content: feed });\n if (utility?.content && showUtility) {\n tabs.push({ id: 'utilities', name: utility.label, content: utility });\n }\n\n return tabs;\n }, [\n isSmallOrAbove,\n summary,\n detailRegions,\n feed,\n utility,\n summaryFieldsCard,\n hasSummaryFields,\n showPulse,\n showUtility,\n t\n ]);\n\n const [currentTabId, setCurrentTabId] = useState(() => bodyTabs[0]?.id ?? 'details');\n\n useEffect(() => {\n if (!bodyTabs.length) return;\n\n if (!bodyTabs.some(tab => tab.id === currentTabId)) {\n setCurrentTabId(bodyTabs[0].id);\n }\n }, [bodyTabs, currentTabId]);\n\n useLayoutEffect(() => {\n if (restoreTabFocus.current) {\n restoreTabFocus.current = false;\n singleRegionRef.current?.focus();\n }\n }, [bodyTabs, isCreateStage]);\n\n useLayoutEffect(() => {\n wrapActionsBreakpoint.current = null;\n setWrapPromotedActions(false);\n }, [\n promotedActions,\n actions,\n heading,\n subheading,\n icon,\n color,\n isSmallOrAbove,\n isMediumOrAbove,\n isCreateStage,\n ltr\n ]);\n\n useLayoutEffect(() => {\n if (!isSmallOrAbove \|\| isCreateStage \|\| !promotedActions.length) return;\n // Measure changed content after restoring the natural, unwrapped action row.\n if (wrapPromotedActions && wrapActionsBreakpoint.current === null) return;\n\n if (\n !wrapPromotedActions &&\n contentEl.current &&\n actionsContainerEl.current &&\n headerEl.current\n ) {\n const contentStart = getEdge({ el: contentEl.current, side: 'leading', ltr });\n const headerGroupEnd = getEdge({ el: headerEl.current, side: 'trailing', ltr });\n const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n wrapActionsBreakpoint.current =\n Math.abs(Math.ceil(contentStart) - Math.ceil(headerGroupEnd)) +\n Math.ceil(actionsContainerWidth);\n }\n\n const promotedActionsWrapHandler = () => {\n if (wrapActionsBreakpoint.current !== null && contentEl.current) {\n const availableWidth = Math.ceil(contentEl.current.offsetWidth) - 20;\n setWrapPromotedActions(availableWidth < wrapActionsBreakpoint.current);\n }\n };\n\n const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n promotedActionsWrapHandler();\n\n if (contentEl.current) {\n resizeObserver.observe(contentEl.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n contentEl,\n actionsContainerEl,\n headerEl,\n promotedActions,\n actions,\n heading,\n subheading,\n icon,\n color,\n wrapPromotedActions,\n isSmallOrAbove,\n isMediumOrAbove,\n isCreateStage,\n ltr\n ]);\n\n const showActions = !isCreateStage && (promotedActions.length > 0 \|\| !!actions?.length);\n const shouldWrapPromotedActions = !isSmallOrAbove \|\| wrapPromotedActions;\n const showDesktopSummary = !isCreateStage && isSmallOrAbove;\n\n return (\n <StyledModernCaseView\n $isCreateStage={isCreateStage}\n {...(isCreateStage && { 'data-create-stage': '' })}\n {...restProps}\n >\n <StyledModernCaseHeader $color={color} $isSmallOrAbove={isSmallOrAbove}>\n <Flex\n container={{ direction: 'column', gap: 2, pad: 2, alignItems: 'start' }}\n ref={contentEl}\n as={StyledModernContentContainer}\n >\n <Flex container={{ justify: 'between', alignItems: 'start', gap: 2 }} item={{ grow: 1 }}>\n <Flex container={{ gap: 2, alignItems: 'center' }}>\n {icon && (\n <StyledModernCaseViewIcon\n name={icon}\n emphasized\n foreground={iconForeground}\n background={iconBackground}\n $color={color}\n />\n )}\n\n <Flex\n as={StyledModernCaseHeaderText}\n container={{ direction: 'column', alignItems: 'start', justify: 'center' }}\n item={{ shrink: 1 }}\n ref={headerEl}\n >\n <Text variant='h1'>{heading}</Text>\n\n {subheading && (\n <StyledModernCaseSubheading $color={color}>\n {Array.isArray(subheading) ? <MetaList items={subheading} /> : subheading}\n </StyledModernCaseSubheading>\n )}\n </Flex>\n </Flex>\n\n {showActions && (\n <Flex container={{ gap: 1 }} ref={actionsContainerEl}>\n {!shouldWrapPromotedActions && promotedActionButtons}\n\n {actions && actions.length > 0 && (\n <StyledCaseHeaderMenuButton\n icon={actionsIconOnly ? 'more' : undefined}\n iconOnly={actionsIconOnly}\n variant='simple'\n text={t('actions')}\n aria-label={t('actions_for', [caseId])}\n menu={{\n items: actions.map(action => ({\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : undefined\n })),\n scrollAt: 20\n }}\n />\n )}\n </Flex>\n )}\n </Flex>\n\n {shouldWrapPromotedActions && !isCreateStage && promotedActions.length > 0 && (\n <Flex\n item={{ grow: 1 }}\n container={{ justify: 'start', gap: 1, alignItems: 'center', wrap: 'wrap' }}\n >\n {promotedActionButtons}\n </Flex>\n )}\n </Flex>\n </StyledModernCaseHeader>\n\n <Flex container={{ direction: 'column', gap: 2, pad: 2 }} as={StyledModernContentContainer}>\n {!isCreateStage && stages?.content && (\n <StyledModernStagesContainer>{stages.content}</StyledModernStagesContainer>\n )}\n\n {tasks?.content && (\n <div role='region' aria-label={tasks.label}>\n {tasks.content}\n </div>\n )}\n\n {showDesktopSummary && (hasSummaryFields \|\| hasSummaryContent) && (\n <StyledModernSummary role='region' aria-label={summary?.label ?? t('summary')}>\n {hasSummaryFields ? summaryFieldsCard : summary?.content}\n </StyledModernSummary>\n )}\n\n {!isCreateStage && bodyTabs.length === 1 && (\n <StyledModernContent\n role='region'\n aria-label={bodyTabs[0].content.label}\n tabIndex={-1}\n ref={singleRegionRef}\n >\n {bodyTabs[0].content.content}\n </StyledModernContent>\n )}\n\n {!isCreateStage && bodyTabs.length > 1 && (\n <div>\n <Tabs\n tabs={bodyTabs}\n currentTabId={currentTabId}\n onTabClick={setCurrentTabId}\n ref={setTabsRef}\n />\n\n {bodyTabs.map(tab => (\n <TabPanel\n tabId={tab.id}\n currentTabId={currentTabId}\n key={tab.id}\n tablistRef={tabsRef}\n >\n <StyledModernContent>{tab.content.content}</StyledModernContent>\n </TabPanel>\n ))}\n </div>\n )}\n </Flex>\n </StyledModernCaseView>\n );\n};\n\nexport default ModernCaseView;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModernCaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA+FtD,eAAO,MAAM,oBAAoB;qBAAiC,OAAO;YASxE,CAAC;AAIF,eAAO,MAAM,sBAAsB;aACxB,MAAM;sBACG,OAAO;~~YA8BzB~~,CAAC;AAIH,eAAO,MAAM,0BAA0B;aAAyB,MAAM;YAiBpE,CAAC;AAIH,eAAO,MAAM,0BAA0B,6NAEtC,CAAC;AAIF,mFAAmF;AACnF,eAAO,MAAM,8BAA8B,GACzC,OAAO,YAAY,EACnB,OAAO,MAAM,GAAG,SAAS,KACxB,MAUF,CAAC;AAEF,eAAO,MAAM,wBAAwB;aAA2B,MAAM;0JAoCpE,CAAC;AAIH,eAAO,MAAM,oCAAoC;;;aAA6B,MAAM;oLAyBlF,CAAC;AAIH,eAAO,MAAM,4BAA4B,6NAuBvC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAO9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAO9B,CAAC;AAIH,eAAO,MAAM,gCAAgC,2NAO3C,CAAC;AAIH,eAAO,MAAM,8BAA8B;;;sBACvB,OAAO;YASzB,CAAC;AAIH,eAAO,MAAM,gCAAgC;sBACzB,OAAO;YAYzB,CAAC;AAIH,eAAO,MAAM,uBAAuB;;yLAclC,CAAC;AAIH,eAAO,MAAM,2BAA2B,~~6NAIvC~~,CAAC"}
1	+ {"version":3,"file":"ModernCaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA+FtD,eAAO,MAAM,oBAAoB;qBAAiC,OAAO;YASxE,CAAC;AAIF,eAAO,MAAM,sBAAsB;aACxB,MAAM;sBACG,OAAO;YAczB,CAAC;AAIH,eAAO,MAAM,0BAA0B;aAAyB,MAAM;YAiBpE,CAAC;AAIH,eAAO,MAAM,0BAA0B,6NAEtC,CAAC;AAIF,mFAAmF;AACnF,eAAO,MAAM,8BAA8B,GACzC,OAAO,YAAY,EACnB,OAAO,MAAM,GAAG,SAAS,KACxB,MAUF,CAAC;AAEF,eAAO,MAAM,wBAAwB;aAA2B,MAAM;0JAoCpE,CAAC;AAIH,eAAO,MAAM,oCAAoC;;;aAA6B,MAAM;oLAyBlF,CAAC;AAIH,eAAO,MAAM,4BAA4B,6NAuBvC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAO9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAO9B,CAAC;AAIH,eAAO,MAAM,gCAAgC,2NAO3C,CAAC;AAIH,eAAO,MAAM,8BAA8B;;;sBACvB,OAAO;YASzB,CAAC;AAIH,eAAO,MAAM,gCAAgC;sBACzB,OAAO;YAYzB,CAAC;AAIH,eAAO,MAAM,uBAAuB;;yLAclC,CAAC;AAIH,eAAO,MAAM,2BAA2B,6NAKvC,CAAC"}

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

@@ -1,11 +1,11 @@
 import styled, { css } from 'styled-components';
 import { getContrast, mix, rgba } from 'polished';
-import { Button, Card, Icon, StyledButton, StyledCard, StyledStackedFieldValue, calculateFontSize, calculateForegroundColor, defaultThemeProp, isSolidColor, isTransparentColor, readableColor, readableHue, tryCatch } from '@pega/cosmos-react-core';
+import { Button, Card, Icon, StyledButton, StyledCard, StyledStackedFieldValue, calculateFontSize, calculateForegroundColor, defaultThemeProp, isSolidColor, readableColor, readableHue, tryCatch } from '@pega/cosmos-react-core';
 import { wcagContrast } from '@pega/cosmos-react-core/lib/styles/constants';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
 import { StyledSummaryPrimaryList, StyledSummarySecondaryList, resolveCaseTypeColor } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
-import { StyledStages } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';
+import { StyledStages, StyledStagesRoot } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';
 const getCaseTypeHeaderColors = (theme, color) => {
     const resolvedCaseTypeColor = resolveCaseTypeColor(theme, color);
     const headerBackground = resolvedCaseTypeColor &&
@@ -21,14 +21,10 @@ const getCaseTypeHeaderColors = (theme, color) => {
 const getModernCaseViewColors = (theme, color) => {
     const { interactive } = theme.base.palette;
     const { headerBackground, foregroundColor } = getCaseTypeHeaderColors(theme, color);
-    const isTransparentBackground = isTransparentColor(headerBackground);
-    const isGradientBackground = !isTransparentBackground && !isSolidColor(headerBackground);
-    // A transparent header shows the page background, so contrast is measured against it.
-    let elementBackground = headerBackground;
-    if (isGradientBackground)
-        elementBackground = readableColor(foregroundColor);
-    else if (isTransparentBackground)
-        elementBackground = theme.base.palette['primary-background'];
+    const isGradientBackground = !isSolidColor(headerBackground);
+    const elementBackground = isGradientBackground
+        ? readableColor(foregroundColor)
+        : headerBackground;
     const interactiveUsable = getContrast(elementBackground, interactive) >= wcagContrast.AA;
     const interactiveColor = !isGradientBackground && interactiveUsable ? interactive : foregroundColor;
     const hoverBackground = !isGradientBackground && interactiveUsable
@@ -52,29 +48,16 @@ export const StyledModernCaseView = styled.div(({ $isCreateStage }) => css `
   `);
 StyledModernCaseView.defaultProps = defaultThemeProp;
 export const StyledModernCaseHeader = styled.header(({ theme, $color, $isSmallOrAbove }) => {
-    const { headerBackground, foregroundColor, interactiveColor } = getModernCaseViewColors(theme, $color);
+    const { foregroundColor } = getModernCaseViewColors(theme, $color);
     return css `
     position: relative;
-    background: ${headerBackground};
+    background: transparent;
     color: ${foregroundColor};
     h1 {
       color: ${foregroundColor};
       min-width: ${$isSmallOrAbove ? theme.base['content-width'].xs : 'auto'};
     }
-    ${isTransparentColor(headerBackground) &&
-        css `
-      > div {
-        padding-block-end: 0;
-      }
-      button,
-      button:hover,
-      button:active {
-        color: ${interactiveColor};
-      }
-    `}
   `;
 });
 StyledModernCaseHeader.defaultProps = defaultThemeProp;
@@ -254,6 +237,7 @@ export const StyledModernSummaryCard = styled(Card)(({ theme }) => {
 });
 StyledModernSummaryCard.defaultProps = defaultThemeProp;
 export const StyledModernStagesContainer = styled.div `
+  ${StyledStagesRoot},
   ${StyledStages} {
     background: transparent;
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModernCaseView.styles.js","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { getContrast, mix, rgba } from 'polished';\n\nimport {\n Button,\n Card,\n Icon,\n StyledButton,\n StyledCard,\n StyledStackedFieldValue,\n calculateFontSize,\n calculateForegroundColor,\n defaultThemeProp,\n isSolidColor,\n isTransparentColor,\n readableColor,\n readableHue,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { wcagContrast } from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport {\n StyledSummaryPrimaryList,\n StyledSummarySecondaryList,\n resolveCaseTypeColor\n} from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\nimport { StyledStages } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';\n\ninterface ModernCaseViewColors {\n headerBackground: string;\n foregroundColor: string;\n elementBackground: string;\n interactiveColor: string;\n hoverBackground: string;\n}\n\nconst getCaseTypeHeaderColors = (\n theme: DefaultTheme,\n color: string \| undefined\n): { headerBackground: string; foregroundColor: string } => {\n const resolvedCaseTypeColor = resolveCaseTypeColor(theme, color);\n const headerBackground =\n resolvedCaseTypeColor &&\n theme.base['case-type-colors'] === 'header-and-icon' &&\n isSolidColor(theme.components.card.background)\n ? tryCatch(\n () => mix(0.85, theme.components.card.background, resolvedCaseTypeColor),\n () => theme.components.card.background\n )\n : theme.components['case-view'].header.background;\n\n const foregroundColor = calculateForegroundColor(\n headerBackground,\n resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'\n ? 'auto'\n : theme.components['case-view'].header['foreground-color'],\n theme\n );\n\n return { headerBackground, foregroundColor };\n};\n\nconst getModernCaseViewColors = (\n theme: DefaultTheme,\n color: string \| undefined\n): ModernCaseViewColors => {\n const { interactive } = theme.base.palette;\n const { headerBackground, foregroundColor } = getCaseTypeHeaderColors(theme, color);\n\n const isTransparentBackground = isTransparentColor(headerBackground);\n const isGradientBackground = !isTransparentBackground && !isSolidColor(headerBackground);\n // A transparent header shows the page background, so contrast is measured against it.\n let elementBackground = headerBackground;\n if (isGradientBackground) elementBackground = readableColor(foregroundColor);\n else if (isTransparentBackground) elementBackground = theme.base.palette['primary-background'];\n\n const interactiveUsable = getContrast(elementBackground, interactive) >= wcagContrast.AA;\n const interactiveColor =\n !isGradientBackground && interactiveUsable ? interactive : foregroundColor;\n\n const hoverBackground =\n !isGradientBackground && interactiveUsable\n ? readableHue(interactive, interactiveColor)\n : rgba(readableColor(interactiveColor), 0.15);\n\n return {\n headerBackground,\n foregroundColor,\n elementBackground,\n interactiveColor,\n hoverBackground\n };\n};\n\nexport const StyledModernCaseView = styled.div<{ $isCreateStage?: boolean }>(\n ({ $isCreateStage }) => css`\n min-height: ${$isCreateStage ? 'calc(100vh - var(--appshell-total-offset, 3rem))' : 'inherit'};\n\n ${StyledTabPanel}${StyledTabPanel}${StyledTabPanel} ${StyledCard} {\n border: none;\n padding: 0;\n }\n `\n);\n\nStyledModernCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseHeader = styled.header<{\n $color?: string;\n $isSmallOrAbove?: boolean;\n}>(({ theme, $color, $isSmallOrAbove }) => {\n const { headerBackground, foregroundColor, interactiveColor } = getModernCaseViewColors(\n theme,\n $color\n );\n\n return css`\n position: relative;\n background: ${headerBackground};\n color: ${foregroundColor};\n\n h1 {\n color: ${foregroundColor};\n min-width: ${$isSmallOrAbove ? theme.base['content-width'].xs : 'auto'};\n }\n\n ${isTransparentColor(headerBackground) &&\n css`\n > div {\n padding-block-end: 0;\n }\n\n button,\n button:hover,\n button:active {\n color: ${interactiveColor};\n }\n `}\n `;\n});\n\nStyledModernCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseSubheading = styled.div<{ $color?: string }>(({ theme, $color }) => {\n const { foregroundColor } = getModernCaseViewColors(theme, $color);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n color: ${foregroundColor};\n font-size: ${fontSize.xs};\n font-weight: normal;\n margin: 0;\n\n /* MetaList renders items as Text elements with explicit styles. /\n && li {\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n }\n `;\n});\n\nStyledModernCaseSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseHeaderText = styled.div`\n word-break: break-word;\n`;\n\nStyledModernCaseHeaderText.defaultProps = defaultThemeProp;\n\n/* Resolves `auto` accents to a solid palette color for the case icon gradient. /\nexport const resolveModernCaseViewIconColor = (\n theme: DefaultTheme,\n color: string \| undefined\n): string => {\n const caseTypeColorsEnabled =\n theme.base['case-type-colors'] === 'icon-only' \|\|\n theme.base['case-type-colors'] === 'header-and-icon';\n const resolvedCaseTypeColor = caseTypeColorsEnabled\n ? resolveCaseTypeColor(theme, color)\n : undefined;\n const accent = theme.base.palette['brand-accent'];\n\n return resolvedCaseTypeColor ?? (accent === 'auto' ? theme.base.palette.dark : accent);\n};\n\nexport const StyledModernCaseViewIcon = styled(Icon)<{ $color?: string }>(({ theme, $color }) => {\n const caseTypeColorsEnabled =\n theme.base['case-type-colors'] === 'icon-only' \|\|\n theme.base['case-type-colors'] === 'header-and-icon';\n const resolvedCaseTypeColor = caseTypeColorsEnabled\n ? resolveCaseTypeColor(theme, $color)\n : undefined;\n\n return css`\n --icon-color: ${resolveModernCaseViewIconColor(theme, $color)};\n --gradient-start: oklch(from var(--icon-color) calc(l - 0.3) calc(c 1.5) h);\n --gradient-mid: oklch(from var(--icon-color) l c h);\n --gradient-end: oklch(from var(--icon-color) calc(l + 0.5) calc(c * 1.5) h);\n flex-shrink: 0;\n\n ${theme.components['case-view'].icon.color !== 'auto' &&\n css`\n color: ${theme.components['case-view'].icon.color};\n `}\n\n ${theme.components['case-view'].icon.background !== 'auto' &&\n css`\n background: ${theme.components['case-view'].icon.background};\n `}\n\n ${theme.components['case-view'].icon.background === 'auto' &&\n resolvedCaseTypeColor &&\n css`\n background: ${resolvedCaseTypeColor};\n `}\n\n ${theme.components['case-view'].icon['box-shadow'] !== 'auto' &&\n css`\n box-shadow: ${theme.components['case-view'].icon['box-shadow']};\n `}\n `;\n});\n\nStyledModernCaseViewIcon.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseHeaderPromotedAction = styled(Button)<{ $color?: string }>(({\n theme,\n $color\n}) => {\n const { elementBackground, interactiveColor, hoverBackground } = getModernCaseViewColors(\n theme,\n $color\n );\n\n return css`\n --button-background-color: ${elementBackground};\n color: ${interactiveColor};\n background-color: transparent;\n border-color: ${interactiveColor};\n\n @media (hover: hover) {\n &:hover,\n &:active {\n --button-background-color: ${hoverBackground};\n color: ${interactiveColor};\n background-color: ${hoverBackground};\n border-color: ${interactiveColor};\n }\n }\n `;\n});\n\nStyledModernCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledModernContentContainer = styled.div(({ theme }) => {\n const { breakpoints } = theme.base;\n\n return css`\n width: 100%;\n margin-inline: auto;\n\n @media screen and (min-width: ${breakpoints.md}) {\n width: 85%;\n }\n\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: ${theme.base['content-width'].xl};\n }\n\n & > div {\n width: 100%;\n }\n\n ${StyledButton} {\n margin-inline-start: 0;\n }\n `;\n});\n\nStyledModernContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledModernContent = styled.div(({ theme }) => {\n return css`\n ${StyledSummaryPrimaryList} {\n grid-template-columns: auto 1fr;\n column-gap: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledModernContent.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummary = styled.div(({ theme }) => {\n return css`\n background: ${theme.components.card.background};\n border-radius: ${theme.base['border-radius']};\n padding: calc(${theme.base.spacing} * 1.5);\n align-self: start;\n `;\n});\n\nStyledModernSummary.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummaryFieldsDivider = styled.hr(({ theme }) => {\n return css`\n margin: 0 calc(2 * ${theme.base.spacing});\n border: none;\n border-block-start: ${theme.components.button['border-width']} solid\n ${theme.base.palette['border-line']};\n `;\n});\n\nStyledModernSummaryFieldsDivider.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummaryPrimaryList = styled(StyledSummaryPrimaryList)<{\n $isSmallOrAbove?: boolean;\n}>(({ theme, $isSmallOrAbove }) => {\n return css`\n &&& {\n grid-template-columns: ${$isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr'};\n column-gap: calc(2 * ${theme.base.spacing});\n row-gap: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledModernSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummarySecondaryList = styled(StyledSummarySecondaryList)<{\n $isSmallOrAbove?: boolean;\n}>(({ theme, $isSmallOrAbove }) => {\n return css`\n &&& {\n grid-template-columns: ${$isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr'};\n row-gap: calc(2 * ${theme.base.spacing});\n }\n\n ${StyledStackedFieldValue} {\n grid-column: auto;\n }\n `;\n});\n\nStyledModernSummarySecondaryList.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummaryCard = styled(Card)(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n &&&& ${StyledCardContent} {\n padding: calc(1.5 * ${spacing}) calc(${theme.components.card.padding} * 2);\n\n @media (width < ${breakpoints.sm}) {\n padding: ${spacing} calc(${theme.components.card.padding} * 1.5);\n }\n }\n `;\n});\n\nStyledModernSummaryCard.defaultProps = defaultThemeProp;\n\nexport const StyledModernStagesContainer = styled.div`\n ${StyledStages} {\n background: transparent;\n }\n`;\n\nStyledModernStagesContainer.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"ModernCaseView.styles.js","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { getContrast, mix, rgba } from 'polished';\n\nimport {\n Button,\n Card,\n Icon,\n StyledButton,\n StyledCard,\n StyledStackedFieldValue,\n calculateFontSize,\n calculateForegroundColor,\n defaultThemeProp,\n isSolidColor,\n readableColor,\n readableHue,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { wcagContrast } from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport {\n StyledSummaryPrimaryList,\n StyledSummarySecondaryList,\n resolveCaseTypeColor\n} from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\nimport {\n StyledStages,\n StyledStagesRoot\n} from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';\n\ninterface ModernCaseViewColors {\n headerBackground: string;\n foregroundColor: string;\n elementBackground: string;\n interactiveColor: string;\n hoverBackground: string;\n}\n\nconst getCaseTypeHeaderColors = (\n theme: DefaultTheme,\n color: string \| undefined\n): { headerBackground: string; foregroundColor: string } => {\n const resolvedCaseTypeColor = resolveCaseTypeColor(theme, color);\n const headerBackground =\n resolvedCaseTypeColor &&\n theme.base['case-type-colors'] === 'header-and-icon' &&\n isSolidColor(theme.components.card.background)\n ? tryCatch(\n () => mix(0.85, theme.components.card.background, resolvedCaseTypeColor),\n () => theme.components.card.background\n )\n : theme.components['case-view'].header.background;\n\n const foregroundColor = calculateForegroundColor(\n headerBackground,\n resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'\n ? 'auto'\n : theme.components['case-view'].header['foreground-color'],\n theme\n );\n\n return { headerBackground, foregroundColor };\n};\n\nconst getModernCaseViewColors = (\n theme: DefaultTheme,\n color: string \| undefined\n): ModernCaseViewColors => {\n const { interactive } = theme.base.palette;\n const { headerBackground, foregroundColor } = getCaseTypeHeaderColors(theme, color);\n\n const isGradientBackground = !isSolidColor(headerBackground);\n const elementBackground = isGradientBackground\n ? readableColor(foregroundColor)\n : headerBackground;\n\n const interactiveUsable = getContrast(elementBackground, interactive) >= wcagContrast.AA;\n const interactiveColor =\n !isGradientBackground && interactiveUsable ? interactive : foregroundColor;\n\n const hoverBackground =\n !isGradientBackground && interactiveUsable\n ? readableHue(interactive, interactiveColor)\n : rgba(readableColor(interactiveColor), 0.15);\n\n return {\n headerBackground,\n foregroundColor,\n elementBackground,\n interactiveColor,\n hoverBackground\n };\n};\n\nexport const StyledModernCaseView = styled.div<{ $isCreateStage?: boolean }>(\n ({ $isCreateStage }) => css`\n min-height: ${$isCreateStage ? 'calc(100vh - var(--appshell-total-offset, 3rem))' : 'inherit'};\n\n ${StyledTabPanel}${StyledTabPanel}${StyledTabPanel} ${StyledCard} {\n border: none;\n padding: 0;\n }\n `\n);\n\nStyledModernCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseHeader = styled.header<{\n $color?: string;\n $isSmallOrAbove?: boolean;\n}>(({ theme, $color, $isSmallOrAbove }) => {\n const { foregroundColor } = getModernCaseViewColors(theme, $color);\n\n return css`\n position: relative;\n background: transparent;\n color: ${foregroundColor};\n\n h1 {\n color: ${foregroundColor};\n min-width: ${$isSmallOrAbove ? theme.base['content-width'].xs : 'auto'};\n }\n `;\n});\n\nStyledModernCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseSubheading = styled.div<{ $color?: string }>(({ theme, $color }) => {\n const { foregroundColor } = getModernCaseViewColors(theme, $color);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n color: ${foregroundColor};\n font-size: ${fontSize.xs};\n font-weight: normal;\n margin: 0;\n\n /* MetaList renders items as Text elements with explicit styles. /\n && li {\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n }\n `;\n});\n\nStyledModernCaseSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseHeaderText = styled.div`\n word-break: break-word;\n`;\n\nStyledModernCaseHeaderText.defaultProps = defaultThemeProp;\n\n/* Resolves `auto` accents to a solid palette color for the case icon gradient. /\nexport const resolveModernCaseViewIconColor = (\n theme: DefaultTheme,\n color: string \| undefined\n): string => {\n const caseTypeColorsEnabled =\n theme.base['case-type-colors'] === 'icon-only' \|\|\n theme.base['case-type-colors'] === 'header-and-icon';\n const resolvedCaseTypeColor = caseTypeColorsEnabled\n ? resolveCaseTypeColor(theme, color)\n : undefined;\n const accent = theme.base.palette['brand-accent'];\n\n return resolvedCaseTypeColor ?? (accent === 'auto' ? theme.base.palette.dark : accent);\n};\n\nexport const StyledModernCaseViewIcon = styled(Icon)<{ $color?: string }>(({ theme, $color }) => {\n const caseTypeColorsEnabled =\n theme.base['case-type-colors'] === 'icon-only' \|\|\n theme.base['case-type-colors'] === 'header-and-icon';\n const resolvedCaseTypeColor = caseTypeColorsEnabled\n ? resolveCaseTypeColor(theme, $color)\n : undefined;\n\n return css`\n --icon-color: ${resolveModernCaseViewIconColor(theme, $color)};\n --gradient-start: oklch(from var(--icon-color) calc(l - 0.3) calc(c 1.5) h);\n --gradient-mid: oklch(from var(--icon-color) l c h);\n --gradient-end: oklch(from var(--icon-color) calc(l + 0.5) calc(c * 1.5) h);\n flex-shrink: 0;\n\n ${theme.components['case-view'].icon.color !== 'auto' &&\n css`\n color: ${theme.components['case-view'].icon.color};\n `}\n\n ${theme.components['case-view'].icon.background !== 'auto' &&\n css`\n background: ${theme.components['case-view'].icon.background};\n `}\n\n ${theme.components['case-view'].icon.background === 'auto' &&\n resolvedCaseTypeColor &&\n css`\n background: ${resolvedCaseTypeColor};\n `}\n\n ${theme.components['case-view'].icon['box-shadow'] !== 'auto' &&\n css`\n box-shadow: ${theme.components['case-view'].icon['box-shadow']};\n `}\n `;\n});\n\nStyledModernCaseViewIcon.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseHeaderPromotedAction = styled(Button)<{ $color?: string }>(({\n theme,\n $color\n}) => {\n const { elementBackground, interactiveColor, hoverBackground } = getModernCaseViewColors(\n theme,\n $color\n );\n\n return css`\n --button-background-color: ${elementBackground};\n color: ${interactiveColor};\n background-color: transparent;\n border-color: ${interactiveColor};\n\n @media (hover: hover) {\n &:hover,\n &:active {\n --button-background-color: ${hoverBackground};\n color: ${interactiveColor};\n background-color: ${hoverBackground};\n border-color: ${interactiveColor};\n }\n }\n `;\n});\n\nStyledModernCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledModernContentContainer = styled.div(({ theme }) => {\n const { breakpoints } = theme.base;\n\n return css`\n width: 100%;\n margin-inline: auto;\n\n @media screen and (min-width: ${breakpoints.md}) {\n width: 85%;\n }\n\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: ${theme.base['content-width'].xl};\n }\n\n & > div {\n width: 100%;\n }\n\n ${StyledButton} {\n margin-inline-start: 0;\n }\n `;\n});\n\nStyledModernContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledModernContent = styled.div(({ theme }) => {\n return css`\n ${StyledSummaryPrimaryList} {\n grid-template-columns: auto 1fr;\n column-gap: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledModernContent.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummary = styled.div(({ theme }) => {\n return css`\n background: ${theme.components.card.background};\n border-radius: ${theme.base['border-radius']};\n padding: calc(${theme.base.spacing} * 1.5);\n align-self: start;\n `;\n});\n\nStyledModernSummary.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummaryFieldsDivider = styled.hr(({ theme }) => {\n return css`\n margin: 0 calc(2 * ${theme.base.spacing});\n border: none;\n border-block-start: ${theme.components.button['border-width']} solid\n ${theme.base.palette['border-line']};\n `;\n});\n\nStyledModernSummaryFieldsDivider.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummaryPrimaryList = styled(StyledSummaryPrimaryList)<{\n $isSmallOrAbove?: boolean;\n}>(({ theme, $isSmallOrAbove }) => {\n return css`\n &&& {\n grid-template-columns: ${$isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr'};\n column-gap: calc(2 * ${theme.base.spacing});\n row-gap: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledModernSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummarySecondaryList = styled(StyledSummarySecondaryList)<{\n $isSmallOrAbove?: boolean;\n}>(({ theme, $isSmallOrAbove }) => {\n return css`\n &&& {\n grid-template-columns: ${$isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr'};\n row-gap: calc(2 * ${theme.base.spacing});\n }\n\n ${StyledStackedFieldValue} {\n grid-column: auto;\n }\n `;\n});\n\nStyledModernSummarySecondaryList.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummaryCard = styled(Card)(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n &&&& ${StyledCardContent} {\n padding: calc(1.5 * ${spacing}) calc(${theme.components.card.padding} * 2);\n\n @media (width < ${breakpoints.sm}) {\n padding: ${spacing} calc(${theme.components.card.padding} * 1.5);\n }\n }\n `;\n});\n\nStyledModernSummaryCard.defaultProps = defaultThemeProp;\n\nexport const StyledModernStagesContainer = styled.div`\n ${StyledStagesRoot},\n ${StyledStages} {\n background: transparent;\n }\n`;\n\nStyledModernStagesContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/PageTemplates/BannerPage.d.ts CHANGED Viewed

@@ -47,6 +47,8 @@ export interface BannerPageProps extends BaseProps {
     banner: BannerOptions;
     /** Title for the page, rendered invisibly as h1 if banner title is not provided. */
     title: string;
+    /** Retain the page title as a visually hidden, focusable heading. */
+    hideHeading?: boolean;
     /** Content for the first column */
     a: ReactNode[];
     /** Content for the second column. If not provided the first column will stretch. */
@@ -59,7 +61,9 @@ export interface BannerPageProps extends BaseProps {
     /** Utilities as the last column */
     utilities?: ReactNode;
 }
-export declare const StyledBannerPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledBannerPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    anchorHeading?: boolean;
+}>> & string;
 export declare const StyledBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<BannerOptions, "backgroundColor" | "backgroundImage" | "height"> & {
     $hasContent?: boolean;
     $heightValue?: number;

package/lib/components/PageTemplates/BannerPage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAqB7D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE1F,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,MAAM,EAAE,aAAa,CAAC;IACtB,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,CAAC,EAAE,SAAS,EAAE,CAAC;IACf,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;IAChB,uFAAuF;IACvF,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;IACvD,mCAAmC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAsBD,eAAO,MAAM,gBAAgB,~~6NAK3B~~,CAAC;~~AAIH~~,eAAO,MAAM,qBAAqB;kBAEhB,OAAO;mBACN,MAAM;YA+EvB,CAAC;AAIH,eAAO,MAAM,mBAAmB;;uJAS/B,CAAC;~~AAIF~~,eAAO,MAAM,mBAAmB;;uJAQ/B,CAAC;AAIF,eAAO,MAAM,YAAY,4VAkDxB,CAAC;AAIF,eAAO,MAAM,sBAAsB;6BAAyC,OAAO;YA8BlF,CAAC;AAkBF,eAAO,MAAM,wBAAwB;2BACZ,OAAO;qBACb,OAAO;YAWxB,CAAC;AAsCH,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,~~CAyOvE~~,CAAC"}
1	+ {"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAqB7D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE1F,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,MAAM,EAAE,aAAa,CAAC;IACtB,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mCAAmC;IACnC,CAAC,EAAE,SAAS,EAAE,CAAC;IACf,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;IAChB,uFAAuF;IACvF,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;IACvD,mCAAmC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAsBD,eAAO,MAAM,gBAAgB;oBAAgC,OAAO;YAYnE,CAAC;AAIF,eAAO,MAAM,qBAAqB;kBAEhB,OAAO;mBACN,MAAM;YA+EvB,CAAC;AAIH,eAAO,MAAM,mBAAmB;;uJAS/B,CAAC;AA0BF,eAAO,MAAM,mBAAmB;;uJAQ/B,CAAC;AAIF,eAAO,MAAM,YAAY,4VAkDxB,CAAC;AAIF,eAAO,MAAM,sBAAsB;6BAAyC,OAAO;YA8BlF,CAAC;AAkBF,eAAO,MAAM,wBAAwB;2BACZ,OAAO;qBACb,OAAO;YAWxB,CAAC;AAsCH,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAyPvE,CAAC"}

package/lib/components/PageTemplates/BannerPage.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { transparentize } from 'polished';
+import { hideVisually, transparentize } from 'polished';
 import { forwardRef, useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, Flex, Grid, HTML, Text, tryCatch, readableColor, useBreakpoint, useI18n, Tabs, TabPanel, createClassName, VisuallyHiddenText, useTheme, readableHue, ThemeOverride } from '@pega/cosmos-react-core';
@@ -16,11 +16,16 @@ const getFixedHeightDvh = (value) => {
         : DEFAULT_FIXED_HEIGHT_DVH;
     return `${clamped}dvh`;
 };
-export const StyledBannerPage = styled.div(({ theme }) => {
+export const StyledBannerPage = styled.div(({ theme, anchorHeading }) => {
     return css `
-    min-height: calc(100vh - var(--appshell-top-offset, 0rem));
-    background: ${theme.base.palette['app-background']};
-  `;
+      min-height: calc(100vh - var(--appshell-top-offset, 0rem));
+      background: ${theme.base.palette['app-background']};
+      ${anchorHeading &&
+        css `
+        position: relative;
+      `}
+    `;
 });
 StyledBannerPage.defaultProps = defaultThemeProp;
 export const StyledBannerContainer = styled.div(({ theme, backgroundImage, backgroundColor, height = 'fixed', $hasContent, $heightValue }) => {
@@ -105,6 +110,24 @@ export const StyledBannerHeading = styled(Text)(({ theme: { base: { 'font-size':
     word-break: break-word;
   `);
 StyledBannerHeading.defaultProps = defaultThemeProp;
+const StyledFocusablePageHeading = styled(Text)(({ theme }) => css `
+    &:not(:focus-visible) {
+      ${hideVisually}
+    }
+    &:focus-visible {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: calc(2 * ${theme.base.spacing});
+      margin: 0;
+      max-width: calc(100% - 4 * ${theme.base.spacing});
+      z-index: ${theme.base['z-index'].backdrop};
+      box-shadow: ${theme.base.shadow.focus};
+      padding: ${theme.base.spacing};
+      background-color: ${theme.components.card.background};
+    }
+  `);
+StyledFocusablePageHeading.defaultProps = defaultThemeProp;
 export const StyledBannerMessage = styled(Text)(({ theme: { base: { 'font-size': fontSize } } }) => css `
     font-size: calc(${fontSize} * 1.5);
   `);
@@ -208,7 +231,7 @@ const StyledPageTabContent = styled.div(({ theme }) => {
   `;
 });
 StyledPageTabContent.defaultProps = defaultThemeProp;
-export const BannerPage = forwardRef(function BannerPage({ banner, title, a, b, bannerRegion, variant = 'two-column', utilities, className: classNameProp, ...restProps }, ref) {
+export const BannerPage = forwardRef(function BannerPage({ banner, title, hideHeading = false, a, b, bannerRegion, variant = 'two-column', utilities, className: classNameProp, ...restProps }, ref) {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
     const [panel, setPanel] = useState('content');
@@ -236,7 +259,7 @@ export const BannerPage = forwardRef(function BannerPage({ banner, title, a, b,
                 alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',
                 direction: 'column',
                 gap: 1
-            }, tintImage: banner.tintImage, align: banner.align, enableContentOverlap: effectiveOverlap, children: _jsxs(StyledContentContainer, { "$bannerReservesOverlap": effectiveOverlap && hasBannerRegionContent, children: [banner.title && (_jsx(StyledBannerHeading, { variant: 'h1', children: _jsx(HTML, { as: 'span', content: banner.title }) })), !banner.title && (_jsx(Text, { variant: 'h1', children: _jsx(VisuallyHiddenText, { children: title }) })), banner.message && (_jsx(StyledBannerMessage, { variant: 'primary', as: 'p', children: _jsx(HTML, { as: 'span', content: banner.message }) })), _jsx(ThemeOverride, { theme: {
+            }, tintImage: banner.tintImage, align: banner.align, enableContentOverlap: effectiveOverlap, children: _jsxs(StyledContentContainer, { "$bannerReservesOverlap": effectiveOverlap && hasBannerRegionContent, children: [banner.title && (_jsx(StyledBannerHeading, { variant: 'h1', children: _jsx(HTML, { as: 'span', content: banner.title }) })), !banner.title && !hideHeading && (_jsx(Text, { variant: 'h1', children: _jsx(VisuallyHiddenText, { children: title }) })), banner.message && (_jsx(StyledBannerMessage, { variant: 'primary', as: 'p', children: _jsx(HTML, { as: 'span', content: banner.message }) })), _jsx(ThemeOverride, { theme: {
                             components: {
                                 agent: {
                                     background: 'transparent',
@@ -269,6 +292,7 @@ export const BannerPage = forwardRef(function BannerPage({ banner, title, a, b,
                                 }
                             }
                         }, children: hasBannerRegionContent && (_jsx(Flex, { as: StyledBannerContentArea, container: { direction: 'column', gap: 2, pad: [1, 0, 0, 0] }, className: createClassName('banner-page-banner-content'), children: bannerRegion.map(el => el) })) })] }) }) }));
+    const hiddenPageTitle = hideHeading && title.trim() && (_jsx(StyledFocusablePageHeading, { forwardedAs: 'h1', variant: 'primary', tabIndex: 0, children: title }));
     const pageTabs = [
         { name: t('content'), id: 'content', content: pageContent },
         {
@@ -282,10 +306,10 @@ export const BannerPage = forwardRef(function BannerPage({ banner, title, a, b,
     };
     if (utilities) {
         if (isMediumOrAbove) {
-            return (_jsxs(Flex, { as: StyledBannerPage, container: { gap: 2 }, ref: ref, ...restProps, className: className, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, children: [pageBanner, _jsx(StyledPageContentWrapper, { enableContentOverlap: effectiveOverlap, "$extendOverlap": !hasBannerRegionContent, className: createClassName('banner-page-content-wrapper'), children: pageContent })] }), _jsx("div", { children: utilities })] }));
+            return (_jsxs(Flex, { as: StyledBannerPage, anchorHeading: !!hiddenPageTitle, container: { gap: 2 }, ref: ref, ...restProps, className: className, children: [hiddenPageTitle, _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, children: [pageBanner, _jsx(StyledPageContentWrapper, { enableContentOverlap: effectiveOverlap, "$extendOverlap": !hasBannerRegionContent, className: createClassName('banner-page-content-wrapper'), children: pageContent })] }), _jsx("div", { children: utilities })] }));
         }
-        return (_jsxs(Flex, { container: { direction: 'column', gap: effectiveOverlap ? 0 : 2 }, as: StyledBannerPage, className: className, children: [pageBanner, _jsx(StyledPageContentWrapper, { enableContentOverlap: effectiveOverlap, "$extendOverlap": !hasBannerRegionContent, className: createClassName('banner-page-content-wrapper'), children: _jsxs(Flex, { container: { direction: 'column', pad: [undefined, 2, undefined] }, children: [_jsx(Tabs, { tabs: pageTabs, onTabClick: handleTabChange, currentTabId: panel, ref: pageTabsRef }), pageTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panel, tablistRef: pageTabsRef, children: _jsx(StyledPageTabContent, { children: tab.content }) }, tab.id)))] }) })] }));
+        return (_jsxs(Flex, { container: { direction: 'column', gap: effectiveOverlap ? 0 : 2 }, as: StyledBannerPage, anchorHeading: !!hiddenPageTitle, className: className, children: [hiddenPageTitle, pageBanner, _jsx(StyledPageContentWrapper, { enableContentOverlap: effectiveOverlap, "$extendOverlap": !hasBannerRegionContent, className: createClassName('banner-page-content-wrapper'), children: _jsxs(Flex, { container: { direction: 'column', pad: [undefined, 2, undefined] }, children: [_jsx(Tabs, { tabs: pageTabs, onTabClick: handleTabChange, currentTabId: panel, ref: pageTabsRef }), pageTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panel, tablistRef: pageTabsRef, children: _jsx(StyledPageTabContent, { children: tab.content }) }, tab.id)))] }) })] }));
     }
-    return (_jsxs(StyledBannerPage, { ref: ref, ...restProps, className: className, children: [pageBanner, _jsx(StyledPageContentWrapper, { enableContentOverlap: effectiveOverlap, "$extendOverlap": !hasBannerRegionContent, className: createClassName('banner-page-content-wrapper'), children: pageContent })] }));
+    return (_jsxs(StyledBannerPage, { ref: ref, ...restProps, className: className, anchorHeading: !!hiddenPageTitle, children: [hiddenPageTitle, pageBanner, _jsx(StyledPageContentWrapper, { enableContentOverlap: effectiveOverlap, "$extendOverlap": !hasBannerRegionContent, className: createClassName('banner-page-content-wrapper'), children: pageContent })] }));
 });
 //# sourceMappingURL=BannerPage.js.map

package/lib/components/PageTemplates/BannerPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport { forwardRef, useState, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n Grid,\n HTML,\n Text,\n tryCatch,\n readableColor,\n useBreakpoint,\n useI18n,\n Tabs,\n TabPanel,\n createClassName,\n VisuallyHiddenText,\n useTheme,\n readableHue,\n ThemeOverride\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nexport interface BannerOptions {\n /** An image url for the banner /\n backgroundImage?: string;\n /* A title for the banner /\n title?: string;\n /* A fallback background color if the background image is not provided /\n backgroundColor?: string;\n /* Text that will appear below the title /\n message?: string;\n /* The light variant will provide a white translucent filter over the background image\n * with dark text. The dark variant will provide the opposite.\n * @default 'light'\n /\n variant?: 'light' \| 'dark';\n /* Toggles the translucent filter provided by the variant\n * @default true\n /\n tintImage?: boolean;\n /* Controls how the banner fills vertical space.\n * - 'fixed': percentage-based height configured in authoring\n * - 'content': shrinks to fit content\n * - 'full': fills the visible viewport below the app shell\n * @default 'fixed'\n /\n height?: 'content' \| 'fixed' \| 'full';\n /* Banner height as a percentage of the viewport (1-100, in dvh units) when height is 'fixed'.\n * Falls back to 25 if invalid.\n * @default 25\n /\n heightValue?: number;\n /* Horizontal alignment of the banner text content.\n * @default 'center'\n /\n align?: 'left' \| 'center' \| 'right';\n /* Vertical alignment of the banner text content.\n * @default 'center'\n /\n verticalAlign?: 'top' \| 'center' \| 'bottom';\n /* When true and height is 'fixed' or 'content', page content overlaps the bottom of the banner.\n * Has no effect when height is 'full'.\n /\n enableContentOverlap?: boolean;\n}\n\nexport interface BannerPageProps extends BaseProps {\n banner: BannerOptions;\n /* Title for the page, rendered invisibly as h1 if banner title is not provided. /\n title: string;\n /* Content for the first column /\n a: ReactNode[];\n /* Content for the second column. If not provided the first column will stretch. /\n b?: ReactNode[];\n /* Widget content rendered within the banner region, below the heading and message. /\n bannerRegion?: ReactNode[];\n ref?: Ref<HTMLDivElement>;\n /* Variants for the sizing of the content columns. Two column will make the columns equal in size. /\n variant?: 'two-column' \| 'narrow-wide' \| 'wide-narrow';\n /* Utilities as the last column /\n utilities?: ReactNode;\n}\n\nconst BANNER_OVERLAP_MULTIPLIER = 8;\n\n// Extra pull-up of the page content when the banner has no content of its own, on top of the overlap.\nconst BANNER_OVERLAP_EXTENSION = '2.25rem';\n\nconst DEFAULT_FIXED_HEIGHT_DVH = 25;\n\nconst CONTENT_PADDING_MULTIPLIER = 2.5;\n\nconst PAGE_CONTENT_PADDING_MULTIPLIER = 2;\n\n// Clamp a 1-100 banner height (in dvh units) to a valid CSS dvh string, falling back to the default.\nconst getFixedHeightDvh = (value: number \| undefined): string => {\n const clamped =\n value !== undefined && Number.isFinite(value)\n ? Math.min(100, Math.max(1, value))\n : DEFAULT_FIXED_HEIGHT_DVH;\n return `${clamped}dvh`;\n};\n\nexport const StyledBannerPage = styled.div(({ theme }) => {\n return css`\n min-height: calc(100vh - var(--appshell-top-offset, 0rem));\n background: ${theme.base.palette['app-background']};\n `;\n});\n\nStyledBannerPage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContainer = styled.div<\n Pick<BannerOptions, 'backgroundImage' \| 'backgroundColor' \| 'height'> & {\n $hasContent?: boolean;\n $heightValue?: number;\n }\n>(({ theme, backgroundImage, backgroundColor, height = 'fixed', $hasContent, $heightValue }) => {\n const fixedHeight = getFixedHeightDvh($heightValue);\n const heightValue = {\n content: 'auto',\n fixed: fixedHeight,\n full: 'calc(100dvh - var(--appshell-top-offset, 0rem))'\n }[height];\n\n const backgroundStyles = css`\n ${backgroundImage &&\n css`\n background-image: url('${backgroundImage}');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n `}\n\n ${backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n `;\n\n const fixedHeightBannerWithContent = height === 'fixed' && $hasContent;\n\n let layoutStyles;\n if (fixedHeightBannerWithContent) {\n layoutStyles = css`\n min-height: ${fixedHeight};\n position: relative;\n display: flex;\n flex-direction: column;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n height: ${fixedHeight};\n z-index: 0;\n ${backgroundStyles}\n }\n\n > {\n position: relative;\n flex: 1;\n }\n `;\n } else if ($hasContent) {\n layoutStyles = css`\n ${height === 'full' &&\n css`\n min-height: ${heightValue};\n `}\n display: flex;\n flex-direction: column;\n\n > * {\n flex: 1;\n }\n ${backgroundStyles}\n `;\n } else {\n layoutStyles = css`\n height: ${heightValue};\n ${backgroundStyles}\n `;\n }\n\n return css`\n width: 100%;\n ${layoutStyles}\n --content-height-in-agent: calc(\n 100dvh - var(--appshell-top-offset, 0rem) - calc(${theme.base\n .spacing} * ${CONTENT_PADDING_MULTIPLIER})\n );\n `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeading = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 3);\n word-break: break-word;\n `\n);\n\nStyledBannerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 1.5);\n `\n);\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n Pick<\n BannerOptions,\n \| 'variant'\n \| 'backgroundColor'\n \| 'backgroundImage'\n \| 'tintImage'\n \| 'align'\n \| 'enableContentOverlap'\n >\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = false,\n align = 'center',\n enableContentOverlap,\n theme: {\n base: {\n palette: { light, dark },\n spacing\n }\n }\n }) => {\n let textColor = variant === 'light' ? dark : light;\n let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n if (backgroundColor && !backgroundImage) {\n textColor = tryCatch(() => readableColor(backgroundColor)) ?? dark;\n overlayColor = 'transparent';\n } else if (!backgroundColor && !backgroundImage) {\n overlayColor = 'transparent';\n textColor = dark;\n }\n return css`\n background-color: ${tintImage ? overlayColor : 'transparent'};\n width: 100%;\n height: 100%;\n text-align: ${align};\n\n ${StyledBannerMessage}, ${StyledBannerHeading} {\n color: ${textColor};\n }\n\n ${enableContentOverlap &&\n css`\n padding-block-end: calc(${spacing} * ${BANNER_OVERLAP_MULTIPLIER});\n `}\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div<{ $bannerReservesOverlap?: boolean }>(\n ({\n $bannerReservesOverlap,\n theme: {\n base: { breakpoints, spacing }\n }\n }) => {\n return css`\n padding: calc(${spacing} * 2);\n width: 100%;\n margin: 0 auto;\n\n @media screen and (min-width: ${breakpoints.md}) {\n width: 85%;\n padding: calc(${spacing} * ${CONTENT_PADDING_MULTIPLIER});\n }\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: 80rem;\n }\n\n ${$bannerReservesOverlap &&\n css`\n padding-block-end: 0;\n\n @media screen and (min-width: ${breakpoints.md}) {\n padding-block-end: 0;\n }\n `}\n `;\n }\n);\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nconst StyledPageContentContainer = styled(StyledContentContainer)(\n ({\n theme: {\n base: { breakpoints, spacing }\n }\n }) => css`\n @media screen and (min-width: ${breakpoints.md}) {\n padding: calc(${spacing} * ${PAGE_CONTENT_PADDING_MULTIPLIER});\n }\n `\n);\n\nStyledPageContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPageContentWrapper = styled.div<{\n enableContentOverlap?: boolean;\n $extendOverlap?: boolean;\n}>(({ theme, enableContentOverlap, $extendOverlap }) => {\n const overlapExtension = $extendOverlap ? ` - ${BANNER_OVERLAP_EXTENSION}` : '';\n const overlapMargin = `calc(${theme.base.spacing} * -${BANNER_OVERLAP_MULTIPLIER}${overlapExtension})`;\n return css`\n ${enableContentOverlap &&\n css`\n margin-block-start: ${overlapMargin};\n position: relative;\n `}\n `;\n});\n\nStyledPageContentWrapper.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': 'minmax(0, 1fr) minmax(0, 1fr)',\n 'narrow-wide': 'minmax(0, 3fr) minmax(0, 7fr)',\n 'wide-narrow': 'minmax(0, 7fr) minmax(0, 3fr)'\n};\n\nconst verticalAlignMap = {\n top: 'start',\n center: 'center',\n bottom: 'end'\n} as const;\n\nconst horizontalAlignMap = {\n left: 'start',\n center: 'center',\n right: 'end'\n} as const;\n\nconst StyledBannerContentArea = styled.div`\n text-align: start;\n`;\n\nconst StyledPageTabContent = styled.div(({ theme }) => {\n return css`\n padding-block: calc(2 * ${theme.base.spacing});\n\n ${StyledContentContainer} {\n padding: 0;\n }\n `;\n});\n\nStyledPageTabContent.defaultProps = defaultThemeProp;\n\nexport const BannerPage: ForwardRefForwardPropsComponent<BannerPageProps> = forwardRef(\n function BannerPage(\n {\n banner,\n title,\n a,\n b,\n bannerRegion,\n variant = 'two-column',\n utilities,\n className: classNameProp,\n ...restProps\n }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n\n const className = createClassName('banner-page', classNameProp, { variant });\n const gridCols = variantMap[variant];\n\n const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';\n const hasBannerRegionContent = !!bannerRegion?.length;\n\n const theme = useTheme();\n const { light: paletteLight, dark: paletteDark } = theme.base.palette;\n const isDarkBanner = (banner.variant ?? 'light') === 'dark';\n\n const bgColor = banner.backgroundColor;\n\n let effectiveBackground: string;\n if (bgColor && bgColor.trim() !== '') {\n effectiveBackground = bgColor;\n } else {\n effectiveBackground = isDarkBanner ? paletteDark : paletteLight;\n }\n\n const effectiveForeground = tryCatch(() => readableColor(effectiveBackground)) ?? paletteDark;\n const secondaryBackground = tryCatch(() =>\n transparentize(0.7, readableColor(effectiveForeground))\n );\n\n const pageContent = (\n <Grid\n container={{ gap: 2, cols: 'minmax(0, 1fr)' }}\n md={{ container: { cols: 'minmax(0, 1fr)' } }}\n lg={{ container: { cols: b ? `${gridCols}` : 'minmax(0, 1fr)' } }}\n as={StyledPageContentContainer}\n className={createClassName('banner-page-content')}\n >\n {!!a.length && <Flex container={{ direction: 'column', gap: 2 }}>{a.map(el => el)}</Flex>}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>{b.map(el => el)}</Flex>\n )}\n </Grid>\n );\n\n const pageBanner = banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n height={banner.height}\n $hasContent={hasBannerRegionContent}\n $heightValue={banner.heightValue}\n className={createClassName('banner-page-banner')}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{\n justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',\n alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',\n direction: 'column',\n gap: 1\n }}\n tintImage={banner.tintImage}\n align={banner.align}\n enableContentOverlap={effectiveOverlap}\n >\n <StyledContentContainer\n $bannerReservesOverlap={effectiveOverlap && hasBannerRegionContent}\n >\n {banner.title && (\n <StyledBannerHeading variant='h1'>\n <HTML as='span' content={banner.title} />\n </StyledBannerHeading>\n )}\n {!banner.title && (\n <Text variant='h1'>\n <VisuallyHiddenText>{title}</VisuallyHiddenText>\n </Text>\n )}\n {banner.message && (\n <StyledBannerMessage variant='primary' as='p'>\n <HTML as='span' content={banner.message} />\n </StyledBannerMessage>\n )}\n <ThemeOverride\n theme={{\n components: {\n agent: {\n background: 'transparent',\n 'foreground-color': effectiveForeground,\n 'user-message': {\n background: secondaryBackground,\n 'foreground-color': effectiveForeground\n },\n history: {\n background: secondaryBackground,\n 'foreground-color': effectiveForeground,\n item: {\n 'selected-background': transparentize(0.7, theme.base.palette.interactive)\n }\n },\n 'coach-message': {\n avatar: {\n background: `linear-gradient(135deg, ${theme.base.palette.ai} 0%, ${theme.base.palette.interactive} 100%)`,\n 'foreground-color': effectiveForeground\n }\n },\n questionnaire: {\n background: theme.base.palette['primary-background'],\n 'foreground-color': 'auto'\n },\n ai: readableHue(theme.base.palette.ai, effectiveBackground)\n },\n link: {\n color: readableHue(theme.base.palette.interactive, effectiveBackground)\n }\n }\n }}\n >\n {hasBannerRegionContent && (\n <Flex\n as={StyledBannerContentArea}\n container={{ direction: 'column', gap: 2, pad: [1, 0, 0, 0] }}\n className={createClassName('banner-page-banner-content')}\n >\n {bannerRegion.map(el => el)}\n </Flex>\n )}\n </ThemeOverride>\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex\n as={StyledBannerPage}\n container={{ gap: 2 }}\n ref={ref}\n {...restProps}\n className={className}\n >\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n $extendOverlap={!hasBannerRegionContent}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: effectiveOverlap ? 0 : 2 }}\n as={StyledBannerPage}\n className={className}\n >\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n $extendOverlap={!hasBannerRegionContent}\n className={createClassName('banner-page-content-wrapper')}\n >\n <Flex container={{ direction: 'column', pad: [undefined, 2, undefined] }}>\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StyledPageTabContent>{tab.content}</StyledPageTabContent>\n </TabPanel>\n ))}\n </Flex>\n </StyledPageContentWrapper>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage ref={ref} {...restProps} className={className}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n $extendOverlap={!hasBannerRegionContent}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </StyledBannerPage>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, transparentize } from 'polished';\nimport { forwardRef, useState, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n Grid,\n HTML,\n Text,\n tryCatch,\n readableColor,\n useBreakpoint,\n useI18n,\n Tabs,\n TabPanel,\n createClassName,\n VisuallyHiddenText,\n useTheme,\n readableHue,\n ThemeOverride\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nexport interface BannerOptions {\n /** An image url for the banner /\n backgroundImage?: string;\n /* A title for the banner /\n title?: string;\n /* A fallback background color if the background image is not provided /\n backgroundColor?: string;\n /* Text that will appear below the title /\n message?: string;\n /* The light variant will provide a white translucent filter over the background image\n * with dark text. The dark variant will provide the opposite.\n * @default 'light'\n /\n variant?: 'light' \| 'dark';\n /* Toggles the translucent filter provided by the variant\n * @default true\n /\n tintImage?: boolean;\n /* Controls how the banner fills vertical space.\n * - 'fixed': percentage-based height configured in authoring\n * - 'content': shrinks to fit content\n * - 'full': fills the visible viewport below the app shell\n * @default 'fixed'\n /\n height?: 'content' \| 'fixed' \| 'full';\n /* Banner height as a percentage of the viewport (1-100, in dvh units) when height is 'fixed'.\n * Falls back to 25 if invalid.\n * @default 25\n /\n heightValue?: number;\n /* Horizontal alignment of the banner text content.\n * @default 'center'\n /\n align?: 'left' \| 'center' \| 'right';\n /* Vertical alignment of the banner text content.\n * @default 'center'\n /\n verticalAlign?: 'top' \| 'center' \| 'bottom';\n /* When true and height is 'fixed' or 'content', page content overlaps the bottom of the banner.\n * Has no effect when height is 'full'.\n /\n enableContentOverlap?: boolean;\n}\n\nexport interface BannerPageProps extends BaseProps {\n banner: BannerOptions;\n /* Title for the page, rendered invisibly as h1 if banner title is not provided. /\n title: string;\n /* Retain the page title as a visually hidden, focusable heading. /\n hideHeading?: boolean;\n /* Content for the first column /\n a: ReactNode[];\n /* Content for the second column. If not provided the first column will stretch. /\n b?: ReactNode[];\n /* Widget content rendered within the banner region, below the heading and message. /\n bannerRegion?: ReactNode[];\n ref?: Ref<HTMLDivElement>;\n /* Variants for the sizing of the content columns. Two column will make the columns equal in size. /\n variant?: 'two-column' \| 'narrow-wide' \| 'wide-narrow';\n /* Utilities as the last column /\n utilities?: ReactNode;\n}\n\nconst BANNER_OVERLAP_MULTIPLIER = 8;\n\n// Extra pull-up of the page content when the banner has no content of its own, on top of the overlap.\nconst BANNER_OVERLAP_EXTENSION = '2.25rem';\n\nconst DEFAULT_FIXED_HEIGHT_DVH = 25;\n\nconst CONTENT_PADDING_MULTIPLIER = 2.5;\n\nconst PAGE_CONTENT_PADDING_MULTIPLIER = 2;\n\n// Clamp a 1-100 banner height (in dvh units) to a valid CSS dvh string, falling back to the default.\nconst getFixedHeightDvh = (value: number \| undefined): string => {\n const clamped =\n value !== undefined && Number.isFinite(value)\n ? Math.min(100, Math.max(1, value))\n : DEFAULT_FIXED_HEIGHT_DVH;\n return `${clamped}dvh`;\n};\n\nexport const StyledBannerPage = styled.div<{ anchorHeading?: boolean }>(\n ({ theme, anchorHeading }) => {\n return css`\n min-height: calc(100vh - var(--appshell-top-offset, 0rem));\n background: ${theme.base.palette['app-background']};\n\n ${anchorHeading &&\n css`\n position: relative;\n `}\n `;\n }\n);\n\nStyledBannerPage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContainer = styled.div<\n Pick<BannerOptions, 'backgroundImage' \| 'backgroundColor' \| 'height'> & {\n $hasContent?: boolean;\n $heightValue?: number;\n }\n>(({ theme, backgroundImage, backgroundColor, height = 'fixed', $hasContent, $heightValue }) => {\n const fixedHeight = getFixedHeightDvh($heightValue);\n const heightValue = {\n content: 'auto',\n fixed: fixedHeight,\n full: 'calc(100dvh - var(--appshell-top-offset, 0rem))'\n }[height];\n\n const backgroundStyles = css`\n ${backgroundImage &&\n css`\n background-image: url('${backgroundImage}');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n `}\n\n ${backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n `;\n\n const fixedHeightBannerWithContent = height === 'fixed' && $hasContent;\n\n let layoutStyles;\n if (fixedHeightBannerWithContent) {\n layoutStyles = css`\n min-height: ${fixedHeight};\n position: relative;\n display: flex;\n flex-direction: column;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n height: ${fixedHeight};\n z-index: 0;\n ${backgroundStyles}\n }\n\n > {\n position: relative;\n flex: 1;\n }\n `;\n } else if ($hasContent) {\n layoutStyles = css`\n ${height === 'full' &&\n css`\n min-height: ${heightValue};\n `}\n display: flex;\n flex-direction: column;\n\n > * {\n flex: 1;\n }\n ${backgroundStyles}\n `;\n } else {\n layoutStyles = css`\n height: ${heightValue};\n ${backgroundStyles}\n `;\n }\n\n return css`\n width: 100%;\n ${layoutStyles}\n --content-height-in-agent: calc(\n 100dvh - var(--appshell-top-offset, 0rem) - calc(${theme.base\n .spacing} * ${CONTENT_PADDING_MULTIPLIER})\n );\n `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeading = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 3);\n word-break: break-word;\n `\n);\n\nStyledBannerHeading.defaultProps = defaultThemeProp;\n\nconst StyledFocusablePageHeading = styled(Text)(\n ({ theme }) => css`\n &:not(:focus-visible) {\n ${hideVisually}\n }\n\n &:focus-visible {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: calc(2 * ${theme.base.spacing});\n margin: 0;\n max-width: calc(100% - 4 * ${theme.base.spacing});\n z-index: ${theme.base['z-index'].backdrop};\n box-shadow: ${theme.base.shadow.focus};\n padding: ${theme.base.spacing};\n background-color: ${theme.components.card.background};\n }\n `\n);\n\nStyledFocusablePageHeading.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 1.5);\n `\n);\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n Pick<\n BannerOptions,\n \| 'variant'\n \| 'backgroundColor'\n \| 'backgroundImage'\n \| 'tintImage'\n \| 'align'\n \| 'enableContentOverlap'\n >\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = false,\n align = 'center',\n enableContentOverlap,\n theme: {\n base: {\n palette: { light, dark },\n spacing\n }\n }\n }) => {\n let textColor = variant === 'light' ? dark : light;\n let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n if (backgroundColor && !backgroundImage) {\n textColor = tryCatch(() => readableColor(backgroundColor)) ?? dark;\n overlayColor = 'transparent';\n } else if (!backgroundColor && !backgroundImage) {\n overlayColor = 'transparent';\n textColor = dark;\n }\n return css`\n background-color: ${tintImage ? overlayColor : 'transparent'};\n width: 100%;\n height: 100%;\n text-align: ${align};\n\n ${StyledBannerMessage}, ${StyledBannerHeading} {\n color: ${textColor};\n }\n\n ${enableContentOverlap &&\n css`\n padding-block-end: calc(${spacing} * ${BANNER_OVERLAP_MULTIPLIER});\n `}\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div<{ $bannerReservesOverlap?: boolean }>(\n ({\n $bannerReservesOverlap,\n theme: {\n base: { breakpoints, spacing }\n }\n }) => {\n return css`\n padding: calc(${spacing} * 2);\n width: 100%;\n margin: 0 auto;\n\n @media screen and (min-width: ${breakpoints.md}) {\n width: 85%;\n padding: calc(${spacing} * ${CONTENT_PADDING_MULTIPLIER});\n }\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: 80rem;\n }\n\n ${$bannerReservesOverlap &&\n css`\n padding-block-end: 0;\n\n @media screen and (min-width: ${breakpoints.md}) {\n padding-block-end: 0;\n }\n `}\n `;\n }\n);\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nconst StyledPageContentContainer = styled(StyledContentContainer)(\n ({\n theme: {\n base: { breakpoints, spacing }\n }\n }) => css`\n @media screen and (min-width: ${breakpoints.md}) {\n padding: calc(${spacing} * ${PAGE_CONTENT_PADDING_MULTIPLIER});\n }\n `\n);\n\nStyledPageContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPageContentWrapper = styled.div<{\n enableContentOverlap?: boolean;\n $extendOverlap?: boolean;\n}>(({ theme, enableContentOverlap, $extendOverlap }) => {\n const overlapExtension = $extendOverlap ? ` - ${BANNER_OVERLAP_EXTENSION}` : '';\n const overlapMargin = `calc(${theme.base.spacing} * -${BANNER_OVERLAP_MULTIPLIER}${overlapExtension})`;\n return css`\n ${enableContentOverlap &&\n css`\n margin-block-start: ${overlapMargin};\n position: relative;\n `}\n `;\n});\n\nStyledPageContentWrapper.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': 'minmax(0, 1fr) minmax(0, 1fr)',\n 'narrow-wide': 'minmax(0, 3fr) minmax(0, 7fr)',\n 'wide-narrow': 'minmax(0, 7fr) minmax(0, 3fr)'\n};\n\nconst verticalAlignMap = {\n top: 'start',\n center: 'center',\n bottom: 'end'\n} as const;\n\nconst horizontalAlignMap = {\n left: 'start',\n center: 'center',\n right: 'end'\n} as const;\n\nconst StyledBannerContentArea = styled.div`\n text-align: start;\n`;\n\nconst StyledPageTabContent = styled.div(({ theme }) => {\n return css`\n padding-block: calc(2 * ${theme.base.spacing});\n\n ${StyledContentContainer} {\n padding: 0;\n }\n `;\n});\n\nStyledPageTabContent.defaultProps = defaultThemeProp;\n\nexport const BannerPage: ForwardRefForwardPropsComponent<BannerPageProps> = forwardRef(\n function BannerPage(\n {\n banner,\n title,\n hideHeading = false,\n a,\n b,\n bannerRegion,\n variant = 'two-column',\n utilities,\n className: classNameProp,\n ...restProps\n }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n\n const className = createClassName('banner-page', classNameProp, { variant });\n const gridCols = variantMap[variant];\n\n const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';\n const hasBannerRegionContent = !!bannerRegion?.length;\n\n const theme = useTheme();\n const { light: paletteLight, dark: paletteDark } = theme.base.palette;\n const isDarkBanner = (banner.variant ?? 'light') === 'dark';\n\n const bgColor = banner.backgroundColor;\n\n let effectiveBackground: string;\n if (bgColor && bgColor.trim() !== '') {\n effectiveBackground = bgColor;\n } else {\n effectiveBackground = isDarkBanner ? paletteDark : paletteLight;\n }\n\n const effectiveForeground = tryCatch(() => readableColor(effectiveBackground)) ?? paletteDark;\n const secondaryBackground = tryCatch(() =>\n transparentize(0.7, readableColor(effectiveForeground))\n );\n\n const pageContent = (\n <Grid\n container={{ gap: 2, cols: 'minmax(0, 1fr)' }}\n md={{ container: { cols: 'minmax(0, 1fr)' } }}\n lg={{ container: { cols: b ? `${gridCols}` : 'minmax(0, 1fr)' } }}\n as={StyledPageContentContainer}\n className={createClassName('banner-page-content')}\n >\n {!!a.length && <Flex container={{ direction: 'column', gap: 2 }}>{a.map(el => el)}</Flex>}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>{b.map(el => el)}</Flex>\n )}\n </Grid>\n );\n\n const pageBanner = banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n height={banner.height}\n $hasContent={hasBannerRegionContent}\n $heightValue={banner.heightValue}\n className={createClassName('banner-page-banner')}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{\n justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',\n alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',\n direction: 'column',\n gap: 1\n }}\n tintImage={banner.tintImage}\n align={banner.align}\n enableContentOverlap={effectiveOverlap}\n >\n <StyledContentContainer\n $bannerReservesOverlap={effectiveOverlap && hasBannerRegionContent}\n >\n {banner.title && (\n <StyledBannerHeading variant='h1'>\n <HTML as='span' content={banner.title} />\n </StyledBannerHeading>\n )}\n {!banner.title && !hideHeading && (\n <Text variant='h1'>\n <VisuallyHiddenText>{title}</VisuallyHiddenText>\n </Text>\n )}\n {banner.message && (\n <StyledBannerMessage variant='primary' as='p'>\n <HTML as='span' content={banner.message} />\n </StyledBannerMessage>\n )}\n <ThemeOverride\n theme={{\n components: {\n agent: {\n background: 'transparent',\n 'foreground-color': effectiveForeground,\n 'user-message': {\n background: secondaryBackground,\n 'foreground-color': effectiveForeground\n },\n history: {\n background: secondaryBackground,\n 'foreground-color': effectiveForeground,\n item: {\n 'selected-background': transparentize(0.7, theme.base.palette.interactive)\n }\n },\n 'coach-message': {\n avatar: {\n background: `linear-gradient(135deg, ${theme.base.palette.ai} 0%, ${theme.base.palette.interactive} 100%)`,\n 'foreground-color': effectiveForeground\n }\n },\n questionnaire: {\n background: theme.base.palette['primary-background'],\n 'foreground-color': 'auto'\n },\n ai: readableHue(theme.base.palette.ai, effectiveBackground)\n },\n link: {\n color: readableHue(theme.base.palette.interactive, effectiveBackground)\n }\n }\n }}\n >\n {hasBannerRegionContent && (\n <Flex\n as={StyledBannerContentArea}\n container={{ direction: 'column', gap: 2, pad: [1, 0, 0, 0] }}\n className={createClassName('banner-page-banner-content')}\n >\n {bannerRegion.map(el => el)}\n </Flex>\n )}\n </ThemeOverride>\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n );\n const hiddenPageTitle = hideHeading && title.trim() && (\n <StyledFocusablePageHeading forwardedAs='h1' variant='primary' tabIndex={0}>\n {title}\n </StyledFocusablePageHeading>\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex\n as={StyledBannerPage}\n anchorHeading={!!hiddenPageTitle}\n container={{ gap: 2 }}\n ref={ref}\n {...restProps}\n className={className}\n >\n {hiddenPageTitle}\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n $extendOverlap={!hasBannerRegionContent}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: effectiveOverlap ? 0 : 2 }}\n as={StyledBannerPage}\n anchorHeading={!!hiddenPageTitle}\n className={className}\n >\n {hiddenPageTitle}\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n $extendOverlap={!hasBannerRegionContent}\n className={createClassName('banner-page-content-wrapper')}\n >\n <Flex container={{ direction: 'column', pad: [undefined, 2, undefined] }}>\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StyledPageTabContent>{tab.content}</StyledPageTabContent>\n </TabPanel>\n ))}\n </Flex>\n </StyledPageContentWrapper>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage\n ref={ref}\n {...restProps}\n className={className}\n anchorHeading={!!hiddenPageTitle}\n >\n {hiddenPageTitle}\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n $extendOverlap={!hasBannerRegionContent}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </StyledBannerPage>\n );\n }\n);\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-wss",
-  "version": "10.0.0-build.11.0",
+  "version": "10.0.0-build.12.1",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "10.0.0-build.11.0",
-    "@pega/cosmos-react-work": "10.0.0-build.11.0",
+    "@pega/cosmos-react-core": "10.0.0-build.12.1",
+    "@pega/cosmos-react-work": "10.0.0-build.12.1",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",