@primer/react/dist/hooks/useFocusTrap.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { focusTrap } from '@primer/behaviors';
import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
import { useOnOutsideClick } from './useOnOutsideClick.js';

/**
 * Hook used to trap focus inside a container. Returns a ref that can be added to the container
 * that should trap focus.
 * @param settings {FocusTrapHookSettings}
 */
function useFocusTrap(settings, dependencies = []) {
  const [outsideClicked, setOutsideClicked] = React.useState(false);
  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 && !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.allowOutsideClick && outsideClicked) {
      return;
    }
    if (settings !== null && settings !== void 0 && settings.returnFocusRef && settings.returnFocusRef.current instanceof HTMLElement) {
      settings.returnFocusRef.current.focus();
    } else 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) {
        var _initialFocusRef$curr;
        abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : undefined);
        return () => {
          disableTrap();
        };
      } else {
        disableTrap();
      }
    }
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [containerRef, initialFocusRef, disabled, ...dependencies]);
  useOnOutsideClick({
    containerRef: containerRef,
    onClickOutside: () => {
      setOutsideClicked(true);
      if (settings !== null && settings !== void 0 && settings.allowOutsideClick) {
        var _abortController$curr2;
        if (settings.returnFocusRef) settings.returnFocusRef = undefined;
        settings.restoreFocusOnCleanUp = false;
        (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 ? void 0 : _abortController$curr2.abort();
      }
    }
  });
  return {
    containerRef,
    initialFocusRef
  };
}

export { useFocusTrap };