@tamagui/react-native-web-lite
Version:
React Native for Web
106 lines (105 loc) • 4.78 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")), import_View = __toESM(require("../View")), 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"
}
});
//# sourceMappingURL=ModalFocusTrap.js.map