reshaped 4.3.0 → 4.4.0-canary.1

package/dist/components/Autocomplete/Autocomplete.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import DropdownMenu from "../../components/DropdownMenu/index.js";
+import { useFormControl } from "../../components/FormControl/index.js";
 import TextField from "../../components/TextField/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
@@ -28,7 +29,9 @@ const Autocomplete = (props) => {
     const onChangeRef = useHandlerRef(onChange);
     const onItemSelectRef = useHandlerRef(onItemSelect);
     const onEnterRef = useHandlerRef(onEnter);
-    const isDropdownActive = hasChildren && (active ?? internalActive);
+    const formControl = useFormControl();
+    const disabled = formControl.disabled || textFieldProps.disabled || false;
+    const isDropdownActive = !disabled && hasChildren && (active ?? internalActive);
     const lockDropdown = React.useCallback(() => {
         // Prevent dropdown from re-opening when clicked on item with mouse
         // and focus moves to the item and back to the input
@@ -38,11 +41,11 @@ const Autocomplete = (props) => {
         }, 100);
     }, []);
     const handleOpen = React.useCallback(() => {
-        if (lockedRef.current)
+        if (disabled || lockedRef.current)
             return;
         setInternalActive(true);
         onOpenRef.current?.();
-    }, [onOpenRef]);
+    }, [disabled, onOpenRef]);
     const handleClose = (args) => {
         setInternalActive(false);
         onCloseRef.current?.(args);
@@ -126,10 +129,11 @@ const Autocomplete = (props) => {
         return () => mutationObserver.disconnect();
     }, [isDropdownActive]);
     const contextValue = React.useMemo(() => ({
+        disabled,
         onItemClick: handleItemClick,
         highlightedId,
         setHighlightedId,
-    }), [highlightedId, handleItemClick]);
+    }), [disabled, 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, 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
@@ -154,11 +158,15 @@ const Autocomplete = (props) => {
                         } })) }), _jsx(DropdownMenu.Content, { attributes: { onClick: handleContentClick, role: "listbox", ref: contentRef }, children: children })] }) }));
 };
 export const AutocompleteItem = (props) => {
-    const { value, data, onClick, disabled, ...menuItemProps } = props;
-    const { onItemClick, highlightedId } = React.useContext(AutocompleteContext);
+    const { value, data, onClick, disabled: disabledProp, ...menuItemProps } = props;
+    const context = React.useContext(AutocompleteContext);
+    const { onItemClick, highlightedId } = context;
+    const disabled = disabledProp || context.disabled;
     const id = useElementId();
     const highlighted = highlightedId === id;
     const handleClick = (e) => {
+        if (disabled)
+            return;
         onClick?.(e);
         onItemClick({ value, data });
     };

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

@@ -22,6 +22,7 @@ export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "i
 };
 export type ItemProps = Omit<MenuItemProps, "focusIndicator"> & SelectArgs;
 export type Context = {
+    disabled: boolean;
     onItemClick: (args: SelectArgs) => void;
     highlightedId?: string;
     setHighlightedId: (value?: string) => void;

package/dist/components/DropdownMenu/DropdownMenu.context.js

@@ -9,10 +9,11 @@ export const useDropdownMenu = () => React.useContext(DropdownMenuContext);
  * define themselves are inherited from the menu they're nested in.
  */
 export const DropdownMenuProvider = (props) => {
-    const { size, children } = props;
+    const { size, submenuTriggerType, children } = props;
     const parentContext = useDropdownMenu();
     const resolvedSize = size ?? parentContext.size;
-    const value = React.useMemo(() => ({ size: resolvedSize }), [resolvedSize]);
+    const resolvedSubmenuTriggerType = submenuTriggerType ?? parentContext.submenuTriggerType;
+    const value = React.useMemo(() => ({ size: resolvedSize, submenuTriggerType: resolvedSubmenuTriggerType }), [resolvedSize, resolvedSubmenuTriggerType]);
     return _jsx(DropdownMenuContext.Provider, { value: value, children: children });
 };
 DropdownMenuProvider.displayName = "DropdownMenu.Provider";

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -19,8 +19,8 @@ const DropdownMenuSubTriggerContext = React.createContext(false);
  */
 export const DropdownMenuKeepOpenContext = 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, children: children }) }));
+    const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", size, submenuTriggerType, ...popoverProps } = props;
+    return (_jsx(DropdownMenuProvider, { size: size, submenuTriggerType: submenuTriggerType, children: _jsx(Popover, { ...popoverProps, position: position, padding: 1, trapFocusMode: trapFocusMode, triggerType: triggerType, children: children }) }));
 };
 export const DropdownMenuContent = (props) => {
     const { children, attributes, className } = props;
@@ -37,8 +37,8 @@ export const DropdownMenuContent = (props) => {
     });
     const handleClick = (e) => {
         /**
-         * Stop event propagation to make sure outside click doesn't get triggered
-         * after the content is closed
+         * React events bubble through the portal, so item clicks would reach the components
+         * the menu is rendered in, like a clickable card. Wrappers inside the content still get them
          */
         e.stopPropagation();
         attributes?.onClick?.(e);
@@ -68,9 +68,10 @@ export const DropdownMenuItem = (props) => {
     return (_jsx(MenuItem, { ...props, size: size ?? menuSize, focusIndicator: "highlight", roundedCorners: true, className: [s.item, props.className], attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
 };
 export const DropdownMenuSubMenu = (props) => {
-    const { children, position = "end-top", contentGap = 0.5, ...dropdownMenuProps } = props;
+    const { children, position = "end-top", contentGap = 0.5, triggerType, ...dropdownMenuProps } = props;
+    const { submenuTriggerType } = useDropdownMenu();
     const dropdownMenuRef = React.useRef(null);
-    return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, triggerType: "hover", position: position, contentGap: contentGap, instanceRef: dropdownMenuRef, children: children }) }));
+    return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, triggerType: triggerType ?? submenuTriggerType ?? "hover", position: position, contentGap: contentGap, instanceRef: dropdownMenuRef, children: children }) }));
 };
 export const DropdownMenuSubTriggerItem = (props) => {
     const { children, attributes, ...menuItemProps } = props;

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

@@ -3,18 +3,23 @@ import type { FlyoutContentProps } from "../../components/Flyout/index.js";
 import type { MenuItemProps } from "../../components/MenuItem/index.js";
 import type { PopoverInstance, PopoverProps } from "../../components/Popover/index.js";
 export type Instance = PopoverInstance;
+export type SubMenuTriggerType = Extract<PopoverProps["triggerType"], "hover" | "click">;
 export type Context = {
     size?: MenuItemProps["size"];
+    submenuTriggerType?: SubMenuTriggerType;
 };
-export type ProviderProps = {
+export type ProviderProps = Context & {
     children: React.ReactNode;
-    size?: MenuItemProps["size"];
 };
 export type Props = Pick<PopoverProps, "children" | "position" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "contentMaxHeight" | "contentZIndex" | "onOpen" | "onClose" | "onAfterOpen" | "onAfterClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
     /** Size used by the menu items */
     size?: MenuItemProps["size"];
+    /** Interaction used to open all submenus of the menu, keyboard navigation works for both of them
+     * @default "hover"
+     */
+    submenuTriggerType?: SubMenuTriggerType;
 };
 export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;
 export type ItemProps = Omit<MenuItemProps, "roundedCorners" | "focusIndicator">;
@@ -25,5 +30,7 @@ export type SectionProps = {
 export type SubMenuProps = {
     /** Node for inserting children */
     children: React.ReactNode;
+    /** Interaction used to open the submenu, overrides the submenuTriggerType of the menu */
+    triggerType?: SubMenuTriggerType;
 } & Pick<PopoverProps, "position" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinHeight" | "contentGap" | "contentShift" | "width" | "containerRef">;
 export type SubTriggerProps = Omit<MenuItemProps, "endSlot" | "roundedCorners" | "focusIndicator">;

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

@@ -28,6 +28,7 @@ export declare const sections: {
 };
 export declare const size: StoryObj;
 export declare const submenu: StoryObj;
+export declare const submenuTriggerType: StoryObj;
 export declare const defaultActive: StoryObj<{
     handleOpen: ReturnType<typeof fn>;
     handleClose: ReturnType<typeof fn>;

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

@@ -158,6 +158,104 @@ export const submenu = {
         });
     },
 };
+const expectNotOpenedOnHover = async (trigger, contentText) => {
+    await userEvent.hover(trigger);
+    await sleep(100);
+    expect(within(document.body).queryByText(contentText)).not.toBeInTheDocument();
+};
+export const submenuTriggerType = {
+    name: "submenuTriggerType",
+    render: () => (<Example>
+			<Example.Item title="submenuTriggerType: click, inherited by nested submenus">
+				<DropdownMenu submenuTriggerType="click">
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Item onClick={() => { }}>Item 1</DropdownMenu.Item>
+						<DropdownMenu.SubMenu>
+							<DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item onClick={() => { }}>SubItem 1</DropdownMenu.Item>
+								<DropdownMenu.Item onClick={() => { }}>SubItem 2</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.SubMenu>
+						<DropdownMenu.SubMenu>
+							<DropdownMenu.SubTrigger>Item 3</DropdownMenu.SubTrigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item onClick={() => { }}>SubItem 2-1</DropdownMenu.Item>
+								<DropdownMenu.SubMenu>
+									<DropdownMenu.SubTrigger>SubItem 2-2</DropdownMenu.SubTrigger>
+									<DropdownMenu.Content>
+										<DropdownMenu.Item onClick={() => { }}>SubItem 2-2-1</DropdownMenu.Item>
+										<DropdownMenu.Item onClick={() => { }}>SubItem 2-2-2</DropdownMenu.Item>
+									</DropdownMenu.Content>
+								</DropdownMenu.SubMenu>
+							</DropdownMenu.Content>
+						</DropdownMenu.SubMenu>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
+
+			<Example.Item title="submenuTriggerType: click, SubMenu triggerType: hover">
+				<DropdownMenu submenuTriggerType="click">
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open with override</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.SubMenu>
+							<DropdownMenu.SubTrigger>Click item</DropdownMenu.SubTrigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item onClick={() => { }}>Click subitem</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.SubMenu>
+						<DropdownMenu.SubMenu triggerType="hover">
+							<DropdownMenu.SubTrigger>Hover item</DropdownMenu.SubTrigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item onClick={() => { }}>Hover subitem</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.SubMenu>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        await userEvent.click(canvas.getByRole("button", { name: "Open" }));
+        const rootItem = await canvas.findByText("Item 1");
+        const subTrigger = canvas.getByText("Item 2");
+        // Hover doesn't open the submenu
+        await expectNotOpenedOnHover(subTrigger, "SubItem 1");
+        await userEvent.click(subTrigger);
+        const subItem = await canvas.findByText("SubItem 1");
+        // Moving the mouse away doesn't close the submenu
+        await userEvent.unhover(subTrigger);
+        await userEvent.hover(rootItem);
+        await sleep(100);
+        expect(subItem).toBeInTheDocument();
+        // Opening another submenu closes the previous one
+        await userEvent.click(canvas.getByText("Item 3"));
+        const nestedSubTrigger = await canvas.findByText("SubItem 2-2");
+        await waitFor(() => {
+            expect(subItem).not.toBeInTheDocument();
+        });
+        // Nested submenus inherit the trigger type
+        await expectNotOpenedOnHover(nestedSubTrigger, "SubItem 2-2-1");
+        await userEvent.click(nestedSubTrigger);
+        const nestedItem = await canvas.findByText("SubItem 2-2-1");
+        await userEvent.click(nestedItem);
+        await waitFor(() => {
+            expect(rootItem).not.toBeInTheDocument();
+            expect(nestedItem).not.toBeInTheDocument();
+        });
+        // SubMenu triggerType overrides the menu submenuTriggerType
+        await userEvent.click(canvas.getByRole("button", { name: "Open with override" }));
+        const clickTrigger = await canvas.findByText("Click item");
+        await expectNotOpenedOnHover(clickTrigger, "Click subitem");
+        await userEvent.hover(canvas.getByText("Hover item"));
+        expect(await canvas.findByText("Hover subitem")).toBeInTheDocument();
+    },
+};
 export const defaultActive = {
     name: "defaultActive, uncontrolled",
     args: {

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);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)}
+.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)}

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

@@ -102,7 +102,7 @@ type BaseProps = {
     disabled?: boolean;
     /** Disable the flyout content hide animation */
     disableHideAnimation?: boolean;
-    /** Ignore the content hover events and hide it if the triggerType is hover */
+    /** Ignore the content hover events and hide it as soon as the pointer leaves the trigger if the triggerType is hover */
     disableContentHover?: boolean;
     /** Disable the flyout content close on outside click */
     disableCloseOnOutsideClick?: boolean;
@@ -202,6 +202,7 @@ export type ContextProps = {
     handleTouchStart: () => void;
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
+    handleContentKeyDown: () => void;
     isSubmenu: boolean;
 } & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "scrollableClassName" | "scrollableAttributes" | "contentGap" | "contentMaxHeight" | "contentMaxWidth" | "contentZIndex" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {

package/dist/components/Flyout/FlyoutContent.js

@@ -11,7 +11,7 @@ import cooldown from "./utilities/cooldown.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes, colorMode } = props;
-    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 { active, flyout, id, triggerElRef, flyoutElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, handleContentKeyDown, 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);
@@ -51,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: _jsx(Freeze, { frozen: !active, children: children }) }) }) }) }));
+            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, onKeyDown: handleContentKeyDown, 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

@@ -46,6 +46,8 @@ const FlyoutControlled = (props) => {
     const lockedTimerRef = React.useRef(null);
     const trapFocusRef = React.useRef(null);
     const lockedRef = React.useRef(false);
+    // Open was requested but the content might not be rendered yet, so it still has to be closable
+    const openRequestedRef = React.useRef(false);
     // Lock blur event while pressing anywhere inside the flyout content
     const lockedBlurEffects = React.useRef(false);
     // Focus shouldn't return back to the trigger when user intentionally clicks outside the flyout
@@ -57,6 +59,8 @@ const FlyoutControlled = (props) => {
     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);
+    // Interaction started inside the content React tree, including nested flyouts portaled outside of the content element
+    const interactionInsideContentRef = React.useRef(false);
     // Cleanup function for safe area tracking
     const safeAreaRef = React.useRef(null);
     const originCoordinatesRef = React.useRef(originCoordinates ?? null);
@@ -78,6 +82,8 @@ const FlyoutControlled = (props) => {
     });
     const { status, updatePosition, render, hide, remove, show } = flyout;
     const isRendered = status !== "idle";
+    // Hover content that can be reached by the pointer, which keeps it open while moving towards it
+    const hasSafeArea = triggerType === "hover" && !disableContentHover;
     const isDismissible = useIsDismissible({
         active: isRendered,
         contentRef: flyoutElRef,
@@ -91,7 +97,7 @@ const FlyoutControlled = (props) => {
      * Disable all triggers while mouse is moving over the safe area
      */
     const disableTriggers = React.useCallback(() => {
-        if (triggerType !== "hover")
+        if (!hasSafeArea)
             return;
         triggersDisabledRef.current = true;
         document.querySelectorAll("[data-rs-flyout-active=true]").forEach((el) => {
@@ -99,7 +105,7 @@ const FlyoutControlled = (props) => {
                 return;
             el.style.pointerEvents = "none";
         });
-    }, [triggerElRef, triggerType]);
+    }, [triggerElRef, hasSafeArea]);
     const enableTriggers = React.useCallback(() => {
         if (triggerType !== "hover")
             return;
@@ -117,14 +123,16 @@ const FlyoutControlled = (props) => {
             return;
         if (isRendered && triggerType !== "hover")
             return;
+        openRequestedRef.current = true;
         onOpenRef.current?.();
         disableTriggers();
     }, [onOpenRef, isRendered, triggerType, disableTriggers]);
     const handleClose = React.useCallback((options) => {
         const isLocked = triggerType === "click" && !options.closeParents && !isDismissible();
-        const canClose = !isLocked && (isRendered || disabled);
+        const canClose = !isLocked && (isRendered || openRequestedRef.current || disabled);
         if (!canClose)
             return;
+        openRequestedRef.current = false;
         onCloseRef.current?.({ reason: options.reason });
         enableTriggers();
         if (options?.closeParents) {
@@ -203,7 +211,7 @@ const FlyoutControlled = (props) => {
         cooldown.cool();
         clearTimer();
         safeAreaRef.current?.cleanup();
-        if (triggerType === "hover" && isRendered) {
+        if (hasSafeArea && isRendered) {
             // Safe area coordinates are defined based on the trigger mouse out, even when returning mouse from content to trigger
             const origin = e.currentTarget === flyoutElRef.current && safeAreaRef.current?.origin
                 ? safeAreaRef.current.origin
@@ -220,7 +228,7 @@ const FlyoutControlled = (props) => {
         else {
             handleClose({});
         }
-    }, [clearTimer, handleClose, triggerElRef, flyoutElRef, triggerType, isRendered, flyout.position]);
+    }, [clearTimer, handleClose, triggerElRef, flyoutElRef, hasSafeArea, isRendered, flyout.position]);
     const handleTriggerClick = React.useCallback(() => {
         if (!isRendered) {
             handleOpen();
@@ -232,25 +240,32 @@ const FlyoutControlled = (props) => {
     const handleContentMouseDown = () => {
         lockedBlurEffects.current = true;
         hoverTriggeredWithTouchEventRef.current = true;
+        interactionInsideContentRef.current = true;
     };
     const handleContentMouseUp = () => {
         lockedBlurEffects.current = false;
     };
+    const handleContentKeyDown = () => {
+        interactionInsideContentRef.current = true;
+    };
+    const finishHide = React.useCallback(() => {
+        remove();
+        onAfterCloseRef.current?.();
+    }, [remove, onAfterCloseRef]);
     const handleTransitionEnd = React.useCallback((e) => {
         if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
             return;
         if (status === "visible") {
             onAfterOpenRef.current?.();
         }
-        if (status === "hidden") {
-            remove();
-            onAfterCloseRef.current?.();
-        }
-    }, [remove, status, onAfterOpenRef, onAfterCloseRef]);
+        if (status === "hidden")
+            finishHide();
+    }, [finishHide, status, onAfterOpenRef]);
     /**
      * Control the display based on the props
      */
     useIsomorphicLayoutEffect(() => {
+        openRequestedRef.current = !!active;
         if (active) {
             render();
             return;
@@ -267,20 +282,9 @@ const FlyoutControlled = (props) => {
         }
         else {
             // In case transitions are disabled globally - remove from the DOM immediately
-            remove();
-            onAfterCloseRef.current?.();
+            finishHide();
         }
-    }, [
-        active,
-        prevActive,
-        render,
-        hide,
-        remove,
-        disableHideAnimation,
-        disabled,
-        groupTimeouts,
-        onAfterCloseRef,
-    ]);
+    }, [active, prevActive, render, hide, finishHide, disableHideAnimation, disabled, groupTimeouts]);
     useIsomorphicLayoutEffect(() => {
         if (status === "rendered")
             show();
@@ -292,18 +296,20 @@ const FlyoutControlled = (props) => {
         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)
+        // Closing before the open transition starts cancels it instead of reversing,
+        // so there is no transitionend to wait for
+        if (!flyoutElRef.current?.firstElementChild?.getAnimations?.().length) {
+            finishHide();
             return;
-        remove();
-        onAfterCloseRef.current?.();
-    }, [status, remove, onAfterCloseRef]);
+        }
+        // Grouped flyouts switch without animations, so the hide animation is cut short
+        // once another flyout from the group gets hovered
+        if (groupTimeouts)
+            return cooldown.onRewarm(finishHide);
+    }, [status, groupTimeouts, finishHide]);
     /**
      * Handle focus trap
      *
@@ -351,6 +357,27 @@ const FlyoutControlled = (props) => {
             shouldReturnFocusRef.current = true;
         }
     }, [status, isRendered, triggerType]);
+    /**
+     * Nested flyouts are portaled outside of the parent content element but are still rendered inside its React tree.
+     * React events bubble through portals, so content handlers mark the interactions coming from the nested flyouts too
+     * and the flag gets reset in the capture phase before every new interaction
+     */
+    React.useEffect(() => {
+        if (!isRendered || disableCloseOnOutsideClick)
+            return;
+        const events = ["mousedown", "touchstart", "keydown"];
+        const resetInteraction = () => {
+            interactionInsideContentRef.current = false;
+        };
+        events.forEach((event) => {
+            document.addEventListener(event, resetInteraction, { capture: true, passive: true });
+        });
+        return () => {
+            events.forEach((event) => {
+                document.removeEventListener(event, resetInteraction, { capture: true });
+            });
+        };
+    }, [isRendered, disableCloseOnOutsideClick]);
     /**
      * Clean up safe polygon tracking on unmount or when flyout closes
      */
@@ -405,11 +432,16 @@ const FlyoutControlled = (props) => {
         },
     }, [handleClose, isDismissible]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
+        // Clicks inside nested flyouts are not considered outside clicks
+        if (interactionInsideContentRef.current)
+            return;
         // Clicking outside changes focused element so we don't need to set it back ourselves
         shouldReturnFocusRef.current = false;
         handleClose({ reason: "outside-click" });
     }, {
         disabled: !isRendered || disableCloseOnOutsideClick,
+        // Content of components like DropdownMenu can stop the click propagation
+        capture: true,
     });
     return (_jsx(Provider, { value: {
             id,
@@ -430,6 +462,7 @@ const FlyoutControlled = (props) => {
             handleClick: handleTriggerClick,
             handleContentMouseDown,
             handleContentMouseUp,
+            handleContentKeyDown,
             triggerType,
             trapFocusMode,
             contentZIndex,

package/dist/components/Flyout/utilities/cooldown.d.ts

@@ -1,6 +1,11 @@
 declare class Cooldown {
     status: "warming" | "warm" | "cooling" | "cold";
     timer?: ReturnType<typeof setTimeout>;
+    private rewarmListeners;
+    /**
+     * Called when another flyout gets hovered while the group is still cooling down
+     */
+    onRewarm: (listener: () => void) => () => void;
     warm: () => void;
     cool: () => void;
 }

package/dist/components/Flyout/utilities/cooldown.js

@@ -1,10 +1,21 @@
 class Cooldown {
     status = "cold";
     timer;
+    rewarmListeners = new Set();
+    /**
+     * Called when another flyout gets hovered while the group is still cooling down
+     */
+    onRewarm = (listener) => {
+        this.rewarmListeners.add(listener);
+        return () => {
+            this.rewarmListeners.delete(listener);
+        };
+    };
     warm = () => {
         clearTimeout(this.timer);
         if (this.status === "cooling") {
             this.status = "warm";
+            this.rewarmListeners.forEach((listener) => listener());
             return;
         }
         this.status = "warming";

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

@@ -120,12 +120,15 @@ export const outline = {
         expect(imgRect.height).toBe(36);
     },
 };
+const localImage = "data:image/svg+xml," +
+    encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"/>');
 export const onLoad = {
     name: "onLoad",
     args: {
         handleLoad: fn(),
     },
-    render: (args) => <Image src={imgUrl} alt="photo" onLoad={args.handleLoad}/>,
+    // Local image keeps the test independent from the network
+    render: (args) => <Image src={localImage} alt="photo" onLoad={args.handleLoad}/>,
     play: async ({ canvas, args }) => {
         const { handleLoad } = args;
         const img = canvas.getByRole("img");