@mui/x-data-grid 7.0.0-alpha.7 → 7.0.0-alpha.9

package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -12,7 +12,7 @@ import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
-import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
+import { gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
@@ -140,10 +140,6 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       // There is one exception for the checkBoxHeader
       return;
     }
-    var dimensions = apiRef.current.getRootDimensions();
-    if (!dimensions) {
-      return;
-    }
     var viewportPageSize = apiRef.current.getViewportPageSize();
     var colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     var firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
@@ -236,10 +232,6 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     }
   }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, theme.direction, goToHeader, goToGroupHeader]);
   var handleHeaderFilterKeyDown = React.useCallback(function (params, event) {
-    var dimensions = apiRef.current.getRootDimensions();
-    if (!dimensions) {
-      return;
-    }
     var isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
     var isHeaderMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === params.field;
     if (isEditing || isHeaderMenuOpen || !isNavigationKey(event.key)) {
@@ -326,11 +318,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     }
   }, [apiRef, currentPageRows.length, goToHeaderFilter, theme.direction, goToHeader, goToCell, getRowIdFromIndex]);
   var handleColumnGroupHeaderKeyDown = React.useCallback(function (params, event) {
-    var dimensions = apiRef.current.getRootDimensions();
-    if (!dimensions) {
-      return;
-    }
-    var focusedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef);
+    var focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef);
     if (focusedColumnGroup === null) {
       return;
     }
@@ -429,8 +417,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     if (!canUpdateFocus) {
       return;
     }
-    var dimensions = apiRef.current.getRootDimensions();
-    if (currentPageRows.length === 0 || !dimensions) {
+    if (currentPageRows.length === 0) {
       return;
     }
     var direction = theme.direction;

package/legacy/hooks/features/pagination/gridPaginationUtils.js

@@ -10,7 +10,7 @@ export var getPageCount = function getPageCount(rowCount, pageSize) {
   }
   return 0;
 };
-export var noRowCountInServerMode = buildWarning(["MUI: the 'rowCount' prop is undefined while using paginationMode='server'", 'For more detail, see http://mui.com/components/data-grid/pagination/#basic-implementation'], 'error');
+export var noRowCountInServerMode = buildWarning(["MUI X: the 'rowCount' prop is undefined while using paginationMode='server'", 'For more detail, see http://mui.com/components/data-grid/pagination/#basic-implementation'], 'error');
 export var getDefaultGridPaginationModel = function getDefaultGridPaginationModel(autoPageSize) {
   return {
     page: 0,
@@ -26,6 +26,6 @@ export var getValidPage = function getValidPage(page) {
 };
 export var throwIfPageSizeExceedsTheLimit = function throwIfPageSizeExceedsTheLimit(pageSize, signatureProp) {
   if (signatureProp === GridSignature.DataGrid && pageSize > MAX_PAGE_SIZE) {
-    throw new Error(['MUI: `pageSize` cannot exceed 100 in the MIT version of the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+    throw new Error(['MUI X: `pageSize` cannot exceed 100 in the MIT version of the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
   }
 };

package/legacy/hooks/features/pagination/useGridPagination.js

@@ -5,7 +5,6 @@ import { gridDensityFactorSelector } from '../density';
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { gridPaginationModelSelector } from './gridPaginationSelector';
-import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 import { getPageCount, noRowCountInServerMode, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from './gridPaginationUtils';
 export var paginationStateInitializer = function paginationStateInitializer(state, props) {
   var _props$paginationMode, _props$initialState;
@@ -146,12 +145,11 @@ export var useGridPagination = function useGridPagination(apiRef, props) {
     apiRef.current.forceUpdate();
   };
   var handleUpdateAutoPageSize = React.useCallback(function () {
-    var dimensions = apiRef.current.getRootDimensions();
-    if (!props.autoPageSize || !dimensions) {
+    if (!props.autoPageSize) {
       return;
     }
-    var pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
-    var maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
+    var dimensions = apiRef.current.getRootDimensions();
+    var maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);

package/legacy/hooks/features/rowSelection/useGridRowSelection.js

@@ -101,7 +101,7 @@ export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
    */
   var setRowSelectionModel = React.useCallback(function (model) {
     if (props.signature === GridSignature.DataGrid && !canHaveMultipleSelection && Array.isArray(model) && model.length > 1) {
-      throw new Error(['MUI: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
+      throw new Error(['MUI X: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
     var currentModel = gridRowSelectionStateSelector(apiRef.current.state);
     if (currentModel !== model) {

package/legacy/hooks/features/rows/gridRowsSelector.js

@@ -61,23 +61,23 @@ export var gridAdditionalRowGroupsSelector = createSelector(gridRowsStateSelecto
  * @ignore - do not document.
  */
 export var gridPinnedRowsSelector = createSelectorMemoized(gridAdditionalRowGroupsSelector, function (additionalRowGroups) {
-  var _rawPinnedRows$bottom, _rawPinnedRows$top;
+  var _rawPinnedRows$bottom, _rawPinnedRows$bottom2, _rawPinnedRows$top$ma, _rawPinnedRows$top;
   var rawPinnedRows = additionalRowGroups == null ? void 0 : additionalRowGroups.pinnedRows;
   return {
-    bottom: rawPinnedRows == null || (_rawPinnedRows$bottom = rawPinnedRows.bottom) == null ? void 0 : _rawPinnedRows$bottom.map(function (rowEntry) {
+    bottom: (_rawPinnedRows$bottom = rawPinnedRows == null || (_rawPinnedRows$bottom2 = rawPinnedRows.bottom) == null ? void 0 : _rawPinnedRows$bottom2.map(function (rowEntry) {
       var _rowEntry$model;
       return {
         id: rowEntry.id,
         model: (_rowEntry$model = rowEntry.model) != null ? _rowEntry$model : {}
       };
-    }),
-    top: rawPinnedRows == null || (_rawPinnedRows$top = rawPinnedRows.top) == null ? void 0 : _rawPinnedRows$top.map(function (rowEntry) {
+    })) != null ? _rawPinnedRows$bottom : [],
+    top: (_rawPinnedRows$top$ma = rawPinnedRows == null || (_rawPinnedRows$top = rawPinnedRows.top) == null ? void 0 : _rawPinnedRows$top.map(function (rowEntry) {
       var _rowEntry$model2;
       return {
         id: rowEntry.id,
         model: (_rowEntry$model2 = rowEntry.model) != null ? _rowEntry$model2 : {}
       };
-    })
+    })) != null ? _rawPinnedRows$top$ma : []
   };
 });
 

package/legacy/hooks/features/rows/gridRowsUtils.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from './gridRowsSelector';
-import { gridDensityFactorSelector } from '../density/densitySelector';
+import { gridDimensionsSelector } from '../dimensions';
 export var GRID_ROOT_GROUP_ID = "auto-generated-group-node-root";
 export var GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 export var buildRootGroup = function buildRootGroup() {
@@ -28,7 +28,7 @@ export var buildRootGroup = function buildRootGroup() {
 export function checkGridRowIdIsValid(id, row) {
   var detailErrorMessage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'A row was provided without id in the rows prop:';
   if (id == null) {
-    throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+    throw new Error(['MUI X: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
 }
 export var getRowIdFromRowModel = function getRowIdFromRowModel(rowModel, getRowId, detailErrorMessage) {
@@ -148,7 +148,7 @@ export var updateCacheWithNewRows = function updateCacheWithNewRows(_ref4) {
     getRowId = _ref4.getRowId,
     updates = _ref4.updates;
   if (previousCache.updates.type === 'full') {
-    throw new Error('MUI: Unable to prepare a partial update if a full update is not applied yet');
+    throw new Error('MUI X: Unable to prepare a partial update if a full update is not applied yet.');
   }
 
   // Remove duplicate updates.
@@ -285,7 +285,7 @@ export function calculatePinnedRowsHeight(apiRef) {
     bottom: bottomPinnedRowsHeight
   };
 }
-export function getMinimalContentHeight(apiRef, rowHeight) {
-  var densityFactor = gridDensityFactorSelector(apiRef);
-  return "var(--DataGrid-overlayHeight, ".concat(2 * Math.floor(rowHeight * densityFactor), "px)");
+export function getMinimalContentHeight(apiRef) {
+  var dimensions = gridDimensionsSelector(apiRef.current.state);
+  return "var(--DataGrid-overlayHeight, ".concat(2 * dimensions.rowHeight, "px)");
 }

package/legacy/hooks/features/rows/useGridParamsApi.js

@@ -1,11 +1,11 @@
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _wrapNativeSuper from "@babel/runtime/helpers/esm/wrapNativeSuper";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from '../../../utils/domUtils';
 import { GRID_ID_AUTOGENERATED } from './gridRowsUtils';
@@ -13,10 +13,9 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 export var MissingRowIdError = /*#__PURE__*/function (_Error) {
   _inherits(MissingRowIdError, _Error);
-  var _super = _createSuper(MissingRowIdError);
   function MissingRowIdError() {
     _classCallCheck(this, MissingRowIdError);
-    return _super.apply(this, arguments);
+    return _callSuper(this, MissingRowIdError, arguments);
   }
   return _createClass(MissingRowIdError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));

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

@@ -124,7 +124,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   var updateRows = React.useCallback(function (updates) {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
-      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'));
+      throw new Error(["MUI X: 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'));
     }
     var nonPinnedRowsUpdates = [];
     updates.forEach(function (update) {
@@ -171,10 +171,10 @@ export var useGridRows = function useGridRows(apiRef, props) {
   var setRowChildrenExpansion = React.useCallback(function (id, isExpanded) {
     var currentNode = apiRef.current.getRowNode(id);
     if (!currentNode) {
-      throw new Error("MUI: No row with id #".concat(id, " found"));
+      throw new Error("MUI X: No row with id #".concat(id, " found."));
     }
     if (currentNode.type !== 'group') {
-      throw new Error('MUI: Only group nodes can be expanded or collapsed');
+      throw new Error('MUI X: Only group nodes can be expanded or collapsed.');
     }
     var newNode = _extends({}, currentNode, {
       childrenExpanded: isExpanded
@@ -231,13 +231,13 @@ export var useGridRows = function useGridRows(apiRef, props) {
   var setRowIndex = React.useCallback(function (rowId, targetIndex) {
     var node = apiRef.current.getRowNode(rowId);
     if (!node) {
-      throw new Error("MUI: No row with id #".concat(rowId, " found"));
+      throw new Error("MUI X: No row with id #".concat(rowId, " found."));
     }
     if (node.parent !== GRID_ROOT_GROUP_ID) {
-      throw new Error("MUI: The row reordering do not support reordering of grouped rows yet");
+      throw new Error("MUI X: The row reordering do not support reordering of grouped rows yet.");
     }
     if (node.type !== 'leaf') {
-      throw new Error("MUI: The row reordering do not support reordering of footer or grouping rows");
+      throw new Error("MUI X: The row reordering do not support reordering of footer or grouping rows.");
     }
     apiRef.current.setState(function (state) {
       var group = gridRowTreeSelector(state, apiRef.current.instanceId)[GRID_ROOT_GROUP_ID];
@@ -263,7 +263,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
   }, [apiRef, logger]);
   var replaceRows = React.useCallback(function (firstRowToRender, newRows) {
     if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
-      throw new Error(["MUI: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(["MUI X: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     if (newRows.length === 0) {
       return;

package/legacy/hooks/features/rows/useGridRowsMeta.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_debounce as debounce, unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_debounce as debounce } from '@mui/utils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -11,6 +11,9 @@ import { gridSortModelSelector } from '../sorting/gridSortingSelector';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 import { gridPinnedRowsSelector } from './gridRowsSelector';
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../../../DataGrid/useDataGridProps';
+
+// TODO: I think the row heights can now be encoded as a single `size` instead of `sizes.baseXxxx`
+
 export var rowsMetaStateInitializer = function rowsMetaStateInitializer(state) {
   return _extends({}, state, {
     rowsMeta: {
@@ -30,8 +33,8 @@ var getValidRowHeight = function getValidRowHeight(rowHeightProp, defaultRowHeig
   }
   return defaultRowHeight;
 };
-var rowHeightWarning = ["MUI: The `rowHeight` prop should be a number greater than 0.", "The default value will be used instead."].join('\n');
-var getRowHeightWarning = ["MUI: The `getRowHeight` prop should return a number greater than 0 or 'auto'.", "The default value will be used instead."].join('\n');
+var rowHeightWarning = ["MUI X: The `rowHeight` prop should be a number greater than 0.", "The default value will be used instead."].join('\n');
+var getRowHeightWarning = ["MUI X: The `getRowHeight` prop should return a number greater than 0 or 'auto'.", "The default value will be used instead."].join('\n');
 
 /**
  * @requires useGridPageSize (method)
@@ -180,15 +183,15 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   var debouncedHydrateRowsMeta = React.useMemo(function () {
     return debounce(hydrateRowsMeta, props.rowPositionsDebounceMs);
   }, [hydrateRowsMeta, props.rowPositionsDebounceMs]);
-  var storeMeasuredRowHeight = React.useCallback(function (id, height, position) {
+  var storeMeasuredRowHeight = React.useCallback(function (id, height) {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;
     }
 
     // Only trigger hydration if the value is different, otherwise we trigger a loop
-    var needsHydration = rowsHeightLookup.current[id].sizes["base".concat(capitalize(position))] !== height;
+    var needsHydration = rowsHeightLookup.current[id].sizes.baseCenter !== height;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    rowsHeightLookup.current[id].sizes["base".concat(capitalize(position))] = height;
+    rowsHeightLookup.current[id].sizes.baseCenter = height;
     if (needsHydration) {
       debouncedHydrateRowsMeta();
     }

package/legacy/hooks/features/scroll/useGridScroll.js

@@ -9,7 +9,7 @@ import { gridRowCountSelector } from '../rows/gridRowsSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridExpandedSortedRowEntriesSelector } from '../filter/gridFilterSelector';
-import { gridClasses } from '../../../constants/gridClasses';
+import { gridDimensionsSelector } from '../dimensions';
 
 // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
@@ -48,6 +48,7 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
   var virtualScrollerRef = apiRef.current.virtualScrollerRef;
   var visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   var scrollToIndexes = React.useCallback(function (params) {
+    var dimensions = gridDimensionsSelector(apiRef.current.state);
     var totalRowCount = gridRowCountSelector(apiRef);
     var visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
     var scrollToHeader = params.rowIndex == null;
@@ -56,7 +57,7 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
     }
     logger.debug("Scrolling to cell at row ".concat(params.rowIndex, ", col: ").concat(params.colIndex, " "));
     var scrollCoordinates = {};
-    if (params.colIndex != null) {
+    if (params.colIndex !== undefined) {
       var columnPositions = gridColumnPositionsSelector(apiRef);
       var cellWidth;
       if (typeof params.rowIndex !== 'undefined') {
@@ -72,23 +73,20 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
       }
       // When using RTL, `scrollLeft` becomes negative, so we must ensure that we only compare values.
       scrollCoordinates.left = scrollIntoView({
-        clientHeight: virtualScrollerRef.current.clientWidth,
+        clientHeight: dimensions.viewportInnerSize.width,
         scrollTop: Math.abs(virtualScrollerRef.current.scrollLeft),
         offsetHeight: cellWidth,
         offsetTop: columnPositions[params.colIndex]
       });
     }
-    if (params.rowIndex != null) {
-      var _querySelector, _querySelector2;
+    if (params.rowIndex !== undefined) {
       var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
       var page = gridPageSelector(apiRef);
       var pageSize = gridPageSizeSelector(apiRef);
       var elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
       var targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
-      var topPinnedRowsHeight = ((_querySelector = virtualScrollerRef.current.querySelector(".".concat(gridClasses['pinnedRows--top']))) == null ? void 0 : _querySelector.clientHeight) || 0;
-      var bottomPinnedRowsHeight = ((_querySelector2 = virtualScrollerRef.current.querySelector(".".concat(gridClasses['pinnedRows--bottom']))) == null ? void 0 : _querySelector2.clientHeight) || 0;
       scrollCoordinates.top = scrollIntoView({
-        clientHeight: virtualScrollerRef.current.clientHeight - topPinnedRowsHeight - bottomPinnedRowsHeight,
+        clientHeight: dimensions.viewportInnerSize.height,
         scrollTop: virtualScrollerRef.current.scrollTop,
         offsetHeight: targetOffsetHeight,
         offsetTop: rowsMeta.positions[elementIndex]
@@ -102,13 +100,13 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   var scroll = React.useCallback(function (params) {
-    if (virtualScrollerRef.current && params.left != null && colRef.current) {
+    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       var direction = theme.direction === 'rtl' ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
       logger.debug("Scrolling left: ".concat(params.left));
     }
-    if (virtualScrollerRef.current && params.top != null) {
+    if (virtualScrollerRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
       logger.debug("Scrolling top: ".concat(params.top));
     }

package/legacy/hooks/features/sorting/gridSortingUtils.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { buildWarning } from '../../../utils/warning';
-var sortModelDisableMultiColumnsSortingWarning = buildWarning(['MUI: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+var sortModelDisableMultiColumnsSortingWarning = buildWarning(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
 export var sanitizeSortModel = function sanitizeSortModel(model, disableMultipleColumnsSorting) {
   if (disableMultipleColumnsSorting && model.length > 1) {
-    sortModelDisableMultiColumnsSortingWarning();
+    if (process.env.NODE_ENV !== 'production') {
+      sortModelDisableMultiColumnsSortingWarning();
+    }
     return [model[0]];
   }
   return model;
@@ -29,7 +31,7 @@ var isDesc = function isDesc(direction) {
  */
 var parseSortItem = function parseSortItem(sortItem, apiRef) {
   var column = apiRef.current.getColumn(sortItem.field);
-  if (!column) {
+  if (!column || sortItem.sort === null) {
     return null;
   }
   var comparator = isDesc(sortItem.sort) ? function () {

package/legacy/hooks/features/sorting/useGridSorting.js

@@ -65,7 +65,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
     if (existing) {
       var _col$sortingOrder;
       var nextSort = directionOverride === undefined ? getNextGridSortDirection((_col$sortingOrder = col.sortingOrder) != null ? _col$sortingOrder : props.sortingOrder, existing.sort) : directionOverride;
-      return nextSort == null ? undefined : _extends({}, existing, {
+      return nextSort === undefined ? undefined : _extends({}, existing, {
         sort: nextSort
       });
     }
@@ -75,7 +75,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
     };
   }, [apiRef, props.sortingOrder]);
   var addColumnMenuItem = React.useCallback(function (columnMenuItems, colDef) {
-    if (colDef == null || colDef.sortable === false) {
+    if (colDef == null || colDef.sortable === false || props.disableColumnSorting) {
       return columnMenuItems;
     }
     var sortingOrder = colDef.sortingOrder || props.sortingOrder;
@@ -85,7 +85,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
       return [].concat(_toConsumableArray(columnMenuItems), ['columnMenuSortItem']);
     }
     return columnMenuItems;
-  }, [props.sortingOrder]);
+  }, [props.sortingOrder, props.disableColumnSorting]);
 
   /**
    * API METHODS
@@ -125,9 +125,6 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
   }, [apiRef, logger, props.disableMultipleColumnsSorting]);
   var sortColumn = React.useCallback(function (field, direction, allowMultipleSorting) {
     var column = apiRef.current.getColumn(field);
-    if (!column.sortable) {
-      return;
-    }
     var sortItem = createSortItem(column, direction);
     var sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
@@ -217,17 +214,25 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
    * EVENTS
    */
   var handleColumnHeaderClick = React.useCallback(function (_ref2, event) {
-    var field = _ref2.field;
+    var field = _ref2.field,
+      colDef = _ref2.colDef;
+    if (!colDef.sortable || props.disableColumnSorting) {
+      return;
+    }
     var allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
     sortColumn(field, undefined, allowMultipleSorting);
-  }, [sortColumn]);
+  }, [sortColumn, props.disableColumnSorting]);
   var handleColumnHeaderKeyDown = React.useCallback(function (_ref3, event) {
-    var field = _ref3.field;
+    var field = _ref3.field,
+      colDef = _ref3.colDef;
+    if (!colDef.sortable || props.disableColumnSorting) {
+      return;
+    }
     // Ctrl + Enter opens the column menu
     if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
       sortColumn(field, undefined, event.shiftKey);
     }
-  }, [sortColumn]);
+  }, [sortColumn, props.disableColumnSorting]);
   var handleColumnsChange = React.useCallback(function () {
     // When the columns change we check that the sorted columns are still part of the dataset
     var sortModel = gridSortModelSelector(apiRef);

package/legacy/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
 /**
  * Get the columns state
  * @category Virtualization
@@ -21,4 +21,32 @@ export var gridVirtualizationEnabledSelector = createSelector(gridVirtualization
  */
 export var gridVirtualizationColumnEnabledSelector = createSelector(gridVirtualizationSelector, function (state) {
   return state.enabledForColumns;
+});
+
+/**
+ * Get the render context
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export var gridRenderContextSelector = createSelector(gridVirtualizationSelector, function (state) {
+  return state.renderContext;
+});
+
+/**
+ * Get the render context, with only columns filled in.
+ * This is cached, so it can be used to only re-render when the column interval changes.
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export var gridRenderContextColumnsSelector = createSelectorMemoized(function (state) {
+  return state.virtualization.renderContext.firstColumnIndex;
+}, function (state) {
+  return state.virtualization.renderContext.lastColumnIndex;
+}, function (firstColumnIndex, lastColumnIndex) {
+  return {
+    firstRowIndex: -1,
+    lastRowIndex: -1,
+    firstColumnIndex: firstColumnIndex,
+    lastColumnIndex: lastColumnIndex
+  };
 });