@mui/x-data-grid 6.9.0 → 6.9.2

package/legacy/joy/joySlots.js

@@ -21,11 +21,14 @@ import JoySelect from '@mui/joy/Select';
 import JoyOption from '@mui/joy/Option';
 import JoyBox from '@mui/joy/Box';
 import JoyTypography from '@mui/joy/Typography';
+import JoyCircularProgress from '@mui/joy/CircularProgress';
+import JoyTooltip from '@mui/joy/Tooltip';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import joyIconSlots, { GridKeyboardArrowRight, GridKeyboardArrowLeft } from './icons';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridFilteredTopLevelRowCountSelector, gridPaginationModelSelector } from '../hooks';
+import { GridOverlay } from '../components/containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function convertColor(color) {
@@ -290,7 +293,6 @@ var getLabelDisplayedRowsTo = function getLabelDisplayedRowsTo(_ref11) {
   return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
 };
 var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _rootProps$pageSizeOp;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var paginationModel = gridPaginationModelSelector(apiRef);
@@ -307,7 +309,20 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [apiRef]);
   var page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
   var pageSize = paginationModel.pageSize;
-  var pageSizeOptions = (_rootProps$pageSizeOp = rootProps.pageSizeOptions) != null && _rootProps$pageSizeOp.includes(pageSize) ? rootProps.pageSizeOptions : [];
+  var isPageSizeIncludedInPageSizeOptions = function isPageSizeIncludedInPageSizeOptions() {
+    for (var i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      var option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
+  var pageSizeOptions = isPageSizeIncludedInPageSizeOptions() ? rootProps.pageSizeOptions : [];
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event, newValue) {
     var newPageSize = Number(newValue);
     apiRef.current.setPageSize(newPageSize);
@@ -331,9 +346,9 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
         value: pageSize,
         children: pageSizeOptions.map(function (option) {
           return /*#__PURE__*/_jsx(Option, {
-            value: option,
-            children: option
-          }, option);
+            value: typeof option !== 'number' && option.value ? option.value : option,
+            children: typeof option !== 'number' && option.label ? option.label : "".concat(option)
+          }, typeof option !== 'number' && option.label ? option.label : "".concat(option));
         })
       })]
     }), /*#__PURE__*/_jsx(JoyTypography, {
@@ -382,6 +397,12 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })]
   });
 });
+var LoadingOverlay = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({}, props, {
+    ref: ref,
+    children: /*#__PURE__*/_jsx(JoyCircularProgress, {})
+  }));
+});
 var joySlots = _extends({}, joyIconSlots, {
   baseCheckbox: Checkbox,
   baseTextField: TextField,
@@ -392,8 +413,8 @@ var joySlots = _extends({}, joyIconSlots, {
   baseSelectOption: Option,
   baseInputLabel: InputLabel,
   baseFormControl: JoyFormControl,
-  // BaseTooltip: MUITooltip,
-  // BasePopper: MUIPopper,
-  pagination: Pagination
+  baseTooltip: JoyTooltip,
+  pagination: Pagination,
+  loadingOverlay: LoadingOverlay
 });
 export default joySlots;

package/legacy/locales/esES.js

@@ -8,8 +8,8 @@ var esESGrid = {
   toolbarDensity: 'Densidad',
   toolbarDensityLabel: 'Densidad',
   toolbarDensityCompact: 'Compacta',
-  toolbarDensityStandard: 'Standard',
-  toolbarDensityComfortable: 'Comoda',
+  toolbarDensityStandard: 'Estándar',
+  toolbarDensityComfortable: 'Cómoda',
   // Columns selector toolbar button text
   toolbarColumns: 'Columnas',
   toolbarColumnsLabel: 'Seleccionar columnas',
@@ -39,7 +39,7 @@ var esESGrid = {
   columnsPanelHideAllButton: 'Ocultar todo',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Remover todos',
   filterPanelDeleteIconLabel: 'Borrar',
   filterPanelLogicOperator: 'Operador lógico',
   filterPanelOperator: 'Operadores',

package/legacy/locales/huHU.js

@@ -62,34 +62,32 @@ var huHUGrid = {
   filterOperatorIsEmpty: 'üres',
   filterOperatorIsNotEmpty: 'nem üres',
   filterOperatorIsAnyOf: 'a következők egyike:',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
+  headerFilterOperatorContains: 'Tartalmazza:',
+  headerFilterOperatorEquals: 'Egyenlő ezzel:',
+  headerFilterOperatorStartsWith: 'Ezzel kezdődik:',
+  headerFilterOperatorEndsWith: 'Ezzel végződik:',
   // headerFilterOperatorIs: 'Is',
   // headerFilterOperatorNot: 'Is not',
-  // 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: 'Ezutáni:',
+  headerFilterOperatorOnOrAfter: 'Ekkozori vagy ezutáni:',
+  headerFilterOperatorBefore: 'Ezelőtti:',
+  headerFilterOperatorOnOrBefore: 'Ekkori vagy ezelőtti:',
+  headerFilterOperatorIsEmpty: 'Üres',
+  headerFilterOperatorIsNotEmpty: 'Nem üres',
+  headerFilterOperatorIsAnyOf: 'A következők egyike:',
+  'headerFilterOperator=': 'Egyenlő',
+  'headerFilterOperator!=': 'Nem egyenlő',
+  'headerFilterOperator>': 'Nagyobb mint',
+  'headerFilterOperator>=': 'Nagyobb vagy egyenlő',
+  'headerFilterOperator<': 'Kissebb mint',
+  'headerFilterOperator<=': 'Kissebb vagy enygenlő',
   // Filter values text
   filterValueAny: 'bármilyen',
   filterValueTrue: 'igaz',

package/legacy/locales/roRO.js

@@ -39,7 +39,7 @@ var roROGrid = {
   columnsPanelHideAllButton: 'Ascunde tot',
   // Filter panel text
   filterPanelAddFilter: 'Adăugare filtru',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Șterge tot',
   filterPanelDeleteIconLabel: 'Ștergere',
   filterPanelLogicOperator: 'Operatori logici',
   filterPanelOperator: 'Operatori',
@@ -62,34 +62,32 @@ var roROGrid = {
   filterOperatorIsEmpty: 'este gol',
   filterOperatorIsNotEmpty: 'nu este gol',
   filterOperatorIsAnyOf: 'este una din valori',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // 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',
-
+  headerFilterOperatorContains: 'Conține',
+  headerFilterOperatorEquals: 'Egal cu',
+  headerFilterOperatorStartsWith: 'Începe cu',
+  headerFilterOperatorEndsWith: 'Se termină cu',
+  headerFilterOperatorIs: 'Este',
+  headerFilterOperatorNot: 'Nu este',
+  headerFilterOperatorAfter: 'Este după',
+  headerFilterOperatorOnOrAfter: 'Este la sau „după”',
+  headerFilterOperatorBefore: 'Este înainte de',
+  headerFilterOperatorOnOrBefore: 'este la sau înainte de',
+  headerFilterOperatorIsEmpty: 'Este gol',
+  headerFilterOperatorIsNotEmpty: 'Nu este gol',
+  headerFilterOperatorIsAnyOf: 'Este una din valori',
+  'headerFilterOperator=': 'Egal cu',
+  'headerFilterOperator!=': 'Nu este egal cu',
+  'headerFilterOperator>': 'Mai mare decât',
+  'headerFilterOperator>=': 'Mai mare sau egal cu',
+  'headerFilterOperator<': 'Mai mic decât',
+  'headerFilterOperator<=': 'Mai mic sau egal cu',
   // Filter values text
   filterValueAny: 'Aleatoriu',
   filterValueTrue: 'Da',
@@ -97,7 +95,7 @@ var roROGrid = {
   // Column menu text
   columnMenuLabel: 'Meniu',
   columnMenuShowColumns: 'Afișează toate coloanele',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Gestionează coloane',
   columnMenuFilter: 'Filtru',
   columnMenuHideColumn: 'Ascunde',
   columnMenuUnsort: 'Dezactivare sortare',
@@ -151,15 +149,13 @@ var roROGrid = {
   expandDetailPanel: 'Extindere',
   collapseDetailPanel: 'Restrângere',
   // Row reordering text
-  rowReorderingHeaderName: 'Reordonare rânduri'
-
+  rowReorderingHeaderName: 'Reordonare rânduri',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agregare',
+  aggregationFunctionLabelSum: 'Sumă',
+  aggregationFunctionLabelAvg: 'Medie',
+  aggregationFunctionLabelMin: 'Minim',
+  aggregationFunctionLabelMax: 'Maxim',
+  aggregationFunctionLabelSize: 'Numărul elementelor'
 };
-
 export var roRO = getGridLocalization(roROGrid, roROCore);

package/locales/esES.js

@@ -8,8 +8,8 @@ const esESGrid = {
   toolbarDensity: 'Densidad',
   toolbarDensityLabel: 'Densidad',
   toolbarDensityCompact: 'Compacta',
-  toolbarDensityStandard: 'Standard',
-  toolbarDensityComfortable: 'Comoda',
+  toolbarDensityStandard: 'Estándar',
+  toolbarDensityComfortable: 'Cómoda',
   // Columns selector toolbar button text
   toolbarColumns: 'Columnas',
   toolbarColumnsLabel: 'Seleccionar columnas',
@@ -37,7 +37,7 @@ const esESGrid = {
   columnsPanelHideAllButton: 'Ocultar todo',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Remover todos',
   filterPanelDeleteIconLabel: 'Borrar',
   filterPanelLogicOperator: 'Operador lógico',
   filterPanelOperator: 'Operadores',

package/locales/huHU.js

@@ -60,34 +60,32 @@ const huHUGrid = {
   filterOperatorIsEmpty: 'üres',
   filterOperatorIsNotEmpty: 'nem üres',
   filterOperatorIsAnyOf: 'a következők egyike:',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
+  headerFilterOperatorContains: 'Tartalmazza:',
+  headerFilterOperatorEquals: 'Egyenlő ezzel:',
+  headerFilterOperatorStartsWith: 'Ezzel kezdődik:',
+  headerFilterOperatorEndsWith: 'Ezzel végződik:',
   // headerFilterOperatorIs: 'Is',
   // headerFilterOperatorNot: 'Is not',
-  // 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: 'Ezutáni:',
+  headerFilterOperatorOnOrAfter: 'Ekkozori vagy ezutáni:',
+  headerFilterOperatorBefore: 'Ezelőtti:',
+  headerFilterOperatorOnOrBefore: 'Ekkori vagy ezelőtti:',
+  headerFilterOperatorIsEmpty: 'Üres',
+  headerFilterOperatorIsNotEmpty: 'Nem üres',
+  headerFilterOperatorIsAnyOf: 'A következők egyike:',
+  'headerFilterOperator=': 'Egyenlő',
+  'headerFilterOperator!=': 'Nem egyenlő',
+  'headerFilterOperator>': 'Nagyobb mint',
+  'headerFilterOperator>=': 'Nagyobb vagy egyenlő',
+  'headerFilterOperator<': 'Kissebb mint',
+  'headerFilterOperator<=': 'Kissebb vagy enygenlő',
   // Filter values text
   filterValueAny: 'bármilyen',
   filterValueTrue: 'igaz',

package/locales/roRO.js

@@ -37,7 +37,7 @@ const roROGrid = {
   columnsPanelHideAllButton: 'Ascunde tot',
   // Filter panel text
   filterPanelAddFilter: 'Adăugare filtru',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Șterge tot',
   filterPanelDeleteIconLabel: 'Ștergere',
   filterPanelLogicOperator: 'Operatori logici',
   filterPanelOperator: 'Operatori',
@@ -60,34 +60,32 @@ const roROGrid = {
   filterOperatorIsEmpty: 'este gol',
   filterOperatorIsNotEmpty: 'nu este gol',
   filterOperatorIsAnyOf: 'este una din valori',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // 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',
-
+  headerFilterOperatorContains: 'Conține',
+  headerFilterOperatorEquals: 'Egal cu',
+  headerFilterOperatorStartsWith: 'Începe cu',
+  headerFilterOperatorEndsWith: 'Se termină cu',
+  headerFilterOperatorIs: 'Este',
+  headerFilterOperatorNot: 'Nu este',
+  headerFilterOperatorAfter: 'Este după',
+  headerFilterOperatorOnOrAfter: 'Este la sau „după”',
+  headerFilterOperatorBefore: 'Este înainte de',
+  headerFilterOperatorOnOrBefore: 'este la sau înainte de',
+  headerFilterOperatorIsEmpty: 'Este gol',
+  headerFilterOperatorIsNotEmpty: 'Nu este gol',
+  headerFilterOperatorIsAnyOf: 'Este una din valori',
+  'headerFilterOperator=': 'Egal cu',
+  'headerFilterOperator!=': 'Nu este egal cu',
+  'headerFilterOperator>': 'Mai mare decât',
+  'headerFilterOperator>=': 'Mai mare sau egal cu',
+  'headerFilterOperator<': 'Mai mic decât',
+  'headerFilterOperator<=': 'Mai mic sau egal cu',
   // Filter values text
   filterValueAny: 'Aleatoriu',
   filterValueTrue: 'Da',
@@ -95,7 +93,7 @@ const roROGrid = {
   // Column menu text
   columnMenuLabel: 'Meniu',
   columnMenuShowColumns: 'Afișează toate coloanele',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Gestionează coloane',
   columnMenuFilter: 'Filtru',
   columnMenuHideColumn: 'Ascunde',
   columnMenuUnsort: 'Dezactivare sortare',
@@ -139,15 +137,13 @@ const roROGrid = {
   expandDetailPanel: 'Extindere',
   collapseDetailPanel: 'Restrângere',
   // Row reordering text
-  rowReorderingHeaderName: 'Reordonare rânduri'
-
+  rowReorderingHeaderName: 'Reordonare rânduri',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agregare',
+  aggregationFunctionLabelSum: 'Sumă',
+  aggregationFunctionLabelAvg: 'Medie',
+  aggregationFunctionLabelMin: 'Minim',
+  aggregationFunctionLabelMax: 'Maxim',
+  aggregationFunctionLabelSize: 'Numărul elementelor'
 };
-
 export const roRO = getGridLocalization(roROGrid, roROCore);

package/models/api/gridEditingApi.d.ts

@@ -52,7 +52,7 @@ export interface GridEditingSharedApi {
      * @param {string} field The field being edited.
      * @ignore - do not document.
      */
-    unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta;
+    unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta | null;
 }
 export interface GridEditingSharedPrivateApi {
     /**

package/models/api/gridParamsApi.d.ts

@@ -1,4 +1,5 @@
-import { GridValidRowModel, GridRowId, GridTreeNode } from '../gridRows';
+import { GridColDef } from '../colDef';
+import { GridValidRowModel, GridRowId, GridTreeNode, GridRowModel } from '../gridRows';
 import { GridCellParams } from '../params/gridCellParams';
 import { GridColumnHeaderParams } from '../params/gridColumnHeaderParams';
 import { GridRowParams } from '../params/gridRowParams';
@@ -11,6 +12,26 @@ export interface GridParamsApi {
      * @returns {v} The cell value.
      */
     getCellValue: <V extends any = any>(id: GridRowId, field: string) => V;
+    /**
+     * Gets the cell value.
+     * Use it instead of `getCellValue` for better performance if you have `row` and `colDef`.
+     * @template V
+     * @param {GridRowModel} row The row model.
+     * @param {GridColDef} colDef The column definition.
+     * @returns {v} The cell value.
+     * @ignore - do not document
+     */
+    getRowValue: <V extends any = any>(row: GridRowModel, colDef: GridColDef) => V;
+    /**
+     * Gets the cell formatted value
+     * Use it instead of `getCellParams` for better performance if you only need the formatted value.
+     * @template V
+     * @param {GridRowModel} row The row model.
+     * @param {GridColDef} colDef The column definition.
+     * @returns {v} The cell value.
+     * @ignore - do not document
+     */
+    getRowFormattedValue: <V extends any = any>(row: GridRowModel, colDef: GridColDef) => V;
     /**
      * Gets the underlying DOM element for a cell at the given `id` and `field`.
      * @param {GridRowId} id The id of the row.

package/models/colDef/gridColDef.d.ts

@@ -24,6 +24,9 @@ export type ValueOptions = string | number | {
  * Value that can be used as a key for grouping rows
  */
 export type GridKeyValue = string | number | boolean;
+export type GridApplyQuickFilterV7<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: V, row: R, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => boolean;
+export type GetApplyQuickFilterFnLegacy<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: any, colDef: GridStateColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => null | ((params: GridCellParams<R, V, F>) => boolean);
+export type GetApplyQuickFilterFnV7<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: any, colDef: GridStateColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => null | GridApplyQuickFilterV7<R, V>;
 /**
  * Column Definition base interface.
  */
@@ -207,7 +210,16 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      * @param {React.MutableRefObject<GridApiCommunity>} apiRef Deprecated: The API of the grid.
      * @returns {null | ((params: GridCellParams) => boolean)} The function to call to check if a row pass this filter value or not.
      */
-    getApplyQuickFilterFn?: (value: any, colDef: GridStateColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => null | ((params: GridCellParams<R, V, F>) => boolean);
+    getApplyQuickFilterFn?: GetApplyQuickFilterFnLegacy<R, V, F>;
+    /**
+     * The callback that generates a filtering function for a given quick filter value.
+     * This function can return `null` to skip filtering for this value and column.
+     * @param {any} value The value with which we want to filter the column.
+     * @param {GridStateColDef} colDef The column from which we want to filter the rows.
+     * @param {React.MutableRefObject<GridApiCommunity>} apiRef Deprecated: The API of the grid.
+     * @returns {null | GridApplyQuickFilterV7} The function to call to check if a row pass this filter value or not.
+     */
+    getApplyQuickFilterFnV7?: GetApplyQuickFilterFnV7<R, V>;
     /**
      * If `true`, this column cannot be reordered.
      * @default false

package/models/gridFilterOperator.d.ts

@@ -3,6 +3,11 @@ import { GridFilterItem } from './gridFilterItem';
 import { GridCellParams } from './params/gridCellParams';
 import type { GridColDef } from './colDef/gridColDef';
 import type { GridValidRowModel } from './gridRows';
+import type { GridApiCommunity } from './api/gridApiCommunity';
+type ApplyFilterFnLegacy<R extends GridValidRowModel = any, V = any, F = V> = (params: GridCellParams<R, V, F>) => boolean;
+type ApplyFilterFnV7<R extends GridValidRowModel = any, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => boolean;
+export type GetApplyFilterFnV7<R extends GridValidRowModel = any, V = any, F = V> = (filterItem: GridFilterItem, column: GridColDef<R, V, F>) => null | ApplyFilterFnV7<R, V, F>;
+export type GetApplyFilterFnLegacy<R extends GridValidRowModel = any, V = any, F = V> = (filterItem: GridFilterItem, column: GridColDef<R, V, F>) => null | ApplyFilterFnLegacy<R, V, F>;
 /**
  * Filter operator definition interface.
  * @demos
@@ -27,9 +32,18 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
      * This function can return `null` to skip filtering for this item and column.
      * @param {GridFilterItem} filterItem The filter item with which we want to filter the column.
      * @param {GridColDef} column The column from which we want to filter the rows.
-     * @returns {null | ((params: GridCellParams) => boolean)} The function to call to check if a row pass this filter item or not.
+     * @returns {null | ApplyFilterFnLegacy} The function to call to check if a row pass this filter item or not.
      */
-    getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef<R, V, F>) => null | ((params: GridCellParams<R, V, F>) => boolean);
+    getApplyFilterFn: GetApplyFilterFnLegacy<R, V, F>;
+    /**
+     * The callback that generates a filtering function for a given filter item and column.
+     * This function can return `null` to skip filtering for this item and column.
+     * This function uses the more performant V7 API.
+     * @param {GridFilterItem} filterItem The filter item with which we want to filter the column.
+     * @param {GridColDef} column The column from which we want to filter the rows.
+     * @returns {null | ApplyFilterFnV7} The function to call to check if a row pass this filter item or not.
+     */
+    getApplyFilterFnV7?: GetApplyFilterFnV7<R, V, F>;
     /**
      * The input component to render in the filter panel for this filter operator.
      */
@@ -51,3 +65,4 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
      */
     requiresFilterValue?: boolean;
 }
+export {};

package/models/gridRows.d.ts

@@ -1,6 +1,6 @@
 import type { GridKeyValue } from './colDef/gridColDef';
 export type GridValidRowModel = {
-    [key: string]: any;
+    [key: string | symbol]: any;
 };
 export type GridRowsProp<R extends GridValidRowModel = GridValidRowModel> = Readonly<GridRowModel<R>[]>;
 /**

package/models/props/DataGridProps.d.ts

@@ -256,7 +256,10 @@ export interface DataGridPropsWithDefaultValues {
      * Select the pageSize dynamically using the component UI.
      * @default [25, 50, 100]
      */
-    pageSizeOptions: number[];
+    pageSizeOptions: Array<number | {
+        value: number;
+        label: string;
+    }>;
     /**
      * Sets the type of space between rows added by `getRowSpacing`.
      * @default "margin"

package/modern/DataGrid/DataGrid.js

@@ -513,7 +513,10 @@ DataGridRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   pagination: props => {
     if (props.pagination === false) {
       return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));

package/modern/DataGrid/useDataGridComponent.js

@@ -54,7 +54,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridRowSelection(privateApiRef, props);
   useGridColumns(privateApiRef, props);
   useGridRows(privateApiRef, props);
-  useGridParamsApi(privateApiRef);
+  useGridParamsApi(privateApiRef, props);
   useGridColumnSpanning(privateApiRef);
   useGridColumnGrouping(privateApiRef, props);
   useGridEditing(privateApiRef, props);

package/modern/colDef/gridActionsColDef.js

@@ -14,5 +14,6 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   disableColumnMenu: true,
   disableExport: true,
   renderCell: renderActionsCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined
 });

package/modern/colDef/gridBooleanColDef.js

@@ -36,6 +36,7 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridBooleanFormatter,
   filterOperators: getGridBooleanOperators(),
   getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   aggregable: false,
   // @ts-ignore