one/dist/esm/safe-area-context/NativeSafeAreaProvider.mjs

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

import * as React from "react";
import { jsx } from "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__ */ 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;
}

export { NativeSafeAreaProvider };
//# sourceMappingURL=NativeSafeAreaProvider.mjs.map