@mui/x-data-grid 7.26.0 → 7.27.0

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.27.0
+
+_Feb 17, 2025_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Improve Data Grid Excel export serialization performance
+- 🐞 Bugfixes
+- 🌍 Improve Polish (pl-PL) and Ukrainian (uk-UA) locale on the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@pawelkula, @Neonin.
+Following are all team members who have contributed to this release:
+@cherniavskii, @JCQuintas, @oliviertassinari, @arminmeh and @LukasTy
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.27.0`
+
+- [DataGrid] Add `resetPageOnSortFilter` prop that resets the page after sorting and filtering (#16580) @arminmeh
+- [DataGrid] Avoid `undefined` value for pagination `rowCount` (#16558) @cherniavskii
+- [l10n] Improve Polish (pl-PL) locale (#16594) @pawelkula
+- [l10n] Improve Ukrainian (uk-UA) locale (#16593) @Neonin
+
+#### `@mui/x-data-grid-pro@7.27.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.27.0`.
+
+#### `@mui/x-data-grid-premium@7.27.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.27.0`, plus:
+
+- [DataGridPremium] Fix Excel export Web Worker demo not working in dev mode (#16532) @cherniavskii
+- [DataGridPremium] Improve Excel export serialization performance (#16545) @cherniavskii
+- [DataGridPremium] Namespace Excel export worker (#16539) @oliviertassinari
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.27.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@7.27.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.27.0`, plus:
+
+- [DateRangePicker] Avoid unnecessary field section focusing (#16569) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.27.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@7.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+- [charts-pro] Fix automatic type overloads (#16579) @JCQuintas
+
+### Core
+
+- [test] Fix Data Grid data source error test on React 18 (#16565) @arminmeh
+
 ## 7.26.0
 
 _Feb 7, 2025_

package/DataGrid/DataGrid.js

@@ -661,6 +661,12 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: PropTypes.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/DataGrid/useDataGridComponent.js

@@ -43,8 +43,8 @@ export const useDataGridComponent = (inputApiRef, props) => {
    */
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);

package/constants/dataGridPropsDefaultValues.js

@@ -44,6 +44,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
+  resetPageOnSortFilter: false,
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,

package/hooks/features/clipboard/useGridClipboard.js

@@ -91,6 +91,6 @@ export const useGridClipboard = (apiRef, props) => {
       apiRef.current.publishEvent('clipboardCopy', textToCopy);
     }
   }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
-  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  useGridNativeEventListener(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
   useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

package/hooks/features/pagination/useGridPaginationModel.d.ts

@@ -8,4 +8,4 @@ export declare const getDerivedPaginationModel: (paginationState: GridPagination
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
-export declare const useGridPaginationModel: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationModel" | "onPaginationModelChange" | "autoPageSize" | "initialState" | "paginationMode" | "pagination" | "signature" | "rowHeight">) => void;
+export declare const useGridPaginationModel: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationModel" | "onPaginationModelChange" | "autoPageSize" | "initialState" | "paginationMode" | "pagination" | "signature" | "rowHeight" | "resetPageOnSortFilter">) => void;

package/hooks/features/pagination/useGridPaginationModel.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { gridFilterModelSelector, gridFilterActiveItemsSelector } from "../filter/gridFilterSelector.js";
 import { gridDensityFactorSelector } from "../density/index.js";
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
+import { isDeepEqual, runIf } from "../../../utils/utils.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { gridPageCountSelector, gridPaginationModelSelector } from "./gridPaginationSelector.js";
 import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from "./gridPaginationUtils.js";
@@ -31,6 +33,7 @@ export const getDerivedPaginationModel = (paginationState, signature, pagination
 export const useGridPaginationModel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPaginationModel');
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const previousFilterModel = React.useRef(gridFilterModelSelector(apiRef));
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   apiRef.current.registerControlState({
     stateId: 'paginationModel',
@@ -143,14 +146,55 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const paginationModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel.page === 0) {
+      return;
+    }
     const pageCount = gridPageCountSelector(apiRef);
     if (paginationModel.page > pageCount - 1) {
       apiRef.current.setPage(Math.max(0, pageCount - 1));
     }
   }, [apiRef]);
+
+  /**
+   * Goes to the first row of the grid
+   */
+  const navigateToStart = React.useCallback(() => {
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel.page !== 0) {
+      apiRef.current.setPage(0);
+    }
+
+    // If the page was not changed it might be needed to scroll to the top
+    const scrollPosition = apiRef.current.getScrollPosition();
+    if (scrollPosition.top !== 0) {
+      apiRef.current.scroll({
+        top: 0
+      });
+    }
+  }, [apiRef]);
+
+  /**
+   * Resets the page only if the active items or quick filter has changed from the last time.
+   * This is to avoid resetting the page when the filter model is changed
+   * because of and update of the operator from an item that does not have the value
+   * or reseting when the filter panel is just opened
+   */
+  const handleFilterModelChange = React.useCallback(filterModel => {
+    const currentActiveFilters = _extends({}, filterModel, {
+      // replace items with the active items
+      items: gridFilterActiveItemsSelector(apiRef)
+    });
+    if (isDeepEqual(currentActiveFilters, previousFilterModel.current)) {
+      return;
+    }
+    previousFilterModel.current = currentActiveFilters;
+    navigateToStart();
+  }, [apiRef, navigateToStart]);
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
   useGridApiEventHandler(apiRef, 'rowCountChange', handleRowCountChange);
+  useGridApiEventHandler(apiRef, 'sortModelChange', runIf(props.resetPageOnSortFilter, navigateToStart));
+  useGridApiEventHandler(apiRef, 'filterModelChange', runIf(props.resetPageOnSortFilter, handleFilterModelChange));
 
   /**
    * EFFECTS

package/hooks/utils/useGridNativeEventListener.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 export declare const useGridNativeEventListener: <PrivateApi extends GridPrivateApiCommon, K extends keyof HTMLElementEventMap>(apiRef: RefObject<PrivateApi>, ref: React.RefObject<HTMLDivElement | null> | (() => HTMLElement | undefined | null), eventName: K, handler?: (event: HTMLElementEventMap[K]) => any, options?: AddEventListenerOptions) => void;

package/hooks/utils/useGridNativeEventListener.js

@@ -1,27 +1,17 @@
-import * as React from 'react';
-import { isFunction } from "../../utils/utils.js";
 import { useGridLogger } from "./useGridLogger.js";
+import { useGridApiOptionHandler } from "./useGridApiEventHandler.js";
 export const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
   const logger = useGridLogger(apiRef, 'useNativeEventListener');
-  const [added, setAdded] = React.useState(false);
-  const handlerRef = React.useRef(handler);
-  const targetElement = isFunction(ref) ? ref() : ref?.current ?? null;
-  const wrapHandler = React.useCallback(event => {
-    return handlerRef.current && handlerRef.current(event);
-  }, []);
-  React.useEffect(() => {
-    handlerRef.current = handler;
-  }, [handler]);
-  React.useEffect(() => {
-    if (targetElement && eventName && !added) {
-      logger.debug(`Binding native ${eventName} event`);
-      targetElement.addEventListener(eventName, wrapHandler, options);
-      setAdded(true);
-      const unsubscribe = () => {
-        logger.debug(`Clearing native ${eventName} event`);
-        targetElement.removeEventListener(eventName, wrapHandler, options);
-      };
-      apiRef.current.subscribeEvent('unmount', unsubscribe);
+  useGridApiOptionHandler(apiRef, 'rootMount', () => {
+    const targetElement = typeof ref === 'function' ? ref() : ref.current;
+    if (!targetElement || !eventName || !handler) {
+      return undefined;
     }
-  }, [targetElement, wrapHandler, eventName, added, logger, options, apiRef]);
+    logger.debug(`Binding native ${eventName} event`);
+    targetElement.addEventListener(eventName, handler, options);
+    return () => {
+      logger.debug(`Clearing native ${eventName} event`);
+      targetElement.removeEventListener(eventName, handler, options);
+    };
+  });
 };

package/index.js

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

package/locales/plPL.js

@@ -30,12 +30,11 @@ const plPLGrid = {
   toolbarExportPrint: 'Drukuj',
   toolbarExportExcel: 'Pobierz jako plik Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Szukaj',
+  columnsManagementNoColumns: 'Brak kolumn',
+  columnsManagementShowHideAllText: 'Wyświetl/Ukryj wszystkie',
+  columnsManagementReset: 'Resetuj',
+  columnsManagementDeleteIconLabel: 'Wyczyść',
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
   filterPanelRemoveAll: 'Usuń wszystkie',
@@ -63,13 +62,12 @@ const plPLGrid = {
   filterOperatorIsEmpty: 'jest pusty',
   filterOperatorIsNotEmpty: 'nie jest pusty',
   filterOperatorIsAnyOf: 'jest jednym z',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': 'równa się',
+  'filterOperator!=': 'nie równa się',
+  'filterOperator>': 'większy niż',
+  'filterOperator>=': 'większy lub równy',
+  'filterOperator<': 'mniejszy niż',
+  'filterOperator<=': 'mniejszy lub równy',
   // Header filter operators text
   headerFilterOperatorContains: 'Zawiera',
   // headerFilterOperatorDoesNotContain: 'Does not contain',
@@ -79,20 +77,19 @@ const plPLGrid = {
   headerFilterOperatorEndsWith: 'Kończy się na',
   // headerFilterOperatorIs: 'Is',
   headerFilterOperatorNot: 'Niepuste',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorAfter: 'Jest po',
+  headerFilterOperatorOnOrAfter: 'Jest w lub po',
+  headerFilterOperatorBefore: 'Jest przed',
+  headerFilterOperatorOnOrBefore: 'Jest w lub przed',
+  headerFilterOperatorIsEmpty: 'Jest pusty',
+  headerFilterOperatorIsNotEmpty: 'Nie jest pusty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Równa się',
+  'headerFilterOperator!=': 'Nie równa się',
+  'headerFilterOperator>': 'Większy niż',
+  'headerFilterOperator>=': 'Większy lub równy',
+  'headerFilterOperator<': 'Mniejszy niż',
+  'headerFilterOperator<=': 'Mniejszy lub równy',
   // Filter values text
   filterValueAny: 'dowolny',
   filterValueTrue: 'prawda',
@@ -144,14 +141,13 @@ const plPLGrid = {
   expandDetailPanel: 'Rozwiń',
   collapseDetailPanel: 'Zwiń',
   // Row reordering text
-  rowReorderingHeaderName: 'Porządkowanie wierszy'
-
+  rowReorderingHeaderName: 'Porządkowanie wierszy',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agregacja',
+  aggregationFunctionLabelSum: 'suma',
+  aggregationFunctionLabelAvg: 'średnia',
+  aggregationFunctionLabelMin: 'minimum',
+  aggregationFunctionLabelMax: 'maximum',
+  aggregationFunctionLabelSize: 'rozmiar'
 };
 export const plPL = getGridLocalization(plPLGrid, plPLCore);

package/locales/ukUA.js

@@ -45,12 +45,11 @@ const ukUAGrid = {
   toolbarExportPrint: 'Друк',
   toolbarExportExcel: 'Завантажити у форматі Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Пошук',
+  columnsManagementNoColumns: 'Немає стовпців',
+  columnsManagementShowHideAllText: 'Показати/Приховати всі',
+  columnsManagementReset: 'Скинути',
+  columnsManagementDeleteIconLabel: 'Очистити',
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
   filterPanelRemoveAll: 'Видалити всі',
@@ -64,9 +63,9 @@ const ukUAGrid = {
   filterPanelInputPlaceholder: 'Значення фільтра',
   // Filter operators text
   filterOperatorContains: 'містить',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'не містить',
   filterOperatorEquals: 'дорівнює',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'не дорівнює',
   filterOperatorStartsWith: 'починається з',
   filterOperatorEndsWith: 'закінчується на',
   filterOperatorIs: 'дорівнює',
@@ -86,9 +85,9 @@ const ukUAGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Містить',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Не містить',
   headerFilterOperatorEquals: 'Дорівнює',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Не дорівнює',
   headerFilterOperatorStartsWith: 'Починається з',
   headerFilterOperatorEndsWith: 'Закінчується на',
   headerFilterOperatorIs: 'Дорівнює',

package/models/props/DataGridProps.d.ts

@@ -267,6 +267,12 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default "client"
      */
     paginationMode: GridFeatureMode;
+    /**
+     * If `true`, the page is set to 0 after each sorting or filtering.
+     * This prop will be removed in the next major version and resetting the page will become the default behavior.
+     * @default false
+     */
+    resetPageOnSortFilter: boolean;
     /**
      * Set of rows of type [[GridRowsProp]].
      * @default []

package/modern/DataGrid/DataGrid.js

@@ -661,6 +661,12 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: PropTypes.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/modern/DataGrid/useDataGridComponent.js

@@ -43,8 +43,8 @@ export const useDataGridComponent = (inputApiRef, props) => {
    */
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);

package/modern/constants/dataGridPropsDefaultValues.js

@@ -44,6 +44,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
+  resetPageOnSortFilter: false,
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -91,6 +91,6 @@ export const useGridClipboard = (apiRef, props) => {
       apiRef.current.publishEvent('clipboardCopy', textToCopy);
     }
   }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
-  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  useGridNativeEventListener(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
   useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

package/modern/hooks/features/pagination/useGridPaginationModel.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { gridFilterModelSelector, gridFilterActiveItemsSelector } from "../filter/gridFilterSelector.js";
 import { gridDensityFactorSelector } from "../density/index.js";
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
+import { isDeepEqual, runIf } from "../../../utils/utils.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { gridPageCountSelector, gridPaginationModelSelector } from "./gridPaginationSelector.js";
 import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from "./gridPaginationUtils.js";
@@ -31,6 +33,7 @@ export const getDerivedPaginationModel = (paginationState, signature, pagination
 export const useGridPaginationModel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPaginationModel');
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const previousFilterModel = React.useRef(gridFilterModelSelector(apiRef));
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   apiRef.current.registerControlState({
     stateId: 'paginationModel',
@@ -143,14 +146,55 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const paginationModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel.page === 0) {
+      return;
+    }
     const pageCount = gridPageCountSelector(apiRef);
     if (paginationModel.page > pageCount - 1) {
       apiRef.current.setPage(Math.max(0, pageCount - 1));
     }
   }, [apiRef]);
+
+  /**
+   * Goes to the first row of the grid
+   */
+  const navigateToStart = React.useCallback(() => {
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel.page !== 0) {
+      apiRef.current.setPage(0);
+    }
+
+    // If the page was not changed it might be needed to scroll to the top
+    const scrollPosition = apiRef.current.getScrollPosition();
+    if (scrollPosition.top !== 0) {
+      apiRef.current.scroll({
+        top: 0
+      });
+    }
+  }, [apiRef]);
+
+  /**
+   * Resets the page only if the active items or quick filter has changed from the last time.
+   * This is to avoid resetting the page when the filter model is changed
+   * because of and update of the operator from an item that does not have the value
+   * or reseting when the filter panel is just opened
+   */
+  const handleFilterModelChange = React.useCallback(filterModel => {
+    const currentActiveFilters = _extends({}, filterModel, {
+      // replace items with the active items
+      items: gridFilterActiveItemsSelector(apiRef)
+    });
+    if (isDeepEqual(currentActiveFilters, previousFilterModel.current)) {
+      return;
+    }
+    previousFilterModel.current = currentActiveFilters;
+    navigateToStart();
+  }, [apiRef, navigateToStart]);
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
   useGridApiEventHandler(apiRef, 'rowCountChange', handleRowCountChange);
+  useGridApiEventHandler(apiRef, 'sortModelChange', runIf(props.resetPageOnSortFilter, navigateToStart));
+  useGridApiEventHandler(apiRef, 'filterModelChange', runIf(props.resetPageOnSortFilter, handleFilterModelChange));
 
   /**
    * EFFECTS

package/modern/hooks/utils/useGridNativeEventListener.js

@@ -1,27 +1,17 @@
-import * as React from 'react';
-import { isFunction } from "../../utils/utils.js";
 import { useGridLogger } from "./useGridLogger.js";
+import { useGridApiOptionHandler } from "./useGridApiEventHandler.js";
 export const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
   const logger = useGridLogger(apiRef, 'useNativeEventListener');
-  const [added, setAdded] = React.useState(false);
-  const handlerRef = React.useRef(handler);
-  const targetElement = isFunction(ref) ? ref() : ref?.current ?? null;
-  const wrapHandler = React.useCallback(event => {
-    return handlerRef.current && handlerRef.current(event);
-  }, []);
-  React.useEffect(() => {
-    handlerRef.current = handler;
-  }, [handler]);
-  React.useEffect(() => {
-    if (targetElement && eventName && !added) {
-      logger.debug(`Binding native ${eventName} event`);
-      targetElement.addEventListener(eventName, wrapHandler, options);
-      setAdded(true);
-      const unsubscribe = () => {
-        logger.debug(`Clearing native ${eventName} event`);
-        targetElement.removeEventListener(eventName, wrapHandler, options);
-      };
-      apiRef.current.subscribeEvent('unmount', unsubscribe);
+  useGridApiOptionHandler(apiRef, 'rootMount', () => {
+    const targetElement = typeof ref === 'function' ? ref() : ref.current;
+    if (!targetElement || !eventName || !handler) {
+      return undefined;
     }
-  }, [targetElement, wrapHandler, eventName, added, logger, options, apiRef]);
+    logger.debug(`Binding native ${eventName} event`);
+    targetElement.addEventListener(eventName, handler, options);
+    return () => {
+      logger.debug(`Clearing native ${eventName} event`);
+      targetElement.removeEventListener(eventName, handler, options);
+    };
+  });
 };

package/modern/index.js

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

package/modern/locales/plPL.js

@@ -30,12 +30,11 @@ const plPLGrid = {
   toolbarExportPrint: 'Drukuj',
   toolbarExportExcel: 'Pobierz jako plik Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Szukaj',
+  columnsManagementNoColumns: 'Brak kolumn',
+  columnsManagementShowHideAllText: 'Wyświetl/Ukryj wszystkie',
+  columnsManagementReset: 'Resetuj',
+  columnsManagementDeleteIconLabel: 'Wyczyść',
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
   filterPanelRemoveAll: 'Usuń wszystkie',
@@ -63,13 +62,12 @@ const plPLGrid = {
   filterOperatorIsEmpty: 'jest pusty',
   filterOperatorIsNotEmpty: 'nie jest pusty',
   filterOperatorIsAnyOf: 'jest jednym z',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': 'równa się',
+  'filterOperator!=': 'nie równa się',
+  'filterOperator>': 'większy niż',
+  'filterOperator>=': 'większy lub równy',
+  'filterOperator<': 'mniejszy niż',
+  'filterOperator<=': 'mniejszy lub równy',
   // Header filter operators text
   headerFilterOperatorContains: 'Zawiera',
   // headerFilterOperatorDoesNotContain: 'Does not contain',
@@ -79,20 +77,19 @@ const plPLGrid = {
   headerFilterOperatorEndsWith: 'Kończy się na',
   // headerFilterOperatorIs: 'Is',
   headerFilterOperatorNot: 'Niepuste',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorAfter: 'Jest po',
+  headerFilterOperatorOnOrAfter: 'Jest w lub po',
+  headerFilterOperatorBefore: 'Jest przed',
+  headerFilterOperatorOnOrBefore: 'Jest w lub przed',
+  headerFilterOperatorIsEmpty: 'Jest pusty',
+  headerFilterOperatorIsNotEmpty: 'Nie jest pusty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Równa się',
+  'headerFilterOperator!=': 'Nie równa się',
+  'headerFilterOperator>': 'Większy niż',
+  'headerFilterOperator>=': 'Większy lub równy',
+  'headerFilterOperator<': 'Mniejszy niż',
+  'headerFilterOperator<=': 'Mniejszy lub równy',
   // Filter values text
   filterValueAny: 'dowolny',
   filterValueTrue: 'prawda',
@@ -144,14 +141,13 @@ const plPLGrid = {
   expandDetailPanel: 'Rozwiń',
   collapseDetailPanel: 'Zwiń',
   // Row reordering text
-  rowReorderingHeaderName: 'Porządkowanie wierszy'
-
+  rowReorderingHeaderName: 'Porządkowanie wierszy',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agregacja',
+  aggregationFunctionLabelSum: 'suma',
+  aggregationFunctionLabelAvg: 'średnia',
+  aggregationFunctionLabelMin: 'minimum',
+  aggregationFunctionLabelMax: 'maximum',
+  aggregationFunctionLabelSize: 'rozmiar'
 };
 export const plPL = getGridLocalization(plPLGrid, plPLCore);

package/modern/locales/ukUA.js

@@ -45,12 +45,11 @@ const ukUAGrid = {
   toolbarExportPrint: 'Друк',
   toolbarExportExcel: 'Завантажити у форматі Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Пошук',
+  columnsManagementNoColumns: 'Немає стовпців',
+  columnsManagementShowHideAllText: 'Показати/Приховати всі',
+  columnsManagementReset: 'Скинути',
+  columnsManagementDeleteIconLabel: 'Очистити',
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
   filterPanelRemoveAll: 'Видалити всі',
@@ -64,9 +63,9 @@ const ukUAGrid = {
   filterPanelInputPlaceholder: 'Значення фільтра',
   // Filter operators text
   filterOperatorContains: 'містить',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'не містить',
   filterOperatorEquals: 'дорівнює',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'не дорівнює',
   filterOperatorStartsWith: 'починається з',
   filterOperatorEndsWith: 'закінчується на',
   filterOperatorIs: 'дорівнює',
@@ -86,9 +85,9 @@ const ukUAGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Містить',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Не містить',
   headerFilterOperatorEquals: 'Дорівнює',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Не дорівнює',
   headerFilterOperatorStartsWith: 'Починається з',
   headerFilterOperatorEndsWith: 'Закінчується на',
   headerFilterOperatorIs: 'Дорівнює',

package/node/DataGrid/DataGrid.js

@@ -668,6 +668,12 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: _propTypes.default.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: _propTypes.default.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/node/DataGrid/useDataGridComponent.js

@@ -49,8 +49,8 @@ const useDataGridComponent = (inputApiRef, props) => {
    */
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSelection.rowSelectionStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRows.rowsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridEditing.editingStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridFocus.focusStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridSorting.sortingStateInitializer, apiRef, props);

package/node/constants/dataGridPropsDefaultValues.js

@@ -50,6 +50,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
+  resetPageOnSortFilter: false,
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -98,7 +98,7 @@ const useGridClipboard = (apiRef, props) => {
       apiRef.current.publishEvent('clipboardCopy', textToCopy);
     }
   }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
-  (0, _utils.useGridNativeEventListener)(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  (0, _utils.useGridNativeEventListener)(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
   (0, _utils.useGridApiOptionHandler)(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };
 exports.useGridClipboard = useGridClipboard;

package/node/hooks/features/pagination/useGridPaginationModel.js

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridPaginationModel = exports.getDerivedPaginationModel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _density = require("../density");
 var _utils = require("../../utils");
+var _utils2 = require("../../../utils/utils");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridPaginationSelector = require("./gridPaginationSelector");
 var _gridPaginationUtils = require("./gridPaginationUtils");
@@ -40,6 +42,7 @@ exports.getDerivedPaginationModel = getDerivedPaginationModel;
 const useGridPaginationModel = (apiRef, props) => {
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridPaginationModel');
   const densityFactor = (0, _utils.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
+  const previousFilterModel = React.useRef((0, _gridFilterSelector.gridFilterModelSelector)(apiRef));
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   apiRef.current.registerControlState({
     stateId: 'paginationModel',
@@ -152,14 +155,55 @@ const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const paginationModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
+    if (paginationModel.page === 0) {
+      return;
+    }
     const pageCount = (0, _gridPaginationSelector.gridPageCountSelector)(apiRef);
     if (paginationModel.page > pageCount - 1) {
       apiRef.current.setPage(Math.max(0, pageCount - 1));
     }
   }, [apiRef]);
+
+  /**
+   * Goes to the first row of the grid
+   */
+  const navigateToStart = React.useCallback(() => {
+    const paginationModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
+    if (paginationModel.page !== 0) {
+      apiRef.current.setPage(0);
+    }
+
+    // If the page was not changed it might be needed to scroll to the top
+    const scrollPosition = apiRef.current.getScrollPosition();
+    if (scrollPosition.top !== 0) {
+      apiRef.current.scroll({
+        top: 0
+      });
+    }
+  }, [apiRef]);
+
+  /**
+   * Resets the page only if the active items or quick filter has changed from the last time.
+   * This is to avoid resetting the page when the filter model is changed
+   * because of and update of the operator from an item that does not have the value
+   * or reseting when the filter panel is just opened
+   */
+  const handleFilterModelChange = React.useCallback(filterModel => {
+    const currentActiveFilters = (0, _extends2.default)({}, filterModel, {
+      // replace items with the active items
+      items: (0, _gridFilterSelector.gridFilterActiveItemsSelector)(apiRef)
+    });
+    if ((0, _utils2.isDeepEqual)(currentActiveFilters, previousFilterModel.current)) {
+      return;
+    }
+    previousFilterModel.current = currentActiveFilters;
+    navigateToStart();
+  }, [apiRef, navigateToStart]);
   (0, _utils.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   (0, _utils.useGridApiEventHandler)(apiRef, 'paginationModelChange', handlePaginationModelChange);
   (0, _utils.useGridApiEventHandler)(apiRef, 'rowCountChange', handleRowCountChange);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'sortModelChange', (0, _utils2.runIf)(props.resetPageOnSortFilter, navigateToStart));
+  (0, _utils.useGridApiEventHandler)(apiRef, 'filterModelChange', (0, _utils2.runIf)(props.resetPageOnSortFilter, handleFilterModelChange));
 
   /**
    * EFFECTS

package/node/hooks/utils/useGridNativeEventListener.js

@@ -1,35 +1,24 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridNativeEventListener = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _utils = require("../../utils/utils");
 var _useGridLogger = require("./useGridLogger");
+var _useGridApiEventHandler = require("./useGridApiEventHandler");
 const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useNativeEventListener');
-  const [added, setAdded] = React.useState(false);
-  const handlerRef = React.useRef(handler);
-  const targetElement = (0, _utils.isFunction)(ref) ? ref() : ref?.current ?? null;
-  const wrapHandler = React.useCallback(event => {
-    return handlerRef.current && handlerRef.current(event);
-  }, []);
-  React.useEffect(() => {
-    handlerRef.current = handler;
-  }, [handler]);
-  React.useEffect(() => {
-    if (targetElement && eventName && !added) {
-      logger.debug(`Binding native ${eventName} event`);
-      targetElement.addEventListener(eventName, wrapHandler, options);
-      setAdded(true);
-      const unsubscribe = () => {
-        logger.debug(`Clearing native ${eventName} event`);
-        targetElement.removeEventListener(eventName, wrapHandler, options);
-      };
-      apiRef.current.subscribeEvent('unmount', unsubscribe);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rootMount', () => {
+    const targetElement = typeof ref === 'function' ? ref() : ref.current;
+    if (!targetElement || !eventName || !handler) {
+      return undefined;
     }
-  }, [targetElement, wrapHandler, eventName, added, logger, options, apiRef]);
+    logger.debug(`Binding native ${eventName} event`);
+    targetElement.addEventListener(eventName, handler, options);
+    return () => {
+      logger.debug(`Clearing native ${eventName} event`);
+      targetElement.removeEventListener(eventName, handler, options);
+    };
+  });
 };
 exports.useGridNativeEventListener = useGridNativeEventListener;

package/node/index.js

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

package/node/locales/plPL.js

@@ -36,12 +36,11 @@ const plPLGrid = {
   toolbarExportPrint: 'Drukuj',
   toolbarExportExcel: 'Pobierz jako plik Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Szukaj',
+  columnsManagementNoColumns: 'Brak kolumn',
+  columnsManagementShowHideAllText: 'Wyświetl/Ukryj wszystkie',
+  columnsManagementReset: 'Resetuj',
+  columnsManagementDeleteIconLabel: 'Wyczyść',
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
   filterPanelRemoveAll: 'Usuń wszystkie',
@@ -69,13 +68,12 @@ const plPLGrid = {
   filterOperatorIsEmpty: 'jest pusty',
   filterOperatorIsNotEmpty: 'nie jest pusty',
   filterOperatorIsAnyOf: 'jest jednym z',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': 'równa się',
+  'filterOperator!=': 'nie równa się',
+  'filterOperator>': 'większy niż',
+  'filterOperator>=': 'większy lub równy',
+  'filterOperator<': 'mniejszy niż',
+  'filterOperator<=': 'mniejszy lub równy',
   // Header filter operators text
   headerFilterOperatorContains: 'Zawiera',
   // headerFilterOperatorDoesNotContain: 'Does not contain',
@@ -85,20 +83,19 @@ const plPLGrid = {
   headerFilterOperatorEndsWith: 'Kończy się na',
   // headerFilterOperatorIs: 'Is',
   headerFilterOperatorNot: 'Niepuste',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorAfter: 'Jest po',
+  headerFilterOperatorOnOrAfter: 'Jest w lub po',
+  headerFilterOperatorBefore: 'Jest przed',
+  headerFilterOperatorOnOrBefore: 'Jest w lub przed',
+  headerFilterOperatorIsEmpty: 'Jest pusty',
+  headerFilterOperatorIsNotEmpty: 'Nie jest pusty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Równa się',
+  'headerFilterOperator!=': 'Nie równa się',
+  'headerFilterOperator>': 'Większy niż',
+  'headerFilterOperator>=': 'Większy lub równy',
+  'headerFilterOperator<': 'Mniejszy niż',
+  'headerFilterOperator<=': 'Mniejszy lub równy',
   // Filter values text
   filterValueAny: 'dowolny',
   filterValueTrue: 'prawda',
@@ -150,14 +147,13 @@ const plPLGrid = {
   expandDetailPanel: 'Rozwiń',
   collapseDetailPanel: 'Zwiń',
   // Row reordering text
-  rowReorderingHeaderName: 'Porządkowanie wierszy'
-
+  rowReorderingHeaderName: 'Porządkowanie wierszy',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agregacja',
+  aggregationFunctionLabelSum: 'suma',
+  aggregationFunctionLabelAvg: 'średnia',
+  aggregationFunctionLabelMin: 'minimum',
+  aggregationFunctionLabelMax: 'maximum',
+  aggregationFunctionLabelSize: 'rozmiar'
 };
 const plPL = exports.plPL = (0, _getGridLocalization.getGridLocalization)(plPLGrid, _locale.plPL);

package/node/locales/ukUA.js

@@ -51,12 +51,11 @@ const ukUAGrid = {
   toolbarExportPrint: 'Друк',
   toolbarExportExcel: 'Завантажити у форматі Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Пошук',
+  columnsManagementNoColumns: 'Немає стовпців',
+  columnsManagementShowHideAllText: 'Показати/Приховати всі',
+  columnsManagementReset: 'Скинути',
+  columnsManagementDeleteIconLabel: 'Очистити',
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
   filterPanelRemoveAll: 'Видалити всі',
@@ -70,9 +69,9 @@ const ukUAGrid = {
   filterPanelInputPlaceholder: 'Значення фільтра',
   // Filter operators text
   filterOperatorContains: 'містить',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'не містить',
   filterOperatorEquals: 'дорівнює',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'не дорівнює',
   filterOperatorStartsWith: 'починається з',
   filterOperatorEndsWith: 'закінчується на',
   filterOperatorIs: 'дорівнює',
@@ -92,9 +91,9 @@ const ukUAGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Містить',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Не містить',
   headerFilterOperatorEquals: 'Дорівнює',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Не дорівнює',
   headerFilterOperatorStartsWith: 'Починається з',
   headerFilterOperatorEndsWith: 'Закінчується на',
   headerFilterOperatorIs: 'Дорівнює',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.26.0",
+  "version": "7.27.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",