@elcrm/form 0.0.69 → 0.0.71

package/dist/fields/Numeric.js

@@ -3,15 +3,21 @@ import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
 import r, { asEditableClipboard as i } from "../events/onEvent.js";
 import { isEmptyTextLike as a } from "./visibility.js";
-import "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/lib/fields/Numeric.tsx
-function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", label: m = "", hidden: h = !1, disabled: g = !1, onBlur: _, className: v = "", after: y = "", before: b = "", error: x = "", inputmode: S = "numeric", maxLength: C, max: w, view: T }) {
-	let E = !g, { value: D, version: O } = n(u, f, l);
-	p = p === void 0 ? "" : p, w = w === void 0 ? 99 : w;
-	let k = C ?? w, A = !1, j = (e) => {
+function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", label: h = "", hidden: g = !1, disabled: _ = !1, onBlur: v, className: y = "", after: b = "", before: x = "", error: S = "", inputmode: C = "numeric", maxLength: w, max: T, view: E }) {
+	let D = !_, { value: O, version: k } = n(d, p, u);
+	m = m === void 0 ? "" : m, T = T === void 0 ? 99 : T;
+	let A = O != null && O !== "" ? String(O) : "", j = o.useRef(null), M = o.useRef(!1);
+	o.useLayoutEffect(() => {
+		if (M.current) return;
+		let e = j.current;
+		e && e.textContent !== A && (e.textContent = A);
+	}, [A, k]);
+	let N = w ?? T, P = !1, F = (e) => {
 		let t = e.currentTarget, n = (t.textContent || "").replace(/\D/g, "");
-		n.length > k && (n = n.slice(0, k), t.textContent = n, queueMicrotask(() => {
+		n.length > N && (n = n.slice(0, N), t.textContent = n, queueMicrotask(() => {
 			let e = t.firstChild;
 			if (e && e.nodeType === Node.TEXT_NODE) {
 				let t = n.length, r = window.getSelection(), i = document.createRange();
@@ -20,54 +26,55 @@ function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", l
 		}));
 		let r = {
 			value: n,
-			name: f
+			name: p
 		};
-		u && f && u.onValue(r), d && d !== u?.onValue && d(r);
-	}, M = (e) => {
+		d && p && d.onValue(r), f && f !== d?.onValue && f(r);
+	}, I = (e) => {
+		M.current = !0;
 		let t = e.currentTarget;
 		t.textContent = (t.textContent || "").replace(/\D/g, ""), r.Focus({ target: e.currentTarget });
-	}, N = (e) => {
-		if (A && e.which === 86) return;
-		if (e.which === 17 || e.which === 91) return A = !0;
+	}, L = (e) => {
+		if (P && e.which === 86) return;
+		if (e.which === 17 || e.which === 91) return P = !0;
 		if (e.key === "Backspace") return;
 		let t = (e.currentTarget.textContent ?? "").replace(/\D/g, "").length;
-		k > 0 && t >= k && e.key.length === 1 && /\d/.test(e.key) && e.preventDefault(), e.key === "Enter" && e.preventDefault(), e.key.length === 1 && !/\d/.test(e.key) && e.preventDefault();
-	}, P = (e) => {
-		if (e.which === 17 || e.which === 91) return A = !1;
-	}, F = (e) => r.PasteDigits(k, i(e)), I = (e) => {
-		r.Blur(e), _?.({
+		N > 0 && t >= N && e.key.length === 1 && /\d/.test(e.key) && e.preventDefault(), e.key === "Enter" && e.preventDefault(), e.key.length === 1 && !/\d/.test(e.key) && e.preventDefault();
+	}, R = (e) => {
+		if (e.which === 17 || e.which === 91) return P = !1;
+	}, z = (e) => r.PasteDigits(N, i(e)), B = (e) => {
+		r.Blur(e), v?.({
 			value: e.currentTarget.textContent,
-			name: f
-		});
-	}, L = {};
-	return E && (L.edit = ""), L.inputMode = S ?? "numeric", p && (L.placeholder = p), h && a(D) ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(t, {
+			name: p
+		}), M.current = !1;
+	}, V = {};
+	return D && (V.edit = ""), V.inputMode = C ?? "numeric", m && (V.placeholder = m), g && a(O) ? /* @__PURE__ */ c(s, {}) : /* @__PURE__ */ l(t, {
 		type: "numeric",
-		label: m,
-		error: x,
-		element_blok: { className: [v || ""] },
+		label: h,
+		error: S,
+		element_blok: { className: [y || ""] },
 		element_input: { className: [e.w] },
 		children: [
-			b,
-			/* @__PURE__ */ s("div", {
-				onPaste: F,
-				onInput: j,
-				onFocus: M,
-				onBlur: I,
-				onKeyDown: N,
-				onKeyUp: P,
+			x,
+			/* @__PURE__ */ c("div", {
+				ref: j,
+				onPaste: z,
+				onInput: F,
+				onFocus: I,
+				onBlur: B,
+				onKeyDown: L,
+				onKeyUp: R,
 				spellCheck: !1,
 				role: "textbox",
-				tabIndex: E ? 0 : -1,
-				"aria-label": m || p || "Число",
-				contentEditable: E ? "plaintext-only" : !1,
+				tabIndex: D ? 0 : -1,
+				"aria-label": h || m || "Число",
+				contentEditable: D ? "plaintext-only" : !1,
 				suppressContentEditableWarning: !0,
-				...L,
-				children: D
-			}, O),
-			y
+				...V
+			}),
+			b
 		]
 	});
 }
-l.displayName = "NumberField";
+u.displayName = "NumberField";
 //#endregion
-export { l as default };
+export { u as default };

package/dist/fields/Options.js

@@ -15,29 +15,23 @@ function c({ value: c, form: l, onValue: u, name: d, placeholder: f = "", separa
 			modalName: e[1],
 			callback: (e) => {
 				let t = e;
-				if (u) {
-					let e = {
-						value: v === "array" ? Object.keys(t) : v === "string" ? Object.keys(t).filter((e) => t[e]).join(p) : t,
-						name: d
-					};
-					switch (l && d && l.setValue(e), v) {
-						case "array":
-							u !== l?.onValue && u({
-								value: Object.keys(t),
-								name: d
-							});
-							break;
-						case "string":
-							u !== l?.onValue && u({
-								value: Object.keys(t).filter((e) => t[e]).join(p),
-								name: d
-							});
-							break;
-						default: u !== l?.onValue && u({
-							value: t,
+				if (u) switch (v === "array" || v === "string" && Object.keys(t).filter((e) => t[e]).join(p), v) {
+					case "array":
+						u !== l?.onValue && u({
+							value: Object.keys(t),
+							name: d
+						});
+						break;
+					case "string":
+						u !== l?.onValue && u({
+							value: Object.keys(t).filter((e) => t[e]).join(p),
 							name: d
 						});
-					}
+						break;
+					default: u !== l?.onValue && u({
+						value: t,
+						name: d
+					});
 				}
 			},
 			onValue: u,

package/dist/fields/Password.js

@@ -46,7 +46,7 @@ function l() {
 	});
 }
 function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", label: h, error: g, hidden: _ = !1, disabled: v = !1, onBlur: y, className: b, after: x = "", before: S = "", native: C = !1, maxLength: w, eyes: T }) {
-	let [E, D] = a.useState(!1), { value: O } = n(d, p, u), k = a.useRef(null), A = typeof O == "string" ? O : O == null ? "" : String(O);
+	let { value: E } = n(d, p, u), [D, O] = a.useState(!1), k = a.useRef(null), A = typeof E == "string" ? E : E == null ? "" : String(E);
 	a.useEffect(() => {
 		let e = k.current;
 		e && e.value !== A && (e.value = A);
@@ -90,7 +90,7 @@ function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", l
 					alignItems: "center"
 				},
 				children: /* @__PURE__ */ o("input", {
-					type: E ? "text" : "password",
+					type: D ? "text" : "password",
 					defaultValue: A,
 					ref: k,
 					onChange: M,
@@ -121,13 +121,10 @@ function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", l
 			/* @__PURE__ */ o("button", {
 				type: "button",
 				tabIndex: v ? -1 : 0,
-				"aria-label": E ? "Скрыть пароль" : "Показать пароль",
-				"aria-pressed": E,
+				"aria-label": D ? "Скрыть пароль" : "Показать пароль",
+				"aria-pressed": D,
 				disabled: v,
-				onClick: () => !v && D(!E),
-				onKeyDown: (e) => {
-					v || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), D(!E));
-				},
+				onClick: () => !v && O(!D),
 				style: {
 					cursor: v ? "not-allowed" : "pointer",
 					alignSelf: "center",
@@ -142,7 +139,7 @@ function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", l
 					color: "inherit",
 					font: "inherit"
 				},
-				children: E ? L : I
+				children: D ? L : I
 			}),
 			x
 		]

package/dist/fields/Phone.js

@@ -5,10 +5,10 @@ import r, { asEditableClipboard as i } from "../events/onEvent.js";
 import { isEmptyTextLike as a } from "./visibility.js";
 import o from "../mask/MaskPhone.js";
 import { useFormInit as s } from "../FormInitContext.js";
-import "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import c from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/lib/fields/Phone.tsx
-function d(e) {
+function f(e) {
 	let t = window.getSelection();
 	if (!t || t.rangeCount === 0) return 0;
 	let n = t.getRangeAt(0);
@@ -16,97 +16,107 @@ function d(e) {
 	let r = document.createRange();
 	return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
 }
-function f(e, t) {
+function p(e, t) {
 	if (t <= 0) return 0;
 	let n = 0;
 	for (let r = 0; r < e.length; r++) if (/\d/.test(e[r]) && (n++, n === t)) return r + 1;
 	return e.length;
 }
-function p({ value: p, form: m, onValue: h, onBlur: g, name: _ = "", placeholder: v = "", label: y = "", error: b = "", hidden: x = !1, disabled: S = !1, className: C = "", after: w = "", before: T = "", inputmode: E = "tel", view: D }) {
-	let { onNotice: O } = s(), k = !S, { value: A, version: j } = n(m, _, p), M = "+_(___) ___-__-__", N = !0, P = 0, F = (e, t) => {
+function m({ value: m, form: h, onValue: g, onBlur: _, name: v = "", placeholder: y = "", label: b = "", error: x = "", hidden: S = !1, disabled: C = !1, className: w = "", after: T = "", before: E = "", inputmode: D = "tel", view: O }) {
+	let { onNotice: k } = s(), A = !C, { value: j, version: M } = n(h, v, m), N = c.useRef(null), P = c.useRef(!1), F = "+_(___) ___-__-__", I = !0, L = 0, R = (e, t) => {
 		let n = t.firstChild;
 		if (!n || n.nodeType !== Node.TEXT_NODE) return;
 		let r = n.textContent?.length ?? 0, i = Math.max(0, Math.min(e, r)), a = document.createRange(), o = window.getSelection();
 		o && (a.setStart(n, i), a.collapse(!0), o.removeAllRanges(), o.addRange(a), t.focus());
-	}, I = (e) => {
-		let t = e.target, n = t.textContent || "", r = d(t), i = n.slice(0, r).replace(/\D/g, "").length, a = R(n);
+	}, z = (e) => {
+		let t = e.target, n = t.textContent || "", r = f(t), i = n.slice(0, r).replace(/\D/g, "").length, a = V(n);
 		t.textContent = a.q;
-		let o = f(a.q, i);
+		let o = p(a.q, i);
 		a.q.length > 0 && queueMicrotask(() => {
-			F(Math.min(o, a.q.length), t);
+			R(Math.min(o, a.q.length), t);
 		});
 		let s = {
 			value: a.q.replace(/\D/g, ""),
-			name: _ || ""
+			name: v || ""
 		};
-		m && _ && m.onValue(s), h && h !== m?.onValue && h(s);
-	}, L = (e) => r.PasteOne(i(e)), R = (e) => {
-		M = "+_(___) ___-__-__", N = !0, P = 0;
+		h && v && h.onValue(s), g && g !== h?.onValue && g(s);
+	}, B = (e) => r.PasteOne(i(e)), V = (e) => {
+		F = "+_(___) ___-__-__", I = !0, L = 0;
 		let t = 0, n = "", r = e.replace(/\D/g, "");
-		r === "" && (N = !0);
+		r === "" && (I = !0);
 		let i = r.split(""), a = "";
 		i.forEach((e) => {
-			N && (a += e, o[a] !== void 0 && N ? (N = !1, M = o[a].mask.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = o[a].code) : (N && (P = ("" + a).length, M = `+${a}_(___) ___-__-__`.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""), P > ("" + a).length && (N = !0, M = `+${a}_(___) ___-__-__`.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = "")));
+			I && (a += e, o[a] !== void 0 && I ? (I = !1, F = o[a].mask.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = o[a].code) : (I && (L = ("" + a).length, F = `+${a}_(___) ___-__-__`.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""), L > ("" + a).length && (I = !0, F = `+${a}_(___) ___-__-__`.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = "")));
 		});
-		let s = M.replace(/\D/g, "");
+		let s = F.replace(/\D/g, "");
 		return s.length >= r.length && (r = s), {
-			q: M.replace(/[_\d]/g, function() {
+			q: F.replace(/[_\d]/g, function() {
 				return r.charAt(t++) || "_";
 			}),
 			i: t,
 			v: r,
 			f: n
 		};
-	}, z = (e) => {
+	};
+	c.useLayoutEffect(() => {
+		if (P.current) return;
+		let e = N.current;
+		if (!e) return;
+		let t = V(String(j || ""));
+		e.textContent !== t.q && (e.textContent = t.q);
+	}, [j, M]);
+	let H = (e) => {
 		e.preventDefault();
 		let t = e.target;
 		navigator.clipboard.writeText((t.textContent || "").replace(/\D/g, "")).then(function() {
-			O("Данные в буфер обмене");
+			k("Данные в буфер обмене");
 		}, function(e) {
 			console.error("Async: Could not copy text: ", e);
 		});
-	}, B = R(String(A || "")), V = (e) => {
+	};
+	V(String(j || ""));
+	let U = (e) => {
 		e.key === "Enter" && e.preventDefault();
-	}, H = (e) => {
-		r.Blur(e), g && g({
+	}, W = (e) => {
+		r.Blur(e), _ && _({
 			value: (e.target.textContent || "").replace(/\D/g, ""),
-			name: _ || ""
-		});
-	}, U = (e) => {
-		r.Focus({ target: e.currentTarget });
-	}, W = {};
-	v && (W.placeholder = v), W.inputMode = E ?? "tel";
-	let G = String(A ?? "").replace(/\D/g, "");
-	return x && a(G) ? /* @__PURE__ */ l(c, {}) : /* @__PURE__ */ u(t, {
+			name: v || ""
+		}), P.current = !1;
+	}, G = (e) => {
+		P.current = !0, r.Focus({ target: e.currentTarget });
+	}, K = {};
+	y && (K.placeholder = y), K.inputMode = D ?? "tel";
+	let q = String(j ?? "").replace(/\D/g, "");
+	return S && a(q) ? /* @__PURE__ */ u(l, {}) : /* @__PURE__ */ d(t, {
 		type: "input",
-		label: y,
-		error: b,
-		element_blok: { className: [C] },
+		label: b,
+		error: x,
+		element_blok: { className: [w] },
 		element_input: { className: [e.w] },
 		children: [
-			T,
-			/* @__PURE__ */ l("div", {
-				onPaste: L,
-				onInput: I,
-				onKeyDown: V,
-				onContextMenu: z,
-				onBlur: H,
-				onFocus: U,
+			E,
+			/* @__PURE__ */ u("div", {
+				ref: N,
+				onPaste: B,
+				onInput: z,
+				onKeyDown: U,
+				onContextMenu: H,
+				onBlur: W,
+				onFocus: G,
 				spellCheck: !1,
 				role: "textbox",
-				"aria-label": y || v || "Телефон",
-				"aria-disabled": !k,
-				tabIndex: S ? -1 : 0,
-				"data-disabled": !k,
-				contentEditable: k ? "plaintext-only" : !1,
+				"aria-label": b || y || "Телефон",
+				"aria-disabled": !A,
+				tabIndex: C ? -1 : 0,
+				"data-disabled": !A,
+				contentEditable: A ? "plaintext-only" : !1,
 				suppressContentEditableWarning: !0,
-				...W,
-				children: B.q
-			}, j),
-			w
+				...K
+			}),
+			T
 		]
 	});
 }
-p.displayName = "PhoneField";
+m.displayName = "PhoneField";
 //#endregion
-export { p as default };
+export { m as default };

package/dist/fields/Range.js

@@ -17,7 +17,7 @@ function c({ value: c = 0, form: l, onValue: u, onBlur: d, name: f = "", placeho
 			value: s(e, x, S, C),
 			name: f || ""
 		};
-		l && f && l.setValue(t), u && u !== l?.onValue && u(t);
+		u && u !== l?.onValue && u(t);
 	}, [
 		l,
 		f,

package/dist/fields/Textarea.js

@@ -3,50 +3,59 @@ import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
 import r, { asEditableClipboard as i } from "../events/onEvent.js";
 import { isEmptyTextLike as a } from "./visibility.js";
-import "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/lib/fields/Textarea.tsx
-function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", label: m = "", hidden: h = !1, disabled: g = !1, onBlur: _, className: v = "", after: y = "", before: b = "", error: x = "", inputmode: S = "text", maxLength: C, spellCheck: w = !0 }) {
-	let { value: T, version: E } = n(u, f || "", l), D = !g, O = (e) => {
+function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", label: h = "", hidden: g = !1, disabled: _ = !1, onBlur: v, className: y = "", after: b = "", before: x = "", error: S = "", inputmode: C = "text", maxLength: w, spellCheck: T = !0 }) {
+	let { value: E, version: D } = n(d, p || "", u), O = !_, k = String(E ?? ""), A = o.useRef(null), j = o.useRef(!1);
+	o.useLayoutEffect(() => {
+		if (j.current) return;
+		let e = A.current;
+		e && e.innerText !== k && (e.innerText = k);
+	}, [k, D]);
+	let M = (e) => {
 		let t = {
 			value: e.currentTarget.innerText,
-			name: f || ""
+			name: p || ""
 		};
-		u && f && u.onValue(t), d && d !== u?.onValue && d(t);
-	}, k = (e) => {
+		d && p && d.onValue(t), f && f !== d?.onValue && f(t);
+	}, N = (e) => {
 		let t = (e.currentTarget.textContent ?? "").trim();
-		C && t.length >= C && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && !e.shiftKey && e.preventDefault();
-	}, A = (e) => r.Paste(C || 0, i(e));
-	if (h && a(T)) return /* @__PURE__ */ s(o, {});
-	let j = {};
-	return p && (j.placeholder = p), D && (j.edit = ""), j.inputMode = S || "text", /* @__PURE__ */ c(t, {
+		w && t.length >= w && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && !e.shiftKey && e.preventDefault();
+	}, P = (e) => r.Paste(w || 0, i(e));
+	if (g && a(E)) return /* @__PURE__ */ c(s, {});
+	let F = {};
+	return m && (F.placeholder = m), O && (F.edit = ""), F.inputMode = C || "text", /* @__PURE__ */ l(t, {
 		type: "note",
-		label: m,
-		error: x,
-		element_blok: { className: [v || ""] },
+		label: h,
+		error: S,
+		element_blok: { className: [y || ""] },
 		element_input: { className: [e.n] },
 		children: [
-			b,
-			/* @__PURE__ */ s("div", {
-				onPaste: A,
-				onInput: O,
+			x,
+			/* @__PURE__ */ c("div", {
+				ref: A,
+				onPaste: P,
+				onInput: M,
+				onFocus: () => {
+					j.current = !0;
+				},
 				onBlur: (e) => {
-					r.Blur(e), _?.({
+					r.Blur(e), v?.({
 						value: (e.currentTarget.textContent ?? "").trim(),
-						name: f || ""
-					});
+						name: p || ""
+					}), j.current = !1;
 				},
-				onKeyDown: k,
-				spellCheck: w,
-				contentEditable: D ? "plaintext-only" : !1,
+				onKeyDown: N,
+				spellCheck: T,
+				contentEditable: O ? "plaintext-only" : !1,
 				suppressContentEditableWarning: !0,
-				...j,
-				children: T
-			}, E),
-			y
+				...F
+			}),
+			b
 		]
 	});
 }
-l.displayName = "TextareaField";
+u.displayName = "TextareaField";
 //#endregion
-export { l as default };
+export { u as default };

package/dist/fields/Time.js

@@ -82,7 +82,7 @@ function _(e, t, n) {
 	}
 	return p(Math.floor(i / 60), i % 60);
 }
-function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", placeholder: x = "", label: S = "", hidden: C = !1, disabled: w = !1, error: T = "", className: E = "", after: D = "", before: te = "", step: O = 60, min: k, max: A, id: j, spellCheck: M = !1, align: N = "start" }) {
+function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", placeholder: x = "", label: S = "", hidden: C = !1, disabled: w = !1, error: T = "", className: E = "", after: te = "", before: D = "", step: O = 60, min: k, max: A, id: j, spellCheck: M = !1, align: N = "start" }) {
 	let { value: P, version: F } = n(v, b, h), I = d(P), L = !w, R = i.useRef(null), z = i.useRef(null), B = i.useRef(null), [V, H] = i.useState(!1);
 	i.useLayoutEffect(() => {
 		if (!V || !L) return;
@@ -165,10 +165,7 @@ function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", place
 			let n = t.relatedTarget;
 			if (n && e.contains(n)) return;
 			let r = U();
-			v && b && v.setValue({
-				name: b,
-				value: r
-			}), y && b && y({
+			y && b && y({
 				value: r,
 				name: b
 			}), H(!1);
@@ -198,7 +195,7 @@ function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", place
 			props: { "data-disabled": w || !L ? "true" : void 0 }
 		},
 		children: [
-			te,
+			D,
 			/* @__PURE__ */ o("div", {
 				ref: B,
 				className: e.timeInner,
@@ -244,8 +241,8 @@ function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", place
 						children: !L || !V ? Q === null ? "" : l(Q) : null
 					})
 				]
-			}, F),
-			D
+			}),
+			te
 		]
 	});
 }