diff --git a/change/@fluentui-react-menu-90f8d720-d06d-48f0-a6ad-2d96810d1dfc.json b/change/@fluentui-react-menu-90f8d720-d06d-48f0-a6ad-2d96810d1dfc.json
new file mode 100644
index 00000000000000..dc9e9baba7f62e
--- /dev/null
+++ b/change/@fluentui-react-menu-90f8d720-d06d-48f0-a6ad-2d96810d1dfc.json
@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "Stops using ARIAButton types for MenuItem root",
+ "packageName": "@fluentui/react-menu",
+ "email": "bernardo.sunderhus@gmail.com",
+ "dependentChangeType": "patch"
+}
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 22fb6083a701bd..ec11c53d616284 100644
--- a/packages/react-components/react-menu/etc/react-menu.api.md
+++ b/packages/react-components/react-menu/etc/react-menu.api.md
@@ -6,9 +6,8 @@
///
-import type { ARIAButtonElement } from '@fluentui/react-aria';
+import { ARIAButtonElement } from '@fluentui/react-aria';
import { ARIAButtonResultProps } from '@fluentui/react-aria';
-import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import { ARIAButtonType } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
@@ -134,6 +133,8 @@ export const menuItemClassNames: SlotClassNames;
export type MenuItemProps = ComponentProps> & {
hasSubmenu?: boolean;
persistOnClick?: boolean;
+ disabled?: boolean;
+ disabledFocusable?: boolean;
};
// @public
@@ -161,7 +162,7 @@ export type MenuItemSelectableState = MenuItemSelectableProps & {
// @public (undocumented)
export type MenuItemSlots = {
- root: Slot>;
+ root: Slot<'div', 'button'>;
icon?: Slot<'span'>;
checkmark?: Slot<'span'>;
submenuIndicator?: Slot<'span'>;
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 cb8b0a30e6e31f..1be90f0200037f 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,8 +1,7 @@
-import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type MenuItemSlots = {
- root: Slot>;
+ root: Slot<'div', 'button'>;
/**
* Icon slot rendered before children content
@@ -46,6 +45,13 @@ export type MenuItemProps = ComponentProps> & {
* @default false
*/
persistOnClick?: boolean;
+
+ disabled?: boolean;
+ /**
+ * @deprecated this property does nothing.
+ * disabled focusable is by default by simply using `disabled` property
+ */
+ disabledFocusable?: boolean;
};
export type MenuItemState = ComponentState &
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 e10f21c7356971..2eda70c9e64c0b 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx
+++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx
@@ -13,8 +13,7 @@ import {
import { useMenuListContext_unstable } from '../../contexts/menuListContext';
import { useMenuContext_unstable } from '../../contexts/menuContext';
import type { MenuItemProps, MenuItemState } from './MenuItem.types';
-import type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { useARIAButtonShorthand } from '@fluentui/react-aria';
+import { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';
import { Enter, Space } from '@fluentui/keyboard-keys';
const ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
@@ -26,13 +25,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref>): MenuItemState => {
const isSubmenuTrigger = useMenuTriggerContext_unstable();
const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
- const {
- as = 'div',
- disabled,
- disabledFocusable,
- hasSubmenu = isSubmenuTrigger,
- persistOnClick = persistOnClickContext,
- } = props;
+ const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
const hasIcons = useMenuListContext_unstable(context => context.hasIcons);
const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);
const setOpen = useMenuContext_unstable(context => context.setOpen);
@@ -41,11 +34,9 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref>(null);
const dismissedWithKeyboardRef = React.useRef(false);
- const isDisabled = Boolean(disabled || disabledFocusable);
-
const state: MenuItemState = {
hasSubmenu,
- disabled: isDisabled,
+ disabled,
persistOnClick,
components: {
root: 'div',
@@ -58,42 +49,38 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref>(
- { disabled: false, disabledFocusable: isDisabled, as },
- {
- required: true,
- defaultProps: {
- role: 'menuitem',
- ...props,
- ref: useMergedRefs(ref, innerRef) as React.Ref>,
- onKeyDown: useEventCallback(event => {
- props.onKeyDown?.(event);
- if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {
- dismissedWithKeyboardRef.current = true;
- }
- }),
- onMouseEnter: useEventCallback(event => {
- innerRef.current?.focus();
+ useARIAButtonProps(as, {
+ role: 'menuitem',
+ ...props,
+ disabled: false,
+ disabledFocusable: disabled,
+ ref: useMergedRefs(ref, innerRef) as React.Ref>,
+ onKeyDown: useEventCallback(event => {
+ props.onKeyDown?.(event);
+ if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {
+ dismissedWithKeyboardRef.current = true;
+ }
+ }),
+ onMouseEnter: useEventCallback(event => {
+ innerRef.current?.focus();
- props.onMouseEnter?.(event);
- }),
- onClick: useEventCallback(event => {
- if (!hasSubmenu && !persistOnClick) {
- setOpen(event, {
- open: false,
- keyboard: dismissedWithKeyboardRef.current,
- bubble: true,
- type: 'menuItemClick',
- event,
- });
- dismissedWithKeyboardRef.current = false;
- }
+ props.onMouseEnter?.(event);
+ }),
+ onClick: useEventCallback(event => {
+ if (!hasSubmenu && !persistOnClick) {
+ setOpen(event, {
+ open: false,
+ keyboard: dismissedWithKeyboardRef.current,
+ bubble: true,
+ type: 'menuItemClick',
+ event,
+ });
+ dismissedWithKeyboardRef.current = false;
+ }
- props.onClick?.(event);
- }),
- },
- },
- ),
+ props.onClick?.(event);
+ }),
+ }),
),
icon: resolveShorthand(props.icon, { required: hasIcons }),
checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),