@daimo/pay/build/src/hooks/useFocusTrap.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { jsx } from 'react/jsx-runtime';
import { useEffect, useRef } from 'react';

const KEYCODE_TAB = 9;
function useFocusTrap() {
  const elRef = useRef(null);
  function handleFocus(e) {
    if (!elRef.current) return;
    var focusableEls = elRef.current.querySelectorAll(`
        a[href]:not(:disabled),
        button:not(:disabled),
        textarea:not(:disabled),
        input[type="text"]:not(:disabled),
        input[type="radio"]:not(:disabled),
        input[type="checkbox"]:not(:disabled),
        select:not(:disabled)
      `), firstFocusableEl = focusableEls[0], lastFocusableEl = focusableEls[focusableEls.length - 1];
    var isTabPressed = e.key === "Tab" || e.keyCode === KEYCODE_TAB;
    if (!isTabPressed) {
      return;
    }
    if (e.shiftKey) {
      if (document.activeElement === firstFocusableEl) {
        lastFocusableEl.focus();
        e.preventDefault();
      }
    } else {
      if (document.activeElement === lastFocusableEl) {
        firstFocusableEl.focus();
        e.preventDefault();
      }
    }
  }
  useEffect(() => {
    const el = elRef.current;
    if (el == null) return;
    el.addEventListener("keydown", handleFocus);
    el.focus({ preventScroll: true });
    return () => el.removeEventListener("keydown", handleFocus);
  }, []);
  return elRef;
}
function FocusTrap(props) {
  const elRef = useFocusTrap();
  useEffect(() => {
    if (!elRef.current) return;
    elRef.current.focus({ preventScroll: true });
  }, []);
  return /* @__PURE__ */ jsx("div", { ref: elRef, tabIndex: 0, children: props.children });
}

export { FocusTrap as default };
//# sourceMappingURL=useFocusTrap.js.map