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

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() {
@@ -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/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: {
@@ -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

@@ -31,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
+  };
 });