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

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

@@ -7,65 +7,10 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
  */
 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 getCellColSpanInfo = function getCellColSpanInfo(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,
-      columns = params.columns;
-    var columnsLength = columns.length;
-    var column = columns[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 = columns[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) {
@@ -75,6 +20,8 @@ export var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
       columns = _ref.columns;
     for (var i = minFirstColumn; i < maxLastColumn; i += 1) {
       var cellProps = calculateCellColSpan({
+        apiRef: apiRef,
+        lookup: lookup.current,
         columnIndex: i,
         rowId: rowId,
         minFirstColumnIndex: minFirstColumn,
@@ -85,7 +32,7 @@ export var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
         i += cellProps.colSpan - 1;
       }
     }
-  }, [calculateCellColSpan]);
+  }, [apiRef]);
   var columnSpanningPublicApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };
@@ -99,4 +46,58 @@ export var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
     lookup.current = {};
   }, []);
   useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnReorderChange);
-};
+};
+function calculateCellColSpan(params) {
+  var apiRef = params.apiRef,
+    lookup = params.lookup,
+    columnIndex = params.columnIndex,
+    rowId = params.rowId,
+    minFirstColumnIndex = params.minFirstColumnIndex,
+    maxLastColumnIndex = params.maxLastColumnIndex,
+    columns = params.columns;
+  var columnsLength = columns.length;
+  var column = columns[columnIndex];
+  var colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+  if (!colSpan || colSpan === 1) {
+    setCellColSpanInfo(lookup, 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 = columns[nextColumnIndex];
+      width += nextColumn.computedWidth;
+      setCellColSpanInfo(lookup, rowId, columnIndex + j, {
+        spannedByColSpan: true,
+        rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+        leftVisibleCellIndex: columnIndex
+      });
+    }
+    setCellColSpanInfo(lookup, rowId, columnIndex, {
+      spannedByColSpan: false,
+      cellProps: {
+        colSpan: colSpan,
+        width: width
+      }
+    });
+  }
+  return {
+    colSpan: colSpan
+  };
+}
+function setCellColSpanInfo(lookup, rowId, columnIndex, cellColSpanInfo) {
+  if (!lookup[rowId]) {
+    lookup[rowId] = {};
+  }
+  lookup[rowId][columnIndex] = cellColSpanInfo;
+}

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

@@ -7,23 +7,24 @@ import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsStateSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
-import { hydrateColumnsWidth, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
+import { EMPTY_PINNED_COLUMN_FIELDS } from './gridColumnsInterfaces';
+import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
 import { GridPreferencePanelsValue } from '../preferencesPanel';
-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;
+  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2, _state$pinnedColumns;
   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 || (_props$initialState2 = _props$initialState2.columns) == null ? void 0 : _props$initialState2.columnVisibilityModel) != null ? _ref : {},
     keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
-    columns: columnsState
+    columns: columnsState,
+    // In pro/premium, this part of the state is defined. We give it an empty but defined value
+    // for the community version.
+    pinnedColumns: (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : EMPTY_PINNED_COLUMN_FIELDS
   });
 };
 
@@ -35,9 +36,7 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
 export function useGridColumns(apiRef, props) {
   var _props$initialState4, _props$slotProps2;
   var logger = useGridLogger(apiRef, 'useGridColumns');
-  var columnTypes = defaultColumnTypes;
   var previousColumnsProp = React.useRef(props.columns);
-  var previousColumnTypesProp = React.useRef(columnTypes);
   apiRef.current.registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -48,8 +47,8 @@ export function useGridColumns(apiRef, props) {
   var setGridColumnsState = React.useCallback(function (columnsState) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
-    apiRef.current.forceUpdate();
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
   /**
@@ -82,7 +81,6 @@ export function useGridColumns(apiRef, props) {
         return _extends({}, state, {
           columns: createColumnsState({
             apiRef: apiRef,
-            columnTypes: columnTypes,
             columnsToUpsert: [],
             initialState: undefined,
             columnVisibilityModel: model,
@@ -92,17 +90,16 @@ export function useGridColumns(apiRef, props) {
       });
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnTypes]);
+  }, [apiRef]);
   var updateColumns = React.useCallback(function (columns) {
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnTypes: columnTypes,
       columnsToUpsert: columns,
       initialState: undefined,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, setGridColumnsState, columnTypes]);
+  }, [apiRef, setGridColumnsState]);
   var setColumnVisibility = React.useCallback(function (field, isVisible) {
     var _columnVisibilityMode;
     var columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -139,7 +136,6 @@ export function useGridColumns(apiRef, props) {
     apiRef.current.publishEvent('columnIndexChange', params);
   }, [apiRef, logger, setGridColumnsState, getColumnIndexRelativeToVisibleColumns]);
   var setColumnWidth = React.useCallback(function (field, width) {
-    var _apiRef$current$getRo, _apiRef$current$getRo2;
     logger.debug("Updating column ".concat(field, " width to ").concat(width));
     var columnsState = gridColumnsStateSelector(apiRef.current.state);
     var column = columnsState.lookup[field];
@@ -149,7 +145,7 @@ export function useGridColumns(apiRef, props) {
     });
     setGridColumnsState(hydrateColumnsWidth(_extends({}, columnsState, {
       lookup: _extends({}, columnsState.lookup, _defineProperty({}, field, newColumn))
-    }), (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0));
+    }), apiRef.current.getRootDimensions().viewportInnerSize.width));
     apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
@@ -226,7 +222,6 @@ export function useGridColumns(apiRef, props) {
     }
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnTypes: columnTypes,
       columnsToUpsert: [],
       initialState: initialState,
       columnVisibilityModel: columnVisibilityModelToImport,
@@ -237,7 +232,7 @@ export function useGridColumns(apiRef, props) {
       apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
     }
     return params;
-  }, [apiRef, columnTypes]);
+  }, [apiRef]);
   var preferencePanelPreProcessing = React.useCallback(function (initialValue, value) {
     if (value === GridPreferencePanelsValue.columns) {
       var _props$slotProps;
@@ -276,13 +271,12 @@ export function useGridColumns(apiRef, props) {
     logger.info("Columns pipe processing have changed, regenerating the columns");
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnTypes: columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnTypes]);
+  }, [apiRef, logger, setGridColumnsState]);
   useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
 
   /**
@@ -297,24 +291,29 @@ export function useGridColumns(apiRef, props) {
       return;
     }
     logger.info("GridColumns have changed, new length ".concat(props.columns.length));
-    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+    if (previousColumnsProp.current === props.columns) {
       return;
     }
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnTypes: columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });
     previousColumnsProp.current = props.columns;
-    previousColumnTypesProp.current = columnTypes;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns, columnTypes]);
+  }, [logger, apiRef, setGridColumnsState, props.columns]);
   React.useEffect(function () {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);
     }
   }, [apiRef, logger, props.columnVisibilityModel]);
+}
+function mergeColumnsState(columnsState) {
+  return function (state) {
+    return _extends({}, state, {
+      columns: columnsState
+    });
+  };
 }

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

@@ -0,0 +1,3 @@
+export var gridDimensionsSelector = function gridDimensionsSelector(state) {
+  return state.dimensions;
+};

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

@@ -1 +1,2 @@
+export * from './gridDimensionsSelectors';
 export {};