@okyrychenko-dev/react-modal-manager 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,7 +1,6 @@
-import { createContext, useId, useRef, useEffect, useCallback, useMemo, useContext, useState } from 'react';
+import { isDefined, isInstanceOf, isNonEmptyArray, assertTrue, hasProperty, assertDefined, isObject, isFunction, isError } from '@okyrychenko-dev/type-utils';
+import { createContext, useId, useRef, useEffect, useCallback, useMemo, useContext, useSyncExternalStore, useState, createElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useStore } from 'zustand';
-import { createStore } from 'zustand/vanilla';
 
 // src/registry/createModal.ts
 function createGeneratedModalId() {
@@ -14,73 +13,56 @@ function createModal(options) {
   };
   return {
     ...definition,
-    open: (manager, input) => manager.open(definition, input)
-  };
-}
-
-// src/registry/createModalController.constants.ts
-var MODAL_CONTROLLER_UNBOUND_ERROR = "Modal registry is not bound to a mounted ModalProvider";
-
-// src/registry/createModalController.ts
-function createModalController() {
-  const managerStack = [];
-  const getActiveManager = () => {
-    if (managerStack.length === 0) {
-      throw new Error(MODAL_CONTROLLER_UNBOUND_ERROR);
-    }
-    return managerStack[managerStack.length - 1];
-  };
-  return {
-    bind: (manager) => {
-      managerStack.push(manager);
-      return () => {
-        const managerIndex = managerStack.lastIndexOf(manager);
-        if (managerIndex >= 0) {
-          managerStack.splice(managerIndex, 1);
-        }
-      };
-    },
-    closeAll: (reason) => {
-      getActiveManager().closeAll(reason);
-    },
-    confirm: (params) => getActiveManager().confirm(params),
-    dismiss: (instanceId, reason) => {
-      getActiveManager().dismiss(instanceId, reason);
-    },
-    isReady: () => managerStack.length > 0,
-    open: (modal, input) => getActiveManager().open(modal, input)
+    open: (manager, ...args) => manager.open(definition, ...args)
   };
 }
 
 // src/registry/createModalRegistry.constants.ts
 var MODAL_REGISTRY_UNKNOWN_KEY_ERROR = "Modal registry does not contain modal";
+var MODAL_CONTROLLER_UNBOUND_ERROR = "Modal registry is not bound to a mounted ModalProvider";
 
-// src/registry/modalRegistryBinding.ts
-var registryControllers = /* @__PURE__ */ new WeakMap();
-function bindModalRegistry(registry, controller) {
-  registryControllers.set(registry, controller);
+// src/registry/createModalRegistry.ts
+var MODAL_REGISTRY_ATTACH = /* @__PURE__ */ Symbol("modal-registry-attach");
+function isModalRegistryAttachable(value) {
+  return isObject(value) && isFunction(value[MODAL_REGISTRY_ATTACH]);
 }
-function getModalRegistryController(registry) {
-  return registryControllers.get(registry);
+function attachModalRegistry(registry, manager) {
+  return registry[MODAL_REGISTRY_ATTACH](manager);
 }
-
-// src/registry/createModalRegistry.ts
 function createModalRegistry(definitions) {
-  const controller = createModalController();
+  let attachments = [];
+  const activeManager = () => {
+    assertTrue(isNonEmptyArray(attachments), MODAL_CONTROLLER_UNBOUND_ERROR);
+    return attachments[attachments.length - 1].manager;
+  };
+  const attach = (manager) => {
+    const attachment = { manager };
+    attachments.push(attachment);
+    return () => {
+      attachments = attachments.filter((candidate) => candidate !== attachment);
+    };
+  };
   function open(key, input) {
-    if (!Object.prototype.hasOwnProperty.call(definitions, key)) {
-      throw new Error(`${MODAL_REGISTRY_UNKNOWN_KEY_ERROR}: ${key}`);
-    }
-    return definitions[key].open(controller, input);
+    assertTrue(
+      hasProperty(definitions, key),
+      () => `${MODAL_REGISTRY_UNKNOWN_KEY_ERROR}: ${key}`
+    );
+    return definitions[key].open(activeManager(), input);
   }
   const registry = {
-    closeAll: controller.closeAll,
-    confirm: controller.confirm,
-    dismiss: controller.dismiss,
-    isReady: controller.isReady,
-    open
+    closeAll: (reason) => {
+      activeManager().closeAll(reason);
+    },
+    confirm: (params) => {
+      return activeManager().confirm(params);
+    },
+    dismiss: (instanceId, reason) => {
+      activeManager().dismiss(instanceId, reason);
+    },
+    isReady: () => isNonEmptyArray(attachments),
+    open,
+    [MODAL_REGISTRY_ATTACH]: attach
   };
-  bindModalRegistry(registry, controller);
   return registry;
 }
 
@@ -108,7 +90,7 @@ function ConfirmModal(props) {
   const confirmText = input.confirmText ?? DEFAULT_CONFIRM_TEXT;
   const variant = input.variant ?? "default";
   const dismissible = input.dismissible !== false;
-  const hasDescription = input.description !== void 0;
+  const hasDescription = isDefined(input.description);
   const titleId = useId();
   const descriptionId = useId();
   const dialogRef = useRef(null);
@@ -122,7 +104,7 @@ function ConfirmModal(props) {
     }
     initialFocusRef.current?.focus();
     return () => {
-      if (previouslyFocused instanceof HTMLElement) {
+      if (isInstanceOf(previouslyFocused, HTMLElement)) {
         previouslyFocused.focus();
       }
     };
@@ -144,11 +126,11 @@ function ConfirmModal(props) {
     handleDismiss();
   };
   const handleTab = (event) => {
-    if (dialogRef.current === null) {
+    if (!isDefined(dialogRef.current)) {
       return;
     }
     const focusable = getFocusableElements(dialogRef.current);
-    if (focusable.length === 0) {
+    if (!isNonEmptyArray(focusable)) {
       return;
     }
     const first = focusable[0];
@@ -223,117 +205,173 @@ var ModalRejectError = class extends Error {
     this.value = value;
   }
 };
-var ModalStoreContext = createContext(void 0);
-
-// src/store/useModalStore.ts
-function useModalStoreApi() {
-  const store = useContext(ModalStoreContext);
-  if (store === void 0) {
-    throw new Error("Modal store must be used within ModalProvider");
-  }
-  return store;
-}
-function useModalStore(selector) {
-  return useStore(useModalStoreApi(), selector);
-}
-
-// src/store/modalStore.actions.ts
-function createModalStoreActions(set, get) {
-  const removeTimerIds = /* @__PURE__ */ new Map();
-  const clearRemoveTimer = (instanceId) => {
-    const timerId = removeTimerIds.get(instanceId);
-    if (timerId === void 0) {
+function createModalLifecycle(options) {
+  let nextInstanceIndex = 0;
+  let instances = [];
+  let disposed = false;
+  let closeDelayMs = options.closeDelayMs;
+  const serverSnapshot = { instances: [] };
+  let snapshot = serverSnapshot;
+  const observers = /* @__PURE__ */ new Set();
+  const removalTimers = /* @__PURE__ */ new Map();
+  const dismissers = /* @__PURE__ */ new Map();
+  const notifyObservers = () => {
+    for (const observer of observers) {
+      observer();
+    }
+  };
+  const publishState = () => {
+    if (disposed) {
+      return;
+    }
+    snapshot = { instances: [...instances] };
+    notifyObservers();
+  };
+  const removeInstance = (instanceId) => {
+    const timer = removalTimers.get(instanceId);
+    if (isDefined(timer)) {
+      globalThis.clearTimeout(timer);
+      removalTimers.delete(instanceId);
+    }
+    dismissers.delete(instanceId);
+    instances = instances.filter(
+      (candidate) => candidate.instanceId !== instanceId
+    );
+    publishState();
+  };
+  const settleInstance = (instanceId, settle) => {
+    const instance = instances.find(
+      (candidate) => candidate.instanceId === instanceId
+    );
+    if (!isDefined(instance) || instance.status === "closing") {
       return;
     }
-    globalThis.clearTimeout(timerId);
-    removeTimerIds.delete(instanceId);
+    instances = instances.map((candidate) => {
+      if (candidate.instanceId === instanceId) {
+        return { ...candidate, status: "closing" };
+      }
+      return candidate;
+    });
+    publishState();
+    settle();
+    if (closeDelayMs <= 0) {
+      removeInstance(instanceId);
+      return;
+    }
+    const timer = globalThis.setTimeout(() => {
+      removeInstance(instanceId);
+    }, closeDelayMs);
+    removalTimers.set(instanceId, timer);
+  };
+  const dismissOpenInstances = (reason) => {
+    const openInstanceIds = instances.filter((instance) => instance.status === "open").map((instance) => instance.instanceId);
+    for (const instanceId of openInstanceIds) {
+      dismissers.get(instanceId)?.(reason);
+    }
   };
   return {
-    addModal: (modal) => {
-      set((state) => ({
-        modals: [...state.modals, { ...modal, status: "open" }]
-      }));
-    },
-    allocateInstanceId: () => {
-      const { nextInstanceIndex } = get();
-      set({ nextInstanceIndex: nextInstanceIndex + 1 });
-      return `modal-${String(nextInstanceIndex)}`;
+    closeAll: (reason = "close-all") => {
+      dismissOpenInstances(reason);
     },
-    dismissAll: (reason) => {
-      const modals = get().modals.filter((item) => item.status === "open");
-      for (const modal of modals) {
-        modal.dismiss(reason);
+    dispose: () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      dismissOpenInstances("provider-unmount");
+      for (const timer of removalTimers.values()) {
+        globalThis.clearTimeout(timer);
       }
-      set((state) => ({
-        modals: state.modals.map((modal) => ({
-          ...modal,
-          status: "closing"
-        }))
-      }));
+      removalTimers.clear();
+      dismissers.clear();
+      instances = [];
+      snapshot = { instances: [] };
+      notifyObservers();
+      observers.clear();
     },
-    markModalClosing: (instanceId) => {
-      set((state) => ({
-        modals: state.modals.map((modal) => {
-          if (modal.instanceId === instanceId) {
-            return { ...modal, status: "closing" };
-          }
-          return modal;
-        })
-      }));
+    dismiss: (instanceId, reason) => {
+      dismissers.get(instanceId)?.(reason);
     },
-    scheduleRemove: (instanceId, delayMs) => {
-      clearRemoveTimer(instanceId);
-      if (delayMs <= 0) {
-        get().removeModal(instanceId);
-        return;
+    getSnapshot: () => snapshot,
+    getServerSnapshot: () => serverSnapshot,
+    open: (modal, ...args) => {
+      const input = args[0];
+      const instanceId = `modal-${String(nextInstanceIndex)}`;
+      nextInstanceIndex += 1;
+      if (disposed) {
+        const result2 = Promise.reject(
+          new ModalDismissError("provider-unmount")
+        );
+        return Object.assign(result2, {
+          dismiss: () => void 0,
+          instanceId
+        });
       }
-      const timerId = globalThis.setTimeout(() => {
-        removeTimerIds.delete(instanceId);
-        get().removeModal(instanceId);
-      }, delayMs);
-      removeTimerIds.set(instanceId, timerId);
-    },
-    removeModal: (instanceId) => {
-      clearRemoveTimer(instanceId);
-      set((state) => ({
-        modals: state.modals.filter((modal) => modal.instanceId !== instanceId)
-      }));
+      const result = new Promise((resolve, reject) => {
+        const dismiss = (reason = "dismiss") => {
+          settleInstance(instanceId, () => {
+            reject(new ModalDismissError(reason));
+          });
+        };
+        dismissers.set(instanceId, dismiss);
+        const instance = {
+          definitionId: modal.id,
+          instanceId,
+          render: () => createElement(modal.component, {
+            close: (modalResult) => {
+              settleInstance(instanceId, () => {
+                resolve(modalResult);
+              });
+            },
+            dismiss,
+            input,
+            instanceId,
+            reject: (error) => {
+              settleInstance(instanceId, () => {
+                reject(isError(error) ? error : new ModalRejectError(error));
+              });
+            }
+          }),
+          status: "open"
+        };
+        instances = [...instances, instance];
+        publishState();
+      });
+      return Object.assign(result, {
+        dismiss: (reason) => {
+          dismissers.get(instanceId)?.(reason);
+        },
+        instanceId
+      });
     },
-    clearModals: () => {
-      get().clearRemoveTimers();
-      set({ modals: [] });
+    setCloseDelayMs: (nextCloseDelayMs) => {
+      closeDelayMs = nextCloseDelayMs;
     },
-    clearRemoveTimers: () => {
-      for (const timerId of removeTimerIds.values()) {
-        globalThis.clearTimeout(timerId);
+    subscribe: (observer) => {
+      if (disposed) {
+        return () => void 0;
       }
-      removeTimerIds.clear();
+      observers.add(observer);
+      return () => {
+        observers.delete(observer);
+      };
     }
   };
 }
-
-// src/store/modalStore.constants.ts
-var MODAL_STORE_DEFAULTS = {
-  modals: [],
-  nextInstanceIndex: 0
-};
-
-// src/store/modalStore.ts
-function createModalStore() {
-  return createStore((set, get) => ({
-    ...MODAL_STORE_DEFAULTS,
-    ...createModalStoreActions(set, get)
-  }));
+var ModalLifecycleContext = createContext(void 0);
+function useModalLifecycle() {
+  const lifecycle = useContext(ModalLifecycleContext);
+  assertDefined(lifecycle, "Modal lifecycle must be used within ModalProvider");
+  return lifecycle;
 }
-function ModalStoreProvider({
-  children
-}) {
-  const [store] = useState(createModalStore);
-  return /* @__PURE__ */ jsx(ModalStoreContext.Provider, { value: store, children });
+function useModalLifecycleState() {
+  const lifecycle = useModalLifecycle();
+  return useSyncExternalStore(
+    lifecycle.subscribe,
+    lifecycle.getSnapshot,
+    lifecycle.getServerSnapshot
+  );
 }
-
-// src/store/modalStore.selectors.ts
-var useModals = () => useModalStore((state) => state.modals);
 var ModalRuntimeConfigContext = createContext({
   closeDelayMs: 0,
   confirmModal
@@ -344,104 +382,22 @@ function useModalRuntimeConfig() {
   return useContext(ModalRuntimeConfigContext);
 }
 
-// src/hooks/useModalManager/useModalManager.constants.ts
-var DEFAULT_DISMISS_REASON = "dismiss";
+// src/hooks/useModalManager/useModalManager.tsx
 function useModalManager() {
-  const store = useModalStoreApi();
-  const { closeDelayMs, confirmModal: confirmModal2 } = useModalRuntimeConfig();
-  const scheduleRemove = useCallback(
-    (instanceId) => {
-      store.getState().scheduleRemove(instanceId, closeDelayMs);
-    },
-    [closeDelayMs, store]
-  );
-  const settleInstance = useCallback(
-    (instanceId, settle) => {
-      const instance = store.getState().modals.find((modal) => modal.instanceId === instanceId);
-      if (instance === void 0 || instance.status === "closing") {
-        return;
-      }
-      store.getState().markModalClosing(instanceId);
-      settle(instance);
-      scheduleRemove(instanceId);
-    },
-    [scheduleRemove, store]
-  );
-  const dismiss = useCallback(
-    (instanceId, reason = DEFAULT_DISMISS_REASON) => {
-      settleInstance(instanceId, (instance) => {
-        instance.dismiss(reason);
-      });
-    },
-    [settleInstance]
-  );
-  const closeAll = useCallback(
-    (reason) => {
-      const dismissReason = reason ?? "close-all";
-      const openInstanceIds = store.getState().modals.filter((modal) => modal.status === "open").map((modal) => modal.instanceId);
-      store.getState().dismissAll(dismissReason);
-      for (const instanceId of openInstanceIds) {
-        scheduleRemove(instanceId);
-      }
-    },
-    [scheduleRemove, store]
-  );
-  const open = useCallback(
-    (modal, input) => {
-      const storeState = store.getState();
-      const instanceId = storeState.allocateInstanceId();
-      const result = new Promise((resolve, reject) => {
-        const Component = modal.component;
-        const handleClose = (modalResult) => {
-          settleInstance(instanceId, () => {
-            resolve(modalResult);
-          });
-        };
-        const handleDismiss = (reason = DEFAULT_DISMISS_REASON) => {
-          settleInstance(instanceId, () => {
-            reject(new ModalDismissError(reason));
-          });
-        };
-        const handleReject = (error) => {
-          settleInstance(instanceId, () => {
-            reject(
-              error instanceof Error ? error : new ModalRejectError(error)
-            );
-          });
-        };
-        storeState.addModal({
-          instanceId,
-          status: "open",
-          definitionId: modal.id,
-          render: () => /* @__PURE__ */ jsx(
-            Component,
-            {
-              close: handleClose,
-              dismiss: handleDismiss,
-              instanceId,
-              input,
-              reject: handleReject
-            }
-          ),
-          dismiss: (reason) => {
-            reject(new ModalDismissError(reason));
-          }
-        });
-      });
-      const dismissHandle = (reason) => {
-        dismiss(instanceId, reason);
-      };
-      return Object.assign(result, { dismiss: dismissHandle, instanceId });
-    },
-    [dismiss, settleInstance, store]
-  );
+  const lifecycle = useModalLifecycle();
+  const { confirmModal: confirmModal2 } = useModalRuntimeConfig();
   const confirm = useCallback(
-    (params) => open(confirmModal2, params),
-    [confirmModal2, open]
+    (params) => lifecycle.open(confirmModal2, params),
+    [confirmModal2, lifecycle]
   );
   return useMemo(
-    () => ({ closeAll, confirm, dismiss, open }),
-    [closeAll, confirm, dismiss, open]
+    () => ({
+      closeAll: lifecycle.closeAll,
+      confirm,
+      dismiss: lifecycle.dismiss,
+      open: lifecycle.open
+    }),
+    [confirm, lifecycle]
   );
 }
 function DefaultModalRenderer({ children }) {
@@ -450,7 +406,7 @@ function DefaultModalRenderer({ children }) {
 function ModalViewport({
   renderer: Renderer = DefaultModalRenderer
 }) {
-  const modals = useModals();
+  const { instances: modals } = useModalLifecycleState();
   return /* @__PURE__ */ jsx(Fragment, { children: modals.map((modal) => /* @__PURE__ */ jsx(
     Renderer,
     {
@@ -465,32 +421,35 @@ function ModalViewport({
   )) });
 }
 function ModalRegistryBinder(props) {
-  const { controller } = props;
+  const { registry } = props;
   const manager = useModalManager();
   useEffect(() => {
-    const unbind = controller.bind(manager);
+    const unbind = attachModalRegistry(registry, manager);
     return () => {
       unbind();
     };
-  }, [controller, manager]);
+  }, [registry, manager]);
   return null;
 }
-
-// src/provider/ModalStoreCleanup.constants.ts
-var PROVIDER_UNMOUNT_DISMISS_REASON = "provider-unmount";
-
-// src/provider/ModalStoreCleanup.tsx
-function ModalStoreCleanup() {
-  const store = useModalStoreApi();
-  useEffect(
-    () => () => {
-      store.getState().dismissAll(PROVIDER_UNMOUNT_DISMISS_REASON);
-      store.getState().clearRemoveTimers();
-      store.getState().clearModals();
-    },
-    [store]
-  );
-  return null;
+function useModalLifecycleOwner(closeDelayMs) {
+  const [lifecycle] = useState(() => createModalLifecycle({ closeDelayMs }));
+  const mountGeneration = useRef(0);
+  useEffect(() => {
+    lifecycle.setCloseDelayMs(closeDelayMs);
+  }, [closeDelayMs, lifecycle]);
+  useEffect(() => {
+    mountGeneration.current += 1;
+    return () => {
+      mountGeneration.current += 1;
+      const cleanupGeneration = mountGeneration.current;
+      globalThis.queueMicrotask(() => {
+        if (mountGeneration.current === cleanupGeneration) {
+          lifecycle.dispose();
+        }
+      });
+    };
+  }, [lifecycle]);
+  return lifecycle;
 }
 function ModalProvider(props) {
   const {
@@ -500,9 +459,9 @@ function ModalProvider(props) {
     registry,
     renderer
   } = props;
-  const registryController = registry === void 0 ? void 0 : getModalRegistryController(registry);
-  if (registry !== void 0 && registryController === void 0) {
-    throw new Error(
+  if (isDefined(registry)) {
+    assertTrue(
+      isModalRegistryAttachable(registry),
       "ModalProvider registry must be created by createModalRegistry"
     );
   }
@@ -510,11 +469,11 @@ function ModalProvider(props) {
     () => ({ closeDelayMs, confirmModal: confirmModal2 }),
     [closeDelayMs, confirmModal2]
   );
-  return /* @__PURE__ */ jsx(ModalStoreProvider, { children: /* @__PURE__ */ jsxs(ModalRuntimeConfigContext.Provider, { value: runtimeConfig, children: [
+  const lifecycle = useModalLifecycleOwner(closeDelayMs);
+  return /* @__PURE__ */ jsx(ModalLifecycleContext.Provider, { value: lifecycle, children: /* @__PURE__ */ jsxs(ModalRuntimeConfigContext.Provider, { value: runtimeConfig, children: [
     children,
-    registryController && /* @__PURE__ */ jsx(ModalRegistryBinder, { controller: registryController }),
-    /* @__PURE__ */ jsx(ModalViewport, { renderer }),
-    /* @__PURE__ */ jsx(ModalStoreCleanup, {})
+    isDefined(registry) && /* @__PURE__ */ jsx(ModalRegistryBinder, { registry }),
+    /* @__PURE__ */ jsx(ModalViewport, { renderer })
   ] }) });
 }