@elcrm/form 0.0.69 → 0.0.70

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/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;
@@ -198,7 +198,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 +244,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
 		]
 	});
 }