@mantine/hooks/cjs/use-focus-trap/use-focus-trap.cjs

A collection of 50+ hooks for state and UI management

'use client';
'use strict';

var React = require('react');
var scopeTab = require('./scope-tab.cjs');
var tabbable = require('./tabbable.cjs');

function useFocusTrap(active = true) {
  const ref = React.useRef(null);
  const focusNode = (node) => {
    let focusElement = node.querySelector("[data-autofocus]");
    if (!focusElement) {
      const children = Array.from(node.querySelectorAll(tabbable.FOCUS_SELECTOR));
      focusElement = children.find(tabbable.tabbable) || children.find(tabbable.focusable) || null;
      if (!focusElement && tabbable.focusable(node)) {
        focusElement = node;
      }
    }
    if (focusElement) {
      focusElement.focus({ preventScroll: true });
    } else if (process.env.NODE_ENV === "development") {
      console.warn(
        "[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node",
        node
      );
    }
  };
  const setRef = React.useCallback(
    (node) => {
      if (!active) {
        return;
      }
      if (node === null) {
        return;
      }
      if (ref.current === node) {
        return;
      }
      if (node) {
        setTimeout(() => {
          if (node.getRootNode()) {
            focusNode(node);
          } else if (process.env.NODE_ENV === "development") {
            console.warn("[@mantine/hooks/use-focus-trap] Ref node is not part of the dom", node);
          }
        });
        ref.current = node;
      } else {
        ref.current = null;
      }
    },
    [active]
  );
  React.useEffect(() => {
    if (!active) {
      return void 0;
    }
    ref.current && setTimeout(() => focusNode(ref.current));
    const handleKeyDown = (event) => {
      if (event.key === "Tab" && ref.current) {
        scopeTab.scopeTab(ref.current, event);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [active]);
  return setRef;
}

exports.useFocusTrap = useFocusTrap;
//# sourceMappingURL=use-focus-trap.cjs.map