From c7c24a88604ee7398eb788e631ee304d9176cc94 Mon Sep 17 00:00:00 2001
From: Jack Sullivan <jfsullivan@foursullivans.com>
Date: Sun, 27 Aug 2023 21:09:56 -0400
Subject: [PATCH 1/3] Livewire 3

---
 composer.json                        |  2 +-
 phpunit.xml.dist                     |  3 ++
 public/modal.js                      |  2 +-
 resources/js/modal.js                | 63 +++++++++++++---------
 resources/views/modal.blade.php      | 20 ++++---
 src/LivewireModalServiceProvider.php | 16 +++---
 src/Modal.php                        | 80 +++++++++++++++++++++++++---
 src/ModalComponent.php               | 49 +++++------------
 tests/Components/DemoModal.php       |  9 +++-
 tests/LivewireModalComponentTest.php | 27 +++++-----
 tests/LivewireModalTest.php          | 32 ++++++-----
 11 files changed, 190 insertions(+), 113 deletions(-)

diff --git a/composer.json b/composer.json
index 935ce4e..e1cf224 100644
--- a/composer.json
+++ b/composer.json
@@ -18,7 +18,7 @@
         "php": "^8.1",
         "spatie/laravel-package-tools": "^1.14.0",
         "illuminate/contracts": "^10.0",
-        "livewire/livewire": "^2.11"
+        "livewire/livewire": "^3.0"
     },
     "require-dev": {
         "laravel/pint": "^1.0",
diff --git a/phpunit.xml.dist b/phpunit.xml.dist
index 95ff701..1d108d5 100644
--- a/phpunit.xml.dist
+++ b/phpunit.xml.dist
@@ -9,4 +9,7 @@
             <directory suffix="Test.php">./tests</directory>
         </testsuite>
     </testsuites>
+    <php>
+        <env name="APP_ENV" value="testing"/>
+    </php>
 </phpunit>
\ No newline at end of file
diff --git a/public/modal.js b/public/modal.js
index c9e1d9a..da49033 100644
--- a/public/modal.js
+++ b/public/modal.js
@@ -1 +1 @@
-(()=>{var t,e={331:()=>{function t(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,o){if(!t)return;if("string"==typeof t)return e(t,o);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,o)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=new Array(e);o<e;o++)n[o]=t[o];return n}window.LivewireUIModal=function(){return{show:!1,showActiveComponent:!0,activeComponent:!1,activeComponentType:null,componentHistory:[],modalWidth:null,fullScreen:!1,getActiveComponentModalAttribute:function(t){if(void 0!==this.$wire.get("components")[this.activeComponent])return this.$wire.get("components")[this.activeComponent].modalAttributes[t]},closeModalOnEscape:function(t){if(!1!==this.getActiveComponentModalAttribute("closeOnEscape")){var e=!0===this.getActiveComponentModalAttribute("closeOnEscapeIsForceful");this.closeModal(e)}},closeModalOnClickAway:function(t){!1!==this.getActiveComponentModalAttribute("closeOnClickAway")&&this.closeModal(!0)},closeModal:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!0===this.getActiveComponentModalAttribute("dispatchCloseEvent")){var n=this.$wire.get("components")[this.activeComponent].name;Livewire.emit("modalClosed",n)}if(!0===this.getActiveComponentModalAttribute("destroyOnClose")&&Livewire.emit("destroyComponent",this.activeComponent),e>0)for(var i=0;i<e;i++){if(o){var r=this.componentHistory[this.componentHistory.length-1];Livewire.emit("destroyComponent",r)}this.componentHistory.pop()}var s=this.componentHistory.pop();s&&!1===t&&s?this.setActiveModalComponent(s,!0):this.show=!1},setActiveModalComponent:function(t){var e=this,o=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.show=!0,this.activeComponent!==t){!1!==this.activeComponent&&!1===o&&this.componentHistory.push(this.activeComponent);var n=50;!1===this.activeComponent?(this.activeComponent=t,this.activeComponentType=this.getActiveComponentModalAttribute("type"),this.showActiveComponent=!0,this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass"),this.fullScreen=this.getActiveComponentModalAttribute("fullScreen")):(this.showActiveComponent=!1,n=400,setTimeout((function(){e.activeComponent=t,e.activeComponentType=e.getActiveComponentModalAttribute("type"),e.showActiveComponent=!0,e.modalWidth=e.getActiveComponentModalAttribute("maxWidthClass"),e.fullScreen=e.getActiveComponentModalAttribute("fullScreen")}),300)),this.$nextTick((function(){var o,i=null===(o=e.$refs[t])||void 0===o?void 0:o.querySelector("[autofocus]");i&&setTimeout((function(){i.focus()}),n)}))}},focusables:function(){return t(this.$el.querySelectorAll("a, button, input, textarea, select, details, [tabindex]:not([tabindex='-1'])")).filter((function(t){return!t.hasAttribute("disabled")}))},firstFocusable:function(){return this.focusables()[0]},lastFocusable:function(){return this.focusables().slice(-1)[0]},nextFocusable:function(){return this.focusables()[this.nextFocusableIndex()]||this.firstFocusable()},prevFocusable:function(){return this.focusables()[this.prevFocusableIndex()]||this.lastFocusable()},nextFocusableIndex:function(){return(this.focusables().indexOf(document.activeElement)+1)%(this.focusables().length+1)},prevFocusableIndex:function(){return Math.max(0,this.focusables().indexOf(document.activeElement))-1},init:function(){var t=this;this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass"),this.fullScreen=this.getActiveComponentModalAttribute("fullScreen"),this.$watch("show",(function(e){e?document.body.classList.add("overflow-y-hidden"):(document.body.classList.remove("overflow-y-hidden"),setTimeout((function(){t.activeComponent=!1,t.activeComponentType=null,t.$wire.resetState()}),300))})),Livewire.on("closeModal",(function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];t.closeModal(e,o,n)})),Livewire.on("activeModalComponentChanged",(function(e){t.setActiveModalComponent(e)}))}}}},754:()=>{}},o={};function n(t){var i=o[t];if(void 0!==i)return i.exports;var r=o[t]={exports:{}};return e[t](r,r.exports,n),r.exports}n.m=e,t=[],n.O=(e,o,i,r)=>{if(!o){var s=1/0;for(u=0;u<t.length;u++){for(var[o,i,r]=t[u],a=!0,c=0;c<o.length;c++)(!1&r||s>=r)&&Object.keys(n.O).every((t=>n.O[t](o[c])))?o.splice(c--,1):(a=!1,r<s&&(s=r));if(a){t.splice(u--,1);var l=i();void 0!==l&&(e=l)}}return e}r=r||0;for(var u=t.length;u>0&&t[u-1][2]>r;u--)t[u]=t[u-1];t[u]=[o,i,r]},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t={387:0,109:0};n.O.j=e=>0===t[e];var e=(e,o)=>{var i,r,[s,a,c]=o,l=0;if(s.some((e=>0!==t[e]))){for(i in a)n.o(a,i)&&(n.m[i]=a[i]);if(c)var u=c(n)}for(e&&e(o);l<s.length;l++)r=s[l],n.o(t,r)&&t[r]&&t[r][0](),t[r]=0;return n.O(u)},o=self.webpackChunk=self.webpackChunk||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})(),n.O(void 0,[109],(()=>n(331)));var i=n.O(void 0,[109],(()=>n(754)));i=n.O(i)})();
\ No newline at end of file
+(()=>{var t,e={331:()=>{function t(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,o){if(!t)return;if("string"==typeof t)return e(t,o);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,o)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=new Array(e);o<e;o++)n[o]=t[o];return n}window.LivewireUIModal=function(){return{show:!1,showActiveComponent:!0,activeComponent:!1,activeComponentType:null,componentHistory:[],modalWidth:null,fullScreen:!1,getActiveComponentModalAttribute:function(t){if(void 0!==this.$wire.get("components")[this.activeComponent])return this.$wire.get("components")[this.activeComponent].modalAttributes[t]},closeModalOnEscape:function(t){if(!1!==this.getActiveComponentModalAttribute("closeOnEscape")){var e=!0===this.getActiveComponentModalAttribute("closeOnEscapeIsForceful");this.closeModal(e)}},closeModalOnClickAway:function(t){!1!==this.getActiveComponentModalAttribute("closeOnClickAway")&&this.closeModal(!0)},closeModal:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!1!==this.show){if(!0===this.getActiveComponentModalAttribute("dispatchCloseEvent")){var n=this.$wire.get("components")[this.activeComponent].name;Livewire.dispatch("modalClosed",n)}if(!0===this.getActiveComponentModalAttribute("destroyOnClose")&&Livewire.dispatch("destroyComponent",this.activeComponent),e>0)for(var i=0;i<e;i++){if(o){var r=this.componentHistory[this.componentHistory.length-1];Livewire.dispatch("destroyComponent",{id:r})}this.componentHistory.pop()}var s=this.componentHistory.pop();s&&!1===t&&s?this.setActiveModalComponent(s,!0):this.setShowPropertyTo(!1)}},setActiveModalComponent:function(t){var e=this,o=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.setShowPropertyTo(!0),this.activeComponent!==t){!1!==this.activeComponent&&!1===o&&this.componentHistory.push(this.activeComponent);var n=50;!1===this.activeComponent?(this.activeComponent=t,this.activeComponentType=this.getActiveComponentModalAttribute("type"),this.showActiveComponent=!0,this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass"),this.fullScreen=this.getActiveComponentModalAttribute("fullScreen")):(this.showActiveComponent=!1,n=400,setTimeout((function(){e.activeComponent=t,e.activeComponentType=e.getActiveComponentModalAttribute("type"),e.showActiveComponent=!0,e.modalWidth=e.getActiveComponentModalAttribute("maxWidthClass"),e.fullScreen=e.getActiveComponentModalAttribute("fullScreen")}),300)),this.$nextTick((function(){var o,i=null===(o=e.$refs[t])||void 0===o?void 0:o.querySelector("[autofocus]");i&&setTimeout((function(){i.focus()}),n)}))}},focusables:function(){return t(this.$el.querySelectorAll("a, button, input:not([type='hidden'], textarea, select, details, [tabindex]:not([tabindex='-1'])")).filter((function(t){return!t.hasAttribute("disabled")}))},firstFocusable:function(){return this.focusables()[0]},lastFocusable:function(){return this.focusables().slice(-1)[0]},nextFocusable:function(){return this.focusables()[this.nextFocusableIndex()]||this.firstFocusable()},prevFocusable:function(){return this.focusables()[this.prevFocusableIndex()]||this.lastFocusable()},nextFocusableIndex:function(){return(this.focusables().indexOf(document.activeElement)+1)%(this.focusables().length+1)},prevFocusableIndex:function(){return Math.max(0,this.focusables().indexOf(document.activeElement))-1},setShowPropertyTo:function(t){var e=this;this.show=t,t?document.body.classList.add("overflow-y-hidden"):(document.body.classList.remove("overflow-y-hidden"),setTimeout((function(){e.activeComponent=!1,e.$wire.resetState()}),300))},init:function(){var t=this;this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass"),this.fullScreen=this.getActiveComponentModalAttribute("fullScreen"),Livewire.on("closeModal",(function(e){var o,n,i;t.closeModal(null!==(o=null==e?void 0:e.force)&&void 0!==o&&o,null!==(n=null==e?void 0:e.skipPreviousModals)&&void 0!==n?n:0,null!==(i=null==e?void 0:e.destroySkipped)&&void 0!==i&&i)})),Livewire.on("activeModalComponentChanged",(function(e){var o=e.id;t.setActiveModalComponent(o)}))}}}},754:()=>{}},o={};function n(t){var i=o[t];if(void 0!==i)return i.exports;var r=o[t]={exports:{}};return e[t](r,r.exports,n),r.exports}n.m=e,t=[],n.O=(e,o,i,r)=>{if(!o){var s=1/0;for(u=0;u<t.length;u++){for(var[o,i,r]=t[u],a=!0,l=0;l<o.length;l++)(!1&r||s>=r)&&Object.keys(n.O).every((t=>n.O[t](o[l])))?o.splice(l--,1):(a=!1,r<s&&(s=r));if(a){t.splice(u--,1);var c=i();void 0!==c&&(e=c)}}return e}r=r||0;for(var u=t.length;u>0&&t[u-1][2]>r;u--)t[u]=t[u-1];t[u]=[o,i,r]},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t={387:0,109:0};n.O.j=e=>0===t[e];var e=(e,o)=>{var i,r,[s,a,l]=o,c=0;if(s.some((e=>0!==t[e]))){for(i in a)n.o(a,i)&&(n.m[i]=a[i]);if(l)var u=l(n)}for(e&&e(o);c<s.length;c++)r=s[c],n.o(t,r)&&t[r]&&t[r][0](),t[r]=0;return n.O(u)},o=self.webpackChunk=self.webpackChunk||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})(),n.O(void 0,[109],(()=>n(331)));var i=n.O(void 0,[109],(()=>n(754)));i=n.O(i)})();
\ No newline at end of file
diff --git a/resources/js/modal.js b/resources/js/modal.js
index 33096bf..87d5943 100644
--- a/resources/js/modal.js
+++ b/resources/js/modal.js
@@ -28,21 +28,24 @@ window.LivewireUIModal = () => {
             this.closeModal(true);
         },
         closeModal(force = false, skipPreviousModals = 0, destroySkipped = false) {
+            if(this.show === false) {
+                return;
+            }
 
             if (this.getActiveComponentModalAttribute('dispatchCloseEvent') === true) {
                 const componentName = this.$wire.get('components')[this.activeComponent].name;
-                Livewire.emit('modalClosed', componentName);
+                Livewire.dispatch('modalClosed', componentName);
             }
 
             if (this.getActiveComponentModalAttribute('destroyOnClose') === true) {
-                Livewire.emit('destroyComponent', this.activeComponent);
+                Livewire.dispatch('destroyComponent', this.activeComponent);
             }
 
             if (skipPreviousModals > 0) {
                 for (var i = 0; i < skipPreviousModals; i++) {
                     if (destroySkipped) {
                         const id = this.componentHistory[this.componentHistory.length - 1];
-                        Livewire.emit('destroyComponent', id);
+                        Livewire.dispatch('destroyComponent', {id: id});
                     }
                     this.componentHistory.pop();
                 }
@@ -54,14 +57,14 @@ window.LivewireUIModal = () => {
                 if (id) {
                     this.setActiveModalComponent(id, true);
                 } else {
-                    this.show = false;
+                    this.setShowPropertyTo(false);
                 }
             } else {
-                this.show = false;
+                this.setShowPropertyTo(false);
             }
         },
         setActiveModalComponent(id, skip = false) {
-            this.show = true;
+            this.setShowPropertyTo(true);
 
             if (this.activeComponent === id) {
                 return;
@@ -104,7 +107,7 @@ window.LivewireUIModal = () => {
             });
         },
         focusables() {
-            let selector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
+            let selector = 'a, button, input:not([type=\'hidden\'], textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
 
             return [...this.$el.querySelectorAll(selector)]
                 .filter(el => !el.hasAttribute('disabled'))
@@ -127,34 +130,46 @@ window.LivewireUIModal = () => {
         prevFocusableIndex() {
             return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1
         },
+        setShowPropertyTo(show) {
+            this.show = show;
+
+            if (show) {
+                document.body.classList.add('overflow-y-hidden');
+            } else {
+                document.body.classList.remove('overflow-y-hidden');
+
+                setTimeout(() => {
+                    this.activeComponent = false;
+                    this.$wire.resetState();
+                }, 300);
+            }
+        },
         init() {
             this.modalWidth = this.getActiveComponentModalAttribute('maxWidthClass');
             this.fullScreen = this.getActiveComponentModalAttribute('fullScreen');
 
-            this.$watch('show', value => {
-                if (value) {
-                    document.body.classList.add('overflow-y-hidden');
-                } else {
-                    document.body.classList.remove('overflow-y-hidden');
+            // this.$watch('show', value => {
+            //     if (value) {
+            //         document.body.classList.add('overflow-y-hidden');
+            //     } else {
+            //         document.body.classList.remove('overflow-y-hidden');
 
-                    setTimeout(() => {
-                        this.activeComponent = false;
-                        this.activeComponentType = null;
+            //         setTimeout(() => {
+            //             this.activeComponent = false;
+            //             this.activeComponentType = null;
                         
-                        this.$wire.resetState();
-                    }, 300);
-                }
-            });
+            //             this.$wire.resetState();
+            //         }, 300);
+            //     }
+            // });
 
-            Livewire.on('closeModal', (force = false, skipPreviousModals = 0, destroySkipped = false) => {
-                this.closeModal(force, skipPreviousModals, destroySkipped);
+            Livewire.on('closeModal', (data) => {
+                this.closeModal(data?.force ?? false, data?.skipPreviousModals ?? 0, data?.destroySkipped ?? false);
             });
 
-            Livewire.on('activeModalComponentChanged', (id) => {
+            Livewire.on('activeModalComponentChanged', ({id}) => {
                 this.setActiveModalComponent(id);
             });
-
-            
         }
     };
 }
diff --git a/resources/views/modal.blade.php b/resources/views/modal.blade.php
index b37b309..c0c1a41 100644
--- a/resources/views/modal.blade.php
+++ b/resources/views/modal.blade.php
@@ -9,26 +9,25 @@
 
     <div
         x-data="LivewireUIModal()"
-        x-init="init()"
-        x-on:close.stop="show = false"
+        x-on:close.stop="setShowPropertyTo(false)"
         x-on:keydown.escape.window="closeModalOnEscape()"
-        x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
-        x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
+        {{-- x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
+        x-on:keydown.shift.tab.prevent="prevFocusable().focus()" --}}
         x-show="show"
         {{-- x-trap.noscroll="show" --}}
-        class="fixed inset-0 z-40"
+        class="fixed inset-0 z-40 overflow-y-auto"
         style="display: none;"
     >
         <div
             x-show="show"
             x-on:click="closeModalOnClickAway()"
-            x-transition:enter="transform transition ease-out duration-500 sm:duration-700"
+            x-transition:enter="ease-out duration-500 sm:duration-700"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
-            x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
+            x-transition:leave="ease-in-out duration-500 sm:duration-700"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
-            class="fixed inset-0"
+            class="fixed inset-0 transition-all transform"
         >
             <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
         </div>
@@ -55,7 +54,7 @@ class="h-full pointer-events-auto w-screen"
                         @foreach($components as $id => $component)
                             @if(isset($component['modalAttributes']['type']) && $component['modalAttributes']['type'] == 'slide-over')
                                 <div class="flex h-full flex-col" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
-                                    @livewire($component['name'], $component['attributes'], key($id))
+                                    @livewire($component['name'], $component['arguments'], key($id))
                                 </div>
                             @endif
                         @endforeach
@@ -76,11 +75,10 @@ class="relative bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden sha
                             x-bind:class="modalWidth" 
                             x-description="Modal panel, show/hide based on modal state." 
                         >
-                           
                             @foreach($components as $id => $component)
                                 @if(isset($component['modalAttributes']['type']) && $component['modalAttributes']['type'] == 'modal')
                                     <div class="flex h-full flex-col" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
-                                        @livewire($component['name'], $component['attributes'], key($id))
+                                        @livewire($component['name'], $component['arguments'], key($id))
                                     </div>
                                 @endif
                             @endforeach
diff --git a/src/LivewireModalServiceProvider.php b/src/LivewireModalServiceProvider.php
index 401837f..78f4204 100644
--- a/src/LivewireModalServiceProvider.php
+++ b/src/LivewireModalServiceProvider.php
@@ -21,14 +21,14 @@ public function bootingPackage(): void
     {
         Livewire::component('livewire-ui-modal', Modal::class);
 
-        View::composer('livewire-ui-modal::modal', function ($view) {
-            if (config('livewire-ui-modal.include_js', true)) {
-                $view->jsPath = __DIR__.'/../resources/js/modal.js';
-            }
+        // View::composer('livewire-ui-modal::modal', function ($view) {
+        //     if (config('livewire-ui-modal.include_js', true)) {
+        //         $view->jsPath = __DIR__.'/../resources/js/modal.js';
+        //     }
 
-            if (config('livewire-ui-modal.include_css', false)) {
-                $view->cssPath = __DIR__.'/../public/modal.css';
-            }
-        });
+        //     if (config('livewire-ui-modal.include_css', false)) {
+        //         $view->cssPath = __DIR__.'/../public/modal.css';
+        //     }
+        // });
     }
 }
diff --git a/src/Modal.php b/src/Modal.php
index 04cd09f..43648e2 100644
--- a/src/Modal.php
+++ b/src/Modal.php
@@ -3,8 +3,13 @@
 namespace LivewireUI\Modal;
 
 use Exception;
+use Illuminate\Contracts\Routing\UrlRoutable;
+use Illuminate\Database\Eloquent\ModelNotFoundException;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Reflector;
 use Illuminate\View\View;
 use Livewire\Component;
+use Livewire\Mechanisms\ComponentRegistry;
 use ReflectionClass;
 
 class Modal extends Component
@@ -19,20 +24,26 @@ public function resetState(): void
         $this->activeComponent = null;
     }
 
-    public function openModal($component, $componentAttributes = [], $modalAttributes = []): void
+    public function openModal($component, $arguments = [], $modalAttributes = []): void
     {
         $requiredInterface = \LivewireUI\Modal\Contracts\ModalComponent::class;
-        $componentClass = app('livewire')->getClass($component);
+        $componentClass = app(ComponentRegistry::class)->getClass($component);
         $reflect = new ReflectionClass($componentClass);
 
         if ($reflect->implementsInterface($requiredInterface) === false) {
             throw new Exception("[{$componentClass}] does not implement [{$requiredInterface}] interface.");
         }
 
-        $id = md5($component.serialize($componentAttributes));
+        $id = md5($component.serialize($arguments));
+
+        $arguments = collect($arguments)
+            ->merge($this->resolveComponentProps($arguments, new $componentClass()))
+            ->all();
+
         $this->components[$id] = [
             'name' => $component,
-            'attributes' => $componentAttributes,
+            'attributes' => $arguments, // Deprecated
+            'arguments' => $arguments,
             'modalAttributes' => array_merge([
                 'closeOnClickAway' => $componentClass::closeModalOnClickAway(),
                 'closeOnEscape' => $componentClass::closeModalOnEscape(),
@@ -48,7 +59,52 @@ public function openModal($component, $componentAttributes = [], $modalAttribute
 
         $this->activeComponent = $id;
 
-        $this->emit('activeModalComponentChanged', $id);
+        $this->dispatch('activeModalComponentChanged', id: $id);
+    }
+
+    public function resolveComponentProps(array $attributes, Component $component)
+    {
+        if (PHP_VERSION_ID < 70400) {
+            return;
+        }
+
+        return $this->getPublicPropertyTypes($component)
+            ->intersectByKeys($attributes)
+            ->map(function ($className, $propName) use ($attributes) {
+                $resolved = $this->resolveParameter($attributes, $propName, $className);
+
+                return $resolved;
+            });
+    }
+
+    protected function resolveParameter($attributes, $parameterName, $parameterClassName)
+    {
+        $parameterValue = $attributes[$parameterName];
+
+        if ($parameterValue instanceof UrlRoutable) {
+            return $parameterValue;
+        }
+
+        $instance = app()->make($parameterClassName);
+
+        if (! $model = $instance->resolveRouteBinding($parameterValue)) {
+            throw (new ModelNotFoundException())->setModel(get_class($instance), [$parameterValue]);
+        }
+
+        return $model;
+    }
+
+    public function getPublicPropertyTypes($component)
+    {
+        if (PHP_VERSION_ID < 70400) {
+            return new Collection();
+        }
+
+        return collect($component->all())
+            ->map(function ($value, $name) use ($component) {
+                return Reflector::getParameterClassName(new \ReflectionProperty($component, $name));
+            })
+            ->filter();
     }
 
     public function destroyComponent($id): void
@@ -66,6 +122,18 @@ public function getListeners(): array
 
     public function render(): View
     {
-        return view('livewire-ui-modal::modal');
+        if (config('livewire-ui-modal.include_js', true)) {
+            $jsPath = __DIR__.'/../public/modal.js';
+        }
+
+        if (config('livewire-ui-modal.include_css', false)) {
+            $cssPath = __DIR__.'/../public/modal.css';
+        }
+
+        return view('livewire-ui-modal::modal', [
+            'jsPath' => $jsPath ?? null,
+            'cssPath' => $cssPath ?? null,
+        ]);
+
     }
 }
diff --git a/src/ModalComponent.php b/src/ModalComponent.php
index 2b4ee3b..78a4027 100644
--- a/src/ModalComponent.php
+++ b/src/ModalComponent.php
@@ -15,17 +15,6 @@ abstract class ModalComponent extends Component implements Contract
     public bool $destroySkipped = false;
 
     protected static array $maxWidths = [
-        // 'sm'  => 'sm:max-w-sm',
-        // 'md'  => 'sm:max-w-md',
-        // 'lg'  => 'sm:max-w-md md:max-w-lg',
-        // 'xl'  => 'sm:max-w-md md:max-w-xl',
-        // '2xl' => 'sm:max-w-md md:max-w-xl lg:max-w-2xl',
-        // '3xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl',
-        // '4xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl',
-        // '5xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl',
-        // '6xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl',
-        // '7xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl',
-
         'sm' => 'w-screen max-w-sm',
         'md' => 'w-screen max-w-md',
         'lg' => 'w-screen max-w-lg',
@@ -38,16 +27,6 @@ abstract class ModalComponent extends Component implements Contract
         '7xl' => 'w-screen max-w-7xl',
         'full' => 'w-screen max-w-full',
 
-        // 'sm'  => 'max-w-full sm:w-1/6',
-        // 'md'  => 'max-w-full sm:w-1/4',
-        // 'lg'  => 'max-w-full sm:max-w-md md:max-w-lg',
-        // 'xl'  => 'max-w-full sm:max-w-md md:max-w-xl',
-        // '2xl' => 'max-w-full sm:w-2/3 md:w-1/2 2xl:w-1/3',
-        // '3xl' => 'max-w-full sm:max-w-md md:max-w-xl lg:max-w-3xl',
-        // '4xl' => 'max-w-full sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl',
-        // '5xl' => 'max-w-full sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl',
-        // '6xl' => 'max-w-full sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl',
-        // '7xl' => 'max-w-full sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl',
     ];
 
     public function destroySkippedModals(): self
@@ -81,7 +60,7 @@ public function forceClose(): self
 
     public function closeModal(): void
     {
-        $this->emit('closeModal', $this->forceClose, $this->skipModals, $this->destroySkipped);
+        $this->dispatch('closeModal', force: $this->forceClose, skipPreviousModals: $this->skipModals, destroySkipped: $this->destroySkipped);
     }
 
     public function closeModalWithEvents(array $events): void
@@ -92,17 +71,7 @@ public function closeModalWithEvents(array $events): void
 
     public static function modalMaxWidth(): string
     {
-        return config('livewire-ui-modal.component_defaults.modal_max_width', '2xl');
-    }
-
-    public static function type(): string
-    {
-        return 'modal';
-    }
-
-    public static function fullScreenOnMobile(): bool
-    {
-        return false;
+        return config('wire-elements-modal.component_defaults.modal_max_width', '2xl');
     }
 
     public static function modalMaxWidthClass(): string
@@ -117,6 +86,16 @@ public static function modalMaxWidthClass(): string
         return static::$maxWidths[static::modalMaxWidth()];
     }
 
+    public static function type(): string
+    {
+        return 'modal';
+    }
+
+    public static function fullScreenOnMobile(): bool
+    {
+        return false;
+    }
+
     public static function closeModalOnClickAway(): bool
     {
         return config('livewire-ui-modal.component_defaults.close_modal_on_click_away', true);
@@ -150,9 +129,9 @@ private function emitModalEvents(array $events): void
             }
 
             if (is_numeric($component)) {
-                $this->emit($event, ...$params ?? []);
+                $this->dispatch($event, ...$params ?? []);
             } else {
-                $this->emitTo($component, $event, ...$params ?? []);
+                $this->dispatch($event, ...$params ?? [])->to($component);
             }
         }
     }
diff --git a/tests/Components/DemoModal.php b/tests/Components/DemoModal.php
index 407bba2..cd83a19 100644
--- a/tests/Components/DemoModal.php
+++ b/tests/Components/DemoModal.php
@@ -6,11 +6,18 @@
 
 class DemoModal extends ModalComponent
 {
+    public $user;
+
+    public $number;
+
+    public $message;
+
     public function render()
     {
         return <<<'blade'
             <div>
-                Hello
+                {$this->user} says:
+                {$this->message} + {$this->number}
             </div>
         blade;
     }
diff --git a/tests/LivewireModalComponentTest.php b/tests/LivewireModalComponentTest.php
index f96b53d..aaea9c7 100644
--- a/tests/LivewireModalComponentTest.php
+++ b/tests/LivewireModalComponentTest.php
@@ -3,6 +3,7 @@
 namespace LivewireUI\Modal\Tests;
 
 use Livewire\Livewire;
+use Livewire\Mechanisms\ComponentRegistry;
 use LivewireUI\Modal\Tests\Components\DemoModal;
 
 class LivewireModalComponentTest extends TestCase
@@ -11,7 +12,7 @@ public function testCloseModal(): void
     {
         Livewire::test(DemoModal::class)
             ->call('closeModal')
-            ->assertEmitted('closeModal', false, 0, false);
+            ->assertDispatched('closeModal', force: false, skipPreviousModals: 0, destroySkipped: false);
     }
 
     public function testForceCloseModal(): void
@@ -19,7 +20,7 @@ public function testForceCloseModal(): void
         Livewire::test(DemoModal::class)
             ->call('forceClose')
             ->call('closeModal')
-            ->assertEmitted('closeModal', true, 0, false);
+            ->assertDispatched('closeModal', force: true, skipPreviousModals: 0, destroySkipped: false);
     }
 
     public function testModalSkipping(): void
@@ -27,18 +28,18 @@ public function testModalSkipping(): void
         Livewire::test(DemoModal::class)
             ->call('skipPreviousModals', 5)
             ->call('closeModal')
-            ->assertEmitted('closeModal', false, 5, false);
+            ->assertDispatched('closeModal', force: false, skipPreviousModals: 5, destroySkipped: false);
 
         Livewire::test(DemoModal::class)
             ->call('skipPreviousModal')
             ->call('closeModal')
-            ->assertEmitted('closeModal', false, 1, false);
+            ->assertDispatched('closeModal', force: false, skipPreviousModals: 1, destroySkipped: false);
 
         Livewire::test(DemoModal::class)
             ->call('skipPreviousModal')
             ->call('destroySkippedModals')
             ->call('closeModal')
-            ->assertEmitted('closeModal', false, 1, true);
+            ->assertDispatched('closeModal', force: false, skipPreviousModals: 1, destroySkipped: true);
     }
 
     public function testModalEventEmitting(): void
@@ -47,24 +48,26 @@ public function testModalEventEmitting(): void
             ->call('closeModalWithEvents', [
                 'someEvent',
             ])
-            ->assertEmitted('someEvent');
+            ->assertDispatched('someEvent');
+
+        $name = app(ComponentRegistry::class)->getName(DemoModal::class);
 
         Livewire::test(DemoModal::class)
             ->call('closeModalWithEvents', [
-                DemoModal::getName() => 'someEvent',
+                $name => 'someEvent',
             ])
-            ->assertEmitted('someEvent');
+            ->assertDispatched('someEvent');
 
         Livewire::test(DemoModal::class)
             ->call('closeModalWithEvents', [
                 ['someEventWithParams', ['param1', 'param2']],
             ])
-            ->assertEmitted('someEventWithParams', 'param1', 'param2');
+            ->assertDispatched('someEventWithParams', 'param1', 'param2');
 
         Livewire::test(DemoModal::class)
             ->call('closeModalWithEvents', [
-                DemoModal::getName() => ['someEventWithParams', ['param1', 'param2']],
+                $name => ['someEventWithParams', ['param1', 'param2']],
             ])
-            ->assertEmitted('someEventWithParams', 'param1', 'param2');
+            ->assertDispatched('someEventWithParams', 'param1', 'param2');
     }
-}
+}
\ No newline at end of file
diff --git a/tests/LivewireModalTest.php b/tests/LivewireModalTest.php
index fc7b66c..df33acd 100644
--- a/tests/LivewireModalTest.php
+++ b/tests/LivewireModalTest.php
@@ -16,26 +16,29 @@ public function testOpenModalEventListener(): void
 
         // Event attributes
         $component = 'demo-modal';
-        $componentAttributes = ['message' => 'Foobar'];
+        $arguments = ['user' => 1, 'number' => 42, 'message' => 'Hello World'];
         $modalAttributes = ['hello' => 'world', 'closeOnEscape' => true, 'maxWidth' => '2xl',  'maxWidthClass' => 'sm:max-w-md md:max-w-xl lg:max-w-2xl', 'closeOnClickAway' => true, 'closeOnEscapeIsForceful' => true, 'dispatchCloseEvent' => false, 'destroyOnClose' => false, 'fullScreen' => false, 'type' => 'modal'];
 
         // Demo modal unique identifier
-        $id = md5($component.serialize($componentAttributes));
+        $id = md5($component.serialize($arguments));
 
         Livewire::test(Modal::class)
-            ->emit('openModal', $component, $componentAttributes, $modalAttributes)
+            ->dispatch('openModal', component: $component, arguments: $arguments, modalAttributes: $modalAttributes)
             // Verify component is added to $components
             ->assertSet('components', [
                 $id => [
                     'name' => $component,
-                    'attributes' => $componentAttributes,
+                    'arguments' => $arguments,
+                    'attributes' => $arguments, // Deprecated
                     'modalAttributes' => $modalAttributes,
                 ],
             ])
             // Verify component is set to active
             ->assertSet('activeComponent', $id)
             // Verify event is emitted to client
-            ->assertEmitted('activeModalComponentChanged', $id);
+            ->assertDispatched('activeModalComponentChanged', id: $id);
+            // Verif if component attribute 'message' is visible
+            // ->assertSee(['Hello World', 1, '42']);
     }
 
     public function testDestroyComponentEventListener(): void
@@ -44,22 +47,23 @@ public function testDestroyComponentEventListener(): void
         Livewire::component('demo-modal', DemoModal::class);
 
         $component = 'demo-modal';
-        $componentAttributes = ['message' => 'Foobar'];
+        $arguments = ['message' => 'Foobar'];
         $modalAttributes = ['hello' => 'world', 'closeOnEscape' => true, 'maxWidth' => '2xl', 'maxWidthClass' => 'sm:max-w-md md:max-w-xl lg:max-w-2xl', 'closeOnClickAway' => true, 'closeOnEscapeIsForceful' => true, 'dispatchCloseEvent' => false, 'destroyOnClose' => false, 'fullScreen' => false, 'type' => 'modal'];
 
         // Demo modal unique identifier
-        $id = md5($component.serialize($componentAttributes));
+        $id = md5($component.serialize($arguments));
 
         Livewire::test(Modal::class)
-            ->emit('openModal', $component, $componentAttributes, $modalAttributes)
+            ->dispatch('openModal', component: $component, arguments: $arguments, modalAttributes: $modalAttributes)
             ->assertSet('components', [
                 $id => [
                     'name' => $component,
-                    'attributes' => $componentAttributes,
+                    'arguments' => $arguments,
+                    'attributes' => $arguments, // Deprecated
                     'modalAttributes' => $modalAttributes,
                 ],
             ])
-            ->emit('destroyComponent', $id)
+            ->dispatch('destroyComponent', $id)
             ->assertSet('components', []);
     }
 
@@ -68,11 +72,11 @@ public function testModalReset(): void
         Livewire::component('demo-modal', DemoModal::class);
 
         Livewire::test(Modal::class)
-            ->emit('openModal', 'demo-modal')
+            ->dispatch('openModal', 'demo-modal')
             ->set('components', [
                 'some-component' => [
                     'name' => 'demo-modal',
-                    'attributes' => 'bar',
+                    'arguments' => ['bar'],
                     'modalAttributes' => [],
                 ],
             ])
@@ -90,6 +94,6 @@ public function testIfExceptionIsThrownIfModalDoesNotImplementContract(): void
         $this->expectExceptionMessage("[{$component}] does not implement [LivewireUI\Modal\Contracts\ModalComponent] interface.");
 
         Livewire::component('invalid-modal', $component);
-        Livewire::test(Modal::class)->emit('openModal', 'invalid-modal');
+        Livewire::test(Modal::class)->dispatch('openModal', component: 'invalid-modal');
     }
-}
+}
\ No newline at end of file

From 26fae7575ef2289ef412ca039c671c3ab49c2e6f Mon Sep 17 00:00:00 2001
From: jfsullivan <jfsullivan@users.noreply.github.com>
Date: Mon, 28 Aug 2023 01:10:41 +0000
Subject: [PATCH 2/3] Fix styling

---
 tests/LivewireModalComponentTest.php | 2 +-
 tests/LivewireModalTest.php          | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/LivewireModalComponentTest.php b/tests/LivewireModalComponentTest.php
index aaea9c7..eea1f61 100644
--- a/tests/LivewireModalComponentTest.php
+++ b/tests/LivewireModalComponentTest.php
@@ -70,4 +70,4 @@ public function testModalEventEmitting(): void
             ])
             ->assertDispatched('someEventWithParams', 'param1', 'param2');
     }
-}
\ No newline at end of file
+}
diff --git a/tests/LivewireModalTest.php b/tests/LivewireModalTest.php
index df33acd..0b98a5e 100644
--- a/tests/LivewireModalTest.php
+++ b/tests/LivewireModalTest.php
@@ -37,8 +37,8 @@ public function testOpenModalEventListener(): void
             ->assertSet('activeComponent', $id)
             // Verify event is emitted to client
             ->assertDispatched('activeModalComponentChanged', id: $id);
-            // Verif if component attribute 'message' is visible
-            // ->assertSee(['Hello World', 1, '42']);
+        // Verif if component attribute 'message' is visible
+        // ->assertSee(['Hello World', 1, '42']);
     }
 
     public function testDestroyComponentEventListener(): void
@@ -96,4 +96,4 @@ public function testIfExceptionIsThrownIfModalDoesNotImplementContract(): void
         Livewire::component('invalid-modal', $component);
         Livewire::test(Modal::class)->dispatch('openModal', component: 'invalid-modal');
     }
-}
\ No newline at end of file
+}

From be58e6e4f043c050e82f032e36848b3a074716b9 Mon Sep 17 00:00:00 2001
From: Jack Sullivan <jfsullivan@foursullivans.com>
Date: Tue, 19 Mar 2024 01:16:35 -0400
Subject: [PATCH 3/3] Livewire 3 update

---
 README.md                                     |  8 ++---
 composer.json                                 |  2 +-
 ...e-ui-modal.php => wire-elements-modal.php} |  0
 public/modal.js                               |  2 +-
 resources/js/modal.js                         | 19 ++----------
 resources/views/modal-test.blade.php          | 30 +++++++++++++++++++
 resources/views/modal.blade.php               | 18 ++++++-----
 src/LivewireModalServiceProvider.php          |  4 +--
 src/Modal.php                                 |  2 +-
 src/ModalComponent.php                        | 10 +++----
 tests/LivewireModalTest.php                   |  4 +--
 11 files changed, 59 insertions(+), 40 deletions(-)
 rename config/{livewire-ui-modal.php => wire-elements-modal.php} (100%)
 create mode 100644 resources/views/modal-test.blade.php

diff --git a/README.md b/README.md
index 3c89972..bdffafa 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ You can run `php artisan make:livewire EditUser` to make the initial Livewire co
 ```php
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Livewire;
 
 use LivewireUI\Modal\ModalComponent;
 
@@ -106,7 +106,7 @@ The parameters are passed to the `mount` method on the modal component:
 ```php
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Livewire;
 
 use App\Models\User;
 use LivewireUI\Modal\ModalComponent;
@@ -151,7 +151,7 @@ You can also close a modal from within your modal component class:
 ```php
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Livewire;
 
 use App\Models\User;
 use LivewireUI\Modal\ModalComponent;
@@ -290,7 +290,7 @@ You can use the `skipPreviousModal` method to achieve this. By default it will s
 ```php
 <?php
 
-namespace App\Http\Livewire;
+namespace App\Livewire;
 
 use App\Models\Team;
 use LivewireUI\Modal\ModalComponent;
diff --git a/composer.json b/composer.json
index e1cf224..f3e99bb 100644
--- a/composer.json
+++ b/composer.json
@@ -24,7 +24,7 @@
         "laravel/pint": "^1.0",
         "nunomaduro/collision": "^7.9",
         "nunomaduro/larastan": "^2.0.1",
-        "orchestra/testbench": "^8.0",
+        "orchestra/testbench": "^8.5",
         "pestphp/pest": "^2.0",
         "pestphp/pest-plugin-arch": "^2.0",
         "pestphp/pest-plugin-laravel": "^2.0",
diff --git a/config/livewire-ui-modal.php b/config/wire-elements-modal.php
similarity index 100%
rename from config/livewire-ui-modal.php
rename to config/wire-elements-modal.php
diff --git a/public/modal.js b/public/modal.js
index da49033..97ef8dc 100644
--- a/public/modal.js
+++ b/public/modal.js
@@ -1 +1 @@
-(()=>{var t,e={331:()=>{function t(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,o){if(!t)return;if("string"==typeof t)return e(t,o);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,o)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=new Array(e);o<e;o++)n[o]=t[o];return n}window.LivewireUIModal=function(){return{show:!1,showActiveComponent:!0,activeComponent:!1,activeComponentType:null,componentHistory:[],modalWidth:null,fullScreen:!1,getActiveComponentModalAttribute:function(t){if(void 0!==this.$wire.get("components")[this.activeComponent])return this.$wire.get("components")[this.activeComponent].modalAttributes[t]},closeModalOnEscape:function(t){if(!1!==this.getActiveComponentModalAttribute("closeOnEscape")){var e=!0===this.getActiveComponentModalAttribute("closeOnEscapeIsForceful");this.closeModal(e)}},closeModalOnClickAway:function(t){!1!==this.getActiveComponentModalAttribute("closeOnClickAway")&&this.closeModal(!0)},closeModal:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!1!==this.show){if(!0===this.getActiveComponentModalAttribute("dispatchCloseEvent")){var n=this.$wire.get("components")[this.activeComponent].name;Livewire.dispatch("modalClosed",n)}if(!0===this.getActiveComponentModalAttribute("destroyOnClose")&&Livewire.dispatch("destroyComponent",this.activeComponent),e>0)for(var i=0;i<e;i++){if(o){var r=this.componentHistory[this.componentHistory.length-1];Livewire.dispatch("destroyComponent",{id:r})}this.componentHistory.pop()}var s=this.componentHistory.pop();s&&!1===t&&s?this.setActiveModalComponent(s,!0):this.setShowPropertyTo(!1)}},setActiveModalComponent:function(t){var e=this,o=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.setShowPropertyTo(!0),this.activeComponent!==t){!1!==this.activeComponent&&!1===o&&this.componentHistory.push(this.activeComponent);var n=50;!1===this.activeComponent?(this.activeComponent=t,this.activeComponentType=this.getActiveComponentModalAttribute("type"),this.showActiveComponent=!0,this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass"),this.fullScreen=this.getActiveComponentModalAttribute("fullScreen")):(this.showActiveComponent=!1,n=400,setTimeout((function(){e.activeComponent=t,e.activeComponentType=e.getActiveComponentModalAttribute("type"),e.showActiveComponent=!0,e.modalWidth=e.getActiveComponentModalAttribute("maxWidthClass"),e.fullScreen=e.getActiveComponentModalAttribute("fullScreen")}),300)),this.$nextTick((function(){var o,i=null===(o=e.$refs[t])||void 0===o?void 0:o.querySelector("[autofocus]");i&&setTimeout((function(){i.focus()}),n)}))}},focusables:function(){return t(this.$el.querySelectorAll("a, button, input:not([type='hidden'], textarea, select, details, [tabindex]:not([tabindex='-1'])")).filter((function(t){return!t.hasAttribute("disabled")}))},firstFocusable:function(){return this.focusables()[0]},lastFocusable:function(){return this.focusables().slice(-1)[0]},nextFocusable:function(){return this.focusables()[this.nextFocusableIndex()]||this.firstFocusable()},prevFocusable:function(){return this.focusables()[this.prevFocusableIndex()]||this.lastFocusable()},nextFocusableIndex:function(){return(this.focusables().indexOf(document.activeElement)+1)%(this.focusables().length+1)},prevFocusableIndex:function(){return Math.max(0,this.focusables().indexOf(document.activeElement))-1},setShowPropertyTo:function(t){var e=this;this.show=t,t?document.body.classList.add("overflow-y-hidden"):(document.body.classList.remove("overflow-y-hidden"),setTimeout((function(){e.activeComponent=!1,e.$wire.resetState()}),300))},init:function(){var t=this;this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass"),this.fullScreen=this.getActiveComponentModalAttribute("fullScreen"),Livewire.on("closeModal",(function(e){var o,n,i;t.closeModal(null!==(o=null==e?void 0:e.force)&&void 0!==o&&o,null!==(n=null==e?void 0:e.skipPreviousModals)&&void 0!==n?n:0,null!==(i=null==e?void 0:e.destroySkipped)&&void 0!==i&&i)})),Livewire.on("activeModalComponentChanged",(function(e){var o=e.id;t.setActiveModalComponent(o)}))}}}},754:()=>{}},o={};function n(t){var i=o[t];if(void 0!==i)return i.exports;var r=o[t]={exports:{}};return e[t](r,r.exports,n),r.exports}n.m=e,t=[],n.O=(e,o,i,r)=>{if(!o){var s=1/0;for(u=0;u<t.length;u++){for(var[o,i,r]=t[u],a=!0,l=0;l<o.length;l++)(!1&r||s>=r)&&Object.keys(n.O).every((t=>n.O[t](o[l])))?o.splice(l--,1):(a=!1,r<s&&(s=r));if(a){t.splice(u--,1);var c=i();void 0!==c&&(e=c)}}return e}r=r||0;for(var u=t.length;u>0&&t[u-1][2]>r;u--)t[u]=t[u-1];t[u]=[o,i,r]},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t={387:0,109:0};n.O.j=e=>0===t[e];var e=(e,o)=>{var i,r,[s,a,l]=o,c=0;if(s.some((e=>0!==t[e]))){for(i in a)n.o(a,i)&&(n.m[i]=a[i]);if(l)var u=l(n)}for(e&&e(o);c<s.length;c++)r=s[c],n.o(t,r)&&t[r]&&t[r][0](),t[r]=0;return n.O(u)},o=self.webpackChunk=self.webpackChunk||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})(),n.O(void 0,[109],(()=>n(331)));var i=n.O(void 0,[109],(()=>n(754)));i=n.O(i)})();
\ No newline at end of file
+(()=>{var t,e={331:()=>{function t(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,o){if(!t)return;if("string"==typeof t)return e(t,o);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,o)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=new Array(e);o<e;o++)n[o]=t[o];return n}window.LivewireUIModal=function(){return{show:!1,showActiveComponent:!0,activeComponent:!1,activeComponentType:null,componentHistory:[],modalWidth:null,fullScreen:!1,getActiveComponentModalAttribute:function(t){if(void 0!==this.$wire.get("components")[this.activeComponent])return this.$wire.get("components")[this.activeComponent].modalAttributes[t]},closeModalOnEscape:function(t){if(!1!==this.getActiveComponentModalAttribute("closeOnEscape")){var e=!0===this.getActiveComponentModalAttribute("closeOnEscapeIsForceful");this.closeModal(e)}},closeModalOnClickAway:function(t){!1!==this.getActiveComponentModalAttribute("closeOnClickAway")&&this.closeModal(!0)},closeModal:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!1!==this.show){if(!0===this.getActiveComponentModalAttribute("dispatchCloseEvent")){var n=this.$wire.get("components")[this.activeComponent].name;Livewire.dispatch("modalClosed",n)}if(!0===this.getActiveComponentModalAttribute("destroyOnClose")&&Livewire.dispatch("destroyComponent",{id:this.activeComponent}),e>0)for(var i=0;i<e;i++){if(o){var r=this.componentHistory[this.componentHistory.length-1];Livewire.dispatch("destroyComponent",{id:r})}this.componentHistory.pop()}var s=this.componentHistory.pop();s&&!t&&s?this.setActiveModalComponent(s,!0):this.setShowPropertyTo(!1)}},setActiveModalComponent:function(t){var e=this,o=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.setShowPropertyTo(!0),this.activeComponent!==t){!1!==this.activeComponent&&!1===o&&this.componentHistory.push(this.activeComponent);var n=50;!1===this.activeComponent?(this.activeComponent=t,this.activeComponentType=this.getActiveComponentModalAttribute("type"),this.showActiveComponent=!0,this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass"),this.fullScreen=this.getActiveComponentModalAttribute("fullScreen")):(this.showActiveComponent=!1,n=400,setTimeout((function(){e.activeComponent=t,e.activeComponentType=e.getActiveComponentModalAttribute("type"),e.showActiveComponent=!0,e.modalWidth=e.getActiveComponentModalAttribute("maxWidthClass"),e.fullScreen=e.getActiveComponentModalAttribute("fullScreen")}),300)),this.$nextTick((function(){var o,i=null===(o=e.$refs[t])||void 0===o?void 0:o.querySelector("[autofocus]");i&&setTimeout((function(){i.focus()}),n)}))}},focusables:function(){return t(this.$el.querySelectorAll("a, button, input:not([type='hidden'], textarea, select, details, [tabindex]:not([tabindex='-1'])")).filter((function(t){return!t.hasAttribute("disabled")}))},firstFocusable:function(){return this.focusables()[0]},lastFocusable:function(){return this.focusables().slice(-1)[0]},nextFocusable:function(){return this.focusables()[this.nextFocusableIndex()]||this.firstFocusable()},prevFocusable:function(){return this.focusables()[this.prevFocusableIndex()]||this.lastFocusable()},nextFocusableIndex:function(){return(this.focusables().indexOf(document.activeElement)+1)%(this.focusables().length+1)},prevFocusableIndex:function(){return Math.max(0,this.focusables().indexOf(document.activeElement))-1},setShowPropertyTo:function(t){var e=this;this.show=t,t?document.body.classList.add("overflow-y-hidden"):(document.body.classList.remove("overflow-y-hidden"),setTimeout((function(){e.activeComponent=!1,e.$wire.resetState()}),300))},init:function(){var t=this;this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass"),this.fullScreen=this.getActiveComponentModalAttribute("fullScreen"),Livewire.on("closeModal",(function(e){var o,n,i;t.closeModal(null!==(o=null==e?void 0:e.force)&&void 0!==o&&o,null!==(n=null==e?void 0:e.skipPreviousModals)&&void 0!==n?n:0,null!==(i=null==e?void 0:e.destroySkipped)&&void 0!==i&&i)})),Livewire.on("activeModalComponentChanged",(function(e){var o=e.id;t.setActiveModalComponent(o)}))}}}},754:()=>{}},o={};function n(t){var i=o[t];if(void 0!==i)return i.exports;var r=o[t]={exports:{}};return e[t](r,r.exports,n),r.exports}n.m=e,t=[],n.O=(e,o,i,r)=>{if(!o){var s=1/0;for(u=0;u<t.length;u++){for(var[o,i,r]=t[u],a=!0,l=0;l<o.length;l++)(!1&r||s>=r)&&Object.keys(n.O).every((t=>n.O[t](o[l])))?o.splice(l--,1):(a=!1,r<s&&(s=r));if(a){t.splice(u--,1);var c=i();void 0!==c&&(e=c)}}return e}r=r||0;for(var u=t.length;u>0&&t[u-1][2]>r;u--)t[u]=t[u-1];t[u]=[o,i,r]},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t={387:0,109:0};n.O.j=e=>0===t[e];var e=(e,o)=>{var i,r,[s,a,l]=o,c=0;if(s.some((e=>0!==t[e]))){for(i in a)n.o(a,i)&&(n.m[i]=a[i]);if(l)var u=l(n)}for(e&&e(o);c<s.length;c++)r=s[c],n.o(t,r)&&t[r]&&t[r][0](),t[r]=0;return n.O(u)},o=self.webpackChunk=self.webpackChunk||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})(),n.O(void 0,[109],(()=>n(331)));var i=n.O(void 0,[109],(()=>n(754)));i=n.O(i)})();
\ No newline at end of file
diff --git a/resources/js/modal.js b/resources/js/modal.js
index 87d5943..5f28f11 100644
--- a/resources/js/modal.js
+++ b/resources/js/modal.js
@@ -38,7 +38,7 @@ window.LivewireUIModal = () => {
             }
 
             if (this.getActiveComponentModalAttribute('destroyOnClose') === true) {
-                Livewire.dispatch('destroyComponent', this.activeComponent);
+                Livewire.dispatch('destroyComponent', {id: this.activeComponent});
             }
 
             if (skipPreviousModals > 0) {
@@ -53,7 +53,7 @@ window.LivewireUIModal = () => {
 
             const id = this.componentHistory.pop();
 
-            if (id && force === false) {
+            if (id && !force) {
                 if (id) {
                     this.setActiveModalComponent(id, true);
                 } else {
@@ -148,21 +148,6 @@ window.LivewireUIModal = () => {
             this.modalWidth = this.getActiveComponentModalAttribute('maxWidthClass');
             this.fullScreen = this.getActiveComponentModalAttribute('fullScreen');
 
-            // this.$watch('show', value => {
-            //     if (value) {
-            //         document.body.classList.add('overflow-y-hidden');
-            //     } else {
-            //         document.body.classList.remove('overflow-y-hidden');
-
-            //         setTimeout(() => {
-            //             this.activeComponent = false;
-            //             this.activeComponentType = null;
-                        
-            //             this.$wire.resetState();
-            //         }, 300);
-            //     }
-            // });
-
             Livewire.on('closeModal', (data) => {
                 this.closeModal(data?.force ?? false, data?.skipPreviousModals ?? 0, data?.destroySkipped ?? false);
             });
diff --git a/resources/views/modal-test.blade.php b/resources/views/modal-test.blade.php
new file mode 100644
index 0000000..db88865
--- /dev/null
+++ b/resources/views/modal-test.blade.php
@@ -0,0 +1,30 @@
+{{-- w-screen max-w-sm max-w-md max-w-lg max-w-xl max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl max-w-full duration-2000--}}
+<div>
+    @isset($jsPath)
+        <script>{!! file_get_contents($jsPath) !!}</script>
+    @endisset
+    @isset($cssPath)
+        <style>{!! file_get_contents($cssPath) !!}</style>
+    @endisset
+
+    @teleport('body')
+        <div
+            x-data="LivewireUIModal()"
+            x-on:close.stop="setShowPropertyTo(false)"
+            x-on:keydown.escape.window="closeModalOnEscape()"
+            x-show="show"
+            class="fixed inset-0 z-40 overflow-y-auto"
+            style="display: none;"
+        >
+            <div class="w-screen h-full pointer-events-auto" 
+                x-bind:class="modalWidth"
+            >
+                @foreach($components as $id => $component)
+                    <div class="flex flex-col h-full" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                        @livewire($component['name'], $component['arguments'], key($id))
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    @endteleport
+</div>
\ No newline at end of file
diff --git a/resources/views/modal.blade.php b/resources/views/modal.blade.php
index c0c1a41..ae11b6f 100644
--- a/resources/views/modal.blade.php
+++ b/resources/views/modal.blade.php
@@ -35,7 +35,7 @@ class="fixed inset-0 transition-all transform"
         <div class="fixed inset-0 overflow-hidden" x-show="show">
             <div class="absolute inset-0 overflow-hidden">
                 <div 
-                    class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full" 
+                    class="fixed inset-y-0 right-0 flex max-w-full pointer-events-none" 
                     x-bind:class="{ 'pl-10 sm:pl-16' : !fullScreen}"
                     x-show="activeComponentType == 'slide-over'"
                 >
@@ -47,13 +47,15 @@ class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full"
                         x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" 
                         x-transition:leave-start="translate-x-0" 
                         x-transition:leave-end="translate-x-full" 
-                        class="h-full pointer-events-auto w-screen" 
-                        x-bind:class="modalWidth" 
+                        class="w-screen h-full pointer-events-auto" 
+                        x-bind:class="modalWidth"
+                        id="modal-container"
+                        {{-- x-trap.noscroll.inert="show && showActiveComponent" --}}
                         x-description="Slide-over panel, show/hide based on slide-over state."
                     >
                         @foreach($components as $id => $component)
                             @if(isset($component['modalAttributes']['type']) && $component['modalAttributes']['type'] == 'slide-over')
-                                <div class="flex h-full flex-col" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                                <div class="flex flex-col h-full" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
                                     @livewire($component['name'], $component['arguments'], key($id))
                                 </div>
                             @endif
@@ -62,7 +64,7 @@ class="h-full pointer-events-auto w-screen"
                 </div>
 
                 <div class="fixed inset-0 overflow-y-auto" x-show="activeComponentType == 'modal'">
-                    <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
+                    <div class="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
                         <div 
                             x-show="show && activeComponentType == 'modal'" 
                             x-transition:enter="ease-out duration-300" 
@@ -71,13 +73,15 @@ class="h-full pointer-events-auto w-screen"
                             x-transition:leave="ease-in duration-200" 
                             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
                             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                            class="relative bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all w-screen sm:p-6" 
+                            class="relative w-screen px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white shadow-xl rounded-xl sm:p-6" 
                             x-bind:class="modalWidth" 
+                            id="modal-container"
+                            x-trap.noscroll.inert="show && showActiveComponent"
                             x-description="Modal panel, show/hide based on modal state." 
                         >
                             @foreach($components as $id => $component)
                                 @if(isset($component['modalAttributes']['type']) && $component['modalAttributes']['type'] == 'modal')
-                                    <div class="flex h-full flex-col" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                                    <div class="flex flex-col h-full" x-show="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
                                         @livewire($component['name'], $component['arguments'], key($id))
                                     </div>
                                 @endif
diff --git a/src/LivewireModalServiceProvider.php b/src/LivewireModalServiceProvider.php
index 78f4204..5e59498 100644
--- a/src/LivewireModalServiceProvider.php
+++ b/src/LivewireModalServiceProvider.php
@@ -12,14 +12,14 @@ class LivewireModalServiceProvider extends PackageServiceProvider
     public function configurePackage(Package $package): void
     {
         $package
-            ->name('livewire-ui-modal')
+            ->name('wire-elements-modal')
             ->hasConfigFile()
             ->hasViews();
     }
 
     public function bootingPackage(): void
     {
-        Livewire::component('livewire-ui-modal', Modal::class);
+        Livewire::component('wire-elements-modal', Modal::class);
 
         // View::composer('livewire-ui-modal::modal', function ($view) {
         //     if (config('livewire-ui-modal.include_js', true)) {
diff --git a/src/Modal.php b/src/Modal.php
index 43648e2..a0f69e1 100644
--- a/src/Modal.php
+++ b/src/Modal.php
@@ -130,7 +130,7 @@ public function render(): View
             $cssPath = __DIR__.'/../public/modal.css';
         }
 
-        return view('livewire-ui-modal::modal', [
+        return view('wire-elements-modal::modal', [
             'jsPath' => $jsPath ?? null,
             'cssPath' => $cssPath ?? null,
         ]);
diff --git a/src/ModalComponent.php b/src/ModalComponent.php
index 78a4027..9589a72 100644
--- a/src/ModalComponent.php
+++ b/src/ModalComponent.php
@@ -98,27 +98,27 @@ public static function fullScreenOnMobile(): bool
 
     public static function closeModalOnClickAway(): bool
     {
-        return config('livewire-ui-modal.component_defaults.close_modal_on_click_away', true);
+        return config('wire-elements-modal.component_defaults.close_modal_on_click_away', true);
     }
 
     public static function closeModalOnEscape(): bool
     {
-        return config('livewire-ui-modal.component_defaults.close_modal_on_escape', true);
+        return config('wire-elements-modal.component_defaults.close_modal_on_escape', true);
     }
 
     public static function closeModalOnEscapeIsForceful(): bool
     {
-        return config('livewire-ui-modal.component_defaults.close_modal_on_escape_is_forceful', true);
+        return config('wire-elements-modal.component_defaults.close_modal_on_escape_is_forceful', true);
     }
 
     public static function dispatchCloseEvent(): bool
     {
-        return config('livewire-ui-modal.component_defaults.dispatch_close_event', false);
+        return config('wire-elements-modal.component_defaults.dispatch_close_event', false);
     }
 
     public static function destroyOnClose(): bool
     {
-        return config('livewire-ui-modal.component_defaults.destroy_on_close', false);
+        return config('wire-elements-modal.component_defaults.destroy_on_close', false);
     }
 
     private function emitModalEvents(array $events): void
diff --git a/tests/LivewireModalTest.php b/tests/LivewireModalTest.php
index 0b98a5e..87f7f0d 100644
--- a/tests/LivewireModalTest.php
+++ b/tests/LivewireModalTest.php
@@ -36,9 +36,9 @@ public function testOpenModalEventListener(): void
             // Verify component is set to active
             ->assertSet('activeComponent', $id)
             // Verify event is emitted to client
-            ->assertDispatched('activeModalComponentChanged', id: $id);
+            ->assertDispatched('activeModalComponentChanged', id: $id)
         // Verif if component attribute 'message' is visible
-        // ->assertSee(['Hello World', 1, '42']);
+            ->assertSee(['Hello World', 1, '42']);
     }
 
     public function testDestroyComponentEventListener(): void