Modal to dialog conversion

packages/support/resources/css/components/modal.css

@@ -87,6 +87,10 @@
         @apply fixed inset-0 z-40 bg-gray-950/50 dark:bg-gray-950/75;
     }
 
+    dialog::backdrop {
+        @apply hidden;
+    }
+
     & .fi-modal-header {
         @apply flex px-6 pt-6;
 
@@ -136,7 +140,7 @@
     }
 
     & .fi-modal-window {
-        @apply pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white ring-1 shadow-xl ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+        @apply pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white ring-1 shadow-xl ring-gray-950/5 duration-300 dark:bg-gray-900 dark:ring-white/10;
 
         &.fi-align-start,
         &.fi-align-left {
@@ -255,11 +259,6 @@
             @apply fixed inset-0;
         }
 
-        &.fi-transition-enter,
-        &.fi-transition-leave {
-            @apply duration-300;
-        }
-
         &:not(.fi-modal-window-has-content) {
             & .fi-modal-footer {
                 &:not(.fi-sticky) {
@@ -361,7 +360,3 @@
         }
     }
 }
-
-& .fi-modal-trigger {
-    @apply flex;
-}

packages/support/resources/js/components/modal.js

@@ -9,14 +9,45 @@ export default ({ id }) => ({
         this.$nextTick(() => {
             this.isWindowVisible = this.isOpen
 
-            this.$watch('isOpen', () => (this.isWindowVisible = this.isOpen))
+            this.$watch('isOpen', () => {
+                if (this.isOpen) {
+                    this.$root?.showModal()
+
+                    this.isWindowVisible = true
+
+                    return
+                }
+
+                this.isWindowVisible = false
+
+                setTimeout(
+                    () => this.$root?.close(),
+                    this.$refs.window
+                        ? parseFloat(
+                              window.getComputedStyle(this.$refs.window)
+                                  .transitionDuration,
+                          ) * 1000
+                        : 0,
+                )
+            })
         })
     },
 
     close: function () {
         this.closeQuietly()
 
-        this.$root.dispatchEvent(new CustomEvent('modal-closed', { id }))
+        setTimeout(
+            () =>
+                this.$root.dispatchEvent(
+                    new CustomEvent('modal-closed', { id }),
+                ),
+            this.$refs.window
+                ? parseFloat(
+                      window.getComputedStyle(this.$refs.window)
+                          .transitionDuration,
+                  ) * 1000
+                : 0,
+        )
     },
 
     closeQuietly: function () {

packages/support/resources/views/components/modal/index.blade.php

@@ -57,8 +57,6 @@
 @endphp
 
 @if ($trigger)
-    {!! '<div>' !!}
-
     <div
         x-on:click="$el.nextElementSibling.dispatchEvent(new CustomEvent(@js($openEventName)))"
         {{ $trigger->attributes->class(['fi-modal-trigger']) }}
@@ -67,32 +65,32 @@
     </div>
 @endif
 
-<div
-    @if ($ariaLabelledby)
-        aria-labelledby="{{ $ariaLabelledby }}"
-    @elseif ($heading)
-        aria-labelledby="{{ "{$id}.heading" }}"
-    @endif
-    aria-modal="true"
-    id="{{ $id }}"
-    role="dialog"
+<dialog
     x-data="filamentModal({
                 id: @js($id),
             })"
     @if ($id)
         x-on:{{ $closeEventName }}.window="if (($event.detail.id === @js($id)) && isOpen) close()"
         x-on:{{ $closeQuietlyEventName }}.window="if (($event.detail.id === @js($id)) && isOpen) closeQuietly()"
         x-on:{{ $openEventName }}.window="if (($event.detail.id === @js($id)) && (! isOpen)) open()"
+    @else
+        x-on:{{ $closeEventName }}.stop="if (isOpen) close()"
+        x-on:{{ $closeQuietlyEventName }}.stop="if (isOpen) closeQuietly()"
+        x-on:{{ $openEventName }}.stop="if (! isOpen) open()"
     @endif
-    x-on:{{ $closeEventName }}.stop="if (isOpen) close()"
-    x-on:{{ $closeQuietlyEventName }}.stop="if (isOpen) closeQuietly()"
-    x-on:{{ $openEventName }}.stop="if (! isOpen) open()"
+    {{-- Prevents the dialog from closing when the escape key is pressed, we do that ourselves to properly transition it. --}}
+    x-on:cancel.prevent
+    id="{{ $id }}"
+    wire:ignore.self
+    x-trap.noscroll{{ $autofocus ? '' : '.noautofocus' }}="isOpen"
     x-bind:class="{
         'fi-modal-open': isOpen,
     }"
-    x-cloak
-    x-show="isOpen"
-    x-trap.noscroll{{ $autofocus ? '' : '.noautofocus' }}="isOpen"
+    @if ($ariaLabelledby)
+        aria-labelledby="{{ $ariaLabelledby }}"
+    @elseif ($heading)
+        aria-labelledby="{{ "{$id}.heading" }}"
+    @endif
     {{
         $attributes->class([
             'fi-modal',
@@ -103,12 +101,13 @@
 >
     <div
         aria-hidden="true"
-        x-show="isOpen"
+        x-show="isWindowVisible"
         x-transition.duration.300ms.opacity
         class="fi-modal-close-overlay"
     ></div>
 
     <div
+        x-ref="windowContainer"
         @if ($closeByClickingAway)
             {{-- Ensure that the click element is not triggered from a user selecting text inside an input. --}}
             x-on:click.self="
@@ -123,12 +122,11 @@ class="fi-modal-close-overlay"
         ])
     >
         <div
+            x-show="isWindowVisible"
+            x-ref="window"
             @if ($closeByEscaping)
                 x-on:keydown.window.escape="{{ $closeEventHandler }}"
             @endif
-            x-show="isWindowVisible"
-            x-transition:enter="fi-transition-enter"
-            x-transition:leave="fi-transition-leave"
             @if ($width !== Width::Screen)
                 x-transition:enter-start="fi-transition-enter-start"
                 x-transition:enter-end="fi-transition-enter-end"
@@ -232,8 +230,4 @@ class="fi-modal-close-btn"
             @endif
         </div>
     </div>
-</div>
-
-@if ($trigger)
-    {!! '</div>' !!}
-@endif
+</dialog>