@mui/x-data-grid 7.20.0 → 7.21.0

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/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);

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

@@ -65,7 +65,7 @@ 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/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");
@@ -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);