@inertiaui/modal-react 0.6.1 → 0.6.3

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inertiaui/modal-react",
     "author": "Pascal Baljet <pascal@protone.media>",
-    "version": "0.6.1",
+    "version": "0.6.3",
     "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'
@@ -224,12 +224,17 @@ export const ModalStackProvider = ({ children }) => {
                     'X-Inertia-Partial-Data': keys.join(','),
                     'X-InertiaUI-Modal': true,
                     'X-InertiaUI-Modal-Use-Router': 0,
+                    'X-InertiaUI-Modal-Base-Url': baseUrl,
                 },
             }).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) => {
@@ -304,9 +309,11 @@ export const ModalStackProvider = ({ children }) => {
                 'X-Inertia-Version': pageVersion,
                 'X-InertiaUI-Modal': true,
                 'X-InertiaUI-Modal-Use-Router': useInertiaRouter ? 1 : 0,
+                'X-InertiaUI-Modal-Base-Url': baseUrl,
             }
 
             if (useInertiaRouter) {
+                newModalOnBase = null
                 // Pushing the modal to the stack will be handled by the ModalRoot...
                 return router.visit(url, {
                     method,
@@ -333,7 +340,6 @@ export const ModalStackProvider = ({ children }) => {
                             )
 
                             resolve(modal)
-                            newModalOnBase = null
                         })
                     },
                 })
@@ -485,7 +491,9 @@ export const ModalRoot = ({ children }) => {
     const axiosRequestInterceptor = (config) => {
         // A Modal is opened on top of a base route, so we need to pass this base route
         // so it can redirect back with the back() helper method...
-        config.headers['X-InertiaUI-Modal-Base-Url'] = baseUrl
+        if (localStackCopy.length) {
+            config.headers['X-InertiaUI-Modal-Base-Url'] = baseUrl
+        }
         return config
     }
 
@@ -494,6 +502,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}