@idealyst/components 1.2.135 → 1.2.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.135",
+  "version": "1.2.136",
   "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.135",
+    "@idealyst/theme": "^1.2.136",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -111,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.135",
-    "@idealyst/tooling": "^1.2.135",
+    "@idealyst/theme": "^1.2.136",
+    "@idealyst/tooling": "^1.2.136",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/internal/PositionedPortal.tsx

@@ -160,16 +160,16 @@ export const PositionedPortal: React.FC<PositionedPortalProps> = ({
   const [position, setPosition] = useState<Position>({ top: 0, left: 0 });
   const [isPositioned, setIsPositioned] = useState(false);
 
-  // Calculate position
+  // Calculate position from current DOM measurements
   const updatePosition = useCallback(() => {
-    if (!contentRef.current || !anchor.current) {
-      return;
-    }
+    if (!contentRef.current || !anchor.current) return;
 
     const anchorRect = anchor.current.getBoundingClientRect();
     const contentRect = contentRef.current.getBoundingClientRect();
 
-    // Use actual measured size from the DOM
+    // Skip if content hasn't laid out yet
+    if (contentRect.width === 0 && contentRect.height === 0) return;
+
     const newPosition = calculatePosition(
       anchorRect,
       { width: contentRect.width, height: contentRect.height },
@@ -182,14 +182,26 @@ export const PositionedPortal: React.FC<PositionedPortalProps> = ({
     setIsPositioned(true);
   }, [anchor, placement, offset, matchWidth]);
 
-  // Position after DOM is ready
+  // Observe content size changes so we re-position once children lay out
+  useEffect(() => {
+    if (!open || !contentRef.current) return;
+
+    const observer = new ResizeObserver(() => {
+      updatePosition();
+    });
+    observer.observe(contentRef.current);
+
+    return () => observer.disconnect();
+  }, [open, updatePosition]);
+
+  // Initial positioning after portal mounts
   useLayoutEffect(() => {
     if (open) {
-      // Use requestAnimationFrame to ensure ref is attached and layout is complete
+      // Double-rAF to ensure portal content is in the DOM and laid out
       const rafId = requestAnimationFrame(() => {
-        if (contentRef.current && anchor.current) {
+        requestAnimationFrame(() => {
           updatePosition();
-        }
+        });
       });
       return () => cancelAnimationFrame(rafId);
     } else {
@@ -197,12 +209,10 @@ export const PositionedPortal: React.FC<PositionedPortalProps> = ({
     }
   }, [open, updatePosition]);
 
-  // Update position on scroll/resize
+  // Re-position on scroll/resize
   useEffect(() => {
     if (!open) return;
 
-    updatePosition();
-
     const handleUpdate = () => updatePosition();
     window.addEventListener('resize', handleUpdate);
     window.addEventListener('scroll', handleUpdate, true);