[popups] Refine OpenChangeReason

docs/reference/generated/alert-dialog-root.json

@@ -12,7 +12,7 @@
       "description": "Whether the dialog is currently open."
     },
     "onOpenChange": {
-      "type": "((open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void)",
+      "type": "(open: boolean, event?: Event, reason?: AlertDialog.Root.OpenChangeReason) => void",
       "description": "Event handler called when the dialog is opened or closed."
     },
     "actionsRef": {

docs/reference/generated/dialog-root.json

@@ -12,7 +12,7 @@
       "description": "Whether the dialog is currently open."
     },
     "onOpenChange": {
-      "type": "((open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void)",
+      "type": "(open: boolean, event?: Event, reason?: Dialog.Root.OpenChangeReason) => void",
       "description": "Event handler called when the dialog is opened or closed."
     },
     "actionsRef": {

docs/reference/generated/menu-root.json

@@ -12,11 +12,11 @@
       "description": "Whether the menu is currently open."
     },
     "onOpenChange": {
-      "type": "((open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void)",
+      "type": "(open: boolean, event?: Event, reason?: Menu.Root.OpenChangeReason) => void",
       "description": "Event handler called when the menu is opened or closed."
     },
     "actionsRef": {
-      "type": "RefObject<{ unmount: () => void; }>",
+      "type": "RefObject<Actions>",
       "description": "A ref to imperative actions.\n- `unmount`: When specified, the menu will not be unmounted when closed.\nInstead, the `unmount` function must be called to unmount the menu manually.\nUseful when the menu's animation is controlled by an external library."
     },
     "closeParentOnEsc": {

docs/reference/generated/popover-root.json

@@ -12,7 +12,7 @@
       "description": "Whether the popover is currently open."
     },
     "onOpenChange": {
-      "type": "((open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void)",
+      "type": "(open: boolean, event?: Event, reason?: Popover.Root.OpenChangeReason) => void",
       "description": "Event handler called when the popover is opened or closed."
     },
     "actionsRef": {

docs/reference/generated/preview-card-root.json

@@ -12,7 +12,7 @@
       "description": "Whether the preview card is currently open."
     },
     "onOpenChange": {
-      "type": "((open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void)",
+      "type": "(open: boolean, event?: Event, reason?: PreviewCard.Root.OpenChangeReason) => void",
       "description": "Event handler called when the preview card is opened or closed."
     },
     "actionsRef": {

docs/reference/generated/select-root.json

@@ -29,7 +29,7 @@
       "description": "Whether the select menu is currently open."
     },
     "onOpenChange": {
-      "type": "((open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void)",
+      "type": "(open: boolean, event?: Event, reason?: Select.Root.OpenChangeReason) => void",
       "description": "Event handler called when the select menu is opened or closed."
     },
     "actionsRef": {

docs/reference/generated/tooltip-root.json

@@ -12,7 +12,7 @@
       "description": "Whether the tooltip is currently open."
     },
     "onOpenChange": {
-      "type": "((open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void)",
+      "type": "(open: boolean, event?: Event, reason?: Tooltip.Root.OpenChangeReason) => void",
       "description": "Event handler called when the tooltip is opened or closed."
     },
     "actionsRef": {

packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx

@@ -101,13 +101,13 @@ describe('<AlertDialog.Root />', () => {
       await user.click(openButton);
 
       expect(handleOpenChange.callCount).to.equal(1);
-      expect(handleOpenChange.firstCall.args[2]).to.equal('click');
+      expect(handleOpenChange.firstCall.args[2]).to.equal('trigger-press');
 
       const closeButton = screen.getByText('Close');
       await user.click(closeButton);
 
       expect(handleOpenChange.callCount).to.equal(2);
-      expect(handleOpenChange.secondCall.args[2]).to.equal('click');
+      expect(handleOpenChange.secondCall.args[2]).to.equal('close-press');
     });
 
     it('calls onOpenChange with the reason for change when pressed Esc while the dialog is open', async () => {

packages/react/src/alert-dialog/root/AlertDialogRoot.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import type { DialogRoot } from '../../dialog/root/DialogRoot';
 import { AlertDialogRootContext } from './AlertDialogRootContext';
-import { useDialogRoot } from '../../dialog/root/useDialogRoot';
+import { type DialogOpenChangeReason, useDialogRoot } from '../../dialog/root/useDialogRoot';
 
 /**
  * Groups all parts of the alert dialog.
@@ -53,7 +53,19 @@ export const AlertDialogRoot: React.FC<AlertDialogRoot.Props> = function AlertDi
 };
 
 export namespace AlertDialogRoot {
-  export interface Props extends Omit<DialogRoot.Props, 'modal' | 'dismissible'> {}
+  export interface Props extends Omit<DialogRoot.Props, 'modal' | 'dismissible' | 'onOpenChange'> {
+    /**
+     * Event handler called when the dialog is opened or closed.
+     * @type (open: boolean, event?: Event, reason?: AlertDialog.Root.OpenChangeReason) => void
+     */
+    onOpenChange?: (
+      open: boolean,
+      event: Event | undefined,
+      reason: OpenChangeReason | undefined,
+    ) => void;
+  }
 
   export type Actions = DialogRoot.Actions;
+
+  export type OpenChangeReason = DialogOpenChangeReason;
 }

packages/react/src/dialog/close/useDialogClose.ts

@@ -2,16 +2,16 @@
 import * as React from 'react';
 import { useButton } from '../../use-button/useButton';
 import { mergeProps } from '../../merge-props';
-import { OpenChangeReason } from '../../utils/translateOpenChangeReason';
 import type { HTMLProps } from '../../utils/types';
 import { useEventCallback } from '../../utils/useEventCallback';
+import { DialogOpenChangeReason } from '../root/useDialogRoot';
 
 export function useDialogClose(params: useDialogClose.Parameters): useDialogClose.ReturnValue {
   const { open, setOpen, rootRef: externalRef, disabled } = params;
 
   const handleClick = useEventCallback((event: React.MouseEvent) => {
     if (open) {
-      setOpen(false, event.nativeEvent, 'click');
+      setOpen(false, event.nativeEvent, 'close-press');
     }
   });
 
@@ -44,7 +44,7 @@ export namespace useDialogClose {
     setOpen: (
       open: boolean,
       event: Event | undefined,
-      reason: OpenChangeReason | undefined,
+      reason: DialogOpenChangeReason | undefined,
     ) => void;
     rootRef: React.Ref<HTMLElement>;
   }

packages/react/src/dialog/popup/useDialogPopup.tsx

@@ -2,9 +2,9 @@
 import * as React from 'react';
 import { useForkRef } from '../../utils/useForkRef';
 import { mergeProps } from '../../merge-props';
+import type { DialogOpenChangeReason } from '../root/useDialogRoot';
 import { type InteractionType } from '../../utils/useEnhancedClickHandler';
 import { HTMLProps } from '../../utils/types';
-import { type OpenChangeReason } from '../../utils/translateOpenChangeReason';
 import { COMPOSITE_KEYS } from '../../composite/composite';
 
 export function useDialogPopup(parameters: useDialogPopup.Parameters): useDialogPopup.ReturnValue {
@@ -87,7 +87,7 @@ export namespace useDialogPopup {
     setOpen: (
       open: boolean,
       event: Event | undefined,
-      reason: OpenChangeReason | undefined,
+      reason: DialogOpenChangeReason | undefined,
     ) => void;
     /**
      * The id of the title element associated with the dialog.

packages/react/src/dialog/root/DialogRoot.test.tsx

@@ -102,13 +102,13 @@ describe('<Dialog.Root />', () => {
       await user.click(openButton);
 
       expect(handleOpenChange.callCount).to.equal(1);
-      expect(handleOpenChange.firstCall.args[2]).to.equal('click');
+      expect(handleOpenChange.firstCall.args[2]).to.equal('trigger-press');
 
       const closeButton = screen.getByText('Close');
       await user.click(closeButton);
 
       expect(handleOpenChange.callCount).to.equal(2);
-      expect(handleOpenChange.secondCall.args[2]).to.equal('click');
+      expect(handleOpenChange.secondCall.args[2]).to.equal('close-press');
     });
 
     it('calls onOpenChange with the reason for change when pressed Esc while the dialog is open', async () => {

packages/react/src/dialog/root/DialogRoot.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { DialogRootContext, useOptionalDialogRootContext } from './DialogRootContext';
 import { DialogContext } from '../utils/DialogContext';
-import { useDialogRoot } from './useDialogRoot';
+import { type DialogOpenChangeReason, useDialogRoot } from './useDialogRoot';
 
 /**
  * Groups all parts of the dialog.
@@ -63,4 +63,6 @@ export namespace DialogRoot {
   }
 
   export type Actions = useDialogRoot.Actions;
+
+  export type OpenChangeReason = DialogOpenChangeReason;
 }

packages/react/src/dialog/root/useDialogRoot.ts

@@ -20,10 +20,12 @@ import { useOpenInteractionType } from '../../utils/useOpenInteractionType';
 import { mergeProps } from '../../merge-props';
 import { useOpenChangeComplete } from '../../utils/useOpenChangeComplete';
 import {
-  type OpenChangeReason,
+  type BaseOpenChangeReason,
   translateOpenChangeReason,
 } from '../../utils/translateOpenChangeReason';
 
+export type DialogOpenChangeReason = BaseOpenChangeReason | 'close-press';
+
 export function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.ReturnValue {
   const {
     defaultOpen,
@@ -57,7 +59,7 @@ export function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.R
   const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
 
   const setOpen = useEventCallback(
-    (nextOpen: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => {
+    (nextOpen: boolean, event: Event | undefined, reason: DialogOpenChangeReason | undefined) => {
       onOpenChangeParameter?.(nextOpen, event, reason);
       setOpenUnwrapped(nextOpen);
     },
@@ -228,11 +230,12 @@ export namespace useDialogRoot {
     modal?: boolean | 'trap-focus';
     /**
      * Event handler called when the dialog is opened or closed.
+     * @type (open: boolean, event?: Event, reason?: Dialog.Root.OpenChangeReason) => void
      */
     onOpenChange?: (
       open: boolean,
       event: Event | undefined,
-      reason: OpenChangeReason | undefined,
+      reason: DialogOpenChangeReason | undefined,
     ) => void;
     /**
      * Event handler called after any animations complete when the dialog is opened or closed.
@@ -298,7 +301,7 @@ export namespace useDialogRoot {
     setOpen: (
       open: boolean,
       event: Event | undefined,
-      reason: OpenChangeReason | undefined,
+      reason: DialogOpenChangeReason | undefined,
     ) => void;
     /**
      * Whether the dialog is currently open.

packages/react/src/menu/backdrop/MenuBackdrop.tsx

@@ -45,7 +45,7 @@ export const MenuBackdrop = React.forwardRef(function MenuBackdrop(
         role: 'presentation',
         hidden: !mounted,
         style: {
-          pointerEvents: lastOpenChangeReason === 'hover' ? 'none' : undefined,
+          pointerEvents: lastOpenChangeReason === 'trigger-hover' ? 'none' : undefined,
           userSelect: 'none',
           WebkitUserSelect: 'none',
         },

packages/react/src/menu/popup/useMenuPopup.ts

@@ -1,15 +1,15 @@
 'use client';
 import * as React from 'react';
 import type { FloatingEvents } from '@floating-ui/react';
-import type { OpenChangeReason } from '../../utils/translateOpenChangeReason';
+import type { MenuOpenChangeReason } from '../root/useMenuRoot';
 
 export function useMenuPopup(parameters: useMenuPopup.Parameters): useMenuPopup.ReturnValue {
   const { menuEvents, setOpen } = parameters;
 
   React.useEffect(() => {
     function handleClose(event: {
       domEvent: Event | undefined;
-      reason: OpenChangeReason | undefined;
+      reason: MenuOpenChangeReason | undefined;
     }) {
       setOpen(false, event.domEvent, event.reason);
     }
@@ -34,7 +34,7 @@ export namespace useMenuPopup {
     setOpen: (
       open: boolean,
       event: Event | undefined,
-      reason: OpenChangeReason | undefined,
+      reason: MenuOpenChangeReason | undefined,
     ) => void;
   }
 

packages/react/src/menu/positioner/MenuPositioner.tsx

@@ -134,7 +134,7 @@ export const MenuPositioner = React.forwardRef(function MenuPositioner(
   const shouldRenderBackdrop =
     mounted &&
     parent.type !== 'menu' &&
-    ((parent.type !== 'menubar' && modal && lastOpenChangeReason !== 'hover') ||
+    ((parent.type !== 'menubar' && modal && lastOpenChangeReason !== 'trigger-hover') ||
       (parent.type === 'menubar' && parent.context.modal));
 
   const backdropCutout = parent.type === 'menubar' ? parent.context.contentElement : undefined;

packages/react/src/menu/root/MenuRoot.tsx

@@ -2,8 +2,7 @@
 import * as React from 'react';
 import { FloatingTree } from '@floating-ui/react';
 import { MenuRootContext } from './MenuRootContext';
-import { MenuOrientation, useMenuRoot } from './useMenuRoot';
-import type { OpenChangeReason } from '../../utils/translateOpenChangeReason';
+import { MenuOrientation, MenuOpenChangeReason, useMenuRoot } from './useMenuRoot';
 
 /**
  * Groups all parts of the menu.
@@ -78,11 +77,12 @@ export namespace MenuRoot {
     modal?: boolean;
     /**
      * Event handler called when the menu is opened or closed.
+     * @type (open: boolean, event?: Event, reason?: Menu.Root.OpenChangeReason) => void
      */
     onOpenChange?: (
       open: boolean,
       event: Event | undefined,
-      reason: OpenChangeReason | undefined,
+      reason: MenuOpenChangeReason | undefined,
     ) => void;
     /**
      * Event handler called after any animations complete when the menu is closed.
@@ -128,10 +128,12 @@ export namespace MenuRoot {
      * Instead, the `unmount` function must be called to unmount the menu manually.
      * Useful when the menu's animation is controlled by an external library.
      */
-    actionsRef?: React.RefObject<{ unmount: () => void }>;
+    actionsRef?: React.RefObject<Actions>;
   }
 
   export interface Actions {
     unmount: () => void;
   }
+
+  export type OpenChangeReason = MenuOpenChangeReason;
 }

packages/react/src/menu/root/MenuRootContext.ts

@@ -2,7 +2,13 @@
 import * as React from 'react';
 import type { useMenuRoot } from './useMenuRoot';
 
-export interface MenuRootContext extends useMenuRoot.ReturnValue {}
+export interface MenuRootContext extends useMenuRoot.ReturnValue {
+  disabled: boolean;
+  typingRef: React.RefObject<boolean>;
+  modal: boolean;
+  onOpenChangeComplete: ((open: boolean) => void) | undefined;
+  setHoverEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+}
 
 export const MenuRootContext = React.createContext<MenuRootContext | undefined>(undefined);