@pega/cosmos-react-work 7.0.0-build.33.2 → 7.0.0-build.33.3
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/ArticleList/AIArticleSummary.d.ts +1 -0
- package/lib/components/ArticleList/AIArticleSummary.d.ts.map +1 -1
- package/lib/components/ArticleList/AIArticleSummary.js +9 -2
- package/lib/components/ArticleList/AIArticleSummary.js.map +1 -1
- package/lib/components/ArticleList/ArticleList.types.d.ts +3 -2
- package/lib/components/ArticleList/ArticleList.types.d.ts.map +1 -1
- package/lib/components/ArticleList/ArticleList.types.js.map +1 -1
- package/lib/components/ArticleList/ArticleListFilter.d.ts.map +1 -1
- package/lib/components/ArticleList/ArticleListFilter.js +9 -3
- package/lib/components/ArticleList/ArticleListFilter.js.map +1 -1
- package/lib/components/ArticleList/ArticleTag.d.ts.map +1 -1
- package/lib/components/ArticleList/ArticleTag.js +39 -8
- package/lib/components/ArticleList/ArticleTag.js.map +1 -1
- package/lib/components/HierarchicalAssignments/AssignmentDetail.d.ts +5 -0
- package/lib/components/HierarchicalAssignments/AssignmentDetail.d.ts.map +1 -0
- package/lib/components/HierarchicalAssignments/AssignmentDetail.js +10 -0
- package/lib/components/HierarchicalAssignments/AssignmentDetail.js.map +1 -0
- package/lib/components/HierarchicalAssignments/AssignmentItem.d.ts.map +1 -1
- package/lib/components/HierarchicalAssignments/AssignmentItem.js +3 -5
- package/lib/components/HierarchicalAssignments/AssignmentItem.js.map +1 -1
- package/lib/components/HierarchicalAssignments/Assignments.styles.d.ts +1 -0
- package/lib/components/HierarchicalAssignments/Assignments.styles.d.ts.map +1 -1
- package/lib/components/HierarchicalAssignments/Assignments.styles.js +13 -13
- package/lib/components/HierarchicalAssignments/Assignments.styles.js.map +1 -1
- package/lib/components/Tasks/TaskList.d.ts.map +1 -1
- package/lib/components/Tasks/TaskList.js +17 -9
- package/lib/components/Tasks/TaskList.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { AIArticleSummaryProps } from './ArticleList.types';
|
|
3
|
+
export declare const StyledAbstract: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
3
4
|
declare const _default: import("react").ForwardRefExoticComponent<Omit<AIArticleSummaryProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
|
|
4
5
|
export default _default;
|
|
5
6
|
//# sourceMappingURL=AIArticleSummary.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AIArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/AIArticleSummary.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"AIArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/AIArticleSummary.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AA4BjE,eAAO,MAAM,cAAc,mOAIzB,CAAC;;AAIH,wBAoDG"}
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { CardContent, Text, NumberDisplay, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
|
+
import { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';
|
|
5
6
|
import { ArticleCard } from './ArticleSummary.styles';
|
|
6
7
|
import ArticleSummaryHeader from './ArticleSummaryHeader';
|
|
7
8
|
import ArticleTag from './ArticleTag';
|
|
@@ -24,9 +25,15 @@ const StyledAiArticleCard = styled(ArticleCard)(({ theme, semanticSearch }) => {
|
|
|
24
25
|
`;
|
|
25
26
|
});
|
|
26
27
|
StyledAiArticleCard.defaultProps = defaultThemeProp;
|
|
27
|
-
export
|
|
28
|
+
export const StyledAbstract = styled(Text)(() => {
|
|
29
|
+
return css `
|
|
30
|
+
${lineClamp(3)};
|
|
31
|
+
`;
|
|
32
|
+
});
|
|
33
|
+
StyledAbstract.defaultProps = defaultThemeProp;
|
|
34
|
+
export default forwardRef(function AIArticleSummary({ articleId, title, href, abstract, onTitleClick, actions, score, semanticSearch = false, quickFilters, onQuickFilterClick, ...restProps }, ref) {
|
|
28
35
|
const t = useI18n();
|
|
29
|
-
return (_jsxs(StyledAiArticleCard, { ...restProps, as: 'li', ref: ref, semanticSearch: semanticSearch, children: [_jsx(ArticleSummaryHeader, { articleId: articleId, title: title, actions: actions, onTitleClick: onTitleClick, href: href }), ((score !== undefined && score > 0) || (quickFilters && quickFilters.length > 0)) && (_jsxs(CardContent, { children: [score !== undefined && score > 0 && (_jsx(Text, { variant: 'secondary', children: t(semanticSearch ? 'relevance_score' : 'score', [
|
|
36
|
+
return (_jsxs(StyledAiArticleCard, { ...restProps, as: 'li', ref: ref, semanticSearch: semanticSearch, children: [_jsx(ArticleSummaryHeader, { articleId: articleId, title: title, actions: actions, onTitleClick: onTitleClick, href: href }), ((score !== undefined && score > 0) || (quickFilters && quickFilters.length > 0)) && (_jsxs(CardContent, { children: [abstract && _jsx(StyledAbstract, { children: abstract }), score !== undefined && score > 0 && (_jsx(Text, { variant: 'secondary', children: t(semanticSearch ? 'relevance_score' : 'score', [
|
|
30
37
|
_jsx(NumberDisplay, { value: score, unit: 'percent', formattingOptions: { fractionDigits: 0 } })
|
|
31
38
|
]) })), quickFilters && quickFilters.length > 0 && (_jsx(ArticleTag, { quickFilters: quickFilters, onQuickFilterClick: onQuickFilterClick }))] }))] }));
|
|
32
39
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AIArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/AIArticleSummary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,WAAW,EACX,IAAI,EAEJ,aAAa,EACb,OAAO,EACP,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"AIArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/AIArticleSummary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,WAAW,EACX,IAAI,EAEJ,aAAa,EACb,OAAO,EACP,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,CAAC,CAE5C,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/B,OAAO,GAAG,CAAA;;2BAEe,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEvC,cAAc;QACd,CAAC,CAAC,GAAG,CAAA;;;;SAIF;QACH,CAAC,CAAC,GAAG,CAAA;;;;SAIF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE;IAC9C,OAAO,GAAG,CAAA;MACN,SAAS,CAAC,CAAC,CAAC;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,UAAU,CAGvB,SAAS,gBAAgB,CACzB,EACE,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAc,GAAG,KAAK,EACtB,YAAY,EACZ,kBAAkB,EAClB,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,mBAAmB,OAAK,SAAS,EAAE,EAAE,EAAC,IAAI,EAAC,GAAG,EAAE,GAAG,EAAE,cAAc,EAAE,cAAc,aAClF,KAAC,oBAAoB,IACnB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,GACV,EACD,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CACpF,MAAC,WAAW,eACT,QAAQ,IAAI,KAAC,cAAc,cAAE,QAAQ,GAAkB,EACvD,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,CAAC,IAAI,CACnC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YACtB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,EAAE;4BAC/C,KAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,SAAS,EACd,iBAAiB,EAAE,EAAE,cAAc,EAAE,CAAC,EAAE,GACxC;yBACH,CAAC,GACG,CACR,EAEA,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1C,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,GAAI,CACnF,IACW,CACf,IACmB,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { PropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n CardContent,\n Text,\n type RefElement,\n NumberDisplay,\n useI18n,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nimport type { AIArticleSummaryProps } from './ArticleList.types';\nimport { ArticleCard } from './ArticleSummary.styles';\nimport ArticleSummaryHeader from './ArticleSummaryHeader';\nimport ArticleTag from './ArticleTag';\n\nconst StyledAiArticleCard = styled(ArticleCard)<{\n semanticSearch: AIArticleSummaryProps['semanticSearch'];\n}>(({ theme, semanticSearch }) => {\n return css`\n &:last-child {\n padding-block-end: ${theme.base.spacing};\n }\n ${semanticSearch\n ? css`\n &&&&:last-child {\n border-block-end: none;\n }\n `\n : css`\n &:not(:last-child) {\n border-block-end: none;\n }\n `}\n `;\n});\n\nStyledAiArticleCard.defaultProps = defaultThemeProp;\n\nexport const StyledAbstract = styled(Text)(() => {\n return css`\n ${lineClamp(3)};\n `;\n});\n\nStyledAbstract.defaultProps = defaultThemeProp;\n\nexport default forwardRef<\n RefElement<AIArticleSummaryProps>,\n PropsWithoutRef<AIArticleSummaryProps>\n>(function AIArticleSummary(\n {\n articleId,\n title,\n href,\n abstract,\n onTitleClick,\n actions,\n score,\n semanticSearch = false,\n quickFilters,\n onQuickFilterClick,\n ...restProps\n },\n ref\n) {\n const t = useI18n();\n\n return (\n <StyledAiArticleCard {...restProps} as='li' ref={ref} semanticSearch={semanticSearch}>\n <ArticleSummaryHeader\n articleId={articleId}\n title={title}\n actions={actions}\n onTitleClick={onTitleClick}\n href={href}\n />\n {((score !== undefined && score > 0) || (quickFilters && quickFilters.length > 0)) && (\n <CardContent>\n {abstract && <StyledAbstract>{abstract}</StyledAbstract>}\n {score !== undefined && score > 0 && (\n <Text variant='secondary'>\n {t(semanticSearch ? 'relevance_score' : 'score', [\n <NumberDisplay\n value={score}\n unit='percent'\n formattingOptions={{ fractionDigits: 0 }}\n />\n ])}\n </Text>\n )}\n\n {quickFilters && quickFilters.length > 0 && (\n <ArticleTag quickFilters={quickFilters} onQuickFilterClick={onQuickFilterClick} />\n )}\n </CardContent>\n )}\n </StyledAiArticleCard>\n );\n});\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { MouseEvent, MouseEventHandler, ReactNode, KeyboardEvent } from 'react';
|
|
2
|
-
import type { Action, AdditionalInfoProps, BaseProps, ComboBoxProps, MenuButtonProps, NoChildrenProp, NumberDisplayProps, OmitStrict, RequireAtLeastOne, SearchInputProps, TextAreaProps, WithAttributes } from '@pega/cosmos-react-core';
|
|
2
|
+
import type { Action, AdditionalInfoProps, BaseProps, ComboBoxProps, MenuButtonProps, MenuProps, NoChildrenProp, NumberDisplayProps, OmitStrict, RequireAtLeastOne, SearchInputProps, TextAreaProps, WithAttributes } from '@pega/cosmos-react-core';
|
|
3
3
|
import type { SearchFilter } from '@pega/cosmos-react-core/lib/components/SearchInput/SearchInput';
|
|
4
4
|
import type { ArticleRatingProps } from '../Article/ArticleRating';
|
|
5
5
|
import type { ArticleMetaProps } from '../Article/ArticleMeta';
|
|
@@ -35,6 +35,7 @@ export type AIArticleSummaryProps = WithAttributes<'li', NoChildrenProp & {
|
|
|
35
35
|
* @default false
|
|
36
36
|
*/
|
|
37
37
|
semanticSearch: boolean;
|
|
38
|
+
abstract?: ArticleSummaryProps['abstract'];
|
|
38
39
|
} & Pick<ArticleSummaryProps, 'articleId' | 'href' | 'title' | 'onTitleClick' | 'actions' | 'quickFilters' | 'onQuickFilterClick'>>;
|
|
39
40
|
export type SearchArticle = AIArticleSummaryProps | ArticleSummaryProps;
|
|
40
41
|
export interface BaseReferenceProps {
|
|
@@ -165,7 +166,7 @@ export interface ArticleListHeaderProps {
|
|
|
165
166
|
actions?: Action[];
|
|
166
167
|
}
|
|
167
168
|
export type SemanticSearchArticles = OmitStrict<Articles, 'articles'> & {
|
|
168
|
-
semanticFilter?:
|
|
169
|
+
semanticFilter?: MenuProps;
|
|
169
170
|
} & ArticleSemanticSearchProps;
|
|
170
171
|
type SuggestedArticles = Pick<Articles, 'count' | 'activeArticle'> & {
|
|
171
172
|
articles: ArticleSummaryProps[] | BuddySuggestedArticlesProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleList.types.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EACV,MAAM,EACN,mBAAmB,EACnB,SAAS,EACT,aAAa,EACb,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAEnG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChG,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,UAAU,CAAC,kBAAkB,EAAE,YAAY,CAAC,GAAG;QACxD,UAAU,EAAE,CACV,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAC3C,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,KACrC,IAAI,CAAC;KACX,CAAC;IACF,wCAAwC;IACxC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;CAC7D;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,IAAI,EACJ,cAAc,GAAG;IACf,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ArticleList.types.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleList.types.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"AAiLA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAoB,EAAkC,EAAE;IACrF,OAAO,SAAS,CAAC,IAAI,KAAK,MAAM,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,SAAoB,EAAqC,EAAE;IAC3F,OAAO,SAAS,CAAC,IAAI,KAAK,QAAQ,CAAC;AACrC,CAAC,CAAC;AAiJF,MAAM,UAAU,eAAe,CAC7B,IAAiD;IAEjD,OAAO,UAAU,IAAI,IAAI,CAAC;AAC5B,CAAC;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,SAA0D,EACpB,EAAE;IACxC,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,IAAI,IAAI,CAAC,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,GAAkD,EACnB,EAAE;IACjC,OAAQ,GAA8B,EAAE,cAAc,CAAC;AACzD,CAAC,CAAC","sourcesContent":["import type { MouseEvent, MouseEventHandler, ReactNode, KeyboardEvent } from 'react';\n\nimport type {\n Action,\n AdditionalInfoProps,\n BaseProps,\n ComboBoxProps,\n MenuButtonProps,\n NoChildrenProp,\n NumberDisplayProps,\n OmitStrict,\n RequireAtLeastOne,\n SearchInputProps,\n TextAreaProps,\n WithAttributes\n} from '@pega/cosmos-react-core';\nimport type { SearchFilter } from '@pega/cosmos-react-core/lib/components/SearchInput/SearchInput';\n\nimport type { ArticleRatingProps } from '../Article/ArticleRating';\nimport type { ArticleMetaProps } from '../Article/ArticleMeta';\nimport type { ArticleProps } from '../Article/Article';\n\nexport interface ArticleSummaryProps extends BaseProps {\n /** Unique id of article */\n articleId: string;\n /** URL or DOM id to navigate to. This will render the nav item as a link. */\n href?: string;\n /** Article title */\n title: string;\n /** Article content */\n abstract: string;\n /** Callback fired when article title is clicked */\n onTitleClick?: (id?: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /** Primary actions which needs to be displayed with an icon */\n actions?: Action[];\n /** A list of elements to be rendered within a MetaList. */\n meta?: ArticleMetaProps;\n /** Rating - likes and dislikes of the article. */\n feedback?: OmitStrict<ArticleRatingProps, 'onReaction'> & {\n onReaction: (\n articleId: ArticleSummaryProps['articleId'],\n reaction: ArticleRatingProps['reaction']\n ) => void;\n };\n /** Quick filters to filter articles. */\n quickFilters?: QuickFilter[];\n /** callback fired when quick filter is clicked */\n onQuickFilterClick?: ArticleListProps['onQuickFilterClick'];\n}\n\nexport type AIArticleSummaryProps = WithAttributes<\n 'li',\n NoChildrenProp & {\n score?: NumberDisplayProps['value'];\n /**\n * Indicates whether semantic search functionality to be used.\n * @default false\n */\n semanticSearch: boolean;\n } & Pick<\n ArticleSummaryProps,\n | 'articleId'\n | 'href'\n | 'title'\n | 'onTitleClick'\n | 'actions'\n | 'quickFilters'\n | 'onQuickFilterClick'\n >\n>;\n\nexport type SearchArticle = AIArticleSummaryProps | ArticleSummaryProps;\n\nexport interface BaseReferenceProps {\n id: string;\n name: string;\n confidence?: number;\n}\n\nexport type ExternalLinkProps = BaseReferenceProps & { type: 'link'; href: string };\n\nexport type InternalArticleProps = BaseReferenceProps & {\n type: 'object';\n onClick: (id: BaseReferenceProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n};\n\ntype Reference = ExternalLinkProps | InternalArticleProps;\n\n/** Handles reaction */\nexport type Reaction = 'liked' | 'disliked' | undefined;\n\nexport type ArticleFeedbackProps = WithAttributes<\n 'div',\n NoChildrenProp & {\n /** Question to be displayed */\n question: string;\n /** Handles reaction */\n reaction: Reaction;\n /** Callback to handle reaction */\n onReaction: (reaction: Reaction) => void;\n /** Handles comment section */\n comment?: Required<Pick<TextAreaProps, 'value' | 'placeholder' | 'onChange' | 'labelHidden'>>;\n /** Callback on the click of submit */\n onSubmit?: (\n feedback: { reaction: Reaction; comment: string },\n e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLTextAreaElement>\n ) => void;\n /**\n * Sets the visibility of acknowledgement text\n * @default false\n */\n showThankYouMessage?: boolean;\n }\n>;\n\nexport interface BuddyResponseProps {\n /** title of the search content */\n title?: string;\n /** Main body of search content */\n content?: ReactNode;\n /** Action for share and copy */\n actions?: Action[];\n /** References with confidence level */\n references?: Reference[];\n /** Disclaimer for the genAI response */\n disclaimer?: string;\n /** back button from the response */\n backNavigation?: ArticleProps['backNavigation'];\n /**\n * error state\n * @default false\n */\n error?: boolean;\n /** Feedback for buddy response */\n feedback?: ArticleFeedbackProps;\n}\n\nexport interface AutoAnsweredItem {\n id: string;\n query: string;\n onTitleClick: (id: string) => void;\n actions?: Action[];\n abstract: string;\n}\n\nexport interface DetectedItem extends OmitStrict<AutoAnsweredItem, 'abstract'> {\n confidence?: number;\n}\n\nexport type BuddySuggestedArticlesProps = WithAttributes<\n 'div',\n NoChildrenProp & {\n autoAnswered?: AutoAnsweredItem[];\n detected?: DetectedItem[];\n pastQuestions?: string[];\n notRelevantQuestions?: string[];\n showMore?: boolean;\n onShowMoreToggle?: () => void;\n }\n>;\n\nexport interface ArticleBuddyProps {\n query: Required<Pick<TextAreaProps, 'label' | 'value' | 'placeholder' | 'onChange'>> &\n Pick<TextAreaProps, 'labelHidden'>;\n buddyOptions?: {\n list: MenuButtonProps;\n buddyInfo?: {\n title: AdditionalInfoProps['heading'];\n description: AdditionalInfoProps['children'];\n };\n };\n onSubmit: () => void;\n onClear: () => void;\n loading?: boolean;\n response?: BuddyResponseProps;\n}\n\nexport const isExternalLink = (reference: Reference): reference is ExternalLinkProps => {\n return reference.type === 'link';\n};\n\nexport const isInternalArticle = (reference: Reference): reference is InternalArticleProps => {\n return reference.type === 'object';\n};\n\nexport interface Articles {\n /** List of articles */\n articles: ArticleSummaryProps[];\n /** count of articles */\n count?: number;\n /** Active article if one is open/selected */\n activeArticle?: ArticleProps | BuddyResponseProps;\n /** Props related to the Search Input. */\n searchInput: OmitStrict<\n SearchInputProps,\n 'searchResults' | 'recentSearches' | 'advancedSearchLink' | 'resultsPopover'\n > & {\n searchFilter?: MenuButtonProps;\n filterInfo?: {\n title: AdditionalInfoProps['heading'];\n description: AdditionalInfoProps['children'];\n };\n } & SearchFilter;\n /** Props related to the Category Input. */\n category?: OmitStrict<\n ComboBoxProps,\n | 'id'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'status'\n | 'info'\n | 'actions'\n | 'additionalInfo'\n >;\n\n /** Props related to the SortBy Input. */\n sortBy?: OmitStrict<\n ComboBoxProps,\n | 'id'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'status'\n | 'info'\n | 'mode'\n | 'actions'\n | 'additionalInfo'\n | 'onChange'\n | 'value'\n >;\n /** Callback fired when clear button is clicked */\n onClearClick?: MouseEventHandler<HTMLButtonElement>;\n /** Quick filters to filter articles */\n quickFilters?: QuickFilter[];\n /** Callback fired when applied quick filter is removed */\n handleQuickFilterRemove?: (id: string) => void;\n /** Prop to enable show / hide results */\n showResults?: boolean;\n}\n\nexport interface ArticleListHeaderProps {\n /** Title of article list */\n title: string;\n /** Article list header icon */\n icon?: string;\n /** Actions which needs to be displayed with an icon */\n actions?: Action[];\n}\n\nexport type SemanticSearchArticles = OmitStrict<Articles, 'articles'> & {\n semanticFilter?: MenuButtonProps;\n} & ArticleSemanticSearchProps;\n\ntype SuggestedArticles = Pick<Articles, 'count' | 'activeArticle'> & {\n articles: ArticleSummaryProps[] | BuddySuggestedArticlesProps;\n aiSuggestedArticles?: AIArticleSummaryProps[];\n};\n\nexport type ArticleListProps = RequireAtLeastOne<\n {\n /** Props related to article list header */\n header?: ArticleListHeaderProps;\n /** Data of suggested articles */\n suggested?: SuggestedArticles;\n /** Data of followed articles */\n followed?: Articles;\n /** Data of search articles */\n search?: Articles | SemanticSearchArticles;\n buddy?: {\n title: string;\n content: ArticleBuddyProps;\n };\n /** current active tab whose list has to be rendered */\n activeTab: string;\n /** Callback fired when tab is clicked */\n onTabClick?: (name: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /**\n * Optionally renders an indeterminate progress indicator while articles are being fetched.\n * @default false\n */\n loading?: boolean;\n /**\n * Optionally renders an indeterminate progress indicator while progressively fetching articles\n * @default false\n */\n loadingMore?: boolean;\n /** callback fired when quick filter is clicked */\n onQuickFilterClick?: (\n quickFilterParam: QuickFilter,\n event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => void;\n /** Callback to fetch more rows */\n onLoadMore?: () => void;\n },\n 'suggested' | 'followed' | 'search' | 'buddy'\n>;\n\nexport interface QuickFilter {\n /** Unique id of quick Filter */\n id: string;\n /** Name of quick Filter */\n name: string;\n}\n\nexport type ArticleSemanticSearchProps = WithAttributes<\n 'div',\n NoChildrenProp & {\n semanticSearch: boolean;\n /** list of semantic articles */\n articles?: AIArticleSummaryProps[];\n /** Handles feedback section */\n feedback?: ArticleFeedbackProps;\n /**\n * Handles error\n * @default false\n */\n error?: boolean;\n /**\n * Sets the initial message\n * @default false\n */\n initialMessage?: boolean;\n }\n>;\n\nexport function isSearchArticle(\n item: AIArticleSummaryProps | ArticleSummaryProps\n): item is ArticleSummaryProps {\n return 'abstract' in item;\n}\n\nexport const isSemanticSearchArticle = (\n fileItems: (AIArticleSummaryProps | ArticleSummaryProps)[]\n): fileItems is AIArticleSummaryProps[] => {\n return fileItems.every(item => 'semanticSearch' in item);\n};\n\nexport const isSemanticSearch = (\n obj: Articles | SemanticSearchArticles | undefined\n): obj is SemanticSearchArticles => {\n return (obj as SemanticSearchArticles)?.semanticSearch;\n};\n\nexport type ArticleListTabId = 'Suggested' | 'Followed' | 'Search' | 'Buddy';\n"]}
|
|
1
|
+
{"version":3,"file":"ArticleList.types.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"AAmLA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAoB,EAAkC,EAAE;IACrF,OAAO,SAAS,CAAC,IAAI,KAAK,MAAM,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,SAAoB,EAAqC,EAAE;IAC3F,OAAO,SAAS,CAAC,IAAI,KAAK,QAAQ,CAAC;AACrC,CAAC,CAAC;AAiJF,MAAM,UAAU,eAAe,CAC7B,IAAiD;IAEjD,OAAO,UAAU,IAAI,IAAI,CAAC;AAC5B,CAAC;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,SAA0D,EACpB,EAAE;IACxC,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,IAAI,IAAI,CAAC,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,GAAkD,EACnB,EAAE;IACjC,OAAQ,GAA8B,EAAE,cAAc,CAAC;AACzD,CAAC,CAAC","sourcesContent":["import type { MouseEvent, MouseEventHandler, ReactNode, KeyboardEvent } from 'react';\n\nimport type {\n Action,\n AdditionalInfoProps,\n BaseProps,\n ComboBoxProps,\n MenuButtonProps,\n MenuProps,\n NoChildrenProp,\n NumberDisplayProps,\n OmitStrict,\n RequireAtLeastOne,\n SearchInputProps,\n TextAreaProps,\n WithAttributes\n} from '@pega/cosmos-react-core';\nimport type { SearchFilter } from '@pega/cosmos-react-core/lib/components/SearchInput/SearchInput';\n\nimport type { ArticleRatingProps } from '../Article/ArticleRating';\nimport type { ArticleMetaProps } from '../Article/ArticleMeta';\nimport type { ArticleProps } from '../Article/Article';\n\nexport interface ArticleSummaryProps extends BaseProps {\n /** Unique id of article */\n articleId: string;\n /** URL or DOM id to navigate to. This will render the nav item as a link. */\n href?: string;\n /** Article title */\n title: string;\n /** Article content */\n abstract: string;\n /** Callback fired when article title is clicked */\n onTitleClick?: (id?: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /** Primary actions which needs to be displayed with an icon */\n actions?: Action[];\n /** A list of elements to be rendered within a MetaList. */\n meta?: ArticleMetaProps;\n /** Rating - likes and dislikes of the article. */\n feedback?: OmitStrict<ArticleRatingProps, 'onReaction'> & {\n onReaction: (\n articleId: ArticleSummaryProps['articleId'],\n reaction: ArticleRatingProps['reaction']\n ) => void;\n };\n /** Quick filters to filter articles. */\n quickFilters?: QuickFilter[];\n /** callback fired when quick filter is clicked */\n onQuickFilterClick?: ArticleListProps['onQuickFilterClick'];\n}\n\nexport type AIArticleSummaryProps = WithAttributes<\n 'li',\n NoChildrenProp & {\n score?: NumberDisplayProps['value'];\n /**\n * Indicates whether semantic search functionality to be used.\n * @default false\n */\n semanticSearch: boolean;\n abstract?: ArticleSummaryProps['abstract'];\n } & Pick<\n ArticleSummaryProps,\n | 'articleId'\n | 'href'\n | 'title'\n | 'onTitleClick'\n | 'actions'\n | 'quickFilters'\n | 'onQuickFilterClick'\n >\n>;\n\nexport type SearchArticle = AIArticleSummaryProps | ArticleSummaryProps;\n\nexport interface BaseReferenceProps {\n id: string;\n name: string;\n confidence?: number;\n}\n\nexport type ExternalLinkProps = BaseReferenceProps & { type: 'link'; href: string };\n\nexport type InternalArticleProps = BaseReferenceProps & {\n type: 'object';\n onClick: (id: BaseReferenceProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n};\n\ntype Reference = ExternalLinkProps | InternalArticleProps;\n\n/** Handles reaction */\nexport type Reaction = 'liked' | 'disliked' | undefined;\n\nexport type ArticleFeedbackProps = WithAttributes<\n 'div',\n NoChildrenProp & {\n /** Question to be displayed */\n question: string;\n /** Handles reaction */\n reaction: Reaction;\n /** Callback to handle reaction */\n onReaction: (reaction: Reaction) => void;\n /** Handles comment section */\n comment?: Required<Pick<TextAreaProps, 'value' | 'placeholder' | 'onChange' | 'labelHidden'>>;\n /** Callback on the click of submit */\n onSubmit?: (\n feedback: { reaction: Reaction; comment: string },\n e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLTextAreaElement>\n ) => void;\n /**\n * Sets the visibility of acknowledgement text\n * @default false\n */\n showThankYouMessage?: boolean;\n }\n>;\n\nexport interface BuddyResponseProps {\n /** title of the search content */\n title?: string;\n /** Main body of search content */\n content?: ReactNode;\n /** Action for share and copy */\n actions?: Action[];\n /** References with confidence level */\n references?: Reference[];\n /** Disclaimer for the genAI response */\n disclaimer?: string;\n /** back button from the response */\n backNavigation?: ArticleProps['backNavigation'];\n /**\n * error state\n * @default false\n */\n error?: boolean;\n /** Feedback for buddy response */\n feedback?: ArticleFeedbackProps;\n}\n\nexport interface AutoAnsweredItem {\n id: string;\n query: string;\n onTitleClick: (id: string) => void;\n actions?: Action[];\n abstract: string;\n}\n\nexport interface DetectedItem extends OmitStrict<AutoAnsweredItem, 'abstract'> {\n confidence?: number;\n}\n\nexport type BuddySuggestedArticlesProps = WithAttributes<\n 'div',\n NoChildrenProp & {\n autoAnswered?: AutoAnsweredItem[];\n detected?: DetectedItem[];\n pastQuestions?: string[];\n notRelevantQuestions?: string[];\n showMore?: boolean;\n onShowMoreToggle?: () => void;\n }\n>;\n\nexport interface ArticleBuddyProps {\n query: Required<Pick<TextAreaProps, 'label' | 'value' | 'placeholder' | 'onChange'>> &\n Pick<TextAreaProps, 'labelHidden'>;\n buddyOptions?: {\n list: MenuButtonProps;\n buddyInfo?: {\n title: AdditionalInfoProps['heading'];\n description: AdditionalInfoProps['children'];\n };\n };\n onSubmit: () => void;\n onClear: () => void;\n loading?: boolean;\n response?: BuddyResponseProps;\n}\n\nexport const isExternalLink = (reference: Reference): reference is ExternalLinkProps => {\n return reference.type === 'link';\n};\n\nexport const isInternalArticle = (reference: Reference): reference is InternalArticleProps => {\n return reference.type === 'object';\n};\n\nexport interface Articles {\n /** List of articles */\n articles: ArticleSummaryProps[];\n /** count of articles */\n count?: number;\n /** Active article if one is open/selected */\n activeArticle?: ArticleProps | BuddyResponseProps;\n /** Props related to the Search Input. */\n searchInput: OmitStrict<\n SearchInputProps,\n 'searchResults' | 'recentSearches' | 'advancedSearchLink' | 'resultsPopover'\n > & {\n searchFilter?: MenuButtonProps;\n filterInfo?: {\n title: AdditionalInfoProps['heading'];\n description: AdditionalInfoProps['children'];\n };\n } & SearchFilter;\n /** Props related to the Category Input. */\n category?: OmitStrict<\n ComboBoxProps,\n | 'id'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'status'\n | 'info'\n | 'actions'\n | 'additionalInfo'\n >;\n\n /** Props related to the SortBy Input. */\n sortBy?: OmitStrict<\n ComboBoxProps,\n | 'id'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'status'\n | 'info'\n | 'mode'\n | 'actions'\n | 'additionalInfo'\n | 'onChange'\n | 'value'\n >;\n /** Callback fired when clear button is clicked */\n onClearClick?: MouseEventHandler<HTMLButtonElement>;\n /** Quick filters to filter articles */\n quickFilters?: QuickFilter[];\n /** Callback fired when applied quick filter is removed */\n handleQuickFilterRemove?: (id: string) => void;\n /** Prop to enable show / hide results */\n showResults?: boolean;\n}\n\nexport interface ArticleListHeaderProps {\n /** Title of article list */\n title: string;\n /** Article list header icon */\n icon?: string;\n /** Actions which needs to be displayed with an icon */\n actions?: Action[];\n}\n\nexport type SemanticSearchArticles = OmitStrict<Articles, 'articles'> & {\n semanticFilter?: MenuProps;\n} & ArticleSemanticSearchProps;\n\ntype SuggestedArticles = Pick<Articles, 'count' | 'activeArticle'> & {\n articles: ArticleSummaryProps[] | BuddySuggestedArticlesProps;\n aiSuggestedArticles?: AIArticleSummaryProps[];\n};\n\nexport type ArticleListProps = RequireAtLeastOne<\n {\n /** Props related to article list header */\n header?: ArticleListHeaderProps;\n /** Data of suggested articles */\n suggested?: SuggestedArticles;\n /** Data of followed articles */\n followed?: Articles;\n /** Data of search articles */\n search?: Articles | SemanticSearchArticles;\n buddy?: {\n title: string;\n content: ArticleBuddyProps;\n };\n /** current active tab whose list has to be rendered */\n activeTab: string;\n /** Callback fired when tab is clicked */\n onTabClick?: (name: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /**\n * Optionally renders an indeterminate progress indicator while articles are being fetched.\n * @default false\n */\n loading?: boolean;\n /**\n * Optionally renders an indeterminate progress indicator while progressively fetching articles\n * @default false\n */\n loadingMore?: boolean;\n /** callback fired when quick filter is clicked */\n onQuickFilterClick?: (\n quickFilterParam: QuickFilter,\n event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => void;\n /** Callback to fetch more rows */\n onLoadMore?: () => void;\n },\n 'suggested' | 'followed' | 'search' | 'buddy'\n>;\n\nexport interface QuickFilter {\n /** Unique id of quick Filter */\n id: string;\n /** Name of quick Filter */\n name: string;\n}\n\nexport type ArticleSemanticSearchProps = WithAttributes<\n 'div',\n NoChildrenProp & {\n semanticSearch: boolean;\n /** list of semantic articles */\n articles?: AIArticleSummaryProps[];\n /** Handles feedback section */\n feedback?: ArticleFeedbackProps;\n /**\n * Handles error\n * @default false\n */\n error?: boolean;\n /**\n * Sets the initial message\n * @default false\n */\n initialMessage?: boolean;\n }\n>;\n\nexport function isSearchArticle(\n item: AIArticleSummaryProps | ArticleSummaryProps\n): item is ArticleSummaryProps {\n return 'abstract' in item;\n}\n\nexport const isSemanticSearchArticle = (\n fileItems: (AIArticleSummaryProps | ArticleSummaryProps)[]\n): fileItems is AIArticleSummaryProps[] => {\n return fileItems.every(item => 'semanticSearch' in item);\n};\n\nexport const isSemanticSearch = (\n obj: Articles | SemanticSearchArticles | undefined\n): obj is SemanticSearchArticles => {\n return (obj as SemanticSearchArticles)?.semanticSearch;\n};\n\nexport type ArticleListTabId = 'Suggested' | 'Followed' | 'Search' | 'Buddy';\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;AAsB/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AA+CpF,KAAK,sBAAsB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,GAAG;IAAE,cAAc,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CACzF,sBAAsB,EACtB,gBAAgB,CACjB,CAAC;AAEJ,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAoG/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Button, Flex, SearchInput, useI18n, defaultThemeProp, ComboBox, StyledSearchInput, Text, Selectable, MenuButton, registerIcon, AdditionalInfo } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Button, Flex, SearchInput, useI18n, defaultThemeProp, ComboBox, StyledSearchInput, Text, Selectable, MenuButton, registerIcon, AdditionalInfo, Popover, Menu, useElement, Icon, useOuterEvent } from '@pega/cosmos-react-core';
|
|
5
5
|
import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
|
|
6
6
|
import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
|
|
7
7
|
import * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';
|
|
@@ -51,12 +51,18 @@ const ArticleListFilter = (props) => {
|
|
|
51
51
|
const t = useI18n();
|
|
52
52
|
const searchResults = t('results_count', [articles?.length ?? 0]);
|
|
53
53
|
const quickFiltersRef = useRef([]);
|
|
54
|
+
const [buttonEl, setButtonEl] = useElement(null);
|
|
55
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
56
|
+
const [popoverEl, setPopoverEl] = useElement(null);
|
|
54
57
|
useEffect(() => {
|
|
55
58
|
if (quickFilters.length > 0 && quickFiltersRef.current.length > 0) {
|
|
56
59
|
quickFiltersRef.current[quickFilters.length - 1]?.focus();
|
|
57
60
|
}
|
|
58
61
|
}, [articles]);
|
|
59
|
-
|
|
62
|
+
useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
|
|
63
|
+
setIsOpen(false);
|
|
64
|
+
});
|
|
65
|
+
return (_jsxs(StyledSearchFilters, { ...restProps, children: [searchInput.searchFilter && (_jsxs(Flex, { container: { alignItems: 'center', pad: [0.5, undefined] }, children: [_jsx(MenuButton, { ...searchInput.searchFilter }), searchInput.filterInfo?.title && (_jsx(AdditionalInfo, { heading: searchInput.filterInfo.title, children: searchInput.filterInfo.description }))] })), _jsxs(Flex, { container: { alignItems: 'center', gap: 1, pad: [0.5, undefined] }, children: [_jsx(SearchInput, { ...searchInput }), semanticSearch && semanticFilter && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setButtonEl, onClick: () => setIsOpen(cur => !cur), variant: 'simple', icon: true, compact: true, children: _jsx(Icon, { name: quickFilters.length ? 'filter-on' : 'filter' }) }), _jsx(Popover, { show: isOpen, target: buttonEl, ref: setPopoverEl, children: _jsx(Menu, { ...semanticFilter }) })] }))] }), quickFilters.map(({ id, name }, i) => (_jsx(StyledSelectable, { id: id, ref: (el) => {
|
|
60
66
|
quickFiltersRef.current[i] = el;
|
|
61
67
|
}, onRemove: handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined, onClick: handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined, children: name }))), _jsx(StyledFilterContainer, { container: { gap: 1, alignItems: 'start' }, children: !semanticSearch && (_jsxs(_Fragment, { children: [category && _jsx(ComboBox, { ...category }), sortBy && _jsx(ComboBox, { ...sortBy }), onClearClick && (_jsx(StyledClearButton, { variant: 'link', label: t('clear'), "aria-label": t('clear_filters'), onClick: onClearClick, children: t('clear') }))] })) }), showResults && searchResults && _jsx(Text, { variant: 'secondary', children: searchResults })] }));
|
|
62
68
|
};
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"ArticleListFilter.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } 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 MenuButton,\n registerIcon,\n AdditionalInfo,\n Popover,\n Menu,\n useElement,\n Icon,\n useOuterEvent\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';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport type { ArticleListProps, SemanticSearchArticles } from './ArticleList.types';\n\nregisterIcon(filterIcon, filterOnIcon);\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;\ntype ArticleListFilterProps = ArticleListProps['search'] & { semanticSearch: boolean } & Pick<\n SemanticSearchArticles,\n 'semanticFilter'\n >;\n\nconst ArticleListFilter: FunctionComponent<ArticleListFilterProps & ForwardProps> = (\n props: ArticleListFilterProps\n) => {\n const {\n searchInput,\n category,\n sortBy,\n onClearClick,\n articles,\n quickFilters = [],\n showResults = false,\n handleQuickFilterRemove,\n semanticSearch = false,\n semanticFilter,\n ...restProps\n } = props || {};\n const t = useI18n();\n const searchResults = t('results_count', [articles?.length ?? 0]);\n const quickFiltersRef = useRef<HTMLButtonElement[]>([]);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n\n useEffect(() => {\n if (quickFilters.length > 0 && quickFiltersRef.current.length > 0) {\n quickFiltersRef.current[quickFilters.length - 1]?.focus();\n }\n }, [articles]);\n\n useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n setIsOpen(false);\n });\n\n return (\n <StyledSearchFilters {...restProps}>\n {searchInput.searchFilter && (\n <Flex container={{ alignItems: 'center', pad: [0.5, undefined] }}>\n <MenuButton {...searchInput.searchFilter} />\n {searchInput.filterInfo?.title && (\n <AdditionalInfo heading={searchInput.filterInfo.title}>\n {searchInput.filterInfo.description}\n </AdditionalInfo>\n )}\n </Flex>\n )}\n <Flex container={{ alignItems: 'center', gap: 1, pad: [0.5, undefined] }}>\n <SearchInput {...searchInput} />\n {semanticSearch && semanticFilter && (\n <>\n <Button\n ref={setButtonEl}\n onClick={() => setIsOpen(cur => !cur)}\n variant='simple'\n icon\n compact\n >\n <Icon name={quickFilters.length ? 'filter-on' : 'filter'} />\n </Button>\n <Popover show={isOpen} target={buttonEl} ref={setPopoverEl}>\n <Menu {...semanticFilter} />\n </Popover>\n </>\n )}\n </Flex>\n\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\n <StyledFilterContainer container={{ gap: 1, alignItems: 'start' }}>\n {!semanticSearch && (\n <>\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 </>\n )}\n </StyledFilterContainer>\n\n {showResults && searchResults && <Text variant='secondary'>{searchResults}</Text>}\n </StyledSearchFilters>\n );\n};\n\nexport default ArticleListFilter;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleTag.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleTag.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"ArticleTag.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleTag.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EAGpB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,KAAK,EACL,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,oBAAoB,CAAC,CAClF,CAAC;;AAEF,wBAiFE"}
|
|
@@ -1,17 +1,48 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { Tag, Flex } from '@pega/cosmos-react-core';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
|
|
3
|
+
import { Tag, Flex, Button, useI18n } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledQuickFilters } from './ArticleSummary.styles';
|
|
5
|
-
export default forwardRef(function ArticleTag({ quickFilters, onQuickFilterClick, ...restProps }
|
|
6
|
-
|
|
5
|
+
export default forwardRef(function ArticleTag({ quickFilters, onQuickFilterClick, ...restProps }) {
|
|
6
|
+
const [collapsed, setCollapsed] = useState(true);
|
|
7
|
+
const containerRef = useRef(null);
|
|
8
|
+
const tagRefs = useRef([]);
|
|
9
|
+
const [visibleCount, setVisibleCount] = useState(0);
|
|
10
|
+
const buttonRef = useRef(null);
|
|
11
|
+
const t = useI18n();
|
|
12
|
+
useLayoutEffect(() => {
|
|
13
|
+
const calculateVisibleCount = () => {
|
|
14
|
+
if (!containerRef.current)
|
|
15
|
+
return;
|
|
16
|
+
const containerWidth = containerRef.current.offsetWidth;
|
|
17
|
+
const buttonWidth = buttonRef.current ? buttonRef.current.offsetWidth : 0;
|
|
18
|
+
const { count } = tagRefs.current.reduce((acc, tag) => {
|
|
19
|
+
if (!tag || acc.totalWidth + tag.offsetWidth + buttonWidth > containerWidth) {
|
|
20
|
+
return acc;
|
|
21
|
+
}
|
|
22
|
+
acc.totalWidth += tag.offsetWidth;
|
|
23
|
+
acc.count += 1;
|
|
24
|
+
return acc;
|
|
25
|
+
}, { totalWidth: 0, count: 0 });
|
|
26
|
+
setVisibleCount(count);
|
|
27
|
+
};
|
|
28
|
+
calculateVisibleCount();
|
|
29
|
+
}, [quickFilters]);
|
|
30
|
+
const visibleTags = collapsed && quickFilters && quickFilters.length
|
|
31
|
+
? quickFilters.slice(0, visibleCount)
|
|
32
|
+
: quickFilters;
|
|
33
|
+
const remainingTags = Math.max((quickFilters?.length || 0) - visibleCount, 0);
|
|
34
|
+
const tagsToDisplay = visibleTags && visibleTags.length > 0 ? visibleTags : quickFilters;
|
|
35
|
+
return (_jsxs(Flex, { ...restProps, container: {
|
|
7
36
|
gap: 0.5,
|
|
8
37
|
wrap: 'wrap',
|
|
9
38
|
pad: [0.5, undefined, undefined]
|
|
10
39
|
}, item: {
|
|
11
40
|
grow: 1,
|
|
12
41
|
basis: '100%'
|
|
13
|
-
}, as: StyledQuickFilters, ref:
|
|
14
|
-
|
|
15
|
-
|
|
42
|
+
}, as: StyledQuickFilters, ref: containerRef, children: [tagsToDisplay &&
|
|
43
|
+
tagsToDisplay.length > 0 &&
|
|
44
|
+
tagsToDisplay.map((item, index) => (_jsx(Tag, { ref: el => {
|
|
45
|
+
tagRefs.current[index] = el;
|
|
46
|
+
}, onClick: onQuickFilterClick ? e => onQuickFilterClick(item, e) : undefined, children: item.name }, item.id))), remainingTags > 0 && (_jsx(Button, { variant: 'link', ref: buttonRef, onClick: () => setCollapsed(current => !current), children: collapsed ? `+${t('n_more', [remainingTags])}` : t('show_less') }))] }));
|
|
16
47
|
});
|
|
17
48
|
//# sourceMappingURL=ArticleTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleTag.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleTag.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"ArticleTag.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleTag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n type RefElement,\n Tag,\n Flex,\n type NoChildrenProp,\n type WithAttributes,\n Button,\n useI18n\n} from '@pega/cosmos-react-core';\n\nimport type { ArticleSummaryProps } from './ArticleList.types';\nimport { StyledQuickFilters } from './ArticleSummary.styles';\n\nexport type ArticleTagProps = WithAttributes<\n 'div',\n NoChildrenProp & Pick<ArticleSummaryProps, 'quickFilters' | 'onQuickFilterClick'>\n>;\n\nexport default forwardRef<RefElement<ArticleTagProps>, PropsWithoutRef<ArticleTagProps>>(\n function ArticleTag({ quickFilters, onQuickFilterClick, ...restProps }) {\n const [collapsed, setCollapsed] = useState(true);\n const containerRef = useRef<HTMLDivElement>(null);\n const tagRefs = useRef<(HTMLSpanElement | HTMLAnchorElement | HTMLButtonElement | null)[]>([]);\n const [visibleCount, setVisibleCount] = useState(0);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const t = useI18n();\n\n useLayoutEffect(() => {\n const calculateVisibleCount = () => {\n if (!containerRef.current) return;\n\n const containerWidth = containerRef.current.offsetWidth;\n const buttonWidth = buttonRef.current ? buttonRef.current.offsetWidth : 0;\n\n const { count } = tagRefs.current.reduce(\n (acc, tag) => {\n if (!tag || acc.totalWidth + tag.offsetWidth + buttonWidth > containerWidth) {\n return acc;\n }\n\n acc.totalWidth += tag.offsetWidth;\n acc.count += 1;\n\n return acc;\n },\n { totalWidth: 0, count: 0 }\n );\n\n setVisibleCount(count);\n };\n\n calculateVisibleCount();\n }, [quickFilters]);\n\n const visibleTags =\n collapsed && quickFilters && quickFilters.length\n ? quickFilters.slice(0, visibleCount)\n : quickFilters;\n const remainingTags = Math.max((quickFilters?.length || 0) - visibleCount, 0);\n\n const tagsToDisplay = visibleTags && visibleTags.length > 0 ? visibleTags : quickFilters;\n\n return (\n <Flex\n {...restProps}\n container={{\n gap: 0.5,\n wrap: 'wrap',\n pad: [0.5, undefined, undefined]\n }}\n item={{\n grow: 1,\n basis: '100%'\n }}\n as={StyledQuickFilters}\n ref={containerRef}\n >\n {tagsToDisplay &&\n tagsToDisplay.length > 0 &&\n tagsToDisplay.map((item, index) => (\n <Tag\n ref={el => {\n tagRefs.current[index] = el;\n }}\n key={item.id}\n onClick={onQuickFilterClick ? e => onQuickFilterClick(item, e) : undefined}\n >\n {item.name}\n </Tag>\n ))}\n\n {remainingTags > 0 && (\n <Button variant='link' ref={buttonRef} onClick={() => setCollapsed(current => !current)}>\n {collapsed ? `+${t('n_more', [remainingTags])}` : t('show_less')}\n </Button>\n )}\n </Flex>\n );\n }\n);\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { AssignmentProps } from './HierarchicalAssignments.types';
|
|
3
|
+
export declare const AssignmentDetail: ({ processName, name }: Pick<AssignmentProps, 'processName' | 'name'>) => JSX.Element;
|
|
4
|
+
export default AssignmentDetail;
|
|
5
|
+
//# sourceMappingURL=AssignmentDetail.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AssignmentDetail.d.ts","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentDetail.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGvE,eAAO,MAAM,gBAAgB,0BAG1B,KAAK,eAAe,EAAE,aAAa,GAAG,MAAM,CAAC,gBAc/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Text, Tooltip, useElement } from '@pega/cosmos-react-core';
|
|
3
|
+
import { StyledAssignmentText } from './Assignments.styles';
|
|
4
|
+
export const AssignmentDetail = ({ processName, name }) => {
|
|
5
|
+
const [element, setElement] = useElement();
|
|
6
|
+
const assignmentDetail = processName ? `${processName} - ${name}` : name;
|
|
7
|
+
return (_jsxs(_Fragment, { children: [_jsx(Text, { as: StyledAssignmentText, ref: setElement, children: assignmentDetail }), _jsx(Tooltip, { target: element, smart: true, children: assignmentDetail })] }));
|
|
8
|
+
};
|
|
9
|
+
export default AssignmentDetail;
|
|
10
|
+
//# sourceMappingURL=AssignmentDetail.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AssignmentDetail.js","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentDetail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,WAAW,EACX,IAAI,EAC0C,EAAE,EAAE;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,UAAU,EAAe,CAAC;IACxD,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAEzE,OAAO,CACL,8BACE,KAAC,IAAI,IAAC,EAAE,EAAE,oBAAoB,EAAE,GAAG,EAAE,UAAU,YAC5C,gBAAgB,GACZ,EACP,KAAC,OAAO,IAAC,MAAM,EAAE,OAAO,EAAE,KAAK,kBAC5B,gBAAgB,GACT,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { Text, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nimport type { AssignmentProps } from './HierarchicalAssignments.types';\nimport { StyledAssignmentText } from './Assignments.styles';\n\nexport const AssignmentDetail = ({\n processName,\n name\n}: Pick<AssignmentProps, 'processName' | 'name'>) => {\n const [element, setElement] = useElement<HTMLElement>();\n const assignmentDetail = processName ? `${processName} - ${name}` : name;\n\n return (\n <>\n <Text as={StyledAssignmentText} ref={setElement}>\n {assignmentDetail}\n </Text>\n <Tooltip target={element} smart>\n {assignmentDetail}\n </Tooltip>\n </>\n );\n};\n\nexport default AssignmentDetail;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssignmentItem.d.ts","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentItem.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"AssignmentItem.d.ts","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentItem.tsx"],"names":[],"mappings":";AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;;;;;;;;AA8FvE,wBAAiE"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Button, Text, useI18n, withTestIds, useTestIds, Flex
|
|
2
|
+
import { Button, Text, useI18n, withTestIds, useTestIds, Flex } from '@pega/cosmos-react-core';
|
|
3
3
|
import { StyledAssignmentItem, StyledProcessContainer, StyledActionContainer, StyledAssigneeContainer, StyledUrgencyTextContainer, StyledLabelContainer, StyledAssigneeText } from './Assignments.styles';
|
|
4
4
|
import { getAssignmentTestIds } from './HierarchicalAssignments.test-ids';
|
|
5
5
|
import { maxDepth } from './AssignmentContainer';
|
|
6
|
+
import AssignmentDetails from './AssignmentDetail';
|
|
6
7
|
const AssignmentItem = ({ processName, name, assigneeName, urgency, depth, id, firstItemId, assigneeId, onOpen, onAssigneeClick, testId, isMediumOrAbove }) => {
|
|
7
8
|
const t = useI18n();
|
|
8
9
|
const testIds = useTestIds(testId, getAssignmentTestIds);
|
|
@@ -11,10 +12,7 @@ const AssignmentItem = ({ processName, name, assigneeName, urgency, depth, id, f
|
|
|
11
12
|
alignItems: 'center',
|
|
12
13
|
cols: isMediumOrAbove ? '3.5fr 1.5fr 1fr 1fr' : '2fr 0.5fr',
|
|
13
14
|
rows: isMediumOrAbove ? 'repeat(1, auto)' : 'repeat(3, auto)'
|
|
14
|
-
}, hideBorders: firstItemId === id, role: 'treeitem', children: [_jsx(Flex, { "data-testid": testIds.label, container: {
|
|
15
|
-
{ id: 'processName', primary: processName },
|
|
16
|
-
{ id: 'name', primary: name }
|
|
17
|
-
] })) : (_jsx(Text, { variant: 'primary', children: name })) }), _jsxs(Flex, { "data-testid": testIds.assignee, container: { justify: isMediumOrAbove ? 'end' : 'start' }, as: StyledAssigneeContainer, depth: tableDepth, variant: 'secondary', isMediumOrAbove: isMediumOrAbove, children: [_jsxs(StyledLabelContainer, { variant: 'secondary', children: [t('assignee'), ":"] }), _jsx(StyledAssigneeText, { onClick: (e) => {
|
|
15
|
+
}, hideBorders: firstItemId === id, role: 'treeitem', children: [_jsx(Flex, { "data-testid": testIds.label, container: { alignItems: 'center' }, as: StyledProcessContainer, depth: tableDepth, children: _jsx(AssignmentDetails, { processName: processName, name: name }) }), _jsxs(Flex, { "data-testid": testIds.assignee, container: { justify: isMediumOrAbove ? 'end' : 'start' }, as: StyledAssigneeContainer, depth: tableDepth, variant: 'secondary', isMediumOrAbove: isMediumOrAbove, children: [_jsxs(StyledLabelContainer, { variant: 'secondary', children: [t('assignee'), ":"] }), _jsx(StyledAssigneeText, { onClick: (e) => {
|
|
18
16
|
onAssigneeClick(assigneeId, e);
|
|
19
17
|
}, variant: 'link', children: assigneeName })] }), _jsxs(Flex, { "data-testid": testIds.urgency, container: { justify: isMediumOrAbove ? 'end' : 'start' }, as: StyledUrgencyTextContainer, depth: tableDepth, isMediumOrAbove: isMediumOrAbove, children: [_jsxs(StyledLabelContainer, { variant: 'secondary', children: [t('urgency'), ":"] }), _jsx(Text, { variant: 'secondary', children: urgency })] }), _jsx(Flex, { as: StyledActionContainer, container: { justify: 'end' }, isMediumOrAbove: isMediumOrAbove, children: onOpen && (_jsx(Button, { "data-testid": testIds.action, compact: true, variant: 'primary', onClick: (e) => onOpen(id, e), children: t('go') })) })] }));
|
|
20
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssignmentItem.js","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentItem.tsx"],"names":[],"mappings":";AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"AssignmentItem.js","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { MouseEvent } from 'react';\n\nimport { Button, Text, useI18n, withTestIds, useTestIds, Flex } from '@pega/cosmos-react-core';\n\nimport {\n StyledAssignmentItem,\n StyledProcessContainer,\n StyledActionContainer,\n StyledAssigneeContainer,\n StyledUrgencyTextContainer,\n StyledLabelContainer,\n StyledAssigneeText\n} from './Assignments.styles';\nimport type { AssignmentProps } from './HierarchicalAssignments.types';\nimport { getAssignmentTestIds } from './HierarchicalAssignments.test-ids';\nimport { maxDepth } from './AssignmentContainer';\nimport AssignmentDetails from './AssignmentDetail';\n\nconst AssignmentItem = ({\n processName,\n name,\n assigneeName,\n urgency,\n depth,\n id,\n firstItemId,\n assigneeId,\n onOpen,\n onAssigneeClick,\n testId,\n isMediumOrAbove\n}: AssignmentProps & {\n depth: number;\n firstItemId?: string;\n isMediumOrAbove: boolean;\n}) => {\n const t = useI18n();\n const testIds = useTestIds(testId, getAssignmentTestIds);\n const tableDepth = depth === 0 ? depth : Math.min(depth + 1, maxDepth);\n\n return (\n <StyledAssignmentItem\n data-testid={testIds.root}\n container={{\n alignItems: 'center',\n cols: isMediumOrAbove ? '3.5fr 1.5fr 1fr 1fr' : '2fr 0.5fr',\n rows: isMediumOrAbove ? 'repeat(1, auto)' : 'repeat(3, auto)'\n }}\n hideBorders={firstItemId === id}\n role='treeitem'\n >\n <Flex\n data-testid={testIds.label}\n container={{ alignItems: 'center' }}\n as={StyledProcessContainer}\n depth={tableDepth}\n >\n <AssignmentDetails processName={processName} name={name} />\n </Flex>\n <Flex\n data-testid={testIds.assignee}\n container={{ justify: isMediumOrAbove ? 'end' : 'start' }}\n as={StyledAssigneeContainer}\n depth={tableDepth}\n variant='secondary'\n isMediumOrAbove={isMediumOrAbove}\n >\n <StyledLabelContainer variant='secondary'>{t('assignee')}:</StyledLabelContainer>\n <StyledAssigneeText\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onAssigneeClick(assigneeId, e);\n }}\n variant='link'\n >\n {assigneeName}\n </StyledAssigneeText>\n </Flex>\n <Flex\n data-testid={testIds.urgency}\n container={{ justify: isMediumOrAbove ? 'end' : 'start' }}\n as={StyledUrgencyTextContainer}\n depth={tableDepth}\n isMediumOrAbove={isMediumOrAbove}\n >\n <StyledLabelContainer variant='secondary'>{t('urgency')}:</StyledLabelContainer>\n <Text variant='secondary'>{urgency}</Text>\n </Flex>\n <Flex\n as={StyledActionContainer}\n container={{ justify: 'end' }}\n isMediumOrAbove={isMediumOrAbove}\n >\n {onOpen && (\n <Button\n data-testid={testIds.action}\n compact\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n {t('go')}\n </Button>\n )}\n </Flex>\n </StyledAssignmentItem>\n );\n};\n\nexport default withTestIds(AssignmentItem, getAssignmentTestIds);\n"]}
|
|
@@ -25,6 +25,7 @@ export declare const StyledAssignmentContainer: import("styled-components").Styl
|
|
|
25
25
|
depth?: number | undefined;
|
|
26
26
|
hideBorders?: boolean | undefined;
|
|
27
27
|
}, never>;
|
|
28
|
+
export declare const StyledAssignmentText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
28
29
|
export declare const StyledLinkContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
29
30
|
isMediumOrAbove?: boolean | undefined;
|
|
30
31
|
}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Assignments.styles.d.ts","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/Assignments.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,
|
|
1
|
+
{"version":3,"file":"Assignments.styles.d.ts","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/Assignments.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EAYL,MAAM,yBAAyB,CAAC;AAKjC,eAAO,MAAM,kBAAkB,qOA0B7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,6OAQ/B,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAMrC,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAsBxC,CAAC;AAGH,eAAO,MAAM,sBAAsB;;SA2BlC,CAAC;AAGF,eAAO,MAAM,qBAAqB;;SAYjC,CAAC;AAGF,eAAO,MAAM,qBAAqB;;SAoBjC,CAAC;AAGF,eAAO,MAAM,iBAAiB;;;YAAiC,OAAO;SAiBpE,CAAC;AAGH,eAAO,MAAM,iBAAiB;;SAW5B,CAAC;AAIH,eAAO,MAAM,yBAAyB;;;SA8BrC,CAAC;AAGF,eAAO,MAAM,oBAAoB,mOAI/B,CAAC;AAGH,eAAO,MAAM,mBAAmB;;SAsB/B,CAAC;AAGF,eAAO,MAAM,uBAAuB;;;SA2BnC,CAAC;AAGF,eAAO,MAAM,kBAAkB,qOAO7B,CAAC;AAGH,eAAO,MAAM,0BAA0B;;;SA0BtC,CAAC;AAGF,eAAO,MAAM,uBAAuB;;;YAC1B,OAAO;SA2Bf,CAAC;AAGH,eAAO,MAAM,2BAA2B;;uDAQtC,CAAC;AAGH,eAAO,MAAM,oBAAoB,mOAQ/B,CAAC"}
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { Grid, Button, Card, defaultThemeProp, StyledIcon, ExpandCollapse, useDirection, Text, MetaList, SummaryItem, calculateFontSize } from '@pega/cosmos-react-core';
|
|
2
|
+
import { Grid, Button, Card, defaultThemeProp, StyledIcon, ExpandCollapse, useDirection, Text, MetaList, SummaryItem, calculateFontSize, StyledText } from '@pega/cosmos-react-core';
|
|
3
|
+
import { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
|
|
3
4
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
4
|
-
const StyledEllipsis = css `
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
white-space: nowrap;
|
|
7
|
-
text-overflow: ellipsis;
|
|
8
|
-
`;
|
|
9
5
|
export const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
|
|
10
6
|
const { rtl } = useDirection();
|
|
11
7
|
return css `
|
|
@@ -60,15 +56,13 @@ export const StyledProcessContainer = styled.div(({ depth, theme: { base: { spac
|
|
|
60
56
|
const paddingInlineStart = depth
|
|
61
57
|
? `calc(1.5 * ${spacing} * ${depth} + ${s} + ${spacing})`
|
|
62
58
|
: `calc(1.5 * ${spacing})`;
|
|
63
|
-
const assignmentNameWidth = '22rem';
|
|
64
59
|
return css `
|
|
65
|
-
|
|
66
|
-
height: 100%;
|
|
67
|
-
max-width: ${assignmentNameWidth};
|
|
60
|
+
overflow: hidden;
|
|
68
61
|
padding-inline-start: ${paddingInlineStart};
|
|
69
62
|
grid-row-start: 1;
|
|
70
63
|
grid-row-end: 1;
|
|
71
|
-
|
|
64
|
+
${StyledText} {
|
|
65
|
+
${elipsisOverflow}
|
|
72
66
|
padding-inline: calc(0.5 * ${spacing});
|
|
73
67
|
}
|
|
74
68
|
`;
|
|
@@ -135,10 +129,16 @@ export const StyledAssignmentContainer = styled.div(({ theme: { base: { colors,
|
|
|
135
129
|
`;
|
|
136
130
|
});
|
|
137
131
|
StyledAssignmentContainer.defaultProps = defaultThemeProp;
|
|
132
|
+
export const StyledAssignmentText = styled(Text)(({ theme }) => {
|
|
133
|
+
return css `
|
|
134
|
+
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
135
|
+
`;
|
|
136
|
+
});
|
|
137
|
+
StyledAssignmentText.defaultProps = defaultThemeProp;
|
|
138
138
|
export const StyledLinkContainer = styled.div(({ theme: { base: { spacing } }, isMediumOrAbove }) => {
|
|
139
139
|
const caseNameWidth = '28rem';
|
|
140
140
|
return css `
|
|
141
|
-
${
|
|
141
|
+
${elipsisOverflow};
|
|
142
142
|
padding: calc(0.5 * ${spacing});
|
|
143
143
|
padding-inline-end: calc(2 * ${spacing});
|
|
144
144
|
& > a > span {
|
|
@@ -170,7 +170,7 @@ StyledAssigneeContainer.defaultProps = defaultThemeProp;
|
|
|
170
170
|
export const StyledAssigneeText = styled(Button)(({ theme }) => {
|
|
171
171
|
const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
|
|
172
172
|
return css `
|
|
173
|
-
${
|
|
173
|
+
${elipsisOverflow}
|
|
174
174
|
font-size: ${fontSizes[theme.components.text.secondary['font-size']]};
|
|
175
175
|
font-weight: ${theme.components.text.secondary['font-weight']};
|
|
176
176
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Assignments.styles.js","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/Assignments.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Grid,\n Button,\n Card,\n defaultThemeProp,\n StyledIcon,\n ExpandCollapse,\n useDirection,\n Text,\n MetaList,\n SummaryItem,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nconst StyledEllipsis = css`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`;\n\nexport const StyledExpandButton = styled(Button)(({\n theme: {\n base: { animation }\n }\n}) => {\n const { rtl } = useDirection();\n return css`\n margin: 0;\n\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n\n &:hover,\n &:active {\n text-decoration: none;\n }\n `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapse = styled(ExpandCollapse)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n padding-inline: calc(${spacing} * 2);\n `;\n});\n\nStyledExpandCollapse.defaultProps = defaultThemeProp;\n\nexport const StyledParentExpandCollapse = styled.div(() => {\n const assignmentHeight = '50dvh';\n return css`\n max-height: ${assignmentHeight};\n overflow-y: auto;\n `;\n});\n\nStyledParentExpandCollapse.defaultProps = defaultThemeProp;\n\nexport const StyledAssignmentItem: typeof Grid = styled(Grid)<{\n hideBorders?: boolean;\n}>(({\n theme: {\n base: { spacing, colors },\n components: {\n table: {\n body: { 'border-width': borderWidth }\n }\n }\n },\n hideBorders\n}) => {\n return css`\n padding-inline-end: calc(2 * ${spacing});\n padding-block: calc(0.5 * ${spacing});\n border-block-start: ${borderWidth} dashed ${colors.gray.light};\n ${hideBorders &&\n css`\n border-block-start: none;\n `};\n `;\n});\nStyledAssignmentItem.defaultProps = defaultThemeProp;\n\nexport const StyledProcessContainer = styled.div<{ depth?: number }>(\n ({\n depth,\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n }\n }) => {\n const paddingInlineStart = depth\n ? `calc(1.5 * ${spacing} * ${depth} + ${s} + ${spacing})`\n : `calc(1.5 * ${spacing})`;\n const assignmentNameWidth = '22rem';\n\n return css`\n ${StyledEllipsis};\n height: 100%;\n max-width: ${assignmentNameWidth};\n padding-inline-start: ${paddingInlineStart};\n grid-row-start: 1;\n grid-row-end: 1;\n span {\n padding-inline: calc(0.5 * ${spacing});\n }\n `;\n }\n);\nStyledProcessContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActionContainer = styled.div<{ isMediumOrAbove?: boolean }>(\n ({ isMediumOrAbove }) => {\n return css`\n grid-row-start: 1;\n grid-row-end: -1;\n ${isMediumOrAbove &&\n css`\n grid-column-start: 4;\n grid-column-end: -1;\n `}\n `;\n }\n);\nStyledActionContainer.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderContainer = styled.div<{ depth?: number }>(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'secondary-background': secondaryBackground }\n }\n },\n depth\n }) => {\n const paddingInlineStart = depth\n ? `calc(1.5 * ${spacing} * ${depth})`\n : `calc(1.5 * ${spacing})`;\n\n return css`\n padding-inline-start: ${paddingInlineStart};\n padding-block: calc(0.5 * ${spacing});\n background-color: ${secondaryBackground};\n `;\n }\n);\nStyledHeaderContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryItem = styled(SummaryItem)<{ indent: boolean }>(({\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n },\n indent\n}) => {\n return css`\n ${indent &&\n css`\n padding-inline-start: calc(${s} + ${spacing});\n `}\n `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledAssignments = styled(Card)<{ expanded?: boolean }>(({ theme, expanded }) => {\n return css`\n padding: calc(${theme.base.spacing} * 2);\n box-shadow: ${expanded ? theme.base.shadow.low : 'none'};\n &&& {\n > ${StyledCardHeader} {\n padding: 0;\n padding-block-end: ${expanded ? `calc(${theme.base.spacing} * 2)` : 0};\n }\n }\n `;\n});\n\nStyledAssignments.defaultProps = defaultThemeProp;\n\nexport const StyledAssignmentContainer = styled.div<{\n depth?: number;\n hideBorders?: boolean;\n}>(\n ({\n theme: {\n base: { colors, 'border-radius': borderRadius },\n components: {\n table: {\n body: { 'border-width': borderWidth }\n }\n }\n },\n depth,\n hideBorders\n }) => {\n return css`\n overflow: hidden;\n width: 100%;\n ${!depth &&\n css`\n border: ${borderWidth} solid ${colors.gray.light};\n border-radius: ${borderRadius};\n `}\n ${depth &&\n css`\n border-block-start: ${hideBorders ? 'none' : `${borderWidth} dashed ${colors.gray.light}`};\n `}\n `;\n }\n);\nStyledAssignmentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledLinkContainer = styled.div<{ isMediumOrAbove?: boolean }>(\n ({\n theme: {\n base: { spacing }\n },\n isMediumOrAbove\n }) => {\n const caseNameWidth = '28rem';\n return css`\n ${StyledEllipsis};\n padding: calc(0.5 * ${spacing});\n padding-inline-end: calc(2 * ${spacing});\n & > a > span {\n width: 0;\n }\n ${isMediumOrAbove &&\n css`\n max-width: ${caseNameWidth};\n padding-inline-end: calc(0.5 * ${spacing});\n `}\n `;\n }\n);\nStyledLinkContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAssigneeContainer = styled.div<{ depth?: number; isMediumOrAbove?: boolean }>(\n ({\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n },\n depth,\n isMediumOrAbove\n }) => {\n const paddingInlineStart = depth\n ? `calc(1.5 * ${spacing} * ${depth} + ${s} + ${spacing})`\n : `calc(1.5 * ${spacing})`;\n\n return css`\n padding-block: calc(0.5 * ${spacing});\n overflow: hidden;\n padding-inline-start: ${paddingInlineStart};\n ${isMediumOrAbove &&\n css`\n padding: calc(0.5 * ${spacing});\n `};\n `;\n }\n);\nStyledAssigneeContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAssigneeText = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n ${StyledEllipsis}\n font-size: ${fontSizes[theme.components.text.secondary['font-size'] as FontSize]};\n font-weight: ${theme.components.text.secondary['font-weight']};\n `;\n});\nStyledAssigneeText.defaultProps = defaultThemeProp;\n\nexport const StyledUrgencyTextContainer = styled.div<{ depth?: number; isMediumOrAbove?: boolean }>(\n ({\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n },\n depth,\n isMediumOrAbove\n }) => {\n const paddingInlineStart = depth\n ? `calc(1.5 * ${spacing} * ${depth} + ${s} + ${spacing})`\n : `calc(1.5 * ${spacing})`;\n\n return css`\n white-space: nowrap;\n padding-inline-start: ${paddingInlineStart};\n ${isMediumOrAbove &&\n css`\n padding-inline: calc(0.5 * ${spacing});\n `}\n `;\n }\n);\nStyledUrgencyTextContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMetaListContainer = styled(MetaList)<{\n indent: boolean;\n}>(({\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n },\n indent\n}) => {\n return css`\n ${indent &&\n css`\n padding-inline-start: calc(${s} + ${spacing});\n `}\n width: 100%;\n flex-wrap: nowrap;\n & > li:nth-child(1) {\n flex-shrink: 1;\n }\n & > li:nth-child(2),\n & > li:nth-child(3) {\n flex-shrink: 0;\n }\n `;\n});\nStyledMetaListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMetaIdStatusContainer = styled(MetaList)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n padding-inline: calc(0.5 * ${spacing});\n `;\n});\nStyledMetaIdStatusContainer.defaultProps = defaultThemeProp;\n\nexport const StyledLabelContainer = styled(Text)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n padding-inline: calc(0.5 * ${spacing});\n `;\n});\nStyledLabelContainer.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"Assignments.styles.js","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/Assignments.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAE5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAE1F,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAChD,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;;MAGN,UAAU;8BACc,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;;8BAGxC,UAAU;;;;+BAIT,UAAU;0BACf,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;;;;;;GAOpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAC1D,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;2BACe,OAAO;GAC/B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACxD,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACjC,OAAO,GAAG,CAAA;kBACM,gBAAgB;;GAE/B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,oBAAoB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAE1D,CAAC,EACF,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EACzB,UAAU,EAAE,EACV,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EACtC,EACF,EACF,EACD,WAAW,EACZ,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;mCACuB,OAAO;gCACV,OAAO;0BACb,WAAW,WAAW,MAAM,CAAC,IAAI,CAAC,KAAK;MAC3D,WAAW;QACb,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,KAAK,EACL,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,IAAI,EAAE,EAAE,CAAC,EAAE,EACZ,EACF,EACF,EACF,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,KAAK;QAC9B,CAAC,CAAC,cAAc,OAAO,MAAM,KAAK,MAAM,CAAC,MAAM,OAAO,GAAG;QACzD,CAAC,CAAC,cAAc,OAAO,GAAG,CAAC;IAE7B,OAAO,GAAG,CAAA;;8BAEgB,kBAAkB;;;QAGxC,UAAU;UACR,eAAe;qCACY,OAAO;;KAEvC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE;IACtB,OAAO,GAAG,CAAA;;;QAGN,eAAe;QACjB,GAAG,CAAA;;;OAGF;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AACF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,OAAO,EAAE,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,EACzD,EACF,EACD,KAAK,EACN,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,KAAK;QAC9B,CAAC,CAAC,cAAc,OAAO,MAAM,KAAK,GAAG;QACrC,CAAC,CAAC,cAAc,OAAO,GAAG,CAAC;IAE7B,OAAO,GAAG,CAAA;8BACgB,kBAAkB;kCACd,OAAO;0BACf,mBAAmB;KACxC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAsB,CAAC,EACzE,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,IAAI,EAAE,EAAE,CAAC,EAAE,EACZ,EACF,EACF,EACD,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;MACN,MAAM;QACR,GAAG,CAAA;mCAC4B,CAAC,MAAM,OAAO;KAC5C;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5F,OAAO,GAAG,CAAA;oBACQ,KAAK,CAAC,IAAI,CAAC,OAAO;kBACpB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;;UAEjD,gBAAgB;;6BAEG,QAAQ,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;;;GAG1E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAIjD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,EAC/C,UAAU,EAAE,EACV,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EACtC,EACF,EACF,EACD,KAAK,EACL,WAAW,EACZ,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;QAGN,CAAC,KAAK;QACR,GAAG,CAAA;kBACS,WAAW,UAAU,MAAM,CAAC,IAAI,CAAC,KAAK;yBAC/B,YAAY;OAC9B;QACC,KAAK;QACP,GAAG,CAAA;8BACqB,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,WAAW,WAAW,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;OAC1F;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AACF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;mBACO,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;GACtD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACD,eAAe,EAChB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,OAAO,CAAC;IAC9B,OAAO,GAAG,CAAA;QACN,eAAe;4BACK,OAAO;qCACE,OAAO;;;;QAIpC,eAAe;QACjB,GAAG,CAAA;qBACY,aAAa;yCACO,OAAO;OACzC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AACF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,IAAI,EAAE,EAAE,CAAC,EAAE,EACZ,EACF,EACF,EACD,KAAK,EACL,eAAe,EAChB,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,KAAK;QAC9B,CAAC,CAAC,cAAc,OAAO,MAAM,KAAK,MAAM,CAAC,MAAM,OAAO,GAAG;QACzD,CAAC,CAAC,cAAc,OAAO,GAAG,CAAC;IAE7B,OAAO,GAAG,CAAA;kCACoB,OAAO;;8BAEX,kBAAkB;QACxC,eAAe;QACjB,GAAG,CAAA;8BACqB,OAAO;OAC9B;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AACF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACvF,OAAO,GAAG,CAAA;MACN,eAAe;iBACJ,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAa,CAAC;mBACjE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;GAC9D,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAClD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,IAAI,EAAE,EAAE,CAAC,EAAE,EACZ,EACF,EACF,EACD,KAAK,EACL,eAAe,EAChB,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,KAAK;QAC9B,CAAC,CAAC,cAAc,OAAO,MAAM,KAAK,MAAM,CAAC,MAAM,OAAO,GAAG;QACzD,CAAC,CAAC,cAAc,OAAO,GAAG,CAAC;IAE7B,OAAO,GAAG,CAAA;;8BAEgB,kBAAkB;QACxC,eAAe;QACjB,GAAG,CAAA;qCAC4B,OAAO;OACrC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AACF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAEpD,CAAC,EACF,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,IAAI,EAAE,EAAE,CAAC,EAAE,EACZ,EACF,EACF,EACD,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;MACN,MAAM;QACR,GAAG,CAAA;mCAC4B,CAAC,MAAM,OAAO;KAC5C;;;;;;;;;;GAUF,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC3D,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;iCACqB,OAAO;GACrC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,2BAA2B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5D,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAChD,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;iCACqB,OAAO;GACrC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Grid,\n Button,\n Card,\n defaultThemeProp,\n StyledIcon,\n ExpandCollapse,\n useDirection,\n Text,\n MetaList,\n SummaryItem,\n calculateFontSize,\n StyledText\n} from '@pega/cosmos-react-core';\nimport { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nexport const StyledExpandButton = styled(Button)(({\n theme: {\n base: { animation }\n }\n}) => {\n const { rtl } = useDirection();\n return css`\n margin: 0;\n\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n\n &:hover,\n &:active {\n text-decoration: none;\n }\n `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapse = styled(ExpandCollapse)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n padding-inline: calc(${spacing} * 2);\n `;\n});\n\nStyledExpandCollapse.defaultProps = defaultThemeProp;\n\nexport const StyledParentExpandCollapse = styled.div(() => {\n const assignmentHeight = '50dvh';\n return css`\n max-height: ${assignmentHeight};\n overflow-y: auto;\n `;\n});\n\nStyledParentExpandCollapse.defaultProps = defaultThemeProp;\n\nexport const StyledAssignmentItem: typeof Grid = styled(Grid)<{\n hideBorders?: boolean;\n}>(({\n theme: {\n base: { spacing, colors },\n components: {\n table: {\n body: { 'border-width': borderWidth }\n }\n }\n },\n hideBorders\n}) => {\n return css`\n padding-inline-end: calc(2 * ${spacing});\n padding-block: calc(0.5 * ${spacing});\n border-block-start: ${borderWidth} dashed ${colors.gray.light};\n ${hideBorders &&\n css`\n border-block-start: none;\n `};\n `;\n});\nStyledAssignmentItem.defaultProps = defaultThemeProp;\n\nexport const StyledProcessContainer = styled.div<{ depth?: number }>(\n ({\n depth,\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n }\n }) => {\n const paddingInlineStart = depth\n ? `calc(1.5 * ${spacing} * ${depth} + ${s} + ${spacing})`\n : `calc(1.5 * ${spacing})`;\n\n return css`\n overflow: hidden;\n padding-inline-start: ${paddingInlineStart};\n grid-row-start: 1;\n grid-row-end: 1;\n ${StyledText} {\n ${elipsisOverflow}\n padding-inline: calc(0.5 * ${spacing});\n }\n `;\n }\n);\nStyledProcessContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActionContainer = styled.div<{ isMediumOrAbove?: boolean }>(\n ({ isMediumOrAbove }) => {\n return css`\n grid-row-start: 1;\n grid-row-end: -1;\n ${isMediumOrAbove &&\n css`\n grid-column-start: 4;\n grid-column-end: -1;\n `}\n `;\n }\n);\nStyledActionContainer.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderContainer = styled.div<{ depth?: number }>(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'secondary-background': secondaryBackground }\n }\n },\n depth\n }) => {\n const paddingInlineStart = depth\n ? `calc(1.5 * ${spacing} * ${depth})`\n : `calc(1.5 * ${spacing})`;\n\n return css`\n padding-inline-start: ${paddingInlineStart};\n padding-block: calc(0.5 * ${spacing});\n background-color: ${secondaryBackground};\n `;\n }\n);\nStyledHeaderContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryItem = styled(SummaryItem)<{ indent: boolean }>(({\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n },\n indent\n}) => {\n return css`\n ${indent &&\n css`\n padding-inline-start: calc(${s} + ${spacing});\n `}\n `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledAssignments = styled(Card)<{ expanded?: boolean }>(({ theme, expanded }) => {\n return css`\n padding: calc(${theme.base.spacing} * 2);\n box-shadow: ${expanded ? theme.base.shadow.low : 'none'};\n &&& {\n > ${StyledCardHeader} {\n padding: 0;\n padding-block-end: ${expanded ? `calc(${theme.base.spacing} * 2)` : 0};\n }\n }\n `;\n});\n\nStyledAssignments.defaultProps = defaultThemeProp;\n\nexport const StyledAssignmentContainer = styled.div<{\n depth?: number;\n hideBorders?: boolean;\n}>(\n ({\n theme: {\n base: { colors, 'border-radius': borderRadius },\n components: {\n table: {\n body: { 'border-width': borderWidth }\n }\n }\n },\n depth,\n hideBorders\n }) => {\n return css`\n overflow: hidden;\n width: 100%;\n ${!depth &&\n css`\n border: ${borderWidth} solid ${colors.gray.light};\n border-radius: ${borderRadius};\n `}\n ${depth &&\n css`\n border-block-start: ${hideBorders ? 'none' : `${borderWidth} dashed ${colors.gray.light}`};\n `}\n `;\n }\n);\nStyledAssignmentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAssignmentText = styled(Text)(({ theme }) => {\n return css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\nStyledAssignmentText.defaultProps = defaultThemeProp;\n\nexport const StyledLinkContainer = styled.div<{ isMediumOrAbove?: boolean }>(\n ({\n theme: {\n base: { spacing }\n },\n isMediumOrAbove\n }) => {\n const caseNameWidth = '28rem';\n return css`\n ${elipsisOverflow};\n padding: calc(0.5 * ${spacing});\n padding-inline-end: calc(2 * ${spacing});\n & > a > span {\n width: 0;\n }\n ${isMediumOrAbove &&\n css`\n max-width: ${caseNameWidth};\n padding-inline-end: calc(0.5 * ${spacing});\n `}\n `;\n }\n);\nStyledLinkContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAssigneeContainer = styled.div<{ depth?: number; isMediumOrAbove?: boolean }>(\n ({\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n },\n depth,\n isMediumOrAbove\n }) => {\n const paddingInlineStart = depth\n ? `calc(1.5 * ${spacing} * ${depth} + ${s} + ${spacing})`\n : `calc(1.5 * ${spacing})`;\n\n return css`\n padding-block: calc(0.5 * ${spacing});\n overflow: hidden;\n padding-inline-start: ${paddingInlineStart};\n ${isMediumOrAbove &&\n css`\n padding: calc(0.5 * ${spacing});\n `};\n `;\n }\n);\nStyledAssigneeContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAssigneeText = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n ${elipsisOverflow}\n font-size: ${fontSizes[theme.components.text.secondary['font-size'] as FontSize]};\n font-weight: ${theme.components.text.secondary['font-weight']};\n `;\n});\nStyledAssigneeText.defaultProps = defaultThemeProp;\n\nexport const StyledUrgencyTextContainer = styled.div<{ depth?: number; isMediumOrAbove?: boolean }>(\n ({\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n },\n depth,\n isMediumOrAbove\n }) => {\n const paddingInlineStart = depth\n ? `calc(1.5 * ${spacing} * ${depth} + ${s} + ${spacing})`\n : `calc(1.5 * ${spacing})`;\n\n return css`\n white-space: nowrap;\n padding-inline-start: ${paddingInlineStart};\n ${isMediumOrAbove &&\n css`\n padding-inline: calc(0.5 * ${spacing});\n `}\n `;\n }\n);\nStyledUrgencyTextContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMetaListContainer = styled(MetaList)<{\n indent: boolean;\n}>(({\n theme: {\n base: { spacing },\n components: {\n icon: {\n size: { s }\n }\n }\n },\n indent\n}) => {\n return css`\n ${indent &&\n css`\n padding-inline-start: calc(${s} + ${spacing});\n `}\n width: 100%;\n flex-wrap: nowrap;\n & > li:nth-child(1) {\n flex-shrink: 1;\n }\n & > li:nth-child(2),\n & > li:nth-child(3) {\n flex-shrink: 0;\n }\n `;\n});\nStyledMetaListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMetaIdStatusContainer = styled(MetaList)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n padding-inline: calc(0.5 * ${spacing});\n `;\n});\nStyledMetaIdStatusContainer.defaultProps = defaultThemeProp;\n\nexport const StyledLabelContainer = styled(Text)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n padding-inline: calc(0.5 * ${spacing});\n `;\n});\nStyledLabelContainer.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;
|
|
1
|
+
{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAoB5F,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAMtF,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AAkCD,eAAO,MAAM,QAAQ;sCAamC,YAAY,KAAK,IAAI;;;CAkD5E,CAAC;;;;AAgEF,wBAAyD"}
|
|
@@ -2,7 +2,9 @@ import { createElement as _createElement } from "react";
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef, useEffect, useRef } from 'react';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
|
-
import {
|
|
5
|
+
import { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
|
|
6
|
+
import { SummaryItem, StyledSummaryListItem, Flex, defaultThemeProp, Button, useI18n, VisuallyHiddenText, useTestIds, useLiveLog, debounce, Actions, withTestIds, StyledPrimary, StyledText } from '@pega/cosmos-react-core';
|
|
7
|
+
import AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';
|
|
6
8
|
import { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';
|
|
7
9
|
const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
|
|
8
10
|
return css `
|
|
@@ -15,13 +17,22 @@ const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
|
|
|
15
17
|
padding-block-end: 0;
|
|
16
18
|
`}
|
|
17
19
|
}
|
|
18
|
-
|
|
19
|
-
${StyledBreadcrumbs} > ${StyledText} {
|
|
20
|
-
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
21
|
-
}
|
|
22
20
|
`;
|
|
23
21
|
});
|
|
24
22
|
StyledTaskList.defaultProps = defaultThemeProp;
|
|
23
|
+
const StyledSummaryItem = styled(SummaryItem)(({ hasProcessName }) => {
|
|
24
|
+
return hasProcessName
|
|
25
|
+
? css `
|
|
26
|
+
${StyledPrimary} {
|
|
27
|
+
display: contents;
|
|
28
|
+
|
|
29
|
+
& > ${StyledText} {
|
|
30
|
+
${elipsisOverflow};
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
`
|
|
34
|
+
: null;
|
|
35
|
+
});
|
|
25
36
|
export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processName, onOpen, content, addAnnouncement, additionalActions, ...restProps }) => {
|
|
26
37
|
const testIds = useTestIds(testId, getTaskItemTestIds);
|
|
27
38
|
const t = useI18n();
|
|
@@ -31,10 +42,7 @@ export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processNa
|
|
|
31
42
|
addAnnouncement?.({ name, status: 'removed' });
|
|
32
43
|
};
|
|
33
44
|
}, []);
|
|
34
|
-
const summary = (_jsx(
|
|
35
|
-
{ id: 'processName', primary: processName },
|
|
36
|
-
{ id: 'name', primary: name }
|
|
37
|
-
] })) : (name), secondary: meta, actions: content
|
|
45
|
+
const summary = (_jsx(StyledSummaryItem, { visual: avatar, hasProcessName: processName, primary: processName ? _jsx(AssignmentDetails, { name: name, processName: processName }) : name, secondary: meta, actions: content
|
|
38
46
|
? additionalActions && _jsx(Actions, { menuAt: 1, items: additionalActions })
|
|
39
47
|
: onOpen && (_jsxs(Button, { "data-testid": testIds.openTask, variant: 'primary', onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: `-${processName ?? ''} ${name}` })] })) }));
|
|
40
48
|
return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: content ? undefined : StyledSummaryListItem, forwardedAs: content ? 'div' : 'li', children: [summary, content] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,WAAW,EACX,qBAAqB,EACrB,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAgC1E,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;QAEJ,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;6CACgC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;WACnE;QACH,CAAC,CAAC,GAAG,CAAA;;WAEF;;;MAGL,iBAAiB,MAAM,UAAU;qBAClB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;GAExD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,WAAW,CACjC,CAAC,EACC,MAAM,EACN,EAAE,EACF,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,WAAW,EACX,MAAM,EACN,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,GAAG,SAAS,EAC+D,EAAE,EAAE;IAC/E,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACV,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,CACd,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,OAAO,EACL,WAAW,CAAC,CAAC,CAAC,CACZ,KAAC,WAAW,IACV,IAAI,EAAE;gBACJ,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE;gBAC3C,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;aAC9B,GACD,CACH,CAAC,CAAC,CAAC,CACF,IAAI,CACL,EAEH,SAAS,EAAE,IAAI,EACf,OAAO,EACL,OAAO;YACL,CAAC,CAAC,iBAAiB,IAAI,KAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,iBAAiB,GAAI;YACvE,CAAC,CAAC,MAAM,IAAI,CACR,MAAC,MAAM,mBACQ,OAAO,CAAC,QAAQ,EAC7B,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,yBAAO,CAAC,CAAC,IAAI,CAAC,GAAQ,EACtB,KAAC,kBAAkB,cAAE,IAAI,WAAW,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IACnE,CACV,GAEP,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,EAC/C,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,aAElC,OAAO,EACP,OAAO,IACH,CACR,CAAC;AACJ,CAAC,EACD,kBAAkB,CACnB,CAAC;AAEF,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAkC,EACpE,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,aAAa,GAAG,MAAM,CAAiB,EAAE,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAEvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,IAAI,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACpC,IAAI,UAAU,GAAG,CAAC,CAAC;YACnB,IAAI,YAAY,GAAG,CAAC,CAAC;YACrB,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;oBAC7B,YAAY,IAAI,CAAC,CAAC;iBACnB;qBAAM;oBACL,UAAU,IAAI,CAAC,CAAC;iBACjB;YACH,CAAC,CAAC,CAAC;YACH,IAAI,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACtF,IAAI,YAAY,EAAE;gBAChB,OAAO,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;aACxE;YAED,IAAI,OAAO,CAAC,OAAO,EAAE;gBACnB,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;aAC7B;YAED,aAAa,CAAC,OAAO,GAAG,EAAE,CAAC;SAC5B;IACH,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,eAAe,GAAG,CAAC,YAA0B,EAAE,EAAE;QACrD,aAAa,CAAC,OAAO,GAAG,CAAC,GAAG,aAAa,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QACjE,iBAAiB,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OAAK,IAAI,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CACvE,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\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 > li:last-child {\n ${hasFooter\n ? css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `\n : css`\n padding-block-end: 0;\n `}\n }\n\n ${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: 2 }}\n item={{ grow: 1 }}\n as={content ? undefined : StyledSummaryListItem}\n forwardedAs={content ? 'div' : 'li'}\n >\n {summary}\n {content}\n </Flex>\n );\n },\n getTaskItemTestIds\n);\n\nconst TaskList: FunctionComponent<TaskListProps & ForwardProps> = forwardRef(function TaskList(\n { testId, items, hasFooter = false }: PropsWithoutRef<TaskListProps>,\n ref\n) {\n const testIds = useTestIds(testId, getTaskListTestIds);\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n const announcements = useRef<Announcement[]>([]);\n const mounted = useRef(false);\n\n useEffect(() => {\n mounted.current = true;\n\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const debouncedAnnounce = debounce(() => {\n if (announcements.current.length > 0) {\n let tasksAdded = 0;\n let tasksRemoved = 0;\n announcements.current.forEach(item => {\n if (item.status === 'removed') {\n tasksRemoved += 1;\n } else {\n tasksAdded += 1;\n }\n });\n let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n if (tasksRemoved) {\n message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n }\n\n if (mounted.current) {\n announcePolite({ message });\n }\n\n announcements.current = [];\n }\n }, 2000);\n\n const addAnnouncement = (announcement: Announcement) => {\n announcements.current = [...announcements.current, announcement];\n debouncedAnnounce();\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n container={{ direction: 'column' }}\n as={StyledTaskList}\n hasFooter={hasFooter}\n ref={ref}\n >\n {items.map(item => (\n <TaskItem {...item} addAnnouncement={addAnnouncement} key={item.id} />\n ))}\n </Flex>\n );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,EACL,WAAW,EACX,qBAAqB,EACrB,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,WAAW,EACX,aAAa,EACb,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,iBAAiB,MAAM,6CAA6C,CAAC;AAE5E,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAgC1E,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;QAEJ,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;6CACgC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;WACnE;QACH,CAAC,CAAC,GAAG,CAAA;;WAEF;;GAER,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAA+B,CAAC,EAC3E,cAAc,EACf,EAAE,EAAE;IACH,OAAO,cAAc;QACnB,CAAC,CAAC,GAAG,CAAA;UACC,aAAa;;;gBAGP,UAAU;cACZ,eAAe;;;OAGtB;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,WAAW,CACjC,CAAC,EACC,MAAM,EACN,EAAE,EACF,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,WAAW,EACX,MAAM,EACN,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,GAAG,SAAS,EAC+D,EAAE,EAAE;IAC/E,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACV,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,CACd,KAAC,iBAAiB,IAChB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,WAAW,EAC3B,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,KAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI,EACzF,SAAS,EAAE,IAAI,EACf,OAAO,EACL,OAAO;YACL,CAAC,CAAC,iBAAiB,IAAI,KAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,iBAAiB,GAAI;YACvE,CAAC,CAAC,MAAM,IAAI,CACR,MAAC,MAAM,mBACQ,OAAO,CAAC,QAAQ,EAC7B,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,yBAAO,CAAC,CAAC,IAAI,CAAC,GAAQ,EACtB,KAAC,kBAAkB,cAAE,IAAI,WAAW,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IACnE,CACV,GAEP,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,EAC/C,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,aAElC,OAAO,EACP,OAAO,IACH,CACR,CAAC;AACJ,CAAC,EACD,kBAAkB,CACnB,CAAC;AAEF,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAkC,EACpE,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,aAAa,GAAG,MAAM,CAAiB,EAAE,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAEvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,IAAI,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACpC,IAAI,UAAU,GAAG,CAAC,CAAC;YACnB,IAAI,YAAY,GAAG,CAAC,CAAC;YACrB,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;oBAC7B,YAAY,IAAI,CAAC,CAAC;iBACnB;qBAAM;oBACL,UAAU,IAAI,CAAC,CAAC;iBACjB;YACH,CAAC,CAAC,CAAC;YACH,IAAI,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACtF,IAAI,YAAY,EAAE;gBAChB,OAAO,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;aACxE;YAED,IAAI,OAAO,CAAC,OAAO,EAAE;gBACnB,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;aAC7B;YAED,aAAa,CAAC,OAAO,GAAG,EAAE,CAAC;SAC5B;IACH,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,eAAe,GAAG,CAAC,YAA0B,EAAE,EAAE;QACrD,aAAa,CAAC,OAAO,GAAG,CAAC,GAAG,aAAa,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QACjE,iBAAiB,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OAAK,IAAI,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CACvE,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport {\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp,\n Button,\n useI18n,\n VisuallyHiddenText,\n useTestIds,\n useLiveLog,\n debounce,\n Actions,\n withTestIds,\n StyledPrimary,\n StyledText\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, TestIdProp, ActionsProps } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nexport interface TaskItemProps extends TestIdProp {\n id: string;\n /** Name of the task displayed in the list. */\n name: string;\n /** Name of the process for the task. */\n processName?: string;\n /** Avatar element to represent the task's assignee. */\n avatar?: ReactNode;\n /** MetaList element with info related to the task. */\n meta?: ReactNode;\n /** Provide a callback to render a button for a task. */\n onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n /** Content for the task when open. */\n content?: ReactNode;\n /** An array of actions to add to open task. */\n additionalActions?: ActionsProps['items'];\n}\n\nexport interface TaskListProps extends TestIdProp {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n name: string;\n status: 'removed' | 'added';\n}\n\nconst StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n return css`\n > li:last-child {\n ${hasFooter\n ? css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `\n : css`\n padding-block-end: 0;\n `}\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n hasProcessName\n}) => {\n return hasProcessName\n ? css`\n ${StyledPrimary} {\n display: contents;\n\n & > ${StyledText} {\n ${elipsisOverflow};\n }\n }\n `\n : null;\n});\n\nexport const TaskItem = withTestIds(\n ({\n testId,\n id,\n name,\n avatar,\n meta,\n processName,\n onOpen,\n content,\n addAnnouncement,\n additionalActions,\n ...restProps\n }: TaskItemProps & { addAnnouncement?: (announcement: Announcement) => void }) => {\n const testIds = useTestIds(testId, getTaskItemTestIds);\n const t = useI18n();\n\n useEffect(() => {\n addAnnouncement?.({ name, status: 'added' });\n\n return () => {\n addAnnouncement?.({ name, status: 'removed' });\n };\n }, []);\n\n const summary = (\n <StyledSummaryItem\n visual={avatar}\n hasProcessName={processName}\n primary={processName ? <AssignmentDetails name={name} processName={processName} /> : name}\n secondary={meta}\n actions={\n content\n ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n : onOpen && (\n <Button\n data-testid={testIds.openTask}\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n <span>{t('go')}</span>\n <VisuallyHiddenText>{`-${processName ?? ''} ${name}`}</VisuallyHiddenText>\n </Button>\n )\n }\n />\n );\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n as={content ? undefined : StyledSummaryListItem}\n forwardedAs={content ? 'div' : 'li'}\n >\n {summary}\n {content}\n </Flex>\n );\n },\n getTaskItemTestIds\n);\n\nconst TaskList: FunctionComponent<TaskListProps & ForwardProps> = forwardRef(function TaskList(\n { testId, items, hasFooter = false }: PropsWithoutRef<TaskListProps>,\n ref\n) {\n const testIds = useTestIds(testId, getTaskListTestIds);\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n const announcements = useRef<Announcement[]>([]);\n const mounted = useRef(false);\n\n useEffect(() => {\n mounted.current = true;\n\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const debouncedAnnounce = debounce(() => {\n if (announcements.current.length > 0) {\n let tasksAdded = 0;\n let tasksRemoved = 0;\n announcements.current.forEach(item => {\n if (item.status === 'removed') {\n tasksRemoved += 1;\n } else {\n tasksAdded += 1;\n }\n });\n let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n if (tasksRemoved) {\n message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n }\n\n if (mounted.current) {\n announcePolite({ message });\n }\n\n announcements.current = [];\n }\n }, 2000);\n\n const addAnnouncement = (announcement: Announcement) => {\n announcements.current = [...announcements.current, announcement];\n debouncedAnnounce();\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n container={{ direction: 'column' }}\n as={StyledTaskList}\n hasFooter={hasFooter}\n ref={ref}\n >\n {items.map(item => (\n <TaskItem {...item} addAnnouncement={addAnnouncement} key={item.id} />\n ))}\n </Flex>\n );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "7.0.0-build.33.
|
|
3
|
+
"version": "7.0.0-build.33.3",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"build": "tsc -b tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@pega/cosmos-react-core": "7.0.0-build.33.
|
|
23
|
-
"@pega/cosmos-react-rte": "7.0.0-build.33.
|
|
22
|
+
"@pega/cosmos-react-core": "7.0.0-build.33.3",
|
|
23
|
+
"@pega/cosmos-react-rte": "7.0.0-build.33.3",
|
|
24
24
|
"@types/react": "^17.0.62",
|
|
25
25
|
"@types/react-dom": "^17.0.20",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|