@pega/cosmos-react-work 9.0.0-build.29.18 → 9.0.0-build.29.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -26,6 +26,11 @@ export interface TasksProps extends NoChildrenProp, TestIdProp {
|
|
|
26
26
|
* Whether to fit Tasks widget in the parent element.
|
|
27
27
|
*/
|
|
28
28
|
fitToParent?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Callback invoked with the calculated item limit based on available height.
|
|
31
|
+
* Only fires when fitToParent is true.
|
|
32
|
+
*/
|
|
33
|
+
onItemLimitChange?: (limit: number) => void;
|
|
29
34
|
}
|
|
30
35
|
export declare const StyledTasks: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@pega/cosmos-react-core").CardProps, "ref"> & import("react").RefAttributes<HTMLElement> & ForwardProps, "ref"> & {
|
|
31
36
|
ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAqB5C,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAG9G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;IACtF,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,WAAW;;;eAA6B,OAAO;kBAAgB,OAAO;kLAiBjF,CAAC;;;;AAoIH,wBAAmD"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useMemo, useRef } from 'react';
|
|
2
|
+
import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds, Progress, getActiveElement } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds, Progress, getActiveElement, useElement } from '@pega/cosmos-react-core';
|
|
5
|
+
import { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';
|
|
5
6
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
6
7
|
import TaskList, { TaskItem } from './TaskList';
|
|
7
8
|
import { getTasksTestIds } from './Tasks.test-ids';
|
|
@@ -28,13 +29,14 @@ const StyledCardContent = styled(CardContent) `
|
|
|
28
29
|
`;
|
|
29
30
|
StyledTasks.defaultProps = defaultThemeProp;
|
|
30
31
|
const Tasks = (props) => {
|
|
31
|
-
const { testId, items = [], name, avatar, viewSelector, count = items.length, search, loadingMore = false, fitToParent = false, onExpandToggle, ...restProps } = props;
|
|
32
|
+
const { testId, items = [], name, avatar, viewSelector, count = items.length, search, loadingMore = false, fitToParent = false, onExpandToggle, onItemLimitChange, ...restProps } = props;
|
|
32
33
|
const testIds = useTestIds(testId, getTasksTestIds);
|
|
33
34
|
const openItem = items.find(item => item.content);
|
|
34
35
|
const t = useI18n();
|
|
35
36
|
const toggleButtonRef = useRef(null);
|
|
36
37
|
const progressRef = useRef(null);
|
|
37
|
-
const
|
|
38
|
+
const [containerEl, setContainerEl] = useElement();
|
|
39
|
+
const containerSize = useMonitoredSize(containerEl, 0);
|
|
38
40
|
const hasFooter = !!(!openItem && onExpandToggle && count > 0);
|
|
39
41
|
const TaskItems = useMemo(() => {
|
|
40
42
|
return openItem ? (_jsx(TaskItem, { ...openItem, headingTag: 'h2' })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
|
|
@@ -44,7 +46,29 @@ const Tasks = (props) => {
|
|
|
44
46
|
toggleButtonRef?.current.focus();
|
|
45
47
|
}
|
|
46
48
|
}, [loadingMore]);
|
|
47
|
-
|
|
49
|
+
// Measure available height and calculate item limit when fitToParent is enabled
|
|
50
|
+
useLayoutEffect(() => {
|
|
51
|
+
if (!fitToParent || !containerEl || !onItemLimitChange || openItem)
|
|
52
|
+
return;
|
|
53
|
+
const container = containerEl;
|
|
54
|
+
const containerHeight = container.getBoundingClientRect().height;
|
|
55
|
+
if (containerHeight === 0)
|
|
56
|
+
return;
|
|
57
|
+
const header = container.querySelector('header');
|
|
58
|
+
const footer = container.querySelector('footer');
|
|
59
|
+
const headerHeight = header ? header.getBoundingClientRect().height : 0;
|
|
60
|
+
const footerHeight = footer ? footer.getBoundingClientRect().height : 0;
|
|
61
|
+
const listItems = container.querySelectorAll('ul > li');
|
|
62
|
+
if (listItems.length === 0)
|
|
63
|
+
return;
|
|
64
|
+
const itemHeight = listItems[0].getBoundingClientRect().height;
|
|
65
|
+
if (itemHeight === 0)
|
|
66
|
+
return;
|
|
67
|
+
const availableHeight = containerHeight - headerHeight - footerHeight;
|
|
68
|
+
const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));
|
|
69
|
+
onItemLimitChange(newLimit);
|
|
70
|
+
}, [fitToParent, items, onItemLimitChange, openItem, containerSize]);
|
|
71
|
+
return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, "data-focusable-form-container": '', ref: setContainerEl, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), fitToParent ? (_jsx(StyledCardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })) : (_jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })), _jsx(Progress, { placement: 'block', ref: progressRef, visible: loadingMore, focusOnVisible: true }), hasFooter && !loadingMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
|
|
48
72
|
onExpandToggle?.();
|
|
49
73
|
if (!!count && count <= items.length) {
|
|
50
74
|
const { currentTarget } = e;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Button,\n useI18n,\n defaultThemeProp,\n ListToolbar,\n EmptyState,\n useTestIds,\n Avatar,\n withTestIds,\n Progress,\n getActiveElement\n} from '@pega/cosmos-react-core';\nimport type {\n AvatarProps,\n ForwardProps,\n ListToolbarProps,\n NoChildrenProp,\n SearchInputProps,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. */\n items: TaskItemProps[];\n /** Heading text to render at the top of the list. */\n name: ListToolbarProps['name'];\n /** A visual to accompany the header text. */\n avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;\n /** Definition of view selection. */\n viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect' | 'filterInputProps'>;\n /** Integer representing the total count of tasks. */\n count?: number;\n /** Opt-in search configuration. */\n search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;\n /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */\n onExpandToggle?: () => void;\n /**\n * Flag indicating more items are being fetched\n * @default false\n */\n loadingMore?: boolean;\n /**\n * Whether to fit Tasks widget in the parent element.\n */\n fitToParent?: boolean;\n}\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n theme,\n openItem,\n fitToParent\n}) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n `\n : css`\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n overflow: auto;\n flex-grow: 1;\n flex-basis: 0;\n min-block-size: 0;\n min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n testId,\n items = [],\n name,\n avatar,\n viewSelector,\n count = items.length,\n search,\n loadingMore = false,\n fitToParent = false,\n onExpandToggle,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTasksTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const progressRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const hasFooter = !!(!openItem && onExpandToggle && count > 0);\n\n const TaskItems = useMemo(() => {\n return openItem ? (\n <TaskItem {...openItem} headingTag='h2' />\n ) : (\n <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n );\n }, [items, openItem]);\n\n useEffect(() => {\n if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {\n toggleButtonRef?.current.focus();\n }\n }, [loadingMore]);\n\n return (\n <StyledTasks\n data-testid={testIds.root}\n {...restProps}\n openItem={!!openItem}\n fitToParent={fitToParent}\n data-app-region\n data-focusable-form-container=''\n ref={containerRef}\n >\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {avatar && <Avatar {...avatar} />}\n <ListToolbar\n name={name}\n headingTag='h2'\n viewSelector={viewSelector}\n count={{ total: count }}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n\n {fitToParent ? (\n <StyledCardContent>{items.length > 0 ? TaskItems : <EmptyState />}</StyledCardContent>\n ) : (\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n )}\n\n <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n {hasFooter && !loadingMore && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n ref={toggleButtonRef}\n >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Button,\n useI18n,\n defaultThemeProp,\n ListToolbar,\n EmptyState,\n useTestIds,\n Avatar,\n withTestIds,\n Progress,\n getActiveElement,\n useElement\n} from '@pega/cosmos-react-core';\nimport { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';\nimport type {\n AvatarProps,\n ForwardProps,\n ListToolbarProps,\n NoChildrenProp,\n SearchInputProps,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. */\n items: TaskItemProps[];\n /** Heading text to render at the top of the list. */\n name: ListToolbarProps['name'];\n /** A visual to accompany the header text. */\n avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;\n /** Definition of view selection. */\n viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect' | 'filterInputProps'>;\n /** Integer representing the total count of tasks. */\n count?: number;\n /** Opt-in search configuration. */\n search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;\n /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */\n onExpandToggle?: () => void;\n /**\n * Flag indicating more items are being fetched\n * @default false\n */\n loadingMore?: boolean;\n /**\n * Whether to fit Tasks widget in the parent element.\n */\n fitToParent?: boolean;\n /**\n * Callback invoked with the calculated item limit based on available height.\n * Only fires when fitToParent is true.\n */\n onItemLimitChange?: (limit: number) => void;\n}\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n theme,\n openItem,\n fitToParent\n}) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n `\n : css`\n min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n overflow: auto;\n flex-grow: 1;\n flex-basis: 0;\n min-block-size: 0;\n min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n testId,\n items = [],\n name,\n avatar,\n viewSelector,\n count = items.length,\n search,\n loadingMore = false,\n fitToParent = false,\n onExpandToggle,\n onItemLimitChange,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTasksTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const progressRef = useRef<HTMLDivElement>(null);\n const [containerEl, setContainerEl] = useElement<HTMLDivElement>();\n const containerSize = useMonitoredSize(containerEl, 0);\n\n const hasFooter = !!(!openItem && onExpandToggle && count > 0);\n\n const TaskItems = useMemo(() => {\n return openItem ? (\n <TaskItem {...openItem} headingTag='h2' />\n ) : (\n <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n );\n }, [items, openItem]);\n\n useEffect(() => {\n if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {\n toggleButtonRef?.current.focus();\n }\n }, [loadingMore]);\n\n // Measure available height and calculate item limit when fitToParent is enabled\n useLayoutEffect(() => {\n if (!fitToParent || !containerEl || !onItemLimitChange || openItem) return;\n\n const container = containerEl;\n const containerHeight = container.getBoundingClientRect().height;\n if (containerHeight === 0) return;\n\n const header = container.querySelector('header');\n const footer = container.querySelector('footer');\n const headerHeight = header ? header.getBoundingClientRect().height : 0;\n const footerHeight = footer ? footer.getBoundingClientRect().height : 0;\n\n const listItems = container.querySelectorAll('ul > li');\n if (listItems.length === 0) return;\n\n const itemHeight = listItems[0].getBoundingClientRect().height;\n if (itemHeight === 0) return;\n\n const availableHeight = containerHeight - headerHeight - footerHeight;\n const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));\n\n onItemLimitChange(newLimit);\n }, [fitToParent, items, onItemLimitChange, openItem, containerSize]);\n\n return (\n <StyledTasks\n data-testid={testIds.root}\n {...restProps}\n openItem={!!openItem}\n fitToParent={fitToParent}\n data-app-region\n data-focusable-form-container=''\n ref={setContainerEl}\n >\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {avatar && <Avatar {...avatar} />}\n <ListToolbar\n name={name}\n headingTag='h2'\n viewSelector={viewSelector}\n count={{ total: count }}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n\n {fitToParent ? (\n <StyledCardContent>{items.length > 0 ? TaskItems : <EmptyState />}</StyledCardContent>\n ) : (\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n )}\n\n <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n {hasFooter && !loadingMore && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n ref={toggleButtonRef}\n >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "9.0.0-build.29.
|
|
3
|
+
"version": "9.0.0-build.29.19",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "9.0.0-build.29.
|
|
18
|
-
"@pega/cosmos-react-rte": "9.0.0-build.29.
|
|
17
|
+
"@pega/cosmos-react-core": "9.0.0-build.29.19",
|
|
18
|
+
"@pega/cosmos-react-rte": "9.0.0-build.29.19",
|
|
19
19
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
20
20
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
21
21
|
"polished": "^4.1.0",
|