@tamagui/sheet 1.130.3 → 1.130.5

package/src/SheetScrollView.tsx

@@ -1,9 +1,9 @@
 import { composeRefs } from '@tamagui/compose-refs'
-import { isWeb, type GetRef } from '@tamagui/core'
+import { isClient, isWeb, View, type GetRef } from '@tamagui/core'
 import type { ScrollViewProps } from '@tamagui/scroll-view'
 import { ScrollView } from '@tamagui/scroll-view'
 import { useControllableState } from '@tamagui/use-controllable-state'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import type { ScrollView as RNScrollView } from 'react-native'
 import { useSheetContext } from './SheetContext'
 import type { SheetScopedProps } from './types'
@@ -18,6 +18,8 @@ const SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'
 
 export const SheetScrollView = React.forwardRef<
   GetRef<typeof ScrollView>,
+  // we disallow customizing it because we want to let people know it doens't work well with out measuring of inner content
+  // height using a view
   ScrollViewProps
 >(
   (
@@ -91,12 +93,16 @@ export const SheetScrollView = React.forwardRef<
     const scrollable = scrollEnabled
 
     useEffect(() => {
-      if (typeof window === 'undefined') return
+      if (!isClient) return
       if (!scrollRef.current) return
 
       const controller = new AbortController()
 
-      const node = scrollRef.current.getScrollableNode() as HTMLElement
+      const node = scrollRef.current?.getScrollableNode() as HTMLElement | undefined
+
+      if (!node) {
+        return
+      }
 
       // this is unfortuantely the only way to prevent a scroll once a scroll already started
       // we just keep setting it back to the last value - it should only ever be 0 as this only
@@ -127,10 +133,24 @@ export const SheetScrollView = React.forwardRef<
         disposeBridgeListen()
         controller.abort()
       }
-    }, [])
+    }, [scrollRef])
+
+    const [hasScrollableContent, setHasScrollableContent] = useState(true)
+    const parentHeight = useRef(0)
+    const contentHeight = useRef(0)
+
+    const setIsScrollable = () => {
+      if (parentHeight.current && contentHeight.current) {
+        setHasScrollableContent(contentHeight.current > parentHeight.current)
+      }
+    }
 
     return (
       <ScrollView
+        onLayout={(e) => {
+          parentHeight.current = e.nativeEvent.layout.height
+          setIsScrollable()
+        }}
         ref={composeRefs(scrollRef as any, ref)}
         flex={1}
         scrollEventThrottle={8}
@@ -192,7 +212,8 @@ export const SheetScrollView = React.forwardRef<
             const isDraggingUp = dy < 0
             const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY
 
-            const shouldScrollLock = (dy === 0 || isDraggingUp) && isPaneAtTop
+            const shouldScrollLock =
+              hasScrollableContent && (dy === 0 || isDraggingUp) && isPaneAtTop
 
             if (shouldScrollLock && !state.current.isScrolling) {
               state.current.isScrolling = true
@@ -217,6 +238,18 @@ export const SheetScrollView = React.forwardRef<
         }}
         {...props}
       >
+        {/* content height measurer */}
+        <View
+          position="absolute"
+          inset={0}
+          pointerEvents="none"
+          zIndex={-1}
+          onLayout={(e) => {
+            contentHeight.current = e.nativeEvent.layout.height
+            setIsScrollable()
+          }}
+        />
+
         {children}
       </ScrollView>
     )

package/types/Sheet.d.ts

@@ -1,6 +1,7 @@
 export { createSheetScope } from './SheetContext';
 export * from './types';
 export declare const Handle: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    open?: boolean | undefined;
     elevation?: number | import("@tamagui/core").SizeTokens | undefined;
     inset?: number | import("@tamagui/core").SizeTokens | {
         top?: number;
@@ -9,10 +10,10 @@ export declare const Handle: import("@tamagui/core").TamaguiComponent<import("@t
         right?: number;
     } | null | undefined;
     fullscreen?: boolean | undefined;
-    open?: boolean | undefined;
     unstyled?: boolean | undefined;
 }, import("@tamagui/core").StaticConfigPublic>;
 export declare const Overlay: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    open?: boolean | undefined;
     elevation?: number | import("@tamagui/core").SizeTokens | undefined;
     inset?: number | import("@tamagui/core").SizeTokens | {
         top?: number;
@@ -21,9 +22,8 @@ export declare const Overlay: import("@tamagui/core").TamaguiComponent<import("@
         right?: number;
     } | null | undefined;
     fullscreen?: boolean | undefined;
-    open?: boolean | undefined;
-    transparent?: boolean | undefined;
     circular?: boolean | undefined;
+    transparent?: boolean | undefined;
     unstyled?: boolean | undefined;
     hoverTheme?: boolean | undefined;
     pressTheme?: boolean | undefined;
@@ -93,6 +93,7 @@ export declare const Sheet: import("react").ForwardRefExoticComponent<{
             adjustPaddingForOffscreenContent?: boolean;
         }>>;
         Overlay: import("react").MemoExoticComponent<(propsIn: import("./types").SheetScopedProps<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+            open?: boolean | undefined;
             elevation?: number | import("@tamagui/core").SizeTokens | undefined;
             inset?: number | import("@tamagui/core").SizeTokens | {
                 top?: number;
@@ -101,9 +102,8 @@ export declare const Sheet: import("react").ForwardRefExoticComponent<{
                 right?: number;
             } | null | undefined;
             fullscreen?: boolean | undefined;
-            open?: boolean | undefined;
-            transparent?: boolean | undefined;
             circular?: boolean | undefined;
+            transparent?: boolean | undefined;
             unstyled?: boolean | undefined;
             hoverTheme?: boolean | undefined;
             pressTheme?: boolean | undefined;
@@ -154,6 +154,7 @@ export declare const Sheet: import("react").ForwardRefExoticComponent<{
         adjustPaddingForOffscreenContent?: boolean;
     }>>;
     Overlay: import("react").MemoExoticComponent<(propsIn: import("./types").SheetScopedProps<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+        open?: boolean | undefined;
         elevation?: number | import("@tamagui/core").SizeTokens | undefined;
         inset?: number | import("@tamagui/core").SizeTokens | {
             top?: number;
@@ -162,9 +163,8 @@ export declare const Sheet: import("react").ForwardRefExoticComponent<{
             right?: number;
         } | null | undefined;
         fullscreen?: boolean | undefined;
-        open?: boolean | undefined;
-        transparent?: boolean | undefined;
         circular?: boolean | undefined;
+        transparent?: boolean | undefined;
         unstyled?: boolean | undefined;
         hoverTheme?: boolean | undefined;
         pressTheme?: boolean | undefined;
@@ -199,6 +199,7 @@ export declare const Sheet: import("react").ForwardRefExoticComponent<{
 };
 /** @deprecated use Overlay instead  */
 export declare const SheetOverlayFrame: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    open?: boolean | undefined;
     elevation?: number | import("@tamagui/core").SizeTokens | undefined;
     inset?: number | import("@tamagui/core").SizeTokens | {
         top?: number;
@@ -207,9 +208,8 @@ export declare const SheetOverlayFrame: import("@tamagui/core").TamaguiComponent
         right?: number;
     } | null | undefined;
     fullscreen?: boolean | undefined;
-    open?: boolean | undefined;
-    transparent?: boolean | undefined;
     circular?: boolean | undefined;
+    transparent?: boolean | undefined;
     unstyled?: boolean | undefined;
     hoverTheme?: boolean | undefined;
     pressTheme?: boolean | undefined;
@@ -223,6 +223,7 @@ export declare const SheetOverlayFrame: import("@tamagui/core").TamaguiComponent
 }, import("@tamagui/core").StaticConfigPublic>;
 /** @deprecated use Overlay instead  */
 export declare const SheetHandleFrame: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    open?: boolean | undefined;
     elevation?: number | import("@tamagui/core").SizeTokens | undefined;
     inset?: number | import("@tamagui/core").SizeTokens | {
         top?: number;
@@ -231,7 +232,6 @@ export declare const SheetHandleFrame: import("@tamagui/core").TamaguiComponent<
         right?: number;
     } | null | undefined;
     fullscreen?: boolean | undefined;
-    open?: boolean | undefined;
     unstyled?: boolean | undefined;
 }, import("@tamagui/core").StaticConfigPublic>;
 //# sourceMappingURL=Sheet.d.ts.map

package/types/SheetImplementationCustom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetImplementationCustom.d.ts","sourceRoot":"","sources":["../src/SheetImplementationCustom.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAO/C,OAAO,EAAsC,IAAI,EAAE,MAAM,cAAc,CAAA;AAIvE,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,SAAS,CAAA;AAWzD,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAiiBrC,CAAA"}
+{"version":3,"file":"SheetImplementationCustom.d.ts","sourceRoot":"","sources":["../src/SheetImplementationCustom.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAO/C,OAAO,EAAsC,IAAI,EAAE,MAAM,cAAc,CAAA;AAIvE,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,SAAS,CAAA;AAWzD,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAmiBrC,CAAA"}

package/types/SheetScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetScrollView.d.ts","sourceRoot":"","sources":["../src/SheetScrollView.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,cAAc,CAAA;AAY9D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;wCA6M3B,CAAA"}
+{"version":3,"file":"SheetScrollView.d.ts","sourceRoot":"","sources":["../src/SheetScrollView.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,cAAc,CAAA;AAY9D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;wCA8O3B,CAAA"}

package/types/nativeSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativeSheet.d.ts","sourceRoot":"","sources":["../src/nativeSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAI9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAMzC,KAAK,oBAAoB,GAAG,KAAK,CAAA;AAMjC,wBAAgB,cAAc,CAAC,QAAQ,EAAE,oBAAoB,wCAE5D;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,oBAAoB,EAC9B,UAAU,EAAE;IAAE,cAAc,EAAE,GAAG,CAAC;IAAC,yBAAyB,EAAE,GAAG,CAAA;CAAE,QAiEpE"}
+{"version":3,"file":"nativeSheet.d.ts","sourceRoot":"","sources":["../src/nativeSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAI9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAMzC,KAAK,oBAAoB,GAAG,KAAK,CAAA;AAMjC,wBAAgB,cAAc,CAAC,QAAQ,EAAE,oBAAoB,wCAE5D;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,oBAAoB,EAC9B,UAAU,EAAE;IAAE,cAAc,EAAE,GAAG,CAAC;IAAC,yBAAyB,EAAE,GAAG,CAAA;CAAE,QA6DpE"}