refactored x-trap to use focus-trap plugin (#2072)

Co-authored-by: Caleb Porzio <calebporzio@gmail.com>

packages/alpinejs/src/utils/bind.js

@@ -125,5 +125,5 @@ function isBooleanAttr(attrName) {
 }
 
 function attributeShouldntBePreservedIfFalsy(name) {
-    return ! ['aria-pressed', 'aria-checked'].includes(name)
+    return ! ['aria-pressed', 'aria-checked', 'aria-expanded'].includes(name)
 }

packages/trap/package.json

@@ -8,6 +8,6 @@
     "module": "dist/module.esm.js",
     "unpkg": "dist/cdn.min.js",
     "dependencies": {
-        "wicg-inert": "^3.1.1"
+        "focus-trap": "^6.6.1"
     }
 }

packages/trap/src/index.js

@@ -1,4 +1,4 @@
-import 'wicg-inert'
+import { createFocusTrap } from 'focus-trap';
 
 export default function (Alpine) {
     Alpine.directive('trap', (el, { expression }, { effect, evaluateLater }) => {
@@ -6,62 +6,27 @@ export default function (Alpine) {
 
         let oldValue = false
 
-        let undoTrappings = []
+        let trap = createFocusTrap(el, { 
+            escapeDeactivates: false,
+            allowOutsideClick: true
+        })
 
         effect(() => evaluator(value => {
             if (oldValue === value) return
 
             // Start trapping.
             if (value && ! oldValue) {
-                let activeEl = document.activeElement
-
-                undoTrappings.push(() => activeEl && setTimeout(() => activeEl.focus()))
-
-                crawlSiblingsUp(el, (sibling) => {
-                    let cache = sibling.hasAttribute('inert')
-
-                    sibling.setAttribute('inert', 'inert')
-
-                    undoTrappings.push(() => cache || sibling.removeAttribute('inert'))
-                })
-
-                focusFirstElement(el)
+                setTimeout(() => {
+                    trap.activate()
+                });
             }
 
             // Stop trapping.
             if (! value && oldValue) {
-                while(undoTrappings.length) undoTrappings.pop()()
+                trap.deactivate()
             }
 
             oldValue = !! value
         }))
     })
 }
-
-function crawlSiblingsUp(el, callback) {
-    if (el.isSameNode(document.body) || ! el.parentNode) return
-
-    Array.from(el.parentNode.children).forEach(sibling => {
-        if (! sibling.isSameNode(el)) callback(sibling)
-
-        crawlSiblingsUp(el.parentNode, callback)
-    })
-}
-
-function focusFirstElement(el) {
-    let autofocus = el.querySelector('[autofocus]')
-
-    if (autofocus) {
-        setTimeout(() => autofocus.focus())
-    } else {
-        // All focusable element types...
-        let selector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
-
-        let firstFocusable = Array.from(el.querySelectorAll(selector))
-            // All non-disabled elements...
-            .filter(el => ! el.hasAttribute('disabled'))
-            [0]
-
-        setTimeout(() => firstFocusable && firstFocusable.focus())
-    }
-}