@fluentui/react-menu 0.0.0-nightly-20220518-0420.1 → 0.0.0-nightly-20220523-0424.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-menu",
   "entries": [
     {
-      "date": "Wed, 18 May 2022 04:34:09 GMT",
-      "tag": "@fluentui/react-menu_v0.0.0-nightly-20220518-0420.1",
-      "version": "0.0.0-nightly-20220518-0420.1",
+      "date": "Mon, 23 May 2022 04:37:37 GMT",
+      "tag": "@fluentui/react-menu_v0.0.0-nightly-20220523-0424.1",
+      "version": "0.0.0-nightly-20220523-0424.1",
       "comments": {
         "prerelease": [
           {
@@ -13,53 +13,77 @@
             "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
             "comment": "chore: Update Griffel to latest version"
           },
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "01a1b4cd08dea21d547c1c2a05382426c5e7ea24",
+            "comment": "feat: Fill icon on hover"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-menu",
+            "commit": "aaaf6d769e834645418a1144b109c679317fe393",
+            "comment": "fix: Context menu closes when its trigger is left clicked"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "11ba59f23523bedc29014cd29f7141c5debc6242",
+            "comment": "Removing Common types from all Menu components."
+          },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20220518-0420.1",
-            "commit": "c740a24cded647abf63433112cb9a07ed03d161a"
+            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20220523-0424.1",
+            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20220518-0420.1",
-            "commit": "c740a24cded647abf63433112cb9a07ed03d161a"
+            "comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20220523-0424.1",
+            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-20220518-0420.1",
-            "commit": "c740a24cded647abf63433112cb9a07ed03d161a"
+            "comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-20220523-0424.1",
+            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220518-0420.1",
-            "commit": "c740a24cded647abf63433112cb9a07ed03d161a"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220523-0424.1",
+            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220518-0420.1",
-            "commit": "c740a24cded647abf63433112cb9a07ed03d161a"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220523-0424.1",
+            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220518-0420.1",
-            "commit": "c740a24cded647abf63433112cb9a07ed03d161a"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220523-0424.1",
+            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220518-0420.1",
-            "commit": "c740a24cded647abf63433112cb9a07ed03d161a"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220523-0424.1",
+            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220518-0420.1",
-            "commit": "c740a24cded647abf63433112cb9a07ed03d161a"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220523-0424.1",
+            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,25 +1,29 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Wed, 18 May 2022 04:34:09 GMT and should not be manually modified.
+This log was last generated on Mon, 23 May 2022 04:37:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220518-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20220518-0420.1)
+## [0.0.0-nightly-20220523-0424.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20220523-0424.1)
 
-Wed, 18 May 2022 04:34:09 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-rc.9..@fluentui/react-menu_v0.0.0-nightly-20220518-0420.1)
+Mon, 23 May 2022 04:37:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-rc.9..@fluentui/react-menu_v0.0.0-nightly-20220523-0424.1)
 
 ### Changes
 
 - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
-- Bump @fluentui/react-portal to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
-- Bump @fluentui/react-positioning to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
+- feat: Fill icon on hover ([PR #23084](https://github.com/microsoft/fluentui/pull/23084) by yuanboxue@microsoft.com)
+- fix: Context menu closes when its trigger is left clicked ([PR #23089](https://github.com/microsoft/fluentui/pull/23089) by lingfangao@hotmail.com)
+- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
+- Removing Common types from all Menu components. ([PR #22958](https://github.com/microsoft/fluentui/pull/22958) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
+- Bump @fluentui/react-portal to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
+- Bump @fluentui/react-positioning to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
 
 ## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-rc.9)
 

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import type { Context } from '@fluentui/react-context-selector';
 import type { ContextSelector } from '@fluentui/react-context-selector';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { PositioningShorthand } from '@fluentui/react-positioning';
+import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -16,48 +16,14 @@ import { usePopperMouseTarget } from '@fluentui/react-positioning';
 export declare const Menu: React_2.FC<MenuProps>;
 
 export declare type MenuCheckedValueChangeData = {
-    /** The name of the value */
-    name: string;
     /** The items for this value that are checked */
     checkedItems: string[];
+    /** The name of the value */
+    name: string;
 };
 
 export declare type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;
 
-declare type MenuCommons = MenuListCommons & {
-    /**
-     * Whether the popup is open
-     */
-    open: boolean;
-    /**
-     * Call back when the component requests to change value
-     * The `open` value is used as a hint when directly controlling the component
-     */
-    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
-    /**
-     * Whether the popup is open by default
-     */
-    defaultOpen?: boolean;
-    openOnHover: boolean;
-    /**
-     * Opens the menu on right click (context menu), removes all other menu open interactions
-     */
-    openOnContext?: boolean;
-    /**
-     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
-     * This option is disregarded for submenus
-     */
-    inline?: boolean;
-    /**
-     * Do not dismiss the menu when a menu item is clicked
-     */
-    persistOnItemClick?: boolean;
-    /**
-     * Sets the delay for mouse open/close for the popover one mouse enter/leave
-     */
-    hoverDelay?: number;
-};
-
 export declare const MenuContext: Context<MenuContextValue>;
 
 /**
@@ -184,23 +150,27 @@ export declare const menuItemClassName = "fui-MenuItem";
 
 export declare const menuItemClassNames: SlotClassNames<MenuItemSlots>;
 
-declare type MenuItemCommons = {
-    /**
-     * If the menu item is a trigger for a submenu
-     */
-    hasSubmenu?: boolean;
+export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
     /**
      * Applies disabled styles to menu item but remains focusable
+     *
+     * @default false
      */
     disabled?: boolean;
+    /**
+     * If the menu item is a trigger for a submenu
+     *
+     * @default false
+     */
+    hasSubmenu?: boolean;
     /**
      * Clicking on the menu item will not dismiss an open menu
+     *
+     * @default false
      */
     persistOnClick?: boolean;
 };
 
-export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & MenuItemCommons;
-
 /**
  * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
  */
@@ -277,7 +247,7 @@ export declare type MenuItemSlots = {
     secondaryContent?: Slot<'span'>;
 };
 
-export declare type MenuItemState = ComponentState<MenuItemSlots> & MenuItemCommons;
+export declare type MenuItemState = ComponentState<MenuItemSlots> & Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>;
 
 /**
  * Define a styled MenuList, using the `useMenuList_unstable` hook.
@@ -291,32 +261,6 @@ export declare const menuListClassName = "fui-MenuList";
 
 export declare const menuListClassNames: SlotClassNames<MenuListSlots>;
 
-declare type MenuListCommons = {
-    /**
-     * Callback when checked items change for value with a name
-     *
-     * @param event - React's original SyntheticEvent
-     * @param data - A data object with relevant information
-     */
-    onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
-    /**
-     * Map of all checked values
-     */
-    checkedValues: Record<string, string[]>;
-    /**
-     * Default values to be checked on mount
-     */
-    defaultCheckedValues?: Record<string, string[]>;
-    /**
-     * States that menu items can contain icons and reserve slots for item alignment
-     */
-    hasIcons?: boolean;
-    /**
-     * States that menu items can contain selectable items and reserve slots for item alignment
-     */
-    hasCheckmarks?: boolean;
-};
-
 export declare const MenuListContext: Context<MenuListContextValue>;
 
 /**
@@ -332,7 +276,31 @@ export declare type MenuListContextValues = {
     menuList: MenuListContextValue;
 };
 
-export declare type MenuListProps = ComponentProps<MenuListSlots> & Partial<MenuListCommons>;
+export declare type MenuListProps = ComponentProps<MenuListSlots> & {
+    /**
+     * Map of all checked values
+     */
+    checkedValues?: Record<string, string[]>;
+    /**
+     * Default values to be checked on mount
+     */
+    defaultCheckedValues?: Record<string, string[]>;
+    /**
+     * States that menu items can contain selectable items and reserve slots for item alignment
+     */
+    hasCheckmarks?: boolean;
+    /**
+     * States that menu items can contain icons and reserve slots for item alignment
+     */
+    hasIcons?: boolean;
+    /**
+     * Callback when checked items change for value with a name
+     *
+     * @param event - React's original SyntheticEvent
+     * @param data - A data object with relevant information
+     */
+    onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
+};
 
 export declare const MenuListProvider: React_2.Provider<MenuListContextValue> & React_2.FC<React_2.ProviderProps<MenuListContextValue>>;
 
@@ -340,37 +308,37 @@ export declare type MenuListSlots = {
     root: Slot<'div'>;
 };
 
-export declare type MenuListState = ComponentState<MenuListSlots> & MenuListCommons & {
+export declare type MenuListState = ComponentState<MenuListSlots> & Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> & {
+    /**
+     * Selects a radio item, will de-select the currently selected ratio item
+     */
+    selectRadio: SelectableHandler;
     /**
      * Callback to set focus on the next menu item by first character
      */
     setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
     toggleCheckbox: SelectableHandler;
-    /**
-     * Selects a radio item, will de-select the currently selected ratio item
-     */
-    selectRadio: SelectableHandler;
 };
 
 /**
  * Data attached to open/close events
  */
 export declare type MenuOpenChangeData = {
-    open: boolean;
-    /**
-     * Indicates whether the change of state was a keyboard interaction
-     */
-    keyboard?: boolean;
     /**
      * indicates whether the request for the open state was bubbled from a nested menu
      */
     bubble?: boolean;
+    /**
+     * Indicates whether the change of state was a keyboard interaction
+     */
+    keyboard?: boolean;
+    open: boolean;
 };
 
 /**
  * The supported events that will trigger open/close of the menu
  */
-export declare type MenuOpenEvents = MouseEvent | TouchEvent | React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.FocusEvent<HTMLElement>;
+export declare type MenuOpenEvents = MouseEvent | TouchEvent | React_2.FocusEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
 
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
@@ -407,12 +375,58 @@ export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & {
 /**
  * Extends and drills down Menulist props to simplify API
  */
-export declare type MenuProps = Partial<MenuCommons> & ComponentProps<MenuSlots> & {
+export declare type MenuProps = ComponentProps<MenuSlots> & Pick<MenuListProps, 'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'> & {
     /**
      * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.
      * Alternatively can only contain {@link MenuPopover} if using a custom `target`.
      */
     children: [JSX.Element, JSX.Element] | JSX.Element;
+    /**
+     * Whether the popup is open by default
+     *
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Sets the delay for mouse open/close for the popover one mouse enter/leave
+     */
+    hoverDelay?: number;
+    /**
+     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
+     * This option is disregarded for submenus
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Call back when the component requests to change value
+     * The `open` value is used as a hint when directly controlling the component
+     */
+    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
+    /**
+     * Whether the popup is open
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Opens the menu on right click (context menu), removes all other menu open interactions
+     *
+     * @default false
+     */
+    openOnContext?: boolean;
+    /**
+     * Opens the menu on hover
+     *
+     * @default false
+     */
+    openOnHover?: boolean;
+    /**
+     * Do not dismiss the menu when a menu item is clicked
+     *
+     * @default false
+     */
+    persistOnItemClick?: boolean;
     /**
      * Configures the positioned menu
      */
@@ -435,12 +449,10 @@ export declare const menuSplitGroupClassName = "fui-MenuSplitGroup";
 
 export declare const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
 
-declare type MenuSplitGroupCommons = {};
-
 /**
  * MenuSplitGroup Props
  */
-export declare type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots> & MenuSplitGroupCommons;
+export declare type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;
 
 export declare type MenuSplitGroupSlots = {
     root: Slot<'div'>;
@@ -449,45 +461,45 @@ export declare type MenuSplitGroupSlots = {
 /**
  * State used in rendering MenuSplitGroup
  */
-export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & MenuSplitGroupCommons;
+export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;
 
-export declare type MenuState = MenuCommons & ComponentState<MenuSlots> & {
+export declare type MenuState = ComponentState<MenuSlots> & Pick<MenuProps, 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'inline' | 'onOpenChange' | 'openOnContext' | 'persistOnItemClick'> & Required<Pick<MenuProps, 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover'>> & {
     /**
-     * Callback to open/close the popup
+     * Anchors the popper to the mouse click for context events
      */
-    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
+    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];
     /**
-     * Internal react node that just simplifies handling children
+     * Whether this menu is a submenu
      */
-    menuPopover: React_2.ReactNode;
+    isSubmenu: boolean;
     /**
      * Internal react node that just simplifies handling children
      */
-    menuTrigger: React_2.ReactNode;
+    menuPopover: React_2.ReactNode;
     /**
      * The ref for the popup
      */
     menuPopoverRef: React_2.MutableRefObject<HTMLElement>;
     /**
-     * The ref for the MenuTrigger, used for popup positioning
+     * Internal react node that just simplifies handling children
      */
-    triggerRef: React_2.MutableRefObject<HTMLElement>;
+    menuTrigger: React_2.ReactNode;
     /**
-     * Id for the MenuTrigger element for aria relationship
+     * A callback to set the target of the popper to the mouse click for context events
      */
-    triggerId: string;
+    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
     /**
-     * Whether this menu is a submenu
+     * Callback to open/close the popup
      */
-    isSubmenu: boolean;
+    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
     /**
-     * Anchors the popper to the mouse click for context events
+     * Id for the MenuTrigger element for aria relationship
      */
-    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];
+    triggerId: string;
     /**
-     * A callback to set the target of the popper to the mouse click for context events
+     * The ref for the MenuTrigger, used for popup positioning
      */
-    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
+    triggerRef: React_2.MutableRefObject<HTMLElement>;
 };
 
 /**
@@ -581,7 +593,7 @@ export declare const renderMenuTrigger_unstable: (state: MenuTriggerState) => JS
 
 export declare type SelectableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked: boolean) => void;
 
-export declare type UninitializedMenuListState = Omit<MenuListState, 'setFocusByFirstCharacter' | 'toggleCheckbox' | 'selectRadio' | 'checkedValues'> & Partial<Pick<MenuListState, 'checkedValues'>>;
+export declare type UninitializedMenuListState = Omit<MenuListState, 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'> & Partial<Pick<MenuListState, 'checkedValues'>>;
 
 /**
  * Applies styles to a checkmark slot for selectable menu items

package/lib/components/Menu/Menu.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.js","sourceRoot":"../src/","sources":["components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { usePopperMouseTarget, PositioningShorthand } from '@fluentui/react-positioning';\nimport { MenuListCommons } from '../MenuList/MenuList.types';\nimport { MenuContextValue } from '../../contexts/menuContext';\n\ntype MenuCommons = MenuListCommons & {\n  /**\n   * Whether the popup is open\n   */\n  open: boolean;\n\n  /**\n   * Call back when the component requests to change value\n   * The `open` value is used as a hint when directly controlling the component\n   */\n  onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n  /**\n   * Whether the popup is open by default\n   */\n  defaultOpen?: boolean;\n\n  /*\n   * Opens the menu on hover\n   */\n  openOnHover: boolean;\n\n  /**\n   * Opens the menu on right click (context menu), removes all other menu open interactions\n   */\n  openOnContext?: boolean;\n\n  /**\n   * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n   * This option is disregarded for submenus\n   */\n  inline?: boolean;\n\n  /**\n   * Do not dismiss the menu when a menu item is clicked\n   */\n  persistOnItemClick?: boolean;\n\n  /**\n   * Sets the delay for mouse open/close for the popover one mouse enter/leave\n   */\n  hoverDelay?: number;\n};\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = Partial<MenuCommons> &\n  ComponentProps<MenuSlots> & {\n    /**\n     * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.\n     * Alternatively can only contain {@link MenuPopover} if using a custom `target`.\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n  };\n\nexport type MenuState = MenuCommons &\n  ComponentState<MenuSlots> & {\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  open: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   */\n  keyboard?: boolean;\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n};\n\nexport type MenuContextValues = {\n  menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n"]}
+{"version":3,"file":"Menu.types.js","sourceRoot":"../src/","sources":["components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { usePopperMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { MenuContextValue } from '../../contexts/menuContext';\nimport type { MenuListProps } from '../MenuList/MenuList.types';\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = ComponentProps<MenuSlots> &\n  Pick<\n    MenuListProps,\n    'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'\n  > & {\n    /**\n     * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.\n     * Alternatively can only contain {@link MenuPopover} if using a custom `target`.\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * Sets the delay for mouse open/close for the popover one mouse enter/leave\n     */\n    hoverDelay?: number;\n\n    /**\n     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n     * This option is disregarded for submenus\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Call back when the component requests to change value\n     * The `open` value is used as a hint when directly controlling the component\n     */\n    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Opens the menu on right click (context menu), removes all other menu open interactions\n     *\n     * @default false\n     */\n    openOnContext?: boolean;\n\n    /**\n     * Opens the menu on hover\n     *\n     * @default false\n     */\n    openOnHover?: boolean;\n\n    /**\n     * Do not dismiss the menu when a menu item is clicked\n     *\n     * @default false\n     */\n    persistOnItemClick?: boolean;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n  };\n\nexport type MenuState = ComponentState<MenuSlots> &\n  Pick<\n    MenuProps,\n    | 'defaultCheckedValues'\n    | 'hasCheckmarks'\n    | 'hasIcons'\n    | 'inline'\n    | 'onOpenChange'\n    | 'openOnContext'\n    | 'persistOnItemClick'\n  > &\n  Required<Pick<MenuProps, 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover'>> & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   */\n  keyboard?: boolean;\n  open: boolean;\n};\n\nexport type MenuContextValues = {\n  menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.FocusEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}

package/lib/components/Menu/useMenu.js

@@ -187,7 +187,7 @@ const useMenuOpenState = state => {
     contains: elementContains,
     disabled: !open,
     element: targetDocument,
-    refs: [state.menuPopoverRef, state.triggerRef],
+    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(Boolean),
     callback: e => setOpen(e, {
       open: false
     })