@tamagui/core 1.126.17 → 1.127.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.126.17",
+  "version": "1.127.0",
   "source": "src/index.tsx",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -35,14 +35,14 @@
     "native-test.d.ts"
   ],
   "dependencies": {
-    "@tamagui/react-native-media-driver": "1.126.17",
-    "@tamagui/react-native-use-pressable": "1.126.17",
-    "@tamagui/react-native-use-responder-events": "1.126.17",
-    "@tamagui/use-event": "1.126.17",
-    "@tamagui/web": "1.126.17"
+    "@tamagui/react-native-media-driver": "1.127.0",
+    "@tamagui/react-native-use-pressable": "1.127.0",
+    "@tamagui/react-native-use-responder-events": "1.127.0",
+    "@tamagui/use-event": "1.127.0",
+    "@tamagui/web": "1.127.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.126.17",
+    "@tamagui/build": "1.127.0",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "typescript": "^5.8.2",

package/src/helpers/getBoundingClientRect.tsx

@@ -2,3 +2,29 @@ export const getBoundingClientRect = (node: HTMLElement | null): undefined | DOM
   if (!node || node.nodeType !== 1) return
   return node.getBoundingClientRect?.()
 }
+
+export const getBoundingClientRectAsync = (
+  element: HTMLElement
+): Promise<DOMRectReadOnly | undefined> => {
+  return new Promise((resolve) => {
+    let didFallback = false
+    function fallbackToSync() {
+      didFallback = true
+      resolve(getBoundingClientRect(element))
+    }
+    const tm = setTimeout(fallbackToSync, 32)
+    const observer = new IntersectionObserver(
+      (entries, ob) => {
+        clearTimeout(tm)
+        ob.disconnect()
+        if (!didFallback) {
+          resolve(entries[0]?.boundingClientRect)
+        }
+      },
+      {
+        threshold: 0.0001,
+      }
+    )
+    observer.observe(element)
+  })
+}

package/src/hooks/useElementLayout.tsx

@@ -9,11 +9,12 @@ import type { RefObject } from 'react'
 const LayoutHandlers = new WeakMap<HTMLElement, Function>()
 const Nodes = new Set<HTMLElement>()
 
-type LayoutMeasurementStatus = 'inactive' | 'active'
+type LayoutMeasurementStrategy = 'off' | 'sync' | 'async'
 
-let status: LayoutMeasurementStatus = 'active'
-export function setOnLayoutStrategy(state: LayoutMeasurementStatus) {
-  status = state
+let strategy: LayoutMeasurementStrategy = 'async'
+
+export function setOnLayoutStrategy(state: LayoutMeasurementStrategy) {
+  strategy = state
 }
 
 export type LayoutValue = {
@@ -35,8 +36,11 @@ export type LayoutEvent = {
 
 const NodeRectCache = new WeakMap<HTMLElement, DOMRect>()
 const ParentRectCache = new WeakMap<HTMLElement, DOMRect>()
+const DebounceTimers = new WeakMap<HTMLElement, NodeJS.Timeout>()
+const LastChangeTime = new WeakMap<HTMLElement, number>()
 
 const rAF = typeof window !== 'undefined' ? window.requestAnimationFrame : undefined
+const DEBOUNCE_DELAY = 32 // 32ms debounce (2 frames at 60fps)
 
 if (isClient) {
   if (rAF) {
@@ -56,7 +60,7 @@ if (isClient) {
       }
     })
 
-    function updateLayoutIfChanged(node: HTMLElement) {
+    async function updateLayoutIfChanged(node: HTMLElement) {
       const nodeRect = node.getBoundingClientRect()
       const parentNode = node.parentElement
       const parentRect = parentNode?.getBoundingClientRect()
@@ -77,10 +81,48 @@ if (isClient) {
         if (parentRect && parentNode) {
           ParentRectCache.set(parentNode, parentRect)
         }
-        const event = getElementLayoutEvent(node)
+
         if (avoidUpdates) {
+          // Use sync version for queued updates to avoid promise complications
+          const event = getElementLayoutEvent(node)
           queuedUpdates.set(node, () => onLayout(event))
+        } else if (strategy === 'async') {
+          // For async strategy, debounce the layout update
+          const now = Date.now()
+          LastChangeTime.set(node, now)
+
+          // Clear existing debounce timer
+          const existingTimer = DebounceTimers.get(node)
+          if (existingTimer) {
+            clearTimeout(existingTimer)
+          }
+
+          // Set new debounce timer
+          const timer = setTimeout(async () => {
+            const lastChange = LastChangeTime.get(node) || 0
+            const timeSinceChange = Date.now() - lastChange
+
+            // Only fire if at least DEBOUNCE_DELAY has passed since last change
+            if (timeSinceChange >= DEBOUNCE_DELAY) {
+              const event = await getElementLayoutEventAsync(node)
+              onLayout(event)
+              DebounceTimers.delete(node)
+            } else {
+              // Reschedule if not enough time has passed
+              const remainingDelay = DEBOUNCE_DELAY - timeSinceChange
+              const newTimer = setTimeout(async () => {
+                const event = await getElementLayoutEventAsync(node)
+                onLayout(event)
+                DebounceTimers.delete(node)
+              }, remainingDelay)
+              DebounceTimers.set(node, newTimer)
+            }
+          }, DEBOUNCE_DELAY)
+
+          DebounceTimers.set(node, timer)
         } else {
+          // Sync strategy - use sync version
+          const event = getElementLayoutEvent(node)
           onLayout(event)
         }
       }
@@ -93,7 +135,7 @@ if (isClient) {
       const timeSinceLastFrame = now - lastFrameAt
       lastFrameAt = now
 
-      if (status !== 'inactive') {
+      if (strategy !== 'off') {
         // avoid updates if we've been dropping frames (indicates sync work happening)
         const expectedFrameTime = 16.67 // ~60fps
         const hasRecentSyncWork =
@@ -114,6 +156,7 @@ if (isClient) {
   }
 }
 
+// Sync versions
 export const getElementLayoutEvent = (target: HTMLElement): LayoutEvent => {
   let res: LayoutEvent | null = null
   measureLayout(target, null, (x, y, width, height, left, top) => {
@@ -131,7 +174,6 @@ export const getElementLayoutEvent = (target: HTMLElement): LayoutEvent => {
   return res
 }
 
-// matching old RN callback API (can we remove?)
 export const measureLayout = (
   node: HTMLElement,
   relativeTo: HTMLElement | null,
@@ -148,6 +190,55 @@ export const measureLayout = (
   if (relativeNode instanceof HTMLElement) {
     const nodeDim = node.getBoundingClientRect()
     const relativeNodeDim = relativeNode.getBoundingClientRect()
+
+    if (relativeNodeDim && nodeDim) {
+      const { x, y, width, height, left, top } = getRelativeDimensions(
+        nodeDim,
+        relativeNodeDim
+      )
+      callback(x, y, width, height, left, top)
+    }
+  }
+}
+
+export const getElementLayoutEventAsync = async (
+  target: HTMLElement
+): Promise<LayoutEvent> => {
+  let res: LayoutEvent | null = null
+  await measureLayoutAsync(target, null, (x, y, width, height, left, top) => {
+    res = {
+      nativeEvent: {
+        layout: { x, y, width, height, left, top },
+        target,
+      },
+      timeStamp: Date.now(),
+    }
+  })
+  if (!res) {
+    throw new Error(`‼️`) // impossible
+  }
+  return res
+}
+
+export const measureLayoutAsync = async (
+  node: HTMLElement,
+  relativeTo: HTMLElement | null,
+  callback: (
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    left: number,
+    top: number
+  ) => void
+) => {
+  const relativeNode = relativeTo || node?.parentElement
+  if (relativeNode instanceof HTMLElement) {
+    const [nodeDim, relativeNodeDim] = await Promise.all([
+      node.getBoundingClientRect(),
+      relativeNode.getBoundingClientRect(),
+    ])
+
     if (relativeNodeDim && nodeDim) {
       const { x, y, width, height, left, top } = getRelativeDimensions(
         nodeDim,
@@ -188,6 +279,14 @@ export function useElementLayout(
       Nodes.delete(node)
       LayoutHandlers.delete(node)
       NodeRectCache.delete(node)
+
+      // Clean up debounce timer and tracking
+      const timer = DebounceTimers.get(node)
+      if (timer) {
+        clearTimeout(timer)
+        DebounceTimers.delete(node)
+      }
+      LastChangeTime.delete(node)
     }
   }, [ref, !!onLayout])
 }

package/types/helpers/getBoundingClientRect.d.ts

@@ -1,2 +1,3 @@
 export declare const getBoundingClientRect: (node: HTMLElement | null) => undefined | DOMRect;
+export declare const getBoundingClientRectAsync: (element: HTMLElement) => Promise<DOMRectReadOnly | undefined>;
 //# sourceMappingURL=getBoundingClientRect.d.ts.map

package/types/helpers/getBoundingClientRect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getBoundingClientRect.d.ts","sourceRoot":"","sources":["../../src/helpers/getBoundingClientRect.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,GAAI,MAAM,WAAW,GAAG,IAAI,KAAG,SAAS,GAAG,OAG5E,CAAA"}
+{"version":3,"file":"getBoundingClientRect.d.ts","sourceRoot":"","sources":["../../src/helpers/getBoundingClientRect.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,GAAI,MAAM,WAAW,GAAG,IAAI,KAAG,SAAS,GAAG,OAG5E,CAAA;AAED,eAAO,MAAM,0BAA0B,GACrC,SAAS,WAAW,KACnB,OAAO,CAAC,eAAe,GAAG,SAAS,CAsBrC,CAAA"}

package/types/hooks/useElementLayout.d.ts

@@ -1,7 +1,7 @@
 import { type TamaguiComponentStateRef } from '@tamagui/web';
 import type { RefObject } from 'react';
-type LayoutMeasurementStatus = 'inactive' | 'active';
-export declare function setOnLayoutStrategy(state: LayoutMeasurementStatus): void;
+type LayoutMeasurementStrategy = 'off' | 'sync' | 'async';
+export declare function setOnLayoutStrategy(state: LayoutMeasurementStrategy): void;
 export type LayoutValue = {
     x: number;
     y: number;
@@ -19,6 +19,8 @@ export type LayoutEvent = {
 };
 export declare const getElementLayoutEvent: (target: HTMLElement) => LayoutEvent;
 export declare const measureLayout: (node: HTMLElement, relativeTo: HTMLElement | null, callback: (x: number, y: number, width: number, height: number, left: number, top: number) => void) => void;
+export declare const getElementLayoutEventAsync: (target: HTMLElement) => Promise<LayoutEvent>;
+export declare const measureLayoutAsync: (node: HTMLElement, relativeTo: HTMLElement | null, callback: (x: number, y: number, width: number, height: number, left: number, top: number) => void) => Promise<void>;
 export declare function useElementLayout(ref: RefObject<TamaguiComponentStateRef>, onLayout?: ((e: LayoutEvent) => void) | null): void;
 export {};
 //# sourceMappingURL=useElementLayout.d.ts.map

package/types/hooks/useElementLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useElementLayout.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementLayout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,KAAK,uBAAuB,GAAG,UAAU,GAAG,QAAQ,CAAA;AAGpD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,uBAAuB,QAEjE;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE;QACX,MAAM,EAAE,WAAW,CAAA;QACnB,MAAM,EAAE,GAAG,CAAA;KACZ,CAAA;IACD,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAmFD,eAAO,MAAM,qBAAqB,GAAI,QAAQ,WAAW,KAAG,WAe3D,CAAA;AAGD,eAAO,MAAM,aAAa,GACxB,MAAM,WAAW,EACjB,YAAY,WAAW,GAAG,IAAI,EAC9B,UAAU,CACR,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,KACR,IAAI,SAcV,CAAA;AASD,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,SAAS,CAAC,wBAAwB,CAAC,EACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,IAAI,QAuB7C"}
+{"version":3,"file":"useElementLayout.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementLayout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,KAAK,yBAAyB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;AAIzD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,yBAAyB,QAEnE;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE;QACX,MAAM,EAAE,WAAW,CAAA;QACnB,MAAM,EAAE,GAAG,CAAA;KACZ,CAAA;IACD,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AA6HD,eAAO,MAAM,qBAAqB,GAAI,QAAQ,WAAW,KAAG,WAe3D,CAAA;AAED,eAAO,MAAM,aAAa,GACxB,MAAM,WAAW,EACjB,YAAY,WAAW,GAAG,IAAI,EAC9B,UAAU,CACR,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,KACR,IAAI,SAeV,CAAA;AAED,eAAO,MAAM,0BAA0B,GACrC,QAAQ,WAAW,KAClB,OAAO,CAAC,WAAW,CAerB,CAAA;AAED,eAAO,MAAM,kBAAkB,GAC7B,MAAM,WAAW,EACjB,YAAY,WAAW,GAAG,IAAI,EAC9B,UAAU,CACR,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,KACR,IAAI,kBAiBV,CAAA;AASD,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,SAAS,CAAC,wBAAwB,CAAC,EACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,IAAI,QA+B7C"}