@tamagui/sheet 1.14.0 → 1.14.2

package/dist/jsx/Sheet.mjs

@@ -1,2 +1,622 @@
-import{AdaptParentContext as fe}from"@tamagui/adapt";import{useComposedRefs as Se}from"@tamagui/compose-refs";import{Theme as Ct,isClient as xt,isTouchable as Rt,isWeb as M,mergeEvent as Et,styled as K,themeable as wt,useAnimationDriver as Ot,useDidFinishSSR as Vt,useEvent as Pe,useIsomorphicLayoutEffect as ge,useThemeName as kt,withStaticProperties as Nt}from"@tamagui/core";import{Portal as At}from"@tamagui/portal";import{RemoveScroll as Dt}from"@tamagui/remove-scroll";import{ThemeableStack as Tt,XStack as It,YStack as Ht}from"@tamagui/stacks";import{useConstant as Mt}from"@tamagui/use-constant";import{useControllableState as be}from"@tamagui/use-controllable-state";import{useKeyboardVisible as Ft}from"@tamagui/use-keyboard-visible";import ve,{createContext as X,forwardRef as U,isValidElement as _t,useCallback as W,useContext as F,useEffect as Z,useMemo as O,useRef as q,useState as J}from"react";import{Keyboard as ye,PanResponder as Yt}from"react-native";import{SHEET_HANDLE_NAME as Ce,SHEET_NAME as xe}from"./constants";import{SheetProvider as Bt,useSheetContext as j}from"./SheetContext";import{SheetScrollView as Lt}from"./SheetScrollView";import{createSheetScope as Nn}from"./SheetContext";const Re=K(It,{name:Ce,height:10,borderRadius:100,backgroundColor:"$background",zIndex:10,marginHorizontal:"35%",marginBottom:"$2",opacity:.5,hoverStyle:{opacity:.7},variants:{open:{true:{pointerEvents:"auto"},false:{opacity:0,pointerEvents:"none"}}}}),zt=Re.extractable(({__scopeSheet:o,...n})=>{const t=j(Ce,o);return<Re onPress={()=>{const i=t.snapPoints.length+(t.dismissOnSnapToBottom?-1:0),r=(t.position+1)%i;t.setPosition(r)}}open={t.open}{...n}/>}),Ee="SheetOverlay",Oe=K(Tt,{name:Ee,fullscreen:!0,backgrounded:!0,opacity:.5,zIndex:0,variants:{closed:{true:{opacity:0,pointerEvents:"none"},false:{pointerEvents:"auto"}}}}),Gt=Oe.extractable(({__scopeSheet:o,...n})=>{const t=j(Ee,o);return<Oe closed={!t.open||t.hidden}{...n}onPress={Et(n.onPress,t.dismissOnOverlayPress?()=>{t.setOpen(!1)}:void 0)}/>}),V=xt?document.createElement("style"):null;V&&document.head.appendChild(V);const Ve=K(Ht,{name:xe,flex:1,backgroundColor:"$background",borderTopLeftRadius:"$true",borderTopRightRadius:"$true",width:"100%",maxHeight:"100%",overflow:"hidden",pointerEvents:"auto"}),$t=Ve.extractable(U(({__scopeSheet:o,...n},t)=>{const i=j(xe,o),r=Se(t,i.contentRef);return<Ve ref={r}{...n}/>})),_=1e4,Kt={Handle:zt,Frame:$t,Overlay:Gt,ScrollView:Lt},ke=X({zIndex:40}),Ne=()=>{const o=F(Te),n=o?.hidden,t=n&&o?.open;return{controller:o,isHidden:n,isShowingNonSheet:t}},Xt=Nt(U(function(n,t){const i=Vt(),{isShowingNonSheet:r}=Ne();return r||!i?null:<Ut ref={t}{...n}/>}),Kt),Ut=wt(U(function(n,t){const i=F(ke),{isHidden:r,controller:k}=Ne(),{__scopeSheet:Y,snapPoints:N=[80],open:Ie,defaultOpen:Zt,children:He,position:Me,onPositionChange:Fe,onOpenChange:_e,defaultPosition:Ye,dismissOnOverlayPress:Be=!0,animationConfig:Le,dismissOnSnapToBottom:f=!1,forceRemoveScrollEnabled:ze=null,disableDrag:Ge,modal:A=!1,zIndex:D=i.zIndex+1,moveOnKeyboardChange:$e=!1,portalProps:Ke}=n;process.env.NODE_ENV==="development"&&N.some(e=>e<0||e>100)&&console.warn("\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame");const Q=q(null),Xe=Se(t,Q),g=Ot();if(!g)throw new Error("Must set animations in tamagui.config.ts");const ee=Ge??k?.disableDrag,Ue=Ft(),We=kt(),te=ve.useRef(null),c=Mt(()=>({enabled:!1,y:0,paneY:0,paneMinY:0,scrollStartY:-1,drag:()=>{},release:()=>{},scrollLock:!1})),Ze=e=>{k?.onOpenChange?.(e),_e?.(e)},[s,B]=be({prop:k?.open??Ie,defaultProp:!0,onChange:Ze,strategy:"most-recent-wins",transition:!0}),[u,qe]=J(0),S=O(()=>f?[...N,0]:N,[JSON.stringify(N),f]),[Je,L]=be({prop:Me,defaultProp:Ye||(s?0:-1),onChange:Fe,strategy:"most-recent-wins",transition:!0}),b=s===!1?-1:Je;s&&f&&b===S.length-1&&L(0);const v=W(e=>{f&&e===S.length-1?B(!1):L(e)},[f,S.length,L,B]),{useAnimatedNumber:je,useAnimatedNumberReaction:Qe,useAnimatedNumberStyle:et}=g,l=je(_),P=q(0);Qe({value:l,hostRef:Q},e=>{g.isReactNative&&(P.current=e,c.paneY=e)});function ne(){l.stop(),c.onFinishAnimate&&(c.onFinishAnimate(),c.onFinishAnimate=void 0)}const oe=s&&b<0;Z(()=>{oe&&v(0)},[v,oe]);const y=O(()=>S.map(e=>Wt(e,u)),[u,S]),[re,se]=J(s?1:0);s&&re===0&&se(1),Z(()=>{if(!s){const e=setTimeout(()=>{se(0)},400);return()=>{clearTimeout(e)}}},[s]);const T=Pe(e=>{const a=l.getValue();if(r&&s||!a||u===0)return;const m=r||e===-1?u===0?_:u:y[e];if(P.current===m)return;if(ne(),r){l.setValue(m,{type:"timing",duration:0}),P.current=m;return}const R=P.current===_;l.setValue(m,{...Le,type:"spring",overshootClamping:R})});ge(()=>{T(b)},[r,u,b,T]);const[z,tt]=J(!1),ae=!M&&A&&z,I=F(Ae),nt=W(e=>{tt(e)},[]),ot=O(()=>{if(ee||!u||z)return;const e=y[0];c.paneMinY=e;let a=P.current;function x(p){V&&(p?V.innerText=":root * { user-select: none !important; -webkit-user-select: none !important; }":V.innerText="")}const m=({vy:p,dragAt:d})=>{G=!1,de=!1,x(!1);const h=d+a+u*p*.2;let w=0,me=1/0;for(let H=0;H<y.length;H++){const $=y[H],he=h>$?h-$:$-h;he<me&&(me=he,w=H)}v(w),T(w)},R=(p,d)=>{m({vy:d.vy,dragAt:d.dy})};let de=!1;const yt=(p,{dy:d})=>{const E=c.y!==0,h=d<0,w=c.paneY-5<=c.paneMinY;return E?(de=!0,!1):w&&!E&&h?!1:Math.abs(d)>5},pe=()=>{x(!0),ne(),a=P.current};let G=!1;return c.drag=p=>{G||(G=!0,pe());const d=p+a;l.setValue(De(d,e),{type:"direct"})},c.release=m,Yt.create({onMoveShouldSetPanResponder:yt,onPanResponderGrant:pe,onPanResponderMove:(p,{dy:d})=>{const E=d+a,h=De(E,e);l.setValue(h,{type:"direct"})},onPanResponderEnd:R,onPanResponderTerminate:R,onPanResponderRelease:R})},[ee,z,T,u,y,v]);let ie=null,le=null,ce=null;ve.Children.forEach(He,e=>{if(_t(e))switch(e.type?.staticConfig?.componentName){case"SheetHandle":ie=e;break;case"Sheet":ce=e;break;case"SheetOverlay":le=e;break;default:console.warn("Warning: passed invalid child to Sheet",e)}});const rt=et(l,e=>({transform:[{translateY:u===0?_:e}]})),C=q(null);Z(()=>{if(M||!$e)return;const e=ye.addListener("keyboardDidShow",x=>{C.current===null&&(C.current=l.getValue(),l.setValue(Math.max(l.getValue()-x.endCoordinates.height,0)))}),a=ye.addListener("keyboardDidHide",()=>{C.current!==null&&(l.setValue(C.current),C.current=null)});return()=>{a.remove(),e.remove()}},[]);const St=g.NumberView??g.View;ge(()=>{if(I&&s)return I(!0),()=>{I(!1)}},[I,s]);const Pt=O(()=>({zIndex:D}),[D]),gt=W(e=>{let a=e.nativeEvent?.layout.height;M&&Rt&&!s&&(a+=100),a&&qe(()=>a)},[Ue]),bt=ze??(s&&A),ue=<ke.Provider value={Pt}><Bt modal={A}contentRef={te}frameSize={u}dismissOnOverlayPress={Be}dismissOnSnapToBottom={f}open={s}hidden={!!r}scope={Y}position={b}snapPoints={S}setPosition={v}setOpen={B}scrollBridge={c}>{ae?null:le}<St ref={Xe}{...ot?.panHandlers}onLayout={gt}pointerEvents={s&&!ae?"auto":"none"}animation={n.animation}style={[{position:"absolute",zIndex:D,width:"100%",height:"100%",opacity:re},rt]}>{ie}<Dt forwardProps enabled={bt}allowPinchZoom shards={[te]}removeScrollBar={!1}>{ce}</Dt></St></Bt></ke.Provider>,vt=F(fe);if(A){const e=<At zIndex={D}{...Ke}><Ct forceClassName name={We}><fe.Provider value={vt}>{ue}</fe.Provider></Ct></At>;return M?e:<Ae.Provider value={nt}>{e}</Ae.Provider>}return ue}),{componentName:"Sheet"}),Ae=X(null),wn=Xt;function Wt(o,n){if(!n)return 0;if(o===void 0)return console.warn("No snapPoint"),0;const t=o/100;return Math.round(n-t*n)}function De(o,n,t=25){if(o<n){const i=n-o,r=Math.min(t,i)/t,Y=-(1.1-Math.pow(.1,r))*t;return n+Y}return o}const Te=X(null),On=({children:o,onOpenChange:n,...t})=>{const i=Pe(n),r=O(()=>({open:t.open,hidden:t.hidden,disableDrag:t.disableDrag,onOpenChange:i}),[i,t.open,t.hidden,t.disableDrag]);return<Te.Provider value={r}>{o}</Te.Provider>};export{wn as ControlledSheet,Xt as Sheet,On as SheetController,$t as SheetFrame,Ve as SheetFrameFrame,zt as SheetHandle,Re as SheetHandleFrame,Gt as SheetOverlay,Oe as SheetOverlayFrame,Nn as createSheetScope};
+import { AdaptParentContext } from "@tamagui/adapt";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  Theme,
+  isClient,
+  isTouchable,
+  isWeb,
+  mergeEvent,
+  styled,
+  themeable,
+  useAnimationDriver,
+  useDidFinishSSR,
+  useEvent,
+  useIsomorphicLayoutEffect,
+  useThemeName,
+  withStaticProperties
+} from "@tamagui/core";
+import { Portal } from "@tamagui/portal";
+import { RemoveScroll } from "@tamagui/remove-scroll";
+import { ThemeableStack, XStack, YStack } from "@tamagui/stacks";
+import { useConstant } from "@tamagui/use-constant";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { useKeyboardVisible } from "@tamagui/use-keyboard-visible";
+import React, {
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  Keyboard,
+  PanResponder
+} from "react-native";
+import { SHEET_HANDLE_NAME, SHEET_NAME } from "./constants";
+import { SheetProvider, useSheetContext } from "./SheetContext";
+import { SheetScrollView } from "./SheetScrollView";
+import { createSheetScope } from "./SheetContext";
+const SheetHandleFrame = styled(XStack, {
+  name: SHEET_HANDLE_NAME,
+  height: 10,
+  borderRadius: 100,
+  backgroundColor: "$background",
+  zIndex: 10,
+  marginHorizontal: "35%",
+  marginBottom: "$2",
+  opacity: 0.5,
+  hoverStyle: {
+    opacity: 0.7
+  },
+  variants: {
+    open: {
+      true: {
+        pointerEvents: "auto"
+      },
+      false: {
+        opacity: 0,
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+const SheetHandle = SheetHandleFrame.extractable(
+  ({ __scopeSheet, ...props }) => {
+    const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet);
+    return <SheetHandleFrame
+      onPress={() => {
+        const max = context.snapPoints.length + (context.dismissOnSnapToBottom ? -1 : 0);
+        const nextPos = (context.position + 1) % max;
+        context.setPosition(nextPos);
+      }}
+      open={context.open}
+      {...props}
+    />;
+  }
+);
+const SHEET_OVERLAY_NAME = "SheetOverlay";
+const SheetOverlayFrame = styled(ThemeableStack, {
+  name: SHEET_OVERLAY_NAME,
+  fullscreen: true,
+  backgrounded: true,
+  opacity: 0.5,
+  zIndex: 0,
+  variants: {
+    closed: {
+      true: {
+        opacity: 0,
+        pointerEvents: "none"
+      },
+      false: {
+        pointerEvents: "auto"
+      }
+    }
+  }
+});
+const SheetOverlay = SheetOverlayFrame.extractable(
+  ({ __scopeSheet, ...props }) => {
+    const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet);
+    return <SheetOverlayFrame
+      closed={!context.open || context.hidden}
+      {...props}
+      onPress={mergeEvent(
+        props.onPress,
+        context.dismissOnOverlayPress ? () => {
+          context.setOpen(false);
+        } : void 0
+      )}
+    />;
+  }
+);
+const selectionStyleSheet = isClient ? document.createElement("style") : null;
+if (selectionStyleSheet) {
+  document.head.appendChild(selectionStyleSheet);
+}
+const SheetFrameFrame = styled(YStack, {
+  name: SHEET_NAME,
+  flex: 1,
+  backgroundColor: "$background",
+  borderTopLeftRadius: "$true",
+  borderTopRightRadius: "$true",
+  width: "100%",
+  maxHeight: "100%",
+  overflow: "hidden",
+  pointerEvents: "auto"
+});
+const SheetFrame = SheetFrameFrame.extractable(
+  forwardRef(
+    ({ __scopeSheet, ...props }, forwardedRef) => {
+      const context = useSheetContext(SHEET_NAME, __scopeSheet);
+      const composedContentRef = useComposedRefs(forwardedRef, context.contentRef);
+      return <SheetFrameFrame ref={composedContentRef} {...props} />;
+    }
+  )
+);
+const HIDDEN_SIZE = 1e4;
+const sheetComponents = {
+  Handle: SheetHandle,
+  Frame: SheetFrame,
+  Overlay: SheetOverlay,
+  ScrollView: SheetScrollView
+};
+const ParentSheetContext = createContext({
+  zIndex: 40
+});
+const useSheetContoller = () => {
+  const controller = useContext(SheetControllerContext);
+  const isHidden = controller?.hidden;
+  const isShowingNonSheet = isHidden && controller?.open;
+  return {
+    controller,
+    isHidden,
+    isShowingNonSheet
+  };
+};
+const Sheet = withStaticProperties(
+  forwardRef(function Sheet2(props, ref) {
+    const hydrated = useDidFinishSSR();
+    const { isShowingNonSheet } = useSheetContoller();
+    if (isShowingNonSheet || !hydrated) {
+      return null;
+    }
+    return <SheetImplementation ref={ref} {...props} />;
+  }),
+  sheetComponents
+);
+const SheetImplementation = themeable(
+  forwardRef(function SheetImplementation2(props, forwardedRef) {
+    const parentSheet = useContext(ParentSheetContext);
+    const { isHidden, controller } = useSheetContoller();
+    const {
+      __scopeSheet,
+      snapPoints: snapPointsProp = [80],
+      open: openProp,
+      defaultOpen,
+      children: childrenProp,
+      position: positionProp,
+      onPositionChange,
+      onOpenChange,
+      defaultPosition,
+      dismissOnOverlayPress = true,
+      animationConfig,
+      dismissOnSnapToBottom = false,
+      forceRemoveScrollEnabled = null,
+      disableDrag: disableDragProp,
+      modal = false,
+      zIndex = parentSheet.zIndex + 1,
+      moveOnKeyboardChange = false,
+      portalProps
+    } = props;
+    if (process.env.NODE_ENV === "development") {
+      if (snapPointsProp.some((p) => p < 0 || p > 100)) {
+        console.warn(
+          "\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame"
+        );
+      }
+    }
+    const sheetRef = useRef(null);
+    const ref = useComposedRefs(forwardedRef, sheetRef);
+    const driver = useAnimationDriver();
+    if (!driver) {
+      throw new Error("Must set animations in tamagui.config.ts");
+    }
+    const disableDrag = disableDragProp ?? controller?.disableDrag;
+    const keyboardIsVisible = useKeyboardVisible();
+    const themeName = useThemeName();
+    const contentRef = React.useRef(null);
+    const scrollBridge = useConstant(() => ({
+      enabled: false,
+      y: 0,
+      paneY: 0,
+      paneMinY: 0,
+      scrollStartY: -1,
+      drag: () => {
+      },
+      release: () => {
+      },
+      scrollLock: false
+    }));
+    const onOpenChangeInternal = (val) => {
+      controller?.onOpenChange?.(val);
+      onOpenChange?.(val);
+    };
+    const [open, setOpen] = useControllableState({
+      prop: controller?.open ?? openProp,
+      defaultProp: true,
+      onChange: onOpenChangeInternal,
+      strategy: "most-recent-wins",
+      transition: true
+    });
+    const [frameSize, setFrameSize] = useState(0);
+    const snapPoints = useMemo(
+      () => dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]
+    );
+    const [position_, setPosition_] = useControllableState({
+      prop: positionProp,
+      defaultProp: defaultPosition || (open ? 0 : -1),
+      onChange: onPositionChange,
+      strategy: "most-recent-wins",
+      transition: true
+    });
+    const position = open === false ? -1 : position_;
+    if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {
+      setPosition_(0);
+    }
+    const setPosition = useCallback(
+      (next) => {
+        if (dismissOnSnapToBottom && next === snapPoints.length - 1) {
+          setOpen(false);
+        } else {
+          setPosition_(next);
+        }
+      },
+      [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]
+    );
+    const { useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle } = driver;
+    const animatedNumber = useAnimatedNumber(HIDDEN_SIZE);
+    const at = useRef(0);
+    useAnimatedNumberReaction(
+      {
+        value: animatedNumber,
+        hostRef: sheetRef
+      },
+      (value) => {
+        if (!driver.isReactNative)
+          return;
+        at.current = value;
+        scrollBridge.paneY = value;
+      }
+    );
+    function stopSpring() {
+      animatedNumber.stop();
+      if (scrollBridge.onFinishAnimate) {
+        scrollBridge.onFinishAnimate();
+        scrollBridge.onFinishAnimate = void 0;
+      }
+    }
+    const shouldSetPositionOpen = open && position < 0;
+    useEffect(() => {
+      if (shouldSetPositionOpen) {
+        setPosition(0);
+      }
+    }, [setPosition, shouldSetPositionOpen]);
+    const positions = useMemo(
+      () => snapPoints.map((point) => getPercentSize(point, frameSize)),
+      [frameSize, snapPoints]
+    );
+    const [opacity, setOpacity] = useState(open ? 1 : 0);
+    if (open && opacity === 0) {
+      setOpacity(1);
+    }
+    useEffect(() => {
+      if (!open) {
+        const tm = setTimeout(() => {
+          setOpacity(0);
+        }, 400);
+        return () => {
+          clearTimeout(tm);
+        };
+      }
+    }, [open]);
+    const animateTo = useEvent((position2) => {
+      const current = animatedNumber.getValue();
+      if (isHidden && open)
+        return;
+      if (!current)
+        return;
+      if (frameSize === 0)
+        return;
+      const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize;
+      const toValue = isHidden || position2 === -1 ? hiddenValue : positions[position2];
+      if (at.current === toValue)
+        return;
+      stopSpring();
+      if (isHidden) {
+        animatedNumber.setValue(toValue, {
+          type: "timing",
+          duration: 0
+        });
+        at.current = toValue;
+        return;
+      }
+      const overshootClamping = at.current === HIDDEN_SIZE;
+      animatedNumber.setValue(toValue, {
+        ...animationConfig,
+        type: "spring",
+        overshootClamping
+      });
+    });
+    useIsomorphicLayoutEffect(() => {
+      animateTo(position);
+    }, [isHidden, frameSize, position, animateTo]);
+    const [isShowingInnerSheet, setIsShowingInnerSheet] = useState(false);
+    const shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet;
+    const parentSheetContext = useContext(SheetInsideSheetContext);
+    const onInnerSheet = useCallback((hasChild) => {
+      setIsShowingInnerSheet(hasChild);
+    }, []);
+    const panResponder = useMemo(
+      () => {
+        if (disableDrag)
+          return;
+        if (!frameSize)
+          return;
+        if (isShowingInnerSheet)
+          return;
+        const minY = positions[0];
+        scrollBridge.paneMinY = minY;
+        let startY = at.current;
+        function makeUnselectable(val) {
+          if (!selectionStyleSheet)
+            return;
+          if (!val) {
+            selectionStyleSheet.innerText = "";
+          } else {
+            selectionStyleSheet.innerText = ":root * { user-select: none !important; -webkit-user-select: none !important; }";
+          }
+        }
+        const release = ({ vy, dragAt }) => {
+          isExternalDrag = false;
+          previouslyScrolling = false;
+          makeUnselectable(false);
+          const at2 = dragAt + startY;
+          const end = at2 + frameSize * vy * 0.2;
+          let closestPoint = 0;
+          let dist = 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;
+            }
+          }
+          setPosition(closestPoint);
+          animateTo(closestPoint);
+        };
+        const finish = (_e, state) => {
+          release({
+            vy: state.vy,
+            dragAt: state.dy
+          });
+        };
+        let previouslyScrolling = false;
+        const onMoveShouldSet = (_e, { dy }) => {
+          const isScrolled = scrollBridge.y !== 0;
+          const isDraggingUp = dy < 0;
+          const isNearTop = scrollBridge.paneY - 5 <= scrollBridge.paneMinY;
+          if (isScrolled) {
+            previouslyScrolling = true;
+            return false;
+          }
+          if (isNearTop) {
+            if (!isScrolled && isDraggingUp) {
+              return false;
+            }
+          }
+          return Math.abs(dy) > 5;
+        };
+        const grant = () => {
+          makeUnselectable(true);
+          stopSpring();
+          startY = at.current;
+        };
+        let isExternalDrag = false;
+        scrollBridge.drag = (dy) => {
+          if (!isExternalDrag) {
+            isExternalDrag = true;
+            grant();
+          }
+          const to = dy + startY;
+          animatedNumber.setValue(resisted(to, minY), { type: "direct" });
+        };
+        scrollBridge.release = release;
+        return PanResponder.create({
+          onMoveShouldSetPanResponder: onMoveShouldSet,
+          onPanResponderGrant: grant,
+          onPanResponderMove: (_e, { dy }) => {
+            const toFull = dy + startY;
+            const to = resisted(toFull, minY);
+            animatedNumber.setValue(to, { type: "direct" });
+          },
+          onPanResponderEnd: finish,
+          onPanResponderTerminate: finish,
+          onPanResponderRelease: finish
+        });
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]
+    );
+    let handleComponent = null;
+    let overlayComponent = null;
+    let frameComponent = null;
+    React.Children.forEach(childrenProp, (child) => {
+      if (isValidElement(child)) {
+        const name = child.type?.["staticConfig"]?.componentName;
+        switch (name) {
+          case "SheetHandle":
+            handleComponent = child;
+            break;
+          case "Sheet":
+            frameComponent = child;
+            break;
+          case "SheetOverlay":
+            overlayComponent = child;
+            break;
+          default:
+            console.warn("Warning: passed invalid child to Sheet", child);
+        }
+      }
+    });
+    const animatedStyle = useAnimatedNumberStyle(animatedNumber, (val) => {
+      const translateY = frameSize === 0 ? HIDDEN_SIZE : val;
+      return {
+        transform: [{ translateY }]
+      };
+    });
+    const sizeBeforeKeyboard = useRef(null);
+    useEffect(() => {
+      if (isWeb || !moveOnKeyboardChange)
+        return;
+      const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", (e) => {
+        if (sizeBeforeKeyboard.current !== null)
+          return;
+        sizeBeforeKeyboard.current = animatedNumber.getValue();
+        animatedNumber.setValue(
+          Math.max(animatedNumber.getValue() - e.endCoordinates.height, 0)
+        );
+      });
+      const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
+        if (sizeBeforeKeyboard.current === null)
+          return;
+        animatedNumber.setValue(sizeBeforeKeyboard.current);
+        sizeBeforeKeyboard.current = null;
+      });
+      return () => {
+        keyboardDidHideListener.remove();
+        keyboardDidShowListener.remove();
+      };
+    }, []);
+    const AnimatedView = driver["NumberView"] ?? driver.View;
+    useIsomorphicLayoutEffect(() => {
+      if (!(parentSheetContext && open))
+        return;
+      parentSheetContext(true);
+      return () => {
+        parentSheetContext(false);
+      };
+    }, [parentSheetContext, open]);
+    const nextParentContext = useMemo(
+      () => ({
+        zIndex
+      }),
+      [zIndex]
+    );
+    const handleLayout = useCallback(
+      (e) => {
+        let next = e.nativeEvent?.layout.height;
+        if (isWeb && isTouchable && !open) {
+          next += 100;
+        }
+        if (!next)
+          return;
+        setFrameSize(() => next);
+      },
+      [keyboardIsVisible]
+    );
+    const removeScrollEnabled = forceRemoveScrollEnabled ?? (open && modal);
+    const contents = <ParentSheetContext.Provider value={nextParentContext}><SheetProvider
+      modal={modal}
+      contentRef={contentRef}
+      frameSize={frameSize}
+      dismissOnOverlayPress={dismissOnOverlayPress}
+      dismissOnSnapToBottom={dismissOnSnapToBottom}
+      open={open}
+      hidden={!!isHidden}
+      scope={__scopeSheet}
+      position={position}
+      snapPoints={snapPoints}
+      setPosition={setPosition}
+      setOpen={setOpen}
+      scrollBridge={scrollBridge}
+    >
+      {shouldHideParentSheet ? null : overlayComponent}
+      <AnimatedView
+        ref={ref}
+        {...panResponder?.panHandlers}
+        onLayout={handleLayout}
+        pointerEvents={open && !shouldHideParentSheet ? "auto" : "none"}
+        animation={props.animation}
+        style={[
+          {
+            position: "absolute",
+            zIndex,
+            width: "100%",
+            height: "100%",
+            opacity
+          },
+          animatedStyle
+        ]}
+      >
+        {handleComponent}
+        <RemoveScroll
+          forwardProps
+          enabled={removeScrollEnabled}
+          allowPinchZoom
+          shards={[contentRef]}
+          removeScrollBar={false}
+        >{frameComponent}</RemoveScroll>
+      </AnimatedView>
+    </SheetProvider></ParentSheetContext.Provider>;
+    const adaptContext = useContext(AdaptParentContext);
+    if (modal) {
+      const modalContents = <Portal zIndex={zIndex} {...portalProps}><Theme forceClassName name={themeName}><AdaptParentContext.Provider value={adaptContext}>{contents}</AdaptParentContext.Provider></Theme></Portal>;
+      if (isWeb) {
+        return modalContents;
+      }
+      return <SheetInsideSheetContext.Provider value={onInnerSheet}>{modalContents}</SheetInsideSheetContext.Provider>;
+    }
+    return contents;
+  }),
+  { componentName: "Sheet" }
+);
+const SheetInsideSheetContext = createContext(null);
+const ControlledSheet = Sheet;
+function getPercentSize(point, frameSize) {
+  if (!frameSize)
+    return 0;
+  if (point === void 0) {
+    console.warn("No snapPoint");
+    return 0;
+  }
+  const pct = point / 100;
+  const next = Math.round(frameSize - pct * frameSize);
+  return next;
+}
+function resisted(y, minY, maxOverflow = 25) {
+  if (y < minY) {
+    const past = minY - y;
+    const pctPast = Math.min(maxOverflow, past) / maxOverflow;
+    const diminishBy = 1.1 - Math.pow(0.1, pctPast);
+    const extra = -diminishBy * maxOverflow;
+    return minY + extra;
+  }
+  return y;
+}
+const SheetControllerContext = createContext(null);
+const SheetController = ({
+  children,
+  onOpenChange: onOpenChangeProp,
+  ...value
+}) => {
+  const onOpenChange = useEvent(onOpenChangeProp);
+  const memoValue = useMemo(
+    () => ({
+      open: value.open,
+      hidden: value.hidden,
+      disableDrag: value.disableDrag,
+      onOpenChange
+    }),
+    [onOpenChange, value.open, value.hidden, value.disableDrag]
+  );
+  return <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>;
+};
+export {
+  ControlledSheet,
+  Sheet,
+  SheetController,
+  SheetFrame,
+  SheetFrameFrame,
+  SheetHandle,
+  SheetHandleFrame,
+  SheetOverlay,
+  SheetOverlayFrame,
+  createSheetScope
+};
 //# sourceMappingURL=Sheet.mjs.map