reshaped 3.9.0-canary.9 → 3.9.1-canary.2

package/dist/components/Flyout/FlyoutContent.js

@@ -3,15 +3,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import Portal from "../_private/Portal/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { findClosestPositionContainer, findClosestScrollableContainer } from "../../utilities/dom/index.js";
-import { rafThrottle } from "../../utilities/helpers.js";
+import { findClosestPositionContainer } from "../../utilities/dom/index.js";
 import { classNames } from "../../utilities/props.js";
 import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 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, contentMaxHeight, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
     const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {
@@ -19,56 +18,12 @@ const FlyoutContent = (props) => {
             return null;
         if (!triggerElRef)
             return null;
-        // eslint-disable-next-line react-hooks/refs
         return findClosestPositionContainer({ el: triggerElRef.current });
     }, [mounted, triggerElRef]);
-    const closestScrollableContainer = React.useMemo(() => {
-        if (!mounted)
-            return;
-        // eslint-disable-next-line react-hooks/refs
-        if (!triggerElRef?.current)
-            return;
-        // eslint-disable-next-line react-hooks/refs
-        return findClosestScrollableContainer({ el: triggerElRef.current });
-    }, [mounted, triggerElRef]);
     const containerRef = passedContainerRef || { current: closestFixedContainer };
     useIsomorphicLayoutEffect(() => {
         setMounted(true);
     }, []);
-    /**
-     * transitionStart doesn't exist as a jsx event handler and needs to be handled with vanilla js
-     */
-    React.useEffect(() => {
-        const el = flyoutElRef.current;
-        if (!el)
-            return;
-        el.addEventListener("transitionstart", handleTransitionStart);
-        return () => el.removeEventListener("transitionstart", handleTransitionStart);
-    }, [handleTransitionStart, flyoutElRef, status]);
-    React.useEffect(() => {
-        if (status !== "visible")
-            return;
-        if (!closestScrollableContainer)
-            return;
-        const triggerEl = triggerElRef?.current;
-        const containerEl = closestScrollableContainer;
-        const handleScroll = rafThrottle(() => {
-            const triggerBounds = triggerEl?.getBoundingClientRect();
-            const containerBounds = containerEl.getBoundingClientRect();
-            if (triggerBounds &&
-                (triggerBounds.top < containerBounds.top ||
-                    triggerBounds.left < containerBounds.left ||
-                    triggerBounds.right > containerBounds.right ||
-                    triggerBounds.bottom > containerBounds.bottom)) {
-                handleClose({});
-            }
-            else {
-                flyout.updatePosition({ sync: true, fallback: false });
-            }
-        });
-        closestScrollableContainer.addEventListener("scroll", handleScroll, { passive: true });
-        return () => closestScrollableContainer.removeEventListener("scroll", handleScroll);
-    }, [closestScrollableContainer, flyout, status, handleClose, triggerElRef]);
     if (status === "idle" || !mounted)
         return null;
     const rootClassNames = classNames(s.content, triggerType === "hover" && s["--hover"], status === "visible" && s["--visible"], 
@@ -95,9 +50,9 @@ const FlyoutContent = (props) => {
         role = "menubar";
     }
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
-                "--rs-flyout-gap": contentGap,
                 "--rs-flyout-max-h": contentMaxHeight,
-            }, 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 }) }) }));
+                "--rs-flyout-max-w": contentMaxWidth,
+            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...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 });
 };
 FlyoutContent.displayName = "Flyout.Content";

package/dist/components/Flyout/FlyoutControlled.js

@@ -2,30 +2,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
+import usePrevious from "../../hooks/_private/usePrevious.js";
 import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useOnClickOutside from "../../hooks/useOnClickOutside.js";
-import useRTL from "../../hooks/useRTL.js";
 import { TrapFocus, checkKeyboardMode } from "../../utilities/a11y/index.js";
-import { checkTransitions, onNextFrame } from "../../utilities/animation.js";
+import { checkTransitions } from "../../utilities/animation.js";
 import * as timeouts from "./Flyout.constants.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useFlyout from "./useFlyout.js";
 import cooldown from "./utilities/cooldown.js";
+import { createSafeArea } from "./utilities/safeArea.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, contentMaxHeight, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, 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);
-    const resolvedActive = disabled === true ? false : passedActive;
+    const active = disabled === true ? false : passedActive;
+    const prevActive = usePrevious(active);
     const parentFlyoutContext = useFlyoutContext();
     const { elRef: parentTriggerRef } = useFlyoutTriggerContext() || {};
     const { elRef: parentContentRef } = useFlyoutContentContext() || {};
     const isSubmenu = parentFlyoutContext.trapFocusMode === "action-menu" ||
         parentFlyoutContext.trapFocusMode === "content-menu";
-    const [isRTL] = useRTL();
     const internalTriggerElRef = React.useRef(null);
     /**
      * Reuse the parent trigger ref in case we render nested triggers
@@ -34,20 +35,14 @@ const FlyoutControlled = (props) => {
      * Resolving the same inside another Flyout.Content should reset the inheritance
      * For example, if you have a tooltip -> popover inside another popover.content, tooltip shouldn't use its parent context anymore
      */
-    const isParentTriggerInsideFlyout = 
-    // eslint-disable-next-line react-hooks/refs
-    !!parentTriggerRef?.current && parentContentRef?.current?.contains(parentTriggerRef.current);
+    const isParentTriggerInsideFlyout = !!parentTriggerRef?.current && parentContentRef?.current?.contains(parentTriggerRef.current);
     const tryParentTrigger = !parentContentRef || isParentTriggerInsideFlyout;
     const triggerElRef = (tryParentTrigger && parentTriggerRef) || internalTriggerElRef;
-    const triggerBoundsRef = React.useRef(null);
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);
     const timerRef = React.useRef(null);
     const trapFocusRef = React.useRef(null);
     const lockedRef = React.useRef(false);
-    // Check if transition had enough time to start when opening a flyout
-    // In some cases there is not enough time to start, like when you're holding tab key
-    const transitionStartedRef = React.useRef(false);
     // Lock blur event while pressing anywhere inside the flyout content
     const lockedBlurEffects = React.useRef(false);
     // Focus shouldn't return back to the trigger when user intentionally clicks outside the flyout
@@ -55,23 +50,24 @@ 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);
-    // eslint-disable-next-line react-hooks/refs
+    // Cleanup function for safe area tracking
+    const safeAreaRef = React.useRef(null);
+    const originCoordinatesRef = React.useRef(originCoordinates ?? null);
+    originCoordinatesRef.current = originCoordinates ?? null;
     const flyout = useFlyout({
         triggerElRef: positionRef ?? triggerElRef,
         flyoutElRef,
-        // eslint-disable-next-line react-hooks/refs
-        triggerBounds: originCoordinates ?? triggerBoundsRef.current,
+        triggerCoordinatesRef: originCoordinatesRef,
         width,
         position: passedPosition,
-        defaultActive: resolvedActive,
-        // eslint-disable-next-line react-hooks/refs
+        defaultActive: active,
         container: containerRef?.current,
         fallbackPositions,
         fallbackAdjustLayout,
-        fallbackMinWidth,
         fallbackMinHeight,
         contentGap,
         contentShift,
+        onClose: onCloseRef.current,
     });
     const { status, updatePosition, render, hide, remove, show } = flyout;
     const isRendered = status !== "idle";
@@ -85,6 +81,25 @@ const FlyoutControlled = (props) => {
         if (timerRef.current)
             clearTimeout(timerRef.current);
     }, []);
+    /**
+     * Disable all triggers while mouse is moving over the safe area
+     */
+    const disableTriggers = React.useCallback(() => {
+        if (triggerType !== "hover")
+            return;
+        document.querySelectorAll("[data-rs-flyout-active]").forEach((el) => {
+            if (el === triggerElRef.current)
+                return;
+            el.style.pointerEvents = "none";
+        });
+    }, [triggerElRef, triggerType]);
+    const enableTriggers = React.useCallback(() => {
+        if (triggerType !== "hover")
+            return;
+        document.querySelectorAll("[data-rs-flyout-active]").forEach((el) => {
+            el.style.removeProperty("pointer-events");
+        });
+    }, [triggerType]);
     /**
      * Component open/close handlers
      * Called from the internal actions
@@ -95,17 +110,27 @@ const FlyoutControlled = (props) => {
         if (isRendered && triggerType !== "hover")
             return;
         onOpenRef.current?.();
-    }, [onOpenRef, isRendered, triggerType]);
+        disableTriggers();
+    }, [onOpenRef, isRendered, triggerType, disableTriggers]);
     const handleClose = React.useCallback((options) => {
         const isLocked = triggerType === "click" && !isDismissible();
         const canClose = !isLocked && (isRendered || disabled);
         if (!canClose)
             return;
         onCloseRef.current?.({ reason: options.reason });
+        enableTriggers();
         if (options?.closeParents) {
-            parentFlyoutContext?.handleClose?.({});
+            parentFlyoutContext?.handleClose?.({ closeParents: true, reason: options.reason });
         }
-    }, [isRendered, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
+    }, [
+        isRendered,
+        isDismissible,
+        triggerType,
+        onCloseRef,
+        disabled,
+        parentFlyoutContext,
+        enableTriggers,
+    ]);
     /**
      * Trigger event handlers
      */
@@ -132,7 +157,7 @@ const FlyoutControlled = (props) => {
             return;
         hoverTriggeredWithTouchEventRef.current = true;
     }, [triggerType]);
-    const handleMouseEnter = React.useCallback(() => {
+    const handleContentMouseEnter = React.useCallback(() => {
         clearTimer();
         if (hoverTriggeredWithTouchEventRef.current) {
             handleOpen();
@@ -146,15 +171,40 @@ const FlyoutControlled = (props) => {
             }, groupTimeouts && cooldown.status === "warming" ? timeouts.mouseEnter : 0);
         }
     }, [clearTimer, handleOpen, groupTimeouts]);
+    const handleTriggerMouseEnter = React.useCallback((e) => {
+        if (e.currentTarget === triggerElRef.current) {
+            safeAreaRef.current?.cleanup();
+        }
+        handleContentMouseEnter();
+    }, [triggerElRef, handleContentMouseEnter]);
     const handleMouseLeave = React.useCallback((e) => {
-        if (e.relatedTarget === flyoutElRef.current)
+        if (e.relatedTarget === flyoutElRef.current ||
+            (e.relatedTarget instanceof Node && flyoutElRef.current?.contains(e.relatedTarget)))
             return;
-        if (e.relatedTarget === triggerElRef.current)
+        if (e.relatedTarget === triggerElRef.current ||
+            (e.relatedTarget instanceof Node && triggerElRef.current?.contains(e.relatedTarget)))
             return;
         cooldown.cool();
         clearTimer();
-        handleClose({});
-    }, [clearTimer, handleClose, triggerElRef, flyoutElRef]);
+        safeAreaRef.current?.cleanup();
+        if (triggerType === "hover" && isRendered) {
+            // Safe area coordinates are defined based on the trigger mouse out, even when returning mouse from content to trigger
+            const origin = e.currentTarget === flyoutElRef.current && safeAreaRef.current?.origin
+                ? safeAreaRef.current.origin
+                : { x: e.clientX, y: e.clientY };
+            const cleanup = createSafeArea({
+                contentRef: flyoutElRef,
+                triggerRef: triggerElRef,
+                position: flyout.position,
+                onClose: () => handleClose({}),
+                origin,
+            });
+            safeAreaRef.current = { origin, cleanup };
+        }
+        else {
+            handleClose({});
+        }
+    }, [clearTimer, handleClose, triggerElRef, flyoutElRef, triggerType, isRendered, flyout.position]);
     const handleTriggerClick = React.useCallback(() => {
         if (!isRendered) {
             handleOpen();
@@ -163,13 +213,6 @@ const FlyoutControlled = (props) => {
             handleClose({});
         }
     }, [isRendered, handleOpen, handleClose]);
-    const handleTriggerMouseDown = React.useCallback(() => {
-        const triggerEl = positionRef?.current ?? triggerElRef.current;
-        const rect = triggerEl?.getBoundingClientRect();
-        if (!rect)
-            return;
-        triggerBoundsRef.current = rect;
-    }, [triggerElRef, positionRef]);
     const handleContentMouseDown = () => {
         lockedBlurEffects.current = true;
         hoverTriggeredWithTouchEventRef.current = true;
@@ -177,44 +220,27 @@ const FlyoutControlled = (props) => {
     const handleContentMouseUp = () => {
         lockedBlurEffects.current = false;
     };
-    const handleTransitionStart = React.useCallback((e) => {
-        if (!resolvedActive)
-            return;
-        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
-            return;
-        transitionStartedRef.current = true;
-        /**
-         * After animation has started, we're sure about the correct bounds
-         * so drop the cache to make flyout work when trigger moves around
-         */
-        triggerBoundsRef.current = null;
-    }, [resolvedActive]);
     const handleTransitionEnd = React.useCallback((e) => {
         if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
             return;
-        if (status === "hidden") {
-            transitionStartedRef.current = false;
+        if (status === "hidden")
             remove();
-        }
     }, [remove, status]);
     /**
      * Control the display based on the props
      */
     useIsomorphicLayoutEffect(() => {
-        if (resolvedActive) {
+        if (active) {
             render();
             return;
         }
         if (disabled)
             cooldown.cool();
-        /**
-         * Check that transitions are enabled and it has been triggered on tooltip open
-         * - keyboard focus navigation could move too fast and ignore the transitions completely
-         * - warmed up tooltips get removed instantly
-         */
+        // Prevent calling hide on component mount
+        if (prevActive === active)
+            return;
         if (checkTransitions() &&
             !disableHideAnimation &&
-            transitionStartedRef.current &&
             (cooldown.status === "cooling" || !groupTimeouts)) {
             hide();
         }
@@ -222,11 +248,10 @@ const FlyoutControlled = (props) => {
             // In case transitions are disabled globally - remove from the DOM immediately
             remove();
         }
-    }, [resolvedActive, render, hide, remove, disableHideAnimation, disabled, groupTimeouts]);
-    React.useEffect(() => {
-        // Wait after positioning before show is triggered to animate flyout from the right side
-        if (status === "positioned")
-            onNextFrame(() => show());
+    }, [active, prevActive, render, hide, remove, disableHideAnimation, disabled, groupTimeouts]);
+    useIsomorphicLayoutEffect(() => {
+        if (status === "rendered")
+            show();
     }, [status, show]);
     /**
      * Handle focus trap
@@ -264,7 +289,7 @@ const FlyoutControlled = (props) => {
             return;
         if (trapFocusRef.current?.trapped) {
             /* Locking the popover to not open it again on trigger focus */
-            if (triggerType === "hover") {
+            if (triggerType === "hover" && checkKeyboardMode()) {
                 lockedRef.current = true;
                 setTimeout(() => {
                     lockedRef.current = false;
@@ -281,27 +306,20 @@ const FlyoutControlled = (props) => {
         return () => trapFocusRef.current?.release();
     }, []);
     /**
-     * Update position on resize or RTL
+     * Clean up safe polygon tracking on unmount or when flyout closes
      */
     React.useEffect(() => {
         if (!isRendered)
-            return;
-        const resizeObserver = new ResizeObserver(() => updatePosition({ sync: true }));
-        resizeObserver.observe(document.body);
-        if (triggerElRef.current)
-            resizeObserver.observe(triggerElRef.current);
-        return () => resizeObserver.disconnect();
-    }, [updatePosition, triggerElRef, isRendered]);
-    React.useEffect(() => {
-        updatePosition({ sync: true });
-    }, [isRTL, updatePosition]);
+            safeAreaRef.current?.cleanup();
+        return () => safeAreaRef.current?.cleanup();
+    }, [isRendered]);
     /**
      * Imperative methods for controlling Flyout
      */
     React.useImperativeHandle(instanceRef, () => ({
         open: handleOpen,
         close: () => handleClose({}),
-        updatePosition: () => updatePosition({ sync: true }),
+        updatePosition: () => updatePosition(),
     }), [handleOpen, handleClose, updatePosition]);
     useHotkeys({ Escape: () => handleClose({ reason: "escape-key" }) }, [handleClose]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
@@ -321,12 +339,11 @@ const FlyoutControlled = (props) => {
             handleOpen,
             handleFocus,
             handleBlur,
-            handleMouseEnter,
+            handleTriggerMouseEnter,
+            handleContentMouseEnter,
             handleMouseLeave,
             handleTouchStart,
-            handleTransitionStart,
             handleTransitionEnd,
-            handleMouseDown: handleTriggerMouseDown,
             handleClick: handleTriggerClick,
             handleContentMouseDown,
             handleContentMouseUp,
@@ -336,6 +353,7 @@ const FlyoutControlled = (props) => {
             contentAttributes,
             contentGap,
             contentMaxHeight,
+            contentMaxWidth,
             containerRef,
             disableContentHover,
             autoFocus,

package/dist/components/Flyout/FlyoutTrigger.js

@@ -3,17 +3,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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();
+    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleTriggerMouseEnter, handleMouseLeave, handleTouchStart, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
     const active = flyout.status !== "idle";
     const childrenAttributes = {
         ref: triggerElRef,
+        "data-rs-flyout-active": active,
     };
     if (triggerType === "click" || trapFocusMode === "action-menu") {
         childrenAttributes.onClick = handleClick;
-        childrenAttributes.onMouseDown = handleMouseDown;
     }
     if (triggerType === "hover") {
-        childrenAttributes.onMouseEnter = handleMouseEnter;
+        childrenAttributes.onMouseEnter = handleTriggerMouseEnter;
         childrenAttributes.onMouseLeave = handleMouseLeave;
         childrenAttributes.onTouchStart = handleTouchStart;
     }

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

@@ -1,15 +1,14 @@
-import React from "react";
 import type * as T from "./Flyout.types";
 import type * as G from "../../types/global";
-type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift"> & {
+type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "fallbackAdjustLayout" | "fallbackMinHeight" | "contentGap" | "contentShift" | "onClose"> & {
     fallbackPositions?: T.Position[];
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;
-    triggerBounds?: DOMRect | G.Coordinates | null;
+    triggerCoordinatesRef: React.RefObject<DOMRect | G.Coordinates | null>;
 }) => Pick<T.State, "position" | "status"> & {
     updatePosition: (options?: {
-        sync?: boolean;
+        fallback?: boolean;
     }) => void;
     render: () => void;
     hide: () => void;

package/dist/components/Flyout/useFlyout.js

@@ -1,113 +1,95 @@
-import React from "react";
-import useRTL from "../../hooks/useRTL.js";
-import flyout from "./utilities/flyout.js";
-const flyoutReducer = (state, action) => {
-    switch (action.type) {
-        case "render":
-            // Disable events before it's positioned to avoid mouseleave getting triggered
-            return { ...state, status: "rendered" };
-        case "position":
-            return {
-                ...state,
-                status: action.payload.sync ? state.status : "positioned",
-                position: action.payload.position,
-            };
-        case "show":
-            // Checking because we're positioning inside nextAnimationFrame
-            if (state.status !== "positioned")
-                return state;
-            return { ...state, status: "visible" };
-        case "hide":
-            return { ...state, status: "hidden" };
-        case "remove":
-            return { ...state, status: "idle" };
-        default:
-            throw new Error("[Reshaped] Invalid flyout reducer type");
-    }
-};
+import { Flyout } from "@reshaped/utilities";
+import { useCallback, useMemo, useRef, useState } from "react";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
-    const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, width, container, } = options;
-    const lastUsedPositionRef = React.useRef(defaultPosition);
+    const { triggerElRef, flyoutElRef, triggerCoordinatesRef, contentGap, contentShift, onClose, ...options } = args;
+    const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinHeight, width, container, } = options;
+    const [status, setStatus] = useState("idle");
+    const [position, setPosition] = useState(defaultPosition);
+    const flyoutRef = useRef(null);
     // Memo the array internally to avoid new arrays triggering useCallback
-    const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
+    const cachedFallbackPositions = useMemo(() => fallbackPositions, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [fallbackPositions?.join(" ")]);
-    const [isRTL] = useRTL();
-    const [state, dispatch] = React.useReducer(flyoutReducer, {
-        position: defaultPosition,
-        status: "idle",
-    });
-    const render = React.useCallback(() => {
-        dispatch({ type: "render" });
-    }, []);
-    const show = React.useCallback(() => {
-        dispatch({ type: "show" });
-    }, []);
-    const hide = React.useCallback(() => {
-        dispatch({ type: "hide" });
+    const render = useCallback(() => {
+        setStatus("rendered");
     }, []);
-    const remove = React.useCallback(() => {
-        dispatch({ type: "remove" });
+    const hide = useCallback(() => {
+        setStatus("hidden");
     }, []);
-    const handlePosition = React.useCallback((position) => {
-        lastUsedPositionRef.current = position;
-    }, []);
-    const updatePosition = React.useCallback((options) => {
+    const getFlyoutOptions = useCallback(() => {
         if (!flyoutElRef.current)
             return;
-        const changePositon = options?.fallback !== false;
-        const nextFlyoutData = flyout({
-            triggerEl: triggerElRef.current,
-            flyoutEl: flyoutElRef.current,
-            triggerBounds,
+        const baseUnit = getComputedStyle(flyoutElRef.current).getPropertyValue("--rs-unit-x1");
+        const unitModifier = baseUnit ? parseInt(baseUnit) : 4;
+        const handleClose = () => {
+            onClose?.({});
+            hide();
+        };
+        return {
+            trigger: triggerElRef.current,
+            content: flyoutElRef.current,
+            container,
+            triggerCoordinates: triggerCoordinatesRef.current,
             width,
-            position: changePositon ? defaultPosition : lastUsedPositionRef.current,
-            fallbackPositions: changePositon ? cachedFallbackPositions : [],
+            position: defaultPosition,
+            fallbackPositions: cachedFallbackPositions,
             fallbackAdjustLayout,
-            fallbackMinWidth,
             fallbackMinHeight,
-            lastUsedPosition: lastUsedPositionRef.current,
-            onPositionChoose: handlePosition,
-            rtl: isRTL,
-            container,
-            contentGap,
-            contentShift,
-        });
-        if (nextFlyoutData) {
-            dispatch({
-                type: "position",
-                payload: { ...nextFlyoutData, sync: options?.sync },
-            });
-        }
+            contentGap: (contentGap ?? 0) * unitModifier,
+            contentShift: (contentShift ?? 0) * unitModifier,
+            onClose: handleClose,
+        };
     }, [
+        cachedFallbackPositions,
         container,
+        contentGap,
+        contentShift,
         defaultPosition,
-        cachedFallbackPositions,
         fallbackAdjustLayout,
-        isRTL,
-        flyoutElRef,
+        fallbackMinHeight,
+        triggerCoordinatesRef,
         triggerElRef,
-        triggerBounds,
         width,
-        contentGap,
-        contentShift,
-        handlePosition,
-        fallbackMinWidth,
-        fallbackMinHeight,
+        hide,
+        onClose,
+        flyoutElRef,
     ]);
-    React.useEffect(() => {
-        if (state.status === "rendered")
-            updatePosition();
-    }, [state.status, updatePosition]);
-    return React.useMemo(() => ({
-        position: state.position,
-        status: state.status,
+    const show = useCallback(() => {
+        const flyoutOptions = getFlyoutOptions();
+        if (!flyoutOptions)
+            return;
+        flyoutRef.current = new Flyout(flyoutOptions);
+        const result = flyoutRef.current.open();
+        setPosition(result.position);
+        setStatus("visible");
+    }, [getFlyoutOptions]);
+    const remove = useCallback(() => {
+        if (!flyoutRef.current)
+            return;
+        flyoutRef.current.close();
+        setStatus("idle");
+    }, []);
+    const updatePosition = useCallback(() => {
+        const flyoutOptions = getFlyoutOptions();
+        if (!flyoutRef.current)
+            return;
+        if (!flyoutOptions)
+            return;
+        const result = flyoutRef.current.update(flyoutOptions);
+        setPosition(result.position);
+    }, [getFlyoutOptions]);
+    useIsomorphicLayoutEffect(() => {
+        updatePosition();
+    }, [defaultPosition]);
+    return useMemo(() => ({
+        position,
+        status,
         updatePosition,
         render,
         hide,
         remove,
         show,
-    }), [render, updatePosition, hide, remove, show, state.position, state.status]);
+    }), [render, updatePosition, hide, remove, show, position, status]);
 };
 export default useFlyout;