@mui/x-data-grid 5.11.1 → 5.12.2

package/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { TextFieldProps } from '@mui/material/TextField';
+import { GridFilterModel } from '../../models/gridFilterModel';
 export declare type GridToolbarQuickFilterProps = TextFieldProps & {
     /**
      * Function responsible for parsing text input in an array of independent values for quick filtering.
@@ -7,6 +8,12 @@ export declare type GridToolbarQuickFilterProps = TextFieldProps & {
      * @returns {any[]} The array of value on which quick filter is applied
      */
     quickFilterParser?: (input: string) => any[];
+    /**
+     * Function responsible for formatting values of quick filter in a string when the model is modified
+     * @param {any[]} values The new values passed to the quick filter model
+     * @returns {string} The string to display in the text field
+     */
+    quickFilterFormatter?: (values: GridFilterModel['quickFilterValues']) => string;
     /**
      * The debounce time in milliseconds.
      * @default 500

package/components/toolbar/GridToolbarQuickFilter.js

@@ -1,13 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["quickFilterParser", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
 import { debounce } from '@mui/material/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridQuickFilterValuesSelector } from '../../hooks/features/filter';
+import { isDeepEqual } from '../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridToolbarQuickFilterRoot = styled(TextField, {
   name: 'MuiDataGrid',
@@ -18,28 +22,55 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
 }) => ({
   width: 'auto',
   paddingBottom: theme.spacing(0.5),
-  '& .MuiSvgIcon-root': {
-    marginRight: theme.spacing(0.5)
+  '& input': {
+    marginLeft: theme.spacing(0.5)
   },
   '& .MuiInput-underline:before': {
     borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  [`& input[type=search]::-ms-clear,
+& input[type=search]::-ms-reveal`]: {
+    /* clears the 'X' icon from IE */
+    display: 'none',
+    width: 0,
+    height: 0
+  },
+  [`& input[type="search"]::-webkit-search-decoration,
+  & input[type="search"]::-webkit-search-cancel-button,
+  & input[type="search"]::-webkit-search-results-button,
+  & input[type="search"]::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
   }
 }));
 
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 
+const defaultSearchValueFormatter = values => values.join(' ');
+
 function GridToolbarQuickFilter(props) {
   var _rootProps$components;
 
   const {
     quickFilterParser = defaultSearchValueParser,
+    quickFilterFormatter = defaultSearchValueFormatter,
     debounceMs = 500
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const [searchValue, setSearchValue] = React.useState('');
+  const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
+  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+  const [prevQuickFilterValues, setPrevQuickFilterValues] = React.useState(quickFilterValues);
+  React.useEffect(() => {
+    if (!isDeepEqual(prevQuickFilterValues, quickFilterValues)) {
+      // The model of quick filter value has been updated
+      setPrevQuickFilterValues(quickFilterValues); // Update the input value if needed to match the new model
+
+      setSearchValue(prevSearchValue => isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+    }
+  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
     apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
   }, [apiRef, quickFilterParser]);
@@ -49,6 +80,10 @@ function GridToolbarQuickFilter(props) {
     setSearchValue(newSearchValue);
     debouncedUpdateSearchValue(newSearchValue);
   }, [debouncedUpdateSearchValue]);
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    updateSearchValue('');
+  }, [updateSearchValue]);
   return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
     as: rootProps.components.BaseTextField,
     variant: "standard",
@@ -60,6 +95,17 @@ function GridToolbarQuickFilter(props) {
     InputProps: {
       startAdornment: /*#__PURE__*/_jsx(rootProps.components.QuickFilterIcon, {
         fontSize: "small"
+      }),
+      endAdornment: /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+        size: "small",
+        sx: {
+          visibility: searchValue ? 'visible' : 'hidden'
+        },
+        onClick: handleSearchReset,
+        children: /*#__PURE__*/_jsx(rootProps.components.QuickFilterClearIcon, {
+          fontSize: "small"
+        })
       })
     }
   }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
@@ -77,6 +123,13 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    */
   debounceMs: PropTypes.number,
 
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @param {any[]} values The new values passed to the quick filter model
+   * @returns {string} The string to display in the text field
+   */
+  quickFilterFormatter: PropTypes.func,
+
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.
    * @param {string} input The value entered by the user

package/constants/defaultGridSlotsComponents.js

@@ -35,7 +35,8 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   DetailPanelExpandIcon: GridAddIcon,
   DetailPanelCollapseIcon: GridRemoveIcon,
   RowReorderIcon: GridDragIcon,
-  QuickFilterIcon: GridSearchIcon
+  QuickFilterIcon: GridSearchIcon,
+  QuickFilterClearIcon: GridCloseIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface

package/constants/gridClasses.d.ts

@@ -347,6 +347,10 @@ export interface GridClasses {
      * Styles applied to the last visible row element on every page of the grid.
      */
     'row--lastVisible': string;
+    /**
+     * Styles applied to the row if it has dynamic row height.
+     */
+    'row--dynamicHeight': string;
     /**
      * Styles applied to the row element.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

package/constants/localeTextConstants.js

@@ -105,6 +105,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   groupColumn: name => `Group by ${name}`,
   unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys

package/hooks/core/useGridStateInitialization.js

@@ -8,7 +8,7 @@ import { isFunction } from '../../utils/utils';
 export const useGridStateInitialization = (apiRef, props) => {
   const controlStateMapRef = React.useRef({});
   const [, rawForceUpdate] = React.useState();
-  const updateControlState = React.useCallback(controlStateItem => {
+  const registerControlState = React.useCallback(controlStateItem => {
     const {
       stateId
     } = controlStateItem,
@@ -18,7 +18,7 @@ export const useGridStateInitialization = (apiRef, props) => {
       stateId
     });
   }, []);
-  const setState = React.useCallback(state => {
+  const setState = React.useCallback((state, reason) => {
     let newState;
 
     if (isFunction(state)) {
@@ -79,23 +79,36 @@ export const useGridStateInitialization = (apiRef, props) => {
 
       if (controlState.propOnChange && hasPropChanged) {
         const details = props.signature === GridSignature.DataGridPro ? {
-          api: apiRef.current
-        } : {};
+          api: apiRef.current,
+          reason
+        } : {
+          reason
+        };
         controlState.propOnChange(model, details);
       }
 
       if (!ignoreSetState) {
-        apiRef.current.publishEvent(controlState.changeEvent, model);
+        apiRef.current.publishEvent(controlState.changeEvent, model, {
+          reason
+        });
       }
     }
 
     return !ignoreSetState;
   }, [apiRef, props.signature]);
+  const updateControlState = React.useCallback((key, state, reason) => {
+    return apiRef.current.setState(previousState => {
+      return _extends({}, previousState, {
+        [key]: state(previousState[key])
+      });
+    }, reason);
+  }, [apiRef]);
   const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
   const stateApi = {
     setState,
     forceUpdate,
-    unstable_updateControlState: updateControlState
+    unstable_updateControlState: updateControlState,
+    unstable_registerControlState: registerControlState
   };
   useGridApiMethod(apiRef, stateApi, 'GridStateApi');
 };

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { gridColumnMenuSelector } from './columnMenuSelector';
+import { gridClasses } from '../../../constants/gridClasses';
 export const columnMenuStateInitializer = state => _extends({}, state, {
   columnMenu: {
     open: false
@@ -77,7 +78,28 @@ export const useGridColumnMenu = apiRef => {
    * EVENTS
    */
 
+  const handleColumnHeaderFocus = React.useCallback((params, event) => {
+    // Check if the column menu button received focus
+    if (!event.target.classList.contains(gridClasses.menuIconButton)) {
+      return;
+    } // Check if there's an element which lost focus
+
+
+    if (!event.relatedTarget) {
+      return;
+    } // `true` if the focus was on the column menu itself, not on any item
+
+
+    const columnMenuLostFocus = event.relatedTarget.classList.contains(gridClasses.menuList); // `true` if the focus was on an item from the column menu
+
+    const columnMenuItemLostFocus = event.relatedTarget.getAttribute('role') === 'menuitem';
+
+    if (columnMenuLostFocus || columnMenuItemLostFocus) {
+      apiRef.current.setColumnHeaderFocus(params.field);
+    }
+  }, [apiRef]);
   useGridApiEventHandler(apiRef, 'columnResizeStart', hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
   useGridApiEventHandler(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
   useGridApiEventHandler(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

package/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -15,6 +15,9 @@ export interface GridColumnsState {
     lookup: GridColumnLookup;
     columnVisibilityModel: GridColumnVisibilityModel;
 }
+export interface GridColumnsInternalCache {
+    isUsingColumnVisibilityModel: boolean;
+}
 export declare type GridColumnDimensions = {
     [key in GridColumnDimensionProperties]?: number;
 };

package/hooks/features/columns/useGridColumnSpanning.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 /**
  * @requires useGridColumns (method, event)

package/hooks/features/columns/useGridColumnSpanning.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 

package/hooks/features/columns/useGridColumns.d.ts

@@ -8,4 +8,4 @@ export declare const columnsStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridDimensions (method, event) - can be after
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
-export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'classes' | 'components' | 'componentsProps'>): void;
+export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'components' | 'componentsProps'>): void;

package/hooks/features/columns/useGridColumns.js

@@ -12,6 +12,9 @@ export const columnsStateInitializer = (state, props, apiRef) => {
   var _props$initialState, _props$initialState$c, _props$initialState2, _ref, _props$columnVisibili, _props$initialState3, _props$initialState3$;
 
   const isUsingColumnVisibilityModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
+  apiRef.current.unstable_caches.columns = {
+    isUsingColumnVisibilityModel
+  };
   const columnsTypes = computeColumnTypes(props.columnTypes);
   const columnsState = createColumnsState({
     apiRef,
@@ -33,19 +36,13 @@ export const columnsStateInitializer = (state, props, apiRef) => {
  */
 
 export function useGridColumns(apiRef, props) {
-  var _props$initialState4, _props$initialState4$, _props$componentsProp2;
+  var _props$componentsProp2;
 
   const logger = useGridLogger(apiRef, 'useGridColumns');
   const columnTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
   const previousColumnsProp = React.useRef(props.columns);
   const previousColumnTypesProp = React.useRef(columnTypes);
-  /**
-   * If `initialState.columns.columnVisibilityModel` or `columnVisibilityModel` was defined during the 1st render, we are directly updating the model
-   * If not, we keep the old behavior and update the `GridColDef.hide` option (which will update the state model through the `GridColDef.hide` => `columnVisibilityModel` sync in `createColumnsState`
-   */
-
-  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel));
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
     propOnChange: props.onColumnVisibilityModelChange,
@@ -108,7 +105,7 @@ export function useGridColumns(apiRef, props) {
     // We keep updating the `hide` option of `GridColDef` when not controlling the model to avoid any breaking change.
     // `updateColumns` take care of updating the model itself if needs be.
     // TODO v6: stop using the `hide` field even when the model is not defined
-    if (isUsingColumnVisibilityModel.current) {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
       var _columnVisibilityMode;
 
       const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -147,7 +144,8 @@ export function useGridColumns(apiRef, props) {
 
     logger.debug(`Moving column ${field} to index ${targetIndexPosition}`);
     const updatedColumns = [...allColumns];
-    updatedColumns.splice(targetIndexPosition, 0, updatedColumns.splice(oldIndexPosition, 1)[0]);
+    const fieldRemoved = updatedColumns.splice(oldIndexPosition, 1)[0];
+    updatedColumns.splice(targetIndexPosition, 0, fieldRemoved);
     setGridColumnsState(_extends({}, gridColumnsSelector(apiRef.current.state), {
       all: updatedColumns
     }));
@@ -197,7 +195,7 @@ export function useGridColumns(apiRef, props) {
   const stateExportPreProcessing = React.useCallback(prevState => {
     const columnsStateToExport = {};
 
-    if (isUsingColumnVisibilityModel.current) {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
       const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
       const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
 
@@ -236,7 +234,7 @@ export function useGridColumns(apiRef, props) {
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 
-    const columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    const columnVisibilityModelToImport = apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
     const initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -248,7 +246,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       currentColumnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
@@ -299,7 +297,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
@@ -329,7 +327,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });

package/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -16,6 +16,11 @@ export interface GridDimensions {
      * Indicates if a scroll is currently needed to go from the beginning of the first row to the end of the last row.
      */
     hasScrollY: boolean;
+    /**
+     * Size of the scrollbar used to scroll the rows in pixel.
+     * It is defined even when the scrollbar is currently not needed.
+     */
+    scrollBarSize: number;
 }
 export interface GridDimensionsApi {
     /**

package/hooks/features/dimensions/useGridDimensions.js

@@ -37,7 +37,7 @@ const hasScroll = ({
 
 export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
-  const warningShown = React.useRef(false);
+  const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(null);
   const fullDimensionsRef = React.useRef(null);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -94,7 +94,8 @@ export function useGridDimensions(apiRef, props) {
       viewportOuterSize,
       viewportInnerSize,
       hasScrollX,
-      hasScrollY
+      hasScrollY,
+      scrollBarSize
     };
     const prevDimensions = fullDimensionsRef.current;
     fullDimensionsRef.current = newFullDimensions;
@@ -144,14 +145,14 @@ export function useGridDimensions(apiRef, props) {
 
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
-    if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      errorShown.current = true;
     }
 
-    if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.width === 0 && !errorShown.current && !isJSDOM) {
+      logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      errorShown.current = true;
     }
 
     if (isTestEnvironment) {

package/hooks/features/editRows/useGridCellEditing.new.js

@@ -303,6 +303,9 @@ export const useGridCellEditing = (apiRef, props) => {
     } = editingState[id][field];
 
     if (error || isProcessingProps) {
+      // Attempt to change cell mode to "view" was not successful
+      // Update previous mode to allow another attempt
+      prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
       return;
     }
 
@@ -310,6 +313,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
+        prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else {
@@ -413,12 +418,15 @@ export const useGridCellEditing = (apiRef, props) => {
     }
   }, [cellModesModelProp, updateCellModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
+
+    const copyOfPrevCellModes = prevCellModesModel.current;
+    prevCellModesModel.current = cellModesModel;
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
-        var _prevCellModesModel$c, _prevCellModesModel$c2, _idToIdLookup$id;
+        var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;
 
-        const prevMode = ((_prevCellModesModel$c = prevCellModesModel.current[id]) == null ? void 0 : (_prevCellModesModel$c2 = _prevCellModesModel$c[field]) == null ? void 0 : _prevCellModesModel$c2.mode) || GridCellModes.View;
+        const prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null ? void 0 : (_copyOfPrevCellModes$2 = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$2.mode) || GridCellModes.View;
         const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
 
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
@@ -434,6 +442,5 @@ export const useGridCellEditing = (apiRef, props) => {
         }
       });
     });
-    prevCellModesModel.current = cellModesModel;
   }, [apiRef, cellModesModel, updateStateToStartCellEditMode, updateStateToStopCellEditMode]);
 };

package/hooks/features/editRows/useGridEditing.old.js

@@ -23,7 +23,7 @@ export function useGridEditing(apiRef, props) {
   useCellEditing(apiRef, props);
   useGridRowEditing(apiRef, props);
   const debounceMap = React.useRef({});
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'editRows',
     propModel: props.editRowsModel,
     propOnChange: props.onEditRowsModelChange,

package/hooks/features/editRows/useGridRowEditing.new.js

@@ -384,12 +384,14 @@ export const useGridRowEditing = (apiRef, props) => {
     const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
 
     if (isSomeFieldProcessingProps) {
+      prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
 
     const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
 
     if (hasSomeFieldWithError) {
+      prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
 
@@ -397,6 +399,8 @@ export const useGridRowEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
+        prevRowModesModel.current[id].mode = GridRowModes.Edit;
+
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else {
@@ -567,11 +571,14 @@ export const useGridRowEditing = (apiRef, props) => {
     }
   }, [rowModesModelProp, updateRowModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
+
+    const copyOfPrevRowModesModel = prevRowModesModel.current;
+    prevRowModesModel.current = rowModesModel;
     Object.entries(rowModesModel).forEach(([id, params]) => {
-      var _prevRowModesModel$cu, _idToIdLookup$id;
+      var _copyOfPrevRowModesMo, _idToIdLookup$id;
 
-      const prevMode = ((_prevRowModesModel$cu = prevRowModesModel.current[id]) == null ? void 0 : _prevRowModesModel$cu.mode) || GridRowModes.View;
+      const prevMode = ((_copyOfPrevRowModesMo = copyOfPrevRowModesModel[id]) == null ? void 0 : _copyOfPrevRowModesMo.mode) || GridRowModes.View;
       const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
 
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
@@ -584,6 +591,5 @@ export const useGridRowEditing = (apiRef, props) => {
         }, params));
       }
     });
-    prevRowModesModel.current = rowModesModel;
   }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
 };

package/hooks/features/events/useGridEvents.d.ts

@@ -5,4 +5,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridFocus (event) - can be after, async only
  * @requires useGridColumns (event) - can be after, async only
  */
-export declare function useGridEvents(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onColumnOrderChange' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onCellFocusOut' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onError' | 'onStateChange'>): void;
+export declare function useGridEvents(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onColumnOrderChange' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onCellFocusOut' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onError' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;

package/hooks/features/events/useGridEvents.js

@@ -18,6 +18,8 @@ export function useGridEvents(apiRef, props) {
   useGridApiOptionHandler(apiRef, 'cellFocusOut', props.onCellFocusOut);
   useGridApiOptionHandler(apiRef, 'preferencePanelClose', props.onPreferencePanelClose);
   useGridApiOptionHandler(apiRef, 'preferencePanelOpen', props.onPreferencePanelOpen);
+  useGridApiOptionHandler(apiRef, 'menuOpen', props.onMenuOpen);
+  useGridApiOptionHandler(apiRef, 'menuClose', props.onMenuClose);
   useGridApiOptionHandler(apiRef, 'rowDoubleClick', props.onRowDoubleClick);
   useGridApiOptionHandler(apiRef, 'rowClick', props.onRowClick);
   useGridApiOptionHandler(apiRef, 'componentError', props.onError);

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

@@ -9,6 +9,11 @@ export declare const gridFilterStateSelector: (state: GridStateCommunity) => imp
  * @category Filtering
  */
 export declare const gridFilterModelSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridFilterModel>;
+/**
+ * Get the current quick filter values.
+ * @category Filtering
+ */
+export declare const gridQuickFilterValuesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, any[] | undefined>;
 /**
  * @category Filtering
  * @ignore - do not document.

package/hooks/features/filter/gridFilterSelector.js

@@ -13,6 +13,12 @@ export const gridFilterStateSelector = state => state.filter;
  */
 
 export const gridFilterModelSelector = createSelector(gridFilterStateSelector, filterState => filterState.filterModel);
+/**
+ * Get the current quick filter values.
+ * @category Filtering
+ */
+
+export const gridQuickFilterValuesSelector = createSelector(gridFilterModelSelector, filterModel => filterModel.quickFilterValues);
 /**
  * @category Filtering
  * @ignore - do not document.

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

@@ -19,7 +19,7 @@ export interface GridFilterState {
     /**
      * Amount of descendants that are passing the filters.
      * For the Tree Data, it includes all the intermediate depth levels (= amount of children + amount of grand children + ...).
-     * For the Row Grouping by Column, it does not include the intermediate depth levels (= amount of descendant of maximum depth).
+     * For the Row grouping by column, it does not include the intermediate depth levels (= amount of descendant of maximum depth).
      * If a row is not registered in this lookup, it is supposed to have no descendant passing the filters.
      */
     filteredDescendantCountLookup: Record<GridRowId, number>;