@tamagui/react-native-web-lite/dist/esm/Modal/ModalFocusTrap.native.js

React Native for Web

import * as React from "react";
import { StyleSheet, UIManager, canUseDOM } from "@tamagui/react-native-web-internals";
import createElement from "../createElement/index.native.js";
import View from "../View";
var FocusBracket = function () {
  return createElement("div", {
    accessibilityRole: "none",
    tabIndex: 0,
    style: styles.focusBracket
  });
};
function attemptFocus(element) {
  if (!canUseDOM) return !1;
  try {
    element.focus();
  } catch {}
  return document.activeElement === element;
}
function focusFirstDescendant(element) {
  for (var i = 0; i < element.childNodes.length; i++) {
    var child = element.childNodes[i];
    if (attemptFocus(child) || focusFirstDescendant(child)) return !0;
  }
  return !1;
}
function focusLastDescendant(element) {
  for (var i = element.childNodes.length - 1; i >= 0; i--) {
    var child = element.childNodes[i];
    if (attemptFocus(child) || focusLastDescendant(child)) return !0;
  }
  return !1;
}
var ModalFocusTrap = function (_ref) {
    var active = _ref.active,
      children = _ref.children,
      trapElementRef = React.useRef(),
      focusRef = React.useRef({
        trapFocusInProgress: !1,
        lastFocusedElement: null
      });
    return React.useEffect(function () {
      if (canUseDOM) {
        var trapFocus = function () {
          if (!(trapElementRef.current == null || focusRef.current.trapFocusInProgress || !active)) {
            try {
              if (focusRef.current.trapFocusInProgress = !0, document.activeElement instanceof Node && !trapElementRef.current.contains(document.activeElement)) {
                var hasFocused = focusFirstDescendant(trapElementRef.current);
                focusRef.current.lastFocusedElement === document.activeElement && (hasFocused = focusLastDescendant(trapElementRef.current)), !hasFocused && trapElementRef.current != null && document.activeElement && UIManager.focus(trapElementRef.current);
              }
            } finally {
              focusRef.current.trapFocusInProgress = !1;
            }
            focusRef.current.lastFocusedElement = document.activeElement;
          }
        };
        return trapFocus(), document.addEventListener("focus", trapFocus, !0), function () {
          return document.removeEventListener("focus", trapFocus, !0);
        };
      }
    }, [active]), React.useEffect(function () {
      if (canUseDOM) {
        var lastFocusedElementOutsideTrap = document.activeElement;
        return function () {
          lastFocusedElementOutsideTrap && document.contains(lastFocusedElementOutsideTrap) && UIManager.focus(lastFocusedElementOutsideTrap);
        };
      }
    }, []), /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(FocusBracket, null), /* @__PURE__ */React.createElement(View, {
      ref: trapElementRef
    }, children), /* @__PURE__ */React.createElement(FocusBracket, null));
  },
  ModalFocusTrap_default = ModalFocusTrap,
  styles = StyleSheet.create({
    focusBracket: {
      outlineStyle: "none"
    }
  });
export { ModalFocusTrap_default as default };
//# sourceMappingURL=ModalFocusTrap.native.js.map