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

package/CHANGELOG.md

@@ -3,6 +3,89 @@
 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.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 +949,46 @@ 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.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/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/colDef/gridDefaultColumnTypes.d.ts

@@ -1,3 +1,3 @@
-import { GridColumnTypesRecord } from '../models/colDef/gridColumnTypesRecord';
-export declare const DEFAULT_GRID_COL_TYPE_KEY = "__default__";
+import type { GridColumnTypesRecord } from '../models/colDef/gridColumnTypesRecord';
+export declare const DEFAULT_GRID_COL_TYPE_KEY = "string";
 export declare const getGridDefaultColumnTypes: () => GridColumnTypesRecord;

package/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/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,
@@ -194,7 +193,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const rowReordering = rootProps.rowReordering;
   const getCell = (column, cellProps) => {
     var _editRowsState$rowId$, _editRowsState$rowId;
-    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$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
     let cellIsNotVisible = false;
     if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {

package/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',
@@ -67,7 +66,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/components/cell/GridActionsCell.js

@@ -128,7 +128,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/components/cell/GridCell.js

@@ -243,7 +243,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(() => {
@@ -512,7 +511,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/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/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/hooks/features/editing/useGridRowEditing.js

@@ -240,7 +240,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/hooks/features/focus/gridFocusStateSelector.d.ts

@@ -3,10 +3,10 @@ import { GridFocusState, GridTabIndexState } from './gridFocusState';
 export declare const gridFocusStateSelector: (state: GridStateCommunity) => GridFocusState;
 export declare const gridFocusCellSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridCellCoordinates | null>;
 export declare const gridFocusColumnHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
-export declare const unstable_gridFocusColumnHeaderFilterSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridFocusColumnHeaderFilterSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
 export declare const unstable_gridFocusColumnGroupHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;
 export declare const gridTabIndexStateSelector: (state: GridStateCommunity) => GridTabIndexState;
 export declare const gridTabIndexCellSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridCellCoordinates | null>;
 export declare const gridTabIndexColumnHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
-export declare const unstable_gridTabIndexColumnHeaderFilterSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridTabIndexColumnHeaderFilterSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
 export declare const unstable_gridTabIndexColumnGroupHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;

package/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/hooks/features/headerFiltering/gridHeaderFilteringSelectors.d.ts

@@ -1,4 +1,4 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-export declare const unstable_gridHeaderFilteringStateSelector: (state: GridStateCommunity) => import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState;
-export declare const unstable_gridHeaderFilteringEditFieldSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string | null>;
-export declare const unstable_gridHeaderFilteringMenuSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string | null>;
+export declare const gridHeaderFilteringStateSelector: (state: GridStateCommunity) => import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState;
+export declare const gridHeaderFilteringEditFieldSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string | null>;
+export declare const gridHeaderFilteringMenuSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string | null>;

package/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/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
@@ -238,8 +238,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;
     }
@@ -507,7 +507,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/hooks/features/rows/useGridRowsMeta.js

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

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -555,7 +555,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/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/internals/index.d.ts

@@ -14,7 +14,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 type { GridSlotsComponentsProps } from '../models/gridSlotsComponentsProps';
 export type { UseGridColumnHeadersProps, GetHeadersParams, } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { useGridColumnMenu, columnMenuStateInitializer, } from '../hooks/features/columnMenu/useGridColumnMenu';

package/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/colDef/gridCheckboxSelectionColDef.js

@@ -7,8 +7,8 @@ import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export var 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/legacy/colDef/gridDefaultColumnTypes.js

@@ -5,7 +5,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 var DEFAULT_GRID_COL_TYPE_KEY = '__default__';
+export var DEFAULT_GRID_COL_TYPE_KEY = 'string';
 export var getGridDefaultColumnTypes = function getGridDefaultColumnTypes() {
   var nativeColumnTypes = _defineProperty(_defineProperty({
     string: GRID_STRING_COL_DEF,
@@ -14,6 +14,6 @@ export var getGridDefaultColumnTypes = function getGridDefaultColumnTypes() {
     dateTime: GRID_DATETIME_COL_DEF,
     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);
+  }, GRID_ACTIONS_COLUMN_TYPE, GRID_ACTIONS_COL_DEF), "custom", GRID_STRING_COL_DEF);
   return nativeColumnTypes;
 };

package/legacy/components/GridRow.js

@@ -52,7 +52,6 @@ function EmptyCell(_ref) {
     style: style
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 }
-
 var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var selected = props.selected,
     hovered = props.hovered,
@@ -197,7 +196,13 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var rowReordering = rootProps.rowReordering;
   var getCell = function getCell(column, cellProps) {
     var _editRowsState$rowId$, _editRowsState$rowId;
-    var 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
+    var isReorderCell = column.field === '__reorder__';
+    var isEditingRows = Object.keys(editRowsState).length > 0;
+    var canReorderColumn = !(disableColumnReorder || column.disableReorder);
+    var canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
+    var disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
     var editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
     var cellIsNotVisible = false;
     if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {

package/legacy/components/base/GridOverlays.js

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

package/legacy/components/cell/GridActionsCell.js

@@ -159,7 +159,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/legacy/components/cell/GridCell.js

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

package/legacy/components/virtualization/GridVirtualScroller.js

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

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

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

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

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

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

@@ -8,9 +8,7 @@ export var gridFocusCellSelector = createSelector(gridFocusStateSelector, functi
 export var gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, function (focusState) {
   return focusState.columnHeader;
 });
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export var unstable_gridFocusColumnHeaderFilterSelector = createSelector(gridFocusStateSelector, function (focusState) {
+export var gridFocusColumnHeaderFilterSelector = createSelector(gridFocusStateSelector, function (focusState) {
   return focusState.columnHeaderFilter;
 });
 
@@ -27,9 +25,7 @@ export var gridTabIndexCellSelector = createSelector(gridTabIndexStateSelector,
 export var gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, function (state) {
   return state.columnHeader;
 });
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export var unstable_gridTabIndexColumnHeaderFilterSelector = createSelector(gridTabIndexStateSelector, function (state) {
+export var gridTabIndexColumnHeaderFilterSelector = createSelector(gridTabIndexStateSelector, function (state) {
   return state.columnHeaderFilter;
 });
 

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

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