@tamagui/core 1.92.0 → 1.93.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.92.0",
+  "version": "1.93.0",
   "source": "src/index.tsx",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -35,16 +35,16 @@
     "native-test.d.ts"
   ],
   "dependencies": {
-    "@tamagui/react-native-use-pressable": "1.92.0",
-    "@tamagui/react-native-use-responder-events": "1.92.0",
-    "@tamagui/use-event": "1.92.0",
-    "@tamagui/web": "1.92.0"
+    "@tamagui/react-native-use-pressable": "1.93.0",
+    "@tamagui/react-native-use-responder-events": "1.93.0",
+    "@tamagui/use-event": "1.93.0",
+    "@tamagui/web": "1.93.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.92.0",
+    "@tamagui/build": "1.93.0",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/reset.css

@@ -4,6 +4,7 @@ body, #root, #__next {
   flex-direction: column;
   min-height: 100vh;
   min-width: calc(100vw - (100vw - 100%)); /* reserve space for scrollbar */
+  margin: 0;
 }
 
 * {

package/src/hooks/useElementLayout.tsx

@@ -1,9 +1,9 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import type { RefObject } from 'react'
+import { type RefObject } from 'react'
 import { getBoundingClientRect } from '../helpers/getBoundingClientRect'
 
 const LayoutHandlers = new WeakMap<Element, Function>()
-const LayoutTimeouts = new WeakMap<Element, any>()
+const resizeListeners = new Set<Function>()
 
 export type LayoutValue = {
   x: number
@@ -25,21 +25,41 @@ export type LayoutEvent = {
 let resizeObserver: ResizeObserver | null = null
 
 if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
+  // node resize/move
   resizeObserver = new ResizeObserver((entries) => {
     for (const { target } of entries) {
       const onLayout = LayoutHandlers.get(target)
       if (typeof onLayout !== 'function') return
-      measureLayout(target as HTMLElement, null, (x, y, width, height, left, top) => {
-        onLayout({
-          nativeEvent: {
-            layout: { x, y, width, height, left, top },
-            target,
-          },
-          timeStamp: Date.now(),
-        })
+      measureElement(target as HTMLElement).then((event) => {
+        onLayout(event)
       })
     }
   })
+
+  // window resize
+  if (typeof window.addEventListener === 'function') {
+    let tm
+    window.addEventListener('resize', () => {
+      clearTimeout(tm)
+      tm = setTimeout(() => {
+        resizeListeners.forEach((cb) => cb())
+      }, 4)
+    })
+  }
+}
+
+export const measureElement = async (target: HTMLElement): Promise<LayoutEvent> => {
+  return new Promise((res) => {
+    measureLayout(target, null, (x, y, width, height, left, top) => {
+      res({
+        nativeEvent: {
+          layout: { x, y, width, height, left, top },
+          target,
+        },
+        timeStamp: Date.now(),
+      })
+    })
+  })
 }
 
 const cache = new WeakMap()
@@ -108,14 +128,27 @@ export function useElementLayout(
   ref: RefObject<Element>,
   onLayout?: ((e: LayoutEvent) => void) | null
 ) {
+  // two effects because expensive to re-run on every change of onLayout
   useIsomorphicLayoutEffect(() => {
-    if (!resizeObserver || !onLayout) return
+    if (!onLayout) return
     const node = ref.current
     if (!node) return
     LayoutHandlers.set(node, onLayout)
+  }, [ref, onLayout])
+
+  useIsomorphicLayoutEffect(() => {
+    if (!resizeObserver) return
+    const node = ref.current
+    if (!node) return
+    if (!LayoutHandlers.has(node)) return
+    const onResize = () => {
+      measureElement(node as HTMLElement).then(onLayout)
+    }
+    resizeListeners.add(onResize)
     resizeObserver.observe(node)
     return () => {
+      resizeListeners.delete(onResize)
       resizeObserver?.unobserve(node)
     }
-  }, [ref, onLayout])
+  }, [ref])
 }

package/types/hooks/useElementLayout.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from 'react';
+import { type RefObject } from 'react';
 export type LayoutValue = {
     x: number;
     y: number;
@@ -14,6 +14,7 @@ export type LayoutEvent = {
     };
     timeStamp: number;
 };
+export declare const measureElement: (target: HTMLElement) => Promise<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 function useElementLayout(ref: RefObject<Element>, onLayout?: ((e: LayoutEvent) => void) | null): void;
 //# 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,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,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;AAwBD,eAAO,MAAM,aAAa,SAClB,WAAW,cACL,WAAW,GAAG,IAAI,gBAEzB,MAAM,KACN,MAAM,SACF,MAAM,UACL,MAAM,QACR,MAAM,OACP,MAAM,KACR,IAAI,SAmBV,CAAA;AA+BD,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,EACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,IAAI,QAY7C"}
+{"version":3,"file":"useElementLayout.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementLayout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,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;AA4BD,eAAO,MAAM,cAAc,WAAkB,WAAW,KAAG,QAAQ,WAAW,CAY7E,CAAA;AAID,eAAO,MAAM,aAAa,SAClB,WAAW,cACL,WAAW,GAAG,IAAI,gBAEzB,MAAM,KACN,MAAM,SACF,MAAM,UACL,MAAM,QACR,MAAM,OACP,MAAM,KACR,IAAI,SAmBV,CAAA;AA+BD,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,EACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,IAAI,QAyB7C"}