Jdrush89/fix linkitem onclick (#2757)

* Fixing the onClick of ActionList.LinkItem

* Adding changeset

* removing console statement

* removing unused import

* Fixing test

Co-authored-by: Josh Black <[email protected]>

Author: jdrush89

.changeset/poor-melons-share.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Making onClick of ActionList.LinkItem functional

src/ActionList/LinkItem.tsx

@@ -39,11 +39,24 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr
     <Item
       active={active}
       sx={{paddingY: 0, paddingX: 0}}
-      _PrivateItemWrapper={({children, ...rest}) => (
-        <Link as={Component} sx={merge(styles, sx as SxProp)} {...props} {...rest} ref={forwardedRef}>
-          {children}
-        </Link>
-      )}
+      _PrivateItemWrapper={({children, onClick, ...rest}) => {
+        const clickHandler = (event: React.MouseEvent) => {
+          onClick && onClick(event)
+          props.onClick && props.onClick(event as React.MouseEvent<HTMLAnchorElement>)
+        }
+        return (
+          <Link
+            as={Component}
+            sx={merge(styles, sx as SxProp)}
+            {...rest}
+            {...props}
+            onClick={clickHandler}
+            ref={forwardedRef}
+          >
+            {children}
+          </Link>
+        )
+      }}
     >
       {props.children}
     </Item>

src/ActionList/shared.ts

@@ -42,9 +42,19 @@ export type ActionListItemProps = {
   /**
    * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
    */
-  _PrivateItemWrapper?: React.FC<React.PropsWithChildren<unknown>>
+  _PrivateItemWrapper?: React.FC<React.PropsWithChildren<MenuItemProps>>
 } & SxProp
 
+type MenuItemProps = {
+  onClick?: (event: React.MouseEvent) => void
+  onKeyPress?: (event: React.KeyboardEvent) => void
+  'aria-disabled'?: boolean
+  tabIndex?: number
+  'aria-labelledby'?: string
+  'aria-describedby'?: string
+  role?: string
+}
+
 export type ItemContext = Pick<ActionListItemProps, 'variant' | 'disabled'> & {
   inlineDescriptionId: string
   blockDescriptionId: string

src/__tests__/ActionList.test.tsx

@@ -155,6 +155,20 @@ describe('ActionList', () => {
     expect(option).toBeInTheDocument()
   })
 
+  it('should call onClick for a link item', async () => {
+    const onClick = jest.fn()
+    const component = HTMLRender(
+      <ActionList role="listbox">
+        <ActionList.LinkItem role="link" onClick={onClick}>
+          Primer React
+        </ActionList.LinkItem>
+      </ActionList>,
+    )
+    const link = await waitFor(() => component.getByRole('link'))
+    fireEvent.click(link)
+    expect(onClick).toHaveBeenCalled()
+  })
+
   checkStoriesForAxeViolations('', '../ActionList/ActionList.features')
   checkStoriesForAxeViolations('', '../ActionList/ActionList.examples')
 })