reshaped 2.7.0 → 2.7.2

package/components/Modal/Modal.js

@@ -7,7 +7,8 @@ import Overlay from "../Overlay/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import s from "./Modal.module.css";
 import getPaddingStyles from "../../styles/padding/index.js";
-const DRAG_THRESHOLD = 16;
+const DRAG_THRESHOLD = 32;
+const DRAG_OPPOSITE_THRESHOLD = 100;
 const DRAG_EDGE_BOUNDARY = 32;
 const Context = React.createContext({
     id: "",
@@ -43,7 +44,8 @@ const Modal = (props) => {
     const [subtitleMounted, setSubtitleMounted] = React.useState(false);
     const [dragging, setDragging] = React.useState(false);
     const rootRef = React.useRef(null);
-    const dragClientCoordinatesRef = React.useRef(0);
+    const dragStartCoordinatesRef = React.useRef({ x: 0, y: 0 });
+    const dragLastCoordinateRef = React.useRef(0);
     const dragDistanceRef = React.useRef(0);
     const dragDirectionRef = React.useRef(0);
     const [dragDistance, setDragDistance] = React.useState(0);
@@ -57,10 +59,10 @@ const Modal = (props) => {
         id,
     }), [id, subtitleMounted, titleMounted]);
     const resetDragData = () => {
+        dragStartCoordinatesRef.current = { x: 0, y: 0 };
+        dragLastCoordinateRef.current = 0;
         dragDirectionRef.current = 0;
-        dragClientCoordinatesRef.current = 0;
         setDragDistance(0);
-        setHideProgress(0);
     };
     const handleDragStart = (e) => {
         const el = e.target;
@@ -92,9 +94,7 @@ const Modal = (props) => {
             setDragging(false);
             // Close only when dragging in the closing direction
             // Changing to a different direction will keep the modal opened
-            const shouldClose = clientPosition && ["bottom", "end"].includes(clientPosition)
-                ? dragDirectionRef.current > 0
-                : dragDirectionRef.current < 0;
+            const shouldClose = clientPosition === "start" ? dragDirectionRef.current < 0 : dragDirectionRef.current > 0;
             if (Math.abs(dragDistanceRef.current) > DRAG_THRESHOLD && shouldClose) {
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             }
@@ -105,18 +105,29 @@ const Modal = (props) => {
         const handleDrag = (e) => {
             if (!dragging || clientPosition === "center")
                 return;
-            const prev = dragClientCoordinatesRef.current;
             const target = e.targetTouches[0];
-            dragClientCoordinatesRef.current =
-                clientPosition === "bottom" ? target.clientY : target.clientX;
-            if (!prev)
+            const coordinate = { x: target.clientX, y: target.clientY };
+            const key = clientPosition === "bottom" ? "y" : "x";
+            const oppositeKey = clientPosition === "bottom" ? "x" : "y";
+            // Save the initial coordinates
+            if (!dragStartCoordinatesRef.current[key]) {
+                dragStartCoordinatesRef.current = coordinate;
+                dragLastCoordinateRef.current = coordinate[key];
+            }
+            const next = Math.abs(coordinate[key] - dragStartCoordinatesRef.current[key]);
+            const nextOpposite = Math.abs(coordinate[oppositeKey] - dragStartCoordinatesRef.current[oppositeKey]);
+            // For start/end drawers - ignore the swiping
+            // If user is scrolling vertically more than swiping
+            if (position !== "bottom" &&
+                (next < nextOpposite || nextOpposite > DRAG_OPPOSITE_THRESHOLD)) {
+                dragLastCoordinateRef.current = coordinate[key];
                 return;
-            const delta = dragClientCoordinatesRef.current - prev;
-            dragDirectionRef.current = delta < 0 ? -1 : 1;
-            setDragDistance((prev) => {
-                const next = prev + delta;
-                return clientPosition === "start" ? Math.min(0, next) : Math.max(0, next);
-            });
+            }
+            dragDirectionRef.current = coordinate[key] - dragLastCoordinateRef.current;
+            dragLastCoordinateRef.current = coordinate[key];
+            setDragDistance((prev) => clientPosition === "start"
+                ? Math.min(0, prev + dragDirectionRef.current)
+                : Math.max(0, prev + dragDirectionRef.current));
         };
         document.addEventListener("touchmove", handleDrag);
         document.addEventListener("touchend", handleDragEnd);
@@ -134,15 +145,17 @@ const Modal = (props) => {
         const isInline = ["start", "end"].includes(clientPosition);
         const size = isInline ? rootEl.clientWidth : rootEl.clientHeight;
         const progress = Math.abs(dragDistance) / size;
-        dragDistanceRef.current = dragDistance;
         setHideProgress(progress / 2);
+        dragDistanceRef.current = dragDistance;
     }, [dragDistance, clientPosition]);
-    return (React.createElement(Overlay, { onClose: onClose, active: active, transparent: transparentOverlay || hideProgress }, ({ active }) => {
+    return (React.createElement(Overlay, { onClose: onClose, active: active, transparent: transparentOverlay || hideProgress, attributes: {
+            onTouchStart: handleDragStart,
+        } }, ({ active }) => {
         const rootClassNames = classNames(s.root, className, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames, active && s["--active"], dragging && s["--dragging"], responsiveClassNames(s, "--position", position));
         return (React.createElement(Context.Provider, { value: value },
             React.createElement("div", Object.assign({}, attributes, { style: Object.assign(Object.assign(Object.assign({}, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables), responsiveVariables("--rs-modal-size", size)), { "--rs-modal-drag": Math.abs(dragDistance) < DRAG_THRESHOLD
                         ? "0px"
-                        : `${dragDistance + DRAG_THRESHOLD * (clientPosition === "start" ? 1 : -1)}px` }), "aria-labelledby": titleMounted ? `${id}-title` : undefined, "aria-describedby": subtitleMounted ? `${id}-subtitle` : undefined, className: rootClassNames, "aria-modal": "true", role: "dialog", onTouchStart: handleDragStart, onTransitionEnd: handleTransitionEnd, ref: rootRef }), children)));
+                        : `${dragDistance + DRAG_THRESHOLD * (clientPosition === "start" ? 1 : -1)}px` }), "aria-labelledby": titleMounted ? `${id}-title` : undefined, "aria-describedby": subtitleMounted ? `${id}-subtitle` : undefined, className: rootClassNames, "aria-modal": "true", role: "dialog", ref: rootRef, onTransitionEnd: handleTransitionEnd }), children)));
     }));
 };
 Modal.Title = ModalTitle;

package/components/Overlay/Overlay.js

@@ -61,7 +61,7 @@ const Overlay = (props) => {
         close();
     };
     const handleTransitionEnd = (e) => {
-        if (e.propertyName !== "opacity" || !e.pseudoElement)
+        if (e.propertyName !== "transform" || !e.pseudoElement)
             return;
         setAnimated(false);
         if (visible)
@@ -84,7 +84,9 @@ const Overlay = (props) => {
             return;
         if (!clickThrough)
             lockScroll();
-        onNextFrame(() => show());
+        onNextFrame(() => {
+            show();
+        });
     }, [rendered, show, lockScroll, clickThrough]);
     React.useEffect(() => {
         if (!rendered)

package/components/Overlay/Overlay.module.css

@@ -1 +1 @@
-.root{-webkit-overflow-scrolling:touch;color:var(--rs-color-white);overflow:auto;z-index:var(--rs-z-index-overlay)}.root,.root:after{inset:0;position:fixed}.root:after{background:var(--rs-color-black);content:"";opacity:0}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;position:relative;text-align:initial;z-index:var(--rs-z-index-raised)}.root.--visible:after{opacity:var(--rs-overlay-opacity)}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--animated:after{transition:opacity var(--rs-duration-medium) var(--rs-easing-standard)}
+.root{-webkit-overflow-scrolling:touch;color:var(--rs-color-white);overflow:auto;z-index:var(--rs-z-index-overlay)}.root,.root:after{inset:0;position:fixed}.root:after{background:var(--rs-color-black);content:"";opacity:0;transform:scale(1.01)}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;position:relative;text-align:initial;z-index:var(--rs-z-index-raised)}.root.--visible:after{opacity:var(--rs-overlay-opacity);transform:scale(1)}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--animated:after{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:opacity,transform}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "2.7.0",
+	"version": "2.7.2",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",