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

package/dist/esm/index.mjs

@@ -1,322 +1,268 @@
 import { useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { createContext, useContext, useId } from "react";
 import { jsx } from "react/jsx-runtime";
-const LayoutHandlers = /* @__PURE__ */new WeakMap();
-const LayoutDisableKey = /* @__PURE__ */new WeakMap();
-const Nodes = /* @__PURE__ */new Set();
+
+const LayoutHandlers = /* @__PURE__ */ new WeakMap();
+const LayoutDisableKey = /* @__PURE__ */ new WeakMap();
+const Nodes = /* @__PURE__ */ new Set();
+const NodeRectCache = /* @__PURE__ */ new WeakMap();
+const PrevHostNode = /* @__PURE__ */ new WeakMap();
 const usePretransformDimensions = () => globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
-let _debugLayout;
-function isDebugLayout() {
-  if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
-  return _debugLayout;
-}
+const isDebugLayout = () => typeof window !== "undefined" && window.location?.search?.includes("__tamaDebugLayout");
 const DisableLayoutContextValues = {};
 const DisableLayoutContextKey = createContext("");
 const ENABLE = typeof IntersectionObserver !== "undefined";
-const LayoutMeasurementController = ({
-  disable,
-  children
-}) => {
-  const id = useId();
-  useIsomorphicLayoutEffect(() => {
-    const wasDisabled = DisableLayoutContextValues[id] === true;
-    DisableLayoutContextValues[id] = disable;
-    if (wasDisabled && !disable) measureOnNextFrame?.();
-  }, [disable, id]);
-  return /* @__PURE__ */jsx(DisableLayoutContextKey.Provider, {
-    value: id,
-    children
-  });
+const LayoutMeasurementController = ({ disable, children }) => {
+	const id = useId();
+	useIsomorphicLayoutEffect(() => {
+		const wasDisabled = DisableLayoutContextValues[id] === true;
+		DisableLayoutContextValues[id] = disable;
+		if (wasDisabled && !disable) measureOnNextFrame?.();
+	}, [disable, id]);
+	return /* @__PURE__ */ jsx(DisableLayoutContextKey.Provider, {
+		value: id,
+		children
+	});
 };
-let strategy = "async";
 let resumeLayoutLoop;
 let measureOnNextFrame;
-function setOnLayoutStrategy(state) {
-  strategy = state;
-  resumeLayoutLoop?.();
-}
-const NodeRectCache = /* @__PURE__ */new WeakMap();
 let avoidUpdates = true;
-const queuedUpdates = /* @__PURE__ */new Map();
+const queuedUpdates = /* @__PURE__ */ new Map();
 function enable() {
-  if (avoidUpdates) {
-    avoidUpdates = false;
-    if (queuedUpdates) {
-      queuedUpdates.forEach(cb => cb());
-      queuedUpdates.clear();
-    }
-  }
+	if (avoidUpdates) {
+		avoidUpdates = false;
+		if (queuedUpdates) {
+			queuedUpdates.forEach((cb) => 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 ensureRectFetchObserver = function () {
-      if (rectFetchObserver) return rectFetchObserver;
-      rectFetchObserver = new IntersectionObserver(entries => {
-        lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
-        for (let 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;
-    },
-    scheduleLayoutFrame = function () {
-      if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
-      frameScheduled = true;
-      rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
-    };
-  const BoundingRects = /* @__PURE__ */new WeakMap();
-  let rectFetchObserver = null;
-  let rectFetchResolve = null;
-  let rectFetchStartTime = 0;
-  let lastCallbackDelay = 0;
-  async function updateLayoutIfChanged(node) {
-    if (typeof LayoutHandlers.get(node) !== "function") return;
-    const parentNode = node.parentElement;
-    if (!parentNode) return;
-    let nodeRect;
-    let 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);
-  }
-  const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
-  const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
-  const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
-  const MAX_SKIP_FRAMES = 20;
-  let skipFrames = BASE_SKIP_FRAMES;
-  let frameCount = 0;
-  let frameScheduled = false;
-  async function layoutOnAnimationFrame() {
-    if (frameCount++ % skipFrames !== 0) {
-      frameScheduled = false;
-      scheduleLayoutFrame();
-      return;
-    }
-    if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
-    if (strategy !== "off") {
-      const activeNodes = [];
-      const parentsToObserve = /* @__PURE__ */new Set();
-      for (const node of Nodes) {
-        const parentElement = node.parentElement;
-        if (!(parentElement instanceof HTMLElement)) {
-          cleanupNode(node);
-          continue;
-        }
-        const disableKey = LayoutDisableKey.get(node);
-        if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
-        activeNodes.push(node);
-        parentsToObserve.add(parentElement);
-      }
-      if (activeNodes.length > 0) {
-        const io = ensureRectFetchObserver();
-        rectFetchStartTime = performance.now();
-        for (let i = 0; i < activeNodes.length; i++) io.observe(activeNodes[i]);
-        for (const parent of parentsToObserve) io.observe(parent);
-        await new Promise(res => {
-          rectFetchResolve = res;
-        });
-        for (let i = 0; i < activeNodes.length; i++) io.unobserve(activeNodes[i]);
-        for (const parent of parentsToObserve) io.unobserve(parent);
-        if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
-        for (let i = 0; i < activeNodes.length; i++) updateLayoutIfChanged(activeNodes[i]);
-      }
-    }
-    frameScheduled = false;
-    scheduleLayoutFrame();
-  }
-  resumeLayoutLoop = scheduleLayoutFrame;
-  measureOnNextFrame = () => {
-    frameCount = 0;
-    scheduleLayoutFrame();
-  };
-  document.addEventListener("visibilitychange", scheduleLayoutFrame);
-  scheduleLayoutFrame();
+	let ensureRectFetchObserver = function() {
+		if (rectFetchObserver) return rectFetchObserver;
+		rectFetchObserver = new IntersectionObserver((entries) => {
+			lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
+			for (let 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;
+	}, updateLayoutIfChanged = function(node) {
+		if (typeof LayoutHandlers.get(node) !== "function") return;
+		const parentNode = node.parentElement;
+		if (!parentNode) return;
+		let nodeRect;
+		let parentRect;
+		nodeRect = BoundingRects.get(node);
+		parentRect = BoundingRects.get(parentNode);
+		if (!nodeRect || !parentRect) return;
+		emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
+	}, scheduleLayoutFrame = function() {
+		if (frameScheduled || Nodes.size === 0 || document.hidden) return;
+		frameScheduled = true;
+		rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
+	};
+	const BoundingRects = /* @__PURE__ */ new WeakMap();
+	let rectFetchObserver = null;
+	let rectFetchResolve = null;
+	let rectFetchStartTime = 0;
+	let lastCallbackDelay = 0;
+	const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
+	const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
+	const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
+	const MAX_SKIP_FRAMES = 20;
+	let skipFrames = BASE_SKIP_FRAMES;
+	let frameCount = 0;
+	let frameScheduled = false;
+	async function layoutOnAnimationFrame() {
+		if (frameCount++ % skipFrames !== 0) {
+			frameScheduled = false;
+			scheduleLayoutFrame();
+			return;
+		}
+		if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
+		{
+			const activeNodes = [];
+			const parentsToObserve = /* @__PURE__ */ new Set();
+			for (const node of Nodes) {
+				const parentElement = node.parentElement;
+				if (!(parentElement instanceof HTMLElement)) {
+					cleanupNode(node);
+					continue;
+				}
+				const disableKey = LayoutDisableKey.get(node);
+				if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
+				activeNodes.push(node);
+				parentsToObserve.add(parentElement);
+			}
+			if (activeNodes.length > 0) {
+				const io = ensureRectFetchObserver();
+				rectFetchStartTime = performance.now();
+				for (let i = 0; i < activeNodes.length; i++) io.observe(activeNodes[i]);
+				for (const parent of parentsToObserve) io.observe(parent);
+				await new Promise((res) => {
+					rectFetchResolve = res;
+				});
+				for (let i = 0; i < activeNodes.length; i++) io.unobserve(activeNodes[i]);
+				for (const parent of parentsToObserve) io.unobserve(parent);
+				if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
+				else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
+				for (let i = 0; i < activeNodes.length; i++) updateLayoutIfChanged(activeNodes[i]);
+			}
+		}
+		frameScheduled = false;
+		scheduleLayoutFrame();
+	}
+	resumeLayoutLoop = scheduleLayoutFrame;
+	measureOnNextFrame = () => {
+		frameCount = 0;
+		scheduleLayoutFrame();
+	};
+	document.addEventListener("visibilitychange", scheduleLayoutFrame);
+	scheduleLayoutFrame();
 }
-const getElementLayoutEvent = (nodeRect, parentRect, node) => {
-  return {
-    nativeEvent: {
-      layout: getRelativeDimensions(nodeRect, parentRect, node),
-      target: nodeRect
-    },
-    timeStamp: Date.now()
-  };
-};
-const getPreTransformDimensions = node => {
-  return {
-    width: node.offsetWidth,
-    height: node.offsetHeight
-  };
-};
+const getElementLayoutEvent = (nodeRect, parentRect, node) => ({
+	nativeEvent: {
+		layout: getRelativeDimensions(nodeRect, parentRect, node),
+		target: nodeRect
+	},
+	timeStamp: Date.now()
+});
+const getPreTransformDimensions = (node) => ({
+	width: node.offsetWidth,
+	height: node.offsetHeight
+});
 const getRelativeDimensions = (a, b, aNode) => {
-  const {
-    left,
-    top
-  } = a;
-  const x = left - b.left;
-  const y = top - b.top;
-  const {
-    width,
-    height
-  } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
-    width: a.width,
-    height: a.height
-  };
-  return {
-    x,
-    y,
-    width,
-    height,
-    pageX: a.left,
-    pageY: a.top
-  };
+	const left = a.left - b.left;
+	const top = a.top - b.top;
+	const { 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) {
-  const onLayout = LayoutHandlers.get(node);
-  if (typeof onLayout !== "function") return;
-  const cachedRect = NodeRectCache.get(node);
-  const cachedParentRect = NodeRectCache.get(parentNode);
-  const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
-  const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
-  if (!nodeChanged && !parentChanged) return;
-  NodeRectCache.set(node, nodeRect);
-  NodeRectCache.set(parentNode, parentRect);
-  const 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, () => onLayout(event));else onLayout(event);
+	const onLayout = LayoutHandlers.get(node);
+	if (typeof onLayout !== "function") return;
+	const cachedRect = NodeRectCache.get(node);
+	const cachedParentRect = NodeRectCache.get(parentNode);
+	const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
+	const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
+	if (!nodeChanged && !parentChanged) return;
+	NodeRectCache.set(node, nodeRect);
+	NodeRectCache.set(parentNode, parentRect);
+	const event = getElementLayoutEvent(nodeRect, parentRect, node);
+	if (avoidUpdates) queuedUpdates.set(node, () => onLayout(event));
+	else onLayout(event);
 }
 function observeLayoutNode(node, disableKey) {
-  Nodes.add(node);
-  if (disableKey) LayoutDisableKey.set(node, disableKey);else LayoutDisableKey.delete(node);
-  resumeLayoutLoop?.();
+	Nodes.add(node);
+	if (disableKey) LayoutDisableKey.set(node, disableKey);
+	else LayoutDisableKey.delete(node);
+	resumeLayoutLoop?.();
 }
 function registerLayoutNode(node, onChange, disableKey) {
-  LayoutHandlers.set(node, onChange);
-  observeLayoutNode(node, disableKey);
-  return () => cleanupNode(node);
+	LayoutHandlers.set(node, onChange);
+	observeLayoutNode(node, disableKey);
+	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);
 }
-const PrevHostNode = /* @__PURE__ */new WeakMap();
 function emitLayoutSync(node) {
-  const onLayout = LayoutHandlers.get(node);
-  if (typeof onLayout !== "function") return;
-  const parentNode = node.parentElement;
-  if (!parentNode) return;
-  const nodeRect = node.getBoundingClientRect();
-  const parentRect = parentNode.getBoundingClientRect();
-  NodeRectCache.set(node, nodeRect);
-  NodeRectCache.set(parentNode, parentRect);
-  onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
+	const onLayout = LayoutHandlers.get(node);
+	if (typeof onLayout !== "function") return;
+	const parentNode = node.parentElement;
+	if (!parentNode) return;
+	const nodeRect = node.getBoundingClientRect();
+	const parentRect = parentNode.getBoundingClientRect();
+	NodeRectCache.set(node, nodeRect);
+	NodeRectCache.set(parentNode, parentRect);
+	onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
 }
 function useElementLayout(ref, onLayout) {
-  const disableKey = useContext(DisableLayoutContextKey);
-  const node = ensureWebElement(ref.current?.host);
-  if (node && onLayout) {
-    LayoutHandlers.set(node, onLayout);
-    LayoutDisableKey.set(node, disableKey);
-  }
-  useIsomorphicLayoutEffect(() => {
-    if (!onLayout) return;
-    const nextNode = ensureWebElement(ref.current?.host);
-    const 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(() => {
-    if (!onLayout) return;
-    const node2 = ref.current?.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 () => {
-      cleanupNode(node2);
-      const swappedNode = PrevHostNode.get(ref);
-      if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
-      PrevHostNode.delete(ref);
-    };
-  }, [ref, !!onLayout]);
+	const disableKey = useContext(DisableLayoutContextKey);
+	const node = ensureWebElement(ref.current?.host);
+	if (node && onLayout) {
+		LayoutHandlers.set(node, onLayout);
+		LayoutDisableKey.set(node, disableKey);
+	}
+	useIsomorphicLayoutEffect(() => {
+		if (!onLayout) return;
+		const nextNode = ensureWebElement(ref.current?.host);
+		const 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 () => {
+			const activeNode = ensureWebElement(ref.current?.host);
+			if (activeNode) cleanupNode(activeNode);
+			const swapped = PrevHostNode.get(ref);
+			if (swapped && swapped !== activeNode) cleanupNode(swapped);
+			PrevHostNode.delete(ref);
+		};
+	}, [ref, !!onLayout]);
 }
 function ensureWebElement(x) {
-  if (typeof HTMLElement === "undefined") return;
-  return x instanceof HTMLElement ? x : void 0;
+	if (typeof HTMLElement === "undefined") return void 0;
+	return x instanceof HTMLElement ? x : void 0;
 }
-const getBoundingClientRectAsync = node => {
-  return new Promise(res => {
-    if (!node || node.nodeType !== 1) return res(false);
-    const io = new IntersectionObserver(entries => {
-      io.disconnect();
-      return res(entries[0].boundingClientRect);
-    }, {
-      threshold: 0
-    });
-    io.observe(node);
-  });
-};
+const getBoundingClientRectAsync = (node) => new Promise((res) => {
+	if (!node || node.nodeType !== 1) return res(false);
+	const io = new IntersectionObserver((entries) => {
+		io.disconnect();
+		res(entries[0].boundingClientRect);
+	});
+	io.observe(node);
+});
 const measureNode = async (node, relativeTo) => {
-  const relativeNode = relativeTo || node?.parentElement;
-  if (relativeNode instanceof HTMLElement) {
-    const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
-    if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
-  }
-  return null;
+	const relativeNode = relativeTo || node?.parentElement;
+	if (relativeNode instanceof HTMLElement) {
+		const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
+		if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
+	}
+	return null;
 };
 const measure = async (node, callback) => {
-  const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
-  if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
-  return out;
+	const out = await measureNode(node, node.parentElement);
+	if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+	return out;
 };
-function createMeasure(node) {
-  return callback => measure(node, callback);
-}
+const createMeasure = (node) => (callback) => measure(node, callback);
 const measureInWindow = async (node, callback) => {
-  const out = await measureNode(node, null);
-  if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
-  return out;
-};
-const createMeasureInWindow = node => {
-  return callback => measureInWindow(node, callback);
+	const out = await measureNode(node, null);
+	if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
+	return out;
 };
+const createMeasureInWindow = (node) => (callback) => measureInWindow(node, callback);
 const measureLayout = async (node, relativeNode, callback) => {
-  const out = await measureNode(node, relativeNode);
-  if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
-  return out;
+	const out = await measureNode(node, relativeNode);
+	if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+	return out;
 };
-function createMeasureLayout(node) {
-  return (relativeTo, callback) => measureLayout(node, relativeTo, callback);
-}
-export { LayoutMeasurementController, createMeasure, createMeasureInWindow, createMeasureLayout, enable, getBoundingClientRectAsync, getElementLayoutEvent, measure, measureInWindow, measureLayout, measureNode, registerLayoutNode, setOnLayoutStrategy, useElementLayout };
+const createMeasureLayout = (node) => (relativeTo, callback) => measureLayout(node, relativeTo, callback);
+
+export { LayoutMeasurementController, createMeasure, createMeasureInWindow, createMeasureLayout, enable, getBoundingClientRectAsync, getElementLayoutEvent, measure, measureInWindow, measureLayout, measureNode, registerLayoutNode, useElementLayout };
 //# sourceMappingURL=index.mjs.map