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

package/lib/components/Stages/StageGlimpse.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Icon, Actions, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';
+import { Icon, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';
 import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
-import { StyledDateTimeDisplay, StyledStep, StyledStepsContainer, StyledStageGlimpse } from './Stages.styles';
+import { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stages.styles';
 registerIcon(checkIcon);
-const StageGlimpse = ({ stage, actions }) => {
+const StageGlimpse = ({ stage }) => {
     const t = useI18n();
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledStageGlimpse, container: { justify: 'between', alignItems: 'start' }, children: [_jsxs("div", { children: [_jsx(Text, { variant: 'h2', children: stage.name }), stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') }))] }), actions && actions.length > 0 && _jsx(Actions, { items: actions, iconOnly: true })] }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (_jsxs(Flex, { as: StyledStep, container: { gap: 0.5 }, completed: completed, children: [completed ? (_jsx(Icon, { name: 'check' })) : (_jsx(StyledIcon, { as: 'span', role: 'presentation', "aria-hidden": 'true', children: "\u2022" })), _jsx("div", { children: name })] }, id))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { children: stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') })) }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (_jsxs(Flex, { as: StyledStep, container: { gap: 0.5 }, completed: completed, children: [completed ? (_jsx(Icon, { name: 'check' })) : (_jsx(StyledIcon, { as: 'span', role: 'presentation', "aria-hidden": 'true', children: "\u2022" })), _jsx("div", { children: name })] }, id))) }))] }));
 };
 export default StageGlimpse;
 //# sourceMappingURL=StageGlimpse.js.map

package/lib/components/Stages/StageGlimpse.js.map

@@ -1 +1 @@
-{"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EAEJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EACL,qBAAqB,EACrB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,CAAC,SAAS,CAAC,CAAC;AAOxB,MAAM,YAAY,GAAyC,CAAC,EAC1D,KAAK,EACL,OAAO,EACW,EAAE,EAAE;IACtB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,aAClF,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,CAAC,IAAI,GAAQ,EACrC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,GAAG,CAC/E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CACpD,IACG,EACL,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,SAAG,IACjE,EACN,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,oBAAoB,cAClB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAW,SAAS,EAAE,SAAS,aACzE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,uBAE/C,CACd,EACD,wBAAM,IAAI,GAAO,KARiC,EAAE,CAS/C,CACR,CAAC,GACmB,CACxB,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n  Icon,\n  Action,\n  Actions,\n  Flex,\n  registerIcon,\n  Text,\n  useI18n,\n  StyledIcon\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StageProps } from './Stages.types';\nimport {\n  StyledDateTimeDisplay,\n  StyledStep,\n  StyledStepsContainer,\n  StyledStageGlimpse\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StageGlimpseProps {\n  stage: StageProps;\n  actions?: Action[];\n}\n\nconst StageGlimpse: FunctionComponent<StageGlimpseProps> = ({\n  stage,\n  actions\n}: StageGlimpseProps) => {\n  const t = useI18n();\n  return (\n    <>\n      <Flex as={StyledStageGlimpse} container={{ justify: 'between', alignItems: 'start' }}>\n        <div>\n          <Text variant='h2'>{stage.name}</Text>\n          {stage.date ? (\n            <StyledDateTimeDisplay value={stage.date} variant='relative' format='short' />\n          ) : (\n            <Text variant='secondary'>{t('not_started')}</Text>\n          )}\n        </div>\n        {actions && actions.length > 0 && <Actions items={actions} iconOnly />}\n      </Flex>\n      {stage.steps && (\n        <StyledStepsContainer>\n          {stage.steps.map(({ id, name, completed }) => (\n            <Flex as={StyledStep} container={{ gap: 0.5 }} key={id} completed={completed}>\n              {completed ? (\n                <Icon name='check' />\n              ) : (\n                <StyledIcon as='span' role='presentation' aria-hidden='true'>\n                  •\n                </StyledIcon>\n              )}\n              <div>{name}</div>\n            </Flex>\n          ))}\n        </StyledStepsContainer>\n      )}\n    </>\n  );\n};\n\nexport default StageGlimpse;\n"]}
+{"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC9F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,YAAY,GAAyC,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,wBACG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,GAAG,CAC/E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CACpD,GACG,EACL,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,oBAAoB,cAClB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAW,SAAS,EAAE,SAAS,aACzE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,uBAE/C,CACd,EACD,wBAAM,IAAI,GAAO,KARiC,EAAE,CAS/C,CACR,CAAC,GACmB,CACxB,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport { Icon, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StageProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StageGlimpseProps {\n  stage: StageProps;\n}\n\nconst StageGlimpse: FunctionComponent<StageGlimpseProps> = ({ stage }: StageGlimpseProps) => {\n  const t = useI18n();\n  return (\n    <>\n      <div>\n        {stage.date ? (\n          <StyledDateTimeDisplay value={stage.date} variant='relative' format='short' />\n        ) : (\n          <Text variant='secondary'>{t('not_started')}</Text>\n        )}\n      </div>\n      {stage.steps && (\n        <StyledStepsContainer>\n          {stage.steps.map(({ id, name, completed }) => (\n            <Flex as={StyledStep} container={{ gap: 0.5 }} key={id} completed={completed}>\n              {completed ? (\n                <Icon name='check' />\n              ) : (\n                <StyledIcon as='span' role='presentation' aria-hidden='true'>\n                  •\n                </StyledIcon>\n              )}\n              <div>{name}</div>\n            </Flex>\n          ))}\n        </StyledStepsContainer>\n      )}\n    </>\n  );\n};\n\nexport default StageGlimpse;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAiBb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAYlD,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiMzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA0KzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Stages/Stages.js

@@ -1,64 +1,57 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';
 import { remToPx } from 'polished';
-import { Icon, registerIcon, Flex, useElement, useOuterEvent, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useTheme, useEscape, useConsolidatedRef, CardFooter, Card, useUID, Progress } from '@pega/cosmos-react-core';
+import { Icon, Text, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
-import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import StageGlimpse from './StageGlimpse';
-import { StyledInnerStage, StyledPopoverContent, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';
-registerIcon(checkIcon, timesIcon);
+import { StyledInnerStage, StyledStage, StyledStageGlimpse, StyledStages } from './Stages.styles';
+registerIcon(checkIcon);
 const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restProps }, ref) => {
     const t = useI18n();
     const stagesRef = useConsolidatedRef(ref);
-    const currentStageRef = useRef(null);
-    const [focusedStageIndex, setFocusedStageIndex] = useState(undefined);
-    const focusedStageRef = useRef(null);
+    const stagesRefs = useRef([]);
+    const [target, setTarget] = useState(null);
     const { create: createModal } = useModalManager();
     const modalMethods = useRef();
-    const [popoverEl, setPopoverRef] = useElement();
-    const [showPopover, setShowPopover] = useState(false);
+    const [showModal, setShowModal] = useState(false);
     const isSmallOrAbove = useBreakpoint('sm');
     const [compressedView, setCompressedView] = useState(false);
     const [minExpandedWidth, setMinExpandedWidth] = useState(0);
-    const { base: { spacing: themeSpacing } } = useTheme();
-    const popoverId = useUID();
+    useArrows(stagesRef, { selector: ':scope > button:not([aria-expanded])', dir: 'left-right' });
+    const dialogId = useUID();
     useEffect(() => {
-        if (stagesRef.current && currentStageRef.current) {
+        if (stagesRef.current) {
             if (compressedView) {
                 const resizeObserver = new ResizeObserver(debounce((entries) => {
-                    if (entries[0].contentRect.width > minExpandedWidth)
+                    if (entries[0].contentRect.width > minExpandedWidth) {
                         setCompressedView(false);
+                    }
                 }, 100));
                 resizeObserver.observe(stagesRef.current);
                 return () => resizeObserver.disconnect();
             }
             const intersectionObserver = new IntersectionObserver(entries => {
-                if (entries[0].intersectionRatio < 1) {
-                    if (stagesRef.current)
-                        setMinExpandedWidth(Math.max(minExpandedWidth, stagesRef.current.offsetWidth + 1));
+                if (!entries[0].isIntersecting) {
                     setCompressedView(true);
+                    if (entries[0].rootBounds)
+                        setMinExpandedWidth(entries[0].rootBounds.width);
                 }
             }, {
-                root: currentStageRef.current,
-                rootMargin: `0px -${remToPx(themeSpacing)}`,
+                root: stagesRef.current,
+                rootMargin: remToPx(0.0625),
                 threshold: 1
             });
-            intersectionObserver.observe(currentStageRef.current.children[0]);
-            return () => intersectionObserver.disconnect();
+            if (stagesRef.current.lastElementChild) {
+                intersectionObserver.observe(stagesRef.current.lastElementChild);
+                return () => intersectionObserver.disconnect();
+            }
         }
-    }, [themeSpacing, minExpandedWidth, compressedView]);
-    useOuterEvent('mousedown', [popoverEl, focusedStageRef], () => {
-        setShowPopover(false);
-    });
-    useEscape(() => {
-        setShowPopover(false);
-        focusedStageRef.current?.focus();
-    }, stagesRef);
+    }, [minExpandedWidth, compressedView, stages.length]);
     const stagesToLoad = onLoadStage
         ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)
         : [];
     const openModal = () => {
-        setShowPopover(false);
+        setShowModal(true);
         if (stagesToLoad.length > 0)
             onLoadStage?.(stagesToLoad);
         modalMethods.current = createModal(Modal, {
@@ -66,17 +59,19 @@ const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restPro
                 ? t('stages_case_lifecycle', [caseTitle])
                 : t('stages_default_case_lifecycle'),
             progress: stagesToLoad.length > 0,
-            children: stages.map(stage => _jsx(StageGlimpse, { stage: stage }, stage.id)),
-            onAfterClose: () => {
-                focusedStageRef.current?.focus();
+            children: stages.map(stage => (_jsxs(Fragment, { children: [_jsx(Text, { variant: 'h2', children: stage.name }), _jsx(StageGlimpse, { stage: stage })] }, stage.id))),
+            onBeforeClose: () => {
+                setShowModal(false);
+                target?.focus();
+                setTarget(null);
                 modalMethods.current = undefined;
             }
         });
     };
-    useEffect(() => {
+    useAfterInitialEffect(() => {
         modalMethods.current?.update({
             progress: stagesToLoad.length > 0,
-            children: stages.map(stage => _jsx(StageGlimpse, { stage: stage }, stage.id))
+            children: stages.map(stage => (_jsxs(Fragment, { children: [_jsx(Text, { variant: 'h2', children: stage.name }), _jsx(StageGlimpse, { stage: stage })] }, stage.id)))
         });
     }, [stagesToLoad.length]);
     return (_jsx(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, role: 'region', "aria-label": t('stages_label'), children: stages.map((stage, index) => {
@@ -85,37 +80,23 @@ const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restPro
             if (isCurrent)
                 stageStatusText = t('current');
             const hasToLoad = stagesToLoad.includes(stage.id);
-            return (_jsxs(Fragment, { children: [_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: compressedView && !isCurrent ? 0 : 1, shrink: 1 }, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), ref: isCurrent ? currentStageRef : undefined, onClick: () => {
+            return (_jsxs(Fragment, { children: [_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: {
+                            grow: compressedView && !isCurrent ? 0 : 1,
+                            shrink: compressedView && isCurrent ? 1 : 0
+                        }, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), onClick: (e) => {
                             if (isSmallOrAbove) {
                                 if (hasToLoad)
                                     onLoadStage?.([stage.id]);
-                                setShowPopover(prevShowPopover => !prevShowPopover);
+                                setTarget(e.currentTarget);
                             }
                             else {
                                 openModal();
                             }
-                        }, onFocus: (e) => {
-                            setShowPopover(false);
-                            setFocusedStageIndex(index);
-                            focusedStageRef.current = e.currentTarget;
-                        }, "aria-expanded": showPopover && isSmallOrAbove, "aria-controls": showPopover ? popoverId : undefined, children: [stage.completed && _jsx(Icon, { name: 'check' }), !(stage.completed && compressedView) && (_jsx(StyledInnerStage, { ellipsis: isCurrent && compressedView, children: !isCurrent && compressedView ? index + 1 : stage.name }))] }), focusedStageIndex === index && showPopover && isSmallOrAbove && (_jsx(StyledStagePopover, { target: focusedStageRef.current, ref: setPopoverRef, arrow: true, placement: 'bottom-start', modifiers: [
-                            {
-                                name: 'flip',
-                                options: {
-                                    fallbackPlacements: ['bottom-end', 'right', 'left']
-                                }
-                            }
-                        ], id: popoverId, "aria-busy": hasToLoad, children: _jsxs(Card, { children: [_jsx(StyledPopoverContent, { children: !hasToLoad ? (_jsx(StageGlimpse, { stage: stage, actions: [
-                                            {
-                                                id: 'close',
-                                                text: t('close'),
-                                                icon: 'times',
-                                                onClick: () => {
-                                                    setShowPopover(false);
-                                                    focusedStageRef.current?.focus();
-                                                }
-                                            }
-                                        ] })) : (_jsx(Progress, { placement: 'local', message: t('loading') })) }), _jsx(CardFooter, { children: _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') }) })] }) }))] }, stage.id));
+                        }, ref: (el) => {
+                            stagesRefs.current[index] = el;
+                        }, "aria-expanded": target && isSmallOrAbove, "aria-controls": target ? dialogId : undefined, children: [stage.completed && _jsx(Icon, { name: 'check' }), (!compressedView || isCurrent || !stage.completed) && (_jsx(StyledInnerStage, { ellipsis: isCurrent && compressedView, children: !isCurrent && compressedView ? index + 1 : stage.name }))] }), target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
+                            setTarget(null);
+                        }, placement: 'bottom-start', children: !hasToLoad && (_jsxs(StyledStageGlimpse, { children: [_jsx(StageGlimpse, { stage: stage }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') })] })) }))] }, stage.id));
         }) }));
 });
 export default Stages;

package/lib/components/Stages/Stages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  useState,\n  useRef,\n  useEffect,\n  forwardRef,\n  FocusEvent,\n  PropsWithoutRef,\n  Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  registerIcon,\n  Flex,\n  ForwardProps,\n  useElement,\n  useOuterEvent,\n  useI18n,\n  Button,\n  Modal,\n  useBreakpoint,\n  debounce,\n  useModalManager,\n  useTheme,\n  useEscape,\n  useConsolidatedRef,\n  CardFooter,\n  Card,\n  useUID,\n  Progress,\n  ModalMethods\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n  StyledInnerStage,\n  StyledPopoverContent,\n  StyledStage,\n  StyledStagePopover,\n  StyledStages\n} from './Stages.styles';\n\nregisterIcon(checkIcon, timesIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(\n  (\n    { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n    ref: StagesProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const stagesRef = useConsolidatedRef(ref);\n    const currentStageRef = useRef<HTMLButtonElement>(null);\n    const [focusedStageIndex, setFocusedStageIndex] = useState<number | undefined>(undefined);\n    const focusedStageRef = useRef<HTMLButtonElement | null>(null);\n\n    const { create: createModal } = useModalManager();\n    const modalMethods = useRef<ModalMethods>();\n    const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n    const [showPopover, setShowPopover] = useState(false);\n\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [compressedView, setCompressedView] = useState(false);\n    const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n    const {\n      base: { spacing: themeSpacing }\n    } = useTheme();\n\n    const popoverId = useUID();\n\n    useEffect(() => {\n      if (stagesRef.current && currentStageRef.current) {\n        if (compressedView) {\n          const resizeObserver = new ResizeObserver(\n            debounce((entries: ResizeObserverEntry[]) => {\n              if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n            }, 100)\n          );\n          resizeObserver.observe(stagesRef.current);\n          return () => resizeObserver.disconnect();\n        }\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (entries[0].intersectionRatio < 1) {\n              if (stagesRef.current)\n                setMinExpandedWidth(Math.max(minExpandedWidth, stagesRef.current.offsetWidth + 1));\n              setCompressedView(true);\n            }\n          },\n          {\n            root: currentStageRef.current,\n            rootMargin: `0px -${remToPx(themeSpacing)}`,\n            threshold: 1\n          }\n        );\n\n        intersectionObserver.observe(currentStageRef.current.children[0]);\n\n        return () => intersectionObserver.disconnect();\n      }\n    }, [themeSpacing, minExpandedWidth, compressedView]);\n\n    useOuterEvent('mousedown', [popoverEl, focusedStageRef], () => {\n      setShowPopover(false);\n    });\n\n    useEscape(() => {\n      setShowPopover(false);\n      focusedStageRef.current?.focus();\n    }, stagesRef);\n\n    const stagesToLoad = onLoadStage\n      ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n      : [];\n\n    const openModal = () => {\n      setShowPopover(false);\n      if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n      modalMethods.current = createModal(Modal, {\n        heading: caseTitle\n          ? t('stages_case_lifecycle', [caseTitle])\n          : t('stages_default_case_lifecycle'),\n        progress: stagesToLoad.length > 0,\n        children: stages.map(stage => <StageGlimpse stage={stage} key={stage.id} />),\n        onAfterClose: () => {\n          focusedStageRef.current?.focus();\n          modalMethods.current = undefined;\n        }\n      });\n    };\n\n    useEffect(() => {\n      modalMethods.current?.update({\n        progress: stagesToLoad.length > 0,\n        children: stages.map(stage => <StageGlimpse stage={stage} key={stage.id} />)\n      });\n    }, [stagesToLoad.length]);\n\n    return (\n      <Flex\n        {...restProps}\n        container\n        as={StyledStages}\n        ref={stagesRef}\n        role='region'\n        aria-label={t('stages_label')}\n      >\n        {stages.map((stage, index) => {\n          const isCurrent = stage.id === current;\n          let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n          if (isCurrent) stageStatusText = t('current');\n          const hasToLoad = stagesToLoad.includes(stage.id);\n          return (\n            <Fragment key={stage.id}>\n              <Flex\n                container={{ justify: 'center', alignItems: 'center' }}\n                as={StyledStage}\n                item={{ grow: compressedView && !isCurrent ? 0 : 1, shrink: 1 }}\n                aria-current={isCurrent ? 'step' : undefined}\n                aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n                ref={isCurrent ? currentStageRef : undefined}\n                onClick={() => {\n                  if (isSmallOrAbove) {\n                    if (hasToLoad) onLoadStage?.([stage.id]);\n                    setShowPopover(prevShowPopover => !prevShowPopover);\n                  } else {\n                    openModal();\n                  }\n                }}\n                onFocus={(e: FocusEvent) => {\n                  setShowPopover(false);\n                  setFocusedStageIndex(index);\n                  focusedStageRef.current = e.currentTarget as HTMLButtonElement;\n                }}\n                aria-expanded={showPopover && isSmallOrAbove}\n                aria-controls={showPopover ? popoverId : undefined}\n              >\n                {stage.completed && <Icon name='check' />}\n                {!(stage.completed && compressedView) && (\n                  <StyledInnerStage ellipsis={isCurrent && compressedView}>\n                    {!isCurrent && compressedView ? index + 1 : stage.name}\n                  </StyledInnerStage>\n                )}\n              </Flex>\n              {focusedStageIndex === index && showPopover && isSmallOrAbove && (\n                <StyledStagePopover\n                  target={focusedStageRef.current}\n                  ref={setPopoverRef}\n                  arrow\n                  placement='bottom-start'\n                  modifiers={[\n                    {\n                      name: 'flip',\n                      options: {\n                        fallbackPlacements: ['bottom-end', 'right', 'left']\n                      }\n                    }\n                  ]}\n                  id={popoverId}\n                  aria-busy={hasToLoad}\n                >\n                  <Card>\n                    <StyledPopoverContent>\n                      {!hasToLoad ? (\n                        <StageGlimpse\n                          stage={stage}\n                          actions={[\n                            {\n                              id: 'close',\n                              text: t('close'),\n                              icon: 'times',\n                              onClick: () => {\n                                setShowPopover(false);\n                                focusedStageRef.current?.focus();\n                              }\n                            }\n                          ]}\n                        />\n                      ) : (\n                        <Progress placement='local' message={t('loading')} />\n                      )}\n                    </StyledPopoverContent>\n                    <CardFooter>\n                      <Button variant='secondary' onClick={openModal}>\n                        {t('stages_see_full_lifecycle')}\n                      </Button>\n                    </CardFooter>\n                  </Card>\n                </StyledStagePopover>\n              )}\n            </Fragment>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Stages;\n"]}
+{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EAGV,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EAEJ,OAAO,EACP,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,MAAM,EAEN,UAAU,EACV,SAAS,EACT,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElG,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,MAAM,GAAkD,UAAU,CACtE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,SAAS,EAAgC,EACvF,GAAuB,EACvB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,MAAM,CAAsB,EAAE,CAAC,CAAC;IAEnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IAErE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,EAAgB,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5D,SAAS,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,sCAAsC,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;IAE9F,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,IAAI,cAAc,EAAE;gBAClB,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CAAC,CAAC,OAA8B,EAAE,EAAE;oBAC1C,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,gBAAgB,EAAE;wBACnD,iBAAiB,CAAC,KAAK,CAAC,CAAC;qBAC1B;gBACH,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;gBACF,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1C,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;aAC1C;YAED,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO,CAAC,EAAE;gBACR,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;oBAC9B,iBAAiB,CAAC,IAAI,CAAC,CAAC;oBACxB,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU;wBAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;iBAC7E;YACH,CAAC,EACD;gBACE,IAAI,EAAE,SAAS,CAAC,OAAO;gBACvB,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC;gBAC3B,SAAS,EAAE,CAAC;aACb,CACF,CAAC;YAEF,IAAI,SAAS,CAAC,OAAO,CAAC,gBAAgB,EAAE;gBACtC,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;gBACjE,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,UAAU,EAAE,CAAC;aAChD;SACF;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,WAAW;QAC9B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5E,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC;YAAE,WAAW,EAAE,CAAC,YAAY,CAAC,CAAC;QACzD,YAAY,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,EAAE;YACxC,OAAO,EAAE,SAAS;gBAChB,CAAC,CAAC,CAAC,CAAC,uBAAuB,EAAE,CAAC,SAAS,CAAC,CAAC;gBACzC,CAAC,CAAC,CAAC,CAAC,+BAA+B,CAAC;YACtC,QAAQ,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC;YACjC,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAC5B,MAAC,QAAQ,eACP,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,CAAC,IAAI,GAAQ,EACtC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,KAFjB,KAAK,CAAC,EAAE,CAGZ,CACZ,CAAC;YACF,aAAa,EAAE,GAAG,EAAE;gBAClB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,MAAM,EAAE,KAAK,EAAE,CAAC;gBAChB,SAAS,CAAC,IAAI,CAAC,CAAC;gBAChB,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;YACnC,CAAC;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,qBAAqB,CAAC,GAAG,EAAE;QACzB,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;YAC3B,QAAQ,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC;YACjC,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAC5B,MAAC,QAAQ,eACP,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,CAAC,IAAI,GAAQ,EACtC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,KAFjB,KAAK,CAAC,EAAE,CAGZ,CACZ,CAAC;SACH,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,KAAC,IAAI,OACC,SAAS,EACb,SAAS,QACT,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,gBACD,CAAC,CAAC,cAAc,CAAC,YAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC3B,MAAM,SAAS,GAAG,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC;YACvC,IAAI,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;YACvE,IAAI,SAAS;gBAAE,eAAe,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;YAC9C,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAClD,OAAO,CACL,MAAC,QAAQ,eACP,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,WAAW,EACf,IAAI,EAAE;4BACJ,IAAI,EAAE,cAAc,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;4BAC1C,MAAM,EAAE,cAAc,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;yBAC5C,kBACa,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBAChC,CAAC,CAAC,oBAAoB,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,EAClE,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,IAAI,cAAc,EAAE;gCAClB,IAAI,SAAS;oCAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;gCACzC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;6BAC5B;iCAAM;gCACL,SAAS,EAAE,CAAC;6BACb;wBACH,CAAC,EACD,GAAG,EAAE,CAAC,EAAqB,EAAE,EAAE;4BAC7B,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;wBACjC,CAAC,mBACc,MAAM,IAAI,cAAc,mBACxB,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,aAE3C,KAAK,CAAC,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,EACxC,CAAC,CAAC,cAAc,IAAI,SAAS,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CACrD,KAAC,gBAAgB,IAAC,QAAQ,EAAE,SAAS,IAAI,cAAc,YACpD,CAAC,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,GACrC,CACpB,IACI,EACN,MAAM,IAAI,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,MAAM,IAAI,cAAc,IAAI,CAAC,SAAS,IAAI,CACjF,KAAC,UAAU,IACT,OAAO,EAAE,KAAK,CAAC,IAAI,EACnB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAC9C,SAAS,EAAE,GAAG,EAAE;4BACd,SAAS,CAAC,IAAI,CAAC,CAAC;wBAClB,CAAC,EACD,SAAS,EAAC,cAAc,YAEvB,CAAC,SAAS,IAAI,CACb,MAAC,kBAAkB,eACjB,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,EAC9B,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,SAAS,YAC3C,CAAC,CAAC,2BAA2B,CAAC,GACxB,IACU,CACtB,GACU,CACd,KAlDY,KAAK,CAAC,EAAE,CAmDZ,CACZ,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  useState,\n  useRef,\n  useEffect,\n  forwardRef,\n  MouseEvent,\n  PropsWithoutRef,\n  Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  Text,\n  registerIcon,\n  Flex,\n  ForwardProps,\n  useI18n,\n  Button,\n  Modal,\n  useBreakpoint,\n  debounce,\n  useModalManager,\n  useConsolidatedRef,\n  useUID,\n  ModalMethods,\n  InfoDialog,\n  useArrows,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport { StyledInnerStage, StyledStage, StyledStageGlimpse, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(\n  (\n    { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n    ref: StagesProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const stagesRef = useConsolidatedRef(ref);\n    const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n    const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n\n    const { create: createModal } = useModalManager();\n    const modalMethods = useRef<ModalMethods>();\n    const [showModal, setShowModal] = useState(false);\n\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [compressedView, setCompressedView] = useState(false);\n    const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n    useArrows(stagesRef, { selector: ':scope > button:not([aria-expanded])', dir: 'left-right' });\n\n    const dialogId = useUID();\n\n    useEffect(() => {\n      if (stagesRef.current) {\n        if (compressedView) {\n          const resizeObserver = new ResizeObserver(\n            debounce((entries: ResizeObserverEntry[]) => {\n              if (entries[0].contentRect.width > minExpandedWidth) {\n                setCompressedView(false);\n              }\n            }, 100)\n          );\n          resizeObserver.observe(stagesRef.current);\n          return () => resizeObserver.disconnect();\n        }\n\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (!entries[0].isIntersecting) {\n              setCompressedView(true);\n              if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n            }\n          },\n          {\n            root: stagesRef.current,\n            rootMargin: remToPx(0.0625),\n            threshold: 1\n          }\n        );\n\n        if (stagesRef.current.lastElementChild) {\n          intersectionObserver.observe(stagesRef.current.lastElementChild);\n          return () => intersectionObserver.disconnect();\n        }\n      }\n    }, [minExpandedWidth, compressedView, stages.length]);\n\n    const stagesToLoad = onLoadStage\n      ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n      : [];\n\n    const openModal = () => {\n      setShowModal(true);\n      if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n      modalMethods.current = createModal(Modal, {\n        heading: caseTitle\n          ? t('stages_case_lifecycle', [caseTitle])\n          : t('stages_default_case_lifecycle'),\n        progress: stagesToLoad.length > 0,\n        children: stages.map(stage => (\n          <Fragment key={stage.id}>\n            <Text variant='h2'>{stage.name}</Text>\n            <StageGlimpse stage={stage} />\n          </Fragment>\n        )),\n        onBeforeClose: () => {\n          setShowModal(false);\n          target?.focus();\n          setTarget(null);\n          modalMethods.current = undefined;\n        }\n      });\n    };\n\n    useAfterInitialEffect(() => {\n      modalMethods.current?.update({\n        progress: stagesToLoad.length > 0,\n        children: stages.map(stage => (\n          <Fragment key={stage.id}>\n            <Text variant='h2'>{stage.name}</Text>\n            <StageGlimpse stage={stage} />\n          </Fragment>\n        ))\n      });\n    }, [stagesToLoad.length]);\n\n    return (\n      <Flex\n        {...restProps}\n        container\n        as={StyledStages}\n        ref={stagesRef}\n        role='region'\n        aria-label={t('stages_label')}\n      >\n        {stages.map((stage, index) => {\n          const isCurrent = stage.id === current;\n          let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n          if (isCurrent) stageStatusText = t('current');\n          const hasToLoad = stagesToLoad.includes(stage.id);\n          return (\n            <Fragment key={stage.id}>\n              <Flex\n                container={{ justify: 'center', alignItems: 'center' }}\n                as={StyledStage}\n                item={{\n                  grow: compressedView && !isCurrent ? 0 : 1,\n                  shrink: compressedView && isCurrent ? 1 : 0\n                }}\n                aria-current={isCurrent ? 'step' : undefined}\n                aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n                onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                  if (isSmallOrAbove) {\n                    if (hasToLoad) onLoadStage?.([stage.id]);\n                    setTarget(e.currentTarget);\n                  } else {\n                    openModal();\n                  }\n                }}\n                ref={(el: HTMLButtonElement) => {\n                  stagesRefs.current[index] = el;\n                }}\n                aria-expanded={target && isSmallOrAbove}\n                aria-controls={target ? dialogId : undefined}\n              >\n                {stage.completed && <Icon name='check' />}\n                {(!compressedView || isCurrent || !stage.completed) && (\n                  <StyledInnerStage ellipsis={isCurrent && compressedView}>\n                    {!isCurrent && compressedView ? index + 1 : stage.name}\n                  </StyledInnerStage>\n                )}\n              </Flex>\n              {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n                <InfoDialog\n                  heading={stage.name}\n                  target={target}\n                  progress={hasToLoad ? t('loading') : undefined}\n                  onDismiss={() => {\n                    setTarget(null);\n                  }}\n                  placement='bottom-start'\n                >\n                  {!hasToLoad && (\n                    <StyledStageGlimpse>\n                      <StageGlimpse stage={stage} />\n                      <Button variant='secondary' onClick={openModal}>\n                        {t('stages_see_full_lifecycle')}\n                      </Button>\n                    </StyledStageGlimpse>\n                  )}\n                </InfoDialog>\n              )}\n            </Fragment>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Stages;\n"]}

package/lib/components/Stages/Stages.styles.d.ts

@@ -3,12 +3,10 @@ export declare const StyledInnerStage: import("styled-components").StyledCompone
     ellipsis?: boolean | undefined;
 }, never>;
 export declare const StyledStage: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStagePopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("@pega/cosmos-react-core").PopoverProps<Modifiers> & import("@pega/cosmos-react-core").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStepsContainer: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStep: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
     completed: boolean;
 }, never>;
-export declare const StyledPopoverContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDateTimeDisplay: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStageGlimpse: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Stages.styles.d.ts.map

package/lib/components/Stages/Stages.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY,yGAMvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,4GAoLvB,CAAC;AAIF,eAAO,MAAM,kBAAkB,6VAE9B,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SA0BtD,CAAC;AAIH,eAAO,MAAM,oBAAoB,0OAEhC,CAAC;AAIF,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAM7B,CAAC"}
+{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,yGAWvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,4GAkLvB,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SAyBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC"}

package/lib/components/Stages/Stages.styles.js

@@ -1,11 +1,16 @@
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
-import { calculateFontSize, CardContent, DateTimeDisplay, defaultThemeProp, Popover, StyledIcon, tryCatch, useDirection } from '@pega/cosmos-react-core';
-export const StyledStages = styled.div(props => {
+import { calculateFontSize, DateTimeDisplay, defaultThemeProp, StyledIcon, tryCatch, useDirection } from '@pega/cosmos-react-core';
+export const StyledStages = styled.div(({ theme }) => {
     return css `
-    background-color: ${props.theme.base.palette['primary-background']};
-    border-radius: ${props.theme.base['border-radius']};
+    background-color: ${theme.base.palette['primary-background']};
+    border-radius: ${theme.base['border-radius']};
     width: 100%;
+    overflow: hidden;
+
+    &:has(:focus-visible) {
+      box-shadow: ${theme.base.shadow['focus-group']};
+    }
   `;
 });
 StyledStages.defaultProps = defaultThemeProp;
@@ -36,7 +41,6 @@ export const StyledStage = styled.button(({ theme: { base: { spacing, palette, '
       border-style: solid;
       position: relative;
       height: calc(4 * ${spacing});
-      min-width: calc(5.25 * ${spacing});
       padding-inline-start: calc(2 * ${spacing});
       padding-inline-end: ${spacing};
 
@@ -78,7 +82,6 @@ export const StyledStage = styled.button(({ theme: { base: { spacing, palette, '
         border-end-end-radius: ${borderRadius};
         border-inline-end-width: ${thinBorderWidth};
         padding-inline-end: ${spacing};
-        min-width: calc(6.25 * ${spacing});
 
         &:active {
           border-inline-end-width: ${thinBorderWidth};
@@ -196,10 +199,6 @@ export const StyledStage = styled.button(({ theme: { base: { spacing, palette, '
     `;
 });
 StyledStage.defaultProps = defaultThemeProp;
-export const StyledStagePopover = styled(Popover) `
-  width: 36ch;
-`;
-StyledStagePopover.defaultProps = defaultThemeProp;
 export const StyledStepsContainer = styled.ol(({ theme }) => {
     return css `
     list-style-type: none;
@@ -223,7 +222,6 @@ export const StyledStep = styled.li(({ completed, theme }) => {
     }
 
     & > ${StyledIcon} {
-      flex-shrink: 0;
       text-align: center;
 
       ${completed &&
@@ -238,10 +236,6 @@ export const StyledStep = styled.li(({ completed, theme }) => {
   `;
 });
 StyledStep.defaultProps = defaultThemeProp;
-export const StyledPopoverContent = styled(CardContent) `
-  min-height: 6rem;
-`;
-StyledPopoverContent.defaultProps = defaultThemeProp;
 export const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
@@ -252,9 +246,7 @@ export const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {
 StyledDateTimeDisplay.defaultProps = defaultThemeProp;
 export const StyledStageGlimpse = styled.div(({ theme }) => {
     return css `
-    h2 {
-      margin-block-end: calc(0.25 * ${theme.base.spacing});
-    }
+    max-width: ${theme.base['content-width'].sm};
   `;
 });
 StyledStageGlimpse.defaultProps = defaultThemeProp;

package/lib/components/Stages/Stages.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n  calculateFontSize,\n  CardContent,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Popover,\n  StyledIcon,\n  tryCatch,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(props => {\n  return css`\n    background-color: ${props.theme.base.palette['primary-background']};\n    border-radius: ${props.theme.base['border-radius']};\n    width: 100%;\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nexport const StyledStage = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'hit-area': hitArea, transparency, 'border-radius': borderRadius }\n    }\n  }) => {\n    const thinBorderWidth = '0.0625rem';\n    const thickBorderWidth = '0.125rem';\n    const { rtl } = useDirection();\n    const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));\n\n    return css`\n      /* stylelint-disable no-descending-specificity */\n      background-color: inherit;\n      color: ${palette['foreground-color']};\n      outline: none;\n      border-color: transparent;\n      border-width: ${thinBorderWidth} 0;\n      border-style: solid;\n      position: relative;\n      height: calc(4 * ${spacing});\n      min-width: calc(5.25 * ${spacing});\n      padding-inline-start: calc(2 * ${spacing});\n      padding-inline-end: ${spacing};\n\n      @media (pointer: coarse) {\n        height: ${hitArea['finger-min']};\n        padding-inline-start: calc(2.25 * ${spacing});\n      }\n\n      ${StyledIcon} {\n        color: ${palette.success};\n\n        & ~ ${StyledInnerStage} {\n          margin-inline-start: 0.25rem;\n        }\n      }\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-2']};\n      }\n\n      &:first-of-type {\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n        border-inline-start-width: ${thinBorderWidth};\n        padding-inline-start: ${spacing};\n\n        &:active {\n          padding-inline-start: ${spacing};\n        }\n\n        &:focus {\n          border-inline-start-width: ${thickBorderWidth};\n          padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n        }\n      }\n\n      &:last-of-type {\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n        border-inline-end-width: ${thinBorderWidth};\n        padding-inline-end: ${spacing};\n        min-width: calc(6.25 * ${spacing});\n\n        &:active {\n          border-inline-end-width: ${thinBorderWidth};\n          padding-inline-end: ${spacing};\n        }\n\n        &:focus {\n          border-inline-end-width: ${thickBorderWidth};\n          padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n        }\n      }\n\n      &:not(:first-of-type)::before,\n      &:not(:last-of-type)::after {\n        content: '';\n        position: absolute;\n        display: block;\n        width: calc(2.25 * ${spacing});\n        height: calc(2.25 * ${spacing});\n        background-color: transparent;\n        border-style: solid;\n        border-color: ${palette['border-line']};\n        border-inline-end-width: ${thinBorderWidth};\n        border-inline-start-width: 0;\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n        transform: rotateZ(45deg) skew(15deg, 15deg);\n\n        @media (pointer: coarse) {\n          width: calc(2.875 * ${spacing});\n          height: calc(2.875 * ${spacing});\n          transform: rotateZ(45deg) skew(20deg, 20deg);\n        }\n      }\n\n      &:not(:first-of-type)::before {\n        inset-inline-start: calc(-1.125 * ${spacing});\n\n        @media (pointer: coarse) {\n          inset-inline-start: calc(-1.375 * ${spacing});\n        }\n      }\n\n      &:not(:last-of-type)::after {\n        inset-inline-end: calc(-1.125 * ${spacing});\n        z-index: 1;\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(-1.375 * ${spacing});\n        }\n      }\n\n      &:hover,\n      &:hover::before,\n      &:hover::after {\n        border-color: ${palette['border-line']};\n      }\n\n      &:focus,\n      &:active,\n      &:focus::before,\n      &:active::before,\n      &:focus::after,\n      &:active::after {\n        border-color: ${palette.interactive};\n      }\n\n      &:focus {\n        border-width: ${thickBorderWidth} 0;\n      }\n\n      &:focus::before,\n      &:focus::after {\n        z-index: 1;\n        border-inline-end-width: ${thickBorderWidth};\n        border-top-width: ${rtl ? 0 : thickBorderWidth};\n        border-bottom-width: ${rtl ? thickBorderWidth : 0};\n      }\n\n      &:focus::before {\n        pointer-events: none;\n      }\n\n      &:active {\n        border-width: ${thinBorderWidth} 0;\n\n        ${StyledInnerStage} {\n          opacity: ${transparency['transparent-3']};\n        }\n      }\n\n      &:active::before,\n      &:active::after {\n        border-inline-end-width: ${thinBorderWidth};\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n      }\n\n      &[aria-current] {\n        ${StyledInnerStage} {\n          font-weight: bold;\n          opacity: 1;\n        }\n\n        &:hover {\n          ${StyledInnerStage} {\n            opacity: ${transparency['transparent-2']};\n          }\n        }\n      }\n\n      &[aria-current]::after {\n        filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n      }\n    `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStagePopover = styled(Popover)`\n  width: 36ch;\n`;\n\nStyledStagePopover.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n    &:empty {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n  const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n  return css`\n    border-radius: 0;\n    margin-block-end: calc(${theme.base.spacing});\n    color: ${theme.base.palette['foreground-color']};\n\n    &:last-child {\n      margin-block-end: 0;\n    }\n\n    & > ${StyledIcon} {\n      flex-shrink: 0;\n      text-align: center;\n\n      ${completed &&\n      css`\n        color: ${theme.base.palette.success};\n      `}\n    }\n\n    div {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledPopoverContent = styled(CardContent)`\n  min-height: 6rem;\n`;\n\nStyledPopoverContent.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-size: ${fontSize.xs};\n    opacity: ${theme.base.transparency['transparent-2']};\n  `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n  return css`\n    h2 {\n      margin-block-end: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n  calculateFontSize,\n  DateTimeDisplay,\n  defaultThemeProp,\n  StyledIcon,\n  tryCatch,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.base['border-radius']};\n    width: 100%;\n    overflow: hidden;\n\n    &:has(:focus-visible) {\n      box-shadow: ${theme.base.shadow['focus-group']};\n    }\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nexport const StyledStage = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'hit-area': hitArea, transparency, 'border-radius': borderRadius }\n    }\n  }) => {\n    const thinBorderWidth = '0.0625rem';\n    const thickBorderWidth = '0.125rem';\n    const { rtl } = useDirection();\n    const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));\n\n    return css`\n      /* stylelint-disable no-descending-specificity */\n      background-color: inherit;\n      color: ${palette['foreground-color']};\n      outline: none;\n      border-color: transparent;\n      border-width: ${thinBorderWidth} 0;\n      border-style: solid;\n      position: relative;\n      height: calc(4 * ${spacing});\n      padding-inline-start: calc(2 * ${spacing});\n      padding-inline-end: ${spacing};\n\n      @media (pointer: coarse) {\n        height: ${hitArea['finger-min']};\n        padding-inline-start: calc(2.25 * ${spacing});\n      }\n\n      ${StyledIcon} {\n        color: ${palette.success};\n\n        & ~ ${StyledInnerStage} {\n          margin-inline-start: 0.25rem;\n        }\n      }\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-2']};\n      }\n\n      &:first-of-type {\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n        border-inline-start-width: ${thinBorderWidth};\n        padding-inline-start: ${spacing};\n\n        &:active {\n          padding-inline-start: ${spacing};\n        }\n\n        &:focus {\n          border-inline-start-width: ${thickBorderWidth};\n          padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n        }\n      }\n\n      &:last-of-type {\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n        border-inline-end-width: ${thinBorderWidth};\n        padding-inline-end: ${spacing};\n\n        &:active {\n          border-inline-end-width: ${thinBorderWidth};\n          padding-inline-end: ${spacing};\n        }\n\n        &:focus {\n          border-inline-end-width: ${thickBorderWidth};\n          padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n        }\n      }\n\n      &:not(:first-of-type)::before,\n      &:not(:last-of-type)::after {\n        content: '';\n        position: absolute;\n        display: block;\n        width: calc(2.25 * ${spacing});\n        height: calc(2.25 * ${spacing});\n        background-color: transparent;\n        border-style: solid;\n        border-color: ${palette['border-line']};\n        border-inline-end-width: ${thinBorderWidth};\n        border-inline-start-width: 0;\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n        transform: rotateZ(45deg) skew(15deg, 15deg);\n\n        @media (pointer: coarse) {\n          width: calc(2.875 * ${spacing});\n          height: calc(2.875 * ${spacing});\n          transform: rotateZ(45deg) skew(20deg, 20deg);\n        }\n      }\n\n      &:not(:first-of-type)::before {\n        inset-inline-start: calc(-1.125 * ${spacing});\n\n        @media (pointer: coarse) {\n          inset-inline-start: calc(-1.375 * ${spacing});\n        }\n      }\n\n      &:not(:last-of-type)::after {\n        inset-inline-end: calc(-1.125 * ${spacing});\n        z-index: 1;\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(-1.375 * ${spacing});\n        }\n      }\n\n      &:hover,\n      &:hover::before,\n      &:hover::after {\n        border-color: ${palette['border-line']};\n      }\n\n      &:focus,\n      &:active,\n      &:focus::before,\n      &:active::before,\n      &:focus::after,\n      &:active::after {\n        border-color: ${palette.interactive};\n      }\n\n      &:focus {\n        border-width: ${thickBorderWidth} 0;\n      }\n\n      &:focus::before,\n      &:focus::after {\n        z-index: 1;\n        border-inline-end-width: ${thickBorderWidth};\n        border-top-width: ${rtl ? 0 : thickBorderWidth};\n        border-bottom-width: ${rtl ? thickBorderWidth : 0};\n      }\n\n      &:focus::before {\n        pointer-events: none;\n      }\n\n      &:active {\n        border-width: ${thinBorderWidth} 0;\n\n        ${StyledInnerStage} {\n          opacity: ${transparency['transparent-3']};\n        }\n      }\n\n      &:active::before,\n      &:active::after {\n        border-inline-end-width: ${thinBorderWidth};\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n      }\n\n      &[aria-current] {\n        ${StyledInnerStage} {\n          font-weight: bold;\n          opacity: 1;\n        }\n\n        &:hover {\n          ${StyledInnerStage} {\n            opacity: ${transparency['transparent-2']};\n          }\n        }\n      }\n\n      &[aria-current]::after {\n        filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n      }\n    `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n    &:empty {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n  const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n  return css`\n    border-radius: 0;\n    margin-block-end: calc(${theme.base.spacing});\n    color: ${theme.base.palette['foreground-color']};\n\n    &:last-child {\n      margin-block-end: 0;\n    }\n\n    & > ${StyledIcon} {\n      text-align: center;\n\n      ${completed &&\n      css`\n        color: ${theme.base.palette.success};\n      `}\n    }\n\n    div {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-size: ${fontSize.xs};\n    opacity: ${theme.base.transparency['transparent-2']};\n  `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].sm};\n  `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAU,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAoUrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAU,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqUrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Stakeholders/Stakeholders.js

@@ -198,10 +198,10 @@ const Stakeholders = forwardRef(({ items: itemsProp, count, loading, onAddNew, f
         if (!popoverTarget)
             form.onAfterClose?.();
     }, [popoverTarget]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledStakeholders, { ...restProps, ref: ref, icon: 'person', name: t('view_stakeholders'), loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [mergeItemActions, itemsProp]), actions: onAddNew
+    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_stakeholders'),
+                            text: t('add'),
                             id: 'add_new',
                             icon: 'plus',
                             onClick() {

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  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  useI18n,\n  ModalMethods,\n  Button,\n  ViewAll,\n  Modal,\n  Popover,\n  Flex,\n  Text,\n  useModalManager,\n  useOuterEvent,\n  Progress,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps, ModalProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div`\n  position: relative;\n  min-height: 8rem;\n\n  &[aria-busy='true'] > :nth-child(2) {\n    visibility: hidden;\n  }\n`;\n\nconst StyledPopover = styled(Popover)`\n  width: 40ch;\n  min-height: 12rem;\n`;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n  (\n    {\n      items: itemsProp,\n      count,\n      loading,\n      onAddNew,\n      form,\n      onViewAll,\n      viewAll,\n      error,\n      ...restProps\n    }: PropsWithoutRef<StakeholdersProps>,\n    ref: StakeholdersProps['ref']\n  ) => {\n    const { create: createModal } = useModalManager();\n    const t = useI18n();\n    const modalMethods = useRef<ModalMethods>();\n    const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n    const [editing, setEditing] = useState(false);\n    const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n    const popoverRef = useRef<HTMLDivElement>(null);\n    const progressMsgRef = useRef(t('loading'));\n\n    // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n    const selectedRoleNameRef = useRef<Role['name'] | undefined>();\n    // Setter for the ref. Avoids a re-render.\n    const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n      selectedRoleNameRef.current = selectedRoleName;\n    }, []);\n\n    const [popoverTarget, setPopoverTarget] = useState<{\n      portal: HTMLLIElement;\n      button: HTMLButtonElement | null;\n    } | null>(null);\n\n    const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n      itemEls: [],\n      viewAllItemEls: []\n    });\n\n    // This function merges the pre-defined actions(add & edit) to the item object.\n    const mergeItemActions = (\n      items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n    ) => {\n      return items.map(({ onEdit, onRemove, ...rest }, i) => {\n        let itemActions: Action[] = [];\n        const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n        if (onEdit) {\n          itemActions = [\n            {\n              id: 'edit',\n              text: t('edit'),\n              icon: 'pencil',\n              onClick: () => {\n                setEditing(true);\n                setPopoverTarget({\n                  portal: elArray[i],\n                  button: elArray[i].querySelector<HTMLButtonElement>(\n                    'button[aria-haspopup=\"menu\"]'\n                  )\n                });\n\n                onEdit?.();\n              }\n            }\n          ];\n        }\n\n        if (onRemove) {\n          itemActions = [\n            ...itemActions,\n            {\n              id: 'remove',\n              text: t('remove'),\n              icon: 'trash',\n              onClick: () => {\n                onRemove?.();\n              }\n            }\n          ];\n        }\n\n        return {\n          ...rest,\n          ref: (el: HTMLLIElement) => {\n            elArray[i] = el;\n          },\n          actions: itemActions\n        };\n      });\n    };\n\n    const closePopover = () => {\n      if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting'))) return;\n      popoverTarget.button?.focus();\n      setPopoverTarget(null);\n      setEditing(false);\n      progressMsgRef.current = t('loading');\n    };\n\n    let formContent: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      formContent = (\n        <StakeholderForm\n          roles={form.roles}\n          currentRole={form.currentRole}\n          renderer={form.renderer}\n          rendererProps={form.rendererProps}\n          setSelectedRoleNameRef={setSelectedRoleNameRef}\n        />\n      );\n    }\n\n    // Actions used for add and edit both in the modal and the popover.\n    let formActions: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      const closeForm = () => {\n        if (mode === 'add') {\n          modalMethods.current?.dismiss();\n        } else {\n          closePopover();\n        }\n      };\n\n      formActions = (\n        <>\n          <Button\n            disabled={form.loading}\n            onClick={() => {\n              form.onDismiss({ closeForm });\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            disabled={form.loading}\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              progressMsgRef.current = t('submitting');\n              form.onSubmit({\n                selectedRoleName: selectedRoleNameRef.current,\n                closeForm\n              });\n            }}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      );\n    }\n\n    // 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                  value: viewAllSearchValue,\n                  onSearchChange: (value: string) => {\n                    setViewAllSearchValue(value);\n                    viewAll?.onSearch?.(value);\n                  }\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: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n          onAfterClose: () => {\n            if (mode === 'add') {\n              form.onAfterClose?.();\n            } else {\n              setViewAllSearchValue('');\n              viewAll.onAfterClose?.();\n            }\n\n            progressMsgRef.current = t('loading');\n            setMode(undefined);\n          }\n        });\n      }\n    }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n    useOuterEvent('mousedown', [popoverRef], closePopover);\n\n    let editPopover: ReactNode = null;\n    if (popoverTarget) {\n      editPopover = (\n        <StyledPopover\n          ref={popoverRef}\n          target={popoverTarget.button}\n          placement='auto'\n          role='dialog'\n        >\n          <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n            <Text variant='h3'>{t('edit_stakeholder')}</Text>\n            <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n              <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n              {(!form.loading || progressMsgRef.current === t('submitting')) && (\n                <StakeholderForm\n                  roles={form.roles}\n                  currentRole={form.currentRole}\n                  renderer={form.renderer}\n                  rendererProps={form.rendererProps}\n                  setSelectedRoleNameRef={setSelectedRoleNameRef}\n                />\n              )}\n            </StyledEditFormWrap>\n            {formActions && <Flex container={{ justify: 'between' }}>{formActions}</Flex>}\n          </Flex>\n        </StyledPopover>\n      );\n    }\n\n    const onKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closePopover();\n      }\n    };\n\n    useEffect(() => {\n      if (!popoverTarget) return;\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [popoverTarget]);\n\n    useAfterInitialEffect(() => {\n      if (!popoverTarget) form.onAfterClose?.();\n    }, [popoverTarget]);\n\n    return (\n      <>\n        <StyledStakeholders\n          {...restProps}\n          ref={ref}\n          icon='person'\n          name={t('view_stakeholders')}\n          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_stakeholders'),\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        {popoverTarget && createPortal(editPopover, popoverTarget.portal)}\n      </>\n    );\n  }\n);\n\nexport default Stakeholders;\n"]}
+{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,MAAM,EACN,SAAS,EACT,OAAO,EACP,QAAQ,EAER,WAAW,EACZ,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EACL,WAAW,EACX,OAAO,EAEP,MAAM,EACN,OAAO,EACP,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,eAAe,EACf,aAAa,EACb,QAAQ,EACR,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,kBAAkB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA,EAAE,CAAC;AAEjD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOpC,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;CAGpC,CAAC;AAEF,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EACE,KAAK,EAAE,SAAS,EAChB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,SAAS,EACuB,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,YAAY,GAAG,MAAM,EAAgB,CAAC;IAC5C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAClE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjE,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAE5C,0GAA0G;IAC1G,MAAM,mBAAmB,GAAG,MAAM,EAA4B,CAAC;IAC/D,0CAA0C;IAC1C,MAAM,sBAAsB,GAAG,WAAW,CAAC,CAAC,gBAA+B,EAAE,EAAE;QAC7E,mBAAmB,CAAC,OAAO,GAAG,gBAAgB,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAGxC,IAAI,CAAC,CAAC;IAEhB,MAAM,UAAU,GAAG,MAAM,CAAgE;QACvF,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,EAAE;KACnB,CAAC,CAAC;IAEH,+EAA+E;IAC/E,MAAM,gBAAgB,GAAG,CACvB,KAAsF,EACtF,EAAE;QACF,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;YACpD,IAAI,WAAW,GAAa,EAAE,CAAC;YAC/B,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;YAEtF,IAAI,MAAM,EAAE;gBACV,WAAW,GAAG;oBACZ;wBACE,EAAE,EAAE,MAAM;wBACV,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;wBACf,IAAI,EAAE,QAAQ;wBACd,OAAO,EAAE,GAAG,EAAE;4BACZ,UAAU,CAAC,IAAI,CAAC,CAAC;4BACjB,gBAAgB,CAAC;gCACf,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;gCAClB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAC9B,8BAA8B,CAC/B;6BACF,CAAC,CAAC;4BAEH,MAAM,EAAE,EAAE,CAAC;wBACb,CAAC;qBACF;iBACF,CAAC;aACH;YAED,IAAI,QAAQ,EAAE;gBACZ,WAAW,GAAG;oBACZ,GAAG,WAAW;oBACd;wBACE,EAAE,EAAE,QAAQ;wBACZ,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC;wBACjB,IAAI,EAAE,OAAO;wBACb,OAAO,EAAE,GAAG,EAAE;4BACZ,QAAQ,EAAE,EAAE,CAAC;wBACf,CAAC;qBACF;iBACF,CAAC;aACH;YAED,OAAO;gBACL,GAAG,IAAI;gBACP,GAAG,EAAE,CAAC,EAAiB,EAAE,EAAE;oBACzB,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBAClB,CAAC;gBACD,OAAO,EAAE,WAAW;aACrB,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;YAAE,OAAO;QAC3F,aAAa,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;QAC9B,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,IAAI,WAAW,GAAc,IAAI,CAAC;IAClC,IACE,CAAC,IAAI,KAAK,KAAK,IAAI,OAAO,CAAC;QAC3B,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,EAC7D;QACA,WAAW,GAAG,CACZ,KAAC,eAAe,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,sBAAsB,EAAE,sBAAsB,GAC9C,CACH,CAAC;KACH;IAED,mEAAmE;IACnE,IAAI,WAAW,GAAc,IAAI,CAAC;IAClC,IACE,CAAC,IAAI,KAAK,KAAK,IAAI,OAAO,CAAC;QAC3B,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,EAC7D;QACA,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,IAAI,IAAI,KAAK,KAAK,EAAE;gBAClB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;aACjC;iBAAM;gBACL,YAAY,EAAE,CAAC;aAChB;QACH,CAAC,CAAC;QAEF,WAAW,GAAG,CACZ,8BACE,KAAC,MAAM,IACL,QAAQ,EAAE,IAAI,CAAC,OAAO,EACtB,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;oBAChC,CAAC,YAEA,CAAC,CAAC,QAAQ,CAAC,GACL,EACT,KAAC,MAAM,IACL,QAAQ,EAAE,IAAI,CAAC,OAAO,EACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE;wBACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC;wBACzC,IAAI,CAAC,QAAQ,CAAC;4BACZ,gBAAgB,EAAE,mBAAmB,CAAC,OAAO;4BAC7C,SAAS;yBACV,CAAC,CAAC;oBACL,CAAC,YAEA,CAAC,CAAC,QAAQ,CAAC,GACL,IACR,CACJ,CAAC;KACH;IAED,8DAA8D;IAC9D,IAAI,YAAY,GAAc,IAAI,CAAC;IACnC,IAAI,IAAI,KAAK,KAAK;QAAE,YAAY,GAAG,WAAW,CAAC;IAE/C,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE;QACjF,YAAY,GAAG,CACb,KAAC,OAAO,IACN,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EACtC,OAAO,EAAE;gBACP;oBACE,EAAE,EAAE,gBAAgB;oBACpB,IAAI,EAAE,SAAS;oBACf,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;wBACf,QAAQ,EAAE,EAAE,CAAC;oBACf,CAAC;iBACF;aACF,EACD,gBAAgB,EACd,OAAO,CAAC,QAAQ;gBACd,CAAC,CAAC;oBACE,KAAK,EAAE,kBAAkB;oBACzB,cAAc,EAAE,CAAC,KAAa,EAAE,EAAE;wBAChC,qBAAqB,CAAC,KAAK,CAAC,CAAC;wBAC7B,OAAO,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;oBAC7B,CAAC;iBACF;gBACH,CAAC,CAAC,SAAS,GAEf,CACH,CAAC;KACH;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE;YACT,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;YACjC,OAAO;SACR;QAED,MAAM,UAAU,GAAsC;YACpD,QAAQ,EACN,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,OAAO;gBACjD,CAAC,CAAC,EAAE,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE;gBACrC,CAAC,CAAC,SAAS;YACf,KAAK,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YAC7C,QAAQ,EAAE,YAAY;YACtB,OAAO,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;YACjD,gBAAgB,EACd,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;SACvF,CAAC;QAEF,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;SACzC;aAAM,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,SAAS,EAAE;YAC/C,YAAY,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,EAAE;gBACxC,GAAG,UAAU;gBACb,OAAO,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC;gBACxE,YAAY,EAAE,GAAG,EAAE;oBACjB,IAAI,IAAI,KAAK,KAAK,EAAE;wBAClB,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC;qBACvB;yBAAM;wBACL,qBAAqB,CAAC,EAAE,CAAC,CAAC;wBAC1B,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC;qBAC1B;oBAED,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;oBACtC,OAAO,CAAC,SAAS,CAAC,CAAC;gBACrB,CAAC;aACF,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAE5E,sJAAsJ;IACtJ,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;IAEvD,IAAI,WAAW,GAAc,IAAI,CAAC;IAClC,IAAI,aAAa,EAAE;QACjB,WAAW,GAAG,CACZ,KAAC,aAAa,IACZ,GAAG,EAAE,UAAU,EACf,MAAM,EAAE,aAAa,CAAC,MAAM,EAC5B,SAAS,EAAC,MAAM,EAChB,IAAI,EAAC,QAAQ,YAEb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aACtD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,kBAAkB,CAAC,GAAQ,EACjD,MAAC,kBAAkB,iBAAY,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,aAC5D,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,cAAc,CAAC,OAAO,GAAI,EACrF,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,CAChE,KAAC,eAAe,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,sBAAsB,EAAE,sBAAsB,GAC9C,CACH,IACkB,EACpB,WAAW,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,YAAG,WAAW,GAAQ,IACxE,GACO,CACjB,CAAC;KACH;IAED,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,YAAY,EAAE,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,aAAa;YAAE,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,8BACE,KAAC,kBAAkB,OACb,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAC5B,UAAU,EAAC,IAAI,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAC7C,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAC9B,EACD,OAAO,EACL,QAAQ;oBACN,CAAC,CAAC;wBACE;4BACE,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC;4BACd,EAAE,EAAE,SAAS;4BACb,IAAI,EAAE,MAAM;4BACZ,OAAO;gCACL,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,QAAQ,EAAE,EAAE,CAAC;4BACf,CAAC;yBACF;qBACF;oBACH,CAAC,CAAC,SAAS,EAEf,SAAS,EACP,SAAS,IAAI,KAAK,IAAI,KAAK,GAAG,CAAC;oBAC7B,CAAC,CAAC,GAAG,EAAE;wBACH,OAAO,CAAC,SAAS,CAAC,CAAC;wBACnB,SAAS,EAAE,EAAE,CAAC;oBAChB,CAAC;oBACH,CAAC,CAAC,SAAS,GAEf,EACD,aAAa,IAAI,YAAY,CAAC,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,IAChE,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useRef,\n  useEffect,\n  useMemo,\n  useState,\n  ReactNode,\n  useCallback\n} from 'react';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport {\n  SummaryList,\n  useI18n,\n  ModalMethods,\n  Button,\n  ViewAll,\n  Modal,\n  Popover,\n  Flex,\n  Text,\n  useModalManager,\n  useOuterEvent,\n  Progress,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps, ModalProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div`\n  position: relative;\n  min-height: 8rem;\n\n  &[aria-busy='true'] > :nth-child(2) {\n    visibility: hidden;\n  }\n`;\n\nconst StyledPopover = styled(Popover)`\n  width: 40ch;\n  min-height: 12rem;\n`;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n  (\n    {\n      items: itemsProp,\n      count,\n      loading,\n      onAddNew,\n      form,\n      onViewAll,\n      viewAll,\n      error,\n      ...restProps\n    }: PropsWithoutRef<StakeholdersProps>,\n    ref: StakeholdersProps['ref']\n  ) => {\n    const { create: createModal } = useModalManager();\n    const t = useI18n();\n    const modalMethods = useRef<ModalMethods>();\n    const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n    const [editing, setEditing] = useState(false);\n    const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n    const popoverRef = useRef<HTMLDivElement>(null);\n    const progressMsgRef = useRef(t('loading'));\n\n    // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n    const selectedRoleNameRef = useRef<Role['name'] | undefined>();\n    // Setter for the ref. Avoids a re-render.\n    const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n      selectedRoleNameRef.current = selectedRoleName;\n    }, []);\n\n    const [popoverTarget, setPopoverTarget] = useState<{\n      portal: HTMLLIElement;\n      button: HTMLButtonElement | null;\n    } | null>(null);\n\n    const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n      itemEls: [],\n      viewAllItemEls: []\n    });\n\n    // This function merges the pre-defined actions(add & edit) to the item object.\n    const mergeItemActions = (\n      items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n    ) => {\n      return items.map(({ onEdit, onRemove, ...rest }, i) => {\n        let itemActions: Action[] = [];\n        const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n        if (onEdit) {\n          itemActions = [\n            {\n              id: 'edit',\n              text: t('edit'),\n              icon: 'pencil',\n              onClick: () => {\n                setEditing(true);\n                setPopoverTarget({\n                  portal: elArray[i],\n                  button: elArray[i].querySelector<HTMLButtonElement>(\n                    'button[aria-haspopup=\"menu\"]'\n                  )\n                });\n\n                onEdit?.();\n              }\n            }\n          ];\n        }\n\n        if (onRemove) {\n          itemActions = [\n            ...itemActions,\n            {\n              id: 'remove',\n              text: t('remove'),\n              icon: 'trash',\n              onClick: () => {\n                onRemove?.();\n              }\n            }\n          ];\n        }\n\n        return {\n          ...rest,\n          ref: (el: HTMLLIElement) => {\n            elArray[i] = el;\n          },\n          actions: itemActions\n        };\n      });\n    };\n\n    const closePopover = () => {\n      if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting'))) return;\n      popoverTarget.button?.focus();\n      setPopoverTarget(null);\n      setEditing(false);\n      progressMsgRef.current = t('loading');\n    };\n\n    let formContent: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      formContent = (\n        <StakeholderForm\n          roles={form.roles}\n          currentRole={form.currentRole}\n          renderer={form.renderer}\n          rendererProps={form.rendererProps}\n          setSelectedRoleNameRef={setSelectedRoleNameRef}\n        />\n      );\n    }\n\n    // Actions used for add and edit both in the modal and the popover.\n    let formActions: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      const closeForm = () => {\n        if (mode === 'add') {\n          modalMethods.current?.dismiss();\n        } else {\n          closePopover();\n        }\n      };\n\n      formActions = (\n        <>\n          <Button\n            disabled={form.loading}\n            onClick={() => {\n              form.onDismiss({ closeForm });\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            disabled={form.loading}\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              progressMsgRef.current = t('submitting');\n              form.onSubmit({\n                selectedRoleName: selectedRoleNameRef.current,\n                closeForm\n              });\n            }}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      );\n    }\n\n    // 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                  value: viewAllSearchValue,\n                  onSearchChange: (value: string) => {\n                    setViewAllSearchValue(value);\n                    viewAll?.onSearch?.(value);\n                  }\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: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n          onAfterClose: () => {\n            if (mode === 'add') {\n              form.onAfterClose?.();\n            } else {\n              setViewAllSearchValue('');\n              viewAll.onAfterClose?.();\n            }\n\n            progressMsgRef.current = t('loading');\n            setMode(undefined);\n          }\n        });\n      }\n    }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n    useOuterEvent('mousedown', [popoverRef], closePopover);\n\n    let editPopover: ReactNode = null;\n    if (popoverTarget) {\n      editPopover = (\n        <StyledPopover\n          ref={popoverRef}\n          target={popoverTarget.button}\n          placement='auto'\n          role='dialog'\n        >\n          <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n            <Text variant='h3'>{t('edit_stakeholder')}</Text>\n            <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n              <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n              {(!form.loading || progressMsgRef.current === t('submitting')) && (\n                <StakeholderForm\n                  roles={form.roles}\n                  currentRole={form.currentRole}\n                  renderer={form.renderer}\n                  rendererProps={form.rendererProps}\n                  setSelectedRoleNameRef={setSelectedRoleNameRef}\n                />\n              )}\n            </StyledEditFormWrap>\n            {formActions && <Flex container={{ justify: 'between' }}>{formActions}</Flex>}\n          </Flex>\n        </StyledPopover>\n      );\n    }\n\n    const onKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closePopover();\n      }\n    };\n\n    useEffect(() => {\n      if (!popoverTarget) return;\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [popoverTarget]);\n\n    useAfterInitialEffect(() => {\n      if (!popoverTarget) form.onAfterClose?.();\n    }, [popoverTarget]);\n\n    return (\n      <>\n        <StyledStakeholders\n          {...restProps}\n          ref={ref}\n          icon='person'\n          name={t('view_stakeholders')}\n          headingTag='h3'\n          loading={loading}\n          count={count}\n          error={error}\n          items={useMemo(\n            () => mergeItemActions(itemsProp.slice(0, 3)),\n            [mergeItemActions, itemsProp]\n          )}\n          actions={\n            onAddNew\n              ? [\n                  {\n                    text: t('add'),\n                    id: 'add_new',\n                    icon: 'plus',\n                    onClick() {\n                      setMode('add');\n                      onAddNew?.();\n                    }\n                  }\n                ]\n              : undefined\n          }\n          onViewAll={\n            onViewAll && count && count > 3\n              ? () => {\n                  setMode('viewAll');\n                  onViewAll?.();\n                }\n              : undefined\n          }\n        />\n        {popoverTarget && createPortal(editPopover, popoverTarget.portal)}\n      </>\n    );\n  }\n);\n\nexport default Stakeholders;\n"]}

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

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 import type { SummaryListProps, ForwardProps, NoChildrenProp, SummaryListItem } from '@pega/cosmos-react-core';
-export declare type Role = {
+export type Role = {
     name: string;
     description: string;
 };
@@ -26,9 +26,7 @@ export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps
         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.
-         */
+        /** 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.
@@ -37,9 +35,7 @@ export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps
         renderer: ComponentType<{
             selectedRoleName?: Role['name'];
         }>;
-        /**
-         * A props object that will be passed to the form renderer.
-         */
+        /** A props object that will be passed to the form renderer. */
         rendererProps?: {
             [key: string]: unknown;
         };
@@ -60,9 +56,7 @@ export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps
         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.
-         */
+        /** 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. */
@@ -74,9 +68,7 @@ export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps
         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.
-         */
+        /** Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal. */
         onAfterClose?: () => void;
     };
 }