reshaped 3.9.0-canary.2 → 3.9.0-canary.24

package/dist/components/Checkbox/Checkbox.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import HiddenInput from "../_private/HiddenInput/index.js";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
 import { useFormControl } from "../FormControl/index.js";
+import HiddenInput from "../HiddenInput/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
@@ -21,20 +21,10 @@ const Checkbox = (props) => {
     const name = checkboxGroup ? checkboxGroup.name : props.name;
     const inputRef = React.useRef(null);
     const rootClassName = classNames(s.root, className, size && hasError && s["--error"], disabled && s["--disabled"], size && responsiveClassNames(s, "--size", size));
-    const handleChange = (event) => {
-        if (!name)
-            return;
-        const { checked } = event.target;
-        const changeArgs = { name, value, checked, event };
-        if (onChange)
-            onChange(changeArgs);
-        if (checkboxGroup?.onChange)
-            checkboxGroup.onChange(changeArgs);
-    };
     useIsomorphicLayoutEffect(() => {
         inputRef.current.indeterminate = indeterminate || false;
     }, [indeterminate, checked]);
-    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: {
+    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, attributes: {
                             ...inputAttributes,
                             ref: inputRef,
                         } }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon, size: responsivePropDependency(size, (size) => {

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

@@ -3,7 +3,7 @@ import type { MenuItemProps } from "../MenuItem";
 import type { PopoverProps, PopoverInstance } from "../Popover";
 import type React from "react";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "contentMaxHeight" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };

package/dist/components/FileUpload/FileUpload.js

@@ -10,9 +10,9 @@ export const FileUploadTrigger = (props) => {
     return _jsx("span", { className: s.trigger, children: children });
 };
 const FileUpload = (props) => {
-    const { name, children, height, variant = "outline", inline, className, attributes, inputAttributes, onChange, } = props;
+    const { name, children, height, variant = "outline", inline, className, disabled, attributes, inputAttributes, onChange, } = props;
     const highlightToggle = useToggle();
-    const rootClassNames = classNames(s.root, variant && s[`--variant-${variant}`], inline && s[`--inline`], highlightToggle.active && s["--highlighted"], className);
+    const rootClassNames = classNames(s.root, variant && s[`--variant-${variant}`], inline && s[`--inline`], highlightToggle.active && s["--highlighted"], disabled && s["--disabled"], className);
     const handleDragOver = (event) => {
         event.preventDefault();
         attributes?.onDragOver?.(event);
@@ -41,15 +41,17 @@ const FileUpload = (props) => {
         onChange?.({ name, event, value: Array.from(nextValue) });
         inputAttributes?.onChange?.(event);
     };
-    const inputNode = (_jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, onChange: handleChange }) }));
+    const inputNode = (_jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, disabled: disabled, onChange: handleChange }) }));
     const childrenNode = typeof children === "function" ? children({ highlighted: highlightToggle.active }) : children;
-    return (_jsx(View, { className: rootClassNames, height: height, attributes: {
+    return (_jsx(View, { className: rootClassNames, height: height, 
+        // For the focus ring radius
+        borderRadius: "medium", attributes: {
             ...attributes,
             onDragOver: handleDragOver,
             onDragEnter: handleDragEnter,
             onDragLeave: handleDragLeave,
             onDrop: handleDrop,
-        }, children: variant === "outline" && !inline ? (_jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", justify: "center", textAlign: "center", animated: true, height: "100%", children: [inputNode, _jsx(View.Item, { children: childrenNode })] })) : (_jsxs("label", { className: s.triggerLayer, children: [inputNode, childrenNode] })) }));
+        }, children: variant === "outline" && !inline ? (_jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", justify: "center", textAlign: "center", height: "100%", children: [inputNode, _jsx(View.Item, { children: childrenNode })] })) : (_jsxs("label", { className: s.triggerLayer, children: [inputNode, childrenNode] })) }));
 };
 FileUpload.displayName = "FileUpload";
 FileUploadTrigger.displayName = "FileUpload.Trigger";

package/dist/components/FileUpload/FileUpload.module.css

@@ -1 +1 @@
-.root{--rs-file-upload-radius:var(--rs-radius-medium);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-shadow-focus)}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-shadow-focus)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-color-border-neutral);border-radius:var(--rs-file-upload-radius)}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),.16)}}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger{pointer-events:all}.trigger{display:contents}
+.root{--rs-file-upload-radius:var(--rs-radius-medium);--rs-file-upload-border-color:var(--rs-color-border-neutral);--rs-file-upload-hover-background-color:rgba(var(--rs-color-rgb-background-neutral),0.16);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-shadow-focus)}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger,.triggerLayer:has(.trigger) a,.triggerLayer:has(.trigger) button{pointer-events:all}.trigger{display:contents}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-shadow-focus)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-file-upload-border-color);border-radius:var(--rs-file-upload-radius);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:var(--rs-file-upload-hover-background-color)}}.--disabled{--rs-file-upload-border-color:var(--rs-color-border-disabled);--rs-file-upload-hover-background-color:transparent}.--disabled .triggerLayer{cursor:not-allowed;opacity:.4}

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

@@ -4,6 +4,8 @@ import type * as G from "../../types/global";
 export type Props = {
     /** Name of the input element */
     name: string;
+    /** Disable the file upload input */
+    disabled?: boolean;
     /** Node for inserting children, can be a render function that receives component state */
     children?: React.ReactNode | ((props: {
         highlighted?: boolean;

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

@@ -1,4 +1,4 @@
-import type * as T from "./Flyout.types";
 export declare const mouseEnter = 600;
-export declare const defaultStyles: T.Styles;
-export declare const resetStyles: T.Styles;
+export declare const mouseLeave = 150;
+export declare const defaultStyles: React.CSSProperties;
+export declare const resetStyles: React.CSSProperties;

package/dist/components/Flyout/Flyout.constants.js

@@ -1,4 +1,5 @@
 export const mouseEnter = 600;
+export const mouseLeave = 150;
 export const defaultStyles = {
     left: 0,
     top: 0,

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

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

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

@@ -23,17 +23,14 @@ export type Options = Pick<BaseProps, "width" | "fallbackAdjustLayout" | "fallba
     lastUsedPosition: Position;
     onPositionChoose: (position: Position) => void;
 };
-export type Styles = React.CSSProperties;
 export type State = {
-    styles: Styles;
     position?: Position;
     status: "idle" | "rendered" | "positioned" | "visible" | "hidden";
 };
 export type FlyoutData = {
-    styles: Styles;
     position: Position;
 };
-export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
+export type UseFlyoutData = Pick<State, "position" | "status"> & {
     updatePosition: (args?: {
         sync?: boolean;
         fallback?: boolean;
@@ -72,7 +69,7 @@ export type TriggerAttributes = {
     onFocus?: () => void;
     onMouseDown?: () => void;
     onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
+    onMouseLeave?: (e: React.MouseEvent) => void;
     onTouchStart?: () => void;
     onClick?: () => void;
     "aria-describedby"?: string;
@@ -132,6 +129,10 @@ type BaseProps = {
     contentGap?: number;
     /** Shift the content on the secondary axis, relative to its original position */
     contentShift?: number;
+    /** Maximum height for the content */
+    contentMaxHeight?: string;
+    /** Maximum width for the content */
+    contentMaxWidth?: string;
     /** Additional classname for the content element */
     contentClassName?: string;
     /** Additional attributes for the content element */
@@ -178,7 +179,7 @@ export type ContextProps = {
     }) => void;
     handleOpen: () => void;
     handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
+    handleMouseLeave: (e: React.MouseEvent) => void;
     handleMouseDown: () => void;
     handleTransitionEnd: (e: React.TransitionEvent) => void;
     handleTransitionStart: (e: TransitionEvent) => void;
@@ -189,7 +190,7 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "contentMaxWidth" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {
     elRef?: ContextProps["triggerElRef"];
 };

package/dist/components/Flyout/FlyoutContent.js

@@ -11,8 +11,8 @@ import s from "./Flyout.module.css";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
-    const { styles, status, position } = flyout;
+    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {
         if (!mounted)
@@ -95,8 +95,9 @@ const FlyoutContent = (props) => {
         role = "menubar";
     }
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
-                ...styles,
                 "--rs-flyout-gap": contentGap,
+                "--rs-flyout-max-h": contentMaxHeight,
+                "--rs-flyout-max-w": contentMaxWidth,
             }, 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, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
     return _jsx(Portal, { targetRef: containerRef, children: content });
 };

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentCo
 import useFlyout from "./useFlyout.js";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -55,12 +55,13 @@ const FlyoutControlled = (props) => {
     // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
     // So we're saving a flag on touch start and then change the mouse enter behavior
     const hoverTriggeredWithTouchEventRef = React.useRef(false);
+    const originCoordinatesRef = React.useRef(originCoordinates ?? null);
     // eslint-disable-next-line react-hooks/refs
+    originCoordinatesRef.current = originCoordinates ?? null;
     const flyout = useFlyout({
         triggerElRef: positionRef ?? triggerElRef,
         flyoutElRef,
-        // eslint-disable-next-line react-hooks/refs
-        triggerBounds: originCoordinates ?? triggerBoundsRef.current,
+        triggerBoundsRef: originCoordinates ? originCoordinatesRef : triggerBoundsRef,
         width,
         position: passedPosition,
         defaultActive: resolvedActive,
@@ -103,7 +104,7 @@ const FlyoutControlled = (props) => {
             return;
         onCloseRef.current?.({ reason: options.reason });
         if (options?.closeParents) {
-            parentFlyoutContext?.handleClose?.({});
+            parentFlyoutContext?.handleClose?.({ closeParents: true, reason: options.reason });
         }
     }, [isRendered, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
     /**
@@ -143,14 +144,31 @@ const FlyoutControlled = (props) => {
                 cooldown.warm();
             timerRef.current = setTimeout(() => {
                 handleOpen();
-            }, groupTimeouts && cooldown.status === "warming" ? timeouts.mouseEnter : 0);
+            }, groupTimeouts && cooldown.status === "warming"
+                ? timeouts.mouseEnter
+                : isSubmenu
+                    ? timeouts.mouseEnter
+                    : 0);
         }
-    }, [clearTimer, handleOpen, groupTimeouts]);
-    const handleMouseLeave = React.useCallback(() => {
+    }, [clearTimer, handleOpen, groupTimeouts, isSubmenu]);
+    const handleMouseLeave = React.useCallback((e) => {
+        if (e.relatedTarget === flyoutElRef.current ||
+            (e.relatedTarget instanceof Node && flyoutElRef.current?.contains(e.relatedTarget)))
+            return;
+        if (e.relatedTarget === triggerElRef.current ||
+            (e.relatedTarget instanceof Node && triggerElRef.current?.contains(e.relatedTarget)))
+            return;
         cooldown.cool();
         clearTimer();
-        handleClose({});
-    }, [clearTimer, handleClose]);
+        if (isSubmenu) {
+            timerRef.current = setTimeout(() => {
+                handleClose({});
+            }, timeouts.mouseLeave);
+        }
+        else {
+            handleClose({});
+        }
+    }, [clearTimer, handleClose, triggerElRef, flyoutElRef, isSubmenu]);
     const handleTriggerClick = React.useCallback(() => {
         if (!isRendered) {
             handleOpen();
@@ -286,8 +304,10 @@ const FlyoutControlled = (props) => {
         resizeObserver.observe(document.body);
         if (triggerElRef.current)
             resizeObserver.observe(triggerElRef.current);
+        if (flyoutElRef.current)
+            resizeObserver.observe(flyoutElRef.current);
         return () => resizeObserver.disconnect();
-    }, [updatePosition, triggerElRef, isRendered]);
+    }, [updatePosition, triggerElRef, isRendered, flyoutElRef]);
     React.useEffect(() => {
         updatePosition({ sync: true });
     }, [isRTL, updatePosition]);
@@ -305,7 +325,7 @@ const FlyoutControlled = (props) => {
         shouldReturnFocusRef.current = false;
         handleClose({ reason: "outside-click" });
     }, {
-        disabled: Boolean(status !== "visible" || disableCloseOnOutsideClick),
+        disabled: !isRendered || disableCloseOnOutsideClick,
     });
     return (_jsx(Provider, { value: {
             id,
@@ -331,6 +351,8 @@ const FlyoutControlled = (props) => {
             contentClassName,
             contentAttributes,
             contentGap,
+            contentMaxHeight,
+            contentMaxWidth,
             containerRef,
             disableContentHover,
             autoFocus,

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

@@ -6,8 +6,8 @@ type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;
-    triggerBounds?: DOMRect | G.Coordinates | null;
-}) => Pick<T.State, "styles" | "position" | "status"> & {
+    triggerBoundsRef: React.RefObject<DOMRect | G.Coordinates | null>;
+}) => Pick<T.State, "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;
     }) => void;

package/dist/components/Flyout/useFlyout.js

@@ -1,43 +1,32 @@
 import React from "react";
 import useRTL from "../../hooks/useRTL.js";
-import { defaultStyles, resetStyles } from "./Flyout.constants.js";
 import flyout from "./utilities/flyout.js";
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":
-            if (state.status !== "idle")
-                return state;
             // Disable events before it's positioned to avoid mouseleave getting triggered
-            return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
+            return { ...state, status: "rendered" };
         case "position":
-            if (!action.payload.sync && state.status !== "rendered")
-                return state;
-            if (action.payload.sync && state.status !== "visible")
-                return state;
             return {
                 ...state,
-                status: action.payload.sync ? "visible" : "positioned",
+                status: action.payload.sync ? state.status : "positioned",
                 position: action.payload.position,
-                styles: { ...defaultStyles, ...action.payload.styles },
             };
         case "show":
+            // Checking because we're positioning inside nextAnimationFrame
             if (state.status !== "positioned")
                 return state;
             return { ...state, status: "visible" };
         case "hide":
-            if (state.status !== "visible")
-                return state;
             return { ...state, status: "hidden" };
         case "remove":
-            if (state.status !== "hidden" && state.status !== "visible")
-                return state;
-            return { ...state, status: "idle", styles: resetStyles };
+            return { ...state, status: "idle" };
         default:
             throw new Error("[Reshaped] Invalid flyout reducer type");
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, contentShift, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, width, container, } = options;
     const lastUsedPositionRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
@@ -47,7 +36,6 @@ const useFlyout = (args) => {
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
-        styles: defaultStyles,
         status: "idle",
     });
     const render = React.useCallback(() => {
@@ -72,7 +60,7 @@ const useFlyout = (args) => {
         const nextFlyoutData = flyout({
             triggerEl: triggerElRef.current,
             flyoutEl: flyoutElRef.current,
-            triggerBounds,
+            triggerBounds: triggerBoundsRef.current,
             width,
             position: changePositon ? defaultPosition : lastUsedPositionRef.current,
             fallbackPositions: changePositon ? cachedFallbackPositions : [],
@@ -100,7 +88,7 @@ const useFlyout = (args) => {
         isRTL,
         flyoutElRef,
         triggerElRef,
-        triggerBounds,
+        triggerBoundsRef,
         width,
         contentGap,
         contentShift,
@@ -114,13 +102,12 @@ const useFlyout = (args) => {
     }, [state.status, updatePosition]);
     return React.useMemo(() => ({
         position: state.position,
-        styles: state.styles,
         status: state.status,
         updatePosition,
         render,
         hide,
         remove,
         show,
-    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
+    }), [render, updatePosition, hide, remove, show, state.position, state.status]);
 };
 export default useFlyout;

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

@@ -13,13 +13,13 @@ declare const calculatePosition: (args: {
 } & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight">) => {
     position: T.Position;
     styles: {
-        left: number | undefined;
-        right: number | undefined;
-        top: number | undefined;
-        bottom: number | undefined;
+        left: string | null;
+        right: string | null;
+        top: string | null;
+        bottom: string | null;
         transform: string;
-        height: number | undefined;
-        width: string | number | undefined;
+        height: string | null;
+        width: string | null;
     };
     boundaries: {
         left: number;

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

@@ -1,10 +1,12 @@
+import { SCREEN_OFFSET } from "./constants.js";
 import { getRTLPosition, centerBySize } from "./helpers.js";
-const SCREEN_OFFSET = 8;
 /**
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, } = args;
+    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, 
+    // fallbackMinWidth,
+    fallbackMinHeight, } = args;
     const isFullWidth = passedWidth === "full" || passedWidth === "100%";
     let left = 0;
     let top = 0;
@@ -137,15 +139,20 @@ const calculatePosition = (args) => {
             if (bottom !== null)
                 bottom = bottom + (flyoutHeight - height);
         }
-        if (updatedOverflow.left > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.left);
-            left = left + (flyoutWidth - width);
-        }
-        else if (updatedOverflow.right > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.right);
-            if (right !== null)
-                right = right + (flyoutWidth - width);
-        }
+        // TODO: Decide if we need horizontal scrolling for the fallbacks, might be a bad practice anyways
+        // if (updatedOverflow.left > 0) {
+        // 	width = Math.max(
+        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
+        // 		flyoutWidth - updatedOverflow.left
+        // 	);
+        // 	left = left + (flyoutWidth - width);
+        // } else if (updatedOverflow.right > 0) {
+        // 	width = Math.max(
+        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
+        // 		flyoutWidth - updatedOverflow.right
+        // 	);
+        // 	if (right !== null) right = right + (flyoutWidth - width);
+        // }
     }
     if (isFullWidth) {
         left = SCREEN_OFFSET;
@@ -159,13 +166,13 @@ const calculatePosition = (args) => {
     return {
         position,
         styles: {
-            left: right === null ? 0 : undefined,
-            right: right === null ? undefined : 0,
-            top: bottom === null ? 0 : undefined,
-            bottom: bottom === null ? undefined : 0,
+            left: right === null ? "0px" : null,
+            right: right === null ? null : "0px",
+            top: bottom === null ? "0px" : null,
+            bottom: bottom === null ? null : "0px",
             transform: `translate(${translateX}px, ${translateY}px)`,
-            height,
-            width: width ?? passedWidth,
+            height: height !== undefined ? `${height}px` : null,
+            width: width !== undefined ? `${width}px` : (passedWidth ?? null),
         },
         boundaries: {
             left,

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

@@ -0,0 +1 @@
+export declare const SCREEN_OFFSET = 8;

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

@@ -0,0 +1 @@
+export const SCREEN_OFFSET = 8;

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

@@ -1,6 +1,7 @@
 import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
 import { resetStyles } from "../Flyout.constants.js";
 import calculatePosition from "./calculatePosition.js";
+import { SCREEN_OFFSET } from "./constants.js";
 import getPositionFallbacks from "./getPositionFallbacks.js";
 import isFullyVisible from "./isFullyVisible.js";
 /**
@@ -33,16 +34,26 @@ const flyout = (args) => {
     const shadowRoot = triggerEl && getShadowRoot(triggerEl);
     // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
-    const cloneRect = targetClone.getBoundingClientRect();
-    const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
     const closestFixedContainer = !passedContainer && triggerEl ? findClosestPositionContainer({ el: triggerEl }) : undefined;
     const container = passedContainer ||
         // Render inside fixed position container automatically to keep their position synced on scroll
         closestFixedContainer ||
         document.body;
     const renderContainerBounds = container.getBoundingClientRect();
-    const visualContainerBounds = (passedContainer || document.body).getBoundingClientRect();
-    const applyPosition = (position) => {
+    const applyPosition = (position, options) => {
+        const widthOption = options?.width || width;
+        // If there is a width override, apply it to calculate the position and the height correctly
+        if (widthOption === "full") {
+            targetClone.style.width = `calc(100% - ${SCREEN_OFFSET * 2}px)`;
+        }
+        else if (widthOption === "trigger") {
+            targetClone.style.width = `${resolvedTriggerBounds.width}px`;
+        }
+        else {
+            targetClone.style.width = widthOption || "";
+        }
+        const cloneRect = targetClone.getBoundingClientRect();
+        const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
         return calculatePosition({
             triggerBounds: resolvedTriggerBounds,
             flyoutBounds,
@@ -51,7 +62,7 @@ const flyout = (args) => {
             contentGap: contentGap * unitModifier,
             contentShift: contentShift * unitModifier,
             rtl,
-            width,
+            width: widthOption,
             passedContainer: passedContainer ||
                 (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
             fallbackAdjustLayout,
@@ -60,6 +71,12 @@ const flyout = (args) => {
         });
     };
     const testVisibility = (calculated) => {
+        const visualContainerBounds = passedContainer?.getBoundingClientRect() ?? {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            left: window.scrollX,
+            top: window.scrollY,
+        };
         return isFullyVisible({
             flyoutBounds: calculated.boundaries,
             visualContainerBounds,
@@ -75,10 +92,24 @@ const flyout = (args) => {
             calculated = tested;
         return visible;
     });
+    // Try full width positions in case it doesn't fit on any side
+    if (!calculated) {
+        const smallScreenFallbackPositions = ["top", "bottom"].filter((position) => testOrder.includes(position));
+        smallScreenFallbackPositions.some((position) => {
+            const tested = applyPosition(position, { width: "full" });
+            const visible = testVisibility(tested);
+            if (visible)
+                calculated = tested;
+            return visible;
+        });
+    }
     if (!calculated)
         calculated = applyPosition(lastUsedPosition);
     onPositionChoose(calculated.position);
     targetClone.parentNode?.removeChild(targetClone);
-    return calculated;
+    Object.entries(calculated.styles).forEach(([key, value]) => {
+        flyoutEl.style.setProperty(key, value);
+    });
+    return { position: calculated.position };
 };
 export default flyout;

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

@@ -1,12 +1,13 @@
+type Bounds = Pick<DOMRect, "left" | "top" | "width" | "height">;
 /**
  * Check if element visually fits within its render container
  */
 declare const isFullyVisible: (args: {
     /** Bounds of the flyout content */
-    flyoutBounds: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    flyoutBounds: Bounds;
     /** Bounds of the container where the flyout content should fit */
-    visualContainerBounds: DOMRect;
+    visualContainerBounds: Bounds;
     /** Bounds of the container where flyout content is rendered */
-    renderContainerBounds: DOMRect;
+    renderContainerBounds: Bounds;
 }) => boolean;
 export default isFullyVisible;

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

@@ -1,20 +1,21 @@
+import { SCREEN_OFFSET } from "./constants.js";
 /**
  * Check if element visually fits within its render container
  */
 const isFullyVisible = (args) => {
     const { flyoutBounds, visualContainerBounds, renderContainerBounds } = args;
-    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left) {
+    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left + SCREEN_OFFSET) {
         return false;
     }
-    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top) {
+    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top + SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width >
-        visualContainerBounds.right) {
+        visualContainerBounds.left + visualContainerBounds.width - SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height >
-        visualContainerBounds.bottom) {
+        visualContainerBounds.top + visualContainerBounds.height - SCREEN_OFFSET) {
         return false;
     }
     return true;