react-flow-modal 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -27,66 +27,64 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/ModalProvider.tsx
-var import_react2 = require("react");
-
-// src/modalContext.ts
 var import_react = require("react");
-var ModalContext = (0, import_react.createContext)({
-  stack: [],
-  setStack: () => []
-});
-
-// src/ModalProvider.tsx
+var import_zustand = require("zustand");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ModalProvider = ({ children }) => {
-  const [stack, setStack] = (0, import_react2.useState)([]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContext.Provider, { value: { stack, setStack }, children });
+var createModalStore = (initialState) => (0, import_zustand.createStore)((set) => {
+  var _a;
+  return {
+    stack: (_a = initialState == null ? void 0 : initialState.stack) != null ? _a : /* @__PURE__ */ new Map(),
+    appendStack: (key, element) => set((state) => ({ stack: new Map(state.stack).set(key, element) })),
+    removeStack: (key) => set((state) => {
+      const newStack = new Map(state.stack);
+      newStack.delete(key);
+      return { stack: newStack };
+    })
+  };
+});
+var ModalStoreContext = (0, import_react.createContext)(null);
+var ModalProvider = ({ children, initialState }) => {
+  const [store] = (0, import_react.useState)(createModalStore(initialState));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalStoreContext.Provider, { value: store, children });
 };
-
-// src/useModal.tsx
-var import_react4 = require("react");
-
-// src/useModalContext.ts
-var import_react3 = require("react");
-var useModalContext = () => {
-  const context = (0, import_react3.useContext)(ModalContext);
-  if (!context) {
-    throw new Error("useModalContext must be used within a ModalProvider");
-  }
-  return context;
+var useModalStore = (selector) => {
+  const store = (0, import_react.useContext)(ModalStoreContext);
+  if (!store) throw new Error("DashboardStoreProvider missing");
+  return (0, import_zustand.useStore)(store, selector);
 };
 
 // src/useModal.tsx
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var useModal = () => {
-  const { setStack } = useModalContext();
-  const pop = () => {
-    setStack((prev) => prev.slice(0, -1));
-  };
-  const push = (element) => {
-    setStack((prev) => [...prev, element]);
-  };
+  const appendStack = useModalStore(
+    (state) => state.appendStack
+  );
+  const removeStack = useModalStore(
+    (state) => state.removeStack
+  );
   const open = (key, render) => {
     return new Promise((resolve, reject) => {
       const element = render((value) => {
         resolve(value);
-        pop();
+        removeStack(key);
       }, (reason) => {
         reject(reason);
-        pop();
+        removeStack(key);
       });
-      push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Fragment, { children: element }, `modal-${key}`));
+      appendStack(key, /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Fragment, { children: element }, `modal-${key}`));
     });
   };
   return { open };
 };
 
 // src/ModalHost.tsx
-var import_react5 = require("react");
 var ModalHost = ({ children }) => {
-  const { stack } = useModalContext();
-  if (!children) return stack.filter(import_react5.isValidElement);
-  return children(stack.filter(import_react5.isValidElement));
+  const stack = useModalStore(
+    (state) => state.stack
+  );
+  if (!children) return Array.from(stack.values());
+  return children(Array.from(stack.values()));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.cts

@@ -1,6 +1,14 @@
-import React$1, { FC, PropsWithChildren, ReactElement } from 'react';
+import React$1, { PropsWithChildren, ReactElement, FC } from 'react';
 
-declare const ModalProvider: FC<PropsWithChildren>;
+type ModalState = {
+    stack: Map<string, ReactElement>;
+    appendStack: (key: string, element: ReactElement) => void;
+    removeStack: (key: string) => void;
+};
+type ProviderProps = {
+    initialState?: Partial<ModalState>;
+};
+declare const ModalProvider: React$1.FC<PropsWithChildren<ProviderProps>>;
 
 declare const useModal: () => {
     open: <T>(key: string, render: (resolve: (value: T) => void, reject: (reason?: unknown) => void) => React$1.ReactNode) => Promise<T>;

package/dist/index.d.ts

@@ -1,6 +1,14 @@
-import React$1, { FC, PropsWithChildren, ReactElement } from 'react';
+import React$1, { PropsWithChildren, ReactElement, FC } from 'react';
 
-declare const ModalProvider: FC<PropsWithChildren>;
+type ModalState = {
+    stack: Map<string, ReactElement>;
+    appendStack: (key: string, element: ReactElement) => void;
+    removeStack: (key: string) => void;
+};
+type ProviderProps = {
+    initialState?: Partial<ModalState>;
+};
+declare const ModalProvider: React$1.FC<PropsWithChildren<ProviderProps>>;
 
 declare const useModal: () => {
     open: <T>(key: string, render: (resolve: (value: T) => void, reject: (reason?: unknown) => void) => React$1.ReactNode) => Promise<T>;

package/dist/index.js

@@ -1,64 +1,62 @@
 // src/ModalProvider.tsx
-import { useState } from "react";
-
-// src/modalContext.ts
-import { createContext } from "react";
-var ModalContext = createContext({
-  stack: [],
-  setStack: () => []
-});
-
-// src/ModalProvider.tsx
+import { createContext, useContext, useState } from "react";
+import { createStore, useStore } from "zustand";
 import { jsx } from "react/jsx-runtime";
-var ModalProvider = ({ children }) => {
-  const [stack, setStack] = useState([]);
-  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { stack, setStack }, children });
+var createModalStore = (initialState) => createStore((set) => {
+  var _a;
+  return {
+    stack: (_a = initialState == null ? void 0 : initialState.stack) != null ? _a : /* @__PURE__ */ new Map(),
+    appendStack: (key, element) => set((state) => ({ stack: new Map(state.stack).set(key, element) })),
+    removeStack: (key) => set((state) => {
+      const newStack = new Map(state.stack);
+      newStack.delete(key);
+      return { stack: newStack };
+    })
+  };
+});
+var ModalStoreContext = createContext(null);
+var ModalProvider = ({ children, initialState }) => {
+  const [store] = useState(createModalStore(initialState));
+  return /* @__PURE__ */ jsx(ModalStoreContext.Provider, { value: store, children });
 };
-
-// src/useModal.tsx
-import { Fragment } from "react";
-
-// src/useModalContext.ts
-import { useContext } from "react";
-var useModalContext = () => {
-  const context = useContext(ModalContext);
-  if (!context) {
-    throw new Error("useModalContext must be used within a ModalProvider");
-  }
-  return context;
+var useModalStore = (selector) => {
+  const store = useContext(ModalStoreContext);
+  if (!store) throw new Error("DashboardStoreProvider missing");
+  return useStore(store, selector);
 };
 
 // src/useModal.tsx
+import { Fragment } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var useModal = () => {
-  const { setStack } = useModalContext();
-  const pop = () => {
-    setStack((prev) => prev.slice(0, -1));
-  };
-  const push = (element) => {
-    setStack((prev) => [...prev, element]);
-  };
+  const appendStack = useModalStore(
+    (state) => state.appendStack
+  );
+  const removeStack = useModalStore(
+    (state) => state.removeStack
+  );
   const open = (key, render) => {
     return new Promise((resolve, reject) => {
       const element = render((value) => {
         resolve(value);
-        pop();
+        removeStack(key);
       }, (reason) => {
         reject(reason);
-        pop();
+        removeStack(key);
       });
-      push(/* @__PURE__ */ jsx2(Fragment, { children: element }, `modal-${key}`));
+      appendStack(key, /* @__PURE__ */ jsx2(Fragment, { children: element }, `modal-${key}`));
     });
   };
   return { open };
 };
 
 // src/ModalHost.tsx
-import { isValidElement } from "react";
 var ModalHost = ({ children }) => {
-  const { stack } = useModalContext();
-  if (!children) return stack.filter(isValidElement);
-  return children(stack.filter(isValidElement));
+  const stack = useModalStore(
+    (state) => state.stack
+  );
+  if (!children) return Array.from(stack.values());
+  return children(Array.from(stack.values()));
 };
 export {
   ModalHost,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-modal",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Promise-based modal flows for React",
   "repository": {
     "type": "git",
@@ -39,5 +39,8 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },
-  "packageManager": "pnpm@10.27.0"
+  "packageManager": "pnpm@10.27.0",
+  "dependencies": {
+    "zustand": "^5.0.11"
+  }
 }

package/src/ModalHost.tsx

@@ -1,9 +1,13 @@
 import { FC, isValidElement, ReactElement } from 'react';
-import { useModalContext } from './useModalContext';
+import { useModalStore } from './ModalProvider';
+
 
 export const ModalHost: FC<{ children?: (modals: ReactElement[]) => React.ReactNode }> = ({ children }) => {
-    const { stack } = useModalContext();
+    const stack = useModalStore(
+        (state) => state.stack
+    );
+
 
-    if (!children) return stack.filter(isValidElement);
-    return children(stack.filter(isValidElement));
+    if (!children) return Array.from(stack.values());
+    return children(Array.from(stack.values()));
 };

package/src/ModalProvider.tsx

@@ -1,12 +1,52 @@
-import React, { FC, PropsWithChildren, useState } from "react";
-import { ModalContext } from "./modalContext";
+'use client';
 
-export const ModalProvider: FC<PropsWithChildren> = ({ children }) => {
-    const [stack, setStack] = useState<React.ReactNode[]>([]);
+
+import React, { createContext, PropsWithChildren, ReactElement, useContext, useState } from 'react';
+import { createStore, ExtractState, StoreApi, useStore } from 'zustand';
+
+type ModalState = {
+    stack: Map<string, ReactElement>;
+    appendStack: (key: string, element: ReactElement) => void;
+    removeStack: (key: string) => void;
+};
+
+
+
+const createModalStore = (initialState?: Partial<ModalState>) => createStore<ModalState>((set) => {
+    return {
+        stack: initialState?.stack ?? new Map<string, ReactElement>(),
+
+        appendStack: (key: string, element: ReactElement) => set((state) => ({ stack: new Map(state.stack).set(key, element) })),
+
+        removeStack: (key: string) => set((state) => {
+            const newStack = new Map(state.stack);
+            newStack.delete(key);
+            return { stack: newStack };
+        }),
+    }
+});
+
+const ModalStoreContext = createContext<StoreApi<ModalState> | null>(null);
+
+type ProviderProps = {
+    initialState?: Partial<ModalState>;
+}
+
+
+export const ModalProvider: React.FC<PropsWithChildren<ProviderProps>> = ({ children, initialState }) => {
+    // 여러번 호출되어도 store가 하나만 생성되도록 함
+    const [store] = useState(createModalStore(initialState));
 
     return (
-        <ModalContext.Provider value={{ stack, setStack }}>
+        <ModalStoreContext.Provider value={store}>
             {children}
-        </ModalContext.Provider>
+        </ModalStoreContext.Provider>
     );
+};
+
+
+export const useModalStore = <T,>(selector: (state: ExtractState<StoreApi<ModalState>>) => T) => {
+    const store = useContext(ModalStoreContext);
+    if (!store) throw new Error('DashboardStoreProvider missing');
+    return useStore(store, selector);
 };

package/src/useModal.tsx

@@ -1,16 +1,15 @@
 import React, { Fragment } from "react";
-import { useModalContext } from "./useModalContext";
+import { useModalStore } from "./ModalProvider";
 
 export const useModal = () => {
-    const { setStack } = useModalContext();
+    const appendStack = useModalStore(
+        (state) => state.appendStack
+    );
 
-    const pop = () => {
-        setStack((prev) => prev.slice(0, -1));
-    };
+    const removeStack = useModalStore(
+        (state) => state.removeStack
+    );
 
-    const push = (element: React.ReactNode) => {
-        setStack((prev) => [...prev, element]);
-    };
 
     /**
      * 모달을 열고 닫는 함수
@@ -24,12 +23,12 @@ export const useModal = () => {
         return new Promise<T>((resolve, reject) => {
             const element = render((value) => {
                 resolve(value);
-                pop();
+                removeStack(key);
             }, (reason) => {
                 reject(reason);
-                pop();
+                removeStack(key);
             });
-            push(<Fragment key={`modal-${key}`}>{element}</Fragment>);
+            appendStack(key, <Fragment key={`modal-${key}`}>{element}</Fragment>);
         });
     };
 

package/src/modalContext.ts

@@ -1,9 +0,0 @@
-import { createContext, Dispatch, SetStateAction } from "react";
-
-export const ModalContext = createContext<{
-    stack: React.ReactNode[];
-    setStack: Dispatch<SetStateAction<React.ReactNode[]>>
-}>({
-    stack: [],
-    setStack: () => [] as React.ReactNode[],
-});

package/src/useModalContext.ts

@@ -1,12 +0,0 @@
-import { useContext } from "react";
-import { ModalContext } from "./modalContext";
-
-export const useModalContext = () => {
-    const context = useContext(ModalContext);
-
-    if (!context) {
-        throw new Error('useModalContext must be used within a ModalProvider');
-    }
-
-    return context;
-};