reshaped 3.3.12 → 3.4.0-rc.0

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;
+};