@mui/x-data-grid 5.8.0 → 5.11.0

package/DataGrid/DataGrid.js

@@ -58,6 +58,11 @@ DataGridRaw.propTypes = {
    */
   autoPageSize: PropTypes.bool,
 
+  /**
+   * Controls the modes of the cells.
+   */
+  cellModesModel: PropTypes.object,
+
   /**
    * If `true`, the grid get a first column with a checkbox that allows to select rows.
    * @default false
@@ -205,7 +210,9 @@ DataGridRaw.propTypes = {
       operatorValue: PropTypes.string,
       value: PropTypes.any
     })).isRequired,
-    linkOperator: PropTypes.oneOf(['and', 'or'])
+    linkOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterValues: PropTypes.array
   }),
 
   /**
@@ -293,6 +300,14 @@ DataGridRaw.propTypes = {
    */
   isRowSelectable: PropTypes.func,
 
+  /**
+   * If `true`, the selection model will retain selected rows that do not exist.
+   * Useful when using server side pagination and row selections need to be retained
+   * when changing pages.
+   * @default false
+   */
+  keepNonExistentRowsSelected: PropTypes.bool,
+
   /**
    * If `true`, a  loading overlay is displayed.
    */
@@ -380,6 +395,13 @@ DataGridRaw.propTypes = {
    */
   onCellKeyDown: PropTypes.func,
 
+  /**
+   * Callback fired when the `cellModesModel` prop changes.
+   * @param {GridCellModesModel} cellModesModel Object containig which cells are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onCellModesModelChange: PropTypes.func,
+
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -458,7 +480,7 @@ DataGridRaw.propTypes = {
    * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
    * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
    */
   onEditCellPropsChange: PropTypes.func,
 
@@ -566,6 +588,13 @@ DataGridRaw.propTypes = {
    */
   onRowEditStop: PropTypes.func,
 
+  /**
+   * Callback fired when the `rowModesModel` prop changes.
+   * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowModesModelChange: PropTypes.func,
+
   /**
    * Callback fired when the selection state of one or multiple rows changes.
    * @param {GridSelectionModel} selectionModel With all the row ids [[GridSelectionModel]].
@@ -651,6 +680,11 @@ DataGridRaw.propTypes = {
    */
   rowHeight: PropTypes.number,
 
+  /**
+   * Controls the modes of the rows.
+   */
+  rowModesModel: PropTypes.object,
+
   /**
    * Set of rows of type [[GridRowsProp]].
    */

package/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 const useDataGridComponent = props => {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -55,12 +56,13 @@ export const useDataGridComponent = props => {
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  useGridColumnSpanning(apiRef);
   const 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/DataGrid/useDataGridProps.js

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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Material-UI SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,6 +1,6 @@
 # @mui/x-data-grid
 
-This package is the community edition of the data grid component.
+This package is the Community Plan edition of the data grid component.
 It's part of MUI X, an open core extension of MUI, with advanced components.
 
 ## Installation
@@ -15,15 +15,17 @@ npm install @mui/x-data-grid
 yarn add @mui/x-data-grid
 ```
 
-This component has three peer dependencies that you will need to install as well.
+This component has the following peer dependencies that you will need to install as well.
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.0.0",
-  "react": "^17.0.0"
+  "@mui/material": "^5.2.8",
+  "@mui/system": "^5.2.8",
+  "react": "^17.0.2 || ^18.0.0",
+  "react-dom": "^17.0.2 || ^18.0.0"
 },
 ```
 
 ## Documentation
 
-[The documentation](https://mui.com/components/data-grid/)
+[The documentation](https://mui.com/x/react-data-grid/)

package/colDef/gridActionsColDef.js

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

package/colDef/gridBooleanColDef.js

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

package/colDef/gridCheckboxSelectionColDef.js

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

package/colDef/gridDateColDef.js

@@ -26,12 +26,14 @@ export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortComparator: gridDateComparator,
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
-  renderEditCell: renderEditDateCell
+  renderEditCell: renderEditDateCell,
+  getApplyQuickFilterFn: undefined
 });
 export const 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/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 const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'number',
@@ -12,5 +12,6 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: ({
     value
   }) => value && isNumber(value) && value.toLocaleString() || value,
-  filterOperators: getGridNumericOperators()
+  filterOperators: getGridNumericOperators(),
+  getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/colDef/gridNumericOperators.d.ts

@@ -1,4 +1,6 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
+import { GridCellParams } from '../models';
+export declare const getGridNumericQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
 /**
  * @deprecated Use `getGridNumericOperators` instead.

package/colDef/gridNumericOperators.js

@@ -10,6 +10,17 @@ const parseNumericValue = value => {
   return Number(value);
 };
 
+export const getGridNumericQuickFilterFn = value => {
+  if (value == null || Number.isNaN(value) || value === '') {
+    return null;
+  }
+
+  return ({
+    value: columnValue
+  }) => {
+    return parseNumericValue(columnValue) === parseNumericValue(value);
+  };
+};
 export const getGridNumericOperators = () => [{
   label: '=',
   value: '=',

package/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 const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   renderEditCell: renderEditSingleSelectCell,
-  filterOperators: getGridSingleSelectOperators()
+  filterOperators: getGridSingleSelectOperators(),
+  getApplyQuickFilterFn: getGridSingleSelectQuickFilterFn
 });

package/colDef/gridSingleSelectOperators.d.ts

@@ -1,2 +1,5 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
+import { GridCellParams, GridColDef } from '../models';
+import { GridApiCommunity } from '../models/api/gridApiCommunity';
+export declare const getGridSingleSelectQuickFilterFn: (value: any, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridSingleSelectOperators: () => GridFilterOperator[];

package/colDef/gridSingleSelectOperators.js

@@ -9,6 +9,58 @@ const parseObjectValue = value => {
   return value.value;
 };
 
+export const getGridSingleSelectQuickFilterFn = (value, column, apiRef) => {
+  if (!value) {
+    return null;
+  }
+
+  const {
+    valueOptions,
+    valueFormatter,
+    field
+  } = column;
+  const potentialValues = [parseObjectValue(value).toString()];
+  const iterableColumnValues = typeof valueOptions === 'function' ? valueOptions({
+    field
+  }) : valueOptions || [];
+
+  if (iterableColumnValues) {
+    iterableColumnValues.forEach(option => {
+      // for each valueOption, check if the formatted value
+      let optionValue;
+      let optionLabel;
+
+      if (typeof option === 'object') {
+        optionValue = option.value;
+        optionLabel = option.label;
+      } else {
+        optionValue = option;
+
+        if (valueFormatter) {
+          optionLabel = valueFormatter({
+            value: option,
+            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 ({
+    value: columnValue
+  }) => {
+    return columnValue != null ? potentialValues.includes(parseObjectValue(columnValue).toString()) : false;
+  };
+};
 export const getGridSingleSelectOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {

package/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 const GRID_STRING_COL_DEF = {
   width: 100,
   minWidth: 50,
@@ -17,5 +17,6 @@ export const GRID_STRING_COL_DEF = {
   type: 'string',
   align: 'left',
   filterOperators: getGridStringOperators(),
-  renderEditCell: renderEditInputCell
+  renderEditCell: renderEditInputCell,
+  getApplyQuickFilterFn: getGridStringQuickFilterFn
 };

package/colDef/gridStringOperators.d.ts

@@ -1,2 +1,4 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
+import { GridCellParams } from '../models';
+export declare const getGridStringQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridStringOperators: () => GridFilterOperator<any, number | string | null, any>[];

package/colDef/gridStringOperators.js

@@ -1,6 +1,18 @@
 import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
 import { escapeRegExp } from '../utils/utils';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+export const getGridStringQuickFilterFn = value => {
+  if (!value) {
+    return null;
+  }
+
+  const filterRegex = new RegExp(escapeRegExp(value), 'i');
+  return ({
+    value: columnValue
+  }) => {
+    return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
+  };
+};
 export const getGridStringOperators = () => [{
   value: 'contains',
   getApplyFilterFn: filterItem => {

package/components/GridFooter.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-import { GridFooterContainerProps } from './containers/GridFooterContainer';
-export declare const GridFooter: React.ForwardRefExoticComponent<GridFooterContainerProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridFooter };

package/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 const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
   var _rootProps$components;
 
   const apiRef = useGridApiContext();
@@ -34,4 +35,12 @@ export const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(prop
   }, 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/components/GridRow.d.ts

@@ -6,6 +6,10 @@ import { GridCellIdentifier } from '../hooks/features/focus/gridFocusState';
 export interface GridRowProps {
     rowId: GridRowId;
     selected: boolean;
+    /**
+     * 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: number;
     rowHeight: number;
     containerWidth: number;

package/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";
 
@@ -61,6 +61,7 @@ function GridRow(props) {
   const {
     selected,
     rowId,
+    row,
     index,
     style: styleProp,
     rowHeight,
@@ -132,7 +133,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
 
@@ -149,7 +155,7 @@ function GridRow(props) {
       }
     }
 
-    publish(GridEvents.rowClick, onClick)(event);
+    publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
 
   const style = _extends({}, styleProp, {
@@ -176,7 +182,8 @@ function GridRow(props) {
 
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage
     });
 
     rowClassName = rootProps.getRowClassName(rowParams);
@@ -185,8 +192,6 @@ function GridRow(props) {
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {
-    var _rootProps$components;
-
     const column = renderedColumns[i];
     const indexRelativeToAllColumns = firstColumnToRender + i;
     const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
@@ -215,7 +220,16 @@ function GridRow(props) {
     if (editCellState != null && column.renderEditCell) {
       var _rootProps$classes2;
 
-      const params = _extends({}, cellParams, editCellState, {
+      let updatedRow = row;
+
+      if (apiRef.current.unstable_getRowWithUpdatedValues) {
+        // Only the new editing API has this method
+        updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
+      }
+
+      const params = _extends({}, cellParams, {
+        row: updatedRow
+      }, editCellState, {
         api: apiRef.current
       });
 
@@ -231,24 +245,35 @@ function GridRow(props) {
 
     const hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     const 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));
+    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+
+    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+      var _rootProps$components;
+
+      const {
+        colSpan,
+        width
+      } = cellColSpanInfo.cellProps;
+      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));
+    }
   }
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
@@ -261,9 +286,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,
@@ -282,6 +307,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/components/GridRowCount.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 interface RowCountProps {
     rowCount: number;
     visibleRowCount: number;
 }
-declare const GridRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { GridRowCount };

package/components/GridRowCount.js

@@ -65,6 +65,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/components/GridScrollArea.js

@@ -4,7 +4,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';
@@ -100,9 +99,9 @@ function GridScrollAreaRaw(props) {
   const toggleDragging = React.useCallback(() => {
     setDragging(prevDragging => !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/components/GridSelectedRowCount.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 interface SelectedRowCountProps {
     selectedRowCount: number;
 }
-declare const GridSelectedRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridSelectedRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { GridSelectedRowCount };