@tamagui/sheet 1.0.1-beta.151 → 1.0.1-beta.152

package/dist/jsx/Sheet.js

@@ -57,14 +57,16 @@ const SheetHandleFrame = styled(XStack, {
     }
   }
 });
-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 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(YStack, {
   name: SHEET_OVERLAY_NAME,
@@ -84,12 +86,17 @@ const SheetOverlayFrame = styled(YStack, {
     }
   }
 });
-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 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);
@@ -105,297 +112,318 @@ const SheetFrameFrame = styled(YStack, {
   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 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 Sheet = withStaticProperties(themeable(forwardRef(function Sheet2(props, ref) {
-  const {
-    __scopeSheet,
-    snapPoints: snapPointsProp = [80],
-    open: openProp,
-    defaultOpen,
-    children: childrenProp,
-    position: positionProp,
-    onChangePosition,
-    onChangeOpen,
-    defaultPosition,
-    dismissOnOverlayPress = true,
-    animationConfig,
-    dismissOnSnapToBottom = false,
-    disableDrag: disableDragProp,
-    modal = false,
-    handleDisableScroll = true
-  } = 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 driver = getAnimationDriver();
-  if (!driver) {
-    throw new Error(`Must set animations in tamagui.config.ts`);
-  }
-  const controller = useContext(SheetControllerContext);
-  const isHidden = controller?.hidden || false;
-  const disableDrag = disableDragProp ?? controller?.disableDrag;
-  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 onChangeOpenInternal = (val) => {
-    controller?.onChangeOpen?.(val);
-    onChangeOpen?.(val);
-  };
-  const [open, setOpen] = useControllableState({
-    prop: controller?.open ?? openProp,
-    defaultProp: defaultOpen || true,
-    onChange: onChangeOpenInternal,
-    strategy: "most-recent-wins"
-  });
-  const [frameSize, setFrameSize] = useState(0);
-  const snapPoints = useMemo(() => dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp, [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]);
-  const [position_, setPosition_] = useControllableState({
-    prop: positionProp,
-    defaultProp: defaultPosition || (open ? 0 : -1),
-    onChange: onChangePosition,
-    strategy: "most-recent-wins"
-  });
-  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 animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE);
-  const at = useRef(0);
-  driver.useAnimatedNumberReaction(animatedNumber, (value) => {
-    at.current = value;
-    scrollBridge.paneY = value;
-  });
-  const [isResizing, setIsResizing] = useState(true);
-  useIsomorphicLayoutEffect(() => {
-    if (!isResizing) {
-      setIsResizing(true);
-    }
-  }, [modal]);
-  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 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 || isResizing) {
-      if (isResizing) {
-        setIsResizing(false);
+const Sheet = withStaticProperties(
+  themeable(
+    forwardRef(function Sheet2(props, ref) {
+      const {
+        __scopeSheet,
+        snapPoints: snapPointsProp = [80],
+        open: openProp,
+        defaultOpen,
+        children: childrenProp,
+        position: positionProp,
+        onChangePosition,
+        onChangeOpen,
+        defaultPosition,
+        dismissOnOverlayPress = true,
+        animationConfig,
+        dismissOnSnapToBottom = false,
+        disableDrag: disableDragProp,
+        modal = false,
+        handleDisableScroll = true
+      } = 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 driver = getAnimationDriver();
+      if (!driver) {
+        throw new Error(`Must set animations in tamagui.config.ts`);
       }
-      animatedNumber.setValue(toValue, {
-        type: "timing",
-        duration: 0
+      const controller = useContext(SheetControllerContext);
+      const isHidden = controller?.hidden || false;
+      const disableDrag = disableDragProp ?? controller?.disableDrag;
+      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 onChangeOpenInternal = (val) => {
+        controller?.onChangeOpen?.(val);
+        onChangeOpen?.(val);
+      };
+      const [open, setOpen] = useControllableState({
+        prop: controller?.open ?? openProp,
+        defaultProp: defaultOpen || true,
+        onChange: onChangeOpenInternal,
+        strategy: "most-recent-wins"
       });
-      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 panResponder = useMemo(() => {
-    if (disableDrag)
-      return;
-    if (!frameSize)
-      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 [frameSize, setFrameSize] = useState(0);
+      const snapPoints = useMemo(
+        () => dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp,
+        [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]
+      );
+      const [position_, setPosition_] = useControllableState({
+        prop: positionProp,
+        defaultProp: defaultPosition || (open ? 0 : -1),
+        onChange: onChangePosition,
+        strategy: "most-recent-wins"
+      });
+      const position = open === false ? -1 : position_;
+      if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {
+        setPosition_(0);
       }
-    }
-    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;
+      const setPosition = useCallback(
+        (next) => {
+          if (dismissOnSnapToBottom && next === snapPoints.length - 1) {
+            setOpen(false);
+          } else {
+            setPosition_(next);
+          }
+        },
+        [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]
+      );
+      const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE);
+      const at = useRef(0);
+      driver.useAnimatedNumberReaction(animatedNumber, (value) => {
+        at.current = value;
+        scrollBridge.paneY = value;
+      });
+      const [isResizing, setIsResizing] = useState(true);
+      useIsomorphicLayoutEffect(() => {
+        if (!isResizing) {
+          setIsResizing(true);
+        }
+      }, [modal]);
+      function stopSpring() {
+        animatedNumber.stop();
+        if (scrollBridge.onFinishAnimate) {
+          scrollBridge.onFinishAnimate();
+          scrollBridge.onFinishAnimate = void 0;
         }
       }
-      setPosition(closestPoint);
-      animateTo(closestPoint);
-    };
-    const finish = (_e, state) => {
-      release({
-        vy: state.vy,
-        dragAt: state.dy
+      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 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 || isResizing) {
+          if (isResizing) {
+            setIsResizing(false);
+          }
+          animatedNumber.setValue(toValue, {
+            type: "timing",
+            duration: 0
+          });
+          at.current = toValue;
+          return;
+        }
+        const overshootClamping = at.current === HIDDEN_SIZE;
+        animatedNumber.setValue(toValue, {
+          ...animationConfig,
+          type: "spring",
+          overshootClamping
+        });
       });
-    };
-    let previouslyScrolling = false;
-    const onMoveShouldSet = (_e, { dy }) => {
-      const isScrolled = scrollBridge.y !== 0;
-      if (isScrolled) {
-        previouslyScrolling = true;
-        return false;
-      }
-      if (previouslyScrolling) {
-        previouslyScrolling = false;
-        return true;
-      }
-      const isDraggingUp = dy < 0;
-      const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY;
-      if (isAtTop) {
-        if (!isScrolled && isDraggingUp) {
-          return false;
+      useIsomorphicLayoutEffect(() => {
+        animateTo(position);
+      }, [isHidden, frameSize, position, animateTo]);
+      const panResponder = useMemo(
+        () => {
+          if (disableDrag)
+            return;
+          if (!frameSize)
+            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;
+            if (isScrolled) {
+              previouslyScrolling = true;
+              return false;
+            }
+            if (previouslyScrolling) {
+              previouslyScrolling = false;
+              return true;
+            }
+            const isDraggingUp = dy < 0;
+            const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY;
+            if (isAtTop) {
+              if (!isScrolled && isDraggingUp) {
+                return false;
+              }
+            }
+            return Math.abs(dy) > 8;
+          };
+          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 to = dy + startY;
+              animatedNumber.setValue(resisted(to, minY), { type: "direct" });
+            },
+            onPanResponderEnd: finish,
+            onPanResponderTerminate: finish,
+            onPanResponderRelease: finish
+          });
+        },
+        [disableDrag, 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 preventShown = controller?.hidden && controller?.open;
+      const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {
+        return {
+          transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }]
+        };
+      });
+      if (preventShown) {
+        return null;
       }
-      return Math.abs(dy) > 8;
-    };
-    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 to = dy + startY;
-        animatedNumber.setValue(resisted(to, minY), { type: "direct" });
-      },
-      onPanResponderEnd: finish,
-      onPanResponderTerminate: finish,
-      onPanResponderRelease: finish
-    });
-  }, [disableDrag, 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 AnimatedView = driver["NumberView"] ?? driver.View;
+      const contents = <SheetProvider modal={modal} contentRef={contentRef} dismissOnOverlayPress={dismissOnOverlayPress} dismissOnSnapToBottom={dismissOnSnapToBottom} open={open} hidden={isHidden} scope={__scopeSheet} position={position} snapPoints={snapPoints} setPosition={setPosition} setOpen={setOpen} scrollBridge={scrollBridge}>
+        {isResizing ? null : overlayComponent}
+        <AnimatedView ref={ref} {...panResponder?.panHandlers} onLayout={(e) => {
+          const next = e.nativeEvent.layout.height;
+          setFrameSize((prev) => {
+            const isBigChange = Math.abs(prev - next) > 50;
+            setIsResizing(isBigChange);
+            return next;
+          });
+        }} pointerEvents={open ? "auto" : "none"} style={[
+          {
+            position: "absolute",
+            zIndex: 10,
+            width: "100%",
+            height: "100%"
+          },
+          animatedStyle
+        ]}>
+          {handleComponent}
+          <RemoveScroll enabled={open && modal && handleDisableScroll} as={Slot} allowPinchZoom shards={[contentRef]} removeScrollBar={false}>{isResizing ? null : frameComponent}</RemoveScroll>
+        </AnimatedView>
+      </SheetProvider>;
+      if (modal) {
+        return <Portal><Theme name={themeName}>{contents}</Theme></Portal>;
       }
-    }
-  });
-  const preventShown = controller?.hidden && controller?.open;
-  const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {
-    return {
-      transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }]
-    };
-  });
-  if (preventShown) {
-    return null;
+      return contents;
+    })
+  ),
+  {
+    Handle: SheetHandle,
+    Frame: SheetFrame,
+    Overlay: SheetOverlay,
+    ScrollView: SheetScrollView
   }
-  const AnimatedView = driver["NumberView"] ?? driver.View;
-  const contents = <SheetProvider modal={modal} contentRef={contentRef} dismissOnOverlayPress={dismissOnOverlayPress} dismissOnSnapToBottom={dismissOnSnapToBottom} open={open} hidden={isHidden} scope={__scopeSheet} position={position} snapPoints={snapPoints} setPosition={setPosition} setOpen={setOpen} scrollBridge={scrollBridge}>
-    {isResizing ? null : overlayComponent}
-    <AnimatedView ref={ref} {...panResponder?.panHandlers} onLayout={(e) => {
-      const next = e.nativeEvent.layout.height;
-      setFrameSize((prev) => {
-        const isBigChange = Math.abs(prev - next) > 50;
-        setIsResizing(isBigChange);
-        return next;
-      });
-    }} pointerEvents={open ? "auto" : "none"} style={[
-      {
-        position: "absolute",
-        zIndex: 10,
-        width: "100%",
-        height: "100%"
-      },
-      animatedStyle
-    ]}>
-      {handleComponent}
-      <RemoveScroll enabled={open && modal && handleDisableScroll} as={Slot} allowPinchZoom shards={[contentRef]} removeScrollBar={false}>{isResizing ? null : frameComponent}</RemoveScroll>
-    </AnimatedView>
-  </SheetProvider>;
-  if (modal) {
-    return <Portal><Theme name={themeName}>{contents}</Theme></Portal>;
-  }
-  return contents;
-})), {
-  Handle: SheetHandle,
-  Frame: SheetFrame,
-  Overlay: SheetOverlay,
-  ScrollView: SheetScrollView
-});
+);
 function getPercentSize(point, frameSize) {
   if (!frameSize)
     return 0;
@@ -424,12 +452,15 @@ const SheetController = ({
   ...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]);
+  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>;
 };
 export {