@mui/x-data-grid 7.0.0-alpha.3 → 7.0.0-alpha.4

package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -14,7 +14,7 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPan
 import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
-import { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
+import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { isEventTargetInPortal } from '../../../utils/domUtils';
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
@@ -72,7 +72,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
   }, [apiRef, initialCurrentPageRows]);
   var headerFilteringEnabled =
   // @ts-expect-error // TODO move relevant code to the `DataGridPro`
-  props.signature !== 'DataGrid' && props.unstable_headerFilters;
+  props.signature !== 'DataGrid' && props.headerFilters;
 
   /**
    * @param {number} colIndex Index of the column to focus
@@ -240,8 +240,8 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     if (!dimensions) {
       return;
     }
-    var isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
-    var isHeaderMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === params.field;
+    var isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
+    var isHeaderMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === params.field;
     if (isEditing || isHeaderMenuOpen || !isNavigationKey(event.key)) {
       return;
     }
@@ -507,7 +507,9 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
             break;
           }
           var colDef = params.colDef;
-          if (colDef && colDef.type === 'treeDataGroup') {
+          if (colDef &&
+          // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
+          colDef.field === '__tree_data_group__') {
             break;
           }
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {

package/legacy/hooks/features/rows/useGridRowsMeta.js

@@ -68,7 +68,6 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
           needsFirstMeasurement: true // Assume all rows will need to be measured by default
         };
       }
-
       var _rowsHeightLookup$cur = rowsHeightLookup.current[row.id],
         isResized = _rowsHeightLookup$cur.isResized,
         needsFirstMeasurement = _rowsHeightLookup$cur.needsFirstMeasurement,

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -585,7 +585,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     if (rootProps.autoHeight && currentPage.rows.length === 0) {
       size.height = getMinimalContentHeight(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
     }
-
     return size;
   }, [apiRef, rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, needsHorizontalScrollbar, rootProps.autoHeight, rootProps.rowHeight, currentPage.rows.length]);
   React.useEffect(function () {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-alpha.3
+ * @mui/x-data-grid v7.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/index.js

@@ -11,7 +11,7 @@ export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { unwrapPrivateAPI } from '../hooks/core/useGridApiInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-export { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors';
+export { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors';
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';

package/legacy/locales/coreLocales.js

@@ -3,6 +3,7 @@
 // This allows not to bump the minimal version of `@mui/material` in peerDependencies which results
 // in broader compatibility between the packages.
 // See https://github.com/mui/mui-x/pull/7646#issuecomment-1404605556 for additional context.
+
 export var beBYCore = {
   components: {
     MuiTablePagination: {

package/legacy/locales/daDK.js

@@ -49,47 +49,45 @@ var daDKGrid = {
   filterPanelInputLabel: 'Værdi',
   filterPanelInputPlaceholder: 'Filter værdi',
   // Filter operators text
-  filterOperatorContains: 'Indeholder',
-  filterOperatorEquals: 'Lig med',
-  filterOperatorStartsWith: 'Begynder med',
-  filterOperatorEndsWith: 'Ender med',
-  filterOperatorIs: 'Er lig med',
-  filterOperatorNot: 'Er ikke lig med',
-  filterOperatorAfter: 'Efter',
-  filterOperatorOnOrAfter: 'På eller efter',
-  filterOperatorBefore: 'Før',
-  filterOperatorOnOrBefore: 'På eller før',
-  filterOperatorIsEmpty: 'Indeholder ikke data',
-  filterOperatorIsNotEmpty: 'Indeholder data',
+  filterOperatorContains: 'indeholder',
+  filterOperatorEquals: 'lig med',
+  filterOperatorStartsWith: 'begynder med',
+  filterOperatorEndsWith: 'ender med',
+  filterOperatorIs: 'er lig med',
+  filterOperatorNot: 'er ikke lig med',
+  filterOperatorAfter: 'efter',
+  filterOperatorOnOrAfter: 'på eller efter',
+  filterOperatorBefore: 'før',
+  filterOperatorOnOrBefore: 'på eller før',
+  filterOperatorIsEmpty: 'indeholder ikke data',
+  filterOperatorIsNotEmpty: 'indeholder data',
   filterOperatorIsAnyOf: 'indeholder en af',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'Indeholder',
+  headerFilterOperatorEquals: 'Lig med',
+  headerFilterOperatorStartsWith: 'Begynder med',
+  headerFilterOperatorEndsWith: 'Ender med',
+  headerFilterOperatorIs: 'Er lig med',
+  headerFilterOperatorNot: 'Er ikke lig med',
+  headerFilterOperatorAfter: 'Efter',
+  headerFilterOperatorOnOrAfter: 'På eller efter',
+  headerFilterOperatorBefore: 'Før',
+  headerFilterOperatorOnOrBefore: 'På eller før',
+  headerFilterOperatorIsEmpty: 'Indeholder ikke data',
+  headerFilterOperatorIsNotEmpty: 'Indeholder data',
+  headerFilterOperatorIsAnyOf: 'Indeholder en af',
+  'headerFilterOperator=': 'Lig med',
+  'headerFilterOperator!=': 'Ikke lig med',
+  'headerFilterOperator>': 'Større end',
+  'headerFilterOperator>=': 'Større end eller lig med',
+  'headerFilterOperator<': 'Mindre end',
+  'headerFilterOperator<=': 'Mindre end eller lig med',
   // Filter values text
   filterValueAny: 'hvilken som helst',
   filterValueTrue: 'positiv',

package/legacy/locales/plPL.js

@@ -161,5 +161,4 @@ var plPLGrid = {
   // aggregationFunctionLabelMax: 'max',
   // aggregationFunctionLabelSize: 'size',
 };
-
 export var plPL = getGridLocalization(plPLGrid, plPLCore);

package/legacy/utils/utils.js

@@ -166,7 +166,6 @@ function mulberry32(a) {
     /* eslint-enable */
   };
 }
-
 export function randomNumberBetween(seed, min, max) {
   var random = mulberry32(seed);
   return function () {

package/locales/coreLocales.js

@@ -3,6 +3,7 @@
 // This allows not to bump the minimal version of `@mui/material` in peerDependencies which results
 // in broader compatibility between the packages.
 // See https://github.com/mui/mui-x/pull/7646#issuecomment-1404605556 for additional context.
+
 export const beBYCore = {
   components: {
     MuiTablePagination: {

package/locales/daDK.js

@@ -47,47 +47,45 @@ const daDKGrid = {
   filterPanelInputLabel: 'Værdi',
   filterPanelInputPlaceholder: 'Filter værdi',
   // Filter operators text
-  filterOperatorContains: 'Indeholder',
-  filterOperatorEquals: 'Lig med',
-  filterOperatorStartsWith: 'Begynder med',
-  filterOperatorEndsWith: 'Ender med',
-  filterOperatorIs: 'Er lig med',
-  filterOperatorNot: 'Er ikke lig med',
-  filterOperatorAfter: 'Efter',
-  filterOperatorOnOrAfter: 'På eller efter',
-  filterOperatorBefore: 'Før',
-  filterOperatorOnOrBefore: 'På eller før',
-  filterOperatorIsEmpty: 'Indeholder ikke data',
-  filterOperatorIsNotEmpty: 'Indeholder data',
+  filterOperatorContains: 'indeholder',
+  filterOperatorEquals: 'lig med',
+  filterOperatorStartsWith: 'begynder med',
+  filterOperatorEndsWith: 'ender med',
+  filterOperatorIs: 'er lig med',
+  filterOperatorNot: 'er ikke lig med',
+  filterOperatorAfter: 'efter',
+  filterOperatorOnOrAfter: 'på eller efter',
+  filterOperatorBefore: 'før',
+  filterOperatorOnOrBefore: 'på eller før',
+  filterOperatorIsEmpty: 'indeholder ikke data',
+  filterOperatorIsNotEmpty: 'indeholder data',
   filterOperatorIsAnyOf: 'indeholder en af',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'Indeholder',
+  headerFilterOperatorEquals: 'Lig med',
+  headerFilterOperatorStartsWith: 'Begynder med',
+  headerFilterOperatorEndsWith: 'Ender med',
+  headerFilterOperatorIs: 'Er lig med',
+  headerFilterOperatorNot: 'Er ikke lig med',
+  headerFilterOperatorAfter: 'Efter',
+  headerFilterOperatorOnOrAfter: 'På eller efter',
+  headerFilterOperatorBefore: 'Før',
+  headerFilterOperatorOnOrBefore: 'På eller før',
+  headerFilterOperatorIsEmpty: 'Indeholder ikke data',
+  headerFilterOperatorIsNotEmpty: 'Indeholder data',
+  headerFilterOperatorIsAnyOf: 'Indeholder en af',
+  'headerFilterOperator=': 'Lig med',
+  'headerFilterOperator!=': 'Ikke lig med',
+  'headerFilterOperator>': 'Større end',
+  'headerFilterOperator>=': 'Større end eller lig med',
+  'headerFilterOperator<': 'Mindre end',
+  'headerFilterOperator<=': 'Mindre end eller lig med',
   // Filter values text
   filterValueAny: 'hvilken som helst',
   filterValueTrue: 'positiv',

package/locales/plPL.js

@@ -149,5 +149,4 @@ const plPLGrid = {
   // aggregationFunctionLabelMax: 'max',
   // aggregationFunctionLabelSize: 'size',
 };
-
 export const plPL = getGridLocalization(plPLGrid, plPLCore);

package/models/colDef/gridColType.d.ts

@@ -1,4 +1,2 @@
-type LiteralUnion<LiteralType, BaseType> = LiteralType | (BaseType & Record<never, never>);
-export type GridNativeColTypes = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect' | 'actions';
-export type GridColType = LiteralUnion<GridNativeColTypes, string>;
-export {};
+export type GridNativeColTypes = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect' | 'actions' | 'custom';
+export type GridColType = GridNativeColTypes;

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -7,8 +7,8 @@ import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {
+  type: 'custom',
   field: GRID_CHECKBOX_SELECTION_FIELD,
-  type: 'checkboxSelection',
   width: 50,
   resizable: false,
   sortable: false,

package/modern/colDef/gridDefaultColumnTypes.js

@@ -4,7 +4,7 @@ import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
 import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
 import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
 import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
-export const DEFAULT_GRID_COL_TYPE_KEY = '__default__';
+export const DEFAULT_GRID_COL_TYPE_KEY = 'string';
 export const getGridDefaultColumnTypes = () => {
   const nativeColumnTypes = {
     string: GRID_STRING_COL_DEF,
@@ -14,7 +14,7 @@ export const getGridDefaultColumnTypes = () => {
     boolean: GRID_BOOLEAN_COL_DEF,
     singleSelect: GRID_SINGLE_SELECT_COL_DEF,
     [GRID_ACTIONS_COLUMN_TYPE]: GRID_ACTIONS_COL_DEF,
-    [DEFAULT_GRID_COL_TYPE_KEY]: GRID_STRING_COL_DEF
+    custom: GRID_STRING_COL_DEF
   };
   return nativeColumnTypes;
 };

package/modern/components/GridRow.js

@@ -53,7 +53,6 @@ function EmptyCell({
     style: style
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 }
-
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
@@ -193,7 +192,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const CellComponent = slots.cell === GridCellV7 ? GridCellV7 : GridCellWrapper;
   const rowReordering = rootProps.rowReordering;
   const getCell = (column, cellProps) => {
-    const disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
+    // when the cell is a reorder cell we are not allowing to reorder the col
+    // fixes https://github.com/mui/mui-x/issues/11126
+    const isReorderCell = column.field === '__reorder__';
+    const isEditingRows = Object.keys(editRowsState).length > 0;
+    const canReorderColumn = !(disableColumnReorder || column.disableReorder);
+    const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
+    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
     const editCellState = editRowsState[rowId]?.[column.field] ?? null;
     let cellIsNotVisible = false;
     if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {

package/modern/components/base/GridOverlays.js

@@ -31,7 +31,6 @@ const GridOverlayWrapperRoot = styled('div', {
   zIndex: overlayType === 'loadingOverlay' ? 5 // Should be above pinned columns, pinned rows, and detail panel
   : 4 // Should be above pinned columns and detail panel
 }));
-
 const GridOverlayWrapperInner = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
@@ -62,7 +61,6 @@ function GridOverlayWrapper(props) {
   if (rootProps.autoHeight && height === 0) {
     height = getMinimalContentHeight(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
   }
-
   const classes = useUtilityClasses(_extends({}, props, {
     classes: rootProps.classes
   }));

package/modern/components/cell/GridActionsCell.js

@@ -126,7 +126,6 @@ function GridActionsCell(props) {
     if (newIndex < 0 || newIndex >= numberOfButtons) {
       return; // We're already in the first or last item = do nothing and let the grid listen the event
     }
-
     if (newIndex !== focusedButtonIndex) {
       event.preventDefault(); // Prevent scrolling
       event.stopPropagation(); // Don't stop propagation for other keys, e.g. ArrowUp

package/modern/components/cell/GridCell.js

@@ -242,7 +242,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       minHeight: height,
       maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
     };
-
     return cellStyle;
   }, [width, height, isNotVisible]);
   React.useEffect(() => {
@@ -510,7 +509,6 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       minHeight: height,
       maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
     };
-
     return cellStyle;
   }, [width, height, isNotVisible]);
   React.useEffect(() => {

package/modern/components/virtualization/GridVirtualScroller.js

@@ -29,7 +29,6 @@ const VirtualScrollerRoot = styled('div', {
   },
   zIndex: 0 // See https://github.com/mui/mui-x/issues/10547
 });
-
 const GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualScroller(props, ref) {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -81,7 +81,6 @@ export const useGridCellEditing = (apiRef, props) => {
         reason = event.shiftKey ? GridCellEditStopReasons.shiftTabKeyDown : GridCellEditStopReasons.tabKeyDown;
         event.preventDefault(); // Prevent going to the next element in the tab sequence
       }
-
       if (reason) {
         const newParams = _extends({}, params, {
           reason
@@ -175,7 +174,6 @@ export const useGridCellEditing = (apiRef, props) => {
     if (props.cellModesModel && isNewModelDifferentFromProp) {
       return; // The prop always win
     }
-
     setCellModesModel(newModel);
     cellModesModelRef.current = newModel;
     apiRef.current.publishEvent('cellModesModelChange', newModel);

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -239,7 +239,6 @@ export const useGridRowEditing = (apiRef, props) => {
     if (props.rowModesModel && isNewModelDifferentFromProp) {
       return; // The prop always win
     }
-
     setRowModesModel(newModel);
     rowModesModelRef.current = newModel;
     apiRef.current.publishEvent('rowModesModelChange', newModel);

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

@@ -2,18 +2,14 @@ import { createSelector } from '../../../utils/createSelector';
 export const gridFocusStateSelector = state => state.focus;
 export const gridFocusCellSelector = createSelector(gridFocusStateSelector, focusState => focusState.cell);
 export const gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeader);
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const unstable_gridFocusColumnHeaderFilterSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
+export const gridFocusColumnHeaderFilterSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
 export const gridTabIndexStateSelector = state => state.tabIndex;
 export const gridTabIndexCellSelector = createSelector(gridTabIndexStateSelector, state => state.cell);
 export const gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeader);
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const unstable_gridTabIndexColumnHeaderFilterSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeaderFilter);
+export const gridTabIndexColumnHeaderFilterSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeaderFilter);
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_gridTabIndexColumnGroupHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnGroupHeader);

package/modern/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { createSelector } from '../../../utils/createSelector';
-export const unstable_gridHeaderFilteringStateSelector = state => state.headerFiltering;
-export const unstable_gridHeaderFilteringEditFieldSelector = createSelector(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
-export const unstable_gridHeaderFilteringMenuSelector = createSelector(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);
+export const gridHeaderFilteringStateSelector = state => state.headerFiltering;
+export const gridHeaderFilteringEditFieldSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
+export const gridHeaderFilteringMenuSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -13,7 +13,7 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPan
 import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
-import { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
+import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { isEventTargetInPortal } from '../../../utils/domUtils';
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
@@ -71,7 +71,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled =
   // @ts-expect-error // TODO move relevant code to the `DataGridPro`
-  props.signature !== 'DataGrid' && props.unstable_headerFilters;
+  props.signature !== 'DataGrid' && props.headerFilters;
 
   /**
    * @param {number} colIndex Index of the column to focus
@@ -237,8 +237,8 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (!dimensions) {
       return;
     }
-    const isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
-    const isHeaderMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === params.field;
+    const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
+    const isHeaderMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === params.field;
     if (isEditing || isHeaderMenuOpen || !isNavigationKey(event.key)) {
       return;
     }
@@ -506,7 +506,9 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             break;
           }
           const colDef = params.colDef;
-          if (colDef && colDef.type === 'treeDataGroup') {
+          if (colDef &&
+          // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
+          colDef.field === '__tree_data_group__') {
             break;
           }
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -67,7 +67,6 @@ export const useGridRowsMeta = (apiRef, props) => {
           needsFirstMeasurement: true // Assume all rows will need to be measured by default
         };
       }
-
       const {
         isResized,
         needsFirstMeasurement,

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -550,7 +550,6 @@ export const useGridVirtualScroller = props => {
     if (rootProps.autoHeight && currentPage.rows.length === 0) {
       size.height = getMinimalContentHeight(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
     }
-
     return size;
   }, [apiRef, rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, needsHorizontalScrollbar, rootProps.autoHeight, rootProps.rowHeight, currentPage.rows.length]);
   React.useEffect(() => {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-alpha.3
+ * @mui/x-data-grid v7.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -11,7 +11,7 @@ export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { unwrapPrivateAPI } from '../hooks/core/useGridApiInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-export { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors';
+export { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors';
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';

package/modern/locales/coreLocales.js

@@ -3,6 +3,7 @@
 // This allows not to bump the minimal version of `@mui/material` in peerDependencies which results
 // in broader compatibility between the packages.
 // See https://github.com/mui/mui-x/pull/7646#issuecomment-1404605556 for additional context.
+
 export const beBYCore = {
   components: {
     MuiTablePagination: {