@tamagui/sheet 2.7.7 → 3.0.0-beta.643.1

package/next.md

@@ -1,78 +0,0 @@
-# Sheet ScrollView Gesture Handoff - Next Steps
-
-## Current Limitation
-
-The Sheet + ScrollView gesture coordination on native iOS has limitations because Tamagui uses React Native's built-in `PanResponder`, while iOS's `UIScrollView` gesture recognizers fire BEFORE the RN responder system can claim the gesture.
-
-This causes:
-
-- Minor scroll "flicker" when starting to drag down from scroll top
-- Imperfect handoff between scroll and sheet drag gestures
-
-## Ideal Solution: react-native-gesture-handler Integration
-
-Both `gorhom/bottom-sheet` and `react-native-actions-sheet` solve this by using `react-native-gesture-handler` which provides:
-
-1. **`simultaneousHandlers`** - allows coordinating multiple gesture recognizers
-2. **`GestureDetector`** with worklets - can check conditions and decide who handles gesture before it starts
-3. **Native gesture coordination** - works at the iOS/Android gesture recognizer level, not the JS responder level
-
-## Proposed API
-
-```tsx
-import { setupGestureHandler } from '@tamagui/sheet'
-import { GestureHandlerRootView } from 'react-native-gesture-handler'
-
-// Call once at app startup (optional - falls back to PanResponder)
-setupGestureHandler({
-  // Pass the gesture handler module so we don't add it as a hard dependency
-  GestureDetector: require('react-native-gesture-handler').GestureDetector,
-  Gesture: require('react-native-gesture-handler').Gesture,
-})
-
-// Then wrap app
-export default function App() {
-  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <YourApp />
-    </GestureHandlerRootView>
-  )
-}
-```
-
-## Implementation Notes
-
-If `setupGestureHandler()` is called:
-
-- Use `GestureDetector` with `Gesture.Pan()` instead of `PanResponder`
-- Use `simultaneousHandlers` to coordinate with ScrollView's gesture
-- Implement `blockPan` flag pattern from actions-sheet for smooth handoff
-
-If not called:
-
-- Fall back to current `PanResponder` implementation
-- Accept the minor limitations on native
-
-## References
-
-- gorhom/bottom-sheet: Uses Reanimated worklets + gesture handler
-- react-native-actions-sheet: Uses `blockPan` flag pattern with gesture handler
-- Both are MIT licensed and can be used as reference
-
-## Files to Modify
-
-- `SheetImplementationCustom.tsx` - Replace PanResponder with GestureDetector
-- `SheetScrollView.tsx` - Use `useScrollHandlers()` pattern from actions-sheet
-- Add `setupGestureHandler.ts` for optional gesture handler registration
-
-## Test Case
-
-There's a test case at `code/kitchen-sink/src/usecases/SheetScrollableDrag.tsx` that demonstrates the bug and can be used to verify fixes. It's not exported in the main navigation but can be accessed directly for testing.
-
-## Attempted Fixes
-
-1. **Native scroll enable/disable based on pane position** - Tried disabling scroll when sheet is not at top position, but this completely broke scrolling because the initial pane position values aren't set correctly on mount.
-
-2. **PaneY change listeners** - Added `onPaneYChange`/`setPaneY` to ScrollBridge to notify ScrollView of position changes during drag, but the fundamental issue remains that iOS UIScrollView gesture recognizers fire before RN's responder system.
-
-The core issue is architectural: React Native's PanResponder cannot coordinate with iOS's native UIScrollView gesture recognizers at the right level. The only real solution is `react-native-gesture-handler` integration.

package/setup-gesture-handler/index.cjs

@@ -1,2 +0,0 @@
-// compat with tamagui static compiler
-Object.assign(module.exports, require('../dist/cjs/setupGestureHandler.cjs'))

package/setup-gesture-handler/index.js

@@ -1,2 +0,0 @@
-// compat with metro without package exports
-Object.assign(module.exports, require('../dist/cjs/setupGestureHandler.cjs'))

package/setup-gesture-handler/index.native.cjs

@@ -1,2 +0,0 @@
-// compat with tamagui static compiler
-Object.assign(module.exports, require('../dist/cjs/setupGestureHandler.cjs'))

package/setup-gesture-handler/index.native.js

@@ -1,2 +0,0 @@
-// compat with metro without package exports
-Object.assign(module.exports, require('../dist/cjs/setupGestureHandler.cjs'))

package/setup-gesture-handler.cjs

@@ -1 +0,0 @@
-Object.assign(module.exports, require('./dist/cjs/setupGestureHandler.cjs'))

package/src/createSheet.tsx

@@ -1,309 +0,0 @@
-import { useComposedRefs } from '@tamagui/compose-refs'
-import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import type {
-  GetProps,
-  ViewProps,
-  TamaguiComponent,
-  TamaguiComponentExpectingVariants,
-  TamaguiElement,
-} from '@tamagui/core'
-import { View } from '@tamagui/core'
-import { composeEventHandlers, withStaticProperties } from '@tamagui/helpers'
-import { resolveViewZIndex } from '@tamagui/portal'
-import { RemoveScroll } from '@tamagui/remove-scroll'
-import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
-import { StackZIndexContext } from '@tamagui/z-index-stack'
-import type { ForwardRefExoticComponent, FunctionComponent, RefAttributes } from 'react'
-import { forwardRef, memo, useMemo, useEffect, useRef } from 'react'
-import type { View as RNView } from 'react-native'
-import { Platform } from 'react-native'
-import { SHEET_HANDLE_NAME, SHEET_NAME, SHEET_OVERLAY_NAME } from './constants'
-import { getNativeSheet } from './nativeSheet'
-import { useSheetContext } from './SheetContext'
-import { SheetImplementationCustom } from './SheetImplementationCustom'
-import { SheetScrollView } from './SheetScrollView'
-import type { SheetProps, SheetScopedProps } from './types'
-import { useSheetController } from './useSheetController'
-import { useSheetOffscreenSize } from './useSheetOffscreenSize'
-import { getMaxViewportHeight } from './webViewport'
-
-type SharedSheetProps = {
-  open?: boolean
-}
-
-type BaseProps = ViewProps & SharedSheetProps
-
-type SheetStyledComponent = TamaguiComponentExpectingVariants<BaseProps, SharedSheetProps>
-
-export function createSheet<
-  H extends TamaguiComponent | SheetStyledComponent,
-  F extends TamaguiComponent | SheetStyledComponent,
-  O extends TamaguiComponent | SheetStyledComponent,
->({ Handle, Frame, Overlay }: { Handle: H; Frame: F; Overlay: O }) {
-  const SheetHandle = Handle.styleable<any>(
-    (
-      { __scopeSheet, ...props }: SheetScopedProps<SheetStyledComponent>,
-      forwardedRef
-    ) => {
-      const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)
-      const composedRef = useComposedRefs<TamaguiElement>(context.handleRef, forwardedRef)
-
-      // track if sheet was being dragged to prevent onPress toggle after drag
-      const wasDraggingRef = useRef(false)
-
-      // subscribe to parent dragging changes to track if we dragged during this press
-      useEffect(() => {
-        if (!context.scrollBridge) return
-        return context.scrollBridge.onParentDragging((isDragging: boolean) => {
-          if (isDragging) {
-            wasDraggingRef.current = true
-          }
-        })
-      }, [context.scrollBridge])
-
-      if (context.onlyShowFrame) {
-        return null
-      }
-
-      return (
-        // @ts-ignore
-        <Handle
-          ref={composedRef}
-          onPressIn={() => {
-            // reset at start of new press
-            wasDraggingRef.current = false
-          }}
-          onPress={() => {
-            // skip toggle if this was a drag gesture
-            if (wasDraggingRef.current) {
-              wasDraggingRef.current = false
-              return
-            }
-            // don't toggle to the bottom snap position when dismissOnSnapToBottom set
-            const max =
-              context.snapPoints.length + (context.dismissOnSnapToBottom ? -1 : 0)
-            const nextPos = (context.position + 1) % max
-            context.setPosition(nextPos)
-          }}
-          open={context.open}
-          {...props}
-        />
-      )
-    }
-  )
-
-  /* -------------------------------------------------------------------------------------------------
-   * SheetOverlay
-   * -----------------------------------------------------------------------------------------------*/
-
-  const SheetOverlay = Overlay.styleable<SheetScopedProps<{}>>((propsIn, ref) => {
-    const { __scopeSheet, ...props } = propsIn
-    const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet)
-
-    // this ones a bit weird for legacy reasons, we need to hoist it above <Sheet /> AnimatedView
-    // so we just pass it up to context
-
-    const element = useMemo(() => {
-      return (
-        // @ts-ignore
-        <Overlay
-          {...props}
-          ref={ref}
-          onPress={composeEventHandlers(
-            props.onPress,
-            context.dismissOnOverlayPress
-              ? () => {
-                  context.setOpen(false)
-                }
-              : undefined
-          )}
-        />
-      )
-    }, [props, ref, context.dismissOnOverlayPress, context.setOpen])
-
-    useIsomorphicLayoutEffect(() => {
-      context.onOverlayComponent?.(element)
-    }, [element])
-
-    if (context.onlyShowFrame) {
-      return null
-    }
-
-    return null
-  })
-
-  /* -------------------------------------------------------------------------------------------------
-   * Sheet
-   * -----------------------------------------------------------------------------------------------*/
-
-  type ExtraFrameProps = {
-    /**
-     * by default the sheet adds a view below its bottom that extends past the
-     * largest visible viewport height. this covers spring overshoot when opening
-     * so page content never shows through below the sheet.
-     */
-    disableHideBottomOverflow?: boolean
-
-    /**
-     * Adds padding accounting for the currently offscreen content, so if you put a flex element inside
-     * the sheet, it will always flex to the height of the visible amount of the sheet. If this is not
-     * turned on, the inner content is always set to the max height of the sheet.
-     */
-    adjustPaddingForOffscreenContent?: boolean
-  }
-
-  const SheetFrame = Frame.styleable<SheetProps & ExtraFrameProps>(
-    (
-      {
-        __scopeSheet,
-        adjustPaddingForOffscreenContent,
-        disableHideBottomOverflow,
-        children,
-        ...props
-      },
-      forwardedRef
-    ) => {
-      const context = useSheetContext(SHEET_NAME, __scopeSheet)
-      const { hasFit, disableRemoveScroll, frameSize, contentRef, open } = context
-      const composedContentRef = useComposedRefs(forwardedRef, contentRef)
-      const offscreenSize = useSheetOffscreenSize(context)
-
-      // FIX: Store the frameSize when open for use during close animation
-      const stableFrameSize = useRef(frameSize)
-      useEffect(() => {
-        if (open && frameSize) {
-          stableFrameSize.current = frameSize
-        }
-      }, [open, frameSize])
-
-      const sheetContents = useMemo(() => {
-        // FIX: Use fixed height during close animation to prevent content-driven resizing
-        const shouldUseFixedHeight = hasFit && !open && stableFrameSize.current
-
-        return (
-          // @ts-expect-error
-          <Frame
-            ref={composedContentRef}
-            flex={hasFit && open ? 0 : 1}
-            flexBasis={hasFit ? 'auto' : undefined}
-            height={
-              shouldUseFixedHeight
-                ? stableFrameSize.current
-                : hasFit
-                  ? undefined
-                  : frameSize
-            }
-            pointerEvents={open ? 'auto' : 'none'}
-            data-state={open ? 'open' : 'closed'}
-            {...props}
-          >
-            <StackZIndexContext zIndex={resolveViewZIndex(props.zIndex)}>
-              {children}
-            </StackZIndexContext>
-
-            {adjustPaddingForOffscreenContent && (
-              <View data-sheet-offscreen-pad height={offscreenSize} width="100%" />
-            )}
-          </Frame>
-        )
-      }, [
-        open,
-        props,
-        frameSize,
-        offscreenSize,
-        adjustPaddingForOffscreenContent,
-        hasFit,
-      ])
-
-      return (
-        <>
-          <RemoveScroll enabled={!disableRemoveScroll && context.open}>
-            {sheetContents}
-          </RemoveScroll>
-
-          {/* below frame hide when bouncing past 100% */}
-          {!disableHideBottomOverflow && (
-            // @ts-ignore
-            <Frame
-              {...props}
-              componentName="SheetCover"
-              data-sheet-cover=""
-              children={null}
-              // Don't inherit testID - this is a visual helper element
-              testID={undefined}
-              id={undefined}
-              position="absolute"
-              // anchor the cover's top at the sheet's bottom edge (top: 100% of the
-              // container), then extend it downward. on web extend it past the
-              // largest viewport safari can reveal as its chrome retracts, so the
-              // sheet background covers the bottom instead of revealing the page.
-              // native keeps frameSize.
-              top="100%"
-              zIndex={-1}
-              height={
-                isWeb
-                  ? Math.max(context.frameSize, getMaxViewportHeight())
-                  : context.frameSize
-              }
-              maxHeight={isWeb ? 'none' : undefined}
-              left={0}
-              right={0}
-              borderWidth={0}
-              borderRadius={0}
-              shadowOpacity={0}
-            />
-          )}
-        </>
-      )
-    }
-  ) as any as ForwardRefExoticComponent<
-    SheetScopedProps<
-      Omit<GetProps<typeof Frame>, keyof ExtraFrameProps> & ExtraFrameProps
-    >
-  >
-
-  const Sheet = forwardRef<RNView, SheetProps>(function Sheet(props, ref) {
-    const hydrated = useDidFinishSSR()
-    const { isShowingNonSheet } = useSheetController()
-
-    let SheetImplementation = SheetImplementationCustom
-
-    if (props.native && Platform.OS === 'ios') {
-      if (process.env.TAMAGUI_TARGET === 'native') {
-        const impl = getNativeSheet('ios')
-        if (impl) {
-          // @ts-expect-error accepting external sheet implementation
-          SheetImplementation = impl
-        }
-      }
-    }
-
-    /**
-     * Performance is sensitive here so avoid all the hooks below with this
-     */
-    if (isShowingNonSheet || !hydrated) {
-      return null
-    }
-
-    return <SheetImplementation ref={ref} {...props} />
-  })
-
-  const components = {
-    Frame: SheetFrame,
-    Overlay: SheetOverlay,
-    Handle: SheetHandle,
-    ScrollView: SheetScrollView,
-  }
-
-  const Controlled = withStaticProperties(Sheet, components) as any as FunctionComponent<
-    Omit<SheetProps, 'open' | 'onOpenChange'> & RefAttributes<RNView>
-  > &
-    typeof components
-
-  return withStaticProperties(Sheet, {
-    ...components,
-    Controlled,
-  })
-}
-
-/* -------------------------------------------------------------------------------------------------*/

package/src/setupGestureHandler.ts

@@ -1,43 +0,0 @@
-/**
- * Legacy setup - prefer `import '@tamagui/native/setup-gesture-handler'` instead.
- */
-
-import { getGestureHandler } from '@tamagui/native'
-
-import type { GestureState } from '@tamagui/native'
-
-const SHEET_GESTURE_STATE_KEY = '__tamagui_sheet_gesture_state__'
-
-export function isGestureHandlerEnabled(): boolean {
-  const g = globalThis as typeof globalThis & {
-    [SHEET_GESTURE_STATE_KEY]?: GestureState
-  }
-
-  return g[SHEET_GESTURE_STATE_KEY]?.enabled ?? getGestureHandler().isEnabled
-}
-
-export interface SetupGestureHandlerConfig {
-  Gesture: any
-  GestureDetector: any
-  ScrollView?: any
-}
-
-export function setupGestureHandler(config: SetupGestureHandlerConfig): void {
-  const g = globalThis as any
-  if (g.__tamagui_sheet_gesture_handler_setup) {
-    return
-  }
-  g.__tamagui_sheet_gesture_handler_setup = true
-
-  const { Gesture, GestureDetector, ScrollView } = config
-
-  if (Gesture && GestureDetector) {
-    g[SHEET_GESTURE_STATE_KEY] = {
-      enabled: true,
-      Gesture,
-      GestureDetector,
-      ScrollView: ScrollView || null,
-      RootView: null,
-    } satisfies GestureState
-  }
-}

package/src/useSheet.tsx

@@ -1,3 +0,0 @@
-import { useSheetContext } from './SheetContext'
-
-export const useSheet = () => useSheetContext('', undefined)