npm - @pega/cosmos-react-wss - Versions diffs - 10.0.0-build.4.7 → 10.0.0-build.4.8 - Mend

@pega/cosmos-react-wss 10.0.0-build.4.7 → 10.0.0-build.4.8

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;~~AAkB7D~~,OAAO,KAAK,EAAE,YAAY,EAAO,MAAM,yBAAyB,CAAC;~~AAUjE~~,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,kBAAkB,CAAC;AAE9D,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,~~CAmP9C~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAqB7D,OAAO,KAAK,EAAE,YAAY,EAAO,MAAM,yBAAyB,CAAC;AAYjE,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,kBAAkB,CAAC;AAE9D,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAyS9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,12 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { parseToHsl } from 'polished';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useBreakpoint, Card, CardContent, Flex, Tabs, TabPanel, Text, MenuButton, useI18n, Icon, useAfterInitialEffect, getEdge, useDirection, throttle } from '@pega/cosmos-react-core';
+import { useBreakpoint, Card, CardContent, Flex, Tabs, TabPanel, Text, MenuButton, useI18n, Icon, useAfterInitialEffect, getEdge, useDirection, throttle, readableColor, tryCatch, useTheme } from '@pega/cosmos-react-core';
 import { StyledCaseHeaderPromotedAction } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
-import { StyledAside, StyledCaseHeader, StyledCaseView, StyledContentContainer, StyledContent } from './CaseView.styles';
-const CaseView = ({ caseId, heading, actions, stages, tasks, summary, details, feed, utility, promotedActions = [], ...restProps }) => {
+import { StyledAside, StyledCaseHeader, StyledCaseView, StyledCaseViewIcon, StyledContentContainer, StyledContent, resolveCaseTypeColor } from './CaseView.styles';
+const CaseView = ({ caseId, heading, icon, color, actions, stages, tasks, summary, details, feed, utility, promotedActions = [], ...restProps }) => {
     const isMediumOrAbove = useBreakpoint('md');
     const t = useI18n();
     const tabsRef = useRef(null);
+    const theme = useTheme();
+    const { iconForeground, iconBackground } = useMemo(() => {
+        const backgroundSetting = theme.components['case-view'].icon.background;
+        const foregroundSetting = theme.components['case-view'].icon.color;
+        const headerForeground = theme.components['case-view'].header['foreground-color'];
+        const headerBackground = theme.components['case-view'].header.background;
+        const resolvedIconBackground = backgroundSetting !== 'auto'
+            ? backgroundSetting
+            : tryCatch(() => {
+                const { lightness } = parseToHsl(headerBackground);
+                return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';
+            }, () => 'transparent') ?? 'transparent';
+        let resolvedIconForeground = foregroundSetting !== 'auto' ? foregroundSetting : headerForeground;
+        if (resolvedIconForeground === 'auto') {
+            const caseTypeIconColor = color && theme.base['case-type-colors'] !== 'ignored'
+                ? resolveCaseTypeColor(theme, color)
+                : resolvedIconBackground;
+            resolvedIconForeground = readableColor(caseTypeIconColor ?? resolvedIconBackground, {
+                mode: 'light',
+                level: 'AANonText'
+            });
+        }
+        return {
+            iconForeground: resolvedIconForeground,
+            iconBackground: resolvedIconBackground
+        };
+    }, [theme, color]);
     const tabs = useMemo(() => {
         if (isMediumOrAbove)
             return [];
@@ -73,13 +101,13 @@ const CaseView = ({ caseId, heading, actions, stages, tasks, summary, details, f
             resizeObserver.disconnect();
         };
     }, [contentEl, actionsContainerEl, headerEl, promotedActions, heading, wrapPromotedActions]);
-    return (_jsxs(StyledCaseView, { ...restProps, children: [_jsx(StyledCaseHeader, { computeButtonFgColor: !isMediumOrAbove || promotedActions.length > 0, children: _jsxs(Flex, { container: {
+    return (_jsxs(StyledCaseView, { ...restProps, children: [_jsx(StyledCaseHeader, { computeButtonFgColor: !isMediumOrAbove || promotedActions.length > 0, "$color": color, children: _jsxs(Flex, { container: {
                         direction: 'column',
                         justify: 'between',
                         pad: 2,
                         alignItems: 'center',
                         gap: 2
-                    }, ref: contentEl, as: StyledContentContainer, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, item: { grow: 1 }, children: [_jsx(Text, { variant: 'h1', ref: headerEl, children: heading }), (promotedActions.length > 0 || actions) && (_jsxs(Flex, { container: {
+                    }, ref: contentEl, as: StyledContentContainer, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, item: { grow: 1 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 2 }, item: { grow: 2 }, children: [icon && (_jsx(StyledCaseViewIcon, { name: icon, "$caseTypeColor": color, foreground: iconForeground, background: iconBackground })), _jsx(Text, { variant: 'h1', ref: headerEl, children: heading })] }), (promotedActions.length > 0 || actions) && (_jsxs(Flex, { container: {
                                         gap: 1
                                     }, ref: actionsContainerEl, children: [!wrapPromotedActions &&
                                             promotedActions.map(action => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => action.onClick?.(action.id, e), children: action.text }, action.id))), actions && actions.length > 0 && (_jsx(MenuButton, { icon: promotedActions.length > 0 || !isMediumOrAbove ? 'more' : undefined, iconOnly: promotedActions.length > 0 || !isMediumOrAbove, variant: 'simple', text: t('actions'), "aria-label": t('actions_for', [caseId]), menu: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n useBreakpoint,\n Card,\n CardContent,\n Flex,\n Tabs,\n TabPanel,\n Text,\n MenuButton,\n useI18n,\n Icon,\n useAfterInitialEffect,\n getEdge,\n useDirection,\n throttle\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\nimport { StyledCaseHeaderPromotedAction } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\n\nimport {\n StyledAside,\n StyledCaseHeader,\n StyledCaseView,\n StyledContentContainer,\n StyledContent\n} from './CaseView.styles';\nimport type { CaseViewProps, Region } from './CaseView.types';\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n caseId,\n heading,\n actions,\n stages,\n tasks,\n summary,\n details,\n feed,\n utility,\n promotedActions = [],\n ...restProps\n}: PropsWithoutRef<CaseViewProps>) => {\n const isMediumOrAbove = useBreakpoint('md');\n const t = useI18n();\n const tabsRef = useRef<HTMLElement>(null);\n\n const tabs = useMemo(() => {\n if (isMediumOrAbove) return [];\n const tabsArr: { name: Tab['name']; content: Region['content'] }[] = [];\n\n if (summary)\n tabsArr.push({\n name: 'Summary',\n content: summary.content\n });\n if (details) tabsArr.push({ name: details.label, content: details.content });\n if (feed) tabsArr.push({ name: 'Feed', content: feed.content });\n if (utility)\n tabsArr.push({\n name: 'Utility',\n content: utility.content\n });\n\n return tabsArr.map(tab => ({ ...tab, id: tab.name }));\n }, [isMediumOrAbove, summary, details, feed, utility]);\n\n const [currentTabId, setCurrentTabId] = useState(tabs && tabs.length > 0 ? tabs[0].id : null);\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const contentEl = useRef<HTMLDivElement>(null);\n const headerEl = useRef<HTMLDivElement>(null);\n const wrapActionsBreakpoint = useRef<number \| null>(null);\n const { ltr } = useDirection();\n\n useAfterInitialEffect(() => {\n if (tabs.length > 0) setCurrentTabId(cur => cur ?? tabs[0].id);\n }, [tabs]);\n\n useLayoutEffect(() => {\n if (\n !wrapPromotedActions &&\n contentEl.current &&\n actionsContainerEl.current &&\n headerEl.current\n ) {\n const contentStart = getEdge({\n el: contentEl.current,\n side: 'leading',\n ltr\n });\n\n const headerGroupEnd = getEdge({\n el: headerEl.current,\n side: 'trailing',\n ltr\n });\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 && 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 }, [contentEl, actionsContainerEl, headerEl, promotedActions, heading, wrapPromotedActions]);\n\n return (\n <StyledCaseView {...restProps}>\n <StyledCaseHeader computeButtonFgColor={!isMediumOrAbove \|\| promotedActions.length > 0}>\n <Flex\n container={{\n direction: 'column',\n justify: 'between',\n pad: 2,\n alignItems: 'center',\n gap: 2\n }}\n ref={contentEl}\n as={StyledContentContainer}\n >\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} item={{ grow: 1 }}>\n <Text variant='h1' ref={headerEl}>\n {heading}\n </Text>\n\n {(promotedActions.length > 0 \|\| actions) && (\n <Flex\n container={{\n gap: 1\n }}\n ref={actionsContainerEl}\n >\n {!wrapPromotedActions &&\n promotedActions.map(action => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n key={action.id}\n >\n {action.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n {actions && actions.length > 0 && (\n <MenuButton\n icon={promotedActions.length > 0 \|\| !isMediumOrAbove ? 'more' : undefined}\n iconOnly={promotedActions.length > 0 \|\| !isMediumOrAbove}\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 {wrapPromotedActions && promotedActions.length > 0 && (\n <Flex\n item={{ grow: 1 }}\n container={{\n justify: 'start',\n gap: 1,\n alignItems: 'center',\n wrap: 'wrap'\n }}\n >\n {promotedActions.map(action => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n key={action.id}\n >\n {action.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n </Flex>\n )}\n </Flex>\n </StyledCaseHeader>\n\n <Flex container={{ direction: 'column', gap: 2, pad: 2 }} as={StyledContentContainer}>\n {stages?.content}\n {tabs.length > 0 && currentTabId && (\n <>\n {tasks?.content}\n <div>\n <Tabs\n tabs={tabs}\n onTabClick={setCurrentTabId}\n currentTabId={currentTabId}\n ref={tabsRef}\n />\n\n {tabs.map(tab => (\n <TabPanel\n tabId={tab.id}\n currentTabId={currentTabId}\n key={tab.id}\n tablistRef={tabsRef}\n >\n <StyledContent>{tab.content}</StyledContent>\n </TabPanel>\n ))}\n </div>\n </>\n )}\n\n {tabs.length === 0 && (\n <Flex container={{ gap: 2 }}>\n {(utility \|\| summary) && (\n <Flex as={StyledAside} container={{ direction: 'column', gap: 2 }}>\n {summary?.content && (\n <div role='region' aria-label={summary?.label}>\n {summary?.content}\n </div>\n )}\n {utility?.content && (\n <div role='region' aria-label={utility?.label}>\n {utility?.content}\n </div>\n )}\n </Flex>\n )}\n <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n {tasks?.content && (\n <div role='region' aria-label={tasks?.label}>\n {tasks.content}\n </div>\n )}\n {details?.content && (\n <div role='region' aria-label={details?.label}>\n <Card>\n <CardContent>\n <StyledContent>{details?.content}</StyledContent>\n </CardContent>\n </Card>\n </div>\n )}\n {feed?.content && (\n <div role='region' aria-label={feed?.label}>\n {feed.content}\n </div>\n )}\n </Flex>\n </Flex>\n )}\n </Flex>\n </StyledCaseView>\n );\n};\n\nexport default CaseView;\n"]}
1	+ {"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EACL,aAAa,EACb,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,qBAAqB,EACrB,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,8BAA8B,EAAE,MAAM,iEAAiE,CAAC;AAEjH,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,sBAAsB,EACtB,aAAa,EACb,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,MAAM,QAAQ,GAAqC,CAAC,EAClD,MAAM,EACN,OAAO,EACP,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,IAAI,EACJ,OAAO,EACP,eAAe,GAAG,EAAE,EACpB,GAAG,SAAS,EACmB,EAAE,EAAE;IACnC,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACtD,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;QACxE,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACnE,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;QAClF,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;QAEzE,MAAM,sBAAsB,GAC1B,iBAAiB,KAAK,MAAM;YAC1B,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,QAAQ,CACN,GAAG,EAAE;gBACH,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;gBACnD,OAAO,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,0BAA0B,CAAC;YAC9E,CAAC,EACD,GAAG,EAAE,CAAC,aAAa,CACpB,IAAI,aAAa,CAAC;QAEzB,IAAI,sBAAsB,GACxB,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC;QAEtE,IAAI,sBAAsB,KAAK,MAAM,EAAE,CAAC;YACtC,MAAM,iBAAiB,GACrB,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,SAAS;gBACnD,CAAC,CAAC,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC;gBACpC,CAAC,CAAC,sBAAsB,CAAC;YAE7B,sBAAsB,GAAG,aAAa,CAAC,iBAAiB,IAAI,sBAAsB,EAAE;gBAClF,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,WAAW;aACnB,CAAC,CAAC;QACL,CAAC;QAED,OAAO;YACL,cAAc,EAAE,sBAAsB;YACtC,cAAc,EAAE,sBAAsB;SACvC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,eAAe;YAAE,OAAO,EAAE,CAAC;QAC/B,MAAM,OAAO,GAAwD,EAAE,CAAC;QAExE,IAAI,OAAO;YACT,OAAO,CAAC,IAAI,CAAC;gBACX,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,OAAO,CAAC,OAAO;aACzB,CAAC,CAAC;QACL,IAAI,OAAO;YAAE,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7E,IAAI,IAAI;YAAE,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAChE,IAAI,OAAO;YACT,OAAO,CAAC,IAAI,CAAC;gBACX,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,OAAO,CAAC,OAAO;aACzB,CAAC,CAAC;QAEL,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC9F,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,qBAAqB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IACE,CAAC,mBAAmB;YACpB,SAAS,CAAC,OAAO;YACjB,kBAAkB,CAAC,OAAO;YAC1B,QAAQ,CAAC,OAAO,EAChB,CAAC;YACD,MAAM,YAAY,GAAG,OAAO,CAAC;gBAC3B,EAAE,EAAE,SAAS,CAAC,OAAO;gBACrB,IAAI,EAAE,SAAS;gBACf,GAAG;aACJ,CAAC,CAAC;YAEH,MAAM,cAAc,GAAG,OAAO,CAAC;gBAC7B,EAAE,EAAE,QAAQ,CAAC,OAAO;gBACpB,IAAI,EAAE,UAAU;gBAChB,GAAG;aACJ,CAAC,CAAC;YACH,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAEvF,qBAAqB,CAAC,OAAO;gBAC3B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;oBAC7D,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACrC,CAAC;QAED,MAAM,0BAA0B,GAAG,GAAG,EAAE;YACtC,IAAI,qBAAqB,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACvD,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC;gBACrE,sBAAsB,CAAC,cAAc,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC,CAAC;QACpF,0BAA0B,EAAE,CAAC;QAE7B,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;QACnE,CAAC;QAED,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE7F,OAAO,CACL,MAAC,cAAc,OAAK,SAAS,aAC3B,KAAC,gBAAgB,IACf,oBAAoB,EAAE,CAAC,eAAe,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,YAC5D,KAAK,YAEb,MAAC,IAAI,IACH,SAAS,EAAE;wBACT,SAAS,EAAE,QAAQ;wBACnB,OAAO,EAAE,SAAS;wBAClB,GAAG,EAAE,CAAC;wBACN,UAAU,EAAE,QAAQ;wBACpB,GAAG,EAAE,CAAC;qBACP,EACD,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,sBAAsB,aAE1B,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACtF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACjE,IAAI,IAAI,CACP,KAAC,kBAAkB,IACjB,IAAI,EAAE,IAAI,oBACM,KAAK,EACrB,UAAU,EAAE,cAAc,EAC1B,UAAU,EAAE,cAAc,GAC1B,CACH,EACD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAE,QAAQ,YAC7B,OAAO,GACH,IACF,EAEN,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,CAAC,IAAI,CAC1C,MAAC,IAAI,IACH,SAAS,EAAE;wCACT,GAAG,EAAE,CAAC;qCACP,EACD,GAAG,EAAE,kBAAkB,aAEtB,CAAC,mBAAmB;4CACnB,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC5B,KAAC,8BAA8B,IAC7B,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,YAG5E,MAAM,CAAC,IAAI,IAFP,MAAM,CAAC,EAAE,CAGiB,CAClC,CAAC,EACH,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,UAAU,IACT,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACzE,QAAQ,EAAE,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,eAAe,EACxD,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,gBACN,CAAC,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,EACtC,IAAI,EAAE;gDACJ,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;oDAC5B,GAAG,MAAM;oDACT,OAAO,EAAE,MAAM,CAAC,IAAI;oDACpB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CAAC,CAAC,CAAC,SAAS;iDAC9D,CAAC,CAAC;gDACH,QAAQ,EAAE,EAAE;6CACb,GACD,CACH,IACI,CACR,IACI,EAEN,mBAAmB,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,SAAS,EAAE;gCACT,OAAO,EAAE,OAAO;gCAChB,GAAG,EAAE,CAAC;gCACN,UAAU,EAAE,QAAQ;gCACpB,IAAI,EAAE,MAAM;6BACb,YAEA,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC7B,KAAC,8BAA8B,IAC7B,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,YAG5E,MAAM,CAAC,IAAI,IAFP,MAAM,CAAC,EAAE,CAGiB,CAClC,CAAC,GACG,CACR,IACI,GACU,EAEnB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,sBAAsB,aACjF,MAAM,EAAE,OAAO,EACf,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,IAAI,CAClC,8BACG,KAAK,EAAE,OAAO,EACf,0BACE,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,OAAO,GACZ,EAED,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,YAAY,EAAE,YAAY,EAE1B,UAAU,EAAE,OAAO,YAEnB,KAAC,aAAa,cAAE,GAAG,CAAC,OAAO,GAAiB,IAHvC,GAAG,CAAC,EAAE,CAIF,CACZ,CAAC,IACE,IACL,CACJ,EAEA,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACxB,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CACvB,MAAC,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9D,OAAO,EAAE,OAAO,IAAI,CACnB,cAAK,IAAI,EAAC,QAAQ,gBAAa,OAAO,EAAE,KAAK,YAC1C,OAAO,EAAE,OAAO,GACb,CACP,EACA,OAAO,EAAE,OAAO,IAAI,CACnB,cAAK,IAAI,EAAC,QAAQ,gBAAa,OAAO,EAAE,KAAK,YAC1C,OAAO,EAAE,OAAO,GACb,CACP,IACI,CACR,EACD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAChE,KAAK,EAAE,OAAO,IAAI,CACjB,cAAK,IAAI,EAAC,QAAQ,gBAAa,KAAK,EAAE,KAAK,YACxC,KAAK,CAAC,OAAO,GACV,CACP,EACA,OAAO,EAAE,OAAO,IAAI,CACnB,cAAK,IAAI,EAAC,QAAQ,gBAAa,OAAO,EAAE,KAAK,YAC3C,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,aAAa,cAAE,OAAO,EAAE,OAAO,GAAiB,GACrC,GACT,GACH,CACP,EACA,IAAI,EAAE,OAAO,IAAI,CAChB,cAAK,IAAI,EAAC,QAAQ,gBAAa,IAAI,EAAE,KAAK,YACvC,IAAI,CAAC,OAAO,GACT,CACP,IACI,IACF,CACR,IACI,IACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { parseToHsl } from 'polished';\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n useBreakpoint,\n Card,\n CardContent,\n Flex,\n Tabs,\n TabPanel,\n Text,\n MenuButton,\n useI18n,\n Icon,\n useAfterInitialEffect,\n getEdge,\n useDirection,\n throttle,\n readableColor,\n tryCatch,\n useTheme\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\nimport { StyledCaseHeaderPromotedAction } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\n\nimport {\n StyledAside,\n StyledCaseHeader,\n StyledCaseView,\n StyledCaseViewIcon,\n StyledContentContainer,\n StyledContent,\n resolveCaseTypeColor\n} from './CaseView.styles';\nimport type { CaseViewProps, Region } from './CaseView.types';\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n caseId,\n heading,\n icon,\n color,\n actions,\n stages,\n tasks,\n summary,\n details,\n feed,\n utility,\n promotedActions = [],\n ...restProps\n}: PropsWithoutRef<CaseViewProps>) => {\n const isMediumOrAbove = useBreakpoint('md');\n const t = useI18n();\n const tabsRef = useRef<HTMLElement>(null);\n const theme = useTheme();\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 headerForeground = theme.components['case-view'].header['foreground-color'];\n const headerBackground = theme.components['case-view'].header.background;\n\n const resolvedIconBackground =\n backgroundSetting !== 'auto'\n ? backgroundSetting\n : tryCatch(\n () => {\n const { lightness } = parseToHsl(headerBackground);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n },\n () => 'transparent'\n ) ?? 'transparent';\n\n let resolvedIconForeground =\n foregroundSetting !== 'auto' ? foregroundSetting : headerForeground;\n\n if (resolvedIconForeground === 'auto') {\n const caseTypeIconColor =\n color && theme.base['case-type-colors'] !== 'ignored'\n ? resolveCaseTypeColor(theme, color)\n : resolvedIconBackground;\n\n resolvedIconForeground = readableColor(caseTypeIconColor ?? resolvedIconBackground, {\n mode: 'light',\n level: 'AANonText'\n });\n }\n\n return {\n iconForeground: resolvedIconForeground,\n iconBackground: resolvedIconBackground\n };\n }, [theme, color]);\n\n const tabs = useMemo(() => {\n if (isMediumOrAbove) return [];\n const tabsArr: { name: Tab['name']; content: Region['content'] }[] = [];\n\n if (summary)\n tabsArr.push({\n name: 'Summary',\n content: summary.content\n });\n if (details) tabsArr.push({ name: details.label, content: details.content });\n if (feed) tabsArr.push({ name: 'Feed', content: feed.content });\n if (utility)\n tabsArr.push({\n name: 'Utility',\n content: utility.content\n });\n\n return tabsArr.map(tab => ({ ...tab, id: tab.name }));\n }, [isMediumOrAbove, summary, details, feed, utility]);\n\n const [currentTabId, setCurrentTabId] = useState(tabs && tabs.length > 0 ? tabs[0].id : null);\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const contentEl = useRef<HTMLDivElement>(null);\n const headerEl = useRef<HTMLDivElement>(null);\n const wrapActionsBreakpoint = useRef<number \| null>(null);\n const { ltr } = useDirection();\n\n useAfterInitialEffect(() => {\n if (tabs.length > 0) setCurrentTabId(cur => cur ?? tabs[0].id);\n }, [tabs]);\n\n useLayoutEffect(() => {\n if (\n !wrapPromotedActions &&\n contentEl.current &&\n actionsContainerEl.current &&\n headerEl.current\n ) {\n const contentStart = getEdge({\n el: contentEl.current,\n side: 'leading',\n ltr\n });\n\n const headerGroupEnd = getEdge({\n el: headerEl.current,\n side: 'trailing',\n ltr\n });\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 && 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 }, [contentEl, actionsContainerEl, headerEl, promotedActions, heading, wrapPromotedActions]);\n\n return (\n <StyledCaseView {...restProps}>\n <StyledCaseHeader\n computeButtonFgColor={!isMediumOrAbove \|\| promotedActions.length > 0}\n $color={color}\n >\n <Flex\n container={{\n direction: 'column',\n justify: 'between',\n pad: 2,\n alignItems: 'center',\n gap: 2\n }}\n ref={contentEl}\n as={StyledContentContainer}\n >\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} item={{ grow: 1 }}>\n <Flex container={{ alignItems: 'center', gap: 2 }} item={{ grow: 2 }}>\n {icon && (\n <StyledCaseViewIcon\n name={icon}\n $caseTypeColor={color}\n foreground={iconForeground}\n background={iconBackground}\n />\n )}\n <Text variant='h1' ref={headerEl}>\n {heading}\n </Text>\n </Flex>\n\n {(promotedActions.length > 0 \|\| actions) && (\n <Flex\n container={{\n gap: 1\n }}\n ref={actionsContainerEl}\n >\n {!wrapPromotedActions &&\n promotedActions.map(action => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n key={action.id}\n >\n {action.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n {actions && actions.length > 0 && (\n <MenuButton\n icon={promotedActions.length > 0 \|\| !isMediumOrAbove ? 'more' : undefined}\n iconOnly={promotedActions.length > 0 \|\| !isMediumOrAbove}\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 {wrapPromotedActions && promotedActions.length > 0 && (\n <Flex\n item={{ grow: 1 }}\n container={{\n justify: 'start',\n gap: 1,\n alignItems: 'center',\n wrap: 'wrap'\n }}\n >\n {promotedActions.map(action => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n key={action.id}\n >\n {action.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n </Flex>\n )}\n </Flex>\n </StyledCaseHeader>\n\n <Flex container={{ direction: 'column', gap: 2, pad: 2 }} as={StyledContentContainer}>\n {stages?.content}\n {tabs.length > 0 && currentTabId && (\n <>\n {tasks?.content}\n <div>\n <Tabs\n tabs={tabs}\n onTabClick={setCurrentTabId}\n currentTabId={currentTabId}\n ref={tabsRef}\n />\n\n {tabs.map(tab => (\n <TabPanel\n tabId={tab.id}\n currentTabId={currentTabId}\n key={tab.id}\n tablistRef={tabsRef}\n >\n <StyledContent>{tab.content}</StyledContent>\n </TabPanel>\n ))}\n </div>\n </>\n )}\n\n {tabs.length === 0 && (\n <Flex container={{ gap: 2 }}>\n {(utility \|\| summary) && (\n <Flex as={StyledAside} container={{ direction: 'column', gap: 2 }}>\n {summary?.content && (\n <div role='region' aria-label={summary?.label}>\n {summary?.content}\n </div>\n )}\n {utility?.content && (\n <div role='region' aria-label={utility?.label}>\n {utility?.content}\n </div>\n )}\n </Flex>\n )}\n <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n {tasks?.content && (\n <div role='region' aria-label={tasks?.label}>\n {tasks.content}\n </div>\n )}\n {details?.content && (\n <div role='region' aria-label={details?.label}>\n <Card>\n <CardContent>\n <StyledContent>{details?.content}</StyledContent>\n </CardContent>\n </Card>\n </div>\n )}\n {feed?.content && (\n <div role='region' aria-label={feed?.label}>\n {feed.content}\n </div>\n )}\n </Flex>\n </Flex>\n )}\n </Flex>\n </StyledCaseView>\n );\n};\n\nexport default CaseView;\n"]}

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

@@ -1,7 +1,13 @@
+import type { DefaultTheme } from 'styled-components';
 export declare const StyledCaseView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const resolveCaseTypeColor: (theme: DefaultTheme, color: string) => string;
 export declare const StyledCaseHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     computeButtonFgColor: boolean;
+    $color?: string;
 }>> & string;
+export declare const StyledCaseViewIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, {
+    $caseTypeColor?: string;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledAside: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"~~AAaA~~,eAAO,MAAM,cAAc,6NAAe,CAAC;AAE3C,eAAO,MAAM,gBAAgB;0BAAyC,OAAO;~~YA2B5E~~,CAAC;AAIF,eAAO,MAAM,WAAW,6NAKtB,CAAC;AAIH,eAAO,MAAM,sBAAsB,6NAwBjC,CAAC;AAIH,eAAO,MAAM,aAAa,6NAaxB,CAAC"}
1	+ {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAkBtD,eAAO,MAAM,cAAc,6NAAe,CAAC;AAE3C,eAAO,MAAM,oBAAoB,GAAI,OAAO,YAAY,EAAE,OAAO,MAAM,KAAG,MAGzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;0BAAyC,OAAO;aAAW,MAAM;YAyC7F,CAAC;AAIF,eAAO,MAAM,kBAAkB;qBACZ,MAAM;0JAsCvB,CAAC;AAIH,eAAO,MAAM,WAAW,6NAKtB,CAAC;AAIH,eAAO,MAAM,sBAAsB,6NAwBjC,CAAC;AAIH,eAAO,MAAM,aAAa,6NAaxB,CAAC"}

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

@@ -1,30 +1,80 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, StyledButton, calculateForegroundColor, StyledCard } from '@pega/cosmos-react-core';
+import { mix } from 'polished';
+import { defaultThemeProp, Icon, StyledButton, calculateForegroundColor, isSolidColor, readableColor, resolveSupplementalColor, StyledCard } from '@pega/cosmos-react-core';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';
 import { StyledSummaryPrimaryList } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
 import { StyledStagesWrapper } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';
 export const StyledCaseView = styled.div ``;
-export const StyledCaseHeader = styled.header(({ theme, computeButtonFgColor }) => {
+export const resolveCaseTypeColor = (theme, color) => {
+    const supplementalColor = resolveSupplementalColor(theme, color);
+    return supplementalColor ?? color;
+};
+export const StyledCaseHeader = styled.header(({ theme, computeButtonFgColor, $color }) => {
     const { components: { 'case-view': { header: { background, 'foreground-color': foregroundColor } } } } = theme;
-    const color = calculateForegroundColor(background, foregroundColor);
+    const resolvedCaseTypeColor = $color ? resolveCaseTypeColor(theme, $color) : undefined;
+    const caseTypeBackground = $color &&
+        theme.base['case-type-colors'] === 'header-and-icon' &&
+        isSolidColor(theme.components.card.background)
+        ? mix(0.85, theme.components.card.background, resolveCaseTypeColor(theme, $color))
+        : undefined;
+    const headerBackground = caseTypeBackground ?? background;
+    const fgColor = resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'
+        ? readableColor(headerBackground)
+        : calculateForegroundColor(headerBackground, foregroundColor);
     return css `
       position: relative;
-      background: ${background};
+      background: ${headerBackground};
       h1 {
-        color: ${color};
+        color: ${fgColor};
       }
       ${computeButtonFgColor &&
         css `
         button {
-          color: ${color};
+          color: ${fgColor};
         }
       `}
     `;
 });
 StyledCaseHeader.defaultProps = defaultThemeProp;
+export const StyledCaseViewIcon = styled(Icon)(({ theme, $caseTypeColor }) => {
+    const caseTypeColorsEnabled = theme.base['case-type-colors'] === 'icon-only' ||
+        theme.base['case-type-colors'] === 'header-and-icon';
+    const resolvedCaseTypeColor = caseTypeColorsEnabled && $caseTypeColor !== undefined
+        ? resolveCaseTypeColor(theme, $caseTypeColor)
+        : undefined;
+    return css `
+    --icon-color: ${resolvedCaseTypeColor ?? theme.base.palette['brand-accent']};
+    --gradient-start: oklch(from var(--icon-color) calc(l - 0.3) calc(c * 1.5) h);
+    --gradient-mid: oklch(from var(--icon-color) l c h);
+    --gradient-end: oklch(from var(--icon-color) calc(l + 0.5) calc(c * 1.5) h);
+    ${theme.components['case-view'].icon.color !== 'auto' &&
+        css `
+      color: ${theme.components['case-view'].icon.color};
+    `}
+    ${theme.components['case-view'].icon.background !== 'auto' &&
+        css `
+      background: ${theme.components['case-view'].icon.background};
+    `}
+      ${theme.components['case-view'].icon.background === 'auto' &&
+        caseTypeColorsEnabled &&
+        resolvedCaseTypeColor &&
+        css `
+      background: ${resolvedCaseTypeColor};
+    `}
+      ${theme.components['case-view'].icon['box-shadow'] !== 'auto' &&
+        css `
+      box-shadow: ${theme.components['case-view'].icon['box-shadow']};
+    `}
+  `;
+});
+StyledCaseViewIcon.defaultProps = defaultThemeProp;
 export const StyledAside = styled.div(({ theme }) => {
     return css `
     min-width: ${theme.base['content-width'].sm};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,wBAAwB,EACxB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iEAAiE,CAAC;AAC3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,6DAA6D,CAAC;AAElG,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAC3C,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE;~~IAClC~~,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EACX,MAAM,EAAE,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC5D,EACF,EACF,GAAG,KAAK,CAAC;~~IACV~~,MAAM,KAAK,GAAG,~~wBAAwB~~,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;~~IAEpE~~,OAAO,GAAG,CAAA;;oBAEM,~~UAAU~~;;;~~iBAGb~~,~~KAAK~~;;;~~QAGd~~,oBAAoB;QACtB,GAAG,CAAA;;mBAEU,~~KAAK~~;;~~OAEjB~~;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;;;;mBAMO,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;;;;MAO3C,YAAY;;;;YAIN,UAAU;QACd,mBAAmB;;;;GAIxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;MACN,wBAAwB;;6BAED,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEzC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ;QAChC,GAAG,CAAA;WACI,UAAU,MAAM,gBAAgB;;;KAGtC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledButton,\n calculateForegroundColor,\n StyledCard\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\nimport { StyledSummaryPrimaryList } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\nimport { StyledStagesWrapper } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';\n\nexport const StyledCaseView = styled.div``;\n\nexport const StyledCaseHeader = styled.header<{ computeButtonFgColor: boolean }>(\n ({ theme, computeButtonFgColor }) => {\n const {\n components: {\n 'case-view': {\n header: { background, 'foreground-color': foregroundColor }\n }\n }\n } = theme;\n const color = calculateForegroundColor(~~background~~, foregroundColor);\n\n return css`\n position: relative;\n background: ${~~background~~};\n\n h1 {\n color: ${~~color~~};\n }\n\n ${computeButtonFgColor &&\n css`\n button {\n color: ${~~color~~};\n }\n `}\n `;\n }\n);\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAside = styled.div(({ theme }) => {\n return css`\n min-width: ${theme.base['content-width'].sm};\n max-width: 40%;\n `;\n});\n\nStyledAside.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n return css`\n width: 100%;\n max-width: 75rem;\n margin-inline: auto;\n\n h1 {\n min-width: ${theme.base['content-width'].xs};\n }\n\n & > div {\n width: 100%;\n }\n\n ${StyledButton} {\n margin-inline-start: 0;\n }\n\n &:has(${StyledTabs}) {\n ${StyledStagesWrapper} {\n --stages-wrapper-bottom-radius: 0;\n }\n }\n `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n return css`\n ${StyledSummaryPrimaryList} {\n grid-template-columns: auto 1fr;\n column-gap: calc(2 * ${theme.base.spacing});\n }\n ${theme.components.tabs.detached &&\n css`\n && ${StyledCard} > ${StyledCardHeader} {\n padding-inline: 0;\n }\n `}\n `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n defaultThemeProp,\n Icon,\n StyledButton,\n calculateForegroundColor,\n isSolidColor,\n readableColor,\n resolveSupplementalColor,\n StyledCard\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\nimport { StyledSummaryPrimaryList } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\nimport { StyledStagesWrapper } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';\n\nexport const StyledCaseView = styled.div``;\n\nexport const resolveCaseTypeColor = (theme: DefaultTheme, color: string): string => {\n const supplementalColor = resolveSupplementalColor(theme, color);\n return supplementalColor ?? color;\n};\n\nexport const StyledCaseHeader = styled.header<{ computeButtonFgColor: boolean; $color?: string }>(\n ({ theme, computeButtonFgColor, $color }) => {\n const {\n components: {\n 'case-view': {\n header: { background, 'foreground-color': foregroundColor }\n }\n }\n } = theme;\n\n const resolvedCaseTypeColor = $color ? resolveCaseTypeColor(theme, $color) : undefined;\n\n const caseTypeBackground =\n $color &&\n theme.base['case-type-colors'] === 'header-and-icon' &&\n isSolidColor(theme.components.card.background)\n ? mix(0.85, theme.components.card.background, resolveCaseTypeColor(theme, $color))\n : undefined;\n\n const headerBackground = caseTypeBackground ?? background;\n const fgColor =\n resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'\n ? readableColor(headerBackground)\n : calculateForegroundColor(headerBackground, foregroundColor);\n\n return css`\n position: relative;\n background: ${headerBackground};\n\n h1 {\n color: ${fgColor};\n }\n\n ${computeButtonFgColor &&\n css`\n button {\n color: ${fgColor};\n }\n `}\n `;\n }\n);\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewIcon = styled(Icon)<{\n $caseTypeColor?: string;\n}>(({ theme, $caseTypeColor }) => {\n const caseTypeColorsEnabled =\n theme.base['case-type-colors'] === 'icon-only' \|\|\n theme.base['case-type-colors'] === 'header-and-icon';\n const resolvedCaseTypeColor =\n caseTypeColorsEnabled && $caseTypeColor !== undefined\n ? resolveCaseTypeColor(theme, $caseTypeColor)\n : undefined;\n\n return css`\n --icon-color: ${resolvedCaseTypeColor ?? theme.base.palette['brand-accent']};\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\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 caseTypeColorsEnabled &&\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\nStyledCaseViewIcon.defaultProps = defaultThemeProp;\n\nexport const StyledAside = styled.div(({ theme }) => {\n return css`\n min-width: ${theme.base['content-width'].sm};\n max-width: 40%;\n `;\n});\n\nStyledAside.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n return css`\n width: 100%;\n max-width: 75rem;\n margin-inline: auto;\n\n h1 {\n min-width: ${theme.base['content-width'].xs};\n }\n\n & > div {\n width: 100%;\n }\n\n ${StyledButton} {\n margin-inline-start: 0;\n }\n\n &:has(${StyledTabs}) {\n ${StyledStagesWrapper} {\n --stages-wrapper-bottom-radius: 0;\n }\n }\n `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n return css`\n ${StyledSummaryPrimaryList} {\n grid-template-columns: auto 1fr;\n column-gap: calc(2 * ${theme.base.spacing});\n }\n ${theme.components.tabs.detached &&\n css`\n && ${StyledCard} > ${StyledCardHeader} {\n padding-inline: 0;\n }\n `}\n `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n"]}

package/lib/components/CaseView/CaseView.types.d.ts CHANGED Viewed

@@ -11,6 +11,8 @@ export interface CaseViewProps extends NoChildrenProp, BaseProps {
     heading: string;
     /** An icon to serve as a visual for the CaseView. */
     icon?: IconName;
+    /** A contextual color for the case type. */
+    color?: string;
     /** A secondary text rendered below the heading. */
     subheading?: string;
     /** Case level promoted actions available in the CaseView header. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE3F,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS;IAC9D,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}
1	+ {"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE3F,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS;IAC9D,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { NoChildrenProp, Action, BaseProps, IconName } from '@pega/cosmos-react-core';\n\nexport interface Region {\n label: string;\n content: ReactNode;\n}\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps {\n /** A unique identifier for the case instance. /\n caseId: string;\n /* A text region for the title of the CaseView. /\n heading: string;\n /* An icon to serve as a visual for the CaseView. /\n icon?: IconName;\n /* A secondary text rendered below the heading. /\n subheading?: string;\n /* Case level promoted actions available in the CaseView header. /\n promotedActions?: Action[];\n /* Case level actions available in an action menu. /\n actions?: Action[];\n /* A region to display any summary information about the CaseView. /\n summary?: Region;\n /* A region to hold a Stages component. /\n stages?: Region;\n /* A region to hold a Tasks component. /\n tasks?: Region;\n /* A region to hold the main details/tabs content. /\n details?: Region;\n /* A region to hold a Feed component. /\n feed?: Region;\n /* A region to hold a Utilities component. /\n utility?: Region;\n /* Whether to show the Pulse region. /\n showPulse?: boolean;\n /* Whether to show the Utility region. /\n showUtility?: boolean;\n /* Whether the case is in a create stage. */\n isCreateStage?: boolean;\n}\n"]}
1	+ {"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { NoChildrenProp, Action, BaseProps, IconName } from '@pega/cosmos-react-core';\n\nexport interface Region {\n label: string;\n content: ReactNode;\n}\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps {\n /** A unique identifier for the case instance. /\n caseId: string;\n /* A text region for the title of the CaseView. /\n heading: string;\n /* An icon to serve as a visual for the CaseView. /\n icon?: IconName;\n /* A contextual color for the case type. /\n color?: string;\n /* A secondary text rendered below the heading. /\n subheading?: string;\n /* Case level promoted actions available in the CaseView header. /\n promotedActions?: Action[];\n /* Case level actions available in an action menu. /\n actions?: Action[];\n /* A region to display any summary information about the CaseView. /\n summary?: Region;\n /* A region to hold a Stages component. /\n stages?: Region;\n /* A region to hold a Tasks component. /\n tasks?: Region;\n /* A region to hold the main details/tabs content. /\n details?: Region;\n /* A region to hold a Feed component. /\n feed?: Region;\n /* A region to hold a Utilities component. /\n utility?: Region;\n /* Whether to show the Pulse region. /\n showPulse?: boolean;\n /* Whether to show the Utility region. /\n showUtility?: boolean;\n /* Whether the case is in a create stage. */\n isCreateStage?: boolean;\n}\n"]}

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

@@ -28,9 +28,6 @@ export declare const StyledQuickCreateButton: import("styled-components/dist/typ
 export declare const StyledQuickCreateSecondaryText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
 }, never>> & string & Omit<ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledCaseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, {
-    displayVariant: QuickCreateVariant;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
 declare const QuickCreate: ForwardRefForwardPropsComponent<QuickCreateProps>;
 export default QuickCreate;
 //# sourceMappingURL=QuickCreate.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickCreate.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAwBpD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,eAAO,MAAM,iBAAiB;iBAAsC,OAAO;0MAazE,CAAC;AAIH,eAAO,MAAM,uBAAuB;;;oBAClB,kBAAkB;sBAChB,MAAM;~~kJAmBxB~~,CAAC;AAkDH,eAAO,MAAM,8BAA8B;;uJAIzC,CAAC;~~AAsBH~~,~~eAAO,MAAM,cAAc;oBAAkC,kBAAkB;0JAU7E,CAAC;AAIH,~~QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,~~CAsKlE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"QuickCreate.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAwBpD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,eAAO,MAAM,iBAAiB;iBAAsC,OAAO;0MAazE,CAAC;AAIH,eAAO,MAAM,uBAAuB;;;oBAClB,kBAAkB;sBAChB,MAAM;kJAkBxB,CAAC;AAkDH,eAAO,MAAM,8BAA8B;;uJAIzC,CAAC;AAoBH,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CA+KlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -37,7 +37,6 @@ export const StyledQuickCreateButton = styled(Button)(({ theme, displayVariant,
     height: 100%;
     width: 100%;
     max-height: none;
-    min-height: ${displayVariant === 'stacked' ? `calc(${theme.base.spacing} * 12.5)` : 'auto'};
     padding-block: calc(${theme.base.spacing} * 1.5);
     padding-inline: calc(${theme.base.spacing} * 2);
     border-radius: ${theme.base['border-radius']};
@@ -52,7 +51,7 @@ export const StyledQuickCreateButton = styled(Button)(({ theme, displayVariant,
 StyledQuickCreateButton.defaultProps = defaultThemeProp;
 const StyledButtonText = styled.span(({ theme }) => {
     return css `
-    ${lineClamp(2)}
+    ${lineClamp(3)}
     font-weight: ${theme.base['font-weight']['semi-bold']};
     font-size: 1em;
     color: CanvasText;
@@ -88,14 +87,12 @@ const StyledStackedRow = styled(Flex)(() => {
 StyledStackedRow.defaultProps = defaultThemeProp;
 export const StyledQuickCreateSecondaryText = styled(Text)(() => {
     return css `
-    ${lineClamp(2)}
+    ${lineClamp(3)}
   `;
 });
 StyledQuickCreateSecondaryText.defaultProps = defaultThemeProp;
 const StyledArrowSection = styled(Flex)(() => {
     return css `
-    min-width: 2rem;
     ${StyledIconShape} {
       height: 1rem;
     }
@@ -108,16 +105,6 @@ const StyledArrowSection = styled(Flex)(() => {
   `;
 });
 StyledArrowSection.defaultProps = defaultThemeProp;
-export const StyledCaseIcon = styled(Icon)(({ displayVariant }) => {
-    return css `
-    ${displayVariant === 'stacked' &&
-        css `
-      height: 3rem;
-      width: 3rem;
-    `}
-  `;
-});
-StyledCaseIcon.defaultProps = defaultThemeProp;
 const QuickCreate = forwardRef(function QuickCreate({ heading, actions, className, variant = 'inline', backgroundColor, showHeader = true, ...restProps }, ref) {
     const theme = useTheme();
     const consolidatedRef = useConsolidatedRef(ref);
@@ -137,14 +124,18 @@ const QuickCreate = forwardRef(function QuickCreate({ heading, actions, classNam
         return supplementalColorsList[idx % supplementalColorsList.length];
     };
     const getIconComp = (iconName, iconBackground) => {
-        return iconBackground !== undefined ? (_jsx(StyledCaseIcon, { name: iconName, foreground: readableColor(iconBackground, {
+        return iconBackground !== undefined ? (_jsx(Icon, { name: iconName, foreground: readableColor(iconBackground, {
                 mode: 'light',
                 level: 'AANonText'
-            }), background: iconBackground, displayVariant: displayVariant })) : (_jsx(StyledCaseIcon, { size: 'm', name: iconName, displayVariant: displayVariant }));
+            }), background: iconBackground })) : (_jsx(Icon, { size: 'm', name: iconName }));
     };
     const getGridCols = () => {
-        if (isMediumOrAbove)
-            return 'repeat(4, minmax(0, 1fr))';
+        if (isMediumOrAbove) {
+            if (actions.length === 1)
+                return 'repeat(2, minmax(0, 1fr))';
+            const cols = Math.min(Math.max(actions.length, 1), 4);
+            return `repeat(${cols}, minmax(0, 1fr))`;
+        }
         if (isSmallOrAbove)
             return 'repeat(2, minmax(0, 1fr))';
         return `repeat(auto-fill, minmax(min(calc(${theme.base.spacing} * 30), 100%), 1fr))`;
@@ -155,7 +146,10 @@ const QuickCreate = forwardRef(function QuickCreate({ heading, actions, classNam
                         ...(showHeader ? {} : { justifyContent: 'center' })
                     }, children: actions.map(({ label, icon, description, color, onClick }, idx) => {
                         const iconBackground = getActionColor(color, idx);
-                        return (_jsx("li", { children: _jsx(StyledQuickCreateButton, { onClick: onClick, variant: 'secondary', displayVariant: displayVariant, backgroundColor: backgroundColor, children: isStacked ? (_jsxs(StyledQuickCreateContainer, { variant: displayVariant, container: { gap: 0.75, alignItems: 'center', direction: 'column' }, children: [icon && (_jsx(StyledStackedRow, { container: true, children: _jsx(StyledIconSection, { variant: displayVariant, container: true, children: getIconComp(icon, iconBackground) }) })), _jsx(StyledStackedRow, { container: true, children: _jsx(StyledButtonText, { as: 'span', children: label }) }), description && (_jsx(StyledStackedRow, { container: true, children: _jsx(StyledQuickCreateSecondaryText, { variant: 'secondary', forwardedAs: 'p', children: description }) }))] })) : (_jsxs(StyledQuickCreateContainer, { variant: displayVariant, container: { gap: 0, alignItems: 'center' }, children: [_jsxs(Flex, { container: { gap: 1.5, alignItems: 'center' }, item: { grow: 1 }, children: [icon && (_jsx(StyledIconSection, { variant: displayVariant, container: true, children: getIconComp(icon, iconBackground) })), _jsxs(StyledMiddleSection, { container: {
+                        return (_jsx("li", { children: _jsx(StyledQuickCreateButton, { onClick: onClick, variant: 'secondary', displayVariant: displayVariant, backgroundColor: backgroundColor, children: isStacked ? (_jsxs(StyledQuickCreateContainer, { variant: displayVariant, container: { gap: 0.75, alignItems: 'center', direction: 'column' }, children: [icon && (_jsx(StyledStackedRow, { container: true, children: _jsx(StyledIconSection, { variant: displayVariant, container: true, children: getIconComp(icon, iconBackground) }) })), _jsx(StyledStackedRow, { container: true, children: _jsx(StyledButtonText, { as: 'span', children: label }) }), description && (_jsx(StyledStackedRow, { container: true, children: _jsx(StyledQuickCreateSecondaryText, { variant: 'secondary', forwardedAs: 'p', children: description }) }))] })) : (_jsxs(StyledQuickCreateContainer, { variant: displayVariant, container: { gap: 0, alignItems: 'center' }, children: [_jsxs(Flex, { container: {
+                                                gap: 1.5,
+                                                alignItems: description ? 'start' : 'center'
+                                            }, item: { grow: 1 }, children: [icon && (_jsx(StyledIconSection, { variant: displayVariant, container: true, children: getIconComp(icon, iconBackground) })), _jsxs(StyledMiddleSection, { container: {
                                                         direction: 'column',
                                                         gap: 0.25,
                                                         alignItems: 'start',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n defaultThemeProp,\n Flex,\n Grid,\n StyledIcon,\n Icon,\n Text,\n VisuallyHiddenText,\n useBreakpoint,\n useTheme,\n supplementalColors,\n resolveSupplementalColor,\n isSolidColor,\n readableColor,\n useConsolidatedRef,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledIconShape } from '@pega/cosmos-react-core/lib/components/Icon/Icon';\n\nexport interface QuickCreateAction {\n label: string;\n icon?: string;\n description?: string;\n color?: string;\n onClick: MouseEventHandler;\n}\n\nexport type QuickCreateVariant = 'inline' \| 'stacked';\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n heading: string;\n actions: QuickCreateAction[];\n variant?: QuickCreateVariant;\n showHeader?: boolean;\n backgroundColor?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledQuickCreateCard = styled(Card)<{ showHeader?: boolean }>(({ theme, showHeader }) => {\n const background = showHeader ? theme.components.card.background : 'transparent';\n\n return css`\n background: ${background};\n\n ${!showHeader &&\n css`\n padding: 0;\n `}\n `;\n});\n\nStyledQuickCreateCard.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreate = styled(CardContent)<{ showHeader?: boolean }>(({ showHeader }) => {\n return css`\n ${!showHeader &&\n css`\n &&&& {\n padding: 0;\n }\n `}\n\n ul {\n list-style: none;\n }\n `;\n});\n\nStyledQuickCreate.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateButton = styled(Button)<{\n displayVariant: QuickCreateVariant;\n backgroundColor?: string;\n}>(({ theme, displayVariant, backgroundColor }) => {\n const background = backgroundColor \|\| theme.base.palette['primary-background'];\n\n return css`\n height: 100%;\n width: 100%;\n max-height: none;\n min-height: ${displayVariant === 'stacked' ? `calc(${theme.base.spacing} * 12.5)` : 'auto'};\n padding-block: calc(${theme.base.spacing} * 1.5);\n padding-inline: calc(${theme.base.spacing} * 2);\n border-radius: ${theme.base['border-radius']};\n border-color: ${theme.base.palette['border-line']};\n justify-content: ${displayVariant === 'stacked' ? 'center' : 'start'};\n text-align: ${displayVariant === 'stacked' ? 'center' : 'start'};\n white-space: break-spaces;\n word-break: break-word;\n background: ${background};\n `;\n});\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span(({ theme }) => {\n return css`\n ${lineClamp(2)}\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: 1em;\n color: CanvasText;\n `;\n});\n\nStyledButtonText.defaultProps = defaultThemeProp;\n\nconst StyledQuickCreateContainer = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n width: 100%;\n\n ${variant === 'stacked' &&\n css`\n text-align: center;\n `}\n `;\n});\n\nStyledQuickCreateContainer.defaultProps = defaultThemeProp;\n\nconst StyledIconSection = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n min-width: ${variant === 'stacked' ? 'auto' : '2rem'};\n stroke-width: 50%;\n `;\n});\n\nStyledIconSection.defaultProps = defaultThemeProp;\n\nconst StyledMiddleSection = styled(Flex)``;\n\nStyledMiddleSection.defaultProps = defaultThemeProp;\n\nconst StyledStackedRow = styled(Flex)(() => {\n return css`\n width: 100%;\n justify-content: center;\n `;\n});\n\nStyledStackedRow.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateSecondaryText = styled(Text)(() => {\n return css`\n ${lineClamp(2)}\n `;\n});\n\nStyledQuickCreateSecondaryText.defaultProps = defaultThemeProp;\n\nconst StyledArrowSection = styled(Flex)(() => {\n return css`\n min-width: 2rem;\n\n ${StyledIconShape} {\n height: 1rem;\n }\n\n ${StyledIcon} {\n fill: CanvasText;\n height: 100%;\n align-self: flex-end;\n }\n `;\n});\n\nStyledArrowSection.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIcon = styled(Icon)<{ displayVariant: QuickCreateVariant }>(({\n displayVariant\n}) => {\n return css`\n ${displayVariant === 'stacked' &&\n css`\n height: 3rem;\n width: 3rem;\n `}\n `;\n});\n\nStyledCaseIcon.defaultProps = defaultThemeProp;\n\nconst QuickCreate: ForwardRefForwardPropsComponent<QuickCreateProps> = forwardRef(\n function QuickCreate(\n {\n heading,\n actions,\n className,\n variant = 'inline',\n backgroundColor,\n showHeader = true,\n ...restProps\n }: QuickCreateProps,\n ref: QuickCreateProps['ref']\n ) {\n const theme = useTheme();\n const consolidatedRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: consolidatedRef });\n const isMediumOrAbove = useBreakpoint('md', { breakpointRef: consolidatedRef });\n\n const displayVariant: QuickCreateVariant = variant === 'stacked' ? 'stacked' : 'inline';\n const isStacked = displayVariant === 'stacked';\n\n const supplementalColorsList = supplementalColors(theme);\n\n const getActionColor = (actionColor: string \| undefined, idx: number): string \| undefined => {\n const isColorIgnored = theme.base['case-type-colors'] === 'ignored';\n\n if (isColorIgnored) return undefined;\n\n if (actionColor !== undefined) {\n const supplementalColor = resolveSupplementalColor(theme, actionColor);\n\n return supplementalColor ?? (isSolidColor(actionColor) ? actionColor : undefined);\n }\n\n return supplementalColorsList[idx % supplementalColorsList.length];\n };\n\n const getIconComp = (iconName: string, iconBackground: string \| undefined) => {\n return iconBackground !== undefined ? (\n <StyledCaseIcon\n name={iconName}\n foreground={readableColor(iconBackground, {\n mode: 'light',\n level: 'AANonText'\n })}\n background={iconBackground}\n displayVariant={displayVariant}\n />\n ) : (\n <StyledCaseIcon size='m' name={iconName} displayVariant={displayVariant} />\n );\n };\n\n const getGridCols = () => {\n if (isMediumOrAbove) return 'repeat(4, minmax(0, 1fr))';\n if (isSmallOrAbove) return 'repeat(2, minmax(0, 1fr))';\n\n return `repeat(auto-fill, minmax(min(calc(${theme.base.spacing} * 30), 100%), 1fr))`;\n };\n\n return (\n <StyledQuickCreateCard\n {...restProps}\n ref={consolidatedRef}\n showHeader={showHeader}\n className={createClassName('quick-create', className)}\n >\n {showHeader ? (\n <CardHeader>\n <Text variant='h2'>{heading}</Text>\n </CardHeader>\n ) : (\n <VisuallyHiddenText as='h2'>{heading}</VisuallyHiddenText>\n )}\n\n <StyledQuickCreate showHeader={showHeader}>\n <Grid\n as='ul'\n container={{\n gap: 1.5,\n cols: getGridCols(),\n ...(showHeader ? {} : { justifyContent: 'center' })\n }}\n >\n {actions.map(({ label, icon, description, color, onClick }, idx) => {\n const iconBackground = getActionColor(color, idx);\n\n return (\n <li key={label}>\n <StyledQuickCreateButton\n onClick={onClick}\n variant='secondary'\n displayVariant={displayVariant}\n backgroundColor={backgroundColor}\n >\n {isStacked ? (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0.75, alignItems: 'center', direction: 'column' }}\n >\n {icon && (\n <StyledStackedRow container>\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n </StyledStackedRow>\n )}\n\n <StyledStackedRow container>\n <StyledButtonText as='span'>{label}</StyledButtonText>\n </StyledStackedRow>\n\n {description && (\n <StyledStackedRow container>\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n </StyledStackedRow>\n )}\n </StyledQuickCreateContainer>\n ) : (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0, alignItems: 'center' }}\n >\n <Flex container={{ gap: 1.5, alignItems: 'center' }} item={{ grow: 1 }}>\n {icon && (\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n )}\n\n <StyledMiddleSection\n container={{\n direction: 'column',\n gap: 0.25,\n alignItems: 'start',\n justify: 'center'\n }}\n item={{ grow: 1 }}\n >\n <StyledButtonText as='span'>{label}</StyledButtonText>\n\n {description && (\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n )}\n </StyledMiddleSection>\n </Flex>\n\n <StyledArrowSection container>\n <Icon name='arrow-right' size='s' />\n </StyledArrowSection>\n </StyledQuickCreateContainer>\n )}\n </StyledQuickCreateButton>\n </li>\n );\n })}\n </Grid>\n </StyledQuickCreate>\n </StyledQuickCreateCard>\n );\n }\n);\n\nexport default QuickCreate;\n"]}
1	+ {"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n defaultThemeProp,\n Flex,\n Grid,\n StyledIcon,\n Icon,\n Text,\n VisuallyHiddenText,\n useBreakpoint,\n useTheme,\n supplementalColors,\n resolveSupplementalColor,\n isSolidColor,\n readableColor,\n useConsolidatedRef,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledIconShape } from '@pega/cosmos-react-core/lib/components/Icon/Icon';\n\nexport interface QuickCreateAction {\n label: string;\n icon?: string;\n description?: string;\n color?: string;\n onClick: MouseEventHandler;\n}\n\nexport type QuickCreateVariant = 'inline' \| 'stacked';\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n heading: string;\n actions: QuickCreateAction[];\n variant?: QuickCreateVariant;\n showHeader?: boolean;\n backgroundColor?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledQuickCreateCard = styled(Card)<{ showHeader?: boolean }>(({ theme, showHeader }) => {\n const background = showHeader ? theme.components.card.background : 'transparent';\n\n return css`\n background: ${background};\n\n ${!showHeader &&\n css`\n padding: 0;\n `}\n `;\n});\n\nStyledQuickCreateCard.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreate = styled(CardContent)<{ showHeader?: boolean }>(({ showHeader }) => {\n return css`\n ${!showHeader &&\n css`\n &&&& {\n padding: 0;\n }\n `}\n\n ul {\n list-style: none;\n }\n `;\n});\n\nStyledQuickCreate.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateButton = styled(Button)<{\n displayVariant: QuickCreateVariant;\n backgroundColor?: string;\n}>(({ theme, displayVariant, backgroundColor }) => {\n const background = backgroundColor \|\| theme.base.palette['primary-background'];\n\n return css`\n height: 100%;\n width: 100%;\n max-height: none;\n padding-block: calc(${theme.base.spacing} * 1.5);\n padding-inline: calc(${theme.base.spacing} * 2);\n border-radius: ${theme.base['border-radius']};\n border-color: ${theme.base.palette['border-line']};\n justify-content: ${displayVariant === 'stacked' ? 'center' : 'start'};\n text-align: ${displayVariant === 'stacked' ? 'center' : 'start'};\n white-space: break-spaces;\n word-break: break-word;\n background: ${background};\n `;\n});\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span(({ theme }) => {\n return css`\n ${lineClamp(3)}\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: 1em;\n color: CanvasText;\n `;\n});\n\nStyledButtonText.defaultProps = defaultThemeProp;\n\nconst StyledQuickCreateContainer = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n width: 100%;\n\n ${variant === 'stacked' &&\n css`\n text-align: center;\n `}\n `;\n});\n\nStyledQuickCreateContainer.defaultProps = defaultThemeProp;\n\nconst StyledIconSection = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n min-width: ${variant === 'stacked' ? 'auto' : '2rem'};\n stroke-width: 50%;\n `;\n});\n\nStyledIconSection.defaultProps = defaultThemeProp;\n\nconst StyledMiddleSection = styled(Flex)``;\n\nStyledMiddleSection.defaultProps = defaultThemeProp;\n\nconst StyledStackedRow = styled(Flex)(() => {\n return css`\n width: 100%;\n justify-content: center;\n `;\n});\n\nStyledStackedRow.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateSecondaryText = styled(Text)(() => {\n return css`\n ${lineClamp(3)}\n `;\n});\n\nStyledQuickCreateSecondaryText.defaultProps = defaultThemeProp;\n\nconst StyledArrowSection = styled(Flex)(() => {\n return css`\n ${StyledIconShape} {\n height: 1rem;\n }\n\n ${StyledIcon} {\n fill: CanvasText;\n height: 100%;\n align-self: flex-end;\n }\n `;\n});\n\nStyledArrowSection.defaultProps = defaultThemeProp;\n\nconst QuickCreate: ForwardRefForwardPropsComponent<QuickCreateProps> = forwardRef(\n function QuickCreate(\n {\n heading,\n actions,\n className,\n variant = 'inline',\n backgroundColor,\n showHeader = true,\n ...restProps\n }: QuickCreateProps,\n ref: QuickCreateProps['ref']\n ) {\n const theme = useTheme();\n const consolidatedRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: consolidatedRef });\n const isMediumOrAbove = useBreakpoint('md', { breakpointRef: consolidatedRef });\n\n const displayVariant: QuickCreateVariant = variant === 'stacked' ? 'stacked' : 'inline';\n const isStacked = displayVariant === 'stacked';\n\n const supplementalColorsList = supplementalColors(theme);\n\n const getActionColor = (actionColor: string \| undefined, idx: number): string \| undefined => {\n const isColorIgnored = theme.base['case-type-colors'] === 'ignored';\n\n if (isColorIgnored) return undefined;\n\n if (actionColor !== undefined) {\n const supplementalColor = resolveSupplementalColor(theme, actionColor);\n\n return supplementalColor ?? (isSolidColor(actionColor) ? actionColor : undefined);\n }\n\n return supplementalColorsList[idx % supplementalColorsList.length];\n };\n\n const getIconComp = (iconName: string, iconBackground: string \| undefined) => {\n return iconBackground !== undefined ? (\n <Icon\n name={iconName}\n foreground={readableColor(iconBackground, {\n mode: 'light',\n level: 'AANonText'\n })}\n background={iconBackground}\n />\n ) : (\n <Icon size='m' name={iconName} />\n );\n };\n\n const getGridCols = () => {\n if (isMediumOrAbove) {\n if (actions.length === 1) return 'repeat(2, minmax(0, 1fr))';\n const cols = Math.min(Math.max(actions.length, 1), 4);\n return `repeat(${cols}, minmax(0, 1fr))`;\n }\n if (isSmallOrAbove) return 'repeat(2, minmax(0, 1fr))';\n\n return `repeat(auto-fill, minmax(min(calc(${theme.base.spacing} * 30), 100%), 1fr))`;\n };\n\n return (\n <StyledQuickCreateCard\n {...restProps}\n ref={consolidatedRef}\n showHeader={showHeader}\n className={createClassName('quick-create', className)}\n >\n {showHeader ? (\n <CardHeader>\n <Text variant='h2'>{heading}</Text>\n </CardHeader>\n ) : (\n <VisuallyHiddenText as='h2'>{heading}</VisuallyHiddenText>\n )}\n\n <StyledQuickCreate showHeader={showHeader}>\n <Grid\n as='ul'\n container={{\n gap: 1.5,\n cols: getGridCols(),\n ...(showHeader ? {} : { justifyContent: 'center' })\n }}\n >\n {actions.map(({ label, icon, description, color, onClick }, idx) => {\n const iconBackground = getActionColor(color, idx);\n\n return (\n <li key={label}>\n <StyledQuickCreateButton\n onClick={onClick}\n variant='secondary'\n displayVariant={displayVariant}\n backgroundColor={backgroundColor}\n >\n {isStacked ? (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0.75, alignItems: 'center', direction: 'column' }}\n >\n {icon && (\n <StyledStackedRow container>\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n </StyledStackedRow>\n )}\n\n <StyledStackedRow container>\n <StyledButtonText as='span'>{label}</StyledButtonText>\n </StyledStackedRow>\n\n {description && (\n <StyledStackedRow container>\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n </StyledStackedRow>\n )}\n </StyledQuickCreateContainer>\n ) : (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0, alignItems: 'center' }}\n >\n <Flex\n container={{\n gap: 1.5,\n alignItems: description ? 'start' : 'center'\n }}\n item={{ grow: 1 }}\n >\n {icon && (\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n )}\n\n <StyledMiddleSection\n container={{\n direction: 'column',\n gap: 0.25,\n alignItems: 'start',\n justify: 'center'\n }}\n item={{ grow: 1 }}\n >\n <StyledButtonText as='span'>{label}</StyledButtonText>\n\n {description && (\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n )}\n </StyledMiddleSection>\n </Flex>\n\n <StyledArrowSection container>\n <Icon name='arrow-right' size='s' />\n </StyledArrowSection>\n </StyledQuickCreateContainer>\n )}\n </StyledQuickCreateButton>\n </li>\n );\n })}\n </Grid>\n </StyledQuickCreate>\n </StyledQuickCreateCard>\n );\n }\n);\n\nexport default QuickCreate;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-wss",
-  "version": "10.0.0-build.4.7",
+  "version": "10.0.0-build.4.8",
   "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.4.7",
-    "@pega/cosmos-react-work": "10.0.0-build.4.7",
+    "@pega/cosmos-react-core": "10.0.0-build.4.8",
+    "@pega/cosmos-react-work": "10.0.0-build.4.8",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",