@expofp/ui 3.35.0 → 3.35.2

package/dist/components/Overlay/Overlay.js

@@ -52,6 +52,15 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
     const overlayPanelRef = useRef(null);
     const scrollRef = useRef(null);
     const openedAtRef = useRef(undefined);
+    // The scroll container is published to descendants through context, and context is read during
+    // render — where a ref is still null on the render that mounts the element. Held as state as
+    // well, written from the ref callback: that write lands in the mount commit, so consumers see the
+    // element as soon as it exists rather than on whichever later render happens to come by.
+    const [scrollElement, setScrollElement] = useState(null);
+    const attachScroll = useCallback((node) => {
+        scrollRef.current = node;
+        setScrollElement(node);
+    }, []);
     // The snap point the sheet actually sits on. The prop may be undefined
     // before the host has chosen one, and a drag needs a value to start from.
     const [currentSnap, setCurrentSnap] = useState(size);
@@ -164,26 +173,35 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
             setShouldRender(true);
             setIsAnimating(true);
             openedAtRef.current = performance.now();
-            const timer = setTimeout(() => {
-                setSize(sizeRef.current);
-                setIsAnimating(false);
-            }, 10);
-            return () => clearTimeout(timer);
+            return;
         }
-        else {
-            setIsAnimating(true);
-            openedAtRef.current = undefined;
-            if (mobile) {
-                setCollapsed(true);
-            }
-            const timer = setTimeout(() => {
-                setShouldRender(false);
-                setIsAnimating(false);
-                setIsScrolled(false);
-            }, parseFloat(TRANSITION_DURATION) * 1000);
-            return () => clearTimeout(timer);
+        setIsAnimating(true);
+        openedAtRef.current = undefined;
+        if (mobile) {
+            setCollapsed(true);
         }
-    }, [open, setSize, mobile]);
+        const timer = setTimeout(() => {
+            setShouldRender(false);
+            setIsAnimating(false);
+            setIsScrolled(false);
+        }, parseFloat(TRANSITION_DURATION) * 1000);
+        return () => clearTimeout(timer);
+    }, [open, mobile]);
+    // The step after the mount: the sheet mounts at zero height and takes its size a tick later, so
+    // the height transition has a frame to start from. Keyed on `shouldRender` rather than run from
+    // the effect above, which fires on the render that only *asked* for the mount and returned null:
+    // a timer started there raced the mount render, and when it won, React batched the size flip
+    // into the mount itself — no transition, and no second render for anything the mount render
+    // could not yet know.
+    useEffect(() => {
+        if (!open || !shouldRender)
+            return;
+        const timer = setTimeout(() => {
+            setSize(sizeRef.current);
+            setIsAnimating(false);
+        }, 10);
+        return () => clearTimeout(timer);
+    }, [open, shouldRender, setSize]);
     // Host-driven size changes (details open at full, the planner at medium).
     // The sheet's own reports come back through here too, already applied.
     useEffect(() => {
@@ -198,7 +216,7 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
     }, [open, isAnimating, onScrollStateChange, scrollResetKey]);
     if (!shouldRender)
         return null;
-    return (_jsx(OverlayScrollContext, { value: scrollRef.current, children: _jsxs("div", { className: cn('efp-overlay', {
+    return (_jsx(OverlayScrollContext, { value: scrollElement, children: _jsxs("div", { className: cn('efp-overlay', {
                 'efp-overlay--draggable': dragging,
                 'efp-overlay--keyboard': mobile && keyboardInset > 0,
                 'efp-overlay--full': currentSnap === 'full',
@@ -207,7 +225,7 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
                 'efp-overlay--hidden': !mobile && !open,
                 'efp-overlay--scrolled': isScrolled,
                 'efp-overlay--forced-full': forceFull && mobile,
-            }, className), style: positioningStyles, ref: overlayPanelRef, onPointerDown: onPointerDown, children: [!disableDrag && _jsx("div", { className: "efp-overlay__draghandle", "data-sheet-handle": true }), _jsxs("div", { className: "efp-overlay__scroll", ref: scrollRef, onScroll: () => {
+            }, className), style: positioningStyles, ref: overlayPanelRef, onPointerDown: onPointerDown, children: [!disableDrag && _jsx("div", { className: "efp-overlay__draghandle", "data-sheet-handle": true }), _jsxs("div", { className: "efp-overlay__scroll", ref: attachScroll, onScroll: () => {
                         handleScroll();
                         debouncedScrollActivity();
                     }, children: [particles, _jsx("div", { className: "efp-overlay__content", children: children ? children : noContentLabel })] })] }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/ui",
-  "version": "3.35.0",
+  "version": "3.35.2",
   "type": "module",
   "description": "ExpoFP SDK internal: shared pure React UI components",
   "homepage": "https://developer.expofp.com/",