smartstepper
Version:
smart-stepper is a powerful React component that simplifies the creation of multi-step forms with state management, validation, and a flexible UI approach. It utilizes a state machine concept to manage step transitions, ensuring a smooth and controlled us
1,128 lines (1,127 loc) • 36.4 kB
JavaScript
import k, { useRef as Ct, createContext as Ot, useContext as Rt, useState as Xe, useEffect as Lt, useMemo as Ee, Children as oe, isValidElement as Ye } from "react";
import { jsx as fe, Fragment as Ut } from "react/jsx-runtime";
var de = (e) => e.type === "checkbox", ue = (e) => e instanceof Date, N = (e) => e == null;
const lt = (e) => typeof e == "object";
var L = (e) => !N(e) && !Array.isArray(e) && lt(e) && !ue(e), at = (e) => L(e) && e.target ? de(e.target) ? e.target.checked : e.target.value : e, Pt = (e) => e.substring(0, e.search(/\.\d+(\.|$)/)) || e, ot = (e, i) => e.has(Pt(i)), Bt = (e) => {
const i = e.constructor && e.constructor.prototype;
return L(i) && i.hasOwnProperty("isPrototypeOf");
}, Ue = typeof window < "u" && typeof window.HTMLElement < "u" && typeof document < "u";
function K(e) {
let i;
const r = Array.isArray(e);
if (e instanceof Date)
i = new Date(e);
else if (e instanceof Set)
i = new Set(e);
else if (!(Ue && (e instanceof Blob || e instanceof FileList)) && (r || L(e)))
if (i = r ? [] : {}, !r && !Bt(e))
i = e;
else
for (const s in e)
e.hasOwnProperty(s) && (i[s] = K(e[s]));
else
return e;
return i;
}
var ye = (e) => Array.isArray(e) ? e.filter(Boolean) : [], C = (e) => e === void 0, d = (e, i, r) => {
if (!i || !L(e))
return r;
const s = ye(i.split(/[,[\].]+?/)).reduce((n, a) => N(n) ? n : n[a], e);
return C(s) || s === e ? C(e[i]) ? r : e[i] : s;
}, z = (e) => typeof e == "boolean";
const be = {
BLUR: "blur",
FOCUS_OUT: "focusout",
CHANGE: "change"
}, G = {
onBlur: "onBlur",
onChange: "onChange",
onSubmit: "onSubmit",
onTouched: "onTouched",
all: "all"
}, X = {
max: "max",
min: "min",
maxLength: "maxLength",
minLength: "minLength",
pattern: "pattern",
required: "required",
validate: "validate"
}, Mt = k.createContext(null), Pe = () => k.useContext(Mt);
var ct = (e, i, r, s = !0) => {
const n = {
defaultValues: i._defaultValues
};
for (const a in e)
Object.defineProperty(n, a, {
get: () => {
const c = a;
return i._proxyFormState[c] !== G.all && (i._proxyFormState[c] = !s || G.all), r && (r[c] = !0), e[c];
}
});
return n;
}, j = (e) => L(e) && !Object.keys(e).length, ft = (e, i, r, s) => {
r(e);
const { name: n, ...a } = e;
return j(a) || Object.keys(a).length >= Object.keys(i).length || Object.keys(a).find((c) => i[c] === (!s || G.all));
}, ve = (e) => Array.isArray(e) ? e : [e], dt = (e, i, r) => !e || !i || e === i || ve(e).some((s) => s && (r ? s === i : s.startsWith(i) || i.startsWith(s)));
function Be(e) {
const i = k.useRef(e);
i.current = e, k.useEffect(() => {
const r = !e.disabled && i.current.subject && i.current.subject.subscribe({
next: i.current.next
});
return () => {
r && r.unsubscribe();
};
}, [e.disabled]);
}
function Nt(e) {
const i = Pe(), { control: r = i.control, disabled: s, name: n, exact: a } = e || {}, [c, V] = k.useState(r._formState), _ = k.useRef(!0), x = k.useRef({
isDirty: !1,
isLoading: !1,
dirtyFields: !1,
touchedFields: !1,
isValidating: !1,
isValid: !1,
errors: !1
}), A = k.useRef(n);
return A.current = n, Be({
disabled: s,
next: (m) => _.current && dt(A.current, m.name, a) && ft(m, x.current, r._updateFormState) && V({
...r._formState,
...m
}),
subject: r._subjects.state
}), k.useEffect(() => (_.current = !0, x.current.isValid && r._updateValid(!0), () => {
_.current = !1;
}), [r]), ct(c, r, x.current, !1);
}
var J = (e) => typeof e == "string", yt = (e, i, r, s, n) => J(e) ? (s && i.watch.add(e), d(r, e, n)) : Array.isArray(e) ? e.map((a) => (s && i.watch.add(a), d(r, a))) : (s && (i.watchAll = !0), r);
function It(e) {
const i = Pe(), { control: r = i.control, name: s, defaultValue: n, disabled: a, exact: c } = e || {}, V = k.useRef(s);
V.current = s, Be({
disabled: a,
subject: r._subjects.values,
next: (A) => {
dt(V.current, A.name, c) && x(K(yt(V.current, r._names, A.values || r._formValues, !1, n)));
}
});
const [_, x] = k.useState(r._getWatch(s, n));
return k.useEffect(() => r._removeUnmounted()), _;
}
var Me = (e) => /^\w*$/.test(e), ht = (e) => ye(e.replace(/["|']|\]/g, "").split(/\.|\[/));
function D(e, i, r) {
let s = -1;
const n = Me(i) ? [i] : ht(i), a = n.length, c = a - 1;
for (; ++s < a; ) {
const V = n[s];
let _ = r;
if (s !== c) {
const x = e[V];
_ = L(x) || Array.isArray(x) ? x : isNaN(+n[s + 1]) ? {} : [];
}
e[V] = _, e = e[V];
}
return e;
}
function gt(e) {
const i = Pe(), { name: r, disabled: s, control: n = i.control, shouldUnregister: a } = e, c = ot(n._names.array, r), V = It({
control: n,
name: r,
defaultValue: d(n._formValues, r, d(n._defaultValues, r, e.defaultValue)),
exact: !0
}), _ = Nt({
control: n,
name: r
}), x = k.useRef(n.register(r, {
...e.rules,
value: V
}));
return x.current = n.register(r, e.rules), k.useEffect(() => {
const A = n._options.shouldUnregister || a, m = (g, M) => {
const T = d(n._fields, g);
T && (T._f.mount = M);
};
if (m(r, !0), A) {
const g = K(d(n._options.defaultValues, r));
D(n._defaultValues, r, g), C(d(n._formValues, r)) && D(n._formValues, r, g);
}
return () => {
(c ? A && !n._state.action : A) ? n.unregister(r) : m(r, !1);
};
}, [r, n, c, a]), k.useEffect(() => {
d(n._fields, r) && n._updateDisabledField({
disabled: s,
fields: n._fields,
name: r,
value: d(n._fields, r)._f.value
});
}, [s, r, n]), {
field: {
name: r,
value: V,
...z(s) || z(_.disabled) ? { disabled: _.disabled || s } : {},
onChange: k.useCallback((A) => x.current.onChange({
target: {
value: at(A),
name: r
},
type: be.CHANGE
}), [r]),
onBlur: k.useCallback(() => x.current.onBlur({
target: {
value: d(n._formValues, r),
name: r
},
type: be.BLUR
}), [r, n]),
ref: (A) => {
const m = d(n._fields, r);
m && A && (m._f.ref = {
focus: () => A.focus(),
select: () => A.select(),
setCustomValidity: (g) => A.setCustomValidity(g),
reportValidity: () => A.reportValidity()
});
}
},
formState: _,
fieldState: Object.defineProperties({}, {
invalid: {
enumerable: !0,
get: () => !!d(_.errors, r)
},
isDirty: {
enumerable: !0,
get: () => !!d(_.dirtyFields, r)
},
isTouched: {
enumerable: !0,
get: () => !!d(_.touchedFields, r)
},
error: {
enumerable: !0,
get: () => d(_.errors, r)
}
})
};
}
const Wt = (e) => e.render(gt(e));
var qt = (e, i, r, s, n) => i ? {
...r[e],
types: {
...r[e] && r[e].types ? r[e].types : {},
[s]: n || !0
}
} : {}, Ze = (e) => ({
isOnSubmit: !e || e === G.onSubmit,
isOnBlur: e === G.onBlur,
isOnChange: e === G.onChange,
isOnAll: e === G.all,
isOnTouch: e === G.onTouched
}), et = (e, i, r) => !r && (i.watchAll || i.watch.has(e) || [...i.watch].some((s) => e.startsWith(s) && /^\.\w+/.test(e.slice(s.length))));
const _e = (e, i, r, s) => {
for (const n of r || Object.keys(e)) {
const a = d(e, n);
if (a) {
const { _f: c, ...V } = a;
if (c) {
if (c.refs && c.refs[0] && i(c.refs[0], n) && !s)
break;
if (c.ref && i(c.ref, c.name) && !s)
break;
} else
L(V) && _e(V, i);
}
}
};
var jt = (e, i, r) => {
const s = ye(d(e, r));
return D(s, "root", i[r]), D(e, r, s), e;
}, Ne = (e) => e.type === "file", te = (e) => typeof e == "function", pe = (e) => {
if (!Ue)
return !1;
const i = e ? e.ownerDocument : 0;
return e instanceof (i && i.defaultView ? i.defaultView.HTMLElement : HTMLElement);
}, Ve = (e) => J(e), Ie = (e) => e.type === "radio", Se = (e) => e instanceof RegExp;
const tt = {
value: !1,
isValid: !1
}, rt = { value: !0, isValid: !0 };
var vt = (e) => {
if (Array.isArray(e)) {
if (e.length > 1) {
const i = e.filter((r) => r && r.checked && !r.disabled).map((r) => r.value);
return { value: i, isValid: !!i.length };
}
return e[0].checked && !e[0].disabled ? (
// @ts-expect-error expected to work in the browser
e[0].attributes && !C(e[0].attributes.value) ? C(e[0].value) || e[0].value === "" ? rt : { value: e[0].value, isValid: !0 } : rt
) : tt;
}
return tt;
};
const st = {
isValid: !1,
value: null
};
var _t = (e) => Array.isArray(e) ? e.reduce((i, r) => r && r.checked && !r.disabled ? {
isValid: !0,
value: r.value
} : i, st) : st;
function it(e, i, r = "validate") {
if (Ve(e) || Array.isArray(e) && e.every(Ve) || z(e) && !e)
return {
type: r,
message: Ve(e) ? e : "",
ref: i
};
}
var ne = (e) => L(e) && !Se(e) ? e : {
value: e,
message: ""
}, nt = async (e, i, r, s, n) => {
const { ref: a, refs: c, required: V, maxLength: _, minLength: x, min: A, max: m, pattern: g, validate: M, name: T, valueAsNumber: Y, mount: Z, disabled: se } = e._f, b = d(i, T);
if (!Z || se)
return {};
const U = c ? c[0] : a, I = (S) => {
s && U.reportValidity && (U.setCustomValidity(z(S) ? "" : S || ""), U.reportValidity());
}, O = {}, W = Ie(a), ee = de(a), le = W || ee, q = (Y || Ne(a)) && C(a.value) && C(b) || pe(a) && a.value === "" || b === "" || Array.isArray(b) && !b.length, Q = qt.bind(null, T, r, O), H = (S, h, p, F = X.maxLength, E = X.minLength) => {
const B = S ? h : p;
O[T] = {
type: S ? F : E,
message: B,
ref: a,
...Q(S ? F : E, B)
};
};
if (n ? !Array.isArray(b) || !b.length : V && (!le && (q || N(b)) || z(b) && !b || ee && !vt(c).isValid || W && !_t(c).isValid)) {
const { value: S, message: h } = Ve(V) ? { value: !!V, message: V } : ne(V);
if (S && (O[T] = {
type: X.required,
message: h,
ref: U,
...Q(X.required, h)
}, !r))
return I(h), O;
}
if (!q && (!N(A) || !N(m))) {
let S, h;
const p = ne(m), F = ne(A);
if (!N(b) && !isNaN(b)) {
const E = a.valueAsNumber || b && +b;
N(p.value) || (S = E > p.value), N(F.value) || (h = E < F.value);
} else {
const E = a.valueAsDate || new Date(b), B = (he) => /* @__PURE__ */ new Date((/* @__PURE__ */ new Date()).toDateString() + " " + he), $ = a.type == "time", ae = a.type == "week";
J(p.value) && b && (S = $ ? B(b) > B(p.value) : ae ? b > p.value : E > new Date(p.value)), J(F.value) && b && (h = $ ? B(b) < B(F.value) : ae ? b < F.value : E < new Date(F.value));
}
if ((S || h) && (H(!!S, p.message, F.message, X.max, X.min), !r))
return I(O[T].message), O;
}
if ((_ || x) && !q && (J(b) || n && Array.isArray(b))) {
const S = ne(_), h = ne(x), p = !N(S.value) && b.length > +S.value, F = !N(h.value) && b.length < +h.value;
if ((p || F) && (H(p, S.message, h.message), !r))
return I(O[T].message), O;
}
if (g && !q && J(b)) {
const { value: S, message: h } = ne(g);
if (Se(S) && !b.match(S) && (O[T] = {
type: X.pattern,
message: h,
ref: a,
...Q(X.pattern, h)
}, !r))
return I(h), O;
}
if (M) {
if (te(M)) {
const S = await M(b, i), h = it(S, U);
if (h && (O[T] = {
...h,
...Q(X.validate, h.message)
}, !r))
return I(h.message), O;
} else if (L(M)) {
let S = {};
for (const h in M) {
if (!j(S) && !r)
break;
const p = it(await M[h](b, i), U, h);
p && (S = {
...p,
...Q(h, p.message)
}, I(p.message), r && (O[T] = S));
}
if (!j(S) && (O[T] = {
ref: U,
...S
}, !r))
return O;
}
}
return I(!0), O;
};
function Ht(e, i) {
const r = i.slice(0, -1).length;
let s = 0;
for (; s < r; )
e = C(e) ? s++ : e[i[s++]];
return e;
}
function $t(e) {
for (const i in e)
if (e.hasOwnProperty(i) && !C(e[i]))
return !1;
return !0;
}
function P(e, i) {
const r = Array.isArray(i) ? i : Me(i) ? [i] : ht(i), s = r.length === 1 ? e : Ht(e, r), n = r.length - 1, a = r[n];
return s && delete s[a], n !== 0 && (L(s) && j(s) || Array.isArray(s) && $t(s)) && P(e, r.slice(0, -1)), e;
}
function Te() {
let e = [];
return {
get observers() {
return e;
},
next: (n) => {
for (const a of e)
a.next && a.next(n);
},
subscribe: (n) => (e.push(n), {
unsubscribe: () => {
e = e.filter((a) => a !== n);
}
}),
unsubscribe: () => {
e = [];
}
};
}
var me = (e) => N(e) || !lt(e);
function re(e, i) {
if (me(e) || me(i))
return e === i;
if (ue(e) && ue(i))
return e.getTime() === i.getTime();
const r = Object.keys(e), s = Object.keys(i);
if (r.length !== s.length)
return !1;
for (const n of r) {
const a = e[n];
if (!s.includes(n))
return !1;
if (n !== "ref") {
const c = i[n];
if (ue(a) && ue(c) || L(a) && L(c) || Array.isArray(a) && Array.isArray(c) ? !re(a, c) : a !== c)
return !1;
}
}
return !0;
}
var Vt = (e) => e.type === "select-multiple", Kt = (e) => Ie(e) || de(e), Ce = (e) => pe(e) && e.isConnected, bt = (e) => {
for (const i in e)
if (te(e[i]))
return !0;
return !1;
};
function xe(e, i = {}) {
const r = Array.isArray(e);
if (L(e) || r)
for (const s in e)
Array.isArray(e[s]) || L(e[s]) && !bt(e[s]) ? (i[s] = Array.isArray(e[s]) ? [] : {}, xe(e[s], i[s])) : N(e[s]) || (i[s] = !0);
return i;
}
function pt(e, i, r) {
const s = Array.isArray(e);
if (L(e) || s)
for (const n in e)
Array.isArray(e[n]) || L(e[n]) && !bt(e[n]) ? C(i) || me(r[n]) ? r[n] = Array.isArray(e[n]) ? xe(e[n], []) : { ...xe(e[n]) } : pt(e[n], N(i) ? {} : i[n], r[n]) : r[n] = !re(e[n], i[n]);
return r;
}
var Oe = (e, i) => pt(e, i, xe(i)), St = (e, { valueAsNumber: i, valueAsDate: r, setValueAs: s }) => C(e) ? e : i ? e === "" ? NaN : e && +e : r && J(e) ? new Date(e) : s ? s(e) : e;
function Re(e) {
const i = e.ref;
if (!(e.refs ? e.refs.every((r) => r.disabled) : i.disabled))
return Ne(i) ? i.files : Ie(i) ? _t(e.refs).value : Vt(i) ? [...i.selectedOptions].map(({ value: r }) => r) : de(i) ? vt(e.refs).value : St(C(i.value) ? e.ref.value : i.value, e);
}
var Gt = (e, i, r, s) => {
const n = {};
for (const a of e) {
const c = d(i, a);
c && D(n, a, c._f);
}
return {
criteriaMode: r,
names: [...e],
fields: n,
shouldUseNativeValidation: s
};
}, ce = (e) => C(e) ? e : Se(e) ? e.source : L(e) ? Se(e.value) ? e.value.source : e.value : e, zt = (e) => e.mount && (e.required || e.min || e.max || e.maxLength || e.minLength || e.pattern || e.validate);
function ut(e, i, r) {
const s = d(e, r);
if (s || Me(r))
return {
error: s,
name: r
};
const n = r.split(".");
for (; n.length; ) {
const a = n.join("."), c = d(i, a), V = d(e, a);
if (c && !Array.isArray(c) && r !== a)
return { name: r };
if (V && V.type)
return {
name: a,
error: V
};
n.pop();
}
return {
name: r
};
}
var Jt = (e, i, r, s, n) => n.isOnAll ? !1 : !r && n.isOnTouch ? !(i || e) : (r ? s.isOnBlur : n.isOnBlur) ? !e : (r ? s.isOnChange : n.isOnChange) ? e : !0, Qt = (e, i) => !ye(d(e, i)).length && P(e, i);
const Xt = {
mode: G.onSubmit,
reValidateMode: G.onChange,
shouldFocusError: !0
};
function Yt(e = {}, i) {
let r = {
...Xt,
...e
}, s = {
submitCount: 0,
isDirty: !1,
isLoading: te(r.defaultValues),
isValidating: !1,
isSubmitted: !1,
isSubmitting: !1,
isSubmitSuccessful: !1,
isValid: !1,
touchedFields: {},
dirtyFields: {},
errors: {},
disabled: !1
}, n = {}, a = L(r.defaultValues) || L(r.values) ? K(r.defaultValues || r.values) || {} : {}, c = r.shouldUnregister ? {} : K(a), V = {
action: !1,
mount: !1,
watch: !1
}, _ = {
mount: /* @__PURE__ */ new Set(),
unMount: /* @__PURE__ */ new Set(),
array: /* @__PURE__ */ new Set(),
watch: /* @__PURE__ */ new Set()
}, x, A = 0;
const m = {
isDirty: !1,
dirtyFields: !1,
touchedFields: !1,
isValidating: !1,
isValid: !1,
errors: !1
}, g = {
values: Te(),
array: Te(),
state: Te()
}, M = e.resetOptions && e.resetOptions.keepDirtyValues, T = Ze(r.mode), Y = Ze(r.reValidateMode), Z = r.criteriaMode === G.all, se = (t) => (u) => {
clearTimeout(A), A = setTimeout(t, u);
}, b = async (t) => {
if (m.isValid || t) {
const u = r.resolver ? j((await q()).errors) : await H(n, !0);
u !== s.isValid && g.state.next({
isValid: u
});
}
}, U = (t) => m.isValidating && g.state.next({
isValidating: t
}), I = (t, u = [], l, y, f = !0, o = !0) => {
if (y && l) {
if (V.action = !0, o && Array.isArray(d(n, t))) {
const v = l(d(n, t), y.argA, y.argB);
f && D(n, t, v);
}
if (o && Array.isArray(d(s.errors, t))) {
const v = l(d(s.errors, t), y.argA, y.argB);
f && D(s.errors, t, v), Qt(s.errors, t);
}
if (m.touchedFields && o && Array.isArray(d(s.touchedFields, t))) {
const v = l(d(s.touchedFields, t), y.argA, y.argB);
f && D(s.touchedFields, t, v);
}
m.dirtyFields && (s.dirtyFields = Oe(a, c)), g.state.next({
name: t,
isDirty: h(t, u),
dirtyFields: s.dirtyFields,
errors: s.errors,
isValid: s.isValid
});
} else
D(c, t, u);
}, O = (t, u) => {
D(s.errors, t, u), g.state.next({
errors: s.errors
});
}, W = (t, u, l, y) => {
const f = d(n, t);
if (f) {
const o = d(c, t, C(l) ? d(a, t) : l);
C(o) || y && y.defaultChecked || u ? D(c, t, u ? o : Re(f._f)) : E(t, o), V.mount && b();
}
}, ee = (t, u, l, y, f) => {
let o = !1, v = !1;
const w = {
name: t
};
if (!l || y) {
m.isDirty && (v = s.isDirty, s.isDirty = w.isDirty = h(), o = v !== w.isDirty);
const R = re(d(a, t), u);
v = d(s.dirtyFields, t), R ? P(s.dirtyFields, t) : D(s.dirtyFields, t, !0), w.dirtyFields = s.dirtyFields, o = o || m.dirtyFields && v !== !R;
}
if (l) {
const R = d(s.touchedFields, t);
R || (D(s.touchedFields, t, l), w.touchedFields = s.touchedFields, o = o || m.touchedFields && R !== l);
}
return o && f && g.state.next(w), o ? w : {};
}, le = (t, u, l, y) => {
const f = d(s.errors, t), o = m.isValid && z(u) && s.isValid !== u;
if (e.delayError && l ? (x = se(() => O(t, l)), x(e.delayError)) : (clearTimeout(A), x = null, l ? D(s.errors, t, l) : P(s.errors, t)), (l ? !re(f, l) : f) || !j(y) || o) {
const v = {
...y,
...o && z(u) ? { isValid: u } : {},
errors: s.errors,
name: t
};
s = {
...s,
...v
}, g.state.next(v);
}
U(!1);
}, q = async (t) => r.resolver(c, r.context, Gt(t || _.mount, n, r.criteriaMode, r.shouldUseNativeValidation)), Q = async (t) => {
const { errors: u } = await q(t);
if (t)
for (const l of t) {
const y = d(u, l);
y ? D(s.errors, l, y) : P(s.errors, l);
}
else
s.errors = u;
return u;
}, H = async (t, u, l = {
valid: !0
}) => {
for (const y in t) {
const f = t[y];
if (f) {
const { _f: o, ...v } = f;
if (o) {
const w = _.array.has(o.name), R = await nt(f, c, Z, r.shouldUseNativeValidation && !u, w);
if (R[o.name] && (l.valid = !1, u))
break;
!u && (d(R, o.name) ? w ? jt(s.errors, R, o.name) : D(s.errors, o.name, R[o.name]) : P(s.errors, o.name));
}
v && await H(v, u, l);
}
}
return l.valid;
}, S = () => {
for (const t of _.unMount) {
const u = d(n, t);
u && (u._f.refs ? u._f.refs.every((l) => !Ce(l)) : !Ce(u._f.ref)) && Ae(t);
}
_.unMount = /* @__PURE__ */ new Set();
}, h = (t, u) => (t && u && D(c, t, u), !re(We(), a)), p = (t, u, l) => yt(t, _, {
...V.mount ? c : C(u) ? a : J(t) ? { [t]: u } : u
}, l, u), F = (t) => ye(d(V.mount ? c : a, t, e.shouldUnregister ? d(a, t, []) : [])), E = (t, u, l = {}) => {
const y = d(n, t);
let f = u;
if (y) {
const o = y._f;
o && (!o.disabled && D(c, t, St(u, o)), f = pe(o.ref) && N(u) ? "" : u, Vt(o.ref) ? [...o.ref.options].forEach((v) => v.selected = f.includes(v.value)) : o.refs ? de(o.ref) ? o.refs.length > 1 ? o.refs.forEach((v) => (!v.defaultChecked || !v.disabled) && (v.checked = Array.isArray(f) ? !!f.find((w) => w === v.value) : f === v.value)) : o.refs[0] && (o.refs[0].checked = !!f) : o.refs.forEach((v) => v.checked = v.value === f) : Ne(o.ref) ? o.ref.value = "" : (o.ref.value = f, o.ref.type || g.values.next({
name: t,
values: { ...c }
})));
}
(l.shouldDirty || l.shouldTouch) && ee(t, f, l.shouldTouch, l.shouldDirty, !0), l.shouldValidate && Fe(t);
}, B = (t, u, l) => {
for (const y in u) {
const f = u[y], o = `${t}.${y}`, v = d(n, o);
(_.array.has(t) || !me(f) || v && !v._f) && !ue(f) ? B(o, f, l) : E(o, f, l);
}
}, $ = (t, u, l = {}) => {
const y = d(n, t), f = _.array.has(t), o = K(u);
D(c, t, o), f ? (g.array.next({
name: t,
values: { ...c }
}), (m.isDirty || m.dirtyFields) && l.shouldDirty && g.state.next({
name: t,
dirtyFields: Oe(a, c),
isDirty: h(t, o)
})) : y && !y._f && !N(o) ? B(t, o, l) : E(t, o, l), et(t, _) && g.state.next({ ...s }), g.values.next({
name: t,
values: { ...c }
}), !V.mount && i();
}, ae = async (t) => {
const u = t.target;
let l = u.name, y = !0;
const f = d(n, l), o = () => u.type ? Re(f._f) : at(t), v = (w) => {
y = Number.isNaN(w) || w === d(c, l, w);
};
if (f) {
let w, R;
const ge = o(), ie = t.type === be.BLUR || t.type === be.FOCUS_OUT, kt = !zt(f._f) && !r.resolver && !d(s.errors, l) && !f._f.deps || Jt(ie, d(s.touchedFields, l), s.isSubmitted, Y, T), De = et(l, _, ie);
D(c, l, ge), ie ? (f._f.onBlur && f._f.onBlur(t), x && x(0)) : f._f.onChange && f._f.onChange(t);
const ke = ee(l, ge, ie, !1), Et = !j(ke) || De;
if (!ie && g.values.next({
name: l,
type: t.type,
values: { ...c }
}), kt)
return m.isValid && b(), Et && g.state.next({ name: l, ...De ? {} : ke });
if (!ie && De && g.state.next({ ...s }), U(!0), r.resolver) {
const { errors: Je } = await q([l]);
if (v(ge), y) {
const Tt = ut(s.errors, n, l), Qe = ut(Je, n, Tt.name || l);
w = Qe.error, l = Qe.name, R = j(Je);
}
} else
w = (await nt(f, c, Z, r.shouldUseNativeValidation))[l], v(ge), y && (w ? R = !1 : m.isValid && (R = await H(n, !0)));
y && (f._f.deps && Fe(f._f.deps), le(l, R, w, ke));
}
}, he = (t, u) => {
if (d(s.errors, u) && t.focus)
return t.focus(), 1;
}, Fe = async (t, u = {}) => {
let l, y;
const f = ve(t);
if (U(!0), r.resolver) {
const o = await Q(C(t) ? t : f);
l = j(o), y = t ? !f.some((v) => d(o, v)) : l;
} else
t ? (y = (await Promise.all(f.map(async (o) => {
const v = d(n, o);
return await H(v && v._f ? { [o]: v } : v);
}))).every(Boolean), !(!y && !s.isValid) && b()) : y = l = await H(n);
return g.state.next({
...!J(t) || m.isValid && l !== s.isValid ? {} : { name: t },
...r.resolver || !t ? { isValid: l } : {},
errors: s.errors,
isValidating: !1
}), u.shouldFocus && !y && _e(n, he, t ? f : _.mount), y;
}, We = (t) => {
const u = {
...a,
...V.mount ? c : {}
};
return C(t) ? u : J(t) ? d(u, t) : t.map((l) => d(u, l));
}, qe = (t, u) => ({
invalid: !!d((u || s).errors, t),
isDirty: !!d((u || s).dirtyFields, t),
isTouched: !!d((u || s).touchedFields, t),
error: d((u || s).errors, t)
}), Ft = (t) => {
t && ve(t).forEach((u) => P(s.errors, u)), g.state.next({
errors: t ? s.errors : {}
});
}, je = (t, u, l) => {
const y = (d(n, t, { _f: {} })._f || {}).ref;
D(s.errors, t, {
...u,
ref: y
}), g.state.next({
name: t,
errors: s.errors,
isValid: !1
}), l && l.shouldFocus && y && y.focus && y.focus();
}, At = (t, u) => te(t) ? g.values.subscribe({
next: (l) => t(p(void 0, u), l)
}) : p(t, u, !0), Ae = (t, u = {}) => {
for (const l of t ? ve(t) : _.mount)
_.mount.delete(l), _.array.delete(l), u.keepValue || (P(n, l), P(c, l)), !u.keepError && P(s.errors, l), !u.keepDirty && P(s.dirtyFields, l), !u.keepTouched && P(s.touchedFields, l), !r.shouldUnregister && !u.keepDefaultValue && P(a, l);
g.values.next({
values: { ...c }
}), g.state.next({
...s,
...u.keepDirty ? { isDirty: h() } : {}
}), !u.keepIsValid && b();
}, He = ({ disabled: t, name: u, field: l, fields: y, value: f }) => {
if (z(t)) {
const o = t ? void 0 : C(f) ? Re(l ? l._f : d(y, u)._f) : f;
D(c, u, o), ee(u, o, !1, !1, !0);
}
}, we = (t, u = {}) => {
let l = d(n, t);
const y = z(u.disabled);
return D(n, t, {
...l || {},
_f: {
...l && l._f ? l._f : { ref: { name: t } },
name: t,
mount: !0,
...u
}
}), _.mount.add(t), l ? He({
field: l,
disabled: u.disabled,
name: t
}) : W(t, !0, u.value), {
...y ? { disabled: u.disabled } : {},
...r.progressive ? {
required: !!u.required,
min: ce(u.min),
max: ce(u.max),
minLength: ce(u.minLength),
maxLength: ce(u.maxLength),
pattern: ce(u.pattern)
} : {},
name: t,
onChange: ae,
onBlur: ae,
ref: (f) => {
if (f) {
we(t, u), l = d(n, t);
const o = C(f.value) && f.querySelectorAll && f.querySelectorAll("input,select,textarea")[0] || f, v = Kt(o), w = l._f.refs || [];
if (v ? w.find((R) => R === o) : o === l._f.ref)
return;
D(n, t, {
_f: {
...l._f,
...v ? {
refs: [
...w.filter(Ce),
o,
...Array.isArray(d(a, t)) ? [{}] : []
],
ref: { type: o.type, name: t }
} : { ref: o }
}
}), W(t, !1, void 0, o);
} else
l = d(n, t, {}), l._f && (l._f.mount = !1), (r.shouldUnregister || u.shouldUnregister) && !(ot(_.array, t) && V.action) && _.unMount.add(t);
}
};
}, $e = () => r.shouldFocusError && _e(n, he, _.mount), wt = (t) => {
z(t) && (g.state.next({ disabled: t }), _e(n, (u) => {
u.disabled = t;
}, 0, !1));
}, Ke = (t, u) => async (l) => {
l && (l.preventDefault && l.preventDefault(), l.persist && l.persist());
let y = K(c);
if (g.state.next({
isSubmitting: !0
}), r.resolver) {
const { errors: f, values: o } = await q();
s.errors = f, y = o;
} else
await H(n);
P(s.errors, "root"), j(s.errors) ? (g.state.next({
errors: {}
}), await t(y, l)) : (u && await u({ ...s.errors }, l), $e(), setTimeout($e)), g.state.next({
isSubmitted: !0,
isSubmitting: !1,
isSubmitSuccessful: j(s.errors),
submitCount: s.submitCount + 1,
errors: s.errors
});
}, Dt = (t, u = {}) => {
d(n, t) && (C(u.defaultValue) ? $(t, d(a, t)) : ($(t, u.defaultValue), D(a, t, u.defaultValue)), u.keepTouched || P(s.touchedFields, t), u.keepDirty || (P(s.dirtyFields, t), s.isDirty = u.defaultValue ? h(t, d(a, t)) : h()), u.keepError || (P(s.errors, t), m.isValid && b()), g.state.next({ ...s }));
}, Ge = (t, u = {}) => {
const l = t ? K(t) : a, y = K(l), f = t && !j(t) ? y : a;
if (u.keepDefaultValues || (a = l), !u.keepValues) {
if (u.keepDirtyValues || M)
for (const o of _.mount)
d(s.dirtyFields, o) ? D(f, o, d(c, o)) : $(o, d(f, o));
else {
if (Ue && C(t))
for (const o of _.mount) {
const v = d(n, o);
if (v && v._f) {
const w = Array.isArray(v._f.refs) ? v._f.refs[0] : v._f.ref;
if (pe(w)) {
const R = w.closest("form");
if (R) {
R.reset();
break;
}
}
}
}
n = {};
}
c = e.shouldUnregister ? u.keepDefaultValues ? K(a) : {} : K(f), g.array.next({
values: { ...f }
}), g.values.next({
values: { ...f }
});
}
_ = {
mount: /* @__PURE__ */ new Set(),
unMount: /* @__PURE__ */ new Set(),
array: /* @__PURE__ */ new Set(),
watch: /* @__PURE__ */ new Set(),
watchAll: !1,
focus: ""
}, !V.mount && i(), V.mount = !m.isValid || !!u.keepIsValid, V.watch = !!e.shouldUnregister, g.state.next({
submitCount: u.keepSubmitCount ? s.submitCount : 0,
isDirty: u.keepDirty ? s.isDirty : !!(u.keepDefaultValues && !re(t, a)),
isSubmitted: u.keepIsSubmitted ? s.isSubmitted : !1,
dirtyFields: u.keepDirtyValues ? s.dirtyFields : u.keepDefaultValues && t ? Oe(a, t) : {},
touchedFields: u.keepTouched ? s.touchedFields : {},
errors: u.keepErrors ? s.errors : {},
isSubmitSuccessful: u.keepIsSubmitSuccessful ? s.isSubmitSuccessful : !1,
isSubmitting: !1
});
}, ze = (t, u) => Ge(te(t) ? t(c) : t, u);
return {
control: {
register: we,
unregister: Ae,
getFieldState: qe,
handleSubmit: Ke,
setError: je,
_executeSchema: q,
_getWatch: p,
_getDirty: h,
_updateValid: b,
_removeUnmounted: S,
_updateFieldArray: I,
_updateDisabledField: He,
_getFieldArray: F,
_reset: Ge,
_resetDefaultValues: () => te(r.defaultValues) && r.defaultValues().then((t) => {
ze(t, r.resetOptions), g.state.next({
isLoading: !1
});
}),
_updateFormState: (t) => {
s = {
...s,
...t
};
},
_disableForm: wt,
_subjects: g,
_proxyFormState: m,
get _fields() {
return n;
},
get _formValues() {
return c;
},
get _state() {
return V;
},
set _state(t) {
V = t;
},
get _defaultValues() {
return a;
},
get _names() {
return _;
},
set _names(t) {
_ = t;
},
get _formState() {
return s;
},
set _formState(t) {
s = t;
},
get _options() {
return r;
},
set _options(t) {
r = {
...r,
...t
};
}
},
trigger: Fe,
register: we,
handleSubmit: Ke,
watch: At,
setValue: $,
getValues: We,
reset: ze,
resetField: Dt,
clearErrors: Ft,
unregister: Ae,
setError: je,
setFocus: (t, u = {}) => {
const l = d(n, t), y = l && l._f;
if (y) {
const f = y.refs ? y.refs[0] : y.ref;
f.focus && (f.focus(), u.shouldSelect && f.select());
}
},
getFieldState: qe
};
}
function Zt(e = {}) {
const i = k.useRef(), r = k.useRef(), [s, n] = k.useState({
isDirty: !1,
isValidating: !1,
isLoading: te(e.defaultValues),
isSubmitted: !1,
isSubmitting: !1,
isSubmitSuccessful: !1,
isValid: !1,
submitCount: 0,
dirtyFields: {},
touchedFields: {},
errors: {},
disabled: !1,
defaultValues: te(e.defaultValues) ? void 0 : e.defaultValues
});
i.current || (i.current = {
...Yt(e, () => n((c) => ({ ...c }))),
formState: s
});
const a = i.current.control;
return a._options = e, Be({
subject: a._subjects.state,
next: (c) => {
ft(c, a._proxyFormState, a._updateFormState, !0) && n({ ...a._formState });
}
}), k.useEffect(() => a._disableForm(e.disabled), [a, e.disabled]), k.useEffect(() => {
if (a._proxyFormState.isDirty) {
const c = a._getDirty();
c !== s.isDirty && a._subjects.state.next({
isDirty: c
});
}
}, [a, s.isDirty]), k.useEffect(() => {
e.values && !re(e.values, r.current) ? (a._reset(e.values, a._options.resetOptions), r.current = e.values) : a._resetDefaultValues();
}, [e.values, a]), k.useEffect(() => {
a._state.mount || (a._updateValid(), a._state.mount = !0), a._state.watch && (a._state.watch = !1, a._subjects.state.next({ ...a._formState })), a._removeUnmounted();
}), i.current.formState = ct(s, a), i.current;
}
function er() {
const e = Ct(null);
return { scrollRef: e, handleScrollOnElement: (s = {
behavior: "smooth",
block: "center"
}) => {
var n;
(n = e.current) == null || n.scrollIntoView(s);
}, handleScrollToTopOfPage: () => {
window.scrollTo({ top: 0, behavior: "smooth" });
} };
}
const mt = Ot({}), xt = () => Rt(mt), ar = (e) => {
const { control: i } = xt();
return gt({ control: i, ...e });
}, tr = ({
onSubmit: e,
children: i,
resolver: r,
changeStepScrollMode: s = "step",
...n
}) => {
const {
trigger: a,
getValues: c,
setValue: V,
register: _,
unregister: x,
control: A,
reset: m
} = Zt({
resolver: r,
mode: "onBlur"
}), [g, M] = Xe(0), [T, Y] = Xe([]), {
scrollRef: Z,
handleScrollOnElement: se,
handleScrollToTopOfPage: b
} = er();
Lt(() => {
const h = setTimeout(() => {
Z && s === "step" ? se() : b();
}, 100);
return () => clearTimeout(h);
}, [
g,
se,
Z,
b,
s
]);
const U = Ee(() => {
if (oe.toArray(i).some((p) => !Ye(p) || p.type !== Le))
throw new Error("SmartStepper only accepts Step components as children.");
return oe.toArray(i);
}, [i]), I = (h, p = []) => h.length < 1 ? [] : (h.forEach((F) => {
Ye(F) && F.type === Le && (p.push(F.props.stepName), I(
oe.toArray(F.props.children),
p
));
}), p), O = Ee(() => I(U), [U]), W = Ee(
() => {
var h;
return ((h = U[g]) == null ? void 0 : h.props.fieldsForValidation) || [];
},
[g, U]
), ee = async (h) => {
h.preventDefault(), await a(W) && e && e(c());
}, le = async (h, p) => {
h ? (p && x(W), M(O.indexOf(h)), Y((F) => F.some((E) => E === g) ? F : [...F, g])) : await a(W) && (Y((E) => E.some((B) => B === g) ? E : [...E, g]), M((E) => E === oe.count(i) - 1 ? E : E + 1));
}, q = () => {
if (T.length !== 0) {
const h = T[T.length - 1];
x(W), M(h);
}
Y((h) => h.slice(0, h.length - 1));
}, Q = (h) => {
const p = O.indexOf(h);
if (p < 0)
throw new Error("There is not step with the name of targetStep");
if (g < p)
throw new Error("Target step should not be after the current step");
{
M(p);
const F = T.indexOf(p);
T.filter(
(B, $) => B !== p && $ > F
).forEach((B) => {
const $ = U[B].props.fieldsForValidation || [];
x($);
}), x(W), Y(T.slice(0, F));
}
}, H = async () => await a(W), S = () => oe.toArray(i)[g];
return /* @__PURE__ */ fe(
mt.Provider,
{
value: {
navigateToNextStep: le,
navigateToPreviousStep: q,
navigateToPreviousStepWithTargetStep: Q,
registerStepperFields: _,
getStepperFieldValues: c,
setStepperFieldValues: V,
stepperFieldResetter: m,
canNavigateToNextStep: H,
control: A
},
children: /* @__PURE__ */ fe("div", { ref: Z, children: /* @__PURE__ */ fe("form", { onSubmit: ee, ...n, children: S() }) })
}
);
}, Le = ({ children: e }) => /* @__PURE__ */ fe(Ut, { children: e }), rr = (e) => {
const { control: i } = xt();
return /* @__PURE__ */ fe(Wt, { control: i, ...e });
}, or = Object.assign(tr, {
Step: Le,
Controller: rr
});
export {
or as SmartStepper,
gt as useController,
er as useScroll,
xt as useSmartStepper,
ar as useSmartStepperController
};