@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/hooks/features/columns/gridColumnsSelector.js

@@ -1,4 +1,7 @@
 import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
+import { EMPTY_PINNED_COLUMN_FIELDS } from './gridColumnsInterfaces';
+import { gridThemeSelector } from '../../core/gridCoreSelector';
+
 /**
  * Get the columns state
  * @category Columns
@@ -42,6 +45,55 @@ export const gridVisibleColumnDefinitionsSelector = createSelectorMemoized(gridC
  */
 export const gridVisibleColumnFieldsSelector = createSelectorMemoized(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
 
+/**
+ * Get the visible pinned columns model.
+ * @category Visible Columns
+ */
+export const gridPinnedColumnsSelector = state => state.pinnedColumns;
+
+/**
+ * Get the visible pinned columns.
+ * @category Visible Columns
+ */
+export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridThemeSelector, (columnsState, model, visibleColumnFields, theme) => {
+  const visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, theme.direction === 'rtl');
+  const visiblePinnedColumns = {
+    left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
+    right: visiblePinnedFields.right.map(field => columnsState.lookup[field])
+  };
+  return visiblePinnedColumns;
+});
+function filterVisibleColumns(pinnedColumns, columns, invert) {
+  var _pinnedColumns$left, _pinnedColumns$right;
+  if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
+    return EMPTY_PINNED_COLUMN_FIELDS;
+  }
+  if (((_pinnedColumns$left = pinnedColumns.left) == null ? void 0 : _pinnedColumns$left.length) === 0 && ((_pinnedColumns$right = pinnedColumns.right) == null ? void 0 : _pinnedColumns$right.length) === 0) {
+    return EMPTY_PINNED_COLUMN_FIELDS;
+  }
+  const filter = (newPinnedColumns, remainingColumns) => {
+    if (!Array.isArray(newPinnedColumns)) {
+      return [];
+    }
+    return newPinnedColumns.filter(field => remainingColumns.includes(field));
+  };
+  const leftPinnedColumns = filter(pinnedColumns.left, columns);
+  const columnsWithoutLeftPinnedColumns = columns.filter(
+  // Filter out from the remaining columns those columns already pinned to the left
+  field => !leftPinnedColumns.includes(field));
+  const rightPinnedColumns = filter(pinnedColumns.right, columnsWithoutLeftPinnedColumns);
+  if (invert) {
+    return {
+      left: rightPinnedColumns,
+      right: leftPinnedColumns
+    };
+  }
+  return {
+    left: leftPinnedColumns,
+    right: rightPinnedColumns
+  };
+}
+
 /**
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { GridColumnsState, GridColumnsRawState, GridColumnVisibilityModel, GridColumnsInitialState } from './gridColumnsInterfaces';
-import { GridColumnTypesRecord } from '../../../models';
-import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridColDef } from '../../../models/colDef/gridColDef';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
@@ -39,15 +37,13 @@ export declare const hydrateColumnsWidth: (rawState: GridColumnsRawState, viewpo
  * The columns not registered in `orderedFields` will be placed after the imported columns.
  */
 export declare const applyInitialState: (columnsState: GridColumnsRawState, initialState: GridColumnsInitialState | undefined) => GridColumnsRawState;
-export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnTypes, columnVisibilityModel, keepOnlyColumnsToUpsert, }: {
+export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnVisibilityModel, keepOnlyColumnsToUpsert, }: {
     columnsToUpsert: readonly GridColDef[];
     initialState: GridColumnsInitialState | undefined;
-    columnTypes: GridColumnTypesRecord;
     columnVisibilityModel?: GridColumnVisibilityModel | undefined;
     keepOnlyColumnsToUpsert: boolean;
     apiRef: React.MutableRefObject<GridApiCommunity>;
 }) => GridColumnsState;
-export declare const mergeColumnsState: (columnsState: GridColumnsState) => (state: GridStateCommunity) => GridStateCommunity;
 export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender, apiRef, firstRowToRender, lastRowToRender, visibleRows, }: {
     firstColumnToRender: number;
     apiRef: React.MutableRefObject<GridApiCommon>;

package/hooks/features/columns/gridColumnsUtils.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF } from '../../../colDef';
+import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTypes } from '../../../colDef';
 import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
 import { gridDensityFactorSelector } from '../density/densitySelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
 export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+const COLUMN_TYPES = getGridDefaultColumnTypes();
+
 /**
  * Computes width for flex columns.
  * Based on CSS Flexbox specification:
@@ -196,10 +198,10 @@ export const applyInitialState = (columnsState, initialState) => {
   });
   return newColumnsState;
 };
-function getDefaultColTypeDef(columnTypes, type) {
-  let colDef = columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
-  if (type && columnTypes[type]) {
-    colDef = columnTypes[type];
+function getDefaultColTypeDef(type) {
+  let colDef = COLUMN_TYPES[DEFAULT_GRID_COL_TYPE_KEY];
+  if (type && COLUMN_TYPES[type]) {
+    colDef = COLUMN_TYPES[type];
   }
   return colDef;
 }
@@ -207,7 +209,6 @@ export const createColumnsState = ({
   apiRef,
   columnsToUpsert,
   initialState,
-  columnTypes,
   columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
@@ -244,7 +245,7 @@ export const createColumnsState = ({
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {
-      existingState = _extends({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
+      existingState = _extends({}, getDefaultColTypeDef(newColumn.type), {
         field,
         hasBeenResized: false
       });
@@ -255,7 +256,7 @@ export const createColumnsState = ({
 
     // If the column type has changed - merge the existing state with the default column type definition
     if (existingState && existingState.type !== newColumn.type) {
-      existingState = _extends({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
+      existingState = _extends({}, getDefaultColTypeDef(newColumn.type), {
         field
       });
     }
@@ -281,11 +282,8 @@ export const createColumnsState = ({
   }
   const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null || (_apiRef$current$getRo2 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : _apiRef$current$getRo2.call(_apiRef$current).viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
 };
-export const mergeColumnsState = columnsState => state => _extends({}, state, {
-  columns: columnsState
-});
 export function getFirstNonSpannedColumnToRender({
   firstColumnToRender,
   apiRef,

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

@@ -1,2 +1,2 @@
-export { gridColumnFieldsSelector, gridColumnLookupSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector, } from './gridColumnsSelector';
-export type { GridColumnLookup, GridColumnsState, GridColumnsInitialState, GridColumnVisibilityModel, } from './gridColumnsInterfaces';
+export * from './gridColumnsSelector';
+export * from './gridColumnsInterfaces';

package/hooks/features/columns/index.js

@@ -1 +1,2 @@
-export { gridColumnFieldsSelector, gridColumnLookupSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from './gridColumnsSelector';
+export * from './gridColumnsSelector';
+export * from './gridColumnsInterfaces';

package/hooks/features/columns/useGridColumnSpanning.js

@@ -7,67 +7,10 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
  */
 export const useGridColumnSpanning = apiRef => {
   const lookup = React.useRef({});
-  const setCellColSpanInfo = React.useCallback((rowId, columnIndex, cellColSpanInfo) => {
-    const sizes = lookup.current;
-    if (!sizes[rowId]) {
-      sizes[rowId] = {};
-    }
-    sizes[rowId][columnIndex] = cellColSpanInfo;
-  }, []);
-  const getCellColSpanInfo = React.useCallback((rowId, columnIndex) => {
+  const getCellColSpanInfo = (rowId, columnIndex) => {
     var _lookup$current$rowId;
     return (_lookup$current$rowId = lookup.current[rowId]) == null ? void 0 : _lookup$current$rowId[columnIndex];
-  }, []);
-
-  // Calculate `colSpan` for the cell.
-  const calculateCellColSpan = React.useCallback(params => {
-    const {
-      columnIndex,
-      rowId,
-      minFirstColumnIndex,
-      maxLastColumnIndex,
-      columns
-    } = params;
-    const columnsLength = columns.length;
-    const column = columns[columnIndex];
-    const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
-    if (!colSpan || colSpan === 1) {
-      setCellColSpanInfo(rowId, columnIndex, {
-        spannedByColSpan: false,
-        cellProps: {
-          colSpan: 1,
-          width: column.computedWidth
-        }
-      });
-      return {
-        colSpan: 1
-      };
-    }
-    let width = column.computedWidth;
-    for (let j = 1; j < colSpan; j += 1) {
-      const nextColumnIndex = columnIndex + j;
-      // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
-      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
-        const nextColumn = columns[nextColumnIndex];
-        width += nextColumn.computedWidth;
-        setCellColSpanInfo(rowId, columnIndex + j, {
-          spannedByColSpan: true,
-          rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
-          leftVisibleCellIndex: columnIndex
-        });
-      }
-      setCellColSpanInfo(rowId, columnIndex, {
-        spannedByColSpan: false,
-        cellProps: {
-          colSpan,
-          width
-        }
-      });
-    }
-    return {
-      colSpan
-    };
-  }, [apiRef, setCellColSpanInfo]);
+  };
 
   // Calculate `colSpan` for each cell in the row
   const calculateColSpan = React.useCallback(({
@@ -78,6 +21,8 @@ export const useGridColumnSpanning = apiRef => {
   }) => {
     for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
       const cellProps = calculateCellColSpan({
+        apiRef,
+        lookup: lookup.current,
         columnIndex: i,
         rowId,
         minFirstColumnIndex: minFirstColumn,
@@ -88,7 +33,7 @@ export const useGridColumnSpanning = apiRef => {
         i += cellProps.colSpan - 1;
       }
     }
-  }, [calculateCellColSpan]);
+  }, [apiRef]);
   const columnSpanningPublicApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };
@@ -102,4 +47,60 @@ export const useGridColumnSpanning = apiRef => {
     lookup.current = {};
   }, []);
   useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnReorderChange);
-};
+};
+function calculateCellColSpan(params) {
+  const {
+    apiRef,
+    lookup,
+    columnIndex,
+    rowId,
+    minFirstColumnIndex,
+    maxLastColumnIndex,
+    columns
+  } = params;
+  const columnsLength = columns.length;
+  const column = columns[columnIndex];
+  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+  if (!colSpan || colSpan === 1) {
+    setCellColSpanInfo(lookup, rowId, columnIndex, {
+      spannedByColSpan: false,
+      cellProps: {
+        colSpan: 1,
+        width: column.computedWidth
+      }
+    });
+    return {
+      colSpan: 1
+    };
+  }
+  let width = column.computedWidth;
+  for (let j = 1; j < colSpan; j += 1) {
+    const nextColumnIndex = columnIndex + j;
+    // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+    if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+      const nextColumn = columns[nextColumnIndex];
+      width += nextColumn.computedWidth;
+      setCellColSpanInfo(lookup, rowId, columnIndex + j, {
+        spannedByColSpan: true,
+        rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+        leftVisibleCellIndex: columnIndex
+      });
+    }
+    setCellColSpanInfo(lookup, rowId, columnIndex, {
+      spannedByColSpan: false,
+      cellProps: {
+        colSpan,
+        width
+      }
+    });
+  }
+  return {
+    colSpan
+  };
+}
+function setCellColSpanInfo(lookup, rowId, columnIndex, cellColSpanInfo) {
+  if (!lookup[rowId]) {
+    lookup[rowId] = {};
+  }
+  lookup[rowId][columnIndex] = cellColSpanInfo;
+}

package/hooks/features/columns/useGridColumns.js

@@ -5,23 +5,24 @@ import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsStateSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
-import { hydrateColumnsWidth, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
+import { EMPTY_PINNED_COLUMN_FIELDS } from './gridColumnsInterfaces';
+import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
 import { GridPreferencePanelsValue } from '../preferencesPanel';
-import { getGridDefaultColumnTypes } from '../../../colDef';
 import { jsx as _jsx } from "react/jsx-runtime";
-const defaultColumnTypes = getGridDefaultColumnTypes();
 export const columnsStateInitializer = (state, props, apiRef) => {
-  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2;
+  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2, _state$pinnedColumns;
   const columnsState = createColumnsState({
     apiRef,
-    columnTypes: defaultColumnTypes,
     columnsToUpsert: props.columns,
     initialState: (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.columns,
     columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.columns) == null ? void 0 : _props$initialState2.columnVisibilityModel) != null ? _ref : {},
     keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
-    columns: columnsState
+    columns: columnsState,
+    // In pro/premium, this part of the state is defined. We give it an empty but defined value
+    // for the community version.
+    pinnedColumns: (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : EMPTY_PINNED_COLUMN_FIELDS
   });
 };
 
@@ -33,9 +34,7 @@ export const columnsStateInitializer = (state, props, apiRef) => {
 export function useGridColumns(apiRef, props) {
   var _props$initialState4, _props$slotProps2;
   const logger = useGridLogger(apiRef, 'useGridColumns');
-  const columnTypes = defaultColumnTypes;
   const previousColumnsProp = React.useRef(props.columns);
-  const previousColumnTypesProp = React.useRef(columnTypes);
   apiRef.current.registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -46,8 +45,8 @@ export function useGridColumns(apiRef, props) {
   const setGridColumnsState = React.useCallback(columnsState => {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
-    apiRef.current.forceUpdate();
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
   /**
@@ -70,7 +69,6 @@ export function useGridColumns(apiRef, props) {
       apiRef.current.setState(state => _extends({}, state, {
         columns: createColumnsState({
           apiRef,
-          columnTypes,
           columnsToUpsert: [],
           initialState: undefined,
           columnVisibilityModel: model,
@@ -79,17 +77,16 @@ export function useGridColumns(apiRef, props) {
       }));
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnTypes]);
+  }, [apiRef]);
   const updateColumns = React.useCallback(columns => {
     const columnsState = createColumnsState({
       apiRef,
-      columnTypes,
       columnsToUpsert: columns,
       initialState: undefined,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, setGridColumnsState, columnTypes]);
+  }, [apiRef, setGridColumnsState]);
   const setColumnVisibility = React.useCallback((field, isVisible) => {
     var _columnVisibilityMode;
     const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -126,7 +123,6 @@ export function useGridColumns(apiRef, props) {
     apiRef.current.publishEvent('columnIndexChange', params);
   }, [apiRef, logger, setGridColumnsState, getColumnIndexRelativeToVisibleColumns]);
   const setColumnWidth = React.useCallback((field, width) => {
-    var _apiRef$current$getRo, _apiRef$current$getRo2;
     logger.debug(`Updating column ${field} width to ${width}`);
     const columnsState = gridColumnsStateSelector(apiRef.current.state);
     const column = columnsState.lookup[field];
@@ -138,7 +134,7 @@ export function useGridColumns(apiRef, props) {
       lookup: _extends({}, columnsState.lookup, {
         [field]: newColumn
       })
-    }), (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0));
+    }), apiRef.current.getRootDimensions().viewportInnerSize.width));
     apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
@@ -215,7 +211,6 @@ export function useGridColumns(apiRef, props) {
     }
     const columnsState = createColumnsState({
       apiRef,
-      columnTypes,
       columnsToUpsert: [],
       initialState,
       columnVisibilityModel: columnVisibilityModelToImport,
@@ -226,7 +221,7 @@ export function useGridColumns(apiRef, props) {
       apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
     }
     return params;
-  }, [apiRef, columnTypes]);
+  }, [apiRef]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.columns) {
       var _props$slotProps;
@@ -265,13 +260,12 @@ export function useGridColumns(apiRef, props) {
     logger.info(`Columns pipe processing have changed, regenerating the columns`);
     const columnsState = createColumnsState({
       apiRef,
-      columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnTypes]);
+  }, [apiRef, logger, setGridColumnsState]);
   useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
 
   /**
@@ -286,24 +280,27 @@ export function useGridColumns(apiRef, props) {
       return;
     }
     logger.info(`GridColumns have changed, new length ${props.columns.length}`);
-    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+    if (previousColumnsProp.current === props.columns) {
       return;
     }
     const columnsState = createColumnsState({
       apiRef,
-      columnTypes,
       initialState: undefined,
       // 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`
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });
     previousColumnsProp.current = props.columns;
-    previousColumnTypesProp.current = columnTypes;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns, columnTypes]);
+  }, [logger, apiRef, setGridColumnsState, props.columns]);
   React.useEffect(() => {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);
     }
   }, [apiRef, logger, props.columnVisibilityModel]);
+}
+function mergeColumnsState(columnsState) {
+  return state => _extends({}, state, {
+    columns: columnsState
+  });
 }

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

@@ -1,5 +1,13 @@
 import type { ElementSize } from '../../../models/elementSize';
 export interface GridDimensions {
+    /**
+     * Indicates that the dimensions have been initialized.
+     */
+    isReady: boolean;
+    /**
+     * The root container size.
+     */
+    root: ElementSize;
     /**
      * The viewport size including scrollbars.
      */
@@ -8,6 +16,14 @@ export interface GridDimensions {
      * The viewport size not including scrollbars.
      */
     viewportInnerSize: ElementSize;
+    /**
+     * The size of the main content (unpinned rows & columns).
+     */
+    contentSize: ElementSize;
+    /**
+     * The minimum size to display the grid, including all pinned sections and headers.
+     */
+    minimumSize: ElementSize;
     /**
      * Indicates if a scroll is currently needed to go from the beginning of the first column to the end of the last column.
      */
@@ -20,7 +36,43 @@ export interface GridDimensions {
      * Size of the scrollbar used to scroll the rows in pixel.
      * It is defined even when the scrollbar is currently not needed.
      */
-    scrollBarSize: number;
+    scrollbarSize: number;
+    /**
+     * Width of a row.
+     */
+    rowWidth: number;
+    /**
+     * Height of a row.
+     */
+    rowHeight: number;
+    /**
+     * Size of all the visible columns.
+     */
+    columnsTotalWidth: number;
+    /**
+     * Size of left pinned columns.
+     */
+    leftPinnedWidth: number;
+    /**
+     * Size of right pinned columns.
+     */
+    rightPinnedWidth: number;
+    /**
+     * Height of one headers.
+     */
+    headerHeight: number;
+    /**
+     * Height of all the column headers.
+     */
+    headersTotalHeight: number;
+    /**
+     * Size of the top container.
+     */
+    topContainerHeight: number;
+    /**
+     * Size of the bottom container.
+     */
+    bottomContainerHeight: number;
 }
 export interface GridDimensionsApi {
     /**
@@ -29,22 +81,19 @@ export interface GridDimensionsApi {
     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.
+     * @returns {GridDimensions} The dimension information of the grid. If `null`, the grid is not ready yet.
      */
-    getRootDimensions: () => GridDimensions | null;
+    getRootDimensions: () => GridDimensions;
 }
 export interface GridDimensionsPrivateApi {
+    /**
+     * Recalculates the grid layout. This should be called when an operation has changed the size
+     * of the content of the grid.
+     */
+    updateDimensions: () => void;
     /**
      * Returns the amount of rows that are currently visible in the viewport
      * @returns {number} The amount of rows visible in the viewport
      */
     getViewportPageSize: () => number;
-    /**
-     * Forces a recalculation of all dimensions.
-     */
-    updateGridDimensionsRef: () => void;
-    /**
-     * Computes the size and publishes a `resize` event with the new value.
-     */
-    computeSizeAndPublishResizeEvent: () => void;
 }

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

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

package/hooks/features/dimensions/gridDimensionsSelectors.js

@@ -0,0 +1 @@
+export const gridDimensionsSelector = state => state.dimensions;

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

@@ -1 +1,3 @@
+export type { GridDimensionsState } from './useGridDimensions';
+export * from './gridDimensionsSelectors';
 export type { GridDimensions, GridDimensionsApi } from './gridDimensionsApi';

package/hooks/features/dimensions/index.js

@@ -1 +1,2 @@
+export * from './gridDimensionsSelectors';
 export {};

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

@@ -1,4 +1,10 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare function useGridDimensions(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'columnHeaderHeight'>): void;
+import { GridDimensions } from './gridDimensionsApi';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'columnHeaderHeight'>;
+export type GridDimensionsState = GridDimensions;
+export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
+export declare function useGridDimensions(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;
+export {};