refactor: make MenuItem use our own props

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

@@ -10,40 +10,80 @@
  * 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 ReactNode } from "react";
 
 import { MenuContext } from "./MenuContext";
 
-export interface MenuItemProps
-  extends Omit<
-    MuiMenuItemProps,
-    | "component"
-    | "dense"
-    | "disableGutters"
-    | "divider"
-    | "focusVisibleClassName"
-  > {
+export type MenuItemProps = {
   /**
-   * Toggles whether or not the MenuItem represents a destructive action.
+   * The content of the menu item.
+   */
+  children: ReactNode;
+  /**
+   * If `true`, the menu item will receive focus automatically.
+   */
+  hasInitialFocus?: boolean;
+  /**
+   * If `true`, the menu item will be visually marked as selected.
+   */
+  isSelected?: boolean;
+  /**
+   * If `true`, the menu item will be visually marked as destructive.
    */
   isDestructive?: boolean;
-}
+  /**
+   * Callback fired when the menu item is clicked.
+   */
+  onClick?: MuiMenuItemProps["onClick"];
+  /**
+   * The value associated with the menu item.
+   */
+  value?: string;
+  /**
+   * The variant of the menu item.
+   * - "default": The default variant.
+   * - "destructive": A variant indicating a destructive action.
+   */
+  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<MuiMenuItemProps["onClick"]>(
+    (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>
   );
 };