@mui/x-data-grid 7.0.0 → 7.1.1

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -38,9 +38,9 @@ const EMPTY_SCROLL_POSITION = {
   left: 0
 };
 export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
-const createScrollCache = (rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
+const createScrollCache = (mode, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
   direction: ScrollDirection.NONE,
-  buffer: bufferForDirection(ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
+  buffer: bufferForDirection(mode, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
 const isJSDOM = typeof window !== 'undefined' ? /jsdom/.test(window.navigator.userAgent) : false;
 export const useGridVirtualScroller = () => {
@@ -92,7 +92,7 @@ export const useGridVirtualScroller = () => {
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const scrollTimeout = useTimeout();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = useLazyRef(() => createScrollCache(rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = useLazyRef(() => createScrollCache(theme.direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const focusedCell = {
     rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
     columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
@@ -157,7 +157,7 @@ export const useGridVirtualScroller = () => {
       }
     }
     scrollCache.direction = direction;
-    scrollCache.buffer = bufferForDirection(direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    scrollCache.buffer = bufferForDirection(theme.direction, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
@@ -638,7 +638,7 @@ export function areRenderContextsEqual(context1, context2) {
 export function computeOffsetLeft(columnPositions, renderContext, direction, pinnedLeftLength) {
   const factor = direction === 'ltr' ? 1 : -1;
   const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
-  return left;
+  return Math.abs(left);
 }
 function directionForDelta(dx, dy) {
   if (dx === 0 && dy === 0) {
@@ -660,7 +660,18 @@ function directionForDelta(dx, dy) {
   }
   /* eslint-enable */
 }
-function bufferForDirection(direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
+function bufferForDirection(mode, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
+  if (mode === 'rtl') {
+    switch (direction) {
+      case ScrollDirection.LEFT:
+        direction = ScrollDirection.RIGHT;
+        break;
+      case ScrollDirection.RIGHT:
+        direction = ScrollDirection.LEFT;
+        break;
+      default:
+    }
+  }
   switch (direction) {
     case ScrollDirection.NONE:
       return {

package/index.js

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

package/internals/index.d.ts

@@ -65,7 +65,7 @@ export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';
-export type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, } from '../models/props/DataGridProps';
+export type { DataGridProSharedPropsWithDefaultValue, DataGridPremiumSharedPropsWithDefaultValue, GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, } from '../models/props/DataGridProps';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized } from '../utils/createSelector';

package/internals/utils/propValidation.d.ts

@@ -2,3 +2,4 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 export type PropValidator<TProps> = (props: TProps) => string | undefined;
 export declare const propValidatorsDataGrid: PropValidator<DataGridProcessedProps>[];
 export declare const validateProps: <TProps>(props: TProps, validators: PropValidator<TProps>[]) => void;
+export declare const clearWarningsCache: () => void;

package/internals/utils/propValidation.js

@@ -1,9 +1,11 @@
-export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined];
-const warnedOnceMap = new Set();
+import { isNumber } from '../../utils/utils';
+import { GridSignature } from '../../hooks/utils/useGridApiEventHandler';
+export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && 'MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect. `rowCount` is only meant to be used with `paginationMode="server"`.' || undefined];
+const warnedOnceCache = new Set();
 const warnOnce = message => {
-  if (!warnedOnceMap.has(message)) {
+  if (!warnedOnceCache.has(message)) {
     console.error(message);
-    warnedOnceMap.add(message);
+    warnedOnceCache.add(message);
   }
 };
 export const validateProps = (props, validators) => {
@@ -16,4 +18,7 @@ export const validateProps = (props, validators) => {
       warnOnce(warning);
     }
   });
+};
+export const clearWarningsCache = () => {
+  warnedOnceCache.clear();
 };

package/locales/esES.js

@@ -30,10 +30,9 @@ const esESGrid = {
   toolbarExportPrint: 'Imprimir',
   toolbarExportExcel: 'Descargar como Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Buscar',
+  columnsManagementNoColumns: 'Sin columnas',
+  columnsManagementShowHideAllText: 'Mostrar/Ocultar todas',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/locales/faIR.js

@@ -30,10 +30,9 @@ const faIRGrid = {
   toolbarExportPrint: 'چاپ',
   toolbarExportExcel: 'دانلود به صورت اکسل',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'جستجو',
+  columnsManagementNoColumns: 'بدون سطر',
+  columnsManagementShowHideAllText: 'نمایش/مخفی کردن همه',
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelRemoveAll: 'حذف همه',

package/locales/ptBR.js

@@ -30,10 +30,9 @@ const ptBRGrid = {
   toolbarExportPrint: 'Imprimir',
   toolbarExportExcel: 'Baixar como Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Buscar',
+  columnsManagementNoColumns: 'Nenhuma coluna',
+  columnsManagementShowHideAllText: 'Mostrar/Ocultar Todas',
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/models/gridExport.d.ts

@@ -23,7 +23,7 @@ export interface GridExportOptions {
 export interface GridFileExportOptions<Api extends GridApiCommon = GridApiCommunity> extends GridExportOptions {
     /**
      * The string used as the file name.
-     * @default `document.title`
+     * @default document.title
      */
     fileName?: string;
     /**
@@ -61,7 +61,7 @@ export interface GridCsvExportOptions extends GridFileExportOptions {
     delimiter?: string;
     /**
      * The string used as the file name.
-     * @default `document.title`
+     * @default document.title
      */
     fileName?: string;
     /**

package/models/gridFilterModel.d.ts

@@ -12,18 +12,18 @@ export interface GridFilterModel {
     /**
      * - `GridLogicOperator.And`: the row must pass all the filter items.
      * - `GridLogicOperator.Or`: the row must pass at least on filter item.
-     * @default `GridLogicOperator.And`
+     * @default GridLogicOperator.And
      */
     logicOperator?: GridLogicOperator;
     /**
      * values used to quick filter rows
-     * @default `[]`
+     * @default []
      */
     quickFilterValues?: any[];
     /**
      * - `GridLogicOperator.And`: the row must pass all the values.
      * - `GridLogicOperator.Or`: the row must pass at least one value.
-     * @default `GridLogicOperator.And`
+     * @default GridLogicOperator.And
      */
     quickFilterLogicOperator?: GridLogicOperator;
     /**

package/models/params/gridCellParams.d.ts

@@ -81,28 +81,6 @@ export interface GridRenderEditCellParams<R extends GridValidRowModel = any, V =
      */
     api: GridApiCommunity;
 }
-/**
- * Object passed as parameter in the column [[GridColDef]] value formatter callback.
- */
-export interface GridValueFormatterParams<V = any> {
-    /**
-     * The grid row id.
-     * It is not available when the value formatter is called by the filter panel.
-     */
-    id?: GridRowId;
-    /**
-     * The column field of the cell that triggered the event.
-     */
-    field: string;
-    /**
-     * The cell value, if the column has valueGetter it is the value returned by it.
-     */
-    value: V;
-    /**
-     * GridApi that let you manipulate the grid.
-     */
-    api: GridApiCommunity;
-}
 /**
  * Object passed as parameter in the column [[GridColDef]] edit cell props change callback.
  */

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
@@ -745,3 +750,22 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onColumnWidthChange?: GridEventListener<'columnWidthChange'>;
 }
+export interface DataGridProSharedPropsWithDefaultValue {
+    /**
+     * If `true`, enables the data grid filtering on header feature.
+     * @default false
+     */
+    headerFilters: boolean;
+}
+export interface DataGridPremiumSharedPropsWithDefaultValue {
+    /**
+     * If `true`, the cell selection mode is enabled.
+     * @default false
+     */
+    cellSelection: boolean;
+}
+/**
+ * Contains the commercial packages' props shared in the MIT version.
+ */
+export interface DataGridProcessedPropsWithShared extends DataGridProcessedProps, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {
+}

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/cell/GridCell.js

@@ -159,7 +159,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const cellRef = React.useRef(null);
   const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
-  // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
   const isSelectionMode = rootProps.cellSelection ?? false;
   const position = gridPinnedColumnPositionLookup[pinnedPosition];
   const showLeftBorder = shouldCellShowLeftBorder(position, sectionIndex);

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/components/virtualization/GridMainContainer.js

@@ -1,17 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Element = styled('div')({
+const Element = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Main',
+  overridesResolver: (props, styles) => styles.main
+})({
   flexGrow: 1,
   position: 'relative',
   overflow: 'hidden'
 });
 export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const ariaAttributes = useGridAriaAttributes();
+  const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsx(Element, _extends({
     ref: ref,
+    ownerState: rootProps,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, {

package/modern/components/virtualization/GridTopContainer.js

@@ -21,6 +21,7 @@ const Element = styled('div')({
     zIndex: 5,
     bottom: 0,
     left: 0,
+    right: 0,
     height: 1,
     width: 'var(--DataGrid-rowWidth)',
     backgroundColor: 'var(--DataGrid-rowBorderColor)'

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/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -4,7 +4,6 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils';
 import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 export const headerFilteringStateInitializer = (state, props) => _extends({}, state, {
-  // @ts-expect-error Access `Pro` prop in MIT
   headerFiltering: {
     enabled: props.headerFilters ?? false,
     editing: null,
@@ -13,8 +12,6 @@ export const headerFilteringStateInitializer = (state, props) => _extends({}, st
 });
 export const useGridHeaderFiltering = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridHeaderFiltering');
-  // @ts-expect-error Access `Pro` prop in MIT
-  const isHeaderFilteringEnabled = props.headerFilters ?? false;
   const setHeaderFilterState = React.useCallback(headerFilterState => {
     apiRef.current.setState(state => {
       // Safety check to avoid MIT users from using it
@@ -24,14 +21,14 @@ export const useGridHeaderFiltering = (apiRef, props) => {
       }
       return _extends({}, state, {
         headerFiltering: {
-          enabled: isHeaderFilteringEnabled ?? false,
+          enabled: props.headerFilters ?? false,
           editing: headerFilterState.editing ?? null,
           menuOpen: headerFilterState.menuOpen ?? null
         }
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, props.signature, isHeaderFilteringEnabled]);
+  }, [apiRef, props.signature, props.headerFilters]);
   const startHeaderFilterEditMode = React.useCallback(field => {
     logger.debug(`Starting edit mode on header filter for field: ${field}`);
     apiRef.current.setHeaderFilterState({
@@ -102,8 +99,8 @@ export const useGridHeaderFiltering = (apiRef, props) => {
       isFirstRender.current = false;
     } else {
       apiRef.current.setHeaderFilterState({
-        enabled: isHeaderFilteringEnabled
+        enabled: props.headerFilters ?? false
       });
     }
-  }, [apiRef, isHeaderFilteringEnabled]);
+  }, [apiRef, props.headerFilters]);
 };

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

@@ -69,9 +69,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
   const theme = useTheme();
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
-  const headerFilteringEnabled =
-  // @ts-expect-error // TODO move relevant code to the `DataGridPro`
-  props.signature !== 'DataGrid' && props.headerFilters;
+  const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
   /**
    * @param {number} colIndex Index of the column to focus

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

@@ -38,9 +38,9 @@ const EMPTY_SCROLL_POSITION = {
   left: 0
 };
 export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
-const createScrollCache = (rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
+const createScrollCache = (mode, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
   direction: ScrollDirection.NONE,
-  buffer: bufferForDirection(ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
+  buffer: bufferForDirection(mode, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
 const isJSDOM = typeof window !== 'undefined' ? /jsdom/.test(window.navigator.userAgent) : false;
 export const useGridVirtualScroller = () => {
@@ -92,7 +92,7 @@ export const useGridVirtualScroller = () => {
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const scrollTimeout = useTimeout();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = useLazyRef(() => createScrollCache(rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = useLazyRef(() => createScrollCache(theme.direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const focusedCell = {
     rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
     columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
@@ -157,7 +157,7 @@ export const useGridVirtualScroller = () => {
       }
     }
     scrollCache.direction = direction;
-    scrollCache.buffer = bufferForDirection(direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    scrollCache.buffer = bufferForDirection(theme.direction, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
@@ -638,7 +638,7 @@ export function areRenderContextsEqual(context1, context2) {
 export function computeOffsetLeft(columnPositions, renderContext, direction, pinnedLeftLength) {
   const factor = direction === 'ltr' ? 1 : -1;
   const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
-  return left;
+  return Math.abs(left);
 }
 function directionForDelta(dx, dy) {
   if (dx === 0 && dy === 0) {
@@ -660,7 +660,18 @@ function directionForDelta(dx, dy) {
   }
   /* eslint-enable */
 }
-function bufferForDirection(direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
+function bufferForDirection(mode, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
+  if (mode === 'rtl') {
+    switch (direction) {
+      case ScrollDirection.LEFT:
+        direction = ScrollDirection.RIGHT;
+        break;
+      case ScrollDirection.RIGHT:
+        direction = ScrollDirection.LEFT;
+        break;
+      default:
+    }
+  }
   switch (direction) {
     case ScrollDirection.NONE:
       return {

package/modern/index.js

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

package/modern/internals/utils/propValidation.js

@@ -1,9 +1,11 @@
-export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined];
-const warnedOnceMap = new Set();
+import { isNumber } from '../../utils/utils';
+import { GridSignature } from '../../hooks/utils/useGridApiEventHandler';
+export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && 'MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect. `rowCount` is only meant to be used with `paginationMode="server"`.' || undefined];
+const warnedOnceCache = new Set();
 const warnOnce = message => {
-  if (!warnedOnceMap.has(message)) {
+  if (!warnedOnceCache.has(message)) {
     console.error(message);
-    warnedOnceMap.add(message);
+    warnedOnceCache.add(message);
   }
 };
 export const validateProps = (props, validators) => {
@@ -16,4 +18,7 @@ export const validateProps = (props, validators) => {
       warnOnce(warning);
     }
   });
+};
+export const clearWarningsCache = () => {
+  warnedOnceCache.clear();
 };