diff --git a/.changeset/poor-melons-share.md b/.changeset/poor-melons-share.md
new file mode 100644
index 00000000000..cf419b7a19c
--- /dev/null
+++ b/.changeset/poor-melons-share.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Making onClick of ActionList.LinkItem functional
diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx
index daea8a98ddc..d4decbe2292 100644
--- a/src/ActionList/LinkItem.tsx
+++ b/src/ActionList/LinkItem.tsx
@@ -39,11 +39,24 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr
- (
-
- {children}
-
- )}
+ _PrivateItemWrapper={({children, onClick, ...rest}) => {
+ const clickHandler = (event: React.MouseEvent) => {
+ onClick && onClick(event)
+ props.onClick && props.onClick(event as React.MouseEvent)
+ }
+ return (
+
+ {children}
+
+ )
+ }}
>
{props.children}
diff --git a/src/ActionList/shared.ts b/src/ActionList/shared.ts
index 013d1b2d2f3..6e281c46b9e 100644
--- a/src/ActionList/shared.ts
+++ b/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>
+ _PrivateItemWrapper?: React.FC>
} & 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 & {
inlineDescriptionId: string
blockDescriptionId: string
diff --git a/src/__tests__/ActionList.test.tsx b/src/__tests__/ActionList.test.tsx
index 1de5efb63bf..02adf1cb11c 100644
--- a/src/__tests__/ActionList.test.tsx
+++ b/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(
+
+
+ Primer React
+
+ ,
+ )
+ const link = await waitFor(() => component.getByRole('link'))
+ fireEvent.click(link)
+ expect(onClick).toHaveBeenCalled()
+ })
+
checkStoriesForAxeViolations('', '../ActionList/ActionList.features')
checkStoriesForAxeViolations('', '../ActionList/ActionList.examples')
})