@pega/cosmos-react-work 2.0.0-dev.2.0 → 2.0.0-dev.21.1

package/lib/components/Stakeholders/Stakeholders.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef, useEffect, useMemo, useState, useCallback } from 'react';
+import styled from 'styled-components';
+import { createPortal } from 'react-dom';
+import { SummaryList, ModalManagerContext, useI18n, Button, ViewAll, Modal, Popover, Flex, Text, useOuterEvent, cap, 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(({ items: itemsProp, count, loading, onAddNew, form, onViewAll, viewAll, error, ...restProps }, ref) => {
+    const { create: createModal } = useContext(ModalManagerContext);
+    const t = useI18n();
+    const modalMethods = useRef();
+    const [mode, setMode] = useState();
+    const [editing, setEditing] = useState(false);
+    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 }, void 0));
+    }
+    // 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') }, void 0), _jsx(Button, { disabled: form.loading, type: 'submit', variant: 'primary', onClick: () => {
+                        progressMsgRef.current = t('submitting');
+                        form.onSubmit({
+                            selectedRoleName: selectedRoleNameRef.current,
+                            closeForm
+                        });
+                    }, children: t('submit') }, void 0)] }, void 0));
+    }
+    // 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 = (_jsx(ViewAll, { items: mergeItemActions(viewAll.items), actions: [
+                {
+                    id: 'addStakeHolder',
+                    text: 'Add new',
+                    onClick: () => {
+                        setMode('add');
+                        onAddNew?.();
+                    }
+                }
+            ], searchInputProps: viewAll.onSearch
+                ? {
+                    onSearchChange: viewAll.onSearch
+                }
+                : undefined }, void 0));
+    }
+    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_noun', [t('stakeholders', [], { count: 1 })])
+                    : cap(t('stakeholders')),
+                onAfterClose: () => {
+                    if (mode === 'add') {
+                        form.onAfterClose?.();
+                    }
+                    else {
+                        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);
+    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_noun', [t('stakeholders', [], { count: 1 })]) }, void 0), _jsxs(StyledEditFormWrap, { "aria-busy": form.loading ? 'true' : 'false', children: [_jsx(Progress, { placement: 'local', visible: form.loading, message: progressMsgRef.current }, void 0), (!form.loading || progressMsgRef.current === t('submitting')) && (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, setSelectedRoleNameRef: setSelectedRoleNameRef }, void 0))] }, void 0), formActions && _jsx(Flex, { container: { justify: 'between' }, children: formActions }, void 0)] }, void 0) }, void 0));
+    }
+    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: cap(t('stakeholders')), loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [mergeItemActions, itemsProp]), actions: onAddNew
+                    ? [
+                        {
+                            text: t('add_noun', [t('stakeholders', [], { count: 1 })]),
+                            id: 'addNew',
+                            icon: 'plus',
+                            onClick() {
+                                setMode('add');
+                                onAddNew?.();
+                            }
+                        }
+                    ]
+                    : undefined, onViewAll: onViewAll && count && count > 3
+                    ? () => {
+                        setMode('viewAll');
+                        onViewAll?.();
+                    }
+                    : undefined }, void 0), popoverTarget && createPortal(editPopover, popoverTarget.portal)] }, void 0));
+});
+export default Stakeholders;
+//# sourceMappingURL=Stakeholders.js.map

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

@@ -0,0 +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  useCallback\n} from 'react';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport {\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  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  (\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 } = 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    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    // 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        <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                  onSearchChange: viewAll.onSearch\n                }\n              : undefined\n          }\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:\n            mode === 'add'\n              ? t('add_noun', [t('stakeholders', [], { count: 1 })])\n              : cap(t('stakeholders')),\n          onAfterClose: () => {\n            if (mode === 'add') {\n              form.onAfterClose?.();\n            } else {\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    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_noun', [t('stakeholders', [], { count: 1 })])}</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    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={cap(t('stakeholders'))}\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_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

@@ -0,0 +1,83 @@
+import type { ComponentType } from 'react';
+import type { SummaryListProps, ForwardProps, NoChildrenProp, SummaryListItem } from '@pega/cosmos-react-core';
+export declare 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

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

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

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

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

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

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

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

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

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

package/lib/components/Stakeholders/index.js

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

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

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

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

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

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

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

package/lib/components/Tags/Tags.js

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