@mui/x-data-grid 7.9.0 → 7.11.0

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { EventListenerOptions } from '@mui/x-internals/EventManager';
 import { GridEventListener, GridEvents } from '../../models/events';
 import { CleanupTracking } from '../../utils/cleanupTracking/CleanupTracking';
-import { EventListenerOptions } from '../../utils/EventManager';
 import type { GridApiCommon } from '../../models';
 /**
  * Signal to the underlying logic what version of the public component API

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.9.0
+ * @mui/x-data-grid v7.11.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/locales/esES.js

@@ -33,8 +33,7 @@ const esESGrid = {
   columnsManagementSearchTitle: 'Buscar',
   columnsManagementNoColumns: 'Sin columnas',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar todas',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Restablecer',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/locales/ruRU.js

@@ -45,11 +45,10 @@ const ruRUGrid = {
   toolbarExportPrint: 'Печать',
   toolbarExportExcel: 'Скачать в формате Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Поиск',
+  columnsManagementNoColumns: 'Нет столбцов',
+  columnsManagementShowHideAllText: 'Показать/Скрыть Всё',
+  columnsManagementReset: 'Сбросить',
   // Filter panel text
   filterPanelAddFilter: 'Добавить фильтр',
   filterPanelRemoveAll: 'Очистить фильтр',

package/models/api/gridCoreApi.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { EventManager, EventListenerOptions } from '@mui/x-internals/EventManager';
 import { GridEventPublisher, GridEventListener, GridEvents } from '../events';
 import { Store } from '../../utils/Store';
-import { EventManager, EventListenerOptions } from '../../utils/EventManager';
 import { GridApiCaches } from '../gridApiCaches';
 import type { GridApiCommon, GridPrivateApiCommon } from './gridApiCommon';
 import type { DataGridProcessedProps } from '../props/DataGridProps';

package/models/api/gridRowSelectionApi.d.ts

@@ -30,9 +30,9 @@ export interface GridRowSelectionApi {
     /**
      * Updates the selected rows to be those passed to the `rowIds` argument.
      * Any row already selected will be unselected.
-     * @param {GridRowId[]} rowIds The row ids to select.
+     * @param {readonly GridRowId[]} rowIds The row ids to select.
      */
-    setRowSelectionModel: (rowIds: GridRowId[]) => void;
+    setRowSelectionModel: (rowIds: readonly GridRowId[]) => void;
 }
 export interface GridRowMultiSelectionApi {
     /**

package/models/colDef/gridColDef.d.ts

@@ -79,7 +79,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
     /**
      * The order of the sorting sequence.
      */
-    sortingOrder?: GridSortDirection[];
+    sortingOrder?: readonly GridSortDirection[];
     /**
      * If `true`, the column is resizable.
      * @default true
@@ -207,7 +207,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
     /**
      * Allows setting the filter operators for this column.
      */
-    filterOperators?: GridFilterOperator<R, V, F>[];
+    filterOperators?: readonly GridFilterOperator<R, V, F>[];
     /**
      * The callback that generates a filtering function for a given quick filter value.
      * This function can return `null` to skip filtering for this value and column.
@@ -247,9 +247,9 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
     /**
      * Function that returns the actions to be shown.
      * @param {GridRowParams} params The params for each row.
-     * @returns {React.ReactElement<GridActionsCellItemProps>[]} An array of [[GridActionsCell]] elements.
+     * @returns {readonly React.ReactElement<GridActionsCellItemProps>[]} An array of [[GridActionsCell]] elements.
      */
-    getActions: (params: GridRowParams<R>) => React.ReactElement<GridActionsCellItemProps>[];
+    getActions: (params: GridRowParams<R>) => readonly React.ReactElement<GridActionsCellItemProps>[];
 }
 /**
  * Column Definition interface used for columns with the `singleSelect` type.

package/models/gridRowSelectionModel.d.ts

@@ -1,3 +1,3 @@
 import { GridRowId } from './gridRows';
-export type GridInputRowSelectionModel = GridRowId[] | GridRowId;
-export type GridRowSelectionModel = GridRowId[];
+export type GridInputRowSelectionModel = readonly GridRowId[] | GridRowId;
+export type GridRowSelectionModel = readonly GridRowId[];

package/models/props/DataGridProps.d.ts

@@ -234,6 +234,11 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default "error" ("warn" in dev mode)
      */
     logLevel: keyof Logger | false;
+    /**
+     * If `true`, a loading overlay is displayed.
+     * @default false
+     */
+    loading: boolean;
     /**
      * If `true`, pagination is enabled.
      * @default false
@@ -698,10 +703,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * Return the id of a given [[GridRowModel]].
      */
     getRowId?: GridRowIdGetter<R>;
-    /**
-     * If `true`, a loading overlay is displayed.
-     */
-    loading?: boolean;
     /**
      * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
      */

package/modern/DataGrid/DataGrid.js

@@ -333,6 +333,7 @@ DataGridRaw.propTypes = {
   keepNonExistentRowsSelected: PropTypes.bool,
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: PropTypes.bool,
   /**

package/modern/DataGrid/useDataGridProps.js

@@ -23,54 +23,55 @@ const DATA_GRID_FORCED_PROPS = {
 export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   autoHeight: false,
   autoPageSize: false,
+  autosizeOnMount: false,
   checkboxSelection: false,
   checkboxSelectionVisibleOnly: false,
+  clipboardCopyCellDelimiter: '\t',
   columnBufferPx: 150,
-  rowBufferPx: 150,
-  rows: [],
-  rowSelection: true,
+  columnHeaderHeight: 56,
+  disableAutosize: false,
   disableColumnFilter: false,
   disableColumnMenu: false,
+  disableColumnReorder: false,
+  disableColumnResize: false,
   disableColumnSelector: false,
+  disableColumnSorting: false,
   disableDensitySelector: false,
   disableEval: false,
   disableMultipleColumnsFiltering: false,
-  disableMultipleRowSelection: false,
-  disableColumnSorting: false,
   disableMultipleColumnsSorting: false,
+  disableMultipleRowSelection: false,
   disableRowSelectionOnClick: false,
   disableVirtualization: false,
   editMode: GridEditModes.Cell,
-  filterMode: 'client',
   filterDebounceMs: 150,
-  columnHeaderHeight: 56,
+  filterMode: 'client',
   hideFooter: false,
   hideFooterPagination: false,
   hideFooterRowCount: false,
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
+  ignoreValueFormatterDuringExport: false,
+  keepColumnPositionIfDraggedOutside: false,
+  keepNonExistentRowsSelected: false,
+  loading: false,
   logger: console,
   logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+  pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
-  rowHeight: 52,
   resizeThrottleMs: 60,
-  pageSizeOptions: [25, 50, 100],
+  rowBufferPx: 150,
+  rowHeight: 52,
+  rowPositionsDebounceMs: 166,
+  rows: [],
+  rowSelection: true,
   rowSpacingType: 'margin',
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
-  sortingOrder: ['asc', 'desc', null],
   sortingMode: 'client',
-  throttleRowsMs: 0,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  keepNonExistentRowsSelected: false,
-  keepColumnPositionIfDraggedOutside: false,
-  ignoreValueFormatterDuringExport: false,
-  clipboardCopyCellDelimiter: '\t',
-  rowPositionsDebounceMs: 166,
-  autosizeOnMount: false,
-  disableAutosize: false
+  sortingOrder: ['asc', 'desc', null],
+  throttleRowsMs: 0
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {

package/modern/components/base/GridOverlays.js

@@ -55,7 +55,7 @@ function GridOverlayWrapper(props) {
   const rootProps = useGridRootProps();
   const currentPage = useGridVisibleRows(apiRef, rootProps);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  let height = dimensions.viewportOuterSize.height - dimensions.headersTotalHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  let height = dimensions.viewportOuterSize.height - dimensions.topContainerHeight - dimensions.bottomContainerHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   if (rootProps.autoHeight && currentPage.rows.length === 0 || height === 0) {
     height = getMinimalContentHeight(apiRef);
   }

package/modern/components/containers/GridRoot.js

@@ -1,18 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className"];
+const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/system';
 import { GridRootStyles } from './GridRootStyles';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     autoHeight,
@@ -25,15 +24,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridPanelAnchor = styled('div')({
-  position: 'absolute',
-  top: `var(--DataGrid-headersTotalHeight)`,
-  left: 0
-});
 const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const rootProps = useGridRootProps();
   const {
-      children,
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -54,16 +47,11 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   if (!mountedState) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(GridRootStyles, _extends({
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
     ref: handleRef,
     className: clsx(className, classes.root),
     ownerState: ownerState
-  }, other, {
-    children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
-      role: "presentation",
-      "data-id": "gridPanelAnchor"
-    }), children]
-  }));
+  }, other));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/components/panel/GridPanel.js

@@ -57,7 +57,10 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef]);
   const modifiers = React.useMemo(() => [{
     name: 'flip',
-    enabled: false
+    enabled: true,
+    options: {
+      rootBoundary: 'document'
+    }
   }, {
     name: 'isPlaced',
     enabled: true,

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -243,18 +243,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     applyMultiFilterOperatorChanges(logicOperator);
   }, [applyMultiFilterOperatorChanges]);
   const handleDeleteFilter = () => {
-    if (rootProps.disableMultipleColumnsFiltering) {
-      if (item.value === undefined) {
-        deleteFilter(item);
-      } else {
-        // TODO v6: simplify the behavior by always remove the filter form
-        applyFilterChanges(_extends({}, item, {
-          value: undefined
-        }));
-      }
-    } else {
-      deleteFilter(item);
-    }
+    deleteFilter(item);
   };
   React.useImperativeHandle(focusElementRef, () => ({
     focus: () => {

package/modern/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -18,7 +18,7 @@ function GridFilterInputMultipleValue(props) {
       error,
       helperText,
       size,
-      variant
+      variant = 'standard'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const TextFieldProps = {
@@ -88,6 +88,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes =
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
   }).isRequired,
-  type: PropTypes.oneOf(['number', 'text'])
+  type: PropTypes.oneOf(['date', 'datetime-local', 'number', 'text'])
 } : void 0;
 export { GridFilterInputMultipleValue };

package/modern/components/virtualization/GridMainContainer.js

@@ -3,7 +3,12 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const GridPanelAnchor = styled('div')({
+  position: 'absolute',
+  top: `var(--DataGrid-headersTotalHeight)`,
+  left: 0
+});
 const Element = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Main',
@@ -16,12 +21,15 @@ const Element = styled('div', {
 export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const ariaAttributes = useGridAriaAttributes();
   const rootProps = useGridRootProps();
-  return /*#__PURE__*/_jsx(Element, _extends({
+  return /*#__PURE__*/_jsxs(Element, _extends({
     ref: ref,
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, {
-    children: props.children
+    children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
+      role: "presentation",
+      "data-id": "gridPanelAnchor"
+    }), props.children]
   }));
 });

package/modern/components/virtualization/GridVirtualScroller.js

@@ -87,7 +87,9 @@ function GridVirtualScroller(props) {
             virtualScroller: virtualScroller
           })]
         }))
-      })), rows.length > 0 && /*#__PURE__*/_jsx(SpaceFiller, {}), /*#__PURE__*/_jsx(BottomContainer, {
+      })), /*#__PURE__*/_jsx(SpaceFiller, {
+        rowsLength: rows.length
+      }), /*#__PURE__*/_jsx(BottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "bottom",
           virtualScroller: virtualScroller

package/modern/components/virtualization/GridVirtualScrollerFiller.js

@@ -16,22 +16,24 @@ const Pinned = styled('div')({
   position: 'sticky',
   height: '100%',
   boxSizing: 'border-box',
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  borderTop: '1px solid var(--rowBorderColor)',
   backgroundColor: 'var(--DataGrid-pinnedBackground)'
 });
 const PinnedLeft = styled(Pinned)({
   left: 0,
-  borderRight: '1px solid var(--DataGrid-rowBorderColor)'
+  borderRight: '1px solid var(--rowBorderColor)'
 });
 const PinnedRight = styled(Pinned)({
   right: 0,
-  borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
+  borderLeft: '1px solid var(--rowBorderColor)'
 });
 const Main = styled('div')({
   flexGrow: 1,
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+  borderTop: '1px solid var(--rowBorderColor)'
 });
-function GridVirtualScrollerFiller() {
+function GridVirtualScrollerFiller({
+  rowsLength
+}) {
   const apiRef = useGridApiContext();
   const {
     viewportOuterSize,
@@ -52,7 +54,8 @@ function GridVirtualScrollerFiller() {
     className: gridClasses.filler,
     role: "presentation",
     style: {
-      height
+      height,
+      '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)'
     },
     children: [leftPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedLeft, {
       className: gridClasses['filler--pinnedLeft'],

package/modern/hooks/core/useGridApiInitialization.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { EventManager } from '@mui/x-internals/EventManager';
 import { Store } from '../../utils/Store';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
-import { EventManager } from '../../utils/EventManager';
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -267,6 +267,7 @@ export const useGridColumnResize = (apiRef, props) => {
       // Check if the current event is part of a double-click
       if (nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY) {
         refs.previousMouseClickEvent = undefined;
+        apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
         return;
       }
     }

package/modern/hooks/features/editing/gridEditingSelectors.js

@@ -1,2 +1,4 @@
-// TODO v6: rename to gridEditingStateSelector
+/**
+ * Select the row editing state.
+ */
 export const gridEditRowsStateSelector = state => state.editRows;

package/modern/hooks/features/editing/index.js

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

package/modern/hooks/features/filter/gridFilterSelector.js

@@ -89,6 +89,19 @@ export const gridExpandedRowCountSelector = createSelector(gridExpandedSortedRow
  */
 export const gridFilteredTopLevelRowCountSelector = createSelector(gridFilteredSortedTopLevelRowEntriesSelector, visibleSortedTopLevelRows => visibleSortedTopLevelRows.length);
 
+/**
+ * Get the amount of rows accessible after the filtering process.
+ * Includes top level and descendant rows.
+ * @category Filtering
+ */
+export const gridFilteredRowCountSelector = createSelector(gridFilteredSortedRowEntriesSelector, filteredSortedRowEntries => filteredSortedRowEntries.length);
+
+/**
+ * Get the amount of descendant rows accessible after the filtering process.
+ * @category Filtering
+ */
+export const gridFilteredDescendantRowCountSelector = createSelector(gridFilteredRowCountSelector, gridFilteredTopLevelRowCountSelector, (totalRowCount, topLevelRowCount) => totalRowCount - topLevelRowCount);
+
 /**
  * @category Filtering
  * @ignore - do not document.

package/modern/hooks/features/index.js

@@ -4,6 +4,7 @@ export * from './columns';
 export * from './columnGrouping';
 export * from './columnResize';
 export * from './density';
+export * from './editing';
 export * from './filter';
 export * from './focus';
 export * from './pagination';

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -361,20 +361,12 @@ export const useGridVirtualScroller = () => {
     overflowY: rootProps.autoHeight ? 'hidden' : undefined
   }), [needsHorizontalScrollbar, rootProps.autoHeight]);
   const contentSize = React.useMemo(() => {
-    // In cases where the columns exceed the available width,
-    // the horizontal scrollbar should be shown even when there're no rows.
-    // Keeping 1px as minimum height ensures that the scrollbar will visible if necessary.
-    const height = Math.max(contentHeight, 1);
     const size = {
       width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      height
+      height: contentHeight
     };
-    if (rootProps.autoHeight) {
-      if (currentPage.rows.length === 0) {
-        size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
-      } else {
-        size.height = contentHeight;
-      }
+    if (rootProps.autoHeight && currentPage.rows.length === 0) {
+      size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
     }
     return size;
   }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.9.0
+ * @mui/x-data-grid v7.11.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/locales/esES.js

@@ -33,8 +33,7 @@ const esESGrid = {
   columnsManagementSearchTitle: 'Buscar',
   columnsManagementNoColumns: 'Sin columnas',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar todas',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Restablecer',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/modern/locales/ruRU.js

@@ -45,11 +45,10 @@ const ruRUGrid = {
   toolbarExportPrint: 'Печать',
   toolbarExportExcel: 'Скачать в формате Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Поиск',
+  columnsManagementNoColumns: 'Нет столбцов',
+  columnsManagementShowHideAllText: 'Показать/Скрыть Всё',
+  columnsManagementReset: 'Сбросить',
   // Filter panel text
   filterPanelAddFilter: 'Добавить фильтр',
   filterPanelRemoveAll: 'Очистить фильтр',

package/modern/utils/createSelector.js

@@ -8,8 +8,8 @@ function checkIsAPIRef(value) {
 const DEFAULT_INSTANCE_ID = {
   id: 'default'
 };
-export const createSelector = (a, b, c, d, e, f, ...rest) => {
-  if (rest.length > 0) {
+export const createSelector = (a, b, c, d, e, f, ...other) => {
+  if (other.length > 0) {
     throw new Error('Unsupported number of selectors');
   }
   let selector;

package/node/DataGrid/DataGrid.js

@@ -341,6 +341,7 @@ DataGridRaw.propTypes = {
   keepNonExistentRowsSelected: _propTypes.default.bool,
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: _propTypes.default.bool,
   /**

package/node/DataGrid/useDataGridProps.js

@@ -32,54 +32,55 @@ const DATA_GRID_FORCED_PROPS = {
 const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES = {
   autoHeight: false,
   autoPageSize: false,
+  autosizeOnMount: false,
   checkboxSelection: false,
   checkboxSelectionVisibleOnly: false,
+  clipboardCopyCellDelimiter: '\t',
   columnBufferPx: 150,
-  rowBufferPx: 150,
-  rows: [],
-  rowSelection: true,
+  columnHeaderHeight: 56,
+  disableAutosize: false,
   disableColumnFilter: false,
   disableColumnMenu: false,
+  disableColumnReorder: false,
+  disableColumnResize: false,
   disableColumnSelector: false,
+  disableColumnSorting: false,
   disableDensitySelector: false,
   disableEval: false,
   disableMultipleColumnsFiltering: false,
-  disableMultipleRowSelection: false,
-  disableColumnSorting: false,
   disableMultipleColumnsSorting: false,
+  disableMultipleRowSelection: false,
   disableRowSelectionOnClick: false,
   disableVirtualization: false,
   editMode: _models.GridEditModes.Cell,
-  filterMode: 'client',
   filterDebounceMs: 150,
-  columnHeaderHeight: 56,
+  filterMode: 'client',
   hideFooter: false,
   hideFooterPagination: false,
   hideFooterRowCount: false,
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
+  ignoreValueFormatterDuringExport: false,
+  keepColumnPositionIfDraggedOutside: false,
+  keepNonExistentRowsSelected: false,
+  loading: false,
   logger: console,
   logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+  pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
-  rowHeight: 52,
   resizeThrottleMs: 60,
-  pageSizeOptions: [25, 50, 100],
+  rowBufferPx: 150,
+  rowHeight: 52,
+  rowPositionsDebounceMs: 166,
+  rows: [],
+  rowSelection: true,
   rowSpacingType: 'margin',
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
-  sortingOrder: ['asc', 'desc', null],
   sortingMode: 'client',
-  throttleRowsMs: 0,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  keepNonExistentRowsSelected: false,
-  keepColumnPositionIfDraggedOutside: false,
-  ignoreValueFormatterDuringExport: false,
-  clipboardCopyCellDelimiter: '\t',
-  rowPositionsDebounceMs: 166,
-  autosizeOnMount: false,
-  disableAutosize: false
+  sortingOrder: ['asc', 'desc', null],
+  throttleRowsMs: 0
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {

package/node/components/base/GridOverlays.js

@@ -64,7 +64,7 @@ function GridOverlayWrapper(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  let height = dimensions.viewportOuterSize.height - dimensions.headersTotalHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  let height = dimensions.viewportOuterSize.height - dimensions.topContainerHeight - dimensions.bottomContainerHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   if (rootProps.autoHeight && currentPage.rows.length === 0 || height === 0) {
     height = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef);
   }