@thewhatmatters/wmds 0.4.3 → 0.4.4

package/dist/components/organisms/Dialog/Dialog.js

@@ -2,34 +2,34 @@
 import { cn as e } from "../../../lib/cn.js";
 import { motionTransitionProp as t } from "../../../lib/motion.js";
 import { Card as n } from "../../molecules/Card/Card.js";
-import { focusInitialElement as r, lockBodyScroll as i, trapFocus as a } from "../../../lib/dialogOverlay.js";
-import { dialogBackdropClasses as o, dialogOverlayRootClasses as s, dialogPanelShellClasses as c, dialogPanelSizeClasses as l, dialogSizes as u, overlayPanelChromeClasses as d, overlayPanelDialogBodyScrollClasses as f, overlayPanelDialogFooterClasses as p, overlayPanelMaxHeightClasses as m } from "./dialogStyles.js";
-import { OverlayPanelHeader as h } from "./OverlayPanelHeader.js";
+import { dialogBackdropClasses as r, dialogOverlayRootClasses as i, dialogPanelShellClasses as a, dialogPanelSizeClasses as o, dialogSizes as s, overlayPanelChromeClasses as c, overlayPanelDialogBodyScrollClasses as l, overlayPanelDialogFooterClasses as u, overlayPanelMaxHeightClasses as d } from "./dialogStyles.js";
+import { OverlayPanelHeader as f } from "./OverlayPanelHeader.js";
+import { focusInitialElement as p, lockBodyScroll as m, trapFocus as h } from "../../../lib/dialogOverlay.js";
 import { DialogProvider as g, useDialogContext as _, useDialogLabelIds as v } from "./DialogContext.js";
 import { useCallback as y, useEffect as b, useRef as x } from "react";
 import { jsx as S, jsxs as C } from "react/jsx-runtime";
 import { AnimatePresence as w, motion as T } from "motion/react";
 import { createPortal as E } from "react-dom";
 //#region src/components/organisms/Dialog/Dialog.tsx
-function D({ role: e, "aria-labelledby": n, "aria-describedby": c, initialFocusSelector: l, children: u }) {
-	let { open: d, onOpenChange: f, dismissOnBackdrop: p, dismissOnEscape: m, triggerRef: h } = _("DialogPortal"), g = x(null), v = x(null), D = y(() => {
-		f(!1);
-	}, [f]);
+function D({ role: e, "aria-labelledby": n, "aria-describedby": a, initialFocusSelector: o, children: s }) {
+	let { open: c, onOpenChange: l, dismissOnBackdrop: u, dismissOnEscape: d, triggerRef: f } = _("DialogPortal"), g = x(null), v = x(null), D = y(() => {
+		l(!1);
+	}, [l]);
 	b(() => {
-		if (!d) return;
-		v.current = h.current ?? document.activeElement;
-		let e = i(), t = g.current, n = () => {};
-		return t != null && (n = a(t), window.requestAnimationFrame(() => {
-			r(t, l);
+		if (!c) return;
+		v.current = f.current ?? document.activeElement;
+		let e = m(), t = g.current, n = () => {};
+		return t != null && (n = h(t), window.requestAnimationFrame(() => {
+			p(t, o);
 		})), () => {
 			n(), e(), v.current?.focus?.();
 		};
 	}, [
-		l,
-		d,
-		h
+		o,
+		c,
+		f
 	]), b(() => {
-		if (!d || !m) return;
+		if (!c || !d) return;
 		function e(e) {
 			e.key === "Escape" && (e.preventDefault(), D());
 		}
@@ -38,23 +38,23 @@ function D({ role: e, "aria-labelledby": n, "aria-describedby": c, initialFocusS
 		};
 	}, [
 		D,
-		m,
-		d
+		d,
+		c
 	]);
 	function O(e) {
-		if (!p) return;
+		if (!u) return;
 		let t = e.target;
 		g.current?.contains(t) || D();
 	}
-	return typeof document > "u" ? null : E(/* @__PURE__ */ S(w, { children: d ? /* @__PURE__ */ C(T.div, {
-		className: s,
+	return typeof document > "u" ? null : E(/* @__PURE__ */ S(w, { children: c ? /* @__PURE__ */ C(T.div, {
+		className: i,
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
 		transition: t("medium"),
 		onMouseDown: O,
 		children: [/* @__PURE__ */ S("div", {
-			className: o,
+			className: r,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ S(T.div, {
 			ref: g,
@@ -62,7 +62,7 @@ function D({ role: e, "aria-labelledby": n, "aria-describedby": c, initialFocusS
 			role: e,
 			"aria-modal": "true",
 			"aria-labelledby": n,
-			"aria-describedby": c,
+			"aria-describedby": a,
 			initial: {
 				opacity: 0,
 				scale: .96,
@@ -82,7 +82,7 @@ function D({ role: e, "aria-labelledby": n, "aria-describedby": c, initialFocusS
 			onMouseDown: (e) => {
 				e.stopPropagation();
 			},
-			children: u
+			children: s
 		})]
 	}) : null }), document.body);
 }
@@ -113,29 +113,29 @@ function k({ children: e, className: t }) {
 		children: e
 	});
 }
-function A({ title: t, description: r, headerStart: i, showClose: a = !0, footer: o, size: s = "md", className: u, children: g }) {
-	let { titleId: v, descriptionId: y, onOpenChange: b } = _("Dialog.Content"), x = t != null, w = r != null, T = g != null || !x && w, E = o != null, O = T || E;
+function A({ title: t, description: r, headerStart: i, showClose: s = !0, footer: p, size: m = "md", className: h, children: g }) {
+	let { titleId: v, descriptionId: y, onOpenChange: b } = _("Dialog.Content"), x = t != null, w = r != null, T = g != null || !x && w, E = p != null, O = T || E;
 	return /* @__PURE__ */ S(D, {
 		role: "dialog",
 		"aria-labelledby": x ? v : void 0,
 		"aria-describedby": w ? y : void 0,
 		children: /* @__PURE__ */ C(n, {
 			padding: "none",
-			bodyTerminal: o == null,
-			className: e(l[s], d, m, c, u),
+			bodyTerminal: p == null,
+			className: e(o[m], c, d, a, h),
 			children: [
-				/* @__PURE__ */ S(h, {
+				/* @__PURE__ */ S(f, {
 					titleId: v,
 					descriptionId: y,
 					title: t,
 					description: r,
 					headerStart: i,
-					showClose: a,
+					showClose: s,
 					closeLabel: "Close dialog",
 					onClose: () => b(!1)
 				}),
 				O ? /* @__PURE__ */ C("div", {
-					className: f,
+					className: l,
 					children: [!x && w ? /* @__PURE__ */ S("p", {
 						id: y,
 						className: "text-muted",
@@ -143,8 +143,8 @@ function A({ title: t, description: r, headerStart: i, showClose: a = !0, footer
 					}) : null, g]
 				}) : null,
 				E ? /* @__PURE__ */ S("footer", {
-					className: p,
-					children: o
+					className: u,
+					children: p
 				}) : null
 			]
 		})
@@ -155,4 +155,4 @@ var j = Object.assign(O, {
 	Content: A
 });
 //#endregion
-export { j as Dialog, D as DialogPortal, u as dialogSizes };
+export { j as Dialog, D as DialogPortal, s as dialogSizes };

package/dist/components/organisms/Sheet/Sheet.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { motionTransitionProp as t } from "../../../lib/motion.js";
-import { focusInitialElement as n, lockBodyScroll as r, trapFocus as i } from "../../../lib/dialogOverlay.js";
-import { dialogBackdropClasses as a, overlayPanelBodyScrollClasses as o, overlayPanelChromeClasses as s, overlayPanelFooterClasses as c, overlayPanelFooterDelineatedInnerClasses as l, overlayPanelFooterDelineatedShellClasses as u, overlayPanelFooterHairlineClasses as d, overlayPanelSectionStackClasses as f } from "../Dialog/dialogStyles.js";
-import { OverlayPanelHeader as p } from "../Dialog/OverlayPanelHeader.js";
+import { dialogBackdropClasses as n, overlayPanelBodyScrollClasses as r, overlayPanelChromeClasses as i, overlayPanelFooterClasses as a, overlayPanelFooterDelineatedInnerClasses as o, overlayPanelFooterDelineatedShellClasses as s, overlayPanelFooterHairlineClasses as c, overlayPanelSectionStackClasses as l } from "../Dialog/dialogStyles.js";
+import { OverlayPanelHeader as u } from "../Dialog/OverlayPanelHeader.js";
+import { focusInitialElement as d, lockBodyScroll as f, trapFocus as p } from "../../../lib/dialogOverlay.js";
 import { sheetOverlayRootClasses as m, sheetPanelBaseClasses as h, sheetPanelMotionTransition as g, sheetPanelMotionVariants as _, sheetPanelPlacementClasses as v, sheetPanelSizeClasses as y, sheetSides as b, sheetSizes as x } from "./sheetStyles.js";
 import { SheetProvider as S, useSheetContext as C, useSheetLabelIds as w } from "./SheetContext.js";
 import { useCallback as T, useEffect as E, useRef as D } from "react";
@@ -11,21 +11,21 @@ import { jsx as O, jsxs as k } from "react/jsx-runtime";
 import { AnimatePresence as A, motion as j } from "motion/react";
 import { createPortal as M } from "react-dom";
 //#region src/components/organisms/Sheet/Sheet.tsx
-function N({ side: o, size: c, "aria-labelledby": l, "aria-describedby": u, children: d }) {
-	let { open: f, onOpenChange: p, dismissOnBackdrop: b, dismissOnEscape: x, triggerRef: S } = C("SheetPortal"), w = D(null), N = D(null), P = T(() => {
-		p(!1);
-	}, [p]);
+function N({ side: r, size: a, "aria-labelledby": o, "aria-describedby": s, children: c }) {
+	let { open: l, onOpenChange: u, dismissOnBackdrop: b, dismissOnEscape: x, triggerRef: S } = C("SheetPortal"), w = D(null), N = D(null), P = T(() => {
+		u(!1);
+	}, [u]);
 	E(() => {
-		if (!f) return;
+		if (!l) return;
 		N.current = S.current ?? document.activeElement;
-		let e = r(), t = w.current, a = () => {};
-		return t != null && (a = i(t), window.requestAnimationFrame(() => {
-			n(t);
+		let e = f(), t = w.current, n = () => {};
+		return t != null && (n = p(t), window.requestAnimationFrame(() => {
+			d(t);
 		})), () => {
-			a(), e(), N.current?.focus?.();
+			n(), e(), N.current?.focus?.();
 		};
-	}, [f, S]), E(() => {
-		if (!f || !x) return;
+	}, [l, S]), E(() => {
+		if (!l || !x) return;
 		function e(e) {
 			e.key === "Escape" && (e.preventDefault(), P());
 		}
@@ -35,39 +35,39 @@ function N({ side: o, size: c, "aria-labelledby": l, "aria-describedby": u, chil
 	}, [
 		P,
 		x,
-		f
+		l
 	]);
 	function F(e) {
 		if (!b) return;
 		let t = e.target;
 		w.current?.contains(t) || P();
 	}
-	return typeof document > "u" ? null : M(/* @__PURE__ */ O(A, { children: f ? /* @__PURE__ */ k(j.div, {
-		className: m[o],
+	return typeof document > "u" ? null : M(/* @__PURE__ */ O(A, { children: l ? /* @__PURE__ */ k(j.div, {
+		className: m[r],
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
 		transition: t("medium"),
 		onMouseDown: F,
 		children: [/* @__PURE__ */ O("div", {
-			className: a,
+			className: n,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ O(j.div, {
 			ref: w,
-			className: e(h, v[o], y[o][c], s, "relative z-[1]"),
+			className: e(h, v[r], y[r][a], i, "relative z-[1]"),
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": l,
-			"aria-describedby": u,
-			variants: _(o),
+			"aria-labelledby": o,
+			"aria-describedby": s,
+			variants: _(r),
 			initial: "hidden",
 			animate: "visible",
 			exit: "exit",
-			transition: g(o),
+			transition: g(r),
 			onMouseDown: (e) => {
 				e.stopPropagation();
 			},
-			children: d
+			children: c
 		})]
 	}) : null }), document.body);
 }
@@ -98,46 +98,46 @@ function F({ children: e, className: t }) {
 		children: e
 	});
 }
-function I({ side: t = "bottom", size: n = "md", title: r, description: i, headerStart: a, showClose: s = !0, footer: m, className: h, children: g }) {
-	let { titleId: _, descriptionId: v, onOpenChange: y } = C("Sheet.Content"), b = r != null, x = i != null, S = g != null || !b && x, w = m != null;
+function I({ side: t = "bottom", size: n = "md", title: i, description: d, headerStart: f, showClose: p = !0, footer: m, className: h, children: g }) {
+	let { titleId: _, descriptionId: v, onOpenChange: y } = C("Sheet.Content"), b = i != null, x = d != null, S = g != null || !b && x, w = m != null;
 	return /* @__PURE__ */ O(N, {
 		side: t,
 		size: n,
 		"aria-labelledby": b ? _ : void 0,
 		"aria-describedby": x ? v : void 0,
 		children: /* @__PURE__ */ k("div", {
-			className: e(f, m == null ? "pb-4" : void 0, h),
+			className: e(l, m == null ? "pb-4" : void 0, h),
 			children: [
-				/* @__PURE__ */ O(p, {
+				/* @__PURE__ */ O(u, {
 					titleId: _,
 					descriptionId: v,
-					title: r,
-					description: i,
-					headerStart: a,
-					showClose: s,
+					title: i,
+					description: d,
+					headerStart: f,
+					showClose: p,
 					closeLabel: "Close sheet",
 					onClose: () => y(!1),
 					delineated: S || w
 				}),
 				S ? /* @__PURE__ */ k("div", {
-					className: o,
+					className: r,
 					children: [!b && x ? /* @__PURE__ */ O("p", {
 						id: v,
 						className: "text-muted",
-						children: i
+						children: d
 					}) : null, g]
 				}) : null,
 				w ? S ? /* @__PURE__ */ k("footer", {
-					className: u,
+					className: s,
 					children: [/* @__PURE__ */ O("hr", {
-						className: d,
+						className: c,
 						"aria-hidden": "true"
 					}), /* @__PURE__ */ O("div", {
-						className: l,
+						className: o,
 						children: m
 					})]
 				}) : /* @__PURE__ */ O("footer", {
-					className: e(c, "pb-4"),
+					className: e(a, "pb-4"),
 					children: m
 				}) : null
 			]

package/dist/lib/dialogOverlay.d.ts

@@ -4,9 +4,4 @@ export declare function trapFocus(container: HTMLElement): () => void;
 export declare function lockBodyScroll(): () => void;
 /** Focus the first tabbable control inside the panel — usually the primary action or close. */
 export declare function focusInitialElement(container: HTMLElement, preferSelector?: string): void;
-/**
- * Make everything outside `element` inert — every sibling of it and of each ancestor up to `<body>`.
- * Elements that were inert already are left alone. Returns cleanup.
- */
-export declare function inertOutside(element: HTMLElement): () => void;
 //# sourceMappingURL=dialogOverlay.d.ts.map

package/dist/lib/dialogOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogOverlay.d.ts","sourceRoot":"","sources":["../../src/lib/dialogOverlay.ts"],"names":[],"mappings":"AAYA,0DAA0D;AAC1D,wBAAgB,SAAS,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,IAAI,CAqC5D;AAED,yEAAyE;AACzE,wBAAgB,cAAc,IAAI,MAAM,IAAI,CAY3C;AAED,+FAA+F;AAC/F,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,WAAW,EACtB,cAAc,CAAC,EAAE,MAAM,GACtB,IAAI,CAWN;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAgB7D"}
+{"version":3,"file":"dialogOverlay.d.ts","sourceRoot":"","sources":["../../src/lib/dialogOverlay.ts"],"names":[],"mappings":"AAYA,0DAA0D;AAC1D,wBAAgB,SAAS,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,IAAI,CAqC5D;AAED,yEAAyE;AACzE,wBAAgB,cAAc,IAAI,MAAM,IAAI,CAY3C;AAED,+FAA+F;AAC/F,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,WAAW,EACtB,cAAc,CAAC,EAAE,MAAM,GACtB,IAAI,CAWN"}

package/dist/lib/dialogOverlay.js

@@ -40,16 +40,5 @@ function i(t, n) {
 	}
 	t.querySelector(e)?.focus();
 }
-function a(e) {
-	let t = [], n = e;
-	for (; n.parentElement != null && n !== document.body;) {
-		let e = n.parentElement;
-		for (let r of Array.from(e.children)) r === n || !(r instanceof HTMLElement) || r.inert || r instanceof HTMLScriptElement || r instanceof HTMLStyleElement || (r.inert = !0, t.push(r));
-		n = e;
-	}
-	return () => {
-		for (let e of t) e.inert = !1;
-	};
-}
 //#endregion
-export { i as focusInitialElement, a as inertOutside, r as lockBodyScroll, n as trapFocus };
+export { i as focusInitialElement, r as lockBodyScroll, n as trapFocus };