@mui/x-data-grid 7.6.2 → 7.7.0

package/CHANGELOG.md

@@ -3,6 +3,87 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.7.0
+
+_Jun 13, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Allow customization of the Pickers month and the year buttons
+- 🌍 Improve Persian (fa-IR), Portuguese (pt-PT), and Russian (ru-RU) locales on the Data Grid
+- 🌍 Improve Korean (ko-KR) and Persian (fa-IR) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.7.0`
+
+- [DataGrid] Add `getFilterState` method (#13418) @cherniavskii
+- [DataGrid] Do not show resize separators for column groups (#13455) @cherniavskii
+- [l10n] Improve Persian (fa-IR) locale (#13402) @fakhamatia
+- [l10n] Improve Portuguese (pt-PT) locale (#13384) @olavocarvalho
+- [l10n] Improve Russian (ru-RU) locale (#11210) @dastan-akhmetov-scity
+
+#### `@mui/x-data-grid-pro@7.7.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.7.0`, plus:
+
+- [DataGridPro] Do not render detail panel if the focused cell is not visible (#13456) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.7.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.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.7.0`
+
+- [l10n] Improve Korean (ko-KR) locale (#13452) @ryxxn
+- [l10n] Improve Persian (fa-IR) locale (#13402) @fakhamatia
+- [pickers] Allow to customize the month and the year buttons (#13321) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.7.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.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.7.0`
+
+- [charts] Add watermark on the pro `ResponsiveChartContainer` (#13398) @alexfauquette
+- [charts] Allow to specify y-axis configuration (#13438) @alexfauquette
+- [charts] Fix eslint for react compiler (#13444) @alexfauquette
+- [charts] Improve themeAugmentation typing (#13433) @noraleonte
+- [charts] Move the `ZAxisContextProvider` by default in the `ChartContainer` (#13465) @alexfauquette
+- [charts] Use plugins to define series extremum and colors (#13397) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.7.0`
+
+- [TreeView] Improve TypeScript for plugins (#13380) @flaviendelangle
+- [TreeView] Improve the typing of the cancelable events (#13152) @flaviendelangle
+- [TreeView] Prepare support for PigmentCSS (#13412) @flaviendelangle
+- [TreeView] Refactor the tree view internals to prepare for headless API (#13311) @flaviendelangle
+
+### Docs
+
+- [docs] Add `renderHeader` recipe to the Master Details docs (#13370) @michelengelen
+- [docs] Add lazy loading detail panel demo (#13453) @cherniavskii
+- [docs] Add small edits to the Data Grid overview page (#13060) @danilo-leal
+- [docs] Update a11y pages description (#13417) @danilo-leal
+- [docs] improve the writing on the "Quick filter outside of the grid" example (#13155) @michelengelen
+
+### Core
+
+- [core] Add `eslint-plugin-react-compiler` experimental version and rules (#13415) @JCQuintas
+- [core] Minor setup cleanup (#13467) @LukasTy
+- [infra] Adjust CI setup (#13448) @LukasTy
+- [test] Add tests for the custom slots of `TreeItem2` (#13314) @flaviendelangle
+
 ## 7.6.2
 
 _Jun 6, 2024_

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -127,7 +127,7 @@ function GridColumnGroupHeader(props) {
     width: width,
     columnMenuIconButton: null,
     columnTitleIconButtons: null,
-    resizable: true,
+    resizable: false,
     label: label,
     "aria-colspan": fields.length
     // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=

package/hooks/features/filter/gridFilterUtils.js

@@ -210,7 +210,7 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   return function isRowMatchingQuickFilter(row, shouldApplyFilter) {
     const result = {};
 
-    /* eslint-disable no-restricted-syntax, no-labels */
+    /* eslint-disable no-labels */
     outer: for (let v = 0; v < quickFilterValues.length; v += 1) {
       const filterValue = quickFilterValues[v];
       for (let i = 0; i < appliersPerField.length; i += 1) {
@@ -240,8 +240,6 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
       }
       result[filterValue] = false;
     }
-    /* eslint-enable no-restricted-syntax, no-labels */
-
     return result;
   };
 };

package/hooks/features/filter/useGridFilter.js

@@ -59,13 +59,9 @@ export const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null;
-      const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
-        isRowMatchingFilters,
-        filterModel: filterModel ?? getDefaultGridFilterModel()
-      });
+      const filterState = apiRef.current.getFilterState(filterModel);
       const newState = _extends({}, state, {
-        filter: _extends({}, state.filter, filteringResult)
+        filter: _extends({}, state.filter, filterState)
       });
       const visibleRowsLookupState = getVisibleRowsLookupState(apiRef, newState);
       return _extends({}, newState, {
@@ -73,7 +69,7 @@ export const useGridFilter = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('filteredRowsSet');
-  }, [apiRef, props.filterMode, props.disableEval]);
+  }, [apiRef]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;
@@ -203,6 +199,17 @@ export const useGridFilter = (apiRef, props) => {
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
+  const getFilterState = React.useCallback(inputFilterModel => {
+    const filterModel = sanitizeFilterModel(inputFilterModel, props.disableMultipleColumnsFiltering, apiRef);
+    const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null;
+    const filterResult = apiRef.current.applyStrategyProcessor('filtering', {
+      isRowMatchingFilters,
+      filterModel: filterModel ?? getDefaultGridFilterModel()
+    });
+    return _extends({}, filterResult, {
+      filterModel
+    });
+  }, [props.disableMultipleColumnsFiltering, props.filterMode, props.disableEval, apiRef]);
   const filterApi = {
     setFilterLogicOperator,
     unstable_applyFilters: applyFilters,
@@ -213,7 +220,8 @@ export const useGridFilter = (apiRef, props) => {
     showFilterPanel,
     hideFilterPanel,
     setQuickFilterValues,
-    ignoreDiacritics: props.ignoreDiacritics
+    ignoreDiacritics: props.ignoreDiacritics,
+    getFilterState
   };
   useGridApiMethod(apiRef, filterApi, 'public');
 

package/hooks/features/rows/useGridRowsMeta.js

@@ -128,7 +128,7 @@ export const useGridRowsMeta = (apiRef, props) => {
       positions.push(acc);
       let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
-      /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
+      /* eslint-disable-next-line guard-for-in */
       for (const key in processedSizes) {
         const value = processedSizes[key];
         if (key !== 'baseCenter') {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -340,6 +340,9 @@ export const useGridVirtualScroller = () => {
         isLastVisible: isLastVisible,
         isNotVisible: isNotVisible
       }, rowProps), id));
+      if (isNotVisible) {
+        return;
+      }
       const panel = panels.get(id);
       if (panel) {
         rows.push(panel);

package/index.js

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

package/locales/beBY.js

@@ -1,10 +1,10 @@
 import { beBYCore } from './coreLocales';
 import { getGridLocalization } from '../utils/getGridLocalization';
 const getPluralForm = (count, options) => {
-  let pluralForm = options.other;
+  let pluralForm = options.many;
   const lastDigit = count % 10;
   if (lastDigit > 1 && lastDigit < 5 && (count < 10 || count > 20)) {
-    pluralForm = options.twoToFour;
+    pluralForm = options.few;
   } else if (lastDigit === 1 && count % 100 !== 11) {
     pluralForm = options.one;
   }
@@ -30,8 +30,8 @@ const beBYGrid = {
   toolbarFiltersTooltipShow: 'Паказаць фільтры',
   toolbarFiltersTooltipActive: count => getPluralForm(count, {
     one: 'актыўны фільтр',
-    twoToFour: 'актыўных фільтра',
-    other: 'актыўных фільтраў'
+    few: 'актыўных фільтра',
+    many: 'актыўных фільтраў'
   }),
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Пошук…',
@@ -118,16 +118,16 @@ const beBYGrid = {
   // Column header text
   columnHeaderFiltersTooltipActive: count => getPluralForm(count, {
     one: 'актыўны фільтр',
-    twoToFour: 'актыўных фільтра',
-    other: 'актыўных фільтраў'
+    few: 'актыўных фільтра',
+    many: 'актыўных фільтраў'
   }),
   columnHeaderFiltersLabel: 'Паказаць фільтры',
   columnHeaderSortIconLabel: 'Сартыраваць',
   // Rows selected footer text
   footerRowSelected: count => getPluralForm(count, {
     one: 'абраны радок',
-    twoToFour: 'абраных радка',
-    other: 'абраных радкоў'
+    few: 'абраных радка',
+    many: 'абраных радкоў'
   }),
   // Total row amount footer text
   footerTotalRows: 'Усяго радкоў:',

package/locales/faIR.js

@@ -33,8 +33,7 @@ const faIRGrid = {
   columnsManagementSearchTitle: 'جستجو',
   columnsManagementNoColumns: 'بدون سطر',
   columnsManagementShowHideAllText: 'نمایش/مخفی کردن همه',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'بازنشانی',
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelRemoveAll: 'حذف همه',

package/locales/ptBR.js

@@ -33,8 +33,7 @@ const ptBRGrid = {
   columnsManagementSearchTitle: 'Buscar',
   columnsManagementNoColumns: 'Nenhuma coluna',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar Todas',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Redefinir',
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/locales/ruRU.js

@@ -1,5 +1,16 @@
 import { ruRU as ruRUCore } from '@mui/material/locale';
 import { getGridLocalization } from '../utils/getGridLocalization';
+function getPluralForm(count, options) {
+  const penultimateDigit = Math.floor(count / 10) % 10;
+  const lastDigit = count % 10;
+  let pluralForm = options.many;
+  if (penultimateDigit !== 1 && lastDigit > 1 && lastDigit < 5) {
+    pluralForm = options.few;
+  } else if (penultimateDigit !== 1 && lastDigit === 1) {
+    pluralForm = options.one;
+  }
+  return `${count} ${pluralForm}`;
+}
 const ruRUGrid = {
   // Root
   noRowsLabel: 'Нет строк',
@@ -18,16 +29,11 @@ const ruRUGrid = {
   toolbarFiltersLabel: 'Показать фильтры',
   toolbarFiltersTooltipHide: 'Скрыть фильтры',
   toolbarFiltersTooltipShow: 'Показать фильтры',
-  toolbarFiltersTooltipActive: count => {
-    let pluralForm = 'активных фильтров';
-    const lastDigit = count % 10;
-    if (lastDigit > 1 && lastDigit < 5) {
-      pluralForm = 'активных фильтра';
-    } else if (lastDigit === 1) {
-      pluralForm = 'активный фильтр';
-    }
-    return `${count} ${pluralForm}`;
-  },
+  toolbarFiltersTooltipActive: count => getPluralForm(count, {
+    one: 'активный фильтр',
+    few: 'активных фильтра',
+    many: 'активных фильтров'
+  }),
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Поиск…',
   toolbarQuickFilterLabel: 'Поиск',
@@ -109,29 +115,19 @@ const ruRUGrid = {
   columnMenuSortAsc: 'Сортировать по возрастанию',
   columnMenuSortDesc: 'Сортировать по убыванию',
   // Column header text
-  columnHeaderFiltersTooltipActive: count => {
-    let pluralForm = 'активных фильтров';
-    const lastDigit = count % 10;
-    if (lastDigit > 1 && lastDigit < 5) {
-      pluralForm = 'активных фильтра';
-    } else if (lastDigit === 1) {
-      pluralForm = 'активный фильтр';
-    }
-    return `${count} ${pluralForm}`;
-  },
+  columnHeaderFiltersTooltipActive: count => getPluralForm(count, {
+    one: 'активный фильтр',
+    few: 'активных фильтра',
+    many: 'активных фильтров'
+  }),
   columnHeaderFiltersLabel: 'Показать фильтры',
   columnHeaderSortIconLabel: 'Сортировать',
   // Rows selected footer text
-  footerRowSelected: count => {
-    let pluralForm = 'строк выбрано';
-    const lastDigit = count % 10;
-    if (lastDigit > 1 && lastDigit < 5) {
-      pluralForm = 'строки выбраны';
-    } else if (lastDigit === 1) {
-      pluralForm = 'строка выбрана';
-    }
-    return `${count} ${pluralForm}`;
-  },
+  footerRowSelected: count => getPluralForm(count, {
+    one: 'строка выбрана',
+    few: 'строки выбраны',
+    many: 'строк выбрано'
+  }),
   // Total row amount footer text
   footerTotalRows: 'Всего строк:',
   // Total visible row amount footer text

package/locales/ukUA.js

@@ -1,15 +1,16 @@
 import { ukUA as ukUACore } from '@mui/material/locale';
 import { getGridLocalization } from '../utils/getGridLocalization';
-const getPluralForm = (count, options) => {
-  let pluralForm = options.many;
+function getPluralForm(count, options) {
+  const penultimateDigit = Math.floor(count / 10) % 10;
   const lastDigit = count % 10;
-  if (lastDigit > 1 && lastDigit < 5) {
+  let pluralForm = options.many;
+  if (penultimateDigit !== 1 && lastDigit > 1 && lastDigit < 5) {
     pluralForm = options.few;
-  } else if (lastDigit === 1) {
+  } else if (penultimateDigit !== 1 && lastDigit === 1) {
     pluralForm = options.one;
   }
   return `${count} ${pluralForm}`;
-};
+}
 const ukUAGrid = {
   // Root
   noRowsLabel: 'Немає рядків',

package/models/api/gridFilterApi.d.ts

@@ -2,6 +2,7 @@ import { GridFilterModel } from '../gridFilterModel';
 import { GridFilterItem, GridLogicOperator } from '../gridFilterItem';
 import { GridControlledStateReasonLookup } from '../events';
 import type { DataGridProcessedProps } from '../props/DataGridProps';
+import { GridStateCommunity } from '../gridStateCommunity';
 /**
  * The filter API interface that is available in the grid [[apiRef]].
  */
@@ -57,4 +58,10 @@ export interface GridFilterApi {
      * Returns the value of the `ignoreDiacritics` prop.
      */
     ignoreDiacritics: DataGridProcessedProps['ignoreDiacritics'];
+    /**
+     * Returns the filter state for the given filter model without applying it to the data grid.
+     * @param {GridFilterModel} filterModel The filter model to get the state for.
+     * @returns {GridStateCommunity['filter']} The filter state.
+     */
+    getFilterState: (filterModel: GridFilterModel) => GridStateCommunity['filter'];
 }

package/modern/components/columnHeaders/GridColumnGroupHeader.js

@@ -127,7 +127,7 @@ function GridColumnGroupHeader(props) {
     width: width,
     columnMenuIconButton: null,
     columnTitleIconButtons: null,
-    resizable: true,
+    resizable: false,
     label: label,
     "aria-colspan": fields.length
     // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=

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

@@ -210,7 +210,7 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   return function isRowMatchingQuickFilter(row, shouldApplyFilter) {
     const result = {};
 
-    /* eslint-disable no-restricted-syntax, no-labels */
+    /* eslint-disable no-labels */
     outer: for (let v = 0; v < quickFilterValues.length; v += 1) {
       const filterValue = quickFilterValues[v];
       for (let i = 0; i < appliersPerField.length; i += 1) {
@@ -240,8 +240,6 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
       }
       result[filterValue] = false;
     }
-    /* eslint-enable no-restricted-syntax, no-labels */
-
     return result;
   };
 };

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

@@ -59,13 +59,9 @@ export const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null;
-      const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
-        isRowMatchingFilters,
-        filterModel: filterModel ?? getDefaultGridFilterModel()
-      });
+      const filterState = apiRef.current.getFilterState(filterModel);
       const newState = _extends({}, state, {
-        filter: _extends({}, state.filter, filteringResult)
+        filter: _extends({}, state.filter, filterState)
       });
       const visibleRowsLookupState = getVisibleRowsLookupState(apiRef, newState);
       return _extends({}, newState, {
@@ -73,7 +69,7 @@ export const useGridFilter = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('filteredRowsSet');
-  }, [apiRef, props.filterMode, props.disableEval]);
+  }, [apiRef]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;
@@ -203,6 +199,17 @@ export const useGridFilter = (apiRef, props) => {
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
+  const getFilterState = React.useCallback(inputFilterModel => {
+    const filterModel = sanitizeFilterModel(inputFilterModel, props.disableMultipleColumnsFiltering, apiRef);
+    const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null;
+    const filterResult = apiRef.current.applyStrategyProcessor('filtering', {
+      isRowMatchingFilters,
+      filterModel: filterModel ?? getDefaultGridFilterModel()
+    });
+    return _extends({}, filterResult, {
+      filterModel
+    });
+  }, [props.disableMultipleColumnsFiltering, props.filterMode, props.disableEval, apiRef]);
   const filterApi = {
     setFilterLogicOperator,
     unstable_applyFilters: applyFilters,
@@ -213,7 +220,8 @@ export const useGridFilter = (apiRef, props) => {
     showFilterPanel,
     hideFilterPanel,
     setQuickFilterValues,
-    ignoreDiacritics: props.ignoreDiacritics
+    ignoreDiacritics: props.ignoreDiacritics,
+    getFilterState
   };
   useGridApiMethod(apiRef, filterApi, 'public');
 

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -128,7 +128,7 @@ export const useGridRowsMeta = (apiRef, props) => {
       positions.push(acc);
       let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
-      /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
+      /* eslint-disable-next-line guard-for-in */
       for (const key in processedSizes) {
         const value = processedSizes[key];
         if (key !== 'baseCenter') {

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

@@ -340,6 +340,9 @@ export const useGridVirtualScroller = () => {
         isLastVisible: isLastVisible,
         isNotVisible: isNotVisible
       }, rowProps), id));
+      if (isNotVisible) {
+        return;
+      }
       const panel = panels.get(id);
       if (panel) {
         rows.push(panel);

package/modern/index.js

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

package/modern/locales/beBY.js

@@ -1,10 +1,10 @@
 import { beBYCore } from './coreLocales';
 import { getGridLocalization } from '../utils/getGridLocalization';
 const getPluralForm = (count, options) => {
-  let pluralForm = options.other;
+  let pluralForm = options.many;
   const lastDigit = count % 10;
   if (lastDigit > 1 && lastDigit < 5 && (count < 10 || count > 20)) {
-    pluralForm = options.twoToFour;
+    pluralForm = options.few;
   } else if (lastDigit === 1 && count % 100 !== 11) {
     pluralForm = options.one;
   }
@@ -30,8 +30,8 @@ const beBYGrid = {
   toolbarFiltersTooltipShow: 'Паказаць фільтры',
   toolbarFiltersTooltipActive: count => getPluralForm(count, {
     one: 'актыўны фільтр',
-    twoToFour: 'актыўных фільтра',
-    other: 'актыўных фільтраў'
+    few: 'актыўных фільтра',
+    many: 'актыўных фільтраў'
   }),
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Пошук…',
@@ -118,16 +118,16 @@ const beBYGrid = {
   // Column header text
   columnHeaderFiltersTooltipActive: count => getPluralForm(count, {
     one: 'актыўны фільтр',
-    twoToFour: 'актыўных фільтра',
-    other: 'актыўных фільтраў'
+    few: 'актыўных фільтра',
+    many: 'актыўных фільтраў'
   }),
   columnHeaderFiltersLabel: 'Паказаць фільтры',
   columnHeaderSortIconLabel: 'Сартыраваць',
   // Rows selected footer text
   footerRowSelected: count => getPluralForm(count, {
     one: 'абраны радок',
-    twoToFour: 'абраных радка',
-    other: 'абраных радкоў'
+    few: 'абраных радка',
+    many: 'абраных радкоў'
   }),
   // Total row amount footer text
   footerTotalRows: 'Усяго радкоў:',

package/modern/locales/faIR.js

@@ -33,8 +33,7 @@ const faIRGrid = {
   columnsManagementSearchTitle: 'جستجو',
   columnsManagementNoColumns: 'بدون سطر',
   columnsManagementShowHideAllText: 'نمایش/مخفی کردن همه',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'بازنشانی',
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelRemoveAll: 'حذف همه',

package/modern/locales/ptBR.js

@@ -33,8 +33,7 @@ const ptBRGrid = {
   columnsManagementSearchTitle: 'Buscar',
   columnsManagementNoColumns: 'Nenhuma coluna',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar Todas',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Redefinir',
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/modern/locales/ruRU.js

@@ -1,5 +1,16 @@
 import { ruRU as ruRUCore } from '@mui/material/locale';
 import { getGridLocalization } from '../utils/getGridLocalization';
+function getPluralForm(count, options) {
+  const penultimateDigit = Math.floor(count / 10) % 10;
+  const lastDigit = count % 10;
+  let pluralForm = options.many;
+  if (penultimateDigit !== 1 && lastDigit > 1 && lastDigit < 5) {
+    pluralForm = options.few;
+  } else if (penultimateDigit !== 1 && lastDigit === 1) {
+    pluralForm = options.one;
+  }
+  return `${count} ${pluralForm}`;
+}
 const ruRUGrid = {
   // Root
   noRowsLabel: 'Нет строк',
@@ -18,16 +29,11 @@ const ruRUGrid = {
   toolbarFiltersLabel: 'Показать фильтры',
   toolbarFiltersTooltipHide: 'Скрыть фильтры',
   toolbarFiltersTooltipShow: 'Показать фильтры',
-  toolbarFiltersTooltipActive: count => {
-    let pluralForm = 'активных фильтров';
-    const lastDigit = count % 10;
-    if (lastDigit > 1 && lastDigit < 5) {
-      pluralForm = 'активных фильтра';
-    } else if (lastDigit === 1) {
-      pluralForm = 'активный фильтр';
-    }
-    return `${count} ${pluralForm}`;
-  },
+  toolbarFiltersTooltipActive: count => getPluralForm(count, {
+    one: 'активный фильтр',
+    few: 'активных фильтра',
+    many: 'активных фильтров'
+  }),
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Поиск…',
   toolbarQuickFilterLabel: 'Поиск',
@@ -109,29 +115,19 @@ const ruRUGrid = {
   columnMenuSortAsc: 'Сортировать по возрастанию',
   columnMenuSortDesc: 'Сортировать по убыванию',
   // Column header text
-  columnHeaderFiltersTooltipActive: count => {
-    let pluralForm = 'активных фильтров';
-    const lastDigit = count % 10;
-    if (lastDigit > 1 && lastDigit < 5) {
-      pluralForm = 'активных фильтра';
-    } else if (lastDigit === 1) {
-      pluralForm = 'активный фильтр';
-    }
-    return `${count} ${pluralForm}`;
-  },
+  columnHeaderFiltersTooltipActive: count => getPluralForm(count, {
+    one: 'активный фильтр',
+    few: 'активных фильтра',
+    many: 'активных фильтров'
+  }),
   columnHeaderFiltersLabel: 'Показать фильтры',
   columnHeaderSortIconLabel: 'Сортировать',
   // Rows selected footer text
-  footerRowSelected: count => {
-    let pluralForm = 'строк выбрано';
-    const lastDigit = count % 10;
-    if (lastDigit > 1 && lastDigit < 5) {
-      pluralForm = 'строки выбраны';
-    } else if (lastDigit === 1) {
-      pluralForm = 'строка выбрана';
-    }
-    return `${count} ${pluralForm}`;
-  },
+  footerRowSelected: count => getPluralForm(count, {
+    one: 'строка выбрана',
+    few: 'строки выбраны',
+    many: 'строк выбрано'
+  }),
   // Total row amount footer text
   footerTotalRows: 'Всего строк:',
   // Total visible row amount footer text

package/modern/locales/ukUA.js

@@ -1,15 +1,16 @@
 import { ukUA as ukUACore } from '@mui/material/locale';
 import { getGridLocalization } from '../utils/getGridLocalization';
-const getPluralForm = (count, options) => {
-  let pluralForm = options.many;
+function getPluralForm(count, options) {
+  const penultimateDigit = Math.floor(count / 10) % 10;
   const lastDigit = count % 10;
-  if (lastDigit > 1 && lastDigit < 5) {
+  let pluralForm = options.many;
+  if (penultimateDigit !== 1 && lastDigit > 1 && lastDigit < 5) {
     pluralForm = options.few;
-  } else if (lastDigit === 1) {
+  } else if (penultimateDigit !== 1 && lastDigit === 1) {
     pluralForm = options.one;
   }
   return `${count} ${pluralForm}`;
-};
+}
 const ukUAGrid = {
   // Root
   noRowsLabel: 'Немає рядків',

package/modern/utils/fastObjectShallowCompare.js

@@ -9,7 +9,6 @@ export function fastObjectShallowCompare(a, b) {
   let aLength = 0;
   let bLength = 0;
 
-  /* eslint-disable no-restricted-syntax */
   /* eslint-disable guard-for-in */
   for (const key in a) {
     aLength += 1;
@@ -25,8 +24,5 @@ export function fastObjectShallowCompare(a, b) {
   for (const _ in b) {
     bLength += 1;
   }
-  /* eslint-enable no-restricted-syntax */
-  /* eslint-enable guard-for-in */
-
   return aLength === bLength;
 }

package/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -136,7 +136,7 @@ function GridColumnGroupHeader(props) {
     width: width,
     columnMenuIconButton: null,
     columnTitleIconButtons: null,
-    resizable: true,
+    resizable: false,
     label: label,
     "aria-colspan": fields.length
     // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=

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

@@ -222,7 +222,7 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   return function isRowMatchingQuickFilter(row, shouldApplyFilter) {
     const result = {};
 
-    /* eslint-disable no-restricted-syntax, no-labels */
+    /* eslint-disable no-labels */
     outer: for (let v = 0; v < quickFilterValues.length; v += 1) {
       const filterValue = quickFilterValues[v];
       for (let i = 0; i < appliersPerField.length; i += 1) {
@@ -252,8 +252,6 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
       }
       result[filterValue] = false;
     }
-    /* eslint-enable no-restricted-syntax, no-labels */
-
     return result;
   };
 };

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

@@ -69,13 +69,9 @@ const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef, props.disableEval) : null;
-      const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
-        isRowMatchingFilters,
-        filterModel: filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)()
-      });
+      const filterState = apiRef.current.getFilterState(filterModel);
       const newState = (0, _extends2.default)({}, state, {
-        filter: (0, _extends2.default)({}, state.filter, filteringResult)
+        filter: (0, _extends2.default)({}, state.filter, filterState)
       });
       const visibleRowsLookupState = getVisibleRowsLookupState(apiRef, newState);
       return (0, _extends2.default)({}, newState, {
@@ -83,7 +79,7 @@ const useGridFilter = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('filteredRowsSet');
-  }, [apiRef, props.filterMode, props.disableEval]);
+  }, [apiRef]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;
@@ -213,6 +209,17 @@ const useGridFilter = (apiRef, props) => {
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
+  const getFilterState = React.useCallback(inputFilterModel => {
+    const filterModel = (0, _gridFilterUtils.sanitizeFilterModel)(inputFilterModel, props.disableMultipleColumnsFiltering, apiRef);
+    const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef, props.disableEval) : null;
+    const filterResult = apiRef.current.applyStrategyProcessor('filtering', {
+      isRowMatchingFilters,
+      filterModel: filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)()
+    });
+    return (0, _extends2.default)({}, filterResult, {
+      filterModel
+    });
+  }, [props.disableMultipleColumnsFiltering, props.filterMode, props.disableEval, apiRef]);
   const filterApi = {
     setFilterLogicOperator,
     unstable_applyFilters: applyFilters,
@@ -223,7 +230,8 @@ const useGridFilter = (apiRef, props) => {
     showFilterPanel,
     hideFilterPanel,
     setQuickFilterValues,
-    ignoreDiacritics: props.ignoreDiacritics
+    ignoreDiacritics: props.ignoreDiacritics,
+    getFilterState
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, filterApi, 'public');
 

package/node/hooks/features/rows/useGridRowsMeta.js

@@ -137,7 +137,7 @@ const useGridRowsMeta = (apiRef, props) => {
       positions.push(acc);
       let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
-      /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
+      /* eslint-disable-next-line guard-for-in */
       for (const key in processedSizes) {
         const value = processedSizes[key];
         if (key !== 'baseCenter') {

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

@@ -352,6 +352,9 @@ const useGridVirtualScroller = () => {
         isLastVisible: isLastVisible,
         isNotVisible: isNotVisible
       }, rowProps), id));
+      if (isNotVisible) {
+        return;
+      }
       const panel = panels.get(id);
       if (panel) {
         rows.push(panel);

package/node/index.js

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

package/node/locales/beBY.js

@@ -7,10 +7,10 @@ exports.beBY = void 0;
 var _coreLocales = require("./coreLocales");
 var _getGridLocalization = require("../utils/getGridLocalization");
 const getPluralForm = (count, options) => {
-  let pluralForm = options.other;
+  let pluralForm = options.many;
   const lastDigit = count % 10;
   if (lastDigit > 1 && lastDigit < 5 && (count < 10 || count > 20)) {
-    pluralForm = options.twoToFour;
+    pluralForm = options.few;
   } else if (lastDigit === 1 && count % 100 !== 11) {
     pluralForm = options.one;
   }
@@ -36,8 +36,8 @@ const beBYGrid = {
   toolbarFiltersTooltipShow: 'Паказаць фільтры',
   toolbarFiltersTooltipActive: count => getPluralForm(count, {
     one: 'актыўны фільтр',
-    twoToFour: 'актыўных фільтра',
-    other: 'актыўных фільтраў'
+    few: 'актыўных фільтра',
+    many: 'актыўных фільтраў'
   }),
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Пошук…',
@@ -124,16 +124,16 @@ const beBYGrid = {
   // Column header text
   columnHeaderFiltersTooltipActive: count => getPluralForm(count, {
     one: 'актыўны фільтр',
-    twoToFour: 'актыўных фільтра',
-    other: 'актыўных фільтраў'
+    few: 'актыўных фільтра',
+    many: 'актыўных фільтраў'
   }),
   columnHeaderFiltersLabel: 'Паказаць фільтры',
   columnHeaderSortIconLabel: 'Сартыраваць',
   // Rows selected footer text
   footerRowSelected: count => getPluralForm(count, {
     one: 'абраны радок',
-    twoToFour: 'абраных радка',
-    other: 'абраных радкоў'
+    few: 'абраных радка',
+    many: 'абраных радкоў'
   }),
   // Total row amount footer text
   footerTotalRows: 'Усяго радкоў:',

package/node/locales/faIR.js

@@ -39,8 +39,7 @@ const faIRGrid = {
   columnsManagementSearchTitle: 'جستجو',
   columnsManagementNoColumns: 'بدون سطر',
   columnsManagementShowHideAllText: 'نمایش/مخفی کردن همه',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'بازنشانی',
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelRemoveAll: 'حذف همه',

package/node/locales/ptBR.js

@@ -39,8 +39,7 @@ const ptBRGrid = {
   columnsManagementSearchTitle: 'Buscar',
   columnsManagementNoColumns: 'Nenhuma coluna',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar Todas',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Redefinir',
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/node/locales/ruRU.js

@@ -6,6 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.ruRU = void 0;
 var _locale = require("@mui/material/locale");
 var _getGridLocalization = require("../utils/getGridLocalization");
+function getPluralForm(count, options) {
+  const penultimateDigit = Math.floor(count / 10) % 10;
+  const lastDigit = count % 10;
+  let pluralForm = options.many;
+  if (penultimateDigit !== 1 && lastDigit > 1 && lastDigit < 5) {
+    pluralForm = options.few;
+  } else if (penultimateDigit !== 1 && lastDigit === 1) {
+    pluralForm = options.one;
+  }
+  return `${count} ${pluralForm}`;
+}
 const ruRUGrid = {
   // Root
   noRowsLabel: 'Нет строк',
@@ -24,16 +35,11 @@ const ruRUGrid = {
   toolbarFiltersLabel: 'Показать фильтры',
   toolbarFiltersTooltipHide: 'Скрыть фильтры',
   toolbarFiltersTooltipShow: 'Показать фильтры',
-  toolbarFiltersTooltipActive: count => {
-    let pluralForm = 'активных фильтров';
-    const lastDigit = count % 10;
-    if (lastDigit > 1 && lastDigit < 5) {
-      pluralForm = 'активных фильтра';
-    } else if (lastDigit === 1) {
-      pluralForm = 'активный фильтр';
-    }
-    return `${count} ${pluralForm}`;
-  },
+  toolbarFiltersTooltipActive: count => getPluralForm(count, {
+    one: 'активный фильтр',
+    few: 'активных фильтра',
+    many: 'активных фильтров'
+  }),
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Поиск…',
   toolbarQuickFilterLabel: 'Поиск',
@@ -115,29 +121,19 @@ const ruRUGrid = {
   columnMenuSortAsc: 'Сортировать по возрастанию',
   columnMenuSortDesc: 'Сортировать по убыванию',
   // Column header text
-  columnHeaderFiltersTooltipActive: count => {
-    let pluralForm = 'активных фильтров';
-    const lastDigit = count % 10;
-    if (lastDigit > 1 && lastDigit < 5) {
-      pluralForm = 'активных фильтра';
-    } else if (lastDigit === 1) {
-      pluralForm = 'активный фильтр';
-    }
-    return `${count} ${pluralForm}`;
-  },
+  columnHeaderFiltersTooltipActive: count => getPluralForm(count, {
+    one: 'активный фильтр',
+    few: 'активных фильтра',
+    many: 'активных фильтров'
+  }),
   columnHeaderFiltersLabel: 'Показать фильтры',
   columnHeaderSortIconLabel: 'Сортировать',
   // Rows selected footer text
-  footerRowSelected: count => {
-    let pluralForm = 'строк выбрано';
-    const lastDigit = count % 10;
-    if (lastDigit > 1 && lastDigit < 5) {
-      pluralForm = 'строки выбраны';
-    } else if (lastDigit === 1) {
-      pluralForm = 'строка выбрана';
-    }
-    return `${count} ${pluralForm}`;
-  },
+  footerRowSelected: count => getPluralForm(count, {
+    one: 'строка выбрана',
+    few: 'строки выбраны',
+    many: 'строк выбрано'
+  }),
   // Total row amount footer text
   footerTotalRows: 'Всего строк:',
   // Total visible row amount footer text

package/node/locales/ukUA.js

@@ -6,16 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.ukUA = void 0;
 var _locale = require("@mui/material/locale");
 var _getGridLocalization = require("../utils/getGridLocalization");
-const getPluralForm = (count, options) => {
-  let pluralForm = options.many;
+function getPluralForm(count, options) {
+  const penultimateDigit = Math.floor(count / 10) % 10;
   const lastDigit = count % 10;
-  if (lastDigit > 1 && lastDigit < 5) {
+  let pluralForm = options.many;
+  if (penultimateDigit !== 1 && lastDigit > 1 && lastDigit < 5) {
     pluralForm = options.few;
-  } else if (lastDigit === 1) {
+  } else if (penultimateDigit !== 1 && lastDigit === 1) {
     pluralForm = options.one;
   }
   return `${count} ${pluralForm}`;
-};
+}
 const ukUAGrid = {
   // Root
   noRowsLabel: 'Немає рядків',

package/node/utils/fastObjectShallowCompare.js

@@ -15,7 +15,6 @@ function fastObjectShallowCompare(a, b) {
   let aLength = 0;
   let bLength = 0;
 
-  /* eslint-disable no-restricted-syntax */
   /* eslint-disable guard-for-in */
   for (const key in a) {
     aLength += 1;
@@ -31,8 +30,5 @@ function fastObjectShallowCompare(a, b) {
   for (const _ in b) {
     bLength += 1;
   }
-  /* eslint-enable no-restricted-syntax */
-  /* eslint-enable guard-for-in */
-
   return aLength === bLength;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.6.2",
+  "version": "7.7.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,7 +37,7 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",
     "clsx": "^2.1.1",

package/utils/fastObjectShallowCompare.js

@@ -9,7 +9,6 @@ export function fastObjectShallowCompare(a, b) {
   let aLength = 0;
   let bLength = 0;
 
-  /* eslint-disable no-restricted-syntax */
   /* eslint-disable guard-for-in */
   for (const key in a) {
     aLength += 1;
@@ -25,8 +24,5 @@ export function fastObjectShallowCompare(a, b) {
   for (const _ in b) {
     bLength += 1;
   }
-  /* eslint-enable no-restricted-syntax */
-  /* eslint-enable guard-for-in */
-
   return aLength === bLength;
 }