@pega/cosmos-react-work 5.0.0-dev.4.6 → 5.0.0-dev.4.8

package/lib/components/Stakeholders/StakeholderForm.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { ComboBox, RadioButtonGroup, RadioButton, Flex, useI18n, Input, getFocusables } from '@pega/cosmos-react-core';
-export default ({ roles, currentRole, renderer: Renderer, rendererProps, setSelectedRoleNameRef }) => {
-    const contentRef = useRef(null);
-    const t = useI18n();
-    const [selectedRoleName, setSelectedRoleName] = useState(() => {
-        if (roles) {
-            return (currentRole ? roles.find(role => role.name === currentRole.name) : roles[0])?.name;
-        }
-    });
-    let control = null;
-    if (roles) {
-        const label = t('stakeholders_role');
-        if (roles.length > 3) {
-            const items = roles.map(role => {
-                return {
-                    id: role.name,
-                    primary: role.name,
-                    selected: role.name === selectedRoleName
-                };
-            });
-            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: setSelectedRoleName
-                } }));
-        }
-        else {
-            control = (_jsx(RadioButtonGroup, { label: label, name: 'role', inline: true, onChange: e => {
-                    setSelectedRoleName(e.target.value);
-                }, children: roles.map(role => (_jsx(RadioButton, { label: role.name, value: role.name, checked: role.name === selectedRoleName }, role.name))) }));
-        }
-    }
-    else if (currentRole) {
-        control = (_jsx(Input, { readOnly: true, label: t('stakeholders_role'), value: currentRole.name, info: currentRole.description }));
-    }
-    useEffect(() => {
-        getFocusables(contentRef)[0]?.focus();
-    }, []);
-    useEffect(() => {
-        if (!roles)
-            return;
-        setSelectedRoleNameRef(selectedRoleName);
-    }, [selectedRoleName]);
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, ref: contentRef, children: [control, _jsx(Renderer, { ...rendererProps, selectedRoleName: selectedRoleName })] }));
-};
-//# sourceMappingURL=StakeholderForm.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"StakeholderForm.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  ComboBox,\n  RadioButtonGroup,\n  RadioButton,\n  Flex,\n  useI18n,\n  Input,\n  getFocusables\n} from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\n\ninterface FormProps\n  extends Pick<StakeholdersProps['form'], 'roles' | 'currentRole' | 'renderer' | 'rendererProps'> {\n  setSelectedRoleNameRef: (selectedRoleName?: string | undefined) => void;\n}\n\nexport default ({\n  roles,\n  currentRole,\n  renderer: Renderer,\n  rendererProps,\n  setSelectedRoleNameRef\n}: FormProps) => {\n  const contentRef = useRef<HTMLElement>(null);\n  const t = useI18n();\n\n  const [selectedRoleName, setSelectedRoleName] = useState<Role['name'] | undefined>(() => {\n    if (roles) {\n      return (currentRole ? roles.find(role => role.name === currentRole.name) : roles[0])?.name;\n    }\n  });\n\n  let control: JSX.Element | null = null;\n\n  if (roles) {\n    const label = t('stakeholders_role');\n\n    if (roles.length > 3) {\n      const items = roles.map(role => {\n        return {\n          id: role.name,\n          primary: role.name,\n          selected: role.name === selectedRoleName\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: setSelectedRoleName\n          }}\n        />\n      );\n    } else {\n      control = (\n        <RadioButtonGroup\n          label={label}\n          name='role'\n          inline\n          onChange={e => {\n            setSelectedRoleName(e.target.value);\n          }}\n        >\n          {roles.map(role => (\n            <RadioButton\n              key={role.name}\n              label={role.name}\n              value={role.name}\n              checked={role.name === selectedRoleName}\n            />\n          ))}\n        </RadioButtonGroup>\n      );\n    }\n  } else if (currentRole) {\n    control = (\n      <Input\n        readOnly\n        label={t('stakeholders_role')}\n        value={currentRole.name}\n        info={currentRole.description}\n      />\n    );\n  }\n\n  useEffect(() => {\n    getFocusables(contentRef)[0]?.focus();\n  }, []);\n\n  useEffect(() => {\n    if (!roles) return;\n    setSelectedRoleNameRef(selectedRoleName);\n  }, [selectedRoleName]);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }} ref={contentRef}>\n      {control}\n      <Renderer {...rendererProps} selectedRoleName={selectedRoleName} />\n    </Flex>\n  );\n};\n"]}

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

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

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

@@ -1 +0,0 @@
-{"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,EAA0B,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA0UrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Stakeholders/Stakeholders.js

@@ -1,220 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect, useMemo, useState, useCallback } from 'react';
-import styled from 'styled-components';
-import { SummaryList, useI18n, Button, ViewAll, Modal, Popover, Flex, Text, useModalManager, useOuterEvent, Progress, useAfterInitialEffect } from '@pega/cosmos-react-core';
-import StakeholderForm from './StakeholderForm';
-const StyledStakeholders = styled(SummaryList) ``;
-const StyledEditFormWrap = styled.div `
-  position: relative;
-  min-height: 8rem;
-
-  &[aria-busy='true'] > :nth-child(2) {
-    visibility: hidden;
-  }
-`;
-const StyledPopover = styled(Popover) `
-  width: 40ch;
-  min-height: 12rem;
-`;
-const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count, loading, onAddNew, form, onViewAll, viewAll, error, ...restProps }, ref) {
-    const { create: createModal } = useModalManager();
-    const t = useI18n();
-    const modalMethods = useRef();
-    const [mode, setMode] = useState();
-    const [editing, setEditing] = useState(false);
-    const [viewAllSearchValue, setViewAllSearchValue] = useState('');
-    const popoverRef = useRef(null);
-    const progressMsgRef = useRef(t('loading'));
-    // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.
-    const selectedRoleNameRef = useRef();
-    // Setter for the ref. Avoids a re-render.
-    const setSelectedRoleNameRef = useCallback((selectedRoleName) => {
-        selectedRoleNameRef.current = selectedRoleName;
-    }, []);
-    const [popoverTarget, setPopoverTarget] = useState(null);
-    const itemElsRef = useRef({
-        itemEls: [],
-        viewAllItemEls: []
-    });
-    // This function merges the pre-defined actions(add & edit) to the item object.
-    const mergeItemActions = (items) => {
-        return items.map(({ onEdit, onRemove, ...rest }, i) => {
-            let itemActions = [];
-            const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];
-            if (onEdit) {
-                itemActions = [
-                    {
-                        id: 'edit',
-                        text: t('edit'),
-                        icon: 'pencil',
-                        onClick: () => {
-                            setEditing(true);
-                            setPopoverTarget({
-                                portal: elArray[i],
-                                button: elArray[i].querySelector('button[aria-haspopup="menu"]')
-                            });
-                            onEdit?.();
-                        }
-                    }
-                ];
-            }
-            if (onRemove) {
-                itemActions = [
-                    ...itemActions,
-                    {
-                        id: 'remove',
-                        text: t('remove'),
-                        icon: 'trash',
-                        onClick: () => {
-                            onRemove?.();
-                        }
-                    }
-                ];
-            }
-            return {
-                ...rest,
-                ref: (el) => {
-                    elArray[i] = el;
-                },
-                actions: itemActions
-            };
-        });
-    };
-    const closePopover = () => {
-        if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting')))
-            return;
-        popoverTarget.button?.focus();
-        setPopoverTarget(null);
-        setEditing(false);
-        progressMsgRef.current = t('loading');
-    };
-    let formContent = null;
-    if ((mode === 'add' || editing) &&
-        (!form.loading || progressMsgRef.current === t('submitting'))) {
-        formContent = (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, setSelectedRoleNameRef: setSelectedRoleNameRef }));
-    }
-    // Actions used for add and edit both in the modal and the popover.
-    let formActions = null;
-    if ((mode === 'add' || editing) &&
-        (!form.loading || progressMsgRef.current === t('submitting'))) {
-        const closeForm = () => {
-            if (mode === 'add') {
-                modalMethods.current?.dismiss();
-            }
-            else {
-                closePopover();
-            }
-        };
-        formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: form.loading, onClick: () => {
-                        form.onDismiss({ closeForm });
-                    }, children: t('cancel') }), _jsx(Button, { disabled: form.loading, type: 'submit', variant: 'primary', onClick: () => {
-                        progressMsgRef.current = t('submitting');
-                        form.onSubmit({
-                            selectedRoleName: selectedRoleNameRef.current,
-                            closeForm
-                        });
-                    }, children: t('submit') })] }));
-    }
-    let editPopover = null;
-    if (popoverTarget) {
-        editPopover = (_jsx(StyledPopover, { ref: popoverRef, target: popoverTarget.button, placement: 'auto', role: 'dialog', children: _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, children: [_jsx(Text, { variant: 'h3', children: t('edit_stakeholder') }), _jsxs(StyledEditFormWrap, { "aria-busy": form.loading ? 'true' : 'false', children: [_jsx(Progress, { placement: 'local', visible: form.loading, message: progressMsgRef.current }), (!form.loading || progressMsgRef.current === t('submitting')) && (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, setSelectedRoleNameRef: setSelectedRoleNameRef }))] }), formActions && _jsx(Flex, { container: { justify: 'between' }, children: formActions })] }) }));
-    }
-    // Content for the modal either for adding new or viewing all.
-    let modalContent = null;
-    if (mode === 'add')
-        modalContent = formContent;
-    if (!viewAll.loading && (mode === 'viewAll' || (editing && modalMethods.current))) {
-        modalContent = (_jsxs(_Fragment, { children: [_jsx(ViewAll, { items: mergeItemActions(viewAll.items), actions: [
-                        {
-                            id: 'addStakeHolder',
-                            text: 'Add new',
-                            onClick: () => {
-                                setMode('add');
-                                onAddNew?.();
-                            }
-                        }
-                    ], searchInputProps: viewAll.onSearch
-                        ? {
-                            value: viewAllSearchValue,
-                            onSearchChange: (value) => {
-                                setViewAllSearchValue(value);
-                                viewAll?.onSearch?.(value);
-                            }
-                        }
-                        : undefined }), editPopover] }));
-    }
-    useEffect(() => {
-        if (!mode) {
-            modalMethods.current = undefined;
-            return;
-        }
-        const modalProps = {
-            progress: (mode === 'add' && form.loading) || viewAll.loading
-                ? { message: progressMsgRef.current }
-                : undefined,
-            count: mode === 'viewAll' ? count : undefined,
-            children: modalContent,
-            actions: mode === 'add' ? formActions : undefined,
-            onRequestDismiss: form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined
-        };
-        if (modalMethods.current) {
-            modalMethods.current.update(modalProps);
-        }
-        else if (mode === 'add' || mode === 'viewAll') {
-            modalMethods.current = createModal(Modal, {
-                ...modalProps,
-                heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),
-                onAfterClose: () => {
-                    if (mode === 'add') {
-                        form.onAfterClose?.();
-                    }
-                    else {
-                        setViewAllSearchValue('');
-                        viewAll.onAfterClose?.();
-                    }
-                    progressMsgRef.current = t('loading');
-                    setMode(undefined);
-                }
-            });
-        }
-    }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);
-    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.
-    useOuterEvent('mousedown', [popoverRef], closePopover);
-    const onKeydown = (e) => {
-        if (e.key === 'Escape') {
-            closePopover();
-        }
-    };
-    useEffect(() => {
-        if (!popoverTarget)
-            return;
-        document.addEventListener('keydown', onKeydown);
-        return () => {
-            document.removeEventListener('keydown', onKeydown);
-        };
-    }, [popoverTarget]);
-    useAfterInitialEffect(() => {
-        if (!popoverTarget)
-            form.onAfterClose?.();
-    }, [popoverTarget]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledStakeholders, { ...restProps, ref: ref, icon: 'person', name: t('view_stakeholders'), headingTag: 'h3', loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [mergeItemActions, itemsProp]), actions: onAddNew
-                    ? [
-                        {
-                            text: t('add'),
-                            id: 'add_new',
-                            icon: 'plus',
-                            onClick() {
-                                setMode('add');
-                                onAddNew?.();
-                            }
-                        }
-                    ]
-                    : undefined, onViewAll: onViewAll && count && count > 3
-                    ? () => {
-                        setMode('viewAll');
-                        onViewAll?.();
-                    }
-                    : undefined }), editPopover && mode !== 'viewAll' ? editPopover : null] }));
-});
-export default Stakeholders;
-//# sourceMappingURL=Stakeholders.js.map

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

@@ -1 +0,0 @@
-{"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  useRef,\n  useEffect,\n  useMemo,\n  useState,\n  ReactNode,\n  useCallback\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  SummaryList,\n  useI18n,\n  ModalMethods,\n  Button,\n  ViewAll,\n  Modal,\n  Popover,\n  Flex,\n  Text,\n  useModalManager,\n  useOuterEvent,\n  Progress,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps, ModalProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div`\n  position: relative;\n  min-height: 8rem;\n\n  &[aria-busy='true'] > :nth-child(2) {\n    visibility: hidden;\n  }\n`;\n\nconst StyledPopover = styled(Popover)`\n  width: 40ch;\n  min-height: 12rem;\n`;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n  function Stakeholders(\n    {\n      items: itemsProp,\n      count,\n      loading,\n      onAddNew,\n      form,\n      onViewAll,\n      viewAll,\n      error,\n      ...restProps\n    }: PropsWithoutRef<StakeholdersProps>,\n    ref: StakeholdersProps['ref']\n  ) {\n    const { create: createModal } = useModalManager();\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 [viewAllSearchValue, setViewAllSearchValue] = useState('');\n    const popoverRef = useRef<HTMLDivElement>(null);\n    const progressMsgRef = useRef(t('loading'));\n\n    // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n    const selectedRoleNameRef = useRef<Role['name'] | undefined>();\n    // Setter for the ref. Avoids a re-render.\n    const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n      selectedRoleNameRef.current = selectedRoleName;\n    }, []);\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 || (form.loading && progressMsgRef.current === t('submitting'))) return;\n      popoverTarget.button?.focus();\n      setPopoverTarget(null);\n      setEditing(false);\n      progressMsgRef.current = t('loading');\n    };\n\n    let formContent: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      formContent = (\n        <StakeholderForm\n          roles={form.roles}\n          currentRole={form.currentRole}\n          renderer={form.renderer}\n          rendererProps={form.rendererProps}\n          setSelectedRoleNameRef={setSelectedRoleNameRef}\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 (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      const closeForm = () => {\n        if (mode === 'add') {\n          modalMethods.current?.dismiss();\n        } else {\n          closePopover();\n        }\n      };\n\n      formActions = (\n        <>\n          <Button\n            disabled={form.loading}\n            onClick={() => {\n              form.onDismiss({ closeForm });\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            disabled={form.loading}\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              progressMsgRef.current = t('submitting');\n              form.onSubmit({\n                selectedRoleName: selectedRoleNameRef.current,\n                closeForm\n              });\n            }}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      );\n    }\n\n    let editPopover: ReactNode = null;\n    if (popoverTarget) {\n      editPopover = (\n        <StyledPopover\n          ref={popoverRef}\n          target={popoverTarget.button}\n          placement='auto'\n          role='dialog'\n        >\n          <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n            <Text variant='h3'>{t('edit_stakeholder')}</Text>\n            <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n              <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n              {(!form.loading || progressMsgRef.current === t('submitting')) && (\n                <StakeholderForm\n                  roles={form.roles}\n                  currentRole={form.currentRole}\n                  renderer={form.renderer}\n                  rendererProps={form.rendererProps}\n                  setSelectedRoleNameRef={setSelectedRoleNameRef}\n                />\n              )}\n            </StyledEditFormWrap>\n            {formActions && <Flex container={{ justify: 'between' }}>{formActions}</Flex>}\n          </Flex>\n        </StyledPopover>\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 (!viewAll.loading && (mode === 'viewAll' || (editing && modalMethods.current))) {\n      modalContent = (\n        <>\n          <ViewAll\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              viewAll.onSearch\n                ? {\n                    value: viewAllSearchValue,\n                    onSearchChange: (value: string) => {\n                      setViewAllSearchValue(value);\n                      viewAll?.onSearch?.(value);\n                    }\n                  }\n                : undefined\n            }\n          />\n          {/* Edit popover triggered from a modal must be rendered within modal content to render in correct DOM position. */}\n          {editPopover}\n        </>\n      );\n    }\n\n    useEffect(() => {\n      if (!mode) {\n        modalMethods.current = undefined;\n        return;\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress:\n          (mode === 'add' && form.loading) || viewAll.loading\n            ? { message: progressMsgRef.current }\n            : undefined,\n        count: mode === 'viewAll' ? count : undefined,\n        children: modalContent,\n        actions: mode === 'add' ? formActions : undefined,\n        onRequestDismiss:\n          form.loading && progressMsgRef.current === t('submitting') ? () => false : 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          ...modalProps,\n          heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n          onAfterClose: () => {\n            if (mode === 'add') {\n              form.onAfterClose?.();\n            } else {\n              setViewAllSearchValue('');\n              viewAll.onAfterClose?.();\n            }\n\n            progressMsgRef.current = t('loading');\n            setMode(undefined);\n          }\n        });\n      }\n    }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\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    const onKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closePopover();\n      }\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    useAfterInitialEffect(() => {\n      if (!popoverTarget) form.onAfterClose?.();\n    }, [popoverTarget]);\n\n    return (\n      <>\n        <StyledStakeholders\n          {...restProps}\n          ref={ref}\n          icon='person'\n          name={t('view_stakeholders')}\n          headingTag='h3'\n          loading={loading}\n          count={count}\n          error={error}\n          items={useMemo(\n            () => mergeItemActions(itemsProp.slice(0, 3)),\n            [mergeItemActions, itemsProp]\n          )}\n          actions={\n            onAddNew\n              ? [\n                  {\n                    text: t('add'),\n                    id: 'add_new',\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        {/* When edit is opened outside of the view all modal. */}\n        {editPopover && mode !== 'viewAll' ? editPopover : null}\n      </>\n    );\n  }\n);\n\nexport default Stakeholders;\n"]}

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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Stakeholders.types.js.map

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

@@ -1 +0,0 @@
-{"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/Stakeholders/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './Stakeholders';
-export type { StakeholdersProps, Role, Stakeholder } from './Stakeholders.types';
-//# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/Stakeholders/index.js

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"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,CA8HpD,CAAC;AAEH,eAAe,IAAI,CAAC"}