fix(MenuItem): Change div to button

Author: totase

src/components/MenuItem.tsx

@@ -1,35 +1,22 @@
-import { ReactNode, useState, useCallback } from 'react';
+import { useState, useCallback, ButtonHTMLAttributes } from 'react';
 import cx from 'clsx';
 
-export interface MenuItemProps {
-  /**
-   * Function to call when the item is clicked. Includes the click event.
-   */
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-  /**
-   * Whether the item is disabled.
-   *
-   * Default: `false`
-   */
-  disabled?: boolean;
-  className?: string;
-  children: ReactNode;
-}
+export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export interface MenuItemExternalProps {
   hide: () => void;
 }
 
 interface MenuItemState {
   clicked: boolean;
-  eventRef: React.MouseEvent<HTMLElement> | null;
+  eventRef: React.MouseEvent<HTMLButtonElement> | null;
 }
 
 const MenuItem = ({ children, onClick, className, disabled = false, ...rest }: MenuItemProps) => {
   const [state, setState] = useState<MenuItemState>({ clicked: false, eventRef: null });
 
   const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
+    (event: React.MouseEvent<HTMLButtonElement>) => {
       event.stopPropagation();
 
       if (!disabled && onClick) {
@@ -57,7 +44,7 @@ const MenuItem = ({ children, onClick, className, disabled = false, ...rest }: M
   });
 
   return (
-    <div
+    <button
       onClick={handleClick}
       onAnimationEnd={handleAnimationEnd}
       className={classNames}
@@ -66,7 +53,7 @@ const MenuItem = ({ children, onClick, className, disabled = false, ...rest }: M
       tabIndex={-1}
     >
       {children}
-    </div>
+    </button>
   );
 };
 

src/styles.css

@@ -105,12 +105,16 @@
 }
 
 .react-context-menu__item {
+  display: flex;
+  width: 100%;
+
   color: var(--react-context-menu-item-color);
   padding: var(--react-context-menu-padding-sm) var(--react-context-menu-padding-md);
 
   line-height: 1;
   font-size: var(--react-context-menu-font-size);
   border-radius: var(--react-context-menu-border-radius-inner);
+  border: none;
 
   user-select: none;
   -webkit-user-select: none;