@pega/cosmos-react-work 5.0.0-dev.8.4 → 5.0.0-dev.9.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/Article/ArticleMeta.d.ts +1 -5
- package/lib/components/Article/ArticleMeta.d.ts.map +1 -1
- package/lib/components/Article/ArticleMeta.js +2 -4
- package/lib/components/Article/ArticleMeta.js.map +1 -1
- package/lib/components/ArticleList/ArticleListFilter.d.ts.map +1 -1
- package/lib/components/ArticleList/ArticleListFilter.js +1 -7
- package/lib/components/ArticleList/ArticleListFilter.js.map +1 -1
- package/lib/components/Details/Details.styles.js +4 -4
- package/lib/components/Details/Details.styles.js.map +1 -1
- package/lib/components/Tasks/TaskList.d.ts.map +1 -1
- package/lib/components/Tasks/TaskList.js +10 -1
- package/lib/components/Tasks/TaskList.js.map +1 -1
- package/package.json +3 -7
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import type { FunctionComponent } from 'react';
|
|
2
2
|
import type { DateTimeDisplayProps } from '@pega/cosmos-react-core';
|
|
3
3
|
export interface ArticleMetaProps {
|
|
4
|
-
category?:
|
|
5
|
-
id: string;
|
|
6
|
-
name: string;
|
|
7
|
-
onClick: (id: string) => void;
|
|
8
|
-
};
|
|
4
|
+
category?: string;
|
|
9
5
|
publishedDate?: DateTimeDisplayProps['value'];
|
|
10
6
|
}
|
|
11
7
|
declare const ArticleMeta: FunctionComponent<ArticleMetaProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleMeta.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleMeta.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAgBpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE
|
|
1
|
+
{"version":3,"file":"ArticleMeta.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleMeta.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAgBpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAcpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { DateTimeDisplay, MetaList,
|
|
4
|
+
import { DateTimeDisplay, MetaList, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
5
|
const StyledMetaList = styled(MetaList)(({ theme: { base: { spacing } } }) => {
|
|
6
6
|
return css `
|
|
7
7
|
padding: calc(0.5 * ${spacing});
|
|
@@ -12,9 +12,7 @@ const ArticleMeta = ({ category, publishedDate }) => {
|
|
|
12
12
|
const metaItems = useMemo(() => {
|
|
13
13
|
const items = [];
|
|
14
14
|
if (category) {
|
|
15
|
-
items.push(
|
|
16
|
-
category.onClick(category.id);
|
|
17
|
-
}, children: category.name }));
|
|
15
|
+
items.push(category);
|
|
18
16
|
}
|
|
19
17
|
if (publishedDate) {
|
|
20
18
|
items.push(_jsx(DateTimeDisplay, { value: publishedDate, variant: 'date', format: 'long' }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleMeta.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleMeta.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"ArticleMeta.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleMeta.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGtF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;4BACc,OAAO;KAC9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAO/C,MAAM,WAAW,GAAwC,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IACvF,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,IAAI,QAAQ,EAAE;YACZ,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACtB;QACD,IAAI,aAAa,EAAE;YACjB,KAAK,CAAC,IAAI,CAAC,KAAC,eAAe,IAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,GAAG,CAAC,CAAC;SACpF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,OAAO,KAAC,cAAc,IAAC,KAAK,EAAE,SAAS,GAAI,CAAC;AAC9C,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { DateTimeDisplay, MetaList, defaultThemeProp } from '@pega/cosmos-react-core';\nimport type { DateTimeDisplayProps } from '@pega/cosmos-react-core';\n\nconst StyledMetaList = styled(MetaList)(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n padding: calc(0.5 * ${spacing});\n `;\n }\n);\n\nStyledMetaList.defaultProps = defaultThemeProp;\n\nexport interface ArticleMetaProps {\n category?: string;\n publishedDate?: DateTimeDisplayProps['value'];\n}\n\nconst ArticleMeta: FunctionComponent<ArticleMetaProps> = ({ category, publishedDate }) => {\n const metaItems = useMemo(() => {\n const items = [];\n if (category) {\n items.push(category);\n }\n if (publishedDate) {\n items.push(<DateTimeDisplay value={publishedDate} variant='date' format='long' />);\n }\n\n return items;\n }, [category, publishedDate]);\n\n return <StyledMetaList items={metaItems} />;\n};\n\nexport default ArticleMeta;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleListFilter.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListFilter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ArticleListFilter.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListFilter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAc/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA8C5D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,YAAY,CA2DnF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Button, Flex, SearchInput, useI18n, defaultThemeProp, ComboBox, StyledSearchInput, Text, Selectable
|
|
4
|
+
import { Button, Flex, SearchInput, useI18n, defaultThemeProp, ComboBox, StyledSearchInput, Text, Selectable } from '@pega/cosmos-react-core';
|
|
5
5
|
import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
|
|
6
6
|
const StyledClearButton = styled(Button)(({ theme }) => {
|
|
7
7
|
return css `
|
|
@@ -47,12 +47,6 @@ const ArticleListFilter = (props) => {
|
|
|
47
47
|
const { searchInput, category, sortBy, onClearClick, articles, quickFilters = [], showResults = false, handleQuickFilterRemove, ...restProps } = props || {};
|
|
48
48
|
const t = useI18n();
|
|
49
49
|
const searchResults = t('results_count', [articles?.length ?? 0]);
|
|
50
|
-
const { announcePolite } = useLiveLog();
|
|
51
|
-
useEffect(() => {
|
|
52
|
-
if (showResults) {
|
|
53
|
-
announcePolite({ message: searchResults });
|
|
54
|
-
}
|
|
55
|
-
}, [articles, showResults]);
|
|
56
50
|
const quickFiltersRef = useRef([]);
|
|
57
51
|
useEffect(() => {
|
|
58
52
|
if (quickFilters.length > 0 && quickFiltersRef.current.length > 0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleListFilter.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,iBAAiB,EACjB,IAAI,EACJ,UAAU,
|
|
1
|
+
{"version":3,"file":"ArticleListFilter.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Flex,\n SearchInput,\n useI18n,\n defaultThemeProp,\n ComboBox,\n StyledSearchInput,\n Text,\n Selectable\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\n\nimport type { ArticleListProps } from './ArticleList.types';\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n return css`\n margin-block-start: calc(4.5 * ${theme.base.spacing});\n `;\n});\nStyledClearButton.defaultProps = defaultThemeProp;\n\nconst StyledFilterContainer = styled(Flex)`\n flex-grow: 1;\n`;\n\nconst StyledSelectable = styled(Selectable)(({ theme }) => {\n return css`\n line-height: calc(2 * ${theme.base.spacing});\n margin: calc(0.25 * ${theme.base.spacing});\n `;\n});\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst StyledSearchFilters = styled.div(({ theme }) => {\n return css`\n width: 100%;\n padding-block-start: ${theme.base.spacing};\n padding-inline: calc(2 * ${theme.base.spacing});\n\n > div:last-child {\n margin: 0;\n }\n\n ${StyledFormContent} {\n gap: ${theme.base.spacing};\n }\n\n ${StyledFilterContainer} > div {\n margin-top: calc(1.5 * ${theme.base.spacing});\n width: 100%;\n }\n ${StyledSearchInput} {\n flex-grow: 1;\n }\n `;\n});\nStyledSearchFilters.defaultProps = defaultThemeProp;\n\nconst ArticleListFilter: FunctionComponent<ArticleListProps['search'] & ForwardProps> = (\n props: ArticleListProps['search']\n) => {\n const {\n searchInput,\n category,\n sortBy,\n onClearClick,\n articles,\n quickFilters = [],\n showResults = false,\n handleQuickFilterRemove,\n ...restProps\n } = props || {};\n const t = useI18n();\n const searchResults = t('results_count', [articles?.length ?? 0]);\n\n const quickFiltersRef = useRef<HTMLButtonElement[]>([]);\n\n useEffect(() => {\n if (quickFilters.length > 0 && quickFiltersRef.current.length > 0) {\n quickFiltersRef.current[quickFilters.length - 1]?.focus();\n }\n }, [articles]);\n\n return (\n <StyledSearchFilters {...restProps}>\n <Flex container={{ alignItems: 'center', gap: 1, pad: [0.5, undefined] }}>\n <SearchInput {...searchInput} />\n </Flex>\n {quickFilters.map(({ id, name }, i) => (\n <StyledSelectable\n id={id}\n ref={(el: HTMLButtonElement) => {\n quickFiltersRef.current[i] = el;\n }}\n onRemove={handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined}\n onClick={handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined}\n >\n {name}\n </StyledSelectable>\n ))}\n <StyledFilterContainer container={{ gap: 1, alignItems: 'start' }}>\n {category && <ComboBox {...category} />}\n {sortBy && <ComboBox {...sortBy} />}\n {onClearClick && (\n <StyledClearButton\n variant='link'\n label={t('clear')}\n aria-label={t('clear_filters')}\n onClick={onClearClick}\n >\n {t('clear')}\n </StyledClearButton>\n )}\n </StyledFilterContainer>\n {showResults && <Text variant='secondary'>{searchResults}</Text>}\n </StyledSearchFilters>\n );\n};\n\nexport default ArticleListFilter;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection,
|
|
2
|
+
import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButtonLink } from '@pega/cosmos-react-core';
|
|
3
3
|
const verticalGapSpacingMultiplier = 1;
|
|
4
4
|
// colWidth reduces by 20% as column count increases
|
|
5
5
|
export const colCountChWidth = {
|
|
@@ -27,15 +27,15 @@ export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
|
|
|
27
27
|
margin-block-end: calc(0.5 * ${spacing});
|
|
28
28
|
margin-block-start: calc(1.5 * ${spacing});
|
|
29
29
|
|
|
30
|
-
${
|
|
30
|
+
${StyledButtonLink} ${StyledIcon} {
|
|
31
31
|
transition: transform ${animation.speed} ${animation.timing.ease};
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
${
|
|
34
|
+
${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {
|
|
35
35
|
transform: rotate(90deg);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
${
|
|
38
|
+
${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {
|
|
39
39
|
transform: rotate(${rtl ? 180 : 0}deg);
|
|
40
40
|
}
|
|
41
41
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledFieldValueList,\n StyledIcon,\n useDirection,\n StyledButton\n} from '@pega/cosmos-react-core';\nimport type {\n StyledFieldValueListProps,\n FontSize,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n /** Whether individual list items all have labels stacks on top */\n stacked?: boolean;\n /** Whether the list is a flex row of other lists */\n flex?: boolean;\n /** Whether the list is nested */\n nested?: boolean;\n /** The character length applied to all list labels */\n labelLength?: number;\n /**\n * Whether the list is wrapped to 1 column\n * @default false\n */\n wrapped?: boolean;\n /**\n * Number of columns in the list\n * @default 1\n */\n columnCount?: 1 | 2 | 3;\n /**\n * Whether to apply narrow list styles\n * @default false\n */\n narrow?: boolean;\n theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n StyledDetailListProps,\n 'wrapped' | 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n '1': {\n containerWidth: 100,\n colWidth: 100\n },\n '2': {\n containerWidth: 80 * 2,\n colWidth: 80\n },\n '3': {\n containerWidth: 64 * 3,\n colWidth: 64\n }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing, animation }\n } = theme;\n const { rtl } = useDirection();\n\n return css`\n width: 100%;\n grid-column-start: 1;\n grid-column-end: -1;\n margin-block-end: calc(0.5 * ${spacing});\n margin-block-start: calc(1.5 * ${spacing});\n\n ${StyledButton} ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n const {\n base: {\n spacing,\n 'content-width': { xl }\n }\n } = theme;\n\n return css`\n max-width: ${xl};\n margin-block: calc(1.5 * ${spacing});\n `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n max-width: ${colCountChWidth[3].containerWidth}ch;\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n ({\n stacked,\n flex,\n nested,\n labelLength,\n variant,\n theme,\n wrapped = false,\n columnCount = 1,\n narrow = false\n }): any => {\n const {\n base: { spacing }\n } = theme;\n\n const isValueComparison = variant === 'value-comparison';\n const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n const columnWidthCh = colCountChWidth[columnCount].colWidth;\n const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n return css`\n /* Top Level Styles */\n ${!nested &&\n css`\n ${StyledFieldValue} {\n word-break: break-word;\n overflow: auto;\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `}\n\n /* Nested List */\n ${nested &&\n css`\n grid-column: 1 / -1;\n `}\n\n /* As Field Grid */\n ${!flex &&\n css`\n display: grid;\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n column-gap: calc(2 * ${spacing});\n row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n ${stacked &&\n css`\n grid-template-columns: minmax(0, 1fr);\n row-gap: 0;\n\n ${!isValueComparison &&\n css`\n > dt,\n ${StyledStackedFieldValue} {\n margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n }\n `}\n `}\n\n > ${StyledStackedFieldValue} {\n max-width: ${containerWidthCh}ch;\n }\n\n > ${StyledFieldValue} {\n max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n\n ${!isValueComparison &&\n css`\n width: 100%;\n `}\n }\n\n ${isValueComparison &&\n css`\n grid-template-columns: auto auto;\n column-gap: 0;\n row-gap: calc(0.5 * ${spacing});\n max-width: ${containerWidthCh}ch;\n\n > dd {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n `}\n\n > ${StyledDetails} {\n grid-column: 1 / -1;\n }\n `}\n\n /* As Flex Container */\n ${flex &&\n css`\n display: flex;\n flex-direction: ${wrapped ? 'column' : 'row'};\n column-gap: calc(${flexGapProp} * ${spacing});\n align-items: flex-start;\n max-width: ${containerWidthCh}ch;\n\n ${!wrapped &&\n css`\n > * {\n width: 100%;\n max-width: ${columnWidthCh}%;\n }\n `}\n\n > ${StyledDetails} {\n width: 100%;\n\n ${wrapped &&\n !stacked &&\n css`\n + ${StyledDetails} > ${StyledDetailList}:first-child {\n margin-block-start: ${theme.base.spacing};\n }\n `}\n }\n `}\n\n /* Key / Group Label Spacing */\n ${stacked &&\n !isValueComparison &&\n css`\n > dt {\n margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n }\n `}\n\n /* Responsive behavior */\n ${narrow &&\n !stacked &&\n !isValueComparison &&\n css`\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);\n `}\n `;\n }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAuCjC,MAAM,4BAA4B,GAAG,CAAC,CAAC;AAEvC,oDAAoD;AACpD,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,GAAG,EAAE;QACH,cAAc,EAAE,GAAG;QACnB,QAAQ,EAAE,GAAG;KACd;IACD,GAAG,EAAE;QACH,cAAc,EAAE,EAAE,GAAG,CAAC;QACtB,QAAQ,EAAE,EAAE;KACb;IACD,GAAG,EAAE;QACH,cAAc,EAAE,EAAE,GAAG,CAAC;QACtB,QAAQ,EAAE,EAAE;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAE/B,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC7B,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;;mCAIuB,OAAO;qCACL,OAAO;;MAEtC,gBAAgB,IAAI,UAAU;8BACN,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;;MAGhE,gBAAgB,0BAA0B,UAAU;;;;MAIpD,gBAAgB,2BAA2B,UAAU;0BACjC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EACP,eAAe,EAAE,EAAE,EAAE,EAAE,EACxB,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;iBACK,EAAE;+BACY,OAAO;GACnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;iBACK,eAAe,CAAC,CAAC,CAAC,CAAC,cAAc;oCACd,OAAO;;;mBAGxB,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACzD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;;;;;uCAOrB,OAAO,CAAC,aAAa,CAAC;qCACxB,OAAO;;GAEzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,2BAA2B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAC1D,CAAC,EACC,OAAO,EACP,IAAI,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,KAAK,EACL,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,CAAC,EACf,MAAM,GAAG,KAAK,EACf,EAAO,EAAE;IACR,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,OAAO,KAAK,kBAAkB,CAAC;IACzD,MAAM,gBAAgB,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC,cAAc,CAAC;IACrE,MAAM,aAAa,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;IAC5D,MAAM,wBAAwB,GAAG,GAAG,gBAAgB,GAAG,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC;IAE9E,OAAO,GAAG,CAAA;;QAEN,CAAC,MAAM;QACT,GAAG,CAAA;UACC,gBAAgB;;;;;UAKhB,uBAAuB;;;OAG1B;;;QAGC,MAAM;QACR,GAAG,CAAA;;OAEF;;;QAGC,CAAC,IAAI;QACP,GAAG,CAAA;;8CAEqC,WAAW;+BAC1B,OAAO;wBACd,4BAA4B,MAAM,OAAO;;UAEvD,OAAO;YACT,GAAG,CAAA;;;;YAIC,CAAC,iBAAiB;gBACpB,GAAG,CAAA;;cAEC,uBAAuB;yCACI,4BAA4B,MAAM,OAAO;;WAEvE;SACF;;YAEG,uBAAuB;uBACZ,gBAAgB;;;YAG3B,gBAAgB;4BACA,wBAAwB,eAAe,OAAO;;YAE9D,CAAC,iBAAiB;YACpB,GAAG,CAAA;;WAEF;;;UAGD,iBAAiB;YACnB,GAAG,CAAA;;;gCAGqB,OAAO;uBAChB,gBAAgB;;;;;;;SAO9B;;YAEG,aAAa;;;OAGlB;;;QAGC,IAAI;QACN,GAAG,CAAA;;0BAEiB,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;2BACzB,WAAW,MAAM,OAAO;;qBAE9B,gBAAgB;;UAE3B,CAAC,OAAO;YACV,GAAG,CAAA;;;yBAGc,aAAa;;SAE7B;;YAEG,aAAa;;;YAGb,OAAO;YACT,CAAC,OAAO;YACR,GAAG,CAAA;gBACG,aAAa,MAAM,gBAAgB;oCACf,KAAK,CAAC,IAAI,CAAC,OAAO;;WAE3C;;OAEJ;;;QAGC,OAAO;QACT,CAAC,iBAAiB;QAClB,GAAG,CAAA;;qCAE4B,4BAA4B,MAAM,OAAO;;OAEvE;;;QAGC,MAAM;QACR,CAAC,OAAO;QACR,CAAC,iBAAiB;QAClB,GAAG,CAAA;8CACqC,WAAW;OAClD;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledFieldValueList,\n StyledIcon,\n useDirection,\n StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n StyledFieldValueListProps,\n FontSize,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n /** Whether individual list items all have labels stacks on top */\n stacked?: boolean;\n /** Whether the list is a flex row of other lists */\n flex?: boolean;\n /** Whether the list is nested */\n nested?: boolean;\n /** The character length applied to all list labels */\n labelLength?: number;\n /**\n * Whether the list is wrapped to 1 column\n * @default false\n */\n wrapped?: boolean;\n /**\n * Number of columns in the list\n * @default 1\n */\n columnCount?: 1 | 2 | 3;\n /**\n * Whether to apply narrow list styles\n * @default false\n */\n narrow?: boolean;\n theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n StyledDetailListProps,\n 'wrapped' | 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n '1': {\n containerWidth: 100,\n colWidth: 100\n },\n '2': {\n containerWidth: 80 * 2,\n colWidth: 80\n },\n '3': {\n containerWidth: 64 * 3,\n colWidth: 64\n }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing, animation }\n } = theme;\n const { rtl } = useDirection();\n\n return css`\n width: 100%;\n grid-column-start: 1;\n grid-column-end: -1;\n margin-block-end: calc(0.5 * ${spacing});\n margin-block-start: calc(1.5 * ${spacing});\n\n ${StyledButtonLink} ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n const {\n base: {\n spacing,\n 'content-width': { xl }\n }\n } = theme;\n\n return css`\n max-width: ${xl};\n margin-block: calc(1.5 * ${spacing});\n `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n max-width: ${colCountChWidth[3].containerWidth}ch;\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n ({\n stacked,\n flex,\n nested,\n labelLength,\n variant,\n theme,\n wrapped = false,\n columnCount = 1,\n narrow = false\n }): any => {\n const {\n base: { spacing }\n } = theme;\n\n const isValueComparison = variant === 'value-comparison';\n const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n const columnWidthCh = colCountChWidth[columnCount].colWidth;\n const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n return css`\n /* Top Level Styles */\n ${!nested &&\n css`\n ${StyledFieldValue} {\n word-break: break-word;\n overflow: auto;\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `}\n\n /* Nested List */\n ${nested &&\n css`\n grid-column: 1 / -1;\n `}\n\n /* As Field Grid */\n ${!flex &&\n css`\n display: grid;\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n column-gap: calc(2 * ${spacing});\n row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n ${stacked &&\n css`\n grid-template-columns: minmax(0, 1fr);\n row-gap: 0;\n\n ${!isValueComparison &&\n css`\n > dt,\n ${StyledStackedFieldValue} {\n margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n }\n `}\n `}\n\n > ${StyledStackedFieldValue} {\n max-width: ${containerWidthCh}ch;\n }\n\n > ${StyledFieldValue} {\n max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n\n ${!isValueComparison &&\n css`\n width: 100%;\n `}\n }\n\n ${isValueComparison &&\n css`\n grid-template-columns: auto auto;\n column-gap: 0;\n row-gap: calc(0.5 * ${spacing});\n max-width: ${containerWidthCh}ch;\n\n > dd {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n `}\n\n > ${StyledDetails} {\n grid-column: 1 / -1;\n }\n `}\n\n /* As Flex Container */\n ${flex &&\n css`\n display: flex;\n flex-direction: ${wrapped ? 'column' : 'row'};\n column-gap: calc(${flexGapProp} * ${spacing});\n align-items: flex-start;\n max-width: ${containerWidthCh}ch;\n\n ${!wrapped &&\n css`\n > * {\n width: 100%;\n max-width: ${columnWidthCh}%;\n }\n `}\n\n > ${StyledDetails} {\n width: 100%;\n\n ${wrapped &&\n !stacked &&\n css`\n + ${StyledDetails} > ${StyledDetailList}:first-child {\n margin-block-start: ${theme.base.spacing};\n }\n `}\n }\n `}\n\n /* Key / Group Label Spacing */\n ${stacked &&\n !isValueComparison &&\n css`\n > dt {\n margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n }\n `}\n\n /* Responsive behavior */\n ${narrow &&\n !stacked &&\n !isValueComparison &&\n css`\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);\n `}\n `;\n }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -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;AAItF,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;AAmBD,eAAO,MAAM,QAAQ;sCAamC,YAAY,KAAK,IAAI;;;CA4D5E,CAAC;;;;
|
|
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;AAItF,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;AAmBD,eAAO,MAAM,QAAQ;sCAamC,YAAY,KAAK,IAAI;;;CA4D5E,CAAC;;;;AAgEF,wBAAyD"}
|
|
@@ -41,6 +41,13 @@ const TaskList = forwardRef(function TaskList({ testId, items, hasFooter = false
|
|
|
41
41
|
const t = useI18n();
|
|
42
42
|
const { announcePolite } = useLiveLog();
|
|
43
43
|
const announcements = useRef([]);
|
|
44
|
+
const mounted = useRef(false);
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
mounted.current = true;
|
|
47
|
+
return () => {
|
|
48
|
+
mounted.current = false;
|
|
49
|
+
};
|
|
50
|
+
}, []);
|
|
44
51
|
const debouncedAnnounce = debounce(() => {
|
|
45
52
|
if (announcements.current.length > 0) {
|
|
46
53
|
let tasksAdded = 0;
|
|
@@ -57,7 +64,9 @@ const TaskList = forwardRef(function TaskList({ testId, items, hasFooter = false
|
|
|
57
64
|
if (tasksRemoved) {
|
|
58
65
|
message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });
|
|
59
66
|
}
|
|
60
|
-
|
|
67
|
+
if (mounted.current) {
|
|
68
|
+
announcePolite({ message });
|
|
69
|
+
}
|
|
61
70
|
announcements.current = [];
|
|
62
71
|
}
|
|
63
72
|
}, 2000);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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
|
|
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 { FunctionComponent, PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp,\n Button,\n useI18n,\n VisuallyHiddenText,\n Breadcrumbs,\n StyledBreadcrumbs,\n StyledText,\n useTestIds,\n useLiveLog,\n debounce,\n Actions,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, TestIdProp, ActionsProps } from '@pega/cosmos-react-core';\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 ${hasFooter &&\n css`\n > li:last-child {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `}\n\n ${StyledBreadcrumbs} > ${StyledText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\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 <SummaryItem\n visual={avatar}\n primary={\n processName ? (\n <Breadcrumbs\n path={[\n { id: 'processName', primary: processName },\n { id: 'name', primary: name }\n ]}\n />\n ) : (\n name\n )\n }\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: 1 }}\n item={{ grow: 1 }}\n as={StyledSummaryListItem}\n forwardedAs='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, i) => (\n <TaskItem {...item} addAnnouncement={addAnnouncement} key={`${i + 1}`} />\n ))}\n </Flex>\n );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "5.0.0-dev.
|
|
3
|
+
"version": "5.0.0-dev.9.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
|
-
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
6
|
+
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
7
7
|
"directory": "packages/cosmos-work"
|
|
8
8
|
},
|
|
9
9
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "5.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "5.0.0-dev.9.0",
|
|
24
24
|
"@types/react": "^17.0.62",
|
|
25
25
|
"@types/react-dom": "^17.0.20",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|
|
@@ -30,12 +30,8 @@
|
|
|
30
30
|
"styled-components": "^5.2.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@storybook/addon-a11y": "~7.5.3",
|
|
34
33
|
"@storybook/addon-actions": "~7.5.3",
|
|
35
|
-
"@storybook/addon-storysource": "~7.5.3",
|
|
36
|
-
"@storybook/addon-toolbars": "~7.5.3",
|
|
37
34
|
"@storybook/react": "~7.5.3",
|
|
38
|
-
"@storybook/theming": "~7.5.3",
|
|
39
35
|
"@testing-library/react": "^12.1.3",
|
|
40
36
|
"@testing-library/user-event": "^13.5.0",
|
|
41
37
|
"@types/dompurify": "^3.0.2",
|