react-modal-sheet 3.3.0 → 3.4.1

package/src/use-prevent-scroll.ts

@@ -1,18 +1,69 @@
-// 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';
+// This code originates from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
+
+import { useIsomorphicLayoutEffect } from './hooks';
+import { isIOS } from './utils';
+
+const KEYBOARD_BUFFER = 24;
 
 interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
   isDisabled?: boolean;
 }
 
-const visualViewport =
-  typeof window !== 'undefined' ? (window as any).visualViewport : undefined;
+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);
+      }
+    }
+  };
+}
+
+const visualViewport = typeof document !== 'undefined' && window.visualViewport;
+
+export function isScrollable(
+  node: Element | null,
+  checkForOverflow?: boolean
+): boolean {
+  if (!node) {
+    return false;
+  }
+
+  const style = window.getComputedStyle(node);
+
+  let isScrollable = /(auto|scroll)/.test(
+    style.overflow + style.overflowX + style.overflowY
+  );
+
+  if (isScrollable && checkForOverflow) {
+    isScrollable =
+      node.scrollHeight !== node.clientHeight ||
+      node.scrollWidth !== node.clientWidth;
+  }
+
+  return isScrollable;
+}
+
+export function getScrollParent(
+  node: Element,
+  checkForOverflow?: boolean
+): Element {
+  let scrollableNode: Element | null = node;
+
+  if (isScrollable(scrollableNode, checkForOverflow)) {
+    scrollableNode = scrollableNode.parentElement;
+  }
+
+  while (scrollableNode && !isScrollable(scrollableNode, checkForOverflow)) {
+    scrollableNode = scrollableNode.parentElement;
+  }
+
+  return (
+    scrollableNode || document.scrollingElement || document.documentElement
+  );
+}
 
 // HTML input types that do not cause the software keyboard to appear.
 const nonTextInputTypes = new Set([
@@ -29,7 +80,7 @@ const nonTextInputTypes = new Set([
 
 // 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;
+let restore: () => void;
 
 /**
  * Prevents scrolling on the document body on mount, and
@@ -39,7 +90,7 @@ let restore: any;
 export function usePreventScroll(options: PreventScrollOptions = {}) {
   const { isDisabled } = options;
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (isDisabled) {
       return;
     }
@@ -56,7 +107,7 @@ export function usePreventScroll(options: PreventScrollOptions = {}) {
     return () => {
       preventScrollCount--;
       if (preventScrollCount === 0) {
-        restore();
+        restore?.();
       }
     };
   }, [isDisabled]);
@@ -107,7 +158,7 @@ function preventScrollMobileSafari() {
 
   const onTouchStart = (e: TouchEvent) => {
     // Store the nearest scrollable parent element from the element that the user touched.
-    scrollable = getScrollParent(e.target as Element);
+    scrollable = getScrollParent(e.target as Element, true);
     if (
       scrollable === document.documentElement &&
       scrollable === document.body
@@ -128,6 +179,7 @@ function preventScrollMobileSafari() {
 
     // Prevent scrolling the window.
     if (
+      !scrollable ||
       scrollable === document.documentElement ||
       scrollable === document.body
     ) {
@@ -143,7 +195,6 @@ function preventScrollMobileSafari() {
     const scrollTop = scrollable.scrollTop;
     const bottom = scrollable.scrollHeight - scrollable.clientHeight;
 
-    // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files
     if (bottom === 0) {
       return;
     }
@@ -198,9 +249,7 @@ function preventScrollMobileSafari() {
             // measure the correct position to scroll to.
             visualViewport.addEventListener(
               'resize',
-              () => {
-                scrollIntoView(target);
-              },
+              () => scrollIntoView(target),
               { once: true }
             );
           }
@@ -261,6 +310,7 @@ function preventScrollMobileSafari() {
 
 // 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) {
+  // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
   const cur = element.style[style];
   element.style[style] = value;
 
@@ -276,9 +326,12 @@ function addEvent<K extends keyof GlobalEventHandlersEventMap>(
   handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
 ) {
-  target.addEventListener(event, handler as any, options);
+  // @ts-expect-error
+  target.addEventListener(event, handler, options);
+
   return () => {
-    target.removeEventListener(event, handler as any, options);
+    // @ts-expect-error
+    target.removeEventListener(event, handler, options);
   };
 }
 
@@ -294,12 +347,18 @@ function scrollIntoView(target: Element) {
     ) {
       const scrollableTop = scrollable.getBoundingClientRect().top;
       const targetTop = target.getBoundingClientRect().top;
-      if (targetTop > scrollableTop + target.clientHeight) {
+      const targetBottom = target.getBoundingClientRect().bottom;
+      // Buffer is needed for some edge cases
+      const keyboardHeight =
+        scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
+
+      if (targetBottom > keyboardHeight) {
         scrollable.scrollTop += targetTop - scrollableTop;
       }
     }
 
-    target = scrollable.parentElement as any;
+    // @ts-expect-error
+    target = scrollable.parentElement;
   }
 }
 

package/src/utils.ts

@@ -15,48 +15,6 @@ export function getClosest(nums: number[], goal: number) {
   return closest;
 }
 
-export function applyRootStyles(rootId: string) {
-  const body = document.querySelector('body') as HTMLBodyElement;
-  const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
-
-  if (root) {
-    const p = 24;
-    const h = window.innerHeight;
-    const s = (h - p) / h;
-    body.style.backgroundColor = '#000';
-    root.style.overflow = 'hidden';
-    root.style.willChange = 'transform';
-    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';
-  }
-}
-
-export function cleanupRootStyles(rootId: string) {
-  const body = document.querySelector('body') as HTMLBodyElement;
-  const root = document.getElementById(rootId) as HTMLDivElement;
-
-  function onTransitionEnd() {
-    root.style.removeProperty('overflow');
-    root.style.removeProperty('will-change');
-    root.style.removeProperty('transition');
-    body.style.removeProperty('background-color');
-    root.removeEventListener('transitionend', onTransitionEnd);
-  }
-
-  if (root) {
-    // Start animating back
-    root.style.removeProperty('border-top-right-radius');
-    root.style.removeProperty('border-top-left-radius');
-    root.style.removeProperty('transform');
-
-    // Remove temp properties after animation is finished
-    root.addEventListener('transitionend', onTransitionEnd);
-  }
-}
-
 export function inDescendingOrder(arr: number[]) {
   for (let i = 0; i < arr.length; i++) {
     if (arr[i + 1] > arr[i]) return false;
@@ -101,3 +59,44 @@ export function isTouchDevice() {
   if (typeof window === 'undefined') return false;
   return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 }
+
+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
+      )
+    : false;
+}
+
+function cached(fn: () => boolean) {
+  let res: boolean | null = null;
+  return () => {
+    if (res == null) {
+      res = fn();
+    }
+    return res;
+  };
+}
+
+const isMac = cached(function () {
+  return testPlatform(/^Mac/i);
+});
+
+const isIPhone = cached(function () {
+  return testPlatform(/^iPhone/i);
+});
+
+const isIPad = cached(function () {
+  return (
+    testPlatform(/^iPad/i) ||
+    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+    (isMac() && navigator.maxTouchPoints > 1)
+  );
+});
+
+export const isIOS = cached(function () {
+  return isIPhone() || isIPad();
+});