@mui/x-data-grid 5.8.0 → 5.11.0

package/legacy/DataGrid/useDataGridComponent.js

@@ -24,6 +24,7 @@ import { useGridEvents } from '../hooks/features/events/useGridEvents';
 import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
+import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export var useDataGridComponent = function useDataGridComponent(props) {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -55,12 +56,13 @@ export var useDataGridComponent = function useDataGridComponent(props) {
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  useGridColumnSpanning(apiRef);
   var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridSorting(apiRef, props);
   useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);

package/legacy/DataGrid/useDataGridProps.js

@@ -62,7 +62,8 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
   sortingMode: GridFeatureModeConstant.client,
   throttleRowsMs: 0,
   disableColumnReorder: false,
-  disableColumnResize: false
+  disableColumnResize: false,
+  keepNonExistentRowsSelected: false
 };
 export var useDataGridProps = function useDataGridProps(inProps) {
   if (inProps.pageSize > MAX_PAGE_SIZE) {

package/legacy/colDef/gridActionsColDef.js

@@ -11,5 +11,6 @@ export var GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   headerName: '',
   disableColumnMenu: true,
   disableExport: true,
-  renderCell: renderActionsCell
+  renderCell: renderActionsCell,
+  getApplyQuickFilterFn: undefined
 });

package/legacy/colDef/gridBooleanColDef.js

@@ -19,5 +19,6 @@ export var GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   renderEditCell: renderEditBooleanCell,
   sortComparator: gridNumberComparator,
   valueFormatter: gridBooleanFormatter,
-  filterOperators: getGridBooleanOperators()
+  filterOperators: getGridBooleanOperators(),
+  getApplyQuickFilterFn: undefined
 });

package/legacy/colDef/gridCheckboxSelectionColDef.js

@@ -15,6 +15,7 @@ export var GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF,
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,
+  getApplyQuickFilterFn: undefined,
   valueGetter: function valueGetter(params) {
     var selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
     return selectionLookup[params.id] !== undefined;

package/legacy/colDef/gridDateColDef.js

@@ -26,12 +26,14 @@ export var GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortComparator: gridDateComparator,
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
-  renderEditCell: renderEditDateCell
+  renderEditCell: renderEditDateCell,
+  getApplyQuickFilterFn: undefined
 });
 export var GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'dateTime',
   sortComparator: gridDateComparator,
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
-  renderEditCell: renderEditDateCell
+  renderEditCell: renderEditDateCell,
+  getApplyQuickFilterFn: undefined
 });

package/legacy/colDef/gridNumericColDef.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { isNumber } from '../utils/utils';
-import { getGridNumericOperators } from './gridNumericOperators';
+import { getGridNumericOperators, getGridNumericQuickFilterFn } from './gridNumericOperators';
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 export var GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'number',
@@ -15,5 +15,6 @@ export var GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
     var value = _ref.value;
     return value && isNumber(value) && value.toLocaleString() || value;
   },
-  filterOperators: getGridNumericOperators()
+  filterOperators: getGridNumericOperators(),
+  getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/legacy/colDef/gridNumericOperators.js

@@ -10,6 +10,16 @@ var parseNumericValue = function parseNumericValue(value) {
   return Number(value);
 };
 
+export var getGridNumericQuickFilterFn = function getGridNumericQuickFilterFn(value) {
+  if (value == null || Number.isNaN(value) || value === '') {
+    return null;
+  }
+
+  return function (_ref) {
+    var columnValue = _ref.value;
+    return parseNumericValue(columnValue) === parseNumericValue(value);
+  };
+};
 export var getGridNumericOperators = function getGridNumericOperators() {
   return [{
     label: '=',
@@ -19,8 +29,8 @@ export var getGridNumericOperators = function getGridNumericOperators() {
         return null;
       }
 
-      return function (_ref) {
-        var value = _ref.value;
+      return function (_ref2) {
+        var value = _ref2.value;
         return parseNumericValue(value) === filterItem.value;
       };
     },
@@ -36,8 +46,8 @@ export var getGridNumericOperators = function getGridNumericOperators() {
         return null;
       }
 
-      return function (_ref2) {
-        var value = _ref2.value;
+      return function (_ref3) {
+        var value = _ref3.value;
         return parseNumericValue(value) !== filterItem.value;
       };
     },
@@ -53,8 +63,8 @@ export var getGridNumericOperators = function getGridNumericOperators() {
         return null;
       }
 
-      return function (_ref3) {
-        var value = _ref3.value;
+      return function (_ref4) {
+        var value = _ref4.value;
 
         if (value == null) {
           return false;
@@ -75,8 +85,8 @@ export var getGridNumericOperators = function getGridNumericOperators() {
         return null;
       }
 
-      return function (_ref4) {
-        var value = _ref4.value;
+      return function (_ref5) {
+        var value = _ref5.value;
 
         if (value == null) {
           return false;
@@ -97,8 +107,8 @@ export var getGridNumericOperators = function getGridNumericOperators() {
         return null;
       }
 
-      return function (_ref5) {
-        var value = _ref5.value;
+      return function (_ref6) {
+        var value = _ref6.value;
 
         if (value == null) {
           return false;
@@ -119,8 +129,8 @@ export var getGridNumericOperators = function getGridNumericOperators() {
         return null;
       }
 
-      return function (_ref6) {
-        var value = _ref6.value;
+      return function (_ref7) {
+        var value = _ref7.value;
 
         if (value == null) {
           return false;
@@ -136,16 +146,16 @@ export var getGridNumericOperators = function getGridNumericOperators() {
   }, {
     value: 'isEmpty',
     getApplyFilterFn: function getApplyFilterFn() {
-      return function (_ref7) {
-        var value = _ref7.value;
+      return function (_ref8) {
+        var value = _ref8.value;
         return value == null;
       };
     }
   }, {
     value: 'isNotEmpty',
     getApplyFilterFn: function getApplyFilterFn() {
-      return function (_ref8) {
-        var value = _ref8.value;
+      return function (_ref9) {
+        var value = _ref9.value;
         return value != null;
       };
     }
@@ -156,8 +166,8 @@ export var getGridNumericOperators = function getGridNumericOperators() {
         return null;
       }
 
-      return function (_ref9) {
-        var value = _ref9.value;
+      return function (_ref10) {
+        var value = _ref10.value;
         return value != null && filterItem.value.includes(Number(value));
       };
     },

package/legacy/colDef/gridSingleSelectColDef.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
-import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
+import { getGridSingleSelectOperators, getGridSingleSelectQuickFilterFn } from './gridSingleSelectOperators';
 export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   renderEditCell: renderEditSingleSelectCell,
-  filterOperators: getGridSingleSelectOperators()
+  filterOperators: getGridSingleSelectOperators(),
+  getApplyQuickFilterFn: getGridSingleSelectQuickFilterFn
 });

package/legacy/colDef/gridSingleSelectOperators.js

@@ -10,6 +10,55 @@ var parseObjectValue = function parseObjectValue(value) {
   return value.value;
 };
 
+export var getGridSingleSelectQuickFilterFn = function getGridSingleSelectQuickFilterFn(value, column, apiRef) {
+  if (!value) {
+    return null;
+  }
+
+  var valueOptions = column.valueOptions,
+      valueFormatter = column.valueFormatter,
+      field = column.field;
+  var potentialValues = [parseObjectValue(value).toString()];
+  var iterableColumnValues = typeof valueOptions === 'function' ? valueOptions({
+    field: field
+  }) : valueOptions || [];
+
+  if (iterableColumnValues) {
+    iterableColumnValues.forEach(function (option) {
+      // for each valueOption, check if the formatted value
+      var optionValue;
+      var optionLabel;
+
+      if (_typeof(option) === 'object') {
+        optionValue = option.value;
+        optionLabel = option.label;
+      } else {
+        optionValue = option;
+
+        if (valueFormatter) {
+          optionLabel = valueFormatter({
+            value: option,
+            field: field,
+            api: apiRef.current
+          });
+        } else {
+          optionLabel = option;
+        }
+      }
+
+      if (optionLabel.slice(0, value.length).toLowerCase() === value.toLowerCase()) {
+        if (!potentialValues.includes(optionValue)) {
+          potentialValues.push(optionValue.toString());
+        }
+      }
+    });
+  }
+
+  return function (_ref) {
+    var columnValue = _ref.value;
+    return columnValue != null ? potentialValues.includes(parseObjectValue(columnValue).toString()) : false;
+  };
+};
 export var getGridSingleSelectOperators = function getGridSingleSelectOperators() {
   return [{
     value: 'is',
@@ -18,8 +67,8 @@ export var getGridSingleSelectOperators = function getGridSingleSelectOperators(
         return null;
       }
 
-      return function (_ref) {
-        var value = _ref.value;
+      return function (_ref2) {
+        var value = _ref2.value;
         return parseObjectValue(value) === parseObjectValue(filterItem.value);
       };
     },
@@ -31,8 +80,8 @@ export var getGridSingleSelectOperators = function getGridSingleSelectOperators(
         return null;
       }
 
-      return function (_ref2) {
-        var value = _ref2.value;
+      return function (_ref3) {
+        var value = _ref3.value;
         return parseObjectValue(value) !== parseObjectValue(filterItem.value);
       };
     },
@@ -45,8 +94,8 @@ export var getGridSingleSelectOperators = function getGridSingleSelectOperators(
       }
 
       var filterItemValues = filterItem.value.map(parseObjectValue);
-      return function (_ref3) {
-        var value = _ref3.value;
+      return function (_ref4) {
+        var value = _ref4.value;
         return filterItemValues.includes(parseObjectValue(value));
       };
     },

package/legacy/colDef/gridStringColDef.js

@@ -1,6 +1,6 @@
 import { renderEditInputCell } from '../components/cell/GridEditInputCell';
 import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { getGridStringOperators } from './gridStringOperators';
+import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
 export var GRID_STRING_COL_DEF = {
   width: 100,
   minWidth: 50,
@@ -17,5 +17,6 @@ export var GRID_STRING_COL_DEF = {
   type: 'string',
   align: 'left',
   filterOperators: getGridStringOperators(),
-  renderEditCell: renderEditInputCell
+  renderEditCell: renderEditInputCell,
+  getApplyQuickFilterFn: getGridStringQuickFilterFn
 };

package/legacy/colDef/gridStringOperators.js

@@ -1,6 +1,17 @@
 import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
 import { escapeRegExp } from '../utils/utils';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+export var getGridStringQuickFilterFn = function getGridStringQuickFilterFn(value) {
+  if (!value) {
+    return null;
+  }
+
+  var filterRegex = new RegExp(escapeRegExp(value), 'i');
+  return function (_ref) {
+    var columnValue = _ref.value;
+    return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
+  };
+};
 export var getGridStringOperators = function getGridStringOperators() {
   return [{
     value: 'contains',
@@ -10,8 +21,8 @@ export var getGridStringOperators = function getGridStringOperators() {
       }
 
       var filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
-      return function (_ref) {
-        var value = _ref.value;
+      return function (_ref2) {
+        var value = _ref2.value;
         return value != null ? filterRegex.test(value.toString()) : false;
       };
     },
@@ -27,8 +38,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         sensitivity: 'base',
         usage: 'search'
       });
-      return function (_ref2) {
-        var value = _ref2.value;
+      return function (_ref3) {
+        var value = _ref3.value;
         return value != null ? collator.compare(filterItem.value, value.toString()) === 0 : false;
       };
     },
@@ -41,8 +52,8 @@ export var getGridStringOperators = function getGridStringOperators() {
       }
 
       var filterRegex = new RegExp("^".concat(escapeRegExp(filterItem.value), ".*$"), 'i');
-      return function (_ref3) {
-        var value = _ref3.value;
+      return function (_ref4) {
+        var value = _ref4.value;
         return value != null ? filterRegex.test(value.toString()) : false;
       };
     },
@@ -55,8 +66,8 @@ export var getGridStringOperators = function getGridStringOperators() {
       }
 
       var filterRegex = new RegExp(".*".concat(escapeRegExp(filterItem.value), "$"), 'i');
-      return function (_ref4) {
-        var value = _ref4.value;
+      return function (_ref5) {
+        var value = _ref5.value;
         return value != null ? filterRegex.test(value.toString()) : false;
       };
     },
@@ -64,16 +75,16 @@ export var getGridStringOperators = function getGridStringOperators() {
   }, {
     value: 'isEmpty',
     getApplyFilterFn: function getApplyFilterFn() {
-      return function (_ref5) {
-        var value = _ref5.value;
+      return function (_ref6) {
+        var value = _ref6.value;
         return value === '' || value == null;
       };
     }
   }, {
     value: 'isNotEmpty',
     getApplyFilterFn: function getApplyFilterFn() {
-      return function (_ref6) {
-        var value = _ref6.value;
+      return function (_ref7) {
+        var value = _ref7.value;
         return value !== '' && value != null;
       };
     }
@@ -88,8 +99,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         sensitivity: 'base',
         usage: 'search'
       });
-      return function (_ref7) {
-        var value = _ref7.value;
+      return function (_ref8) {
+        var value = _ref8.value;
         return value != null ? filterItem.value.some(function (filterValue) {
           return collator.compare(filterValue, value.toString() || '') === 0;
         }) : false;

package/legacy/components/GridFooter.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
 import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
@@ -11,7 +12,7 @@ import { GridFooterContainer } from './containers/GridFooterContainer';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+var GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
   var _rootProps$components;
 
   var apiRef = useGridApiContext();
@@ -34,4 +35,12 @@ export var GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props,
   }, props, {
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridFooter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridFooter };

package/legacy/components/GridRow.js

@@ -9,7 +9,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { GridEvents } from '../models/events';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -20,6 +19,7 @@ import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -134,7 +134,12 @@ function GridRow(props) {
       } // User opened a detail panel
 
 
-      if (field === '__detail_panel_toggle__') {
+      if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+        return;
+      } // User reorders a row
+
+
+      if (field === '__reorder__') {
         return;
       } // User is editing a cell
 
@@ -151,7 +156,7 @@ function GridRow(props) {
       }
     }
 
-    publish(GridEvents.rowClick, onClick)(event);
+    publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
 
   var style = _extends({}, styleProp, {
@@ -179,7 +184,8 @@ function GridRow(props) {
 
     var rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage: indexRelativeToCurrentPage
     });
 
     rowClassName = rootProps.getRowClassName(rowParams);
@@ -188,8 +194,6 @@ function GridRow(props) {
   var cells = [];
 
   for (var i = 0; i < renderedColumns.length; i += 1) {
-    var _rootProps$components;
-
     var column = renderedColumns[i];
     var indexRelativeToAllColumns = firstColumnToRender + i;
     var isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
@@ -218,7 +222,16 @@ function GridRow(props) {
     if (editCellState != null && column.renderEditCell) {
       var _rootProps$classes2;
 
-      var params = _extends({}, cellParams, editCellState, {
+      var updatedRow = row;
+
+      if (apiRef.current.unstable_getRowWithUpdatedValues) {
+        // Only the new editing API has this method
+        updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
+      }
+
+      var params = _extends({}, cellParams, {
+        row: updatedRow
+      }, editCellState, {
         api: apiRef.current
       });
 
@@ -234,24 +247,34 @@ function GridRow(props) {
 
     var hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     var tabIndex = cellTabIndex !== null && cellTabIndex.id === rowId && cellTabIndex.field === column.field && cellParams.cellMode === 'view' ? 0 : -1;
-    cells.push( /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
-      value: cellParams.value,
-      field: column.field,
-      width: column.computedWidth,
-      rowId: rowId,
-      height: rowHeight,
-      showRightBorder: showRightBorder,
-      formattedValue: cellParams.formattedValue,
-      align: column.align || 'left',
-      cellMode: cellParams.cellMode,
-      colIndex: indexRelativeToAllColumns,
-      isEditable: cellParams.isEditable,
-      hasFocus: hasFocus,
-      tabIndex: tabIndex,
-      className: clsx(classNames)
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
-      children: content
-    }), column.field));
+    var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+
+    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+      var _rootProps$components;
+
+      var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
+          colSpan = _cellColSpanInfo$cell.colSpan,
+          width = _cellColSpanInfo$cell.width;
+      cells.push( /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
+        value: cellParams.value,
+        field: column.field,
+        width: width,
+        rowId: rowId,
+        height: rowHeight,
+        showRightBorder: showRightBorder,
+        formattedValue: cellParams.formattedValue,
+        align: column.align || 'left',
+        cellMode: cellParams.cellMode,
+        colIndex: indexRelativeToAllColumns,
+        isEditable: cellParams.isEditable,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        className: clsx(classNames),
+        colSpan: colSpan
+      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
+        children: content
+      }), column.field));
+    }
   }
 
   var emptyCellWidth = containerWidth - columnsTotalWidth;
@@ -264,9 +287,9 @@ function GridRow(props) {
     "aria-selected": selected,
     style: style,
     onClick: publishClick,
-    onDoubleClick: publish(GridEvents.rowDoubleClick, onDoubleClick),
-    onMouseEnter: publish(GridEvents.rowMouseEnter, onMouseEnter),
-    onMouseLeave: publish(GridEvents.rowMouseLeave, onMouseLeave)
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   }, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth,
@@ -285,6 +308,11 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   containerWidth: PropTypes.number.isRequired,
   editRowsState: PropTypes.object.isRequired,
   firstColumnToRender: PropTypes.number.isRequired,
+
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,

package/legacy/components/GridRowCount.js

@@ -64,6 +64,7 @@ process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   rowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   visibleRowCount: PropTypes.number.isRequired
 } : void 0;
 export { GridRowCount };

package/legacy/components/GridScrollArea.js

@@ -6,7 +6,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 { GridEvents } from '../models/events';
 import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -105,9 +104,9 @@ function GridScrollAreaRaw(props) {
       return !prevDragging;
     });
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScrolling);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, toggleDragging);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, toggleDragging);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleScrolling);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', toggleDragging);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', toggleDragging);
   return dragging ? /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
     ref: rootRef,
     className: clsx(classes.root),

package/legacy/components/GridSelectedRowCount.js

@@ -65,6 +65,7 @@ process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  selectedRowCount: PropTypes.number.isRequired
+  selectedRowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridSelectedRowCount };

package/legacy/components/base/GridBody.js

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridEvents } from '../../models/events';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
@@ -50,7 +49,7 @@ function GridBody(props) {
   apiRef.current.renderingZoneRef = renderingZoneRef; // TODO remove, nobody should have access to internal parts of the virtualization
 
   var handleResize = React.useCallback(function (size) {
-    apiRef.current.publishEvent(GridEvents.resize, size);
+    apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/_jsxs(GridMainContainer, {
     children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(ColumnHeadersComponent, {