@inertiaui/modal-react 0.6.0 → 0.6.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inertiaui/modal-react",
     "author": "Pascal Baljet <pascal@protone.media>",
-    "version": "0.6.0",
+    "version": "0.6.2",
     "private": false,
     "license": "MIT",
     "type": "module",

package/src/ModalRoot.jsx

@@ -1,7 +1,7 @@
-import { createElement, useEffect, useState } from 'react'
+import { createElement, useEffect, useState, useRef } from 'react'
 import { default as Axios } from 'axios'
 import { except, only } from './helpers'
-import { router } from '@inertiajs/react'
+import { router, usePage } from '@inertiajs/react'
 import { mergeDataIntoQueryString } from '@inertiajs/core'
 import { createContext, useContext } from 'react'
 import ModalRenderer from './ModalRenderer'
@@ -226,10 +226,14 @@ export const ModalStackProvider = ({ children }) => {
                     'X-InertiaUI-Modal-Use-Router': 0,
                 },
             }).then((response) => {
-                Object.assign(this.props, response.data.props)
-                updateStack((prevStack) => prevStack) // Trigger re-render
+                this.updateProps(response.data.props)
             })
         }
+
+        updateProps = (props) => {
+            Object.assign(this.props, props)
+            updateStack((prevStack) => prevStack) // Trigger re-render
+        }
     }
 
     const pushFromResponseData = (responseData, config = {}, onClose = null, onAfterLeave = null) => {
@@ -307,6 +311,7 @@ export const ModalStackProvider = ({ children }) => {
             }
 
             if (useInertiaRouter) {
+                newModalOnBase = null
                 // Pushing the modal to the stack will be handled by the ModalRoot...
                 return router.visit(url, {
                     method,
@@ -333,7 +338,6 @@ export const ModalStackProvider = ({ children }) => {
                             )
 
                             resolve(modal)
-                            newModalOnBase = null
                         })
                     },
                 })
@@ -494,6 +498,21 @@ export const ModalRoot = ({ children }) => {
         return () => Axios.interceptors.request.eject(axiosRequestInterceptor)
     }, [])
 
+    const $page = usePage()
+    const previousModalRef = useRef()
+
+    useEffect(() => {
+        const newModal = $page.props?._inertiaui_modal
+        const previousModal = previousModalRef.current
+
+        // Store the current value for the next render
+        previousModalRef.current = newModal
+
+        if (newModal && previousModal && newModal.component === previousModal.component && newModal.url === previousModal.url) {
+            context.stack[0]?.updateProps(newModal.props ?? {})
+        }
+    }, [$page.props?._inertiaui_modal])
+
     return (
         <>
             {children}