reshaped 3.0.9 → 3.0.10

package/dist/components/Resizable/Resizable.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useDrag from "../../hooks/useDrag.js";
+import View from "../View/index.js";
+import s from "./Resizable.module.css";
+const PrivateResizableHandle = (props) => {
+    const { containerRef, onDrag, index, direction, children } = props;
+    const { ref, active } = useDrag((args) => {
+        onDrag({ ...args, index });
+    }, {
+        containerRef,
+        orientation: direction === "row" ? "horizontal" : "vertical",
+    });
+    const handleClassNames = classNames(s.handle, active && s["handle--dragging"]);
+    if (children)
+        return _jsx(View.Item, { children: children({ ref }) });
+    return (_jsx(View.Item, { className: handleClassNames, attributes: {
+            role: "button",
+            tabIndex: 0,
+            ref: (el) => {
+                // @ts-ignore
+                ref.current = el;
+            },
+        } }));
+};
+const PrivateResizableItem = React.forwardRef((props, ref) => {
+    const { children, defaultSize, minSize, maxSize } = props;
+    const itemRef = React.useRef(null);
+    return (_jsx(View.Item, { grow: true, className: s.item, attributes: {
+            ref: (el) => {
+                if (typeof ref === "function")
+                    ref(el);
+                itemRef.current = el;
+            },
+            style: {
+                "--rs-resizable-default-size": defaultSize,
+                "--rs-resizable-min-size": minSize,
+                "--rs-resizable-max-size": maxSize,
+            },
+        }, children: children }));
+});
+const Resizable = (props) => {
+    const { children, height, direction = "row", gap = 2, className, attributes } = props;
+    const rootClassNames = classNames(s.root, s[`--direction-${direction}`], className);
+    const containerRef = React.useRef(null);
+    const itemsRef = React.useRef([]);
+    const horizontal = direction === "row";
+    let currentHandleIndex = 0;
+    let currentItemIndex = 0;
+    itemsRef.current = [];
+    const checkedCrossedBoundaries = (args) => {
+        const { item, grow, itemsSize, itemsCount } = args;
+        const { minSize, maxSize } = item.props;
+        const nextPx = (grow / itemsCount / 100) * itemsSize;
+        const minPx = minSize && Number(minSize.replace("px", ""));
+        const maxPx = maxSize && Number(maxSize?.replace("px", ""));
+        if (minPx && minPx > nextPx)
+            return true;
+        if (maxPx && maxPx < nextPx)
+            return true;
+        return false;
+    };
+    const onDrag = (args) => {
+        const { index, x, y, triggerX, triggerY } = args;
+        const startItem = itemsRef.current[index];
+        const endItem = itemsRef.current[index + 1];
+        if (!startItem.el || !endItem.el)
+            return;
+        const itemsCount = itemsRef.current.length;
+        // Each item has a flex-grow of 1 as default and these values get updated while dragging for the items around the handle
+        // Grow value of all items besides currently updating ones
+        let currentItemsGrow = itemsCount * 100;
+        let itemsSize = 0;
+        itemsRef.current.forEach((item, i) => {
+            if (!item.el)
+                return;
+            itemsSize += horizontal ? item.el.clientWidth : item.el.clientHeight;
+            if (i === index || i === index + 1)
+                return;
+            currentItemsGrow -= Number(item.el.style.flexGrow || 100);
+        }, 0);
+        const startSize = horizontal ? startItem.el.clientWidth : startItem.el.clientHeight;
+        const startOffset = horizontal ? startItem.el.offsetLeft : startItem.el.offsetTop;
+        const endSize = horizontal ? endItem.el.clientWidth : endItem.el.clientHeight;
+        // Handles containing triggers are located lower based on the gap and padding inside the handle
+        const gapCompensation = (horizontal ? triggerX : triggerY) - startSize - startOffset;
+        const dragCoord = (horizontal ? x : y) - gapCompensation;
+        // Total size of the dragging area
+        const currentItemsSize = startSize + endSize;
+        // x is calculated based on container but we're changing grow based on current items
+        const percent = Math.min(1, Math.max(0, (dragCoord - startOffset) / currentItemsSize));
+        const nextStartGrow = Math.floor(percent * currentItemsGrow);
+        const nextEndGrow = Math.floor(currentItemsGrow - nextStartGrow);
+        // Validate that next grow values won't break the min/max size values
+        if (checkedCrossedBoundaries({ item: startItem, itemsSize, grow: nextStartGrow, itemsCount })) {
+            return;
+        }
+        if (checkedCrossedBoundaries({ item: endItem, itemsSize, grow: nextEndGrow, itemsCount })) {
+            return;
+        }
+        startItem.el.style.flexGrow = nextStartGrow.toString();
+        endItem.el.style.flexGrow = nextEndGrow.toString();
+    };
+    /**
+     * When passing sizes, items first get rendered with css
+     * and then have to be hydrated with flexGrow to enable correct resizing
+     */
+    React.useEffect(() => {
+        const growValues = [];
+        // Calculate total size of items excluding gaps
+        let totalItemsSize = 0;
+        itemsRef.current.forEach((item) => {
+            if (!item.el)
+                return;
+            totalItemsSize += horizontal ? item.el.clientWidth : item.el.clientHeight;
+        });
+        // Calculate flex grow values of all items rendered by css originally
+        itemsRef.current.forEach((item, i) => {
+            if (!item.el)
+                return;
+            const itemSizePercent = (horizontal ? item.el.clientWidth : item.el.clientHeight) / totalItemsSize;
+            growValues[i] = itemsRef.current.length * itemSizePercent * 100;
+        });
+        // Apply flex grow after calculation is done to avoid layout shifts during the calculation
+        itemsRef.current.forEach((item, i) => {
+            if (!item.el || !growValues[i])
+                return;
+            item.el.style.flexGrow = growValues[i].toString();
+            item.el.setAttribute("data-rs-resizable-item-mounted", "");
+        });
+    }, [horizontal]);
+    const output = React.Children.map(children, (child) => {
+        const isComponent = React.isValidElement(child);
+        if (isComponent && child.type === Resizable.Handle && child.props) {
+            return (_jsx(PrivateResizableHandle, { ...child.props, containerRef: containerRef, index: currentHandleIndex++, onDrag: onDrag, direction: direction }));
+        }
+        if (isComponent && child.type === Resizable.Item && child.props) {
+            const index = currentHandleIndex;
+            return (_jsx(PrivateResizableItem, { ...child.props, index: currentItemIndex++, ref: (el) => (itemsRef.current[index] = { el, props: child.props }) }));
+        }
+        return null;
+    });
+    return (_jsx(View, { attributes: { ...attributes, ref: containerRef }, className: rootClassNames, height: height, direction: direction, align: "stretch", gap: gap, children: output }));
+};
+Resizable.Item = (() => null);
+Resizable.Handle = (() => null);
+export default Resizable;

package/dist/components/Resizable/Resizable.module.css

@@ -0,0 +1 @@
+.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;flex-grow:100;max-width:var(--rs-resizable-default-size);min-width:var(--rs-resizable-default-size);overflow:hidden}.handle{flex-shrink:0;position:relative}.handle:after,.handle:before{border-radius:999px;content:"";position:absolute}.handle:after{background:var(--rs-color-border-neutral);opacity:0;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.handle--dragging:after,.handle:focus-visible:after,.handle:hover:after{opacity:.6}body:has(.handle--dragging) .handle:not(.handle--dragging){opacity:0}body:has(.--direction-row>.handle--dragging){cursor:ew-resize}body:has(.--direction-column>.handle--dragging){cursor:ns-resize}.--direction-row>.handle{cursor:ew-resize;height:100%}.--direction-row>.handle:after,.--direction-row>.handle:before{inset-block:0;inset-inline-start:50%;transform:translateX(-50%)}.--direction-row>.handle:before{width:var(--rs-unit-x4)}.--direction-row>.handle:after{width:var(--rs-unit-x1)}.--direction-row>.item[data-rs-resizable-item-mounted]{max-width:var(--rs-resizable-max-size);min-width:var(--rs-resizable-min-size)}.--direction-column>.handle{cursor:ns-resize;width:100%}.--direction-column>.handle:after,.--direction-column>.handle:before{inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.--direction-column>.handle:before{height:var(--rs-unit-x4)}.--direction-column>.handle:after{height:var(--rs-unit-x1)}.--direction-column>.item[data-rs-resizable-item-mounted]{max-height:var(--rs-resizable-max-size);min-height:var(--rs-resizable-min-size)}

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

@@ -0,0 +1,29 @@
+import type React from "react";
+import type { ViewProps } from "../View";
+import type { UseDragCallbackArgs } from "../../hooks/useDrag";
+export type Props = Pick<ViewProps, "children" | "className" | "attributes" | "height" | "direction" | "gap">;
+export type ItemProps = {
+    children: React.ReactNode;
+    minSize?: `${number}px`;
+    maxSize?: `${number}px`;
+    defaultSize?: `${number}px`;
+};
+export type PrivateItemProps = ItemProps & {
+    index: number;
+};
+export type HandleProps = {
+    children?: (attributes: {
+        ref: React.RefObject<HTMLButtonElement>;
+    }) => React.ReactNode;
+};
+export type PrivateHandleProps = HandleProps & {
+    containerRef: React.RefObject<HTMLDivElement>;
+    index: number;
+    onDrag: (args: UseDragCallbackArgs & {
+        index: number;
+    }) => void;
+} & Pick<Props, "direction">;
+export type ItemsRefProps = {
+    el: HTMLDivElement | null;
+    props: ItemProps;
+}[];

package/dist/components/Resizable/Resizable.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default } from "./Resizable";
+export type { Props as ResizableProps, ItemProps as ResizableItemProps, HandleProps as ResizableHandleProps, } from "./Resizable.types";

package/dist/components/Resizable/index.js

@@ -0,0 +1 @@
+export { default } from "./Resizable.js";

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

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").ResizableProps): import("react").JSX.Element;
+        Item: import("react").FC<import("./..").ResizableItemProps>;
+        Handle: import("react").FC<import("./..").ResizableHandleProps>;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const base: () => import("react").JSX.Element;

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

@@ -0,0 +1,58 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Resizable from "../index.js";
+import View from "../../View/index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Components/Resizable",
+    component: Resizable,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/Resizable",
+        },
+    },
+};
+export const base = () => (<Example>
+		<Example.Item>
+			<Resizable height="300px" gap={4}>
+				<Resizable.Item minSize="100px" defaultSize="200px">
+					<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+						Panel
+					</View>
+				</Resizable.Item>
+				<Resizable.Handle />
+				<Resizable.Item>
+					<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+						Panel
+					</View>
+				</Resizable.Item>
+				<Resizable.Handle />
+				<Resizable.Item>
+					<Resizable height="100%" direction="column">
+						<Resizable.Item minSize="50px" maxSize="100px">
+							<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+								Panel
+							</View>
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
+							<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+								Panel
+							</View>
+						</Resizable.Item>
+						<Resizable.Handle>
+							{(attributes) => (<View backgroundColor="primary-faded" padding={1} align="center" borderRadius="small">
+									<Button attributes={attributes} type="button">
+										Drag me
+									</Button>
+								</View>)}
+						</Resizable.Handle>
+						<Resizable.Item>
+							<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+								Panel
+							</View>
+						</Resizable.Item>
+					</Resizable>
+				</Resizable.Item>
+			</Resizable>
+		</Example.Item>
+	</Example>);

package/dist/components/ScrollArea/ScrollArea.js

@@ -7,8 +7,10 @@ import getHeightStyles from "../../styles/height/index.js";
 import getMaxHeightStyles from "../../styles/maxHeight/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import s from "./ScrollArea.module.css";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;
+    const onThumbMoveRef = useHandlerRef(onThumbMove);
     const [dragging, setDragging] = React.useState(false);
     const dragStartPositionRef = React.useRef(0);
     const barRef = React.useRef(null);
@@ -38,10 +40,8 @@ const ScrollAreaBar = (props) => {
             return;
         const diff = vertical ? e.movementY : e.movementX;
         const total = vertical ? elBar.scrollHeight : elBar.scrollWidth;
-        onThumbMove({ value: diff / total, type: "relative" });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [ratio, vertical, dragging]);
+        onThumbMoveRef.current?.({ value: diff / total, type: "relative" });
+    }, [vertical, dragging, onThumbMoveRef]);
     const handleDragEnd = React.useCallback(() => {
         setDragging(false);
         enableUserSelect();

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

@@ -48,9 +48,9 @@ type BaseProps = {
     min?: number;
     max?: number;
     orientation?: "vertical" | "horizontal";
-    renderValue?: (args: {
+    renderValue?: ((args: {
         value: number;
-    }) => string;
+    }) => string) | false;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Slider/Slider.utilities.js

@@ -15,10 +15,10 @@ export const applyStepToValue = (value, step) => {
 export const getDragCoord = ({ event, vertical, }) => {
     if (vertical) {
         if (event instanceof MouseEvent)
-            return event.pageY || event.screenY;
-        return event.changedTouches[0].pageY;
+            return event.clientY;
+        return event.changedTouches[0].clientY;
     }
     if (event instanceof MouseEvent)
-        return event.pageX || event.screenX;
-    return event.changedTouches[0].pageX;
+        return event.clientX;
+    return event.changedTouches[0].clientX;
 };

package/dist/components/Slider/SliderControlled.js

@@ -9,9 +9,12 @@ import { useFormControl } from "../FormControl/index.js";
 import SliderThumb from "./SliderThumb.js";
 import { applyStepToValue, getDragCoord } from "./Slider.utilities.js";
 import s from "./Slider.module.css";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const THUMB_SIZE = 16;
 const SliderControlled = (props) => {
     const { name, range, max, min, step = 1, onChange, onChangeCommit, renderValue, className, attributes, orientation = "horizontal", } = props;
+    const onChangeRef = useHandlerRef(onChange);
+    const onChangeCommitRef = useHandlerRef(onChangeCommit);
     const vertical = orientation === "vertical";
     const minValue = range && props.minValue !== undefined ? applyStepToValue(props.minValue, step) : undefined;
     const maxValue = applyStepToValue(range ? props.maxValue : props.value, step);
@@ -79,22 +82,21 @@ const SliderControlled = (props) => {
     const handleMinChange = React.useCallback((value, options) => {
         if (!range)
             return;
-        const method = options?.commit ? onChangeCommit : onChange;
+        const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
+        // @ts-ignore - creating refs out of handler props loses connection to the range flag
         method?.({ minValue: value, maxValue, name });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [maxValue, name, range]);
+    }, [maxValue, name, range, onChangeCommitRef, onChangeRef]);
     const handleMaxChange = React.useCallback((value, options) => {
         if (range) {
-            const method = options?.commit ? onChangeCommit : onChange;
+            const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
+            // @ts-ignore - creating refs out of handler props loses connection to the range flag
             method?.({ minValue: minValue, maxValue: value, name });
             return;
         }
-        const method = options?.commit ? onChangeCommit : onChange;
+        const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
+        // @ts-ignore - creating refs out of handler props loses connection to the range flag
         method?.({ value, name });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [minValue, name, range]);
+    }, [minValue, name, range, onChangeRef, onChangeCommitRef]);
     const handleMouseDown = ({ nativeEvent }) => {
         if (disabled)
             return;

package/dist/components/Slider/SliderThumb.js

@@ -15,6 +15,6 @@ const SliderThumb = (props, ref) => {
     const handleChange = (e) => {
         onChange(+e.target.value);
     };
-    return (_jsxs(_Fragment, { children: [_jsx("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, step: step, "aria-labelledby": id, "aria-orientation": orientation }), _jsx("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { "--ts-slider-thumb-position": `${position}%` }, id: id, "aria-hidden": "true", children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", weight: "medium", className: s.tooltip, attributes: { ref: tooltipRef }, children: tooltipValue }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, step: step, "aria-labelledby": id, "aria-orientation": orientation }), _jsx("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { "--ts-slider-thumb-position": `${position}%` }, id: id, "aria-hidden": "true", children: renderValue !== false && (_jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", weight: "medium", className: s.tooltip, attributes: { ref: tooltipRef }, children: tooltipValue }) })) })] }));
 };
 export default React.forwardRef(SliderThumb);

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

@@ -22,6 +22,7 @@ export const direction = () => (<Example>
 			<View height="200px">
 				<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100} orientation="vertical"/>
 			</View>
+			<View height="2000px"/>
 		</Example.Item>
 	</Example>);
 export const step = () => (<Example>
@@ -49,6 +50,9 @@ export const customRender = () => (<Example>
 		<Example.Item title="custom render">
 			<Slider name="slider" defaultValue={30} renderValue={(args) => `$${args.value}`}/>
 		</Example.Item>
+		<Example.Item title="no tooltip">
+			<Slider name="slider" defaultValue={30} renderValue={false}/>
+		</Example.Item>
 	</Example>);
 export const formControl = () => (<Example>
 		<Example.Item title="form control, disabled">

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

@@ -37,23 +37,24 @@ export type ContainerProps = {
     status?: "entering" | "entered" | "exiting";
     inspected: boolean;
 };
+export type ShowOptions = {
+    timeout?: Timeout;
+    position?: Position;
+};
+export type ShowProps = Props & ShowOptions;
 export type Context = {
     options?: ProviderProps["options"];
     queues: Record<RegionProps["position"], Array<ContainerProps>>;
-    add: (toast: Props & ShowOptions) => string;
+    add: (toast: ShowProps) => string;
     show: (id: string) => void;
     hide: (id: string) => void;
     remove: (id: string) => void;
     id: string;
 };
-export type ShowOptions = {
-    timeout?: Timeout;
-    position?: Position;
-};
 type AddAction = {
     type: "add";
     payload: {
-        toastProps: Props & ShowOptions;
+        toastProps: ShowProps;
         id: string;
     };
 };

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

@@ -1,3 +1,3 @@
 export { default as useToast } from "./useToast";
 export { default as ToastProvider } from "./ToastProvider";
-export type { Props as ToastProps, ProviderProps as ToastProviderProps } from "./Toast.types";
+export type { Props as ToastProps, ProviderProps as ToastProviderProps, ShowProps as ToastShowProps, } from "./Toast.types";

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

@@ -1,5 +1,5 @@
 declare const useToast: () => {
-    show: (toast: import("./Toast.types").Props & import("./Toast.types").ShowOptions) => string;
+    show: (toast: import("./Toast.types").ShowProps) => string;
     hide: (id: string) => void;
     id: string;
 };

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

@@ -121,4 +121,35 @@ export const edgeCases = () => (<Example>
 					</Actionable>)}
 			</Tooltip>
 		</Example.Item>
+
+		<Example.Item title="nested popovers inside a tooltip">
+			<Tooltip position="top" text="Hello">
+				{(tooltipAttributes) => (<Popover position="bottom">
+						<Popover.Trigger>
+							{(attributes) => (<Button color="primary" attributes={{
+                ...tooltipAttributes,
+                ...attributes,
+            }}>
+									Open
+								</Button>)}
+						</Popover.Trigger>
+						<Popover.Content>
+							<View gap={2} align="start">
+								Popover content
+								<Popover position="bottom">
+									<Popover.Trigger>
+										{(attributes) => <Button attributes={attributes}>Open</Button>}
+									</Popover.Trigger>
+									<Popover.Content>
+										<View gap={2} align="start">
+											Popover content
+											<Button onClick={() => { }}>Button</Button>
+										</View>
+									</Popover.Content>
+								</Popover>
+							</View>
+						</Popover.Content>
+					</Popover>)}
+			</Tooltip>
+		</Example.Item>
 	</Example>);

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

@@ -3,7 +3,9 @@ import type * as T from "./Flyout.types";
 declare const FlyoutContext: React.Context<T.ContextProps>;
 declare const useFlyoutContext: () => T.ContextProps;
 declare const useFlyoutTriggerContext: () => T.TriggerContextProps;
+declare const useFlyoutContentContext: () => boolean;
 declare const Provider: React.Provider<T.ContextProps>;
 declare const TriggerProvider: React.Provider<T.TriggerContextProps>;
-export { Provider, TriggerProvider, useFlyoutContext, useFlyoutTriggerContext };
+declare const ContentProvider: React.Provider<boolean>;
+export { Provider, TriggerProvider, ContentProvider, useFlyoutContext, useFlyoutTriggerContext, useFlyoutContentContext, };
 export default FlyoutContext;

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

@@ -2,9 +2,12 @@
 import React from "react";
 const FlyoutContext = React.createContext({});
 const FlyoutTriggerContext = React.createContext({});
+const FlyoutContentContext = React.createContext(false);
 const useFlyoutContext = () => React.useContext(FlyoutContext);
 const useFlyoutTriggerContext = () => React.useContext(FlyoutTriggerContext);
+const useFlyoutContentContext = () => React.useContext(FlyoutContentContext);
 const Provider = FlyoutContext.Provider;
 const TriggerProvider = FlyoutTriggerContext.Provider;
-export { Provider, TriggerProvider, useFlyoutContext, useFlyoutTriggerContext };
+const ContentProvider = FlyoutContentContext.Provider;
+export { Provider, TriggerProvider, ContentProvider, useFlyoutContext, useFlyoutTriggerContext, useFlyoutContentContext, };
 export default FlyoutContext;

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

@@ -68,6 +68,7 @@ type BaseProps = {
     disabled?: boolean;
     disableHideAnimation?: boolean;
     disableContentHover?: boolean;
+    disableCloseOnOutsideClick?: boolean;
     children?: React.ReactNode;
     onOpen?: () => void;
     onClose?: () => void;

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

@@ -6,7 +6,7 @@ import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.
 import Portal from "../Portal/index.js";
 import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
 import cooldown from "./utilities/cooldown.js";
-import { useFlyoutContext } from "./Flyout.context.js";
+import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
@@ -48,12 +48,10 @@ const FlyoutContent = (props) => {
     else if (trapFocusMode === "action-menu") {
         role = "menu";
     }
-    const content = (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _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": triggerType === "click", style: contentAttributes?.style, className: innerClassNames, children: children }) }));
+    const content = (_jsx(ContentProvider, { value: true, 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": triggerType === "click", style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));
     const closestScrollable = getClosestFlyoutTarget(triggerElRef.current);
     const scrollableRef = closestScrollable === document.body ? undefined : { current: closestScrollable };
     return _jsx(Portal, { targetRef: containerRef || scrollableRef, children: content });

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

@@ -13,12 +13,16 @@ import { checkKeyboardMode } from "../../../utilities/a11y/keyboardMode.js";
 import useFlyout from "./useFlyout.js";
 import * as timeouts from "./Flyout.constants.js";
 import cooldown from "./utilities/cooldown.js";
-import { Provider, useFlyoutTriggerContext, useFlyoutContext } from "./Flyout.context.js";
+import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
+import useHandlerRef from "../../../hooks/useHandlerRef.js";
 const FlyoutRoot = (props) => {
-    const { triggerType = "click", onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, } = props;
+    const { triggerType = "click", onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, } = props;
+    const onOpenRef = useHandlerRef(onOpen);
+    const onCloseRef = useHandlerRef(onClose);
     const resolvedActive = disabled === true ? false : passedActive;
     const parentFlyoutContext = useFlyoutContext();
     const parentFlyoutTriggerContext = useFlyoutTriggerContext();
+    const parentFlyoutContentContext = useFlyoutContentContext();
     const isSubmenu = parentFlyoutContext.trapFocusMode === "action-menu" ||
         parentFlyoutContext.trapFocusMode === "content-menu";
     const [isRTL] = useRTL();
@@ -27,7 +31,8 @@ const FlyoutRoot = (props) => {
      * Reuse the parent trigger ref in case we render nested triggers
      * For example, when we apply tooltip and popover to the same button
      */
-    const triggerElRef = parentFlyoutTriggerContext?.triggerElRef || internalTriggerElRef;
+    const triggerElRef = (!parentFlyoutContentContext && parentFlyoutTriggerContext?.triggerElRef) ||
+        internalTriggerElRef;
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);
     const timerRef = React.useRef();
@@ -58,20 +63,17 @@ const FlyoutRoot = (props) => {
         const canOpen = !lockedRef.current && status === "idle";
         if (!canOpen)
             return;
-        onOpen?.();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [status]);
+        onOpenRef.current?.();
+    }, [status, onOpenRef]);
     const handleClose = React.useCallback((options) => {
         const isLocked = triggerType === "click" && !isDismissible();
         const canClose = !isLocked && (status !== "idle" || disabled);
         if (!canClose)
             return;
-        onClose?.();
+        onCloseRef.current?.();
         if (options?.closeParents)
             parentFlyoutContext?.handleClose?.();
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [status, isDismissible, triggerType]);
+    }, [status, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
     /**
      * Trigger event handlers
      */
@@ -174,15 +176,17 @@ const FlyoutRoot = (props) => {
     useIsomorphicLayoutEffect(() => {
         if (status !== "visible" || !flyoutElRef.current)
             return;
+        if (trapFocusRef.current?.trapped)
+            return;
         trapFocusRef.current = new TrapFocus(flyoutElRef.current);
         trapFocusRef.current.trap({
             mode: trapFocusMode,
-            includeTrigger: triggerType === "hover" && trapFocusMode === "content-menu",
+            includeTrigger: triggerType === "hover" && trapFocusMode !== "dialog" && !isSubmenu,
             onNavigateOutside: () => {
                 handleClose();
             },
         });
-    }, [status, triggerType, handleClose, trapFocusMode]);
+    }, [status, triggerType, trapFocusMode]);
     React.useEffect(() => {
         if (!disableHideAnimation && status !== "hidden")
             return;
@@ -229,6 +233,8 @@ const FlyoutRoot = (props) => {
     }), [handleOpen, handleClose, updatePosition]);
     useHotkeys({ Escape: () => handleClose() }, [handleClose]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
+        if (disableCloseOnOutsideClick)
+            return;
         // Clicking outside changes focused element so we don't need to set it back ourselves
         shouldReturnFocusRef.current = false;
         handleClose();