refactor: ability to pause modal focus trap (#586)

Author: alexbarnsley

composer.json

@@ -126,4 +126,4 @@
         "spatie/laravel-permission": "Needed for nova permissions & roles",
         "vyuldashev/nova-permission": "Needed for nova permissions & roles"
     }
-}
+}

icons.html

@@ -86,6 +86,15 @@ const Modal = {
 
         this.trappedFocus = trap.activate();
         this.trappedElement = el;
+
+        window.addEventListener(
+            "pauseFocusTrap",
+            this.pauseFocusTrap.bind(this)
+        );
+        window.addEventListener(
+            "resumeFocusTrap",
+            this.resumeFocusTrap.bind(this)
+        );
     },
 
     releaseTrappedFocus() {
@@ -96,6 +105,31 @@ const Modal = {
         this.trappedFocus.deactivate();
         this.trappedFocus = null;
         this.trappedElement = null;
+
+        window.removeEventListener(
+            "pauseFocusTrap",
+            this.pauseFocusTrap.bind(this)
+        );
+        window.removeEventListener(
+            "resumeFocusTrap",
+            this.resumeFocusTrap.bind(this)
+        );
+    },
+
+    pauseFocusTrap() {
+        if (!this.trappedFocus) {
+            return;
+        }
+
+        this.trappedFocus.pause();
+    },
+
+    resumeFocusTrap() {
+        if (!this.trappedFocus) {
+            return;
+        }
+
+        this.trappedFocus.unpause();
     },
 
     alpine(extraData = {}, modalName = "", eventSettings = {}) {

resources/assets/js/modal.js

@@ -6,7 +6,6 @@
 
 use ARKEcosystem\Foundation\Fortify\Models\Concerns\HasLocalizedTimestamps;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
-use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\MorphTo;
 use Illuminate\Notifications\DatabaseNotification as BaseNotification;
 use Illuminate\Support\Arr;