reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Modal/Modal.js

@@ -1,20 +1,14 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, createContext, useContext, useEffect, useMemo, useState, useRef, } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState, useRef } from "react";
 import { classNames } from "@reshaped/utilities";
-import { enableScroll, disableScroll } from "@reshaped/utilities/internal";
-import Overlay from "../../components/Overlay";
-import Text from "../../components/Text";
-import useElementId from "../../hooks/useElementId";
-import useHandlerRef from "../../hooks/useHandlerRef";
-import useResponsiveClientValue from "../../hooks/useResponsiveClientValue";
-import { responsiveClassNames, responsiveVariables } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
+import Overlay from "../../components/Overlay/index.js";
+import Text from "../../components/Text/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
+import useModalDrag from "./useModalDrag.js";
 import s from "./Modal.module.css";
-const DRAG_THRESHOLD = 32;
-const DRAG_OPPOSITE_THRESHOLD = 100;
-const DRAG_EDGE_BOUNDARY = 32;
-const DRAG_SCROLL_LOCK_THRESHOLD = 8;
 const Context = createContext({
     id: "",
     titleMounted: false,
@@ -43,39 +37,24 @@ export const ModalSubtitle = (props) => {
 };
 const Modal = (props) => {
     const { children, onClose, onAfterClose, onAfterOpen, active, size, padding = 4, position = "center", overflow, transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, containerRef, contained, overlayClassName, className, attributes, } = props;
-    const onCloseRef = useHandlerRef(onClose);
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
     const [titleMounted, setTitleMounted] = useState(false);
     const [subtitleMounted, setSubtitleMounted] = useState(false);
-    const [dragging, setDragging] = useState(false);
     const internalRootRef = useRef(null);
     const rootRef = attributes?.ref || internalRootRef;
-    const dragStartCoordinatesRef = useRef({ x: 0, y: 0 });
-    const dragLastCoordinateRef = useRef(0);
-    const dragDistanceRef = useRef(0);
-    const dragFrameRef = useRef(null);
-    const dragPendingDistanceRef = useRef(0);
-    const dragSizeRef = useRef(1);
     const overlayRef = useRef(null);
-    const dragDirectionRef = useRef(0);
-    const dragShouldCloseRef = useRef(false);
-    const mixinStyles = resolveMixin({ padding });
     const shouldBeContained = containerRef && contained !== false;
-    const setDragStyles = useCallback((distance) => {
-        const rootEl = rootRef.current;
-        if (!rootEl)
-            return;
-        const dragOffset = Math.abs(distance) < DRAG_THRESHOLD
-            ? 0
-            : distance + DRAG_THRESHOLD * (clientPosition === "start" ? 1 : -1);
-        rootEl.style.setProperty("--rs-modal-drag", `${dragOffset}px`);
-        if (!transparentOverlay && overlayRef.current) {
-            const progress = Math.min(1, Math.abs(distance) / dragSizeRef.current);
-            const opacity = Math.max(0, 1 - progress * 0.5);
-            overlayRef.current.setOpacity(opacity);
-        }
-    }, [clientPosition, overlayRef, transparentOverlay, rootRef]);
+    const { dragging, handleTouchStart, handleTransitionEnd } = useModalDrag({
+        position: clientPosition,
+        rootRef,
+        overlayRef,
+        active,
+        containerRef,
+        transparentOverlay,
+        disabled: disableSwipeGesture,
+        onClose,
+    });
     const value = useMemo(() => ({
         titleMounted,
         setTitleMounted,
@@ -83,156 +62,17 @@ const Modal = (props) => {
         setSubtitleMounted,
         id,
     }), [id, subtitleMounted, titleMounted]);
-    const resetDragData = useCallback(() => {
-        dragDistanceRef.current = 0;
-        dragPendingDistanceRef.current = 0;
-        dragStartCoordinatesRef.current = { x: 0, y: 0 };
-        dragLastCoordinateRef.current = 0;
-        dragDirectionRef.current = 0;
-        dragShouldCloseRef.current = false;
-        setDragStyles(0);
-    }, [setDragStyles]);
-    const unlockDragScroll = useCallback(() => {
-        rootRef.current?.style.removeProperty("overflow");
-    }, [rootRef]);
-    const lockDragScroll = useCallback(() => {
-        rootRef.current?.style.setProperty("overflow", "hidden");
-    }, [rootRef]);
-    const handleDragStart = (e) => {
-        if (disableSwipeGesture)
-            return;
-        dragShouldCloseRef.current = false;
-        // Prevent swipe to close from happening when user is working with text selection
-        if (window.getSelection()?.toString())
-            return;
-        let currentEl = e.target;
-        const rootEl = rootRef.current;
-        while (currentEl && (currentEl === rootEl || rootEl?.contains(currentEl))) {
-            // Prioritize scrolling over modal swiping
-            if (currentEl.scrollTop !== 0 || currentEl.scrollLeft !== 0)
-                return;
-            // Start dragging only when starting on static elements
-            if (currentEl.matches("input,textarea"))
-                return;
-            currentEl = currentEl ? currentEl.parentElement : null;
-        }
-        // Prevent the drag handling when browser is trying to navigate to a previous page
-        if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
-            return;
-        if (rootEl) {
-            const isInline = ["start", "end"].includes(clientPosition);
-            dragSizeRef.current = Math.max(1, isInline ? rootEl.clientWidth : rootEl.clientHeight);
-        }
-        if (containerRef?.current)
-            disableScroll();
-        setDragging(true);
-    };
-    // Once modal is closed - reset its drag data
-    const handleTransitionEnd = (e) => {
-        if (active)
-            return;
-        if (e.propertyName !== "transform")
-            return;
-        if (e.currentTarget !== e.target)
-            return;
-        resetDragData();
-        unlockDragScroll();
-    };
-    useEffect(() => {
-        if (!dragging)
-            return;
-        const handleDragEnd = () => {
-            const shouldClose = clientPosition === "start" ? dragDirectionRef.current < 0 : dragDirectionRef.current > 0;
-            dragShouldCloseRef.current =
-                Math.abs(dragDistanceRef.current) > DRAG_THRESHOLD && shouldClose;
-            if (containerRef?.current)
-                enableScroll();
-            if (!dragShouldCloseRef.current)
-                unlockDragScroll();
-            setDragging(false);
-            if (dragShouldCloseRef.current) {
-                onCloseRef.current?.({ reason: "drag" });
-            }
-            else {
-                resetDragData();
-            }
-        };
-        const handleDrag = (e) => {
-            if (!dragging || clientPosition === "center")
-                return;
-            if (rootRef.current?.scrollTop !== 0 || rootRef.current?.scrollLeft !== 0)
-                return;
-            const target = e.targetTouches[0];
-            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 nextPerpendicular = 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 < nextPerpendicular || nextPerpendicular > DRAG_OPPOSITE_THRESHOLD)) {
-                dragLastCoordinateRef.current = coordinate[key];
-                return;
-            }
-            dragDirectionRef.current = coordinate[key] - dragLastCoordinateRef.current;
-            dragLastCoordinateRef.current = coordinate[key];
-            const isClosingDirection = clientPosition === "start" ? dragDirectionRef.current < 0 : dragDirectionRef.current > 0;
-            if (next > DRAG_SCROLL_LOCK_THRESHOLD && isClosingDirection) {
-                lockDragScroll();
-            }
-            dragDistanceRef.current =
-                clientPosition === "start"
-                    ? Math.min(0, dragDistanceRef.current + dragDirectionRef.current)
-                    : Math.max(0, dragDistanceRef.current + dragDirectionRef.current);
-            dragPendingDistanceRef.current = dragDistanceRef.current;
-            if (dragFrameRef.current === null) {
-                dragFrameRef.current = window.requestAnimationFrame(() => {
-                    setDragStyles(dragPendingDistanceRef.current);
-                    dragFrameRef.current = null;
-                });
-            }
-        };
-        document.addEventListener("touchmove", handleDrag, { passive: true });
-        document.addEventListener("touchend", handleDragEnd, { passive: true });
-        return () => {
-            if (dragFrameRef.current !== null) {
-                window.cancelAnimationFrame(dragFrameRef.current);
-                dragFrameRef.current = null;
-            }
-            if (!dragShouldCloseRef.current)
-                unlockDragScroll();
-            document.removeEventListener("touchmove", handleDrag);
-            document.removeEventListener("touchend", handleDragEnd);
-        };
-    }, [
-        dragging,
-        clientPosition,
-        onCloseRef,
-        position,
-        rootRef,
-        containerRef,
-        setDragStyles,
-        resetDragData,
-        lockDragScroll,
-        unlockDragScroll,
-    ]);
     return (_jsx(Overlay, { instanceRef: overlayRef, onClose: onClose, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay, blurred: blurredOverlay, overflow: clientPosition === "center" ? "auto" : "hidden", className: overlayClassName, contained: contained, containerRef: containerRef, attributes: {
-            onTouchStart: handleDragStart,
+            onTouchStart: handleTouchStart,
         }, children: ({ active }) => {
-            const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], shouldBeContained && s["--contained"], responsiveClassNames(s, "--position", position), mixinStyles.classNames);
-            return (_jsx(Context.Provider, { value: value, children: _jsx("div", { ...attributes, style: {
-                        ...mixinStyles.variables,
-                        ...responsiveVariables("--rs-modal-size", size),
-                        "--rs-modal-drag": "0px",
-                    }, "aria-labelledby": titleMounted ? `${id}-title` : undefined, "aria-describedby": subtitleMounted ? `${id}-subtitle` : undefined, "aria-label": ariaLabel || attributes?.["aria-label"], className: rootClassNames, "aria-modal": "true", 
-                    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
-                    role: "dialog", tabIndex: !autoFocus ? -1 : undefined, ref: rootRef, onTransitionEnd: handleTransitionEnd, children: children }) }));
+            const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], shouldBeContained && s["--contained"], responsiveClassNames(s, "--position", position));
+            return (_jsxs(Context.Provider, { value: value, children: [active && clientPosition === "bottom" && !shouldBeContained && (_jsx("div", { className: s.edge, "aria-hidden": "true" })), _jsx("div", { ...attributes, style: {
+                            ...responsiveVariables("--rs-modal-size", size),
+                            ...responsiveVariables("--rs-modal-p", padding),
+                            "--rs-modal-drag": "0px",
+                        }, "aria-labelledby": titleMounted ? `${id}-title` : undefined, "aria-describedby": subtitleMounted ? `${id}-subtitle` : undefined, "aria-label": ariaLabel || attributes?.["aria-label"], className: rootClassNames, "aria-modal": "true", 
+                        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
+                        role: "dialog", tabIndex: !autoFocus ? -1 : undefined, ref: rootRef, onTransitionEnd: handleTransitionEnd, children: children })] }));
         } }));
 };
 Modal.displayName = "Modal";

package/dist/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;background:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral);box-shadow:var(--rs-shadow-overlay);will-change:transform,opacity;outline:none;overscroll-behavior:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center.--active,[dir=rtl] .--position-center.--active{transform:translate(0);opacity:1}.--position-bottom{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{transform:translate(0);opacity:1}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{transform:translate(0);opacity:1}.--position-bottom--m{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--m{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{transform:translate(0);opacity:1}.--position-bottom--l{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--l{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{transform:translate(0);opacity:1}.--position-bottom--xl{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--xl{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{transform:translate(0);opacity:1}}
+@property --rs-modal-drag{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;--rs-modal-padding:calc(var(--rs-modal-p) * var(--rs-unit-x1));--rs-modal-env-top:env(safe-area-inset-top,0px);--rs-modal-env-bottom:env(safe-area-inset-bottom,0px);--rs-modal-env-start:env(safe-area-inset-left,0px);--rs-modal-env-end:env(safe-area-inset-right,0px);--rs-modal-offset:var(--rs-unit-x2);--rs-modal-inset-top:max(var(--rs-modal-offset),var(--rs-modal-env-top));--rs-modal-inset-bottom:max(var(--rs-modal-offset),var(--rs-modal-env-bottom));--rs-modal-inset-start:max(var(--rs-modal-offset),var(--rs-modal-env-start));--rs-modal-inset-end:max(var(--rs-modal-offset),var(--rs-modal-env-end));--rs-modal-far-offset:var(--rs-unit-x6);transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;background:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral);box-shadow:var(--rs-shadow-overlay);border:0 solid var(--rs-color-border-neutral-faded);padding-block:var(--rs-modal-padding) calc(var(--rs-modal-padding) + var(--rs-modal-env-bottom) * var(--rs-modal-safe));padding-inline:calc(var(--rs-modal-padding) + var(--rs-modal-env-start) * var(--rs-modal-safe)) calc(var(--rs-modal-padding) + var(--rs-modal-env-end) * var(--rs-modal-safe));will-change:transform,opacity;outline:none;overscroll-behavior:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}[dir=rtl] .root{--rs-modal-env-start:env(safe-area-inset-right,0px);--rs-modal-env-end:env(safe-area-inset-left,0px)}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%;--rs-modal-env-top:0px;--rs-modal-env-bottom:0px;--rs-modal-env-start:0px;--rs-modal-env-end:0px}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s);--rs-modal-p-s:0;--rs-modal-p-m:var(--rs-modal-p-s);--rs-modal-p-l:var(--rs-modal-p-m);--rs-modal-p-xl:var(--rs-modal-p-l);--rs-modal-p:var(--rs-modal-p-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center.--active,[dir=rtl] .--position-center.--active{transform:translate(0);opacity:1}.--position-bottom{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(var(--rs-modal-drag))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(var(--rs-modal-drag))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{transform:translate(0);opacity:1}.edge{position:fixed;inset-inline:0;bottom:0;height:calc(var(--rs-unit-x1) * 12);background:var(--rs-color-background-elevation-overlay);pointer-events:none}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m);--rs-modal-p:var(--rs-modal-p-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{transform:translate(0);opacity:1}.--position-bottom--m{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--m{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(var(--rs-modal-drag))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--m{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--m{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l);--rs-modal-p:var(--rs-modal-p-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{transform:translate(0);opacity:1}.--position-bottom--l{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--l{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(var(--rs-modal-drag))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--l{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--l{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl);--rs-modal-p:var(--rs-modal-p-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{transform:translate(0);opacity:1}.--position-bottom--xl{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--xl{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--xl{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--xl{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{transform:translate(0);opacity:1}}

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

@@ -1,8 +1,9 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { OverlayCloseReason, OverlayProps } from "../../components/Overlay";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { OverlayCloseReason, OverlayProps } from "../../components/Overlay/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
+export type Position = "center" | "end" | "bottom" | "start" | "full-screen";
 export type Context = {
     id: string;
     titleMounted: boolean;
@@ -22,7 +23,7 @@ export type Props = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Component position on the screen */
-    position?: G.Responsive<"center" | "end" | "bottom" | "start" | "full-screen">;
+    position?: G.Responsive<Position>;
     /** Component size, literal css value */
     size?: G.Responsive<string>;
     /** Component padding, unit token multiplier */

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

@@ -1,7 +1,7 @@
-import Modal, { ModalSubtitle, ModalTitle } from "./Modal";
+import Modal, { ModalSubtitle, ModalTitle } from "./Modal.js";
 declare const ModalRoot: typeof Modal & {
     Title: typeof ModalTitle;
     Subtitle: typeof ModalSubtitle;
 };
 export default ModalRoot;
-export type { Props as ModalProps } from "./Modal.types";
+export type { Props as ModalProps } from "./Modal.types.js";

package/dist/components/Modal/index.js

@@ -1,4 +1,4 @@
-import Modal, { ModalSubtitle, ModalTitle } from "./Modal";
+import Modal, { ModalSubtitle, ModalTitle } from "./Modal.js";
 const ModalRoot = Modal;
 ModalRoot.Title = ModalTitle;
 ModalRoot.Subtitle = ModalSubtitle;

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

@@ -1,12 +1,12 @@
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { fn } from "storybook/test";
-import { type ModalProps } from "../../../components/Modal";
+import { type ModalProps } from "../../../components/Modal/index.js";
 declare const _default: {
     title: string;
     component: React.FC<ModalProps> & {
-        Title: typeof import("../Modal").ModalTitle;
-        Subtitle: typeof import("../Modal").ModalSubtitle;
+        Title: typeof import("../Modal.js").ModalTitle;
+        Subtitle: typeof import("../Modal.js").ModalSubtitle;
     };
     parameters: {
         iframe: {