reshaped 3.1.4 → 3.1.6

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

@@ -16,7 +16,8 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../../hooks/useHandlerRef.js";
 const FlyoutRoot = (props) => {
-    const { 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 { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, contentGap = 2, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
+    const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
     const resolvedActive = disabled === true ? false : passedActive;
@@ -33,7 +34,7 @@ const FlyoutRoot = (props) => {
      */
     const triggerElRef = (!parentFlyoutContentContext && parentFlyoutTriggerContext?.triggerElRef) ||
         internalTriggerElRef;
-    const triggerBoundsRef = React.useRef();
+    const triggerBoundsRef = React.useRef(null);
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);
     const timerRef = React.useRef();
@@ -57,11 +58,13 @@ const FlyoutRoot = (props) => {
         position: passedPosition,
         defaultActive: resolvedActive,
         container: containerRef?.current,
-        forcePosition,
+        fallbackPositions,
+        contentGap,
     });
     const { status, updatePosition, render, hide, remove, show } = flyout;
+    const isRendered = status !== "idle";
     // Don't create dismissible queue for hover flyout because they close all together on mouseout
-    const isDismissible = useIsDismissible(triggerType !== "hover" && status !== "idle", flyoutElRef, triggerElRef);
+    const isDismissible = useIsDismissible(triggerType !== "hover" && isRendered, flyoutElRef, triggerElRef);
     const clearTimer = React.useCallback(() => {
         if (timerRef.current)
             clearTimeout(timerRef.current);
@@ -71,20 +74,20 @@ const FlyoutRoot = (props) => {
      * Called from the internal actions
      */
     const handleOpen = React.useCallback(() => {
-        const canOpen = !lockedRef.current && status === "idle";
+        const canOpen = !lockedRef.current && !isRendered;
         if (!canOpen)
             return;
         onOpenRef.current?.();
-    }, [status, onOpenRef]);
+    }, [isRendered, onOpenRef]);
     const handleClose = React.useCallback((options) => {
         const isLocked = triggerType === "click" && !isDismissible();
-        const canClose = !isLocked && (status !== "idle" || disabled);
+        const canClose = !isLocked && (isRendered || disabled);
         if (!canClose)
             return;
         onCloseRef.current?.();
         if (options?.closeParents)
             parentFlyoutContext?.handleClose?.();
-    }, [status, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
+    }, [isRendered, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
     /**
      * Trigger event handlers
      */
@@ -118,24 +121,28 @@ const FlyoutRoot = (props) => {
             hoverTriggeredWithTouchEventRef.current = false;
         }
         else {
-            timerRef.current = setTimeout(handleOpen, cooldown.timer || isSubmenu ? timeouts.mouseEnterShort : timeouts.mouseEnter);
-            if (!isSubmenu && triggerType === "hover")
+            if (groupTimeouts)
                 cooldown.warm();
+            timerRef.current = setTimeout(() => {
+                handleOpen();
+            }, groupTimeouts && cooldown.status === "warming"
+                ? timeouts.mouseEnter
+                : timeouts.mouseEnterShort);
         }
-    }, [clearTimer, timerRef, handleOpen, isSubmenu, triggerType]);
+    }, [clearTimer, timerRef, handleOpen, groupTimeouts]);
     const handleMouseLeave = React.useCallback(() => {
         cooldown.cool();
         clearTimer();
         timerRef.current = setTimeout(() => handleClose(), timeouts.mouseLeave);
     }, [clearTimer, timerRef, handleClose]);
     const handleTriggerClick = React.useCallback(() => {
-        if (status === "idle") {
+        if (!isRendered) {
             handleOpen();
         }
         else {
             handleClose();
         }
-    }, [status, handleOpen, handleClose]);
+    }, [isRendered, handleOpen, handleClose]);
     const handleTriggerMouseDown = React.useCallback(() => {
         const rect = triggerElRef.current?.getBoundingClientRect();
         triggerBoundsRef.current = rect;
@@ -153,6 +160,11 @@ const FlyoutRoot = (props) => {
         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")
@@ -180,14 +192,14 @@ const FlyoutRoot = (props) => {
         if (checkTransitions() &&
             !disableHideAnimation &&
             transitionStartedRef.current &&
-            (cooldown.status !== "warm" || triggerType !== "hover")) {
+            (cooldown.status === "cooling" || !groupTimeouts)) {
             hide();
         }
         else {
             // In case transitions are disabled globally - remove from the DOM immediately
             remove();
         }
-    }, [resolvedActive, render, hide, remove, disableHideAnimation, disabled]);
+    }, [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")
@@ -210,6 +222,7 @@ const FlyoutRoot = (props) => {
         trapFocusRef.current = new TrapFocus(flyoutElRef.current);
         trapFocusRef.current.trap({
             mode: trapFocusMode,
+            initialFocusEl: initialFocusRef?.current,
             includeTrigger: triggerType === "hover" && trapFocusMode !== "dialog" && !isSubmenu,
             onNavigateOutside: () => {
                 handleClose();
@@ -219,7 +232,7 @@ const FlyoutRoot = (props) => {
     React.useEffect(() => {
         if (!disableHideAnimation && status !== "hidden")
             return;
-        if (disableHideAnimation && status !== "idle")
+        if (disableHideAnimation && isRendered)
             return;
         if (trapFocusRef.current?.trapped) {
             /* Locking the popover to not open it again on trigger focus */
@@ -232,7 +245,7 @@ const FlyoutRoot = (props) => {
             trapFocusRef.current.release({ withoutFocusReturn: !shouldReturnFocusRef.current });
             shouldReturnFocusRef.current = true;
         }
-    }, [status, triggerType, disableHideAnimation]);
+    }, [status, isRendered, triggerType, disableHideAnimation]);
     /**
      * Release focus trapping on unmount
      */
@@ -243,12 +256,14 @@ const FlyoutRoot = (props) => {
      * Update position on resize or RTL
      */
     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]);
+    }, [updatePosition, triggerElRef, isRendered]);
     React.useEffect(() => {
         updatePosition();
     }, [isRTL, updatePosition]);

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

@@ -7,6 +7,7 @@ export declare const positions: () => React.JSX.Element;
 export declare const dynamicPosition: () => React.JSX.Element;
 export declare const modes: () => React.JSX.Element;
 export declare const disableFlags: () => React.JSX.Element;
+export declare const initialFocus: () => React.JSX.Element;
 export declare const customPortalTarget: () => React.JSX.Element;
 export declare const testWidthOverflowOnMobile: () => React.JSX.Element;
 export declare const testInsideFixed: () => React.JSX.Element;

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

@@ -6,6 +6,7 @@ import View from "../../../View/index.js";
 import Theme from "../../../Theme/index.js";
 import Button from "../../../Button/index.js";
 import Flyout from "../index.js";
+import TextField from "../../../TextField/index.js";
 export default { title: "Utilities/Internal/Flyout" };
 const Demo = (props) => {
     const { position = "bottom-start", children, ...rest } = props;
@@ -17,7 +18,7 @@ const Demo = (props) => {
 				<div style={{
             background: "var(--rs-color-background-elevation-overlay)",
             padding: "var(--rs-unit-x4)",
-            height: 100,
+            height: 150,
             width: 160,
             borderRadius: "var(--rs-radius-medium)",
             border: "1px solid var(--rs-color-border-neutral-faded)",
@@ -120,6 +121,19 @@ export const disableFlags = () => (<Example>
 			<Demo disableHideAnimation>Content</Demo>
 		</Example.Item>
 	</Example>);
+export const initialFocus = () => {
+    const initialFocusRef = React.useRef(null);
+    return (<Example>
+			<Example.Item title="focuses input on open">
+				<Demo initialFocusRef={initialFocusRef}>
+					<View gap={4}>
+						<Button onClick={() => { }}>Click me</Button>
+						<TextField name="foo" inputAttributes={{ ref: initialFocusRef }}/>
+					</View>
+				</Demo>
+			</Example.Item>
+		</Example>);
+};
 class CustomElement extends window.HTMLElement {
     constructor() {
         super();
@@ -199,36 +213,32 @@ export const testInsideFixed = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const testDynamicBounds = () => {
-    const [left, setLeft] = React.useState("50%");
+    const [left, setLeft] = React.useState(50);
+    const [top, setTop] = React.useState(50);
     const [size, setSize] = React.useState("medium");
     const flyoutRef = React.useRef();
     React.useEffect(() => {
         flyoutRef.current?.updatePosition();
-    }, [left]);
+    }, [left, top]);
     return (<View gap={4}>
 			<View direction="row" gap={2}>
+				<Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>
+				<Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>
+				<Button onClick={() => setTop((prev) => prev - 10)}>Up</Button>
+				<Button onClick={() => setTop((prev) => prev + 10)}>Down</Button>
 				<Button onClick={() => {
-            setLeft("20%");
-        }}>
-					Left
-				</Button>
-				<Button onClick={() => {
-            setLeft("50%");
+            setLeft(50);
+            setTop(50);
         }}>
 					Center
 				</Button>
-				<Button onClick={() => {
-            setLeft("70%");
-        }}>
-					Right
-				</Button>
 				<Button onClick={() => setSize("large")}>Large button</Button>
 				<Button onClick={() => setSize("medium")}>Small button</Button>
 			</View>
 			<View height={100}>
-				<Flyout position="bottom" active instanceRef={flyoutRef}>
+				<Flyout position="bottom" instanceRef={flyoutRef} disableCloseOnOutsideClick fallbackPositions={["top", "bottom"]}>
 					<Flyout.Trigger>
-						{(attributes) => (<div style={{ position: "absolute", left, top: "50%" }}>
+						{(attributes) => (<div style={{ position: "absolute", left: `${left}%`, top: `${top}%` }}>
 								<Button color="primary" attributes={attributes} size={size}>
 									Open
 								</Button>
@@ -239,12 +249,12 @@ export const testDynamicBounds = () => {
             background: "var(--rs-color-background-elevation-overlay)",
             padding: "var(--rs-unit-x4)",
             height: 100,
-            width: 160,
+            minWidth: 160,
             borderRadius: "var(--rs-radius-medium)",
             border: "1px solid var(--rs-color-border-neutral-faded)",
             boxSizing: "border-box",
         }}>
-							{"Content"}
+							Content
 						</div>
 					</Flyout.Content>
 				</Flyout>

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

@@ -8,13 +8,14 @@ type PassedFlyoutOptions = {
     width?: T.Width;
     position?: T.Position;
     defaultActive?: boolean;
-    forcePosition?: boolean;
+    fallbackPositions?: T.Position[];
     container?: HTMLElement | null;
 };
 type UseFlyout = (args: PassedFlyoutOptions & {
     triggerElRef: ElementRef;
     flyoutElRef: ElementRef;
     triggerBoundsRef: React.RefObject<DOMRect | undefined>;
+    contentGap?: number;
 }) => Pick<T.State, "styles" | "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;

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

@@ -1,25 +1,8 @@
 import React from "react";
 import useRTL from "../../../hooks/useRTL.js";
-import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
+import { getClosestFlyoutTarget, getShadowRoot } from "../../../utilities/dom.js";
 import calculatePosition from "./utilities/calculatePosition.js";
-const topPos = ["top-start", "top", "top-end"];
-const bottomPos = ["bottom-start", "bottom", "bottom-end"];
-const startPos = ["start", "start-bottom", "start-top"];
-const endPos = ["end", "end-bottom", "end-top"];
-const order = {
-    top: [...topPos, ...bottomPos, ...endPos, ...startPos],
-    bottom: [...bottomPos, ...topPos, ...endPos, ...startPos],
-    start: [...startPos, ...endPos, ...topPos, ...bottomPos],
-    end: [...endPos, ...startPos, ...topPos, ...bottomPos],
-};
-/**
- * Get an order of positions to try to fit popover on the screen based on its starting position
- */
-const getPositionOrder = (position) => {
-    const types = ["top", "bottom", "start", "end"];
-    const type = types.find((type) => position.startsWith(type)) || "bottom";
-    return order[type];
-};
+import getPositionFallbacks from "./utilities/getPositionFallbacks.js";
 /**
  * Check if element visually fits on the screen
  */
@@ -60,12 +43,13 @@ const resetStyles = {
  * Set position of the target element to fit on the screen
  */
 const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, ...options } = args;
-    const { position, forcePosition, width, container } = options;
+    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentGap = 0, ...options } = args;
+    const { position, fallbackPositions, width, container, lastUsedFallback, onFallback } = options;
     const targetClone = flyoutEl.cloneNode(true);
     const triggerBounds = passedTriggerBounds || triggerEl.getBoundingClientRect();
+    const contentGapModifier = parseInt(getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1"));
     // Reset all styles applied on the previous hook execution
-    targetClone.style = "";
+    targetClone.style.cssText = "";
     Object.keys(resetStyles).forEach((key) => {
         const value = resetStyles[key];
         targetClone.style[key] = value.toString();
@@ -78,8 +62,7 @@ const flyout = (args) => {
             targetClone.style.width = width;
         }
     }
-    const rootNode = triggerEl?.getRootNode();
-    const shadowRoot = rootNode instanceof ShadowRoot ? rootNode : null;
+    const shadowRoot = getShadowRoot(triggerEl);
     // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
     const flyoutBounds = targetClone.getBoundingClientRect();
@@ -89,37 +72,30 @@ const flyout = (args) => {
         top: containerBounds.top + document.documentElement.scrollTop - containerParent.scrollTop,
         left: containerBounds.left + document.documentElement.scrollLeft - containerParent.scrollLeft,
     };
-    let calculated = calculatePosition({ triggerBounds, flyoutBounds, scopeOffset, ...options });
-    if (!fullyVisible(calculated) && !forcePosition) {
-        const order = getPositionOrder(position);
-        const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
-        const test = (testOrder, extraOptions = {}) => {
-            const { fullWidth } = extraOptions;
-            testOrder.some((currentPosition) => {
-                const calculateOptions = {
-                    ...options,
-                    width: fullWidth ? "full" : options.width,
-                    position: currentPosition,
-                };
-                const tested = calculatePosition({
-                    triggerBounds,
-                    flyoutBounds,
-                    scopeOffset,
-                    ...calculateOptions,
-                });
-                if (fullyVisible(tested)) {
-                    calculated = tested;
-                    return true;
-                }
-                return false;
-            });
-        };
-        test(order);
-        if (!fullyVisible(calculated)) {
-            test(mobileOrder, { fullWidth: true });
+    let calculated = null;
+    const testOrder = getPositionFallbacks(position, fallbackPositions);
+    testOrder.some((currentPosition, index) => {
+        const tested = calculatePosition({
+            ...options,
+            triggerBounds,
+            flyoutBounds,
+            scopeOffset,
+            position: currentPosition,
+            contentGap: contentGap * contentGapModifier,
+        });
+        const visible = fullyVisible(tested);
+        const validPosition = visible || fallbackPositions?.length === 0;
+        // Saving first try in case non of the options work
+        if (validPosition || lastUsedFallback === currentPosition) {
+            calculated = tested;
+            onFallback(currentPosition);
         }
+        return validPosition;
+    });
+    if (!calculated) {
+        throw new Error(`Reshaped: Can't calculate styles for the ${position} position`);
     }
-    targetClone.parentNode.removeChild(targetClone);
+    targetClone.parentNode?.removeChild(targetClone);
     return calculated;
 };
 const flyoutReducer = (state, action) => {
@@ -157,8 +133,13 @@ const flyoutReducer = (state, action) => {
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBoundsRef, ...options } = args;
-    const { position: defaultPosition = "bottom", forcePosition, width, container } = options;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, ...options } = args;
+    const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
+    const lastUsedFallbackRef = React.useRef(defaultPosition);
+    // Memo the array internally to avoid new arrays triggering useCallback
+    const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fallbackPositions?.join(" ")]);
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
@@ -177,6 +158,9 @@ const useFlyout = (args) => {
     const remove = React.useCallback(() => {
         dispatch({ type: "remove" });
     }, []);
+    const handleFallback = React.useCallback((position) => {
+        lastUsedFallbackRef.current = position;
+    }, []);
     const updatePosition = React.useCallback((options) => {
         if (!triggerElRef.current || !flyoutElRef.current)
             return;
@@ -186,21 +170,26 @@ const useFlyout = (args) => {
             triggerBounds: triggerBoundsRef.current,
             width,
             position: defaultPosition,
-            forcePosition,
+            fallbackPositions: cachedFallbackPositions,
+            lastUsedFallback: lastUsedFallbackRef.current,
+            onFallback: handleFallback,
             rtl: isRTL,
             container,
+            contentGap,
         });
         if (nextFlyoutData)
             dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
     }, [
         container,
         defaultPosition,
-        forcePosition,
+        cachedFallbackPositions,
         isRTL,
         flyoutElRef,
         triggerElRef,
         triggerBoundsRef,
         width,
+        contentGap,
+        handleFallback,
     ]);
     React.useEffect(() => {
         if (state.status === "rendered")

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

@@ -16,24 +16,29 @@ const centerBySize = (originSize, targetSize) => {
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width } = args;
+    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width, contentGap = 0, } = args;
+    const isFullWidth = width === "full" || width === "100%";
     let left = 0;
     let top = 0;
     let position = passedPosition;
     if (rtl)
         position = getRTLPosition(position);
-    if (width === "full" || width === "trigger") {
+    if (isFullWidth || width === "trigger") {
         position = position.includes("top") ? "top" : "bottom";
     }
+    const isHorizontalPosition = position.match(/^(start|end)/);
+    const isVerticalPosition = position.match(/^(top|bottom)/);
+    const flyoutWidth = flyoutBounds.width + (isHorizontalPosition ? contentGap : 0);
+    const flyoutHeight = flyoutBounds.height + (isVerticalPosition ? contentGap : 0);
     switch (position) {
         case "bottom":
         case "top":
-            left = centerBySize(triggerBounds.width, flyoutBounds.width) + triggerBounds.left;
+            left = centerBySize(triggerBounds.width, flyoutWidth) + triggerBounds.left;
             break;
         case "start":
         case "start-top":
         case "start-bottom":
-            left = triggerBounds.left - flyoutBounds.width;
+            left = triggerBounds.left - flyoutWidth;
             break;
         case "end":
         case "end-top":
@@ -46,7 +51,7 @@ const calculatePosition = (args) => {
             break;
         case "top-end":
         case "bottom-end":
-            left = triggerBounds.right - flyoutBounds.width;
+            left = triggerBounds.right - flyoutWidth;
             break;
         default:
             break;
@@ -55,7 +60,7 @@ const calculatePosition = (args) => {
         case "top":
         case "top-start":
         case "top-end":
-            top = triggerBounds.top - flyoutBounds.height;
+            top = triggerBounds.top - flyoutHeight;
             break;
         case "bottom":
         case "bottom-start":
@@ -64,7 +69,7 @@ const calculatePosition = (args) => {
             break;
         case "start":
         case "end":
-            top = centerBySize(triggerBounds.height, flyoutBounds.height) + triggerBounds.top;
+            top = centerBySize(triggerBounds.height, flyoutHeight) + triggerBounds.top;
             break;
         case "start-top":
         case "end-top":
@@ -72,7 +77,7 @@ const calculatePosition = (args) => {
             break;
         case "start-bottom":
         case "end-bottom":
-            top = triggerBounds.bottom - flyoutBounds.height;
+            top = triggerBounds.bottom - flyoutHeight;
             break;
         default:
             break;
@@ -82,9 +87,9 @@ const calculatePosition = (args) => {
     }
     top = Math.round(top + (window.scrollY || 0) - scopeOffset.top);
     left = Math.round(left + (window.scrollX || 0) - scopeOffset.left);
-    let widthStyle = Math.ceil(flyoutBounds.width);
-    const height = Math.ceil(flyoutBounds.height);
-    if (width === "full") {
+    let widthStyle = Math.ceil(flyoutWidth);
+    const height = Math.ceil(flyoutHeight);
+    if (isFullWidth) {
         left = SCREEN_OFFSET;
         widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
     }

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

@@ -1,5 +1,5 @@
 declare class Cooldown {
-    status: "cold" | "warm" | "cooling";
+    status: "warming" | "warm" | "cooling" | "cold";
     timer?: ReturnType<typeof setTimeout>;
     warm: () => void;
     cool: () => void;

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

@@ -1,18 +1,30 @@
+import * as timeouts from "../Flyout.constants.js";
 class Cooldown {
     status = "cold";
     timer;
     warm = () => {
         clearTimeout(this.timer);
-        this.status = "warm";
+        if (this.status === "cooling") {
+            this.status = "warm";
+            return;
+        }
+        this.status = "warming";
+        this.timer = setTimeout(() => {
+            this.status = "warm";
+            this.timer = undefined;
+        }, timeouts.mouseEnterShort);
     };
     cool = () => {
+        clearTimeout(this.timer);
+        if (this.status === "warming") {
+            this.status = "cold";
+            return;
+        }
         this.status = "cooling";
-        const currentTimer = setTimeout(() => {
+        this.timer = setTimeout(() => {
             this.status = "cold";
-            if (currentTimer === this.timer)
-                this.timer = undefined;
+            this.timer = undefined;
         }, 500);
-        this.timer = currentTimer;
     };
 }
 export default new Cooldown();

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

@@ -0,0 +1,3 @@
+import type * as T from "../Flyout.types";
+declare const getPositionFallbacks: (position: T.Position, availableFallbacks?: T.Position[]) => T.Position[];
+export default getPositionFallbacks;

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

@@ -0,0 +1,39 @@
+// All available positions for each side
+const positions = {
+    top: ["top-start", "top-end", "top"],
+    bottom: ["bottom-start", "bottom-end", "bottom"],
+    start: ["start-top", "start-bottom", "start"],
+    end: ["end-top", "end-bottom", "end"],
+};
+// Order of sides to try depending on the starting side
+const fallbackOrder = {
+    top: ["bottom", "start", "end"],
+    bottom: ["top", "end", "start"],
+    start: ["end", "top", "bottom"],
+    end: ["start", "bottom", "top"],
+};
+// Get an order of positions to try to fit flyout on the screen based on its starting position
+const getPositionFallbacks = (position, availableFallbacks) => {
+    const result = [];
+    const chunks = position.split("-");
+    const [firstChunk] = chunks;
+    const passedPositionOrder = positions[firstChunk];
+    const startingFallbackIndex = passedPositionOrder.indexOf(position);
+    const fallbackIndexOrder = [startingFallbackIndex];
+    passedPositionOrder.forEach((_, index) => {
+        if (index === startingFallbackIndex)
+            return;
+        fallbackIndexOrder.push(index);
+    });
+    [firstChunk, ...fallbackOrder[firstChunk]].forEach((fallbackSide) => {
+        const fallbackOrder = positions[fallbackSide];
+        fallbackIndexOrder.forEach((index) => {
+            const position = fallbackOrder[index];
+            if (availableFallbacks?.indexOf(position) === -1)
+                return;
+            result.push(position);
+        });
+    });
+    return result;
+};
+export default getPositionFallbacks;

package/dist/config/tailwind.d.ts

@@ -1,2 +1,2 @@
 import type { ThemeDefinition } from "../themes/_generator/tokens/types";
-export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderRadius" | "backgroundColor" | "borderColor" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;
+export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderRadius" | "backgroundColor" | "borderColor" | "boxShadow" | "textColor" | "colors" | "spacing" | "screens", Record<string, string>>;

package/dist/hooks/_private/useOnClickOutside.js

@@ -7,10 +7,11 @@ const useOnClickOutside = (refs, handler) => {
             return;
         const handleClick = (event) => {
             let isInside = false;
+            const clickedEl = event.composedPath()[0];
             refs.forEach((elRef) => {
                 if (!elRef.current ||
-                    elRef.current === event.target ||
-                    elRef.current.contains(event.target)) {
+                    elRef.current === clickedEl ||
+                    elRef.current.contains(clickedEl)) {
                     isInside = true;
                 }
             });