[DataGridPremium] Keep focus on the grouping cell on space bar press (@k-rajat19)

docs/data/data-grid/column-definition/AutogeneratedRows.js

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import {
   DataGridPremium,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
   isAutogeneratedRow,
   useGridApiRef,
   useKeepGroupedColumnsHidden,
 } from '@mui/x-data-grid-premium';
 import { useMovieData } from '@mui/x-data-grid-generator';
 
 const columns = [
-  { field: '__row_group_by_columns_group__', width: 200 },
+  { field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 200 },
   { field: 'company', width: 200 },
   {
     field: 'title',

docs/data/data-grid/column-definition/AutogeneratedRows.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   DataGridPremium,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
   GridColDef,
   isAutogeneratedRow,
   useGridApiRef,
@@ -9,7 +10,7 @@ import {
 import { useMovieData } from '@mui/x-data-grid-generator';
 
 const columns: GridColDef[] = [
-  { field: '__row_group_by_columns_group__', width: 200 },
+  { field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 200 },
   { field: 'company', width: 200 },
   {
     field: 'title',

docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.js

@@ -4,10 +4,11 @@ import {
   GridToolbar,
   useKeepGroupedColumnsHidden,
   useGridApiRef,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
 } from '@mui/x-data-grid-premium';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
-const hiddenFields = ['id', '__row_group_by_columns_group__', 'status'];
+const hiddenFields = ['id', GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, 'status'];
 
 const getTogglableColumns = (columns) => {
   return columns

docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx

@@ -5,10 +5,11 @@ import {
   GridColDef,
   useKeepGroupedColumnsHidden,
   useGridApiRef,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
 } from '@mui/x-data-grid-premium';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
-const hiddenFields = ['id', '__row_group_by_columns_group__', 'status'];
+const hiddenFields = ['id', GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, 'status'];
 
 const getTogglableColumns = (columns: GridColDef[]) => {
   return columns

docs/data/data-grid/column-visibility/column-visibility.md

@@ -86,16 +86,21 @@ In the following demo, the columns panel is disabled, and access to columns `id`
 To show or hide specific columns in the column visibility panel, use the `slotProps.columnsManagement.getTogglableColumns` prop. It should return an array of column field names.
 
 ```tsx
-// stop `id`, `__row_group_by_columns_group__`, and `status` columns to be togglable
-const hiddenFields = ['id', '__row_group_by_columns_group__', 'status'];
+import {
+  DataGridPremium,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
+} from '@mui/x-data-grid-premium';
+
+// stop `id`, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, and `status` columns to be togglable
+const hiddenFields = ['id', GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, 'status'];
 
 const getTogglableColumns = (columns: GridColDef[]) => {
   return columns
     .filter((column) => !hiddenFields.includes(column.field))
     .map((column) => column.field);
 };
 
-<DataGrid
+<DataGridPremium
   slots={{
     toolbar: GridToolbar,
   }}

docs/data/data-grid/overview/DataGridPremiumDemo.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import {
   DataGridPremium,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
   GridToolbar,
   useGridApiRef,
   useKeepGroupedColumnsHidden,
@@ -40,7 +41,7 @@ export default function DataGridPremiumDemo() {
         model: ['commodity'],
       },
       sorting: {
-        sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
+        sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }],
       },
       aggregation: {
         model: {

docs/data/data-grid/overview/DataGridPremiumDemo.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import {
   DataGridPremium,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
   GridToolbar,
   useGridApiRef,
   useKeepGroupedColumnsHidden,
@@ -40,7 +41,7 @@ export default function DataGridPremiumDemo() {
         model: ['commodity'],
       },
       sorting: {
-        sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
+        sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }],
       },
       aggregation: {
         model: {

docs/data/data-grid/row-grouping/RowGroupingFullExample.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   DataGridPremium,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
   useGridApiRef,
   useKeepGroupedColumnsHidden,
 } from '@mui/x-data-grid-premium';
@@ -23,7 +24,7 @@ export default function RowGroupingFullExample() {
         model: ['commodity'],
       },
       sorting: {
-        sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
+        sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }],
       },
     },
   });

docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   DataGridPremium,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
   useGridApiRef,
   useKeepGroupedColumnsHidden,
 } from '@mui/x-data-grid-premium';
@@ -23,7 +24,7 @@ export default function RowGroupingFullExample() {
         model: ['commodity'],
       },
       sorting: {
-        sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
+        sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }],
       },
     },
   });

packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts

@@ -16,6 +16,9 @@ import {
   GridAggregatedFilterItemApplier,
   GridAggregatedFilterItemApplierResult,
   GridColumnRawLookup,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
+  getRowGroupingCriteriaFromGroupingField,
+  isGroupingColumn,
 } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import {
@@ -27,7 +30,11 @@ import { GridStatePremium } from '../../../models/gridStatePremium';
 import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 
-export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+export {
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
+  getRowGroupingCriteriaFromGroupingField,
+  isGroupingColumn,
+};
 
 export enum RowGroupingStrategy {
   Default = 'grouping-columns',
@@ -42,20 +49,6 @@ export const getRowGroupingFieldFromGroupingCriteria = (groupingCriteria: string
   return `__row_group_by_columns_group_${groupingCriteria}__`;
 };
 
-export const getRowGroupingCriteriaFromGroupingField = (groupingColDefField: string) => {
-  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
-
-  if (!match) {
-    return null;
-  }
-
-  return match[1];
-};
-
-export const isGroupingColumn = (field: string) =>
-  field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD ||
-  getRowGroupingCriteriaFromGroupingField(field) !== null;
-
 interface FilterRowTreeFromTreeDataParams {
   rowTree: GridRowTreeConfig;
   isRowMatchingFilters: GridAggregatedFilterItemApplier | null;

packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { GRID_STRING_COL_DEF, GridColDef } from '@mui/x-data-grid';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '@mui/x-data-grid/internals';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { GridDetailPanelToggleCell } from '../../../components/GridDetailPanelToggleCell';
 import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
 
-export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+export { GRID_DETAIL_PANEL_TOGGLE_FIELD };
 
 export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF: GridColDef = {
   ...GRID_STRING_COL_DEF,

packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts

@@ -1,4 +1,5 @@
 import { GRID_STRING_COL_DEF, GridColDef } from '@mui/x-data-grid';
+import { GRID_TREE_DATA_GROUPING_FIELD } from '@mui/x-data-grid/internals';
 
 /**
  * TODO: Add sorting and filtering on the value and the filteredDescendantCount
@@ -19,7 +20,7 @@ export const GRID_TREE_DATA_GROUPING_COL_DEF: Omit<GridColDef, 'field' | 'editab
   },
 };
 
-export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+export { GRID_TREE_DATA_GROUPING_FIELD };
 
 export const GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES: Pick<
   GridColDef,

packages/x-data-grid/src/components/GridRow.tsx

@@ -19,7 +19,7 @@ import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName, isEventTargetInPortal } 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 { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../internals/constants';
 import type { GridDimensions } from '../hooks/features/dimensions';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';

packages/x-data-grid/src/components/cell/GridBooleanCell.tsx

@@ -11,6 +11,7 @@ import { isAutogeneratedRowNode } from '../../hooks/features/rows/gridRowsUtils'
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridColDef } from '../../models/colDef/gridColDef';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from '../../internals/constants';
 
 type OwnerState = { classes: DataGridProcessedProps['classes'] };
 
@@ -153,7 +154,10 @@ const GridBooleanCell = React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 
 export const renderBooleanCell: GridColDef['renderCell'] = (params: GridBooleanCellProps) => {
-  if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) {
+  if (
+    params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD &&
+    isAutogeneratedRowNode(params.rowNode)
+  ) {
     return '';
   }
 

packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
+import {
+  GRID_TREE_DATA_GROUPING_FIELD,
+  GRID_DETAIL_PANEL_TOGGLE_FIELD,
+} from '../../../internals/constants';
+import { isGroupingColumn } from '../../../internals/utils/gridRowGroupingUtils';
 import { GridEventListener } from '../../../models/events';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridCellParams } from '../../../models/params/gridCellParams';
@@ -16,7 +21,6 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSel
 import { gridClasses } from '../../../constants/gridClasses';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { GridRowId } from '../../../models';
 import { gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
@@ -587,8 +591,7 @@ export const useGridKeyboardNavigation = (
           const colDef = (params as GridCellParams).colDef;
           if (
             colDef &&
-            // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
-            colDef.field === '__tree_data_group__'
+            (colDef.field === GRID_TREE_DATA_GROUPING_FIELD || isGroupingColumn(colDef.field))
           ) {
             break;
           }

packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts

@@ -29,7 +29,7 @@ import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 import { GridRowSelectionModel } from '../../../models';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../internals/constants';
 import { gridClasses } from '../../../constants/gridClasses';
 import { isEventTargetInPortal } from '../../../utils/domUtils';
 import { isMultipleRowSelectionEnabled, findRowsToSelect, findRowsToDeselect } from './utils';

packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../internals/constants';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRenderContextSelector } from '../virtualization/gridVirtualizationSelectors';
@@ -15,6 +16,7 @@ import {
   isRowContextInitialized,
   getCellValue,
 } from './gridRowSpanningUtils';
+import { GRID_CHECKBOX_SELECTION_FIELD } from '../../../colDef/gridCheckboxSelectionColDef';
 
 export interface GridRowSpanningState {
   spannedCells: Record<GridRowId, Record<GridColDef['field'], number>>;
@@ -31,7 +33,11 @@ export type RowRange = { firstRowIndex: number; lastRowIndex: number };
 
 const EMPTY_STATE = { spannedCells: {}, hiddenCells: {}, hiddenCellOriginMap: {} };
 const EMPTY_RANGE: RowRange = { firstRowIndex: 0, lastRowIndex: 0 };
-const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+const skippedFields = new Set([
+  GRID_CHECKBOX_SELECTION_FIELD,
+  '__reorder__',
+  GRID_DETAIL_PANEL_TOGGLE_FIELD,
+]);
 /**
  * Default number of rows to process during state initialization to avoid flickering.
  * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without

packages/x-data-grid/src/internals/constants.ts

@@ -0,0 +1,3 @@
+export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

packages/x-data-grid/src/internals/index.ts

@@ -177,4 +177,5 @@ export type { GridApiCaches } from '../models/gridApiCaches';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';
 
 export * from './utils';
+export * from './constants';
 export type { Localization } from '../utils/getGridLocalization';

packages/x-data-grid/src/internals/utils/gridRowGroupingUtils.ts

@@ -0,0 +1,15 @@
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from '../constants';
+
+export const getRowGroupingCriteriaFromGroupingField = (groupingColDefField: string) => {
+  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+
+  if (!match) {
+    return null;
+  }
+
+  return match[1];
+};
+
+export const isGroupingColumn = (field: string) =>
+  field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD ||
+  getRowGroupingCriteriaFromGroupingField(field) !== null;

packages/x-data-grid/src/internals/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './computeSlots';
 export * from './useProps';
 export * from './propValidation';
+export * from './gridRowGroupingUtils';

scripts/x-data-grid-premium.exports.json

@@ -72,15 +72,15 @@
   { "name": "GRID_DATETIME_COL_DEF", "kind": "Variable" },
   { "name": "GRID_DEFAULT_LOCALE_TEXT", "kind": "Variable" },
   { "name": "GRID_DETAIL_PANEL_TOGGLE_COL_DEF", "kind": "Variable" },
-  { "name": "GRID_DETAIL_PANEL_TOGGLE_FIELD", "kind": "Variable" },
+  { "name": "GRID_DETAIL_PANEL_TOGGLE_FIELD", "kind": "ImportSpecifier" },
   { "name": "GRID_EXPERIMENTAL_ENABLED", "kind": "Variable" },
   { "name": "GRID_NUMERIC_COL_DEF", "kind": "Variable" },
   { "name": "GRID_REORDER_COL_DEF", "kind": "Variable" },
   { "name": "GRID_ROOT_GROUP_ID", "kind": "Variable" },
-  { "name": "GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD", "kind": "Variable" },
+  { "name": "GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD", "kind": "ImportSpecifier" },
   { "name": "GRID_SINGLE_SELECT_COL_DEF", "kind": "Variable" },
   { "name": "GRID_STRING_COL_DEF", "kind": "Variable" },
-  { "name": "GRID_TREE_DATA_GROUPING_FIELD", "kind": "Variable" },
+  { "name": "GRID_TREE_DATA_GROUPING_FIELD", "kind": "ImportSpecifier" },
   { "name": "GridActionsCell", "kind": "Function" },
   { "name": "GridActionsCellItem", "kind": "Variable" },
   { "name": "GridActionsCellItemProps", "kind": "TypeAlias" },
@@ -636,7 +636,7 @@
   { "name": "gridVisibleRowsLookupSelector", "kind": "Variable" },
   { "name": "GridWorkspacesIcon", "kind": "Variable" },
   { "name": "isAutogeneratedRow", "kind": "Variable" },
-  { "name": "isGroupingColumn", "kind": "Variable" },
+  { "name": "isGroupingColumn", "kind": "ImportSpecifier" },
   { "name": "isLeaf", "kind": "Function" },
   { "name": "LicenseInfo", "kind": "Class" },
   { "name": "LoadingOverlayPropsOverrides", "kind": "Interface" },

scripts/x-data-grid-pro.exports.json

@@ -67,14 +67,14 @@
   { "name": "GRID_DATETIME_COL_DEF", "kind": "Variable" },
   { "name": "GRID_DEFAULT_LOCALE_TEXT", "kind": "Variable" },
   { "name": "GRID_DETAIL_PANEL_TOGGLE_COL_DEF", "kind": "Variable" },
-  { "name": "GRID_DETAIL_PANEL_TOGGLE_FIELD", "kind": "Variable" },
+  { "name": "GRID_DETAIL_PANEL_TOGGLE_FIELD", "kind": "ImportSpecifier" },
   { "name": "GRID_EXPERIMENTAL_ENABLED", "kind": "Variable" },
   { "name": "GRID_NUMERIC_COL_DEF", "kind": "Variable" },
   { "name": "GRID_REORDER_COL_DEF", "kind": "Variable" },
   { "name": "GRID_ROOT_GROUP_ID", "kind": "Variable" },
   { "name": "GRID_SINGLE_SELECT_COL_DEF", "kind": "Variable" },
   { "name": "GRID_STRING_COL_DEF", "kind": "Variable" },
-  { "name": "GRID_TREE_DATA_GROUPING_FIELD", "kind": "Variable" },
+  { "name": "GRID_TREE_DATA_GROUPING_FIELD", "kind": "ImportSpecifier" },
   { "name": "GridActionsCell", "kind": "Function" },
   { "name": "GridActionsCellItem", "kind": "Variable" },
   { "name": "GridActionsCellItemProps", "kind": "TypeAlias" },