@seed-design/react-drawer 1.0.2 → 1.0.4

package/lib/{Drawer-12s-COJG4T4l.js → Drawer-12s-BOMSoUDc.js}

@@ -5,7 +5,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
 import { dataAttr } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
-import React, { useLayoutEffect, useEffect, useState, useRef, useCallback, useMemo, createContext, useContext, forwardRef } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useMemo, createContext, useContext, forwardRef } from 'react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 
 function isMobileFirefox() {
@@ -49,6 +49,21 @@ const WINDOW_TOP_OFFSET = 26;
 const DRAG_CLASS = "seed-dragging";
 
 const cache = new WeakMap();
+// 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"
+]);
+function isInput(target) {
+    return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
 function set(el, styles, ignoreCache = false) {
     if (!el || !(el instanceof HTMLElement)) return;
     let originalStyles = {};
@@ -223,255 +238,10 @@ let previousBodyPosition = null;
     };
 }
 
-// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
-const KEYBOARD_BUFFER = 24;
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-function chain(...callbacks) {
-    return (...args)=>{
-        for (let callback of callbacks){
-            if (typeof callback === "function") {
-                callback(...args);
-            }
-        }
-    };
-}
-// @ts-ignore
-const visualViewport = typeof document !== "undefined" && window.visualViewport;
-function isScrollable(node) {
-    let style = window.getComputedStyle(node);
-    return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
-}
-function getScrollParent(node) {
-    if (isScrollable(node)) {
-        node = node.parentElement;
-    }
-    while(node && !isScrollable(node)){
-        node = node.parentElement;
-    }
-    return node || document.scrollingElement || document.documentElement;
-}
-// 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;
-/**
- * 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.
- */ function usePreventScroll(options = {}) {
-    let { isDisabled } = options;
-    useIsomorphicLayoutEffect(()=>{
-        if (isDisabled) {
-            return;
-        }
-        preventScrollCount++;
-        if (preventScrollCount === 1) {
-            if (isIOS()) {
-                restore = preventScrollMobileSafari();
-            }
-        }
-        return ()=>{
-            preventScrollCount--;
-            if (preventScrollCount === 0) {
-                restore?.();
-            }
-        };
-    }, [
-        isDisabled
-    ]);
-}
-// 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;
-    let lastY = 0;
-    let onTouchStart = (e)=>{
-        // Store the nearest scrollable parent element from the element that the user touched.
-        scrollable = getScrollParent(e.target);
-        if (scrollable === document.documentElement && scrollable === document.body) {
-            return;
-        }
-        lastY = e.changedTouches[0].pageY;
-    };
-    let onTouchMove = (e)=>{
-        // Prevent scrolling the window.
-        if (!scrollable || 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;
-        if (bottom === 0) {
-            return;
-        }
-        if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
-            e.preventDefault();
-        }
-        lastY = y;
-    };
-    let onTouchEnd = (e)=>{
-        let target = e.target;
-        // Apply this change if we're not already focused on the target element
-        if (isInput(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)=>{
-        let target = e.target;
-        if (isInput(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`));
-    // 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, style, value) {
-    // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
-    // @ts-ignore
-    let cur = element.style[style];
-    // @ts-ignore
-    element.style[style] = value;
-    return ()=>{
-        // @ts-ignore
-        element.style[style] = cur;
-    };
-}
-// Adds an event listener to an element, and returns a function to remove it.
-function addEvent(target, event, handler, options) {
-    // @ts-ignore
-    target.addEventListener(event, handler, options);
-    return ()=>{
-        // @ts-ignore
-        target.removeEventListener(event, handler, options);
-    };
-}
-function scrollIntoView(target) {
-    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;
-            let 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;
-            }
-        }
-        // @ts-ignore
-        target = scrollable.parentElement;
-    }
-}
-function isInput(target) {
-    return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
-}
-
 function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = "bottom", container, snapToSequentialPoint }) {
     const [activeSnapPoint, setActiveSnapPoint] = useControllableState({
         prop: activeSnapPointProp,
-        defaultProp: snapPoints?.[0],
+        defaultProp: snapPoints?.[0] ?? null,
         onChange: setActiveSnapPointProp
     });
     const [windowDimensions, setWindowDimensions] = React.useState(typeof window !== "undefined" ? {
@@ -509,6 +279,11 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
             height: 0
         };
         return snapPoints?.map((snapPoint)=>{
+            // FIXME
+            // 1 -> container 100% << expected
+            // 0.5 -> container 50% << expected
+            // 300px -> 300 -> 300px << expected
+            // 15rem -> 15 -> 15px << this makes no sense, should fix or disallow
             const isPx = typeof snapPoint === "string";
             let snapPointAsNumber = 0;
             if (isPx) {
@@ -530,7 +305,8 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
     }, [
         snapPoints,
         windowDimensions,
-        container
+        container,
+        direction
     ]);
     const activeSnapPointOffset = React.useMemo(()=>activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null, [
         snapPointsOffset,
@@ -681,7 +457,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 }
 
 function useDrawer(props) {
-    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = true, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
+    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = true, direction = "bottom", defaultOpen = false, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
     const [isOpen = false, setIsOpen] = useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
@@ -707,7 +483,6 @@ function useDrawer(props) {
     });
     const [hasBeenOpened, setHasBeenOpened] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
-    const [justReleased, setJustReleased] = useState(false);
     const [shouldOverlayAnimate, setShouldOverlayAnimate] = useState(false);
     const overlayRef = useRef(null);
     const openTime = useRef(null);
@@ -741,9 +516,6 @@ function useDrawer(props) {
         direction,
         snapToSequentialPoint
     });
-    usePreventScroll({
-        isDisabled: !isOpen || isDragging || !modal || justReleased || !hasBeenOpened || !repositionInputs || !disablePreventScroll
-    });
     const { restorePositionSetting } = usePositionFixed({
         isOpen,
         modal,
@@ -929,12 +701,6 @@ function useDrawer(props) {
         const timeTaken = dragEndTime.current.getTime() - dragStartTime.current.getTime();
         const distMoved = pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX);
         const velocity = Math.abs(distMoved) / timeTaken;
-        if (velocity > 0.05) {
-            setJustReleased(true);
-            setTimeout(()=>{
-                setJustReleased(false);
-            }, 200);
-        }
         if (snapPoints) {
             const directionMultiplier = direction === "bottom" || direction === "right" ? 1 : -1;
             onReleaseSnapPoints({
@@ -1348,7 +1114,7 @@ const LONG_HANDLE_PRESS_TIMEOUT = 250;
 const DOUBLE_TAP_TIMEOUT = 120;
 const DrawerHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { preventCycle = false, children, ...rest } = props;
-    const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag } = useDrawerContext();
+    const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag, onRelease } = useDrawerContext();
     const closeTimeoutIdRef = useRef(null);
     const shouldCancelInteractionRef = useRef(false);
     function handleStartCycle() {
@@ -1408,7 +1174,10 @@ const DrawerHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
         onPointerMove: (e)=>{
             if (handleOnly) onDrag(e);
         },
-        // onPointerUp is already handled by the content component
+        onPointerUp: (e)=>{
+            if (handleOnly) onRelease(e);
+            handleCancelInteraction();
+        },
         "data-drawer-visible": isOpen ? "true" : "false",
         "data-handle": "",
         "aria-hidden": "true",

package/lib/{Drawer-12s-a4zbhVrK.cjs → Drawer-12s-Yr_NcCoF.cjs}

@@ -72,6 +72,21 @@ const WINDOW_TOP_OFFSET = 26;
 const DRAG_CLASS = "seed-dragging";
 
 const cache = new WeakMap();
+// 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"
+]);
+function isInput(target) {
+    return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
 function set(el, styles, ignoreCache = false) {
     if (!el || !(el instanceof HTMLElement)) return;
     let originalStyles = {};
@@ -246,255 +261,10 @@ let previousBodyPosition = null;
     };
 }
 
-// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
-const KEYBOARD_BUFFER = 24;
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-function chain(...callbacks) {
-    return (...args)=>{
-        for (let callback of callbacks){
-            if (typeof callback === "function") {
-                callback(...args);
-            }
-        }
-    };
-}
-// @ts-ignore
-const visualViewport = typeof document !== "undefined" && window.visualViewport;
-function isScrollable(node) {
-    let style = window.getComputedStyle(node);
-    return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
-}
-function getScrollParent(node) {
-    if (isScrollable(node)) {
-        node = node.parentElement;
-    }
-    while(node && !isScrollable(node)){
-        node = node.parentElement;
-    }
-    return node || document.scrollingElement || document.documentElement;
-}
-// 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;
-/**
- * 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.
- */ function usePreventScroll(options = {}) {
-    let { isDisabled } = options;
-    useIsomorphicLayoutEffect(()=>{
-        if (isDisabled) {
-            return;
-        }
-        preventScrollCount++;
-        if (preventScrollCount === 1) {
-            if (isIOS()) {
-                restore = preventScrollMobileSafari();
-            }
-        }
-        return ()=>{
-            preventScrollCount--;
-            if (preventScrollCount === 0) {
-                restore?.();
-            }
-        };
-    }, [
-        isDisabled
-    ]);
-}
-// 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;
-    let lastY = 0;
-    let onTouchStart = (e)=>{
-        // Store the nearest scrollable parent element from the element that the user touched.
-        scrollable = getScrollParent(e.target);
-        if (scrollable === document.documentElement && scrollable === document.body) {
-            return;
-        }
-        lastY = e.changedTouches[0].pageY;
-    };
-    let onTouchMove = (e)=>{
-        // Prevent scrolling the window.
-        if (!scrollable || 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;
-        if (bottom === 0) {
-            return;
-        }
-        if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
-            e.preventDefault();
-        }
-        lastY = y;
-    };
-    let onTouchEnd = (e)=>{
-        let target = e.target;
-        // Apply this change if we're not already focused on the target element
-        if (isInput(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)=>{
-        let target = e.target;
-        if (isInput(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`));
-    // 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, style, value) {
-    // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
-    // @ts-ignore
-    let cur = element.style[style];
-    // @ts-ignore
-    element.style[style] = value;
-    return ()=>{
-        // @ts-ignore
-        element.style[style] = cur;
-    };
-}
-// Adds an event listener to an element, and returns a function to remove it.
-function addEvent(target, event, handler, options) {
-    // @ts-ignore
-    target.addEventListener(event, handler, options);
-    return ()=>{
-        // @ts-ignore
-        target.removeEventListener(event, handler, options);
-    };
-}
-function scrollIntoView(target) {
-    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;
-            let 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;
-            }
-        }
-        // @ts-ignore
-        target = scrollable.parentElement;
-    }
-}
-function isInput(target) {
-    return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
-}
-
 function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = "bottom", container, snapToSequentialPoint }) {
     const [activeSnapPoint, setActiveSnapPoint] = reactUseControllableState.useControllableState({
         prop: activeSnapPointProp,
-        defaultProp: snapPoints?.[0],
+        defaultProp: snapPoints?.[0] ?? null,
         onChange: setActiveSnapPointProp
     });
     const [windowDimensions, setWindowDimensions] = React__default.default.useState(typeof window !== "undefined" ? {
@@ -532,6 +302,11 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
             height: 0
         };
         return snapPoints?.map((snapPoint)=>{
+            // FIXME
+            // 1 -> container 100% << expected
+            // 0.5 -> container 50% << expected
+            // 300px -> 300 -> 300px << expected
+            // 15rem -> 15 -> 15px << this makes no sense, should fix or disallow
             const isPx = typeof snapPoint === "string";
             let snapPointAsNumber = 0;
             if (isPx) {
@@ -553,7 +328,8 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
     }, [
         snapPoints,
         windowDimensions,
-        container
+        container,
+        direction
     ]);
     const activeSnapPointOffset = React__default.default.useMemo(()=>activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null, [
         snapPointsOffset,
@@ -704,7 +480,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 }
 
 function useDrawer(props) {
-    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = true, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
+    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = true, direction = "bottom", defaultOpen = false, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
     const [isOpen = false, setIsOpen] = reactUseControllableState.useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
@@ -730,7 +506,6 @@ function useDrawer(props) {
     });
     const [hasBeenOpened, setHasBeenOpened] = React.useState(false);
     const [isDragging, setIsDragging] = React.useState(false);
-    const [justReleased, setJustReleased] = React.useState(false);
     const [shouldOverlayAnimate, setShouldOverlayAnimate] = React.useState(false);
     const overlayRef = React.useRef(null);
     const openTime = React.useRef(null);
@@ -764,9 +539,6 @@ function useDrawer(props) {
         direction,
         snapToSequentialPoint
     });
-    usePreventScroll({
-        isDisabled: !isOpen || isDragging || !modal || justReleased || !hasBeenOpened || !repositionInputs || !disablePreventScroll
-    });
     const { restorePositionSetting } = usePositionFixed({
         isOpen,
         modal,
@@ -952,12 +724,6 @@ function useDrawer(props) {
         const timeTaken = dragEndTime.current.getTime() - dragStartTime.current.getTime();
         const distMoved = pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX);
         const velocity = Math.abs(distMoved) / timeTaken;
-        if (velocity > 0.05) {
-            setJustReleased(true);
-            setTimeout(()=>{
-                setJustReleased(false);
-            }, 200);
-        }
         if (snapPoints) {
             const directionMultiplier = direction === "bottom" || direction === "right" ? 1 : -1;
             onReleaseSnapPoints({
@@ -1371,7 +1137,7 @@ const LONG_HANDLE_PRESS_TIMEOUT = 250;
 const DOUBLE_TAP_TIMEOUT = 120;
 const DrawerHandle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { preventCycle = false, children, ...rest } = props;
-    const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag } = useDrawerContext();
+    const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag, onRelease } = useDrawerContext();
     const closeTimeoutIdRef = React.useRef(null);
     const shouldCancelInteractionRef = React.useRef(false);
     function handleStartCycle() {
@@ -1431,7 +1197,10 @@ const DrawerHandle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         onPointerMove: (e)=>{
             if (handleOnly) onDrag(e);
         },
-        // onPointerUp is already handled by the content component
+        onPointerUp: (e)=>{
+            if (handleOnly) onRelease(e);
+            handleCancelInteraction();
+        },
         "data-drawer-visible": isOpen ? "true" : "false",
         "data-handle": "",
         "aria-hidden": "true",

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Drawer12s = require('./Drawer-12s-a4zbhVrK.cjs');
+var Drawer12s = require('./Drawer-12s-Yr_NcCoF.cjs');
 
 var Drawer_namespace = {
   __proto__: null,

package/lib/index.d.ts

@@ -36,7 +36,7 @@ interface UseDrawerProps {
     handleOnly?: boolean;
     /**
      * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
-     * Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
+     * Use this in combination with the `open` prop, otherwise you won't be able to open/close the drawer.
      * @default true
      */
     dismissible?: boolean;
@@ -59,11 +59,6 @@ interface UseDrawerProps {
      * @default false
      */
     defaultOpen?: boolean;
-    /**
-     * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
-     * @default false
-     */
-    disablePreventScroll?: boolean;
     /**
      * When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.
      * Setting it to `false` will fall back to the default browser behavior.
@@ -87,7 +82,7 @@ interface UseDrawerProps {
     autoFocus?: boolean;
     /**
      * Array of snap points to use.
-     * Example: snapPoints={[0, 100, 200]} will use the first snap point at 0px, the second at 100px, and the third at 200px.
+     * Example: snapPoints={["100px", "200px", 1]} will use the snap points 100px, 200px and fully open (1 = 100% of the container).
      * @default undefined
      */
     snapPoints?: (number | string)[];

package/lib/index.js

@@ -1,5 +1,5 @@
-import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerPositioner, f as DrawerRoot, g as DrawerTitle, h as DrawerTrigger } from './Drawer-12s-COJG4T4l.js';
-export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-COJG4T4l.js';
+import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerPositioner, f as DrawerRoot, g as DrawerTitle, h as DrawerTrigger } from './Drawer-12s-BOMSoUDc.js';
+export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-BOMSoUDc.js';
 
 var Drawer_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-drawer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/src/Drawer.tsx

@@ -325,6 +325,7 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
     isOpen,
     onPress,
     onDrag,
+    onRelease,
   } = useDrawerContext();
 
   const closeTimeoutIdRef = useRef<number | null>(null);
@@ -396,7 +397,10 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
       onPointerMove={(e) => {
         if (handleOnly) onDrag(e);
       }}
-      // onPointerUp is already handled by the content component
+      onPointerUp={(e) => {
+        if (handleOnly) onRelease(e);
+        handleCancelInteraction();
+      }}
       data-drawer-visible={isOpen ? "true" : "false"}
       data-handle=""
       aria-hidden="true"

package/src/helpers.ts

@@ -6,6 +6,27 @@ interface Style {
 
 const cache = new WeakMap();
 
+// 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",
+]);
+
+export function isInput(target: Element) {
+  return (
+    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLElement && target.isContentEditable)
+  );
+}
+
 export function isInView(el: HTMLElement): boolean {
   const rect = el.getBoundingClientRect();
 

package/src/use-snap-points.ts

@@ -20,8 +20,8 @@ export function useSnapPoints({
   setActiveSnapPointProp?(snapPoint: number | null | string): void;
   snapPoints?: (number | string)[];
   fadeFromIndex?: number;
-  drawerRef: React.RefObject<HTMLDivElement>;
-  overlayRef: React.RefObject<HTMLDivElement>;
+  drawerRef: React.RefObject<HTMLDivElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
   onSnapPointChange(activeSnapPointIndex: number): void;
   direction?: DrawerDirection;
   container?: HTMLElement | null | undefined;
@@ -29,7 +29,7 @@ export function useSnapPoints({
 }) {
   const [activeSnapPoint, setActiveSnapPoint] = useControllableState<string | number | null>({
     prop: activeSnapPointProp,
-    defaultProp: snapPoints?.[0],
+    defaultProp: snapPoints?.[0] ?? null,
     onChange: setActiveSnapPointProp,
   });
 
@@ -84,6 +84,12 @@ export function useSnapPoints({
 
     return (
       snapPoints?.map((snapPoint) => {
+        // FIXME
+        // 1 -> container 100% << expected
+        // 0.5 -> container 50% << expected
+        // 300px -> 300 -> 300px << expected
+        // 15rem -> 15 -> 15px << this makes no sense, should fix or disallow
+
         const isPx = typeof snapPoint === "string";
         let snapPointAsNumber = 0;
 
@@ -119,7 +125,7 @@ export function useSnapPoints({
         return width;
       }) ?? []
     );
-  }, [snapPoints, windowDimensions, container]);
+  }, [snapPoints, windowDimensions, container, direction]);
 
   const activeSnapPointOffset = React.useMemo(
     () => (activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null),

package/src/useDrawer.ts

@@ -9,9 +9,8 @@ import {
   VELOCITY_THRESHOLD,
   WINDOW_TOP_OFFSET,
 } from "./constants";
-import { dampenValue, getTranslate, isVertical, reset, set } from "./helpers";
+import { dampenValue, getTranslate, isInput, isVertical, reset, set } from "./helpers";
 import { usePositionFixed } from "./use-position-fixed";
-import { isInput, usePreventScroll } from "./use-prevent-scroll";
 import { useSnapPoints } from "./use-snap-points";
 
 export interface UseDrawerProps {
@@ -47,7 +46,7 @@ export interface UseDrawerProps {
   handleOnly?: boolean;
   /**
    * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
-   * Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
+   * Use this in combination with the `open` prop, otherwise you won't be able to open/close the drawer.
    * @default true
    */
   dismissible?: boolean;
@@ -70,11 +69,6 @@ export interface UseDrawerProps {
    * @default false
    */
   defaultOpen?: boolean;
-  /**
-   * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
-   * @default false
-   */
-  disablePreventScroll?: boolean;
   /**
    * When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.
    * Setting it to `false` will fall back to the default browser behavior.
@@ -99,7 +93,7 @@ export interface UseDrawerProps {
 
   /**
    * Array of snap points to use.
-   * Example: snapPoints={[0, 100, 200]} will use the first snap point at 0px, the second at 100px, and the third at 200px.
+   * Example: snapPoints={["100px", "200px", 1]} will use the snap points 100px, 200px and fully open (1 = 100% of the container).
    * @default undefined
    */
   snapPoints?: (number | string)[];
@@ -145,7 +139,6 @@ export function useDrawer(props: UseDrawerProps) {
     noBodyStyles = true,
     direction = "bottom",
     defaultOpen = false,
-    disablePreventScroll = true,
     snapToSequentialPoint = false,
     preventScrollRestoration = false,
     repositionInputs = true,
@@ -186,7 +179,6 @@ export function useDrawer(props: UseDrawerProps) {
 
   const [hasBeenOpened, setHasBeenOpened] = useState<boolean>(false);
   const [isDragging, setIsDragging] = useState<boolean>(false);
-  const [justReleased, setJustReleased] = useState<boolean>(false);
   const [shouldOverlayAnimate, setShouldOverlayAnimate] = useState<boolean>(false);
 
   const overlayRef = useRef<HTMLDivElement>(null);
@@ -234,17 +226,6 @@ export function useDrawer(props: UseDrawerProps) {
     snapToSequentialPoint,
   });
 
-  usePreventScroll({
-    isDisabled:
-      !isOpen ||
-      isDragging ||
-      !modal ||
-      justReleased ||
-      !hasBeenOpened ||
-      !repositionInputs ||
-      !disablePreventScroll,
-  });
-
   const { restorePositionSetting } = usePositionFixed({
     isOpen,
     modal,
@@ -502,13 +483,6 @@ export function useDrawer(props: UseDrawerProps) {
     const distMoved = pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX);
     const velocity = Math.abs(distMoved) / timeTaken;
 
-    if (velocity > 0.05) {
-      setJustReleased(true);
-      setTimeout(() => {
-        setJustReleased(false);
-      }, 200);
-    }
-
     if (snapPoints) {
       const directionMultiplier = direction === "bottom" || direction === "right" ? 1 : -1;
       onReleaseSnapPoints({

package/src/use-prevent-scroll.ts

@@ -1,309 +0,0 @@
-// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
-
-import { useEffect, useLayoutEffect } from "react";
-import { isIOS } from "./browser";
-
-const KEYBOARD_BUFFER = 24;
-
-export const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;
-
-interface PreventScrollOptions {
-  /** Whether the scroll lock is disabled. */
-  isDisabled?: boolean;
-  focusCallback?: () => void;
-}
-
-function chain(...callbacks: any[]): (...args: any[]) => void {
-  return (...args: any[]) => {
-    for (let callback of callbacks) {
-      if (typeof callback === "function") {
-        callback(...args);
-      }
-    }
-  };
-}
-
-// @ts-ignore
-const visualViewport = typeof document !== "undefined" && window.visualViewport;
-
-export function isScrollable(node: Element): boolean {
-  let style = window.getComputedStyle(node);
-  return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
-}
-
-export function getScrollParent(node: Element): Element {
-  if (isScrollable(node)) {
-    node = node.parentElement as HTMLElement;
-  }
-
-  while (node && !isScrollable(node)) {
-    node = node.parentElement as HTMLElement;
-  }
-
-  return node || document.scrollingElement || document.documentElement;
-}
-
-// 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: () => void;
-
-/**
- * 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;
-
-  useIsomorphicLayoutEffect(() => {
-    if (isDisabled) {
-      return;
-    }
-
-    preventScrollCount++;
-    if (preventScrollCount === 1) {
-      if (isIOS()) {
-        restore = preventScrollMobileSafari();
-      }
-    }
-
-    return () => {
-      preventScrollCount--;
-      if (preventScrollCount === 0) {
-        restore?.();
-      }
-    };
-  }, [isDisabled]);
-}
-
-// 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 || 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;
-
-    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 (isInput(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 (isInput(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: HTMLElement, style: keyof React.CSSProperties, value: string) {
-  // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
-  // @ts-ignore
-  let cur = element.style[style];
-  // @ts-ignore
-  element.style[style] = value;
-
-  return () => {
-    // @ts-ignore
-    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,
-) {
-  // @ts-ignore
-  target.addEventListener(event, handler, options);
-
-  return () => {
-    // @ts-ignore
-    target.removeEventListener(event, handler, 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;
-      let 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;
-      }
-    }
-
-    // @ts-ignore
-    target = scrollable.parentElement;
-  }
-}
-
-export function isInput(target: Element) {
-  return (
-    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
-    target instanceof HTMLTextAreaElement ||
-    (target instanceof HTMLElement && target.isContentEditable)
-  );
-}