react-modal-port 0.1.4 → 0.2.0

package/dist/index.cjs

@@ -1,2 +1,2 @@
-var e=require("react/jsx-runtime"),t=require("react");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},r.apply(this,arguments)}var n=t.createContext({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}});function o(){return t.useContext(n)}exports.ModalContextProvider=function(o){var a=o.children,c=t.useState([]),u=c[0],s=c[1];return e.jsx(n.Provider,{value:{stack:u,launchModal:function(e,t,r){var n=Object.keys(t).reduce(function(e,r){var n=t[r];return e[r]=function(e){try{return Promise.resolve(n(e)).then(function(e){return s(u.slice(0,-1)),e})}catch(e){return Promise.reject(e)}},e},{});s([].concat(u,[{render:e,resolvers:n,onBackdropClickUse:r,state:{}}]))},updateStack:s,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),s(t)}},children:a})},exports.ModalPort=function(r){var n=r.onModalLaunch,a=r.onModalClose,c=r.render,u=o().stack,s=t.useMemo(function(){return u.length>0?u[u.length-1]:null},[u]),l=t.useCallback(function(e){e.currentTarget===e.target&&(null==s?void 0:s.onBackdropClickUse)&&s.resolvers[s.onBackdropClickUse](e)},[s]);return t.useEffect(function(){s?n&&n():a&&a()},[s,n,a]),s&&e.jsx(c,{onBackdropClick:l,children:s.render(s.resolvers)})||null},exports.useModal=function(){return o().launchModal},exports.useModalContext=o,exports.useModalState=function(){var e=o(),t=e.stack,r=e.updateState;if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,r]};
+var e=require("react/jsx-runtime"),t=require("react");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},r.apply(this,arguments)}var n=t.createContext({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}});function o(){return t.useContext(n)}exports.ModalContextProvider=function(o){var a=o.children,c=t.useState([]),u=c[0],s=c[1],l={stack:u,launchModal:function(e,t,r){void 0===r&&(r={});var n=Object.keys(t).reduce(function(e,r){var n=t[r];return e[r]=function(){try{return Promise.resolve(n.apply(void 0,[].slice.call(arguments))).then(function(e){return s(function(e){return e.slice(0,-1)}),e})}catch(e){return Promise.reject(e)}},e},{});s([].concat(u,[{render:e,resolvers:n,props:r,state:{}}]))},updateStack:s,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),s(t)}};return e.jsx(n.Provider,{value:l,children:a})},exports.ModalPort=function(n){var a=n.onModalLaunch,c=n.onModalClose,u=n.render,s=o().stack,l=t.useMemo(function(){return s.length>0?s[s.length-1]:null},[s]),i=t.useCallback(function(e){e.currentTarget===e.target&&(null==l?void 0:l.resolvers.onBackdropClickUse)&&l.resolvers.onBackdropClickUse(e)},[l]);return t.useEffect(function(){l?a&&a():c&&c()},[l,a,c]),l&&e.jsx(u,{onBackdropClick:i,children:l.render(r({},l.resolvers,l.props))})||null},exports.useModal=function(){return o().launchModal},exports.useModalContext=o,exports.useModalState=function(){var e=o(),t=e.stack,r=e.updateState;if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,r]};
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n  createContext, \n  useContext, \n  useState, \n  type SyntheticEvent \n} from 'react';\nimport { \n  type ModalStackItem,\n  type ModalContextProperties,\n  type LaunchModal,\n  type LaunchModalResolvers,\n  type ModalState,\n  type UpdateModalState,\n} from '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n  stack: [],\n  launchModal: () => {},\n  updateStack: () => {},\n  updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n  const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n  const launchModal: LaunchModal = (render, resolvers, onBackdropClickUse) => {\n    // Wrap resolvers to update the stack\n    const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n      const resolver = resolvers[key];\n      acc[key] = async (ev?: SyntheticEvent) => {\n        const result = await resolver(ev);\n        updateStack(stack.slice(0, -1));\n        return result;\n      };\n      return acc;\n    }, {} as LaunchModalResolvers);\n    updateStack([\n      ...stack,\n      {\n        render,\n        resolvers: wrappedResovers,\n        onBackdropClickUse,\n        state: {},\n      },\n    ]);\n  };\n\n  const updateState = (newState: ModalState) => {\n    const updatedStack = [\n      ...stack,\n    ];\n    updatedStack[stack.length - 1].state = { ...newState };\n    updateStack(updatedStack);\n  };\n\n  const contextProperties: ModalContextProperties = {\n    stack,\n    launchModal,\n    updateStack,\n    updateState,\n  };\n\n  return <ModalContext.Provider value={contextProperties}>{children}</ModalContext.Provider>;\n\n};\n\n/**\n * Get properties from the modal context\n * @returns {ModalContextProperties} Object with the modal context properties\n */\nexport function useModalContext(): ModalContextProperties {\n  return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\n  const { launchModal } = useModalContext();\n  return launchModal;\n}\n\n/**\n * Get access to the current modal state and a function to update it\n * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n  const { stack, updateState } = useModalContext();\n  if (stack.length === 0) \n    throw new Error('Trying to access modal state while no modal is open');\n  const state = stack[stack.length - 1].state;\n  return [ state, updateState ];\n}\n","import { \n  type ModalPortProps, \n  type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n  type SyntheticEvent, \n  useCallback, \n  useEffect, \n  useMemo\n} from \"react\";\n\nconst ModalPort: React.FC<ModalPortProps> = ({\n  onModalLaunch,\n  onModalClose,\n  render: Backdrop\n}) => {\n\n  const { stack } = useModalContext();\n  const currentModal: ModalStackItem | null = useMemo(\n    () => stack.length > 0 ? stack[stack.length - 1] : null,\n    [ stack ]\n  );\n  const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n    if (ev.currentTarget !== ev.target) return;\n    currentModal?.onBackdropClickUse &&\n    currentModal.resolvers[currentModal.onBackdropClickUse](ev);\n  }, [ currentModal ]);\n\n  useEffect(() => {\n    if (currentModal) {\n      onModalLaunch && onModalLaunch();\n    } else {\n      onModalClose && onModalClose();\n    }\n  }, [ currentModal, onModalLaunch, onModalClose ]);\n\n  return currentModal && (\n    <Backdrop onBackdropClick={onBackdropClick}>\n      {currentModal.render(currentModal.resolvers)}\n    </Backdrop>\n  ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","useModalContext","useContext","_ref","children","_useState","useState","_jsx","jsx","Provider","value","render","resolvers","onBackdropClickUse","wrappedResovers","Object","keys","reduce","acc","key","resolver","ev","Promise","resolve","then","result","slice","e","reject","concat","state","newState","updatedStack","length","_extends","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","currentTarget","target","useEffect","_useModalContext2","Error"],"mappings":"0RAea,IAAAA,EAAeC,EAAAA,cAAsC,CAChEC,MAAO,GACPC,YAAa,WAAK,EAClBC,YAAa,aACbC,YAAa,WACd,IAmDe,SAAAC,IACd,OAAOC,aAAWP,EACpB,8BAnDoC,SAAHQ,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAAQA,SAAmB,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAAA,GAuC1B,OAAOE,EAAAC,IAACb,EAAac,SAAQ,CAACC,MAPoB,CAChDb,MAAAA,EACAC,YAhC+B,SAACa,EAAQC,EAAWC,GAEnD,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAM3B,OALAD,EAAIC,YAAcE,GAAmB,WAAIC,QAAAC,QAClBH,EAASC,IAAGG,KAA3BC,SAAAA,GAEN,OADA1B,EAAYF,EAAM6B,MAAM,GAAI,IACrBD,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAL,QAAAM,OAAAD,EAAA,CAAA,EACMT,CACT,EAAG,CAAA,GACHnB,KAAW8B,OACNhC,EACH,CAAA,CACEc,OAAAA,EACAC,UAAWE,EACXD,mBAAAA,EACAiB,MAAO,MAGb,EAaE/B,YAAAA,EACAC,YAZkB,SAAC+B,GACnB,IAAMC,KAAYH,OACbhC,GAELmC,EAAanC,EAAMoC,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5ChC,EAAYiC,EACd,GASsD5B,SAAGA,GAE3D,oBCrD4C,SAA7BD,GAIV,IAHHgC,EAAahC,EAAbgC,cACAC,EAAYjC,EAAZiC,aACQC,EAAQlC,EAAhBQ,OAGQd,EAAUI,IAAVJ,MACFyC,EAAsCC,EAAOA,QACjD,WAAA,OAAM1C,EAAMoC,OAAS,EAAIpC,EAAMA,EAAMoC,OAAS,GAAK,IAAI,EACvD,CAAEpC,IAEE2C,EAAkBC,EAAWA,YAAC,SAACpB,GAC/BA,EAAGqB,gBAAkBrB,EAAGsB,SAChB,MAAZL,OAAY,EAAZA,EAAczB,qBACdyB,EAAa1B,UAAU0B,EAAazB,oBAAoBQ,EAC1D,EAAG,CAAEiB,IAUL,OARAM,EAAAA,UAAU,WACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACL/B,EAAAA,IAAC8B,EAAS,CAAAG,gBAAiBA,EACxBpC,SAAAkC,EAAa3B,OAAO2B,EAAa1B,cAEjC,IACP,8BDuCE,OADwBX,IAAhBH,WAEV,6DAOE,IAAA+C,EAA+B5C,IAAvBJ,EAAKgD,EAALhD,MAAOG,EAAW6C,EAAX7C,YACf,GAAqB,IAAjBH,EAAMoC,OACR,MAAM,IAAIa,MAAM,uDAElB,MAAO,CADOjD,EAAMA,EAAMoC,OAAS,GAAGH,MACtB9B,EAClB"}
+{"version":3,"file":"index.cjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n  createContext, \n  useContext, \n  useState, \n  type SyntheticEvent \n} from 'react';\nimport { \n  type ModalStackItem,\n  type ModalContextProperties,\n  type LaunchModal,\n  type LaunchModalResolvers,\n  type ModalState,\n  type UpdateModalState,\n} from '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n  stack: [],\n  launchModal: () => {},\n  updateStack: () => {},\n  updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n  const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n  const launchModal: LaunchModal = (render, resolvers, props = {}) => {\n    // Wrap resolvers to update the stack\n    const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n      const resolver = resolvers[key];\n      acc[key] = async (...args: any[]) => {\n        const result = await resolver(...args);\n        // update stack with an array conating all the items in the stack except the last one\n        updateStack(currStack => currStack.slice(0, -1));\n        return result;\n      };\n      return acc;\n    }, {} as LaunchModalResolvers);\n    updateStack([\n      ...stack,\n      {\n        render,\n        resolvers: wrappedResovers,\n        props,\n        state: {},\n      },\n    ]);\n  };\n\n  const updateState = (newState: ModalState) => {\n    const updatedStack = [\n      ...stack,\n    ];\n    updatedStack[stack.length - 1].state = { ...newState };\n    updateStack(updatedStack);\n  };\n\n  const contextProperties: ModalContextProperties = {\n    stack,\n    launchModal,\n    updateStack,\n    updateState,\n  };\n\n  return <ModalContext.Provider value={contextProperties}>{children}</ModalContext.Provider>;\n\n};\n\n/**\n * Get properties from the modal context\n * @returns {ModalContextProperties} Object with the modal context properties\n */\nexport function useModalContext(): ModalContextProperties {\n  return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\n  const { launchModal } = useModalContext();\n  return launchModal;\n}\n\n/**\n * Get access to the current modal state and a function to update it\n * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n  const { stack, updateState } = useModalContext();\n  if (stack.length === 0) \n    throw new Error('Trying to access modal state while no modal is open');\n  const state = stack[stack.length - 1].state;\n  return [ state, updateState ];\n}\n","import { \n  type ModalPortProps, \n  type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n  type SyntheticEvent, \n  useCallback, \n  useEffect, \n  useMemo\n} from \"react\";\n\nconst ModalPort: React.FC<ModalPortProps> = ({\n  onModalLaunch,\n  onModalClose,\n  render: Backdrop\n}) => {\n\n  const { stack } = useModalContext();\n  const currentModal: ModalStackItem | null = useMemo(\n    () => stack.length > 0 ? stack[stack.length - 1] : null,\n    [ stack ]\n  );\n  const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n    if (ev.currentTarget !== ev.target) return;\n    currentModal?.resolvers.onBackdropClickUse &&\n    currentModal.resolvers.onBackdropClickUse(ev);\n  }, [ currentModal ]);\n\n  useEffect(() => {\n    if (currentModal) {\n      onModalLaunch && onModalLaunch();\n    } else {\n      onModalClose && onModalClose();\n    }\n  }, [ currentModal, onModalLaunch, onModalClose ]);\n\n  return currentModal && (\n    <Backdrop onBackdropClick={onBackdropClick}>\n      {currentModal.render({\n        ...currentModal.resolvers,\n        ...currentModal.props,\n      })}\n    </Backdrop>\n  ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","useModalContext","useContext","_ref","children","_useState","useState","contextProperties","render","resolvers","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","Promise","resolve","apply","slice","call","arguments","then","result","currStack","e","reject","concat","state","newState","updatedStack","length","_extends","_jsx","Provider","value","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","ev","currentTarget","target","onBackdropClickUse","useEffect","_useModalContext2","Error"],"mappings":"8RAeaA,EAAeC,EAAaA,cAAyB,CAChEC,MAAO,GACPC,YAAa,WAAQ,EACrBC,YAAa,WAAQ,EACrBC,YAAa,WAAK,aAqDJC,IACd,OAAOC,EAAAA,WAAWP,EACpB,8BApDoC,SAAHQ,GAAM,IAAAC,EAAQD,EAARC,SAErCC,EAA+BC,EAAAA,SAA2B,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAE1B,GA+BME,EAA4C,CAChDV,MAAAA,EACAC,YAjC+B,SAACU,EAAQC,EAAWC,QAAAA,IAAAA,IAAAA,EAAQ,CAAA,GAE3D,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,kBAAgCE,OAAAA,QAAAC,QACbF,EAAQG,WAAA,EAAA,GAAAC,MAAAC,KADKC,aACIC,KAAhCC,SAAAA,GAGN,OADA1B,EAAY,SAAA2B,UAAaA,EAAUL,MAAM,GAAI,EAAE,GACxCI,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAT,QAAAU,OAAAD,EACD,CAAA,EAAOZ,CACT,EAAG,IACHhB,KAAW8B,OACNhC,EACH,CAAA,CACEW,OAAAA,EACAC,UAAWE,EACXD,MAAAA,EACAoB,MAAO,CAAA,KAGb,EAaE/B,YAAAA,EACAC,YAZkB,SAAC+B,GACnB,IAAMC,EAAY,GAAAH,OACbhC,GAELmC,EAAanC,EAAMoC,OAAS,GAAGH,MAAKI,KAAQH,GAC5ChC,EAAYiC,EACd,GASA,OAAOG,MAACxC,EAAayC,SAAQ,CAACC,MAAO9B,EAAiBH,SAAGA,GAE3D,oBCtD4C,SAA7BD,GACb,IAAAmC,EAAanC,EAAbmC,cACAC,EAAYpC,EAAZoC,aACQC,EAAQrC,EAAhBK,OAGQX,EAAUI,IAAVJ,MACF4C,EAAsCC,EAAOA,QACjD,kBAAM7C,EAAMoC,OAAS,EAAIpC,EAAMA,EAAMoC,OAAS,GAAK,IAAI,EACvD,CAAEpC,IAEE8C,EAAkBC,cAAY,SAACC,GAC/BA,EAAGC,gBAAkBD,EAAGE,SAChB,MAAZN,OAAY,EAAZA,EAAchC,UAAUuC,qBACxBP,EAAahC,UAAUuC,mBAAmBH,EAC5C,EAAG,CAAEJ,IAUL,OARAQ,EAASA,UAAC,WACJR,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACLN,MAACK,EAAQ,CAACG,gBAAiBA,EAAevC,SACvCqC,EAAajC,OAAM0B,EACfO,CAAAA,EAAAA,EAAahC,UACbgC,EAAa/B,WAGjB,IACP,mBDmCgB,WAEd,OADwBT,IAAhBH,WAEV,kDAMgB,WACd,IAAAoD,EAA+BjD,IAAvBJ,EAAKqD,EAALrD,MAAOG,EAAWkD,EAAXlD,YACf,GAAqB,IAAjBH,EAAMoC,OACR,MAAU,IAAAkB,MAAM,uDAElB,MAAO,CADOtD,EAAMA,EAAMoC,OAAS,GAAGH,MACtB9B,EAClB"}

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import{jsx as n}from"react/jsx-runtime";import{createContext as t,useState as r,useContext as e,useMemo as o,useCallback as a,useEffect as c}from"react";function u(){return u=Object.assign?Object.assign.bind():function(n){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&(n[e]=r[e])}return n},u.apply(this,arguments)}var i=t({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}}),l=function(t){var e=t.children,o=r([]),a=o[0],c=o[1];return n(i.Provider,{value:{stack:a,launchModal:function(n,t,r){var e=Object.keys(t).reduce(function(n,r){var e=t[r];return n[r]=function(n){try{return Promise.resolve(e(n)).then(function(n){return c(a.slice(0,-1)),n})}catch(n){return Promise.reject(n)}},n},{});c([].concat(a,[{render:n,resolvers:e,onBackdropClickUse:r,state:{}}]))},updateStack:c,updateState:function(n){var t=[].concat(a);t[a.length-1].state=u({},n),c(t)}},children:e})};function s(){return e(i)}function d(){return s().launchModal}function f(){var n=s(),t=n.stack,r=n.updateState;if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,r]}var h=function(t){var r=t.onModalLaunch,e=t.onModalClose,u=t.render,i=s().stack,l=o(function(){return i.length>0?i[i.length-1]:null},[i]),d=a(function(n){n.currentTarget===n.target&&(null==l?void 0:l.onBackdropClickUse)&&l.resolvers[l.onBackdropClickUse](n)},[l]);return c(function(){l?r&&r():e&&e()},[l,r,e]),l&&n(u,{onBackdropClick:d,children:l.render(l.resolvers)})||null};export{l as ModalContextProvider,h as ModalPort,d as useModal,s as useModalContext,f as useModalState};
+import{jsx as n}from"react/jsx-runtime";import{createContext as r,useState as t,useContext as e,useMemo as o,useCallback as a,useEffect as c}from"react";function u(){return u=Object.assign?Object.assign.bind():function(n){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(n[e]=t[e])}return n},u.apply(this,arguments)}var i=r({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}}),l=function(r){var e=r.children,o=t([]),a=o[0],c=o[1],l={stack:a,launchModal:function(n,r,t){void 0===t&&(t={});var e=Object.keys(r).reduce(function(n,t){var e=r[t];return n[t]=function(){try{return Promise.resolve(e.apply(void 0,[].slice.call(arguments))).then(function(n){return c(function(n){return n.slice(0,-1)}),n})}catch(n){return Promise.reject(n)}},n},{});c([].concat(a,[{render:n,resolvers:e,props:t,state:{}}]))},updateStack:c,updateState:function(n){var r=[].concat(a);r[a.length-1].state=u({},n),c(r)}};return n(i.Provider,{value:l,children:e})};function s(){return e(i)}function d(){return s().launchModal}function f(){var n=s(),r=n.stack,t=n.updateState;if(0===r.length)throw new Error("Trying to access modal state while no modal is open");return[r[r.length-1].state,t]}var p=function(r){var t=r.onModalLaunch,e=r.onModalClose,i=r.render,l=s().stack,d=o(function(){return l.length>0?l[l.length-1]:null},[l]),f=a(function(n){n.currentTarget===n.target&&(null==d?void 0:d.resolvers.onBackdropClickUse)&&d.resolvers.onBackdropClickUse(n)},[d]);return c(function(){d?t&&t():e&&e()},[d,t,e]),d&&n(i,{onBackdropClick:f,children:d.render(u({},d.resolvers,d.props))})||null};export{l as ModalContextProvider,p as ModalPort,d as useModal,s as useModalContext,f as useModalState};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n  createContext, \n  useContext, \n  useState, \n  type SyntheticEvent \n} from 'react';\nimport { \n  type ModalStackItem,\n  type ModalContextProperties,\n  type LaunchModal,\n  type LaunchModalResolvers,\n  type ModalState,\n  type UpdateModalState,\n} from '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n  stack: [],\n  launchModal: () => {},\n  updateStack: () => {},\n  updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n  const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n  const launchModal: LaunchModal = (render, resolvers, onBackdropClickUse) => {\n    // Wrap resolvers to update the stack\n    const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n      const resolver = resolvers[key];\n      acc[key] = async (ev?: SyntheticEvent) => {\n        const result = await resolver(ev);\n        updateStack(stack.slice(0, -1));\n        return result;\n      };\n      return acc;\n    }, {} as LaunchModalResolvers);\n    updateStack([\n      ...stack,\n      {\n        render,\n        resolvers: wrappedResovers,\n        onBackdropClickUse,\n        state: {},\n      },\n    ]);\n  };\n\n  const updateState = (newState: ModalState) => {\n    const updatedStack = [\n      ...stack,\n    ];\n    updatedStack[stack.length - 1].state = { ...newState };\n    updateStack(updatedStack);\n  };\n\n  const contextProperties: ModalContextProperties = {\n    stack,\n    launchModal,\n    updateStack,\n    updateState,\n  };\n\n  return <ModalContext.Provider value={contextProperties}>{children}</ModalContext.Provider>;\n\n};\n\n/**\n * Get properties from the modal context\n * @returns {ModalContextProperties} Object with the modal context properties\n */\nexport function useModalContext(): ModalContextProperties {\n  return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\n  const { launchModal } = useModalContext();\n  return launchModal;\n}\n\n/**\n * Get access to the current modal state and a function to update it\n * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n  const { stack, updateState } = useModalContext();\n  if (stack.length === 0) \n    throw new Error('Trying to access modal state while no modal is open');\n  const state = stack[stack.length - 1].state;\n  return [ state, updateState ];\n}\n","import { \n  type ModalPortProps, \n  type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n  type SyntheticEvent, \n  useCallback, \n  useEffect, \n  useMemo\n} from \"react\";\n\nconst ModalPort: React.FC<ModalPortProps> = ({\n  onModalLaunch,\n  onModalClose,\n  render: Backdrop\n}) => {\n\n  const { stack } = useModalContext();\n  const currentModal: ModalStackItem | null = useMemo(\n    () => stack.length > 0 ? stack[stack.length - 1] : null,\n    [ stack ]\n  );\n  const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n    if (ev.currentTarget !== ev.target) return;\n    currentModal?.onBackdropClickUse &&\n    currentModal.resolvers[currentModal.onBackdropClickUse](ev);\n  }, [ currentModal ]);\n\n  useEffect(() => {\n    if (currentModal) {\n      onModalLaunch && onModalLaunch();\n    } else {\n      onModalClose && onModalClose();\n    }\n  }, [ currentModal, onModalLaunch, onModalClose ]);\n\n  return currentModal && (\n    <Backdrop onBackdropClick={onBackdropClick}>\n      {currentModal.render(currentModal.resolvers)}\n    </Backdrop>\n  ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","ModalContextProvider","_ref","children","_useState","useState","_jsx","Provider","value","render","resolvers","onBackdropClickUse","wrappedResovers","Object","keys","reduce","acc","key","resolver","ev","Promise","resolve","then","result","slice","e","reject","concat","state","newState","updatedStack","length","_extends","useModalContext","useContext","useModal","useModalState","_useModalContext2","Error","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","currentTarget","target","useEffect"],"mappings":"6XAea,IAAAA,EAAeC,EAAsC,CAChEC,MAAO,GACPC,YAAa,WAAK,EAClBC,YAAa,aACbC,YAAa,WACd,IAEYC,EAAuB,SAAHC,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAA2B,IAAlDR,EAAKO,EAAEL,GAAAA,EAAWK,EAAA,GAuC1B,OAAOE,EAACX,EAAaY,SAAQ,CAACC,MAPoB,CAChDX,MAAAA,EACAC,YAhC+B,SAACW,EAAQC,EAAWC,GAEnD,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAM3B,OALAD,EAAIC,YAAcE,GAAmB,WAAIC,QAAAC,QAClBH,EAASC,IAAGG,KAA3BC,SAAAA,GAEN,OADAxB,EAAYF,EAAM2B,MAAM,GAAI,IACrBD,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAL,QAAAM,OAAAD,EAAA,CAAA,EACMT,CACT,EAAG,CAAA,GACHjB,KAAW4B,OACN9B,EACH,CAAA,CACEY,OAAAA,EACAC,UAAWE,EACXD,mBAAAA,EACAiB,MAAO,MAGb,EAaE7B,YAAAA,EACAC,YAZkB,SAAC6B,GACnB,IAAMC,KAAYH,OACb9B,GAELiC,EAAajC,EAAMkC,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5C9B,EAAY+B,EACd,GASsD3B,SAAGA,GAE3D,EAMgB,SAAA8B,IACd,OAAOC,EAAWvC,EACpB,UAMgBwC,IAEd,OADwBF,IAAhBnC,WAEV,UAMgBsC,IACd,IAAAC,EAA+BJ,IAAvBpC,EAAKwC,EAALxC,MAAOG,EAAWqC,EAAXrC,YACf,GAAqB,IAAjBH,EAAMkC,OACR,MAAM,IAAIO,MAAM,uDAElB,MAAO,CADOzC,EAAMA,EAAMkC,OAAS,GAAGH,MACtB5B,EAClB,CClFM,IAAAuC,EAAsC,SAA7BrC,GAIV,IAHHsC,EAAatC,EAAbsC,cACAC,EAAYvC,EAAZuC,aACQC,EAAQxC,EAAhBO,OAGQZ,EAAUoC,IAAVpC,MACF8C,EAAsCC,EAC1C,WAAA,OAAM/C,EAAMkC,OAAS,EAAIlC,EAAMA,EAAMkC,OAAS,GAAK,IAAI,EACvD,CAAElC,IAEEgD,EAAkBC,EAAY,SAAC3B,GAC/BA,EAAG4B,gBAAkB5B,EAAG6B,SAChB,MAAZL,OAAY,EAAZA,EAAchC,qBACdgC,EAAajC,UAAUiC,EAAahC,oBAAoBQ,EAC1D,EAAG,CAAEwB,IAUL,OARAM,EAAU,WACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACLrC,EAACoC,EAAS,CAAAG,gBAAiBA,EACxB1C,SAAAwC,EAAalC,OAAOkC,EAAajC,cAEjC,IACP"}
+{"version":3,"file":"index.mjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n  createContext, \n  useContext, \n  useState, \n  type SyntheticEvent \n} from 'react';\nimport { \n  type ModalStackItem,\n  type ModalContextProperties,\n  type LaunchModal,\n  type LaunchModalResolvers,\n  type ModalState,\n  type UpdateModalState,\n} from '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n  stack: [],\n  launchModal: () => {},\n  updateStack: () => {},\n  updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n  const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n  const launchModal: LaunchModal = (render, resolvers, props = {}) => {\n    // Wrap resolvers to update the stack\n    const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n      const resolver = resolvers[key];\n      acc[key] = async (...args: any[]) => {\n        const result = await resolver(...args);\n        // update stack with an array conating all the items in the stack except the last one\n        updateStack(currStack => currStack.slice(0, -1));\n        return result;\n      };\n      return acc;\n    }, {} as LaunchModalResolvers);\n    updateStack([\n      ...stack,\n      {\n        render,\n        resolvers: wrappedResovers,\n        props,\n        state: {},\n      },\n    ]);\n  };\n\n  const updateState = (newState: ModalState) => {\n    const updatedStack = [\n      ...stack,\n    ];\n    updatedStack[stack.length - 1].state = { ...newState };\n    updateStack(updatedStack);\n  };\n\n  const contextProperties: ModalContextProperties = {\n    stack,\n    launchModal,\n    updateStack,\n    updateState,\n  };\n\n  return <ModalContext.Provider value={contextProperties}>{children}</ModalContext.Provider>;\n\n};\n\n/**\n * Get properties from the modal context\n * @returns {ModalContextProperties} Object with the modal context properties\n */\nexport function useModalContext(): ModalContextProperties {\n  return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\n  const { launchModal } = useModalContext();\n  return launchModal;\n}\n\n/**\n * Get access to the current modal state and a function to update it\n * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n  const { stack, updateState } = useModalContext();\n  if (stack.length === 0) \n    throw new Error('Trying to access modal state while no modal is open');\n  const state = stack[stack.length - 1].state;\n  return [ state, updateState ];\n}\n","import { \n  type ModalPortProps, \n  type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n  type SyntheticEvent, \n  useCallback, \n  useEffect, \n  useMemo\n} from \"react\";\n\nconst ModalPort: React.FC<ModalPortProps> = ({\n  onModalLaunch,\n  onModalClose,\n  render: Backdrop\n}) => {\n\n  const { stack } = useModalContext();\n  const currentModal: ModalStackItem | null = useMemo(\n    () => stack.length > 0 ? stack[stack.length - 1] : null,\n    [ stack ]\n  );\n  const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n    if (ev.currentTarget !== ev.target) return;\n    currentModal?.resolvers.onBackdropClickUse &&\n    currentModal.resolvers.onBackdropClickUse(ev);\n  }, [ currentModal ]);\n\n  useEffect(() => {\n    if (currentModal) {\n      onModalLaunch && onModalLaunch();\n    } else {\n      onModalClose && onModalClose();\n    }\n  }, [ currentModal, onModalLaunch, onModalClose ]);\n\n  return currentModal && (\n    <Backdrop onBackdropClick={onBackdropClick}>\n      {currentModal.render({\n        ...currentModal.resolvers,\n        ...currentModal.props,\n      })}\n    </Backdrop>\n  ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","ModalContextProvider","_ref","children","_useState","useState","contextProperties","render","resolvers","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","Promise","resolve","apply","slice","call","arguments","then","result","currStack","e","reject","concat","state","newState","updatedStack","length","_extends","_jsx","Provider","value","useModalContext","useContext","useModal","useModalState","_useModalContext2","Error","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","ev","currentTarget","target","onBackdropClickUse","useEffect"],"mappings":"iYAeaA,EAAeC,EAAsC,CAChEC,MAAO,GACPC,YAAa,WAAQ,EACrBC,YAAa,WAAQ,EACrBC,YAAa,WAAK,IAGPC,EAAuB,SAAHC,GAAM,IAAAC,EAAQD,EAARC,SAErCC,EAA+BC,EAA2B,IAAlDR,EAAKO,EAAEL,GAAAA,EAAWK,EAE1B,GA+BME,EAA4C,CAChDT,MAAAA,EACAC,YAjC+B,SAACS,EAAQC,EAAWC,QAAAA,IAAAA,IAAAA,EAAQ,CAAA,GAE3D,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,kBAAgCE,OAAAA,QAAAC,QACbF,EAAQG,WAAA,EAAA,GAAAC,MAAAC,KADKC,aACIC,KAAhCC,SAAAA,GAGN,OADAzB,EAAY,SAAA0B,UAAaA,EAAUL,MAAM,GAAI,EAAE,GACxCI,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAT,QAAAU,OAAAD,EACD,CAAA,EAAOZ,CACT,EAAG,IACHf,KAAW6B,OACN/B,EACH,CAAA,CACEU,OAAAA,EACAC,UAAWE,EACXD,MAAAA,EACAoB,MAAO,CAAA,KAGb,EAaE9B,YAAAA,EACAC,YAZkB,SAAC8B,GACnB,IAAMC,EAAY,GAAAH,OACb/B,GAELkC,EAAalC,EAAMmC,OAAS,GAAGH,MAAKI,KAAQH,GAC5C/B,EAAYgC,EACd,GASA,OAAOG,EAACvC,EAAawC,SAAQ,CAACC,MAAO9B,EAAiBH,SAAGA,GAE3D,WAMgBkC,IACd,OAAOC,EAAW3C,EACpB,CAMgB,SAAA4C,IAEd,OADwBF,IAAhBvC,WAEV,CAMgB,SAAA0C,IACd,IAAAC,EAA+BJ,IAAvBxC,EAAK4C,EAAL5C,MAAOG,EAAWyC,EAAXzC,YACf,GAAqB,IAAjBH,EAAMmC,OACR,MAAU,IAAAU,MAAM,uDAElB,MAAO,CADO7C,EAAMA,EAAMmC,OAAS,GAAGH,MACtB7B,EAClB,CCnFM,IAAA2C,EAAsC,SAA7BzC,GACb,IAAA0C,EAAa1C,EAAb0C,cACAC,EAAY3C,EAAZ2C,aACQC,EAAQ5C,EAAhBK,OAGQV,EAAUwC,IAAVxC,MACFkD,EAAsCC,EAC1C,kBAAMnD,EAAMmC,OAAS,EAAInC,EAAMA,EAAMmC,OAAS,GAAK,IAAI,EACvD,CAAEnC,IAEEoD,EAAkBC,EAAY,SAACC,GAC/BA,EAAGC,gBAAkBD,EAAGE,SAChB,MAAZN,OAAY,EAAZA,EAAcvC,UAAU8C,qBACxBP,EAAavC,UAAU8C,mBAAmBH,EAC5C,EAAG,CAAEJ,IAUL,OARAQ,EAAU,WACJR,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACLb,EAACY,EAAQ,CAACG,gBAAiBA,EAAe9C,SACvC4C,EAAaxC,OAAM0B,EACfc,CAAAA,EAAAA,EAAavC,UACbuC,EAAatC,WAGjB,IACP"}

package/dist/index.modern.mjs

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{createContext as e,useState as n,useContext as r,useMemo as o,useCallback as a,useEffect as c}from"react";function s(){return s=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},s.apply(this,arguments)}const l=e({stack:[],launchModal:()=>{},updateStack:()=>{},updateState:()=>{}}),u=({children:e})=>{const[r,o]=n([]);return t(l.Provider,{value:{stack:r,launchModal:(t,e,n)=>{const a=Object.keys(e).reduce((t,n)=>{const a=e[n];return t[n]=async t=>{const e=await a(t);return o(r.slice(0,-1)),e},t},{});o([...r,{render:t,resolvers:a,onBackdropClickUse:n,state:{}}])},updateStack:o,updateState:t=>{const e=[...r];e[r.length-1].state=s({},t),o(e)}},children:e})};function i(){return r(l)}function d(){const{launchModal:t}=i();return t}function p(){const{stack:t,updateState:e}=i();if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,e]}const h=({onModalLaunch:e,onModalClose:n,render:r})=>{const{stack:s}=i(),l=o(()=>s.length>0?s[s.length-1]:null,[s]),u=a(t=>{t.currentTarget===t.target&&(null==l?void 0:l.onBackdropClickUse)&&l.resolvers[l.onBackdropClickUse](t)},[l]);return c(()=>{l?e&&e():n&&n()},[l,e,n]),l&&t(r,{onBackdropClick:u,children:l.render(l.resolvers)})||null};export{u as ModalContextProvider,h as ModalPort,d as useModal,i as useModalContext,p as useModalState};
+import{jsx as t}from"react/jsx-runtime";import{createContext as e,useState as r,useContext as n,useMemo as o,useCallback as a,useEffect as c}from"react";function s(){return s=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},s.apply(this,arguments)}const l=e({stack:[],launchModal:()=>{},updateStack:()=>{},updateState:()=>{}}),u=({children:e})=>{const[n,o]=r([]);return t(l.Provider,{value:{stack:n,launchModal:(t,e,r={})=>{const a=Object.keys(e).reduce((t,r)=>{const n=e[r];return t[r]=async(...t)=>{const e=await n(...t);return o(t=>t.slice(0,-1)),e},t},{});o([...n,{render:t,resolvers:a,props:r,state:{}}])},updateStack:o,updateState:t=>{const e=[...n];e[n.length-1].state=s({},t),o(e)}},children:e})};function i(){return n(l)}function d(){const{launchModal:t}=i();return t}function p(){const{stack:t,updateState:e}=i();if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,e]}const h=({onModalLaunch:e,onModalClose:r,render:n})=>{const{stack:l}=i(),u=o(()=>l.length>0?l[l.length-1]:null,[l]),d=a(t=>{t.currentTarget===t.target&&(null==u?void 0:u.resolvers.onBackdropClickUse)&&u.resolvers.onBackdropClickUse(t)},[u]);return c(()=>{u?e&&e():r&&r()},[u,e,r]),u&&t(n,{onBackdropClick:d,children:u.render(s({},u.resolvers,u.props))})||null};export{u as ModalContextProvider,h as ModalPort,d as useModal,i as useModalContext,p as useModalState};
 //# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.mjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n  createContext, \n  useContext, \n  useState, \n  type SyntheticEvent \n} from 'react';\nimport { \n  type ModalStackItem,\n  type ModalContextProperties,\n  type LaunchModal,\n  type LaunchModalResolvers,\n  type ModalState,\n  type UpdateModalState,\n} from '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n  stack: [],\n  launchModal: () => {},\n  updateStack: () => {},\n  updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n  const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n  const launchModal: LaunchModal = (render, resolvers, onBackdropClickUse) => {\n    // Wrap resolvers to update the stack\n    const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n      const resolver = resolvers[key];\n      acc[key] = async (ev?: SyntheticEvent) => {\n        const result = await resolver(ev);\n        updateStack(stack.slice(0, -1));\n        return result;\n      };\n      return acc;\n    }, {} as LaunchModalResolvers);\n    updateStack([\n      ...stack,\n      {\n        render,\n        resolvers: wrappedResovers,\n        onBackdropClickUse,\n        state: {},\n      },\n    ]);\n  };\n\n  const updateState = (newState: ModalState) => {\n    const updatedStack = [\n      ...stack,\n    ];\n    updatedStack[stack.length - 1].state = { ...newState };\n    updateStack(updatedStack);\n  };\n\n  const contextProperties: ModalContextProperties = {\n    stack,\n    launchModal,\n    updateStack,\n    updateState,\n  };\n\n  return <ModalContext.Provider value={contextProperties}>{children}</ModalContext.Provider>;\n\n};\n\n/**\n * Get properties from the modal context\n * @returns {ModalContextProperties} Object with the modal context properties\n */\nexport function useModalContext(): ModalContextProperties {\n  return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\n  const { launchModal } = useModalContext();\n  return launchModal;\n}\n\n/**\n * Get access to the current modal state and a function to update it\n * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n  const { stack, updateState } = useModalContext();\n  if (stack.length === 0) \n    throw new Error('Trying to access modal state while no modal is open');\n  const state = stack[stack.length - 1].state;\n  return [ state, updateState ];\n}\n","import { \n  type ModalPortProps, \n  type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n  type SyntheticEvent, \n  useCallback, \n  useEffect, \n  useMemo\n} from \"react\";\n\nconst ModalPort: React.FC<ModalPortProps> = ({\n  onModalLaunch,\n  onModalClose,\n  render: Backdrop\n}) => {\n\n  const { stack } = useModalContext();\n  const currentModal: ModalStackItem | null = useMemo(\n    () => stack.length > 0 ? stack[stack.length - 1] : null,\n    [ stack ]\n  );\n  const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n    if (ev.currentTarget !== ev.target) return;\n    currentModal?.onBackdropClickUse &&\n    currentModal.resolvers[currentModal.onBackdropClickUse](ev);\n  }, [ currentModal ]);\n\n  useEffect(() => {\n    if (currentModal) {\n      onModalLaunch && onModalLaunch();\n    } else {\n      onModalClose && onModalClose();\n    }\n  }, [ currentModal, onModalLaunch, onModalClose ]);\n\n  return currentModal && (\n    <Backdrop onBackdropClick={onBackdropClick}>\n      {currentModal.render(currentModal.resolvers)}\n    </Backdrop>\n  ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","ModalContextProvider","children","useState","_jsx","Provider","value","render","resolvers","onBackdropClickUse","wrappedResovers","Object","keys","reduce","acc","key","resolver","async","result","ev","slice","state","newState","updatedStack","length","_extends","useModalContext","useContext","useModal","useModalState","Error","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","currentTarget","target","useEffect"],"mappings":"6XAea,MAAAA,EAAeC,EAAsC,CAChEC,MAAO,GACPC,YAAaA,OACbC,YAAaA,OACbC,YAAaA,SAGFC,EAAuBA,EAAGC,eAErC,MAAQL,EAAOE,GAAgBI,EAA2B,IAuC1D,OAAOC,EAACT,EAAaU,SAAQ,CAACC,MAPoB,CAChDT,QACAC,YAhC+BA,CAACS,EAAQC,EAAWC,KAEnD,MAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,CAACC,EAAKC,KAC1D,MAAMC,EAAWR,EAAUO,GAM3B,OALAD,EAAIC,GAAOE,UACT,MAAMC,QAAeF,EAASG,GAE9B,OADApB,EAAYF,EAAMuB,MAAM,GAAI,IACrBF,GAEFJ,GACN,IACHf,EAAY,IACPF,EACH,CACEU,SACAC,UAAWE,EACXD,qBACAY,MAAO,CACR,IACF,EAcDtB,cACAC,YAZmBsB,IACnB,MAAMC,EAAe,IAChB1B,GAEL0B,EAAa1B,EAAM2B,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5CvB,EAAYwB,EAAY,GAU4BrB,SAAGA,GAAQ,EAQnD,SAAAwB,IACd,OAAOC,EAAWhC,EACpB,CAMgB,SAAAiC,IACd,MAAM9B,YAAEA,GAAgB4B,IACxB,OAAO5B,CACT,UAMgB+B,IACd,MAAMhC,MAAEA,EAAKG,YAAEA,GAAgB0B,IAC/B,GAAqB,IAAjB7B,EAAM2B,OACR,MAAM,IAAIM,MAAM,uDAElB,MAAO,CADOjC,EAAMA,EAAM2B,OAAS,GAAGH,MACtBrB,EAClB,CClFM,MAAA+B,EAAsCA,EAC1CC,gBACAC,eACA1B,OAAQ2B,MAGR,MAAMrC,MAAEA,GAAU6B,IACZS,EAAsCC,EAC1C,IAAMvC,EAAM2B,OAAS,EAAI3B,EAAMA,EAAM2B,OAAS,GAAK,KACnD,CAAE3B,IAEEwC,EAAkBC,EAAanB,IAC/BA,EAAGoB,gBAAkBpB,EAAGqB,eAC5BL,SAAAA,EAAc1B,qBACd0B,EAAa3B,UAAU2B,EAAa1B,oBAAoBU,EAAE,EACzD,CAAEgB,IAUL,OARAM,EAAU,KACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAClB,EACC,CAAEE,EAAcH,EAAeC,IAE3BE,GACL/B,EAAC8B,EAAS,CAAAG,gBAAiBA,EACxBnC,SAAAiC,EAAa5B,OAAO4B,EAAa3B,cAEjC"}
+{"version":3,"file":"index.modern.mjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n  createContext, \n  useContext, \n  useState, \n  type SyntheticEvent \n} from 'react';\nimport { \n  type ModalStackItem,\n  type ModalContextProperties,\n  type LaunchModal,\n  type LaunchModalResolvers,\n  type ModalState,\n  type UpdateModalState,\n} from '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n  stack: [],\n  launchModal: () => {},\n  updateStack: () => {},\n  updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n  const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n  const launchModal: LaunchModal = (render, resolvers, props = {}) => {\n    // Wrap resolvers to update the stack\n    const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n      const resolver = resolvers[key];\n      acc[key] = async (...args: any[]) => {\n        const result = await resolver(...args);\n        // update stack with an array conating all the items in the stack except the last one\n        updateStack(currStack => currStack.slice(0, -1));\n        return result;\n      };\n      return acc;\n    }, {} as LaunchModalResolvers);\n    updateStack([\n      ...stack,\n      {\n        render,\n        resolvers: wrappedResovers,\n        props,\n        state: {},\n      },\n    ]);\n  };\n\n  const updateState = (newState: ModalState) => {\n    const updatedStack = [\n      ...stack,\n    ];\n    updatedStack[stack.length - 1].state = { ...newState };\n    updateStack(updatedStack);\n  };\n\n  const contextProperties: ModalContextProperties = {\n    stack,\n    launchModal,\n    updateStack,\n    updateState,\n  };\n\n  return <ModalContext.Provider value={contextProperties}>{children}</ModalContext.Provider>;\n\n};\n\n/**\n * Get properties from the modal context\n * @returns {ModalContextProperties} Object with the modal context properties\n */\nexport function useModalContext(): ModalContextProperties {\n  return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\n  const { launchModal } = useModalContext();\n  return launchModal;\n}\n\n/**\n * Get access to the current modal state and a function to update it\n * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n  const { stack, updateState } = useModalContext();\n  if (stack.length === 0) \n    throw new Error('Trying to access modal state while no modal is open');\n  const state = stack[stack.length - 1].state;\n  return [ state, updateState ];\n}\n","import { \n  type ModalPortProps, \n  type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n  type SyntheticEvent, \n  useCallback, \n  useEffect, \n  useMemo\n} from \"react\";\n\nconst ModalPort: React.FC<ModalPortProps> = ({\n  onModalLaunch,\n  onModalClose,\n  render: Backdrop\n}) => {\n\n  const { stack } = useModalContext();\n  const currentModal: ModalStackItem | null = useMemo(\n    () => stack.length > 0 ? stack[stack.length - 1] : null,\n    [ stack ]\n  );\n  const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n    if (ev.currentTarget !== ev.target) return;\n    currentModal?.resolvers.onBackdropClickUse &&\n    currentModal.resolvers.onBackdropClickUse(ev);\n  }, [ currentModal ]);\n\n  useEffect(() => {\n    if (currentModal) {\n      onModalLaunch && onModalLaunch();\n    } else {\n      onModalClose && onModalClose();\n    }\n  }, [ currentModal, onModalLaunch, onModalClose ]);\n\n  return currentModal && (\n    <Backdrop onBackdropClick={onBackdropClick}>\n      {currentModal.render({\n        ...currentModal.resolvers,\n        ...currentModal.props,\n      })}\n    </Backdrop>\n  ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","ModalContextProvider","children","useState","_jsx","Provider","value","render","resolvers","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","async","args","result","currStack","slice","state","newState","updatedStack","length","_extends","useModalContext","useContext","useModal","useModalState","Error","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","ev","currentTarget","target","onBackdropClickUse","useEffect"],"mappings":"mYAeaA,EAAeC,EAAsC,CAChEC,MAAO,GACPC,YAAaA,OACbC,YAAaA,OACbC,YAAaA,SAGFC,EAAuBA,EAAGC,eAErC,MAAQL,EAAOE,GAAgBI,EAA2B,IAwC1D,OAAOC,EAACT,EAAaU,SAAQ,CAACC,MAPoB,CAChDT,QACAC,YAjC+BA,CAACS,EAAQC,EAAWC,EAAQ,CAAA,KAE3D,MAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,CAACC,EAAKC,KAC1D,MAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,GAAOE,SAAUC,KACnB,MAAMC,QAAeH,KAAYE,GAGjC,OADAnB,EAAYqB,GAAaA,EAAUC,MAAM,GAAI,IACtCF,GAEFL,GACN,CAA0B,GAC7Bf,EAAY,IACPF,EACH,CACEU,SACAC,UAAWE,EACXD,QACAa,MAAO,CAAA,IAGb,EAaEvB,cACAC,YAZmBuB,IACnB,MAAMC,EAAe,IAChB3B,GAEL2B,EAAa3B,EAAM4B,OAAS,GAAGH,MAAKI,EAAA,GAAQH,GAC5CxB,EAAYyB,EAAY,GAU4BtB,SAAGA,GAAQ,WAQnDyB,IACd,OAAOC,EAAWjC,EACpB,UAMgBkC,IACd,MAAM/B,YAAEA,GAAgB6B,IACxB,OAAO7B,CACT,UAMgBgC,IACd,MAAMjC,MAAEA,EAAKG,YAAEA,GAAgB2B,IAC/B,GAAqB,IAAjB9B,EAAM4B,OACR,UAAUM,MAAM,uDAElB,MAAO,CADOlC,EAAMA,EAAM4B,OAAS,GAAGH,MACtBtB,EAClB,CCnFM,MAAAgC,EAAsCA,EAC1CC,gBACAC,eACA3B,OAAQ4B,MAGR,MAAMtC,MAAEA,GAAU8B,IACZS,EAAsCC,EAC1C,IAAMxC,EAAM4B,OAAS,EAAI5B,EAAMA,EAAM4B,OAAS,GAAK,KACnD,CAAE5B,IAEEyC,EAAkBC,EAAaC,IAC/BA,EAAGC,gBAAkBD,EAAGE,SAChB,MAAZN,OAAY,EAAZA,EAAc5B,UAAUmC,qBACxBP,EAAa5B,UAAUmC,mBAAmBH,EAC5C,EAAG,CAAEJ,IAUL,OARAQ,EAAU,KACJR,EACFH,GAAiBA,IAEjBC,GAAgBA,GAClB,EACC,CAAEE,EAAcH,EAAeC,IAE3BE,GACLhC,EAAC+B,EAAQ,CAACG,gBAAiBA,EAAepC,SACvCkC,EAAa7B,OAAMmB,EAAA,CAAA,EACfU,EAAa5B,UACb4B,EAAa3B,WAGjB"}

package/dist/index.umd.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e||self).reactModalPort={},e.jsxRuntime,e.react)}(this,function(e,t,n){function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(this,arguments)}var o=n.createContext({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}});function a(){return n.useContext(o)}e.ModalContextProvider=function(e){var a=e.children,c=n.useState([]),u=c[0],i=c[1];return t.jsx(o.Provider,{value:{stack:u,launchModal:function(e,t,n){var r=Object.keys(t).reduce(function(e,n){var r=t[n];return e[n]=function(e){try{return Promise.resolve(r(e)).then(function(e){return i(u.slice(0,-1)),e})}catch(e){return Promise.reject(e)}},e},{});i([].concat(u,[{render:e,resolvers:r,onBackdropClickUse:n,state:{}}]))},updateStack:i,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),i(t)}},children:a})},e.ModalPort=function(e){var r=e.onModalLaunch,o=e.onModalClose,c=e.render,u=a().stack,i=n.useMemo(function(){return u.length>0?u[u.length-1]:null},[u]),l=n.useCallback(function(e){e.currentTarget===e.target&&(null==i?void 0:i.onBackdropClickUse)&&i.resolvers[i.onBackdropClickUse](e)},[i]);return n.useEffect(function(){i?r&&r():o&&o()},[i,r,o]),i&&t.jsx(c,{onBackdropClick:l,children:i.render(i.resolvers)})||null},e.useModal=function(){return a().launchModal},e.useModalContext=a,e.useModalState=function(){var e=a(),t=e.stack,n=e.updateState;if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,n]}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e||self).reactModalPort={},e.jsx,e.react)}(this,function(e,t,n){function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(this,arguments)}var o=n.createContext({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}});function a(){return n.useContext(o)}e.ModalContextProvider=function(e){var a=e.children,c=n.useState([]),u=c[0],i=c[1],l={stack:u,launchModal:function(e,t,n){void 0===n&&(n={});var r=Object.keys(t).reduce(function(e,n){var r=t[n];return e[n]=function(){try{return Promise.resolve(r.apply(void 0,[].slice.call(arguments))).then(function(e){return i(function(e){return e.slice(0,-1)}),e})}catch(e){return Promise.reject(e)}},e},{});i([].concat(u,[{render:e,resolvers:r,props:n,state:{}}]))},updateStack:i,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),i(t)}};return t.jsx(o.Provider,{value:l,children:a})},e.ModalPort=function(e){var o=e.onModalLaunch,c=e.onModalClose,u=e.render,i=a().stack,l=n.useMemo(function(){return i.length>0?i[i.length-1]:null},[i]),s=n.useCallback(function(e){e.currentTarget===e.target&&(null==l?void 0:l.resolvers.onBackdropClickUse)&&l.resolvers.onBackdropClickUse(e)},[l]);return n.useEffect(function(){l?o&&o():c&&c()},[l,o,c]),l&&t.jsx(u,{onBackdropClick:s,children:l.render(r({},l.resolvers,l.props))})||null},e.useModal=function(){return a().launchModal},e.useModalContext=a,e.useModalState=function(){var e=a(),t=e.stack,n=e.updateState;if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,n]}});
 //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n  createContext, \n  useContext, \n  useState, \n  type SyntheticEvent \n} from 'react';\nimport { \n  type ModalStackItem,\n  type ModalContextProperties,\n  type LaunchModal,\n  type LaunchModalResolvers,\n  type ModalState,\n  type UpdateModalState,\n} from '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n  stack: [],\n  launchModal: () => {},\n  updateStack: () => {},\n  updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n  const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n  const launchModal: LaunchModal = (render, resolvers, onBackdropClickUse) => {\n    // Wrap resolvers to update the stack\n    const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n      const resolver = resolvers[key];\n      acc[key] = async (ev?: SyntheticEvent) => {\n        const result = await resolver(ev);\n        updateStack(stack.slice(0, -1));\n        return result;\n      };\n      return acc;\n    }, {} as LaunchModalResolvers);\n    updateStack([\n      ...stack,\n      {\n        render,\n        resolvers: wrappedResovers,\n        onBackdropClickUse,\n        state: {},\n      },\n    ]);\n  };\n\n  const updateState = (newState: ModalState) => {\n    const updatedStack = [\n      ...stack,\n    ];\n    updatedStack[stack.length - 1].state = { ...newState };\n    updateStack(updatedStack);\n  };\n\n  const contextProperties: ModalContextProperties = {\n    stack,\n    launchModal,\n    updateStack,\n    updateState,\n  };\n\n  return <ModalContext.Provider value={contextProperties}>{children}</ModalContext.Provider>;\n\n};\n\n/**\n * Get properties from the modal context\n * @returns {ModalContextProperties} Object with the modal context properties\n */\nexport function useModalContext(): ModalContextProperties {\n  return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\n  const { launchModal } = useModalContext();\n  return launchModal;\n}\n\n/**\n * Get access to the current modal state and a function to update it\n * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n  const { stack, updateState } = useModalContext();\n  if (stack.length === 0) \n    throw new Error('Trying to access modal state while no modal is open');\n  const state = stack[stack.length - 1].state;\n  return [ state, updateState ];\n}\n","import { \n  type ModalPortProps, \n  type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n  type SyntheticEvent, \n  useCallback, \n  useEffect, \n  useMemo\n} from \"react\";\n\nconst ModalPort: React.FC<ModalPortProps> = ({\n  onModalLaunch,\n  onModalClose,\n  render: Backdrop\n}) => {\n\n  const { stack } = useModalContext();\n  const currentModal: ModalStackItem | null = useMemo(\n    () => stack.length > 0 ? stack[stack.length - 1] : null,\n    [ stack ]\n  );\n  const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n    if (ev.currentTarget !== ev.target) return;\n    currentModal?.onBackdropClickUse &&\n    currentModal.resolvers[currentModal.onBackdropClickUse](ev);\n  }, [ currentModal ]);\n\n  useEffect(() => {\n    if (currentModal) {\n      onModalLaunch && onModalLaunch();\n    } else {\n      onModalClose && onModalClose();\n    }\n  }, [ currentModal, onModalLaunch, onModalClose ]);\n\n  return currentModal && (\n    <Backdrop onBackdropClick={onBackdropClick}>\n      {currentModal.render(currentModal.resolvers)}\n    </Backdrop>\n  ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","useModalContext","useContext","_ref","children","_useState","useState","_jsx","jsx","Provider","value","render","resolvers","onBackdropClickUse","wrappedResovers","Object","keys","reduce","acc","key","resolver","ev","Promise","resolve","then","result","slice","e","reject","concat","state","newState","updatedStack","length","_extends","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","currentTarget","target","useEffect","_useModalContext2","Error"],"mappings":"+iBAea,IAAAA,EAAeC,EAAAA,cAAsC,CAChEC,MAAO,GACPC,YAAa,WAAK,EAClBC,YAAa,aACbC,YAAa,WACd,IAmDe,SAAAC,IACd,OAAOC,aAAWP,EACpB,wBAnDoC,SAAHQ,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAAQA,SAAmB,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAAA,GAuC1B,OAAOE,EAAAC,IAACb,EAAac,SAAQ,CAACC,MAPoB,CAChDb,MAAAA,EACAC,YAhC+B,SAACa,EAAQC,EAAWC,GAEnD,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAM3B,OALAD,EAAIC,YAAcE,GAAmB,WAAIC,QAAAC,QAClBH,EAASC,IAAGG,KAA3BC,SAAAA,GAEN,OADA1B,EAAYF,EAAM6B,MAAM,GAAI,IACrBD,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAL,QAAAM,OAAAD,EAAA,CAAA,EACMT,CACT,EAAG,CAAA,GACHnB,KAAW8B,OACNhC,EACH,CAAA,CACEc,OAAAA,EACAC,UAAWE,EACXD,mBAAAA,EACAiB,MAAO,MAGb,EAaE/B,YAAAA,EACAC,YAZkB,SAAC+B,GACnB,IAAMC,KAAYH,OACbhC,GAELmC,EAAanC,EAAMoC,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5ChC,EAAYiC,EACd,GASsD5B,SAAGA,GAE3D,cCrD4C,SAA7BD,GAIV,IAHHgC,EAAahC,EAAbgC,cACAC,EAAYjC,EAAZiC,aACQC,EAAQlC,EAAhBQ,OAGQd,EAAUI,IAAVJ,MACFyC,EAAsCC,EAAOA,QACjD,WAAA,OAAM1C,EAAMoC,OAAS,EAAIpC,EAAMA,EAAMoC,OAAS,GAAK,IAAI,EACvD,CAAEpC,IAEE2C,EAAkBC,EAAWA,YAAC,SAACpB,GAC/BA,EAAGqB,gBAAkBrB,EAAGsB,SAChB,MAAZL,OAAY,EAAZA,EAAczB,qBACdyB,EAAa1B,UAAU0B,EAAazB,oBAAoBQ,EAC1D,EAAG,CAAEiB,IAUL,OARAM,EAAAA,UAAU,WACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACL/B,EAAAA,IAAC8B,EAAS,CAAAG,gBAAiBA,EACxBpC,SAAAkC,EAAa3B,OAAO2B,EAAa1B,cAEjC,IACP,wBDuCE,OADwBX,IAAhBH,WAEV,iDAOE,IAAA+C,EAA+B5C,IAAvBJ,EAAKgD,EAALhD,MAAOG,EAAW6C,EAAX7C,YACf,GAAqB,IAAjBH,EAAMoC,OACR,MAAM,IAAIa,MAAM,uDAElB,MAAO,CADOjD,EAAMA,EAAMoC,OAAS,GAAGH,MACtB9B,EAClB"}
+{"version":3,"file":"index.umd.js","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n  createContext, \n  useContext, \n  useState, \n  type SyntheticEvent \n} from 'react';\nimport { \n  type ModalStackItem,\n  type ModalContextProperties,\n  type LaunchModal,\n  type LaunchModalResolvers,\n  type ModalState,\n  type UpdateModalState,\n} from '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n  stack: [],\n  launchModal: () => {},\n  updateStack: () => {},\n  updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n  const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n  const launchModal: LaunchModal = (render, resolvers, props = {}) => {\n    // Wrap resolvers to update the stack\n    const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n      const resolver = resolvers[key];\n      acc[key] = async (...args: any[]) => {\n        const result = await resolver(...args);\n        // update stack with an array conating all the items in the stack except the last one\n        updateStack(currStack => currStack.slice(0, -1));\n        return result;\n      };\n      return acc;\n    }, {} as LaunchModalResolvers);\n    updateStack([\n      ...stack,\n      {\n        render,\n        resolvers: wrappedResovers,\n        props,\n        state: {},\n      },\n    ]);\n  };\n\n  const updateState = (newState: ModalState) => {\n    const updatedStack = [\n      ...stack,\n    ];\n    updatedStack[stack.length - 1].state = { ...newState };\n    updateStack(updatedStack);\n  };\n\n  const contextProperties: ModalContextProperties = {\n    stack,\n    launchModal,\n    updateStack,\n    updateState,\n  };\n\n  return <ModalContext.Provider value={contextProperties}>{children}</ModalContext.Provider>;\n\n};\n\n/**\n * Get properties from the modal context\n * @returns {ModalContextProperties} Object with the modal context properties\n */\nexport function useModalContext(): ModalContextProperties {\n  return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\n  const { launchModal } = useModalContext();\n  return launchModal;\n}\n\n/**\n * Get access to the current modal state and a function to update it\n * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n  const { stack, updateState } = useModalContext();\n  if (stack.length === 0) \n    throw new Error('Trying to access modal state while no modal is open');\n  const state = stack[stack.length - 1].state;\n  return [ state, updateState ];\n}\n","import { \n  type ModalPortProps, \n  type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n  type SyntheticEvent, \n  useCallback, \n  useEffect, \n  useMemo\n} from \"react\";\n\nconst ModalPort: React.FC<ModalPortProps> = ({\n  onModalLaunch,\n  onModalClose,\n  render: Backdrop\n}) => {\n\n  const { stack } = useModalContext();\n  const currentModal: ModalStackItem | null = useMemo(\n    () => stack.length > 0 ? stack[stack.length - 1] : null,\n    [ stack ]\n  );\n  const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n    if (ev.currentTarget !== ev.target) return;\n    currentModal?.resolvers.onBackdropClickUse &&\n    currentModal.resolvers.onBackdropClickUse(ev);\n  }, [ currentModal ]);\n\n  useEffect(() => {\n    if (currentModal) {\n      onModalLaunch && onModalLaunch();\n    } else {\n      onModalClose && onModalClose();\n    }\n  }, [ currentModal, onModalLaunch, onModalClose ]);\n\n  return currentModal && (\n    <Backdrop onBackdropClick={onBackdropClick}>\n      {currentModal.render({\n        ...currentModal.resolvers,\n        ...currentModal.props,\n      })}\n    </Backdrop>\n  ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","useModalContext","useContext","_ref","children","_useState","useState","contextProperties","render","resolvers","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","Promise","resolve","apply","slice","call","arguments","then","result","currStack","e","reject","concat","state","newState","updatedStack","length","_extends","_jsx","Provider","value","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","ev","currentTarget","target","onBackdropClickUse","useEffect","_useModalContext2","Error"],"mappings":"4iBAeaA,EAAeC,EAAaA,cAAyB,CAChEC,MAAO,GACPC,YAAa,WAAQ,EACrBC,YAAa,WAAQ,EACrBC,YAAa,WAAK,aAqDJC,IACd,OAAOC,EAAAA,WAAWP,EACpB,wBApDoC,SAAHQ,GAAM,IAAAC,EAAQD,EAARC,SAErCC,EAA+BC,EAAAA,SAA2B,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAE1B,GA+BME,EAA4C,CAChDV,MAAAA,EACAC,YAjC+B,SAACU,EAAQC,EAAWC,QAAAA,IAAAA,IAAAA,EAAQ,CAAA,GAE3D,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,kBAAgCE,OAAAA,QAAAC,QACbF,EAAQG,WAAA,EAAA,GAAAC,MAAAC,KADKC,aACIC,KAAhCC,SAAAA,GAGN,OADA1B,EAAY,SAAA2B,UAAaA,EAAUL,MAAM,GAAI,EAAE,GACxCI,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAT,QAAAU,OAAAD,EACD,CAAA,EAAOZ,CACT,EAAG,IACHhB,KAAW8B,OACNhC,EACH,CAAA,CACEW,OAAAA,EACAC,UAAWE,EACXD,MAAAA,EACAoB,MAAO,CAAA,KAGb,EAaE/B,YAAAA,EACAC,YAZkB,SAAC+B,GACnB,IAAMC,EAAY,GAAAH,OACbhC,GAELmC,EAAanC,EAAMoC,OAAS,GAAGH,MAAKI,KAAQH,GAC5ChC,EAAYiC,EACd,GASA,OAAOG,MAACxC,EAAayC,SAAQ,CAACC,MAAO9B,EAAiBH,SAAGA,GAE3D,cCtD4C,SAA7BD,GACb,IAAAmC,EAAanC,EAAbmC,cACAC,EAAYpC,EAAZoC,aACQC,EAAQrC,EAAhBK,OAGQX,EAAUI,IAAVJ,MACF4C,EAAsCC,EAAOA,QACjD,kBAAM7C,EAAMoC,OAAS,EAAIpC,EAAMA,EAAMoC,OAAS,GAAK,IAAI,EACvD,CAAEpC,IAEE8C,EAAkBC,cAAY,SAACC,GAC/BA,EAAGC,gBAAkBD,EAAGE,SAChB,MAAZN,OAAY,EAAZA,EAAchC,UAAUuC,qBACxBP,EAAahC,UAAUuC,mBAAmBH,EAC5C,EAAG,CAAEJ,IAUL,OARAQ,EAASA,UAAC,WACJR,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACLN,MAACK,EAAQ,CAACG,gBAAiBA,EAAevC,SACvCqC,EAAajC,OAAM0B,EACfO,CAAAA,EAAAA,EAAahC,UACbgC,EAAa/B,WAGjB,IACP,aDmCgB,WAEd,OADwBT,IAAhBH,WAEV,sCAMgB,WACd,IAAAoD,EAA+BjD,IAAvBJ,EAAKqD,EAALrD,MAAOG,EAAWkD,EAAXlD,YACf,GAAqB,IAAjBH,EAAMoC,OACR,MAAU,IAAAkB,MAAM,uDAElB,MAAO,CADOtD,EAAMA,EAAMoC,OAAS,GAAGH,MACtB9B,EAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-modal-port",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Launch modals from any React component.",
   "type": "module",
   "source": "src/index.ts",
@@ -20,10 +20,10 @@
   ],
   "scripts": {
     "build": "npm run build:esm && npm run build:esm-modern && npm run build:cjs && npm run build:umd",
-    "build:esm": "microbundle -o dist/index.mjs --format esm",
-    "build:esm-modern": "microbundle -o dist/index.modern.mjs --format modern",
-    "build:cjs": "microbundle -o dist/index.cjs --format cjs",
-    "build:umd": "microbundle -o dist/index.umd.js --format umd",
+    "build:esm": "microbundle -o dist/index.mjs --format esm --globals react/jsx-runtime=jsx",
+    "build:esm-modern": "microbundle -o dist/index.modern.mjs --format modern --globals react/jsx-runtime=jsx",
+    "build:cjs": "microbundle -o dist/index.cjs --format cjs --globals react/jsx-runtime=jsx",
+    "build:umd": "microbundle -o dist/index.umd.js --format umd --globals react/jsx-runtime=jsx",
     "prepare": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -48,13 +48,13 @@
     "url": "https://github.com/oliverwehn/react-modal-port/issues"
   },
   "homepage": "https://github.com/oliverwehn/react-modal-port#readme",
+  "dependencies": {},
   "devDependencies": {
+    "react": "^18",
+    "react-dom": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18.2.19",
     "microbundle": "^0.15.1",
-    "react": "^18.2.0",
-    "react-dom": "^18",
-    "tslib": "^2.6.2",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {

package/readme.md

@@ -84,10 +84,14 @@ const Page: React.FC = () => {
       {
         decideYay: () => setDecision(true),
         decideNay: () => setDecision(false),
-        leaveMeAlone: () => {},
+        // Provide an `onBackdropClick` resolver to have it passed to
+        // the Backdrop component
+        onBackdropClick: () => {},
       },
-      // Optional name of the `onBackdropClick` resolver
-      "leaveMeAlone"
+      // Optionally, add further props to be passed to the modal component
+      {
+        timeLeft: Math.random() * 86400
+      }
     );
   }
 
@@ -113,7 +117,7 @@ The `launchModal` function expects the following arguments:
 |----------|------|-------------|
 | render | `React.FC` | A function that renders the modal and returns a `ReactNode`. |
 | resolvers | `{ [key: string]: (...args: any[]) => Promise<void>\|void }` | An object of resolver functions that will be passed as props to `render`. |
-| onBackdropClickUse | `string` | Optional: The key of the resolver function in the `resolvers` object that should be passed to the backdrop component’s `onBackdropClick` prop. |
+| props | `{ [key: string]: any }` | Optional: Further props you’d like to pass to the modal component in `render`. |
 
 Modals can be created and designed to fully fit your needs. The only requirement is to define the functions to resolve them, for example, when clicking a button. The modal component for the example above could look like this:
 
@@ -170,8 +174,6 @@ So you could adapt the `onClick` handler in our earlier example as follows:
         letMeThinkAboutIt: (p: Promise) => p,
         leaveMeAlone: () => {},
       },
-      // Optional name of the `onBackdropClick` resolver
-      "leaveMeAlone"
     );
   }
 
@@ -262,9 +264,17 @@ export const AskForNameModal: React.FC<AskForNameModalProps> = ({
   };
 
   const onButtonClick = () => {
-    launchModal(ConfirmModal, {
-      confirm: () => provideName(modalState.name),
-     });
+    launchModal(
+      ConfirmModal, 
+      {
+        // Chain first modal’s resolution to the second one’s
+        confirm: () => provideName(modalState.name),
+      },
+      // Pass the name on to the ConfirmModal for rendering
+      {
+        name: modalState.name,
+      }
+    );
   };
 
   return (

package/types/index.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 
+import { PropsWithChildren } from "react";
+
 export type ModalResolver = (...args: any[]) => Promise<void>|void;
 
 
@@ -7,17 +9,21 @@ export type LaunchModalResolvers = {
   [key: string]: ModalResolver;
 };
 
+export type LaunchModalProps = {
+  [key: string]: any;
+};
+
 export type ModalStackItem = {
   render: React.FunctionComponent<LaunchModalResolvers>;
   resolvers: LaunchModalResolvers;
-  onBackdropClickUse?: string;
+  props: LaunchModalProps;
   state: ModalState;
 };
 
 export type LaunchModal = (
   render: React.FunctionComponent<LaunchModalResolvers>, 
   resolvers: LaunchModalResolvers,
-  onBackdropClickUse?: string,
+  props?: LaunchModalProps,
 ) => void;
 
 export type ModalState = { [key: string]: any };