@mui/x-data-grid 5.8.0 → 5.11.0

package/legacy/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -3,7 +3,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridEvents } from '../../../models/events';
 export var GRID_DEFAULT_STRATEGY = 'none';
 export var GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',
@@ -26,7 +25,7 @@ export var GRID_STRATEGIES_PROCESSORS = {
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterStrategyProcessor` to register their processor.
- *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
+ *   When the processor of the active strategy changes, it will fire `"activeStrategyProcessorChange"` to re-apply the processor.
  *
  * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
  *
@@ -36,12 +35,12 @@ export var GRID_STRATEGIES_PROCESSORS = {
  *
  * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ * - the "strategyAvailabilityChange" event to update something when the active strategy changes.
  *    Warning: Be careful not to apply the processor several times.
- *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    For instance "rowsSet" is fired by `useGridRows` whenever the active strategy changes.
  *    So listening to both would most likely run your logic twice.
  *
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ * - The "activeStrategyProcessorChange" event to update something when the processor of the active strategy changes.
  *
  * =====================================================================================================================
  *
@@ -76,7 +75,7 @@ export var useGridStrategyProcessing = function useGridStrategyProcessing(apiRef
     }
 
     if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
-      apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, processorName);
+      apiRef.current.publishEvent('activeStrategyProcessorChange', processorName);
     }
 
     return cleanup;
@@ -118,7 +117,7 @@ export var useGridStrategyProcessing = function useGridStrategyProcessing(apiRef
       group: strategyGroup,
       isAvailable: isAvailable
     });
-    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+    apiRef.current.publishEvent('strategyAvailabilityChange');
   }, [apiRef]);
   var strategyProcessingApi = {
     unstable_registerStrategyProcessor: registerStrategyProcessor,

package/legacy/hooks/core/useGridApiInitialization.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
@@ -15,6 +14,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   if (!apiRef.current) {
     apiRef.current = {
       unstable_eventManager: new EventManager(),
+      unstable_caches: {},
       state: {},
       instanceId: globalId
     };
@@ -52,7 +52,7 @@ export function useGridApiInitialization(inputApiRef, props) {
     };
   }, [apiRef]);
   var showError = React.useCallback(function (args) {
-    apiRef.current.publishEvent(GridEvents.componentError, args);
+    apiRef.current.publishEvent('componentError', args);
   }, [apiRef]);
   useGridApiMethod(apiRef, {
     subscribeEvent: subscribeEvent,
@@ -62,7 +62,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(function () {
     var api = apiRef.current;
     return function () {
-      api.publishEvent(GridEvents.unmount);
+      api.publishEvent('unmount');
     };
   }, [apiRef]);
   return apiRef;

package/legacy/hooks/core/useGridErrorHandler.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiEventHandler } from '../utils/useGridApiEventHandler';
 export function useGridErrorHandler(apiRef, props) {
   var handleError = React.useCallback(function (args) {
@@ -14,5 +13,5 @@ export function useGridErrorHandler(apiRef, props) {
   React.useEffect(function () {
     handleError(props.error);
   }, [handleError, props.error]);
-  useGridApiEventHandler(apiRef, GridEvents.componentError, handleError);
+  useGridApiEventHandler(apiRef, 'componentError', handleError);
 }

package/legacy/hooks/core/useGridStateInitialization.js

@@ -4,7 +4,6 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["stateId"];
 import * as React from 'react';
 import { GridSignature } from '../utils/useGridApiEventHandler';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils';
 import { isFunction } from '../../utils/utils';
 export var useGridStateInitialization = function useGridStateInitialization(apiRef, props) {
@@ -71,7 +70,7 @@ export var useGridStateInitialization = function useGridStateInitialization(apiR
       apiRef.current.state = newState;
 
       if (apiRef.current.publishEvent) {
-        apiRef.current.publishEvent(GridEvents.stateChange, newState);
+        apiRef.current.publishEvent('stateChange', newState);
       }
     }
 

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';
@@ -12,9 +14,16 @@ import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
 import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
 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 +60,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 +118,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]);
@@ -100,11 +159,11 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var handleColumnReorderStop = React.useCallback(function () {
     return setDragCol('');
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleColumnResizeStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleColumnResizeStop);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnReorderStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleColumnReorderStop);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScroll);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', handleColumnResizeStart);
+  useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleScroll);
 
   var getColumns = function getColumns(params) {
     var other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -122,7 +181,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);
 
@@ -146,7 +225,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex
-      }, other), i));
+      }, other), column.field));
     }
 
     return columns;
@@ -161,7 +240,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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { gridColumnMenuSelector } from './columnMenuSelector';
 export var columnMenuStateInitializer = function columnMenuStateInitializer(state) {
@@ -80,6 +79,7 @@ export var useGridColumnMenu = function useGridColumnMenu(apiRef) {
    * EVENTS
    */
 
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

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

@@ -213,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 = {
@@ -248,18 +262,18 @@ 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,
-      columnTypes = _ref5.columnTypes,
-      _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;
 
@@ -304,18 +318,20 @@ export var createColumnsState = function createColumnsState(_ref5) {
       columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
 
-    var hasValidDimension = false;
-
-    if (!existingState.hasBeenResized) {
-      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(function (key) {
-        return newColumn[key] !== undefined;
-      });
-    }
+    var hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(function (key) {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
 
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
     columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
       hide: newColumn.hide == null ? false : newColumn.hide
     }, newColumn, {
-      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+      hasBeenResized: hasBeenResized
     });
   });
 
@@ -409,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,106 @@
+import React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+
+/**
+ * @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, 'columnOrderChange', handleColumnReorderChange);
+};