@mui/x-data-grid 5.6.0 → 5.8.0

package/node/hooks/features/columns/gridColumnsSelector.js

@@ -7,6 +7,8 @@ exports.visibleGridColumnsSelector = exports.visibleGridColumnsLengthSelector =
 
 var _createSelector = require("../../../utils/createSelector");
 
+var _warning = require("../../../utils/warning");
+
 /**
  * @category Columns
  * @deprecated Use the selector returning exactly the value you are looking for.
@@ -117,7 +119,7 @@ const gridFilterableColumnLookupSelector = (0, _createSelector.createSelector)(g
  */
 
 exports.gridFilterableColumnLookupSelector = gridFilterableColumnLookupSelector;
-const allGridColumnsFieldsSelector = gridColumnFieldsSelector;
+const allGridColumnsFieldsSelector = (0, _warning.wrapWithWarningOnCall)(gridColumnFieldsSelector, ['MUI: The method allGridColumnsFieldsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnFieldsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridColumnDefinitionsSelector` instead.
@@ -125,7 +127,7 @@ const allGridColumnsFieldsSelector = gridColumnFieldsSelector;
  */
 
 exports.allGridColumnsFieldsSelector = allGridColumnsFieldsSelector;
-const allGridColumnsSelector = gridColumnDefinitionsSelector;
+const allGridColumnsSelector = (0, _warning.wrapWithWarningOnCall)(gridColumnDefinitionsSelector, ['MUI: The method allGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnDefinitionsSelector instead']);
 /**
  * @category Visible Columns
  * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
@@ -133,7 +135,7 @@ const allGridColumnsSelector = gridColumnDefinitionsSelector;
  */
 
 exports.allGridColumnsSelector = allGridColumnsSelector;
-const visibleGridColumnsSelector = gridVisibleColumnDefinitionsSelector;
+const visibleGridColumnsSelector = (0, _warning.wrapWithWarningOnCall)(gridVisibleColumnDefinitionsSelector, ['MUI: The method visibleGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridVisibleColumnDefinitionsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
@@ -141,7 +143,7 @@ const visibleGridColumnsSelector = gridVisibleColumnDefinitionsSelector;
  */
 
 exports.visibleGridColumnsSelector = visibleGridColumnsSelector;
-const filterableGridColumnsSelector = gridFilterableColumnDefinitionsSelector;
+const filterableGridColumnsSelector = (0, _warning.wrapWithWarningOnCall)(gridFilterableColumnDefinitionsSelector, ['MUI: The method filterableGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).
@@ -149,16 +151,16 @@ const filterableGridColumnsSelector = gridFilterableColumnDefinitionsSelector;
  */
 
 exports.filterableGridColumnsSelector = filterableGridColumnsSelector;
-const filterableGridColumnsIdsSelector = (0, _createSelector.createSelector)(gridFilterableColumnDefinitionsSelector, columns => columns.map(col => col.field));
+const filterableGridColumnsIdsSelector = (0, _warning.wrapWithWarningOnCall)((0, _createSelector.createSelector)(gridFilterableColumnDefinitionsSelector, columns => columns.map(col => col.field)), ['MUI: The method filterableGridColumnsIdsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead.', 'The return format is now a lookup, if you want to get the same output as before, use the following code:', '', 'const lookup = gridFilterableColumnLookupSelector(apiRef);', 'const fields = gridColumnFieldsSelector(apiRef).filter(field => lookup[field]);']);
 /**
  * Get the amount of visible columns.
  * @category Visible Columns
- * @deprecated Use the length of `gridVisibleColumnDefinitionsSelector` instead.
+ * @deprecated Use the length of the array returned by `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
 exports.filterableGridColumnsIdsSelector = filterableGridColumnsIdsSelector;
-const visibleGridColumnsLengthSelector = (0, _createSelector.createSelector)(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.length);
+const visibleGridColumnsLengthSelector = (0, _warning.wrapWithWarningOnCall)((0, _createSelector.createSelector)(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.length), ['MUI: The method visibleGridColumnsLengthSelector is deprecated and will be removed in the next major version.', 'Use the length of the array returned by gridVisibleColumnDefinitionsSelector instead.']);
 /**
  * @category Visible Columns
  * @deprecated Use `gridColumnsTotalWidthSelector` or `gridColumnPositionsSelector` instead.
@@ -166,8 +168,8 @@ const visibleGridColumnsLengthSelector = (0, _createSelector.createSelector)(gri
  */
 
 exports.visibleGridColumnsLengthSelector = visibleGridColumnsLengthSelector;
-const gridColumnsMetaSelector = (0, _createSelector.createSelector)(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, (positions, totalWidth) => ({
+const gridColumnsMetaSelector = (0, _warning.wrapWithWarningOnCall)((0, _createSelector.createSelector)(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, (positions, totalWidth) => ({
   totalWidth,
   positions
-}));
+})), ['MUI: The method gridColumnsMetaSelector is deprecated and will be removed in the next major version.', 'Use gridColumnsTotalWidthSelector or gridColumnPositionsSelector instead']);
 exports.gridColumnsMetaSelector = gridColumnsMetaSelector;

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

@@ -5,24 +5,29 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.computeColumnTypes = void 0;
+exports.computeColumnTypes = exports.applyInitialState = exports.COLUMNS_DIMENSION_PROPERTIES = void 0;
 exports.computeFlexColumnsWidth = computeFlexColumnsWidth;
-exports.setColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef = exports.createColumnsState = void 0;
+exports.mergeColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef = exports.createColumnsState = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _models = require("../../../models");
+var _colDef = require("../../../colDef");
 
 var _gridColumnsSelector = require("./gridColumnsSelector");
 
 var _utils = require("../../../utils/utils");
 
+const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+exports.COLUMNS_DIMENSION_PROPERTIES = COLUMNS_DIMENSION_PROPERTIES;
+
 const computeColumnTypes = (customColumnTypes = {}) => {
-  const allColumnTypes = (0, _extends2.default)({}, (0, _models.getGridDefaultColumnTypes)(), customColumnTypes);
-  const mergedColumnTypes = {};
-  Object.entries(allColumnTypes).forEach(([colType, colTypeDef]) => {
-    colTypeDef = (0, _extends2.default)({}, allColumnTypes[colTypeDef.extendType || _models.DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
-    mergedColumnTypes[colType] = colTypeDef;
+  const mergedColumnTypes = (0, _extends2.default)({}, (0, _colDef.getGridDefaultColumnTypes)());
+  Object.entries(customColumnTypes).forEach(([colType, colTypeDef]) => {
+    if (mergedColumnTypes[colType]) {
+      mergedColumnTypes[colType] = (0, _extends2.default)({}, mergedColumnTypes[colType], colTypeDef);
+    } else {
+      mergedColumnTypes[colType] = (0, _extends2.default)({}, mergedColumnTypes[colTypeDef.extendType || _colDef.DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
+    }
   });
   return mergedColumnTypes;
 };
@@ -185,13 +190,64 @@ const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
 
 exports.hydrateColumnsWidth = hydrateColumnsWidth;
 let columnTypeWarnedOnce = false;
+/**
+ * Apply the order and the dimensions of the initial state.
+ * The columns not registered in `orderedFields` will be placed after the imported columns.
+ */
+
+const applyInitialState = (columnsState, initialState) => {
+  if (!initialState) {
+    return columnsState;
+  }
+
+  const {
+    orderedFields = [],
+    dimensions = {}
+  } = initialState;
+  const columnsWithUpdatedDimensions = Object.keys(dimensions);
+
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+
+  const orderedFieldsLookup = {};
+  const cleanOrderedFields = [];
+
+  for (let i = 0; i < orderedFields.length; i += 1) {
+    const field = orderedFields[i]; // Ignores the fields in the initialState that matches no field on the current column state
+
+    if (columnsState.lookup[field]) {
+      orderedFieldsLookup[field] = true;
+      cleanOrderedFields.push(field);
+    }
+  }
+
+  const newOrderedFields = cleanOrderedFields.length === 0 ? columnsState.all : [...cleanOrderedFields, ...columnsState.all.filter(field => !orderedFieldsLookup[field])];
+  const newColumnLookup = (0, _extends2.default)({}, columnsState.lookup);
+
+  for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
+    const field = columnsWithUpdatedDimensions[i];
+    newColumnLookup[field] = (0, _extends2.default)({}, newColumnLookup[field], dimensions[field], {
+      hasBeenResized: true
+    });
+  }
+
+  const newColumnsState = {
+    all: newOrderedFields,
+    lookup: newColumnLookup
+  };
+  return newColumnsState;
+};
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
 
+
+exports.applyInitialState = applyInitialState;
+
 const getGridColDef = (columnTypes, type) => {
   if (!type) {
-    return columnTypes[_models.DEFAULT_GRID_COL_TYPE_KEY];
+    return columnTypes[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -202,7 +258,7 @@ const getGridColDef = (columnTypes, type) => {
   }
 
   if (!columnTypes[type]) {
-    return columnTypes[_models.DEFAULT_GRID_COL_TYPE_KEY];
+    return columnTypes[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
   }
 
   return columnTypes[type];
@@ -213,16 +269,18 @@ exports.getGridColDef = getGridColDef;
 const createColumnsState = ({
   apiRef,
   columnsToUpsert,
-  columnsTypes,
+  initialState,
+  columnTypes,
   currentColumnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
   shouldRegenColumnVisibilityModelFromColumns,
-  reset
+  keepOnlyColumnsToUpsert = false
 }) => {
   var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
 
+  const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsStateWithoutColumnVisibilityModel;
 
-  if (reset) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -230,65 +288,129 @@ const createColumnsState = ({
   } else {
     const currentState = (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state);
     columnsStateWithoutColumnVisibilityModel = {
-      all: [...currentState.all],
-      lookup: (0, _extends2.default)({}, currentState.lookup)
+      all: keepOnlyColumnsToUpsert ? [] : [...currentState.all],
+      lookup: (0, _extends2.default)({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
+
     };
   }
 
+  let columnsToKeep = {};
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce((acc, key) => (0, _extends2.default)({}, acc, {
+      [key]: false
+    }), {});
+  }
+
   const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {
-    columnsToUpsertLookup[newColumn.field] = true;
-
-    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+    const {
+      field
+    } = newColumn;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    let existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
+
+    if (existingState == null) {
       // New Column
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = (0, _extends2.default)({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
-      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
-    } else {
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      existingState = (0, _extends2.default)({}, getGridColDef(columnTypes, newColumn.type), {
+        // TODO v6: Inline `getGridColDef`
+        field,
+        hasBeenResized: false
+      });
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
+
+    let hasValidDimension = false;
+
+    if (!existingState.hasBeenResized) {
+      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(key => newColumn[key] !== undefined);
+    }
+
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = (0, _extends2.default)({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+    });
   });
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(field => {
+      if (!columnsToKeep[field]) {
+        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+      }
+    });
+  }
+
   const columnsLookupBeforePreProcessing = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup);
-  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
 
   let columnVisibilityModel = {};
 
   if (shouldRegenColumnVisibilityModelFromColumns) {
-    if (reset) {
+    let hasModelChanged = false;
+    const newColumnVisibilityModel = (0, _extends2.default)({}, currentColumnVisibilityModel);
+
+    if (isInsideStateInitializer) {
       columnsStateWithPreProcessing.all.forEach(field => {
-        columnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
+        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
       });
-    } else {
-      const newColumnVisibilityModel = (0, _extends2.default)({}, currentColumnVisibilityModel);
-      let hasModelChanged = false;
-      columnsStateWithPreProcessing.all.forEach(field => {
-        var _currentColumnVisibil;
-
-        // If neither the `columnsToUpsert` nor the pre-processors updated the column,
-        // Then we don't want to update the visibility status of the column in the model.
-        if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
-          return;
-        }
-
-        const isVisibleBefore = (_currentColumnVisibil = currentColumnVisibilityModel[field]) != null ? _currentColumnVisibil : true;
-        const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
-
-        if (isVisibleAfter !== isVisibleBefore) {
+    } else if (keepOnlyColumnsToUpsert) {
+      // At this point, `keepOnlyColumnsToUpsert` has a new meaning: keep the columns
+      // passed via `columnToUpsert` + columns added by the pre-processors. We do the following
+      // cleanup because a given column may have been removed from the `columns` prop but it still
+      // exists in the state.
+      Object.keys(newColumnVisibilityModel).forEach(field => {
+        if (!columnsStateWithPreProcessing.lookup[field]) {
+          delete newColumnVisibilityModel[field];
           hasModelChanged = true;
-          newColumnVisibilityModel[field] = isVisibleAfter;
         }
       });
+    }
 
-      if (hasModelChanged) {
-        columnVisibilityModel = newColumnVisibilityModel;
-      } else {
-        columnVisibilityModel = currentColumnVisibilityModel;
+    columnsStateWithPreProcessing.all.forEach(field => {
+      // If neither the `columnsToUpsert` nor the pre-processors updated the column,
+      // Then we don't want to update the visibility status of the column in the model.
+      if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
+        return;
+      } // We always assume that a column not in the model is visible by default. However, there's an
+      // edge case where the column is not in the model but it also doesn't exist in the `columns`
+      // prop, meaning that the column is being added. In that case, we assume that the column was
+      // not visible before for it be added to the model.
+
+
+      let isVisibleBefore = currentColumnVisibilityModel[field];
+
+      if (isVisibleBefore === undefined) {
+        if (isInsideStateInitializer) {
+          isVisibleBefore = true;
+        } else {
+          const currentState = (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state);
+          isVisibleBefore = !!currentState.lookup[field];
+        }
+      }
+
+      const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+
+      if (isVisibleAfter !== isVisibleBefore) {
+        hasModelChanged = true;
+        newColumnVisibilityModel[field] = isVisibleAfter;
       }
+    });
+
+    if (hasModelChanged || isInsideStateInitializer) {
+      columnVisibilityModel = newColumnVisibilityModel;
+    } else {
+      columnVisibilityModel = currentColumnVisibilityModel;
     }
   } else {
     columnVisibilityModel = currentColumnVisibilityModel;
   }
 
-  const columnsState = (0, _extends2.default)({}, columnsStateWithPreProcessing, {
+  const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
+  const columnsState = (0, _extends2.default)({}, columnsStateWithPortableColumns, {
     columnVisibilityModel
   });
   return hydrateColumnsWidth(columnsState, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
@@ -296,8 +418,8 @@ const createColumnsState = ({
 
 exports.createColumnsState = createColumnsState;
 
-const setColumnsState = columnsState => state => (0, _extends2.default)({}, state, {
+const mergeColumnsState = columnsState => state => (0, _extends2.default)({}, state, {
   columns: columnsState
 });
 
-exports.setColumnsState = setColumnsState;
+exports.mergeColumnsState = mergeColumnsState;