react-modal-sheet 5.0.0 → 5.1.0

package/dist/index.mjs

@@ -1,104 +1,123 @@
-import { motion, useTransform, useMotionValue, useReducedMotion, animate } from 'motion/react';
-import React4, { forwardRef, createContext, useRef, useState, useImperativeHandle, useContext, useCallback, useEffect, useLayoutEffect } from 'react';
+import { motion, useMotionValue, useTransform, useReducedMotion, animate } from 'motion/react';
+import React4, { createContext, forwardRef, useRef, useState, useImperativeHandle, useContext, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import useMeasure from 'react-use-measure';
 import { transform } from 'motion';
 
 // src/SheetBackdrop.tsx
+var SheetContext = createContext(
+  void 0
+);
+function useSheetContext() {
+  const context = useContext(SheetContext);
+  if (!context) throw new Error("Sheet context error");
+  return context;
+}
 
 // src/styles.ts
 var styles = {
   root: {
-    position: "fixed",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    overflow: "hidden",
-    pointerEvents: "none"
+    base: {
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      overflow: "hidden",
+      pointerEvents: "none"
+    },
+    decorative: {}
   },
   backdrop: {
-    zIndex: 1,
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    touchAction: "none",
-    border: "none",
-    userSelect: "none",
-    WebkitTapHighlightColor: "transparent"
+    base: {
+      zIndex: 1,
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      touchAction: "none",
+      userSelect: "none"
+    },
+    decorative: {
+      backgroundColor: "rgba(0, 0, 0, 0.2)",
+      border: "none",
+      WebkitTapHighlightColor: "transparent"
+    }
   },
   container: {
-    zIndex: 2,
-    position: "absolute",
-    left: 0,
-    bottom: 0,
-    width: "100%",
-    backgroundColor: "#fff",
-    borderTopRightRadius: "8px",
-    borderTopLeftRadius: "8px",
-    boxShadow: "0px -2px 16px rgba(0, 0, 0, 0.3)",
-    display: "flex",
-    flexDirection: "column",
-    pointerEvents: "auto"
+    base: {
+      zIndex: 2,
+      position: "absolute",
+      left: 0,
+      bottom: 0,
+      width: "100%",
+      pointerEvents: "auto",
+      display: "flex",
+      flexDirection: "column"
+    },
+    decorative: {
+      backgroundColor: "#fff",
+      borderTopRightRadius: "8px",
+      borderTopLeftRadius: "8px",
+      boxShadow: "0px -2px 16px rgba(0, 0, 0, 0.3)"
+    }
   },
   headerWrapper: {
-    width: "100%"
+    base: {
+      width: "100%"
+    },
+    decorative: {}
   },
   header: {
-    height: "40px",
-    width: "100%",
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
+    base: {
+      width: "100%",
+      position: "relative"
+    },
+    decorative: {
+      height: "40px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  },
+  indicatorWrapper: {
+    base: {
+      display: "flex"
+    },
+    decorative: {}
   },
   indicator: {
-    width: "18px",
-    height: "4px",
-    borderRadius: "99px",
-    backgroundColor: "#ddd"
+    base: {
+      display: "inline-block"
+    },
+    decorative: {
+      width: "18px",
+      height: "4px",
+      borderRadius: "99px",
+      backgroundColor: "#ddd"
+    }
   },
   content: {
-    flexGrow: 1,
-    display: "flex",
-    flexDirection: "column",
-    minHeight: "0px",
-    position: "relative"
+    base: {
+      minHeight: "0px",
+      position: "relative",
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column"
+    },
+    decorative: {}
   },
   scroller: {
-    height: "100%",
-    overflowY: "auto",
-    overscrollBehaviorY: "none"
+    base: {
+      height: "100%",
+      overflowY: "auto",
+      overscrollBehaviorY: "none"
+    },
+    decorative: {}
   }
 };
 
-// src/SheetBackdrop.tsx
-var isClickable = (props) => !!props.onClick || !!props.onTap;
-var SheetBackdrop = forwardRef(
-  ({ style, className = "", ...rest }, ref) => {
-    const clickable = isClickable(rest);
-    const Comp = clickable ? motion.button : motion.div;
-    const pointerEvents = clickable ? "auto" : "none";
-    return /* @__PURE__ */ React4.createElement(
-      Comp,
-      {
-        ...rest,
-        ref,
-        className: `react-modal-sheet-backdrop ${className}`,
-        style: { ...styles.backdrop, ...style, pointerEvents },
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 1 }
-      }
-    );
-  }
-);
-SheetBackdrop.displayName = "SheetBackdrop";
-
 // src/constants.ts
 var DEFAULT_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
 var IS_SSR = typeof window === "undefined";
@@ -112,16 +131,11 @@ var REDUCED_MOTION_TWEEN_CONFIG = {
 };
 var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
 var DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
-var SheetContext = createContext(
-  void 0
-);
-function useSheetContext() {
-  const context = useContext(SheetContext);
-  if (!context) throw new Error("Sheet context error");
-  return context;
-}
 
 // src/utils.ts
+function applyStyles(styles2, unstyled) {
+  return unstyled ? styles2.base : { ...styles2.base, ...styles2.decorative };
+}
 function isAscendingOrder(arr) {
   for (let i = 0; i < arr.length; i++) {
     if (arr[i + 1] < arr[i]) return false;
@@ -168,12 +182,42 @@ var isIOS = cached(function() {
   return isIPhone() || isIPad();
 });
 
-// src/SheetContainer.tsx
+// src/SheetBackdrop.tsx
+var isClickable = (props) => !!props.onClick || !!props.onTap;
+var SheetBackdrop = forwardRef(
+  ({ style, className = "", unstyled, ...rest }, ref) => {
+    const sheetContext = useSheetContext();
+    const clickable = isClickable(rest);
+    const Comp = clickable ? motion.button : motion.div;
+    const pointerEvents = clickable ? "auto" : "none";
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
+    const backdropStyle = {
+      ...applyStyles(styles.backdrop, isUnstyled),
+      ...style,
+      pointerEvents
+    };
+    return /* @__PURE__ */ React4.createElement(
+      Comp,
+      {
+        ...rest,
+        ref,
+        className: `react-modal-sheet-backdrop ${className}`,
+        style: backdropStyle,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 1 }
+      }
+    );
+  }
+);
+SheetBackdrop.displayName = "SheetBackdrop";
 var SheetContainer = forwardRef(
-  ({ children, style, className = "", ...rest }, ref) => {
+  ({ children, style, className = "", unstyled, ...rest }, ref) => {
     const sheetContext = useSheetContext();
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
     const containerStyle = {
-      ...styles.container,
+      ...applyStyles(styles.container, isUnstyled),
       ...style,
       y: sheetContext.y
     };
@@ -271,6 +315,7 @@ var SheetContent = forwardRef(
     style: styleProp,
     className = "",
     scrollRef: scrollRefProp = null,
+    unstyled,
     ...rest
   }, ref) => {
     const sheetContext = useSheetContext();
@@ -287,13 +332,12 @@ var SheetContent = forwardRef(
     }) : Boolean(disableDragProp);
     const disableDrag = disableDragDueToProp || disableDragDueToScroll || sheetContext.disableDrag;
     const dragProps = disableDrag || sheetContext.disableDrag ? void 0 : sheetContext.dragProps;
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
     const contentStyle = {
-      ...styles.content,
+      ...applyStyles(styles.content, isUnstyled),
       ...styleProp
     };
-    const scrollStyle = {
-      ...styles.scroller
-    };
+    const scrollStyle = applyStyles(styles.scroller, isUnstyled);
     if (sheetContext.avoidKeyboard) {
       scrollStyle.paddingBottom = "env(keyboard-inset-height, var(--keyboard-inset-height, 0px))";
     }
@@ -324,42 +368,73 @@ var SheetContent = forwardRef(
   }
 );
 SheetContent.displayName = "SheetContent";
+function SheetDragIndicator({
+  style,
+  className = "",
+  unstyled,
+  ...rest
+}) {
+  const sheetContext = useSheetContext();
+  const indicator1Transform = useTransform(
+    sheetContext.indicatorRotation,
+    (r) => `translateX(2px) rotate(${r}deg)`
+  );
+  const indicator2Transform = useTransform(
+    sheetContext.indicatorRotation,
+    (r) => `translateX(-2px) rotate(${ -1 * r}deg)`
+  );
+  const isUnstyled = unstyled ?? sheetContext.unstyled;
+  const indicatorWrapperStyle = {
+    ...applyStyles(styles.indicatorWrapper, isUnstyled),
+    ...style
+  };
+  const indicatorStyle = applyStyles(styles.indicator, isUnstyled);
+  return /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      className: `react-modal-sheet-drag-indicator-container ${className}`,
+      style: indicatorWrapperStyle,
+      ...rest
+    },
+    /* @__PURE__ */ React4.createElement(
+      motion.span,
+      {
+        className: "react-modal-sheet-drag-indicator",
+        style: { ...indicatorStyle, transform: indicator1Transform }
+      }
+    ),
+    /* @__PURE__ */ React4.createElement(
+      motion.span,
+      {
+        className: "react-modal-sheet-drag-indicator",
+        style: { ...indicatorStyle, transform: indicator2Transform }
+      }
+    )
+  );
+}
 var SheetHeader = forwardRef(
-  ({ children, style, disableDrag, ...rest }, ref) => {
+  ({ children, style, disableDrag, unstyled, className = "", ...rest }, ref) => {
     const sheetContext = useSheetContext();
     const dragConstraints = useDragConstraints();
     const dragProps = disableDrag || sheetContext.disableDrag ? void 0 : sheetContext.dragProps;
-    const indicator1Transform = useTransform(
-      sheetContext.indicatorRotation,
-      (r) => `translateX(2px) rotate(${r}deg)`
-    );
-    const indicator2Transform = useTransform(
-      sheetContext.indicatorRotation,
-      (r) => `translateX(-2px) rotate(${ -1 * r}deg)`
-    );
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
+    const headerWrapperStyle = {
+      ...applyStyles(styles.headerWrapper, isUnstyled),
+      ...style
+    };
+    const headerStyle = applyStyles(styles.header, isUnstyled);
     return /* @__PURE__ */ React4.createElement(
       motion.div,
       {
         ...rest,
         ref: mergeRefs([ref, dragConstraints.ref]),
-        style: { ...styles.headerWrapper, ...style },
+        style: headerWrapperStyle,
+        className: `react-modal-sheet-header-container ${className}`,
         ...dragProps,
         dragConstraints: dragConstraints.ref,
         onMeasureDragConstraints: dragConstraints.onMeasure
       },
-      children || /* @__PURE__ */ React4.createElement("div", { className: "react-modal-sheet-header", style: styles.header }, /* @__PURE__ */ React4.createElement(
-        motion.span,
-        {
-          className: "react-modal-sheet-drag-indicator",
-          style: { ...styles.indicator, transform: indicator1Transform }
-        }
-      ), /* @__PURE__ */ React4.createElement(
-        motion.span,
-        {
-          className: "react-modal-sheet-drag-indicator",
-          style: { ...styles.indicator, transform: indicator2Transform }
-        }
-      ))
+      children || /* @__PURE__ */ React4.createElement("div", { className: "react-modal-sheet-header", style: headerStyle }, /* @__PURE__ */ React4.createElement(SheetDragIndicator, null))
     );
   }
 );
@@ -1000,20 +1075,21 @@ var Sheet = forwardRef(
     children,
     className = "",
     detent = "default",
+    disableDismiss = false,
     disableDrag: disableDragProp = false,
     disableScrollLocking = false,
-    disableDismiss = false,
     dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
     dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
+    initialSnap,
     isOpen,
     modalEffectRootId,
     modalEffectThreshold,
     mountPoint,
     prefersReducedMotion = false,
     snapPoints: snapPointsProp,
-    initialSnap,
     style,
     tweenConfig = DEFAULT_TWEEN_CONFIG,
+    unstyled = false,
     onOpenStart,
     onOpenEnd,
     onClose,
@@ -1212,6 +1288,7 @@ var Sheet = forwardRef(
       avoidKeyboard,
       sheetBoundsRef,
       sheetRef,
+      unstyled,
       y
     };
     const sheet = /* @__PURE__ */ React4.createElement(SheetContext.Provider, { value: context }, /* @__PURE__ */ React4.createElement(
@@ -1221,7 +1298,12 @@ var Sheet = forwardRef(
         ref,
         "data-sheet-state": state,
         className: `react-modal-sheet-root ${className}`,
-        style: { ...styles.root, zIndex, visibility, ...style }
+        style: {
+          ...applyStyles(styles.root, unstyled),
+          zIndex,
+          visibility,
+          ...style
+        }
       },
       state !== "closed" ? children : null
     ));
@@ -1235,6 +1317,7 @@ Sheet.displayName = "Sheet";
 var Sheet2 = Object.assign(Sheet, {
   Container: SheetContainer,
   Header: SheetHeader,
+  DragIndicator: SheetDragIndicator,
   Content: SheetContent,
   Backdrop: SheetBackdrop
 });