stepper-hook - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

dist/stepper-hook.d.ts

@@ -22,2 +22,8 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
     data: DataT;
+    /**
+     * Direction of the navigation: 1 for next, -1 for previous and 0
+     * at the beginning.
+     * This is useful to animate the transition between steps.
+     */
+    direction: number;
     goToNextStep: () => Promise<void>;
@@ -24,0 +30,0 @@ goToPreviousStep: () => Promise<void>;

dist/stepper-hook.js

 import { jsx as f } from "react/jsx-runtime";
-import { createContext as D, useState as g, useRef as y, useContext as $ } from "react";
-const b = (n) => D(n), m = b({
+import { createContext as b, useState as I, useRef as v, useContext as F } from "react";
+const V = (n) => b(n), L = V({
   activeStep: 0,
   data: {},
+  direction: 0,
   goToNextStep: async () => {
@@ -22,15 +23,19 @@ },
 });
-function E({
+function j({
   initialData: n,
-  onComplete: s,
-  steps: r,
-  children: o
+  initialStep: s = 0,
+  onComplete: r,
+  onStepChange: o,
+  steps: c,
+  children: p
 }) {
-  const [a, u] = g(0), i = y(n), [I, l] = g(!1), p = y(null), c = r.length, v = a === 0, h = a === c - 1, w = async () => {
-    if (!p.current)
+  if (s < 0 || s >= c.length)
+    throw new Error("Invalid initial step");
+  const [i, N] = I(s), u = v(n), [C, S] = I(!1), l = v(null), d = v(0), a = c.length, x = i === 0, g = i === a - 1, m = async () => {
+    if (!l.current)
       return !0;
     try {
-      l(!0);
-      const t = await p.current();
-      if (l(!1), !t)
+      S(!0);
+      const t = await l.current();
+      if (S(!1), !t)
         return !1;
@@ -41,24 +46,24 @@ } catch {
     return !0;
-  }, S = async (t, e = !1) => {
-    if (t < 0 || t > c)
+  }, h = async (t, e = !1) => {
+    if (t < 0 || t > a)
       throw new Error(
-        `Invalid step ${t}, it should be between 0 and ${c}`
+        `Invalid step ${t}, it should be between 0 and ${a}`
       );
-    if (!(!e && !await w())) {
-      if (h && // This check basically means that we are in the last step and
+    if (!(!e && !await m())) {
+      if (g && // This check basically means that we are in the last step and
       // we are trying to go to the next step, which means completing the stepper
-      t === c && s) {
-        s();
+      t === a) {
+        r ? r() : console.warn("Stepper completed without an onComplete handler");
         return;
       }
-      P(), u(t);
+      d.current = Math.sign(t - i), E(), N(t), o && o(t, d.current);
     }
-  }, x = (t = 1) => {
-    if (t < 0 && v)
+  }, y = (t = 1) => {
+    if (t < 0 && x)
       throw new Error("You are already in the first step");
     let e;
-    for (e = a + 1 * t; t > 0 ? e < c : e >= 0; e = e + t) {
-      const d = r[e];
-      if ("showIf" in d && d.showIf) {
-        if (d.showIf(i.current))
+    for (e = i + 1 * t; t > 0 ? e < a : e >= 0; e = e + t) {
+      const w = c[e];
+      if ("showIf" in w && w.showIf) {
+        if (w.showIf(u.current))
           return e;
@@ -69,44 +74,45 @@ } else
     return e;
-  }, L = () => S(x(-1), !0), N = async () => {
-    if (!await w())
+  }, P = () => h(y(-1), !0), T = async () => {
+    if (!await m())
       return;
-    const t = x();
-    S(t, !0);
-  }, C = (t) => {
-    p.current = t;
-  }, P = () => {
-    p.current = null;
-  }, T = {
-    activeStep: a,
-    data: i.current,
-    goToNextStep: N,
-    goToPreviousStep: L,
-    handleStepValidation: C,
-    isFirstStep: v,
-    isLastStep: h,
-    isLoading: I,
-    setActiveStep: S,
+    const t = y();
+    h(t, !0);
+  }, D = (t) => {
+    l.current = t;
+  }, E = () => {
+    l.current = null;
+  }, $ = {
+    activeStep: i,
+    data: u.current,
+    direction: d.current,
+    goToNextStep: T,
+    goToPreviousStep: P,
+    handleStepValidation: D,
+    isFirstStep: x,
+    isLastStep: g,
+    isLoading: C,
+    setActiveStep: h,
     setData: (t) => {
       if (typeof t == "function") {
-        i.current = t(i.current);
+        u.current = t(u.current);
         return;
       }
-      i.current = t;
+      u.current = t;
     },
-    setLoading: l,
-    totalSteps: c
+    setLoading: S,
+    totalSteps: a
   };
-  return /* @__PURE__ */ f(m.Provider, { value: T, children: o });
+  return /* @__PURE__ */ f(L.Provider, { value: $, children: p });
 }
-function F() {
-  return $(m);
+function k() {
+  return F(L);
 }
-function V({
+function A({
   children: n,
   steps: s
 }) {
-  const { activeStep: r } = F(), o = s[r], a = "component" in o ? o.component : o, u = /* @__PURE__ */ f(a, {}, `step-${r}`);
-  return n ? n({ step: u }) : u;
+  const { activeStep: r } = k(), o = s[r], c = "component" in o ? o.component : o, p = /* @__PURE__ */ f(c, {}, `step-${r}`);
+  return n ? n({ step: p }) : p;
 }
-function A({
+function R({
   initialData: n,
@@ -118,3 +124,3 @@ onComplete: s,
   return /* @__PURE__ */ f(
-    E,
+    j,
     {
@@ -124,3 +130,3 @@ initialData: n ?? {},
       onComplete: s,
-      children: /* @__PURE__ */ f(V, { steps: r, children: o })
+      children: /* @__PURE__ */ f(A, { steps: r, children: o })
     }
@@ -130,4 +136,4 @@ );
 export {
-  A as Stepper,
-  F as useStepper
+  R as Stepper,
+  k as useStepper
 };

package.json

 {
   "name": "stepper-hook",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "React hook for creating custom stepper components",
@@ -28,15 +28,15 @@ "author": {
   "devDependencies": {
-    "@eslint/js": "^9.9.0",
-    "@types/node": "^22.4.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.1",
-    "vite-plugin-dts": "^4.0.3"
+    "@eslint/js": "^9.13.0",
+    "@types/node": "^22.7.8",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "5.1.0-rc-fb9a90fa48-20240614",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "globals": "^15.11.0",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.9",
+    "vite-plugin-dts": "^4.2.4"
   },
@@ -43,0 +43,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9830

increased by8.31%

Lines of code

191

increased by7.3%

No dependency changes