react-modal-sheet 4.4.0 → 5.1.0

package/src/snap.ts

@@ -0,0 +1,226 @@
+import type { SheetSnapPoint } from './types';
+import { isAscendingOrder } from './utils';
+
+/**
+ * Convert negative / percentage snap points to absolute values
+ *
+ * Example output:
+ *
+ * ```json
+ * [
+ *     {
+ *         "snapIndex": 0, // <-- bottom snap point
+ *         "snapValue": 0,
+ *         "snapValueY": 810
+ *     },
+ *     {
+ *         "snapIndex": 1,
+ *         "snapValue": 170,
+ *         "snapValueY": 640
+ *     },
+ *     {
+ *         "snapIndex": 2,
+ *         "snapValue": 405,
+ *         "snapValueY": 405
+ *     },
+ *     {
+ *         "snapIndex": 3,
+ *         "snapValue": 760,
+ *         "snapValueY": 50
+ *     },
+ *     {
+ *         "snapIndex": 4, // <-- top snap point
+ *         "snapValue": 810,
+ *         "snapValueY": 0
+ *     }
+ * ]
+ * ```
+ */
+export function computeSnapPoints({
+  snapPointsProp,
+  sheetHeight,
+}: {
+  snapPointsProp: number[];
+  sheetHeight: number;
+}): SheetSnapPoint[] {
+  if (sheetHeight <= 0) {
+    console.warn(
+      `Sheet height is ${sheetHeight}, cannot compute snap points. ` +
+        'Make sure the sheet is mounted and has a valid height.'
+    );
+    return [];
+  }
+
+  const snapPointValues = snapPointsProp.map((point) => {
+    // Percentage values e.g. between 0.0 and 1.0
+    if (point > 0 && point <= 1) {
+      return Math.round(point * sheetHeight);
+    }
+
+    return point < 0 ? sheetHeight + point : point; // negative values
+  });
+
+  console.assert(
+    isAscendingOrder(snapPointValues),
+    `Snap points need to be in ascending order got: [${snapPointsProp.join(', ')}]`
+  );
+
+  // Make sure all snap points are within the sheet height
+  snapPointValues.forEach((snap) => {
+    if (snap < 0 || snap > sheetHeight) {
+      console.warn(
+        `Snap point ${snap} is outside of the sheet height ${sheetHeight}. ` +
+          'This can cause unexpected behavior. Consider adjusting your snap points.'
+      );
+    }
+  });
+
+  if (!snapPointValues.includes(sheetHeight)) {
+    console.warn(
+      'Snap points do not include the sheet height.' +
+        'Please include `1` as the last snap point or it will be included automatically.' +
+        'This is to ensure the sheet can be fully opened.'
+    );
+    snapPointValues.push(sheetHeight);
+  }
+
+  return snapPointValues.map((snap, index) => ({
+    snapIndex: index,
+    snapValue: snap, // Absolute value from the bottom of the sheet
+    snapValueY: sheetHeight - snap, // Y value is inverted as `y = 0` means sheet is at the top
+  }));
+}
+
+function findClosestSnapPoint({
+  snapPoints,
+  currentY,
+}: {
+  snapPoints: SheetSnapPoint[];
+  currentY: number;
+}) {
+  return snapPoints.reduce((closest, snap) =>
+    Math.abs(snap.snapValueY - currentY) <
+    Math.abs(closest.snapValueY - currentY)
+      ? snap
+      : closest
+  );
+}
+
+function findNextSnapPointInDirection({
+  y,
+  snapPoints,
+  dragDirection,
+}: {
+  y: number;
+  snapPoints: SheetSnapPoint[];
+  dragDirection: 'up' | 'down';
+}) {
+  // NOTE: lower Y means higher in the sheet position!
+  if (dragDirection === 'down') {
+    /**
+     * Example:
+     *
+     * [
+     *   { snapIndex: 0, snapValueY: 810 },
+     *   { snapIndex: 1, snapValueY: 640 },
+     *   { snapIndex: 2, snapValueY: 405 }, <-- next down
+     *   ------------- Y = 60 ------------
+     *   { snapIndex: 3, snapValueY: 50 },
+     *   { snapIndex: 4, snapValueY: 0 },
+     * ]
+     */
+    return snapPoints
+      .slice()
+      .reverse()
+      .find((s) => s.snapValueY > y);
+  } else {
+    /**
+     * Example:
+     * [
+     *   { snapIndex: 0, snapValueY: 810 },
+     *   { snapIndex: 1, snapValueY: 640 },
+     *   { snapIndex: 2, snapValueY: 405 },
+     *   ------------- Y = 60 ------------
+     *   { snapIndex: 3, snapValueY: 50 }, <-- next up
+     *   { snapIndex: 4, snapValueY: 0 },
+     * ]
+     */
+    return snapPoints.find((s) => s.snapValueY < y);
+  }
+}
+export function handleHighVelocityDrag({
+  dragDirection,
+  snapPoints,
+}: {
+  dragDirection: 'up' | 'down';
+  snapPoints: SheetSnapPoint[];
+}) {
+  // Go to either the last or the first snap point depending on the direction
+  const bottomSnapPoint = snapPoints[0];
+  const topSnapPoint = snapPoints[snapPoints.length - 1];
+
+  if (dragDirection === 'down') {
+    return {
+      yTo: bottomSnapPoint.snapValueY,
+      snapIndex: bottomSnapPoint.snapIndex,
+    };
+  }
+  return {
+    yTo: topSnapPoint.snapValueY,
+    snapIndex: topSnapPoint.snapIndex,
+  };
+}
+
+export function handleLowVelocityDrag({
+  currentSnapPoint,
+  currentY,
+  dragDirection,
+  snapPoints,
+  velocity,
+}: {
+  currentSnapPoint: SheetSnapPoint;
+  currentY: number;
+  dragDirection: 'up' | 'down';
+  snapPoints: SheetSnapPoint[];
+  velocity: number;
+}) {
+  const closestSnapRelativeToCurrentY = findClosestSnapPoint({
+    snapPoints,
+    currentY,
+  });
+
+  /**
+   * If velocity is very low the user has stopped the sheet to a specific
+   * position and we should snap to the closest snap point as there is no
+   * "momentum" that would push the sheet further to the given direction
+   */
+  if (Math.abs(velocity) < 20) {
+    return {
+      yTo: closestSnapRelativeToCurrentY.snapValueY,
+      snapIndex: closestSnapRelativeToCurrentY.snapIndex,
+    };
+  }
+
+  /**
+   * If the dragging has a bit more velocity, we instead want to go to
+   * the next snap point in the given direction if it exists
+   */
+  const nextSnapInDirectionRelativeToCurrentY = findNextSnapPointInDirection({
+    y: currentY,
+    snapPoints,
+    dragDirection,
+  });
+
+  if (nextSnapInDirectionRelativeToCurrentY) {
+    return {
+      yTo: nextSnapInDirectionRelativeToCurrentY.snapValueY,
+      snapIndex: nextSnapInDirectionRelativeToCurrentY.snapIndex,
+    };
+  }
+
+  // No snap point down, stay at current
+  return {
+    yTo: currentSnapPoint.snapValueY,
+    snapIndex: currentSnapPoint.snapIndex,
+  };
+}

package/src/styles.ts

@@ -1,69 +1,110 @@
-import { type Properties } from 'csstype';
+import type { CSSProperties } from 'react';
 
-export const styles: Record<string, Properties> = {
-  wrapper: {
-    position: 'fixed',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    overflow: 'hidden',
-    pointerEvents: 'none',
+export const styles = {
+  root: {
+    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: {},
   },
-};
+} satisfies Record<
+  string,
+  {
+    base: CSSProperties;
+    decorative: CSSProperties;
+  }
+>;

package/src/types.tsx

@@ -1,34 +1,33 @@
 import {
+  type CSSProperties,
   type ComponentPropsWithoutRef,
   type ForwardRefExoticComponent,
+  type FunctionComponent,
+  type HTMLAttributes,
   type ReactNode,
   type RefAttributes,
   type RefObject,
 } from 'react';
 
 import {
-  type DragHandlers,
-  type MotionValue,
+  type DragHandler,
+  type EasingDefinition,
   type MotionProps,
+  type MotionValue,
   type motion,
-  type EasingDefinition,
-  type Transition,
 } from 'motion/react';
 
-export interface SheetEvents {
-  onOpenStart?: () => void;
-  onOpenEnd?: () => void;
-  onCloseStart?: () => void;
-  onCloseEnd?: () => void;
-  onSnap?: (index: number) => void;
-}
-
-export type SheetDetent = 'full-height' | 'content-height';
+export type SheetDetent = 'default' | 'full' | 'content';
 
-type CommonProps = MotionProps & {
+type CommonProps = {
   className?: string;
+  style?: CSSProperties;
+  unstyled?: boolean;
 };
 
+type MotionCommonProps = Omit<MotionProps, 'initial' | 'animate' | 'exit'> &
+  CommonProps;
+
 type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
 
 export interface SheetTweenConfig {
@@ -37,81 +36,86 @@ export interface SheetTweenConfig {
 }
 
 export type SheetProps = {
-  isOpen: boolean;
+  unstyled?: boolean;
+  avoidKeyboard?: boolean;
   children: ReactNode;
-  onClose: () => void;
-  /** @deprecated Use `modalEffectRootId` instead! */
-  rootId?: string;
-  modalEffectRootId?: string;
-  mountPoint?: Element;
-  snapPoints?: number[];
   detent?: SheetDetent;
-  initialSnap?: number; // index of snap points array
-  tweenConfig?: SheetTweenConfig;
+  disableDismiss?: boolean;
   disableDrag?: boolean;
   disableScrollLocking?: boolean;
-  prefersReducedMotion?: boolean;
-  dragVelocityThreshold?: number;
   dragCloseThreshold?: number;
+  dragVelocityThreshold?: number;
+  initialSnap?: number; // index of snap points array
+  isOpen: boolean;
+  modalEffectRootId?: string;
   modalEffectThreshold?: number;
-} & SheetEvents &
-  MotionDivProps;
+  mountPoint?: Element;
+  prefersReducedMotion?: boolean;
+  snapPoints?: number[];
+  tweenConfig?: SheetTweenConfig;
+  onClose: () => void;
+  onCloseEnd?: () => void;
+  onCloseStart?: () => void;
+  onOpenEnd?: () => void;
+  onOpenStart?: () => void;
+  onSnap?: (index: number) => void;
+} & MotionDivProps;
 
-export type SheetContainerProps = Omit<
-  CommonProps,
-  'initial' | 'animate' | 'exit' | 'onAnimationComplete'
-> & {
-  children: ReactNode;
-};
+export type SheetContainerProps = MotionCommonProps &
+  CommonProps & {
+    children: ReactNode;
+  };
 
-export type SheetDraggableProps = Omit<
-  CommonProps,
-  | 'drag'
-  | 'dragElastic'
-  | 'dragConstraints'
-  | 'dragMomentum'
-  | 'onDrag'
-  | 'onDragStart'
-  | 'onDragEnd'
-> & {
-  children?: ReactNode;
-  disableDrag?: boolean;
-};
+export type SheetHeaderProps = MotionDivProps &
+  CommonProps & {
+    children?: ReactNode;
+    disableDrag?: boolean;
+  };
 
-export type SheetBackdropProps = Omit<
-  CommonProps,
-  'initial' | 'animate' | 'exit'
->;
+export type SheetContentProps = MotionDivProps &
+  CommonProps & {
+    disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
+    disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
+    scrollRef?: RefObject<HTMLDivElement | null>;
+  };
 
-export type SheetScrollerProps = MotionDivProps & {
-  draggableAt?: 'top' | 'bottom' | 'both';
-  disableScroll?: boolean;
-  autoPadding?: boolean;
-};
+export type SheetBackdropProps = MotionCommonProps & CommonProps;
+
+export type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps;
 
 export interface SheetDragProps {
   drag: 'y';
   dragElastic: number;
   dragMomentum: boolean;
   dragPropagation: boolean;
-  onDrag: DragHandlers['onDrag'];
-  onDragStart: DragHandlers['onDragStart'];
-  onDragEnd: DragHandlers['onDragEnd'];
+  onDrag: DragHandler;
+  onDragStart: DragHandler;
+  onDragEnd: DragHandler;
 }
 
+export type SheetStateInfo = {
+  scrollPosition?: 'top' | 'bottom' | 'middle';
+  currentSnap?: number;
+};
+
+export type SheetSnapPoint = {
+  snapIndex: number;
+  snapValue: number; // Absolute value from the bottom of the sheet
+  snapValueY: number; // Y value is inverted as `y = 0` means sheet is at the top
+};
+
 export interface SheetContextType {
-  y: MotionValue<any>;
-  sheetRef: RefObject<any>;
-  isOpen: boolean;
+  currentSnap?: number;
   detent: SheetDetent;
-  initialSnap: SheetProps['initialSnap'];
-  indicatorRotation: MotionValue<number>;
-  callbacks: RefObject<SheetEvents>;
-  dragProps?: SheetDragProps;
-  windowHeight: number;
-  animationOptions: Transition;
-  reduceMotion: boolean;
   disableDrag: boolean;
+  dragProps?: SheetDragProps;
+  indicatorRotation: MotionValue<number>;
+  avoidKeyboard: boolean;
+  sheetBoundsRef: (node: HTMLDivElement | null) => void;
+  sheetRef: RefObject<any>;
+  unstyled: boolean;
+  y: MotionValue<any>;
 }
 
 export interface SheetScrollerContextType {
@@ -120,32 +124,32 @@ export interface SheetScrollerContextType {
   setDragEnabled: () => void;
 }
 
+type SheetComponent = ForwardRefExoticComponent<
+  SheetProps & RefAttributes<any>
+>;
+
 type ContainerComponent = ForwardRefExoticComponent<
   SheetContainerProps & RefAttributes<any>
 >;
 
-type DraggableComponent = ForwardRefExoticComponent<
-  SheetDraggableProps & RefAttributes<any>
+type HeaderComponent = ForwardRefExoticComponent<
+  SheetHeaderProps & RefAttributes<any>
 >;
 
 type BackdropComponent = ForwardRefExoticComponent<
   SheetBackdropProps & RefAttributes<any>
 >;
 
-type SheetComponent = ForwardRefExoticComponent<
-  SheetProps & RefAttributes<any>
->;
-
-type ScrollerComponent = ForwardRefExoticComponent<
-  SheetScrollerProps & RefAttributes<any>
+type ContentComponent = ForwardRefExoticComponent<
+  SheetContentProps & RefAttributes<any>
 >;
 
 interface SheetCompoundComponent {
   Container: ContainerComponent;
-  Header: DraggableComponent;
-  Content: DraggableComponent;
+  Header: HeaderComponent;
+  DragIndicator: FunctionComponent<SheetDragIndicatorProps>;
+  Content: ContentComponent;
   Backdrop: BackdropComponent;
-  Scroller: ScrollerComponent;
 }
 
 export type SheetCompound = SheetComponent & SheetCompoundComponent;