diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx index d7b8b23e91..062f7b8f32 100644 --- a/packages/odyssey-react-mui/src/MenuItem.tsx +++ b/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>( + (event) => { + onClickProp?.(event); + closeMenu(); + }, + [onClickProp, closeMenu] + ); + return ( - {props.children} + {children} ); };