@hanzogui/sheet 2.0.0

package/src/SheetScrollView.tsx

@@ -0,0 +1,195 @@
+import { composeRefs } from '@hanzogui/compose-refs'
+import { isWeb, View, type GetRef } from '@hanzogui/core'
+import type { ScrollViewProps } from '@hanzogui/scroll-view'
+import { ScrollView } from '@hanzogui/scroll-view'
+import { useControllableState } from '@hanzogui/use-controllable-state'
+import React, { useEffect, useRef, useState } from 'react'
+import type { ScrollView as RNScrollView } from 'react-native'
+import { useGestureSheetContext } from './GestureSheetContext'
+import { getGestureHandlerState, isGestureHandlerEnabled } from './gestureState'
+import { useSheetContext } from './SheetContext'
+import type { SheetScopedProps } from './types'
+import { useSheetScrollViewGestures } from './useSheetScrollViewGestures'
+
+const SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'
+
+export const SheetScrollView = React.forwardRef<
+  GetRef<typeof ScrollView>,
+  ScrollViewProps
+>(
+  (
+    {
+      __scopeSheet,
+      children,
+      onScroll,
+      scrollEnabled: scrollEnabledProp,
+      ...props
+    }: SheetScopedProps<ScrollViewProps>,
+    ref
+  ) => {
+    const context = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)
+    const gestureContext = useGestureSheetContext()
+    const { scrollBridge, setHasScrollView } = context
+    const [scrollEnabled] = useControllableState({
+      prop: scrollEnabledProp,
+      defaultProp: true,
+    })
+    const scrollRef = React.useRef<RNScrollView | null>(null)
+
+    const panGestureRef = gestureContext?.panGestureRef
+    const { ScrollView: RNGHScrollView } = getGestureHandlerState()
+    const useRNGHScrollView = isGestureHandlerEnabled() && RNGHScrollView && panGestureRef
+
+    // RNGH scroll locking state
+    const currentScrollOffset = useRef(0)
+    const lockedScrollY = useRef(0)
+
+    const setScrollEnabled = (next: boolean, lockTo?: number) => {
+      if (!next) {
+        const lockY = lockTo ?? currentScrollOffset.current
+        lockedScrollY.current = lockY
+        scrollBridge.scrollLockY = lockY
+        scrollRef.current?.scrollTo?.({ x: 0, y: lockY, animated: false })
+      } else {
+        lockedScrollY.current = currentScrollOffset.current
+        scrollBridge.scrollLockY = undefined
+      }
+    }
+
+    const forceScrollTo = (y: number) => {
+      scrollRef.current?.scrollTo?.({ x: 0, y, animated: false })
+    }
+
+    useEffect(() => {
+      setHasScrollView(true)
+      if (isGestureHandlerEnabled()) {
+        scrollBridge.setScrollEnabled = setScrollEnabled
+        scrollBridge.forceScrollTo = forceScrollTo
+      }
+      return () => {
+        setHasScrollView(false)
+        scrollBridge.setScrollEnabled = undefined
+        scrollBridge.forceScrollTo = undefined
+      }
+    }, [])
+
+    const [hasScrollableContent, setHasScrollableContent] = useState(true)
+    const parentHeight = useRef(0)
+    const contentHeight = useRef(0)
+
+    const updateScrollable = () => {
+      if (parentHeight.current && contentHeight.current) {
+        setHasScrollableContent(contentHeight.current > parentHeight.current)
+      }
+    }
+
+    useEffect(() => {
+      scrollBridge.hasScrollableContent = hasScrollableContent
+    }, [hasScrollableContent])
+
+    // platform-specific gesture handling
+    const gestureProps = useSheetScrollViewGestures({
+      scrollRef,
+      scrollBridge,
+      hasScrollableContent,
+      scrollEnabled,
+      setScrollEnabled,
+    })
+
+    // content wrapper for measuring height
+    const contentWrapper = (
+      <View
+        onLayout={(e) => {
+          const height = Math.floor(e.nativeEvent.layout.height)
+          if (height !== contentHeight.current) {
+            contentHeight.current = height
+            updateScrollable()
+          }
+        }}
+      >
+        {children}
+      </View>
+    )
+
+    // RNGH ScrollView path
+    if (useRNGHScrollView && RNGHScrollView && panGestureRef) {
+      const RNGHComponent = RNGHScrollView as any
+      return (
+        <RNGHComponent
+          ref={composeRefs(scrollRef as any, ref)}
+          style={{ flex: 1 }}
+          scrollEventThrottle={1}
+          scrollEnabled={scrollEnabled}
+          simultaneousHandlers={[panGestureRef]}
+          onLayout={(e: any) => {
+            parentHeight.current = Math.ceil(e.nativeEvent.layout.height)
+            updateScrollable()
+          }}
+          onScroll={(e: any) => {
+            const { y } = e.nativeEvent.contentOffset
+            currentScrollOffset.current = y
+
+            if (scrollBridge.scrollLockY !== undefined) {
+              if (y !== scrollBridge.scrollLockY) {
+                scrollRef.current?.scrollTo?.({
+                  x: 0,
+                  y: scrollBridge.scrollLockY,
+                  animated: false,
+                })
+              }
+              scrollBridge.y = scrollBridge.scrollLockY
+              onScroll?.({
+                ...e,
+                nativeEvent: {
+                  ...e.nativeEvent,
+                  contentOffset: {
+                    ...e.nativeEvent.contentOffset,
+                    y: scrollBridge.scrollLockY,
+                  },
+                },
+              })
+              return
+            }
+
+            scrollBridge.y = y
+            if (y > 0) scrollBridge.scrollStartY = -1
+            onScroll?.(e)
+          }}
+          contentContainerStyle={{ minHeight: '100%' }}
+          bounces={false}
+          keyboardShouldPersistTaps="always"
+          keyboardDismissMode="none"
+          {...props}
+        >
+          {contentWrapper}
+        </RNGHComponent>
+      )
+    }
+
+    // fallback ScrollView with platform-specific gesture props
+    return (
+      <ScrollView
+        onLayout={(e) => {
+          parentHeight.current = Math.ceil(e.nativeEvent.layout.height)
+          updateScrollable()
+        }}
+        ref={composeRefs(scrollRef as any, ref)}
+        flex={1}
+        scrollEventThrottle={1}
+        className="_ovs-contain"
+        scrollEnabled={scrollEnabled}
+        onScroll={(e) => {
+          const { y } = e.nativeEvent.contentOffset
+          scrollBridge.y = y
+          if (y > 0) scrollBridge.scrollStartY = -1
+          onScroll?.(e)
+        }}
+        contentContainerStyle={{ minHeight: '100%' }}
+        {...gestureProps}
+        {...props}
+      >
+        {contentWrapper}
+      </ScrollView>
+    )
+  }
+)

package/src/constants.tsx

@@ -0,0 +1,5 @@
+export const constants = {}
+
+export const SHEET_NAME = 'Sheet'
+export const SHEET_HANDLE_NAME = 'SheetHandle'
+export const SHEET_OVERLAY_NAME = 'SheetOverlay'

package/src/contexts.ts

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const ParentSheetContext = React.createContext({
+  zIndex: 100_000,
+})
+
+export const SheetInsideSheetContext = React.createContext<
+  ((hasChild: boolean) => void) | null
+>(null)

package/src/controller.ts

@@ -0,0 +1,9 @@
+// Lightweight controller exports - no styled components
+// Use this entry point when you only need SheetController without the full Sheet
+
+export { SheetController } from './SheetController'
+export {
+  SheetControllerContext,
+  useSheetController,
+  type SheetControllerContextValue,
+} from './useSheetController'

package/src/createSheet.tsx

@@ -0,0 +1,296 @@
+import { useComposedRefs } from '@hanzogui/compose-refs'
+import { useIsomorphicLayoutEffect } from '@hanzogui/constants'
+import type {
+  GetProps,
+  ViewProps,
+  GuiComponent,
+  GuiComponentExpectingVariants,
+  GuiElement,
+} from '@hanzogui/core'
+import { View } from '@hanzogui/core'
+import { composeEventHandlers, withStaticProperties } from '@hanzogui/helpers'
+import { resolveViewZIndex } from '@hanzogui/portal'
+import { RemoveScroll } from '@hanzogui/remove-scroll'
+import { useDidFinishSSR } from '@hanzogui/use-did-finish-ssr'
+import { StackZIndexContext } from '@hanzogui/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'
+
+type SharedSheetProps = {
+  open?: boolean
+}
+
+type BaseProps = ViewProps & SharedSheetProps
+
+type SheetStyledComponent = GuiComponentExpectingVariants<BaseProps, SharedSheetProps>
+
+export function createSheet<
+  H extends GuiComponent | SheetStyledComponent,
+  F extends GuiComponent | SheetStyledComponent,
+  O extends GuiComponent | 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<GuiElement>(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}
+          onPress={composeEventHandlers(
+            props.onPress,
+            context.dismissOnOverlayPress
+              ? () => {
+                  context.setOpen(false)
+                }
+              : undefined
+          )}
+        />
+      )
+    }, [props.onPress, props.opacity, context.dismissOnOverlayPress])
+
+    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 down another 50%,
+     * this is useful if your Sheet has a spring animation that bounces "past" the top when
+     * opening, preventing it from showing the content underneath.
+     */
+    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"
+              children={null}
+              // Don't inherit testID - this is a visual helper element
+              testID={undefined}
+              id={undefined}
+              position="absolute"
+              bottom="-100%"
+              zIndex={-1}
+              height={context.frameSize}
+              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.HANZO_GUI_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/gestureState.ts

@@ -0,0 +1,24 @@
+/**
+ * Re-export gesture state from @hanzogui/native.
+ * Sheet uses this for backward compatibility with existing code.
+ */
+
+import { getGestureHandler, type GestureState } from '@hanzogui/native'
+
+export type { GestureState as GestureHandlerState } from '@hanzogui/native'
+
+// backward compat helpers
+export function isGestureHandlerEnabled(): boolean {
+  return getGestureHandler().isEnabled
+}
+
+export function getGestureHandlerState(): GestureState {
+  return getGestureHandler().state
+}
+
+export function setGestureHandlerState(updates: Partial<GestureState>): void {
+  getGestureHandler().set(updates)
+}
+
+// alias for backward compatibility
+export const setGestureState = setGestureHandlerState

package/src/helpers.tsx

@@ -0,0 +1,31 @@
+export function resisted(y: number, minY: number, maxOverflow = 25) {
+  // If we're not past the boundary, return the original position
+  if (y >= minY) {
+    return y
+  }
+
+  // Calculate how far we've gone past the boundary
+  const pastBoundary = minY - y
+
+  // Use a square root function for very gentle resistance
+  // This creates a milder resistance curve than logarithmic
+  // Reduced multiplier from 1.5 to 1.0 for even less resistance
+  const resistedDistance = Math.sqrt(pastBoundary) * 2
+
+  // Return the position with resistance applied
+  return minY - resistedDistance
+}
+
+// // set all the way off screen
+// // + 0.1 ensures this is unique - see hasntMeasured ref
+
+// let hiddenSize: number
+
+// export function getHiddenSize() {
+//   if (hiddenSize == undefined) {
+//     // this trigger reflow on web avoid doing on startup
+//     const screen = Dimensions.get('screen')
+//     hiddenSize = Math.max(screen.height, screen.width) + 0.1
+//   }
+//   return hiddenSize
+// }

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from './Sheet'
+export * from './useSheet'
+export * from './createSheet'
+export * from './SheetController'
+export * from './useSheetController'
+export * from './useSheetOpenState'
+export * from './useSheetOffscreenSize'
+export * from './SheetScrollView'
+export * from './nativeSheet'
+export * from './types'
+export * from './contexts'

package/src/nativeSheet.tsx

@@ -0,0 +1,89 @@
+import { YStack } from '@hanzogui/stacks'
+import type { FunctionComponent } from 'react'
+import { useEffect, useRef } from 'react'
+import { View } from 'react-native'
+import { SheetProvider } from './SheetContext'
+import type { SheetProps } from './types'
+import { useSheetOpenState } from './useSheetOpenState'
+import { useSheetProviderProps } from './useSheetProviderProps'
+
+// import { useSheetSnapPoints } from './useSheetSnapPoints'
+
+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,
+  RNIOSModal: { ModalSheetView: any; ModalSheetViewMainContent: any }
+) {
+  const { ModalSheetView, ModalSheetViewMainContent } = RNIOSModal
+
+  if (platform === 'ios') {
+    nativeSheets[platform] = (props: SheetProps) => {
+      const state = useSheetOpenState(props)
+      const providerProps = useSheetProviderProps(props, state)
+      // const { position } = providerProps
+      // const { positions } = useSheetSnapPoints(providerProps)
+
+      const { open, setOpen } = state
+      const ref = useRef<{
+        presentModal: Function
+        dismissModal: Function
+      }>(undefined)
+
+      useEffect(() => {
+        if (open) {
+          ref.current?.presentModal()
+        } else {
+          ref.current?.dismissModal()
+        }
+      }, [open])
+
+      function setOpenInternal(next: boolean) {
+        props.onOpenChange?.(open)
+        setOpen(next)
+      }
+
+      // modalContentPreferredContentSize={{
+      //   mode: 'percent',
+      //   percentWidth: '100%',
+      //   percentHeight:
+      // }}
+
+      return (
+        <>
+          <SheetProvider setHasScrollView={emptyFn} {...providerProps} onlyShowFrame>
+            <ModalSheetView ref={ref} onModalDidDismiss={() => setOpenInternal(false)}>
+              <ModalSheetViewMainContent>
+                <View style={{ flex: 1 }}>{props.children}</View>
+              </ModalSheetViewMainContent>
+            </ModalSheetView>
+
+            {/* for some reason select triggers wont show on native if this isn't inside the actual tree not inside implementation... */}
+            {/* so just hiding it here for now... not great... */}
+            <YStack
+              position="absolute"
+              opacity={0}
+              pointerEvents="none"
+              width={0}
+              height={0}
+            >
+              {props.children}
+            </YStack>
+          </SheetProvider>
+        </>
+      )
+    }
+  }
+}
+
+const emptyFn = () => {
+  // TODO
+}