@pega/cosmos-react-work 3.0.0-dev.9.1 → 3.0.0-rc.3

package/lib/components/Stages/Stages.js

@@ -1,129 +1,122 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useContext, useCallback } from 'react';
+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, Popover, useI18n, Button, ModalManagerContext, Modal, getFocusables, useBreakpoint, debounce, useTheme } from '@pega/cosmos-react-core';
+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 * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
-import StepsContainer from './StepsContainer';
-import { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';
-registerIcon(checkIcon);
-const Stages = (props) => {
-    const { current, stages, caseTitle, ...restProps } = props;
+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);
+const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restProps }, ref) => {
     const t = useI18n();
-    const [stagesEl, setStagesEl] = useElement();
-    const [currentStageNameEl, setCurrentStageNameEl] = useElement();
-    const [currentStageButtonEl, setCurrentStageButtonEl] = useElement();
-    const [activeStageIndex, setActiveStageIndex] = useState(0);
-    const activeStageObj = stages[activeStageIndex];
-    const stagesRefs = useRef([]);
-    const activeStageEl = stagesRefs.current[activeStageIndex];
-    const { create } = useContext(ModalManagerContext);
+    const stagesRef = useConsolidatedRef(ref);
+    const currentStageRef = useRef(null);
+    const [focusedStageIndex, setFocusedStageIndex] = useState(undefined);
+    const focusedStageRef = useRef(null);
+    const { create: createModal } = useModalManager();
+    const modalMethods = useRef();
     const [popoverEl, setPopoverRef] = useElement();
     const [showPopover, setShowPopover] = useState(false);
-    const popoverContentRef = useRef(null);
     const isSmallOrAbove = useBreakpoint('sm');
-    const focusableElements = getFocusables(popoverContentRef);
     const [compressedView, setCompressedView] = useState(false);
     const [minExpandedWidth, setMinExpandedWidth] = useState(0);
-    const resizeObserver = new ResizeObserver(debounce((entries) => {
-        if (entries[0].contentRect.width > minExpandedWidth)
-            setCompressedView(false);
-    }, 100));
-    const theme = useTheme();
-    const intersectionObserver = new IntersectionObserver(entries => {
-        if (entries[0].intersectionRatio < 1) {
-            if (stagesEl)
-                setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));
-            setCompressedView(true);
-        }
-    }, { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 });
+    const { base: { spacing: themeSpacing } } = useTheme();
+    const popoverId = useUID();
     useEffect(() => {
-        if (stagesEl && currentStageNameEl) {
-            intersectionObserver.observe(currentStageNameEl);
-            resizeObserver.observe(stagesEl);
-            return () => {
-                intersectionObserver.disconnect();
-                resizeObserver.disconnect();
-            };
-        }
-    }, [stagesEl, currentStageNameEl, compressedView]);
-    useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {
-        if (showPopover) {
-            setShowPopover(false);
-            e.preventDefault();
-        }
-    });
-    const onMouseDown = (ev) => {
-        if (!showPopover)
-            ev.preventDefault();
-    };
-    const onKeyDown = useCallback(({ key }) => {
-        if (key === 'Escape') {
-            setShowPopover(false);
-            activeStageEl?.focus();
-        }
-    }, [activeStageEl]);
-    const onKeyDownPopover = useCallback((event) => {
-        if (event.key === 'Tab' && event.shiftKey) {
-            const firstFocusable = focusableElements[0];
-            if (document.activeElement === firstFocusable) {
-                stagesRefs.current[activeStageIndex + 1]?.focus();
-                setShowPopover(false);
-            }
-        }
-        if (event.key === 'Tab' && !event.shiftKey) {
-            const lastFocusable = focusableElements[focusableElements.length - 1];
-            if (document.activeElement === lastFocusable) {
-                activeStageEl?.focus();
-                setShowPopover(false);
+        if (stagesRef.current && currentStageRef.current) {
+            if (compressedView) {
+                const resizeObserver = new ResizeObserver(debounce((entries) => {
+                    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));
+                    setCompressedView(true);
+                }
+            }, {
+                root: currentStageRef.current,
+                rootMargin: `0px -${remToPx(themeSpacing)}`,
+                threshold: 1
+            });
+            intersectionObserver.observe(currentStageRef.current.children[0]);
+            return () => intersectionObserver.disconnect();
         }
-    }, [activeStageEl, focusableElements, activeStageIndex]);
-    useEffect(() => {
-        document.addEventListener('keydown', onKeyDown);
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-        };
-    }, [onKeyDown]);
-    useEffect(() => {
-        if (focusableElements.length)
-            focusableElements[0].focus();
-    }, [popoverEl]);
-    const [requestDismiss, setRequestDismiss] = useState(false);
-    useEffect(() => {
-        if (requestDismiss) {
-            setShowPopover(false);
-            activeStageEl?.focus();
-            setRequestDismiss(false);
-        }
-    }, [activeStageEl, requestDismiss]);
-    const RenderModal = ({ heading = t('lifecycle', [caseTitle || 'Case']) }) => {
-        return (_jsx(Modal, { ...restProps, heading: heading, onRequestDismiss: () => setRequestDismiss(true), children: stages.map((stage, id) => (_jsx(StepsContainer, { currentStage: [stage] }, id.toString()))) }));
-    };
+    }, [themeSpacing, minExpandedWidth, compressedView]);
+    useOuterEvent('mousedown', [popoverEl, focusedStageRef], () => {
+        setShowPopover(false);
+    });
+    useEscape(() => {
+        setShowPopover(false);
+        focusedStageRef.current?.focus();
+    }, stagesRef);
+    const stagesToLoad = onLoadStage
+        ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)
+        : [];
     const openModal = () => {
         setShowPopover(false);
-        create(RenderModal);
+        if (stagesToLoad.length > 0)
+            onLoadStage?.(stagesToLoad);
+        modalMethods.current = createModal(Modal, {
+            heading: caseTitle
+                ? 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();
+                modalMethods.current = undefined;
+            }
+        });
     };
-    const isCurrent = (stageId) => current === stageId;
-    return (_jsxs(_Fragment, { children: [_jsx(Flex, { container: true, as: StyledStages, ref: setStagesEl, ...restProps, children: stages.map((stage, index) => (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }, "aria-current": isCurrent(stage.id) ? 'step' : undefined, "aria-label": `Stage ${stage.name}`, ref: (el) => {
-                        stagesRefs.current[index] = el;
-                        if (isCurrent(stage.id))
-                            setCurrentStageButtonEl(el);
-                    }, onMouseDown: onMouseDown, onClick: () => {
-                        setActiveStageIndex(index);
-                        if (isSmallOrAbove) {
-                            setShowPopover(!showPopover);
-                        }
-                        else {
-                            openModal();
-                        }
-                    }, children: [stage.complete && _jsx(Icon, { name: 'check' }), !(stage.complete && compressedView) && (_jsx(StyledInnerStage, { ref: isCurrent(stage.id) ? setCurrentStageNameEl : undefined, ellipsis: isCurrent(stage.id) && compressedView, children: !isCurrent(stage.id) && compressedView ? index + 1 : stage.name }))] }, `stage-${stage.id}`))) }), _jsx(Flex, { ref: popoverContentRef, children: _jsxs(Popover, { as: StyledStagePopover, show: showPopover && isSmallOrAbove, target: stagesRefs.current[activeStageIndex], id: 'id', ref: setPopoverRef, arrow: true, placement: 'bottom-start', onKeyDown: onKeyDownPopover, modifiers: [
-                        {
-                            name: 'flip',
-                            options: {
-                                fallbackPlacements: ['bottom-end', 'right', 'left']
+    useEffect(() => {
+        modalMethods.current?.update({
+            progress: stagesToLoad.length > 0,
+            children: stages.map(stage => _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) => {
+            const isCurrent = stage.id === current;
+            let stageStatusText = t(stage.completed ? 'completed' : 'not_started');
+            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: () => {
+                            if (isSmallOrAbove) {
+                                if (hasToLoad)
+                                    onLoadStage?.([stage.id]);
+                                setShowPopover(prevShowPopover => !prevShowPopover);
+                            }
+                            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']
+                                }
                             }
-                        }
-                    ], children: [_jsx(StepsContainer, { currentStage: [activeStageObj] }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stage_see_full_lifecycle') })] }) })] }));
-};
+                        ], 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));
+        }) }));
+});
 export default Stages;
 //# sourceMappingURL=Stages.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAChG,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,IAAI,EAEJ,UAAU,EACV,aAAa,EACb,OAAO,EACP,OAAO,EACP,MAAM,EACN,mBAAmB,EAEnB,KAAK,EACL,aAAa,EACb,aAAa,EACb,QAAQ,EACR,QAAQ,EACT,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElG,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,MAAM,GAAkD,CAAC,KAAkB,EAAE,EAAE;IACnF,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC7D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAmB,CAAC;IAClF,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAExF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACpE,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,MAAM,CAAgB,EAAE,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC3D,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,UAAU,EAAe,CAAC;IAC7D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,iBAAiB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAE3D,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,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CAAC,CAAC,OAA8B,EAAE,EAAE;QAC1C,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,gBAAgB;YAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAChF,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;IAEF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO,CAAC,EAAE;QACR,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,EAAE;YACpC,IAAI,QAAQ;gBAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,QAAQ,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;YACxF,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC,EACD,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,QAAQ,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,CAChG,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,kBAAkB,EAAE;YAClC,oBAAoB,CAAC,OAAO,CAAC,kBAA6B,CAAC,CAAC;YAC5D,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAEjC,OAAO,GAAG,EAAE;gBACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;gBAClC,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9B,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnD,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE;QACzD,IAAI,WAAW,EAAE;YACf,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAAC,EAAiC,EAAE,EAAE;QACxD,IAAI,CAAC,WAAW;YAAE,EAAE,CAAC,cAAc,EAAE,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QACzB,IAAI,GAAG,KAAK,QAAQ,EAAE;YACpB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,aAAa,EAAE,KAAK,EAAE,CAAC;SACxB;IACH,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,KAAoB,EAAE,EAAE;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;YACzC,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAE5C,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,EAAE;gBAC7C,UAAU,CAAC,OAAO,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;gBAClD,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;SACF;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YAC1C,MAAM,aAAa,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAEtE,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,EAAE;gBAC5C,aAAa,EAAE,KAAK,EAAE,CAAC;gBACvB,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;SACF;IACH,CAAC,EACD,CAAC,aAAa,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,CACrD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,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,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,CAAC,MAAM;YAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAC7D,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,aAAa,EAAE,KAAK,EAAE,CAAC;YACvB,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;IAEpC,MAAM,WAAW,GAAG,CAAC,EACnB,OAAO,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,SAAS,IAAI,MAAM,CAAC,CAAC,EAC3B,EAAE,EAAE;QACxB,OAAO,CACL,KAAC,KAAK,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,YACpF,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CACzB,KAAC,cAAc,IAAC,YAAY,EAAE,CAAC,KAAK,CAAC,IAAO,EAAE,CAAC,QAAQ,EAAE,CAAI,CAC9D,CAAC,GACI,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,MAAM,CAAC,WAAW,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,OAAO,KAAK,OAAO,CAAC;IAE3D,OAAO,CACL,8BACE,KAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,WAAW,KAAM,SAAS,YAC9D,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,EAAE,IAAI,EAAE,cAAc,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,kBAC3D,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBAC1C,SAAS,KAAK,CAAC,IAAI,EAAE,EAEjC,GAAG,EAAE,CAAC,EAAqB,EAAE,EAAE;wBAC7B,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;wBAC/B,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;4BAAE,uBAAuB,CAAC,EAAE,CAAC,CAAC;oBACvD,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE;wBACZ,mBAAmB,CAAC,KAAK,CAAC,CAAC;wBAC3B,IAAI,cAAc,EAAE;4BAClB,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC;yBAC9B;6BAAM;4BACL,SAAS,EAAE,CAAC;yBACb;oBACH,CAAC,aAEA,KAAK,CAAC,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,EACvC,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,cAAc,CAAC,IAAI,CACtC,KAAC,gBAAgB,IACf,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EAC5D,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,cAAc,YAE9C,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,GAC/C,CACpB,KAvBI,SAAS,KAAK,CAAC,EAAE,EAAE,CAwBnB,CACR,CAAC,GACG,EACP,KAAC,IAAI,IAAC,GAAG,EAAE,iBAAiB,YAC1B,MAAC,OAAO,IACN,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,WAAW,IAAI,cAAc,EACnC,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAC5C,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,aAAa,EAClB,KAAK,QACL,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE;wBACT;4BACE,IAAI,EAAE,MAAM;4BACZ,OAAO,EAAE;gCACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC;6BACpD;yBACF;qBACF,aAED,KAAC,cAAc,IAAC,YAAY,EAAE,CAAC,cAAc,CAAC,GAAI,EAClD,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,SAAS,YAC3C,CAAC,CAAC,0BAA0B,CAAC,GACvB,IACD,GACL,IACN,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FunctionComponent, useState, useRef, useEffect, useContext, useCallback } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  registerIcon,\n  Flex,\n  ForwardProps,\n  useElement,\n  useOuterEvent,\n  Popover,\n  useI18n,\n  Button,\n  ModalManagerContext,\n  ModalProps,\n  Modal,\n  getFocusables,\n  useBreakpoint,\n  debounce,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StagesProps } from './Stages.types';\nimport StepsContainer from './StepsContainer';\nimport { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = (props: StagesProps) => {\n  const { current, stages, caseTitle, ...restProps } = props;\n  const t = useI18n();\n\n  const [stagesEl, setStagesEl] = useElement<HTMLDivElement>();\n  const [currentStageNameEl, setCurrentStageNameEl] = useElement<HTMLSpanElement>();\n  const [currentStageButtonEl, setCurrentStageButtonEl] = useElement<HTMLButtonElement>();\n\n  const [activeStageIndex, setActiveStageIndex] = useState<number>(0);\n  const activeStageObj = stages[activeStageIndex];\n  const stagesRefs = useRef<HTMLElement[]>([]);\n  const activeStageEl = stagesRefs.current[activeStageIndex];\n  const { create } = useContext(ModalManagerContext);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [showPopover, setShowPopover] = useState(false);\n  const popoverContentRef = useRef(null);\n  const isSmallOrAbove = useBreakpoint('sm');\n  const focusableElements = getFocusables(popoverContentRef);\n\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  const resizeObserver = new ResizeObserver(\n    debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n    }, 100)\n  );\n\n  const theme = useTheme();\n\n  const intersectionObserver = new IntersectionObserver(\n    entries => {\n      if (entries[0].intersectionRatio < 1) {\n        if (stagesEl) setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));\n        setCompressedView(true);\n      }\n    },\n    { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 }\n  );\n\n  useEffect(() => {\n    if (stagesEl && currentStageNameEl) {\n      intersectionObserver.observe(currentStageNameEl as Element);\n      resizeObserver.observe(stagesEl);\n\n      return () => {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }\n  }, [stagesEl, currentStageNameEl, compressedView]);\n\n  useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {\n    if (showPopover) {\n      setShowPopover(false);\n      e.preventDefault();\n    }\n  });\n\n  const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {\n    if (!showPopover) ev.preventDefault();\n  };\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') {\n        setShowPopover(false);\n        activeStageEl?.focus();\n      }\n    },\n    [activeStageEl]\n  );\n\n  const onKeyDownPopover = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && event.shiftKey) {\n        const firstFocusable = focusableElements[0];\n\n        if (document.activeElement === firstFocusable) {\n          stagesRefs.current[activeStageIndex + 1]?.focus();\n          setShowPopover(false);\n        }\n      }\n\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const lastFocusable = focusableElements[focusableElements.length - 1];\n\n        if (document.activeElement === lastFocusable) {\n          activeStageEl?.focus();\n          setShowPopover(false);\n        }\n      }\n    },\n    [activeStageEl, focusableElements, activeStageIndex]\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onKeyDown]);\n\n  useEffect(() => {\n    if (focusableElements.length) focusableElements[0].focus();\n  }, [popoverEl]);\n\n  const [requestDismiss, setRequestDismiss] = useState(false);\n\n  useEffect(() => {\n    if (requestDismiss) {\n      setShowPopover(false);\n      activeStageEl?.focus();\n      setRequestDismiss(false);\n    }\n  }, [activeStageEl, requestDismiss]);\n\n  const RenderModal = ({\n    heading = t('lifecycle', [caseTitle || 'Case'])\n  }: Partial<ModalProps>) => {\n    return (\n      <Modal {...restProps} heading={heading} onRequestDismiss={() => setRequestDismiss(true)}>\n        {stages.map((stage, id) => (\n          <StepsContainer currentStage={[stage]} key={id.toString()} />\n        ))}\n      </Modal>\n    );\n  };\n\n  const openModal = () => {\n    setShowPopover(false);\n    create(RenderModal);\n  };\n\n  const isCurrent = (stageId: string) => current === stageId;\n\n  return (\n    <>\n      <Flex container as={StyledStages} ref={setStagesEl} {...restProps}>\n        {stages.map((stage, index) => (\n          <Flex\n            container={{ justify: 'center', alignItems: 'center' }}\n            as={StyledStage}\n            item={{ grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }}\n            aria-current={isCurrent(stage.id) ? 'step' : undefined}\n            aria-label={`Stage ${stage.name}`}\n            key={`stage-${stage.id}`}\n            ref={(el: HTMLButtonElement) => {\n              stagesRefs.current[index] = el;\n              if (isCurrent(stage.id)) setCurrentStageButtonEl(el);\n            }}\n            onMouseDown={onMouseDown}\n            onClick={() => {\n              setActiveStageIndex(index);\n              if (isSmallOrAbove) {\n                setShowPopover(!showPopover);\n              } else {\n                openModal();\n              }\n            }}\n          >\n            {stage.complete && <Icon name='check' />}\n            {!(stage.complete && compressedView) && (\n              <StyledInnerStage\n                ref={isCurrent(stage.id) ? setCurrentStageNameEl : undefined}\n                ellipsis={isCurrent(stage.id) && compressedView}\n              >\n                {!isCurrent(stage.id) && compressedView ? index + 1 : stage.name}\n              </StyledInnerStage>\n            )}\n          </Flex>\n        ))}\n      </Flex>\n      <Flex ref={popoverContentRef}>\n        <Popover\n          as={StyledStagePopover}\n          show={showPopover && isSmallOrAbove}\n          target={stagesRefs.current[activeStageIndex]}\n          id='id'\n          ref={setPopoverRef}\n          arrow\n          placement='bottom-start'\n          onKeyDown={onKeyDownPopover}\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['bottom-end', 'right', 'left']\n              }\n            }\n          ]}\n        >\n          <StepsContainer currentStage={[activeStageObj]} />\n          <Button variant='secondary' onClick={openModal}>\n            {t('stage_see_full_lifecycle')}\n          </Button>\n        </Popover>\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,YAAY,EACZ,IAAI,EAEJ,UAAU,EACV,aAAa,EACb,OAAO,EACP,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,IAAI,EACJ,MAAM,EACN,QAAQ,EAET,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,kBAAkB,EAClB,YAAY,EACb,MAAM,iBAAiB,CAAC;AAEzB,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAEnC,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,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAC1F,MAAM,eAAe,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAE/D,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,EAAgB,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,UAAU,EAAe,CAAC;IAC7D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,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,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,EAChC,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,EAAE;YAChD,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;wBAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBAChF,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;YACD,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO,CAAC,EAAE;gBACR,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,EAAE;oBACpC,IAAI,SAAS,CAAC,OAAO;wBACnB,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,SAAS,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;oBACrF,iBAAiB,CAAC,IAAI,CAAC,CAAC;iBACzB;YACH,CAAC,EACD;gBACE,IAAI,EAAE,eAAe,CAAC,OAAO;gBAC7B,UAAU,EAAE,QAAQ,OAAO,CAAC,YAAY,CAAC,EAAE;gBAC3C,SAAS,EAAE,CAAC;aACb,CACF,CAAC;YAEF,oBAAoB,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YAElE,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,UAAU,EAAE,CAAC;SAChD;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAErD,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,EAAE,GAAG,EAAE;QAC5D,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,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,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,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,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,EAAE,CAAI,CAAC;YAC5E,YAAY,EAAE,GAAG,EAAE;gBACjB,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBACjC,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;YACnC,CAAC;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,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,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,EAAE,CAAI,CAAC;SAC7E,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,EAAE,IAAI,EAAE,cAAc,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,kBACjD,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBAChC,CAAC,CAAC,oBAAoB,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,EAClE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,cAAc,EAAE;gCAClB,IAAI,SAAS;oCAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;gCACzC,cAAc,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC;6BACrD;iCAAM;gCACL,SAAS,EAAE,CAAC;6BACb;wBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;4BACzB,cAAc,CAAC,KAAK,CAAC,CAAC;4BACtB,oBAAoB,CAAC,KAAK,CAAC,CAAC;4BAC5B,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC,aAAkC,CAAC;wBACjE,CAAC,mBACc,WAAW,IAAI,cAAc,mBAC7B,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,aAEjD,KAAK,CAAC,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,EACxC,CAAC,CAAC,KAAK,CAAC,SAAS,IAAI,cAAc,CAAC,IAAI,CACvC,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,iBAAiB,KAAK,KAAK,IAAI,WAAW,IAAI,cAAc,IAAI,CAC/D,KAAC,kBAAkB,IACjB,MAAM,EAAE,eAAe,CAAC,OAAO,EAC/B,GAAG,EAAE,aAAa,EAClB,KAAK,QACL,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE;4BACT;gCACE,IAAI,EAAE,MAAM;gCACZ,OAAO,EAAE;oCACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC;iCACpD;6BACF;yBACF,EACD,EAAE,EAAE,SAAS,eACF,SAAS,YAEpB,MAAC,IAAI,eACH,KAAC,oBAAoB,cAClB,CAAC,SAAS,CAAC,CAAC,CAAC,CACZ,KAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE;4CACP;gDACE,EAAE,EAAE,OAAO;gDACX,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC;gDAChB,IAAI,EAAE,OAAO;gDACb,OAAO,EAAE,GAAG,EAAE;oDACZ,cAAc,CAAC,KAAK,CAAC,CAAC;oDACtB,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gDACnC,CAAC;6CACF;yCACF,GACD,CACH,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,CACtD,GACoB,EACvB,KAAC,UAAU,cACT,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,SAAS,YAC3C,CAAC,CAAC,2BAA2B,CAAC,GACxB,GACE,IACR,GACY,CACtB,KA5EY,KAAK,CAAC,EAAE,CA6EZ,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  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"]}

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

@@ -3,14 +3,12 @@ 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<"div", 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, {
-    complete: boolean;
+    completed: boolean;
 }, never>;
-export declare const StyledSteps: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInnerStep: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    complete: boolean;
-}, never>;
-export declare const StyledDateTimeDisplay: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, 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":"AAUA,eAAO,MAAM,YAAY,yGAMvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,4GA4LvB,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAM7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAU/B,CAAC;AAIH,eAAO,MAAM,UAAU;cAAyB,OAAO;SA0BrD,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC;AAIF,eAAO,MAAM,eAAe;cAA2B,OAAO;SAmB5D,CAAC;AAIH,eAAO,MAAM,qBAAqB,0GAMhC,CAAC"}
+{"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;SAsCtD,CAAC;AAIH,eAAO,MAAM,oBAAoB,0OAEhC,CAAC;AAIF,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAM7B,CAAC"}