@seed-design/react-drawer 1.0.1 → 1.0.3

package/lib/{Drawer-12s-CAlIg6sU.js → Drawer-12s-Cg9AJtdN.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 = false, 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,
@@ -760,7 +532,9 @@ function useDrawer(props) {
         setIsDragging(true);
         dragStartTime.current = new Date();
         if (isIOS()) {
-            window.addEventListener("touchend", ()=>isAllowedToDrag.current = false, {
+            window.addEventListener("touchend", ()=>{
+                isAllowedToDrag.current = false;
+            }, {
                 once: true
             });
         }
@@ -927,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({
@@ -1020,7 +788,7 @@ function useDrawer(props) {
                     drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
                 }
                 if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
-                    drawerRef.current.style.bottom = `0px`;
+                    drawerRef.current.style.bottom = "0px";
                 } else {
                     drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
                 }
@@ -1058,9 +826,8 @@ function useDrawer(props) {
                 setShouldOverlayAnimate(false);
             }, TRANSITIONS.ENTER_DURATION * 1000);
             return ()=>clearTimeout(timeoutId);
-        } else {
-            setShouldOverlayAnimate(false);
         }
+        setShouldOverlayAnimate(false);
     }, [
         isOpen,
         snapPoints,
@@ -1135,7 +902,7 @@ function useDrawerContext() {
 }
 
 const DrawerRoot = (props)=>{
-    const { children, defaultOpen, dismissible, onOpenChange, modal } = props;
+    const { children, defaultOpen, dismissible, modal } = props;
     const api = useDrawer(props);
     return /*#__PURE__*/ jsx(DialogPrimitive.Root, {
         defaultOpen: defaultOpen,
@@ -1148,7 +915,6 @@ const DrawerRoot = (props)=>{
                 api.closeDrawer(true);
             }
             api.setIsOpen(open);
-            onOpenChange?.(open);
         },
         modal: modal,
         children: /*#__PURE__*/ jsx(DrawerProvider, {
@@ -1164,7 +930,8 @@ const DrawerPositioner = /*#__PURE__*/ forwardRef((props, ref)=>{
         ref: ref,
         ...props,
         style: {
-            pointerEvents: api.isOpen ? undefined : "none"
+            pointerEvents: api.isOpen ? undefined : "none",
+            ...props.style
         }
     });
 });