@mui/x-data-grid 5.7.0 → 5.10.0

package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
+import { defaultMemoize } from 'reselect';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
@@ -14,7 +16,15 @@ import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridEvents } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
+import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+function isUIEvent(event) {
+  return !!event.target;
+}
+
 export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var innerRefProp = props.innerRef,
       _props$minColumnIndex = props.minColumnIndex,
@@ -51,15 +61,48 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
 
   var prevRenderContext = React.useRef(renderContext);
   var prevScrollLeft = React.useRef(0);
+  var currentPage = useGridVisibleRows(apiRef, rootProps);
   React.useEffect(function () {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
-  }, [apiRef]);
+  }, [apiRef]); // memoize `getFirstColumnIndexToRender`, since it's called on scroll
+
+  var getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
+    equalityCheck: function equalityCheck(a, b) {
+      return ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(function (key) {
+        return a[key] === b[key];
+      });
+    }
+  }));
   var updateInnerPosition = React.useCallback(function (nextRenderContext) {
-    var firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    var _getRenderableIndexes = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    }),
+        _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
+        firstRowToRender = _getRenderableIndexes2[0],
+        lastRowToRender = _getRenderableIndexes2[1];
+
+    var firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minColumnIndex,
+      columnBuffer: rootProps.columnBuffer,
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      apiRef: apiRef,
+      visibleRows: currentPage.rows
+    });
     var offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
     innerRef.current.style.transform = "translate3d(".concat(-offset, "px, 0px, 0px)");
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
-  var handleScroll = React.useCallback(function (_ref) {
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer]);
+  React.useLayoutEffect(function () {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
+  var handleScroll = React.useCallback(function (_ref, event) {
     var _prevRenderContext$cu, _prevRenderContext$cu2;
 
     var left = _ref.left,
@@ -76,15 +119,32 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       return;
     }
 
-    prevScrollLeft.current = left;
+    prevScrollLeft.current = left; // We can only update the position when we guarantee that the render context has been
+    // rendered. This is achieved using ReactDOM.flushSync or when the context doesn't change.
+
+    var canUpdateInnerPosition = false;
 
     if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
-      setRenderContext(nextRenderContext);
+      // ReactDOM.flushSync cannot be called on `scroll` events fired inside effects
+      if (isUIEvent(event)) {
+        // To prevent flickering, the inner position can only be updated after the new context has
+        // been rendered. ReactDOM.flushSync ensures that the state changes will happen before
+        // updating the position.
+        ReactDOM.flushSync(function () {
+          setRenderContext(nextRenderContext);
+        });
+        canUpdateInnerPosition = true;
+      } else {
+        setRenderContext(nextRenderContext);
+      }
+
       prevRenderContext.current = nextRenderContext;
+    } else {
+      canUpdateInnerPosition = true;
     } // Pass directly the render context to avoid waiting for the next render
 
 
-    if (nextRenderContext) {
+    if (nextRenderContext && canUpdateInnerPosition) {
       updateInnerPosition(nextRenderContext);
     }
   }, [updateInnerPosition]);
@@ -122,7 +182,27 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     }
 
     var columns = [];
-    var firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+
+    var _getRenderableIndexes3 = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    }),
+        _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 2),
+        firstRowToRender = _getRenderableIndexes4[0],
+        lastRowToRender = _getRenderableIndexes4[1];
+
+    var firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minFirstColumn,
+      columnBuffer: rootProps.columnBuffer,
+      apiRef: apiRef,
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     var lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
 
@@ -142,11 +222,11 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         column: column,
         colIndex: columnIndex,
         isResizing: resizeCol === column.field,
-        isLastColumn: columnIndex === columns.length - 1,
+        isLastColumn: columnIndex === visibleColumns.length - 1,
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex
-      }, other), i));
+      }, other), column.field));
     }
 
     return columns;
@@ -161,7 +241,6 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     renderContext: renderContext,
     getColumns: getColumns,
     isDragging: !!dragCol,
-    updateInnerPosition: updateInnerPosition,
     getRootProps: function getRootProps() {
       var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return _extends({

package/legacy/hooks/features/columnMenu/useGridColumnMenu.js

@@ -81,5 +81,6 @@ export var useGridColumnMenu = function useGridColumnMenu(apiRef) {
    */
 
   useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerWheel, apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerTouchMove, apiRef.current.hideColumnMenu);
 };

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

@@ -1,7 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../models';
+import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../colDef';
 import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
 export var COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
@@ -212,11 +213,25 @@ export var applyInitialState = function applyInitialState(columnsState, initialS
 
   var newColumnLookup = _extends({}, columnsState.lookup);
 
-  for (var _i = 0; _i < columnsWithUpdatedDimensions.length; _i += 1) {
-    var _field2 = columnsWithUpdatedDimensions[_i];
-    newColumnLookup[_field2] = _extends({}, newColumnLookup[_field2], dimensions[_field2], {
+  var _loop = function _loop(_i) {
+    var field = columnsWithUpdatedDimensions[_i];
+
+    var newColDef = _extends({}, newColumnLookup[field], {
       hasBeenResized: true
     });
+
+    Object.entries(dimensions[field]).forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+          key = _ref6[0],
+          value = _ref6[1];
+
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
+  };
+
+  for (var _i = 0; _i < columnsWithUpdatedDimensions.length; _i += 1) {
+    _loop(_i);
   }
 
   var newColumnsState = {
@@ -247,22 +262,22 @@ export var getGridColDef = function getGridColDef(columnTypes, type) {
 
   return columnTypes[type];
 };
-export var createColumnsState = function createColumnsState(_ref5) {
+export var createColumnsState = function createColumnsState(_ref7) {
   var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
 
-  var apiRef = _ref5.apiRef,
-      columnsToUpsert = _ref5.columnsToUpsert,
-      initialState = _ref5.initialState,
-      columnsTypes = _ref5.columnsTypes,
-      _ref5$currentColumnVi = _ref5.currentColumnVisibilityModel,
-      currentColumnVisibilityModel = _ref5$currentColumnVi === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref5$currentColumnVi,
-      shouldRegenColumnVisibilityModelFromColumns = _ref5.shouldRegenColumnVisibilityModelFromColumns,
-      _ref5$keepOnlyColumns = _ref5.keepOnlyColumnsToUpsert,
-      keepOnlyColumnsToUpsert = _ref5$keepOnlyColumns === void 0 ? false : _ref5$keepOnlyColumns;
+  var apiRef = _ref7.apiRef,
+      columnsToUpsert = _ref7.columnsToUpsert,
+      initialState = _ref7.initialState,
+      columnTypes = _ref7.columnTypes,
+      _ref7$currentColumnVi = _ref7.currentColumnVisibilityModel,
+      currentColumnVisibilityModel = _ref7$currentColumnVi === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref7$currentColumnVi,
+      shouldRegenColumnVisibilityModelFromColumns = _ref7.shouldRegenColumnVisibilityModelFromColumns,
+      _ref7$keepOnlyColumns = _ref7.keepOnlyColumnsToUpsert,
+      keepOnlyColumnsToUpsert = _ref7$keepOnlyColumns === void 0 ? false : _ref7$keepOnlyColumns;
   var isInsideStateInitializer = !apiRef.current.state.columns;
   var columnsStateWithoutColumnVisibilityModel;
 
-  if (isInsideStateInitializer || keepOnlyColumnsToUpsert) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -270,35 +285,67 @@ export var createColumnsState = function createColumnsState(_ref5) {
   } else {
     var currentState = gridColumnsSelector(apiRef.current.state);
     columnsStateWithoutColumnVisibilityModel = {
-      all: _toConsumableArray(currentState.all),
-      lookup: _extends({}, currentState.lookup)
+      all: keepOnlyColumnsToUpsert ? [] : _toConsumableArray(currentState.all),
+      lookup: _extends({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
+
     };
   }
 
+  var columnsToKeep = {};
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce(function (acc, key) {
+      return _extends({}, acc, _defineProperty({}, key, false));
+    }, {});
+  }
+
   var columnsToUpsertLookup = {};
   columnsToUpsert.forEach(function (newColumn) {
-    columnsToUpsertLookup[newColumn.field] = true;
+    var field = newColumn.field;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    var existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
 
-    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+    if (existingState == null) {
       // New Column
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
-      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
-    } else {
-      var mergedColumn = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      existingState = _extends({}, getGridColDef(columnTypes, newColumn.type), {
+        // TODO v6: Inline `getGridColDef`
+        field: field,
+        hasBeenResized: false
+      });
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    }
 
-      if (!mergedColumn.hasBeenResized && COLUMNS_DIMENSION_PROPERTIES.some(function (propertyName) {
-        return newColumn[propertyName] !== undefined;
-      })) {
-        mergedColumn.hasBeenResized = true;
-      }
+    var hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(function (key) {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
 
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn;
-    }
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized: hasBeenResized
+    });
   });
 
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(function (field) {
+      if (!columnsToKeep[field]) {
+        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+      }
+    });
+  }
+
   var columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
 
-  var columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+  var columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
 
   var columnVisibilityModel = {};
 
@@ -378,4 +425,45 @@ export var mergeColumnsState = function mergeColumnsState(columnsState) {
       columns: columnsState
     });
   };
-};
+};
+export function getFirstNonSpannedColumnToRender(_ref8) {
+  var firstColumnToRender = _ref8.firstColumnToRender,
+      apiRef = _ref8.apiRef,
+      firstRowToRender = _ref8.firstRowToRender,
+      lastRowToRender = _ref8.lastRowToRender,
+      visibleRows = _ref8.visibleRows;
+  var firstNonSpannedColumnToRender = firstColumnToRender;
+
+  for (var i = firstRowToRender; i < lastRowToRender; i += 1) {
+    var row = visibleRows[i];
+
+    if (row) {
+      var rowId = visibleRows[i].id;
+      var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
+
+      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+      }
+    }
+  }
+
+  return firstNonSpannedColumnToRender;
+}
+export function getFirstColumnIndexToRender(_ref9) {
+  var firstColumnIndex = _ref9.firstColumnIndex,
+      minColumnIndex = _ref9.minColumnIndex,
+      columnBuffer = _ref9.columnBuffer,
+      firstRowToRender = _ref9.firstRowToRender,
+      lastRowToRender = _ref9.lastRowToRender,
+      apiRef = _ref9.apiRef,
+      visibleRows = _ref9.visibleRows;
+  var initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
+  var firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef: apiRef,
+    firstRowToRender: firstRowToRender,
+    lastRowToRender: lastRowToRender,
+    visibleRows: visibleRows
+  });
+  return firstColumnToRender;
+}

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events/gridEvents';
+
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
+  var lookup = React.useRef({});
+  var setCellColSpanInfo = React.useCallback(function (rowId, columnIndex, cellColSpanInfo) {
+    var sizes = lookup.current;
+
+    if (!sizes[rowId]) {
+      sizes[rowId] = {};
+    }
+
+    sizes[rowId][columnIndex] = cellColSpanInfo;
+  }, []);
+  var getCellColSpanInfo = React.useCallback(function (rowId, columnIndex) {
+    var _lookup$current$rowId;
+
+    return (_lookup$current$rowId = lookup.current[rowId]) == null ? void 0 : _lookup$current$rowId[columnIndex];
+  }, []); // Calculate `colSpan` for the cell.
+
+  var calculateCellColSpan = React.useCallback(function (params) {
+    var columnIndex = params.columnIndex,
+        rowId = params.rowId,
+        minFirstColumnIndex = params.minFirstColumnIndex,
+        maxLastColumnIndex = params.maxLastColumnIndex;
+    var visibleColumns = apiRef.current.getVisibleColumns();
+    var columnsLength = visibleColumns.length;
+    var column = visibleColumns[columnIndex];
+    var colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+
+    if (!colSpan || colSpan === 1) {
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan: 1,
+          width: column.computedWidth
+        }
+      });
+      return {
+        colSpan: 1
+      };
+    }
+
+    var width = column.computedWidth;
+
+    for (var j = 1; j < colSpan; j += 1) {
+      var nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+
+      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+        var nextColumn = visibleColumns[nextColumnIndex];
+        width += nextColumn.computedWidth;
+        setCellColSpanInfo(rowId, columnIndex + j, {
+          spannedByColSpan: true,
+          rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+          leftVisibleCellIndex: columnIndex
+        });
+      }
+
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan: colSpan,
+          width: width
+        }
+      });
+    }
+
+    return {
+      colSpan: colSpan
+    };
+  }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
+
+  var calculateColSpan = React.useCallback(function (_ref) {
+    var rowId = _ref.rowId,
+        minFirstColumn = _ref.minFirstColumn,
+        maxLastColumn = _ref.maxLastColumn;
+
+    for (var i = minFirstColumn; i < maxLastColumn; i += 1) {
+      var cellProps = calculateCellColSpan({
+        columnIndex: i,
+        rowId: rowId,
+        minFirstColumnIndex: minFirstColumn,
+        maxLastColumnIndex: maxLastColumn
+      });
+
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  }, [calculateCellColSpan]);
+  var columnSpanningApi = {
+    unstable_getCellColSpanInfo: getCellColSpanInfo,
+    unstable_calculateColSpan: calculateColSpan
+  };
+  useGridApiMethod(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
+  var handleColumnReorderChange = React.useCallback(function () {
+    // `colSpan` needs to be recalculated after column reordering
+    lookup.current = {};
+  }, []);
+  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, handleColumnReorderChange);
+};