@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib/behaviors/focusTrap.js

@@ -1,25 +1,34 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusTrap = void 0;
-const iterateFocusableElements_1 = require("../utils/iterateFocusableElements");
-const eventListenerSignal_1 = require("../polyfills/eventListenerSignal");
-eventListenerSignal_1.polyfill();
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.focusTrap = focusTrap;
+
+var _iterateFocusableElements = require("../utils/iterateFocusableElements");
+
+var _eventListenerSignal = require("../polyfills/eventListenerSignal");
+
+(0, _eventListenerSignal.polyfill)();
 const suspendedTrapStack = [];
 let activeTrap = undefined;
+
 function tryReactivate() {
-    const trapToReactivate = suspendedTrapStack.pop();
-    if (trapToReactivate) {
-        focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
-    }
-}
-// @todo If AbortController.prototype.follow is ever implemented, that
+  const trapToReactivate = suspendedTrapStack.pop();
+
+  if (trapToReactivate) {
+    focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
+  }
+} // @todo If AbortController.prototype.follow is ever implemented, that
 // could replace this function. @see https://github.com/whatwg/dom/issues/920
+
+
 function followSignal(signal) {
-    const controller = new AbortController();
-    signal.addEventListener('abort', () => {
-        controller.abort();
-    });
-    return controller;
+  const controller = new AbortController();
+  signal.addEventListener('abort', () => {
+    controller.abort();
+  });
+  return controller;
 }
 /**
  * Returns the first focusable child of `container`. If `lastChild` is true,
@@ -27,117 +36,144 @@ function followSignal(signal) {
  * @param container
  * @param lastChild
  */
+
+
 function getFocusableChild(container, lastChild = false) {
-    return iterateFocusableElements_1.iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
+  return (0, _iterateFocusableElements.iterateFocusableElements)(container, {
+    reverse: lastChild,
+    strict: true,
+    onlyTabbable: true
+  }).next().value;
 }
+/**
+ * Traps focus within the given container.
+ * @param container The container in which to trap focus
+ * @returns AbortController - call `.abort()` to disable the focus trap
+ */
+
+
 function focusTrap(container, initialFocus, abortSignal) {
-    // Set up an abort controller if a signal was not passed in
-    const controller = new AbortController();
-    const signal = abortSignal ?? controller.signal;
-    container.setAttribute('data-focus-trap', 'active');
-    let lastFocusedChild = undefined;
-    // Ensure focus remains in the trap zone by checking that a given recently-focused
-    // element is inside the trap zone. If it isn't, redirect focus to a suitable
-    // element within the trap zone. If need to redirect focus and a suitable element
-    // is not found, focus the container.
-    function ensureTrapZoneHasFocus(focusedElement) {
-        if (focusedElement instanceof HTMLElement && document.contains(container)) {
-            if (container.contains(focusedElement)) {
-                // If a child of the trap zone was focused, remember it
-                lastFocusedChild = focusedElement;
-                return;
-            }
-            else {
-                if (lastFocusedChild && iterateFocusableElements_1.isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
-                    lastFocusedChild.focus();
-                    return;
-                }
-                else if (initialFocus && container.contains(initialFocus)) {
-                    initialFocus.focus();
-                    return;
-                }
-                else {
-                    // Ensure the container is focusable:
-                    // - Either the container already has a `tabIndex`
-                    // - Or provide a temporary `tabIndex`
-                    const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.setAttribute('tabindex', '-1');
-                    }
-                    // Focus the container.
-                    container.focus();
-                    // If a temporary `tabIndex` was provided, remove it.
-                    if (containerNeedsTemporaryTabIndex) {
-                        // Once focus has moved from the container to a child within the FocusTrap,
-                        // the container can be made un-refocusable by removing `tabIndex`.
-                        container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
-                        // NB: If `tabIndex` was removed *before* `blur`, then certain browsers (e.g. Chrome)
-                        // would consider `body` the `activeElement`, and as a result, keyboard navigation
-                        // between children would break, since `body` is outside the `FocusTrap`.
-                    }
-                    return;
-                }
-            }
+  // Set up an abort controller if a signal was not passed in
+  const controller = new AbortController();
+  const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
+  container.setAttribute('data-focus-trap', 'active');
+  let lastFocusedChild = undefined; // Ensure focus remains in the trap zone by checking that a given recently-focused
+  // element is inside the trap zone. If it isn't, redirect focus to a suitable
+  // element within the trap zone. If need to redirect focus and a suitable element
+  // is not found, focus the container.
+
+  function ensureTrapZoneHasFocus(focusedElement) {
+    if (focusedElement instanceof HTMLElement && document.contains(container)) {
+      if (container.contains(focusedElement)) {
+        // If a child of the trap zone was focused, remember it
+        lastFocusedChild = focusedElement;
+        return;
+      } else {
+        if (lastFocusedChild && (0, _iterateFocusableElements.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
+          lastFocusedChild.focus();
+          return;
+        } else if (initialFocus && container.contains(initialFocus)) {
+          initialFocus.focus();
+          return;
+        } else {
+          // Ensure the container is focusable:
+          // - Either the container already has a `tabIndex`
+          // - Or provide a temporary `tabIndex`
+          const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
+
+          if (containerNeedsTemporaryTabIndex) {
+            container.setAttribute('tabindex', '-1');
+          } // Focus the container.
+
+
+          container.focus(); // If a temporary `tabIndex` was provided, remove it.
+
+          if (containerNeedsTemporaryTabIndex) {
+            // Once focus has moved from the container to a child within the FocusTrap,
+            // the container can be made un-refocusable by removing `tabIndex`.
+            container.addEventListener('blur', () => container.removeAttribute('tabindex'), {
+              once: true
+            }); // NB: If `tabIndex` was removed *before* `blur`, then certain browsers (e.g. Chrome)
+            // would consider `body` the `activeElement`, and as a result, keyboard navigation
+            // between children would break, since `body` is outside the `FocusTrap`.
+          }
+
+          return;
         }
+      }
     }
-    const wrappingController = followSignal(signal);
-    container.addEventListener('keydown', event => {
-        if (event.key !== 'Tab' || event.defaultPrevented) {
-            return;
-        }
-        const { target } = event;
-        const firstFocusableChild = getFocusableChild(container);
-        const lastFocusableChild = getFocusableChild(container, true);
-        if (target === firstFocusableChild && event.shiftKey) {
-            event.preventDefault();
-            lastFocusableChild?.focus();
-        }
-        else if (target === lastFocusableChild && !event.shiftKey) {
-            event.preventDefault();
-            firstFocusableChild?.focus();
-        }
-    }, { signal: wrappingController.signal });
-    if (activeTrap) {
-        const suspendedTrap = activeTrap;
-        activeTrap.container.setAttribute('data-focus-trap', 'suspended');
-        activeTrap.controller.abort();
-        suspendedTrapStack.push(suspendedTrap);
+  }
+
+  const wrappingController = followSignal(signal);
+  container.addEventListener('keydown', event => {
+    if (event.key !== 'Tab' || event.defaultPrevented) {
+      return;
     }
-    // When this trap is canceled, either by the user or by us for suspension
-    wrappingController.signal.addEventListener('abort', () => {
-        activeTrap = undefined;
-    });
-    // Only when user-canceled
-    signal.addEventListener('abort', () => {
-        container.removeAttribute('data-focus-trap');
-        const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
-        if (suspendedTrapIndex >= 0) {
-            suspendedTrapStack.splice(suspendedTrapIndex, 1);
-        }
-        tryReactivate();
-    });
-    // Prevent focus leaving the trap container
-    document.addEventListener('focus', event => {
-        ensureTrapZoneHasFocus(event.target);
-    }, 
-    // use capture to ensure we get all events.  focus events do not bubble
-    { signal: wrappingController.signal, capture: true });
-    // focus the first element
-    ensureTrapZoneHasFocus(document.activeElement);
-    activeTrap = {
-        container,
-        controller: wrappingController,
-        initialFocus,
-        originalSignal: signal
-    };
-    // If we are activating a focus trap for a container that was previously
-    // suspended, just remove it from the suspended list.
+
+    const {
+      target
+    } = event;
+    const firstFocusableChild = getFocusableChild(container);
+    const lastFocusableChild = getFocusableChild(container, true);
+
+    if (target === firstFocusableChild && event.shiftKey) {
+      event.preventDefault();
+      lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+    } else if (target === lastFocusableChild && !event.shiftKey) {
+      event.preventDefault();
+      firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    }
+  }, {
+    signal: wrappingController.signal
+  });
+
+  if (activeTrap) {
+    const suspendedTrap = activeTrap;
+    activeTrap.container.setAttribute('data-focus-trap', 'suspended');
+    activeTrap.controller.abort();
+    suspendedTrapStack.push(suspendedTrap);
+  } // When this trap is canceled, either by the user or by us for suspension
+
+
+  wrappingController.signal.addEventListener('abort', () => {
+    activeTrap = undefined;
+  }); // Only when user-canceled
+
+  signal.addEventListener('abort', () => {
+    container.removeAttribute('data-focus-trap');
     const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
+
     if (suspendedTrapIndex >= 0) {
-        suspendedTrapStack.splice(suspendedTrapIndex, 1);
-    }
-    if (!abortSignal) {
-        return controller;
+      suspendedTrapStack.splice(suspendedTrapIndex, 1);
     }
-}
-exports.focusTrap = focusTrap;
+
+    tryReactivate();
+  }); // Prevent focus leaving the trap container
+
+  document.addEventListener('focus', event => {
+    ensureTrapZoneHasFocus(event.target);
+  }, // use capture to ensure we get all events.  focus events do not bubble
+  {
+    signal: wrappingController.signal,
+    capture: true
+  }); // focus the first element
+
+  ensureTrapZoneHasFocus(document.activeElement);
+  activeTrap = {
+    container,
+    controller: wrappingController,
+    initialFocus,
+    originalSignal: signal
+  }; // If we are activating a focus trap for a container that was previously
+  // suspended, just remove it from the suspended list.
+
+  const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
+
+  if (suspendedTrapIndex >= 0) {
+    suspendedTrapStack.splice(suspendedTrapIndex, 1);
+  }
+
+  if (!abortSignal) {
+    return controller;
+  }
+}