@mui/x-data-grid 6.9.0 → 6.9.2

package/modern/colDef/gridBooleanOperators.js

@@ -1,16 +1,15 @@
 import { GridFilterInputBoolean } from '../components/panel/filterPanel/GridFilterInputBoolean';
-export const getGridBooleanOperators = () => [{
+import { convertLegacyOperators } from './utils';
+export const getGridBooleanOperators = () => convertLegacyOperators([{
   value: 'is',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const valueAsBoolean = filterItem.value === 'true';
-    return ({
-      value
-    }) => {
+    return value => {
       return Boolean(value) === valueAsBoolean;
     };
   },
   InputComponent: GridFilterInputBoolean
-}];
+}]);

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -19,6 +19,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
   valueGetter: params => {
     const selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
     return selectionLookup[params.id] !== undefined;

package/modern/colDef/gridDateColDef.js

@@ -52,6 +52,7 @@ export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridDateOperators(),
   renderEditCell: renderEditDateCell,
   getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
 });
@@ -62,6 +63,7 @@ export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridDateOperators(true),
   renderEditCell: renderEditDateCell,
   getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
 });

package/modern/colDef/gridDateOperators.js

@@ -1,4 +1,5 @@
 import { GridFilterInputDate } from '../components/panel/filterPanel/GridFilterInputDate';
+import { convertLegacyOperators } from './utils';
 const dateRegex = /(\d+)-(\d+)-(\d+)/;
 const dateTimeRegex = /(\d+)-(\d+)-(\d+)T(\d+):(\d+)/;
 function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
@@ -7,9 +8,7 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
   }
   const [year, month, day, hour, minute] = filterItem.value.match(showTime ? dateTimeRegex : dateRegex).slice(1).map(Number);
   const time = new Date(year, month - 1, day, hour || 0, minute || 0).getTime();
-  return ({
-    value
-  }) => {
+  return value => {
     if (!value) {
       return false;
     }
@@ -23,9 +22,9 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
     return compareFn(timeToCompare, time);
   };
 }
-export const getGridDateOperators = showTime => [{
+export const getGridDateOperators = showTime => convertLegacyOperators([{
   value: 'is',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 === value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -34,7 +33,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'not',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 !== value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -43,7 +42,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'after',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -52,7 +51,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'onOrAfter',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -61,7 +60,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'before',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, !showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -70,7 +69,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'onOrBefore',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -79,22 +78,18 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value == null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value != null;
     };
   },
   requiresFilterValue: false
-}];
+}]);

package/modern/colDef/gridNumericColDef.js

@@ -3,6 +3,7 @@ import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils
 import { isNumber } from '../utils/utils';
 import { getGridNumericOperators, getGridNumericQuickFilterFn } from './gridNumericOperators';
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { convertQuickFilterV7ToLegacy } from './utils';
 export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'number',
   align: 'right',
@@ -13,5 +14,6 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
     value
   }) => isNumber(value) ? value.toLocaleString() : value || '',
   filterOperators: getGridNumericOperators(),
-  getApplyQuickFilterFn: getGridNumericQuickFilterFn
+  getApplyQuickFilterFn: convertQuickFilterV7ToLegacy(getGridNumericQuickFilterFn),
+  getApplyQuickFilterFnV7: getGridNumericQuickFilterFn
 });

package/modern/colDef/gridNumericOperators.js

@@ -1,30 +1,27 @@
 import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+import { convertLegacyOperators, tagInternalFilter } from './utils';
 const parseNumericValue = value => {
   if (value == null) {
     return null;
   }
   return Number(value);
 };
-export const getGridNumericQuickFilterFn = value => {
+export const getGridNumericQuickFilterFn = tagInternalFilter(value => {
   if (value == null || Number.isNaN(value) || value === '') {
     return null;
   }
-  return ({
-    value: columnValue
-  }) => {
+  return columnValue => {
     return parseNumericValue(columnValue) === parseNumericValue(value);
   };
-};
-export const getGridNumericOperators = () => [{
+});
+export const getGridNumericOperators = () => convertLegacyOperators([{
   value: '=',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       return parseNumericValue(value) === filterItem.value;
     };
   },
@@ -34,13 +31,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '!=',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       return parseNumericValue(value) !== filterItem.value;
     };
   },
@@ -50,13 +45,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '>',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       if (value == null) {
         return false;
       }
@@ -69,13 +62,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '>=',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       if (value == null) {
         return false;
       }
@@ -88,13 +79,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '<',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       if (value == null) {
         return false;
       }
@@ -107,13 +96,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '<=',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       if (value == null) {
         return false;
       }
@@ -126,33 +113,27 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value == null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value != null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isAnyOf',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null && filterItem.value.includes(Number(value));
     };
   },
@@ -160,4 +141,4 @@ export const getGridNumericOperators = () => [{
   InputComponentProps: {
     type: 'number'
   }
-}];
+}]);

package/modern/colDef/gridSingleSelectOperators.js

@@ -1,44 +1,39 @@
 import { GridFilterInputSingleSelect } from '../components/panel/filterPanel/GridFilterInputSingleSelect';
 import { GridFilterInputMultipleSingleSelect } from '../components/panel/filterPanel/GridFilterInputMultipleSingleSelect';
 import { isObject } from '../utils/utils';
+import { convertLegacyOperators } from './utils';
 const parseObjectValue = value => {
   if (value == null || !isObject(value)) {
     return value;
   }
   return value.value;
 };
-export const getGridSingleSelectOperators = () => [{
+export const getGridSingleSelectOperators = () => convertLegacyOperators([{
   value: 'is',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || filterItem.value === '') {
       return null;
     }
-    return ({
-      value
-    }) => parseObjectValue(value) === parseObjectValue(filterItem.value);
+    return value => parseObjectValue(value) === parseObjectValue(filterItem.value);
   },
   InputComponent: GridFilterInputSingleSelect
 }, {
   value: 'not',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || filterItem.value === '') {
       return null;
     }
-    return ({
-      value
-    }) => parseObjectValue(value) !== parseObjectValue(filterItem.value);
+    return value => parseObjectValue(value) !== parseObjectValue(filterItem.value);
   },
   InputComponent: GridFilterInputSingleSelect
 }, {
   value: 'isAnyOf',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
     const filterItemValues = filterItem.value.map(parseObjectValue);
-    return ({
-      value
-    }) => filterItemValues.includes(parseObjectValue(value));
+    return value => filterItemValues.includes(parseObjectValue(value));
   },
   InputComponent: GridFilterInputMultipleSingleSelect
-}];
+}]);

package/modern/colDef/gridStringColDef.js

@@ -1,6 +1,7 @@
 import { renderEditInputCell } from '../components/cell/GridEditInputCell';
 import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
+import { convertQuickFilterV7ToLegacy } from './utils';
 
 /**
  * TODO: Move pro and premium properties outside of this Community file
@@ -23,5 +24,6 @@ export const GRID_STRING_COL_DEF = {
   align: 'left',
   filterOperators: getGridStringOperators(),
   renderEditCell: renderEditInputCell,
-  getApplyQuickFilterFn: getGridStringQuickFilterFn
+  getApplyQuickFilterFn: convertQuickFilterV7ToLegacy(getGridStringQuickFilterFn),
+  getApplyQuickFilterFnV7: getGridStringQuickFilterFn
 };

package/modern/colDef/gridStringOperators.js

@@ -1,35 +1,33 @@
 import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
 import { escapeRegExp } from '../utils/utils';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
-export const getGridStringQuickFilterFn = value => {
+import { convertLegacyOperators, tagInternalFilter } from './utils';
+export const getGridStringQuickFilterFn = tagInternalFilter(value => {
   if (!value) {
     return null;
   }
   const filterRegex = new RegExp(escapeRegExp(value), 'i');
-  return ({
-    formattedValue: columnValue
-  }) => {
+  return (_, row, column, apiRef) => {
+    const columnValue = apiRef.current.getRowFormattedValue(row, column);
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
-};
-export const getGridStringOperators = (disableTrim = false) => [{
+});
+export const getGridStringOperators = (disableTrim = false) => convertLegacyOperators([{
   value: 'contains',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
-    return ({
-      value
-    }) => {
-      return value != null ? filterRegex.test(value.toString()) : false;
+    return value => {
+      return value != null ? filterRegex.test(String(value)) : false;
     };
   },
   InputComponent: GridFilterInputValue
 }, {
   value: 'equals',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
@@ -38,66 +36,56 @@ export const getGridStringOperators = (disableTrim = false) => [{
       sensitivity: 'base',
       usage: 'search'
     });
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
     };
   },
   InputComponent: GridFilterInputValue
 }, {
   value: 'startsWith',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const filterRegex = new RegExp(`^${escapeRegExp(filterItemValue)}.*$`, 'i');
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null ? filterRegex.test(value.toString()) : false;
     };
   },
   InputComponent: GridFilterInputValue
 }, {
   value: 'endsWith',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const filterRegex = new RegExp(`.*${escapeRegExp(filterItemValue)}$`, 'i');
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null ? filterRegex.test(value.toString()) : false;
     };
   },
   InputComponent: GridFilterInputValue
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value === '' || value == null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value !== '' && value != null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isAnyOf',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
@@ -106,11 +94,9 @@ export const getGridStringOperators = (disableTrim = false) => [{
       sensitivity: 'base',
       usage: 'search'
     });
-    return ({
-      value
-    }) => value != null ? filterItemValue.some(filterValue => {
+    return value => value != null ? filterItemValue.some(filterValue => {
       return collator.compare(filterValue, value.toString() || '') === 0;
     }) : false;
   },
   InputComponent: GridFilterInputMultipleValue
-}];
+}]);

package/modern/colDef/utils.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/**
+ * A global API ref, for v7-to-legacy converter
+ */
+export const GLOBAL_API_REF = {
+  current: null
+};
+
+/**
+ * A tagger to determine if the filter is internal or custom user-supplied.
+ * To be a valid internal filter, the V7 function *must* be defined/redefined at
+ * the same time as the legacy one.
+ * https://github.com/mui/mui-x/pull/9254#discussion_r1231095551
+ */
+export function tagInternalFilter(fn) {
+  fn.isInternal = true;
+  return fn;
+}
+export function isInternalFilter(fn) {
+  return fn !== undefined && fn.isInternal === true;
+}
+export function convertFilterV7ToLegacy(fn) {
+  return tagInternalFilter((filterItem, column) => {
+    const filterFn = fn(filterItem, column);
+    if (!filterFn) {
+      return filterFn;
+    }
+    return cellParams => {
+      return filterFn(cellParams.value, cellParams.row, column, GLOBAL_API_REF.current);
+    };
+  });
+}
+export function convertLegacyOperators(ops) {
+  return ops.map(op => {
+    return _extends({}, op, {
+      getApplyFilterFn: convertFilterV7ToLegacy(op.getApplyFilterFnV7),
+      getApplyFilterFnV7: tagInternalFilter(op.getApplyFilterFnV7)
+    });
+  });
+}
+export function convertQuickFilterV7ToLegacy(fn) {
+  return tagInternalFilter((filterItem, column, apiRef) => {
+    const filterFn = fn(filterItem, column, apiRef);
+    if (!filterFn) {
+      return filterFn;
+    }
+    return cellParams => {
+      return filterFn(cellParams.value, cellParams.row, column, apiRef);
+    };
+  });
+}

package/modern/components/GridPagination.js

@@ -38,21 +38,35 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
   const handlePageChange = React.useCallback((_, page) => {
     apiRef.current.setPage(page);
   }, [apiRef]);
+  const isPageSizeIncludedInPageSizeOptions = pageSize => {
+    for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      const option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     ref: ref,
     component: "div",
     count: rowCount,
     page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
-    rowsPerPageOptions: rootProps.pageSizeOptions?.includes(paginationModel.pageSize) ? rootProps.pageSizeOptions : [],
+    rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange

package/modern/components/cell/GridCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["changeReason", "unstable_updateValueOnRender"],
-  _excluded2 = ["align", "children", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

package/modern/components/cell/GridEditDateCell.js

@@ -111,7 +111,7 @@ function GridEditDateCell(props) {
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   const handleInputRef = el => {
     inputRef.current = el;
-    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+    if (meta?.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
       const inputValue = inputRef.current.value;
       const parsedDate = parseValueToDate(inputValue);
       setValueState({

package/modern/components/cell/GridEditInputCell.js

@@ -68,12 +68,12 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       unstable_skipValueParser: true
     }, event);
   }, [apiRef, debounceMs, field, id, onValueChange]);
-  const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {
-    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+    if (meta?.changeReason !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
-  }, [meta.changeReason, value]);
+  }, [meta, value]);
   useEnhancedEffect(() => {
     if (hasFocus) {
       inputRef.current.focus();