@mui/x-data-grid 5.4.0 → 5.6.0

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

@@ -0,0 +1,303 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeColumnTypes = void 0;
+exports.computeFlexColumnsWidth = computeFlexColumnsWidth;
+exports.setColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef = exports.createColumnsState = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _models = require("../../../models");
+
+var _gridColumnsSelector = require("./gridColumnsSelector");
+
+var _utils = require("../../../utils/utils");
+
+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;
+  });
+  return mergedColumnTypes;
+};
+/**
+ * Computes width for flex columns.
+ * Based on CSS Flexbox specification:
+ * https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+ */
+
+
+exports.computeColumnTypes = computeColumnTypes;
+
+function computeFlexColumnsWidth({
+  initialFreeSpace,
+  totalFlexUnits,
+  flexColumns
+}) {
+  const flexColumnsLookup = {
+    all: {},
+    frozenFields: [],
+    freeze: field => {
+      const value = flexColumnsLookup.all[field];
+
+      if (value && value.frozen !== true) {
+        flexColumnsLookup.all[field].frozen = true;
+        flexColumnsLookup.frozenFields.push(field);
+      }
+    }
+  }; // Step 5 of https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+
+  function loopOverFlexItems() {
+    // 5a: If all the flex items on the line are frozen, free space has been distributed.
+    if (flexColumnsLookup.frozenFields.length === flexColumns.length) {
+      return;
+    }
+
+    const violationsLookup = {
+      min: {},
+      max: {}
+    };
+    let remainingFreeSpace = initialFreeSpace;
+    let flexUnits = totalFlexUnits;
+    let totalViolation = 0; // 5b: Calculate the remaining free space
+
+    flexColumnsLookup.frozenFields.forEach(field => {
+      remainingFreeSpace -= flexColumnsLookup.all[field].computedWidth;
+      flexUnits -= flexColumnsLookup.all[field].flex;
+    });
+
+    for (let i = 0; i < flexColumns.length; i += 1) {
+      const column = flexColumns[i];
+
+      if (flexColumnsLookup.all[column.field] && flexColumnsLookup.all[column.field].frozen === true) {
+        // eslint-disable-next-line no-continue
+        continue;
+      } // 5c: Distribute remaining free space proportional to the flex factors
+
+
+      const widthPerFlexUnit = remainingFreeSpace / flexUnits;
+      let computedWidth = widthPerFlexUnit * column.flex; // 5d: Fix min/max violations
+
+      if (computedWidth < column.minWidth) {
+        totalViolation += column.minWidth - computedWidth;
+        computedWidth = column.minWidth;
+        violationsLookup.min[column.field] = true;
+      } else if (computedWidth > column.maxWidth) {
+        totalViolation += column.maxWidth - computedWidth;
+        computedWidth = column.maxWidth;
+        violationsLookup.max[column.field] = true;
+      }
+
+      flexColumnsLookup.all[column.field] = {
+        frozen: false,
+        computedWidth,
+        flex: column.flex
+      };
+    } // 5e: Freeze over-flexed items
+
+
+    if (totalViolation < 0) {
+      // Freeze all the items with max violations
+      Object.keys(violationsLookup.max).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else if (totalViolation > 0) {
+      // Freeze all the items with min violations
+      Object.keys(violationsLookup.min).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else {
+      // Freeze all items
+      flexColumns.forEach(({
+        field
+      }) => {
+        flexColumnsLookup.freeze(field);
+      });
+    } // 5f: Return to the start of this loop
+
+
+    loopOverFlexItems();
+  }
+
+  loopOverFlexItems();
+  return flexColumnsLookup.all;
+}
+/**
+ * Compute the `computedWidth` (ie: the width the column should have during rendering) based on the `width` / `flex` / `minWidth` / `maxWidth` properties of `GridColDef`.
+ * The columns already have been merged with there `type` default values for `minWidth`, `maxWidth` and `width`, thus the `!` for those properties below.
+ * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
+ * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
+ */
+
+
+const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
+  const columnsLookup = {};
+  let totalFlexUnits = 0;
+  let widthAllocatedBeforeFlex = 0;
+  const flexColumns = []; // For the non-flex columns, compute their width
+  // For the flex columns, compute there minimum width and how much width must be allocated during the flex allocation
+
+  rawState.all.forEach(columnField => {
+    const newColumn = (0, _extends2.default)({}, rawState.lookup[columnField]);
+
+    if (rawState.columnVisibilityModel[columnField] === false) {
+      newColumn.computedWidth = 0;
+    } else {
+      let computedWidth;
+
+      if (newColumn.flex && newColumn.flex > 0) {
+        totalFlexUnits += newColumn.flex;
+        computedWidth = 0;
+        flexColumns.push(newColumn);
+      } else {
+        computedWidth = (0, _utils.clamp)(newColumn.width, newColumn.minWidth, newColumn.maxWidth);
+      }
+
+      widthAllocatedBeforeFlex += computedWidth;
+      newColumn.computedWidth = computedWidth;
+    }
+
+    columnsLookup[columnField] = newColumn;
+  });
+  const initialFreeSpace = Math.max(viewportInnerWidth - widthAllocatedBeforeFlex, 0); // Allocate the remaining space to the flex columns
+
+  if (totalFlexUnits > 0 && viewportInnerWidth > 0) {
+    const computedColumnWidths = computeFlexColumnsWidth({
+      initialFreeSpace,
+      totalFlexUnits,
+      flexColumns
+    });
+    Object.keys(computedColumnWidths).forEach(field => {
+      columnsLookup[field].computedWidth = computedColumnWidths[field].computedWidth;
+    });
+  }
+
+  return (0, _extends2.default)({}, rawState, {
+    lookup: columnsLookup
+  });
+};
+
+exports.hydrateColumnsWidth = hydrateColumnsWidth;
+let columnTypeWarnedOnce = false;
+/**
+ * @deprecated Should have been internal only, you can inline the logic.
+ */
+
+const getGridColDef = (columnTypes, type) => {
+  if (!type) {
+    return columnTypes[_models.DEFAULT_GRID_COL_TYPE_KEY];
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!columnTypeWarnedOnce && !columnTypes[type]) {
+      console.warn([`MUI: The column type "${type}" you are using is not supported.`, `Column type "string" is being used instead.`].join('\n'));
+      columnTypeWarnedOnce = true;
+    }
+  }
+
+  if (!columnTypes[type]) {
+    return columnTypes[_models.DEFAULT_GRID_COL_TYPE_KEY];
+  }
+
+  return columnTypes[type];
+};
+
+exports.getGridColDef = getGridColDef;
+
+const createColumnsState = ({
+  apiRef,
+  columnsToUpsert,
+  columnsTypes,
+  currentColumnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
+  shouldRegenColumnVisibilityModelFromColumns,
+  reset
+}) => {
+  var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
+
+  let columnsStateWithoutColumnVisibilityModel;
+
+  if (reset) {
+    columnsStateWithoutColumnVisibilityModel = {
+      all: [],
+      lookup: {}
+    };
+  } else {
+    const currentState = (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state);
+    columnsStateWithoutColumnVisibilityModel = {
+      all: [...currentState.all],
+      lookup: (0, _extends2.default)({}, currentState.lookup)
+    };
+  }
+
+  const columnsToUpsertLookup = {};
+  columnsToUpsert.forEach(newColumn => {
+    columnsToUpsertLookup[newColumn.field] = true;
+
+    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == 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);
+    }
+  });
+  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.
+
+  let columnVisibilityModel = {};
+
+  if (shouldRegenColumnVisibilityModelFromColumns) {
+    if (reset) {
+      columnsStateWithPreProcessing.all.forEach(field => {
+        columnVisibilityModel[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) {
+          hasModelChanged = true;
+          newColumnVisibilityModel[field] = isVisibleAfter;
+        }
+      });
+
+      if (hasModelChanged) {
+        columnVisibilityModel = newColumnVisibilityModel;
+      } else {
+        columnVisibilityModel = currentColumnVisibilityModel;
+      }
+    }
+  } else {
+    columnVisibilityModel = currentColumnVisibilityModel;
+  }
+
+  const columnsState = (0, _extends2.default)({}, columnsStateWithPreProcessing, {
+    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);
+};
+
+exports.createColumnsState = createColumnsState;
+
+const setColumnsState = columnsState => state => (0, _extends2.default)({}, state, {
+  columns: columnsState
+});
+
+exports.setColumnsState = setColumnsState;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  getGridColDef: true
+};
+Object.defineProperty(exports, "getGridColDef", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsUtils.getGridColDef;
+  }
+});
+
+var _gridColumnsSelector = require("./gridColumnsSelector");
+
+Object.keys(_gridColumnsSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gridColumnsSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridColumnsSelector[key];
+    }
+  });
+});
+
+var _gridColumnsUtils = require("./gridColumnsUtils");

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

@@ -0,0 +1,315 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnsStateInitializer = void 0;
+exports.useGridColumns = useGridColumns;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _events = require("../../../models/events");
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _useGridLogger = require("../../utils/useGridLogger");
+
+var _gridColumnsSelector = require("./gridColumnsSelector");
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+var _preProcessing = require("../../core/preProcessing");
+
+var _gridColumnsUtils = require("./gridColumnsUtils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const columnsStateInitializer = (state, props, apiRef) => {
+  var _props$initialState, _props$initialState$c, _ref, _props$columnVisibili, _props$initialState2, _props$initialState2$;
+
+  const shouldUseVisibleColumnModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
+  const columnsTypes = (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes);
+  const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+    apiRef,
+    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
+  });
+  return (0, _extends2.default)({}, state, {
+    columns: columnsState
+  });
+};
+/**
+ * @requires useGridParamsApi (method)
+ * @requires useGridDimensions (method, event) - can be after
+ * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
+ */
+
+
+exports.columnsStateInitializer = columnsStateInitializer;
+
+function useGridColumns(apiRef, props) {
+  var _props$initialState3, _props$initialState3$;
+
+  const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
+  const columnsTypes = React.useMemo(() => (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes), [props.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`
+   */
+
+  const shouldUseVisibleColumnModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState3 = props.initialState) != null && (_props$initialState3$ = _props$initialState3.columns) != null && _props$initialState3$.columnVisibilityModel)).current;
+  apiRef.current.unstable_updateControlState({
+    stateId: 'visibleColumns',
+    propModel: props.columnVisibilityModel,
+    propOnChange: props.onColumnVisibilityModelChange,
+    stateSelector: _gridColumnsSelector.gridColumnVisibilityModelSelector,
+    changeEvent: _events.GridEvents.columnVisibilityModelChange
+  });
+  const setGridColumnsState = React.useCallback(columnsState => {
+    logger.debug('Updating columns state.');
+    apiRef.current.setState((0, _gridColumnsUtils.setColumnsState)(columnsState));
+    apiRef.current.forceUpdate();
+    apiRef.current.publishEvent(_events.GridEvents.columnsChange, columnsState.all);
+  }, [logger, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  const getColumn = React.useCallback(field => (0, _gridColumnsSelector.gridColumnLookupSelector)(apiRef)[field], [apiRef]);
+  const getAllColumns = React.useCallback(() => (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef), [apiRef]);
+  const getVisibleColumns = React.useCallback(() => (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef), [apiRef]);
+  const getColumnsMeta = React.useCallback(() => (0, _gridColumnsSelector.gridColumnsMetaSelector)(apiRef), [apiRef]);
+  const getColumnIndex = React.useCallback((field, useVisibleColumns = true) => {
+    const columns = useVisibleColumns ? (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef) : (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef);
+    return columns.findIndex(col => col.field === field);
+  }, [apiRef]);
+  const getColumnPosition = React.useCallback(field => {
+    const index = getColumnIndex(field);
+    return (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef)[index];
+  }, [apiRef, getColumnIndex]);
+  const setColumnVisibilityModel = React.useCallback(model => {
+    const currentModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+
+    if (currentModel !== model) {
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        columns: (0, _gridColumnsUtils.createColumnsState)({
+          apiRef,
+          columnsTypes,
+          columnsToUpsert: [],
+          shouldRegenColumnVisibilityModelFromColumns: false,
+          currentColumnVisibilityModel: model,
+          reset: false
+        })
+      }));
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, columnsTypes]);
+  const updateColumns = React.useCallback(columns => {
+    const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+      apiRef,
+      columnsTypes,
+      columnsToUpsert: columns,
+      shouldRegenColumnVisibilityModelFromColumns: true,
+      reset: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, setGridColumnsState, columnsTypes]);
+  const updateColumn = React.useCallback(column => apiRef.current.updateColumns([column]), [apiRef]);
+  const setColumnVisibility = React.useCallback((field, isVisible) => {
+    // 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) {
+      var _columnVisibilityMode;
+
+      const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+      const isCurrentlyVisible = (_columnVisibilityMode = columnVisibilityModel[field]) != null ? _columnVisibilityMode : true;
+
+      if (isVisible !== isCurrentlyVisible) {
+        const newModel = (0, _extends2.default)({}, columnVisibilityModel, {
+          [field]: isVisible
+        });
+        apiRef.current.setColumnVisibilityModel(newModel);
+      }
+    } else {
+      const column = apiRef.current.getColumn(field);
+      const newColumn = (0, _extends2.default)({}, column, {
+        hide: !isVisible
+      });
+      apiRef.current.updateColumns([newColumn]);
+      const params = {
+        field,
+        colDef: newColumn,
+        isVisible
+      };
+      apiRef.current.publishEvent(_events.GridEvents.columnVisibilityChange, params);
+    }
+  }, [apiRef, shouldUseVisibleColumnModel]);
+  const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
+    const allColumns = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
+    const oldIndexPosition = allColumns.findIndex(col => col === field);
+
+    if (oldIndexPosition === targetIndexPosition) {
+      return;
+    }
+
+    logger.debug(`Moving column ${field} to index ${targetIndexPosition}`);
+    const updatedColumns = [...allColumns];
+    updatedColumns.splice(targetIndexPosition, 0, updatedColumns.splice(oldIndexPosition, 1)[0]);
+    setGridColumnsState((0, _extends2.default)({}, (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state), {
+      all: updatedColumns
+    }));
+    const params = {
+      field,
+      element: apiRef.current.getColumnHeaderElement(field),
+      colDef: apiRef.current.getColumn(field),
+      targetIndex: targetIndexPosition,
+      oldIndex: oldIndexPosition
+    };
+    apiRef.current.publishEvent(_events.GridEvents.columnOrderChange, params);
+  }, [apiRef, logger, setGridColumnsState]);
+  const setColumnWidth = React.useCallback((field, width) => {
+    logger.debug(`Updating column ${field} width to ${width}`);
+    const column = apiRef.current.getColumn(field);
+    const newColumn = (0, _extends2.default)({}, column, {
+      width
+    });
+    apiRef.current.updateColumns([newColumn]);
+    apiRef.current.publishEvent(_events.GridEvents.columnWidthChange, {
+      element: apiRef.current.getColumnHeaderElement(field),
+      colDef: newColumn,
+      width
+    });
+  }, [apiRef, logger]);
+  const columnApi = {
+    getColumn,
+    getAllColumns,
+    getColumnIndex,
+    getColumnPosition,
+    getVisibleColumns,
+    getColumnsMeta,
+    updateColumn,
+    updateColumns,
+    setColumnVisibilityModel,
+    setColumnVisibility,
+    setColumnIndex,
+    setColumnWidth
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnApi, 'GridColumnApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    if (!shouldUseVisibleColumnModel) {
+      return prevState;
+    }
+
+    const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
+
+    if (!hasHiddenColumns) {
+      return prevState;
+    }
+
+    return (0, _extends2.default)({}, prevState, {
+      columns: {
+        columnVisibilityModel: columnVisibilityModelToExport
+      }
+    });
+  }, [apiRef, shouldUseVisibleColumnModel]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    var _context$stateToResto;
+
+    if (!shouldUseVisibleColumnModel) {
+      return params;
+    }
+
+    const columnVisibilityModel = (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel;
+
+    if (columnVisibilityModel != null) {
+      const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+        apiRef,
+        columnsTypes,
+        columnsToUpsert: [],
+        shouldRegenColumnVisibilityModelFromColumns: false,
+        currentColumnVisibilityModel: columnVisibilityModel,
+        reset: false
+      });
+      apiRef.current.setState((0, _gridColumnsUtils.setColumnsState)(columnsState));
+    }
+
+    return params;
+  }, [apiRef, shouldUseVisibleColumnModel, columnsTypes]);
+  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  /**
+   * EVENTS
+   */
+
+  const handlePreProcessorRegister = React.useCallback(name => {
+    if (name !== 'hydrateColumns') {
+      return;
+    }
+
+    logger.info(`Columns pre-processing have changed, regenerating the columns`);
+    const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+      apiRef,
+      columnsTypes,
+      columnsToUpsert: [],
+      shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
+      reset: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, logger, setGridColumnsState, columnsTypes, shouldUseVisibleColumnModel]);
+  const prevInnerWidth = React.useRef(null);
+
+  const handleGridSizeChange = viewportInnerSize => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state), viewportInnerSize.width));
+    }
+  };
+
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.viewportInnerSizeChange, handleGridSizeChange);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  /**
+   * EFFECTS
+   */
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    logger.info(`GridColumns have changed, new length ${props.columns.length}`);
+    const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+      apiRef,
+      columnsTypes,
+      // 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,
+      columnsToUpsert: props.columns,
+      reset: true
+    });
+    setGridColumnsState(columnsState);
+  }, [logger, apiRef, setGridColumnsState, props.columns, columnsTypes, shouldUseVisibleColumnModel]);
+  React.useEffect(() => {
+    if (props.columnVisibilityModel !== undefined) {
+      apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);
+    }
+  }, [apiRef, logger, props.columnVisibilityModel]);
+}

package/node/hooks/features/density/densitySelector.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridDensityValueSelector = exports.gridDensitySelector = exports.gridDensityRowHeightSelector = exports.gridDensityHeaderHeightSelector = exports.gridDensityFactorSelector = void 0;
+
+var _createSelector = require("../../../utils/createSelector");
+
+const gridDensitySelector = state => state.density;
+
+exports.gridDensitySelector = gridDensitySelector;
+const gridDensityValueSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.value);
+exports.gridDensityValueSelector = gridDensityValueSelector;
+const gridDensityRowHeightSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.rowHeight);
+exports.gridDensityRowHeightSelector = gridDensityRowHeightSelector;
+const gridDensityHeaderHeightSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.headerHeight);
+exports.gridDensityHeaderHeightSelector = gridDensityHeaderHeightSelector;
+const gridDensityFactorSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.factor);
+exports.gridDensityFactorSelector = gridDensityFactorSelector;

package/node/hooks/features/density/densityState.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});