@tamagui/sheet 1.20.6 → 1.21.0

package/src/Sheet.tsx

@@ -2,8 +2,6 @@ import { AdaptParentContext } from '@tamagui/adapt'
 import { useComposedRefs } from '@tamagui/compose-refs'
 import {
   GetProps,
-  Slot,
-  TamaguiElement,
   Theme,
   isClient,
   isTouchable,
@@ -21,15 +19,12 @@ import {
 import { Portal } from '@tamagui/portal'
 import { RemoveScroll } from '@tamagui/remove-scroll'
 import { ThemeableStack, XStack, XStackProps, YStack, YStackProps } from '@tamagui/stacks'
-import { useConstant } from '@tamagui/use-constant'
-import { useControllableState } from '@tamagui/use-controllable-state'
 import { useKeyboardVisible } from '@tamagui/use-keyboard-visible'
 import React, {
   FunctionComponent,
   RefAttributes,
   createContext,
   forwardRef,
-  isValidElement,
   useCallback,
   useContext,
   useEffect,
@@ -43,15 +38,22 @@ import {
   Keyboard,
   PanResponder,
   PanResponderGestureState,
+  Platform,
   View,
 } from 'react-native'
 
 import { SHEET_HANDLE_NAME, SHEET_NAME } from './constants'
+import { getNativeSheet } from './nativeSheet'
 import { SheetProvider, useSheetContext } from './SheetContext'
 import { SheetScrollView } from './SheetScrollView'
-import { ScrollBridge, SheetProps, SheetScopedProps } from './types'
+import { SheetProps, SheetScopedProps } from './types'
+import { useSheetChildren } from './useSheetChildren'
+import { useSheetController } from './useSheetController'
+import { useSheetOpenState } from './useSheetOpenState'
+import { useSheetProviderProps } from './useSheetProviderProps'
 
 export { createSheetScope } from './SheetContext'
+export * from './types'
 
 /* -------------------------------------------------------------------------------------------------
  * SheetHandle
@@ -59,17 +61,6 @@ export { createSheetScope } from './SheetContext'
 
 export const SheetHandleFrame = styled(XStack, {
   name: SHEET_HANDLE_NAME,
-  height: 10,
-  borderRadius: 100,
-  backgroundColor: '$background',
-  zIndex: 10,
-  marginHorizontal: '35%',
-  marginBottom: '$2',
-  opacity: 0.5,
-
-  hoverStyle: {
-    opacity: 0.7,
-  },
 
   variants: {
     open: {
@@ -81,7 +72,27 @@ export const SheetHandleFrame = styled(XStack, {
         pointerEvents: 'none',
       },
     },
+
+    unstyled: {
+      false: {
+        height: 10,
+        borderRadius: 100,
+        backgroundColor: '$background',
+        zIndex: 10,
+        marginHorizontal: '35%',
+        marginBottom: '$2',
+        opacity: 0.5,
+
+        hoverStyle: {
+          opacity: 0.7,
+        },
+      },
+    },
   } as const,
+
+  defaultVariants: {
+    unstyled: false,
+  },
 })
 
 export const SheetHandle = SheetHandleFrame.extractable(
@@ -110,10 +121,6 @@ const SHEET_OVERLAY_NAME = 'SheetOverlay'
 
 export const SheetOverlayFrame = styled(ThemeableStack, {
   name: SHEET_OVERLAY_NAME,
-  fullscreen: true,
-  backgrounded: true,
-  opacity: 0.5,
-  zIndex: 100_000,
 
   variants: {
     closed: {
@@ -125,7 +132,20 @@ export const SheetOverlayFrame = styled(ThemeableStack, {
         pointerEvents: 'auto',
       },
     },
+
+    unstyled: {
+      false: {
+        fullscreen: true,
+        position: 'absolute',
+        backgrounded: true,
+        zIndex: 100_000,
+      },
+    },
   } as const,
+
+  defaultVariants: {
+    unstyled: false,
+  },
 })
 
 export type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>
@@ -161,14 +181,25 @@ if (selectionStyleSheet) {
 
 export const SheetFrameFrame = styled(YStack, {
   name: SHEET_NAME,
-  flex: 1,
-  backgroundColor: '$background',
-  borderTopLeftRadius: '$true',
-  borderTopRightRadius: '$true',
-  width: '100%',
-  maxHeight: '100%',
-  overflow: 'hidden',
-  pointerEvents: 'auto',
+
+  variants: {
+    unstyled: {
+      false: {
+        flex: 1,
+        backgroundColor: '$background',
+        borderTopLeftRadius: '$true',
+        borderTopRightRadius: '$true',
+        width: '100%',
+        maxHeight: '100%',
+        overflow: 'hidden',
+        pointerEvents: 'auto',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: false,
+  },
 })
 
 export const SheetFrame = SheetFrameFrame.extractable(
@@ -195,21 +226,21 @@ const ParentSheetContext = createContext({
   zIndex: 100_000,
 })
 
-const useSheetContoller = () => {
-  const controller = useContext(SheetControllerContext)
-  const isHidden = controller?.hidden
-  const isShowingNonSheet = isHidden && controller?.open
-  return {
-    controller,
-    isHidden,
-    isShowingNonSheet,
-  }
-}
-
 export const Sheet = withStaticProperties(
   forwardRef<View, SheetProps>(function Sheet(props, ref) {
     const hydrated = useDidFinishSSR()
-    const { isShowingNonSheet } = useSheetContoller()
+    const { isShowingNonSheet } = useSheetController()
+
+    let SheetImplementation = SheetImplementationCustom
+
+    if (props.native && Platform.OS === 'ios') {
+      if (process.env.TAMAGUI_TARGET === 'native') {
+        const impl = getNativeSheet('ios')
+        if (impl) {
+          SheetImplementation = impl
+        }
+      }
+    }
 
     /**
      * Performance is sensitive here so avoid all the hooks below with this
@@ -223,22 +254,11 @@ export const Sheet = withStaticProperties(
   sheetComponents
 )
 
-const SheetImplementation = themeable(
-  forwardRef<View, SheetProps>(function SheetImplementation(props, forwardedRef) {
+const SheetImplementationCustom = themeable(
+  forwardRef<View, SheetProps>(function SheetImplementationCustom(props, forwardedRef) {
     const parentSheet = useContext(ParentSheetContext)
-    const { isHidden, controller } = useSheetContoller()
 
     const {
-      __scopeSheet,
-      snapPoints: snapPointsProp = [80],
-      open: openProp,
-      defaultOpen,
-      children: childrenProp,
-      position: positionProp,
-      onPositionChange,
-      onOpenChange,
-      defaultPosition,
-      dismissOnOverlayPress = true,
       animationConfig,
       dismissOnSnapToBottom = false,
       forceRemoveScrollEnabled = null,
@@ -249,8 +269,28 @@ const SheetImplementation = themeable(
       portalProps,
     } = props
 
+    const state = useSheetOpenState(props)
+    const providerProps = useSheetProviderProps(props, state)
+
+    const {
+      snapPoints,
+      position,
+      contentRef,
+      setPosition,
+      setPositionImmediate,
+      scrollBridge,
+      frameSize,
+      setFrameSize,
+    } = providerProps
+
+    const { open, isHidden, controller } = state
+
+    const { frameComponent, handleComponent, overlayComponent } = useSheetChildren(
+      props.children
+    )
+
     if (process.env.NODE_ENV === 'development') {
-      if (snapPointsProp.some((p) => p < 0 || p > 100)) {
+      if (snapPoints.some((p) => p < 0 || p > 100)) {
         console.warn(
           '⚠️ Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame'
         )
@@ -268,66 +308,12 @@ const SheetImplementation = themeable(
     const disableDrag = disableDragProp ?? controller?.disableDrag
     const keyboardIsVisible = useKeyboardVisible()
     const themeName = useThemeName()
-    const contentRef = React.useRef<TamaguiElement>(null)
-    const scrollBridge = useConstant<ScrollBridge>(() => ({
-      enabled: false,
-      y: 0,
-      paneY: 0,
-      paneMinY: 0,
-      scrollStartY: -1,
-      drag: () => {},
-      release: () => {},
-      scrollLock: false,
-    }))
-
-    const onOpenChangeInternal = (val: boolean) => {
-      controller?.onOpenChange?.(val)
-      onOpenChange?.(val)
-    }
-
-    const [open, setOpen] = useControllableState({
-      prop: controller?.open ?? openProp,
-      defaultProp: true,
-      onChange: onOpenChangeInternal,
-      strategy: 'most-recent-wins',
-      transition: true,
-    })
-
-    const [frameSize, setFrameSize] = useState<number>(0)
-
-    const snapPoints = useMemo(
-      () => (dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]
-    )
-
-    // lets set -1 to be always the "open = false" position
-    const [position_, setPosition_] = useControllableState({
-      prop: positionProp,
-      defaultProp: defaultPosition || (open ? 0 : -1),
-      onChange: onPositionChange,
-      strategy: 'most-recent-wins',
-      transition: true,
-    })
-    const position = open === false ? -1 : position_
 
     // reset position to fully open on re-open after dismissOnSnapToBottom
     if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {
-      setPosition_(0)
+      setPositionImmediate(0)
     }
 
-    const setPosition = useCallback(
-      (next: number) => {
-        // close on dismissOnSnapToBottom (and set position so it animates)
-        if (dismissOnSnapToBottom && next === snapPoints.length - 1) {
-          setOpen(false)
-        } else {
-          setPosition_(next)
-        }
-      },
-      [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]
-    )
-
     const { useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle } =
       driver
 
@@ -540,30 +526,6 @@ const SheetImplementation = themeable(
       [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]
     )
 
-    let handleComponent: React.ReactElement | null = null
-    let overlayComponent: React.ReactElement | null = null
-    let frameComponent: React.ReactElement | null = null
-
-    // TODO do more radix-like and don't require direct children descendents
-    React.Children.forEach(childrenProp, (child) => {
-      if (isValidElement(child)) {
-        const name = child.type?.['staticConfig']?.componentName
-        switch (name) {
-          case 'SheetHandle':
-            handleComponent = child
-            break
-          case 'Sheet':
-            frameComponent = child
-            break
-          case 'SheetOverlay':
-            overlayComponent = child
-            break
-          default:
-            console.warn('Warning: passed invalid child to Sheet', child)
-        }
-      }
-    })
-
     const animatedStyle = useAnimatedNumberStyle(animatedNumber, (val) => {
       'worklet'
       const translateY = frameSize === 0 ? HIDDEN_SIZE : val
@@ -629,21 +591,7 @@ const SheetImplementation = themeable(
 
     const contents = (
       <ParentSheetContext.Provider value={nextParentContext}>
-        <SheetProvider
-          modal={modal}
-          contentRef={contentRef}
-          frameSize={frameSize}
-          dismissOnOverlayPress={dismissOnOverlayPress}
-          dismissOnSnapToBottom={dismissOnSnapToBottom}
-          open={open}
-          hidden={!!isHidden}
-          scope={__scopeSheet}
-          position={position}
-          snapPoints={snapPoints}
-          setPosition={setPosition}
-          setOpen={setOpen}
-          scrollBridge={scrollBridge}
-        >
+        <SheetProvider {...providerProps}>
           {shouldHideParentSheet ? null : overlayComponent}
 
           <AnimatedView
@@ -742,37 +690,3 @@ function resisted(y: number, minY: number, maxOverflow = 25) {
   }
   return y
 }
-
-type SheetControllerContextValue = {
-  disableDrag?: boolean
-  open?: boolean
-  // hide without "closing" to prevent re-animation when shown again
-  hidden?: boolean
-  onOpenChange?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)
-}
-
-const SheetControllerContext = createContext<SheetControllerContextValue | null>(null)
-
-export const SheetController = ({
-  children,
-  onOpenChange: onOpenChangeProp,
-  ...value
-}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {
-  const onOpenChange = useEvent(onOpenChangeProp)
-
-  const memoValue = useMemo(
-    () => ({
-      open: value.open,
-      hidden: value.hidden,
-      disableDrag: value.disableDrag,
-      onOpenChange,
-    }),
-    [onOpenChange, value.open, value.hidden, value.disableDrag]
-  )
-
-  return (
-    <SheetControllerContext.Provider value={memoValue}>
-      {children}
-    </SheetControllerContext.Provider>
-  )
-}

package/src/SheetController.tsx

@@ -0,0 +1,28 @@
+import { useEvent } from '@tamagui/core'
+import React, { useMemo } from 'react'
+
+import { SheetControllerContext, SheetControllerContextValue } from './useSheetController'
+
+export const SheetController = ({
+  children,
+  onOpenChange: onOpenChangeProp,
+  ...value
+}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {
+  const onOpenChange = useEvent(onOpenChangeProp)
+
+  const memoValue = useMemo(
+    () => ({
+      open: value.open,
+      hidden: value.hidden,
+      disableDrag: value.disableDrag,
+      onOpenChange,
+    }),
+    [onOpenChange, value.open, value.hidden, value.disableDrag]
+  )
+
+  return (
+    <SheetControllerContext.Provider value={memoValue}>
+      {children}
+    </SheetControllerContext.Provider>
+  )
+}

package/src/index.ts

@@ -1 +1,4 @@
 export * from './Sheet'
+export * from './SheetController'
+export * from './useSheetController'
+export { setupNativeSheet } from './nativeSheet'

package/src/nativeSheet.tsx

@@ -0,0 +1,42 @@
+import { FunctionComponent, useEffect, useRef } from 'react'
+
+import { SheetProvider } from './SheetContext'
+import { SheetProps } from './types'
+import { useSheetChildren } from './useSheetChildren'
+import { useSheetOpenState } from './useSheetOpenState'
+import { useSheetProviderProps } from './useSheetProviderProps'
+
+type SheetNativePlatforms = 'ios'
+
+const nativeSheets: Record<SheetNativePlatforms, FunctionComponent<SheetProps> | null> = {
+  ios: null,
+}
+
+export function getNativeSheet(platform: SheetNativePlatforms) {
+  return nativeSheets[platform]
+}
+
+export function setupNativeSheet(platform: SheetNativePlatforms, Implementation: any) {
+  if (platform === 'ios') {
+    nativeSheets[platform] = (props: SheetProps) => {
+      const state = useSheetOpenState(props)
+      const providerProps = useSheetProviderProps(props, state)
+      const { frameComponent } = useSheetChildren(props.children)
+
+      const { open, setOpen } = state
+      const ref = useRef<{
+        setVisibility: Function
+      }>()
+
+      useEffect(() => {
+        ref.current?.setVisibility(open)
+      }, [open])
+
+      return (
+        <Implementation ref={ref} onModalDismiss={() => setOpen(false)}>
+          <SheetProvider {...providerProps}>{frameComponent}</SheetProvider>
+        </Implementation>
+      )
+    }
+  }
+}

package/src/types.tsx

@@ -18,6 +18,12 @@ export type SheetProps = ScopedProps<
     dismissOnSnapToBottom?: boolean
     forceRemoveScrollEnabled?: boolean
     animationConfig?: AnimatedNumberStrategy
+
+    /**
+     * Adapts the sheet to use native sheet on the given platform (if available)
+     */
+    native?: 'ios'[] | boolean
+
     /**
      * Pass if you're using the CSS animation driver
      */

package/src/useSheetChildren.tsx

@@ -0,0 +1,33 @@
+import React, { isValidElement } from 'react'
+
+export function useSheetChildren(childrenProp: any) {
+  let handleComponent: React.ReactElement | null = null
+  let overlayComponent: React.ReactElement | null = null
+  let frameComponent: React.ReactElement | null = null
+
+  // TODO do more radix-like and don't require direct children descendents
+  React.Children.forEach(childrenProp, (child) => {
+    if (isValidElement(child)) {
+      const name = child.type?.['staticConfig']?.componentName
+      switch (name) {
+        case 'SheetHandle':
+          handleComponent = child
+          break
+        case 'Sheet':
+          frameComponent = child
+          break
+        case 'SheetOverlay':
+          overlayComponent = child
+          break
+        default:
+          console.warn('Warning: passed invalid child to Sheet', child)
+      }
+    }
+  })
+
+  return {
+    handleComponent,
+    overlayComponent,
+    frameComponent,
+  }
+}

package/src/useSheetController.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react'
+
+export const useSheetController = () => {
+  const controller = useContext(SheetControllerContext)
+  const isHidden = controller?.hidden
+  const isShowingNonSheet = isHidden && controller?.open
+  return {
+    controller,
+    isHidden,
+    isShowingNonSheet,
+  }
+}
+
+export const SheetControllerContext = createContext<SheetControllerContextValue | null>(
+  null
+)
+
+export type SheetControllerContextValue = {
+  disableDrag?: boolean
+  open?: boolean
+  // hide without "closing" to prevent re-animation when shown again
+  hidden?: boolean
+  onOpenChange?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)
+}

package/src/useSheetOpenState.tsx

@@ -0,0 +1,30 @@
+import { useControllableState } from '@tamagui/use-controllable-state'
+
+import { SheetProps } from './types'
+import { useSheetController } from './useSheetController'
+
+export const useSheetOpenState = (props: SheetProps) => {
+  const { isHidden, controller } = useSheetController()
+
+  const onOpenChangeInternal = (val: boolean) => {
+    controller?.onOpenChange?.(val)
+    props.onOpenChange?.(val)
+  }
+
+  const [open, setOpen] = useControllableState({
+    prop: controller?.open ?? props.open,
+    defaultProp: props.defaultOpen ?? false,
+    onChange: onOpenChangeInternal,
+    strategy: 'most-recent-wins',
+    transition: true,
+  })
+
+  return {
+    open,
+    setOpen,
+    isHidden,
+    controller,
+  }
+}
+
+export type SheetOpenState = ReturnType<typeof useSheetOpenState>

package/src/useSheetProviderProps.tsx

@@ -0,0 +1,71 @@
+import { TamaguiElement } from '@tamagui/core'
+import { useConstant } from '@tamagui/use-constant'
+import { useControllableState } from '@tamagui/use-controllable-state'
+import React, { useCallback, useMemo, useState } from 'react'
+
+import { ScrollBridge, SheetProps } from './types'
+import { SheetOpenState } from './useSheetOpenState'
+
+export function useSheetProviderProps(props: SheetProps, state: SheetOpenState) {
+  const contentRef = React.useRef<TamaguiElement>(null)
+  const [frameSize, setFrameSize] = useState<number>(0)
+  const snapPointsProp = props.snapPoints || [80]
+
+  const snapPoints = useMemo(
+    () => (props.dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(snapPointsProp), props.dismissOnSnapToBottom]
+  )
+
+  // lets set -1 to be always the "open = false" position
+  const [position_, setPositionImmediate] = useControllableState({
+    prop: props.position,
+    defaultProp: props.defaultPosition || (state.open ? 0 : -1),
+    onChange: props.onPositionChange,
+    strategy: 'most-recent-wins',
+    transition: true,
+  })
+
+  const position = state.open === false ? -1 : position_
+
+  const setPosition = useCallback(
+    (next: number) => {
+      // close on dismissOnSnapToBottom (and set position so it animates)
+      if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {
+        state.setOpen(false)
+      } else {
+        setPositionImmediate(next)
+      }
+    },
+    [props.dismissOnSnapToBottom, snapPoints.length, setPositionImmediate, state.setOpen]
+  )
+
+  const scrollBridge = useConstant<ScrollBridge>(() => ({
+    enabled: false,
+    y: 0,
+    paneY: 0,
+    paneMinY: 0,
+    scrollStartY: -1,
+    drag: () => {},
+    release: () => {},
+    scrollLock: false,
+  }))
+
+  return {
+    modal: !!props.modal,
+    open: state.open,
+    setOpen: state.setOpen,
+    hidden: !!state.isHidden,
+    contentRef,
+    frameSize,
+    setFrameSize,
+    dismissOnOverlayPress: props.dismissOnOverlayPress ?? true,
+    dismissOnSnapToBottom: props.dismissOnSnapToBottom ?? false,
+    scope: props.__scopeSheet,
+    position,
+    snapPoints,
+    setPosition,
+    setPositionImmediate,
+    scrollBridge,
+  }
+}