Added useModal() helper (#28)

demo-app/resources/js/Pages/ComponentThatUsesModalInstance.jsx

@@ -0,0 +1,11 @@
+import { useModal } from '@inertiaui/modal-react'
+
+export default function ComponentThatUsesModalInstance() {
+    const modal = useModal()
+
+    return (
+        modal ? <div>
+            <button onClick={() => modal.close()}>Close Modal with index {modal.index}</button>
+        </div> : <div />
+    )
+}

demo-app/resources/js/Pages/ComponentThatUsesModalInstance.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { useModal } from '@inertiaui/modal-vue'
+
+const modal = useModal()
+</script>
+
+<template>
+    <div v-if="modal">
+        <button @click="modal.close()">Close Modal with index {{ modal.index }}</button>
+    </div>
+</template>

demo-app/resources/js/Pages/CreateRole.jsx

@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
 import { useForm } from '@inertiajs/react';
 import axios from 'axios';
 import { Modal, ModalLink } from '@inertiaui/modal-react';
+import ComponentThatUsesModalInstance from './ComponentThatUsesModalInstance.jsx';
 
 export default function CreateRole({ headerValue }) {
     const { data, setData, errors, post } = useForm({
@@ -86,6 +87,7 @@ export default function CreateRole({ headerValue }) {
                     <Modal name="another-local-modal">
                         Hawaiian noises?
                     </Modal>
+                    <ComponentThatUsesModalInstance />
                 </>
             )}
         </Modal>

demo-app/resources/js/Pages/CreateRole.vue

@@ -3,6 +3,7 @@ import { useForm } from '@inertiajs/vue3'
 import { default as Axios } from 'axios'
 import { Modal, ModalLink } from '@inertiaui/modal-vue'
 import { ref } from 'vue'
+import ComponentThatUsesModalInstance from './ComponentThatUsesModalInstance.vue'
 
 defineProps(['headerValue'])
 
@@ -97,5 +98,7 @@ function submit() {
         <Modal name="another-local-modal">
              Hawaiian noises?
         </Modal>
+
+        <ComponentThatUsesModalInstance />
     </Modal>
 </template>

demo-app/resources/js/Pages/EditUser.jsx

@@ -2,6 +2,7 @@
 import React, { useState, useRef } from 'react';
 import { useForm, usePage } from '@inertiajs/react';
 import { Modal, ModalLink } from '@inertiaui/modal-react';
+import ComponentThatUsesModalInstance from './ComponentThatUsesModalInstance.jsx';
 
 export default function EditUser({ user, roles }) {
     const [message, setMessage] = useState('');
@@ -123,6 +124,7 @@ export default function EditUser({ user, roles }) {
                             </button>
                         </div>
                     </form>
+                    <ComponentThatUsesModalInstance />
                 </>
             )}
         </Modal>

demo-app/resources/js/Pages/EditUser.vue

@@ -2,6 +2,7 @@
 import { useForm } from '@inertiajs/vue3';
 import { Modal, ModalLink } from '@inertiaui/modal-vue';
 import { ref } from 'vue';
+import ComponentThatUsesModalInstance from './ComponentThatUsesModalInstance.vue';
 
 const props = defineProps({
     user: Object,
@@ -86,5 +87,7 @@ function onMessage(message) {
                 </button>
             </div>
         </form>
+
+        <ComponentThatUsesModalInstance />
     </Modal>
 </template>

demo-app/resources/js/Pages/Users.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from '@inertiajs/react';
 import { ModalLink } from '@inertiaui/modal-react';
 import Container from './Container';
+import ComponentThatUsesModalInstance from './ComponentThatUsesModalInstance.jsx';
 
 export default function Users({ users, random, navigate }) {
     const alertGreeting = (greeting) => {
@@ -40,6 +41,7 @@ export default function Users({ users, random, navigate }) {
                     ))}
                 </ul>
             </div>
+            <ComponentThatUsesModalInstance />
         </Container>
     );
 };

demo-app/resources/js/Pages/Users.vue

@@ -3,6 +3,7 @@ import { onMounted,ref } from 'vue';
 import Container from './Container.vue'
 import { ModalLink } from '@inertiaui/modal-vue'
 import { Link } from '@inertiajs/vue3'
+import ComponentThatUsesModalInstance from './ComponentThatUsesModalInstance.vue';
 
 defineProps({
     users: Object,
@@ -57,5 +58,6 @@ function alertGreeting(greeting) {
                 </li>
             </ul>
         </div>
+        <ComponentThatUsesModalInstance />
     </Container>
 </template>

demo-app/tests/Browser/UseModalTest.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Tests\Browser;
+
+use PHPUnit\Framework\Attributes\Test;
+use Tests\DuskTestCase;
+
+class UseModalTest extends DuskTestCase
+{
+    #[Test]
+    public function it_can_inject_the_current_modal_context_from_a_component()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/users/1/edit')
+                ->waitForFirstUser()
+                ->waitFor('.im-dialog')
+                ->within('.im-dialog[data-inertiaui-modal-index="0"]', function (Browser $browser) {
+                    $browser->assertSee('Close Modal with index 0');
+                })
+                ->clickLink('Add Role')
+                ->waitFor('.im-dialog[data-inertiaui-modal-index="1"]')
+                ->within('.im-dialog[data-inertiaui-modal-index="1"]', function (Browser $browser) {
+                    $browser->assertSee('Close Modal with index 1');
+                })
+                ->press('Close Modal with index 1')
+                ->waitUntilMissing('.im-dialog[data-inertiaui-modal-index="1"]');
+        });
+    }
+}

react/src/inertiauiModal.js

@@ -4,5 +4,6 @@ import { useModalStack, ModalRoot, ModalStackProvider, renderApp } from './Modal
 import HeadlessModal from './HeadlessModal.jsx'
 import Modal from './Modal.jsx'
 import ModalLink from './ModalLink.jsx'
+import useModal from './useModal.js'
 
-export { getConfig, putConfig, resetConfig, useModalStack, useModalIndex, HeadlessModal, Modal, ModalLink, ModalRoot, ModalStackProvider, renderApp }
+export { getConfig, putConfig, resetConfig, useModalStack, useModalIndex, HeadlessModal, Modal, ModalLink, ModalRoot, ModalStackProvider, renderApp, useModal }

react/src/useModal.js

@@ -0,0 +1,6 @@
+import { useModalIndex } from './ModalRenderer.jsx'
+import { useModalStack } from './ModalRoot.jsx'
+
+export default function useModal() {
+    return useModalStack().stack[useModalIndex()] ?? null
+}

vue/src/inertiauiModal.js

@@ -4,6 +4,7 @@ import HeadlessModal from './HeadlessModal.vue'
 import Modal from './Modal.vue'
 import ModalLink from './ModalLink.vue'
 import ModalRoot from './ModalRoot.vue'
+import useModal from './useModal.js'
 
 function visitModal(url, options = {}) {
     return useModalStack().visit(
@@ -19,4 +20,4 @@ function visitModal(url, options = {}) {
     )
 }
 
-export { HeadlessModal, Modal, ModalLink, ModalRoot, getConfig, putConfig, resetConfig, visitModal, renderApp }
+export { HeadlessModal, Modal, ModalLink, ModalRoot, getConfig, putConfig, resetConfig, visitModal, renderApp, useModal }

vue/src/useModal.js

@@ -0,0 +1,5 @@
+import { inject } from 'vue'
+
+export default function useModal() {
+    return inject('modalContext', null)
+}