@monstermann/signals-modal 0.5.0 → 0.7.0

package/dist/floating/getFloatingMeasurement.mjs

@@ -1,47 +0,0 @@
-import { $floatingMeasurements } from "./internals.mjs";
-import { origin } from "@monstermann/geometry/Rect/origin.mjs";
-
-//#region src/floating/getFloatingMeasurement.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");
-* ```
-*
-*/
-function getFloatingMeasurement(key) {
-	return $floatingMeasurements().get(key)?.() ?? origin;
-}
-
-//#endregion
-export { getFloatingMeasurement };

package/dist/floating/internals.mjs

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

package/dist/floating/setFloatingElement.d.mts

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

package/dist/floating/setFloatingElement.mjs

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

package/dist/internals/findParentElement.mjs

@@ -1,9 +0,0 @@
-//#region src/internals/findParentElement.ts
-function findParentElement(element, predicate) {
-	if (!element) return void 0;
-	if (predicate(element)) return element;
-	return findParentElement(element.parentElement, predicate);
-}
-
-//#endregion
-export { findParentElement };

package/dist/position/getModalPlacement.d.mts

@@ -1,55 +0,0 @@
-import { ModalPlacement } from "./withPlacement.mjs";
-
-//#region src/position/getModalPlacement.d.ts
-/**
- * # 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
- * ```
- *
- */
-declare function getModalPlacement(key: string): ModalPlacement | undefined;
-//#endregion
-export { getModalPlacement };

package/dist/position/getModalPlacement.mjs

@@ -1,58 +0,0 @@
-import { $placements } from "./internals.mjs";
-
-//#region src/position/getModalPlacement.ts
-/**
-* # 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
-* ```
-*
-*/
-function getModalPlacement(key) {
-	return $placements().get(key)?.();
-}
-
-//#endregion
-export { getModalPlacement };

package/dist/position/getModalPosition.d.mts

@@ -1,64 +0,0 @@
-import { ModalPosition } from "./withPosition.mjs";
-
-//#region src/position/getModalPosition.d.ts
-/**
- * # getModalPosition
- *
- * <Badge type="tip">Reactive</Badge>
- *
- * ```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
- * ```
- *
- */
-declare function getModalPosition(key: string): ModalPosition | undefined;
-//#endregion
-export { getModalPosition };

package/dist/position/getModalPosition.mjs

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

package/dist/status/closeLastModal.d.mts

@@ -1,22 +0,0 @@
-//#region src/status/closeLastModal.d.ts
-/**
- * # 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();
- * ```
- *
- */
-declare function closeLastModal(): void;
-//#endregion
-export { closeLastModal };

package/dist/status/closeLastModal.mjs

@@ -1,29 +0,0 @@
-import { $openedModals } from "./internals.mjs";
-import { closeModal } from "./closeModal.mjs";
-
-//#region src/status/closeLastModal.ts
-/**
-* # 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();
-* ```
-*
-*/
-function closeLastModal() {
-	const key = Array.from($openedModals()).at(-1);
-	if (key) closeModal(key);
-}
-
-//#endregion
-export { closeLastModal };

package/dist/utils/closeLastModalOnClickOutside.d.mts

@@ -1,22 +0,0 @@
-//#region src/utils/closeLastModalOnClickOutside.d.ts
-/**
- * # 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();
- * ```
- *
- */
-declare function closeLastModalOnClickOutside(): void;
-//#endregion
-export { closeLastModalOnClickOutside };

package/dist/utils/closeLastModalOnClickOutside.mjs

@@ -1,37 +0,0 @@
-import { $openedModals } from "../status/internals.mjs";
-import { closeModal } from "../status/closeModal.mjs";
-import { getFloatingElement } from "../floating/getFloatingElement.mjs";
-import { findParentElement } from "../internals/findParentElement.mjs";
-
-//#region src/utils/closeLastModalOnClickOutside.ts
-/**
-* # 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();
-* ```
-*
-*/
-function closeLastModalOnClickOutside() {
-	document.addEventListener("mousedown", (evt) => {
-		const key = Array.from($openedModals()).at(-1);
-		if (!key) return;
-		const target = evt.target;
-		const floating = getFloatingElement(key);
-		if (!floating) return;
-		if (!findParentElement(target, (el) => el === floating)) closeModal(key);
-	});
-}
-
-//#endregion
-export { closeLastModalOnClickOutside };

package/dist/utils/closeLastModalOnEsc.d.mts

@@ -1,22 +0,0 @@
-//#region src/utils/closeLastModalOnEsc.d.ts
-/**
- * # 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();
- * ```
- *
- */
-declare function closeLastModalOnEsc(): void;
-//#endregion
-export { closeLastModalOnEsc };

package/dist/utils/closeLastModalOnEsc.mjs

@@ -1,35 +0,0 @@
-import { $openedModals } from "../status/internals.mjs";
-import { closeModal } from "../status/closeModal.mjs";
-import { findParentElement } from "../internals/findParentElement.mjs";
-
-//#region src/utils/closeLastModalOnEsc.ts
-/**
-* # 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();
-* ```
-*
-*/
-function closeLastModalOnEsc() {
-	document.addEventListener("keydown", (evt) => {
-		if (evt.key !== "Escape") return;
-		const key = Array.from($openedModals()).at(-1);
-		if (!key) return;
-		const target = evt.target;
-		if (!(target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || findParentElement(target, (el) => el.getAttribute("contenteditable") === "true"))) closeModal(key);
-	});
-}
-
-//#endregion
-export { closeLastModalOnEsc };

package/dist/utils/syncModalGroupsToBody.d.mts

@@ -1,41 +0,0 @@
-//#region src/utils/syncModalGroupsToBody.d.ts
-/**
- * # 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; // []
- * ```
- *
- */
-declare function syncModalGroupsToBody(): void;
-//#endregion
-export { syncModalGroupsToBody };

package/dist/utils/syncModalGroupsToBody.mjs

@@ -1,72 +0,0 @@
-import { getGroupsForModal } from "../groups/getGroupsForModal.mjs";
-import { getVisibleModals } from "../status/getVisibleModals.mjs";
-import { INTERNAL, effect, memo } from "@monstermann/signals";
-
-//#region src/utils/syncModalGroupsToBody.ts
-const path = "@signals-modal/utils/syncModalGroupsToBody.ts";
-const meta = {
-	path,
-	line: 5,
-	name: "$classes"
-};
-const meta1 = {
-	path,
-	line: 54,
-	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);
-/**
-* # 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; // []
-* ```
-*
-*/
-function syncModalGroupsToBody() {
-	effect(() => {
-		if (!$classes()) return;
-		const classes = $classes().split(" ");
-		document.body.classList.add(...classes);
-		return () => {
-			document.body.classList.remove(...classes);
-		};
-	}, INTERNAL, meta1);
-}
-
-//#endregion
-export { syncModalGroupsToBody };