npm - @pega/cosmos-react-work - Versions diffs - 10.0.0-build.1.11 → 10.0.0-build.1.13 - Mend

@pega/cosmos-react-work 10.0.0-build.1.11 → 10.0.0-build.1.13

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

Files changed (29) hide show

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

@@ -1,60 +1,72 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';
-import { remToPx } from 'polished';
-import { Icon, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useDirection, useAfterInitialEffect, VisuallyHiddenText, tryCatch } from '@pega/cosmos-react-core';
+import { Icon, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useDirection, useAfterInitialEffect, VisuallyHiddenText, withTestIds, useTestIds, useElement, useFocusWithin, isInstance } from '@pega/cosmos-react-core';
 import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
+import { getStagesTestIds } from './Stages.test-ids';
 import StageGlimpse from './StageGlimpse';
-import { StyledInnerStage, StyledStageCompleteIcon, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesDescription, StyledStageText } from './Stages.styles';
+import { StyledInnerStage, StyledStageCompleteIcon, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesWrapper, StyledStagesDescription, StyledStageText, StyledSentinel } from './Stages.styles';
 registerIcon(checkIcon);
-const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, readOnly = false, ...restProps }, ref) {
+const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, readOnly = false, testId, ...restProps }, ref) {
     const t = useI18n();
+    const testIds = useTestIds(testId, getStagesTestIds);
     const stagesRef = useConsolidatedRef(ref);
+    const wrapperRef = useRef(null);
+    const startSentinelRef = useRef(null);
+    const endSentinelRef = useRef(null);
     const stagesRefs = useRef(new Map());
-    const [target, setTarget] = useState(null);
+    const [target, setTarget] = useElement(null);
     const [targetStageId, setTargetStageId] = useState(null);
+    const [currentStageBtn, setCurrentStageBtn] = useState(null);
     const { create: createModal } = useModalManager();
     const modalMethods = useRef();
     const [showModal, setShowModal] = useState(false);
     const isSmallOrAbove = useBreakpoint('sm');
-    const [compressedView, setCompressedView] = useState(false);
-    const [minExpandedWidth, setMinExpandedWidth] = useState(0);
     const { rtl } = useDirection();
     useArrows(stagesRef, {
         cycle: false,
         selector: ':scope > li > button:not([aria-expanded])',
         dir: 'left-right',
-        initialFocusElement: stagesRefs.current.get(current) ?? null
-    });
+        initialFocusElement: currentStageBtn
+    }, [currentStageBtn]);
     const dialogId = useUID();
     const descriptionId = useUID();
     useEffect(() => {
-        if (stagesRef.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].isIntersecting) {
-                    setCompressedView(true);
-                    if (entries[0].rootBounds)
-                        setMinExpandedWidth(entries[0].rootBounds.width);
+        const el = stagesRef.current;
+        const wrapper = wrapperRef.current;
+        const startSentinel = startSentinelRef.current;
+        const endSentinel = endSentinelRef.current;
+        if (!el || !wrapper || !startSentinel || !endSentinel)
+            return;
+        const fadeValue = 'var(--stages-fade-width)';
+        const observer = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const visible = entry.isIntersecting;
+                if (entry.target === startSentinel) {
+                    wrapper.style.setProperty('--stages-fade-start', visible ? '0rem' : fadeValue);
+                }
+                else if (entry.target === endSentinel) {
+                    wrapper.style.setProperty('--stages-fade-end', visible ? '0rem' : fadeValue);
                 }
-            }, {
-                root: stagesRef.current,
-                rootMargin: tryCatch(() => remToPx(0.0625), () => '1px'),
-                threshold: 1
-            });
-            if (stagesRef.current.lastElementChild) {
-                intersectionObserver.observe(stagesRef.current.lastElementChild);
-                return () => intersectionObserver.disconnect();
             }
+        }, { root: el, threshold: 0 });
+        observer.observe(startSentinel);
+        observer.observe(endSentinel);
+        return () => observer.disconnect();
+    }, [stages.length]);
+    useEffect(() => {
+        const el = stagesRef.current;
+        const currentBtn = el?.querySelector('[aria-current="step"]');
+        currentBtn?.scrollIntoView({ inline: 'center', behavior: 'auto', block: 'nearest' });
+    }, [current]); // re-center whenever the active stage changes
+    useFocusWithin([stagesRef], focused => {
+        if (focused && isInstance(document.activeElement, HTMLButtonElement)) {
+            document.activeElement.scrollIntoView({
+                inline: 'center',
+                behavior: 'smooth',
+                block: 'nearest'
+            });
         }
-    }, [minExpandedWidth, compressedView, stages.length]);
+    });
     const stagesToLoad = onLoadStage
         ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)
         : [];
@@ -84,60 +96,59 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
             children: renderModalStages()
         });
     }, [stagesToLoad.length]);
-    return (_jsxs(_Fragment, { children: [_jsx(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, dir: rtl ? 'rtl' : 'ltr', "aria-label": t('stages_label'), "aria-describedby": descriptionId, 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);
-                    let stageStatus;
-                    if (stage.completed) {
-                        stageStatus = 'completed';
-                    }
-                    else if (isCurrent) {
-                        stageStatus = 'current';
-                    }
-                    else {
-                        stageStatus = 'pending';
-                    }
-                    return (_jsxs(Fragment, { children: [_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, readOnly: readOnly, children: _jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: {
-                                        grow: compressedView && !isCurrent ? 0 : 1,
-                                        shrink: compressedView && isCurrent ? 1 : 0
-                                    }, status: stageStatus, readOnly: readOnly, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), onClick: (e) => {
-                                        if (isSmallOrAbove) {
-                                            if (hasToLoad)
-                                                onLoadStage?.([stage.id]);
-                                            setTarget(e.currentTarget);
-                                            setTargetStageId(stage.id);
-                                        }
-                                        else {
-                                            openModal();
-                                        }
-                                    }, ref: (el) => {
-                                        if (el) {
-                                            stagesRefs.current.set(stage.id, el);
-                                        }
-                                        else {
-                                            stagesRefs.current.delete(stage.id);
-                                        }
-                                    }, "aria-expanded": target && isSmallOrAbove, "aria-controls": target ? dialogId : undefined, ...(!readOnly && {
-                                        'aria-haspopup': true,
-                                        onClick: (e) => {
-                                            if (isSmallOrAbove) {
-                                                if (hasToLoad)
-                                                    onLoadStage?.([stage.id]);
-                                                setTarget(e.currentTarget);
-                                                setTargetStageId(stage.id);
-                                            }
-                                            else {
-                                                openModal();
-                                            }
-                                        }
-                                    }), children: [stage.completed && _jsx(Icon, { name: 'check' }), (!compressedView || isCurrent || !stage.completed) && (_jsx(StyledInnerStage, { ellipsis: isCurrent && compressedView, children: !isCurrent && compressedView ? index + 1 : stage.name }))] }) }), target && targetStageId === stage.id && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
-                                    setTarget(null);
-                                    setTargetStageId(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));
-                }) }), _jsx(StyledStagesDescription, { id: descriptionId, children: t('stages_description') })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledStagesWrapper, { ref: wrapperRef, "data-testid": testIds.root, children: _jsxs(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, dir: rtl ? 'rtl' : 'ltr', "aria-label": t('stages_label'), "aria-describedby": descriptionId, children: [_jsx(StyledSentinel, { ref: startSentinelRef, "aria-hidden": 'true' }), stages.map(stage => {
+                            const isCurrent = stage.id === current;
+                            let stageStatusText = t(stage.completed ? 'completed' : 'not_started');
+                            if (isCurrent)
+                                stageStatusText = t('current');
+                            const hasToLoad = stagesToLoad.includes(stage.id);
+                            let stageStatus;
+                            if (stage.completed) {
+                                stageStatus = 'completed';
+                            }
+                            else if (isCurrent) {
+                                stageStatus = 'current';
+                            }
+                            else {
+                                stageStatus = 'pending';
+                            }
+                            return (_jsxs(Fragment, { children: [_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, readOnly: readOnly, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: 1, shrink: 0 }, status: stageStatus, readOnly: readOnly, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), ref: (el) => {
+                                                if (el) {
+                                                    stagesRefs.current.set(stage.id, el);
+                                                    if (isCurrent)
+                                                        setCurrentStageBtn(prev => (prev !== el ? el : prev));
+                                                }
+                                                else {
+                                                    stagesRefs.current.delete(stage.id);
+                                                    if (isCurrent)
+                                                        setCurrentStageBtn(null);
+                                                }
+                                            }, "aria-expanded": targetStageId === stage.id && Boolean(target) && isSmallOrAbove
+                                                ? true
+                                                : undefined, "aria-controls": targetStageId === stage.id && target && isSmallOrAbove ? dialogId : undefined, ...(!readOnly && {
+                                                'aria-haspopup': 'dialog',
+                                                onClick: (e) => {
+                                                    if (isSmallOrAbove) {
+                                                        if (hasToLoad)
+                                                            onLoadStage?.([stage.id]);
+                                                        const btn = e.currentTarget;
+                                                        btn.scrollIntoView({
+                                                            inline: 'center',
+                                                            behavior: 'smooth',
+                                                            block: 'nearest'
+                                                        });
+                                                        setTarget(btn);
+                                                        setTargetStageId(stage.id);
+                                                    }
+                                                    else {
+                                                        openModal();
+                                                    }
+                                                }
+                                            }), children: _jsxs(StyledInnerStage, { children: [stage.completed && _jsx(Icon, { name: 'check' }), stage.name] }) }) }), target && targetStageId === stage.id && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { id: dialogId, heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
+                                            setTarget(null);
+                                            setTargetStageId(null);
+                                        }, placement: 'bottom', children: !hasToLoad && (_jsxs(StyledStageGlimpse, { children: [_jsx(StageGlimpse, { stage: stage }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') })] })) }))] }, stage.id));
+                        }), _jsx(StyledSentinel, { ref: endSentinelRef, "aria-hidden": 'true' })] }) }), _jsx(StyledStagesDescription, { id: descriptionId, children: t('stages_description') })] }));
 });
-export default Stages;
+export default withTestIds(Stages, getStagesTestIds);
 //# sourceMappingURL=Stages.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useConsolidatedRef,\n useUID,\n InfoDialog,\n useArrows,\n useDirection,\n useAfterInitialEffect,\n VisuallyHiddenText,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStageCompleteIcon,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesDescription,\n StyledStageText\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n {\n current,\n stages,\n caseTitle,\n onLoadStage,\n readOnly = false,\n ...restProps\n }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const stagesRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n const [target, setTarget] = useState<HTMLButtonElement \| null>(null);\n const [targetStageId, setTargetStageId] = useState<string \| 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 const { rtl } = useDirection();\n\n useArrows(stagesRef, {\n cycle: false,\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right',\n initialFocusElement: stagesRefs.current.get(current) ?? null\n });\n\n const dialogId = useUID();\n const descriptionId = 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: tryCatch(\n () => remToPx(0.0625),\n () => '1px'\n ),\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 renderModalStages = () =>\n stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h3' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\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: renderModalStages(),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n setTargetStageId(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: renderModalStages()\n });\n }, [stagesToLoad.length]);\n\n return (\n <>\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n dir={rtl ? 'rtl' : 'ltr'}\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\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\n const hasToLoad = stagesToLoad.includes(stage.id);\n\n let stageStatus: StageStatus;\n\n if (stage.completed) {\n stageStatus = 'completed';\n } else if (isCurrent) {\n stageStatus = 'current';\n } else {\n stageStatus = 'pending';\n }\n\n return (\n <Fragment key={stage.id}>\n <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }} readOnly={readOnly}>\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 status={stageStatus}\n readOnly={readOnly}\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 setTargetStageId(stage.id);\n } else {\n openModal();\n }\n }}\n ref={(el: HTMLButtonElement \| null) => {\n if (el) {\n stagesRefs.current.set(stage.id, el);\n } else {\n stagesRefs.current.delete(stage.id);\n }\n }}\n aria-expanded={target && isSmallOrAbove}\n aria-controls={target ? dialogId : undefined}\n {...(!readOnly && {\n 'aria-haspopup': true,\n onClick: (e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setTarget(e.currentTarget);\n setTargetStageId(stage.id);\n } else {\n openModal();\n }\n }\n })}\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 </Flex>\n {target && targetStageId === stage.id && isSmallOrAbove && !showModal && (\n <InfoDialog\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n setTargetStageId(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 <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n </>\n );\n});\n\nexport default Stages;\n"]}
1	+ {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n useModalManager,\n useConsolidatedRef,\n useUID,\n InfoDialog,\n useArrows,\n useDirection,\n useAfterInitialEffect,\n VisuallyHiddenText,\n withTestIds,\n useTestIds,\n useElement,\n useFocusWithin,\n isInstance\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport { getStagesTestIds } from './Stages.test-ids';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStageCompleteIcon,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesWrapper,\n StyledStagesDescription,\n StyledStageText,\n StyledSentinel\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n {\n current,\n stages,\n caseTitle,\n onLoadStage,\n readOnly = false,\n testId,\n ...restProps\n }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n const testIds = useTestIds(testId, getStagesTestIds);\n const stagesRef = useConsolidatedRef(ref);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const startSentinelRef = useRef<HTMLLIElement>(null);\n const endSentinelRef = useRef<HTMLLIElement>(null);\n const stagesRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n const [targetStageId, setTargetStageId] = useState<string \| null>(null);\n const [currentStageBtn, setCurrentStageBtn] = 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\n const { rtl } = useDirection();\n\n useArrows(\n stagesRef,\n {\n cycle: false,\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right',\n initialFocusElement: currentStageBtn\n },\n [currentStageBtn]\n );\n\n const dialogId = useUID();\n const descriptionId = useUID();\n\n useEffect(() => {\n const el = stagesRef.current;\n const wrapper = wrapperRef.current;\n const startSentinel = startSentinelRef.current;\n const endSentinel = endSentinelRef.current;\n if (!el \|\| !wrapper \|\| !startSentinel \|\| !endSentinel) return;\n\n const fadeValue = 'var(--stages-fade-width)';\n\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n const visible = entry.isIntersecting;\n if (entry.target === startSentinel) {\n wrapper.style.setProperty('--stages-fade-start', visible ? '0rem' : fadeValue);\n } else if (entry.target === endSentinel) {\n wrapper.style.setProperty('--stages-fade-end', visible ? '0rem' : fadeValue);\n }\n }\n },\n { root: el, threshold: 0 }\n );\n\n observer.observe(startSentinel);\n observer.observe(endSentinel);\n\n return () => observer.disconnect();\n }, [stages.length]);\n\n useEffect(() => {\n const el = stagesRef.current;\n const currentBtn = el?.querySelector<HTMLButtonElement>('[aria-current=\"step\"]');\n currentBtn?.scrollIntoView({ inline: 'center', behavior: 'auto', block: 'nearest' });\n }, [current]); // re-center whenever the active stage changes\n\n useFocusWithin([stagesRef], focused => {\n if (focused && isInstance(document.activeElement, HTMLButtonElement)) {\n document.activeElement.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n }\n });\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const renderModalStages = () =>\n stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h3' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\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: renderModalStages(),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n setTargetStageId(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: renderModalStages()\n });\n }, [stagesToLoad.length]);\n\n return (\n <>\n <StyledStagesWrapper ref={wrapperRef} data-testid={testIds.root}>\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n dir={rtl ? 'rtl' : 'ltr'}\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\n >\n <StyledSentinel ref={startSentinelRef} aria-hidden='true' />\n {stages.map(stage => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n\n const hasToLoad = stagesToLoad.includes(stage.id);\n\n let stageStatus: StageStatus;\n\n if (stage.completed) {\n stageStatus = 'completed';\n } else if (isCurrent) {\n stageStatus = 'current';\n } else {\n stageStatus = 'pending';\n }\n\n return (\n <Fragment key={stage.id}>\n <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }} readOnly={readOnly}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{ grow: 1, shrink: 0 }}\n status={stageStatus}\n readOnly={readOnly}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n ref={(el: HTMLButtonElement \| null) => {\n if (el) {\n stagesRefs.current.set(stage.id, el);\n if (isCurrent) setCurrentStageBtn(prev => (prev !== el ? el : prev));\n } else {\n stagesRefs.current.delete(stage.id);\n if (isCurrent) setCurrentStageBtn(null);\n }\n }}\n aria-expanded={\n targetStageId === stage.id && Boolean(target) && isSmallOrAbove\n ? true\n : undefined\n }\n aria-controls={\n targetStageId === stage.id && target && isSmallOrAbove ? dialogId : undefined\n }\n {...(!readOnly && {\n 'aria-haspopup': 'dialog' as const,\n onClick: (e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n const btn = e.currentTarget;\n btn.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n setTarget(btn);\n setTargetStageId(stage.id);\n } else {\n openModal();\n }\n }\n })}\n >\n <StyledInnerStage>\n {stage.completed && <Icon name='check' />}\n {stage.name}\n </StyledInnerStage>\n </Flex>\n </Flex>\n {target && targetStageId === stage.id && isSmallOrAbove && !showModal && (\n <InfoDialog\n id={dialogId}\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n setTargetStageId(null);\n }}\n placement='bottom'\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 <StyledSentinel ref={endSentinelRef} aria-hidden='true' />\n </Flex>\n </StyledStagesWrapper>\n <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n </>\n );\n});\n\nexport default withTestIds(Stages, getStagesTestIds);\n"]}

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

@@ -1,4 +1,18 @@
+export declare const StyledStagesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledStages: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
+/**
+ * A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.
+ * It is observed by an IntersectionObserver; when it scrolls out of view, the component sets
+ * --stages-fade-start or --stages-fade-end to show a gradient fade indicating more stages
+ * are reachable by scrolling. When it comes back into view the property is reset to 0.
+ *
+ * Sentinel elements carry aria-hidden="true" so they are valid list items semantically.
+ * Because styled-components scopes all CSS to a generated class, the chevron and layout rules
+ * in StyledStageContainer never apply to these elements — they carry a different class.
+ * CSS type-based selectors (:nth-of-type, :nth-last-of-type) in StyledStageContainer are
+ * offset by 1 at each end to skip the sentinels and target only real stage items.
+ */
+export declare const StyledSentinel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 export declare const StyledInnerStage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     ellipsis?: boolean;
 }>> & string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"~~AAqHA~~,eAAO,MAAM,YAAY,~~mOAgBvB~~,CAAC;AAIH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;~~YAW9D~~,CAAC;AAIH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;~~YAwGnB~~,CAAC;AAIF,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAGH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAIF,eAAO,MAAM,oBAAoB;eACpB,OAAO;~~YAqLnB~~,CAAC;AAIF,eAAO,MAAM,oBAAoB,mOAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;YAoBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB;;oMAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}
1	+ {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAgIA,eAAO,MAAM,mBAAmB,6NAiE9B,CAAC;AAIH,eAAO,MAAM,YAAY,mOAmCvB,CAAC;AAIH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,6NAa1B,CAAC;AAIF,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAe9D,CAAC;AAIH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YA8FnB,CAAC;AAIF,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAGH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAIF,eAAO,MAAM,oBAAoB;eACpB,OAAO;YA2MnB,CAAC;AAIF,eAAO,MAAM,oBAAoB,mOAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;YAoBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB;;oMAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}