@tamagui/use-element-layout 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/index.native.cjs

@@ -0,0 +1,415 @@
+"use strict";
+
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+	LayoutMeasurementController: () => LayoutMeasurementController,
+	createMeasure: () => createMeasure,
+	createMeasureInWindow: () => createMeasureInWindow,
+	createMeasureLayout: () => createMeasureLayout,
+	enable: () => enable,
+	getBoundingClientRectAsync: () => getBoundingClientRectAsync,
+	getElementLayoutEvent: () => getElementLayoutEvent,
+	measure: () => measure,
+	measureInWindow: () => measureInWindow,
+	measureLayout: () => measureLayout,
+	measureNode: () => measureNode,
+	registerLayoutNode: () => registerLayoutNode,
+	setOnLayoutStrategy: () => setOnLayoutStrategy,
+	useElementLayout: () => useElementLayout
+});
+module.exports = __toCommonJS(index_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_constants = require("@tamagui/constants");
+var import_react = require("react");
+function _instanceof(left, right) {
+	if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) return !!right[Symbol.hasInstance](left);
+	else return left instanceof right;
+}
+var LayoutHandlers = /* @__PURE__ */ new WeakMap();
+var LayoutDisableKey = /* @__PURE__ */ new WeakMap();
+var Nodes = /* @__PURE__ */ new Set();
+var usePretransformDimensions = function() {
+	return globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
+};
+var _debugLayout;
+function isDebugLayout() {
+	if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
+	return _debugLayout;
+}
+var DisableLayoutContextValues = {};
+var DisableLayoutContextKey = /* @__PURE__ */ (0, import_react.createContext)("");
+var ENABLE = false;
+var LayoutMeasurementController = function(param) {
+	var { disable, children } = param;
+	var id = (0, import_react.useId)();
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		var wasDisabled = DisableLayoutContextValues[id] === true;
+		DisableLayoutContextValues[id] = disable;
+		if (wasDisabled && !disable) measureOnNextFrame === null || measureOnNextFrame === void 0 || measureOnNextFrame();
+	}, [disable, id]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
+		value: id,
+		children
+	});
+};
+var strategy = "async";
+var resumeLayoutLoop;
+var measureOnNextFrame;
+function setOnLayoutStrategy(state) {
+	strategy = state;
+	resumeLayoutLoop === null || resumeLayoutLoop === void 0 || resumeLayoutLoop();
+}
+var NodeRectCache = /* @__PURE__ */ new WeakMap();
+var avoidUpdates = true;
+var queuedUpdates = /* @__PURE__ */ new Map();
+function enable() {
+	if (avoidUpdates) {
+		avoidUpdates = false;
+		if (queuedUpdates) {
+			queuedUpdates.forEach(function(cb) {
+				return cb();
+			});
+			queuedUpdates.clear();
+		}
+	}
+}
+function rectsEqual(a, b) {
+	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+if (ENABLE) {
+	let ensureRectFetchObserver2 = function() {
+		if (rectFetchObserver) return rectFetchObserver;
+		rectFetchObserver = new IntersectionObserver(function(entries) {
+			lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
+			for (var i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
+			if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
+			if (rectFetchResolve) {
+				rectFetchResolve(true);
+				rectFetchResolve = null;
+			}
+		}, { threshold: 0 });
+		return rectFetchObserver;
+	}, scheduleLayoutFrame2 = function() {
+		if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
+		frameScheduled = true;
+		rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
+	};
+	var BoundingRects = /* @__PURE__ */ new WeakMap();
+	var rectFetchObserver = null;
+	var rectFetchResolve = null;
+	var rectFetchStartTime = 0;
+	var lastCallbackDelay = 0;
+	async function updateLayoutIfChanged(node) {
+		if (typeof LayoutHandlers.get(node) !== "function") return;
+		var parentNode = node.parentElement;
+		if (!parentNode) return;
+		var nodeRect;
+		var parentRect;
+		if (strategy === "async") {
+			nodeRect = BoundingRects.get(node);
+			parentRect = BoundingRects.get(parentNode);
+			if (!nodeRect || !parentRect) return;
+		} else {
+			nodeRect = node.getBoundingClientRect();
+			parentRect = parentNode.getBoundingClientRect();
+		}
+		emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
+	}
+	var rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
+	var userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
+	var BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
+	var MAX_SKIP_FRAMES = 20;
+	var skipFrames = BASE_SKIP_FRAMES;
+	var frameCount = 0;
+	var frameScheduled = false;
+	async function layoutOnAnimationFrame() {
+		if (frameCount++ % skipFrames !== 0) {
+			frameScheduled = false;
+			scheduleLayoutFrame2();
+			return;
+		}
+		if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
+		if (strategy !== "off") {
+			var activeNodes = [];
+			var parentsToObserve = /* @__PURE__ */ new Set();
+			var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+			try {
+				for (var _iterator = Nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+					var node = _step.value;
+					var parentElement = node.parentElement;
+					if (!_instanceof(parentElement, HTMLElement)) {
+						cleanupNode(node);
+						continue;
+					}
+					var disableKey = LayoutDisableKey.get(node);
+					if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
+					activeNodes.push(node);
+					parentsToObserve.add(parentElement);
+				}
+			} catch (err) {
+				_didIteratorError = true;
+				_iteratorError = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+				} finally {
+					if (_didIteratorError) throw _iteratorError;
+				}
+			}
+			if (activeNodes.length > 0) {
+				var io = ensureRectFetchObserver2();
+				rectFetchStartTime = performance.now();
+				for (var i = 0; i < activeNodes.length; i++) io.observe(activeNodes[i]);
+				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+				try {
+					for (var _iterator1 = parentsToObserve[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+						var parent = _step1.value;
+						io.observe(parent);
+					}
+				} catch (err) {
+					_didIteratorError1 = true;
+					_iteratorError1 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+					} finally {
+						if (_didIteratorError1) throw _iteratorError1;
+					}
+				}
+				await new Promise(function(res) {
+					rectFetchResolve = res;
+				});
+				for (var i1 = 0; i1 < activeNodes.length; i1++) io.unobserve(activeNodes[i1]);
+				var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
+				try {
+					for (var _iterator2 = parentsToObserve[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+						var parent1 = _step2.value;
+						io.unobserve(parent1);
+					}
+				} catch (err) {
+					_didIteratorError2 = true;
+					_iteratorError2 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
+					} finally {
+						if (_didIteratorError2) throw _iteratorError2;
+					}
+				}
+				if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
+				else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
+				for (var i2 = 0; i2 < activeNodes.length; i2++) updateLayoutIfChanged(activeNodes[i2]);
+			}
+		}
+		frameScheduled = false;
+		scheduleLayoutFrame2();
+	}
+	resumeLayoutLoop = scheduleLayoutFrame2;
+	measureOnNextFrame = function() {
+		frameCount = 0;
+		scheduleLayoutFrame2();
+	};
+	document.addEventListener("visibilitychange", scheduleLayoutFrame2);
+	scheduleLayoutFrame2();
+}
+var getElementLayoutEvent = function(nodeRect, parentRect, node) {
+	return {
+		nativeEvent: {
+			layout: getRelativeDimensions(nodeRect, parentRect, node),
+			target: nodeRect
+		},
+		timeStamp: Date.now()
+	};
+};
+var getPreTransformDimensions = function(node) {
+	return {
+		width: node.offsetWidth,
+		height: node.offsetHeight
+	};
+};
+var getRelativeDimensions = function(a, b, aNode) {
+	var { left, top } = a;
+	var x = left - b.left;
+	var y = top - b.top;
+	var { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
+		width: a.width,
+		height: a.height
+	};
+	return {
+		x,
+		y,
+		width,
+		height,
+		pageX: a.left,
+		pageY: a.top
+	};
+};
+function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
+	var onLayout = LayoutHandlers.get(node);
+	if (typeof onLayout !== "function") return;
+	var cachedRect = NodeRectCache.get(node);
+	var cachedParentRect = NodeRectCache.get(parentNode);
+	var nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
+	var parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
+	if (!nodeChanged && !parentChanged) return;
+	NodeRectCache.set(node, nodeRect);
+	NodeRectCache.set(parentNode, parentRect);
+	var event = getElementLayoutEvent(nodeRect, parentRect, node);
+	if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] change", {
+		tag: node.tagName,
+		id: node.id || void 0,
+		className: (node.className || "").slice(0, 60) || void 0,
+		layout: event.nativeEvent.layout,
+		first: !cachedRect
+	});
+	if (avoidUpdates) queuedUpdates.set(node, function() {
+		return onLayout(event);
+	});
+	else onLayout(event);
+}
+function observeLayoutNode(node, disableKey) {
+	Nodes.add(node);
+	if (disableKey) LayoutDisableKey.set(node, disableKey);
+	else LayoutDisableKey.delete(node);
+	resumeLayoutLoop === null || resumeLayoutLoop === void 0 || resumeLayoutLoop();
+}
+function registerLayoutNode(node, onChange, disableKey) {
+	LayoutHandlers.set(node, onChange);
+	observeLayoutNode(node, disableKey);
+	return function() {
+		return cleanupNode(node);
+	};
+}
+function cleanupNode(node) {
+	Nodes.delete(node);
+	LayoutHandlers.delete(node);
+	LayoutDisableKey.delete(node);
+	NodeRectCache.delete(node);
+}
+var PrevHostNode = /* @__PURE__ */ new WeakMap();
+function emitLayoutSync(node) {
+	var onLayout = LayoutHandlers.get(node);
+	if (typeof onLayout !== "function") return;
+	var parentNode = node.parentElement;
+	if (!parentNode) return;
+	var nodeRect = node.getBoundingClientRect();
+	var parentRect = parentNode.getBoundingClientRect();
+	NodeRectCache.set(node, nodeRect);
+	NodeRectCache.set(parentNode, parentRect);
+	onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
+}
+function useElementLayout(ref, onLayout) {
+	var _ref_current;
+	var disableKey = (0, import_react.useContext)(DisableLayoutContextKey);
+	var node = ensureWebElement((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.host);
+	if (node && onLayout) {
+		LayoutHandlers.set(node, onLayout);
+		LayoutDisableKey.set(node, disableKey);
+	}
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		var _ref_current2;
+		if (!onLayout) return;
+		var nextNode = ensureWebElement((_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host);
+		var prevNode = PrevHostNode.get(ref);
+		if (nextNode === prevNode) return;
+		if (prevNode) cleanupNode(prevNode);
+		PrevHostNode.set(ref, nextNode);
+		if (!nextNode) return;
+		LayoutHandlers.set(nextNode, onLayout);
+		observeLayoutNode(nextNode, disableKey);
+		emitLayoutSync(nextNode);
+	});
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		var _ref_current2;
+		if (!onLayout) return;
+		var node2 = (_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host;
+		if (!node2) return;
+		LayoutHandlers.set(node2, onLayout);
+		observeLayoutNode(node2, disableKey);
+		if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] register", {
+			tag: node2.tagName,
+			id: node2.id || void 0,
+			className: (node2.className || "").slice(0, 60) || void 0,
+			totalNodes: Nodes.size
+		});
+		return function() {
+			cleanupNode(node2);
+			var swappedNode = PrevHostNode.get(ref);
+			if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
+			PrevHostNode.delete(ref);
+		};
+	}, [ref, !!onLayout]);
+}
+function ensureWebElement(x) {
+	if (typeof HTMLElement === "undefined") return;
+	return _instanceof(x, HTMLElement) ? x : void 0;
+}
+var getBoundingClientRectAsync = function(node) {
+	return new Promise(function(res) {
+		if (!node || node.nodeType !== 1) return res(false);
+		var io = new IntersectionObserver(function(entries) {
+			io.disconnect();
+			return res(entries[0].boundingClientRect);
+		}, { threshold: 0 });
+		io.observe(node);
+	});
+};
+var measureNode = async function(node, relativeTo) {
+	var relativeNode = relativeTo || (node === null || node === void 0 ? void 0 : node.parentElement);
+	if (_instanceof(relativeNode, HTMLElement)) {
+		var [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
+		if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
+	}
+	return null;
+};
+var measure = async function(node, callback) {
+	var out = await measureNode(node, _instanceof(node.parentNode, HTMLElement) ? node.parentNode : null);
+	if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+	return out;
+};
+function createMeasure(node) {
+	return function(callback) {
+		return measure(node, callback);
+	};
+}
+var measureInWindow = async function(node, callback) {
+	var out = await measureNode(node, null);
+	if (out) callback === null || callback === void 0 || callback(out.pageX, out.pageY, out.width, out.height);
+	return out;
+};
+var createMeasureInWindow = function(node) {
+	return function(callback) {
+		return measureInWindow(node, callback);
+	};
+};
+var measureLayout = async function(node, relativeNode, callback) {
+	var out = await measureNode(node, relativeNode);
+	if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+	return out;
+};
+function createMeasureLayout(node) {
+	return function(relativeTo, callback) {
+		return measureLayout(node, relativeTo, callback);
+	};
+}