diff --git a/docs/data/data-grid/column-groups/BasicGroupingDemo.js b/docs/data/data-grid/column-groups/BasicGroupingDemo.js index eb5c5a6d614d..8c4cd1ae4c91 100644 --- a/docs/data/data-grid/column-groups/BasicGroupingDemo.js +++ b/docs/data/data-grid/column-groups/BasicGroupingDemo.js @@ -55,7 +55,6 @@ export default function BasicGroupingDemo() { return (
-``` - -::: - ## Define column groups You can define column groups with the `columnGroupingModel` prop. diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 442c62d8982b..ad0d998d335b 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -157,8 +157,15 @@ Here's the list of affected features, colDef flags and props to disable them and ``` - The type `GridPinnedColumns` has been renamed to `GridPinnedColumnFields`. + - The type `GridPinnedPosition` has been renamed to `GridPinnedColumnPosition`. +- Column grouping is now enabled by default. The flag `columnGrouping` is no longer needed to be passed to the `experimentalFeatures` prop to enable it. + +- The column grouping API methods `getColumnGroupPath` and `getAllGroupDetails` are not anymore prefixed with `unstable_`. + +- The column grouping selectors `gridFocusColumnGroupHeaderSelector` and `gridTabIndexColumnGroupHeaderSelector` are not anymore prefixed with `unstable_`. + diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index ea56fe4a27d7..42980efeb838 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -81,7 +81,7 @@ "experimentalFeatures": { "type": { "name": "shape", - "description": "{ ariaV7?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" + "description": "{ ariaV7?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index cd2ed8571915..2aaae3929725 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -67,7 +67,7 @@ "experimentalFeatures": { "type": { "name": "shape", - "description": "{ ariaV7?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" + "description": "{ ariaV7?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 0e3101a2ad4a..20ce47fadd59 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -47,7 +47,7 @@ "experimentalFeatures": { "type": { "name": "shape", - "description": "{ ariaV7?: bool, columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }" + "description": "{ ariaV7?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md index 597f51912011..67b125ccb392 100644 --- a/docs/pages/x/api/data-grid/grid-api.md +++ b/docs/pages/x/api/data-grid/grid-api.md @@ -35,6 +35,7 @@ import { GridApi } from '@mui/x-data-grid'; | exportState | (params?: GridExportStateParams) => InitialState | Generates a serializable object containing the exportable parts of the DataGrid state.
These values can then be passed to the `initialState` prop or injected using the `restoreState` method. | | forceUpdate | () => void | Forces the grid to rerender. It's often used after a state update. | | getAllColumns | () => GridStateColDef[] | Returns an array of [GridColDef](/x/api/data-grid/grid-col-def/) containing all the column definitions. | +| getAllGroupDetails | () => GridColumnGroupLookup | Returns the column group lookup. | | getAllRowIds | () => GridRowId[] | Gets the list of row ids. | | getCellElement | (id: GridRowId, field: string) => HTMLDivElement \| null | Gets the underlying DOM element for a cell at the given `id` and `field`. | | getCellMode | (id: GridRowId, field: string) => GridCellMode | Gets the mode of a cell. | @@ -42,6 +43,7 @@ import { GridApi } from '@mui/x-data-grid'; | getCellSelectionModel [](/x/introduction/licensing/#premium-plan) | () => GridCellSelectionModel | Returns an object containing the selection state of the cells.
The keys of the object correpond to the row IDs.
The value of each key is another object whose keys are the fields and values are the selection state. | | getCellValue | <V extends any = any>(id: GridRowId, field: string) => V | Gets the value of a cell at the given `id` and `field`. | | getColumn | (field: string) => GridStateColDef | Returns the [GridColDef](/x/api/data-grid/grid-col-def/) for the given `field`. | +| getColumnGroupPath | (field: string) => GridColumnGroup['groupId'][] | Returns the id of the groups leading to the requested column.
The array is ordered by increasing depth (the last element is the direct parent of the column). | | getColumnHeaderElement | (field: string) => HTMLDivElement \| null | Gets the underlying DOM element for the column header with the given `field`. | | getColumnHeaderParams | (field: string) => GridColumnHeaderParams | Gets the GridColumnHeaderParams object that is passed as argument in events. | | getColumnIndex | (field: string, useVisibleColumns?: boolean) => number | Returns the index position of a column. By default, only the visible columns are considered.
Pass `false` to `useVisibleColumns` to consider all columns. | @@ -136,8 +138,6 @@ import { GridApi } from '@mui/x-data-grid'; | toggleColumnMenu | (field: string) => void | Toggles the column menu under the `field` column. | | toggleDetailPanel [](/x/introduction/licensing/#pro-plan) | (id: GridRowId) => void | Expands or collapses the detail panel of a row. | | unpinColumn [](/x/introduction/licensing/#pro-plan) | (field: string) => void | Unpins a column. | -| unstable_getAllGroupDetails | () => GridColumnGroupLookup | Returns the column group lookup. | -| unstable_getColumnGroupPath | (field: string) => GridColumnGroup['groupId'][] | Returns the id of the groups leading to the requested column.
The array is ordered by increasing depth (the last element is the direct parent of the column). | | unstable_replaceRows | (firstRowToReplace: number, newRows: GridRowModel[]) => void | Replace a set of rows with new rows. | | unstable_setColumnVirtualization | (enabled: boolean) => void | Enable/disable column virtualization. | | unstable_setPinnedRows [](/x/introduction/licensing/#pro-plan) | (pinnedRows?: GridPinnedRowsProp) => void | Changes the pinned rows. | diff --git a/docs/pages/x/api/data-grid/selectors.json b/docs/pages/x/api/data-grid/selectors.json index cd772984ed36..f3fd67789100 100644 --- a/docs/pages/x/api/data-grid/selectors.json +++ b/docs/pages/x/api/data-grid/selectors.json @@ -234,6 +234,12 @@ "description": "", "supportsApiRef": true }, + { + "name": "gridFocusColumnGroupHeaderSelector", + "returnType": "GridColumnGroupIdentifier | null", + "description": "", + "supportsApiRef": true + }, { "name": "gridFocusColumnHeaderFilterSelector", "returnType": "GridColumnIdentifier | null", @@ -444,6 +450,12 @@ "description": "", "supportsApiRef": true }, + { + "name": "gridTabIndexColumnGroupHeaderSelector", + "returnType": "GridColumnGroupIdentifier | null", + "description": "", + "supportsApiRef": true + }, { "name": "gridTabIndexColumnHeaderFilterSelector", "returnType": "GridColumnIdentifier | null", @@ -527,17 +539,5 @@ "returnType": "Record", "description": "", "supportsApiRef": true - }, - { - "name": "unstable_gridFocusColumnGroupHeaderSelector", - "returnType": "GridColumnGroupIdentifier | null", - "description": "", - "supportsApiRef": true - }, - { - "name": "unstable_gridTabIndexColumnGroupHeaderSelector", - "returnType": "GridColumnGroupIdentifier | null", - "description": "", - "supportsApiRef": true } ] diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index b053112de969..c69d31a78065 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -321,7 +321,6 @@ DataGridPremiumRaw.propTypes = { */ experimentalFeatures: PropTypes.shape({ ariaV7: PropTypes.bool, - columnGrouping: PropTypes.bool, lazyLoading: PropTypes.bool, warnIfFocusStateIsNotSynced: PropTypes.bool, }), diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts b/packages/grid/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts index d979ee7c805a..2cda4e8eedd7 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts @@ -403,7 +403,7 @@ export async function buildExcel( if (includeColumnGroupsHeaders) { const columnGroupPaths = columns.reduce>((acc, column) => { - acc[column.field] = api.unstable_getColumnGroupPath(column.field); + acc[column.field] = api.getColumnGroupPath(column.field); return acc; }, {}); @@ -411,7 +411,7 @@ export async function buildExcel( worksheet, serializedColumns, columnGroupPaths, - api.unstable_getAllGroupDetails(), + api.getAllGroupDetails(), ); } diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx index fc4e7337500e..5d568919e335 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx @@ -145,7 +145,7 @@ export const useGridExcelExport = ( ); const columnGroupPaths = exportedColumns.reduce>((acc, column) => { - acc[column.field] = apiRef.current.unstable_getColumnGroupPath(column.field); + acc[column.field] = apiRef.current.getColumnGroupPath(column.field); return acc; }, {}); @@ -154,7 +154,7 @@ export const useGridExcelExport = ( serializedRows, valueOptionsData, columnGroupPaths, - columnGroupDetails: apiRef.current.unstable_getAllGroupDetails(), + columnGroupDetails: apiRef.current.getAllGroupDetails(), options: cloneableOptions, valueOptionsSheetName, }; diff --git a/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx index 2d9510dd59a3..b582b1b1f792 100644 --- a/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx @@ -315,7 +315,6 @@ describe(' - Export Excel', () => { ], }, ]} - experimentalFeatures={{ columnGrouping: true }} apiRef={apiRef} />
diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 5c23ddde3211..624ba428b5a7 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -269,7 +269,6 @@ DataGridProRaw.propTypes = { */ experimentalFeatures: PropTypes.shape({ ariaV7: PropTypes.bool, - columnGrouping: PropTypes.bool, lazyLoading: PropTypes.bool, warnIfFocusStateIsNotSynced: PropTypes.bool, }), diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx index cfc3d37111ae..68c773980c60 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx @@ -111,15 +111,15 @@ export const useGridColumnReorder = ( originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false); - const draggingColumnGroupPath = apiRef.current.unstable_getColumnGroupPath(params.field); + const draggingColumnGroupPath = apiRef.current.getColumnGroupPath(params.field); const columnIndex = originColumnIndex.current; const allColumns = apiRef.current.getAllColumns(); - const groupsLookup = apiRef.current.unstable_getAllGroupDetails(); + const groupsLookup = apiRef.current.getAllGroupDetails(); const getGroupPathFromColumnIndex = (colIndex: number) => { const field = allColumns[colIndex].field; - return apiRef.current.unstable_getColumnGroupPath(field); + return apiRef.current.getColumnGroupPath(field); }; // The limitingGroupId is the id of the group from which the dragged column should not escape diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index c4586e101363..7a83be9c800d 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -664,7 +664,6 @@ describe(' - Column pinning', () => { columns={columns} rows={rows} columnGroupingModel={columnGroupingModel} - experimentalFeatures={{ columnGrouping: true }} initialState={{ pinnedColumns: { right: ['age'] } }} />, ); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx index 10374c4da06d..0967ea01d746 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx @@ -434,12 +434,7 @@ describe(' - Columns reorder', () => { function Test() { return (
- +
); } @@ -478,7 +473,6 @@ describe(' - Columns reorder', () => { return (
- Columns reorder', () => { return (
- Columns reorder', () => { function Test() { return (
- +
); } @@ -600,12 +588,7 @@ describe(' - Columns reorder', () => { function Test() { return (
- +
); } @@ -659,12 +642,7 @@ describe(' - Columns reorder', () => { function Test() { return (
- +
); } @@ -720,12 +698,7 @@ describe(' - Columns reorder', () => { function Test() { return (
- +
); } @@ -790,12 +763,7 @@ describe(' - Columns reorder', () => { function Test() { return (
- +
); } diff --git a/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx index 156901a6ed76..22ecc4d010f9 100644 --- a/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx @@ -549,13 +549,7 @@ describe(' - Export', () => { apiRef = useGridApiRef(); return (
- +
); } diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index 5030d96c24a5..1f2d2f8aca53 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -203,7 +203,6 @@ DataGridRaw.propTypes = { */ experimentalFeatures: PropTypes.shape({ ariaV7: PropTypes.bool, - columnGrouping: PropTypes.bool, warnIfFocusStateIsNotSynced: PropTypes.bool, }), /** diff --git a/packages/grid/x-data-grid/src/components/GridHeaders.tsx b/packages/grid/x-data-grid/src/components/GridHeaders.tsx index d96d146cc547..dcc2ab52c2e2 100644 --- a/packages/grid/x-data-grid/src/components/GridHeaders.tsx +++ b/packages/grid/x-data-grid/src/components/GridHeaders.tsx @@ -13,8 +13,8 @@ import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, - unstable_gridTabIndexColumnGroupHeaderSelector, - unstable_gridFocusColumnGroupHeaderSelector, + gridTabIndexColumnGroupHeaderSelector, + gridFocusColumnGroupHeaderSelector, } from '../hooks/features/focus/gridFocusStateSelector'; import { gridColumnGroupsHeaderMaxDepthSelector, @@ -33,14 +33,11 @@ function GridHeaders() { const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector); const columnGroupHeaderTabIndexState = useGridSelector( apiRef, - unstable_gridTabIndexColumnGroupHeaderSelector, + gridTabIndexColumnGroupHeaderSelector, ); const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector); - const columnGroupHeaderFocus = useGridSelector( - apiRef, - unstable_gridFocusColumnGroupHeaderSelector, - ); + const columnGroupHeaderFocus = useGridSelector(apiRef, gridFocusColumnGroupHeaderSelector); const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector); diff --git a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts b/packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts index f1fef853712a..8e155dae0892 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts @@ -53,7 +53,7 @@ const createGroupLookup = (columnGroupingModel: GridColumnNode[]): GridColumnGro export const columnGroupsStateInitializer: GridStateInitializer< Pick > = (state, props, apiRef) => { - if (!props.experimentalFeatures?.columnGrouping) { + if (!props.columnGroupingModel) { return state; } @@ -89,14 +89,12 @@ export const columnGroupsStateInitializer: GridStateInitializer< */ export const useGridColumnGrouping = ( apiRef: React.MutableRefObject, - props: Pick, + props: Pick, ) => { /** * API METHODS */ - const getColumnGroupPath = React.useCallback< - GridColumnGroupingApi['unstable_getColumnGroupPath'] - >( + const getColumnGroupPath = React.useCallback( (field) => { const unwrappedGroupingModel = gridColumnGroupsUnwrappedModelSelector(apiRef); @@ -105,16 +103,14 @@ export const useGridColumnGrouping = ( [apiRef], ); - const getAllGroupDetails = React.useCallback< - GridColumnGroupingApi['unstable_getAllGroupDetails'] - >(() => { + const getAllGroupDetails = React.useCallback(() => { const columnGroupLookup = gridColumnGroupsLookupSelector(apiRef); return columnGroupLookup; }, [apiRef]); const columnGroupingApi: GridColumnGroupingApi = { - unstable_getColumnGroupPath: getColumnGroupPath, - unstable_getAllGroupDetails: getAllGroupDetails, + getColumnGroupPath, + getAllGroupDetails, }; useGridApiMethod(apiRef, columnGroupingApi, 'public'); @@ -144,9 +140,6 @@ export const useGridColumnGrouping = ( const updateColumnGroupingState = React.useCallback( (columnGroupingModel: GridColumnGroupingModel | undefined) => { - if (!props.experimentalFeatures?.columnGrouping) { - return; - } // @ts-expect-error Move this logic to `Pro` package const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {}; const columnFields = gridColumnFieldsSelector(apiRef); @@ -177,7 +170,7 @@ export const useGridColumnGrouping = ( }; }); }, - [apiRef, props.experimentalFeatures?.columnGrouping], + [apiRef], ); useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange); diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index 994aed4ddc27..556f2d7bb20d 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -252,7 +252,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field; const firstGroupToRender = - apiRef.current.unstable_getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null; + apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null; const firstGroupIndex = rowStructure.findIndex( ({ groupId, columnFields }) => @@ -261,7 +261,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field; const lastGroupToRender = - apiRef.current.unstable_getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null; + apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null; const lastGroupIndex = rowStructure.findIndex( ({ groupId, columnFields }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender), diff --git a/packages/grid/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts b/packages/grid/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts index 37cd1c60d5b2..8acd473d7e24 100644 --- a/packages/grid/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts +++ b/packages/grid/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts @@ -155,13 +155,13 @@ export function buildCSV(options: BuildCSVOptions): string { const headerRows: CSVRow[] = []; if (includeColumnGroupsHeaders) { - const columnGroupLookup = apiRef.current.unstable_getAllGroupDetails(); + const columnGroupLookup = apiRef.current.getAllGroupDetails(); let maxColumnGroupsDepth = 0; const columnGroupPathsLookup = filteredColumns.reduce< Record >((acc, column) => { - const columnGroupPath = apiRef.current.unstable_getColumnGroupPath(column.field); + const columnGroupPath = apiRef.current.getColumnGroupPath(column.field); acc[column.field] = columnGroupPath; maxColumnGroupsDepth = Math.max(maxColumnGroupsDepth, columnGroupPath.length); return acc; diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts b/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts index a3d789df8608..d0492d0ea150 100644 --- a/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts +++ b/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts @@ -19,8 +19,7 @@ export const gridFocusColumnHeaderFilterSelector = createSelector( (focusState: GridFocusState) => focusState.columnHeaderFilter, ); -// eslint-disable-next-line @typescript-eslint/naming-convention -export const unstable_gridFocusColumnGroupHeaderSelector = createSelector( +export const gridFocusColumnGroupHeaderSelector = createSelector( gridFocusStateSelector, (focusState: GridFocusState) => focusState.columnGroupHeader, ); @@ -42,8 +41,7 @@ export const gridTabIndexColumnHeaderFilterSelector = createSelector( (state: GridTabIndexState) => state.columnHeaderFilter, ); -// eslint-disable-next-line @typescript-eslint/naming-convention -export const unstable_gridTabIndexColumnGroupHeaderSelector = createSelector( +export const gridTabIndexColumnGroupHeaderSelector = createSelector( gridTabIndexStateSelector, (state: GridTabIndexState) => state.columnGroupHeader, ); diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts index 35da2277c49d..f39ae2f3a973 100644 --- a/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts +++ b/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts @@ -15,7 +15,7 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { isNavigationKey } from '../../../utils/keyboardUtils'; import { gridFocusCellSelector, - unstable_gridFocusColumnGroupHeaderSelector, + gridFocusColumnGroupHeaderSelector, } from './gridFocusStateSelector'; import { GridStateInitializer } from '../../utils/useGridInitializeState'; import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector'; @@ -201,7 +201,7 @@ export const useGridFocus = ( const getColumnGroupHeaderFocus = React.useCallback< GridFocusPrivateApi['getColumnGroupHeaderFocus'] - >(() => unstable_gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]); + >(() => gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]); const moveFocusToRelativeCell = React.useCallback( (id, field, direction) => { @@ -315,7 +315,7 @@ export const useGridFocus = ( if (event.target !== event.currentTarget) { return; } - const focusedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef); + const focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef); if ( focusedColumnGroup !== null && focusedColumnGroup.depth === depth && diff --git a/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts index a606863b3e14..cb8bdcfb4be9 100644 --- a/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts +++ b/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts @@ -16,7 +16,7 @@ import { isNavigationKey } from '../../../utils/keyboardUtils'; import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField'; import { GridRowEntry, GridRowId } from '../../../models'; import { gridPinnedRowsSelector } from '../rows/gridRowsSelector'; -import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus'; +import { gridFocusColumnGroupHeaderSelector } from '../focus'; import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector'; import { gridHeaderFilteringEditFieldSelector, @@ -415,7 +415,7 @@ export const useGridKeyboardNavigation = ( GridEventListener<'columnGroupHeaderKeyDown'> >( (params, event) => { - const focusedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef); + const focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef); if (focusedColumnGroup === null) { return; } diff --git a/packages/grid/x-data-grid/src/models/api/gridColumnGroupingApi.ts b/packages/grid/x-data-grid/src/models/api/gridColumnGroupingApi.ts index cb66d54d7b3e..901bd2e470da 100644 --- a/packages/grid/x-data-grid/src/models/api/gridColumnGroupingApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridColumnGroupingApi.ts @@ -11,10 +11,10 @@ export interface GridColumnGroupingApi { * @param {string} field The field of of the column requested. * @returns {string[]} The id of the groups leading to the requested column. */ - unstable_getColumnGroupPath: (field: string) => GridColumnGroup['groupId'][]; + getColumnGroupPath: (field: string) => GridColumnGroup['groupId'][]; /** * Returns the column group lookup. * @returns {GridColumnGroupLookup} The column group lookup. */ - unstable_getAllGroupDetails: () => GridColumnGroupLookup; + getAllGroupDetails: () => GridColumnGroupLookup; } diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts index 46dfc1de2ac1..f8b439d21bbd 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts @@ -33,10 +33,6 @@ import { GridColumnGroupingModel } from '../gridColumnGrouping'; import { GridPaginationModel } from '../gridPaginationProps'; export interface GridExperimentalFeatures { - /** - * Enables the column grouping. - */ - columnGrouping: boolean; /** * Emits a warning if the cell receives focus without also syncing the focus state. * Only works if NODE_ENV=test. diff --git a/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx similarity index 99% rename from packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx rename to packages/grid/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx index 8e49966b8515..2cc31a60f043 100644 --- a/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx @@ -19,7 +19,6 @@ const getDefaultProps = (nbColumns: number) => { columns, rows: [{ id: 0, ...row }], autoHeight: isJSDOM, - experimentalFeatures: { columnGrouping: true }, }; }; diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index c4dea829615c..2f27606d0c3e 100644 --- a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -55,7 +55,7 @@ describe(' - Keyboard', () => { columnHeaderHeight={HEADER_HEIGHT} hideFooter filterModel={{ items: [{ field: 'id', operator: '>', value: 10 }] }} - experimentalFeatures={{ warnIfFocusStateIsNotSynced: true, columnGrouping: true }} + experimentalFeatures={{ warnIfFocusStateIsNotSynced: true }} {...props} />
@@ -484,7 +484,7 @@ describe(' - Keyboard', () => { hideFooter disableVirtualization columnGroupingModel={columnGroupingModel} - experimentalFeatures={{ warnIfFocusStateIsNotSynced: true, columnGrouping: true }} + experimentalFeatures={{ warnIfFocusStateIsNotSynced: true }} {...props} />
@@ -499,7 +499,6 @@ describe(' - Keyboard', () => { render(
- Keyboard', () => { render(