@tamagui/react-native-web-lite
Version:
React Native for Web
108 lines • 4.83 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf,
__hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all) __defProp(target, name, {
get: all[name],
enumerable: !0
});
},
__copyProps = (to, from, except, desc) => {
if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
get: () => from[key],
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: !0
}) : target, mod)),
__toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
value: !0
}), mod);
var ModalFocusTrap_exports = {};
__export(ModalFocusTrap_exports, {
default: () => ModalFocusTrap_default
});
module.exports = __toCommonJS(ModalFocusTrap_exports);
var React = __toESM(require("react")),
import_react_native_web_internals = require("@tamagui/react-native-web-internals"),
import_createElement = __toESM(require("../createElement/index.cjs")),
import_View = __toESM(require("../View/index.cjs")),
FocusBracket = () => (0, import_createElement.default)("div", {
accessibilityRole: "none",
tabIndex: 0,
style: styles.focusBracket
});
function attemptFocus(element) {
if (!import_react_native_web_internals.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 = _ref => {
var active = _ref.active,
children = _ref.children,
trapElementRef = React.useRef(),
focusRef = React.useRef({
trapFocusInProgress: !1,
lastFocusedElement: null
});
return React.useEffect(() => {
if (import_react_native_web_internals.canUseDOM) {
var trapFocus = () => {
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 && import_react_native_web_internals.UIManager.focus(trapElementRef.current);
}
} finally {
focusRef.current.trapFocusInProgress = !1;
}
focusRef.current.lastFocusedElement = document.activeElement;
}
};
return trapFocus(), document.addEventListener("focus", trapFocus, !0), () => document.removeEventListener("focus", trapFocus, !0);
}
}, [active]), React.useEffect(function () {
if (import_react_native_web_internals.canUseDOM) {
var lastFocusedElementOutsideTrap = document.activeElement;
return function () {
lastFocusedElementOutsideTrap && document.contains(lastFocusedElementOutsideTrap) && import_react_native_web_internals.UIManager.focus(lastFocusedElementOutsideTrap);
};
}
}, []), /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(FocusBracket, null), /* @__PURE__ */React.createElement(import_View.default, {
ref: trapElementRef
}, children), /* @__PURE__ */React.createElement(FocusBracket, null));
},
ModalFocusTrap_default = ModalFocusTrap,
styles = import_react_native_web_internals.StyleSheet.create({
focusBracket: {
outlineStyle: "none"
}
});