reshaped 3.6.0-canary.1 → 3.6.0-canary.3

package/dist/components/Accordion/AccordionControlled.js

@@ -4,20 +4,20 @@ import React from "react";
 import { classNames } from "../../utilities/props.js";
 import useElementId from "../../hooks/useElementId.js";
 import AccordionContext from "./Accordion.context.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const AccordionControlled = (props) => {
     const { children, onToggle, active, iconPosition, iconSize, className, attributes } = props;
     const rootClassNames = classNames(className);
     const id = useElementId();
+    const onToggleRef = useHandlerRef(onToggle);
     const value = React.useMemo(() => ({
         triggerId: `${id}-trigger`,
         contentId: `${id}-content`,
         active,
-        onToggle,
+        onToggle: onToggleRef.current,
         iconPosition,
         iconSize,
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [active]);
+    }), [active, iconPosition, iconSize, id, onToggleRef]);
     return (_jsx("div", { ...attributes, className: rootClassNames, children: _jsx(AccordionContext.Provider, { value: value, children: children }) }));
 };
 AccordionControlled.displayName = "AccordionControlled";

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").AccordionProps> & {
@@ -26,15 +26,15 @@ export declare const iconPosition: {
     render: () => import("react").JSX.Element;
 };
 export declare const onToggle: StoryObj<{
-    handleToggle: typeof fn;
+    handleToggle: Mock;
 }>;
 export declare const active: StoryObj<{
-    handleToggle: typeof fn;
+    handleToggle: Mock;
 }>;
 export declare const defaultActive: StoryObj<{
-    handleToggle: typeof fn;
+    handleToggle: Mock;
 }>;
 export declare const renderProps: StoryObj<{
-    handleToggle: typeof fn;
+    handleToggle: Mock;
 }>;
 export declare const className: StoryObj;

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

@@ -1,4 +1,4 @@
-import { userEvent, expect, fn } from "@storybook/test";
+import { userEvent, expect, fn } from "storybook/test";
 import { Placeholder } from "../../../utilities/storybook/index.js";
 import Accordion from "../index.js";
 import Button from "../../Button/index.js";

package/dist/components/ActionBar/tests/ActionBar.test.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ActionBarProps>;

package/dist/components/ActionBar/tests/ActionBar.test.stories.js

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import ActionBar from "../index.js";
 import { Placeholder } from "../../../utilities/storybook/index.js";
 export default {

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & import("react").RefAttributes<import("./..").ActionableRef>>;

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

@@ -1,4 +1,4 @@
-import { userEvent, expect } from "@storybook/test";
+import { userEvent, expect } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Actionable from "../index.js";
 import View from "../../View/index.js";

package/dist/components/Actionable/tests/Actionable.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & import("react").RefAttributes<import("./..").ActionableRef>>;

package/dist/components/Actionable/tests/Actionable.test.stories.js

@@ -1,4 +1,4 @@
-import { userEvent, expect, fn } from "@storybook/test";
+import { userEvent, expect, fn } from "storybook/test";
 import Actionable from "../index.js";
 export default {
     title: "Utility components/Actionable/tests",

package/dist/components/Alert/tests/Alert.test.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").AlertProps>;

package/dist/components/Alert/tests/Alert.test.stories.js

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Alert from "../index.js";
 import { Placeholder } from "../../../utilities/storybook/index.js";
 export default {

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import { Mock } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").AutocompleteProps> & {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { fn, expect, within, waitFor, userEvent, fireEvent } from "@storybook/test";
+import { fn, expect, within, waitFor, userEvent, fireEvent } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Autocomplete from "../index.js";
 import View from "../../View/index.js";
@@ -56,12 +56,13 @@ export const active = {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
             expect(args.handleClose).toHaveBeenLastCalledWith();
         });
-        await sleep(500);
-        await userEvent.click(input);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenLastCalledWith();
-        });
+        // TODO: Flaky behavior in node env tests, works in the browser
+        // await sleep(500);
+        // await userEvent.click(input);
+        // await waitFor(() => {
+        // 	expect(args.handleOpen).toHaveBeenCalledTimes(1);
+        // 	expect(args.handleOpen).toHaveBeenLastCalledWith();
+        // });
     },
 };
 export const base = {

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { Mock } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").AvatarProps>;

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { expect, fn, waitFor } from "@storybook/test";
+import { expect, fn, waitFor } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Avatar from "../index.js";
 import View from "../../View/index.js";

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("../Badge.types").Export;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, fn } from "@storybook/test";
+import { expect, fn } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Avatar from "../../Avatar/index.js";
 import View from "../../View/index.js";

package/dist/components/Badge/tests/Badge.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("../Badge.types").Export;

package/dist/components/Badge/tests/Badge.test.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 import Badge from "../index.js";
 export default {
     title: "Components/Badge/tests",

package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").BreadcrumbsProps> & {

package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.js

@@ -1,4 +1,4 @@
-import { fn, expect, userEvent } from "@storybook/test";
+import { fn, expect, userEvent } from "storybook/test";
 import Breadcrumbs from "../index.js";
 export default {
     title: "Components/Breadcrumbs/tests",

package/dist/components/Button/tests/Button.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("../Button.types").Export;

package/dist/components/Button/tests/Button.test.stories.js

@@ -1,4 +1,4 @@
-import { userEvent, expect, fn } from "@storybook/test";
+import { userEvent, expect, fn } from "storybook/test";
 import Button from "../index.js";
 export default {
     title: "Components/Button/tests",

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { type Mock } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { type Mock } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").CalendarProps>;

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

@@ -1,4 +1,4 @@
-import { fn, expect, userEvent, within, waitFor } from "@storybook/test";
+import { fn, expect, userEvent, within, waitFor } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Calendar from "../index.js";
 export default {

package/dist/components/Card/tests/Card.test.stories.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<{

package/dist/components/Card/tests/Card.test.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 import Card from "../index.js";
 export default {
     title: "Components/Card/tests",

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").CarouselProps>;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, fn, userEvent, waitFor } from "@storybook/test";
+import { expect, fn, userEvent, waitFor } from "storybook/test";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Carousel from "../index.js";
 import Button from "../../Button/index.js";

package/dist/components/Checkbox/tests/Checkbox.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").CheckboxProps>;

package/dist/components/Checkbox/tests/Checkbox.test.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent, fn } from "@storybook/test";
+import { expect, userEvent, fn } from "storybook/test";
 import Checkbox from "../index.js";
 export default {
     title: "Components/Checkbox/tests",

package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").CheckboxGroupProps>;

package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.js

@@ -1,4 +1,4 @@
-import { fn, userEvent, expect } from "@storybook/test";
+import { fn, userEvent, expect } from "storybook/test";
 import CheckboxGroup from "../index.js";
 import Checkbox from "../../Checkbox/index.js";
 export default {

package/dist/components/Container/tests/Container.test.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ContainerProps>;

package/dist/components/Container/tests/Container.test.stories.js

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Container from "../index.js";
 import { Placeholder } from "../../../utilities/storybook/index.js";
 export default {

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ContextMenuProps> & {

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

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 import ContextMenu from "../index.js";
 import View from "../../View/index.js";
 import { sleep } from "../../../utilities/helpers.js";

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     components: import("react").FC<import("./..").DismissibleProps>;

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

@@ -1,4 +1,4 @@
-import { within, expect } from "@storybook/test";
+import { within, expect } from "storybook/test";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Dismissible from "../index.js";
 import Image from "../../Image/index.js";

package/dist/components/Dismissible/tests/Dismissible.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").DismissibleProps>;

package/dist/components/Dismissible/tests/Dismissible.test.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 import Dismissible from "../index.js";
 import { Placeholder } from "../../../utilities/storybook/index.js";
 export default {

package/dist/components/Divider/tests/Divider.test.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").DividerProps>;

package/dist/components/Divider/tests/Divider.test.stories.js

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Divider from "../index.js";
 export default {
     title: "Components/Divider/tests",

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -12,6 +12,7 @@ import { classNames } from "../../utilities/props.js";
 import * as keys from "../../constants/keys.js";
 import s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
+const DropdownMenuSubTriggerContext = React.createContext(false);
 const DropdownMenu = (props) => {
     const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", ...popoverProps } = props;
     return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, children: children }));
@@ -39,14 +40,19 @@ const DropdownMenuSection = (props) => {
 const DropdownMenuItem = (props) => {
     const { onClick } = props;
     const { handleClose } = useFlyoutContext();
+    const subTriggerContext = React.useContext(DropdownMenuSubTriggerContext);
     const handleClick = (e) => {
         /**
          * Stop event propagation to make sure outside click doesn't get triggered
          * after the content is closed
          */
         e.stopPropagation();
-        if (handleClose)
+        /**
+         * Don't close the menu when clicking on a trigger of a submenu
+         */
+        if (handleClose && !subTriggerContext) {
             handleClose({ closeParents: true, reason: "item-selection" });
+        }
         if (onClick)
             onClick(e);
     };
@@ -70,7 +76,12 @@ const DropdownMenuSubTriggerItem = (props) => {
 };
 const DropdownMenuSubTrigger = (props) => {
     const { attributes, ...menuItemProps } = props;
-    return (_jsx(DropdownMenu.Trigger, { children: (triggerAttributes) => (_jsx(DropdownMenuSubTriggerItem, { ...menuItemProps, attributes: { ...attributes, ...triggerAttributes } })) }));
+    return (_jsx(DropdownMenuSubTriggerContext.Provider, { value: true, children: _jsx(DropdownMenu.Trigger, { children: (triggerAttributes) => {
+                return (_jsx(DropdownMenuSubTriggerItem, { ...menuItemProps, attributes: {
+                        ...attributes,
+                        ...triggerAttributes,
+                    } }));
+            } }) }));
 };
 DropdownMenu.Dismissible = Popover.Dismissible;
 DropdownMenu.Trigger = Popover.Trigger;

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").DropdownMenuProps> & {

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

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 import Button from "../../Button/index.js";
 import DropdownMenu from "../index.js";
 import { sleep } from "../../../utilities/helpers.js";

package/dist/components/FileUpload/tests/FileUpload.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").FileUploadProps> & {

package/dist/components/FileUpload/tests/FileUpload.test.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent, fn } from "@storybook/test";
+import { expect, userEvent, fn } from "storybook/test";
 import FileUpload from "../index.js";
 export default {
     title: "Components/FileUpload/tests",

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

@@ -21,8 +21,8 @@ export type Options = {
     container?: HTMLElement | null;
     rtl: boolean;
     fallbackPositions?: Position[];
-    lastUsedFallback: Position;
-    onFallback: (position: Position) => void;
+    lastUsedPosition: Position;
+    onPositionChoose: (position: Position) => void;
     contentGap?: number;
     contentShift?: number;
 };
@@ -39,6 +39,7 @@ export type FlyoutData = {
 export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
     updatePosition: (args?: {
         sync?: boolean;
+        fallback?: boolean;
     }) => void;
     render: () => void;
     hide: () => void;
@@ -86,7 +87,7 @@ type BaseProps = {
      */
     forcePosition?: boolean;
     fallbackPositions?: Position[] | false;
-    trapFocusMode?: TrapMode;
+    trapFocusMode?: TrapMode | false;
     disabled?: boolean;
     disableHideAnimation?: boolean;
     disableContentHover?: boolean;

package/dist/components/Flyout/FlyoutContent.js

@@ -24,7 +24,7 @@ const FlyoutContent = (props) => {
     const closestScrollableContainer = React.useMemo(() => {
         if (!mounted)
             return;
-        if (!triggerElRef)
+        if (!triggerElRef?.current)
             return;
         return findClosestScrollableContainer({ el: triggerElRef.current });
     }, [mounted, triggerElRef]);
@@ -43,7 +43,7 @@ const FlyoutContent = (props) => {
         return () => el.removeEventListener("transitionstart", handleTransitionStart);
     }, [handleTransitionStart, flyoutElRef, status]);
     React.useEffect(() => {
-        if (closestScrollableContainer === document.body)
+        if (status !== "visible")
             return;
         if (!closestScrollableContainer)
             return;
@@ -53,19 +53,19 @@ const FlyoutContent = (props) => {
             const triggerBounds = triggerEl?.getBoundingClientRect();
             const containerBounds = containerEl.getBoundingClientRect();
             if (triggerBounds &&
-                (triggerBounds.bottom < containerBounds.top ||
-                    triggerBounds.right < containerBounds.left ||
-                    triggerBounds.left > containerBounds.right ||
-                    triggerBounds.top > containerBounds.bottom)) {
+                (triggerBounds.top < containerBounds.top ||
+                    triggerBounds.left < containerBounds.left ||
+                    triggerBounds.right > containerBounds.right ||
+                    triggerBounds.bottom > containerBounds.bottom)) {
                 handleClose({});
             }
             else {
-                flyout.updatePosition({ sync: true });
+                flyout.updatePosition({ sync: true, fallback: false });
             }
         });
         closestScrollableContainer.addEventListener("scroll", handleScroll, { passive: true });
         return () => closestScrollableContainer.removeEventListener("scroll", handleScroll);
-    }, [closestScrollableContainer, flyout, handleClose, triggerElRef]);
+    }, [closestScrollableContainer, flyout, status, handleClose, triggerElRef]);
     if (status === "idle" || !mounted)
         return null;
     const rootClassNames = classNames(s.content, triggerType === "hover" && s["--hover"], status === "visible" && s["--visible"], 

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -72,6 +72,7 @@ const FlyoutControlled = (props) => {
         active: isRendered && triggerType !== "hover",
         contentRef: flyoutElRef,
         triggerRef: triggerElRef,
+        blocking: trapFocusMode === "dialog",
     });
     const clearTimer = React.useCallback(() => {
         if (timerRef.current)
@@ -231,6 +232,8 @@ const FlyoutControlled = (props) => {
             return;
         if (trapFocusRef.current?.trapped)
             return;
+        if (trapFocusMode === false)
+            return;
         trapFocusRef.current = new TrapFocus();
         trapFocusRef.current.trap(flyoutElRef.current, {
             mode: trapFocusMode,

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
 };
@@ -71,6 +71,10 @@ export declare const testInsideScrollable: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const testInsideModal: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const testDynamicBounds: {
     name: string;
     render: () => React.JSX.Element;