react-forminate
Version:
React.js + Typescript package that creates dynamic UI forms based on the JSON schema
2,369 lines • 70.9 kB
JavaScript
var Ft = Object.defineProperty;
var Et = (t, e, s) => e in t ? Ft(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
var te = (t, e, s) => Et(t, typeof e != "symbol" ? e + "" : e, s);
import M, { useState as se, useRef as pe, createContext as ye, useContext as W, useCallback as X, useMemo as R, useEffect as ie, memo as Ct, lazy as q, forwardRef as St, Suspense as At } from "react";
const Rt = [
// React-specific
"className",
"htmlFor",
"defaultValue",
"defaultChecked",
"onChange",
"onClick",
"onBlur",
"onFocus",
"onKeyDown",
"onKeyUp",
"onMouseEnter",
"onMouseLeave",
"onInput",
"onSubmit",
"onInvalid",
"children",
"key",
"ref",
"style",
"dangerouslySetInnerHTML",
"suppressContentEditableWarning",
"suppressHydrationWarning",
// Accessibility / ARIA
"role",
"tabIndex",
"aria-hidden",
"aria-label",
"aria-labelledby",
"aria-describedby",
"aria-live",
"aria-expanded",
"aria-checked",
"aria-disabled",
"aria-required",
// Data attributes
"data-testid",
"data-*",
// Form/input related
"name",
"type",
"value",
"placeholder",
"checked",
"disabled",
"readOnly",
"required",
"min",
"max",
"minLength",
"maxLength",
"pattern",
"step",
"multiple",
"accept",
"autoFocus",
"autoComplete",
"autoCorrect",
"spellCheck",
"form",
"formAction",
"formMethod",
"formNoValidate",
"formTarget",
"inputMode",
"list",
"rows",
"cols",
// Common HTML attributes
"id",
"title",
"hidden",
"dir",
"lang",
"contentEditable",
"draggable",
"accessKey",
// Media
"src",
"alt",
"width",
"height",
"poster",
"preload",
"controls",
"muted",
"loop",
"playsInline",
// Anchor/link
"href",
"target",
"download",
"rel",
// Misc
"dangerouslySetInnerHTML"
// Add more if needed
], Ot = {
input: "input",
textarea: "textarea",
select: "select",
button: "button",
form: "form",
div: "div",
span: "span",
label: "label",
a: "a",
img: "img",
radio: "input",
checkbox: "input",
file: "input"
// Add more if needed
}, Qe = ["checkbox", "multiSelect"], jt = (t) => {
const e = [], r = t.toString().match(
/(values|formValues|values\?)\.([a-zA-Z0-9_]+)/g
);
return r && r.forEach((n) => {
const a = n.split(".")[1];
e.push(a);
}), e;
}, et = (t) => typeof t == "function" ? {
fn: t,
dependsOn: [...jt(t)]
} : t, Tt = (t, e = {}) => {
function s(a) {
const o = [];
for (const c in a)
typeof a[c] == "object" && a[c] !== null && Array.isArray(a[c]?.dependsOn) && o.push(...a[c].dependsOn);
return o;
}
function r(a) {
for (const o of a) {
if (!o.fieldId) continue;
const c = s(o);
for (const d of c)
e[d] || (e[d] = /* @__PURE__ */ new Set()), e[d].add(o.fieldId);
Array.isArray(o.fields) && r(o.fields);
}
}
r(t);
const n = {};
for (const a in e)
n[a] = Array.from(e[a]);
return n;
}, tt = {
checkbox: [],
number: "",
tel: "",
text: "",
email: "",
url: "",
password: "",
search: "",
date: "",
radio: "",
select: "",
textarea: "",
gridview: [],
container: {},
spacer: "",
group: [],
file: {}
// Add other field types as needed
};
function ze(t) {
return t.type === "select" || t.type === "multiSelect";
}
function kt(t, e, s = []) {
const r = document.createElement(Ot[t] || "div"), n = /* @__PURE__ */ new Set();
for (const o in r)
n.add(o);
Rt?.forEach((o) => n.add(o));
const a = (o) => !s.includes(o) && (n.has(o) || o.startsWith("data-") || o.startsWith("aria-"));
return Object.fromEntries(
Object.entries(e).filter(([o]) => a(o))
);
}
const we = (t, e = [], s = {}, r) => {
for (const n of e) {
if (n.fieldId === t)
return n;
if (n.fields && n.fields.length > 0) {
const a = we(t, n.fields, s);
if (a)
return a;
}
}
return null;
}, Nt = (t) => {
if (!t?.fields) return [];
const e = /* @__PURE__ */ new Set(), s = [...t.fields];
for (; s.length; ) {
const r = s.pop();
typeof r?.type == "string" && (e.add(r.type), Array.isArray(r.fields) && s.push(...r.fields));
}
return Array.from(e);
}, _t = (t) => {
if (typeof t == "number") return !0;
if (typeof t == "string") {
const e = t.trim();
return !isNaN(e) && !isNaN(parseFloat(e));
}
return !1;
}, ue = class ue {
constructor() {
te(this, "cache", /* @__PURE__ */ new Map());
}
static getInstance() {
return ue.instance || (ue.instance = new ue()), ue.instance;
}
process(e, s = {}, r) {
const n = this.getCacheKey(e, s);
if (this.cache.has(n))
return this.cache.get(n);
const a = this.processField(e, s, r);
return this.cache.set(n, a), a;
}
processAllFields(e, s, r) {
return e.map((n) => this.process(n, s, r));
}
processField(e, s, r) {
const n = {
fieldId: e.fieldId,
values: s,
fieldSchema: e,
formSchema: r
}, a = ls.processFieldProps(e, n);
return e.fields && e.fields.length > 0 && (a.fields = e.fields.map(
(o) => this.processField(o, s, r)
)), a;
}
getCacheKey(e, s) {
const n = this.getFieldDependencies(e).map((a) => `${a}:${JSON.stringify(s[a])}`).join("|");
return `${e.fieldId}|${n}|${JSON.stringify(e)}`;
}
getFieldDependencies(e) {
const s = /* @__PURE__ */ new Set();
return [
"label",
"required",
"disabled",
"visibility",
"options",
"requiredMessage",
"content"
].forEach((n) => {
const a = e[n], o = et(
a
);
o && typeof o == "object" && "dependsOn" in o && Array.isArray(o.dependsOn) && o.dependsOn.forEach(
(c) => s.add(c)
);
}), typeof e.visibility == "object" && "dependsOn" in e.visibility && e.visibility.dependsOn && (Array.isArray(e.visibility.dependsOn) && e.visibility.dependsOn.length ? e.visibility.dependsOn.forEach((n) => {
s.add(n);
}) : s.add(e.fieldId)), Array.from(s);
}
clearCache() {
this.cache.clear();
}
clearCacheForField(e) {
Array.from(this.cache.keys()).filter((s) => s.startsWith(`${e}|`)).forEach((s) => this.cache.delete(s));
}
};
te(ue, "instance");
let Fe = ue;
const st = (t, e, s, r, n) => {
const { touchedFields: a, forceValidate: o, validateFieldsOnBlur: c } = s;
if (c !== !1 && !o && a && !a[t.fieldId] || !nt(t, s.values, n) || It(t, s.values, n))
return !0;
const d = Qe.includes(t.type) && Array.isArray(e) && e.length === 0;
return (!e && e !== 0 && e !== !1 || d) && !r.required;
}, rt = (t, e) => {
const s = [];
return t.required && s.push({
type: "required",
message: t.requiredMessage || "This field is required"
}), t.validation?.length && s.push(
...t.validation.map(
(r) => r.type === "equalTo" && typeof r.equalTo == "string" && r.equalTo.startsWith("{{") ? { ...r, equalTo: e[r.equalTo.replace(/[{}]/g, "")] } : r
)
), s;
}, Vt = async (t, e, s, r, n, a, o = !1) => {
const c = we(t, s.fields, r);
if (!c) return;
const d = {
values: r,
touchedFields: a,
forceValidate: o,
validateFieldsOnBlur: s.options?.validateFieldsOnBlur
}, u = Fe.getInstance().process(
c,
r,
s
);
if (st(c, e, d, u, s)) {
n((h) => {
const g = { ...h };
return delete g[t], g;
});
return;
}
const l = rt(u, r);
if (!l.length) {
n((h) => {
const g = { ...h };
return delete g[t], g;
});
return;
}
const { isValid: y, message: v } = await it.validate(
e,
l,
r
);
n((h) => {
const g = { ...h };
return y ? delete g[t] : g[t] = v || "Invalid value", g;
});
}, $t = async (t, e, s, r, n = !1) => {
const a = {}, o = Fe.getInstance(), c = {
values: e,
touchedFields: r,
forceValidate: n,
validateFieldsOnBlur: t.options?.validateFieldsOnBlur
}, d = async (u) => {
let l = !0;
for (const y of u) {
if (y.fields?.length) {
l = await d(y.fields) && l;
continue;
}
const v = o.process(y, e, t), h = e[y.fieldId];
if (st(y, h, c, v, t))
continue;
const g = rt(v, e);
if (!g.length) continue;
const { isValid: C, message: T } = await it.validate(
h,
g,
e
);
C || (a[y.fieldId] = T || "Invalid value", l = !1);
}
return l;
};
return await d(t.fields), s(a), Object.keys(a).length === 0;
}, nt = (t, e, s) => {
const r = t.visibility;
if (typeof r == "boolean") return r;
if (typeof r > "u") return !0;
if (typeof r == "function")
return r({
fieldId: t.fieldId,
values: e,
fieldSchema: t,
formSchema: s
});
if (r && typeof r == "object" && "fn" in r)
return r.fn({
fieldId: t.fieldId,
values: e,
fieldSchema: t,
formSchema: s
});
if (r && typeof r == "object" && "dependsOn" in r && "condition" in r && "value" in r) {
const { dependsOn: n, condition: a, value: o } = r, c = Array.isArray(n) ? n.map((l) => e[l]) : e[n];
if (c == null) return !1;
const d = (l, y) => l == null || y === null || y === void 0 ? null : typeof l == "number" && typeof y == "number" ? l - y : l instanceof Date && y instanceof Date ? l.getTime() - y.getTime() : String(l).localeCompare(String(y)), u = (l, y) => {
if (l === null) return !1;
switch (y) {
case ">":
return l > 0;
case ">=":
return l >= 0;
case "<":
return l < 0;
case "<=":
return l <= 0;
default:
return !1;
}
};
switch (a) {
case "equals":
return Array.isArray(c) ? c.some((l) => l === o) : c === o;
case "not_equals":
return Array.isArray(c) ? c.every((l) => l !== o) : c !== o;
case "greater_than":
return Array.isArray(c) ? c.some(
(l) => u(d(l, o), ">")
) : u(d(c, o), ">");
case "greater_than_or_equal":
return Array.isArray(c) ? c.some(
(l) => u(d(l, o), ">=")
) : u(d(c, o), ">=");
case "less_than":
return Array.isArray(c) ? c.some(
(l) => u(d(l, o), "<")
) : u(d(c, o), "<");
case "less_than_or_equal":
return Array.isArray(c) ? c.some(
(l) => u(d(l, o), "<=")
) : u(d(c, o), "<=");
case "contains":
return c === "" || o === "" ? !1 : Array.isArray(c) ? c.some(
(l) => Array.isArray(l) ? l.includes(o) : String(l).includes(String(o))
) : Array.isArray(c) ? c.includes(o) : String(c).includes(String(o));
case "not_contains":
return c === "" || o === "" ? !0 : Array.isArray(c) ? c.every(
(l) => Array.isArray(l) ? !l.includes(o) : !String(l).includes(String(o))
) : Array.isArray(c) ? !c.includes(o) : !String(c).includes(String(o));
case "in":
return Array.isArray(o) ? Array.isArray(c) ? c.some((l) => o.includes(l)) : o.includes(c) : !1;
case "not_in":
return Array.isArray(o) ? Array.isArray(c) ? c.every((l) => !o.includes(l)) : !o.includes(c) : !0;
default:
return !1;
}
}
return !0;
}, It = (t, e, s) => typeof t.disabled == "boolean" ? t.disabled : typeof t.disabled == "object" && "fn" in t.disabled && typeof t.disabled?.fn == "function" ? t.disabled.fn({
fieldId: t.fieldId,
values: e || {},
fieldSchema: t,
formSchema: s
}) : !1;
class z {
isEmpty(e) {
return e == null || e === "";
}
isString(e) {
return typeof e == "string";
}
isNumber(e) {
return typeof e == "number" || _t(e);
}
isArray(e) {
return Array.isArray(e);
}
isDate(e) {
return !isNaN(new Date(e).getTime());
}
createResponse(e, s) {
return { isValid: e, message: e ? void 0 : s };
}
}
class qt extends z {
validate(e, s) {
if (this.isEmpty(e)) return this.createResponse(!0);
const r = {
string: () => this.isString(e),
number: () => this.isNumber(e),
array: () => this.isArray(e),
date: () => this.isDate(e)
};
return s.type && r[s.type] && !r[s.type]() ? this.createResponse(!1, `Value must be a ${s.type}.`) : this.createResponse(!0);
}
}
class Bt extends z {
constructor() {
super(...arguments);
te(this, "defaultSpecialChars", /[!@#$%^&*(),.?":{}|<>]/);
}
validate(s, r) {
if (this.isEmpty(s)) return this.createResponse(!0);
if (!this.isString(s))
return this.createResponse(!1, "Value must be a string.");
const n = {
minLength: r.minLength ?? 8,
requireUpperCase: r.requireUpperCase ?? !0,
requireLowerCase: r.requireLowerCase ?? !0,
requireNumber: r.requireNumber ?? !0,
requireSpecialChar: r.requireSpecialChar ?? !0,
specialChars: r.specialCharsPattern ?? this.defaultSpecialChars
}, a = typeof n.specialChars == "string" ? new RegExp(n.specialChars) : n.specialChars, o = {
length: s.length >= n.minLength,
upperCase: !n.requireUpperCase || /[A-Z]/.test(s),
lowerCase: !n.requireLowerCase || /[a-z]/.test(s),
number: !n.requireNumber || /\d/.test(s),
specialChar: !n.requireSpecialChar || a.test(s)
};
if (Object.values(o).every(Boolean)) return this.createResponse(!0);
const c = [
!o.length && `at least ${n.minLength} characters`,
!o.upperCase && "one uppercase letter",
!o.lowerCase && "one lowercase letter",
!o.number && "one number",
!o.specialChar && "one special character"
].filter(Boolean);
return this.createResponse(
!1,
r.message || `Password must contain ${c.join(", ")}.`
);
}
}
class Dt extends z {
validate(e, s, r) {
if (this.isEmpty(e)) return this.createResponse(!0);
const n = typeof s.equalTo == "function" ? s.equalTo(r) : s.equalTo;
if (n === void 0) return this.createResponse(!0);
const o = s.caseSensitive ?? !0 ? e === n : String(e).toLowerCase() === String(n).toLowerCase();
return this.createResponse(o, s.message || "Values do not match.");
}
}
class Mt extends z {
constructor() {
super(...arguments);
te(this, "emailRegex", /^[^\s@]+@[^\s@]+\.[^\s@]+$/);
}
validate(s, r) {
return this.isEmpty(s) ? this.createResponse(!0) : this.isString(s) ? this.createResponse(
this.emailRegex.test(s),
r.message || "Invalid email format."
) : this.createResponse(!1, "Value must be a string.");
}
}
class Lt extends z {
constructor() {
super(...arguments);
te(this, "patterns", {
ip: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
ipPort: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?):(\d{1,5})$/,
absolute: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/,
relative: /^([\/\w.-]+)+(\/)?(\?[\w.%-=&]*)?(#[\w-]*)?$/,
protocolRelative: /^\/\/[\w.-]+\.[a-z]{2,}(\/.*)?$/,
localhost: /^(https?:\/\/)?localhost(:\d+)?([\/\w.-]*)*\/?$/,
ipUrl: /^(https?:\/\/)?(\d{1,3}\.){3}\d{1,3}(:\d+)?([\/\w.-]*)*\/?$/
});
}
validate(s, r) {
if (this.isEmpty(s)) return this.createResponse(!0);
if (!this.isString(s))
return this.createResponse(!1, "Value must be a string.");
const n = s.trim();
if (r.validateAs === "ip" || this.patterns.ip.test(n))
return this.createResponse(
this.patterns.ip.test(n),
r.message || "Invalid IP address format (e.g., 192.168.1.1)"
);
if (r.validateAs === "ipPort" || this.patterns.ipPort.test(n)) {
if (!this.patterns.ipPort.test(n))
return this.createResponse(
!1,
r.message || "Invalid IP:Port format (e.g., 192.168.1.1:8080)"
);
const l = parseInt(n.split(":")[1]);
return l < 1 || l > 65535 ? this.createResponse(
!1,
r.message || "Port must be between 1 and 65535"
) : this.createResponse(!0);
}
const a = this.patterns.absolute.test(n) || this.patterns.protocolRelative.test(n) || this.patterns.ipUrl.test(n), o = this.patterns.relative.test(n), c = n.startsWith("https://"), d = /^https?:\/\//i.test(n);
if (r.requireAbsolute && !a)
return this.createResponse(
!1,
r.message || "Absolute URL with http:// or https:// is required."
);
if (r.requireHttps && (!c || !d))
return this.createResponse(
!1,
r.message || "HTTPS URL is required."
);
if (r.allowRelative === !1 && o)
return this.createResponse(
!1,
r.message || "Relative paths are not allowed."
);
const u = a || o || this.patterns.localhost.test(n) || this.patterns.ipUrl.test(n);
return this.createResponse(u, r.message || "Invalid URL format");
}
}
class Pt extends z {
validate(e, s) {
return this.isString(e) ? s.pattern ? this.createResponse(
new RegExp(s.pattern).test(e),
s.message || "Pattern validation failed."
) : this.createResponse(!0) : this.createResponse(!1, "Value must be a string.");
}
}
class Ut extends z {
validate(e, s) {
if (!this.isString(e))
return this.createResponse(!1, "Value must be a string.");
const r = {
min: s.minLength !== void 0 && e.length >= s.minLength,
max: s.maxLength !== void 0 && e.length <= s.maxLength
};
if ((s.minLength === void 0 || r.min) && (s.maxLength === void 0 || r.max))
return this.createResponse(!0);
const n = [
s.minLength !== void 0 && !r.min && `minimum ${s.minLength} characters`,
s.maxLength !== void 0 && !r.max && `maximum ${s.maxLength} characters`
].filter(Boolean);
return this.createResponse(
!1,
s.message || `Length must be ${n.join(" and ")}.`
);
}
}
class Wt extends z {
validate(e, s) {
if (!this.isNumber(e))
return this.createResponse(!1, "Value must be a number.");
const r = typeof e == "string" ? parseFloat(e) : e, n = {
min: s.min !== void 0 && r >= s.min,
max: s.max !== void 0 && r <= s.max
};
if ((s.min === void 0 || n.min) && (s.max === void 0 || n.max))
return this.createResponse(!0);
const a = [
s.min !== void 0 && !n.min && `minimum ${s.min}`,
s.max !== void 0 && !n.max && `maximum ${s.max}`
].filter(Boolean);
return this.createResponse(
!1,
s.message || `Value must be ${a.join(" and ")}.`
);
}
}
class Yt extends z {
validate(e, s) {
const r = new Date(e);
if (!this.isDate(r))
return this.createResponse(!1, "Invalid date format.");
const n = {
min: s.minDate !== void 0 && r >= new Date(s.minDate),
max: s.maxDate !== void 0 && r <= new Date(s.maxDate)
};
if ((s.minDate === void 0 || n.min) && (s.maxDate === void 0 || n.max))
return this.createResponse(!0);
const a = [
s.minDate !== void 0 && !n.min && `after ${s.minDate}`,
s.maxDate !== void 0 && !n.max && `before ${s.maxDate}`
].filter(Boolean);
return this.createResponse(
!1,
s.message || `Date must be ${a.join(" and ")}.`
);
}
}
class Ht extends z {
validate(e, s) {
if (!this.isArray(e))
return this.createResponse(!1, "Value must be an array.");
const r = {
min: s.minItems !== void 0 && e.length >= s.minItems,
max: s.maxItems !== void 0 && e.length <= s.maxItems
};
if ((s.minItems === void 0 || r.min) && (s.maxItems === void 0 || r.max))
return this.createResponse(!0);
const n = [
s.minItems !== void 0 && !r.min && `minimum ${s.minItems} items`,
s.maxItems !== void 0 && !r.max && `maximum ${s.maxItems} items`
].filter(Boolean);
return this.createResponse(
!1,
s.message || `Array must contain ${n.join(" and ")}.`
);
}
}
class zt extends z {
async validate(e, s) {
if (typeof s.custom != "function") return this.createResponse(!0);
try {
const r = s.custom(e), n = r instanceof Promise ? await r : r;
return this.createResponse(
n,
n ? void 0 : s.message || "Custom validation failed."
);
} catch (r) {
return console.error(r), this.createResponse(!1, "Validation error occurred");
}
}
}
class Kt extends z {
validate(e) {
const s = !this.isEmpty(e) && (!this.isArray(e) || e.length > 0);
return this.createResponse(s, "This field is required.");
}
}
const de = class de {
constructor() {
te(this, "strategies", {});
this.registerDefaultStrategies();
}
registerDefaultStrategies() {
this.registerStrategy("type", new qt()), this.registerStrategy("password", new Bt()), this.registerStrategy("equalTo", new Dt()), this.registerStrategy("email", new Mt()), this.registerStrategy("url", new Lt()), this.registerStrategy("pattern", new Pt()), this.registerStrategy("length", new Ut()), this.registerStrategy("number", new Wt()), this.registerStrategy("date", new Yt()), this.registerStrategy("array", new Ht()), this.registerStrategy("custom", new zt()), this.registerStrategy("required", new Kt());
}
determineRuleType(e) {
if (e.type) return e.type;
const s = {
minLength: "length",
maxLength: "length",
min: "number",
max: "number",
minDate: "date",
maxDate: "date",
minItems: "array",
maxItems: "array",
pattern: "pattern",
custom: "custom",
equalTo: "equalTo",
email: "email",
url: "url",
password: "password",
required: "required"
};
for (const [r, n] of Object.entries(s))
if (e[r] !== void 0) return n;
return "type";
}
registerStrategy(e, s) {
this.strategies[e] = s;
}
async validate(e, s, r) {
if (!s?.length) return { isValid: !0 };
for (const n of s) {
const a = this.determineRuleType(n), o = this.strategies[a];
if (o) {
const c = await Promise.resolve(
o.validate(e, n, r)
);
if (!c.isValid) return c;
}
}
return { isValid: !0 };
}
static getInstance() {
return de.instance || (de.instance = new de()), de.instance;
}
};
te(de, "instance");
let ke = de;
const it = ke.getInstance();
class Jt {
constructor() {
te(this, "subscribers", /* @__PURE__ */ new Map());
}
subscribe(e, s) {
return this.subscribers.has(e) || this.subscribers.set(e, /* @__PURE__ */ new Set()), this.subscribers.get(e).add(s), () => this.subscribers.get(e)?.delete(s);
}
notify(e) {
const s = this.subscribers.get(e);
s && s.forEach((r) => r());
}
unsubscribeAll(e) {
this.subscribers.delete(e);
}
clear() {
this.subscribers.clear();
}
}
const Gt = (t) => {
const [e, s] = se(
{}
), r = pe({});
return { dynamicOptions: e, fetchDynamicOptions: async (a, o = {}, c) => {
const u = we(a, t.fields)?.dynamicOptions;
if (!u || !u.endpoint) return;
r.current[a]?.abort();
const l = new AbortController();
r.current[a] = l;
let y = u.endpoint;
y = y.replace(
/\{\{(.*?)\}\}/g,
(b, N) => o[N] ?? ""
);
const v = new URLSearchParams();
if (u.params)
for (const [b, N] of Object.entries(u.params)) {
const I = o[N];
I !== void 0 && v.append(b, I);
}
const h = u.pagination, g = c?.page ?? 1, C = c?.limit ?? h?.limit ?? 10, T = h?.startPage ?? 1;
if ((h?.pageMode ?? "page") === "skip") {
const b = h?.skipKey || "skip", N = (g - T) * C;
v.set(b, String(N));
} else {
const b = h?.pageKey || "page";
v.set(b, String(g));
}
const _ = h?.limitKey || "limit";
v.set(_, String(C));
const w = v.toString() ? `${y}${y.includes("?") ? "&" : "?"}${v.toString()}` : y, E = async () => {
if (h?.maxPage && g > h.maxPage)
throw new Error("Max page limit reached");
return (await fetch(w, {
method: u.method || "GET",
headers: u.headers || {},
signal: l.signal
})).json();
};
try {
let b = await E().catch(() => (console.warn(`[Retry] Failed fetching ${a}, retrying...`), E()));
if (u.resultPath)
for (const I of u.resultPath.split("."))
b = b?.[I];
const N = u.transformResponse ? u.transformResponse(b) : b;
s((I) => ({
...I,
[a]: N
}));
} catch (b) {
b.name === "AbortError" ? console.log(`[Aborted] Fetch for ${a} was cancelled.`) : console.error(`Failed to fetch dynamicOptions for ${a}`, b);
}
} };
};
var Ce = { exports: {} }, be = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ke;
function Xt() {
if (Ke) return be;
Ke = 1;
var t = Symbol.for("react.transitional.element"), e = Symbol.for("react.fragment");
function s(r, n, a) {
var o = null;
if (a !== void 0 && (o = "" + a), n.key !== void 0 && (o = "" + n.key), "key" in n) {
a = {};
for (var c in n)
c !== "key" && (a[c] = n[c]);
} else a = n;
return n = a.ref, {
$$typeof: t,
type: r,
key: o,
ref: n !== void 0 ? n : null,
props: a
};
}
return be.Fragment = e, be.jsx = s, be.jsxs = s, be;
}
var xe = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Je;
function Zt() {
return Je || (Je = 1, process.env.NODE_ENV !== "production" && function() {
function t(i) {
if (i == null) return null;
if (typeof i == "function")
return i.$$typeof === k ? null : i.displayName || i.name || null;
if (typeof i == "string") return i;
switch (i) {
case N:
return "Fragment";
case b:
return "Portal";
case P:
return "Profiler";
case I:
return "StrictMode";
case U:
return "Suspense";
case $:
return "SuspenseList";
}
if (typeof i == "object")
switch (typeof i.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), i.$$typeof) {
case K:
return (i.displayName || "Context") + ".Provider";
case Y:
return (i._context.displayName || "Context") + ".Consumer";
case H:
var m = i.render;
return i = i.displayName, i || (i = m.displayName || m.name || "", i = i !== "" ? "ForwardRef(" + i + ")" : "ForwardRef"), i;
case j:
return m = i.displayName || null, m !== null ? m : t(i.type) || "Memo";
case B:
m = i._payload, i = i._init;
try {
return t(i(m));
} catch {
}
}
return null;
}
function e(i) {
return "" + i;
}
function s(i) {
try {
e(i);
var m = !1;
} catch {
m = !0;
}
if (m) {
m = console;
var f = m.error, A = typeof Symbol == "function" && Symbol.toStringTag && i[Symbol.toStringTag] || i.constructor.name || "Object";
return f.call(
m,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
A
), e(i);
}
}
function r() {
}
function n() {
if (ge === 0) {
$e = console.log, Ie = console.info, qe = console.warn, Be = console.error, De = console.group, Me = console.groupCollapsed, Le = console.groupEnd;
var i = {
configurable: !0,
enumerable: !0,
value: r,
writable: !0
};
Object.defineProperties(console, {
info: i,
log: i,
warn: i,
error: i,
group: i,
groupCollapsed: i,
groupEnd: i
});
}
ge++;
}
function a() {
if (ge--, ge === 0) {
var i = { configurable: !0, enumerable: !0, writable: !0 };
Object.defineProperties(console, {
log: ce({}, i, { value: $e }),
info: ce({}, i, { value: Ie }),
warn: ce({}, i, { value: qe }),
error: ce({}, i, { value: Be }),
group: ce({}, i, { value: De }),
groupCollapsed: ce({}, i, { value: Me }),
groupEnd: ce({}, i, { value: Le })
});
}
0 > ge && console.error(
"disabledDepth fell below zero. This is a bug in React. Please file an issue."
);
}
function o(i) {
if (Oe === void 0)
try {
throw Error();
} catch (f) {
var m = f.stack.trim().match(/\n( *(at )?)/);
Oe = m && m[1] || "", Pe = -1 < f.stack.indexOf(`
at`) ? " (<anonymous>)" : -1 < f.stack.indexOf("@") ? "@unknown:0:0" : "";
}
return `
` + Oe + i + Pe;
}
function c(i, m) {
if (!i || je) return "";
var f = Te.get(i);
if (f !== void 0) return f;
je = !0, f = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
var A = null;
A = O.H, O.H = null, n();
try {
var D = {
DetermineComponentFrameRoot: function() {
try {
if (m) {
var re = function() {
throw Error();
};
if (Object.defineProperty(re.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(re, []);
} catch (ee) {
var Ee = ee;
}
Reflect.construct(i, [], re);
} else {
try {
re.call();
} catch (ee) {
Ee = ee;
}
i.call(re.prototype);
}
} else {
try {
throw Error();
} catch (ee) {
Ee = ee;
}
(re = i()) && typeof re.catch == "function" && re.catch(function() {
});
}
} catch (ee) {
if (ee && Ee && typeof ee.stack == "string")
return [ee.stack, Ee.stack];
}
return [null, null];
}
};
D.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
var V = Object.getOwnPropertyDescriptor(
D.DetermineComponentFrameRoot,
"name"
);
V && V.configurable && Object.defineProperty(
D.DetermineComponentFrameRoot,
"name",
{ value: "DetermineComponentFrameRoot" }
);
var x = D.DetermineComponentFrameRoot(), Q = x[0], fe = x[1];
if (Q && fe) {
var L = Q.split(`
`), le = fe.split(`
`);
for (x = V = 0; V < L.length && !L[V].includes(
"DetermineComponentFrameRoot"
); )
V++;
for (; x < le.length && !le[x].includes(
"DetermineComponentFrameRoot"
); )
x++;
if (V === L.length || x === le.length)
for (V = L.length - 1, x = le.length - 1; 1 <= V && 0 <= x && L[V] !== le[x]; )
x--;
for (; 1 <= V && 0 <= x; V--, x--)
if (L[V] !== le[x]) {
if (V !== 1 || x !== 1)
do
if (V--, x--, 0 > x || L[V] !== le[x]) {
var ve = `
` + L[V].replace(
" at new ",
" at "
);
return i.displayName && ve.includes("<anonymous>") && (ve = ve.replace("<anonymous>", i.displayName)), typeof i == "function" && Te.set(i, ve), ve;
}
while (1 <= V && 0 <= x);
break;
}
}
} finally {
je = !1, O.H = A, a(), Error.prepareStackTrace = f;
}
return L = (L = i ? i.displayName || i.name : "") ? o(L) : "", typeof i == "function" && Te.set(i, L), L;
}
function d(i) {
if (i == null) return "";
if (typeof i == "function") {
var m = i.prototype;
return c(
i,
!(!m || !m.isReactComponent)
);
}
if (typeof i == "string") return o(i);
switch (i) {
case U:
return o("Suspense");
case $:
return o("SuspenseList");
}
if (typeof i == "object")
switch (i.$$typeof) {
case H:
return i = c(i.render, !1), i;
case j:
return d(i.type);
case B:
m = i._payload, i = i._init;
try {
return d(i(m));
} catch {
}
}
return "";
}
function u() {
var i = O.A;
return i === null ? null : i.getOwner();
}
function l(i) {
if (Z.call(i, "key")) {
var m = Object.getOwnPropertyDescriptor(i, "key").get;
if (m && m.isReactWarning) return !1;
}
return i.key !== void 0;
}
function y(i, m) {
function f() {
Ue || (Ue = !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)",
m
));
}
f.isReactWarning = !0, Object.defineProperty(i, "key", {
get: f,
configurable: !0
});
}
function v() {
var i = t(this.type);
return We[i] || (We[i] = !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."
)), i = this.props.ref, i !== void 0 ? i : null;
}
function h(i, m, f, A, D, V) {
return f = V.ref, i = {
$$typeof: E,
type: i,
key: m,
props: V,
_owner: D
}, (f !== void 0 ? f : null) !== null ? Object.defineProperty(i, "ref", {
enumerable: !1,
get: v
}) : Object.defineProperty(i, "ref", { enumerable: !1, value: null }), i._store = {}, Object.defineProperty(i._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(i, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.freeze && (Object.freeze(i.props), Object.freeze(i)), i;
}
function g(i, m, f, A, D, V) {
if (typeof i == "string" || typeof i == "function" || i === N || i === P || i === I || i === U || i === $ || i === J || typeof i == "object" && i !== null && (i.$$typeof === B || i.$$typeof === j || i.$$typeof === K || i.$$typeof === Y || i.$$typeof === H || i.$$typeof === xt || i.getModuleId !== void 0)) {
var x = m.children;
if (x !== void 0)
if (A)
if (Re(x)) {
for (A = 0; A < x.length; A++)
C(x[A], i);
Object.freeze && Object.freeze(x);
} 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 C(x, i);
} else
x = "", (i === void 0 || typeof i == "object" && i !== null && Object.keys(i).length === 0) && (x += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), i === null ? A = "null" : Re(i) ? A = "array" : i !== void 0 && i.$$typeof === E ? (A = "<" + (t(i.type) || "Unknown") + " />", x = " Did you accidentally export a JSX literal instead of a component?") : A = typeof i, console.error(
"React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
A,
x
);
if (Z.call(m, "key")) {
x = t(i);
var Q = Object.keys(m).filter(function(L) {
return L !== "key";
});
A = 0 < Q.length ? "{key: someKey, " + Q.join(": ..., ") + ": ...}" : "{key: someKey}", Ye[x + A] || (Q = 0 < Q.length ? "{" + Q.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
A,
x,
Q,
x
), Ye[x + A] = !0);
}
if (x = null, f !== void 0 && (s(f), x = "" + f), l(m) && (s(m.key), x = "" + m.key), "key" in m) {
f = {};
for (var fe in m)
fe !== "key" && (f[fe] = m[fe]);
} else f = m;
return x && y(
f,
typeof i == "function" ? i.displayName || i.name || "Unknown" : i
), h(i, x, V, D, u(), f);
}
function C(i, m) {
if (typeof i == "object" && i && i.$$typeof !== wt) {
if (Re(i))
for (var f = 0; f < i.length; f++) {
var A = i[f];
T(A) && S(A, m);
}
else if (T(i))
i._store && (i._store.validated = 1);
else if (i === null || typeof i != "object" ? f = null : (f = F && i[F] || i["@@iterator"], f = typeof f == "function" ? f : null), typeof f == "function" && f !== i.entries && (f = f.call(i), f !== i))
for (; !(i = f.next()).done; )
T(i.value) && S(i.value, m);
}
}
function T(i) {
return typeof i == "object" && i !== null && i.$$typeof === E;
}
function S(i, m) {
if (i._store && !i._store.validated && i.key == null && (i._store.validated = 1, m = _(m), !He[m])) {
He[m] = !0;
var f = "";
i && i._owner != null && i._owner !== u() && (f = null, typeof i._owner.tag == "number" ? f = t(i._owner.type) : typeof i._owner.name == "string" && (f = i._owner.name), f = " It was passed a child from " + f + ".");
var A = O.getCurrentStack;
O.getCurrentStack = function() {
var D = d(i.type);
return A && (D += A() || ""), D;
}, console.error(
'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
m,
f
), O.getCurrentStack = A;
}
}
function _(i) {
var m = "", f = u();
return f && (f = t(f.type)) && (m = `
Check the render method of \`` + f + "`."), m || (i = t(i)) && (m = `
Check the top-level render call using <` + i + ">."), m;
}
var w = M, E = Symbol.for("react.transitional.element"), b = Symbol.for("react.portal"), N = Symbol.for("react.fragment"), I = Symbol.for("react.strict_mode"), P = Symbol.for("react.profiler"), Y = Symbol.for("react.consumer"), K = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), U = Symbol.for("react.suspense"), $ = Symbol.for("react.suspense_list"), j = Symbol.for("react.memo"), B = Symbol.for("react.lazy"), J = Symbol.for("react.offscreen"), F = Symbol.iterator, k = Symbol.for("react.client.reference"), O = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Z = Object.prototype.hasOwnProperty, ce = Object.assign, xt = Symbol.for("react.client.reference"), Re = Array.isArray, ge = 0, $e, Ie, qe, Be, De, Me, Le;
r.__reactDisabledLog = !0;
var Oe, Pe, je = !1, Te = new (typeof WeakMap == "function" ? WeakMap : Map)(), wt = Symbol.for("react.client.reference"), Ue, We = {}, Ye = {}, He = {};
xe.Fragment = N, xe.jsx = function(i, m, f, A, D) {
return g(i, m, f, !1, A, D);
}, xe.jsxs = function(i, m, f, A, D) {
return g(i, m, f, !0, A, D);
};
}()), xe;
}
var Ge;
function Qt() {
return Ge || (Ge = 1, process.env.NODE_ENV === "production" ? Ce.exports = Xt() : Ce.exports = Zt()), Ce.exports;
}
var p = Qt();
const es = {
text: () => import("./index-DxCfz3M0.js"),
email: () => import("./index-DxCfz3M0.js"),
select: () => import("./index-CahRPKWE.js"),
group: () => import("./index-DQZV9m6F.js")
// password: () => import("../components/Fields/InputField"),
// checkbox: () => import("../components/Fields/CheckboxField"),
// radio: () => import("../components/Fields/RadioField"),
// date: () => import("../components/Fields/DatePickerField"),
// file: () => import("../components/Fields/InputFileField"),
}, ts = async (t) => {
if (!(typeof window > "u") && t.length !== 0)
try {
const e = Array.from(new Set(t)), s = [];
for (const r of e) {
const n = es[r];
n && s.push(n().catch(() => null));
}
await Promise.all(s);
} catch (e) {
process.env.NODE_ENV !== "production" && console.warn("Field preloading failed:", e);
}
}, oe = ye({
forms: {},
registerForm: () => {
},
unregisterForm: () => {
}
}), Cs = () => {
const t = W(oe);
if (!t)
throw new Error("useFormReg must be used within a FormRegistryProvider");
return t.forms;
}, ot = ye(null), at = ye(
{}
), ct = ye({}), lt = ye(
null
), Se = ye(
void 0
), ss = ({
children: t,
formSchema: e
}) => {
const { registerForm: s, unregisterForm: r } = W(oe), [n, a] = se(() => Ne(e.fields)), [o, c] = se({}), [d, u] = se({}), [l, y] = se({}), v = X(() => {
a(Ne(e.fields)), c({}), u({}), y({});
}, [e.fields]), h = (F, k) => {
a((O) => ({ ...O, [F]: k }));
}, { dynamicOptions: g, fetchDynamicOptions: C } = Gt(e), T = W(Se), S = R(() => new Jt(), []), { options: _ } = e, w = X(
async (F, k) => {
const O = we(F, e.fields, k);
if (!(!O || !ze(O) || !O.dynamicOptions) && us(O, k))
try {
await C(F, k), ds(O, k);
} catch (Z) {
console.error(`Failed to fetch options for ${F}`, Z);
}
},
[e.fields, C, n]
), E = R(
() => Tt(e.fields),
[e.fields]
);
if (T)
return /* @__PURE__ */ p.jsx(p.Fragment, { children: t });
ie(() => {
const F = Nt(e);
requestIdleCallback(() => {
ts(F);
});
}, [e]);
const b = R(
() => (F, k) => {
u((O) => ({ ...O, [F]: k }));
},
[]
), N = R(
() => (F, k) => {
y((O) => ({ ...O, [F]: k }));
},
[]
), I = os(
X(
(F, k) => {
const O = E[F];
O?.length && O.forEach((Z) => S.notify(Z)), (_?.validateFieldsOnBlur === !1 || l[F]) && Y(F, k), E[F] && E[F].forEach(async (Z) => {
await w(Z, n);
});
},
[e, n]
),
500
), P = R(
() => (F, k) => {
h(F, k), I(F, k);
},
[I]
), Y = R(
() => (F, k) => {
Vt(
F,
k,
e,
n,
c,
d,
!1
);
},
[e, d, n]
), K = R(
() => async () => await $t(e, n, c, d, !0),
[e, d, n]
), H = R(
() => (F) => we(
F,
e.fields,
n
),
[e, n]
), U = R(
() => (F) => nt(F, n, e),
[e, n]
), $ = R(
() => ({
setValue: P,
validateField: Y,
validateForm: K,
setTouched: b,
setBlurred: N,
fetchDynamicOptions: C,
getFieldSchema: H,
shouldShowField: U,
observer: S,
resetForm: v
}),
[
P,
Y,
K,
b,
N,
C,
H,
U,
S,
v
]
), j = R(
() => ({
dynamicOptions: g,
formSchema: e,
formOptions: _,
touched: d,
blurred: l
}),
[g, e, _, d, l]
);
ie(() => {
const F = async (k) => {
for (const O of k)
ze(O) && O.dynamicOptions?.fetchOnInit && await w(O.fieldId, n), O.fields?.length && await F(O.fields);
};
F(e.fields);
}, [e.fields, w]);
const B = pe({}), J = R(
() => ({
...B.current,
values: n,
actions: $,
errors: o,
meta: j
}),
[n, $, o, j]
);
return ie(() => (s(e.formId, J), () => {
r(e.formId);
}), [n, o]), /* @__PURE__ */ p.jsx(ot.Provider, { value: $, children: /* @__PURE__ */ p.jsx(at.Provider, { value: n, children: /* @__PURE__ */ p.jsx(ct.Provider, { value: o, children: /* @__PURE__ */ p.jsx(lt.Provider, { value: j, children: /* @__PURE__ */ p.jsx(
Se.Provider,
{
value: {
values: n,
errors: o,
dynamicOptions: g,
formSchema: e,
observer: S,
formOptions: _,
touched: d,
blurred: l,
setTouched: b,
setBlurred: N,
setValue: P,
validateField: Y,
validateForm: K,
shouldShowField: U,
fetchDynamicOptions: C,
getFieldSchema: H,
resetForm: v
},
children: t
}
) }) }) }) });
}, Ss = ({
children: t
}) => {
const [e, s] = se({}), r = X(
(a, o) => {
s((c) => ({ ...c, [a]: o }));
},
[]
), n = X((a) => {
s((o) => {
const c = { ...o };
return delete c[a], c;
});
}, []);
return /* @__PURE__ */ p.jsx(
oe.Provider,
{
value: { forms: e, registerForm: r, unregisterForm: n },
children: t
}
);
}, Ae = (t) => {
if (t) {
const e = W(oe);
if (!e)
throw new Error(
"useFormValues must be used within a FormRegistryProvider"
);
return e?.forms?.[t]?.values || {};
}
return W(at);
}, rs = (t, e) => Ae(e)[t], me = (t) => {
if (t) {
const e = W(oe);
if (!e)
throw new Error(
"useFormActions must be used within a FormRegistryProvider"
);
return e?.forms?.[t]?.actions || {};
}
return W(ot);
}, ut = (t) => {
if (t) {
const e = W(oe);
if (!e)
throw new Error(
"useFormErrors must be used within a FormRegistryProvider"
);
return e?.forms?.[t]?.errors || {};
}
return W(ct);
}, dt = (t, e) => ut(e)[t] || "", ae = (t) => {
if (t) {
const e = W(oe);
if (!e)
throw new Error("useFormMeta must be used within a FormRegistryProvider");
return e?.forms?.[t]?.meta || {};
}
return W(lt);
}, mt = (t) => {
if (t) {
const r = W(oe)?.forms[t];
if (r)
return {
values: r.values,
errors: r.errors,
dynamicOptions: r.meta.dynamicOptions,
formSchema: r.meta.formSchema,
observer: r.actions.observer,
formOptions: r.meta.formOptions,
touched: r.meta.touched,
blurred: r.meta.blurred,
setTouched: r.actions.setTouched,
setBlurred: r.actions.setBlurred,
setValue: r.actions.setValue,
validateField: r.actions.validateField,
validateForm: r.actions.validateForm,
shouldShowField: r.actions.shouldShowField,
fetchDynamicOptions: r.actions.fetchDynamicOptions,
getFieldSchema: r.actions.getFieldSchema,
resetForm: r.actions.resetForm
};
}
const e = W(Se);
if (!e)
throw new Error("useForm must be used within a FormProvider");
return e;
}, As = (t) => ae(t).touched, Rs = (t) => ae(t).blurred, Os = (t) => ae(t).formSchema, js = (t) => ae(t).formOptions, Ts = (t) => ae(t).dynamicOptions, ks = (t) => me(t).observer, Ns = (t, e) => me(e).getFieldSchema(t), _s = (t, e) => {
const s = me(e), r = s.getFieldSchema(t);
return r ? s.shouldShowField(r) : !1;
}, Vs = (t) => {
const e = Ae(), s = ut(), { setValue: r, validateField: n, setTouched: a, observer: o } = me(), {
formSchema: c,
dynamicOptions: d,
formOptions: u = {},
touched: l
} = ae(), [y, v] = se(!1), h = t?.fieldId, g = R(
() => e[h] || tt[t.type],
[e]
), C = s[h];
ie(() => {
const b = o.subscribe(h, () => {
console.log(`[${h}] Observer triggered!`);
});
return () => b();
}, [h, o]);
const T = (b) => {
v(!0), t.events?.onCustomFocus && t.events.onCustomFocus(
b,
h,
e,
t,
c
);
}, S = (b) => {
a(t.fieldId, !0), y && u.validateFieldsOnBlur !== !1 && n(t.fieldId, e[t.fieldId]), t.events?.onCustomBlur && t.events.onCustomBlur(
b,
h,
e,
t,
c
);
}, _ = ft({
fieldId: t.fieldId,
type: t.type,
value: g,
...t.events,
onCustomBlur: S,
// Override the blur handler
onCustomFocus: T,
// Override the focus handler
onCustomUpload: t.events?.onCustomUpload,
onCustomChangeItems: t.events?.onCustomChangeItems,
onCustomAddItems: t.events?.onCustomAddItems,
onCustomRemoveItems: t.events?.onCustomRemoveItems,
onCustomSearch: t.events?.onCustomSearch
}), w = ht(
t.type,
t,
l[h],
!!C
);
C && (w.className = `${w.className ? `${w.className} ` : ""}field-validation-error`);
const E = t.disabled || !1;
return {
fieldId: h,
processedProps: t,
fieldParams: w,
fieldValue: g,
values: e,
fieldErrors: C,
errors: s,
formSchema: c,
dynamicOptions: d,
eventHandlers: _,
isDisable: E,
observer: o,
isTouched: l[t.fieldId] || !1,
hasBeenFocused: y,
hasDefaultStyling: !t.disableDefaultStyling,
setValue: r,
validateField: n
};
}, ns = () => {
const {
values: t,
errors: e,
formSchema: s,
formOptions: r,
touched: n,
blurred: a,
setBlurred: o,
setValue: c,
getFieldSchema: d,
setTouched: u,
validateField: l
} = mt();
return {
formOptions: r,
touched: n,
blurred: a,
setValue: c,
handleCustomEvent: (v, h, g, C) => {
if (v) {
const T = C ?? t[g], S = d(g);
v(
h,
g,
{ ...t, [g]: T },
S,
s,
e
);
}
},
setTouched: u,
setBlurred: o,
validateField: l
};
}, is = (t) => {
const e = Ae(), { formSchema: s } = ae(), r = Fe.getInstance();
return R(() => r.process(t, e, s), [t, e, s]);
};
function os(t, e) {
const s = pe(null), r = pe(t);
return ie(() => {
r.current = t;
}, [t]), ie(() => () => {
s.current && clearTimeout(s.current);
}, []), X(
(...n) => {
s.current && clearTimeout(s.current), s.current = setTimeout(() => {
r.current(...n);
}, e);
},
[e]
);
}
const as = (t) => {
const e = dt(t.fieldId), { shouldShowField: s } = me();
let r;
r = is(t);
const n = s(r);
return {
processedProps: r,
fieldErrors: e,
isVisible: n
};
}, $s = (t) => {
const e = rs(t.fieldId), s = dt(t.fieldId), { validateField: r, setTouched: n } = me(), { touched: a, blurred: o, formSchema: c, formOptions: d } = ae(), u = mt(), [l, y] = se(!1), v = R(
() => e ?? tt[t.type],
[e, t.type]
), h = X(
(S) => {
n(t.fieldId, !0), l && d?.validateFieldsOnBlur !== !1 && r(t.fieldId, v), t.events?.onCustomBlur?.(
S,
t.fieldId,
u.values,
t,
c
);
},
[
n,
t,
l,
d?.validateFieldsOnBlur,
r,
v,
u.values,
c
]
), g = X(
(S) => {
y(!0), t.events?.onCustomFocus?.(
S,
t.fieldId,
u.values,
t,
c
);
},
[t, u.values, c]
), C = ft({
fieldId: t.fieldId,
type: t.type,
value: v,
...t.events,
onCustomBlur: h,
onCustomFocus: g,
onCustomUpload: t.events?.onCustomUpload,
onCustomChangeItems: t.events?.onCustomChangeItems,
onCustomAddItems: t.events?.onCustomAddItems,
onCustomRemoveItems: t.events?.onCustomRemoveItems,
onCustomSearch: t.events?.onCustomSearch
}), T = R(() => {
const S = ht(
t.type,
t,
a[t.fieldId],
!!s
);
return s && (S.className = `${S.className || ""} field-validation-error`), S;
}, [t, a, s]);
return R(
() => ({
value: v,
error: s,
touched: a[t.fieldId],
blurred: o[t.fieldId],
props: t,
fieldParams: T,
eventHandlers: C,
formContext: u
}),
[
v,
s,
a,
o,
t,
T,
C,
u
]
);
}, ft = ({
fieldId: t,
value: e,
type: s,
onCustomChange: r,
onCustomClick: n,
onCustomBlur: a,
onCustomFocus: o,
onCustomKeyDown: c,
onCustomKeyUp: d,
onCustomMouseDown: u,
onCustomMouseEnter: l,
onCustomMouseLeave: y,
onCustomContextMenu: v,
onCustomUpload: h,
onCustomRemove: g,
onCustomAddItems: C,
onCustomChangeItems: T,
onCustomRemoveItems: S,
onCustomSearch: _
}) => {
const { setBlurred: w, setValue: E, handleCustomEvent: b, setTouched: N } = ns(), I = (j) => {
N(t, !0), b(o, j, t);
}, P = (j) => {
w(t, !0), a && b(a, j, t);
}, Y = (j) => {
const B = s === "number" ? +j.target.value : j.target.value;
let J = B;
if (Qe.includes(s)) {
const F = j.target.checked, k = e || [];
J = F ? [...k, B] : k.filter((Z) => Z !== B);
}
E(t, J), b(r, j, t, J);
}, K = (j) => {
const B = Array.from((j instanceof FileList, j));
h && h(B, t), E(t, B);
}, H = (j) => {
g && g(j, t);
}, U = (j, B, J) => {
_ && _(
j || [],
B || [],
t,
J || ""
);
}, $ = (j) => (B) => b(j, B, t, e);
return {
htmlHandlers: {
onChange: Y,
onClick: $(n),
onBlur: P,
onFocus: I,
onKeyDown: $(c),
onKeyUp: $(d),
onMouseDown: $(u),
onMouseEnter: $(l),
onMouseLeave: $(y),
onContextMenu: $(v)
},
customHandlers: {
onUpload: h ? K : void 0,
onRemove: g ? H : void 0,
onAddItems: $(C),
onRemoveItems: $(S),
onChangeItems: $(T),
onSearch: _ ? U : void 0
}
};
}, cs = ["required", "options", "labelClassName"], G = (t = "input", e = "text") => ({
"data-testid": `${t}-${e}-field`,
excludedProps: [...cs],
htmlTagName: t
}), Xe = {
text: { ...G("input", "text") },
email: { ...G("input", "email") },
password: { ...G("input", "password") },
number: { ...G("input", "number") },
tel: { ...G("input", "tel") },
url: { ...G("input", "url") },
search: { ...G("input", "search") },
radio: { ...G("input", "radio") },
checkbox: { ...G("input", "checkbox") },
select: { ...G("select", "select") },
file: { ...G("input", "file") }
}, ht = (t, e, s, r) => {
const n = Xe[t] || Xe.text;
return n.htmlTagName ? {
...kt(
n.htmlTagName,
e,
n.excludedProps
),
id: e.fieldId || e.id || "",
"data-testid": n["data-testid"],
"data-touched": s,
"data-error": r
} : {};
};
class ls {
static process(e, s) {
try {
const r = et(e) || e;
return this.isComputedValue(r) ? r.fn(s) : r;
} catch {
return this.isComputedValue(e) ? e.fn(s) : e;
}
}
static isComputedValue(e) {
return e && typeof e == "object" && "fn" in e;
}
static processFieldProps(e, s) {
const r = {};
for (const [n, a] of Object.entries(e))
this.isProcessableProperty(n) ? r[n] = this.process(a, s) : r[n] = a;
return r;
}
static isProcessableProperty(e) {
return [
"label",
"required",
"disabled",
"visibility",
"className",
"options",
"placeholder",
"validation",
"requiredMessage",
"content"
].includes(e);
}
}
const Ne = (t, e = {}) => (t.forEach((s) => {
s._defaultValue !== void 0 && e[s.fieldId] === void 0 && (e[s.fieldId] = s._defaultValue), s.fields && Ne(s.fields, e);
}), e), pt = (t) => t.dynamicOptions ? (t.dynamicOptions._cache || (t.dynamicOptions._cache = {}), t.dynamicOptions._cache) : {}, us = (t, e) => {
const s = pt(t), r = t.dynamicOptions?.dependsOn, n = t.dynamicOptions?.cacheTime || 3e4;
return t.dynamicOptions?.forceRefresh ? (t.dynamicOptions.forceRefresh = !1, !0) : !!(!s.lastFetchTime || Date.now() - s.lastFetchTime > n || r && (typeof r == "string" ? [r] : r).some((c) => e[c] !== s.lastValues?.[c]));
}, ds = (t, e) => {
const s = pt(t), r = t.dynamicOptions?.dependsOn;
if (s.lastFetchTime = Date.now(), r) {
const n = typeof r == "string" ? [r] : r;
s.lastValues = n.reduce(
(a, o) => (a[o] = e[o], a),
{}
);
}
}, ms = "_container_w0h6v_2", fs = "_label_w0h6v_7", hs = "_errorPlaceholder_w0h6v_12", ps = "_errorMessage_w0h6v_13", ys = "_description_w0h6v_26", gs = "_requiredIndicator_w0h6v_33", he = {
container: ms,
label: fs,
errorPlaceholder: hs,
errorMessage: ps,
description: ys,
requiredIndicator: gs
}, yt = Ct(
({
id: t,
label: e,
required: s,
error: r,
className: n = "",
children: a,
styles: o = {},
labelClassName: c = "",
labelStyles: d = {},
type: u,
description: l,
errorClassName: y = "",
errorStyles: v = {},
descriptionClassName: h = "",
descriptionStyles: g = {},
errorComponent: C,
descriptionComponent: T,
ariaDescribedby: S,
ariaLabel: _,
ariaDisabled: w,
ariaInvalid: E,
ariaRequired: b,
ariaHidden: N,
ariaLive: I,
role: P,
ariaLabelledby: Y
}) => {
const K = R(
() => u !== "radio" && u !== "checkbox",
[u]
), H = R(() => `${t}-description`, [t]), U = R(() => `${t}-error`, [t]), $ = R(
() => ({
"aria-describedby": S,
"aria-errormessage": r ? U : void 0,
"aria-invalid": E !== void 0 ? E : !!r,
"aria-required": b !== void 0 ? b : s,
"aria-disabled": w,
"aria-label": _,
"aria-hidden": N,
"aria-live": I,
"aria-labelledby": Y
}),
[
S,
r,
U,
E,
b,
s,
w,
_,
N,
I,
Y
]
), j = R(() => r ? C ? /* @__PURE__ */ p.jsx(C, { error: r }) : /* @__PURE__ */ p.jsx(
"span",
{
id: U,
role: "alert",
className: `${he.errorMessage} ${y}`,
style: v,
children: r
}
) : /* @__PURE__ */ p.jsx("div", { className: he.errorPlaceholder, "aria-hidden": "true" }), [r, C, U, y, v]), B = R(() => l ? T ? /* @__PURE__ */ p.jsx(T, { description: l }) : /* @__PURE__ */ p.jsx(
"span",
{
id: H,
className: `${he.description} ${h}`,
style: g,
children: l
}
) : null, [
l,
T,
H,
h,
g
]), J = R(() => !e || u === "group" ? null : /* @__PURE__ */ p.jsxs(
"label",
{
...K ? { htmlFor: t } : {},
className: `${he.label} ${c}`,
style: d,
children: [
/* @__PURE__ */ p.jsx("span", { children: e }),
s && /* @__PURE__ */ p.jsx("span", { className: he.requiredIndicator, "aria-hidden": "true", children: "*" })
]
}
), [
e,
u,
K,
t,
c,
d,
s
]), F = R(() => M.isValidElement(a) ? M.cloneElement(a, $) : a, [a, $]), k = R(() => P || (u === "group" ? "group" : void 0), [P, u]);
return /* @__PURE__ */ p.jsxs(
"div",
{
className: `${he.container} ${n}`,
style: o,
role: k,
children: [
J,
F,
B,
j
]
}
);
}
);
yt.displayName = "FieldWrapper";
const vs = M.createContext({}), gt = !0;
function bs({ baseColor: t, highlightColor: e, width: s, height: r, borderRadius: n, circle: a, direction: o, duration: c, enableAnimation: d = gt, customHighlightBackground: u }) {
const l = {};
return o === "rtl" && (l["--animation-direction"] = "reverse"), typeof c == "number" && (l["--animation-duration"] = `${c}s`), d || (l["--pseudo-element-display"] = "none"), (typeof s == "string" || typeof s == "number") && (l.width = s), (typeof r == "string" || typeof r == "number") && (l.height = r), (typeof n == "string" || typeof n == "number") && (l.borderRadius = n), a && (l.borderRadius = "50%"), typeof t < "u" && (l["--base-color"] = t), typeof e < "u" && (l["--highlight-color"] = e), typeof u == "string" && (l["--custom-highlight-background"] = u), l;
}
function ne({ count: t = 1, wrapper: e, className: s, containerClassName: r, containerTestId: n, circle: a = !1, style: o, ...c }) {
var d, u, l;
const y = M.useContext(vs), v = { ...c };
for (const [w, E] of Object.entries(c))
typeof E > "u" && delete v[w];
const h = {
...y,
...v,
circle: a
}, g = {
...o,
...bs(h)
};
let C = "react-loading-skeleton";
s && (C += ` ${s}`);
const T = (d = h.inline) !== null && d !== void 0 ? d : !1, S = [], _ = Math.ceil(t);
for (let w = 0; w < _; w++) {
let E = g;
if (_ > t && w === _ - 1) {
const N = (u = E.width) !== null && u !== void 0 ? u : "100%", I = t % 1, P = typeof N == "number" ? N * I : `calc(${N} * ${I})`;
E = { ...E, width: P };
}
const b = M.createElement("span", { className: C, style: E, key: w }, "");
T ? S.push(b) : S.push(M.createElement(
M.Fragment,
{ key: w },
b,
M.createElement("br", null)
));
}
return M.createElement("span", { className: r, "data-testid": n, "aria-live": "polite", "aria-busy": (l = h.enableAnimation) !== null && l !== void 0 ? l : gt }, e ? S.map((w, E) => M.createElement(e, { key: E }, w)) : S);
}
const xs = ({
type: t = "text",
itemsCount: e = 1,
layout: s = "column",
height: r,
width: n,
baseOpacity: a = 0.2,
containerClassName: o = ""
}) => {
const c = () => t === "checkbox" || t === "radio" ? /* @__PURE__ */ p.jsx("div", { className: `skeleton-options-container ${s}`, children: Array.from({ length: e }).map((d, u) => /* @__PURE__ */ p.jsxs("div", { className: "skeleton-option-item", children: [
/* @__PURE__ */ p.jsx(
ne,
{
className: `skeleton-option-control ${t === "radio" ? "radio" : ""}`,
height: r || 16,
width: n || 16,
style: { opacity: a + 0.3 }
}
),
/* @__PURE__ */ p.jsx(
ne,
{
className: "skeleton-option-label",
height: 10,
width: 80,
style: { opacity: a }
}
)
] }, u)) }) : t === "grid" ? /* @__PURE__ */ p.jsx("div", { className: "skeleton-grid-container", children: Array.from({ length: e }).map((d, u) => /* @__PURE__ */ p.jsxs("div", { className: "skeleton-grid-item", children: [
/* @__PURE__ */ p.jsx(
ne,
{
className: "skeleton-grid-image",
height: r || 120,
width: n || "100%",
style: { opacity: a + 0.3 }
}
),
/* @__PURE__ */ p.jsx(
ne,
{
className: "skeleton-grid-title",
height: 16,
width: "80%",
style: { opacity: a }
}
),
/* @__PURE__ */ p.jsx(
ne,
{
className: "skeleton-grid-subtitle",
height: 12,
width: "60%",
style: { opacity: a }
}
)
] }, u)) }) : /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
/* @__PURE__ */ p.jsx(
ne,
{
className: "skeleton-label",
height: 10,
width: "25%",
style: { opacity: a }
}
),
/* @__PURE__ */ p.jsx(
ne,
{
className: `skeleton-field ${t === "textarea" ? "skeleton-textarea" : ""}`,
height: r || (t === "textarea" ? 100 : 40),
width: n || "100%",
style: { opacity: a + 0.3 }
}
),
/* @__PURE__ */ p.jsx(
ne,
{
className: "skeleton-description",
height: 6,
width: "40%",
style: { opacity: a - 0.1 }
}
)
] });
return /* @__PURE__ */ p.jsx("div", { className: `skeleton-container ${o}`, children: c() });
}, Ze = M.memo(xs), Ve = {
group: q(() => import("./index-DQZV9m6F.js")),
text: q(() => import("./index-DxCfz3M0.js")),
number: q(() => import("./index-DxCfz3M0.js")),
email: q(() => import("./index-DxCfz3M0.js")),
tel: q(() => import("./index-DxCfz3M0.js")),
url: q(() => import("./index-DxCfz3M0.js")),
password: q(() => import("./index-DxCfz3M0.js")),
search: q(() => import("./index-DxCfz3M0.js")),
date: q(() => import("./index-085f5jsD.js")),
select: q(() => import("./index-CahRPKWE.js")),
radio: q(() => import("./index-dRsrOtld.js")),
checkbox: q(() => import("./index-BxDVX67t.js")),
gridview: q(() => import("./index-Cl5mWUUW.js")),
container: q(() => import("./index-Bi-X6zRY.js")),
textarea: q(() => import("./index-D8XmBG5j.js")),
spacer: q(() => import("./index-j0qqTxG8.js")),
file: q(() => import("./index-G1NXbaM4.js")),
content: q(() => import("./index-CVoTE8cs.js")),
multiSelect: q(() => import("./index-0goSg9u-.js"))
}, Is = (t, e) => {
Ve[t] = e;
}, vt = St((t, e) => {
const s = Ve[t.type];
return /* @__PURE__ */ p.jsx(s, { ...t, ref: e });
});
vt.displayName = "FieldComponentWithRef";
const bt = M.memo(
({ showSkeletonLoading: t = !0, skeleton: e, onLoadComplete: s, ...r }) => {
const { processedProps: n, fieldErrors: a, isVisible: o } = as(r), c = pe(!1), d = Ve[r.type], u = X(() => {
s && !c.current && (s(n.fieldId), c.current = !0);
}, [s, n.fieldId]);
ie(() => () => {
c.current = !1;
}, []), ie(() => {
(!d || !o) && s && !c.current && (s(n.fieldId), c.current = !0);
}, [d, o, s, n.fieldId]);
const l = R(() => {
if (!t) return null;
if (e) return e;
if (r.type === "checkbox" || r.type === "radio") {
const y = r;
return /* @__PURE__ */ p.jsx(
Ze,
{
type: r.type,
itemsCount: y?.options?.length || 1,
layout: y?.layout || "column"
}
);
}
return /* @__PURE__ */ p.jsx(Ze, { type: r.type });
}, [
t,
e,
r.type,
r?.options?.length,
r?.layout
]);
return !d || !o ? null : /* @__PURE__ */ p.jsx(At, { fallback: l, children: /* @__PURE__ */ p.jsx(
yt,
{
id: n.fieldId,
label: n.label,
required: n.required,
error: a,
className: n.containerClassName,
styles: n.containerStyles,
labelClassName: n.labelClassName,
labelStyles: n.labelStyles,
type: n.type,
description: n.description,
ariaDescribedby: n.ariaDescribedby || n.description,
ariaDisabled: n.ariaDisabled || n.disabled,
ariaLabel: n.ariaLabel || n.label,
errorClassName: n.errorClassName,
errorStyles: n.errorStyles,
descriptionClassName: n.descriptionClassName,
descriptionStyles: n.descriptionStyles,
errorComponent: n.errorComponent,
descriptionComponent: n.descriptionComponent,
children: /* @__PURE__ */ p.jsx(vt, { ...n, ref: u })
}
) });
},
// Custom comparison function to prevent unnecessary re-renders
(t, e) => t.fieldId === e.fieldId && t.type === e.type && t.label === e.label && t.required === e.required && t.disabled === e.disabled && t.showSkeletonLoading === e.showSkeletonLoading && t.skeleton === e.skeleton
);
bt.displayName = "DynamicFormField";
const ws = M.memo(() => /* @__PURE__ */ p.jsx("div", { className: "form-loading-spinner", children: /* @__PURE__ */ p.jsx("div", { className: "spinner" }) })), _e = M.memo(
({ formData: t, onSubmit: e, isLoading: s }) => {
const r = Ae(), { validateForm: n } = me(), [a, o] = se(/* @__PURE__ */ new Set()), c = pe(t);
c.current = t;
const { submit: d, loading: u, skeleton: l } = t.options || {}, y = d?.component, v = u?.component, h = R(() => a.size >= t.fields.filter((w) => !w.visibility).length, [a, t.fields]), g = X((w) => {
o((E) => {
if (E.has(w)) return E;
const b = new Set(E);
return b.add(w), b;
});
}, []), C = X(
async (w) => {
w.preventDefault();
const E = await n(c.current);
e?.(r, E);
},
[e, n, r]
), T = R(() => u?.visible === !1 || h ? null : /* @__PURE__ */ p.jsx("div", { className: "form-loading-overlay", children: v ? M.isValidElement(v) ? v : /* @__PURE__ */ p.jsx(v, {}) : /* @__PURE__ */ p.jsx(ws, {}) }), [u?.visible, h, v]), S = R(() => d?.visible === !1 || !h ? null : /* @__PURE__ */ p.jsx("div", { className: "form-submit-container", children: y ?? /* @__PURE__ */ p.jsx(
"div",
{
className: `submit-button-container ${d?.containerClassName || ""}`,
style: d?.containerStyles,
children: /* @__PURE__ */ p.jsx(
"button",
{
type: "submit",
className: "submit-button",
disabled: s,
"aria-disabled": s,
children: s ? "Submitting..." : d?.text || "Submit"
}
)
}
) }), [d, h, s, y]), _ = R(() => t.fields.map((w) => /* @__PURE__ */ p.jsx(
bt,
{
...w,
skeleton: l?.component,
showSkeletonLoading: l?.visible,
onLoadComplete: g
},
w.fieldId
)), [t.fields, l, g]);
return /* @__PURE__ */ p.jsxs(
"form",
{
onSubmit: C,
role: "form",
"aria-busy": s || !h,
"aria-live": "polite",
className: `form-content ${h ? "loaded" : ""}`,
children: [
!h && /* @__PURE__ */ p.jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: "Loading form fields..." }),
s && /* @__PURE__ */ p.jsx("div", { role: "status", "aria-live": "assertive", className: "sr-only", children: "Form is submitting..." }),
T,
/* @__PURE__ */ p.jsx("div", { style: { opacity: h ? 1 : 0 }, children: _ }),
S
]
}
);
}
);
_e.displayName = "FormContent";
const qs = ({
formId: t,
formData: e,
onSubmit: s,
isLoading: r = !1,
customProvider: n
}) => {
const a = W(Se), o = n || ss;
return a ? /* @__PURE__ */ p.jsx(
_e,
{
formId: t,
formData: e,
onSubmit: s,
isLoading: r
}
) : /* @__PURE__ */ p.jsx(o, { formSchema: e, formId: t, children: /* @__PURE__ */ p.jsx(
_e,
{
formId: t,
formData: e,
onSubmit: s,
isLoading: r
}
) });
};
export {
ae as A,
As as B,
Rs as C,
bt as D,
Os as E,
yt as F,
js as G,
Ts as H,
ks as I,
Ns as J,
_s as K,
Vs as a,
mt as b,
os as c,
qs as d,
ss as e,
oe as f,
Cs as g,
ot as h,
at as i,
p as j,
ct as k,
lt as l,
Se as m,
Ss as n,
Gt as o,
ns as p,
is as q,
Is as r,
as as s,
Ae as t,
$s as u,
it as v,
rs as w,
me as x,
ut as y,
dt as z
};