react-modal-sheet 3.4.1 → 4.0.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import React2, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, Children, cloneElement, useLayoutEffect, useCallback, useState, useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { useMotionValue, useReducedMotion, useTransform, animate, motion, AnimatePresence, transform } from 'framer-motion';
+import { useMotionValue, useReducedMotion, useTransform, animate, motion, AnimatePresence, transform } from 'motion/react';
 
 // src/sheet.tsx
 
@@ -29,8 +29,7 @@ function useModalEffect({
   function setup() {
     const root = document.querySelector(`#${rootId}`);
     const body = document.querySelector("body");
-    if (!root)
-      return;
+    if (!root) return;
     body.style.backgroundColor = "#000";
     root.style.overflow = "hidden";
     root.style.transitionTimingFunction = "cubic-bezier(0.32, 0.72, 0, 1)";
@@ -41,8 +40,7 @@ function useModalEffect({
   function cleanup() {
     const root = document.querySelector(`#${rootId}`);
     const body = document.querySelector("body");
-    if (!root)
-      return;
+    if (!root) return;
     setTimeout(() => {
       body.style.removeProperty("background-color");
       root.style.removeProperty("overflow");
@@ -57,17 +55,14 @@ function useModalEffect({
   }
   useIsomorphicLayoutEffect(() => {
     return () => {
-      if (rootId)
-        cleanup();
+      if (rootId) cleanup();
     };
   }, []);
   useEffect(() => {
     const root = document.querySelector(`#${rootId}`);
-    if (!root)
-      return;
+    if (!root) return;
     function onCompleted() {
-      if (y.get() - 10 >= heightRef.current)
-        cleanup();
+      if (y.get() - 10 >= heightRef.current) cleanup();
     }
     const removeStartListener = y.on("animationStart", () => {
       var _a;
@@ -142,14 +137,14 @@ function useDimensions() {
   return dimensions;
 }
 function usePrevious(state) {
-  const ref = useRef();
+  const ref = useRef(void 0);
   useEffect(() => {
     ref.current = state;
   });
   return ref.current;
 }
 function useEffectEvent(handler) {
-  const handlerRef = useRef();
+  const handlerRef = useRef(void 0);
   useIsomorphicLayoutEffect(() => {
     handlerRef.current = handler;
   });
@@ -169,8 +164,7 @@ var SheetContext = createContext(
 );
 var useSheetContext = () => {
   const context = useContext(SheetContext);
-  if (!context)
-    throw Error("Sheet context error");
+  if (!context) throw new Error("Sheet context error");
   return context;
 };
 var SheetScrollerContext = createContext(void 0);
@@ -180,12 +174,10 @@ function SheetScrollerContextProvider({
   const sheetContext = useSheetContext();
   const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);
   function setDragEnabled() {
-    if (!sheetContext.disableDrag)
-      setDisableDrag(false);
+    if (!sheetContext.disableDrag) setDisableDrag(false);
   }
   function setDragDisabled() {
-    if (!disableDrag)
-      setDisableDrag(true);
+    if (!disableDrag) setDisableDrag(true);
   }
   return /* @__PURE__ */ React2.createElement(
     SheetScrollerContext.Provider,
@@ -197,8 +189,7 @@ function SheetScrollerContextProvider({
 }
 var useSheetScrollerContext = () => {
   const context = useContext(SheetScrollerContext);
-  if (!context)
-    throw Error("Sheet scroller context error");
+  if (!context) throw new Error("Sheet scroller context error");
   return context;
 };
 
@@ -217,8 +208,7 @@ function getClosest(nums, goal) {
 }
 function inDescendingOrder(arr) {
   for (let i = 0; i < arr.length; i++) {
-    if (arr[i + 1] > arr[i])
-      return false;
+    if (arr[i + 1] > arr[i]) return false;
   }
   return true;
 }
@@ -245,16 +235,14 @@ function mergeRefs(refs) {
   };
 }
 function isTouchDevice() {
-  if (typeof window === "undefined")
-    return false;
+  if (typeof window === "undefined") return false;
   return "ontouchstart" in window || navigator.maxTouchPoints > 0;
 }
 function testPlatform(re) {
   var _a;
   return typeof window !== "undefined" && window.navigator != null ? re.test(
     // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/dot-notation
-    ((_a = window.navigator["userAgentData"]) == null ? void 0 : _a.platform) || window.navigator.platform
+    ((_a = window.navigator.userAgentData) == null ? void 0 : _a.platform) || window.navigator.platform
   ) : false;
 }
 function cached(fn) {
@@ -364,7 +352,9 @@ function preventScrollMobileSafari() {
   let scrollable;
   let lastY = 0;
   const onTouchStart = (e) => {
-    scrollable = getScrollParent(e.target, true);
+    var _a;
+    const target = (_a = e.composedPath()) == null ? void 0 : _a[0];
+    scrollable = getScrollParent(target, true);
     if (scrollable === document.documentElement && scrollable === document.body) {
       return;
     }
@@ -390,7 +380,8 @@ function preventScrollMobileSafari() {
     lastY = y;
   };
   const onTouchEnd = (e) => {
-    const target = e.target;
+    var _a;
+    const target = (_a = e.composedPath()) == null ? void 0 : _a[0];
     if (willOpenKeyboard(target) && target !== document.activeElement) {
       e.preventDefault();
       target.style.transform = "translateY(-2000px)";
@@ -401,7 +392,8 @@ function preventScrollMobileSafari() {
     }
   };
   const onFocus = (e) => {
-    const target = e.target;
+    var _a;
+    const target = (_a = e.composedPath()) == null ? void 0 : _a[0];
     if (willOpenKeyboard(target)) {
       target.style.transform = "translateY(-2000px)";
       requestAnimationFrame(() => {
@@ -513,7 +505,8 @@ var styles = {
     backgroundColor: "rgba(0, 0, 0, 0.2)",
     touchAction: "none",
     // Disable iOS body scrolling
-    border: "none"
+    border: "none",
+    WebkitTapHighlightColor: "transparent"
   },
   container: {
     zIndex: 2,
@@ -558,7 +551,6 @@ var styles = {
     overflowY: "auto"
   }
 };
-var styles_default = styles;
 
 // src/sheet.tsx
 var Sheet = forwardRef(
@@ -597,7 +589,7 @@ var Sheet = forwardRef(
     const y = useMotionValue(windowHeight);
     const zIndex = useTransform(
       y,
-      (value) => value + 2 >= windowHeight ? -1 : 9999999
+      (value) => value + 2 >= windowHeight ? -1 : (style == null ? void 0 : style.zIndex) ?? 9999
     );
     const visibility = useTransform(
       y,
@@ -620,8 +612,7 @@ var Sheet = forwardRef(
     let snapPoints = snapPointsProp;
     if (snapPoints) {
       snapPoints = snapPoints.map((point) => {
-        if (point > 0 && point <= 1)
-          return Math.round(point * windowHeight);
+        if (point > 0 && point <= 1) return Math.round(point * windowHeight);
         return point < 0 ? windowHeight + point : point;
       });
       console.assert(
@@ -633,16 +624,13 @@ var Sheet = forwardRef(
     }
     const onDrag = useEffectEvent((_, { delta }) => {
       const velocity = y.getVelocity();
-      if (velocity > 0)
-        indicatorRotation.set(10);
-      if (velocity < 0)
-        indicatorRotation.set(-10);
+      if (velocity > 0) indicatorRotation.set(10);
+      if (velocity < 0) indicatorRotation.set(-10);
       y.set(Math.max(y.get() + delta.y, 0));
     });
     const onDragStart = useEffectEvent(() => {
       const focusedElement = document.activeElement;
-      if (!focusedElement || !sheetRef.current)
-        return;
+      if (!focusedElement || !sheetRef.current) return;
       const isInput = focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA";
       if (isInput && sheetRef.current.contains(focusedElement)) {
         focusedElement.blur();
@@ -667,22 +655,22 @@ var Sheet = forwardRef(
           snapTo = sheetHeight;
         }
         snapTo = validateSnapTo({ snapTo, sheetHeight });
-        void animate(y, snapTo, animationOptions);
+        animate(y, snapTo, animationOptions);
         if (snapPoints && onSnap) {
           const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
-          const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue));
+          const snapIndex = snapPoints.indexOf(
+            getClosest(snapPoints, snapValue)
+          );
           onSnap(snapIndex);
         }
         const roundedSheetHeight = Math.round(sheetHeight);
         const shouldClose = snapTo + 2 >= roundedSheetHeight;
-        if (shouldClose)
-          onClose();
+        if (shouldClose) onClose();
       }
       indicatorRotation.set(0);
     });
     useEffect(() => {
-      if (!snapPoints || !onSnap)
-        return;
+      if (!snapPoints || !onSnap) return;
       const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
       onSnap(snapIndex);
     }, [isOpen]);
@@ -697,11 +685,9 @@ var Sheet = forwardRef(
             snapTo: sheetHeight - snapPoint,
             sheetHeight
           });
-          void animate(y, snapTo, animationOptions);
-          if (onSnap)
-            onSnap(snapIndex);
-          if (snapTo >= sheetHeight)
-            onClose();
+          animate(y, snapTo, animationOptions);
+          if (onSnap) onSnap(snapIndex);
+          if (snapTo >= sheetHeight) onClose();
         }
       }
     }));
@@ -743,20 +729,18 @@ var Sheet = forwardRef(
       {
         ...rest,
         ref,
-        style: { ...styles_default.wrapper, zIndex, visibility, ...style }
+        style: { ...styles.wrapper, zIndex, visibility, ...style }
       },
       /* @__PURE__ */ React2.createElement(AnimatePresence, null, isOpen ? /* @__PURE__ */ React2.createElement(SheetScrollerContextProvider, null, Children.map(
         children,
         (child, i) => cloneElement(child, { key: `sheet-child-${i}` })
       )) : null)
     ));
-    if (IS_SSR)
-      return sheet;
+    if (IS_SSR) return sheet;
     return createPortal(sheet, mountPoint ?? document.body);
   }
 );
 Sheet.displayName = "Sheet";
-var sheet_default = Sheet;
 var SheetContainer = forwardRef(
   ({ children, style = {}, className = "", ...rest }, ref) => {
     const {
@@ -782,7 +766,7 @@ var SheetContainer = forwardRef(
         ref: mergeRefs([sheetRef, ref]),
         className: `react-modal-sheet-container ${className}`,
         style: {
-          ...styles_default.container,
+          ...styles.container,
           ...style,
           ...detent === "full-height" && { height },
           ...detent === "content-height" && { maxHeight: height },
@@ -798,7 +782,6 @@ var SheetContainer = forwardRef(
   }
 );
 SheetContainer.displayName = "SheetContainer";
-var SheetContainer_default = SheetContainer;
 var SheetContent = forwardRef(
   ({ children, style, disableDrag, className = "", ...rest }, ref) => {
     const sheetContext = useSheetContext();
@@ -811,7 +794,7 @@ var SheetContent = forwardRef(
         ...rest,
         ref: mergeRefs([ref, constraintsRef]),
         className: `react-modal-sheet-content ${className}`,
-        style: { ...styles_default.content, ...style },
+        style: { ...styles.content, ...style },
         ...dragProps,
         dragConstraints: constraintsRef,
         onMeasureDragConstraints
@@ -821,7 +804,6 @@ var SheetContent = forwardRef(
   }
 );
 SheetContent.displayName = "SheetContent";
-var SheetContent_default = SheetContent;
 var SheetHeader = forwardRef(
   ({ children, style, disableDrag, ...rest }, ref) => {
     const { indicatorRotation, dragProps } = useSheetContext();
@@ -840,29 +822,28 @@ var SheetHeader = forwardRef(
       {
         ...rest,
         ref: mergeRefs([ref, constraintsRef]),
-        style: { ...styles_default.headerWrapper, ...style },
+        style: { ...styles.headerWrapper, ...style },
         ..._dragProps,
         dragConstraints: constraintsRef,
         onMeasureDragConstraints
       },
-      children || /* @__PURE__ */ React2.createElement("div", { className: "react-modal-sheet-header", style: styles_default.header }, /* @__PURE__ */ React2.createElement(
+      children || /* @__PURE__ */ React2.createElement("div", { className: "react-modal-sheet-header", style: styles.header }, /* @__PURE__ */ React2.createElement(
         motion.span,
         {
           className: "react-modal-sheet-drag-indicator",
-          style: { ...styles_default.indicator, transform: indicator1Transform }
+          style: { ...styles.indicator, transform: indicator1Transform }
         }
       ), /* @__PURE__ */ React2.createElement(
         motion.span,
         {
           className: "react-modal-sheet-drag-indicator",
-          style: { ...styles_default.indicator, transform: indicator2Transform }
+          style: { ...styles.indicator, transform: indicator2Transform }
         }
       ))
     );
   }
 );
 SheetHeader.displayName = "SheetHeader";
-var SheetHeader_default = SheetHeader;
 var isClickable = (props) => !!props.onClick || !!props.onTap;
 var SheetBackdrop = forwardRef(
   ({ style = {}, className = "", ...rest }, ref) => {
@@ -874,7 +855,7 @@ var SheetBackdrop = forwardRef(
         ...rest,
         ref,
         className: `react-modal-sheet-backdrop ${className}`,
-        style: { ...styles_default.backdrop, ...style, pointerEvents },
+        style: { ...styles.backdrop, ...style, pointerEvents },
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 }
@@ -883,15 +864,13 @@ var SheetBackdrop = forwardRef(
   }
 );
 SheetBackdrop.displayName = "SheetBackdrop";
-var SheetBackdrop_default = SheetBackdrop;
 var SheetScroller = forwardRef(
   ({ draggableAt = "top", children, style, className = "", ...rest }, ref) => {
     const sheetScrollerContext = useSheetScrollerContext();
     function determineDragState(element) {
       const { scrollTop, scrollHeight, clientHeight } = element;
       const isScrollable2 = scrollHeight > clientHeight;
-      if (!isScrollable2)
-        return;
+      if (!isScrollable2) return;
       const isAtTop = scrollTop <= 0;
       const isAtBottom = scrollHeight - scrollTop === clientHeight;
       const shouldEnable = draggableAt === "top" && isAtTop || draggableAt === "bottom" && isAtBottom || draggableAt === "both" && (isAtTop || isAtBottom);
@@ -920,7 +899,7 @@ var SheetScroller = forwardRef(
         ...rest,
         ref,
         className: `react-modal-sheet-scroller ${className}`,
-        style: { ...styles_default.scroller, ...style },
+        style: { ...styles.scroller, ...style },
         ...scrollProps
       },
       children
@@ -928,17 +907,16 @@ var SheetScroller = forwardRef(
   }
 );
 SheetScroller.displayName = "SheetScroller";
-var SheetScroller_default = SheetScroller;
 
 // src/index.tsx
-var _SheetCompound = sheet_default;
-_SheetCompound.Container = SheetContainer_default;
-_SheetCompound.Header = SheetHeader_default;
-_SheetCompound.Content = SheetContent_default;
-_SheetCompound.Backdrop = SheetBackdrop_default;
-_SheetCompound.Scroller = SheetScroller_default;
-var Sheet2 = _SheetCompound;
+var Sheet2 = Object.assign(Sheet, {
+  Container: SheetContainer,
+  Header: SheetHeader,
+  Content: SheetContent,
+  Backdrop: SheetBackdrop,
+  Scroller: SheetScroller
+});
 
 export { Sheet2 as Sheet };
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map