@expofp/ui 3.45.1 → 3.45.2

package/dist/components/Autocomplete/Autocomplete.js

@@ -5,6 +5,7 @@ import { lazy, Suspense, useContext, useEffect, useId, useMemo, useRef, useState
 import { createPortal } from 'react-dom';
 import { ResizeObserver } from 'resize-observer';
 import useOnClickOutside from '../../shared/hooks/useOnClickOutside';
+import { OverlayKeyboardInsetContext } from '../Overlay/OverlayKeyboardInsetContext';
 import { OverlayScrollContext } from '../Overlay/OverlayScrollContext';
 const DROPDOWN_GAP = 4;
 /** Below this the list is useless, so it is allowed to overflow the visible area. */
@@ -15,6 +16,7 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
     const container = renderTarget;
     // The scrollable body of the sheet the inline list must stay inside of.
     const scrollContainer = useContext(OverlayScrollContext);
+    const keyboardInset = useContext(OverlayKeyboardInsetContext);
     const refAutocomplete = useRef(null);
     const refSearchInput = useRef(null);
     const refOptions = useRef(null);
@@ -87,10 +89,11 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
             viewport?.removeEventListener('scroll', updateDropdownPosition);
         };
     }, [showOptionsDropdown, inline]);
-    // The inline list ends where the sheet's scroll body does. Left to overflow,
-    // it would extend that body and the tail could only be reached by scrolling
-    // the sheet, then the list. Both rects come from the same layout, so the
-    // keyboard panning the viewport does not skew the difference.
+    // The inline list ends where the sheet's scroll body does, or at the keyboard
+    // when that body runs on under one. Left to overflow, it would extend that
+    // body and the tail could only be reached by scrolling the sheet, then the
+    // list. Both rects come from the same layout, so the keyboard panning the
+    // viewport does not skew the difference.
     useEffect(() => {
         if (!inline || !showOptionsDropdown || !scrollContainer) {
             setInlineMaxHeight(null);
@@ -101,6 +104,7 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
             if (!anchor)
                 return;
             const room = scrollContainer.getBoundingClientRect().bottom -
+                keyboardInset -
                 anchor.getBoundingClientRect().bottom -
                 DROPDOWN_GAP;
             setInlineMaxHeight(Math.max(room, DROPDOWN_MIN_HEIGHT));
@@ -110,7 +114,7 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
         const observer = new ResizeObserver(measure);
         observer.observe(scrollContainer);
         return () => observer.disconnect();
-    }, [inline, showOptionsDropdown, scrollContainer]);
+    }, [inline, showOptionsDropdown, scrollContainer, keyboardInset]);
     useEffect(() => {
         if (focusOptionIndex === null)
             return;

package/dist/components/Overlay/Overlay.js

@@ -7,6 +7,7 @@ import { useKeyboardInset } from '../../shared/hooks/useKeyboardInset';
 import { useSheetDrag } from '../../shared/hooks/useSheetDrag';
 import { useWindowSize } from '../../shared/hooks/useWindowSize';
 import { OverlayHeaderContext } from './OverlayHeaderContext';
+import { OverlayKeyboardInsetContext } from './OverlayKeyboardInsetContext';
 import { OverlayScrollContext } from './OverlayScrollContext';
 const TRANSITION_DURATION = '0.3s';
 const DEFAULT_SCROLL_THRESHOLD = 10;
@@ -29,10 +30,10 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
     const mobile = windowWidth <= mobileBreakpoint;
     const sizes = useMemo(() => generateSizes(windowHeight, smallSizeMultiplier, mediumSizeMultiplier, fullSizeOffset), [windowHeight, smallSizeMultiplier, mediumSizeMultiplier, fullSizeOffset]);
     // The on-screen keyboard covers the sheet without resizing the window (#1567):
-    // lift the sheet above it and give up the height the keyboard took.
+    // give up the height the keyboard took, and let the content scroll clear of it.
     const keyboardInset = useKeyboardInset(mobile);
-    // What the sheet can actually occupy right now. Snap points and rendered
-    // heights must come from the same numbers, or a drag lands where the sheet is not.
+    // What the sheet can show right now. Snap points and visible heights must
+    // come from the same numbers, or a drag lands where the sheet is not.
     const effectiveSizes = useMemo(() => {
         if (keyboardInset <= 0)
             return sizes;
@@ -87,24 +88,24 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
     }, []);
     const positioningStyles = useMemo(() => {
         if (mobile) {
-            const lift = keyboardInset > 0 ? { bottom: keyboardInset } : {};
+            // The sheet stays on the bottom edge and runs on under the keyboard. A
+            // sheet lifted whole leaves the page showing below it, through the
+            // translucent bars iOS 26 floats there (#1712).
+            const sheet = (visible) => ({ height: visible + keyboardInset });
             if (forceFull && open) {
                 // Covers the screen: `fullSizeOffset` keeps room for the search box above a
                 // regular sheet, and a forced-full one is drawn over it (#1713). Only the
-                // keyboard takes height away, never below the smallest snap point.
-                return {
-                    ...lift,
-                    height: Math.max(getActualViewportHeight() - keyboardInset, sizes.small),
-                };
+                // keyboard takes visible height away, never below the smallest snap point.
+                return sheet(Math.max(getActualViewportHeight() - keyboardInset, sizes.small));
             }
             // A gesture freezes the sheet at its tallest point and moves it with
-            // `translate3d`, keeping the drag off the layout path. The lift stays on.
+            // `translate3d`, keeping the drag off the layout path.
             if (dragging)
-                return { ...lift, height: effectiveSizes.full };
-            return {
-                ...lift,
-                height: (open || isAnimating) && !collapsed ? effectiveSizes[currentSnap] : 0,
-            };
+                return sheet(effectiveSizes.full);
+            // Closed, it takes no room at all, the part under the keyboard included.
+            if (collapsed || !(open || isAnimating))
+                return { height: 0 };
+            return sheet(effectiveSizes[currentSnap]);
         }
         return {
             height: open ? 'auto' : undefined,
@@ -121,6 +122,12 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
         effectiveSizes,
         keyboardInset,
     ]);
+    // The content runs on under the keyboard with the sheet (#1712). The padding
+    // is the covered part: with it the end of the content scrolls clear of the
+    // keyboard, and what the browser scrolls into view lands above it.
+    const scrollStyles = useMemo(() => mobile && keyboardInset > 0
+        ? { paddingBottom: keyboardInset, scrollPaddingBottom: keyboardInset }
+        : undefined, [mobile, keyboardInset]);
     const snapPoints = useMemo(() => [
         { name: 'small', height: effectiveSizes.small },
         { name: 'medium', height: effectiveSizes.medium },
@@ -235,9 +242,9 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
                 'efp-overlay--scrolled': isScrolled,
                 'efp-overlay--forced-full': forceFull && mobile,
                 'efp-overlay--button-inset': mobile && withFloatingButton,
-            }, className), style: positioningStyles, ref: overlayPanelRef, onPointerDown: onPointerDown, children: [!disableDrag && _jsx("div", { className: "efp-overlay__draghandle", "data-sheet-handle": true }), _jsx("div", { className: "efp-overlay__header", ref: setHeaderElement }), _jsxs("div", { className: "efp-overlay__scroll", ref: attachScroll, onScroll: () => {
+            }, className), style: positioningStyles, ref: overlayPanelRef, onPointerDown: onPointerDown, children: [!disableDrag && _jsx("div", { className: "efp-overlay__draghandle", "data-sheet-handle": true }), _jsx("div", { className: "efp-overlay__header", ref: setHeaderElement }), _jsxs("div", { className: "efp-overlay__scroll", style: scrollStyles, ref: attachScroll, onScroll: () => {
                         handleScroll();
                         debouncedScrollActivity();
-                    }, children: [particles, _jsx("div", { className: "efp-overlay__content", children: _jsx(OverlayHeaderContext, { value: headerElement, children: children ? children : noContentLabel }) })] })] }) }));
+                    }, children: [particles, _jsx("div", { className: "efp-overlay__content", children: _jsx(OverlayHeaderContext, { value: headerElement, children: _jsx(OverlayKeyboardInsetContext, { value: mobile ? keyboardInset : 0, children: children ? children : noContentLabel }) }) })] })] }) }));
 };
 export default Overlay;

package/dist/components/Overlay/OverlayKeyboardInsetContext.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Height in px of the on-screen keyboard over the bottom of the overlay's scroll container, which
+ * runs on under it: whatever has to stay reachable must end that much above the container's
+ * bottom edge. Provided by {@link Overlay}; `0` with no keyboard, and outside an overlay.
+ */
+export declare const OverlayKeyboardInsetContext: import("react").Context<number>;
+//# sourceMappingURL=OverlayKeyboardInsetContext.d.ts.map

package/dist/components/Overlay/OverlayKeyboardInsetContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+/**
+ * Height in px of the on-screen keyboard over the bottom of the overlay's scroll container, which
+ * runs on under it: whatever has to stay reachable must end that much above the container's
+ * bottom edge. Provided by {@link Overlay}; `0` with no keyboard, and outside an overlay.
+ */
+export const OverlayKeyboardInsetContext = createContext(0);

package/package.json

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