@mui/x-data-grid 7.0.0-beta.0 → 7.0.0-beta.2

package/modern/DataGrid/DataGrid.js

@@ -305,7 +305,7 @@ DataGridRaw.propTypes = {
   loading: PropTypes.bool,
   /**
    * Set the locale text of the Data Grid.
-   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: PropTypes.object,
   /**

package/modern/DataGrid/useDataGridComponent.js

@@ -57,7 +57,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
-  useGridParamsApi(apiRef, props);
+  useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
   useGridEditing(apiRef, props);

package/modern/DataGrid/useDataGridProps.js

@@ -74,7 +74,9 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {
-  const themedProps = useProps(useThemeProps({
+  const themedProps = useProps(
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
   }));

package/modern/colDef/gridBooleanColDef.js

@@ -4,12 +4,9 @@ import { renderBooleanCell } from '../components/cell/GridBooleanCell';
 import { renderEditBooleanCell } from '../components/cell/GridEditBooleanCell';
 import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { getGridBooleanOperators } from './gridBooleanOperators';
-function gridBooleanFormatter({
-  value,
-  api
-}) {
-  return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
-}
+const gridBooleanFormatter = (value, row, column, apiRef) => {
+  return value ? apiRef.current.getLocaleText('booleanCellTrueLabel') : apiRef.current.getLocaleText('booleanCellFalseLabel');
+};
 const stringToBoolean = value => {
   switch (value.toLowerCase().trim()) {
     case 'true':

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -19,9 +19,10 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
-  valueGetter: params => {
-    const selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
-    return selectionLookup[params.id] !== undefined;
+  valueGetter: (value, row, column, apiRef) => {
+    const selectionLookup = selectedIdsLookupSelector(apiRef);
+    const rowId = apiRef.current.getRowId(row);
+    return selectionLookup[rowId] !== undefined;
   },
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),
   renderCell: params => /*#__PURE__*/_jsx(GridCellCheckboxRenderer, _extends({}, params))

package/modern/colDef/gridDateColDef.js

@@ -13,38 +13,32 @@ function throwIfNotDateObject({
     throw new Error([`MUI X: \`${columnType}\` column type only accepts \`Date\` objects as values.`, 'Use `valueGetter` to transform the value into a `Date` object.', `Row ID: ${rowId}, field: "${field}".`].join('\n'));
   }
 }
-export function gridDateFormatter({
-  value,
-  field,
-  id
-}) {
+export const gridDateFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
+  const rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value,
     columnType: 'date',
-    rowId: id,
-    field
+    rowId,
+    field: column.field
   });
   return value.toLocaleDateString();
-}
-export function gridDateTimeFormatter({
-  value,
-  field,
-  id
-}) {
+};
+export const gridDateTimeFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
+  const rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',
-    rowId: id,
-    field
+    rowId,
+    field: column.field
   });
   return value.toLocaleString();
-}
+};
 export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',
   sortComparator: gridDateComparator,

package/modern/colDef/gridNumericColDef.js

@@ -9,9 +9,7 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   headerAlign: 'right',
   sortComparator: gridNumberComparator,
   valueParser: value => value === '' ? null : Number(value),
-  valueFormatter: ({
-    value
-  }) => isNumber(value) ? value.toLocaleString() : value || '',
+  valueFormatter: value => isNumber(value) ? value.toLocaleString() : value || '',
   filterOperators: getGridNumericOperators(),
   getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/modern/colDef/gridSingleSelectColDef.js

@@ -17,20 +17,15 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
-  valueFormatter(params) {
-    const {
-      id,
-      field,
-      value,
-      api
-    } = params;
-    const colDef = params.api.getColumn(field);
+  valueFormatter(value, row, colDef, apiRef) {
+    // const { id, field, value, api } = params;
+    const rowId = apiRef.current.getRowId(row);
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }
     const valueOptions = getValueOptions(colDef, {
-      id,
-      row: id ? api.getRow(id) : null
+      id: rowId,
+      row
     });
     if (value == null) {
       return '';
@@ -47,8 +42,8 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   renderEditCell: renderEditSingleSelectCell,
   filterOperators: getGridSingleSelectOperators(),
   // @ts-ignore
-  pastedValueParser: (value, params) => {
-    const colDef = params.colDef;
+  pastedValueParser: (value, row, column) => {
+    const colDef = column;
     const valueOptions = getValueOptions(colDef) || [];
     const getOptionValue = colDef.getOptionValue;
     const valueOption = valueOptions.find(option => {

package/modern/components/GridPagination.js

@@ -24,13 +24,19 @@ const GridPaginationRoot = styled(TablePagination)(({
     }
   }
 }));
+
+// A mutable version of a readonly array.
+
 export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
   const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
-  const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
+  const lastPage = React.useMemo(() => {
+    const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
+    return Math.max(0, calculatedValue);
+  }, [rowCount, paginationModel.pageSize]);
   const handlePageSizeChange = React.useCallback(event => {
     const pageSize = Number(event.target.value);
     apiRef.current.setPageSize(pageSize);
@@ -65,7 +71,11 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
     ref: ref,
     component: "div",
     count: rowCount,
-    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
+    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
+    // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
+    // for x-data-grid is past the fix.
+    // Note that Material UI will not mutate the array, so this is safe.
+    ,
     rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,

package/modern/components/GridRow.js

@@ -37,9 +37,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight'],
-    pinnedLeft: ['pinnedLeft'],
-    pinnedRight: ['pinnedRight']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -273,7 +271,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         width: width,
         contentWidth: contentWidth,
         field: column.field,
-        align: column.align
+        align: column.align ?? 'left'
       }, column.field);
     }
     const {
@@ -361,7 +359,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+    children: [leftCells, /*#__PURE__*/_jsx("div", {
+      className: gridClasses.cellOffsetLeft,
+      role: "presentation"
+    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
       role: "presentation",

package/modern/components/GridScrollbarFillerCell.js

@@ -21,9 +21,6 @@ const Style = styled('div')({
   [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
     position: 'sticky',
     right: 0
-  },
-  [`&:not(.${classes.header}):not(.${classes.pinnedRight})`]: {
-    transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
   }
 });
 function GridScrollbarFillerCell({

package/modern/components/base/GridFooterPlaceholder.js

@@ -7,5 +7,5 @@ export function GridFooterPlaceholder() {
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, rootProps.slotProps?.footer));
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, rootProps.slotProps?.footer /* FIXME: typing error */));
 }

package/modern/components/cell/GridActionsCell.js

@@ -136,7 +136,7 @@ function GridActionsCell(props) {
     if (event.key === 'Tab') {
       event.preventDefault();
     }
-    if (['Tab', 'Enter', 'Escape'].includes(event.key)) {
+    if (['Tab', 'Escape'].includes(event.key)) {
       hideMenu();
     }
   };
@@ -173,7 +173,6 @@ function GridActionsCell(props) {
       target: buttonRef.current,
       position: position,
       onClose: hideMenu,
-      onClick: hideMenu,
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,
         className: gridClasses.menuList,
@@ -182,7 +181,8 @@ function GridActionsCell(props) {
         variant: "menu",
         autoFocusItem: true,
         children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index
+          key: index,
+          closeMenu: hideMenu
         }))
       })
     })]

package/modern/components/cell/GridActionsCellItem.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["label", "icon", "showInMenu", "onClick"];
+const _excluded = ["label", "icon", "showInMenu", "onClick"],
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
@@ -9,20 +10,17 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      label,
-      icon,
-      showInMenu,
-      onClick
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const handleClick = event => {
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  if (!showInMenu) {
+  if (!props.showInMenu) {
+    const {
+        label,
+        icon,
+        onClick
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+    const handleClick = event => {
+      onClick?.(event);
+    };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: ref,
       size: "small",
@@ -36,10 +34,24 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       })
     }));
   }
+  const {
+      label,
+      icon,
+      onClick,
+      closeMenuOnClick = true,
+      closeMenu
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
+  const handleClick = event => {
+    onClick?.(event);
+    if (closeMenuOnClick) {
+      closeMenu?.();
+    }
+  };
   return /*#__PURE__*/_jsxs(MenuItem, _extends({
     ref: ref
   }, other, {
-    onClick: onClick,
+    onClick: handleClick,
     children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
       children: icon
     }), label]

package/modern/components/cell/GridEditInputCell.js

@@ -57,7 +57,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
     if (column.valueParser) {
-      parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
     }
     setValueState(parsedValue);
     apiRef.current.setEditCellValue({

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -84,7 +84,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     },
     onKeyDown: handleKeyDown,
     disabled: !isSelectable,
-    touchRippleRef: rippleRef
+    touchRippleRef: rippleRef /* FIXME: typing error */
   }, rootProps.slotProps?.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -42,6 +42,7 @@ function GridColumnsManagement(props) {
     autoFocusSearchField = true,
     disableShowHideToggle = false,
     disableResetButton = false,
+    toggleAllMode = 'all',
     getTogglableColumns
   } = props;
   const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
@@ -61,11 +62,21 @@ function GridColumnsManagement(props) {
     } = event.target;
     apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
   };
+  const currentColumns = React.useMemo(() => {
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
+      field
+    }) => togglableColumns.includes(field)) : sortedColumns;
+    if (!searchValue) {
+      return togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   const toggleAllColumns = React.useCallback(isVisible => {
     const currentModel = gridColumnVisibilityModelSelector(apiRef);
     const newModel = _extends({}, currentModel);
     const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
-    columns.forEach(col => {
+    (toggleAllMode === 'filteredOnly' ? currentColumns : columns).forEach(col => {
       if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
         if (isVisible) {
           // delete the key from the model instead of setting it to `true`
@@ -76,20 +87,10 @@ function GridColumnsManagement(props) {
       }
     });
     return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns, getTogglableColumns]);
+  }, [apiRef, columns, getTogglableColumns, toggleAllMode, currentColumns]);
   const handleSearchValueChange = React.useCallback(event => {
     setSearchValue(event.target.value);
   }, []);
-  const currentColumns = React.useMemo(() => {
-    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
-    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
-      field
-    }) => togglableColumns.includes(field)) : sortedColumns;
-    if (!searchValue) {
-      return togglableSortedColumns;
-    }
-    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
-  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   const hideableColumns = React.useMemo(() => currentColumns.filter(col => col.hideable), [currentColumns]);
   const allHideableColumnsVisible = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] == null || columnVisibilityModel[column.field] !== false), [columnVisibilityModel, hideableColumns]);
   const allHideableColumnsHidden = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] === false), [columnVisibilityModel, hideableColumns]);
@@ -160,14 +161,11 @@ function GridColumnsManagement(props) {
           checked: allHideableColumnsVisible,
           indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
           onClick: () => toggleAllColumns(!allHideableColumnsVisible),
-          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
-        }, rootProps.slotProps?.baseCheckbox)),
-        sx: {
-          [`.MuiFormControlLabel-label`]: {
-            textTransform: 'uppercase',
-            fontSize: '14px'
+          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+          sx: {
+            p: 0.5
           }
-        },
+        }, rootProps.slotProps?.baseCheckbox)),
         label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
       }) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
@@ -209,7 +207,14 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    */
   getTogglableColumns: PropTypes.func,
   searchPredicate: PropTypes.func,
-  sort: PropTypes.oneOf(['asc', 'desc'])
+  sort: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+   * - `all`: Will toggle all columns.
+   * - `filteredOnly`: Will only toggle columns that match the search criteria.
+   * @default 'all'
+   */
+  toggleAllMode: PropTypes.oneOf(['all', 'filteredOnly'])
 } : void 0;
 const GridColumnsManagementBody = styled('div', {
   name: 'MuiDataGrid',
@@ -242,7 +247,7 @@ const GridColumnsManagementFooter = styled('div', {
 })(({
   theme
 }) => ({
-  padding: theme.spacing(0.5, 1, 0.5, 2.4),
+  padding: theme.spacing(0.5, 1, 0.5, 3),
   display: 'flex',
   justifyContent: 'space-between',
   borderTop: `1px solid ${theme.palette.divider}`

package/modern/components/containers/GridRootStyles.js

@@ -240,6 +240,12 @@ export const GridRootStyles = styled('div', {
       [`& .${c.cell} > *`]: {
         overflow: 'visible !important',
         whiteSpace: 'nowrap'
+      },
+      [`& .${c.groupingCriteriaCell}`]: {
+        width: 'unset'
+      },
+      [`& .${c.treeDataGroupingCell}`]: {
+        width: 'unset'
       }
     },
     [`& .${c.columnHeader}, & .${c.cell}`]: {
@@ -554,8 +560,10 @@ export const GridRootStyles = styled('div', {
         }
       }
     },
-    [`& .${c.cell}:not(.${c['cell--pinnedLeft']}):not(.${c['cell--pinnedRight']})`]: {
-      transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
+    [`& .${c.cellOffsetLeft}`]: {
+      flex: '0 0 auto',
+      display: 'inline-block',
+      width: 'var(--DataGrid-offsetLeft)'
     },
     [`& .${c.columnHeaderDraggableContainer}`]: {
       display: 'flex',

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -66,7 +66,7 @@ function GridFilterInputBoolean(props) {
           ref: focusElementRef,
           tabIndex
         }
-      }, others, baseSelectProps, {
+      }, others /* FIXME: typing error */, baseSelectProps, {
         children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isSelectNative,
           value: "",

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -106,7 +106,7 @@ function GridFilterInputSingleSelect(props) {
           placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
         native: isSelectNative
-      }, others, rootProps.slotProps?.baseSelect, {
+      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -130,7 +130,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
     }
     return apiRef.current.setFilterModel(_extends({}, filterModel, {
       items: readOnlyFilters
-    }));
+    }), 'removeAllFilterItems');
   }, [apiRef, readOnlyFilters, filterModel, validFilters]);
   React.useEffect(() => {
     if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/features/columns/useGridColumnSpanning.js

@@ -59,7 +59,9 @@ function calculateCellColSpan(params) {
   } = params;
   const columnsLength = columns.length;
   const column = columns[columnIndex];
-  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+  const row = apiRef.current.getRow(rowId);
+  const value = apiRef.current.getRowValue(row, column);
+  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(value, row, column, apiRef) : column.colSpan;
   if (!colSpan || colSpan === 1) {
     setCellColSpanInfo(lookup, rowId, columnIndex, {
       spannedByColSpan: false,

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -334,7 +334,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
-      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(value, row, column, apiRef);
     }
     let editingState = gridEditRowsStateSelector(apiRef.current.state);
     let newProps = _extends({}, editingState[id][field], {
@@ -382,10 +382,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       value
     } = editingState[id][field];
-    return column.valueSetter ? column.valueSetter({
-      value,
-      row
-    }) : _extends({}, row, {
+    return column.valueSetter ? column.valueSetter(value, row, column, apiRef) : _extends({}, row, {
       [field]: value
     });
   }, [apiRef]);

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -409,7 +409,7 @@ export const useGridRowEditing = (apiRef, props) => {
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
-      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(value, row, column, apiRef);
     }
     let editingState = gridEditRowsStateSelector(apiRef.current.state);
     let newProps = _extends({}, editingState[id][field], {
@@ -509,10 +509,7 @@ export const useGridRowEditing = (apiRef, props) => {
     Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
       const column = apiRef.current.getColumn(field);
       if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
+        rowUpdate = column.valueSetter(fieldProps.value, rowUpdate, column, apiRef);
       } else {
         rowUpdate[field] = fieldProps.value;
       }

package/modern/hooks/features/filter/gridFilterUtils.js

@@ -88,7 +88,7 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   let parsedValue;
   if (column.valueParser) {
     const parser = column.valueParser;
-    parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x)) : parser(filterItem.value);
+    parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x, undefined, column, apiRef)) : parser(filterItem.value, undefined, column, apiRef);
   } else {
     parsedValue = filterItem.value;
   }

package/modern/hooks/features/rows/gridRowsUtils.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from './gridRowsSelector';
-import { gridDimensionsSelector } from '../dimensions';
+import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
 export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 export const buildRootGroup = () => ({