diff --git a/packages/react/src/components/OptionsMenu/OptionsMenuItem.tsx b/packages/react/src/components/OptionsMenu/OptionsMenuItem.tsx index 52205d1e3..718bfe7ff 100644 --- a/packages/react/src/components/OptionsMenu/OptionsMenuItem.tsx +++ b/packages/react/src/components/OptionsMenu/OptionsMenuItem.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { forwardRef } from 'react'; export interface OptionsMenuItemProps extends Pick< @@ -11,39 +11,45 @@ export interface OptionsMenuItemProps onSelect: (e: React.MouseEvent) => void; } -class OptionsMenuItemComponent extends React.Component { - static defaultProps = { - // eslint-disable-next-line @typescript-eslint/no-empty-function - onSelect: () => {} - }; - - handleClick = (event: React.MouseEvent) => { - const { disabled, onSelect } = this.props; +function OptionsMenuItemComponent({ + disabled, + className, + menuItemRef, + onSelect = () => {}, // eslint-disable-line @typescript-eslint/no-empty-function + ...other +}: OptionsMenuItemProps) { + function handleClick(event: React.MouseEvent) { if (!disabled) { onSelect(event); } - }; - - render() { - const { handleClick, props } = this; - const { menuItemRef, disabled, onSelect, ...other } = props; - return ( - // keydown happens in OptionsMenu which proxies to click - // eslint-disable-next-line jsx-a11y/click-events-have-key-events -
  • - ); } + + return ( + // keydown happens in OptionsMenu which proxies to click + // eslint-disable-next-line jsx-a11y/click-events-have-key-events +
  • + ); } -export default React.forwardRef(function OptionsMenuItem( - props: OptionsMenuItemProps, - ref: React.Ref -) { - return ; -}); +const OptionsMenuItem = forwardRef( + ({ disabled, className, onSelect, ...other }, ref) => ( + + ) +); + +OptionsMenuItem.displayName = 'OptionsMenuItem'; + +export default OptionsMenuItem;