@mui/x-data-grid 6.10.0 → 6.10.2

package/legacy/components/GridRow.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -69,6 +69,8 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     lastColumnToRender = props.lastColumnToRender,
     _props$isLastVisible = props.isLastVisible,
     isLastVisible = _props$isLastVisible === void 0 ? false : _props$isLastVisible,
+    focusedCellColumnIndexNotInRange = props.focusedCellColumnIndexNotInRange,
+    isNotVisible = props.isNotVisible,
     focusedCell = props.focusedCell,
     tabbableCell = props.tabbableCell,
     onClick = props.onClick,
@@ -180,7 +182,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
 
       // User clicked a button from the "actions" column type
       var column = apiRef.current.getColumn(field);
-      if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+      if ((column == null ? void 0 : column.type) === GRID_ACTIONS_COLUMN_TYPE) {
         return;
       }
     }
@@ -195,6 +197,10 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     var _editRowsState$rowId$, _editRowsState$rowId;
     var disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
     var editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
+    var cellIsNotVisible = false;
+    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+      cellIsNotVisible = true;
+    }
     return /*#__PURE__*/_jsx(CellComponent, _extends({
       column: column,
       width: cellProps.width,
@@ -205,7 +211,8 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       colIndex: cellProps.indexRelativeToAllColumns,
       colSpan: cellProps.colSpan,
       disableDragEvents: disableDragEvents,
-      editCellState: editCellState
+      editCellState: editCellState,
+      isNotVisible: cellIsNotVisible
     }, slotProps == null ? void 0 : slotProps.cell), column.field);
   };
   var sizes = useGridSelector(apiRef, function () {
@@ -232,25 +239,35 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       minHeight = maximumSize;
     }
   }
-  var style = _extends({}, styleProp, {
-    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
-    // max-height doesn't support "auto"
-    minHeight: minHeight
-  });
-  if (sizes != null && sizes.spacingTop) {
-    var property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-    style[property] = sizes.spacingTop;
-  }
-  if (sizes != null && sizes.spacingBottom) {
-    var _property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-    var propertyValue = style[_property];
-    // avoid overriding existing value
-    if (typeof propertyValue !== 'number') {
-      propertyValue = parseInt(propertyValue || '0', 10);
+  var style = React.useMemo(function () {
+    if (isNotVisible) {
+      return {
+        opacity: 0,
+        width: 0,
+        height: 0
+      };
     }
-    propertyValue += sizes.spacingBottom;
-    style[_property] = propertyValue;
-  }
+    var rowStyle = _extends({}, styleProp, {
+      maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+      // max-height doesn't support "auto"
+      minHeight: minHeight
+    });
+    if (sizes != null && sizes.spacingTop) {
+      var property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+      rowStyle[property] = sizes.spacingTop;
+    }
+    if (sizes != null && sizes.spacingBottom) {
+      var _property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+      var propertyValue = rowStyle[_property];
+      // avoid overriding existing value
+      if (typeof propertyValue !== 'number') {
+        propertyValue = parseInt(propertyValue || '0', 10);
+      }
+      propertyValue += sizes.spacingBottom;
+      rowStyle[_property] = propertyValue;
+    }
+    return rowStyle;
+  }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
   var rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   if (typeof rootProps.getRowClassName === 'function') {
     var _currentPage$range;
@@ -272,6 +289,13 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   for (var i = 0; i < renderedColumns.length; i += 1) {
     var column = renderedColumns[i];
     var indexRelativeToAllColumns = firstColumnToRender + i;
+    if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
+      if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+        indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
+      } else {
+        indexRelativeToAllColumns -= 1;
+      }
+    }
     var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
       if (rowType !== 'skeletonRow') {
@@ -331,12 +355,14 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    * If `null`, no cell in this row has focus.
    */
   focusedCell: PropTypes.string,
+  focusedCellColumnIndexNotInRange: PropTypes.number,
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
    */
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
+  isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,

package/legacy/components/cell/GridCell.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["changeReason", "unstable_updateValueOnRender"],
-  _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"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import * as React from 'react';
@@ -173,6 +173,7 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     row = props.row,
     colSpan = props.colSpan,
     disableDragEvents = props.disableDragEvents,
+    isNotVisible = props.isNotVisible,
     onClick = props.onClick,
     onDoubleClick = props.onDoubleClick,
     onMouseDown = props.onMouseDown,
@@ -228,13 +229,23 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }, [apiRef, field, rowId]);
-  var style = {
-    minWidth: width,
-    maxWidth: width,
-    minHeight: height,
-    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-  };
+  var style = React.useMemo(function () {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0
+      };
+    }
+    var cellStyle = {
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
+    };
 
+    return cellStyle;
+  }, [width, height, isNotVisible]);
   React.useEffect(function () {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -354,6 +365,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: PropTypes.bool,
     value: PropTypes.any
   }),
+  isNotVisible: PropTypes.bool,
   height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
@@ -383,6 +395,7 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     row = props.row,
     colSpan = props.colSpan,
     disableDragEvents = props.disableDragEvents,
+    isNotVisible = props.isNotVisible,
     onClick = props.onClick,
     onDoubleClick = props.onDoubleClick,
     onMouseDown = props.onMouseDown,
@@ -480,13 +493,23 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }, [apiRef, field, rowId]);
-  var style = {
-    minWidth: width,
-    maxWidth: width,
-    minHeight: height,
-    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-  };
+  var style = React.useMemo(function () {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0
+      };
+    }
+    var cellStyle = {
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
+    };
 
+    return cellStyle;
+  }, [width, height, isNotVisible]);
   React.useEffect(function () {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -602,6 +625,7 @@ process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
     value: PropTypes.any
   }),
   height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  isNotVisible: PropTypes.bool,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onDragEnter: PropTypes.func,

package/legacy/components/containers/GridRootStyles.js

@@ -39,6 +39,7 @@ export var GridRootStyles = styled('div', {
     '--unstable_DataGrid-radius': typeof radius === 'number' ? "".concat(radius, "px") : radius,
     '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
     '--unstable_DataGrid-overlayBackground': theme.vars ? "rgba(".concat(theme.vars.palette.background.defaultChannel, " / ").concat(theme.vars.palette.action.disabledOpacity, ")") : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
+    '--DataGrid-cellOffsetMultiplier': 2,
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',

package/legacy/components/panel/GridPanel.js

@@ -86,8 +86,8 @@ var GridPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     anchorEl = _React$useState4[0],
     setAnchorEl = _React$useState4[1];
   React.useEffect(function () {
-    var _apiRef$current$rootE, _apiRef$current$rootE2;
-    var columnHeadersElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.querySelector(".".concat(gridClasses.columnHeaders));
+    var _apiRef$current$rootE;
+    var columnHeadersElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.querySelector(".".concat(gridClasses.columnHeaders));
     if (columnHeadersElement) {
       setAnchorEl(columnHeadersElement);
     }

package/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -247,7 +247,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
       focus: function focus() {
         if (currentOperator != null && currentOperator.InputComponent) {
           var _valueRef$current;
-          valueRef == null ? void 0 : (_valueRef$current = valueRef.current) == null ? void 0 : _valueRef$current.focus();
+          valueRef == null || (_valueRef$current = valueRef.current) == null ? void 0 : _valueRef$current.focus();
         } else {
           filterSelectorRef.current.focus();
         }
@@ -348,7 +348,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         native: isBaseSelectNative,
         inputRef: filterSelectorRef
       }, (_rootProps$slotProps8 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps8.baseSelect, {
-        children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(function (operator) {
+        children: currentColumn == null || (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(function (operator) {
           return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
             native: isBaseSelectNative,
             key: operator.value,

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

@@ -43,7 +43,7 @@ var SingleSelectOperatorContainer = styled('div')(_defineProperty({
   margin: 'auto 0px 5px 5px'
 }));
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
+  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   var item = props.item,
     applyValue = props.applyValue,
     type = props.type,
@@ -64,7 +64,7 @@ function GridFilterInputSingleSelect(props) {
   var id = useId();
   var labelId = useId();
   var rootProps = useGridRootProps();
-  var isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : (_rootProps$slotProps$2 = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps$2.native) != null ? _rootProps$slotProps$ : true;
+  var isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null || (_rootProps$slotProps = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps.native) != null ? _rootProps$slotProps$ : true;
   var resolvedColumn = null;
   if (item.field) {
     var column = apiRef.current.getColumn(item.field);

package/legacy/hooks/features/columns/gridColumnsUtils.js

@@ -208,8 +208,15 @@ export var applyInitialState = function applyInitialState(columnsState, initialS
   });
   return newColumnsState;
 };
+function getDefaultColTypeDef(columnTypes, type) {
+  var colDef = columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
+  if (type && columnTypes[type]) {
+    colDef = columnTypes[type];
+  }
+  return colDef;
+}
 export var createColumnsState = function createColumnsState(_ref5) {
-  var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
+  var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current;
   var apiRef = _ref5.apiRef,
     columnsToUpsert = _ref5.columnsToUpsert,
     initialState = _ref5.initialState,
@@ -248,11 +255,7 @@ export var createColumnsState = function createColumnsState(_ref5) {
     columnsToKeep[field] = true;
     var existingState = columnsState.lookup[field];
     if (existingState == null) {
-      var colDef = columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
-      if (newColumn.type && columnTypes[newColumn.type]) {
-        colDef = columnTypes[newColumn.type];
-      }
-      existingState = _extends({}, colDef, {
+      existingState = _extends({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
         field: field,
         hasBeenResized: false
       });
@@ -260,6 +263,13 @@ export var createColumnsState = function createColumnsState(_ref5) {
     } else if (keepOnlyColumnsToUpsert) {
       columnsState.orderedFields.push(field);
     }
+
+    // If the column type has changed - merge the existing state with the default column type definition
+    if (existingState && existingState.type !== newColumn.type) {
+      existingState = _extends({}, existingState, getDefaultColTypeDef(columnTypes, newColumn.type), {
+        field: field
+      });
+    }
     var hasBeenResized = existingState.hasBeenResized;
     COLUMNS_DIMENSION_PROPERTIES.forEach(function (key) {
       if (newColumn[key] !== undefined) {
@@ -282,7 +292,7 @@ export var createColumnsState = function createColumnsState(_ref5) {
   }
   var columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   var columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null || (_apiRef$current$getRo2 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
 };
 export var mergeColumnsState = function mergeColumnsState(columnsState) {
   return function (state) {

package/legacy/hooks/features/columns/useGridColumns.js

@@ -13,13 +13,13 @@ import { getGridDefaultColumnTypes } from '../../../colDef';
 import { jsx as _jsx } from "react/jsx-runtime";
 var defaultColumnTypes = getGridDefaultColumnTypes();
 export var columnsStateInitializer = function columnsStateInitializer(state, props, apiRef) {
-  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2, _props$initialState2$;
+  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2;
   var columnsState = createColumnsState({
     apiRef: apiRef,
     columnTypes: defaultColumnTypes,
     columnsToUpsert: props.columns,
     initialState: (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.columns,
-    columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.columns) == null ? void 0 : _props$initialState2$.columnVisibilityModel) != null ? _ref : {},
+    columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.columns) == null ? void 0 : _props$initialState2.columnVisibilityModel) != null ? _ref : {},
     keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
@@ -173,7 +173,7 @@ export function useGridColumns(apiRef, props) {
    * PRE-PROCESSING
    */
   var stateExportPreProcessing = React.useCallback(function (prevState, context) {
-    var _props$initialState$c, _props$initialState3, _props$initialState3$;
+    var _props$initialState$c, _props$initialState3;
     var columnsStateToExport = {};
     var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
     var shouldExportColumnVisibilityModel =
@@ -183,7 +183,7 @@ export function useGridColumns(apiRef, props) {
     props.columnVisibilityModel != null ||
     // Always export if the model has been initialized
     // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
-    Object.keys((_props$initialState$c = (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.columns) == null ? void 0 : _props$initialState3$.columnVisibilityModel) != null ? _props$initialState$c : {}).length > 0 ||
+    Object.keys((_props$initialState$c = (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.columns) == null ? void 0 : _props$initialState3.columnVisibilityModel) != null ? _props$initialState$c : {}).length > 0 ||
     // Always export if the model is not empty
     Object.keys(columnVisibilityModelToExport).length > 0;
     if (shouldExportColumnVisibilityModel) {

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

@@ -81,7 +81,7 @@ export function useGridDimensions(apiRef, props) {
     } else {
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height - totalHeaderHeight
+        height: Math.max(rootDimensionsRef.current.height - totalHeaderHeight, 0)
       };
       var scrollInformation = hasScroll({
         content: {

package/legacy/hooks/features/editing/useGridCellEditing.js

@@ -345,7 +345,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   }());
   var setCellEditingEditCellValue = React.useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(params) {
-      var _editingState$id, _editingState$id$fiel2;
+      var _editingState$id;
       var id, field, value, debounceMs, skipValueParser, column, row, parsedValue, editingState, newProps, hasChanged;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -399,7 +399,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
             newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
             updateOrDeleteFieldState(id, field, newProps);
             editingState = gridEditRowsStateSelector(apiRef.current.state);
-            return _context2.abrupt("return", !((_editingState$id = editingState[id]) != null && (_editingState$id$fiel2 = _editingState$id[field]) != null && _editingState$id$fiel2.error));
+            return _context2.abrupt("return", !((_editingState$id = editingState[id]) != null && (_editingState$id = _editingState$id[field]) != null && _editingState$id.error));
           case 24:
           case "end":
             return _context2.stop();
@@ -451,11 +451,11 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
         id = _ref4[0],
         fields = _ref4[1];
       Object.entries(fields).forEach(function (_ref5) {
-        var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;
+        var _copyOfPrevCellModes$, _idToIdLookup$id;
         var _ref6 = _slicedToArray(_ref5, 2),
           field = _ref6[0],
           params = _ref6[1];
-        var prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null ? void 0 : (_copyOfPrevCellModes$2 = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$2.mode) || GridCellModes.View;
+        var prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null || (_copyOfPrevCellModes$ = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$.mode) || GridCellModes.View;
         var originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
           updateStateToStartCellEditMode(_extends({

package/legacy/hooks/features/export/serializers/csvSerializer.js

@@ -4,15 +4,13 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
 function sanitizeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
-    var formattedValue = value.replace(/"/g, '""');
-
     // Make sure value containing delimiter or line break won't be split into multiple rows
-    if ([delimiterCharacter, '\n', '\r'].some(function (delimiter) {
-      return formattedValue.includes(delimiter);
+    if ([delimiterCharacter, '\n', '\r', '"'].some(function (delimiter) {
+      return value.includes(delimiter);
     })) {
-      return "\"".concat(formattedValue, "\"");
+      return "\"".concat(value.replace(/"/g, '""'), "\"");
     }
-    return formattedValue;
+    return value;
   }
   return value;
 }

package/legacy/hooks/features/export/useGridPrintExport.js

@@ -131,11 +131,12 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
       var _printDoc$body$classL;
       (_printDoc$body$classL = printDoc.body.classList).add.apply(_printDoc$body$classL, _toConsumableArray(normalizeOptions.bodyClassName.split(' ')));
     }
+    var stylesheetLoadPromises = [];
     if (normalizeOptions.copyStyles) {
       var rootCandidate = gridRootElement.getRootNode();
       var root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc.current;
       var headStyleElements = root.querySelectorAll("style, link[rel='stylesheet']");
-      for (var i = 0; i < headStyleElements.length; i += 1) {
+      var _loop = function _loop() {
         var node = headStyleElements[i];
         if (node.tagName === 'STYLE') {
           var newHeadStyleElements = printDoc.createElement(node.tagName);
@@ -161,24 +162,35 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
               _newHeadStyleElements.setAttribute(attr.nodeName, attr.nodeValue || '');
             }
           }
+          stylesheetLoadPromises.push(new Promise(function (resolve) {
+            _newHeadStyleElements.addEventListener('load', function () {
+              return resolve();
+            });
+          }));
           printDoc.head.appendChild(_newHeadStyleElements);
         }
+      };
+      for (var i = 0; i < headStyleElements.length; i += 1) {
+        _loop();
       }
     }
 
     // Trigger print
     if (process.env.NODE_ENV !== 'test') {
-      printWindow.contentWindow.print();
+      // wait for remote stylesheets to load
+      Promise.all(stylesheetLoadPromises).then(function () {
+        printWindow.contentWindow.print();
+      });
     }
   }, [apiRef, doc, props.columnHeaderHeight]);
   var handlePrintWindowAfterPrint = React.useCallback(function (printWindow) {
-    var _previousGridState$cu, _previousGridState$cu2;
+    var _previousGridState$cu;
     // Remove the print iframe
     doc.current.body.removeChild(printWindow);
 
     // Revert grid to previous state
     apiRef.current.restoreState(previousGridState.current || {});
-    if (!((_previousGridState$cu = previousGridState.current) != null && (_previousGridState$cu2 = _previousGridState$cu.columns) != null && _previousGridState$cu2.columnVisibilityModel)) {
+    if (!((_previousGridState$cu = previousGridState.current) != null && (_previousGridState$cu = _previousGridState$cu.columns) != null && _previousGridState$cu.columnVisibilityModel)) {
       // if the apiRef.current.exportState(); did not exported the column visibility, we update it
       apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current);
     }

package/legacy/hooks/features/export/utils.js

@@ -30,10 +30,10 @@ export var defaultGetRowsToExport = function defaultGetRowsToExport(_ref2) {
     return rowTree[id].type !== 'footer';
   });
   var pinnedRows = gridPinnedRowsSelector(apiRef);
-  var topPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(function (row) {
+  var topPinnedRowsIds = (pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(function (row) {
     return row.id;
   })) || [];
-  var bottomPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(function (row) {
+  var bottomPinnedRowsIds = (pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(function (row) {
     return row.id;
   })) || [];
   bodyRows.unshift.apply(bodyRows, _toConsumableArray(topPinnedRowsIds));

package/legacy/hooks/features/filter/gridFilterSelector.js

@@ -136,7 +136,7 @@ export var gridFilterActiveItemsSelector = createSelectorMemoized(gridFilterMode
       return false;
     }
     var column = columnLookup[item.field];
-    if (!(column != null && column.filterOperators) || (column == null ? void 0 : (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.length) === 0) {
+    if (!(column != null && column.filterOperators) || (column == null || (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.length) === 0) {
       return false;
     }
     var filterOperator = column.filterOperators.find(function (operator) {

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

@@ -132,6 +132,7 @@ var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, a
     }
   };
 };
+var filterItemsApplierId = 1;
 
 /**
  * Generates a method to easily check if a row is matching the current filter model.
@@ -150,16 +151,35 @@ export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterIte
   if (appliers.length === 0) {
     return null;
   }
-  return function (row, shouldApplyFilter) {
-    var resultPerItemId = {};
-    for (var i = 0; i < appliers.length; i += 1) {
-      var applier = appliers[i];
-      if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
-        resultPerItemId[applier.item.id] = applier.v7 ? applier.fn(row) : applier.fn(getRowId ? getRowId(row) : row.id);
-      }
-    }
-    return resultPerItemId;
-  };
+
+  // Original logic:
+  // return (row, shouldApplyFilter) => {
+  //   const resultPerItemId: GridFilterItemResult = {};
+  //
+  //   for (let i = 0; i < appliers.length; i += 1) {
+  //     const applier = appliers[i];
+  //     if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
+  //       resultPerItemId[applier.item.id!] = applier.v7
+  //         ? applier.fn(row)
+  //         : applier.fn(getRowId ? getRowId(row) : row.id);
+  //     }
+  //   }
+  //
+  //   return resultPerItemId;
+  // };
+
+  // We generate a new function with `eval()` to avoid expensive patterns for JS engines
+  // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
+  var filterItemTemplate = "(function filterItem$$(row, shouldApplyFilter) {\n      ".concat(appliers.map(function (applier, i) {
+    return "const shouldApply".concat(i, " = !shouldApplyFilter || shouldApplyFilter(").concat(JSON.stringify(applier.item.field), ");");
+  }).join('\n'), "\n\n      const result$$ = {\n      ").concat(appliers.map(function (applier, i) {
+    return "".concat(JSON.stringify(String(applier.item.id)), ":\n          !shouldApply").concat(i, " ?\n            false :\n            ").concat(applier.v7 ? "appliers[".concat(i, "].fn(row)") : "appliers[".concat(i, "].fn(").concat(getRowId ? 'getRowId(row)' : 'row.id', ")"), ",\n      ");
+  }).join('\n'), "};\n\n      return result$$;\n    })");
+
+  // eslint-disable-next-line no-eval
+  var filterItem = eval(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
+  filterItemsApplierId += 1;
+  return filterItem;
 };
 
 /**