@mui/x-data-grid 7.0.0-beta.6 → 7.0.0

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

@@ -4,50 +4,42 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridDensity = exports.densityStateInitializer = exports.COMPACT_DENSITY_FACTOR = exports.COMFORTABLE_DENSITY_FACTOR = void 0;
+exports.useGridDensity = exports.densityStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _densitySelector = require("./densitySelector");
-var _utils = require("../../../utils/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const COMPACT_DENSITY_FACTOR = exports.COMPACT_DENSITY_FACTOR = 0.7;
-const COMFORTABLE_DENSITY_FACTOR = exports.COMFORTABLE_DENSITY_FACTOR = 1.3;
-const DENSITY_FACTORS = {
-  compact: COMPACT_DENSITY_FACTOR,
-  comfortable: COMFORTABLE_DENSITY_FACTOR,
-  standard: 1
-};
 const densityStateInitializer = (state, props) => (0, _extends2.default)({}, state, {
-  density: {
-    value: props.density,
-    factor: DENSITY_FACTORS[props.density]
-  }
+  density: props.initialState?.density ?? props.density ?? 'standard'
 });
 exports.densityStateInitializer = densityStateInitializer;
 const useGridDensity = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useDensity');
-  const setDensity = React.useCallback(newDensity => {
+  apiRef.current.registerControlState({
+    stateId: 'density',
+    propModel: props.density,
+    propOnChange: props.onDensityChange,
+    stateSelector: _densitySelector.gridDensitySelector,
+    changeEvent: 'densityChange'
+  });
+  const setDensity = (0, _useEventCallback.default)(newDensity => {
+    const currentDensity = (0, _densitySelector.gridDensitySelector)(apiRef.current.state);
+    if (currentDensity === newDensity) {
+      return;
+    }
     logger.debug(`Set grid density to ${newDensity}`);
-    apiRef.current.setState(state => {
-      const currentDensityState = (0, _densitySelector.gridDensitySelector)(state);
-      const newDensityState = {
-        value: newDensity,
-        factor: DENSITY_FACTORS[newDensity]
-      };
-      if ((0, _utils.isDeepEqual)(currentDensityState, newDensityState)) {
-        return state;
-      }
-      return (0, _extends2.default)({}, state, {
-        density: newDensityState
-      });
-    });
-    apiRef.current.forceUpdate();
-  }, [logger, apiRef]);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      density: newDensity
+    }));
+  });
   React.useEffect(() => {
-    apiRef.current.setDensity(props.density);
+    if (props.density) {
+      apiRef.current.setDensity(props.density);
+    }
   }, [apiRef, props.density]);
   const densityApi = {
     setDensity

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

@@ -64,9 +64,7 @@ function useGridDimensions(apiRef, props) {
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
   const columnsTotalWidth = roundToDecimalPlaces((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 6);
-  // XXX: The `props as any` below is not resilient to change.
-  const hasHeaderFilters = Boolean(props.headerFilters);
-  const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props.columnHeaderHeight) + Number(hasHeaderFilters) * headerHeight;
+  const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props.columnHeaderHeight);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
@@ -123,8 +121,9 @@ function useGridDimensions(apiRef, props) {
     const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
     const topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
     const bottomContainerHeight = pinnedRowsHeight.bottom;
+    const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
     const contentSize = {
-      width: columnsTotalWidth,
+      width: nonPinnedColumnsTotalWidth,
       height: rowsMeta.currentPageTotalHeight
     };
     let viewportOuterSize;
@@ -173,7 +172,7 @@ function useGridDimensions(apiRef, props) {
     }
     const rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
     const minimumSize = {
-      width: contentSize.width,
+      width: columnsTotalWidth,
       height: topContainerHeight + contentSize.height + bottomContainerHeight
     };
     const newDimensions = {

package/node/hooks/features/editing/useGridCellEditing.js

@@ -23,7 +23,7 @@ const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
 const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);
@@ -243,8 +243,27 @@ const useGridCellEditing = (apiRef, props) => {
       initialValue
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
-    if (deleteValue || initialValue) {
-      newValue = deleteValue ? '' : initialValue;
+    if (deleteValue) {
+      const fieldType = apiRef.current.getColumn(field).type;
+      switch (fieldType) {
+        case 'boolean':
+          newValue = false;
+          break;
+        case 'date':
+        case 'dateTime':
+        case 'number':
+          newValue = undefined;
+          break;
+        case 'singleSelect':
+          newValue = null;
+          break;
+        case 'string':
+        default:
+          newValue = '';
+          break;
+      }
+    } else if (initialValue) {
+      newValue = initialValue;
     }
     const newProps = {
       value: newValue,

package/node/hooks/features/editing/useGridRowEditing.js

@@ -25,7 +25,7 @@ const _excluded = ["id"],
   _excluded2 = ["id"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
 const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);

package/node/hooks/features/export/serializers/csvSerializer.js

@@ -7,11 +7,14 @@ exports.buildCSV = buildCSV;
 exports.serializeCellValue = void 0;
 var _colDef = require("../../../../colDef");
 var _warning = require("../../../../utils/warning");
-function sanitizeCellValue(value, delimiterCharacter) {
+function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
   if (typeof value === 'string') {
     // Make sure value containing delimiter or line break won't be split into multiple rows
     if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
-      return `"${value.replace(/"/g, '""')}"`;
+      if (shouldAppendQuotes) {
+        return `"${value.replace(/"/g, '""')}"`;
+      }
+      return `${value.replace(/"/g, '""')}`;
     }
     return value;
   }
@@ -20,7 +23,8 @@ function sanitizeCellValue(value, delimiterCharacter) {
 const serializeCellValue = (cellParams, options) => {
   const {
     delimiterCharacter,
-    ignoreValueFormatter
+    ignoreValueFormatter,
+    shouldAppendQuotes
   } = options;
   let value;
   if (ignoreValueFormatter) {
@@ -37,7 +41,7 @@ const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter);
+  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
 };
 exports.serializeCellValue = serializeCellValue;
 const objectFormattedValueWarning = (0, _warning.buildWarning)(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
@@ -55,7 +59,7 @@ class CSVRow {
     if (value === null || value === undefined) {
       this.rowString += '';
     } else if (typeof this.options.sanitizeCellValue === 'function') {
-      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter);
+      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
     } else {
       this.rowString += value;
     }
@@ -70,10 +74,12 @@ const serializeRow = ({
   columns,
   getCellParams,
   delimiterCharacter,
-  ignoreValueFormatter
+  ignoreValueFormatter,
+  shouldAppendQuotes
 }) => {
   const row = new CSVRow({
-    delimiterCharacter
+    delimiterCharacter,
+    shouldAppendQuotes
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
@@ -84,7 +90,8 @@ const serializeRow = ({
     }
     row.addValue(serializeCellValue(cellParams, {
       delimiterCharacter,
-      ignoreValueFormatter
+      ignoreValueFormatter,
+      shouldAppendQuotes
     }));
   });
   return row.getRowString();
@@ -97,14 +104,16 @@ function buildCSV(options) {
     includeHeaders,
     includeColumnGroupsHeaders,
     ignoreValueFormatter,
-    apiRef
+    apiRef,
+    shouldAppendQuotes
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
     delimiterCharacter,
-    ignoreValueFormatter
+    ignoreValueFormatter,
+    shouldAppendQuotes
   })}\r\n`, '').trim();
   if (!includeHeaders) {
     return CSVBody;
@@ -123,7 +132,8 @@ function buildCSV(options) {
     for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
       const headerGroupRow = new CSVRow({
         delimiterCharacter,
-        sanitizeCellValue
+        sanitizeCellValue,
+        shouldAppendQuotes
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(column => {
@@ -135,7 +145,8 @@ function buildCSV(options) {
   }
   const mainHeaderRow = new CSVRow({
     delimiterCharacter,
-    sanitizeCellValue
+    sanitizeCellValue,
+    shouldAppendQuotes
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

package/node/hooks/features/export/useGridCsvExport.js

@@ -43,7 +43,8 @@ const useGridCsvExport = (apiRef, props) => {
       includeHeaders: options.includeHeaders ?? true,
       includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
       ignoreValueFormatter,
-      apiRef
+      apiRef,
+      shouldAppendQuotes: options.shouldAppendQuotes ?? true
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/node/hooks/features/export/useGridPrintExport.js

@@ -15,7 +15,7 @@ var _gridClasses = require("../../../constants/gridClasses");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _utils2 = require("./utils");
-var _useGridPagination = require("../pagination/useGridPagination");
+var _useGridPaginationModel = require("../pagination/useGridPaginationModel");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
@@ -104,9 +104,6 @@ const useGridPrintExport = (apiRef, props) => {
 
     // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
     gridClone.style.contain = 'size';
-    const columnHeaders = gridClone.querySelector(`.${_gridClasses.gridClasses.columnHeaders}`);
-    const columnHeadersInner = columnHeaders.querySelector(`.${_gridClasses.gridClasses.columnHeadersInner}`);
-    columnHeadersInner.style.width = '100%';
     let gridToolbarElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.toolbarContainer}`)?.offsetHeight || 0;
     let gridFooterElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.footerContainer}`)?.offsetHeight || 0;
     if (normalizeOptions.hideToolbar) {
@@ -227,9 +224,13 @@ const useGridPrintExport = (apiRef, props) => {
         page: 0,
         pageSize: visibleRowCount
       };
-      apiRef.current.updateControlState('pagination',
-      // Using signature `DataGridPro` to allow more than 100 rows in the print export
-      (0, _useGridPagination.mergeStateWithPaginationModel)(visibleRowCount, 'DataGridPro', paginationModel));
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        pagination: (0, _extends2.default)({}, state.pagination, {
+          paginationModel: (0, _useGridPaginationModel.getDerivedPaginationModel)(state.pagination,
+          // Using signature `DataGridPro` to allow more than 100 rows in the print export
+          'DataGridPro', paginationModel)
+        })
+      }));
       apiRef.current.forceUpdate();
     }
     await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);

package/node/hooks/features/filter/gridFilterUtils.js

@@ -167,7 +167,7 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) =>
   }
 
   // We generate a new function with `new Function()` to avoid expensive patterns for JS engines
-  // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
+  // such as a dynamic object assignment, for example `{ [dynamicKey]: value }`.
   const filterItemCore = new Function('appliers', 'row', 'shouldApplyFilter', `"use strict";
 ${appliers.map((applier, i) => `const shouldApply${i} = !shouldApplyFilter || shouldApplyFilter(${JSON.stringify(applier.item.field)});`).join('\n')}
 

package/node/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridHeaderFilteringStateSelector = exports.gridHeaderFilteringMenuSelector = exports.gridHeaderFilteringEditFieldSelector = void 0;
+exports.gridHeaderFilteringStateSelector = exports.gridHeaderFilteringMenuSelector = exports.gridHeaderFilteringEnabledSelector = exports.gridHeaderFilteringEditFieldSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridHeaderFilteringStateSelector = state => state.headerFiltering;
 exports.gridHeaderFilteringStateSelector = gridHeaderFilteringStateSelector;
+const gridHeaderFilteringEnabledSelector = exports.gridHeaderFilteringEnabledSelector = (0, _createSelector.createSelector)(gridHeaderFilteringStateSelector,
+// No initialization in MIT, so we need to default to false to be used by `getTotalHeaderHeight`
+headerFilteringState => headerFilteringState?.enabled ?? false);
 const gridHeaderFilteringEditFieldSelector = exports.gridHeaderFilteringEditFieldSelector = (0, _createSelector.createSelector)(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
 const gridHeaderFilteringMenuSelector = exports.gridHeaderFilteringMenuSelector = (0, _createSelector.createSelector)(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);

package/node/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -12,8 +12,10 @@ var _utils = require("../../utils");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const headerFilteringStateInitializer = state => (0, _extends2.default)({}, state, {
+const headerFilteringStateInitializer = (state, props) => (0, _extends2.default)({}, state, {
+  // @ts-expect-error Access `Pro` prop in MIT
   headerFiltering: {
+    enabled: props.headerFilters ?? false,
     editing: null,
     menuOpen: null
   }
@@ -21,6 +23,8 @@ const headerFilteringStateInitializer = state => (0, _extends2.default)({}, stat
 exports.headerFilteringStateInitializer = headerFilteringStateInitializer;
 const useGridHeaderFiltering = (apiRef, props) => {
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridHeaderFiltering');
+  // @ts-expect-error Access `Pro` prop in MIT
+  const isHeaderFilteringEnabled = props.headerFilters ?? false;
   const setHeaderFilterState = React.useCallback(headerFilterState => {
     apiRef.current.setState(state => {
       // Safety check to avoid MIT users from using it
@@ -30,13 +34,14 @@ const useGridHeaderFiltering = (apiRef, props) => {
       }
       return (0, _extends2.default)({}, state, {
         headerFiltering: {
+          enabled: isHeaderFilteringEnabled ?? false,
           editing: headerFilterState.editing ?? null,
           menuOpen: headerFilterState.menuOpen ?? null
         }
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, props.signature]);
+  }, [apiRef, props.signature, isHeaderFilteringEnabled]);
   const startHeaderFilterEditMode = React.useCallback(field => {
     logger.debug(`Starting edit mode on header filter for field: ${field}`);
     apiRef.current.setHeaderFilterState({
@@ -97,5 +102,19 @@ const useGridHeaderFiltering = (apiRef, props) => {
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, headerFilterApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, headerFilterPrivateApi, 'private');
+
+  /*
+   * EFFECTS
+   */
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      apiRef.current.setHeaderFilterState({
+        enabled: isHeaderFilteringEnabled
+      });
+    }
+  }, [apiRef, isHeaderFilteringEnabled]);
 };
 exports.useGridHeaderFiltering = useGridHeaderFiltering;

package/node/hooks/features/index.js

@@ -36,6 +36,17 @@ Object.keys(_columnGrouping).forEach(function (key) {
     }
   });
 });
+var _columnResize = require("./columnResize");
+Object.keys(_columnResize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnResize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnResize[key];
+    }
+  });
+});
 var _density = require("./density");
 Object.keys(_density).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/hooks/features/pagination/gridPaginationSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationModelSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
+exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
@@ -21,6 +21,12 @@ const gridPaginationSelector = state => state.pagination;
 exports.gridPaginationSelector = gridPaginationSelector;
 const gridPaginationModelSelector = exports.gridPaginationModelSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.paginationModel);
 
+/**
+ * Get the row count
+ * @category Pagination
+ */
+const gridPaginationRowCountSelector = exports.gridPaginationRowCountSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.rowCount);
+
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
@@ -37,7 +43,7 @@ const gridPageSizeSelector = exports.gridPageSizeSelector = (0, _createSelector.
  * Get the amount of pages needed to display all the rows if the pagination is enabled
  * @category Pagination
  */
-const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelector.createSelector)(gridPaginationModelSelector, _gridFilterSelector.gridFilteredTopLevelRowCountSelector, (paginationModel, visibleTopLevelRowCount) => (0, _gridPaginationUtils.getPageCount)(visibleTopLevelRowCount, paginationModel.pageSize));
+const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelector.createSelector)(gridPageSizeSelector, gridPaginationRowCountSelector, (pageSize, rowCount) => (0, _gridPaginationUtils.getPageCount)(rowCount, pageSize));
 
 /**
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.

package/node/hooks/features/pagination/useGridPagination.js

@@ -4,174 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridPagination = exports.paginationStateInitializer = exports.mergeStateWithPaginationModel = void 0;
+exports.useGridPagination = exports.paginationStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _filter = require("../filter");
-var _density = require("../density");
-var _utils = require("../../utils");
-var _pipeProcessing = require("../../core/pipeProcessing");
-var _gridPaginationSelector = require("./gridPaginationSelector");
 var _gridPaginationUtils = require("./gridPaginationUtils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _useGridPaginationModel = require("./useGridPaginationModel");
+var _useGridRowCount = require("./useGridRowCount");
 const paginationStateInitializer = (state, props) => {
   const paginationModel = (0, _extends2.default)({}, (0, _gridPaginationUtils.getDefaultGridPaginationModel)(props.autoPageSize), props.paginationModel ?? props.initialState?.pagination?.paginationModel);
   (0, _gridPaginationUtils.throwIfPageSizeExceedsTheLimit)(paginationModel.pageSize, props.signature);
+  const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
   return (0, _extends2.default)({}, state, {
     pagination: {
-      paginationModel
+      paginationModel,
+      rowCount
     }
   });
 };
-exports.paginationStateInitializer = paginationStateInitializer;
-const mergeStateWithPaginationModel = (rowCount, signature, paginationModelProp) => paginationState => {
-  let paginationModel = paginationState.paginationModel;
-  const pageSize = paginationModelProp?.pageSize ?? paginationModel.pageSize;
-  const pageCount = (0, _gridPaginationUtils.getPageCount)(rowCount, pageSize);
-  if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
-    paginationModel = paginationModelProp;
-  }
-  const validPage = (0, _gridPaginationUtils.getValidPage)(paginationModel.page, pageCount);
-  if (validPage !== paginationModel.page) {
-    paginationModel = (0, _extends2.default)({}, paginationModel, {
-      page: validPage
-    });
-  }
-  (0, _gridPaginationUtils.throwIfPageSizeExceedsTheLimit)(paginationModel.pageSize, signature);
-  return {
-    paginationModel
-  };
-};
 
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
-exports.mergeStateWithPaginationModel = mergeStateWithPaginationModel;
+exports.paginationStateInitializer = paginationStateInitializer;
 const useGridPagination = (apiRef, props) => {
-  const logger = (0, _utils.useGridLogger)(apiRef, 'useGridPagination');
-  const visibleTopLevelRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridFilteredTopLevelRowCountSelector);
-  const densityFactor = (0, _utils.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
-  const rowHeight = Math.floor(props.rowHeight * densityFactor);
-  apiRef.current.registerControlState({
-    stateId: 'pagination',
-    propModel: props.paginationModel,
-    propOnChange: props.onPaginationModelChange,
-    stateSelector: _gridPaginationSelector.gridPaginationModelSelector,
-    changeEvent: 'paginationModelChange'
-  });
-
-  /**
-   * API METHODS
-   */
-  const setPage = React.useCallback(page => {
-    const currentModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
-    if (page === currentModel.page) {
-      return;
-    }
-    logger.debug(`Setting page to ${page}`);
-    apiRef.current.setPaginationModel({
-      page,
-      pageSize: currentModel.pageSize
-    });
-  }, [apiRef, logger]);
-  const setPageSize = React.useCallback(pageSize => {
-    const currentModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
-    if (pageSize === currentModel.pageSize) {
-      return;
-    }
-    logger.debug(`Setting page size to ${pageSize}`);
-    apiRef.current.setPaginationModel({
-      pageSize,
-      page: currentModel.page
-    });
-  }, [apiRef, logger]);
-  const setPaginationModel = React.useCallback(paginationModel => {
-    const currentModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
-    if (paginationModel === currentModel) {
-      return;
-    }
-    logger.debug("Setting 'paginationModel' to", paginationModel);
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel(props.rowCount ?? visibleTopLevelRowCount, props.signature, paginationModel), 'setPaginationModel');
-    apiRef.current.forceUpdate();
-  }, [apiRef, logger, props.rowCount, props.signature, visibleTopLevelRowCount]);
-  const pageApi = {
-    setPage,
-    setPageSize,
-    setPaginationModel
-  };
-  (0, _utils.useGridApiMethod)(apiRef, pageApi, 'public');
-
-  /**
-   * PRE-PROCESSING
-   */
-  const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    const paginationModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
-    const shouldExportPaginationModel =
-    // Always export if the `exportOnlyDirtyModels` property is not activated
-    !context.exportOnlyDirtyModels ||
-    // Always export if the `paginationModel` is controlled
-    props.paginationModel != null ||
-    // Always export if the `paginationModel` has been initialized
-    props.initialState?.pagination?.paginationModel != null ||
-    // Export if `page` or `pageSize` is not equal to the default value
-    paginationModel.page !== 0 && paginationModel.pageSize !== (0, _gridPaginationUtils.defaultPageSize)(props.autoPageSize);
-    if (!shouldExportPaginationModel) {
-      return prevState;
-    }
-    return (0, _extends2.default)({}, prevState, {
-      pagination: (0, _extends2.default)({}, prevState.pagination, {
-        paginationModel
-      })
-    });
-  }, [apiRef, props.paginationModel, props.initialState?.pagination?.paginationModel, props.autoPageSize]);
-  const stateRestorePreProcessing = React.useCallback((params, context) => {
-    const paginationModel = context.stateToRestore.pagination?.paginationModel ? (0, _extends2.default)({}, (0, _gridPaginationUtils.getDefaultGridPaginationModel)(props.autoPageSize), context.stateToRestore.pagination?.paginationModel) : (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel(props.rowCount ?? visibleTopLevelRowCount, props.signature, paginationModel), 'stateRestorePreProcessing');
-    return params;
-  }, [apiRef, props.autoPageSize, props.rowCount, props.signature, visibleTopLevelRowCount]);
-  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EVENTS
-   */
-  const handlePaginationModelChange = () => {
-    const paginationModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
-    if (apiRef.current.virtualScrollerRef?.current) {
-      apiRef.current.scrollToIndexes({
-        rowIndex: paginationModel.page * paginationModel.pageSize
-      });
-    }
-    apiRef.current.forceUpdate();
-  };
-  const handleUpdateAutoPageSize = React.useCallback(() => {
-    if (!props.autoPageSize) {
-      return;
-    }
-    const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
-    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
-  }, [apiRef, props.autoPageSize, rowHeight]);
-  (0, _utils.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
-  (0, _utils.useGridApiEventHandler)(apiRef, 'paginationModelChange', handlePaginationModelChange);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (props.paginationMode === 'server' && props.rowCount == null) {
-        (0, _gridPaginationUtils.noRowCountInServerMode)();
-      }
-    }
-  }, [props.rowCount, props.paginationMode]);
-  React.useEffect(() => {
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel(props.rowCount ?? visibleTopLevelRowCount, props.signature, props.paginationModel));
-  }, [apiRef, props.paginationModel, props.rowCount, props.paginationMode, visibleTopLevelRowCount, props.signature]);
-  React.useEffect(() => {
-    handleUpdateAutoPageSize();
-  }, [handleUpdateAutoPageSize]);
+  (0, _useGridPaginationModel.useGridPaginationModel)(apiRef, props);
+  (0, _useGridRowCount.useGridRowCount)(apiRef, props);
 };
 exports.useGridPagination = useGridPagination;