reactjs-multi-stepper 1.1.6 → 1.1.7
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.
- package/dist/index.css +1 -1
- package/dist/multi-stepper.es.js +58 -58
- package/dist/multi-stepper.umd.js +5 -5
- package/package.json +12 -3
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6,p{margin:0
|
|
1
|
+
:root{--color-primary: #0284c7;--color-primary-light: #38bdf8;--color-success: #16a34a;--color-error: #ef4444;--color-text: #111827;--color-text-light: #4b5563;--color-black: #000;--color-white: #fff;--color-border: #d1d5db;--color-border-light: #e2e8f0;--spacing-xs: .375rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--step-size: 2.5rem;--step-font-weight: 600;--step-radius: 50%;--spinner-size: 1.5rem;--spinner-thickness: 3px;--spinner-color: #3b82f6;--spinner-track: #e5e7eb;--spinner-speed: .8s}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}.app-container{padding:var(--spacing-lg)}.stepper-header{display:flex;justify-content:space-between}.step-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.step-item:not(:first-child):before{content:"";background-color:var(--color-border-light);position:absolute;width:calc(100% - var(--step-size));height:3px;right:calc(50% + (var(--step-size) / 2));top:calc(var(--step-size) / 2 - .125rem);transition:all .2s}.step{width:var(--step-size);height:var(--step-size);display:flex;align-items:center;justify-content:center;z-index:10;position:relative;border-radius:var(--step-radius);font-weight:var(--step-font-weight);color:var(--color-black);transition:all .2s;border:1px solid var(--color-border)}.step-active{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.step-complete{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-white)}.step-error{background-color:var(--color-error);color:var(--color-white)}.step-finished{background-color:var(--color-success);color:var(--color-white)}.complete:not(:first-child):before,.active:not(:first-child):before{background-color:var(--color-success)}.step-title{font-size:1rem;color:var(--color-text);font-weight:500;margin-top:var(--spacing-md)}.step-description{font-size:.85rem;color:var(--color-text-light);font-weight:300;margin-top:var(--spacing-sm)}.stepper-content{display:flex;justify-content:center;align-items:center}.stepper-footer{display:flex;justify-content:space-around;align-items:center;padding:var(--spacing-lg) var(--spacing-xl)}.stepper-button{padding:var(--spacing-xs) var(--spacing-xl);font-size:1rem;border-radius:.375rem;border:1px solid #9ca3af;background-color:transparent;color:inherit;cursor:pointer}.stepper-button-fill{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.spinner{width:var(--spinner-size);height:var(--spinner-size);border-radius:50%;border:var(--spinner-thickness) solid var(--spinner-track);border-top-color:var(--spinner-color);animation:spin var(--spinner-speed) linear infinite}@media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:var(--spinner-track)}}@keyframes spin{to{transform:rotate(360deg)}}.test-step{padding:10vh;display:flex;justify-content:center;align-items:center}.test-step h3{color:#fff}.step-text{text-align:center}
|
package/dist/multi-stepper.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import ce, { createContext as le, useContext as ie, useState as W, useEffect as ue, useCallback as C, useMemo as V, Fragment as z } from "react";
|
|
2
2
|
import './index.css';var S = { exports: {} }, R = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
@@ -47,38 +47,38 @@ function de() {
|
|
|
47
47
|
function t(e) {
|
|
48
48
|
if (e == null) return null;
|
|
49
49
|
if (typeof e == "function")
|
|
50
|
-
return e.$$typeof ===
|
|
50
|
+
return e.$$typeof === se ? null : e.displayName || e.name || null;
|
|
51
51
|
if (typeof e == "string") return e;
|
|
52
52
|
switch (e) {
|
|
53
53
|
case g:
|
|
54
54
|
return "Fragment";
|
|
55
|
-
case Z:
|
|
56
|
-
return "Profiler";
|
|
57
55
|
case B:
|
|
56
|
+
return "Profiler";
|
|
57
|
+
case H:
|
|
58
58
|
return "StrictMode";
|
|
59
|
-
case
|
|
59
|
+
case ee:
|
|
60
60
|
return "Suspense";
|
|
61
|
-
case
|
|
61
|
+
case re:
|
|
62
62
|
return "SuspenseList";
|
|
63
|
-
case
|
|
63
|
+
case ne:
|
|
64
64
|
return "Activity";
|
|
65
65
|
}
|
|
66
66
|
if (typeof e == "object")
|
|
67
67
|
switch (typeof e.tag == "number" && console.error(
|
|
68
68
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
69
69
|
), e.$$typeof) {
|
|
70
|
-
case
|
|
70
|
+
case X:
|
|
71
71
|
return "Portal";
|
|
72
|
-
case K:
|
|
73
|
-
return (e.displayName || "Context") + ".Provider";
|
|
74
72
|
case Q:
|
|
73
|
+
return (e.displayName || "Context") + ".Provider";
|
|
74
|
+
case Z:
|
|
75
75
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
76
|
-
case
|
|
76
|
+
case K:
|
|
77
77
|
var r = e.render;
|
|
78
78
|
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
79
|
-
case
|
|
79
|
+
case te:
|
|
80
80
|
return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
|
|
81
|
-
case
|
|
81
|
+
case F:
|
|
82
82
|
r = e._payload, e = e._init;
|
|
83
83
|
try {
|
|
84
84
|
return t(e(r));
|
|
@@ -109,7 +109,7 @@ function de() {
|
|
|
109
109
|
}
|
|
110
110
|
function h(e) {
|
|
111
111
|
if (e === g) return "<>";
|
|
112
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
112
|
+
if (typeof e == "object" && e !== null && e.$$typeof === F)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
115
115
|
var r = t(e);
|
|
@@ -126,7 +126,7 @@ function de() {
|
|
|
126
126
|
return Error("react-stack-top-frame");
|
|
127
127
|
}
|
|
128
128
|
function m(e) {
|
|
129
|
-
if (
|
|
129
|
+
if (Y.call(e, "key")) {
|
|
130
130
|
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
131
131
|
if (r && r.isReactWarning) return !1;
|
|
132
132
|
}
|
|
@@ -134,7 +134,7 @@ function de() {
|
|
|
134
134
|
}
|
|
135
135
|
function p(e, r) {
|
|
136
136
|
function a() {
|
|
137
|
-
|
|
137
|
+
$ || ($ = !0, console.error(
|
|
138
138
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
139
139
|
r
|
|
140
140
|
));
|
|
@@ -150,12 +150,12 @@ function de() {
|
|
|
150
150
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
151
151
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
152
152
|
}
|
|
153
|
-
function k(e, r, a, u, E,
|
|
154
|
-
return a =
|
|
153
|
+
function k(e, r, a, u, E, x, A, w) {
|
|
154
|
+
return a = x.ref, e = {
|
|
155
155
|
$$typeof: v,
|
|
156
156
|
type: e,
|
|
157
157
|
key: r,
|
|
158
|
-
props:
|
|
158
|
+
props: x,
|
|
159
159
|
_owner: E
|
|
160
160
|
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
|
|
161
161
|
enumerable: !1,
|
|
@@ -182,23 +182,23 @@ function de() {
|
|
|
182
182
|
value: w
|
|
183
183
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
184
184
|
}
|
|
185
|
-
function d(e, r, a, u, E,
|
|
185
|
+
function d(e, r, a, u, E, x, A, w) {
|
|
186
186
|
var f = r.children;
|
|
187
187
|
if (f !== void 0)
|
|
188
188
|
if (u)
|
|
189
|
-
if (
|
|
189
|
+
if (oe(f)) {
|
|
190
190
|
for (u = 0; u < f.length; u++)
|
|
191
|
-
|
|
191
|
+
b(f[u]);
|
|
192
192
|
Object.freeze && Object.freeze(f);
|
|
193
193
|
} else
|
|
194
194
|
console.error(
|
|
195
195
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
196
196
|
);
|
|
197
|
-
else
|
|
198
|
-
if (
|
|
197
|
+
else b(f);
|
|
198
|
+
if (Y.call(r, "key")) {
|
|
199
199
|
f = t(e);
|
|
200
|
-
var _ = Object.keys(r).filter(function(
|
|
201
|
-
return
|
|
200
|
+
var _ = Object.keys(r).filter(function(ae) {
|
|
201
|
+
return ae !== "key";
|
|
202
202
|
});
|
|
203
203
|
u = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", L[f + u] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
204
204
|
`A props object containing a "key" prop is being spread into JSX:
|
|
@@ -224,7 +224,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
224
224
|
), k(
|
|
225
225
|
e,
|
|
226
226
|
f,
|
|
227
|
-
|
|
227
|
+
x,
|
|
228
228
|
E,
|
|
229
229
|
c(),
|
|
230
230
|
a,
|
|
@@ -232,10 +232,10 @@ React keys must be passed directly to JSX without using spread:
|
|
|
232
232
|
w
|
|
233
233
|
);
|
|
234
234
|
}
|
|
235
|
-
function
|
|
235
|
+
function b(e) {
|
|
236
236
|
typeof e == "object" && e !== null && e.$$typeof === v && e._store && (e._store.validated = 1);
|
|
237
237
|
}
|
|
238
|
-
var i =
|
|
238
|
+
var i = ce, v = Symbol.for("react.transitional.element"), X = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), H = Symbol.for("react.strict_mode"), B = Symbol.for("react.profiler"), Z = Symbol.for("react.consumer"), Q = Symbol.for("react.context"), K = Symbol.for("react.forward_ref"), ee = Symbol.for("react.suspense"), re = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), ne = Symbol.for("react.activity"), se = Symbol.for("react.client.reference"), P = i.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, oe = Array.isArray, O = console.createTask ? console.createTask : function() {
|
|
239
239
|
return null;
|
|
240
240
|
};
|
|
241
241
|
i = {
|
|
@@ -243,12 +243,12 @@ React keys must be passed directly to JSX without using spread:
|
|
|
243
243
|
return e();
|
|
244
244
|
}
|
|
245
245
|
};
|
|
246
|
-
var
|
|
246
|
+
var $, M = {}, I = i.react_stack_bottom_frame.bind(
|
|
247
247
|
i,
|
|
248
248
|
l
|
|
249
249
|
)(), D = O(h(l)), L = {};
|
|
250
250
|
j.Fragment = g, j.jsx = function(e, r, a, u, E) {
|
|
251
|
-
var
|
|
251
|
+
var x = 1e4 > P.recentlyCreatedOwnerStacks++;
|
|
252
252
|
return d(
|
|
253
253
|
e,
|
|
254
254
|
r,
|
|
@@ -256,11 +256,11 @@ React keys must be passed directly to JSX without using spread:
|
|
|
256
256
|
!1,
|
|
257
257
|
u,
|
|
258
258
|
E,
|
|
259
|
-
|
|
260
|
-
|
|
259
|
+
x ? Error("react-stack-top-frame") : I,
|
|
260
|
+
x ? O(h(e)) : D
|
|
261
261
|
);
|
|
262
262
|
}, j.jsxs = function(e, r, a, u, E) {
|
|
263
|
-
var
|
|
263
|
+
var x = 1e4 > P.recentlyCreatedOwnerStacks++;
|
|
264
264
|
return d(
|
|
265
265
|
e,
|
|
266
266
|
r,
|
|
@@ -268,8 +268,8 @@ React keys must be passed directly to JSX without using spread:
|
|
|
268
268
|
!0,
|
|
269
269
|
u,
|
|
270
270
|
E,
|
|
271
|
-
|
|
272
|
-
|
|
271
|
+
x ? Error("react-stack-top-frame") : I,
|
|
272
|
+
x ? O(h(e)) : D
|
|
273
273
|
);
|
|
274
274
|
};
|
|
275
275
|
}()), j;
|
|
@@ -279,10 +279,10 @@ function me() {
|
|
|
279
279
|
return J || (J = 1, process.env.NODE_ENV === "production" ? S.exports = fe() : S.exports = de()), S.exports;
|
|
280
280
|
}
|
|
281
281
|
var n = me();
|
|
282
|
-
const
|
|
282
|
+
const G = le(
|
|
283
283
|
void 0
|
|
284
284
|
), N = () => {
|
|
285
|
-
const t = ie(
|
|
285
|
+
const t = ie(G);
|
|
286
286
|
if (!t)
|
|
287
287
|
throw new Error(
|
|
288
288
|
"useMultiStepperForm must be used within a MultiStepperProvider"
|
|
@@ -297,9 +297,9 @@ const X = le(
|
|
|
297
297
|
}
|
|
298
298
|
}, [s.length]);
|
|
299
299
|
const m = C((d) => {
|
|
300
|
-
l((
|
|
301
|
-
const i = [...
|
|
302
|
-
if (d >
|
|
300
|
+
l((b) => {
|
|
301
|
+
const i = [...b];
|
|
302
|
+
if (d > b.length - 1) return b;
|
|
303
303
|
i[o] && (i[o] = { ...i[o], active: !1 }), i[d] && (i[d] = { ...i[d], active: !0 });
|
|
304
304
|
for (let v = 0; v < d; v++)
|
|
305
305
|
i[v] = { ...i[v], completed: !0 };
|
|
@@ -309,12 +309,12 @@ const X = le(
|
|
|
309
309
|
}), h(d);
|
|
310
310
|
}, [o]), p = C(() => {
|
|
311
311
|
o < c.length - 1 ? m(o + 1) : l((d) => {
|
|
312
|
-
const
|
|
313
|
-
return
|
|
312
|
+
const b = [...d];
|
|
313
|
+
return b[o] = { ...b[o], completed: !0 }, b;
|
|
314
314
|
});
|
|
315
315
|
}, [o, c.length, m]), T = C(() => {
|
|
316
316
|
o > 0 && m(o - 1);
|
|
317
|
-
}, [o, m]), k =
|
|
317
|
+
}, [o, m]), k = V(
|
|
318
318
|
() => ({
|
|
319
319
|
currentStep: o,
|
|
320
320
|
steps: c,
|
|
@@ -324,21 +324,21 @@ const X = le(
|
|
|
324
324
|
}),
|
|
325
325
|
[o, c, p, T, m]
|
|
326
326
|
);
|
|
327
|
-
return /* @__PURE__ */ n.jsx(
|
|
328
|
-
}, ve = (
|
|
327
|
+
return /* @__PURE__ */ n.jsx(G.Provider, { value: k, children: t });
|
|
328
|
+
}, ve = ({
|
|
329
329
|
step: t,
|
|
330
330
|
index: s
|
|
331
331
|
}) => {
|
|
332
332
|
const { steps: o } = N();
|
|
333
|
-
return o.length ? t.loading ? /* @__PURE__ */ n.jsx("div", { className: "step step-loading", children: /* @__PURE__ */ n.jsx(
|
|
334
|
-
},
|
|
333
|
+
return o.length ? t.loading ? /* @__PURE__ */ n.jsx("div", { className: "step step-loading", children: /* @__PURE__ */ n.jsx("div", { className: "spinner", role: "status", "aria-label": "Loading" }) }) : t.error ? /* @__PURE__ */ n.jsx("div", { className: "step step-error", children: t.icon ?? /* @__PURE__ */ n.jsx("span", { className: "text-white", children: "✗" }) }) : t.completed ? /* @__PURE__ */ n.jsx("div", { className: "step step-complete", children: t.icon ?? /* @__PURE__ */ n.jsx("span", { className: "text-white", children: "✓" }) }) : t.finshed ? /* @__PURE__ */ n.jsx("div", { className: "step step-complete", children: t.icon }) : t.active ? /* @__PURE__ */ n.jsx("div", { className: "step step-active", children: t.icon ?? /* @__PURE__ */ n.jsx("h2", { className: "text-white", children: s }) }) : /* @__PURE__ */ n.jsx("div", { className: "step step-default", children: t.icon ?? /* @__PURE__ */ n.jsx("h2", { children: s }) }) : /* @__PURE__ */ n.jsx(z, {});
|
|
334
|
+
}, he = () => {
|
|
335
335
|
const { steps: t } = N();
|
|
336
336
|
return t.length ? /* @__PURE__ */ n.jsx("div", { className: "app-container", children: /* @__PURE__ */ n.jsx("ol", { className: "stepper-header", children: t.map((s, o) => /* @__PURE__ */ n.jsxs(
|
|
337
337
|
"div",
|
|
338
338
|
{
|
|
339
339
|
className: `step-item ${s.active && "active"} ${s.completed && "complete"} `,
|
|
340
340
|
children: [
|
|
341
|
-
/* @__PURE__ */ n.jsx(
|
|
341
|
+
/* @__PURE__ */ n.jsx(ve, { index: o + 1, step: s }),
|
|
342
342
|
/* @__PURE__ */ n.jsxs("div", { className: "step-text", children: [
|
|
343
343
|
s.title && /* @__PURE__ */ n.jsx("h3", { className: "step-title", children: s.title }),
|
|
344
344
|
s.description && /* @__PURE__ */ n.jsx("h3", { className: "step-description", children: s.description })
|
|
@@ -346,11 +346,11 @@ const X = le(
|
|
|
346
346
|
]
|
|
347
347
|
},
|
|
348
348
|
o
|
|
349
|
-
)) }) }) : /* @__PURE__ */ n.jsx(
|
|
350
|
-
},
|
|
349
|
+
)) }) }) : /* @__PURE__ */ n.jsx(z, {});
|
|
350
|
+
}, be = ({ onClickNext: t }) => {
|
|
351
351
|
const { handleNextStep: s, handlePrevStep: o, currentStep: h, steps: c } = N(), l = h === c.length - 1, m = () => {
|
|
352
352
|
c[h].completed || (s(), t());
|
|
353
|
-
}, p =
|
|
353
|
+
}, p = V(() => ({
|
|
354
354
|
button: "stepper-button",
|
|
355
355
|
fill: "stepper-button-fill"
|
|
356
356
|
}), []);
|
|
@@ -375,17 +375,17 @@ const X = le(
|
|
|
375
375
|
}
|
|
376
376
|
)
|
|
377
377
|
] });
|
|
378
|
-
},
|
|
378
|
+
}, xe = () => {
|
|
379
379
|
const { steps: t, currentStep: s } = N();
|
|
380
380
|
return /* @__PURE__ */ n.jsx("div", { className: "stepper-content", children: t[s] && t[s].children && t[s].children });
|
|
381
|
-
},
|
|
381
|
+
}, _e = ({
|
|
382
382
|
steps: t,
|
|
383
383
|
onClickNext: s
|
|
384
384
|
}) => t ? /* @__PURE__ */ n.jsxs(pe, { steppers: t, children: [
|
|
385
|
-
/* @__PURE__ */ n.jsx(
|
|
386
|
-
/* @__PURE__ */ n.jsx(
|
|
387
|
-
/* @__PURE__ */ n.jsx(
|
|
385
|
+
/* @__PURE__ */ n.jsx(he, {}),
|
|
386
|
+
/* @__PURE__ */ n.jsx(xe, {}),
|
|
387
|
+
/* @__PURE__ */ n.jsx(be, { onClickNext: s })
|
|
388
388
|
] }) : /* @__PURE__ */ n.jsx(n.Fragment, {});
|
|
389
389
|
export {
|
|
390
|
-
|
|
390
|
+
_e as MultiStepper
|
|
391
391
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(j,
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(M);var
|
|
1
|
+
(function(j,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],c):(j=typeof globalThis<"u"?globalThis:j||self,c(j["multi-stepper"]={},j.React))})(this,function(j,c){"use strict";var M=document.createElement("style");M.textContent=`:root{--color-primary: #0284c7;--color-primary-light: #38bdf8;--color-success: #16a34a;--color-error: #ef4444;--color-text: #111827;--color-text-light: #4b5563;--color-black: #000;--color-white: #fff;--color-border: #d1d5db;--color-border-light: #e2e8f0;--spacing-xs: .375rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--step-size: 2.5rem;--step-font-weight: 600;--step-radius: 50%;--spinner-size: 1.5rem;--spinner-thickness: 3px;--spinner-color: #3b82f6;--spinner-track: #e5e7eb;--spinner-speed: .8s}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}.app-container{padding:var(--spacing-lg)}.stepper-header{display:flex;justify-content:space-between}.step-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.step-item:not(:first-child):before{content:"";background-color:var(--color-border-light);position:absolute;width:calc(100% - var(--step-size));height:3px;right:calc(50% + (var(--step-size) / 2));top:calc(var(--step-size) / 2 - .125rem);transition:all .2s}.step{width:var(--step-size);height:var(--step-size);display:flex;align-items:center;justify-content:center;z-index:10;position:relative;border-radius:var(--step-radius);font-weight:var(--step-font-weight);color:var(--color-black);transition:all .2s;border:1px solid var(--color-border)}.step-active{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.step-complete{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-white)}.step-error{background-color:var(--color-error);color:var(--color-white)}.step-finished{background-color:var(--color-success);color:var(--color-white)}.complete:not(:first-child):before,.active:not(:first-child):before{background-color:var(--color-success)}.step-title{font-size:1rem;color:var(--color-text);font-weight:500;margin-top:var(--spacing-md)}.step-description{font-size:.85rem;color:var(--color-text-light);font-weight:300;margin-top:var(--spacing-sm)}.stepper-content{display:flex;justify-content:center;align-items:center}.stepper-footer{display:flex;justify-content:space-around;align-items:center;padding:var(--spacing-lg) var(--spacing-xl)}.stepper-button{padding:var(--spacing-xs) var(--spacing-xl);font-size:1rem;border-radius:.375rem;border:1px solid #9ca3af;background-color:transparent;color:inherit;cursor:pointer}.stepper-button-fill{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.spinner{width:var(--spinner-size);height:var(--spinner-size);border-radius:50%;border:var(--spinner-thickness) solid var(--spinner-track);border-top-color:var(--spinner-color);animation:spin var(--spinner-speed) linear infinite}@media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:var(--spinner-track)}}@keyframes spin{to{transform:rotate(360deg)}}.test-step{padding:10vh;display:flex;justify-content:center;align-items:center}.test-step h3{color:#fff}.step-text{text-align:center}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(M);var y={exports:{}},R={};/**
|
|
3
3
|
* @license React
|
|
4
4
|
* react-jsx-runtime.production.js
|
|
5
5
|
*
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* This source code is licensed under the MIT license found in the
|
|
9
9
|
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/var
|
|
10
|
+
*/var z;function H(){if(z)return R;z=1;var t=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function s(b,i,l){var m=null;if(l!==void 0&&(m=""+l),i.key!==void 0&&(m=""+i.key),"key"in i){l={};for(var v in i)v!=="key"&&(l[v]=i[v])}else l=i;return i=l.ref,{$$typeof:t,type:b,key:m,ref:i!==void 0?i:null,props:l}}return R.Fragment=o,R.jsx=s,R.jsxs=s,R}var k={};/**
|
|
11
11
|
* @license React
|
|
12
12
|
* react-jsx-runtime.development.js
|
|
13
13
|
*
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
*
|
|
16
16
|
* This source code is licensed under the MIT license found in the
|
|
17
17
|
* LICENSE file in the root directory of this source tree.
|
|
18
|
-
*/var
|
|
18
|
+
*/var Y;function B(){return Y||(Y=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===pe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case oe:return"Profiler";case ne:return"StrictMode";case ce:return"Suspense";case le:return"SuspenseList";case de:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case te:return"Portal";case ae:return(e.displayName||"Context")+".Provider";case se:return(e._context.displayName||"Context")+".Consumer";case ie:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case L:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function o(e){return""+e}function s(e){try{o(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,d=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",d),o(e)}}function b(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===L)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=O.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function m(e){if(U.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function v(e,r){function a(){W||(W=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function T(){var e=t(this.type);return J[e]||(J[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function N(e,r,a,d,E,g,A,C){return a=g.ref,e={$$typeof:h,type:e,key:r,props:g,_owner:E},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:T}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function f(e,r,a,d,E,g,A,C){var p=r.children;if(p!==void 0)if(d)if(fe(p)){for(d=0;d<p.length;d++)x(p[d]);Object.freeze&&Object.freeze(p)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else x(p);if(U.call(r,"key")){p=t(e);var _=Object.keys(r).filter(function(me){return me!=="key"});d=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",X[p+d]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
19
19
|
let props = %s;
|
|
20
20
|
<%s {...props} />
|
|
21
21
|
React keys must be passed directly to JSX without using spread:
|
|
22
22
|
let props = %s;
|
|
23
|
-
<%s key={someKey} {...props} />`,d,
|
|
23
|
+
<%s key={someKey} {...props} />`,d,p,_,p),X[p+d]=!0)}if(p=null,a!==void 0&&(s(a),p=""+a),m(r)&&(s(r.key),p=""+r.key),"key"in r){a={};for(var F in r)F!=="key"&&(a[F]=r[F])}else a=r;return p&&v(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),N(e,p,g,E,i(),a,A,C)}function x(e){typeof e=="object"&&e!==null&&e.$$typeof===h&&e._store&&(e._store.validated=1)}var u=c,h=Symbol.for("react.transitional.element"),te=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),ne=Symbol.for("react.strict_mode"),oe=Symbol.for("react.profiler"),se=Symbol.for("react.consumer"),ae=Symbol.for("react.context"),ie=Symbol.for("react.forward_ref"),ce=Symbol.for("react.suspense"),le=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),pe=Symbol.for("react.client.reference"),O=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U=Object.prototype.hasOwnProperty,fe=Array.isArray,P=console.createTask?console.createTask:function(){return null};u={react_stack_bottom_frame:function(e){return e()}};var W,J={},V=u.react_stack_bottom_frame.bind(u,l)(),G=P(b(l)),X={};k.Fragment=w,k.jsx=function(e,r,a,d,E){var g=1e4>O.recentlyCreatedOwnerStacks++;return f(e,r,a,!1,d,E,g?Error("react-stack-top-frame"):V,g?P(b(e)):G)},k.jsxs=function(e,r,a,d,E){var g=1e4>O.recentlyCreatedOwnerStacks++;return f(e,r,a,!0,d,E,g?Error("react-stack-top-frame"):V,g?P(b(e)):G)}}()),k}var I;function Z(){return I||(I=1,process.env.NODE_ENV==="production"?y.exports=H():y.exports=B()),y.exports}var n=Z();const D=c.createContext(void 0),S=()=>{const t=c.useContext(D);if(!t)throw new Error("useMultiStepperForm must be used within a MultiStepperProvider");return t},Q=({children:t,steppers:o})=>{const[s,b]=c.useState(0),[i,l]=c.useState([]);c.useEffect(()=>{if(o.length){const f=[...o];f[0].active=!0,l(f)}},[o.length]);const m=c.useCallback(f=>{l(x=>{const u=[...x];if(f>x.length-1)return x;u[s]&&(u[s]={...u[s],active:!1}),u[f]&&(u[f]={...u[f],active:!0});for(let h=0;h<f;h++)u[h]={...u[h],completed:!0};for(let h=f;h<u.length;h++)u[h]={...u[h],completed:!1};return u}),b(f)},[s]),v=c.useCallback(()=>{s<i.length-1?m(s+1):l(f=>{const x=[...f];return x[s]={...x[s],completed:!0},x})},[s,i.length,m]),T=c.useCallback(()=>{s>0&&m(s-1)},[s,m]),N=c.useMemo(()=>({currentStep:s,steps:i,handleNextStep:v,handlePrevStep:T,updateSteps:m}),[s,i,v,T,m]);return n.jsx(D.Provider,{value:N,children:t})},K=({step:t,index:o})=>{const{steps:s}=S();return s.length?t.loading?n.jsx("div",{className:"step step-loading",children:n.jsx("div",{className:"spinner",role:"status","aria-label":"Loading"})}):t.error?n.jsx("div",{className:"step step-error",children:t.icon??n.jsx("span",{className:"text-white",children:"✗"})}):t.completed?n.jsx("div",{className:"step step-complete",children:t.icon??n.jsx("span",{className:"text-white",children:"✓"})}):t.finshed?n.jsx("div",{className:"step step-complete",children:t.icon}):t.active?n.jsx("div",{className:"step step-active",children:t.icon??n.jsx("h2",{className:"text-white",children:o})}):n.jsx("div",{className:"step step-default",children:t.icon??n.jsx("h2",{children:o})}):n.jsx(c.Fragment,{})},q=()=>{const{steps:t}=S();return t.length?n.jsx("div",{className:"app-container",children:n.jsx("ol",{className:"stepper-header",children:t.map((o,s)=>n.jsxs("div",{className:`step-item ${o.active&&"active"} ${o.completed&&"complete"} `,children:[n.jsx(K,{index:s+1,step:o}),n.jsxs("div",{className:"step-text",children:[o.title&&n.jsx("h3",{className:"step-title",children:o.title}),o.description&&n.jsx("h3",{className:"step-description",children:o.description})]})]},s))})}):n.jsx(c.Fragment,{})},$=({onClickNext:t})=>{const{handleNextStep:o,handlePrevStep:s,currentStep:b,steps:i}=S(),l=b===i.length-1,m=()=>{i[b].completed||(o(),t())},v=c.useMemo(()=>({button:"stepper-button",fill:"stepper-button-fill"}),[]);return n.jsxs("div",{className:"stepper-footer",children:[n.jsx("button",{type:"button",className:v.button,onClick:s,disabled:b<0,children:"Prev"}),n.jsx("button",{type:"button",className:`${l?`${v.button} ${v.fill}`:v.button}`,onClick:m,children:l?"Finish":"Next"})]})},ee=()=>{const{steps:t,currentStep:o}=S();return n.jsx("div",{className:"stepper-content",children:t[o]&&t[o].children&&t[o].children})},re=({steps:t,onClickNext:o})=>t?n.jsxs(Q,{steppers:t,children:[n.jsx(q,{}),n.jsx(ee,{}),n.jsx($,{onClickNext:o})]}):n.jsx(n.Fragment,{});j.MultiStepper=re,Object.defineProperty(j,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"main": "./dist/multi-stepper.umd.js",
|
|
4
4
|
"module": "./dist/multi-stepper.es.js",
|
|
5
5
|
"types": "./dist/index.d.ts",
|
|
6
|
-
"version": "1.1.
|
|
6
|
+
"version": "1.1.7",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
@@ -19,7 +19,10 @@
|
|
|
19
19
|
"dev": "vite",
|
|
20
20
|
"build": "tsc -b && vite build",
|
|
21
21
|
"lint": "eslint .",
|
|
22
|
-
"preview": "vite preview"
|
|
22
|
+
"preview": "vite preview",
|
|
23
|
+
"test": "vitest",
|
|
24
|
+
"test:watch": "vitest --watch",
|
|
25
|
+
"test:coverage": "vitest run --coverage"
|
|
23
26
|
},
|
|
24
27
|
"dependencies": {
|
|
25
28
|
"@vitejs/plugin-react-swc": "^3.11.0",
|
|
@@ -31,17 +34,23 @@
|
|
|
31
34
|
},
|
|
32
35
|
"devDependencies": {
|
|
33
36
|
"@eslint/js": "^9.30.1",
|
|
37
|
+
"@testing-library/jest-dom": "^6.7.0",
|
|
38
|
+
"@testing-library/react": "^16.3.0",
|
|
39
|
+
"@testing-library/user-event": "^14.6.1",
|
|
34
40
|
"@types/node": "^24.1.0",
|
|
35
41
|
"@types/react": "^19.1.8",
|
|
36
42
|
"@types/react-dom": "^19.1.6",
|
|
37
43
|
"@vitejs/plugin-react": "^4.6.0",
|
|
44
|
+
"@vitest/coverage-v8": "^3.2.4",
|
|
38
45
|
"eslint": "^9.30.1",
|
|
39
46
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
40
47
|
"eslint-plugin-react-refresh": "^0.4.20",
|
|
41
48
|
"globals": "^16.3.0",
|
|
49
|
+
"jsdom": "^26.1.0",
|
|
42
50
|
"typescript": "~5.8.3",
|
|
43
51
|
"typescript-eslint": "^8.35.1",
|
|
44
|
-
"vite": "^7.0.4"
|
|
52
|
+
"vite": "^7.0.4",
|
|
53
|
+
"vitest": "^3.2.4"
|
|
45
54
|
},
|
|
46
55
|
"description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
|
|
47
56
|
"keywords": [],
|