From e3fb0a94e5ac56a286278c6820a1b49748f2feed Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Thu, 17 Oct 2024 16:42:46 -0400 Subject: [PATCH 1/3] refactor: remove some Box & Badge --- .../x/api/data-grid/data-grid-premium.json | 12 ++++++++++++ docs/pages/x/api/data-grid/data-grid-pro.json | 12 ++++++++++++ docs/pages/x/api/data-grid/data-grid.json | 12 ++++++++++++ .../data-grid-premium/data-grid-premium.json | 2 ++ .../data-grid-pro/data-grid-pro.json | 2 ++ .../data-grid/data-grid/data-grid.json | 2 ++ .../GridDataSourceTreeDataGroupingCell.tsx | 5 ++--- .../GridColumnHeaderFilterIconButton.tsx | 5 ++--- .../GridColumnHeaderSortIcon.tsx | 5 ++--- .../src/components/toolbar/GridToolbar.tsx | 3 +-- .../toolbar/GridToolbarFilterButton.tsx | 5 ++--- .../columnMenu/useGridColumnMenuSlots.ts | 6 ++++-- packages/x-data-grid/src/joy/joySlots.tsx | 19 +++++++++++++++++++ packages/x-data-grid/src/material/index.ts | 4 ++++ .../src/models/gridSlotsComponent.ts | 10 ++++++++++ .../src/models/gridSlotsComponentsProps.ts | 7 +++++++ scripts/x-data-grid-premium.exports.json | 2 ++ scripts/x-data-grid-pro.exports.json | 2 ++ scripts/x-data-grid.exports.json | 2 ++ 19 files changed, 101 insertions(+), 16 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 478f8854a196..99283c51b8ae 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -796,12 +796,24 @@ "default": "GridRow", "class": "MuiDataGridPremium-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 54a8ab54294e..3a0923e1a1d9 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -728,12 +728,24 @@ "default": "GridRow", "class": "MuiDataGridPro-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 25e56f8402bc..87da7c9e9a81 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -615,12 +615,24 @@ "default": "GridRow", "class": "MuiDataGrid-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 5e463ec7b112..dc242fd21180 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -1230,9 +1230,11 @@ } }, "slotDescriptions": { + "baseBadge": "The custom Badge component used in the grid for both header and cells.", "baseButton": "The custom Button component used in the grid.", "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseChip": "The custom Chip component used in the grid.", + "baseDivider": "The custom Divider component used in the grid.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", "baseInputAdornment": "The custom InputAdornment component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index b2b762362095..42302d388bbf 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -1168,9 +1168,11 @@ } }, "slotDescriptions": { + "baseBadge": "The custom Badge component used in the grid for both header and cells.", "baseButton": "The custom Button component used in the grid.", "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseChip": "The custom Chip component used in the grid.", + "baseDivider": "The custom Divider component used in the grid.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", "baseInputAdornment": "The custom InputAdornment component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index 9cf3ea258f2a..141c83b1b2eb 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -1048,9 +1048,11 @@ } }, "slotDescriptions": { + "baseBadge": "The custom Badge component used in the grid for both header and cells.", "baseButton": "The custom Button component used in the grid.", "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseChip": "The custom Chip component used in the grid.", + "baseDivider": "The custom Divider component used in the grid.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", "baseInputAdornment": "The custom InputAdornment component used in the grid.", diff --git a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx index 79e002211adf..d5ee7aa79ab5 100644 --- a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx +++ b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import composeClasses from '@mui/utils/composeClasses'; import Box from '@mui/material/Box'; -import Badge from '@mui/material/Badge'; import { getDataGridUtilityClass, GridRenderCellParams, @@ -93,9 +92,9 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps) {...rootProps?.slotProps?.baseIconButton} > - + - + ) : null; diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx index d48bc0ccdfe2..92641c45e46e 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils'; -import Badge from '@mui/material/Badge'; import { useGridSelector } from '../../hooks'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; @@ -97,9 +96,9 @@ function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonPro > {counter > 1 && ( - + {iconButton} - + )} {counter === 1 && iconButton} diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx index 367931b7e3c9..778579bcc0e3 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; -import Badge from '@mui/material/Badge'; import { GridSlotsComponent } from '../../models/gridSlotsComponent'; import { GridSortDirection } from '../../models/gridSortModel'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; @@ -80,9 +79,9 @@ function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps) { return ( {index != null && ( - + {iconButton} - + )} {index == null && iconButton} diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx index 216335a99ba3..260f22437210 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; import { GridToolbarContainer, GridToolbarContainerProps, @@ -61,7 +60,7 @@ const GridToolbar = React.forwardRef( // TODO: remove the reference to excelOptions in community package excelOptions={excelOptions} /> - +
{showQuickFilter && } ); diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx index 2e286a44519d..5f7bbb6f473f 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx @@ -6,7 +6,6 @@ import { unstable_capitalize as capitalize, unstable_useId as useId, } from '@mui/utils'; -import Badge from '@mui/material/Badge'; import { ButtonProps } from '@mui/material/Button'; import { TooltipProps } from '@mui/material/Tooltip'; import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector'; @@ -144,9 +143,9 @@ const GridToolbarFilterButton = React.forwardRef + - + } {...buttonProps} onClick={toggleFilter} diff --git a/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts index ee8b2fecd978..fbb6c996fd6f 100644 --- a/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts +++ b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import Divider from '@mui/material/Divider'; import { GridColumnMenuRootProps } from './columnMenuInterfaces'; import { GridColDef } from '../../../models/colDef/gridColDef'; +import { useGridRootProps } from '../../utils/useGridRootProps'; import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext'; interface UseGridColumnMenuSlotsProps extends GridColumnMenuRootProps { @@ -16,6 +16,7 @@ type UseGridColumnMenuSlotsResponse = Array< const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => { const apiRef = useGridPrivateApiContext(); + const rootProps = useGridRootProps(); const { defaultSlots, defaultSlotProps, @@ -71,7 +72,7 @@ const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => { itemProps = { ...itemProps, ...customProps }; } return addDividers && index !== sorted.length - 1 - ? [...acc, [processedComponents[key]!, itemProps], [Divider, {}]] + ? [...acc, [processedComponents[key]!, itemProps], [rootProps.slots.baseDivider, {}]] : [...acc, [processedComponents[key]!, itemProps]]; }, []); }, [ @@ -82,6 +83,7 @@ const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => { processedComponents, processedSlotProps, userItems, + rootProps.slots.baseDivider, ]); }; diff --git a/packages/x-data-grid/src/joy/joySlots.tsx b/packages/x-data-grid/src/joy/joySlots.tsx index 246799f568a6..bd0af2c4e45c 100644 --- a/packages/x-data-grid/src/joy/joySlots.tsx +++ b/packages/x-data-grid/src/joy/joySlots.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { ColorPaletteProp, Theme, VariantProp } from '@mui/joy/styles'; +import JoyBadge from '@mui/joy/Badge'; import JoyCheckbox from '@mui/joy/Checkbox'; +import JoyDivider from '@mui/joy/Divider'; import JoyInput from '@mui/joy/Input'; import JoyFormControl from '@mui/joy/FormControl'; import JoyFormLabel from '@mui/joy/FormLabel'; @@ -69,6 +71,21 @@ function convertVariant>( + ({ component, slotProps, variant, color, sx, ...props }, ref) => { + return ( + } + ref={ref as any} + /> + ); + }, +); + const Checkbox = React.forwardRef< HTMLElement, NonNullable @@ -374,7 +391,9 @@ const LoadingOverlay = React.forwardRef< const joySlots: Partial = { ...joyIconSlots, + baseBadge: Badge, baseCheckbox: Checkbox, + baseDivider: JoyDivider, baseTextField: TextField, baseButton: Button, baseIconButton: IconButton, diff --git a/packages/x-data-grid/src/material/index.ts b/packages/x-data-grid/src/material/index.ts index 6011f2c4606e..5377891acffc 100644 --- a/packages/x-data-grid/src/material/index.ts +++ b/packages/x-data-grid/src/material/index.ts @@ -1,4 +1,6 @@ +import MUIBadge from '@mui/material/Badge'; import MUICheckbox from '@mui/material/Checkbox'; +import MUIDivider from '@mui/material/Divider'; import MUITextField from '@mui/material/TextField'; import MUIFormControl from '@mui/material/FormControl'; import MUISelect from '@mui/material/Select'; @@ -81,7 +83,9 @@ const iconSlots: GridIconSlotsComponent = { const materialSlots: GridBaseSlots & GridIconSlotsComponent = { ...iconSlots, + baseBadge: MUIBadge, baseCheckbox: MUICheckbox, + baseDivider: MUIDivider, baseTextField: MUITextField, baseFormControl: MUIFormControl, baseSelect: MUISelect, diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts index 4fe7ea508c74..51fc7ccac3b8 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponent.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponent.ts @@ -5,6 +5,11 @@ import type { GridIconSlotsComponent } from './gridIconSlotsComponent'; export type { GridSlotProps } from './gridSlotsComponentsProps'; export interface GridBaseSlots { + /** + * The custom Badge component used in the grid for both header and cells. + * @default Badge + */ + baseBadge: React.JSXElementConstructor; /** * The custom Checkbox component used in the grid for both header and cells. * @default Checkbox @@ -15,6 +20,11 @@ export interface GridBaseSlots { * @default Chip */ baseChip: React.JSXElementConstructor; + /** + * The custom Divider component used in the grid. + * @default Divider + */ + baseDivider: React.JSXElementConstructor; /** * The custom InputAdornment component used in the grid. * @default InputAdornment diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index 6ea9c9f27613..fb3a00c76088 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import type { BadgeProps } from '@mui/material/Badge'; import type { CheckboxProps } from '@mui/material/Checkbox'; import type { TextFieldProps } from '@mui/material/TextField'; import type { FormControlProps } from '@mui/material/FormControl'; @@ -31,8 +32,12 @@ import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay'; import type { GridRowCountProps } from '../components/GridRowCount'; import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon'; +type DividerProps = {}; + // Overrides for module augmentation +export interface BaseBadgePropsOverrides {} export interface BaseCheckboxPropsOverrides {} +export interface BaseDividerPropsOverrides {} export interface BaseTextFieldPropsOverrides {} export interface BaseFormControlPropsOverrides {} export interface BaseSelectPropsOverrides {} @@ -66,7 +71,9 @@ export interface SkeletonCellPropsOverrides {} export interface RowPropsOverrides {} export interface GridSlotProps { + baseBadge: BadgeProps & BaseBadgePropsOverrides; baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides; + baseDivider: DividerProps & BaseDividerPropsOverrides; baseTextField: TextFieldProps & BaseTextFieldPropsOverrides; baseFormControl: FormControlProps & BaseFormControlPropsOverrides; baseSelect: SelectProps & BaseSelectPropsOverrides; diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 5c536da99e51..f6e08468b288 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -1,7 +1,9 @@ [ + { "name": "BaseBadgePropsOverrides", "kind": "Interface" }, { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseChipPropsOverrides", "kind": "Interface" }, + { "name": "BaseDividerPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index dcb194f6eac7..e88ab0b759cf 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -1,7 +1,9 @@ [ + { "name": "BaseBadgePropsOverrides", "kind": "Interface" }, { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseChipPropsOverrides", "kind": "Interface" }, + { "name": "BaseDividerPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index cc85a19301e4..8414b824889b 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -1,7 +1,9 @@ [ + { "name": "BaseBadgePropsOverrides", "kind": "Interface" }, { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseChipPropsOverrides", "kind": "Interface" }, + { "name": "BaseDividerPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, From 94ceb5d9eced1c6d8f1088e6f19dc7ece291aa63 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Thu, 17 Oct 2024 17:52:21 -0400 Subject: [PATCH 2/3] lint --- packages/x-data-grid/src/joy/joySlots.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/x-data-grid/src/joy/joySlots.tsx b/packages/x-data-grid/src/joy/joySlots.tsx index bd0af2c4e45c..2b6c750fd7ed 100644 --- a/packages/x-data-grid/src/joy/joySlots.tsx +++ b/packages/x-data-grid/src/joy/joySlots.tsx @@ -71,14 +71,13 @@ function convertVariant>( +const Badge = React.forwardRef>( ({ component, slotProps, variant, color, sx, ...props }, ref) => { return ( } ref={ref as any} /> From 54d48bc40f3d9c8bce8c25604f45ee2ed9da0af3 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Thu, 17 Oct 2024 17:52:35 -0400 Subject: [PATCH 3/3] lint --- packages/x-data-grid/src/joy/joySlots.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-data-grid/src/joy/joySlots.tsx b/packages/x-data-grid/src/joy/joySlots.tsx index 2b6c750fd7ed..a5645d892066 100644 --- a/packages/x-data-grid/src/joy/joySlots.tsx +++ b/packages/x-data-grid/src/joy/joySlots.tsx @@ -72,7 +72,7 @@ function convertVariant>( - ({ component, slotProps, variant, color, sx, ...props }, ref) => { + ({ slotProps, variant, color, sx, ...props }, ref) => { return (