@adamjanicki/ui 1.3.3 → 1.3.4

package/hooks/useFocusTrap.js

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from "react";
-var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
+import { useEffect, useRef, useCallback } from "react";
+var selector = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
 /**
  * A hook for trapping focus within an element.
  *
@@ -10,42 +10,48 @@ var focusableElementsString = 'a[href], area[href], input:not([disabled]), selec
 var useFocusTrap = function (isActive) {
     if (isActive === void 0) { isActive = true; }
     var trapRef = useRef(null);
+    var focusableElements = useRef(null);
+    var updateFocusableElements = useCallback(function () {
+        if (trapRef.current) {
+            focusableElements.current = trapRef.current.querySelectorAll(selector);
+        }
+    }, []);
     useEffect(function () {
         if (!isActive || !trapRef.current)
             return;
-        var focusableElements = trapRef.current.querySelectorAll(focusableElementsString);
-        var trapFocus = function (event) {
+        updateFocusableElements();
+        var handleKeyDown = function (event) {
             var _a;
             if (event.key !== "Tab")
                 return;
-            if (focusableElements.length === 0)
+            if (!focusableElements.current ||
+                focusableElements.current.length === 0) {
                 return event.preventDefault();
-            var activeEl = document.activeElement;
-            var firstEl = focusableElements[0];
-            var lastEl = focusableElements[focusableElements.length - 1];
-            var focusFirst = function () {
-                firstEl.focus();
-                event.preventDefault();
-            };
-            var focusLast = function () {
+            }
+            var activeElement = document.activeElement;
+            var firstEl = focusableElements.current[0];
+            var lastEl = focusableElements.current[focusableElements.current.length - 1];
+            if (event.shiftKey && activeElement === firstEl) {
                 lastEl.focus();
                 event.preventDefault();
-            };
-            if (activeEl === firstEl && event.shiftKey) {
-                focusLast();
             }
-            else if (activeEl === lastEl && !event.shiftKey) {
-                focusFirst();
+            else if (!event.shiftKey && activeElement === lastEl) {
+                firstEl.focus();
+                event.preventDefault();
             }
-            else if (!activeEl || !((_a = trapRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeEl))) {
-                event.shiftKey ? focusLast() : focusFirst();
+            else if (!((_a = trapRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+                (event.shiftKey ? lastEl : firstEl).focus();
+                event.preventDefault();
             }
         };
-        document.addEventListener("keydown", trapFocus);
+        var observer = new MutationObserver(updateFocusableElements);
+        observer.observe(trapRef.current, { childList: true, subtree: true });
+        document.addEventListener("keydown", handleKeyDown);
         return function () {
-            document.removeEventListener("keydown", trapFocus);
+            document.removeEventListener("keydown", handleKeyDown);
+            observer.disconnect();
         };
-    }, [isActive]);
+    }, [isActive, updateFocusableElements]);
     return trapRef;
 };
 export default useFocusTrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",