From 754cb2cffb6c03ff6ec344f4bbf4b07248da45da Mon Sep 17 00:00:00 2001 From: Rajat Date: Mon, 28 Oct 2024 23:22:23 +0530 Subject: [PATCH] [DataGridPremium] Keep focus on the grouping cell on space bar press (#15108) Co-authored-by: Andrew Cherniavskyi --- .../column-definition/AutogeneratedRows.js | 3 ++- .../column-definition/AutogeneratedRows.tsx | 3 ++- .../ColumnSelectorGridCustomizeColumns.js | 3 ++- .../ColumnSelectorGridCustomizeColumns.tsx | 3 ++- .../column-visibility/column-visibility.md | 11 ++++++--- .../data-grid/overview/DataGridPremiumDemo.js | 3 ++- .../overview/DataGridPremiumDemo.tsx | 3 ++- .../row-grouping/RowGroupingFullExample.js | 3 ++- .../row-grouping/RowGroupingFullExample.tsx | 3 ++- .../rowGrouping/gridRowGroupingUtils.ts | 23 +++++++------------ .../gridDetailPanelToggleColDef.tsx | 3 ++- .../treeData/gridTreeDataGroupColDef.ts | 3 ++- .../x-data-grid/src/components/GridRow.tsx | 2 +- .../src/components/cell/GridBooleanCell.tsx | 6 ++++- .../constants/gridDetailPanelToggleField.ts | 2 -- .../useGridKeyboardNavigation.ts | 9 +++++--- .../rowSelection/useGridRowSelection.ts | 2 +- .../hooks/features/rows/useGridRowSpanning.ts | 8 ++++++- .../x-data-grid/src/internals/constants.ts | 3 +++ packages/x-data-grid/src/internals/index.ts | 1 + .../internals/utils/gridRowGroupingUtils.ts | 15 ++++++++++++ .../x-data-grid/src/internals/utils/index.ts | 1 + scripts/x-data-grid-premium.exports.json | 8 +++---- scripts/x-data-grid-pro.exports.json | 4 ++-- 24 files changed, 82 insertions(+), 43 deletions(-) delete mode 100644 packages/x-data-grid/src/constants/gridDetailPanelToggleField.ts create mode 100644 packages/x-data-grid/src/internals/constants.ts create mode 100644 packages/x-data-grid/src/internals/utils/gridRowGroupingUtils.ts diff --git a/docs/data/data-grid/column-definition/AutogeneratedRows.js b/docs/data/data-grid/column-definition/AutogeneratedRows.js index d5689bc6ecbd..b9059be151f0 100644 --- a/docs/data/data-grid/column-definition/AutogeneratedRows.js +++ b/docs/data/data-grid/column-definition/AutogeneratedRows.js @@ -1,6 +1,7 @@ import * as React from 'react'; import { DataGridPremium, + GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isAutogeneratedRow, useGridApiRef, useKeepGroupedColumnsHidden, @@ -8,7 +9,7 @@ import { 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', diff --git a/docs/data/data-grid/column-definition/AutogeneratedRows.tsx b/docs/data/data-grid/column-definition/AutogeneratedRows.tsx index c58c4bf79e2d..cb127be3cb88 100644 --- a/docs/data/data-grid/column-definition/AutogeneratedRows.tsx +++ b/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', diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.js b/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.js index bfa80b2c2523..96ed3a295aa2 100644 --- a/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.js +++ b/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 diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx b/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx index 9c667a5f013e..83eb196585b7 100644 --- a/docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx +++ b/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 diff --git a/docs/data/data-grid/column-visibility/column-visibility.md b/docs/data/data-grid/column-visibility/column-visibility.md index 08d912a07057..3b7a149dd701 100644 --- a/docs/data/data-grid/column-visibility/column-visibility.md +++ b/docs/data/data-grid/column-visibility/column-visibility.md @@ -86,8 +86,13 @@ 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 @@ -95,7 +100,7 @@ const getTogglableColumns = (columns: GridColDef[]) => { .map((column) => column.field); }; - { - 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; diff --git a/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx b/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx index 76e80c840299..16998e55615f 100644 --- a/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx +++ b/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, diff --git a/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts b/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts index 4fe1addd677f..f9f27fdd5d74 100644 --- a/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts +++ b/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 { - if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) { + if ( + params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && + isAutogeneratedRowNode(params.rowNode) + ) { return ''; } diff --git a/packages/x-data-grid/src/constants/gridDetailPanelToggleField.ts b/packages/x-data-grid/src/constants/gridDetailPanelToggleField.ts deleted file mode 100644 index 7ad670d344b7..000000000000 --- a/packages/x-data-grid/src/constants/gridDetailPanelToggleField.ts +++ /dev/null @@ -1,2 +0,0 @@ -// Can't import from pro package - hence duplication -export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__'; diff --git a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts index bed67114ffcf..8622525c32dd 100644 --- a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts +++ b/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; } diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts index 7fd6366dca12..2c8515776a13 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts +++ b/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'; diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts index 12c5e75859b5..ef9dafab2321 100644 --- a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts +++ b/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>; @@ -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 diff --git a/packages/x-data-grid/src/internals/constants.ts b/packages/x-data-grid/src/internals/constants.ts new file mode 100644 index 000000000000..2db12bb9c9d2 --- /dev/null +++ b/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__'; diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts index d07c6dd7d371..41f12e166367 100644 --- a/packages/x-data-grid/src/internals/index.ts +++ b/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'; diff --git a/packages/x-data-grid/src/internals/utils/gridRowGroupingUtils.ts b/packages/x-data-grid/src/internals/utils/gridRowGroupingUtils.ts new file mode 100644 index 000000000000..5026a99260bf --- /dev/null +++ b/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; diff --git a/packages/x-data-grid/src/internals/utils/index.ts b/packages/x-data-grid/src/internals/utils/index.ts index 5bdfb7c8c66f..4dd26999637b 100644 --- a/packages/x-data-grid/src/internals/utils/index.ts +++ b/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'; diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 7cd4d3eeba42..8a0a612168f7 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -74,15 +74,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" }, @@ -638,7 +638,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" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 9d5b4e8b5799..20dd708a55fd 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -69,14 +69,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" },