@tamagui/sheet 2.7.7 → 3.0.0-beta.1093.1

package/dist/esm/SheetScrollView.mjs

@@ -1,5 +1,5 @@
 import { composeRefs } from "@tamagui/compose-refs";
-import { isWeb, View } from "@tamagui/core";
+import { View, createStyledHOC, isWeb, style } from "@tamagui/core";
 import { ScrollView } from "@tamagui/scroll-view";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import React, { useEffect, useRef, useState } from "react";
@@ -7,295 +7,285 @@ import { useGestureSheetContext } from "./GestureSheetContext.mjs";
 import { getGestureHandlerState, isGestureHandlerEnabled } from "./gestureState.mjs";
 import { useSheetContext } from "./SheetContext.mjs";
 import { useSheetScrollViewGestures } from "./useSheetScrollViewGestures.mjs";
-import { getStableLayoutViewportHeight, getWebKeyboardBottomInset, getWebKeyboardResizeHeight, isEditableElement, MIN_KEYBOARD_HEIGHT } from "./webViewport.mjs";
+import { MIN_KEYBOARD_HEIGHT, getStableLayoutViewportHeight, getWebKeyboardBottomInset, getWebKeyboardResizeHeight, isEditableElement } from "./webViewport.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+
 const SHEET_SCROLL_VIEW_NAME = "SheetScrollView";
-const SheetScrollView = React.forwardRef(({
-  __scopeSheet,
-  children,
-  onScroll,
-  scrollEnabled: scrollEnabledProp,
-  ...props
-}, ref) => {
-  const context = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet);
-  const gestureContext = useGestureSheetContext();
-  const {
-    scrollBridge,
-    setHasScrollView,
-    hasFit,
-    screenSize
-  } = context;
-  const keyboardOccludedHeight = Math.max(0, context.keyboardOccludedHeight || 0);
-  const isKeyboardVisible = context.isKeyboardVisible === true || isWeb && getWebKeyboardResizeHeight() >= MIN_KEYBOARD_HEIGHT;
-  const [scrollEnabled] = useControllableState({
-    prop: scrollEnabledProp,
-    defaultProp: true
-  });
-  const scrollRef = React.useRef(null);
-  const [hasScrollableContent, setHasScrollableContent] = useState(true);
-  const parentHeight = useRef(0);
-  const contentHeight = useRef(0);
-  const frozenFrameHeight = Math.max(0, context.keyboardStableFrameHeight || 0);
-  const fitSizingStyle = hasFit ? {
-    flex: void 0,
-    height: void 0,
-    maxHeight: screenSize || void 0
-  } : {
-    flex: 1
-  };
-  const contentContainerStyle = hasFit ? void 0 : {
-    minHeight: "100%"
-  };
-  const keyboardFrozenOverride = hasFit && isKeyboardVisible && frozenFrameHeight > 0 ? {
-    height: frozenFrameHeight,
-    maxHeight: frozenFrameHeight
-  } : null;
-  const panGestureRef = gestureContext?.panGestureRef;
-  const {
-    ScrollView: RNGHScrollView
-  } = getGestureHandlerState();
-  const useRNGHScrollView = isGestureHandlerEnabled() && RNGHScrollView && panGestureRef;
-  const currentScrollOffset = useRef(0);
-  const lastEmittedScrollOffset = useRef(0);
-  const lockedScrollY = useRef(0);
-  const focusedInputScrollFrame = useRef(0);
-  const setScrollEnabled = (next, lockTo) => {
-    if (!next) {
-      const lockY = lockTo ?? scrollBridge.scrollLockY ?? currentScrollOffset.current;
-      if (scrollBridge.enabled === false && scrollBridge.scrollLockY === lockY) {
-        return;
-      }
-      scrollBridge.enabled = false;
-      lockedScrollY.current = lockY;
-      scrollBridge.scrollLockY = lockY;
-      if (currentScrollOffset.current !== lockY) {
-        scrollRef.current?.scrollTo?.({
-          x: 0,
-          y: lockY,
-          animated: false
-        });
-        currentScrollOffset.current = lockY;
-      }
-    } else {
-      if (scrollBridge.enabled === true && scrollBridge.scrollLockY === void 0) {
-        return;
-      }
-      scrollBridge.enabled = true;
-      lockedScrollY.current = currentScrollOffset.current;
-      scrollBridge.scrollLockY = void 0;
-    }
-  };
-  const forceScrollTo = y => {
-    scrollRef.current?.scrollTo?.({
-      x: 0,
-      y,
-      animated: false
-    });
-    currentScrollOffset.current = y;
-  };
-  const emitManualScroll = React.useCallback((node, y) => {
-    currentScrollOffset.current = y;
-    scrollBridge.y = y;
-    if (y > 0) scrollBridge.scrollStartY = -1;
-    lastEmittedScrollOffset.current = y;
-    onScroll?.({
-      nativeEvent: {
-        contentOffset: {
-          x: node.scrollLeft,
-          y
-        },
-        contentSize: {
-          height: node.scrollHeight,
-          width: node.scrollWidth
-        },
-        layoutMeasurement: {
-          height: node.offsetHeight,
-          width: node.offsetWidth
-        }
-      },
-      timeStamp: Date.now()
-    });
-  }, [onScroll, scrollBridge]);
-  const scrollFocusedInputClearOfKeyboard = React.useCallback(() => {
-    if (!isWeb || !hasFit || !isKeyboardVisible || keyboardOccludedHeight <= 0) {
-      return;
-    }
-    const node = scrollRef.current?.getScrollableNode();
-    const active = document.activeElement;
-    if (!node || !active || !isEditableElement(active) || !node.contains(active)) {
-      return;
-    }
-    const keyboardHeight = Math.max(keyboardOccludedHeight, getWebKeyboardBottomInset());
-    if (keyboardHeight <= 0) return;
-    const activeRect = active.getBoundingClientRect();
-    const nodeRect = node.getBoundingClientRect();
-    const margin = 12;
-    const keyboardTop = getStableLayoutViewportHeight() - keyboardHeight;
-    const visibleTop = nodeRect.top + margin;
-    const visibleBottom = Math.min(nodeRect.bottom, keyboardTop) - margin;
-    let nextScrollTop = node.scrollTop;
-    if (activeRect.bottom > visibleBottom) {
-      nextScrollTop += Math.ceil(activeRect.bottom - visibleBottom);
-    } else if (activeRect.top < visibleTop) {
-      nextScrollTop -= Math.ceil(visibleTop - activeRect.top);
-    }
-    const maxScrollTop = Math.max(0, node.scrollHeight - node.clientHeight);
-    nextScrollTop = Math.max(0, Math.min(maxScrollTop, nextScrollTop));
-    if (nextScrollTop === node.scrollTop) return;
-    node.scrollTop = nextScrollTop;
-    currentScrollOffset.current = nextScrollTop;
-    scrollBridge.y = nextScrollTop;
-    if (nextScrollTop > 0) scrollBridge.scrollStartY = -1;
-  }, [hasFit, isKeyboardVisible, keyboardOccludedHeight, scrollBridge]);
-  const scheduleFocusedInputScroll = React.useCallback(() => {
-    if (!isWeb || !hasFit) return;
-    cancelAnimationFrame(focusedInputScrollFrame.current);
-    focusedInputScrollFrame.current = requestAnimationFrame(() => {
-      scrollFocusedInputClearOfKeyboard();
-      focusedInputScrollFrame.current = requestAnimationFrame(scrollFocusedInputClearOfKeyboard);
-    });
-  }, [hasFit, scrollFocusedInputClearOfKeyboard]);
-  useEffect(() => {
-    if (!isWeb || !hasFit) return;
-    scheduleFocusedInputScroll();
-    window.addEventListener("focusin", scheduleFocusedInputScroll);
-    window.visualViewport?.addEventListener("resize", scheduleFocusedInputScroll);
-    return () => {
-      cancelAnimationFrame(focusedInputScrollFrame.current);
-      window.removeEventListener("focusin", scheduleFocusedInputScroll);
-      window.visualViewport?.removeEventListener("resize", scheduleFocusedInputScroll);
-    };
-  }, [hasFit, scheduleFocusedInputScroll]);
-  useEffect(() => {
-    setHasScrollView(true);
-    if (isGestureHandlerEnabled()) {
-      scrollBridge.setScrollEnabled = setScrollEnabled;
-      scrollBridge.forceScrollTo = forceScrollTo;
-    }
-    return () => {
-      setHasScrollView(false);
-      scrollBridge.setScrollEnabled = void 0;
-      scrollBridge.forceScrollTo = void 0;
-    };
-  }, []);
-  const updateScrollable = () => {
-    if (parentHeight.current && contentHeight.current) {
-      setHasScrollableContent(contentHeight.current > parentHeight.current);
-    }
-  };
-  const recordFitHeight = height => {
-    parentHeight.current = height;
-  };
-  useEffect(() => {
-    scrollBridge.hasScrollableContent = hasScrollableContent;
-  }, [hasScrollableContent]);
-  const gestureProps = useSheetScrollViewGestures({
-    scrollRef,
-    scrollBridge,
-    hasScrollableContent,
-    scrollEnabled,
-    setScrollEnabled,
-    onManualScroll: emitManualScroll
-  });
-  const contentWrapper = /* @__PURE__ */jsxs(View, {
-    onLayout: e => {
-      const height = Math.floor(e.nativeEvent.layout.height);
-      if (height !== contentHeight.current) {
-        contentHeight.current = height;
-        updateScrollable();
-        if (keyboardOccludedHeight > 0) {
-          scheduleFocusedInputScroll();
-        }
-      }
-    },
-    children: [children, keyboardOccludedHeight > 0 && /* @__PURE__ */jsx(View, {
-      "data-sheet-keyboard-scroll-pad": true,
-      height: keyboardOccludedHeight,
-      width: "100%"
-    })]
-  });
-  if (useRNGHScrollView && RNGHScrollView && panGestureRef) {
-    const RNGHComponent = RNGHScrollView;
-    return /* @__PURE__ */jsx(RNGHComponent, {
-      ref: composeRefs(scrollRef, ref),
-      style: fitSizingStyle,
-      scrollEventThrottle: 1,
-      scrollEnabled,
-      simultaneousHandlers: [panGestureRef],
-      onLayout: e => {
-        recordFitHeight(Math.ceil(e.nativeEvent.layout.height));
-        updateScrollable();
-      },
-      onScroll: e => {
-        const {
-          y
-        } = e.nativeEvent.contentOffset;
-        currentScrollOffset.current = y;
-        if (scrollBridge.scrollLockY !== void 0) {
-          if (y !== scrollBridge.scrollLockY) {
-            scrollRef.current?.scrollTo?.({
-              x: 0,
-              y: scrollBridge.scrollLockY,
-              animated: false
-            });
-          }
-          currentScrollOffset.current = scrollBridge.scrollLockY;
-          scrollBridge.y = scrollBridge.scrollLockY;
-          if (lastEmittedScrollOffset.current !== scrollBridge.scrollLockY) {
-            lastEmittedScrollOffset.current = scrollBridge.scrollLockY;
-            onScroll?.({
-              ...e,
-              nativeEvent: {
-                ...e.nativeEvent,
-                contentOffset: {
-                  ...e.nativeEvent.contentOffset,
-                  y: scrollBridge.scrollLockY
-                }
-              }
-            });
-          }
-          return;
-        }
-        scrollBridge.y = y;
-        if (y > 0) scrollBridge.scrollStartY = -1;
-        lastEmittedScrollOffset.current = y;
-        onScroll?.(e);
-      },
-      contentContainerStyle,
-      bounces: false,
-      keyboardShouldPersistTaps: "always",
-      keyboardDismissMode: "none",
-      ...props,
-      ...keyboardFrozenOverride,
-      children: contentWrapper
-    });
-  }
-  return /* @__PURE__ */jsx(ScrollView, {
-    onLayout: e => {
-      recordFitHeight(Math.ceil(e.nativeEvent.layout.height));
-      updateScrollable();
-    },
-    ref: composeRefs(scrollRef, ref),
-    ...fitSizingStyle,
-    scrollEventThrottle: 1,
-    className: "_ovs-contain",
-    scrollEnabled,
-    onScroll: e => {
-      const {
-        y
-      } = e.nativeEvent.contentOffset;
-      currentScrollOffset.current = y;
-      scrollBridge.y = y;
-      if (y > 0) scrollBridge.scrollStartY = -1;
-      lastEmittedScrollOffset.current = y;
-      onScroll?.(e);
-    },
-    contentContainerStyle,
-    ...gestureProps,
-    ...props,
-    ...keyboardFrozenOverride,
-    children: contentWrapper
-  });
+const sheetContentStyle = style({ minHeight: "100%" });
+const SheetScrollView = createStyledHOC(ScrollView, ({ scope, children, onScroll, scrollEnabled: scrollEnabledProp, style: style2, ...props }, ref) => {
+	const context = useSheetContext(scope);
+	const gestureContext = useGestureSheetContext();
+	const { scrollBridge, setHasScrollView, hasFit, screenSize } = context;
+	const keyboardOccludedHeight = Math.max(0, context.keyboardOccludedHeight || 0);
+	const isKeyboardVisible = context.isKeyboardVisible === true || isWeb && getWebKeyboardResizeHeight() >= MIN_KEYBOARD_HEIGHT;
+	const [scrollEnabled] = useControllableState({
+		prop: scrollEnabledProp,
+		defaultProp: true
+	});
+	const scrollRef = React.useRef(null);
+	const [hasScrollableContent, setHasScrollableContent] = useState(true);
+	const parentHeight = useRef(0);
+	const contentHeight = useRef(0);
+	const frozenFrameHeight = Math.max(0, context.keyboardStableFrameHeight || 0);
+	const fitSizingProps = hasFit ? {
+		flex: void 0,
+		height: void 0,
+		maxHeight: screenSize || void 0
+	} : { flex: 1 };
+	const contentContainerStyle = hasFit ? void 0 : sheetContentStyle;
+	const keyboardFrozenOverride = hasFit && isKeyboardVisible && frozenFrameHeight > 0 ? {
+		height: frozenFrameHeight,
+		maxHeight: frozenFrameHeight
+	} : null;
+	const scrollViewStyle = [...Array.isArray(style2) ? style2 : [style2], keyboardFrozenOverride];
+	const panGestureRef = gestureContext?.panGestureRef;
+	const { ScrollView: RNGHScrollView } = getGestureHandlerState();
+	const useRNGHScrollView = isGestureHandlerEnabled() && RNGHScrollView && panGestureRef;
+	const currentScrollOffset = useRef(0);
+	const lastEmittedScrollOffset = useRef(0);
+	const lockedScrollY = useRef(0);
+	const focusedInputScrollFrame = useRef(0);
+	const setScrollEnabled = (next, lockTo) => {
+		if (!next) {
+			const lockY = lockTo ?? scrollBridge.scrollLockY ?? currentScrollOffset.current;
+			if (scrollBridge.enabled === false && scrollBridge.scrollLockY === lockY) {
+				return;
+			}
+			scrollBridge.enabled = false;
+			lockedScrollY.current = lockY;
+			scrollBridge.scrollLockY = lockY;
+			if (currentScrollOffset.current !== lockY) {
+				scrollRef.current?.scrollTo?.({
+					x: 0,
+					y: lockY,
+					animated: false
+				});
+				currentScrollOffset.current = lockY;
+			}
+		} else {
+			if (scrollBridge.enabled === true && scrollBridge.scrollLockY === void 0) {
+				return;
+			}
+			scrollBridge.enabled = true;
+			lockedScrollY.current = currentScrollOffset.current;
+			scrollBridge.scrollLockY = void 0;
+		}
+	};
+	const forceScrollTo = (y) => {
+		scrollRef.current?.scrollTo?.({
+			x: 0,
+			y,
+			animated: false
+		});
+		currentScrollOffset.current = y;
+	};
+	const emitManualScroll = React.useCallback((node, y) => {
+		currentScrollOffset.current = y;
+		scrollBridge.y = y;
+		if (y > 0) scrollBridge.scrollStartY = -1;
+		lastEmittedScrollOffset.current = y;
+		onScroll?.({
+			nativeEvent: {
+				contentOffset: {
+					x: node.scrollLeft,
+					y
+				},
+				contentSize: {
+					height: node.scrollHeight,
+					width: node.scrollWidth
+				},
+				layoutMeasurement: {
+					height: node.offsetHeight,
+					width: node.offsetWidth
+				}
+			},
+			timeStamp: Date.now()
+		});
+	}, [onScroll, scrollBridge]);
+	const scrollFocusedInputClearOfKeyboard = React.useCallback(() => {
+		if (!isWeb || !hasFit || !isKeyboardVisible || keyboardOccludedHeight <= 0) {
+			return;
+		}
+		const node = scrollRef.current?.getScrollableNode();
+		const active = document.activeElement;
+		if (!node || !active || !isEditableElement(active) || !node.contains(active)) {
+			return;
+		}
+		const keyboardHeight = Math.max(keyboardOccludedHeight, getWebKeyboardBottomInset());
+		if (keyboardHeight <= 0) return;
+		const activeRect = active.getBoundingClientRect();
+		const nodeRect = node.getBoundingClientRect();
+		const margin = 12;
+		const keyboardTop = getStableLayoutViewportHeight() - keyboardHeight;
+		const visibleTop = nodeRect.top + margin;
+		const visibleBottom = Math.min(nodeRect.bottom, keyboardTop) - margin;
+		let nextScrollTop = node.scrollTop;
+		if (activeRect.bottom > visibleBottom) {
+			nextScrollTop += Math.ceil(activeRect.bottom - visibleBottom);
+		} else if (activeRect.top < visibleTop) {
+			nextScrollTop -= Math.ceil(visibleTop - activeRect.top);
+		}
+		const maxScrollTop = Math.max(0, node.scrollHeight - node.clientHeight);
+		nextScrollTop = Math.max(0, Math.min(maxScrollTop, nextScrollTop));
+		if (nextScrollTop === node.scrollTop) return;
+		node.scrollTop = nextScrollTop;
+		currentScrollOffset.current = nextScrollTop;
+		scrollBridge.y = nextScrollTop;
+		if (nextScrollTop > 0) scrollBridge.scrollStartY = -1;
+	}, [
+		hasFit,
+		isKeyboardVisible,
+		keyboardOccludedHeight,
+		scrollBridge
+	]);
+	const scheduleFocusedInputScroll = React.useCallback(() => {
+		if (!isWeb || !hasFit) return;
+		cancelAnimationFrame(focusedInputScrollFrame.current);
+		focusedInputScrollFrame.current = requestAnimationFrame(() => {
+			scrollFocusedInputClearOfKeyboard();
+			focusedInputScrollFrame.current = requestAnimationFrame(scrollFocusedInputClearOfKeyboard);
+		});
+	}, [hasFit, scrollFocusedInputClearOfKeyboard]);
+	useEffect(() => {
+		if (!isWeb || !hasFit) return;
+		scheduleFocusedInputScroll();
+		window.addEventListener("focusin", scheduleFocusedInputScroll);
+		window.visualViewport?.addEventListener("resize", scheduleFocusedInputScroll);
+		return () => {
+			cancelAnimationFrame(focusedInputScrollFrame.current);
+			window.removeEventListener("focusin", scheduleFocusedInputScroll);
+			window.visualViewport?.removeEventListener("resize", scheduleFocusedInputScroll);
+		};
+	}, [hasFit, scheduleFocusedInputScroll]);
+	useEffect(() => {
+		setHasScrollView(true);
+		if (isGestureHandlerEnabled()) {
+			scrollBridge.setScrollEnabled = setScrollEnabled;
+			scrollBridge.forceScrollTo = forceScrollTo;
+		}
+		return () => {
+			setHasScrollView(false);
+			scrollBridge.setScrollEnabled = void 0;
+			scrollBridge.forceScrollTo = void 0;
+		};
+	}, []);
+	const updateScrollable = () => {
+		if (parentHeight.current && contentHeight.current) {
+			setHasScrollableContent(contentHeight.current > parentHeight.current);
+		}
+	};
+	const recordFitHeight = (height) => {
+		parentHeight.current = height;
+	};
+	useEffect(() => {
+		scrollBridge.hasScrollableContent = hasScrollableContent;
+	}, [hasScrollableContent]);
+	const gestureProps = useSheetScrollViewGestures({
+		scrollRef,
+		scrollBridge,
+		hasScrollableContent,
+		scrollEnabled,
+		setScrollEnabled,
+		onManualScroll: emitManualScroll
+	});
+	const contentWrapper = /* @__PURE__ */ jsxs(View, {
+		onLayout: (e) => {
+			const height = Math.floor(e.nativeEvent.layout.height);
+			if (height !== contentHeight.current) {
+				contentHeight.current = height;
+				updateScrollable();
+				if (keyboardOccludedHeight > 0) {
+					scheduleFocusedInputScroll();
+				}
+			}
+		},
+		children: [children, keyboardOccludedHeight > 0 && /* @__PURE__ */ jsx(View, {
+			"data-sheet-keyboard-scroll-pad": true,
+			height: keyboardOccludedHeight,
+			width: "100%"
+		})]
+	});
+	if (useRNGHScrollView && RNGHScrollView && panGestureRef) {
+		const RNGHComponent = RNGHScrollView;
+		return /* @__PURE__ */ jsx(RNGHComponent, {
+			ref: composeRefs(scrollRef, ref),
+			style: [fitSizingProps, ...scrollViewStyle],
+			scrollEventThrottle: 1,
+			scrollEnabled,
+			simultaneousHandlers: [panGestureRef],
+			onLayout: (e) => {
+				recordFitHeight(Math.ceil(e.nativeEvent.layout.height));
+				updateScrollable();
+			},
+			onScroll: (e) => {
+				const { y } = e.nativeEvent.contentOffset;
+				currentScrollOffset.current = y;
+				if (scrollBridge.scrollLockY !== void 0) {
+					if (y !== scrollBridge.scrollLockY) {
+						scrollRef.current?.scrollTo?.({
+							x: 0,
+							y: scrollBridge.scrollLockY,
+							animated: false
+						});
+					}
+					currentScrollOffset.current = scrollBridge.scrollLockY;
+					scrollBridge.y = scrollBridge.scrollLockY;
+					if (lastEmittedScrollOffset.current !== scrollBridge.scrollLockY) {
+						lastEmittedScrollOffset.current = scrollBridge.scrollLockY;
+						onScroll?.({
+							...e,
+							nativeEvent: {
+								...e.nativeEvent,
+								contentOffset: {
+									...e.nativeEvent.contentOffset,
+									y: scrollBridge.scrollLockY
+								}
+							}
+						});
+					}
+					return;
+				}
+				scrollBridge.y = y;
+				if (y > 0) scrollBridge.scrollStartY = -1;
+				lastEmittedScrollOffset.current = y;
+				onScroll?.(e);
+			},
+			contentContainerStyle,
+			bounces: false,
+			keyboardShouldPersistTaps: "always",
+			keyboardDismissMode: "none",
+			...props,
+			children: contentWrapper
+		});
+	}
+	return /* @__PURE__ */ jsx(ScrollView, {
+		...fitSizingProps,
+		onLayout: (e) => {
+			recordFitHeight(Math.ceil(e.nativeEvent.layout.height));
+			updateScrollable();
+		},
+		ref: composeRefs(scrollRef, ref),
+		scrollEventThrottle: 1,
+		className: "_ovs-contain",
+		scrollEnabled,
+		onScroll: (e) => {
+			const { y } = e.nativeEvent.contentOffset;
+			currentScrollOffset.current = y;
+			scrollBridge.y = y;
+			if (y > 0) scrollBridge.scrollStartY = -1;
+			lastEmittedScrollOffset.current = y;
+			onScroll?.(e);
+		},
+		contentContainerStyle,
+		...gestureProps,
+		...props,
+		style: scrollViewStyle,
+		children: contentWrapper
+	});
+}, {
+	disableTheme: true,
+	displayName: SHEET_SCROLL_VIEW_NAME
 });
+
 export { SheetScrollView };
 //# sourceMappingURL=SheetScrollView.mjs.map