reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Modal/useModalDrag.d.ts

@@ -0,0 +1,21 @@
+import type { OverlayInstance } from "../../components/Overlay/index.js";
+import type * as T from "./Modal.types.js";
+/**
+ * Swipe gesture closing the modal, moving it with the finger and continuing
+ * the release animation from the velocity the gesture ended with
+ */
+declare const useModalDrag: (args: {
+    position: T.Position;
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    overlayRef: React.RefObject<OverlayInstance | null>;
+    active?: boolean;
+    disabled?: boolean;
+    transparentOverlay?: boolean;
+    containerRef?: T.Props["containerRef"];
+    onClose?: T.Props["onClose"];
+}) => {
+    dragging: boolean;
+    handleTouchStart: (e: React.TouchEvent) => void;
+    handleTransitionEnd: (e: React.TransitionEvent) => void;
+};
+export default useModalDrag;

package/dist/components/Modal/useModalDrag.js

@@ -0,0 +1,318 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { enableScroll, disableScroll } from "@reshaped/utilities/internal";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useRTL from "../../hooks/useRTL.js";
+import { resolveSpringTransition } from "../../utilities/animation.js";
+/** Distance in px the modal has to be dragged before it starts following the finger */
+const THRESHOLD = 32;
+/** Screen edge zone in px reserved for the browser back gesture */
+const EDGE_BOUNDARY = 32;
+/**
+ * Distance in px the finger has to travel before the gesture resolves into a swipe or a scroll,
+ * a swipe also stops the modal content from scrolling for the rest of the gesture
+ */
+const DIRECTION_THRESHOLD = 8;
+/** Velocity in px/ms closing the modal on release regardless of the dragged distance */
+const VELOCITY_THRESHOLD = 0.4;
+/** Time window in ms used for measuring the release velocity */
+const VELOCITY_WINDOW = 100;
+const VELOCITY_SAMPLES = 10;
+const getInitialState = () => ({
+    origin: 0,
+    oppositeOrigin: 0,
+    previous: 0,
+    seed: 0,
+    distance: 0,
+    overshoot: false,
+    offset: 0,
+    size: 1,
+    samples: [],
+    intent: null,
+    closing: false,
+    returning: false,
+});
+/**
+ * Dragging past the open position is damped the same way as in Base UI,
+ * so the modal resists the finger like a rubber band
+ */
+const dampOvershoot = (distance) => -Math.sqrt(-distance);
+const undampOvershoot = (offset) => -(offset ** 2);
+/**
+ * Distance in px the modal is currently rendered at from its open position, towards the closing direction,
+ * negative when it's past the open position.
+ * Resolved from the transform so a gesture can pick up an animation that is still in flight,
+ * the dragging class disables transitions and would otherwise snap the modal to the animation target
+ */
+const getRenderedOffset = (style, args) => {
+    const { transform } = style;
+    if (!transform || transform === "none")
+        return 0;
+    const matrix = new DOMMatrixReadOnly(transform);
+    return (args.axis === "y" ? matrix.m42 : matrix.m41) * args.closingSign;
+};
+/**
+ * Distance in px the modal travels to its closed position, including its offset from the container edge
+ */
+const getClosingSize = (el, style, args) => {
+    const size = args.axis === "y" ? el.offsetHeight : el.offsetWidth;
+    const edgeOffset = args.axis === "y" ? style.bottom : args.closingSign === -1 ? style.left : style.right;
+    return Math.max(1, size + (parseFloat(edgeOffset) || 0));
+};
+/**
+ * Element can still scroll its content in the direction the finger moves when closing the modal,
+ * this scroll takes priority over the swipe
+ */
+const canScrollTowardsClosing = (el, args) => {
+    const vertical = args.axis === "y";
+    const maxScroll = vertical ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+    if (maxScroll <= 0)
+        return false;
+    // Content with overflow hidden can't be scrolled with the finger
+    const style = window.getComputedStyle(el);
+    const overflow = vertical ? style.overflowY : style.overflowX;
+    if (overflow !== "auto" && overflow !== "scroll")
+        return false;
+    // Distance left to scroll towards the top or left side, scrollLeft goes from 0 to negative values in RTL
+    const rtl = !vertical && style.direction === "rtl";
+    const scroll = vertical ? el.scrollTop : el.scrollLeft;
+    const startDistance = rtl ? maxScroll + scroll : scroll;
+    // Finger moving down or right reveals the content on the top or left side and vice versa
+    return (args.closingSign === 1 ? startDistance : maxScroll - startDistance) >= 1;
+};
+/** Velocity in px/ms measured over the most recent samples, signed on the drag axis */
+const getVelocity = (state, time) => {
+    const samples = state.samples.filter((sample) => time - sample.time <= VELOCITY_WINDOW);
+    const first = samples[0];
+    const last = samples[samples.length - 1];
+    if (!first || !last || first === last)
+        return 0;
+    return (last.coordinate - first.coordinate) / (last.time - first.time);
+};
+/**
+ * Swipe gesture closing the modal, moving it with the finger and continuing
+ * the release animation from the velocity the gesture ended with
+ */
+const useModalDrag = (args) => {
+    const { position, rootRef, overlayRef, active, disabled, transparentOverlay, containerRef } = args;
+    const onCloseRef = useHandlerRef(args.onClose);
+    const [dragging, setDragging] = useState(false);
+    const stateRef = useRef(getInitialState());
+    const frameRef = useRef(null);
+    const [rtl] = useRTL();
+    const axis = position === "bottom" ? "y" : "x";
+    // Drawers attached to the left side close towards the negative coordinates
+    const leftSide = rtl ? position === "end" : position === "start";
+    const closingSign = leftSide ? -1 : 1;
+    const render = useCallback(() => {
+        const rootEl = rootRef.current;
+        const state = stateRef.current;
+        if (!rootEl)
+            return;
+        // A gesture picking up an animation starts on an already moving modal, so it skips the dead zone
+        const threshold = state.seed ? 0 : THRESHOLD;
+        const closingDistance = state.seed + state.distance;
+        state.offset =
+            closingDistance < 0
+                ? dampOvershoot(closingDistance)
+                : Math.max(0, closingDistance - threshold);
+        rootEl.style.setProperty("--rs-modal-drag", `${state.offset * closingSign}px`);
+        if (transparentOverlay)
+            return;
+        const progress = Math.min(1, Math.max(0, closingDistance) / state.size);
+        overlayRef.current?.setOpacity(1 - progress * 0.5);
+    }, [closingSign, transparentOverlay, rootRef, overlayRef]);
+    const reset = useCallback(() => {
+        stateRef.current = getInitialState();
+        render();
+    }, [render]);
+    const setScrollLock = useCallback((locked) => {
+        const style = rootRef.current?.style;
+        if (locked)
+            style?.setProperty("overflow", "hidden");
+        else
+            style?.removeProperty("overflow");
+    }, [rootRef]);
+    /**
+     * Continues the release animation from the current gesture velocity,
+     * velocity is passed in px/ms and is positive when moving towards the closing direction
+     */
+    const setReleaseTransition = useCallback((releaseArgs) => {
+        const rootEl = rootRef.current;
+        const { offset, size } = stateRef.current;
+        const displacement = offset - (releaseArgs.closing ? size : 0);
+        // Without a displacement no transition will run and the override would stay applied
+        if (!rootEl || !displacement)
+            return;
+        const { duration, easing } = resolveSpringTransition({
+            displacement,
+            velocity: releaseArgs.velocity,
+        });
+        rootEl.style.setProperty("transition-duration", `${Math.round(duration)}ms`);
+        rootEl.style.setProperty("transition-timing-function", easing);
+    }, [rootRef]);
+    const resetReleaseTransition = useCallback(() => {
+        const style = rootRef.current?.style;
+        style?.removeProperty("transition-duration");
+        style?.removeProperty("transition-timing-function");
+    }, [rootRef]);
+    const handleTouchStart = (e) => {
+        if (disabled || position === "center")
+            return;
+        // Prevent swipe to close from happening when user is working with text selection
+        if (window.getSelection()?.toString())
+            return;
+        const rootEl = rootRef.current;
+        const touch = e.targetTouches[0];
+        let currentEl = e.target;
+        let overshoot = true;
+        while (currentEl && (currentEl === rootEl || rootEl?.contains(currentEl))) {
+            // Prioritize scrolling over modal swiping when content can scroll on the drag axis,
+            // scrolling on the perpendicular axis is resolved from the gesture direction instead
+            if (canScrollTowardsClosing(currentEl, { axis, closingSign }))
+                return;
+            // Start dragging only when starting on static elements
+            if (currentEl.matches("input,textarea"))
+                return;
+            // Content scrolling in the opposite direction takes priority over dragging past the open position
+            if (canScrollTowardsClosing(currentEl, { axis, closingSign: -closingSign }))
+                overshoot = false;
+            currentEl = currentEl.parentElement;
+        }
+        // Prevent the drag handling when browser is trying to navigate to a previous page
+        if (axis === "x" && closingSign === -1 && touch.clientX < EDGE_BOUNDARY)
+            return;
+        // Measured before the state is replaced, a transition in flight resolves to its current position
+        const rootStyle = rootEl && window.getComputedStyle(rootEl);
+        const renderedOffset = active && rootStyle ? getRenderedOffset(rootStyle, { axis, closingSign }) : 0;
+        // Damped offset past the open position is converted back to the dragged distance
+        const seed = renderedOffset < 0 ? undampOvershoot(renderedOffset) : renderedOffset;
+        const origin = axis === "y" ? touch.clientY : touch.clientX;
+        // The previous gesture can be left unresolved, e.g. when the modal stays open after a drag close
+        stateRef.current = {
+            ...getInitialState(),
+            origin,
+            oppositeOrigin: axis === "y" ? touch.clientX : touch.clientY,
+            previous: origin,
+            seed,
+            overshoot,
+            size: rootEl && rootStyle ? getClosingSize(rootEl, rootStyle, { axis, closingSign }) : 1,
+        };
+        resetReleaseTransition();
+        render();
+        if (containerRef?.current)
+            disableScroll();
+        setDragging(true);
+    };
+    const handleTransitionEnd = (e) => {
+        if (e.propertyName !== "transform")
+            return;
+        if (e.currentTarget !== e.target)
+            return;
+        resetReleaseTransition();
+        // Once modal is closed - reset its drag data
+        if (active)
+            return;
+        reset();
+        setScrollLock(false);
+    };
+    // Modal returns to its open position after the dragging class is removed,
+    // so the transition is applied to the reset instead of snapping back
+    useIsomorphicLayoutEffect(() => {
+        if (dragging || !stateRef.current.returning)
+            return;
+        reset();
+    }, [dragging, reset]);
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const handleTouchMove = (e) => {
+            const state = stateRef.current;
+            const touch = e.targetTouches[0];
+            const coordinate = axis === "y" ? touch.clientY : touch.clientX;
+            const oppositeCoordinate = axis === "y" ? touch.clientX : touch.clientY;
+            const travel = Math.abs(coordinate - state.origin);
+            const oppositeTravel = Math.abs(oppositeCoordinate - state.oppositeOrigin);
+            // Resolve the gesture direction once, so scrolling the content on the perpendicular axis
+            // doesn't move the modal and swiping the modal doesn't scroll the content.
+            // The previous coordinate stays at the origin until then, so the swipe doesn't lose the travelled distance
+            if (!state.intent) {
+                if (Math.max(travel, oppositeTravel) < DIRECTION_THRESHOLD)
+                    return;
+                state.intent = travel > oppositeTravel ? "swipe" : "scroll";
+            }
+            if (state.intent === "scroll")
+                return;
+            const rootEl = rootRef.current;
+            if (rootEl && canScrollTowardsClosing(rootEl, { axis, closingSign }))
+                return;
+            // Positive when moving towards the closing direction
+            const delta = (coordinate - state.previous) * closingSign;
+            state.previous = coordinate;
+            if (delta > 0)
+                setScrollLock(true);
+            state.distance += delta;
+            // Clamped at the open position when the content scrolls in that direction instead
+            if (!state.overshoot)
+                state.distance = Math.max(-state.seed, state.distance);
+            state.samples.push({ time: e.timeStamp, coordinate });
+            if (state.samples.length > VELOCITY_SAMPLES)
+                state.samples.shift();
+            if (frameRef.current !== null)
+                return;
+            frameRef.current = window.requestAnimationFrame(() => {
+                frameRef.current = null;
+                render();
+            });
+        };
+        const handleTouchEnd = (e) => {
+            const state = stateRef.current;
+            // Positive when moving towards the closing direction
+            const velocity = getVelocity(state, e.timeStamp) * closingSign;
+            const flicked = velocity > VELOCITY_THRESHOLD;
+            const dragged = state.distance > THRESHOLD && velocity >= 0;
+            state.closing = flicked || dragged;
+            state.returning = !state.closing;
+            // Apply the pending frame before the release so the transition starts from the current position
+            if (frameRef.current !== null) {
+                window.cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+                render();
+            }
+            // Finger velocity doesn't match the damped movement past the open position, so it settles from rest
+            setReleaseTransition({ closing: state.closing, velocity: state.offset < 0 ? 0 : velocity });
+            if (containerRef?.current)
+                enableScroll();
+            if (state.returning)
+                setScrollLock(false);
+            setDragging(false);
+            if (state.closing)
+                onCloseRef.current?.({ reason: "drag" });
+        };
+        document.addEventListener("touchmove", handleTouchMove, { passive: true });
+        document.addEventListener("touchend", handleTouchEnd, { passive: true });
+        return () => {
+            if (frameRef.current !== null) {
+                window.cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+            if (!stateRef.current.closing)
+                setScrollLock(false);
+            document.removeEventListener("touchmove", handleTouchMove);
+            document.removeEventListener("touchend", handleTouchEnd);
+        };
+    }, [
+        dragging,
+        axis,
+        closingSign,
+        containerRef,
+        rootRef,
+        onCloseRef,
+        render,
+        setScrollLock,
+        setReleaseTransition,
+    ]);
+    return { dragging, handleTouchStart, handleTransitionEnd };
+};
+export default useModalDrag;

package/dist/components/NumberField/NumberField.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./NumberField.types";
+import type * as T from "./NumberField.types.js";
 declare const NumberField: React.FC<T.Props>;
 export default NumberField;

package/dist/components/NumberField/NumberField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import NumberFieldControlled from "./NumberFieldControlled";
-import NumberFieldUncontrolled from "./NumberFieldUncontrolled";
+import NumberFieldControlled from "./NumberFieldControlled.js";
+import NumberFieldUncontrolled from "./NumberFieldUncontrolled.js";
 const NumberField = (props) => {
     const { value } = props;
     if (value !== undefined)

package/dist/components/NumberField/NumberField.types.d.ts

@@ -1,5 +1,5 @@
-import type { TextFieldBaseProps } from "../../components/TextField";
-import type * as G from "../../types/global";
+import type { TextFieldBaseProps } from "../../components/TextField/index.js";
+import type * as G from "../../types/global.js";
 export type BaseProps = Omit<TextFieldBaseProps, "endSlot" | "onChange" | "rounded" | "multiline"> & {
     /** Callback when the component value is changed */
     onChange?: G.ChangeHandler<number>;

package/dist/components/NumberField/NumberFieldControlled.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./NumberField.types";
+import type * as T from "./NumberField.types.js";
 declare const NumberFieldControlled: React.FC<T.ControlledProps>;
 export default NumberFieldControlled;

package/dist/components/NumberField/NumberFieldControlled.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import Actionable from "../../components/Actionable";
-import { useFormControl } from "../../components/FormControl";
-import Icon from "../../components/Icon";
-import TextField from "../../components/TextField";
-import useElementId from "../../hooks/useElementId";
-import useHandlerRef from "../../hooks/useHandlerRef";
-import useHotkeys from "../../hooks/useHotkeys";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
-import * as keys from "../../constants/keys";
-import IconChevronDown from "../../icons/ChevronDown";
-import IconChevronUp from "../../icons/ChevronUp";
-import IconMinus from "../../icons/Minus";
-import IconPlus from "../../icons/Plus";
+import Actionable from "../../components/Actionable/index.js";
+import { useFormControl } from "../../components/FormControl/index.js";
+import Icon from "../../components/Icon/index.js";
+import TextField from "../../components/TextField/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import * as keys from "../../constants/keys.js";
+import IconChevronDown from "../../icons/ChevronDown.js";
+import IconChevronUp from "../../icons/ChevronUp.js";
+import IconMinus from "../../icons/Minus.js";
+import IconPlus from "../../icons/Plus.js";
 import s from "./NumberField.module.css";
 const NumberFieldControlled = (props) => {
     const { increaseAriaLabel, decreaseAriaLabel, min, max, step = 1, name, value, onChange, size = "medium", ...textFieldProps } = props;
@@ -22,8 +22,10 @@ const NumberFieldControlled = (props) => {
     const inputId = formControl?.attributes.id || props.inputAttributes?.id || id;
     const disabled = formControl?.disabled || props.disabled;
     const hasError = formControl?.hasError || props.hasError;
-    const increaseDisabled = disabled || (value && max ? value >= max : false);
-    const decreaseDisabled = disabled || (value && min ? value <= min : false);
+    const increaseDisabled = disabled || (value !== null && max !== undefined && value >= max);
+    const decreaseDisabled = disabled || (value !== null && min !== undefined && value <= min);
+    // Numeric keyboard on mobile doesn't include the decimal separator and the minus sign
+    const inputMode = step % 1 !== 0 || (min !== undefined && min < 0) ? "decimal" : "numeric";
     const inputRef = React.useRef(null);
     const rootRef = React.useRef(null);
     const [textValue, setTextValue] = React.useState(value?.toString() || "");
@@ -102,9 +104,7 @@ const NumberFieldControlled = (props) => {
             }, 50);
         }, 500);
     };
-    const handleControlPointerUp = () => {
-        if (disabled)
-            return;
+    const clearControlTimers = React.useCallback(() => {
         if (pressedTimeoutRef.current) {
             clearTimeout(pressedTimeoutRef.current);
             pressedTimeoutRef.current = null;
@@ -113,6 +113,11 @@ const NumberFieldControlled = (props) => {
             clearTimeout(changeIntervalRef.current);
             changeIntervalRef.current = null;
         }
+    }, []);
+    const handleControlPointerUp = () => {
+        if (disabled)
+            return;
+        clearControlTimers();
     };
     useHotkeys({
         [keys.UP]: handleIncrease,
@@ -123,8 +128,10 @@ const NumberFieldControlled = (props) => {
     });
     React.useEffect(() => {
         valueRef.current = value;
-        setTextValue(value?.toString() ?? "");
+        // Keep the typed text if it already represents the value, e.g. "1." while typing "1.5"
+        setTextValue((prev) => (parseFloat(prev) === value ? prev : (value?.toString() ?? "")));
     }, [value]);
+    React.useEffect(() => clearControlTimers, [clearControlTimers]);
     const mouseIconSize = responsivePropDependency(size, (size) => {
         return size === "large" || size === "xlarge" ? 4 : 3;
     });
@@ -139,6 +146,7 @@ const NumberFieldControlled = (props) => {
                         onPointerDown: (e) => handleControlPointerDown(e, handleIncrease),
                         onPointerUp: handleControlPointerUp,
                         onPointerLeave: handleControlPointerUp,
+                        onPointerCancel: handleControlPointerUp,
                         // Prevent menu from opening on long press
                         onContextMenu: (e) => e.preventDefault(),
                     }, children: [_jsx(Icon, { svg: IconChevronUp, size: mouseIconSize, className: s["icon--mouse"] }), _jsx(Icon, { svg: IconPlus, size: touchIconSize, className: s["icon--touch"] })] }), _jsxs(Actionable, { className: s.control, disabled: decreaseDisabled, disableFocusRing: true, as: "span", attributes: {
@@ -149,6 +157,7 @@ const NumberFieldControlled = (props) => {
                         onPointerDown: (e) => handleControlPointerDown(e, handleDecrease),
                         onPointerUp: handleControlPointerUp,
                         onPointerLeave: handleControlPointerUp,
+                        onPointerCancel: handleControlPointerUp,
                         // Prevent menu from opening on long press
                         onContextMenu: (e) => e.preventDefault(),
                     }, children: [_jsx(Icon, { svg: IconChevronDown, size: mouseIconSize, className: s["icon--mouse"] }), _jsx(Icon, { svg: IconMinus, size: touchIconSize, className: s["icon--touch"] })] })] }) }));
@@ -165,7 +174,7 @@ const NumberFieldControlled = (props) => {
         }, inputAttributes: {
             ...textFieldProps.inputAttributes,
             ref: inputRef,
-            inputMode: "numeric",
+            inputMode,
             autoComplete: "off",
             autoCorrect: "off",
             spellCheck: "false",

package/dist/components/NumberField/NumberFieldUncontrolled.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./NumberField.types";
+import type * as T from "./NumberField.types.js";
 declare const NumberFieldUncontrolled: React.FC<T.UncontrolledProps>;
 export default NumberFieldUncontrolled;

package/dist/components/NumberField/NumberFieldUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import NumberFieldControlled from "./NumberFieldControlled";
+import NumberFieldControlled from "./NumberFieldControlled.js";
 const NumberFieldUncontrolled = (props) => {
     const { defaultValue, onChange } = props;
     const [value, setValue] = React.useState(defaultValue ?? null);

package/dist/components/NumberField/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./NumberField";
-export type { Props as NumberFieldProps } from "./NumberField.types";
+export { default } from "./NumberField.js";
+export type { Props as NumberFieldProps } from "./NumberField.types.js";

package/dist/components/NumberField/index.js

@@ -1 +1 @@
-export { default } from "./NumberField";
+export { default } from "./NumberField.js";

package/dist/components/NumberField/tests/NumberField.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/NumberField").NumberFieldProps>;
+    component: import("react").FC<import("../../../components/NumberField/index.js").NumberFieldProps>;
     parameters: {
         iframe: {
             url: string;