npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.9.1 → 2.0.0-rc.1 - Mend

@pega/cosmos-react-work 2.0.0-dev.9.1 → 2.0.0-rc.1

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 (163) hide show

package/lib/components/Stakeholders/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/Stakeholders/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './Stakeholders';
2	+ //# sourceMappingURL=index.js.map

package/lib/components/Stakeholders/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Stakeholders';\nexport { StakeholdersProps } from './Stakeholders.types';\n"]}

package/lib/components/Tags/Tags.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { FunctionComponent, Ref } from 'react';
+import { BaseProps, ForwardProps, ErrorStateProps } from '@pega/cosmos-react-core';
+export interface SelectedTag {
+    text: string;
+    newTag?: boolean;
+}
+export interface TagsProps extends BaseProps {
+    /** A list of tags. */
+    tags: string[];
+    /**
+     * A list of available tags to add from.
+     * @default []
+     * */
+    availableTags?: string[];
+    /** If true, a loading indicator will render in place of the tags list. */
+    loading?: boolean;
+    /** If defined, an error message will render in the component and actions will be disabled. */
+    error?: boolean | string | ErrorStateProps;
+    /** Callback triggered when a search query is changed in the Edit tags modal. */
+    onSearch?: (filterValue: string) => void;
+    /** Callback triggered when a tag is clicked. */
+    onTagClick?: (tag: string) => void;
+    /** Callback triggered when modified tags are submitted from the modal. */
+    onEditTags?: (tags: SelectedTag[]) => Promise<void>;
+    /** Ref for the Tags card. */
+    ref?: Ref<HTMLElement>;
+}
+export declare const StyledTags: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {
+    isLoading?: boolean | undefined;
+    viewAll?: boolean | undefined;
+}, never>;
+declare const Tags: FunctionComponent<TagsProps & ForwardProps>;
+export default Tags;
+//# sourceMappingURL=Tags.d.ts.map

package/lib/components/Tags/Tags.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAEjB,GAAG,EAMJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAyBZ,eAAe,EAChB,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,sBAAsB;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;SAGK;IACL,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,6BAA6B;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AASD,eAAO,MAAM,UAAU;;;SAwBtB,CAAC;AAgMF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA+HrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Tags/Tags.js ADDED Viewed

@@ -0,0 +1,227 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useMemo, useState, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Modal, ModalManagerContext, Tag, Button, useI18n, Count, Flex, Text, CardHeader, Card, Actions, Icon, registerIcon, CardContent, Progress, EmptyState, ErrorState, Popover, Menu, useConsolidatedRef, CardFooter, Banner } from '@pega/cosmos-react-core';
+import * as tagIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/tag.icon';
+import { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+import MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';
+import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
+registerIcon(tagIcon);
+export const StyledTags = styled.article(({ isLoading, theme, viewAll }) => {
+    return css `
+      ${StyledCardContent} {
+        max-height: ${viewAll ? 'fit-content' : '10rem'};
+        overflow-y: hidden;
+      }
+      ${StyledCardFooter} {
+        margin-block-start: ${theme.base.spacing};
+      }
+      ${StyledTag} {
+        cursor: pointer;
+      }
+      ${isLoading &&
+        css `
+        & > ${StyledCardContent} {
+          height: 4rem;
+        }
+      `}
+    `;
+});
+StyledTags.defaultProps = defaultThemeProp;
+const StyledMenuPopover = styled.div `
+  width: 40ch;
+`;
+const StyledBanner = styled(Banner)(({ theme }) => {
+    return css `
+    padding-block-end: calc(2 * ${theme.base.spacing});
+  `;
+});
+StyledBanner.defaultProps = defaultThemeProp;
+const EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }) => {
+    const { ModalContext } = useContext(ModalManagerContext);
+    const { dismiss } = useContext(ModalContext);
+    const inputRef = useRef(null);
+    const [filterValue, setFilterValue] = useState('');
+    const [editError, setEditError] = useState('');
+    const [selected, setSelected] = useState([]);
+    const [items, setItems] = useState([]);
+    const t = useI18n();
+    useEffect(() => {
+        setSelected(tags.map(tag => {
+            return { text: tag };
+        }));
+    }, [tags]);
+    useEffect(() => {
+        const menuItems = availableTags
+            .filter(tag => !selected.some(x => x.text === tag))
+            .map(tag => {
+            return { id: tag, primary: tag };
+        });
+        if (filterValue &&
+            !menuItems.some(x => x.id === filterValue) &&
+            !selected.some(x => x.text === filterValue)) {
+            menuItems.push({
+                id: `custom:${filterValue}`,
+                primary: t('use_input_value', [filterValue])
+            });
+        }
+        setItems(menuItems);
+    }, [availableTags, filterValue, selected]);
+    const setInputValue = (value) => {
+        setEditError('');
+        setFilterValue(value);
+        onSearch?.(value);
+    };
+    const addTag = (tag) => {
+        if (tag && !selected.find(x => x.text === tag)) {
+            if (items.find(x => x.id === tag)) {
+                setSelected(curr => [...curr, { text: tag }]);
+            }
+            else {
+                setSelected(curr => [...curr, { text: tag, newTag: true }]);
+            }
+            setInputValue('');
+        }
+    };
+    const handlePaste = (e) => {
+        const potentialTags = e.clipboardData.getData('Text').split(' ');
+        potentialTags.forEach(potentialTag => {
+            addTag(potentialTag);
+        });
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === ' ') {
+            addTag(filterValue);
+        }
+    };
+    return (_jsxs(Modal, { heading: t('edit_tags'), actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: t('cancel') }, void 0), _jsx(Button, { variant: 'primary', onClick: () => {
+                        onEditTags(selected)
+                            .then(dismiss)
+                            .catch((error) => {
+                            if (error instanceof Error) {
+                                setEditError(error.message || t('unknown_error'));
+                            }
+                            else {
+                                setEditError(t('unknown_error'));
+                            }
+                        });
+                    }, children: t('submit') }, void 0)] }, void 0), children: [editError && (_jsx(StyledBanner, { id: 'edit-tags-error', variant: 'urgent', messages: [editError], onDismiss: () => {
+                    setEditError('');
+                } }, void 0)), _jsx(MultiSelectInput, { ref: inputRef, selected: selected.map(({ text }) => {
+                    return { id: text, text };
+                }), value: filterValue, onChange: (e) => {
+                    setInputValue(e.target.value.trim());
+                }, onRemove: (id, index) => {
+                    if (selected[index].text === id) {
+                        const updatedSelected = [...selected];
+                        updatedSelected.splice(index, 1);
+                        setSelected(updatedSelected);
+                        setEditError('');
+                    }
+                }, onBlur: () => {
+                    setInputValue('');
+                }, onPaste: handlePaste, onKeyDown: handleKeyDown, autoFocus: true }, void 0), _jsx(Popover, { as: StyledMenuPopover, show: !!filterValue && !!items?.length, target: inputRef.current, placement: 'bottom-start', modifiers: [
+                    {
+                        name: 'flip',
+                        enabled: true,
+                        options: {
+                            fallbackPlacements: ['top-start']
+                        }
+                    },
+                    {
+                        name: 'preventOverflow',
+                        enabled: true
+                    },
+                    {
+                        name: 'hide',
+                        enabled: false
+                    }
+                ], onMouseDown: (e) => e.preventDefault(), children: _jsx(Menu, { role: 'listbox', mode: 'action', items: items, focusControlEl: inputRef.current || undefined, onItemClick: id => {
+                        if (id.includes('custom:')) {
+                            const tagValue = id.replace('custom:', '');
+                            if (!selected.some(x => x.text === tagValue)) {
+                                setSelected(curr => [...curr, { text: tagValue, newTag: true }]);
+                            }
+                        }
+                        else {
+                            setSelected(curr => [...curr, { text: id }]);
+                        }
+                        setInputValue('');
+                    }, arrowNavigationUnsupported: true }, void 0) }, void 0)] }, void 0));
+};
+const Tags = forwardRef(({ tags, availableTags, loading, error, onSearch, onTagClick, onEditTags, ...restProps }, ref) => {
+    const { create: createModal } = useContext(ModalManagerContext);
+    const editModalMethods = useRef();
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const consolidatedRef = useConsolidatedRef(containerRef, ref);
+    const [footer, setFooter] = useState(false);
+    const [viewAll, setViewAll] = useState(false);
+    const t = useI18n();
+    useEffect(() => {
+        if (containerRef.current && contentRef.current) {
+            if (contentRef.current.getBoundingClientRect().bottom >
+                containerRef.current.getBoundingClientRect().bottom) {
+                setFooter(true);
+            }
+            else {
+                setFooter(false);
+            }
+        }
+    }, [containerRef.current, contentRef.current, tags]);
+    useEffect(() => {
+        if (!onEditTags) {
+            editModalMethods.current?.dismiss();
+        }
+        else {
+            editModalMethods.current?.update({
+                tags,
+                availableTags,
+                onSearch,
+                onEditTags
+            });
+        }
+    }, [availableTags, tags, onSearch, onEditTags]);
+    const openEditModal = () => {
+        if (!onEditTags)
+            return;
+        editModalMethods.current = createModal(EditTagModal, {
+            tags,
+            availableTags,
+            onSearch,
+            onEditTags
+        });
+    };
+    const content = useMemo(() => {
+        if (loading) {
+            return _jsx(Progress, { placement: 'local' }, void 0);
+        }
+        if (error) {
+            if (typeof error === 'boolean')
+                return _jsx(ErrorState, {}, void 0);
+            if (typeof error === 'string')
+                return _jsx(ErrorState, { message: error }, void 0);
+            return _jsx(ErrorState, { ...error }, void 0);
+        }
+        return tags.length > 0 ? (_jsx(Flex, { ref: contentRef, container: { gap: 1, wrap: 'wrap' }, children: tags.map(tag => {
+                return (_jsx(Tag, { onClick: () => onTagClick?.(tag), children: tag }, tag));
+            }) }, void 0)) : (_jsx(EmptyState, {}, void 0));
+    }, [loading, error, tags]);
+    return (_jsxs(Card, { ref: consolidatedRef, ...restProps, as: StyledTags, viewAll: viewAll, isLoading: loading, children: [_jsxs(CardHeader, { children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'tag' }, void 0), _jsx(Text, { variant: 'h2', children: t('tags') }, void 0), _jsx(Count, { children: tags.length }, void 0)] }, void 0), _jsx(Actions, { items: onEditTags
+                            ? [
+                                {
+                                    id: 'editTags',
+                                    text: t('edit_tags'),
+                                    icon: 'pencil',
+                                    onClick: openEditModal,
+                                    disabled: !!error
+                                }
+                            ]
+                            : [] }, void 0)] }, void 0), _jsx(CardContent, { children: content }, void 0), footer && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => setViewAll(curr => !curr), children: viewAll ? t('view_less') : t('view_all') }, void 0) }, void 0))] }, void 0));
+});
+export default Tags;
+//# sourceMappingURL=Tags.js.map

package/lib/components/Tags/Tags.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n ClipboardEvent,\n KeyboardEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useContext,\n useMemo,\n useState,\n useEffect,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Modal,\n ModalManagerContext,\n Tag,\n Button,\n ModalMethods,\n useI18n,\n Count,\n Flex,\n Text,\n CardHeader,\n Card,\n Actions,\n Icon,\n registerIcon,\n CardContent,\n Progress,\n EmptyState,\n ErrorState,\n Popover,\n Menu,\n MenuProps,\n useConsolidatedRef,\n CardFooter,\n Banner,\n ErrorStateProps\n} from '@pega/cosmos-react-core';\nimport * as tagIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/tag.icon';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nregisterIcon(tagIcon);\n\nexport interface SelectedTag {\n text: string;\n newTag?: boolean;\n}\n\nexport interface TagsProps extends BaseProps {\n /** A list of tags. */\n tags: string[];\n /**\n * A list of available tags to add from.\n * @default []\n * */\n availableTags?: string[];\n /** If true, a loading indicator will render in place of the tags list. */\n loading?: boolean;\n /** If defined, an error message will render in the component and actions will be disabled. */\n error?: boolean | string | ErrorStateProps;\n /** Callback triggered when a search query is changed in the Edit tags modal. */\n onSearch?: (filterValue: string) => void;\n /** Callback triggered when a tag is clicked. */\n onTagClick?: (tag: string) => void;\n /** Callback triggered when modified tags are submitted from the modal. */\n onEditTags?: (tags: SelectedTag[]) => Promise<void>;\n /** Ref for the Tags card. */\n ref?: Ref<HTMLElement>;\n}\n\ninterface EditTagModalProps {\n tags: TagsProps['tags'];\n availableTags: TagsProps['availableTags'];\n onSearch?: TagsProps['onSearch'];\n onEditTags: NonNullable<TagsProps['onEditTags']>;\n}\n\nexport const StyledTags = styled.article<{ isLoading?: boolean; viewAll?: boolean }>(\n ({ isLoading, theme, viewAll }) => {\n return css`\n ${StyledCardContent} {\n max-height: ${viewAll ? 'fit-content' : '10rem'};\n overflow-y: hidden;\n }\n\n ${StyledCardFooter} {\n margin-block-start: ${theme.base.spacing};\n }\n\n ${StyledTag} {\n cursor: pointer;\n }\n\n ${isLoading &&\n css`\n & > ${StyledCardContent} {\n height: 4rem;\n }\n `}\n `;\n }\n);\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst StyledMenuPopover = styled.div`\n width: 40ch;\n`;\n\nconst StyledBanner = styled(Banner)(({ theme }) => {\n return css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }: EditTagModalProps) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n const inputRef = useRef<HTMLInputElement>(null);\n const [filterValue, setFilterValue] = useState('');\n const [editError, setEditError] = useState('');\n const [selected, setSelected] = useState<SelectedTag[]>([]);\n const [items, setItems] = useState<MenuProps['items']>([]);\n const t = useI18n();\n\n useEffect(() => {\n setSelected(\n tags.map(tag => {\n return { text: tag };\n })\n );\n }, [tags]);\n\n useEffect(() => {\n const menuItems = availableTags\n .filter(tag => !selected.some(x => x.text === tag))\n .map(tag => {\n return { id: tag, primary: tag };\n });\n\n if (\n filterValue &&\n !menuItems.some(x => x.id === filterValue) &&\n !selected.some(x => x.text === filterValue)\n ) {\n menuItems.push({\n id: `custom:${filterValue}`,\n primary: t('use_input_value', [filterValue])\n });\n }\n\n setItems(menuItems);\n }, [availableTags, filterValue, selected]);\n\n const setInputValue = (value: string) => {\n setEditError('');\n setFilterValue(value);\n onSearch?.(value);\n };\n\n const addTag = (tag: string) => {\n if (tag && !selected.find(x => x.text === tag)) {\n if (items.find(x => x.id === tag)) {\n setSelected(curr => [...curr, { text: tag }]);\n } else {\n setSelected(curr => [...curr, { text: tag, newTag: true }]);\n }\n setInputValue('');\n }\n };\n\n const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n const potentialTags = e.clipboardData.getData('Text').split(' ');\n\n potentialTags.forEach(potentialTag => {\n addTag(potentialTag);\n });\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === ' ') {\n addTag(filterValue);\n }\n };\n\n return (\n <Modal\n heading={t('edit_tags')}\n actions={\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button\n variant='primary'\n onClick={() => {\n onEditTags(selected)\n .then(dismiss)\n .catch((error: unknown) => {\n if (error instanceof Error) {\n setEditError(error.message || t('unknown_error'));\n } else {\n setEditError(t('unknown_error'));\n }\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n }\n >\n {editError && (\n <StyledBanner\n id='edit-tags-error'\n variant='urgent'\n messages={[editError]}\n onDismiss={() => {\n setEditError('');\n }}\n />\n )}\n <MultiSelectInput\n ref={inputRef}\n selected={selected.map(({ text }) => {\n return { id: text, text };\n })}\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value.trim());\n }}\n onRemove={(id: string, index: number) => {\n if (selected[index].text === id) {\n const updatedSelected = [...selected];\n updatedSelected.splice(index, 1);\n setSelected(updatedSelected);\n setEditError('');\n }\n }}\n onBlur={() => {\n setInputValue('');\n }}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n autoFocus\n />\n <Popover\n as={StyledMenuPopover}\n show={!!filterValue && !!items?.length}\n target={inputRef.current}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n enabled: true,\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n {\n name: 'preventOverflow',\n enabled: true\n },\n {\n name: 'hide',\n enabled: false\n }\n ]}\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n >\n <Menu\n role='listbox'\n mode='action'\n items={items}\n focusControlEl={inputRef.current || undefined}\n onItemClick={id => {\n if (id.includes('custom:')) {\n const tagValue = id.replace('custom:', '');\n if (!selected.some(x => x.text === tagValue)) {\n setSelected(curr => [...curr, { text: tagValue, newTag: true }]);\n }\n } else {\n setSelected(curr => [...curr, { text: id }]);\n }\n setInputValue('');\n }}\n arrowNavigationUnsupported\n />\n </Popover>\n </Modal>\n );\n};\n\nconst Tags: FunctionComponent<TagsProps & ForwardProps> = forwardRef(\n (\n {\n tags,\n availableTags,\n loading,\n error,\n onSearch,\n onTagClick,\n onEditTags,\n ...restProps\n }: PropsWithoutRef<TagsProps>,\n ref: TagsProps['ref']\n ) => {\n const { create: createModal } = useContext(ModalManagerContext);\n const editModalMethods = useRef<ModalMethods<EditTagModalProps>>();\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const consolidatedRef = useConsolidatedRef(containerRef, ref);\n const [footer, setFooter] = useState(false);\n const [viewAll, setViewAll] = useState(false);\n const t = useI18n();\n\n useEffect(() => {\n if (containerRef.current && contentRef.current) {\n if (\n contentRef.current.getBoundingClientRect().bottom >\n containerRef.current.getBoundingClientRect().bottom\n ) {\n setFooter(true);\n } else {\n setFooter(false);\n }\n }\n }, [containerRef.current, contentRef.current, tags]);\n\n useEffect(() => {\n if (!onEditTags) {\n editModalMethods.current?.dismiss();\n } else {\n editModalMethods.current?.update({\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n }\n }, [availableTags, tags, onSearch, onEditTags]);\n\n const openEditModal = () => {\n if (!onEditTags) return;\n\n editModalMethods.current = createModal(EditTagModal, {\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n };\n\n const content = useMemo(() => {\n if (loading) {\n return <Progress placement='local' />;\n }\n\n if (error) {\n if (typeof error === 'boolean') return <ErrorState />;\n if (typeof error === 'string') return <ErrorState message={error} />;\n return <ErrorState {...error} />;\n }\n\n return tags.length > 0 ? (\n <Flex ref={contentRef} container={{ gap: 1, wrap: 'wrap' }}>\n {tags.map(tag => {\n return (\n <Tag key={tag} onClick={() => onTagClick?.(tag)}>\n {tag}\n </Tag>\n );\n })}\n </Flex>\n ) : (\n <EmptyState />\n );\n }, [loading, error, tags]);\n\n return (\n <Card\n ref={consolidatedRef}\n {...restProps}\n as={StyledTags}\n viewAll={viewAll}\n isLoading={loading}\n >\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='tag' />\n <Text variant='h2'>{t('tags')}</Text>\n <Count>{tags.length}</Count>\n </Flex>\n <Actions\n items={\n onEditTags\n ? [\n {\n id: 'editTags',\n text: t('edit_tags'),\n icon: 'pencil',\n onClick: openEditModal,\n disabled: !!error\n }\n ]\n : []\n }\n />\n </CardHeader>\n <CardContent>{content}</CardContent>\n {footer && (\n <CardFooter justify='center'>\n <Button variant='link' onClick={() => setViewAll(curr => !curr)}>\n {viewAll ? t('view_less') : t('view_all')}\n </Button>\n </CardFooter>\n )}\n </Card>\n );\n }\n);\n\nexport default Tags;\n"]}

package/lib/components/Tags/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { default } from './Tags';
+export { TagsProps } from './Tags';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Tags/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/Tags/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './Tags';
2	+ //# sourceMappingURL=index.js.map

package/lib/components/Tags/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tags/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { default } from './Tags';\nexport { TagsProps } from './Tags';\n"]}

package/lib/components/Tasks/TaskList.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { FunctionComponent, ReactNode, Ref } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+export interface TaskItemProps {
+    /** Name of the task displayed in the list. */
+    name: NonNullable<ReactNode>;
+    /** Avatar element to represent the task's assignee. */
+    avatar?: ReactNode;
+    /** MetaList element with info related to the task. */
+    meta?: ReactNode;
+    /** Region for task level actions such as opening or dismissing. */
+    actions?: ReactNode;
+    /** Content for the task when open. */
+    content?: ReactNode;
+    [key: string]: unknown;
+}
+export interface TaskListProps {
+    items: TaskItemProps[];
+    hasFooter?: boolean;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLElement>;
+}
+export declare const TaskItem: ({ name, avatar, meta, actions, content, ...restProps }: TaskItemProps) => JSX.Element;
+declare const TaskList: FunctionComponent<TaskListProps & ForwardProps>;
+export default TaskList;
+//# sourceMappingURL=TaskList.d.ts.map

package/lib/components/Tasks/TaskList.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EACL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,aAAa;IAC5B,8CAA8C;IAC9C,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC7B,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAeD,eAAO,MAAM,QAAQ,2DAA4D,aAAa,gBA2B7F,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAU7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Tasks/TaskList.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { SummaryItem, StyledSummaryListItem, Flex, defaultThemeProp } from '@pega/cosmos-react-core';
+const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
+    return css `
+    ${hasFooter &&
+        css `
+      > li:last-child {
+        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      }
+    `}
+  `;
+});
+StyledTaskList.defaultProps = defaultThemeProp;
+export const TaskItem = ({ name, avatar, meta, actions, content, ...restProps }) => {
+    const summary = (_jsx(SummaryItem, { visual: avatar, primary: name, secondary: meta, actions: content ? null : actions }, void 0));
+    return (_jsx(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: StyledSummaryListItem, forwardedAs: 'li', ...restProps, children: content ? (_jsxs(_Fragment, { children: [summary, content] }, void 0)) : (summary) }, void 0));
+};
+const TaskList = forwardRef(({ items, hasFooter = false }, ref) => {
+    return (_jsx(Flex, { container: { direction: 'column' }, as: StyledTaskList, hasFooter: hasFooter, ref: ref, children: items.map((item, i) => (_createElement(TaskItem, { ...item, key: `${i + 1}` }))) }, void 0));
+});
+export default TaskList;
+//# sourceMappingURL=TaskList.js.map

package/lib/components/Tasks/TaskList.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,WAAW,EACX,qBAAqB,EACrB,IAAI,EACJ,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;MACN,SAAS;QACX,GAAG,CAAA;;yCAEkC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAErE;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAiB,EAAE,EAAE;IAChG,MAAM,OAAO,GAAG,CACd,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,WACjC,CACH,CAAC;IACF,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,qBAAqB,EACzB,WAAW,EAAC,IAAI,KACZ,SAAS,YAEZ,OAAO,CAAC,CAAC,CAAC,CACT,8BACG,OAAO,EACP,OAAO,YACP,CACJ,CAAC,CAAC,CAAC,CACF,OAAO,CACR,WACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAkC,EAAE,GAAG,EAAE,EAAE;IACpE,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,YACzF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAAC,QAAQ,OAAK,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,GAAI,CACxC,CAAC,WACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nexport interface TaskItemProps {\n /** Name of the task displayed in the list. */\n name: NonNullable<ReactNode>;\n /** Avatar element to represent the task's assignee. */\n avatar?: ReactNode;\n /** MetaList element with info related to the task. */\n meta?: ReactNode;\n /** Region for task level actions such as opening or dismissing. */\n actions?: ReactNode;\n /** Content for the task when open. */\n content?: ReactNode;\n [key: string]: unknown;\n}\n\nexport interface TaskListProps {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n return css`\n ${hasFooter &&\n css`\n > li:last-child {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `}\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nexport const TaskItem = ({ name, avatar, meta, actions, content, ...restProps }: TaskItemProps) => {\n const summary = (\n <SummaryItem\n visual={avatar}\n primary={name}\n secondary={meta}\n actions={content ? null : actions}\n />\n );\n return (\n <Flex\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n as={StyledSummaryListItem}\n forwardedAs='li'\n {...restProps}\n >\n {content ? (\n <>\n {summary}\n {content}\n </>\n ) : (\n summary\n )}\n </Flex>\n );\n};\n\nconst TaskList: FunctionComponent<TaskListProps & ForwardProps> = forwardRef(\n ({ items, hasFooter = false }: PropsWithoutRef<TaskListProps>, ref) => {\n return (\n <Flex container={{ direction: 'column' }} as={StyledTaskList} hasFooter={hasFooter} ref={ref}>\n {items.map((item, i) => (\n <TaskItem {...item} key={`${i + 1}`} />\n ))}\n </Flex>\n );\n }\n);\n\nexport default TaskList;\n"]}

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

@@ -1,18 +1,6 @@
 import { ReactNode, FC, ReactElement } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
-export interface TaskItemProps {
-    /** Name of the task displayed in the list. */
-    name: ReactNode;
-    /** Avatar element to represent the task's assignee. */
-    avatar?: ReactNode;
-    /** MetaList element with info related to the task. */
-    meta?: ReactNode;
-    /** Region for task level actions such as opening or dismissing. */
-    actions?: ReactNode;
-    /** Content for the task when open. */
-    content?: ReactNode;
-    [key: string]: unknown;
-}
+import { TaskItemProps } from './TaskList';
 export interface TasksProps {
     /** An array of TaskItemProps to generate the list.  */
     items: TaskItemProps[];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGzE,OAAO,EAWL,YAAY,~~EAGb~~,MAAM,yBAAyB,CAAC;AAEjC,~~MAAM~~,~~WAAW~~,aAAa~~;IAC5B~~,~~8CAA8C;IAC9C,IAAI,~~EAAE,~~SAAS,CAAC;IAChB,uDAAuD;IACvD,~~MAAM,~~CAAC~~,~~EAAE,SAAS,~~CAAC;~~IACnB~~,~~sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,CAAC,GAAG,EAAE,~~MAAM,~~GAAG,OAAO,CAAC;CACxB;AACD,MAAM,~~WAAW,UAAU;IACzB,uDAAuD;IACvD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gDAAgD;IAChD,gBAAgB,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4DAA4D;IAC5D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,2IAA2I;IAC3I,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;~~AAoDD~~,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,~~CAyExC~~,CAAC;AAEF,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGzE,OAAO,EAWL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAE/D,MAAM,WAAW,UAAU;IACzB,uDAAuD;IACvD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gDAAgD;IAChD,gBAAgB,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4DAA4D;IAC5D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,2IAA2I;IAC3I,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAUD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CA6DxC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -1,13 +1,8 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { Card, CardHeader, CardContent, CardFooter, Flex, Text, SummaryItem, Count, Button, useI18n, defaultThemeProp, StyledSummaryListItem } from '@pega/cosmos-react-core';
-const TaskItem = ({ name, avatar, meta, actions, content, ...restProps }) => {
-    const summary = (_jsx(SummaryItem, { visual: avatar, primary: name, secondary: meta, actions: content ? null : actions }, void 0));
-    return (_jsx(Flex, Object.assign({ container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: StyledSummaryListItem, forwardedAs: 'li' }, restProps, { children: content ? (_jsxs(_Fragment, { children: [summary,
-                content] }, void 0)) : (summary) }), void 0));
-};
+import { Card, CardHeader, CardContent, CardFooter, Flex, Text, SummaryItem, Count, Button, useI18n } from '@pega/cosmos-react-core';
+import TaskList, { TaskItem } from './TaskList';
 const StyledTasks = styled(Card)(({ theme, openItem }) => {
     return openItem
         ? css `
@@ -15,32 +10,18 @@ const StyledTasks = styled(Card)(({ theme, openItem }) => {
       `
         : null;
 });
-const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
-    return css `
-    ${hasFooter &&
-        css `
-      > li:last-child {
-        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-      }
-    `}
-  `;
-});
-StyledTaskList.defaultProps = defaultThemeProp;
 const Tasks = (props) => {
     const { items = [], headerText, headerVisual, headerSecondary, count, onExpandToggle, emptyPlaceholder, ...restProps } = props;
     const openItem = items.find(item => item.content);
     const t = useI18n();
-    const TaskItems = useMemo(() => {
-        return openItem ? (_jsx(TaskItem, Object.assign({}, openItem), void 0)) : (items.map((item, i) => _createElement(TaskItem, { ...item, key: `${i + 1}` })));
-    }, [items, openItem]);
     const hasFooter = useMemo(() => {
         return !openItem && typeof count === 'number' && count > 3;
     }, [openItem, count]);
-    return (_jsxs(StyledTasks, Object.assign({}, restProps, { openItem: !!openItem }, { children: [!openItem && (_jsx(CardHeader, { children: _jsx(SummaryItem, { visual: headerVisual, primary: _jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 } }, { children: [_jsx(Text, Object.assign({ variant: 'h2' }, { children: headerText }), void 0),
-                            _jsx(Count, { children: count !== null && count !== void 0 ? count : null }, void 0)] }), void 0), secondary: headerSecondary }, void 0) }, void 0)),
-            _jsx(CardContent, { children: items.length > 0 ? (_jsx(Flex, Object.assign({ container: { direction: 'column' }, as: StyledTaskList, hasFooter: hasFooter }, { children: TaskItems }), void 0)) : (emptyPlaceholder) }, void 0),
-            hasFooter && (_jsx(CardFooter, Object.assign({ justify: 'center' }, { children: _jsx(Button, Object.assign({ variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', 'tasks'), onClick: (e) => {
-                        onExpandToggle === null || onExpandToggle === void 0 ? void 0 : onExpandToggle();
+    const TaskItems = useMemo(() => {
+        return openItem ? _jsx(TaskItem, { ...openItem }, void 0) : _jsx(TaskList, { items: items, hasFooter: hasFooter }, void 0);
+    }, [items, openItem]);
+    return (_jsxs(StyledTasks, { ...restProps, openItem: !!openItem, children: [!openItem && (_jsx(CardHeader, { children: _jsx(SummaryItem, { visual: headerVisual, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: headerText }, void 0), _jsx(Count, { children: count ?? null }, void 0)] }, void 0), secondary: headerSecondary }, void 0) }, void 0)), _jsx(CardContent, { children: items.length > 0 ? TaskItems : emptyPlaceholder }, void 0), hasFooter && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { 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;
                             requestAnimationFrame(() => {
@@ -48,7 +29,7 @@ const Tasks = (props) => {
                                     currentTarget.scrollIntoView();
                             });
                         }
-                    } }, { children: t(!!count && count > items.length ? 'show_more' : 'show_less') }), void 0) }), void 0))] }), void 0));
+                    }, children: t(!!count && count > items.length ? 'show_more' : 'show_less') }, void 0) }, void 0))] }, void 0));
 };
 export default Tasks;
 //# sourceMappingURL=Tasks.js.map

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,EAA+B,OAAO,EAAc,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,~~EAEP~~,~~gBAAgB,EAChB,qBAAqB,EACtB,~~MAAM,yBAAyB,CAAC;~~AAgCjC~~,~~MAAM~~,QAAQ,~~GAAG,CAAC,~~EAAE,~~IAAI,~~EAAE,~~MAAM~~,~~EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,~~EAAiB,~~EAAE,EAAE;IACzF,~~MAAM,~~OAAO~~,~~GAAG,CACd,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,OAAO,~~CAAC~~,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,WACjC,CACH,CAAC~~;~~IACF~~,OAAO,CACL,KAAC,IAAI,kBACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,qBAAqB,EACzB,WAAW,EAAC,IAAI,IACZ,SAAS,cAEZ,OAAO,CAAC,CAAC,CAAC,CACT,8BACG,OAAO;gBACP,OAAO,YACP,CACJ,CAAC,CAAC,CAAC,CACF,OAAO,CACR,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/E,OAAO,QAAQ;QACb,CAAC,CAAC,GAAG,CAAA;sBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;OACpC;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,MAAM,~~cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,~~KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;MACN,SAAS;QACX,GAAG,CAAA;;yCAEkC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAErE;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,KAAK,GAAkC,CAAC,KAAiB,EAAE,EAAE;IACjE,MAAM,EACJ,KAAK,GAAG,EAAE,EACV,UAAU,EACV,YAAY,EACZ,eAAe,EACf,KAAK,EACL,cAAc,EACd,gBAAgB,EAChB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,~~QAAQ,~~CAAC,~~CAAC~~,~~CAAC~~,~~CAChB~~,~~KAAC~~,~~QAAQ~~,~~oBAAK,~~QAAQ,~~UAAI~~,~~CAC3B,CAAC,CAAC,CAAC,CACF,~~KAAK,~~CAAC,~~GAAG,CAAC,CAAC,~~IAAI~~,EAAE,CAAC,~~EAAE~~,EAAE,CAAC,~~eAAC~~,~~QAAQ~~,~~OAAK~~,~~IAAI~~,~~EAAE,~~GAAG,~~EAAE~~,~~GAAG,~~CAAC,GAAG,~~CAAC,~~EAAE,~~GAAI~~,CAAC,~~CAChE,~~CAAC~~;IACJ~~,CAAC,~~EAAE~~,~~CAAC~~,~~KAAK~~,~~EAAE,~~QAAQ,~~CAAC~~,CAAC,CAAC~~;IAEtB~~,~~MAAM,SAAS,GAAG,OAAO,~~CAAC,~~GAAG~~,~~EAAE;QAC7B,OAAO,CAAC,~~QAAQ,~~IAAI~~,~~OAAO,~~KAAK,KAAK,~~QAAQ~~,~~IAAI~~,~~KAAK~~,~~GAAG~~,~~CAAC~~,CAAC;~~IAC7D~~,CAAC,EAAE,CAAC,~~QAAQ~~,EAAE,~~KAAK~~,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,MAAC,WAAW,~~oBAAK~~,SAAS,~~IAAE~~,QAAQ,EAAE,CAAC,CAAC,QAAQ,~~iBAC7C~~,CAAC,QAAQ,IAAI,CACZ,KAAC,UAAU,cACT,KAAC,WAAW,IACV,MAAM,EAAE,YAAY,EACpB,OAAO,EACL,MAAC,IAAI,~~kBAAC~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,~~iBAC~~/C,KAAC,IAAI,~~kBAAC~~,OAAO,EAAC,IAAI,~~gBAAE~~,UAAU,~~YAAQ;4BACtC~~,KAAC,KAAK,cAAE,KAAK,~~aAAL~~,~~KAAK,cAAL,KAAK,GAAI,~~IAAI,WAAS,~~aACzB~~,EAET,SAAS,EAAE,eAAe,WAC1B,WACS,CACd~~;YACD~~,KAAC,WAAW,~~cACT~~,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,~~CAClB,KAAC,IAAI,kBAAC,~~SAAS,~~EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,gBAC/E,SAAS,YACL,CACR,~~CAAC,CAAC,CAAC,~~CACF,~~gBAAgB,~~CACjB~~,~~WACW;YAEb~~,SAAS,IAAI,CACZ,KAAC,UAAU,~~kBAAC~~,OAAO,EAAC,QAAQ,~~gBAC1B~~,KAAC,MAAM,~~kBACL~~,OAAO,EAAC,MAAM,gBACF,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,OAAO,CAAC,~~EACnF~~,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,cAAc,~~aAAd~~,~~cAAc~~,~~uBAAd,cAAc,EAAI,~~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,~~gBAEA~~,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,~~YACxD~~,~~YACE~~,CACd,~~aACW~~,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { ReactNode, FC, ReactElement, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Flex,\n Text,\n SummaryItem,\n Count,\n Button,\n useI18n,\n ForwardProps~~,\n defaultThemeProp,\n StyledSummaryListItem~~\n} from '@pega/cosmos-react-core';\n\~~nexport~~ ~~interface~~ ~~TaskItemProps~~ {\n /** ~~Name~~ of ~~the~~ ~~task~~ ~~displayed in the list. /\n name: ReactNode;\n /* Avatar element to represent the task~~'~~s assignee. /\n avatar?: ReactNode~~;\n /* MetaList element with info related to the task. /\n meta?: ReactNode;\n /* Region for task level actions such as opening or dismissing. /\n actions?: ReactNode;\n /* Content for the task when open. /\n content?: ReactNode;\n [key: string]: unknown;\n}\nexport interface TasksProps {\n /* An array of TaskItemProps to generate the list. /\n items: TaskItemProps[];\n /* Content to render when the list is empty. /\n emptyPlaceholder: ReactNode;\n /* Heading text to render at the top of the list. /\n headerText: string;\n /* A visual element i.e. (Avatar \| Icon) to accompany the header text. /\n headerVisual?: ReactElement;\n /* A region for supplemental task list info or controls. /\n headerSecondary?: ReactNode;\n /* Integer representing the total count of tasks. /\n count?: number \| null;\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. */\n onExpandToggle?: () => void;\n}\n\nconst TaskItem = ({ name, avatar, meta, actions, content, ...restProps }: TaskItemProps) => {\n const summary = (\n <SummaryItem\n visual={avatar}\n primary={name}\n secondary={meta}\n actions={content ? null : actions}\n />\n );\n return (\n <Flex\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n as={StyledSummaryListItem}\n forwardedAs='li'\n {...restProps}\n >\n {content ? (\n <>\n {summary}\n {content}\n </>\n ) : (\n summary\n )}\n </Flex>\n );\n};\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : null;\n});\n\nconst StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n return css`\n ${hasFooter &&\n css`\n > li:last-child {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `}\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n items = [],\n headerText,\n headerVisual,\n headerSecondary,\n count,\n onExpandToggle,\n emptyPlaceholder,\n ...restProps\n } = props;\n const openItem = items.find(item => item.content);\n const t = useI18n();\n\n const ~~TaskItems~~ = useMemo(() => {\n return openItem ? ~~(\n <TaskItem~~ ~~{...openItem}~~ ~~/>\n )~~ : ~~(\n items.map((item,~~ i) => ~~<TaskItem {...item} key={`${i + 1}`} />)\n )~~;\n }, [~~items~~, ~~openItem~~]);\n\n const ~~hasFooter~~ = useMemo(() => {\n return !openItem && ~~typeof~~ ~~count~~ ~~===~~ ~~'number'~~ && ~~count~~ > ~~3;\~~n }, [~~openItem~~, ~~count~~]);\n\n return (\n <StyledTasks {...restProps} openItem={!!openItem}>\n {!openItem && (\n <CardHeader>\n <SummaryItem\n visual={headerVisual}\n primary={\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{headerText}</Text>\n <Count>{count ?? null}</Count>\n </Flex>\n }\n secondary={headerSecondary}\n />\n </CardHeader>\n )}\n <CardContent~~>\n~~ {items.length > 0 ? ~~(\n <Flex container={{ direction: 'column' }} as={StyledTaskList} hasFooter={hasFooter}>\n {~~TaskItems~~}\n </Flex>\n )~~ : ~~(\n~~ emptyPlaceholder~~\n )~~}\n </CardContent>\n\n {hasFooter && (\n <CardFooter justify='center'>\n <Button\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 >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default Tasks;\n"]}
1	+ {"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FC, ReactElement, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Flex,\n Text,\n SummaryItem,\n Count,\n Button,\n useI18n,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\n\nexport interface TasksProps {\n /** An array of TaskItemProps to generate the list. /\n items: TaskItemProps[];\n /* Content to render when the list is empty. /\n emptyPlaceholder: ReactNode;\n /* Heading text to render at the top of the list. /\n headerText: string;\n /* A visual element i.e. (Avatar \| Icon) to accompany the header text. /\n headerVisual?: ReactElement;\n /* A region for supplemental task list info or controls. /\n headerSecondary?: ReactNode;\n /* Integer representing the total count of tasks. /\n count?: number \| null;\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. */\n onExpandToggle?: () => void;\n}\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : null;\n});\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n items = [],\n headerText,\n headerVisual,\n headerSecondary,\n count,\n onExpandToggle,\n emptyPlaceholder,\n ...restProps\n } = props;\n const openItem = items.find(item => item.content);\n const t = useI18n();\n\n const hasFooter = useMemo(() => {\n return !openItem && typeof count === 'number' && count > 3;\n }, [openItem, count]);\n\n const TaskItems = useMemo(() => {\n return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} hasFooter={hasFooter} />;\n }, [items, openItem]);\n\n return (\n <StyledTasks {...restProps} openItem={!!openItem}>\n {!openItem && (\n <CardHeader>\n <SummaryItem\n visual={headerVisual}\n primary={\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{headerText}</Text>\n <Count>{count ?? null}</Count>\n </Flex>\n }\n secondary={headerSecondary}\n />\n </CardHeader>\n )}\n <CardContent>{items.length > 0 ? TaskItems : emptyPlaceholder}</CardContent>\n\n {hasFooter && (\n <CardFooter justify='center'>\n <Button\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 >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default Tasks;\n"]}

package/lib/components/Tasks/index.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
 export { default } from './Tasks';
 export { TasksProps } from './Tasks';
+export { default as TaskList } from './TaskList';
+export { TaskListProps } from './TaskList';
+export { TaskItemProps } from './TaskList';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Tasks/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

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

@@ -1,2 +1,3 @@
 export { default } from './Tasks';
+export { default as TaskList } from './TaskList';
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default } from './Tasks';\nexport { TasksProps } from './Tasks';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './Tasks';\nexport { TasksProps } from './Tasks';\nexport { default as TaskList } from './TaskList';\nexport { TaskListProps } from './TaskList';\nexport { TaskItemProps } from './TaskList';\n"]}

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":"AAAA,OAAO,EAGL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAIlD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,~~CAuC7D~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAIlD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkD7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment, useEffect, useState } from 'react';
-import { isSameDate, sortByDate } from './utils';
+import { isSameGroup, sortByDate } from './utils';
 import { StyledDate, StyledTimelineTable } from './Timeline.styles';
 import TimelineItem from './TimelineItem';
-const Timeline = forwardRef(({ activity, currentTime, ...restProps }, ref) => {
-    const [sortedData, setSortedData] = useState(() => sortByDate(activity));
+const Timeline = forwardRef(({ activity, currentTime, sortOrder = 'descending', groupBy = 'date', ...restProps }, ref) => {
+    const [sortedData, setSortedData] = useState(() => sortByDate(activity, sortOrder));
     useEffect(() => {
-        setSortedData(sortByDate(activity));
-    }, [activity]);
-    return (_jsx(StyledTimelineTable, Object.assign({ ref: ref }, restProps, { children: _jsx("tbody", { children: sortedData.map((item, index) => {
-                var _a, _b;
-                const isFirstItemInGroup = !isSameDate((_a = sortedData[index - 1]) === null || _a === void 0 ? void 0 : _a.date, item.date);
-                const isLastItemInGroup = !isSameDate((_b = sortedData[index + 1]) === null || _b === void 0 ? void 0 : _b.date, item.date);
-                return (_jsxs(Fragment, { children: [isFirstItemInGroup && (_jsx("tr", { children: _jsx("td", Object.assign({ colSpan: 3 }, { children: _jsx(StyledDate, { variant: 'date', format: 'long', value: item.date }, void 0) }), void 0) }, void 0)),
-                        _jsx(TimelineItem, { item: item, prevItemDate: isFirstItemInGroup ? undefined : sortedData[index - 1].date, nextItemDate: isLastItemInGroup ? undefined : sortedData[index + 1].date, currentTime: currentTime }, void 0)] }, item.id));
-            }) }, void 0) }), void 0));
+        setSortedData(sortByDate(activity, sortOrder));
+    }, [activity, sortOrder]);
+    return (_jsx(StyledTimelineTable, { ref: ref, ...restProps, children: _jsx("tbody", { children: sortedData.map((item, index) => {
+                const isFirstItemInGroup = !isSameGroup(sortedData[index - 1]?.date, item.date, groupBy);
+                const isLastItemInGroup = !isSameGroup(sortedData[index + 1]?.date, item.date, groupBy);
+                return (_jsxs(Fragment, { children: [isFirstItemInGroup && groupBy !== 'none' && (_jsx("tr", { children: _jsx("td", { colSpan: 3, children: _jsx(StyledDate, { variant: groupBy, format: 'long', value: item.date }, void 0) }, void 0) }, void 0)), _jsx(TimelineItem, { item: item, timeFormat: groupBy === 'date' ? 'time' : 'datetime', prevItemDate: isFirstItemInGroup ? undefined : sortedData[index - 1].date, nextItemDate: isLastItemInGroup ? undefined : sortedData[index + 1].date, currentTime: currentTime }, void 0)] }, item.id));
+            }) }, void 0) }, void 0));
 });
 export default Timeline;
 //# sourceMappingURL=Timeline.js.map