@monstermann/signals-modal 0.5.0 → 0.7.0

package/dist/index.mjs

@@ -1,18 +1,10 @@
-import { getAnchorElement } from "./anchor/getAnchorElement.mjs";
-import { getAnchorMeasurement } from "./anchor/getAnchorMeasurement.mjs";
-import { setAnchorElement } from "./anchor/setAnchorElement.mjs";
-import { onModalClosed } from "./status/onModalClosed.mjs";
-import { onModalOpened } from "./status/onModalOpened.mjs";
-import { onModalOpening } from "./status/onModalOpening.mjs";
+import { withAnchorElement } from "./anchor/withAnchorElement.mjs";
 import { closeModal } from "./status/closeModal.mjs";
 import { isModalClosed } from "./status/isModalClosed.mjs";
+import { onModalClosed } from "./status/onModalClosed.mjs";
 import { createModal, currentModal, onModalDisposed } from "./createModal.mjs";
-import { withAnchorElement } from "./anchor/withAnchorElement.mjs";
 import { withAnchorMeasurement } from "./anchor/withAnchorMeasurement.mjs";
 import { withMouseAnchor } from "./anchor/withMouseAnchor.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 { getModalsForGroup } from "./groups/getModalsForGroup.mjs";
@@ -26,14 +18,11 @@ import { isModalInGroup } from "./groups/isModalInGroup.mjs";
 import { isPopover } from "./groups/isPopover.mjs";
 import { isTooltip } from "./groups/isTooltip.mjs";
 import { withModalGroups } from "./groups/withModalGroups.mjs";
-import { getModalPlacement } from "./position/getModalPlacement.mjs";
-import { getModalPosition } from "./position/getModalPosition.mjs";
 import { withBoundary } from "./position/withBoundary.mjs";
 import { withPlacement } from "./position/withPlacement.mjs";
 import { withPosition } from "./position/withPosition.mjs";
 import { withCloseOnScroll } from "./scroll/withCloseOnScroll.mjs";
 import { closeAllModals } from "./status/closeAllModals.mjs";
-import { closeLastModal } from "./status/closeLastModal.mjs";
 import { getClosedModals } from "./status/getClosedModals.mjs";
 import { getClosingModals } from "./status/getClosingModals.mjs";
 import { getModalStatus } from "./status/getModalStatus.mjs";
@@ -53,11 +42,10 @@ import { isModalOpening } from "./status/isModalOpening.mjs";
 import { isModalOpen } from "./status/isModalOpen.mjs";
 import { isModalVisible } from "./status/isModalVisible.mjs";
 import { onModalClosing } from "./status/onModalClosing.mjs";
+import { onModalOpened } from "./status/onModalOpened.mjs";
+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 { 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 { 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 };

package/dist/position/internals.mjs

@@ -1,4 +1,3 @@
-import { signal } from "@monstermann/signals";
 import { setBottom } from "@monstermann/geometry/Rect/setBottom.mjs";
 import { top } from "@monstermann/geometry/Rect/top.mjs";
 import { setTop } from "@monstermann/geometry/Rect/setTop.mjs";
@@ -9,25 +8,6 @@ import { setLeft } from "@monstermann/geometry/Rect/setLeft.mjs";
 import { right } from "@monstermann/geometry/Rect/right.mjs";
 
 //#region src/position/internals.ts
-const path = "@signals-modal/position/internals.ts";
-const meta = {
-	path,
-	line: 14,
-	name: "$positions"
-};
-const meta1 = {
-	path,
-	line: 19,
-	name: "$placements"
-};
-const $positions = signal(/* @__PURE__ */ new Map(), {
-	mutable: true,
-	silent: true
-}, meta);
-const $placements = signal(/* @__PURE__ */ new Map(), {
-	mutable: true,
-	silent: true
-}, meta1);
 function getBoundaryUp(boundary, anchor) {
 	return setBottom(boundary, top(anchor));
 }
@@ -42,4 +22,4 @@ function getBoundaryRight(boundary, anchor) {
 }
 
 //#endregion
-export { $placements, $positions, getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp };
+export { getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp };

package/dist/position/withPlacement.mjs

@@ -1,5 +1,4 @@
-import { currentModal } from "../createModal.mjs";
-import { $placements, getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp } from "./internals.mjs";
+import { getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp } from "./internals.mjs";
 import { INTERNAL, memo } from "@monstermann/signals";
 import { width } from "@monstermann/geometry/Rect/width.mjs";
 import { height } from "@monstermann/geometry/Rect/height.mjs";
@@ -7,7 +6,7 @@ import { height } from "@monstermann/geometry/Rect/height.mjs";
 //#region src/position/withPlacement.ts
 const meta = {
 	path: "@signals-modal/position/withPlacement.ts",
-	line: 174,
+	line: 172,
 	name: "withPlacement.$placement"
 };
 const placementResolvers = {
@@ -118,22 +117,13 @@ const placementResolvers = {
 *
 */
 function withPlacement(options) {
-	const modal = currentModal();
-	const $placement = memo(() => {
+	return memo(() => {
 		return placementResolvers[options.placement]({
 			anchor: options.$anchorMeasurement(),
 			boundary: options.$boundary(),
 			floating: options.$floatingMeasurement()
 		});
 	}, INTERNAL, meta);
-	$placements((p) => p.set(modal.key, $placement));
-	modal.onDispose(() => {
-		$placements((p) => {
-			p.delete(modal.key);
-			return p;
-		});
-	});
-	return $placement;
 }
 
 //#endregion

package/dist/position/withPosition.mjs

@@ -1,12 +1,11 @@
-import { currentModal } from "../createModal.mjs";
-import { $positions, getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp } from "./internals.mjs";
+import { getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp } from "./internals.mjs";
 import { roundByDPR } from "../internals/roundByDPR.mjs";
 import { INTERNAL, memo } from "@monstermann/signals";
+import { width } from "@monstermann/geometry/Rect/width.mjs";
+import { height } from "@monstermann/geometry/Rect/height.mjs";
 import { top } from "@monstermann/geometry/Rect/top.mjs";
 import { left } from "@monstermann/geometry/Rect/left.mjs";
 import { right } from "@monstermann/geometry/Rect/right.mjs";
-import { width } from "@monstermann/geometry/Rect/width.mjs";
-import { height } from "@monstermann/geometry/Rect/height.mjs";
 import { pipe } from "@monstermann/dfdl";
 import { alignCenterX } from "@monstermann/geometry/Rect/alignCenterX.mjs";
 import { snapBelow } from "@monstermann/geometry/Rect/snapBelow.mjs";
@@ -26,7 +25,7 @@ import { snapAbove } from "@monstermann/geometry/Rect/snapAbove.mjs";
 //#region src/position/withPosition.ts
 const meta = {
 	path: "@signals-modal/position/withPosition.ts",
-	line: 378,
+	line: 376,
 	name: "withPosition.$position"
 };
 const positionResolvers = {
@@ -262,8 +261,7 @@ const positionResolvers = {
 *
 */
 function withPosition(options) {
-	const modal = currentModal();
-	const $position = memo(() => {
+	return memo(() => {
 		return positionResolvers[options.$placement()]({
 			anchor: options.$anchorMeasurement(),
 			boundary: options.$boundary(),
@@ -271,14 +269,6 @@ function withPosition(options) {
 			transform: options.transform ?? ((r) => r)
 		});
 	}, INTERNAL, meta);
-	$positions((p) => p.set(modal.key, $position));
-	modal.onDispose(() => {
-		$positions((p) => {
-			p.delete(modal.key);
-			return p;
-		});
-	});
-	return $position;
 }
 
 //#endregion

package/dist/status/internals.mjs

@@ -1,42 +1,15 @@
-import { onModalClosed } from "./onModalClosed.mjs";
-import { onModalOpened } from "./onModalOpened.mjs";
-import { onModalOpening } from "./onModalOpening.mjs";
-import { onModalDisposed } from "../createModal.mjs";
-import { INTERNAL, signal } from "@monstermann/signals";
+import { signal } from "@monstermann/signals";
 
 //#region src/status/internals.ts
-const path = "@signals-modal/status/internals.ts";
 const meta = {
-	path,
-	line: 9,
+	path: "@signals-modal/status/internals.ts",
+	line: 5,
 	name: "$keysToStatus"
 };
-const meta1 = {
-	path,
-	line: 14,
-	name: "$openedModals"
-};
 const $keysToStatus = signal(/* @__PURE__ */ new Map(), {
 	mutable: true,
 	silent: true
 }, meta);
-const $openedModals = signal(/* @__PURE__ */ new Set(), INTERNAL, meta1);
-onModalOpening((key) => $openedModals((m) => add(m, key)));
-onModalOpened((key) => $openedModals((m) => add(m, key)));
-onModalClosed((key) => $openedModals((m) => remove(m, key)));
-onModalDisposed((key) => $openedModals((m) => remove(m, key)));
-function add(set, key) {
-	if (set.has(key)) return set;
-	const clone = new Set(set);
-	clone.add(key);
-	return clone;
-}
-function remove(set, key) {
-	if (!set.has(key)) return set;
-	const clone = new Set(set);
-	clone.delete(key);
-	return clone;
-}
 
 //#endregion
-export { $keysToStatus, $openedModals };
+export { $keysToStatus };

package/dist/status/withModalStatus.mjs

@@ -1,11 +1,11 @@
-import { onModalClosed } from "./onModalClosed.mjs";
-import { onModalOpened } from "./onModalOpened.mjs";
-import { onModalOpening } from "./onModalOpening.mjs";
 import { $keysToStatus } from "./internals.mjs";
 import { closeModal } from "./closeModal.mjs";
+import { onModalClosed } from "./onModalClosed.mjs";
 import { currentModal } from "../createModal.mjs";
 import { isModalOpen } from "./isModalOpen.mjs";
 import { onModalClosing } from "./onModalClosing.mjs";
+import { onModalOpened } from "./onModalOpened.mjs";
+import { onModalOpening } from "./onModalOpening.mjs";
 import { openModal } from "./openModal.mjs";
 import { INTERNAL, memo, signal, watch } from "@monstermann/signals";
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@monstermann/signals-modal",
     "type": "module",
-    "version": "0.5.0",
+    "version": "0.7.0",
     "description": "Composable modal management.",
     "author": "Michael Ostermann <michaelostermann@me.com>",
     "license": "MIT",
@@ -35,7 +35,7 @@
         "@monstermann/dfdl": "^0.1.0",
         "@monstermann/geometry": "^0.4.0",
         "@monstermann/signals": "^0.3.0",
-        "@monstermann/signals-web": "^0.2.4"
+        "@monstermann/signals-web": "^0.3.0"
     },
     "devDependencies": {
         "@monstermann/unplugin-geometry": "^0.4.0",

package/dist/anchor/getAnchorElement.d.mts

@@ -1,34 +0,0 @@
-//#region src/anchor/getAnchorElement.d.ts
-/**
- * # getAnchorElement
- *
- * <Badge type="tip">Reactive</Badge>
- *
- * ```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
- * ```
- *
- */
-declare function getAnchorElement(key: string): HTMLElement | undefined;
-//#endregion
-export { getAnchorElement };

package/dist/anchor/getAnchorElement.mjs

@@ -1,39 +0,0 @@
-import { $anchorElements } from "./internals.mjs";
-
-//#region src/anchor/getAnchorElement.ts
-/**
-* # getAnchorElement
-*
-* <Badge type="tip">Reactive</Badge>
-*
-* ```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
-* ```
-*
-*/
-function getAnchorElement(key) {
-	return $anchorElements().get(key)?.() ?? void 0;
-}
-
-//#endregion
-export { getAnchorElement };

package/dist/anchor/getAnchorMeasurement.d.mts

@@ -1,43 +0,0 @@
-import { Rect } from "@monstermann/geometry";
-
-//#region src/anchor/getAnchorMeasurement.d.ts
-/**
- * # getAnchorMeasurement
- *
- * <Badge type="tip">Reactive</Badge>
- *
- * ```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");
- * ```
- *
- */
-declare function getAnchorMeasurement(key: string): Rect;
-//#endregion
-export { getAnchorMeasurement };

package/dist/anchor/getAnchorMeasurement.mjs

@@ -1,47 +0,0 @@
-import { $anchorMeasurements } from "./internals.mjs";
-import { origin } from "@monstermann/geometry/Rect/origin.mjs";
-
-//#region src/anchor/getAnchorMeasurement.ts
-/**
-* # getAnchorMeasurement
-*
-* <Badge type="tip">Reactive</Badge>
-*
-* ```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");
-* ```
-*
-*/
-function getAnchorMeasurement(key) {
-	return $anchorMeasurements().get(key)?.() ?? origin;
-}
-
-//#endregion
-export { getAnchorMeasurement };

package/dist/anchor/internals.mjs

@@ -1,25 +0,0 @@
-import { signal } from "@monstermann/signals";
-
-//#region src/anchor/internals.ts
-const path = "@signals-modal/anchor/internals.ts";
-const meta = {
-	path,
-	line: 5,
-	name: "$anchorElements"
-};
-const meta1 = {
-	path,
-	line: 10,
-	name: "$anchorMeasurements"
-};
-const $anchorElements = signal(/* @__PURE__ */ new Map(), {
-	mutable: true,
-	silent: true
-}, meta);
-const $anchorMeasurements = signal(/* @__PURE__ */ new Map(), {
-	mutable: true,
-	silent: true
-}, meta1);
-
-//#endregion
-export { $anchorElements, $anchorMeasurements };

package/dist/anchor/setAnchorElement.d.mts

@@ -1,30 +0,0 @@
-//#region src/anchor/setAnchorElement.d.ts
-/**
- * # 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"));
- * ```
- *
- */
-declare function setAnchorElement(key: string, element: HTMLElement | null): void;
-//#endregion
-export { setAnchorElement };

package/dist/anchor/setAnchorElement.mjs

@@ -1,35 +0,0 @@
-import { $anchorElements } from "./internals.mjs";
-
-//#region src/anchor/setAnchorElement.ts
-/**
-* # 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"));
-* ```
-*
-*/
-function setAnchorElement(key, element) {
-	$anchorElements().get(key)?.(element);
-}
-
-//#endregion
-export { setAnchorElement };

package/dist/floating/getFloatingElement.d.mts

@@ -1,34 +0,0 @@
-//#region src/floating/getFloatingElement.d.ts
-/**
- * # getFloatingElement
- *
- * <Badge type="tip">Reactive</Badge>
- *
- * ```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
- * ```
- *
- */
-declare function getFloatingElement(key: string): HTMLElement | undefined;
-//#endregion
-export { getFloatingElement };

package/dist/floating/getFloatingElement.mjs

@@ -1,39 +0,0 @@
-import { $floatingElements } from "./internals.mjs";
-
-//#region src/floating/getFloatingElement.ts
-/**
-* # getFloatingElement
-*
-* <Badge type="tip">Reactive</Badge>
-*
-* ```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
-* ```
-*
-*/
-function getFloatingElement(key) {
-	return $floatingElements().get(key)?.() ?? void 0;
-}
-
-//#endregion
-export { getFloatingElement };

package/dist/floating/getFloatingMeasurement.d.mts

@@ -1,43 +0,0 @@
-import { Rect } from "@monstermann/geometry";
-
-//#region src/floating/getFloatingMeasurement.d.ts
-/**
- * # getFloatingMeasurement
- *
- * <Badge type="tip">Reactive</Badge>
- *
- * ```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");
- * ```
- *
- */
-declare function getFloatingMeasurement(key: string): Rect;
-//#endregion
-export { getFloatingMeasurement };