@axa-fr/design-system-apollo-react 2.0.1 → 2.0.2-alpha.1

package/dist/ProgressBarGroup/ProgressBarGroupCommon.d.ts

@@ -3,9 +3,13 @@ import { ProgressBar } from "../ProgressBar/ProgressBarCommon";
 export type ProgressBarGroupProps = {
     currentStepProgress?: number;
     currentStep: number;
+    /**
+     * @deprecated Use `stepsCount` instead.
+     */
     nbSteps?: 2 | 3 | 4 | 5 | 6 | 7 | 8;
-    label?: string;
+    stepsCount?: 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    max?: number;
     className?: string;
     ProgressBarComponent: ComponentType<ComponentProps<typeof ProgressBar>>;
-};
-export declare const ProgressBarGroup: ({ currentStepProgress, nbSteps, currentStep, label, className, ProgressBarComponent, }: ProgressBarGroupProps) => import("react/jsx-runtime").JSX.Element;
+} & Omit<ComponentProps<"ol">, "children" | "className">;
+export declare const ProgressBarGroup: ({ currentStepProgress, max, nbSteps, stepsCount, currentStep, className, ProgressBarComponent, ...props }: ProgressBarGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ProgressBarGroup/ProgressBarGroupCommon.js

@@ -1,18 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import { useId } from "react";
-const INITIAL_STEPPER_PROGRESS = 10;
-const MAX_STEPPER_PROGRESS = 100;
-export const ProgressBarGroup = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, nbSteps = 4, currentStep, label, className, ProgressBarComponent, }) => {
+import { useSequentialProgress } from "./useSequentialProgress";
+export const ProgressBarGroup = ({ currentStepProgress = 0, max = 100, nbSteps = 4, stepsCount = nbSteps, currentStep, className, ProgressBarComponent, ...props }) => {
     const stepperId = useId();
-    const getCurrentProgress = (index) => {
-        if (index < currentStep) {
-            return MAX_STEPPER_PROGRESS;
-        }
-        if (index === currentStep) {
-            return currentStepProgress || INITIAL_STEPPER_PROGRESS;
-        }
-        return 0;
-    };
-    return (_jsx("div", { id: stepperId, role: "group", "aria-label": label, className: classNames("af-progress-bar-group", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx(ProgressBarComponent, { value: getCurrentProgress(index), max: MAX_STEPPER_PROGRESS, "aria-current": index === currentStep ? true : undefined }, `${stepperId}-${index}`))) }));
+    const progressValues = useSequentialProgress(currentStepProgress / max, currentStep, stepsCount);
+    return (_jsx("ol", { className: classNames("af-progress-bar-group", className), ...props, children: progressValues.map((value, index) => (_jsx("li", { className: "af-progress-bar-group__item", children: _jsx(ProgressBarComponent, { value: value, "aria-hidden": true }) }, `af-progress-bar-group__item--${stepperId}-${index}`))) }));
 };

package/dist/ProgressBarGroup/useSequentialProgress.d.ts

@@ -0,0 +1,20 @@
+/**
+ * useSequentialProgress
+ *
+ * A custom React hook to manage the animated progress values for a multi-step progress bar (stepper).
+ *
+ * This hook returns an array of numbers (between 0 and 1) representing the fill percentage of each progress bar step.
+ * It animates the transition between steps, smoothly updating the progress values when the current step or percentage changes.
+ *
+ * @param stepPercentage - The completion percentage (between 0 and 1) of the current step.
+ * @param currentStepIndex - The index (starting from 0) of the current step.
+ * @param steps - The total number of steps in the progress bar.
+ * @param duration - (Optional) Animation duration in milliseconds for each update (default: 750ms).
+ *
+ * @returns number[] - An array of progress values for each step (0 = empty, 1 = full, value between 0 and 1 = partial).
+ *
+ * Example usage:
+ *   const progressValues = useSequentialProgress(0.5, 1, 3);
+ *   // progressValues might be: [1, 0.5, 0]
+ */
+export declare const useSequentialProgress: (stepPercentage: number, currentStepIndex: number, steps: number, duration?: number) => number[];

package/dist/ProgressBarGroup/useSequentialProgress.js

@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const getProgressValues = (currentStepIndex, stepPercentage, steps) => {
+    const values = Array(steps).fill(0);
+    for (let i = 0; i < steps; i++) {
+        if (i < currentStepIndex) {
+            values[i] = 1;
+        }
+        else if (i === currentStepIndex) {
+            values[i] = stepPercentage;
+            break;
+        }
+    }
+    return values;
+};
+/**
+ * useSequentialProgress
+ *
+ * A custom React hook to manage the animated progress values for a multi-step progress bar (stepper).
+ *
+ * This hook returns an array of numbers (between 0 and 1) representing the fill percentage of each progress bar step.
+ * It animates the transition between steps, smoothly updating the progress values when the current step or percentage changes.
+ *
+ * @param stepPercentage - The completion percentage (between 0 and 1) of the current step.
+ * @param currentStepIndex - The index (starting from 0) of the current step.
+ * @param steps - The total number of steps in the progress bar.
+ * @param duration - (Optional) Animation duration in milliseconds for each update (default: 750ms).
+ *
+ * @returns number[] - An array of progress values for each step (0 = empty, 1 = full, value between 0 and 1 = partial).
+ *
+ * Example usage:
+ *   const progressValues = useSequentialProgress(0.5, 1, 3);
+ *   // progressValues might be: [1, 0.5, 0]
+ */
+export const useSequentialProgress = (stepPercentage, currentStepIndex, steps, duration = 750) => {
+    const [progressValues, setProgressValues] = useState(getProgressValues(currentStepIndex, stepPercentage, steps));
+    const currentAnimationStep = useRef(currentStepIndex + stepPercentage);
+    const timeoutRef = useRef(null);
+    const animate = useCallback(() => {
+        const targetStep = currentStepIndex + stepPercentage;
+        if (currentAnimationStep.current === targetStep) {
+            return;
+        }
+        const diff = targetStep - currentAnimationStep.current;
+        if (!Number.isInteger(currentAnimationStep.current) &&
+            Math.floor(currentAnimationStep.current) !== currentStepIndex) {
+            currentAnimationStep.current =
+                diff > 0
+                    ? Math.ceil(currentAnimationStep.current)
+                    : Math.floor(currentAnimationStep.current);
+        }
+        else if (Math.abs(diff) > 1) {
+            currentAnimationStep.current += Number(Math.sign(diff)) * 1;
+        }
+        else if (Math.abs(diff) > 0) {
+            currentAnimationStep.current = targetStep;
+        }
+        setProgressValues(getProgressValues(Math.floor(currentAnimationStep.current), currentAnimationStep.current - Math.floor(currentAnimationStep.current), steps));
+        timeoutRef.current = setTimeout(animate, duration);
+    }, [currentStepIndex, duration, stepPercentage, steps]);
+    // Reset the array and animation if the number of steps changes
+    useEffect(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setProgressValues(getProgressValues(currentStepIndex, stepPercentage, steps));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [steps]);
+    // Animate only when currentStepIndex or stepPercentage changes
+    useEffect(() => {
+        animate();
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stepPercentage, currentStepIndex]);
+    return progressValues;
+};

package/dist/Stepper/StepperCommon.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, } from "react";
 import { ItemMessage, } from "../Form/ItemMessage/ItemMessageCommon";
 export const Stepper = ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, className, ProgressBarGroupComponent, helper, message, messageType = "success", titleLevel = 2, ...props }) => {
-    const stepperId = useId();
+    const titleId = useId();
     const Title = `h${titleLevel}`;
-    return (_jsxs("div", { className: "af-stepper", ...props, children: [_jsxs("div", { className: "af-stepper__header", children: [_jsx(Title, { className: "af-stepper__title", "aria-describedby": stepperId, children: currentTitle }), Boolean(currentSubtitle) && (_jsx("p", { className: "af-stepper__subtitle", children: currentSubtitle }))] }), _jsx(ProgressBarGroupComponent, { label: currentTitle, className: className, currentStep: currentStep, nbSteps: nbSteps, currentStepProgress: currentStepProgress }), Boolean(helper) && _jsx("span", { className: "af-stepper__helper", children: helper }), _jsx(ItemMessage, { message: message, messageType: messageType })] }));
+    return (_jsxs("div", { className: "af-stepper", ...props, tabIndex: undefined, children: [_jsxs("div", { className: "af-stepper__header", children: [_jsx(Title, { id: titleId, className: "af-stepper__title", children: currentTitle }), Boolean(currentSubtitle) && (_jsx("p", { className: "af-stepper__subtitle", children: currentSubtitle }))] }), _jsx(ProgressBarGroupComponent, { className: className, currentStep: currentStep, stepsCount: nbSteps, currentStepProgress: currentStepProgress, "aria-labelledby": titleId }), Boolean(helper) && _jsx("span", { className: "af-stepper__helper", children: helper }), _jsx(ItemMessage, { message: message, messageType: messageType })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "2.0.1",
+  "version": "2.0.2-alpha.1",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "2.0.1",
-    "@axa-fr/design-system-look-and-feel-css": "2.0.1",
+    "@axa-fr/design-system-apollo-css": "2.0.2-alpha.1",
+    "@axa-fr/design-system-look-and-feel-css": "2.0.2-alpha.1",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },