@mui/x-data-grid 7.1.0 → 7.1.1

package/CHANGELOG.md

@@ -3,6 +3,107 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.1.1
+
+_Apr 5, 2024_
+
+We'd like to offer a big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Add `setItemExpansion` Tree View API method (#12595) @flaviendelangle
+- 🌍 Improve Persian (fa-IR), Portuguese (pt-BR), and Spanish (es-ES) locale on the Data Grid
+- 🌍 Improve Persian (fa-IR), Portuguese (pt-BR), and Ukrainian (uk-UA) locale on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.1.1`
+
+- [DataGrid] Allow higher packages' props to be used in MIT (#12365) @MBilalShafi
+- [DataGrid] Fix RTL mode (#12583) @romgrk
+- [DataGrid] Fix `ColDefChangesGridNoSnap` demo crash (#12663) @MBilalShafi
+- [DataGrid] Fix server-side filter demo not working (#12662) @MBilalShafi
+- [DataGrid] Log error if `rowCount` is used with client-side pagination (#12448) @michelengelen
+- [DataGrid] Remove `GridFormatterParams` completely (#12660) @romgrk
+- [DataGrid] Restore main slot (#12657) @romgrk
+- [l10n] Improve Persian (fa-IR) locale (#12630) @amirhosseinzf
+- [l10n] Improve Portuguese (pt-BR) locale (#12618) @hugoalkimim
+- [l10n] Improve Spanish (es-ES) locale (#12606) @aitor40
+
+#### `@mui/x-data-grid-pro@7.1.1` [![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.1`.
+
+#### `@mui/x-data-grid-premium@7.1.1` [![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.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.1.1`
+
+- [fields] Fix `readOnly` behavior (#12609) @LukasTy
+- [l10n] Improve Persian (fa-IR) locale (#12632) @misafari
+- [l10n] Improve Portuguese (pt-BR) locale (#12613) @cnHealth
+- [l10n] Improve Ukrainian (uk-UA) locale (#12627) @alexkobylansky
+
+#### `@mui/x-date-pickers-pro@7.1.1` [![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.1`, plus:
+
+- [DateTimeRangePicker] Fix selection on same day (#12604) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.1.1`
+
+- [charts] Fix `tickInterval` usage for y-axis (#12592) @alexfauquette
+- [charts] Fix Scatter series highlight when `id` is a `number` (#12677) @JCQuintas
+- [charts] Fix TS error when using `sx` property on `ChartsTooltip` (#12659) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.1.1`
+
+- [TreeView] Add JSDoc to all `publicAPI` methods (#12649) @flaviendelangle
+- [TreeView] Create `RichTreeViewPro` component (not released yet) (#12610) @flaviendelangle
+- [TreeView] Create pro package (not released yet) (#12240) @flaviendelangle
+- [TreeView] Fix typo in errors (#12623) @alissa-tung
+- [TreeView] New API method: `setItemExpansion` (#12595) @flaviendelangle
+
+### Docs
+
+- [docs] Add a recipe for the `checkboxSelectionVisibleOnly` prop (#12646) @michelengelen
+- [docs] Explain the use of `_action: 'delete'` in `processRowUpdate` (#12670) @michelengelen
+- [docs] Fix formatting and typo on migration guide @oliviertassinari
+- [docs] Fix formatting in changelog @oliviertassinari
+- [docs] Fix grammar in TreeView migration doc (#12615) @joshkel
+- [docs] Fix missing closing props in `PieShapeNoSnap` demo (#12636) @alp-ex
+- [docs] Fix type arguments in Custom Field page (#12619) @Juneezee
+- [docs] Fix typo in `getItemId` prop description (#12637) @flaviendelangle
+- [docs] Make the Charts `margin` usage more visible (#12591) @alexfauquette
+- [docs] Match IE 11 spacing with Material UI @oliviertassinari
+- [docs] Move data grid interfaces to standard API page layout (#12016) @alexfauquette
+- [docs] Remove ` around @default values (#12158) @alexfauquette
+- [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy
+- [docs] Use `TreeItem2` for icon expansion example on `RichTreeView` (#12563) @flaviendelangle
+
+### Core
+
+- [core] Add cherry-pick `master` to `v6` action (#12648) @LukasTy
+- [core] Fix typo in `@mui/x-tree-view-pro/themeAugmentation` (#12674) @flaviendelangle
+- [core] Introduce `describeTreeView` to run test on `SimpleTreeView` and `RichTreeView`, using `TreeItem` and `TreeItem2` + migrate expansion tests (#12428) @flaviendelangle
+- [core] Limit `test-types` CI step allowed memory (#12651) @LukasTy
+- [core] Remove explicit `express` package (#12602) @LukasTy
+- [core] Update to new embedded translations in the docs package (#12232) @Janpot
+- [core] Use PR labels to identify the package a `l10n` PR belongs to (#12639) @LukasTy
+- [core] Use `describeTreeView` for selection tests (#12647) @flaviendelangle
+- [docs-infra] Adjust the links to search for issues (#11995) @michelengelen
+- [infra] Polish support survey experience (#12624) @oliviertassinari
+- [support-infra] Replace author association with a permission check in survey action (#12068) @michelengelen
+- [support-infra] Fix user permission check (#12669) @michelengelen
+- [test] Fix Tree View test import (#12668) @LukasTy
+
 ## 7.1.0
 
 _Mar 28, 2024_
@@ -74,7 +175,7 @@ Same changes as in `@mui/x-date-pickers@7.1.0`, plus:
 - [core] Include `DateTimeRangePicker` tag in `releaseChangelog` (#12526) @LukasTy
 - [core] Upgrade monorepo (#12536) @cherniavskii
 
-## v7.0.0
+## 7.0.0
 
 _Mar 22, 2024_
 
@@ -530,13 +631,13 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 - 🎁 Introduce a new DOM structure for the field components that provides a better accessibility
 - 🚀 Simplify Data Grid DOM structure for improved performance (#12013) @romgrk
-- 🕥 The support for IE11 has been removed (#12151) @flaviendelangle
+- 🕥 The support for IE 11 has been removed (#12151) @flaviendelangle
 - 🐞 Bugfixes
 - 📚 Documentation improvements
 
 ### Breaking changes
 
-- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
+- The support for IE 11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE 11 is no longer included.
 
 ### Data Grid
 
@@ -641,7 +742,7 @@ These components are no longer exported from `@mui/x-charts`:
 
 ### Tree View / `@mui/x-tree-view@7.0.0-beta.4`
 
-- [TreeView] Stop using custom `findIndex` to support IE11 (#12129) @flaviendelangle
+- [TreeView] Stop using custom `findIndex` to support IE 11 (#12129) @flaviendelangle
 
 ### Docs
 
@@ -2871,6 +2972,76 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.9
+
+_Apr 5, 2024_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.9`
+
+- [DataGrid] Remove legacy editing API event: `rowEditCommit` (#12087) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@6.19.9` [![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@6.19.9`.
+
+#### `@mui/x-data-grid-premium@6.19.9` [![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@6.19.9`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.9`
+
+No changes.
+
+#### `@mui/x-date-pickers-pro@6.19.9` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+- [DateRangePicker] Fix selection behavior with single input field when `readOnly` (#12605) @LukasTy
+
+### Docs
+
+- [docs] Add a recipe for the `checkboxSelectionVisibleOnly` prop (#12667) @michelengelen
+- [docs] Explain the use of `_action: 'delete'` in `processRowUpdate` (#12673) @michelengelen
+
+### Core
+
+- [core] Use Circle CI context (#12607) @cherniavskii
+
+## 6.19.8
+
+_Mar 20, 2024_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible.
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.8`
+
+- [DataGrid] Fix `ElementType` usage (#12505) @cherniavskii
+- [DataGrid] Fix cell value formatting on copy (#12483) @sai6855
+- [DataGrid] Fix checkbox selection when filtering (#12485) @g1mishra
+
+#### `@mui/x-data-grid-pro@6.19.8` [![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@6.19.8`.
+
+#### `@mui/x-data-grid-premium@6.19.8` [![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@6.19.8`, plus:
+
+- [DataGridPremium] Add support for confirmation before clipboard paste (#12466) @cherniavskii
+
+### Docs
+
+- [docs] Update links to v7 (#12495) @cherniavskii
+
 ## 6.19.7
 
 _Mar 14, 2024_

package/README.md

@@ -1,6 +1,6 @@
 # MUI X Data Grid
 
-This package is the Community plan edition of the data grid component.
+This package is the Community plan edition of the Data Grid components.
 It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
 
 ## Installation

package/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/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/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/hooks/features/headerFiltering/useGridHeaderFiltering.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { DataGridProcessedPropsWithShared } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const headerFilteringStateInitializer: GridStateInitializer;
-export declare const useGridHeaderFiltering: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'signature'>) => void;
+export declare const useGridHeaderFiltering: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedPropsWithShared, 'signature' | 'headerFilters'>) => void;

package/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/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { DataGridProcessedPropsWithShared } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode' | 'getRowId' | 'experimentalFeatures' | 'signature'>) => void;
+export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedPropsWithShared, 'pagination' | 'paginationMode' | 'getRowId' | 'experimentalFeatures' | 'signature' | 'headerFilters'>) => void;

package/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/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.1.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

@@ -750,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/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/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/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.1.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();
 };

package/modern/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/modern/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/modern/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/node/components/cell/GridCell.js

@@ -168,7 +168,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const cellRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_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 = (0, _cellBorderUtils.shouldCellShowLeftBorder)(position, sectionIndex);

package/node/components/virtualization/GridMainContainer.js

@@ -8,19 +8,26 @@ exports.GridMainContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridAriaAttributes = require("../../hooks/utils/useGridAriaAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 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 Element = (0, _system.styled)('div')({
+const Element = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'Main',
+  overridesResolver: (props, styles) => styles.main
+})({
   flexGrow: 1,
   position: 'relative',
   overflow: 'hidden'
 });
 const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const ariaAttributes = (0, _useGridAriaAttributes.useGridAriaAttributes)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
     ref: ref,
+    ownerState: rootProps,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, {

package/node/components/virtualization/GridTopContainer.js

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

package/node/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -13,7 +13,6 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 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 headerFilteringStateInitializer = (state, props) => (0, _extends2.default)({}, state, {
-  // @ts-expect-error Access `Pro` prop in MIT
   headerFiltering: {
     enabled: props.headerFilters ?? false,
     editing: null,
@@ -23,8 +22,6 @@ const headerFilteringStateInitializer = (state, props) => (0, _extends2.default)
 exports.headerFilteringStateInitializer = headerFilteringStateInitializer;
 const useGridHeaderFiltering = (apiRef, props) => {
   const logger = (0, _utils.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
@@ -34,14 +31,14 @@ const useGridHeaderFiltering = (apiRef, props) => {
       }
       return (0, _extends2.default)({}, 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({
@@ -112,9 +109,9 @@ const useGridHeaderFiltering = (apiRef, props) => {
       isFirstRender.current = false;
     } else {
       apiRef.current.setHeaderFilterState({
-        enabled: isHeaderFilteringEnabled
+        enabled: props.headerFilters ?? false
       });
     }
-  }, [apiRef, isHeaderFilteringEnabled]);
+  }, [apiRef, props.headerFilters]);
 };
 exports.useGridHeaderFiltering = useGridHeaderFiltering;

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

@@ -77,9 +77,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
   const initialCurrentPageRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props).rows;
   const theme = (0, _styles.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/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -50,9 +50,9 @@ const EMPTY_SCROLL_POSITION = {
   left: 0
 };
 const EMPTY_DETAIL_PANELS = exports.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;
 const useGridVirtualScroller = () => {
@@ -104,7 +104,7 @@ const useGridVirtualScroller = () => {
   const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
   const scrollTimeout = (0, _useTimeout.default)();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = (0, _useLazyRef.default)(() => createScrollCache(rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = (0, _useLazyRef.default)(() => 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])
@@ -169,7 +169,7 @@ 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);
 
@@ -651,7 +651,7 @@ function areRenderContextsEqual(context1, context2) {
 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) {
@@ -673,7 +673,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/node/index.js

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

package/node/internals/utils/propValidation.js

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateProps = exports.propValidatorsDataGrid = void 0;
-const propValidatorsDataGrid = exports.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();
+exports.validateProps = exports.propValidatorsDataGrid = exports.clearWarningsCache = void 0;
+var _utils = require("../../utils/utils");
+var _useGridApiEventHandler = require("../../hooks/utils/useGridApiEventHandler");
+const propValidatorsDataGrid = exports.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 === _useGridApiEventHandler.GridSignature.DataGrid && props.paginationMode === 'client' && (0, _utils.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);
   }
 };
 const validateProps = (props, validators) => {
@@ -23,4 +25,8 @@ const validateProps = (props, validators) => {
     }
   });
 };
-exports.validateProps = validateProps;
+exports.validateProps = validateProps;
+const clearWarningsCache = () => {
+  warnedOnceCache.clear();
+};
+exports.clearWarningsCache = clearWarningsCache;

package/node/locales/esES.js

@@ -36,10 +36,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/node/locales/faIR.js

@@ -36,10 +36,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/node/locales/ptBR.js

@@ -36,10 +36,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.1.0",
-  "description": "The community edition of the data grid component (MUI X).",
+  "version": "7.1.1",
+  "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
   "license": "MIT",