npm - @pega/cosmos-react-work - Versions diffs - 8.16.1 → 8.17.1 - Mend

@pega/cosmos-react-work 8.16.1 → 8.17.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/lib/components/AppAnnouncement/AppAnnouncement.js CHANGED Viewed

@@ -87,7 +87,7 @@ StyledAppAnnouncement.defaultProps = defaultThemeProp;
 const AppAnnouncement = forwardRef(function AppAnnouncement(props, ref) {
     const t = useI18n();
     const { heading, description, details, whatsNewLink, whatsNewText = t('app_announcement_whats_new_button_label'), image, onDismiss, ...restProps } = props;
-    return (_jsxs(StyledAppAnnouncement, { ...restProps, ref: ref, image: image, children: [onDismiss && (_jsx(Button, { as: StyledDismissButton, variant: 'simple', icon: true, onClick: onDismiss, "aria-label": t('app_announcement_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) })), _jsx(Text, { variant: 'h2', children: heading || t('app_announcement_details_list_header') }), _jsxs("div", { children: [description && _jsx("p", { children: description }), details && (_jsx("ul", { children: details.map((item, index) => {
+    return (_jsxs(StyledAppAnnouncement, { ...restProps, ref: ref, image: image, children: [onDismiss && (_jsx(Button, { as: StyledDismissButton, variant: 'simple', icon: true, onClick: onDismiss, "aria-label": t('app_announcement_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) })), _jsx(Text, { variant: 'h2', children: heading || t('app_announcement_details_list_header') }), _jsxs("div", { children: [description && _jsx("p", { children: description }), !!details?.length && (_jsx("ul", { children: details.map((item, index) => {
                             // eslint-disable-next-line react/no-array-index-key
                             return _jsx("li", { children: item }, index);
                         }) })), whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: whatsNewText }))] })] }));

package/lib/components/AppAnnouncement/AppAnnouncement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,YAAY,EACZ,wBAAwB,EACzB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAwBxB,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;;;CAGxC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,OAAO,CAEjD,KAAK,CAAC,EAAE;IACR,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACvC,YAAY,EAAE,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAClE,EACF,EACD,KAAK,EACN,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,wBAAwB,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAEpE,OAAO,GAAG,CAAA;wBACY,OAAO;kBACb,UAAU;qBACP,YAAY;aACpB,KAAK;;;MAGZ,KAAK,CAAC,WAAW,IAAI,mBAAmB;;;yBAGrB,KAAK;6BACD,GAAG;;;;;;;;;;;0BAWN,OAAO;;;;;;uBAMV,OAAO;;;MAGxB,mBAAmB;;;;;;;;;;sBAUH,MAAM,CAAC,KAAK;;;;;;;;;;;gCAWF,OAAO;;;;yCAIE,OAAO;;;QAGxC,YAAY;+BACW,OAAO;;;;;wBAKd,MAAM,CAAC,KAAK;;;;GAIjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,eAAe,GAA0D,UAAU,CACvF,SAAS,eAAe,CACtB,KAA4C,EAC5C,GAAgC;IAEhC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EACJ,OAAO,EACP,WAAW,EACX,OAAO,EACP,YAAY,EACZ,YAAY,GAAG,CAAC,CAAC,yCAAyC,CAAC,EAC3D,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,qBAAqB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,aACzD,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,EAAE,EAAE,mBAAmB,EACvB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,SAAS,gBACN,CAAC,CAAC,4CAA4C,CAAC,YAE3D,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,EACD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,IAAI,CAAC,CAAC,sCAAsC,CAAC,GAAQ,EAChF,0BACG,WAAW,IAAI,sBAAI,WAAW,GAAK,EACnC,OAAO,IAAI,~~CACV~~,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;4BAC3B,oDAAoD;4BACpD,OAAO,uBAAiB,IAAI,IAAZ,KAAK,CAAa,CAAC;wBACrC,CAAC,CAAC,GACC,CACN,EACA,YAAY,IAAI,CACf,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,YAC5D,YAAY,GACN,CACV,IACG,IACgB,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n StyledButton,\n Text,\n Icon,\n registerIcon,\n useI18n,\n defaultThemeProp,\n useDirection,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n /** Heading text for the announcement. /\n heading?: string;\n /* Description text for the announcement. /\n description?: string;\n /* Announcement details to be displayed in form of bulleted list. /\n details?: string[];\n /* Url to open with What's new link. /\n whatsNewLink?: string;\n /* Content to populate the announcement button. /\n whatsNewText?: string;\n /* An image source for the decorative background. /\n image?: string;\n /\n Whether to fit AppAnnouncement widget in the parent element.\n /\n fitToParent?: boolean;\n /* Callback when user dismisses the announcements. /\n onDismiss?: () => void;\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n font-size: 1.25rem;\n border: none;\n`;\n\nexport const StyledAppAnnouncement = styled.article<\n Pick<AppAnnouncementProps, 'image' \| 'fitToParent'>\n>(props => {\n const {\n theme: {\n base: { shadow, spacing },\n components: {\n card: { 'border-radius': borderRadius },\n announcement: { background, 'foreground-color': foregroundColor }\n }\n },\n image\n } = props;\n\n const { end } = useDirection();\n const color = calculateForegroundColor(background, foregroundColor);\n\n return css`\n padding: calc(2 ${spacing});\n background: ${background};\n border-radius: ${borderRadius};\n color: ${color};\n position: relative;\n\n ${props.fitToParent && 'block-size: 100%;'};\n\n &::after {\n background: url('${image}') no-repeat;\n background-position: ${end} bottom;\n background-size: contain;\n background-origin: content-box;\n opacity: 0.2;\n content: '';\n display: block;\n position: absolute;\n width: 50%;\n height: 100%;\n inset-inline-end: 0;\n bottom: 0;\n padding: calc(2 * ${spacing});\n }\n\n h2 {\n position: relative;\n z-index: 2;\n margin-bottom: ${spacing};\n }\n\n ${StyledDismissButton} {\n position: absolute;\n top: 0.75rem;\n inset-inline-end: 0.75rem;\n color: inherit;\n z-index: 3;\n &:enabled:hover {\n background: #ffffff19;\n }\n &:enabled:focus {\n box-shadow: ${shadow.focus};\n }\n }\n\n > div {\n width: 75%;\n position: relative;\n z-index: 2;\n\n p,\n ul {\n padding-top: calc(2 * ${spacing});\n }\n\n ul {\n padding-inline-start: calc(2 * ${spacing});\n }\n\n ${StyledButton} {\n margin-top: calc(2 * ${spacing});\n white-space: normal;\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${shadow.focus};\n }\n }\n }\n `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n function AppAnnouncement(\n props: PropsWithoutRef<AppAnnouncementProps>,\n ref: AppAnnouncementProps['ref']\n ) {\n const t = useI18n();\n const {\n heading,\n description,\n details,\n whatsNewLink,\n whatsNewText = t('app_announcement_whats_new_button_label'),\n image,\n onDismiss,\n ...restProps\n } = props;\n\n return (\n <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n {onDismiss && (\n <Button\n as={StyledDismissButton}\n variant='simple'\n icon\n onClick={onDismiss}\n aria-label={t('app_announcement_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </Button>\n )}\n <Text variant='h2'>{heading \|\| t('app_announcement_details_list_header')}</Text>\n <div>\n {description && <p>{description}</p>}\n {details && (\n <ul>\n {details.map((item, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{item}</li>;\n })}\n </ul>\n )}\n {whatsNewLink && (\n <Button variant='secondary' href={whatsNewLink} target='_blank'>\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default AppAnnouncement;\n"]}
1	+ {"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n StyledButton,\n Text,\n Icon,\n registerIcon,\n useI18n,\n defaultThemeProp,\n useDirection,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n /** Heading text for the announcement. /\n heading?: string;\n /* Description text for the announcement. /\n description?: string;\n /* Announcement details to be displayed in form of bulleted list. /\n details?: string[];\n /* Url to open with What's new link. /\n whatsNewLink?: string;\n /* Content to populate the announcement button. /\n whatsNewText?: string;\n /* An image source for the decorative background. /\n image?: string;\n /\n Whether to fit AppAnnouncement widget in the parent element.\n /\n fitToParent?: boolean;\n /* Callback when user dismisses the announcements. /\n onDismiss?: () => void;\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n font-size: 1.25rem;\n border: none;\n`;\n\nexport const StyledAppAnnouncement = styled.article<\n Pick<AppAnnouncementProps, 'image' \| 'fitToParent'>\n>(props => {\n const {\n theme: {\n base: { shadow, spacing },\n components: {\n card: { 'border-radius': borderRadius },\n announcement: { background, 'foreground-color': foregroundColor }\n }\n },\n image\n } = props;\n\n const { end } = useDirection();\n const color = calculateForegroundColor(background, foregroundColor);\n\n return css`\n padding: calc(2 ${spacing});\n background: ${background};\n border-radius: ${borderRadius};\n color: ${color};\n position: relative;\n\n ${props.fitToParent && 'block-size: 100%;'};\n\n &::after {\n background: url('${image}') no-repeat;\n background-position: ${end} bottom;\n background-size: contain;\n background-origin: content-box;\n opacity: 0.2;\n content: '';\n display: block;\n position: absolute;\n width: 50%;\n height: 100%;\n inset-inline-end: 0;\n bottom: 0;\n padding: calc(2 * ${spacing});\n }\n\n h2 {\n position: relative;\n z-index: 2;\n margin-bottom: ${spacing};\n }\n\n ${StyledDismissButton} {\n position: absolute;\n top: 0.75rem;\n inset-inline-end: 0.75rem;\n color: inherit;\n z-index: 3;\n &:enabled:hover {\n background: #ffffff19;\n }\n &:enabled:focus {\n box-shadow: ${shadow.focus};\n }\n }\n\n > div {\n width: 75%;\n position: relative;\n z-index: 2;\n\n p,\n ul {\n padding-top: calc(2 * ${spacing});\n }\n\n ul {\n padding-inline-start: calc(2 * ${spacing});\n }\n\n ${StyledButton} {\n margin-top: calc(2 * ${spacing});\n white-space: normal;\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${shadow.focus};\n }\n }\n }\n `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n function AppAnnouncement(\n props: PropsWithoutRef<AppAnnouncementProps>,\n ref: AppAnnouncementProps['ref']\n ) {\n const t = useI18n();\n const {\n heading,\n description,\n details,\n whatsNewLink,\n whatsNewText = t('app_announcement_whats_new_button_label'),\n image,\n onDismiss,\n ...restProps\n } = props;\n\n return (\n <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n {onDismiss && (\n <Button\n as={StyledDismissButton}\n variant='simple'\n icon\n onClick={onDismiss}\n aria-label={t('app_announcement_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </Button>\n )}\n <Text variant='h2'>{heading \|\| t('app_announcement_details_list_header')}</Text>\n <div>\n {description && <p>{description}</p>}\n {!!details?.length && (\n <ul>\n {details.map((item, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{item}</li>;\n })}\n </ul>\n )}\n {whatsNewLink && (\n <Button variant='secondary' href={whatsNewLink} target='_blank'>\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default AppAnnouncement;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"~~AAiBA~~,OAAO,KAAK,EAEV,+BAA+B,~~EAIhC~~,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;~~AAgCpE~~,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,~~CA2VpE~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAEV,+BAA+B,EAKhC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOpE,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CAsRpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Stakeholders/Stakeholders.js CHANGED Viewed

@@ -1,57 +1,30 @@
 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, { css } from 'styled-components';
-import { SummaryList, useI18n, Button, ViewAll, Modal, Flex, useModalManager, useOuterEvent, useAfterInitialEffect, defaultThemeProp, FormDialog } from '@pega/cosmos-react-core';
+import { forwardRef, useRef, useEffect, useState, useCallback } from 'react';
+import styled from 'styled-components';
+import { SummaryList, useI18n, Button, ViewAll, Modal, useModalManager, defaultThemeProp, getFocusables } from '@pega/cosmos-react-core';
 import StakeholderForm from './StakeholderForm';
 const StyledStakeholders = styled(SummaryList) ``;
-const StyledEditFormWrap = styled.div(({ theme }) => {
-    return css `
-    position: relative;
-    min-height: 8rem;
-    overflow-y: auto;
-    padding-block: calc(${theme.base.spacing} / 2);
-    &[aria-busy='true'] > :nth-child(2) {
-      visibility: hidden;
-    }
-  `;
-});
-StyledEditFormWrap.defaultProps = defaultThemeProp;
-const StyledContainer = styled(Flex)(({ theme }) => {
-    return css `
-    max-height: inherit;
-    > h3 {
-      padding-block-start: calc(2 * ${theme.base.spacing});
-      padding-inline: calc(2 * ${theme.base.spacing});
-    }
-  `;
-});
-StyledContainer.defaultProps = defaultThemeProp;
+StyledStakeholders.defaultProps = defaultThemeProp;
 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 dialogRef = useRef(null);
     const progressMsgRef = useRef(t('loading'));
+    const viewAllRef = useRef(null);
+    const editIDRef = useRef();
+    const [triedToReturnFocus, setTriedToReturnFocus] = useState(false);
     // 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 [dialogTarget, setDialogTarget] = 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) => {
+        return items.map(({ id, onEdit, onRemove, ...rest }) => {
             let itemActions = [];
-            const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];
             if (onEdit) {
                 itemActions = [
                     {
@@ -59,12 +32,9 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
                         text: t('edit'),
                         icon: 'pencil',
                         onClick: () => {
-                            setEditing(true);
-                            setDialogTarget({
-                                portal: elArray[i],
-                                button: elArray[i].querySelector('button[aria-haspopup="menu"]')
-                            });
+                            setMode(mode === 'viewAll' ? 'viewAllEdit' : 'edit');
                             onEdit?.();
+                            editIDRef.current = id;
                         }
                     }
                 ];
@@ -84,36 +54,47 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
             }
             return {
                 ...rest,
-                ref: (el) => {
-                    elArray[i] = el;
-                },
-                actions: itemActions
+                id,
+                actions: itemActions,
+                // Return focus to the element which initiated edit
+                actionsRef: el => {
+                    if (!el || !editIDRef.current)
+                        return;
+                    setTriedToReturnFocus(true);
+                    if (id === editIDRef.current) {
+                        el.focus();
+                        editIDRef.current = null;
+                    }
+                }
             };
         });
     };
-    const closeFormDialog = () => {
-        if (!dialogTarget || (form.loading && progressMsgRef.current === t('submitting')))
+    // Fallback focus handling for edit
+    useEffect(() => {
+        if (!triedToReturnFocus)
             return;
-        dialogTarget.button?.focus();
-        setDialogTarget(null);
-        setEditing(false);
-        progressMsgRef.current = t('loading');
-    };
+        if (editIDRef.current) {
+            getFocusables(viewAllRef)[0]?.focus();
+            editIDRef.current = null;
+        }
+        setTriedToReturnFocus(false);
+    }, [triedToReturnFocus]);
     let formContent = null;
-    if ((mode === 'add' || editing) &&
-        (!form.loading || progressMsgRef.current === t('submitting'))) {
+    if (mode === 'add' || mode === 'edit' || mode === 'viewAllEdit') {
         formContent = (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, banners: form.banners, setSelectedRoleNameRef: setSelectedRoleNameRef }));
     }
-    // Actions used for add and edit both in the modal and the dialog.
+    // Actions used for add, edit, and viewAll-editing in the modal.
     let formActions = null;
-    if ((mode === 'add' || editing) &&
-        (!form.loading || progressMsgRef.current === t('submitting'))) {
+    if (mode === 'add' || mode === 'edit' || mode === 'viewAllEdit') {
         const closeForm = () => {
-            if (mode === 'add') {
-                modalMethods.current?.dismiss();
+            if (mode === 'viewAllEdit') {
+                // Go back to the viewAll list; keep the modal open.
+                setMode('viewAll');
+                form.onAfterClose?.();
+                progressMsgRef.current = t('loading');
             }
             else {
-                closeFormDialog();
+                modalMethods.current?.dismiss();
             }
         };
         formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: form.loading, onClick: () => {
@@ -126,126 +107,100 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
                         });
                     }, children: t('submit') })] }));
     }
-    const closeForm = () => {
-        if (mode === 'add') {
-            modalMethods.current?.dismiss();
-        }
-        else {
-            closeFormDialog();
-        }
-    };
-    let editFormDialog = null;
-    if (dialogTarget?.button) {
-        editFormDialog = (_jsx(FormDialog, { ref: dialogRef, target: dialogTarget.button, heading: t('edit_stakeholder'), progress: form.loading ? progressMsgRef.current : undefined, onSubmit: {
-                disabled: form.loading,
-                handler: () => {
-                    progressMsgRef.current = t('submitting');
-                    form.onSubmit({
-                        selectedRoleName: selectedRoleNameRef.current,
-                        closeForm
-                    });
-                }
-            }, onCancel: {
-                disabled: form.loading,
-                handler: closeFormDialog
-            }, children: (!form.loading || progressMsgRef.current === t('submitting')) && (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, banners: form.banners, setSelectedRoleNameRef: setSelectedRoleNameRef })) }));
-    }
-    // Content for the modal either for adding new or viewing all.
+    // Content for the modal: add form, edit form, viewAll list, or edit form within viewAll.
     let modalContent = null;
-    if (mode === 'add')
+    if (mode === 'add' || mode === 'edit')
         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?.();
-                            }
+    if (mode === 'viewAll' || mode === 'viewAllEdit') {
+        if (mode === 'viewAllEdit') {
+            modalContent = formContent;
+        }
+        else if (!viewAll.loading) {
+            modalContent = (_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);
-                            }
+                    }
+                ], searchInputProps: viewAll.onSearch
+                    ? {
+                        value: viewAllSearchValue,
+                        onSearchChange: (value) => {
+                            setViewAllSearchValue(value);
+                            viewAll?.onSearch?.(value);
                         }
-                        : undefined }), editFormDialog] }));
+                    }
+                    : undefined, ref: viewAllRef }));
+        }
     }
     useEffect(() => {
         if (!mode) {
             modalMethods.current = undefined;
             return;
         }
+        const isEditingForm = mode === 'add' || mode === 'edit' || mode === 'viewAllEdit';
+        let heading;
+        if (mode === 'add') {
+            heading = t('add_stakeholders');
+        }
+        else if (mode === 'edit' || mode === 'viewAllEdit') {
+            heading = t('edit_stakeholder');
+        }
+        else {
+            heading = t('view_stakeholders');
+        }
         const modalProps = {
-            progress: (mode === 'add' && form.loading) || viewAll.loading
+            heading,
+            progress: (isEditingForm && form.loading) || (mode === 'viewAll' && viewAll.loading)
                 ? { message: progressMsgRef.current }
                 : undefined,
             count: mode === 'viewAll' ? count : undefined,
             children: modalContent,
-            actions: mode === 'add' ? formActions : undefined,
+            actions: isEditingForm ? formActions : undefined,
             onRequestDismiss: form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined
         };
         if (modalMethods.current) {
             modalMethods.current.update(modalProps);
         }
-        else if (mode === 'add' || mode === 'viewAll') {
+        else {
             modalMethods.current = createModal(Modal, {
                 ...modalProps,
-                heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),
                 onAfterClose: () => {
-                    if (mode === 'add') {
+                    if (mode === 'add' || mode === 'edit' || mode === 'viewAllEdit') {
                         form.onAfterClose?.();
                     }
-                    else {
+                    if (mode === 'viewAll' || mode === 'viewAllEdit') {
                         setViewAllSearchValue('');
                         viewAll.onAfterClose?.();
                     }
                     progressMsgRef.current = t('loading');
+                    modalMethods.current = undefined;
                     setMode(undefined);
                 }
             });
         }
-    }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);
-    // Using mousedown instead of click since drag selecting an input's value within the dialog, then releasing outside the dialog triggers outer click.
-    useOuterEvent('mousedown', [dialogRef], closeFormDialog);
-    const onKeydown = (e) => {
-        if (e.key === 'Escape') {
-            closeFormDialog();
-        }
-    };
-    useEffect(() => {
-        if (!dialogTarget)
-            return;
-        document.addEventListener('keydown', onKeydown);
-        return () => {
-            document.removeEventListener('keydown', onKeydown);
-        };
-    }, [dialogTarget]);
-    useAfterInitialEffect(() => {
-        if (!dialogTarget)
-            form.onAfterClose?.();
-    }, [dialogTarget]);
-    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?.();
+    }, [mode, form.loading, count, viewAll.loading, modalContent, formActions]);
+    return (_jsx(StyledStakeholders, { ...restProps, ref: ref, icon: 'person', name: t('view_stakeholders'), headingTag: 'h3', loading: loading, count: count, error: error, items: mergeItemActions(itemsProp.slice(0, 3)), actions: onAddNew
+            ? [
+                {
+                    text: t('add'),
+                    id: 'add_new',
+                    icon: 'plus',
+                    onClick() {
+                        setMode('add');
+                        onAddNew?.();
                     }
-                    : undefined }), editFormDialog && mode !== 'viewAll' ? editFormDialog : null] }));
+                }
+            ]
+            : undefined, onViewAll: onViewAll && count && count > 3
+            ? () => {
+                setMode('viewAll');
+                onViewAll?.();
+            }
+            : undefined }));
 });
 export default Stakeholders;
 //# sourceMappingURL=Stakeholders.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useMemo, useState, useCallback } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n SummaryList,\n useI18n,\n Button,\n ViewAll,\n Modal,\n Flex,\n useModalManager,\n useOuterEvent,\n useAfterInitialEffect,\n defaultThemeProp,\n FormDialog\n} from '@pega/cosmos-react-core';\nimport type {\n Action,\n ForwardRefForwardPropsComponent,\n ModalMethods,\n ModalProps,\n OmitStrict\n} 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(({ theme }) => {\n return css`\n position: relative;\n min-height: 8rem;\n overflow-y: auto;\n padding-block: calc(${theme.base.spacing} / 2);\n\n &[aria-busy='true'] > :nth-child(2) {\n visibility: hidden;\n }\n `;\n});\n\nStyledEditFormWrap.defaultProps = defaultThemeProp;\n\nconst StyledContainer = styled(Flex)(({ theme }) => {\n return css`\n max-height: inherit;\n > h3 {\n padding-block-start: calc(2 * ${theme.base.spacing});\n padding-inline: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nconst Stakeholders: ForwardRefForwardPropsComponent<StakeholdersProps> = 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 dialogRef = 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 [dialogTarget, setDialogTarget] = 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 setDialogTarget({\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 closeFormDialog = () => {\n if (!dialogTarget \|\| (form.loading && progressMsgRef.current === t('submitting'))) return;\n dialogTarget.button?.focus();\n setDialogTarget(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 banners={form.banners}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n );\n }\n\n // Actions used for add and edit both in the modal and the dialog.\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 closeFormDialog();\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 const closeForm = () => {\n if (mode === 'add') {\n modalMethods.current?.dismiss();\n } else {\n closeFormDialog();\n }\n };\n\n let editFormDialog: ReactNode = null;\n if (dialogTarget?.button) {\n editFormDialog = (\n <FormDialog\n ref={dialogRef}\n target={dialogTarget.button as HTMLElement}\n heading={t('edit_stakeholder')}\n progress={form.loading ? progressMsgRef.current : undefined}\n onSubmit={{\n disabled: form.loading,\n handler: () => {\n progressMsgRef.current = t('submitting');\n form.onSubmit({\n selectedRoleName: selectedRoleNameRef.current,\n closeForm\n });\n }\n }}\n onCancel={{\n disabled: form.loading,\n handler: closeFormDialog\n }}\n >\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 banners={form.banners}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n )}\n </FormDialog>\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 dialog triggered from a modal must be rendered within modal content to render in correct DOM position. /}\n {editFormDialog}\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 dialog, then releasing outside the dialog triggers outer click.\n useOuterEvent('mousedown', [dialogRef], closeFormDialog);\n\n const onKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closeFormDialog();\n }\n };\n\n useEffect(() => {\n if (!dialogTarget) return;\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [dialogTarget]);\n\n useAfterInitialEffect(() => {\n if (!dialogTarget) form.onAfterClose?.();\n }, [dialogTarget]);\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 {editFormDialog && mode !== 'viewAll' ? editFormDialog : null}\n </>\n );\n }\n);\n\nexport default Stakeholders;\n"]}
1	+ {"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useState, useCallback } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n SummaryList,\n useI18n,\n Button,\n ViewAll,\n Modal,\n useModalManager,\n defaultThemeProp,\n getFocusables\n} from '@pega/cosmos-react-core';\nimport type {\n Action,\n ForwardRefForwardPropsComponent,\n ModalMethods,\n ModalProps,\n OmitStrict,\n SummaryListProps\n} from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nStyledStakeholders.defaultProps = defaultThemeProp;\n\nconst Stakeholders: ForwardRefForwardPropsComponent<StakeholdersProps> = 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' \| 'edit' \| 'viewAllEdit'>();\n const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n const progressMsgRef = useRef(t('loading'));\n const viewAllRef = useRef<HTMLDivElement>(null);\n const editIDRef = useRef<string \| null>();\n const [triedToReturnFocus, setTriedToReturnFocus] = useState(false);\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 // 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 ): SummaryListProps['items'] => {\n return items.map(({ id, onEdit, onRemove, ...rest }) => {\n let itemActions: Action[] = [];\n\n if (onEdit) {\n itemActions = [\n {\n id: 'edit',\n text: t('edit'),\n icon: 'pencil',\n onClick: () => {\n setMode(mode === 'viewAll' ? 'viewAllEdit' : 'edit');\n onEdit?.();\n editIDRef.current = id;\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 id,\n actions: itemActions,\n // Return focus to the element which initiated edit\n actionsRef: el => {\n if (!el \|\| !editIDRef.current) return;\n setTriedToReturnFocus(true);\n if (id === editIDRef.current) {\n el.focus();\n editIDRef.current = null;\n }\n }\n };\n });\n };\n\n // Fallback focus handling for edit\n useEffect(() => {\n if (!triedToReturnFocus) return;\n if (editIDRef.current) {\n getFocusables(viewAllRef)[0]?.focus();\n editIDRef.current = null;\n }\n setTriedToReturnFocus(false);\n }, [triedToReturnFocus]);\n\n let formContent: ReactNode = null;\n if (mode === 'add' \|\| mode === 'edit' \|\| mode === 'viewAllEdit') {\n formContent = (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n rendererProps={form.rendererProps}\n banners={form.banners}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n );\n }\n\n // Actions used for add, edit, and viewAll-editing in the modal.\n let formActions: ReactNode = null;\n if (mode === 'add' \|\| mode === 'edit' \|\| mode === 'viewAllEdit') {\n const closeForm = () => {\n if (mode === 'viewAllEdit') {\n // Go back to the viewAll list; keep the modal open.\n setMode('viewAll');\n form.onAfterClose?.();\n progressMsgRef.current = t('loading');\n } else {\n modalMethods.current?.dismiss();\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: add form, edit form, viewAll list, or edit form within viewAll.\n let modalContent: ReactNode = null;\n if (mode === 'add' \|\| mode === 'edit') modalContent = formContent;\n\n if (mode === 'viewAll' \|\| mode === 'viewAllEdit') {\n if (mode === 'viewAllEdit') {\n modalContent = formContent;\n } else if (!viewAll.loading) {\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 value: viewAllSearchValue,\n onSearchChange: (value: string) => {\n setViewAllSearchValue(value);\n viewAll?.onSearch?.(value);\n }\n }\n : undefined\n }\n ref={viewAllRef}\n />\n );\n }\n }\n\n useEffect(() => {\n if (!mode) {\n modalMethods.current = undefined;\n return;\n }\n\n const isEditingForm = mode === 'add' \|\| mode === 'edit' \|\| mode === 'viewAllEdit';\n\n let heading: string;\n if (mode === 'add') {\n heading = t('add_stakeholders');\n } else if (mode === 'edit' \|\| mode === 'viewAllEdit') {\n heading = t('edit_stakeholder');\n } else {\n heading = t('view_stakeholders');\n }\n\n const modalProps: OmitStrict<ModalProps, 'onAfterClose'> = {\n heading,\n progress:\n (isEditingForm && form.loading) \|\| (mode === 'viewAll' && viewAll.loading)\n ? { message: progressMsgRef.current }\n : undefined,\n count: mode === 'viewAll' ? count : undefined,\n children: modalContent,\n actions: isEditingForm ? 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 {\n modalMethods.current = createModal(Modal, {\n ...modalProps,\n onAfterClose: () => {\n if (mode === 'add' \|\| mode === 'edit' \|\| mode === 'viewAllEdit') {\n form.onAfterClose?.();\n }\n if (mode === 'viewAll' \|\| mode === 'viewAllEdit') {\n setViewAllSearchValue('');\n viewAll.onAfterClose?.();\n }\n\n progressMsgRef.current = t('loading');\n modalMethods.current = undefined;\n setMode(undefined);\n }\n });\n }\n }, [mode, form.loading, count, viewAll.loading, modalContent, formActions]);\n\n return (\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={mergeItemActions(itemsProp.slice(0, 3))}\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 );\n }\n);\n\nexport default Stakeholders;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "8.16.1",
+  "version": "8.17.1",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "8.16.1",
-    "@pega/cosmos-react-rte": "8.16.1",
+    "@pega/cosmos-react-core": "8.17.1",
+    "@pega/cosmos-react-rte": "8.17.1",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "@types/styled-components": "^5.1.26",