@elcrm/form 0.0.82 → 0.0.84

package/dist/fields/Select.js

@@ -1,13 +1,14 @@
 import e from "../styles/Field.module.js";
 import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
-import r from "../styles/Select.module.js";
-import i from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { createPortal as c } from "react-dom";
+import { acquireOverlayZIndex as r, releaseOverlayZIndex as i } from "../overlayZ.js";
+import a from "../styles/Select.module.js";
+import o, { useEffect as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { createPortal as f } from "react-dom";
 //#region src/lib/fields/Select.tsx
-function l({ value: l = 0, form: d, onValue: f, name: p = "", placeholder: m = "", label: h, error: g, hidden: _ = !1, disabled: v = !1, className: y, after: b = "", before: x = "", options: S, order: C }) {
-	let [w, T] = i.useState(!1), [E, D] = i.useState(0), [O, k] = i.useState(null), A = i.useId(), { value: j } = n(d, p, l ?? 0), M = Number(j), N = [];
+function p({ value: r = 0, form: i, onValue: s, name: c = "", placeholder: p = "", label: h, error: g, hidden: _ = !1, disabled: v = !1, className: y, after: b = "", before: x = "", options: S, order: C }) {
+	let [w, T] = o.useState(!1), [E, D] = o.useState(0), [O, k] = o.useState(null), A = o.useId(), { value: j } = n(i, c, r ?? 0), M = Number(j), N = [];
 	S && (N = Array.isArray(S) ? S.map((e) => ({
 		id: e.id ?? e.i ?? 0,
 		label: e.n || "",
@@ -27,9 +28,9 @@ function l({ value: l = 0, form: d, onValue: f, name: p = "", placeholder: m = "
 	})().filter((e) => !e.hidden), F = (e) => P.find((t) => t.id === e)?.label, I = w && P.length > 0 ? `${A}-opt-${E}` : void 0, L = (e) => {
 		let t = {
 			value: e,
-			name: p
+			name: c
 		};
-		d && p && d.onValue(t), f && f !== d?.onValue && f(t);
+		i && c && i.onValue(t), s && s !== i?.onValue && s(t);
 	}, R = (e) => {
 		if (P.length === 0 || v) return;
 		let t = P.findIndex((e) => e.id === M);
@@ -63,15 +64,15 @@ function l({ value: l = 0, form: d, onValue: f, name: p = "", placeholder: m = "
 			}
 		}
 	}, V = {};
-	m && (V.placeholder = m);
-	let H = F(M), U = (H === void 0 || H === "") && !!m, W = M === 0 || F(M) === void 0;
-	return _ && W ? "" : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(t, {
+	p && (V.placeholder = p);
+	let H = F(M), U = (H === void 0 || H === "") && !!p, W = M === 0 || F(M) === void 0;
+	return _ && W ? "" : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d(t, {
 		type: "select",
 		label: h,
 		element_blok: { className: [y || ""] },
 		error: g,
 		element_input: {
-			className: [r.f],
+			className: [a.f],
 			props: {
 				onClick: z,
 				onKeyDown: B,
@@ -86,21 +87,21 @@ function l({ value: l = 0, form: d, onValue: f, name: p = "", placeholder: m = "
 			}
 		},
 		children: [
-			x ? /* @__PURE__ */ o("span", {
+			x ? /* @__PURE__ */ u("span", {
 				className: e.affix,
 				children: x
 			}) : null,
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ u("div", {
 				...V,
-				className: U ? r.placeholderValue : void 0,
-				children: H ?? m ?? ""
+				className: U ? a.placeholderValue : void 0,
+				children: H ?? p ?? ""
 			}),
-			b ? /* @__PURE__ */ o("span", {
+			b ? /* @__PURE__ */ u("span", {
 				className: e.affix,
 				children: b
 			}) : null
 		]
-	}), w && c(/* @__PURE__ */ o(u, {
+	}), w && f(/* @__PURE__ */ u(m, {
 		parent: O || void 0,
 		onValue: L,
 		className: y,
@@ -111,37 +112,40 @@ function l({ value: l = 0, form: d, onValue: f, name: p = "", placeholder: m = "
 		currentValue: M
 	}), document.body)] });
 }
-l.displayName = "SelectField";
-var u = ({ onValue: e, parent: t, className: n, items: i, setOpen: c, listId: l, activeIndex: u, currentValue: f }) => {
-	if (!t) return null;
-	let p = () => {
-		c(!1);
-	}, m = (t) => {
-		c(!1), e(t);
-	}, h = window.innerHeight - t.bottom < 306 ? Math.max(6, t.top - 300 - 6) : Math.min(window.innerHeight - 300 - 6, t.bottom + 6), g = Math.max(t.width, 260), _ = Math.min(Math.max(6, t.left), window.innerWidth - g - 6);
-	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
-		className: r.o,
-		onClick: p,
+p.displayName = "SelectField";
+var m = ({ onValue: e, parent: t, className: n, items: o, setOpen: f, listId: p, activeIndex: m, currentValue: g }) => {
+	let [_] = c(() => r());
+	if (s(() => () => i(_), [_]), !t) return null;
+	let v = () => {
+		f(!1);
+	}, y = (t) => {
+		f(!1), e(t);
+	}, b = window.innerHeight - t.bottom < 306 ? Math.max(6, t.top - 300 - 6) : Math.min(window.innerHeight - 300 - 6, t.bottom + 6), x = Math.max(t.width, 260), S = Math.min(Math.max(6, t.left), window.innerWidth - x - 6);
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
+		className: a.o,
+		style: { zIndex: _ },
+		onClick: v,
 		"aria-hidden": !0
-	}), /* @__PURE__ */ o("div", {
-		className: [r.l, n].filter((e) => e !== void 0).join(" "),
+	}), /* @__PURE__ */ u("div", {
+		className: [a.l, n].filter((e) => e !== void 0).join(" "),
 		style: {
-			top: h + "px",
-			left: _ + "px",
-			width: g
+			top: b + "px",
+			left: S + "px",
+			width: x,
+			zIndex: _ + 1
 		},
-		children: /* @__PURE__ */ o(d, {
-			listId: l,
-			items: i,
-			link: m,
-			activeIndex: u,
-			currentValue: f
+		children: /* @__PURE__ */ u(h, {
+			listId: p,
+			items: o,
+			link: y,
+			activeIndex: m,
+			currentValue: g
 		})
 	})] });
-}, d = ({ listId: e, items: t, link: n, activeIndex: r, currentValue: i }) => /* @__PURE__ */ o("ul", {
+}, h = ({ listId: e, items: t, link: n, activeIndex: r, currentValue: i }) => /* @__PURE__ */ u("ul", {
 	id: e,
 	role: "listbox",
-	children: t.map((t, a) => /* @__PURE__ */ o("li", {
+	children: t.map((t, a) => /* @__PURE__ */ u("li", {
 		id: `${e}-opt-${a}`,
 		role: "option",
 		"aria-selected": i === t.id,
@@ -151,4 +155,4 @@ var u = ({ onValue: e, parent: t, className: n, items: i, setOpen: c, listId: l,
 	}, t.id))
 });
 //#endregion
-export { l as default };
+export { p as default };

package/dist/fields/Time.js

@@ -2,12 +2,13 @@ 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 "../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";
+import { acquireOverlayZIndex as i, releaseOverlayZIndex as a } from "../overlayZ.js";
+import o from "../styles/Select.module.js";
+import s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createPortal as d } from "react-dom";
 //#region src/lib/fields/Time.tsx
-function u(e) {
+function f(e) {
 	let t = window.getSelection();
 	if (!t || t.rangeCount === 0) return 0;
 	let n = t.getRangeAt(0);
@@ -15,27 +16,27 @@ function u(e) {
 	let r = document.createRange();
 	return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
 }
-function d(e, t) {
+function p(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 f(e) {
+function m(e) {
 	return String(e).padStart(2, "0");
 }
-function p(e) {
+function h(e) {
 	return (e || "").replace(/\D/g, "");
 }
-function m(e) {
+function g(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 `${f(r)}:${f(i)}`;
+	return `${m(r)}:${m(i)}`;
 }
-function h(e) {
-	let t = m(e);
+function _(e) {
+	let t = g(e);
 	if (!t) return {
 		h: null,
 		m: null
@@ -46,78 +47,78 @@ function h(e) {
 		m: r
 	};
 }
-function g(e, t) {
+function v(e, t) {
 	if (e === null && t === null) return "";
 	let n = e ?? 0, r = t ?? 0;
-	return `${f(n)}:${f(r)}`;
+	return `${m(n)}:${m(r)}`;
 }
-function _(e, t) {
-	let n = p(e).slice(0, 2);
+function y(e, t) {
+	let n = h(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 v(e) {
-	let t = m(e);
+function b(e) {
+	let t = g(e);
 	if (!t) return null;
 	let [n, r] = t.split(":").map((e) => parseInt(e, 10));
 	return n * 60 + r;
 }
-function y(e, t) {
+function x(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 b(e, t, n) {
-	let r = m(e);
+function S(e, t, n) {
+	let r = g(e);
 	if (!r) return "";
-	let i = v(r);
+	let i = b(r);
 	if (i === null) return "";
 	if (t) {
-		let e = v(t);
+		let e = b(t);
 		e !== null && (i = Math.max(i, e));
 	}
 	if (n) {
-		let e = v(n);
+		let e = b(n);
 		e !== null && (i = Math.min(i, e));
 	}
-	return g(Math.floor(i / 60), i % 60);
+	return v(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));
+			let r = g(a);
+			!r || e.has(r) || (e.add(r), i.push(S(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;
+	let a = t ? b(t) ?? 0 : 0, o = n ? b(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));
+		c.push(v(t, n));
 	}
 	return c;
 }
 function te() {
-	return /* @__PURE__ */ c("svg", {
+	return /* @__PURE__ */ u("svg", {
 		viewBox: "0 0 24 24",
 		width: "20",
 		height: "20",
 		fill: "none",
 		"aria-hidden": !0,
-		children: [/* @__PURE__ */ s("circle", {
+		children: [/* @__PURE__ */ l("circle", {
 			cx: "12",
 			cy: "12",
 			r: "8.25",
 			stroke: "currentColor",
 			strokeWidth: "1.75"
-		}), /* @__PURE__ */ s("path", {
+		}), /* @__PURE__ */ l("path", {
 			d: "M12 7.5V12l3 2",
 			stroke: "currentColor",
 			strokeWidth: "1.75",
@@ -126,16 +127,16 @@ function te() {
 		})]
 	});
 }
-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), [
+function C({ value: i = "", form: a, onValue: o, onBlur: b, 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(a, C, i), F = g(ce), I = !T, L = s.useRef(null), R = s.useRef(null), ue = s.useRef(null), z = s.useRef(null), [B, V] = s.useState(!1), [H, U] = s.useState(!1), [W, G] = s.useState(null), [K, q] = s.useState(0), J = s.useId(), Y = s.useMemo(() => ee(k, A, j, P), [
 		k,
 		A,
 		j,
 		P
 	]);
-	a.useLayoutEffect(() => {
+	s.useLayoutEffect(() => {
 		if (!B || !I) return;
-		let { h: e, m: t } = h(F), n = (e, t) => {
+		let { h: e, m: t } = _(F), n = (e, t) => {
 			e && (t === null ? e.innerHTML = "<br>" : e.textContent = String(t));
 		};
 		n(L.current, e), n(R.current, t);
@@ -145,38 +146,38 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 		le,
 		I
 	]);
-	let X = a.useCallback(() => {
-		let e = _(L.current?.textContent || "", 23), t = _(R.current?.textContent || "", 59);
+	let X = s.useCallback(() => {
+		let e = y(L.current?.textContent || "", 23), t = y(R.current?.textContent || "", 59);
 		if (e === null && t === null) return "";
-		let n = g(e, t);
+		let n = v(e, t);
 		if (!n) return "";
-		let { h: r, m: i } = h(n);
-		return i !== null && (n = g(r, y(i, k))), n &&= b(n, A, j), n || "";
+		let { h: r, m: i } = _(n);
+		return i !== null && (n = v(r, x(i, k))), n &&= S(n, A, j), n || "";
 	}, [
 		A,
 		j,
 		k
-	]), Z = a.useCallback((e) => {
-		let t = m(e);
+	]), Z = s.useCallback((e) => {
+		let t = g(e);
 		if (t) {
-			let { h: e, m: n } = h(t);
-			n !== null && (t = g(e, y(n, k))), t = b(t, A, j);
+			let { h: e, m: n } = _(t);
+			n !== null && (t = v(e, x(n, k))), t = S(t, A, j);
 		}
-		return v && C && v.setValue({
+		return a && C && a.setValue({
 			name: C,
 			value: t
-		}), x && x !== v?.onValue && x({
+		}), o && o !== a?.onValue && o({
 			value: t,
 			name: C
 		}), t;
 	}, [
-		v,
+		a,
 		C,
-		x,
+		o,
 		A,
 		j,
 		k
-	]), de = a.useCallback(() => {
+	]), de = s.useCallback(() => {
 		if (!N || !I || Y.length === 0) return;
 		let e = z.current;
 		if (!e) return;
@@ -188,7 +189,7 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 		Y,
 		F
 	]);
-	a.useEffect(() => {
+	s.useEffect(() => {
 		if (!H) return;
 		let e = () => {
 			let e = z.current;
@@ -197,7 +198,7 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
 		};
-	}, [H]), a.useEffect(() => {
+	}, [H]), s.useEffect(() => {
 		if (!H) return;
 		let e = (e) => {
 			if (e.key === "Escape") {
@@ -223,25 +224,25 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 	]);
 	let Q = (e) => (t) => {
 		if (t.preventDefault(), !I) return;
-		let n = p(t.clipboardData?.getData("text/plain") ?? ""), r = e === "hour" ? 23 : 59;
+		let n = h(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 = 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)));
+			r && (r.textContent = String(e), queueMicrotask(() => p(String(e).length, r))), i && (i.textContent = String(t), queueMicrotask(() => p(String(t).length, i)));
 			return;
 		}
 		let i = n.slice(0, 2), a = t.currentTarget;
 		if (i === "") {
-			a.innerHTML = "<br>", queueMicrotask(() => d(0, a));
+			a.innerHTML = "<br>", queueMicrotask(() => p(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(() => d(s.length, a));
+		a.textContent = s, queueMicrotask(() => p(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);
+		let t = e.target, n = t.textContent || "", r = f(t), i = n.slice(0, r).replace(/\D/g, "").length, a = h(n).slice(0, 2);
 		if (a === "") {
-			t.innerHTML = "<br>", queueMicrotask(() => d(0, t));
+			t.innerHTML = "<br>", queueMicrotask(() => p(0, t));
 			return;
 		}
 		let o = parseInt(a, 10);
@@ -249,11 +250,11 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 		let s = String(Math.min(23, Math.max(0, o)));
 		t.textContent = s;
 		let c = Math.min(i, s.length);
-		queueMicrotask(() => d(c, t));
+		queueMicrotask(() => p(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);
+		let t = e.target, n = t.textContent || "", r = f(t), i = n.slice(0, r).replace(/\D/g, "").length, a = h(n).slice(0, 2);
 		if (a === "") {
-			t.innerHTML = "<br>", queueMicrotask(() => d(0, t));
+			t.innerHTML = "<br>", queueMicrotask(() => p(0, t));
 			return;
 		}
 		let o = parseInt(a, 10);
@@ -261,7 +262,7 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 		let s = String(Math.min(59, Math.max(0, o)));
 		t.textContent = s;
 		let c = Math.min(i, s.length);
-		queueMicrotask(() => d(c, t));
+		queueMicrotask(() => p(c, t));
 	}, me = (e) => {
 		(e.key === "Enter" || e.key === ":") && (e.preventDefault(), R.current?.focus());
 	}, he = (e) => {
@@ -272,42 +273,42 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 	}, _e = (e) => {
 		r.Blur(e);
 	};
-	a.useEffect(() => {
+	s.useEffect(() => {
 		let e = ue.current;
 		if (!e) return;
 		let t = (t) => {
 			let n = t.relatedTarget;
 			if (n && e.contains(n)) return;
 			let r = X();
-			v && C && v.setValue({
+			a && C && a.setValue({
 				name: C,
 				value: r
-			}), x && x !== v?.onValue && x({
+			}), o && o !== a?.onValue && o({
 				value: r,
 				name: C
-			}), S && C && S({
+			}), b && C && b({
 				value: r,
 				name: C
 			}), V(!1);
 		};
 		return e.addEventListener("focusout", t), () => e.removeEventListener("focusout", t);
 	}, [
-		v,
+		a,
 		C,
-		S,
+		b,
 		A,
 		j,
 		k,
 		X
 	]);
-	let { h: ve, m: ye } = h(F), $ = {};
+	let { h: ve, m: ye } = _(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", {
+	return ie && F === "" ? null : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
 		ref: z,
-		children: /* @__PURE__ */ c(t, {
+		children: /* @__PURE__ */ u(t, {
 			type: "time",
 			label: w,
 			error: ae,
@@ -321,17 +322,17 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 				props: { "data-disabled": T || !I ? "true" : void 0 }
 			},
 			children: [
-				O ? /* @__PURE__ */ s("span", {
+				O ? /* @__PURE__ */ l("span", {
 					className: e.affix,
 					children: O
 				}) : null,
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ u("div", {
 					ref: ue,
 					className: e.timeInner,
 					role: "group",
 					"aria-label": w || "Время",
 					children: [
-						/* @__PURE__ */ s("div", {
+						/* @__PURE__ */ l("div", {
 							id: oe,
 							ref: L,
 							className: e.timePart,
@@ -346,14 +347,14 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 							onBlur: _e,
 							"aria-label": "Часы, 0–23",
 							...be,
-							children: !I || !B ? ve === null ? "" : f(ve) : null
+							children: !I || !B ? ve === null ? "" : m(ve) : null
 						}),
-						Se && /* @__PURE__ */ s("span", {
+						Se && /* @__PURE__ */ l("span", {
 							className: e.timeSep,
 							"aria-hidden": "true",
 							children: ":"
 						}),
-						/* @__PURE__ */ s("div", {
+						/* @__PURE__ */ l("div", {
 							ref: R,
 							className: e.timePart,
 							contentEditable: I ? "plaintext-only" : !1,
@@ -367,11 +368,11 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 							onBlur: _e,
 							"aria-label": "Минуты, 0–59",
 							...xe,
-							children: !I || !B ? ye === null ? "" : f(ye) : null
+							children: !I || !B ? ye === null ? "" : m(ye) : null
 						})
 					]
 				}),
-				N ? /* @__PURE__ */ s("button", {
+				N ? /* @__PURE__ */ l("button", {
 					type: "button",
 					className: e.timePickerBtn,
 					disabled: !I || Y.length === 0,
@@ -381,15 +382,15 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 					"aria-controls": J,
 					onMouseDown: (e) => e.preventDefault(),
 					onClick: de,
-					children: /* @__PURE__ */ s(te, {})
+					children: /* @__PURE__ */ l(te, {})
 				}) : null,
-				D ? /* @__PURE__ */ s("span", {
+				D ? /* @__PURE__ */ l("span", {
 					className: e.affix,
 					children: D
 				}) : null
 			]
 		})
-	}), H && W && l(/* @__PURE__ */ s(ne, {
+	}), H && W && d(/* @__PURE__ */ l(ne, {
 		parent: W,
 		slots: Y,
 		current: F,
@@ -403,39 +404,41 @@ function x({ value: i = "", form: v, onValue: x, onBlur: S, name: C = "", placeh
 		}
 	}), document.body)] });
 }
-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" });
+C.displayName = "TimeField";
+var ne = ({ parent: e, slots: t, current: n, activeIndex: r, listId: d, className: f, setOpen: p, setActiveIndex: m, onPick: h }) => {
+	let g = s.useRef(null), [_] = s.useState(() => i());
+	s.useEffect(() => () => a(_), [_]), s.useEffect(() => {
+		(g.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),
+	let v = window.innerHeight - e.bottom < 306 ? Math.max(6, e.top - 300 - 6) : Math.min(window.innerHeight - 300 - 6, e.bottom + 6), y = Math.max(e.width, 160), b = Math.min(Math.max(6, e.left), window.innerWidth - y - 6);
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
+		className: o.o,
+		style: { zIndex: _ },
+		onClick: () => p(!1),
 		"aria-hidden": !0
-	}), /* @__PURE__ */ s("div", {
-		className: [i.l, u].filter((e) => e !== void 0).join(" "),
+	}), /* @__PURE__ */ l("div", {
+		className: [o.l, f].filter((e) => e !== void 0).join(" "),
 		style: {
-			top: h + "px",
-			left: _ + "px",
-			width: g
+			top: v + "px",
+			left: b + "px",
+			width: y,
+			zIndex: _ + 1
 		},
-		children: /* @__PURE__ */ s("ul", {
-			id: l,
+		children: /* @__PURE__ */ l("ul", {
+			id: d,
 			role: "listbox",
-			ref: m,
-			children: t.map((e, t) => /* @__PURE__ */ s("li", {
-				id: `${l}-opt-${t}`,
+			ref: g,
+			children: t.map((e, t) => /* @__PURE__ */ l("li", {
+				id: `${d}-opt-${t}`,
 				role: "option",
 				"aria-selected": n === e,
 				"data-focus": r === t ? "true" : "false",
-				onMouseEnter: () => f(t),
-				onClick: () => p(e),
+				onMouseEnter: () => m(t),
+				onClick: () => h(e),
 				children: e
 			}, e))
 		})
 	})] });
 };
 //#endregion
-export { x as default };
+export { C as default };