diff --git a/docs/pages/api-docs/data-grid/data-grid-pro.json b/docs/pages/api-docs/data-grid/data-grid-pro.json index eadd351af82b..b7cdedaa146b 100644 --- a/docs/pages/api-docs/data-grid/data-grid-pro.json +++ b/docs/pages/api-docs/data-grid/data-grid-pro.json @@ -190,10 +190,17 @@ "treeData": { "type": { "name": "bool" } } }, "slots": { + "BaseButton": { "default": "Button", "type": { "name": "elementType" } }, "BaseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, + "BaseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, + "BasePopper": { "default": "Popper", "type": { "name": "elementType" } }, + "BaseSelect": { "default": "Select", "type": { "name": "elementType" } }, + "BaseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, + "BaseTextField": { "default": "TextField", "type": { "name": "elementType" } }, + "BaseTooltip": { "default": "Tooltip", "type": { "name": "elementType" } }, "BooleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, "BooleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } }, - "Cell": { "type": { "name": "elementType" } }, + "Cell": { "default": "GridCell", "type": { "name": "elementType" } }, "ColumnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, "ColumnMenuIcon": { diff --git a/docs/pages/api-docs/data-grid/data-grid.json b/docs/pages/api-docs/data-grid/data-grid.json index b8d3a46a8d64..6d28bd2fe459 100644 --- a/docs/pages/api-docs/data-grid/data-grid.json +++ b/docs/pages/api-docs/data-grid/data-grid.json @@ -147,10 +147,17 @@ } }, "slots": { + "BaseButton": { "default": "Button", "type": { "name": "elementType" } }, "BaseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, + "BaseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, + "BasePopper": { "default": "Popper", "type": { "name": "elementType" } }, + "BaseSelect": { "default": "Select", "type": { "name": "elementType" } }, + "BaseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, + "BaseTextField": { "default": "TextField", "type": { "name": "elementType" } }, + "BaseTooltip": { "default": "Tooltip", "type": { "name": "elementType" } }, "BooleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, "BooleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } }, - "Cell": { "type": { "name": "elementType" } }, + "Cell": { "default": "GridCell", "type": { "name": "elementType" } }, "ColumnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, "ColumnMenuIcon": { diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json index 5a9f493d305f..c531a1223be7 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json @@ -414,8 +414,15 @@ } }, "slotDescriptions": { - "Cell": "Component rendered for each cell.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "BaseTextField": "The custom TextField component used in the grid.", + "BaseFormControl": "The custom FormControl component used in the grid.", + "BaseSelect": "The custom Select component used in the grid.", + "BaseSwitch": "The custom Switch component used in the grid.", + "BaseButton": "The custom Button component used in the grid.", + "BaseTooltip": "The custom Tooltip component used in the grid.", + "BasePopper": "The custom Popper component used in the grid.", + "Cell": "Component rendered for each cell.", "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", "Footer": "Footer component rendered at the bottom of the grid viewport.", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json index 5a9f493d305f..c531a1223be7 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json @@ -414,8 +414,15 @@ } }, "slotDescriptions": { - "Cell": "Component rendered for each cell.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "BaseTextField": "The custom TextField component used in the grid.", + "BaseFormControl": "The custom FormControl component used in the grid.", + "BaseSelect": "The custom Select component used in the grid.", + "BaseSwitch": "The custom Switch component used in the grid.", + "BaseButton": "The custom Button component used in the grid.", + "BaseTooltip": "The custom Tooltip component used in the grid.", + "BasePopper": "The custom Popper component used in the grid.", + "Cell": "Component rendered for each cell.", "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", "Footer": "Footer component rendered at the bottom of the grid viewport.", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 5a9f493d305f..c531a1223be7 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -414,8 +414,15 @@ } }, "slotDescriptions": { - "Cell": "Component rendered for each cell.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "BaseTextField": "The custom TextField component used in the grid.", + "BaseFormControl": "The custom FormControl component used in the grid.", + "BaseSelect": "The custom Select component used in the grid.", + "BaseSwitch": "The custom Switch component used in the grid.", + "BaseButton": "The custom Button component used in the grid.", + "BaseTooltip": "The custom Tooltip component used in the grid.", + "BasePopper": "The custom Popper component used in the grid.", + "Cell": "Component rendered for each cell.", "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", "Footer": "Footer component rendered at the bottom of the grid viewport.", diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json index 3df21680c23c..9f0cf40c940a 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-pt.json @@ -390,8 +390,15 @@ } }, "slotDescriptions": { - "Cell": "Component rendered for each cell.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "BaseTextField": "The custom TextField component used in the grid.", + "BaseFormControl": "The custom FormControl component used in the grid.", + "BaseSelect": "The custom Select component used in the grid.", + "BaseSwitch": "The custom Switch component used in the grid.", + "BaseButton": "The custom Button component used in the grid.", + "BaseTooltip": "The custom Tooltip component used in the grid.", + "BasePopper": "The custom Popper component used in the grid.", + "Cell": "Component rendered for each cell.", "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", "Footer": "Footer component rendered at the bottom of the grid viewport.", diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json index 3df21680c23c..9f0cf40c940a 100644 --- a/docs/translations/api-docs/data-grid/data-grid-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-zh.json @@ -390,8 +390,15 @@ } }, "slotDescriptions": { - "Cell": "Component rendered for each cell.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "BaseTextField": "The custom TextField component used in the grid.", + "BaseFormControl": "The custom FormControl component used in the grid.", + "BaseSelect": "The custom Select component used in the grid.", + "BaseSwitch": "The custom Switch component used in the grid.", + "BaseButton": "The custom Button component used in the grid.", + "BaseTooltip": "The custom Tooltip component used in the grid.", + "BasePopper": "The custom Popper component used in the grid.", + "Cell": "Component rendered for each cell.", "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", "Footer": "Footer component rendered at the bottom of the grid viewport.", diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 3df21680c23c..9f0cf40c940a 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -390,8 +390,15 @@ } }, "slotDescriptions": { - "Cell": "Component rendered for each cell.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "BaseTextField": "The custom TextField component used in the grid.", + "BaseFormControl": "The custom FormControl component used in the grid.", + "BaseSelect": "The custom Select component used in the grid.", + "BaseSwitch": "The custom Switch component used in the grid.", + "BaseButton": "The custom Button component used in the grid.", + "BaseTooltip": "The custom Tooltip component used in the grid.", + "BasePopper": "The custom Popper component used in the grid.", + "Cell": "Component rendered for each cell.", "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", "Footer": "Footer component rendered at the bottom of the grid viewport.", diff --git a/packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx b/packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx index d3defefaa566..e511b6001bd9 100644 --- a/packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx +++ b/packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx @@ -5,7 +5,6 @@ import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect, } from '@mui/material/utils'; -import Checkbox from '@mui/material/Checkbox'; import { getDataGridUtilityClass } from '../../gridClasses'; import { GridRenderEditCellParams } from '../../models/params/gridCellParams'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; @@ -76,12 +75,13 @@ export function GridEditBooleanCell( return ( ); diff --git a/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx b/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx index 8c92f64fb009..71e3a911c29c 100644 --- a/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx +++ b/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils'; -import Select, { SelectProps } from '@mui/material/Select'; +import { SelectProps } from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem'; import { GridRenderEditCellParams, @@ -110,7 +110,7 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit {valueOptionsFormatted.map(renderSingleSelectOptions)} - + ); } diff --git a/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx b/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx index efb8d534d9f4..eff8dc770faa 100644 --- a/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx +++ b/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { unstable_composeClasses as composeClasses } from '@mui/material'; import IconButton from '@mui/material/IconButton'; import Badge from '@mui/material/Badge'; -import Tooltip from '@mui/material/Tooltip'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; @@ -69,13 +68,14 @@ export function ColumnHeaderFilterIcon(props: ColumnHeaderFilterIconProps) { ); return ( - {counter > 1 && ( @@ -85,6 +85,6 @@ export function ColumnHeaderFilterIcon(props: ColumnHeaderFilterIconProps) { )} {counter === 1 && iconButton} - + ); } diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderTitle.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderTitle.tsx index 0812c1bd7c41..e504d0ae5421 100644 --- a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderTitle.tsx +++ b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderTitle.tsx @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@mui/material'; import { styled } from '@mui/material/styles'; -import Tooltip from '@mui/material/Tooltip'; import { isOverflown } from '../../utils/domUtils'; import { getDataGridUtilityClass } from '../../gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; @@ -55,6 +54,7 @@ export interface GridColumnHeaderTitleProps { // No React.memo here as if we display the sort icon, we need to recalculate the isOver function GridColumnHeaderTitle(props: GridColumnHeaderTitleProps) { const { label, description, columnWidth } = props; + const rootProps = useGridRootProps(); const titleRef = React.useRef(null); const [tooltip, setTooltip] = React.useState(''); @@ -70,9 +70,12 @@ function GridColumnHeaderTitle(props: GridColumnHeaderTitleProps) { }, [titleRef, columnWidth, description, label]); return ( - + {label} - + ); } diff --git a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx index 46d130f2b08a..bfd9de92e3a8 100644 --- a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx +++ b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx @@ -92,12 +92,14 @@ const GridMenu = (props: GridMenuProps) => { return ( {({ TransitionProps, placement }) => ( diff --git a/packages/grid/_modules_/grid/components/panel/GridColumnsPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridColumnsPanel.tsx index fd8a9217f3c4..231277deea3f 100644 --- a/packages/grid/_modules_/grid/components/panel/GridColumnsPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridColumnsPanel.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; import { unstable_composeClasses as composeClasses } from '@mui/material'; import IconButton from '@mui/material/IconButton'; -import Switch, { switchClasses } from '@mui/material/Switch'; -import Button from '@mui/material/Button'; +import { switchClasses } from '@mui/material/Switch'; import FormControlLabel from '@mui/material/FormControlLabel'; -import TextField from '@mui/material/TextField'; import { styled } from '@mui/material/styles'; import { allGridColumnsSelector } from '../../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../../hooks/utils/useGridSelector'; @@ -116,7 +114,7 @@ export function GridColumnsPanel() { return ( - @@ -132,13 +131,14 @@ export function GridColumnsPanel() { } label={column.headerName || column.field} @@ -159,12 +159,20 @@ export function GridColumnsPanel() { - - + ); diff --git a/packages/grid/_modules_/grid/components/panel/GridPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridPanel.tsx index 6bd751183bb3..88ff7d79a31e 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanel.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { styled } from '@mui/material/styles'; +import { MUIStyledCommonProps } from '@mui/system'; +import { styled, Theme } from '@mui/material/styles'; import { generateUtilityClasses, InternalStandardProps as StandardProps } from '@mui/material'; import ClickAwayListener from '@mui/material/ClickAwayListener'; import Paper from '@mui/material/Paper'; @@ -16,7 +17,8 @@ export interface GridPanelClasses { paper: string; } -export interface GridPanelProps extends StandardProps { +export interface GridPanelProps + extends StandardProps & PopperProps, 'children'> { children?: React.ReactNode; /** * Override or extend the styles applied to the component. @@ -47,7 +49,7 @@ const GridPaperRoot = styled(Paper, { })); const GridPanel = React.forwardRef((props, ref) => { - const { children, className, open, classes: classesProp, ...other } = props; + const { children, className, classes: classesProp, ...other } = props; const apiRef = useGridApiContext(); const classes = gridPanelClasses; const [isPlaced, setIsPlaced] = React.useState(false); @@ -76,7 +78,6 @@ const GridPanel = React.forwardRef((props, ref) ref={ref} placement="bottom-start" className={clsx(className, classes.panel)} - open={open} anchorEl={anchorEl} modifiers={[ { diff --git a/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx index 54084967c1d7..ab25be8ffd68 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx @@ -22,9 +22,11 @@ export const GridPreferencesPanel = React.forwardRef< return ( 0 && preferencePanelState.open} {...rootProps.componentsProps?.panel} {...props} + {...rootProps.componentsProps?.basePopper} > {!rootProps.disableColumnSelector && isColumnsTabOpen && ( diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index 55c45641781e..2e02fb581918 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@mui/material'; -import FormControl from '@mui/material/FormControl'; import IconButton from '@mui/material/IconButton'; import InputLabel from '@mui/material/InputLabel'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import { SelectChangeEvent } from '@mui/material/Select'; import { capitalize, unstable_useId as useId } from '@mui/material/utils'; import { styled } from '@mui/material/styles'; import { filterableGridColumnsSelector } from '../../../hooks/features/columns/gridColumnsSelector'; @@ -173,9 +172,10 @@ function GridFilterForm(props: GridFilterFormProps) { return ( - - - + {apiRef.current.getLocaleText('filterPanelOperators')} - - - + + + {apiRef.current.getLocaleText('filterPanelColumns')} - - - + + + {apiRef.current.getLocaleText('filterPanelOperators')} - - - + + + {currentOperator?.InputComponent ? ( ) : null} - + ); } diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputBoolean.tsx index c8fdcc934fad..8618a385642b 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputBoolean.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputBoolean.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; +import { TextFieldProps } from '@mui/material/TextField'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; +import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFieldProps) { const { item, applyValue, apiRef, focusElementRef, ...others } = props; const [filterValueState, setFilterValueState] = React.useState(item.value || ''); + const rootProps = useGridRootProps(); const onFilterChange = React.useCallback( (event) => { @@ -20,7 +22,7 @@ export function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFi }, [item.value]); return ( - - + ); } diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx index 624e10f82ef0..4933599cb6a8 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; +import { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/material/utils'; import { GridLoadIcon } from '../../icons/index'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; +import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; export type GridFilterInputDateProps = GridFilterInputValueProps & TextFieldProps & { type?: 'date' | 'datetime-local' }; @@ -12,11 +13,11 @@ export const SUBMIT_FILTER_DATE_STROKE_TIME = 500; function GridFilterInputDate(props: GridFilterInputDateProps) { const { item, applyValue, type, apiRef, focusElementRef, InputProps, ...other } = props; - const filterTimeout = React.useRef(); const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); const [applying, setIsApplying] = React.useState(false); const id = useId(); + const rootProps = useGridRootProps(); const onFilterChange = React.useCallback( (event: React.ChangeEvent) => { @@ -46,7 +47,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) { }, [item.value]); return ( - ); } diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx index 01ac8ea69016..10adaa63551b 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; +import { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/material/utils'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { GridColDef } from '../../../models/colDef/gridColDef'; import { GridApi } from '../../../models/api/gridApi'; +import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; const renderSingleSelectOptions = ( { valueOptions, valueFormatter, field }: GridColDef, @@ -44,6 +45,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { const { item, applyValue, type, apiRef, focusElementRef, ...others } = props; const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); const id = useId(); + const rootProps = useGridRootProps(); const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null; @@ -86,7 +88,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { }, [item, currentValueOptions, applyValue]); return ( - {renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)} - + ); } diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx index e8d30743960c..857c2309d6ea 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; +import { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/material/utils'; import { GridLoadIcon } from '../../icons/index'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { GridColDef } from '../../../models/colDef/gridColDef'; import { GridApi } from '../../../models/api/gridApi'; +import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; const warnedOnce = {}; function warnDeprecatedTypeSupport(type) { @@ -60,6 +61,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldPr const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); const [applying, setIsApplying] = React.useState(false); const id = useId(); + const rootProps = useGridRootProps(); const singleSelectProps: TextFieldProps = type === 'singleSelect' ? { @@ -116,7 +118,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldPr const InputProps = applying ? { endAdornment: } : others.InputProps; return ( - ); } diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx index b7bdac78e20e..571352c88269 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import Button from '@mui/material/Button'; import { GridFilterItem, GridLinkOperator } from '../../../models/gridFilterItem'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { GridAddIcon } from '../../icons'; @@ -101,9 +100,14 @@ export function GridFilterPanel() { {!rootProps.disableMultipleColumnsFiltering && ( - + )} diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx index 6f2a4cd663d5..c737ecc9fe51 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Button, { ButtonProps } from '@mui/material/Button'; +import { ButtonProps } from '@mui/material/Button'; import { useGridSelector } from '../../hooks/utils/useGridSelector'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; @@ -29,7 +29,7 @@ export const GridToolbarColumnsButton = React.forwardRef} {...other} onClick={showColumns} + {...rootProps.componentsProps?.baseButton} > {apiRef.current.getLocaleText('toolbarColumns')} - + ); }, ); diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx index 114bf5a785ce..e57e5e7ad0e3 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { unstable_useId as useId, useForkRef } from '@mui/material/utils'; import MenuList from '@mui/material/MenuList'; -import Button, { ButtonProps } from '@mui/material/Button'; +import { ButtonProps } from '@mui/material/Button'; import MenuItem from '@mui/material/MenuItem'; import ListItemIcon from '@mui/material/ListItemIcon'; import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector'; @@ -93,7 +93,7 @@ export const GridToolbarDensitySelector = React.forwardRef - + - + - - + + ); }, ); diff --git a/packages/grid/_modules_/grid/constants/defaultGridSlotsComponents.ts b/packages/grid/_modules_/grid/constants/defaultGridSlotsComponents.ts index 007008878173..dc7f643a3f7a 100644 --- a/packages/grid/_modules_/grid/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/_modules_/grid/constants/defaultGridSlotsComponents.ts @@ -1,4 +1,11 @@ import MUICheckbox from '@mui/material/Checkbox'; +import MUITextField from '@mui/material/TextField'; +import MUIFormControl from '@mui/material/FormControl'; +import MUISelect from '@mui/material/Select'; +import MUISwitch from '@mui/material/Switch'; +import MUIButton from '@mui/material/Button'; +import MUITooltip from '@mui/material/Tooltip'; +import MUIPopper from '@mui/material/Popper'; import { GridIconSlotsComponent, GridSlotsComponent } from '../models'; import { GridArrowDownwardIcon, @@ -56,8 +63,15 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS: GridIconSlotsComponent = { export const DEFAULT_GRID_SLOTS_COMPONENTS: GridSlotsComponent = { ...DEFAULT_GRID_ICON_SLOTS_COMPONENTS, - Cell: GridCell, BaseCheckbox: MUICheckbox, + BaseTextField: MUITextField, + BaseFormControl: MUIFormControl, + BaseSelect: MUISelect, + BaseSwitch: MUISwitch, + BaseButton: MUIButton, + BaseTooltip: MUITooltip, + BasePopper: MUIPopper, + Cell: GridCell, ColumnMenu: GridColumnMenu, ErrorOverlay, Footer: GridFooter, diff --git a/packages/grid/_modules_/grid/models/gridSlotsComponent.ts b/packages/grid/_modules_/grid/models/gridSlotsComponent.ts index aa912b427af5..b2db854e8511 100644 --- a/packages/grid/_modules_/grid/models/gridSlotsComponent.ts +++ b/packages/grid/_modules_/grid/models/gridSlotsComponent.ts @@ -6,15 +6,51 @@ import { GridIconSlotsComponent } from './gridIconSlotsComponent'; * TODO: Differentiate community and pro interface */ export interface GridSlotsComponent extends GridIconSlotsComponent { - /** - * Component rendered for each cell. - */ - Cell: React.JSXElementConstructor; /** * The custom Checkbox component used in the grid for both header and cells. * @default Checkbox */ BaseCheckbox: React.JSXElementConstructor; + /** + * The custom TextField component used in the grid. + * @default TextField + */ + BaseTextField: React.JSXElementConstructor; + /** + * The custom FormControl component used in the grid. + * @default FormControl + */ + BaseFormControl: React.JSXElementConstructor; + /** + * The custom Select component used in the grid. + * @default Select + */ + BaseSelect: React.JSXElementConstructor; + /** + * The custom Switch component used in the grid. + * @default Switch + */ + BaseSwitch: React.JSXElementConstructor; + /** + * The custom Button component used in the grid. + * @default Button + */ + BaseButton: React.JSXElementConstructor; + /** + * The custom Tooltip component used in the grid. + * @default Tooltip + */ + BaseTooltip: React.JSXElementConstructor; + /** + * The custom Popper component used in the grid. + * @default Popper + */ + BasePopper: React.JSXElementConstructor; + /** + * Component rendered for each cell. + * @default GridCell + */ + Cell: React.JSXElementConstructor; /** * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers. * @default GridColumnMenu diff --git a/packages/grid/_modules_/grid/models/gridSlotsComponentsProps.ts b/packages/grid/_modules_/grid/models/gridSlotsComponentsProps.ts index e3e2d8e3ed63..fd6c7d44dc36 100644 --- a/packages/grid/_modules_/grid/models/gridSlotsComponentsProps.ts +++ b/packages/grid/_modules_/grid/models/gridSlotsComponentsProps.ts @@ -3,6 +3,13 @@ */ export interface GridSlotsComponentsProps { baseCheckbox?: any; + baseTextField?: any; + baseFormControl?: any; + baseSelect?: any; + baseSwitch?: any; + baseButton?: any; + basePopper?: any; + baseTooltip?: any; cell?: any; columnMenu?: any; columnsPanel?: any;