npm - @pega/cosmos-react-work - Versions diffs - 9.0.0-build.9.9 → 9.0.1 - Mend

@pega/cosmos-react-work 9.0.0-build.9.9 → 9.0.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 (276) hide show

package/lib/components/HierarchicalAssignments/nodeItems/CaseDetail.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseDetail.js","sourceRoot":"","sources":["../../../../src/components/HierarchicalAssignments/nodeItems/CaseDetail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, useCallback, useMemo } from 'react';\nimport type { KeyboardEvent, MouseEvent, ReactNode, FocusEvent } from 'react';\n\nimport {\n Flex,\n Icon,\n Text,\n Link,\n Status,\n withTestIds,\n useTestIds,\n cap,\n useDirection,\n VisuallyHiddenText,\n useI18n\n} from '@pega/cosmos-react-core';\n\nimport type { CaseListProps } from '../HierarchicalAssignments.types';\nimport { getCaseTestIds } from '../HierarchicalAssignments.test-ids';\nimport {\n StyledExpandButton,\n StyledHeaderContainer,\n StyledLinkContainer,\n StyledMetaListContainer,\n StyledMetaIdStatusContainer,\n StyledSummaryItem,\n StyledNode\n} from '../Assignments.styles';\nimport AssignmentTreeContext from '../AssignmentContext';\nimport { restrictDepth } from '../helpers';\n\nimport useNodeFocus from './useNodeFocus';\nimport { PauseTextNode } from './AssignmentItem';\n\ninterface CaseDetailsProps extends Omit<CaseListProps, 'children'> {\n /** Property defines the node's depth level /\n depth: number;\n /* Boolean that refers the current case has children or not /\n hasChildren: boolean;\n /* Callback to trigger on case Expand button /\n onExpandButtonClickHandler?: () => void;\n /* Boolean that refers current case expanded state /\n open: boolean;\n /* Renders of Children of Case, List of Assignments or Child Case /\n children?: ReactNode;\n /* total the number of items in the current set of treeitems /\n setSize?: number;\n /* the position of the element within the whole set of treeitems */\n posInset?: number;\n}\n\nconst CaseDetail = ({\n hasChildren,\n depth,\n id,\n open,\n onExpandButtonClickHandler,\n link,\n name,\n status,\n children,\n setSize,\n posInset\n}: CaseDetailsProps) => {\n const { variant, text } = status \|\| {};\n const {\n firstNodeId,\n focusedNodeId,\n lastNodeId,\n changeFocusHandler,\n caseIdExpandList,\n isMediumOrAbove,\n parentRef,\n nodeInternalFocus,\n setNodeInternalFocusHandler,\n reverseTabFlow\n } = useContext(AssignmentTreeContext);\n const testIds = useTestIds('', getCaseTestIds);\n const { start, end } = useDirection();\n const caseHeaderRef = useRef<HTMLLIElement>(null);\n const indent = depth !== 1 && !hasChildren;\n\n const childElementsTabIndex = nodeInternalFocus ? 0 : -1;\n const { parentNodeTabIndex, lastNode, escapeNodeHandler } = useNodeFocus(\n id,\n caseHeaderRef,\n parentRef,\n {\n firstNodeId,\n focusedNodeId,\n lastNodeId,\n nodeInternalFocus,\n reverseTabFlow\n }\n );\n\n const t = useI18n();\n\n const navigationHandler = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n if (['ArrowUp', 'ArrowDown'].includes(e.key)) e.preventDefault();\n switch (e.key) {\n case 'ArrowUp':\n changeFocusHandler(id, 'up', caseIdExpandList);\n break;\n case 'ArrowDown':\n changeFocusHandler(id, 'down', caseIdExpandList);\n break;\n case `Arrow${cap(start)}`:\n if (open) {\n onExpandButtonClickHandler?.();\n } else {\n changeFocusHandler(id, 'left', caseIdExpandList);\n }\n break;\n case `Arrow${cap(end)}`:\n if (hasChildren) {\n if (!open) {\n onExpandButtonClickHandler?.();\n } else {\n changeFocusHandler(id, 'right', caseIdExpandList);\n }\n }\n break;\n case 'Home':\n if (firstNodeId) changeFocusHandler(firstNodeId);\n break;\n case 'End':\n if (lastNodeId) changeFocusHandler(lastNodeId);\n break;\n default:\n }\n },\n [id, firstNodeId, lastNodeId, open, hasChildren, caseIdExpandList]\n );\n\n const caseDescriptionContainer = useMemo(\n () => (\n <PauseTextNode>\n <StyledLinkContainer isMediumOrAbove={isMediumOrAbove} key={`${id}-caseName`}>\n <Link\n data-testid={testIds.label}\n href={link.href}\n previewable\n onPreview={link.onPreview}\n target={link?.target}\n icon\n tabIndex={childElementsTabIndex}\n onClick={(e: MouseEvent<HTMLAnchorElement \| HTMLButtonElement>) => {\n link.onClick?.(e, id);\n }}\n >\n {!hasChildren && (\n <VisuallyHiddenText>{t('case_announcement_label')}</VisuallyHiddenText>\n )}\n {name}\n </Link>\n </StyledLinkContainer>\n </PauseTextNode>\n ),\n [isMediumOrAbove, name, id, link, testIds, childElementsTabIndex, hasChildren]\n );\n\n const caseIdStatusContainer = useMemo(\n () => (\n <StyledMetaIdStatusContainer\n key={`${id}-id-status`}\n wrapItems={false}\n items={[\n <PauseTextNode key={`${id}-id`}>\n <Text data-testid={testIds.id} variant='secondary'>\n {id}\n </Text>\n </PauseTextNode>,\n <PauseTextNode key={`${id}-status`}>\n <Status data-testid={testIds.status} variant={variant ?? 'info'}>\n {text}\n </Status>\n </PauseTextNode>\n ]}\n />\n ),\n [id, variant, text, testIds]\n );\n\n const metaList = useMemo(\n () => [caseDescriptionContainer, caseIdStatusContainer],\n [caseDescriptionContainer, caseIdStatusContainer]\n );\n\n return (\n <StyledNode\n data-testid={testIds.root}\n role='treeitem'\n aria-selected={parentNodeTabIndex === 0}\n aria-expanded={hasChildren && !nodeInternalFocus ? open : undefined}\n tabIndex={nodeInternalFocus ? -1 : parentNodeTabIndex}\n aria-labelledby={id}\n aria-owns={hasChildren ? `${id}-subtree` : undefined}\n ref={caseHeaderRef}\n onKeyDown={(e: KeyboardEvent<HTMLElement>) => {\n e.stopPropagation();\n if (e.key === 'Enter' && !nodeInternalFocus) {\n e.preventDefault();\n setNodeInternalFocusHandler?.(true);\n reverseTabFlow.current = false;\n return;\n }\n\n if (e.key === 'Escape' && nodeInternalFocus) {\n changeFocusHandler(id);\n setNodeInternalFocusHandler?.(false);\n escapeNodeHandler();\n reverseTabFlow.current = false;\n return;\n }\n\n if (e.shiftKey && e.key === 'Tab' && nodeInternalFocus) {\n reverseTabFlow.current = true;\n } else if (e.key === 'Tab' && nodeInternalFocus) {\n reverseTabFlow.current = false;\n }\n\n if (!nodeInternalFocus) {\n navigationHandler(e);\n }\n }}\n onClick={(e: MouseEvent<HTMLLIElement>) => {\n e.stopPropagation();\n reverseTabFlow.current = false;\n changeFocusHandler(id);\n }}\n isFocus={nodeInternalFocus ? false : parentNodeTabIndex === 0}\n lastNode={lastNode}\n isChild\n depth={restrictDepth(depth)}\n onFocus={(e: FocusEvent<HTMLElement>) => {\n e.stopPropagation();\n changeFocusHandler(id);\n }}\n aria-level={depth}\n aria-setsize={setSize}\n aria-posinset={posInset}\n >\n <Flex\n as={StyledHeaderContainer}\n container={{ alignItems: 'center' }}\n depth={restrictDepth(depth)}\n id={id}\n hasChildren={hasChildren}\n >\n {hasChildren && (\n <StyledExpandButton\n data-testid={testIds.toggleAction}\n type='button'\n variant='text'\n aria-expanded={open}\n onClick={() => onExpandButtonClickHandler?.()}\n tabIndex={childElementsTabIndex}\n aria-label={t('case_announcement_label', [nodeInternalFocus ? name : ''])}\n isCase\n >\n <Icon name='caret-right' />\n </StyledExpandButton>\n )}\n {isMediumOrAbove ? (\n <StyledMetaListContainer\n role='none'\n isMediumOrAbove={isMediumOrAbove}\n indent={indent}\n wrapItems\n items={metaList}\n />\n ) : (\n <StyledSummaryItem indent={indent} primary={metaList[0]} secondary={metaList[1]} />\n )}\n </Flex>\n {children \|\| null}\n </StyledNode>\n );\n};\n\nexport default withTestIds(CaseDetail, getCaseTestIds);\n"]}
1	+ {"version":3,"file":"CaseDetail.js","sourceRoot":"","sources":["../../../../src/components/HierarchicalAssignments/nodeItems/CaseDetail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, useCallback, useMemo } from 'react';\nimport type { KeyboardEvent, MouseEvent, ReactNode, FocusEvent } from 'react';\n\nimport {\n Flex,\n Icon,\n Text,\n Link,\n Status,\n withTestIds,\n useTestIds,\n cap,\n useDirection,\n VisuallyHiddenText,\n useI18n\n} from '@pega/cosmos-react-core';\n\nimport type { CaseListProps } from '../HierarchicalAssignments.types';\nimport { getCaseTestIds } from '../HierarchicalAssignments.test-ids';\nimport {\n StyledExpandButton,\n StyledHeaderContainer,\n StyledLinkContainer,\n StyledMetaListContainer,\n StyledMetaIdStatusContainer,\n StyledSummaryItem,\n StyledNode\n} from '../Assignments.styles';\nimport AssignmentTreeContext from '../AssignmentContext';\nimport { restrictDepth } from '../helpers';\n\nimport useNodeFocus from './useNodeFocus';\nimport { PauseTextNode } from './AssignmentItem';\n\ninterface CaseDetailsProps extends Omit<CaseListProps, 'children'> {\n /** Property defines the node's depth level /\n depth: number;\n /* Boolean that refers the current case has children or not /\n hasChildren: boolean;\n /* Callback to trigger on case Expand button /\n onExpandButtonClickHandler?: () => void;\n /* Boolean that refers current case expanded state /\n open: boolean;\n /* Renders of Children of Case, List of Assignments or Child Case /\n children?: ReactNode;\n /* total the number of items in the current set of treeitems /\n setSize?: number;\n /* the position of the element within the whole set of treeitems */\n posInset?: number;\n}\n\nconst CaseDetail = ({\n hasChildren,\n depth,\n id,\n open,\n onExpandButtonClickHandler,\n link,\n name,\n status,\n children,\n setSize,\n posInset\n}: CaseDetailsProps) => {\n const { variant, text } = status \|\| {};\n const {\n firstNodeId,\n focusedNodeId,\n lastNodeId,\n changeFocusHandler,\n caseIdExpandList,\n isMediumOrAbove,\n parentRef,\n nodeInternalFocus,\n setNodeInternalFocusHandler,\n reverseTabFlow\n } = useContext(AssignmentTreeContext);\n const testIds = useTestIds('', getCaseTestIds);\n const { start, end } = useDirection();\n const caseHeaderRef = useRef<HTMLLIElement>(null);\n const indent = depth !== 1 && !hasChildren;\n\n const childElementsTabIndex = nodeInternalFocus ? 0 : -1;\n const { parentNodeTabIndex, lastNode, escapeNodeHandler } = useNodeFocus(\n id,\n caseHeaderRef,\n parentRef,\n {\n firstNodeId,\n focusedNodeId,\n lastNodeId,\n nodeInternalFocus,\n reverseTabFlow\n }\n );\n\n const t = useI18n();\n\n const navigationHandler = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n if (['ArrowUp', 'ArrowDown'].includes(e.key)) e.preventDefault();\n switch (e.key) {\n case 'ArrowUp':\n changeFocusHandler(id, 'up', caseIdExpandList);\n break;\n case 'ArrowDown':\n changeFocusHandler(id, 'down', caseIdExpandList);\n break;\n case `Arrow${cap(start)}`:\n if (open) {\n onExpandButtonClickHandler?.();\n } else {\n changeFocusHandler(id, 'left', caseIdExpandList);\n }\n break;\n case `Arrow${cap(end)}`:\n if (hasChildren) {\n if (!open) {\n onExpandButtonClickHandler?.();\n } else {\n changeFocusHandler(id, 'right', caseIdExpandList);\n }\n }\n break;\n case 'Home':\n if (firstNodeId) changeFocusHandler(firstNodeId);\n break;\n case 'End':\n if (lastNodeId) changeFocusHandler(lastNodeId);\n break;\n default:\n }\n },\n [id, firstNodeId, lastNodeId, open, hasChildren, caseIdExpandList]\n );\n\n const caseDescriptionContainer = useMemo(\n () => (\n <PauseTextNode>\n <StyledLinkContainer isMediumOrAbove={isMediumOrAbove} key={`${id}-caseName`}>\n <Link\n data-testid={testIds.label}\n href={link.href}\n previewable\n onPreview={link.onPreview}\n target={link?.target}\n icon\n tabIndex={childElementsTabIndex}\n onClick={(e: MouseEvent<HTMLAnchorElement \| HTMLButtonElement>) => {\n link.onClick?.(e, id);\n }}\n >\n {!hasChildren && (\n <VisuallyHiddenText>{t('case_announcement_label')}</VisuallyHiddenText>\n )}\n {name}\n </Link>\n </StyledLinkContainer>\n </PauseTextNode>\n ),\n [isMediumOrAbove, name, id, link, testIds, childElementsTabIndex, hasChildren]\n );\n\n const caseIdStatusContainer = useMemo(\n () => (\n <StyledMetaIdStatusContainer\n key={`${id}-id-status`}\n wrapItems={false}\n isMediumOrAbove={isMediumOrAbove}\n items={[\n <PauseTextNode key={`${id}-id`}>\n <Text data-testid={testIds.id} variant='secondary'>\n {id}\n </Text>\n </PauseTextNode>,\n <PauseTextNode key={`${id}-status`}>\n <Status data-testid={testIds.status} variant={variant ?? 'info'}>\n {text}\n </Status>\n </PauseTextNode>\n ]}\n />\n ),\n [id, variant, text, testIds, isMediumOrAbove]\n );\n\n const metaList = useMemo(\n () => [caseDescriptionContainer, caseIdStatusContainer],\n [caseDescriptionContainer, caseIdStatusContainer]\n );\n\n return (\n <StyledNode\n data-testid={testIds.root}\n role='treeitem'\n aria-selected={parentNodeTabIndex === 0}\n aria-expanded={hasChildren && !nodeInternalFocus ? open : undefined}\n tabIndex={nodeInternalFocus ? -1 : parentNodeTabIndex}\n aria-labelledby={id}\n aria-owns={hasChildren ? `${id}-subtree` : undefined}\n ref={caseHeaderRef}\n onKeyDown={(e: KeyboardEvent<HTMLElement>) => {\n e.stopPropagation();\n if (e.key === 'Enter' && !nodeInternalFocus) {\n e.preventDefault();\n setNodeInternalFocusHandler?.(true);\n reverseTabFlow.current = false;\n return;\n }\n\n if (e.key === 'Escape' && nodeInternalFocus) {\n changeFocusHandler(id);\n setNodeInternalFocusHandler?.(false);\n escapeNodeHandler();\n reverseTabFlow.current = false;\n return;\n }\n\n if (e.shiftKey && e.key === 'Tab' && nodeInternalFocus) {\n reverseTabFlow.current = true;\n } else if (e.key === 'Tab' && nodeInternalFocus) {\n reverseTabFlow.current = false;\n }\n\n if (!nodeInternalFocus) {\n navigationHandler(e);\n }\n }}\n onClick={(e: MouseEvent<HTMLLIElement>) => {\n e.stopPropagation();\n reverseTabFlow.current = false;\n changeFocusHandler(id);\n }}\n isFocus={nodeInternalFocus ? false : parentNodeTabIndex === 0}\n lastNode={lastNode}\n isChild\n depth={restrictDepth(depth)}\n onFocus={(e: FocusEvent<HTMLElement>) => {\n e.stopPropagation();\n changeFocusHandler(id);\n }}\n aria-level={depth}\n aria-setsize={setSize}\n aria-posinset={posInset}\n >\n <Flex\n as={StyledHeaderContainer}\n container={{ alignItems: 'center' }}\n depth={restrictDepth(depth)}\n id={id}\n hasChildren={hasChildren}\n >\n {hasChildren && (\n <StyledExpandButton\n data-testid={testIds.toggleAction}\n type='button'\n variant='text'\n aria-expanded={open}\n onClick={() => onExpandButtonClickHandler?.()}\n tabIndex={childElementsTabIndex}\n aria-label={t('case_announcement_label', [nodeInternalFocus ? name : ''])}\n isCase\n >\n <Icon name='caret-right' />\n </StyledExpandButton>\n )}\n {isMediumOrAbove ? (\n <StyledMetaListContainer\n role='none'\n isMediumOrAbove={isMediumOrAbove}\n indent={indent}\n wrapItems\n items={metaList}\n />\n ) : (\n <StyledSummaryItem indent={indent} primary={metaList[0]} secondary={metaList[1]} />\n )}\n </Flex>\n {children \|\| null}\n </StyledNode>\n );\n};\n\nexport default withTestIds(CaseDetail, getCaseTestIds);\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,+BAA+B,EAAmB,MAAM,yBAAyB,CAAC;AAShG,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAExE,QAAA,MAAM,mBAAmB,EAAE,+BAA+B,CAAC,wBAAwB,~~CAgLlF~~,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
1	+ {"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,+BAA+B,EAAmB,MAAM,yBAAyB,CAAC;AAShG,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAExE,QAAA,MAAM,mBAAmB,EAAE,+BAA+B,CAAC,wBAAwB,CAiLlF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -75,7 +75,7 @@ const IntelligentGuidance = forwardRef(function IntelligentGuidance({ items, pre
         }
     }, [isCollapsed]);
     const intelligentGuidanceList = (_jsx(StyledIntelligentGuidanceList, { items: listItems, noItemsText: t('no_recommendations') }));
-    return (_jsxs(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', isCollapsed: isCollapsed, hasItems: !!items.length, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsxs(CardHeader, { ref: headerRef, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: heading }), _jsx(Count, { children: items.length + (previousItems?.length ?? 0) })] }), _jsx(Actions, { items: [
+    return (_jsxs(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', isCollapsed: isCollapsed, hasItems: !!items.length, style: { '--headerHeight': `${headerHeight}px` }, "data-app-region": true, children: [_jsxs(CardHeader, { ref: headerRef, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: heading }), _jsx(Count, { children: items.length + (previousItems?.length ?? 0) })] }), _jsx(Actions, { items: [
                             {
                                 text: t(isCollapsed ? 'expand' : 'collapse'),
                                 id: 'IntelligentGuidanceButton',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties, KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n useI18n,\n useAfterInitialEffect,\n Text,\n Tabs,\n CardHeader,\n TabPanel,\n Flex,\n Count,\n Actions,\n useLiveLog,\n usePrevious,\n useTheme,\n StyledSecondary\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SummaryListItem } from '@pega/cosmos-react-core';\n\nimport {\n StyledIntelligentGuidanceList,\n StyledIntelligentGuidance,\n StyledNew,\n StyledBorderLine,\n StyledPrimaryItem\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: ForwardRefForwardPropsComponent<IntelligentGuidanceProps> = forwardRef(\n function IntelligentGuidance(\n {\n items,\n previousItems,\n heading,\n isCollapsed,\n onExpandCollapse,\n ...restProps\n }: PropsWithoutRef<IntelligentGuidanceProps>,\n ref: IntelligentGuidanceProps['ref']\n ) {\n const t = useI18n();\n const theme = useTheme();\n const headerRef = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const tabsRef = useRef<HTMLElement>(null);\n const [currentTab, setCurrentTab] = useState('current');\n const { announcePolite } = useLiveLog();\n const oldItems = usePrevious(items);\n const oldPreviousItems = usePrevious(previousItems);\n\n const listItems: SummaryListItem[] = (\n currentTab === 'current' ? items : previousItems ?? []\n ).map(item => {\n return {\n id: item.id,\n visual: <Icon name={item.icon} />,\n primary: (\n <StyledPrimaryItem\n role='button'\n tabIndex={0}\n aria-label={t('continue_label_a11y', [item.label])}\n onClick={item.onClick}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n item.onClick(e);\n }\n }}\n >\n {item.label}\n {item.new && (\n <>\n <StyledNew>{t('new')}</StyledNew>\n {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n <StyledBorderLine />\n </>\n )}\n\n <StyledSecondary variant='secondary'>\n <Text variant='secondary'>{item.type}</Text>\n </StyledSecondary>\n </StyledPrimaryItem>\n ),\n contextualLabel: item.label,\n actions: item.onDismiss\n ? [\n {\n text: t('dismiss'),\n id: item.id,\n icon: 'times',\n onClick: (id, e) => {\n e.stopPropagation();\n item.onDismiss?.(id, e);\n }\n }\n ]\n : undefined,\n container: { colGap: 0.5 }\n };\n });\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current?.offsetHeight \|\| 0);\n }\n }, [headerRef.current]);\n\n useEffect(() => {\n announcePolite({ message: `${heading} ${items.length + (previousItems?.length ?? 0)}` });\n if (oldItems) {\n const oldItemsIds = oldItems.map(i => i.id);\n const itemsToAnnounce = items.filter(i => !oldItemsIds.includes(i.id));\n if (itemsToAnnounce.length) {\n announcePolite({ message: t('items_added_to_current_list') });\n itemsToAnnounce.forEach(i => announcePolite({ message: `${i.label} ${i.type}` }));\n }\n }\n if (oldPreviousItems) {\n const oldItemsIds = oldPreviousItems.map(i => i.id);\n const itemsToAnnounce = items.filter(i => !oldItemsIds.includes(i.id));\n if (itemsToAnnounce) {\n announcePolite({ message: t('items_added_to_previous_list') });\n itemsToAnnounce.forEach(i => announcePolite({ message: `${i.label} ${i.type}` }));\n }\n }\n }, [items, previousItems]);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n useAfterInitialEffect(() => {\n if (\n toggleButtonRef.current &&\n window.matchMedia(`(min-height: ${theme.base.breakpoints.sm})`).matches &&\n toggleButtonRef.current === document.activeElement\n ) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 1000);\n }\n }, [isCollapsed]);\n\n const intelligentGuidanceList = (\n <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n );\n\n return (\n <StyledIntelligentGuidance\n {...restProps}\n ref={ref}\n role='region'\n isCollapsed={isCollapsed}\n hasItems={!!items.length}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader ref={headerRef}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{heading}</Text>\n <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n </Flex>\n <Actions\n items={[\n {\n text: t(isCollapsed ? 'expand' : 'collapse'),\n id: 'IntelligentGuidanceButton',\n icon: 'caret-down',\n 'aria-label': isCollapsed\n ? t('expand_noun', [heading])\n : t('collapse_noun', [heading]),\n onClick: onExpandCollapse,\n ref: toggleButtonRef\n }\n ]}\n />\n </CardHeader>\n {previousItems ? (\n <>\n <Tabs\n tabs={[\n {\n id: 'current',\n name: t('current'),\n count: items.filter(item => item.new).length \|\| undefined\n },\n {\n id: 'previous',\n name: t('previous'),\n count: previousItems.filter(item => item.new).length \|\| undefined\n }\n ]}\n currentTabId={currentTab}\n onTabClick={setCurrentTab}\n ref={tabsRef}\n />\n <TabPanel tabId={currentTab} tablistRef={tabsRef}>\n {intelligentGuidanceList}\n </TabPanel>\n </>\n ) : (\n intelligentGuidanceList\n )}\n </StyledIntelligentGuidance>\n );\n }\n);\n\nexport default IntelligentGuidance;\n"]}
1	+ {"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties, KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n useI18n,\n useAfterInitialEffect,\n Text,\n Tabs,\n CardHeader,\n TabPanel,\n Flex,\n Count,\n Actions,\n useLiveLog,\n usePrevious,\n useTheme,\n StyledSecondary\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SummaryListItem } from '@pega/cosmos-react-core';\n\nimport {\n StyledIntelligentGuidanceList,\n StyledIntelligentGuidance,\n StyledNew,\n StyledBorderLine,\n StyledPrimaryItem\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: ForwardRefForwardPropsComponent<IntelligentGuidanceProps> = forwardRef(\n function IntelligentGuidance(\n {\n items,\n previousItems,\n heading,\n isCollapsed,\n onExpandCollapse,\n ...restProps\n }: PropsWithoutRef<IntelligentGuidanceProps>,\n ref: IntelligentGuidanceProps['ref']\n ) {\n const t = useI18n();\n const theme = useTheme();\n const headerRef = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const tabsRef = useRef<HTMLElement>(null);\n const [currentTab, setCurrentTab] = useState('current');\n const { announcePolite } = useLiveLog();\n const oldItems = usePrevious(items);\n const oldPreviousItems = usePrevious(previousItems);\n\n const listItems: SummaryListItem[] = (\n currentTab === 'current' ? items : previousItems ?? []\n ).map(item => {\n return {\n id: item.id,\n visual: <Icon name={item.icon} />,\n primary: (\n <StyledPrimaryItem\n role='button'\n tabIndex={0}\n aria-label={t('continue_label_a11y', [item.label])}\n onClick={item.onClick}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n item.onClick(e);\n }\n }}\n >\n {item.label}\n {item.new && (\n <>\n <StyledNew>{t('new')}</StyledNew>\n {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n <StyledBorderLine />\n </>\n )}\n\n <StyledSecondary variant='secondary'>\n <Text variant='secondary'>{item.type}</Text>\n </StyledSecondary>\n </StyledPrimaryItem>\n ),\n contextualLabel: item.label,\n actions: item.onDismiss\n ? [\n {\n text: t('dismiss'),\n id: item.id,\n icon: 'times',\n onClick: (id, e) => {\n e.stopPropagation();\n item.onDismiss?.(id, e);\n }\n }\n ]\n : undefined,\n container: { colGap: 0.5 }\n };\n });\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current?.offsetHeight \|\| 0);\n }\n }, [headerRef.current]);\n\n useEffect(() => {\n announcePolite({ message: `${heading} ${items.length + (previousItems?.length ?? 0)}` });\n if (oldItems) {\n const oldItemsIds = oldItems.map(i => i.id);\n const itemsToAnnounce = items.filter(i => !oldItemsIds.includes(i.id));\n if (itemsToAnnounce.length) {\n announcePolite({ message: t('items_added_to_current_list') });\n itemsToAnnounce.forEach(i => announcePolite({ message: `${i.label} ${i.type}` }));\n }\n }\n if (oldPreviousItems) {\n const oldItemsIds = oldPreviousItems.map(i => i.id);\n const itemsToAnnounce = items.filter(i => !oldItemsIds.includes(i.id));\n if (itemsToAnnounce) {\n announcePolite({ message: t('items_added_to_previous_list') });\n itemsToAnnounce.forEach(i => announcePolite({ message: `${i.label} ${i.type}` }));\n }\n }\n }, [items, previousItems]);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n useAfterInitialEffect(() => {\n if (\n toggleButtonRef.current &&\n window.matchMedia(`(min-height: ${theme.base.breakpoints.sm})`).matches &&\n toggleButtonRef.current === document.activeElement\n ) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 1000);\n }\n }, [isCollapsed]);\n\n const intelligentGuidanceList = (\n <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n );\n\n return (\n <StyledIntelligentGuidance\n {...restProps}\n ref={ref}\n role='region'\n isCollapsed={isCollapsed}\n hasItems={!!items.length}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n data-app-region\n >\n <CardHeader ref={headerRef}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{heading}</Text>\n <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n </Flex>\n <Actions\n items={[\n {\n text: t(isCollapsed ? 'expand' : 'collapse'),\n id: 'IntelligentGuidanceButton',\n icon: 'caret-down',\n 'aria-label': isCollapsed\n ? t('expand_noun', [heading])\n : t('collapse_noun', [heading]),\n onClick: onExpandCollapse,\n ref: toggleButtonRef\n }\n ]}\n />\n </CardHeader>\n {previousItems ? (\n <>\n <Tabs\n tabs={[\n {\n id: 'current',\n name: t('current'),\n count: items.filter(item => item.new).length \|\| undefined\n },\n {\n id: 'previous',\n name: t('previous'),\n count: previousItems.filter(item => item.new).length \|\| undefined\n }\n ]}\n currentTabId={currentTab}\n onTabClick={setCurrentTab}\n ref={tabsRef}\n />\n <TabPanel tabId={currentTab} tablistRef={tabsRef}>\n {intelligentGuidanceList}\n </TabPanel>\n </>\n ) : (\n intelligentGuidanceList\n )}\n </StyledIntelligentGuidance>\n );\n }\n);\n\nexport default IntelligentGuidance;\n"]}

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

@@ -1,10 +1,14 @@
-export declare const StyledNew: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBorderLine: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledIntelligentGuidanceList: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").SummaryListProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPrimaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNew: 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<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledBorderLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledIntelligentGuidanceList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").SummaryListProps, "ref"> & import("react").RefAttributes<HTMLElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLElement | 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<HTMLElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").SummaryListProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledPrimaryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export interface StyledIntelligentGuidanceProps {
     isCollapsed: boolean;
     hasItems: boolean;
 }
-export declare const StyledIntelligentGuidance: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & StyledIntelligentGuidanceProps, never>;
+export declare const StyledIntelligentGuidance: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("@pega/cosmos-react-core").CardProps> & Partial<import("@pega/cosmos-react-core").CardProps>, StyledIntelligentGuidanceProps>> & string;
 //# sourceMappingURL=IntelligentGuidance.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"~~AA8BA~~,eAAO,MAAM,SAAS,~~kNAmBpB,~~CAAC;AAIH,eAAO,MAAM,gBAAgB,~~0GAe3B,~~CAAC;AAIH,eAAO,MAAM,6BAA6B,~~yNA+CxC,~~CAAC;AAIH,eAAO,MAAM,iBAAiB,~~yGAkB5B~~,CAAC;AAIH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,~~gMA0GpC~~,CAAC"}
1	+ {"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AA+BA,eAAO,MAAM,SAAS;;yLAmBpB,CAAC;AAIH,eAAO,MAAM,gBAAgB,+NAe3B,CAAC;AAIH,eAAO,MAAM,6BAA6B;;gMAgDxC,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAkB5B,CAAC;AAIH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,6YAsHpC,CAAC"}

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

@@ -5,6 +5,7 @@ import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/Ca
 import { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';
 import { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';
 import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
 const itemIconSize = '2rem';
 export const StyledNew = styled(Text)(({ theme }) => {
     const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.palette['primary-background']);
@@ -46,6 +47,7 @@ export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) =>
     return css `
     max-height: min(calc(100vh - var(--headerHeight) - 4ch), 21ch);
     overflow: auto;
+    background-color: ${navBg};
     ${theme.base.animation.timing.ease};
@@ -115,7 +117,7 @@ export const StyledIntelligentGuidance = styled(StyledCard)(({ theme, isCollapse
     transition:
       inset-inline-start ${theme.base.animation.speed} ${theme.base.animation.timing.ease},
       transform calc(4 * ${theme.base.animation.speed}) ${theme.base.animation.timing.ease};
-    bottom: 0;
+    bottom: var(--appshell-bottom-offset, 0);
     z-index: ${theme.base['z-index'].popover};
     min-width: 20rem;
     max-width: 20rem;
@@ -176,28 +178,40 @@ export const StyledIntelligentGuidance = styled(StyledCard)(({ theme, isCollapse
     ${StyledTabs} {
       padding-inline: ${theme.base.spacing};
       border-block: 0.0625rem solid ${borderColor};
+      border-radius: 0;
       ${StyledTab} {
         flex: 1;
         justify-content: center;
         ${StyledCount} {
           background-color: ${theme.base.palette.urgent};
         }
         span {
           color: ${computedFgColor};
         }
-        ::after {
+        &::after {
           background-color: ${lightenedTabColor};
         }
         &[aria-selected='true'] {
           span:not(${StyledCount}) {
             color: ${tabPrimaryColor};
           }
-          ::after {
+          &::after {
             background-color: ${tabPrimaryColor};
           }
         }
+        &:hover {
+          background-color: ${contrastColor};
+          border-radius: 0;
+          cursor: pointer;
+        }
       }
     }
+    ${StyledTabPanel} {
+      padding: 0;
+    }
     ${StyledButton}:enabled:focus {
       box-shadow: ${theme.base.shadow.focus};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n StyledButton,\n StyledCard,\n StyledFlex,\n StyledIcon,\n StyledEmptyState,\n SummaryList,\n StyledText,\n tryCatch,\n StyledSummaryItem,\n StyledVisual,\n readableColor,\n readableHue,\n Text,\n calculateFontSize,\n StyledSecondary,\n calculateBackgroundAndContrastColor,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\n\nconst itemIconSize = '2rem';\n\nexport const StyledNew = styled(Text)(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n const readableTextColor = readableColor(readableBackground);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n text-transform: uppercase;\n background-color: ${readableBackground};\n color: ${readableTextColor};\n padding-inline: calc(0.75 * ${theme.base.spacing});\n font-size: ${fontSize.xxs};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledNew.defaultProps = defaultThemeProp;\n\nexport const StyledBorderLine = styled.span(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n content: '';\n background-color: ${readableBackground};\n height: 100%;\n width: 0.125rem;\n `;\n});\n\nStyledBorderLine.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n const navBg = theme.components['app-shell'].nav.background;\n const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n const computedFgColor = calculateForegroundColor(navBg, navFgColor);\n const { contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n const borderColor = tryCatch(() => lighten(0.1, contrastColor));\n const secondaryColor = tryCatch(() =>\n rgba(computedFgColor, theme.base.transparency['transparent-2'])\n );\n\n return css`\n max-height: min(calc(100vh - var(--headerHeight) - 4ch), 21ch);\n overflow: auto;\n\n ${theme.base.animation.timing.ease};\n\n ${StyledSummaryItem} {\n position: relative;\n padding: 0 ${theme.base.spacing};\n outline: none;\n\n &:not(:first-of-type) {\n border-top: ${theme.components.button['border-width']} solid ${borderColor};\n }\n\n ${StyledVisual} ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n }\n\n ${StyledSecondary} ${StyledText} {\n color: ${secondaryColor};\n }\n\n &:not(:last-child) {\n border-bottom: none;\n }\n }\n\n ${StyledEmptyState} {\n padding-block: ${theme.base.spacing};\n ${StyledIcon}, ${StyledText} {\n color: ${computedFgColor};\n }\n }\n `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryItem = styled.div(({ theme }) => {\n const navBg = theme.components['app-shell'].nav.background;\n const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n const { contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n\n return css`\n padding: ${theme.base.spacing} calc(0.5 * ${theme.base.spacing});\n\n &:hover {\n background-color: ${contrastColor};\n cursor: pointer;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nStyledPrimaryItem.defaultProps = defaultThemeProp;\n\nexport interface StyledIntelligentGuidanceProps {\n isCollapsed: boolean;\n hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled(StyledCard)<StyledIntelligentGuidanceProps>(({\n theme,\n isCollapsed\n}) => {\n const navBg = theme.components['app-shell'].nav.background;\n const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n const computedFgColor = calculateForegroundColor(navBg, navFgColor);\n const { contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n const borderColor = tryCatch(() => lighten(0.1, contrastColor));\n const tabPrimaryColor = theme.base.colors.blue.light;\n const lightenedTabColor = tryCatch(() => transparentize(0.3, tabPrimaryColor)) ?? '';\n\n return css`\n position: fixed;\n inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));\n transition:\n inset-inline-start ${theme.base.animation.speed} ${theme.base.animation.timing.ease},\n transform calc(4 * ${theme.base.animation.speed}) ${theme.base.animation.timing.ease};\n bottom: 0;\n z-index: ${theme.base['z-index'].popover};\n min-width: 20rem;\n max-width: 20rem;\n color: ${computedFgColor};\n overflow: hidden;\n box-shadow: ${theme.base.shadow.low};\n\n @media (height <= ${theme.base.breakpoints.sm}) {\n position: absolute;\n transition: none;\n inset-inline-start: calc(2 * ${theme.base.spacing});\n min-inline-size: calc(100% - (4 * ${theme.base.spacing}));\n min-block-size: 3rem;\n\n ${isCollapsed &&\n css`\n ${StyledCardHeader} ~ * {\n display: none;\n }\n `}\n }\n\n @media (min-width: ${theme.base.breakpoints.lg}) {\n min-width: 23rem;\n max-width: 23rem;\n }\n\n ${isCollapsed &&\n css`\n transform: translateY(calc(100% - var(--headerHeight)));\n `}\n\n &:not(& &) {\n background: ${navBg};\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n ${StyledCardHeader} {\n & ${StyledButton} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing};\n }\n\n ${StyledFlex} > ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n border-radius: calc(3 * ${theme.base['border-radius']});\n background-color: ${theme.base.palette.success};\n }\n }\n\n ${StyledTabs} {\n padding-inline: ${theme.base.spacing};\n border-block: 0.0625rem solid ${borderColor};\n ${StyledTab} {\n flex: 1;\n justify-content: center;\n ${StyledCount} {\n background-color: ${theme.base.palette.urgent};\n }\n span {\n color: ${computedFgColor};\n }\n ::after {\n background-color: ${lightenedTabColor};\n }\n &[aria-selected='true'] {\n span:not(${StyledCount}) {\n color: ${tabPrimaryColor};\n }\n ::after {\n background-color: ${tabPrimaryColor};\n }\n }\n }\n }\n\n ${StyledButton}:enabled:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEzD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,WAAW,EACX,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,mCAAmC,EACnC,wBAAwB,EACzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,SAAS,EAAE,MAAM,iDAAiD,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AAEtF,MAAM,YAAY,GAAG,MAAM,CAAC;AAE5B,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,MAAM,kBAAkB,GAAG,WAAW,CACpC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EACnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACzC,CAAC;IACF,MAAM,iBAAiB,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;;;;;wBAKY,kBAAkB;aAC7B,iBAAiB;kCACI,KAAK,CAAC,IAAI,CAAC,OAAO;iBACnC,QAAQ,CAAC,GAAG;mBACV,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;GACtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,MAAM,kBAAkB,GAAG,WAAW,CACpC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EACnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACzC,CAAC;IAEF,OAAO,GAAG,CAAA;;;;;wBAKY,kBAAkB;;;GAGvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACzE,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IACpE,MAAM,EAAE,aAAa,EAAE,GAAG,mCAAmC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IACjF,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CACnC,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAChE,CAAC;IAEF,OAAO,GAAG,CAAA;;;wBAGY,KAAK;;MAEvB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;MAEhC,iBAAiB;;mBAEJ,KAAK,CAAC,IAAI,CAAC,OAAO;;;;sBAIf,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU,WAAW;;;QAG1E,YAAY,IAAI,UAAU;iBACjB,YAAY;kBACX,YAAY;+BACC,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGzC,eAAe,IAAI,UAAU;iBACpB,cAAc;;;;;;;;MAQzB,gBAAgB;uBACC,KAAK,CAAC,IAAI,CAAC,OAAO;QACjC,UAAU,KAAK,UAAU;iBAChB,eAAe;;;GAG7B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACzE,MAAM,EAAE,aAAa,EAAE,GAAG,mCAAmC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEjF,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO;;;0BAGxC,aAAa;;;;;;oBAMnB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;GAEjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAOlD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAiC,CAAC,EAC3F,KAAK,EACL,WAAW,EACZ,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACzE,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IACpE,MAAM,EAAE,aAAa,EAAE,GAAG,mCAAmC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IACjF,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;IACrD,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,IAAI,EAAE,CAAC;IAErF,OAAO,GAAG,CAAA;;mCAEuB,KAAK,CAAC,IAAI,CAAC,OAAO;;2BAE1B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;2BAC9D,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;eAE3E,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO;;;aAG/B,eAAe;;kBAEV,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;;wBAEf,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;qCAGZ,KAAK,CAAC,IAAI,CAAC,OAAO;0CACb,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGpD,WAAW;QACb,GAAG,CAAA;UACC,gBAAgB;;;OAGnB;;;yBAGkB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;;MAK5C,WAAW;QACb,GAAG,CAAA;;KAEF;;;oBAGe,KAAK;;;;MAInB,gBAAgB;UACZ,YAAY;yCACmB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;YACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;qBACvB,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;;;cAGpD,UAAU,IAAI,UAAU;mBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAG7B,UAAU,MAAM,UAAU;iBACjB,YAAY;kBACX,YAAY;+BACC,KAAK,CAAC,IAAI,CAAC,OAAO;kCACf,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;4BACjC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;;;;MAIhD,UAAU;wBACQ,KAAK,CAAC,IAAI,CAAC,OAAO;sCACJ,WAAW;;;QAGzC,SAAS;;;;UAIP,WAAW;8BACS,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;;mBAGpC,eAAe;;;8BAGJ,iBAAiB;;;qBAG1B,WAAW;qBACX,eAAe;;;gCAGJ,eAAe;;;;;8BAKjB,aAAa;;;;;;MAMrC,cAAc;;;;MAId,YAAY;oBACE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n StyledButton,\n StyledCard,\n StyledFlex,\n StyledIcon,\n StyledEmptyState,\n SummaryList,\n StyledText,\n tryCatch,\n StyledSummaryItem,\n StyledVisual,\n readableColor,\n readableHue,\n Text,\n calculateFontSize,\n StyledSecondary,\n calculateBackgroundAndContrastColor,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nconst itemIconSize = '2rem';\n\nexport const StyledNew = styled(Text)(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n const readableTextColor = readableColor(readableBackground);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n text-transform: uppercase;\n background-color: ${readableBackground};\n color: ${readableTextColor};\n padding-inline: calc(0.75 * ${theme.base.spacing});\n font-size: ${fontSize.xxs};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledNew.defaultProps = defaultThemeProp;\n\nexport const StyledBorderLine = styled.span(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n content: '';\n background-color: ${readableBackground};\n height: 100%;\n width: 0.125rem;\n `;\n});\n\nStyledBorderLine.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n const navBg = theme.components['app-shell'].nav.background;\n const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n const computedFgColor = calculateForegroundColor(navBg, navFgColor);\n const { contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n const borderColor = tryCatch(() => lighten(0.1, contrastColor));\n const secondaryColor = tryCatch(() =>\n rgba(computedFgColor, theme.base.transparency['transparent-2'])\n );\n\n return css`\n max-height: min(calc(100vh - var(--headerHeight) - 4ch), 21ch);\n overflow: auto;\n background-color: ${navBg};\n\n ${theme.base.animation.timing.ease};\n\n ${StyledSummaryItem} {\n position: relative;\n padding: 0 ${theme.base.spacing};\n outline: none;\n\n &:not(:first-of-type) {\n border-top: ${theme.components.button['border-width']} solid ${borderColor};\n }\n\n ${StyledVisual} ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n }\n\n ${StyledSecondary} ${StyledText} {\n color: ${secondaryColor};\n }\n\n &:not(:last-child) {\n border-bottom: none;\n }\n }\n\n ${StyledEmptyState} {\n padding-block: ${theme.base.spacing};\n ${StyledIcon}, ${StyledText} {\n color: ${computedFgColor};\n }\n }\n `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryItem = styled.div(({ theme }) => {\n const navBg = theme.components['app-shell'].nav.background;\n const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n const { contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n\n return css`\n padding: ${theme.base.spacing} calc(0.5 * ${theme.base.spacing});\n\n &:hover {\n background-color: ${contrastColor};\n cursor: pointer;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nStyledPrimaryItem.defaultProps = defaultThemeProp;\n\nexport interface StyledIntelligentGuidanceProps {\n isCollapsed: boolean;\n hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled(StyledCard)<StyledIntelligentGuidanceProps>(({\n theme,\n isCollapsed\n}) => {\n const navBg = theme.components['app-shell'].nav.background;\n const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n const computedFgColor = calculateForegroundColor(navBg, navFgColor);\n const { contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n const borderColor = tryCatch(() => lighten(0.1, contrastColor));\n const tabPrimaryColor = theme.base.colors.blue.light;\n const lightenedTabColor = tryCatch(() => transparentize(0.3, tabPrimaryColor)) ?? '';\n\n return css`\n position: fixed;\n inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));\n transition:\n inset-inline-start ${theme.base.animation.speed} ${theme.base.animation.timing.ease},\n transform calc(4 * ${theme.base.animation.speed}) ${theme.base.animation.timing.ease};\n bottom: var(--appshell-bottom-offset, 0);\n z-index: ${theme.base['z-index'].popover};\n min-width: 20rem;\n max-width: 20rem;\n color: ${computedFgColor};\n overflow: hidden;\n box-shadow: ${theme.base.shadow.low};\n\n @media (height <= ${theme.base.breakpoints.sm}) {\n position: absolute;\n transition: none;\n inset-inline-start: calc(2 * ${theme.base.spacing});\n min-inline-size: calc(100% - (4 * ${theme.base.spacing}));\n min-block-size: 3rem;\n\n ${isCollapsed &&\n css`\n ${StyledCardHeader} ~ * {\n display: none;\n }\n `}\n }\n\n @media (min-width: ${theme.base.breakpoints.lg}) {\n min-width: 23rem;\n max-width: 23rem;\n }\n\n ${isCollapsed &&\n css`\n transform: translateY(calc(100% - var(--headerHeight)));\n `}\n\n &:not(& &) {\n background: ${navBg};\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n ${StyledCardHeader} {\n & ${StyledButton} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing};\n }\n\n ${StyledFlex} > ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n border-radius: calc(3 * ${theme.base['border-radius']});\n background-color: ${theme.base.palette.success};\n }\n }\n\n ${StyledTabs} {\n padding-inline: ${theme.base.spacing};\n border-block: 0.0625rem solid ${borderColor};\n border-radius: 0;\n\n ${StyledTab} {\n flex: 1;\n justify-content: center;\n\n ${StyledCount} {\n background-color: ${theme.base.palette.urgent};\n }\n span {\n color: ${computedFgColor};\n }\n &::after {\n background-color: ${lightenedTabColor};\n }\n &[aria-selected='true'] {\n span:not(${StyledCount}) {\n color: ${tabPrimaryColor};\n }\n &::after {\n background-color: ${tabPrimaryColor};\n }\n }\n\n &:hover {\n background-color: ${contrastColor};\n border-radius: 0;\n cursor: pointer;\n }\n }\n }\n ${StyledTabPanel} {\n padding: 0;\n }\n\n ${StyledButton}:enabled:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,6 +1,19 @@
 import type { Ref } from 'react';
 import type { StatusProps, ForwardRefForwardPropsComponent, FieldValueListProps, NoChildrenProp, RequireAtLeastOne } from '@pega/cosmos-react-core';
 import type { CountdownButtonProps } from './CountdownButton';
+interface InfoText {
+    /** Visually hidden description for accessibility purposes. */
+    description: string;
+    /** Information text. */
+    text: string;
+}
+/** A simple callback or an object to customize notification button properties. */
+type NotificationAction = (() => void) | {
+    /** Custom label for the button. */
+    text?: string;
+    /** Handler invoked when the button is clicked. */
+    handler: () => void;
+};
 export type InteractionNotificationProps = RequireAtLeastOne<NoChildrenProp & {
     /** Ref to Component. */
     ref?: Ref<HTMLDivElement>;
@@ -8,10 +21,6 @@ export type InteractionNotificationProps = RequireAtLeastOne<NoChildrenProp & {
     icon: string;
     /** Interaction title. */
     title: string;
-    /** Primary information of the notification. For example caller name . */
-    primaryText: string;
-    /** Secondary information of the notification. For example phone number of the caller */
-    secondaryText?: string;
     /** Represents the current status of interaction. */
     status: {
         variant: StatusProps['variant'];
@@ -26,10 +35,24 @@ export type InteractionNotificationProps = RequireAtLeastOne<NoChildrenProp & {
         onTimerEnd?: CountdownButtonProps['onTimerEnd'];
     };
     /** Callback when accept button is clicked. */
-    onAccept?: () => void;
-    /** Callback when decline or 'x' button is clicked. */
-    onDismiss?: () => void;
-}, 'onAccept' | 'onDismiss'>;
+    onAccept?: NotificationAction;
+    /** Callback when dismiss button is clicked. */
+    onDismiss?: NotificationAction;
+} & ({
+    /** Primary information of the notification. For example caller name. */
+    primaryText: InfoText;
+    /** Secondary information of the notification. For example phone number of the caller. */
+    secondaryText?: InfoText;
+    /** Tertiary information of the notification. For example role of the caller. */
+    tertiaryText?: InfoText;
+} | {
+    /** Primary information of the notification. For example caller name. */
+    primaryText: string;
+    /** Secondary information of the notification. For example phone number of the caller. */
+    secondaryText?: string;
+    /** Tertiary information of the notification. For example role of the caller. */
+    tertiaryText?: string;
+}), 'onAccept' | 'onDismiss'>;
 declare const InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps>;
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;~~AA0BlD~~,OAAO,KAAK,EACV,WAAW,EACX,+BAA+B,EAC/B,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,CAC1D,cAAc,GAAG;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,~~yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,~~oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,~~MAAM~~,~~IAAI~~,CAAC;IACtB,~~sDAAsD~~;~~IACtD~~,~~SAAS~~,CAAC,EAAE,MAAM,~~IAAI~~,CAAC;~~CACxB~~,~~EACD~~,UAAU,GAAG,WAAW,CACzB,CAAC;~~AAgFF~~,QAAA,MAAM,uBAAuB,EAAE,+BAA+B,CAAC,4BAA4B,~~CAgHvF~~,CAAC;AAEL,eAAe,uBAAuB,CAAC"}
1	+ {"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AA2BlD,OAAO,KAAK,EACV,WAAW,EACX,+BAA+B,EAC/B,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,UAAU,QAAQ;IAChB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,kFAAkF;AAClF,KAAK,kBAAkB,GACnB,CAAC,MAAM,IAAI,CAAC,GACZ;IACE,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEN,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,CAC1D,cAAc,GAAG;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC,GAAG,CACE;IACE,wEAAwE;IACxE,WAAW,EAAE,QAAQ,CAAC;IACtB,yFAAyF;IACzF,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,gFAAgF;IAChF,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB,GACD;IACE,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACJ,EACH,UAAU,GAAG,WAAW,CACzB,CAAC;AA0GF,QAAA,MAAM,uBAAuB,EAAE,+BAA+B,CAAC,4BAA4B,CAqHvF,CAAC;AAEL,eAAe,uBAAuB,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldValueList, useI18n, useDirection, Icon, StyledLabel, useLiveLog, registerAction, useShortcut, useConsolidatedRef, useEscape, CardFooter } from '@pega/cosmos-react-core';
+import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldValueList, useI18n, useDirection, Icon, StyledLabel, useLiveLog, registerAction, useShortcut, useConsolidatedRef, useEscape, CardFooter, VisuallyHiddenText } from '@pega/cosmos-react-core';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import CountdownButton from './CountdownButton';
 const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
@@ -76,35 +76,42 @@ registerAction({
     id: 'DismissIncomingInteraction',
     defaultKeyBinding: 'Alt+Q'
 });
-const InteractionNotification = forwardRef(function InteractionNotification({ icon, title, primaryText, secondaryText, status, fields, incomingNotificationTimeout, onAccept, onDismiss }, ref) {
+const NotificationText = ({ content, variant = 'h5' }) => {
+    const isString = typeof content === 'string';
+    const text = (_jsx(Text, { variant: variant, as: 'span', children: isString ? content : content.text }));
+    return isString ? (text) : (_jsxs("div", { children: [_jsx(VisuallyHiddenText, { children: `${content.description} - ` }), text] }));
+};
+const InteractionNotification = forwardRef(function InteractionNotification({ icon, title, primaryText, secondaryText, tertiaryText, status, fields, incomingNotificationTimeout, onAccept, onDismiss }, ref) {
     const t = useI18n();
     const { announceAssertive } = useLiveLog();
     const containerRef = useConsolidatedRef(ref);
     const returnRef = useRef();
     const acceptButtonRef = useRef(null);
+    const onAcceptHandler = typeof onAccept === 'function' ? onAccept : onAccept?.handler;
+    const onDismissHandler = typeof onDismiss === 'function' ? onDismiss : onDismiss?.handler;
+    const acceptLabel = typeof onAccept !== 'function' ? onAccept?.text : t('accept');
+    const dismissLabel = typeof onDismiss !== 'function' ? onDismiss?.text : undefined;
     const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {
         if (containerRef.current) {
             returnRef.current = document.activeElement ?? undefined;
             acceptButtonRef.current?.focus();
         }
     });
-    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {
-        onDismiss?.();
-    });
+    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => onDismissHandler?.());
     useEscape(() => {
         returnRef.current?.focus();
-        onDismiss?.();
-    }, containerRef.current, [onDismiss]);
+        onDismissHandler?.();
+    }, containerRef.current, [onDismissHandler]);
     useEffect(() => {
         announceAssertive({
-            message: `${title} ${primaryText} ${t('status')} ${status.text}. ${goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''}${dismissBinding && onDismiss
+            message: `${title} ${typeof primaryText === 'string' ? primaryText : primaryText.description} ${t('status')} ${status.text}. ${goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''}${dismissBinding && onDismissHandler
                 ? t('interaction_shortcut_dismiss_info', [dismissBinding])
                 : ''}`,
             type: 'alert'
         });
     }, []);
-    const acceptButton = incomingNotificationTimeout ? (_jsx(CountdownButton, { variant: 'primary', onClick: onAccept, startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDismiss, ref: acceptButtonRef, children: t('accept') })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, ref: acceptButtonRef, children: t('accept') }));
-    return (_jsxs(StyledInteractionNotification, { ref: containerRef, "data-app-region": true, role: 'alertdialog', "aria-label": title, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsxs(CardContent, { container: { gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', children: primaryText }), secondaryText && (_jsx(Text, { variant: 'h5', as: 'span', children: secondaryText })), _jsx(Status, { variant: status.variant, children: status.text })] }), fields && fields.length !== 0 && _jsx(FieldValueList, { variant: 'inline', fields: fields })] }), onAccept ? (_jsxs(CardFooter, { justify: onDismiss ? 'between' : 'end', children: [onDismiss && _jsx(Button, { onClick: onDismiss, children: t('decline') }), acceptButton] })) : (_jsx(CardFooter, { justify: 'end', children: _jsx(Button, { variant: 'primary', onClick: onDismiss, children: t('close') }) }))] }));
+    const acceptButton = incomingNotificationTimeout ? (_jsx(CountdownButton, { variant: 'primary', onClick: onAcceptHandler, startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDismissHandler, ref: acceptButtonRef, children: acceptLabel })) : (_jsx(Button, { variant: 'primary', onClick: onAcceptHandler, ref: acceptButtonRef, children: acceptLabel }));
+    return (_jsxs(StyledInteractionNotification, { ref: containerRef, "data-app-region": true, role: 'alertdialog', "aria-label": title, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsxs(CardContent, { container: { gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationText, { content: primaryText, variant: 'h1' }), secondaryText && _jsx(NotificationText, { content: secondaryText }), tertiaryText && _jsx(NotificationText, { content: tertiaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }), fields && fields.length !== 0 && _jsx(FieldValueList, { variant: 'inline', fields: fields })] }), onAcceptHandler ? (_jsxs(CardFooter, { justify: onDismissHandler ? 'between' : 'end', children: [onDismissHandler && (_jsx(Button, { onClick: onDismissHandler, children: dismissLabel ?? t('decline') })), acceptButton] })) : (_jsx(CardFooter, { justify: 'end', children: _jsx(Button, { variant: 'primary', onClick: onDismissHandler, children: dismissLabel ?? t('close') }) }))] }));
 });
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n Status,\n Text,\n defaultThemeProp,\n Flex,\n StyledText,\n FieldValueList,\n StyledFieldValueList,\n useI18n,\n useDirection,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n useConsolidatedRef,\n useEscape,\n CardFooter\n} from '@pega/cosmos-react-core';\nimport type {\n StatusProps,\n ForwardRefForwardPropsComponent,\n FieldValueListProps,\n NoChildrenProp,\n RequireAtLeastOne\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n NoChildrenProp & {\n /** Ref to Component. /\n ref?: Ref<HTMLDivElement>;\n /* Name of the icon used in header. /\n icon: string;\n /* Interaction title. /\n title: string;\n /* Primary information of the notification. For example caller name . /\n primaryText: string;\n /* Secondary information of the notification. For example phone number of the caller /\n secondaryText?: string;\n /* Represents the current status of interaction. /\n status: { variant: StatusProps['variant']; text: string };\n /* Information structured as field values to be displayed below main section. /\n fields?: FieldValueListProps['fields'];\n /* Timeout definition /\n incomingNotificationTimeout?: {\n startTime: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n };\n /* Callback when accept button is clicked. /\n onAccept?: () => void;\n /* Callback when decline or 'x' button is clicked. /\n onDismiss?: () => void;\n },\n 'onAccept' \| 'onDismiss'\n>;\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-block-start: calc(2 ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\n z-index: ${base['z-index'].backdrop - 1};\n color: ${base.colors.white};\n animation: SlideIn calc(4 * ${base.animation.speed});\n padding: calc(0.75 * ${base.spacing}) 0;\n box-shadow: ${base.shadow.low};\n\n &&& {\n background-color: ${base.colors.slate['extra-dark']};\n }\n\n @keyframes SlideIn {\n 0% {\n ${rtl\n ? css`\n transform: translateX(calc(-100% - 1rem));\n `\n : css`\n transform: translateX(calc(100% + 1rem));\n `}\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n overflow: auto;\n\n ${StyledText} {\n color: ${base.colors.white};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n }\n }\n\n ${StyledFieldValueList} {\n border-block-start: solid 0.0625rem ${base.palette['border-line']};\n padding-block-start: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledLabel} {\n color: ${base.colors.white};\n }\n }\n\n @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\n\nconst InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps> =\n forwardRef(function InteractionNotification(\n {\n icon,\n title,\n primaryText,\n secondaryText,\n status,\n fields,\n incomingNotificationTimeout,\n onAccept,\n onDismiss\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) {\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n acceptButtonRef.current?.focus();\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n onDismiss?.();\n });\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDismiss?.();\n },\n containerRef.current,\n [onDismiss]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDismiss\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAccept}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismiss}\n ref={acceptButtonRef}\n >\n {t('accept')}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n {t('accept')}\n </Button>\n );\n\n return (\n <StyledInteractionNotification\n ref={containerRef}\n data-app-region\n role='alertdialog'\n aria-label={title}\n >\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={icon} />\n <Text variant='h2'>{title}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ gap: 2 }}>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <Text variant='h1' as='span'>\n {primaryText}\n </Text>\n {secondaryText && (\n <Text variant='h5' as='span'>\n {secondaryText}\n </Text>\n )}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\n\n {onAccept ? (\n <CardFooter justify={onDismiss ? 'between' : 'end'}>\n {onDismiss && <Button onClick={onDismiss}>{t('decline')}</Button>}\n {acceptButton}\n </CardFooter>\n ) : (\n <CardFooter justify='end'>\n <Button variant='primary' onClick={onDismiss}>\n {t('close')}\n </Button>\n </CardFooter>\n )}\n </StyledInteractionNotification>\n );\n });\n\nexport default InteractionNotification;\n"]}
1	+ {"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n Status,\n Text,\n defaultThemeProp,\n Flex,\n StyledText,\n FieldValueList,\n StyledFieldValueList,\n useI18n,\n useDirection,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n useConsolidatedRef,\n useEscape,\n CardFooter,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type {\n StatusProps,\n ForwardRefForwardPropsComponent,\n FieldValueListProps,\n NoChildrenProp,\n RequireAtLeastOne\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\ninterface InfoText {\n /** Visually hidden description for accessibility purposes. /\n description: string;\n /* Information text. /\n text: string;\n}\n\n/* A simple callback or an object to customize notification button properties. /\ntype NotificationAction =\n \| (() => void)\n \| {\n /* Custom label for the button. /\n text?: string;\n /* Handler invoked when the button is clicked. /\n handler: () => void;\n };\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n NoChildrenProp & {\n /* Ref to Component. /\n ref?: Ref<HTMLDivElement>;\n /* Name of the icon used in header. /\n icon: string;\n /* Interaction title. /\n title: string;\n /* Represents the current status of interaction. /\n status: { variant: StatusProps['variant']; text: string };\n /* Information structured as field values to be displayed below main section. /\n fields?: FieldValueListProps['fields'];\n /* Timeout definition /\n incomingNotificationTimeout?: {\n startTime: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n };\n /* Callback when accept button is clicked. /\n onAccept?: NotificationAction;\n /* Callback when dismiss button is clicked. /\n onDismiss?: NotificationAction;\n } & (\n \| {\n /* Primary information of the notification. For example caller name. /\n primaryText: InfoText;\n /* Secondary information of the notification. For example phone number of the caller. /\n secondaryText?: InfoText;\n /* Tertiary information of the notification. For example role of the caller. /\n tertiaryText?: InfoText;\n }\n \| {\n /* Primary information of the notification. For example caller name. /\n primaryText: string;\n /* Secondary information of the notification. For example phone number of the caller. /\n secondaryText?: string;\n /* Tertiary information of the notification. For example role of the caller. /\n tertiaryText?: string;\n }\n ),\n 'onAccept' \| 'onDismiss'\n>;\n\ninterface NotificationTextProps {\n /* Information of the notification. /\n content: InfoText \| string;\n /* Heading variant for the notification text. /\n variant?: 'h1' \| 'h5';\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-block-start: calc(2 ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\n z-index: ${base['z-index'].backdrop - 1};\n color: ${base.colors.white};\n animation: SlideIn calc(4 * ${base.animation.speed});\n padding: calc(0.75 * ${base.spacing}) 0;\n box-shadow: ${base.shadow.low};\n\n &&& {\n background-color: ${base.colors.slate['extra-dark']};\n }\n\n @keyframes SlideIn {\n 0% {\n ${rtl\n ? css`\n transform: translateX(calc(-100% - 1rem));\n `\n : css`\n transform: translateX(calc(100% + 1rem));\n `}\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n overflow: auto;\n\n ${StyledText} {\n color: ${base.colors.white};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n }\n }\n\n ${StyledFieldValueList} {\n border-block-start: solid 0.0625rem ${base.palette['border-line']};\n padding-block-start: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledLabel} {\n color: ${base.colors.white};\n }\n }\n\n @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\n\nconst NotificationText = ({ content, variant = 'h5' }: NotificationTextProps) => {\n const isString = typeof content === 'string';\n\n const text = (\n <Text variant={variant} as='span'>\n {isString ? content : content.text}\n </Text>\n );\n\n return isString ? (\n text\n ) : (\n <div>\n <VisuallyHiddenText>{`${content.description} - `}</VisuallyHiddenText>\n {text}\n </div>\n );\n};\n\nconst InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps> =\n forwardRef(function InteractionNotification(\n {\n icon,\n title,\n primaryText,\n secondaryText,\n tertiaryText,\n status,\n fields,\n incomingNotificationTimeout,\n onAccept,\n onDismiss\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) {\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n const onAcceptHandler = typeof onAccept === 'function' ? onAccept : onAccept?.handler;\n const onDismissHandler = typeof onDismiss === 'function' ? onDismiss : onDismiss?.handler;\n const acceptLabel = typeof onAccept !== 'function' ? onAccept?.text : t('accept');\n const dismissLabel = typeof onDismiss !== 'function' ? onDismiss?.text : undefined;\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n acceptButtonRef.current?.focus();\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () =>\n onDismissHandler?.()\n );\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDismissHandler?.();\n },\n containerRef.current,\n [onDismissHandler]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${\n typeof primaryText === 'string' ? primaryText : primaryText.description\n } ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDismissHandler\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAcceptHandler}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismissHandler}\n ref={acceptButtonRef}\n >\n {acceptLabel}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAcceptHandler} ref={acceptButtonRef}>\n {acceptLabel}\n </Button>\n );\n\n return (\n <StyledInteractionNotification\n ref={containerRef}\n data-app-region\n role='alertdialog'\n aria-label={title}\n >\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={icon} />\n <Text variant='h2'>{title}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ gap: 2 }}>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <NotificationText content={primaryText} variant='h1' />\n {secondaryText && <NotificationText content={secondaryText} />}\n {tertiaryText && <NotificationText content={tertiaryText} />}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\n\n {onAcceptHandler ? (\n <CardFooter justify={onDismissHandler ? 'between' : 'end'}>\n {onDismissHandler && (\n <Button onClick={onDismissHandler}>{dismissLabel ?? t('decline')}</Button>\n )}\n {acceptButton}\n </CardFooter>\n ) : (\n <CardFooter justify='end'>\n <Button variant='primary' onClick={onDismissHandler}>\n {dismissLabel ?? t('close')}\n </Button>\n </CardFooter>\n )}\n </StyledInteractionNotification>\n );\n });\n\nexport default InteractionNotification;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Predictions.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"~~AAeA~~,OAAO,KAAK,EACV,+BAA+B,EAIhC,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAC;AA+FxD,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,~~CAqClE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"Predictions.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,+BAA+B,EAIhC,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAC;AA+FxD,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAgDlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { registerIcon, useI18n, Modal, useModalManager, InfoDialog, StyledLabel, Text, SummaryList, defaultThemeProp } from '@pega/cosmos-react-core';
+import { registerIcon, useI18n, Modal, useModalManager, InfoDialog, StyledLabel, Text, SummaryList, defaultThemeProp, useTheme, colorIconMapping } from '@pega/cosmos-react-core';
 import * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';
 import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
 registerIcon(polarisIcon, informationIcon);
@@ -48,6 +48,7 @@ const PredictionsViewAllModal = ({ count, progress, ...restProps }) => {
 };
 const Predictions = forwardRef(function Predictions({ count, items, progress, ...restProps }, ref) {
     const t = useI18n();
+    const theme = useTheme();
     const { create } = useModalManager();
     const viewAllModalRef = useRef();
     useEffect(() => {
@@ -57,7 +58,15 @@ const Predictions = forwardRef(function Predictions({ count, items, progress, ..
             count
         });
     }, [items, progress, count]);
-    return (_jsx(PredictionsList, { ...restProps, ref: ref, name: t('predictions'), headingTag: 'h3', icon: 'polaris', count: count, items: items?.slice(0, 3), progress: progress, onViewAll: () => {
+    return (_jsx(PredictionsList, { ...restProps, ref: ref, name: t('predictions'), headingTag: 'h3', icon: theme.components['case-view'].utilities['icon-color']
+            ? {
+                name: 'polaris',
+                background: colorIconMapping(theme, 'polaris'),
+                shape: 'circle'
+            }
+            : {
+                name: 'polaris'
+            }, count: count, items: items?.slice(0, 3), progress: progress, onViewAll: () => {
             viewAllModalRef.current = create(PredictionsViewAllModal, {
                 items,
                 progress,