@renderlesskit/react/dist/esm/dialog/helpers/useFocusTrap.js

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

import * as React from "react";
import { getDocument, getFirstTabbableIn, getLastTabbableIn } from "reakit-utils";
import { warning } from "reakit-warning";
import { usePortalRef } from "./usePortalRef";

function removeFromDOM(element) {
  if (element.parentNode == null) return;
  element.parentNode.removeChild(element);
}

var focusTrapClassName = "__reakit-focus-trap";
export function isFocusTrap(element) {
  var _element$classList;

  return (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(focusTrapClassName);
}
export function useFocusTrap(dialogRef, visibleModals, options) {
  var portalRef = usePortalRef(dialogRef, options);
  var shouldTrap = options.visible && options.modal;
  var beforeElement = React.useRef(null);
  var afterElement = React.useRef(null); // Create before and after elements
  // https://github.com/w3c/aria-practices/issues/545

  React.useEffect(() => {
    if (!shouldTrap) return undefined;
    var portal = portalRef.current;

    if (!portal) {
      warning(true, "Can't trap focus within modal dialog because either `ref` wasn't passed to component or the component wasn't rendered within a portal");
      return undefined;
    }

    if (!beforeElement.current) {
      var document = getDocument(portal);
      beforeElement.current = document.createElement("div");
      beforeElement.current.className = focusTrapClassName;
      beforeElement.current.tabIndex = 0;
      beforeElement.current.style.position = "fixed";
      beforeElement.current.setAttribute("aria-hidden", "true");
    }

    if (!afterElement.current) {
      afterElement.current = beforeElement.current.cloneNode();
    }

    portal.insertAdjacentElement("beforebegin", beforeElement.current);
    portal.insertAdjacentElement("afterend", afterElement.current);
    return () => {
      if (beforeElement.current) removeFromDOM(beforeElement.current);
      if (afterElement.current) removeFromDOM(afterElement.current);
    };
  }, [portalRef, shouldTrap]); // Focus trap

  React.useEffect(() => {
    var before = beforeElement.current;
    var after = afterElement.current;
    if (!shouldTrap || !before || !after) return undefined;

    var handleFocus = event => {
      var dialog = dialogRef.current;
      if (!dialog || visibleModals.length) return;
      event.preventDefault();
      var isAfter = event.target === after;
      var tabbable = isAfter ? getFirstTabbableIn(dialog) : getLastTabbableIn(dialog);

      if (tabbable) {
        tabbable.focus();
      } else {
        // fallback to dialog
        dialog.focus();
      }
    };

    before.addEventListener("focus", handleFocus);
    after.addEventListener("focus", handleFocus);
    return () => {
      before.removeEventListener("focus", handleFocus);
      after.removeEventListener("focus", handleFocus);
    };
  }, [dialogRef, visibleModals, shouldTrap]);
}
//# sourceMappingURL=useFocusTrap.js.map