reshaped 3.4.1 → 3.4.3

package/dist/components/TextField/TextField.js

@@ -53,4 +53,5 @@ const TextField = (props) => {
     return (_jsxs("div", { ...attributes, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix, id: id }), _jsx("input", { ...inputAttributes, className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix, id: id })] }));
 };
 TextField.Aligner = Aligner;
+TextField.displayName = "TextField";
 export default TextField;

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

@@ -2,7 +2,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TextFieldProps): import("react").JSX.Element;
-        Aligner: (props: import("../../_private/Aligner").AlignerProps) => import("react").JSX.Element;
+        Aligner: {
+            (props: import("../../_private/Aligner").AlignerProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -4,7 +4,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TextFieldProps): import("react").JSX.Element;
-        Aligner: (props: import("../../_private/Aligner").AlignerProps) => import("react").JSX.Element;
+        Aligner: {
+            (props: import("../../_private/Aligner").AlignerProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

package/dist/components/Theme/GlobalColorMode.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Theme.types";
-declare const GlobalColorMode: (props: T.GlobalColorModeProps) => import("react/jsx-runtime").JSX.Element;
+declare const GlobalColorMode: {
+    (props: T.GlobalColorModeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default GlobalColorMode;

package/dist/components/Theme/GlobalColorMode.js

@@ -46,4 +46,5 @@ const GlobalColorMode = (props) => {
     }), [mode, changeColorMode]);
     return (_jsx(GlobalColorModeContext.Provider, { value: value, children: children }));
 };
+GlobalColorMode.displayName = "GlobalColorMode";
 export default GlobalColorMode;

package/dist/components/Theme/Theme.d.ts

@@ -1,4 +1,7 @@
 import * as T from "./Theme.types";
-declare const Theme: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Theme: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const PrivateTheme: (props: T.PrivateProps) => import("react/jsx-runtime").JSX.Element;
 export default Theme;

package/dist/components/Theme/Theme.js

@@ -58,4 +58,5 @@ export const PrivateTheme = (props) => {
     }), [usedTheme, usedColorMode, setTheme, setRootTheme, rootTheme]);
     return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { className: rootClassNames, ref: scopeRef, "data-rs-root": scoped ? true : undefined, "data-rs-theme": isRootProvider ? undefined : usedTheme, "data-rs-color-mode": isRootProvider || (!colorMode && !mounted) ? undefined : usedColorMode, children: children }) }));
 };
+Theme.displayName = "Theme";
 export default Theme;

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

@@ -1,7 +1,10 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: (props: import("./..").ThemeProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").ThemeProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

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

@@ -6,7 +6,7 @@ import MenuItem from "../../MenuItem/index.js";
 import Theme, { useTheme } from "../index.js";
 import { Example } from "../../../utilities/storybook/index.js";
 export default {
-    title: "Utilities/Theme/tests",
+    title: "Utility components/Theme/tests",
     component: Theme,
     parameters: {
         iframe: {

package/dist/components/Timeline/Timeline.d.ts

@@ -1,6 +1,10 @@
 import type * as T from "./Timeline.types";
 declare const Timeline: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Item: (props: T.ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: {
+        (props: T.ItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default Timeline;

package/dist/components/Timeline/Timeline.js

@@ -13,8 +13,10 @@ const Timeline = (props) => {
     const { children, className, attributes } = props;
     const rootClassNames = classNames(className);
     return (_jsx("ul", { ...attributes, className: rootClassNames, children: React.Children.map(children, (child, index) => {
-            return child?.type === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
+            return React.isValidElement(child) && child.type === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
         }) }));
 };
 Timeline.Item = TimelineItem;
+Timeline.displayName = "Timeline";
+TimelineItem.displayName = "Timeline.Item";
 export default Timeline;

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

@@ -2,7 +2,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TimelineProps): import("react").JSX.Element;
-        Item: (props: import("./..").TimelineItemProps) => import("react").JSX.Element;
+        Item: {
+            (props: import("./..").TimelineItemProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -3,7 +3,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TimelineProps): import("react").JSX.Element;
-        Item: (props: import("./..").TimelineItemProps) => import("react").JSX.Element;
+        Item: {
+            (props: import("./..").TimelineItemProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

package/dist/components/Toast/Toast.d.ts

@@ -1,5 +1,8 @@
 import type * as T from "./Toast.types";
-declare const Toast: (props: T.Props & {
-    collapsed: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+declare const Toast: {
+    (props: T.Props & {
+        collapsed: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Toast;

package/dist/components/Toast/Toast.js

@@ -42,4 +42,5 @@ const Toast = (props) => {
     }
     return toastNode;
 };
+Toast.displayName = "Toast";
 export default Toast;

package/dist/components/Toast/ToastContainer.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Toast.types";
-declare const ToastContainer: (props: T.ContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ToastContainer: {
+    (props: T.ContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default ToastContainer;

package/dist/components/Toast/ToastContainer.js

@@ -92,4 +92,5 @@ const ToastContainer = (props) => {
             transitionDuration: resizingRef.current ? "0s" : undefined,
         }, onTransitionEnd: handleTransitionEnd, onFocus: stopTimer, onBlur: startTimer, children: _jsx("span", { className: s.wrapper, children: _jsx(Toast, { ...toastProps, collapsed: index > 0 && !inspected, attributes: { ...toastProps.attributes, ref: wrapperRef } }) }) }));
 };
+ToastContainer.displayName = "ToastContainer";
 export default ToastContainer;

package/dist/components/Toast/ToastProvider.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Toast.types";
-declare const ToastProvider: (props: T.ProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ToastProvider: {
+    (props: T.ProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default ToastProvider;

package/dist/components/Toast/ToastProvider.js

@@ -10,13 +10,14 @@ const generateId = () => `__rs-toast-${counter++}`;
 const toastReducer = (state, action) => {
     let nextState;
     switch (action.type) {
-        case "add":
+        case "add": {
             const { position = "bottom-end", ...toastProps } = action.payload.toastProps || {};
             return {
                 ...state,
                 [position]: [...state[position], { id: action.payload.id, toastProps, status: "entering" }],
             };
-        case "show":
+        }
+        case "show": {
             const { id: showId } = action.payload;
             nextState = { ...state };
             positions.forEach((position) => {
@@ -27,20 +28,23 @@ const toastReducer = (state, action) => {
                 });
             });
             return nextState;
-        case "hide":
+        }
+        case "hide": {
             const { id: hideId } = action.payload;
             nextState = { ...state };
             positions.forEach((position) => {
                 nextState[position] = nextState[position].map((item) => item.id === hideId ? { ...item, status: "exiting" } : item);
             });
             return nextState;
-        case "remove":
+        }
+        case "remove": {
             const { id: removeId } = action.payload;
             nextState = { ...state };
             positions.forEach((position) => {
                 nextState[position] = nextState[position].filter((item) => item.id !== removeId);
             });
             return nextState;
+        }
     }
 };
 const ToastProvider = (props) => {
@@ -74,4 +78,5 @@ const ToastProvider = (props) => {
     }), [data, show, hide, add, remove, id, options]);
     return (_jsxs(ToastContext.Provider, { value: value, children: [children, positions.map((position) => (_jsx(ToastRegion, { position: position, nested: !!toast.id }, position)))] }));
 };
+ToastProvider.displayName = "ToastProiver";
 export default ToastProvider;

package/dist/components/Toast/ToastRegion.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Toast.types";
-declare const ToastRegion: (props: T.RegionProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const ToastRegion: {
+    (props: T.RegionProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
 export default ToastRegion;

package/dist/components/Toast/ToastRegion.js

@@ -61,4 +61,5 @@ const ToastRegion = (props) => {
             return (_jsx(ToastContainer, { ...data, index: visibleIndex, inspected: inspecting || !!expanded }, data.id));
         }) }));
 };
+ToastRegion.displayName = "ToastRegion";
 export default ToastRegion;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Tooltip.types";
-declare const Tooltip: (props: T.Props) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+declare const Tooltip: {
+    (props: T.Props): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+    displayName: string;
+};
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -10,4 +10,5 @@ const Tooltip = (props) => {
         return children({});
     return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover", groupTimeouts: true, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
+Tooltip.displayName = "Tooltip";
 export default Tooltip;

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

@@ -1,6 +1,9 @@
 declare const _default: {
     title: string;
-    component: (props: import("./..").TooltipProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+    component: {
+        (props: import("./..").TooltipProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

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

@@ -2,7 +2,10 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: (props: import("./..").TooltipProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+    component: {
+        (props: import("./..").TooltipProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

package/dist/components/View/View.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 import type * as T from "./View.types";
 declare const View: {
     <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): React.ReactNode;
-    Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => React.ReactNode;
+    Item: {
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): React.ReactNode;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default View;

package/dist/components/View/View.js

@@ -21,7 +21,10 @@ import getTextAlignStyles from "../../styles/textAlign/index.js";
 import getAlignStyles from "../../styles/align/index.js";
 import getJustifyStyles from "../../styles/justify/index.js";
 const ViewItem = (props) => {
-    const { columns, grow, gapBefore, as: TagName = "div", order, children, className, attributes, } = props;
+    const { columns, grow, gapBefore, 
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    as: TagName = "div", order, children, className, attributes, } = props;
     const itemClassNames = classNames(s.item, className, gapBefore === "auto" && s["item--gap-auto"], gapBefore !== undefined && s["item--gap-before"], columns && s["item--columns"], ...responsiveClassNames(s, "item--grow", grow), ...responsiveClassNames(s, "item--columns", columns));
     const itemVariables = {
         ...responsiveVariables("--rs-view-item-order", order),
@@ -43,10 +46,8 @@ const View = (props) => {
      * Item prop
      */
     grow, 
-    /**
-     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
-     * It still resolves the attributes correctly based on the tag
-     */
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     as: TagName = "div", children, divided, className, attributes, } = props;
     let isFlex = !!align || !!justify || !!gap || !!props.direction;
     const direction = props.direction || (isFlex ? "column" : undefined);
@@ -121,6 +122,8 @@ const View = (props) => {
             isFlex = true;
         return (_jsxs(React.Fragment, { children: [dividerElement, itemElement] }, `${key}-fragment`));
     };
+    // Using any in favor of resolving the props in runtime where we don't know their props definitions
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const formattedChildren = React.Children.map(children, (child, index) => {
         if (!child)
             return null;
@@ -132,6 +135,8 @@ const View = (props) => {
             return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: usedIndex })));
         }
         if (child.type === React.Fragment && React.Children.count(child.props.children) > 1) {
+            // Using any in favor of resolving the props in runtime where we don't know their props definitions
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return child.props.children.map((child) => {
                 if (!child)
                     return null;
@@ -180,4 +185,6 @@ const View = (props) => {
     return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: formattedChildren }));
 };
 View.Item = ViewItem;
+View.displayName = "View";
+ViewItem.displayName = "View.Item";
 export default View;

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

@@ -4,7 +4,11 @@ declare const _default: {
     title: string;
     component: {
         <As extends keyof React.JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.ReactNode;
-        Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>) => React.ReactNode;
+        Item: {
+            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): React.ReactNode;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -8,7 +8,7 @@ import Avatar from "../../Avatar/index.js";
 import MenuItem from "../../MenuItem/index.js";
 import Button from "../../Button/index.js";
 export default {
-    title: "Utilities/View",
+    title: "Utility components/View",
     component: View,
     parameters: {
         iframe: {

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

@@ -3,7 +3,11 @@ declare const _default: {
     title: string;
     component: {
         <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewProps<As>): React.ReactNode;
-        Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>) => React.ReactNode;
+        Item: {
+            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): React.ReactNode;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -1,7 +1,7 @@
 import { expect } from "@storybook/test";
 import View from "../index.js";
 export default {
-    title: "Utilities/View/tests",
+    title: "Utility components/View/tests",
     component: View,
     parameters: {
         iframe: {

package/dist/components/_private/Aligner/Aligner.d.ts

@@ -7,5 +7,8 @@
  * on the --rs-p, --rs-p-v and --rs-p-h css variables
  */
 import type * as T from "./Aligner.types";
-declare const Aligner: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Aligner: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Aligner;

package/dist/components/_private/Aligner/Aligner.js

@@ -7,4 +7,5 @@ const Aligner = (props) => {
     const rootClassNames = classNames(s.root, sides.map((side) => s[`--side-${side}`]), className);
     return (_jsx("div", { ...attributes, className: rootClassNames, children: children }));
 };
+Aligner.displayName = "Aligner";
 export default Aligner;

package/dist/components/_private/Expandable/Expandable.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Expandable.types";
-declare const Expandable: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const Expandable: {
+    (props: T.ContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Expandable;

package/dist/components/_private/Expandable/Expandable.js

@@ -48,4 +48,5 @@ const Expandable = (props) => {
             ? { height: animatedHeight, overflow: animatedHeight === "auto" ? "visible" : undefined }
             : undefined, onTransitionEnd: handleTransitionEnd, role: "region", hidden: !active && animatedHeight === null, children: children }));
 };
+Expandable.displayName = "Expandable";
 export default Expandable;

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

@@ -1,7 +1,14 @@
 import type * as T from "./Flyout.types";
 declare const Flyout: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Trigger: (props: T.TriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element | null;
+    Trigger: {
+        (props: T.TriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: T.ContentProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default Flyout;

package/dist/components/_private/Flyout/Flyout.js

@@ -11,4 +11,5 @@ const Flyout = (props) => {
 };
 Flyout.Trigger = FlyoutTrigger;
 Flyout.Content = FlyoutContent;
+Flyout.displayName = "Flyout";
 export default Flyout;

package/dist/components/_private/Flyout/FlyoutContent.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Flyout.types";
-declare const FlyoutContent: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const FlyoutContent: {
+    (props: T.ContentProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
 export default FlyoutContent;

package/dist/components/_private/Flyout/FlyoutContent.js

@@ -11,7 +11,7 @@ import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
     const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, disableContentHover, width, containerRef, isSubmenu, } = useFlyoutContext();
-    const { styles, status, position, updatePosition } = flyout;
+    const { styles, status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestContainer = React.useMemo(() => {
         if (!mounted)
@@ -82,10 +82,14 @@ const FlyoutContent = (props) => {
     else if (trapFocusMode === "action-menu") {
         role = "menu";
     }
+    else if (trapFocusMode === "action-bar") {
+        role = "menubar";
+    }
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: contentClassNames, style: {
                 ...styles,
                 "--rs-flyout-gap": contentGap,
             }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, "aria-modal": role === "dialog" ? true : undefined, style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));
     return _jsx(Portal, { targetRef: containerRef || scrollableRef, children: content });
 };
+FlyoutContent.displayName = "Flyout.Content";
 export default FlyoutContent;

package/dist/components/_private/Flyout/FlyoutControlled.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Flyout.types";
-declare const FlyoutRoot: (props: T.ControlledProps & T.DefaultProps) => import("react/jsx-runtime").JSX.Element;
-export default FlyoutRoot;
+declare const FlyoutControlled: {
+    (props: T.ControlledProps & T.DefaultProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default FlyoutControlled;

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -6,7 +6,7 @@ import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
 import useElementId from "../../../hooks/useElementId.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import useHotkeys from "../../../hooks/useHotkeys.js";
-import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
+import useOnClickOutside from "../../../hooks/useOnClickOutside.js";
 import useRTL from "../../../hooks/useRTL.js";
 import { checkTransitions, onNextFrame } from "../../../utilities/animation.js";
 import useFlyout from "./useFlyout.js";
@@ -14,7 +14,7 @@ import * as timeouts from "./Flyout.constants.js";
 import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../../hooks/useHandlerRef.js";
-const FlyoutRoot = (props) => {
+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 fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
@@ -236,7 +236,7 @@ const FlyoutRoot = (props) => {
             mode: trapFocusMode,
             initialFocusEl: initialFocusRef?.current,
             includeTrigger: triggerType === "hover" && trapFocusMode !== "dialog" && !isSubmenu,
-            onNavigateOutside: () => {
+            onRelease: () => {
                 handleClose({});
             },
         });
@@ -289,14 +289,12 @@ const FlyoutRoot = (props) => {
     }), [handleOpen, handleClose, updatePosition]);
     useHotkeys({ Escape: () => handleClose({ reason: "escape-key" }) }, [handleClose]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
-        if (!isRendered)
-            return;
-        if (disableCloseOnOutsideClick)
-            return;
         // Clicking outside changes focused element so we don't need to set it back ourselves
         shouldReturnFocusRef.current = false;
         handleClose({ reason: "outside-click" });
-    }, [isRendered]);
+    }, {
+        disabled: !isRendered || disableCloseOnOutsideClick,
+    });
     return (_jsx(Provider, { value: {
             id,
             flyout,
@@ -326,4 +324,5 @@ const FlyoutRoot = (props) => {
             isSubmenu,
         }, children: children }));
 };
-export default FlyoutRoot;
+FlyoutControlled.displayName = "FlyoutControlled";
+export default FlyoutControlled;

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

@@ -1,3 +1,6 @@
 import type * as T from "./Flyout.types";
-declare const FlyoutTrigger: (props: T.TriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const FlyoutTrigger: {
+    (props: T.TriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default FlyoutTrigger;

package/dist/components/_private/Flyout/FlyoutTrigger.js

@@ -4,7 +4,7 @@ import { useFlyoutContext, TriggerProvider } from "./Flyout.context.js";
 const FlyoutTrigger = (props) => {
     const { children } = props;
     const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleMouseDown, handleTouchStart, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
-    let childrenAttributes = {
+    const childrenAttributes = {
         ref: triggerElRef,
     };
     if (triggerType === "click" || trapFocusMode === "action-menu") {
@@ -38,4 +38,5 @@ const FlyoutTrigger = (props) => {
     }
     return (_jsx(TriggerProvider, { value: { elRef: triggerElRef }, children: children(childrenAttributes) }));
 };
+FlyoutTrigger.displayName = "Flyout.Trigger";
 export default FlyoutTrigger;

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

@@ -1,3 +1,6 @@
 import type * as T from "./Flyout.types";
-declare const FlyoutUncontrolled: (props: T.UncontrolledProps & T.DefaultProps) => import("react/jsx-runtime").JSX.Element;
+declare const FlyoutUncontrolled: {
+    (props: T.UncontrolledProps & T.DefaultProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default FlyoutUncontrolled;

package/dist/components/_private/Flyout/FlyoutUncontrolled.js

@@ -15,4 +15,5 @@ const FlyoutUncontrolled = (props) => {
     };
     return (_jsx(FlyoutControlled, { ...props, defaultActive: undefined, active: active, onClose: handleClose, onOpen: handleOpen }));
 };
+FlyoutUncontrolled.displayName = "FlyoutUncontrolled";
 export default FlyoutUncontrolled;

package/dist/components/_private/Flyout/useFlyout.js

@@ -42,6 +42,8 @@ const flyout = (args) => {
     targetClone.style.cssText = "";
     Object.keys(resetStyles).forEach((key) => {
         const value = resetStyles[key];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         if (value)
             targetClone.style[key] = value.toString();
     });