@ryuzaki13/react-foundation-ui 3.5.0 → 3.7.0

package/dist/chunks/context-menu-CrSXJxQL.js

@@ -0,0 +1,621 @@
+import { t as e } from "./ui.module-oRwY3Zli.js";
+import { h as t } from "./picker-SJXnHwsj.js";
+import { Option as n, OptionButton as r, OptionLink as i } from "../option/index.js";
+import { cn as a } from "@ryuzaki13/react-foundation-lib/utils";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Children as c, cloneElement as l, createContext as u, useCallback as d, useContext as f, useEffect as p, useId as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { autoUpdate as v, flip as y, offset as b, shift as x, useFloating as S } from "@floating-ui/react";
+import { useClickOutside as C, useEscapeDismiss as w, useOverlayFocus as T } from "@ryuzaki13/react-foundation-lib/dom";
+import { createMissingContextError as E } from "@ryuzaki13/react-foundation-lib/error";
+import { createPortal as D } from "react-dom";
+import { AnimatePresence as O, motion as k } from "motion/react";
+import { closeMenu as A, createVirtualAnchor as j, getMenuPointFromEvent as M, getMenuPointFromRect as N, initialMenuState as P, openMenu as F } from "@ryuzaki13/react-foundation-lib/context-menu";
+//#region src/context-menu/components/helpers.ts
+function I(e, t) {
+	if (e) {
+		if (typeof e == "function") {
+			e(t);
+			return;
+		}
+		e.current = t;
+	}
+}
+function L(e, t) {
+	return (n) => {
+		e?.(n), !n.defaultPrevented && t(n);
+	};
+}
+function R(e, t) {
+	return (n) => {
+		e?.(n), !n.defaultPrevented && t(n);
+	};
+}
+//#endregion
+//#region src/context-menu/components/MenuContext.tsx
+var z = u(null);
+function B() {
+	let e = f(z);
+	if (!e) throw E({
+		hookName: "useMenuContext",
+		providerName: "MenuRoot"
+	});
+	return e;
+}
+//#endregion
+//#region src/context-menu/components/ContextMenuTrigger.tsx
+function V({ children: e, resolveTrigger: t }) {
+	let { mode: n, open: r, menuId: i, triggerId: a, registerTriggerElement: o, onTriggerContextMenu: s, onTriggerKeyDown: c } = B();
+	if (n !== "contextmenu") throw Error("ContextMenu.Trigger must be used within <ContextMenu>");
+	return l(e, {
+		id: e.props.id ?? a,
+		ref: (t) => {
+			let n = e.props.ref;
+			I(n, t), o(t);
+		},
+		tabIndex: t ? e.props.tabIndex : e.props.tabIndex ?? 0,
+		"aria-haspopup": "menu",
+		"aria-controls": r ? i : void 0,
+		"aria-keyshortcuts": e.props["aria-keyshortcuts"] ?? "Shift+F10",
+		onContextMenu: (n) => {
+			if (e.props.onContextMenu?.(n), n.defaultPrevented) return;
+			let r = t ? t(n.target) : n.currentTarget;
+			r && s(n, r);
+		},
+		onKeyDown: (n) => {
+			if (e.props.onKeyDown?.(n), n.defaultPrevented) return;
+			let r = t ? t(n.target) : n.currentTarget;
+			r && c(n, r);
+		}
+	});
+}
+var H = {
+	menuPositioner: "MsGee8",
+	menuOptions: "_5yVJwD",
+	radialPanel: "f9wo9l",
+	radialRing: "_9IPwGF",
+	radialCenterButton: "CAmmlz",
+	radialCenterButtonText: "_5KEBWR",
+	radialItems: "L28onY",
+	radialItemSlot: "Pg-1Y3",
+	radialItem: "ObIrS2",
+	radialItemIcon: "_0jf5vt",
+	radialItemText: "zKwsQF"
+};
+//#endregion
+//#region src/context-menu/components/MenuContent.tsx
+function U({ children: e, className: n, "aria-label": r, "aria-labelledby": i, closeOnOutside: s = !0, closeOnEscape: c = !0, disableOutsideClick: l = !1, restoreFocus: u = !0 }) {
+	let { open: f, openSource: m, initialFocus: h, menuId: g, triggerId: _, anchorPoint: v, floatingStyles: y, floatingRef: b, triggerRef: x, setFloating: S, closeMenu: E } = B(), A = d(() => {
+		let e = b.current;
+		return e ? Array.from(e.querySelectorAll("[data-menu-item=\"true\"]:not([data-disabled=\"true\"])")) : [];
+	}, [b]);
+	T({
+		active: f,
+		initialFocus: (e) => {
+			let t = A();
+			return (h === "last" ? t[t.length - 1] : t[0]) ?? e;
+		},
+		restoreFocus: u,
+		restoreFocusTarget: () => x.current,
+		containerRef: b
+	}), p(() => {
+		if (!f || m !== "contextmenu" || !v) return;
+		let e = window.requestAnimationFrame(() => {
+			(A()[0] ?? b.current)?.focus({ preventScroll: !0 });
+		});
+		return () => window.cancelAnimationFrame(e);
+	}, [
+		f,
+		m,
+		v,
+		A,
+		b
+	]), w({
+		active: f,
+		enabled: c,
+		onDismiss: E,
+		containerRef: b
+	});
+	let j = d(() => {
+		!f || l || s && E();
+	}, [
+		f,
+		l,
+		s,
+		E
+	]);
+	C([b, x], j);
+	let M = d((e) => {
+		if (e.key === "Tab") {
+			x.current?.focus({ preventScroll: !0 }), E();
+			return;
+		}
+		let t = A();
+		if (t.length === 0) return;
+		let n = document.activeElement, r = n ? t.indexOf(n) : -1;
+		if (e.key === "ArrowDown") {
+			e.preventDefault(), t[r >= 0 ? (r + 1) % t.length : 0]?.focus();
+			return;
+		}
+		if (e.key === "ArrowUp") {
+			e.preventDefault(), t[r >= 0 ? (r - 1 + t.length) % t.length : t.length - 1]?.focus();
+			return;
+		}
+		if (e.key === "Home") {
+			e.preventDefault(), t[0]?.focus();
+			return;
+		}
+		if (e.key === "End") {
+			e.preventDefault(), t[t.length - 1]?.focus();
+			return;
+		}
+		if (e.key.length === 1 && e.key !== " " && !e.altKey && !e.ctrlKey && !e.metaKey) {
+			let n = e.key.toLocaleLowerCase(), i = [...t.slice(r + 1), ...t.slice(0, r + 1)].find((e) => e.textContent?.trim().toLocaleLowerCase().startsWith(n));
+			i && (e.preventDefault(), i.focus());
+		}
+	}, [
+		A,
+		x,
+		E
+	]);
+	return typeof document > "u" ? null : D(/* @__PURE__ */ o(O, { children: f && /* @__PURE__ */ o(k.div, {
+		id: g,
+		ref: S,
+		style: y,
+		role: "menu",
+		"aria-label": r,
+		"aria-labelledby": r ? void 0 : i ?? _,
+		tabIndex: -1,
+		className: H.menuPositioner,
+		onKeyDown: M,
+		initial: {
+			opacity: 0,
+			scale: .96,
+			y: -2
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .96,
+			y: -2
+		},
+		transition: {
+			duration: .14,
+			ease: "easeOut"
+		},
+		children: /* @__PURE__ */ o(t, {
+			className: a(H.menuOptions, n),
+			children: typeof e == "function" ? e({ closeMenu: E }) : e
+		})
+	}) }), document.body);
+}
+//#endregion
+//#region src/context-menu/components/MenuGroupLabel.tsx
+function W({ children: t, className: n }) {
+	return /* @__PURE__ */ o("div", {
+		className: a(e.uiPopupGroupLabel, n),
+		children: t
+	});
+}
+//#endregion
+//#region src/context-menu/components/MenuItem.tsx
+function G({ children: e, icon: t, hotKey: a, className: s, disabled: c, href: l, target: u, rel: f, closeOnSelect: p = !0, onSelect: m }) {
+	let { closeMenu: h } = B(), g = d((e) => {
+		if (c) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		m?.(e), !e.defaultPrevented && p && h();
+	}, [
+		c,
+		m,
+		p,
+		h
+	]);
+	return l ? /* @__PURE__ */ o(n, {
+		disabled: c,
+		className: s,
+		children: /* @__PURE__ */ o(i, {
+			icon: t,
+			hotkey: a,
+			text: e,
+			href: l,
+			target: u,
+			rel: f,
+			role: "menuitem",
+			tabIndex: -1,
+			"aria-disabled": c,
+			"data-menu-item": "true",
+			"data-disabled": c ? "true" : void 0,
+			"data-ui": "context-menu-item",
+			"data-action": "select-context-menu-item",
+			onKeyDown: (e) => {
+				e.key === " " && (e.preventDefault(), e.currentTarget.click());
+			},
+			onClick: g
+		})
+	}) : /* @__PURE__ */ o(n, {
+		disabled: c,
+		className: s,
+		children: /* @__PURE__ */ o(r, {
+			icon: t,
+			hotkey: a,
+			text: e,
+			role: "menuitem",
+			tabIndex: -1,
+			disabled: c,
+			"data-menu-item": "true",
+			"data-disabled": c ? "true" : void 0,
+			"data-ui": "context-menu-item",
+			"data-action": "select-context-menu-item",
+			onClick: g
+		})
+	});
+}
+//#endregion
+//#region src/context-menu/components/MenuRoot.tsx
+function K({ children: e, mode: t, placement: n = t === "click" ? "bottom-start" : "right-start", open: r, defaultOpen: i, onOpenChange: a }) {
+	let s = m(), c = `${s}-menu`, l = `${s}-trigger`, [u, f] = _(P), [p, C] = _("first"), [w, T] = _(l), [E, D] = _(i ?? !1), O = r !== void 0, k = O ? r : E, I = g(null), L = g(null), { refs: R, floatingStyles: B, update: V } = S({
+		placement: n,
+		strategy: t === "contextmenu" ? "fixed" : "absolute",
+		transform: !1,
+		middleware: [
+			b(6),
+			y({ padding: 8 }),
+			x({ padding: 8 })
+		],
+		whileElementsMounted: v
+	}), H = d((e) => {
+		O || D(e), a?.(e), e || f((e) => A(e));
+	}, [O, a]), U = d(() => {
+		H(!1);
+	}, [H]), W = d((e, t, n = "first") => {
+		R.setReference(e), C(n), f(F({
+			source: t,
+			anchor: {
+				type: "element",
+				element: e
+			}
+		})), H(!0);
+	}, [R, H]), G = d((e, t, n) => {
+		R.setReference(j(e, n)), C("first"), f(F({
+			source: t,
+			anchor: {
+				type: "point",
+				point: e,
+				contextElement: n
+			}
+		})), H(!0), V();
+	}, [
+		R,
+		H,
+		V
+	]), K = d((e) => {
+		let n = L.current;
+		L.current = e, e && T(e.id || l), (I.current === null || I.current === n) && (I.current = e), t === "click" && R.setReference(e);
+	}, [
+		l,
+		t,
+		R
+	]), q = d((e) => {
+		if (t !== "click") return;
+		let n = e.currentTarget;
+		if (k && u.anchor?.type === "element" && u.anchor.element === n) {
+			U();
+			return;
+		}
+		W(n, "click");
+	}, [
+		t,
+		k,
+		u.anchor,
+		U,
+		W
+	]), J = d((e, n = e.currentTarget) => {
+		if (t !== "contextmenu") return;
+		e.preventDefault();
+		let r = M(e);
+		I.current = n, G(r, "contextmenu", n);
+	}, [t, G]), Y = d((e, n = e.currentTarget) => {
+		if (t === "click" && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+			e.preventDefault(), I.current = n, W(n, "keyboard", e.key === "ArrowUp" ? "last" : "first");
+			return;
+		}
+		if (!(e.key === "ContextMenu" || e.shiftKey && e.key === "F10")) return;
+		if (e.preventDefault(), I.current = n, t === "click") {
+			W(n, "keyboard");
+			return;
+		}
+		let r = N(n.getBoundingClientRect());
+		G(r, "keyboard", n);
+	}, [
+		t,
+		W,
+		G
+	]), X = k && u.anchor !== null, Z = h(() => {
+		if (!u.anchor) return null;
+		if (u.anchor.type === "point") return u.anchor.point;
+		let e = u.anchor.element.getBoundingClientRect();
+		return N(e);
+	}, [u.anchor]), Q = h(() => ({
+		mode: t,
+		open: X,
+		openSource: u.source,
+		initialFocus: p,
+		menuId: c,
+		triggerId: w,
+		anchorPoint: Z,
+		floatingStyles: B,
+		floatingRef: R.floating,
+		triggerRef: I,
+		setFloating: R.setFloating,
+		registerTriggerElement: K,
+		onTriggerClick: q,
+		onTriggerContextMenu: J,
+		onTriggerKeyDown: Y,
+		closeMenu: U
+	}), [
+		t,
+		X,
+		u.source,
+		p,
+		c,
+		w,
+		Z,
+		B,
+		R.floating,
+		R.setFloating,
+		K,
+		q,
+		J,
+		Y,
+		U
+	]);
+	return /* @__PURE__ */ o(z.Provider, {
+		value: Q,
+		children: e
+	});
+}
+//#endregion
+//#region src/context-menu/components/MenuSeparator.tsx
+function q({ className: t }) {
+	return /* @__PURE__ */ o("div", {
+		role: "separator",
+		className: a(e.uiPopupOptionSeparator, t)
+	});
+}
+//#endregion
+//#region src/context-menu/components/RadialMenuContent.tsx
+function J(e, t, n) {
+	return n < t ? t : Math.min(Math.max(e, t), n);
+}
+function Y({ children: e, className: t, "aria-label": n, "aria-labelledby": r, closeOnOutside: i = !0, closeOnEscape: l = !0, disableOutsideClick: u = !1, restoreFocus: f = !0, radius: m = 76, itemSize: g = 64, closeLabel: _ = "Закрыть" }) {
+	let { open: v, menuId: y, triggerId: b, anchorPoint: x, floatingRef: S, triggerRef: E, setFloating: A, closeMenu: j } = B(), M = typeof e == "function" ? e({ closeMenu: j }) : e, N = h(() => c.toArray(M), [M]), P = N.length, F = m * 2 + g, I = h(() => {
+		if (typeof window > "u" || !x) return null;
+		let e = F / 2 + 8;
+		return {
+			x: J(x.x, e, window.innerWidth - e),
+			y: J(x.y, e, window.innerHeight - e)
+		};
+	}, [x, F]), L = d(() => {
+		let e = S.current;
+		return e ? Array.from(e.querySelectorAll("[data-menu-item=\"true\"]:not([data-disabled=\"true\"])")) : [];
+	}, [S]);
+	T({
+		active: v,
+		initialFocus: (e) => L()[0] ?? e,
+		restoreFocus: f,
+		restoreFocusTarget: () => E.current,
+		containerRef: S
+	}), p(() => {
+		if (!v || !x) return;
+		let e = 0;
+		return e = window.requestAnimationFrame(() => {
+			(L()[0] ?? S.current)?.focus();
+		}), () => window.cancelAnimationFrame(e);
+	}, [
+		v,
+		x,
+		L,
+		S
+	]), w({
+		active: v,
+		enabled: l,
+		onDismiss: j,
+		containerRef: S
+	});
+	let R = d(() => {
+		!v || u || i && j();
+	}, [
+		v,
+		u,
+		i,
+		j
+	]);
+	C([S, E], R);
+	let z = d((e) => {
+		if (e.key === "Tab") {
+			E.current?.focus({ preventScroll: !0 }), j();
+			return;
+		}
+		let t = L();
+		if (t.length === 0) return;
+		let n = document.activeElement, r = n ? t.indexOf(n) : -1;
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			e.preventDefault(), t[r >= 0 ? (r + 1) % t.length : 0]?.focus();
+			return;
+		}
+		if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			e.preventDefault(), t[r >= 0 ? (r - 1 + t.length) % t.length : t.length - 1]?.focus();
+			return;
+		}
+		if (e.key === "Home") {
+			e.preventDefault(), t[0]?.focus();
+			return;
+		}
+		if (e.key === "End") {
+			e.preventDefault(), t[t.length - 1]?.focus();
+			return;
+		}
+		if (e.key.length === 1 && e.key !== " " && !e.altKey && !e.ctrlKey && !e.metaKey) {
+			let n = e.key.toLocaleLowerCase(), i = [...t.slice(r + 1), ...t.slice(0, r + 1)].find((e) => e.textContent?.trim().toLocaleLowerCase().startsWith(n));
+			i && (e.preventDefault(), i.focus());
+		}
+	}, [
+		L,
+		E,
+		j
+	]);
+	return typeof document > "u" ? null : D(/* @__PURE__ */ o(O, { children: v && I && /* @__PURE__ */ s(k.div, {
+		id: y,
+		ref: A,
+		style: {
+			"--radial-panel-size": `${F}px`,
+			"--radial-radius": `${m}px`,
+			"--radial-item-size": `${g}px`,
+			left: I.x - F / 2,
+			top: I.y - F / 2,
+			transformOrigin: "center"
+		},
+		role: "menu",
+		"aria-label": n,
+		"aria-labelledby": n ? void 0 : r ?? b,
+		tabIndex: -1,
+		className: a(H.radialPanel, t),
+		onKeyDown: z,
+		initial: {
+			opacity: 0,
+			scale: .78
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .78
+		},
+		transition: {
+			duration: .16,
+			ease: "easeOut"
+		},
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: H.radialRing,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ o("button", {
+				type: "button",
+				role: "menuitem",
+				tabIndex: -1,
+				className: H.radialCenterButton,
+				"aria-label": _,
+				"data-menu-item": "true",
+				"data-radial-close": "true",
+				onClick: j,
+				children: /* @__PURE__ */ o("span", {
+					className: H.radialCenterButtonText,
+					children: _
+				})
+			}),
+			/* @__PURE__ */ o("div", {
+				className: H.radialItems,
+				children: N.map((e, t) => {
+					let n = P > 0 ? -90 + 360 / P * t : -90;
+					return /* @__PURE__ */ o("div", {
+						className: H.radialItemSlot,
+						style: { "--radial-item-angle": `${n}deg` },
+						children: e
+					}, t);
+				})
+			})
+		]
+	}) }), document.body);
+}
+//#endregion
+//#region src/context-menu/components/RadialMenuItem.tsx
+function X({ children: e, icon: t, className: n, disabled: r, closeOnSelect: i = !0, onSelect: c }) {
+	let { closeMenu: l } = B(), u = d((e) => {
+		if (r) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		c?.(e), !e.defaultPrevented && i && l();
+	}, [
+		r,
+		c,
+		i,
+		l
+	]);
+	return /* @__PURE__ */ s("button", {
+		type: "button",
+		role: "menuitem",
+		tabIndex: -1,
+		disabled: r,
+		"aria-disabled": r,
+		"data-menu-item": "true",
+		"data-disabled": r ? "true" : void 0,
+		"data-ui": "radial-menu-item",
+		"data-action": "select-radial-menu-item",
+		className: a(H.radialItem, n),
+		onClick: u,
+		children: [t && /* @__PURE__ */ o("span", {
+			className: H.radialItemIcon,
+			children: t
+		}), /* @__PURE__ */ o("span", {
+			className: H.radialItemText,
+			children: e
+		})]
+	});
+}
+//#endregion
+//#region src/context-menu/components/ContextMenu.tsx
+function Z({ children: e, placement: t, open: n, defaultOpen: r, onOpenChange: i }) {
+	return /* @__PURE__ */ o(K, {
+		mode: "contextmenu",
+		placement: t,
+		open: n,
+		defaultOpen: r,
+		onOpenChange: i,
+		children: e
+	});
+}
+Z.Trigger = V, Z.Content = U, Z.RadialContent = Y, Z.Item = G, Z.RadialItem = X, Z.Separator = q, Z.GroupLabel = W;
+//#endregion
+//#region src/context-menu/components/DropdownMenuTrigger.tsx
+function Q({ children: e }) {
+	let { mode: t, open: n, menuId: r, triggerId: i, registerTriggerElement: a, onTriggerClick: o, onTriggerKeyDown: s } = B();
+	if (t !== "click") throw Error("DropdownMenu.Trigger must be used within <DropdownMenu>");
+	return l(e, {
+		id: e.props.id ?? i,
+		ref: (t) => {
+			let n = e.props.ref;
+			I(n, t), a(t);
+		},
+		"aria-haspopup": "menu",
+		"aria-expanded": n,
+		"aria-controls": n ? r : void 0,
+		onClick: L(e.props.onClick, o),
+		onKeyDown: R(e.props.onKeyDown, s)
+	});
+}
+//#endregion
+//#region src/context-menu/components/DropdownMenu.tsx
+function $({ children: e, placement: t, open: n, defaultOpen: r, onOpenChange: i }) {
+	return /* @__PURE__ */ o(K, {
+		mode: "click",
+		placement: t,
+		open: n,
+		defaultOpen: r,
+		onOpenChange: i,
+		children: e
+	});
+}
+$.Trigger = Q, $.Content = U, $.Item = G, $.Separator = q, $.GroupLabel = W;
+//#endregion
+export { Z as n, $ as t };
+
+//# sourceMappingURL=context-menu-CrSXJxQL.js.map