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

package/legacy/DataGrid/DataGrid.js

@@ -5,7 +5,7 @@ import { chainPropTypes } from '@mui/utils';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
 import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
-import { useDataGridProps, DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';
+import { useDataGridProps } from './useDataGridProps';
 import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -35,18 +35,6 @@ var DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref)
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
  */
 export var DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
-
-/**
- * Remove at v7
- * @deprecated
- */
-export var SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
-
-/**
- * Remove at v7
- * @deprecated
- */
-export var SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -276,6 +264,15 @@ DataGridRaw.propTypes = {
    * @default false
    */
   ignoreDiacritics: PropTypes.bool,
+  /**
+   * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
+   * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
+   * @default false
+   */
+  ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
+    clipboardExport: PropTypes.bool,
+    csvExport: PropTypes.bool
+  }), PropTypes.bool]),
   /**
    * The initial state of the DataGrid.
    * The data in it will be set in the state on initialization but will not be controlled.
@@ -668,14 +665,5 @@ DataGridRaw.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
-   * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
-   * @default false
-   */
-  unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
-    clipboardExport: PropTypes.bool,
-    csvExport: PropTypes.bool
-  }), PropTypes.bool])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };

package/legacy/DataGrid/useDataGridProps.js

@@ -68,7 +68,7 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableColumnResize: false,
   keepNonExistentRowsSelected: false,
   keepColumnPositionIfDraggedOutside: false,
-  unstable_ignoreValueFormatterDuringExport: false,
+  ignoreValueFormatterDuringExport: false,
   clipboardCopyCellDelimiter: '\t',
   rowPositionsDebounceMs: 166
 };

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/GridHeader.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { GridPreferencesPanel } from './panel/GridPreferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function GridHeader() {
-  var _rootProps$slotProps, _rootProps$slotProps2;
+  var _rootProps$slotProps;
   var rootProps = useGridRootProps();
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.preferencesPanel, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.preferencesPanel)), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.toolbar))]
+    children: [/*#__PURE__*/_jsx(GridPreferencesPanel, {}), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.toolbar))]
   });
 }

package/legacy/components/GridRow.js

@@ -15,7 +15,7 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
-import { findParentElementFromClassName } from '../utils/domUtils';
+import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
@@ -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,
@@ -141,9 +140,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var publish = React.useCallback(function (eventName, propHandler) {
     return function (event) {
       // Ignore portal
-      // The target is not an element when triggered by a Select inside the cell
-      // See https://github.com/mui/material-ui/issues/10534
-      if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
+      if (isEventTargetInPortal(event)) {
         return;
       }
 
@@ -199,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 () {
@@ -387,7 +386,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
 } : void 0;
 export { MemoizedCellWrapper as GridCellWrapper, GridCell };
 var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _getActions, _ref, _rootProps$unstable_c, _rootProps$experiment3, _rootProps$experiment4;
+  var _getActions, _ref, _rootProps$cellSelect, _rootProps$experiment3, _rootProps$experiment4;
   var column = props.column,
     rowId = props.rowId,
     editCellState = props.editCellState,
@@ -463,8 +462,8 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var cellRef = React.useRef(null);
   var handleRef = useForkRef(ref, cellRef);
   var focusElementRef = React.useRef(null);
-  // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature
-  var isSelectionMode = (_rootProps$unstable_c = rootProps.unstable_cellSelection) != null ? _rootProps$unstable_c : false;
+  // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
+  var isSelectionMode = (_rootProps$cellSelect = rootProps.cellSelection) != null ? _rootProps$cellSelect : false;
   var ownerState = {
     align: align,
     showRightBorder: showRightBorder,
@@ -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/cell/GridEditDateCell.js

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

package/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
@@ -85,7 +86,7 @@ function GridColumnGroupHeader(props) {
     return function (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/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,6 +10,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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -71,7 +72,7 @@ function GridColumnHeaderItem(props) {
     return function (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/legacy/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -29,7 +29,7 @@ function GridColumnMenuSortItem(props) {
   var onSortMenuItemClick = React.useCallback(function (event) {
     onClick(event);
     var 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(function (item) {
     return !!item;

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

@@ -205,8 +205,8 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
       return operator.value === item.operator;
     }) || column.filterOperators[0];
 
-    // Erase filter value if the input component is modified
-    var eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent);
+    // Erase filter value if the input component or filtered column type is modified
+    var eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
     applyFilterChanges(_extends({}, item, {
       field: field,
       operator: newOperator.value,

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

@@ -47,7 +47,7 @@ function GridFilterInputValue(props) {
   }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(function () {
     var 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/legacy/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/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/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 var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   footer: GridFooter,
   footerRowCount: GridRowCount,
   toolbar: null,
-  preferencesPanel: GridPreferencesPanel,
   loadingOverlay: GridLoadingOverlay,
   noResultsOverlay: GridNoResultsOverlay,
   noRowsOverlay: GridNoRowsOverlay,

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

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

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

@@ -8,7 +8,7 @@ var _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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';
@@ -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
@@ -108,7 +107,7 @@ export var useGridCellEditing = function 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') {
@@ -127,23 +126,12 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var handleCellEditStart = React.useCallback(function (params) {
     var id = params.id,
       field = params.field,
-      reason = params.reason,
-      key = params.key,
-      colDef = params.colDef;
+      reason = params.reason;
     var startCellEditModeParams = {
       id: id,
       field: 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 {
-        var 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);
@@ -189,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);
@@ -244,17 +231,13 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       deleteValue = params.deleteValue,
       initialValue = params.initialValue;
     var newValue = apiRef.current.getCellValue(id, field);
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    var unstable_updateValueOnRender = false;
     if (deleteValue || initialValue) {
       newValue = deleteValue ? '' : initialValue;
-      unstable_updateValueOnRender = true;
     }
     var newProps = {
       value: newValue,
       error: false,
-      isProcessingProps: false,
-      unstable_updateValueOnRender: unstable_updateValueOnRender
+      isProcessingProps: false
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
@@ -439,7 +422,9 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       updateCellModesModel(cellModesModelProp);
     }
   }, [cellModesModelProp, updateCellModesModel]);
-  React.useEffect(function () {
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  useEnhancedEffect(function () {
     var idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later

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

@@ -6,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _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';
@@ -179,7 +179,6 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         var rowParams = apiRef.current.getRowParams(params.id);
         var _newParams = _extends({}, rowParams, {
           field: params.field,
-          key: event.key,
           reason: _reason
         });
         apiRef.current.publishEvent('rowEditStart', _newParams, event);
@@ -189,25 +188,12 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var handleRowEditStart = React.useCallback(function (params) {
     var id = params.id,
       field = params.field,
-      reason = params.reason,
-      key = params.key,
-      columns = params.columns;
+      reason = params.reason;
     var startRowEditModeParams = {
       id: 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 {
-        var colDef = columns.find(function (col) {
-          return 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);
@@ -257,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);
@@ -322,17 +307,13 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         return acc;
       }
       var newValue = apiRef.current.getCellValue(id, field);
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      var unstable_updateValueOnRender = false;
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         newValue = deleteValue ? '' : initialValue;
-        unstable_updateValueOnRender = true;
       }
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false,
-        unstable_updateValueOnRender: unstable_updateValueOnRender
+        isProcessingProps: false
       };
       return acc;
     }, {});
@@ -559,7 +540,9 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       updateRowModesModel(rowModesModelProp);
     }
   }, [rowModesModelProp, updateRowModesModel]);
-  React.useEffect(function () {
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  useEnhancedEffect(function () {
     var idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later

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

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

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

@@ -182,6 +182,10 @@ var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsAppli
   filterItemsApplierId += 1;
   return filterItem;
 };
+export var shouldQuickFilterExcludeHiddenColumns = function 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.
@@ -190,13 +194,12 @@ var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsAppli
  * @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.
  */
 var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilterApplier(filterModel, apiRef) {
-  var _filterModel$quickFil, _filterModel$quickFil2, _filterModel$quickFil3;
-  var quickFilterValues = (_filterModel$quickFil = (_filterModel$quickFil2 = filterModel.quickFilterValues) == null ? void 0 : _filterModel$quickFil2.filter(Boolean)) != null ? _filterModel$quickFil : [];
+  var _filterModel$quickFil2, _filterModel$quickFil3;
+  var quickFilterValues = (_filterModel$quickFil2 = (_filterModel$quickFil3 = filterModel.quickFilterValues) == null ? void 0 : _filterModel$quickFil3.filter(Boolean)) != null ? _filterModel$quickFil2 : [];
   if (quickFilterValues.length === 0) {
     return null;
   }
-  var quickFilterExcludeHiddenColumns = (_filterModel$quickFil3 = filterModel.quickFilterExcludeHiddenColumns) != null ? _filterModel$quickFil3 : false;
-  var columnFields = quickFilterExcludeHiddenColumns ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
+  var columnFields = shouldQuickFilterExcludeHiddenColumns(filterModel) ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
   var appliersPerField = [];
   var ignoreDiacritics = apiRef.current.rootProps.ignoreDiacritics;
   var publicApiRef = getPublicApiRef(apiRef);

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

@@ -15,7 +15,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 var filterStateInitializer = function filterStateInitializer(state, props, apiRef) {
@@ -354,7 +354,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
   useGridApiEventHandler(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
   useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', function () {
     var 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/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;
 });