@monstermann/signals-modal 0.3.0 → 0.3.2

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/status/onModalClosed.d.ts

@@ -1,6 +1,6 @@
-import * as _monstermann_signals0 from "@monstermann/signals";
+import * as _monstermann_signals1 from "@monstermann/signals";
 
 //#region src/status/onModalClosed.d.ts
-declare const onModalClosed: _monstermann_signals0.Emitter<string>;
+declare const onModalClosed: _monstermann_signals1.Emitter<string>;
 //#endregion
 export { onModalClosed };

package/dist/status/onModalClosing.d.ts

@@ -1,6 +1,6 @@
-import * as _monstermann_signals2 from "@monstermann/signals";
+import * as _monstermann_signals0 from "@monstermann/signals";
 
 //#region src/status/onModalClosing.d.ts
-declare const onModalClosing: _monstermann_signals2.Emitter<string>;
+declare const onModalClosing: _monstermann_signals0.Emitter<string>;
 //#endregion
 export { onModalClosing };

package/dist/status/onModalOpened.d.ts

@@ -1,6 +1,6 @@
-import * as _monstermann_signals1 from "@monstermann/signals";
+import * as _monstermann_signals2 from "@monstermann/signals";
 
 //#region src/status/onModalOpened.d.ts
-declare const onModalOpened: _monstermann_signals1.Emitter<string>;
+declare const onModalOpened: _monstermann_signals2.Emitter<string>;
 //#endregion
 export { onModalOpened };

package/dist/utils/syncModalGroupsToBody.js

@@ -22,6 +22,7 @@ const $classes = memo(() => {
 }, INTERNAL, meta);
 function syncModalGroupsToBody() {
 	effect(() => {
+		if (!$classes()) return;
 		const classes = $classes().split(" ");
 		document.body.classList.add(...classes);
 		return () => {

package/package.json

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