@monstermann/signals-modal 0.2.1 → 0.3.1

package/dist/createModal.d.ts

@@ -5,6 +5,7 @@ import { MaybeDispose } from "@monstermann/signals";
 interface ModalContext {
   key: string;
   dispose: () => void;
+  isDisposed: () => boolean;
   onDispose: (dispose: MaybeDispose) => void;
 }
 declare const onModalDisposed: _monstermann_signals0.Emitter<string>;

package/dist/createModal.js

@@ -1,12 +1,12 @@
 import { onModalClosed } from "./status/onModalClosed.js";
 import { closeModal } from "./status/closeModal.js";
 import { isModalClosed } from "./status/isModalClosed.js";
-import { SILENT, context, disposer, emitter } from "@monstermann/signals";
+import { SILENT, context, disposer, emitter, isDisposed } from "@monstermann/signals";
 
 //#region src/createModal.ts
 const meta = {
 	path: "@signals-modal/createModal.ts",
-	line: 15,
+	line: 16,
 	name: "onModalDisposed"
 };
 const modalCtx = context();
@@ -21,6 +21,7 @@ function createModal(key, setup) {
 	const nextCtx = {
 		key,
 		onDispose: dispose,
+		isDisposed: () => isDisposed(dispose),
 		dispose() {
 			if (isModalClosed(key)) {
 				dispose();

package/dist/index.d.ts

@@ -27,6 +27,7 @@ import { getModalPlacement } from "./position/getModalPlacement.js";
 import { ModalPosition, withPosition } from "./position/withPosition.js";
 import { getModalPosition } from "./position/getModalPosition.js";
 import { withBoundary } from "./position/withBoundary.js";
+import { withCloseOnScroll } from "./scroll/withCloseOnScroll.js";
 import { closeAllModals } from "./status/closeAllModals.js";
 import { closeLastModal } from "./status/closeLastModal.js";
 import { closeModal } from "./status/closeModal.js";
@@ -59,4 +60,4 @@ import { withModalStatus } from "./status/withModalStatus.js";
 import { closeLastModalOnClickOutside } from "./utils/closeLastModalOnClickOutside.js";
 import { closeLastModalOnEsc } from "./utils/closeLastModalOnEsc.js";
 import { syncModalGroupsToBody } from "./utils/syncModalGroupsToBody.js";
-export { ModalContext, ModalPlacement, ModalPlacementOption, ModalPosition, ModalStatus, closeAllModals, closeLastModal, closeLastModalOnClickOutside, closeLastModalOnEsc, closeModal, createModal, currentModal, getAnchorElement, getAnchorMeasurement, getClosedModals, getClosingModals, getDialogs, getFloatingElement, getFloatingMeasurement, getGroupsForModal, getModalPlacement, getModalPosition, getModalStatus, getModalsForGroup, getOpenModals, getOpenedModals, getOpeningModals, getPopovers, getTooltips, getVisibleModals, isAnyModalClosed, isAnyModalClosing, isAnyModalOpen, isAnyModalOpened, isAnyModalOpening, isAnyModalVisible, isDialog, isModalClosed, isModalClosing, isModalInGroup, isModalOpen, isModalOpened, isModalOpening, isModalVisible, isPopover, isTooltip, modalGroups, onModalClosed, onModalClosing, onModalDisposed, onModalOpened, onModalOpening, openModal, setAnchorElement, setFloatingElement, setModalStatus, syncModalGroupsToBody, withAnchorElement, withAnchorMeasurement, withBoundary, withFloatingElement, withFloatingMeasurement, withModalGroups, withModalStatus, withMouseAnchor, withPlacement, withPosition };
+export { ModalContext, ModalPlacement, ModalPlacementOption, ModalPosition, ModalStatus, closeAllModals, closeLastModal, closeLastModalOnClickOutside, closeLastModalOnEsc, closeModal, createModal, currentModal, getAnchorElement, getAnchorMeasurement, getClosedModals, getClosingModals, getDialogs, getFloatingElement, getFloatingMeasurement, getGroupsForModal, getModalPlacement, getModalPosition, getModalStatus, getModalsForGroup, getOpenModals, getOpenedModals, getOpeningModals, getPopovers, getTooltips, getVisibleModals, isAnyModalClosed, isAnyModalClosing, isAnyModalOpen, isAnyModalOpened, isAnyModalOpening, isAnyModalVisible, isDialog, isModalClosed, isModalClosing, isModalInGroup, isModalOpen, isModalOpened, isModalOpening, isModalVisible, isPopover, isTooltip, modalGroups, onModalClosed, onModalClosing, onModalDisposed, onModalOpened, onModalOpening, openModal, setAnchorElement, setFloatingElement, setModalStatus, syncModalGroupsToBody, withAnchorElement, withAnchorMeasurement, withBoundary, withCloseOnScroll, withFloatingElement, withFloatingMeasurement, withModalGroups, withModalStatus, withMouseAnchor, withPlacement, withPosition };

package/dist/index.js

@@ -31,6 +31,7 @@ import { getModalPosition } from "./position/getModalPosition.js";
 import { withBoundary } from "./position/withBoundary.js";
 import { withPlacement } from "./position/withPlacement.js";
 import { withPosition } from "./position/withPosition.js";
+import { withCloseOnScroll } from "./scroll/withCloseOnScroll.js";
 import { closeAllModals } from "./status/closeAllModals.js";
 import { closeLastModal } from "./status/closeLastModal.js";
 import { getClosedModals } from "./status/getClosedModals.js";
@@ -59,4 +60,4 @@ import { closeLastModalOnClickOutside } from "./utils/closeLastModalOnClickOutsi
 import { closeLastModalOnEsc } from "./utils/closeLastModalOnEsc.js";
 import { syncModalGroupsToBody } from "./utils/syncModalGroupsToBody.js";
 
-export { closeAllModals, closeLastModal, closeLastModalOnClickOutside, closeLastModalOnEsc, closeModal, createModal, currentModal, getAnchorElement, getAnchorMeasurement, getClosedModals, getClosingModals, getDialogs, getFloatingElement, getFloatingMeasurement, getGroupsForModal, getModalPlacement, getModalPosition, getModalStatus, getModalsForGroup, getOpenModals, getOpenedModals, getOpeningModals, getPopovers, getTooltips, getVisibleModals, isAnyModalClosed, isAnyModalClosing, isAnyModalOpen, isAnyModalOpened, isAnyModalOpening, isAnyModalVisible, isDialog, isModalClosed, isModalClosing, isModalInGroup, isModalOpen, isModalOpened, isModalOpening, isModalVisible, isPopover, isTooltip, modalGroups, onModalClosed, onModalClosing, onModalDisposed, onModalOpened, onModalOpening, openModal, setAnchorElement, setFloatingElement, setModalStatus, syncModalGroupsToBody, withAnchorElement, withAnchorMeasurement, withBoundary, withFloatingElement, withFloatingMeasurement, withModalGroups, withModalStatus, withMouseAnchor, withPlacement, withPosition };
+export { closeAllModals, closeLastModal, closeLastModalOnClickOutside, closeLastModalOnEsc, closeModal, createModal, currentModal, getAnchorElement, getAnchorMeasurement, getClosedModals, getClosingModals, getDialogs, getFloatingElement, getFloatingMeasurement, getGroupsForModal, getModalPlacement, getModalPosition, getModalStatus, getModalsForGroup, getOpenModals, getOpenedModals, getOpeningModals, getPopovers, getTooltips, getVisibleModals, isAnyModalClosed, isAnyModalClosing, isAnyModalOpen, isAnyModalOpened, isAnyModalOpening, isAnyModalVisible, isDialog, isModalClosed, isModalClosing, isModalInGroup, isModalOpen, isModalOpened, isModalOpening, isModalVisible, isPopover, isTooltip, modalGroups, onModalClosed, onModalClosing, onModalDisposed, onModalOpened, onModalOpening, openModal, setAnchorElement, setFloatingElement, setModalStatus, syncModalGroupsToBody, withAnchorElement, withAnchorMeasurement, withBoundary, withCloseOnScroll, withFloatingElement, withFloatingMeasurement, withModalGroups, withModalStatus, withMouseAnchor, withPlacement, withPosition };

package/dist/scroll/withCloseOnScroll.d.ts

@@ -0,0 +1,10 @@
+import { ModalStatus } from "../status/types.js";
+import { Reactive } from "@monstermann/signals";
+
+//#region src/scroll/withCloseOnScroll.d.ts
+declare function withCloseOnScroll(options: {
+  $anchorElement: Reactive<HTMLElement | null>;
+  $status: Reactive<ModalStatus>;
+}): void;
+//#endregion
+export { withCloseOnScroll };

package/dist/scroll/withCloseOnScroll.js

@@ -0,0 +1,41 @@
+import { closeModal } from "../status/closeModal.js";
+import { currentModal } from "../createModal.js";
+import { INTERNAL, effect } from "@monstermann/signals";
+
+//#region src/scroll/withCloseOnScroll.ts
+const meta = {
+	path: "@signals-modal/scroll/withCloseOnScroll.ts",
+	line: 13,
+	name: "withCloseOnScroll"
+};
+function withCloseOnScroll(options) {
+	const modal = currentModal();
+	const onScroll = () => closeModal(modal.key);
+	modal.onDispose(effect(() => {
+		const element = options.$anchorElement();
+		const status = options.$status();
+		if (!element) return;
+		if (status === "closing" || status === "closed") return;
+		const overflowElements = getScrollableAncestors(element);
+		for (const element$1 of overflowElements) element$1.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			for (const element$1 of overflowElements) element$1.removeEventListener("scroll", onScroll);
+		};
+	}, INTERNAL, meta));
+}
+function isOverflowElement(element) {
+	const { display, overflow, overflowX, overflowY } = getComputedStyle(element);
+	return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
+}
+function getScrollableAncestors(element) {
+	const scrollableAncestors = [];
+	let pivot = element.parentElement;
+	while (pivot) {
+		if (isOverflowElement(pivot)) scrollableAncestors.push(pivot);
+		pivot = pivot.parentElement;
+	}
+	return scrollableAncestors;
+}
+
+//#endregion
+export { withCloseOnScroll };

package/dist/utils/syncModalGroupsToBody.js

@@ -1,23 +1,33 @@
 import { getGroupsForModal } from "../groups/getGroupsForModal.js";
 import { getVisibleModals } from "../status/getVisibleModals.js";
-import { INTERNAL, effect } from "@monstermann/signals";
+import { INTERNAL, effect, memo } from "@monstermann/signals";
 
 //#region src/utils/syncModalGroupsToBody.ts
+const path = "@signals-modal/utils/syncModalGroupsToBody.ts";
 const meta = {
-	path: "@signals-modal/utils/syncModalGroupsToBody.ts",
-	line: 6,
+	path,
+	line: 5,
+	name: "$classes"
+};
+const meta1 = {
+	path,
+	line: 17,
 	name: "syncModalGroupsToBody"
 };
+const $classes = memo(() => {
+	const modals = getVisibleModals();
+	const clx = /* @__PURE__ */ new Set();
+	for (const modal of modals) for (const group of getGroupsForModal(modal)) clx.add(`has-${group}`);
+	return Array.from(clx).sort().join(" ");
+}, INTERNAL, meta);
 function syncModalGroupsToBody() {
 	effect(() => {
-		const modals = getVisibleModals();
-		const clx = /* @__PURE__ */ new Set();
-		for (const modal of modals) for (const group of getGroupsForModal(modal)) clx.add(`has-${group}`);
-		document.body.classList.add(...clx);
+		const classes = $classes().split(" ");
+		document.body.classList.add(...classes);
 		return () => {
-			document.body.classList.remove(...clx);
+			document.body.classList.remove(...classes);
 		};
-	}, INTERNAL, meta);
+	}, INTERNAL, meta1);
 }
 
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@monstermann/signals-modal",
     "type": "module",
-    "version": "0.2.1",
+    "version": "0.3.1",
     "description": "Composable modal management.",
     "author": "Michael Ostermann <michaelostermann@me.com>",
     "license": "MIT",