@monstermann/signals-modal 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +0 -377
  2. package/dist/anchor/withAnchorElement.mjs +2 -13
  3. package/dist/anchor/withAnchorMeasurement.mjs +3 -11
  4. package/dist/anchor/withMouseAnchor.mjs +3 -11
  5. package/dist/createModal.mjs +1 -1
  6. package/dist/floating/withFloatingElement.mjs +2 -13
  7. package/dist/floating/withFloatingMeasurement.mjs +3 -11
  8. package/dist/index.d.mts +2 -14
  9. package/dist/index.mjs +5 -17
  10. package/dist/position/internals.mjs +1 -21
  11. package/dist/position/withPlacement.mjs +3 -13
  12. package/dist/position/withPosition.mjs +5 -15
  13. package/dist/status/internals.mjs +4 -31
  14. package/dist/status/withModalStatus.mjs +3 -3
  15. package/package.json +1 -1
  16. package/dist/anchor/getAnchorElement.d.mts +0 -34
  17. package/dist/anchor/getAnchorElement.mjs +0 -39
  18. package/dist/anchor/getAnchorMeasurement.d.mts +0 -43
  19. package/dist/anchor/getAnchorMeasurement.mjs +0 -47
  20. package/dist/anchor/internals.mjs +0 -25
  21. package/dist/anchor/setAnchorElement.d.mts +0 -30
  22. package/dist/anchor/setAnchorElement.mjs +0 -35
  23. package/dist/floating/getFloatingElement.d.mts +0 -34
  24. package/dist/floating/getFloatingElement.mjs +0 -39
  25. package/dist/floating/getFloatingMeasurement.d.mts +0 -43
  26. package/dist/floating/getFloatingMeasurement.mjs +0 -47
  27. package/dist/floating/internals.mjs +0 -25
  28. package/dist/floating/setFloatingElement.d.mts +0 -30
  29. package/dist/floating/setFloatingElement.mjs +0 -35
  30. package/dist/internals/findParentElement.mjs +0 -9
  31. package/dist/position/getModalPlacement.d.mts +0 -55
  32. package/dist/position/getModalPlacement.mjs +0 -58
  33. package/dist/position/getModalPosition.d.mts +0 -64
  34. package/dist/position/getModalPosition.mjs +0 -67
  35. package/dist/status/closeLastModal.d.mts +0 -22
  36. package/dist/status/closeLastModal.mjs +0 -29
  37. package/dist/utils/closeLastModalOnClickOutside.d.mts +0 -22
  38. package/dist/utils/closeLastModalOnClickOutside.mjs +0 -37
  39. package/dist/utils/closeLastModalOnEsc.d.mts +0 -22
  40. package/dist/utils/closeLastModalOnEsc.mjs +0 -35
  41. package/dist/utils/syncModalGroupsToBody.d.mts +0 -41
  42. package/dist/utils/syncModalGroupsToBody.mjs +0 -72
package/dist/index.mjs CHANGED
@@ -1,18 +1,10 @@
1
- import { getAnchorElement } from "./anchor/getAnchorElement.mjs";
2
- import { getAnchorMeasurement } from "./anchor/getAnchorMeasurement.mjs";
3
- import { setAnchorElement } from "./anchor/setAnchorElement.mjs";
4
- import { onModalClosed } from "./status/onModalClosed.mjs";
5
- import { onModalOpened } from "./status/onModalOpened.mjs";
6
- import { onModalOpening } from "./status/onModalOpening.mjs";
1
+ import { withAnchorElement } from "./anchor/withAnchorElement.mjs";
7
2
  import { closeModal } from "./status/closeModal.mjs";
8
3
  import { isModalClosed } from "./status/isModalClosed.mjs";
4
+ import { onModalClosed } from "./status/onModalClosed.mjs";
9
5
  import { createModal, currentModal, onModalDisposed } from "./createModal.mjs";
10
- import { withAnchorElement } from "./anchor/withAnchorElement.mjs";
11
6
  import { withAnchorMeasurement } from "./anchor/withAnchorMeasurement.mjs";
12
7
  import { withMouseAnchor } from "./anchor/withMouseAnchor.mjs";
13
- import { getFloatingElement } from "./floating/getFloatingElement.mjs";
14
- import { getFloatingMeasurement } from "./floating/getFloatingMeasurement.mjs";
15
- import { setFloatingElement } from "./floating/setFloatingElement.mjs";
16
8
  import { withFloatingElement } from "./floating/withFloatingElement.mjs";
17
9
  import { withFloatingMeasurement } from "./floating/withFloatingMeasurement.mjs";
18
10
  import { getModalsForGroup } from "./groups/getModalsForGroup.mjs";
@@ -26,14 +18,11 @@ import { isModalInGroup } from "./groups/isModalInGroup.mjs";
26
18
  import { isPopover } from "./groups/isPopover.mjs";
27
19
  import { isTooltip } from "./groups/isTooltip.mjs";
28
20
  import { withModalGroups } from "./groups/withModalGroups.mjs";
29
- import { getModalPlacement } from "./position/getModalPlacement.mjs";
30
- import { getModalPosition } from "./position/getModalPosition.mjs";
31
21
  import { withBoundary } from "./position/withBoundary.mjs";
32
22
  import { withPlacement } from "./position/withPlacement.mjs";
33
23
  import { withPosition } from "./position/withPosition.mjs";
34
24
  import { withCloseOnScroll } from "./scroll/withCloseOnScroll.mjs";
35
25
  import { closeAllModals } from "./status/closeAllModals.mjs";
36
- import { closeLastModal } from "./status/closeLastModal.mjs";
37
26
  import { getClosedModals } from "./status/getClosedModals.mjs";
38
27
  import { getClosingModals } from "./status/getClosingModals.mjs";
39
28
  import { getModalStatus } from "./status/getModalStatus.mjs";
@@ -53,11 +42,10 @@ import { isModalOpening } from "./status/isModalOpening.mjs";
53
42
  import { isModalOpen } from "./status/isModalOpen.mjs";
54
43
  import { isModalVisible } from "./status/isModalVisible.mjs";
55
44
  import { onModalClosing } from "./status/onModalClosing.mjs";
45
+ import { onModalOpened } from "./status/onModalOpened.mjs";
46
+ import { onModalOpening } from "./status/onModalOpening.mjs";
56
47
  import { openModal } from "./status/openModal.mjs";
57
48
  import { setModalStatus } from "./status/setModalStatus.mjs";
58
49
  import { withModalStatus } from "./status/withModalStatus.mjs";
59
- import { closeLastModalOnClickOutside } from "./utils/closeLastModalOnClickOutside.mjs";
60
- import { closeLastModalOnEsc } from "./utils/closeLastModalOnEsc.mjs";
61
- import { syncModalGroupsToBody } from "./utils/syncModalGroupsToBody.mjs";
62
50
 
63
- 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 };
51
+ 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 };
@@ -1,4 +1,3 @@
1
- import { signal } from "@monstermann/signals";
2
1
  import { setBottom } from "@monstermann/geometry/Rect/setBottom.mjs";
3
2
  import { top } from "@monstermann/geometry/Rect/top.mjs";
4
3
  import { setTop } from "@monstermann/geometry/Rect/setTop.mjs";
@@ -9,25 +8,6 @@ import { setLeft } from "@monstermann/geometry/Rect/setLeft.mjs";
9
8
  import { right } from "@monstermann/geometry/Rect/right.mjs";
10
9
 
11
10
  //#region src/position/internals.ts
12
- const path = "@signals-modal/position/internals.ts";
13
- const meta = {
14
- path,
15
- line: 14,
16
- name: "$positions"
17
- };
18
- const meta1 = {
19
- path,
20
- line: 19,
21
- name: "$placements"
22
- };
23
- const $positions = signal(/* @__PURE__ */ new Map(), {
24
- mutable: true,
25
- silent: true
26
- }, meta);
27
- const $placements = signal(/* @__PURE__ */ new Map(), {
28
- mutable: true,
29
- silent: true
30
- }, meta1);
31
11
  function getBoundaryUp(boundary, anchor) {
32
12
  return setBottom(boundary, top(anchor));
33
13
  }
@@ -42,4 +22,4 @@ function getBoundaryRight(boundary, anchor) {
42
22
  }
43
23
 
44
24
  //#endregion
45
- export { $placements, $positions, getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp };
25
+ export { getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp };
@@ -1,5 +1,4 @@
1
- import { currentModal } from "../createModal.mjs";
2
- import { $placements, getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp } from "./internals.mjs";
1
+ import { getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp } from "./internals.mjs";
3
2
  import { INTERNAL, memo } from "@monstermann/signals";
4
3
  import { width } from "@monstermann/geometry/Rect/width.mjs";
5
4
  import { height } from "@monstermann/geometry/Rect/height.mjs";
@@ -7,7 +6,7 @@ import { height } from "@monstermann/geometry/Rect/height.mjs";
7
6
  //#region src/position/withPlacement.ts
8
7
  const meta = {
9
8
  path: "@signals-modal/position/withPlacement.ts",
10
- line: 174,
9
+ line: 172,
11
10
  name: "withPlacement.$placement"
12
11
  };
13
12
  const placementResolvers = {
@@ -118,22 +117,13 @@ const placementResolvers = {
118
117
  *
119
118
  */
120
119
  function withPlacement(options) {
121
- const modal = currentModal();
122
- const $placement = memo(() => {
120
+ return memo(() => {
123
121
  return placementResolvers[options.placement]({
124
122
  anchor: options.$anchorMeasurement(),
125
123
  boundary: options.$boundary(),
126
124
  floating: options.$floatingMeasurement()
127
125
  });
128
126
  }, INTERNAL, meta);
129
- $placements((p) => p.set(modal.key, $placement));
130
- modal.onDispose(() => {
131
- $placements((p) => {
132
- p.delete(modal.key);
133
- return p;
134
- });
135
- });
136
- return $placement;
137
127
  }
138
128
 
139
129
  //#endregion
@@ -1,12 +1,11 @@
1
- import { currentModal } from "../createModal.mjs";
2
- import { $positions, getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp } from "./internals.mjs";
1
+ import { getBoundaryDown, getBoundaryLeft, getBoundaryRight, getBoundaryUp } from "./internals.mjs";
3
2
  import { roundByDPR } from "../internals/roundByDPR.mjs";
4
3
  import { INTERNAL, memo } from "@monstermann/signals";
4
+ import { width } from "@monstermann/geometry/Rect/width.mjs";
5
+ import { height } from "@monstermann/geometry/Rect/height.mjs";
5
6
  import { top } from "@monstermann/geometry/Rect/top.mjs";
6
7
  import { left } from "@monstermann/geometry/Rect/left.mjs";
7
8
  import { right } from "@monstermann/geometry/Rect/right.mjs";
8
- import { width } from "@monstermann/geometry/Rect/width.mjs";
9
- import { height } from "@monstermann/geometry/Rect/height.mjs";
10
9
  import { pipe } from "@monstermann/dfdl";
11
10
  import { alignCenterX } from "@monstermann/geometry/Rect/alignCenterX.mjs";
12
11
  import { snapBelow } from "@monstermann/geometry/Rect/snapBelow.mjs";
@@ -26,7 +25,7 @@ import { snapAbove } from "@monstermann/geometry/Rect/snapAbove.mjs";
26
25
  //#region src/position/withPosition.ts
27
26
  const meta = {
28
27
  path: "@signals-modal/position/withPosition.ts",
29
- line: 378,
28
+ line: 376,
30
29
  name: "withPosition.$position"
31
30
  };
32
31
  const positionResolvers = {
@@ -262,8 +261,7 @@ const positionResolvers = {
262
261
  *
263
262
  */
264
263
  function withPosition(options) {
265
- const modal = currentModal();
266
- const $position = memo(() => {
264
+ return memo(() => {
267
265
  return positionResolvers[options.$placement()]({
268
266
  anchor: options.$anchorMeasurement(),
269
267
  boundary: options.$boundary(),
@@ -271,14 +269,6 @@ function withPosition(options) {
271
269
  transform: options.transform ?? ((r) => r)
272
270
  });
273
271
  }, INTERNAL, meta);
274
- $positions((p) => p.set(modal.key, $position));
275
- modal.onDispose(() => {
276
- $positions((p) => {
277
- p.delete(modal.key);
278
- return p;
279
- });
280
- });
281
- return $position;
282
272
  }
283
273
 
284
274
  //#endregion
@@ -1,42 +1,15 @@
1
- import { onModalClosed } from "./onModalClosed.mjs";
2
- import { onModalOpened } from "./onModalOpened.mjs";
3
- import { onModalOpening } from "./onModalOpening.mjs";
4
- import { onModalDisposed } from "../createModal.mjs";
5
- import { INTERNAL, signal } from "@monstermann/signals";
1
+ import { signal } from "@monstermann/signals";
6
2
 
7
3
  //#region src/status/internals.ts
8
- const path = "@signals-modal/status/internals.ts";
9
4
  const meta = {
10
- path,
11
- line: 9,
5
+ path: "@signals-modal/status/internals.ts",
6
+ line: 5,
12
7
  name: "$keysToStatus"
13
8
  };
14
- const meta1 = {
15
- path,
16
- line: 14,
17
- name: "$openedModals"
18
- };
19
9
  const $keysToStatus = signal(/* @__PURE__ */ new Map(), {
20
10
  mutable: true,
21
11
  silent: true
22
12
  }, meta);
23
- const $openedModals = signal(/* @__PURE__ */ new Set(), INTERNAL, meta1);
24
- onModalOpening((key) => $openedModals((m) => add(m, key)));
25
- onModalOpened((key) => $openedModals((m) => add(m, key)));
26
- onModalClosed((key) => $openedModals((m) => remove(m, key)));
27
- onModalDisposed((key) => $openedModals((m) => remove(m, key)));
28
- function add(set, key) {
29
- if (set.has(key)) return set;
30
- const clone = new Set(set);
31
- clone.add(key);
32
- return clone;
33
- }
34
- function remove(set, key) {
35
- if (!set.has(key)) return set;
36
- const clone = new Set(set);
37
- clone.delete(key);
38
- return clone;
39
- }
40
13
 
41
14
  //#endregion
42
- export { $keysToStatus, $openedModals };
15
+ export { $keysToStatus };
@@ -1,11 +1,11 @@
1
- import { onModalClosed } from "./onModalClosed.mjs";
2
- import { onModalOpened } from "./onModalOpened.mjs";
3
- import { onModalOpening } from "./onModalOpening.mjs";
4
1
  import { $keysToStatus } from "./internals.mjs";
5
2
  import { closeModal } from "./closeModal.mjs";
3
+ import { onModalClosed } from "./onModalClosed.mjs";
6
4
  import { currentModal } from "../createModal.mjs";
7
5
  import { isModalOpen } from "./isModalOpen.mjs";
8
6
  import { onModalClosing } from "./onModalClosing.mjs";
7
+ import { onModalOpened } from "./onModalOpened.mjs";
8
+ import { onModalOpening } from "./onModalOpening.mjs";
9
9
  import { openModal } from "./openModal.mjs";
10
10
  import { INTERNAL, memo, signal, watch } from "@monstermann/signals";
11
11
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@monstermann/signals-modal",
3
3
  "type": "module",
4
- "version": "0.6.0",
4
+ "version": "0.7.0",
5
5
  "description": "Composable modal management.",
6
6
  "author": "Michael Ostermann <michaelostermann@me.com>",
7
7
  "license": "MIT",
@@ -1,34 +0,0 @@
1
- //#region src/anchor/getAnchorElement.d.ts
2
- /**
3
- * # getAnchorElement
4
- *
5
- * <Badge type="tip">Reactive</Badge>
6
- *
7
- * ```ts
8
- * function getAnchorElement(key: string): HTMLElement | undefined;
9
- * ```
10
- *
11
- * Retrieves the current anchor element for the given `key`.
12
- *
13
- * ## Example
14
- *
15
- * ```ts
16
- * import {
17
- * createModal,
18
- * withAnchorElement,
19
- * setAnchorElement,
20
- * getAnchorElement,
21
- * } from "@monstermann/signals-modal";
22
- *
23
- * createModal("key", () => {
24
- * withAnchorElement();
25
- * });
26
- *
27
- * setAnchorElement("key", document.querySelector(".anchor"));
28
- * getAnchorElement("key"); // HTMLElement
29
- * ```
30
- *
31
- */
32
- declare function getAnchorElement(key: string): HTMLElement | undefined;
33
- //#endregion
34
- export { getAnchorElement };
@@ -1,39 +0,0 @@
1
- import { $anchorElements } from "./internals.mjs";
2
-
3
- //#region src/anchor/getAnchorElement.ts
4
- /**
5
- * # getAnchorElement
6
- *
7
- * <Badge type="tip">Reactive</Badge>
8
- *
9
- * ```ts
10
- * function getAnchorElement(key: string): HTMLElement | undefined;
11
- * ```
12
- *
13
- * Retrieves the current anchor element for the given `key`.
14
- *
15
- * ## Example
16
- *
17
- * ```ts
18
- * import {
19
- * createModal,
20
- * withAnchorElement,
21
- * setAnchorElement,
22
- * getAnchorElement,
23
- * } from "@monstermann/signals-modal";
24
- *
25
- * createModal("key", () => {
26
- * withAnchorElement();
27
- * });
28
- *
29
- * setAnchorElement("key", document.querySelector(".anchor"));
30
- * getAnchorElement("key"); // HTMLElement
31
- * ```
32
- *
33
- */
34
- function getAnchorElement(key) {
35
- return $anchorElements().get(key)?.() ?? void 0;
36
- }
37
-
38
- //#endregion
39
- export { getAnchorElement };
@@ -1,43 +0,0 @@
1
- import { Rect } from "@monstermann/geometry";
2
-
3
- //#region src/anchor/getAnchorMeasurement.d.ts
4
- /**
5
- * # getAnchorMeasurement
6
- *
7
- * <Badge type="tip">Reactive</Badge>
8
- *
9
- * ```ts
10
- * function getAnchorMeasurement(key: string): Rect;
11
- * ```
12
- *
13
- * Retrieves the current result of `withAnchorMeasurement` or `withMouseAnchor`, falling back to an empty `Rect`.
14
- *
15
- * ## Example
16
- *
17
- * ```ts
18
- * import {
19
- * createModal,
20
- * withAnchorElement,
21
- * withModalStatus,
22
- * withAnchorMeasurement,
23
- * getAnchorMeasurement,
24
- * } from "@monstermann/signals-modal";
25
- *
26
- * createModal("key", () => {
27
- * const { $status } = withModalStatus();
28
- * const $anchorElement = withAnchorElement();
29
- * // Memo({ top: number, left: number, width: number, height: number })
30
- * const $anchorMeasurement = withAnchorMeasurement({
31
- * $status,
32
- * $anchorElement,
33
- * });
34
- * });
35
- *
36
- * // { top: number, left: number, width: number, height: number }
37
- * getAnchorMeasurement("key");
38
- * ```
39
- *
40
- */
41
- declare function getAnchorMeasurement(key: string): Rect;
42
- //#endregion
43
- export { getAnchorMeasurement };
@@ -1,47 +0,0 @@
1
- import { $anchorMeasurements } from "./internals.mjs";
2
- import { origin } from "@monstermann/geometry/Rect/origin.mjs";
3
-
4
- //#region src/anchor/getAnchorMeasurement.ts
5
- /**
6
- * # getAnchorMeasurement
7
- *
8
- * <Badge type="tip">Reactive</Badge>
9
- *
10
- * ```ts
11
- * function getAnchorMeasurement(key: string): Rect;
12
- * ```
13
- *
14
- * Retrieves the current result of `withAnchorMeasurement` or `withMouseAnchor`, falling back to an empty `Rect`.
15
- *
16
- * ## Example
17
- *
18
- * ```ts
19
- * import {
20
- * createModal,
21
- * withAnchorElement,
22
- * withModalStatus,
23
- * withAnchorMeasurement,
24
- * getAnchorMeasurement,
25
- * } from "@monstermann/signals-modal";
26
- *
27
- * createModal("key", () => {
28
- * const { $status } = withModalStatus();
29
- * const $anchorElement = withAnchorElement();
30
- * // Memo({ top: number, left: number, width: number, height: number })
31
- * const $anchorMeasurement = withAnchorMeasurement({
32
- * $status,
33
- * $anchorElement,
34
- * });
35
- * });
36
- *
37
- * // { top: number, left: number, width: number, height: number }
38
- * getAnchorMeasurement("key");
39
- * ```
40
- *
41
- */
42
- function getAnchorMeasurement(key) {
43
- return $anchorMeasurements().get(key)?.() ?? origin;
44
- }
45
-
46
- //#endregion
47
- export { getAnchorMeasurement };
@@ -1,25 +0,0 @@
1
- import { signal } from "@monstermann/signals";
2
-
3
- //#region src/anchor/internals.ts
4
- const path = "@signals-modal/anchor/internals.ts";
5
- const meta = {
6
- path,
7
- line: 5,
8
- name: "$anchorElements"
9
- };
10
- const meta1 = {
11
- path,
12
- line: 10,
13
- name: "$anchorMeasurements"
14
- };
15
- const $anchorElements = signal(/* @__PURE__ */ new Map(), {
16
- mutable: true,
17
- silent: true
18
- }, meta);
19
- const $anchorMeasurements = signal(/* @__PURE__ */ new Map(), {
20
- mutable: true,
21
- silent: true
22
- }, meta1);
23
-
24
- //#endregion
25
- export { $anchorElements, $anchorMeasurements };
@@ -1,30 +0,0 @@
1
- //#region src/anchor/setAnchorElement.d.ts
2
- /**
3
- * # setAnchorElement
4
- *
5
- * ```ts
6
- * function setAnchorElement(key: string, element: HTMLElement | null): void;
7
- * ```
8
- *
9
- * Sets the current anchor element for the given `key`.
10
- *
11
- * ## Example
12
- *
13
- * ```ts
14
- * import {
15
- * createModal,
16
- * withAnchorElement,
17
- * getAnchorElement,
18
- * } from "@monstermann/signals-modal";
19
- *
20
- * createModal("key", () => {
21
- * withAnchorElement();
22
- * });
23
- *
24
- * setAnchorElement("key", document.querySelector(".anchor"));
25
- * ```
26
- *
27
- */
28
- declare function setAnchorElement(key: string, element: HTMLElement | null): void;
29
- //#endregion
30
- export { setAnchorElement };
@@ -1,35 +0,0 @@
1
- import { $anchorElements } from "./internals.mjs";
2
-
3
- //#region src/anchor/setAnchorElement.ts
4
- /**
5
- * # setAnchorElement
6
- *
7
- * ```ts
8
- * function setAnchorElement(key: string, element: HTMLElement | null): void;
9
- * ```
10
- *
11
- * Sets the current anchor element for the given `key`.
12
- *
13
- * ## Example
14
- *
15
- * ```ts
16
- * import {
17
- * createModal,
18
- * withAnchorElement,
19
- * getAnchorElement,
20
- * } from "@monstermann/signals-modal";
21
- *
22
- * createModal("key", () => {
23
- * withAnchorElement();
24
- * });
25
- *
26
- * setAnchorElement("key", document.querySelector(".anchor"));
27
- * ```
28
- *
29
- */
30
- function setAnchorElement(key, element) {
31
- $anchorElements().get(key)?.(element);
32
- }
33
-
34
- //#endregion
35
- export { setAnchorElement };
@@ -1,34 +0,0 @@
1
- //#region src/floating/getFloatingElement.d.ts
2
- /**
3
- * # getFloatingElement
4
- *
5
- * <Badge type="tip">Reactive</Badge>
6
- *
7
- * ```ts
8
- * function getFloatingElement(key: string): HTMLElement | undefined;
9
- * ```
10
- *
11
- * Retrieves the current floating element for the given `key`.
12
- *
13
- * ## Example
14
- *
15
- * ```ts
16
- * import {
17
- * createModal,
18
- * withFloatingElement,
19
- * setFloatingElement,
20
- * getFloatingElement,
21
- * } from "@monstermann/signals-modal";
22
- *
23
- * createModal("key", () => {
24
- * withFloatingElement();
25
- * });
26
- *
27
- * setFloatingElement("key", document.querySelector(".floating"));
28
- * getFloatingElement("key"); // HTMLElement
29
- * ```
30
- *
31
- */
32
- declare function getFloatingElement(key: string): HTMLElement | undefined;
33
- //#endregion
34
- export { getFloatingElement };
@@ -1,39 +0,0 @@
1
- import { $floatingElements } from "./internals.mjs";
2
-
3
- //#region src/floating/getFloatingElement.ts
4
- /**
5
- * # getFloatingElement
6
- *
7
- * <Badge type="tip">Reactive</Badge>
8
- *
9
- * ```ts
10
- * function getFloatingElement(key: string): HTMLElement | undefined;
11
- * ```
12
- *
13
- * Retrieves the current floating element for the given `key`.
14
- *
15
- * ## Example
16
- *
17
- * ```ts
18
- * import {
19
- * createModal,
20
- * withFloatingElement,
21
- * setFloatingElement,
22
- * getFloatingElement,
23
- * } from "@monstermann/signals-modal";
24
- *
25
- * createModal("key", () => {
26
- * withFloatingElement();
27
- * });
28
- *
29
- * setFloatingElement("key", document.querySelector(".floating"));
30
- * getFloatingElement("key"); // HTMLElement
31
- * ```
32
- *
33
- */
34
- function getFloatingElement(key) {
35
- return $floatingElements().get(key)?.() ?? void 0;
36
- }
37
-
38
- //#endregion
39
- export { getFloatingElement };
@@ -1,43 +0,0 @@
1
- import { Rect } from "@monstermann/geometry";
2
-
3
- //#region src/floating/getFloatingMeasurement.d.ts
4
- /**
5
- * # getFloatingMeasurement
6
- *
7
- * <Badge type="tip">Reactive</Badge>
8
- *
9
- * ```ts
10
- * function getFloatingMeasurement(key: string): Rect;
11
- * ```
12
- *
13
- * Retrieves the current result of `withFloatingMeasurement`, falling back to an empty `Rect`.
14
- *
15
- * ## Example
16
- *
17
- * ```ts
18
- * import {
19
- * createModal,
20
- * withFloatingElement,
21
- * withModalStatus,
22
- * withFloatingMeasurement,
23
- * getFloatingMeasurement,
24
- * } from "@monstermann/signals-modal";
25
- *
26
- * createModal("key", () => {
27
- * const { $status } = withModalStatus();
28
- * const $floatingElement = withFloatingElement();
29
- * // Memo({ top: number, left: number, width: number, height: number })
30
- * const $floatingMeasurement = withFloatingMeasurement({
31
- * $status,
32
- * $floatingElement,
33
- * });
34
- * });
35
- *
36
- * // { top: number, left: number, width: number, height: number }
37
- * getFloatingMeasurement("key");
38
- * ```
39
- *
40
- */
41
- declare function getFloatingMeasurement(key: string): Rect;
42
- //#endregion
43
- export { getFloatingMeasurement };
@@ -1,47 +0,0 @@
1
- import { $floatingMeasurements } from "./internals.mjs";
2
- import { origin } from "@monstermann/geometry/Rect/origin.mjs";
3
-
4
- //#region src/floating/getFloatingMeasurement.ts
5
- /**
6
- * # getFloatingMeasurement
7
- *
8
- * <Badge type="tip">Reactive</Badge>
9
- *
10
- * ```ts
11
- * function getFloatingMeasurement(key: string): Rect;
12
- * ```
13
- *
14
- * Retrieves the current result of `withFloatingMeasurement`, falling back to an empty `Rect`.
15
- *
16
- * ## Example
17
- *
18
- * ```ts
19
- * import {
20
- * createModal,
21
- * withFloatingElement,
22
- * withModalStatus,
23
- * withFloatingMeasurement,
24
- * getFloatingMeasurement,
25
- * } from "@monstermann/signals-modal";
26
- *
27
- * createModal("key", () => {
28
- * const { $status } = withModalStatus();
29
- * const $floatingElement = withFloatingElement();
30
- * // Memo({ top: number, left: number, width: number, height: number })
31
- * const $floatingMeasurement = withFloatingMeasurement({
32
- * $status,
33
- * $floatingElement,
34
- * });
35
- * });
36
- *
37
- * // { top: number, left: number, width: number, height: number }
38
- * getFloatingMeasurement("key");
39
- * ```
40
- *
41
- */
42
- function getFloatingMeasurement(key) {
43
- return $floatingMeasurements().get(key)?.() ?? origin;
44
- }
45
-
46
- //#endregion
47
- export { getFloatingMeasurement };