From 45afaea31ed2b2abc25cadd0557c3a85bafe0e33 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Mon, 9 Jan 2023 19:55:03 +0100
Subject: [PATCH 1/2] fix: Revert MenuItem root slot to support only div

Follow up of #26257
---
 .../react-menu/etc/react-menu.api.md               |  6 ++----
 .../src/components/MenuItem/MenuItem.types.ts      |  6 ++----
 .../src/components/MenuItem/useMenuItem.tsx        |  1 -
 .../src/components/MenuItem/useMenuItemStyles.ts   | 14 --------------
 4 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/packages/react-components/react-menu/etc/react-menu.api.md b/packages/react-components/react-menu/etc/react-menu.api.md
index ec11c53d61628..23bfa9a0f8b37 100644
--- a/packages/react-components/react-menu/etc/react-menu.api.md
+++ b/packages/react-components/react-menu/etc/react-menu.api.md
@@ -162,7 +162,7 @@ export type MenuItemSelectableState = MenuItemSelectableProps & {
 
 // @public (undocumented)
 export type MenuItemSlots = {
-    root: Slot<'div', 'button'>;
+    root: Slot<'div'>;
     icon?: Slot<'span'>;
     checkmark?: Slot<'span'>;
     submenuIndicator?: Slot<'span'>;
@@ -171,9 +171,7 @@ export type MenuItemSlots = {
 };
 
 // @public (undocumented)
-export type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {
-    isNativeButton: boolean;
-};
+export type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
 
 // @public
 export const MenuList: ForwardRefComponent<MenuListProps>;
diff --git a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts
index 1be90f0200037..4928e882a1023 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts
+++ b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts
@@ -1,7 +1,7 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type MenuItemSlots = {
-  root: Slot<'div', 'button'>;
+  root: Slot<'div'>;
 
   /**
    * Icon slot rendered before children content
@@ -55,6 +55,4 @@ export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
 };
 
 export type MenuItemState = ComponentState<MenuItemSlots> &
-  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {
-    isNativeButton: boolean;
-  };
+  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx
index 2eda70c9e64c0..e3fd1488a9e62 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx
+++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx
@@ -46,7 +46,6 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
       content: 'span',
       secondaryContent: 'span',
     },
-    isNativeButton: as === 'button',
     root: getNativeElementProps(
       as,
       useARIAButtonProps(as, {
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts
index aef4ebebb075a..80cbead7e8061 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -19,19 +19,6 @@ export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
 const useStyles = makeStyles({
   focusIndicator: createFocusOutlineStyle(),
   // TODO: this should be extracted to another package
-  resetButton: {
-    boxSizing: 'content-box',
-    backgroundColor: 'inherit',
-    color: 'inherit',
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    lineHeight: 'normal',
-    ...shorthands.borderColor('transparent'),
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
-    WebkitAppearance: 'button',
-    textAlign: 'unset',
-  },
   root: {
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     position: 'relative',
@@ -115,7 +102,6 @@ export const useMenuItemStyles_unstable = (state: MenuItemState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
     menuItemClassNames.root,
-    state.isNativeButton && styles.resetButton,
     styles.root,
     styles.focusIndicator,
     state.disabled && styles.disabled,

From 027c94834f95a8b2747785420733a9462a8a624d Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Mon, 9 Jan 2023 19:58:46 +0100
Subject: [PATCH 2/2] changefile

---
 ...ui-react-menu-43ac5660-762e-454a-b500-47ca64a0db8f.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-menu-43ac5660-762e-454a-b500-47ca64a0db8f.json

diff --git a/change/@fluentui-react-menu-43ac5660-762e-454a-b500-47ca64a0db8f.json b/change/@fluentui-react-menu-43ac5660-762e-454a-b500-47ca64a0db8f.json
new file mode 100644
index 0000000000000..5e4625f9898f3
--- /dev/null
+++ b/change/@fluentui-react-menu-43ac5660-762e-454a-b500-47ca64a0db8f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "revert: MenuItem root slot only supports div",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}