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

package/node/components/cell/GridCell.js

@@ -251,7 +251,6 @@ const GridCell = exports.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(() => {
@@ -467,8 +466,8 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
   const cellRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
   const focusElementRef = React.useRef(null);
-  // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature
-  const isSelectionMode = rootProps.unstable_cellSelection ?? false;
+  // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
+  const isSelectionMode = rootProps.cellSelection ?? false;
   const ownerState = {
     align,
     showRightBorder,
@@ -518,7 +517,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/node/components/cell/GridEditDateCell.js

@@ -73,7 +73,6 @@ function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const hasUpdatedEditValueOnMount = React.useRef(false);
   const parseValueToDate = React.useCallback(value => {
     if (value === '') {
       return null;
@@ -118,26 +117,8 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
-  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
-  const handleInputRef = el => {
-    inputRef.current = el;
-    if (meta?.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
-      const inputValue = inputRef.current.value;
-      const parsedDate = parseValueToDate(inputValue);
-      setValueState({
-        parsed: parsedDate,
-        formatted: inputValue
-      });
-      apiRef.current.setEditCellValue({
-        id,
-        field,
-        value: parsedDate
-      });
-      hasUpdatedEditValueOnMount.current = true;
-    }
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInputBase, (0, _extends2.default)({
-    inputRef: handleInputRef,
+    inputRef: inputRef,
     fullWidth: true,
     className: classes.root,
     type: isDateTime ? 'datetime-local' : 'date',

package/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -14,6 +14,7 @@ var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gri
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
+var _domUtils = require("../../utils/domUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -93,7 +94,7 @@ function GridColumnGroupHeader(props) {
   const publish = React.useCallback(eventName => event => {
     // Ignore portal
     // See https://github.com/mui/mui-x/issues/1721
-    if (!event.currentTarget.contains(event.target)) {
+    if ((0, _domUtils.isEventTargetInPortal)(event)) {
       return;
     }
     apiRef.current.publishEvent(eventName, renderParams, event);

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -16,6 +16,7 @@ var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
+var _domUtils = require("../../utils/domUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -75,7 +76,7 @@ function GridColumnHeaderItem(props) {
   const publish = React.useCallback(eventName => event => {
     // Ignore portal
     // See https://github.com/mui/mui-x/issues/1721
-    if (!event.currentTarget.contains(event.target)) {
+    if ((0, _domUtils.isEventTargetInPortal)(event)) {
       return;
     }
     apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);

package/node/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -36,7 +36,7 @@ function GridColumnMenuSortItem(props) {
   const onSortMenuItemClick = React.useCallback(event => {
     onClick(event);
     const direction = event.currentTarget.getAttribute('data-value') || null;
-    apiRef.current.sortColumn(colDef, direction === sortDirection ? null : direction);
+    apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction);
   }, [apiRef, colDef, onClick, sortDirection]);
   if (!colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
     return null;

package/node/components/panel/filterPanel/GridFilterForm.js

@@ -184,8 +184,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
     // try to keep the same operator when column change
     const newOperator = column.filterOperators.find(operator => operator.value === item.operator) || column.filterOperators[0];
 
-    // Erase filter value if the input component is modified
-    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== currentOperator?.InputComponent;
+    // Erase filter value if the input component or filtered column type is modified
+    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== currentOperator?.InputComponent || column.type !== currentColumn.type;
     applyFilterChanges((0, _extends2.default)({}, item, {
       field,
       operator: newOperator.value,

package/node/components/panel/filterPanel/GridFilterInputValue.js

@@ -51,7 +51,7 @@ function GridFilterInputValue(props) {
   }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(() => {
     const itemPlusTag = item;
-    if (itemPlusTag.fromInput !== id) {
+    if (itemPlusTag.fromInput !== id || item.value === undefined) {
       setFilterValueState(String(item.value ?? ''));
     }
   }, [id, item]);

package/node/components/panel/index.js

@@ -69,17 +69,6 @@ Object.keys(_GridPanelWrapper).forEach(function (key) {
     }
   });
 });
-var _GridPreferencesPanel = require("./GridPreferencesPanel");
-Object.keys(_GridPreferencesPanel).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridPreferencesPanel[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridPreferencesPanel[key];
-    }
-  });
-});
 var _filterPanel = require("./filterPanel");
 Object.keys(_filterPanel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/components/virtualization/GridVirtualScroller.js

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

package/node/constants/defaultGridSlotsComponents.js

@@ -23,7 +23,6 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_DEFAULT_SLOTS_COMPO
   footer: _components.GridFooter,
   footerRowCount: _components.GridRowCount,
   toolbar: null,
-  preferencesPanel: _components.GridPreferencesPanel,
   loadingOverlay: _components.GridLoadingOverlay,
   noResultsOverlay: _GridNoResultsOverlay.GridNoResultsOverlay,
   noRowsOverlay: _components.GridNoRowsOverlay,

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -57,7 +57,7 @@ function hasNativeSelection(element) {
  * @requires useGridSelection (method)
  */
 const useGridClipboard = (apiRef, props) => {
-  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {

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

@@ -90,7 +90,6 @@ const useGridCellEditing = (apiRef, props) => {
         reason = event.shiftKey ? _gridEditCellParams.GridCellEditStopReasons.shiftTabKeyDown : _gridEditCellParams.GridCellEditStopReasons.tabKeyDown;
         event.preventDefault(); // Prevent going to the next element in the tab sequence
       }
-
       if (reason) {
         const newParams = (0, _extends2.default)({}, params, {
           reason
@@ -110,7 +109,7 @@ const useGridCellEditing = (apiRef, props) => {
       if ((0, _keyboardUtils.isPrintableKey)(event)) {
         reason = _gridEditCellParams.GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-        reason = _gridEditCellParams.GridCellEditStartReasons.printableKeyDown;
+        reason = _gridEditCellParams.GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = _gridEditCellParams.GridCellEditStartReasons.enterKeyDown;
       } else if (event.key === 'Delete' || event.key === 'Backspace') {
@@ -130,24 +129,13 @@ const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason,
-      key,
-      colDef
+      reason
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
-    if (reason === _gridEditCellParams.GridCellEditStartReasons.printableKeyDown) {
-      if (React.version.startsWith('17')) {
-        // In React 17, cleaning the input is enough.
-        // The sequence of events makes the key pressed by the end-users update the textbox directly.
-        startCellEditModeParams.deleteValue = true;
-      } else {
-        const initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
-        startCellEditModeParams.initialValue = initialValue;
-      }
-    } else if (reason === _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown) {
+    if (reason === _gridEditCellParams.GridCellEditStartReasons.printableKeyDown || reason === _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown || reason === _gridEditCellParams.GridCellEditStartReasons.pasteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
     apiRef.current.startCellEditMode(startCellEditModeParams);
@@ -195,7 +183,6 @@ const useGridCellEditing = (apiRef, props) => {
     if (props.cellModesModel && isNewModelDifferentFromProp) {
       return; // The prop always win
     }
-
     setCellModesModel(newModel);
     cellModesModelRef.current = newModel;
     apiRef.current.publishEvent('cellModesModelChange', newModel);
@@ -257,17 +244,13 @@ const useGridCellEditing = (apiRef, props) => {
       initialValue
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    let unstable_updateValueOnRender = false;
     if (deleteValue || initialValue) {
       newValue = deleteValue ? '' : initialValue;
-      unstable_updateValueOnRender = true;
     }
     const newProps = {
       value: newValue,
       error: false,
-      isProcessingProps: false,
-      unstable_updateValueOnRender
+      isProcessingProps: false
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
@@ -431,7 +414,9 @@ const useGridCellEditing = (apiRef, props) => {
       updateCellModesModel(cellModesModelProp);
     }
   }, [cellModesModelProp, updateCellModesModel]);
-  React.useEffect(() => {
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later

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

@@ -180,7 +180,6 @@ const useGridRowEditing = (apiRef, props) => {
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = (0, _extends2.default)({}, rowParams, {
           field: params.field,
-          key: event.key,
           reason
         });
         apiRef.current.publishEvent('rowEditStart', newParams, event);
@@ -191,24 +190,13 @@ const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason,
-      key,
-      columns
+      reason
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
-    if (reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown) {
-      if (React.version.startsWith('17')) {
-        // In React 17, cleaning the input is enough.
-        // The sequence of events makes the key pressed by the end-users update the textbox directly.
-        startRowEditModeParams.deleteValue = !!field;
-      } else {
-        const colDef = columns.find(col => col.field === field);
-        startRowEditModeParams.initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
-      }
-    } else if (reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown) {
+    if (reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown || reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
     apiRef.current.startRowEditMode(startRowEditModeParams);
@@ -260,7 +248,6 @@ const useGridRowEditing = (apiRef, props) => {
     if (props.rowModesModel && isNewModelDifferentFromProp) {
       return; // The prop always win
     }
-
     setRowModesModel(newModel);
     rowModesModelRef.current = newModel;
     apiRef.current.publishEvent('rowModesModelChange', newModel);
@@ -331,17 +318,13 @@ const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
       let newValue = apiRef.current.getCellValue(id, field);
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      let unstable_updateValueOnRender = false;
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         newValue = deleteValue ? '' : initialValue;
-        unstable_updateValueOnRender = true;
       }
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false,
-        unstable_updateValueOnRender
+        isProcessingProps: false
       };
       return acc;
     }, {});
@@ -561,7 +544,9 @@ const useGridRowEditing = (apiRef, props) => {
       updateRowModesModel(rowModesModelProp);
     }
   }, [rowModesModelProp, updateRowModesModel]);
-  React.useEffect(() => {
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later

package/node/hooks/features/export/useGridCsvExport.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const useGridCsvExport = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridCsvExport');
-  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.csvExport : ignoreValueFormatterProp) || false;
   const getDataAsCsv = React.useCallback((options = {}) => {
     logger.debug(`Get data as CSV`);

package/node/hooks/features/filter/gridFilterUtils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sanitizeFilterModel = exports.removeDiacritics = exports.passFilterLogic = exports.mergeStateWithFilterModel = exports.cleanFilterItem = exports.buildAggregatedFilterApplier = void 0;
+exports.shouldQuickFilterExcludeHiddenColumns = exports.sanitizeFilterModel = exports.removeDiacritics = exports.passFilterLogic = exports.mergeStateWithFilterModel = exports.cleanFilterItem = exports.buildAggregatedFilterApplier = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _models = require("../../../models");
 var _gridFilterState = require("./gridFilterState");
@@ -184,6 +184,9 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) =>
   filterItemsApplierId += 1;
   return filterItem;
 };
+const shouldQuickFilterExcludeHiddenColumns = filterModel => {
+  return filterModel.quickFilterExcludeHiddenColumns ?? true;
+};
 
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
@@ -191,13 +194,13 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) =>
  * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
+exports.shouldQuickFilterExcludeHiddenColumns = shouldQuickFilterExcludeHiddenColumns;
 const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
   }
-  const quickFilterExcludeHiddenColumns = filterModel.quickFilterExcludeHiddenColumns ?? false;
-  const columnFields = quickFilterExcludeHiddenColumns ? (0, _columns.gridVisibleColumnFieldsSelector)(apiRef) : (0, _columns.gridColumnFieldsSelector)(apiRef);
+  const columnFields = shouldQuickFilterExcludeHiddenColumns(filterModel) ? (0, _columns.gridVisibleColumnFieldsSelector)(apiRef) : (0, _columns.gridColumnFieldsSelector)(apiRef);
   const appliersPerField = [];
   const {
     ignoreDiacritics

package/node/hooks/features/filter/useGridFilter.js

@@ -349,7 +349,7 @@ const useGridFilter = (apiRef, props) => {
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnVisibilityModelChange', () => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    if (filterModel.quickFilterValues && filterModel.quickFilterExcludeHiddenColumns) {
+    if (filterModel.quickFilterValues && (0, _gridFilterUtils.shouldQuickFilterExcludeHiddenColumns)(filterModel)) {
       // re-apply filters because the quick filter results may have changed
       apiRef.current.unstable_applyFilters();
     }

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

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unstable_gridTabIndexColumnHeaderFilterSelector = exports.unstable_gridTabIndexColumnGroupHeaderSelector = exports.unstable_gridFocusColumnHeaderFilterSelector = exports.unstable_gridFocusColumnGroupHeaderSelector = exports.gridTabIndexStateSelector = exports.gridTabIndexColumnHeaderSelector = exports.gridTabIndexCellSelector = exports.gridFocusStateSelector = exports.gridFocusColumnHeaderSelector = exports.gridFocusCellSelector = void 0;
+exports.unstable_gridTabIndexColumnGroupHeaderSelector = exports.unstable_gridFocusColumnGroupHeaderSelector = exports.gridTabIndexStateSelector = exports.gridTabIndexColumnHeaderSelector = exports.gridTabIndexColumnHeaderFilterSelector = exports.gridTabIndexCellSelector = exports.gridFocusStateSelector = exports.gridFocusColumnHeaderSelector = exports.gridFocusColumnHeaderFilterSelector = exports.gridFocusCellSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridFocusStateSelector = state => state.focus;
 exports.gridFocusStateSelector = gridFocusStateSelector;
 const gridFocusCellSelector = exports.gridFocusCellSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.cell);
 const gridFocusColumnHeaderSelector = exports.gridFocusColumnHeaderSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnHeader);
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const unstable_gridFocusColumnHeaderFilterSelector = exports.unstable_gridFocusColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
+const gridFocusColumnHeaderFilterSelector = exports.gridFocusColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const unstable_gridFocusColumnGroupHeaderSelector = exports.unstable_gridFocusColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
@@ -19,9 +17,7 @@ const gridTabIndexStateSelector = state => state.tabIndex;
 exports.gridTabIndexStateSelector = gridTabIndexStateSelector;
 const gridTabIndexCellSelector = exports.gridTabIndexCellSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.cell);
 const gridTabIndexColumnHeaderSelector = exports.gridTabIndexColumnHeaderSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnHeader);
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const unstable_gridTabIndexColumnHeaderFilterSelector = exports.unstable_gridTabIndexColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnHeaderFilter);
+const gridTabIndexColumnHeaderFilterSelector = exports.gridTabIndexColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnHeaderFilter);
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const unstable_gridTabIndexColumnGroupHeaderSelector = exports.unstable_gridTabIndexColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnGroupHeader);

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

@@ -3,11 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unstable_gridHeaderFilteringStateSelector = exports.unstable_gridHeaderFilteringMenuSelector = exports.unstable_gridHeaderFilteringEditFieldSelector = void 0;
+exports.gridHeaderFilteringStateSelector = exports.gridHeaderFilteringMenuSelector = exports.gridHeaderFilteringEditFieldSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
-/* eslint-disable @typescript-eslint/naming-convention */
-
-const unstable_gridHeaderFilteringStateSelector = state => state.headerFiltering;
-exports.unstable_gridHeaderFilteringStateSelector = unstable_gridHeaderFilteringStateSelector;
-const unstable_gridHeaderFilteringEditFieldSelector = exports.unstable_gridHeaderFilteringEditFieldSelector = (0, _createSelector.createSelector)(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
-const unstable_gridHeaderFilteringMenuSelector = exports.unstable_gridHeaderFilteringMenuSelector = (0, _createSelector.createSelector)(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);
+const gridHeaderFilteringStateSelector = state => state.headerFiltering;
+exports.gridHeaderFilteringStateSelector = gridHeaderFilteringStateSelector;
+const gridHeaderFilteringEditFieldSelector = exports.gridHeaderFilteringEditFieldSelector = (0, _createSelector.createSelector)(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
+const gridHeaderFilteringMenuSelector = exports.gridHeaderFilteringMenuSelector = (0, _createSelector.createSelector)(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);

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

@@ -21,6 +21,7 @@ var _focus = require("../focus");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
 var _pipeProcessing = require("../../core/pipeProcessing");
+var _domUtils = require("../../../utils/domUtils");
 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; }
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
@@ -78,7 +79,7 @@ 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
@@ -244,8 +245,8 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (!dimensions) {
       return;
     }
-    const isEditing = (0, _gridHeaderFilteringSelectors.unstable_gridHeaderFilteringEditFieldSelector)(apiRef) === params.field;
-    const isHeaderMenuOpen = (0, _gridHeaderFilteringSelectors.unstable_gridHeaderFilteringMenuSelector)(apiRef) === params.field;
+    const isEditing = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEditFieldSelector)(apiRef) === params.field;
+    const isHeaderMenuOpen = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringMenuSelector)(apiRef) === params.field;
     if (isEditing || isHeaderMenuOpen || !(0, _keyboardUtils.isNavigationKey)(event.key)) {
       return;
     }
@@ -421,7 +422,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
   }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
-    if (!event.currentTarget.contains(event.target)) {
+    if ((0, _domUtils.isEventTargetInPortal)(event)) {
       return;
     }
 
@@ -513,7 +514,9 @@ 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/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -21,6 +21,7 @@ var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
 var _gridClasses = require("../../../constants/gridClasses");
+var _domUtils = require("../../../utils/domUtils");
 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 getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
@@ -293,7 +294,7 @@ const useGridRowSelection = (apiRef, props) => {
 
     // Ignore portal
     // Do not apply shortcuts if the focus is not on the cell root component
-    if (!event.currentTarget.contains(event.target)) {
+    if ((0, _domUtils.isEventTargetInPortal)(event)) {
       return;
     }
     if ((0, _keyboardUtils.isNavigationKey)(event.key) && event.shiftKey) {

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

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

package/node/hooks/features/sorting/useGridSorting.js

@@ -122,7 +122,8 @@ const useGridSorting = (apiRef, props) => {
       apiRef.current.applySorting();
     }
   }, [apiRef, logger, props.disableMultipleColumnsSorting]);
-  const sortColumn = React.useCallback((column, direction, allowMultipleSorting) => {
+  const sortColumn = React.useCallback((field, direction, allowMultipleSorting) => {
+    const column = apiRef.current.getColumn(field);
     if (!column.sortable) {
       return;
     }
@@ -203,17 +204,17 @@ const useGridSorting = (apiRef, props) => {
    * EVENTS
    */
   const handleColumnHeaderClick = React.useCallback(({
-    colDef
+    field
   }, event) => {
     const allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
-    sortColumn(colDef, undefined, allowMultipleSorting);
+    sortColumn(field, undefined, allowMultipleSorting);
   }, [sortColumn]);
   const handleColumnHeaderKeyDown = React.useCallback(({
-    colDef
+    field
   }, event) => {
     // Ctrl + Enter opens the column menu
     if ((0, _keyboardUtils.isEnterKey)(event.key) && !event.ctrlKey && !event.metaKey) {
-      sortColumn(colDef, undefined, event.shiftKey);
+      sortColumn(field, undefined, event.shiftKey);
     }
   }, [sortColumn]);
   const handleColumnsChange = React.useCallback(() => {

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

@@ -561,7 +561,6 @@ const useGridVirtualScroller = props => {
     if (rootProps.autoHeight && currentPage.rows.length === 0) {
       size.height = (0, _gridRowsUtils.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/node/index.js

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

package/node/internals/index.js

@@ -18,8 +18,8 @@ var _exportNames = {
   unwrapPrivateAPI: true,
   useGridClipboard: true,
   useGridColumnHeaders: true,
-  unstable_gridHeaderFilteringEditFieldSelector: true,
-  unstable_gridHeaderFilteringMenuSelector: true,
+  gridHeaderFilteringEditFieldSelector: true,
+  gridHeaderFilteringMenuSelector: true,
   useGridColumnMenu: true,
   columnMenuStateInitializer: true,
   useGridColumns: true,
@@ -84,6 +84,7 @@ var _exportNames = {
   unstable_resetCreateSelectorCache: true,
   findParentElementFromClassName: true,
   getActiveElement: true,
+  isEventTargetInPortal: true,
   isNavigationKey: true,
   clamp: true,
   isDeepEqual: true,
@@ -305,6 +306,18 @@ Object.defineProperty(exports, "gridEditRowsStateSelector", {
     return _gridEditingSelectors.gridEditRowsStateSelector;
   }
 });
+Object.defineProperty(exports, "gridHeaderFilteringEditFieldSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridHeaderFilteringSelectors.gridHeaderFilteringEditFieldSelector;
+  }
+});
+Object.defineProperty(exports, "gridHeaderFilteringMenuSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridHeaderFilteringSelectors.gridHeaderFilteringMenuSelector;
+  }
+});
 Object.defineProperty(exports, "gridPinnedRowsSelector", {
   enumerable: true,
   get: function () {
@@ -323,6 +336,12 @@ Object.defineProperty(exports, "isDeepEqual", {
     return _utils2.isDeepEqual;
   }
 });
+Object.defineProperty(exports, "isEventTargetInPortal", {
+  enumerable: true,
+  get: function () {
+    return _domUtils.isEventTargetInPortal;
+  }
+});
 Object.defineProperty(exports, "isFunction", {
   enumerable: true,
   get: function () {
@@ -401,18 +420,6 @@ Object.defineProperty(exports, "sortingStateInitializer", {
     return _useGridSorting.sortingStateInitializer;
   }
 });
-Object.defineProperty(exports, "unstable_gridHeaderFilteringEditFieldSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridHeaderFilteringSelectors.unstable_gridHeaderFilteringEditFieldSelector;
-  }
-});
-Object.defineProperty(exports, "unstable_gridHeaderFilteringMenuSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridHeaderFilteringSelectors.unstable_gridHeaderFilteringMenuSelector;
-  }
-});
 Object.defineProperty(exports, "unstable_resetCreateSelectorCache", {
   enumerable: true,
   get: function () {