fix: stops using ARIAButton types for MenuItem root (microsoft#26257)

Hotell · Feb 9, 2023 · 5010ea4 · 5010ea4
1 parent 4b47807
commit 5010ea4
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 51 deletions.
diff --git a/change/@fluentui-react-menu-90f8d720-d06d-48f0-a6ad-2d96810d1dfc.json 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
@@ -6,9 +6,8 @@
 
 /// <reference types="react" />
 
-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<MenuItemSlots>;
 export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
     hasSubmenu?: boolean;
     persistOnClick?: boolean;
+    disabled?: boolean;
+    disabledFocusable?: boolean;
 };
 
 // @public
@@ -161,7 +162,7 @@ export type MenuItemSelectableState = MenuItemSelectableProps & {
 
 // @public (undocumented)
 export type MenuItemSlots = {
-    root: Slot<ARIAButtonSlotProps<'div'>>;
+    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
@@ -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<ARIAButtonSlotProps<'div'>>;
+  root: Slot<'div', 'button'>;
 
   /**
    * Icon slot rendered before children content
@@ -46,6 +45,13 @@ export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
    * @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<MenuItemSlots> &

diff --git 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<ARIAButtonElement<'div'>>): 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<ARIABu
   const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(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<ARIABu
     isNativeButton: as === 'button',
     root: getNativeElementProps(
       as,
-      useARIAButtonShorthand<ARIAButtonSlotProps<'div'>>(
-        { disabled: false, disabledFocusable: isDisabled, as },
-        {
-          required: true,
-          defaultProps: {
-            role: 'menuitem',
-            ...props,
-            ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,
-            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<ARIAButtonElementIntersection<'div'>>,
+        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 }),