npm - @pega/cosmos-react-work - Versions diffs - 7.5.6 → 7.6.0 - Mend

@pega/cosmos-react-work 7.5.6 → 7.6.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 (60) hide show

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

@@ -0,0 +1,105 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useContext, useCallback } from 'react';
+import styled from 'styled-components';
+import { Grid, Flex, Button, useI18n, withTestIds, useTestIds, cap, useDirection, Text, VisuallyHiddenText, useElement, Tooltip } from '@pega/cosmos-react-core';
+import { StyledAssignmentItem, StyledProcessContainer, StyledActionContainer, StyledAssigneeContainer, StyledLabelContainer, StyledNode, StyledAssigneeText, StyledAssignmentItemMetaList } from '../Assignments.styles';
+import { getAssignmentTestIds } from '../HierarchicalAssignments.test-ids';
+import AssignmentTreeContext from '../AssignmentContext';
+import AssignmentDetails from '../AssignmentDetail';
+import { restrictDepth, initialDepth } from '../helpers';
+import useNodeFocus from './useNodeFocus';
+const StyledHiddenText = styled(VisuallyHiddenText) `
+  width: 0;
+`;
+export const PauseTextNode = ({ children }) => {
+    return (_jsxs(_Fragment, { children: [children, _jsx(StyledHiddenText, { children: ", " })] }));
+};
+const AssignmentItem = ({ name, processName, assigneeName, urgency, sla, depth, id, assigneeId, onOpen, onAssigneeClick, setSize, posInset }) => {
+    const { firstNodeId, focusedNodeId, lastNodeId, changeFocusHandler, caseIdExpandList, isMediumOrAbove, parentRef, nodeInternalFocus, setNodeInternalFocusHandler, reverseTabFlow } = useContext(AssignmentTreeContext);
+    const assignmentRef = useRef(null);
+    const firstLevelAssignment = depth === initialDepth;
+    const styledElementDepth = firstLevelAssignment ? 0 : restrictDepth(depth);
+    const childElementsTabIndex = nodeInternalFocus ? 0 : -1;
+    const { parentNodeTabIndex, lastNode, escapeNodeHandler } = useNodeFocus(id, assignmentRef, parentRef, {
+        firstNodeId,
+        focusedNodeId,
+        lastNodeId,
+        nodeInternalFocus,
+        reverseTabFlow
+    });
+    const { start } = useDirection();
+    const t = useI18n();
+    const [assigneeEl, setAssigneeElement] = useElement();
+    const testIds = useTestIds('', getAssignmentTestIds);
+    const navigationHandler = useCallback((e) => {
+        if (['ArrowUp', 'ArrowDown'].includes(e.key))
+            e.preventDefault();
+        switch (e.key) {
+            case 'ArrowUp':
+                changeFocusHandler(id, 'up', caseIdExpandList);
+                break;
+            case 'ArrowDown':
+                changeFocusHandler(id, 'down', caseIdExpandList);
+                break;
+            case `Arrow${cap(start)}`:
+                if (!firstLevelAssignment) {
+                    changeFocusHandler(id, 'left', caseIdExpandList);
+                }
+                break;
+            case 'Home':
+                if (firstNodeId)
+                    changeFocusHandler(firstNodeId);
+                break;
+            case 'End':
+                if (lastNodeId)
+                    changeFocusHandler(lastNodeId);
+                break;
+            default:
+        }
+    }, [id, firstNodeId, lastNodeId, firstLevelAssignment, caseIdExpandList]);
+    const assignmentDetail = processName ? `${processName} - ${name}` : name;
+    return (_jsx(StyledNode, { "data-testid": testIds.root, role: 'treeitem', "aria-selected": parentNodeTabIndex === 0, "aria-labelledby": id, ref: assignmentRef, onKeyDown: (e) => {
+            e.stopPropagation();
+            if (e.key === 'Enter' && !nodeInternalFocus) {
+                setNodeInternalFocusHandler?.(true);
+                reverseTabFlow.current = false;
+                return;
+            }
+            if (e.key === 'Escape' && nodeInternalFocus) {
+                changeFocusHandler(id);
+                setNodeInternalFocusHandler?.(false);
+                escapeNodeHandler();
+                reverseTabFlow.current = false;
+                return;
+            }
+            if (e.shiftKey && e.key === 'Tab' && nodeInternalFocus) {
+                reverseTabFlow.current = true;
+            }
+            else if (e.key === 'Tab' && nodeInternalFocus) {
+                reverseTabFlow.current = false;
+            }
+            if (!nodeInternalFocus) {
+                navigationHandler(e);
+            }
+        }, onClick: (e) => {
+            e.stopPropagation();
+            reverseTabFlow.current = false;
+            changeFocusHandler(id);
+        }, tabIndex: nodeInternalFocus ? -1 : parentNodeTabIndex, isFocus: nodeInternalFocus ? false : parentNodeTabIndex === 0, lastNode: lastNode, depth: styledElementDepth, onFocus: (e) => {
+            e.stopPropagation();
+            changeFocusHandler(id);
+        }, "aria-level": depth, "aria-setsize": setSize, "aria-posinset": posInset, children: _jsxs(Grid, { container: {
+                alignItems: 'center',
+                cols: isMediumOrAbove ? '2fr 2fr auto' : '2fr 0.5fr',
+                colGap: isMediumOrAbove ? 3 : 0,
+                rows: isMediumOrAbove ? 'repeat(1, auto)' : 'repeat(2, auto)'
+            }, as: StyledAssignmentItem, children: [_jsx(VisuallyHiddenText, { 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, depth: styledElementDepth, variant: 'secondary', children: _jsx(StyledAssignmentItemMetaList, { wrapItems: true, items: [
+                            _jsxs(_Fragment, { children: [_jsx(StyledAssigneeText, { onClick: (e) => {
+                                            onAssigneeClick(assigneeId, e);
+                                        }, variant: 'link', ref: setAssigneeElement, "data-testid": testIds.assignee, tabIndex: childElementsTabIndex, 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: sla }) })),
+                            _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('assignments_go_announcement_label', [assignmentDetail]), children: t('go') })) })] }) }));
+};
+export default withTestIds(AssignmentItem, getAssignmentTestIds);
+//# sourceMappingURL=AssignmentItem.js.map

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

@@ -0,0 +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} 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\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 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 = firstLevelAssignment ? 0 : 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 [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 >\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 <VisuallyHiddenText>{`${t('assignment_announcement_label')}`}</VisuallyHiddenText>\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 depth={styledElementDepth}\n variant='secondary'\n >\n <StyledAssignmentItemMetaList\n wrapItems\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 >\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>{sla}</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('assignments_go_announcement_label', [assignmentDetail])}\n >\n {t('go')}\n </Button>\n )}\n </Flex>\n </Grid>\n </StyledNode>\n );\n};\n\nexport default withTestIds(AssignmentItem, getAssignmentTestIds);\n"]}

package/lib/components/HierarchicalAssignments/nodeItems/CaseDetail.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { CaseListProps } from '../HierarchicalAssignments.types';
+interface CaseDetailsProps extends Omit<CaseListProps, 'children'> {
+    /** Property defines the node's depth level */
+    depth: number;
+    /** Boolean that refers the current case has children or not */
+    hasChildren: boolean;
+    /** Callback to trigger on case Expand button */
+    onExpandButtonClickHandler?: () => void;
+    /** Boolean that refers current case expanded state */
+    open: boolean;
+    /** Renders of Children of Case, List of Assignments or Child Case */
+    children?: ReactNode;
+    /** total the number of items in the current set of treeitems */
+    setSize?: number;
+    /** the position of the element within the whole set of treeitems */
+    posInset?: number;
+}
+declare const _default: (({ hasChildren, depth, id, open, onExpandButtonClickHandler, link, name, status, children, setSize, posInset }: CaseDetailsProps) => JSX.Element) & {
+    getTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["toggle-action", "label", "id", "status"]>;
+};
+export default _default;
+//# sourceMappingURL=CaseDetail.d.ts.map

package/lib/components/HierarchicalAssignments/nodeItems/CaseDetail.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CaseDetail.d.ts","sourceRoot":"","sources":["../../../../src/components/HierarchicalAssignments/nodeItems/CaseDetail.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA6B,SAAS,EAAc,MAAM,OAAO,CAAC;AAgB9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAiBtE,UAAU,gBAAiB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IAChE,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,sDAAsD;IACtD,IAAI,EAAE,OAAO,CAAC;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;;;;AAuOD,wBAAuD"}

package/lib/components/HierarchicalAssignments/nodeItems/CaseDetail.js ADDED Viewed

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef, useCallback, useMemo } from 'react';
+import { Flex, Icon, Text, Link, Status, withTestIds, useTestIds, cap, useDirection, VisuallyHiddenText, useI18n } from '@pega/cosmos-react-core';
+import { getCaseTestIds } from '../HierarchicalAssignments.test-ids';
+import { StyledExpandButton, StyledHeaderContainer, StyledLinkContainer, StyledMetaListContainer, StyledMetaIdStatusContainer, StyledSummaryItem, StyledNode } from '../Assignments.styles';
+import AssignmentTreeContext from '../AssignmentContext';
+import { restrictDepth } from '../helpers';
+import useNodeFocus from './useNodeFocus';
+import { PauseTextNode } from './AssignmentItem';
+const CaseDetail = ({ hasChildren, depth, id, open, onExpandButtonClickHandler, link, name, status, children, setSize, posInset }) => {
+    const { variant, text } = status || {};
+    const { firstNodeId, focusedNodeId, lastNodeId, changeFocusHandler, caseIdExpandList, isMediumOrAbove, parentRef, nodeInternalFocus, setNodeInternalFocusHandler, reverseTabFlow } = useContext(AssignmentTreeContext);
+    const testIds = useTestIds('', getCaseTestIds);
+    const { start, end } = useDirection();
+    const caseHeaderRef = useRef(null);
+    const indent = depth !== 1 && !hasChildren;
+    const childElementsTabIndex = nodeInternalFocus ? 0 : -1;
+    const { parentNodeTabIndex, lastNode, escapeNodeHandler } = useNodeFocus(id, caseHeaderRef, parentRef, {
+        firstNodeId,
+        focusedNodeId,
+        lastNodeId,
+        nodeInternalFocus,
+        reverseTabFlow
+    });
+    const t = useI18n();
+    const navigationHandler = useCallback((e) => {
+        if (['ArrowUp', 'ArrowDown'].includes(e.key))
+            e.preventDefault();
+        switch (e.key) {
+            case 'ArrowUp':
+                changeFocusHandler(id, 'up', caseIdExpandList);
+                break;
+            case 'ArrowDown':
+                changeFocusHandler(id, 'down', caseIdExpandList);
+                break;
+            case `Arrow${cap(start)}`:
+                if (open) {
+                    onExpandButtonClickHandler?.();
+                }
+                else {
+                    changeFocusHandler(id, 'left', caseIdExpandList);
+                }
+                break;
+            case `Arrow${cap(end)}`:
+                if (hasChildren) {
+                    if (!open) {
+                        onExpandButtonClickHandler?.();
+                    }
+                    else {
+                        changeFocusHandler(id, 'right', caseIdExpandList);
+                    }
+                }
+                break;
+            case 'Home':
+                if (firstNodeId)
+                    changeFocusHandler(firstNodeId);
+                break;
+            case 'End':
+                if (lastNodeId)
+                    changeFocusHandler(lastNodeId);
+                break;
+            default:
+        }
+    }, [id, firstNodeId, lastNodeId, open, hasChildren, caseIdExpandList]);
+    const caseDescriptionContainer = useMemo(() => (_jsx(PauseTextNode, { children: _jsx(StyledLinkContainer, { isMediumOrAbove: isMediumOrAbove, children: _jsxs(Link, { "data-testid": testIds.label, href: link.href, previewable: true, onPreview: link.onPreview, target: link?.target, icon: true, tabIndex: childElementsTabIndex, onClick: (e) => {
+                    link.onClick?.(e, id);
+                }, children: [!hasChildren && (_jsx(VisuallyHiddenText, { children: t('case_announcement_label') })), name] }) }, `${id}-caseName`) })), [isMediumOrAbove, name, id, link, testIds, childElementsTabIndex, hasChildren]);
+    const caseIdStatusContainer = useMemo(() => (_jsx(StyledMetaIdStatusContainer, { wrapItems: false, items: [
+            _jsx(PauseTextNode, { children: _jsx(Text, { "data-testid": testIds.id, variant: 'secondary', children: id }) }, `${id}-id`),
+            _jsx(PauseTextNode, { children: _jsx(Status, { "data-testid": testIds.status, variant: variant ?? 'info', children: text }) }, `${id}-status`)
+        ] }, `${id}-id-status`)), [id, variant, text, testIds]);
+    const metaList = useMemo(() => [caseDescriptionContainer, caseIdStatusContainer], [caseDescriptionContainer, caseIdStatusContainer]);
+    return (_jsxs(StyledNode, { "data-testid": testIds.root, role: 'treeitem', "aria-selected": parentNodeTabIndex === 0, "aria-expanded": hasChildren && !nodeInternalFocus ? open : undefined, tabIndex: nodeInternalFocus ? -1 : parentNodeTabIndex, "aria-labelledby": id, "aria-owns": hasChildren ? `${id}-subtree` : undefined, ref: caseHeaderRef, onKeyDown: (e) => {
+            e.stopPropagation();
+            if (e.key === 'Enter' && !nodeInternalFocus) {
+                e.preventDefault();
+                setNodeInternalFocusHandler?.(true);
+                reverseTabFlow.current = false;
+                return;
+            }
+            if (e.key === 'Escape' && nodeInternalFocus) {
+                changeFocusHandler(id);
+                setNodeInternalFocusHandler?.(false);
+                escapeNodeHandler();
+                reverseTabFlow.current = false;
+                return;
+            }
+            if (e.shiftKey && e.key === 'Tab' && nodeInternalFocus) {
+                reverseTabFlow.current = true;
+            }
+            else if (e.key === 'Tab' && nodeInternalFocus) {
+                reverseTabFlow.current = false;
+            }
+            if (!nodeInternalFocus) {
+                navigationHandler(e);
+            }
+        }, onClick: (e) => {
+            e.stopPropagation();
+            reverseTabFlow.current = false;
+            changeFocusHandler(id);
+        }, isFocus: nodeInternalFocus ? false : parentNodeTabIndex === 0, lastNode: lastNode, isChild: true, depth: restrictDepth(depth), onFocus: (e) => {
+            e.stopPropagation();
+            changeFocusHandler(id);
+        }, "aria-level": depth, "aria-setsize": setSize, "aria-posinset": posInset, children: [_jsxs(Flex, { as: StyledHeaderContainer, container: { alignItems: 'center', gap: 1 }, depth: restrictDepth(depth), id: id, children: [hasChildren && (_jsx(StyledExpandButton, { "data-testid": testIds.toggleAction, type: 'button', variant: 'text', "aria-expanded": open, onClick: () => onExpandButtonClickHandler?.(), tabIndex: childElementsTabIndex, "aria-label": t('case_announcement_label', [nodeInternalFocus ? name : '']), children: _jsx(Icon, { name: 'caret-right' }) })), isMediumOrAbove ? (_jsx(StyledMetaListContainer, { role: 'none', isMediumOrAbove: isMediumOrAbove, indent: indent, wrapItems: true, items: metaList })) : (_jsx(StyledSummaryItem, { indent: indent, primary: metaList[0], secondary: metaList[1] }))] }), children || null] }));
+};
+export default withTestIds(CaseDetail, getCaseTestIds);
+//# sourceMappingURL=CaseDetail.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"CaseDetail.js","sourceRoot":"","sources":["../../../../src/components/HierarchicalAssignments/nodeItems/CaseDetail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGjE,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,WAAW,EACX,UAAU,EACV,GAAG,EACH,YAAY,EACZ,kBAAkB,EAClB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,EACvB,2BAA2B,EAC3B,iBAAiB,EACjB,UAAU,EACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAmBjD,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,KAAK,EACL,EAAE,EACF,IAAI,EACJ,0BAA0B,EAC1B,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACS,EAAE,EAAE;IACrB,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IACvC,MAAM,EACJ,WAAW,EACX,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,2BAA2B,EAC3B,cAAc,EACf,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;IAC/C,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACtC,MAAM,aAAa,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAClD,MAAM,MAAM,GAAG,KAAK,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC;IAE3C,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,MAAM,EAAE,kBAAkB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,YAAY,CACtE,EAAE,EACF,aAAa,EACb,SAAS,EACT;QACE,WAAW;QACX,aAAa;QACb,UAAU;QACV,iBAAiB;QACjB,cAAc;KACf,CACF,CAAC;IAEF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,CAA6B,EAAE,EAAE;QAChC,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QACjE,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,SAAS;gBACZ,kBAAkB,CAAC,EAAE,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC;gBAC/C,MAAM;YACR,KAAK,WAAW;gBACd,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC;gBACjD,MAAM;YACR,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE;gBACvB,IAAI,IAAI,EAAE;oBACR,0BAA0B,EAAE,EAAE,CAAC;iBAChC;qBAAM;oBACL,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC;iBAClD;gBACD,MAAM;YACR,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE;gBACrB,IAAI,WAAW,EAAE;oBACf,IAAI,CAAC,IAAI,EAAE;wBACT,0BAA0B,EAAE,EAAE,CAAC;qBAChC;yBAAM;wBACL,kBAAkB,CAAC,EAAE,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;qBACnD;iBACF;gBACD,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,WAAW;oBAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;gBACjD,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,UAAU;oBAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;gBAC/C,MAAM;YACR,QAAQ;SACT;IACH,CAAC,EACD,CAAC,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,gBAAgB,CAAC,CACnE,CAAC;IAEF,MAAM,wBAAwB,GAAG,OAAO,CACtC,GAAG,EAAE,CAAC,CACJ,KAAC,aAAa,cACZ,KAAC,mBAAmB,IAAC,eAAe,EAAE,eAAe,YACnD,MAAC,IAAI,mBACU,OAAO,CAAC,KAAK,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,QACX,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,EAAE,MAAM,EACpB,IAAI,QACJ,QAAQ,EAAE,qBAAqB,EAC/B,OAAO,EAAE,CAAC,CAAoD,EAAE,EAAE;oBAChE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBACxB,CAAC,aAEA,CAAC,WAAW,IAAI,CACf,KAAC,kBAAkB,cAAE,CAAC,CAAC,yBAAyB,CAAC,GAAsB,CACxE,EACA,IAAI,IACA,IAjBmD,GAAG,EAAE,WAAW,CAkBtD,GACR,CACjB,EACD,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,qBAAqB,EAAE,WAAW,CAAC,CAC/E,CAAC;IAEF,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,CACJ,KAAC,2BAA2B,IAE1B,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE;YACL,KAAC,aAAa,cACZ,KAAC,IAAI,mBAAc,OAAO,CAAC,EAAE,EAAE,OAAO,EAAC,WAAW,YAC/C,EAAE,GACE,IAHW,GAAG,EAAE,KAAK,CAId;YAChB,KAAC,aAAa,cACZ,KAAC,MAAM,mBAAc,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,IAAI,MAAM,YAC5D,IAAI,GACE,IAHS,GAAG,EAAE,SAAS,CAIlB;SACjB,IAbI,GAAG,EAAE,YAAY,CActB,CACH,EACD,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAC7B,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC,wBAAwB,EAAE,qBAAqB,CAAC,EACvD,CAAC,wBAAwB,EAAE,qBAAqB,CAAC,CAClD,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,mBACI,OAAO,CAAC,IAAI,EACzB,IAAI,EAAC,UAAU,mBACA,kBAAkB,KAAK,CAAC,mBACxB,WAAW,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACnE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,qBACpC,EAAE,eACR,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,EACpD,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,CAAC,CAA6B,EAAE,EAAE;YAC3C,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,iBAAiB,EAAE;gBAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,2BAA2B,EAAE,CAAC,IAAI,CAAC,CAAC;gBACpC,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;gBAC/B,OAAO;aACR;YAED,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,iBAAiB,EAAE;gBAC3C,kBAAkB,CAAC,EAAE,CAAC,CAAC;gBACvB,2BAA2B,EAAE,CAAC,KAAK,CAAC,CAAC;gBACrC,iBAAiB,EAAE,CAAC;gBACpB,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;gBAC/B,OAAO;aACR;YAED,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,iBAAiB,EAAE;gBACtD,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;aAC/B;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,iBAAiB,EAAE;gBAC/C,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;aAChC;YAED,IAAI,CAAC,iBAAiB,EAAE;gBACtB,iBAAiB,CAAC,CAAC,CAAC,CAAC;aACtB;QACH,CAAC,EACD,OAAO,EAAE,CAAC,CAA4B,EAAE,EAAE;YACxC,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;YAC/B,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,EACD,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,QACP,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAC3B,OAAO,EAAE,CAAC,CAA0B,EAAE,EAAE;YACtC,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,gBACW,KAAK,kBACH,OAAO,mBACN,QAAQ,aAEvB,MAAC,IAAI,IACH,EAAE,EAAE,qBAAqB,EACzB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAC3B,EAAE,EAAE,EAAE,aAEL,WAAW,IAAI,CACd,KAAC,kBAAkB,mBACJ,OAAO,CAAC,YAAY,EACjC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,mBACC,IAAI,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,0BAA0B,EAAE,EAAE,EAC7C,QAAQ,EAAE,qBAAqB,gBACnB,CAAC,CAAC,yBAAyB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,YAEzE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACR,CACtB,EACA,eAAe,CAAC,CAAC,CAAC,CACjB,KAAC,uBAAuB,IACtB,IAAI,EAAC,MAAM,EACX,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,MAAM,EACd,SAAS,QACT,KAAK,EAAE,QAAQ,GACf,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAI,CACpF,IACI,EACN,QAAQ,IAAI,IAAI,IACN,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC","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', gap: 1 }}\n depth={restrictDepth(depth)}\n id={id}\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 >\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/HierarchicalAssignments/nodeItems/useNodeFocus.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import type { RefObject, MutableRefObject } from 'react';
+import { type OmitStrict } from '@pega/cosmos-react-core';
+import type { AssignmentProps, CaseListProps } from '../HierarchicalAssignments.types';
+type Id = AssignmentProps['id'] | CaseListProps['id'];
+interface NodeFocusProps {
+    elementRef: RefObject<HTMLLIElement>;
+    id: Id;
+    firstNodeId?: Id;
+    focusedNodeId?: Id;
+    lastNodeId?: Id;
+    parentRef?: RefObject<HTMLUListElement>;
+    nodeInternalFocus?: boolean;
+    reverseTabFlow?: MutableRefObject<boolean>;
+}
+declare const useNodeFocus: (id: NodeFocusProps['id'], elementRef: NodeFocusProps['elementRef'], parentRef?: NodeFocusProps['parentRef'], { firstNodeId, focusedNodeId, lastNodeId, nodeInternalFocus, reverseTabFlow }?: OmitStrict<NodeFocusProps, 'elementRef' | 'parentRef' | 'id'>) => {
+    focusedNode: boolean;
+    firstNode: boolean;
+    lastNode: boolean;
+    parentNodeTabIndex: number;
+    escapeNodeHandler: () => void;
+};
+export default useNodeFocus;
+//# sourceMappingURL=useNodeFocus.d.ts.map

package/lib/components/HierarchicalAssignments/nodeItems/useNodeFocus.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useNodeFocus.d.ts","sourceRoot":"","sources":["../../../../src/components/HierarchicalAssignments/nodeItems/useNodeFocus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAGvF,KAAK,EAAE,GAAG,eAAe,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;AAEtD,UAAU,cAAc;IACtB,UAAU,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACrC,EAAE,EAAE,EAAE,CAAC;IACP,WAAW,CAAC,EAAE,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,EAAE,CAAC;IACnB,UAAU,CAAC,EAAE,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC5C;AAED,QAAA,MAAM,YAAY,OACZ,cAAc,CAAC,IAAI,CAAC,cACZ,cAAc,CAAC,YAAY,CAAC,cAC5B,cAAc,CAAC,WAAW,CAAC,kFAOpC,WAAW,cAAc,EAAE,YAAY,GAAG,WAAW,GAAG,IAAI,CAAC;;;;;;CAyCjE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/HierarchicalAssignments/nodeItems/useNodeFocus.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { useMemo, useEffect } from 'react';
+import { getFocusables } from '@pega/cosmos-react-core';
+import { scrollChildIntoView } from '../helpers';
+const useNodeFocus = (id, elementRef, parentRef, { firstNodeId, focusedNodeId, lastNodeId, nodeInternalFocus, reverseTabFlow } = {}) => {
+    const focusedNode = focusedNodeId === id;
+    const firstNode = firstNodeId === id;
+    const lastNode = lastNodeId === id;
+    const parentNodeTabIndex = useMemo(() => {
+        let index = -1;
+        if (focusedNodeId) {
+            index = focusedNode ? 0 : -1;
+        }
+        else {
+            index = firstNode ? 0 : -1;
+        }
+        return index;
+    }, [focusedNodeId, focusedNode, firstNode]);
+    const escapeNodeHandler = () => {
+        elementRef.current?.focus();
+    };
+    useEffect(() => {
+        if (nodeInternalFocus && parentNodeTabIndex === 0 && !reverseTabFlow?.current) {
+            const focusables = getFocusables(elementRef);
+            focusables[0]?.focus();
+        }
+    }, [nodeInternalFocus, parentNodeTabIndex]);
+    useEffect(() => {
+        if (focusedNode && !nodeInternalFocus) {
+            elementRef.current?.focus();
+            scrollChildIntoView(parentRef, elementRef);
+        }
+    }, [focusedNode, nodeInternalFocus]);
+    return {
+        focusedNode,
+        firstNode,
+        lastNode,
+        parentNodeTabIndex,
+        escapeNodeHandler
+    };
+};
+export default useNodeFocus;
+//# sourceMappingURL=useNodeFocus.js.map

package/lib/components/HierarchicalAssignments/nodeItems/useNodeFocus.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useNodeFocus.js","sourceRoot":"","sources":["../../../../src/components/HierarchicalAssignments/nodeItems/useNodeFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,aAAa,EAAmB,MAAM,yBAAyB,CAAC;AAGzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAejD,MAAM,YAAY,GAAG,CACnB,EAAwB,EACxB,UAAwC,EACxC,SAAuC,EACvC,EACE,WAAW,EACX,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,cAAc,KACmD,EAAE,EACrE,EAAE;IACF,MAAM,WAAW,GAAG,aAAa,KAAK,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,WAAW,KAAK,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,UAAU,KAAK,EAAE,CAAC;IAEnC,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC;QACf,IAAI,aAAa,EAAE;YACjB,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC9B;aAAM;YACL,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5B;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5C,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,IAAI,kBAAkB,KAAK,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,EAAE;YAC7E,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;SACxB;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,CAAC,iBAAiB,EAAE;YACrC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YAC5B,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;SAC5C;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErC,OAAO;QACL,WAAW;QACX,SAAS;QACT,QAAQ;QACR,kBAAkB;QAClB,iBAAiB;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useMemo, useEffect } from 'react';\nimport type { RefObject, MutableRefObject } from 'react';\n\nimport { getFocusables, type OmitStrict } from '@pega/cosmos-react-core';\n\nimport type { AssignmentProps, CaseListProps } from '../HierarchicalAssignments.types';\nimport { scrollChildIntoView } from '../helpers';\n\ntype Id = AssignmentProps['id'] | CaseListProps['id'];\n\ninterface NodeFocusProps {\n elementRef: RefObject<HTMLLIElement>;\n id: Id;\n firstNodeId?: Id;\n focusedNodeId?: Id;\n lastNodeId?: Id;\n parentRef?: RefObject<HTMLUListElement>;\n nodeInternalFocus?: boolean;\n reverseTabFlow?: MutableRefObject<boolean>;\n}\n\nconst useNodeFocus = (\n id: NodeFocusProps['id'],\n elementRef: NodeFocusProps['elementRef'],\n parentRef?: NodeFocusProps['parentRef'],\n {\n firstNodeId,\n focusedNodeId,\n lastNodeId,\n nodeInternalFocus,\n reverseTabFlow\n }: OmitStrict<NodeFocusProps, 'elementRef' | 'parentRef' | 'id'> = {}\n) => {\n const focusedNode = focusedNodeId === id;\n const firstNode = firstNodeId === id;\n const lastNode = lastNodeId === id;\n\n const parentNodeTabIndex = useMemo(() => {\n let index = -1;\n if (focusedNodeId) {\n index = focusedNode ? 0 : -1;\n } else {\n index = firstNode ? 0 : -1;\n }\n return index;\n }, [focusedNodeId, focusedNode, firstNode]);\n\n const escapeNodeHandler = () => {\n elementRef.current?.focus();\n };\n\n useEffect(() => {\n if (nodeInternalFocus && parentNodeTabIndex === 0 && !reverseTabFlow?.current) {\n const focusables = getFocusables(elementRef);\n focusables[0]?.focus();\n }\n }, [nodeInternalFocus, parentNodeTabIndex]);\n\n useEffect(() => {\n if (focusedNode && !nodeInternalFocus) {\n elementRef.current?.focus();\n scrollChildIntoView(parentRef, elementRef);\n }\n }, [focusedNode, nodeInternalFocus]);\n\n return {\n focusedNode,\n firstNode,\n lastNode,\n parentNodeTabIndex,\n escapeNodeHandler\n };\n};\n\nexport default useNodeFocus;\n"]}

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

@@ -1,11 +1,13 @@
-import type { FunctionComponent, ReactNode, Ref, MouseEvent } from 'react';
-import type { ForwardProps, TestIdProp, ActionsProps } from '@pega/cosmos-react-core';
+import type { ReactNode, Ref, MouseEvent } from 'react';
+import type { TestIdProp, ActionsProps, HeadingTag } from '@pega/cosmos-react-core';
 export interface TaskItemProps extends TestIdProp {
     id: string;
     /** Name of the task displayed in the list. */
     name: string;
     /** Name of the process for the task. */
     processName?: string;
+    /** The heading tag to render task name and process as. */
+    headingTag?: HeadingTag;
     /** Avatar element to represent the task's assignee. */
     avatar?: ReactNode;
     /** MetaList element with info related to the task. */
@@ -27,12 +29,12 @@ interface Announcement {
     name: string;
     status: 'removed' | 'added';
 }
-export declare const TaskItem: (({ testId, id, name, avatar, meta, processName, onOpen, content, addAnnouncement, additionalActions, ...restProps }: TaskItemProps & {
+export declare const TaskItem: (({ testId, id, name, avatar, meta, processName, onOpen, content, headingTag, addAnnouncement, additionalActions, ...restProps }: TaskItemProps & {
     addAnnouncement?: ((announcement: Announcement) => void) | undefined;
 }) => JSX.Element) & {
     getTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["open-task"]>;
 };
-declare const _default: FunctionComponent<TaskListProps & ForwardProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<TaskListProps, "ref"> & import("react").RefAttributes<HTMLElement>> & {
     getTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
 };
 export default _default;

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,~~EAAE,iBAAiB,~~EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;~~AAoB5F~~,OAAO,KAAK,EAAE,~~YAAY~~,EAAE,~~UAAU~~,EAAE,~~YAAY~~,EAAE,MAAM,yBAAyB,CAAC;~~AAMtF~~,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,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,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,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;AAkCD,eAAO,MAAM,QAAQ;~~sCAamC~~,YAAY,KAAK,IAAI;;;~~CAkD5E~~,CAAC;;;;AAgEF,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;AAqBzE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAMpF,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,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,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;AAkCD,eAAO,MAAM,QAAQ;sCAcmC,YAAY,KAAK,IAAI;;;CA2D5E,CAAC;;;;AAgEF,wBAAyD"}

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

@@ -3,7 +3,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 { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
-import { SummaryItem, StyledSummaryListItem, Flex, defaultThemeProp, Button, useI18n, VisuallyHiddenText, useTestIds, useLiveLog, debounce, Actions, withTestIds, StyledPrimary, StyledText } from '@pega/cosmos-react-core';
+import { SummaryItem, StyledSummaryListItem, Flex, defaultThemeProp, Button, Text, useI18n, VisuallyHiddenText, useTestIds, useLiveLog, debounce, Actions, withTestIds, StyledPrimary, StyledText } from '@pega/cosmos-react-core';
 import AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';
 import { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';
 const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
@@ -33,7 +33,7 @@ const StyledSummaryItem = styled(SummaryItem)(({ hasProcessName }) => {
       `
         : null;
 });
-export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processName, onOpen, content, addAnnouncement, additionalActions, ...restProps }) => {
+export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processName, onOpen, content, headingTag, addAnnouncement, additionalActions, ...restProps }) => {
     const testIds = useTestIds(testId, getTaskItemTestIds);
     const t = useI18n();
     useEffect(() => {
@@ -42,7 +42,14 @@ export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processNa
             addAnnouncement?.({ name, status: 'removed' });
         };
     }, []);
-    const summary = (_jsx(StyledSummaryItem, { visual: avatar, hasProcessName: processName, primary: processName ? _jsx(AssignmentDetails, { name: name, processName: processName }) : name, secondary: meta, actions: content
+    let primaryValue;
+    if (processName) {
+        primaryValue = (_jsx(AssignmentDetails, { name: name, headingTag: headingTag, processName: processName }));
+    }
+    else {
+        primaryValue = headingTag ? _jsx(Text, { variant: headingTag, children: name }) : name;
+    }
+    const summary = (_jsx(StyledSummaryItem, { visual: avatar, hasProcessName: processName, primary: primaryValue, secondary: meta, actions: content
             ? additionalActions && _jsx(Actions, { menuAt: 1, items: additionalActions })
             : onOpen && (_jsxs(Button, { "data-testid": testIds.openTask, variant: 'primary', onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: `-${processName ?? ''} ${name}` })] })) }));
     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] }));

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":";;AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,EACL,WAAW,EACX,qBAAqB,EACrB,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,WAAW,EACX,aAAa,EACb,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,iBAAiB,MAAM,6CAA6C,CAAC;AAE5E,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAgC1E,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;QAEJ,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;6CACgC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;WACnE;QACH,CAAC,CAAC,GAAG,CAAA;;WAEF;;GAER,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAA+B,CAAC,EAC3E,cAAc,EACf,EAAE,EAAE;IACH,OAAO,cAAc;QACnB,CAAC,CAAC,GAAG,CAAA;UACC,aAAa;;;gBAGP,UAAU;cACZ,eAAe;;;OAGtB;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,WAAW,CACjC,CAAC,EACC,MAAM,EACN,EAAE,EACF,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,WAAW,EACX,MAAM,EACN,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,GAAG,SAAS,EAC+D,EAAE,EAAE;IAC/E,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACV,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,CACd,KAAC,iBAAiB,IAChB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,WAAW,EAC3B,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,KAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI,EACzF,SAAS,EAAE,IAAI,EACf,OAAO,EACL,OAAO;YACL,CAAC,CAAC,iBAAiB,IAAI,KAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,iBAAiB,GAAI;YACvE,CAAC,CAAC,MAAM,IAAI,CACR,MAAC,MAAM,mBACQ,OAAO,CAAC,QAAQ,EAC7B,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,yBAAO,CAAC,CAAC,IAAI,CAAC,GAAQ,EACtB,KAAC,kBAAkB,cAAE,IAAI,WAAW,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IACnE,CACV,GAEP,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,EAC/C,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,aAElC,OAAO,EACP,OAAO,IACH,CACR,CAAC;AACJ,CAAC,EACD,kBAAkB,CACnB,CAAC;AAEF,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAkC,EACpE,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,aAAa,GAAG,MAAM,CAAiB,EAAE,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAEvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,IAAI,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACpC,IAAI,UAAU,GAAG,CAAC,CAAC;YACnB,IAAI,YAAY,GAAG,CAAC,CAAC;YACrB,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;oBAC7B,YAAY,IAAI,CAAC,CAAC;iBACnB;qBAAM;oBACL,UAAU,IAAI,CAAC,CAAC;iBACjB;YACH,CAAC,CAAC,CAAC;YACH,IAAI,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACtF,IAAI,YAAY,EAAE;gBAChB,OAAO,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;aACxE;YAED,IAAI,OAAO,CAAC,OAAO,EAAE;gBACnB,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;aAC7B;YAED,aAAa,CAAC,OAAO,GAAG,EAAE,CAAC;SAC5B;IACH,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,eAAe,GAAG,CAAC,YAA0B,EAAE,EAAE;QACrD,aAAa,CAAC,OAAO,GAAG,CAAC,GAAG,aAAa,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QACjE,iBAAiB,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OAAK,IAAI,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CACvE,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport {\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp,\n Button,\n useI18n,\n VisuallyHiddenText,\n useTestIds,\n useLiveLog,\n debounce,\n Actions,\n withTestIds,\n StyledPrimary,\n StyledText\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, TestIdProp, ActionsProps } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\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 /* 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 /* 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\nexport interface TaskListProps extends TestIdProp {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n name: string;\n status: 'removed' \| 'added';\n}\n\nconst StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n return css`\n > li:last-child {\n ${hasFooter\n ? css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `\n : css`\n padding-block-end: 0;\n `}\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n hasProcessName\n}) => {\n return hasProcessName\n ? css`\n ${StyledPrimary} {\n display: contents;\n\n & > ${StyledText} {\n ${elipsisOverflow};\n }\n }\n `\n : null;\n});\n\nexport const TaskItem = withTestIds(\n ({\n testId,\n id,\n name,\n avatar,\n meta,\n processName,\n onOpen,\n content,\n addAnnouncement,\n additionalActions,\n ...restProps\n }: TaskItemProps & { addAnnouncement?: (announcement: Announcement) => void }) => {\n const testIds = useTestIds(testId, getTaskItemTestIds);\n const t = useI18n();\n\n useEffect(() => {\n addAnnouncement?.({ name, status: 'added' });\n\n return () => {\n addAnnouncement?.({ name, status: 'removed' });\n };\n }, []);\n\n const summary = (\n <StyledSummaryItem\n visual={avatar}\n hasProcessName={processName}\n primary={processName ? <AssignmentDetails name={name} processName={processName} /> : name}\n secondary={meta}\n actions={\n content\n ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n : onOpen && (\n <Button\n data-testid={testIds.openTask}\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n <span>{t('go')}</span>\n <VisuallyHiddenText>{`-${processName ?? ''} ${name}`}</VisuallyHiddenText>\n </Button>\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 </Flex>\n );\n },\n getTaskItemTestIds\n);\n\nconst TaskList: FunctionComponent<TaskListProps & ForwardProps> = forwardRef(function TaskList(\n { testId, items, hasFooter = false }: PropsWithoutRef<TaskListProps>,\n 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 {...item} addAnnouncement={addAnnouncement} key={item.id} />\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 { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\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} from '@pega/cosmos-react-core';\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\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 /* 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\nexport interface TaskListProps extends TestIdProp {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n name: string;\n status: 'removed' \| 'added';\n}\n\nconst StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n return css`\n > li:last-child {\n ${hasFooter\n ? css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `\n : css`\n padding-block-end: 0;\n `}\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n hasProcessName\n}) => {\n return hasProcessName\n ? css`\n ${StyledPrimary} {\n display: contents;\n\n & > ${StyledText} {\n ${elipsisOverflow};\n }\n }\n `\n : null;\n});\n\nexport const TaskItem = withTestIds(\n ({\n testId,\n id,\n name,\n avatar,\n meta,\n processName,\n onOpen,\n content,\n headingTag,\n addAnnouncement,\n additionalActions,\n ...restProps\n }: TaskItemProps & { addAnnouncement?: (announcement: Announcement) => void }) => {\n const testIds = useTestIds(testId, getTaskItemTestIds);\n const t = useI18n();\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 name={name} headingTag={headingTag} processName={processName} />\n );\n } else {\n primaryValue = headingTag ? <Text variant={headingTag}>{name}</Text> : name;\n }\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 <Button\n data-testid={testIds.openTask}\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n <span>{t('go')}</span>\n <VisuallyHiddenText>{`-${processName ?? ''} ${name}`}</VisuallyHiddenText>\n </Button>\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 </Flex>\n );\n },\n getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n { testId, items, hasFooter = 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 {...item} addAnnouncement={addAnnouncement} key={item.id} />\n ))}\n </Flex>\n );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}

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

@@ -27,7 +27,7 @@ const Tasks = (props) => {
     const containerRef = useRef(null);
     const hasFooter = !!(!openItem && onExpandToggle && count > 0);
     const TaskItems = useMemo(() => {
-        return openItem ? (_jsx(TaskItem, { ...openItem })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
+        return openItem ? (_jsx(TaskItem, { ...openItem, headingTag: 'h2' })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
     }, [items, openItem]);
     useEffect(() => {
         if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {

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":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,UAAU,EACV,MAAM,EACN,WAAW,EACX,QAAQ,EACR,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AASjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAG1F,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAwBnD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACtF,OAAO,QAAQ;QACb,CAAC,CAAC,GAAG,CAAA;sBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;OACpC;QACH,CAAC,CAAC,GAAG,CAAA;UACC,gBAAgB,cAAc,gBAAgB;oCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;;OAE/C,CAAC;AACR,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,CAAC,KAAiB,EAAE,EAAE;IACjE,MAAM,EACJ,MAAM,EACN,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,KAAK,GAAG,KAAK,CAAC,MAAM,EACpB,MAAM,EACN,WAAW,GAAG,KAAK,EACnB,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,cAAc,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC;IAE/D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,KAAC,QAAQ,OAAK,QAAQ,~~GAAI~~,~~CAC3B~~,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,IAAI,GAAI,CACvE,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,IAAI,gBAAgB,EAAE,KAAK,WAAW,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,EAAE;YACzF,eAAe,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC;SAClC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,MAAC,WAAW,mBACG,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,QAAQ,EAAE,CAAC,CAAC,QAAQ,2BAEpB,GAAG,EAAE,YAAY,aAEhB,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EACjC,KAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,UAAU,EAAC,IAAI,EACf,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EACvB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GACjB,IACS,CACd,EAED,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAe,EAE1E,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,GAAG,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,SAAG,EACpF,SAAS,IAAI,CAAC,WAAW,IAAI,CAC5B,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,YAC1B,KAAC,MAAM,mBACQ,OAAO,CAAC,YAAY,EACjC,OAAO,EAAC,MAAM,gBACF,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAC,EACrF,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,cAAc,EAAE,EAAE,CAAC;wBACnB,IAAI,CAAC,CAAC,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;4BACpC,MAAM,EAAE,aAAa,EAAE,GAAG,CAAC,CAAC;4BAC5B,qBAAqB,CAAC,GAAG,EAAE;gCACzB,IAAI,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC;oCAAE,aAAa,CAAC,cAAc,EAAE,CAAC;4BACpF,CAAC,CAAC,CAAC;yBACJ;oBACH,CAAC,EACD,GAAG,EAAE,eAAe,YAEnB,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GACxD,GACE,CACd,IACW,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC","sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport type { FC, MouseEvent } 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} from '@pega/cosmos-react-core';\nimport type {\n AvatarProps,\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';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. /\n items: TaskItemProps[];\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'>;\n /* Integer representing the total count of tasks. /\n count?: number;\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\nexport const StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : css`\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n testId,\n items = [],\n name,\n avatar,\n viewSelector,\n count = items.length,\n search,\n loadingMore = false,\n onExpandToggle,\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 containerRef = useRef<HTMLDivElement>(null);\n\n const hasFooter = !!(!openItem && onExpandToggle && count > 0);\n\n const TaskItems = useMemo(() => {\n return openItem ? (\n <TaskItem {...openItem} />\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 return (\n <StyledTasks\n data-testid={testIds.root}\n {...restProps}\n openItem={!!openItem}\n data-app-region\n ref={containerRef}\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={{ total: count }}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\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(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n ref={toggleButtonRef}\n >\n {t(!!count && count > items.length ? '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, useMemo, useRef } from 'react';\nimport type { FC, MouseEvent } 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} from '@pega/cosmos-react-core';\nimport type {\n AvatarProps,\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';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. /\n items: TaskItemProps[];\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'>;\n /* Integer representing the total count of tasks. /\n count?: number;\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\nexport const StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : css`\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n testId,\n items = [],\n name,\n avatar,\n viewSelector,\n count = items.length,\n search,\n loadingMore = false,\n onExpandToggle,\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 containerRef = useRef<HTMLDivElement>(null);\n\n const hasFooter = !!(!openItem && onExpandToggle && count > 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 return (\n <StyledTasks\n data-testid={testIds.root}\n {...restProps}\n openItem={!!openItem}\n data-app-region\n ref={containerRef}\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={{ total: count }}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\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(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n ref={toggleButtonRef}\n >\n {t(!!count && count > items.length ? '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": "7.5.6",
+  "version": "7.6.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,8 +19,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "7.5.6",
-    "@pega/cosmos-react-rte": "7.5.6",
+    "@pega/cosmos-react-core": "7.6.0",
+    "@pega/cosmos-react-rte": "7.6.0",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",