@mui/x-data-grid 7.19.0 → 7.21.0

package/node/components/menu/columnMenu/GridColumnMenu.js

@@ -53,6 +53,38 @@ const GridGenericColumnMenu = exports.GridGenericColumnMenu = /*#__PURE__*/React
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, otherProps), index))
   }));
 });
+process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: _propTypes.default.object.isRequired,
+  /**
+   * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlotProps: _propTypes.default.object.isRequired,
+  /**
+   * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlots: _propTypes.default.object.isRequired,
+  hideMenu: _propTypes.default.func.isRequired,
+  id: _propTypes.default.string,
+  labelledby: _propTypes.default.string,
+  open: _propTypes.default.bool.isRequired,
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots: _propTypes.default.object
+} : void 0;
 const GridColumnMenu = exports.GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridGenericColumnMenu, (0, _extends2.default)({}, props, {
     ref: ref,

package/node/components/toolbar/GridToolbarExport.js

@@ -35,6 +35,26 @@ function GridCsvExportMenuItem(props) {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
   }));
 }
+process.env.NODE_ENV !== "production" ? GridCsvExportMenuItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  hideMenu: _propTypes.default.func,
+  options: _propTypes.default.shape({
+    allColumns: _propTypes.default.bool,
+    delimiter: _propTypes.default.string,
+    disableToolbarButton: _propTypes.default.bool,
+    escapeFormulas: _propTypes.default.bool,
+    fields: _propTypes.default.arrayOf(_propTypes.default.string),
+    fileName: _propTypes.default.string,
+    getRowsToExport: _propTypes.default.func,
+    includeColumnGroupsHeaders: _propTypes.default.bool,
+    includeHeaders: _propTypes.default.bool,
+    shouldAppendQuotes: _propTypes.default.bool,
+    utf8WithBom: _propTypes.default.bool
+  })
+} : void 0;
 function GridPrintExportMenuItem(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const {
@@ -51,6 +71,38 @@ function GridPrintExportMenuItem(props) {
     children: apiRef.current.getLocaleText('toolbarExportPrint')
   }));
 }
+process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  hideMenu: _propTypes.default.func,
+  options: _propTypes.default.shape({
+    allColumns: _propTypes.default.bool,
+    bodyClassName: _propTypes.default.string,
+    copyStyles: _propTypes.default.bool,
+    disableToolbarButton: _propTypes.default.bool,
+    fields: _propTypes.default.arrayOf(_propTypes.default.string),
+    fileName: _propTypes.default.string,
+    getRowsToExport: _propTypes.default.func,
+    hideFooter: _propTypes.default.bool,
+    hideToolbar: _propTypes.default.bool,
+    includeCheckboxes: _propTypes.default.bool,
+    pageStyle: _propTypes.default.oneOfType([_propTypes.default.shape({
+      '__@hasInstance@646': _propTypes.default.func.isRequired,
+      '__@metadata@648': _propTypes.default.any,
+      apply: _propTypes.default.func.isRequired,
+      arguments: _propTypes.default.any.isRequired,
+      bind: _propTypes.default.func.isRequired,
+      call: _propTypes.default.func.isRequired,
+      caller: _propTypes.default.object.isRequired,
+      length: _propTypes.default.number.isRequired,
+      name: _propTypes.default.string.isRequired,
+      prototype: _propTypes.default.any.isRequired,
+      toString: _propTypes.default.func.isRequired
+    }), _propTypes.default.string])
+  })
+} : void 0;
 const GridToolbarExport = exports.GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   const {
       csvOptions = {},

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -126,6 +126,10 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     ref: (0, _utils.unstable_useForkRef)(ref, scrollbarRef),
     className: classes.root,
+    style: props.position === 'vertical' && rootProps.unstable_listView ? {
+      height: '100%',
+      top: 0
+    } : undefined,
     tabIndex: -1,
     "aria-hidden": "true",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/node/components/virtualization/GridVirtualScroller.js

@@ -86,7 +86,7 @@ function GridVirtualScroller(props) {
     }, getScrollerProps(), {
       ownerState: rootProps,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
+        children: [!rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
           position: "top",
           virtualScroller: virtualScroller
         })]
@@ -106,7 +106,7 @@ function GridVirtualScroller(props) {
       })]
     })), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "vertical"
-    }, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    }, getScrollbarVerticalProps())), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), props.children]
   }));

package/node/constants/dataGridPropsDefaultValues.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DATA_GRID_PROPS_DEFAULT_VALUES = void 0;
+var _gridEditRowModel = require("../models/gridEditRowModel");
+/**
+ * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
+ */
+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,
+  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: _gridEditRowModel.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/node/hooks/core/useGridRefs.js

@@ -10,6 +10,8 @@ const useGridRefs = apiRef => {
   const rootElementRef = React.useRef(null);
   const mainElementRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
+  const virtualScrollbarVerticalRef = React.useRef(null);
+  const virtualScrollbarHorizontalRef = React.useRef(null);
   const columnHeadersContainerRef = React.useRef(null);
   apiRef.current.register('public', {
     rootElementRef
@@ -17,6 +19,8 @@ const useGridRefs = apiRef => {
   apiRef.current.register('private', {
     mainElementRef,
     virtualScrollerRef,
+    virtualScrollbarVerticalRef,
+    virtualScrollbarHorizontalRef,
     columnHeadersContainerRef
   });
 };

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

@@ -9,6 +9,7 @@ var React = _interopRequireWildcard(require("react"));
 var _utils = require("../../utils");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 var _csvSerializer = require("../export/serializers/csvSerializer");
+var _keyboardUtils = require("../../../utils/keyboardUtils");
 function writeToClipboardPolyfill(data) {
   const span = document.createElement('span');
   span.style.whiteSpace = 'pre';
@@ -60,7 +61,7 @@ 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 (!(0, _keyboardUtils.isCopyShortcut)(event)) {
       return;
     }
 

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

@@ -64,7 +64,9 @@ const useGridColumnHeaders = props => {
   const offsetLeft = (0, _useGridVirtualScroller.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/node/hooks/features/columns/gridColumnsUtils.js

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

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

@@ -23,6 +23,7 @@ var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
+var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -64,7 +65,8 @@ function useGridDimensions(apiRef, props) {
   const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
   const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
-  const rowHeight = Math.floor(props.rowHeight * densityFactor);
+  const validRowHeight = React.useMemo(() => (0, _gridRowsUtils.getValidRowHeight)(props.rowHeight, _dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, _gridRowsUtils.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);
@@ -248,11 +250,11 @@ function useGridDimensions(apiRef, props) {
     // jsdom has no layout capabilities
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
     if (size.width === 0 && !errorShown.current && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
     if (isFirstSizing.current) {

package/node/hooks/features/editing/useGridCellEditing.js

@@ -332,7 +332,9 @@ const useGridCellEditing = (apiRef, props) => {
       };
       try {
         const row = apiRef.current.getRow(id);
-        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        Promise.resolve(processRowUpdate(rowUpdate, row, {
+          rowId: id
+        })).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           finishCellEditMode();
         }).catch(handleError);

package/node/hooks/features/editing/useGridRowEditing.js

@@ -405,7 +405,9 @@ const useGridRowEditing = (apiRef, props) => {
         }
       };
       try {
-        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        Promise.resolve(processRowUpdate(rowUpdate, row, {
+          rowId: id
+        })).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           finishRowEditMode();
         }).catch(handleError);

package/node/hooks/features/events/useGridEvents.js

@@ -11,6 +11,7 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
  */
 function useGridEvents(apiRef, props) {
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderContextMenu', props.onColumnHeaderContextMenu);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);

package/node/hooks/features/filter/gridFilterUtils.js

@@ -49,7 +49,7 @@ const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiRef) =>
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
     if (process.env.NODE_ENV !== 'production') {
-      (0, _warning.warnOnce)(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+      (0, _warning.warnOnce)(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     }
     items = [model.items[0]];
   } else {

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

@@ -23,6 +23,7 @@ var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilter
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _domUtils = require("../../../utils/domUtils");
 var _utils = require("./utils");
+var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -36,6 +37,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props).rows;
   const isRtl = (0, _RtlProvider.useRtl)();
+  const listView = props.unstable_listView;
   const currentPageRows = React.useMemo(() => (0, _utils.enrichPageRowsWithPinnedRows)(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
@@ -56,7 +58,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef)[colIndex];
+    const field = listView ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state).field : (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef)[colIndex];
     const nonRowSpannedRowId = (0, _utils.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.
@@ -67,7 +69,7 @@ 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({
@@ -390,12 +392,14 @@ 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 = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
+    const visibleColumns = listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const lastColIndex = visibleColumns.length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {
       case 'ArrowDown':
@@ -514,7 +518,7 @@ 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/node/hooks/features/listView/gridListViewSelectors.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridListColumnSelector = void 0;
+/**
+ * Get a list column definition
+ */
+const gridListColumnSelector = state => state.listViewColumn;
+exports.gridListColumnSelector = gridListColumnSelector;

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listViewStateInitializer = void 0;
+exports.useGridListView = useGridListView;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _dimensions = require("../dimensions");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+const listViewStateInitializer = (state, props, apiRef) => (0, _extends2.default)({}, state, {
+  listViewColumn: (0, _extends2.default)({}, props.unstable_listColumn, {
+    computedWidth: getListColumnWidth(apiRef)
+  })
+});
+exports.listViewStateInitializer = listViewStateInitializer;
+function useGridListView(apiRef, props) {
+  /*
+   * EVENTS
+   */
+  const updateListColumnWidth = () => {
+    apiRef.current.setState(state => {
+      if (!state.listViewColumn) {
+        return state;
+      }
+      return (0, _extends2.default)({}, state, {
+        listViewColumn: (0, _extends2.default)({}, state.listViewColumn, {
+          computedWidth: getListColumnWidth(apiRef)
+        })
+      });
+    });
+  };
+  const prevInnerWidth = React.useRef(null);
+  const handleGridSizeChange = viewportInnerSize => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      updateListColumnWidth();
+    }
+  };
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnVisibilityModelChange', updateListColumnWidth);
+
+  /*
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    const listColumn = props.unstable_listColumn;
+    if (listColumn) {
+      apiRef.current.setState(state => {
+        return (0, _extends2.default)({}, state, {
+          listViewColumn: (0, _extends2.default)({}, listColumn, {
+            computedWidth: getListColumnWidth(apiRef)
+          })
+        });
+      });
+    }
+  }, [apiRef, props.unstable_listColumn]);
+}
+function getListColumnWidth(apiRef) {
+  return (0, _dimensions.gridDimensionsSelector)(apiRef.current.state).viewportInnerSize.width;
+}

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

@@ -255,7 +255,11 @@ const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
+  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
+    if (isFirstRender.current) {
+      return;
+    }
     const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
     const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
 
@@ -263,7 +267,7 @@ const useGridRowSelection = (apiRef, props) => {
     const selectionLookup = (0, _extends2.default)({}, (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef));
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (filteredRowsLookup[id] === false) {
+      if (filteredRowsLookup[id] !== true) {
         if (props.keepNonExistentRowsSelected) {
           return;
         }
@@ -417,7 +421,7 @@ 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);
     }
@@ -471,5 +475,10 @@ const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    }
+  }, []);
 };
 exports.useGridRowSelection = useGridRowSelection;

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

@@ -52,21 +52,21 @@ function getCheckboxPropsSelector(groupId, autoSelectParents) {
         isChecked: true
       };
     }
-    let selectableDescendentsCount = 0;
-    let selectedDescendentsCount = 0;
+    let selectableDescendantsCount = 0;
+    let selectedDescendantsCount = 0;
     const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
     for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
       const id = sortedRowIds[index];
       if (filteredRowsLookup[id] !== false) {
-        selectableDescendentsCount += 1;
+        selectableDescendantsCount += 1;
         if (rowSelectionLookup[id] !== undefined) {
-          selectedDescendentsCount += 1;
+          selectedDescendantsCount += 1;
         }
       }
     }
     return {
-      isIndeterminate: selectedDescendentsCount > 0 && selectedDescendentsCount < selectableDescendentsCount || selectedDescendentsCount === selectableDescendentsCount && rowSelectionLookup[groupId] === undefined,
-      isChecked: autoSelectParents ? selectedDescendentsCount > 0 : rowSelectionLookup[groupId] === groupId
+      isIndeterminate: selectedDescendantsCount > 0 && (selectedDescendantsCount < selectableDescendantsCount || rowSelectionLookup[groupId] === undefined),
+      isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionLookup[groupId] === groupId
     };
   });
 }

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -10,7 +10,7 @@ exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
 exports.computeRowsUpdates = computeRowsUpdates;
 exports.createRowsInternalCache = void 0;
 exports.getMinimalContentHeight = getMinimalContentHeight;
-exports.updateCacheWithNewRows = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = void 0;
+exports.updateCacheWithNewRows = exports.rowHeightWarning = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getValidRowHeight = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.getRowHeightWarning = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _gridRowsSelector = require("./gridRowsSelector");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
@@ -38,7 +38,7 @@ const buildRootGroup = () => ({
 exports.buildRootGroup = buildRootGroup;
 function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
   if (id == null) {
-    throw new Error(['MUI X: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+    throw new Error(['MUI X: The Data Grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
 }
 const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {
@@ -328,4 +328,18 @@ function computeRowsUpdates(apiRef, updates, getRowId) {
     }
   });
   return nonPinnedRowsUpdates;
-}
+}
+let warnedOnceInvalidRowHeight = false;
+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;
+};
+exports.getValidRowHeight = getValidRowHeight;
+const rowHeightWarning = exports.rowHeightWarning = [`MUI X: The \`rowHeight\` prop should be a number greater than 0.`, `The default value will be used instead.`].join('\n');
+const getRowHeightWarning = exports.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/node/hooks/features/rows/useGridParamsApi.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _domUtils = require("../../../utils/domUtils");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
+var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 class MissingRowIdError extends Error {}
 
 /**
@@ -21,7 +22,7 @@ class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
 exports.MissingRowIdError = MissingRowIdError;
-function useGridParamsApi(apiRef) {
+function useGridParamsApi(apiRef, props) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -39,7 +40,7 @@ function useGridParamsApi(apiRef) {
     return params;
   }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
-    const colDef = apiRef.current.getColumn(field);
+    const colDef = props.unstable_listView ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state) : apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
@@ -68,7 +69,7 @@ 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);

package/node/hooks/features/rows/useGridRowSpanning.js

@@ -211,7 +211,7 @@ const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = (0, _gridRowSpanningUtils.getUnprocessedRange)({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: renderContext.lastRowIndex - 1
+      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;