npm - @pega/cosmos-react-work - Versions diffs - 8.0.0-build.4.3 → 8.0.0-build.40.0 - Mend

@pega/cosmos-react-work 8.0.0-build.4.3 → 8.0.0-build.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (323) hide show

package/lib/components/Tasks/Tasks.js CHANGED Viewed

@@ -5,20 +5,30 @@ import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThem
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import TaskList, { TaskItem } from './TaskList';
 import { getTasksTestIds } from './Tasks.test-ids';
-export const StyledTasks = styled(Card)(({ theme, openItem }) => {
+export const StyledTasks = styled(Card)(({ theme, openItem, fitToParent }) => {
     return openItem
         ? css `
         box-shadow: ${theme.base.shadow.low};
+        min-block-size: ${fitToParent ? '100%' : 'auto'};
       `
         : css `
+        min-block-size: ${fitToParent ? '100%' : 'auto'};
         ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {
           padding-block-end: calc(${theme.base.spacing} / 2);
         }
       `;
 });
+const StyledCardContent = styled(CardContent) `
+  overflow: auto;
+  flex-grow: 1;
+  flex-basis: 0;
+  min-block-size: 0;
+  min-inline-size: 0;
+`;
 StyledTasks.defaultProps = defaultThemeProp;
 const Tasks = (props) => {
-    const { testId, items = [], name, avatar, viewSelector, count = items.length, search, loadingMore = false, onExpandToggle, ...restProps } = props;
+    const { testId, items = [], name, avatar, viewSelector, count = items.length, search, loadingMore = false, fitToParent = false, onExpandToggle, ...restProps } = props;
     const testIds = useTestIds(testId, getTasksTestIds);
     const openItem = items.find(item => item.content);
     const t = useI18n();
@@ -27,14 +37,14 @@ const Tasks = (props) => {
     const containerRef = useRef(null);
     const hasFooter = !!(!openItem && onExpandToggle && count > 0);
     const TaskItems = useMemo(() => {
-        return openItem ? (_jsx(TaskItem, { ...openItem })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
+        return openItem ? (_jsx(TaskItem, { ...openItem, headingTag: 'h2' })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
     }, [items, openItem]);
     useEffect(() => {
         if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {
             toggleButtonRef?.current.focus();
         }
     }, [loadingMore]);
-    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, "data-app-region": true, ref: containerRef, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), _jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) }), _jsx(Progress, { placement: 'block', ref: progressRef, visible: loadingMore, focusOnVisible: true }), hasFooter && !loadingMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
+    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, ref: containerRef, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), 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) => {
                         onExpandToggle?.();
                         if (!!count && count <= items.length) {
                             const { currentTarget } = e;

package/lib/components/Tasks/Tasks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,UAAU,EACV,MAAM,EACN,WAAW,EACX,QAAQ,EACR,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AASjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAG1F,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;~~AAwBnD~~,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,~~CAAyB~~,CAAC,~~EAAE~~,KAAK,~~EAAE~~,QAAQ,~~EAAE~~,EAAE,EAAE;~~IACtF~~,OAAO,QAAQ;QACb,CAAC,CAAC,GAAG,CAAA;sBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;~~OACpC~~;QACH,CAAC,CAAC,GAAG,CAAA;~~UACC~~,gBAAgB,cAAc,gBAAgB;oCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;;OAE/C,CAAC;AACR,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,CAAC,KAAiB,EAAE,EAAE;IACjE,MAAM,EACJ,MAAM,EACN,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,KAAK,GAAG,KAAK,CAAC,MAAM,EACpB,MAAM,EACN,WAAW,GAAG,KAAK,EACnB,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,cAAc,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC;IAE/D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,KAAC,QAAQ,OAAK,QAAQ,~~GAAI~~,~~CAC3B~~,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,IAAI,GAAI,CACvE,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,IAAI,gBAAgB,EAAE,KAAK,WAAW,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,EAAE;~~YACzF~~,eAAe,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC;~~SAClC~~;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,MAAC,WAAW,mBACG,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,QAAQ,EAAE,CAAC,CAAC,QAAQ,~~2BAEpB~~,GAAG,EAAE,YAAY,aAEhB,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EACjC,KAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,UAAU,EAAC,IAAI,EACf,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EACvB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GACjB,IACS,CACd,~~EAED~~,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAe,~~EAE1E~~,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,GAAG,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,SAAG,EACpF,SAAS,IAAI,CAAC,WAAW,IAAI,CAC5B,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,YAC1B,KAAC,MAAM,mBACQ,OAAO,CAAC,YAAY,EACjC,OAAO,EAAC,MAAM,gBACF,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAC,EACrF,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,cAAc,EAAE,EAAE,CAAC;wBACnB,IAAI,CAAC,CAAC,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;~~4BACpC~~,MAAM,EAAE,aAAa,EAAE,GAAG,CAAC,CAAC;4BAC5B,qBAAqB,CAAC,GAAG,EAAE;gCACzB,IAAI,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC;oCAAE,aAAa,CAAC,cAAc,EAAE,CAAC;4BACpF,CAAC,CAAC,CAAC;~~yBACJ~~;oBACH,CAAC,EACD,GAAG,EAAE,eAAe,YAEnB,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GACxD,GACE,CACd,IACW,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC","sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Button,\n useI18n,\n defaultThemeProp,\n ListToolbar,\n EmptyState,\n useTestIds,\n Avatar,\n withTestIds,\n Progress,\n getActiveElement\n} from '@pega/cosmos-react-core';\nimport type {\n AvatarProps,\n ForwardProps,\n ListToolbarProps,\n NoChildrenProp,\n SearchInputProps,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. /\n items: TaskItemProps[];\n /* Heading text to render at the top of the list. /\n name: ListToolbarProps['name'];\n /* A visual to accompany the header text. /\n avatar?: Pick<AvatarProps, 'name' \| 'icon' \| 'imageSrc' \| 'status'>;\n /* Definition of view selection. /\n viewSelector?: Pick<ViewSelectorProps, 'views' \| 'onViewSelect'>;\n /* Integer representing the total count of tasks. /\n count?: number;\n /* Opt-in search configuration. /\n search?: Pick<SearchInputProps, 'value' \| 'onSearchChange'>;\n /* Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. /\n onExpandToggle?: () => void;\n /\n Flag indicating more items are being fetched\n * @default false\n */\n loadingMore?: boolean;\n}\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : css`\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n testId,\n items = [],\n name,\n avatar,\n viewSelector,\n count = items.length,\n search,\n loadingMore = false,\n onExpandToggle,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTasksTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const progressRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const hasFooter = !!(!openItem && onExpandToggle && count > 0);\n\n const TaskItems = useMemo(() => {\n return openItem ? (\n <TaskItem {...openItem} />\n ) : (\n <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n );\n }, [items, openItem]);\n\n useEffect(() => {\n if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {\n toggleButtonRef?.current.focus();\n }\n }, [loadingMore]);\n\n return (\n <StyledTasks\n data-testid={testIds.root}\n {...restProps}\n openItem={!!openItem}\n data-app-region\n ref={containerRef}\n >\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {avatar && <Avatar {...avatar} />}\n <ListToolbar\n name={name}\n headingTag='h2'\n viewSelector={viewSelector}\n count={{ total: count }}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n\n <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n {hasFooter && !loadingMore && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n ref={toggleButtonRef}\n >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}
1	+ {"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Button,\n useI18n,\n defaultThemeProp,\n ListToolbar,\n EmptyState,\n useTestIds,\n Avatar,\n withTestIds,\n Progress,\n getActiveElement\n} from '@pega/cosmos-react-core';\nimport type {\n AvatarProps,\n ForwardProps,\n ListToolbarProps,\n NoChildrenProp,\n SearchInputProps,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. /\n items: TaskItemProps[];\n /* Heading text to render at the top of the list. /\n name: ListToolbarProps['name'];\n /* A visual to accompany the header text. /\n avatar?: Pick<AvatarProps, 'name' \| 'icon' \| 'imageSrc' \| 'status'>;\n /* Definition of view selection. /\n viewSelector?: Pick<ViewSelectorProps, 'views' \| 'onViewSelect'>;\n /* Integer representing the total count of tasks. /\n count?: number;\n /* Opt-in search configuration. /\n search?: Pick<SearchInputProps, 'value' \| 'onSearchChange'>;\n /* Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. /\n onExpandToggle?: () => void;\n /\n Flag indicating more items are being fetched\n * @default false\n /\n loadingMore?: boolean;\n /\n 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 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"]}

package/lib/components/Tasks/Tasks.test-ids.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export declare const getTasksTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["show-more-less"]>;
-export declare const getTaskListTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
-export declare const getTaskItemTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["open-task"]>;
+export declare const getTasksTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["show-more-less"]>;
+export declare const getTaskListTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+export declare const getTaskItemTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["open-task"]>;
 //# sourceMappingURL=Tasks.test-ids.d.ts.map

package/lib/components/Tasks/Tasks.test-ids.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tasks.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,~~0HAAsD~~,CAAC;AAEnF,eAAO,MAAM,kBAAkB,~~0GAA0C~~,CAAC;AAE1E,eAAO,MAAM,kBAAkB,~~qHAAqD~~,CAAC"}
1	+ {"version":3,"file":"Tasks.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,uJAAsD,CAAC;AAEnF,eAAO,MAAM,kBAAkB,uIAA0C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,kJAAqD,CAAC"}

package/lib/components/Timeline/Timeline.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type TimelineProps from './Timeline.types';
-declare const Timeline: FunctionComponent<TimelineProps & ForwardProps>;
+/** @deprecated */
+declare const Timeline: ForwardRefForwardPropsComponent<TimelineProps>;
 export default Timeline;
 //# sourceMappingURL=Timeline.d.ts.map

package/lib/components/Timeline/Timeline.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,~~iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAShE,OAAO,KAAK,~~EAAE,~~YAAY,EAAE,~~MAAM,yBAAyB,CAAC;~~AAG5D~~,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAUlD,QAAA,MAAM,QAAQ,EAAE,~~iBAAiB,~~CAAC,aAAa,~~GAAG~~,~~YAAY,CA+E5D,~~CAAC;AAEH,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAG/E,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAUlD,kBAAkB;AAClB,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAmF3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/Timeline/Timeline.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { Progress, useConsolidatedRef, useItemIntersection, DateTimeDisplay, Gri
 import { groupByActivity } from './utils';
 import { StyledDate, StyledTimeline, StyledLoadingCell, StyledTimelineListItem, StyledTimelineList } from './Timeline.styles';
 import TimelineItem from './TimelineItem';
+/** @deprecated */
 const Timeline = forwardRef(function Timeline({ activity, currentTime, groupBy = 'date', loading, loadMore, ...restProps }, ref) {
     const listRef = useConsolidatedRef(ref);
     useItemIntersection(listRef, activity.length - 1, () => {
@@ -15,8 +16,14 @@ const Timeline = forwardRef(function Timeline({ activity, currentTime, groupBy =
             colGap: 0.75,
             alignItems: 'start'
         }, sm: { container: { cols: 'auto auto  1fr', colGap: 0.25 } }, as: StyledTimeline, ref: listRef, children: [groupBy === 'none'
-                ? activity.map((item, index) => (_jsx(TimelineItem, { item: item, timeFormat: 'datetime', prevItemDate: activity[index - 1]?.date, nextItemDate: activity[index + 1]?.date, currentTime: currentTime }, item.id)))
-                : groupByActivity(activity, groupBy).map(groupedData => (_jsxs(Grid, { item: { colStartEnd: '1/-1' }, as: StyledTimelineListItem, children: [_jsx(DateTimeDisplay, { as: StyledDate, variant: groupBy, format: 'long', value: groupedData[0].date }), _jsx(StyledTimelineList, { children: groupedData.map((item, index) => (_jsx(TimelineItem, { item: item, timeFormat: groupBy === 'date' ? 'time' : 'datetime', prevItemDate: groupedData[index - 1]?.date, nextItemDate: groupedData[index + 1]?.date, currentTime: currentTime }, item.id))) })] }, groupedData[0].id))), loading && (_jsx(StyledTimelineListItem, { children: _jsx(StyledLoadingCell, { children: _jsx(Progress, { placement: 'local' }) }) }))] }));
+                ? activity.map((item, index) => (_jsx(TimelineItem, { item: item, prevItemDate: activity[index - 1]?.date, nextItemDate: activity[index + 1]?.date, currentTime: currentTime }, item.id)))
+                : groupByActivity(activity, groupBy).map(groupedData => (_jsxs(Grid, { item: { colStartEnd: '1/-1' }, as: StyledTimelineListItem, children: [_jsx(DateTimeDisplay, { as: StyledDate, variant: groupBy, format: 'long', value: groupedData[0].date }), _jsx(StyledTimelineList, { children: groupedData.map((item, index) => (_jsx(TimelineItem, { item: {
+                                    ...item,
+                                    ...(groupBy === 'date' &&
+                                        (!item.dateVariant || item.dateVariant === 'datetime') && {
+                                        dateVariant: 'time'
+                                    })
+                                }, prevItemDate: groupedData[index - 1]?.date, nextItemDate: groupedData[index + 1]?.date, currentTime: currentTime }, item.id))) })] }, groupedData[0].id))), loading && (_jsx(StyledTimelineListItem, { children: _jsx(StyledLoadingCell, { children: _jsx(Progress, { placement: 'local' }) }) }))] }));
 });
 export default Timeline;
 //# sourceMappingURL=Timeline.js.map

package/lib/components/Timeline/Timeline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EACL,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,QAAQ,~~GAAoD~~,UAAU,CAAC,SAAS,QAAQ,~~CAC5F~~,EACE,QAAQ,EACR,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACmB,EACjC,GAAyB;IAEzB,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,mBAAmB,CACjB,OAAO,EACP,QAAQ,CAAC,MAAM,GAAG,CAAC,EACnB,GAAG,EAAE;QACH,IAAI,CAAC,OAAO;YAAE,QAAQ,EAAE,EAAE,CAAC;IAC7B,CAAC,EACD,iBAAiB,CAClB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,OAAO;SACpB,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAC3D,EAAE,EAAE,cAAc,EAClB,GAAG,EAAE,OAAO,aAEX,OAAO,KAAK,MAAM;gBACjB,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,YAAY,IAEX,IAAI,EAAE,IAAI,EACV,~~UAAU,EAAC,UAAU,EACrB,~~YAAY,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EACvC,YAAY,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EACvC,WAAW,EAAE,WAAW,~~IALnB~~,IAAI,CAAC,EAAE,~~CAMZ~~,CACH,CAAC;gBACJ,CAAC,CAAC,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CACpD,MAAC,IAAI,IACH,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EAC7B,EAAE,EAAE,sBAAsB,aAG1B,KAAC,eAAe,IACd,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,GAC1B,EACF,KAAC,kBAAkB,cAChB,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,YAAY,IAEX,IAAI,EAAE,IAAI,~~EACV~~,~~UAAU~~,~~EAAE,~~OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,~~MAAM~~,CAAC,CAAC,CAAC,~~UAAU~~,~~EACpD,~~YAAY,EAAE,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EAC1C,YAAY,EAAE,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EAC1C,WAAW,EAAE,WAAW,~~IALnB~~,IAAI,CAAC,EAAE,~~CAMZ~~,CACH,CAAC,GACiB,~~KAnBhB~~,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,~~CAoBjB~~,CACR,CAAC,EACL,OAAO,IAAI,CACV,KAAC,sBAAsB,cACrB,KAAC,iBAAiB,cAChB,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,GAAG,GACZ,GACG,CAC1B,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ~~FunctionComponent,~~ PropsWithoutRef } from 'react';\n\nimport {\n Progress,\n useConsolidatedRef,\n useItemIntersection,\n DateTimeDisplay,\n Grid\n} from '@pega/cosmos-react-core';\nimport type { ~~ForwardProps~~ } from '@pega/cosmos-react-core';\n\nimport { groupByActivity } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport {\n StyledDate,\n StyledTimeline,\n StyledLoadingCell,\n StyledTimelineListItem,\n StyledTimelineList\n} from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: ~~FunctionComponent~~<TimelineProps ~~& ForwardProps~~> = forwardRef(function Timeline(\n {\n activity,\n currentTime,\n groupBy = 'date',\n loading,\n loadMore,\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\n) {\n const listRef = useConsolidatedRef(ref);\n useItemIntersection(\n listRef,\n activity.length - 1,\n () => {\n if (!loading) loadMore?.();\n },\n ':scope li > div'\n );\n\n return (\n <Grid\n {...restProps}\n container={{\n cols: 'auto 1fr',\n colGap: 0.75,\n alignItems: 'start'\n }}\n sm={{ container: { cols: 'auto auto 1fr', colGap: 0.25 } }}\n as={StyledTimeline}\n ref={listRef}\n >\n {groupBy === 'none'\n ? activity.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n ~~timeFormat='datetime'\n~~ prevItemDate={activity[index - 1]?.date}\n nextItemDate={activity[index + 1]?.date}\n currentTime={currentTime}\n />\n ))\n : groupByActivity(activity, groupBy).map(groupedData => (\n <Grid\n item={{ colStartEnd: '1/-1' }}\n as={StyledTimelineListItem}\n key={groupedData[0].id}\n >\n <DateTimeDisplay\n as={StyledDate}\n variant={groupBy}\n format='long'\n value={groupedData[0].date}\n />\n <StyledTimelineList>\n {groupedData.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={~~item}~~\n ~~timeFormat={~~groupBy === 'date' ? '~~time~~' : '~~datetime~~'}\n prevItemDate={groupedData[index - 1]?.date}\n nextItemDate={groupedData[index + 1]?.date}\n currentTime={currentTime}\n />\n ))}\n </StyledTimelineList>\n </Grid>\n ))}\n {loading && (\n <StyledTimelineListItem>\n <StyledLoadingCell>\n <Progress placement='local' />\n </StyledLoadingCell>\n </StyledTimelineListItem>\n )}\n </Grid>\n );\n});\n\nexport default Timeline;\n"]}
1	+ {"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Progress,\n useConsolidatedRef,\n useItemIntersection,\n DateTimeDisplay,\n Grid\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport { groupByActivity } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport {\n StyledDate,\n StyledTimeline,\n StyledLoadingCell,\n StyledTimelineListItem,\n StyledTimelineList\n} from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\n/** @deprecated */\nconst Timeline: ForwardRefForwardPropsComponent<TimelineProps> = forwardRef(function Timeline(\n {\n activity,\n currentTime,\n groupBy = 'date',\n loading,\n loadMore,\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\n) {\n const listRef = useConsolidatedRef(ref);\n useItemIntersection(\n listRef,\n activity.length - 1,\n () => {\n if (!loading) loadMore?.();\n },\n ':scope li > div'\n );\n\n return (\n <Grid\n {...restProps}\n container={{\n cols: 'auto 1fr',\n colGap: 0.75,\n alignItems: 'start'\n }}\n sm={{ container: { cols: 'auto auto 1fr', colGap: 0.25 } }}\n as={StyledTimeline}\n ref={listRef}\n >\n {groupBy === 'none'\n ? activity.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n prevItemDate={activity[index - 1]?.date}\n nextItemDate={activity[index + 1]?.date}\n currentTime={currentTime}\n />\n ))\n : groupByActivity(activity, groupBy).map(groupedData => (\n <Grid\n item={{ colStartEnd: '1/-1' }}\n as={StyledTimelineListItem}\n key={groupedData[0].id}\n >\n <DateTimeDisplay\n as={StyledDate}\n variant={groupBy}\n format='long'\n value={groupedData[0].date}\n />\n <StyledTimelineList>\n {groupedData.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={{\n ...item,\n ...(groupBy === 'date' &&\n (!item.dateVariant \|\| item.dateVariant === 'datetime') && {\n dateVariant: 'time'\n })\n }}\n prevItemDate={groupedData[index - 1]?.date}\n nextItemDate={groupedData[index + 1]?.date}\n currentTime={currentTime}\n />\n ))}\n </StyledTimelineList>\n </Grid>\n ))}\n {loading && (\n <StyledTimelineListItem>\n <StyledLoadingCell>\n <Progress placement='local' />\n </StyledLoadingCell>\n </StyledTimelineListItem>\n )}\n </Grid>\n );\n});\n\nexport default Timeline;\n"]}

package/lib/components/Timeline/Timeline.styles.d.ts CHANGED Viewed

@@ -1,12 +1,11 @@
-/// <reference types="react" />
-export declare const StyledCard: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCardContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledToggleButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+export declare const StyledToggleButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {
     collapsed: boolean;
 }, never>;
-export declare const StyledCardHeader: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Grid/Grid.types").default & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTimelineIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FlexProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCardHeader: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").GridProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTimelineIcon: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
 interface StyledBulletWrapperProps {
     hasPrev: boolean;
     hasNext: boolean;
@@ -19,7 +18,7 @@ export declare const StyledDate: import("styled-components").StyledComponent<"h2
 export declare const StyledTimelineList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTimelineListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTimeline: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTime: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTime: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLoadingCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};
 //# sourceMappingURL=Timeline.styles.d.ts.map

package/lib/components/Timeline/Timeline.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":";AAiBA,eAAO,MAAM,UAAU,~~mOASrB~~,CAAC;AAIH,eAAO,MAAM,WAAW,yGAKvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,0OAS5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SASnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,~~gQAG5B~~,CAAC;AAIF,eAAO,MAAM,kBAAkB,~~mOAU7B~~,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,~~gIA8D~~/B,CAAC;AAIF,eAAO,MAAM,UAAU,wGAetB,CAAC;AAIF,eAAO,MAAM,kBAAkB,wGAE9B,CAAC;AAIF,eAAO,MAAM,sBAAsB,~~wGAMlC~~,CAAC;AAIF,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAIH,eAAO,MAAM,UAAU,~~8OAUrB~~,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ7B,CAAC"}
1	+ {"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,UAAU,kNAUrB,CAAC;AAIH,eAAO,MAAM,WAAW,yGAKvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,0OAS5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SASnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,kNAG5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,kNAW7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,gIA6D/B,CAAC;AAIF,eAAO,MAAM,UAAU,wGAetB,CAAC;AAIF,eAAO,MAAM,kBAAkB,wGAE9B,CAAC;AAIF,eAAO,MAAM,sBAAsB,wGAYlC,CAAC;AAIF,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAIH,eAAO,MAAM,UAAU,6NAUrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ7B,CAAC"}

package/lib/components/Timeline/Timeline.styles.js CHANGED Viewed

@@ -4,6 +4,7 @@ export const StyledCard = styled(Card)(({ theme }) => {
     return css `
     border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
     padding-block: ${theme.base.spacing};
     &:not(& &) {
       border-radius: 0;
       background-color: transparent;
@@ -50,6 +51,7 @@ export const StyledTimelineIcon = styled(Flex)(({ theme }) => {
     border-radius: 50%;
     color: ${theme.base.palette.light};
     background: ${theme.base.palette.info};
     & > ${StyledIcon} {
       height: 1em;
       width: 1em;
@@ -81,7 +83,6 @@ export const StyledBulletWrapper = styled.span(({ theme, hasPrev, hasNext, isPre
             ${theme.base.palette.info};
         }
       `}
       ${hasNext &&
         css `
         &::after {
@@ -97,8 +98,7 @@ export const StyledBulletWrapper = styled.span(({ theme, hasPrev, hasNext, isPre
             ${theme.base.palette.info};
         }
       `}
-      & > ${StyledTimelineIcon} {
+        & > ${StyledTimelineIcon} {
         position: relative;
         margin: 0;
         z-index: 1;
@@ -111,6 +111,7 @@ export const StyledBulletWrapper = styled.span(({ theme, hasPrev, hasNext, isPre
         &::before {
           height: calc(${theme.base.spacing} + 0.75rem);
         }
         &::after {
           inset-block-start: calc(${theme.base.spacing} + 0.75rem);
           height: calc(100% - ${theme.base.spacing} - 0.75rem);
@@ -139,6 +140,12 @@ export const StyledTimelineListItem = styled.li `
   &:first-child ${StyledDate} {
     padding-block-start: 0;
   }
+  &:has(${StyledCardContent} .cell-content > span:empty):not(:has(${StyledTimelineList}))
+    ${StyledCard}
+    ${StyledToggleButton} {
+    display: none;
+  }
 `;
 StyledTimelineListItem.defaultProps = defaultThemeProp;
 export const StyledTimeline = styled.ol(({ theme }) => {

package/lib/components/Timeline/Timeline.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n calculateFontSize,\n Card,\n CardContent,\n DateTimeDisplay,\n defaultThemeProp,\n Flex,\n Grid,\n StyledBackdrop,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-block: ${theme.base.spacing};\n &:not(& &) {\n border-radius: 0;\n background-color: transparent;\n }\n `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledTitle = styled.div`\n display: -webkit-inline-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n return css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing} 0 ${theme.base.spacing} ${theme.base['hit-area']['mouse-min']};\n @media (pointer: coarse) {\n padding-inline-start: ${theme.base['hit-area']['finger-min']};\n }\n }\n `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? `rotate(${rtl ? '90deg' : '-90deg'})` : 'rotate(0)'};\n }\n `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n padding: 0;\n min-height: 2rem;\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n return css`\n border-radius: 50%;\n color: ${theme.base.palette.light};\n background: ${theme.base.palette.info};\n & > ${StyledIcon} {\n height: 1em;\n width: 1em;\n }\n `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n hasPrev: boolean;\n hasNext: boolean;\n isPrevFuture: boolean;\n isNextFuture: boolean;\n hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.span<StyledBulletWrapperProps>(\n ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n const { rtl } = useDirection();\n return css`\n height: 100%;\n position: relative;\n text-align: center;\n padding-block-start: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n min-width: 2rem;\n\n ${hasPrev &&\n css`\n &::before {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 50%;\n transform: translateX(${rtl ? '50%' : '-50%'});\n width: 0.0625rem;\n height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n ${theme.base.palette.info};\n }\n `}\n\n ${hasNext &&\n css`\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n inset-inline-start: 50%;\n transform: translateX(${rtl ? '50%' : '-50%'});\n width: 0.0625rem;\n height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n ${theme.base.palette.info};\n }\n `}\n\n & > ${StyledTimelineIcon} {\n position: relative;\n margin: 0;\n z-index: 1;\n width: ${hasIcon ? '1.5rem' : '0.5rem'};\n height: ${hasIcon ? '1.5rem' : '0.5rem'};\n }\n\n @media (min-width: ${theme.base.breakpoints.sm}) {\n padding-block-start: calc(${theme.base.spacing} + 0.0625rem);\n &::before {\n height: calc(${theme.base.spacing} + 0.75rem);\n }\n &::after {\n inset-block-start: calc(${theme.base.spacing} + 0.75rem);\n height: calc(100% - ${theme.base.spacing} - 0.75rem);\n }\n }\n `;\n }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled.h2(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n return css`\n grid-column: 1 / -1;\n padding-block: calc(3 * ${spacing}) calc(1.25 * ${spacing});\n font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n `;\n }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineList = styled.ol`\n display: contents;\n`;\n\nStyledTimelineList.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineListItem = styled.li`\n display: contents;\n\n &:first-child ${StyledDate} {\n padding-block-start: 0;\n }\n`;\n\nStyledTimelineListItem.defaultProps = defaultThemeProp;\n\nexport const StyledTimeline = styled.ol(({ theme }) => {\n return css`\n @media (min-width: ${theme.base.breakpoints.sm}) {\n ${StyledCard} {\n padding-block: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledTimeline.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n return css`\n opacity: ${theme.base.transparency['transparent-2']};\n white-space: nowrap;\n @media (min-width: ${theme.base.breakpoints.sm}) {\n text-align: end;\n line-height: ${theme.base['hit-area']['mouse-min']};\n padding-block-start: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n }\n `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.div`\n grid-column: 1 / -1;\n position: relative;\n height: 2.8rem;\n\n ${StyledBackdrop} {\n background: transparent;\n }\n`;\n"]}
1	+ {"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport {\n Button,\n calculateFontSize,\n Card,\n CardContent,\n DateTimeDisplay,\n defaultThemeProp,\n Flex,\n Grid,\n StyledBackdrop,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-block: ${theme.base.spacing};\n\n &:not(& &) {\n border-radius: 0;\n background-color: transparent;\n }\n `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledTitle = styled.div`\n display: -webkit-inline-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n return css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing} 0 ${theme.base.spacing} ${theme.base['hit-area']['mouse-min']};\n @media (pointer: coarse) {\n padding-inline-start: ${theme.base['hit-area']['finger-min']};\n }\n }\n `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? `rotate(${rtl ? '90deg' : '-90deg'})` : 'rotate(0)'};\n }\n `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n padding: 0;\n min-height: 2rem;\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n return css`\n border-radius: 50%;\n color: ${theme.base.palette.light};\n background: ${theme.base.palette.info};\n\n & > ${StyledIcon} {\n height: 1em;\n width: 1em;\n }\n `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n hasPrev: boolean;\n hasNext: boolean;\n isPrevFuture: boolean;\n isNextFuture: boolean;\n hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.span<StyledBulletWrapperProps>(\n ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n const { rtl } = useDirection();\n return css`\n height: 100%;\n position: relative;\n text-align: center;\n padding-block-start: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n min-width: 2rem;\n\n ${hasPrev &&\n css`\n &::before {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 50%;\n transform: translateX(${rtl ? '50%' : '-50%'});\n width: 0.0625rem;\n height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n ${theme.base.palette.info};\n }\n `}\n ${hasNext &&\n css`\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n inset-inline-start: 50%;\n transform: translateX(${rtl ? '50%' : '-50%'});\n width: 0.0625rem;\n height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n ${theme.base.palette.info};\n }\n `}\n & > ${StyledTimelineIcon} {\n position: relative;\n margin: 0;\n z-index: 1;\n width: ${hasIcon ? '1.5rem' : '0.5rem'};\n height: ${hasIcon ? '1.5rem' : '0.5rem'};\n }\n\n @media (min-width: ${theme.base.breakpoints.sm}) {\n padding-block-start: calc(${theme.base.spacing} + 0.0625rem);\n &::before {\n height: calc(${theme.base.spacing} + 0.75rem);\n }\n\n &::after {\n inset-block-start: calc(${theme.base.spacing} + 0.75rem);\n height: calc(100% - ${theme.base.spacing} - 0.75rem);\n }\n }\n `;\n }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled.h2(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n return css`\n grid-column: 1 / -1;\n padding-block: calc(3 * ${spacing}) calc(1.25 * ${spacing});\n font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n `;\n }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineList = styled.ol`\n display: contents;\n`;\n\nStyledTimelineList.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineListItem = styled.li`\n display: contents;\n\n &:first-child ${StyledDate} {\n padding-block-start: 0;\n }\n\n &:has(${StyledCardContent} .cell-content > span:empty):not(:has(${StyledTimelineList}))\n ${StyledCard}\n ${StyledToggleButton} {\n display: none;\n }\n`;\n\nStyledTimelineListItem.defaultProps = defaultThemeProp;\n\nexport const StyledTimeline = styled.ol(({ theme }) => {\n return css`\n @media (min-width: ${theme.base.breakpoints.sm}) {\n ${StyledCard} {\n padding-block: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledTimeline.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n return css`\n opacity: ${theme.base.transparency['transparent-2']};\n white-space: nowrap;\n @media (min-width: ${theme.base.breakpoints.sm}) {\n text-align: end;\n line-height: ${theme.base['hit-area']['mouse-min']};\n padding-block-start: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n }\n `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.div`\n grid-column: 1 / -1;\n position: relative;\n height: 2.8rem;\n\n ${StyledBackdrop} {\n background: transparent;\n }\n`;\n"]}

package/lib/components/Timeline/Timeline.types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { MouseEvent, ReactElement, ReactNode, Ref } from 'react';
-import type { BaseProps, FieldValueListProps, IconProps, ListToolbarProps, NoChildrenProp, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
+import type { BaseProps, DateTimeDisplayProps, FieldValueListProps, IconProps, ListToolbarProps, NoChildrenProp, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
 import type { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';
 import type { AcceptedMouseEventElement } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
 export interface ActivityObject {
@@ -7,10 +7,20 @@ export interface ActivityObject {
     id: string;
     /** Date as ISO8601 string, timestamp or native Date object. */
     date: string | number | Date;
+    /**
+     * Controls date time variant. Set to 'time' when groupBy is 'date'.
+     * @default datetime
+     */
+    dateVariant?: DateTimeDisplayProps['variant'];
     /** Header region for rendering text and links. */
     title: ReactNode;
     /** Name of the icon (to be selected from default Pega icon set) */
     icon?: IconProps['name'];
+    /**
+     * Default visually expanded state for the activity item.
+     * @default false
+     */
+    defaultExpanded?: boolean;
     /** Represents the current status of activity */
     status?: StatusProps;
     /** The set of field values to render in the list. */

package/lib/components/Timeline/Timeline.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wDAAwD,CAAC;AAExG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;CACxD;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,eAAe,GACvB,OAAO,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC,GACvE,MAAM,CAAC;AAEX,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1F,IAAI,CAAC,EAAE;QACL,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACvF;;;WAGG;QACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;KAC9B,CAAC;IACF,KAAK,CAAC,EAAE;QACN,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACrF;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH"}
1	+ {"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EACV,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wDAAwD,CAAC;AAExG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC9C,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;CACxD;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,eAAe,GACvB,OAAO,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC,GACvE,MAAM,CAAC;AAEX,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1F,IAAI,CAAC,EAAE;QACL,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACvF;;;WAGG;QACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;KAC9B,CAAC;IACF,KAAK,CAAC,EAAE;QACN,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACrF;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH"}

package/lib/components/Timeline/Timeline.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, ReactElement, ReactNode, Ref } from 'react';\n\nimport type {\n BaseProps,\n FieldValueListProps,\n IconProps,\n ListToolbarProps,\n NoChildrenProp,\n OmitStrict,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport type { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\nimport type { AcceptedMouseEventElement } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport interface ActivityObject {\n /** Unique id for activity /\n id: string;\n /* Date as ISO8601 string, timestamp or native Date object. /\n date: string \| number \| Date;\n /* Header region for rendering text and links. /\n title: ReactNode;\n /* Name of the icon (to be selected from default Pega icon set) /\n icon?: IconProps['name'];\n /* Represents the current status of activity /\n status?: StatusProps;\n /* The set of field values to render in the list. /\n content?: FieldValueListProps['fields'] \| ReactElement;\n}\n\nexport type TimelineSortOrder = 'ascending' \| 'descending';\nexport type TimelineGroupBy =\n \| Extract<DateTimeVariant, 'date' \| 'monthyear' \| 'quarteryear' \| 'year'>\n \| 'none';\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n /* List of activity /\n activity: ActivityObject[];\n /* Current time as Date /\n currentTime: Date;\n /\n List of activity grouped by day, month, quarter or year.\n * @default 'date'\n /\n groupBy?: TimelineGroupBy;\n /\n Show a Progress indicator at the end of a list where newly loaded items will be appended.\n * @default false\n /\n loading?: boolean;\n /* Callback to fetch more activity items /\n loadMore?: () => void;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLTableElement>;\n}\n\nexport interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort' \| 'group'> {\n sort?: {\n /* An item click handler for all item clicks. /\n onItemClick: (id: TimelineSortOrder, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /\n Currently selected sort order.\n * @default 'descending'\n /\n selected?: TimelineSortOrder;\n };\n group?: {\n /* An item click handler for all item clicks. /\n onItemClick: (id: TimelineGroupBy, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /\n Currently selected sort order.\n * @default 'date'\n */\n selected: TimelineProps['groupBy'];\n };\n}\n"]}
1	+ {"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, ReactElement, ReactNode, Ref } from 'react';\n\nimport type {\n BaseProps,\n DateTimeDisplayProps,\n FieldValueListProps,\n IconProps,\n ListToolbarProps,\n NoChildrenProp,\n OmitStrict,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport type { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\nimport type { AcceptedMouseEventElement } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport interface ActivityObject {\n /** Unique id for activity /\n id: string;\n /* Date as ISO8601 string, timestamp or native Date object. /\n date: string \| number \| Date;\n /\n Controls date time variant. Set to 'time' when groupBy is 'date'.\n * @default datetime\n /\n dateVariant?: DateTimeDisplayProps['variant'];\n /* Header region for rendering text and links. /\n title: ReactNode;\n /* Name of the icon (to be selected from default Pega icon set) /\n icon?: IconProps['name'];\n /\n Default visually expanded state for the activity item.\n * @default false\n /\n defaultExpanded?: boolean;\n /* Represents the current status of activity /\n status?: StatusProps;\n /* The set of field values to render in the list. /\n content?: FieldValueListProps['fields'] \| ReactElement;\n}\n\nexport type TimelineSortOrder = 'ascending' \| 'descending';\nexport type TimelineGroupBy =\n \| Extract<DateTimeVariant, 'date' \| 'monthyear' \| 'quarteryear' \| 'year'>\n \| 'none';\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n /* List of activity /\n activity: ActivityObject[];\n /* Current time as Date /\n currentTime: Date;\n /\n List of activity grouped by day, month, quarter or year.\n * @default 'date'\n /\n groupBy?: TimelineGroupBy;\n /\n Show a Progress indicator at the end of a list where newly loaded items will be appended.\n * @default false\n /\n loading?: boolean;\n /* Callback to fetch more activity items /\n loadMore?: () => void;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLTableElement>;\n}\n\nexport interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort' \| 'group'> {\n sort?: {\n /* An item click handler for all item clicks. /\n onItemClick: (id: TimelineSortOrder, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /\n Currently selected sort order.\n * @default 'descending'\n /\n selected?: TimelineSortOrder;\n };\n group?: {\n /* An item click handler for all item clicks. /\n onItemClick: (id: TimelineGroupBy, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /\n Currently selected sort order.\n * @default 'date'\n */\n selected: TimelineProps['groupBy'];\n };\n}\n"]}

package/lib/components/Timeline/TimelineItem.d.ts CHANGED Viewed

@@ -1,9 +1,8 @@
 import type { FunctionComponent } from 'react';
-import type { ForwardProps, DateTimeDisplayProps } from '@pega/cosmos-react-core';
+import type { ForwardProps } from '@pega/cosmos-react-core';
 import type { ActivityObject } from './Timeline.types';
 interface TimelineItemProps {
     item: ActivityObject;
-    timeFormat: DateTimeDisplayProps['variant'];
     prevItemDate: ActivityObject['date'] | undefined;
     nextItemDate: ActivityObject['date'] | undefined;
     currentTime: Date;

package/lib/components/Timeline/TimelineItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;~~AAU7D~~,OAAO,KAAK,~~EACV~~,YAAY,~~EACZ~~,~~oBAAoB,EAErB,~~MAAM,yBAAyB,CAAC;~~AAEjC~~,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;~~AAcvD~~,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,~~UAAU,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC5C,~~YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,IAAI,CAAC;CACnB;AAgBD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAgHrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,EAA2B,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAqBrF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,IAAI,CAAC;CACnB;AAgBD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAgHrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Timeline/TimelineItem.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isValidElement, useCallback, useRef, useState } from 'react';
-import { ExpandCollapse, Grid, Icon, Status, useBreakpoint, FieldValueItem } from '@pega/cosmos-react-core';
-import { StyledCard, StyledCardHeader, StyledTimelineIcon, StyledCardContent, StyledBulletWrapper, StyledToggleButton, StyledTime, StyledTitle, StyledTimelineListItem } from './Timeline.styles';
+import { isValidElement, useRef, useState } from 'react';
+import { ExpandCollapse, FieldValueItem, Grid, Icon, Status, useBreakpoint } from '@pega/cosmos-react-core';
+import { StyledBulletWrapper, StyledCard, StyledCardContent, StyledCardHeader, StyledTime, StyledTimelineIcon, StyledTimelineListItem, StyledTitle, StyledToggleButton } from './Timeline.styles';
 import { isFutureDate } from './utils';
 const shouldRenderContent = (content) => {
     if (!content) {
@@ -12,24 +12,25 @@ const shouldRenderContent = (content) => {
     }
     return true;
 };
-const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat, prevItemDate, nextItemDate, currentTime }) => {
-    const [collapsed, setCollapsed] = useState(true);
+const TimelineItem = ({ item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content }, prevItemDate, nextItemDate, currentTime }) => {
+    const [expanded, setExpanded] = useState(defaultExpanded);
     const isSmallOrAbove = useBreakpoint('sm');
-    const toggleCollapse = useCallback(() => setCollapsed(prevState => !prevState), []);
     const contentListRef = useRef(null);
     const isSMContentWidthOrAbove = useBreakpoint('sm', {
         breakpointRef: contentListRef
     });
-    return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && _jsx(StyledTime, { variant: timeFormat, value: date }), _jsx(StyledBulletWrapper, { hasIcon: !!icon, hasPrev: !!prevItemDate, hasNext: !!nextItemDate, isPrevFuture: isFutureDate(prevItemDate, currentTime), isNextFuture: isFutureDate(nextItemDate, currentTime), children: _jsx(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' }, children: icon && _jsx(Icon, { name: icon }) }) }), _jsxs("div", { children: [_jsx("div", { children: _jsx(StyledCard, { children: _jsxs(StyledCardHeader, { container: {
+    return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && _jsx(StyledTime, { variant: dateVariant, value: date, format: 'short' }), _jsx(StyledBulletWrapper, { hasIcon: !!icon, hasPrev: !!prevItemDate, hasNext: !!nextItemDate, isPrevFuture: isFutureDate(prevItemDate, currentTime), isNextFuture: isFutureDate(nextItemDate, currentTime), children: _jsx(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' }, children: icon && _jsx(Icon, { name: icon }) }) }), _jsxs("div", { children: [_jsx("div", { children: _jsx(StyledCard, { children: _jsxs(StyledCardHeader, { container: {
                                     cols: 'auto 1fr',
                                     alignContent: 'evenly',
                                     alignItems: 'center',
                                     gap: 0.5
-                                }, sm: { container: { cols: 'auto 1fr auto' } }, children: [shouldRenderContent(content) && (_jsx(StyledToggleButton, { icon: true, variant: 'simple', onClick: toggleCollapse, collapsed: collapsed, "aria-expanded": !collapsed, compact: true, children: _jsx(Icon, { name: 'caret-down' }) })), _jsxs(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, children: [_jsx(StyledTitle, { children: title }), !isSmallOrAbove && (_jsxs(Grid, { container: {
+                                }, sm: { container: { cols: 'auto 1fr auto' } }, children: [shouldRenderContent(content) && (_jsx(StyledToggleButton, { icon: true, variant: 'simple', onClick: () => {
+                                            setExpanded(cur => !cur);
+                                        }, collapsed: !expanded, "aria-expanded": expanded, compact: true, children: _jsx(Icon, { name: 'caret-down' }) })), _jsxs(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, children: [_jsx(StyledTitle, { children: title }), !isSmallOrAbove && (_jsxs(Grid, { container: {
                                                     cols: '1fr auto',
                                                     alignContent: 'evenly',
                                                     alignItems: 'center'
-                                                }, children: [_jsx(StyledTime, { variant: 'time', value: date }), status && _jsx(Status, { variant: status.variant, children: status.children })] }))] }), isSmallOrAbove && status && (_jsx(Grid, { sm: { item: { colStart: '3', colEnd: '3' } }, children: _jsx(Status, { variant: status.variant, children: status.children }) }))] }) }) }), shouldRenderContent(content) && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
+                                                }, children: [_jsx(StyledTime, { variant: 'time', value: date, format: 'short' }), status && _jsx(Status, { variant: status.variant, children: status.children })] }))] }), isSmallOrAbove && status && (_jsx(Grid, { sm: { item: { colStart: '3', colEnd: '3' } }, children: _jsx(Status, { variant: status.variant, children: status.children }) }))] }) }) }), shouldRenderContent(content) && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: !expanded, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
                                     gap: 1,
                                     cols: isSMContentWidthOrAbove
                                         ? `repeat(${content.length > 1 ? '2' : '1'}, minmax(16ch, auto) minmax(25%, 1fr))`

package/lib/components/Timeline/TimelineItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":";~~AAAA~~,OAAO,EAAE,cAAc,EAAE,~~WAAW,EAAE,~~MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAGtE~~,OAAO,EACL,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,~~EACb~~,~~cAAc,EACf,~~MAAM,yBAAyB,CAAC;~~AAQjC~~,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,~~kBAAkB~~,~~EAClB~~,~~iBAAiB,EACjB,mBAAmB,EACnB,~~kBAAkB,EAClB,~~UAAU~~,~~EACV~~,WAAW,EACX,~~sBAAsB~~,~~EACvB~~,MAAM,mBAAmB,CAAC;~~AAC3B~~,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;~~AAUvC~~,MAAM,mBAAmB,GAAG,CAC1B,OAAkC,EACiD,EAAE;IACrF,IAAI,CAAC,OAAO,EAAE;~~QACZ~~,OAAO,KAAK,CAAC;~~KACd~~;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;~~QAC1B~~,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;~~KAC3B~~;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,YAAY,GAAwD,CAAC,EACzE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,~~EAC5C~~,~~UAAU,EACV,~~YAAY,EACZ,YAAY,EACZ,WAAW,EACsB,EAAE,EAAE;IACrC,MAAM,CAAC,~~SAAS~~,EAAE,~~YAAY~~,CAAC,GAAG,QAAQ,CAAC,~~IAAI~~,CAAC,CAAC;~~IACjD~~,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,cAAc,GAAG,~~WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;IACpF,~~MAAM,~~cAAc,GAAG,MAAM,~~CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,cAAc;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,sBAAsB,eACpB,cAAc,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,~~UAAU~~,EAAE,KAAK,EAAE,IAAI,~~GAAI~~,~~EACnE~~,KAAC,mBAAmB,IAClB,OAAO,EAAE,CAAC,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,YAAY,EACvB,OAAO,EAAE,CAAC,CAAC,YAAY,EACvB,YAAY,EAAE,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,EACrD,YAAY,EAAE,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,YAErD,KAAC,kBAAkB,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YACrF,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,GACV,GACD,EACtB,0BACE,wBACE,KAAC,UAAU,cACT,MAAC,gBAAgB,IACf,SAAS,EAAE;oCACT,IAAI,EAAE,UAAU;oCAChB,YAAY,EAAE,QAAQ;oCACtB,UAAU,EAAE,QAAQ;oCACpB,GAAG,EAAE,GAAG;iCACT,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,aAE3C,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAC/B,KAAC,kBAAkB,IACjB,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,~~cAAc~~,~~EACvB~~,~~SAAS~~,EAAE,~~SAAS~~,~~mBACL~~,CAAC,SAAS,~~EACzB~~,OAAO,kBAEP,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACP,CACtB,EACD,MAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aACrE,KAAC,WAAW,cAAE,KAAK,GAAe,EACjC,CAAC,cAAc,IAAI,CAClB,MAAC,IAAI,IACH,SAAS,EAAE;oDACT,IAAI,EAAE,UAAU;oDAChB,YAAY,EAAE,QAAQ;oDACtB,UAAU,EAAE,QAAQ;iDACrB,aAED,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,~~GAAI~~,~~EACzC~~,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,IACjE,CACR,IACI,EACN,cAAc,IAAI,MAAM,IAAI,CAC3B,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,YAChD,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,GACtD,CACR,IACgB,GACR,GACT,EACL,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAC/B,KAAC,cAAc,IAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,~~SAAS~~,~~EAAE~~,~~iBAAiB~~,~~kBACxE,~~KAAC,iBAAiB,cACf,cAAc,CAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAC9B,OAAO,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,SAAS,EAAE;oCACT,GAAG,EAAE,CAAC;oCACN,IAAI,EAAE,uBAAuB;wCAC3B,CAAC,CAAC,UACE,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAC7B,wCAAwC;wCAC1C,CAAC,CAAC,gBAAgB;iCACrB,EACD,GAAG,EAAE,cAAc,YAElB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;oCAC5C,OAAO,CACL,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IACxC,EAAE,IAAI,IAAI,CACf,CACH,CAAC;gCACJ,CAAC,CAAC,GACG,CACR,GACiB,GACL,CAClB,IACG,IACiB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { ~~isValidElement~~, ~~useCallback,~~ ~~useRef, useState~~ } from 'react';\nimport ~~type~~ { ~~FunctionComponent~~, ~~ReactElement~~ } from 'react';\n\nimport {~~\n ExpandCollapse,\n Grid,\n Icon,\n Status,\n useBreakpoint,\n FieldValueItem\n~~} from '@pega/cosmos-react-core';\nimport ~~type~~ {\n ~~ForwardProps~~,\n ~~DateTimeDisplayProps~~,\n ~~FieldValueListItemProps~~\n} from '@pega/cosmos-react-core';\n\nimport ~~type~~ { ~~ActivityObject } from './Timeline.types';\nimport {~~\n ~~StyledCard~~,\n ~~StyledCardHeader~~,\n ~~StyledTimelineIcon~~,\n ~~StyledCardContent~~,\n ~~StyledBulletWrapper~~,\n ~~StyledToggleButton~~,\n ~~StyledTime~~,\n StyledTitle,\n ~~StyledTimelineListItem~~\n} from './Timeline.styles';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n item: ActivityObject;\n ~~timeFormat: DateTimeDisplayProps['variant'];\n~~ prevItemDate: ActivityObject['date'] \| undefined;\n nextItemDate: ActivityObject['date'] \| undefined;\n currentTime: Date;\n}\n\nconst shouldRenderContent = (\n content: ActivityObject['content']\n): content is [FieldValueListItemProps, ...FieldValueListItemProps[]] \| ReactElement => {\n if (!content) {\n return false;\n }\n\n if (Array.isArray(content)) {\n return content.length > 0;\n }\n\n return true;\n};\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n item: { date, title, icon, status, content },\n ~~timeFormat,\n~~ prevItemDate,\n nextItemDate,\n currentTime\n}: TimelineItemProps & ForwardProps) => {\n const [~~collapsed~~, ~~setCollapsed~~] = useState(~~true~~);\n const isSmallOrAbove = useBreakpoint('sm');\n\n const ~~toggleCollapse = useCallback(() => setCollapsed(prevState => !prevState), []);\n const~~ contentListRef = useRef<HTMLDivElement>(null);\n const isSMContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: contentListRef\n });\n\n return (\n <StyledTimelineListItem>\n {isSmallOrAbove && <StyledTime variant={~~timeFormat~~} value={date} />}\n <StyledBulletWrapper\n hasIcon={!!icon}\n hasPrev={!!prevItemDate}\n hasNext={!!nextItemDate}\n isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n isNextFuture={isFutureDate(nextItemDate, currentTime)}\n >\n <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n {icon && <Icon name={icon} />}\n </StyledTimelineIcon>\n </StyledBulletWrapper>\n <div>\n <div>\n <StyledCard>\n <StyledCardHeader\n container={{\n cols: 'auto 1fr',\n alignContent: 'evenly',\n alignItems: 'center',\n gap: 0.5\n }}\n sm={{ container: { cols: 'auto 1fr auto' } }}\n >\n {shouldRenderContent(content) && (\n <StyledToggleButton\n icon\n variant='simple'\n onClick={~~toggleCollapse~~}\n collapsed={~~collapsed~~}\n aria-expanded={~~!collapsed~~}\n compact\n >\n <Icon name='caret-down' />\n </StyledToggleButton>\n )}\n <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n <StyledTitle>{title}</StyledTitle>\n {!isSmallOrAbove && (\n <Grid\n container={{\n cols: '1fr auto',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n >\n <StyledTime variant='time' value={date} />\n {status && <Status variant={status.variant}>{status.children}</Status>}\n </Grid>\n )}\n </Grid>\n {isSmallOrAbove && status && (\n <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n <Status variant={status.variant}>{status.children}</Status>\n </Grid>\n )}\n </StyledCardHeader>\n </StyledCard>\n </div>\n {shouldRenderContent(content) && (\n <ExpandCollapse dimension='height' collapsed={~~collapsed~~} ~~nullWhenCollapsed~~>\n <StyledCardContent>\n {isValidElement<any>(content) ? (\n content\n ) : (\n <Grid\n container={{\n gap: 1,\n cols: isSMContentWidthOrAbove\n ? `repeat(${\n content.length > 1 ? '2' : '1'\n }, minmax(16ch, auto) minmax(25%, 1fr))`\n : 'minmax(0, 1fr)'\n }}\n ref={contentListRef}\n >\n {content.map(({ id, name, value, variant }) => {\n return (\n <FieldValueItem\n name={name}\n value={value}\n variant={isSmallOrAbove ? variant : 'stacked'}\n key={id ?? name}\n />\n );\n })}\n </Grid>\n )}\n </StyledCardContent>\n </ExpandCollapse>\n )}\n </div>\n </StyledTimelineListItem>\n );\n};\n\nexport default TimelineItem;\n"]}
1	+ {"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, ReactElement } from 'react';\nimport { isValidElement, useRef, useState } from 'react';\n\nimport type { FieldValueListItemProps, ForwardProps } from '@pega/cosmos-react-core';\nimport {\n ExpandCollapse,\n FieldValueItem,\n Grid,\n Icon,\n Status,\n useBreakpoint\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledBulletWrapper,\n StyledCard,\n StyledCardContent,\n StyledCardHeader,\n StyledTime,\n StyledTimelineIcon,\n StyledTimelineListItem,\n StyledTitle,\n StyledToggleButton\n} from './Timeline.styles';\nimport type { ActivityObject } from './Timeline.types';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n item: ActivityObject;\n prevItemDate: ActivityObject['date'] \| undefined;\n nextItemDate: ActivityObject['date'] \| undefined;\n currentTime: Date;\n}\n\nconst shouldRenderContent = (\n content: ActivityObject['content']\n): content is [FieldValueListItemProps, ...FieldValueListItemProps[]] \| ReactElement => {\n if (!content) {\n return false;\n }\n\n if (Array.isArray(content)) {\n return content.length > 0;\n }\n\n return true;\n};\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content },\n prevItemDate,\n nextItemDate,\n currentTime\n}: TimelineItemProps & ForwardProps) => {\n const [expanded, setExpanded] = useState(defaultExpanded);\n const isSmallOrAbove = useBreakpoint('sm');\n\n const contentListRef = useRef<HTMLDivElement>(null);\n const isSMContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: contentListRef\n });\n\n return (\n <StyledTimelineListItem>\n {isSmallOrAbove && <StyledTime variant={dateVariant} value={date} format='short' />}\n <StyledBulletWrapper\n hasIcon={!!icon}\n hasPrev={!!prevItemDate}\n hasNext={!!nextItemDate}\n isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n isNextFuture={isFutureDate(nextItemDate, currentTime)}\n >\n <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n {icon && <Icon name={icon} />}\n </StyledTimelineIcon>\n </StyledBulletWrapper>\n <div>\n <div>\n <StyledCard>\n <StyledCardHeader\n container={{\n cols: 'auto 1fr',\n alignContent: 'evenly',\n alignItems: 'center',\n gap: 0.5\n }}\n sm={{ container: { cols: 'auto 1fr auto' } }}\n >\n {shouldRenderContent(content) && (\n <StyledToggleButton\n icon\n variant='simple'\n onClick={() => {\n setExpanded(cur => !cur);\n }}\n collapsed={!expanded}\n aria-expanded={expanded}\n compact\n >\n <Icon name='caret-down' />\n </StyledToggleButton>\n )}\n <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n <StyledTitle>{title}</StyledTitle>\n {!isSmallOrAbove && (\n <Grid\n container={{\n cols: '1fr auto',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n >\n <StyledTime variant='time' value={date} format='short' />\n {status && <Status variant={status.variant}>{status.children}</Status>}\n </Grid>\n )}\n </Grid>\n {isSmallOrAbove && status && (\n <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n <Status variant={status.variant}>{status.children}</Status>\n </Grid>\n )}\n </StyledCardHeader>\n </StyledCard>\n </div>\n {shouldRenderContent(content) && (\n <ExpandCollapse dimension='height' collapsed={!expanded}>\n <StyledCardContent>\n {isValidElement<any>(content) ? (\n content\n ) : (\n <Grid\n container={{\n gap: 1,\n cols: isSMContentWidthOrAbove\n ? `repeat(${\n content.length > 1 ? '2' : '1'\n }, minmax(16ch, auto) minmax(25%, 1fr))`\n : 'minmax(0, 1fr)'\n }}\n ref={contentListRef}\n >\n {content.map(({ id, name, value, variant }) => {\n return (\n <FieldValueItem\n name={name}\n value={value}\n variant={isSmallOrAbove ? variant : 'stacked'}\n key={id ?? name}\n />\n );\n })}\n </Grid>\n )}\n </StyledCardContent>\n </ExpandCollapse>\n )}\n </div>\n </StyledTimelineListItem>\n );\n};\n\nexport default TimelineItem;\n"]}

package/lib/components/Timeline/TimelineToolbar.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { TimelineToolbarProps } from './Timeline.types';
-declare const TimelineToolbar: FunctionComponent<TimelineToolbarProps & ForwardProps>;
+declare const TimelineToolbar: ForwardRefForwardPropsComponent<TimelineToolbarProps>;
 export default TimelineToolbar;
 //# sourceMappingURL=TimelineToolbar.d.ts.map

package/lib/components/Timeline/TimelineToolbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,~~iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,~~EAAE,~~YAAY,EAAE,~~MAAM,yBAAyB,CAAC;~~AAG5D~~,OAAO,KAAK,EAAsC,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEjG,QAAA,MAAM,eAAe,EAAE,~~iBAAiB,~~CAAC,oBAAoB,~~GAAG~~,~~YAAY,CA6E3E,~~CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"TimelineToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAG/E,OAAO,KAAK,EAAsC,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEjG,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CA6E1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Timeline/TimelineToolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineToolbar.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAM/D,MAAM,eAAe,~~GAA2D~~,UAAU,~~CACxF~~,SAAS,eAAe,CACtB,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAyC,EACpE,GAAgC;IAEhC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,YAAY,GAAoB,OAAO,CAAC,GAAG,EAAE;QACjD,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAQ,IAAI,YAAY,CAAC;QAChD,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,YAAY;oBAChB,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;oBAC3C,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,QAAQ,KAAK,YAAY;iBACpC;gBACD;oBACE,EAAE,EAAE,WAAW;oBACf,IAAI,EAAE,CAAC,CAAC,iCAAiC,CAAC;oBAC1C,IAAI,EAAE,UAAU;oBAChB,QAAQ,EAAE,QAAQ,KAAK,WAAW;iBACnC;aACF;YACD,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACrB,IAAI,EAAE,WAAW,CAAC,EAAuB,EAAE,CAAC,CAAC,CAAC;YAChD,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExC,MAAM,aAAa,GAAoB,OAAO,CAAC,GAAG,EAAE;QAClD,MAAM,QAAQ,GAAG,KAAK,EAAE,QAAQ,IAAI,MAAM,CAAC;QAC3C,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;gBACD;oBACE,EAAE,EAAE,WAAW;oBACf,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;oBAC3C,QAAQ,EAAE,QAAQ,KAAK,WAAW;iBACnC;gBACD;oBACE,EAAE,EAAE,aAAa;oBACjB,IAAI,EAAE,CAAC,CAAC,oCAAoC,CAAC;oBAC7C,QAAQ,EAAE,QAAQ,KAAK,aAAa;iBACrC;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;aACF;YACD,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACrB,KAAK,EAAE,WAAW,CAAC,EAAqB,EAAE,CAAC,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OACN,SAAS,EACb,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACrC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACxC,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { ~~FunctionComponent,~~ PropsWithoutRef } from 'react';\n\nimport { ListToolbar, useI18n } from '@pega/cosmos-react-core';\nimport type { ~~ForwardProps~~ } from '@pega/cosmos-react-core';\nimport type { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport type { TimelineGroupBy, TimelineSortOrder, TimelineToolbarProps } from './Timeline.types';\n\nconst TimelineToolbar: ~~FunctionComponent~~<TimelineToolbarProps ~~& ForwardProps~~> = forwardRef(\n function TimelineToolbar(\n { sort, group, ...restProps }: PropsWithoutRef<TimelineToolbarProps>,\n ref: TimelineToolbarProps['ref']\n ) {\n const t = useI18n();\n\n const timelineSort: PresetMenuProps = useMemo(() => {\n const selected = sort?.selected \|\| 'descending';\n return {\n mode: 'single-select',\n items: [\n {\n id: 'descending',\n text: t('timeline_toolbar_sort_descending'),\n icon: 'arrow-down',\n selected: selected === 'descending'\n },\n {\n id: 'ascending',\n text: t('timeline_toolbar_sort_ascending'),\n icon: 'arrow-up',\n selected: selected === 'ascending'\n }\n ],\n onItemClick: (id, e) => {\n sort?.onItemClick(id as TimelineSortOrder, e);\n }\n };\n }, [sort?.selected, sort?.onItemClick]);\n\n const timelineGroup: PresetMenuProps = useMemo(() => {\n const selected = group?.selected \|\| 'date';\n return {\n mode: 'single-select',\n items: [\n {\n id: 'date',\n text: t('timeline_toolbar_group_date'),\n selected: selected === 'date'\n },\n {\n id: 'monthyear',\n text: t('timeline_toolbar_group_monthyear'),\n selected: selected === 'monthyear'\n },\n {\n id: 'quarteryear',\n text: t('timeline_toolbar_group_quarteryear'),\n selected: selected === 'quarteryear'\n },\n {\n id: 'year',\n text: t('timeline_toolbar_group_year'),\n selected: selected === 'year'\n },\n {\n id: 'none',\n text: t('timeline_toolbar_group_none'),\n selected: selected === 'none'\n }\n ],\n onItemClick: (id, e) => {\n group?.onItemClick(id as TimelineGroupBy, e);\n }\n };\n }, [group?.selected, group?.onItemClick]);\n\n return (\n <ListToolbar\n {...restProps}\n sort={sort ? timelineSort : undefined}\n group={group ? timelineGroup : undefined}\n ref={ref}\n />\n );\n }\n);\n\nexport default TimelineToolbar;\n"]}
1	+ {"version":3,"file":"TimelineToolbar.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAM/D,MAAM,eAAe,GAA0D,UAAU,CACvF,SAAS,eAAe,CACtB,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAyC,EACpE,GAAgC;IAEhC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,YAAY,GAAoB,OAAO,CAAC,GAAG,EAAE;QACjD,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAQ,IAAI,YAAY,CAAC;QAChD,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,YAAY;oBAChB,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;oBAC3C,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,QAAQ,KAAK,YAAY;iBACpC;gBACD;oBACE,EAAE,EAAE,WAAW;oBACf,IAAI,EAAE,CAAC,CAAC,iCAAiC,CAAC;oBAC1C,IAAI,EAAE,UAAU;oBAChB,QAAQ,EAAE,QAAQ,KAAK,WAAW;iBACnC;aACF;YACD,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACrB,IAAI,EAAE,WAAW,CAAC,EAAuB,EAAE,CAAC,CAAC,CAAC;YAChD,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExC,MAAM,aAAa,GAAoB,OAAO,CAAC,GAAG,EAAE;QAClD,MAAM,QAAQ,GAAG,KAAK,EAAE,QAAQ,IAAI,MAAM,CAAC;QAC3C,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;gBACD;oBACE,EAAE,EAAE,WAAW;oBACf,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;oBAC3C,QAAQ,EAAE,QAAQ,KAAK,WAAW;iBACnC;gBACD;oBACE,EAAE,EAAE,aAAa;oBACjB,IAAI,EAAE,CAAC,CAAC,oCAAoC,CAAC;oBAC7C,QAAQ,EAAE,QAAQ,KAAK,aAAa;iBACrC;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;aACF;YACD,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACrB,KAAK,EAAE,WAAW,CAAC,EAAqB,EAAE,CAAC,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OACN,SAAS,EACb,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACrC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACxC,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { ListToolbar, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport type { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport type { TimelineGroupBy, TimelineSortOrder, TimelineToolbarProps } from './Timeline.types';\n\nconst TimelineToolbar: ForwardRefForwardPropsComponent<TimelineToolbarProps> = forwardRef(\n function TimelineToolbar(\n { sort, group, ...restProps }: PropsWithoutRef<TimelineToolbarProps>,\n ref: TimelineToolbarProps['ref']\n ) {\n const t = useI18n();\n\n const timelineSort: PresetMenuProps = useMemo(() => {\n const selected = sort?.selected \|\| 'descending';\n return {\n mode: 'single-select',\n items: [\n {\n id: 'descending',\n text: t('timeline_toolbar_sort_descending'),\n icon: 'arrow-down',\n selected: selected === 'descending'\n },\n {\n id: 'ascending',\n text: t('timeline_toolbar_sort_ascending'),\n icon: 'arrow-up',\n selected: selected === 'ascending'\n }\n ],\n onItemClick: (id, e) => {\n sort?.onItemClick(id as TimelineSortOrder, e);\n }\n };\n }, [sort?.selected, sort?.onItemClick]);\n\n const timelineGroup: PresetMenuProps = useMemo(() => {\n const selected = group?.selected \|\| 'date';\n return {\n mode: 'single-select',\n items: [\n {\n id: 'date',\n text: t('timeline_toolbar_group_date'),\n selected: selected === 'date'\n },\n {\n id: 'monthyear',\n text: t('timeline_toolbar_group_monthyear'),\n selected: selected === 'monthyear'\n },\n {\n id: 'quarteryear',\n text: t('timeline_toolbar_group_quarteryear'),\n selected: selected === 'quarteryear'\n },\n {\n id: 'year',\n text: t('timeline_toolbar_group_year'),\n selected: selected === 'year'\n },\n {\n id: 'none',\n text: t('timeline_toolbar_group_none'),\n selected: selected === 'none'\n }\n ],\n onItemClick: (id, e) => {\n group?.onItemClick(id as TimelineGroupBy, e);\n }\n };\n }, [group?.selected, group?.onItemClick]);\n\n return (\n <ListToolbar\n {...restProps}\n sort={sort ? timelineSort : undefined}\n group={group ? timelineGroup : undefined}\n ref={ref}\n />\n );\n }\n);\n\nexport default TimelineToolbar;\n"]}