@tamagui/sheet 3.0.0-beta.924.1 → 3.0.0

package/src/SheetDragSurface.tsx

@@ -0,0 +1,40 @@
+import type { TamaguiElement } from '@tamagui/core'
+import { View } from '@tamagui/core'
+import { PanResponder } from '@tamagui/react-native-pan-responder'
+import { useResponderEvents } from '@tamagui/react-native-use-responder-events'
+import * as React from 'react'
+
+import type { SheetDragSurfaceProps } from './types'
+
+/**
+ * The surface the sheet is dragged by.
+ *
+ * Web runs the same PanResponder react-native does, over the same responder
+ * system, so the drag behaves as it did when this was a react-native `View`.
+ * `gestureHandler` is native-only, so the props for it are ignored here.
+ */
+export function SheetDragSurface({ panConfig, children }: SheetDragSurfaceProps) {
+  const ref = React.useRef<TamaguiElement>(null)
+
+  const panHandlers = React.useMemo(
+    () => (panConfig ? PanResponder.create(panConfig).panHandlers : undefined),
+    [panConfig]
+  )
+
+  const { onClickCapture, ...responderHandlers } = panHandlers ?? {}
+  useResponderEvents(ref, responderHandlers)
+
+  // onClickCapture is a DOM prop: tamagui forwards it to the element untouched
+  // but only types react-native's prop surface
+  const domProps = { onClickCapture } as Record<string, unknown>
+
+  return (
+    // flexBasis auto, like the container frame: under the web style compat
+    // `flex={1}` means a basis of 0, which collapses this surface inside the
+    // animated wrapper (that wrapper has no height of its own in fit mode), and
+    // a collapsed surface leaves the frame unmeasured and parked off-screen
+    <View ref={ref} {...domProps} flex={1} flexBasis="auto" width="100%" height="100%">
+      {children}
+    </View>
+  )
+}

package/src/SheetImplementationCustom.tsx

@@ -1,5 +1,7 @@
 import { ProvideAdaptContext, useAdaptContext } from '@tamagui/adapt'
 import { AnimatePresence } from '@tamagui/animate-presence'
+// leaf subpath: the grammar itself belongs to the drivers, not to every sheet
+import { getTransitionResolver } from '@tamagui/animation-helpers/transitionResolver'
 import { useComposedRefs } from '@tamagui/compose-refs'
 import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import {
@@ -16,17 +18,18 @@ import {
 } from '@tamagui/core'
 import { needsPortalRepropagation, Portal } from '@tamagui/portal'
 import React, { useState } from 'react'
+import type { PanResponderConfig } from '@tamagui/react-native-pan-responder'
 import type {
-  Animated,
   GestureResponderEvent,
   LayoutChangeEvent,
   PanResponderGestureState,
-} from 'react-native'
-import { Dimensions, PanResponder, View } from 'react-native'
+  ViewInstance as View,
+} from '@tamagui/react-native-types'
 import { ParentSheetContext, SheetInsideSheetContext } from './contexts'
 import { SHEET_OVERLAY_MARKER } from './constants'
-import { GestureDetectorWrapper } from './GestureDetectorWrapper'
 import { getGestureHandlerState } from './gestureState'
+import { SheetDragSurface } from './SheetDragSurface'
+import { getStableViewportHeight } from './stableViewportHeight'
 import { GestureSheetProvider } from './GestureSheetContext'
 import { resisted } from './helpers'
 import {
@@ -37,7 +40,6 @@ import {
 import {
   getWebKeyboardResizeHeight,
   getMaxViewportHeight,
-  getStableLayoutViewportHeight,
   getWebVisualViewportOffsetTop,
   MIN_KEYBOARD_HEIGHT,
 } from './webViewport'
@@ -75,22 +77,6 @@ let sheetHiddenStyleSheet: HTMLStyleElement | null = null
 // deepest sheet sits last), popped on close/unmount.
 const sheetEscapeLayers: object[] = []
 
-// on web we are always relative to window, on to screen
-const relativeDimensionTo = isWeb ? 'window' : 'screen'
-
-// height of the viewport the sheet positions against. on web this MUST be the
-// stable layout viewport and NOT Dimensions.get('window') — react-native-web's
-// Dimensions tracks visualViewport, which shrinks by the soft keyboard. capping
-// frameSize / maxContentSize against that shrinking value corrupts the fit-mode
-// math (translateY = screenSize - frameSize), detaching the sheet's bottom from
-// the screen edge when the keyboard opens. NOTE: window.innerHeight is NOT
-// stable on real iOS Safari (it shrinks with the keyboard too), so we use the
-// self-correcting baseline from webViewport instead. see getStableLayoutViewportHeight.
-function getStableViewportHeight(): number {
-  if (isWeb && typeof window !== 'undefined') return getStableLayoutViewportHeight()
-  return Dimensions.get(relativeDimensionTo).height
-}
-
 export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
   function SheetImplementationCustom(props, forwardedRef) {
     const parentSheet = React.useContext(ParentSheetContext)
@@ -150,29 +136,32 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
         return transitionConfigProp
       }
 
-      const [animationProp, animationPropConfig] = !transition
-        ? []
-        : Array.isArray(transition)
-          ? transition
-          : ([transition] as const)
-
-      // look up named animation config from driver if available
-      const namedConfig =
-        animationProp && animationDriver.animations?.[animationProp as string]
-      if (namedConfig) {
-        // css stores string configs (e.g. '150ms ease-out'); object-spreading a
-        // string produces char-indexed junk. the css visual is driven by the DOM
-        // `transition` prop, so pass only any explicit override object through.
-        if (typeof namedConfig === 'string') {
-          return animationPropConfig ?? null
-        }
-        return {
-          ...namedConfig,
-          ...animationPropConfig,
-        }
+      // the sheet drives its position through an animated number rather than a
+      // style prop, so it resolves the authored transition itself. it goes
+      // through the same grammar every driver and the compiler use, so a config
+      // entry never means one thing here and another in a style prop. the raw
+      // config is the wrong thing to spread: presets are authored as
+      // `{ duration, bounce }` in milliseconds, and motion reads `duration` in
+      // seconds.
+      const resolved = transition
+        ? getTransitionResolver()?.resolve(transition, {
+            animations: animationDriver.animations,
+          })
+        : null
+      const timing = resolved?.all?.timing
+      if (!timing) return null
+      if (timing.kind === 'timing') {
+        return { type: 'timing', duration: timing.durationMs }
+      }
+      // stiffness/damping/mass is the spelling every spring driver takes, and
+      // the resolver derives it from `{ duration, bounce }` when that is what
+      // the config was written in
+      return {
+        type: 'spring',
+        stiffness: timing.stiffness,
+        damping: timing.damping,
+        mass: timing.mass,
       }
-
-      return null
     })()
 
     /**
@@ -353,7 +342,7 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
           ? preKeyboardFrameSize.current
           : 0
 
-    const AnimatedView = (animationDriver.View ?? TamaguiView) as typeof Animated.View
+    const AnimatedView = (animationDriver.View ?? TamaguiView) as React.ComponentType<any>
 
     useIsomorphicLayoutEffect(() => {
       if (!(sheetInsideSheet && open)) return
@@ -600,20 +589,15 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
 
       if (hasntMeasured && screenSize && frameSize) {
         at.current = screenSize
-        animatedNumber.setValue(
-          screenSize,
-          {
-            type: 'timing',
-            duration: 0,
-          },
-          () => {
-            syncAnimatedPosition(screenSize)
-            // imperfect but struggling to render properly here
-            setTimeout(() => {
-              setDisableAnimation(false)
-            }, 10)
-          }
-        )
+        // jump without waiting on a driver completion callback: drivers can drop
+        // onFinish (lost UI/JS hop under load) and the sheet would stay parked
+        // offscreen behind its overlay forever
+        animatedNumber.setValue(screenSize, { type: 'direct' })
+        syncAnimatedPosition(screenSize)
+        // imperfect but struggling to render properly here
+        setTimeout(() => {
+          setDisableAnimation(false)
+        }, 10)
         return
       }
 
@@ -667,10 +651,12 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
     const themeName = useThemeName()
     const [blockPan, setBlockPan] = React.useState(false)
 
-    const panResponder = React.useMemo(() => {
-      if (disableDrag) return
-      if (!frameSize) return
-      if (isShowingInnerSheet) return
+    // the drag surface turns this into a PanResponder. it is built here because
+    // the handlers close over the sheet's live drag state and the scroll bridge.
+    const panConfig = React.useMemo((): PanResponderConfig | null => {
+      if (disableDrag) return null
+      if (!frameSize) return null
+      if (isShowingInnerSheet) return null
 
       // use keyboard-adjusted positions (matches the RNGH path): when the
       // keyboard is open the sheet sits at activePositions[0], so clamping drags
@@ -754,7 +740,7 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
           // touch is on the ScrollView node — the web scroll-view gesture hook
           // owns it and drives drag/release through scrollBridge directly (it
           // re-baselines via scrollBridge.startPanDrag on each pan handoff). if
-          // we also granted here, RNW's PanResponder would set the animated
+          // we also granted here, the PanResponder would set the animated
           // position from a second, differently-based offset every move and the
           // sheet would jitter/jump. defer entirely to the hook.
           if (scrollBridge.scrollNodeTouched) {
@@ -837,7 +823,7 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
         animateTo(positionIndex)
       }
 
-      return PanResponder.create({
+      return {
         onMoveShouldSetPanResponder: onMoveShouldSet,
         // once we own the drag, don't yield it to another responder
         // (re-renders during the drag were cooperatively terminating it under
@@ -861,7 +847,7 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
         onPanResponderEnd: finish,
         onPanResponderTerminate: finish,
         onPanResponderRelease: finish,
-      })
+      }
     }, [
       disableDrag,
       isShowingInnerSheet,
@@ -1110,16 +1096,11 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
                 </SheetOverlayLayerContext.Provider>
 
                 {snapPointsMode !== 'percent' && (
-                  <View
-                    style={{
-                      opacity: 0,
-                      position: 'absolute',
-                      top: 0,
-                      left: 0,
-                      right: 0,
-                      bottom: 0,
-                      pointerEvents: 'none',
-                    }}
+                  <TamaguiView
+                    opacity={0}
+                    position="absolute"
+                    inset={0}
+                    pointerEvents="none"
                     onLayout={handleMaxContentViewLayout}
                   />
                 )}
@@ -1147,19 +1128,13 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
                     animatedStyle,
                   ]}
                 >
-                  {/* wrap children with plain RN View for panResponder - tamagui views no longer handle responder events on web */}
-                  {gestureHandlerEnabled && panGesture ? (
-                    <GestureDetectorWrapper gesture={panGesture} style={{ flex: 1 }}>
-                      {animatedChildren}
-                    </GestureDetectorWrapper>
-                  ) : (
-                    <View
-                      {...panResponder?.panHandlers}
-                      style={{ flex: 1, width: '100%', height: '100%' }}
-                    >
-                      {animatedChildren}
-                    </View>
-                  )}
+                  <SheetDragSurface
+                    gestureHandlerEnabled={gestureHandlerEnabled}
+                    panGesture={panGesture}
+                    panConfig={panConfig}
+                  >
+                    {animatedChildren}
+                  </SheetDragSurface>
                 </AnimatedView>
               </SheetAnimatedPositionContext.Provider>
             </GestureSheetProvider>
@@ -1187,6 +1162,8 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
     const shouldMountChildren = unmountChildrenWhenHidden ? !isFullyClosed : true
 
     if (modal) {
+      // an empty portal still mounts a full-screen wrapper in the native root host
+      if (!shouldMountChildren) return null
       // a modal sheet is teleported through <Portal> to the root portal host.
       // that host is mounted by TamaguiProvider, which may sit ABOVE the app's
       // GestureHandlerRootView - so the teleported content lands outside any
@@ -1200,12 +1177,10 @@ export const SheetImplementationCustom = createRefComponent<View, SheetProps>(
       // collapses to 0 height while closed so it occupies no hit area - see
       // rnghRootStyleOpen/Closed above for why pointerEvents can't be used.
       const RNGHRoot = getGestureHandlerState().RootView
-      const mountedContents = shouldMountChildren ? (
-        <ContainerComponent>{contents}</ContainerComponent>
-      ) : null
+      const mountedContents = <ContainerComponent>{contents}</ContainerComponent>
       const modalContents = (
         <Portal stackZIndex={zIndex} hidden={!isVisuallyActive} {...portalProps}>
-          {mountedContents && RNGHRoot ? (
+          {RNGHRoot ? (
             <RNGHRoot style={open ? rnghRootStyleOpen : rnghRootStyleClosed}>
               {mountedContents}
             </RNGHRoot>

package/src/SheetScrollView.tsx

@@ -1,5 +1,11 @@
 import { composeRefs } from '@tamagui/compose-refs'
-import { createStyledHOC, isWeb, style, View, type GetProps } from '@tamagui/core'
+import {
+  createRefComponent,
+  createStyledHOC,
+  isWeb,
+  View,
+  type GetProps,
+} from '@tamagui/core'
 import type { ScrollViewRef } from '@tamagui/scroll-view'
 import { ScrollView } from '@tamagui/scroll-view'
 import { useControllableState } from '@tamagui/use-controllable-state'
@@ -18,7 +24,10 @@ import {
 } from './webViewport'
 
 const SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'
-const sheetContentStyle = style({ minHeight: '100%' })
+// plain object, not a style piece: these values are static (no theme tokens),
+// and style() warns when a lazily-required module first evaluates during a
+// render — which is exactly when a route-level sheet module loads.
+const sheetContentStyle = { minHeight: '100%' }
 
 type SheetScrollViewBaseProps = GetProps<typeof ScrollView>
 
@@ -30,8 +39,7 @@ type SheetScrollViewProps = SheetScopedProps<
   }
 >
 
-export const SheetScrollView = createStyledHOC(
-  ScrollView,
+const SheetScrollViewCustom = createRefComponent<ScrollViewRef, SheetScrollViewProps>(
   (
     {
       scope,
@@ -44,6 +52,8 @@ export const SheetScrollView = createStyledHOC(
     ref
   ) => {
     const context = useSheetContext(scope)
+    if (context.onlyShowContainer)
+      throw new Error('Custom Sheet scrolling requires a custom Sheet')
     const gestureContext = useGestureSheetContext()
     const { scrollBridge, setHasScrollView, hasFit, screenSize } = context
     const keyboardOccludedHeight = Math.max(0, context.keyboardOccludedHeight || 0)
@@ -376,6 +386,18 @@ export const SheetScrollView = createStyledHOC(
         {contentWrapper}
       </ScrollView>
     )
+  }
+)
+
+export const SheetScrollView = createStyledHOC(
+  ScrollView,
+  ({ scope, ...props }: SheetScrollViewProps, ref) => {
+    const context = useSheetContext(scope)
+    return context.onlyShowContainer ? (
+      <ScrollView {...props} ref={ref} />
+    ) : (
+      <SheetScrollViewCustom {...props} scope={scope} ref={ref} />
+    )
   },
   {
     disableTheme: true,

package/src/nativeSheet.native.tsx

@@ -0,0 +1,110 @@
+import { createRefComponent } from '@tamagui/core'
+import type { ViewInstance as View } from '@tamagui/react-native-types'
+import { useMemo, useRef, useState } from 'react'
+import { Platform } from 'react-native'
+import { SheetNativeSystemContext, SheetProvider } from './SheetContext'
+import type {
+  NativeSheetRenderer,
+  NativeSheetSnapPoint,
+  SheetNativePlatforms,
+  SheetProps,
+} from './types'
+import { useSheetOpenState } from './useSheetOpenState'
+import { useSheetState } from './useSheetState'
+
+const nativeSheets: Partial<Record<SheetNativePlatforms, NativeSheetImplementation>> = {}
+type NativeSheetImplementation = ReturnType<typeof createRefComponent<View, SheetProps>>
+
+export function getNativeSheet(platform: SheetNativePlatforms) {
+  if (Platform.OS !== platform) return null
+  return nativeSheets[platform] ?? null
+}
+
+export function setupNativeSheet(
+  platform: SheetNativePlatforms,
+  Renderer: NativeSheetRenderer
+) {
+  nativeSheets[platform] = createRefComponent<View, SheetProps>(
+    function NativeSheet(props, ref) {
+      // a native request cannot replace a controlled parent's accepted value.
+      const state = useSheetOpenState(props, 'prop-wins')
+      const { maxContentSize, ...sheetState } = useSheetState(props, state)
+      const { open, setOpen } = state
+      const openRef = useRef(open)
+      openRef.current = open
+      const [dismissed, setDismissed] = useState(!open)
+      const [previousOpen, setPreviousOpen] = useState(open)
+      if (previousOpen !== open) {
+        setPreviousOpen(open)
+        if (open) setDismissed(false)
+      }
+      const { snapPoints, snapPointsMode } = sheetState
+      const points = useMemo(() => {
+        const authored = props.dismissOnSnapToBottom
+          ? snapPoints.slice(0, -1)
+          : snapPoints
+        return authored.map((point): NativeSheetSnapPoint => {
+          if (point === 'fit' && (snapPointsMode === 'fit' || snapPointsMode === 'mixed'))
+            return { type: 'fit' }
+          const percent =
+            snapPointsMode === 'percent' ||
+            (snapPointsMode === 'mixed' &&
+              typeof point === 'string' &&
+              point.endsWith('%'))
+          const value =
+            percent && typeof point === 'string' ? Number(point.slice(0, -1)) : point
+          if (
+            typeof value !== 'number' ||
+            !Number.isFinite(value) ||
+            value < 0 ||
+            (percent && value > 100)
+          ) {
+            throw new Error(`Invalid native Sheet snap point: ${String(point)}`)
+          }
+          if (snapPointsMode === 'fit')
+            throw new Error('Native Sheet fit mode requires a fit snap point')
+          return { type: percent ? 'percent' : 'height', value }
+        })
+      }, [snapPoints, snapPointsMode, props.dismissOnSnapToBottom])
+      if (!points.length) throw new Error('Native Sheet requires a snap point')
+      const position =
+        open &&
+        (sheetState.position < 0 ||
+          (props.dismissOnSnapToBottom && sheetState.position === points.length))
+          ? 0
+          : sheetState.position
+      if (open && (!Number.isInteger(position) || position >= points.length))
+        throw new Error('Native Sheet position must select an authored snap point')
+      const {
+        defaultOpen,
+        defaultPosition,
+        unmountChildrenWhenHidden,
+        children,
+        ...rendererProps
+      } = props
+      return (
+        <SheetNativeSystemContext.Provider value>
+          <SheetProvider {...sheetState} onlyShowContainer>
+            <Renderer
+              {...rendererProps}
+              ref={ref}
+              unmountChildrenWhenHidden={unmountChildrenWhenHidden}
+              open={open}
+              onOpenChange={setOpen}
+              position={position}
+              onPositionChange={sheetState.setPosition}
+              snapPoints={points}
+              onDismiss={() => {
+                if (openRef.current) return
+                setDismissed(true)
+                state.onNativeDismiss?.()
+              }}
+            >
+              {unmountChildrenWhenHidden && dismissed ? null : children}
+            </Renderer>
+          </SheetProvider>
+        </SheetNativeSystemContext.Provider>
+      )
+    }
+  )
+}

package/src/nativeSheet.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'react'
+import type { ViewInstance as View } from '@tamagui/react-native-types'
+import type { ComponentType } from 'react'
+import type { NativeSheetRenderer, SheetNativePlatforms, SheetProps } from './types'
+
+// registration is native-only; web always uses Tamagui's own sheet.
+export function getNativeSheet(
+  _platform: SheetNativePlatforms
+): ComponentType<SheetProps & { ref?: Ref<View> }> | null {
+  return null
+}
+
+export function setupNativeSheet(
+  _platform: SheetNativePlatforms,
+  _Renderer: NativeSheetRenderer
+) {}

package/src/stableViewportHeight.native.ts

@@ -0,0 +1,9 @@
+import { Dimensions } from 'react-native'
+
+/**
+ * Height of the viewport the sheet positions against. Native measures against
+ * the screen rather than the window, so it does not move with the keyboard.
+ */
+export function getStableViewportHeight(): number {
+  return Dimensions.get('screen').height
+}

package/src/stableViewportHeight.ts

@@ -0,0 +1,15 @@
+import { getStableLayoutViewportHeight } from './webViewport'
+
+/**
+ * Height of the viewport the sheet positions against.
+ *
+ * This MUST be the stable layout viewport: the visual viewport shrinks by the
+ * soft keyboard, and capping frameSize / maxContentSize against a shrinking
+ * value corrupts the fit-mode math (translateY = screenSize - frameSize),
+ * detaching the sheet's bottom from the screen edge when the keyboard opens.
+ * NOTE: window.innerHeight is NOT stable on real iOS Safari (it shrinks with
+ * the keyboard too), hence the self-correcting baseline in webViewport.
+ */
+export function getStableViewportHeight(): number {
+  return getStableLayoutViewportHeight()
+}

package/src/types.tsx

@@ -1,7 +1,9 @@
 import type { AnimatedNumberStrategy, TransitionProp } from '@tamagui/core'
 import type { PortalProps } from '@tamagui/portal'
+import type { PanResponderConfig } from '@tamagui/react-native-pan-responder'
 import type { RemoveScroll } from '@tamagui/remove-scroll'
-import type { ReactNode } from 'react'
+import type { ComponentType, ReactNode, Ref } from 'react'
+import type { ViewInstance as View } from '@tamagui/react-native-types'
 import type React from 'react'
 
 export type SheetScopes = string
@@ -210,3 +212,44 @@ export interface KeyboardControllerSheetResult {
    */
   flushPendingHide: () => void
 }
+
+export type SheetDragSurfaceProps = {
+  /** react-native-gesture-handler is set up and owns the drag (native only) */
+  gestureHandlerEnabled: boolean
+  /** the `Gesture.Pan` to attach when gesture handler owns the drag */
+  panGesture: any
+  /** the PanResponder config to drive the drag with otherwise, null when dragging is off */
+  panConfig: PanResponderConfig | null
+  children?: ReactNode
+}
+
+export type SheetNativePlatforms = 'ios'
+
+export type NativeSheetSnapPoint =
+  | { type: 'percent'; value: number }
+  | { type: 'height'; value: number }
+  | { type: 'fit' }
+
+export type NativeSheetRendererProps = Omit<
+  SheetProps,
+  | 'open'
+  | 'defaultOpen'
+  | 'onOpenChange'
+  | 'snapPoints'
+  | 'position'
+  | 'defaultPosition'
+  | 'onPositionChange'
+  | 'children'
+> & {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  snapPoints: readonly NativeSheetSnapPoint[]
+  position: number
+  onPositionChange: (position: number) => void
+  /** report physical removal after accepted close; never report an interrupted close. */
+  onDismiss: () => void
+  children: ReactNode
+  ref?: Ref<View>
+}
+
+export type NativeSheetRenderer = ComponentType<NativeSheetRendererProps>

package/src/useSheetOffscreenSize.tsx

@@ -1,12 +1,8 @@
 import type { SheetContextValue } from './useSheetProviderProps'
 
-export const useSheetOffscreenSize = ({
-  snapPoints,
-  position,
-  screenSize,
-  frameSize,
-  snapPointsMode,
-}: SheetContextValue) => {
+export const useSheetOffscreenSize = (context: SheetContextValue) => {
+  if (context.onlyShowContainer) return 0
+  const { snapPoints, position, screenSize, frameSize, snapPointsMode } = context
   if (snapPointsMode === 'fit') {
     return 0
   }

package/src/useSheetOpenState.tsx

@@ -1,4 +1,4 @@
-import { useAdaptContext, useAdaptTarget } from '@tamagui/adapt'
+import { useAdaptContext, useAdaptTarget, useAdaptTargetScope } from '@tamagui/adapt'
 import React from 'react'
 import { useControllableState } from '@tamagui/use-controllable-state'
 
@@ -6,14 +6,19 @@ import type { SheetProps } from './types'
 import type { SheetControllerContextValue } from './useSheetController'
 import { useSheetController } from './useSheetController'
 
-export const useSheetOpenState = (props: SheetProps) => {
-  const adaptContext = useAdaptContext()
-  const adapt = useAdaptTarget()
+export const useSheetOpenState = (
+  props: SheetProps,
+  strategy: 'prop-wins' | 'most-recent-wins' = 'most-recent-wins'
+) => {
+  const adaptTargetScope = useAdaptTargetScope()
+  const adapt = useAdaptTarget(adaptTargetScope ?? undefined)
+  const adaptContext = useAdaptContext(adaptTargetScope ?? undefined)
   const { isHidden: controllerIsHidden, controller: legacyController } =
     useSheetController(props.scope)
-  const shouldUseAdapt = Boolean(
-    adaptContext.open !== undefined || adaptContext.onOpenChange
-  )
+  // an adapt parent can wrap unrelated sheets; only its <Adapt> child owns the handoff.
+  const shouldUseAdapt =
+    adaptTargetScope === adaptContext.scopeName &&
+    Boolean(adaptContext.open !== undefined || adaptContext.onOpenChange)
   // Dialog no longer mounts SheetController while Adapt is inactive, so the
   // hidden state must come from the Adapt parent context even before a target
   // can register through useAdaptTarget().
@@ -65,7 +70,7 @@ export const useSheetOpenState = (props: SheetProps) => {
     prop: propVal,
     defaultProp: props.defaultOpen ?? false,
     onChange: onOpenChangeInternal,
-    strategy: 'most-recent-wins',
+    strategy,
   })
 
   return {
@@ -73,6 +78,11 @@ export const useSheetOpenState = (props: SheetProps) => {
     setOpen,
     isHidden,
     controller,
+    strategy,
+    onNativeDismiss: shouldUseAdapt
+      ? () =>
+          adapt?.handoff.onTransition({ phase: 'end', cause: 'close', finished: true })
+      : undefined,
   }
 }