@mui/x-data-grid 7.20.0 → 7.22.0

package/modern/constants/dataGridPropsDefaultValues.js

@@ -0,0 +1,60 @@
+import { GridEditModes } from "../models/gridEditRowModel.js";
+/**
+ * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
+ */
+export const DATA_GRID_PROPS_DEFAULT_VALUES = {
+  autoHeight: false,
+  autoPageSize: false,
+  autosizeOnMount: false,
+  checkboxSelection: false,
+  checkboxSelectionVisibleOnly: false,
+  clipboardCopyCellDelimiter: '\t',
+  columnBufferPx: 150,
+  columnHeaderHeight: 56,
+  disableAutosize: false,
+  disableColumnFilter: false,
+  disableColumnMenu: false,
+  disableColumnReorder: false,
+  disableColumnResize: false,
+  disableColumnSelector: false,
+  disableColumnSorting: false,
+  disableDensitySelector: false,
+  disableEval: false,
+  disableMultipleColumnsFiltering: false,
+  disableMultipleColumnsSorting: false,
+  disableMultipleRowSelection: false,
+  disableRowSelectionOnClick: false,
+  disableVirtualization: false,
+  editMode: GridEditModes.Cell,
+  filterDebounceMs: 150,
+  filterMode: 'client',
+  hideFooter: false,
+  hideFooterPagination: false,
+  hideFooterRowCount: false,
+  hideFooterSelectedRowCount: false,
+  ignoreDiacritics: false,
+  ignoreValueFormatterDuringExport: false,
+  // TODO v8: Update to 'select'
+  indeterminateCheckboxAction: 'deselect',
+  keepColumnPositionIfDraggedOutside: false,
+  keepNonExistentRowsSelected: false,
+  loading: false,
+  logger: console,
+  logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+  pageSizeOptions: [25, 50, 100],
+  pagination: false,
+  paginationMode: 'client',
+  resizeThrottleMs: 60,
+  rowBufferPx: 150,
+  rowHeight: 52,
+  rowPositionsDebounceMs: 166,
+  rows: [],
+  rowSelection: true,
+  rowSpacingType: 'margin',
+  showCellVerticalBorder: false,
+  showColumnVerticalBorder: false,
+  sortingMode: 'client',
+  sortingOrder: ['asc', 'desc', null],
+  throttleRowsMs: 0,
+  unstable_rowSpanning: false
+};

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useGridApiOptionHandler, useGridNativeEventListener } from "../../utils/index.js";
 import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
 import { serializeCellValue } from "../export/serializers/csvSerializer.js";
+import { isCopyShortcut } from "../../../utils/keyboardUtils.js";
 function writeToClipboardPolyfill(data) {
   const span = document.createElement('span');
   span.style.whiteSpace = 'pre';
@@ -53,7 +54,7 @@ export const useGridClipboard = (apiRef, props) => {
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {
-    if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
+    if (!isCopyShortcut(event)) {
       return;
     }
 

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -56,7 +56,9 @@ export const useGridColumnHeaders = props => {
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
-    apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+    if (apiRef.current.columnHeadersContainerRef.current) {
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+    }
   }, [apiRef]);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);

package/modern/hooks/features/columnMenu/useGridColumnMenuSlots.js

@@ -2,10 +2,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["displayOrder"];
 import * as React from 'react';
-import Divider from '@mui/material/Divider';
+import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 const useGridColumnMenuSlots = props => {
   const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
   const {
     defaultSlots,
     defaultSlotProps,
@@ -51,8 +52,8 @@ const useGridColumnMenuSlots = props => {
         const customProps = _objectWithoutPropertiesLoose(processedComponentProps, _excluded);
         itemProps = _extends({}, itemProps, customProps);
       }
-      return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [Divider, {}]] : [...acc, [processedComponents[key], itemProps]];
+      return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [rootProps.slots.baseDivider, {}]] : [...acc, [processedComponents[key], itemProps]];
     }, []);
-  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedSlotProps, userItems]);
+  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedSlotProps, userItems, rootProps.slots.baseDivider]);
 };
 export { useGridColumnMenuSlots };

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -312,6 +312,9 @@ export function getFirstNonSpannedColumnToRender({
   return firstNonSpannedColumnToRender;
 }
 export function getTotalHeaderHeight(apiRef, props) {
+  if (props.unstable_listView) {
+    return 0;
+  }
   const densityFactor = gridDensityFactorSelector(apiRef);
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
   const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);

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

@@ -12,8 +12,9 @@ import { gridRenderContextSelector } from "../virtualization/index.js";
 import { useGridSelector } from "../../utils/index.js";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
-import { calculatePinnedRowsHeight } from "../rows/gridRowsUtils.js";
+import { calculatePinnedRowsHeight, getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -54,7 +55,8 @@ export function useGridDimensions(apiRef, props) {
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const rowHeight = Math.floor(props.rowHeight * densityFactor);
+  const validRowHeight = React.useMemo(() => getValidRowHeight(props.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning), [props.rowHeight]);
+  const rowHeight = Math.floor(validRowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
   const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);

package/modern/hooks/features/focus/useGridFocus.js

@@ -323,18 +323,33 @@ export const useGridFocus = (apiRef, props) => {
   const handleRowSet = React.useCallback(() => {
     const cell = gridFocusCellSelector(apiRef);
 
-    // If the focused cell is in a row which does not exist anymore, then remove the focus
+    // If the focused cell is in a row which does not exist anymore,
+    // focus previous row or remove the focus
     if (cell && !apiRef.current.getRow(cell.id)) {
+      const lastFocusedRowId = gridFocusCellSelector(apiRef)?.id;
+      let nextRowId = null;
+      if (typeof lastFocusedRowId !== 'undefined') {
+        const lastFocusedRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(lastFocusedRowId);
+        const currentPage = getVisibleRows(apiRef, {
+          pagination: props.pagination,
+          paginationMode: props.paginationMode
+        });
+        const nextRow = currentPage.rows[clamp(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
+        nextRowId = nextRow.id ?? null;
+      }
       apiRef.current.setState(state => _extends({}, state, {
         focus: {
-          cell: null,
+          cell: nextRowId === null ? null : {
+            id: nextRowId,
+            field: cell.field
+          },
           columnHeader: null,
           columnHeaderFilter: null,
           columnGroupHeader: null
         }
       }));
     }
-  }, [apiRef]);
+  }, [apiRef, props.pagination, props.paginationMode]);
   const handlePaginationModelChange = useEventcallback(() => {
     const currentFocusedCell = gridFocusCellSelector(apiRef);
     if (!currentFocusedCell) {

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -16,6 +16,7 @@ import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector }
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { enrichPageRowsWithPinnedRows, getLeftColumnIndex, getRightColumnIndex, findNonRowSpannedCell } from "./utils.js";
+import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 
 /**
  * @requires useGridSorting (method) - can be after
@@ -30,6 +31,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
   const isRtl = useRtl();
+  const listView = props.unstable_listView;
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
@@ -50,7 +52,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+    const field = listView ? gridListColumnSelector(apiRef.current.state).field : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
     const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
@@ -61,7 +63,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       rowIndex: rowIndexRelativeToAllRows
     });
     apiRef.current.setCellFocus(nonRowSpannedRowId, field);
-  }, [apiRef, logger]);
+  }, [apiRef, logger, listView]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
     apiRef.current.scrollToIndexes({
@@ -384,12 +386,14 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       return;
     }
     const viewportPageSize = apiRef.current.getViewportPageSize();
-    const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
+    const getColumnIndexFn = listView ? () => 0 : apiRef.current.getColumnIndex;
+    const colIndexBefore = params.field ? getColumnIndexFn(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
     const firstRowIndexInPage = 0;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const visibleColumns = listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
+    const lastColIndex = visibleColumns.length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {
       case 'ArrowDown':
@@ -508,7 +512,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
+  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/modern/hooks/features/listView/gridListViewSelectors.js

@@ -0,0 +1,4 @@
+/**
+ * Get a list column definition
+ */
+export const gridListColumnSelector = state => state.listViewColumn;

package/modern/hooks/features/listView/useGridListView.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridDimensionsSelector } from "../dimensions/index.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
+  listViewColumn: _extends({}, props.unstable_listColumn, {
+    computedWidth: getListColumnWidth(apiRef)
+  })
+});
+export function useGridListView(apiRef, props) {
+  /*
+   * EVENTS
+   */
+  const updateListColumnWidth = () => {
+    apiRef.current.setState(state => {
+      if (!state.listViewColumn) {
+        return state;
+      }
+      return _extends({}, state, {
+        listViewColumn: _extends({}, state.listViewColumn, {
+          computedWidth: getListColumnWidth(apiRef)
+        })
+      });
+    });
+  };
+  const prevInnerWidth = React.useRef(null);
+  const handleGridSizeChange = viewportInnerSize => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      updateListColumnWidth();
+    }
+  };
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', updateListColumnWidth);
+
+  /*
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    const listColumn = props.unstable_listColumn;
+    if (listColumn) {
+      apiRef.current.setState(state => {
+        return _extends({}, state, {
+          listViewColumn: _extends({}, listColumn, {
+            computedWidth: getListColumnWidth(apiRef)
+          })
+        });
+      });
+    }
+  }, [apiRef, props.unstable_listColumn]);
+}
+function getListColumnWidth(apiRef) {
+  return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;
+}

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

@@ -2,6 +2,7 @@ import { createSelector, createSelectorMemoized } from "../../../utils/createSel
 import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from "../filter/gridFilterSelector.js";
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { getPageCount } from "./gridPaginationUtils.js";
+const ALL_RESULTS_PAGE_VALUE = -1;
 
 /**
  * @category Pagination
@@ -52,7 +53,7 @@ export const gridPageCountSelector = createSelector(gridPaginationModelSelector,
 export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginationModelSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridExpandedSortedRowEntriesSelector, gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
-  const topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);
+  const topLevelLastRowIndex = paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE ? visibleTopLevelRowCount - 1 : Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);
 
   // The range contains no element
   if (topLevelFirstRowIndex === -1 || topLevelLastRowIndex === -1) {

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -246,7 +246,11 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
+  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
+    if (isFirstRender.current) {
+      return;
+    }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
 
@@ -254,7 +258,7 @@ export const useGridRowSelection = (apiRef, props) => {
     const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (filteredRowsLookup[id] === false) {
+      if (filteredRowsLookup[id] !== true) {
         if (props.keepNonExistentRowsSelected) {
           return;
         }
@@ -408,7 +412,7 @@ export const useGridRowSelection = (apiRef, props) => {
       handleSingleRowSelection(params.id, event);
       return;
     }
-    if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
+    if (String.fromCharCode(event.keyCode) === 'A' && (event.ctrlKey || event.metaKey)) {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
@@ -462,4 +466,9 @@ export const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    }
+  }, []);
 };

package/modern/hooks/features/rowSelection/utils.js

@@ -57,7 +57,7 @@ export function getCheckboxPropsSelector(groupId, autoSelectParents) {
       }
     }
     return {
-      isIndeterminate: selectedDescendantsCount > 0 && selectedDescendantsCount < selectableDescendantsCount || selectedDescendantsCount === selectableDescendantsCount && rowSelectionLookup[groupId] === undefined,
+      isIndeterminate: selectedDescendantsCount > 0 && (selectedDescendantsCount < selectableDescendantsCount || rowSelectionLookup[groupId] === undefined),
       isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionLookup[groupId] === groupId
     };
   });

package/modern/hooks/features/rows/gridRowsMetaInterfaces.js

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

package/modern/hooks/features/rows/gridRowsUtils.js

@@ -306,4 +306,17 @@ export function computeRowsUpdates(apiRef, updates, getRowId) {
     }
   });
   return nonPinnedRowsUpdates;
-}
+}
+let warnedOnceInvalidRowHeight = false;
+export const getValidRowHeight = (rowHeightProp, defaultRowHeight, warningMessage) => {
+  if (typeof rowHeightProp === 'number' && rowHeightProp > 0) {
+    return rowHeightProp;
+  }
+  if (process.env.NODE_ENV !== 'production' && !warnedOnceInvalidRowHeight && typeof rowHeightProp !== 'undefined' && rowHeightProp !== null) {
+    console.warn(warningMessage);
+    warnedOnceInvalidRowHeight = true;
+  }
+  return defaultRowHeight;
+};
+export const rowHeightWarning = [`MUI X: The \`rowHeight\` prop should be a number greater than 0.`, `The default value will be used instead.`].join('\n');
+export const getRowHeightWarning = [`MUI X: The \`getRowHeight\` prop should return a number greater than 0 or 'auto'.`, `The default value will be used instead.`].join('\n');

package/modern/hooks/features/rows/useGridParamsApi.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from "../../../utils/domUtils.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridFocusCellSelector, gridTabIndexCellSelector } from "../focus/gridFocusStateSelector.js";
+import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 export class MissingRowIdError extends Error {}
 
 /**
@@ -12,7 +13,7 @@ export class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export function useGridParamsApi(apiRef) {
+export function useGridParamsApi(apiRef, props) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -30,7 +31,7 @@ export function useGridParamsApi(apiRef) {
     return params;
   }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
-    const colDef = apiRef.current.getColumn(field);
+    const colDef = props.unstable_listView ? gridListColumnSelector(apiRef.current.state) : apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
@@ -59,7 +60,7 @@ export function useGridParamsApi(apiRef) {
     }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
-  }, [apiRef]);
+  }, [apiRef, props.unstable_listView]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);