@monstermann/signals-modal 0.6.0 → 0.7.1

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,8 @@
-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,17 +36,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
-export { withAnchorElement };
+export { withAnchorElement };

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";
@@ -6,22 +5,21 @@ import { origin } from "@monstermann/geometry/Rect/origin.mjs";
 import { isEqual } from "@monstermann/geometry/Rect/isEqual.mjs";
 import { fromElement } from "@monstermann/geometry/Rect/fromElement.mjs";
 import { fromDOMRect } from "@monstermann/geometry/Rect/fromDOMRect.mjs";
-
 //#region src/anchor/withAnchorMeasurement.ts
 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,15 +79,7 @@ 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;
 }
-
 //#endregion
-export { withAnchorMeasurement };
+export { withAnchorMeasurement };

package/dist/anchor/withMouseAnchor.mjs

@@ -1,26 +1,24 @@
-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";
 import { isEqual } from "@monstermann/geometry/Rect/isEqual.mjs";
 import { isOrigin } from "@monstermann/geometry/Rect/isOrigin.mjs";
 import { $mouseX, $mouseY } from "@monstermann/signals-web";
-
 //#region src/anchor/withMouseAnchor.ts
 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,15 +70,7 @@ 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;
 }
-
 //#endregion
-export { withMouseAnchor };
+export { withMouseAnchor };

package/dist/createModal.d.mts

@@ -1,4 +1,4 @@
-import * as _monstermann_signals0 from "@monstermann/signals";
+import * as _$_monstermann_signals0 from "@monstermann/signals";
 import { MaybeDispose } from "@monstermann/signals";
 
 //#region src/createModal.d.ts
@@ -8,7 +8,7 @@ interface ModalContext {
   isDisposed: () => boolean;
   onDispose: (dispose: MaybeDispose) => void;
 }
-declare const onModalDisposed: _monstermann_signals0.Emitter<string>;
+declare const onModalDisposed: _$_monstermann_signals0.Emitter<string>;
 declare function currentModal(): ModalContext;
 /**
  * # createModal

package/dist/createModal.mjs

@@ -1,8 +1,7 @@
-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
 const meta = {
 	path: "@signals-modal/createModal.ts",
@@ -72,6 +71,5 @@ function createModal(key, setup) {
 		modalCtx(prevCtx);
 	}
 }
-
 //#endregion
-export { createModal, currentModal, onModalDisposed };
+export { createModal, currentModal, onModalDisposed };

package/dist/floating/withFloatingElement.mjs

@@ -1,11 +1,8 @@
-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,17 +36,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
-export { withFloatingElement };
+export { withFloatingElement };

package/dist/floating/withFloatingMeasurement.mjs

@@ -1,26 +1,24 @@
 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";
 import { isEqual } from "@monstermann/geometry/Rect/isEqual.mjs";
 import { fromElement } from "@monstermann/geometry/Rect/fromElement.mjs";
-
 //#region src/floating/withFloatingMeasurement.ts
 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,15 +87,7 @@ 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;
 }
-
 //#endregion
-export { withFloatingMeasurement };
+export { withFloatingMeasurement };

package/dist/groups/getDialogs.mjs

@@ -1,6 +1,5 @@
 import { getModalsForGroup } from "./getModalsForGroup.mjs";
 import { modalGroups } from "./modalGroups.mjs";
-
 //#region src/groups/getDialogs.ts
 /**
 * # getDialogs
@@ -34,6 +33,5 @@ import { modalGroups } from "./modalGroups.mjs";
 function getDialogs() {
 	return getModalsForGroup(modalGroups.dialog);
 }
-
 //#endregion
-export { getDialogs };
+export { getDialogs };

package/dist/groups/getGroupsForModal.mjs

@@ -1,5 +1,4 @@
 import { $keysToGroups } from "./internals.mjs";
-
 //#region src/groups/getGroupsForModal.ts
 const empty = /* @__PURE__ */ new Set();
 /**
@@ -34,6 +33,5 @@ const empty = /* @__PURE__ */ new Set();
 function getGroupsForModal(key) {
 	return $keysToGroups().get(key) ?? empty;
 }
-
 //#endregion
-export { getGroupsForModal };
+export { getGroupsForModal };

package/dist/groups/getModalsForGroup.mjs

@@ -1,5 +1,4 @@
 import { $groupsToKeys } from "./internals.mjs";
-
 //#region src/groups/getModalsForGroup.ts
 const empty = /* @__PURE__ */ new Set();
 /**
@@ -34,6 +33,5 @@ const empty = /* @__PURE__ */ new Set();
 function getModalsForGroup(group) {
 	return $groupsToKeys().get(group) ?? empty;
 }
-
 //#endregion
-export { getModalsForGroup };
+export { getModalsForGroup };