@pega/cosmos-react-work 7.0.0-build.10.8 → 7.0.0-build.11.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.
- package/lib/components/CaseView/UtilitiesSummary.d.ts +1 -1
- package/lib/components/CaseView/UtilitiesSummary.d.ts.map +1 -1
- package/lib/components/CaseView/UtilitiesSummary.js +24 -8
- package/lib/components/CaseView/UtilitiesSummary.js.map +1 -1
- package/lib/components/Tasks/Tasks.d.ts +5 -0
- package/lib/components/Tasks/Tasks.d.ts.map +1 -1
- package/lib/components/Tasks/Tasks.js +13 -5
- package/lib/components/Tasks/Tasks.js.map +1 -1
- package/package.json +2 -2
|
@@ -3,7 +3,7 @@ import type { CaseViewProps } from './CaseView.types';
|
|
|
3
3
|
export interface UtilitiesSummaryProps {
|
|
4
4
|
items?: CaseViewProps['utilitiesSummaryItems'];
|
|
5
5
|
}
|
|
6
|
-
export declare const StyledUtilitiesSummary: import("styled-components").StyledComponent<"
|
|
6
|
+
export declare const StyledUtilitiesSummary: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
|
|
7
7
|
declare const UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps>;
|
|
8
8
|
export default UtilitiesSummary;
|
|
9
9
|
//# sourceMappingURL=UtilitiesSummary.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe/C,OAAO,KAAK,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe/C,OAAO,KAAK,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,wGAiBlC,CAAC;AAoEF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAe9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
import { createElement as _createElement } from "react";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { Button, Card, Count, Flex, Icon, Tooltip, useI18n, VisuallyHiddenText, useElement } from '@pega/cosmos-react-core';
|
|
5
|
-
export const StyledUtilitiesSummary = styled.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
export const StyledUtilitiesSummary = styled.ul `
|
|
6
|
+
width: 2.75rem;
|
|
7
|
+
list-style: none;
|
|
8
|
+
|
|
9
|
+
> li {
|
|
10
|
+
display: contents;
|
|
11
|
+
|
|
12
|
+
&:first-child {
|
|
13
|
+
border-start-start-radius: inherit;
|
|
14
|
+
border-start-end-radius: inherit;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&:last-child {
|
|
18
|
+
border-end-start-radius: inherit;
|
|
19
|
+
border-end-end-radius: inherit;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
10
23
|
const StyledUtilitySummaryButton = styled(Button)(({ theme }) => css `
|
|
11
24
|
padding-block: ${theme.base.spacing};
|
|
12
25
|
padding-inline: 0;
|
|
@@ -39,11 +52,14 @@ const StyledUtilitySummaryButton = styled(Button)(({ theme }) => css `
|
|
|
39
52
|
`);
|
|
40
53
|
const UtilitySummary = ({ name, iconName, count, onClick }) => {
|
|
41
54
|
const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement();
|
|
42
|
-
return (
|
|
55
|
+
return (
|
|
56
|
+
// Default role is removed by "list-style: none" on StyledUtilitiesSummary.
|
|
57
|
+
// eslint-disable-next-line jsx-a11y/no-redundant-roles
|
|
58
|
+
_jsxs("li", { role: 'listitem', children: [_jsxs(Flex, { container: {
|
|
43
59
|
direction: 'column',
|
|
44
60
|
alignItems: 'center',
|
|
45
61
|
gap: 0.5
|
|
46
|
-
}, onClick: onClick, ref: setUtilSummaryTooltip, as: StyledUtilitySummaryButton, children: [_jsx(Icon, { name: iconName }), count !== undefined && _jsx(Count, { "aria-hidden": true, children: count }), _jsx(VisuallyHiddenText, {
|
|
62
|
+
}, onClick: onClick, ref: setUtilSummaryTooltip, as: StyledUtilitySummaryButton, children: [_jsx(Icon, { name: iconName }), count !== undefined && _jsx(Count, { "aria-hidden": true, children: count }), _jsx(VisuallyHiddenText, { children: `${count ?? ''} ${name}` })] }), _jsx(Tooltip, { target: utilSummaryTooltip, showDelay: 'none', hideDelay: 'none', children: name })] }));
|
|
47
63
|
};
|
|
48
64
|
const UtilitiesSummary = ({ items = [] }) => {
|
|
49
65
|
const t = useI18n();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;CAiB9C,CAAC;AAEF,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpC,CACF,CAAC;AAEF,MAAM,cAAc,GAA0C,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9E,OAAO;IACL,2EAA2E;IAC3E,uDAAuD;IACvD,cAAI,IAAI,EAAC,UAAU,aACjB,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,qBAAqB,EAC1B,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,EACvB,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,KAAK,GAAS,EAC1D,KAAC,kBAAkB,cAAE,GAAG,KAAK,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IAC9D,EAEP,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACnE,IAAI,GACG,IACP,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACxD,EAAE,EAAE,sBAAsB,gBACd,CAAC,CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,cAAc,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACjD,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n Count,\n Flex,\n Icon,\n Tooltip,\n useI18n,\n VisuallyHiddenText,\n useElement\n} from '@pega/cosmos-react-core';\n\nimport type { CaseViewProps, UtilitySummaryItem } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.ul`\n width: 2.75rem;\n list-style: none;\n\n > li {\n display: contents;\n\n &:first-child {\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n }\n }\n`;\n\nconst StyledUtilitySummaryButton = styled(Button)(\n ({ theme }) => css`\n padding-block: ${theme.base.spacing};\n padding-inline: 0;\n width: 100%;\n color: currentColor;\n border-radius: unset;\n border: none;\n\n &:hover {\n color: currentColor;\n }\n\n &:focus {\n z-index: 1;\n }\n\n &:first-child {\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n }\n\n & + & {\n margin: 0;\n }\n `\n);\n\nconst UtilitySummary: FunctionComponent<UtilitySummaryItem> = ({\n name,\n iconName,\n count,\n onClick\n}) => {\n const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement<HTMLElement>();\n return (\n // Default role is removed by \"list-style: none\" on StyledUtilitiesSummary.\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <li role='listitem'>\n <Flex\n container={{\n direction: 'column',\n alignItems: 'center',\n gap: 0.5\n }}\n onClick={onClick}\n ref={setUtilSummaryTooltip}\n as={StyledUtilitySummaryButton}\n >\n <Icon name={iconName} />\n {count !== undefined && <Count aria-hidden>{count}</Count>}\n <VisuallyHiddenText>{`${count ?? ''} ${name}`}</VisuallyHiddenText>\n </Flex>\n\n <Tooltip target={utilSummaryTooltip} showDelay='none' hideDelay='none'>\n {name}\n </Tooltip>\n </li>\n );\n};\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [] }) => {\n const t = useI18n();\n\n return (\n <Card\n container={{ direction: 'column', alignItems: 'center' }}\n as={StyledUtilitiesSummary}\n aria-label={t('utilities_summary')}\n role='list'\n >\n {items.map(item => (\n <UtilitySummary {...item} key={item.iconName} />\n ))}\n </Card>\n );\n};\n\nexport default UtilitiesSummary;\n"]}
|
|
@@ -17,6 +17,11 @@ export interface TasksProps extends NoChildrenProp, TestIdProp {
|
|
|
17
17
|
search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;
|
|
18
18
|
/** 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. */
|
|
19
19
|
onExpandToggle?: () => void;
|
|
20
|
+
/**
|
|
21
|
+
* Flag indicating more items are being fetched
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
loadingMore?: boolean;
|
|
20
25
|
}
|
|
21
26
|
export declare const StyledTasks: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {
|
|
22
27
|
openItem?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAmB5C,OAAO,KAAK,EACV,WAAW,EACX,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;AAGhD,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,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,CAAC,CAAC;IACjE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;CACvB;AAED,eAAO,MAAM,WAAW;;SAUtB,CAAC;;;;AA0FH,wBAAmD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
2
|
+
import { useEffect, useMemo, useRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds, Progress, getActiveElement } from '@pega/cosmos-react-core';
|
|
5
5
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
6
6
|
import TaskList, { TaskItem } from './TaskList';
|
|
7
7
|
import { getTasksTestIds } from './Tasks.test-ids';
|
|
@@ -18,15 +18,23 @@ export const StyledTasks = styled(Card)(({ theme, openItem }) => {
|
|
|
18
18
|
});
|
|
19
19
|
StyledTasks.defaultProps = defaultThemeProp;
|
|
20
20
|
const Tasks = (props) => {
|
|
21
|
-
const { testId, items = [], name, avatar, viewSelector, count = items.length, search, onExpandToggle, ...restProps } = props;
|
|
21
|
+
const { testId, items = [], name, avatar, viewSelector, count = items.length, search, loadingMore = false, onExpandToggle, ...restProps } = props;
|
|
22
22
|
const testIds = useTestIds(testId, getTasksTestIds);
|
|
23
23
|
const openItem = items.find(item => item.content);
|
|
24
24
|
const t = useI18n();
|
|
25
|
+
const toggleButtonRef = useRef(null);
|
|
26
|
+
const progressRef = useRef(null);
|
|
27
|
+
const containerRef = useRef(null);
|
|
25
28
|
const hasFooter = !!(!openItem && onExpandToggle && count > 0);
|
|
26
29
|
const TaskItems = useMemo(() => {
|
|
27
30
|
return openItem ? (_jsx(TaskItem, { ...openItem })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
|
|
28
31
|
}, [items, openItem]);
|
|
29
|
-
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {
|
|
34
|
+
toggleButtonRef?.current.focus();
|
|
35
|
+
}
|
|
36
|
+
}, [loadingMore]);
|
|
37
|
+
return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, "data-app-region": true, ref: containerRef, 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: { total: count }, search: search, item: { grow: 1 } })] })), _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(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
|
|
30
38
|
onExpandToggle?.();
|
|
31
39
|
if (!!count && count <= items.length) {
|
|
32
40
|
const { currentTarget } = e;
|
|
@@ -35,7 +43,7 @@ const Tasks = (props) => {
|
|
|
35
43
|
currentTarget.scrollIntoView();
|
|
36
44
|
});
|
|
37
45
|
}
|
|
38
|
-
}, children: t(!!count && count > items.length ? 'show_more' : 'show_less') }) }))] }));
|
|
46
|
+
}, ref: toggleButtonRef, children: t(!!count && count > items.length ? 'show_more' : 'show_less') }) }))] }));
|
|
39
47
|
};
|
|
40
48
|
export default withTestIds(Tasks, getTasksTestIds);
|
|
41
49
|
//# sourceMappingURL=Tasks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
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} />\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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "7.0.0-build.
|
|
3
|
+
"version": "7.0.0-build.11.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"build": "tsc -b tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@pega/cosmos-react-core": "7.0.0-build.
|
|
22
|
+
"@pega/cosmos-react-core": "7.0.0-build.11.0",
|
|
23
23
|
"@types/react": "^17.0.62",
|
|
24
24
|
"@types/react-dom": "^17.0.20",
|
|
25
25
|
"@types/styled-components": "^5.1.26",
|