reshaped 3.3.13 → 3.4.0-rc.0

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

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;pointer-events:none;position:absolute}.content.--hover,.inner{pointer-events:all}.inner{opacity:0;transform:scale(.9) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}.content.--hover-disabled{pointer-events:none}
+.content{--rs-flyout-gap:0;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{opacity:0;pointer-events:all;transform:scale(.9) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}

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

@@ -7,6 +7,12 @@ import type { TrapMode } from "../../../utilities/a11y";
 type XSide = "start" | "end";
 type YSide = "top" | "bottom";
 export type Side = XSide | YSide;
+export type CloseReason = "escape-key" | "outside-click"
+/**
+ * Keeping the item selection type here since DropdownMenu items use Flyout context
+ * and not a separate DropdownMenu context
+ */
+ | "item-selection" | "close-button";
 export type Position = `${YSide}` | `${YSide}-${XSide}` | `${XSide}` | `${XSide}-${YSide}`;
 export type Width = "trigger" | string;
 export type Options = {
@@ -31,7 +37,9 @@ export type FlyoutData = {
     position: Position;
 };
 export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
-    updatePosition: () => void;
+    updatePosition: (args?: {
+        sync?: boolean;
+    }) => void;
     render: () => void;
     hide: () => void;
     remove: () => void;
@@ -86,7 +94,9 @@ type BaseProps = {
     originCoordinates?: G.Coordinates;
     children?: React.ReactNode;
     onOpen?: () => void;
-    onClose?: () => void;
+    onClose?: (args: {
+        reason?: CloseReason;
+    }) => void;
     width?: Width;
     contentGap?: number;
     contentShift?: number;
@@ -117,8 +127,9 @@ export type ContextProps = {
     width?: Width;
     triggerElRef?: React.RefObject<HTMLButtonElement | null>;
     flyoutElRef: React.RefObject<HTMLDivElement | null>;
-    handleClose: (options?: {
+    handleClose: (options: {
         closeParents?: boolean;
+        reason?: CloseReason;
     }) => void;
     handleOpen: () => void;
     handleMouseEnter: () => void;

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../../utilities/helpers.js";
+import { classNames, throttleHandler } from "../../../utilities/helpers.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import Portal from "../Portal/index.js";
 import { findClosestRenderContainer } from "../../../utilities/dom/index.js";
@@ -10,9 +10,21 @@ import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, disableContentHover, width, containerRef, isSubmenu, } = useFlyoutContext();
-    const { styles, status, position } = flyout;
+    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, disableContentHover, width, containerRef, isSubmenu, } = useFlyoutContext();
+    const { styles, status, position, updatePosition } = flyout;
     const [mounted, setMounted] = React.useState(false);
+    const closestContainer = React.useMemo(() => {
+        if (!mounted)
+            return;
+        if (!triggerElRef)
+            return;
+        return findClosestRenderContainer({ el: triggerElRef.current });
+    }, [mounted, triggerElRef]);
+    const scrollableRef = (mounted && closestContainer?.el === document.body) ||
+        !closestContainer?.el ||
+        closestContainer.scrollable
+        ? undefined
+        : { current: closestContainer.el };
     useIsomorphicLayoutEffect(() => {
         setMounted(true);
     }, []);
@@ -26,6 +38,28 @@ const FlyoutContent = (props) => {
         el.addEventListener("transitionstart", handleTransitionStart);
         return () => el.removeEventListener("transitionstart", handleTransitionStart);
     }, [handleTransitionStart, flyoutElRef, status]);
+    React.useEffect(() => {
+        if (!closestContainer?.scrollable)
+            return;
+        const triggerEl = triggerElRef?.current;
+        const containerEl = closestContainer.el;
+        const handleScroll = throttleHandler(() => {
+            const triggerBounds = triggerEl?.getBoundingClientRect();
+            const containerBounds = containerEl.getBoundingClientRect();
+            if (triggerBounds &&
+                (triggerBounds.bottom < containerBounds.top ||
+                    triggerBounds.right < containerBounds.left ||
+                    triggerBounds.left > containerBounds.right ||
+                    triggerBounds.top > containerBounds.bottom)) {
+                handleClose({});
+            }
+            else {
+                flyout.updatePosition({ sync: true });
+            }
+        }, 16);
+        closestContainer.el.addEventListener("scroll", handleScroll, { passive: true });
+        return () => closestContainer.el.removeEventListener("scroll", handleScroll);
+    }, [closestContainer, flyout, handleClose, triggerElRef]);
     if (status === "idle" || !mounted)
         return null;
     const contentClassNames = classNames(s.content, triggerType === "hover" && s["--hover"], status === "visible" && s["--visible"], 
@@ -52,10 +86,6 @@ const FlyoutContent = (props) => {
                 ...styles,
                 "--rs-flyout-gap": contentGap,
             }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, "aria-modal": role === "dialog" ? true : undefined, style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));
-    const closestScrollable = triggerElRef && findClosestRenderContainer({ el: triggerElRef.current });
-    const scrollableRef = closestScrollable === document.body || !closestScrollable
-        ? undefined
-        : { current: closestScrollable };
     return _jsx(Portal, { targetRef: containerRef || scrollableRef, children: content });
 };
 export default FlyoutContent;

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

@@ -93,9 +93,10 @@ const FlyoutRoot = (props) => {
         const canClose = !isLocked && (isRendered || disabled);
         if (!canClose)
             return;
-        onCloseRef.current?.();
-        if (options?.closeParents)
-            parentFlyoutContext?.handleClose?.();
+        onCloseRef.current?.({ reason: options.reason });
+        if (options?.closeParents) {
+            parentFlyoutContext?.handleClose?.({});
+        }
     }, [isRendered, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
     /**
      * Trigger event handlers
@@ -111,7 +112,7 @@ const FlyoutRoot = (props) => {
             lockedBlurEffects.current) {
             return;
         }
-        handleClose();
+        handleClose({});
     }, [handleClose]);
     const handleFocus = React.useCallback(() => {
         if (triggerType === "hover" && !checkKeyboardMode())
@@ -142,14 +143,14 @@ const FlyoutRoot = (props) => {
     const handleMouseLeave = React.useCallback(() => {
         cooldown.cool();
         clearTimer();
-        timerRef.current = setTimeout(() => handleClose(), timeouts.mouseLeave);
+        timerRef.current = setTimeout(() => handleClose({}), timeouts.mouseLeave);
     }, [clearTimer, timerRef, handleClose]);
     const handleTriggerClick = React.useCallback(() => {
         if (!isRendered) {
             handleOpen();
         }
         else {
-            handleClose();
+            handleClose({});
         }
     }, [isRendered, handleOpen, handleClose]);
     const handleTriggerMouseDown = React.useCallback(() => {
@@ -236,7 +237,7 @@ const FlyoutRoot = (props) => {
             initialFocusEl: initialFocusRef?.current,
             includeTrigger: triggerType === "hover" && trapFocusMode !== "dialog" && !isSubmenu,
             onNavigateOutside: () => {
-                handleClose();
+                handleClose({});
             },
         });
     }, [status, triggerType, trapFocusMode]);
@@ -276,17 +277,17 @@ const FlyoutRoot = (props) => {
         return () => resizeObserver.disconnect();
     }, [updatePosition, triggerElRef, isRendered]);
     React.useEffect(() => {
-        updatePosition();
+        updatePosition({ sync: true });
     }, [isRTL, updatePosition]);
     /**
      * Imperative methods for controlling Flyout
      */
     React.useImperativeHandle(instanceRef, () => ({
         open: handleOpen,
-        close: handleClose,
+        close: () => handleClose({}),
         updatePosition: () => updatePosition({ sync: true }),
     }), [handleOpen, handleClose, updatePosition]);
-    useHotkeys({ Escape: () => handleClose() }, [handleClose]);
+    useHotkeys({ Escape: () => handleClose({ reason: "escape-key" }) }, [handleClose]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
         if (!isRendered)
             return;
@@ -294,7 +295,7 @@ const FlyoutRoot = (props) => {
             return;
         // Clicking outside changes focused element so we don't need to set it back ourselves
         shouldReturnFocusRef.current = false;
-        handleClose();
+        handleClose({ reason: "outside-click" });
     }, [isRendered]);
     return (_jsx(Provider, { value: {
             id,

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

@@ -5,15 +5,13 @@ import FlyoutControlled from "./FlyoutControlled.js";
 const FlyoutUncontrolled = (props) => {
     const { defaultActive, onClose, onOpen } = props;
     const [active, setActive] = React.useState(defaultActive || false);
-    const handleClose = () => {
+    const handleClose = (args) => {
         setActive(false);
-        if (onClose)
-            onClose();
+        onClose?.(args);
     };
     const handleOpen = () => {
         setActive(true);
-        if (onOpen)
-            onOpen();
+        onOpen?.();
     };
     return (_jsx(FlyoutControlled, { ...props, defaultActive: undefined, active: active, onClose: handleClose, onOpen: handleOpen }));
 };

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

@@ -1,3 +1,3 @@
 export { default } from "./Flyout";
 export { useFlyoutContext } from "./Flyout.context";
-export type { Props as FlyoutProps, Instance as FlyoutInstance, TriggerProps as FlyoutTriggerProps, ContentProps as FlyoutContentProps, } from "./Flyout.types";
+export type { Props as FlyoutProps, Instance as FlyoutInstance, TriggerProps as FlyoutTriggerProps, ContentProps as FlyoutContentProps, CloseReason as FlyoutCloseReason, } from "./Flyout.types";

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

@@ -1,18 +1,84 @@
 import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const position: () => React.JSX.Element;
-export declare const dynamicPosition: () => React.JSX.Element;
-export declare const originCoordinates: () => React.JSX.Element;
-export declare const modes: () => React.JSX.Element;
-export declare const width: () => React.JSX.Element;
-export declare const offset: () => 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 testInsideFixed: () => React.JSX.Element;
-export declare const testDynamicBounds: () => React.JSX.Element;
-export declare const testDisableOutsideClick: () => React.JSX.Element;
-export declare const testScopedTheming: () => React.JSX.Element;
+export declare const position: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const defaultActive: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const active: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const activeFalse: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const modes: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const positionFallbacks: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const originCoordinates: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const width: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const contentGap: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const contentShift: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const disableContentHover: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const disableCloseOnOutsideClick: StoryObj;
+export declare const disableHideAnimation: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const disabled: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+}>;
+export declare const containerRef: StoryObj;
+export declare const initialFocusRef: StoryObj;
+export declare const instanceRef: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const contentAttributes: StoryObj;
+export declare const testShadowDom: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const testInsideFixed: StoryObj;
+export declare const testInsideSticky: StoryObj;
+export declare const testInsideScrollable: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const testDynamicBounds: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const testScopedTheming: {
+    name: string;
+    render: () => React.JSX.Element;
+};