@mui/x-data-grid 6.0.0-beta.5 → 6.0.1

package/legacy/DataGrid/DataGrid.js

@@ -6,7 +6,6 @@ import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
 import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
-import { DataGridColumnHeaders } from '../components/DataGridColumnHeaders';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
@@ -21,7 +20,6 @@ var DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref)
       sx: props.sx,
       ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        ColumnHeadersComponent: DataGridColumnHeaders,
         VirtualScrollerComponent: DataGridVirtualScroller
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     })
@@ -104,12 +102,12 @@ DataGridRaw.propTypes = {
    */
   columnVisibilityModel: PropTypes.object,
   /**
-   * Overrideable components.
+   * Overridable components.
    * @deprecated Use `slots` instead.
    */
   components: PropTypes.object,
   /**
-   * Overrideable components props dynamically passed to the component at rendering.
+   * Overridable components props dynamically passed to the component at rendering.
    * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: PropTypes.object,
@@ -326,7 +324,7 @@ DataGridRaw.propTypes = {
   onCellKeyDown: PropTypes.func,
   /**
    * Callback fired when the `cellModesModel` prop changes.
-   * @param {GridCellModesModel} cellModesModel Object containig which cells are in "edit" mode.
+   * @param {GridCellModesModel} cellModesModel Object containing which cells are in "edit" mode.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onCellModesModelChange: PropTypes.func,
@@ -472,7 +470,7 @@ DataGridRaw.propTypes = {
   onRowEditStop: PropTypes.func,
   /**
    * Callback fired when the `rowModesModel` prop changes.
-   * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
+   * @param {GridRowModesModel} rowModesModel Object containing which rows are in "edit" mode.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowModesModelChange: PropTypes.func,
@@ -586,11 +584,11 @@ DataGridRaw.propTypes = {
    */
   showColumnVerticalBorder: PropTypes.bool,
   /**
-   * Overrideable components props dynamically passed to the component at rendering.
+   * Overridable components props dynamically passed to the component at rendering.
    */
   slotProps: PropTypes.object,
   /**
-   * Overrideable components.
+   * Overridable components.
    */
   slots: PropTypes.object,
   /**

package/legacy/components/GridColumnHeaders.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+import { GridScrollArea } from './GridScrollArea';
+import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
+import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+  var innerRef = props.innerRef,
+    className = props.className,
+    visibleColumns = props.visibleColumns,
+    sortColumnLookup = props.sortColumnLookup,
+    filterColumnLookup = props.filterColumnLookup,
+    columnPositions = props.columnPositions,
+    columnHeaderTabIndexState = props.columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState = props.columnGroupHeaderTabIndexState,
+    columnHeaderFocus = props.columnHeaderFocus,
+    columnGroupHeaderFocus = props.columnGroupHeaderFocus,
+    densityFactor = props.densityFactor,
+    headerGroupingMaxDepth = props.headerGroupingMaxDepth,
+    columnMenuState = props.columnMenuState,
+    columnVisibility = props.columnVisibility,
+    columnGroupsHeaderStructure = props.columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence = props.hasOtherElementInTabSequence,
+    other = _objectWithoutProperties(props, _excluded);
+  var _useGridColumnHeaders = useGridColumnHeaders({
+      innerRef: innerRef,
+      visibleColumns: visibleColumns,
+      sortColumnLookup: sortColumnLookup,
+      filterColumnLookup: filterColumnLookup,
+      columnPositions: columnPositions,
+      columnHeaderTabIndexState: columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+      columnHeaderFocus: columnHeaderFocus,
+      columnGroupHeaderFocus: columnGroupHeaderFocus,
+      densityFactor: densityFactor,
+      headerGroupingMaxDepth: headerGroupingMaxDepth,
+      columnMenuState: columnMenuState,
+      columnVisibility: columnVisibility,
+      columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence
+    }),
+    isDragging = _useGridColumnHeaders.isDragging,
+    getRootProps = _useGridColumnHeaders.getRootProps,
+    getInnerProps = _useGridColumnHeaders.getInnerProps,
+    getColumnHeaders = _useGridColumnHeaders.getColumnHeaders,
+    getColumnGroupHeaders = _useGridColumnHeaders.getColumnGroupHeaders;
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
+    ref: ref
+  }, getRootProps(other), {
+    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: [getColumnGroupHeaders(), getColumnHeaders()]
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "right"
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnGroupHeaderFocus: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupHeaderTabIndexState: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupsHeaderStructure: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+    columnFields: PropTypes.arrayOf(PropTypes.string).isRequired,
+    groupId: PropTypes.string
+  }))).isRequired,
+  columnHeaderFocus: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnHeaderTabIndexState: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnMenuState: PropTypes.shape({
+    field: PropTypes.string,
+    open: PropTypes.bool.isRequired
+  }).isRequired,
+  columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired,
+  columnVisibility: PropTypes.object.isRequired,
+  densityFactor: PropTypes.number.isRequired,
+  filterColumnLookup: PropTypes.object.isRequired,
+  hasOtherElementInTabSequence: PropTypes.bool.isRequired,
+  headerGroupingMaxDepth: PropTypes.number.isRequired,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  minColumnIndex: PropTypes.number,
+  sortColumnLookup: PropTypes.object.isRequired,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+export { GridColumnHeaders };

package/legacy/components/GridRow.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
+var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
   _excluded2 = ["changeReason"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -23,6 +23,7 @@ import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSele
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { randomNumberBetween } from '../utils/utils';
+import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -65,11 +66,10 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     containerWidth = props.containerWidth,
     firstColumnToRender = props.firstColumnToRender,
     lastColumnToRender = props.lastColumnToRender,
-    cellFocus = props.cellFocus,
-    cellTabIndex = props.cellTabIndex,
-    editRowsState = props.editRowsState,
     _props$isLastVisible = props.isLastVisible,
     isLastVisible = _props$isLastVisible === void 0 ? false : _props$isLastVisible,
+    focusedCell = props.focusedCell,
+    tabbableCell = props.tabbableCell,
     onClick = props.onClick,
     onDoubleClick = props.onDoubleClick,
     onMouseEnter = props.onMouseEnter,
@@ -83,6 +83,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var sortModel = useGridSelector(apiRef, gridSortModelSelector);
   var treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  var editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   var handleRef = useForkRef(ref, refProp);
   var ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
@@ -184,29 +185,33 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
+  var slots = rootProps.slots,
+    slotProps = rootProps.slotProps,
+    rootClasses = rootProps.classes,
+    disableColumnReorder = rootProps.disableColumnReorder,
+    getCellClassName = rootProps.getCellClassName;
+  var rowReordering = rootProps.rowReordering;
+  var CellComponent = slots.cell;
   var getCell = React.useCallback(function (column, cellProps) {
-    var _rootProps$slotProps;
     var cellParams = apiRef.current.getCellParams(rowId, column.field);
     var classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
       id: rowId,
       field: column.field
     });
-    var disableDragEvents = rootProps.disableColumnReorder && column.disableReorder || !rootProps.rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
+    var disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
     if (column.cellClassName) {
       classNames.push(clsx(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
     }
     var editCellState = editRowsState[rowId] ? editRowsState[rowId][column.field] : null;
     var content;
     if (editCellState == null && column.renderCell) {
-      var _rootProps$classes;
       content = column.renderCell(_extends({}, cellParams, {
         api: apiRef.current
       }));
       // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--withRenderer'], (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes['cell--withRenderer']));
+      classNames.push(clsx(gridClasses['cell--withRenderer'], rootClasses == null ? void 0 : rootClasses['cell--withRenderer']));
     }
     if (editCellState != null && column.renderEditCell) {
-      var _rootProps$classes2;
       var updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
       var changeReason = editCellState.changeReason,
         editCellStateRest = _objectWithoutProperties(editCellState, _excluded2);
@@ -217,19 +222,19 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       });
       content = column.renderEditCell(params);
       // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--editing'], (_rootProps$classes2 = rootProps.classes) == null ? void 0 : _rootProps$classes2['cell--editing']));
+      classNames.push(clsx(gridClasses['cell--editing'], rootClasses == null ? void 0 : rootClasses['cell--editing']));
     }
-    if (rootProps.getCellClassName) {
+    if (getCellClassName) {
       // TODO move to GridCell
-      classNames.push(rootProps.getCellClassName(cellParams));
+      classNames.push(getCellClassName(cellParams));
     }
-    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;
+    var hasFocus = focusedCell === column.field;
+    var tabIndex = tabbableCell === column.field ? 0 : -1;
     var isSelected = apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
       id: rowId,
       field: column.field
     });
-    return /*#__PURE__*/_jsx(rootProps.slots.cell, _extends({
+    return /*#__PURE__*/_jsx(CellComponent, _extends({
       value: cellParams.value,
       field: column.field,
       width: cellProps.width,
@@ -247,10 +252,10 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       className: clsx(classNames),
       colSpan: cellProps.colSpan,
       disableDragEvents: disableDragEvents
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.cell, {
+    }, slotProps == null ? void 0 : slotProps.cell, {
       children: content
     }), column.field);
-  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, rowHeight, rowId, treeDepth, sortModel.length]);
+  }, [apiRef, rowId, disableColumnReorder, rowReordering, sortModel.length, treeDepth, editRowsState, getCellClassName, focusedCell, tabbableCell, CellComponent, rowHeight, slotProps == null ? void 0 : slotProps.cell, rootClasses]);
   var sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
   var minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
@@ -361,24 +366,35 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  cellFocus: PropTypes.object,
-  cellTabIndex: PropTypes.object,
-  containerWidth: PropTypes.number.isRequired,
-  editRowsState: PropTypes.object.isRequired,
-  firstColumnToRender: PropTypes.number.isRequired,
+  containerWidth: PropTypes.number,
+  firstColumnToRender: PropTypes.number,
+  /**
+   * Determines which cell has focus.
+   * If `null`, no cell in this row has focus.
+   */
+  focusedCell: PropTypes.string,
   /**
    * 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,
+  index: PropTypes.number,
   isLastVisible: PropTypes.bool,
-  lastColumnToRender: PropTypes.number.isRequired,
-  position: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
-  renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  lastColumnToRender: PropTypes.number,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  position: PropTypes.oneOf(['center', 'left', 'right']),
+  renderedColumns: PropTypes.arrayOf(PropTypes.object),
   row: PropTypes.object,
-  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
-  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  selected: PropTypes.bool.isRequired,
-  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  selected: PropTypes.bool,
+  /**
+   * Determines which cell should be tabbable by having tabIndex=0.
+   * If `null`, no cell in this row is in the tab sequence.
+   */
+  tabbableCell: PropTypes.string,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object)
 } : void 0;
 export { GridRow };

package/legacy/components/GridRowCount.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';

package/legacy/components/GridScrollArea.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';

package/legacy/components/GridSelectedRowCount.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';

package/legacy/components/base/GridBody.js

@@ -1,18 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnPositionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridSortColumnLookupSelector } from '../../hooks/features/sorting/gridSortingSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { gridDensityFactorSelector } from '../../hooks/features/density/densitySelector';
+import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
   var children = props.children,
     VirtualScrollerComponent = props.VirtualScrollerComponent,
-    ColumnHeadersComponent = props.ColumnHeadersComponent;
+    ColumnHeadersProps = props.ColumnHeadersProps;
   var apiRef = useGridPrivateApiContext();
   var rootProps = useGridRootProps();
+  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  var columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  var cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  var columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
+  var columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  var columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
+  var densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  var columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  var columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
+  var hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
   var _React$useState = React.useState(rootProps.disableVirtualization),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isVirtualizationDisabled = _React$useState2[0],
@@ -47,10 +71,24 @@ function GridBody(props) {
     apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/_jsxs(GridMainContainer, {
-    children: [/*#__PURE__*/_jsx(ColumnHeadersComponent, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
       ref: columnsContainerRef,
-      innerRef: columnHeadersRef
-    }), /*#__PURE__*/_jsx(GridAutoSizer, {
+      innerRef: columnHeadersRef,
+      visibleColumns: visibleColumns,
+      filterColumnLookup: filterColumnLookup,
+      sortColumnLookup: sortColumnLookup,
+      columnPositions: columnPositions,
+      columnHeaderTabIndexState: columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+      columnHeaderFocus: columnHeaderFocus,
+      columnGroupHeaderFocus: columnGroupHeaderFocus,
+      densityFactor: densityFactor,
+      headerGroupingMaxDepth: headerGroupingMaxDepth,
+      columnMenuState: columnMenuState,
+      columnVisibility: columnVisibility,
+      columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence
+    }, ColumnHeadersProps)), /*#__PURE__*/_jsx(GridAutoSizer, {
       nonce: rootProps.nonce,
       disableHeight: rootProps.autoHeight,
       onResize: handleResize,
@@ -67,7 +105,7 @@ process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
-  ColumnHeadersComponent: PropTypes.elementType.isRequired,
+  ColumnHeadersProps: PropTypes.object,
   VirtualScrollerComponent: PropTypes.elementType.isRequired
 } : void 0;
 export { GridBody };

package/legacy/components/base/GridOverlays.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import clsx from 'clsx';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';

package/legacy/components/cell/GridCell.js

@@ -5,7 +5,7 @@ var _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { GridCellModes } from '../../models';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -38,7 +38,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 var warnedOnce = false;
-function GridCell(props) {
+var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _rootProps$experiment;
   var align = props.align,
     children = props.children,
@@ -73,6 +73,7 @@ function GridCell(props) {
     other = _objectWithoutProperties(props, _excluded);
   var valueToRender = formattedValue == null ? value : formattedValue;
   var cellRef = React.useRef(null);
+  var handleRef = useForkRef(ref, cellRef);
   var focusElementRef = React.useRef(null);
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
@@ -180,7 +181,7 @@ function GridCell(props) {
     onDragOver: publish('cellDragOver', onDragOver)
   };
   return /*#__PURE__*/_jsx("div", _extends({
-    ref: cellRef,
+    ref: handleRef,
     className: clsx(className, classes.root),
     role: "cell",
     "data-field": field,
@@ -200,23 +201,24 @@ function GridCell(props) {
     onFocus: handleFocus,
     children: renderChildren()
   }));
-}
+});
+var MemoizedCell = /*#__PURE__*/React.memo(GridCell);
 process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  align: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  align: PropTypes.oneOf(['center', 'left', 'right']),
   cellMode: PropTypes.oneOf(['edit', 'view']),
   children: PropTypes.node,
   className: PropTypes.string,
-  colIndex: PropTypes.number.isRequired,
+  colIndex: PropTypes.number,
   colSpan: PropTypes.number,
   disableDragEvents: PropTypes.bool,
-  field: PropTypes.string.isRequired,
+  field: PropTypes.string,
   formattedValue: PropTypes.any,
   hasFocus: PropTypes.bool,
-  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
   isEditable: PropTypes.bool,
   isSelected: PropTypes.bool,
   onClick: PropTypes.func,
@@ -226,10 +228,10 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onKeyDown: PropTypes.func,
   onMouseDown: PropTypes.func,
   onMouseUp: PropTypes.func,
-  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   showRightBorder: PropTypes.bool,
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  tabIndex: PropTypes.oneOf([-1, 0]),
   value: PropTypes.any,
-  width: PropTypes.number.isRequired
+  width: PropTypes.number
 } : void 0;
-export { GridCell };
+export { MemoizedCell as GridCell };

package/legacy/components/cell/GridEditInputCell.js

@@ -11,7 +11,6 @@ import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridLoadIcon } from '../icons/index';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -123,7 +122,7 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',
     onChange: handleChange,
-    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {}) : undefined
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -2,17 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "getOptionLabel", "getOptionValue"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "getOptionLabel", "getOptionValue"],
+  _excluded2 = ["MenuProps"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import MenuItem from '@mui/material/MenuItem';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { getValueFromValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 function isKeyboardEvent(event) {
   return !!event.key;
@@ -51,6 +52,9 @@ function GridEditSingleSelectCell(props) {
     setOpen = _React$useState2[1];
   var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
   var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
+  var _ref = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {},
+    MenuProps = _ref.MenuProps,
+    otherBaseSelectProps = _objectWithoutProperties(_ref, _excluded2);
   useEnhancedEffect(function () {
     if (hasFocus) {
       var _inputRef$current;
@@ -76,7 +80,7 @@ function GridEditSingleSelectCell(props) {
   var getOptionValue = getOptionValueProp || colDef.getOptionValue;
   var getOptionLabel = getOptionLabelProp || colDef.getOptionLabel;
   var handleChange = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
       var target, formattedTargetValue;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -112,7 +116,7 @@ function GridEditSingleSelectCell(props) {
       }, _callee);
     }));
     return function handleChange(_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   var handleClose = function handleClose(event, reason) {
@@ -134,7 +138,6 @@ function GridEditSingleSelectCell(props) {
     }
     setOpen(true);
   };
-  var OptionComponent = isSelectNative ? 'option' : MenuItem;
   if (!valueOptions || !colDef) {
     return null;
   }
@@ -145,19 +148,21 @@ function GridEditSingleSelectCell(props) {
     onChange: handleChange,
     open: open,
     onOpen: handleOpen,
-    MenuProps: {
+    MenuProps: _extends({
       onClose: handleClose
-    },
+    }, MenuProps),
     error: error,
     native: isSelectNative,
     fullWidth: true
-  }, other, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect, {
+  }, other, otherBaseSelectProps, {
     children: valueOptions.map(function (valueOption) {
+      var _rootProps$slotProps3;
       var value = getOptionValue(valueOption);
-      return /*#__PURE__*/_jsx(OptionComponent, {
-        value: value,
-        children: getOptionLabel(valueOption)
-      }, value);
+      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelectOption) || {}, {
+        native: isSelectNative,
+        key: value,
+        value: value
+      }), getOptionLabel(valueOption));
     })
   }));
 }