@pega/cosmos-react-work 9.0.0-build.29.17 → 9.0.0-build.29.19
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/CaseHierarchy/CaseHierarchy.d.ts +2 -2
- package/lib/components/CaseHierarchy/CaseHierarchy.d.ts.map +1 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.js +3 -3
- package/lib/components/CaseHierarchy/CaseHierarchy.js.map +1 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.styles.d.ts.map +1 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.styles.js +9 -6
- package/lib/components/CaseHierarchy/CaseHierarchy.styles.js.map +1 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.test-ids.d.ts +1 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.test-ids.d.ts.map +1 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.test-ids.js +2 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.test-ids.js.map +1 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.types.d.ts +7 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.types.d.ts.map +1 -1
- package/lib/components/CaseHierarchy/CaseHierarchy.types.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 +29 -5
- package/lib/components/Tasks/Tasks.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CaseHierarchyProps } from './CaseHierarchy.types';
|
|
2
|
-
declare const _default: import("react").ForwardRefExoticComponent<Omit<CaseHierarchyProps, "ref"> & import("react").RefAttributes<
|
|
3
|
-
getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "icon", "count"]>;
|
|
2
|
+
declare const _default: import("react").ForwardRefExoticComponent<Omit<CaseHierarchyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
|
|
3
|
+
getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "icon", "count", "search"]>;
|
|
4
4
|
};
|
|
5
5
|
export default _default;
|
|
6
6
|
//# sourceMappingURL=CaseHierarchy.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHierarchy.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CaseHierarchy.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;;;;AAgFhE,wBAAmE"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { colorIconMapping, Count, EmptyState, ErrorState, Flex, Icon, Progress, Text, useI18n, useTestIds, useTheme, withTestIds } from '@pega/cosmos-react-core';
|
|
3
|
+
import { colorIconMapping, Count, EmptyState, ErrorState, Flex, Icon, Progress, SearchInput, Text, useI18n, useTestIds, useTheme, withTestIds } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledCaseHierarchy, StyledCaseHierarchyHeader, StyledCaseHierarchyTree, StyledOverflowContainer } from './CaseHierarchy.styles';
|
|
5
5
|
import { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';
|
|
6
|
-
const CaseHierarchy = forwardRef(function CaseHierarchy({ testId, heading, icon, loading, error, count, nodes, currentCaseId, ...restProps }, ref) {
|
|
6
|
+
const CaseHierarchy = forwardRef(function CaseHierarchy({ testId, heading, icon, loading, error, count, nodes, search, currentCaseId, ...restProps }, ref) {
|
|
7
7
|
const t = useI18n();
|
|
8
8
|
const theme = useTheme();
|
|
9
9
|
const testIds = useTestIds(testId, getCaseHierarchyTestIds);
|
|
@@ -19,7 +19,7 @@ const CaseHierarchy = forwardRef(function CaseHierarchy({ testId, heading, icon,
|
|
|
19
19
|
}
|
|
20
20
|
return _jsx(StyledCaseHierarchyTree, { ...restProps, currentNodeId: currentCaseId, nodes: nodes });
|
|
21
21
|
})();
|
|
22
|
-
return (_jsxs(StyledCaseHierarchy, { "data-testid": testIds.root, ref: ref, children: [_jsx(StyledCaseHierarchyHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [theme.components['case-view'].utilities['icon-color'] ? (_jsx(Icon, { "data-testid": testIds.icon, name: icon ?? 'folder-nested', background: colorIconMapping(theme, icon ?? 'folder-nested'), shape: 'circle' })) : (_jsx(Icon, { "data-testid": testIds.icon, name: icon ?? 'folder-nested' })), _jsx(Text, { "data-testid": testIds.heading, variant: 'h3', children: heading }), !loading && typeof count === 'number' && (_jsx(Count, { "data-testid": testIds.count, children: count }))] }) }), _jsx(StyledOverflowContainer, { children: content })] }));
|
|
22
|
+
return (_jsxs(StyledCaseHierarchy, { "data-testid": testIds.root, ref: ref, children: [_jsx(StyledCaseHierarchyHeader, { children: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, item: { grow: 1 }, children: [_jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 1 }, children: [theme.components['case-view'].utilities['icon-color'] ? (_jsx(Icon, { "data-testid": testIds.icon, name: icon ?? 'folder-nested', background: colorIconMapping(theme, icon ?? 'folder-nested'), shape: 'circle' })) : (_jsx(Icon, { "data-testid": testIds.icon, name: icon ?? 'folder-nested' })), _jsx(Text, { "data-testid": testIds.heading, variant: 'h3', children: heading }), !loading && typeof count === 'number' && (_jsx(Count, { "data-testid": testIds.count, children: count }))] }), search && (_jsx(SearchInput, { "data-testid": testIds.search, value: search.value, onSearchChange: search.handler }))] }) }), _jsx(StyledOverflowContainer, { children: content })] }));
|
|
23
23
|
});
|
|
24
24
|
export default withTestIds(CaseHierarchy, getCaseHierarchyTestIds);
|
|
25
25
|
//# sourceMappingURL=CaseHierarchy.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHierarchy.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EACL,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,aAAa,CACrD,EACE,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAK,EACL,aAAa,EACb,GAAG,SAAS,EACwB,EACtC,
|
|
1
|
+
{"version":3,"file":"CaseHierarchy.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport {\n colorIconMapping,\n Count,\n EmptyState,\n ErrorState,\n Flex,\n Icon,\n Progress,\n SearchInput,\n Text,\n useI18n,\n useTestIds,\n useTheme,\n withTestIds\n} from '@pega/cosmos-react-core';\n\nimport type { CaseHierarchyProps } from './CaseHierarchy.types';\nimport {\n StyledCaseHierarchy,\n StyledCaseHierarchyHeader,\n StyledCaseHierarchyTree,\n StyledOverflowContainer\n} from './CaseHierarchy.styles';\nimport { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';\n\nconst CaseHierarchy = forwardRef(function CaseHierarchy(\n {\n testId,\n heading,\n icon,\n loading,\n error,\n count,\n nodes,\n search,\n currentCaseId,\n ...restProps\n }: PropsWithoutRef<CaseHierarchyProps>,\n ref: Ref<HTMLDivElement>\n) {\n const t = useI18n();\n const theme = useTheme();\n const testIds = useTestIds(testId, getCaseHierarchyTestIds);\n\n const content = (() => {\n if (error) {\n return <ErrorState message={t('error')} />;\n }\n\n if (loading) {\n return <Progress placement='block' />;\n }\n\n if (nodes.length === 0) {\n return <EmptyState />;\n }\n\n return <StyledCaseHierarchyTree {...restProps} currentNodeId={currentCaseId} nodes={nodes} />;\n })();\n\n return (\n <StyledCaseHierarchy data-testid={testIds.root} ref={ref}>\n <StyledCaseHierarchyHeader>\n <Flex container={{ direction: 'column', gap: 1 }} item={{ grow: 1 }}>\n <Flex container={{ direction: 'row', alignItems: 'center', gap: 1 }}>\n {theme.components['case-view'].utilities['icon-color'] ? (\n <Icon\n data-testid={testIds.icon}\n name={icon ?? 'folder-nested'}\n background={colorIconMapping(theme, icon ?? 'folder-nested')}\n shape='circle'\n />\n ) : (\n <Icon data-testid={testIds.icon} name={icon ?? 'folder-nested'} />\n )}\n <Text data-testid={testIds.heading} variant='h3'>\n {heading}\n </Text>\n {!loading && typeof count === 'number' && (\n <Count data-testid={testIds.count}>{count}</Count>\n )}\n </Flex>\n {search && (\n <SearchInput\n data-testid={testIds.search}\n value={search.value}\n onSearchChange={search.handler}\n />\n )}\n </Flex>\n </StyledCaseHierarchyHeader>\n <StyledOverflowContainer>{content}</StyledOverflowContainer>\n </StyledCaseHierarchy>\n );\n});\n\nexport default withTestIds(CaseHierarchy, getCaseHierarchyTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHierarchy.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,
|
|
1
|
+
{"version":3,"file":"CaseHierarchy.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAQjC,eAAO,MAAM,uBAAuB,EAAE,OAAO,YAe5C,CAAC;AAIF,eAAO,MAAM,uBAAuB,6ZAoBnC,CAAC;AAIF,eAAO,MAAM,yBAAyB;;2BAYpC,CAAC;AAIH,eAAO,MAAM,mBAAmB;;yLAI/B,CAAC"}
|
|
@@ -1,19 +1,22 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { defaultThemeProp, StandardTree, Card, CardContent, StyledFlex } from '@pega/cosmos-react-core';
|
|
2
|
+
import { defaultThemeProp, StandardTree, Card, CardContent, StyledFlex, StyledButton } from '@pega/cosmos-react-core';
|
|
3
3
|
import { StyledSummaryListHeader } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';
|
|
4
4
|
import { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
|
|
5
|
-
import { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
|
|
6
|
-
export const StyledCaseHierarchyTree = styled(StandardTree)(({ theme }) =>
|
|
7
|
-
return css `
|
|
5
|
+
import { StyledLabelContainer, StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
|
|
6
|
+
export const StyledCaseHierarchyTree = styled(StandardTree)(({ theme }) => css `
|
|
8
7
|
display: table;
|
|
9
8
|
width: 100%;
|
|
10
9
|
|
|
10
|
+
${StyledLabelContainer} ${StyledButton} {
|
|
11
|
+
align-self: flex-start;
|
|
12
|
+
margin-block-start: calc(${theme.base.spacing} / 4);
|
|
13
|
+
}
|
|
14
|
+
|
|
11
15
|
[aria-current='true'],
|
|
12
16
|
[aria-current='page'] {
|
|
13
17
|
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
14
18
|
}
|
|
15
|
-
|
|
16
|
-
});
|
|
19
|
+
`);
|
|
17
20
|
StyledCaseHierarchyTree.defaultProps = defaultThemeProp;
|
|
18
21
|
export const StyledOverflowContainer = styled(CardContent)(({ theme }) => css `
|
|
19
22
|
overflow: auto;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHierarchy.styles.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,UAAU,
|
|
1
|
+
{"version":3,"file":"CaseHierarchy.styles.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,UAAU,EACV,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,uBAAuB,EAAE,MAAM,gEAAgE,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,MAAM,6DAA6D,CAAC;AAC3F,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,iEAAiE,CAAC;AAEzE,MAAM,CAAC,MAAM,uBAAuB,GAAwB,MAAM,CAAC,YAAY,CAAC,CAC9E,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;MAId,oBAAoB,IAAI,YAAY;;iCAET,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;qBAK9B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;GAExD,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC,CACxD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;MAId,qBAAqB;;sDAE2B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;sDAG3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;qDAG5B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;qDAG3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;GAG7E,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE1C,UAAU;oBACI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;sBAGjC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;GAGvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3C,YAAY;;;CAGf,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StandardTree,\n Card,\n CardContent,\n StyledFlex,\n StyledButton\n} from '@pega/cosmos-react-core';\nimport { StyledSummaryListHeader } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\nimport { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport {\n StyledLabelContainer,\n StyledNodeInteraction\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nexport const StyledCaseHierarchyTree: typeof StandardTree = styled(StandardTree)(\n ({ theme }) => css`\n display: table;\n width: 100%;\n\n ${StyledLabelContainer} ${StyledButton} {\n align-self: flex-start;\n margin-block-start: calc(${theme.base.spacing} / 4);\n }\n\n [aria-current='true'],\n [aria-current='page'] {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n `\n);\n\nStyledCaseHierarchyTree.defaultProps = defaultThemeProp;\n\nexport const StyledOverflowContainer = styled(CardContent)(\n ({ theme }) => css`\n overflow: auto;\n max-height: inherit;\n\n ${StyledNodeInteraction} {\n border-top-right-radius: calc(\n var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})\n );\n border-top-left-radius: calc(\n var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})\n );\n border-bottom-left-radius: calc(\n var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})\n );\n border-bottom-right-radius: calc(\n var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})\n );\n }\n `\n);\n\nStyledOverflowContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHierarchyHeader = styled(StyledSummaryListHeader)(({ theme }) => {\n return css`\n padding-block-end: calc(${theme.base.spacing} / 2);\n\n ${StyledFlex} {\n min-height: ${theme.base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n }\n }\n `;\n});\n\nStyledCaseHierarchyHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHierarchy = styled(Card)`\n ${StyledDialog} & {\n max-height: calc(100dvh - 5rem);\n }\n`;\n\nStyledCaseHierarchy.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const getCaseHierarchyTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "icon", "count"]>;
|
|
1
|
+
export declare const getCaseHierarchyTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "icon", "count", "search"]>;
|
|
2
2
|
//# sourceMappingURL=CaseHierarchy.test-ids.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHierarchy.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,
|
|
1
|
+
{"version":3,"file":"CaseHierarchy.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,2KAKzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHierarchy.test-ids.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE;IACrE,SAAS;IACT,MAAM;IACN,OAAO;
|
|
1
|
+
{"version":3,"file":"CaseHierarchy.test-ids.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE;IACrE,SAAS;IACT,MAAM;IACN,OAAO;IACP,QAAQ;CACA,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getCaseHierarchyTestIds = createTestIds('case-hierarchy', [\n 'heading',\n 'icon',\n 'count',\n 'search'\n] as const);\n"]}
|
|
@@ -4,7 +4,8 @@ export interface CaseHierarchyNode extends OmitStrict<StandardTreeNode, 'nodes'>
|
|
|
4
4
|
nodes?: CaseHierarchyNode[];
|
|
5
5
|
caseTypeId?: string;
|
|
6
6
|
}
|
|
7
|
-
export interface CaseHierarchyProps extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref'>, TestIdProp {
|
|
7
|
+
export interface CaseHierarchyProps extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref' | 'nodes'>, TestIdProp {
|
|
8
|
+
nodes: CaseHierarchyNode[];
|
|
8
9
|
/** Heading shown on the Card wrapping the component. */
|
|
9
10
|
heading: string;
|
|
10
11
|
/** The icon rendered as part of the header. If not set will default to 'folder-nested'. */
|
|
@@ -17,6 +18,11 @@ export interface CaseHierarchyProps extends OmitStrict<StandardTreeProps, 'curre
|
|
|
17
18
|
error?: boolean;
|
|
18
19
|
/** Will render the provided number in a count badge next to the heading. */
|
|
19
20
|
count?: number;
|
|
21
|
+
/** If set, will render a search input above the tree to search nodes. */
|
|
22
|
+
search?: {
|
|
23
|
+
value: string;
|
|
24
|
+
handler?: (value: string) => void;
|
|
25
|
+
};
|
|
20
26
|
/** A ref to the wrapping element. */
|
|
21
27
|
ref?: Ref<HTMLDivElement>;
|
|
22
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHierarchy.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC9E,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,iBAAiB,EAAE,eAAe,GAAG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"CaseHierarchy.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC9E,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,iBAAiB,EAAE,eAAe,GAAG,KAAK,GAAG,OAAO,CAAC,EACtE,UAAU;IACZ,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,mEAAmE;IACnE,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,CAAC;IAC9D,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHierarchy.types.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type {\n IconProps,\n OmitStrict,\n StandardTreeNode,\n StandardTreeProps,\n TestIdProp,\n TreeNode\n} from '@pega/cosmos-react-core';\n\nexport interface CaseHierarchyNode extends OmitStrict<StandardTreeNode, 'nodes'> {\n nodes?: CaseHierarchyNode[];\n caseTypeId?: string;\n}\n\nexport interface CaseHierarchyProps\n extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref'>,\n TestIdProp {\n /** Heading shown on the Card wrapping the component. */\n heading: string;\n /** The icon rendered as part of the header. If not set will default to 'folder-nested'. */\n icon?: IconProps['name'];\n /** The currently selected case, will be highlighted by default. */\n currentCaseId?: TreeNode['id'];\n /** If set, a progress indicator will render in place of the component. */\n loading?: boolean;\n /** If set, an error state will render in place of the component. */\n error?: boolean;\n /** Will render the provided number in a count badge next to the heading. */\n count?: number;\n /** A ref to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"CaseHierarchy.types.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type {\n IconProps,\n OmitStrict,\n StandardTreeNode,\n StandardTreeProps,\n TestIdProp,\n TreeNode\n} from '@pega/cosmos-react-core';\n\nexport interface CaseHierarchyNode extends OmitStrict<StandardTreeNode, 'nodes'> {\n nodes?: CaseHierarchyNode[];\n caseTypeId?: string;\n}\n\nexport interface CaseHierarchyProps\n extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref' | 'nodes'>,\n TestIdProp {\n nodes: CaseHierarchyNode[];\n /** Heading shown on the Card wrapping the component. */\n heading: string;\n /** The icon rendered as part of the header. If not set will default to 'folder-nested'. */\n icon?: IconProps['name'];\n /** The currently selected case, will be highlighted by default. */\n currentCaseId?: TreeNode['id'];\n /** If set, a progress indicator will render in place of the component. */\n loading?: boolean;\n /** If set, an error state will render in place of the component. */\n error?: boolean;\n /** Will render the provided number in a count badge next to the heading. */\n count?: number;\n /** If set, will render a search input above the tree to search nodes. */\n search?: { value: string; handler?: (value: string) => void };\n /** A ref to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
@@ -26,6 +26,11 @@ export interface TasksProps extends NoChildrenProp, TestIdProp {
|
|
|
26
26
|
* Whether to fit Tasks widget in the parent element.
|
|
27
27
|
*/
|
|
28
28
|
fitToParent?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Callback invoked with the calculated item limit based on available height.
|
|
31
|
+
* Only fires when fitToParent is true.
|
|
32
|
+
*/
|
|
33
|
+
onItemLimitChange?: (limit: number) => void;
|
|
29
34
|
}
|
|
30
35
|
export declare const StyledTasks: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@pega/cosmos-react-core").CardProps, "ref"> & import("react").RefAttributes<HTMLElement> & ForwardProps, "ref"> & {
|
|
31
36
|
ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
|
|
@@ -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;AAqB5C,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,GAAG,kBAAkB,CAAC,CAAC;IACtF,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;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,WAAW;;;eAA6B,OAAO;kBAAgB,OAAO;kLAiBjF,CAAC;;;;AAoIH,wBAAmD"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useMemo, useRef } from 'react';
|
|
2
|
+
import { useEffect, useLayoutEffect, 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, Progress, getActiveElement } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds, Progress, getActiveElement, useElement } from '@pega/cosmos-react-core';
|
|
5
|
+
import { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';
|
|
5
6
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
6
7
|
import TaskList, { TaskItem } from './TaskList';
|
|
7
8
|
import { getTasksTestIds } from './Tasks.test-ids';
|
|
@@ -28,13 +29,14 @@ const StyledCardContent = styled(CardContent) `
|
|
|
28
29
|
`;
|
|
29
30
|
StyledTasks.defaultProps = defaultThemeProp;
|
|
30
31
|
const Tasks = (props) => {
|
|
31
|
-
const { testId, items = [], name, avatar, viewSelector, count = items.length, search, loadingMore = false, fitToParent = false, onExpandToggle, ...restProps } = props;
|
|
32
|
+
const { testId, items = [], name, avatar, viewSelector, count = items.length, search, loadingMore = false, fitToParent = false, onExpandToggle, onItemLimitChange, ...restProps } = props;
|
|
32
33
|
const testIds = useTestIds(testId, getTasksTestIds);
|
|
33
34
|
const openItem = items.find(item => item.content);
|
|
34
35
|
const t = useI18n();
|
|
35
36
|
const toggleButtonRef = useRef(null);
|
|
36
37
|
const progressRef = useRef(null);
|
|
37
|
-
const
|
|
38
|
+
const [containerEl, setContainerEl] = useElement();
|
|
39
|
+
const containerSize = useMonitoredSize(containerEl, 0);
|
|
38
40
|
const hasFooter = !!(!openItem && onExpandToggle && count > 0);
|
|
39
41
|
const TaskItems = useMemo(() => {
|
|
40
42
|
return openItem ? (_jsx(TaskItem, { ...openItem, headingTag: 'h2' })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
|
|
@@ -44,7 +46,29 @@ const Tasks = (props) => {
|
|
|
44
46
|
toggleButtonRef?.current.focus();
|
|
45
47
|
}
|
|
46
48
|
}, [loadingMore]);
|
|
47
|
-
|
|
49
|
+
// Measure available height and calculate item limit when fitToParent is enabled
|
|
50
|
+
useLayoutEffect(() => {
|
|
51
|
+
if (!fitToParent || !containerEl || !onItemLimitChange || openItem)
|
|
52
|
+
return;
|
|
53
|
+
const container = containerEl;
|
|
54
|
+
const containerHeight = container.getBoundingClientRect().height;
|
|
55
|
+
if (containerHeight === 0)
|
|
56
|
+
return;
|
|
57
|
+
const header = container.querySelector('header');
|
|
58
|
+
const footer = container.querySelector('footer');
|
|
59
|
+
const headerHeight = header ? header.getBoundingClientRect().height : 0;
|
|
60
|
+
const footerHeight = footer ? footer.getBoundingClientRect().height : 0;
|
|
61
|
+
const listItems = container.querySelectorAll('ul > li');
|
|
62
|
+
if (listItems.length === 0)
|
|
63
|
+
return;
|
|
64
|
+
const itemHeight = listItems[0].getBoundingClientRect().height;
|
|
65
|
+
if (itemHeight === 0)
|
|
66
|
+
return;
|
|
67
|
+
const availableHeight = containerHeight - headerHeight - footerHeight;
|
|
68
|
+
const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));
|
|
69
|
+
onItemLimitChange(newLimit);
|
|
70
|
+
}, [fitToParent, items, onItemLimitChange, openItem, containerSize]);
|
|
71
|
+
return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, "data-focusable-form-container": '', ref: setContainerEl, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), fitToParent ? (_jsx(StyledCardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })) : (_jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })), _jsx(Progress, { placement: 'block', ref: progressRef, visible: loadingMore, focusOnVisible: true }), hasFooter && !loadingMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
|
|
48
72
|
onExpandToggle?.();
|
|
49
73
|
if (!!count && count <= items.length) {
|
|
50
74
|
const { currentTarget } = e;
|
|
@@ -1 +1 @@
|
|
|
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' | 'filterInputProps'>;\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 * Whether to fit Tasks widget in the parent element.\n */\n fitToParent?: boolean;\n}\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n theme,\n openItem,\n fitToParent\n}) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n `\n : css`\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n overflow: auto;\n flex-grow: 1;\n flex-basis: 0;\n min-block-size: 0;\n min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: 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 fitToParent = 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 fitToParent={fitToParent}\n data-app-region\n data-focusable-form-container=''\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 {fitToParent ? (\n <StyledCardContent>{items.length > 0 ? TaskItems : <EmptyState />}</StyledCardContent>\n ) : (\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n )}\n\n <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n {hasFooter && !loadingMore && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(!!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, useLayoutEffect, 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 useElement\n} from '@pega/cosmos-react-core';\nimport { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';\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' | 'filterInputProps'>;\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 * Whether to fit Tasks widget in the parent element.\n */\n fitToParent?: boolean;\n /**\n * Callback invoked with the calculated item limit based on available height.\n * Only fires when fitToParent is true.\n */\n onItemLimitChange?: (limit: number) => void;\n}\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n theme,\n openItem,\n fitToParent\n}) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n `\n : css`\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n overflow: auto;\n flex-grow: 1;\n flex-basis: 0;\n min-block-size: 0;\n min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: 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 fitToParent = false,\n onExpandToggle,\n onItemLimitChange,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTasksTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const progressRef = useRef<HTMLDivElement>(null);\n const [containerEl, setContainerEl] = useElement<HTMLDivElement>();\n const containerSize = useMonitoredSize(containerEl, 0);\n\n const 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 // Measure available height and calculate item limit when fitToParent is enabled\n useLayoutEffect(() => {\n if (!fitToParent || !containerEl || !onItemLimitChange || openItem) return;\n\n const container = containerEl;\n const containerHeight = container.getBoundingClientRect().height;\n if (containerHeight === 0) return;\n\n const header = container.querySelector('header');\n const footer = container.querySelector('footer');\n const headerHeight = header ? header.getBoundingClientRect().height : 0;\n const footerHeight = footer ? footer.getBoundingClientRect().height : 0;\n\n const listItems = container.querySelectorAll('ul > li');\n if (listItems.length === 0) return;\n\n const itemHeight = listItems[0].getBoundingClientRect().height;\n if (itemHeight === 0) return;\n\n const availableHeight = containerHeight - headerHeight - footerHeight;\n const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));\n\n onItemLimitChange(newLimit);\n }, [fitToParent, items, onItemLimitChange, openItem, containerSize]);\n\n return (\n <StyledTasks\n data-testid={testIds.root}\n {...restProps}\n openItem={!!openItem}\n fitToParent={fitToParent}\n data-app-region\n data-focusable-form-container=''\n ref={setContainerEl}\n >\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {avatar && <Avatar {...avatar} />}\n <ListToolbar\n name={name}\n headingTag='h2'\n viewSelector={viewSelector}\n count={{ total: count }}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n\n {fitToParent ? (\n <StyledCardContent>{items.length > 0 ? TaskItems : <EmptyState />}</StyledCardContent>\n ) : (\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n )}\n\n <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n {hasFooter && !loadingMore && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(!!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": "9.0.0-build.29.
|
|
3
|
+
"version": "9.0.0-build.29.19",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "9.0.0-build.29.
|
|
18
|
-
"@pega/cosmos-react-rte": "9.0.0-build.29.
|
|
17
|
+
"@pega/cosmos-react-core": "9.0.0-build.29.19",
|
|
18
|
+
"@pega/cosmos-react-rte": "9.0.0-build.29.19",
|
|
19
19
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
20
20
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
21
21
|
"polished": "^4.1.0",
|