react-modal-sheet 5.0.0 → 5.1.0

package/src/SheetDragIndicator.tsx

@@ -0,0 +1,52 @@
+import { motion, useTransform } from 'motion/react';
+import React from 'react';
+
+import { useSheetContext } from './context';
+import { styles } from './styles';
+import type { SheetDragIndicatorProps } from './types';
+import { applyStyles } from './utils';
+
+export function SheetDragIndicator({
+  style,
+  className = '',
+  unstyled,
+  ...rest
+}: SheetDragIndicatorProps) {
+  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 (
+    <div
+      className={`react-modal-sheet-drag-indicator-container ${className}`}
+      style={indicatorWrapperStyle}
+      {...rest}
+    >
+      <motion.span
+        className="react-modal-sheet-drag-indicator"
+        style={{ ...indicatorStyle, transform: indicator1Transform }}
+      />
+      <motion.span
+        className="react-modal-sheet-drag-indicator"
+        style={{ ...indicatorStyle, transform: indicator2Transform }}
+      />
+    </div>
+  );
+}

package/src/SheetHeader.tsx

@@ -1,14 +1,18 @@
-import { motion, useTransform } from 'motion/react';
+import { motion } from 'motion/react';
 import React, { forwardRef } from 'react';
 
+import { SheetDragIndicator } from './SheetDragIndicator';
 import { useSheetContext } from './context';
 import { useDragConstraints } from './hooks/use-drag-constraints';
 import { styles } from './styles';
-import { type SheetDraggableProps } from './types';
-import { mergeRefs } from './utils';
+import { type SheetHeaderProps } from './types';
+import { applyStyles, mergeRefs } from './utils';
 
-export const SheetHeader = forwardRef<any, SheetDraggableProps>(
-  ({ children, style, disableDrag, ...rest }, ref) => {
+export const SheetHeader = forwardRef<any, SheetHeaderProps>(
+  (
+    { children, style, disableDrag, unstyled, className = '', ...rest },
+    ref
+  ) => {
     const sheetContext = useSheetContext();
     const dragConstraints = useDragConstraints();
     const dragProps =
@@ -16,35 +20,28 @@ export const SheetHeader = forwardRef<any, SheetDraggableProps>(
         ? undefined
         : sheetContext.dragProps;
 
-    const indicator1Transform = useTransform(
-      sheetContext.indicatorRotation,
-      (r) => `translateX(2px) rotate(${r}deg)`
-    );
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
 
-    const indicator2Transform = useTransform(
-      sheetContext.indicatorRotation,
-      (r) => `translateX(-2px) rotate(${-1 * r}deg)`
-    );
+    const headerWrapperStyle = {
+      ...applyStyles(styles.headerWrapper, isUnstyled),
+      ...style,
+    };
+
+    const headerStyle = applyStyles(styles.header, isUnstyled);
 
     return (
       <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 || (
-          <div className="react-modal-sheet-header" style={styles.header}>
-            <motion.span
-              className="react-modal-sheet-drag-indicator"
-              style={{ ...styles.indicator, transform: indicator1Transform }}
-            />
-            <motion.span
-              className="react-modal-sheet-drag-indicator"
-              style={{ ...styles.indicator, transform: indicator2Transform }}
-            />
+          <div className="react-modal-sheet-header" style={headerStyle}>
+            <SheetDragIndicator />
           </div>
         )}
       </motion.div>

package/src/index.tsx

@@ -1,12 +1,12 @@
 import type { MotionValue } from 'motion/react';
-import type { RefObject } from 'react';
 
 import { SheetBackdrop } from './SheetBackdrop';
 import { SheetContainer } from './SheetContainer';
 import { SheetContent } from './SheetContent';
+import { SheetDragIndicator } from './SheetDragIndicator';
 import { SheetHeader } from './SheetHeader';
 import { Sheet as SheetBase } from './sheet';
-import type { SheetCompound, SheetDraggableProps } from './types';
+import type { SheetCompound } from './types';
 
 export interface SheetRef {
   y: MotionValue<number>;
@@ -18,16 +18,18 @@ export interface SheetRef {
 export const Sheet: SheetCompound = Object.assign(SheetBase, {
   Container: SheetContainer,
   Header: SheetHeader,
+  DragIndicator: SheetDragIndicator,
   Content: SheetContent,
   Backdrop: SheetBackdrop,
 });
 
 // Export types
-export type SheetHeaderProps = SheetDraggableProps;
-export type SheetContentProps = SheetDraggableProps;
 export type {
   SheetBackdropProps,
   SheetContainerProps,
+  SheetContentProps,
+  SheetDragIndicatorProps,
+  SheetHeaderProps,
   SheetProps,
   SheetSnapPoint,
   SheetStateInfo,

package/src/sheet.tsx

@@ -37,6 +37,7 @@ import {
 } from './snap';
 import { styles } from './styles';
 import { type SheetContextType, type SheetProps } from './types';
+import { applyStyles } from './utils';
 
 export const Sheet = forwardRef<any, SheetProps>(
   (
@@ -45,20 +46,21 @@ export const Sheet = forwardRef<any, SheetProps>(
       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,
@@ -337,6 +339,7 @@ export const Sheet = forwardRef<any, SheetProps>(
       avoidKeyboard,
       sheetBoundsRef,
       sheetRef,
+      unstyled,
       y,
     };
 
@@ -347,7 +350,12 @@ export const Sheet = forwardRef<any, SheetProps>(
           ref={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}
         </motion.div>

package/src/styles.ts

@@ -1,69 +1,110 @@
-import { type Properties } from 'csstype';
+import type { CSSProperties } from 'react';
 
 export const 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: {},
   },
-} satisfies Record<string, Properties>;
+} satisfies Record<
+  string,
+  {
+    base: CSSProperties;
+    decorative: CSSProperties;
+  }
+>;

package/src/types.tsx

@@ -1,6 +1,9 @@
 import {
+  type CSSProperties,
   type ComponentPropsWithoutRef,
   type ForwardRefExoticComponent,
+  type FunctionComponent,
+  type HTMLAttributes,
   type ReactNode,
   type RefAttributes,
   type RefObject,
@@ -11,17 +14,20 @@ import {
   type EasingDefinition,
   type MotionProps,
   type MotionValue,
-  type Transition,
   type motion,
 } from 'motion/react';
-import type { RectReadOnly } from 'react-use-measure';
 
 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 {
@@ -30,6 +36,7 @@ export interface SheetTweenConfig {
 }
 
 export type SheetProps = {
+  unstyled?: boolean;
   avoidKeyboard?: boolean;
   children: ReactNode;
   detent?: SheetDetent;
@@ -54,22 +61,28 @@ export type SheetProps = {
   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 = MotionDivProps & {
-  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 SheetBackdropProps = MotionCommonProps & CommonProps;
+
+export type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps;
 
 export interface SheetDragProps {
   drag: 'y';
@@ -86,12 +99,6 @@ export type SheetStateInfo = {
   currentSnap?: number;
 };
 
-export type SheetContentScrollableProps = MotionDivProps & {
-  disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
-  disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
-  scrollRef?: RefObject<HTMLDivElement | null>;
-};
-
 export type SheetSnapPoint = {
   snapIndex: number;
   snapValue: number; // Absolute value from the bottom of the sheet
@@ -107,6 +114,7 @@ export interface SheetContextType {
   avoidKeyboard: boolean;
   sheetBoundsRef: (node: HTMLDivElement | null) => void;
   sheetRef: RefObject<any>;
+  unstyled: boolean;
   y: MotionValue<any>;
 }
 
@@ -116,30 +124,31 @@ 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 ContentScrollableComponent = ForwardRefExoticComponent<
-  SheetContentScrollableProps & RefAttributes<any>
+type ContentComponent = ForwardRefExoticComponent<
+  SheetContentProps & RefAttributes<any>
 >;
 
 interface SheetCompoundComponent {
   Container: ContainerComponent;
-  Header: DraggableComponent;
-  Content: ContentScrollableComponent;
+  Header: HeaderComponent;
+  DragIndicator: FunctionComponent<SheetDragIndicatorProps>;
+  Content: ContentComponent;
   Backdrop: BackdropComponent;
 }
 

package/src/utils.ts

@@ -1,6 +1,13 @@
-import { type ForwardedRef, type RefCallback, type RefObject } from 'react';
+import { type CSSProperties, type ForwardedRef, type RefCallback } from 'react';
 import { IS_SSR } from './constants';
 
+export function applyStyles(
+  styles: { base: CSSProperties; decorative: CSSProperties },
+  unstyled: boolean
+) {
+  return unstyled ? styles.base : { ...styles.base, ...styles.decorative };
+}
+
 export function isAscendingOrder(arr: number[]) {
   for (let i = 0; i < arr.length; i++) {
     if (arr[i + 1] < arr[i]) return false;