@expofp/ui 3.29.0 → 3.31.0

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -11,11 +11,18 @@ export interface AutocompleteProps<T extends AutocompleteOptionObject = Autocomp
     showClear?: boolean;
     onChange?: (value: T | undefined) => void;
     renderTarget?: HTMLElement | null;
+    /**
+     * Anchor the option list to the input with CSS instead of portalling it and
+     * measuring where it should go. The bottom sheet wants this: while the
+     * on-screen keyboard pans the viewport, measured coordinates are stale by the
+     * time they are written (#1567).
+     */
+    inline?: boolean;
     noOptionsLabel: string;
     ariaLabel: string;
     clearLabel: string;
     getOptionKey?: (option: T) => string;
 }
-declare const Autocomplete: <T extends AutocompleteOptionObject = AutocompleteOptionObject>({ placeholder, options, value, showClear, onChange, renderTarget, noOptionsLabel, ariaLabel, clearLabel, getOptionKey, }: AutocompleteProps<T>) => React.JSX.Element;
+declare const Autocomplete: <T extends AutocompleteOptionObject = AutocompleteOptionObject>({ placeholder, options, value, showClear, onChange, renderTarget, inline, noOptionsLabel, ariaLabel, clearLabel, getOptionKey, }: AutocompleteProps<T>) => React.JSX.Element;
 export default Autocomplete;
 //# sourceMappingURL=Autocomplete.d.ts.map

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,11 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Autocomplete.scss';
 import classNames from 'classnames';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { ResizeObserver } from 'resize-observer';
 import useOnClickOutside from '../../shared/hooks/useOnClickOutside';
-const Autocomplete = ({ placeholder, options, value, showClear = false, onChange, renderTarget = document.body, noOptionsLabel, ariaLabel, clearLabel, getOptionKey = (option) => option.value, }) => {
+import { OverlayScrollContext } from '../Overlay/OverlayScrollContext';
+const DROPDOWN_GAP = 4;
+/** Below this the list is useless, so it is allowed to overflow the visible area. */
+const DROPDOWN_MIN_HEIGHT = 96;
+/** Share of the visible viewport the list may take (the SCSS counterpart of a `vh` cap). */
+const DROPDOWN_HEIGHT_RATIO = 0.45;
+const Autocomplete = ({ placeholder, options, value, showClear = false, onChange, renderTarget = document.body, inline = false, noOptionsLabel, ariaLabel, clearLabel, getOptionKey = (option) => option.value, }) => {
     const container = renderTarget;
+    // The scrollable body of the sheet the inline list must stay inside of.
+    const scrollContainer = useContext(OverlayScrollContext);
     const refAutocomplete = useRef(null);
     const refSearchInput = useRef(null);
     const refOptions = useRef(null);
@@ -19,7 +28,8 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
     const [searchText, setSearchText] = useState(null);
     const [focusOptionIndex, setFocusOptionIndex] = useState(null);
     const [showOptionsDropdown, setShowOptionsDropdown] = useState(false);
-    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+    const [inlineMaxHeight, setInlineMaxHeight] = useState(null);
+    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0, maxHeight: 0 });
     const activeOption = value ? findOptionByValue(value) : undefined;
     const activeOptionIndex = activeOption ? findOptionIndexByValue(activeOption) : null;
     const displayValue = searchText ?? (activeOption ? getOptionLabel(activeOption) : '');
@@ -30,26 +40,74 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
         return options.filter((option) => getOptionLabel(option).toLowerCase().includes(lower));
     }, [searchText, options]);
     const updateDropdownPosition = () => {
-        if (refAutocomplete.current && showOptionsDropdown) {
-            const rect = refAutocomplete.current.getBoundingClientRect();
-            setDropdownPosition({
-                top: rect.bottom + window.scrollY + 4,
-                left: rect.left + window.scrollX,
-                width: rect.width,
-            });
-        }
+        if (inline || !refAutocomplete.current || !showOptionsDropdown)
+            return;
+        const rect = refAutocomplete.current.getBoundingClientRect();
+        // The visible bounds, not the layout ones: the on-screen keyboard shrinks
+        // `visualViewport` while `innerHeight` stays put.
+        const viewport = typeof window.visualViewport !== 'undefined' ? window.visualViewport : null;
+        const visibleTop = viewport ? viewport.offsetTop : 0;
+        const visibleBottom = viewport ? viewport.offsetTop + viewport.height : window.innerHeight;
+        const spaceBelow = visibleBottom - rect.bottom - DROPDOWN_GAP;
+        const spaceAbove = rect.top - visibleTop - DROPDOWN_GAP;
+        // Flip up when the list does not fit below and above is roomier (#1567).
+        const desiredHeight = (visibleBottom - visibleTop) * DROPDOWN_HEIGHT_RATIO;
+        const openUp = spaceBelow < desiredHeight && spaceAbove > spaceBelow;
+        const space = Math.max(openUp ? spaceAbove : spaceBelow, DROPDOWN_MIN_HEIGHT);
+        const maxHeight = Math.min(desiredHeight, space);
+        // The dropdown is absolutely positioned inside the render target, so both
+        // edges are measured against it — never against the document.
+        const containerRect = container?.getBoundingClientRect();
+        const containerTop = containerRect?.top ?? 0;
+        setDropdownPosition({
+            ...(openUp
+                ? { bottom: (containerRect?.bottom ?? window.innerHeight) - rect.top + DROPDOWN_GAP }
+                : { top: rect.bottom - containerTop + DROPDOWN_GAP }),
+            left: rect.left - (containerRect?.left ?? 0),
+            width: rect.width,
+            maxHeight,
+        });
     };
     useEffect(() => {
-        if (!showOptionsDropdown)
+        if (inline || !showOptionsDropdown)
             return;
         updateDropdownPosition();
         window.addEventListener('scroll', updateDropdownPosition, true);
         window.addEventListener('resize', updateDropdownPosition);
+        const viewport = typeof window.visualViewport !== 'undefined' ? window.visualViewport : null;
+        viewport?.addEventListener('resize', updateDropdownPosition);
+        viewport?.addEventListener('scroll', updateDropdownPosition);
         return () => {
             window.removeEventListener('scroll', updateDropdownPosition, true);
             window.removeEventListener('resize', updateDropdownPosition);
+            viewport?.removeEventListener('resize', updateDropdownPosition);
+            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.
+    useEffect(() => {
+        if (!inline || !showOptionsDropdown || !scrollContainer) {
+            setInlineMaxHeight(null);
+            return;
+        }
+        const measure = () => {
+            const anchor = refAutocomplete.current;
+            if (!anchor)
+                return;
+            const room = scrollContainer.getBoundingClientRect().bottom -
+                anchor.getBoundingClientRect().bottom -
+                DROPDOWN_GAP;
+            setInlineMaxHeight(Math.max(room, DROPDOWN_MIN_HEIGHT));
         };
-    }, [showOptionsDropdown]);
+        measure();
+        // The sheet resizes under the list: snap points, the keyboard, a drag.
+        const observer = new ResizeObserver(measure);
+        observer.observe(scrollContainer);
+        return () => observer.disconnect();
+    }, [inline, showOptionsDropdown, scrollContainer]);
     useEffect(() => {
         if (focusOptionIndex === null || !refOptions.current)
             return;
@@ -164,20 +222,25 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
                 return (_jsx("li", { id: getOptionId(index), role: "option", "aria-selected": isActive, className: className, onMouseDown: (e) => e.preventDefault(), onClick: () => selectOption(option), children: getOptionLabel(option) }, getOptionKey(option)));
             }) }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: refAutocomplete, className: classNames('efp-autocomplete', {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: refAutocomplete, "data-no-drag": true, className: classNames('efp-autocomplete', {
                     'is-open': showOptionsDropdown,
                     'with-clear': showOptionsDropdown && showClear,
-                }), children: _jsxs("div", { className: "efp-autocomplete__inner", children: [_jsx("input", { type: "search", className: "efp-autocomplete__input", role: "combobox", "aria-label": ariaLabel, "aria-autocomplete": "list", "aria-expanded": showOptionsDropdown, "aria-controls": showOptionsDropdown ? listboxId : undefined, "aria-activedescendant": showOptionsDropdown && focusOptionIndex !== null
-                                ? getOptionId(focusOptionIndex)
-                                : undefined, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, value: displayValue, placeholder: placeholder, ref: refSearchInput }), showClear && showOptionsDropdown && displayValue && (_jsx("button", { type: "button", className: "efp-autocomplete__clear", "aria-label": clearLabel, onMouseDown: (e) => {
-                                e.preventDefault();
-                                clearValue(true);
-                            } }))] }) }), showOptionsDropdown &&
+                }), children: [_jsxs("div", { className: "efp-autocomplete__inner", children: [_jsx("input", { type: "search", className: "efp-autocomplete__input", role: "combobox", "aria-label": ariaLabel, "aria-autocomplete": "list", "aria-expanded": showOptionsDropdown, "aria-controls": showOptionsDropdown ? listboxId : undefined, "aria-activedescendant": showOptionsDropdown && focusOptionIndex !== null
+                                    ? getOptionId(focusOptionIndex)
+                                    : undefined, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, value: displayValue, placeholder: placeholder, ref: refSearchInput }), showClear && showOptionsDropdown && displayValue && (_jsx("button", { type: "button", className: "efp-autocomplete__clear", "aria-label": clearLabel, onMouseDown: (e) => {
+                                    e.preventDefault();
+                                    clearValue(true);
+                                } }))] }), showOptionsDropdown && inline && (_jsx("div", { ref: refOptions, "data-no-drag": true, className: "efp-autocomplete-options efp-autocomplete-options--inline", style: inlineMaxHeight !== null ? { maxHeight: `${inlineMaxHeight}px` } : undefined, children: _jsx("div", { className: "efp-autocomplete-options__scroll", children: renderOptions() }) }))] }), showOptionsDropdown &&
+                !inline &&
                 container &&
                 createPortal(_jsx("div", { ref: refOptions, className: "efp-autocomplete-options", style: {
-                        top: `${dropdownPosition.top}px`,
+                        ...(dropdownPosition.top !== undefined ? { top: `${dropdownPosition.top}px` } : {}),
+                        ...(dropdownPosition.bottom !== undefined
+                            ? { bottom: `${dropdownPosition.bottom}px` }
+                            : {}),
                         left: `${dropdownPosition.left}px`,
                         width: `${dropdownPosition.width}px`,
+                        maxHeight: `${dropdownPosition.maxHeight}px`,
                     }, children: _jsx("div", { className: "efp-autocomplete-options__scroll", children: renderOptions() }) }), container)] }));
 };
 export default Autocomplete;

package/dist/components/Overlay/Overlay.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Overlay.scss';
 import cn from 'classnames';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import debounce from '../../shared/debounce';
-import { useDragGesture } from '../../shared/hooks/useDragGesture';
+import { useKeyboardInset } from '../../shared/hooks/useKeyboardInset';
+import { useSheetDrag } from '../../shared/hooks/useSheetDrag';
 import { useWindowSize } from '../../shared/hooks/useWindowSize';
 import { OverlayScrollContext } from './OverlayScrollContext';
-const GAP = 70;
 const TRANSITION_DURATION = '0.3s';
 const DEFAULT_SCROLL_THRESHOLD = 10;
 const DEFAULT_MOBILE_BREAKPOINT = 768;
@@ -27,125 +27,121 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
     // Pure derivations of the window size — computed in render, not stored/synced via an effect.
     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.
+    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.
+    const effectiveSizes = useMemo(() => {
+        if (keyboardInset <= 0)
+            return sizes;
+        // Never below the smallest snap point: a collapsed sheet reads as a white screen.
+        const full = Math.max(sizes.full - keyboardInset, sizes.small);
+        return {
+            small: Math.min(sizes.small, full),
+            medium: Math.min(sizes.medium, full),
+            full,
+        };
+    }, [sizes, keyboardInset]);
     const [dragging, setDragging] = useState(false);
-    const [panelHeight, setPanelHeight] = useState(() => sizes[size]);
-    const [overlayHeight, setOverlayHeight] = useState(() => sizes[size]);
+    // The sheet is at zero height: closed, or mounted and about to animate open.
+    const [collapsed, setCollapsed] = useState(!open);
     const [isAnimating, setIsAnimating] = useState(false);
     const [shouldRender, setShouldRender] = useState(open);
     const [isScrolled, setIsScrolled] = useState(false);
-    const touchStartRef = useRef(undefined);
-    const dragOffsetRef = useRef(undefined);
     const overlayPanelRef = useRef(null);
-    const triggerRef = useRef(null);
     const scrollRef = useRef(null);
-    // Mirror frequently-changing values into refs so the drag callbacks can stay
-    // identity-stable and the listener effect subscribes only when mobile/disableDrag change.
-    const sizesRef = useRef(sizes);
-    const panelHeightRef = useRef(panelHeight);
-    const overlayHeightRef = useRef(overlayHeight);
-    const draggingRef = useRef(dragging);
+    const openedAtRef = useRef(undefined);
+    // 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);
+    // Mirror for the identity-stable callbacks below. Written after paint, not
+    // during render, so a concurrent re-render cannot observe a torn value.
+    const snapRef = useRef(currentSnap);
     const sizeRef = useRef(size);
-    useEffect(() => {
-        sizesRef.current = sizes;
-        panelHeightRef.current = panelHeight;
-        overlayHeightRef.current = overlayHeight;
-        draggingRef.current = dragging;
+    const onChangeSizeRef = useRef(onChangeSize);
+    useLayoutEffect(() => {
+        snapRef.current = currentSnap;
         sizeRef.current = size;
+        onChangeSizeRef.current = onChangeSize;
     });
+    // The snap point is the state; the height follows from it every render. Storing
+    // pixels instead would freeze whatever the keyboard allowed at that moment and
+    // keep the sheet short after it closes.
     const setSize = useCallback((newSize) => {
-        const height = sizesRef.current[newSize];
-        setPanelHeight(height);
-        setOverlayHeight(height);
-        onChangeSize?.(newSize);
-    }, [onChangeSize]);
+        setCurrentSnap(newSize);
+        setCollapsed(false);
+        onChangeSizeRef.current?.(newSize);
+    }, []);
     const positioningStyles = useMemo(() => {
         if (mobile) {
+            const lift = keyboardInset > 0 ? { bottom: keyboardInset } : {};
+            const clamp = (height) => Math.min(height, effectiveSizes.full);
             if (forceFull && open) {
-                return { height: getActualViewportHeight() };
+                return { ...lift, height: clamp(getActualViewportHeight()) };
             }
+            // 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.
+            if (dragging)
+                return { ...lift, height: effectiveSizes.full };
             return {
-                height: open || isAnimating ? overlayHeight : 0,
+                ...lift,
+                height: (open || isAnimating) && !collapsed ? effectiveSizes[currentSnap] : 0,
             };
         }
         return {
             height: open ? 'auto' : undefined,
         };
-    }, [mobile, open, overlayHeight, isAnimating, forceFull]);
-    const setSizeByValue = useCallback((heightVal) => {
-        const sizes = sizesRef.current;
-        const sizesArray = [sizes.small, sizes.medium, sizes.full].sort();
-        if (heightVal >= sizes.full) {
-            setSize('full');
-            return;
-        }
-        if (heightVal <= sizes.small) {
-            setSize('small');
-            return;
-        }
-        const currentHeight = panelHeightRef.current || sizes.medium;
-        const targetSize = heightVal > currentHeight
-            ? (sizesArray.find((val) => val + GAP >= heightVal) ?? sizes.full)
-            : (sizesArray.reverse().find((val) => val - GAP <= heightVal) ?? sizes.small);
-        if (targetSize === sizes.full) {
-            setSize('full');
-        }
-        else if (targetSize === sizes.medium) {
-            setSize('medium');
-        }
-        else {
-            setSize('small');
-        }
-    }, [setSize]);
-    const handleDragStart = useCallback((clientY) => {
-        setDragging(true);
-        touchStartRef.current = clientY;
-    }, []);
-    const handleDragMove = useCallback((clientY) => {
-        const touchStart = touchStartRef.current;
-        if (touchStart === undefined)
-            return;
-        const sizes = sizesRef.current;
-        const panelHeight = panelHeightRef.current;
-        const scrollEl = scrollRef.current;
-        if ((scrollEl?.scrollTop ?? 0) > 0 && panelHeight === sizes.full)
-            return;
-        const offset = touchStart - clientY;
-        const currentHeight = panelHeight || sizes.medium;
-        let nextHeight = currentHeight + offset;
-        if (scrollEl && panelHeight === sizes.full && nextHeight < panelHeight) {
-            scrollEl.style.overflow = 'hidden';
-        }
-        nextHeight = Math.min(Math.max(nextHeight, sizes.small), sizes.full);
-        dragOffsetRef.current = offset;
-        overlayHeightRef.current = nextHeight;
-        setOverlayHeight(nextHeight);
-    }, []);
-    const handleDragEnd = useCallback(() => {
-        setDragging(false);
-        touchStartRef.current = undefined;
-        const scrollEl = scrollRef.current;
-        if (scrollEl) {
-            scrollEl.style.removeProperty('overflow');
-        }
-        const dragOffset = dragOffsetRef.current;
-        dragOffsetRef.current = undefined;
-        const finalHeight = overlayHeightRef.current;
-        if (dragOffset !== undefined && finalHeight !== undefined) {
-            setSizeByValue(finalHeight);
-        }
-    }, [setSizeByValue]);
+    }, [
+        mobile,
+        open,
+        collapsed,
+        currentSnap,
+        isAnimating,
+        forceFull,
+        dragging,
+        effectiveSizes,
+        keyboardInset,
+    ]);
+    const snapPoints = useMemo(() => [
+        { name: 'small', height: effectiveSizes.small },
+        { name: 'medium', height: effectiveSizes.medium },
+        { name: 'full', height: effectiveSizes.full },
+    ], [effectiveSizes]);
+    const handleDragStart = useCallback(() => setDragging(true), []);
+    const handleSettle = useCallback(() => setDragging(false), []);
     const handleTriggerClick = useCallback(() => {
-        if (draggingRef.current)
-            return;
-        const currentSize = sizeRef.current;
+        const currentSize = snapRef.current;
         const nextSize = currentSize === 'small' ? 'medium' : currentSize === 'medium' ? 'full' : 'small';
         setSize(nextSize);
     }, [setSize]);
-    const { touchHandlers, mouseHandlers } = useDragGesture({
+    const { onPointerDown } = useSheetDrag({
+        enabled: mobile && !disableDrag && !forceFull,
+        panelRef: overlayPanelRef,
+        scrollRef,
+        snapPoints,
+        current: currentSnap,
+        openedAtRef,
         onDragStart: handleDragStart,
-        onDragMove: handleDragMove,
-        onDragEnd: handleDragEnd,
+        onSnap: setSize,
+        onSettle: handleSettle,
+        onHandleTap: handleTriggerClick,
     });
+    // The gesture owns `transform`; React owns `height`. Clear the transform in
+    // the same paint as the height React just wrote, so the sheet does not jump.
+    useLayoutEffect(() => {
+        if (dragging)
+            return;
+        const panel = overlayPanelRef.current;
+        if (!panel)
+            return;
+        // The swap must not run through the `height` transition — it would flash
+        // the sheet to the top of the screen.
+        panel.style.transition = 'none';
+        panel.style.removeProperty('transform');
+        const frame = requestAnimationFrame(() => panel.style.removeProperty('transition'));
+        return () => cancelAnimationFrame(frame);
+    }, [dragging]);
     const handleScroll = useCallback(() => {
         const scrollEl = scrollRef.current;
         if (!scrollEl)
@@ -160,63 +156,25 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
     const debouncedScrollActivity = useMemo(() => debounce(() => {
         onScrollActivity?.();
     }, 250), [onScrollActivity]);
-    useEffect(() => {
-        if (!mobile || disableDrag)
-            return;
-        const overlayEl = overlayPanelRef.current;
-        const triggerEl = triggerRef.current;
-        const scrollEl = scrollRef.current;
-        const preventOverscroll = () => {
-            const panelHeight = panelHeightRef.current;
-            if (panelHeight && panelHeight < sizesRef.current.full && scrollEl) {
-                scrollEl.style.overflow = 'hidden';
-            }
-        };
-        if (overlayEl) {
-            overlayEl.addEventListener('touchstart', touchHandlers.onTouchStart);
-            overlayEl.addEventListener('touchend', touchHandlers.onTouchEnd);
-            window.addEventListener('touchmove', touchHandlers.onTouchMove);
-            overlayEl.addEventListener('mousedown', mouseHandlers.onMouseDown);
-            overlayEl.addEventListener('mouseup', mouseHandlers.onMouseUp);
-            window.addEventListener('mousemove', mouseHandlers.onMouseMove);
-        }
-        if (triggerEl) {
-            triggerEl.addEventListener('mouseup', handleTriggerClick);
-        }
-        if (scrollEl) {
-            scrollEl.addEventListener('touchstart', preventOverscroll);
-        }
-        return () => {
-            if (overlayEl) {
-                overlayEl.removeEventListener('touchstart', touchHandlers.onTouchStart);
-                overlayEl.removeEventListener('touchend', touchHandlers.onTouchEnd);
-                window.removeEventListener('touchmove', touchHandlers.onTouchMove);
-                overlayEl.removeEventListener('mousedown', mouseHandlers.onMouseDown);
-                overlayEl.removeEventListener('mouseup', mouseHandlers.onMouseUp);
-                window.removeEventListener('mousemove', mouseHandlers.onMouseMove);
-            }
-            if (triggerEl) {
-                triggerEl.removeEventListener('mouseup', handleTriggerClick);
-            }
-            if (scrollEl) {
-                scrollEl.removeEventListener('touchstart', preventOverscroll);
-            }
-        };
-    }, [mobile, disableDrag, touchHandlers, mouseHandlers, handleTriggerClick]);
+    // Runs on open/close only. A `size` prop change (or a host re-creating
+    // `onChangeSize`) is not a re-open: re-running this would re-arm the opening
+    // lock and, 10ms later, write the prop over the snap point a drag just chose.
     useEffect(() => {
         if (open) {
             setShouldRender(true);
             setIsAnimating(true);
+            openedAtRef.current = performance.now();
             const timer = setTimeout(() => {
-                setSize(size);
+                setSize(sizeRef.current);
                 setIsAnimating(false);
             }, 10);
             return () => clearTimeout(timer);
         }
         else {
             setIsAnimating(true);
+            openedAtRef.current = undefined;
             if (mobile) {
-                setOverlayHeight(0);
+                setCollapsed(true);
             }
             const timer = setTimeout(() => {
                 setShouldRender(false);
@@ -225,7 +183,12 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
             }, parseFloat(TRANSITION_DURATION) * 1000);
             return () => clearTimeout(timer);
         }
-    }, [open, size, setSize, mobile]);
+    }, [open, setSize, mobile]);
+    // 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(() => {
+        setCurrentSnap(size);
+    }, [size]);
     useEffect(() => {
         if (open && !isAnimating) {
             scrollRef.current?.scrollTo({ top: 0 });
@@ -237,13 +200,14 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
         return null;
     return (_jsx(OverlayScrollContext, { value: scrollRef.current, children: _jsxs("div", { className: cn('efp-overlay', {
                 'efp-overlay--draggable': dragging,
-                'efp-overlay--full': size === 'full',
+                'efp-overlay--keyboard': mobile && keyboardInset > 0,
+                'efp-overlay--full': currentSnap === 'full',
                 'efp-overlay--mobile': mobile,
                 'efp-overlay--desktop': !mobile,
                 'efp-overlay--hidden': !mobile && !open,
                 'efp-overlay--scrolled': isScrolled,
                 'efp-overlay--forced-full': forceFull && mobile,
-            }, className), style: positioningStyles, ref: overlayPanelRef, children: [!disableDrag && _jsx("div", { className: "efp-overlay__draghandle", ref: triggerRef }), _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: scrollRef, onScroll: () => {
                         handleScroll();
                         debouncedScrollActivity();
                     }, children: [particles, _jsx("div", { className: "efp-overlay__content", children: children ? children : noContentLabel })] })] }) }));

package/dist/shared/hooks/useKeyboardInset.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Height in px of the on-screen keyboard covering the layout viewport's bottom,
+ * or 0. The keyboard shrinks `visualViewport` while `innerHeight` stays put
+ * (#1567). iOS additionally pans the layout viewport to reveal the focused
+ * input; tracking that pan means chasing it (iOS re-pans after every lift), so
+ * the inset is the keyboard height alone and the pan is undone instead.
+ */
+export declare const useKeyboardInset: (enabled: boolean) => number;
+//# sourceMappingURL=useKeyboardInset.d.ts.map

package/dist/shared/hooks/useKeyboardInset.js

@@ -0,0 +1,84 @@
+import { useEffect, useRef, useState } from 'react';
+/** Anything smaller is browser-chrome noise (URL bar collapse), not a keyboard. */
+const MIN_KEYBOARD_HEIGHT = 100;
+/** px of drift to absorb — iOS reports fractional heights while the keyboard settles. */
+const INSET_TOLERANCE = 2;
+/** A keyboard never covers more than this; anything larger is a geometry glitch. */
+const MAX_INSET_RATIO = 0.6;
+/** Unzoomed scale is not exactly 1 in every Android WebView — 1.0000001 happens. */
+const SCALE_TOLERANCE = 0.01;
+/**
+ * Height in px of the on-screen keyboard covering the layout viewport's bottom,
+ * or 0. The keyboard shrinks `visualViewport` while `innerHeight` stays put
+ * (#1567). iOS additionally pans the layout viewport to reveal the focused
+ * input; tracking that pan means chasing it (iOS re-pans after every lift), so
+ * the inset is the keyboard height alone and the pan is undone instead.
+ */
+export const useKeyboardInset = (enabled) => {
+    const [inset, setInset] = useState(0);
+    const insetRef = useRef(0);
+    const pinnedScrollRef = useRef(null);
+    useEffect(() => {
+        if (!enabled) {
+            setInset(0);
+            insetRef.current = 0;
+            pinnedScrollRef.current = null;
+            return;
+        }
+        const viewport = typeof window.visualViewport !== 'undefined' ? window.visualViewport : null;
+        if (!viewport)
+            return;
+        const read = () => {
+            const covered = window.innerHeight - viewport.height;
+            // Pinch zoom also shrinks the visual viewport — only an unzoomed shrink counts.
+            if (Math.abs(viewport.scale - 1) >= SCALE_TOLERANCE || covered <= MIN_KEYBOARD_HEIGHT) {
+                return 0;
+            }
+            return Math.round(Math.min(covered, window.innerHeight * MAX_INSET_RATIO));
+        };
+        // Undoing the pan scrolls the whole window — ours to do only when the SDK
+        // owns it, not embedded in a `<div>` on a scrollable host page.
+        const ownsViewport = () => document.documentElement.scrollHeight <= window.innerHeight + INSET_TOLERANCE;
+        const apply = (next) => {
+            if (Math.abs(next - insetRef.current) <= INSET_TOLERANCE)
+                return;
+            // Remember where the page stood before the keyboard pushed it around.
+            if (insetRef.current === 0) {
+                pinnedScrollRef.current = ownsViewport() ? window.scrollY : null;
+            }
+            if (next === 0)
+                pinnedScrollRef.current = null;
+            insetRef.current = next;
+            setInset(next);
+        };
+        // The keyboard animating in fires a burst of events; render the last value
+        // of each frame, or the sheet jitters (#1567).
+        let frame = 0;
+        const onResize = () => {
+            if (frame)
+                return;
+            frame = requestAnimationFrame(() => {
+                frame = 0;
+                apply(read());
+            });
+        };
+        // The lift already reveals the input, so the iOS pan is pure damage: undo it.
+        const onScroll = () => {
+            const pinned = pinnedScrollRef.current;
+            if (pinned === null || insetRef.current === 0)
+                return;
+            if (Math.abs(window.scrollY - pinned) > INSET_TOLERANCE)
+                window.scrollTo(0, pinned);
+        };
+        apply(read());
+        viewport.addEventListener('resize', onResize);
+        viewport.addEventListener('scroll', onScroll);
+        return () => {
+            if (frame)
+                cancelAnimationFrame(frame);
+            viewport.removeEventListener('resize', onResize);
+            viewport.removeEventListener('scroll', onScroll);
+        };
+    }, [enabled]);
+    return inset;
+};

package/dist/shared/hooks/useSheetDrag.d.ts

@@ -0,0 +1,27 @@
+import { type PointerEvent as ReactPointerEvent, type RefObject } from 'react';
+export interface SnapPoint<T extends string> {
+    name: T;
+    height: number;
+}
+interface UseSheetDragOptions<T extends string> {
+    enabled: boolean;
+    panelRef: RefObject<HTMLDivElement | null>;
+    scrollRef: RefObject<HTMLDivElement | null>;
+    /** Ascending by height; the last one is the tallest. */
+    snapPoints: readonly SnapPoint<T>[];
+    current: T;
+    /** `performance.now()` of the last open, or undefined while the sheet is closed. */
+    openedAtRef: RefObject<number | undefined>;
+    /** Freeze the sheet at its tallest point; fires before the first drawn move. */
+    onDragStart: () => void;
+    /** Fires on release, while the sheet animates to the chosen point. */
+    onSnap: (name: T) => void;
+    /** The animation has landed; the host resumes its height-driven layout. */
+    onSettle: () => void;
+    onHandleTap: () => void;
+}
+export declare function useSheetDrag<T extends string>({ enabled, panelRef, scrollRef, snapPoints, current, openedAtRef, onDragStart, onSnap, onSettle, onHandleTap, }: UseSheetDragOptions<T>): {
+    onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+};
+export {};
+//# sourceMappingURL=useSheetDrag.d.ts.map

package/dist/shared/hooks/useSheetDrag.js

@@ -0,0 +1,227 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, } from 'react';
+/**
+ * Bottom-sheet drag physics ported from `vaul` v1.1.2 (not a dependency: it
+ * injects styles into `document.head`, which never reaches our shadow root).
+ * At rest the sheet is height-driven; during a gesture it is frozen at its
+ * tallest point and moved with `translate3d`, off the React/layout path.
+ */
+/** px/ms: above this the sheet flies to the far end regardless of distance. */
+const FLING_VELOCITY = 2;
+/** px/ms: above this a short drag steps exactly one snap point. */
+const STEP_VELOCITY = 0.4;
+const STEP_DISTANCE_RATIO = 0.4;
+const SCROLL_LOCK_TIMEOUT = 100;
+const OPEN_LOCK_TIMEOUT = 500;
+const MOVE_TOLERANCE = 2;
+/** Matches SHEET_TRANSITION, with room for a `transitionend` that may not come. */
+const SETTLE_TIMEOUT = 550;
+const SHEET_TRANSITION = 'transform 0.5s cubic-bezier(0.32, 0.72, 0, 1)';
+/** Resistance past the end stops (vaul's curve). */
+const dampen = (distance) => Math.max(8 * (Math.log(distance + 1) - 2), 0);
+const readOffset = (panel) => {
+    if (!panel || typeof DOMMatrixReadOnly !== 'function')
+        return null;
+    const { transform } = getComputedStyle(panel);
+    if (!transform || transform === 'none')
+        return null;
+    try {
+        return new DOMMatrixReadOnly(transform).m42;
+    }
+    catch {
+        return null;
+    }
+};
+export function useSheetDrag({ enabled, panelRef, scrollRef, snapPoints, current, openedAtRef, onDragStart, onSnap, onSettle, onHandleTap, }) {
+    const gestureRef = useRef(null);
+    const scrollBlockedAtRef = useRef(0);
+    const settleRef = useRef(null);
+    // Detaches the window listeners of a gesture still in flight, without snapping.
+    const stopGestureRef = useRef(null);
+    // Mirrored after paint so a concurrent re-render cannot observe a torn value.
+    const stateRef = useRef({ enabled, snapPoints, current });
+    useLayoutEffect(() => {
+        stateRef.current = { enabled, snapPoints, current };
+    }, [enabled, snapPoints, current]);
+    const callbacksRef = useRef({ onDragStart, onSnap, onSettle, onHandleTap });
+    useLayoutEffect(() => {
+        callbacksRef.current = { onDragStart, onSnap, onSettle, onHandleTap };
+    }, [onDragStart, onSnap, onSettle, onHandleTap]);
+    const offsetOf = useCallback((name) => {
+        const { snapPoints } = stateRef.current;
+        const tallest = snapPoints[snapPoints.length - 1].height;
+        const point = snapPoints.find((snapPoint) => snapPoint.name === name);
+        return tallest - (point?.height ?? tallest);
+    }, []);
+    const writeOffset = useCallback((offset, transition) => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        panel.style.transition = transition;
+        panel.style.transform = `translate3d(0, ${offset}px, 0)`;
+    }, [panelRef]);
+    /** Vaul's `shouldDrag`; runs on the first move — the answer depends on direction. */
+    const shouldDrag = useCallback((target, draggingDown) => {
+        const now = performance.now();
+        const openedAt = openedAtRef.current;
+        if (openedAt !== undefined && now - openedAt < OPEN_LOCK_TIMEOUT)
+            return false;
+        if (now - scrollBlockedAtRef.current < SCROLL_LOCK_TIMEOUT)
+            return false;
+        if (window.getSelection()?.toString())
+            return false;
+        let element = target instanceof Element ? target : null;
+        if (element?.closest('[data-no-drag]'))
+            return false;
+        const { snapPoints, current } = stateRef.current;
+        if (!draggingDown && current === snapPoints[snapPoints.length - 1].name) {
+            scrollBlockedAtRef.current = now;
+            return false;
+        }
+        const panel = panelRef.current;
+        while (element && panel?.contains(element)) {
+            if (element.scrollHeight > element.clientHeight && element.scrollTop !== 0) {
+                scrollBlockedAtRef.current = now;
+                return false;
+            }
+            element = element.parentElement;
+        }
+        return true;
+    }, [openedAtRef, panelRef]);
+    const resolveTarget = useCallback((offset, distance, velocity) => {
+        const { snapPoints, current } = stateRef.current;
+        const draggedUp = distance > 0;
+        if (velocity > FLING_VELOCITY) {
+            return draggedUp ? snapPoints[snapPoints.length - 1].name : snapPoints[0].name;
+        }
+        if (velocity > STEP_VELOCITY &&
+            Math.abs(distance) < window.innerHeight * STEP_DISTANCE_RATIO) {
+            const index = snapPoints.findIndex((snapPoint) => snapPoint.name === current);
+            const stepped = index + (draggedUp ? 1 : -1);
+            return snapPoints[Math.min(Math.max(stepped, 0), snapPoints.length - 1)].name;
+        }
+        return snapPoints.reduce((closest, snapPoint) => Math.abs(offsetOf(snapPoint.name) - offset) < Math.abs(offsetOf(closest.name) - offset)
+            ? snapPoint
+            : closest).name;
+    }, [offsetOf]);
+    const flushSettle = useCallback(() => {
+        settleRef.current?.flush();
+    }, []);
+    const scheduleSettle = useCallback(() => {
+        const panel = panelRef.current;
+        const cancel = () => {
+            settleRef.current = null;
+            clearTimeout(timer);
+            panel?.removeEventListener('transitionend', onTransitionEnd);
+        };
+        const flush = () => {
+            cancel();
+            callbacksRef.current.onSettle();
+        };
+        const onTransitionEnd = (event) => {
+            if (event.target === panel && event.propertyName === 'transform')
+                flush();
+        };
+        // No `transitionend` when the sheet is released where it started.
+        const timer = setTimeout(flush, SETTLE_TIMEOUT);
+        panel?.addEventListener('transitionend', onTransitionEnd);
+        settleRef.current = { flush, cancel };
+    }, [panelRef]);
+    // A sheet unmounted mid-gesture takes its timers and window listeners with
+    // it, silently — no onSnap/onSettle into a dead tree.
+    useEffect(() => () => {
+        settleRef.current?.cancel();
+        stopGestureRef.current?.();
+    }, []);
+    const onPointerDown = useCallback((event) => {
+        if (!stateRef.current.enabled || gestureRef.current)
+            return;
+        if (event.pointerType === 'mouse' && event.button !== 0)
+            return;
+        const liveOffset = settleRef.current ? readOffset(panelRef.current) : null;
+        flushSettle();
+        const startOffset = liveOffset ?? offsetOf(stateRef.current.current);
+        const gesture = {
+            pointerId: event.pointerId,
+            startY: event.clientY,
+            startTime: performance.now(),
+            startOffset,
+            offset: startOffset,
+            committed: false,
+        };
+        gestureRef.current = gesture;
+        const stop = () => {
+            window.removeEventListener('pointermove', handleMove);
+            window.removeEventListener('pointerup', finish);
+            window.removeEventListener('pointercancel', finish);
+            gestureRef.current = null;
+            stopGestureRef.current = null;
+        };
+        const finish = (endEvent) => {
+            // A second finger releasing must not end the first finger's gesture.
+            if (endEvent.pointerId !== gesture.pointerId)
+                return;
+            stop();
+            const scrollEl = scrollRef.current;
+            if (scrollEl)
+                scrollEl.style.removeProperty('overflow');
+            if (!gesture.committed) {
+                const target = event.target;
+                if (target instanceof Element && target.closest('[data-sheet-handle]')) {
+                    callbacksRef.current.onHandleTap();
+                }
+                return;
+            }
+            const distance = gesture.startY - endEvent.clientY;
+            const elapsed = Math.max(performance.now() - gesture.startTime, 1);
+            const velocity = Math.abs(distance) / elapsed;
+            const target = resolveTarget(gesture.offset, distance, velocity);
+            writeOffset(offsetOf(target), SHEET_TRANSITION);
+            scheduleSettle();
+            callbacksRef.current.onSnap(target);
+        };
+        const handleMove = (moveEvent) => {
+            if (moveEvent.pointerId !== gesture.pointerId)
+                return;
+            const delta = moveEvent.clientY - gesture.startY;
+            if (!gesture.committed) {
+                if (Math.abs(delta) < MOVE_TOLERANCE)
+                    return;
+                if (!shouldDrag(event.target, delta > 0)) {
+                    stop();
+                    return;
+                }
+                gesture.committed = true;
+                try {
+                    panelRef.current?.setPointerCapture(gesture.pointerId);
+                }
+                catch {
+                    // Throws when the pointer is already gone; the window listeners
+                    // below carry the gesture either way.
+                }
+                const scrollEl = scrollRef.current;
+                if (scrollEl)
+                    scrollEl.style.overflow = 'hidden';
+                callbacksRef.current.onDragStart();
+            }
+            const limit = offsetOf(stateRef.current.snapPoints[0].name);
+            const raw = gesture.startOffset + delta;
+            const offset = raw < 0 ? -dampen(-raw) : raw > limit ? limit + dampen(raw - limit) : raw;
+            gesture.offset = offset;
+            writeOffset(offset, 'none');
+        };
+        window.addEventListener('pointermove', handleMove);
+        window.addEventListener('pointerup', finish);
+        window.addEventListener('pointercancel', finish);
+        stopGestureRef.current = stop;
+    }, [
+        flushSettle,
+        offsetOf,
+        panelRef,
+        resolveTarget,
+        scheduleSettle,
+        scrollRef,
+        shouldDrag,
+        writeOffset,
+    ]);
+    return { onPointerDown };
+}

package/package.json

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

package/dist/shared/hooks/useDragGesture.d.ts

@@ -1,19 +0,0 @@
-interface DragGestureConfig {
-    onDragStart: (clientY: number) => void;
-    onDragMove: (clientY: number) => void;
-    onDragEnd: () => void;
-}
-export declare const useDragGesture: ({ onDragStart, onDragMove, onDragEnd }: DragGestureConfig) => {
-    touchHandlers: {
-        onTouchStart: (event: TouchEvent) => void;
-        onTouchMove: (event: TouchEvent) => void;
-        onTouchEnd: () => void;
-    };
-    mouseHandlers: {
-        onMouseDown: (event: MouseEvent) => void;
-        onMouseMove: (event: MouseEvent) => void;
-        onMouseUp: () => void;
-    };
-};
-export {};
-//# sourceMappingURL=useDragGesture.d.ts.map

package/dist/shared/hooks/useDragGesture.js

@@ -1,45 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-export const useDragGesture = ({ onDragStart, onDragMove, onDragEnd }) => {
-    const isDraggingRef = useRef(false);
-    const handleTouchStart = useCallback((event) => {
-        isDraggingRef.current = true;
-        onDragStart(event.touches[0].clientY);
-    }, [onDragStart]);
-    const handleTouchMove = useCallback((event) => {
-        if (!isDraggingRef.current)
-            return;
-        onDragMove(event.touches[0].clientY);
-    }, [onDragMove]);
-    const handleTouchEnd = useCallback(() => {
-        if (!isDraggingRef.current)
-            return;
-        isDraggingRef.current = false;
-        onDragEnd();
-    }, [onDragEnd]);
-    const handleMouseStart = useCallback((event) => {
-        isDraggingRef.current = true;
-        onDragStart(event.clientY);
-    }, [onDragStart]);
-    const handleMouseMove = useCallback((event) => {
-        if (!isDraggingRef.current)
-            return;
-        onDragMove(event.clientY);
-    }, [onDragMove]);
-    const handleMouseEnd = useCallback(() => {
-        if (!isDraggingRef.current)
-            return;
-        isDraggingRef.current = false;
-        onDragEnd();
-    }, [onDragEnd]);
-    const touchHandlers = useMemo(() => ({
-        onTouchStart: handleTouchStart,
-        onTouchMove: handleTouchMove,
-        onTouchEnd: handleTouchEnd,
-    }), [handleTouchStart, handleTouchMove, handleTouchEnd]);
-    const mouseHandlers = useMemo(() => ({
-        onMouseDown: handleMouseStart,
-        onMouseMove: handleMouseMove,
-        onMouseUp: handleMouseEnd,
-    }), [handleMouseStart, handleMouseMove, handleMouseEnd]);
-    return { touchHandlers, mouseHandlers };
-};