From a66c18a7660abd9d388fd80bc2dbb10e7a637602 Mon Sep 17 00:00:00 2001 From: Kostiantyn Dvornik Date: Wed, 8 May 2024 23:25:44 +0300 Subject: [PATCH 1/3] chore: add menuItemProps to dropdown --- dist/mui/components/dropdown/Dropdown.d.ts | 5 +++++ dist/mui/components/dropdown/Dropdown.js | 5 +---- .../mui/components/dropdown/DropdownItem.d.ts | 8 +++---- dist/mui/components/dropdown/DropdownItem.js | 6 +++--- src/mui/components/dropdown/Dropdown.tsx | 12 ++++++++--- src/mui/components/dropdown/DropdownItem.tsx | 21 ++++++++++++------- 6 files changed, 35 insertions(+), 22 deletions(-) diff --git a/dist/mui/components/dropdown/Dropdown.d.ts b/dist/mui/components/dropdown/Dropdown.d.ts index 105fa1cd..a896ea34 100644 --- 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 index 98d16ae6..492493b0 100644 --- 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 index 3befce84..04bd11e9 100644 --- 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) => void; + onMenuItemClick: (id: string, event: React.MouseEvent) => 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 index a7b9511a..e9809075 100644 --- 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 index adff5e7e..d8eb88ac 100644 --- 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} + ); })} diff --git a/src/mui/components/dropdown/DropdownItem.tsx b/src/mui/components/dropdown/DropdownItem.tsx index ac4fdbf1..f94559de 100644 --- a/src/mui/components/dropdown/DropdownItem.tsx +++ b/src/mui/components/dropdown/DropdownItem.tsx @@ -1,18 +1,17 @@ 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) => void; + onMenuItemClick: (id: string, event: React.MouseEvent) => void; showCheckIcon?: boolean; - content: string | React.ReactElement; endIcon?: React.ReactElement; } @@ -20,20 +19,26 @@ export function DropdownItem({ disabled = false, icon, id, - onClick, + onMenuItemClick, showCheckIcon = false, endIcon, - content, + children, + ...restProps }: DropdownItemProps) { return ( - onClick(id, event)}> + onMenuItemClick(id, event)} + // eslint-disable-next-line react/jsx-props-no-spreading + {...restProps}> {icon !== false ? ( {icon || } ) : null} - {content} + {children} {showCheckIcon ? ( From 6bbf4e5d11ba30fead77a882c2429572685c8996 Mon Sep 17 00:00:00 2001 From: Kostiantyn Dvornik Date: Wed, 8 May 2024 23:38:47 +0300 Subject: [PATCH 2/3] chore: add menuItemProps to dropdown --- dist/mui/components/dropdown/Dropdown.d.ts | 10 +++++++++- src/mui/components/dropdown/Dropdown.tsx | 10 +++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/dist/mui/components/dropdown/Dropdown.d.ts b/dist/mui/components/dropdown/Dropdown.d.ts index a896ea34..cc274d3b 100644 --- a/dist/mui/components/dropdown/Dropdown.d.ts +++ b/dist/mui/components/dropdown/Dropdown.d.ts @@ -3,6 +3,13 @@ import { PopperPlacementType, PopperProps } from "@mui/material/Popper"; import React from "react"; import { DefaultDropdownButtonProps } from "./DefaultDropdownButton"; import { DropdownItemProps } from "./DropdownItem"; +/** + * Add data- html attributes + * @see https://github.com/microsoft/TypeScript/issues/28960#issuecomment-903519759 + * */ +interface HTMLAttributes extends React.HTMLAttributes { + [dataAttribute: `data-${string}`]: any; +} export interface DropdownAction { id: DropdownItemProps["id"]; onClick: (action: DropdownAction, event: React.MouseEvent) => void; @@ -19,7 +26,7 @@ export interface DropdownAction { /** * Pass any MUI MenuItem props here to customize appearance or html properties */ - menuItemProps?: MenuItemProps; + menuItemProps?: MenuItemProps & HTMLAttributes; } export interface DropdownProps { id?: string; @@ -42,3 +49,4 @@ export interface DropdownProps { * to dropdown menu items. */ export default function Dropdown({ id, actions, buttonContent, popperProps, children, disabled, paperPlacement, className, buttonProps, }: DropdownProps): React.JSX.Element; +export {}; diff --git a/src/mui/components/dropdown/Dropdown.tsx b/src/mui/components/dropdown/Dropdown.tsx index d8eb88ac..5969171f 100644 --- a/src/mui/components/dropdown/Dropdown.tsx +++ b/src/mui/components/dropdown/Dropdown.tsx @@ -16,6 +16,14 @@ import React, { useCallback, useRef, useState } from "react"; import { DefaultDropdownButton, DefaultDropdownButtonProps } from "./DefaultDropdownButton"; import { DropdownItem, DropdownItemProps } from "./DropdownItem"; +/** + * Add data- html attributes + * @see https://github.com/microsoft/TypeScript/issues/28960#issuecomment-903519759 + * */ +interface HTMLAttributes extends React.HTMLAttributes { + [dataAttribute: `data-${string}`]: any; +} + export interface DropdownAction { id: DropdownItemProps["id"]; onClick: (action: DropdownAction, event: React.MouseEvent) => void; @@ -32,7 +40,7 @@ export interface DropdownAction { /** * Pass any MUI MenuItem props here to customize appearance or html properties */ - menuItemProps?: MenuItemProps; + menuItemProps?: MenuItemProps & HTMLAttributes; } export interface DropdownProps { From 84c202738eb31d350ba4dca77239acc0b908f963 Mon Sep 17 00:00:00 2001 From: Kostiantyn Dvornik Date: Tue, 14 May 2024 16:37:21 +0300 Subject: [PATCH 3/3] chore: rename variable --- dist/mui/components/dropdown/DropdownItem.d.ts | 2 +- dist/mui/components/dropdown/DropdownItem.js | 4 ++-- src/mui/components/dropdown/DropdownItem.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dist/mui/components/dropdown/DropdownItem.d.ts b/dist/mui/components/dropdown/DropdownItem.d.ts index 04bd11e9..2813c3fa 100644 --- a/dist/mui/components/dropdown/DropdownItem.d.ts +++ b/dist/mui/components/dropdown/DropdownItem.d.ts @@ -8,4 +8,4 @@ export interface DropdownItemProps extends MenuItemProps { showCheckIcon?: boolean; endIcon?: React.ReactElement; } -export declare function DropdownItem({ disabled, icon, id, onMenuItemClick, showCheckIcon, endIcon, children, ...restProps }: DropdownItemProps): React.JSX.Element; +export declare function DropdownItem({ disabled, icon, id, onMenuItemClick, showCheckIcon, endIcon, children, ...otherProps }: DropdownItemProps): React.JSX.Element; diff --git a/dist/mui/components/dropdown/DropdownItem.js b/dist/mui/components/dropdown/DropdownItem.js index e9809075..b3b5d84e 100644 --- a/dist/mui/components/dropdown/DropdownItem.js +++ b/dist/mui/components/dropdown/DropdownItem.js @@ -4,8 +4,8 @@ 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, onMenuItemClick, showCheckIcon = false, endIcon, children, ...restProps }) { - return (React.createElement(MenuItem, { id: id, disabled: disabled, onClick: (event) => onMenuItemClick(id, event), ...restProps }, +export function DropdownItem({ disabled = false, icon, id, onMenuItemClick, showCheckIcon = false, endIcon, children, ...otherProps }) { + return (React.createElement(MenuItem, { id: id, disabled: disabled, onClick: (event) => onMenuItemClick(id, event), ...otherProps }, 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" }, children), showCheckIcon ? (React.createElement(IconByName, { name: "shapes.check", htmlColor: green[500], fontSize: "large" })) : null, diff --git a/src/mui/components/dropdown/DropdownItem.tsx b/src/mui/components/dropdown/DropdownItem.tsx index f94559de..475d009b 100644 --- a/src/mui/components/dropdown/DropdownItem.tsx +++ b/src/mui/components/dropdown/DropdownItem.tsx @@ -23,7 +23,7 @@ export function DropdownItem({ showCheckIcon = false, endIcon, children, - ...restProps + ...otherProps }: DropdownItemProps) { return ( onMenuItemClick(id, event)} // eslint-disable-next-line react/jsx-props-no-spreading - {...restProps}> + {...otherProps}> {icon !== false ? ( {icon || } ) : null}