@ryuzaki13/react-foundation-ui 3.10.0 → 3.11.0

package/dist/floating-windows/index.js

@@ -0,0 +1,576 @@
+import { o as e } from "../chunks/flex-BhrQCH4I.js";
+import { n as t } from "../chunks/button-DudCl375.js";
+import { cn as n } from "@ryuzaki13/react-foundation-lib/utils";
+import { Move as r, X as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createContext as s, useContext as c, useEffect as l, useEffectEvent as u, useId as d, useMemo as f, useRef as p, useState as m } from "react";
+import { useOverlayFocus as h } from "@ryuzaki13/react-foundation-lib/dom";
+import { createMissingContextError as g } from "@ryuzaki13/react-foundation-lib/error";
+import { createStore as _ } from "zustand/vanilla";
+import { clampNumberScaleValue as v } from "@ryuzaki13/react-foundation-lib/number-scale";
+import { isRecord as y } from "@ryuzaki13/react-foundation-lib/validators";
+import { useStore as b } from "zustand";
+var x = {
+	boundary: "k9WITw",
+	window: "QIQYat",
+	header: "_7-j1qT",
+	handle: "r0aEv3",
+	content: "PZ5cL0"
+};
+//#endregion
+//#region src/floating-windows/model/useFloatingWindowsBounds.ts
+function S(e) {
+	let t = p(null);
+	return l(() => {
+		let n = t.current;
+		if (!n) return;
+		let r = () => {
+			e.getState().setBounds({
+				width: n.clientWidth,
+				height: n.clientHeight
+			});
+		};
+		if (r(), typeof ResizeObserver > "u") return;
+		let i = new ResizeObserver(r);
+		return i.observe(n), () => i.disconnect();
+	}, [e]), t;
+}
+//#endregion
+//#region src/floating-windows/model/FloatingWindowsContext.ts
+var C = s(null);
+//#endregion
+//#region src/floating-windows/model/useFloatingWindowsStore.ts
+function w() {
+	let e = c(C);
+	if (!e) throw g({
+		hookName: "useFloatingWindowsStore",
+		providerName: "FloatingWindows"
+	});
+	return e;
+}
+//#endregion
+//#region src/floating-windows/FloatingWindowsBoundary.tsx
+function T({ children: e, className: t, style: r }) {
+	let i = S(w());
+	return /* @__PURE__ */ a("div", {
+		ref: i,
+		className: n(x.boundary, t),
+		style: r,
+		"data-floating-windows": "",
+		children: e
+	});
+}
+//#endregion
+//#region src/floating-windows/lib/constrainFloatingWindowPosition.ts
+function E(e, t, n) {
+	if (!Number.isFinite(e.x) || !Number.isFinite(e.y)) throw RangeError("Координаты плавающего окна должны быть конечными числами.");
+	for (let e of [t, n]) if (e !== null && (!Number.isFinite(e.width) || !Number.isFinite(e.height) || e.width < 0 || e.height < 0)) throw RangeError("Размер окна и рабочей области должен состоять из конечных неотрицательных чисел.");
+	if (t === null || n === null || n.width === 0 || n.height === 0) return e;
+	let r = v(e.x, 0, Math.max(0, n.width - t.width)), i = v(e.y, 0, Math.max(0, n.height - t.height));
+	return r === e.x && i === e.y ? e : {
+		x: r,
+		y: i
+	};
+}
+//#endregion
+//#region src/floating-windows/lib/isFloatingWindowId.ts
+function D(e) {
+	return typeof e == "string" && e.trim().length > 0 && e.length <= 256;
+}
+//#endregion
+//#region src/floating-windows/lib/selectFloatingWindowCascadePosition.ts
+function O(e, t, n = 24) {
+	if (!Number.isFinite(n) || n < 0) throw RangeError("Смещение каскада должно быть конечным неотрицательным числом.");
+	for (let n of [e, ...t]) if (!Number.isFinite(n.x) || !Number.isFinite(n.y)) throw RangeError("Координаты каскада плавающих окон должны быть конечными числами.");
+	if (n === 0) return e;
+	let r = e;
+	for (let e = 0; e < t.length; e += 1) {
+		if (!t.some((e) => e.x === r.x && e.y === r.y)) return r;
+		let e = r.x + n, i = r.y + n;
+		if (!Number.isFinite(e) || !Number.isFinite(i)) throw RangeError("Координаты каскада вышли за пределы конечных чисел.");
+		r = {
+			x: e,
+			y: i
+		};
+	}
+	return r;
+}
+//#endregion
+//#region src/floating-windows/model/createFloatingWindowsStore.ts
+function k({ cascadeOffset: e = 24 } = {}) {
+	if (!Number.isFinite(e) || e < 0) throw RangeError("Смещение каскада должно быть конечным неотрицательным числом.");
+	return _()((t, n) => ({
+		windows: /* @__PURE__ */ new Map(),
+		positions: /* @__PURE__ */ new Map(),
+		order: [],
+		bounds: null,
+		register: (r, i = {
+			x: 24,
+			y: 24
+		}) => {
+			if (!D(r)) throw Error("Идентификатор плавающего окна должен содержать от 1 до 256 символов и не состоять из пробелов.");
+			let a = n();
+			if (a.windows.has(r)) throw Error(`Плавающее окно с идентификатором «${r}» уже открыто в этой рабочей области.`);
+			E(i, null, null);
+			let o = a.positions.get(r), s = o ?? O(i, Array.from(a.windows.values(), (e) => e.position), e), c = [...a.order, r], l = new Map(a.windows);
+			l.set(r, {
+				position: s,
+				size: null,
+				layer: c.length
+			}), t({
+				windows: l,
+				positions: o ? a.positions : new Map(a.positions).set(r, s),
+				order: c
+			});
+			let u = !0;
+			return () => {
+				u && (u = !1, t((e) => {
+					let t = e.order.filter((e) => e !== r), n = new Map(e.windows);
+					return n.delete(r), t.forEach((e, t) => {
+						let r = n.get(e);
+						r && r.layer !== t + 1 && n.set(e, {
+							...r,
+							layer: t + 1
+						});
+					}), {
+						windows: n,
+						order: t
+					};
+				}));
+			};
+		},
+		setPosition: (e, n) => {
+			t((t) => {
+				let r = t.windows.get(e);
+				if (!r) return t;
+				let i = E(n, r.size, t.bounds);
+				return r.position.x === i.x && r.position.y === i.y ? t : {
+					windows: new Map(t.windows).set(e, {
+						...r,
+						position: i
+					}),
+					positions: new Map(t.positions).set(e, i)
+				};
+			});
+		},
+		setSize: (e, n) => {
+			t((t) => {
+				let r = t.windows.get(e);
+				if (!r) return t;
+				let i = E(r.position, n, t.bounds);
+				return r.size?.width === n.width && r.size.height === n.height && i === r.position ? t : {
+					windows: new Map(t.windows).set(e, {
+						...r,
+						position: i,
+						size: n
+					}),
+					positions: i === r.position ? t.positions : new Map(t.positions).set(e, i)
+				};
+			});
+		},
+		setBounds: (e) => {
+			E({
+				x: 0,
+				y: 0
+			}, null, e), t((t) => {
+				if (t.bounds?.width === e?.width && t.bounds?.height === e?.height) return t;
+				let n = new Map(t.windows), r = new Map(t.positions), i = !1;
+				for (let [a, o] of t.windows) {
+					let t = E(o.position, o.size, e);
+					t !== o.position && (i = !0, n.set(a, {
+						...o,
+						position: t
+					}), r.set(a, t));
+				}
+				return {
+					bounds: e,
+					windows: i ? n : t.windows,
+					positions: i ? r : t.positions
+				};
+			});
+		},
+		bringToFront: (e) => {
+			t((t) => {
+				if (!t.windows.has(e) || t.order.at(-1) === e) return t;
+				let n = [...t.order.filter((t) => t !== e), e], r = new Map(t.windows);
+				return n.forEach((e, t) => {
+					let n = r.get(e);
+					n && n.layer !== t + 1 && r.set(e, {
+						...n,
+						layer: t + 1
+					});
+				}), {
+					windows: r,
+					order: n
+				};
+			});
+		},
+		restorePositions: (e) => {
+			for (let [t, n] of e) {
+				if (!D(t)) throw Error("Идентификатор плавающего окна должен содержать от 1 до 256 символов и не состоять из пробелов.");
+				E(n, null, null);
+			}
+			t((t) => {
+				let n = /* @__PURE__ */ new Map();
+				for (let [r, i] of e) {
+					let e = t.positions.get(r);
+					n.set(r, e && e.x === i.x && e.y === i.y ? e : i);
+				}
+				let r = new Map(t.windows), i = !1;
+				for (let [e, a] of t.windows) {
+					let o = E(n.get(e) ?? a.position, a.size, t.bounds), s = o.x === a.position.x && o.y === a.position.y, c = s ? a.position : o;
+					n.set(e, c), !s && (i = !0, r.set(e, {
+						...a,
+						position: c
+					}));
+				}
+				let a = n.size === t.positions.size && Array.from(n).every(([e, n]) => t.positions.get(e) === n);
+				return !i && a ? t : {
+					windows: i ? r : t.windows,
+					positions: a ? t.positions : n
+				};
+			});
+		}
+	}));
+}
+//#endregion
+//#region src/floating-windows/lib/floatingWindowsStorage.ts
+var A = 200, j = 65536;
+function M(e) {
+	if (e.length > j) throw Error("Сохранённые позиции окон превышают допустимый размер.");
+	let t = JSON.parse(e);
+	if (!y(t) || t.version !== 1 || !Array.isArray(t.positions) || t.positions.length > A) throw Error("Неизвестный формат сохранённых позиций окон.");
+	let n = /* @__PURE__ */ new Map();
+	for (let e of t.positions) {
+		if (!y(e) || !D(e.id) || n.has(e.id) || typeof e.x != "number" || !Number.isFinite(e.x) || typeof e.y != "number" || !Number.isFinite(e.y)) throw Error("Сохранённая позиция окна не прошла проверку.");
+		n.set(e.id, {
+			x: e.x,
+			y: e.y
+		});
+	}
+	return n;
+}
+function N(e) {
+	let t = [...e].slice(-200), n = [], r = 28;
+	for (let e = t.length - 1; e >= 0; --e) {
+		let [i, a] = t[e];
+		if (!D(i) || !Number.isFinite(a.x) || !Number.isFinite(a.y)) throw Error("Сохранённая позиция окна не прошла проверку.");
+		let o = JSON.stringify({
+			id: i,
+			x: a.x,
+			y: a.y
+		}), s = r + o.length + (n.length === 0 ? 0 : 1);
+		if (s > j) break;
+		n.push(o), r = s;
+	}
+	return `{"version":1,"positions":[${n.reverse().join(",")}]}`;
+}
+//#endregion
+//#region src/floating-windows/model/useFloatingWindowsPersistence.ts
+function P(e, t, n) {
+	let r = u((e) => n?.(e));
+	l(() => {
+		if (!t) return;
+		let n;
+		try {
+			n = window.localStorage;
+			let r = n.getItem(t);
+			r !== null && e.getState().restorePositions(M(r));
+		} catch (e) {
+			r(e);
+			return;
+		}
+		let i = !0, a = () => {
+			if (i) try {
+				n.setItem(t, N(e.getState().positions));
+			} catch (e) {
+				i = !1, r(e);
+			}
+		};
+		return a(), e.subscribe((e, t) => {
+			e.positions !== t.positions && a();
+		});
+	}, [e, t]);
+}
+//#endregion
+//#region src/floating-windows/FloatingWindowsProvider.tsx
+function F({ children: e, cascadeOffset: t, storageKey: n, onStorageError: r }) {
+	let [i] = m(() => k({ cascadeOffset: t }));
+	return P(i, n, r), /* @__PURE__ */ a(C, {
+		value: i,
+		children: e
+	});
+}
+//#endregion
+//#region src/floating-windows/FloatingWindows.tsx
+function I({ children: e, className: t, style: n, storageKey: r, cascadeOffset: i, onStorageError: o }) {
+	if (r !== void 0 && !r.trim()) throw Error("Ключ сохранения области окон не может быть пустым.");
+	return /* @__PURE__ */ a(F, {
+		storageKey: r,
+		cascadeOffset: i,
+		onStorageError: o,
+		children: /* @__PURE__ */ a(T, {
+			className: t,
+			style: n,
+			children: e
+		})
+	}, r);
+}
+//#endregion
+//#region src/floating-windows/FloatingWindowHeader.tsx
+function L({ title: n, titleId: s, instructionId: c, actions: l, onClose: u, move: d }) {
+	return /* @__PURE__ */ o(e, {
+		row: !0,
+		align: "center",
+		gap: "xs",
+		className: x.header,
+		children: [
+			/* @__PURE__ */ a(t, {
+				appearance: "ghost",
+				icon: /* @__PURE__ */ a(r, { size: 16 }),
+				className: x.handle,
+				"aria-label": `Переместить окно «${n}»`,
+				"aria-describedby": c,
+				"aria-pressed": d.moving,
+				"data-floating-window-action": "move",
+				...d.handleProps,
+				children: /* @__PURE__ */ a("span", {
+					id: s,
+					children: n
+				})
+			}),
+			l,
+			u && /* @__PURE__ */ a(t, {
+				icon: /* @__PURE__ */ a(i, { size: 16 }),
+				appearance: "ghost",
+				"aria-label": `Закрыть окно «${n}»`,
+				"data-floating-window-action": "close",
+				onClick: u
+			})
+		]
+	});
+}
+//#endregion
+//#region src/floating-windows/lib/getFloatingWindowStyle.ts
+function R(e, t, n) {
+	let r = e.size?.width ?? (typeof t == "number" ? t : null), i = e.size?.height ?? (typeof n == "number" ? n : null);
+	return {
+		width: t,
+		height: n,
+		zIndex: e.layer,
+		left: r === null ? 0 : `clamp(0px, ${e.position.x}px, max(0px, calc(100% - ${r}px)))`,
+		top: i === null ? 0 : `clamp(0px, ${e.position.y}px, max(0px, calc(100% - ${i}px)))`
+	};
+}
+//#endregion
+//#region src/floating-windows/lib/selectFloatingWindowRestoreFocus.ts
+function z(e) {
+	let t = document.activeElement;
+	return t instanceof HTMLElement && t !== document.body && !e?.contains(t) ? t : void 0;
+}
+//#endregion
+//#region src/floating-windows/model/useFloatingWindowFocus.ts
+function B(e) {
+	let t = p(null);
+	h({
+		active: !0,
+		trapFocus: !1,
+		containerRef: e,
+		initialFocus: (e) => (t.current = e, e),
+		restoreFocusTarget: () => z(t.current)
+	});
+}
+//#endregion
+//#region src/floating-windows/model/useFloatingWindowMeasurements.ts
+function V(e, t, n) {
+	l(() => {
+		let r = n.current;
+		if (!r) return;
+		let i = () => {
+			let n = r.offsetWidth, i = r.offsetHeight;
+			n > 0 && i > 0 && e.getState().setSize(t, {
+				width: n,
+				height: i
+			});
+		};
+		if (i(), typeof ResizeObserver > "u") return;
+		let a = new ResizeObserver(i);
+		return a.observe(r), () => a.disconnect();
+	}, [
+		e,
+		t,
+		n
+	]);
+}
+//#endregion
+//#region src/floating-windows/model/useFloatingWindowMove.ts
+function H({ id: e, store: t, panelRef: n, onPositionChange: r }) {
+	let i = p(null), a = p(null), [o, s] = m(!1), c = () => {
+		a.current !== null && cancelAnimationFrame(a.current), a.current = null, n.current?.style.removeProperty("transform");
+	}, d = (e) => {
+		e?.pointer?.target.hasPointerCapture(e.pointer.id) && e.pointer.target.releasePointerCapture(e.pointer.id);
+	}, f = (n) => {
+		let a = i.current;
+		if (!a || (i.current = null, c(), d(a), s(!1), !n)) return;
+		t.getState().setPosition(e, a.position);
+		let o = t.getState().windows.get(e)?.position;
+		o && (o.x !== a.origin.x || o.y !== a.origin.y) && r?.(o);
+	}, h = (r) => {
+		let o = i.current;
+		if (!o) return;
+		let s = t.getState();
+		o.position = E(r, s.windows.get(e)?.size ?? null, s.bounds), a.current === null && (a.current = requestAnimationFrame(() => {
+			a.current = null;
+			let e = i.current;
+			e && n.current && (n.current.style.transform = `translate(${e.position.x - e.origin.x}px, ${e.position.y - e.origin.y}px)`);
+		}));
+	}, g = (n) => {
+		if (i.current) return;
+		let r = t.getState().windows.get(e);
+		r && (t.getState().bringToFront(e), i.current = {
+			origin: r.position,
+			position: r.position,
+			pointer: n
+		}, s(!0));
+	}, _ = u(() => f(!1)), v = u(() => {
+		let e = i.current;
+		i.current = null, c(), d(e);
+	});
+	return l(() => {
+		let n = t.subscribe((t, n) => {
+			let r = n.windows.get(e), i = t.windows.get(e);
+			(t.bounds !== n.bounds || r?.size !== i?.size || r?.position !== i?.position) && _();
+		});
+		return () => {
+			n(), v();
+		};
+	}, [t, e]), {
+		moving: o,
+		handleProps: {
+			onClick: (e) => {
+				e.detail !== 0 || i.current?.pointer || (i.current ? f(!0) : g(null));
+			},
+			onPointerDown: (e) => {
+				if (e.button !== 0 || !e.isPrimary || i.current) return;
+				e.preventDefault(), e.currentTarget.focus({ preventScroll: !0 });
+				let t = n.current;
+				if (!t) return;
+				let r = t.getBoundingClientRect();
+				g({
+					id: e.pointerId,
+					x: e.clientX,
+					y: e.clientY,
+					target: e.currentTarget,
+					scaleX: t.offsetWidth > 0 && r.width > 0 ? r.width / t.offsetWidth : 1,
+					scaleY: t.offsetHeight > 0 && r.height > 0 ? r.height / t.offsetHeight : 1
+				}), e.currentTarget.setPointerCapture(e.pointerId);
+			},
+			onPointerMove: (e) => {
+				let t = i.current;
+				!t?.pointer || t.pointer.id !== e.pointerId || h({
+					x: t.origin.x + (e.clientX - t.pointer.x) / t.pointer.scaleX,
+					y: t.origin.y + (e.clientY - t.pointer.y) / t.pointer.scaleY
+				});
+			},
+			onPointerUp: (e) => {
+				let t = i.current;
+				!t?.pointer || t.pointer.id !== e.pointerId || (h({
+					x: t.origin.x + (e.clientX - t.pointer.x) / t.pointer.scaleX,
+					y: t.origin.y + (e.clientY - t.pointer.y) / t.pointer.scaleY
+				}), f(!0));
+			},
+			onPointerCancel: (e) => {
+				i.current?.pointer?.id === e.pointerId && f(!1);
+			},
+			onLostPointerCapture: (e) => {
+				i.current?.pointer?.id === e.pointerId && f(!1);
+			},
+			onBlur: () => f(!1),
+			onKeyDown: (e) => {
+				if (e.defaultPrevented) return;
+				if (e.key === "Escape" && i.current) {
+					e.preventDefault(), e.stopPropagation(), f(!1);
+					return;
+				}
+				if ((e.key === " " || e.key === "Enter") && !i.current?.pointer) {
+					if (e.preventDefault(), e.repeat) return;
+					i.current ? f(!0) : g(null);
+					return;
+				}
+				let t = i.current;
+				if (!t || t.pointer) return;
+				let n = e.shiftKey ? 1 : 10, r = e.key === "ArrowLeft" ? -n : e.key === "ArrowRight" ? n : 0, a = e.key === "ArrowUp" ? -n : e.key === "ArrowDown" ? n : 0;
+				(r || a) && (e.preventDefault(), h({
+					x: t.position.x + r,
+					y: t.position.y + a
+				}));
+			}
+		}
+	};
+}
+//#endregion
+//#region src/floating-windows/model/useFloatingWindowSnapshot.ts
+function U(e, t, n) {
+	let r = n?.x ?? 24, i = n?.y ?? 24, a = f(() => ({
+		position: {
+			x: r,
+			y: i
+		},
+		size: null,
+		layer: 0
+	}), [r, i]), o = b(e, (e) => e.windows.get(t) ?? a), s = u(() => e.getState().register(t, {
+		x: r,
+		y: i
+	}));
+	return l(() => s(), [e, t]), o;
+}
+//#endregion
+//#region src/floating-windows/FloatingWindow.tsx
+function W({ id: t, title: r, children: i, defaultPosition: s, width: c = 360, height: l = 300, actions: u, onClose: f, onPositionChange: m, className: h }) {
+	let g = w(), _ = U(g, t, s), v = p(null), y = d(), b = d();
+	V(g, t, v), B(v);
+	let S = H({
+		id: t,
+		store: g,
+		panelRef: v,
+		onPositionChange: m
+	});
+	return /* @__PURE__ */ o(e, {
+		column: !0,
+		ref: v,
+		role: "dialog",
+		"aria-labelledby": y,
+		tabIndex: -1,
+		"data-floating-window-id": t,
+		className: n("surface0 radiusMd shadowLg", x.window, h),
+		style: R(_, c, l),
+		onPointerDownCapture: () => g.getState().bringToFront(t),
+		onFocusCapture: () => g.getState().bringToFront(t),
+		onKeyDown: (e) => {
+			e.key !== "Escape" || e.defaultPrevented || g.getState().order.at(-1) !== t || !f || (e.preventDefault(), e.stopPropagation(), f());
+		},
+		children: [
+			/* @__PURE__ */ a(L, {
+				title: r,
+				titleId: y,
+				instructionId: b,
+				actions: u,
+				onClose: f,
+				move: S
+			}),
+			/* @__PURE__ */ a("span", {
+				id: b,
+				className: "visuallyHidden",
+				children: "Для перемещения нажмите Enter или пробел, затем используйте стрелки. Shift — шаг 1 пиксель. Enter или пробел — сохранить, Escape — отменить."
+			}),
+			/* @__PURE__ */ a("div", {
+				className: x.content,
+				children: i
+			})
+		]
+	});
+}
+//#endregion
+export { W as FloatingWindow, I as FloatingWindows };
+
+//# sourceMappingURL=index.js.map