@tamagui/sheet 1.88.13 → 1.89.0-1706308641099

package/dist/jsx/SheetScrollView.mjs

@@ -0,0 +1,57 @@
+import { composeRefs } from "@tamagui/compose-refs";
+import { ScrollView } from "@tamagui/scroll-view";
+import { forwardRef, useMemo, useRef } from "react";
+import { useSheetContext } from "./SheetContext.mjs";
+import { jsx } from "react/jsx-runtime";
+const SHEET_SCROLL_VIEW_NAME = "SheetScrollView",
+  SheetScrollView = forwardRef(({
+    __scopeSheet,
+    children,
+    onScroll,
+    ...props
+  }, ref) => {
+    const context = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet),
+      {
+        scrollBridge
+      } = context,
+      scrollRef = useRef(null),
+      state = useRef({
+        lastPageY: 0,
+        dragAt: 0,
+        dys: [],
+        // store a few recent dys to get velocity on release
+        isScrolling: !1,
+        isDragging: !1
+      }),
+      release = () => {
+        if (!state.current.isDragging) return;
+        state.current.isDragging = !1, scrollBridge.scrollStartY = -1, state.current.isScrolling = !1;
+        let vy = 0;
+        if (state.current.dys.length) {
+          const recentDys = state.current.dys.slice(-10);
+          vy = (recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0) / recentDys.length * 0.04;
+        }
+        state.current.dys = [], scrollBridge.release({
+          dragAt: state.current.dragAt,
+          vy
+        });
+      };
+    return /* @__PURE__ */jsx(ScrollView, {
+      ref: composeRefs(scrollRef, ref),
+      flex: 1,
+      scrollEventThrottle: 8,
+      onScroll: e => {
+        const {
+          y
+        } = e.nativeEvent.contentOffset;
+        scrollBridge.y = y, y > 0 && (scrollBridge.scrollStartY = -1), onScroll?.(e);
+      },
+      onStartShouldSetResponder: () => (scrollBridge.scrollStartY = -1, state.current.isDragging = !0, !0),
+      onMoveShouldSetResponder: () => !1,
+      onResponderRelease: release,
+      className: "_ovs-contain",
+      ...props,
+      children: useMemo(() => children, [children])
+    });
+  });
+export { SheetScrollView };

package/dist/jsx/constants.mjs

@@ -0,0 +1,8 @@
+import { isClient } from "@tamagui/core";
+const constants = {},
+  SHEET_NAME = "Sheet",
+  SHEET_HANDLE_NAME = "SheetHandle",
+  SHEET_OVERLAY_NAME = "SheetOverlay",
+  SHEET_HIDDEN_STYLESHEET = isClient ? document.createElement("style") : null;
+SHEET_HIDDEN_STYLESHEET && document.head.appendChild(SHEET_HIDDEN_STYLESHEET);
+export { SHEET_HANDLE_NAME, SHEET_HIDDEN_STYLESHEET, SHEET_NAME, SHEET_OVERLAY_NAME, constants };

package/dist/jsx/contexts.mjs

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const ParentSheetContext = createContext({
+    zIndex: 1e5
+  }),
+  SheetInsideSheetContext = createContext(null);
+export { ParentSheetContext, SheetInsideSheetContext };

package/dist/jsx/createSheet.mjs

@@ -0,0 +1,138 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { Stack } from "@tamagui/core";
+import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
+import { RemoveScroll } from "@tamagui/remove-scroll";
+import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
+import { forwardRef, memo, useMemo } from "react";
+import { Platform } from "react-native-web";
+import { SHEET_HANDLE_NAME, SHEET_NAME, SHEET_OVERLAY_NAME } from "./constants.mjs";
+import { useSheetContext } from "./SheetContext.mjs";
+import { SheetImplementationCustom } from "./SheetImplementationCustom.mjs";
+import { SheetScrollView } from "./SheetScrollView.mjs";
+import { useSheetController } from "./useSheetController.mjs";
+import { useSheetOffscreenSize } from "./useSheetOffscreenSize.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function createSheet({
+  Handle,
+  Frame,
+  Overlay
+}) {
+  const SheetHandle = Handle.extractable(({
+      __scopeSheet,
+      ...props
+    }) => {
+      const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet);
+      return context.onlyShowFrame ? null :
+      // @ts-ignore
+      /* @__PURE__ */
+      jsx(Handle, {
+        onPress: () => {
+          const max = context.snapPoints.length + (context.dismissOnSnapToBottom ? -1 : 0),
+            nextPos = (context.position + 1) % max;
+          context.setPosition(nextPos);
+        },
+        open: context.open,
+        ...props
+      });
+    }),
+    SheetOverlay = Overlay.extractable(memo(propsIn => {
+      const {
+          __scopeSheet,
+          ...props
+        } = propsIn,
+        context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet),
+        element = useMemo(() =>
+        // @ts-ignore
+        /* @__PURE__ */
+        jsx(Overlay, {
+          ...props,
+          onPress: composeEventHandlers(props.onPress, context.dismissOnOverlayPress ? () => {
+            context.setOpen(!1);
+          } : void 0)
+        }), [props.onPress, context.dismissOnOverlayPress]);
+      return useIsomorphicLayoutEffect(() => {
+        context.onOverlayComponent?.(element);
+      }, [element]), context.onlyShowFrame, null;
+    })),
+    SheetFrame = Frame.extractable(forwardRef(({
+      __scopeSheet,
+      adjustPaddingForOffscreenContent,
+      disableHideBottomOverflow,
+      children,
+      ...props
+    }, forwardedRef) => {
+      const context = useSheetContext(SHEET_NAME, __scopeSheet),
+        {
+          hasFit,
+          removeScrollEnabled,
+          frameSize,
+          contentRef
+        } = context,
+        composedContentRef = useComposedRefs(forwardedRef, contentRef),
+        offscreenSize = useSheetOffscreenSize(context),
+        sheetContents = useMemo(() =>
+        // @ts-ignore
+        /* @__PURE__ */
+        jsxs(Frame, {
+          ref: composedContentRef,
+          flex: hasFit ? 0 : 1,
+          height: hasFit ? void 0 : frameSize,
+          ...props,
+          children: [children, adjustPaddingForOffscreenContent && /* @__PURE__ */jsx(Stack, {
+            "data-sheet-offscreen-pad": !0,
+            height: offscreenSize,
+            width: "100%"
+          })]
+        }), [props, frameSize, offscreenSize, adjustPaddingForOffscreenContent, hasFit]);
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(RemoveScroll, {
+          forwardProps: !0,
+          enabled: removeScrollEnabled,
+          allowPinchZoom: !0,
+          shards: [contentRef],
+          removeScrollBar: !1,
+          children: sheetContents
+        }), !disableHideBottomOverflow &&
+        // @ts-ignore
+        /* @__PURE__ */
+        jsx(Frame, {
+          ...props,
+          componentName: "SheetCover",
+          children: null,
+          position: "absolute",
+          bottom: "-50%",
+          zIndex: -1,
+          height: context.frameSize,
+          left: 0,
+          right: 0,
+          borderWidth: 0,
+          borderRadius: 0,
+          shadowOpacity: 0
+        })]
+      });
+    })),
+    Sheet = forwardRef(function (props, ref) {
+      const hydrated = useDidFinishSSR(),
+        {
+          isShowingNonSheet
+        } = useSheetController();
+      let SheetImplementation = SheetImplementationCustom;
+      return props.native && Platform.OS, isShowingNonSheet || !hydrated ? null : /* @__PURE__ */jsx(SheetImplementation, {
+        ref,
+        ...props
+      });
+    }),
+    components = {
+      Frame: SheetFrame,
+      Overlay: SheetOverlay,
+      Handle: SheetHandle,
+      ScrollView: SheetScrollView
+    },
+    Controlled = withStaticProperties(Sheet, components);
+  return withStaticProperties(Sheet, {
+    ...components,
+    Controlled
+  });
+}
+export { createSheet };

package/dist/jsx/helpers.mjs

@@ -0,0 +1,9 @@
+function resisted(y, minY, maxOverflow = 25) {
+  if (y < minY) {
+    const past = minY - y,
+      extra = -(1.1 - 0.1 ** (Math.min(maxOverflow, past) / maxOverflow)) * maxOverflow;
+    return minY + extra;
+  }
+  return y;
+}
+export { resisted };

package/dist/jsx/index.mjs

@@ -0,0 +1,7 @@
+export * from "./Sheet.mjs";
+export * from "./useSheet.mjs";
+export * from "./createSheet.mjs";
+export * from "./SheetController.mjs";
+export * from "./useSheetController.mjs";
+import { setupNativeSheet } from "./nativeSheet.mjs";
+export { setupNativeSheet };

package/dist/jsx/nativeSheet.mjs

@@ -0,0 +1,50 @@
+import { YStack } from "@tamagui/stacks";
+import { useEffect, useRef } from "react";
+import { View } from "react-native-web";
+import { SheetProvider } from "./SheetContext.mjs";
+import { useSheetOpenState } from "./useSheetOpenState.mjs";
+import { useSheetProviderProps } from "./useSheetProviderProps.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const nativeSheets = {
+  ios: null
+};
+function getNativeSheet(platform) {
+  return nativeSheets[platform];
+}
+function setupNativeSheet(platform, Implementation) {
+  platform === "ios" && (nativeSheets[platform] = props => {
+    const state = useSheetOpenState(props),
+      providerProps = useSheetProviderProps(props, state),
+      {
+        open,
+        setOpen
+      } = state,
+      ref = useRef();
+    return useEffect(() => {
+      ref.current?.setVisibility(open);
+    }, [open]), /* @__PURE__ */jsx(Fragment, {
+      children: /* @__PURE__ */jsxs(SheetProvider, {
+        ...providerProps,
+        onlyShowFrame: !0,
+        children: [/* @__PURE__ */jsx(Implementation, {
+          ref,
+          onModalDismiss: () => setOpen(!1),
+          children: /* @__PURE__ */jsx(View, {
+            style: {
+              flex: 1
+            },
+            children: props.children
+          })
+        }), /* @__PURE__ */jsx(YStack, {
+          position: "absolute",
+          opacity: 0,
+          pointerEvents: "none",
+          width: 0,
+          height: 0,
+          children: props.children
+        })]
+      })
+    });
+  });
+}
+export { getNativeSheet, setupNativeSheet };

package/dist/jsx/useSheet.mjs

@@ -0,0 +1,3 @@
+import { useSheetContext } from "./SheetContext.mjs";
+const useSheet = () => useSheetContext("", void 0);
+export { useSheet };

package/dist/jsx/useSheetController.mjs

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+const useSheetController = () => {
+    const controller = useContext(SheetControllerContext),
+      isHidden = controller?.hidden,
+      isShowingNonSheet = isHidden && controller?.open;
+    return {
+      controller,
+      isHidden,
+      isShowingNonSheet,
+      disableDrag: controller?.disableDrag
+    };
+  },
+  SheetControllerContext = createContext(null);
+export { SheetControllerContext, useSheetController };

package/dist/jsx/useSheetOffscreenSize.mjs

@@ -0,0 +1,27 @@
+const useSheetOffscreenSize = ({
+  snapPoints,
+  position,
+  screenSize,
+  frameSize,
+  snapPointsMode
+}) => {
+  if (snapPointsMode === "fit") return 0;
+  if (snapPointsMode === "constant") {
+    const maxSize2 = Number(snapPoints[0]),
+      currentSize2 = Number(snapPoints[position] ?? 0);
+    return maxSize2 - currentSize2;
+  }
+  if (snapPointsMode === "percent") {
+    const maxPercentOpened = Number(snapPoints[0]) / 100,
+      percentOpened = Number(snapPoints[position] ?? 0) / 100;
+    return (maxPercentOpened - percentOpened) * screenSize;
+  }
+  const maxSnapPoint = snapPoints[0];
+  if (maxSnapPoint === "fit") return 0;
+  const maxSize = typeof maxSnapPoint == "string" ? Number(maxSnapPoint.slice(0, -1)) / 100 * screenSize : maxSnapPoint,
+    currentSnapPoint = snapPoints[position] ?? 0,
+    currentSize = typeof currentSnapPoint == "string" ? Number(currentSnapPoint.slice(0, -1)) / 100 * screenSize : currentSnapPoint,
+    offscreenSize = maxSize - currentSize;
+  return Number.isNaN(offscreenSize) ? 0 : offscreenSize;
+};
+export { useSheetOffscreenSize };

package/dist/jsx/useSheetOpenState.mjs

@@ -0,0 +1,25 @@
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { useSheetController } from "./useSheetController.mjs";
+const useSheetOpenState = props => {
+  const {
+      isHidden,
+      controller
+    } = useSheetController(),
+    onOpenChangeInternal = val => {
+      controller?.onOpenChange?.(val), props.onOpenChange?.(val);
+    },
+    [open, setOpen] = useControllableState({
+      prop: controller?.open ?? props.open,
+      defaultProp: props.defaultOpen ?? !1,
+      onChange: onOpenChangeInternal,
+      strategy: "most-recent-wins",
+      transition: !0
+    });
+  return {
+    open,
+    setOpen,
+    isHidden,
+    controller
+  };
+};
+export { useSheetOpenState };

package/dist/jsx/useSheetProviderProps.mjs

@@ -0,0 +1,86 @@
+import { useConfiguration } from "@tamagui/core";
+import { useConstant } from "@tamagui/use-constant";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+function useSheetProviderProps(props, state, options = {}) {
+  const contentRef = React.useRef(null),
+    [frameSize, setFrameSize] = useState(0),
+    [maxContentSize, setMaxContentSize] = useState(0),
+    snapPointsMode = props.snapPointsMode ?? "percent",
+    snapPointsProp = props.snapPoints ?? (snapPointsMode === "percent" ? [80] : snapPointsMode === "constant" ? [256] : ["fit"]),
+    hasFit = snapPointsProp[0] === "fit",
+    snapPoints = useMemo(() => props.dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(snapPointsProp), props.dismissOnSnapToBottom]),
+    [position_, setPositionImmediate] = useControllableState({
+      prop: props.position,
+      defaultProp: props.defaultPosition || (state.open ? 0 : -1),
+      onChange: props.onPositionChange,
+      strategy: "most-recent-wins",
+      transition: !0
+    }),
+    position = state.open === !1 ? -1 : position_,
+    {
+      open
+    } = state,
+    setPosition = useCallback(next => {
+      props.dismissOnSnapToBottom && next === snapPoints.length - 1 ? state.setOpen(!1) : setPositionImmediate(next);
+    }, [props.dismissOnSnapToBottom, snapPoints.length, setPositionImmediate, state.setOpen]);
+  process.env.NODE_ENV === "development" && (snapPointsMode === "mixed" && snapPoints.some(p => {
+    if (typeof p == "string") {
+      if (p === "fit") return !1;
+      if (p.endsWith("%")) {
+        const n = Number(p.slice(0, -1));
+        return n < 0 || n > 100;
+      }
+      return !0;
+    }
+    return typeof p != "number" || p < 0;
+  }) && console.warn('\u26A0\uFE0F Invalid snapPoint given, snapPoints must be positive numeric values, string percentages between 0-100%, or "fit" when snapPointsMode is mixed'), snapPointsMode === "mixed" && snapPoints.indexOf("fit") > 0 && console.warn('\u26A0\uFE0F Invalid snapPoint given, "fit" must be the first/largest snap point when snapPointsMode is mixed'), snapPointsMode === "fit" && (snapPoints.length !== (props.dismissOnSnapToBottom ? 2 : 1) || snapPoints[0] !== "fit") && console.warn("\u26A0\uFE0F Invalid snapPoint given, there are no snap points when snapPointsMode is fit"), snapPointsMode === "constant" && snapPoints.some(p => typeof p != "number" || p < 0) && console.warn("\u26A0\uFE0F Invalid snapPoint given, snapPoints must be positive numeric values when snapPointsMode is constant"), snapPointsMode === "percent" && snapPoints.some(p => typeof p != "number" || p < 0 || p > 100) && console.warn("\u26A0\uFE0F Invalid snapPoint given, snapPoints must be numeric values between 0 and 100 when snapPointsMode is percent")), open && props.dismissOnSnapToBottom && position === snapPoints.length - 1 && setPositionImmediate(0);
+  const shouldSetPositionOpen = open && position < 0;
+  useEffect(() => {
+    shouldSetPositionOpen && setPosition(0);
+  }, [setPosition, shouldSetPositionOpen]);
+  const {
+    animationDriver
+  } = useConfiguration();
+  if (!animationDriver) throw new Error("Must set animations in tamagui.config.ts");
+  const scrollBridge = useConstant(() => ({
+      enabled: !1,
+      y: 0,
+      paneY: 0,
+      paneMinY: 0,
+      scrollStartY: -1,
+      drag: () => {},
+      release: () => {},
+      scrollLock: !1
+    })),
+    removeScrollEnabled = props.forceRemoveScrollEnabled ?? (open && props.modal),
+    maxSnapPoint = snapPoints[0];
+  return {
+    screenSize: snapPointsMode === "percent" ? frameSize / ((typeof maxSnapPoint == "number" ? maxSnapPoint : 100) / 100) : maxContentSize,
+    maxSnapPoint,
+    removeScrollEnabled,
+    scrollBridge,
+    modal: !!props.modal,
+    open: state.open,
+    setOpen: state.setOpen,
+    hidden: !!state.isHidden,
+    contentRef,
+    frameSize,
+    setFrameSize,
+    dismissOnOverlayPress: props.dismissOnOverlayPress ?? !0,
+    dismissOnSnapToBottom: props.dismissOnSnapToBottom ?? !1,
+    onOverlayComponent: options.onOverlayComponent,
+    scope: props.__scopeSheet,
+    hasFit,
+    position,
+    snapPoints,
+    snapPointsMode,
+    setMaxContentSize,
+    setPosition,
+    setPositionImmediate,
+    onlyShowFrame: !1
+  };
+}
+export { useSheetProviderProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/sheet",
-  "version": "1.88.13",
+  "version": "1.89.0-1706308641099",
   "sideEffects": [
     "*.css"
   ],
@@ -33,27 +33,27 @@
     }
   },
   "dependencies": {
-    "@tamagui/animate-presence": "1.88.13",
-    "@tamagui/animations-react-native": "1.88.13",
-    "@tamagui/compose-refs": "1.88.13",
-    "@tamagui/constants": "1.88.13",
-    "@tamagui/core": "1.88.13",
-    "@tamagui/create-context": "1.88.13",
-    "@tamagui/helpers": "1.88.13",
-    "@tamagui/portal": "1.88.13",
-    "@tamagui/remove-scroll": "1.88.13",
-    "@tamagui/scroll-view": "1.88.13",
-    "@tamagui/stacks": "1.88.13",
-    "@tamagui/use-constant": "1.88.13",
-    "@tamagui/use-controllable-state": "1.88.13",
-    "@tamagui/use-keyboard-visible": "1.88.13"
+    "@tamagui/animate-presence": "1.89.0-1706308641099",
+    "@tamagui/animations-react-native": "1.89.0-1706308641099",
+    "@tamagui/compose-refs": "1.89.0-1706308641099",
+    "@tamagui/constants": "1.89.0-1706308641099",
+    "@tamagui/core": "1.89.0-1706308641099",
+    "@tamagui/create-context": "1.89.0-1706308641099",
+    "@tamagui/helpers": "1.89.0-1706308641099",
+    "@tamagui/portal": "1.89.0-1706308641099",
+    "@tamagui/remove-scroll": "1.89.0-1706308641099",
+    "@tamagui/scroll-view": "1.89.0-1706308641099",
+    "@tamagui/stacks": "1.89.0-1706308641099",
+    "@tamagui/use-constant": "1.89.0-1706308641099",
+    "@tamagui/use-controllable-state": "1.89.0-1706308641099",
+    "@tamagui/use-keyboard-visible": "1.89.0-1706308641099"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.88.13",
+    "@tamagui/build": "1.89.0-1706308641099",
     "react": "^18.2.0",
     "react-native": "^0.72.6"
   },