react-modal-sheet 1.8.1 → 1.10.0

package/dist/use-prevent-scroll.d.ts

@@ -0,0 +1,11 @@
+interface PreventScrollOptions {
+    /** Whether the scroll lock is disabled. */
+    isDisabled?: boolean;
+}
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+export declare function usePreventScroll(options?: PreventScrollOptions): void;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.1",
+  "version": "1.10.0",
   "license": "MIT",
   "name": "react-modal-sheet",
   "description": "Flexible bottom sheet component for your React apps",
@@ -20,12 +20,12 @@
     "src"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=16"
   },
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
+    "test": "echo \"Todo fix tests...\"",
     "lint": "tsdx lint",
     "typecheck": "tsc --noEmit --skipLibCheck",
     "prepare": "tsdx build",
@@ -50,21 +50,20 @@
     "yarn": true
   },
   "devDependencies": {
-    "@types/react": "17.0.37",
-    "@types/react-dom": "17.0.11",
-    "@types/styled-components": "5.1.7",
-    "csstype": "3.0.6",
-    "framer-motion": "6.3.11",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@types/styled-components": "5.1.26",
+    "csstype": "3.1.1",
+    "framer-motion": "8.4.3",
     "husky": "4.2.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "styled-components": "5.3.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "5.3.6",
     "tsdx": "0.14.1",
-    "tslib": "2.4.0",
-    "typescript": "4.7.3"
+    "typescript": "4.9.4"
   },
   "dependencies": {
-    "@react-aria/overlays": "3.11.0",
-    "react-merge-refs": "1.1.0"
+    "@react-aria/utils": "3.14.2",
+    "react-merge-refs": "2.0.1"
   }
 }

package/src/SheetBackdrop.tsx

@@ -7,7 +7,7 @@ import styles from './styles';
 const isClickable = (props: any) => !!props.onClick || !!props.onTap;
 
 const SheetBackdrop = React.forwardRef<any, SheetBackdropProps>(
-  ({ style = {}, ...rest }, ref) => {
+  ({ style = {}, className = '', ...rest }, ref) => {
     const Comp = isClickable(rest) ? motion.button : motion.div;
     const pointerEvents = isClickable(rest) ? 'auto' : 'none';
 
@@ -15,7 +15,7 @@ const SheetBackdrop = React.forwardRef<any, SheetBackdropProps>(
       <Comp
         {...rest}
         ref={ref}
-        className="react-modal-sheet-backdrop"
+        className={`react-modal-sheet-backdrop ${className}`}
         style={{ ...styles.backdrop, ...style, pointerEvents }}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}

package/src/SheetContainer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { motion } from 'framer-motion';
-import mergeRefs from 'react-merge-refs';
+import { mergeRefs } from 'react-merge-refs';
 
 import { SheetContainerProps } from './types';
 import { useSheetContext } from './context';
@@ -9,7 +9,7 @@ import { MAX_HEIGHT } from './constants';
 import styles from './styles';
 
 const SheetContainer = React.forwardRef<any, SheetContainerProps>(
-  ({ children, style = {}, ...rest }, ref) => {
+  ({ children, style = {}, className = '', ...rest }, ref) => {
     const {
       y,
       isOpen,
@@ -36,7 +36,7 @@ const SheetContainer = React.forwardRef<any, SheetContainerProps>(
       <motion.div
         {...rest}
         ref={mergeRefs([sheetRef, ref])}
-        className="react-modal-sheet-container"
+        className={`react-modal-sheet-container ${className}`}
         style={{
           ...styles.container,
           ...style,

package/src/SheetContent.tsx

@@ -6,7 +6,7 @@ import { useSheetContext } from './context';
 import styles from './styles';
 
 const SheetContent = React.forwardRef<any, SheetDraggableProps>(
-  ({ children, style, disableDrag, ...rest }, ref) => {
+  ({ children, style, disableDrag, className = '', ...rest }, ref) => {
     const { dragProps } = useSheetContext();
     const _dragProps = disableDrag ? undefined : dragProps;
 
@@ -14,7 +14,7 @@ const SheetContent = React.forwardRef<any, SheetDraggableProps>(
       <motion.div
         {...rest}
         ref={ref}
-        className="react-modal-sheet-content"
+        className={`react-modal-sheet-content ${className}`}
         style={{ ...styles.content, ...style }}
         {..._dragProps}
       >

package/src/sheet.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { usePreventScroll } from '@react-aria/overlays';
 
 import {
   animate,
@@ -28,6 +27,7 @@ import {
 import { SheetContextType, SheetProps } from './types';
 import { SheetContext } from './context';
 import { getClosest, inDescendingOrder, validateSnapTo } from './utils';
+import { usePreventScroll } from './use-prevent-scroll';
 import styles from './styles';
 
 const Sheet = React.forwardRef<any, SheetProps>(
@@ -200,6 +200,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
         dragElastic: 0,
         dragConstraints: { top: 0, bottom: 0 },
         dragMomentum: false,
+        dragPropagation: false,
         onDrag,
         onDragEnd,
       };

package/src/styles.ts

@@ -20,6 +20,7 @@ const styles: { [key: string]: CSS.Properties } = {
     height: '100%',
     backgroundColor: 'rgba(51, 51, 51, 0.5)',
     touchAction: 'none', // Disable iOS body scrolling
+    border: 'none',
   },
   container: {
     zIndex: 2,

package/src/types.tsx

@@ -1,9 +1,9 @@
 import {
   DragHandlers,
   MotionValue,
-  useSpring,
   MotionProps,
   AnimationOptions,
+  Spring,
 } from 'framer-motion';
 
 export type SheetEvents = {
@@ -16,6 +16,10 @@ export type SheetEvents = {
 
 export type SheetDetent = 'full-height' | 'content-height';
 
+type CommonProps = MotionProps & {
+  className?: string;
+};
+
 export type SheetProps = {
   isOpen: boolean;
   children: React.ReactNode;
@@ -25,21 +29,21 @@ export type SheetProps = {
   snapPoints?: number[];
   detent?: SheetDetent;
   initialSnap?: number; // index of snap points array
-  springConfig?: Parameters<typeof useSpring>[1];
+  springConfig?: Omit<Spring, 'type'>;
   disableDrag?: boolean;
   prefersReducedMotion?: boolean;
 } & SheetEvents &
   React.HTMLAttributes<HTMLDivElement>;
 
 export type SheetContainerProps = Omit<
-  MotionProps,
+  CommonProps,
   'initial' | 'animate' | 'exit' | 'onAnimationComplete'
 > & {
   children: React.ReactNode;
 };
 
 export type SheetDraggableProps = Omit<
-  MotionProps,
+  CommonProps,
   | 'drag'
   | 'dragElastic'
   | 'dragConstraints'
@@ -53,7 +57,7 @@ export type SheetDraggableProps = Omit<
 };
 
 export type SheetBackdropProps = Omit<
-  MotionProps,
+  CommonProps,
   'initial' | 'animate' | 'exit'
 >;
 
@@ -62,6 +66,7 @@ export type SheetDragProps = {
   dragElastic: number;
   dragConstraints: any;
   dragMomentum: boolean;
+  dragPropagation: boolean;
   onDrag: DragHandlers['onDrag'];
   onDragEnd: DragHandlers['onDragEnd'];
 };

package/src/use-prevent-scroll.ts

@@ -0,0 +1,303 @@
+// Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts
+import {
+  chain,
+  getScrollParent,
+  isIOS,
+  useLayoutEffect,
+} from '@react-aria/utils';
+
+interface PreventScrollOptions {
+  /** Whether the scroll lock is disabled. */
+  isDisabled?: boolean;
+}
+
+// @ts-ignore
+const visualViewport = typeof window !== 'undefined' && window.visualViewport;
+
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+  'checkbox',
+  'radio',
+  'range',
+  'color',
+  'file',
+  'image',
+  'button',
+  'submit',
+  'reset',
+]);
+
+// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
+let preventScrollCount = 0;
+let restore: any;
+
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+export function usePreventScroll(options: PreventScrollOptions = {}) {
+  let { isDisabled } = options;
+
+  useLayoutEffect(() => {
+    if (isDisabled) {
+      return;
+    }
+
+    preventScrollCount++;
+    if (preventScrollCount === 1) {
+      if (isIOS()) {
+        restore = preventScrollMobileSafari();
+      } else {
+        restore = preventScrollStandard();
+      }
+    }
+
+    return () => {
+      preventScrollCount--;
+      if (preventScrollCount === 0) {
+        restore();
+      }
+    };
+  }, [isDisabled]);
+}
+
+// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
+// add some padding to prevent the page from shifting when the scrollbar is hidden.
+function preventScrollStandard() {
+  return chain(
+    setStyle(
+      document.documentElement,
+      'paddingRight',
+      `${window.innerWidth - document.documentElement.clientWidth}px`
+    ),
+    setStyle(document.documentElement, 'overflow', 'hidden')
+  );
+}
+
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
+//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
+//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
+//    into view ourselves, without scrolling the whole page.
+// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
+//    same visually, but makes the actual scroll position always zero. This is required to make all of the
+//    above work or Safari will still try to scroll the page when focusing an input.
+// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
+//    to navigate to an input with the next/previous buttons that's outside a modal.
+function preventScrollMobileSafari() {
+  let scrollable: Element;
+  let lastY = 0;
+  let onTouchStart = (e: TouchEvent) => {
+    // Store the nearest scrollable parent element from the element that the user touched.
+    scrollable = getScrollParent(e.target as Element);
+    if (
+      scrollable === document.documentElement &&
+      scrollable === document.body
+    ) {
+      return;
+    }
+
+    lastY = e.changedTouches[0].pageY;
+  };
+
+  let onTouchMove = (e: TouchEvent) => {
+    // Prevent scrolling the window.
+    if (
+      scrollable === document.documentElement ||
+      scrollable === document.body
+    ) {
+      e.preventDefault();
+      return;
+    }
+
+    // Prevent scrolling up when at the top and scrolling down when at the bottom
+    // of a nested scrollable area, otherwise mobile Safari will start scrolling
+    // the window instead. Unfortunately, this disables bounce scrolling when at
+    // the top but it's the best we can do.
+    let y = e.changedTouches[0].pageY;
+    let scrollTop = scrollable.scrollTop;
+    let bottom = scrollable.scrollHeight - scrollable.clientHeight;
+
+    // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files
+    if (bottom === 0) {
+      return;
+    }
+
+    if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {
+      e.preventDefault();
+    }
+
+    lastY = y;
+  };
+
+  let onTouchEnd = (e: TouchEvent) => {
+    let target = e.target as HTMLElement;
+
+    // Apply this change if we're not already focused on the target element
+    if (willOpenKeyboard(target) && target !== document.activeElement) {
+      e.preventDefault();
+
+      // Apply a transform to trick Safari into thinking the input is at the top of the page
+      // so it doesn't try to scroll it into view. When tapping on an input, this needs to
+      // be done before the "focus" event, so we have to focus the element ourselves.
+      target.style.transform = 'translateY(-2000px)';
+      target.focus();
+      requestAnimationFrame(() => {
+        target.style.transform = '';
+      });
+    }
+  };
+
+  let onFocus = (e: FocusEvent) => {
+    let target = e.target 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
+      // software keyboard. In these cases, it seems applying the transform in the focus event
+      // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+      target.style.transform = 'translateY(-2000px)';
+      requestAnimationFrame(() => {
+        target.style.transform = '';
+
+        // This will have prevented the browser from scrolling the focused element into view,
+        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
+        if (visualViewport) {
+          if (visualViewport.height < window.innerHeight) {
+            // If the keyboard is already visible, do this after one additional frame
+            // to wait for the transform to be removed.
+            requestAnimationFrame(() => {
+              scrollIntoView(target);
+            });
+          } else {
+            // Otherwise, wait for the visual viewport to resize before scrolling so we can
+            // measure the correct position to scroll to.
+            visualViewport.addEventListener(
+              'resize',
+              () => scrollIntoView(target),
+              { once: true }
+            );
+          }
+        }
+      });
+    }
+  };
+
+  let onWindowScroll = () => {
+    // Last resort. If the window scrolled, scroll it back to the top.
+    // It should always be at the top because the body will have a negative margin (see below).
+    window.scrollTo(0, 0);
+  };
+
+  // Record the original scroll position so we can restore it.
+  // Then apply a negative margin to the body to offset it by the scroll position. This will
+  // enable us to scroll the window to the top, which is required for the rest of this to work.
+  let scrollX = window.pageXOffset;
+  let scrollY = window.pageYOffset;
+
+  let restoreStyles = chain(
+    setStyle(
+      document.documentElement,
+      'paddingRight',
+      `${window.innerWidth - document.documentElement.clientWidth}px`
+    ),
+    setStyle(document.documentElement, 'overflow', 'hidden'),
+    setStyle(document.body, 'marginTop', `-${scrollY}px`)
+  );
+
+  // Scroll to the top. The negative margin on the body will make this appear the same.
+  window.scrollTo(0, 0);
+
+  let removeEvents = chain(
+    addEvent(document, 'touchstart', onTouchStart, {
+      passive: false,
+      capture: true,
+    }),
+    addEvent(document, 'touchmove', onTouchMove, {
+      passive: false,
+      capture: true,
+    }),
+    addEvent(document, 'touchend', onTouchEnd, {
+      passive: false,
+      capture: true,
+    }),
+    addEvent(document, 'focus', onFocus, true),
+    addEvent(window, 'scroll', onWindowScroll)
+  );
+
+  return () => {
+    // Restore styles and scroll the page back to where it was.
+    restoreStyles();
+    removeEvents();
+    window.scrollTo(scrollX, scrollY);
+  };
+}
+
+// Sets a CSS property on an element, and returns a function to revert it to the previous value.
+function setStyle(element: any, style: string, value: string) {
+  let cur = element.style[style];
+  element.style[style] = value;
+
+  return () => {
+    element.style[style] = cur;
+  };
+}
+
+// Adds an event listener to an element, and returns a function to remove it.
+function addEvent<K extends keyof GlobalEventHandlersEventMap>(
+  target: EventTarget,
+  event: K,
+  handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions
+) {
+  target.addEventListener(event, handler as any, options);
+  return () => {
+    target.removeEventListener(event, handler as any, options);
+  };
+}
+
+function scrollIntoView(target: Element) {
+  let root = document.scrollingElement || document.documentElement;
+  while (target && target !== root) {
+    // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+    let scrollable = getScrollParent(target);
+    if (
+      scrollable !== document.documentElement &&
+      scrollable !== document.body &&
+      scrollable !== target
+    ) {
+      let scrollableTop = scrollable.getBoundingClientRect().top;
+      let targetTop = target.getBoundingClientRect().top;
+      if (targetTop > scrollableTop + target.clientHeight) {
+        scrollable.scrollTop += targetTop - scrollableTop;
+      }
+    }
+
+    target = scrollable.parentElement as any;
+  }
+}
+
+function willOpenKeyboard(target: Element) {
+  return (
+    (target instanceof HTMLInputElement &&
+      !nonTextInputTypes.has(target.type)) ||
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLElement && target.isContentEditable)
+  );
+}