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

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -7,6 +7,7 @@ import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGroup
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -85,7 +86,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 (isEventTargetInPortal(event)) {
       return;
     }
     apiRef.current.publishEvent(eventName, renderParams, event);

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -9,6 +9,7 @@ import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -68,7 +69,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 (isEventTargetInPortal(event)) {
       return;
     }
     apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);

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

@@ -29,7 +29,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/components/panel/filterPanel/GridFilterForm.js

@@ -178,8 +178,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     // 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 == null ? void 0 : currentOperator.InputComponent);
+    // Erase filter value if the input component or filtered column type is modified
+    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
     applyFilterChanges(_extends({}, item, {
       field,
       operator: newOperator.value,

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -43,7 +43,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) {
       var _item$value2;
       setFilterValueState(String((_item$value2 = item.value) != null ? _item$value2 : ''));
     }

package/components/panel/index.d.ts

@@ -4,5 +4,4 @@ export * from './GridPanelContent';
 export * from './GridPanelFooter';
 export * from './GridPanelHeader';
 export * from './GridPanelWrapper';
-export * from './GridPreferencesPanel';
 export * from './filterPanel';

package/components/panel/index.js

@@ -4,5 +4,4 @@ export * from './GridPanelContent';
 export * from './GridPanelFooter';
 export * from './GridPanelHeader';
 export * from './GridPanelWrapper';
-export * from './GridPreferencesPanel';
 export * from './filterPanel';

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/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
 import { GridCellV7 } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
@@ -17,7 +17,6 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   footer: GridFooter,
   footerRowCount: GridRowCount,
   toolbar: null,
-  preferencesPanel: GridPreferencesPanel,
   loadingOverlay: GridLoadingOverlay,
   noResultsOverlay: GridNoResultsOverlay,
   noRowsOverlay: GridNoRowsOverlay,

package/hooks/features/clipboard/useGridClipboard.d.ts

@@ -5,4 +5,4 @@ import type { DataGridProcessedProps } from '../../../models/props/DataGridProps
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter'>) => void;
+export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter'>) => void;

package/hooks/features/clipboard/useGridClipboard.js

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

package/hooks/features/editing/useGridCellEditing.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import * as React from 'react';
-import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -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
@@ -101,7 +100,7 @@ export const useGridCellEditing = (apiRef, props) => {
       if (isPrintableKey(event)) {
         reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-        reason = GridCellEditStartReasons.printableKeyDown;
+        reason = GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
       } else if (event.key === 'Delete' || event.key === 'Backspace') {
@@ -121,24 +120,13 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason,
-      key,
-      colDef
+      reason
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
-    if (reason === 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 === GridCellEditStartReasons.deleteKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown || reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.pasteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
     apiRef.current.startCellEditMode(startCellEditModeParams);
@@ -186,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);
@@ -248,17 +235,13 @@ export 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);
@@ -423,7 +406,9 @@ export 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.
+  useEnhancedEffect(() => {
     const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later

package/hooks/features/editing/useGridRowEditing.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id"],
   _excluded2 = ["id"];
 import * as React from 'react';
-import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -172,7 +172,6 @@ export const useGridRowEditing = (apiRef, props) => {
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = _extends({}, rowParams, {
           field: params.field,
-          key: event.key,
           reason
         });
         apiRef.current.publishEvent('rowEditStart', newParams, event);
@@ -183,24 +182,13 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason,
-      key,
-      columns
+      reason
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
-    if (reason === 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 === GridRowEditStartReasons.deleteKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown || reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
     apiRef.current.startRowEditMode(startRowEditModeParams);
@@ -252,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);
@@ -323,17 +310,13 @@ export 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;
     }, {});
@@ -553,7 +536,9 @@ export 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.
+  useEnhancedEffect(() => {
     const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later

package/hooks/features/export/useGridCsvExport.d.ts

@@ -8,4 +8,4 @@ import type { DataGridProcessedProps } from '../../../models/props/DataGridProps
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_ignoreValueFormatterDuringExport'>) => void;
+export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'ignoreValueFormatterDuringExport'>) => void;

package/hooks/features/export/useGridCsvExport.js

@@ -16,7 +16,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 export const useGridCsvExport = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridCsvExport');
-  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   const getDataAsCsv = React.useCallback((options = {}) => {
     var _options$getRowsToExp, _options$includeHeade, _options$includeColum;

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -14,6 +14,7 @@ export declare const cleanFilterItem: (item: GridFilterItem, apiRef: React.Mutab
 export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => GridFilterModel;
 export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity['filter']) => GridStateCommunity['filter'];
 export declare const removeDiacritics: (value: unknown) => unknown;
+export declare const shouldQuickFilterExcludeHiddenColumns: (filterModel: GridFilterModel) => boolean;
 export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
 type FilterCache = {
     cleanedFilterItems?: GridFilterItem[];

package/hooks/features/filter/gridFilterUtils.js

@@ -175,6 +175,10 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) =>
   filterItemsApplierId += 1;
   return filterItem;
 };
+export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
+  var _filterModel$quickFil;
+  return (_filterModel$quickFil = filterModel.quickFilterExcludeHiddenColumns) != null ? _filterModel$quickFil : true;
+};
 
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
@@ -183,13 +187,12 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) =>
  * @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.
  */
 const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
-  var _filterModel$quickFil, _filterModel$quickFil2, _filterModel$quickFil3;
-  const quickFilterValues = (_filterModel$quickFil = (_filterModel$quickFil2 = filterModel.quickFilterValues) == null ? void 0 : _filterModel$quickFil2.filter(Boolean)) != null ? _filterModel$quickFil : [];
+  var _filterModel$quickFil2, _filterModel$quickFil3;
+  const quickFilterValues = (_filterModel$quickFil2 = (_filterModel$quickFil3 = filterModel.quickFilterValues) == null ? void 0 : _filterModel$quickFil3.filter(Boolean)) != null ? _filterModel$quickFil2 : [];
   if (quickFilterValues.length === 0) {
     return null;
   }
-  const quickFilterExcludeHiddenColumns = (_filterModel$quickFil3 = filterModel.quickFilterExcludeHiddenColumns) != null ? _filterModel$quickFil3 : false;
-  const columnFields = quickFilterExcludeHiddenColumns ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
+  const columnFields = shouldQuickFilterExcludeHiddenColumns(filterModel) ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
   const appliersPerField = [];
   const {
     ignoreDiacritics

package/hooks/features/filter/useGridFilter.js

@@ -14,7 +14,7 @@ import { useFirstRender } from '../../utils/useFirstRender';
 import { gridRowsLookupSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
-import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic } from './gridFilterUtils';
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic, shouldQuickFilterExcludeHiddenColumns } from './gridFilterUtils';
 import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
@@ -345,7 +345,7 @@ export const useGridFilter = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
   useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', () => {
     const filterModel = gridFilterModelSelector(apiRef);
-    if (filterModel.quickFilterValues && filterModel.quickFilterExcludeHiddenColumns) {
+    if (filterModel.quickFilterValues && shouldQuickFilterExcludeHiddenColumns(filterModel)) {
       // re-apply filters because the quick filter results may have changed
       apiRef.current.unstable_applyFilters();
     }

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,8 +13,9 @@ 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) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
   return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
@@ -70,7 +71,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled =
   // @ts-expect-error // TODO move relevant code to the `DataGridPro`
-  props.signature !== 'DataGrid' && props.unstable_headerFilters;
+  props.signature !== 'DataGrid' && props.headerFilters;
 
   /**
    * @param {number} colIndex Index of the column to focus
@@ -237,8 +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;
     }
@@ -414,7 +415,7 @@ export 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 (isEventTargetInPortal(event)) {
       return;
     }
 
@@ -506,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/rowSelection/useGridRowSelection.js

@@ -14,6 +14,7 @@ import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridClasses } from '../../../constants/gridClasses';
+import { isEventTargetInPortal } from '../../../utils/domUtils';
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
     return selectionModelProp;
@@ -289,7 +290,7 @@ export 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 (isEventTargetInPortal(event)) {
       return;
     }
     if (isNavigationKey(event.key) && event.shiftKey) {

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/sorting/useGridSorting.js

@@ -116,7 +116,8 @@ export 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;
     }
@@ -199,17 +200,17 @@ export 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 (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
-      sortColumn(colDef, undefined, event.shiftKey);
+      sortColumn(field, undefined, event.shiftKey);
     }
   }, [sortColumn]);
   const handleColumnsChange = React.useCallback(() => {

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.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/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';
@@ -67,7 +67,7 @@ export type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGr
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache, } from '../utils/createSelector';
-export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
+export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';

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';
@@ -54,7 +54,7 @@ export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
-export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
+export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';