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

package/dist/esm/Sheet.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import {
   Slot,
@@ -57,18 +58,20 @@ const SheetHandleFrame = styled(XStack, {
     }
   }
 });
-const SheetHandle = SheetHandleFrame.extractable(({ __scopeSheet, ...props }) => {
-  const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet);
-  return /* @__PURE__ */ React.createElement(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 /* @__PURE__ */ jsx(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,
@@ -88,16 +91,21 @@ const SheetOverlayFrame = styled(YStack, {
     }
   }
 });
-const SheetOverlay = SheetOverlayFrame.extractable(({ __scopeSheet, ...props }) => {
-  const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet);
-  return /* @__PURE__ */ React.createElement(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 /* @__PURE__ */ jsx(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);
@@ -113,323 +121,356 @@ 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 /* @__PURE__ */ React.createElement(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 /* @__PURE__ */ jsx(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 == null ? void 0 : controller.hidden) || false;
-  const disableDrag = disableDragProp ?? (controller == null ? void 0 : 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) => {
-    var _a;
-    (_a = controller == null ? void 0 : controller.onChangeOpen) == null ? void 0 : _a.call(controller, val);
-    onChangeOpen == null ? void 0 : onChangeOpen(val);
-  };
-  const [open, setOpen] = useControllableState({
-    prop: (controller == null ? void 0 : 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 == null ? void 0 : controller.hidden) || false;
+      const disableDrag = disableDragProp ?? (controller == null ? void 0 : 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) => {
+        var _a;
+        (_a = controller == null ? void 0 : controller.onChangeOpen) == null ? void 0 : _a.call(controller, val);
+        onChangeOpen == null ? void 0 : onChangeOpen(val);
+      };
+      const [open, setOpen] = useControllableState({
+        prop: (controller == null ? void 0 : 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) => {
+        var _a, _b;
+        if (isValidElement(child)) {
+          const name = (_b = (_a = child.type) == null ? void 0 : _a["staticConfig"]) == null ? void 0 : _b.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 == null ? void 0 : controller.hidden) && (controller == null ? void 0 : 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) => {
-    var _a, _b;
-    if (isValidElement(child)) {
-      const name = (_b = (_a = child.type) == null ? void 0 : _a["staticConfig"]) == null ? void 0 : _b.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 == null ? void 0 : controller.hidden) && (controller == null ? void 0 : controller.open);
-  const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {
-    return {
-      transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }]
-    };
-  });
-  if (preventShown) {
-    return null;
-  }
-  const AnimatedView = driver["NumberView"] ?? driver.View;
-  const contents = /* @__PURE__ */ React.createElement(SheetProvider, {
-    modal,
-    contentRef,
-    dismissOnOverlayPress,
-    dismissOnSnapToBottom,
-    open,
-    hidden: isHidden,
-    scope: __scopeSheet,
-    position,
-    snapPoints,
-    setPosition,
-    setOpen,
-    scrollBridge
-  }, isResizing ? null : overlayComponent, /* @__PURE__ */ React.createElement(AnimatedView, {
-    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;
+      const AnimatedView = driver["NumberView"] ?? driver.View;
+      const contents = /* @__PURE__ */ jsxs(SheetProvider, {
+        modal,
+        contentRef,
+        dismissOnOverlayPress,
+        dismissOnSnapToBottom,
+        open,
+        hidden: isHidden,
+        scope: __scopeSheet,
+        position,
+        snapPoints,
+        setPosition,
+        setOpen,
+        scrollBridge,
+        children: [
+          isResizing ? null : overlayComponent,
+          /* @__PURE__ */ jsxs(AnimatedView, {
+            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;
+              });
+            },
+            pointerEvents: open ? "auto" : "none",
+            style: [
+              {
+                position: "absolute",
+                zIndex: 10,
+                width: "100%",
+                height: "100%"
+              },
+              animatedStyle
+            ],
+            children: [
+              handleComponent,
+              /* @__PURE__ */ jsx(RemoveScroll, {
+                enabled: open && modal && handleDisableScroll,
+                as: Slot,
+                allowPinchZoom: true,
+                shards: [contentRef],
+                removeScrollBar: false,
+                children: isResizing ? null : frameComponent
+              })
+            ]
+          })
+        ]
       });
-    },
-    pointerEvents: open ? "auto" : "none",
-    style: [
-      {
-        position: "absolute",
-        zIndex: 10,
-        width: "100%",
-        height: "100%"
-      },
-      animatedStyle
-    ]
-  }, handleComponent, /* @__PURE__ */ React.createElement(RemoveScroll, {
-    enabled: open && modal && handleDisableScroll,
-    as: Slot,
-    allowPinchZoom: true,
-    shards: [contentRef],
-    removeScrollBar: false
-  }, isResizing ? null : frameComponent)));
-  if (modal) {
-    return /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Theme, {
-      name: themeName
-    }, contents));
+      if (modal) {
+        return /* @__PURE__ */ jsx(Portal, {
+          children: /* @__PURE__ */ jsx(Theme, {
+            name: themeName,
+            children: contents
+          })
+        });
+      }
+      return contents;
+    })
+  ),
+  {
+    Handle: SheetHandle,
+    Frame: SheetFrame,
+    Overlay: SheetOverlay,
+    ScrollView: SheetScrollView
   }
-  return contents;
-})), {
-  Handle: SheetHandle,
-  Frame: SheetFrame,
-  Overlay: SheetOverlay,
-  ScrollView: SheetScrollView
-});
+);
 function getPercentSize(point, frameSize) {
   if (!frameSize)
     return 0;
@@ -458,15 +499,19 @@ 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]);
-  return /* @__PURE__ */ React.createElement(SheetControllerContext.Provider, {
-    value: memoValue
-  }, children);
+  const memoValue = useMemo(
+    () => ({
+      open: value.open,
+      hidden: value.hidden,
+      disableDrag: value.disableDrag,
+      onChangeOpen
+    }),
+    [onChangeOpen, value.open, value.hidden, value.disableDrag]
+  );
+  return /* @__PURE__ */ jsx(SheetControllerContext.Provider, {
+    value: memoValue,
+    children
+  });
 };
 export {
   Sheet,