@mui/x-data-grid 5.4.0 → 5.6.0

package/hooks/features/columns/useGridColumns.js

@@ -0,0 +1,294 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
+import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, setColumnsState } from './gridColumnsUtils';
+export 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 = computeColumnTypes(props.columnTypes);
+  const columnsState = 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 _extends({}, state, {
+    columns: columnsState
+  });
+};
+/**
+ * @requires useGridParamsApi (method)
+ * @requires useGridDimensions (method, event) - can be after
+ * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
+ */
+
+export function useGridColumns(apiRef, props) {
+  var _props$initialState3, _props$initialState3$;
+
+  const logger = useGridLogger(apiRef, 'useGridColumns');
+  const columnsTypes = React.useMemo(() => 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: gridColumnVisibilityModelSelector,
+    changeEvent: GridEvents.columnVisibilityModelChange
+  });
+  const setGridColumnsState = React.useCallback(columnsState => {
+    logger.debug('Updating columns state.');
+    apiRef.current.setState(setColumnsState(columnsState));
+    apiRef.current.forceUpdate();
+    apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
+  }, [logger, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  const getColumn = React.useCallback(field => gridColumnLookupSelector(apiRef)[field], [apiRef]);
+  const getAllColumns = React.useCallback(() => gridColumnDefinitionsSelector(apiRef), [apiRef]);
+  const getVisibleColumns = React.useCallback(() => gridVisibleColumnDefinitionsSelector(apiRef), [apiRef]);
+  const getColumnsMeta = React.useCallback(() => gridColumnsMetaSelector(apiRef), [apiRef]);
+  const getColumnIndex = React.useCallback((field, useVisibleColumns = true) => {
+    const columns = useVisibleColumns ? gridVisibleColumnDefinitionsSelector(apiRef) : gridColumnDefinitionsSelector(apiRef);
+    return columns.findIndex(col => col.field === field);
+  }, [apiRef]);
+  const getColumnPosition = React.useCallback(field => {
+    const index = getColumnIndex(field);
+    return gridColumnPositionsSelector(apiRef)[index];
+  }, [apiRef, getColumnIndex]);
+  const setColumnVisibilityModel = React.useCallback(model => {
+    const currentModel = gridColumnVisibilityModelSelector(apiRef);
+
+    if (currentModel !== model) {
+      apiRef.current.setState(state => _extends({}, state, {
+        columns: createColumnsState({
+          apiRef,
+          columnsTypes,
+          columnsToUpsert: [],
+          shouldRegenColumnVisibilityModelFromColumns: false,
+          currentColumnVisibilityModel: model,
+          reset: false
+        })
+      }));
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, columnsTypes]);
+  const updateColumns = React.useCallback(columns => {
+    const columnsState = 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 = gridColumnVisibilityModelSelector(apiRef);
+      const isCurrentlyVisible = (_columnVisibilityMode = columnVisibilityModel[field]) != null ? _columnVisibilityMode : true;
+
+      if (isVisible !== isCurrentlyVisible) {
+        const newModel = _extends({}, columnVisibilityModel, {
+          [field]: isVisible
+        });
+
+        apiRef.current.setColumnVisibilityModel(newModel);
+      }
+    } else {
+      const column = apiRef.current.getColumn(field);
+
+      const newColumn = _extends({}, column, {
+        hide: !isVisible
+      });
+
+      apiRef.current.updateColumns([newColumn]);
+      const params = {
+        field,
+        colDef: newColumn,
+        isVisible
+      };
+      apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
+    }
+  }, [apiRef, shouldUseVisibleColumnModel]);
+  const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
+    const allColumns = 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(_extends({}, 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(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 = _extends({}, column, {
+      width
+    });
+
+    apiRef.current.updateColumns([newColumn]);
+    apiRef.current.publishEvent(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
+  };
+  useGridApiMethod(apiRef, columnApi, 'GridColumnApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    if (!shouldUseVisibleColumnModel) {
+      return prevState;
+    }
+
+    const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
+    const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
+
+    if (!hasHiddenColumns) {
+      return prevState;
+    }
+
+    return _extends({}, 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 = createColumnsState({
+        apiRef,
+        columnsTypes,
+        columnsToUpsert: [],
+        shouldRegenColumnVisibilityModelFromColumns: false,
+        currentColumnVisibilityModel: columnVisibilityModel,
+        reset: false
+      });
+      apiRef.current.setState(setColumnsState(columnsState));
+    }
+
+    return params;
+  }, [apiRef, shouldUseVisibleColumnModel, columnsTypes]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  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 = 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(hydrateColumnsWidth(gridColumnsSelector(apiRef.current.state), viewportInnerSize.width));
+    }
+  };
+
+  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
+  useGridApiOptionHandler(apiRef, 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 = 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/hooks/features/density/densitySelector.d.ts

@@ -0,0 +1,6 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+export declare const gridDensitySelector: (state: GridStateCommunity) => import("./densityState").GridDensityState;
+export declare const gridDensityValueSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridDensity>;
+export declare const gridDensityRowHeightSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridDensityHeaderHeightSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridDensityFactorSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;

package/hooks/features/density/densitySelector.js

@@ -0,0 +1,6 @@
+import { createSelector } from '../../../utils/createSelector';
+export const gridDensitySelector = state => state.density;
+export const gridDensityValueSelector = createSelector(gridDensitySelector, density => density.value);
+export const gridDensityRowHeightSelector = createSelector(gridDensitySelector, density => density.rowHeight);
+export const gridDensityHeaderHeightSelector = createSelector(gridDensitySelector, density => density.headerHeight);
+export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => density.factor);

package/hooks/features/density/densityState.d.ts

@@ -0,0 +1,7 @@
+import { GridDensity } from '../../../models/gridDensity';
+export interface GridDensityState {
+    value: GridDensity;
+    rowHeight: number;
+    headerHeight: number;
+    factor: number;
+}

package/hooks/features/density/densityState.js

@@ -0,0 +1 @@
+export {};

package/hooks/features/density/index.d.ts

@@ -0,0 +1,2 @@
+export * from './densityState';
+export * from './densitySelector';

package/hooks/features/density/index.js

@@ -0,0 +1,2 @@
+export * from './densityState';
+export * from './densitySelector';

package/hooks/features/density/useGridDensity.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+export declare const COMPACT_DENSITY_FACTOR = 0.7;
+export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
+export declare const useGridDensity: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'headerHeight' | 'rowHeight' | 'density'>) => void;

package/hooks/features/density/useGridDensity.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridDensityTypes } from '../../../models/gridDensity';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridStateInit } from '../../utils/useGridStateInit';
+import { gridDensitySelector } from './densitySelector';
+import { isDeepEqual } from '../../../utils/utils';
+export const COMPACT_DENSITY_FACTOR = 0.7;
+export const COMFORTABLE_DENSITY_FACTOR = 1.3; // TODO v6: revise keeping headerHeight and rowHeight in state
+
+const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight) => {
+  switch (newDensity) {
+    case GridDensityTypes.Compact:
+      return {
+        value: newDensity,
+        headerHeight: Math.floor(newHeaderHeight * COMPACT_DENSITY_FACTOR),
+        rowHeight: Math.floor(newRowHeight * COMPACT_DENSITY_FACTOR),
+        factor: COMPACT_DENSITY_FACTOR
+      };
+
+    case GridDensityTypes.Comfortable:
+      return {
+        value: newDensity,
+        headerHeight: Math.floor(newHeaderHeight * COMFORTABLE_DENSITY_FACTOR),
+        rowHeight: Math.floor(newRowHeight * COMFORTABLE_DENSITY_FACTOR),
+        factor: COMFORTABLE_DENSITY_FACTOR
+      };
+
+    default:
+      return {
+        value: newDensity,
+        headerHeight: newHeaderHeight,
+        rowHeight: newRowHeight,
+        factor: 1
+      };
+  }
+};
+
+export const useGridDensity = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useDensity');
+  useGridStateInit(apiRef, state => _extends({}, state, {
+    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
+  }));
+  const setDensity = React.useCallback((newDensity, newHeaderHeight = props.headerHeight, newRowHeight = props.rowHeight) => {
+    logger.debug(`Set grid density to ${newDensity}`);
+    apiRef.current.setState(state => {
+      const currentDensityState = gridDensitySelector(state);
+      const newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight);
+
+      if (isDeepEqual(currentDensityState, newDensityState)) {
+        return state;
+      }
+
+      return _extends({}, state, {
+        density: newDensityState
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [logger, apiRef, props.headerHeight, props.rowHeight]);
+  React.useEffect(() => {
+    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight);
+  }, [apiRef, props.density, props.rowHeight, props.headerHeight]);
+  const densityApi = {
+    setDensity
+  };
+  useGridApiMethod(apiRef, densityApi, 'GridDensityApi');
+};

package/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -0,0 +1,36 @@
+import type { ElementSize } from '../../../models/elementSize';
+export interface GridDimensions {
+    /**
+     * The viewport size including scrollbars.
+     */
+    viewportOuterSize: ElementSize;
+    /**
+     * The viewport size not including scrollbars.
+     */
+    viewportInnerSize: ElementSize;
+    /**
+     * Indicates if a scroll is currently needed to go from the beginning of the first column to the end of the last column.
+     */
+    hasScrollX: boolean;
+    /**
+     * Indicates if a scroll is currently needed to go from the beginning of the first row to the end of the last row.
+     */
+    hasScrollY: boolean;
+}
+export interface GridDimensionsApi {
+    /**
+     * Triggers a resize of the component and recalculation of width and height.
+     */
+    resize: () => void;
+    /**
+     * Returns the dimensions of the grid
+     * @returns {GridDimensions | null} The dimension information of the grid. If `null`, the grid is not ready yet.
+     */
+    getRootDimensions: () => GridDimensions | null;
+    /**
+     * Returns the amount of rows that are currently visible in the viewport
+     * @returns {number} The amount of rows visible in the viewport
+     * @ignore - do not document.
+     */
+    unstable_getViewportPageSize: () => number;
+}

package/hooks/features/dimensions/gridDimensionsApi.js

@@ -0,0 +1 @@
+export {};

package/hooks/features/dimensions/index.d.ts

@@ -0,0 +1 @@
+export * from './gridDimensionsApi';

package/hooks/features/dimensions/index.js

@@ -0,0 +1 @@
+export * from './gridDimensionsApi';

package/hooks/features/dimensions/useGridDimensions.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+export declare function useGridDimensions(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight'>): void;

package/hooks/features/dimensions/useGridDimensions.js

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { debounce, ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { GridEvents } from '../../../models/events';
+import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridColumnsTotalWidthSelector } from '../columns';
+import { gridDensityHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
+import { useGridSelector } from '../../utils';
+import { getCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+const isTestEnvironment = process.env.NODE_ENV === 'test';
+
+const hasScroll = ({
+  content,
+  container,
+  scrollBarSize
+}) => {
+  const hasScrollXIfNoYScrollBar = content.width > container.width;
+  const hasScrollYIfNoXScrollBar = content.height > container.height;
+  let hasScrollX = false;
+  let hasScrollY = false;
+
+  if (hasScrollXIfNoYScrollBar || hasScrollYIfNoXScrollBar) {
+    hasScrollX = hasScrollXIfNoYScrollBar;
+    hasScrollY = content.height + (hasScrollX ? scrollBarSize : 0) > container.height; // We recalculate the scroll x to consider the size of the y scrollbar.
+
+    if (hasScrollY) {
+      hasScrollX = content.width + scrollBarSize > container.width;
+    }
+  }
+
+  return {
+    hasScrollX,
+    hasScrollY
+  };
+};
+
+export function useGridDimensions(apiRef, props) {
+  const logger = useGridLogger(apiRef, 'useResizeContainer');
+  const warningShown = React.useRef(false);
+  const rootDimensionsRef = React.useRef(null);
+  const fullDimensionsRef = React.useRef(null);
+  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
+  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const updateGridDimensionsRef = React.useCallback(() => {
+    var _apiRef$current$rootE;
+
+    const rootElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE.current;
+    const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
+
+    if (!rootDimensionsRef.current) {
+      return;
+    }
+
+    let scrollBarSize;
+
+    if (props.scrollbarSize != null) {
+      scrollBarSize = props.scrollbarSize;
+    } else if (!columnsTotalWidth || !rootElement) {
+      scrollBarSize = 0;
+    } else {
+      const doc = ownerDocument(rootElement);
+      const scrollDiv = doc.createElement('div');
+      scrollDiv.style.width = '99px';
+      scrollDiv.style.height = '99px';
+      scrollDiv.style.position = 'absolute';
+      scrollDiv.style.overflow = 'scroll';
+      scrollDiv.className = 'scrollDiv';
+      rootElement.appendChild(scrollDiv);
+      scrollBarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+      rootElement.removeChild(scrollDiv);
+    }
+
+    const viewportOuterSize = {
+      width: rootDimensionsRef.current.width,
+      height: props.autoHeight ? rowsMeta.currentPageTotalHeight : rootDimensionsRef.current.height - headerHeight
+    };
+    const {
+      hasScrollX,
+      hasScrollY
+    } = hasScroll({
+      content: {
+        width: Math.round(columnsTotalWidth),
+        height: rowsMeta.currentPageTotalHeight
+      },
+      container: viewportOuterSize,
+      scrollBarSize
+    });
+    const viewportInnerSize = {
+      width: viewportOuterSize.width - (hasScrollY ? scrollBarSize : 0),
+      height: viewportOuterSize.height - (hasScrollX ? scrollBarSize : 0)
+    };
+    const newFullDimensions = {
+      viewportOuterSize,
+      viewportInnerSize,
+      hasScrollX,
+      hasScrollY
+    };
+    const prevDimensions = fullDimensionsRef.current;
+    fullDimensionsRef.current = newFullDimensions;
+
+    if (newFullDimensions.viewportInnerSize.width !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.width) || newFullDimensions.viewportInnerSize.height !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.height)) {
+      apiRef.current.publishEvent(GridEvents.viewportInnerSizeChange, newFullDimensions.viewportInnerSize);
+    }
+  }, [apiRef, props.scrollbarSize, props.autoHeight, headerHeight, rowsMeta.currentPageTotalHeight]);
+  const resize = React.useCallback(() => {
+    updateGridDimensionsRef();
+    apiRef.current.publishEvent(GridEvents.debouncedResize, rootDimensionsRef.current);
+  }, [apiRef, updateGridDimensionsRef]);
+  const getRootDimensions = React.useCallback(() => fullDimensionsRef.current, []);
+  const getViewportPageSize = React.useCallback(() => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (!dimensions) {
+      return 0;
+    }
+
+    const currentPage = getCurrentPageRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    }); // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
+    // to find out the maximum number of rows that can fit in the visible part of the grid
+
+    if (props.getRowHeight) {
+      const renderContext = apiRef.current.unstable_getRenderContext();
+      const viewportPageSize = renderContext.lastRowIndex - renderContext.firstRowIndex;
+      return Math.min(viewportPageSize - 1, currentPage.rows.length);
+    }
+
+    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / gridDensityRowHeightSelector(apiRef));
+    return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
+  }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight]);
+  const dimensionsApi = {
+    resize,
+    getRootDimensions,
+    unstable_getViewportPageSize: getViewportPageSize
+  };
+  useGridApiMethod(apiRef, dimensionsApi, 'GridDimensionsApi');
+  const debounceResize = React.useMemo(() => debounce(resize, 60), [resize]);
+  const isFirstSizing = React.useRef(true);
+  const handleResize = React.useCallback(size => {
+    rootDimensionsRef.current = size; // jsdom has no layout capabilities
+
+    const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+    if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
+      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      warningShown.current = true;
+    }
+
+    if (size.width === 0 && !warningShown.current && !isJSDOM) {
+      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      warningShown.current = true;
+    }
+
+    if (isTestEnvironment) {
+      // We don't need to debounce the resize for tests.
+      resize();
+      isFirstSizing.current = false;
+      return;
+    }
+
+    if (isFirstSizing.current) {
+      // We want to initialize the grid dimensions as soon as possible to avoid flickering
+      resize();
+      isFirstSizing.current = false;
+      return;
+    }
+
+    debounceResize();
+  }, [props.autoHeight, debounceResize, logger, resize]);
+  useEnhancedEffect(() => updateGridDimensionsRef(), [updateGridDimensionsRef]);
+  useGridApiOptionHandler(apiRef, GridEvents.visibleRowsSet, updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, GridEvents.pageChange, updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, GridEvents.pageSizeChange, updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, GridEvents.columnsChange, updateGridDimensionsRef);
+  useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
+  useGridApiOptionHandler(apiRef, GridEvents.debouncedResize, props.onResize);
+}

package/hooks/features/editRows/gridEditRowsSelector.d.ts

@@ -0,0 +1,2 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+export declare const gridEditRowsStateSelector: (state: GridStateCommunity) => import("../../..").GridEditRowsModel;

package/hooks/features/editRows/gridEditRowsSelector.js

@@ -0,0 +1,2 @@
+// TODO v6: rename to gridEditingStateSelector
+export const gridEditRowsStateSelector = state => state.editRows;

package/hooks/features/editRows/index.d.ts

@@ -0,0 +1 @@
+export * from './gridEditRowsSelector';

package/hooks/features/editRows/index.js

@@ -0,0 +1 @@
+export * from './gridEditRowsSelector';

package/hooks/features/editRows/useGridCellEditing.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+export declare const useCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'onCellEditCommit' | 'onCellEditStart' | 'onCellEditStop' | 'experimentalFeatures'>) => void;