react-flow-modal 0.4.0 → 0.4.1

package/README.md

@@ -113,6 +113,7 @@ function ConfirmModal({
 }) {
   return (
     <motion.div
+      key="modal"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
@@ -126,6 +127,7 @@ function ConfirmModal({
       }}
     >
       <motion.div
+        key="modal-content"
         initial={{ scale: 0.9, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
         exit={{ scale: 0.95, opacity: 0 }}

package/dist/index.cjs

@@ -22,8 +22,8 @@ var index_exports = {};
 __export(index_exports, {
   ModalHost: () => ModalHost,
   ModalProvider: () => ModalProvider,
-  renderModals: () => renderModals,
-  useModal: () => useModal
+  useModal: () => useModal,
+  useModalHost: () => useModalHost
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -53,9 +53,11 @@ var useModalContext = () => {
   }
   return context;
 };
-var renderModals = () => {
+var useModalHost = () => {
   const { stack } = useModalContext();
-  return stack.map((item) => item);
+  return {
+    render: () => stack.map((item) => item)
+  };
 };
 
 // src/useModal.tsx
@@ -86,13 +88,13 @@ var useModal = () => {
 var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ModalHost = () => {
-  const { stack } = useModalContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Fragment, { children: stack.map((item) => item) });
+  const { render } = useModalHost();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Fragment, { children: render() });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ModalHost,
   ModalProvider,
-  renderModals,
-  useModal
+  useModal,
+  useModalHost
 });

package/dist/index.d.cts

@@ -10,6 +10,8 @@ declare const useModal: () => {
 /** @deprecated use renderModals instead */
 declare const ModalHost: FC;
 
-declare const renderModals: () => react.ReactNode[];
+declare const useModalHost: () => {
+    render: () => react.ReactNode[];
+};
 
-export { ModalHost, ModalProvider, renderModals, useModal };
+export { ModalHost, ModalProvider, useModal, useModalHost };

package/dist/index.d.ts

@@ -10,6 +10,8 @@ declare const useModal: () => {
 /** @deprecated use renderModals instead */
 declare const ModalHost: FC;
 
-declare const renderModals: () => react.ReactNode[];
+declare const useModalHost: () => {
+    render: () => react.ReactNode[];
+};
 
-export { ModalHost, ModalProvider, renderModals, useModal };
+export { ModalHost, ModalProvider, useModal, useModalHost };

package/dist/index.js

@@ -24,9 +24,11 @@ var useModalContext = () => {
   }
   return context;
 };
-var renderModals = () => {
+var useModalHost = () => {
   const { stack } = useModalContext();
-  return stack.map((item) => item);
+  return {
+    render: () => stack.map((item) => item)
+  };
 };
 
 // src/useModal.tsx
@@ -57,12 +59,12 @@ var useModal = () => {
 import { Fragment } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ModalHost = () => {
-  const { stack } = useModalContext();
-  return /* @__PURE__ */ jsx2(Fragment, { children: stack.map((item) => item) });
+  const { render } = useModalHost();
+  return /* @__PURE__ */ jsx2(Fragment, { children: render() });
 };
 export {
   ModalHost,
   ModalProvider,
-  renderModals,
-  useModal
+  useModal,
+  useModalHost
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-modal",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Promise-based modal flows for React",
   "repository": {
     "type": "git",

package/src/ModalHost.tsx

@@ -1,13 +1,13 @@
-import React, { FC, Fragment } from 'react';
-import { useModalContext } from './useModalContext';
+import { FC, Fragment } from 'react';
+import { useModalHost } from './useModalContext';
 
 /** @deprecated use renderModals instead */
 export const ModalHost: FC = () => {
-    const { stack } = useModalContext();
+    const { render } = useModalHost();
 
     return (
         <Fragment>
-            {stack.map((item) => (item))}
+            {render()}
         </Fragment>
     );
 };

package/src/index.ts

@@ -1,4 +1,4 @@
 export { ModalProvider } from './ModalProvider';
 export { useModal } from './useModal';
 export { ModalHost } from './ModalHost';
-export { renderModals } from './useModalContext';
+export { useModalHost } from './useModalContext';

package/src/useModalContext.ts

@@ -11,8 +11,10 @@ export const useModalContext = () => {
     return context;
 };
 
-export const renderModals = () => {
+export const useModalHost = () => {
     const { stack } = useModalContext();
 
-    return stack.map((item) => (item));
+    return {
+        render: () => stack.map((item) => (item)),
+    };
 };