refactor: make MenuItem use our own props

packages/odyssey-react-mui/src/MenuItem.tsx

@@ -10,40 +10,63 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { MenuItem as MuiMenuItem } from "@mui/material";
+import {
+  MenuItem as MuiMenuItem,
+  MenuItemProps as MuiMenuItemProps,
+} from "@mui/material";
 import { menuItemClasses } from "@mui/material/MenuItem";
-import type { MenuItemProps as MuiMenuItemProps } from "@mui/material";
-import { memo, useContext } from "react";
+import {
+  memo,
+  useCallback,
+  useContext,
+  type MouseEventHandler,
+  type ReactNode,
+} from "react";
 
 import { MenuContext } from "./MenuContext";
 
-export interface MenuItemProps
-  extends Omit<
-    MuiMenuItemProps,
-    | "component"
-    | "dense"
-    | "disableGutters"
-    | "divider"
-    | "focusVisibleClassName"
-  > {
-  /**
-   * Toggles whether or not the MenuItem represents a destructive action.
-   */
+export type MenuItemProps = {
+  children: ReactNode;
+  hasInitialFocus?: boolean;
+  isSelected?: boolean;
   isDestructive?: boolean;
-}
+  onClick?: MuiMenuItemProps["onClick"];
+  value?: string;
+  variant?: "default" | "destructive";
+};
 
-const MenuItem = ({ isDestructive, ...props }: MenuItemProps) => {
+const MenuItem = ({
+  children,
+  hasInitialFocus,
+  isSelected,
+  onClick: onClickProp,
+  value,
+  variant = "default",
+}: MenuItemProps) => {
   const { closeMenu } = useContext(MenuContext);
 
+  const onClick = useCallback<MouseEventHandler<HTMLLIElement>>(
+    (event) => {
+      onClickProp?.(event);
+      closeMenu();
+    },
+    [onClickProp, closeMenu]
+  );
+
   return (
     <MuiMenuItem
-      {...props}
-      onClick={closeMenu}
+      /* eslint-disable-next-line jsx-a11y/no-autofocus */
+      autoFocus={hasInitialFocus}
+      selected={isSelected}
+      value={value}
+      onClick={onClick}
       className={
-        isDestructive ? `${menuItemClasses.root}-destructive` : undefined
+        variant === "destructive"
+          ? `${menuItemClasses.root}-destructive`
+          : undefined
       }
     >
-      {props.children}
+      {children}
     </MuiMenuItem>
   );
 };