@elcrm/form 0.0.79 → 0.0.81

package/dist/fields/Time.js

@@ -2,10 +2,12 @@ import e from "../styles/Field.module.js";
 import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
 import r from "../events/onEvent.js";
-import i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import i from "../styles/Select.module.js";
+import a from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createPortal as l } from "react-dom";
 //#region src/lib/fields/Time.tsx
-function s(e) {
+function u(e) {
 	let t = window.getSelection();
 	if (!t || t.rangeCount === 0) return 0;
 	let n = t.getRangeAt(0);
@@ -13,27 +15,27 @@ function s(e) {
 	let r = document.createRange();
 	return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
 }
-function c(e, t) {
+function d(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());
 }
-function l(e) {
+function f(e) {
 	return String(e).padStart(2, "0");
 }
-function u(e) {
+function p(e) {
 	return (e || "").replace(/\D/g, "");
 }
-function d(e) {
+function m(e) {
 	if (e == null || e === "" || typeof e != "string") return "";
 	let t = e.trim(), n = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(t);
 	if (!n) return "";
 	let r = Math.min(23, Math.max(0, parseInt(n[1], 10))), i = Math.min(59, Math.max(0, parseInt(n[2], 10)));
-	return `${l(r)}:${l(i)}`;
+	return `${f(r)}:${f(i)}`;
 }
-function f(e) {
-	let t = d(e);
+function h(e) {
+	let t = m(e);
 	if (!t) return {
 		h: null,
 		m: null
@@ -44,224 +46,396 @@ function f(e) {
 		m: r
 	};
 }
-function p(e, t) {
+function g(e, t) {
 	if (e === null && t === null) return "";
 	let n = e ?? 0, r = t ?? 0;
-	return `${l(n)}:${l(r)}`;
+	return `${f(n)}:${f(r)}`;
 }
-function m(e, t) {
-	let n = u(e).slice(0, 2);
+function _(e, t) {
+	let n = p(e).slice(0, 2);
 	if (n === "") return null;
 	let r = parseInt(n, 10);
 	return Number.isNaN(r) ? null : Math.min(t, Math.max(0, r));
 }
-function h(e) {
-	let t = d(e);
+function v(e) {
+	let t = m(e);
 	if (!t) return null;
 	let [n, r] = t.split(":").map((e) => parseInt(e, 10));
 	return n * 60 + r;
 }
-function ee(e, t) {
+function y(e, t) {
 	let n = Math.max(1, Math.round(t / 60));
 	if (n <= 1) return e;
 	let r = Math.round(e / n) * n;
 	return Math.min(59, Math.max(0, r));
 }
-function g(e, t, n) {
-	let r = d(e);
+function b(e, t, n) {
+	let r = m(e);
 	if (!r) return "";
-	let i = h(r);
+	let i = v(r);
 	if (i === null) return "";
 	if (t) {
-		let e = h(t);
+		let e = v(t);
 		e !== null && (i = Math.max(i, e));
 	}
 	if (n) {
-		let e = h(n);
+		let e = v(n);
 		e !== null && (i = Math.min(i, e));
 	}
-	return p(Math.floor(i / 60), i % 60);
+	return g(Math.floor(i / 60), i % 60);
+}
+function ee(e, t, n, r) {
+	if (r && r.length > 0) {
+		let e = /* @__PURE__ */ new Set(), i = [];
+		for (let a of r) {
+			let r = m(a);
+			!r || e.has(r) || (e.add(r), i.push(b(r, t, n) || r));
+		}
+		return i;
+	}
+	let i = Math.max(1, Math.round(e / 60));
+	i < 5 && (i = 15);
+	let a = t ? v(t) ?? 0 : 0, o = n ? v(n) ?? 1439 : 1439, s = Math.min(1439, o), c = [], l = Math.ceil(a / i) * i;
+	for (let e = l; e <= s; e += i) {
+		let t = Math.floor(e / 60);
+		if (t > 23) break;
+		let n = e % 60;
+		c.push(g(t, n));
+	}
+	return c;
 }
-function _({ value: h = "", form: _, onValue: v, onBlur: y, name: b = "", placeholder: x = "", label: S = "", hidden: C = !1, disabled: w = !1, error: T = "", className: E = "", after: D = "", before: O = "", step: k = 60, min: A, max: j, id: M, spellCheck: N = !1, align: P = "start" }) {
-	let { value: F, version: I } = n(_, b, h), L = d(F), R = !w, z = i.useRef(null), B = i.useRef(null), V = i.useRef(null), [H, U] = i.useState(!1);
-	i.useLayoutEffect(() => {
-		if (!H || !R) return;
-		let { h: e, m: t } = f(L), n = (e, t) => {
+function te() {
+	return /* @__PURE__ */ c("svg", {
+		viewBox: "0 0 24 24",
+		width: "20",
+		height: "20",
+		fill: "none",
+		"aria-hidden": !0,
+		children: [/* @__PURE__ */ s("circle", {
+			cx: "12",
+			cy: "12",
+			r: "8.25",
+			stroke: "currentColor",
+			strokeWidth: "1.75"
+		}), /* @__PURE__ */ s("path", {
+			d: "M12 7.5V12l3 2",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeholder: re = "", label: w = "", hidden: ie = !1, disabled: T = !1, error: ae = "", className: E = "", after: D = "", before: O = "", step: k = 60, min: A, max: j, id: oe, spellCheck: M = !1, align: se = "start", picker: N = !1, presets: P }) {
+	let { value: ce, version: le } = n(v, C, i), F = m(ce), I = !T, L = a.useRef(null), R = a.useRef(null), ue = a.useRef(null), z = a.useRef(null), [B, V] = a.useState(!1), [H, U] = a.useState(!1), [W, G] = a.useState(null), [K, q] = a.useState(0), J = a.useId(), Y = a.useMemo(() => ee(k, A, j, P), [
+		k,
+		A,
+		j,
+		P
+	]);
+	a.useLayoutEffect(() => {
+		if (!B || !I) return;
+		let { h: e, m: t } = h(F), n = (e, t) => {
 			e && (t === null ? e.innerHTML = "<br>" : e.textContent = String(t));
 		};
-		n(z.current, e), n(B.current, t);
+		n(L.current, e), n(R.current, t);
 	}, [
-		H,
-		L,
-		I,
-		R
+		B,
+		F,
+		le,
+		I
 	]);
-	let W = i.useCallback(() => {
-		let e = m(z.current?.textContent || "", 23), t = m(B.current?.textContent || "", 59);
+	let X = a.useCallback(() => {
+		let e = _(L.current?.textContent || "", 23), t = _(R.current?.textContent || "", 59);
 		if (e === null && t === null) return "";
-		let n = p(e, t);
+		let n = g(e, t);
 		if (!n) return "";
-		let { h: r, m: i } = f(n);
-		return i !== null && (n = p(r, ee(i, k))), n &&= g(n, A, j), n || "";
+		let { h: r, m: i } = h(n);
+		return i !== null && (n = g(r, y(i, k))), n &&= b(n, A, j), n || "";
 	}, [
 		A,
 		j,
 		k
-	]), G = (e) => (t) => {
-		if (t.preventDefault(), !R) return;
-		let n = u(t.clipboardData?.getData("text/plain") ?? ""), r = e === "hour" ? 23 : 59;
+	]), Z = a.useCallback((e) => {
+		let t = m(e);
+		if (t) {
+			let { h: e, m: n } = h(t);
+			n !== null && (t = g(e, y(n, k))), t = b(t, A, j);
+		}
+		return v && C && v.setValue({
+			name: C,
+			value: t
+		}), x && x !== v?.onValue && x({
+			value: t,
+			name: C
+		}), t;
+	}, [
+		v,
+		C,
+		x,
+		A,
+		j,
+		k
+	]), de = a.useCallback(() => {
+		if (!N || !I || Y.length === 0) return;
+		let e = z.current;
+		if (!e) return;
+		let t = Math.max(0, Y.findIndex((e) => e === F));
+		q(t >= 0 ? t : 0), G(e.getBoundingClientRect()), U(!0);
+	}, [
+		N,
+		I,
+		Y,
+		F
+	]);
+	a.useEffect(() => {
+		if (!H) return;
+		let e = () => {
+			let e = z.current;
+			e && G(e.getBoundingClientRect());
+		};
+		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	}, [H]), a.useEffect(() => {
+		if (!H) return;
+		let e = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault(), U(!1);
+				return;
+			}
+			if (Y.length !== 0) {
+				if (e.key === "ArrowDown") e.preventDefault(), q((e) => (e + 1) % Y.length);
+				else if (e.key === "ArrowUp") e.preventDefault(), q((e) => e - 1 < 0 ? Y.length - 1 : e - 1);
+				else if (e.key === "Enter") {
+					e.preventDefault();
+					let t = Y[K];
+					t && (Z(t), U(!1));
+				}
+			}
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		H,
+		Y,
+		K,
+		Z
+	]);
+	let Q = (e) => (t) => {
+		if (t.preventDefault(), !I) return;
+		let n = p(t.clipboardData?.getData("text/plain") ?? ""), r = e === "hour" ? 23 : 59;
 		if (n.length >= 4) {
-			let e = Math.min(23, Math.max(0, parseInt(n.slice(0, 2), 10))), t = Math.min(59, Math.max(0, parseInt(n.slice(2, 4), 10))), r = z.current, i = B.current;
-			r && (r.textContent = String(e), queueMicrotask(() => c(String(e).length, r))), i && (i.textContent = String(t), queueMicrotask(() => c(String(t).length, i)));
+			let e = Math.min(23, Math.max(0, parseInt(n.slice(0, 2), 10))), t = Math.min(59, Math.max(0, parseInt(n.slice(2, 4), 10))), r = L.current, i = R.current;
+			r && (r.textContent = String(e), queueMicrotask(() => d(String(e).length, r))), i && (i.textContent = String(t), queueMicrotask(() => d(String(t).length, i)));
 			return;
 		}
 		let i = n.slice(0, 2), a = t.currentTarget;
 		if (i === "") {
-			a.innerHTML = "<br>", queueMicrotask(() => c(0, a));
+			a.innerHTML = "<br>", queueMicrotask(() => d(0, a));
 			return;
 		}
 		let o = parseInt(i, 10);
 		if (Number.isNaN(o)) return;
 		let s = String(Math.min(r, Math.max(0, o)));
-		a.textContent = s, queueMicrotask(() => c(s.length, a));
-	}, K = (e) => {
-		let t = e.target, n = t.textContent || "", r = s(t), i = n.slice(0, r).replace(/\D/g, "").length, a = u(n).slice(0, 2);
+		a.textContent = s, queueMicrotask(() => d(s.length, a));
+	}, fe = (e) => {
+		let t = e.target, n = t.textContent || "", r = u(t), i = n.slice(0, r).replace(/\D/g, "").length, a = p(n).slice(0, 2);
 		if (a === "") {
-			t.innerHTML = "<br>", queueMicrotask(() => c(0, t));
+			t.innerHTML = "<br>", queueMicrotask(() => d(0, t));
 			return;
 		}
 		let o = parseInt(a, 10);
 		if (Number.isNaN(o)) return;
-		let l = String(Math.min(23, Math.max(0, o)));
-		t.textContent = l;
-		let d = Math.min(i, l.length);
-		queueMicrotask(() => c(d, t));
-	}, q = (e) => {
-		let t = e.target, n = t.textContent || "", r = s(t), i = n.slice(0, r).replace(/\D/g, "").length, a = u(n).slice(0, 2);
+		let s = String(Math.min(23, Math.max(0, o)));
+		t.textContent = s;
+		let c = Math.min(i, s.length);
+		queueMicrotask(() => d(c, t));
+	}, pe = (e) => {
+		let t = e.target, n = t.textContent || "", r = u(t), i = n.slice(0, r).replace(/\D/g, "").length, a = p(n).slice(0, 2);
 		if (a === "") {
-			t.innerHTML = "<br>", queueMicrotask(() => c(0, t));
+			t.innerHTML = "<br>", queueMicrotask(() => d(0, t));
 			return;
 		}
 		let o = parseInt(a, 10);
 		if (Number.isNaN(o)) return;
-		let l = String(Math.min(59, Math.max(0, o)));
-		t.textContent = l;
-		let d = Math.min(i, l.length);
-		queueMicrotask(() => c(d, t));
-	}, te = (e) => {
-		(e.key === "Enter" || e.key === ":") && (e.preventDefault(), B.current?.focus());
-	}, ne = (e) => {
+		let s = String(Math.min(59, Math.max(0, o)));
+		t.textContent = s;
+		let c = Math.min(i, s.length);
+		queueMicrotask(() => d(c, t));
+	}, me = (e) => {
+		(e.key === "Enter" || e.key === ":") && (e.preventDefault(), R.current?.focus());
+	}, he = (e) => {
 		e.key === "Enter" && e.preventDefault();
-	}, J = (e) => {
+	}, ge = (e) => {
 		let t = e.currentTarget;
-		(t.textContent || "").trim().length || (t.innerHTML = "<br>"), R && U(!0);
-	}, Y = (e) => {
+		(t.textContent || "").trim().length || (t.innerHTML = "<br>"), I && V(!0);
+	}, _e = (e) => {
 		r.Blur(e);
 	};
-	i.useEffect(() => {
-		let e = V.current;
+	a.useEffect(() => {
+		let e = ue.current;
 		if (!e) return;
 		let t = (t) => {
 			let n = t.relatedTarget;
 			if (n && e.contains(n)) return;
-			let r = W();
-			_ && b && _.setValue({
-				name: b,
+			let r = X();
+			v && C && v.setValue({
+				name: C,
 				value: r
-			}), v && v !== _?.onValue && v({
+			}), x && x !== v?.onValue && x({
 				value: r,
-				name: b
-			}), y && b && y({
+				name: C
+			}), S && C && S({
 				value: r,
-				name: b
-			}), U(!1);
+				name: C
+			}), V(!1);
 		};
 		return e.addEventListener("focusout", t), () => e.removeEventListener("focusout", t);
 	}, [
-		_,
-		b,
-		y,
+		v,
+		C,
+		S,
 		A,
 		j,
 		k,
-		W
+		X
 	]);
-	let { h: X, m: Z } = f(L), Q = {};
-	R && (Q.edit = "");
-	let $ = { ...Q }, re = { ...Q };
-	x && ($.placeholder = x);
-	let ie = L !== "" || H;
-	return C && L === "" ? null : /* @__PURE__ */ o(t, {
-		type: "time",
-		label: S,
-		error: T,
-		element_blok: { className: [E || ""] },
-		element_input: {
-			className: [
-				e.w,
-				e.time,
-				P === "center" ? e.timeAlignCenter : ""
-			].filter(Boolean),
-			props: { "data-disabled": w || !R ? "true" : void 0 }
-		},
-		children: [
-			O ? /* @__PURE__ */ a("span", {
-				className: e.affix,
-				children: O
-			}) : null,
-			/* @__PURE__ */ o("div", {
-				ref: V,
-				className: e.timeInner,
-				role: "group",
-				"aria-label": S || "Время",
-				children: [
-					/* @__PURE__ */ a("div", {
-						id: M,
-						ref: z,
-						className: e.timePart,
-						contentEditable: R ? "plaintext-only" : !1,
-						suppressContentEditableWarning: !0,
-						spellCheck: N,
-						inputMode: "numeric",
-						onPaste: G("hour"),
-						onInput: K,
-						onKeyDown: te,
-						onFocus: J,
-						onBlur: Y,
-						"aria-label": "Часы, 0–23",
-						...$,
-						children: !R || !H ? X === null ? "" : l(X) : null
-					}),
-					ie && /* @__PURE__ */ a("span", {
-						className: e.timeSep,
-						"aria-hidden": "true",
-						children: ":"
-					}),
-					/* @__PURE__ */ a("div", {
-						ref: B,
-						className: e.timePart,
-						contentEditable: R ? "plaintext-only" : !1,
-						suppressContentEditableWarning: !0,
-						spellCheck: N,
-						inputMode: "numeric",
-						onPaste: G("minute"),
-						onInput: q,
-						onKeyDown: ne,
-						onFocus: J,
-						onBlur: Y,
-						"aria-label": "Минуты, 0–59",
-						...re,
-						children: !R || !H ? Z === null ? "" : l(Z) : null
-					})
-				]
-			}),
-			D ? /* @__PURE__ */ a("span", {
-				className: e.affix,
-				children: D
-			}) : null
-		]
-	});
+	let { h: ve, m: ye } = h(F), $ = {};
+	I && ($.edit = "");
+	let be = { ...$ }, xe = { ...$ };
+	re && (be.placeholder = re);
+	let Se = F !== "" || B;
+	return ie && F === "" ? null : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+		ref: z,
+		children: /* @__PURE__ */ c(t, {
+			type: "time",
+			label: w,
+			error: ae,
+			element_blok: { className: [E || ""] },
+			element_input: {
+				className: [
+					e.w,
+					e.time,
+					se === "center" ? e.timeAlignCenter : ""
+				].filter(Boolean),
+				props: { "data-disabled": T || !I ? "true" : void 0 }
+			},
+			children: [
+				O ? /* @__PURE__ */ s("span", {
+					className: e.affix,
+					children: O
+				}) : null,
+				/* @__PURE__ */ c("div", {
+					ref: ue,
+					className: e.timeInner,
+					role: "group",
+					"aria-label": w || "Время",
+					children: [
+						/* @__PURE__ */ s("div", {
+							id: oe,
+							ref: L,
+							className: e.timePart,
+							contentEditable: I ? "plaintext-only" : !1,
+							suppressContentEditableWarning: !0,
+							spellCheck: M,
+							inputMode: "numeric",
+							onPaste: Q("hour"),
+							onInput: fe,
+							onKeyDown: me,
+							onFocus: ge,
+							onBlur: _e,
+							"aria-label": "Часы, 0–23",
+							...be,
+							children: !I || !B ? ve === null ? "" : f(ve) : null
+						}),
+						Se && /* @__PURE__ */ s("span", {
+							className: e.timeSep,
+							"aria-hidden": "true",
+							children: ":"
+						}),
+						/* @__PURE__ */ s("div", {
+							ref: R,
+							className: e.timePart,
+							contentEditable: I ? "plaintext-only" : !1,
+							suppressContentEditableWarning: !0,
+							spellCheck: M,
+							inputMode: "numeric",
+							onPaste: Q("minute"),
+							onInput: pe,
+							onKeyDown: he,
+							onFocus: ge,
+							onBlur: _e,
+							"aria-label": "Минуты, 0–59",
+							...xe,
+							children: !I || !B ? ye === null ? "" : f(ye) : null
+						})
+					]
+				}),
+				N ? /* @__PURE__ */ s("button", {
+					type: "button",
+					className: e.timePickerBtn,
+					disabled: !I || Y.length === 0,
+					"aria-label": "Быстрый выбор времени",
+					"aria-haspopup": "listbox",
+					"aria-expanded": H,
+					"aria-controls": J,
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: de,
+					children: /* @__PURE__ */ s(te, {})
+				}) : null,
+				D ? /* @__PURE__ */ s("span", {
+					className: e.affix,
+					children: D
+				}) : null
+			]
+		})
+	}), H && W && l(/* @__PURE__ */ s(ne, {
+		parent: W,
+		slots: Y,
+		current: F,
+		activeIndex: K,
+		listId: J,
+		className: E,
+		setOpen: U,
+		setActiveIndex: q,
+		onPick: (e) => {
+			Z(e), U(!1);
+		}
+	}), document.body)] });
 }
-_.displayName = "TimeField";
+x.displayName = "TimeField";
+var ne = ({ parent: e, slots: t, current: n, activeIndex: r, listId: l, className: u, setOpen: d, setActiveIndex: f, onPick: p }) => {
+	let m = a.useRef(null);
+	a.useEffect(() => {
+		(m.current?.querySelector("[data-focus=\"true\"]"))?.scrollIntoView({ block: "nearest" });
+	}, [r]);
+	let h = window.innerHeight - e.bottom < 306 ? Math.max(6, e.top - 300 - 6) : Math.min(window.innerHeight - 300 - 6, e.bottom + 6), g = Math.max(e.width, 160), _ = Math.min(Math.max(6, e.left), window.innerWidth - g - 6);
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+		className: i.o,
+		onClick: () => d(!1),
+		"aria-hidden": !0
+	}), /* @__PURE__ */ s("div", {
+		className: [i.l, u].filter((e) => e !== void 0).join(" "),
+		style: {
+			top: h + "px",
+			left: _ + "px",
+			width: g
+		},
+		children: /* @__PURE__ */ s("ul", {
+			id: l,
+			role: "listbox",
+			ref: m,
+			children: t.map((e, t) => /* @__PURE__ */ s("li", {
+				id: `${l}-opt-${t}`,
+				role: "option",
+				"aria-selected": n === e,
+				"data-focus": r === t ? "true" : "false",
+				onMouseEnter: () => f(t),
+				onClick: () => p(e),
+				children: e
+			}, e))
+		})
+	})] });
+};
 //#endregion
-export { _ as default };
+export { x as default };

package/dist/fields/Url.d.ts

@@ -0,0 +1,8 @@
+import { TInput } from './type';
+/** UrlField — нативный input type=url. */
+export type TUrl = TInput;
+declare function UrlField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, maxLength, autoComplete, id, }: TUrl): import("react/jsx-runtime").JSX.Element | null;
+declare namespace UrlField {
+    var displayName: string;
+}
+export default UrlField;