@hanzogui/sheet 7.3.0 → 8.0.0

package/dist/esm/SheetImplementationCustom.native.js

@@ -1,32 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ProvideAdaptContext, useAdaptContext } from "@hanzogui/adapt";
 import { AnimatePresence } from "@hanzogui/animate-presence";
 import { useComposedRefs } from "@hanzogui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@hanzogui/constants";
-import { LayoutMeasurementController, View as GuiView, useConfiguration, useDidFinishSSR, useEvent, useThemeName } from "@hanzogui/core";
-import { getSafeArea } from "@hanzogui/native";
-import { needsPortalRepropagation, Portal } from "@hanzogui/portal";
+import { LayoutMeasurementController, View, useConfiguration, useDidFinishSSR, useEvent, useThemeName } from "@hanzogui/core";
+import { Portal, needsPortalRepropagation } from "@hanzogui/portal";
 import React, { useState } from "react";
-import { Dimensions, PanResponder, View } from "react-native";
+import { Dimensions, PanResponder, View as View$1 } from "react-native";
 import { ParentSheetContext, SheetInsideSheetContext } from "./contexts.native.js";
 import { GestureDetectorWrapper } from "./GestureDetectorWrapper.native.js";
+import { getGestureHandlerState } from "./gestureState.native.js";
 import { GestureSheetProvider } from "./GestureSheetContext.native.js";
 import { resisted } from "./helpers.native.js";
+import { getKeyboardAdjustedSheetY, getKeyboardOccludedHeight, getSheetReleasePosition } from "./keyboardAvoidance.native.js";
+import { MIN_KEYBOARD_HEIGHT, getMaxViewportHeight, getStableLayoutViewportHeight, getWebKeyboardResizeHeight, getWebVisualViewportOffsetTop } from "./webViewport.native.js";
 import { SheetProvider } from "./SheetContext.native.js";
 import { useGestureHandlerPan } from "./useGestureHandlerPan.native.js";
 import { useKeyboardControllerSheet } from "./useKeyboardControllerSheet.native.js";
+import { SafeAreaInsetsContext, useSafeAreaInsets } from "./useSafeAreaInsets.native.js";
 import { useSheetOpenState } from "./useSheetOpenState.native.js";
 import { useSheetProviderProps } from "./useSheetProviderProps.native.js";
 var hiddenSize = 10000.1;
-var _cachedSafeAreaTop;
-function getSafeAreaTopInset() {
-  if (_cachedSafeAreaTop !== void 0) return _cachedSafeAreaTop;
-  _cachedSafeAreaTop = getSafeArea().getInsets().top;
-  return _cachedSafeAreaTop;
-}
+var rnghRootStyleOpen = {
+  width: "100%",
+  height: "100%"
+};
+var rnghRootStyleClosed = {
+  width: "100%",
+  height: 0
+};
 var relativeDimensionTo = isWeb ? "window" : "screen";
+function getStableViewportHeight() {
+  if (isWeb && typeof window !== "undefined") return getStableLayoutViewportHeight();
+  return Dimensions.get(relativeDimensionTo).height;
+}
 var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetImplementationCustom2(props, forwardedRef) {
   var parentSheet = React.useContext(ParentSheetContext);
+  var safeAreaInsets = useSafeAreaInsets();
+  var _safeAreaInsets_top;
+  var safeAreaTopInset = (_safeAreaInsets_top = safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top) !== null && _safeAreaInsets_top !== void 0 ? _safeAreaInsets_top : 0;
   var {
     transition,
     transitionConfig: transitionConfigProp,
@@ -34,6 +46,7 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
     zIndex = parentSheet.zIndex + 1,
     moveOnKeyboardChange = false,
     unmountChildrenWhenHidden = false,
+    disableTransparencyHide = false,
     portalProps,
     containerComponent: ContainerComponent = React.Fragment,
     onAnimationComplete
@@ -46,6 +59,7 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
   var {
     frameSize,
     setFrameSize,
+    dismissOnSnapToBottom,
     snapPoints,
     snapPointsMode,
     hasFit,
@@ -63,8 +77,7 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
   } = state;
   var openRef = React.useRef(open);
   openRef.current = open;
-  var sheetRef = React.useRef(void 0);
-  var ref = useComposedRefs(forwardedRef, sheetRef, providerProps.contentRef);
+  var ref = useComposedRefs(forwardedRef, React.useRef(void 0), providerProps.contentRef);
   var {
     animationDriver
   } = useConfiguration();
@@ -85,16 +98,6 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
   var onInnerSheet = React.useCallback(function (hasChild) {
     setIsShowingInnerSheet(hasChild);
   }, []);
-  var stableFrameSize = React.useRef(frameSize);
-  React.useEffect(function () {
-    if (open && frameSize) stableFrameSize.current = frameSize;
-  }, [open, frameSize]);
-  var effectiveFrameSize = open ? frameSize : stableFrameSize.current || frameSize;
-  var positions = React.useMemo(function () {
-    return snapPoints.map(function (point) {
-      return getYPositions(snapPointsMode, point, screenSize, effectiveFrameSize);
-    });
-  }, [screenSize, effectiveFrameSize, snapPoints, snapPointsMode]);
   var {
     keyboardHeight,
     isKeyboardVisible,
@@ -102,8 +105,25 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
     pauseKeyboardHandler,
     flushPendingHide
   } = useKeyboardControllerSheet({
-    enabled: !isWeb && Boolean(moveOnKeyboardChange)
+    enabled: Boolean(moveOnKeyboardChange)
   });
+  var stableFrameSize = React.useRef(frameSize);
+  React.useEffect(function () {
+    if (open && frameSize) stableFrameSize.current = frameSize;
+  }, [open, frameSize]);
+  var isWebKbSheet = isWeb && hasFit && moveOnKeyboardChange;
+  var isNativeKbFitSheet = !isWeb && hasFit && Boolean(moveOnKeyboardChange);
+  var preKeyboardFrameSize = React.useRef(0);
+  React.useEffect(function () {
+    if (isNativeKbFitSheet && open && !isKeyboardVisible && frameSize > 0) preKeyboardFrameSize.current = frameSize;
+  }, [isNativeKbFitSheet, open, isKeyboardVisible, frameSize]);
+  var effScreenSize = isWebKbSheet ? getStableViewportHeight() : screenSize;
+  var effectiveFrameSize = open ? frameSize : stableFrameSize.current || frameSize;
+  var positions = React.useMemo(function () {
+    return snapPoints.map(function (point) {
+      return getYPositions(snapPointsMode, point, effScreenSize, effectiveFrameSize);
+    });
+  }, [effScreenSize, effectiveFrameSize, snapPoints, snapPointsMode]);
   var [isDragging, setIsDragging_] = React.useState(false);
   var isDraggingRef = React.useRef(false);
   var setIsDragging = React.useCallback(function (val) {
@@ -116,23 +136,33 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
   var activePositions = React.useMemo(function () {
     if (isDragging || isDraggingRef.current) return activePositionsRef.current;
     var result;
-    if (!isKeyboardVisible || keyboardHeight <= 0) result = positions;else {
-      var safeAreaTop = isWeb ? 0 : getSafeAreaTopInset();
-      result = positions.map(function (p) {
-        if (screenSize && p >= screenSize) return p;
-        return Math.max(safeAreaTop, p - keyboardHeight);
+    if (!isKeyboardVisible || keyboardHeight <= 0) result = positions;else result = positions.map(function (p) {
+      return getKeyboardAdjustedSheetY({
+        sheetY: p,
+        screenSize: effScreenSize,
+        isKeyboardVisible,
+        keyboardHeight,
+        shouldTranslate: true,
+        safeAreaTop: isWeb ? getWebVisualViewportOffsetTop() : safeAreaTopInset
       });
-    }
+    });
     activePositionsRef.current = result;
     return result;
-  }, [positions, isKeyboardVisible, keyboardHeight, screenSize, isDragging]);
+  }, [positions, isKeyboardVisible, keyboardHeight, effScreenSize, isDragging, safeAreaTopInset]);
+  var keyboardOccludedHeight = getKeyboardOccludedHeight({
+    frameSize: effectiveFrameSize,
+    isKeyboardVisible,
+    keyboardHeight,
+    screenSize: effScreenSize,
+    sheetY: position >= 0 ? activePositions[position] : void 0
+  });
+  var keyboardStableFrameHeight = isWebKbSheet && isKeyboardVisible && frameSize > 0 ? frameSize : isNativeKbFitSheet && isKeyboardVisible && preKeyboardFrameSize.current > 0 ? preKeyboardFrameSize.current : 0;
   var {
     useAnimatedNumber,
-    useAnimatedNumberStyle,
-    useAnimatedNumberReaction
+    useAnimatedNumberStyle
   } = animationDriver;
   var _animationDriver_View;
-  var AnimatedView = (_animationDriver_View = animationDriver.View) !== null && _animationDriver_View !== void 0 ? _animationDriver_View : GuiView;
+  var AnimatedView = (_animationDriver_View = animationDriver.View) !== null && _animationDriver_View !== void 0 ? _animationDriver_View : View;
   useIsomorphicLayoutEffect(function () {
     if (!(sheetInsideSheet && open)) return;
     sheetInsideSheet(true);
@@ -154,33 +184,51 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
   if (controller === null || controller === void 0 ? void 0 : controller.skipNextAnimation) skipAdaptAnimation.current = true;
   var hasScrollView = React.useRef(false);
   var opacityFallbackTimer = React.useRef(null);
-  useAnimatedNumberReaction({
-    value: animatedNumber,
-    hostRef: sheetRef
-  }, React.useCallback(function (value) {
+  var syncAnimatedPosition = useEvent(function (value) {
     at.current = value;
     scrollBridge.paneY = value;
     var minY = activePositions[0];
     var wasAtTop = scrollBridge.isAtTop;
     var nowAtTop = value <= minY + 5;
-    if (wasAtTop !== nowAtTop) {
-      scrollBridge.isAtTop = nowAtTop;
-      if (nowAtTop) {
-        var _scrollBridge_setScrollEnabled;
+    if (wasAtTop === nowAtTop) return;
+    scrollBridge.isAtTop = nowAtTop;
+    if (nowAtTop) {
+      var _scrollBridge_setScrollEnabled;
+      if (scrollBridge.lockScrollAtTop) {
+        var _scrollBridge_setScrollEnabled1;
         if (scrollBridge.y > 0) {
           var _scrollBridge_forceScrollTo;
           (_scrollBridge_forceScrollTo = scrollBridge.forceScrollTo) === null || _scrollBridge_forceScrollTo === void 0 || _scrollBridge_forceScrollTo.call(scrollBridge, 0);
           scrollBridge.y = 0;
         }
-        scrollBridge.scrollLockY = void 0;
-        (_scrollBridge_setScrollEnabled = scrollBridge.setScrollEnabled) === null || _scrollBridge_setScrollEnabled === void 0 || _scrollBridge_setScrollEnabled.call(scrollBridge, true);
-      } else {
-        var _scrollBridge_setScrollEnabled1;
         scrollBridge.scrollLockY = 0;
-        (_scrollBridge_setScrollEnabled1 = scrollBridge.setScrollEnabled) === null || _scrollBridge_setScrollEnabled1 === void 0 || _scrollBridge_setScrollEnabled1.call(scrollBridge, false);
+        (_scrollBridge_setScrollEnabled1 = scrollBridge.setScrollEnabled) === null || _scrollBridge_setScrollEnabled1 === void 0 || _scrollBridge_setScrollEnabled1.call(scrollBridge, false, 0);
+        return;
+      }
+      if (scrollBridge.y > 0) {
+        var _scrollBridge_forceScrollTo1;
+        (_scrollBridge_forceScrollTo1 = scrollBridge.forceScrollTo) === null || _scrollBridge_forceScrollTo1 === void 0 || _scrollBridge_forceScrollTo1.call(scrollBridge, 0);
+        scrollBridge.y = 0;
       }
+      scrollBridge.scrollLockY = void 0;
+      (_scrollBridge_setScrollEnabled = scrollBridge.setScrollEnabled) === null || _scrollBridge_setScrollEnabled === void 0 || _scrollBridge_setScrollEnabled.call(scrollBridge, true);
+    } else {
+      var _scrollBridge_setScrollEnabled2;
+      scrollBridge.scrollLockY = 0;
+      (_scrollBridge_setScrollEnabled2 = scrollBridge.setScrollEnabled) === null || _scrollBridge_setScrollEnabled2 === void 0 || _scrollBridge_setScrollEnabled2.call(scrollBridge, false);
     }
-  }, [animationDriver, activePositions]));
+  });
+  var setAnimatedPositionDirect = useEvent(function (value) {
+    syncAnimatedPosition(value);
+    animatedNumber.setValue(value, {
+      type: "direct"
+    });
+  });
+  var getAnimatedPosition = useEvent(function () {
+    var value = animatedNumber.getValue();
+    syncAnimatedPosition(value);
+    return value;
+  });
   function stopSpring() {
     animatedNumber.stop();
     if (scrollBridge.onFinishAnimate) {
@@ -190,7 +238,8 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
   }
   var animateTo = useEvent(function (position2, animationOverride) {
     if (frameSize === 0) return;
-    var toValue = isHidden || position2 === -1 ? screenSize : activePositions[position2];
+    var closeTarget = isWeb ? Math.max(effScreenSize, getMaxViewportHeight()) : effScreenSize;
+    var toValue = isHidden || position2 === -1 ? closeTarget : activePositions[position2];
     if (at.current === toValue) return;
     at.current = toValue;
     stopSpring();
@@ -201,6 +250,7 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
     }
     var animationCompleteCallback = function () {
       var _controller_onAnimationComplete;
+      syncAnimatedPosition(toValue);
       if (opacityFallbackTimer.current) {
         clearTimeout(opacityFallbackTimer.current);
         opacityFallbackTimer.current = null;
@@ -237,6 +287,7 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
         type: "timing",
         duration: 0
       }, function () {
+        syncAnimatedPosition(screenSize);
         setTimeout(function () {
           setDisableAnimation(false);
         }, 10);
@@ -244,6 +295,7 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
       return;
     }
     if (disableAnimation) return;
+    if (isDraggingRef.current) return;
     if (!frameSize || !screenSize || isHidden || hasntMeasured && !open) return;
     animateTo(position);
     if (position === -1) {
@@ -272,7 +324,7 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
     if (disableDrag) return;
     if (!frameSize) return;
     if (isShowingInnerSheet) return;
-    var minY = positions[0];
+    var minY = activePositions[0];
     scrollBridge.paneMinY = minY;
     var startY = at.current;
     function setPanning(val) {
@@ -287,17 +339,17 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
       isExternalDrag = false;
       previouslyScrolling = false;
       setPanning(false);
-      var end = at.current + frameSize * vy * .2;
-      var closestPoint = 0;
-      var dist = Number.POSITIVE_INFINITY;
-      for (var i = 0; i < positions.length; i++) {
-        var position2 = positions[i];
-        var curDist = end > position2 ? end - position2 : position2 - end;
-        if (curDist < dist) {
-          dist = curDist;
-          closestPoint = i;
-        }
-      }
+      var currentPos = at.current;
+      var closestPoint = getSheetReleasePosition({
+        positions: activePositions,
+        projectedEnd: currentPos + frameSize * vy * .2,
+        currentPosition: currentPos,
+        frameSize,
+        dismissOnSnapToBottom,
+        snapPointsMode,
+        isKeyboardVisible,
+        isWeb
+      });
       setPosition(closestPoint);
       animateTo(closestPoint);
     };
@@ -314,6 +366,7 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
       } = param;
       function getShouldSet() {
         if (e.target === providerProps.handleRef.current) return true;
+        if (scrollBridge.scrollNodeTouched) return false;
         if (scrollBridge.hasScrollableContent === true) {
           if (scrollBridge.scrollLock) return false;
           var isScrolled = scrollBridge.y !== 0;
@@ -333,18 +386,19 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
     var grant = function () {
       setPanning(true);
       stopSpring();
-      startY = at.current;
+      startY = getAnimatedPosition();
     };
     var isExternalDrag = false;
+    scrollBridge.startPanDrag = function () {
+      isExternalDrag = true;
+      grant();
+    };
     scrollBridge.drag = function (dy) {
       if (!isExternalDrag) {
         isExternalDrag = true;
         grant();
       }
-      var to = dy + startY;
-      animatedNumber.setValue(resisted(to, minY), {
-        type: "direct"
-      });
+      setAnimatedPositionDirect(resisted(dy + startY, minY));
     };
     scrollBridge.release = release;
     scrollBridge.snapToPosition = function (positionIndex) {
@@ -355,6 +409,9 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
     };
     return PanResponder.create({
       onMoveShouldSetPanResponder: onMoveShouldSet,
+      onPanResponderTerminationRequest: function () {
+        return false;
+      },
       onPanResponderGrant: grant,
       onPanResponderMove: function (_e, param) {
         var {
@@ -362,15 +419,13 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
         } = param;
         var to = resisted(dy + startY, 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]);
   React.useEffect(function () {
     if (isDragging || isHidden || !open || disableAnimation) return;
     if (!frameSize || !screenSize) return;
@@ -391,7 +446,11 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
     animateTo(position);
   }, [isDragging]);
   React.useEffect(function () {
-    if (!open && isKeyboardVisible) dismissKeyboard();
+    if (!open && isKeyboardVisible) {
+      dismissKeyboard();
+      pauseKeyboardHandler.current = false;
+      flushPendingHide();
+    }
   }, [open]);
   var {
     panGesture,
@@ -405,34 +464,35 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
     stopSpring,
     scrollBridge,
     setIsDragging,
-    getCurrentPosition: function () {
-      return at.current;
-    },
+    getCurrentPosition: getAnimatedPosition,
     resisted,
     disableDrag,
     isShowingInnerSheet,
-    setAnimatedPosition: function (val) {
-      at.current = val;
-      animatedNumber.setValue(val, {
-        type: "direct"
-      });
-    },
+    setAnimatedPosition: setAnimatedPositionDirect,
+    dismissOnSnapToBottom,
+    snapPointsMode,
+    isKeyboardVisible,
     pauseKeyboardHandler
   });
+  var ignoreLayoutForKeyboard = useEvent(function () {
+    return isWeb && moveOnKeyboardChange && getWebKeyboardResizeHeight() >= MIN_KEYBOARD_HEIGHT;
+  });
   var handleAnimationViewLayout = useEvent(function (e) {
     var _e_nativeEvent;
     if (!open && stableFrameSize.current !== 0) return;
     var layoutHeight = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.layout.height;
-    var next = modal ? Math.min(layoutHeight, Dimensions.get(relativeDimensionTo).height) : layoutHeight;
+    if (ignoreLayoutForKeyboard() && frameSize > 0) return;
+    var next = modal ? Math.min(layoutHeight, getStableViewportHeight()) : layoutHeight;
     if (!next) return;
-    setFrameSize(next);
+    setFrameSize(Math.round(next));
   });
   var handleMaxContentViewLayout = React.useCallback(function (e) {
     var _e_nativeEvent;
-    var next = Math.min((_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.layout.height, Dimensions.get(relativeDimensionTo).height);
+    if (ignoreLayoutForKeyboard() && screenSize > 0) return;
+    var next = Math.min((_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.layout.height, getStableViewportHeight());
     if (!next) return;
-    setMaxContentSize(next);
-  }, []);
+    setMaxContentSize(Math.round(next));
+  }, [ignoreLayoutForKeyboard, screenSize]);
   var animatedStyle = useAnimatedNumberStyle(animatedNumber, React.useCallback(function (val) {
     "worklet";
 
@@ -454,25 +514,28 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
   var setHasScrollView = React.useCallback(function (val) {
     hasScrollView.current = val;
   }, []);
-  var contents = /* @__PURE__ */_jsx(LayoutMeasurementController, {
+  var contents = /* @__PURE__ */jsx(LayoutMeasurementController, {
     disable: !open,
-    children: /* @__PURE__ */_jsx(ParentSheetContext.Provider, {
+    children: /* @__PURE__ */jsx(ParentSheetContext.Provider, {
       value: nextParentContext,
-      children: /* @__PURE__ */_jsx(SheetProvider, {
+      children: /* @__PURE__ */jsx(SheetProvider, {
         ...providerProps,
+        keyboardOccludedHeight,
+        isKeyboardVisible,
+        keyboardStableFrameHeight,
         setHasScrollView,
-        children: /* @__PURE__ */_jsxs(GestureSheetProvider, {
+        children: /* @__PURE__ */jsxs(GestureSheetProvider, {
           isDragging,
           blockPan,
           setBlockPan,
           panGesture,
           panGestureRef,
-          children: [/* @__PURE__ */_jsx(AnimatePresence, {
+          children: [/* @__PURE__ */jsx(AnimatePresence, {
             custom: {
               open
             },
             children: shouldHideParentSheet || !open ? null : overlayComponent
-          }), snapPointsMode !== "percent" && /* @__PURE__ */_jsx(View, {
+          }), snapPointsMode !== "percent" && /* @__PURE__ */jsx(View$1, {
             style: {
               opacity: 0,
               position: "absolute",
@@ -483,7 +546,7 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
               pointerEvents: "none"
             },
             onLayout: handleMaxContentViewLayout
-          }), /* @__PURE__ */_jsx(AnimatedView, {
+          }), /* @__PURE__ */jsx(AnimatedView, {
             ref,
             onLayout: handleAnimationViewLayout,
             transition: isDragging || disableAnimation ? null : transition,
@@ -494,18 +557,18 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
               width: "100%",
               height: forcedContentHeight,
               minHeight: forcedContentHeight,
-              opacity: !shouldHideParentSheet ? opacity : 0,
+              opacity: shouldHideParentSheet ? 0 : disableTransparencyHide ? 1 : opacity,
               ...((shouldHideParentSheet || !open) && {
                 pointerEvents: "none"
               })
             }, animatedStyle],
-            children: gestureHandlerEnabled && panGesture ? /* @__PURE__ */_jsx(GestureDetectorWrapper, {
+            children: gestureHandlerEnabled && panGesture ? /* @__PURE__ */jsx(GestureDetectorWrapper, {
               gesture: panGesture,
               style: {
                 flex: 1
               },
               children: props.children
-            }) : /* @__PURE__ */_jsx(View, {
+            }) : /* @__PURE__ */jsx(View$1, {
               ...(panResponder === null || panResponder === void 0 ? void 0 : panResponder.panHandlers),
               style: {
                 flex: 1,
@@ -519,21 +582,29 @@ var SheetImplementationCustom = /* @__PURE__ */React.forwardRef(function SheetIm
       })
     })
   });
-  if (needsPortalRepropagation()) contents = /* @__PURE__ */_jsx(ProvideAdaptContext, {
+  if (needsPortalRepropagation()) contents = /* @__PURE__ */jsx(ProvideAdaptContext, {
     ...useAdaptContext(),
-    children: contents
+    children: /* @__PURE__ */jsx(SafeAreaInsetsContext.Provider, {
+      value: safeAreaInsets,
+      children: contents
+    })
   });
   var shouldMountChildren = unmountChildrenWhenHidden ? !!opacity : true;
   if (modal) {
-    var modalContents = /* @__PURE__ */_jsx(Portal, {
+    var RNGHRoot = getGestureHandlerState().RootView;
+    var mountedContents = shouldMountChildren ? /* @__PURE__ */jsx(ContainerComponent, {
+      children: contents
+    }) : null;
+    var modalContents = /* @__PURE__ */jsx(Portal, {
       stackZIndex: zIndex,
       ...portalProps,
-      children: shouldMountChildren && /* @__PURE__ */_jsx(ContainerComponent, {
-        children: contents
-      })
+      children: mountedContents && RNGHRoot ? /* @__PURE__ */jsx(RNGHRoot, {
+        style: open ? rnghRootStyleOpen : rnghRootStyleClosed,
+        children: mountedContents
+      }) : mountedContents
     });
     if (isWeb) return modalContents;
-    return /* @__PURE__ */_jsx(SheetInsideSheetContext.Provider, {
+    return /* @__PURE__ */jsx(SheetInsideSheetContext.Provider, {
       value: onInnerSheet,
       children: modalContents
     });