reshaped 4.2.0 → 4.3.0-canary.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -128,7 +128,7 @@ const Autocomplete = (props) => {
         highlightedId,
         setHighlightedId,
     }), [highlightedId, handleItemClick]);
-    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, onAfterOpen: onAfterOpen, onAfterClose: onAfterClose, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinHeight: fallbackMinHeight, contentMaxHeight: contentMaxHeight, contentZIndex: contentZIndex, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, onAfterOpen: onAfterOpen, onAfterClose: onAfterClose, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinHeight: fallbackMinHeight, contentMaxHeight: contentMaxHeight, contentZIndex: contentZIndex, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
                             // Ignoring the type check since TS can't infer the correct html element type
                             ref: ref,

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

@@ -28,4 +28,11 @@ export declare const handlers: StoryObj<{
 export declare const triggerRef: StoryObj<{
     handleOpen: ReturnType<typeof fn>;
 }>;
+export declare const sameMenuRightClick: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const insideFlyoutRightClick: StoryObj<{
+    handlePopoverClose: ReturnType<typeof fn>;
+}>;
 export declare const menu: StoryObj;

package/dist/components/ContextMenu/tests/ContextMenu.stories.js

@@ -3,10 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.menu = exports.triggerRef = exports.handlers = exports.base = void 0;
+exports.menu = exports.insideFlyoutRightClick = exports.sameMenuRightClick = exports.triggerRef = exports.handlers = exports.base = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
+const Button_1 = __importDefault(require("../../../components/Button"));
 const ContextMenu_1 = __importDefault(require("../../../components/ContextMenu"));
+const Popover_1 = __importDefault(require("../../../components/Popover"));
 const View_1 = __importDefault(require("../../../components/View"));
 const helpers_1 = require("../../../utilities/helpers");
 const storybook_1 = require("../../../utilities/storybook");
@@ -91,6 +93,102 @@ exports.triggerRef = {
 			</>);
     },
 };
+exports.sameMenuRightClick = {
+    name: "test: right click on the same context menu",
+    args: {
+        handleOpen: (0, test_1.fn)(),
+        handleClose: (0, test_1.fn)(),
+    },
+    render: (args) => {
+        const triggerRef = react_1.default.useRef(null);
+        return (<View_1.default gap={4}>
+				<ContextMenu_1.default onOpen={args.handleOpen} onClose={args.handleClose}>
+					<View_1.default height="60px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "children" }}/>
+
+					<ContextMenu_1.default.Content>
+						<ContextMenu_1.default.Item>Children item</ContextMenu_1.default.Item>
+					</ContextMenu_1.default.Content>
+				</ContextMenu_1.default>
+
+				<View_1.default height="60px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ ref: triggerRef, "data-testid": "trigger-ref" }}/>
+
+				<ContextMenu_1.default triggerRef={triggerRef} onOpen={args.handleOpen} onClose={args.handleClose}>
+					<ContextMenu_1.default.Content>
+						<ContextMenu_1.default.Item>Trigger ref item</ContextMenu_1.default.Item>
+					</ContextMenu_1.default.Content>
+				</ContextMenu_1.default>
+			</View_1.default>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        for (const [testId, text] of [
+            ["children", "Children item"],
+            ["trigger-ref", "Trigger ref item"],
+        ]) {
+            const trigger = canvas.getByTestId(testId);
+            args.handleOpen.mockClear();
+            args.handleClose.mockClear();
+            const { left, top } = trigger.getBoundingClientRect();
+            await test_1.userEvent.pointer({
+                keys: "[MouseRight]",
+                target: trigger,
+                coords: { clientX: left + 10, clientY: top + 10 },
+            });
+            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(1);
+            const menu = canvas.getByRole("menu");
+            const initialLeft = menu.getBoundingClientRect().left;
+            // Wait for the open animation to finish
+            await (0, helpers_1.sleep)(500);
+            await test_1.userEvent.pointer({
+                keys: "[MouseRight]",
+                target: trigger,
+                coords: { clientX: left + 210, clientY: top + 10 },
+            });
+            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
+            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(2);
+            await (0, helpers_1.sleep)(500);
+            (0, test_1.expect)(canvas.getByText(text)).toBeInTheDocument();
+            (0, test_1.expect)(canvas.getByRole("menu").getBoundingClientRect().left).toBe(initialLeft + 200);
+            await test_1.userEvent.click(trigger);
+            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(2);
+            await (0, test_1.waitFor)(() => {
+                (0, test_1.expect)(canvas.queryByText(text)).not.toBeInTheDocument();
+            }, {
+                timeout: 1000,
+            });
+        }
+    },
+};
+exports.insideFlyoutRightClick = {
+    name: "test: right click inside another flyout",
+    args: {
+        handlePopoverClose: (0, test_1.fn)(),
+    },
+    render: (args) => (<Popover_1.default onClose={args.handlePopoverClose}>
+			<Popover_1.default.Trigger>
+				{(attributes) => <Button_1.default attributes={attributes}>Open popover</Button_1.default>}
+			</Popover_1.default.Trigger>
+			<Popover_1.default.Content>
+				<ContextMenu_1.default>
+					<View_1.default width="200px" height="60px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "popover-area" }}/>
+
+					<ContextMenu_1.default.Content>
+						<ContextMenu_1.default.Item>Context menu item</ContextMenu_1.default.Item>
+					</ContextMenu_1.default.Content>
+				</ContextMenu_1.default>
+			</Popover_1.default.Content>
+		</Popover_1.default>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        await test_1.userEvent.click(canvas.getByText("Open popover"));
+        await (0, helpers_1.sleep)(500);
+        await test_1.userEvent.pointer({ keys: "[MouseRight]", target: canvas.getByTestId("popover-area") });
+        (0, test_1.expect)(canvas.getByText("Context menu item")).toBeInTheDocument();
+        (0, test_1.expect)(canvas.getByTestId("popover-area")).toBeInTheDocument();
+        (0, test_1.expect)(args.handlePopoverClose).not.toHaveBeenCalled();
+    },
+};
 const menuData = [
     { label: "Action 1" },
     { label: "Action 2" },

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -15,7 +15,7 @@ const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);
 const DropdownMenu = (props) => {
     const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", size, ...popoverProps } = props;
-    return (_jsx(DropdownMenuProvider, { size: size, children: _jsx(Popover, { ...popoverProps, position: position, padding: 1, trapFocusMode: trapFocusMode, triggerType: triggerType, disableHideAnimation: triggerType !== "hover", children: children }) }));
+    return (_jsx(DropdownMenuProvider, { size: size, children: _jsx(Popover, { ...popoverProps, position: position, padding: 1, trapFocusMode: trapFocusMode, triggerType: triggerType, children: children }) }));
 };
 export const DropdownMenuContent = (props) => {
     const { children, attributes, className } = props;

package/dist/components/Flyout/Flyout.module.css

@@ -1 +1 @@
-.positioner{--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-z-index:var(--rs-z-index-absolute);--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute;isolation:isolate;z-index:var(--rs-flyout-z-index);display:flex;flex-direction:column;pointer-events:none}.positioner.--hover{pointer-events:all}.positioner.--hover-disabled,.positioner.--hover-disabled .content{pointer-events:none}.content{pointer-events:all;opacity:0;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);outline:none;height:100%;max-width:var(--rs-flyout-max-w);max-height:var(--rs-flyout-max-h);backface-visibility:hidden;flex-grow:1;display:flex;flex-direction:column;transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .content:focus{box-shadow:var(--rs-outline-shadow)}.positioner.--width-trigger .content{transform:scale(1) translateY(var(--rs-unit-x2))}.positioner.--position-top,.positioner.--position-top-end,.positioner.--position-top-start{--rs-flyout-origin-y:100%}.positioner.--position-bottom,.positioner.--position-bottom-end,.positioner.--position-bottom-start{--rs-flyout-origin-y:0%}.positioner.--position-bottom-start,.positioner.--position-top-start{--rs-flyout-origin-x:0%}.positioner.--position-bottom-end,.positioner.--position-start,.positioner.--position-start-bottom,.positioner.--position-start-top,.positioner.--position-top-end{--rs-flyout-origin-x:100%}.positioner.--position-end,.positioner.--position-end-bottom,.positioner.--position-end-top{--rs-flyout-origin-x:0%}.positioner.--position-end-top,.positioner.--position-start-top{--rs-flyout-origin-y:0%}.positioner.--position-end-bottom,.positioner.--position-start-bottom{--rs-flyout-origin-y:100%}.positioner.--visible .content{opacity:1;transform:scale(1) translateY(0)}.positioner.--animated .content{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.positioner.--animated.--visible .content{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}
+.positioner{--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-z-index:var(--rs-z-index-absolute);--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute;isolation:isolate;z-index:var(--rs-flyout-z-index);display:flex;flex-direction:column;pointer-events:none}.positioner.--hover{pointer-events:all}.positioner.--hover-disabled,.positioner.--hover-disabled .content{pointer-events:none}.content{pointer-events:all;opacity:0;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);outline:none;height:100%;max-width:var(--rs-flyout-max-w);max-height:var(--rs-flyout-max-h);backface-visibility:hidden;flex-grow:1;display:flex;flex-direction:column;transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .content:focus{box-shadow:var(--rs-outline-shadow)}.positioner.--width-trigger .content{transform:scale(1) translateY(var(--rs-unit-x2))}.positioner.--position-top,.positioner.--position-top-end,.positioner.--position-top-start{--rs-flyout-origin-y:100%}.positioner.--position-bottom,.positioner.--position-bottom-end,.positioner.--position-bottom-start{--rs-flyout-origin-y:0%}.positioner.--position-bottom-start,.positioner.--position-top-start{--rs-flyout-origin-x:0%}.positioner.--position-bottom-end,.positioner.--position-start,.positioner.--position-start-bottom,.positioner.--position-start-top,.positioner.--position-top-end{--rs-flyout-origin-x:100%}.positioner.--position-end,.positioner.--position-end-bottom,.positioner.--position-end-top{--rs-flyout-origin-x:0%}.positioner.--position-end-top,.positioner.--position-start-top{--rs-flyout-origin-y:0%}.positioner.--position-end-bottom,.positioner.--position-start-bottom{--rs-flyout-origin-y:100%}.positioner.--visible .content{opacity:1;transform:scale(1) translateY(0);pointer-events:all}.positioner.--animated .content{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.positioner.--animated.--visible .content{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}

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

@@ -180,6 +180,7 @@ export type ContentProps = {
 };
 export type ContextProps = {
     id: string;
+    active: boolean;
     flyout: UseFlyoutData;
     width?: Width;
     triggerElRef?: React.RefObject<HTMLButtonElement | null>;

package/dist/components/Flyout/FlyoutContent.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
+import Freeze from "../../components/_private/Freeze";
 import Portal from "../../components/_private/Portal";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
 import ScrollArea from "../ScrollArea";
@@ -10,7 +11,7 @@ import cooldown from "./utilities/cooldown";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes, colorMode } = props;
-    const { flyout, id, triggerElRef, flyoutElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, scrollableClassName, scrollableAttributes, contentMaxHeight, contentMaxWidth, contentZIndex, trapFocusMode, disableContentHover, autoFocus, width, isSubmenu, } = useFlyoutContext();
+    const { active, flyout, id, triggerElRef, flyoutElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, scrollableClassName, scrollableAttributes, contentMaxHeight, contentMaxWidth, contentZIndex, trapFocusMode, disableContentHover, autoFocus, width, isSubmenu, } = useFlyoutContext();
     const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const shadowRootRef = React.useRef(null);
@@ -48,7 +49,7 @@ const FlyoutContent = (props) => {
                 "--rs-flyout-max-h": contentMaxHeight,
                 "--rs-flyout-max-w": contentMaxWidth,
                 "--rs-flyout-z-index": contentZIndex,
-            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...contentAttributes, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...contentAttributes?.style, ...attributes?.style }, className: contentClassNames, children: _jsx(ScrollArea, { overscrollBehavior: "contain", scrollableAttributes: scrollableAttributes, scrollableClassName: scrollableClassName, children: children }) }) }) }));
+            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...contentAttributes, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...contentAttributes?.style, ...attributes?.style }, className: contentClassNames, children: _jsx(ScrollArea, { overscrollBehavior: "contain", scrollableAttributes: scrollableAttributes, scrollableClassName: scrollableClassName, children: _jsx(Freeze, { frozen: !active, children: children }) }) }) }) }));
     return (_jsx(Portal, { targetRef: shadowRootRef.current ? shadowRootRef : undefined, colorMode: colorMode, children: content }));
 };
 FlyoutContent.displayName = "Flyout.Content";

package/dist/components/Flyout/FlyoutControlled.js

@@ -271,6 +271,25 @@ const FlyoutControlled = (props) => {
         if (status === "rendered")
             show();
     }, [status, show]);
+    // Content can be reopened at new coordinates without closing in between
+    useIsomorphicLayoutEffect(() => {
+        if (!originCoordinates || !isRendered)
+            return;
+        updatePosition();
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [originCoordinates?.x, originCoordinates?.y]);
+    /**
+     * Closing before the open transition starts cancels it instead of reversing,
+     * so there is no transitionend to wait for
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (status !== "hidden")
+            return;
+        if (flyoutElRef.current?.firstElementChild?.getAnimations?.().length)
+            return;
+        remove();
+        onAfterCloseRef.current?.();
+    }, [status, remove, onAfterCloseRef]);
     /**
      * Handle focus trap
      *
@@ -301,9 +320,8 @@ const FlyoutControlled = (props) => {
         });
     }, [status, triggerType, trapFocusMode, autoFocus]);
     React.useEffect(() => {
-        if (!disableHideAnimation && status !== "hidden")
-            return;
-        if (disableHideAnimation && isRendered)
+        // Release when the hide animation starts or right away when the content is removed without it
+        if (status !== "hidden" && isRendered)
             return;
         if (trapFocusRef.current?.trapped) {
             /* Locking the popover to not open it again on trigger focus */
@@ -318,7 +336,7 @@ const FlyoutControlled = (props) => {
             trapFocusRef.current.release({ withoutFocusReturn: !shouldReturnFocusRef.current });
             shouldReturnFocusRef.current = true;
         }
-    }, [status, isRendered, triggerType, disableHideAnimation]);
+    }, [status, isRendered, triggerType]);
     /**
      * Clean up safe polygon tracking on unmount or when flyout closes
      */
@@ -362,6 +380,7 @@ const FlyoutControlled = (props) => {
     });
     return (_jsx(Provider, { value: {
             id,
+            active: !!active,
             flyout,
             width,
             triggerElRef,

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

@@ -75,6 +75,13 @@ export declare const disableHideAnimation: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const testFrozenContentOnClose: StoryObj<{
+    handleAfterClose: ReturnType<typeof fn>;
+}>;
+export declare const testCloseRightAfterOpen: StoryObj<{
+    handleAfterClose: ReturnType<typeof fn>;
+}>;
+export declare const testFocusReturnWithoutTransitions: StoryObj;
 export declare const disabled: StoryObj<{
     handleOpen: ReturnType<typeof fn>;
 }>;

package/dist/components/Flyout/tests/Flyout.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.testChangeSize = exports.testWithoutFocusable = exports.testScopedTheming = exports.testDynamicBounds = exports.testInsideModal = exports.testInsideScrollable = exports.testInsideSticky = exports.testInsideFixed = exports.contentAttributes = exports.instanceRef = exports.initialFocusRef = exports.positionRef = exports.containerRef = exports.disabled = exports.disableHideAnimation = exports.disableCloseOnOutsideClick = exports.disableContentHover = exports.contentMaxHeight = exports.contentZIndex = exports.contentShift = exports.contentGap = exports.width = exports.originCoordinates = exports.fallbackAdjustLayoutSize = exports.fallbackAdjustLayoutShift = exports.fallbackMinHeight = exports.fallbackAdjustLayout = exports.positionFallbacks = exports.modes = exports.activeFalse = exports.active = exports.defaultActive = exports.position = void 0;
+exports.testChangeSize = exports.testWithoutFocusable = exports.testScopedTheming = exports.testDynamicBounds = exports.testInsideModal = exports.testInsideScrollable = exports.testInsideSticky = exports.testInsideFixed = exports.contentAttributes = exports.instanceRef = exports.initialFocusRef = exports.positionRef = exports.containerRef = exports.disabled = exports.testFocusReturnWithoutTransitions = exports.testCloseRightAfterOpen = exports.testFrozenContentOnClose = exports.disableHideAnimation = exports.disableCloseOnOutsideClick = exports.disableContentHover = exports.contentMaxHeight = exports.contentZIndex = exports.contentShift = exports.contentGap = exports.width = exports.originCoordinates = exports.fallbackAdjustLayoutSize = exports.fallbackAdjustLayoutShift = exports.fallbackMinHeight = exports.fallbackAdjustLayout = exports.positionFallbacks = exports.modes = exports.activeFalse = exports.active = exports.defaultActive = exports.position = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
 const Button_1 = __importDefault(require("../../../components/Button"));
@@ -448,6 +448,147 @@ exports.disableHideAnimation = {
     name: "disableHideAnimation",
     render: () => <Demo disableHideAnimation defaultActive/>,
 };
+exports.testFrozenContentOnClose = {
+    name: "test: content doesn't change while closing",
+    args: {
+        handleAfterClose: (0, test_1.fn)(),
+    },
+    render: (args) => {
+        const [active, setActive] = react_1.default.useState(false);
+        const [value, setValue] = react_1.default.useState("First");
+        return (<Flyout_1.default active={active} onOpen={() => setActive(true)} onClose={() => setActive(false)} onAfterClose={args.handleAfterClose}>
+				<Flyout_1.default.Trigger>
+					{(attributes) => <Button_1.default attributes={attributes}>{value}</Button_1.default>}
+				</Flyout_1.default.Trigger>
+				<Flyout_1.default.Content>
+					<Content>
+						<div data-testid="selected-value">Selected: {value}</div>
+						<Button_1.default onClick={() => {
+                setValue("Second");
+                setActive(false);
+            }}>
+							Select second
+						</Button_1.default>
+					</Content>
+				</Flyout_1.default.Content>
+			</Flyout_1.default>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        // Transitions are disabled for the first frames after the color mode gets applied
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)(document.documentElement).not.toHaveAttribute("data-rs-no-transition");
+        });
+        await test_1.userEvent.click(canvas.getByRole("button", { name: "First" }));
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)(canvas.getByTestId("selected-value")).toBeVisible();
+        });
+        // Record the content state after every DOM update since the hide animation might end before click resolves
+        const snapshots = [];
+        const observer = new MutationObserver(() => {
+            const el = canvasElement.ownerDocument.querySelector("[data-testid=selected-value]");
+            if (!el)
+                return;
+            snapshots.push({ text: el.textContent, visible: el.checkVisibility() });
+        });
+        observer.observe(canvasElement.ownerDocument.body, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            characterData: true,
+        });
+        await test_1.userEvent.click(canvas.getByText("Select second"));
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)(canvas.queryByTestId("selected-value")).not.toBeInTheDocument();
+        });
+        observer.disconnect();
+        // Trigger is updated right away while the content keeps its last state during the hide animation
+        (0, test_1.expect)(canvas.getAllByRole("button")[0]).toHaveTextContent("Second");
+        (0, test_1.expect)(snapshots.length).toBeGreaterThan(0);
+        snapshots.forEach((snapshot) => {
+            (0, test_1.expect)(snapshot).toEqual({ text: "Selected: First", visible: true });
+        });
+        (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(1);
+    },
+};
+exports.testCloseRightAfterOpen = {
+    name: "test: close right after opening",
+    args: {
+        handleAfterClose: (0, test_1.fn)(),
+    },
+    render: (args) => {
+        const [active, setActive] = react_1.default.useState(false);
+        const [closeOnOpen, setCloseOnOpen] = react_1.default.useState(false);
+        // Closing in the same frame, before the open transition starts
+        react_1.default.useEffect(() => {
+            if (active && closeOnOpen)
+                setActive(false);
+        }, [active, closeOnOpen]);
+        return (<Flyout_1.default active={active} onAfterClose={args.handleAfterClose}>
+				<Flyout_1.default.Trigger>
+					{(attributes) => (<Button_1.default attributes={attributes} onClick={() => {
+                    setCloseOnOpen(true);
+                    setActive(true);
+                }}>
+							Trigger
+						</Button_1.default>)}
+				</Flyout_1.default.Trigger>
+				<Flyout_1.default.Content>
+					<Content />
+				</Flyout_1.default.Content>
+			</Flyout_1.default>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        // Transitions are disabled for the first frames after the color mode gets applied
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)(document.documentElement).not.toHaveAttribute("data-rs-no-transition");
+        });
+        await test_1.userEvent.click(canvas.getByRole("button", { name: "Trigger" }));
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)(canvas.queryByText("Content")).not.toBeInTheDocument();
+            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(1);
+        });
+    },
+};
+exports.testFocusReturnWithoutTransitions = {
+    name: "test: focus returns to the trigger with transitions disabled",
+    render: () => (<Flyout_1.default>
+			<Flyout_1.default.Trigger>
+				{(attributes) => <Button_1.default attributes={attributes}>Trigger</Button_1.default>}
+			</Flyout_1.default.Trigger>
+			<Flyout_1.default.Content>
+				<Content>
+					<Button_1.default onClick={() => { }}>Inside</Button_1.default>
+				</Content>
+			</Flyout_1.default.Content>
+		</Flyout_1.default>),
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const trigger = canvas.getByRole("button", { name: "Trigger" });
+        // Wait for the provider to enable transitions after mount before disabling them again
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)(document.documentElement).not.toHaveAttribute("data-rs-no-transition");
+        });
+        // Same as prefers-reduced-motion, content is removed without the hide animation
+        document.documentElement.setAttribute("data-rs-no-transition", "true");
+        try {
+            trigger.focus();
+            await test_1.userEvent.keyboard("{Enter}");
+            await (0, test_1.waitFor)(() => {
+                (0, test_1.expect)(canvas.getByRole("dialog")).toContainElement(document.activeElement);
+            });
+            await test_1.userEvent.keyboard("{Escape}");
+            await (0, test_1.waitFor)(() => {
+                (0, test_1.expect)(canvas.queryByRole("dialog")).not.toBeInTheDocument();
+            });
+            (0, test_1.expect)(trigger).toHaveFocus();
+        }
+        finally {
+            document.documentElement.removeAttribute("data-rs-no-transition");
+        }
+    },
+};
 exports.disabled = {
     name: "disabled",
     args: {

package/dist/components/Modal/Modal.js

@@ -1,20 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, createContext, useContext, useEffect, useMemo, useState, useRef, } from "react";
+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 useModalDrag from "./useModalDrag";
 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 +38,25 @@ 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,147 +64,8 @@ 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: {