npm - @pega/cosmos-react-work - Versions diffs - 10.0.0-build.5.9 → 10.0.0-build.7.0 - Mend

@pega/cosmos-react-work 10.0.0-build.5.9 → 10.0.0-build.7.0

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

Files changed (25) hide show

package/lib/components/HierarchicalAssignments/nodeItems/AssignmentItem.js CHANGED Viewed

@@ -17,7 +17,7 @@ const StyledVisuallyHiddenText = styled(VisuallyHiddenText) `
 export const PauseTextNode = ({ children }) => {
     return (_jsxs(_Fragment, { children: [children, _jsx(StyledHiddenText, { children: ", " })] }));
 };
-const AssignmentItem = ({ name, processName, assigneeName, urgency, sla, depth, id, assigneeId, onOpen, onAssigneeClick, caseId, setSize, posInset }) => {
+const AssignmentItem = ({ name, processName, assigneeName, urgency, sla, depth, id, assigneeId, onOpen, onAssigneeClick, caseId, setSize, posInset, openLabel, meta }) => {
     const { firstNodeId, focusedNodeId, lastNodeId, changeFocusHandler, caseIdExpandList, isMediumOrAbove, parentRef, nodeInternalFocus, setNodeInternalFocusHandler, reverseTabFlow } = useContext(AssignmentTreeContext);
     const assignmentRef = useRef(null);
     const firstLevelAssignment = depth === initialDepth;
@@ -35,6 +35,29 @@ const AssignmentItem = ({ name, processName, assigneeName, urgency, sla, depth,
     const { locale } = useConfiguration();
     const [assigneeEl, setAssigneeElement] = useElement();
     const testIds = useTestIds('', getAssignmentTestIds);
+    const buttonLabel = openLabel || t('go');
+    const metaItems = meta ?? [];
+    const metaListItems = [
+        _jsxs(_Fragment, { children: [_jsx(StyledAssigneeText, { onClick: (e) => {
+                        onAssigneeClick(assigneeId, e);
+                    }, variant: 'link', ref: setAssigneeElement, "data-testid": testIds.assignee, tabIndex: childElementsTabIndex, isMediumOrAbove: isMediumOrAbove, children: _jsx(PauseTextNode, { children: assigneeName }) }), _jsx(Tooltip, { target: assigneeEl, smart: true, children: assigneeName })] })
+    ];
+    if (metaItems.length > 0) {
+        metaListItems.push(...metaItems);
+    }
+    else if (!meta) {
+        if (sla) {
+            metaListItems.push(_jsx(Text, { variant: 'secondary', "data-testid": testIds.sla, children: _jsx(PauseTextNode, { children: Date.parse(sla) ? (t('assignments_sla', [
+                        formatDateTime(parseToDate(sla), {
+                            t,
+                            locale,
+                            format: 'medium',
+                            variant: 'relative'
+                        })
+                    ])) : (_jsx(NoValue, {})) }) }));
+        }
+        metaListItems.push(_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', as: StyledLabelContainer, "data-testid": testIds.urgency, children: t('assignment_item_urgency') }), _jsx(Text, { variant: 'secondary', children: _jsx(PauseTextNode, { children: urgency }) })] }));
+    }
     const navigationHandler = useCallback((e) => {
         if (['ArrowUp', 'ArrowDown'].includes(e.key))
             e.preventDefault();
@@ -97,20 +120,7 @@ const AssignmentItem = ({ name, processName, assigneeName, urgency, sla, depth,
                 cols: isMediumOrAbove ? '2fr 2fr auto' : '2fr 0.5fr',
                 colGap: isMediumOrAbove ? 3 : 0,
                 rows: isMediumOrAbove ? 'repeat(1, auto)' : 'repeat(2, auto)'
-            }, as: StyledAssignmentItem, children: [_jsx(StyledVisuallyHiddenText, { children: `${t('assignment_announcement_label')}` }), _jsx(Flex, { "data-testid": testIds.label, container: { alignItems: 'center' }, as: StyledProcessContainer, depth: styledElementDepth, children: _jsx(PauseTextNode, { children: _jsx(AssignmentDetails, { processName: processName, name: name }) }) }), _jsx(Flex, { "data-testid": testIds.assignee, container: { justify: isMediumOrAbove ? 'end' : 'start' }, as: StyledAssigneeContainer, isMediumOrAbove: isMediumOrAbove, depth: styledElementDepth, variant: 'secondary', children: _jsx(StyledAssignmentItemMetaList, { wrapItems: true, isMediumOrAbove: isMediumOrAbove, items: [
-                            _jsxs(_Fragment, { children: [_jsx(StyledAssigneeText, { onClick: (e) => {
-                                            onAssigneeClick(assigneeId, e);
-                                        }, variant: 'link', ref: setAssigneeElement, "data-testid": testIds.assignee, tabIndex: childElementsTabIndex, isMediumOrAbove: isMediumOrAbove, children: _jsx(PauseTextNode, { children: assigneeName }) }), _jsx(Tooltip, { target: assigneeEl, smart: true, children: assigneeName })] }),
-                            sla && (_jsx(Text, { variant: 'secondary', "data-testid": testIds.sla, children: _jsx(PauseTextNode, { children: Date.parse(sla) ? (t('assignments_sla', [
-                                        formatDateTime(parseToDate(sla), {
-                                            t,
-                                            locale,
-                                            format: 'medium',
-                                            variant: 'relative'
-                                        })
-                                    ])) : (_jsx(NoValue, {})) }) })),
-                            _jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', as: StyledLabelContainer, "data-testid": testIds.urgency, children: t('assignment_item_urgency') }), _jsx(Text, { variant: 'secondary', children: _jsx(PauseTextNode, { children: urgency }) })] })
-                        ] }) }), _jsx(Flex, { as: StyledActionContainer, container: { justify: 'end' }, isMediumOrAbove: isMediumOrAbove, children: onOpen && (_jsx(Button, { "data-testid": testIds.action, compact: true, variant: 'primary', onClick: (e) => onOpen(id, e), tabIndex: childElementsTabIndex, "aria-label": `${t('go')} - ${assignmentDetail}${caseId ? ` ${caseId}` : ''}`, children: t('go') })) })] }) }));
+            }, as: StyledAssignmentItem, children: [_jsx(StyledVisuallyHiddenText, { children: `${t('assignment_announcement_label')}` }), _jsx(Flex, { "data-testid": testIds.label, container: { alignItems: 'center' }, as: StyledProcessContainer, depth: styledElementDepth, children: _jsx(PauseTextNode, { children: _jsx(AssignmentDetails, { processName: processName, name: name }) }) }), _jsx(Flex, { "data-testid": testIds.assignee, container: { justify: isMediumOrAbove ? 'end' : 'start' }, as: StyledAssigneeContainer, isMediumOrAbove: isMediumOrAbove, depth: styledElementDepth, variant: 'secondary', children: _jsx(StyledAssignmentItemMetaList, { wrapItems: true, isMediumOrAbove: isMediumOrAbove, items: metaListItems }) }), _jsx(Flex, { as: StyledActionContainer, container: { justify: 'end' }, isMediumOrAbove: isMediumOrAbove, children: onOpen && (_jsx(Button, { "data-testid": testIds.action, compact: true, variant: 'primary', onClick: (e) => onOpen(id, e), tabIndex: childElementsTabIndex, "aria-label": `${buttonLabel} - ${assignmentDetail}${caseId ? ` ${caseId}` : ''}`, children: buttonLabel })) })] }) }));
 };
 export default withTestIds(AssignmentItem, getAssignmentTestIds);
 //# sourceMappingURL=AssignmentItem.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AssignmentItem.js","sourceRoot":"","sources":["../../../../src/components/HierarchicalAssignments/nodeItems/AssignmentItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useContext, useCallback } from 'react';\nimport type { MouseEvent, KeyboardEvent, ReactNode, FocusEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Grid,\n Flex,\n Button,\n useI18n,\n withTestIds,\n useTestIds,\n cap,\n useDirection,\n Text,\n VisuallyHiddenText,\n useElement,\n Tooltip,\n formatDateTime,\n useConfiguration,\n parseToDate,\n NoValue\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledAssignmentItem,\n StyledProcessContainer,\n StyledActionContainer,\n StyledAssigneeContainer,\n StyledLabelContainer,\n StyledNode,\n StyledAssigneeText,\n StyledAssignmentItemMetaList\n} from '../Assignments.styles';\nimport type { AssignmentProps } from '../HierarchicalAssignments.types';\nimport { getAssignmentTestIds } from '../HierarchicalAssignments.test-ids';\nimport AssignmentTreeContext from '../AssignmentContext';\nimport AssignmentDetails from '../AssignmentDetail';\nimport { restrictDepth, initialDepth } from '../helpers';\n\nimport useNodeFocus from './useNodeFocus';\n\ninterface AssignmentItemProps extends AssignmentProps {\n /** Property defines the node's level /\n depth: number;\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 StyledHiddenText = styled(VisuallyHiddenText)`\n width: 0;\n`;\n\nconst StyledVisuallyHiddenText = styled(VisuallyHiddenText)`\n position: fixed;\n`;\n\nexport const PauseTextNode = ({ children }: { children: ReactNode }) => {\n return (\n <>\n {children}\n <StyledHiddenText>, </StyledHiddenText>\n </>\n );\n};\n\nconst AssignmentItem = ({\n name,\n processName,\n assigneeName,\n urgency,\n sla,\n depth,\n id,\n assigneeId,\n onOpen,\n onAssigneeClick,\n caseId,\n setSize,\n posInset\n}: AssignmentItemProps) => {\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 assignmentRef = useRef<HTMLLIElement>(null);\n const firstLevelAssignment = depth === initialDepth;\n const styledElementDepth = restrictDepth(depth);\n const childElementsTabIndex = nodeInternalFocus ? 0 : -1;\n\n const { parentNodeTabIndex, lastNode, escapeNodeHandler } = useNodeFocus(\n id,\n assignmentRef,\n parentRef,\n {\n firstNodeId,\n focusedNodeId,\n lastNodeId,\n nodeInternalFocus,\n reverseTabFlow\n }\n );\n\n const { start } = useDirection();\n\n const t = useI18n();\n const { locale } = useConfiguration();\n const [assigneeEl, setAssigneeElement] = useElement<HTMLElement>();\n const testIds = useTestIds('', getAssignmentTestIds);\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 (!firstLevelAssignment) {\n changeFocusHandler(id, 'left', caseIdExpandList);\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, firstLevelAssignment, caseIdExpandList]\n );\n const assignmentDetail = processName ? `${processName} - ${name}` : name;\n\n return (\n <StyledNode\n data-testid={testIds.root}\n role='treeitem'\n aria-selected={parentNodeTabIndex === 0}\n aria-labelledby={id}\n ref={assignmentRef}\n onKeyDown={(e: KeyboardEvent<HTMLElement>) => {\n e.stopPropagation();\n if (e.key === 'Enter' && !nodeInternalFocus) {\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 tabIndex={nodeInternalFocus ? -1 : parentNodeTabIndex}\n isFocus={nodeInternalFocus ? false : parentNodeTabIndex === 0}\n lastNode={lastNode}\n depth={styledElementDepth}\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 isFirstAssignmentChild={posInset === 1}\n >\n <Grid\n container={{\n alignItems: 'center',\n cols: isMediumOrAbove ? '2fr 2fr auto' : '2fr 0.5fr',\n colGap: isMediumOrAbove ? 3 : 0,\n rows: isMediumOrAbove ? 'repeat(1, auto)' : 'repeat(2, auto)'\n }}\n as={StyledAssignmentItem}\n >\n <StyledVisuallyHiddenText>{`${t('assignment_announcement_label')}`}</StyledVisuallyHiddenText>\n <Flex\n data-testid={testIds.label}\n container={{ alignItems: 'center' }}\n as={StyledProcessContainer}\n depth={styledElementDepth}\n >\n <PauseTextNode>\n <AssignmentDetails processName={processName} name={name} />\n </PauseTextNode>\n </Flex>\n <Flex\n data-testid={testIds.assignee}\n container={{ justify: isMediumOrAbove ? 'end' : 'start' }}\n as={StyledAssigneeContainer}\n isMediumOrAbove={isMediumOrAbove}\n depth={styledElementDepth}\n variant='secondary'\n >\n <StyledAssignmentItemMetaList\n wrapItems\n isMediumOrAbove={isMediumOrAbove}\n items={[\n <>\n <StyledAssigneeText\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onAssigneeClick(assigneeId, e);\n }}\n variant='link'\n ref={setAssigneeElement}\n data-testid={testIds.assignee}\n tabIndex={childElementsTabIndex}\n isMediumOrAbove={isMediumOrAbove}\n >\n <PauseTextNode>{assigneeName}</PauseTextNode>\n </StyledAssigneeText>\n <Tooltip target={assigneeEl} smart>\n {assigneeName}\n </Tooltip>\n </>,\n sla && (\n <Text variant='secondary' data-testid={testIds.sla}>\n <PauseTextNode>\n {Date.parse(sla) ? (\n t('assignments_sla', [\n formatDateTime(parseToDate(sla), {\n t,\n locale,\n format: 'medium',\n variant: 'relative'\n })\n ])\n ) : (\n <NoValue />\n )}\n </PauseTextNode>\n </Text>\n ),\n <>\n <Text variant='secondary' as={StyledLabelContainer} data-testid={testIds.urgency}>\n {t('assignment_item_urgency')}\n </Text>\n <Text variant='secondary'>\n <PauseTextNode>{urgency}</PauseTextNode>\n </Text>\n </>\n ]}\n />\n </Flex>\n <Flex\n as={StyledActionContainer}\n container={{ justify: 'end' }}\n isMediumOrAbove={isMediumOrAbove}\n >\n {onOpen && (\n <Button\n data-testid={testIds.action}\n compact\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n tabIndex={childElementsTabIndex}\n aria-label={`${t('go')} - ${assignmentDetail}${caseId ? ` ${caseId}` : ''}`}\n >\n {t('go')}\n </Button>\n )}\n </Flex>\n </Grid>\n </StyledNode>\n );\n};\n\nexport default withTestIds(AssignmentItem, getAssignmentTestIds);\n"]}
1	+ {"version":3,"file":"AssignmentItem.js","sourceRoot":"","sources":["../../../../src/components/HierarchicalAssignments/nodeItems/AssignmentItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useContext, useCallback } from 'react';\nimport type { MouseEvent, KeyboardEvent, ReactNode, FocusEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Grid,\n Flex,\n Button,\n useI18n,\n withTestIds,\n useTestIds,\n cap,\n useDirection,\n Text,\n VisuallyHiddenText,\n useElement,\n Tooltip,\n formatDateTime,\n useConfiguration,\n parseToDate,\n NoValue\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledAssignmentItem,\n StyledProcessContainer,\n StyledActionContainer,\n StyledAssigneeContainer,\n StyledLabelContainer,\n StyledNode,\n StyledAssigneeText,\n StyledAssignmentItemMetaList\n} from '../Assignments.styles';\nimport type { AssignmentProps } from '../HierarchicalAssignments.types';\nimport { getAssignmentTestIds } from '../HierarchicalAssignments.test-ids';\nimport AssignmentTreeContext from '../AssignmentContext';\nimport AssignmentDetails from '../AssignmentDetail';\nimport { restrictDepth, initialDepth } from '../helpers';\n\nimport useNodeFocus from './useNodeFocus';\n\ninterface AssignmentItemProps extends AssignmentProps {\n /** Property defines the node's level /\n depth: number;\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 /* label for the open button. /\n openLabel?: string;\n /* MetaList element with info related to the assignment. */\n meta?: ReactNode[];\n}\n\nconst StyledHiddenText = styled(VisuallyHiddenText)`\n width: 0;\n`;\n\nconst StyledVisuallyHiddenText = styled(VisuallyHiddenText)`\n position: fixed;\n`;\n\nexport const PauseTextNode = ({ children }: { children: ReactNode }) => {\n return (\n <>\n {children}\n <StyledHiddenText>, </StyledHiddenText>\n </>\n );\n};\n\nconst AssignmentItem = ({\n name,\n processName,\n assigneeName,\n urgency,\n sla,\n depth,\n id,\n assigneeId,\n onOpen,\n onAssigneeClick,\n caseId,\n setSize,\n posInset,\n openLabel,\n meta\n}: AssignmentItemProps) => {\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 assignmentRef = useRef<HTMLLIElement>(null);\n const firstLevelAssignment = depth === initialDepth;\n const styledElementDepth = restrictDepth(depth);\n const childElementsTabIndex = nodeInternalFocus ? 0 : -1;\n\n const { parentNodeTabIndex, lastNode, escapeNodeHandler } = useNodeFocus(\n id,\n assignmentRef,\n parentRef,\n {\n firstNodeId,\n focusedNodeId,\n lastNodeId,\n nodeInternalFocus,\n reverseTabFlow\n }\n );\n\n const { start } = useDirection();\n\n const t = useI18n();\n const { locale } = useConfiguration();\n const [assigneeEl, setAssigneeElement] = useElement<HTMLElement>();\n const testIds = useTestIds('', getAssignmentTestIds);\n const buttonLabel = openLabel \|\| t('go');\n const metaItems = meta ?? [];\n\n const metaListItems: ReactNode[] = [\n <>\n <StyledAssigneeText\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onAssigneeClick(assigneeId, e);\n }}\n variant='link'\n ref={setAssigneeElement}\n data-testid={testIds.assignee}\n tabIndex={childElementsTabIndex}\n isMediumOrAbove={isMediumOrAbove}\n >\n <PauseTextNode>{assigneeName}</PauseTextNode>\n </StyledAssigneeText>\n <Tooltip target={assigneeEl} smart>\n {assigneeName}\n </Tooltip>\n </>\n ];\n\n if (metaItems.length > 0) {\n metaListItems.push(...metaItems);\n } else if (!meta) {\n if (sla) {\n metaListItems.push(\n <Text variant='secondary' data-testid={testIds.sla}>\n <PauseTextNode>\n {Date.parse(sla) ? (\n t('assignments_sla', [\n formatDateTime(parseToDate(sla), {\n t,\n locale,\n format: 'medium',\n variant: 'relative'\n })\n ])\n ) : (\n <NoValue />\n )}\n </PauseTextNode>\n </Text>\n );\n }\n\n metaListItems.push(\n <>\n <Text variant='secondary' as={StyledLabelContainer} data-testid={testIds.urgency}>\n {t('assignment_item_urgency')}\n </Text>\n <Text variant='secondary'>\n <PauseTextNode>{urgency}</PauseTextNode>\n </Text>\n </>\n );\n }\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 (!firstLevelAssignment) {\n changeFocusHandler(id, 'left', caseIdExpandList);\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, firstLevelAssignment, caseIdExpandList]\n );\n const assignmentDetail = processName ? `${processName} - ${name}` : name;\n\n return (\n <StyledNode\n data-testid={testIds.root}\n role='treeitem'\n aria-selected={parentNodeTabIndex === 0}\n aria-labelledby={id}\n ref={assignmentRef}\n onKeyDown={(e: KeyboardEvent<HTMLElement>) => {\n e.stopPropagation();\n if (e.key === 'Enter' && !nodeInternalFocus) {\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 tabIndex={nodeInternalFocus ? -1 : parentNodeTabIndex}\n isFocus={nodeInternalFocus ? false : parentNodeTabIndex === 0}\n lastNode={lastNode}\n depth={styledElementDepth}\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 isFirstAssignmentChild={posInset === 1}\n >\n <Grid\n container={{\n alignItems: 'center',\n cols: isMediumOrAbove ? '2fr 2fr auto' : '2fr 0.5fr',\n colGap: isMediumOrAbove ? 3 : 0,\n rows: isMediumOrAbove ? 'repeat(1, auto)' : 'repeat(2, auto)'\n }}\n as={StyledAssignmentItem}\n >\n <StyledVisuallyHiddenText>{`${t('assignment_announcement_label')}`}</StyledVisuallyHiddenText>\n <Flex\n data-testid={testIds.label}\n container={{ alignItems: 'center' }}\n as={StyledProcessContainer}\n depth={styledElementDepth}\n >\n <PauseTextNode>\n <AssignmentDetails processName={processName} name={name} />\n </PauseTextNode>\n </Flex>\n <Flex\n data-testid={testIds.assignee}\n container={{ justify: isMediumOrAbove ? 'end' : 'start' }}\n as={StyledAssigneeContainer}\n isMediumOrAbove={isMediumOrAbove}\n depth={styledElementDepth}\n variant='secondary'\n >\n <StyledAssignmentItemMetaList\n wrapItems\n isMediumOrAbove={isMediumOrAbove}\n items={metaListItems}\n />\n </Flex>\n <Flex\n as={StyledActionContainer}\n container={{ justify: 'end' }}\n isMediumOrAbove={isMediumOrAbove}\n >\n {onOpen && (\n <Button\n data-testid={testIds.action}\n compact\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n tabIndex={childElementsTabIndex}\n aria-label={`${buttonLabel} - ${assignmentDetail}${caseId ? ` ${caseId}` : ''}`}\n >\n {buttonLabel}\n </Button>\n )}\n </Flex>\n </Grid>\n </StyledNode>\n );\n};\n\nexport default withTestIds(AssignmentItem, getAssignmentTestIds);\n"]}

package/lib/components/Tasks/TaskCards.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskCards.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCards.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,SAAS,GAAI,wCAAwC,kBAAkB,~~4CAkD5E~~,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"TaskCards.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCards.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,SAAS,GAAI,wCAAwC,kBAAkB,4CAiD5E,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/Tasks/TaskCards.js CHANGED Viewed

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { Grid, Modal, useModalManager, useTestIds } from '@pega/cosmos-react-core';
+import { Grid, Modal, useModalManager, useTestIds, useTheme } from '@pega/cosmos-react-core';
 import TaskList from './TaskList';
 import TaskCard from './TaskCard';
 import { getTasksTestIds } from './Tasks.test-ids';
 const TaskCards = ({ groups, testId, name, ...restProps }) => {
     const testIds = useTestIds(testId, getTasksTestIds);
+    const theme = useTheme();
     const { create: createModal } = useModalManager();
     const modalMethodsRef = useRef();
     const baseGroups = groups.length > 0 ? groups : [{ id: 'default', name: name ?? '', items: [] }];
@@ -30,10 +31,10 @@ const TaskCards = ({ groups, testId, name, ...restProps }) => {
         });
     };
     return (_jsx(Grid, { container: {
-            cols: 'repeat(auto-fill, minmax(min(18rem, 100%), 1fr))',
+            cols: `repeat(auto-fill, minmax(min(100%, max(18rem, calc((100% - 3 * ${theme.base.spacing}) / 4))), 1fr))`,
             gap: 1,
             alignItems: 'stretch'
-        }, md: { container: { cols: 'repeat(3, 1fr)' } }, xl: { container: { cols: 'repeat(4, 1fr)' } }, ...restProps, "data-testid": testIds.cardGrid, children: sortedGroups.map(group => (_jsx(TaskCard, { group: group, onShowMoreClick: handleShowMore }, group.id))) }));
+        }, ...restProps, "data-testid": testIds.cardGrid, children: sortedGroups.map(group => (_jsx(TaskCard, { group: group, onShowMoreClick: handleShowMore }, group.id))) }));
 };
 export default TaskCards;
 //# sourceMappingURL=TaskCards.js.map

package/lib/components/Tasks/TaskCards.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskCards.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCards.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;~~AAGnF~~,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAOnD,MAAM,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAsB,EAAE,EAAE;IAC/E,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;~~IAEpD~~,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,eAAe,GAAG,MAAM,EAAgB,CAAC;IAE/C,MAAM,UAAU,GACd,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,IAAI,CACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5D,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,KAAqB,EAAE,EAAE;QAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,MAAM;gBAAE,OAAO,IAAI,CAAC;YAEzB,OAAO;gBACL,GAAG,IAAI;gBACP,MAAM,EAAE,CAAC,GAAG,IAA+B,EAAE,EAAE;oBAC7C,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;oBACnC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;gBAClB,CAAC;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,EAAE;YAC3C,OAAO,EAAE,KAAK,CAAC,IAAI;YACnB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;YACxC,QAAQ,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,EAAE,kBAAkB,SAAG;SAC/D,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,~~kDAAkD~~;~~YACxD~~,GAAG,EAAE,CAAC;YACN,UAAU,EAAE,SAAS;SACtB,~~EACD~~,~~EAAE,EAAE,EAAE,~~SAAS,~~EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAC7C,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,KACzC,SAAS,~~iBACA,OAAO,CAAC,QAAQ,YAE5B,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACzB,KAAC,QAAQ,IAAgB,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,IAAvD,KAAK,CAAC,EAAE,CAAmD,CAC3E,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useRef } from 'react';\n\nimport { Grid, Modal, useModalManager, useTestIds } from '@pega/cosmos-react-core';\nimport type { ModalMethods, TestIdProp } from '@pega/cosmos-react-core';\n\nimport TaskList from './TaskList';\nimport TaskCard from './TaskCard';\nimport type { TaskGroupProps } from './Tasks';\nimport { getTasksTestIds } from './Tasks.test-ids';\n\nexport interface TaskCardsGridProps extends TestIdProp {\n groups: TaskGroupProps[];\n name?: string;\n}\n\nconst TaskCards = ({ groups, testId, name, ...restProps }: TaskCardsGridProps) => {\n const testIds = useTestIds(testId, getTasksTestIds);\n\n const { create: createModal } = useModalManager();\n const modalMethodsRef = useRef<ModalMethods>();\n\n const baseGroups: TaskGroupProps[] =\n groups.length > 0 ? groups : [{ id: 'default', name: name ?? '', items: [] }];\n const sortedGroups = [...baseGroups].sort(\n (a, b) => (a.isApprovals ? 1 : 0) - (b.isApprovals ? 1 : 0)\n );\n\n const handleShowMore = (group: TaskGroupProps) => {\n const updatedItems = group.items.map(item => {\n const { onOpen } = item;\n if (!onOpen) return item;\n\n return {\n ...item,\n onOpen: (...args: Parameters<typeof onOpen>) => {\n modalMethodsRef.current?.dismiss();\n onOpen(...args);\n }\n };\n });\n\n modalMethodsRef.current = createModal(Modal, {\n heading: group.name,\n count: group.count ?? group.items.length,\n children: <TaskList items={updatedItems} openButtonIconOnly />\n });\n };\n\n return (\n <Grid\n container={{\n cols: 'repeat(auto-fill, minmax(min(18rem, 100%), 1fr))~~',\~~n gap: 1,\n alignItems: 'stretch'\n }}\n ~~md=~~{~~{ container: { cols: 'repeat(3, 1fr)' } }}\n xl={{ container: { cols: 'repeat(4, 1fr)' } }}\n {~~...restProps}\n data-testid={testIds.cardGrid}\n >\n {sortedGroups.map(group => (\n <TaskCard key={group.id} group={group} onShowMoreClick={handleShowMore} />\n ))}\n </Grid>\n );\n};\n\nexport default TaskCards;\n"]}
1	+ {"version":3,"file":"TaskCards.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCards.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAG7F,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAOnD,MAAM,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAsB,EAAE,EAAE;IAC/E,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,eAAe,GAAG,MAAM,EAAgB,CAAC;IAE/C,MAAM,UAAU,GACd,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,IAAI,CACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5D,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,KAAqB,EAAE,EAAE;QAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,MAAM;gBAAE,OAAO,IAAI,CAAC;YAEzB,OAAO;gBACL,GAAG,IAAI;gBACP,MAAM,EAAE,CAAC,GAAG,IAA+B,EAAE,EAAE;oBAC7C,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;oBACnC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;gBAClB,CAAC;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,EAAE;YAC3C,OAAO,EAAE,KAAK,CAAC,IAAI;YACnB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;YACxC,QAAQ,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,EAAE,kBAAkB,SAAG;SAC/D,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,kEAAkE,KAAK,CAAC,IAAI,CAAC,OAAO,iBAAiB;YAC3G,GAAG,EAAE,CAAC;YACN,UAAU,EAAE,SAAS;SACtB,KACG,SAAS,iBACA,OAAO,CAAC,QAAQ,YAE5B,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACzB,KAAC,QAAQ,IAAgB,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,IAAvD,KAAK,CAAC,EAAE,CAAmD,CAC3E,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useRef } from 'react';\n\nimport { Grid, Modal, useModalManager, useTestIds, useTheme } from '@pega/cosmos-react-core';\nimport type { ModalMethods, TestIdProp } from '@pega/cosmos-react-core';\n\nimport TaskList from './TaskList';\nimport TaskCard from './TaskCard';\nimport type { TaskGroupProps } from './Tasks';\nimport { getTasksTestIds } from './Tasks.test-ids';\n\nexport interface TaskCardsGridProps extends TestIdProp {\n groups: TaskGroupProps[];\n name?: string;\n}\n\nconst TaskCards = ({ groups, testId, name, ...restProps }: TaskCardsGridProps) => {\n const testIds = useTestIds(testId, getTasksTestIds);\n const theme = useTheme();\n\n const { create: createModal } = useModalManager();\n const modalMethodsRef = useRef<ModalMethods>();\n\n const baseGroups: TaskGroupProps[] =\n groups.length > 0 ? groups : [{ id: 'default', name: name ?? '', items: [] }];\n const sortedGroups = [...baseGroups].sort(\n (a, b) => (a.isApprovals ? 1 : 0) - (b.isApprovals ? 1 : 0)\n );\n\n const handleShowMore = (group: TaskGroupProps) => {\n const updatedItems = group.items.map(item => {\n const { onOpen } = item;\n if (!onOpen) return item;\n\n return {\n ...item,\n onOpen: (...args: Parameters<typeof onOpen>) => {\n modalMethodsRef.current?.dismiss();\n onOpen(...args);\n }\n };\n });\n\n modalMethodsRef.current = createModal(Modal, {\n heading: group.name,\n count: group.count ?? group.items.length,\n children: <TaskList items={updatedItems} openButtonIconOnly />\n });\n };\n\n return (\n <Grid\n container={{\n cols: `repeat(auto-fill, minmax(min(100%, max(18rem, calc((100% - 3 * ${theme.base.spacing}) / 4))), 1fr))`,\n gap: 1,\n alignItems: 'stretch'\n }}\n {...restProps}\n data-testid={testIds.cardGrid}\n >\n {sortedGroups.map(group => (\n <TaskCard key={group.id} group={group} onShowMoreClick={handleShowMore} />\n ))}\n </Grid>\n );\n};\n\nexport default TaskCards;\n"]}

package/lib/components/Tasks/TaskList.d.ts CHANGED Viewed

@@ -20,6 +20,8 @@ export interface TaskItemProps extends TestIdProp {
     content?: ReactNode;
     /** An array of actions to add to open task. */
     additionalActions?: ActionsProps['items'];
+    /** Label for the open button */
+    openLabel?: string;
     /**
      * When true, animates the content expanding in.
      * @default true
@@ -49,7 +51,7 @@ interface Announcement {
 export declare const StyledTaskList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
     hasFooter: boolean;
 }>> & string;
-export declare const TaskItem: (({ testId, id, name, avatar, meta, processName, onOpen, caseId, content, headingTag, addAnnouncement, additionalActions, animateOpen, openButtonIconOnly, ...restProps }: TaskItemProps & {
+export declare const TaskItem: (({ testId, id, name, avatar, meta, processName, onOpen, caseId, content, headingTag, addAnnouncement, additionalActions, openLabel, animateOpen, openButtonIconOnly, ...restProps }: TaskItemProps & {
     addAnnouncement?: (announcement: Announcement) => void;
 }) => import("react/jsx-runtime").JSX.Element) & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["open-task"]>;

package/lib/components/Tasks/TaskList.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA4BzE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQpF,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;YAyB1D,CAAC;AA+DH,eAAO,MAAM,QAAQ,~~6KAiBhB~~,aAAa,GAAG;IACjB,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;CACxD;;~~CAkHF~~,CAAC;;;;AAqEF,wBAAyD"}
1	+ {"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA4BzE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQpF,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC1C,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;YAyB1D,CAAC;AA+DH,eAAO,MAAM,QAAQ,wLAkBhB,aAAa,GAAG;IACjB,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;CACxD;;CAmHF,CAAC;;;;AAqEF,wBAAyD"}

package/lib/components/Tasks/TaskList.js CHANGED Viewed

@@ -81,9 +81,10 @@ const StyledOpenTaskButton = styled(Button)(({ theme: { base }, $iconOnly }) =>
   `;
 });
 StyledOpenTaskButton.defaultProps = defaultThemeProp;
-export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processName, onOpen, caseId, content, headingTag, addAnnouncement, additionalActions, animateOpen = true, openButtonIconOnly = false, ...restProps }) => {
+export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processName, onOpen, caseId, content, headingTag, addAnnouncement, additionalActions, openLabel, animateOpen = true, openButtonIconOnly = false, ...restProps }) => {
     const testIds = useTestIds(testId, getTaskItemTestIds);
     const t = useI18n();
+    const buttonLabel = openLabel || t('go');
     const { components: { 'case-view': { summary: { detached } }, tasks: { 'button-style': buttonStyle } } } = useTheme();
     const iconOnly = openButtonIconOnly || buttonStyle === 'icon';
     const contentRef = useRef(null);
@@ -117,7 +118,7 @@ export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processNa
     const openLabelSuffix = ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`;
     const summary = (_jsx(StyledSummaryItem, { visual: avatar, hasProcessName: !!processName, primary: primaryValue, secondary: meta, actions: content
             ? additionalActions && _jsx(Actions, { menuAt: 1, items: additionalActions })
-            : onOpen && (_jsx(StyledOpenTaskButton, { "data-testid": testIds.openTask, "$iconOnly": iconOnly, variant: iconOnly ? 'simple' : 'primary', icon: iconOnly, compact: iconOnly || detached, "aria-label": iconOnly ? `${t('go')}${openLabelSuffix}` : undefined, onClick: (e) => onOpen(id, e), children: iconOnly ? (_jsx(Icon, { name: 'arrow-right' })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: openLabelSuffix })] })) })) }));
+            : onOpen && (_jsx(StyledOpenTaskButton, { "data-testid": testIds.openTask, "$iconOnly": iconOnly, variant: iconOnly ? 'simple' : 'primary', icon: iconOnly, compact: iconOnly || detached, "aria-label": iconOnly ? `${buttonLabel}${openLabelSuffix}` : undefined, onClick: (e) => onOpen(id, e), children: iconOnly ? (_jsx(Icon, { name: 'arrow-right' })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: buttonLabel }), _jsx(VisuallyHiddenText, { children: openLabelSuffix })] })) })) }));
     return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: content ? undefined : StyledSummaryListItem, forwardedAs: content ? 'div' : 'li', children: [summary, content && (_jsx(StyledTaskContent, { ref: contentRef, isAnimating: isAnimating, isExpanded: isExpanded, children: content }))] }));
 }, getTaskItemTestIds);
 const TaskList = forwardRef(function TaskList({ testId, items, hasFooter = false, openButtonIconOnly = false }, ref) {

package/lib/components/Tasks/TaskList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { animations } from '@pega/cosmos-react-core/lib/styles';\nimport {\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp,\n Button,\n Text,\n useI18n,\n VisuallyHiddenText,\n useTestIds,\n useLiveLog,\n debounce,\n Actions,\n withTestIds,\n StyledPrimary,\n StyledText,\n useTheme,\n useTransitionState,\n Icon,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport type { TestIdProp, ActionsProps, HeadingTag } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nregisterIcon(arrowRightIcon);\n\nexport interface TaskItemProps extends TestIdProp {\n id: string;\n /** Name of the task displayed in the list. /\n name: string;\n /* Name of the process for the task. /\n processName?: string;\n /* The heading tag to render task name and process as. /\n headingTag?: HeadingTag;\n /* Avatar element to represent the task's assignee. /\n avatar?: ReactNode;\n /* MetaList element with info related to the task. /\n meta?: ReactNode;\n /* Provide a callback to render a button for a task. /\n onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n /* Case identifier /\n caseId?: string;\n /* Content for the task when open. /\n content?: ReactNode;\n /* An array of actions to add to open task. /\n additionalActions?: ActionsProps['items'];\n /\n When true, animates the content expanding in.\n * @default true\n /\n animateOpen?: boolean;\n /\n When true, renders the open button as a compact icon-only arrow button.\n * @default false\n /\n openButtonIconOnly?: boolean;\n}\n\nexport interface TaskListProps extends TestIdProp {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /\n When true, all task items render the open button as a compact icon-only arrow.\n * @default false\n /\n openButtonIconOnly?: boolean;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n name: string;\n status: 'removed' \| 'added';\n}\n\nexport const StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n const speed = theme.base.animation.speed;\n\n return css`\n ${animations.subProperties}\n animation-name: ${animations.reveal}, ${animations.slideInYStart};\n --slide-in-y-start-offset: -0.5rem;\n --animation-duration: max(calc(${speed} 3), 1ms);\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n\n > li:last-child {\n ${hasFooter\n ? css`\n &:not([role='button']) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `\n : css`\n padding-block-end: 0;\n `}\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledTaskContent = styled.div<{ isAnimating?: boolean; isExpanded?: boolean }>(\n ({ isAnimating, isExpanded, theme }) => {\n const speed = theme.base.animation.speed;\n\n return css`\n display: grid;\n grid-template-rows: ${isExpanded ? '1fr' : '0fr'};\n opacity: ${isExpanded ? 1 : 0};\n transform: translateY(${isExpanded ? '0' : '-0.5rem'});\n transition-duration: max(calc(${speed} * 3), 1ms);\n transition-property: grid-template-rows, opacity, transform;\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 1ms;\n }\n\n > * {\n overflow: ${isAnimating ? 'hidden' : 'visible'};\n }\n `;\n }\n);\n\nStyledTaskContent.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n hasProcessName\n}) => {\n return css`\n ${hasProcessName &&\n css`\n ${StyledPrimary} {\n display: contents;\n\n & > ${StyledText} {\n ${ellipsisOverflow};\n }\n }\n `}\n `;\n});\n\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nconst StyledOpenTaskButton = styled(Button)<{ $iconOnly?: boolean }>(({\n theme: { base },\n $iconOnly\n}) => {\n return css`\n ${!$iconOnly &&\n css`\n padding: 0 calc(2 * ${base.spacing});\n `}\n `;\n});\n\nStyledOpenTaskButton.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n ({\n testId,\n id,\n name,\n avatar,\n meta,\n processName,\n onOpen,\n caseId,\n content,\n headingTag,\n addAnnouncement,\n additionalActions,\n animateOpen = true,\n openButtonIconOnly = false,\n ...restProps\n }: TaskItemProps & {\n addAnnouncement?: (announcement: Announcement) => void;\n }) => {\n const testIds = useTestIds(testId, getTaskItemTestIds);\n const t = useI18n();\n const {\n components: {\n 'case-view': {\n summary: { detached }\n },\n tasks: { 'button-style': buttonStyle }\n }\n } = useTheme();\n\n const iconOnly = openButtonIconOnly \|\| buttonStyle === 'icon';\n\n const contentRef = useRef<HTMLDivElement>(null);\n\n const { state, set } = useTransitionState({\n ref: contentRef,\n property: 'grid-template-rows',\n states: expandCollapseStates,\n defaultState: content && !animateOpen ? 'expanded' : 'collapsed'\n });\n\n const isAnimating = state === 'expanding' \|\| state === 'collapsing';\n const isExpanded = state === 'expanded' \|\| state === 'expanding';\n\n useEffect(() => {\n const shouldBeExpanded = !!content;\n\n if (shouldBeExpanded !== isExpanded) {\n set(shouldBeExpanded ? 'expanded' : 'collapsed');\n }\n }, [content, isExpanded, set]);\n\n useEffect(() => {\n addAnnouncement?.({ name, status: 'added' });\n\n return () => {\n addAnnouncement?.({ name, status: 'removed' });\n };\n }, []);\n\n let primaryValue;\n if (processName) {\n primaryValue = (\n <AssignmentDetails\n name={name}\n headingTag={headingTag}\n processName={processName}\n active={!!content}\n />\n );\n } else {\n primaryValue = (\n <Text variant={headingTag} data-focusable-form-heading={content ? '' : undefined}>\n {name}\n </Text>\n );\n }\n\n const openLabelSuffix = ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`;\n\n const summary = (\n <StyledSummaryItem\n visual={avatar}\n hasProcessName={!!processName}\n primary={primaryValue}\n secondary={meta}\n actions={\n content\n ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n : onOpen && (\n <StyledOpenTaskButton\n data-testid={testIds.openTask}\n $iconOnly={iconOnly}\n variant={iconOnly ? 'simple' : 'primary'}\n icon={iconOnly}\n compact={iconOnly \|\| detached}\n aria-label={iconOnly ? `${t('go')}${openLabelSuffix}` : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n {iconOnly ? (\n <Icon name='arrow-right' />\n ) : (\n <>\n <span>{t('go')}</span>\n <VisuallyHiddenText>{openLabelSuffix}</VisuallyHiddenText>\n </>\n )}\n </StyledOpenTaskButton>\n )\n }\n />\n );\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n as={content ? undefined : StyledSummaryListItem}\n forwardedAs={content ? 'div' : 'li'}\n >\n {summary}\n {content && (\n <StyledTaskContent ref={contentRef} isAnimating={isAnimating} isExpanded={isExpanded}>\n {content}\n </StyledTaskContent>\n )}\n </Flex>\n );\n },\n getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n { testId, items, hasFooter = false, openButtonIconOnly = false }: PropsWithoutRef<TaskListProps>,\n ref: TaskListProps['ref']\n) {\n const testIds = useTestIds(testId, getTaskListTestIds);\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n const announcements = useRef<Announcement[]>([]);\n const mounted = useRef(false);\n\n useEffect(() => {\n mounted.current = true;\n\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const debouncedAnnounce = debounce(() => {\n if (announcements.current.length > 0) {\n let tasksAdded = 0;\n let tasksRemoved = 0;\n announcements.current.forEach(item => {\n if (item.status === 'removed') {\n tasksRemoved += 1;\n } else {\n tasksAdded += 1;\n }\n });\n let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n if (tasksRemoved) {\n message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n }\n\n if (mounted.current) {\n announcePolite({ message });\n }\n\n announcements.current = [];\n }\n }, 2000);\n\n const addAnnouncement = (announcement: Announcement) => {\n announcements.current = [...announcements.current, announcement];\n debouncedAnnounce();\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n container={{ direction: 'column' }}\n as={StyledTaskList}\n hasFooter={hasFooter}\n ref={ref}\n >\n {items.map(item => (\n <TaskItem\n {...item}\n openButtonIconOnly={item.openButtonIconOnly ?? openButtonIconOnly}\n addAnnouncement={addAnnouncement}\n key={item.id}\n />\n ))}\n </Flex>\n );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}
1	+ {"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { animations } from '@pega/cosmos-react-core/lib/styles';\nimport {\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp,\n Button,\n Text,\n useI18n,\n VisuallyHiddenText,\n useTestIds,\n useLiveLog,\n debounce,\n Actions,\n withTestIds,\n StyledPrimary,\n StyledText,\n useTheme,\n useTransitionState,\n Icon,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport type { TestIdProp, ActionsProps, HeadingTag } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nregisterIcon(arrowRightIcon);\n\nexport interface TaskItemProps extends TestIdProp {\n id: string;\n /** Name of the task displayed in the list. /\n name: string;\n /* Name of the process for the task. /\n processName?: string;\n /* The heading tag to render task name and process as. /\n headingTag?: HeadingTag;\n /* Avatar element to represent the task's assignee. /\n avatar?: ReactNode;\n /* MetaList element with info related to the task. /\n meta?: ReactNode;\n /* Provide a callback to render a button for a task. /\n onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n /* Case identifier /\n caseId?: string;\n /* Content for the task when open. /\n content?: ReactNode;\n /* An array of actions to add to open task. /\n additionalActions?: ActionsProps['items'];\n /* Label for the open button /\n openLabel?: string;\n /\n When true, animates the content expanding in.\n * @default true\n /\n animateOpen?: boolean;\n /\n When true, renders the open button as a compact icon-only arrow button.\n * @default false\n /\n openButtonIconOnly?: boolean;\n}\n\nexport interface TaskListProps extends TestIdProp {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /\n When true, all task items render the open button as a compact icon-only arrow.\n * @default false\n /\n openButtonIconOnly?: boolean;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n name: string;\n status: 'removed' \| 'added';\n}\n\nexport const StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n const speed = theme.base.animation.speed;\n\n return css`\n ${animations.subProperties}\n animation-name: ${animations.reveal}, ${animations.slideInYStart};\n --slide-in-y-start-offset: -0.5rem;\n --animation-duration: max(calc(${speed} 3), 1ms);\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n\n > li:last-child {\n ${hasFooter\n ? css`\n &:not([role='button']) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `\n : css`\n padding-block-end: 0;\n `}\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledTaskContent = styled.div<{ isAnimating?: boolean; isExpanded?: boolean }>(\n ({ isAnimating, isExpanded, theme }) => {\n const speed = theme.base.animation.speed;\n\n return css`\n display: grid;\n grid-template-rows: ${isExpanded ? '1fr' : '0fr'};\n opacity: ${isExpanded ? 1 : 0};\n transform: translateY(${isExpanded ? '0' : '-0.5rem'});\n transition-duration: max(calc(${speed} * 3), 1ms);\n transition-property: grid-template-rows, opacity, transform;\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 1ms;\n }\n\n > * {\n overflow: ${isAnimating ? 'hidden' : 'visible'};\n }\n `;\n }\n);\n\nStyledTaskContent.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n hasProcessName\n}) => {\n return css`\n ${hasProcessName &&\n css`\n ${StyledPrimary} {\n display: contents;\n\n & > ${StyledText} {\n ${ellipsisOverflow};\n }\n }\n `}\n `;\n});\n\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nconst StyledOpenTaskButton = styled(Button)<{ $iconOnly?: boolean }>(({\n theme: { base },\n $iconOnly\n}) => {\n return css`\n ${!$iconOnly &&\n css`\n padding: 0 calc(2 * ${base.spacing});\n `}\n `;\n});\n\nStyledOpenTaskButton.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n ({\n testId,\n id,\n name,\n avatar,\n meta,\n processName,\n onOpen,\n caseId,\n content,\n headingTag,\n addAnnouncement,\n additionalActions,\n openLabel,\n animateOpen = true,\n openButtonIconOnly = false,\n ...restProps\n }: TaskItemProps & {\n addAnnouncement?: (announcement: Announcement) => void;\n }) => {\n const testIds = useTestIds(testId, getTaskItemTestIds);\n const t = useI18n();\n const buttonLabel = openLabel \|\| t('go');\n const {\n components: {\n 'case-view': {\n summary: { detached }\n },\n tasks: { 'button-style': buttonStyle }\n }\n } = useTheme();\n\n const iconOnly = openButtonIconOnly \|\| buttonStyle === 'icon';\n\n const contentRef = useRef<HTMLDivElement>(null);\n\n const { state, set } = useTransitionState({\n ref: contentRef,\n property: 'grid-template-rows',\n states: expandCollapseStates,\n defaultState: content && !animateOpen ? 'expanded' : 'collapsed'\n });\n\n const isAnimating = state === 'expanding' \|\| state === 'collapsing';\n const isExpanded = state === 'expanded' \|\| state === 'expanding';\n\n useEffect(() => {\n const shouldBeExpanded = !!content;\n\n if (shouldBeExpanded !== isExpanded) {\n set(shouldBeExpanded ? 'expanded' : 'collapsed');\n }\n }, [content, isExpanded, set]);\n\n useEffect(() => {\n addAnnouncement?.({ name, status: 'added' });\n\n return () => {\n addAnnouncement?.({ name, status: 'removed' });\n };\n }, []);\n\n let primaryValue;\n if (processName) {\n primaryValue = (\n <AssignmentDetails\n name={name}\n headingTag={headingTag}\n processName={processName}\n active={!!content}\n />\n );\n } else {\n primaryValue = (\n <Text variant={headingTag} data-focusable-form-heading={content ? '' : undefined}>\n {name}\n </Text>\n );\n }\n\n const openLabelSuffix = ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`;\n\n const summary = (\n <StyledSummaryItem\n visual={avatar}\n hasProcessName={!!processName}\n primary={primaryValue}\n secondary={meta}\n actions={\n content\n ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n : onOpen && (\n <StyledOpenTaskButton\n data-testid={testIds.openTask}\n $iconOnly={iconOnly}\n variant={iconOnly ? 'simple' : 'primary'}\n icon={iconOnly}\n compact={iconOnly \|\| detached}\n aria-label={iconOnly ? `${buttonLabel}${openLabelSuffix}` : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n {iconOnly ? (\n <Icon name='arrow-right' />\n ) : (\n <>\n <span>{buttonLabel}</span>\n <VisuallyHiddenText>{openLabelSuffix}</VisuallyHiddenText>\n </>\n )}\n </StyledOpenTaskButton>\n )\n }\n />\n );\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n as={content ? undefined : StyledSummaryListItem}\n forwardedAs={content ? 'div' : 'li'}\n >\n {summary}\n {content && (\n <StyledTaskContent ref={contentRef} isAnimating={isAnimating} isExpanded={isExpanded}>\n {content}\n </StyledTaskContent>\n )}\n </Flex>\n );\n },\n getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n { testId, items, hasFooter = false, openButtonIconOnly = false }: PropsWithoutRef<TaskListProps>,\n ref: TaskListProps['ref']\n) {\n const testIds = useTestIds(testId, getTaskListTestIds);\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n const announcements = useRef<Announcement[]>([]);\n const mounted = useRef(false);\n\n useEffect(() => {\n mounted.current = true;\n\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const debouncedAnnounce = debounce(() => {\n if (announcements.current.length > 0) {\n let tasksAdded = 0;\n let tasksRemoved = 0;\n announcements.current.forEach(item => {\n if (item.status === 'removed') {\n tasksRemoved += 1;\n } else {\n tasksAdded += 1;\n }\n });\n let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n if (tasksRemoved) {\n message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n }\n\n if (mounted.current) {\n announcePolite({ message });\n }\n\n announcements.current = [];\n }\n }, 2000);\n\n const addAnnouncement = (announcement: Announcement) => {\n announcements.current = [...announcements.current, announcement];\n debouncedAnnounce();\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n container={{ direction: 'column' }}\n as={StyledTaskList}\n hasFooter={hasFooter}\n ref={ref}\n >\n {items.map(item => (\n <TaskItem\n {...item}\n openButtonIconOnly={item.openButtonIconOnly ?? openButtonIconOnly}\n addAnnouncement={addAnnouncement}\n key={item.id}\n />\n ))}\n </Flex>\n );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBnD,OAAO,KAAK,EACV,WAAW,EACX,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAG9G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2CAA2C;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,cAAe,SAAQ,cAAc,EAAE,UAAU;IACzD,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;IACtF,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,KAAK,iBAAiB,GAClB;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACE,yBAAyB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iCAAiC;IACjC,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;AAEN,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE5D,eAAO,MAAM,WAAW;;;eAA6B,OAAO;kBAAgB,OAAO;kLAiBjF,CAAC;iCAYmB,UAAU,GAAG,YAAY;;;~~AAiI~~/C,wBAAmD"}
1	+ {"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBnD,OAAO,KAAK,EACV,WAAW,EACX,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAG9G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2CAA2C;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,cAAe,SAAQ,cAAc,EAAE,UAAU;IACzD,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;IACtF,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,KAAK,iBAAiB,GAClB;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACE,yBAAyB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iCAAiC;IACjC,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;AAEN,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE5D,eAAO,MAAM,WAAW;;;eAA6B,OAAO;kBAAgB,OAAO;kLAiBjF,CAAC;iCAYmB,UAAU,GAAG,YAAY;;;AAmI/C,wBAAmD"}

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

@@ -74,7 +74,7 @@ const Tasks = (props) => {
     if (variant === 'cards' && groups !== undefined) {
         return _jsx(TaskCards, { groups: groups, name: name, testId: testId ?? undefined, ...restProps });
     }
-    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, "data-focusable-form-container": '', ref: setContainerEl, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: showCount && count !== undefined ? { total: count } : undefined, search: search, item: { grow: 1 } })] })), fitToParent ? (_jsx(StyledCardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })) : (_jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })), _jsx(Progress, { placement: 'block', ref: progressRef, visible: loadingMore, focusOnVisible: true }), hasFooter && !loadingMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(hasMore ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
+    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, "data-focusable-form-container": '', ref: setContainerEl, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: showCount && count !== undefined ? { total: count } : undefined, search: search, item: { grow: 1 } })] })), fitToParent ? (_jsx(StyledCardContent, { children: items.length > 0 ? TaskItems : !loadingMore && _jsx(EmptyState, {}) })) : (_jsx(CardContent, { children: items.length > 0 ? TaskItems : !loadingMore && _jsx(EmptyState, {}) })), _jsx(Progress, { placement: 'block', ref: progressRef, visible: loadingMore, focusOnVisible: true }), hasFooter && !loadingMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(hasMore ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
                         onExpandToggle?.();
                         if (!hasMore) {
                             const { currentTarget } = e;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Button,\n useI18n,\n defaultThemeProp,\n ListToolbar,\n EmptyState,\n useTestIds,\n Avatar,\n withTestIds,\n Progress,\n getActiveElement,\n useElement\n} from '@pega/cosmos-react-core';\nimport { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';\nimport type {\n AvatarProps,\n BaseProps,\n ForwardProps,\n ListToolbarProps,\n NoChildrenProp,\n SearchInputProps,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\nimport TaskCards from './TaskCards';\n\nexport interface TaskGroupProps extends BaseProps {\n /** Unique key for this group, typically the case type class name. /\n id: string;\n /* Display name for the card header (localized case type label). /\n name: string;\n /* Optional visual element rendered before the heading (e.g. a case-type icon). /\n visual?: ReactNode;\n /* Assignments belonging to this group. /\n items: TaskItemProps[];\n /* Total count on the server (may exceed items.length before Show More). /\n count?: number;\n /* Marks this group as the Approvals card. Controls visual treatment. /\n isApprovals?: boolean;\n /* Callback when Show More is clicked for this group (e.g. to trigger a fetch). /\n onShowMore?: () => void;\n /* Flag while this group is loading more items. /\n loadingMore?: boolean;\n}\n\ninterface TasksBaseProps extends NoChildrenProp, TestIdProp {\n /* Heading text to render at the top of the list. /\n name: ListToolbarProps['name'];\n /* A visual to accompany the header text. /\n avatar?: Pick<AvatarProps, 'name' \| 'icon' \| 'imageSrc' \| 'status'>;\n /* Definition of view selection. /\n viewSelector?: Pick<ViewSelectorProps, 'views' \| 'onViewSelect' \| 'filterInputProps'>;\n /* Integer representing the total count of tasks. /\n count?: number;\n /\n Whether to display the result count in the header.\n * @default true\n /\n showCount?: boolean;\n /* Opt-in search configuration. /\n search?: Pick<SearchInputProps, 'value' \| 'onSearchChange'>;\n /* Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. /\n onExpandToggle?: () => void;\n /\n Flag indicating more items are being fetched\n * @default false\n /\n loadingMore?: boolean;\n /\n Whether to fit Tasks widget in the parent element.\n /\n fitToParent?: boolean;\n /\n Callback invoked with the calculated item limit based on available height.\n * Only fires when fitToParent is true.\n /\n onItemLimitChange?: (limit: number) => void;\n}\n\ntype TasksVariantProps =\n \| {\n /\n Rendering variant.\n * @default 'list'\n /\n variant?: 'list';\n /* An array of TaskItemProps to generate the list. /\n items?: TaskItemProps[];\n /* Not applicable for the list variant. /\n groups?: never;\n }\n \| {\n /* Rendering variant. /\n variant: 'cards';\n /* Not applicable for the cards variant. /\n items?: never;\n /* Groups to render as cards. */\n groups: TaskGroupProps[];\n };\n\nexport type TasksProps = TasksBaseProps & TasksVariantProps;\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n theme,\n openItem,\n fitToParent\n}) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n `\n : css`\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n overflow: auto;\n flex-grow: 1;\n flex-basis: 0;\n min-block-size: 0;\n min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks = (props: TasksProps & ForwardProps) => {\n const {\n testId,\n items = [],\n name,\n avatar,\n viewSelector,\n count,\n showCount = true,\n search,\n loadingMore = false,\n fitToParent = false,\n onExpandToggle,\n onItemLimitChange,\n variant,\n groups,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTasksTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const progressRef = useRef<HTMLDivElement>(null);\n const [containerEl, setContainerEl] = useElement<HTMLDivElement>();\n const containerSize = useMonitoredSize(containerEl, 0);\n\n const totalCount = count ?? items.length;\n const hasMore = count !== undefined && count > items.length;\n const hasFooter = !!(!openItem && onExpandToggle && totalCount > 0);\n\n const TaskItems = useMemo(() => {\n return openItem ? (\n <TaskItem {...openItem} headingTag='h2' />\n ) : (\n <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n );\n }, [items, openItem]);\n\n useEffect(() => {\n if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {\n toggleButtonRef?.current.focus();\n }\n }, [loadingMore]);\n\n // Measure available height and calculate item limit when fitToParent is enabled\n useLayoutEffect(() => {\n if (!fitToParent \|\| !containerEl \|\| !onItemLimitChange \|\| openItem) return;\n\n const container = containerEl;\n const containerHeight = container.getBoundingClientRect().height;\n if (containerHeight === 0) return;\n\n const header = container.querySelector('header');\n const footer = container.querySelector('footer');\n const headerHeight = header ? header.getBoundingClientRect().height : 0;\n const footerHeight = footer ? footer.getBoundingClientRect().height : 0;\n\n const listItems = container.querySelectorAll('ul > li');\n if (listItems.length === 0) return;\n\n const itemHeight = listItems[0].getBoundingClientRect().height;\n if (itemHeight === 0) return;\n\n const availableHeight = containerHeight - headerHeight - footerHeight;\n const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));\n\n onItemLimitChange(newLimit);\n }, [fitToParent, items, onItemLimitChange, openItem, containerSize]);\n\n if (variant === 'cards' && groups !== undefined) {\n return <TaskCards groups={groups} name={name} testId={testId ?? undefined} {...restProps} />;\n }\n\n return (\n <StyledTasks\n data-testid={testIds.root}\n {...restProps}\n openItem={!!openItem}\n fitToParent={fitToParent}\n data-app-region\n data-focusable-form-container=''\n ref={setContainerEl}\n >\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {avatar && <Avatar {...avatar} />}\n <ListToolbar\n name={name}\n headingTag='h2'\n viewSelector={viewSelector}\n count={showCount && count !== undefined ? { total: count } : undefined}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n\n {fitToParent ? (\n <StyledCardContent>{items.length > 0 ? TaskItems : <EmptyState />}</StyledCardContent>\n ) : (\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n )}\n\n <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n {hasFooter && !loadingMore && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(hasMore ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!hasMore) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n ref={toggleButtonRef}\n >\n {t(hasMore ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}
1	+ {"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Button,\n useI18n,\n defaultThemeProp,\n ListToolbar,\n EmptyState,\n useTestIds,\n Avatar,\n withTestIds,\n Progress,\n getActiveElement,\n useElement\n} from '@pega/cosmos-react-core';\nimport { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';\nimport type {\n AvatarProps,\n BaseProps,\n ForwardProps,\n ListToolbarProps,\n NoChildrenProp,\n SearchInputProps,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\nimport TaskCards from './TaskCards';\n\nexport interface TaskGroupProps extends BaseProps {\n /** Unique key for this group, typically the case type class name. /\n id: string;\n /* Display name for the card header (localized case type label). /\n name: string;\n /* Optional visual element rendered before the heading (e.g. a case-type icon). /\n visual?: ReactNode;\n /* Assignments belonging to this group. /\n items: TaskItemProps[];\n /* Total count on the server (may exceed items.length before Show More). /\n count?: number;\n /* Marks this group as the Approvals card. Controls visual treatment. /\n isApprovals?: boolean;\n /* Callback when Show More is clicked for this group (e.g. to trigger a fetch). /\n onShowMore?: () => void;\n /* Flag while this group is loading more items. /\n loadingMore?: boolean;\n}\n\ninterface TasksBaseProps extends NoChildrenProp, TestIdProp {\n /* Heading text to render at the top of the list. /\n name: ListToolbarProps['name'];\n /* A visual to accompany the header text. /\n avatar?: Pick<AvatarProps, 'name' \| 'icon' \| 'imageSrc' \| 'status'>;\n /* Definition of view selection. /\n viewSelector?: Pick<ViewSelectorProps, 'views' \| 'onViewSelect' \| 'filterInputProps'>;\n /* Integer representing the total count of tasks. /\n count?: number;\n /\n Whether to display the result count in the header.\n * @default true\n /\n showCount?: boolean;\n /* Opt-in search configuration. /\n search?: Pick<SearchInputProps, 'value' \| 'onSearchChange'>;\n /* Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. /\n onExpandToggle?: () => void;\n /\n Flag indicating more items are being fetched\n * @default false\n /\n loadingMore?: boolean;\n /\n Whether to fit Tasks widget in the parent element.\n /\n fitToParent?: boolean;\n /\n Callback invoked with the calculated item limit based on available height.\n * Only fires when fitToParent is true.\n /\n onItemLimitChange?: (limit: number) => void;\n}\n\ntype TasksVariantProps =\n \| {\n /\n Rendering variant.\n * @default 'list'\n /\n variant?: 'list';\n /* An array of TaskItemProps to generate the list. /\n items?: TaskItemProps[];\n /* Not applicable for the list variant. /\n groups?: never;\n }\n \| {\n /* Rendering variant. /\n variant: 'cards';\n /* Not applicable for the cards variant. /\n items?: never;\n /* Groups to render as cards. */\n groups: TaskGroupProps[];\n };\n\nexport type TasksProps = TasksBaseProps & TasksVariantProps;\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n theme,\n openItem,\n fitToParent\n}) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n `\n : css`\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n overflow: auto;\n flex-grow: 1;\n flex-basis: 0;\n min-block-size: 0;\n min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks = (props: TasksProps & ForwardProps) => {\n const {\n testId,\n items = [],\n name,\n avatar,\n viewSelector,\n count,\n showCount = true,\n search,\n loadingMore = false,\n fitToParent = false,\n onExpandToggle,\n onItemLimitChange,\n variant,\n groups,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTasksTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const progressRef = useRef<HTMLDivElement>(null);\n const [containerEl, setContainerEl] = useElement<HTMLDivElement>();\n const containerSize = useMonitoredSize(containerEl, 0);\n\n const totalCount = count ?? items.length;\n const hasMore = count !== undefined && count > items.length;\n const hasFooter = !!(!openItem && onExpandToggle && totalCount > 0);\n\n const TaskItems = useMemo(() => {\n return openItem ? (\n <TaskItem {...openItem} headingTag='h2' />\n ) : (\n <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n );\n }, [items, openItem]);\n\n useEffect(() => {\n if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {\n toggleButtonRef?.current.focus();\n }\n }, [loadingMore]);\n\n // Measure available height and calculate item limit when fitToParent is enabled\n useLayoutEffect(() => {\n if (!fitToParent \|\| !containerEl \|\| !onItemLimitChange \|\| openItem) return;\n\n const container = containerEl;\n const containerHeight = container.getBoundingClientRect().height;\n if (containerHeight === 0) return;\n\n const header = container.querySelector('header');\n const footer = container.querySelector('footer');\n const headerHeight = header ? header.getBoundingClientRect().height : 0;\n const footerHeight = footer ? footer.getBoundingClientRect().height : 0;\n\n const listItems = container.querySelectorAll('ul > li');\n if (listItems.length === 0) return;\n\n const itemHeight = listItems[0].getBoundingClientRect().height;\n if (itemHeight === 0) return;\n\n const availableHeight = containerHeight - headerHeight - footerHeight;\n const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));\n\n onItemLimitChange(newLimit);\n }, [fitToParent, items, onItemLimitChange, openItem, containerSize]);\n\n if (variant === 'cards' && groups !== undefined) {\n return <TaskCards groups={groups} name={name} testId={testId ?? undefined} {...restProps} />;\n }\n\n return (\n <StyledTasks\n data-testid={testIds.root}\n {...restProps}\n openItem={!!openItem}\n fitToParent={fitToParent}\n data-app-region\n data-focusable-form-container=''\n ref={setContainerEl}\n >\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {avatar && <Avatar {...avatar} />}\n <ListToolbar\n name={name}\n headingTag='h2'\n viewSelector={viewSelector}\n count={showCount && count !== undefined ? { total: count } : undefined}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n\n {fitToParent ? (\n <StyledCardContent>\n {items.length > 0 ? TaskItems : !loadingMore && <EmptyState />}\n </StyledCardContent>\n ) : (\n <CardContent>{items.length > 0 ? TaskItems : !loadingMore && <EmptyState />}</CardContent>\n )}\n\n <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n {hasFooter && !loadingMore && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(hasMore ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!hasMore) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n ref={toggleButtonRef}\n >\n {t(hasMore ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "10.0.0-build.5.9",
+  "version": "10.0.0-build.7.0",
   "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.5.9",
-    "@pega/cosmos-react-rte": "10.0.0-build.5.9",
+    "@pega/cosmos-react-core": "10.0.0-build.7.0",
+    "@pega/cosmos-react-rte": "10.0.0-build.7.0",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",
@@ -28,8 +28,7 @@
     "@storybook/react": "~8.2.9",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/dompurify": "^3.0.5",
-    "dompurify": "^3.2.6",
+    "dompurify": "^3.4.15",
     "typescript": "~6.0.3"
   }
 }