@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -1,727 +1 @@
-"use strict";
-
-/**
- * BottomSheet — Reanimated 3 + Gesture Handler 2 implementation.
- *
- * A polished, theme-aware bottom sheet with multi-snap-point support,
- * UI-thread driven pan gestures, and native-driver spring animations.
- *
- * USAGE:
- *
- * const ref = useRef<BottomSheetRef>(null);
- * <BottomSheet ref={ref} snapPoints={[200, '50%', '90%']}>
- *   <YourContent />
- * </BottomSheet>
- *
- * ref.current?.expand();   // open at first snap point (or `index` prop)
- * ref.current?.expand(2);  // open at specific index
- * ref.current?.collapse(); // animate to smallest snap point
- * ref.current?.close();    // dismiss
- */
-
-import React, { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Dimensions, Keyboard, Modal, Platform, ScrollView, StyleSheet, View } from 'react-native';
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-
-/**
- * State + actions exposed to anything rendered inside a `<BottomSheet>` —
- * including the `header` and `footer` slots. Read via `useBottomSheet()`.
- *
- * `snapIndex` is the JS-thread mirror of the current snap point. -1 means the
- * sheet is closed (mid-close-animation included). Use it to drive footer
- * button enable state, conditional headers, etc. If you need per-frame
- * progress (e.g. fade a header in as the sheet expands), reach for the
- * animated value via a future enhancement — not exposed today to keep the
- * surface minimal.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BottomSheetContext = /*#__PURE__*/createContext(null);
-
-/**
- * Access the enclosing `<BottomSheet>`'s state and imperative actions.
- * Must be called from a component rendered inside a `<BottomSheet>` (as
- * `children`, `header`, or `footer`).
- */
-export const useBottomSheet = () => {
-  const ctx = useContext(BottomSheetContext);
-  if (!ctx) {
-    throw new Error('useBottomSheet must be used inside a <BottomSheet>.');
-  }
-  return ctx;
-};
-const SPRING_CONFIG = {
-  damping: 20,
-  stiffness: 240,
-  mass: 1
-};
-const CLOSE_VELOCITY_THRESHOLD = 1000;
-const DRAG_ACTIVATION_OFFSET = 10;
-const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    snapPoints,
-    index: controlledIndex,
-    onChange,
-    onAnimate,
-    enablePanDownToClose = true,
-    enableBackdropPress = true,
-    scrollable = false,
-    keyboardBehavior = 'shift',
-    mode = 'modal',
-    handleIndicatorStyle,
-    containerStyle,
-    header,
-    footer,
-    headerStyle,
-    footerStyle,
-    children,
-    accessibilityLabel,
-    accessibilityViewIsModal,
-    testID
-  } = props;
-  const theme = useTheme();
-  const insets = useSafeAreaInsets();
-  // Height of the host the sheet is positioned in: the Modal's root in modal
-  // mode, the parent overlay in inline mode. Measured with onLayout; the
-  // window size is only the guess before the first layout lands. It cannot
-  // be the reference itself: on Android `Dimensions.get('window')` excludes
-  // the status and navigation bars while the translucent Modal spans both, so
-  // a sheet positioned from the window height stopped one bar short of the
-  // screen edge (54 dp of backdrop under the sheet on a OnePlus, Android 14).
-  // Rotation re-lays out the host, so onLayout covers that case too.
-  const [hostHeight, setHostHeight] = useState(() => Dimensions.get('window').height);
-  const handleHostLayout = useCallback(e => {
-    const next = e.nativeEvent.layout.height;
-    if (next > 0) {
-      setHostHeight(prev => prev === next ? prev : next);
-    }
-  }, []);
-
-  // Resolve snap points (px values), sorted ascending so larger height = smaller translateY.
-  const resolvedSnapPoints = useMemo(() => resolveSnapPoints(snapPoints, hostHeight), [snapPoints, hostHeight]);
-  const closedY = hostHeight; // fully off-screen
-  const maxSnapPoint = resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? 0;
-
-  // translateY: 0 = top of the host, hostHeight = fully closed.
-  const translateY = useSharedValue(closedY);
-  // Captures the translateY at gesture start so onUpdate can be additive.
-  const dragStartY = useSharedValue(closedY);
-  // Tracks current snap index on the JS thread (mirrored to a shared value for worklets).
-  const currentIndexShared = useSharedValue(-1);
-  const [currentIndex, setCurrentIndex] = useState(-1);
-  const isAnimatingRef = useRef(false);
-  // Drives the native <Modal>'s visible prop in modal mode. We mount the modal
-  // synchronously on open and unmount only after the close animation finishes
-  // so the slide-down stays visible.
-  const [modalVisible, setModalVisible] = useState(false);
-  // Inline-mode mirror of modalVisible: gates the absoluteFill backdrop +
-  // sheet tree so a closed inline sheet doesn't sit over the parent dimming
-  // it and swallowing touches. Set true on expand, cleared in
-  // markAnimationDone once the close animation completes.
-  const [inlineMounted, setInlineMounted] = useState(false);
-
-  // Convert a snap-point index → translateY position. -1 = closed.
-  const yForIndex = useCallback(idx => {
-    // NOT dead code, despite every ordinary call site clamping first.
-    // `expand()` has no empty-snapPoints guard (unlike `collapse`), so with
-    // snapPoints={[]} it arrives here out of range — and without this,
-    // `hostHeight - resolvedSnapPoints[idx]` is `hostHeight - undefined`,
-    // i.e. NaN into the sheet position, which breaks layout silently rather
-    // than degrading. Covered by the "degenerate snapPoints" tests.
-    if (idx < 0 || idx >= resolvedSnapPoints.length) {
-      return closedY;
-    }
-    const sheetHeight = resolvedSnapPoints[idx];
-    return hostHeight - sheetHeight;
-  }, [resolvedSnapPoints, hostHeight, closedY]);
-  const setIndexJS = useCallback(next => {
-    const previous = currentIndex;
-    if (previous === next) {
-      return;
-    }
-    setCurrentIndex(next);
-    currentIndexShared.value = next;
-    onChange?.(next);
-  }, [currentIndex, currentIndexShared, onChange]);
-  const markAnimationDone = useCallback(() => {
-    isAnimatingRef.current = false;
-    // If we just finished a close animation, unmount the sheet wrapper.
-    if (currentIndexShared.value < 0) {
-      if (mode === 'modal') {
-        setModalVisible(false);
-      } else {
-        setInlineMounted(false);
-      }
-    }
-  }, [mode, currentIndexShared]);
-  const animateTo = useCallback((to, fromIndex, toIndex) => {
-    isAnimatingRef.current = true;
-    onAnimate?.(fromIndex, toIndex);
-    translateY.value = withSpring(to, SPRING_CONFIG, finished => {
-      'worklet';
-
-      if (finished) {
-        runOnJS(markAnimationDone)();
-      }
-    });
-  }, [onAnimate, translateY, markAnimationDone]);
-  const expand = useCallback(idx => {
-    const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
-    const fromIndex = currentIndexShared.value;
-    const to = yForIndex(target);
-    // Mount the host (Modal in modal mode, inline overlay in inline mode)
-    // before kicking off the spring so the sheet has somewhere to animate
-    // into. Inline mode also gates the backdrop on this so a closed sheet
-    // doesn't dim the parent.
-    if (mode === 'modal') {
-      setModalVisible(true);
-    } else {
-      setInlineMounted(true);
-    }
-    // Reset translateY to the closed position so the first open animates
-    // up from off-screen rather than snapping in place.
-    if (fromIndex < 0) {
-      translateY.value = closedY;
-    }
-    setIndexJS(target);
-    animateTo(to, fromIndex, target);
-  }, [animateTo, closedY, currentIndex, currentIndexShared, mode, resolvedSnapPoints.length, setIndexJS, translateY, yForIndex]);
-  const collapse = useCallback(() => {
-    if (resolvedSnapPoints.length === 0) {
-      return;
-    }
-    const fromIndex = currentIndexShared.value;
-    const to = yForIndex(0);
-    setIndexJS(0);
-    animateTo(to, fromIndex, 0);
-  }, [animateTo, currentIndexShared, resolvedSnapPoints.length, setIndexJS, yForIndex]);
-  const close = useCallback(() => {
-    const fromIndex = currentIndexShared.value;
-    setIndexJS(-1);
-    isAnimatingRef.current = true;
-    onAnimate?.(fromIndex, -1);
-    translateY.value = withTiming(closedY, {
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.accelerate)
-    }, finished => {
-      'worklet';
-
-      if (finished) {
-        runOnJS(markAnimationDone)();
-      }
-    });
-  }, [closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
-  useImperativeHandle(ref, () => ({
-    expand,
-    collapse,
-    close
-  }), [expand, collapse, close]);
-
-  // Drive the controlled `index` prop.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled-prop driver: adding `currentIndex` would fight the user's drag by re-snapping to the controlled index
-  useEffect(() => {
-    if (typeof controlledIndex !== 'number') {
-      return;
-    }
-    if (controlledIndex === currentIndex) {
-      return;
-    }
-    if (controlledIndex === -1) {
-      close();
-    } else {
-      expand(controlledIndex);
-    }
-  }, [controlledIndex]);
-
-  // A re-measured host moves every snap target: the first layout lands a
-  // frame after expand() mounted the Modal, and rotation brings another.
-  // Re-aim the sheet at its current target so it does not stay parked at the
-  // offset computed from the old height. A closed sheet re-aims at the new
-  // closedY, which is still fully off-screen.
-  const lastHostHeight = useRef(hostHeight);
-  // biome-ignore lint/correctness/useExhaustiveDependencies: runs only when the host is re-measured; the target is read fresh at that moment, and listing yForIndex would re-spring on every render that passes a new snapPoints array
-  useEffect(() => {
-    if (lastHostHeight.current === hostHeight) {
-      return;
-    }
-    lastHostHeight.current = hostHeight;
-    translateY.value = withSpring(yForIndex(currentIndexShared.value), SPRING_CONFIG);
-  }, [hostHeight]);
-
-  // ───────── Gesture (UI thread) ─────────
-  // Worklet helpers must be declared inline so they capture shared values correctly.
-  const minTopY = hostHeight - maxSnapPoint; // smallest translateY (sheet fully expanded)
-  const snapTargets = useMemo(() => resolvedSnapPoints.map(h => hostHeight - h), [resolvedSnapPoints, hostHeight]);
-  const handleSnapEnd = useCallback((toIndex, toY) => {
-    const fromIndex = currentIndexShared.value;
-    if (toIndex === -1) {
-      triggerHaptic('selection');
-      setIndexJS(-1);
-      isAnimatingRef.current = true;
-      onAnimate?.(fromIndex, -1);
-      translateY.value = withTiming(closedY, {
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.accelerate)
-      }, finished => {
-        'worklet';
-
-        if (finished) {
-          runOnJS(markAnimationDone)();
-        }
-      });
-      return;
-    }
-    setIndexJS(toIndex);
-    animateTo(toY, fromIndex, toIndex);
-  }, [animateTo, closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
-
-  // The drag lives on the handle row only (spec: a drag on the content never
-  // moves or closes the sheet; the handle drags it, the backdrop tap closes
-  // it). Because the pan is not an ancestor of the content, a ScrollView or
-  // any other gesture inside `children` works natively with no yielding.
-  // Native gesture for the scrollable content (see the ScrollView below). It
-  // does not take part in the sheet's drag: the pan lives on the handle only.
-  const contentGesture = useMemo(() => Gesture.Native().withTestId(testID ? `${testID}-content-gesture` : 'bottom-sheet-content-gesture'), [testID]);
-  const panGesture = useMemo(() => {
-    const targets = snapTargets;
-    const closed = closedY;
-    const top = minTopY;
-    const canPanDownToClose = enablePanDownToClose;
-    return Gesture.Pan().withTestId(testID ? `${testID}-pan-gesture` : 'bottom-sheet-pan-gesture').activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15])
-    // No hitSlop here on purpose. With a hitSlop set, gesture-handler on
-    // iOS tests the touch against the detector view's own bounds, and the
-    // detector (display: contents) reports bounds far larger than the
-    // handle row, so a flick on the content activated the pan and closed
-    // the sheet. The grab area is the 40 px handle row itself instead.
-    .onStart(() => {
-      'worklet';
-
-      dragStartY.value = translateY.value;
-    }).onUpdate(event => {
-      'worklet';
-
-      const next = dragStartY.value + event.translationY;
-      // Clamp at the top (most-expanded) snap point with a touch of rubber-banding.
-      if (next < top) {
-        translateY.value = top + (next - top) * 0.25;
-      } else {
-        translateY.value = next;
-      }
-    }).onEnd(event => {
-      'worklet';
-
-      const releaseY = translateY.value;
-      const velocity = event.velocityY;
-
-      // Fast downward swipe → close (if allowed) or snap to smallest.
-      if (velocity > CLOSE_VELOCITY_THRESHOLD) {
-        if (canPanDownToClose) {
-          runOnJS(handleSnapEnd)(-1, closed);
-          return;
-        }
-        runOnJS(handleSnapEnd)(0, targets[0]);
-        return;
-      }
-
-      // Find nearest snap target by distance.
-      let nearestIdx = 0;
-      let nearestDist = Math.abs(releaseY - targets[0]);
-      for (let i = 1; i < targets.length; i++) {
-        const d = Math.abs(releaseY - targets[i]);
-        if (d < nearestDist) {
-          nearestDist = d;
-          nearestIdx = i;
-        }
-      }
-
-      // If user dragged below smallest snap point past threshold and pan-to-close is on, dismiss.
-      const smallest = targets[0];
-      const overshoot = releaseY - smallest;
-      if (canPanDownToClose && overshoot > 80) {
-        runOnJS(handleSnapEnd)(-1, closed);
-        return;
-      }
-      runOnJS(handleSnapEnd)(nearestIdx, targets[nearestIdx]);
-    });
-  }, [closedY, dragStartY, enablePanDownToClose, handleSnapEnd, minTopY, snapTargets, testID, translateY]);
-
-  // ───────── Keyboard tracking ─────────
-  // keyboardOffset is minus the part of the host the keyboard covers. It is
-  // added to translateY in sheetStyle (so snap-point math is untouched) and
-  // taken off the body height in bodyStyle (so nothing sits behind the
-  // keyboard). iOS gets keyboardWillShow/Hide (smoother), Android only emits
-  // keyboardDidShow/Hide.
-  const keyboardOffset = useSharedValue(0);
-  useEffect(() => {
-    if (keyboardBehavior === 'none') {
-      return;
-    }
-    const showEvt = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvt = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    const onShow = e => {
-      const height = e.endCoordinates?.height ?? 0;
-      const screenY = e.endCoordinates?.screenY;
-      // The keyboard's top edge in host coordinates. In modal mode the host
-      // spans the whole screen, so the event's screen coordinate is directly
-      // usable and stays right when the reported height leaves out Android's
-      // navigation bar. Inline hosts are not screen-aligned, so fall back to
-      // the height there.
-      const keyboardTop = mode === 'modal' && typeof screenY === 'number' && screenY > 0 ? screenY : hostHeight - height;
-      const overlap = Math.max(0, hostHeight - keyboardTop);
-      keyboardOffset.value = withTiming(-overlap, {
-        duration: theme.motion.duration.normal
-      });
-    };
-    const onHide = () => {
-      keyboardOffset.value = withTiming(0, {
-        duration: theme.motion.duration.normal
-      });
-    };
-    const showSub = Keyboard.addListener(showEvt, onShow);
-    const hideSub = Keyboard.addListener(hideEvt, onHide);
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, [hostHeight, keyboardBehavior, keyboardOffset, mode, theme.motion.duration.normal]);
-
-  // ───────── Animated styles ─────────
-  // The top clamp (how high the sheet may ride with the keyboard up) must
-  // come from the window the sheet is drawn in. In modal mode that is the
-  // translucent Modal, which spans the status bar; the app window's provider
-  // reports a top inset of 0 there on Android (the app is not edge to edge),
-  // which put the handle under the status bar clock. A probe inside the
-  // Modal's own provider reports the right value; inline mode keeps the
-  // app-level inset.
-  const [modalTopInset, setModalTopInset] = useState(insets.top);
-  const safeAreaTop = mode === 'modal' ? modalTopInset : insets.top;
-  const sheetStyle = useAnimatedStyle(() => {
-    const yWithKb = translateY.value + keyboardOffset.value;
-    // When the keyboard is up, allow the sheet to slide above its natural
-    // max-snap-point top (`minTopY`) so the input area stays visible. We still
-    // clamp to the safe-area top so the sheet doesn't disappear under the
-    // status bar / notch.
-    const lowerBound = keyboardOffset.value < 0 ? safeAreaTop : minTopY;
-    const clamped = yWithKb < lowerBound ? lowerBound : yWithKb;
-    // Animate `top` (layout prop) instead of `transform: translateY`
-    // (visual only). Layout-prop animation under Reanimated still runs on
-    // the UI thread, but crucially the sheet's *hit-test box* moves with
-    // its visual position. With translateY the layout box stayed parked
-    // at top:0..maxSnap regardless of visual offset, so:
-    //   (a) the empty top half intercepted backdrop taps (worked around
-    //       previously via pointerEvents="box-none"), and
-    //   (b) drag gestures on the handle could be claimed by sibling
-    //       gesture handlers because the actual sheet view was effectively
-    //       hidden from the responder chain.
-    // Animating `top` collapses both problems into nothing — visible area
-    // == hit area — so we can drop the box-none hack too.
-    return {
-      top: clamped
-    };
-  });
-
-  // The sheet box is always maxSnapPoint tall (so a drag up reveals content
-  // that is already laid out), which means at a lower snap point its bottom
-  // part hangs below the host's edge. The body is therefore sized to the
-  // VISIBLE part of the sheet: from the sheet's actual (clamped) top down to
-  // the host's bottom, or to the keyboard's top edge while the keyboard is
-  // up. So the footer pins to the visible bottom at every snap, during a
-  // drag, and above the keyboard, and the content area is exactly what the
-  // user can see. Nothing is laid out behind the keyboard.
-  const bodyStyle = useAnimatedStyle(() => {
-    const kb = keyboardOffset.value;
-    const lowerBound = kb < 0 ? safeAreaTop : minTopY;
-    const y = translateY.value + kb;
-    const top = y < lowerBound ? lowerBound : y;
-    const visible = hostHeight + kb - top;
-    return {
-      height: visible < 0 ? 0 : visible > maxSnapPoint ? maxSnapPoint : visible
-    };
-  });
-  const isExpanded = currentIndex >= 0;
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const handleBackdropPress = useCallback(() => {
-    if (!enableBackdropPress) {
-      return;
-    }
-    triggerHaptic('selection');
-    close();
-  }, [enableBackdropPress, close]);
-
-  // RNGH Tap gesture for the backdrop. Plain RN Pressable on a sibling of a
-  // gesture-handler/reanimated sheet doesn't fire reliably on RN 0.85 / Fabric
-  // (the gesture system swallows the touch sequence). gorhom/bottom-sheet uses
-  // the same Gesture.Tap() pattern for the same reason.
-  const backdropTapGesture = useMemo(() => Gesture.Tap().withTestId(testID ? `${testID}-backdrop-gesture` : 'bottom-sheet-backdrop-gesture').maxDuration(250).onEnd((_e, success) => {
-    'worklet';
-
-    if (!success) {
-      return;
-    }
-    runOnJS(handleBackdropPress)();
-  }), [handleBackdropPress, testID]);
-  const contextValue = useMemo(() => ({
-    snapIndex: currentIndex,
-    snapPoints: resolvedSnapPoints,
-    expand,
-    collapse,
-    close
-  }), [currentIndex, resolvedSnapPoints, expand, collapse, close]);
-
-  // Don't render the backdrop / sheet tree when the sheet is fully closed.
-  // Inline: gated by `inlineMounted` (set in expand, cleared in
-  // markAnimationDone after close animation) — keeps an idle inline sheet
-  // from sitting over the parent and swallowing touches.
-  // Modal: gated by `modalVisible` for the same reason.
-  if (mode === 'inline' && !inlineMounted) {
-    return null;
-  }
-  if (mode === 'modal' && !modalVisible) {
-    return null;
-  }
-  const sheetTree = /*#__PURE__*/_jsxs(View, {
-    collapsable: false
-    // Modal mode: the backdrop is the modal's root, so it fills via flex.
-    // Inline mode: the backdrop overlays the parent, so it positions absolute.
-    // Either way it is exactly the box the sheet is positioned in, which is
-    // why the host height is measured here (see hostHeight).
-    ,
-    style: [mode === 'modal' ? styles.backdropModal : styles.backdropInline, {
-      backgroundColor: theme.colors.background.overlay
-    }],
-    onLayout: handleHostLayout,
-    testID: testID,
-    accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
-    children: [/*#__PURE__*/_jsx(GestureDetector, {
-      gesture: backdropTapGesture,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: StyleSheet.absoluteFill,
-        accessibilityRole: "button",
-        accessibilityLabel: "Close bottom sheet"
-      })
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      // 'dialog' is a valid platform role on web/iOS; RN's typings list it as a string union
-      // that varies by platform — cast keeps strict-mode happy.
-      accessibilityRole: "alert",
-      accessibilityLabel: accessibilityLabel,
-      accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
-      style: [styles.sheet, {
-        height: maxSnapPoint,
-        backgroundColor: theme.colors.background.elevated,
-        borderTopLeftRadius: theme.radius['2xl'],
-        borderTopRightRadius: theme.radius['2xl'],
-        ...smoothCorners,
-        ...theme.shadows.xl
-      }, containerStyle, sheetStyle],
-      children: /*#__PURE__*/_jsxs(SheetBody, {
-        style: [styles.body, bodyStyle],
-        keyboardOffset: keyboardOffset,
-        children: [/*#__PURE__*/_jsx(GestureDetector, {
-          gesture: panGesture,
-          children: /*#__PURE__*/_jsx(View, {
-            style: styles.handleRow,
-            accessible: true,
-            accessibilityLabel: "Drag handle",
-            accessibilityHint: "Drag up or down to resize the sheet, or swipe down to close it",
-            testID: testID ? `${testID}-handle` : 'bottom-sheet-handle',
-            children: /*#__PURE__*/_jsx(View, {
-              style: [styles.handle, {
-                backgroundColor: theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
-              }, handleIndicatorStyle]
-            })
-          })
-        }), header != null && /*#__PURE__*/_jsx(View, {
-          style: [styles.header, headerStyle],
-          children: header
-        }), scrollable ?
-        /*#__PURE__*/
-        // The ScrollView is registered as a native gesture so that, once
-        // it starts scrolling, gesture-handler cancels the React Native
-        // touch under the finger. Without it a fast flick that starts on
-        // a button inside the content released before the scroll had
-        // cancelled the press on iOS, and the button fired (a "Send" that
-        // closes the sheet looked like the flick closing it).
-        _jsx(GestureDetector, {
-          gesture: contentGesture,
-          children: /*#__PURE__*/_jsx(ScrollView, {
-            style: styles.content
-            // "always", not "handled": with "handled" the scroll responder
-            // blurs the focused input on release unless it has already seen
-            // a scroll event, and on iOS a fast flick releases before the
-            // first scroll event reaches JS, so the flick closed the
-            // keyboard. Taps on blank content therefore keep the keyboard;
-            // its own key, a backdrop tap or a handle drag still dismiss it.
-            ,
-            keyboardShouldPersistTaps: "always",
-            keyboardDismissMode: "none",
-            children: children
-          })
-        }) : /*#__PURE__*/_jsx(View, {
-          style: styles.content,
-          children: children
-        }), footer != null && /*#__PURE__*/_jsx(View, {
-          style: [styles.footer, footerStyle],
-          children: footer
-        })]
-      })
-    })]
-  });
-  const wrappedTree = /*#__PURE__*/_jsx(BottomSheetContext.Provider, {
-    value: contextValue,
-    children: sheetTree
-  });
-  if (mode === 'modal') {
-    return /*#__PURE__*/_jsx(Modal, {
-      transparent: true,
-      visible: modalVisible,
-      onRequestClose: close,
-      statusBarTranslucent: true,
-      navigationBarTranslucent: true,
-      animationType: "none",
-      supportedOrientations: ['portrait', 'landscape'],
-      children: /*#__PURE__*/_jsxs(SafeAreaProvider, {
-        style: styles.modalRoot,
-        children: [/*#__PURE__*/_jsx(TopInsetProbe, {
-          onChange: setModalTopInset
-        }), Platform.OS === 'android' ? /*#__PURE__*/_jsx(GestureHandlerRootView, {
-          style: styles.modalRoot,
-          children: wrappedTree
-        }) : wrappedTree]
-      })
-    });
-  }
-  return wrappedTree;
-});
-
-/**
- * The sheet's inner column: handle, header, content, footer. Pads its bottom
- * by the safe-area inset of the nearest provider, which in modal mode is the
- * one inside the Modal (see there) and in inline mode the app's.
- */
-/**
- * Reads the top inset of the nearest safe-area provider and reports it up.
- * Rendered inside the Modal's own provider so the sheet's top clamp follows
- * the Modal window (status bar included on Android), not the app window.
- */
-const TopInsetProbe = ({
-  onChange
-}) => {
-  const {
-    top
-  } = useSafeAreaInsets();
-  useEffect(() => {
-    onChange(top);
-  }, [top, onChange]);
-  return null;
-};
-const SheetBody = ({
-  style,
-  keyboardOffset,
-  children
-}) => {
-  const insets = useSafeAreaInsets();
-  const bottom = insets.bottom;
-  // The bottom safe-area padding keeps the footer clear of the gesture bar or
-  // home indicator. With the keyboard up that bar sits under the keyboard, so
-  // the padding would only be a blank strip above the keys: it shrinks by the
-  // covered height, to 0 once the keyboard covers the whole inset. Apps that
-  // want a gap above the keyboard add their own.
-  const paddingStyle = useAnimatedStyle(() => {
-    const remaining = bottom + keyboardOffset.value;
-    return {
-      paddingBottom: remaining > 0 ? remaining : 0
-    };
-  });
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [style, paddingStyle],
-    children: children
-  });
-};
-BottomSheet.displayName = 'BottomSheet';
-
-// ───────── Helpers ─────────
-
-const resolveSnapPoints = (points, screenH) => {
-  const resolved = points.map(p => {
-    if (typeof p === 'number') {
-      return p;
-    }
-    const pct = parseFloat(p);
-    if (Number.isNaN(pct)) {
-      return 0;
-    }
-    return pct / 100 * screenH;
-  });
-  return [...resolved].sort((a, b) => a - b);
-};
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-const buildStyles = _theme => StyleSheet.create({
-  backdropModal: {
-    // The backdrop is the modal's root View. On Fabric, an absolute-
-    // positioned root inside RNModal has no positioned ancestor and
-    // collapses to zero size, taking the scrim with it. `flex: 1` fills
-    // the modal content area reliably.
-    flex: 1
-  },
-  backdropInline: {
-    // Inline mode: overlay the parent. Parent must be positioned for this
-    // to take effect (the consumer is expected to render BottomSheet inside
-    // a relatively-positioned container).
-    ...StyleSheet.absoluteFill
-  },
-  sheet: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    // `top` is driven by the animated style (see sheetStyle). Omitted
-    // here so the static `0` doesn't fight the animated value during
-    // initial paint.
-    overflow: 'hidden'
-  },
-  body: {
-    // Height is animated to the visible part of the sheet (see bodyStyle);
-    // width follows the sheet.
-    overflow: 'hidden'
-  },
-  handleRow: {
-    // 40 px tall: the whole row is the drag target, not just the 4 px pill.
-    // The row, not a gesture hitSlop, sets the grab area (see panGesture).
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'stretch',
-    paddingTop: 12,
-    paddingBottom: 24
-  },
-  header: {
-    // No opinionated padding — slot owns its own styling. Sits between the
-    // drag handle and the scrollable content; does not flex.
-  },
-  footer: {
-    // Pinned to the bottom of the sheet (above the safe-area inset, which
-    // lives on SheetBody's paddingBottom). Does not flex, does not scroll
-    // with content. Rides with the keyboard via the sheet's `top` animation.
-  },
-  handle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2,
-    ...smoothCorners
-  },
-  content: {
-    flex: 1,
-    // Content taller than the area between header and footer is clipped
-    // here instead of drawing under the footer and the safe-area padding.
-    // Scrolling is the consumer's choice (wrap children in a ScrollView).
-    overflow: 'hidden'
-  },
-  modalRoot: {
-    flex: 1
-  }
-});
-export { BottomSheet };
-export default BottomSheet;
-//# sourceMappingURL=BottomSheet.js.map
+"use strict";import React,{createContext,forwardRef,useCallback,useContext,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Dimensions,Modal,Platform,ScrollView,StyleSheet,useWindowDimensions,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useReanimatedKeyboardAnimation}from"react-native-keyboard-controller";import Animated,{Easing,runOnJS,useAnimatedStyle,useDerivedValue,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{SafeAreaProvider,useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const TABLET_MIN_SHORT_SIDE=600,DIALOG_MAX_WIDTH=560,BottomSheetContext=createContext(null);export const useBottomSheet=()=>{const e=useContext(BottomSheetContext);if(!e)throw new Error("useBottomSheet must be used inside a <BottomSheet>.");return e};const SPRING_CONFIG={damping:20,stiffness:240,mass:1},CLOSE_VELOCITY_THRESHOLD=1e3,DRAG_ACTIVATION_OFFSET=10,BottomSheet=forwardRef((e,t)=>{const{snapPoints:o,index:s,onChange:n,onAnimate:a,onAfterClose:r,enablePanDownToClose:i=!0,enableBackdropPress:l=!0,scrollable:u=!1,scrollRef:c,onScroll:d,onContentSizeChange:h,onScrollLayout:m,scrollEventThrottle:b,keyboardBehavior:f="shift",mode:S="modal",presentation:g="sheet",handleIndicatorStyle:p,containerStyle:v,header:y,footer:w,headerStyle:x,footerStyle:C,children:k,accessibilityLabel:_,accessibilityViewIsModal:I,testID:R}=e,j=useTheme(),T=useSafeAreaInsets(),[M,O]=useState(()=>Dimensions.get("window").height),[V,D]=useState(()=>Dimensions.get("window").width),A=useCallback(e=>{const{height:t,width:o}=e.nativeEvent.layout;t>0&&O(e=>e===t?e:t),o>0&&D(e=>e===o?e:o)},[]),H=useWindowDimensions(),B="dialog"===g||"auto"===g&&Math.min(H.width,H.height)>=600,E=Math.min(560,V-2*j.spacing.xl),[P,G]=useState({top:T.top,bottom:T.bottom}),L="modal"===S?P.top:T.top,N="modal"===S?P.bottom:T.bottom,J=o.includes("content"),[F,z]=useMeasuredHeight(),[Y,$]=useMeasuredHeight(),[W,K,X]=useMeasuredHeight(),[q,U]=useMeasuredHeight(),Q=B?j.spacing.md:F,Z=J?Math.min(Q+(null!=y?Y:0)+W+(null!=w?q:0)+N,M-L):0,ee=useCallback((e,t)=>{J&&X(t),h?.(e,t)},[J,h,X]),te=useMemo(()=>resolveSnapPoints(o,M,Z),[o,M,Z]),oe=M,se=te[te.length-1]??0,ne=useSharedValue(oe),ae=useSharedValue(oe),re=useSharedValue(-1),[ie,le]=useState(-1),ue=useRef(!1),[ce,de]=useState(!1),[he,me]=useState(!1),be=useRef(!1),fe=useRef(r);fe.current=r;const[Se,ge]=useState(!1),pe=useCallback(e=>{if(e<0||e>=te.length)return oe;const t=te[e];return B?(M-t)/2:M-t},[te,M,oe,B]),ve=useCallback(e=>{ie!==e&&(le(e),re.value=e,n?.(e))},[ie,re,n]),ye=useCallback(()=>{ue.current=!1,re.value<0&&(be.current=!0,"modal"===S?(de(!1),"ios"!==Platform.OS&&me(!1)):ge(!1))},[S,re]),we=useCallback(()=>{be.current&&me(!1)},[]);useEffect(()=>{("modal"===S?!he:!Se)&&be.current&&(be.current=!1,fe.current?.())},[S,he,Se]);const xe=useCallback((e,t,o)=>{ue.current=!0,a?.(t,o),ne.value=withSpring(e,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(ye)()})},[a,ne,ye]),Ce=useCallback(e=>{const t="number"==typeof e?clamp(e,0,te.length-1):ie>=0?ie:0,o=re.value,s=pe(t);be.current=!1,"modal"===S?(me(!0),de(!0)):ge(!0),o<0&&(ne.value=oe),ve(t),xe(s,o,t)},[xe,oe,ie,re,S,te.length,ve,ne,pe]),ke=useCallback(()=>{if(0===te.length)return;const e=re.value,t=pe(0);ve(0),xe(t,e,0)},[xe,re,te.length,ve,pe]),_e=useCallback(()=>{const e=re.value;ve(-1),ue.current=!0,a?.(e,-1),ne.value=withTiming(oe,{duration:j.motion.duration.fast,easing:Easing.bezier(...j.motion.easing.accelerate)},e=>{"worklet";e&&runOnJS(ye)()})},[oe,re,ye,a,ve,ne,j.motion.duration.fast,j.motion.easing.accelerate]);useImperativeHandle(t,()=>({expand:Ce,collapse:ke,close:_e}),[Ce,ke,_e]),useEffect(()=>{"number"==typeof s&&s!==ie&&(-1===s?_e():Ce(s))},[s]);const Ie=useRef({hostHeight:M,contentSnap:Z});useEffect(()=>{const e=Ie.current;e.hostHeight===M&&e.contentSnap===Z||(Ie.current={hostHeight:M,contentSnap:Z},e.hostHeight===M&&re.value<0||(ne.value=withSpring(pe(re.value),SPRING_CONFIG)))},[M,Z]);const Re=M-se,je=useMemo(()=>te.map(e=>M-e),[te,M]),Te=useCallback((e,t)=>{const o=re.value;if(-1===e)return triggerHaptic("selection"),ve(-1),ue.current=!0,a?.(o,-1),void(ne.value=withTiming(oe,{duration:j.motion.duration.fast,easing:Easing.bezier(...j.motion.easing.accelerate)},e=>{"worklet";e&&runOnJS(ye)()}));ve(e),xe(t,o,e)},[xe,oe,re,ye,a,ve,ne,j.motion.duration.fast,j.motion.easing.accelerate]),Me=useMemo(()=>Gesture.Native().withTestId(R?`${R}-content-gesture`:"bottom-sheet-content-gesture"),[R]),Oe=useMemo(()=>{const e=je,t=oe,o=Re,s=i;return Gesture.Pan().withTestId(R?`${R}-pan-gesture`:"bottom-sheet-pan-gesture").activeOffsetY([-10,10]).failOffsetX([-15,15]).onStart(()=>{"worklet";ae.value=ne.value}).onUpdate(e=>{"worklet";const t=ae.value+e.translationY;ne.value=t<o?o+.25*(t-o):t}).onEnd(o=>{"worklet";const n=ne.value;if(o.velocityY>1e3)return s?void runOnJS(Te)(-1,t):void runOnJS(Te)(0,e[0]);let a=0,r=Math.abs(n-e[0]);for(let t=1;t<e.length;t++){const o=Math.abs(n-e[t]);o<r&&(r=o,a=t)}const i=e[0];s&&n-i>80?runOnJS(Te)(-1,t):runOnJS(Te)(a,e[a])})},[oe,ae,i,Te,Re,je,R,ne]),{height:Ve}=useReanimatedKeyboardAnimation(),De="shift"===f,Ae=useDerivedValue(()=>De?Ve.value:0),He=te[ie>=0?ie:0]??se,Be=j.spacing.md,Ee=useAnimatedStyle(()=>{if(B){const e=Ae.value,t=M+e-He-Be,o=e<0&&ne.value>t?t:ne.value;return{top:o<L?L:o}}const e=ne.value+Ae.value,t=Ae.value<0?L:Re;return{top:e<t?t:e}}),Pe=useAnimatedStyle(()=>{const e=Ae.value;if(B){const t=M+e-He-Be,o=e<0&&ne.value>t?t:ne.value,s=M+e-Be-(o<L?L:o);return{height:s<0?0:s>He?He:s}}const t=e<0?L:Re,o=ne.value+e,s=M+e-(o<t?t:o);return{height:s<0?0:s>se?se:s}}),Ge=ie>=0,Le=useMemo(()=>buildStyles(j),[j]),Ne=useCallback(()=>{l&&(triggerHaptic("selection"),_e())},[l,_e]),Je=useMemo(()=>Gesture.Tap().withTestId(R?`${R}-backdrop-gesture`:"bottom-sheet-backdrop-gesture").maxDuration(250).onEnd((e,t)=>{"worklet";t&&runOnJS(Ne)()}),[Ne,R]),Fe=useMemo(()=>({snapIndex:ie,snapPoints:te,expand:Ce,collapse:ke,close:_e}),[ie,te,Ce,ke,_e]);if("inline"===S&&!Se)return null;if("modal"===S&&!he)return null;const ze=_jsxs(View,{collapsable:!1,style:["modal"===S?Le.backdropModal:Le.backdropInline,{backgroundColor:j.colors.background.overlay}],onLayout:A,testID:R,accessibilityViewIsModal:I??Ge,children:[_jsx(GestureDetector,{gesture:Je,children:_jsx(Animated.View,{style:StyleSheet.absoluteFill,accessibilityRole:"button",accessibilityLabel:"Close bottom sheet"})}),_jsx(Animated.View,{accessibilityRole:"alert",accessibilityLabel:_,accessibilityViewIsModal:I??Ge,style:[Le.sheet,{height:se,backgroundColor:j.colors.background.elevated,borderTopLeftRadius:j.radius["2xl"],borderTopRightRadius:j.radius["2xl"],...smoothCorners,...j.shadows.xl},B?{height:He,left:(V-E)/2,right:void 0,width:E,borderBottomLeftRadius:j.radius["2xl"],borderBottomRightRadius:j.radius["2xl"]}:null,v,Ee],children:_jsxs(SheetBody,{style:[Le.body,Pe],keyboardOffset:Ae,children:[B?_jsx(View,{style:{height:j.spacing.md}}):_jsx(GestureDetector,{gesture:Oe,children:_jsx(View,{style:Le.handleRow,onLayout:J?z:void 0,accessible:!0,accessibilityLabel:"Drag handle",accessibilityHint:"Drag up or down to resize the sheet, or swipe down to close it",testID:R?`${R}-handle`:"bottom-sheet-handle",children:_jsx(View,{style:[Le.handle,{backgroundColor:j.components.bottomSheet?.handleColor??j.colors.border.primary},p]})})}),null!=y&&_jsx(View,{style:[Le.header,x],onLayout:J?$:void 0,children:y}),u?_jsx(GestureDetector,{gesture:Me,children:_jsx(ScrollView,{ref:c,style:Le.content,onScroll:d,onContentSizeChange:ee,onLayout:m,scrollEventThrottle:b,keyboardShouldPersistTaps:"always",keyboardDismissMode:"none",children:k})}):_jsx(View,{style:Le.content,children:J?_jsx(View,{onLayout:K,children:k}):k}),null!=w&&_jsx(View,{style:[Le.footer,C],onLayout:J?U:void 0,children:w})]})})]}),Ye=_jsx(BottomSheetContext.Provider,{value:Fe,children:ze});return"modal"===S?_jsx(Modal,{transparent:!0,visible:ce,onRequestClose:_e,onDismiss:"ios"===Platform.OS?we:void 0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",supportedOrientations:["portrait","landscape"],children:_jsxs(SafeAreaProvider,{style:Le.modalRoot,children:[_jsx(InsetsProbe,{onChange:G}),"android"===Platform.OS?_jsx(GestureHandlerRootView,{style:Le.modalRoot,children:Ye}):Ye,_jsx(ToastHost,{})]})}):Ye}),InsetsProbe=({onChange:e})=>{const{top:t,bottom:o}=useSafeAreaInsets();return useEffect(()=>{e(e=>e.top===t&&e.bottom===o?e:{top:t,bottom:o})},[t,o,e]),null},SheetBody=({style:e,keyboardOffset:t,children:o})=>{const s=useSafeAreaInsets().bottom,n=useAnimatedStyle(()=>{const e=s+t.value;return{paddingBottom:e>0?e:0}});return _jsx(Animated.View,{style:[e,n],children:o})};BottomSheet.displayName="BottomSheet";const useMeasuredHeight=()=>{const[e,t]=useState(0),o=useCallback(e=>{t(t=>t===e?t:e)},[]);return[e,useCallback(e=>o(e.nativeEvent.layout.height),[o]),o]},resolveSnapPoints=(e,t,o)=>[...e.map(e=>{if("number"==typeof e)return e;if("content"===e)return o;const s=parseFloat(e);return Number.isNaN(s)?0:s/100*t})].sort((e,t)=>e-t),clamp=(e,t,o)=>Math.min(Math.max(e,t),o),buildStyles=e=>StyleSheet.create({backdropModal:{flex:1},backdropInline:{...StyleSheet.absoluteFill},sheet:{position:"absolute",left:0,right:0,overflow:"hidden"},body:{overflow:"hidden"},handleRow:{alignItems:"center",justifyContent:"center",alignSelf:"stretch",paddingTop:12,paddingBottom:24},header:{},footer:{},handle:{width:36,height:4,borderRadius:2,...smoothCorners},content:{flex:1,overflow:"hidden"},modalRoot:{flex:1}});export{BottomSheet};export default BottomSheet;