@hanzogui/sheet 2.0.0-rc.41-hanzoai.3

package/dist/jsx/useSheetScrollViewGestures.native.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useSheetScrollViewGestures_native_exports = {};
+__export(useSheetScrollViewGestures_native_exports, {
+  useSheetScrollViewGestures: () => useSheetScrollViewGestures
+});
+module.exports = __toCommonJS(useSheetScrollViewGestures_native_exports);
+var import_react = require("react");
+function useSheetScrollViewGestures(param) {
+  var {
+    scrollBridge,
+    hasScrollableContent,
+    scrollEnabled,
+    setScrollEnabled
+  } = param;
+  var state = (0, import_react.useRef)({
+    lastPageY: 0,
+    dragAt: 0,
+    dys: [],
+    isScrolling: false,
+    isDraggingScrollArea: false,
+    scrollEngaged: false,
+    prevScrollY: 0,
+    handoffOccurred: false,
+    handoffDragOffset: 0
+  });
+  var release = function () {
+    var s = state.current;
+    if (!s.isDraggingScrollArea) return;
+    s.isDraggingScrollArea = false;
+    scrollBridge.scrollStartY = -1;
+    scrollBridge.scrollLock = false;
+    s.isScrolling = false;
+    s.scrollEngaged = false;
+    s.prevScrollY = 0;
+    s.handoffOccurred = false;
+    s.handoffDragOffset = 0;
+    setScrollEnabled(true);
+    var vy = 0;
+    if (s.dys.length) {
+      var recentDys = s.dys.slice(-10);
+      var dist = recentDys.reduce(function (a, b) {
+        return a + b;
+      }, 0);
+      vy = dist / recentDys.length * 0.04;
+    }
+    s.dys = [];
+    scrollBridge.release({
+      dragAt: s.dragAt,
+      vy
+    });
+  };
+  var onStartShouldSetResponder = function () {
+    var s = state.current;
+    scrollBridge.scrollStartY = -1;
+    s.isDraggingScrollArea = true;
+    s.scrollEngaged = scrollBridge.y > 0;
+    s.prevScrollY = scrollBridge.y;
+    s.handoffOccurred = false;
+    s.handoffDragOffset = 0;
+    return false;
+  };
+  var onMoveShouldSetResponder = function (e) {
+    if (!scrollEnabled) return false;
+    var s = state.current;
+    var {
+      pageY
+    } = e.nativeEvent;
+    if (s.lastPageY === 0) {
+      s.lastPageY = pageY;
+      return false;
+    }
+    return Math.abs(pageY - s.lastPageY) > 10;
+  };
+  var onResponderMove = function (e) {
+    var s = state.current;
+    var {
+      pageY
+    } = e.nativeEvent;
+    if (!s.isScrolling && scrollBridge.scrollStartY === -1) {
+      scrollBridge.scrollStartY = pageY;
+      s.lastPageY = pageY;
+    }
+    var dragAt = pageY - scrollBridge.scrollStartY;
+    var dy = pageY - s.lastPageY;
+    s.lastPageY = pageY;
+    var isDraggingDown = dy > 0;
+    var isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY + 5;
+    var currentScrollY = scrollBridge.y;
+    if (currentScrollY > 0) s.scrollEngaged = true;
+    var wasScrolledNowAtZero = s.scrollEngaged && s.prevScrollY > 0 && currentScrollY <= 0;
+    if (wasScrolledNowAtZero && !s.handoffOccurred) {
+      s.handoffOccurred = true;
+      s.handoffDragOffset = 0;
+    }
+    s.prevScrollY = currentScrollY;
+    var panHandles = false;
+    if (!isPaneAtTop) {
+      panHandles = isDraggingDown ? currentScrollY <= 0 || !hasScrollableContent : true;
+    } else if (isDraggingDown) {
+      if (currentScrollY > 0 && hasScrollableContent && !s.handoffOccurred) {
+        panHandles = false;
+      } else {
+        panHandles = s.handoffOccurred || wasScrolledNowAtZero || currentScrollY <= 0;
+      }
+    } else {
+      panHandles = !hasScrollableContent;
+      if (!panHandles) {
+        s.isScrolling = true;
+        scrollBridge.scrollLock = true;
+        setScrollEnabled(true);
+        return;
+      }
+    }
+    if (panHandles) {
+      setScrollEnabled(false);
+      var effectiveDragAt = dragAt;
+      if (s.handoffOccurred) {
+        s.handoffDragOffset += dy;
+        effectiveDragAt = s.handoffDragOffset;
+      }
+      scrollBridge.drag(effectiveDragAt);
+      s.dragAt = effectiveDragAt;
+      s.dys.push(dy);
+      if (s.dys.length > 100) s.dys = s.dys.slice(-10);
+    } else {
+      setScrollEnabled(true);
+    }
+  };
+  return {
+    onResponderRelease: release,
+    onStartShouldSetResponder,
+    onMoveShouldSetResponder,
+    onResponderMove
+  };
+}
+//# sourceMappingURL=useSheetScrollViewGestures.native.js.map

package/dist/jsx/useSheetScrollViewGestures.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSheetScrollViewGestures_native_exports","__export","useSheetScrollViewGestures","module","exports","__toCommonJS","import_react","require","param","scrollBridge","hasScrollableContent","scrollEnabled","setScrollEnabled","state","useRef","lastPageY","dragAt","dys","isScrolling","isDraggingScrollArea","scrollEngaged","prevScrollY","handoffOccurred","handoffDragOffset","release","s","current","scrollStartY","scrollLock","vy","length","recentDys","slice","dist","reduce","a","b","onStartShouldSetResponder","y","onMoveShouldSetResponder","e","pageY","nativeEvent","Math","abs","onResponderMove","dy","isDraggingDown","isPaneAtTop","paneY","paneMinY","currentScrollY","wasScrolledNowAtZero","panHandles","effectiveDragAt","drag","push","onResponderRelease"],"sources":["../../src/useSheetScrollViewGestures.native.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/next.md

@@ -0,0 +1,78 @@
+# Sheet ScrollView Gesture Handoff - Next Steps
+
+## Current Limitation
+
+The Sheet + ScrollView gesture coordination on native iOS has limitations because Hanzogui 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 '@hanzogui/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/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@hanzogui/sheet",
+  "version": "2.0.0-rc.41-hanzoai.3",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "setup-gesture-handler": [
+        "./types/setupGestureHandler.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    },
+    "./controller": {
+      "types": "./types/controller.d.ts",
+      "react-native": "./dist/esm/controller.native.js",
+      "browser": "./dist/esm/controller.mjs",
+      "module": "./dist/esm/controller.mjs",
+      "import": "./dist/esm/controller.mjs",
+      "require": "./dist/cjs/controller.cjs",
+      "default": "./dist/cjs/controller.native.js"
+    },
+    "./setup-gesture-handler": {
+      "types": "./types/setupGestureHandler.d.ts",
+      "react-native": "./dist/esm/setupGestureHandler.native.js",
+      "browser": "./dist/esm/setupGestureHandler.mjs",
+      "module": "./dist/esm/setupGestureHandler.mjs",
+      "import": "./dist/esm/setupGestureHandler.mjs",
+      "require": "./dist/cjs/setupGestureHandler.cjs",
+      "default": "./dist/esm/setupGestureHandler.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzogui-build",
+    "watch": "hanzogui-build --watch",
+    "clean": "hanzogui-build clean"
+  },
+  "dependencies": {
+    "@hanzogui/adapt": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/animate-presence": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/animations-react-native": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/compose-refs": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/constants": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/core": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/create-context": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/helpers": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/native": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/portal": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/remove-scroll": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/scroll-view": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/stacks": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/use-constant": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/use-controllable-state": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/use-did-finish-ssr": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/use-keyboard-visible": "2.0.0-rc.41-hanzoai.3",
+    "@hanzogui/z-index-stack": "2.0.0-rc.41-hanzoai.3"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.41-hanzoai.3",
+    "react": ">=19",
+    "react-native": "0.83.2",
+    "react-native-gesture-handler": "~2.30.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": {
+      "optional": true
+    }
+  },
+  "module:jsx": "dist/jsx",
+  "removeSideEffects": true
+}

package/setup-gesture-handler/index.cjs

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

package/setup-gesture-handler/index.js

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

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

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

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

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

package/setup-gesture-handler.cjs

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

package/src/GestureDetectorWrapper.tsx

@@ -0,0 +1,41 @@
+import type React from 'react'
+import { View, type ViewStyle } from 'react-native'
+import { getGestureHandlerState, isGestureHandlerEnabled } from './gestureState'
+
+interface GestureDetectorWrapperProps {
+  gesture: any
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+/**
+ * Conditionally wraps children with GestureDetector when RNGH is available.
+ * Uses a plain View wrapper that GestureDetector can attach gesture handlers to.
+ */
+export function GestureDetectorWrapper({
+  gesture,
+  children,
+  style,
+}: GestureDetectorWrapperProps) {
+  const { GestureDetector } = getGestureHandlerState()
+  const enabled = isGestureHandlerEnabled()
+
+  // console.warn('[RNGH-Wrapper] enabled:', enabled, 'hasDetector:', !!GestureDetector, 'hasGesture:', !!gesture)
+
+  // only wrap if we have RNGH available AND a gesture to attach
+  if (enabled && GestureDetector && gesture) {
+    // GestureDetector needs a native View to attach handlers to
+    // the View wrapper ensures proper gesture propagation
+    // console.warn('[RNGH-Wrapper] WRAPPING')
+    return (
+      <GestureDetector gesture={gesture}>
+        <View style={style} collapsable={false}>
+          {children}
+        </View>
+      </GestureDetector>
+    )
+  }
+
+  // pass through children in a consistent View wrapper
+  return <View style={style}>{children}</View>
+}

package/src/GestureSheetContext.tsx

@@ -0,0 +1,62 @@
+import type React from 'react'
+import { createContext, useContext, type RefObject } from 'react'
+
+export interface GestureSheetContextValue {
+  /**
+   * The sheet's pan gesture object, used for simultaneousHandlers
+   * in ScrollView to coordinate gestures
+   */
+  panGesture: any | null
+  /**
+   * Ref to the pan gesture for simultaneousHandlers prop
+   */
+  panGestureRef: RefObject<any> | null
+  /**
+   * Whether the sheet is currently being dragged by the user
+   */
+  isDragging: boolean
+  /**
+   * Set whether panning should be blocked (e.g., when scrolling)
+   */
+  setBlockPan: (blocked: boolean) => void
+  /**
+   * Whether pan gesture is currently blocked
+   */
+  blockPan: boolean
+}
+
+const GestureSheetContext = createContext<GestureSheetContextValue | null>(null)
+
+export function useGestureSheetContext(): GestureSheetContextValue | null {
+  return useContext(GestureSheetContext)
+}
+
+export interface GestureSheetProviderProps {
+  children: React.ReactNode
+  isDragging: boolean
+  blockPan: boolean
+  setBlockPan: (blocked: boolean) => void
+  panGesture: any | null
+  panGestureRef: RefObject<any> | null
+}
+
+export function GestureSheetProvider({
+  children,
+  isDragging,
+  blockPan,
+  setBlockPan,
+  panGesture,
+  panGestureRef,
+}: GestureSheetProviderProps) {
+  const value: GestureSheetContextValue = {
+    panGesture,
+    panGestureRef,
+    isDragging,
+    blockPan,
+    setBlockPan,
+  }
+
+  return (
+    <GestureSheetContext.Provider value={value}>{children}</GestureSheetContext.Provider>
+  )
+}

package/src/Sheet.tsx

@@ -0,0 +1,114 @@
+import { styled } from '@hanzogui/core'
+import { XStack, YStack } from '@hanzogui/stacks'
+
+import { SHEET_HANDLE_NAME, SHEET_NAME, SHEET_OVERLAY_NAME } from './constants'
+import { createSheet } from './createSheet'
+
+export { createSheetScope } from './SheetContext'
+export * from './types'
+
+/* -------------------------------------------------------------------------------------------------
+ * SheetHandle
+ * -----------------------------------------------------------------------------------------------*/
+
+export const Handle = styled(XStack, {
+  name: SHEET_HANDLE_NAME,
+
+  variants: {
+    open: {
+      true: {
+        opacity: 1,
+        pointerEvents: 'auto',
+      },
+      false: {
+        opacity: 0,
+        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: process.env.HANZOGUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * SheetOverlay
+ * -----------------------------------------------------------------------------------------------*/
+
+export const Overlay = styled(YStack, {
+  name: SHEET_OVERLAY_NAME,
+
+  variants: {
+    open: {
+      true: {
+        pointerEvents: 'auto',
+      },
+      false: {
+        pointerEvents: 'none',
+      },
+    },
+
+    unstyled: {
+      false: {
+        fullscreen: true,
+        position: 'absolute',
+        backgroundColor: '$background',
+        zIndex: 100_000 - 1,
+        pointerEvents: 'auto',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZOGUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * Sheet
+ * -----------------------------------------------------------------------------------------------*/
+
+export const Frame = styled(YStack, {
+  name: SHEET_NAME,
+
+  variants: {
+    unstyled: {
+      false: {
+        flex: 1,
+        backgroundColor: '$background',
+        borderTopLeftRadius: '$true',
+        borderTopRightRadius: '$true',
+        width: '100%',
+        maxHeight: '100%',
+        overflow: 'hidden',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZOGUI_HEADLESS === '1',
+  },
+})
+
+export const Sheet = createSheet({
+  Frame,
+  Handle,
+  Overlay,
+})

package/src/SheetContext.tsx

@@ -0,0 +1,11 @@
+import { createContextScope } from '@hanzogui/create-context'
+
+import { SHEET_NAME } from './constants'
+import type { SheetContextValue } from './useSheetProviderProps'
+
+export const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)
+
+export const [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(
+  SHEET_NAME,
+  {} as any
+)

package/src/SheetController.tsx

@@ -0,0 +1,47 @@
+import React, { useId, useRef } from 'react'
+import { useEvent } from '@hanzogui/core'
+import type { ReactNode } from 'react'
+
+import type { SheetControllerContextValue } from './useSheetController'
+import { SheetControllerContext } from './useSheetController'
+
+export const SheetController = ({
+  children,
+  onOpenChange: onOpenChangeProp,
+  onAnimationComplete: onAnimationCompleteProp,
+  open,
+  hidden,
+  disableDrag,
+}: Partial<SheetControllerContextValue> & { children?: ReactNode }) => {
+  const onOpenChange = useEvent(onOpenChangeProp)
+  const onAnimationComplete = useEvent(onAnimationCompleteProp)
+  const id = useId()
+
+  // track hidden transitions to signal adapt handoff
+  // when hidden goes from true -> false while open, the sheet should skip animation
+  const wasHiddenRef = useRef(hidden)
+  let skipNextAnimation = false
+  if (wasHiddenRef.current && !hidden && open) {
+    skipNextAnimation = true
+  }
+  wasHiddenRef.current = hidden
+
+  const memoValue = React.useMemo(
+    () => ({
+      id,
+      open,
+      hidden,
+      disableDrag,
+      onOpenChange,
+      onAnimationComplete,
+      skipNextAnimation,
+    }),
+    [id, onOpenChange, onAnimationComplete, open, hidden, disableDrag, skipNextAnimation]
+  )
+
+  return (
+    <SheetControllerContext.Provider value={memoValue}>
+      {children}
+    </SheetControllerContext.Provider>
+  )
+}