@mrmeg/expo-ui 0.7.1 → 0.7.3

package/dist/components/BottomSheet.d.ts

@@ -1,24 +1,102 @@
 import React from "react";
 import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
+/**
+ * BottomSheet — a sliding bottom sheet with a compound API, backed by the
+ * platform's native sheet via `@expo/ui/community/bottom-sheet`:
+ *
+ *   - iOS:     SwiftUI `.sheet()` with presentation detents
+ *   - Android: Material3 `ModalBottomSheet`
+ *   - Web:     `vaul` drawer (bundled with @expo/ui)
+ *
+ * The compound surface (Trigger / Content / Handle / Header / Body / Footer /
+ * Close), controlled + uncontrolled state, and theming match a hand-rolled
+ * sheet, but the platform owns gestures and keyboard avoidance — so there's no
+ * PanResponder, snap-physics, or keyboard lift-and-shrink code to maintain.
+ *
+ * Platform-owned behaviors (props accepted for ergonomics, but the platform
+ * decides):
+ *   - `.Handle` is a no-op: the platform draws the drag indicator.
+ *   - `swipeEnabled` / `avoidKeyboard` / `dismissKeyboardOnDrag` are accepted
+ *     for call-site ergonomics but have no effect — the platform handles them.
+ *   - Sheet *chrome* (corner radius, system background, safe area) is the
+ *     platform's on native; theming reaches the content + background color.
+ *   - On Android only two snap states exist (partial / expanded); extra snap
+ *     points map to the nearest of those two.
+ *
+ * Scrollable bodies: the native sheet doesn't bound the hosted RN content to
+ * the detent height, so a tall `Body` overflows and clips its footer/tail. When
+ * `Body` detects overflow, `Content` caps the column to the detent height so the
+ * `ScrollView` actually scrolls to the bottom. Swipe-to-dismiss still works (the
+ * native sheet coordinates the pan: a pull at the top of the scroll view
+ * dismisses, elsewhere it scrolls). A close affordance is also surfaced for
+ * scrollable sheets so there's a one-tap close: the `Header` renders a trailing
+ * X, or — if there's no `Header` — `Content` floats one in the top-right corner.
+ * No extra props required.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet open={open} onOpenChange={setOpen} snapPoints={["50%"]}>
+ *   <BottomSheet.Trigger asChild>
+ *     <Button>Open</Button>
+ *   </BottomSheet.Trigger>
+ *   <BottomSheet.Content>
+ *     <BottomSheet.Header>
+ *       <SansSerifBoldText>Title</SansSerifBoldText>
+ *     </BottomSheet.Header>
+ *     <BottomSheet.Body>
+ *       <SansSerifText>Content</SansSerifText>
+ *     </BottomSheet.Body>
+ *     <BottomSheet.Footer>
+ *       <Button>Action</Button>
+ *     </BottomSheet.Footer>
+ *   </BottomSheet.Content>
+ * </BottomSheet>
+ * ```
+ */
 type SnapPoint = number | `${number}%`;
 interface BottomSheetContextValue {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     toggle: () => void;
-    snapPoints: number[];
-    currentSnapIndex: number;
+    snapPoints: SnapPoint[];
     closeOnBackdropPress: boolean;
+    /**
+     * True when a `Body`'s content overflows its viewport (is genuinely
+     * scrollable). Drives two things: `Content` caps the column to the detent
+     * height so the `ScrollView` can reach its bottom, and a close affordance is
+     * surfaced (a `Header` X, or floating if there's no `Header`) so a long sheet
+     * always has a one-tap close. Set by `Body`.
+     */
+    scrollable: boolean;
+    setScrollable: (scrollable: boolean) => void;
+    /** Whether a `Header` is mounted, so `Content` knows to render a fallback close. */
+    hasHeader: boolean;
+    setHasHeader: (present: boolean) => void;
+    /** Whether a `Footer` is mounted, so `Body` can own the bottom safe-area inset when it isn't. */
+    hasFooter: boolean;
+    setHasFooter: (present: boolean) => void;
 }
 interface BottomSheetProps {
-    /** Controlled open state */
+    /** Controlled open state. Omit to use uncontrolled mode with `defaultOpen`. */
     open?: boolean;
-    /** Callback when open state changes */
+    /** Callback when open state changes. */
     onOpenChange?: (open: boolean) => void;
-    /** Default open state for uncontrolled mode */
+    /** Initial open state for uncontrolled mode. Default: false. */
     defaultOpen?: boolean;
-    /** Snap point heights (px or percentage strings) */
+    /** Snap point heights (px or percentage strings). Default: ["50%"]. */
     snapPoints?: SnapPoint[];
-    /** Whether to close when backdrop is pressed */
+    /**
+     * Whether swiping/pulling down (or tapping the backdrop) dismisses the sheet.
+     * Maps to the native sheet's `enablePanDownToClose` (iOS
+     * `interactiveDismissDisabled`). Default: true.
+     *
+     * Works with scrollable bodies — the native sheet coordinates the pan (pull at
+     * the top of the scroll view dismisses, elsewhere it scrolls). Set to `false`
+     * to disable dismiss entirely; the sheet then surfaces an explicit close
+     * affordance automatically (a `Header` X, or a floating X if there's no
+     * `Header`). Scrollable sheets also get that close affordance regardless, so
+     * there's always a one-tap close.
+     */
     closeOnBackdropPress?: boolean;
     children: React.ReactNode;
 }
@@ -28,13 +106,11 @@ interface BottomSheetTriggerProps {
     style?: StyleProp<ViewStyle>;
 }
 interface BottomSheetContentProps extends ViewProps {
-    /** Whether to enable swipe/drag gestures */
+    /** Accepted for call-site ergonomics; ignored (platform owns gestures). */
     swipeEnabled?: boolean;
-    /** Velocity threshold for quick swipe to close */
-    velocityThreshold?: number;
-    /** Whether to move the sheet with the native keyboard animation. Default: true. */
+    /** Accepted for call-site ergonomics; ignored (platform owns keyboard avoidance). */
     avoidKeyboard?: boolean;
-    /** Whether to dismiss the keyboard when a native drag starts. Default: true. */
+    /** Accepted for call-site ergonomics; ignored (platform owns keyboard). */
     dismissKeyboardOnDrag?: boolean;
     style?: StyleProp<ViewStyle>;
     children: React.ReactNode;
@@ -57,12 +133,12 @@ interface BottomSheetCloseProps {
     style?: StyleProp<ViewStyle>;
 }
 declare function useBottomSheetContext(): BottomSheetContextValue;
-declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints: rawSnapPoints, closeOnBackdropPress, children, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints, closeOnBackdropPress, children, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
 declare function BottomSheetTrigger({ asChild, children, style: styleOverride }: BottomSheetTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare function BottomSheetContent({ swipeEnabled, velocityThreshold, avoidKeyboard, dismissKeyboardOnDrag, style: styleOverride, children, ...props }: BottomSheetContentProps): import("react/jsx-runtime").JSX.Element | null;
-declare function BottomSheetHandle({ style }: BottomSheetHandleProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetContent({ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, style: styleOverride, children, }: BottomSheetContentProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetHandle(_props: BottomSheetHandleProps): null;
 declare function BottomSheetHeader({ children, style, ...props }: BottomSheetHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare function BottomSheetBody({ children, style, ...props }: BottomSheetBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetBody({ children, style, contentContainerStyle, onContentSizeChange, onLayout, ...props }: BottomSheetBodyProps): import("react/jsx-runtime").JSX.Element;
 declare function BottomSheetFooter({ children, style, ...props }: BottomSheetFooterProps): import("react/jsx-runtime").JSX.Element;
 declare function BottomSheetClose({ asChild, children, style: styleOverride }: BottomSheetCloseProps): import("react/jsx-runtime").JSX.Element;
 declare const BottomSheet: typeof BottomSheetRoot & {