react-modal-sheet 1.11.1 → 2.1.0

package/src/index.tsx

@@ -5,6 +5,7 @@ import SheetContainer from './SheetContainer';
 import SheetContent from './SheetContent';
 import SheetHeader from './SheetHeader';
 import SheetBackdrop from './SheetBackdrop';
+import SheetScroller from './SheetScroller';
 import { SheetCompound } from './types';
 
 export type SheetRef = {
@@ -18,5 +19,6 @@ _SheetCompound.Container = SheetContainer;
 _SheetCompound.Header = SheetHeader;
 _SheetCompound.Content = SheetContent;
 _SheetCompound.Backdrop = SheetBackdrop;
+_SheetCompound.Scroller = SheetScroller;
 
 export default _SheetCompound as SheetCompound;

package/src/sheet.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+
 import {
   animate,
   AnimatePresence,
@@ -19,14 +20,15 @@ import {
 } from './hooks';
 
 import {
-  DEFAULT_SPRING_CONFIG,
+  REDUCED_MOTION_TWEEN_CONFIG,
+  DEFAULT_TWEEN_CONFIG,
   DRAG_CLOSE_THRESHOLD,
   DRAG_VELOCITY_THRESHOLD,
   IS_SSR,
 } from './constants';
 
 import { SheetContextType, SheetProps } from './types';
-import { SheetContext } from './context';
+import { SheetScrollerContextProvider, SheetContext } from './context';
 import { getClosest, inDescendingOrder, validateSnapTo } from './utils';
 import { usePreventScroll } from './use-prevent-scroll';
 import styles from './styles';
@@ -41,6 +43,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
       onCloseEnd,
       onSnap,
       children,
+      disableScrollLocking = false,
       isOpen,
       snapPoints,
       rootId,
@@ -48,9 +51,9 @@ const Sheet = React.forwardRef<any, SheetProps>(
       style,
       detent = 'full-height',
       initialSnap = 0,
-      springConfig = DEFAULT_SPRING_CONFIG,
       disableDrag = false,
       prefersReducedMotion = false,
+      tweenConfig = DEFAULT_TWEEN_CONFIG,
       ...rest
     },
     ref
@@ -60,9 +63,10 @@ const Sheet = React.forwardRef<any, SheetProps>(
     const windowHeight = useWindowHeight();
     const shouldReduceMotion = useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
-    const animationOptions: Transition = reduceMotion
-      ? { type: 'tween', duration: 0.01 }
-      : { type: 'spring', ...springConfig };
+    const animationOptions: Transition = {
+      type: 'tween',
+      ...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),
+    };
 
     // NOTE: the inital value for `y` doesn't matter since it is overwritten by
     // the value driven by the `AnimatePresence` component when the sheet is opened
@@ -204,7 +208,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
 
     // Framer Motion should handle body scroll locking but it's not working
     // properly on iOS. Scroll locking from React Aria seems to work much better.
-    usePreventScroll({ isDisabled: !isOpen });
+    usePreventScroll({ isDisabled: disableScrollLocking === true || !isOpen });
 
     const dragProps = React.useMemo(() => {
       const dragProps: SheetContextType['dragProps'] = {
@@ -233,6 +237,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
       windowHeight,
       animationOptions,
       reduceMotion,
+      disableDrag,
     };
 
     const sheet = (
@@ -244,11 +249,13 @@ const Sheet = React.forwardRef<any, SheetProps>(
         >
           <AnimatePresence>
             {/* NOTE: AnimatePresence requires us to set keys to children */}
-            {isOpen
-              ? React.Children.map(children, (child: any, i) =>
+            {isOpen ? (
+              <SheetScrollerContextProvider>
+                {React.Children.map(children, (child: any, i) =>
                   React.cloneElement(child, { key: `sheet-child-${i}` })
-                )
-              : null}
+                )}
+              </SheetScrollerContextProvider>
+            ) : null}
           </AnimatePresence>
         </motion.div>
       </SheetContext.Provider>

package/src/styles.ts

@@ -17,7 +17,7 @@ const styles: { [key: string]: CSS.Properties } = {
     left: 0,
     width: '100%',
     height: '100%',
-    backgroundColor: 'rgba(51, 51, 51, 0.5)',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
     touchAction: 'none', // Disable iOS body scrolling
     border: 'none',
   },
@@ -53,10 +53,16 @@ const styles: { [key: string]: CSS.Properties } = {
     backgroundColor: '#ddd',
   },
   content: {
-    flex: 1,
-    overflow: 'auto',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '0px',
     position: 'relative',
   },
+  scroller: {
+    height: '100%',
+    overflowY: 'auto',
+  },
 };
 
 export default styles;

package/src/types.tsx

@@ -2,9 +2,9 @@ import {
   DragHandlers,
   MotionValue,
   MotionProps,
-  Transition,
-  Spring,
   motion,
+  EasingDefinition,
+  Transition,
 } from 'framer-motion';
 
 export type SheetEvents = {
@@ -21,6 +21,11 @@ type CommonProps = MotionProps & {
   className?: string;
 };
 
+export type SheetTweenConfig = {
+  ease: EasingDefinition;
+  duration: number;
+};
+
 export type SheetProps = {
   isOpen: boolean;
   children: React.ReactNode;
@@ -30,8 +35,9 @@ export type SheetProps = {
   snapPoints?: number[];
   detent?: SheetDetent;
   initialSnap?: number; // index of snap points array
-  springConfig?: Omit<Spring, 'type'>;
+  tweenConfig?: SheetTweenConfig;
   disableDrag?: boolean;
+  disableScrollLocking?: boolean;
   prefersReducedMotion?: boolean;
 } & SheetEvents &
   React.ComponentPropsWithoutRef<typeof motion.div>;
@@ -62,6 +68,10 @@ export type SheetBackdropProps = Omit<
   'initial' | 'animate' | 'exit'
 >;
 
+export type SheetScrollerProps = React.HTMLAttributes<HTMLDivElement> & {
+  draggableAt?: 'top' | 'bottom' | 'both';
+};
+
 export type SheetDragProps = {
   drag: 'y';
   dragElastic: number;
@@ -85,6 +95,13 @@ export type SheetContextType = {
   windowHeight: number;
   animationOptions: Transition;
   reduceMotion: boolean;
+  disableDrag: boolean;
+};
+
+export type SheetScrollerContextType = {
+  disableDrag: boolean;
+  setDragDisabled: () => void;
+  setDragEnabled: () => void;
 };
 
 type ContainerComponent = React.ForwardRefExoticComponent<
@@ -103,11 +120,16 @@ type SheetComponent = React.ForwardRefExoticComponent<
   SheetProps & React.RefAttributes<any>
 >;
 
+type ScrollerComponent = React.ForwardRefExoticComponent<
+  SheetScrollerProps & React.RefAttributes<any>
+>;
+
 type SheetCompoundComponent = {
   Container: ContainerComponent;
   Header: DraggableComponent;
   Content: DraggableComponent;
   Backdrop: BackdropComponent;
+  Scroller: ScrollerComponent;
 };
 
 export type SheetCompound = SheetComponent & SheetCompoundComponent;

package/src/utils.ts

@@ -15,8 +15,6 @@ export function getClosest(nums: number[], goal: number) {
   return closest;
 }
 
-const highlightId = 'react-modal-sheet-highlight';
-
 export function applyRootStyles(rootId: string) {
   const body = document.querySelector('body') as HTMLBodyElement;
   const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
@@ -28,33 +26,17 @@ export function applyRootStyles(rootId: string) {
     body.style.backgroundColor = '#000';
     root.style.overflow = 'hidden';
     root.style.willChange = 'transform';
-    root.style.transition = 'transform 200ms linear';
+    root.style.transition =
+      'transform 200ms ease-in-out, border-radius 200ms linear';
     root.style.transform = `translateY(calc(env(safe-area-inset-top) + ${p / 2}px)) scale(${s})`; // prettier-ignore
     root.style.borderTopRightRadius = '10px';
     root.style.borderTopLeftRadius = '10px';
-
-    // Add highlighed overlay to emphasize the modality effect
-    const highlight = document.createElement('div');
-    highlight.setAttribute('aria-hidden', 'true');
-    highlight.id = highlightId;
-    highlight.style.position = 'absolute';
-    highlight.style.top = '0px';
-    highlight.style.left = '0px';
-    highlight.style.bottom = '0px';
-    highlight.style.right = '0px';
-    highlight.style.opacity = '0';
-    highlight.style.transition = 'opacity 200ms linear';
-    highlight.style.backgroundColor = 'rgba(150, 150, 150, 0.1)';
-
-    root.appendChild(highlight);
-    requestAnimationFrame(() => (highlight.style.opacity = '1'));
   }
 }
 
 export function cleanupRootStyles(rootId: string) {
   const body = document.querySelector('body') as HTMLBodyElement;
   const root = document.getElementById(rootId) as HTMLDivElement;
-  const highlight = document.getElementById(highlightId) as HTMLDivElement;
 
   function onTransitionEnd() {
     root.style.removeProperty('overflow');
@@ -62,15 +44,13 @@ export function cleanupRootStyles(rootId: string) {
     root.style.removeProperty('transition');
     body.style.removeProperty('background-color');
     root.removeEventListener('transitionend', onTransitionEnd);
-    highlight.parentNode?.removeChild(highlight);
   }
 
-  if (root && highlight) {
+  if (root) {
     // Start animating back
     root.style.removeProperty('border-top-right-radius');
     root.style.removeProperty('border-top-left-radius');
     root.style.removeProperty('transform');
-    highlight.style.opacity = '0';
 
     // Remove temp properties after animation is finished
     root.addEventListener('transitionend', onTransitionEnd);
@@ -115,3 +95,8 @@ export function mergeRefs<T = any>(
     });
   };
 }
+
+export function isTouchDevice() {
+  if (typeof window === 'undefined') return false;
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}