@tamagui/sheet 1.0.1-beta.100 → 1.0.1-beta.101

package/dist/jsx/Sheet.js

@@ -1,22 +1,40 @@
-import { isSSR, isWeb, styled, themeable, withStaticProperties } from "@tamagui/core";
+import {
+  Theme,
+  isClient,
+  isWeb,
+  mergeEvent,
+  styled,
+  themeable,
+  useEvent,
+  useIsomorphicLayoutEffect,
+  useThemeName,
+  withStaticProperties
+} from "@tamagui/core";
 import { createContextScope } from "@tamagui/create-context";
+import { Portal } from "@tamagui/portal";
 import { XStack, YStack } from "@tamagui/stacks";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import React, {
+  createContext,
   forwardRef,
   isValidElement,
-  useCallback,
+  useContext,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState
 } from "react";
-import { Animated, PanResponder } from "react-native";
-const DRAWER_NAME = "Drawer";
-const DRAWER_HANDLE_NAME = "DrawerHandle";
-const DrawerHandleFrame = styled(XStack, {
-  name: DRAWER_HANDLE_NAME,
+import {
+  Animated,
+  PanResponder
+} from "react-native";
+const SHEET_NAME = "Sheet";
+const SHEET_HANDLE_NAME = "SheetHandle";
+const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME);
+const [SheetProvider, useSheetContext] = createSheetContext(SHEET_NAME, {});
+const SheetHandleFrame = styled(XStack, {
+  name: SHEET_HANDLE_NAME,
   height: 10,
   borderRadius: 100,
   backgroundColor: "$background",
@@ -32,98 +50,194 @@ const DrawerHandleFrame = styled(XStack, {
     opacity: 0.7
   }
 });
-const DrawerHandle = DrawerHandleFrame.extractable(({ __scopeDrawer, ...props }) => {
-  const context = useDrawerContext(DRAWER_HANDLE_NAME, __scopeDrawer);
-  return <DrawerHandleFrame onPress={() => {
+const SheetHandle = SheetHandleFrame.extractable(({ __scopeSheet, ...props }) => {
+  const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet);
+  if (context.open === false) {
+    return null;
+  }
+  return <SheetHandleFrame onPress={() => {
     const nextPos = (context.position + 1) % context.snapPoints.length;
     context.setPosition(nextPos);
   }} {...props} />;
 });
-const [createDrawerContext, createDrawerScope] = createContextScope(DRAWER_NAME);
-const [DrawerProvider, useDrawerContext] = createDrawerContext(DRAWER_NAME, {});
-const DrawerBackdrop = styled(YStack, {
-  name: "DrawerBackdrop",
+const SheetOverlayFrame = styled(YStack, {
+  name: "SheetOverlay",
   backgroundColor: "$color",
   fullscreen: true,
-  opacity: 0.2
+  opacity: 0.2,
+  zIndex: 0,
+  variants: {
+    closed: {
+      true: {
+        opacity: 0,
+        pointerEvents: "none"
+      },
+      false: {
+        pointerEvents: "auto"
+      }
+    }
+  }
 });
-const DrawerFrame = styled(YStack, {
-  name: "DrawerFrame",
+const SheetOverlay = SheetOverlayFrame.extractable(({ __scopeSheet, ...props }) => {
+  const context = useSheetContext(SHEET_HANDLE_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 SheetFrame = styled(YStack, {
+  name: "SheetFrame",
   flex: 1,
   backgroundColor: "$background",
   borderTopLeftRadius: "$4",
   borderTopRightRadius: "$4",
   padding: "$4",
-  width: "100%"
+  width: "100%",
+  pointerEvents: "auto"
 });
-const useIsSSR = () => {
-  const [val, setVal] = useState(isWeb ? isSSR : false);
-  useEffect(() => {
-    if (isWeb && !isSSR) {
-      setVal(false);
-    }
-  }, []);
-  return val;
-};
-const Drawer = withStaticProperties(themeable(forwardRef((props, ref) => {
+const HIDDEN_SIZE = 1e4;
+const Sheet = withStaticProperties(themeable(forwardRef((props, ref) => {
+  var _a;
   const {
-    __scopeDrawer,
+    __scopeSheet,
     snapPoints: snapPointsProp = [80, 10],
+    open: openProp,
+    defaultOpen,
     children: childrenProp,
     position: positionProp,
     onChangePosition,
+    onChangeOpen,
     defaultPosition,
-    ...rest
+    dismissOnOverlayPress = true,
+    animationConfig,
+    disableDrag: disableDragProp,
+    modal
   } = props;
-  const isServerSide = useIsSSR();
-  const [position, setPosition] = useControllableState({
+  const controller = useContext(SheetControllerContext);
+  const isHidden = (controller == null ? void 0 : controller.hidden) || false;
+  const disableDrag = disableDragProp != null ? disableDragProp : controller == null ? void 0 : controller.disableDrag;
+  const themeName = useThemeName();
+  const onChangeOpenInternal = (val) => {
+    var _a2;
+    (_a2 = controller == null ? void 0 : controller.onChangeOpen) == null ? void 0 : _a2.call(controller, val);
+    onChangeOpen == null ? void 0 : onChangeOpen(val);
+  };
+  const [open, setOpen] = useControllableState({
+    prop: (_a = controller == null ? void 0 : controller.open) != null ? _a : openProp,
+    defaultProp: defaultOpen || true,
+    onChange: onChangeOpenInternal,
+    strategy: controller ? "most-recent-wins" : "prop-wins"
+  });
+  const [frameSize, setFrameSize] = useState(0);
+  const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)]);
+  const [position_, setPosition] = useControllableState({
     prop: positionProp,
-    defaultProp: defaultPosition || 0,
-    onChange: onChangePosition,
-    strategy: "most-recent-wins"
+    defaultProp: defaultPosition || (open ? 0 : -1),
+    onChange: onChangePosition
   });
-  const [layout, setLayout] = useState();
+  const position = open === false ? -1 : position_;
   const positionValue = useRef();
   if (!positionValue.current) {
-    positionValue.current = new Animated.Value(position);
-  }
-  const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)]);
-  if (isServerSide) {
-    return null;
+    positionValue.current = new Animated.Value(HIDDEN_SIZE);
   }
+  const [isResizing, setIsResizing] = useState(true);
+  useLayoutEffect(() => {
+    if (!isResizing) {
+      setIsResizing(true);
+    }
+  }, [modal]);
   const spring = useRef(null);
   function stopSpring() {
-    var _a;
-    (_a = spring.current) == null ? void 0 : _a.stop();
+    var _a2;
+    (_a2 = spring.current) == null ? void 0 : _a2.stop();
     spring.current = null;
   }
-  const positions = useMemo(() => snapPoints.map((point) => getYForPosition(point, layout)), [layout, snapPoints]);
-  const animateTo = useCallback((position2) => {
-    if (!positionValue.current)
+  const shouldSetPositionOpen = open && position < 0;
+  useEffect(() => {
+    if (shouldSetPositionOpen) {
+      setPosition(0);
+    }
+  }, [setPosition, shouldSetPositionOpen]);
+  const positions = useMemo(() => snapPoints.map((point) => getPercentSize(point, frameSize)), [frameSize, snapPoints]);
+  const animateTo = useEvent((position2) => {
+    const pos = positionValue.current;
+    if (isHidden && open)
+      return;
+    if (!pos)
+      return;
+    if (frameSize === 0)
+      return;
+    const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize;
+    const toValue = isHidden || position2 === -1 ? hiddenValue : positions[position2];
+    if (pos["_value"] === toValue)
       return;
-    const toValue = positions[position2];
     stopSpring();
-    spring.current = Animated.spring(positionValue.current, {
+    if (isHidden || isResizing) {
+      if (isResizing) {
+        setIsResizing(false);
+      }
+      Animated.timing(pos, {
+        useNativeDriver: !isWeb,
+        toValue,
+        duration: 0
+      }).start();
+      return;
+    }
+    const overshootClamping = pos["_value"] === HIDDEN_SIZE;
+    spring.current = Animated.spring(pos, {
       useNativeDriver: !isWeb,
-      toValue
+      toValue,
+      overshootClamping,
+      ...animationConfig
     });
     spring.current.start(({ finished }) => finished && stopSpring());
-  }, [positions]);
+  });
   useLayoutEffect(() => {
     animateTo(position);
-  }, [position, animateTo]);
+  }, [isHidden, frameSize, position, animateTo]);
   const panResponder = useMemo(() => {
-    if (!layout)
+    if (disableDrag)
+      return;
+    if (!frameSize)
       return;
-    console.log("setup pan");
     const pos = positionValue.current;
     const minY = positions[0];
     let startY = pos["_value"];
+    function makeUnselectable(val) {
+      if (!selectionStyleSheet)
+        return;
+      if (!val) {
+        selectionStyleSheet.innerText = ``;
+      } else {
+        selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`;
+      }
+    }
+    const finish = (_e, { vy, dy }) => {
+      makeUnselectable(false);
+      const at = dy + startY;
+      const end = at + frameSize * vy * 0.33;
+      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);
+    };
     return PanResponder.create({
       onMoveShouldSetPanResponder: (_e, { dy }) => {
         return Math.abs(dy) > 6;
       },
       onPanResponderGrant: () => {
+        makeUnselectable(true);
         stopSpring();
         startY = pos["_value"];
       },
@@ -131,72 +245,75 @@ const Drawer = withStaticProperties(themeable(forwardRef((props, ref) => {
         const to = dy + startY;
         pos.setValue(resisted(to, minY));
       },
-      onPanResponderRelease: (_e, { vy, dy }) => {
-        const at = dy + startY;
-        const end = at + layout.height * vy * 0.33;
-        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);
-      }
+      onPanResponderEnd: finish,
+      onPanResponderTerminate: finish,
+      onPanResponderRelease: finish
     });
-  }, [layout, positions, setPosition]);
+  }, [disableDrag, animateTo, frameSize, positions, setPosition]);
   let handleComponent = null;
-  let backdropComponent = null;
+  let overlayComponent = null;
   let frameComponent = null;
   React.Children.forEach(childrenProp, (child) => {
-    var _a;
+    var _a2, _b;
     if (isValidElement(child)) {
-      switch ((_a = child.type) == null ? void 0 : _a["staticConfig"].componentName) {
-        case "DrawerHandle":
+      const name = (_b = (_a2 = child.type) == null ? void 0 : _a2["staticConfig"]) == null ? void 0 : _b.componentName;
+      switch (name) {
+        case "SheetHandle":
           handleComponent = child;
           break;
-        case "DrawerFrame":
+        case "SheetFrame":
           frameComponent = child;
           break;
-        case "DrawerBackdrop":
-          backdropComponent = child;
+        case "SheetOverlay":
+          overlayComponent = child;
           break;
         default:
-          console.warn("Warning: passed invalid child to Drawer", child);
+          console.warn("Warning: passed invalid child to Sheet", child);
       }
     }
   });
-  return <DrawerProvider scope={__scopeDrawer} position={position} snapPoints={snapPoints} setPosition={setPosition}>
-    {backdropComponent}
-    {handleComponent}
-    <Animated.View {...panResponder == null ? void 0 : panResponder.panHandlers} onLayout={(e) => {
-      setLayout(e.nativeEvent.layout);
+  const preventShown = (controller == null ? void 0 : controller.hidden) && (controller == null ? void 0 : controller.open);
+  if (preventShown) {
+    return null;
+  }
+  const contents = <SheetProvider dismissOnOverlayPress={dismissOnOverlayPress} open={open} hidden={isHidden} scope={__scopeSheet} position={position} snapPoints={snapPoints} setPosition={setPosition} setOpen={setOpen}>
+    {isResizing ? null : overlayComponent}
+    {isHidden ? null : handleComponent}
+    <Animated.View ref={ref} {...panResponder == null ? void 0 : panResponder.panHandlers} onLayout={(e) => {
+      const next = e.nativeEvent.layout.height;
+      setFrameSize((prev) => {
+        const isBigChange = Math.abs(prev - next) > 50;
+        setIsResizing(isBigChange);
+        return next;
+      });
     }} style={{
+      position: "absolute",
+      zIndex: 10,
       width: "100%",
       height: "100%",
-      transform: [{ translateY: positionValue.current }]
-    }}>{frameComponent}</Animated.View>
-  </DrawerProvider>;
+      transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : positionValue.current }]
+    }}>{isResizing ? null : frameComponent}</Animated.View>
+  </SheetProvider>;
+  if (modal) {
+    return <Portal><Theme name={themeName}>{contents}</Theme></Portal>;
+  }
+  return contents;
 }), {
-  componentName: "Drawer"
+  componentName: "Sheet"
 }), {
-  Handle: DrawerHandle,
-  Frame: DrawerFrame,
-  Backdrop: DrawerBackdrop
+  Handle: SheetHandle,
+  Frame: SheetFrame,
+  Overlay: SheetOverlay
 });
-function getYForPosition(point, layout) {
-  if (!layout)
+function getPercentSize(point, frameSize) {
+  if (!frameSize)
     return 0;
   if (point === void 0) {
     console.warn(`No snapPoint`);
     return 0;
   }
   const pct = point / 100;
-  const next = layout.height - pct * layout.height;
+  const next = frameSize - pct * frameSize;
   return next;
 }
 function resisted(y, minY, maxOverflow = 25) {
@@ -209,12 +326,38 @@ function resisted(y, minY, maxOverflow = 25) {
   }
   return y;
 }
+const SheetControllerContext = createContext(null);
+const SheetController = ({
+  children,
+  onChangeOpen: onChangeOpenProp,
+  ...value
+}) => {
+  const onChangeOpen = useEvent(onChangeOpenProp);
+  const memoValue = useMemo(() => ({
+    open: value.open,
+    hidden: value.hidden,
+    disableDrag: value.disableDrag,
+    onChangeOpen
+  }), [onChangeOpen, value.open, value.hidden, value.disableDrag]);
+  return <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>;
+};
+function useLastRenderValue(val) {
+  const ref = useRef(val);
+  useIsomorphicLayoutEffect(() => {
+    return () => {
+      ref.current = val;
+    };
+  });
+  return ref.current;
+}
 export {
-  Drawer,
-  DrawerBackdrop,
-  DrawerFrame,
-  DrawerHandle,
-  DrawerHandleFrame,
-  createDrawerScope
+  Sheet,
+  SheetController,
+  SheetFrame,
+  SheetHandle,
+  SheetHandleFrame,
+  SheetOverlay,
+  SheetOverlayFrame,
+  createSheetScope
 };
 //# sourceMappingURL=Sheet.js.map

package/dist/jsx/Sheet.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Sheet.tsx"],
-  "sourcesContent": ["import { isSSR, isWeb, styled, themeable, withStaticProperties } from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { XStack, XStackProps, YStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, {\n  ReactNode,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { Animated, LayoutRectangle, PanResponder, View } from 'react-native'\n\ntype PositionChangeHandler =\n  | ((position: number) => void)\n  | React.Dispatch<React.SetStateAction<number>>\n\nconst DRAWER_NAME = 'Drawer'\nconst DRAWER_HANDLE_NAME = 'DrawerHandle'\n\nexport const DrawerHandleFrame = styled(XStack, {\n  name: DRAWER_HANDLE_NAME,\n  height: 10,\n  borderRadius: 100,\n  backgroundColor: '$background',\n  position: 'absolute',\n  pointerEvents: 'auto',\n  zIndex: 10,\n  y: -18,\n  top: 0,\n  left: '35%',\n  right: '35%',\n  opacity: 0.5,\n\n  hoverStyle: {\n    opacity: 0.7,\n  },\n})\n\nexport const DrawerHandle = DrawerHandleFrame.extractable(\n  ({ __scopeDrawer, ...props }: ScopedProps<XStackProps, 'Drawer'>) => {\n    const context = useDrawerContext(DRAWER_HANDLE_NAME, __scopeDrawer)\n\n    return (\n      <DrawerHandleFrame\n        onPress={() => {\n          const nextPos = (context.position + 1) % context.snapPoints.length\n          context.setPosition(nextPos)\n        }}\n        {...props}\n      />\n    )\n  }\n)\n\ntype DrawerContextValue = {\n  position: number\n  snapPoints: number[]\n  setPosition: React.Dispatch<React.SetStateAction<number>>\n}\n\nconst [createDrawerContext, createDrawerScope] = createContextScope(DRAWER_NAME)\nconst [DrawerProvider, useDrawerContext] = createDrawerContext<DrawerContextValue>(\n  DRAWER_NAME,\n  {} as any\n)\n\nexport const DrawerBackdrop = styled(YStack, {\n  name: 'DrawerBackdrop',\n  backgroundColor: '$color',\n  fullscreen: true,\n  opacity: 0.2,\n})\n\nexport const DrawerFrame = styled(YStack, {\n  name: 'DrawerFrame',\n  flex: 1,\n  backgroundColor: '$background',\n  borderTopLeftRadius: '$4',\n  borderTopRightRadius: '$4',\n  padding: '$4',\n  width: '100%',\n})\n\nexport type DrawerProps = ScopedProps<\n  {\n    open?: boolean\n    defaultOpen?: boolean\n    defaultPosition?: number\n    snapPoints?: number[]\n    position?: number\n    onChangePosition?: PositionChangeHandler\n    children?: ReactNode\n  },\n  'Drawer'\n>\n\nconst useIsSSR = () => {\n  const [val, setVal] = useState(isWeb ? isSSR : false)\n  useEffect(() => {\n    if (isWeb && !isSSR) {\n      setVal(false)\n    }\n  }, [])\n  return val\n}\n\nexport const Drawer = withStaticProperties(\n  themeable(\n    forwardRef<View, DrawerProps>((props, ref) => {\n      const {\n        __scopeDrawer,\n        snapPoints: snapPointsProp = [80, 10],\n        children: childrenProp,\n        position: positionProp,\n        onChangePosition,\n        defaultPosition,\n        ...rest\n      } = props\n      const isServerSide = useIsSSR()\n\n      const [position, setPosition] = useControllableState({\n        prop: positionProp,\n        defaultProp: defaultPosition || 0,\n        onChange: onChangePosition,\n        strategy: 'most-recent-wins',\n      })\n\n      const [layout, setLayout] = useState<LayoutRectangle>()\n\n      const positionValue = useRef<Animated.Value>()\n      if (!positionValue.current) {\n        positionValue.current = new Animated.Value(position)\n      }\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])\n\n      // we can put non-server side hooks after conditional because based on env\n      if (isServerSide) {\n        return null\n      }\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const spring = useRef<Animated.CompositeAnimation | null>(null)\n\n      function stopSpring() {\n        spring.current?.stop()\n        spring.current = null\n      }\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const positions = useMemo(\n        () => snapPoints.map((point) => getYForPosition(point, layout)),\n        [layout, snapPoints]\n      )\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const animateTo = useCallback(\n        (position: number) => {\n          if (!positionValue.current) return\n          const toValue = positions[position]\n          stopSpring()\n          spring.current = Animated.spring(positionValue.current, {\n            useNativeDriver: !isWeb,\n            toValue,\n          })\n          spring.current.start(({ finished }) => finished && stopSpring())\n        },\n        [positions]\n      )\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      useLayoutEffect(() => {\n        animateTo(position)\n      }, [position, animateTo])\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const panResponder = useMemo(() => {\n        if (!layout) return\n        console.log('setup pan')\n\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const pos = positionValue.current!\n        const minY = positions[0]\n        let startY = pos['_value']\n\n        return PanResponder.create({\n          onMoveShouldSetPanResponder: (_e, { dy }) => {\n            // we could do some detection of other touchables and cancel here..\n            // console.log('wut is', _e)\n            return Math.abs(dy) > 6\n          },\n          onPanResponderGrant: () => {\n            stopSpring()\n            startY = pos['_value']\n          },\n          onPanResponderMove: (_e, { dy }) => {\n            const to = dy + startY\n            pos.setValue(resisted(to, minY))\n          },\n          onPanResponderRelease: (_e, { vy, dy }) => {\n            const at = dy + startY\n            // seems liky vy goes up to about 4 at the very most (+ is down, - is up)\n            // lets base our multiplier on the total layout height\n            const end = at + layout.height * vy * 0.33\n            let closestPoint = 0\n            let dist = Infinity\n            for (let i = 0; i < positions.length; i++) {\n              const position = positions[i]\n              const curDist = end > position ? end - position : position - end\n              if (curDist < dist) {\n                dist = curDist\n                closestPoint = i\n              }\n            }\n            // have to call both because state may not change but need to snap back\n            setPosition(closestPoint)\n            animateTo(closestPoint)\n          },\n        })\n      }, [layout, positions, setPosition])\n\n      let handleComponent: React.ReactElement | null = null\n      let backdropComponent: React.ReactElement | null = null\n      let frameComponent: React.ReactElement | null = null\n\n      React.Children.forEach(childrenProp, (child) => {\n        if (isValidElement(child)) {\n          switch (child.type?.['staticConfig'].componentName) {\n            case 'DrawerHandle':\n              handleComponent = child\n              break\n            case 'DrawerFrame':\n              frameComponent = child\n              break\n            case 'DrawerBackdrop':\n              backdropComponent = child\n              break\n            default:\n              console.warn('Warning: passed invalid child to Drawer', child)\n          }\n        }\n      })\n\n      return (\n        <DrawerProvider\n          scope={__scopeDrawer}\n          position={position}\n          snapPoints={snapPoints}\n          setPosition={setPosition}\n        >\n          {backdropComponent}\n          {handleComponent}\n          <Animated.View\n            {...panResponder?.panHandlers}\n            onLayout={(e) => {\n              setLayout(e.nativeEvent.layout)\n            }}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: [{ translateY: positionValue.current }],\n            }}\n          >\n            {frameComponent}\n          </Animated.View>\n        </DrawerProvider>\n      )\n    }),\n    {\n      componentName: 'Drawer',\n    }\n  ),\n  {\n    Handle: DrawerHandle,\n    Frame: DrawerFrame,\n    Backdrop: DrawerBackdrop,\n  }\n)\n\nfunction getYForPosition(point?: number, layout?: LayoutRectangle) {\n  if (!layout) return 0\n  if (point === undefined) {\n    console.warn(`No snapPoint`)\n    return 0\n  }\n  const pct = point / 100\n  const next = layout.height - pct * layout.height\n  return next\n}\n\nfunction resisted(y: number, minY: number, maxOverflow = 25) {\n  if (y < minY) {\n    const past = minY - y\n    const pctPast = Math.min(maxOverflow, past) / maxOverflow\n    const diminishBy = 1.1 - Math.pow(0.1, pctPast)\n    const extra = -diminishBy * maxOverflow\n    return minY + extra\n  }\n  return y\n}\n\nexport { createDrawerScope }\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAMA,MAAM,cAAc;AACpB,MAAM,qBAAqB;AAEpB,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,GAAG;AAAA,EACH,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EAET,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AACF,CAAC;AAEM,MAAM,eAAe,kBAAkB,YAC5C,CAAC,EAAE,kBAAkB,YAAgD;AACnE,QAAM,UAAU,iBAAiB,oBAAoB,aAAa;AAElE,SACE,CAAC,kBACC,SAAS,MAAM;AACb,UAAM,UAAW,SAAQ,WAAW,KAAK,QAAQ,WAAW;AAC5D,YAAQ,YAAY,OAAO;AAAA,EAC7B,OACI,OACN;AAEJ,CACF;AAQA,MAAM,CAAC,qBAAqB,qBAAqB,mBAAmB,WAAW;AAC/E,MAAM,CAAC,gBAAgB,oBAAoB,oBACzC,aACA,CAAC,CACH;AAEO,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAEM,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AACT,CAAC;AAeD,MAAM,WAAW,MAAM;AACrB,QAAM,CAAC,KAAK,UAAU,SAAS,QAAQ,QAAQ,KAAK;AACpD,YAAU,MAAM;AACd,QAAI,SAAS,CAAC,OAAO;AACnB,aAAO,KAAK;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AAEO,MAAM,SAAS,qBACpB,UACE,WAA8B,CAAC,OAAO,QAAQ;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,iBAAiB,CAAC,IAAI,EAAE;AAAA,IACpC,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,OACG;AAAA,MACD;AACJ,QAAM,eAAe,SAAS;AAE9B,QAAM,CAAC,UAAU,eAAe,qBAAqB;AAAA,IACnD,MAAM;AAAA,IACN,aAAa,mBAAmB;AAAA,IAChC,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,CAAC,QAAQ,aAAa,SAA0B;AAEtD,QAAM,gBAAgB,OAAuB;AAC7C,MAAI,CAAC,cAAc,SAAS;AAC1B,kBAAc,UAAU,IAAI,SAAS,MAAM,QAAQ;AAAA,EACrD;AAGA,QAAM,aAAa,QAAQ,MAAM,gBAAgB,CAAC,KAAK,UAAU,cAAc,CAAC,CAAC;AAGjF,MAAI,cAAc;AAChB,WAAO;AAAA,EACT;AAGA,QAAM,SAAS,OAA2C,IAAI;AAE9D,wBAAsB;AAtJ5B;AAuJQ,iBAAO,YAAP,mBAAgB;AAChB,WAAO,UAAU;AAAA,EACnB;AAGA,QAAM,YAAY,QAChB,MAAM,WAAW,IAAI,CAAC,UAAU,gBAAgB,OAAO,MAAM,CAAC,GAC9D,CAAC,QAAQ,UAAU,CACrB;AAGA,QAAM,YAAY,YAChB,CAAC,cAAqB;AACpB,QAAI,CAAC,cAAc;AAAS;AAC5B,UAAM,UAAU,UAAU;AAC1B,eAAW;AACX,WAAO,UAAU,SAAS,OAAO,cAAc,SAAS;AAAA,MACtD,iBAAiB,CAAC;AAAA,MAClB;AAAA,IACF,CAAC;AACD,WAAO,QAAQ,MAAM,CAAC,EAAE,eAAe,YAAY,WAAW,CAAC;AAAA,EACjE,GACA,CAAC,SAAS,CACZ;AAGA,kBAAgB,MAAM;AACpB,cAAU,QAAQ;AAAA,EACpB,GAAG,CAAC,UAAU,SAAS,CAAC;AAGxB,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ;AACb,YAAQ,IAAI,WAAW;AAGvB,UAAM,MAAM,cAAc;AAC1B,UAAM,OAAO,UAAU;AACvB,QAAI,SAAS,IAAI;AAEjB,WAAO,aAAa,OAAO;AAAA,MACzB,6BAA6B,CAAC,IAAI,EAAE,SAAS;AAG3C,eAAO,KAAK,IAAI,EAAE,IAAI;AAAA,MACxB;AAAA,MACA,qBAAqB,MAAM;AACzB,mBAAW;AACX,iBAAS,IAAI;AAAA,MACf;AAAA,MACA,oBAAoB,CAAC,IAAI,EAAE,SAAS;AAClC,cAAM,KAAK,KAAK;AAChB,YAAI,SAAS,SAAS,IAAI,IAAI,CAAC;AAAA,MACjC;AAAA,MACA,uBAAuB,CAAC,IAAI,EAAE,IAAI,SAAS;AACzC,cAAM,KAAK,KAAK;AAGhB,cAAM,MAAM,KAAK,OAAO,SAAS,KAAK;AACtC,YAAI,eAAe;AACnB,YAAI,OAAO;AACX,iBAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AACzC,gBAAM,YAAW,UAAU;AAC3B,gBAAM,UAAU,MAAM,YAAW,MAAM,YAAW,YAAW;AAC7D,cAAI,UAAU,MAAM;AAClB,mBAAO;AACP,2BAAe;AAAA,UACjB;AAAA,QACF;AAEA,oBAAY,YAAY;AACxB,kBAAU,YAAY;AAAA,MACxB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,WAAW,WAAW,CAAC;AAEnC,MAAI,kBAA6C;AACjD,MAAI,oBAA+C;AACnD,MAAI,iBAA4C;AAEhD,QAAM,SAAS,QAAQ,cAAc,CAAC,UAAU;AAvOtD;AAwOQ,QAAI,eAAe,KAAK,GAAG;AACzB,cAAQ,YAAM,SAAN,mBAAa,gBAAgB;AAAA,aAC9B;AACH,4BAAkB;AAClB;AAAA,aACG;AACH,2BAAiB;AACjB;AAAA,aACG;AACH,8BAAoB;AACpB;AAAA;AAEA,kBAAQ,KAAK,2CAA2C,KAAK;AAAA;AAAA,IAEnE;AAAA,EACF,CAAC;AAED,SACE,CAAC,eACC,OAAO,eACP,UAAU,UACV,YAAY,YACZ,aAAa;AAAA,KAEZ;AAAA,KACA;AAAA,IACD,CAAC,SAAS,SACJ,6CAAc,aAClB,UAAU,CAAC,MAAM;AACf,gBAAU,EAAE,YAAY,MAAM;AAAA,IAChC,GACA,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,YAAY,cAAc,QAAQ,CAAC;AAAA,IACnD,IAEC,eACH,EAZC,SAAS;AAAA,EAaZ,EArBC;AAuBL,CAAC,GACD;AAAA,EACE,eAAe;AACjB,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ,CACF;AAEA,yBAAyB,OAAgB,QAA0B;AACjE,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,UAAU,QAAW;AACvB,YAAQ,KAAK,cAAc;AAC3B,WAAO;AAAA,EACT;AACA,QAAM,MAAM,QAAQ;AACpB,QAAM,OAAO,OAAO,SAAS,MAAM,OAAO;AAC1C,SAAO;AACT;AAEA,kBAAkB,GAAW,MAAc,cAAc,IAAI;AAC3D,MAAI,IAAI,MAAM;AACZ,UAAM,OAAO,OAAO;AACpB,UAAM,UAAU,KAAK,IAAI,aAAa,IAAI,IAAI;AAC9C,UAAM,aAAa,MAAM,KAAK,IAAI,KAAK,OAAO;AAC9C,UAAM,QAAQ,CAAC,aAAa;AAC5B,WAAO,OAAO;AAAA,EAChB;AACA,SAAO;AACT;",
+  "sourcesContent": ["import {\n  GetProps,\n  Theme,\n  isClient,\n  isWeb,\n  mergeEvent,\n  styled,\n  themeable,\n  useEvent,\n  useIsomorphicLayoutEffect,\n  useThemeName,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { Portal } from '@tamagui/portal'\nimport { XStack, XStackProps, YStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, {\n  ReactNode,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport {\n  Animated,\n  GestureResponderEvent,\n  PanResponder,\n  PanResponderGestureState,\n  View,\n} from 'react-native'\n\nconst SHEET_NAME = 'Sheet'\nconst SHEET_HANDLE_NAME = 'SheetHandle'\n\nexport type SheetProps = ScopedProps<\n  {\n    open?: boolean\n    defaultOpen?: boolean\n    onChangeOpen?: OpenChangeHandler\n    position?: number\n    defaultPosition?: number\n    snapPoints?: number[]\n    onChangePosition?: PositionChangeHandler\n    children?: ReactNode\n    dismissOnOverlayPress?: boolean\n    animationConfig?: Animated.SpringAnimationConfig\n    disableDrag?: boolean\n    modal?: boolean\n  },\n  'Sheet'\n>\n\ntype PositionChangeHandler =\n  | ((position: number) => void)\n  | React.Dispatch<React.SetStateAction<number>>\n\ntype OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>\n\ntype SheetContextValue = Required<\n  Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>\n> & {\n  hidden: boolean\n  setPosition: React.Dispatch<React.SetStateAction<number>>\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nconst [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)\nconst [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(\n  SHEET_NAME,\n  {} as any\n)\n\nexport const SheetHandleFrame = styled(XStack, {\n  name: SHEET_HANDLE_NAME,\n  height: 10,\n  borderRadius: 100,\n  backgroundColor: '$background',\n  position: 'absolute',\n  pointerEvents: 'auto',\n  zIndex: 10,\n  y: -18,\n  top: 0,\n  left: '35%',\n  right: '35%',\n  opacity: 0.5,\n\n  hoverStyle: {\n    opacity: 0.7,\n  },\n})\n\ntype SheetScopedProps<A> = ScopedProps<A, 'Sheet'>\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n  ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n    const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n\n    if (context.open === false) {\n      return null\n    }\n\n    return (\n      <SheetHandleFrame\n        onPress={() => {\n          const nextPos = (context.position + 1) % context.snapPoints.length\n          context.setPosition(nextPos)\n        }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const SheetOverlayFrame = styled(YStack, {\n  name: 'SheetOverlay',\n  // TODO this should be $background without opacity and just customized by theme\n  backgroundColor: '$color',\n  fullscreen: true,\n  opacity: 0.2,\n  zIndex: 0,\n\n  variants: {\n    closed: {\n      true: {\n        opacity: 0,\n        pointerEvents: 'none',\n      },\n      false: {\n        pointerEvents: 'auto',\n      },\n      // TODO still have as const bug\n    } as const,\n  },\n})\n\nexport type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>\n\nexport const SheetOverlay = SheetOverlayFrame.extractable(\n  ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => {\n    const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n    return (\n      <SheetOverlayFrame\n        closed={!context.open || context.hidden}\n        {...props}\n        onPress={mergeEvent(\n          props.onPress,\n          context.dismissOnOverlayPress\n            ? () => {\n                context.setOpen(false)\n              }\n            : undefined\n        )}\n      />\n    )\n  }\n)\n\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n  document.head.appendChild(selectionStyleSheet)\n}\n\nexport const SheetFrame = styled(YStack, {\n  name: 'SheetFrame',\n  flex: 1,\n  backgroundColor: '$background',\n  borderTopLeftRadius: '$4',\n  borderTopRightRadius: '$4',\n  padding: '$4',\n  width: '100%',\n  pointerEvents: 'auto',\n})\n\n// set all the way off screen\nconst HIDDEN_SIZE = 10_000\n\nexport const Sheet = withStaticProperties(\n  themeable(\n    forwardRef<View, SheetProps>((props, ref) => {\n      const {\n        __scopeSheet,\n        snapPoints: snapPointsProp = [80, 10],\n        open: openProp,\n        defaultOpen,\n        children: childrenProp,\n        position: positionProp,\n        onChangePosition,\n        onChangeOpen,\n        defaultPosition,\n        dismissOnOverlayPress = true,\n        animationConfig,\n        disableDrag: disableDragProp,\n        modal,\n      } = props\n\n      // allows for sheets to be controlled by other components\n      const controller = useContext(SheetControllerContext)\n      const isHidden = controller?.hidden || false\n      const disableDrag = disableDragProp ?? controller?.disableDrag\n      const themeName = useThemeName()\n\n      const onChangeOpenInternal = (val: boolean) => {\n        controller?.onChangeOpen?.(val)\n        onChangeOpen?.(val)\n      }\n\n      const [open, setOpen] = useControllableState({\n        prop: controller?.open ?? openProp,\n        defaultProp: defaultOpen || true,\n        onChange: onChangeOpenInternal,\n        strategy: controller ? 'most-recent-wins' : 'prop-wins',\n      })\n\n      const [frameSize, setFrameSize] = useState<number>(0)\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])\n\n      // lets set -1 to be always the \"open = false\" position\n      const [position_, setPosition] = useControllableState({\n        prop: positionProp,\n        defaultProp: defaultPosition || (open ? 0 : -1),\n        onChange: onChangePosition,\n      })\n      const position = open === false ? -1 : position_\n\n      const positionValue = useRef<Animated.Value>()\n      if (!positionValue.current) {\n        positionValue.current = new Animated.Value(HIDDEN_SIZE)\n      }\n\n      const [isResizing, setIsResizing] = useState(true)\n      useLayoutEffect(() => {\n        if (!isResizing) {\n          setIsResizing(true)\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [modal])\n\n      const spring = useRef<Animated.CompositeAnimation | null>(null)\n      function stopSpring() {\n        spring.current?.stop()\n        spring.current = null\n      }\n\n      // open must set position\n      const shouldSetPositionOpen = open && position < 0\n      useEffect(() => {\n        if (shouldSetPositionOpen) {\n          setPosition(0)\n        }\n      }, [setPosition, shouldSetPositionOpen])\n\n      const positions = useMemo(\n        () => snapPoints.map((point) => getPercentSize(point, frameSize)),\n        [frameSize, snapPoints]\n      )\n\n      const animateTo = useEvent((position: number) => {\n        const pos = positionValue.current\n        if (isHidden && open) return\n        if (!pos) return\n        if (frameSize === 0) return\n        const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize\n        const toValue = isHidden || position === -1 ? hiddenValue : positions[position]\n        if (pos['_value'] === toValue) return\n        stopSpring()\n        if (isHidden || isResizing) {\n          if (isResizing) {\n            setIsResizing(false)\n          }\n          Animated.timing(pos, {\n            useNativeDriver: !isWeb,\n            toValue,\n            duration: 0,\n          }).start()\n          return\n        }\n        // dont bounce on initial measure to bottom\n        const overshootClamping = pos['_value'] === HIDDEN_SIZE\n        spring.current = Animated.spring(pos, {\n          useNativeDriver: !isWeb,\n          toValue,\n          overshootClamping,\n          ...animationConfig,\n        })\n        spring.current.start(({ finished }) => finished && stopSpring())\n      })\n\n      useLayoutEffect(() => {\n        animateTo(position)\n      }, [isHidden, frameSize, position, animateTo])\n\n      const panResponder = useMemo(() => {\n        if (disableDrag) return\n        if (!frameSize) return\n\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const pos = positionValue.current!\n        const minY = positions[0]\n        let startY = pos['_value']\n\n        function makeUnselectable(val: boolean) {\n          if (!selectionStyleSheet) return\n          if (!val) {\n            selectionStyleSheet.innerText = ``\n          } else {\n            selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`\n          }\n        }\n\n        const finish = (_e: GestureResponderEvent, { vy, dy }: PanResponderGestureState) => {\n          makeUnselectable(false)\n          const at = dy + startY\n          // seems liky vy goes up to about 4 at the very most (+ is down, - is up)\n          // lets base our multiplier on the total layout height\n          const end = at + frameSize * vy * 0.33\n          let closestPoint = 0\n          let dist = Infinity\n          for (let i = 0; i < positions.length; i++) {\n            const position = positions[i]\n            const curDist = end > position ? end - position : position - end\n            if (curDist < dist) {\n              dist = curDist\n              closestPoint = i\n            }\n          }\n          // have to call both because state may not change but need to snap back\n          setPosition(closestPoint)\n          animateTo(closestPoint)\n        }\n\n        return PanResponder.create({\n          onMoveShouldSetPanResponder: (_e, { dy }) => {\n            // we could do some detection of other touchables and cancel here..\n            return Math.abs(dy) > 6\n          },\n          onPanResponderGrant: () => {\n            makeUnselectable(true)\n            stopSpring()\n            startY = pos['_value']\n          },\n          onPanResponderMove: (_e, { dy }) => {\n            const to = dy + startY\n            pos.setValue(resisted(to, minY))\n          },\n          onPanResponderEnd: finish,\n          onPanResponderTerminate: finish,\n          onPanResponderRelease: finish,\n        })\n      }, [disableDrag, animateTo, frameSize, positions, setPosition])\n\n      let handleComponent: React.ReactElement | null = null\n      let overlayComponent: React.ReactElement | null = null\n      let frameComponent: React.ReactElement | null = null\n\n      // TODO do more radix-like and don't require direct children descendents\n      React.Children.forEach(childrenProp, (child) => {\n        if (isValidElement(child)) {\n          const name = child.type?.['staticConfig']?.componentName\n          switch (name) {\n            case 'SheetHandle':\n              handleComponent = child\n              break\n            case 'SheetFrame':\n              frameComponent = child\n              break\n            case 'SheetOverlay':\n              overlayComponent = child\n              break\n            default:\n              console.warn('Warning: passed invalid child to Sheet', child)\n          }\n        }\n      })\n\n      const preventShown = controller?.hidden && controller?.open\n\n      if (preventShown) {\n        return null\n      }\n\n      const contents = (\n        <SheetProvider\n          dismissOnOverlayPress={dismissOnOverlayPress}\n          open={open}\n          hidden={isHidden}\n          scope={__scopeSheet}\n          position={position}\n          snapPoints={snapPoints}\n          setPosition={setPosition}\n          setOpen={setOpen}\n        >\n          {isResizing ? null : overlayComponent}\n          {/* no fancy hidden animation etc for handle for now */}\n          {isHidden ? null : handleComponent}\n          <Animated.View\n            ref={ref}\n            {...panResponder?.panHandlers}\n            onLayout={(e) => {\n              const next = e.nativeEvent.layout.height\n              setFrameSize((prev) => {\n                const isBigChange = Math.abs(prev - next) > 50\n                setIsResizing(isBigChange)\n                return next\n              })\n            }}\n            // pointerEvents={open ? 'auto' : 'none'}\n            style={{\n              position: 'absolute',\n              zIndex: 10,\n              width: '100%',\n              height: '100%',\n              transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : positionValue.current }],\n            }}\n          >\n            {isResizing ? null : frameComponent}\n          </Animated.View>\n        </SheetProvider>\n      )\n\n      if (modal) {\n        return (\n          <Portal>\n            <Theme name={themeName}>{contents}</Theme>\n          </Portal>\n        )\n      }\n\n      return contents\n    }),\n    {\n      componentName: 'Sheet',\n    }\n  ),\n  {\n    Handle: SheetHandle,\n    Frame: SheetFrame,\n    Overlay: SheetOverlay,\n  }\n)\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n  if (!frameSize) return 0\n  if (point === undefined) {\n    console.warn(`No snapPoint`)\n    return 0\n  }\n  const pct = point / 100\n  const next = frameSize - pct * frameSize\n  return next\n}\n\nfunction resisted(y: number, minY: number, maxOverflow = 25) {\n  if (y < minY) {\n    const past = minY - y\n    const pctPast = Math.min(maxOverflow, past) / maxOverflow\n    const diminishBy = 1.1 - Math.pow(0.1, pctPast)\n    const extra = -diminishBy * maxOverflow\n    return minY + extra\n  }\n  return y\n}\n\ntype SheetControllerContextValue = {\n  disableDrag?: boolean\n  open?: boolean\n  // hide without \"closing\" to prevent re-animation when shown again\n  hidden?: boolean\n  onChangeOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n  children,\n  onChangeOpen: onChangeOpenProp,\n  ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n  const onChangeOpen = useEvent(onChangeOpenProp)\n\n  const memoValue = useMemo(\n    () => ({\n      open: value.open,\n      hidden: value.hidden,\n      disableDrag: value.disableDrag,\n      onChangeOpen,\n    }),\n    [onChangeOpen, value.open, value.hidden, value.disableDrag]\n  )\n\n  return (\n    <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>\n  )\n}\n\nfunction useLastRenderValue<A>(val: A): A | undefined {\n  const ref = useRef<A>(val)\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      ref.current = val\n    }\n  })\n  return ref.current as A\n}\n\nexport { createSheetScope }\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/sheet",
-  "version": "1.0.1-beta.100",
+  "version": "1.0.1-beta.101",
   "sideEffects": [
     "*.css"
   ],
@@ -20,10 +20,10 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.100",
-    "@tamagui/create-context": "^1.0.1-beta.100",
-    "@tamagui/stacks": "^1.0.1-beta.100",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.100"
+    "@tamagui/core": "^1.0.1-beta.101",
+    "@tamagui/create-context": "^1.0.1-beta.101",
+    "@tamagui/stacks": "^1.0.1-beta.101",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.101"
   },
   "peerDependencies": {
     "react": "*",
@@ -31,7 +31,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.100",
+    "@tamagui/build": "^1.0.1-beta.101",
     "react": "*",
     "react-dom": "*",
     "react-native": "*"