@pega/cosmos-react-work 2.0.0-dev.14.3 → 2.0.0-dev.15.0

package/lib/components/Stakeholders/StakeholderForm.js

@@ -3,31 +3,36 @@ import { useEffect, useRef, useState } from 'react';
 import { ComboBox, RadioButtonGroup, RadioButton, Flex, useI18n, getFocusables } from '@pega/cosmos-react-core';
 export default ({ roles, currentRole, renderer: Renderer }) => {
     const contentRef = useRef(null);
+    const t = useI18n();
     const [selectedRole, setSelectedRole] = useState(() => {
+        if (!roles)
+            return;
         const selected = roles.find(role => role === currentRole);
         return selected ?? roles[0];
     });
-    const label = useI18n()('role');
-    let control;
-    if (roles.length > 3) {
-        const items = roles.map(role => {
-            return {
-                id: role,
-                primary: role,
-                selected: role === selectedRole
-            };
-        });
-        const selected = items.find(item => item.selected);
-        control = (_jsx(ComboBox, { label: label, selected: selected ? { items: { id: selected.id, text: selected.primary } } : undefined, menu: {
-                mode: 'single-select',
-                items,
-                onItemClick: setSelectedRole
-            } }, void 0));
-    }
-    else {
-        control = (_jsx(RadioButtonGroup, Object.assign({ label: label, name: 'role', inline: true, onChange: e => {
-                setSelectedRole(e.target.value);
-            } }, { children: roles.map(role => (_jsx(RadioButton, { label: role, value: role, checked: role === selectedRole }, role))) }), void 0));
+    let control = null;
+    if (roles) {
+        const label = t('role');
+        if (roles.length > 3) {
+            const items = roles.map(role => {
+                return {
+                    id: role,
+                    primary: role,
+                    selected: role === selectedRole
+                };
+            });
+            const selected = items.find(item => item.selected);
+            control = (_jsx(ComboBox, { label: label, selected: selected ? { items: { id: selected.id, text: selected.primary } } : undefined, menu: {
+                    mode: 'single-select',
+                    items,
+                    onItemClick: setSelectedRole
+                } }, void 0));
+        }
+        else {
+            control = (_jsx(RadioButtonGroup, Object.assign({ label: label, name: 'role', inline: true, onChange: e => {
+                    setSelectedRole(e.target.value);
+                } }, { children: roles.map(role => (_jsx(RadioButton, { label: role, value: role, checked: role === selectedRole }, role))) }), void 0));
+        }
     }
     useEffect(() => {
         getFocusables(contentRef)[0].focus();

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

@@ -1 +1 @@
-{"version":3,"file":"StakeholderForm.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,IAAI,EACJ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAIjC,eAAe,CAAC,EACd,KAAK,EACL,WAAW,EACX,QAAQ,EAAE,QAAQ,EACoD,EAAE,EAAE;IAC1E,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;QAC1D,OAAO,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,OAAoB,CAAC;IAEzB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACpB,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC7B,OAAO;gBACL,EAAE,EAAE,IAAI;gBACR,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,KAAK,YAAY;aAChC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEnD,OAAO,GAAG,CACR,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EACvF,IAAI,EAAE;gBACJ,IAAI,EAAE,eAAe;gBACrB,KAAK;gBACL,WAAW,EAAE,eAAe;aAC7B,WACD,CACH,CAAC;KACH;SAAM;QACL,OAAO,GAAG,CACR,KAAC,gBAAgB,kBACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,MAAM,QACN,QAAQ,EAAE,CAAC,CAAC,EAAE;gBACZ,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC,gBAEA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,KAAC,WAAW,IAAY,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,KAAK,YAAY,IAA9D,IAAI,CAA8D,CACrF,CAAC,YACe,CACpB,CAAC;KACH;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,UAAU,iBAC9D,OAAO,EACR,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,WAAI,aAC3B,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  ComboBox,\n  RadioButtonGroup,\n  RadioButton,\n  Flex,\n  useI18n,\n  getFocusables\n} from '@pega/cosmos-react-core';\n\nimport type { StakeholdersProps } from './Stakeholders.types';\n\nexport default ({\n  roles,\n  currentRole,\n  renderer: Renderer\n}: Pick<StakeholdersProps['form'], 'roles' | 'currentRole' | 'renderer'>) => {\n  const contentRef = useRef<HTMLElement>(null);\n  const [selectedRole, setSelectedRole] = useState(() => {\n    const selected = roles.find(role => role === currentRole);\n    return selected ?? roles[0];\n  });\n  const label = useI18n()('role');\n  let control: JSX.Element;\n\n  if (roles.length > 3) {\n    const items = roles.map(role => {\n      return {\n        id: role,\n        primary: role,\n        selected: role === selectedRole\n      };\n    });\n\n    const selected = items.find(item => item.selected);\n\n    control = (\n      <ComboBox\n        label={label}\n        selected={selected ? { items: { id: selected.id, text: selected.primary } } : undefined}\n        menu={{\n          mode: 'single-select',\n          items,\n          onItemClick: setSelectedRole\n        }}\n      />\n    );\n  } else {\n    control = (\n      <RadioButtonGroup\n        label={label}\n        name='role'\n        inline\n        onChange={e => {\n          setSelectedRole(e.target.value);\n        }}\n      >\n        {roles.map(role => (\n          <RadioButton key={role} label={role} value={role} checked={role === selectedRole} />\n        ))}\n      </RadioButtonGroup>\n    );\n  }\n\n  useEffect(() => {\n    getFocusables(contentRef)[0].focus();\n  }, []);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }} ref={contentRef}>\n      {control}\n      <Renderer role={selectedRole} />\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"StakeholderForm.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,IAAI,EACJ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAIjC,eAAe,CAAC,EACd,KAAK,EACL,WAAW,EACX,QAAQ,EAAE,QAAQ,EACoD,EAAE,EAAE;IAC1E,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACpD,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;QAC1D,OAAO,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,GAAuB,IAAI,CAAC;IAEvC,IAAI,KAAK,EAAE;QACT,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;QAExB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC7B,OAAO;oBACL,EAAE,EAAE,IAAI;oBACR,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI,KAAK,YAAY;iBAChC,CAAC;YACJ,CAAC,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAEnD,OAAO,GAAG,CACR,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EACvF,IAAI,EAAE;oBACJ,IAAI,EAAE,eAAe;oBACrB,KAAK;oBACL,WAAW,EAAE,eAAe;iBAC7B,WACD,CACH,CAAC;SACH;aAAM;YACL,OAAO,GAAG,CACR,KAAC,gBAAgB,kBACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,MAAM,QACN,QAAQ,EAAE,CAAC,CAAC,EAAE;oBACZ,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAClC,CAAC,gBAEA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,KAAC,WAAW,IAAY,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,KAAK,YAAY,IAA9D,IAAI,CAA8D,CACrF,CAAC,YACe,CACpB,CAAC;SACH;KACF;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,UAAU,iBAC9D,OAAO,EACR,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,WAAI,aAC3B,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  ComboBox,\n  RadioButtonGroup,\n  RadioButton,\n  Flex,\n  useI18n,\n  getFocusables\n} from '@pega/cosmos-react-core';\n\nimport type { StakeholdersProps } from './Stakeholders.types';\n\nexport default ({\n  roles,\n  currentRole,\n  renderer: Renderer\n}: Pick<StakeholdersProps['form'], 'roles' | 'currentRole' | 'renderer'>) => {\n  const contentRef = useRef<HTMLElement>(null);\n  const t = useI18n();\n\n  const [selectedRole, setSelectedRole] = useState(() => {\n    if (!roles) return;\n    const selected = roles.find(role => role === currentRole);\n    return selected ?? roles[0];\n  });\n\n  let control: JSX.Element | null = null;\n\n  if (roles) {\n    const label = t('role');\n\n    if (roles.length > 3) {\n      const items = roles.map(role => {\n        return {\n          id: role,\n          primary: role,\n          selected: role === selectedRole\n        };\n      });\n\n      const selected = items.find(item => item.selected);\n\n      control = (\n        <ComboBox\n          label={label}\n          selected={selected ? { items: { id: selected.id, text: selected.primary } } : undefined}\n          menu={{\n            mode: 'single-select',\n            items,\n            onItemClick: setSelectedRole\n          }}\n        />\n      );\n    } else {\n      control = (\n        <RadioButtonGroup\n          label={label}\n          name='role'\n          inline\n          onChange={e => {\n            setSelectedRole(e.target.value);\n          }}\n        >\n          {roles.map(role => (\n            <RadioButton key={role} label={role} value={role} checked={role === selectedRole} />\n          ))}\n        </RadioButtonGroup>\n      );\n    }\n  }\n\n  useEffect(() => {\n    getFocusables(contentRef)[0].focus();\n  }, []);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }} ref={contentRef}>\n      {control}\n      <Renderer role={selectedRole} />\n    </Flex>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAO9D,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA+QrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAO9D,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAkRrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Stakeholders/Stakeholders.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useContext, useRef, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { createPortal } from 'react-dom';
-import { defaultThemeProp, SummaryList, ModalManagerContext, useI18n, Button, ViewAll, Modal, Popover, Flex, Text, useOuterEvent } from '@pega/cosmos-react-core';
+import { defaultThemeProp, SummaryList, ModalManagerContext, useI18n, Button, ViewAll, Modal, Popover, Flex, Text, useOuterEvent, cap } from '@pega/cosmos-react-core';
 import StakeholderForm from './StakeholderForm';
 const StyledStakeholders = styled.div ``;
 StyledStakeholders.defaultProps = defaultThemeProp;
@@ -130,7 +130,9 @@ const Stakeholders = forwardRef(({ items: itemsProp, count, loading, onAddNew, f
         }
         else if (mode === 'add' || mode === 'viewAll') {
             modalMethods.current = createModal(Modal, {
-                heading: mode === 'add' ? t('add_noun', t('stakeholder')) : t('stakeholders'),
+                heading: mode === 'add'
+                    ? t('add_noun', [t('stakeholders', [], { count: 1 })])
+                    : cap(t('stakeholders')),
                 count: mode === 'add' ? undefined : count,
                 ...modalProps,
                 onAfterClose: () => {
@@ -144,7 +146,7 @@ const Stakeholders = forwardRef(({ items: itemsProp, count, loading, onAddNew, f
     useOuterEvent('mousedown', [popoverRef], closePopover);
     let editPopover = null;
     if (popoverTarget) {
-        editPopover = (_jsx(Popover, Object.assign({ ref: popoverRef, target: popoverTarget.button, placement: 'bottom-start', role: 'dialog' }, { children: _jsxs(Flex, Object.assign({ container: { direction: 'column', gap: 2, pad: 2 } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: t('edit_noun', 'stakeholder') }), void 0), _jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer }, void 0), _jsx(Flex, Object.assign({ container: { justify: 'between' } }, { children: formActions }), void 0)] }), void 0) }), void 0));
+        editPopover = (_jsx(Popover, Object.assign({ ref: popoverRef, target: popoverTarget.button, placement: 'bottom-start', role: 'dialog' }, { children: _jsxs(Flex, Object.assign({ container: { direction: 'column', gap: 2, pad: 2 } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: t('edit_noun', [t('stakeholders', [], { count: 1 })]) }), void 0), _jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer }, void 0), _jsx(Flex, Object.assign({ container: { justify: 'between' } }, { children: formActions }), void 0)] }), void 0) }), void 0));
     }
     const onKeydown = (e) => {
         if (e.key === 'Escape')
@@ -158,10 +160,10 @@ const Stakeholders = forwardRef(({ items: itemsProp, count, loading, onAddNew, f
             document.removeEventListener('keydown', onKeydown);
         };
     }, [popoverTarget]);
-    return (_jsxs(_Fragment, { children: [_jsx(SummaryList, Object.assign({}, restProps, { ref: ref, icon: 'person', name: t('stakeholders'), loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [itemsProp]), actions: onAddNew
+    return (_jsxs(_Fragment, { children: [_jsx(SummaryList, Object.assign({}, restProps, { ref: ref, icon: 'person', name: cap(t('stakeholders')), loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [itemsProp]), actions: onAddNew
                     ? [
                         {
-                            text: t('add_noun', t('stakeholder')),
+                            text: t('add_noun', [t('stakeholders', [], { count: 1 })]),
                             id: 'addNew',
                             icon: 'plus',
                             onClick() {

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useContext,\n  useRef,\n  useEffect,\n  useMemo,\n  useState,\n  ReactNode\n} from 'react';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport {\n  defaultThemeProp,\n  SummaryList,\n  ModalManagerContext,\n  useI18n,\n  ModalMethods,\n  Button,\n  ViewAll,\n  Modal,\n  Popover,\n  Flex,\n  Text,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps } from '@pega/cosmos-react-core';\n\nimport type { StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled.div``;\n\nStyledStakeholders.defaultProps = defaultThemeProp;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n  (\n    {\n      items: itemsProp,\n      count,\n      loading,\n      onAddNew,\n      form,\n      onViewAll,\n      viewAll,\n      onAfterModalClose,\n      error,\n      ...restProps\n    }: PropsWithoutRef<StakeholdersProps>,\n    ref: StakeholdersProps['ref']\n  ) => {\n    const { create: createModal } = useContext(ModalManagerContext);\n    const t = useI18n();\n    const modalMethods = useRef<ModalMethods>();\n    const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n    const [editing, setEditing] = useState(false);\n    const popoverRef = useRef<HTMLDivElement>(null);\n\n    const [popoverTarget, setPopoverTarget] = useState<{\n      portal: HTMLLIElement;\n      button: HTMLButtonElement | null;\n    } | null>(null);\n\n    const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n      itemEls: [],\n      viewAllItemEls: []\n    });\n\n    // This function merges the pre-defined actions(add & edit) to the item object.\n    const mergeItemActions = (\n      items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n    ) => {\n      return items.map(({ onEdit, onRemove, ...rest }, i) => {\n        let itemActions: Action[] = [];\n        const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n        if (onEdit) {\n          itemActions = [\n            {\n              id: 'edit',\n              text: t('edit'),\n              icon: 'pencil',\n              onClick: () => {\n                setEditing(true);\n                setPopoverTarget({\n                  portal: elArray[i],\n                  button: elArray[i].querySelector<HTMLButtonElement>(\n                    'button[aria-haspopup=\"menu\"]'\n                  )\n                });\n\n                onEdit?.();\n              }\n            }\n          ];\n        }\n\n        if (onRemove) {\n          itemActions = [\n            ...itemActions,\n            {\n              id: 'remove',\n              text: t('remove'),\n              icon: 'trash',\n              onClick: () => {\n                onRemove?.();\n              }\n            }\n          ];\n        }\n\n        return {\n          ...rest,\n          ref: (el: HTMLLIElement) => {\n            elArray[i] = el;\n          },\n          actions: itemActions\n        };\n      });\n    };\n\n    const closePopover = () => {\n      if (!popoverTarget) return;\n      popoverTarget.button?.focus();\n      setPopoverTarget(null);\n      setEditing(false);\n    };\n\n    let formContent: ReactNode = null;\n    if (mode === 'add' || editing) {\n      formContent = (\n        <StakeholderForm\n          roles={form.roles}\n          currentRole={form.currentRole}\n          renderer={form.renderer}\n        />\n      );\n    }\n\n    // Actions used for add and edit both in the modal and the popover.\n    let formActions: ReactNode = null;\n    if (mode === 'add' || editing) {\n      formActions = (\n        <>\n          <Button\n            onClick={() => {\n              if (form.onDismiss() !== false) {\n                if (mode === 'add') {\n                  modalMethods.current?.dismiss();\n                } else {\n                  closePopover();\n                }\n              }\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              if (form.onSubmit() !== false) {\n                if (mode === 'add') {\n                  modalMethods.current?.dismiss();\n                } else {\n                  closePopover();\n                }\n              }\n            }}\n          >\n            {t('add')}\n          </Button>\n        </>\n      );\n    }\n\n    // Content for the modal either for adding new or viewing all.\n    let modalContent: ReactNode = null;\n    if (mode === 'add') modalContent = formContent;\n\n    if (mode === 'viewAll' || (editing && modalMethods.current)) {\n      modalContent = (\n        <ViewAll\n          loading={loading}\n          items={mergeItemActions(viewAll.items)}\n          actions={[\n            {\n              id: 'addStakeHolder',\n              text: 'Add new',\n              onClick: () => {\n                setMode('add');\n                onAddNew?.();\n              }\n            }\n          ]}\n          searchInputProps={{\n            onSearchChange: value => {\n              viewAll.onSearch(value);\n            }\n          }}\n        />\n      );\n    }\n\n    useEffect(() => {\n      if (!mode) {\n        modalMethods.current = undefined;\n        return;\n      }\n\n      const modalProps = {\n        children: modalContent,\n        actions: mode === 'add' ? formActions : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else if (mode === 'add' || mode === 'viewAll') {\n        modalMethods.current = createModal(Modal, {\n          heading: mode === 'add' ? t('add_noun', t('stakeholder')) : t('stakeholders'),\n          count: mode === 'add' ? undefined : count,\n          ...modalProps,\n          onAfterClose: () => {\n            setMode(undefined);\n            onAfterModalClose?.();\n          }\n        });\n      }\n    }, [mode, modalContent, formActions, count, onAfterModalClose]);\n\n    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n    useOuterEvent('mousedown', [popoverRef], closePopover);\n\n    let editPopover: ReactNode = null;\n    if (popoverTarget) {\n      editPopover = (\n        <Popover\n          ref={popoverRef}\n          target={popoverTarget.button}\n          placement='bottom-start'\n          role='dialog'\n        >\n          <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n            <Text variant='h3'>{t('edit_noun', 'stakeholder')}</Text>\n            <StakeholderForm\n              roles={form.roles}\n              currentRole={form.currentRole}\n              renderer={form.renderer}\n            />\n            <Flex container={{ justify: 'between' }}>{formActions}</Flex>\n          </Flex>\n        </Popover>\n      );\n    }\n\n    const onKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') closePopover();\n    };\n\n    useEffect(() => {\n      if (!popoverTarget) return;\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [popoverTarget]);\n\n    return (\n      <>\n        <SummaryList\n          {...restProps}\n          ref={ref}\n          icon='person'\n          name={t('stakeholders')}\n          loading={loading}\n          count={count}\n          error={error}\n          items={useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [itemsProp])}\n          actions={\n            onAddNew\n              ? [\n                  {\n                    text: t('add_noun', t('stakeholder')),\n                    id: 'addNew',\n                    icon: 'plus',\n                    onClick() {\n                      setMode('add');\n                      onAddNew?.();\n                    }\n                  }\n                ]\n              : undefined\n          }\n          onViewAll={\n            onViewAll && count && count > 3\n              ? () => {\n                  setMode('viewAll');\n                  onViewAll?.();\n                }\n              : undefined\n          }\n        />\n        {popoverTarget && createPortal(editPopover, popoverTarget.portal)}\n      </>\n    );\n  }\n);\n\nexport default Stakeholders;\n"]}
+{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useContext,\n  useRef,\n  useEffect,\n  useMemo,\n  useState,\n  ReactNode\n} from 'react';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport {\n  defaultThemeProp,\n  SummaryList,\n  ModalManagerContext,\n  useI18n,\n  ModalMethods,\n  Button,\n  ViewAll,\n  Modal,\n  Popover,\n  Flex,\n  Text,\n  useOuterEvent,\n  cap\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps } from '@pega/cosmos-react-core';\n\nimport type { StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled.div``;\n\nStyledStakeholders.defaultProps = defaultThemeProp;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n  (\n    {\n      items: itemsProp,\n      count,\n      loading,\n      onAddNew,\n      form,\n      onViewAll,\n      viewAll,\n      onAfterModalClose,\n      error,\n      ...restProps\n    }: PropsWithoutRef<StakeholdersProps>,\n    ref: StakeholdersProps['ref']\n  ) => {\n    const { create: createModal } = useContext(ModalManagerContext);\n    const t = useI18n();\n    const modalMethods = useRef<ModalMethods>();\n    const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n    const [editing, setEditing] = useState(false);\n    const popoverRef = useRef<HTMLDivElement>(null);\n\n    const [popoverTarget, setPopoverTarget] = useState<{\n      portal: HTMLLIElement;\n      button: HTMLButtonElement | null;\n    } | null>(null);\n\n    const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n      itemEls: [],\n      viewAllItemEls: []\n    });\n\n    // This function merges the pre-defined actions(add & edit) to the item object.\n    const mergeItemActions = (\n      items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n    ) => {\n      return items.map(({ onEdit, onRemove, ...rest }, i) => {\n        let itemActions: Action[] = [];\n        const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n        if (onEdit) {\n          itemActions = [\n            {\n              id: 'edit',\n              text: t('edit'),\n              icon: 'pencil',\n              onClick: () => {\n                setEditing(true);\n                setPopoverTarget({\n                  portal: elArray[i],\n                  button: elArray[i].querySelector<HTMLButtonElement>(\n                    'button[aria-haspopup=\"menu\"]'\n                  )\n                });\n\n                onEdit?.();\n              }\n            }\n          ];\n        }\n\n        if (onRemove) {\n          itemActions = [\n            ...itemActions,\n            {\n              id: 'remove',\n              text: t('remove'),\n              icon: 'trash',\n              onClick: () => {\n                onRemove?.();\n              }\n            }\n          ];\n        }\n\n        return {\n          ...rest,\n          ref: (el: HTMLLIElement) => {\n            elArray[i] = el;\n          },\n          actions: itemActions\n        };\n      });\n    };\n\n    const closePopover = () => {\n      if (!popoverTarget) return;\n      popoverTarget.button?.focus();\n      setPopoverTarget(null);\n      setEditing(false);\n    };\n\n    let formContent: ReactNode = null;\n    if (mode === 'add' || editing) {\n      formContent = (\n        <StakeholderForm\n          roles={form.roles}\n          currentRole={form.currentRole}\n          renderer={form.renderer}\n        />\n      );\n    }\n\n    // Actions used for add and edit both in the modal and the popover.\n    let formActions: ReactNode = null;\n    if (mode === 'add' || editing) {\n      formActions = (\n        <>\n          <Button\n            onClick={() => {\n              if (form.onDismiss() !== false) {\n                if (mode === 'add') {\n                  modalMethods.current?.dismiss();\n                } else {\n                  closePopover();\n                }\n              }\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              if (form.onSubmit() !== false) {\n                if (mode === 'add') {\n                  modalMethods.current?.dismiss();\n                } else {\n                  closePopover();\n                }\n              }\n            }}\n          >\n            {t('add')}\n          </Button>\n        </>\n      );\n    }\n\n    // Content for the modal either for adding new or viewing all.\n    let modalContent: ReactNode = null;\n    if (mode === 'add') modalContent = formContent;\n\n    if (mode === 'viewAll' || (editing && modalMethods.current)) {\n      modalContent = (\n        <ViewAll\n          loading={loading}\n          items={mergeItemActions(viewAll.items)}\n          actions={[\n            {\n              id: 'addStakeHolder',\n              text: 'Add new',\n              onClick: () => {\n                setMode('add');\n                onAddNew?.();\n              }\n            }\n          ]}\n          searchInputProps={{\n            onSearchChange: value => {\n              viewAll.onSearch(value);\n            }\n          }}\n        />\n      );\n    }\n\n    useEffect(() => {\n      if (!mode) {\n        modalMethods.current = undefined;\n        return;\n      }\n\n      const modalProps = {\n        children: modalContent,\n        actions: mode === 'add' ? formActions : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else if (mode === 'add' || mode === 'viewAll') {\n        modalMethods.current = createModal(Modal, {\n          heading:\n            mode === 'add'\n              ? t('add_noun', [t('stakeholders', [], { count: 1 })])\n              : cap(t('stakeholders')),\n          count: mode === 'add' ? undefined : count,\n          ...modalProps,\n          onAfterClose: () => {\n            setMode(undefined);\n            onAfterModalClose?.();\n          }\n        });\n      }\n    }, [mode, modalContent, formActions, count, onAfterModalClose]);\n\n    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n    useOuterEvent('mousedown', [popoverRef], closePopover);\n\n    let editPopover: ReactNode = null;\n    if (popoverTarget) {\n      editPopover = (\n        <Popover\n          ref={popoverRef}\n          target={popoverTarget.button}\n          placement='bottom-start'\n          role='dialog'\n        >\n          <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n            <Text variant='h3'>{t('edit_noun', [t('stakeholders', [], { count: 1 })])}</Text>\n            <StakeholderForm\n              roles={form.roles}\n              currentRole={form.currentRole}\n              renderer={form.renderer}\n            />\n            <Flex container={{ justify: 'between' }}>{formActions}</Flex>\n          </Flex>\n        </Popover>\n      );\n    }\n\n    const onKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') closePopover();\n    };\n\n    useEffect(() => {\n      if (!popoverTarget) return;\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [popoverTarget]);\n\n    return (\n      <>\n        <SummaryList\n          {...restProps}\n          ref={ref}\n          icon='person'\n          name={cap(t('stakeholders'))}\n          loading={loading}\n          count={count}\n          error={error}\n          items={useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [itemsProp])}\n          actions={\n            onAddNew\n              ? [\n                  {\n                    text: t('add_noun', [t('stakeholders', [], { count: 1 })]),\n                    id: 'addNew',\n                    icon: 'plus',\n                    onClick() {\n                      setMode('add');\n                      onAddNew?.();\n                    }\n                  }\n                ]\n              : undefined\n          }\n          onViewAll={\n            onViewAll && count && count > 3\n              ? () => {\n                  setMode('viewAll');\n                  onViewAll?.();\n                }\n              : undefined\n          }\n        />\n        {popoverTarget && createPortal(editPopover, popoverTarget.portal)}\n      </>\n    );\n  }\n);\n\nexport default Stakeholders;\n"]}

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

@@ -13,15 +13,18 @@ export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps
     items: Stakeholder[];
     /** Called when a user opens the add form. */
     onAddNew?: () => void;
-    /** Data and a component required to render a form for both add and edit. The renderer is passed the currently selected role. */
+    /**
+     * Data and a component required to render a form for both add and edit.
+     * If there are roles, the renderer is passed the currently selected role.
+     */
     form: {
         /** An array of available roles a stakeholder may be assigned. */
-        roles: string[];
+        roles?: string[];
         /** Use this when edit is invoked to indicate to the component which option to select. An empty string will be treated as no defined role and select the first role in the roles array.  */
-        currentRole: string;
+        currentRole?: string;
         /** A component to render the main portion of the add/edit stakeholder form. This may be a simple function. */
         renderer: ComponentType<{
-            role: string;
+            role?: string;
         }>;
         /** Called when a user submits an add/edit form. */
         onSubmit: NonNullable<ModalProps['onRequestDismiss']>;

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,UAAU,EACV,YAAY,EACZ,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,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,gIAAgI;IAChI,IAAI,EAAE;QACJ,iEAAiE;QACjE,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,2LAA2L;QAC3L,WAAW,EAAE,MAAM,CAAC;QACpB,8GAA8G;QAC9G,QAAQ,EAAE,aAAa,CAAC;YAAE,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAC1C,mDAAmD;QACnD,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACtD,4GAA4G;QAC5G,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC;KACxD,CAAC;IACF,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE;QACP,uFAAuF;QACvF,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAClC,2HAA2H;QAC3H,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACnC,CAAC;IAEF,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;CAChD"}
+{"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,UAAU,EACV,YAAY,EACZ,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,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,iEAAiE;QACjE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,2LAA2L;QAC3L,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,8GAA8G;QAC9G,QAAQ,EAAE,aAAa,CAAC;YAAE,IAAI,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAC3C,mDAAmD;QACnD,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACtD,4GAA4G;QAC5G,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC;KACxD,CAAC;IACF,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE;QACP,uFAAuF;QACvF,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAClC,2HAA2H;QAC3H,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACnC,CAAC;IAEF,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;CAChD"}

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  ModalProps,\n  ForwardProps,\n  NoChildrenProp,\n  SummaryListItem\n} from '@pega/cosmos-react-core';\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  /** Data and a component required to render a form for both add and edit. The renderer is passed the currently selected role. */\n  form: {\n    /** An array of available roles a stakeholder may be assigned. */\n    roles: string[];\n    /** Use this when edit is invoked to indicate to the component which option to select. An empty string will be treated as no defined role and select the first role in the roles array.  */\n    currentRole: string;\n    /** A component to render the main portion of the add/edit stakeholder form. This may be a simple function. */\n    renderer: ComponentType<{ role: string }>;\n    /** Called when a user submits an add/edit form. */\n    onSubmit: NonNullable<ModalProps['onRequestDismiss']>;\n    /** Called when a user dismisses an add/edit form either via the cancel action, click away or escape key. */\n    onDismiss: NonNullable<ModalProps['onRequestDismiss']>;\n  };\n  /** Called when a user opens the view all modal. */\n  onViewAll?: () => void;\n  viewAll: {\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\n  /** Called when the the modal for add or view all transitions out. */\n  onAfterModalClose?: ModalProps['onAfterClose'];\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  ModalProps,\n  ForwardProps,\n  NoChildrenProp,\n  SummaryListItem\n} from '@pega/cosmos-react-core';\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    /** An array of available roles a stakeholder may be assigned. */\n    roles?: string[];\n    /** Use this when edit is invoked to indicate to the component which option to select. An empty string will be treated as no defined role and select the first role in the roles array.  */\n    currentRole?: string;\n    /** A component to render the main portion of the add/edit stakeholder form. This may be a simple function. */\n    renderer: ComponentType<{ role?: string }>;\n    /** Called when a user submits an add/edit form. */\n    onSubmit: NonNullable<ModalProps['onRequestDismiss']>;\n    /** Called when a user dismisses an add/edit form either via the cancel action, click away or escape key. */\n    onDismiss: NonNullable<ModalProps['onRequestDismiss']>;\n  };\n  /** Called when a user opens the view all modal. */\n  onViewAll?: () => void;\n  viewAll: {\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\n  /** Called when the the modal for add or view all transitions out. */\n  onAfterModalClose?: ModalProps['onAfterClose'];\n}\n"]}

package/lib/components/Tags/Tags.js

@@ -64,7 +64,7 @@ const EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }) => {
             !selected.some(x => x.text === filterValue)) {
             menuItems.push({
                 id: `custom:${filterValue}`,
-                primary: t('use_input_value', `"${filterValue}"`)
+                primary: t('use_input_value', [filterValue])
             });
         }
         setItems(menuItems);

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

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

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

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

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

package/lib/components/Tasks/TaskList.js

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

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

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

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

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

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

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

package/lib/components/Tasks/Tasks.js

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

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  defaultThemeProp,\n  StyledSummaryListItem\n} from '@pega/cosmos-react-core';\n\nexport interface TaskItemProps {\n  /** Name of the task displayed in the list. */\n  name: ReactNode;\n  /** Avatar element to represent the task's assignee. */\n  avatar?: ReactNode;\n  /** MetaList element with info related to the task. */\n  meta?: ReactNode;\n  /** Region for task level actions such as opening or dismissing. */\n  actions?: ReactNode;\n  /** Content for the task when open. */\n  content?: ReactNode;\n  [key: string]: unknown;\n}\nexport interface TasksProps {\n  /** An array of TaskItemProps to generate the list.  */\n  items: TaskItemProps[];\n  /** Content to render when the list is empty. */\n  emptyPlaceholder: ReactNode;\n  /** Heading text to render at the top of the list. */\n  headerText: string;\n  /** A visual element i.e. (Avatar | Icon) to accompany the header text. */\n  headerVisual?: ReactElement;\n  /** A region for supplemental task list info or controls. */\n  headerSecondary?: ReactNode;\n  /** Integer representing the total count of tasks. */\n  count?: number | null;\n  /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */\n  onExpandToggle?: () => void;\n}\n\nconst TaskItem = ({ name, avatar, meta, actions, content, ...restProps }: TaskItemProps) => {\n  const summary = (\n    <SummaryItem\n      visual={avatar}\n      primary={name}\n      secondary={meta}\n      actions={content ? null : actions}\n    />\n  );\n  return (\n    <Flex\n      container={{ direction: 'column', gap: 2 }}\n      item={{ grow: 1 }}\n      as={StyledSummaryListItem}\n      forwardedAs='li'\n      {...restProps}\n    >\n      {content ? (\n        <>\n          {summary}\n          {content}\n        </>\n      ) : (\n        summary\n      )}\n    </Flex>\n  );\n};\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n  return openItem\n    ? css`\n        box-shadow: ${theme.base.shadow.low};\n      `\n    : null;\n});\n\nconst StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n  return css`\n    ${hasFooter &&\n    css`\n      > li:last-child {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `}\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n  const {\n    items = [],\n    headerText,\n    headerVisual,\n    headerSecondary,\n    count,\n    onExpandToggle,\n    emptyPlaceholder,\n    ...restProps\n  } = props;\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n\n  const TaskItems = useMemo(() => {\n    return openItem ? (\n      <TaskItem {...openItem} />\n    ) : (\n      items.map((item, i) => <TaskItem {...item} key={`${i + 1}`} />)\n    );\n  }, [items, openItem]);\n\n  const hasFooter = useMemo(() => {\n    return !openItem && typeof count === 'number' && count > 3;\n  }, [openItem, count]);\n\n  return (\n    <StyledTasks {...restProps} openItem={!!openItem}>\n      {!openItem && (\n        <CardHeader>\n          <SummaryItem\n            visual={headerVisual}\n            primary={\n              <Flex container={{ alignItems: 'center', gap: 1 }}>\n                <Text variant='h2'>{headerText}</Text>\n                <Count>{count ?? null}</Count>\n              </Flex>\n            }\n            secondary={headerSecondary}\n          />\n        </CardHeader>\n      )}\n      <CardContent>\n        {items.length > 0 ? (\n          <Flex container={{ direction: 'column' }} as={StyledTaskList} hasFooter={hasFooter}>\n            {TaskItems}\n          </Flex>\n        ) : (\n          emptyPlaceholder\n        )}\n      </CardContent>\n\n      {hasFooter && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', 'tasks')}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              onExpandToggle?.();\n              if (!!count && count <= items.length) {\n                const { currentTarget } = e;\n                requestAnimationFrame(() => {\n                  if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n                });\n              }\n            }}\n          >\n            {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTasks>\n  );\n};\n\nexport default Tasks;\n"]}
+{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FC, ReactElement, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Flex,\n  Text,\n  SummaryItem,\n  Count,\n  Button,\n  useI18n,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\n\nexport interface TasksProps {\n  /** An array of TaskItemProps to generate the list.  */\n  items: TaskItemProps[];\n  /** Content to render when the list is empty. */\n  emptyPlaceholder: ReactNode;\n  /** Heading text to render at the top of the list. */\n  headerText: string;\n  /** A visual element i.e. (Avatar | Icon) to accompany the header text. */\n  headerVisual?: ReactElement;\n  /** A region for supplemental task list info or controls. */\n  headerSecondary?: ReactNode;\n  /** Integer representing the total count of tasks. */\n  count?: number | null;\n  /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */\n  onExpandToggle?: () => void;\n}\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n  return openItem\n    ? css`\n        box-shadow: ${theme.base.shadow.low};\n      `\n    : null;\n});\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n  const {\n    items = [],\n    headerText,\n    headerVisual,\n    headerSecondary,\n    count,\n    onExpandToggle,\n    emptyPlaceholder,\n    ...restProps\n  } = props;\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n\n  const hasFooter = useMemo(() => {\n    return !openItem && typeof count === 'number' && count > 3;\n  }, [openItem, count]);\n\n  const TaskItems = useMemo(() => {\n    return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} hasFooter={hasFooter} />;\n  }, [items, openItem]);\n\n  return (\n    <StyledTasks {...restProps} openItem={!!openItem}>\n      {!openItem && (\n        <CardHeader>\n          <SummaryItem\n            visual={headerVisual}\n            primary={\n              <Flex container={{ alignItems: 'center', gap: 1 }}>\n                <Text variant='h2'>{headerText}</Text>\n                <Count>{count ?? null}</Count>\n              </Flex>\n            }\n            secondary={headerSecondary}\n          />\n        </CardHeader>\n      )}\n      <CardContent>{items.length > 0 ? TaskItems : emptyPlaceholder}</CardContent>\n\n      {hasFooter && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              onExpandToggle?.();\n              if (!!count && count <= items.length) {\n                const { currentTarget } = e;\n                requestAnimationFrame(() => {\n                  if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n                });\n              }\n            }}\n          >\n            {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTasks>\n  );\n};\n\nexport default Tasks;\n"]}

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

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

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

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

package/lib/components/Tasks/index.js

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