Handle onAction for DropdownMenu Items (#1194)

.changeset/spicy-pigs-switch.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Handle `onAction` for `DropdownMenu` Items

src/ActionList/Item.tsx

@@ -69,7 +69,7 @@ export interface ItemProps extends React.ComponentPropsWithoutRef<'div'>, SxProp
   /**
    * Callback that will trigger both on click selection and keyboard selection.
    */
-  onAction?: (item: ItemProps, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void
+  onAction?: (item: ItemProps, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void
 }
 
 const getItemVariant = (variant = 'default', disabled?: boolean) => {

src/ActionMenu.tsx

@@ -1,4 +1,4 @@
-import {List, ListPropsBase, GroupedListProps} from './ActionList/List'
+import {GroupedListProps, List, ListPropsBase} from './ActionList/List'
 import {Item, ItemProps} from './ActionList/Item'
 import {Divider} from './ActionList/Divider'
 import Button, {ButtonProps} from './Button'
@@ -9,7 +9,7 @@ export interface ActionMenuProps extends Partial<Omit<GroupedListProps, keyof Li
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   renderAnchor?: (props: any) => JSX.Element
   anchorContent?: React.ReactNode
-  onAction?: (props: ItemProps, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void
+  onAction?: (props: ItemProps, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void
 }
 
 const ActionMenuItem = (props: ItemProps) => <Item role="menuitem" {...props} />
@@ -40,18 +40,14 @@ const ActionMenuBase = ({
 
   const renderMenuItem: typeof Item = useCallback(
     ({onAction: itemOnAction, ...itemProps}) => {
-      const onActionWithClose = (
-        props: ItemProps,
-        event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
-      ) => {
-        const actionCallback = itemOnAction ?? onAction
-        actionCallback?.(props as ItemProps, event)
-        onClose()
-      }
       return renderItem({
         ...itemProps,
         role: 'menuitem',
-        onAction: onActionWithClose
+        onAction: (props, event) => {
+          const actionCallback = itemOnAction ?? onAction
+          actionCallback?.(props as ItemProps, event)
+          onClose()
+        }
       })
     },
     [onAction, onClose, renderItem]

src/DropdownMenu/DropdownMenu.tsx

@@ -57,28 +57,21 @@ export function DropdownMenu({
   )
 
   const renderMenuItem: typeof Item = useCallback(
-    ({onClick, onKeyDown, item, ...itemProps}) => {
-      const handleSelection = () => {
-        onChange?.(item === selectedItem ? undefined : item)
-        onClose()
-      }
-
+    ({item, onAction: itemOnAction, ...itemProps}) => {
       return renderItem({
         ...itemProps,
         item,
         role: 'option',
         selected: item === selectedItem,
-        onClick: event => {
-          handleSelection()
-          onClick?.(event)
-        },
-        onKeyDown: event => {
-          if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-            handleSelection()
-            // prevent "Enter" event from becoming a click on the anchor as overlay closes
-            event.preventDefault()
+        onAction: (itemFromAction, event) => {
+          itemOnAction?.(itemFromAction, event)
+
+          if (event.defaultPrevented) {
+            return
           }
-          onKeyDown?.(event)
+
+          onClose()
+          onChange?.(item === selectedItem ? undefined : item)
         }
       })
     },