@monstermann/signals-modal 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Michael Ostermann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+<div align="center">
+
+<h1>signals-modal</h1>
+
+**Composable modal management.**
+
+[Documentation](https://MichaelOstermann.github.io/signals-modal)
+
+</div>

package/dist/anchor/getAnchorElement.d.ts

@@ -0,0 +1,4 @@
+//#region src/anchor/getAnchorElement.d.ts
+declare function getAnchorElement(key: string): HTMLElement | undefined;
+//#endregion
+export { getAnchorElement };

package/dist/anchor/getAnchorElement.js

@@ -0,0 +1,9 @@
+import { $anchorElements } from "./internals.js";
+
+//#region src/anchor/getAnchorElement.ts
+function getAnchorElement(key) {
+	return $anchorElements().get(key)?.() ?? void 0;
+}
+
+//#endregion
+export { getAnchorElement };

package/dist/anchor/getAnchorMeasurement.d.ts

@@ -0,0 +1,6 @@
+import { Rect } from "@monstermann/fn";
+
+//#region src/anchor/getAnchorMeasurement.d.ts
+declare function getAnchorMeasurement(key: string): Rect;
+//#endregion
+export { getAnchorMeasurement };

package/dist/anchor/getAnchorMeasurement.js

@@ -0,0 +1,10 @@
+import { $anchorMeasurements } from "./internals.js";
+import { Rect } from "@monstermann/fn";
+
+//#region src/anchor/getAnchorMeasurement.ts
+function getAnchorMeasurement(key) {
+	return $anchorMeasurements().get(key) ?? Rect.origin;
+}
+
+//#endregion
+export { getAnchorMeasurement };

package/dist/anchor/internals.js

@@ -0,0 +1,19 @@
+import { SILENT, 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: 6,
+	name: "$anchorMeasurements"
+};
+const $anchorElements = signal(/* @__PURE__ */ new Map(), SILENT, meta);
+const $anchorMeasurements = signal(/* @__PURE__ */ new Map(), SILENT, meta1);
+
+//#endregion
+export { $anchorElements, $anchorMeasurements };

package/dist/anchor/setAnchorElement.d.ts

@@ -0,0 +1,4 @@
+//#region src/anchor/setAnchorElement.d.ts
+declare function setAnchorElement(key: string, element: HTMLElement | null): void;
+//#endregion
+export { setAnchorElement };

package/dist/anchor/setAnchorElement.js

@@ -0,0 +1,9 @@
+import { $anchorElements } from "./internals.js";
+
+//#region src/anchor/setAnchorElement.ts
+function setAnchorElement(key, element) {
+	$anchorElements().get(key)?.(element);
+}
+
+//#endregion
+export { setAnchorElement };

package/dist/anchor/withAnchorElement.d.ts

@@ -0,0 +1,6 @@
+import { Signal } from "@monstermann/signals";
+
+//#region src/anchor/withAnchorElement.d.ts
+declare function withAnchorElement(anchorElement?: HTMLElement): Signal<HTMLElement | null>;
+//#endregion
+export { withAnchorElement };

package/dist/anchor/withAnchorElement.js

@@ -0,0 +1,32 @@
+import { $anchorElements } from "./internals.js";
+import { set } from "../node_modules/@monstermann/map/dist/Map/set.js";
+import { remove } from "../node_modules/@monstermann/map/dist/Map/remove.js";
+import { currentModal } from "../createModal.js";
+import { INTERNAL, effect, signal } from "@monstermann/signals";
+
+//#region src/anchor/withAnchorElement.ts
+const path = "@signals-modal/anchor/withAnchorElement.ts";
+const meta = {
+	path,
+	line: 10,
+	name: "withAnchorElement.$anchorElement"
+};
+const meta1 = {
+	path,
+	line: 12,
+	name: "withAnchorElement"
+};
+function withAnchorElement(anchorElement) {
+	const modal = currentModal();
+	const $anchorElement = signal(anchorElement ?? null, INTERNAL, meta);
+	modal.onDispose(effect(() => {
+		$anchorElements((map) => set(map, modal.key, $anchorElement));
+	}, INTERNAL, meta1));
+	modal.onDispose(() => {
+		$anchorElements((map) => remove(map, modal.key));
+	});
+	return $anchorElement;
+}
+
+//#endregion
+export { withAnchorElement };

package/dist/anchor/withAnchorMeasurement.d.ts

@@ -0,0 +1,12 @@
+import { ModalStatus } from "../status/types.js";
+import { Memo, Reactive } from "@monstermann/signals";
+import { Rect } from "@monstermann/fn";
+
+//#region src/anchor/withAnchorMeasurement.d.ts
+declare function withAnchorMeasurement(options: {
+  $anchorElement: Reactive<HTMLElement | null>;
+  $status: Reactive<ModalStatus>;
+  transform?: (rect: Rect) => Rect;
+}): Memo<Rect>;
+//#endregion
+export { withAnchorMeasurement };

package/dist/anchor/withAnchorMeasurement.js

@@ -0,0 +1,56 @@
+import { $anchorMeasurements } from "./internals.js";
+import { set } from "../node_modules/@monstermann/map/dist/Map/set.js";
+import { remove } from "../node_modules/@monstermann/map/dist/Map/remove.js";
+import { currentModal } from "../createModal.js";
+import { observePosition } from "../internals/observePosition.js";
+import { INTERNAL, effect, memo, signal } from "@monstermann/signals";
+import { Rect } from "@monstermann/fn";
+
+//#region src/anchor/withAnchorMeasurement.ts
+const path = "@signals-modal/anchor/withAnchorMeasurement.ts";
+const meta = {
+	path,
+	line: 19,
+	name: "withAnchorMeasurement.$rect"
+};
+const meta1 = {
+	path,
+	line: 24,
+	name: "withAnchorMeasurement.$measurement"
+};
+const meta2 = {
+	path,
+	line: 28,
+	name: "withAnchorMeasurement"
+};
+const meta3 = {
+	path,
+	line: 37,
+	name: "withAnchorMeasurement"
+};
+function withAnchorMeasurement(options) {
+	const modal = currentModal();
+	const $rect = signal(Rect.origin, {
+		equals: Rect.isEqual,
+		internal: true
+	}, meta);
+	const $measurement = memo(() => options.transform ? options.transform($rect()) : $rect(), INTERNAL, meta1);
+	modal.onDispose(effect(() => {
+		const element = options.$anchorElement();
+		const status = options.$status();
+		if (!element) return;
+		if (status === "closed") return;
+		$rect(Rect.fromElement(element));
+		return observePosition(element, (bounds) => $rect(Rect.fromDOMRect(bounds)));
+	}, INTERNAL, meta2));
+	modal.onDispose(effect(() => {
+		$anchorMeasurements((map) => set(map, modal.key, $rect()));
+	}, INTERNAL, meta3));
+	modal.onDispose(() => {
+		$anchorMeasurements((map) => remove(map, modal.key));
+	});
+	return $measurement;
+}
+
+//#endregion
+export { withAnchorMeasurement };

package/dist/anchor/withMouseAnchor.d.ts

@@ -0,0 +1,11 @@
+import { ModalStatus } from "../status/types.js";
+import { Memo, Reactive } from "@monstermann/signals";
+import { Rect } from "@monstermann/fn";
+
+//#region src/anchor/withMouseAnchor.d.ts
+declare function withMouseAnchor(options: {
+  $status: Reactive<ModalStatus>;
+  transform?: (rect: Rect) => Rect;
+}): Memo<Rect>;
+//#endregion
+export { withMouseAnchor };

package/dist/anchor/withMouseAnchor.js

@@ -0,0 +1,57 @@
+import { $anchorMeasurements } from "./internals.js";
+import { set } from "../node_modules/@monstermann/map/dist/Map/set.js";
+import { remove } from "../node_modules/@monstermann/map/dist/Map/remove.js";
+import { currentModal } from "../createModal.js";
+import { INTERNAL, effect, memo, peek, signal } from "@monstermann/signals";
+import { Rect } from "@monstermann/fn";
+import { $mouseX, $mouseY } from "@monstermann/signals-web";
+
+//#region src/anchor/withMouseAnchor.ts
+const path = "@signals-modal/anchor/withMouseAnchor.ts";
+const meta = {
+	path,
+	line: 18,
+	name: "withMouseAnchor.$rect"
+};
+const meta1 = {
+	path,
+	line: 23,
+	name: "withMouseAnchor.$measurement"
+};
+const meta2 = {
+	path,
+	line: 27,
+	name: "withMouseAnchor"
+};
+const meta3 = {
+	path,
+	line: 41,
+	name: "withMouseAnchor"
+};
+function withMouseAnchor(options) {
+	const modal = currentModal();
+	const $rect = signal(Rect.origin, {
+		equals: Rect.isEqual,
+		internal: true
+	}, meta);
+	const $measurement = memo(() => options.transform ? options.transform($rect()) : $rect(), INTERNAL, meta1);
+	modal.onDispose(effect(() => {
+		if (options.$status() === "closed") $rect(Rect.origin);
+		else if (Rect.isOrigin($rect())) $rect({
+			height: 0,
+			left: peek($mouseX()),
+			top: peek($mouseY()),
+			width: 0
+		});
+	}, INTERNAL, meta2));
+	modal.onDispose(effect(() => {
+		$anchorMeasurements((map) => set(map, modal.key, $rect()));
+	}, INTERNAL, meta3));
+	modal.onDispose(() => {
+		$anchorMeasurements((map) => remove(map, modal.key));
+	});
+	return $measurement;
+}
+
+//#endregion
+export { withMouseAnchor };

package/dist/createModal.d.ts

@@ -0,0 +1,14 @@
+import * as _monstermann_signals0 from "@monstermann/signals";
+import { MaybeDispose } from "@monstermann/signals";
+
+//#region src/createModal.d.ts
+interface ModalContext {
+  key: string;
+  dispose: () => void;
+  onDispose: (dispose: MaybeDispose) => void;
+}
+declare const onModalDisposed: _monstermann_signals0.Emitter<string>;
+declare function currentModal(): ModalContext;
+declare function createModal<T extends object>(key: string, setup: () => T): ModalContext & T;
+//#endregion
+export { ModalContext, createModal, currentModal, onModalDisposed };

package/dist/createModal.js

@@ -0,0 +1,47 @@
+import { onModalClosed } from "./status/onModalClosed.js";
+import { closeModal } from "./status/closeModal.js";
+import { isModalClosed } from "./status/isModalClosed.js";
+import { SILENT, context, disposer, emitter } from "@monstermann/signals";
+
+//#region src/createModal.ts
+const meta = {
+	path: "@signals-modal/createModal.ts",
+	line: 15,
+	name: "onModalDisposed"
+};
+const modalCtx = context();
+const onModalDisposed = emitter(SILENT, meta);
+function currentModal() {
+	const ctx = modalCtx();
+	if (!ctx) throw new Error("`currentModal` called outside of `createModal` context.");
+	return ctx;
+}
+function createModal(key, setup) {
+	const dispose = disposer();
+	const nextCtx = {
+		key,
+		onDispose: dispose,
+		dispose() {
+			if (isModalClosed(key)) {
+				dispose();
+				onModalDisposed(key);
+			} else {
+				onModalClosed((k) => k === key && this.dispose());
+				closeModal(key);
+			}
+		}
+	};
+	const prevCtx = modalCtx(nextCtx);
+	try {
+		const result = setup();
+		return {
+			...nextCtx,
+			...result
+		};
+	} finally {
+		modalCtx(prevCtx);
+	}
+}
+
+//#endregion
+export { createModal, currentModal, onModalDisposed };

package/dist/floating/getFloatingElement.d.ts

@@ -0,0 +1,4 @@
+//#region src/floating/getFloatingElement.d.ts
+declare function getFloatingElement(key: string): HTMLElement | undefined;
+//#endregion
+export { getFloatingElement };

package/dist/floating/getFloatingElement.js

@@ -0,0 +1,9 @@
+import { $floatingElements } from "./internals.js";
+
+//#region src/floating/getFloatingElement.ts
+function getFloatingElement(key) {
+	return $floatingElements().get(key)?.() ?? void 0;
+}
+
+//#endregion
+export { getFloatingElement };

package/dist/floating/getFloatingMeasurement.d.ts

@@ -0,0 +1,6 @@
+import { Rect } from "@monstermann/fn";
+
+//#region src/floating/getFloatingMeasurement.d.ts
+declare function getFloatingMeasurement(key: string): Rect;
+//#endregion
+export { getFloatingMeasurement };

package/dist/floating/getFloatingMeasurement.js

@@ -0,0 +1,10 @@
+import { $floatingMeasurements } from "./internals.js";
+import { Rect } from "@monstermann/fn";
+
+//#region src/floating/getFloatingMeasurement.ts
+function getFloatingMeasurement(key) {
+	return $floatingMeasurements().get(key) ?? Rect.origin;
+}
+
+//#endregion
+export { getFloatingMeasurement };

package/dist/floating/internals.js

@@ -0,0 +1,19 @@
+import { SILENT, 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: 6,
+	name: "$floatingMeasurements"
+};
+const $floatingElements = signal(/* @__PURE__ */ new Map(), SILENT, meta);
+const $floatingMeasurements = signal(/* @__PURE__ */ new Map(), SILENT, meta1);
+
+//#endregion
+export { $floatingElements, $floatingMeasurements };

package/dist/floating/setFloatingElement.d.ts

@@ -0,0 +1,4 @@
+//#region src/floating/setFloatingElement.d.ts
+declare function setFloatingElement(key: string, element: HTMLElement | null): void;
+//#endregion
+export { setFloatingElement };

package/dist/floating/setFloatingElement.js

@@ -0,0 +1,9 @@
+import { $floatingElements } from "./internals.js";
+
+//#region src/floating/setFloatingElement.ts
+function setFloatingElement(key, element) {
+	$floatingElements().get(key)?.(element);
+}
+
+//#endregion
+export { setFloatingElement };

package/dist/floating/withFloatingElement.d.ts

@@ -0,0 +1,6 @@
+import { Signal } from "@monstermann/signals";
+
+//#region src/floating/withFloatingElement.d.ts
+declare function withFloatingElement(anchorElement?: HTMLElement): Signal<HTMLElement | null>;
+//#endregion
+export { withFloatingElement };

package/dist/floating/withFloatingElement.js

@@ -0,0 +1,32 @@
+import { set } from "../node_modules/@monstermann/map/dist/Map/set.js";
+import { remove } from "../node_modules/@monstermann/map/dist/Map/remove.js";
+import { currentModal } from "../createModal.js";
+import { $floatingElements } from "./internals.js";
+import { INTERNAL, effect, signal } from "@monstermann/signals";
+
+//#region src/floating/withFloatingElement.ts
+const path = "@signals-modal/floating/withFloatingElement.ts";
+const meta = {
+	path,
+	line: 10,
+	name: "withFloatingElement.$anchorElement"
+};
+const meta1 = {
+	path,
+	line: 12,
+	name: "withFloatingElement"
+};
+function withFloatingElement(anchorElement) {
+	const modal = currentModal();
+	const $anchorElement = signal(anchorElement ?? null, INTERNAL, meta);
+	modal.onDispose(effect(() => {
+		$floatingElements((map) => set(map, modal.key, $anchorElement));
+	}, INTERNAL, meta1));
+	modal.onDispose(() => {
+		$floatingElements((map) => remove(map, modal.key));
+	});
+	return $anchorElement;
+}
+
+//#endregion
+export { withFloatingElement };

package/dist/floating/withFloatingMeasurement.d.ts

@@ -0,0 +1,12 @@
+import { ModalStatus } from "../status/types.js";
+import { Memo, Reactive } from "@monstermann/signals";
+import { Rect } from "@monstermann/fn";
+
+//#region src/floating/withFloatingMeasurement.d.ts
+declare function withFloatingMeasurement(options: {
+  $floatingElement: Reactive<HTMLElement | null>;
+  $status: Reactive<ModalStatus>;
+  transform?: (rect: Rect) => Rect;
+}): Memo<Rect>;
+//#endregion
+export { withFloatingMeasurement };

package/dist/floating/withFloatingMeasurement.js

@@ -0,0 +1,67 @@
+import { set } from "../node_modules/@monstermann/map/dist/Map/set.js";
+import { remove } from "../node_modules/@monstermann/map/dist/Map/remove.js";
+import { currentModal } from "../createModal.js";
+import { $floatingMeasurements } from "./internals.js";
+import { observeDimensions } from "../internals/observeDimensions.js";
+import { INTERNAL, effect, memo, signal } from "@monstermann/signals";
+import { Rect } from "@monstermann/fn";
+
+//#region src/floating/withFloatingMeasurement.ts
+const path = "@signals-modal/floating/withFloatingMeasurement.ts";
+const meta = {
+	path,
+	line: 19,
+	name: "withFloatingMeasurement.$rect"
+};
+const meta1 = {
+	path,
+	line: 24,
+	name: "withFloatingMeasurement.$measurement"
+};
+const meta2 = {
+	path,
+	line: 28,
+	name: "withFloatingMeasurement"
+};
+const meta3 = {
+	path,
+	line: 48,
+	name: "withFloatingMeasurement"
+};
+function withFloatingMeasurement(options) {
+	const modal = currentModal();
+	const $rect = signal(Rect.origin, {
+		equals: Rect.isEqual,
+		internal: true
+	}, meta);
+	const $measurement = memo(() => options.transform ? options.transform($rect()) : $rect(), INTERNAL, meta1);
+	modal.onDispose(effect(() => {
+		const element = options.$floatingElement();
+		const status = options.$status();
+		if (!element) return;
+		if (status === "closed") return;
+		const bounds = Rect.fromElement(element);
+		$rect({
+			height: bounds.height,
+			left: 0,
+			top: 0,
+			width: bounds.width
+		});
+		return observeDimensions(element, (bounds$1) => $rect({
+			height: bounds$1.height,
+			left: 0,
+			top: 0,
+			width: bounds$1.width
+		}));
+	}, INTERNAL, meta2));
+	modal.onDispose(effect(() => {
+		$floatingMeasurements((map) => set(map, modal.key, $rect()));
+	}, INTERNAL, meta3));
+	modal.onDispose(() => {
+		$floatingMeasurements((map) => remove(map, modal.key));
+	});
+	return $measurement;
+}
+
+//#endregion
+export { withFloatingMeasurement };

package/dist/groups/getDialogs.d.ts

@@ -0,0 +1,4 @@
+//#region src/groups/getDialogs.d.ts
+declare function getDialogs(): ReadonlySet<string>;
+//#endregion
+export { getDialogs };

package/dist/groups/getDialogs.js

@@ -0,0 +1,10 @@
+import { getModalsForGroup } from "./getModalsForGroup.js";
+import { modalGroups } from "./modalGroups.js";
+
+//#region src/groups/getDialogs.ts
+function getDialogs() {
+	return getModalsForGroup(modalGroups.dialog);
+}
+
+//#endregion
+export { getDialogs };

package/dist/groups/getGroupsForModal.d.ts

@@ -0,0 +1,4 @@
+//#region src/groups/getGroupsForModal.d.ts
+declare function getGroupsForModal(key: string): ReadonlySet<string>;
+//#endregion
+export { getGroupsForModal };

package/dist/groups/getGroupsForModal.js

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

package/dist/groups/getModalsForGroup.d.ts

@@ -0,0 +1,4 @@
+//#region src/groups/getModalsForGroup.d.ts
+declare function getModalsForGroup(group: string): ReadonlySet<string>;
+//#endregion
+export { getModalsForGroup };

package/dist/groups/getModalsForGroup.js

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

package/dist/groups/getPopovers.d.ts

@@ -0,0 +1,4 @@
+//#region src/groups/getPopovers.d.ts
+declare function getPopovers(): ReadonlySet<string>;
+//#endregion
+export { getPopovers };

package/dist/groups/getPopovers.js

@@ -0,0 +1,10 @@
+import { getModalsForGroup } from "./getModalsForGroup.js";
+import { modalGroups } from "./modalGroups.js";
+
+//#region src/groups/getPopovers.ts
+function getPopovers() {
+	return getModalsForGroup(modalGroups.popover);
+}
+
+//#endregion
+export { getPopovers };

package/dist/groups/getTooltips.d.ts

@@ -0,0 +1,4 @@
+//#region src/groups/getTooltips.d.ts
+declare function getTooltips(): ReadonlySet<string>;
+//#endregion
+export { getTooltips };

package/dist/groups/getTooltips.js

@@ -0,0 +1,10 @@
+import { getModalsForGroup } from "./getModalsForGroup.js";
+import { modalGroups } from "./modalGroups.js";
+
+//#region src/groups/getTooltips.ts
+function getTooltips() {
+	return getModalsForGroup(modalGroups.tooltip);
+}
+
+//#endregion
+export { getTooltips };

package/dist/groups/internals.js

@@ -0,0 +1,26 @@
+import { INTERNAL, SILENT, memo, signal } from "@monstermann/signals";
+
+//#region src/groups/internals.ts
+const path = "@signals-modal/groups/internals.ts";
+const meta = {
+	path,
+	line: 3,
+	name: "$keysToGroups"
+};
+const meta1 = {
+	path,
+	line: 5,
+	name: "$groupsToKeys"
+};
+const $keysToGroups = signal(/* @__PURE__ */ new Map(), SILENT, meta);
+const $groupsToKeys = memo(() => {
+	const map = /* @__PURE__ */ new Map();
+	for (const [key, groups] of $keysToGroups()) for (const group of groups) {
+		if (!map.has(group)) map.set(group, /* @__PURE__ */ new Set());
+		map.get(group).add(key);
+	}
+	return map;
+}, INTERNAL, meta1);
+
+//#endregion
+export { $groupsToKeys, $keysToGroups };