@primer/components 0.0.0-20219922627 → 0.0.0-2022530201059

package/lib-esm/behaviors/focusZone.js

@@ -1,9 +1,8 @@
-import { iterateFocusableElements } from '../utils/iterateFocusableElements';
+import { isFocusable, iterateFocusableElements } from '../utils/iterateFocusableElements';
 import { polyfill as eventListenerSignalPolyfill } from '../polyfills/eventListenerSignal';
 import { isMacOS } from '../utils/userAgent';
 import { uniqueId } from '../utils/uniqueId';
 eventListenerSignalPolyfill();
-// eslint-disable-next-line no-shadow
 export let FocusKeys;
 
 (function (FocusKeys) {
@@ -163,24 +162,21 @@ function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
   return false;
 }
 
-export const isActiveDescendantAttribute = 'data-is-active-descendant';
-/**
- * A value of activated-directly for data-is-active-descendant indicates the descendant was activated
- * by a manual user interaction with intent to move active descendant.  This usually translates to the
- * user pressing one of the bound keys (up/down arrow, etc) to move through the focus zone.  This is
- * intended to be roughly equivalent to the :focus-visible pseudo-class
- **/
+const subscriptions = [];
 
-export const activeDescendantActivatedDirectly = 'activated-directly';
-/**
- * A value of activated-indirectly for data-is-active-descendant indicates the descendant was activated
- * implicitly, and not by a direct key press.  This includes focus zone being created from scratch, focusable
- * elements being added/removed, and mouseover events. This is intended to be roughly equivalent
- * to :focus:not(:focus-visible)
- **/
-
-export const activeDescendantActivatedIndirectly = 'activated-indirectly';
-export const hasActiveDescendantAttribute = 'data-has-active-descendant';
+function notifyActiveElement(element) {
+  for (const subscription of subscriptions) {
+    subscription(element);
+  }
+}
+
+function subscribeToActiveElementChanges(callback) {
+  subscriptions.push(callback);
+  return () => {
+    const index = subscriptions.indexOf(callback);
+    subscriptions.splice(index, 1);
+  };
+}
 /**
  * Sets up the arrow key focus behavior for all focusable elements in the given `container`.
  * @param container
@@ -188,6 +184,7 @@ export const hasActiveDescendantAttribute = 'data-has-active-descendant';
  * @returns
  */
 
+
 export function focusZone(container, settings) {
   var _settings$bindKeys, _settings$focusOutBeh, _settings$focusInStra, _settings$abortSignal;
 
@@ -198,66 +195,34 @@ export function focusZone(container, settings) {
   const focusInStrategy = (_settings$focusInStra = settings === null || settings === void 0 ? void 0 : settings.focusInStrategy) !== null && _settings$focusInStra !== void 0 ? _settings$focusInStra : 'previous';
   const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
   const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
-  let currentFocusedElement;
 
-  function getFirstFocusableElement() {
-    return focusableElements[0];
-  }
-
-  function isActiveDescendantInputFocused() {
-    return document.activeElement === activeDescendantControl;
-  }
-
-  function updateFocusedElement(to, directlyActivated = false) {
-    const from = currentFocusedElement;
-    currentFocusedElement = to;
-
-    if (activeDescendantControl) {
-      if (to && isActiveDescendantInputFocused()) {
-        setActiveDescendant(from, to, directlyActivated);
-      } else {
-        clearActiveDescendant();
-      }
-
-      return;
-    }
-
-    if (from && from !== to && savedTabIndex.has(from)) {
-      from.setAttribute('tabindex', '-1');
+  function updateTabIndex(from, to) {
+    if (!activeDescendantControl) {
+      from === null || from === void 0 ? void 0 : from.setAttribute('tabindex', '-1');
+      to === null || to === void 0 ? void 0 : to.setAttribute('tabindex', '0');
     }
-
-    to === null || to === void 0 ? void 0 : to.setAttribute('tabindex', '0');
   }
 
-  function setActiveDescendant(from, to, directlyActivated = false) {
+  function setActiveDescendant(from, to) {
     if (!to.id) {
       to.setAttribute('id', uniqueId());
     }
 
-    if (from && from !== to) {
-      from.removeAttribute(isActiveDescendantAttribute);
-    }
-
-    if (!activeDescendantControl || !directlyActivated && activeDescendantControl.getAttribute('aria-activedescendant') === to.id) {
-      // prevent active descendant callback from being called repeatedly if the same element is activated (e.g. via mousemove)
-      return;
-    }
-
-    activeDescendantControl.setAttribute('aria-activedescendant', to.id);
-    container.setAttribute(hasActiveDescendantAttribute, to.id);
-    to.setAttribute(isActiveDescendantAttribute, directlyActivated ? activeDescendantActivatedDirectly : activeDescendantActivatedIndirectly);
-    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(to, from, directlyActivated);
+    currentFocusedElement = to;
+    activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.setAttribute('aria-activedescendant', to.id);
+    notifyActiveElement(to);
+    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(to, from);
   }
 
-  function clearActiveDescendant(previouslyActiveElement = currentFocusedElement) {
+  function suspendActiveDescendant() {
+    activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
+    activeDescendantSuspended = true;
+    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, currentFocusedElement);
+    currentFocusedElement = undefined;
+
     if (focusInStrategy === 'first') {
-      currentFocusedElement = undefined;
+      currentFocusedIndex = 0;
     }
-
-    activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
-    container.removeAttribute(hasActiveDescendantAttribute);
-    previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
-    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
   }
 
   function beginFocusManagement(...elements) {
@@ -284,10 +249,6 @@ export function focusZone(container, settings) {
 
       element.setAttribute('tabindex', '-1');
     }
-
-    if (!currentFocusedElement) {
-      updateFocusedElement(getFirstFocusableElement());
-    }
   }
 
   function endFocusManagement(...elements) {
@@ -295,7 +256,13 @@ export function focusZone(container, settings) {
       const focusableElementIndex = focusableElements.indexOf(element);
 
       if (focusableElementIndex >= 0) {
-        focusableElements.splice(focusableElementIndex, 1);
+        focusableElements.splice(focusableElementIndex, 1); // If removing the last-focused element, set tabindex=0 to the first element in the list.
+
+        if (element === currentFocusedElement && focusableElements.length > 0) {
+          updateTabIndex(undefined, focusableElements[0]);
+          currentFocusedElement = focusableElements[0];
+          currentFocusedIndex = 0;
+        }
       }
 
       const savedIndex = savedTabIndex.get(element);
@@ -308,38 +275,44 @@ export function focusZone(container, settings) {
         }
 
         savedTabIndex.delete(element);
-      } // If removing the last-focused element, move focus to the first element in the list.
-
-
-      if (element === currentFocusedElement) {
-        const nextElementToFocus = getFirstFocusableElement();
-        updateFocusedElement(nextElementToFocus);
       }
     }
   } // Take all tabbable elements within container under management
 
 
-  beginFocusManagement(...iterateFocusableElements(container)); // Open the first tabbable element for tabbing
+  beginFocusManagement(...iterateFocusableElements(container)); // If multiple focus zones have overlapping DOM, we need to know about
+  // any changes that result from others so that the "previous" active element
+  // stays consistent.
 
-  updateFocusedElement(getFirstFocusableElement()); // If the DOM structure of the container changes, make sure we keep our state up-to-date
-  // with respect to the focusable elements cache and its order
+  const unsubscribeFromActiveElementChanges = subscribeToActiveElementChanges(activeElement => {
+    if (focusInStrategy === 'previous') {
+      const tabbableElementIndex = focusableElements.indexOf(activeElement);
 
-  const observer = new MutationObserver(mutations => {
-    // Perform all removals first, in case element order has simply changed
-    for (const mutation of mutations) {
-      for (const removedNode of mutation.removedNodes) {
-        if (removedNode instanceof HTMLElement) {
-          endFocusManagement(...iterateFocusableElements(removedNode));
-        }
+      if (tabbableElementIndex >= 0) {
+        const nextFocusedElement = focusableElements[tabbableElementIndex];
+        const previousFocusedElement = focusableElements[currentFocusedIndex];
+        updateTabIndex(previousFocusedElement, nextFocusedElement);
+        currentFocusedIndex = tabbableElementIndex;
       }
     }
+  }); // Open the first tabbable element for tabbing
+
+  updateTabIndex(undefined, focusableElements[0]); // If the DOM structure of the container changes, make sure we keep our state up-to-date
+  // with respect to the focusable elements cache and its order
 
+  const observer = new MutationObserver(mutations => {
     for (const mutation of mutations) {
       for (const addedNode of mutation.addedNodes) {
-        if (addedNode instanceof HTMLElement) {
+        if (addedNode instanceof HTMLElement && isFocusable(addedNode)) {
           beginFocusManagement(...iterateFocusableElements(addedNode));
         }
       }
+
+      for (const removedNode of mutation.removedNodes) {
+        if (removedNode instanceof HTMLElement && savedTabIndex.has(removedNode)) {
+          endFocusManagement(...iterateFocusableElements(removedNode));
+        }
+      }
     }
   });
   observer.observe(container, {
@@ -351,7 +324,13 @@ export function focusZone(container, settings) {
   signal.addEventListener('abort', () => {
     // Clean up any modifications
     endFocusManagement(...focusableElements);
-  });
+    unsubscribeFromActiveElementChanges();
+  }); // When using activedescendant focusing, the first focus-in is caused by our listeners
+  // meaning we have to approach zero. This is safe since we clamp the value before using it.
+
+  let currentFocusedIndex = 0;
+  let activeDescendantSuspended = activeDescendantControl ? true : false;
+  let currentFocusedElement = activeDescendantControl ? undefined : focusableElements[0];
   let elementIndexFocusedByClick = undefined;
   container.addEventListener('mousedown', event => {
     // Since focusin is only called when focus changes, we need to make sure the clicked
@@ -361,75 +340,35 @@ export function focusZone(container, settings) {
     }
   }, {
     signal
-  });
-
-  if (activeDescendantControl) {
-    container.addEventListener('focusin', event => {
-      if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
-        // Move focus to the activeDescendantControl if one of the descendants is focused
-        activeDescendantControl.focus();
-        updateFocusedElement(event.target);
-      }
-    });
-    container.addEventListener('mousemove', ({
-      target
-    }) => {
-      if (!(target instanceof Node)) {
-        return;
-      }
-
-      const focusableElement = focusableElements.find(element => element.contains(target));
+  }); // This is called whenever focus enters the container
 
-      if (focusableElement) {
-        updateFocusedElement(focusableElement);
-      }
-    }, {
-      signal,
-      capture: true
-    }); // Listeners specifically on the controlling element
-
-    activeDescendantControl.addEventListener('focusin', () => {
-      // Focus moved into the active descendant input.  Activate current or first descendant.
-      if (!currentFocusedElement) {
-        updateFocusedElement(getFirstFocusableElement());
-      } else {
-        setActiveDescendant(undefined, currentFocusedElement);
-      }
-    });
-    activeDescendantControl.addEventListener('focusout', () => {
-      clearActiveDescendant();
-    });
-  } else {
-    // This is called whenever focus enters an element in the container
+  if (!activeDescendantControl) {
     container.addEventListener('focusin', event => {
       if (event.target instanceof HTMLElement) {
         // If a click initiated the focus movement, we always want to set our internal state
         // to reflect the clicked element as the currently focused one.
-        if (elementIndexFocusedByClick !== undefined) {
+        if (elementIndexFocusedByClick != undefined) {
           if (elementIndexFocusedByClick >= 0) {
             if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
-              updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
+              updateTabIndex(currentFocusedElement, focusableElements[elementIndexFocusedByClick]);
             }
+
+            currentFocusedIndex = elementIndexFocusedByClick;
           }
 
           elementIndexFocusedByClick = undefined;
         } else {
           // Set tab indexes and internal state based on the focus handling strategy
           if (focusInStrategy === 'previous') {
-            updateFocusedElement(event.target);
-          } else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
-            if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
+            updateTabIndex(currentFocusedElement, event.target);
+          } else if (focusInStrategy === 'first') {
+            if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget) && event.target !== focusableElements[0]) {
               // Regardless of the previously focused element, if we're coming from outside the
-              // container, put focus onto the first encountered element (from above, it's The
-              // first element of the container; from below, it's the last). If the
-              // focusInStrategy is set to "first", lastKeyboardFocusDirection will always
-              // be undefined.
-              const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
-              const targetElement = focusableElements[targetElementIndex];
-              targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus();
-              return;
+              // container, put focus onto the first element.
+              currentFocusedIndex = 0;
+              focusableElements[0].focus();
             } else {
-              updateFocusedElement(event.target);
+              updateTabIndex(currentFocusedElement, event.target);
             }
           } else if (typeof focusInStrategy === 'function') {
             if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
@@ -437,54 +376,31 @@ export function focusZone(container, settings) {
               const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
 
               if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
-                // Since we are calling focus() this handler will run again synchronously. Therefore,
+                currentFocusedIndex = requestedFocusElementIndex; // Since we are calling focus() this handler will run again synchronously. Therefore,
                 // we don't want to let this invocation finish since it will clobber the value of
                 // currentFocusedElement.
+
                 elementToFocus.focus();
                 return;
               } else {
-                // eslint-disable-next-line no-console
+                // Should we warn here?
                 console.warn('Element requested is not a known focusable element.');
               }
             } else {
-              updateFocusedElement(event.target);
+              updateTabIndex(currentFocusedElement, event.target);
             }
           }
         }
-      }
-
-      lastKeyboardFocusDirection = undefined;
-    }, {
-      signal
-    });
-  }
 
-  const keyboardEventRecipient = activeDescendantControl !== null && activeDescendantControl !== void 0 ? activeDescendantControl : container; // If the strategy is "closest", we need to capture the direction that the user
-  // is trying to move focus before our focusin handler is executed.
-
-  let lastKeyboardFocusDirection = undefined;
-
-  if (focusInStrategy === 'closest') {
-    document.addEventListener('keydown', event => {
-      if (event.key === 'Tab') {
-        lastKeyboardFocusDirection = getDirection(event);
+        notifyActiveElement(event.target);
+        currentFocusedElement = event.target;
       }
     }, {
-      signal,
-      capture: true
+      signal
     });
   }
 
-  function getCurrentFocusedIndex() {
-    if (!currentFocusedElement) {
-      return 0;
-    }
-
-    const focusedIndex = focusableElements.indexOf(currentFocusedElement);
-    const fallbackIndex = currentFocusedElement === container ? -1 : 0;
-    return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
-  } // "keydown" is the event that triggers DOM focus change, so that is what we use here
-
+  const keyboardEventRecipient = activeDescendantControl !== null && activeDescendantControl !== void 0 ? activeDescendantControl : container; // "keydown" is the event that triggers DOM focus change, so that is what we use here
 
   keyboardEventRecipient.addEventListener('keydown', event => {
     if (event.key in KEY_TO_DIRECTION) {
@@ -493,57 +409,65 @@ export function focusZone(container, settings) {
       if (!event.defaultPrevented && (keyBit & bindKeys) > 0 && !shouldIgnoreFocusHandling(event, document.activeElement)) {
         // Moving forward or backward?
         const direction = getDirection(event);
-        let nextElementToFocus = undefined; // If there is a custom function that retrieves the next focusable element, try calling that first.
+        let nextElementToFocus = undefined;
 
-        if (settings !== null && settings !== void 0 && settings.getNextFocusable) {
-          var _document$activeEleme;
+        if (activeDescendantSuspended) {
+          activeDescendantSuspended = false;
+          nextElementToFocus = focusableElements[currentFocusedIndex];
+        } else {
+          // If there is a custom function that retrieves the next focusable element, try calling that first.
+          if (settings !== null && settings !== void 0 && settings.getNextFocusable) {
+            var _document$activeEleme;
 
-          nextElementToFocus = settings.getNextFocusable(direction, (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 ? _document$activeEleme : undefined, event);
-        }
+            nextElementToFocus = settings.getNextFocusable(direction, (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 ? _document$activeEleme : undefined, event);
+          }
 
-        if (!nextElementToFocus) {
-          const lastFocusedIndex = getCurrentFocusedIndex();
-          let nextFocusedIndex = lastFocusedIndex;
+          if (!nextElementToFocus) {
+            const lastFocusedIndex = currentFocusedIndex;
+
+            if (direction === 'previous') {
+              currentFocusedIndex -= 1;
+            } else if (direction === 'start') {
+              currentFocusedIndex = 0;
+            } else if (direction === 'next') {
+              currentFocusedIndex += 1;
+            } else if (direction === 'end') {
+              currentFocusedIndex = focusableElements.length - 1;
+            }
 
-          if (direction === 'previous') {
-            nextFocusedIndex -= 1;
-          } else if (direction === 'start') {
-            nextFocusedIndex = 0;
-          } else if (direction === 'next') {
-            nextFocusedIndex += 1;
-          } else {
-            // end
-            nextFocusedIndex = focusableElements.length - 1;
-          }
+            if (currentFocusedIndex < 0) {
+              // Tab should never cause focus to wrap. Use focusTrap for that behavior.
+              if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
+                currentFocusedIndex = focusableElements.length - 1;
+              } else {
+                if (activeDescendantControl) {
+                  suspendActiveDescendant();
+                }
 
-          if (nextFocusedIndex < 0) {
-            // Tab should never cause focus to wrap. Use focusTrap for that behavior.
-            if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
-              nextFocusedIndex = focusableElements.length - 1;
-            } else {
-              nextFocusedIndex = 0;
+                currentFocusedIndex = 0;
+              }
             }
-          }
 
-          if (nextFocusedIndex >= focusableElements.length) {
-            if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
-              nextFocusedIndex = 0;
-            } else {
-              nextFocusedIndex = focusableElements.length - 1;
+            if (currentFocusedIndex >= focusableElements.length) {
+              if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
+                currentFocusedIndex = 0;
+              } else {
+                currentFocusedIndex = focusableElements.length - 1;
+              }
             }
-          }
 
-          if (lastFocusedIndex !== nextFocusedIndex) {
-            nextElementToFocus = focusableElements[nextFocusedIndex];
+            if (lastFocusedIndex !== currentFocusedIndex) {
+              nextElementToFocus = focusableElements[currentFocusedIndex];
+            }
           }
         }
 
-        if (activeDescendantControl) {
-          updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
-        } else if (nextElementToFocus) {
-          lastKeyboardFocusDirection = direction; // updateFocusedElement will be called implicitly when focus moves, as long as the event isn't prevented somehow
-
-          nextElementToFocus.focus();
+        if (nextElementToFocus) {
+          if (activeDescendantControl) {
+            setActiveDescendant(currentFocusedElement, nextElementToFocus);
+          } else {
+            nextElementToFocus.focus();
+          }
         } // Tab should always allow escaping from this container, so only
         // preventDefault if tab key press already resulted in a focus movement
 
@@ -553,8 +477,19 @@ export function focusZone(container, settings) {
         }
       }
     }
+
+    if (event.key === 'Escape' && !activeDescendantSuspended && activeDescendantControl) {
+      suspendActiveDescendant();
+    }
   }, {
     signal
   });
+
+  if (activeDescendantControl) {
+    activeDescendantControl.addEventListener('focusout', () => {
+      suspendActiveDescendant();
+    });
+  }
+
   return controller;
 }

package/lib-esm/constants.js

@@ -1,5 +1,4 @@
-import { themeGet } from '@styled-system/theme-get'; // eslint-disable-next-line import/no-namespace
-
+import { themeGet } from '@styled-system/theme-get';
 import * as styledSystem from 'styled-system';
 import theme from './theme';
 const {

package/lib-esm/hooks/index.js

@@ -3,5 +3,4 @@ export { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
 export { useOnEscapePress } from './useOnEscapePress';
 export { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
 export { useAnchoredPosition } from './useAnchoredPosition';
-export { useOverlay } from './useOverlay';
-export { useRenderForcingRef } from './useRenderForcingRef';
+export { useOverlay } from './useOverlay';

package/lib-esm/hooks/useAnchoredPosition.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { getAnchoredPosition } from '../behaviors/anchoredPosition';
 import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
-import { useResizeObserver } from './useResizeObserver';
 
 /**
  * Calculates the top and left values for an absolutely-positioned floating element
@@ -12,20 +11,16 @@ import { useResizeObserver } from './useResizeObserver';
  * @returns An object of {top: number, left: number} to absolutely-position the
  * floating element.
  */
-export function useAnchoredPosition(settings, dependencies = []) {
+export function useAnchoredPosition(settings, dependencies) {
   const floatingElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.floatingElementRef);
   const anchorElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.anchorElementRef);
   const [position, setPosition] = React.useState(undefined);
-  const updatePosition = React.useCallback(() => {
+  React.useEffect(() => {
     if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
       setPosition(getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings));
-    } else {
-      setPosition(undefined);
-    }
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [floatingElementRef, anchorElementRef, ...dependencies]);
-  React.useLayoutEffect(updatePosition, [updatePosition]);
-  useResizeObserver(updatePosition);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, dependencies !== null && dependencies !== void 0 ? dependencies : []);
   return {
     floatingElementRef,
     anchorElementRef,

package/lib-esm/hooks/useDialog.js

@@ -42,7 +42,7 @@ function useDialog({
     }
   }, [isOpen, initialFocusRef, closeButtonRef]);
   const getFocusableItem = useCallback((e, movement) => {
-    if (modalRef.current) {
+    if (modalRef && modalRef.current) {
       const items = Array.from(modalRef.current.querySelectorAll('*')).filter(focusable);
       if (items.length === 0) return;
       e.preventDefault();

package/lib-esm/hooks/useFocusTrap.js

@@ -7,31 +7,11 @@ import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
  * that should trap focus.
  * @param settings {FocusTrapHookSettings}
  */
-export function useFocusTrap(settings, dependencies = []) {
+export function useFocusTrap(settings) {
   const containerRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.containerRef);
   const initialFocusRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.initialFocusRef);
   const disabled = settings === null || settings === void 0 ? void 0 : settings.disabled;
   const abortController = React.useRef();
-  const previousFocusedElement = React.useRef(null); // If we are enabling a focus trap and haven't already stored the previously focused element
-  // go ahead an do that so we can restore later when the trap is disabled.
-
-  if (!previousFocusedElement.current && !(settings !== null && settings !== void 0 && settings.disabled)) {
-    previousFocusedElement.current = document.activeElement;
-  } // This function removes the event listeners that enable the focus trap and restores focus
-  // to the previously-focused element (if necessary).
-
-
-  function disableTrap() {
-    var _abortController$curr;
-
-    (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
-
-    if (settings !== null && settings !== void 0 && settings.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
-      previousFocusedElement.current.focus();
-      previousFocusedElement.current = null;
-    }
-  }
-
   React.useEffect(() => {
     if (containerRef.current instanceof HTMLElement) {
       if (!disabled) {
@@ -39,14 +19,17 @@ export function useFocusTrap(settings, dependencies = []) {
 
         abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : undefined);
         return () => {
-          disableTrap();
+          var _abortController$curr;
+
+          (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
         };
       } else {
-        disableTrap();
+        var _abortController$curr2;
+
+        (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 ? void 0 : _abortController$curr2.abort();
       }
     }
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [containerRef, initialFocusRef, disabled, ...dependencies]);
+  }, [containerRef, initialFocusRef, disabled]);
   return {
     containerRef,
     initialFocusRef

package/lib-esm/hooks/useFocusZone.js

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import { focusZone } from '../behaviors/focusZone';
 import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
-export function useFocusZone(settings = {}, dependencies = []) {
+export function useFocusZone(settings = {}, dependencies) {
   const containerRef = useProvidedRefOrCreate(settings.containerRef);
   const useActiveDescendant = !!settings.activeDescendantFocus;
   const passedActiveDescendantRef = typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus ? undefined : settings.activeDescendantFocus;
   const activeDescendantControlRef = useProvidedRefOrCreate(passedActiveDescendantRef);
-  const disabled = settings.disabled;
+  const disabled = settings === null || settings === void 0 ? void 0 : settings.disabled;
   const abortController = React.useRef();
   useEffect(() => {
     if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
@@ -27,9 +27,9 @@ export function useFocusZone(settings = {}, dependencies = []) {
 
         (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 ? void 0 : _abortController$curr2.abort();
       }
-    }
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [disabled, ...dependencies]);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, dependencies !== null && dependencies !== void 0 ? dependencies : []);
   return {
     containerRef,
     activeDescendantControlRef