@tamagui/sheet 2.7.7 → 3.0.0-beta.1093.1

package/src/useSafeAreaInsets.native.ts

@@ -1,3 +1,4 @@
+import { getSafeArea } from '@tamagui/native'
 import * as React from 'react'
 import { SafeAreaInsetsContext as RNSafeAreaInsetsContext } from 'react-native-safe-area-context'
 
@@ -9,21 +10,27 @@ import type { SafeAreaInsets } from './useSafeAreaInsets'
 export const SafeAreaInsetsContext =
   RNSafeAreaInsetsContext as unknown as React.Context<SafeAreaInsets | null>
 
+const safeArea = getSafeArea()
+
+function useContextInsets(): SafeAreaInsets | null {
+  return React.useContext(SafeAreaInsetsContext)
+}
+
 /**
- * Live safe-area insets (notch / status bar / home indicator) read from the
- * context the app's SafeAreaProvider provides.
+ * live safe-area insets (notch / status bar / home indicator).
  *
- * Read this in a component BODY that renders inside the provider. The Sheet does
- * exactly that — only its modal CONTENT is teleported out through the portal, so
- * the body still sees the real insets. This is the one read that works in real
- * native bundles:
- *  - `getSafeArea()` (the @tamagui/native abstraction) is frequently NOT enabled
- *    against the instance a component reads, so it returns 0.
- *  - a dynamic `require('react-native-safe-area-context')` throws "Unknown named
- *    module" in metro/rolldown bundles where the package isn't in the importing
- *    module's graph.
- * A static import + context read avoids both.
+ * setup-safe-area installs a context-to-store feed so every store subscriber
+ * sees provider updates. Without that setup, keep the direct context read that
+ * lets Sheet work independently.
  */
 export function useSafeAreaInsets(): SafeAreaInsets | null {
-  return React.useContext(SafeAreaInsetsContext)
+  const [useFeed] = React.useState(() => safeArea.state.useSafeAreaInsets)
+  const contextInsets = (useFeed || useContextInsets)()
+  const storeInsets = React.useSyncExternalStore(
+    safeArea.subscribe,
+    safeArea.getInsets,
+    safeArea.getInsets
+  )
+
+  return useFeed ? storeInsets : contextInsets
 }

package/src/useSheetController.tsx

@@ -1,7 +1,12 @@
-import React from 'react'
+import type React from 'react'
+import { createStyledContext, type StyledContext } from '@tamagui/core'
 
-export const useSheetController = () => {
-  const controller = React.useContext(SheetControllerContext)
+import type { SheetTransitionEvent } from './types'
+
+export const useSheetController = (scope?: string) => {
+  const controller = SheetControllerContext.useStyledContext(
+    scope
+  ) as SheetControllerContextValue | null
   const isHidden = controller?.hidden
   const isShowingNonSheet = isHidden && controller?.open
   return {
@@ -12,8 +17,11 @@ export const useSheetController = () => {
   }
 }
 
-export const SheetControllerContext =
-  React.createContext<SheetControllerContextValue | null>(null)
+export const SheetControllerContext = createStyledContext<SheetControllerContextValue>(
+  null as any,
+  'SheetController__'
+) as StyledContext<SheetControllerContextValue> &
+  React.Context<SheetControllerContextValue | null>
 
 export type SheetControllerContextValue = {
   id?: string
@@ -22,10 +30,10 @@ export type SheetControllerContextValue = {
   // hide without "closing" to prevent re-animation when shown again
   hidden?: boolean
   onOpenChange?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)
-  // fired by the sheet after its open/close animation finishes. used by
+  // fired by the sheet at the start/end of its position transition. used by
   // Dialog adapt to know when it's safe to tear down adapted children
   // without cutting off the slide-out mid-animation.
-  onAnimationComplete?: (state: { open: boolean }) => void
+  onTransition?: (e: SheetTransitionEvent) => void
   // when true, the sheet should skip its open animation (used for adapt handoff)
   skipNextAnimation?: boolean
 }

package/src/useSheetOpenState.tsx

@@ -1,19 +1,65 @@
+import { useAdaptContext, useAdaptTarget } from '@tamagui/adapt'
+import React from 'react'
 import { useControllableState } from '@tamagui/use-controllable-state'
 
 import type { SheetProps } from './types'
+import type { SheetControllerContextValue } from './useSheetController'
 import { useSheetController } from './useSheetController'
 
 export const useSheetOpenState = (props: SheetProps) => {
-  const { isHidden, controller } = useSheetController()
+  const adaptContext = useAdaptContext()
+  const adapt = useAdaptTarget()
+  const { isHidden: controllerIsHidden, controller: legacyController } =
+    useSheetController(props.scope)
+  const shouldUseAdapt = 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().
+  const isHidden = shouldUseAdapt ? !adaptContext.active : controllerIsHidden
+  const wasHiddenRef = React.useRef(isHidden)
+  // when the adapt target is exiting (media flipped off while the dialog stays
+  // open), Adapt keeps `active` true so the sheet stays mounted, and signals
+  // the close through handoff.hidden: drive the sheet's open state to false so
+  // it plays its exit animation and reports onTransition back to Adapt
+  const controllerOpen = shouldUseAdapt
+    ? Boolean(adaptContext.open) && !adaptContext.handoff.hidden
+    : legacyController?.open
+  const localSkipNextAnimation = Boolean(
+    wasHiddenRef.current && !isHidden && controllerOpen
+  )
+  const skipNextAnimation =
+    (shouldUseAdapt ? adapt?.handoff.skipNextAnimation : undefined) ??
+    localSkipNextAnimation
+
+  wasHiddenRef.current = isHidden
+
+  const adaptController = React.useMemo<SheetControllerContextValue | null>(() => {
+    if (!adapt || !shouldUseAdapt) return null
+
+    return {
+      open: adaptContext.open,
+      hidden: isHidden,
+      onOpenChange: adaptContext.active ? adaptContext.onOpenChange : undefined,
+      onTransition: adapt?.handoff.onTransition,
+      skipNextAnimation,
+    }
+  }, [adapt, adaptContext, isHidden, shouldUseAdapt, skipNextAnimation])
+
+  const controller = adaptController ?? legacyController
+  const controllerOnOpenChange =
+    (shouldUseAdapt && adaptContext.active ? adaptContext.onOpenChange : undefined) ??
+    legacyController?.onOpenChange
 
   const onOpenChangeInternal = (val: boolean) => {
-    controller?.onOpenChange?.(val)
+    controllerOnOpenChange?.(val)
     props.onOpenChange?.(val)
   }
 
   const propVal = props.preferAdaptParentOpenState
-    ? (controller?.open ?? props.open)
-    : (props.open ?? controller?.open)
+    ? (controllerOpen ?? props.open)
+    : (props.open ?? controllerOpen)
 
   const [open, setOpen] = useControllableState({
     prop: propVal,

package/src/useSheetProviderProps.tsx

@@ -22,13 +22,7 @@ export type SheetContextValue = ReturnType<typeof useSheetProviderProps> & {
   setHasScrollView: (val: boolean) => void
 }
 
-export function useSheetProviderProps(
-  props: SheetProps,
-  state: SheetOpenState,
-  options: {
-    onOverlayComponent?: (comp: any) => void
-  } = {}
-) {
+export function useSheetProviderProps(props: SheetProps, state: SheetOpenState) {
   const handleRef = React.useRef<TamaguiElement>(null)
   const contentRef = React.useRef<TamaguiElement>(null)
   const [frameSize, setFrameSize] = React.useState<number>(0)
@@ -179,23 +173,7 @@ export function useSheetProviderProps(
     return bridge
   })
 
-  // Handle both new disableRemoveScroll and deprecated forceRemoveScrollEnabled
-  let disableRemoveScroll: boolean | undefined
-  if (props.disableRemoveScroll !== undefined) {
-    // New prop: disableRemoveScroll={true} means RemoveScroll is disabled
-    disableRemoveScroll = props.disableRemoveScroll || !open || !props.modal
-  } else if (props.forceRemoveScrollEnabled !== undefined) {
-    // Deprecated prop: forceRemoveScrollEnabled can override the default
-    if (process.env.NODE_ENV === 'development') {
-      console.warn(
-        '[Sheet] forceRemoveScrollEnabled is deprecated. Use disableRemoveScroll instead.'
-      )
-    }
-    disableRemoveScroll = !props.forceRemoveScrollEnabled
-  } else {
-    // Default: disabled when not open or not modal
-    disableRemoveScroll = !open || !props.modal
-  }
+  const disableRemoveScroll = props.disableRemoveScroll || !open || !props.modal
 
   const maxSnapPoint = snapPoints[0]
   const screenSize =
@@ -218,8 +196,7 @@ export function useSheetProviderProps(
     setFrameSize,
     dismissOnOverlayPress: props.dismissOnOverlayPress ?? true,
     dismissOnSnapToBottom: props.dismissOnSnapToBottom ?? false,
-    onOverlayComponent: options.onOverlayComponent,
-    scope: props.__scopeSheet,
+    scope: props.scope ?? '',
     hasFit,
     position,
     snapPoints,
@@ -227,7 +204,7 @@ export function useSheetProviderProps(
     setMaxContentSize,
     setPosition,
     setPositionImmediate,
-    onlyShowFrame: false,
+    onlyShowContainer: false,
   }
 
   return providerProps

package/src/useSheetScrollViewGestures.ts

@@ -1,5 +1,5 @@
+import type { ScrollViewRef } from '@tamagui/scroll-view'
 import { useEffect, useRef } from 'react'
-import type { ScrollView as RNScrollView } from 'react-native'
 import type { ScrollBridge } from './types'
 
 type GestureOwner = 'none' | 'pan' | 'scroll'
@@ -15,7 +15,7 @@ interface GestureState {
 }
 
 interface UseSheetScrollViewGesturesProps {
-  scrollRef: React.RefObject<RNScrollView | null>
+  scrollRef: React.RefObject<ScrollViewRef | null>
   scrollBridge: ScrollBridge
   hasScrollableContent: boolean
   scrollEnabled: boolean

package/types/GestureSheetContext.d.ts

@@ -32,5 +32,5 @@ export interface GestureSheetProviderProps {
     panGesture: any | null;
     panGestureRef: RefObject<any> | null;
 }
-export declare function GestureSheetProvider({ children, isDragging, blockPan, setBlockPan, panGesture, panGestureRef, }: GestureSheetProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function GestureSheetProvider({ children, isDragging, blockPan, setBlockPan, panGesture, panGestureRef, }: GestureSheetProviderProps): React.JSX.Element;
 //# sourceMappingURL=GestureSheetContext.d.ts.map

package/types/GestureSheetContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GestureSheetContext.d.ts","sourceRoot":"","sources":["../src/GestureSheetContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjE,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,UAAU,EAAE,GAAG,GAAG,IAAI,CAAA;IACtB;;OAEG;IACH,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;IACpC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAA;CAClB;AAID,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,GAAG,GAAG,IAAI,CAAA;IACtB,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;CACrC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,GACd,EAAE,yBAAyB,2CAY3B"}
+{"version":3,"file":"GestureSheetContext.d.ts","sourceRoot":"","sources":["../src/GestureSheetContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjE,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,UAAU,EAAE,GAAG,GAAG,IAAI,CAAA;IACtB;;OAEG;IACH,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;IACpC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAA;CAClB;AAID,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,GAAG,GAAG,IAAI,CAAA;IACtB,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;CACrC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,GACd,EAAE,yBAAyB,qBAY3B"}