@hanzogui/sheet 7.3.1 → 8.0.1

package/.turbo/turbo-build.log

@@ -0,0 +1,2 @@
+$ hanzogui-build
+built @hanzogui/sheet in 1725 ms

package/controller/index.cjs

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

package/controller/index.d.ts

@@ -0,0 +1,5 @@
+// Type declarations for @hanzogui/sheet/controller path resolution
+// Runtime uses exports field -> dist/esm/controller.mjs
+
+export { SheetController } from '../src/SheetController'
+export { SheetControllerContext, useSheetController, type SheetControllerContextValue } from '../src/useSheetController'

package/controller/index.js

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

package/controller/index.native.cjs

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

package/controller/index.native.js

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

package/dist/cjs/GestureDetectorWrapper.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","GestureDetectorWrapper_exports","__export","GestureDetectorWrapper","module","exports","import_jsx_runtime","require","import_react_native","import_gestureState","param","gesture","children","style","GestureDetector","getGestureHandlerState","enabled","isGestureHandlerEnabled","jsx","View","collapsable"],"sources":["../../src/GestureDetectorWrapper.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,8BAAA;AAAAC,QAAA,CAAAD,8BAAA;EAAAE,sBAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAT,YAAqC,CAAAK,8BAAA;AACrC,IAAAK,kBAAA,GAAAC,OAAgE;AA6BxD,IAAAC,mBAAA,GAAAD,OAAA;AAjBD,IAAAE,mBAAS,GAAAF,OAAuB;AAAA,SACrCJ,uBAAAO,KAAA;EACA;IAAAC,OAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAH,KAAA;EACA;IAAAI;EAAA,QAAAL,mBAAA,CAAAM,sBAAA;EACF,IAAgCC,OAAA,OAAAP,mBAAA,CAAAQ,uBAAA;EAC9B,IAAAD,OAAQ,IAAAF,eAAgB,IAAIH,OAAA;IAC5B,OAAM,eAAU,IAAAL,kBAAA,CAAAY,GAAA,EAAAJ,eAAwB;MAKpCH,OAAA;MAIFC,QACE,qBAAAN,kBAAA,CAACY,GAAA,EAAAV,mBAAgB,CAAAW,IACf;QAKNN,KAAA;QAGAO,WAAO;QACTR","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","GestureDetectorWrapper_exports","__export","GestureDetectorWrapper","module","exports","import_jsx_runtime","require","import_react_native","import_gestureState","param","gesture","children","style","GestureDetector","getGestureHandlerState","enabled","isGestureHandlerEnabled","jsx","View","collapsable"],"sources":["../../src/GestureDetectorWrapper.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,8BAAA;AAAAC,QAAA,CAAAD,8BAAA;EAAAE,sBAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAT,YAAqC,CAAAK,8BAAA;AACrC,IAAAK,kBAAA,GAAAC,OAAgE;AA0BxD,IAAAC,mBAAA,GAAAD,OAAA;AAdD,IAAAE,mBAAS,GAAAF,OAAuB;AAAA,SACrCJ,uBAAAO,KAAA;EACA;IAAAC,OAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAH,KAAA;EACA;IAAAI;EAAA,QAAAL,mBAAA,CAAAM,sBAAA;EACF,IAAgCC,OAAA,OAAAP,mBAAA,CAAAQ,uBAAA;EAC9B,IAAAD,OAAQ,IAAAF,eAAgB,IAAIH,OAAA;IAC5B,OAAM,eAAU,IAAAL,kBAAA,CAAAY,GAAA,EAAAJ,eAAwB;MAGpCH,OAAA;MAGFC,QACE,qBAAAN,kBAAA,CAACY,GAAA,EAAAV,mBAAgB,CAAAW,IACf;QAKNN,KAAA;QAGAO,WAAO;QACTR","ignoreList":[]}

package/dist/cjs/SheetImplementationCustom.cjs

@@ -41,31 +41,41 @@ var import_animate_presence = require("@hanzogui/animate-presence");
 var import_compose_refs = require("@hanzogui/compose-refs");
 var import_constants = require("@hanzogui/constants");
 var import_core = require("@hanzogui/core");
-var import_native = require("@hanzogui/native");
 var import_portal = require("@hanzogui/portal");
 var import_react = __toESM(require("react"), 1);
 var import_react_native = require("react-native-web");
 var import_contexts = require("./contexts.cjs");
 var import_GestureDetectorWrapper = require("./GestureDetectorWrapper.cjs");
+var import_gestureState = require("./gestureState.cjs");
 var import_GestureSheetContext = require("./GestureSheetContext.cjs");
 var import_helpers = require("./helpers.cjs");
+var import_keyboardAvoidance = require("./keyboardAvoidance.cjs");
+var import_webViewport = require("./webViewport.cjs");
 var import_SheetContext = require("./SheetContext.cjs");
 var import_useGestureHandlerPan = require("./useGestureHandlerPan.cjs");
 var import_useKeyboardControllerSheet = require("./useKeyboardControllerSheet.cjs");
+var import_useSafeAreaInsets = require("./useSafeAreaInsets.cjs");
 var import_useSheetOpenState = require("./useSheetOpenState.cjs");
 var import_useSheetProviderProps = require("./useSheetProviderProps.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const hiddenSize = 10000.1;
-let _cachedSafeAreaTop;
-function getSafeAreaTopInset() {
-  if (_cachedSafeAreaTop !== void 0) return _cachedSafeAreaTop;
-  _cachedSafeAreaTop = (0, import_native.getSafeArea)().getInsets().top;
-  return _cachedSafeAreaTop;
-}
+const rnghRootStyleOpen = {
+  width: "100%",
+  height: "100%"
+};
+const rnghRootStyleClosed = {
+  width: "100%",
+  height: 0
+};
 let sheetHiddenStyleSheet = null;
 const relativeDimensionTo = import_constants.isWeb ? "window" : "screen";
+function getStableViewportHeight() {
+  if (import_constants.isWeb && typeof window !== "undefined") return (0, import_webViewport.getStableLayoutViewportHeight)();
+  return import_react_native.Dimensions.get(relativeDimensionTo).height;
+}
 const SheetImplementationCustom = import_react.default.forwardRef(function SheetImplementationCustom2(props, forwardedRef) {
   const parentSheet = import_react.default.useContext(import_contexts.ParentSheetContext);
+  const safeAreaTopInset = (0, import_useSafeAreaInsets.useSafeAreaInsets)()?.top ?? 0;
   const {
     transition,
     transitionConfig: transitionConfigProp,
@@ -73,6 +83,7 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
     zIndex = parentSheet.zIndex + 1,
     moveOnKeyboardChange = false,
     unmountChildrenWhenHidden = false,
+    disableTransparencyHide = false,
     portalProps,
     containerComponent: ContainerComponent = import_react.default.Fragment,
     onAnimationComplete
@@ -85,6 +96,7 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
   const {
     frameSize,
     setFrameSize,
+    dismissOnSnapToBottom,
     snapPoints,
     snapPointsMode,
     hasFit,
@@ -123,12 +135,6 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
   const onInnerSheet = import_react.default.useCallback(hasChild => {
     setIsShowingInnerSheet(hasChild);
   }, []);
-  const stableFrameSize = import_react.default.useRef(frameSize);
-  import_react.default.useEffect(() => {
-    if (open && frameSize) stableFrameSize.current = frameSize;
-  }, [open, frameSize]);
-  const effectiveFrameSize = open ? frameSize : stableFrameSize.current || frameSize;
-  const positions = import_react.default.useMemo(() => snapPoints.map(point => getYPositions(snapPointsMode, point, screenSize, effectiveFrameSize)), [screenSize, effectiveFrameSize, snapPoints, snapPointsMode]);
   const {
     keyboardHeight,
     isKeyboardVisible,
@@ -136,8 +142,21 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
     pauseKeyboardHandler,
     flushPendingHide
   } = (0, import_useKeyboardControllerSheet.useKeyboardControllerSheet)({
-    enabled: !import_constants.isWeb && Boolean(moveOnKeyboardChange)
+    enabled: Boolean(moveOnKeyboardChange)
   });
+  const stableFrameSize = import_react.default.useRef(frameSize);
+  import_react.default.useEffect(() => {
+    if (open && frameSize) stableFrameSize.current = frameSize;
+  }, [open, frameSize]);
+  const isWebKbSheet = import_constants.isWeb && hasFit && moveOnKeyboardChange;
+  const isNativeKbFitSheet = !import_constants.isWeb && hasFit && Boolean(moveOnKeyboardChange);
+  const preKeyboardFrameSize = import_react.default.useRef(0);
+  import_react.default.useEffect(() => {
+    if (isNativeKbFitSheet && open && !isKeyboardVisible && frameSize > 0) preKeyboardFrameSize.current = frameSize;
+  }, [isNativeKbFitSheet, open, isKeyboardVisible, frameSize]);
+  const effScreenSize = isWebKbSheet ? getStableViewportHeight() : screenSize;
+  const effectiveFrameSize = open ? frameSize : stableFrameSize.current || frameSize;
+  const positions = import_react.default.useMemo(() => snapPoints.map(point => getYPositions(snapPointsMode, point, effScreenSize, effectiveFrameSize)), [effScreenSize, effectiveFrameSize, snapPoints, snapPointsMode]);
   const [isDragging, setIsDragging_] = import_react.default.useState(false);
   const isDraggingRef = import_react.default.useRef(false);
   const setIsDragging = import_react.default.useCallback(val => {
@@ -150,20 +169,28 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
   const activePositions = import_react.default.useMemo(() => {
     if (isDragging || isDraggingRef.current) return activePositionsRef.current;
     let result;
-    if (!isKeyboardVisible || keyboardHeight <= 0) result = positions;else {
-      const safeAreaTop = import_constants.isWeb ? 0 : getSafeAreaTopInset();
-      result = positions.map(p => {
-        if (screenSize && p >= screenSize) return p;
-        return Math.max(safeAreaTop, p - keyboardHeight);
-      });
-    }
+    if (!isKeyboardVisible || keyboardHeight <= 0) result = positions;else result = positions.map(p => (0, import_keyboardAvoidance.getKeyboardAdjustedSheetY)({
+      sheetY: p,
+      screenSize: effScreenSize,
+      isKeyboardVisible,
+      keyboardHeight,
+      shouldTranslate: true,
+      safeAreaTop: import_constants.isWeb ? (0, import_webViewport.getWebVisualViewportOffsetTop)() : safeAreaTopInset
+    }));
     activePositionsRef.current = result;
     return result;
-  }, [positions, isKeyboardVisible, keyboardHeight, screenSize, isDragging]);
+  }, [positions, isKeyboardVisible, keyboardHeight, effScreenSize, isDragging, safeAreaTopInset]);
+  const keyboardOccludedHeight = (0, import_keyboardAvoidance.getKeyboardOccludedHeight)({
+    frameSize: effectiveFrameSize,
+    isKeyboardVisible,
+    keyboardHeight,
+    screenSize: effScreenSize,
+    sheetY: position >= 0 ? activePositions[position] : void 0
+  });
+  const keyboardStableFrameHeight = isWebKbSheet && isKeyboardVisible && frameSize > 0 ? frameSize : isNativeKbFitSheet && isKeyboardVisible && preKeyboardFrameSize.current > 0 ? preKeyboardFrameSize.current : 0;
   const {
     useAnimatedNumber,
-    useAnimatedNumberStyle,
-    useAnimatedNumberReaction
+    useAnimatedNumberStyle
   } = animationDriver;
   const AnimatedView = animationDriver.View ?? import_core.View;
   (0, import_constants.useIsomorphicLayoutEffect)(() => {
@@ -185,30 +212,46 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
   if (controller?.skipNextAnimation) skipAdaptAnimation.current = true;
   const hasScrollView = import_react.default.useRef(false);
   const opacityFallbackTimer = import_react.default.useRef(null);
-  useAnimatedNumberReaction({
-    value: animatedNumber,
-    hostRef: sheetRef
-  }, import_react.default.useCallback(value => {
+  const syncAnimatedPosition = (0, import_core.useEvent)(value => {
     at.current = value;
     scrollBridge.paneY = value;
     const minY = activePositions[0];
     const wasAtTop = scrollBridge.isAtTop;
     const nowAtTop = value <= minY + 5;
-    if (wasAtTop !== nowAtTop) {
-      scrollBridge.isAtTop = nowAtTop;
-      if (nowAtTop) {
+    if (wasAtTop === nowAtTop) return;
+    scrollBridge.isAtTop = nowAtTop;
+    if (nowAtTop) {
+      if (scrollBridge.lockScrollAtTop) {
         if (scrollBridge.y > 0) {
           scrollBridge.forceScrollTo?.(0);
           scrollBridge.y = 0;
         }
-        scrollBridge.scrollLockY = void 0;
-        scrollBridge.setScrollEnabled?.(true);
-      } else {
         scrollBridge.scrollLockY = 0;
-        scrollBridge.setScrollEnabled?.(false);
+        scrollBridge.setScrollEnabled?.(false, 0);
+        return;
       }
+      if (scrollBridge.y > 0) {
+        scrollBridge.forceScrollTo?.(0);
+        scrollBridge.y = 0;
+      }
+      scrollBridge.scrollLockY = void 0;
+      scrollBridge.setScrollEnabled?.(true);
+    } else {
+      scrollBridge.scrollLockY = 0;
+      scrollBridge.setScrollEnabled?.(false);
     }
-  }, [animationDriver, activePositions]));
+  });
+  const setAnimatedPositionDirect = (0, import_core.useEvent)(value => {
+    syncAnimatedPosition(value);
+    animatedNumber.setValue(value, {
+      type: "direct"
+    });
+  });
+  const getAnimatedPosition = (0, import_core.useEvent)(() => {
+    const value = animatedNumber.getValue();
+    syncAnimatedPosition(value);
+    return value;
+  });
   function stopSpring() {
     animatedNumber.stop();
     if (scrollBridge.onFinishAnimate) {
@@ -218,7 +261,8 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
   }
   const animateTo = (0, import_core.useEvent)((position2, animationOverride) => {
     if (frameSize === 0) return;
-    let toValue = isHidden || position2 === -1 ? screenSize : activePositions[position2];
+    const closeTarget = import_constants.isWeb ? Math.max(effScreenSize, (0, import_webViewport.getMaxViewportHeight)()) : effScreenSize;
+    let toValue = isHidden || position2 === -1 ? closeTarget : activePositions[position2];
     if (at.current === toValue) return;
     at.current = toValue;
     stopSpring();
@@ -228,6 +272,7 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
       opacityFallbackTimer.current = null;
     }
     const animationCompleteCallback = () => {
+      syncAnimatedPosition(toValue);
       if (opacityFallbackTimer.current) {
         clearTimeout(opacityFallbackTimer.current);
         opacityFallbackTimer.current = null;
@@ -264,6 +309,7 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
         type: "timing",
         duration: 0
       }, () => {
+        syncAnimatedPosition(screenSize);
         setTimeout(() => {
           setDisableAnimation(false);
         }, 10);
@@ -271,6 +317,7 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
       return;
     }
     if (disableAnimation) return;
+    if (isDraggingRef.current) return;
     if (!frameSize || !screenSize || isHidden || hasntMeasured && !open) return;
     animateTo(position);
     if (position === -1) {
@@ -296,7 +343,7 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
     if (disableDrag) return;
     if (!frameSize) return;
     if (isShowingInnerSheet) return;
-    const minY = positions[0];
+    const minY = activePositions[0];
     scrollBridge.paneMinY = minY;
     let startY = at.current;
     function setPanning(val) {
@@ -315,17 +362,18 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
       isExternalDrag = false;
       previouslyScrolling = false;
       setPanning(false);
-      const end = at.current + frameSize * vy * .2;
-      let closestPoint = 0;
-      let dist = Number.POSITIVE_INFINITY;
-      for (let i = 0; i < positions.length; i++) {
-        const position2 = positions[i];
-        const curDist = end > position2 ? end - position2 : position2 - end;
-        if (curDist < dist) {
-          dist = curDist;
-          closestPoint = i;
-        }
-      }
+      const currentPos = at.current;
+      const end = currentPos + frameSize * vy * .2;
+      const closestPoint = (0, import_keyboardAvoidance.getSheetReleasePosition)({
+        positions: activePositions,
+        projectedEnd: end,
+        currentPosition: currentPos,
+        frameSize,
+        dismissOnSnapToBottom,
+        snapPointsMode,
+        isKeyboardVisible,
+        isWeb: import_constants.isWeb
+      });
       setPosition(closestPoint);
       animateTo(closestPoint);
     };
@@ -341,6 +389,7 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
     }) => {
       function getShouldSet() {
         if (e.target === providerProps.handleRef.current) return true;
+        if (scrollBridge.scrollNodeTouched) return false;
         if (scrollBridge.hasScrollableContent === true) {
           if (scrollBridge.scrollLock) return false;
           const isScrolled = scrollBridge.y !== 0;
@@ -360,18 +409,20 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
     const grant = () => {
       setPanning(true);
       stopSpring();
-      startY = at.current;
+      startY = getAnimatedPosition();
     };
     let isExternalDrag = false;
+    scrollBridge.startPanDrag = () => {
+      isExternalDrag = true;
+      grant();
+    };
     scrollBridge.drag = dy => {
       if (!isExternalDrag) {
         isExternalDrag = true;
         grant();
       }
       const to = dy + startY;
-      animatedNumber.setValue((0, import_helpers.resisted)(to, minY), {
-        type: "direct"
-      });
+      setAnimatedPositionDirect((0, import_helpers.resisted)(to, minY));
     };
     scrollBridge.release = release;
     scrollBridge.snapToPosition = positionIndex => {
@@ -382,6 +433,7 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
     };
     return import_react_native.PanResponder.create({
       onMoveShouldSetPanResponder: onMoveShouldSet,
+      onPanResponderTerminationRequest: () => false,
       onPanResponderGrant: grant,
       onPanResponderMove: (_e, {
         dy
@@ -389,15 +441,13 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
         const toFull = dy + startY;
         const to = (0, import_helpers.resisted)(toFull, minY);
         if (to <= minY) scrollBridge.setParentDragging(false);else scrollBridge.setParentDragging(true);
-        animatedNumber.setValue(to, {
-          type: "direct"
-        });
+        setAnimatedPositionDirect(to);
       },
       onPanResponderEnd: finish,
       onPanResponderTerminate: finish,
       onPanResponderRelease: finish
     });
-  }, [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]);
+  }, [disableDrag, isShowingInnerSheet, animateTo, frameSize, activePositions, setPosition, dismissOnSnapToBottom, snapPointsMode]);
   import_react.default.useEffect(() => {
     if (isDragging || isHidden || !open || disableAnimation) return;
     if (!frameSize || !screenSize) return;
@@ -418,7 +468,11 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
     animateTo(position);
   }, [isDragging]);
   import_react.default.useEffect(() => {
-    if (!open && isKeyboardVisible) dismissKeyboard();
+    if (!open && isKeyboardVisible) {
+      dismissKeyboard();
+      pauseKeyboardHandler.current = false;
+      flushPendingHide();
+    }
   }, [open]);
   const {
     panGesture,
@@ -432,30 +486,31 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
     stopSpring,
     scrollBridge,
     setIsDragging,
-    getCurrentPosition: () => at.current,
+    getCurrentPosition: getAnimatedPosition,
     resisted: import_helpers.resisted,
     disableDrag,
     isShowingInnerSheet,
-    setAnimatedPosition: val => {
-      at.current = val;
-      animatedNumber.setValue(val, {
-        type: "direct"
-      });
-    },
+    setAnimatedPosition: setAnimatedPositionDirect,
+    dismissOnSnapToBottom,
+    snapPointsMode,
+    isKeyboardVisible,
     pauseKeyboardHandler
   });
+  const ignoreLayoutForKeyboard = (0, import_core.useEvent)(() => import_constants.isWeb && moveOnKeyboardChange && (0, import_webViewport.getWebKeyboardResizeHeight)() >= import_webViewport.MIN_KEYBOARD_HEIGHT);
   const handleAnimationViewLayout = (0, import_core.useEvent)(e => {
     if (!open && stableFrameSize.current !== 0) return;
     const layoutHeight = e.nativeEvent?.layout.height;
-    const next = modal ? Math.min(layoutHeight, import_react_native.Dimensions.get(relativeDimensionTo).height) : layoutHeight;
+    if (ignoreLayoutForKeyboard() && frameSize > 0) return;
+    const next = modal ? Math.min(layoutHeight, getStableViewportHeight()) : layoutHeight;
     if (!next) return;
-    setFrameSize(next);
+    setFrameSize(Math.round(next));
   });
   const handleMaxContentViewLayout = import_react.default.useCallback(e => {
-    const next = Math.min(e.nativeEvent?.layout.height, import_react_native.Dimensions.get(relativeDimensionTo).height);
+    if (ignoreLayoutForKeyboard() && screenSize > 0) return;
+    const next = Math.min(e.nativeEvent?.layout.height, getStableViewportHeight());
     if (!next) return;
-    setMaxContentSize(next);
-  }, []);
+    setMaxContentSize(Math.round(next));
+  }, [ignoreLayoutForKeyboard, screenSize]);
   const animatedStyle = useAnimatedNumberStyle(animatedNumber, import_react.default.useCallback(val => {
     "worklet";
 
@@ -483,6 +538,9 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
       value: nextParentContext,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SheetContext.SheetProvider, {
         ...providerProps,
+        keyboardOccludedHeight,
+        isKeyboardVisible,
+        keyboardStableFrameHeight,
         setHasScrollView,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_GestureSheetContext.GestureSheetProvider, {
           isDragging,
@@ -517,7 +575,7 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
               width: "100%",
               height: forcedContentHeight,
               minHeight: forcedContentHeight,
-              opacity: !shouldHideParentSheet ? opacity : 0,
+              opacity: shouldHideParentSheet ? 0 : disableTransparencyHide ? 1 : opacity,
               ...((shouldHideParentSheet || !open) && {
                 pointerEvents: "none"
               })
@@ -544,12 +602,17 @@ const SheetImplementationCustom = import_react.default.forwardRef(function Sheet
   });
   const shouldMountChildren = unmountChildrenWhenHidden ? !!opacity : true;
   if (modal) {
+    const RNGHRoot = (0, import_gestureState.getGestureHandlerState)().RootView;
+    const mountedContents = shouldMountChildren ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContainerComponent, {
+      children: contents
+    }) : null;
     const modalContents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
       stackZIndex: zIndex,
       ...portalProps,
-      children: shouldMountChildren && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContainerComponent, {
-        children: contents
-      })
+      children: mountedContents && RNGHRoot ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(RNGHRoot, {
+        style: open ? rnghRootStyleOpen : rnghRootStyleClosed,
+        children: mountedContents
+      }) : mountedContents
     });
     if (import_constants.isWeb) return modalContents;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_contexts.SheetInsideSheetContext.Provider, {