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

package/CHANGELOG.md

@@ -3,6 +3,169 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-alpha.5
+
+_Dec 14, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 New recipe added for the Data Grid
+- 🌍 Improve Swedish (sv-SE) and Urdu (ur-PK) locales on the Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### Breaking changes
+
+- The `instanceId` prop is now required for state selectors.
+  This prop is used to distinguish between multiple Data Grid instances on the same page.
+  See [migration docs](https://next.mui.com/x/migration/migration-data-grid-v6/#instanceid-prop-is-required-for-state-selectors) for more details.
+
+#### `@mui/x-data-grid@7.0.0-alpha.5`
+
+- [DataGrid] Make `instanceId` required for state selectors (#11395) @cherniavskii
+- [DataGrid] Recipe for grouped rows autosizing (#11401) @michelengelen
+- [l10n] Improve Swedish (sv-SE) locale (#11373) @fredrikcarlbom
+- [l10n] Improve Urdu (ur-PK) locale (#11400) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-alpha.5`.
+
+#### `@mui/x-data-grid-premium@7.0.0-alpha.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.5`.
+
+### Date Pickers
+
+#### Breaking changes
+
+- The slot interfaces got renamed to match with `@mui/base` naming.
+The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsProps` with `SlotProps`.
+
+```diff
+- DateCalendarSlotsComponent
++ DateCalendarSlots
+- DateCalendarSlotsComponentsProps
++ DateCalendarSlotProps
+```
+
+#### `@mui/x-date-pickers@7.0.0-alpha.5`
+
+- [fields] Support empty sections (#10307) @flaviendelangle
+- [pickers] Fix field types to avoid error on latest `@types/react` version (#11397) @LukasTy
+- [pickers] Remove all relative imports to the internals index file (#11375) @flaviendelangle
+- [pickers] Rename slots interfaces (#11339) @alexfauquette
+- [pickers] Simplify the API of the field hooks (#11371) @flaviendelangle
+- [pickers] Support name prop (#11025) @gitstart
+
+#### `@mui/x-date-pickers-pro@7.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-alpha.5`, plus:
+
+- [DateRangePicker] Fix `autoFocus` behavior (#11273) @kealjones-wk
+
+### Charts / `@mui/x-charts@7.0.0-alpha.5`
+
+- [charts] Fix size overflow (#11385) @alexfauquette
+
+### `@mui/x-codemod@7.0.0-alpha.5`
+
+- [codemod] Add `cellSelection` codemod and update migration guide (#11353) @MBilalShafi
+
+### Docs
+
+- [docs] Respect GoT books (@janoma) (#11387) @alexfauquette
+
+### Core
+
+- [core] Automate cherry-pick of PRs from `next` -> `master` (#11382) @MBilalShafi
+- [github] Update `no-response` workflow (#11369) @MBilalShafi
+- [test] Fix flaky screenshots (#11388) @cherniavskii
+
+## 7.0.0-alpha.4
+
+_Dec 8, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 The scatter charts now use voronoi to trigger items
+
+  Users needed to hover the item to highlight the scatter item or show the tooltip.
+  Now they can interact with data by triggering the closest element. See the [docs page](https://next.mui.com/x/react-charts/scatter/#interaction) for more info.
+
+- 📚 Add [Pickers FAQ page](https://next.mui.com/x/react-date-pickers/faq/)
+- 🎉 The Data Grid Header filters feature is now stable
+- 🌍 Improve Danish (da-DK) locale on Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### Breaking changes
+
+- The header filters feature is now stable. `unstable_` prefix is removed from prop `headerFilters` and related exports.
+  See [migration docs](https://next.mui.com/x/migration/migration-data-grid-v6/#filtering) for more details.
+
+- The `GridColDef['type']` has been narrowed down to only accept the built-in column types.
+  TypeScript users need to use the `GridColDef` interface when defining columns:
+
+  ```tsx
+  // 🛑 `type` is inferred as `string` and is too wide
+  const columns = [{ type: 'number', field: 'id' }];
+  <DataGrid columns={columns} />;
+
+  // ✅ `type` is `'number'`
+  const columns: GridColDef[] = [{ type: 'number', field: 'id' }];
+  <DataGrid columns={columns} />;
+
+  // ✅ Alternalively, `as const` can be used to narrow down the type
+  const columns = [{ type: 'number' as const, field: 'id' }];
+  <DataGrid columns={columns} />;
+  ```
+
+#### `@mui/x-data-grid@7.0.0-alpha.4`
+
+- [DataGrid] Added a guard for reorder cells (#11159) @michelengelen
+- [DataGrid] Narrow down `GridColDef['type']` (#11270) @cherniavskii
+- [l10n] Improve Danish (da-DK) locale (#11304) @goibon
+
+#### `@mui/x-data-grid-pro@7.0.0-alpha.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-alpha.4`, plus:
+
+- [DataGridPro] Make header filters feature stable (#11243) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.0.0-alpha.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.4`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-alpha.4`
+
+- [fields] Rework `PickersTextField` (#11258) @flaviendelangle
+- [pickers] Fix `MultiSectionDigitalClock` issues (#11305) @LukasTy
+- [pickers] Fix views height consistency (#11337) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-alpha.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-alpha.4`.
+
+### Charts / `@mui/x-charts@7.0.0-alpha.4`
+
+- [charts] Remove animation on sparkline (#11311) @oliviertassinari
+- [charts] Use voronoi cells to trigger interaction with scatter items (#10981) @alexfauquette
+- [charts] Add `@mui/utils` as a dependency (#11351) @michelengelen
+
+### Docs
+
+- [docs] Add FAQ page (#11271) @noraleonte
+- [docs] Add a doc section on how to override the start of the week with each adapter (#11223) @flaviendelangle
+- [docs] Added params to `onPaginationModelChange` docs (#10191) @JFBenzs
+- [docs] Fix typo (#11324) @cadam11
+- [docs] Improve `DemoContainer` styling coverage (#11315) @LukasTy
+- [docs] General revision of the Charts docs (#11249) @danilo-leal
+
 ## 7.0.0-alpha.3
 
 _Dec 4, 2023_
@@ -866,6 +1029,88 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.18.5
+
+_Dec 14, 2023_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Swedish (sv-SE) and Urdu (ur-PK) locales on the Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.5`
+
+- [l10n] Improve Swedish (sv-SE) locale (#11379) @fredrikcarlbom
+- [l10n] Improve Urdu (ur-PK) locale for data grid (#11409) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@6.18.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.5`.
+
+#### `@mui/x-data-grid-premium@6.18.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.5`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.5`
+
+- [pickers] Fix field types to avoid error on latest `@types/react` version (#11398) @LukasTy
+- [pickers] Support name prop (#11380) @gitstart
+
+#### `@mui/x-date-pickers-pro@6.18.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.5`, plus:
+
+- [DateRangePicker] Fix `autoFocus` behavior (#11376) @kealjones-wk
+
+### Docs
+
+- [docs] Respect GoT books (#11294) @janoma
+- [test] Fix flaky screenshots (#11391) @cherniavskii
+
+## 6.18.4
+
+_Dec 8, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Add [Pickers FAQ page](https://mui.com/x/react-date-pickers/faq/)
+- 🌍 Improve Danish (da-DK) locale on Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.4`
+
+- [DataGrid] Fix cell slot style override (#11215) @oliviertassinari
+- [l10n] Improve Danish (da-DK) locale (#11346) @goibon
+
+#### `@mui/x-data-grid-pro@6.18.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.4`.
+
+#### `@mui/x-data-grid-premium@6.18.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.4`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.4`
+
+- [pickers] Fix `MultiSectionDigitalClock` issues (#11308) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.18.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.4`.
+
+### Docs
+
+- [docs] Fix typo (#11323) @cadam11
+- [docs] Add FAQ page (#11347) @noraleonte
+
 ## 6.18.3
 
 _Dec 4, 2023_

package/DataGridPro/DataGridPro.js

@@ -354,6 +354,11 @@ DataGridProRaw.propTypes = {
    * The grouping column used by the tree data.
    */
   groupingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  headerFilters: PropTypes.bool,
   /**
    * If `true`, the footer component is hidden.
    * @default false
@@ -888,10 +893,5 @@ DataGridProRaw.propTypes = {
    * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
    * @default false
    */
-  treeData: PropTypes.bool,
-  /**
-   * If `true`, enables the data grid filtering on header feature.
-   * @default false
-   */
-  unstable_headerFilters: PropTypes.bool
+  treeData: PropTypes.bool
 };

package/DataGridPro/useDataGridProProps.js

@@ -21,7 +21,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   rowReordering: false,
   rowsLoadingMode: 'client',
   getDetailPanelHeight: () => 500,
-  unstable_headerFilters: false
+  headerFilters: false
 });
 const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProProps = inProps => {

package/components/GridTreeDataGroupingCell.js

@@ -42,7 +42,6 @@ function GridTreeDataGroupingCell(props) {
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation(); // TODO remove event.stopPropagation
   };
-
   return /*#__PURE__*/_jsxs(Box, {
     className: classes.root,
     sx: {

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
-import { useGridPrivateApiContext, unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
+import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
 import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
@@ -51,8 +51,8 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const handleRef = useForkRef(ref, cellRef);
   const inputRef = React.useRef(null);
   const buttonRef = React.useRef(null);
-  const isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field;
-  const isMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === colDef.field;
+  const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field;
+  const isMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === colDef.field;
   const currentOperator = filterOperators[0];
   const InputComponent = colDef.filterable ? currentOperator.InputComponent : null;
   const applyFilterChanges = React.useCallback(updatedItem => {

package/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridApiContext } from '@mui/x-data-grid';
 import { refType, unstable_useId as useId } from '@mui/utils';
-import { unstable_gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
+import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ function GridHeaderFilterMenuContainer(props) {
   const menuId = useId();
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
-  const open = Boolean(unstable_gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current);
+  const open = Boolean(gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current);
   const handleClick = event => {
     headerFilterMenuRef.current = event.currentTarget;
     apiRef.current.showHeaderFilterMenu(field);

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["getColumnsToRender", "getRootProps"];
 import * as React from 'react';
-import { unstable_gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, unstable_gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { styled } from '@mui/system';
 import { useGridColumnHeaders as useGridColumnHeadersCommunity, getTotalHeaderHeight, useGridPrivateApiContext, getGridFilter } from '@mui/x-data-grid/internals';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -33,7 +33,7 @@ export const useGridColumnHeaders = props => {
     headerGroupingMaxDepth,
     hasOtherElementInTabSequence
   } = props;
-  const columnHeaderFilterTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnHeaderFilterSelector);
+  const columnHeaderFilterTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderFilterSelector);
   const _useGridColumnHeaders = useGridColumnHeadersCommunity(_extends({}, props, {
       hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
     })),
@@ -49,11 +49,11 @@ export const useGridColumnHeaders = props => {
   const headerFilterMenuRef = React.useRef(null);
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const disableHeaderFiltering = !rootProps.unstable_headerFilters;
+  const disableHeaderFiltering = !rootProps.headerFilters;
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
-  const columnHeaderFilterFocus = useGridSelector(apiRef, unstable_gridFocusColumnHeaderFilterSelector);
+  const columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector);
   const getFilterItem = React.useCallback(colDef => {
     const filterModelItem = filterModel == null ? void 0 : filterModel.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
     if (filterModelItem != null) {

package/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -6,8 +6,8 @@ import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
 export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'custom',
   field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
-  type: 'detailPanelToggle',
   editable: false,
   sortable: false,
   filterable: false,

package/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
 import { renderRowReorderCell } from '../../../components/GridRowReorderCell';
 export const GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'custom',
   field: '__reorder__',
-  type: 'reorder',
   sortable: false,
   filterable: false,
   width: 50,

package/hooks/features/treeData/gridTreeDataGroupColDef.js

@@ -5,7 +5,7 @@ import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
  * TODO: Add sorting and filtering on the value and the filteredDescendantCount
  */
 export const GRID_TREE_DATA_GROUPING_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
-  type: 'treeDataGroup',
+  type: 'custom',
   sortable: false,
   filterable: false,
   disableColumnMenu: true,

package/hooks/features/treeData/useGridTreeData.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { useGridApiEventHandler } from '@mui/x-data-grid';
+import { GRID_TREE_DATA_GROUPING_FIELD } from './gridTreeDataGroupColDef';
 export const useGridTreeData = apiRef => {
   /**
    * EVENTS
    */
   const handleCellKeyDown = React.useCallback((params, event) => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
+    if (cellParams.colDef.field === GRID_TREE_DATA_GROUPING_FIELD && event.key === ' ' && !event.shiftKey) {
       if (params.rowNode.type !== 'group') {
         return;
       }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.0.0-alpha.3
+ * @mui/x-data-grid-pro v7.0.0-alpha.5
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/DataGridPro/DataGridPro.js

@@ -354,6 +354,11 @@ DataGridProRaw.propTypes = {
    * The grouping column used by the tree data.
    */
   groupingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  headerFilters: PropTypes.bool,
   /**
    * If `true`, the footer component is hidden.
    * @default false
@@ -888,10 +893,5 @@ DataGridProRaw.propTypes = {
    * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
    * @default false
    */
-  treeData: PropTypes.bool,
-  /**
-   * If `true`, enables the data grid filtering on header feature.
-   * @default false
-   */
-  unstable_headerFilters: PropTypes.bool
+  treeData: PropTypes.bool
 };

package/legacy/DataGridPro/useDataGridProProps.js

@@ -23,7 +23,7 @@ export var DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_DEF
   getDetailPanelHeight: function getDetailPanelHeight() {
     return 500;
   },
-  unstable_headerFilters: false
+  headerFilters: false
 });
 var defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
 export var useDataGridProProps = function useDataGridProProps(inProps) {

package/legacy/components/GridTreeDataGroupingCell.js

@@ -39,7 +39,6 @@ function GridTreeDataGroupingCell(props) {
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation(); // TODO remove event.stopPropagation
   };
-
   return /*#__PURE__*/_jsxs(Box, {
     className: classes.root,
     sx: {

package/legacy/components/headerFiltering/GridHeaderFilterCell.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
-import { useGridPrivateApiContext, unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
+import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
 import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
@@ -47,8 +47,8 @@ var GridHeaderFilterCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleRef = useForkRef(ref, cellRef);
   var inputRef = React.useRef(null);
   var buttonRef = React.useRef(null);
-  var isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field;
-  var isMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === colDef.field;
+  var isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field;
+  var isMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === colDef.field;
   var currentOperator = filterOperators[0];
   var InputComponent = colDef.filterable ? currentOperator.InputComponent : null;
   var applyFilterChanges = React.useCallback(function (updatedItem) {

package/legacy/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridApiContext } from '@mui/x-data-grid';
 import { refType, unstable_useId as useId } from '@mui/utils';
-import { unstable_gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
+import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,7 +26,7 @@ function GridHeaderFilterMenuContainer(props) {
   var menuId = useId();
   var rootProps = useGridRootProps();
   var apiRef = useGridApiContext();
-  var open = Boolean(unstable_gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current);
+  var open = Boolean(gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current);
   var handleClick = function handleClick(event) {
     headerFilterMenuRef.current = event.currentTarget;
     apiRef.current.showHeaderFilterMenu(field);

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["getColumnsToRender", "getRootProps"];
 import * as React from 'react';
-import { unstable_gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, unstable_gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { styled } from '@mui/system';
 import { useGridColumnHeaders as useGridColumnHeadersCommunity, getTotalHeaderHeight, useGridPrivateApiContext, getGridFilter } from '@mui/x-data-grid/internals';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -33,7 +33,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var apiRef = useGridPrivateApiContext();
   var headerGroupingMaxDepth = props.headerGroupingMaxDepth,
     hasOtherElementInTabSequence = props.hasOtherElementInTabSequence;
-  var columnHeaderFilterTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnHeaderFilterSelector);
+  var columnHeaderFilterTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderFilterSelector);
   var _useGridColumnHeaders = useGridColumnHeadersCommunity(_extends({}, props, {
       hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
     })),
@@ -47,11 +47,11 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var headerFilterMenuRef = React.useRef(null);
   var rootProps = useGridRootProps();
   var classes = useUtilityClasses(rootProps);
-  var disableHeaderFiltering = !rootProps.unstable_headerFilters;
+  var disableHeaderFiltering = !rootProps.headerFilters;
   var headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor);
   var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   var totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
-  var columnHeaderFilterFocus = useGridSelector(apiRef, unstable_gridFocusColumnHeaderFilterSelector);
+  var columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector);
   var getFilterItem = React.useCallback(function (colDef) {
     var filterModelItem = filterModel == null ? void 0 : filterModel.items.find(function (it) {
       return it.field === colDef.field && it.operator !== 'isAnyOf';

package/legacy/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -6,8 +6,8 @@ import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector
 import { jsx as _jsx } from "react/jsx-runtime";
 export var GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
 export var GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'custom',
   field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
-  type: 'detailPanelToggle',
   editable: false,
   sortable: false,
   filterable: false,

package/legacy/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
 import { renderRowReorderCell } from '../../../components/GridRowReorderCell';
 export var GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'custom',
   field: '__reorder__',
-  type: 'reorder',
   sortable: false,
   filterable: false,
   width: 50,

package/legacy/hooks/features/treeData/gridTreeDataGroupColDef.js

@@ -5,7 +5,7 @@ import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
  * TODO: Add sorting and filtering on the value and the filteredDescendantCount
  */
 export var GRID_TREE_DATA_GROUPING_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
-  type: 'treeDataGroup',
+  type: 'custom',
   sortable: false,
   filterable: false,
   disableColumnMenu: true,

package/legacy/hooks/features/treeData/useGridTreeData.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { useGridApiEventHandler } from '@mui/x-data-grid';
+import { GRID_TREE_DATA_GROUPING_FIELD } from './gridTreeDataGroupColDef';
 export var useGridTreeData = function useGridTreeData(apiRef) {
   /**
    * EVENTS
    */
   var handleCellKeyDown = React.useCallback(function (params, event) {
     var cellParams = apiRef.current.getCellParams(params.id, params.field);
-    if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
+    if (cellParams.colDef.field === GRID_TREE_DATA_GROUPING_FIELD && event.key === ' ' && !event.shiftKey) {
       if (params.rowNode.type !== 'group') {
         return;
       }

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.0.0-alpha.3
+ * @mui/x-data-grid-pro v7.0.0-alpha.5
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTcwMTY0MDgwMDAwMA==";
+  var releaseInfo = "MTcwMjQ5NDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/models/dataGridProProps.d.ts

@@ -118,7 +118,7 @@ export interface DataGridProPropsWithDefaultValue extends DataGridPropsWithDefau
      * If `true`, enables the data grid filtering on header feature.
      * @default false
      */
-    unstable_headerFilters: boolean;
+    headerFilters: boolean;
 }
 export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridPropsWithoutDefaultValue<R>, 'initialState' | 'componentsProps' | 'slotProps'> {
     /**

package/modern/DataGridPro/DataGridPro.js

@@ -354,6 +354,11 @@ DataGridProRaw.propTypes = {
    * The grouping column used by the tree data.
    */
   groupingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  headerFilters: PropTypes.bool,
   /**
    * If `true`, the footer component is hidden.
    * @default false
@@ -888,10 +893,5 @@ DataGridProRaw.propTypes = {
    * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
    * @default false
    */
-  treeData: PropTypes.bool,
-  /**
-   * If `true`, enables the data grid filtering on header feature.
-   * @default false
-   */
-  unstable_headerFilters: PropTypes.bool
+  treeData: PropTypes.bool
 };

package/modern/DataGridPro/useDataGridProProps.js

@@ -21,7 +21,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   rowReordering: false,
   rowsLoadingMode: 'client',
   getDetailPanelHeight: () => 500,
-  unstable_headerFilters: false
+  headerFilters: false
 });
 const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProProps = inProps => {

package/modern/components/GridTreeDataGroupingCell.js

@@ -41,7 +41,6 @@ function GridTreeDataGroupingCell(props) {
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation(); // TODO remove event.stopPropagation
   };
-
   return /*#__PURE__*/_jsxs(Box, {
     className: classes.root,
     sx: {

package/modern/components/headerFiltering/GridHeaderFilterCell.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
-import { useGridPrivateApiContext, unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
+import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
 import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
@@ -50,8 +50,8 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const handleRef = useForkRef(ref, cellRef);
   const inputRef = React.useRef(null);
   const buttonRef = React.useRef(null);
-  const isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field;
-  const isMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === colDef.field;
+  const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field;
+  const isMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === colDef.field;
   const currentOperator = filterOperators[0];
   const InputComponent = colDef.filterable ? currentOperator.InputComponent : null;
   const applyFilterChanges = React.useCallback(updatedItem => {

package/modern/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridApiContext } from '@mui/x-data-grid';
 import { refType, unstable_useId as useId } from '@mui/utils';
-import { unstable_gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
+import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,7 +27,7 @@ function GridHeaderFilterMenuContainer(props) {
   const menuId = useId();
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
-  const open = Boolean(unstable_gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current);
+  const open = Boolean(gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current);
   const handleClick = event => {
     headerFilterMenuRef.current = event.currentTarget;
     apiRef.current.showHeaderFilterMenu(field);

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["getColumnsToRender", "getRootProps"];
 import * as React from 'react';
-import { unstable_gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, unstable_gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { styled } from '@mui/system';
 import { useGridColumnHeaders as useGridColumnHeadersCommunity, getTotalHeaderHeight, useGridPrivateApiContext, getGridFilter } from '@mui/x-data-grid/internals';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -33,7 +33,7 @@ export const useGridColumnHeaders = props => {
     headerGroupingMaxDepth,
     hasOtherElementInTabSequence
   } = props;
-  const columnHeaderFilterTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnHeaderFilterSelector);
+  const columnHeaderFilterTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderFilterSelector);
   const _useGridColumnHeaders = useGridColumnHeadersCommunity(_extends({}, props, {
       hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
     })),
@@ -49,11 +49,11 @@ export const useGridColumnHeaders = props => {
   const headerFilterMenuRef = React.useRef(null);
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const disableHeaderFiltering = !rootProps.unstable_headerFilters;
+  const disableHeaderFiltering = !rootProps.headerFilters;
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
-  const columnHeaderFilterFocus = useGridSelector(apiRef, unstable_gridFocusColumnHeaderFilterSelector);
+  const columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector);
   const getFilterItem = React.useCallback(colDef => {
     const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
     if (filterModelItem != null) {

package/modern/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -6,8 +6,8 @@ import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
 export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'custom',
   field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
-  type: 'detailPanelToggle',
   editable: false,
   sortable: false,
   filterable: false,

package/modern/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
 import { renderRowReorderCell } from '../../../components/GridRowReorderCell';
 export const GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'custom',
   field: '__reorder__',
-  type: 'reorder',
   sortable: false,
   filterable: false,
   width: 50,

package/modern/hooks/features/treeData/gridTreeDataGroupColDef.js

@@ -5,7 +5,7 @@ import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
  * TODO: Add sorting and filtering on the value and the filteredDescendantCount
  */
 export const GRID_TREE_DATA_GROUPING_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
-  type: 'treeDataGroup',
+  type: 'custom',
   sortable: false,
   filterable: false,
   disableColumnMenu: true,

package/modern/hooks/features/treeData/useGridTreeData.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { useGridApiEventHandler } from '@mui/x-data-grid';
+import { GRID_TREE_DATA_GROUPING_FIELD } from './gridTreeDataGroupColDef';
 export const useGridTreeData = apiRef => {
   /**
    * EVENTS
    */
   const handleCellKeyDown = React.useCallback((params, event) => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
+    if (cellParams.colDef.field === GRID_TREE_DATA_GROUPING_FIELD && event.key === ' ' && !event.shiftKey) {
       if (params.rowNode.type !== 'group') {
         return;
       }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.0.0-alpha.3
+ * @mui/x-data-grid-pro v7.0.0-alpha.5
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/utils/domUtils.js

@@ -25,7 +25,6 @@ export function findGridCellElementsFromCol(col, api) {
   }
   const renderedRowElements = api.virtualScrollerRef?.current.querySelectorAll(`:scope > div > div > .${gridClasses.row}` // Use > to ignore rows from nested data grids (e.g. in detail panel)
   );
-
   renderedRowElements.forEach(rowElement => {
     const rowId = rowElement.getAttribute('data-id');
     if (!rowId) {

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwMTY0MDgwMDAwMA==";
+  const releaseInfo = "MTcwMjQ5NDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/DataGridPro/DataGridPro.js

@@ -362,6 +362,11 @@ DataGridProRaw.propTypes = {
    * The grouping column used by the tree data.
    */
   groupingColDef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  headerFilters: _propTypes.default.bool,
   /**
    * If `true`, the footer component is hidden.
    * @default false
@@ -896,10 +901,5 @@ DataGridProRaw.propTypes = {
    * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
    * @default false
    */
-  treeData: _propTypes.default.bool,
-  /**
-   * If `true`, enables the data grid filtering on header feature.
-   * @default false
-   */
-  unstable_headerFilters: _propTypes.default.bool
+  treeData: _propTypes.default.bool
 };

package/node/DataGridPro/useDataGridProProps.js

@@ -29,7 +29,7 @@ const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PRO_PROPS_DEFAULT_V
   rowReordering: false,
   rowsLoadingMode: 'client',
   getDetailPanelHeight: () => 500,
-  unstable_headerFilters: false
+  headerFilters: false
 });
 const defaultSlots = _dataGridProDefaultSlotsComponents.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProProps = inProps => {

package/node/components/GridTreeDataGroupingCell.js

@@ -49,7 +49,6 @@ function GridTreeDataGroupingCell(props) {
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation(); // TODO remove event.stopPropagation
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     className: classes.root,
     sx: {

package/node/components/headerFiltering/GridHeaderFilterCell.js

@@ -58,8 +58,8 @@ const GridHeaderFilterCell = exports.GridHeaderFilterCell = /*#__PURE__*/React.f
   const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
   const inputRef = React.useRef(null);
   const buttonRef = React.useRef(null);
-  const isEditing = (0, _internals.unstable_gridHeaderFilteringEditFieldSelector)(apiRef) === colDef.field;
-  const isMenuOpen = (0, _internals.unstable_gridHeaderFilteringMenuSelector)(apiRef) === colDef.field;
+  const isEditing = (0, _internals.gridHeaderFilteringEditFieldSelector)(apiRef) === colDef.field;
+  const isMenuOpen = (0, _internals.gridHeaderFilteringMenuSelector)(apiRef) === colDef.field;
   const currentOperator = filterOperators[0];
   const InputComponent = colDef.filterable ? currentOperator.InputComponent : null;
   const applyFilterChanges = React.useCallback(updatedItem => {

package/node/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -35,7 +35,7 @@ function GridHeaderFilterMenuContainer(props) {
   const menuId = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const apiRef = (0, _xDataGrid.useGridApiContext)();
-  const open = Boolean((0, _internals.unstable_gridHeaderFilteringMenuSelector)(apiRef) === field && headerFilterMenuRef.current);
+  const open = Boolean((0, _internals.gridHeaderFilteringMenuSelector)(apiRef) === field && headerFilterMenuRef.current);
   const handleClick = event => {
     headerFilterMenuRef.current = event.currentTarget;
     apiRef.current.showHeaderFilterMenu(field);

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

@@ -42,7 +42,7 @@ const useGridColumnHeaders = props => {
     headerGroupingMaxDepth,
     hasOtherElementInTabSequence
   } = props;
-  const columnHeaderFilterTabIndexState = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.unstable_gridTabIndexColumnHeaderFilterSelector);
+  const columnHeaderFilterTabIndexState = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridTabIndexColumnHeaderFilterSelector);
   const _useGridColumnHeaders = (0, _internals.useGridColumnHeaders)((0, _extends2.default)({}, props, {
       hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
     })),
@@ -58,11 +58,11 @@ const useGridColumnHeaders = props => {
   const headerFilterMenuRef = React.useRef(null);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const disableHeaderFiltering = !rootProps.unstable_headerFilters;
+  const disableHeaderFiltering = !rootProps.headerFilters;
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor);
   const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
   const totalHeaderHeight = (0, _internals.getTotalHeaderHeight)(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
-  const columnHeaderFilterFocus = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.unstable_gridFocusColumnHeaderFilterSelector);
+  const columnHeaderFilterFocus = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFocusColumnHeaderFilterSelector);
   const getFilterItem = React.useCallback(colDef => {
     const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
     if (filterModelItem != null) {

package/node/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -15,8 +15,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GRID_DETAIL_PANEL_TOGGLE_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
 const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = exports.GRID_DETAIL_PANEL_TOGGLE_COL_DEF = (0, _extends2.default)({}, _xDataGrid.GRID_STRING_COL_DEF, {
+  type: 'custom',
   field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
-  type: 'detailPanelToggle',
   editable: false,
   sortable: false,
   filterable: false,

package/node/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -9,8 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _xDataGrid = require("@mui/x-data-grid");
 var _GridRowReorderCell = require("../../../components/GridRowReorderCell");
 const GRID_REORDER_COL_DEF = exports.GRID_REORDER_COL_DEF = (0, _extends2.default)({}, _xDataGrid.GRID_STRING_COL_DEF, {
+  type: 'custom',
   field: '__reorder__',
-  type: 'reorder',
   sortable: false,
   filterable: false,
   width: 50,

package/node/hooks/features/treeData/gridTreeDataGroupColDef.js

@@ -11,7 +11,7 @@ var _xDataGrid = require("@mui/x-data-grid");
  * TODO: Add sorting and filtering on the value and the filteredDescendantCount
  */
 const GRID_TREE_DATA_GROUPING_COL_DEF = exports.GRID_TREE_DATA_GROUPING_COL_DEF = (0, _extends2.default)({}, _xDataGrid.GRID_STRING_COL_DEF, {
-  type: 'treeDataGroup',
+  type: 'custom',
   sortable: false,
   filterable: false,
   disableColumnMenu: true,

package/node/hooks/features/treeData/useGridTreeData.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridTreeData = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _xDataGrid = require("@mui/x-data-grid");
+var _gridTreeDataGroupColDef = require("./gridTreeDataGroupColDef");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useGridTreeData = apiRef => {
@@ -14,7 +15,7 @@ const useGridTreeData = apiRef => {
    */
   const handleCellKeyDown = React.useCallback((params, event) => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
+    if (cellParams.colDef.field === _gridTreeDataGroupColDef.GRID_TREE_DATA_GROUPING_FIELD && event.key === ' ' && !event.shiftKey) {
       if (params.rowNode.type !== 'group') {
         return;
       }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.0.0-alpha.3
+ * @mui/x-data-grid-pro v7.0.0-alpha.5
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/utils/domUtils.js

@@ -36,7 +36,6 @@ function findGridCellElementsFromCol(col, api) {
   }
   const renderedRowElements = api.virtualScrollerRef?.current.querySelectorAll(`:scope > div > div > .${_xDataGrid.gridClasses.row}` // Use > to ignore rows from nested data grids (e.g. in detail panel)
   );
-
   renderedRowElements.forEach(rowElement => {
     const rowId = rowElement.getAttribute('data-id');
     if (!rowId) {

package/node/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcwMTY0MDgwMDAwMA==";
+  const releaseInfo = "MTcwMjQ5NDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.0.0-alpha.3",
+  "version": "7.0.0-alpha.5",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -32,10 +32,10 @@
     "directory": "packages/grid/x-data-grid-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.4",
-    "@mui/system": "^5.14.18",
-    "@mui/utils": "^5.14.18",
-    "@mui/x-data-grid": "7.0.0-alpha.3",
+    "@babel/runtime": "^7.23.5",
+    "@mui/system": "^5.14.20",
+    "@mui/utils": "^5.14.20",
+    "@mui/x-data-grid": "7.0.0-alpha.5",
     "@mui/x-license-pro": "7.0.0-alpha.1",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.0.0",

package/utils/domUtils.js

@@ -27,7 +27,6 @@ export function findGridCellElementsFromCol(col, api) {
   }
   const renderedRowElements = (_api$virtualScrollerR2 = api.virtualScrollerRef) == null ? void 0 : _api$virtualScrollerR2.current.querySelectorAll(`:scope > div > div > .${gridClasses.row}` // Use > to ignore rows from nested data grids (e.g. in detail panel)
   );
-
   renderedRowElements.forEach(rowElement => {
     const rowId = rowElement.getAttribute('data-id');
     if (!rowId) {

package/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwMTY0MDgwMDAwMA==";
+  const releaseInfo = "MTcwMjQ5NDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat