From 4755b11a6dee287a31b4c66dc20a5a51ebb83f07 Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Mon, 9 Jan 2023 13:21:15 +0000 Subject: [PATCH] fix: stops using ARIAButton types for MenuItem root --- ...-90f8d720-d06d-48f0-a6ad-2d96810d1dfc.json | 7 ++ .../react-menu/etc/react-menu.api.md | 7 +- .../src/components/MenuItem/MenuItem.types.ts | 10 ++- .../src/components/MenuItem/useMenuItem.tsx | 79 ++++++++----------- 4 files changed, 52 insertions(+), 51 deletions(-) create mode 100644 change/@fluentui-react-menu-90f8d720-d06d-48f0-a6ad-2d96810d1dfc.json 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 }),