@mui/x-data-grid 6.0.0-alpha.2 → 6.0.0-alpha.4

package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,4 +1,3 @@
-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 * as React from 'react';
@@ -8,9 +7,9 @@ import { styled } from '@mui/material/styles';
 import { defaultMemoize } from 'reselect';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
-import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
-import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector } from '../focus/gridFocusStateSelector';
-import { gridDensityHeaderHeightSelector, gridDensityHeaderGroupingMaxDepthSelector, gridDensityTotalHeaderHeightSelector } from '../density/densitySelector';
+import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector } from '../focus/gridFocusStateSelector';
+import { gridDensityHeaderHeightSelector } from '../density/densitySelector';
 import { gridFilterActiveItemsLookupSelector } from '../filter/gridFilterSelector';
 import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
 import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
@@ -21,10 +20,8 @@ import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
-import { isDeepEqual } from '../../../utils/utils'; // TODO: add the possibility to switch this value if needed for customization
-
+import { gridTotalHeaderHeightSelector, gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
-var MERGE_EMPTY_CELLS = true;
 var GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
@@ -59,15 +56,19 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var apiRef = useGridApiContext();
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  var tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  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 headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
-  var headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
-  var totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  var totalHeaderHeight = useGridSelector(apiRef, gridTotalHeaderHeightSelector);
   var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
   var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  var columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  var columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   var rootProps = useGridRootProps();
   var innerRef = React.useRef(null);
   var handleInnerRef = useForkRef(innerRefProp, innerRef);
@@ -244,8 +245,8 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       var column = renderedColumns[i];
       var columnIndex = firstColumnToRender + i;
       var isFirstColumn = columnIndex === 0;
-      var hasTabbableElement = !(tabIndexState === null && cellTabIndexState === null);
-      var tabIndex = tabIndexState !== null && tabIndexState.field === column.field || isFirstColumn && !hasTabbableElement ? 0 : -1;
+      var hasTabbableElement = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+      var tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === column.field || isFirstColumn && !hasTabbableElement ? 0 : -1;
       var hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === column.field;
       var open = columnMenuState.open && columnMenuState.field === column.field;
       columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[column.field], {
@@ -270,12 +271,6 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     });
   };
 
-  var getParents = function getParents() {
-    var path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    var depth = arguments.length > 1 ? arguments[1] : undefined;
-    return path.slice(0, depth + 1);
-  };
-
   var getColumnGroupHeaders = function getColumnGroupHeaders(params) {
     if (headerGroupingMaxDepth === 0) {
       return null;
@@ -287,114 +282,63 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       return null;
     }
 
-    var renderedColumns = columnsToRender.renderedColumns,
-        firstColumnToRender = columnsToRender.firstColumnToRender,
-        lastColumnToRender = columnsToRender.lastColumnToRender,
-        maxLastColumn = columnsToRender.maxLastColumn;
+    var firstColumnToRender = columnsToRender.firstColumnToRender,
+        lastColumnToRender = columnsToRender.lastColumnToRender;
     var columns = [];
     var headerToRender = [];
 
     var _loop = function _loop(depth) {
-      var _visibleColumns$first, _visibleColumns$first2, _visibleColumns$first3;
-
-      // Initialize the header line with a grouping item containing all the columns on the left of the virtualization which are in the same group as the first group to render
-      var initialHeader = [];
-      var leftOverflow = 0;
-      var columnIndex = firstColumnToRender - 1;
-      var firstColumnToRenderGroup = (_visibleColumns$first = visibleColumns[firstColumnToRender]) == null ? void 0 : (_visibleColumns$first2 = _visibleColumns$first.groupPath) == null ? void 0 : _visibleColumns$first2[depth]; // The array of parent is used to manage empty grouping cell
-      // When two empty grouping cell are next to each other, we merge them if the belong to the same group.
-
-      var firstColumnToRenderGroupParents = getParents((_visibleColumns$first3 = visibleColumns[firstColumnToRender]) == null ? void 0 : _visibleColumns$first3.groupPath, depth);
-
-      while (firstColumnToRenderGroup !== null && columnIndex >= minColumnIndex && (_visibleColumns$colum = visibleColumns[columnIndex]) != null && _visibleColumns$colum.groupPath && isDeepEqual(getParents((_visibleColumns$colum2 = visibleColumns[columnIndex]) == null ? void 0 : _visibleColumns$colum2.groupPath, depth), firstColumnToRenderGroupParents)) {
-        var _visibleColumns$colum, _visibleColumns$colum2, _column$computedWidth;
-
-        var column = visibleColumns[columnIndex];
-        leftOverflow += (_column$computedWidth = column.computedWidth) != null ? _column$computedWidth : 0;
-
-        if (initialHeader.length === 0) {
-          var _column$computedWidth2;
-
-          initialHeader.push({
-            width: (_column$computedWidth2 = column.computedWidth) != null ? _column$computedWidth2 : 0,
-            fields: [column.field],
-            groupId: firstColumnToRenderGroup,
-            groupParents: firstColumnToRenderGroupParents,
-            colIndex: columnIndex
-          });
-        } else {
-          var _column$computedWidth3;
-
-          initialHeader[0].width += (_column$computedWidth3 = column.computedWidth) != null ? _column$computedWidth3 : 0;
-          initialHeader[0].fields.push(column.field);
-          initialHeader[0].colIndex = columnIndex;
-        }
-
-        columnIndex -= 1;
-      }
-
-      var depthInfo = renderedColumns.reduce(function (aggregated, column, i) {
-        var _column$computedWidth7;
-
-        var lastItem = aggregated[aggregated.length - 1];
-
-        if (column.groupPath && column.groupPath.length > depth) {
-          var _column$computedWidth5;
-
-          if (lastItem && lastItem.groupId === column.groupPath[depth]) {
-            var _column$computedWidth4;
-
-            // Merge with the previous columns
-            return [].concat(_toConsumableArray(aggregated.slice(0, aggregated.length - 1)), [_extends({}, lastItem, {
-              width: lastItem.width + ((_column$computedWidth4 = column.computedWidth) != null ? _column$computedWidth4 : 0),
-              fields: [].concat(_toConsumableArray(lastItem.fields), [column.field])
-            })]);
-          } // Create a new grouping
-
-
-          return [].concat(_toConsumableArray(aggregated), [{
-            groupId: column.groupPath[depth],
-            groupParents: getParents(column.groupPath, depth),
-            width: (_column$computedWidth5 = column.computedWidth) != null ? _column$computedWidth5 : 0,
-            fields: [column.field],
-            colIndex: firstColumnToRender + i
-          }]);
-        }
-
-        if (MERGE_EMPTY_CELLS && lastItem && lastItem.groupId === null && isDeepEqual(getParents(column.groupPath, depth), lastItem.groupParents)) {
-          var _column$computedWidth6;
-
-          // We merge with previous column
-          return [].concat(_toConsumableArray(aggregated.slice(0, aggregated.length - 1)), [_extends({}, lastItem, {
-            width: lastItem.width + ((_column$computedWidth6 = column.computedWidth) != null ? _column$computedWidth6 : 0),
-            fields: [].concat(_toConsumableArray(lastItem.fields), [column.field])
-          })]);
-        } // We create new empty cell
-
-
-        return [].concat(_toConsumableArray(aggregated), [{
-          groupId: null,
-          groupParents: getParents(column.groupPath, depth),
-          width: (_column$computedWidth7 = column.computedWidth) != null ? _column$computedWidth7 : 0,
-          fields: [column.field],
-          colIndex: firstColumnToRender + i
-        }]);
-      }, initialHeader);
-      columnIndex = lastColumnToRender;
-      var lastColumnToRenderGroup = depthInfo[depthInfo.length - 1].groupId;
-
-      while (lastColumnToRenderGroup !== null && columnIndex < maxLastColumn && (_visibleColumns$colum3 = visibleColumns[columnIndex]) != null && _visibleColumns$colum3.groupPath && ((_visibleColumns$colum4 = visibleColumns[columnIndex]) == null ? void 0 : (_visibleColumns$colum5 = _visibleColumns$colum4.groupPath) == null ? void 0 : _visibleColumns$colum5[depth]) === lastColumnToRenderGroup) {
-        var _visibleColumns$colum3, _visibleColumns$colum4, _visibleColumns$colum5, _column$computedWidth8;
-
-        var _column = visibleColumns[columnIndex];
-        depthInfo[depthInfo.length - 1].width += (_column$computedWidth8 = _column.computedWidth) != null ? _column$computedWidth8 : 0;
-        depthInfo[depthInfo.length - 1].fields.push(_column.field);
-        columnIndex += 1;
-      }
-
+      var _apiRef$current$unsta, _apiRef$current$unsta2;
+
+      var rowStructure = columnGroupsHeaderStructure[depth];
+      var firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
+      var firstGroupToRender = (_apiRef$current$unsta = apiRef.current.unstable_getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta : null;
+      var firstGroupIndex = rowStructure.findIndex(function (_ref4) {
+        var groupId = _ref4.groupId,
+            columnFields = _ref4.columnFields;
+        return groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender);
+      });
+      var lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
+      var lastGroupToRender = (_apiRef$current$unsta2 = apiRef.current.unstable_getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta2 : null;
+      var lastGroupIndex = rowStructure.findIndex(function (_ref5) {
+        var groupId = _ref5.groupId,
+            columnFields = _ref5.columnFields;
+        return groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender);
+      });
+      var visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(function (groupStructure) {
+        return _extends({}, groupStructure, {
+          columnFields: groupStructure.columnFields.filter(function (field) {
+            return columnVisibility[field] !== false;
+          })
+        });
+      }).filter(function (groupStructure) {
+        return groupStructure.columnFields.length > 0;
+      });
+      var leftOverflow = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
+      var columnIndex = firstColumnToRender;
+      var elements = visibleColumnGroupHeader.map(function (_ref6) {
+        var groupId = _ref6.groupId,
+            columnFields = _ref6.columnFields;
+        var hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
+        var tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
+        var headerInfo = {
+          groupId: groupId,
+          width: columnFields.map(function (field) {
+            return apiRef.current.getColumn(field).computedWidth;
+          }).reduce(function (acc, val) {
+            return acc + val;
+          }, 0),
+          fields: columnFields,
+          colIndex: columnIndex,
+          hasFocus: hasFocus,
+          tabIndex: tabIndex
+        };
+        columnIndex += columnFields.length;
+        return headerInfo;
+      });
       headerToRender.push({
         leftOverflow: leftOverflow,
-        elements: _toConsumableArray(depthInfo)
+        elements: elements
       });
     };
 
@@ -414,7 +358,9 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
           var groupId = _ref3.groupId,
               width = _ref3.width,
               fields = _ref3.fields,
-              colIndex = _ref3.colIndex;
+              colIndex = _ref3.colIndex,
+              hasFocus = _ref3.hasFocus,
+              tabIndex = _ref3.tabIndex;
           return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
             groupId: groupId,
             width: width,
@@ -424,7 +370,9 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
             isLastColumn: colIndex === visibleColumns.length - fields.length,
             extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
             maxDepth: headerToRender.length,
-            height: headerHeight
+            height: headerHeight,
+            hasFocus: hasFocus,
+            tabIndex: tabIndex
           }, groupIndex);
         })
       }, depthIndex));

package/legacy/hooks/features/density/densitySelector.js

@@ -11,12 +11,6 @@ export var gridDensityRowHeightSelector = createSelector(gridDensitySelector, fu
 export var gridDensityHeaderHeightSelector = createSelector(gridDensitySelector, function (density) {
   return density.headerHeight;
 });
-export var gridDensityHeaderGroupingMaxDepthSelector = createSelector(gridDensitySelector, function (density) {
-  return density.headerGroupingMaxDepth;
-});
 export var gridDensityFactorSelector = createSelector(gridDensitySelector, function (density) {
   return density.factor;
-});
-export var gridDensityTotalHeaderHeightSelector = createSelector(gridDensitySelector, function (density) {
-  return density.headerHeight * (1 + density.headerGroupingMaxDepth);
 });

package/legacy/hooks/features/density/useGridDensity.js

@@ -1,25 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { GridDensityTypes } from '../../../models/gridDensity';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridDensitySelector } from './densitySelector';
 import { isDeepEqual } from '../../../utils/utils';
-import { useGridSelector } from '../../utils/useGridSelector';
-import { gridVisibleColumnDefinitionsSelector } from '../columns';
-import { unwrapGroupingColumnModel } from '../columnGrouping/useGridColumnGrouping';
 export var COMPACT_DENSITY_FACTOR = 0.7;
 export var COMFORTABLE_DENSITY_FACTOR = 1.3; // TODO v6: revise keeping headerHeight and rowHeight in state
 
-var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth) {
+var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight) {
   switch (newDensity) {
     case GridDensityTypes.Compact:
       return {
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMPACT_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMPACT_DENSITY_FACTOR),
-        headerGroupingMaxDepth: newMaxDepth,
         factor: COMPACT_DENSITY_FACTOR
       };
 
@@ -28,7 +23,6 @@ var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHead
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMFORTABLE_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMFORTABLE_DENSITY_FACTOR),
-        headerGroupingMaxDepth: newMaxDepth,
         factor: COMFORTABLE_DENSITY_FACTOR
       };
 
@@ -37,57 +31,25 @@ var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHead
         value: newDensity,
         headerHeight: newHeaderHeight,
         rowHeight: newRowHeight,
-        headerGroupingMaxDepth: newMaxDepth,
         factor: 1
       };
   }
 };
 
 export var densityStateInitializer = function densityStateInitializer(state, props) {
-  // TODO: think about improving this initialization. Could it be done in the useColumn initializer?
-  // TODO: manage to remove ts-ignore
-  var maxDepth;
-
-  if (props.columnGroupingModel == null || Object.keys(props.columnGroupingModel).length === 0) {
-    maxDepth = 0;
-  } else {
-    var unwrappedGroupingColumnModel = unwrapGroupingColumnModel(props.columnGroupingModel);
-    var columnsState = state.columns;
-    var visibleColumns = columnsState.all.filter(function (field) {
-      return columnsState.columnVisibilityModel[field] !== false;
-    });
-
-    if (visibleColumns.length === 0) {
-      maxDepth = 0;
-    } else {
-      maxDepth = Math.max.apply(Math, _toConsumableArray(visibleColumns.map(function (field) {
-        var _unwrappedGroupingCol, _unwrappedGroupingCol2;
-
-        return (_unwrappedGroupingCol = (_unwrappedGroupingCol2 = unwrappedGroupingColumnModel[field]) == null ? void 0 : _unwrappedGroupingCol2.length) != null ? _unwrappedGroupingCol : 0;
-      })));
-    }
-  }
-
   return _extends({}, state, {
-    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight, maxDepth)
+    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
   });
 };
 export var useGridDensity = function useGridDensity(apiRef, props) {
-  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  var maxDepth = visibleColumns.length > 0 ? Math.max.apply(Math, _toConsumableArray(visibleColumns.map(function (column) {
-    var _column$groupPath$len, _column$groupPath;
-
-    return (_column$groupPath$len = (_column$groupPath = column.groupPath) == null ? void 0 : _column$groupPath.length) != null ? _column$groupPath$len : 0;
-  }))) : 0;
   var logger = useGridLogger(apiRef, 'useDensity');
   var setDensity = React.useCallback(function (newDensity) {
     var newHeaderHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.headerHeight;
     var newRowHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : props.rowHeight;
-    var newMaxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : maxDepth;
     logger.debug("Set grid density to ".concat(newDensity));
     apiRef.current.setState(function (state) {
       var currentDensityState = gridDensitySelector(state);
-      var newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth);
+      var newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight);
 
       if (isDeepEqual(currentDensityState, newDensityState)) {
         return state;
@@ -98,10 +60,10 @@ export var useGridDensity = function useGridDensity(apiRef, props) {
       });
     });
     apiRef.current.forceUpdate();
-  }, [logger, apiRef, props.headerHeight, props.rowHeight, maxDepth]);
+  }, [logger, apiRef, props.headerHeight, props.rowHeight]);
   React.useEffect(function () {
-    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight, maxDepth);
-  }, [apiRef, props.density, props.rowHeight, props.headerHeight, maxDepth]);
+    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight);
+  }, [apiRef, props.density, props.rowHeight, props.headerHeight]);
   var densityApi = {
     setDensity: setDensity
   };

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -4,11 +4,12 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector } from '../columns';
-import { gridDensityTotalHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
+import { gridDensityRowHeightSelector } from '../density';
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
+import { gridTotalHeaderHeightSelector } from '../columnGrouping/gridColumnGroupsSelector';
 var isTestEnvironment = process.env.NODE_ENV === 'test';
 
 var hasScroll = function hasScroll(_ref) {
@@ -41,7 +42,7 @@ export function useGridDimensions(apiRef, props) {
   var rootDimensionsRef = React.useRef(null);
   var fullDimensionsRef = React.useRef(null);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  var totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
+  var totalHeaderHeight = useGridSelector(apiRef, gridTotalHeaderHeightSelector);
   var updateGridDimensionsRef = React.useCallback(function () {
     var _apiRef$current$rootE;
 

package/legacy/hooks/features/editing/index.js

@@ -0,0 +1 @@
+export * from './gridEditingSelectors';

package/legacy/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js}

@@ -12,7 +12,7 @@ import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
@@ -129,7 +129,8 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
 
       if (_reason) {
         var _newParams = _extends({}, params, {
-          reason: _reason
+          reason: _reason,
+          key: event.key
         });
 
         apiRef.current.publishEvent('cellEditStart', _newParams, event);
@@ -139,13 +140,20 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var handleCellEditStart = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
-        reason = params.reason;
+        reason = params.reason,
+        key = params.key;
     var startCellEditModeParams = {
       id: id,
       field: field
     };
 
-    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -268,9 +276,16 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var updateStateToStartCellEditMode = useEventCallback(function (params) {
     var id = params.id,
         field = params.field,
-        deleteValue = params.deleteValue;
+        deleteValue = params.deleteValue,
+        initialValue = params.initialValue;
+    var newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     var newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

package/legacy/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js}

@@ -4,10 +4,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridCellEditing } from './useGridCellEditing.new';
+import { useGridCellEditing } from './useGridCellEditing';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
-import { useGridRowEditing } from './useGridRowEditing.new';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { useGridRowEditing } from './useGridRowEditing';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isAutoGeneratedRow } from '../rows/gridRowsUtils';
 export var editingStateInitializer = function editingStateInitializer(state) {
   return _extends({}, state, {

package/legacy/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js}

@@ -10,7 +10,7 @@ import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
@@ -189,6 +189,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
         var _newParams = _extends({}, _rowParams, {
           field: params.field,
+          key: event.key,
           reason: _reason
         });
 
@@ -199,13 +200,20 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var handleRowEditStart = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
-        reason = params.reason;
+        reason = params.reason,
+        key = params.key;
     var startRowEditModeParams = {
       id: id,
       fieldToFocus: field
     };
 
-    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -338,7 +346,8 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var updateStateToStartRowEditMode = useEventCallback(function (params) {
     var id = params.id,
         fieldToFocus = params.fieldToFocus,
-        deleteValue = params.deleteValue;
+        deleteValue = params.deleteValue,
+        initialValue = params.initialValue;
     var columnFields = gridColumnFieldsSelector(apiRef);
     var newProps = columnFields.reduce(function (acc, field) {
       var cellParams = apiRef.current.getCellParams(id, field);
@@ -347,9 +356,14 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         return acc;
       }
 
-      var shouldDeleteValue = deleteValue && fieldToFocus === field;
+      var newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

package/legacy/hooks/features/export/useGridPrintExport.js

@@ -7,7 +7,7 @@ import { ownerDocument } from '@mui/material/utils';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridVisibleRowCountSelector } from '../filter/gridFilterSelector';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
-import { gridDensityTotalHeaderHeightSelector } from '../density/densitySelector';
+import { gridTotalHeaderHeightSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -90,7 +90,7 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
       return;
     }
 
-    var totalHeaderHeight = gridDensityTotalHeaderHeightSelector(apiRef);
+    var totalHeaderHeight = gridTotalHeaderHeightSelector(apiRef);
     var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     var gridRootElement = apiRef.current.rootElementRef.current;
     var gridClone = gridRootElement.cloneNode(true);

package/legacy/hooks/features/focus/gridFocusStateSelector.js

@@ -7,6 +7,10 @@ export var gridFocusCellSelector = createSelector(gridFocusStateSelector, functi
 });
 export var gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, function (focusState) {
   return focusState.columnHeader;
+}); // eslint-disable-next-line @typescript-eslint/naming-convention
+
+export var unstable_gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, function (focusState) {
+  return focusState.columnGroupHeader;
 });
 export var gridTabIndexStateSelector = function gridTabIndexStateSelector(state) {
   return state.tabIndex;
@@ -16,4 +20,8 @@ export var gridTabIndexCellSelector = createSelector(gridTabIndexStateSelector,
 });
 export var gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, function (state) {
   return state.columnHeader;
+}); // eslint-disable-next-line @typescript-eslint/naming-convention
+
+export var unstable_gridTabIndexColumnGroupHeaderSelector = createSelector(gridTabIndexStateSelector, function (state) {
+  return state.columnGroupHeader;
 });