@idealyst/components 1.2.34 → 1.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.34",
+  "version": "1.2.35",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.34",
+    "@idealyst/theme": "^1.2.35",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -106,7 +106,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.34",
+    "@idealyst/theme": "^1.2.35",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/hooks/useWebLayout/index.ts

@@ -1 +1 @@
-export { useWebLayout } from './useWebLayout';
+export { useWebLayout } from './useWebLayout.web';

package/src/hooks/useWebLayout/useWebLayout.web.ts

@@ -12,41 +12,36 @@ export function useWebLayout<T extends HTMLElement = HTMLElement>(
   onLayout: ((event: LayoutChangeEvent) => void) | undefined
 ) {
   const ref = useRef<T>(null);
+  // Store callback in a ref to avoid re-running effect when callback identity changes
+  const onLayoutRef = useRef(onLayout);
+  onLayoutRef.current = onLayout;
 
   useEffect(() => {
-    if (!onLayout || !ref.current) return;
+    if (!ref.current) return;
 
     const element = ref.current;
 
-    // Call immediately with initial layout
-    const rect = element.getBoundingClientRect();
-    onLayout({
-      nativeEvent: {
-        layout: {
-          x: rect.left,
-          y: rect.top,
-          width: rect.width,
-          height: rect.height,
+    const fireLayoutEvent = () => {
+      if (!onLayoutRef.current) return;
+      const rect = element.getBoundingClientRect();
+      onLayoutRef.current({
+        nativeEvent: {
+          layout: {
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
+          },
         },
-      },
-    } as LayoutChangeEvent);
+      } as LayoutChangeEvent);
+    };
+
+    // Call immediately with initial layout
+    fireLayoutEvent();
 
     // Set up ResizeObserver for subsequent changes
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        const boundingRect = element.getBoundingClientRect();
-        onLayout({
-          nativeEvent: {
-            layout: {
-              x: boundingRect.left,
-              y: boundingRect.top,
-              width,
-              height,
-            },
-          },
-        } as LayoutChangeEvent);
-      }
+    const resizeObserver = new ResizeObserver(() => {
+      fireLayoutEvent();
     });
 
     resizeObserver.observe(element);
@@ -54,7 +49,7 @@ export function useWebLayout<T extends HTMLElement = HTMLElement>(
     return () => {
       resizeObserver.disconnect();
     };
-  }, [onLayout]);
+  }, []);
 
   return ref;
 }