reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Flyout/FlyoutContent.js

@@ -2,15 +2,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import Portal from "../../components/_private/Portal";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import ScrollArea from "../ScrollArea";
-import { ContentProvider, useFlyoutContext } from "./Flyout.context";
-import cooldown from "./utilities/cooldown";
+import Freeze from "../../components/_private/Freeze/index.js";
+import Portal from "../../components/_private/Portal/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import ScrollArea from "../ScrollArea/index.js";
+import { ContentProvider, useFlyoutContext } from "./Flyout.context.js";
+import cooldown from "./utilities/cooldown.js";
 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);
@@ -29,7 +30,9 @@ const FlyoutContent = (props) => {
         s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"], triggerType === "hover" && disableContentHover && s["--hover-disabled"]);
     const contentClassNames = classNames(s.content, className, contentClassName, attributes?.className, contentAttributes?.className);
     let role = attributes?.role || contentAttributes?.role;
-    if (triggerType === "hover") {
+    // Hover content keeps the default dialog focus trapping for keyboard navigation but is announced as a tooltip,
+    // explicit trap modes mean it contains interactive elements, e.g. submenus
+    if (triggerType === "hover" && (trapFocusMode === "dialog" || !trapFocusMode)) {
         role = "tooltip";
     }
     else if (trapFocusMode === "dialog") {
@@ -48,7 +51,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.d.ts

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

package/dist/components/Flyout/FlyoutControlled.js

@@ -3,21 +3,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { TrapFocus } from "@reshaped/utilities";
 import { checkKeyboardMode, } from "@reshaped/utilities/internal";
-import usePrevious from "../../hooks/_internal/usePrevious";
-import useElementId from "../../hooks/useElementId";
-import useHandlerRef from "../../hooks/useHandlerRef";
-import useHotkeys from "../../hooks/useHotkeys";
-import useIsDismissible from "../../hooks/useIsDismissible";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import useOnClickOutside from "../../hooks/useOnClickOutside";
-import { checkTransitions } from "../../utilities/animation";
-import * as timeouts from "./Flyout.constants";
-import { Provider, useFlyoutContentContext, useFlyoutContext, useFlyoutTriggerContext, } from "./Flyout.context";
-import useFlyout from "./useFlyout";
-import cooldown from "./utilities/cooldown";
-import { createSafeArea } from "./utilities/safeArea";
+import usePrevious from "../../hooks/_internal/usePrevious.js";
+import useElementId from "../../hooks/useElementId.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useIsDismissible from "../../hooks/useIsDismissible.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useOnClickOutside from "../../hooks/useOnClickOutside.js";
+import { checkTransitions } from "../../utilities/animation.js";
+import * as timeouts from "./Flyout.constants.js";
+import { Provider, useFlyoutContentContext, useFlyoutContext, useFlyoutTriggerContext, } from "./Flyout.context.js";
+import useFlyout from "./useFlyout.js";
+import cooldown from "./utilities/cooldown.js";
+import { createSafeArea } from "./utilities/safeArea.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, onAfterOpen, onAfterClose, children, disabled, fallbackAdjustLayout, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, fallbackPositions, contentZIndex, contentClassName, contentAttributes, scrollableClassName, scrollableAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, onAfterOpen, onAfterClose, children, disabled, fallbackAdjustLayout, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, disableTouchTrigger, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, fallbackPositions, contentZIndex, contentClassName, contentAttributes, scrollableClassName, scrollableAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
     const onAfterOpenRef = useHandlerRef(onAfterOpen);
@@ -53,6 +53,10 @@ const FlyoutControlled = (props) => {
     // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
     // So we're saving a flag on touch start and then change the mouse enter behavior
     const hoverTriggeredWithTouchEventRef = React.useRef(false);
+    // Mouse enter emulated after a touch should be ignored when touch interactions are disabled
+    const ignoreTouchMouseEnterRef = React.useRef(false);
+    // Other triggers got pointer-events disabled by this flyout and still have to be restored
+    const triggersDisabledRef = React.useRef(false);
     // Cleanup function for safe area tracking
     const safeAreaRef = React.useRef(null);
     const originCoordinatesRef = React.useRef(originCoordinates ?? null);
@@ -89,6 +93,7 @@ const FlyoutControlled = (props) => {
     const disableTriggers = React.useCallback(() => {
         if (triggerType !== "hover")
             return;
+        triggersDisabledRef.current = true;
         document.querySelectorAll("[data-rs-flyout-active=true]").forEach((el) => {
             if (el === triggerElRef.current)
                 return;
@@ -98,6 +103,7 @@ const FlyoutControlled = (props) => {
     const enableTriggers = React.useCallback(() => {
         if (triggerType !== "hover")
             return;
+        triggersDisabledRef.current = false;
         document.querySelectorAll("[data-rs-flyout-active]").forEach((el) => {
             el.style.removeProperty("pointer-events");
         });
@@ -157,8 +163,12 @@ const FlyoutControlled = (props) => {
     const handleTouchStart = React.useCallback(() => {
         if (triggerType !== "hover")
             return;
+        if (disableTouchTrigger) {
+            ignoreTouchMouseEnterRef.current = true;
+            return;
+        }
         hoverTriggeredWithTouchEventRef.current = true;
-    }, [triggerType]);
+    }, [triggerType, disableTouchTrigger]);
     const handleContentMouseEnter = React.useCallback(() => {
         clearTimer();
         if (hoverTriggeredWithTouchEventRef.current) {
@@ -174,6 +184,10 @@ const FlyoutControlled = (props) => {
         }
     }, [clearTimer, handleOpen, groupTimeouts]);
     const handleTriggerMouseEnter = React.useCallback((e) => {
+        if (ignoreTouchMouseEnterRef.current) {
+            ignoreTouchMouseEnterRef.current = false;
+            return;
+        }
         if (e.currentTarget === triggerElRef.current) {
             safeAreaRef.current?.cleanup();
         }
@@ -271,6 +285,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 +334,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 +350,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
      */
@@ -327,6 +359,18 @@ const FlyoutControlled = (props) => {
             return;
         return () => safeAreaRef.current?.cleanup();
     }, [isRendered]);
+    /**
+     * Restore the triggers disabled on open when the content goes away without handleClose,
+     * for example when the flyout unmounts while open or gets hidden with active/disabled props
+     */
+    React.useEffect(() => {
+        if (!isRendered)
+            return;
+        return () => {
+            if (triggersDisabledRef.current)
+                enableTriggers();
+        };
+    }, [isRendered, enableTriggers]);
     /**
      * Release focus trapping on unmount
      */
@@ -352,7 +396,14 @@ const FlyoutControlled = (props) => {
         close: () => handleClose({}),
         updatePosition: () => updatePosition(),
     }), [handleOpen, handleClose, updatePosition]);
-    useHotkeys({ Escape: () => handleClose({ reason: "escape-key" }) }, [handleClose]);
+    useHotkeys({
+        Escape: () => {
+            // Nested flyouts are closed one by one, starting from the latest opened one
+            if (!isDismissible())
+                return;
+            handleClose({ reason: "escape-key" });
+        },
+    }, [handleClose, isDismissible]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
         // Clicking outside changes focused element so we don't need to set it back ourselves
         shouldReturnFocusRef.current = false;
@@ -362,6 +413,7 @@ const FlyoutControlled = (props) => {
     });
     return (_jsx(Provider, { value: {
             id,
+            active: !!active,
             flyout,
             width,
             triggerElRef,

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

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

package/dist/components/Flyout/FlyoutTrigger.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TriggerProvider, useFlyoutContext } from "./Flyout.context";
+import { TriggerProvider, useFlyoutContext } from "./Flyout.context.js";
 const FlyoutTrigger = (props) => {
     const { children } = props;
     const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleTriggerMouseEnter, handleMouseLeave, handleTouchStart, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();

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

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

package/dist/components/Flyout/FlyoutUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import FlyoutControlled from "./FlyoutControlled";
+import FlyoutControlled from "./FlyoutControlled.js";
 const FlyoutUncontrolled = (props) => {
     const { defaultActive, onClose, onOpen } = props;
     const [active, setActive] = React.useState(defaultActive || false);

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

@@ -1,10 +1,10 @@
-import Flyout from "./Flyout";
-import FlyoutContent from "./FlyoutContent";
-import FlyoutTrigger from "./FlyoutTrigger";
+import Flyout from "./Flyout.js";
+import FlyoutContent from "./FlyoutContent.js";
+import FlyoutTrigger from "./FlyoutTrigger.js";
 declare const FlyoutRoot: typeof Flyout & {
     Trigger: typeof FlyoutTrigger;
     Content: typeof FlyoutContent;
 };
 export default FlyoutRoot;
-export { useFlyoutContext } from "./Flyout.context";
-export type { CloseReason as FlyoutCloseReason, ContentProps as FlyoutContentProps, Instance as FlyoutInstance, Props as FlyoutProps, TriggerAttributes as FlyoutTriggerAttributes, TriggerProps as FlyoutTriggerProps, } from "./Flyout.types";
+export { useFlyoutContext } from "./Flyout.context.js";
+export type { CloseReason as FlyoutCloseReason, ContentProps as FlyoutContentProps, Instance as FlyoutInstance, Props as FlyoutProps, TriggerAttributes as FlyoutTriggerAttributes, TriggerProps as FlyoutTriggerProps, } from "./Flyout.types.js";

package/dist/components/Flyout/index.js

@@ -1,8 +1,8 @@
-import Flyout from "./Flyout";
-import FlyoutContent from "./FlyoutContent";
-import FlyoutTrigger from "./FlyoutTrigger";
+import Flyout from "./Flyout.js";
+import FlyoutContent from "./FlyoutContent.js";
+import FlyoutTrigger from "./FlyoutTrigger.js";
 const FlyoutRoot = Flyout;
 FlyoutRoot.Trigger = FlyoutTrigger;
 FlyoutRoot.Content = FlyoutContent;
 export default FlyoutRoot;
-export { useFlyoutContext } from "./Flyout.context";
+export { useFlyoutContext } from "./Flyout.context.js";

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>;
 }>;