@mui/x-data-grid 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -3,6 +3,77 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.1.0
+
+_Mar 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Add `resizeThrottleMs` prop (#12556) @romgrk
+- 🌍 Improve Chinese (Hong Kong) (zh-HK) and Italian (it-IT) locale on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.1.0`
+
+- [DataGrid] Add `resizeThrottleMs` prop (#12556) @romgrk
+- [DataGrid] Do not publish `rowEditStop` event if row has fields with errors (#11383) @cherniavskii
+- [DataGrid] Fix bug in suspense (#12553) @romgrk
+- [DataGrid] Fix missing class name in the `GridToolbarQuickFilter` component (#12484) @jhawkins11
+
+#### `@mui/x-data-grid-pro@7.1.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.1.0`.
+
+#### `@mui/x-data-grid-premium@7.1.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.1.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.1.0`
+
+- [fields] Fix placeholder override (#12589) @flaviendelangle
+- [l10n] Improve Chinese (Hong Kong) (zh-HK) locale (#12547) @samchiu90
+- [l10n] Improve Italian (it-IT) locale (#12549) @antomanc
+- [pickers] Prepare compatibility with `@mui/zero-runtime` (stop using `ownerState` in `styled`) (#12003) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.1.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.1.0`, plus:
+
+- [DateRangePicker] Fix selection behavior with single input field when `readOnly` (#12593) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.1.0`
+
+- [charts] Fix tooltip causing crash on data change (#12571) @Rishi556
+
+### Tree View
+
+#### `@mui/x-tree-view@7.1.0`
+
+- [TreeView] Do not use outdated version of the state to compute new label first char in `RichTreeView` (#12512) @flaviendelangle
+
+### Docs
+
+- [docs] Add example to add a second icon next to the field's opening button (#12524) @flaviendelangle
+- [docs] Add missing note to Data Grid migration guide (#12557) @romgrk
+- [docs] Fix Charts title for SEO (#12545) @oliviertassinari
+- [docs] Fix small typo (#12558) @diogoparente
+- [docs] Improve codemod related documentation (#12582) @MBilalShafi
+- [docs] Reduce noise in migration docs side navigation (#12552) @cherniavskii
+- [docs] Sync static images from core repository (#12525) @LukasTy
+
+### Core
+
+- [core] Fix `l10n` script on Windows (#12550) @LukasTy
+- [core] Include `DateTimeRangePicker` tag in `releaseChangelog` (#12526) @LukasTy
+- [core] Upgrade monorepo (#12536) @cherniavskii
+
 ## v7.0.0
 
 _Mar 22, 2024_

package/DataGrid/DataGrid.js

@@ -608,6 +608,11 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * The milliseconds throttle delay for resizing the grid.
+   * @default 60
+   */
+  resizeThrottleMs: PropTypes.number,
   /**
    * Row region in pixels to render before/after the viewport
    * @default 150

package/DataGrid/useDataGridProps.js

@@ -54,6 +54,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   pagination: false,
   paginationMode: 'client',
   rowHeight: 52,
+  resizeThrottleMs: 60,
   pageSizeOptions: [25, 50, 100],
   rowSpacingType: 'margin',
   showCellVerticalBorder: false,

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -153,7 +153,9 @@ function GridColumnHeaderItem(props) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -56,7 +56,9 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/_jsxs("div", _extends({

package/components/toolbar/GridToolbarQuickFilter.js

@@ -1,17 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import { getDataGridUtilityClass } from '../../constants';
 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 useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbarQuickFilter']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
 const GridToolbarQuickFilterRoot = styled(TextField, {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
@@ -47,11 +59,13 @@ const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
   const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
   const {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
-      debounceMs = rootProps.filterDebounceMs
+      debounceMs = rootProps.filterDebounceMs,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
@@ -86,6 +100,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
+    className: clsx(className, classes.root),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"

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

@@ -3,7 +3,7 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridDimensions } from './gridDimensionsApi';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'columnHeaderHeight'>;
+type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight'>;
 export type GridDimensionsState = GridDimensions;
 export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridDimensions(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;

package/hooks/features/dimensions/useGridDimensions.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { throttle } from '../../../utils/throttle';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { gridDimensionsSelector } from './gridDimensionsSelectors';
@@ -57,7 +58,7 @@ export function useGridDimensions(apiRef, props) {
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
-  const debouncedSetSavedSize = React.useMemo(() => debounce(setSavedSize, 60), []);
+  const debouncedSetSavedSize = React.useMemo(() => throttle(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
   const previousSize = React.useRef();
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = useEventCallback(dimensions => {

package/hooks/features/editing/useGridRowEditing.js

@@ -45,6 +45,10 @@ export const useGridRowEditing = (apiRef, props) => {
       throw new Error(`MUI X: The row with id=${id} is not in ${mode} mode.`);
     }
   }, [apiRef]);
+  const hasFieldsWithErrors = React.useCallback(rowId => {
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    return Object.values(editingState[rowId]).some(fieldProps => fieldProps.error);
+  }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
     if (!params.isEditable) {
       return;
@@ -86,6 +90,9 @@ export const useGridRowEditing = (apiRef, props) => {
         if (apiRef.current.getRowMode(params.id) === GridRowModes.View) {
           return;
         }
+        if (hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = _extends({}, rowParams, {
           field: params.field,
@@ -94,7 +101,7 @@ export const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     });
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   React.useEffect(() => {
     return () => {
       clearTimeout(focusTimeout.current);
@@ -140,6 +147,9 @@ export const useGridRowEditing = (apiRef, props) => {
         }
       }
       if (reason) {
+        if (reason !== GridRowEditStopReasons.escapeKeyDown && hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const newParams = _extends({}, apiRef.current.getRowParams(params.id), {
           reason,
           field: params.field
@@ -174,7 +184,7 @@ export const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStart', newParams, event);
       }
     }
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   const handleRowEditStart = React.useCallback(params => {
     const {
       id,
@@ -358,8 +368,7 @@ export const useGridRowEditing = (apiRef, props) => {
       prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
-    const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
-    if (hasSomeFieldWithError) {
+    if (hasFieldsWithErrors(id)) {
       prevRowModesModel.current[id].mode = GridRowModes.Edit;
       // Revert the mode in the rowModesModel prop back to "edit"
       updateRowInRowModesModel(id, {

package/index.js

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

package/models/props/DataGridProps.d.ts

@@ -112,6 +112,11 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default true
      */
     rowSelection: boolean;
+    /**
+     * The milliseconds throttle delay for resizing the grid.
+     * @default 60
+     */
+    resizeThrottleMs: number;
     /**
      * If `true`, column filters are disabled.
      * @default false

package/modern/DataGrid/DataGrid.js

@@ -608,6 +608,11 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * The milliseconds throttle delay for resizing the grid.
+   * @default 60
+   */
+  resizeThrottleMs: PropTypes.number,
   /**
    * Row region in pixels to render before/after the viewport
    * @default 150

package/modern/DataGrid/useDataGridProps.js

@@ -54,6 +54,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   pagination: false,
   paginationMode: 'client',
   rowHeight: 52,
+  resizeThrottleMs: 60,
   pageSizeOptions: [25, 50, 100],
   rowSpacingType: 'margin',
   showCellVerticalBorder: false,

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -153,7 +153,9 @@ function GridColumnHeaderItem(props) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({

package/modern/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -56,7 +56,9 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/_jsxs("div", _extends({

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -1,17 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import { getDataGridUtilityClass } from '../../constants';
 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 useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbarQuickFilter']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
 const GridToolbarQuickFilterRoot = styled(TextField, {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
@@ -47,11 +59,13 @@ const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
   const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
   const {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
-      debounceMs = rootProps.filterDebounceMs
+      debounceMs = rootProps.filterDebounceMs,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
@@ -86,6 +100,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
+    className: clsx(className, classes.root),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { throttle } from '../../../utils/throttle';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { gridDimensionsSelector } from './gridDimensionsSelectors';
@@ -57,7 +58,7 @@ export function useGridDimensions(apiRef, props) {
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
-  const debouncedSetSavedSize = React.useMemo(() => debounce(setSavedSize, 60), []);
+  const debouncedSetSavedSize = React.useMemo(() => throttle(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
   const previousSize = React.useRef();
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = useEventCallback(dimensions => {

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

@@ -45,6 +45,10 @@ export const useGridRowEditing = (apiRef, props) => {
       throw new Error(`MUI X: The row with id=${id} is not in ${mode} mode.`);
     }
   }, [apiRef]);
+  const hasFieldsWithErrors = React.useCallback(rowId => {
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    return Object.values(editingState[rowId]).some(fieldProps => fieldProps.error);
+  }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
     if (!params.isEditable) {
       return;
@@ -86,6 +90,9 @@ export const useGridRowEditing = (apiRef, props) => {
         if (apiRef.current.getRowMode(params.id) === GridRowModes.View) {
           return;
         }
+        if (hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = _extends({}, rowParams, {
           field: params.field,
@@ -94,7 +101,7 @@ export const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     });
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   React.useEffect(() => {
     return () => {
       clearTimeout(focusTimeout.current);
@@ -140,6 +147,9 @@ export const useGridRowEditing = (apiRef, props) => {
         }
       }
       if (reason) {
+        if (reason !== GridRowEditStopReasons.escapeKeyDown && hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const newParams = _extends({}, apiRef.current.getRowParams(params.id), {
           reason,
           field: params.field
@@ -174,7 +184,7 @@ export const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStart', newParams, event);
       }
     }
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   const handleRowEditStart = React.useCallback(params => {
     const {
       id,
@@ -358,8 +368,7 @@ export const useGridRowEditing = (apiRef, props) => {
       prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
-    const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
-    if (hasSomeFieldWithError) {
+    if (hasFieldsWithErrors(id)) {
       prevRowModesModel.current[id].mode = GridRowModes.Edit;
       // Revert the mode in the rowModesModel prop back to "edit"
       updateRowInRowModesModel(id, {

package/modern/index.js

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

package/modern/utils/throttle.js

@@ -0,0 +1,19 @@
+export function throttle(func, wait = 166) {
+  let timeout;
+  let lastArgs;
+  const later = () => {
+    timeout = undefined;
+    func(...lastArgs);
+  };
+  function throttled(...args) {
+    lastArgs = args;
+    if (timeout === undefined) {
+      timeout = setTimeout(later, wait);
+    }
+  }
+  throttled.clear = () => {
+    clearTimeout(timeout);
+    timeout = undefined;
+  };
+  return throttled;
+}

package/node/DataGrid/DataGrid.js

@@ -615,6 +615,11 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: _propTypes.default.func,
+  /**
+   * The milliseconds throttle delay for resizing the grid.
+   * @default 60
+   */
+  resizeThrottleMs: _propTypes.default.number,
   /**
    * Row region in pixels to render before/after the viewport
    * @default 150

package/node/DataGrid/useDataGridProps.js

@@ -63,6 +63,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   pagination: false,
   paginationMode: 'client',
   rowHeight: 52,
+  resizeThrottleMs: 60,
   pageSizeOptions: [25, 50, 100],
   rowSpacingType: 'margin',
   showCellVerticalBorder: false,

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -161,7 +161,9 @@ function GridColumnHeaderItem(props) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -64,7 +64,9 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -8,19 +8,31 @@ exports.GridToolbarQuickFilter = GridToolbarQuickFilter;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _filter = require("../../hooks/features/filter");
 var _utils2 = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbarQuickFilter']
+  };
+  return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
+};
 const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
@@ -56,11 +68,13 @@ const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
   const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
   const {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
-      debounceMs = rootProps.filterDebounceMs
+      debounceMs = rootProps.filterDebounceMs,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
@@ -95,6 +109,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
+    className: (0, _clsx.default)(className, classes.root),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _throttle = require("../../../utils/throttle");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _columns = require("../columns");
 var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
@@ -68,7 +69,7 @@ function useGridDimensions(apiRef, props) {
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
-  const debouncedSetSavedSize = React.useMemo(() => (0, _utils.unstable_debounce)(setSavedSize, 60), []);
+  const debouncedSetSavedSize = React.useMemo(() => (0, _throttle.throttle)(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
   const previousSize = React.useRef();
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = (0, _utils.unstable_useEventCallback)(dimensions => {

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

@@ -54,6 +54,10 @@ const useGridRowEditing = (apiRef, props) => {
       throw new Error(`MUI X: The row with id=${id} is not in ${mode} mode.`);
     }
   }, [apiRef]);
+  const hasFieldsWithErrors = React.useCallback(rowId => {
+    const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
+    return Object.values(editingState[rowId]).some(fieldProps => fieldProps.error);
+  }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
     if (!params.isEditable) {
       return;
@@ -95,6 +99,9 @@ const useGridRowEditing = (apiRef, props) => {
         if (apiRef.current.getRowMode(params.id) === _gridEditRowModel.GridRowModes.View) {
           return;
         }
+        if (hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = (0, _extends2.default)({}, rowParams, {
           field: params.field,
@@ -103,7 +110,7 @@ const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     });
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   React.useEffect(() => {
     return () => {
       clearTimeout(focusTimeout.current);
@@ -149,6 +156,9 @@ const useGridRowEditing = (apiRef, props) => {
         }
       }
       if (reason) {
+        if (reason !== _gridRowParams.GridRowEditStopReasons.escapeKeyDown && hasFieldsWithErrors(params.id)) {
+          return;
+        }
         const newParams = (0, _extends2.default)({}, apiRef.current.getRowParams(params.id), {
           reason,
           field: params.field
@@ -183,7 +193,7 @@ const useGridRowEditing = (apiRef, props) => {
         apiRef.current.publishEvent('rowEditStart', newParams, event);
       }
     }
-  }, [apiRef]);
+  }, [apiRef, hasFieldsWithErrors]);
   const handleRowEditStart = React.useCallback(params => {
     const {
       id,
@@ -367,8 +377,7 @@ const useGridRowEditing = (apiRef, props) => {
       prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
       return;
     }
-    const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
-    if (hasSomeFieldWithError) {
+    if (hasFieldsWithErrors(id)) {
       prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
       // Revert the mode in the rowModesModel prop back to "edit"
       updateRowInRowModesModel(id, {

package/node/index.js

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

package/node/utils/throttle.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.throttle = throttle;
+function throttle(func, wait = 166) {
+  let timeout;
+  let lastArgs;
+  const later = () => {
+    timeout = undefined;
+    func(...lastArgs);
+  };
+  function throttled(...args) {
+    lastArgs = args;
+    if (timeout === undefined) {
+      timeout = setTimeout(later, wait);
+    }
+  }
+  throttled.clear = () => {
+    clearTimeout(timeout);
+    timeout = undefined;
+  };
+  return throttled;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",

package/utils/throttle.d.ts

@@ -0,0 +1,4 @@
+export interface Cancelable {
+    clear(): void;
+}
+export declare function throttle<T extends (...args: any[]) => any>(func: T, wait?: number): T & Cancelable;

package/utils/throttle.js

@@ -0,0 +1,19 @@
+export function throttle(func, wait = 166) {
+  let timeout;
+  let lastArgs;
+  const later = () => {
+    timeout = undefined;
+    func(...lastArgs);
+  };
+  function throttled(...args) {
+    lastArgs = args;
+    if (timeout === undefined) {
+      timeout = setTimeout(later, wait);
+    }
+  }
+  throttled.clear = () => {
+    clearTimeout(timeout);
+    timeout = undefined;
+  };
+  return throttled;
+}