@monstermann/signals-modal 0.6.0 → 0.7.0

package/README.md

@@ -54,21 +54,6 @@ const modal = createModal("key", () => {
         $status,
     };
 });
-
-const anchor = document.querySelector(".anchor");
-const floating = document.querySelector(".popover");
-
-// Directly access the returned properties:
-modal.$anchor(anchor);
-modal.$floating(floating);
-modal.$status("opened");
-const { floatingX, floatingY, maxHeight, maxWidth } = modal.$position();
-
-// Or use the global utilities:
-setAnchorElement("key", anchor);
-setFloatingElement("key", floating);
-setModalStatus("key", "opened");
-const { floatingX, floatingY, maxHeight, maxWidth } = getModalPosition("key");
 ```
 
 ## Installation
@@ -91,93 +76,6 @@ bun add @monstermann/signals-modal
 
 ## Anchor
 
-### getAnchorElement
-
-![Reactive](https://img.shields.io/badge/Reactive-blue?style=flat-square&color=%2369a1ff)
-
-```ts
-function getAnchorElement(key: string): HTMLElement | undefined;
-```
-
-Retrieves the current anchor element for the given `key`.
-
-#### Example
-
-```ts
-import {
-    createModal,
-    withAnchorElement,
-    setAnchorElement,
-    getAnchorElement,
-} from "@monstermann/signals-modal";
-
-createModal("key", () => {
-    withAnchorElement();
-});
-
-setAnchorElement("key", document.querySelector(".anchor"));
-getAnchorElement("key"); // HTMLElement
-```
-
-### getAnchorMeasurement
-
-![Reactive](https://img.shields.io/badge/Reactive-blue?style=flat-square&color=%2369a1ff)
-
-```ts
-function getAnchorMeasurement(key: string): Rect;
-```
-
-Retrieves the current result of `withAnchorMeasurement` or `withMouseAnchor`, falling back to an empty `Rect`.
-
-#### Example
-
-```ts
-import {
-    createModal,
-    withAnchorElement,
-    withModalStatus,
-    withAnchorMeasurement,
-    getAnchorMeasurement,
-} from "@monstermann/signals-modal";
-
-createModal("key", () => {
-    const { $status } = withModalStatus();
-    const $anchorElement = withAnchorElement();
-    // Memo({ top: number, left: number, width: number, height: number })
-    const $anchorMeasurement = withAnchorMeasurement({
-        $status,
-        $anchorElement,
-    });
-});
-
-// { top: number, left: number, width: number, height: number }
-getAnchorMeasurement("key");
-```
-
-### setAnchorElement
-
-```ts
-function setAnchorElement(key: string, element: HTMLElement | null): void;
-```
-
-Sets the current anchor element for the given `key`.
-
-#### Example
-
-```ts
-import {
-    createModal,
-    withAnchorElement,
-    getAnchorElement,
-} from "@monstermann/signals-modal";
-
-createModal("key", () => {
-    withAnchorElement();
-});
-
-setAnchorElement("key", document.querySelector(".anchor"));
-```
-
 ### withAnchorElement
 
 ```ts
@@ -354,93 +252,6 @@ stopListening();
 
 ## Floating
 
-### getFloatingElement
-
-![Reactive](https://img.shields.io/badge/Reactive-blue?style=flat-square&color=%2369a1ff)
-
-```ts
-function getFloatingElement(key: string): HTMLElement | undefined;
-```
-
-Retrieves the current floating element for the given `key`.
-
-#### Example
-
-```ts
-import {
-    createModal,
-    withFloatingElement,
-    setFloatingElement,
-    getFloatingElement,
-} from "@monstermann/signals-modal";
-
-createModal("key", () => {
-    withFloatingElement();
-});
-
-setFloatingElement("key", document.querySelector(".floating"));
-getFloatingElement("key"); // HTMLElement
-```
-
-### getFloatingMeasurement
-
-![Reactive](https://img.shields.io/badge/Reactive-blue?style=flat-square&color=%2369a1ff)
-
-```ts
-function getFloatingMeasurement(key: string): Rect;
-```
-
-Retrieves the current result of `withFloatingMeasurement`, falling back to an empty `Rect`.
-
-#### Example
-
-```ts
-import {
-    createModal,
-    withFloatingElement,
-    withModalStatus,
-    withFloatingMeasurement,
-    getFloatingMeasurement,
-} from "@monstermann/signals-modal";
-
-createModal("key", () => {
-    const { $status } = withModalStatus();
-    const $floatingElement = withFloatingElement();
-    // Memo({ top: number, left: number, width: number, height: number })
-    const $floatingMeasurement = withFloatingMeasurement({
-        $status,
-        $floatingElement,
-    });
-});
-
-// { top: number, left: number, width: number, height: number }
-getFloatingMeasurement("key");
-```
-
-### setFloatingElement
-
-```ts
-function setFloatingElement(key: string, element: HTMLElement | null): void;
-```
-
-Sets the current floating element for the given `key`.
-
-#### Example
-
-```ts
-import {
-    createModal,
-    withFloatingElement,
-    getFloatingElement,
-} from "@monstermann/signals-modal";
-
-createModal("key", () => {
-    withFloatingElement();
-});
-
-setFloatingElement("key", document.querySelector(".floating"));
-```
-
 ### withFloatingElement
 
 ```ts
@@ -793,109 +604,6 @@ getModalsForGroup("dialog"); // Set(["key"])
 
 ## Position
 
-### getModalPlacement
-
-```ts
-function getModalPlacement(key: string): ModalPlacement | undefined;
-```
-
-Returns the current placement for the given `key`.
-
-#### Example
-
-```ts
-import {
-    createModal,
-    withModalStatus,
-    withAnchorElement,
-    withAnchorMeasurement,
-    withFloatingElement,
-    withFloatingMeasurement,
-    withBoundary,
-    withPlacement,
-    getModalPlacement,
-} from "@monstermann/signals-modal";
-
-createModal("key", () => {
-    const { $status } = withModalStatus();
-    const $anchorElement = withAnchorElement();
-    const $floatingElement = withFloatingElement();
-    const $anchorMeasurement = withAnchorMeasurement({
-        $status,
-        $anchorElement,
-    });
-    const $floatingMeasurement = withFloatingMeasurement({
-        $status,
-        $floatingElement,
-    });
-    const $boundary = withBoundary({ $status });
-    const $placement = withPlacement({
-        placement: "vertical-center",
-        $boundary,
-        $anchorMeasurement,
-        $floatingMeasurement,
-    });
-});
-
-getModalPlacement("key"); // up-center | down-center
-```
-
-### getModalPosition
-
-![Reactive](https://img.shields.io/badge/Reactive-blue?style=flat-square&color=%2369a1ff)
-
-```ts
-function getModalPosition(key: string): ModalPosition | undefined;
-```
-
-Returns the current result of `withPosition`.
-
-#### Example
-
-```ts
-import {
-    createModal,
-    withModalStatus,
-    withAnchorElement,
-    withAnchorMeasurement,
-    withFloatingElement,
-    withFloatingMeasurement,
-    withBoundary,
-    withPlacement,
-    withPosition,
-    getModalPosition,
-} from "@monstermann/signals-modal";
-
-createModal("key", () => {
-    const { $status } = withModalStatus();
-    const $anchorElement = withAnchorElement();
-    const $floatingElement = withFloatingElement();
-    const $anchorMeasurement = withAnchorMeasurement({
-        $status,
-        $anchorElement,
-    });
-    const $floatingMeasurement = withFloatingMeasurement({
-        $status,
-        $floatingElement,
-    });
-    const $boundary = withBoundary({ $status });
-    const $placement = withPlacement({
-        placement: "vertical-center",
-        $boundary,
-        $anchorMeasurement,
-        $floatingMeasurement,
-    });
-    const $position = withPosition({
-        $boundary,
-        $placement,
-        $anchorMeasurement,
-        $floatingMeasurement,
-    });
-});
-
-getModalPosition("key"); // ModalPosition | undefined
-```
-
 ### withBoundary
 
 ```ts
@@ -1132,22 +840,6 @@ openModal("modal2");
 closeAllModals();
 ```
 
-### closeLastModal
-
-```ts
-function closeLastModal(): void;
-```
-
-Closes the last opened modal by setting its status to `"closing"`.
-
-#### Example
-
-```ts
-import { closeLastModal } from "@monstermann/signals-modal";
-
-closeLastModal();
-```
-
 ### closeModal
 
 ```ts
@@ -1949,72 +1641,3 @@ createModal("modal2", () => {
     $status("closing");
 });
 ```
-
-## Utils
-
-### closeLastModalOnClickOutside
-
-```ts
-function closeLastModalOnClickOutside(): void;
-```
-
-Sets up a global `mousedown` listener that closes the last opened modal when clicked outside the floating element.
-
-#### Example
-
-```ts
-import { closeLastModalOnClickOutside } from "@monstermann/signals-modal";
-
-closeLastModalOnClickOutside();
-```
-
-### closeLastModalOnEsc
-
-```ts
-function closeLastModalOnEsc(): void;
-```
-
-Sets up a global `keydown` listener that closes the last opened modal when `esc` is pressed, unless the target was an editable element such as `<input>`.
-
-#### Example
-
-```ts
-import { closeLastModalOnEsc } from "@monstermann/signals-modal";
-
-closeLastModalOnEsc();
-```
-
-### syncModalGroupsToBody
-
-```ts
-function syncModalGroupsToBody(): void;
-```
-
-Sets up a global `Effect` that adds `has-${group}` class names to `document.body` for opened modals.
-
-#### Example
-
-```ts
-import {
-    createModal,
-    withModalGroups,
-    withModalStatus,
-    syncModalGroupsToBody,
-    openModal,
-    closeModal,
-} from "@monstermann/signals-modal";
-
-syncModalGroupsToBody();
-
-const modal = createModal("key", () => {
-    const $groups = withModalGroups(["dialog"]);
-    const { $status } = withModalStatus();
-    return { $groups, $status };
-});
-
-document.body.classList; // []
-openModal("key");
-document.body.classList; // ["has-dialog"]
-closeModal("key");
-document.body.classList; // []
-```

package/dist/anchor/withAnchorElement.mjs

@@ -1,11 +1,9 @@
-import { $anchorElements } from "./internals.mjs";
-import { currentModal } from "../createModal.mjs";
 import { INTERNAL, signal } from "@monstermann/signals";
 
 //#region src/anchor/withAnchorElement.ts
 const meta = {
 	path: "@signals-modal/anchor/withAnchorElement.ts",
-	line: 38,
+	line: 35,
 	name: "withAnchorElement.$anchorElement"
 };
 /**
@@ -39,16 +37,7 @@ const meta = {
 *
 */
 function withAnchorElement(anchorElement) {
-	const modal = currentModal();
-	const $anchorElement = signal(anchorElement ?? null, INTERNAL, meta);
-	$anchorElements((map) => map.set(modal.key, $anchorElement));
-	modal.onDispose(() => {
-		$anchorElements((map) => {
-			map.delete(modal.key);
-			return map;
-		});
-	});
-	return $anchorElement;
+	return signal(anchorElement ?? null, INTERNAL, meta);
 }
 
 //#endregion

package/dist/anchor/withAnchorMeasurement.mjs

@@ -1,4 +1,3 @@
-import { $anchorMeasurements } from "./internals.mjs";
 import { currentModal } from "../createModal.mjs";
 import { observePosition } from "../internals/observePosition.mjs";
 import { INTERNAL, effect, memo, signal } from "@monstermann/signals";
@@ -11,17 +10,17 @@ import { fromDOMRect } from "@monstermann/geometry/Rect/fromDOMRect.mjs";
 const path = "@signals-modal/anchor/withAnchorMeasurement.ts";
 const meta = {
 	path,
-	line: 61,
+	line: 60,
 	name: "withAnchorMeasurement.$rect"
 };
 const meta1 = {
 	path,
-	line: 66,
+	line: 65,
 	name: "withAnchorMeasurement.$measurement"
 };
 const meta2 = {
 	path,
-	line: 70,
+	line: 69,
 	name: "withAnchorMeasurement"
 };
 /**
@@ -81,13 +80,6 @@ function withAnchorMeasurement(options) {
 		$rect(fromElement(element));
 		return observePosition(element, (bounds) => $rect(fromDOMRect(bounds)));
 	}, INTERNAL, meta2));
-	$anchorMeasurements((map) => map.set(modal.key, $rect));
-	modal.onDispose(() => {
-		$anchorMeasurements((map) => {
-			map.delete(modal.key);
-			return map;
-		});
-	});
 	return $measurement;
 }
 

package/dist/anchor/withMouseAnchor.mjs

@@ -1,4 +1,3 @@
-import { $anchorMeasurements } from "./internals.mjs";
 import { currentModal } from "../createModal.mjs";
 import { INTERNAL, effect, memo, peek, signal } from "@monstermann/signals";
 import { origin } from "@monstermann/geometry/Rect/origin.mjs";
@@ -10,17 +9,17 @@ import { $mouseX, $mouseY } from "@monstermann/signals-web";
 const path = "@signals-modal/anchor/withMouseAnchor.ts";
 const meta = {
 	path,
-	line: 50,
+	line: 49,
 	name: "withMouseAnchor.$rect"
 };
 const meta1 = {
 	path,
-	line: 55,
+	line: 54,
 	name: "withMouseAnchor.$measurement"
 };
 const meta2 = {
 	path,
-	line: 59,
+	line: 58,
 	name: "withMouseAnchor"
 };
 /**
@@ -72,13 +71,6 @@ function withMouseAnchor(options) {
 			width: 0
 		});
 	}, INTERNAL, meta2));
-	$anchorMeasurements((map) => map.set(modal.key, $rect));
-	modal.onDispose(() => {
-		$anchorMeasurements((map) => {
-			map.delete(modal.key);
-			return map;
-		});
-	});
 	return $measurement;
 }
 

package/dist/createModal.mjs

@@ -1,6 +1,6 @@
-import { onModalClosed } from "./status/onModalClosed.mjs";
 import { closeModal } from "./status/closeModal.mjs";
 import { isModalClosed } from "./status/isModalClosed.mjs";
+import { onModalClosed } from "./status/onModalClosed.mjs";
 import { SILENT, context, disposer, emitter, isDisposed } from "@monstermann/signals";
 
 //#region src/createModal.ts

package/dist/floating/withFloatingElement.mjs

@@ -1,11 +1,9 @@
-import { currentModal } from "../createModal.mjs";
-import { $floatingElements } from "./internals.mjs";
 import { INTERNAL, signal } from "@monstermann/signals";
 
 //#region src/floating/withFloatingElement.ts
 const meta = {
 	path: "@signals-modal/floating/withFloatingElement.ts",
-	line: 38,
+	line: 35,
 	name: "withFloatingElement.$anchorElement"
 };
 /**
@@ -39,16 +37,7 @@ const meta = {
 *
 */
 function withFloatingElement(anchorElement) {
-	const modal = currentModal();
-	const $anchorElement = signal(anchorElement ?? null, INTERNAL, meta);
-	$floatingElements((map) => map.set(modal.key, $anchorElement));
-	modal.onDispose(() => {
-		$floatingElements((map) => {
-			map.delete(modal.key);
-			return map;
-		});
-	});
-	return $anchorElement;
+	return signal(anchorElement ?? null, INTERNAL, meta);
 }
 
 //#endregion

package/dist/floating/withFloatingMeasurement.mjs

@@ -1,5 +1,4 @@
 import { currentModal } from "../createModal.mjs";
-import { $floatingMeasurements } from "./internals.mjs";
 import { observeDimensions } from "../internals/observeDimensions.mjs";
 import { INTERNAL, effect, memo, signal } from "@monstermann/signals";
 import { origin } from "@monstermann/geometry/Rect/origin.mjs";
@@ -10,17 +9,17 @@ import { fromElement } from "@monstermann/geometry/Rect/fromElement.mjs";
 const path = "@signals-modal/floating/withFloatingMeasurement.ts";
 const meta = {
 	path,
-	line: 58,
+	line: 57,
 	name: "withFloatingMeasurement.$rect"
 };
 const meta1 = {
 	path,
-	line: 63,
+	line: 62,
 	name: "withFloatingMeasurement.$measurement"
 };
 const meta2 = {
 	path,
-	line: 67,
+	line: 66,
 	name: "withFloatingMeasurement"
 };
 /**
@@ -89,13 +88,6 @@ function withFloatingMeasurement(options) {
 			width: bounds.width
 		}));
 	}, INTERNAL, meta2));
-	$floatingMeasurements((map) => map.set(modal.key, $rect));
-	modal.onDispose(() => {
-		$floatingMeasurements((map) => {
-			map.delete(modal.key);
-			return map;
-		});
-	});
 	return $measurement;
 }
 

package/dist/index.d.mts

@@ -1,14 +1,8 @@
-import { getAnchorElement } from "./anchor/getAnchorElement.mjs";
-import { getAnchorMeasurement } from "./anchor/getAnchorMeasurement.mjs";
-import { setAnchorElement } from "./anchor/setAnchorElement.mjs";
 import { withAnchorElement } from "./anchor/withAnchorElement.mjs";
 import { ModalStatus } from "./status/types.mjs";
 import { withAnchorMeasurement } from "./anchor/withAnchorMeasurement.mjs";
 import { withMouseAnchor } from "./anchor/withMouseAnchor.mjs";
 import { ModalContext, createModal, currentModal, onModalDisposed } from "./createModal.mjs";
-import { getFloatingElement } from "./floating/getFloatingElement.mjs";
-import { getFloatingMeasurement } from "./floating/getFloatingMeasurement.mjs";
-import { setFloatingElement } from "./floating/setFloatingElement.mjs";
 import { withFloatingElement } from "./floating/withFloatingElement.mjs";
 import { withFloatingMeasurement } from "./floating/withFloatingMeasurement.mjs";
 import { getDialogs } from "./groups/getDialogs.mjs";
@@ -22,14 +16,11 @@ import { isPopover } from "./groups/isPopover.mjs";
 import { isTooltip } from "./groups/isTooltip.mjs";
 import { modalGroups } from "./groups/modalGroups.mjs";
 import { withModalGroups } from "./groups/withModalGroups.mjs";
+import { withBoundary } from "./position/withBoundary.mjs";
 import { ModalPlacement, ModalPlacementOption, withPlacement } from "./position/withPlacement.mjs";
-import { getModalPlacement } from "./position/getModalPlacement.mjs";
 import { ModalPosition, withPosition } from "./position/withPosition.mjs";
-import { getModalPosition } from "./position/getModalPosition.mjs";
-import { withBoundary } from "./position/withBoundary.mjs";
 import { withCloseOnScroll } from "./scroll/withCloseOnScroll.mjs";
 import { closeAllModals } from "./status/closeAllModals.mjs";
-import { closeLastModal } from "./status/closeLastModal.mjs";
 import { closeModal } from "./status/closeModal.mjs";
 import { getClosedModals } from "./status/getClosedModals.mjs";
 import { getClosingModals } from "./status/getClosingModals.mjs";
@@ -57,7 +48,4 @@ import { onModalOpening } from "./status/onModalOpening.mjs";
 import { openModal } from "./status/openModal.mjs";
 import { setModalStatus } from "./status/setModalStatus.mjs";
 import { withModalStatus } from "./status/withModalStatus.mjs";
-import { closeLastModalOnClickOutside } from "./utils/closeLastModalOnClickOutside.mjs";
-import { closeLastModalOnEsc } from "./utils/closeLastModalOnEsc.mjs";
-import { syncModalGroupsToBody } from "./utils/syncModalGroupsToBody.mjs";
-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 };
+export { ModalContext, ModalPlacement, ModalPlacementOption, ModalPosition, ModalStatus, closeAllModals, closeModal, createModal, currentModal, getClosedModals, getClosingModals, getDialogs, getGroupsForModal, 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, setModalStatus, withAnchorElement, withAnchorMeasurement, withBoundary, withCloseOnScroll, withFloatingElement, withFloatingMeasurement, withModalGroups, withModalStatus, withMouseAnchor, withPlacement, withPosition };