chore: add menuItemProps to dropdown

Exabyte-io · May 8, 2024 · a66c18a · a66c18a
1 parent 501dd93
commit a66c18a
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 22 deletions.
diff --git a/dist/mui/components/dropdown/Dropdown.d.ts b/dist/mui/components/dropdown/Dropdown.d.ts
@@ -1,3 +1,4 @@
+import { MenuItemProps } from "@mui/material";
 import { PopperPlacementType, PopperProps } from "@mui/material/Popper";
 import React from "react";
 import { DefaultDropdownButtonProps } from "./DefaultDropdownButton";
@@ -15,6 +16,10 @@ export interface DropdownAction {
     isShown?: boolean;
     isSelected?: boolean;
     isDivider?: boolean;
+    /**
+     * Pass any MUI MenuItem props here to customize appearance or html properties
+     */
+    menuItemProps?: MenuItemProps;
 }
 export interface DropdownProps {
     id?: string;

diff --git a/dist/mui/components/dropdown/Dropdown.js b/dist/mui/components/dropdown/Dropdown.js
@@ -1,6 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable react/jsx-props-no-spreading */
 import Box from "@mui/material/Box";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import Divider from "@mui/material/Divider";
@@ -62,6 +59,6 @@ export default function Dropdown({ id, actions, buttonContent, popperProps = {
                         if (action.isDivider) {
                             return React.createElement(Divider, { key: action.key || action.id });
                         }
-                        return (React.createElement(DropdownItem, { disabled: action.disabled, icon: action.icon, endIcon: action.endIcon, id: action.id, onClick: onMenuItemClick, showCheckIcon: action.showCheckIcon, content: action.content, key: action.key || action.id }));
+                        return (React.createElement(DropdownItem, { disabled: action.disabled, icon: action.icon, endIcon: action.endIcon, id: action.id, onMenuItemClick: onMenuItemClick, showCheckIcon: action.showCheckIcon, key: action.key || action.id, ...action.menuItemProps }, action.content));
                     })))))))));
 }
diff --git a/dist/mui/components/dropdown/DropdownItem.d.ts b/dist/mui/components/dropdown/DropdownItem.d.ts
@@ -1,11 +1,11 @@
+import { MenuItemProps } from "@mui/material/MenuItem";
 import React from "react";
-export interface DropdownItemProps {
+export interface DropdownItemProps extends MenuItemProps {
     disabled?: boolean;
     icon?: React.ReactElement | boolean;
     id: string;
-    onClick: (id: string, event: React.MouseEvent<HTMLLIElement>) => void;
+    onMenuItemClick: (id: string, event: React.MouseEvent<HTMLLIElement>) => void;
     showCheckIcon?: boolean;
-    content: string | React.ReactElement;
     endIcon?: React.ReactElement;
 }
-export declare function DropdownItem({ disabled, icon, id, onClick, showCheckIcon, endIcon, content, }: DropdownItemProps): React.JSX.Element;
+export declare function DropdownItem({ disabled, icon, id, onMenuItemClick, showCheckIcon, endIcon, children, ...restProps }: DropdownItemProps): React.JSX.Element;
diff --git a/dist/mui/components/dropdown/DropdownItem.js b/dist/mui/components/dropdown/DropdownItem.js
@@ -4,10 +4,10 @@ import ListItemText from "@mui/material/ListItemText";
 import MenuItem from "@mui/material/MenuItem";
 import React from "react";
 import IconByName from "../icon/IconByName";
-export function DropdownItem({ disabled = false, icon, id, onClick, showCheckIcon = false, endIcon, content, }) {
-    return (React.createElement(MenuItem, { id: id, disabled: disabled, onClick: (event) => onClick(id, event) },
+export function DropdownItem({ disabled = false, icon, id, onMenuItemClick, showCheckIcon = false, endIcon, children, ...restProps }) {
+    return (React.createElement(MenuItem, { id: id, disabled: disabled, onClick: (event) => onMenuItemClick(id, event), ...restProps },
         icon !== false ? (React.createElement(ListItemIcon, null, icon || React.createElement(IconByName, { name: "shapes.blurCircular" }))) : null,
-        React.createElement(ListItemText, { primaryTypographyProps: { variant: "caption", color: "text.primary" }, className: "DropdownItemText" }, content),
+        React.createElement(ListItemText, { primaryTypographyProps: { variant: "caption", color: "text.primary" }, className: "DropdownItemText" }, children),
         showCheckIcon ? (React.createElement(IconByName, { name: "shapes.check", htmlColor: green[500], fontSize: "large" })) : null,
         endIcon));
 }
diff --git a/src/mui/components/dropdown/Dropdown.tsx b/src/mui/components/dropdown/Dropdown.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/jsx-props-no-spreading */
+import { MenuItemProps } from "@mui/material";
 import Box from "@mui/material/Box";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import Divider from "@mui/material/Divider";
@@ -28,6 +29,10 @@ export interface DropdownAction {
     isShown?: boolean;
     isSelected?: boolean;
     isDivider?: boolean;
+    /**
+     * Pass any MUI MenuItem props here to customize appearance or html properties
+     */
+    menuItemProps?: MenuItemProps;
 }
 
 export interface DropdownProps {
@@ -140,11 +145,12 @@ export default function Dropdown({
                                                     icon={action.icon}
                                                     endIcon={action.endIcon}
                                                     id={action.id}
-                                                    onClick={onMenuItemClick}
+                                                    onMenuItemClick={onMenuItemClick}
                                                     showCheckIcon={action.showCheckIcon}
-                                                    content={action.content}
                                                     key={action.key || action.id}
-                                                />
+                                                    {...action.menuItemProps}>
+                                                    {action.content}
+                                                </DropdownItem>
                                             );
                                         })}
                                 </MenuList>

diff --git a/src/mui/components/dropdown/DropdownItem.tsx b/src/mui/components/dropdown/DropdownItem.tsx
@@ -1,39 +1,44 @@
 import { green } from "@mui/material/colors";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import MenuItem from "@mui/material/MenuItem";
+import MenuItem, { MenuItemProps } from "@mui/material/MenuItem";
 import React from "react";
 
 import IconByName from "../icon/IconByName";
 
-export interface DropdownItemProps {
+export interface DropdownItemProps extends MenuItemProps {
     disabled?: boolean;
     icon?: React.ReactElement | boolean;
     id: string;
-    onClick: (id: string, event: React.MouseEvent<HTMLLIElement>) => void;
+    onMenuItemClick: (id: string, event: React.MouseEvent<HTMLLIElement>) => void;
     showCheckIcon?: boolean;
-    content: string | React.ReactElement;
     endIcon?: React.ReactElement;
 }
 
 export function DropdownItem({
     disabled = false,
     icon,
     id,
-    onClick,
+    onMenuItemClick,
     showCheckIcon = false,
     endIcon,
-    content,
+    children,
+    ...restProps
 }: DropdownItemProps) {
     return (
-        <MenuItem id={id} disabled={disabled} onClick={(event) => onClick(id, event)}>
+        <MenuItem
+            id={id}
+            disabled={disabled}
+            onClick={(event) => onMenuItemClick(id, event)}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...restProps}>
             {icon !== false ? (
                 <ListItemIcon>{icon || <IconByName name="shapes.blurCircular" />}</ListItemIcon>
             ) : null}
             <ListItemText
                 primaryTypographyProps={{ variant: "caption", color: "text.primary" }}
                 className="DropdownItemText">
-                {content}
+                {children}
             </ListItemText>
             {showCheckIcon ? (
                 <IconByName name="shapes.check" htmlColor={green[500]} fontSize="large" />