react-modal-sheet 3.4.1 → 4.0.0

package/src/hooks.tsx

@@ -1,5 +1,4 @@
 import {
-  type MutableRefObject,
   type RefObject,
   useCallback,
   useEffect,
@@ -8,7 +7,7 @@ import {
   useState,
 } from 'react';
 
-import { type MotionValue, type BoundingBox, transform } from 'framer-motion';
+import { type MotionValue, type BoundingBox, transform } from 'motion/react';
 
 import { IS_SSR } from './constants';
 import { type SheetEvents } from './types';
@@ -22,7 +21,7 @@ export function useModalEffect({
 }: {
   y: MotionValue<number>;
   rootId?: string;
-  sheetRef: RefObject<HTMLDivElement>;
+  sheetRef: RefObject<HTMLDivElement | null>;
 }) {
   const heightRef = useRef(IS_SSR ? 0 : window.innerHeight);
 
@@ -61,7 +60,7 @@ export function useModalEffect({
     return () => {
       if (rootId) cleanup();
     };
-  }, []); // eslint-disable-line
+  }, []);
 
   useEffect(() => {
     const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
@@ -101,12 +100,12 @@ export function useModalEffect({
       removeCompleteListener();
       removeCancelListener();
     };
-  }, [y, rootId]); // eslint-disable-line
+  }, [y, rootId]);
 }
 
 export function useEventCallbacks(
   isOpen: boolean,
-  callbacks: MutableRefObject<SheetEvents>
+  callbacks: RefObject<SheetEvents>
 ) {
   const prevOpen = usePrevious(isOpen);
   const didOpen = useRef(false);
@@ -122,7 +121,7 @@ export function useEventCallbacks(
       callbacks.current.onCloseEnd?.();
       didOpen.current = false;
     }
-  }, [isOpen, prevOpen]); // eslint-disable-line
+  }, [isOpen, prevOpen]);
 
   useEffect(() => {
     if (!prevOpen && isOpen) {
@@ -130,7 +129,7 @@ export function useEventCallbacks(
     } else if (!isOpen && prevOpen) {
       callbacks.current.onCloseStart?.();
     }
-  }, [isOpen, prevOpen]); // eslint-disable-line
+  }, [isOpen, prevOpen]);
 
   return { handleAnimationComplete };
 }
@@ -162,7 +161,7 @@ export function useDimensions() {
 }
 
 export function usePrevious<T>(state: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
 
   useEffect(() => {
     ref.current = state;
@@ -174,7 +173,7 @@ export function usePrevious<T>(state: T): T | undefined {
 // Userland version of the `useEffectEvent` React hook:
 // RFC: https://react.dev/reference/react/experimental_useEffectEvent
 export function useEffectEvent<T extends (...args: any[]) => any>(handler: T) {
-  const handlerRef = useRef<T>();
+  const handlerRef = useRef<T>(undefined);
 
   useIsomorphicLayoutEffect(() => {
     handlerRef.current = handler;
@@ -186,7 +185,7 @@ export function useEffectEvent<T extends (...args: any[]) => any>(handler: T) {
   }, []) as T;
 }
 
-// This is a hacky way to fix a bug in framer-motion where the drag
+// This is a hacky way to fix a bug in motion/react where the drag
 // constraints are not updated when window is resized.
 // https://github.com/framer/motion/issues/1659
 const constraints: BoundingBox = { bottom: 0, top: 0, left: 0, right: 0 };

package/src/index.tsx

@@ -1,24 +1,32 @@
-import { type MotionValue } from 'framer-motion';
+import type { MotionValue } from 'motion/react';
 
-import _Sheet from './sheet';
-import SheetContainer from './SheetContainer';
-import SheetContent from './SheetContent';
-import SheetHeader from './SheetHeader';
-import SheetBackdrop from './SheetBackdrop';
-import SheetScroller from './SheetScroller';
-import { type SheetCompound } from './types';
+import type { SheetCompound, SheetDraggableProps } from './types';
+import { Sheet as SheetBase } from './sheet';
+import { SheetContainer } from './SheetContainer';
+import { SheetContent } from './SheetContent';
+import { SheetHeader } from './SheetHeader';
+import { SheetBackdrop } from './SheetBackdrop';
+import { SheetScroller } from './SheetScroller';
 
 export interface SheetRef {
   y: MotionValue<number>;
   snapTo: (index: number) => void;
 }
 
-// HACK: this is needed to get the typing to work properly...
-const _SheetCompound: any = _Sheet;
-_SheetCompound.Container = SheetContainer;
-_SheetCompound.Header = SheetHeader;
-_SheetCompound.Content = SheetContent;
-_SheetCompound.Backdrop = SheetBackdrop;
-_SheetCompound.Scroller = SheetScroller;
+export const Sheet: SheetCompound = Object.assign(SheetBase, {
+  Container: SheetContainer,
+  Header: SheetHeader,
+  Content: SheetContent,
+  Backdrop: SheetBackdrop,
+  Scroller: SheetScroller,
+});
 
-export const Sheet = _SheetCompound as SheetCompound;
+// Export types
+export type SheetHeaderProps = SheetDraggableProps;
+export type SheetContentProps = SheetDraggableProps;
+export type {
+  SheetProps,
+  SheetBackdropProps,
+  SheetScrollerProps,
+  SheetContainerProps,
+} from './types';

package/src/sheet.tsx

@@ -19,7 +19,7 @@ import {
   useMotionValue,
   useReducedMotion,
   useTransform,
-} from 'framer-motion';
+} from 'motion/react';
 
 import {
   useModalEffect,
@@ -40,9 +40,9 @@ import { type SheetContextType, type SheetProps } from './types';
 import { SheetScrollerContextProvider, SheetContext } from './context';
 import { getClosest, inDescendingOrder, validateSnapTo } from './utils';
 import { usePreventScroll } from './use-prevent-scroll';
-import styles from './styles';
+import { styles } from './styles';
 
-const Sheet = forwardRef<any, SheetProps>(
+export const Sheet = forwardRef<any, SheetProps>(
   (
     {
       onOpenStart,
@@ -86,7 +86,7 @@ const Sheet = forwardRef<any, SheetProps>(
 
     // +2 for tolerance in case the animated value is slightly off
     const zIndex = useTransform(y, (value) =>
-      value + 2 >= windowHeight ? -1 : 9999999
+      value + 2 >= windowHeight ? -1 : (style?.zIndex ?? 9999)
     );
     const visibility = useTransform(y, (value) =>
       value + 2 >= windowHeight ? 'hidden' : 'visible'
@@ -160,7 +160,7 @@ const Sheet = forwardRef<any, SheetProps>(
         // User flicked the sheet down
         onClose();
       } else {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        // biome-ignore lint/style/noNonNullAssertion: ref should be defined here
         const sheetHeight = sheetRef.current!.getBoundingClientRect().height;
         const currentY = y.get();
 
@@ -186,11 +186,13 @@ const Sheet = forwardRef<any, SheetProps>(
         snapTo = validateSnapTo({ snapTo, sheetHeight });
 
         // Update the spring value so that the sheet is animated to the snap point
-        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)); // prettier-ignore
+          const snapIndex = snapPoints.indexOf(
+            getClosest(snapPoints, snapValue)
+          );
           onSnap(snapIndex);
         }
 
@@ -209,7 +211,7 @@ const Sheet = forwardRef<any, SheetProps>(
       if (!snapPoints || !onSnap) return;
       const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
       onSnap(snapIndex);
-    }, [isOpen]); // eslint-disable-line
+    }, [isOpen]);
 
     useImperativeHandle(ref, () => ({
       y,
@@ -224,7 +226,7 @@ const Sheet = forwardRef<any, SheetProps>(
             sheetHeight,
           });
 
-          void animate(y, snapTo, animationOptions);
+          animate(y, snapTo, animationOptions);
           if (onSnap) onSnap(snapIndex);
           if (snapTo >= sheetHeight) onClose();
         }
@@ -253,7 +255,7 @@ const Sheet = forwardRef<any, SheetProps>(
       };
 
       return disableDrag ? undefined : dragProps;
-    }, [disableDrag, windowHeight]); // eslint-disable-line
+    }, [disableDrag, windowHeight]);
 
     const context: SheetContextType = {
       y,
@@ -299,5 +301,3 @@ const Sheet = forwardRef<any, SheetProps>(
 );
 
 Sheet.displayName = 'Sheet';
-
-export default Sheet;

package/src/styles.ts

@@ -1,6 +1,6 @@
 import { type Properties } from 'csstype';
 
-const styles: Record<string, Properties> = {
+export const styles: Record<string, Properties> = {
   wrapper: {
     position: 'fixed',
     top: 0,
@@ -20,6 +20,7 @@ const styles: Record<string, Properties> = {
     backgroundColor: 'rgba(0, 0, 0, 0.2)',
     touchAction: 'none', // Disable iOS body scrolling
     border: 'none',
+    WebkitTapHighlightColor: 'transparent',
   },
   container: {
     zIndex: 2,
@@ -64,5 +65,3 @@ const styles: Record<string, Properties> = {
     overflowY: 'auto',
   },
 };
-
-export default styles;

package/src/types.tsx

@@ -14,7 +14,7 @@ import {
   type motion,
   type EasingDefinition,
   type Transition,
-} from 'framer-motion';
+} from 'motion/react';
 
 export interface SheetEvents {
   onOpenStart?: () => void;

package/src/use-prevent-scroll.ts

@@ -14,7 +14,6 @@ function chain(...callbacks: any[]): (...args: any[]) => void {
   return (...args: any[]) => {
     for (const callback of callbacks) {
       if (typeof callback === 'function') {
-        // eslint-disable-next-line n/no-callback-literal
         callback(...args);
       }
     }
@@ -157,8 +156,12 @@ function preventScrollMobileSafari() {
   let lastY = 0;
 
   const onTouchStart = (e: TouchEvent) => {
+    // Use `composedPath` to support shadow DOM.
+    const target = e.composedPath()?.[0] as HTMLElement;
+
     // Store the nearest scrollable parent element from the element that the user touched.
-    scrollable = getScrollParent(e.target as Element, true);
+    scrollable = getScrollParent(target, true);
+
     if (
       scrollable === document.documentElement &&
       scrollable === document.body
@@ -207,7 +210,8 @@ function preventScrollMobileSafari() {
   };
 
   const onTouchEnd = (e: TouchEvent) => {
-    const target = e.target as HTMLElement;
+    // Use `composedPath` to support shadow DOM.
+    const target = e.composedPath()?.[0] as HTMLElement;
 
     // Apply this change if we're not already focused on the target element
     if (willOpenKeyboard(target) && target !== document.activeElement) {
@@ -225,7 +229,9 @@ function preventScrollMobileSafari() {
   };
 
   const onFocus = (e: FocusEvent) => {
-    const target = e.target as HTMLElement;
+    // Use `composedPath` to support shadow DOM.
+    const target = e.composedPath()?.[0] as HTMLElement;
+
     if (willOpenKeyboard(target)) {
       // Transform also needs to be applied in the focus event in cases where focus moves
       // other than tapping on an input directly, e.g. the next/previous buttons in the

package/src/utils.ts

@@ -41,9 +41,7 @@ export function validateSnapTo({
   return Math.max(Math.round(snapTo), 0);
 }
 
-export function mergeRefs<T = any>(
-  refs: Array<ForwardedRef<T>>
-): RefCallback<T> {
+export function mergeRefs<T = any>(refs: ForwardedRef<T>[]): RefCallback<T> {
   return (value: any) => {
     refs.forEach((ref: any) => {
       if (typeof ref === 'function') {
@@ -61,12 +59,10 @@ export function isTouchDevice() {
 }
 
 function testPlatform(re: RegExp) {
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
   return typeof window !== 'undefined' && window.navigator != null
     ? re.test(
         // @ts-expect-error
-        // eslint-disable-next-line @typescript-eslint/dot-notation
-        window.navigator['userAgentData']?.platform || window.navigator.platform
+        window.navigator.userAgentData?.platform || window.navigator.platform
       )
     : false;
 }