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

package/hooks/features/export/useGridPrintExport.js

@@ -8,7 +8,7 @@ import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { defaultGetRowsToExport, getColumnsToExport } from './utils';
-import { mergeStateWithPaginationModel } from '../pagination/useGridPagination';
+import { getDerivedPaginationModel } from '../pagination/useGridPaginationModel';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
@@ -75,7 +75,6 @@ export const useGridPrintExport = (apiRef, props) => {
     apiRef.current.setRows(newRows);
   }, [apiRef]);
   const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
-    var _querySelector, _querySelector2;
     const normalizeOptions = _extends({
       copyStyles: true,
       hideToolbar: false,
@@ -96,19 +95,14 @@ export 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.columnHeaders}`);
-    const columnHeadersInner = columnHeaders.querySelector(`.${gridClasses.columnHeadersInner}`);
-    columnHeadersInner.style.width = '100%';
-    let gridToolbarElementHeight = ((_querySelector = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)) == null ? void 0 : _querySelector.offsetHeight) || 0;
-    let gridFooterElementHeight = ((_querySelector2 = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)) == null ? void 0 : _querySelector2.offsetHeight) || 0;
+    let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)?.offsetHeight || 0;
+    let gridFooterElementHeight = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)?.offsetHeight || 0;
     if (normalizeOptions.hideToolbar) {
-      var _gridClone$querySelec;
-      (_gridClone$querySelec = gridClone.querySelector(`.${gridClasses.toolbarContainer}`)) == null || _gridClone$querySelec.remove();
+      gridClone.querySelector(`.${gridClasses.toolbarContainer}`)?.remove();
       gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter) {
-      var _gridClone$querySelec2;
-      (_gridClone$querySelec2 = gridClone.querySelector(`.${gridClasses.footerContainer}`)) == null || _gridClone$querySelec2.remove();
+      gridClone.querySelector(`.${gridClasses.footerContainer}`)?.remove();
       gridFooterElementHeight = 0;
     }
 
@@ -189,13 +183,12 @@ export const useGridPrintExport = (apiRef, props) => {
     }
   }, [apiRef, doc, props.columnHeaderHeight]);
   const handlePrintWindowAfterPrint = React.useCallback(printWindow => {
-    var _previousGridState$cu;
     // Remove the print iframe
     doc.current.body.removeChild(printWindow);
 
     // Revert grid to previous state
     apiRef.current.restoreState(previousGridState.current || {});
-    if (!((_previousGridState$cu = previousGridState.current) != null && (_previousGridState$cu = _previousGridState$cu.columns) != null && _previousGridState$cu.columnVisibilityModel)) {
+    if (!previousGridState.current?.columns?.columnVisibilityModel) {
       // if the apiRef.current.exportState(); did not exported the column visibility, we update it
       apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current);
     }
@@ -208,7 +201,6 @@ export const useGridPrintExport = (apiRef, props) => {
     previousRows.current = [];
   }, [apiRef]);
   const exportDataAsPrint = React.useCallback(async options => {
-    var _options$getRowsToExp;
     logger.debug(`Export data as Print`);
     if (!apiRef.current.rootElementRef.current) {
       throw new Error('MUI X: No grid root element available.');
@@ -223,16 +215,20 @@ export 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
-      mergeStateWithPaginationModel(visibleRowCount, 'DataGridPro', paginationModel));
+      apiRef.current.setState(state => _extends({}, state, {
+        pagination: _extends({}, state.pagination, {
+          paginationModel: getDerivedPaginationModel(state.pagination,
+          // Using signature `DataGridPro` to allow more than 100 rows in the print export
+          'DataGridPro', paginationModel)
+        })
+      }));
       apiRef.current.forceUpdate();
     }
-    await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns, options == null ? void 0 : options.includeCheckboxes);
-    updateGridRowsForPrint((_options$getRowsToExp = options == null ? void 0 : options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport);
+    await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);
+    updateGridRowsForPrint(options?.getRowsToExport ?? defaultGetRowsToExport);
     apiRef.current.unstable_setVirtualization(false);
     await raf(); // wait for the state changes to take action
-    const printWindow = buildPrintWindow(options == null ? void 0 : options.fileName);
+    const printWindow = buildPrintWindow(options?.fileName);
     if (process.env.NODE_ENV === 'test') {
       doc.current.body.appendChild(printWindow);
       // In test env, run the all pipeline without waiting for loading
@@ -261,8 +257,7 @@ export const useGridPrintExport = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const addExportMenuButtons = React.useCallback((initialValue, options) => {
-    var _options$printOptions;
-    if ((_options$printOptions = options.printOptions) != null && _options$printOptions.disableToolbarButton) {
+    if (options.printOptions?.disableToolbarButton) {
       return initialValue;
     }
     return [...initialValue, {

package/hooks/features/export/utils.js

@@ -21,14 +21,13 @@ export const getColumnsToExport = ({
 export const defaultGetRowsToExport = ({
   apiRef
 }) => {
-  var _pinnedRows$top, _pinnedRows$bottom;
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
   const rowTree = gridRowTreeSelector(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
   const bodyRows = filteredSortedRowIds.filter(id => rowTree[id].type !== 'footer');
   const pinnedRows = gridPinnedRowsSelector(apiRef);
-  const topPinnedRowsIds = (pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(row => row.id)) || [];
-  const bottomPinnedRowsIds = (pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(row => row.id)) || [];
+  const topPinnedRowsIds = pinnedRows?.top?.map(row => row.id) || [];
+  const bottomPinnedRowsIds = pinnedRows?.bottom?.map(row => row.id) || [];
   bodyRows.unshift(...topPinnedRowsIds);
   bodyRows.push(...bottomPinnedRowsIds);
   if (selectedRows.size > 0) {

package/hooks/features/filter/gridFilterSelector.js

@@ -74,10 +74,7 @@ export const gridFilteredSortedTopLevelRowEntriesSelector = createSelectorMemoiz
   if (rowTreeDepth < 2) {
     return visibleSortedRows;
   }
-  return visibleSortedRows.filter(row => {
-    var _rowTree$row$id;
-    return ((_rowTree$row$id = rowTree[row.id]) == null ? void 0 : _rowTree$row$id.depth) === 0;
-  });
+  return visibleSortedRows.filter(row => rowTree[row.id]?.depth === 0);
 });
 
 /**
@@ -96,24 +93,20 @@ export const gridFilteredTopLevelRowCountSelector = createSelector(gridFilteredS
  * @category Filtering
  * @ignore - do not document.
  */
-export const gridFilterActiveItemsSelector = createSelectorMemoized(gridFilterModelSelector, gridColumnLookupSelector, (filterModel, columnLookup) => {
-  var _filterModel$items;
-  return (_filterModel$items = filterModel.items) == null ? void 0 : _filterModel$items.filter(item => {
-    var _column$filterOperato, _item$value;
-    if (!item.field) {
-      return false;
-    }
-    const column = columnLookup[item.field];
-    if (!(column != null && column.filterOperators) || (column == null || (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.length) === 0) {
-      return false;
-    }
-    const filterOperator = column.filterOperators.find(operator => operator.value === item.operator);
-    if (!filterOperator) {
-      return false;
-    }
-    return !filterOperator.InputComponent || item.value != null && ((_item$value = item.value) == null ? void 0 : _item$value.toString()) !== '';
-  });
-});
+export const gridFilterActiveItemsSelector = createSelectorMemoized(gridFilterModelSelector, gridColumnLookupSelector, (filterModel, columnLookup) => filterModel.items?.filter(item => {
+  if (!item.field) {
+    return false;
+  }
+  const column = columnLookup[item.field];
+  if (!column?.filterOperators || column?.filterOperators?.length === 0) {
+    return false;
+  }
+  const filterOperator = column.filterOperators.find(operator => operator.value === item.operator);
+  if (!filterOperator) {
+    return false;
+  }
+  return !filterOperator.InputComponent || item.value != null && item.value?.toString() !== '';
+}));
 /**
  * @category Filtering
  * @ignore - do not document.

package/hooks/features/filter/gridFilterUtils.js

@@ -87,9 +87,8 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   }
   let parsedValue;
   if (column.valueParser) {
-    var _filterItem$value;
     const parser = column.valueParser;
-    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x, undefined, column, apiRef)) : parser(filterItem.value, undefined, column, apiRef);
+    parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x, undefined, column, apiRef)) : parser(filterItem.value, undefined, column, apiRef);
   } else {
     parsedValue = filterItem.value;
   }
@@ -103,7 +102,7 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
     value: parsedValue
   });
   const filterOperators = column.filterOperators;
-  if (!(filterOperators != null && filterOperators.length)) {
+  if (!filterOperators?.length) {
     throw new Error(`MUI X: No filter operators found for column '${column.field}'.`);
   }
   const filterOperator = filterOperators.find(operator => operator.value === newFilterItem.operator);
@@ -157,7 +156,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')}
 
@@ -173,8 +172,7 @@ return result$$;`.replaceAll('$$', String(filterItemsApplierId)));
   return filterItem;
 };
 export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
-  var _filterModel$quickFil;
-  return (_filterModel$quickFil = filterModel.quickFilterExcludeHiddenColumns) != null ? _filterModel$quickFil : true;
+  return filterModel.quickFilterExcludeHiddenColumns ?? true;
 };
 
 /**
@@ -184,8 +182,7 @@ export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
-  var _filterModel$quickFil2, _filterModel$quickFil3;
-  const quickFilterValues = (_filterModel$quickFil2 = (_filterModel$quickFil3 = filterModel.quickFilterValues) == null ? void 0 : _filterModel$quickFil3.filter(Boolean)) != null ? _filterModel$quickFil2 : [];
+  const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
   }
@@ -197,7 +194,7 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const publicApiRef = getPublicApiRef(apiRef);
   columnFields.forEach(field => {
     const column = apiRef.current.getColumn(field);
-    const getApplyQuickFilterFn = column == null ? void 0 : column.getApplyQuickFilterFn;
+    const getApplyQuickFilterFn = column?.getApplyQuickFilterFn;
     if (getApplyQuickFilterFn) {
       appliersPerField.push({
         column,
@@ -252,9 +249,8 @@ export const buildAggregatedFilterApplier = (filterModel, apiRef, disableEval) =
   const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef, disableEval);
   const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
   return function isRowMatchingFilters(row, shouldApplyFilter, result) {
-    var _isRowMatchingFilterI, _isRowMatchingQuickFi;
-    result.passingFilterItems = (_isRowMatchingFilterI = isRowMatchingFilterItems == null ? void 0 : isRowMatchingFilterItems(row, shouldApplyFilter)) != null ? _isRowMatchingFilterI : null;
-    result.passingQuickFilterValues = (_isRowMatchingQuickFi = isRowMatchingQuickFilter == null ? void 0 : isRowMatchingQuickFilter(row, shouldApplyFilter)) != null ? _isRowMatchingQuickFi : null;
+    result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null;
+    result.passingQuickFilterValues = isRowMatchingQuickFilter?.(row, shouldApplyFilter) ?? null;
   };
 };
 const isNotNull = result => result != null;
@@ -271,12 +267,11 @@ export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, fil
 
   // get result for filter items model
   if (cleanedFilterItemResults.length > 0) {
-    var _filterModel$logicOpe;
     // Return true if the item pass with one of the rows
     const filterItemPredicate = item => {
       return cleanedFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
     };
-    const logicOperator = (_filterModel$logicOpe = filterModel.logicOperator) != null ? _filterModel$logicOpe : getDefaultGridFilterModel().logicOperator;
+    const logicOperator = filterModel.logicOperator ?? getDefaultGridFilterModel().logicOperator;
     if (logicOperator === GridLogicOperator.And) {
       const passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
       if (!passesAllFilters) {
@@ -292,12 +287,11 @@ export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, fil
 
   // get result for quick filter model
   if (cleanedQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
-    var _filterModel$quickFil4;
     // Return true if the item pass with one of the rows
     const quickFilterValuePredicate = value => {
       return cleanedQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
     };
-    const quickFilterLogicOperator = (_filterModel$quickFil4 = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil4 : getDefaultGridFilterModel().quickFilterLogicOperator;
+    const quickFilterLogicOperator = filterModel.quickFilterLogicOperator ?? getDefaultGridFilterModel().quickFilterLogicOperator;
     if (quickFilterLogicOperator === GridLogicOperator.And) {
       const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
       if (!passesAllQuickFilterValues) {

package/hooks/features/filter/useGridFilter.js

@@ -18,8 +18,7 @@ import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilter
 import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
-  var _ref, _props$filterModel, _props$initialState;
-  const filterModel = (_ref = (_props$filterModel = props.filterModel) != null ? _props$filterModel : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.filter) == null ? void 0 : _props$initialState.filterModel) != null ? _ref : getDefaultGridFilterModel();
+  const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? getDefaultGridFilterModel();
   return _extends({}, state, {
     filter: {
       filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
@@ -49,7 +48,6 @@ function createMemoizedValues() {
  * @requires useGridRows (event)
  */
 export const useGridFilter = (apiRef, props) => {
-  var _props$initialState3, _props$slotProps2;
   const logger = useGridLogger(apiRef, 'useGridFilter');
   apiRef.current.registerControlState({
     stateId: 'filter',
@@ -64,7 +62,7 @@ export const useGridFilter = (apiRef, props) => {
       const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null;
       const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
-        filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
+        filterModel: filterModel ?? getDefaultGridFilterModel()
       });
       const newState = _extends({}, state, {
         filter: _extends({}, state.filter, filteringResult)
@@ -133,7 +131,6 @@ export const useGridFilter = (apiRef, props) => {
     if (targetColumnField) {
       const filterModel = gridFilterModelSelector(apiRef);
       const filterItemsWithValue = filterModel.items.filter(item => {
-        var _column$filterOperato;
         if (item.value !== undefined) {
           // Some filters like `isAnyOf` support array as `item.value`.
           // If array is empty, we want to remove it from the filter model.
@@ -143,8 +140,8 @@ export const useGridFilter = (apiRef, props) => {
           return true;
         }
         const column = apiRef.current.getColumn(item.field);
-        const filterOperator = (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.find(operator => operator.value === item.operator);
-        const requiresFilterValue = typeof (filterOperator == null ? void 0 : filterOperator.requiresFilterValue) === 'undefined' ? true : filterOperator == null ? void 0 : filterOperator.requiresFilterValue;
+        const filterOperator = column.filterOperators?.find(operator => operator.value === item.operator);
+        const requiresFilterValue = typeof filterOperator?.requiresFilterValue === 'undefined' ? true : filterOperator?.requiresFilterValue;
 
         // Operators like `isEmpty` don't have and don't require `item.value`.
         // So we don't want to remove them from the filter model if `item.value === undefined`.
@@ -224,7 +221,6 @@ export const useGridFilter = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState2;
     const filterModelToExport = gridFilterModelSelector(apiRef);
     const shouldExportFilterModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
@@ -232,7 +228,7 @@ export const useGridFilter = (apiRef, props) => {
     // Always export if the model is controlled
     props.filterModel != null ||
     // Always export if the model has been initialized
-    ((_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.filter) == null ? void 0 : _props$initialState2.filterModel) != null ||
+    props.initialState?.filter?.filterModel != null ||
     // Export if the model is not equal to the default value
     !isDeepEqual(filterModelToExport, getDefaultGridFilterModel());
     if (!shouldExportFilterModel) {
@@ -243,10 +239,9 @@ export const useGridFilter = (apiRef, props) => {
         filterModel: filterModelToExport
       }
     });
-  }, [apiRef, props.filterModel, (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.filter) == null ? void 0 : _props$initialState3.filterModel]);
+  }, [apiRef, props.filterModel, props.initialState?.filter?.filterModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    var _context$stateToResto;
-    const filterModel = (_context$stateToResto = context.stateToRestore.filter) == null ? void 0 : _context$stateToResto.filterModel;
+    const filterModel = context.stateToRestore.filter?.filterModel;
     if (filterModel == null) {
       return params;
     }
@@ -257,12 +252,11 @@ export const useGridFilter = (apiRef, props) => {
   }, [apiRef, props.disableMultipleColumnsFiltering]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.filters) {
-      var _props$slotProps;
       const FilterPanel = props.slots.filterPanel;
-      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, (_props$slotProps = props.slotProps) == null ? void 0 : _props$slotProps.filterPanel));
+      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, props.slotProps?.filterPanel));
     }
     return initialValue;
-  }, [props.slots.filterPanel, (_props$slotProps2 = props.slotProps) == null ? void 0 : _props$slotProps2.filterPanel]);
+  }, [props.slots.filterPanel, props.slotProps?.filterPanel]);
   const {
     getRowId
   } = props;

package/hooks/features/focus/useGridFocus.js

@@ -44,7 +44,7 @@ export const useGridFocus = (apiRef, props) => {
   }, [apiRef]);
   const setCellFocus = React.useCallback((id, field) => {
     const focusedCell = gridFocusCellSelector(apiRef);
-    if ((focusedCell == null ? void 0 : focusedCell.id) === id && (focusedCell == null ? void 0 : focusedCell.field) === field) {
+    if (focusedCell?.id === id && focusedCell?.field === field) {
       return;
     }
     apiRef.current.setState(state => {
@@ -252,8 +252,7 @@ export const useGridFocus = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
   }, [apiRef]);
   const handleBlur = React.useCallback((_, event) => {
-    var _event$relatedTarget;
-    if ((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.className.includes(gridClasses.columnHeader)) {
+    if (event.relatedTarget?.className.includes(gridClasses.columnHeader)) {
       return;
     }
     logger.debug(`Clearing focus`);
@@ -286,11 +285,11 @@ export const useGridFocus = (apiRef, props) => {
       }
       return;
     }
-    if ((cellParams == null ? void 0 : cellParams.id) === focusedCell.id && (cellParams == null ? void 0 : cellParams.field) === focusedCell.field) {
+    if (cellParams?.id === focusedCell.id && cellParams?.field === focusedCell.field) {
       return;
     }
     const cellElement = apiRef.current.getCellElement(focusedCell.id, focusedCell.field);
-    if (cellElement != null && cellElement.contains(event.target)) {
+    if (cellElement?.contains(event.target)) {
       return;
     }
     if (cellParams) {
@@ -316,7 +315,7 @@ export const useGridFocus = (apiRef, props) => {
       return;
     }
     const cell = gridFocusCellSelector(apiRef);
-    if ((cell == null ? void 0 : cell.id) !== params.id || (cell == null ? void 0 : cell.field) !== params.field) {
+    if (cell?.id !== params.id || cell?.field !== params.field) {
       apiRef.current.setCellFocus(params.id, params.field);
     }
   }, [apiRef]);

package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.d.ts

@@ -1,4 +1,5 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 export declare const gridHeaderFilteringStateSelector: (state: GridStateCommunity) => import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState;
+export declare const gridHeaderFilteringEnabledSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean>;
 export declare const gridHeaderFilteringEditFieldSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string | null>;
 export declare const gridHeaderFilteringMenuSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string | null>;

package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -1,4 +1,7 @@
 import { createSelector } from '../../../utils/createSelector';
 export const gridHeaderFilteringStateSelector = state => state.headerFiltering;
+export const gridHeaderFilteringEnabledSelector = createSelector(gridHeaderFilteringStateSelector,
+// No initialization in MIT, so we need to default to false to be used by `getTotalHeaderHeight`
+headerFilteringState => headerFilteringState?.enabled ?? false);
 export const gridHeaderFilteringEditFieldSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
 export const gridHeaderFilteringMenuSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);

package/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -3,17 +3,20 @@ import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils';
 import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
-export const headerFilteringStateInitializer = state => _extends({}, state, {
+export const headerFilteringStateInitializer = (state, props) => _extends({}, state, {
+  // @ts-expect-error Access `Pro` prop in MIT
   headerFiltering: {
+    enabled: props.headerFilters ?? false,
     editing: null,
     menuOpen: null
   }
 });
 export const useGridHeaderFiltering = (apiRef, props) => {
   const logger = 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 => {
-      var _headerFilterState$ed, _headerFilterState$me;
       // Safety check to avoid MIT users from using it
       // This hook should ultimately be moved to the Pro package
       if (props.signature === 'DataGrid') {
@@ -21,13 +24,14 @@ export const useGridHeaderFiltering = (apiRef, props) => {
       }
       return _extends({}, state, {
         headerFiltering: {
-          editing: (_headerFilterState$ed = headerFilterState.editing) != null ? _headerFilterState$ed : null,
-          menuOpen: (_headerFilterState$me = headerFilterState.menuOpen) != null ? _headerFilterState$me : null
+          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({
@@ -88,4 +92,18 @@ export const useGridHeaderFiltering = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, headerFilterApi, 'public');
   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]);
 };

package/hooks/features/index.d.ts

@@ -1,6 +1,7 @@
 export * from './columnMenu';
 export * from './columns';
 export * from './columnGrouping';
+export * from './columnResize';
 export * from './density';
 export * from './filter';
 export * from './focus';

package/hooks/features/index.js

@@ -2,6 +2,7 @@
 export * from './columnMenu';
 export * from './columns';
 export * from './columnGrouping';
+export * from './columnResize';
 export * from './density';
 export * from './filter';
 export * from './focus';

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -127,8 +127,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(field, depth, event);
   }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
-    var _currentPageRows$rowI;
-    return (_currentPageRows$rowI = currentPageRows[rowIndex]) == null ? void 0 : _currentPageRows$rowI.id;
+    return currentPageRows[rowIndex]?.id;
   }, [currentPageRows]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
     const headerTitleNode = event.currentTarget.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);

package/hooks/features/pagination/gridPaginationInterfaces.d.ts

@@ -1,14 +1,16 @@
 import { GridPaginationModel } from '../../../models/gridPaginationProps';
 export interface GridPaginationState {
     paginationModel: GridPaginationModel;
+    rowCount: number;
 }
 export interface GridPaginationInitialState {
     paginationModel?: Partial<GridPaginationModel>;
+    rowCount?: number;
 }
 /**
- * The pagination API interface that is available in the grid `apiRef`.
+ * The pagination model API interface that is available in the grid `apiRef`.
  */
-export interface GridPaginationApi {
+export interface GridPaginationModelApi {
     /**
      * Sets the displayed page to the value given by `page`.
      * @param {number} page The new page number.
@@ -25,3 +27,18 @@ export interface GridPaginationApi {
      */
     setPaginationModel: (model: GridPaginationModel) => void;
 }
+/**
+ * The pagination row count API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationRowCountApi {
+    /**
+     * Sets the `rowCount` to a new value.
+     * @param {number} rowCount The new row count value.
+     */
+    setRowCount: (rowCount: number) => void;
+}
+/**
+ * The pagination API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationApi extends GridPaginationModelApi, GridPaginationRowCountApi {
+}

package/hooks/features/pagination/gridPaginationSelector.d.ts

@@ -9,6 +9,11 @@ export declare const gridPaginationSelector: (state: GridStateCommunity) => impo
  * @category Pagination
  */
 export declare const gridPaginationModelSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel>;
+/**
+ * Get the row count
+ * @category Pagination
+ */
+export declare const gridPaginationRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination

package/hooks/features/pagination/gridPaginationSelector.js

@@ -1,5 +1,5 @@
 import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
-import { gridFilteredTopLevelRowCountSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
+import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 import { getPageCount } from './gridPaginationUtils';
 
@@ -15,6 +15,12 @@ export const gridPaginationSelector = state => state.pagination;
  */
 export const gridPaginationModelSelector = createSelector(gridPaginationSelector, pagination => pagination.paginationModel);
 
+/**
+ * Get the row count
+ * @category Pagination
+ */
+export const gridPaginationRowCountSelector = createSelector(gridPaginationSelector, pagination => pagination.rowCount);
+
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
@@ -31,7 +37,7 @@ export const gridPageSizeSelector = createSelector(gridPaginationModelSelector,
  * Get the amount of pages needed to display all the rows if the pagination is enabled
  * @category Pagination
  */
-export const gridPageCountSelector = createSelector(gridPaginationModelSelector, gridFilteredTopLevelRowCountSelector, (paginationModel, visibleTopLevelRowCount) => getPageCount(visibleTopLevelRowCount, paginationModel.pageSize));
+export const gridPageCountSelector = createSelector(gridPageSizeSelector, gridPaginationRowCountSelector, (pageSize, rowCount) => getPageCount(rowCount, pageSize));
 
 /**
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.
@@ -60,9 +66,8 @@ export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginat
   let lastRowIndex = firstRowIndex;
   let topLevelRowAdded = 0;
   while (lastRowIndex < visibleSortedRowEntries.length && topLevelRowAdded <= topLevelRowsInCurrentPageCount) {
-    var _rowTree$row$id;
     const row = visibleSortedRowEntries[lastRowIndex];
-    const depth = (_rowTree$row$id = rowTree[row.id]) == null ? void 0 : _rowTree$row$id.depth;
+    const depth = rowTree[row.id]?.depth;
     if (depth === undefined) {
       lastRowIndex += 1;
     } else {

package/hooks/features/pagination/useGridPagination.d.ts

@@ -2,14 +2,9 @@ import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-import { GridPaginationState } from './gridPaginationInterfaces';
-import { GridPaginationModel } from '../../../models/gridPaginationProps';
 export declare const paginationStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'paginationModel' | 'rowCount' | 'initialState' | 'autoPageSize' | 'signature'>>;
-export declare const mergeStateWithPaginationModel: (rowCount: number, signature: DataGridProcessedProps['signature'], paginationModelProp?: GridPaginationModel) => (paginationState: GridPaginationState) => {
-    paginationModel: GridPaginationModel;
-};
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
-export declare const useGridPagination: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'paginationModel' | 'onPaginationModelChange' | 'autoPageSize' | 'rowCount' | 'initialState' | 'paginationMode' | 'signature' | 'rowHeight'>) => void;
+export declare const useGridPagination: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;