@snack-uikit/stepper 0.8.44 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.9.0 (2026-05-25)
+
+
+### Features
+
+* **PDS-3775:** add free navigation to stepper ([8b3ba42](https://github.com/cloud-ru-tech/snack-uikit/commit/8b3ba42d948edb29c7c84a2e50c7e6c29c55d029))
+
+
+
+
+
 ## 0.8.44 (2026-05-18)
 
 ### Only dependencies have been changed

package/README.md

@@ -69,6 +69,7 @@ function Example() {
 | className | `string` | - | CSS-класс |
 | onChangeCurrentStep | `(newValue: number, prevValue: number) => void` | - | Колбек смены текущего степа |
 | onCompleteChange | `(isCompleted: boolean) => void` | - | Колбек изменения завершенности |
+| allowFreeNavigation | `boolean` | - | Позволяет свободно переключаться между разными шагами без валидации |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/StepperContext/StepperContext.js

@@ -11,6 +11,9 @@ exports.StepperContext = (0, react_1.createContext)({
   stepCount: 0,
   isCompleted: false,
   currentStepIndex: 0,
+  goToStep() {
+    /* stub */
+  },
   goNext() {
     /* stub */
   },

package/dist/cjs/components/Stepper/Stepper.d.ts

@@ -23,5 +23,7 @@ export type StepperProps = WithSupportProps<{
     onChangeCurrentStep?: (newValue: number, prevValue: number) => void;
     /** Колбек изменения завершенности */
     onCompleteChange?: (isCompleted: boolean) => void;
+    /** Позволяет свободно переключаться между разными шагами без валидации */
+    allowFreeNavigation?: boolean;
 }>;
-export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, validator: validatorProp, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, validator: validatorProp, allowFreeNavigation, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Stepper/Stepper.js

@@ -63,9 +63,10 @@ function Stepper(_a) {
       onChangeCurrentStep,
       onCompleteChange,
       defaultCurrentStepIndex = 0,
-      validator: validatorProp = DEFAULT_VALIDATOR
+      validator: validatorProp = DEFAULT_VALIDATOR,
+      allowFreeNavigation = false
     } = _a,
-    props = __rest(_a, ["children", "steps", "className", "onChangeCurrentStep", "onCompleteChange", "defaultCurrentStepIndex", "validator"]);
+    props = __rest(_a, ["children", "steps", "className", "onChangeCurrentStep", "onCompleteChange", "defaultCurrentStepIndex", "validator", "allowFreeNavigation"]);
   const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
   const [currentStepState, setCurrentStepState] = (0, react_1.useState)(isCompletedByDefault ? constants_1.STEP_STATE.Completed : constants_1.STEP_STATE.Current);
   const [currentStepIndex, setCurrentStepIndexValue] = (0, react_1.useState)(defaultCurrentStepIndex);
@@ -105,6 +106,22 @@ function Stepper(_a) {
       }
     });
   }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps.length, stepsValidator === null || stepsValidator === void 0 ? void 0 : stepsValidator.value, validatorProp]);
+  const moveToStep = (0, react_1.useCallback)(stepIndex => {
+    if (isCompleted) {
+      setIsCompleted(false);
+    }
+    setCurrentStepIndex(stepIndex);
+    setCurrentStepState(constants_1.STEP_STATE.Current);
+  }, [isCompleted, setCurrentStepIndex]);
+  const goToStep = (0, react_1.useCallback)(newStepIndex => {
+    if (newStepIndex < 0 || newStepIndex >= steps.length) {
+      return;
+    }
+    if (newStepIndex === currentStepIndex) {
+      return;
+    }
+    moveToStep(newStepIndex);
+  }, [currentStepIndex, steps, moveToStep]);
   const goPrev = (0, react_1.useCallback)(function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : currentStepIndex - 1;
     if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
@@ -113,40 +130,34 @@ function Stepper(_a) {
     if (index === currentStepIndex && !isCompleted) {
       return;
     }
-    if (isCompleted) {
-      setIsCompleted(false);
+    moveToStep(index);
+  }, [currentStepIndex, isCompleted, moveToStep]);
+  const getStepOnClick = (0, react_1.useCallback)(stepIndex => {
+    if (allowFreeNavigation) {
+      return () => goToStep(stepIndex);
     }
-    setCurrentStepIndex(index);
-    setCurrentStepState(constants_1.STEP_STATE.Current);
-  }, [currentStepIndex, isCompleted, setCurrentStepIndex]);
+    if (stepIndex < currentStepIndex || stepIndex === currentStepIndex && isCompleted) {
+      return () => goPrev(stepIndex);
+    }
+    if (stepIndex === currentStepIndex + 1) {
+      return () => goNext();
+    }
+    return undefined;
+  }, [allowFreeNavigation, currentStepIndex, goNext, goPrev, goToStep, isCompleted]);
   const stepsView = (0, react_1.useMemo)(() => steps.map((step, index) => {
     const number = index + 1;
+    let state = constants_1.STEP_STATE.Waiting;
     if (index < currentStepIndex) {
-      return Object.assign(Object.assign({}, step), {
-        number,
-        state: constants_1.STEP_STATE.Completed,
-        onClick: () => goPrev(index)
-      });
-    }
-    if (index === currentStepIndex) {
-      return Object.assign(Object.assign({}, step), {
-        number,
-        state: currentStepState,
-        onClick: isCompleted ? () => goPrev(index) : undefined
-      });
-    }
-    if (index - 1 === currentStepIndex) {
-      return Object.assign(Object.assign({}, step), {
-        number,
-        state: constants_1.STEP_STATE.Waiting,
-        onClick: () => goNext()
-      });
+      state = constants_1.STEP_STATE.Completed;
+    } else if (index === currentStepIndex) {
+      state = currentStepState;
     }
     return Object.assign(Object.assign({}, step), {
       number,
-      state: constants_1.STEP_STATE.Waiting
+      state,
+      onClick: getStepOnClick(index)
     });
-  }), [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext]);
+  }), [steps, currentStepIndex, currentStepState, getStepOnClick]);
   const resetValidation = (0, react_1.useCallback)(() => {
     if (currentStepState === constants_1.STEP_STATE.Rejected) {
       setCurrentStepState(constants_1.STEP_STATE.Current);
@@ -174,7 +185,8 @@ function Stepper(_a) {
     resetValidation,
     stepCount: steps.length,
     stepper,
-    setValidator
+    setValidator,
+    goToStep: allowFreeNavigation ? goToStep : undefined
   };
   return (0, jsx_runtime_1.jsx)(StepperContext_1.StepperContext.Provider, {
     value: stepperApi,

package/dist/cjs/types.d.ts

@@ -16,6 +16,7 @@ export type StepperApi = {
     stepper: JSX.Element;
     goNext(stepIndex?: number): void;
     goPrev(stepIndex?: number): void;
+    goToStep?(stepIndex?: number): void;
     resetValidation(): void;
     setValidator(validator: StepsValidator): void;
     isCompleted: boolean;

package/dist/esm/StepperContext/StepperContext.js

@@ -5,6 +5,9 @@ export const StepperContext = createContext({
     stepCount: 0,
     isCompleted: false,
     currentStepIndex: 0,
+    goToStep() {
+        /* stub */
+    },
     goNext() {
         /* stub */
     },

package/dist/esm/components/Stepper/Stepper.d.ts

@@ -23,5 +23,7 @@ export type StepperProps = WithSupportProps<{
     onChangeCurrentStep?: (newValue: number, prevValue: number) => void;
     /** Колбек изменения завершенности */
     onCompleteChange?: (isCompleted: boolean) => void;
+    /** Позволяет свободно переключаться между разными шагами без валидации */
+    allowFreeNavigation?: boolean;
 }>;
-export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, validator: validatorProp, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, validator: validatorProp, allowFreeNavigation, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Stepper/Stepper.js

@@ -28,7 +28,7 @@ import { StepperContext } from '../../StepperContext';
 import styles from './styles.module.css';
 const DEFAULT_VALIDATOR = () => __awaiter(void 0, void 0, void 0, function* () { return true; });
 export function Stepper(_a) {
-    var { children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex = 0, validator: validatorProp = DEFAULT_VALIDATOR } = _a, props = __rest(_a, ["children", "steps", "className", "onChangeCurrentStep", "onCompleteChange", "defaultCurrentStepIndex", "validator"]);
+    var { children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex = 0, validator: validatorProp = DEFAULT_VALIDATOR, allowFreeNavigation = false } = _a, props = __rest(_a, ["children", "steps", "className", "onChangeCurrentStep", "onCompleteChange", "defaultCurrentStepIndex", "validator", "allowFreeNavigation"]);
     const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
     const [currentStepState, setCurrentStepState] = useState(isCompletedByDefault ? STEP_STATE.Completed : STEP_STATE.Current);
     const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
@@ -70,6 +70,22 @@ export function Stepper(_a) {
             }
         });
     }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps.length, stepsValidator === null || stepsValidator === void 0 ? void 0 : stepsValidator.value, validatorProp]);
+    const moveToStep = useCallback((stepIndex) => {
+        if (isCompleted) {
+            setIsCompleted(false);
+        }
+        setCurrentStepIndex(stepIndex);
+        setCurrentStepState(STEP_STATE.Current);
+    }, [isCompleted, setCurrentStepIndex]);
+    const goToStep = useCallback((newStepIndex) => {
+        if (newStepIndex < 0 || newStepIndex >= steps.length) {
+            return;
+        }
+        if (newStepIndex === currentStepIndex) {
+            return;
+        }
+        moveToStep(newStepIndex);
+    }, [currentStepIndex, steps, moveToStep]);
     const goPrev = useCallback((index = currentStepIndex - 1) => {
         if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
             return;
@@ -77,25 +93,32 @@ export function Stepper(_a) {
         if (index === currentStepIndex && !isCompleted) {
             return;
         }
-        if (isCompleted) {
-            setIsCompleted(false);
+        moveToStep(index);
+    }, [currentStepIndex, isCompleted, moveToStep]);
+    const getStepOnClick = useCallback((stepIndex) => {
+        if (allowFreeNavigation) {
+            return () => goToStep(stepIndex);
         }
-        setCurrentStepIndex(index);
-        setCurrentStepState(STEP_STATE.Current);
-    }, [currentStepIndex, isCompleted, setCurrentStepIndex]);
+        if (stepIndex < currentStepIndex || (stepIndex === currentStepIndex && isCompleted)) {
+            return () => goPrev(stepIndex);
+        }
+        if (stepIndex === currentStepIndex + 1) {
+            return () => goNext();
+        }
+        return undefined;
+    }, [allowFreeNavigation, currentStepIndex, goNext, goPrev, goToStep, isCompleted]);
     const stepsView = useMemo(() => steps.map((step, index) => {
         const number = index + 1;
+        let state = STEP_STATE.Waiting;
         if (index < currentStepIndex) {
-            return Object.assign(Object.assign({}, step), { number, state: STEP_STATE.Completed, onClick: () => goPrev(index) });
-        }
-        if (index === currentStepIndex) {
-            return Object.assign(Object.assign({}, step), { number, state: currentStepState, onClick: isCompleted ? () => goPrev(index) : undefined });
+            state = STEP_STATE.Completed;
         }
-        if (index - 1 === currentStepIndex) {
-            return Object.assign(Object.assign({}, step), { number, state: STEP_STATE.Waiting, onClick: () => goNext() });
+        else if (index === currentStepIndex) {
+            state = currentStepState;
         }
-        return Object.assign(Object.assign({}, step), { number, state: STEP_STATE.Waiting });
-    }), [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext]);
+        return Object.assign(Object.assign({}, step), { number,
+            state, onClick: getStepOnClick(index) });
+    }), [steps, currentStepIndex, currentStepState, getStepOnClick]);
     const resetValidation = useCallback(() => {
         if (currentStepState === STEP_STATE.Rejected) {
             setCurrentStepState(STEP_STATE.Current);
@@ -114,6 +137,7 @@ export function Stepper(_a) {
         stepCount: steps.length,
         stepper,
         setValidator,
+        goToStep: allowFreeNavigation ? goToStep : undefined,
     };
     return _jsx(StepperContext.Provider, { value: stepperApi, children: children(stepperApi) });
 }

package/dist/esm/types.d.ts

@@ -16,6 +16,7 @@ export type StepperApi = {
     stepper: JSX.Element;
     goNext(stepIndex?: number): void;
     goPrev(stepIndex?: number): void;
+    goToStep?(stepIndex?: number): void;
     resetValidation(): void;
     setValidator(validator: StepsValidator): void;
     isCompleted: boolean;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Stepper",
-  "version": "0.8.44",
+  "version": "0.9.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -43,5 +43,5 @@
     "@snack-uikit/utils": "4.0.2",
     "classnames": "2.5.1"
   },
-  "gitHead": "a9f6571146845d828e00206abdedb160980cff97"
+  "gitHead": "04eb3d22444b15fb7703fde18a0c0d23ae9d94f6"
 }

package/src/StepperContext/StepperContext.tsx

@@ -9,6 +9,9 @@ export const StepperContext = createContext<StepperApi>({
   stepCount: 0,
   isCompleted: false,
   currentStepIndex: 0,
+  goToStep() {
+    /* stub */
+  },
   goNext() {
     /* stub */
   },

package/src/components/Stepper/Stepper.tsx

@@ -32,6 +32,8 @@ export type StepperProps = WithSupportProps<{
   onChangeCurrentStep?: (newValue: number, prevValue: number) => void;
   /** Колбек изменения завершенности */
   onCompleteChange?: (isCompleted: boolean) => void;
+  /** Позволяет свободно переключаться между разными шагами без валидации */
+  allowFreeNavigation?: boolean;
 }>;
 
 const DEFAULT_VALIDATOR = async () => true;
@@ -44,6 +46,7 @@ export function Stepper({
   onCompleteChange,
   defaultCurrentStepIndex = 0,
   validator: validatorProp = DEFAULT_VALIDATOR,
+  allowFreeNavigation = false,
   ...props
 }: StepperProps) {
   const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
@@ -103,6 +106,33 @@ export function Stepper({
     [currentStepIndex, isCompleted, setCurrentStepIndex, steps.length, stepsValidator?.value, validatorProp],
   );
 
+  const moveToStep = useCallback(
+    (stepIndex: number) => {
+      if (isCompleted) {
+        setIsCompleted(false);
+      }
+
+      setCurrentStepIndex(stepIndex);
+      setCurrentStepState(STEP_STATE.Current);
+    },
+    [isCompleted, setCurrentStepIndex],
+  );
+
+  const goToStep = useCallback(
+    (newStepIndex: number) => {
+      if (newStepIndex < 0 || newStepIndex >= steps.length) {
+        return;
+      }
+
+      if (newStepIndex === currentStepIndex) {
+        return;
+      }
+
+      moveToStep(newStepIndex);
+    },
+    [currentStepIndex, steps, moveToStep],
+  );
+
   const goPrev = useCallback(
     (index: number = currentStepIndex - 1) => {
       if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
@@ -113,36 +143,50 @@ export function Stepper({
         return;
       }
 
-      if (isCompleted) {
-        setIsCompleted(false);
+      moveToStep(index);
+    },
+    [currentStepIndex, isCompleted, moveToStep],
+  );
+
+  const getStepOnClick = useCallback(
+    (stepIndex: number) => {
+      if (allowFreeNavigation) {
+        return () => goToStep(stepIndex);
       }
 
-      setCurrentStepIndex(index);
-      setCurrentStepState(STEP_STATE.Current);
+      if (stepIndex < currentStepIndex || (stepIndex === currentStepIndex && isCompleted)) {
+        return () => goPrev(stepIndex);
+      }
+
+      if (stepIndex === currentStepIndex + 1) {
+        return () => goNext();
+      }
+
+      return undefined;
     },
-    [currentStepIndex, isCompleted, setCurrentStepIndex],
+    [allowFreeNavigation, currentStepIndex, goNext, goPrev, goToStep, isCompleted],
   );
 
   const stepsView: StepViewData[] = useMemo(
     () =>
       steps.map((step, index) => {
         const number = index + 1;
+        let state: StepState = STEP_STATE.Waiting;
 
         if (index < currentStepIndex) {
-          return { ...step, number, state: STEP_STATE.Completed, onClick: () => goPrev(index) };
-        }
-
-        if (index === currentStepIndex) {
-          return { ...step, number, state: currentStepState, onClick: isCompleted ? () => goPrev(index) : undefined };
-        }
-
-        if (index - 1 === currentStepIndex) {
-          return { ...step, number, state: STEP_STATE.Waiting, onClick: () => goNext() };
+          state = STEP_STATE.Completed;
+        } else if (index === currentStepIndex) {
+          state = currentStepState;
         }
 
-        return { ...step, number, state: STEP_STATE.Waiting };
+        return {
+          ...step,
+          number,
+          state,
+          onClick: getStepOnClick(index),
+        };
       }),
-    [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext],
+    [steps, currentStepIndex, currentStepState, getStepOnClick],
   );
 
   const resetValidation = useCallback(() => {
@@ -177,6 +221,7 @@ export function Stepper({
     stepCount: steps.length,
     stepper,
     setValidator,
+    goToStep: allowFreeNavigation ? goToStep : undefined,
   };
 
   return <StepperContext.Provider value={stepperApi}>{children(stepperApi)}</StepperContext.Provider>;

package/src/types.ts

@@ -23,6 +23,7 @@ export type StepperApi = {
   stepper: JSX.Element;
   goNext(stepIndex?: number): void;
   goPrev(stepIndex?: number): void;
+  goToStep?(stepIndex?: number): void;
   resetValidation(): void;
   setValidator(validator: StepsValidator): void;
   isCompleted: boolean;