@tamagui/core 1.126.17 → 1.127.0

package/dist/native.js

@@ -12351,42 +12351,66 @@ var getRect = function(node) {
 };
 
 // src/hooks/useElementLayout.tsx
-var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), status = "active";
+var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), strategy = "async";
 function setOnLayoutStrategy(state) {
-  status = state;
+  strategy = state;
 }
-var NodeRectCache = /* @__PURE__ */ new WeakMap(), ParentRectCache = /* @__PURE__ */ new WeakMap(), rAF = typeof window < "u" ? window.requestAnimationFrame : void 0;
+var NodeRectCache = /* @__PURE__ */ new WeakMap(), ParentRectCache = /* @__PURE__ */ new WeakMap(), DebounceTimers = /* @__PURE__ */ new WeakMap(), LastChangeTime = /* @__PURE__ */ new WeakMap(), rAF = typeof window < "u" ? window.requestAnimationFrame : void 0, DEBOUNCE_DELAY = 32;
 if (import_constants.isClient)
   if (rAF) {
-    let updateLayoutIfChanged = function(node) {
-      var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
-      if (typeof onLayout == "function") {
-        var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
-        if (!cachedRect || // has changed one rect
-        !(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect))) {
-          NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect);
-          var event = getElementLayoutEvent(node);
-          avoidUpdates ? queuedUpdates.set(node, function() {
-            return onLayout(event);
-          }) : onLayout(event);
-        }
-      }
-    }, layoutOnAnimationFrame = function() {
+    let layoutOnAnimationFrame = function() {
       var now = Date.now(), timeSinceLastFrame = now - lastFrameAt;
-      if (lastFrameAt = now, status !== "inactive") {
+      if (lastFrameAt = now, strategy !== "off") {
         var expectedFrameTime = 16.67, hasRecentSyncWork = timeSinceLastFrame > expectedFrameTime * numDroppedFramesUntilPause;
         hasRecentSyncWork || Nodes.forEach(updateLayoutIfChanged);
       }
       rAF(layoutOnAnimationFrame);
     };
-    updateLayoutIfChanged2 = updateLayoutIfChanged, layoutOnAnimationFrame2 = layoutOnAnimationFrame, avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map(), lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2, (0, import_web.___onDidFinishClientRender)(function() {
+    layoutOnAnimationFrame2 = layoutOnAnimationFrame, avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map(), lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2, (0, import_web.___onDidFinishClientRender)(function() {
       avoidUpdates = !1, queuedUpdates && (queuedUpdates.forEach(function(cb) {
         return cb();
       }), queuedUpdates.clear());
-    }), rAF(layoutOnAnimationFrame);
+    });
+    async function updateLayoutIfChanged(node) {
+      var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
+      if (typeof onLayout == "function") {
+        var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
+        if (!cachedRect || // has changed one rect
+        !(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect)))
+          if (NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect), avoidUpdates) {
+            var event = getElementLayoutEvent(node);
+            queuedUpdates.set(node, function() {
+              return onLayout(event);
+            });
+          } else if (strategy === "async") {
+            var now = Date.now();
+            LastChangeTime.set(node, now);
+            var existingTimer = DebounceTimers.get(node);
+            existingTimer && clearTimeout(existingTimer);
+            var timer = setTimeout(async function() {
+              var lastChange = LastChangeTime.get(node) || 0, timeSinceChange = Date.now() - lastChange;
+              if (timeSinceChange >= DEBOUNCE_DELAY) {
+                var event2 = await getElementLayoutEventAsync(node);
+                onLayout(event2), DebounceTimers.delete(node);
+              } else {
+                var remainingDelay = DEBOUNCE_DELAY - timeSinceChange, newTimer = setTimeout(async function() {
+                  var event3 = await getElementLayoutEventAsync(node);
+                  onLayout(event3), DebounceTimers.delete(node);
+                }, remainingDelay);
+                DebounceTimers.set(node, newTimer);
+              }
+            }, DEBOUNCE_DELAY);
+            DebounceTimers.set(node, timer);
+          } else {
+            var event1 = getElementLayoutEvent(node);
+            onLayout(event1);
+          }
+      }
+    }
+    rAF(layoutOnAnimationFrame);
   } else
     process.env.NODE_ENV === "development" && console.warn("No requestAnimationFrame - please polyfill for onLayout to work correctly");
-var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, updateLayoutIfChanged2, layoutOnAnimationFrame2, getElementLayoutEvent = function(target) {
+var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, layoutOnAnimationFrame2, getElementLayoutEvent = function(target) {
   var res = null;
   if (measureLayout(target, null, function(x, y, width, height, left, top) {
     res = {
@@ -12415,6 +12439,38 @@ var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, update
       callback(x, y, width, height, left, top);
     }
   }
+}, getElementLayoutEventAsync = async function(target) {
+  var res = null;
+  if (await measureLayoutAsync(target, null, function(x, y, width, height, left, top) {
+    res = {
+      nativeEvent: {
+        layout: {
+          x,
+          y,
+          width,
+          height,
+          left,
+          top
+        },
+        target
+      },
+      timeStamp: Date.now()
+    };
+  }), !res)
+    throw new Error("\u203C\uFE0F");
+  return res;
+}, measureLayoutAsync = async function(node, relativeTo, callback) {
+  var relativeNode = relativeTo || (node == null ? void 0 : node.parentElement);
+  if (relativeNode instanceof HTMLElement) {
+    var [nodeDim, relativeNodeDim] = await Promise.all([
+      node.getBoundingClientRect(),
+      relativeNode.getBoundingClientRect()
+    ]);
+    if (relativeNodeDim && nodeDim) {
+      var { x, y, width, height, left, top } = getRelativeDimensions(nodeDim, relativeNodeDim);
+      callback(x, y, width, height, left, top);
+    }
+  }
 }, getRelativeDimensions = function(a, b) {
   var { height, left, top, width } = a, x = left - b.left, y = top - b.top;
   return {