@pega/cosmos-react-work 4.0.0-dev.2.0 → 4.0.0-dev.20.0

package/lib/components/Stakeholders/Stakeholders.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,sHAAsH;AACtH,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,YAAY;IAChE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAC/D;;;OAGG;IACH,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,IAAI,EAAE;QACJ,gGAAgG;QAChG,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,iEAAiE;QACjE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf;;WAEG;QACH,WAAW,CAAC,EAAE,IAAI,CAAC;QACnB;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC;YAAE,gBAAgB,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC,CAAC;QAC7D;;WAEG;QACH,aAAa,CAAC,EAAE;YACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;QACF;;;;;WAKG;QACH,QAAQ,EAAE,CAAC,EACT,gBAAgB,EAChB,SAAS,EACV,EAAE;YACD,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;YAC3C,SAAS,EAAE,MAAM,IAAI,CAAC;SACvB,KAAK,IAAI,CAAC;QACX;;;WAGG;QACH,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE;YAAE,SAAS,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QAC9D;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;IACF,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE;QACP,+EAA+E;QAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,uFAAuF;QACvF,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAClC,2HAA2H;QAC3H,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACnC;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;CACH"}
+{"version":3,"file":"Stakeholders.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,sHAAsH;AACtH,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,YAAY;IAChE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAC/D;;;OAGG;IACH,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,IAAI,EAAE;QACJ,gGAAgG;QAChG,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,iEAAiE;QACjE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,yGAAyG;QACzG,WAAW,CAAC,EAAE,IAAI,CAAC;QACnB;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC;YAAE,gBAAgB,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC,CAAC;QAC7D,+DAA+D;QAC/D,aAAa,CAAC,EAAE;YACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;QACF;;;;;WAKG;QACH,QAAQ,EAAE,CAAC,EACT,gBAAgB,EAChB,SAAS,EACV,EAAE;YACD,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;YAC3C,SAAS,EAAE,MAAM,IAAI,CAAC;SACvB,KAAK,IAAI,CAAC;QACX;;;WAGG;QACH,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE;YAAE,SAAS,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QAC9D,qHAAqH;QACrH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;IACF,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE;QACP,+EAA+E;QAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,uFAAuF;QACvF,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAClC,2HAA2H;QAC3H,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACnC,qHAAqH;QACrH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;CACH"}

package/lib/components/Stakeholders/Stakeholders.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.types.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType } from 'react';\n\nimport type {\n  SummaryListProps,\n  ForwardProps,\n  NoChildrenProp,\n  SummaryListItem\n} from '@pega/cosmos-react-core';\n\nexport type Role = {\n  name: string;\n  description: string;\n};\n\n/** A simple extension of a SummaryListItem. Pass onEdit and or onRemove to render either action for a stakeholder. */\nexport interface Stakeholder extends SummaryListItem, ForwardProps {\n  onEdit?: () => void;\n  onRemove?: () => void;\n}\n\nexport interface StakeholdersProps\n  extends NoChildrenProp,\n    Pick<SummaryListProps, 'count' | 'loading' | 'error' | 'ref'> {\n  /**\n   * The initial array of stakeholders presented in the default state of the widget.\n   * This array will be sliced internally to the first three items but recommend only passing up to that length as a best practice.\n   */\n  items: Stakeholder[];\n  /** Called when a user opens the add form. */\n  onAddNew?: () => void;\n  /**\n   * Data and a component required to render a form for both add and edit.\n   * If there are roles, the renderer is passed the currently selected role.\n   */\n  form: {\n    /** Indicates the form is in a loading state either initially or after add/edit is submitted. */\n    loading?: boolean;\n    /** An array of available roles a stakeholder may be assigned. */\n    roles?: Role[];\n    /**\n     * Use this when onAdd or onEdit is invoked to indicate to the component which role option to select.\n     */\n    currentRole?: Role;\n    /**\n     * A component to render the main portion of the add/edit stakeholder form.\n     * This may be a simple function and will be pass a prop when the selected role changes.\n     */\n    renderer: ComponentType<{ selectedRoleName?: Role['name'] }>;\n    /**\n     * A props object that will be passed to the form renderer.\n     */\n    rendererProps?: {\n      [key: string]: unknown;\n    };\n    /**\n     * Called when a user submits the form.\n     * The name of the currently selected role will be passed along with a function to close the form on an arg object.\n     * closeForm will close the modal or popover the form is preseneted in.\n     * closeForm can be call once validations and requests have resolved.\n     */\n    onSubmit: ({\n      selectedRoleName,\n      closeForm\n    }: {\n      selectedRoleName: Role['name'] | undefined;\n      closeForm: () => void;\n    }) => void;\n    /**\n     * Called when a user cancels a form.\n     * A function to close the form will be passed on an arg object.\n     */\n    onDismiss: ({ closeForm }: { closeForm: () => void }) => void;\n    /**\n     * Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal.\n     */\n    onAfterClose?: () => void;\n  };\n  /** Called when a user opens the view all modal. */\n  onViewAll?: () => void;\n  viewAll: {\n    /** Indicates the view all list is in a loading state while data is fetched. */\n    loading?: boolean;\n    /** Pass a full or filtered list of stakeholder items. Filter based on search input. */\n    items: StakeholdersProps['items'];\n    /** Called when a user enters a view all search. Return a filtered array to viewAll['items'] with matching stakeholders. */\n    onSearch?: (value: string) => void;\n    /**\n     * Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal.\n     */\n    onAfterClose?: () => void;\n  };\n}\n"]}
+{"version":3,"file":"Stakeholders.types.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType } from 'react';\n\nimport type {\n  SummaryListProps,\n  ForwardProps,\n  NoChildrenProp,\n  SummaryListItem\n} from '@pega/cosmos-react-core';\n\nexport type Role = {\n  name: string;\n  description: string;\n};\n\n/** A simple extension of a SummaryListItem. Pass onEdit and or onRemove to render either action for a stakeholder. */\nexport interface Stakeholder extends SummaryListItem, ForwardProps {\n  onEdit?: () => void;\n  onRemove?: () => void;\n}\n\nexport interface StakeholdersProps\n  extends NoChildrenProp,\n    Pick<SummaryListProps, 'count' | 'loading' | 'error' | 'ref'> {\n  /**\n   * The initial array of stakeholders presented in the default state of the widget.\n   * This array will be sliced internally to the first three items but recommend only passing up to that length as a best practice.\n   */\n  items: Stakeholder[];\n  /** Called when a user opens the add form. */\n  onAddNew?: () => void;\n  /**\n   * Data and a component required to render a form for both add and edit.\n   * If there are roles, the renderer is passed the currently selected role.\n   */\n  form: {\n    /** Indicates the form is in a loading state either initially or after add/edit is submitted. */\n    loading?: boolean;\n    /** An array of available roles a stakeholder may be assigned. */\n    roles?: Role[];\n    /** Use this when onAdd or onEdit is invoked to indicate to the component which role option to select. */\n    currentRole?: Role;\n    /**\n     * A component to render the main portion of the add/edit stakeholder form.\n     * This may be a simple function and will be pass a prop when the selected role changes.\n     */\n    renderer: ComponentType<{ selectedRoleName?: Role['name'] }>;\n    /** A props object that will be passed to the form renderer. */\n    rendererProps?: {\n      [key: string]: unknown;\n    };\n    /**\n     * Called when a user submits the form.\n     * The name of the currently selected role will be passed along with a function to close the form on an arg object.\n     * closeForm will close the modal or popover the form is preseneted in.\n     * closeForm can be call once validations and requests have resolved.\n     */\n    onSubmit: ({\n      selectedRoleName,\n      closeForm\n    }: {\n      selectedRoleName: Role['name'] | undefined;\n      closeForm: () => void;\n    }) => void;\n    /**\n     * Called when a user cancels a form.\n     * A function to close the form will be passed on an arg object.\n     */\n    onDismiss: ({ closeForm }: { closeForm: () => void }) => void;\n    /** Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal. */\n    onAfterClose?: () => void;\n  };\n  /** Called when a user opens the view all modal. */\n  onViewAll?: () => void;\n  viewAll: {\n    /** Indicates the view all list is in a loading state while data is fetched. */\n    loading?: boolean;\n    /** Pass a full or filtered list of stakeholder items. Filter based on search input. */\n    items: StakeholdersProps['items'];\n    /** Called when a user enters a view all search. Return a filtered array to viewAll['items'] with matching stakeholders. */\n    onSearch?: (value: string) => void;\n    /** Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal. */\n    onAfterClose?: () => void;\n  };\n}\n"]}

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

@@ -10,7 +10,7 @@ export interface TagsProps extends BaseProps, NoChildrenProp {
     /**
      * 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;

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

@@ -1 +1 @@
-{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EA0BZ,eAAe,EACf,cAAc,EACf,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,EAAE,cAAc;IAC1D,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;;;SA4BtB,CAAC;AAoNF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA+HrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EA0BZ,eAAe,EACf,cAAc,EACf,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,EAAE,cAAc;IAC1D,sBAAsB;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;OAGG;IACH,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;;;SA4BtB,CAAC;AAoMF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAgIrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Tags/Tags.js

@@ -103,6 +103,7 @@ const EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }) => {
         }
     };
     const handlePaste = (e) => {
+        e.preventDefault();
         const potentialTags = e.clipboardData.getData('Text').split(' ');
         potentialTags.forEach(potentialTag => {
             addTag(potentialTag);
@@ -142,23 +143,7 @@ const EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }) => {
                     setPauseSelectedDescendantEvaluation(true);
                 }, onSelectedFocus: () => {
                     setPauseSelectedDescendantEvaluation(false);
-                }, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, autoFocus: true }), _jsx(Popover, { as: StyledMenuPopover, show: showMenu, 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 => {
+                }, 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)) {
@@ -229,17 +214,17 @@ const Tags = forwardRef(({ tags, availableTags, loading, error, onSearch, onTagC
                 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: 'h2', children: t('tags') }), _jsx(Count, { children: tags.length })] }), _jsx(Actions, { items: onEditTags
+    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_tags'),
+                                    text: t('edit'),
                                     icon: 'pencil',
                                     onClick: openEditModal,
                                     disabled: !!error
                                 }
                             ]
-                            : [] })] }), _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') }) }))] }));
+                            : [], 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

@@ -1 +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    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        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 } = 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='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"]}
+{"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(\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 } = 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);\n\nexport default Tags;\n"]}

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

@@ -1,6 +1,6 @@
 import { FunctionComponent, ReactNode, Ref, MouseEvent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-export interface TaskItemProps {
+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;
@@ -14,15 +14,26 @@ export interface TaskItemProps {
     onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;
     /** Content for the task when open. */
     content?: ReactNode;
-    [key: string]: unknown;
+    /** An array of actions to add to open task. */
+    additionalActions?: ActionsProps['items'];
 }
-export interface TaskListProps {
+export interface TaskListProps extends TestIdProp {
     items: TaskItemProps[];
     hasFooter?: boolean;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLElement>;
 }
-export declare const TaskItem: ({ id, name, avatar, meta, processName, onOpen, content, ...restProps }: TaskItemProps) => JSX.Element;
-declare const TaskList: FunctionComponent<TaskListProps & ForwardProps>;
-export default TaskList;
+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

@@ -1 +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,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnG,OAAO,EACL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,aAAa;IAC5B,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,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;AAmBD,eAAO,MAAM,QAAQ,2EASlB,aAAa,gBA8Cf,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAU7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"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;;;;AAmDF,wBAAyD"}

package/lib/components/Tasks/TaskList.js

@@ -1,8 +1,9 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } 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 } from '@pega/cosmos-react-core';
+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 &&
@@ -18,16 +19,53 @@ const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
   `;
 });
 StyledTaskList.defaultProps = defaultThemeProp;
-export const TaskItem = ({ id, name, avatar, meta, processName, onOpen, content, ...restProps }) => {
+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: onOpen && !content ? (_jsxs(Button, { variant: 'primary', onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: `-${processName ?? ''} ${name}` })] })) : null }));
-    return (_jsx(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: StyledSummaryListItem, forwardedAs: 'li', ...restProps, children: content ? (_jsxs(_Fragment, { children: [summary, content] })) : (summary) }));
-};
-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}` }))) }));
+            ] })) : (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(({ 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 TaskList;
+export default withTestIds(TaskList, getTaskListTestIds);
 //# sourceMappingURL=TaskList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref, MouseEvent } 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} from '@pega/cosmos-react-core';\n\nexport interface TaskItemProps {\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  [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    ${StyledBreadcrumbs} > ${StyledText} {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nexport const TaskItem = ({\n  id,\n  name,\n  avatar,\n  meta,\n  processName,\n  onOpen,\n  content,\n  ...restProps\n}: TaskItemProps) => {\n  const t = useI18n();\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        onOpen && !content ? (\n          <Button variant='primary' onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}>\n            <span>{t('go')}</span>\n            <VisuallyHiddenText>{`-${processName ?? ''} ${name}`}</VisuallyHiddenText>\n          </Button>\n        ) : null\n      }\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"]}
+{"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(\n  ({ testId, items, hasFooter = false }: PropsWithoutRef<TaskListProps>, ref) => {\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);\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}

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

@@ -1,22 +1,28 @@
-import { ReactNode, FC, ReactElement } from 'react';
-import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+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 {
-    /** An array of TaskItemProps to generate the list.  */
+export interface TasksProps extends NoChildrenProp, TestIdProp {
+    /** An array of TaskItemProps to generate the list. */
     items: TaskItemProps[];
-    /** Content to render when the list is empty. */
-    emptyPlaceholder: ReactNode;
     /** Heading text to render at the top of the list. */
-    headerText: string;
-    /** A visual element i.e. (Avatar | Icon) to accompany the header text. */
-    headerVisual?: ReactElement;
-    /** A region for supplemental task list info or controls. */
-    headerSecondary?: ReactNode;
+    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 | null;
-    /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */
+    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;
 }
-declare const Tasks: FC<ForwardProps & TasksProps>;
-export default Tasks;
+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>;
+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

@@ -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,EACZ,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAEjC,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,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;AAYD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CA6DxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"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,EAGZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAEzG,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;;SAMtB,CAAC;;;;AAuEH,wBAAmD"}

package/lib/components/Tasks/Tasks.js

@@ -1,9 +1,10 @@
 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 } from '@pega/cosmos-react-core';
+import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds } from '@pega/cosmos-react-core';
 import TaskList, { TaskItem } from './TaskList';
-const StyledTasks = styled(Card)(({ theme, openItem }) => {
+import { getTasksTestIds } from './Tasks.test-ids';
+export const StyledTasks = styled(Card)(({ theme, openItem }) => {
     return openItem
         ? css `
         box-shadow: ${theme.base.shadow.low};
@@ -12,16 +13,15 @@ const StyledTasks = styled(Card)(({ theme, openItem }) => {
 });
 StyledTasks.defaultProps = defaultThemeProp;
 const Tasks = (props) => {
-    const { items = [], headerText, headerVisual, headerSecondary, count, onExpandToggle, emptyPlaceholder, ...restProps } = 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 = useMemo(() => {
-        return !openItem && typeof count === 'number' && count > 3;
-    }, [openItem, count]);
+    const hasFooter = !!(!openItem && onExpandToggle && count > 0);
     const TaskItems = useMemo(() => {
-        return openItem ? _jsx(TaskItem, { ...openItem }) : _jsx(TaskList, { items: items, hasFooter: hasFooter });
+        return openItem ? (_jsx(TaskItem, { ...openItem })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
     }, [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 }), _jsx(Count, { children: count ?? null })] }), secondary: headerSecondary }) })), _jsx(CardContent, { children: items.length > 0 ? TaskItems : emptyPlaceholder }), hasFooter && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
+    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, "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(CardContent, { 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;
@@ -32,5 +32,5 @@ const Tasks = (props) => {
                         }
                     }, children: t(!!count && count > items.length ? 'show_more' : 'show_less') }) }))] }));
 };
-export default Tasks;
+export default withTestIds(Tasks, getTasksTestIds);
 //# sourceMappingURL=Tasks.js.map

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

@@ -1 +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  NoChildrenProp,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\n\nexport interface TasksProps extends NoChildrenProp {\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\nStyledTasks.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 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"]}
+{"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} from '@pega/cosmos-react-core';\nimport { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\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    : null;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n  const {\n    testId,\n    items = [],\n    name,\n    avatar,\n    viewSelector,\n    count = items.length,\n    search,\n    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      <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\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

@@ -1,6 +1,4 @@
-export { default } from './Tasks';
-export { TasksProps } from './Tasks';
-export { default as TaskList } from './TaskList';
-export { TaskListProps } from './TaskList';
-export { TaskItemProps } from './TaskList';
+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

@@ -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;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"}
+{"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

@@ -1,3 +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

@@ -1 +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"]}
+{"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"]}