@pega/cosmos-react-work 5.0.0-dev.4.9 → 5.0.0-dev.5.0

package/lib/components/Tags/Tags.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Modal, Tag, Button, useI18n, Count, Flex, Text, CardHeader, Card, Actions, Icon, registerIcon, CardContent, Progress, EmptyState, ErrorState, Popover, Menu, useModalManager, useModalContext, 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;
+      }
+
+      ${StyledTag} + ${StyledTag} {
+        margin-inline-start: 0;
+      }
+
+      ${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 { dismiss } = useModalContext();
+    const inputRef = useRef(null);
+    const [filterValue, setFilterValue] = useState('');
+    const [editError, setEditError] = useState('');
+    const [selected, setSelected] = useState([]);
+    const [items, setItems] = useState([]);
+    const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] = useState(true);
+    const t = useI18n();
+    const showMenu = !!filterValue && !!items?.length;
+    const selectedTagValues = useMemo(() => {
+        return selected.map(({ text }) => {
+            return { id: text, text };
+        });
+    }, [selected]);
+    useEffect(() => {
+        if (showMenu) {
+            setPauseSelectedDescendantEvaluation(true);
+        }
+    }, [showMenu]);
+    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) => {
+        e.preventDefault();
+        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') }), _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') })] }), children: [editError && (_jsx(StyledBanner, { id: 'edit-tags-error', variant: 'urgent', messages: [editError], onDismiss: () => {
+                    setEditError('');
+                } })), _jsx(MultiSelectInput, { ref: inputRef, selected: selectedTagValues, 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: () => {
+                    setPauseSelectedDescendantEvaluation(true);
+                    setInputValue('');
+                }, onPaste: handlePaste, onKeyDown: handleKeyDown, onSelectedBlur: () => {
+                    setPauseSelectedDescendantEvaluation(true);
+                }, onSelectedFocus: () => {
+                    setPauseSelectedDescendantEvaluation(false);
+                }, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, autoFocus: true }), _jsx(Popover, { as: StyledMenuPopover, show: showMenu, target: inputRef.current, placement: 'bottom-start', 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 }) })] }));
+};
+const Tags = forwardRef(function Tags({ tags, availableTags, loading, error, onSearch, onTagClick, onEditTags, ...restProps }, ref) {
+    const { create: createModal } = useModalManager();
+    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' });
+        }
+        if (error) {
+            if (typeof error === 'boolean')
+                return _jsx(ErrorState, {});
+            if (typeof error === 'string')
+                return _jsx(ErrorState, { message: error });
+            return _jsx(ErrorState, { ...error });
+        }
+        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));
+            }) })) : (_jsx(EmptyState, {}));
+    }, [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' }), _jsx(Text, { variant: 'h3', children: t('tags') }), _jsx(Count, { children: tags.length })] }), _jsx(Actions, { items: onEditTags
+                            ? [
+                                {
+                                    id: 'editTags',
+                                    text: t('edit'),
+                                    icon: 'pencil',
+                                    onClick: openEditModal,
+                                    disabled: !!error
+                                }
+                            ]
+                            : [], contextualLabel: t('tags') })] }), _jsx(CardContent, { children: content }), footer && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => setViewAll(curr => !curr), children: viewAll ? t('view_less') : t('view_all') }) }))] }));
+});
+export default Tags;
+//# sourceMappingURL=Tags.js.map

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

@@ -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  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  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  useModalManager,\n  useModalContext,\n  useConsolidatedRef,\n  CardFooter,\n  Banner,\n  ErrorStateProps,\n  NoChildrenProp\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, NoChildrenProp {\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      ${StyledTag} + ${StyledTag} {\n        margin-inline-start: 0;\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 { dismiss } = useModalContext();\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 [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] = useState(true);\n  const t = useI18n();\n\n  const showMenu = !!filterValue && !!items?.length;\n\n  const selectedTagValues = useMemo(() => {\n    return selected.map(({ text }) => {\n      return { id: text, text };\n    });\n  }, [selected]);\n\n  useEffect(() => {\n    if (showMenu) {\n      setPauseSelectedDescendantEvaluation(true);\n    }\n  }, [showMenu]);\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    e.preventDefault();\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={selectedTagValues}\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          setPauseSelectedDescendantEvaluation(true);\n          setInputValue('');\n        }}\n        onPaste={handlePaste}\n        onKeyDown={handleKeyDown}\n        onSelectedBlur={() => {\n          setPauseSelectedDescendantEvaluation(true);\n        }}\n        onSelectedFocus={() => {\n          setPauseSelectedDescendantEvaluation(false);\n        }}\n        pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n        autoFocus\n      />\n      <Popover\n        as={StyledMenuPopover}\n        show={showMenu}\n        target={inputRef.current}\n        placement='bottom-start'\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(function Tags(\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 } = useModalManager();\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='h3'>{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'),\n                    icon: 'pencil',\n                    onClick: openEditModal,\n                    disabled: !!error\n                  }\n                ]\n              : []\n          }\n          contextualLabel={t('tags')}\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\nexport default Tags;\n"]}

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

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

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

@@ -0,0 +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,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/Tags/index.js

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

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

@@ -0,0 +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 type { TagsProps, SelectedTag } from './Tags';\n"]}

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

@@ -0,0 +1,39 @@
+import { FunctionComponent, ReactNode, Ref, MouseEvent } from 'react';
+import { ForwardProps, TestIdProp, ActionsProps } from '@pega/cosmos-react-core';
+export interface TaskItemProps extends TestIdProp {
+    id: string;
+    /** Name of the task displayed in the list. */
+    name: string;
+    /** Name of the process for the task. */
+    processName?: string;
+    /** Avatar element to represent the task's assignee. */
+    avatar?: ReactNode;
+    /** MetaList element with info related to the task. */
+    meta?: ReactNode;
+    /** Provide a callback to render a button for a task. */
+    onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;
+    /** Content for the task when open. */
+    content?: ReactNode;
+    /** An array of actions to add to open task. */
+    additionalActions?: ActionsProps['items'];
+}
+export interface TaskListProps extends TestIdProp {
+    items: TaskItemProps[];
+    hasFooter?: boolean;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLElement>;
+}
+interface Announcement {
+    name: string;
+    status: 'removed' | 'added';
+}
+export declare const TaskItem: (({ testId, id, name, avatar, meta, processName, onOpen, content, addAnnouncement, additionalActions, ...restProps }: TaskItemProps & {
+    addAnnouncement?: ((announcement: Announcement) => void) | undefined;
+}) => JSX.Element) & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["open-task"]>;
+};
+declare const _default: FunctionComponent<TaskListProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+};
+export default _default;
+//# sourceMappingURL=TaskList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EACH,UAAU,EAGX,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,YAAY,EAYZ,UAAU,EAIV,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AAmBD,eAAO,MAAM,QAAQ;sCAamC,YAAY,KAAK,IAAI;;;CA4D5E,CAAC;;;;AAoDF,wBAAyD"}

package/lib/components/Tasks/TaskList.js

@@ -0,0 +1,71 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { SummaryItem, StyledSummaryListItem, Flex, defaultThemeProp, Button, useI18n, VisuallyHiddenText, Breadcrumbs, StyledBreadcrumbs, StyledText, useTestIds, useLiveLog, debounce, Actions, withTestIds } from '@pega/cosmos-react-core';
+import { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';
+const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
+    return css `
+    ${hasFooter &&
+        css `
+      > li:last-child {
+        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      }
+    `}
+
+    ${StyledBreadcrumbs} > ${StyledText} {
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+    }
+  `;
+});
+StyledTaskList.defaultProps = defaultThemeProp;
+export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processName, onOpen, content, addAnnouncement, additionalActions, ...restProps }) => {
+    const testIds = useTestIds(testId, getTaskItemTestIds);
+    const t = useI18n();
+    useEffect(() => {
+        addAnnouncement?.({ name, status: 'added' });
+        return () => {
+            addAnnouncement?.({ name, status: 'removed' });
+        };
+    }, []);
+    const summary = (_jsx(SummaryItem, { visual: avatar, primary: processName ? (_jsx(Breadcrumbs, { path: [
+                { id: 'processName', primary: processName },
+                { id: 'name', primary: name }
+            ] })) : (name), secondary: meta, actions: content
+            ? additionalActions && _jsx(Actions, { menuAt: 1, items: additionalActions })
+            : onOpen && (_jsxs(Button, { "data-testid": testIds.openTask, variant: 'primary', onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: `-${processName ?? ''} ${name}` })] })) }));
+    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column', gap: 1 }, item: { grow: 1 }, as: StyledSummaryListItem, forwardedAs: 'li', children: [summary, content] }));
+}, getTaskItemTestIds);
+const TaskList = forwardRef(function TaskList({ testId, items, hasFooter = false }, ref) {
+    const testIds = useTestIds(testId, getTaskListTestIds);
+    const t = useI18n();
+    const { announcePolite } = useLiveLog();
+    const announcements = useRef([]);
+    const debouncedAnnounce = debounce(() => {
+        if (announcements.current.length > 0) {
+            let tasksAdded = 0;
+            let tasksRemoved = 0;
+            announcements.current.forEach(item => {
+                if (item.status === 'removed') {
+                    tasksRemoved += 1;
+                }
+                else {
+                    tasksAdded += 1;
+                }
+            });
+            let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';
+            if (tasksRemoved) {
+                message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });
+            }
+            announcePolite({ message });
+            announcements.current = [];
+        }
+    }, 2000);
+    const addAnnouncement = (announcement) => {
+        announcements.current = [...announcements.current, announcement];
+        debouncedAnnounce();
+    };
+    return (_jsx(Flex, { "data-testid": testIds.root, container: { direction: 'column' }, as: StyledTaskList, hasFooter: hasFooter, ref: ref, children: items.map((item, i) => (_createElement(TaskItem, { ...item, addAnnouncement: addAnnouncement, key: `${i + 1}` }))) }));
+});
+export default withTestIds(TaskList, getTaskListTestIds);
+//# sourceMappingURL=TaskList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  MouseEvent,\n  useEffect,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  SummaryItem,\n  StyledSummaryListItem,\n  Flex,\n  defaultThemeProp,\n  Button,\n  useI18n,\n  VisuallyHiddenText,\n  Breadcrumbs,\n  StyledBreadcrumbs,\n  StyledText,\n  useTestIds,\n  TestIdProp,\n  useLiveLog,\n  debounce,\n  Actions,\n  ActionsProps,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nexport interface TaskItemProps extends TestIdProp {\n  id: string;\n  /** Name of the task displayed in the list. */\n  name: string;\n  /** Name of the process for the task. */\n  processName?: string;\n  /** Avatar element to represent the task's assignee. */\n  avatar?: ReactNode;\n  /** MetaList element with info related to the task. */\n  meta?: ReactNode;\n  /** Provide a callback to render a button for a task. */\n  onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n  /** Content for the task when open. */\n  content?: ReactNode;\n  /** An array of actions to add to open task. */\n  additionalActions?: ActionsProps['items'];\n}\n\nexport interface TaskListProps extends TestIdProp {\n  items: TaskItemProps[];\n  hasFooter?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n  name: string;\n  status: 'removed' | 'added';\n}\n\nconst StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n  return css`\n    ${hasFooter &&\n    css`\n      > li:last-child {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `}\n\n    ${StyledBreadcrumbs} > ${StyledText} {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n  ({\n    testId,\n    id,\n    name,\n    avatar,\n    meta,\n    processName,\n    onOpen,\n    content,\n    addAnnouncement,\n    additionalActions,\n    ...restProps\n  }: TaskItemProps & { addAnnouncement?: (announcement: Announcement) => void }) => {\n    const testIds = useTestIds(testId, getTaskItemTestIds);\n    const t = useI18n();\n\n    useEffect(() => {\n      addAnnouncement?.({ name, status: 'added' });\n\n      return () => {\n        addAnnouncement?.({ name, status: 'removed' });\n      };\n    }, []);\n\n    const summary = (\n      <SummaryItem\n        visual={avatar}\n        primary={\n          processName ? (\n            <Breadcrumbs\n              path={[\n                { id: 'processName', primary: processName },\n                { id: 'name', primary: name }\n              ]}\n            />\n          ) : (\n            name\n          )\n        }\n        secondary={meta}\n        actions={\n          content\n            ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n            : onOpen && (\n                <Button\n                  data-testid={testIds.openTask}\n                  variant='primary'\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n                >\n                  <span>{t('go')}</span>\n                  <VisuallyHiddenText>{`-${processName ?? ''} ${name}`}</VisuallyHiddenText>\n                </Button>\n              )\n        }\n      />\n    );\n\n    return (\n      <Flex\n        data-testid={testIds.root}\n        {...restProps}\n        container={{ direction: 'column', gap: 1 }}\n        item={{ grow: 1 }}\n        as={StyledSummaryListItem}\n        forwardedAs='li'\n      >\n        {summary}\n        {content}\n      </Flex>\n    );\n  },\n  getTaskItemTestIds\n);\n\nconst TaskList: FunctionComponent<TaskListProps & ForwardProps> = forwardRef(function TaskList(\n  { testId, items, hasFooter = false }: PropsWithoutRef<TaskListProps>,\n  ref\n) {\n  const testIds = useTestIds(testId, getTaskListTestIds);\n  const t = useI18n();\n  const { announcePolite } = useLiveLog();\n  const announcements = useRef<Announcement[]>([]);\n\n  const debouncedAnnounce = debounce(() => {\n    if (announcements.current.length > 0) {\n      let tasksAdded = 0;\n      let tasksRemoved = 0;\n      announcements.current.forEach(item => {\n        if (item.status === 'removed') {\n          tasksRemoved += 1;\n        } else {\n          tasksAdded += 1;\n        }\n      });\n      let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n      if (tasksRemoved) {\n        message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n      }\n\n      announcePolite({ message });\n      announcements.current = [];\n    }\n  }, 2000);\n\n  const addAnnouncement = (announcement: Announcement) => {\n    announcements.current = [...announcements.current, announcement];\n    debouncedAnnounce();\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      container={{ direction: 'column' }}\n      as={StyledTaskList}\n      hasFooter={hasFooter}\n      ref={ref}\n    >\n      {items.map((item, i) => (\n        <TaskItem {...item} addAnnouncement={addAnnouncement} key={`${i + 1}`} />\n      ))}\n    </Flex>\n  );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}

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

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { ForwardProps, NoChildrenProp, ListToolbarProps, SearchInputProps, TestIdProp, AvatarProps } from '@pega/cosmos-react-core';
+import { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';
+import { TaskItemProps } from './TaskList';
+export interface TasksProps extends NoChildrenProp, TestIdProp {
+    /** An array of TaskItemProps to generate the list. */
+    items: TaskItemProps[];
+    /** Heading text to render at the top of the list. */
+    name: ListToolbarProps['name'];
+    /** A visual to accompany the header text. */
+    avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;
+    /** Definition of view selection. */
+    viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect'>;
+    /** Integer representing the total count of tasks. */
+    count?: number;
+    /** Opt-in search configuration. */
+    search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;
+    /** 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. */
+    onExpandToggle?: () => void;
+}
+export declare const StyledTasks: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {
+    openItem?: boolean | undefined;
+}, never>;
+export declare const StyledTaskCardContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const _default: FC<ForwardProps & TasksProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["show-more-less"]>;
+};
+export default _default;
+//# sourceMappingURL=Tasks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAGhD,OAAO,EAOL,YAAY,EACZ,cAAc,EAGd,gBAAgB,EAChB,gBAAgB,EAGhB,UAAU,EACV,WAAW,EAIZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAIzG,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAG/D,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,CAAC,CAAC;IACjE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW;;SAUtB,CAAC;AAIH,eAAO,MAAM,qBAAqB,wMAUjC,CAAC;;;;AAuEF,wBAAmD"}

package/lib/components/Tasks/Tasks.js

@@ -0,0 +1,52 @@
+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, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds, StyledCard } from '@pega/cosmos-react-core';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
+import TaskList, { TaskItem } from './TaskList';
+import { getTasksTestIds } from './Tasks.test-ids';
+export const StyledTasks = styled(Card)(({ theme, openItem }) => {
+    return openItem
+        ? css `
+        box-shadow: ${theme.base.shadow.low};
+      `
+        : css `
+        ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {
+          padding-block-end: calc(${theme.base.spacing} / 2);
+        }
+      `;
+});
+StyledTasks.defaultProps = defaultThemeProp;
+export const StyledTaskCardContent = styled(CardContent)(({ theme }) => css `
+    &:not(${StyledCard} ${StyledCard} > &) {
+      padding-block-end: calc(${theme.base.spacing} / 2);
+
+      & + ${StyledCardFooter} {
+        padding-block-start: ${theme.base.spacing};
+      }
+    }
+  `);
+StyledTaskCardContent.defaultProps = defaultThemeProp;
+const Tasks = (props) => {
+    const { testId, items = [], name, avatar, viewSelector, count = items.length, search, onExpandToggle, ...restProps } = props;
+    const testIds = useTestIds(testId, getTasksTestIds);
+    const openItem = items.find(item => item.content);
+    const t = useI18n();
+    const hasFooter = !!(!openItem && onExpandToggle && count > 0);
+    const TaskItems = useMemo(() => {
+        return openItem ? (_jsx(TaskItem, { ...openItem })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
+    }, [items, openItem]);
+    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, "data-app-region": true, 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(StyledTaskCardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) }), hasFooter && (_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;
+                            requestAnimationFrame(() => {
+                                if (currentTarget.getBoundingClientRect().top < 0)
+                                    currentTarget.scrollIntoView();
+                            });
+                        }
+                    }, children: t(!!count && count > items.length ? 'show_more' : 'show_less') }) }))] }));
+};
+export default withTestIds(Tasks, getTasksTestIds);
+//# sourceMappingURL=Tasks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  useI18n,\n  ForwardProps,\n  NoChildrenProp,\n  defaultThemeProp,\n  ListToolbar,\n  ListToolbarProps,\n  SearchInputProps,\n  EmptyState,\n  useTestIds,\n  TestIdProp,\n  AvatarProps,\n  Avatar,\n  withTestIds,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nimport TaskList, { TaskItem, 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\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\nexport const StyledTaskCardContent = styled(CardContent)(\n  ({ theme }) => css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding-block-end: calc(${theme.base.spacing} / 2);\n\n      & + ${StyledCardFooter} {\n        padding-block-start: ${theme.base.spacing};\n      }\n    }\n  `\n);\n\nStyledTaskCardContent.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    onExpandToggle,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getTasksTestIds);\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\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  return (\n    <StyledTasks data-testid={testIds.root} {...restProps} openItem={!!openItem} data-app-region>\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      <StyledTaskCardContent>{items.length > 0 ? TaskItems : <EmptyState />}</StyledTaskCardContent>\n\n      {hasFooter && (\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          >\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

@@ -0,0 +1,4 @@
+export declare const getTasksTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["show-more-less"]>;
+export declare const getTaskListTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+export declare const getTaskItemTestIds: (testIdProp?: string | undefined) => 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

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,mHAAsD,CAAC;AAEnF,eAAO,MAAM,kBAAkB,mGAA0C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,8GAAqD,CAAC"}

package/lib/components/Tasks/Tasks.test-ids.js

@@ -0,0 +1,5 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getTasksTestIds = createTestIds('tasks', ['show-more-less']);
+export const getTaskListTestIds = createTestIds('task-list', []);
+export const getTaskItemTestIds = createTestIds('task-item', ['open-task']);
+//# sourceMappingURL=Tasks.test-ids.js.map

package/lib/components/Tasks/Tasks.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.test-ids.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,EAAE,CAAC,gBAAgB,CAAU,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,EAAW,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,WAAW,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getTasksTestIds = createTestIds('tasks', ['show-more-less'] as const);\n\nexport const getTaskListTestIds = createTestIds('task-list', [] as const);\n\nexport const getTaskItemTestIds = createTestIds('task-item', ['open-task'] as const);\n"]}

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

@@ -0,0 +1,4 @@
+export { default, type TasksProps } from './Tasks';
+export { default as TaskList, type TaskListProps, type TaskItemProps } from './TaskList';
+export { listToolbarHelpers as tasksHelpers } from '@pega/cosmos-react-core';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AACzF,OAAO,EAAE,kBAAkB,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/Tasks/index.js

@@ -0,0 +1,4 @@
+export { default } from './Tasks';
+export { default as TaskList } from './TaskList';
+export { listToolbarHelpers as tasksHelpers } from '@pega/cosmos-react-core';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAmB,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAA0C,MAAM,YAAY,CAAC;AACzF,OAAO,EAAE,kBAAkB,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default, type TasksProps } from './Tasks';\nexport { default as TaskList, type TaskListProps, type TaskItemProps } from './TaskList';\nexport { listToolbarHelpers as tasksHelpers } from '@pega/cosmos-react-core';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwC,MAAM,OAAO,CAAC;AAE5F,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAIlD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkF5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}