@banzamel/mineralui 2.4.3 → 2.5.2

package/dist/overlays-W0WW3fn7.js

@@ -0,0 +1,607 @@
+import { o as e, s as t, t as n, v as r } from "./frameworkTexts-o43FqY1A.js";
+import { On as i, Xi as a, Zi as o } from "./icons-IqEBmGh3.js";
+import { t as s } from "./cn-CUSXNnjF.js";
+import { n as c } from "./useGhostText-CKsb8Ufa.js";
+import { c as l, n as u, r as d } from "./useModalLayer-CpOPSDbf.js";
+import { t as f } from "./MPopover-CBDbUOW6.js";
+import { n as p } from "./MSurface-B_QnRLr5.js";
+import { t as m } from "./MText-BUWQPoBM.js";
+import { t as h } from "./MHeading-DQSQ8c7L.js";
+import { t as g } from "./MKbd-DjfGyajR.js";
+import { t as _ } from "./MButton-KELyyBw1.js";
+import { n as v } from "./MSkeleton-BpcpBBJq.js";
+import { t as y } from "./MStack-BwAFeGGg.js";
+import { t as b } from "./MSimpleGrid-C_QvLmck.js";
+import { i as x, n as S, r as C, t as w } from "./MCard-CqZYGaS2.js";
+import { t as T } from "./scrollLock-D27VmgPV.js";
+import { t as E } from "./MInputSearch-CNuTAbYs.js";
+import { t as D } from "./MTooltip-BRSPJ3RY.js";
+import { Children as O, isValidElement as k, useCallback as A, useEffect as j, useId as M, useMemo as N, useRef as P, useState as F } from "react";
+import { Fragment as I, jsx as L, jsxs as R } from "react/jsx-runtime";
+//#region src/components/overlays/MModal/MModal.tsx
+var z = 540;
+function B({ open: e, onClose: t, title: n, description: r, footer: i, size: a = "md", closeOnBackdrop: o = !0, closeOnEscape: c = !0, className: u, children: f, ...p }) {
+	let m = M(), [h, g] = F(!1), [_, v] = F(!1), y = P(null);
+	return d({
+		active: e && h,
+		containerRef: y,
+		onEscape: c ? t : void 0
+	}), j(() => {
+		e && (g(!0), v(!1));
+	}, [e]), j(() => {
+		if (!e && h) {
+			v(!0);
+			let e = setTimeout(() => {
+				g(!1), v(!1);
+			}, z);
+			return () => clearTimeout(e);
+		}
+	}, [e, h]), j(() => {
+		if (h) return T();
+	}, [h]), h ? /* @__PURE__ */ L(l, { children: /* @__PURE__ */ L("div", {
+		ref: y,
+		className: s("mineral-backdrop", "modal-backdrop", _ && "closing"),
+		onMouseDown: (e) => {
+			o && e.target === e.currentTarget && t();
+		},
+		children: /* @__PURE__ */ L("div", {
+			className: "modal-shell",
+			children: /* @__PURE__ */ R(w, {
+				className: s("modal", a, u),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": n ? m : void 0,
+				...p,
+				children: [
+					(n || r) && /* @__PURE__ */ R(x, { children: [n && /* @__PURE__ */ L("div", {
+						id: m,
+						className: "modal-title",
+						children: n
+					}), r && /* @__PURE__ */ L("div", {
+						className: "modal-description",
+						children: r
+					})] }),
+					/* @__PURE__ */ L(S, { children: f }),
+					i && /* @__PURE__ */ L(C, { children: i })
+				]
+			})
+		})
+	}) }) : null;
+}
+//#endregion
+//#region src/components/overlays/MSheet/MSheet.tsx
+var ee = 540, V = 72, H = {
+	sm: "32vh",
+	md: "52vh",
+	lg: "72vh",
+	full: "92vh"
+};
+function U({ open: e, onClose: n, title: r, description: i, footer: o, size: c = "md", closeOnBackdrop: u = !0, closeOnEscape: f = !0, className: p, children: m, style: h, ...g }) {
+	let v = t(), y = M(), [b, E] = F(!1), [D, O] = F(!1), [k, A] = F(0), N = P(null), I = P(0), z = P(null);
+	d({
+		active: e && b,
+		containerRef: z,
+		onEscape: f ? n : void 0
+	}), j(() => {
+		e && (E(!0), O(!1), A(0), I.current = 0);
+	}, [e]), j(() => {
+		if (!e && b) {
+			O(!0);
+			let e = window.setTimeout(() => {
+				E(!1), O(!1);
+			}, ee);
+			return () => window.clearTimeout(e);
+		}
+	}, [e, b]), j(() => {
+		if (b) return T();
+	}, [b]);
+	function B(e) {
+		u && e.target === e.currentTarget && n();
+	}
+	function U(e) {
+		e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), N.current = {
+			pointerId: e.pointerId,
+			startY: e.clientY
+		}, A(0), I.current = 0;
+	}
+	function W(e) {
+		let t = N.current;
+		if (!t || t.pointerId !== e.pointerId) return;
+		let n = Math.max(e.clientY - t.startY, 0);
+		I.current = n, A(n);
+	}
+	function G(e) {
+		let t = N.current;
+		if (!(!t || t.pointerId !== e)) {
+			if (N.current = null, I.current > V) {
+				A(0), I.current = 0, n();
+				return;
+			}
+			A(0), I.current = 0;
+		}
+	}
+	if (!b) return null;
+	let te = H[c], ne = k > 0 ? `translateY(${k}px)` : void 0;
+	return /* @__PURE__ */ L(l, { children: /* @__PURE__ */ L("div", {
+		ref: z,
+		className: s("mineral-backdrop", "sheet-backdrop", D && "closing"),
+		onMouseDown: B,
+		children: /* @__PURE__ */ L("div", {
+			className: "sheet-shell",
+			style: { transform: ne },
+			children: /* @__PURE__ */ R(w, {
+				className: s("sheet", `size-${c}`, p),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": r ? y : void 0,
+				style: {
+					...h,
+					height: c === "full" ? te : void 0,
+					maxHeight: te
+				},
+				...g,
+				children: [
+					/* @__PURE__ */ L("button", {
+						type: "button",
+						className: "sheet-grabber",
+						onPointerDown: U,
+						onPointerMove: W,
+						onPointerUp: (e) => G(e.pointerId),
+						onPointerCancel: (e) => G(e.pointerId),
+						onClick: (e) => {
+							e.detail === 0 && n();
+						},
+						"aria-label": v.dragToClose,
+						children: /* @__PURE__ */ L("span", { className: "sheet-handle" })
+					}),
+					(r || i) && /* @__PURE__ */ R(x, {
+						className: "sheet-header",
+						children: [/* @__PURE__ */ R("div", {
+							className: "sheet-copy",
+							children: [r && /* @__PURE__ */ L("div", {
+								id: y,
+								className: "sheet-title",
+								children: r
+							}), i && /* @__PURE__ */ L("div", {
+								className: "sheet-description",
+								children: i
+							})]
+						}), /* @__PURE__ */ L(_, {
+							variant: "link",
+							color: "neutral",
+							iconOnly: !0,
+							size: "sm",
+							onClick: n,
+							"aria-label": v.close,
+							className: "sheet-close",
+							children: /* @__PURE__ */ L(a, {})
+						})]
+					}),
+					/* @__PURE__ */ L(S, {
+						className: "sheet-body",
+						children: m
+					}),
+					o && /* @__PURE__ */ L(C, {
+						className: "sheet-footer",
+						children: o
+					})
+				]
+			})
+		})
+	}) });
+}
+//#endregion
+//#region src/components/overlays/MCommandPalette/MCommandPalette.tsx
+function W(e) {
+	return typeof e == "string" || typeof e == "number" ? e.toString() : "";
+}
+function G(e, t) {
+	let n = t.toLowerCase().replace(/\s+/g, "").split("+"), r = n[n.length - 1];
+	if (!r) return !1;
+	let i = n.includes("ctrl"), a = n.includes("meta") || n.includes("cmd"), o = n.includes("shift"), s = n.includes("alt") || n.includes("option");
+	return e.key.toLowerCase() === r && !!i === e.ctrlKey && !!a === e.metaKey && !!o === e.shiftKey && !!s === e.altKey;
+}
+function te(e, t) {
+	if (!t.trim()) return e;
+	let n = t.trim().toLowerCase();
+	return e.filter((e) => [
+		W(e.title),
+		W(e.description),
+		W(e.group),
+		W(e.actionLabel),
+		...e.keywords ?? []
+	].some((e) => e.toLowerCase().includes(n)));
+}
+function ne(e, t) {
+	let n = /* @__PURE__ */ new Map();
+	return e.forEach((e) => {
+		let r = W(e.group) || "General", i = n.get(r) ?? {
+			label: e.group ?? t,
+			items: []
+		};
+		i.items.push(e), n.set(r, i);
+	}), Array.from(n.values());
+}
+function re({ items: t, featuredItems: r = [], open: a, defaultOpen: l = !1, onOpenChange: u, onSelect: d, title: f, description: C, trigger: T, shortcut: O = "ctrl+k", placeholder: k, emptyLabel: A, footer: z, size: B = "lg", closeOnSelect: ee = !0 }) {
+	let V = e(), H = f ?? V.title, re = k ?? V.placeholder, ie = A ?? V.empty, [ae, oe] = F(l), [K, q] = F(""), J = a !== void 0, Y = J ? a : ae, X = P(null), Z = `${M()}-listbox`;
+	function Q(e) {
+		J || oe(e), u?.(e);
+	}
+	let se = N(() => te(t, K), [t, K]), ce = N(() => ne(se, V.generalGroup), [se, V.generalGroup]), $ = N(() => ce.flatMap((e) => e.items), [ce]), le = N(() => r.length ? r : t.slice(0, 6), [r, t]);
+	function ue(e) {
+		e.onSelect?.(), d?.(e), !e.onSelect && e.href && window.location.assign(e.href), ee && (Q(!1), q(""), pe());
+	}
+	let { activeIndex: de, setActiveIndex: fe, resetIndex: pe, onKeyDown: me, activeDescendantId: he, getItemProps: ge } = c({
+		itemCount: $.length,
+		isOpen: Y,
+		mode: "activedescendant",
+		onClose: () => Q(!1),
+		onSelect: (e) => {
+			let t = $[e];
+			t && ue(t);
+		}
+	});
+	j(() => {
+		let e = (e) => {
+			G(e, O) && (e.preventDefault(), Q(!0));
+		};
+		return window.addEventListener("keydown", e), () => {
+			window.removeEventListener("keydown", e);
+		};
+	}, [O]), j(() => {
+		if (!Y) {
+			pe();
+			return;
+		}
+		queueMicrotask(() => X.current?.focus());
+	}, [Y, pe]);
+	let _e = $[de]?.id ?? null;
+	function ve(e) {
+		e.key === "Home" || e.key === "End" || me(e);
+	}
+	let ye = ce.length > 0;
+	return /* @__PURE__ */ R(I, { children: [T ?? /* @__PURE__ */ L(_, {
+		variant: "filled",
+		size: "sm",
+		color: "primary",
+		iconOnly: !0,
+		startIcon: /* @__PURE__ */ L(o, {}),
+		"aria-label": typeof H == "string" ? H : V.open,
+		onClick: () => Q(!0)
+	}), /* @__PURE__ */ L(U, {
+		open: Y,
+		onClose: () => Q(!1),
+		title: H,
+		description: C,
+		size: B,
+		footer: z,
+		children: /* @__PURE__ */ R("div", {
+			className: "command-palette-body",
+			children: [/* @__PURE__ */ R("div", {
+				className: "command-palette-search",
+				children: [/* @__PURE__ */ L(E, {
+					ref: X,
+					value: K,
+					onChange: (e) => {
+						q(e.target.value), fe(-1);
+					},
+					onKeyDown: ve,
+					placeholder: re,
+					clearable: !0,
+					fullWidth: !0,
+					inputProps: {
+						role: "combobox",
+						"aria-label": V.searchLabel,
+						"aria-autocomplete": "list",
+						"aria-expanded": ye,
+						"aria-controls": ye ? Z : void 0,
+						"aria-activedescendant": he
+					}
+				}), /* @__PURE__ */ L("span", {
+					className: "command-palette-sr-only",
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: K.trim() ? n(V.resultsAnnouncement, { count: $.length }) : ""
+				})]
+			}), /* @__PURE__ */ R("div", {
+				className: "command-palette-grid",
+				children: [/* @__PURE__ */ R(w, {
+					stretch: !1,
+					children: [/* @__PURE__ */ R(x, { children: [/* @__PURE__ */ L(h, {
+						level: 4,
+						children: V.featured
+					}), /* @__PURE__ */ L(m, {
+						size: "sm",
+						tone: "muted",
+						children: V.featuredDescription
+					})] }), /* @__PURE__ */ L(S, { children: /* @__PURE__ */ L(b, {
+						columns: 4,
+						children: le.map((e) => {
+							let t = e.actionLabel ?? e.title, n = typeof t == "string" ? t : W(t);
+							return /* @__PURE__ */ L(D, {
+								content: t,
+								children: /* @__PURE__ */ L(_, {
+									variant: "ghost",
+									color: "primary",
+									component: e.component,
+									to: e.to,
+									href: e.href,
+									target: e.target,
+									rel: e.rel,
+									startIcon: e.icon ?? /* @__PURE__ */ L(i, {}),
+									iconOnly: !0,
+									"aria-label": n || void 0,
+									onClick: () => ue(e)
+								})
+							}, e.id);
+						})
+					}) })]
+				}), /* @__PURE__ */ R(w, {
+					stretch: !1,
+					children: [/* @__PURE__ */ R(x, { children: [/* @__PURE__ */ L(h, {
+						level: 4,
+						children: V.results
+					}), /* @__PURE__ */ R(p, {
+						align: "center",
+						padding: "xs",
+						children: [/* @__PURE__ */ L(m, {
+							size: "sm",
+							tone: "muted",
+							children: n(V.resultsCount, { count: $.length })
+						}), /* @__PURE__ */ L(g, { children: O.toUpperCase() })]
+					})] }), /* @__PURE__ */ L(S, { children: ye ? /* @__PURE__ */ L(y, {
+						padding: "xs",
+						className: "command-palette-results",
+						id: Z,
+						role: "listbox",
+						"aria-label": V.results,
+						children: ce.map((e, t) => /* @__PURE__ */ R(y, {
+							padding: "xs",
+							role: "group",
+							"aria-labelledby": `${Z}-group-${t}`,
+							children: [/* @__PURE__ */ L(m, {
+								size: "sm",
+								tone: "muted",
+								id: `${Z}-group-${t}`,
+								role: "presentation",
+								children: e.label
+							}), e.items.map((e) => {
+								let t = $.indexOf(e), { id: n, ref: r } = ge(t);
+								return /* @__PURE__ */ R("button", {
+									id: n,
+									ref: r,
+									type: "button",
+									role: "option",
+									"aria-selected": _e === e.id,
+									tabIndex: -1,
+									className: s("command-palette-item", _e === e.id && "active"),
+									onMouseDown: (e) => e.preventDefault(),
+									onMouseEnter: () => fe(t),
+									onClick: () => ue(e),
+									children: [
+										/* @__PURE__ */ L("span", {
+											className: "command-palette-item-icon",
+											children: e.icon ?? /* @__PURE__ */ L(i, {})
+										}),
+										/* @__PURE__ */ R("span", {
+											className: "command-palette-item-copy",
+											children: [/* @__PURE__ */ L("span", {
+												className: "command-palette-item-title",
+												children: e.title
+											}), e.description && /* @__PURE__ */ L("span", {
+												className: "command-palette-item-description",
+												children: e.description
+											})]
+										}),
+										e.badge && /* @__PURE__ */ L("span", {
+											className: "command-palette-item-badge",
+											children: /* @__PURE__ */ L(v, {
+												color: "primary",
+												size: "sm",
+												children: e.badge
+											})
+										})
+									]
+								}, e.id);
+							})]
+						}, W(e.label) || "general"))
+					}) : /* @__PURE__ */ L(m, {
+						tone: "muted",
+						children: ie
+					}) })]
+				})]
+			})]
+		})
+	})] });
+}
+//#endregion
+//#region src/components/overlays/MDrawer/MDrawer.tsx
+var ie = 600;
+function ae(e) {
+	return k(e) && !!e.type.__drawerHeader;
+}
+function oe(e) {
+	return k(e) && !!e.type.__drawerBody;
+}
+function K(e) {
+	return k(e) && !!e.type.__drawerFooter;
+}
+function q({ children: e }) {
+	return /* @__PURE__ */ L(I, { children: e });
+}
+q.__drawerHeader = !0;
+function J({ children: e }) {
+	return /* @__PURE__ */ L(I, { children: e });
+}
+J.__drawerBody = !0;
+function Y({ children: e }) {
+	return /* @__PURE__ */ L(I, { children: e });
+}
+Y.__drawerFooter = !0;
+function X({ open: e, onClose: n, side: r = "right", size: i = "md", overlay: o = !0, closeOnBackdrop: c = !0, closeOnEscape: u = !0, className: f, children: p, ...m }) {
+	let h = t(), [g, v] = F(!1), [y, b] = F(!1), x = P(null), S = P(null), C = M();
+	d({
+		active: e && g,
+		containerRef: x,
+		onEscape: u ? n : void 0
+	}), j(() => {
+		e && (v(!0), b(!1));
+	}, [e]), j(() => {
+		if (!e && g) {
+			b(!0);
+			let e = setTimeout(() => {
+				v(!1), b(!1);
+			}, ie);
+			return () => clearTimeout(e);
+		}
+	}, [e, g]), j(() => {
+		if (!(!g || !o)) return T();
+	}, [g, o]);
+	let w = P(n);
+	if (j(() => {
+		w.current = n;
+	}, [n]), j(() => {
+		if (!e || !g || o || !c) return;
+		let t = (e) => {
+			let t = e.target;
+			t instanceof Element && (S.current?.contains(t) || t.closest(".popover, .mineral-backdrop") || w.current());
+		};
+		return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+	}, [
+		e,
+		g,
+		o,
+		c
+	]), !g) return null;
+	let E = (e) => {
+		c && e.target === e.currentTarget && n();
+	}, D = null, k = null, A = null, N = null, I = null, z = [];
+	O.forEach(p, (e) => {
+		if (ae(e)) {
+			D = e.props.children, k = e.props;
+			return;
+		}
+		if (oe(e)) {
+			A = e.props, z.push(e.props.children);
+			return;
+		}
+		if (K(e)) {
+			N = e.props.children, I = e.props;
+			return;
+		}
+		z.push(e);
+	});
+	let B = k ?? { children: void 0 }, ee = A ?? { children: void 0 }, V = I ?? { children: void 0 }, { children: H, className: U, bordered: W = !1, ...G } = B, { children: te, className: ne, ...re } = ee, { children: q, className: J, bordered: Y = !1, ...X } = V;
+	return /* @__PURE__ */ L(l, { children: /* @__PURE__ */ L("div", {
+		ref: x,
+		className: s("mineral-backdrop", "drawer-backdrop", !o && "no-overlay", y && "closing"),
+		onMouseDown: E,
+		children: /* @__PURE__ */ R("div", {
+			ref: S,
+			className: s("drawer", r, i, f),
+			role: "dialog",
+			"aria-modal": o ? "true" : void 0,
+			"aria-labelledby": D ? C : void 0,
+			...m,
+			children: [
+				D && /* @__PURE__ */ R("div", {
+					...G,
+					className: s("drawer-header", W && "bordered", U),
+					children: [/* @__PURE__ */ L("div", {
+						id: C,
+						className: "drawer-title",
+						children: D
+					}), /* @__PURE__ */ L(_, {
+						variant: "link",
+						color: "neutral",
+						iconOnly: !0,
+						size: "sm",
+						onClick: n,
+						"aria-label": h.close,
+						className: "close",
+						children: /* @__PURE__ */ L(a, {})
+					})]
+				}),
+				/* @__PURE__ */ L("div", {
+					...re,
+					className: s("drawer-body", ne),
+					children: z
+				}),
+				N && /* @__PURE__ */ L("div", {
+					...X,
+					className: s("drawer-footer", Y && "bordered", J),
+					children: N
+				})
+			]
+		})
+	}) });
+}
+//#endregion
+//#region src/components/overlays/MPopconfirm/MPopconfirm.tsx
+function Z({ title: e, description: t, onConfirm: n, onCancel: i, confirmText: a, cancelText: o, color: c = "warning", icon: l, placement: d = "top-start", open: p, onOpenChange: m, anchorRef: h, className: g }) {
+	let v = r(), y = a ?? v.confirm, b = o ?? v.cancel, x = M(), S = `${x}-title`, C = `${x}-description`, w = P(null), T = A(() => {
+		m(!1), i?.();
+	}, [m, i]), E = A(() => {
+		m(!1), n();
+	}, [m, n]), D = A((e) => {
+		if (e.key !== "Tab") return;
+		let t = e.currentTarget.closest(".popconfirm");
+		if (!t) return;
+		let n = u(t);
+		if (n.length === 0) return;
+		let r = n[0], i = n[n.length - 1], a = document.activeElement;
+		e.shiftKey && (a === r || a === t) ? (e.preventDefault(), i.focus()) : !e.shiftKey && a === i && (e.preventDefault(), r.focus());
+	}, []);
+	return /* @__PURE__ */ R(f, {
+		open: p,
+		anchorRef: h,
+		onClose: T,
+		placement: d,
+		className: s("popconfirm", `color-${c}`, g),
+		role: "alertdialog",
+		"aria-labelledby": S,
+		"aria-describedby": t ? C : void 0,
+		initialFocus: w,
+		children: [/* @__PURE__ */ R("div", {
+			className: "body",
+			onKeyDown: D,
+			children: [l && /* @__PURE__ */ L("div", {
+				className: "icon",
+				children: l
+			}), /* @__PURE__ */ R("div", {
+				className: "content",
+				children: [/* @__PURE__ */ L("div", {
+					id: S,
+					className: "title",
+					children: e
+				}), t && /* @__PURE__ */ L("div", {
+					id: C,
+					className: "description",
+					children: t
+				})]
+			})]
+		}), /* @__PURE__ */ R("div", {
+			className: "actions",
+			onKeyDown: D,
+			children: [/* @__PURE__ */ L(_, {
+				ref: w,
+				variant: "ghost",
+				size: "sm",
+				color: "neutral",
+				onClick: T,
+				children: b
+			}), /* @__PURE__ */ L(_, {
+				variant: "ghost",
+				size: "sm",
+				color: c,
+				onClick: E,
+				children: y
+			})]
+		})]
+	});
+}
+//#endregion
+export { q as a, B as c, Y as i, X as n, re as o, J as r, U as s, Z as t };
+
+//# sourceMappingURL=overlays-W0WW3fn7.js.map