@mortenbrudvik/waveui 0.14.0 → 0.15.0

package/dist/components/overlays/Dialog.mjs

@@ -10,32 +10,34 @@ import { useIsClient as u } from "../../hooks/useIsClient.mjs";
 import { usePresence as d } from "../../hooks/usePresence.mjs";
 import { useModalLayer as f } from "../../hooks/useModalLayer.mjs";
 import { Portal as p } from "../portal/Portal.mjs";
-import { getTabbableThrough as m, usePopoverTabOrder as h } from "./Popover.shared.mjs";
-import { ModalSurfaceContext as g, inertModalTrigger as _, useBackdropPress as ee, useModalClosePart as te, useModalDismiss as ne, useModalOpenState as v, useModalOpener as re, useModalTitle as y, useModalTrigger as ie, useModalTriggerPart as ae, useModalTriggerSession as b, useOpenInsideWarning as oe, useRaiseOnOpen as se, useRequiredContext as x, useTitleRegistry as ce, useUnnamedModalWarning as le } from "./Dialog.shared.mjs";
-import { ModalBackdrop as ue, ModalCloseButton as de } from "./Dialog.slots.mjs";
-import * as S from "react";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
-import { createPortal as E } from "react-dom";
+import { dialogBackdropMotion as m, dialogMotion as h } from "../../lib/motion.mjs";
+import { useMotionClasses as g } from "../../hooks/useMotion.mjs";
+import { getTabbableThrough as ee, usePopoverTabOrder as te } from "./Popover.shared.mjs";
+import { ModalSurfaceContext as _, inertModalTrigger as v, useBackdropPress as ne, useModalClosePart as y, useModalDismiss as re, useModalOpenState as b, useModalOpener as ie, useModalTitle as x, useModalTrigger as S, useModalTriggerPart as C, useModalTriggerSession as w, useOpenInsideWarning as ae, useRaiseOnOpen as oe, useRequiredContext as T, useTitleRegistry as se, useUnnamedModalWarning as ce } from "./Dialog.shared.mjs";
+import { ModalBackdrop as le, ModalCloseButton as ue } from "./Dialog.slots.mjs";
+import * as E from "react";
+import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { createPortal as de } from "react-dom";
 //#region src/components/overlays/Dialog.tsx
-var D = S.createContext(null);
-D.displayName = "DialogContext";
-var O = {
+var A = E.createContext(null);
+A.displayName = "DialogContext";
+var j = {
 	open: !1,
 	requestOpen: () => {},
 	modalType: "modal",
-	trigger: _,
+	trigger: v,
 	finalFocusRef: void 0,
 	unmountOnClose: !0,
 	contentId: void 0,
 	registerContentId: () => () => {}
 };
-function k(e) {
-	return x(D, e, "Dialog", () => O);
+function M(e) {
+	return T(A, e, "Dialog", () => j);
 }
-var A = ({ open: e, defaultOpen: t, onOpenChange: n, modalType: r = "modal", finalFocusRef: i, unmountOnClose: a = !0, children: o }) => {
-	let [s, c] = v(e, t, n), l = u(), d = s && l, f = ie();
-	b(f, d);
-	let [p, m] = S.useState(void 0), h = S.useCallback((e) => (m(e), () => m((t) => t === e ? void 0 : t)), []), g = S.useMemo(() => ({
+var N = ({ open: e, defaultOpen: t, onOpenChange: n, modalType: r = "modal", finalFocusRef: i, unmountOnClose: a = !0, children: o }) => {
+	let [s, c] = b(e, t, n), l = u(), d = s && l, f = S();
+	w(f, d);
+	let [p, m] = E.useState(void 0), h = E.useCallback((e) => (m(e), () => m((t) => t === e ? void 0 : t)), []), g = E.useMemo(() => ({
 		open: d,
 		requestOpen: c,
 		modalType: r,
@@ -54,36 +56,36 @@ var A = ({ open: e, defaultOpen: t, onOpenChange: n, modalType: r = "modal", fin
 		p,
 		h
 	]);
-	return /* @__PURE__ */ w(D.Provider, {
+	return /* @__PURE__ */ O(A.Provider, {
 		value: g,
 		children: o
 	});
 };
-A.displayName = "Dialog";
-var j = (e) => {
-	let { open: t, requestOpen: n, trigger: r, contentId: i } = k("Dialog.Trigger");
-	return ae({
+N.displayName = "Dialog";
+var P = (e) => {
+	let { open: t, requestOpen: n, trigger: r, contentId: i } = M("Dialog.Trigger");
+	return C({
 		open: t,
 		requestOpen: n,
 		trigger: r,
 		controlsId: i
 	}, e, "Dialog.Trigger");
 };
-j.displayName = "DialogTrigger";
-var M = (e) => {
-	let { requestOpen: t } = k("Dialog.Close");
-	return te(t, e, "Dialog.Close");
+P.displayName = "DialogTrigger";
+var F = (e) => {
+	let { requestOpen: t } = M("Dialog.Close");
+	return y(t, e, "Dialog.Close");
 };
-M.displayName = "DialogClose";
+F.displayName = "DialogClose";
 var fe = {
 	small: "max-w-[400px]",
 	medium: "max-w-[600px]",
 	large: "max-w-[940px]",
 	full: "m-0 h-dvh max-h-none max-w-none rounded-none border-0 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))]"
-}, pe = "top-[max(1rem,env(safe-area-inset-top))] end-[max(1rem,env(safe-area-inset-right))] wave-rtl:end-[max(1rem,env(safe-area-inset-left))]", me = 8, he = "Dialog.Content:backdrop-ignored", ge = "Dialog.Content: `backdrop` is ignored with `modalType=\"non-modal\"`: a non-modal dialog has no backdrop, so the page behind it stays usable.", _e = "Dialog.Content:non-modal-full", ve = "Dialog.Content: `size=\"full\"` with `modalType=\"non-modal\"` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the dialog. Use `modalType=\"modal\"`, or a smaller size with the page's controls kept clear of it.";
+}, pe = "top-[max(1rem,env(safe-area-inset-top))] end-[max(1rem,env(safe-area-inset-right))] wave-rtl:end-[max(1rem,env(safe-area-inset-left))]", me = 8, he = "Dialog.Content:backdrop-ignored", ge = "Dialog.Content: `backdrop` and `backdropMotion` are ignored with `modalType=\"non-modal\"`: a non-modal dialog has no backdrop, so the page behind it stays usable.", _e = "Dialog.Content:non-modal-full", ve = "Dialog.Content: `size=\"full\"` with `modalType=\"non-modal\"` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the dialog. Use `modalType=\"modal\"`, or a smaller size with the page's controls kept clear of it.";
 function ye(e) {
-	let [t, n] = S.useState(null);
-	return S.useLayoutEffect(() => {
+	let [t, n] = E.useState(null);
+	return E.useLayoutEffect(() => {
 		if (!e || typeof ResizeObserver > "u") return;
 		let t = new ResizeObserver((t) => {
 			let r = t[t.length - 1];
@@ -94,92 +96,96 @@ function ye(e) {
 		};
 	}, [e]), t;
 }
-var N = ({ title: o, size: u = "medium", backdrop: _, closeButton: te, titleAction: v, closeLabel: y = "Close", children: ie, className: ae, style: b, id: x, onKeyDown: C, ref: E, ...D }) => {
-	let { open: O, requestOpen: A, modalType: j, trigger: M, finalFocusRef: N, unmountOnClose: P, registerContentId: F } = k("Dialog.Content"), { isMounted: I, ref: L, presenceProps: R } = d(O, { unmountOnExit: P }), z = !P, be = c("wave-dialog"), B = x ?? be, V = c("wave-dialog-title"), H = ce(), [U, xe] = S.useState(null), W = S.useRef(null), Se = S.useCallback((e) => {
-		W.current = e, xe(e);
-	}, []), Ce = S.useCallback((e) => e ? F(B) : void 0, [F, B]), we = l(E, Se, Ce, L), G = S.useRef(null);
-	se(O, z, G);
-	let K = ee(W, j !== "alert"), Te = ne(A, "Dialog", K.afterOutsidePress), q = f({
-		open: O,
-		modalType: j,
-		onDismiss: Te,
-		refs: [W],
-		container: U,
-		triggerRef: M.focusRef,
-		finalFocusRef: N
-	}), J = j === "non-modal", Ee = re(O, M, U), De = h({
-		enabled: O && J,
-		surface: U,
-		anchorRef: Ee,
-		getPreviousStop: m
+var I = ({ title: o, size: u = "medium", backdrop: v, motion: y, backdropMotion: b, closeButton: x, titleAction: S, closeLabel: C = "Close", children: w, className: T, style: D, id: de, onKeyDown: A, ref: j, ...N }) => {
+	let { open: P, requestOpen: F, modalType: I, trigger: L, finalFocusRef: R, unmountOnClose: z, registerContentId: B } = M("Dialog.Content"), { isMounted: V, ref: be, presenceProps: H } = d(P, {
+		appear: !0,
+		unmountOnExit: z
+	}), xe = H["data-presence"] === "exiting", Se = g(y, h, T), Ce = g(b, m), we = !z, Te = c("wave-dialog"), U = de ?? Te, W = c("wave-dialog-title"), G = se(), [K, Ee] = E.useState(null), q = E.useRef(null), De = E.useCallback((e) => {
+		q.current = e, Ee(e);
+	}, []), Oe = E.useCallback((e) => e ? B(U) : void 0, [B, U]), ke = l(j, De, Oe, be), J = E.useRef(null);
+	oe(P, we, J);
+	let Y = ne(q, I !== "alert"), Ae = re(F, "Dialog", Y.afterOutsidePress), X = f({
+		open: P,
+		modalType: I,
+		onDismiss: Ae,
+		refs: [q],
+		container: K,
+		triggerRef: L.focusRef,
+		finalFocusRef: R
+	}), Z = I === "non-modal", je = ie(P, L, K), Me = te({
+		enabled: P && Z,
+		surface: K,
+		anchorRef: je,
+		getPreviousStop: ee
 	});
-	le(O ? U : null, H.hasTitle, "Dialog.Content", "Dialog.Title"), oe(O, z, q.layerId, "Dialog");
-	let Y = J && _ != null && typeof _ != "boolean";
-	S.useEffect(() => {
-		Y && t(he, ge);
-	}, [Y]);
-	let X = O && J && u === "full";
-	S.useEffect(() => {
-		X && t(_e, ve);
-	}, [X]);
-	let [Oe, ke] = S.useState(null), [Z, Ae] = S.useState(null), Q = ye(O ? Oe : null), [je, Me] = S.useState(null), Ne = S.useMemo(() => ({
-		...H.context,
-		setFooterHeight: Me,
-		titleActionsOutlet: Z
-	}), [H.context, Z]);
-	if (!I) return null;
-	let Pe = r(o), $ = Q === null ? void 0 : Q > 0 ? `${Q + me}px` : "0px", Fe = $ === void 0 ? b : {
-		"--wave-dialog-title-end-padding": $,
-		...b
+	ce(P ? K : null, G.hasTitle, "Dialog.Content", "Dialog.Title"), ae(P, we, X.layerId, "Dialog");
+	let Q = Z && (v != null && typeof v != "boolean" || b !== void 0);
+	E.useEffect(() => {
+		Q && t(he, ge);
+	}, [Q]);
+	let Ne = P && Z && u === "full";
+	E.useEffect(() => {
+		Ne && t(_e, ve);
+	}, [Ne]);
+	let [Pe, Fe] = E.useState(null), [Ie, Le] = E.useState(null), $ = ye(P || xe ? Pe : null), [Re, ze] = E.useState(null), Be = E.useMemo(() => ({
+		...G.context,
+		setFooterHeight: ze,
+		titleActionsOutlet: Ie
+	}), [G.context, Ie]);
+	if (!V) return null;
+	let Ve = r(o), He = $ === null ? void 0 : $ > 0 ? `${$ + me}px` : "0px", Ue = He === void 0 ? D : {
+		"--wave-dialog-title-end-padding": He,
+		...D
 	};
-	return /* @__PURE__ */ T(p, {
-		ref: G,
-		layerId: q.layerId,
-		children: [!J && /* @__PURE__ */ w(ue, {
-			backdrop: _,
+	return /* @__PURE__ */ k(p, {
+		ref: J,
+		layerId: X.layerId,
+		children: [!Z && /* @__PURE__ */ O(le, {
+			backdrop: v,
 			className: a.backdrop,
-			layerId: q.layerId,
-			open: O,
-			onMouseDown: K.onMouseDown,
-			presenceProps: R
-		}), /* @__PURE__ */ w("div", {
-			...R,
+			layerId: X.layerId,
+			open: P,
+			onMouseDown: Y.onMouseDown,
+			presenceProps: H,
+			motionClassName: Ce
+		}), /* @__PURE__ */ O("div", {
+			...H,
 			className: e(a.positioner, "pointer-events-none fixed inset-0 flex items-center justify-center"),
-			children: /* @__PURE__ */ w("div", {
-				ref: we,
-				role: j === "alert" ? "alertdialog" : "dialog",
-				id: B,
-				"aria-labelledby": Pe ? V : H.titleId,
+			children: /* @__PURE__ */ O("div", {
+				ref: ke,
+				role: I === "alert" ? "alertdialog" : "dialog",
+				id: U,
+				"aria-labelledby": Ve ? W : G.titleId,
 				tabIndex: -1,
-				"data-modal-type": j,
+				"data-modal-type": I,
 				"data-size": u,
-				...D,
-				"data-presence": R["data-presence"],
-				style: Fe,
-				onKeyDown: i(C, De),
-				className: e(a.root, "pointer-events-auto relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64", fe[u], ae),
-				children: /* @__PURE__ */ T(g.Provider, {
-					value: Ne,
+				...N,
+				"data-presence": H["data-presence"],
+				style: Ue,
+				onKeyDown: i(A, Me),
+				className: e(a.root, "pointer-events-auto relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64", fe[u], Se, T),
+				children: /* @__PURE__ */ k(_.Provider, {
+					value: Be,
 					children: [
-						Pe && /* @__PURE__ */ w("h2", {
-							id: V,
+						Ve && /* @__PURE__ */ O("h2", {
+							id: W,
 							className: e(s.root, "pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold"),
 							children: o
 						}),
-						/* @__PURE__ */ T("div", {
-							ref: ke,
+						/* @__PURE__ */ k("div", {
+							ref: Fe,
 							className: e(a.titleActions, "absolute end-4 top-4 flex items-start gap-1", u === "full" && pe),
 							children: [
-								r(v) ? n(v, "span", e(a.titleAction, "inline-flex items-center gap-1")) : null,
-								/* @__PURE__ */ w("span", {
-									ref: Ae,
+								r(S) ? n(S, "span", e(a.titleAction, "inline-flex items-center gap-1")) : null,
+								/* @__PURE__ */ O("span", {
+									ref: Le,
 									className: "contents"
 								}),
-								/* @__PURE__ */ w(de, {
+								/* @__PURE__ */ O(ue, {
 									componentName: "Dialog.Content",
-									closeButton: te,
-									closeLabel: y,
-									onClose: (e) => A(!1, {
+									closeButton: x,
+									closeLabel: C,
+									onClose: (e) => F(!1, {
 										reason: "close-button",
 										event: e
 									}),
@@ -187,10 +193,10 @@ var N = ({ title: o, size: u = "medium", backdrop: _, closeButton: te, titleActi
 								})
 							]
 						}),
-						/* @__PURE__ */ w("div", {
+						/* @__PURE__ */ O("div", {
 							className: e(a.body, "-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1"),
-							style: je === null ? void 0 : { "--wave-dialog-footer-height": `${je}px` },
-							children: ie
+							style: Re === null ? void 0 : { "--wave-dialog-footer-height": `${Re}px` },
+							children: w
 						})
 					]
 				})
@@ -198,9 +204,9 @@ var N = ({ title: o, size: u = "medium", backdrop: _, closeButton: te, titleActi
 		})]
 	});
 };
-N.displayName = "DialogContent";
-var P = ({ id: t, action: i, className: a, children: o, ref: c, ...l }) => {
-	let { id: u, ref: d } = y("Dialog.Title", "Dialog.Content", t, c), f = S.useContext(g)?.titleActionsOutlet, p = /* @__PURE__ */ w("h2", {
+I.displayName = "DialogContent";
+var L = ({ id: t, action: i, className: a, children: o, ref: c, ...l }) => {
+	let { id: u, ref: d } = x("Dialog.Title", "Dialog.Content", t, c), f = E.useContext(_)?.titleActionsOutlet, p = /* @__PURE__ */ O("h2", {
 		...l,
 		id: u,
 		ref: d,
@@ -209,14 +215,14 @@ var P = ({ id: t, action: i, className: a, children: o, ref: c, ...l }) => {
 	});
 	if (!r(i)) return p;
 	let m = n(i, "span", e(s.action, "inline-flex items-center gap-1"));
-	return /* @__PURE__ */ T(C, { children: [p, f === void 0 ? m : f && E(m, f)] });
+	return /* @__PURE__ */ k(D, { children: [p, f === void 0 ? m : f && de(m, f)] });
 };
-P.displayName = "DialogTitle";
-var F = "sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3", I = "mt-6 flex justify-end gap-2", L = ({ children: n, className: r, ref: i, ...a }) => {
-	let s = S.useContext(g), c = s === null, u = s?.setFooterHeight, [d, f] = S.useState(null), p = l(i, f);
-	return S.useEffect(() => {
+L.displayName = "DialogTitle";
+var R = "sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3", z = "mt-6 flex justify-end gap-2", B = ({ children: n, className: r, ref: i, ...a }) => {
+	let s = E.useContext(_), c = s === null, u = s?.setFooterHeight, [d, f] = E.useState(null), p = l(i, f);
+	return E.useEffect(() => {
 		c && t("Dialog.Footer:outside-content", "Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.");
-	}, [c]), S.useLayoutEffect(() => {
+	}, [c]), E.useLayoutEffect(() => {
 		if (!d || !u || typeof ResizeObserver > "u") return;
 		let e = new ResizeObserver((e) => {
 			let t = e[e.length - 1];
@@ -225,22 +231,22 @@ var F = "sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-backgr
 		return e.observe(d, { box: "border-box" }), () => {
 			e.disconnect(), u(null);
 		};
-	}, [d, u]), /* @__PURE__ */ w("div", {
+	}, [d, u]), /* @__PURE__ */ O("div", {
 		ref: p,
 		...a,
-		className: e(o.root, u ? F : I, r),
+		className: e(o.root, u ? R : z, r),
 		children: n
 	});
 };
-L.displayName = "DialogFooter";
-var R = /* @__PURE__ */ Object.assign(A, {
-	Trigger: j,
-	Content: N,
-	Footer: L,
-	Title: P,
-	Close: M
+B.displayName = "DialogFooter";
+var V = /* @__PURE__ */ Object.assign(N, {
+	Trigger: P,
+	Content: I,
+	Footer: B,
+	Title: L,
+	Close: F
 });
 //#endregion
-export { R as Dialog, M as DialogClose, N as DialogContent, L as DialogFooter, P as DialogTitle, j as DialogTrigger };
+export { V as Dialog, F as DialogClose, I as DialogContent, B as DialogFooter, L as DialogTitle, P as DialogTrigger };
 
 //# sourceMappingURL=Dialog.mjs.map