react-menu: Adjust signature to use ForwardRefComponent

change/@fluentui-react-menu-d9df6532-29f1-42b1-a9e2-657cad45c411.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds ForwardRefComponent to react-menu components declaration",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-menu/src/components/MenuDivider/MenuDivider.tsx

@@ -3,11 +3,12 @@ import { useMenuDivider } from './useMenuDivider';
 import { useMenuDividerStyles } from './useMenuDividerStyles';
 import { renderMenuDivider } from './renderMenuDivider';
 import type { MenuDividerProps } from './MenuDivider.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled MenuDivider, using the `useMenuDivider` hook.
  */
-export const MenuDivider = React.forwardRef<HTMLDivElement, MenuDividerProps>((props, ref) => {
+export const MenuDivider: ForwardRefComponent<MenuDividerProps> = React.forwardRef((props, ref) => {
   const state = useMenuDivider(props, ref);
   useMenuDividerStyles(state);
 

packages/react-menu/src/components/MenuGroup/MenuGroup.tsx

@@ -3,11 +3,12 @@ import { useMenuGroup } from './useMenuGroup';
 import { renderMenuGroup } from './renderMenuGroup';
 import { useMenuGroupContextValues } from './useMenuGroupContextValues';
 import type { MenuGroupProps } from './MenuGroup.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled MenuGroup, using the `useMenuGroup` hook.
  */
-export const MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>((props, ref) => {
+export const MenuGroup: ForwardRefComponent<MenuGroupProps> = React.forwardRef((props, ref) => {
   const state = useMenuGroup(props, ref);
   const contextValues = useMenuGroupContextValues(state);
 

packages/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx

@@ -3,11 +3,12 @@ import { useMenuGroupHeader } from './useMenuGroupHeader';
 import { useMenuGroupHeaderStyles } from './useMenuGroupHeaderStyles';
 import { renderMenuGroupHeader } from './renderMenuGroupHeader';
 import type { MenuGroupHeaderProps } from './MenuGroupHeader.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled MenuGroupHeader, using the `useMenuGroupHeader` hook.
  */
-export const MenuGroupHeader = React.forwardRef<HTMLDivElement, MenuGroupHeaderProps>((props, ref) => {
+export const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps> = React.forwardRef((props, ref) => {
   const state = useMenuGroupHeader(props, ref);
   useMenuGroupHeaderStyles(state);
 

packages/react-menu/src/components/MenuItem/MenuItem.tsx

@@ -5,11 +5,12 @@ import { useMenuItemStyles } from './useMenuItemStyles';
 import { useCheckmarkStyles } from '../../selectable/index';
 import type { MenuItemProps } from './MenuItem.types';
 import type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled MenuItem, using the `useMenuItem` and `useMenuItemStyles` hook.
  */
-export const MenuItem = React.forwardRef<HTMLElement, MenuItemProps>((props, ref) => {
+export const MenuItem: ForwardRefComponent<MenuItemProps> = React.forwardRef((props, ref) => {
   const state = useMenuItem(props, ref);
 
   useMenuItemStyles(state);

packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -3,11 +3,12 @@ import { useMenuItemCheckbox } from './useMenuItemCheckbox';
 import { renderMenuItemCheckbox } from './renderMenuItemCheckbox';
 import { useMenuItemCheckBoxStyles } from './useMenuItemCheckboxStyles';
 import type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.
  */
-export const MenuItemCheckbox = React.forwardRef<HTMLElement, MenuItemCheckboxProps>((props, ref) => {
+export const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps> = React.forwardRef((props, ref) => {
   const state = useMenuItemCheckbox(props, ref);
   useMenuItemCheckBoxStyles(state);
 

packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx

@@ -3,11 +3,12 @@ import { useMenuItemRadio } from './useMenuItemRadio';
 import { renderMenuItemRadio } from './renderMenuItemRadio';
 import { useMenuItemRadioStyles } from './useMenuItemRadioStyles';
 import type { MenuItemRadioProps } from './MenuItemRadio.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled MenuItemRadio, using the `useMenuItemRadio` hook.
  */
-export const MenuItemRadio = React.forwardRef<HTMLElement, MenuItemRadioProps>((props, ref) => {
+export const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps> = React.forwardRef((props, ref) => {
   const state = useMenuItemRadio(props, ref);
   useMenuItemRadioStyles(state);
 

packages/react-menu/src/components/MenuList/MenuList.tsx

@@ -2,13 +2,14 @@ import * as React from 'react';
 import { useMenuList } from './useMenuList';
 import { renderMenuList } from './renderMenuList';
 import { useMenuListContextValues } from './useMenuListContextValues';
-import type { MenuListProps } from './MenuList.types';
 import { useMenuListStyles } from './useMenuListStyles';
+import type { MenuListProps } from './MenuList.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled MenuList, using the `useMenuList` hook.
  */
-export const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>((props, ref) => {
+export const MenuList: ForwardRefComponent<MenuListProps> = React.forwardRef((props, ref) => {
   const state = useMenuList(props, ref);
   const contextValues = useMenuListContextValues(state);
   useMenuListStyles(state);

packages/react-menu/src/components/MenuPopover/MenuPopover.tsx

@@ -3,11 +3,12 @@ import { useMenuPopover } from './useMenuPopover';
 import { useMenuPopoverStyles } from './useMenuPopoverStyles';
 import { renderMenuPopover } from './renderMenuPopover';
 import type { MenuPopoverProps } from './MenuPopover.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
  */
-export const MenuPopover = React.forwardRef<HTMLElement, MenuPopoverProps>((props, ref) => {
+export const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {
   const state = useMenuPopover(props, ref);
 
   useMenuPopoverStyles(state);