@mui/x-data-grid 5.6.1 → 5.9.0

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

@@ -7,20 +7,23 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
-import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, setColumnsState } from './gridColumnsUtils';
+import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
+import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
+import { GridPreferencePanelsValue } from '../preferencesPanel';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var columnsStateInitializer = function columnsStateInitializer(state, props, apiRef) {
-  var _props$initialState, _props$initialState$c, _ref, _props$columnVisibili, _props$initialState2, _props$initialState2$;
+  var _props$initialState, _props$initialState$c, _props$initialState2, _ref, _props$columnVisibili, _props$initialState3, _props$initialState3$;
 
-  var shouldUseVisibleColumnModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
+  var isUsingColumnVisibilityModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
   var columnsTypes = computeColumnTypes(props.columnTypes);
   var columnsState = createColumnsState({
     apiRef: apiRef,
-    columnsTypes: columnsTypes,
+    columnTypes: columnsTypes,
     columnsToUpsert: props.columns,
-    shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
-    currentColumnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.columns) == null ? void 0 : _props$initialState2$.columnVisibilityModel) != null ? _ref : {},
-    reset: true
+    initialState: (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.columns,
+    shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+    currentColumnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.columns) == null ? void 0 : _props$initialState3$.columnVisibilityModel) != null ? _ref : {},
+    keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
     columns: columnsState
@@ -33,18 +36,20 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
  */
 
 export function useGridColumns(apiRef, props) {
-  var _props$initialState3, _props$initialState3$;
+  var _props$initialState4, _props$initialState4$, _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridColumns');
-  var columnsTypes = React.useMemo(function () {
+  var columnTypes = React.useMemo(function () {
     return computeColumnTypes(props.columnTypes);
   }, [props.columnTypes]);
+  var previousColumnsProp = React.useRef(props.columns);
+  var previousColumnTypesProp = React.useRef(columnTypes);
   /**
    * If `initialState.columns.columnVisibilityModel` or `columnVisibilityModel` was defined during the 1st render, we are directly updating the model
    * If not, we keep the old behavior and update the `GridColDef.hide` option (which will update the state model through the `GridColDef.hide` => `columnVisibilityModel` sync in `createColumnsState`
    */
 
-  var shouldUseVisibleColumnModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState3 = props.initialState) != null && (_props$initialState3$ = _props$initialState3.columns) != null && _props$initialState3$.columnVisibilityModel)).current;
+  var isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel));
   apiRef.current.unstable_updateControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -54,7 +59,7 @@ export function useGridColumns(apiRef, props) {
   });
   var setGridColumnsState = React.useCallback(function (columnsState) {
     logger.debug('Updating columns state.');
-    apiRef.current.setState(setColumnsState(columnsState));
+    apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.forceUpdate();
     apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
   }, [logger, apiRef]);
@@ -93,27 +98,29 @@ export function useGridColumns(apiRef, props) {
         return _extends({}, state, {
           columns: createColumnsState({
             apiRef: apiRef,
-            columnsTypes: columnsTypes,
+            columnTypes: columnTypes,
             columnsToUpsert: [],
+            initialState: undefined,
             shouldRegenColumnVisibilityModelFromColumns: false,
             currentColumnVisibilityModel: model,
-            reset: false
+            keepOnlyColumnsToUpsert: false
           })
         });
       });
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnsTypes]);
+  }, [apiRef, columnTypes]);
   var updateColumns = React.useCallback(function (columns) {
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnsTypes: columnsTypes,
+      columnTypes: columnTypes,
       columnsToUpsert: columns,
+      initialState: undefined,
       shouldRegenColumnVisibilityModelFromColumns: true,
-      reset: false
+      keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, setGridColumnsState, columnsTypes]);
+  }, [apiRef, setGridColumnsState, columnTypes]);
   var updateColumn = React.useCallback(function (column) {
     return apiRef.current.updateColumns([column]);
   }, [apiRef]);
@@ -121,7 +128,7 @@ export function useGridColumns(apiRef, props) {
     // We keep updating the `hide` option of `GridColDef` when not controlling the model to avoid any breaking change.
     // `updateColumns` take care of updating the model itself if needs be.
     // TODO v6: stop using the `hide` field even when the model is not defined
-    if (shouldUseVisibleColumnModel) {
+    if (isUsingColumnVisibilityModel.current) {
       var _columnVisibilityMode;
 
       var columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -147,7 +154,7 @@ export function useGridColumns(apiRef, props) {
       };
       apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
     }
-  }, [apiRef, shouldUseVisibleColumnModel]);
+  }, [apiRef]);
   var setColumnIndex = React.useCallback(function (field, targetIndexPosition) {
     var allColumns = gridColumnFieldsSelector(apiRef);
     var oldIndexPosition = allColumns.findIndex(function (col) {
@@ -210,69 +217,90 @@ export function useGridColumns(apiRef, props) {
    */
 
   var stateExportPreProcessing = React.useCallback(function (prevState) {
-    if (!shouldUseVisibleColumnModel) {
-      return prevState;
+    var columnsStateToExport = {};
+
+    if (isUsingColumnVisibilityModel.current) {
+      var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
+      var hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(function (value) {
+        return value === false;
+      });
+
+      if (hasHiddenColumns) {
+        columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
+      }
     }
 
-    var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
-    var hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(function (value) {
-      return value === false;
+    columnsStateToExport.orderedFields = gridColumnFieldsSelector(apiRef);
+    var columns = gridColumnDefinitionsSelector(apiRef);
+    var dimensions = {};
+    columns.forEach(function (colDef) {
+      if (colDef.hasBeenResized) {
+        var colDefDimensions = {};
+        COLUMNS_DIMENSION_PROPERTIES.forEach(function (propertyName) {
+          var propertyValue = colDef[propertyName];
+
+          if (propertyValue === Infinity) {
+            propertyValue = -1;
+          }
+
+          colDefDimensions[propertyName] = propertyValue;
+        });
+        dimensions[colDef.field] = colDefDimensions;
+      }
     });
 
-    if (!hasHiddenColumns) {
-      return prevState;
+    if (Object.keys(dimensions).length > 0) {
+      columnsStateToExport.dimensions = dimensions;
     }
 
     return _extends({}, prevState, {
-      columns: {
-        columnVisibilityModel: columnVisibilityModelToExport
-      }
+      columns: columnsStateToExport
     });
-  }, [apiRef, shouldUseVisibleColumnModel]);
+  }, [apiRef]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
 
-    if (!shouldUseVisibleColumnModel) {
+    var columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    var initialState = context.stateToRestore.columns;
+
+    if (columnVisibilityModelToImport == null && initialState == null) {
       return params;
     }
 
-    var columnVisibilityModel = (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel;
+    var columnsState = createColumnsState({
+      apiRef: apiRef,
+      columnTypes: columnTypes,
+      columnsToUpsert: [],
+      initialState: initialState,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      currentColumnVisibilityModel: columnVisibilityModelToImport,
+      keepOnlyColumnsToUpsert: false
+    });
+    apiRef.current.setState(mergeColumnsState(columnsState));
 
-    if (columnVisibilityModel != null) {
-      var columnsState = createColumnsState({
-        apiRef: apiRef,
-        columnsTypes: columnsTypes,
-        columnsToUpsert: [],
-        shouldRegenColumnVisibilityModelFromColumns: false,
-        currentColumnVisibilityModel: columnVisibilityModel,
-        reset: false
-      });
-      apiRef.current.setState(setColumnsState(columnsState));
+    if (initialState != null) {
+      apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
     }
 
     return params;
-  }, [apiRef, shouldUseVisibleColumnModel, columnsTypes]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  }, [apiRef, columnTypes]);
+  var preferencePanelPreProcessing = React.useCallback(function (initialValue, value) {
+    if (value === GridPreferencePanelsValue.columns) {
+      var _props$componentsProp;
+
+      var ColumnsPanel = props.components.ColumnsPanel;
+      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, (_props$componentsProp = props.componentsProps) == null ? void 0 : _props$componentsProp.columnsPanel));
+    }
+
+    return initialValue;
+  }, [props.components.ColumnsPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.columnsPanel]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   /**
    * EVENTS
    */
 
-  var handlePreProcessorRegister = React.useCallback(function (name) {
-    if (name !== 'hydrateColumns') {
-      return;
-    }
-
-    logger.info("Columns pre-processing have changed, regenerating the columns");
-    var columnsState = createColumnsState({
-      apiRef: apiRef,
-      columnsTypes: columnsTypes,
-      columnsToUpsert: [],
-      shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
-      reset: false
-    });
-    setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnsTypes, shouldUseVisibleColumnModel]);
   var prevInnerWidth = React.useRef(null);
 
   var handleGridSizeChange = function handleGridSizeChange(viewportInnerSize) {
@@ -282,9 +310,25 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
   useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
   useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  /**
+   * APPLIERS
+   */
+
+  var hydrateColumns = React.useCallback(function () {
+    logger.info("Columns pipe processing have changed, regenerating the columns");
+    var columnsState = createColumnsState({
+      apiRef: apiRef,
+      columnTypes: columnTypes,
+      columnsToUpsert: [],
+      initialState: undefined,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      keepOnlyColumnsToUpsert: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, logger, setGridColumnsState, columnTypes]);
+  useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
   /**
    * EFFECTS
    */
@@ -299,16 +343,24 @@ export function useGridColumns(apiRef, props) {
     }
 
     logger.info("GridColumns have changed, new length ".concat(props.columns.length));
+
+    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+      return;
+    }
+
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnsTypes: columnsTypes,
+      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`
-      shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       columnsToUpsert: props.columns,
-      reset: true
+      keepOnlyColumnsToUpsert: true
     });
+    previousColumnsProp.current = props.columns;
+    previousColumnTypesProp.current = columnTypes;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns, columnsTypes, shouldUseVisibleColumnModel]);
+  }, [logger, apiRef, setGridColumnsState, props.columns, columnTypes]);
   React.useEffect(function () {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);

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

@@ -136,7 +136,8 @@ export function useGridDimensions(apiRef, props) {
   var dimensionsApi = {
     resize: resize,
     getRootDimensions: getRootDimensions,
-    unstable_getViewportPageSize: getViewportPageSize
+    unstable_getViewportPageSize: getViewportPageSize,
+    unstable_updateGridDimensionsRef: updateGridDimensionsRef
   };
   useGridApiMethod(apiRef, dimensionsApi, 'GridDimensionsApi');
   var debounceResize = React.useMemo(function () {
@@ -149,12 +150,12 @@ export function useGridDimensions(apiRef, props) {
     var isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
     if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
     if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
@@ -177,7 +178,7 @@ export function useGridDimensions(apiRef, props) {
   useEnhancedEffect(function () {
     return updateGridDimensionsRef();
   }, [updateGridDimensionsRef]);
-  useGridApiOptionHandler(apiRef, GridEvents.visibleRowsSet, updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, GridEvents.sortedRowsSet, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.pageChange, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.pageSizeChange, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.columnsChange, updateGridDimensionsRef);