one/dist/cjs/safe-area-context/NativeSafeAreaProvider.cjs

One is a React framework for web, iOS, and Android apps.

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
	for (var name in all) __defProp(target, name, {
		get: all[name],
		enumerable: true
	});
};
var __copyProps = (to, from, except, desc) => {
	if (from && typeof from === "object" || typeof from === "function") {
		for (let key of __getOwnPropNames(from)) if (!__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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
	value: mod,
	enumerable: true
}) : target, mod));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var NativeSafeAreaProvider_exports = {};
__export(NativeSafeAreaProvider_exports, { NativeSafeAreaProvider: () => NativeSafeAreaProvider });
module.exports = __toCommonJS(NativeSafeAreaProvider_exports);
var React = __toESM(require("react"), 1);
var import_jsx_runtime = require("react/jsx-runtime");
const CSSTransitions = {
	WebkitTransition: "webkitTransitionEnd",
	Transition: "transitionEnd",
	MozTransition: "transitionend",
	MSTransition: "msTransitionEnd",
	OTransition: "oTransitionEnd"
};
function NativeSafeAreaProvider({ children, style, onInsetsChange }) {
	React.useEffect(() => {
		if (typeof document === "undefined") {
			return;
		}
		const element = createContextElement();
		document.body.appendChild(element);
		const onEnd = () => {
			const { paddingTop, paddingBottom, paddingLeft, paddingRight } = window.getComputedStyle(element);
			const insets = {
				top: paddingTop ? Number.parseInt(paddingTop, 10) : 0,
				bottom: paddingBottom ? Number.parseInt(paddingBottom, 10) : 0,
				left: paddingLeft ? Number.parseInt(paddingLeft, 10) : 0,
				right: paddingRight ? Number.parseInt(paddingRight, 10) : 0
			};
			const frame = {
				x: 0,
				y: 0,
				width: document.documentElement.offsetWidth,
				height: document.documentElement.offsetHeight
			};
			onInsetsChange({ nativeEvent: {
				insets,
				frame
			} });
		};
		element.addEventListener(getSupportedTransitionEvent(), onEnd);
		onEnd();
		return () => {
			document.body.removeChild(element);
			element.removeEventListener(getSupportedTransitionEvent(), onEnd);
		};
	}, [onInsetsChange]);
	if (style) {
		const styleValue = style;
		const styleValues = Array.isArray(styleValue) ? styleValue.flat(Number.POSITIVE_INFINITY) : [styleValue];
		const flattenedStyle = styleValues.reduce((result, value) => value && typeof value === "object" ? Object.assign(result, value) : result, {});
		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			style: flattenedStyle,
			children
		});
	}
	return children;
}
let _supportedTransitionEvent = null;
function getSupportedTransitionEvent() {
	if (_supportedTransitionEvent != null) {
		return _supportedTransitionEvent;
	}
	const element = document.createElement("invalidtype");
	_supportedTransitionEvent = CSSTransitions.Transition;
	for (const key in CSSTransitions) {
		if (element.style[key] !== void 0) {
			_supportedTransitionEvent = CSSTransitions[key];
			break;
		}
	}
	return _supportedTransitionEvent;
}
let _supportedEnv = null;
function getSupportedEnv() {
	if (_supportedEnv !== null) {
		return _supportedEnv;
	}
	const { CSS } = window;
	if (CSS && CSS.supports && CSS.supports("top: constant(safe-area-inset-top)")) {
		_supportedEnv = "constant";
	} else {
		_supportedEnv = "env";
	}
	return _supportedEnv;
}
function getInset(side) {
	return `${getSupportedEnv()}(safe-area-inset-${side})`;
}
function createContextElement() {
	const element = document.createElement("div");
	const { style } = element;
	style.position = "fixed";
	style.left = "0";
	style.top = "0";
	style.width = "0";
	style.height = "0";
	style.zIndex = "-1";
	style.overflow = "hidden";
	style.visibility = "hidden";
	style.transitionDuration = "0.05s";
	style.transitionProperty = "padding";
	style.transitionDelay = "0s";
	style.paddingTop = getInset("top");
	style.paddingBottom = getInset("bottom");
	style.paddingLeft = getInset("left");
	style.paddingRight = getInset("right");
	return element;
}