npm - @pega/cosmos-react-core - Versions diffs - 9.10.1 → 9.12.0 - Mend

@pega/cosmos-react-core 9.10.1 → 9.12.0

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 (40) hide show

package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
-import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { MultiStepFormProps } from './MultiStepForm.types';
 interface FormProgressProps {
     steps: MultiStepFormProps['steps'];
     currentStepId: MultiStepFormProps['currentStepId'];
+    variant?: MultiStepFormProps['variant'];
     showStepNames?: boolean;
 }
-declare const HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps>;
+declare const HorizontalFormProgress: ({ steps, currentStepId, showStepNames, variant, ...restProps }: FormProgressProps & ForwardProps) => import("react/jsx-runtime").JSX.Element;
 export default HorizontalFormProgress;
 //# sourceMappingURL=HorizontalFormProgress.d.ts.map

package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,EAAE,~~iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,~~YAAY,EAAE,MAAM,aAAa,CAAC;~~AAiBhD~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,sBAAsB,~~EAAE~~,~~iBAAiB~~,~~CAAC,~~iBAAiB,GAAG,YAAY,~~CAyM/E~~,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
1	+ {"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAmBhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,sBAAsB,GAAI,gEAM7B,iBAAiB,GAAG,YAAY,4CA2OlC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/MultiStepForm/HorizontalFormProgress.js CHANGED Viewed

@@ -8,27 +8,69 @@ import Text from '../Text';
 import Tooltip from '../Tooltip';
 import Button from '../Button';
 import InfoDialog from '../Dialog/InfoDialog';
-import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress, StyledHorizontalStepText, StyleHorizontalStepMarkers } from './FormProgress.styles';
+import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress, StyledHorizontalBarSegment, StyledHorizontalStepText, StyleHorizontalBarList, StyleHorizontalStepMarkers } from './FormProgress.styles';
 import VerticalFormProgress from './VerticalFormProgress';
 import { useFormProgressOverflow } from './useFormProgressOverflow';
-const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, ...restProps }) => {
+const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, variant = 'dot', ...restProps }) => {
     const t = useI18n();
+    const theme = useTheme();
+    const isBarsMode = variant === 'bar';
     const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement();
     const [showStepsDialog, setShowStepsDialog] = useState(false);
-    const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(steps.length, showStepNames);
+    const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(steps.length, showStepNames, isBarsMode);
     const curIdx = steps.findIndex(step => step.id === currentStepId);
     const curStep = steps[curIdx];
     const fillScale = curIdx / (steps.length - 1);
     const [currentStepEl, setCurrentStepEl] = useElement();
     const [stepEls, setStepEls] = useState({});
     const stepsRef = useRef(null);
-    const theme = useTheme();
     const { rtl } = useDirection();
     let popoverPlacement = 'bottom';
     if (curIdx === 0)
         popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';
     else if (curIdx === steps.length - 1)
         popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';
+    const numberOfSteps = steps.length;
+    const setStepElement = (stepId) => (el) => {
+        setStepEls(curr => {
+            const newEls = { ...curr };
+            if (!el && newEls[stepId]) {
+                delete newEls[stepId];
+                return newEls;
+            }
+            if (el)
+                return { ...newEls, [stepId]: el };
+            return newEls;
+        });
+    };
+    const renderStepName = ({ isCurrent, stepName, onMarkerClick }) => {
+        if (!showStepNames)
+            return null;
+        if (!!onMarkerClick && !isCurrent) {
+            return (_jsx(Button, { variant: 'link', onClick: onMarkerClick, as: StyledHorizontalStepText, tabIndex: -1, children: stepName }));
+        }
+        return (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledHorizontalStepText, children: stepName }));
+    };
+    const renderStepItem = (step, index) => {
+        const isCurrent = index === curIdx;
+        const markerContent = !showStepNames && !isCurrent ? (_jsx(Tooltip, { target: stepEls[step.id], showDelay: 'none', hideDelay: 'short', describeTarget: false, children: step.name })) : null;
+        const commonMarkerProps = {
+            id: step.id,
+            'data-step-marker': '',
+            'aria-label': `${step.name} - ${t('step_num', [index + 1, steps.length])}`,
+            'aria-current': isCurrent ? 'step' : undefined,
+            tabIndex: isCurrent ? 0 : -1,
+            current: isCurrent,
+            completed: step.completed,
+            onClick: step.onMarkerClick,
+            clickable: !!step.onMarkerClick && !isCurrent
+        };
+        return (_jsxs("li", { children: [isBarsMode ? (_jsx(StyledHorizontalBarSegment, { ref: setStepElement(step.id), ...commonMarkerProps, children: markerContent })) : (_jsx(StepMarker, { ref: setStepElement(step.id), depth: step.depth, ...commonMarkerProps, children: markerContent })), renderStepName({
+                    isCurrent,
+                    stepName: step.name,
+                    onMarkerClick: step.onMarkerClick
+                })] }, step.id));
+    };
     useArrows(stepsRef, {
         selector: '[data-step-marker]',
         dir: 'left-right',
@@ -50,7 +92,6 @@ const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, .
             setShowStepsDialog(false);
         }
     }, [stepsAreOverflowing]);
-    const numberOfSteps = steps.length;
     return (_jsxs(StyledFormProgress, { ref: formProgressRef, ...restProps, container: { alignItems: 'center' }, showStepNames: showStepNames, children: [_jsx(CurrentStepPopover, { show: !showStepNames, target: currentStepEl, placement: popoverPlacement, strategy: 'absolute', portal: false, hideOnTargetHidden: true, modifiers: [
                     {
                         name: 'offset',
@@ -79,22 +120,7 @@ const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, .
                             setShowStepsDialog(true);
                         }, children: t('step_num', [curIdx + 1, numberOfSteps]) }), _jsx(Text, { variant: 'h4', children: curStep.name }), stepsDialogButtonEl && showStepsDialog && (_jsx(InfoDialog, { heading: t('steps'), target: stepsDialogButtonEl, onDismiss: () => {
                             setShowStepsDialog(false);
-                        }, placement: 'bottom-start', children: _jsx(VerticalFormProgress, { steps: steps, currentStepId: currentStepId }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { ref: stepsRef, as: StyleHorizontalStepMarkers, container: { justify: 'between', alignItems: 'start' }, item: { grow: 1 }, showStepNames: showStepNames, children: steps.map((step, index) => {
-                            const isCurrent = index === curIdx;
-                            return (_jsxs("li", { children: [_jsx(StepMarker, { ref: (el) => {
-                                            setStepEls(curr => {
-                                                const newEls = { ...curr };
-                                                if (!el && newEls[step.id]) {
-                                                    delete newEls[step.id];
-                                                    return newEls;
-                                                }
-                                                if (el)
-                                                    return { ...newEls, [step.id]: el };
-                                                return newEls;
-                                            });
-                                        }, id: step.id, "data-step-marker": '', "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": isCurrent ? 'step' : undefined, tabIndex: isCurrent ? 0 : -1, current: isCurrent, depth: step.depth, completed: step.completed, onClick: step.onMarkerClick, clickable: !!step.onMarkerClick && !isCurrent, children: !showStepNames && !isCurrent && (_jsx(Tooltip, { target: stepEls[step.id], showDelay: 'none', hideDelay: 'short', describeTarget: false, children: step.name })) }), showStepNames &&
-                                        (!!step.onMarkerClick && !isCurrent ? (_jsx(Button, { variant: 'link', onClick: step.onMarkerClick, as: StyledHorizontalStepText, tabIndex: -1, children: step.name })) : (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledHorizontalStepText, children: step.name })))] }, step.id));
-                        }) }), _jsx(StyledBar, { shifted: showStepNames, children: _jsx(StyledFill, { style: { '--fillScale': fillScale } }) })] }))] }));
+                        }, placement: 'bottom-start', children: _jsx(VerticalFormProgress, { steps: steps, currentStepId: currentStepId, variant: variant }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { ref: stepsRef, as: isBarsMode ? StyleHorizontalBarList : StyleHorizontalStepMarkers, container: { justify: 'between', alignItems: 'start', gap: 1 }, item: { grow: 1 }, showStepNames: showStepNames, children: steps.map(renderStepItem) }), !isBarsMode && (_jsx(StyledBar, { shifted: showStepNames, children: _jsx(StyledFill, { fillScale: fillScale }) }))] }))] }));
 };
 export default HorizontalFormProgress;
 //# sourceMappingURL=HorizontalFormProgress.js.map

package/lib/components/MultiStepForm/HorizontalFormProgress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, CSSProperties } from 'react';\n\nimport { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport InfoDialog from '../Dialog/InfoDialog';\n\nimport {\n CurrentStepPopover,\n StepMarker,\n StyledBar,\n StyledFill,\n StyledFormProgress,\n StyledHorizontalStepText,\n StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n steps,\n currentStepId,\n showStepNames = false,\n ...restProps\n}) => {\n const t = useI18n();\n\n const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n steps.length,\n showStepNames\n );\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n const fillScale = curIdx / (steps.length - 1);\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n const theme = useTheme();\n const { rtl } = useDirection();\n\n let popoverPlacement: 'bottom' \| 'bottom-start' \| 'bottom-end' = 'bottom';\n if (curIdx === 0) popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';\n else if (curIdx === steps.length - 1) popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n dir: 'left-right',\n initialFocusElement: currentStepEl\n });\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n cycle: false,\n dir: 'up-down',\n initialFocusElement: currentStepEl\n });\n\n useEffect(() => {\n if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n setCurrentStepEl(stepEls[curStep.id]);\n }\n }, [Object.keys(stepEls), curStep]);\n\n useEffect(() => {\n if (!stepsAreOverflowing) {\n setShowStepsDialog(false);\n }\n }, [stepsAreOverflowing]);\n\n const numberOfSteps = steps.length;\n\n return (\n <StyledFormProgress\n ref={formProgressRef}\n {...restProps}\n container={{ alignItems: 'center' }}\n showStepNames={showStepNames}\n >\n <CurrentStepPopover\n show={!showStepNames}\n target={currentStepEl}\n placement={popoverPlacement}\n strategy='absolute'\n portal={false}\n hideOnTargetHidden\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n 0,\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n },\n {\n name: 'placeAndContain',\n enabled: false\n },\n {\n name: 'flip',\n enabled: false\n },\n {\n name: 'preventOverflow',\n options: {\n padding: 0\n }\n }\n ]}\n >\n <Text variant='h4'>{curStep.name}</Text>\n </CurrentStepPopover>\n\n {stepsAreOverflowing ? (\n <div>\n <Button\n ref={setStepsDialogButtonEl}\n variant='link'\n onClick={() => {\n setShowStepsDialog(true);\n }}\n >\n {t('step_num', [curIdx + 1, numberOfSteps])}\n </Button>\n <Text variant='h4'>{curStep.name}</Text>\n {stepsDialogButtonEl && showStepsDialog && (\n <InfoDialog\n heading={t('steps')}\n target={stepsDialogButtonEl}\n onDismiss={() => {\n setShowStepsDialog(false);\n }}\n placement='bottom-start'\n >\n <VerticalFormProgress steps={steps} currentStepId={currentStepId} />\n </InfoDialog>\n )}\n </div>\n ) : (\n <>\n <Flex\n ref={stepsRef}\n as={StyleHorizontalStepMarkers}\n container={{ justify: 'between', alignItems: 'start' }}\n item={{ grow: 1 }}\n showStepNames={showStepNames}\n >\n {steps.map((step, index) => {\n const isCurrent = index === curIdx;\n return (\n <li key={step.id}>\n <StepMarker\n ref={(el: HTMLElement \| null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n if (!el && newEls[step.id]) {\n delete newEls[step.id];\n return newEls;\n }\n if (el) return { ...newEls, [step.id]: el };\n return newEls;\n });\n }}\n id={step.id}\n data-step-marker=''\n aria-label={`${step.name} - ${t('step_num', [index + 1, steps.length])}`}\n aria-current={isCurrent ? 'step' : undefined}\n tabIndex={isCurrent ? 0 : -1}\n current={isCurrent}\n depth={step.depth}\n completed={step.completed}\n onClick={step.onMarkerClick}\n clickable={!!step.onMarkerClick && !isCurrent}\n >\n {!showStepNames && !isCurrent && (\n <Tooltip\n target={stepEls[step.id]}\n showDelay='none'\n hideDelay='short'\n describeTarget={false}\n >\n {step.name}\n </Tooltip>\n )}\n </StepMarker>\n {showStepNames &&\n (!!step.onMarkerClick && !isCurrent ? (\n <Button\n variant='link'\n onClick={step.onMarkerClick}\n as={StyledHorizontalStepText}\n tabIndex={-1}\n >\n {step.name}\n </Button>\n ) : (\n <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n {step.name}\n </Text>\n ))}\n </li>\n );\n })}\n </Flex>\n <StyledBar shifted={showStepNames}>\n <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n </StyledBar>\n </>\n )}\n </StyledFormProgress>\n );\n};\n\nexport default HorizontalFormProgress;\n"]}
1	+ {"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport InfoDialog from '../Dialog/InfoDialog';\n\nimport {\n CurrentStepPopover,\n StepMarker,\n StyledBar,\n StyledFill,\n StyledFormProgress,\n StyledHorizontalBarSegment,\n StyledHorizontalStepText,\n StyleHorizontalBarList,\n StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n variant?: MultiStepFormProps['variant'];\n showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress = ({\n steps,\n currentStepId,\n showStepNames = false,\n variant = 'dot',\n ...restProps\n}: FormProgressProps & ForwardProps) => {\n const t = useI18n();\n const theme = useTheme();\n const isBarsMode = variant === 'bar';\n\n const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n steps.length,\n showStepNames,\n isBarsMode\n );\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n const fillScale = curIdx / (steps.length - 1);\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n const { rtl } = useDirection();\n\n let popoverPlacement: 'bottom' \| 'bottom-start' \| 'bottom-end' = 'bottom';\n if (curIdx === 0) popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';\n else if (curIdx === steps.length - 1) popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';\n\n const numberOfSteps = steps.length;\n\n const setStepElement = (stepId: string) => (el: HTMLElement \| null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n\n if (!el && newEls[stepId]) {\n delete newEls[stepId];\n return newEls;\n }\n\n if (el) return { ...newEls, [stepId]: el };\n\n return newEls;\n });\n };\n\n const renderStepName = ({\n isCurrent,\n stepName,\n onMarkerClick\n }: {\n isCurrent: boolean;\n stepName: string;\n onMarkerClick?: MultiStepFormProps['steps'][number]['onMarkerClick'];\n }) => {\n if (!showStepNames) return null;\n\n if (!!onMarkerClick && !isCurrent) {\n return (\n <Button variant='link' onClick={onMarkerClick} as={StyledHorizontalStepText} tabIndex={-1}>\n {stepName}\n </Button>\n );\n }\n\n return (\n <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n {stepName}\n </Text>\n );\n };\n\n const renderStepItem = (step: MultiStepFormProps['steps'][number], index: number) => {\n const isCurrent = index === curIdx;\n const markerContent =\n !showStepNames && !isCurrent ? (\n <Tooltip\n target={stepEls[step.id]}\n showDelay='none'\n hideDelay='short'\n describeTarget={false}\n >\n {step.name}\n </Tooltip>\n ) : null;\n\n const commonMarkerProps = {\n id: step.id,\n 'data-step-marker': '',\n 'aria-label': `${step.name} - ${t('step_num', [index + 1, steps.length])}`,\n 'aria-current': isCurrent ? ('step' as const) : undefined,\n tabIndex: isCurrent ? 0 : -1,\n current: isCurrent,\n completed: step.completed,\n onClick: step.onMarkerClick,\n clickable: !!step.onMarkerClick && !isCurrent\n };\n\n return (\n <li key={step.id}>\n {isBarsMode ? (\n <StyledHorizontalBarSegment ref={setStepElement(step.id)} {...commonMarkerProps}>\n {markerContent}\n </StyledHorizontalBarSegment>\n ) : (\n <StepMarker ref={setStepElement(step.id)} depth={step.depth} {...commonMarkerProps}>\n {markerContent}\n </StepMarker>\n )}\n\n {renderStepName({\n isCurrent,\n stepName: step.name,\n onMarkerClick: step.onMarkerClick\n })}\n </li>\n );\n };\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n dir: 'left-right',\n initialFocusElement: currentStepEl\n });\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n cycle: false,\n dir: 'up-down',\n initialFocusElement: currentStepEl\n });\n\n useEffect(() => {\n if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n setCurrentStepEl(stepEls[curStep.id]);\n }\n }, [Object.keys(stepEls), curStep]);\n\n useEffect(() => {\n if (!stepsAreOverflowing) {\n setShowStepsDialog(false);\n }\n }, [stepsAreOverflowing]);\n\n return (\n <StyledFormProgress\n ref={formProgressRef}\n {...restProps}\n container={{ alignItems: 'center' }}\n showStepNames={showStepNames}\n >\n <CurrentStepPopover\n show={!showStepNames}\n target={currentStepEl}\n placement={popoverPlacement}\n strategy='absolute'\n portal={false}\n hideOnTargetHidden\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n 0,\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n },\n {\n name: 'placeAndContain',\n enabled: false\n },\n {\n name: 'flip',\n enabled: false\n },\n {\n name: 'preventOverflow',\n options: {\n padding: 0\n }\n }\n ]}\n >\n <Text variant='h4'>{curStep.name}</Text>\n </CurrentStepPopover>\n\n {stepsAreOverflowing ? (\n <div>\n <Button\n ref={setStepsDialogButtonEl}\n variant='link'\n onClick={() => {\n setShowStepsDialog(true);\n }}\n >\n {t('step_num', [curIdx + 1, numberOfSteps])}\n </Button>\n <Text variant='h4'>{curStep.name}</Text>\n\n {stepsDialogButtonEl && showStepsDialog && (\n <InfoDialog\n heading={t('steps')}\n target={stepsDialogButtonEl}\n onDismiss={() => {\n setShowStepsDialog(false);\n }}\n placement='bottom-start'\n >\n <VerticalFormProgress steps={steps} currentStepId={currentStepId} variant={variant} />\n </InfoDialog>\n )}\n </div>\n ) : (\n <>\n <Flex\n ref={stepsRef}\n as={isBarsMode ? StyleHorizontalBarList : StyleHorizontalStepMarkers}\n container={{ justify: 'between', alignItems: 'start', gap: 1 }}\n item={{ grow: 1 }}\n showStepNames={showStepNames}\n >\n {steps.map(renderStepItem)}\n </Flex>\n\n {!isBarsMode && (\n <StyledBar shifted={showStepNames}>\n <StyledFill fillScale={fillScale} />\n </StyledBar>\n )}\n </>\n )}\n </StyledFormProgress>\n );\n};\n\nexport default HorizontalFormProgress;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAWnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,eAAO,MAAM,UAAU;cAA2B,OAAO;cAAY,OAAO;YAuB3E,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAAe,CAAC;AAE9C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAIjC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;uIAqBpC,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,~~CAsNtE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAWnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,eAAO,MAAM,UAAU;cAA2B,OAAO;cAAY,OAAO;YAuB3E,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAAe,CAAC;AAE9C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAIjC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;uIAqBpC,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAyNtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -58,7 +58,7 @@ export const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {
   `;
 });
 StyledRequiredFieldLegend.defaultProps = defaultThemeProp;
-const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps, heading, progress, stepIndicator: stepIndicatorProp, showStepNames = false, ...restProps }, ref) {
+const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps, heading, progress, stepIndicator: stepIndicatorProp, showStepNames = false, variant = 'dot', ...restProps }, ref) {
     const showHorizontalStepNames = stepIndicatorProp === 'horizontal' ? showStepNames : undefined;
     const multiStepRef = useConsolidatedRef(ref);
     const headingRef = useRef(null);
@@ -184,7 +184,7 @@ const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps,
                     areas: areaDef,
                     rowGap: 2,
                     colGap: stepIndicator.startsWith('vertical') ? 4 : 2
-                }, inert: progress ? '' : undefined, children: [steps.length > 1 && (_jsxs(Grid, { ref: progressIndicatorRef, item: { area: 'stepIndicator' }, children: [stepIndicator === 'horizontal' && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: HorizontalFormProgress, steps: steps, currentStepId: currentStepId, showStepNames: showHorizontalStepNames })), stepIndicator.startsWith('vertical') && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: VerticalFormProgress, steps: steps, currentStepId: currentStepId })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: previousId !== undefined && previousId !== currentStepId
+                }, inert: progress ? '' : undefined, children: [steps.length > 1 && (_jsxs(Grid, { ref: progressIndicatorRef, item: { area: 'stepIndicator' }, children: [stepIndicator === 'horizontal' && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: HorizontalFormProgress, steps: steps, currentStepId: currentStepId, showStepNames: showHorizontalStepNames, variant: variant })), stepIndicator.startsWith('vertical') && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: VerticalFormProgress, steps: steps, currentStepId: currentStepId, variant: variant })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: previousId !== undefined && previousId !== currentStepId
                                     ? t('step_changed_to_name', [currentStep.name])
                                     : '' })] })), currentStep.banners && _jsx(Grid, { item: { area: 'banners' }, children: currentStep.banners }), currentStep.description && (_jsx(StyledInstructionText, { item: { area: 'description' }, children: _jsx(HTML, { id: descriptionId, as: 'p', content: currentStep.description }) })), _jsx(Grid, { item: { area: 'content' }, as: StyledFormContent, ref: multiStepFormContentRef, children: currentStep.content }), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] }), currentStep.actions && (_jsx(ResponsiveActions, { actionsRef: multiStepActionsRef, actionsEl: currentStep.actions }))] }));
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,qBAAqB,EACrB,MAAM,EACN,OAAO,EACP,WAAW,EACX,aAAa,EACb,QAAQ,EACR,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAGrD,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAE9D,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CACnC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;YACF,UAAU;;;UAGZ,OAAO;QACT,GAAG,CAAA;wCAC6B,KAAK,CAAC,IAAI,CAAC,OAAO;SACjD;;UAEC,OAAO;QACT,GAAG,CAAA;0CAC+B,KAAK,CAAC,IAAI,CAAC,OAAO;SACnD;;;;;sBAKa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIhD,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,MAAM,EACJ,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,MAAM,EAAE,EACpB,EACF,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAErE,OAAO,GAAG,CAAA;iBACK,YAAY;;;;;;;eAOd,MAAM;;GAElB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,aAAa,GAAwD,UAAU,CACnF,SAAS,aAAa,CACpB,EACE,aAAa,EACb,KAAK,EACL,OAAO,EACP,QAAQ,EACR,aAAa,EAAE,iBAAiB,EAChC,aAAa,GAAG,KAAK,EACrB,GAAG,SAAS,EACwB,EACtC,GAA8B;IAE9B,MAAM,uBAAuB,GAAG,iBAAiB,KAAK,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/F,MAAM,YAAY,GAAG,kBAAkB,CAAkB,GAAG,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1D,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7D,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAE,CAAC;IACnE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAC/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EACJ,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC,CAAC;IAE5E,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE;QAC1B,IAAI,iBAAiB,KAAK,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO,MAAM,CAAC;QAEpE,IAAI,CAAC,cAAc;YAAE,OAAO,YAAY,CAAC;QAEzC,OAAO,iBAAiB,IAAI,YAAY,CAAC;IAC3C,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACvB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;YACzB,OAAO;QACT,CAAC;QAED,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAoB,CAAC,OAAO,EAAE,CAAC;YAC7D,MAAM,UAAU,GAAG;gBACjB,GAAG,oBAAoB,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,aAAa,IAAI,CAAC;aAC3D,CAAC;YACnB,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QACzB,CAAC;aAAM,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,0BAA0B,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;aAAM,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAChC,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,iCAAiC,CAAC,CAAC;YACpF,MAAM,SAAS,GAAG,WAAW,EAAE,aAAa,CAAC,+BAA+B,CAAC,CAAC;YAC9E,IAAI,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,CAAC;gBACvC,0BAA0B,CAAC,SAAS,CAAC,CAAC;YACxC,CAAC;iBAAM,CAAC;gBACN,IAAI,KAAyB,CAAC;gBAC9B,IAAI,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE,CAAC;oBAChC,KAAK,GAAG,GAAG,OAAO,MAAM,WAAW,CAAC,IAAI,EAAE,CAAC;gBAC7C,CAAC;qBAAM,IAAI,WAAW,CAAC,IAAI,EAAE,CAAC;oBAC5B,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC;gBAC3B,CAAC;qBAAM,IAAI,OAAO,EAAE,CAAC;oBACnB,KAAK,GAAG,OAAO,CAAC;gBAClB,CAAC;gBAED,0BAA0B,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,2CAA2C;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,aAAa,EAAE,CAAC;YACjC,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,6FAA6F;IAC7F,qBAAqB,CAAC,GAAG,EAAE;QACzB,IACE,mBAAmB,CAAC,OAAO;YAC3B,mBAAmB,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAC5D,CAAC;YACD,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IAE1B,yCAAyC;IACzC,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,QAAQ,aAAa,EAAE,CAAC;QACtB,KAAK,YAAY;YACf,OAAO,IAAI,kBAAkB,CAAC;YAC9B,IAAI,WAAW,CAAC,OAAO;gBAAE,OAAO,IAAI,YAAY,CAAC;YACjD,IAAI,WAAW,CAAC,WAAW;gBAAE,OAAO,IAAI,gBAAgB,CAAC;YACzD,OAAO,IAAI,WAAW,CAAC;YACvB,MAAM,GAAG,gBAAgB,CAAC;YAC1B,MAAM;QACR,KAAK,UAAU;YACb,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACxB,OAAO,IAAI,0BAA0B,CAAC;gBACtC,MAAM,IAAI,OAAO,CAAC;YACpB,CAAC;YACD,IAAI,WAAW,CAAC,WAAW,EAAE,CAAC;gBAC5B,OAAO,IAAI,8BAA8B,CAAC;gBAC1C,MAAM,IAAI,OAAO,CAAC;YACpB,CAAC;YACD,OAAO,IAAI,yBAAyB,CAAC;YACrC,MAAM,IAAI,kBAAkB,CAAC;YAC7B,MAAM,GAAG,cAAc,YAAY,CAAC,EAAE,QAAQ,CAAC;YAC/C,MAAM;QACR,KAAK,gBAAgB;YACnB,IAAI,WAAW,CAAC,OAAO;gBAAE,OAAO,IAAI,0BAA0B,CAAC;YAC/D,IAAI,WAAW,CAAC,WAAW;gBAAE,OAAO,IAAI,8BAA8B,CAAC;YACvE,OAAO,IAAI,yBAAyB,CAAC;YACrC,MAAM,GAAG,oDAAoD,CAAC;YAC9D,MAAM;QACR;YACE,IAAI,WAAW,CAAC,OAAO;gBAAE,OAAO,IAAI,YAAY,CAAC;YACjD,IAAI,WAAW,CAAC,WAAW;gBAAE,OAAO,IAAI,gBAAgB,CAAC;YACzD,OAAO,IAAI,WAAW,CAAC;YACvB,MAAM,GAAG,gBAAgB,CAAC;IAC9B,CAAC;IAED,OAAO,CACL,MAAC,UAAU,IACT,GAAG,EAAE,YAAY,KACb,SAAS,qBACI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,sBAC9B,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACrE,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,OAAO,aAE7B,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC/C,OAAO,GACH,CACR,EAED,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,OAAO;oBACd,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACrD,EACD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAE/B,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,MAAC,IAAI,IAAC,GAAG,EAAE,oBAAoB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,aAC7D,aAAa,KAAK,YAAY,IAAI,CACjC,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAC/B,EAAE,EAAE,sBAAsB,EAC1B,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,uBAAuB,GACtC,CACH,EACA,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CACvC,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAC/B,EAAE,EAAE,oBAAoB,EACxB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,GAC5B,CACH,EACD,KAAC,kBAAkB,iBAAW,QAAQ,YACnC,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,aAAa;oCACvD,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oCAC/C,CAAC,CAAC,EAAE,GACa,IAChB,CACR,EAEA,WAAW,CAAC,OAAO,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAAG,WAAW,CAAC,OAAO,GAAQ,EAEpF,WAAW,CAAC,WAAW,IAAI,CAC1B,KAAC,qBAAqB,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,YAClD,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,CAAC,WAAW,GAAI,GAC9C,CACzB,EAED,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAE,uBAAuB,YACjF,WAAW,CAAC,OAAO,GACf,EAEP,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAC5D,IACG,EACN,WAAW,CAAC,OAAO,IAAI,CACtB,KAAC,iBAAiB,IAAC,UAAU,EAAE,mBAAmB,EAAE,SAAS,EAAE,WAAW,CAAC,OAAO,GAAI,CACvF,IACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useAfterInitialEffect,\n useUID,\n useI18n,\n usePrevious,\n useBreakpoint,\n useTheme,\n useConsolidatedRef,\n useConfiguration\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { focusNonInteractiveElement, isInstance } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport ResponsiveActions from '../ResponsiveActions';\n\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n ({ actions, heading, theme }) => {\n return css`\n & > ${StyledGrid} {\n position: relative;\n\n ${actions &&\n css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `}\n\n ${heading &&\n css`\n padding-block-start: calc(2 * ${theme.base.spacing});\n `}\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledInstructionText = styled(Grid)`\n /* Prevent instruction text from contributing to modal width calculation /\n width: 0;\n min-width: 100%;\n`;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nconst MultiStepForm: ForwardRefForwardPropsComponent<MultiStepFormProps> = forwardRef(\n function MultiStepForm(\n {\n currentStepId,\n steps,\n heading,\n progress,\n stepIndicator: stepIndicatorProp,\n showStepNames = false,\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) {\n const showHorizontalStepNames = stepIndicatorProp === 'horizontal' ? showStepNames : undefined;\n\n const multiStepRef = useConsolidatedRef<HTMLFormElement>(ref);\n const headingRef = useRef<HTMLHeadingElement>(null);\n const progressIndicatorRef = useRef<HTMLDivElement>(null);\n const multiStepFormContentRef = useRef<HTMLDivElement>(null);\n const multiStepActionsRef = useRef<HTMLDivElement>(null);\n\n const { loadedRef } = useConfiguration();\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: multiStepRef });\n\n const stepIndicator = (() => {\n if (stepIndicatorProp === 'none' \|\| steps.length < 2) return 'none';\n\n if (!isSmallOrAbove) return 'horizontal';\n\n return stepIndicatorProp ?? 'horizontal';\n })();\n\n const setFocus = () => {\n if (!loadedRef.current) {\n loadedRef.current = true;\n return;\n }\n\n if (progress) return;\n\n if (stepIndicator !== 'none' && progressIndicatorRef.current) {\n const focusables = [\n ...progressIndicatorRef.current.querySelectorAll(`[id=\"${currentStepId}\"]`)\n ] as HTMLElement[];\n focusables[0]?.focus();\n } else if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current);\n } else if (multiStepRef.current) {\n const containerEl = multiStepRef.current.closest('[data-focusable-form-container]');\n const headingEl = containerEl?.querySelector('[data-focusable-form-heading]');\n if (isInstance(headingEl, HTMLElement)) {\n focusNonInteractiveElement(headingEl);\n } else {\n let label: string \| undefined;\n if (heading && currentStep.name) {\n label = `${heading} - ${currentStep.name}`;\n } else if (currentStep.name) {\n label = currentStep.name;\n } else if (heading) {\n label = heading;\n }\n\n focusNonInteractiveElement(multiStepRef.current, label);\n }\n }\n };\n\n // Set focus if the current step id updates\n useEffect(() => {\n if (previousId !== currentStepId) {\n setFocus();\n }\n }, [currentStepId, previousId]);\n\n // Set focus if the form content updates while focus is within the actions region of the form\n useAfterInitialEffect(() => {\n if (\n multiStepActionsRef.current &&\n multiStepActionsRef.current.contains(document.activeElement)\n ) {\n setFocus();\n }\n }, [currentStep.content]);\n\n // Set focus if a progress state resolves\n useAfterInitialEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n let areaDef = '';\n let rowDef = '';\n let colDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n areaDef += '\"stepIndicator\" ';\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n colDef = 'minmax(0, 1fr)';\n break;\n case 'vertical':\n if (currentStep.banners) {\n areaDef += '\"banners stepIndicator\" ';\n rowDef += 'auto ';\n }\n if (currentStep.description) {\n areaDef += '\"description stepIndicator\" ';\n rowDef += 'auto ';\n }\n areaDef += '\"content stepIndicator\"';\n rowDef += 'minmax(0px, 1fr)';\n colDef = `2fr minmax(${contentWidth.xs}, 1fr)`;\n break;\n case 'vertical-start':\n if (currentStep.banners) areaDef += '\"stepIndicator banners\" ';\n if (currentStep.description) areaDef += '\"stepIndicator description\" ';\n areaDef += '\"stepIndicator content\"';\n colDef = 'fit-content(clamp(10ch, calc(100% / 3), 40ch)) 2fr';\n break;\n default:\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n colDef = 'minmax(0, 1fr)';\n }\n\n return (\n <StyledForm\n ref={multiStepRef}\n {...restProps}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n heading={!!heading}\n actions={!!currentStep.actions}\n >\n {heading && (\n <Text ref={headingRef} id={headingId} variant='h3'>\n {heading}\n </Text>\n )}\n\n <Grid\n container={{\n cols: colDef,\n rows: rowDef,\n areas: areaDef,\n rowGap: 2,\n colGap: stepIndicator.startsWith('vertical') ? 4 : 2\n }}\n inert={progress ? '' : undefined}\n >\n {steps.length > 1 && (\n <Grid ref={progressIndicatorRef} item={{ area: 'stepIndicator' }}>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n showStepNames={showHorizontalStepNames}\n />\n )}\n {stepIndicator.startsWith('vertical') && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </Grid>\n )}\n\n {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n {currentStep.description && (\n <StyledInstructionText item={{ area: 'description' }}>\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n </StyledInstructionText>\n )}\n\n <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n {currentStep.content}\n </Grid>\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Grid>\n {currentStep.actions && (\n <ResponsiveActions actionsRef={multiStepActionsRef} actionsEl={currentStep.actions} />\n )}\n </StyledForm>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}
1	+ {"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useAfterInitialEffect,\n useUID,\n useI18n,\n usePrevious,\n useBreakpoint,\n useTheme,\n useConsolidatedRef,\n useConfiguration\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { focusNonInteractiveElement, isInstance } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport ResponsiveActions from '../ResponsiveActions';\n\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n ({ actions, heading, theme }) => {\n return css`\n & > ${StyledGrid} {\n position: relative;\n\n ${actions &&\n css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `}\n\n ${heading &&\n css`\n padding-block-start: calc(2 * ${theme.base.spacing});\n `}\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledInstructionText = styled(Grid)`\n /* Prevent instruction text from contributing to modal width calculation /\n width: 0;\n min-width: 100%;\n`;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nconst MultiStepForm: ForwardRefForwardPropsComponent<MultiStepFormProps> = forwardRef(\n function MultiStepForm(\n {\n currentStepId,\n steps,\n heading,\n progress,\n stepIndicator: stepIndicatorProp,\n showStepNames = false,\n variant = 'dot',\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) {\n const showHorizontalStepNames = stepIndicatorProp === 'horizontal' ? showStepNames : undefined;\n\n const multiStepRef = useConsolidatedRef<HTMLFormElement>(ref);\n const headingRef = useRef<HTMLHeadingElement>(null);\n const progressIndicatorRef = useRef<HTMLDivElement>(null);\n const multiStepFormContentRef = useRef<HTMLDivElement>(null);\n const multiStepActionsRef = useRef<HTMLDivElement>(null);\n\n const { loadedRef } = useConfiguration();\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: multiStepRef });\n\n const stepIndicator = (() => {\n if (stepIndicatorProp === 'none' \|\| steps.length < 2) return 'none';\n\n if (!isSmallOrAbove) return 'horizontal';\n\n return stepIndicatorProp ?? 'horizontal';\n })();\n\n const setFocus = () => {\n if (!loadedRef.current) {\n loadedRef.current = true;\n return;\n }\n\n if (progress) return;\n\n if (stepIndicator !== 'none' && progressIndicatorRef.current) {\n const focusables = [\n ...progressIndicatorRef.current.querySelectorAll(`[id=\"${currentStepId}\"]`)\n ] as HTMLElement[];\n focusables[0]?.focus();\n } else if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current);\n } else if (multiStepRef.current) {\n const containerEl = multiStepRef.current.closest('[data-focusable-form-container]');\n const headingEl = containerEl?.querySelector('[data-focusable-form-heading]');\n if (isInstance(headingEl, HTMLElement)) {\n focusNonInteractiveElement(headingEl);\n } else {\n let label: string \| undefined;\n if (heading && currentStep.name) {\n label = `${heading} - ${currentStep.name}`;\n } else if (currentStep.name) {\n label = currentStep.name;\n } else if (heading) {\n label = heading;\n }\n\n focusNonInteractiveElement(multiStepRef.current, label);\n }\n }\n };\n\n // Set focus if the current step id updates\n useEffect(() => {\n if (previousId !== currentStepId) {\n setFocus();\n }\n }, [currentStepId, previousId]);\n\n // Set focus if the form content updates while focus is within the actions region of the form\n useAfterInitialEffect(() => {\n if (\n multiStepActionsRef.current &&\n multiStepActionsRef.current.contains(document.activeElement)\n ) {\n setFocus();\n }\n }, [currentStep.content]);\n\n // Set focus if a progress state resolves\n useAfterInitialEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n let areaDef = '';\n let rowDef = '';\n let colDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n areaDef += '\"stepIndicator\" ';\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n colDef = 'minmax(0, 1fr)';\n break;\n case 'vertical':\n if (currentStep.banners) {\n areaDef += '\"banners stepIndicator\" ';\n rowDef += 'auto ';\n }\n if (currentStep.description) {\n areaDef += '\"description stepIndicator\" ';\n rowDef += 'auto ';\n }\n areaDef += '\"content stepIndicator\"';\n rowDef += 'minmax(0px, 1fr)';\n colDef = `2fr minmax(${contentWidth.xs}, 1fr)`;\n break;\n case 'vertical-start':\n if (currentStep.banners) areaDef += '\"stepIndicator banners\" ';\n if (currentStep.description) areaDef += '\"stepIndicator description\" ';\n areaDef += '\"stepIndicator content\"';\n colDef = 'fit-content(clamp(10ch, calc(100% / 3), 40ch)) 2fr';\n break;\n default:\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n colDef = 'minmax(0, 1fr)';\n }\n\n return (\n <StyledForm\n ref={multiStepRef}\n {...restProps}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n heading={!!heading}\n actions={!!currentStep.actions}\n >\n {heading && (\n <Text ref={headingRef} id={headingId} variant='h3'>\n {heading}\n </Text>\n )}\n\n <Grid\n container={{\n cols: colDef,\n rows: rowDef,\n areas: areaDef,\n rowGap: 2,\n colGap: stepIndicator.startsWith('vertical') ? 4 : 2\n }}\n inert={progress ? '' : undefined}\n >\n {steps.length > 1 && (\n <Grid ref={progressIndicatorRef} item={{ area: 'stepIndicator' }}>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n showStepNames={showHorizontalStepNames}\n variant={variant}\n />\n )}\n {stepIndicator.startsWith('vertical') && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n variant={variant}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </Grid>\n )}\n\n {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n {currentStep.description && (\n <StyledInstructionText item={{ area: 'description' }}>\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n </StyledInstructionText>\n )}\n\n <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n {currentStep.content}\n </Grid>\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Grid>\n {currentStep.actions && (\n <ResponsiveActions actionsRef={multiStepActionsRef} actionsEl={currentStep.actions} />\n )}\n </StyledForm>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}

package/lib/components/MultiStepForm/MultiStepForm.types.d.ts CHANGED Viewed

@@ -52,6 +52,11 @@ interface BaseMultiStepFormProps {
     progress?: BaseFormProps['progress'];
     /** The heading of the form. */
     heading?: BaseFormProps['heading'];
+    /**
+     * The visual style of the step indicator.
+     * @default 'dot'
+     */
+    variant?: 'dot' | 'bar';
     /** Ref forwarded to the form element. */
     ref?: BaseFormProps['ref'];
 }

package/lib/components/MultiStepForm/MultiStepForm.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepForm.types.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,IAAI;IACnB,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,qCAAqC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACd,oEAAoE;IACpE,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,sEAAsE;IACtE,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,UAAU,sBAAsB;IAC9B,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,yCAAyC;IACzC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,CACI;IACE,qDAAqD;IACrD,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GACD;IACE,wCAAwC;IACxC,aAAa,EAAE,UAAU,GAAG,gBAAgB,GAAG,MAAM,CAAC;IACtD,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CACJ,CAAC"}
1	+ {"version":3,"file":"MultiStepForm.types.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,IAAI;IACnB,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,qCAAqC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACd,oEAAoE;IACpE,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,sEAAsE;IACtE,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,UAAU,sBAAsB;IAC9B,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACxB,yCAAyC;IACzC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,CACI;IACE,qDAAqD;IACrD,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GACD;IACE,wCAAwC;IACxC,aAAa,EAAE,UAAU,GAAG,gBAAgB,GAAG,MAAM,CAAC;IACtD,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CACJ,CAAC"}

package/lib/components/MultiStepForm/MultiStepForm.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepForm.types.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref, MouseEventHandler } from 'react';\n\nimport type { BaseProps } from '../../types';\nimport type { ProgressProps } from '../Progress';\n\nexport interface BaseFormProps extends BaseProps {\n /** Primary content area. /\n content: ReactNode;\n /* Region for Form Actions. /\n actions?: ReactNode;\n /* If there is a progress state either on load, or after submit, you must indicate as such. A custom message is supported as well. /\n progress?: boolean \| ProgressProps['message'];\n /* Region for Banners above the Form. /\n banners?: ReactNode;\n /* A description of the form to be displayed above the controls. /\n description?: string;\n /* The heading of the form. /\n heading?: string;\n /* Ref forwarded to the form element. /\n ref?: Ref<HTMLFormElement>;\n}\n\nexport interface Step {\n /* The id that is referenced by the Multi Step currentStepId prop. /\n id: string;\n /* The displayed name of the step. /\n name: string;\n /* A set of Action Buttons to render for the step. /\n actions?: BaseFormProps['actions'];\n /* Banners to render for the step /\n banners?: BaseFormProps['banners'];\n /* Content to render for the step. /\n content?: BaseFormProps['content'];\n /\n Indicates whether the step has been completed\n * @default false\n /\n completed?: boolean;\n /\n Determines the size of the step indicator. Depth 0 is larger than depth 1.\n * @default 0\n /\n depth?: 0 \| 1;\n /* A description of the form to be displayed above the controls. /\n description?: BaseFormProps['description'];\n /* Callback function that is called when a step marker is clicked. /\n onMarkerClick?: MouseEventHandler;\n}\n\ninterface BaseMultiStepFormProps {\n /* Sets the current step. /\n currentStepId: string;\n /* Flat array of objects describing each step. /\n steps: Step[];\n /* Progress state for the form. /\n progress?: BaseFormProps['progress'];\n /* The heading of the form. /\n heading?: BaseFormProps['heading'];\n /* Ref forwarded to the form element. /\n ref?: BaseFormProps['ref'];\n}\n\nexport type MultiStepFormProps = BaseMultiStepFormProps &\n (\n \| {\n /* MultiStepForm step indicator type - horizontal /\n stepIndicator?: 'horizontal';\n /\n Whether to show all step names in the horizontal step indicator.\n * @default false\n /\n showStepNames?: boolean;\n }\n \| {\n /* MultiStepForm step indicator type */\n stepIndicator: 'vertical' \| 'vertical-start' \| 'none';\n showStepNames?: never;\n }\n );\n"]}
1	+ {"version":3,"file":"MultiStepForm.types.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref, MouseEventHandler } from 'react';\n\nimport type { BaseProps } from '../../types';\nimport type { ProgressProps } from '../Progress';\n\nexport interface BaseFormProps extends BaseProps {\n /** Primary content area. /\n content: ReactNode;\n /* Region for Form Actions. /\n actions?: ReactNode;\n /* If there is a progress state either on load, or after submit, you must indicate as such. A custom message is supported as well. /\n progress?: boolean \| ProgressProps['message'];\n /* Region for Banners above the Form. /\n banners?: ReactNode;\n /* A description of the form to be displayed above the controls. /\n description?: string;\n /* The heading of the form. /\n heading?: string;\n /* Ref forwarded to the form element. /\n ref?: Ref<HTMLFormElement>;\n}\n\nexport interface Step {\n /* The id that is referenced by the Multi Step currentStepId prop. /\n id: string;\n /* The displayed name of the step. /\n name: string;\n /* A set of Action Buttons to render for the step. /\n actions?: BaseFormProps['actions'];\n /* Banners to render for the step /\n banners?: BaseFormProps['banners'];\n /* Content to render for the step. /\n content?: BaseFormProps['content'];\n /\n Indicates whether the step has been completed\n * @default false\n /\n completed?: boolean;\n /\n Determines the size of the step indicator. Depth 0 is larger than depth 1.\n * @default 0\n /\n depth?: 0 \| 1;\n /* A description of the form to be displayed above the controls. /\n description?: BaseFormProps['description'];\n /* Callback function that is called when a step marker is clicked. /\n onMarkerClick?: MouseEventHandler;\n}\n\ninterface BaseMultiStepFormProps {\n /* Sets the current step. /\n currentStepId: string;\n /* Flat array of objects describing each step. /\n steps: Step[];\n /* Progress state for the form. /\n progress?: BaseFormProps['progress'];\n /* The heading of the form. /\n heading?: BaseFormProps['heading'];\n /\n The visual style of the step indicator.\n * @default 'dot'\n /\n variant?: 'dot' \| 'bar';\n /* Ref forwarded to the form element. /\n ref?: BaseFormProps['ref'];\n}\n\nexport type MultiStepFormProps = BaseMultiStepFormProps &\n (\n \| {\n /* MultiStepForm step indicator type - horizontal /\n stepIndicator?: 'horizontal';\n /\n Whether to show all step names in the horizontal step indicator.\n * @default false\n /\n showStepNames?: boolean;\n }\n \| {\n /* MultiStepForm step indicator type */\n stepIndicator: 'vertical' \| 'vertical-start' \| 'none';\n showStepNames?: never;\n }\n );\n"]}

package/lib/components/MultiStepForm/VerticalFormProgress.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { MultiStepFormProps } from './MultiStepForm.types';
 interface FormProgressProps {
     steps: MultiStepFormProps['steps'];
     currentStepId: MultiStepFormProps['currentStepId'];
+    variant?: MultiStepFormProps['variant'];
 }
-declare const VerticalFormProgress: FunctionComponent<FormProgressProps & ForwardProps>;
+declare const VerticalFormProgress: ({ steps, currentStepId, variant, ...restProps }: FormProgressProps & ForwardProps) => import("react/jsx-runtime").JSX.Element;
 export default VerticalFormProgress;
 //# sourceMappingURL=VerticalFormProgress.d.ts.map

package/lib/components/MultiStepForm/VerticalFormProgress.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,~~iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,~~YAAY,EAAE,MAAM,aAAa,CAAC;~~AAahD~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;~~CACpD~~;AAED,QAAA,MAAM,oBAAoB,~~EAAE~~,~~iBAAiB~~,~~CAAC,~~iBAAiB,GAAG,YAAY,~~CA4F7E~~,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
1	+ {"version":3,"file":"VerticalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAehD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,QAAA,MAAM,oBAAoB,GAAI,iDAK3B,iBAAiB,GAAG,YAAY,4CA+HlC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/MultiStepForm/VerticalFormProgress.js CHANGED Viewed

@@ -5,14 +5,56 @@ import Text from '../Text';
 import { useArrows, useElement, useI18n } from '../../hooks';
 import Button from '../Button';
 import Flex from '../Flex';
-import { StepMarker, StyledBulletWrapper, StyledStepText, StyledVerticalStepMarkers } from './FormProgress.styles';
-const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
+import { StepMarker, StyledBulletWrapper, StyledStepText, StyledVerticalBarSegment, StyledVerticalBarWrapper, StyledVerticalStepMarkers } from './FormProgress.styles';
+const VerticalFormProgress = ({ steps, currentStepId, variant = 'dot', ...restProps }) => {
     const t = useI18n();
+    const isBarsMode = variant === 'bar';
     const curIdx = steps.findIndex(step => step.id === currentStepId);
     const curStep = steps[curIdx];
     const [currentStepEl, setCurrentStepEl] = useElement();
     const [stepEls, setStepEls] = useState({});
     const stepsRef = useRef(null);
+    const setStepElement = (stepId) => (el) => {
+        setStepEls(curr => {
+            const newEls = { ...curr };
+            if (!el && newEls[stepId]) {
+                delete newEls[stepId];
+                return newEls;
+            }
+            if (el)
+                return { ...newEls, [stepId]: el };
+            return newEls;
+        });
+    };
+    const renderStepName = ({ isCurrent, stepName, onMarkerClick }) => {
+        if (!!onMarkerClick && !isCurrent) {
+            return (_jsx(Button, { variant: 'link', onClick: onMarkerClick, as: StyledStepText, tabIndex: -1, children: stepName }));
+        }
+        return (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledStepText, children: stepName }));
+    };
+    const renderStepItem = (step, index) => {
+        const isCurrent = index === curIdx;
+        const isPrior = index < curIdx;
+        const commonMarkerProps = {
+            ref: setStepElement(step.id),
+            id: step.id,
+            'aria-label': `${step.name} - ${t('step_num', [index + 1, steps.length])}`,
+            'aria-current': isCurrent ? 'step' : undefined,
+            tabIndex: isCurrent ? 0 : -1,
+            current: isCurrent,
+            completed: step.completed,
+            onClick: step.onMarkerClick,
+            clickable: !!step.onMarkerClick && !isCurrent
+        };
+        return (_jsxs(Grid, { as: 'li', container: {
+                cols: '2rem minmax(0, 1fr)',
+                colGap: 1
+            }, children: [isBarsMode ? (_jsx(Flex, { container: { direction: 'column', alignItems: 'center' }, as: StyledVerticalBarWrapper, children: _jsx(StyledVerticalBarSegment, { ...commonMarkerProps }) })) : (_jsx(Flex, { container: { alignItems: 'center', justify: 'center' }, as: StyledBulletWrapper, hasNext: index !== steps.length - 1, prior: isPrior, children: _jsx(StepMarker, { prior: isPrior, depth: step.depth, ...commonMarkerProps }) })), renderStepName({
+                    isCurrent,
+                    stepName: step.name,
+                    onMarkerClick: step.onMarkerClick
+                })] }, step.id));
+    };
     useArrows(stepsRef, {
         selector: 'button[aria-label]',
         cycle: false,
@@ -30,24 +72,7 @@ const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
             setCurrentStepEl(stepEls[curStep.id]);
         }
     }, [Object.keys(stepEls), curStep]);
-    return (_jsx(StyledVerticalStepMarkers, { ref: stepsRef, ...restProps, children: steps.map((step, index) => {
-            const isCurrent = index === curIdx;
-            return (_jsxs(Grid, { as: 'li', container: {
-                    cols: '2rem minmax(0, 1fr)',
-                    colGap: 1
-                }, children: [_jsx(Flex, { container: { alignItems: 'center', justify: 'center' }, as: StyledBulletWrapper, hasNext: index !== steps.length - 1, prior: index < curIdx, children: _jsx(StepMarker, { ref: (el) => {
-                                setStepEls(curr => {
-                                    const newEls = { ...curr };
-                                    if (!el && newEls[step.id]) {
-                                        delete newEls[step.id];
-                                        return newEls;
-                                    }
-                                    if (el)
-                                        return { ...newEls, [step.id]: el };
-                                    return newEls;
-                                });
-                            }, id: step.id, "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": isCurrent ? 'step' : undefined, tabIndex: isCurrent ? 0 : -1, current: isCurrent, completed: step.completed, prior: index < curIdx, depth: step.depth, onClick: step.onMarkerClick, clickable: !!step.onMarkerClick && !isCurrent }) }), !!step.onMarkerClick && !isCurrent ? (_jsx(Button, { variant: 'link', onClick: step.onMarkerClick, as: StyledStepText, tabIndex: -1, children: step.name })) : (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledStepText, children: step.name }))] }, step.id));
-        }) }));
+    return (_jsx(StyledVerticalStepMarkers, { ref: stepsRef, ...restProps, children: steps.map(renderStepItem) }));
 };
 export default VerticalFormProgress;
 //# sourceMappingURL=VerticalFormProgress.js.map

package/lib/components/MultiStepForm/VerticalFormProgress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAIpD~~,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EACL,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EAC1B,MAAM,uBAAuB,CAAC;~~AAQ~~/B,MAAM,oBAAoB,~~GAAwD~~,CAAC,~~EACjF~~,KAAK,EACL,aAAa,EACb,GAAG,SAAS,~~EACb~~,EAAE,EAAE;~~IACH~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;~~IAEpB~~,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE9B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,EAAE,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA8B,EAAE,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE9B,~~SAAS~~,CAAC,~~QAAQ~~,EAAE~~;QAClB~~,~~QAAQ,~~EAAE,~~oBAAoB;QAC9B~~,~~KAAK~~,~~EAAE~~,~~KAAK;QACZ,GAAG,~~EAAE,~~YAAY;QACjB,mBAAmB,~~EAAE~~,aAAa~~;~~KACnC~~,~~CAAC~~,CAAC~~;IAEH~~,~~SAAS~~,CAAC,~~QAAQ,~~EAAE;~~QAClB~~,~~QAAQ~~,~~EAAE~~,~~oBAAoB;QAC9B~~,~~KAAK,~~EAAE,~~KAAK;QACZ,~~GAAG,EAAE,~~SAAS~~;~~QACd~~,~~mBAAmB~~,EAAE,~~aAAa;KACnC~~,~~CAAC~~,CAAC~~;IAEH~~,~~SAAS~~,CAAC,~~GAAG~~,~~EAAE~~;~~QACb~~,~~IAAI,~~OAAO,CAAC,~~OAAO~~,CAAC,~~EAAE,~~CAAC,~~IAAI,~~OAAO,CAAC,~~OAAO,~~CAAC,EAAE,~~CAAC~~,~~KAAK~~,~~aAAa~~,EAAE,CAAC~~;YACjE~~,~~gBAAgB~~,CAAC,~~OAAO~~,CAAC,OAAO,~~CAAC~~,~~EAAE,~~CAAC,CAAC,CAAC~~;QACxC~~,CAAC;~~IACH~~,CAAC,~~EAAE,~~CAAC,MAAM,~~CAAC~~,~~IAAI~~,CAAC,~~OAAO~~,~~CAAC~~,EAAE,~~OAAO~~,CAAC,CAAC,CAAC;~~IAEpC~~,OAAO,CACL,KAAC,~~yBAAyB~~,IAAC,~~GAAG~~,~~EAAE~~,~~QAAQ~~,~~KAAM~~,~~SAAS~~,~~YACpD~~,~~KAAK~~,~~CAAC~~,~~GAAG~~,~~CAAC~~,~~CAAC~~,~~IAAI,~~EAAE,~~KAAK~~,EAAE,~~EAAE;YACzB~~,~~MAAM~~,~~SAAS~~,~~GAAG~~,~~KAAK~~,~~KAAK~~,~~MAAM~~,CAAC;~~YACnC~~,OAAO,CACL,~~MAAC~~,IAAI,~~IAEH~~,EAAE,~~EAAC~~,~~IAAI~~,~~EACP~~,~~SAAS~~,~~EAAE;oBACT,~~IAAI,~~EAAE~~,~~qBAAqB;oBAC3B~~,~~MAAM~~,EAAE,~~CAAC;iBACV~~,~~aAED~~,~~KAAC~~,~~IAAI~~,~~IACH~~,~~SAAS~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~OAAO~~,~~EAAE~~,~~QAAQ~~,EAAE,~~EACtD~~,EAAE,EAAE,~~mBAAmB~~,~~EACvB~~,~~OAAO~~,~~EAAE,~~KAAK,KAAK,~~KAAK~~,CAAC,MAAM,GAAG,~~CAAC,EACnC,~~KAAK,~~EAAE,KAAK,~~GAAG,MAAM,~~YAErB~~,~~KAAC~~,~~UAAU~~,~~IACT~~,GAAG,EAAE,CAAC,~~EAAsB~~,EAAE,~~EAAE~~;~~gCAC9B~~,~~UAAU~~,~~CAAC~~,IAAI,CAAC,EAAE;~~oCAChB~~,~~MAAM~~,~~MAAM~~,GAAG,~~EAAE~~,~~GAAG~~,IAAI,EAAE,CAAC~~;oCAC3B~~,~~IAAI~~,CAAC,EAAE,~~IAAI~~,MAAM,CAAC,~~IAAI,~~CAAC,EAAE,~~CAAC~~,EAAE,CAAC~~;wCAC3B~~,~~OAAO~~,~~MAAM~~,CAAC,~~IAAI~~,CAAC,EAAE,CAAC,CAAC~~;wCACvB~~,~~OAAO~~,~~MAAM~~,CAAC~~;oCAChB~~,CAAC~~;oCACD~~,~~IAAI~~,~~EAAE~~;~~wCAAE~~,OAAO,EAAE,~~GAAG~~,~~MAAM~~,EAAE,~~CAAC,~~IAAI,CAAC,EAAE,CAAC,~~EAAE~~,~~EAAE~~,EAAE,CAAC~~;oCAC5C~~,~~OAAO~~,~~MAAM~~,CAAC~~;gCAChB~~,~~CAAC~~,CAAC,~~CAAC~~;~~4BACL~~,CAAC,~~EACD~~,~~EAAE~~,~~EAAE~~,IAAI,~~CAAC~~,EAAE,~~gBACC~~,~~GAAG,~~IAAI,~~CAAC~~,IAAI,MAAM,~~CAAC~~,CAAC,UAAU,~~EAAE~~,CAAC,~~KAAK~~,~~GAAG~~,~~CAAC~~,EAAE,~~KAAK~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~CAAC~~,EAAE,~~kBAC1D~~,~~SAAS~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~SAAS~~,~~EAC5C~~,~~QAAQ~~,~~EAAE~~,~~SAAS~~,CAAC,CAAC,CAAC,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~EAC5B~~,OAAO,EAAE,~~SAAS~~,~~EAClB~~,~~SAAS~~,EAAE,~~IAAI~~,~~CAAC~~,~~SAAS~~,~~EACzB~~,KAAK,~~EAAE~~,KAAK,~~GAAG~~,MAAM,~~EACrB~~,KAAK,EAAE,~~IAAI~~,~~CAAC~~,KAAK,~~EACjB~~,OAAO,EAAE,IAAI,CAAC,~~aAAa~~,~~EAC3B~~,~~SAAS~~,~~EAAE~~,~~CAAC~~,~~CAAC~~,~~IAAI~~,CAAC,~~aAAa~~,IAAI,CAAC,~~SAAS~~,~~GAC7C~~,~~GACG~~,~~EAEN~~,CAAC,CAAC,IAAI,CAAC,~~aAAa~~,~~IAAI~~,CAAC,~~SAAS,~~CAAC,CAAC,CAAC,~~CACpC~~,~~KAAC~~,~~MAAM~~,~~IAAC~~,~~OAAO~~,~~EAAC~~,~~MAAM~~,~~EAAC~~,~~OAAO~~,EAAE,~~IAAI~~,~~CAAC~~,aAAa,EAAE,EAAE,EAAE,~~cAAc~~,EAAE,~~QAAQ~~,EAAE,CAAC,CAAC,~~YACjF~~,~~IAAI,~~CAAC,~~IAAI~~,~~GACH~~,~~CACV~~,~~CAAC~~,CAAC,CAAC,~~CACF~~,~~KAAC~~,IAAI,~~IAAC~~,OAAO,EAAE,~~SAAS~~,CAAC,CAAC,CAAC,~~IAAI~~,CAAC,CAAC,CAAC,~~SAAS~~,~~EAAE~~,~~EAAE~~,EAAE,~~cAAc~~,~~YAC5D~~,IAAI,CAAC,~~IAAI~~,~~GACL~~,~~CACR~~,~~KA9CI~~,~~IAAI~~,CAAC,EAAE,~~CA+CP~~,~~CACR~~,CAAC~~;QACJ~~,CAAC,CAAC,~~GACwB~~,CAC7B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { useEffect, useRef, useState } from 'react';\~~nimport type { FunctionComponent } from 'react';\~~n\nimport type { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport { useArrows, useElement, useI18n } from '../../hooks';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nimport {\n StepMarker,\n StyledBulletWrapper,\n StyledStepText,\n StyledVerticalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nconst VerticalFormProgress: ~~FunctionComponent<FormProgressProps & ForwardProps>~~ = ({\n steps,\n currentStepId,\n ...restProps\n}) => {\n const t = useI18n();\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n\n ~~useArrows~~(~~stepsRef,~~ {\n ~~selector:~~ ~~'button~~[~~aria-label~~]~~',\~~n ~~cycle:~~ ~~false,\~~n ~~dir:~~ ~~'left-right',\~~n ~~initialFocusElement~~: ~~currentStepEl~~\n });\n\n ~~useArrows~~(~~stepsRef,~~ {\n ~~selector: 'button[aria-label]'~~,\n ~~cycle~~: ~~false,\~~n ~~dir~~: ~~'up-down',\~~n ~~initialFocusElement~~: ~~currentStepEl\~~n });\n\n ~~useEffect((~~) => {\n if (~~stepEls[curStep.id]~~ && ~~stepEls[curStep.id] !== currentStepEl~~) {\n ~~setCurrentStepEl~~(~~stepEls[curStep.id]);\n }~~\n }, ~~[Object.keys(stepEls),~~ ~~curStep]~~);\n\n return (\n <~~StyledVerticalStepMarkers~~ ~~ref~~={~~stepsRef~~} {~~...restProps~~}>\n ~~{steps.map~~((step, index) => {\n const isCurrent = index === curIdx;\n return (\n <Grid\n key={step.id}\n as='li'\n container={{\n cols: '2rem minmax(0, 1fr)',\n colGap: 1\n }}\n >\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n as={StyledBulletWrapper}\n hasNext={index !== steps.length - 1}\n prior={~~index < curIdx~~}\n >\n <StepMarker~~\n ref~~={~~(el:~~ ~~HTMLElement~~ \| ~~null~~) ~~=> {~~\n ~~setStepEls~~(~~curr =>~~ {\n ~~const~~ ~~newEls = { ...curr };\~~n if ~~(!el && newEls[~~step.~~id]~~) {\n ~~delete newEls[step.id]~~;\n ~~return newEls~~;\n }\n if (~~el)~~ ~~return~~ { ~~...newEls,~~ [~~step.id~~]: el ~~};\~~n ~~return~~ ~~newEls;\~~n });\n }}\n ~~id=~~{~~step.id}~~\n aria-label~~={`${step.name} - ${t(~~'~~step_num',~~ ~~[index + 1, steps.length])}`}\~~n ~~aria-current={isCurrent~~ ? '~~step~~' ~~: undefined}\~~n ~~tabIndex={isCurrent ? 0~~ : ~~-1}~~\n ~~current={isCurrent~~}\n ~~completed={step.completed}~~\n ~~prior={index~~ < ~~curIdx}\n depth=~~{~~step.depth}~~\n ~~onClick={step~~.~~onMarkerClick}\n clickable={!!step.onMarkerClick~~ && ~~!isCurrent}\n />\n </Flex>\n\n {!!step~~.~~onMarkerClick~~ && ~~!isCurrent~~ ? (\n ~~<Button~~ ~~variant='link' onClick={step~~.~~onMarkerClick}~~ ~~as={StyledStepText} tabIndex={-1}>\~~n ~~{step.name}~~\n ~~</Button>\n )~~ : (\n <~~Text~~ ~~variant~~={~~isCurrent ? 'h3' : undefined~~} ~~as=~~{~~StyledStepText~~}>\n {~~step~~.~~name}\n </Text>\n~~ )}\n ~~</Grid>\n );\n })}\n~~ </StyledVerticalStepMarkers>\n );\n};\n\nexport default VerticalFormProgress;\n"]}
1	+ {"version":3,"file":"VerticalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport { useArrows, useElement, useI18n } from '../../hooks';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nimport {\n StepMarker,\n StyledBulletWrapper,\n StyledStepText,\n StyledVerticalBarSegment,\n StyledVerticalBarWrapper,\n StyledVerticalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n variant?: MultiStepFormProps['variant'];\n}\n\nconst VerticalFormProgress = ({\n steps,\n currentStepId,\n variant = 'dot',\n ...restProps\n}: FormProgressProps & ForwardProps) => {\n const t = useI18n();\n const isBarsMode = variant === 'bar';\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n\n const setStepElement = (stepId: string) => (el: HTMLElement \| null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n\n if (!el && newEls[stepId]) {\n delete newEls[stepId];\n return newEls;\n }\n\n if (el) return { ...newEls, [stepId]: el };\n\n return newEls;\n });\n };\n\n const renderStepName = ({\n isCurrent,\n stepName,\n onMarkerClick\n }: {\n isCurrent: boolean;\n stepName: string;\n onMarkerClick?: MultiStepFormProps['steps'][number]['onMarkerClick'];\n }) => {\n if (!!onMarkerClick && !isCurrent) {\n return (\n <Button variant='link' onClick={onMarkerClick} as={StyledStepText} tabIndex={-1}>\n {stepName}\n </Button>\n );\n }\n\n return (\n <Text variant={isCurrent ? 'h3' : undefined} as={StyledStepText}>\n {stepName}\n </Text>\n );\n };\n\n const renderStepItem = (step: MultiStepFormProps['steps'][number], index: number) => {\n const isCurrent = index === curIdx;\n const isPrior = index < curIdx;\n\n const commonMarkerProps = {\n ref: setStepElement(step.id),\n id: step.id,\n 'aria-label': `${step.name} - ${t('step_num', [index + 1, steps.length])}`,\n 'aria-current': isCurrent ? ('step' as const) : undefined,\n tabIndex: isCurrent ? 0 : -1,\n current: isCurrent,\n completed: step.completed,\n onClick: step.onMarkerClick,\n clickable: !!step.onMarkerClick && !isCurrent\n };\n\n return (\n <Grid\n key={step.id}\n as='li'\n container={{\n cols: '2rem minmax(0, 1fr)',\n colGap: 1\n }}\n >\n {isBarsMode ? (\n <Flex\n container={{ direction: 'column', alignItems: 'center' }}\n as={StyledVerticalBarWrapper}\n >\n <StyledVerticalBarSegment {...commonMarkerProps} />\n </Flex>\n ) : (\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n as={StyledBulletWrapper}\n hasNext={index !== steps.length - 1}\n prior={isPrior}\n >\n <StepMarker prior={isPrior} depth={step.depth} {...commonMarkerProps} />\n </Flex>\n )}\n\n {renderStepName({\n isCurrent,\n stepName: step.name,\n onMarkerClick: step.onMarkerClick\n })}\n </Grid>\n );\n };\n\n useArrows(stepsRef, {\n selector: 'button[aria-label]',\n cycle: false,\n dir: 'left-right',\n initialFocusElement: currentStepEl\n });\n\n useArrows(stepsRef, {\n selector: 'button[aria-label]',\n cycle: false,\n dir: 'up-down',\n initialFocusElement: currentStepEl\n });\n\n useEffect(() => {\n if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n setCurrentStepEl(stepEls[curStep.id]);\n }\n }, [Object.keys(stepEls), curStep]);\n\n return (\n <StyledVerticalStepMarkers ref={stepsRef} {...restProps}>\n {steps.map(renderStepItem)}\n </StyledVerticalStepMarkers>\n );\n};\n\nexport default VerticalFormProgress;\n"]}

package/lib/components/MultiStepForm/useFormProgressOverflow.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export declare const useFormProgressOverflow: (numberOfSteps: number, withLabels?: boolean) => {
+export declare const useFormProgressOverflow: (numberOfSteps: number, withLabels?: boolean, barMode?: boolean) => {
     ref: import("react").RefObject<HTMLOListElement>;
     state: boolean | undefined;
 };

package/lib/components/MultiStepForm/useFormProgressOverflow.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFormProgressOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/useFormProgressOverflow.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,uBAAuB,~~GAAI~~,eAAe,MAAM,~~EAAE~~,aAAa,OAAO;;;~~CA0ClF~~,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
1	+ {"version":3,"file":"useFormProgressOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/useFormProgressOverflow.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,uBAAuB,GAClC,eAAe,MAAM,EACrB,aAAa,OAAO,EACpB,UAAU,OAAO;;;CAoDlB,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/components/MultiStepForm/useFormProgressOverflow.js CHANGED Viewed

@@ -2,14 +2,14 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { remToPx, stripUnit } from 'polished';
 import { useChToPxConversionFactor, useTheme } from '../../hooks';
 import { tryCatch } from '../../utils';
-import { stepItemMinWidth, stepMarkerMinWidth } from './FormProgress.styles';
-export const useFormProgressOverflow = (numberOfSteps, withLabels) => {
+import { stepBarMinWidth, stepItemMinWidth, stepMarkerMinWidth } from './FormProgress.styles';
+export const useFormProgressOverflow = (numberOfSteps, withLabels, barMode) => {
     const ref = useRef(null);
     const [state, setState] = useState(undefined);
     const chToPxConversionFactor = useChToPxConversionFactor();
     const itemWidth = withLabels
         ? chToPxConversionFactor * stepItemMinWidth
-        : chToPxConversionFactor * stepMarkerMinWidth;
+        : chToPxConversionFactor * (barMode ? stepBarMinWidth : stepMarkerMinWidth);
     const theme = useTheme();
     const itemSpacing = Number(stripUnit(tryCatch(() => remToPx(theme.base.spacing), () => '16px')));
     useLayoutEffect(() => {
@@ -18,17 +18,25 @@ export const useFormProgressOverflow = (numberOfSteps, withLabels) => {
             return;
         const ro = new ResizeObserver(() => {
             const olWidth = ol.offsetWidth ?? 0;
-            // Adding 1 to maxVisibleItems to account for the fact that the first and last item are half size,
-            // so their overall width is equal to itemWidth, but need to be counted as 2 items
-            const maxVisibleItems = Math.floor(olWidth / (itemWidth + itemSpacing) + 1);
-            const itemsOverflowing = numberOfSteps > maxVisibleItems;
-            setState(itemsOverflowing);
+            let maxVisibleItems;
+            if (barMode) {
+                // All bar segments are equal size; gap is the spacing between them.
+                // Min total width = N * minWidth + (N-1) * gap
+                // Overflow when N > (olWidth + gap) / (minWidth + gap)
+                maxVisibleItems = Math.floor((olWidth + itemSpacing) / (itemWidth + itemSpacing));
+            }
+            else {
+                // Adding 1 to maxVisibleItems to account for the fact that the first and last item are half size,
+                // so their overall width is equal to itemWidth, but need to be counted as 2 items
+                maxVisibleItems = Math.floor(olWidth / (itemWidth + itemSpacing) + 1);
+            }
+            setState(numberOfSteps > maxVisibleItems);
         });
         ro.observe(ol);
         return () => {
             ro.disconnect();
         };
-    }, [itemWidth, itemSpacing, numberOfSteps]);
+    }, [itemWidth, itemSpacing, numberOfSteps, barMode]);
     return { ref, state };
 };
 export default useFormProgressOverflow;