@mui/x-data-grid 5.12.3 → 5.13.0

package/modern/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
 import Chip from '@mui/material/Chip';
-import TextField from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/material/utils';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function GridFilterInputMultipleValue(props) {
@@ -15,12 +15,25 @@ function GridFilterInputMultipleValue(props) {
     applyValue,
     type,
     apiRef,
-    focusElementRef
+    focusElementRef,
+    color,
+    error,
+    helperText,
+    size,
+    variant
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const id = useId();
+  const rootProps = useGridRootProps();
   React.useEffect(() => {
     const itemValue = item.value ?? [];
     setFilterValueState(itemValue.map(String));
@@ -52,16 +65,15 @@ function GridFilterInputMultipleValue(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => /*#__PURE__*/_jsx(TextField, _extends({}, params, {
+    renderInput: params => /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({}, params, {
       label: apiRef.current.getLocaleText('filterPanelInputLabel'),
       placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
       InputLabelProps: _extends({}, params.InputLabelProps, {
         shrink: true
       }),
       inputRef: focusElementRef,
-      type: type || 'text',
-      variant: "standard"
-    }))
+      type: type || 'text'
+    }, TextFieldProps, rootProps.componentsProps?.baseTextField))
   }, other));
 }
 
@@ -70,7 +82,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes =
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -51,6 +51,10 @@ function GridFilterInputSingleSelect(props) {
   const isSelectNative = baseSelectProps.native ?? true;
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentValueOptions = React.useMemo(() => {
+    if (currentColumn === null) {
+      return undefined;
+    }
+
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
       field: currentColumn.field
     }) : currentColumn.valueOptions;
@@ -90,8 +94,8 @@ function GridFilterInputSingleSelect(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -110,7 +114,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/components/panel/filterPanel/GridFilterInputValue.js

@@ -111,8 +111,8 @@ function GridFilterInputValue(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputProps: InputProps,
     InputLabelProps: {
       shrink: true
@@ -126,7 +126,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -69,21 +69,34 @@ export function useGridDimensions(apiRef, props) {
       rootElement.removeChild(scrollDiv);
     }
 
-    const viewportOuterSize = {
-      width: rootDimensionsRef.current.width,
-      height: props.autoHeight ? rowsMeta.currentPageTotalHeight : rootDimensionsRef.current.height - headerHeight
-    };
-    const {
-      hasScrollX,
-      hasScrollY
-    } = hasScroll({
-      content: {
-        width: Math.round(columnsTotalWidth),
-        height: rowsMeta.currentPageTotalHeight
-      },
-      container: viewportOuterSize,
-      scrollBarSize
-    });
+    let viewportOuterSize;
+    let hasScrollX;
+    let hasScrollY;
+
+    if (props.autoHeight) {
+      hasScrollY = false;
+      hasScrollX = Math.round(columnsTotalWidth) > rootDimensionsRef.current.width;
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: rowsMeta.currentPageTotalHeight + (hasScrollX ? scrollBarSize : 0)
+      };
+    } else {
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: rootDimensionsRef.current.height - headerHeight
+      };
+      const scrollInformation = hasScroll({
+        content: {
+          width: Math.round(columnsTotalWidth),
+          height: rowsMeta.currentPageTotalHeight
+        },
+        container: viewportOuterSize,
+        scrollBarSize
+      });
+      hasScrollY = scrollInformation.hasScrollY;
+      hasScrollX = scrollInformation.hasScrollX;
+    }
+
     const viewportInnerSize = {
       width: viewportOuterSize.width - (hasScrollY ? scrollBarSize : 0),
       height: viewportOuterSize.height - (hasScrollX ? scrollBarSize : 0)

package/modern/hooks/features/editRows/useGridCellEditing.new.js

@@ -70,6 +70,12 @@ export const useGridCellEditing = (apiRef, props) => {
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridCellModes.Edit) {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       let reason;
 
       if (event.key === 'Escape') {

package/modern/hooks/features/editRows/useGridCellEditing.old.js

@@ -175,6 +175,12 @@ export const useCellEditing = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, cellEditingApi, 'EditRowApi');
   const handleCellKeyDown = React.useCallback(async (params, event) => {
+    // Wait until IME is settled for Asian languages like Japanese and Chinese
+    // TODO: `event.which` is depricated but this is a temporary workaround
+    if (event.which === 229) {
+      return;
+    }
+
     const {
       id,
       field,

package/modern/hooks/features/editRows/useGridRowEditing.new.js

@@ -108,6 +108,12 @@ export const useGridRowEditing = (apiRef, props) => {
   }, []);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridRowModes.Edit) {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       let reason;
 
       if (event.key === 'Escape') {

package/modern/hooks/features/editRows/useGridRowEditing.old.js

@@ -172,6 +172,12 @@ export const useGridRowEditing = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, rowEditingApi, 'EditRowApi');
   const handleCellKeyDown = React.useCallback(async (params, event) => {
+    // Wait until IME is settled for Asian languages like Japanese and Chinese
+    // TODO: `event.which` is depricated but this is a temporary workaround
+    if (event.which === 229) {
+      return;
+    }
+
     const {
       cellMode,
       isEditable

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

@@ -93,7 +93,7 @@ export const useGridRows = (apiRef, props) => {
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
-      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 

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

@@ -11,7 +11,7 @@ const flatRowTreeCreationMethod = ({
   for (let i = 0; i < ids.length; i += 1) {
     const rowId = ids[i];
 
-    if (previousTree && previousTree[rowId]) {
+    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null) {
       tree[rowId] = previousTree[rowId];
     } else {
       tree[rowId] = {

package/modern/hooks/utils/useGridApiContext.js

@@ -4,7 +4,7 @@ export function useGridApiContext() {
   const apiRef = React.useContext(GridApiContext);
 
   if (apiRef === undefined) {
-    throw new Error(['MUI: Could not find the data grid context.', 'It looks like you rendered your component outside of a DataGrid or DataGridPro parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI: Could not find the data grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
   }
 
   return apiRef;

package/modern/hooks/utils/useGridRootProps.js

@@ -4,7 +4,7 @@ export const useGridRootProps = () => {
   const contextValue = React.useContext(GridRootPropsContext);
 
   if (!contextValue) {
-    throw new Error('MUI: useGridRootProps should only be used inside the DataGrid/DataGridPro component.');
+    throw new Error('MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.');
   }
 
   return contextValue;

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.12.3
+/** @license MUI v5.13.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/locales/index.js

@@ -15,9 +15,11 @@ export * from './huHU';
 export * from './itIT';
 export * from './jaJP';
 export * from './koKR';
+export * from './nbNO';
 export * from './nlNL';
 export * from './plPL';
 export * from './ptBR';
+export * from './roRO';
 export * from './ruRU';
 export * from './skSK';
 export * from './svSE';

package/modern/locales/roRO.js

@@ -0,0 +1,116 @@
+import { roRO as roROCore } from '@mui/material/locale';
+import { getGridLocalization } from '../utils/getGridLocalization';
+const roROGrid = {
+  // Root
+  noRowsLabel: 'Lipsă date',
+  noResultsOverlayLabel: 'Nu au fost găsite rezultate.',
+  errorOverlayDefaultLabel: 'A apărut o eroare neașteptată.',
+  // Density selector toolbar button text
+  toolbarDensity: 'Înălțime rând',
+  toolbarDensityLabel: 'Înălțime rând',
+  toolbarDensityCompact: 'Compact',
+  toolbarDensityStandard: 'Standard',
+  toolbarDensityComfortable: 'Lat',
+  // Columns selector toolbar button text
+  toolbarColumns: 'Coloane',
+  toolbarColumnsLabel: 'Afișează selecție coloane',
+  // Filters toolbar button text
+  toolbarFilters: 'Filtru',
+  toolbarFiltersLabel: 'Afișează filtru',
+  toolbarFiltersTooltipHide: 'Ascunde filtru',
+  toolbarFiltersTooltipShow: 'Afișează filtru',
+  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} filtru activ` : `${count} filtru activ`,
+  // Quick filter toolbar field
+  // toolbarQuickFilterPlaceholder: 'Search...',
+  // toolbarQuickFilterLabel: 'Search',
+  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  // Export selector toolbar button text
+  toolbarExport: 'Export',
+  toolbarExportLabel: 'Export',
+  toolbarExportCSV: 'Download în format CSV',
+  toolbarExportPrint: 'Printare',
+  toolbarExportExcel: 'Download în format Excel',
+  // Columns panel text
+  columnsPanelTextFieldLabel: 'Găsește coloana',
+  columnsPanelTextFieldPlaceholder: 'Titlu coloană',
+  columnsPanelDragIconLabel: 'Resortare coloană',
+  columnsPanelShowAllButton: 'Afișează tot',
+  columnsPanelHideAllButton: 'Ascunde tot',
+  // Filter panel text
+  filterPanelAddFilter: 'Adăugare filtru',
+  filterPanelDeleteIconLabel: 'Ștergere',
+  filterPanelLinkOperator: 'Operatori logici',
+  filterPanelOperators: 'Operatori',
+  // TODO v6: rename to filterPanelOperator
+  filterPanelOperatorAnd: 'Și',
+  filterPanelOperatorOr: 'Sau',
+  filterPanelColumns: 'Coloane',
+  filterPanelInputLabel: 'Valoare',
+  filterPanelInputPlaceholder: 'Filtrare valoare',
+  // Filter operators text
+  filterOperatorContains: 'conține',
+  filterOperatorEquals: 'este egal cu',
+  filterOperatorStartsWith: 'începe cu',
+  filterOperatorEndsWith: 'se termină cu',
+  filterOperatorIs: 'este',
+  filterOperatorNot: 'nu este',
+  filterOperatorAfter: 'este după',
+  filterOperatorOnOrAfter: 'este la sau după',
+  filterOperatorBefore: 'este înainte de',
+  filterOperatorOnOrBefore: 'este la sau înainte de',
+  filterOperatorIsEmpty: 'este gol',
+  filterOperatorIsNotEmpty: 'nu este gol',
+  filterOperatorIsAnyOf: 'este una din valori',
+  // Filter values text
+  filterValueAny: 'Aleatoriu',
+  filterValueTrue: 'Da',
+  filterValueFalse: 'Nu',
+  // Column menu text
+  columnMenuLabel: 'Meniu',
+  columnMenuShowColumns: 'Afișează toate coloanele',
+  columnMenuFilter: 'Filtru',
+  columnMenuHideColumn: 'Ascunde',
+  columnMenuUnsort: 'Dezactivare sortare',
+  columnMenuSortAsc: 'Sortează crescător',
+  columnMenuSortDesc: 'Sortează descrescător',
+  // Column header text
+  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} filtru activ` : `${count} filtru activ`,
+  columnHeaderFiltersLabel: 'Afișează filtru',
+  columnHeaderSortIconLabel: 'Sortare',
+  // Rows selected footer text
+  footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} Înregistrări selectate` : `${count.toLocaleString()} Înregistrare selectată`,
+  // Total row amount footer text
+  footerTotalRows: 'Total:',
+  // Total visible row amount footer text
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} din ${totalCount.toLocaleString()}`,
+  // Checkbox selection text
+  checkboxSelectionHeaderName: 'Checkbox Selecție',
+  checkboxSelectionSelectAllRows: 'Selectare toate rândurile',
+  checkboxSelectionUnselectAllRows: 'Deselectare toate rândurile',
+  checkboxSelectionSelectRow: 'Selectare rând',
+  checkboxSelectionUnselectRow: 'Deselectare rând',
+  // Boolean cell text
+  booleanCellTrueLabel: 'Da',
+  booleanCellFalseLabel: 'Nu',
+  // Actions cell more text
+  actionsCellMore: 'Mai multe',
+  // Column pinning text
+  pinToLeft: 'Fixare în stânga',
+  pinToRight: 'Fixare în dreapta',
+  unpin: 'Anulare fixare',
+  // Tree Data
+  treeDataGroupingHeaderName: 'Grup',
+  treeDataExpand: 'Afișare copii',
+  treeDataCollapse: 'Ascundere copii',
+  // Grouping columns
+  groupingColumnHeaderName: 'Grupare',
+  groupColumn: name => `Grupare după ${name}`,
+  unGroupColumn: name => `Anulare Grupare după ${name}`,
+  // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
+  expandDetailPanel: 'Extindere',
+  collapseDetailPanel: 'Restrângere',
+  // Row reordering text
+  rowReorderingHeaderName: 'Reordonare rânduri'
+};
+export const roRO = getGridLocalization(roROGrid, roROCore);

package/modern/locales/skSK.js

@@ -31,15 +31,15 @@ const skSKGrid = {
     return `${count} ${pluralForm}`;
   },
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search...',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'Vyhľadať...',
+  toolbarQuickFilterLabel: 'Vyhľadať',
+  toolbarQuickFilterDeleteIconLabel: 'Vymazať',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
   toolbarExportCSV: 'Stiahnuť ako CSV',
   toolbarExportPrint: 'Vytlačiť',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'Stiahnuť ako Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Nájsť stĺpec',
   columnsPanelTextFieldPlaceholder: 'Názov stĺpca',
@@ -49,7 +49,7 @@ const skSKGrid = {
   // Filter panel text
   filterPanelAddFilter: 'Pridať filter',
   filterPanelDeleteIconLabel: 'Odstrániť',
-  // filterPanelLinkOperator: 'Logic operator',
+  filterPanelLinkOperator: 'Logický operátor',
   filterPanelOperators: 'Operátory',
   // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'A',
@@ -70,7 +70,7 @@ const skSKGrid = {
   filterOperatorOnOrBefore: 'je na alebo skôr',
   filterOperatorIsEmpty: 'je prázdny',
   filterOperatorIsNotEmpty: 'nie je prázdny',
-  // filterOperatorIsAnyOf: 'is any of',
+  filterOperatorIsAnyOf: 'je jeden z',
   // Filter values text
   filterValueAny: 'akýkoľvek',
   filterValueTrue: 'áno',
@@ -120,10 +120,10 @@ const skSKGrid = {
   },
   // Checkbox selection text
   checkboxSelectionHeaderName: 'Výber riadku',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
+  checkboxSelectionSelectAllRows: 'Vybrať všetky riadky',
+  checkboxSelectionUnselectAllRows: 'Zrušiť výber všetkých riadkov',
+  checkboxSelectionSelectRow: 'Vyber riadok',
+  checkboxSelectionUnselectRow: 'Zruš výber riadku',
   // Boolean cell text
   booleanCellTrueLabel: 'áno',
   booleanCellFalseLabel: 'nie',
@@ -140,12 +140,12 @@ const skSKGrid = {
   // Grouping columns
   groupingColumnHeaderName: 'Skupina',
   groupColumn: name => `Zoskupiť podľa ${name}`,
-  unGroupColumn: name => `Prestať zoskupovať podľa ${name}` // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
+  unGroupColumn: name => `Prestať zoskupovať podľa ${name}`,
+  // Master/detail
+  detailPanelToggle: 'Prepnúť detail panelu',
+  expandDetailPanel: 'Rozbaliť',
+  collapseDetailPanel: 'Zbaliť',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-
+  rowReorderingHeaderName: 'Preusporiadávanie riadkov'
 };
 export const skSK = getGridLocalization(skSKGrid, skSKCore);

package/modern/utils/keyboardUtils.js

@@ -8,9 +8,10 @@ export const isSpaceKey = key => key === ' ';
 export const isArrowKeys = key => key.indexOf('Arrow') === 0;
 export const isHomeOrEndKeys = key => key === 'Home' || key === 'End';
 export const isPageKeys = key => key.indexOf('Page') === 0;
-export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace';
-const printableCharRegex = /^(\p{L}|\p{M}\p{L}|\p{M}|\p{N}|\p{Z}|\p{S}|\p{P})$/iu;
-export const isPrintableKey = key => printableCharRegex.test(key);
+export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace'; // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
+// https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+
+export const isPrintableKey = key => key.length === 1;
 export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
 export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];
 export const GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];

package/node/DataGrid/DataGrid.js

@@ -109,7 +109,7 @@ DataGridRaw.propTypes = {
   columns: (0, _utils.chainPropTypes)(_propTypes.default.array.isRequired, props => {
     // @ts-ignore because otherwise `build:api` doesn't work
     if (props.columns && props.columns.some(column => column.resizable)) {
-      return new Error([`MUI: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      return new Error([`MUI: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
 
     return null;
@@ -679,14 +679,14 @@ DataGridRaw.propTypes = {
    */
   pageSize: (0, _utils.chainPropTypes)(_propTypes.default.number, props => {
     if (props.pageSize && props.pageSize > _useDataGridProps.MAX_PAGE_SIZE) {
-      return new Error([`MUI: \`<DataGrid pageSize={${props.pageSize}} />\` is not a valid prop.`, `Only page size below ${_useDataGridProps.MAX_PAGE_SIZE} is available in the MIT version.`, '', 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      return new Error([`MUI: \`<DataGrid pageSize={${props.pageSize}} />\` is not a valid prop.`, `Only page size below ${_useDataGridProps.MAX_PAGE_SIZE} is available in the MIT version.`, '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
 
     return null;
   }),
   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 the DataGridPro component to disable the pagination.'].join('\n'));
+      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'));
     }
 
     return null;
@@ -766,7 +766,7 @@ DataGridRaw.propTypes = {
    */
   selectionModel: (0, _utils.chainPropTypes)(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]), props => {
     if (!props.checkboxSelection && Array.isArray(props.selectionModel) && props.selectionModel.length > 1) {
-      return new Error([`MUI: \`<DataGrid selectionModel={${JSON.stringify(props.selectionModel)}} />\` is not a valid prop.`, 'selectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to the DataGridPro component to unlock multiple selection.'].join('\n'));
+      return new Error([`MUI: \`<DataGrid selectionModel={${JSON.stringify(props.selectionModel)}} />\` is not a valid prop.`, 'selectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
 
     return null;

package/node/colDef/gridStringOperators.js

@@ -26,14 +26,15 @@ const getGridStringQuickFilterFn = value => {
 
 exports.getGridStringQuickFilterFn = getGridStringQuickFilterFn;
 
-const getGridStringOperators = () => [{
+const getGridStringOperators = (disableTrim = false) => [{
   value: 'contains',
   getApplyFilterFn: filterItem => {
     if (!filterItem.value) {
       return null;
     }
 
-    const filterRegex = new RegExp((0, _utils.escapeRegExp)(filterItem.value), 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp((0, _utils.escapeRegExp)(filterItemValue), 'i');
     return ({
       value
     }) => {
@@ -48,6 +49,7 @@ const getGridStringOperators = () => [{
       return null;
     }
 
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const collator = new Intl.Collator(undefined, {
       sensitivity: 'base',
       usage: 'search'
@@ -55,7 +57,7 @@ const getGridStringOperators = () => [{
     return ({
       value
     }) => {
-      return value != null ? collator.compare(filterItem.value, value.toString()) === 0 : false;
+      return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
     };
   },
   InputComponent: _GridFilterInputValue.GridFilterInputValue
@@ -66,7 +68,8 @@ const getGridStringOperators = () => [{
       return null;
     }
 
-    const filterRegex = new RegExp(`^${(0, _utils.escapeRegExp)(filterItem.value)}.*$`, 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`^${(0, _utils.escapeRegExp)(filterItemValue)}.*$`, 'i');
     return ({
       value
     }) => {
@@ -81,7 +84,8 @@ const getGridStringOperators = () => [{
       return null;
     }
 
-    const filterRegex = new RegExp(`.*${(0, _utils.escapeRegExp)(filterItem.value)}$`, 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`.*${(0, _utils.escapeRegExp)(filterItemValue)}$`, 'i');
     return ({
       value
     }) => {
@@ -114,13 +118,14 @@ const getGridStringOperators = () => [{
       return null;
     }
 
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.map(val => val.trim());
     const collator = new Intl.Collator(undefined, {
       sensitivity: 'base',
       usage: 'search'
     });
     return ({
       value
-    }) => value != null ? filterItem.value.some(filterValue => {
+    }) => value != null ? filterItemValue.some(filterValue => {
       return collator.compare(filterValue, value.toString() || '') === 0;
     }) : false;
   },

package/node/components/GridRow.js

@@ -139,7 +139,7 @@ function GridRow(props) {
       // Fallback for IE
       apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
     }
-  });
+  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the