feat(react-cap-theme): react-menu components refactoring

change/@fluentui-contrib-react-cap-theme-c05a3706-9c93-47fa-841d-2b7de6a356c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "react-menu components refactoring",
+  "packageName": "@fluentui-contrib/react-cap-theme",
+  "email": "egianoglio@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-cap-theme/src/capStyleHooks.ts

@@ -98,7 +98,9 @@ import {
   useMenuGroupHeaderStyles,
   useMenuItemStyles,
   useMenuItemCheckboxStyles,
+  useMenuItemLinkStyles,
   useMenuItemRadioStyles,
+  useMenuItemSwitchStyles,
   useMenuPopoverStyles,
   useMenuSplitGroupStyles,
 } from './components/react-menu';
@@ -107,7 +109,9 @@ import type {
   MenuGroupHeaderState,
   MenuItemState,
   MenuItemCheckboxState,
+  MenuItemLinkState,
   MenuItemRadioState,
+  MenuItemSwitchState,
   MenuPopoverState,
   MenuSplitGroupState,
 } from '@fluentui/react-menu';
@@ -279,6 +283,12 @@ export const CAP_STYLE_HOOKS: NonNullable<
   useMenuItemCheckboxStyles_unstable: (state) => {
     return useMenuItemCheckboxStyles(state as MenuItemCheckboxState);
   },
+  useMenuItemLinkStyles_unstable: (state) => {
+    return useMenuItemLinkStyles(state as MenuItemLinkState);
+  },
+  useMenuItemSwitchStyles_unstable: (state) => {
+    return useMenuItemSwitchStyles(state as MenuItemSwitchState);
+  },
   useMenuItemRadioStyles_unstable: (state) => {
     return useMenuItemRadioStyles(state as MenuItemRadioState);
   },

packages/react-cap-theme/src/components/react-menu/components/MenuDivider/useMenuDividerStyles.styles.ts

@@ -1,18 +1,8 @@
-import {
-  type MenuDividerSlots,
-  type MenuDividerState,
-} from '@fluentui/react-menu';
-import {
-  getSlotClassNameProp_unstable,
-  type SlotClassNames,
-} from '@fluentui/react-utilities';
+import { type MenuDividerState } from '@fluentui/react-menu';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/tokens';
 import { makeStyles, mergeClasses } from '@griffel/react';
 
-export const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {
-  root: 'fui-MenuDivider',
-};
-
 const useStyles = makeStyles({
   root: {
     borderBottomColor: tokens.colorNeutralStroke3,
@@ -26,7 +16,6 @@ export const useMenuDividerStyles = (
   const styles = useStyles();
   state.root.className = mergeClasses(
     state.root.className,
-    menuDividerClassNames.root,
     styles.root,
     getSlotClassNameProp_unstable(state.root)
   );

packages/react-cap-theme/src/components/react-menu/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts

@@ -1,19 +1,9 @@
-import {
-  type MenuGroupHeaderSlots,
-  type MenuGroupHeaderState,
-} from '@fluentui/react-menu';
-import {
-  getSlotClassNameProp_unstable,
-  type SlotClassNames,
-} from '@fluentui/react-utilities';
+import { type MenuGroupHeaderState } from '@fluentui/react-menu';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/tokens';
 import { typographyStyles } from '@fluentui/tokens';
 import { makeStyles, mergeClasses } from '@griffel/react';
 
-export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {
-  root: 'fui-MenuGroupHeader',
-};
-
 const useStyles = makeStyles({
   root: {
     ...typographyStyles.caption1Strong,
@@ -28,7 +18,6 @@ export const useMenuGroupHeaderStyles = (
   const styles = useStyles();
   state.root.className = mergeClasses(
     state.root.className,
-    menuGroupHeaderClassNames.root,
     styles.root,
     getSlotClassNameProp_unstable(state.root)
   );

packages/react-cap-theme/src/components/react-menu/components/MenuItem/useMenuItemStyles.styles.ts

@@ -1,26 +1,12 @@
 import {
   menuItemClassNames as fluentMenuItemClassNames,
-  type MenuItemSlots,
   type MenuItemState,
 } from '@fluentui/react-menu';
-import {
-  getSlotClassNameProp_unstable,
-  type SlotClassNames,
-} from '@fluentui/react-utilities';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/tokens';
 import { typographyStyles } from '@fluentui/tokens';
 import { makeStyles, mergeClasses } from '@griffel/react';
 
-export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
-  root: 'fui-MenuItem',
-  content: 'fui-MenuItem__content',
-  icon: 'fui-MenuItem__icon',
-  checkmark: 'fui-MenuItem__checkmark',
-  submenuIndicator: 'fui-MenuItem__submenuIndicator',
-  secondaryContent: 'fui-MenuItem__secondaryContent',
-  subText: 'fui-MenuItem__subText',
-};
-
 const useStyles = makeStyles({
   root: {
     borderRadius: tokens.borderRadiusXLarge,
@@ -97,7 +83,6 @@ export const useMenuItemStyles = (state: MenuItemState): MenuItemState => {
 
   state.root.className = mergeClasses(
     state.root.className,
-    menuItemClassNames.root,
     styles.root,
     disabled && styles.disabled,
     getSlotClassNameProp_unstable(state.root)
@@ -106,38 +91,33 @@ export const useMenuItemStyles = (state: MenuItemState): MenuItemState => {
   if (state.content) {
     state.content.className = mergeClasses(
       state.content.className,
-      menuItemClassNames.content,
       styles.content
     );
   }
   if (state.icon) {
     state.icon.className = mergeClasses(
       state.icon.className,
-      menuItemClassNames.icon,
       styles.icon,
       getSlotClassNameProp_unstable(state.icon)
     );
   }
   if (state.secondaryContent) {
     state.secondaryContent.className = mergeClasses(
       state.secondaryContent.className,
-      menuItemClassNames.secondaryContent,
       styles.secondaryContent,
       getSlotClassNameProp_unstable(state.secondaryContent)
     );
   }
   if (state.submenuIndicator) {
     state.submenuIndicator.className = mergeClasses(
       state.submenuIndicator.className,
-      menuItemClassNames.submenuIndicator,
       styles.submenuIndicator,
       getSlotClassNameProp_unstable(state.submenuIndicator)
     );
   }
   if (state.subText) {
     state.subText.className = mergeClasses(
       state.subText.className,
-      menuItemClassNames.subText,
       styles.subText,
       getSlotClassNameProp_unstable(state.subText)
     );