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

package/dist/esm/index.native.js

@@ -1,392 +1,350 @@
 import { jsx } from "react/jsx-runtime";
 import { useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { createContext, useContext, useId } from "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 LayoutHandlers = /* @__PURE__ */ new WeakMap();
+var LayoutDisableKey = /* @__PURE__ */ new WeakMap();
+var Nodes = /* @__PURE__ */ new Set();
+var NodeRectCache = /* @__PURE__ */ new WeakMap();
+var PrevHostNode = /* @__PURE__ */ new WeakMap();
+var usePretransformDimensions = function() {
+	return globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
+};
+var isDebugLayout = function() {
+	var _window_location_search, _window_location;
+	return typeof window !== "undefined" && ((_window_location = window.location) === null || _window_location === void 0 ? void 0 : (_window_location_search = _window_location.search) === null || _window_location_search === void 0 ? void 0 : _window_location_search.includes("__tamaDebugLayout"));
 };
-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__ */createContext("");
+var DisableLayoutContextKey = /* @__PURE__ */ createContext("");
 var ENABLE = false;
-var LayoutMeasurementController = function (param) {
-  var {
-    disable,
-    children
-  } = param;
-  var id = useId();
-  useIsomorphicLayoutEffect(function () {
-    var wasDisabled = DisableLayoutContextValues[id] === true;
-    DisableLayoutContextValues[id] = disable;
-    if (wasDisabled && !disable) measureOnNextFrame === null || measureOnNextFrame === void 0 || measureOnNextFrame();
-  }, [disable, id]);
-  return /* @__PURE__ */jsx(DisableLayoutContextKey.Provider, {
-    value: id,
-    children
-  });
+var LayoutMeasurementController = function(param) {
+	var { disable, children } = param;
+	var id = useId();
+	useIsomorphicLayoutEffect(function() {
+		var wasDisabled = DisableLayoutContextValues[id] === true;
+		DisableLayoutContextValues[id] = disable;
+		if (wasDisabled && !disable) measureOnNextFrame === null || measureOnNextFrame === void 0 || measureOnNextFrame();
+	}, [disable, id]);
+	return /* @__PURE__ */ 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();
+var queuedUpdates = /* @__PURE__ */ new Map();
 function enable() {
-  if (avoidUpdates) {
-    avoidUpdates = false;
-    if (queuedUpdates) {
-      queuedUpdates.forEach(function (cb) {
-        return cb();
-      });
-      queuedUpdates.clear();
-    }
-  }
+	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;
+	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();
+	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;
+	}, updateLayoutIfChanged2 = function(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);
+	}, 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;
+	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 (!(parentElement instanceof 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++) updateLayoutIfChanged2(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 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 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
-  };
+var getRelativeDimensions = function(a, b, aNode) {
+	var left = a.left - b.left;
+	var top = a.top - b.top;
+	var { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
+		width: a.width,
+		height: a.height
+	};
+	return {
+		x: left,
+		y: top,
+		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);
+	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 (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();
+	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);
-  };
+	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);
+	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));
+	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 = 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);
-  }
-  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);
-  });
-  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]);
+	var _ref_current;
+	var disableKey = 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);
+	}
+	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) {
+			if (prevNode) cleanupNode(prevNode);
+			PrevHostNode.set(ref, nextNode);
+			if (nextNode) {
+				LayoutHandlers.set(nextNode, onLayout);
+				observeLayoutNode(nextNode, disableKey);
+				emitLayoutSync(nextNode);
+			}
+		}
+		return function() {
+			var _ref_current3;
+			var activeNode = ensureWebElement((_ref_current3 = ref.current) === null || _ref_current3 === void 0 ? void 0 : _ref_current3.host);
+			if (activeNode) cleanupNode(activeNode);
+			var swapped = PrevHostNode.get(ref);
+			if (swapped && swapped !== activeNode) cleanupNode(swapped);
+			PrevHostNode.delete(ref);
+		};
+	}, [ref, !!onLayout]);
 }
 function ensureWebElement(x) {
-  if (typeof HTMLElement === "undefined") return;
-  return _instanceof(x, HTMLElement) ? x : void 0;
+	if (typeof HTMLElement === "undefined") return void 0;
+	return x instanceof 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 getBoundingClientRectAsync = function(node) {
+	return new Promise(function(res) {
+		if (!node || node.nodeType !== 1) return res(false);
+		var io = new IntersectionObserver(function(entries) {
+			io.disconnect();
+			res(entries[0].boundingClientRect);
+		});
+		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 measureNode = async function(node, relativeTo) {
+	var relativeNode = relativeTo || (node === null || node === void 0 ? void 0 : node.parentElement);
+	if (relativeNode instanceof 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;
+var measure = async function(node, callback) {
+	var out = await measureNode(node, node.parentElement);
+	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 createMeasure = function(node) {
+	return function(callback) {
+		return measure(node, callback);
+	};
 };
-var createMeasureInWindow = function (node) {
-  return function (callback) {
-    return measureInWindow(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 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;
+var createMeasureInWindow = function(node) {
+	return function(callback) {
+		return measureInWindow(node, callback);
+	};
 };
-function createMeasureLayout(node) {
-  return function (relativeTo, callback) {
-    return measureLayout(node, relativeTo, callback);
-  };
-}
-export { LayoutMeasurementController, createMeasure, createMeasureInWindow, createMeasureLayout, enable, getBoundingClientRectAsync, getElementLayoutEvent, measure, measureInWindow, measureLayout, measureNode, registerLayoutNode, setOnLayoutStrategy, useElementLayout };
+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;
+};
+var createMeasureLayout = function(node) {
+	return function(relativeTo, callback) {
+		return measureLayout(node, relativeTo, callback);
+	};
+};
+
+export { LayoutMeasurementController, createMeasure, createMeasureInWindow, createMeasureLayout, enable, getBoundingClientRectAsync, getElementLayoutEvent, measure, measureInWindow, measureLayout, measureNode, registerLayoutNode, useElementLayout };
 //# sourceMappingURL=index.native.js.map