npm - @elcrm/form - Versions diffs - 0.0.68 → 0.0.70 - Mend

@elcrm/form 0.0.68 → 0.0.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md CHANGED Viewed

@@ -12,7 +12,7 @@ npm install @elcrm/form
 ## Стили и темы
-- **Базовые стили полей** (Field / Form / Select) встраиваются **в JS** при первом импорте компонента: **`dist/embedBaseStyles.js`** вставляет склеённый CSS в `<head>` (настройки **css-loader** в приложении **не нужны**). Срабатывает и при импорте с **корня** (`@elcrm/form`), и при **подпутях** (`@elcrm/form/fields/Date` и т.д.) — через **`core/Field`**.
+- **Базовые стили полей** (Field / Form / Select) **вшиты в начало** `dist/index.js` и `dist/core/Field.js` (скрипт сборки): при загрузке модуля в `<head>` добавляется один `<style>` — **отдельные CSS-файлы и настройка css-loader в приложении не нужны**. Работает и с **корня** (`@elcrm/form`), и с **подпутями** — стили подхватывает **`Field`**.
 - **Опционально** можно по-прежнему подключить **`@elcrm/form/style.css`** вручную (тот же текст, что во встраивании) — например для SSR без клиентского JS.
 - **Темы** (светлая / тёмная): **`@elcrm/form/light.css`**, **`@elcrm/form/dark.css`** — атрибут **`data-theme`** на контейнере (подключаются вручную).

package/dist/core/Field.js CHANGED Viewed

@@ -1,4 +1,14 @@
-import '../embedBaseStyles.js';
+/* @elcrm/form:base-styles-inline */
+(function () {
+    if (typeof document === "undefined") return;
+    if (document.getElementById("elcrm-form-base-styles")) return;
+    var el = document.createElement("style");
+    el.id = "elcrm-form-base-styles";
+    el.setAttribute("data-elcrm", "form");
+    el.textContent = "._l_zzcgd_2{min-width:var(--field-width);gap:var(--field-block-gap,0);flex-direction:column;margin:0;padding:0;display:flex;position:relative}._l_zzcgd_2>dt,._l_zzcgd_2>dd{margin:0;padding:0}._l_zzcgd_2[data-field=group] div{cursor:pointer;border-bottom:var(--field-border);padding:var(--field-padding);margin:0}._l_zzcgd_2[data-field=group] div:last-child{border-bottom:0}._l_zzcgd_2 [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);display:block}._l_zzcgd_2 [placeholder]:focus:before{display:none}._f_zzcgd_33{box-sizing:border-box;align-items:center;gap:var(--field-icon-gap,10px);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:0 var(--field-side-padding,14px);transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}._f_zzcgd_33:hover{border-color:var(--field-border-hover,var(--field-border))}._f_zzcgd_33:focus-within{border-color:var(--field-border-focus,var(--field-border));box-shadow:0 0 0 3px var(--field-focus-ring,#0000);background:var(--field-background-focus,var(--field-background))}._f_zzcgd_33._e_zzcgd_57:focus-within{background:var(--field-error-background);color:var(--field-error-color)}._f_zzcgd_33[data-disabled=true]{background:var(--field-background-disabled,var(--field-background));border-color:var(--field-border-disabled,var(--field-border));color:var(--field-color-disabled,var(--field-placeholder));cursor:not-allowed;opacity:.85}._f_zzcgd_33[data-disabled=true]>*{cursor:not-allowed}._f_zzcgd_33>div{min-height:var(--field-height);line-height:calc(var(--field-height) - 2px);padding:var(--field-inner-padding,0 2px);font-size:var(--control-font-size,14px);text-wrap:pretty;outline:0;flex:1;margin:0}._f_zzcgd_33>div::selection{background:var(--field-selection-bg,#b3d4fc);color:var(--field-selection-color,inherit)}._f_zzcgd_33>:not(div){color:var(--field-icon-color,var(--field-placeholder));flex:none;justify-content:center;align-items:center;display:inline-flex}._f_zzcgd_33>:not(div) svg{width:20px;height:20px}._n_zzcgd_97 div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);padding-top:var(--field-note-padding,var(--field-note-padding-top,8px));padding-bottom:var(--field-note-padding,var(--field-note-padding-top,8px))}._w_zzcgd_104>div{text-wrap:nowrap;overflow:scroll hidden}._w_zzcgd_104>div::-webkit-scrollbar{width:0;height:0}._time_zzcgd_114>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}._time_zzcgd_114 ._timeInner_zzcgd_121{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}._time_zzcgd_114._timeAlignCenter_zzcgd_132 ._timeInner_zzcgd_121{justify-content:center}._time_zzcgd_114 ._timeSep_zzcgd_135{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0 2px;font-weight:500;transform:translateY(-1px)}._time_zzcgd_114 ._timePart_zzcgd_146{box-sizing:border-box;width:1em;min-width:0;color:inherit;font:inherit;line-height:inherit;text-align:left;min-height:var(--field-height);cursor:text;background:0 0;border:0;border-radius:6px;outline:none;flex:none;margin:0;padding:0}._time_zzcgd_114 ._timePart_zzcgd_146[contenteditable=false]{cursor:not-allowed;opacity:.7}._time_zzcgd_114 ._timePart_zzcgd_146:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:.6}._time_zzcgd_114 ._timePart_zzcgd_146:focus:empty:before{content:none}._time_zzcgd_114 ._timePart_zzcgd_146:focus-visible{background:0 0}._time_zzcgd_114._timeAlignCenter_zzcgd_132 ._timePart_zzcgd_146{text-align:center}._t_zzcgd_114{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:10px}._g_zzcgd_192{flex-direction:column}._range_zzcgd_196>div{box-sizing:border-box;min-width:0;min-height:var(--field-height);flex:1;align-items:center;line-height:normal;display:flex}._range_zzcgd_196 ._rangeTrack_zzcgd_205{box-sizing:border-box;width:100%;height:var(--field-range-bar-height,14px);background:var(--field-range-track,#e0e0e0);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}._range_zzcgd_196 ._rangeTrack_zzcgd_205:focus-visible{box-shadow:0 0 0 3px var(--field-focus-ring,#0000)}._range_zzcgd_196 ._rangeTrack_zzcgd_205[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}._range_zzcgd_196 ._rangeFill_zzcgd_226{background:var(--field-range-fill,#00b5ad);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}._range_zzcgd_196 ._rangeFillFull_zzcgd_237{border-radius:999px}._h_zzcgd_241{--field-border:0}._h_zzcgd_241 div{border:var(--field-check-box-border,--field-border);width:var(--field-height);height:var(--field-height);border-radius:var(--field-radius);background:var(--field-background);cursor:pointer;flex:none;gap:10px;margin:0;position:relative}._h_zzcgd_241 div[aria-checked=true]{background:var(--field-background-active)}._h_zzcgd_241 div:after{content:\"\";background:0 0;border-top:none;border-bottom:3px solid #fcfff4;border-left:3px solid #fcfff4;border-right:none;width:9px;height:5px;margin:4px;position:absolute;top:5px;left:4px;transform:rotate(-45deg)}._e_zzcgd_57{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}._m_zzcgd_280{color:var(--field-error-color);margin-top:6px;font-size:12px;font-style:normal}\n\n._o_j48yg_2{z-index:98;background:0 0;position:fixed;inset:0}._c_j48yg_13{background:var(--select-background);z-index:99;color:#fff;box-sizing:border-box;border-radius:10px;min-width:259px;max-height:min(92vh,480px);margin:0;padding:10px 12px 12px;display:block;position:absolute;overflow:hidden auto;box-shadow:5px 7px 18px #000000a8}._c_j48yg_13 [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:34px;gap:2px;display:grid}._c_j48yg_13 [grid-calendar]>p{color:var(--color-placeholder);box-sizing:border-box;justify-content:center;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:500;line-height:1;display:flex}._c_j48yg_13 [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}._c_j48yg_13 b{cursor:pointer;text-align:center;border-radius:5px;padding:8px 5px;font-weight:400;display:block}._c_j48yg_13 b.__active_j48yg_64{background:var(--bg-select-active)}._c_j48yg_13 b:hover{background:var(--bg-select-hover)}._c_j48yg_13 p{color:var(--color-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}._c_j48yg_13 i{text-align:center;cursor:pointer;border-radius:5px;flex:0 30px;padding:9px}._c_j48yg_13 i:hover{background:var(--bg-select-hover)}._c_j48yg_13 i:before{cursor:pointer;display:block}._c_j48yg_13 s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}._c_j48yg_13 s h2{text-align:center;color:#fff;cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;min-width:0;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}._c_j48yg_13 ._dateHeaderMonth_j48yg_119,._c_j48yg_13 ._dateHeaderYear_j48yg_119{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}._c_j48yg_13 ._dateHeaderMonth_j48yg_119:hover,._c_j48yg_13 ._dateHeaderYear_j48yg_119:hover{background:var(--bg-select-hover)}._c_j48yg_13 ._dateHeaderDisabled_j48yg_129{cursor:not-allowed;opacity:.45;pointer-events:none}._c_j48yg_13 ._dateHeaderDisabled_j48yg_129[data-active=true],._c_j48yg_13 ._dateHeaderDisabled_j48yg_129[data-current=true]{opacity:.45}._c_j48yg_13 [grid-calendar] b[data-current=true],._c_j48yg_13 [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}._c_j48yg_13 [grid-calendar] b[data-active=true]:not([data-current=true]),._c_j48yg_13 [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}._c_j48yg_13 [grid-calendar] b[data-active=true][data-current=true],._c_j48yg_13 [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_j48yg_13 [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:5px;font-weight:600}._c_j48yg_13 [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}._c_j48yg_13 [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_j48yg_13 span{text-align:center;padding:2px}._c_j48yg_13 span p{color:var(--color-placeholder);padding:8px 5px}._c_j48yg_13 [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}._c_j48yg_13 [grid-calendar]>span>b,._c_j48yg_13 [grid-calendar]>span>p{box-sizing:border-box;border-radius:5px;flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}._c_j48yg_13 ._as_j48yg_196{cursor:ns-resize}._c_j48yg_13 ._ap_j48yg_199{cursor:pointer}[field=password] dd{white-space:nowrap;font-style:unset;-webkit-text-security:disc;-webkit-user-select:text;user-select:text}[field=password][show] dd,[field=password] dd:before{-webkit-text-security:none}[field=code] div{gap:8px;display:flex}[field=select] dd{cursor:pointer}[field] dd:before{pointer-events:none}[field=check] dd{cursor:pointer;max-width:35px;padding:0}[field=check] [active]:after{content:\"\";background:#394264;border-radius:5px;width:15px;height:15px;display:block}[field=file] input{display:none}[field=file] dd{aspect-ratio:16/9;cursor:pointer;position:relative}[field=file] img{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block}[field=file] label{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block;position:absolute}[field=color] dd{border:0;gap:3px;padding:0;display:flex}[field=color] dd s{cursor:pointer;opacity:.6;border:1px solid #dde2e4;border-radius:6px;flex:1}[field=color] dd s:hover{opacity:.9}[field=color] dd s[active=true]{opacity:1}\n\n:root{--select-overlay:#0000;--select-height:52px;--select-separator:1px solid #40434c;--select-color:#e8e8eb;--select-background:#26282e;--select-icon:calc(--select-height / 1.5);--select-icon-padding:calc((--select-height - --select-icon) / 2);--select-font-size:13px}._o_1q26w_12{z-index:98;background:var(--select-overlay);position:fixed;inset:0}._l_1q26w_22{background:var(--select-background);z-index:99;border-radius:20px;max-height:300px;margin:0;padding:0;display:block;position:fixed;overflow:scroll}._l_1q26w_22::-webkit-scrollbar{width:0;height:0}._l_1q26w_22 ul{width:100%;max-height:300px;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}._l_1q26w_22 li{border-bottom:var(--select-separator);cursor:pointer;color:var(--select-color);height:var(--select-height);line-height:var(--select-height);font-size:var(--select-font-size);white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;padding:0 14px;display:block;overflow:hidden;text-align:left!important;border-left:0!important}._l_1q26w_22 li:hover,._l_1q26w_22 li[data-focus=true]{background:#2f323a}._l_1q26w_22 li:last-child{border-bottom:0}._i_1q26w_80{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}._f_1q26w_89{cursor:pointer}._f_1q26w_89[aria-disabled=true]{cursor:not-allowed}\n";
+    document.head.appendChild(el);
+})();
 import e from "../styles/Field.module.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/lib/core/Field.tsx

package/dist/fields/Date.js CHANGED Viewed

@@ -26,37 +26,41 @@ function f(e, t, n) {
 	}
 	return r;
 }
-function p({ label: i = "", error: u, hidden: d = !1, className: f, placeholder: p, disabled: h = !1, onValue: g, max: v, min: y, form: b, icon: x, name: S = "", value: C, after: w = "", before: T = "" }) {
-	let E = a.useCallback((e) => e == null ? /* @__PURE__ */ new Date() : e instanceof Date || typeof e == "string" || typeof e == "number" ? e : /* @__PURE__ */ new Date(), []), { value: D, version: O } = n(b, S, C), [k, A] = a.useState(E(D)), j = a.useRef({
+function p({ label: i = "", error: u, hidden: d = !1, className: f, placeholder: p, disabled: h = !1, onValue: g, max: _, min: y, form: b, icon: x, name: S = "", value: C, after: w = "", before: T = "" }) {
+	let E = a.useCallback((e) => {
+		if (e == null) return /* @__PURE__ */ new Date();
+		if (e instanceof Date) return Number.isNaN(e.getTime()) ? /* @__PURE__ */ new Date() : e;
+		if (typeof e == "string" || typeof e == "number") {
+			let t = new Date(e);
+			return Number.isNaN(t.getTime()) ? /* @__PURE__ */ new Date() : e;
+		}
+		return /* @__PURE__ */ new Date();
+	}, []), { value: D } = n(b, S, C), [O, k] = a.useState(E(D)), A = a.useRef({
 		x: 0,
 		y: 0,
 		b: 0
-	}), [M, N] = a.useState(!1);
+	}), [j, M] = a.useState(!1);
 	a.useEffect(() => {
-		A(E(D));
-	}, [
-		D,
-		O,
-		E
-	]);
-	let P = (e) => {
+		k(E(D));
+	}, [D, E]);
+	let N = (e) => {
 		let t = {
 			value: e,
 			name: S
 		};
-		b && S ? b.setValue(t) : A(e), g && g !== b?.onValue && g(t);
-	}, F = (e) => {
+		b && S ? b.setValue(t) : k(e), g && g !== b?.onValue && g(t);
+	}, P = (e) => {
 		if (h) return;
 		let t = e.currentTarget.getBoundingClientRect();
-		j.current = {
+		A.current = {
 			x: t.left,
 			b: t.bottom,
 			y: t.top
-		}, N(!0);
-	}, I = {};
-	p && (I.placeholder = p);
-	let L = D == null || D === "" || typeof D == "string" && r(D);
-	return d && L ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(o, { children: [x ? x() : /* @__PURE__ */ c(t, {
+		}, M(!0);
+	}, F = {};
+	p && (F.placeholder = p);
+	let I = D == null || D === "" || typeof D == "string" && r(D);
+	return d && I ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(o, { children: [x ? x() : /* @__PURE__ */ c(t, {
 		type: "date",
 		label: i,
 		error: u,
@@ -68,38 +72,40 @@ function p({ label: i = "", error: u, hidden: d = !1, className: f, placeholder:
 		children: [
 			T,
 			/* @__PURE__ */ s("div", {
-				onClick: F,
+				onClick: P,
 				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), F(e));
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), P(e));
 				},
 				tabIndex: h ? -1 : 0,
 				role: "button",
 				"aria-haspopup": "dialog",
-				"aria-expanded": M,
+				"aria-expanded": j,
 				"aria-label": i || p || "Дата",
 				"data-edit": h ? void 0 : "true",
-				...I,
+				...F,
 				style: { cursor: h ? "not-allowed" : "pointer" },
-				children: _(k, "dd.mm.yyyy")
-			}, O),
+				children: v(O, "dd.mm.yyyy")
+			}),
 			w
 		]
-	}), M && l(/* @__PURE__ */ s(m, {
-		position: j.current,
-		onValue: P,
-		date: k,
-		max: v,
+	}), j && l(/* @__PURE__ */ s(m, {
+		position: A.current,
+		onValue: N,
+		date: O,
+		max: _,
 		min: y,
-		onOpen: N,
+		onOpen: M,
 		className: f
 	}, (/* @__PURE__ */ new Date()).getTime()), document.body)] });
 }
 p.displayName = "DateField";
 var m = ({ date: e, onValue: t, position: n, max: r, min: l, className: p, onOpen: m }) => {
-	let _ = /* @__PURE__ */ new Date(), v = new Date(e), y = {
-		y: _.getFullYear(),
-		d: _.getDate(),
-		m: _.getMonth() + 1
+	let h = /* @__PURE__ */ new Date(), v = new Date(e);
+	Number.isNaN(v.getTime()) && (v = /* @__PURE__ */ new Date());
+	let y = {
+		y: h.getFullYear(),
+		d: h.getDate(),
+		m: h.getMonth() + 1
 	}, b = {
 		y: v.getFullYear(),
 		d: v.getDate(),
@@ -144,7 +150,7 @@ var m = ({ date: e, onValue: t, position: n, max: r, min: l, className: p, onOpe
 			m: x.m
 		}), w("days"));
 	}, B = (e) => {
-		t(x.y + "-" + g(2, x.m) + "-" + g(2, e)), M();
+		t(x.y + "-" + _(2, x.m) + "-" + _(2, e)), M();
 	}, V = (e, t) => {
 		t = e > 12 ? t + 1 : e < 1 ? t - 1 : t, e = e > 12 ? 1 : e < 1 ? 12 : e, S({
 			y: t,
@@ -185,7 +191,7 @@ var m = ({ date: e, onValue: t, position: n, max: r, min: l, className: p, onOpe
 						e.stopPropagation(), w(C === "years" ? "months" : C === "months" ? "days" : "months");
 					},
 					title: C === "years" ? "К списку месяцев" : C === "months" ? "К календарю" : "Выбрать месяц",
-					children: h(x.m).name
+					children: g(x.m).name
 				}), /* @__PURE__ */ s("span", {
 					className: i.dateHeaderYear,
 					onClick: (e) => {
@@ -230,7 +236,7 @@ var m = ({ date: e, onValue: t, position: n, max: r, min: l, className: p, onOpe
 						...o,
 						...c,
 						onClick: () => a && R(n),
-						children: h(n).abc
+						children: g(n).abc
 					}, n);
 				})
 			}),
@@ -249,9 +255,15 @@ var m = ({ date: e, onValue: t, position: n, max: r, min: l, className: p, onOpe
 			})
 		]
 	})] });
+}, h = {
+	val: "01",
+	name: "—",
+	names: "—",
+	abc: "—"
 };
-function h(e) {
-	return e = typeof e == "number" ? e : new Date(e).getMonth() + 1, {
+function g(e) {
+	let t = typeof e == "number" ? e : new Date(e).getMonth() + 1;
+	return (!Number.isFinite(t) || t < 1 || t > 12) && (t = (/* @__PURE__ */ new Date()).getMonth() + 1), {
 		1: {
 			val: "01",
 			name: "Январь",
@@ -324,14 +336,14 @@ function h(e) {
 			names: "Декабря",
 			abc: "Дек"
 		}
-	}[e];
+	}[t] ?? h;
 }
-function g(e, t) {
+function _(e, t) {
 	let n = t + "";
 	for (; n.length < e;) n = "0" + n;
 	return n;
 }
-function _(e, t) {
+function v(e, t) {
 	let n, r;
 	t === void 0 ? (r = String(e), n = /* @__PURE__ */ new Date()) : (r = t, n = new Date(e));
 	let i = r, a = {

package/dist/fields/Input.js CHANGED Viewed

@@ -7,45 +7,53 @@ import o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/lib/fields/Input.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, native: T = !1, autoComplete: E, inputType: D = "text", id: O }) {
-	let { value: k, version: A } = n(u, f, l), j = !g, M = typeof k == "string" || typeof k == "number" ? String(k) : "", N = o.useRef(null);
-	o.useEffect(() => {
+	let { value: k, version: A } = n(u, f, l), j = !g, M = typeof k == "string" || typeof k == "number" ? String(k) : "", N = o.useRef(null), P = o.useRef(null), F = o.useRef(!1);
+	o.useLayoutEffect(() => {
+		if (T || F.current) return;
+		let e = P.current;
+		e && e.textContent !== M && (e.textContent = M);
+	}, [
+		T,
+		M,
+		A
+	]), o.useEffect(() => {
 		if (!T) return;
 		let e = N.current;
 		e && e.value !== M && (e.value = M);
 	}, [T, M]);
-	let P = (e) => {
+	let I = (e) => {
 		let t = {
 			value: (e.target.textContent || "").trim(),
 			name: f
 		};
 		u && f && u.onValue(t), d && d !== u?.onValue && d(t);
-	}, F = (e) => {
+	}, L = (e) => {
 		let t = {
 			value: e.target.value,
 			name: f
 		};
 		u && f && u.onValue(t), d && d !== u?.onValue && d(t);
-	}, I = (e) => {
+	}, R = (e) => {
 		let t = e.target;
 		C && (t.textContent || "").trim().length >= C && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && e.preventDefault();
-	}, L = (e) => {
+	}, z = (e) => {
 		e.key === "Enter" && e.preventDefault();
-	}, R = (e) => r.Paste(C || 0, i(e));
+	}, B = (e) => r.Paste(C || 0, i(e));
 	if (h && a(k)) return "";
-	let z = (e) => {
+	let V = (e) => {
 		r.Blur(e), _?.({
 			value: (e.target.textContent || "").trim(),
 			name: f
 		});
-	}, B = (e) => {
+	}, H = (e) => {
 		_?.({
 			value: (e.target.value || "").trim(),
 			name: f
 		});
-	}, V = (e) => {
-		r.Focus({ target: e.currentTarget });
-	}, H = {};
-	return p && (H.placeholder = p), j && (H.edit = ""), T ? /* @__PURE__ */ c(t, {
+	}, U = (e) => {
+		F.current = !0, r.Focus({ target: e.currentTarget });
+	}, W = {};
+	return p && (W.placeholder = p), j && (W.edit = ""), T ? /* @__PURE__ */ c(t, {
 		type: "input",
 		label: m,
 		error: x,
@@ -79,9 +87,9 @@ function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", l
 					"aria-label": m || p || "Текст",
 					"aria-disabled": g || !j ? !0 : void 0,
 					tabIndex: g ? -1 : 0,
-					onChange: F,
-					onBlur: B,
-					onKeyDown: L,
+					onChange: L,
+					onBlur: H,
+					onKeyDown: z,
 					style: {
 						width: "100%",
 						border: "none",
@@ -106,19 +114,19 @@ function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", l
 		children: [
 			b,
 			/* @__PURE__ */ s("div", {
+				ref: P,
 				id: O,
-				onBlur: z,
-				onFocus: V,
-				onPaste: R,
-				onInput: P,
-				onKeyDown: I,
+				onBlur: V,
+				onFocus: U,
+				onPaste: B,
+				onInput: I,
+				onKeyDown: R,
 				spellCheck: w,
 				inputMode: S || "text",
 				contentEditable: j ? "plaintext-only" : !1,
 				suppressContentEditableWarning: !0,
-				...H,
-				children: typeof k == "string" || typeof k == "number" ? String(k) : ""
-			}, A),
+				...W
+			}),
 			y
 		]
 	});

package/dist/fields/Mask.js CHANGED Viewed

@@ -3,10 +3,10 @@ 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/Mask.tsx
-function l(e) {
+function u(e) {
 	let t = window.getSelection();
 	if (!t || t.rangeCount === 0) return 0;
 	let n = t.getRangeAt(0);
@@ -14,88 +14,100 @@ function l(e) {
 	let r = document.createRange();
 	return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
 }
-function u(e, t) {
+function d(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 d({ value: d = "", form: f, onValue: p, onBlur: m, name: h = "", format: g = "+_(___) ___-__-__", placeholder: _ = "", label: v = "", error: y = "", hidden: b = !1, disabled: x = !1, className: S = "", after: C = "", before: w = "", inputmode: T = "numeric", view: E }) {
-	let D = !x, { value: O, version: k } = n(f, h, d), A = g, j = !0, M = 0, N = (e, t) => {
+function f({ value: f = "", form: p, onValue: m, onBlur: h, name: g = "", format: _ = "+_(___) ___-__-__", placeholder: v = "", label: y = "", error: b = "", hidden: x = !1, disabled: S = !1, className: C = "", after: w = "", before: T = "", inputmode: E = "numeric", view: D }) {
+	let O = !S, { value: k, version: A } = n(p, g, f), j = o.useRef(null), M = o.useRef(!1), N = _, P = !0, F = 0, I = (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());
-	}, P = (e) => r.PasteOne(i(e)), F = (e) => {
-		A = g, j = !0, M = 0;
+	}, L = (e) => r.PasteOne(i(e)), R = (e) => {
+		N = _, P = !0, F = 0;
 		let t = 0, n = "", r = e.replace(/\D/g, "");
-		r === "" && (j = !0);
+		r === "" && (P = !0);
 		let i = r.split(""), a = "";
 		i.forEach((e) => {
-			j && (a += e, j && (M = ("" + a).length, A = g.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""), M > ("" + a).length && (j = !0, A = g.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""));
+			P && (a += e, P && (F = ("" + a).length, N = _.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""), F > ("" + a).length && (P = !0, N = _.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""));
 		});
-		let o = A.replace(/\D/g, "");
+		let o = N.replace(/\D/g, "");
 		return o.length >= r.length && (r = o), {
-			q: A.replace(/[_\d]/g, function() {
+			q: N.replace(/[_\d]/g, function() {
 				return r.charAt(t++) || "_";
 			}),
 			i: t,
 			v: r,
 			f: n
 		};
-	}, I = F(String(O || "")), L = (e) => {
-		let t = e.target, n = t.textContent || "", r = l(t), i = n.slice(0, r).replace(/\D/g, "").length, a = F(n);
+	};
+	o.useLayoutEffect(() => {
+		if (M.current) return;
+		let e = j.current;
+		if (!e) return;
+		let t = R(String(k || ""));
+		e.textContent !== t.q && (e.textContent = t.q);
+	}, [
+		k,
+		A,
+		_
+	]), R(String(k || ""));
+	let z = (e) => {
+		let t = e.target, n = t.textContent || "", r = u(t), i = n.slice(0, r).replace(/\D/g, "").length, a = R(n);
 		t.textContent = a.q;
-		let o = u(a.q, i);
+		let o = d(a.q, i);
 		a.q.length > 0 && queueMicrotask(() => {
-			N(Math.min(o, a.q.length), t);
+			I(Math.min(o, a.q.length), t);
 		});
 		let s = {
 			value: a.q.replace(/\D/g, ""),
-			name: h
+			name: g
 		};
-		f && h && f.onValue(s), p && p !== f?.onValue && p(s);
-	}, R = (e) => {
+		p && g && p.onValue(s), m && m !== p?.onValue && m(s);
+	}, B = (e) => {
 		e.key === "Enter" && e.preventDefault();
-	}, z = (e) => {
-		r.Blur(e), m && m({
+	}, V = (e) => {
+		r.Blur(e), h && h({
 			value: (e.target.textContent ?? "").replace(/\D/g, ""),
-			name: h
-		});
-	}, B = (e) => {
-		r.Focus({ target: e.currentTarget });
-	}, V = {};
-	_ && (V.placeholder = _), V.inputMode = T ?? "numeric";
-	let H = String(O ?? "").replace(/\D/g, "");
-	return b && a(H) ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(t, {
+			name: g
+		}), M.current = !1;
+	}, H = (e) => {
+		M.current = !0, r.Focus({ target: e.currentTarget });
+	}, U = {};
+	v && (U.placeholder = v), U.inputMode = E ?? "numeric";
+	let W = String(k ?? "").replace(/\D/g, "");
+	return x && a(W) ? /* @__PURE__ */ c(s, {}) : /* @__PURE__ */ l(t, {
 		type: "input",
-		label: v,
-		error: y,
-		element_blok: { className: [S] },
+		label: y,
+		error: b,
+		element_blok: { className: [C] },
 		element_input: { className: [e.w] },
 		children: [
-			w,
-			/* @__PURE__ */ s("div", {
-				onPaste: P,
-				onInput: L,
-				onKeyDown: R,
-				onBlur: z,
-				onFocus: B,
+			T,
+			/* @__PURE__ */ c("div", {
+				ref: j,
+				onPaste: L,
+				onInput: z,
+				onKeyDown: B,
+				onBlur: V,
+				onFocus: H,
 				role: "textbox",
 				spellCheck: !1,
-				"aria-label": v || _ || h || "Маска",
-				"aria-disabled": !D,
-				tabIndex: x ? -1 : 0,
-				"data-disabled": !D,
-				contentEditable: D ? "plaintext-only" : !1,
+				"aria-label": y || v || g || "Маска",
+				"aria-disabled": !O,
+				tabIndex: S ? -1 : 0,
+				"data-disabled": !O,
+				contentEditable: O ? "plaintext-only" : !1,
 				suppressContentEditableWarning: !0,
-				...V,
-				children: I.q
-			}, k),
-			C
+				...U
+			}),
+			w
 		]
 	});
 }
-d.displayName = "MaskField";
+f.displayName = "MaskField";
 //#endregion
-export { d as default };
+export { f as default };