@mui/x-data-grid 7.20.0 → 7.22.0

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

@@ -9,11 +9,12 @@ exports.useGridColumnMenuSlots = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 const _excluded = ["displayOrder"];
 const useGridColumnMenuSlots = props => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     defaultSlots,
     defaultSlotProps,
@@ -59,8 +60,8 @@ const useGridColumnMenuSlots = props => {
         const customProps = (0, _objectWithoutPropertiesLoose2.default)(processedComponentProps, _excluded);
         itemProps = (0, _extends2.default)({}, itemProps, customProps);
       }
-      return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [_Divider.default, {}]] : [...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]);
 };
 exports.useGridColumnMenuSlots = useGridColumnMenuSlots;

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/focus/useGridFocus.js

@@ -332,18 +332,33 @@ const useGridFocus = (apiRef, props) => {
   const handleRowSet = React.useCallback(() => {
     const cell = (0, _gridFocusStateSelector.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 = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef)?.id;
+      let nextRowId = null;
+      if (typeof lastFocusedRowId !== 'undefined') {
+        const lastFocusedRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(lastFocusedRowId);
+        const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
+          pagination: props.pagination,
+          paginationMode: props.paginationMode
+        });
+        const nextRow = currentPage.rows[(0, _utils2.clamp)(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
+        nextRowId = nextRow.id ?? null;
+      }
       apiRef.current.setState(state => (0, _extends2.default)({}, 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 = (0, _utils.unstable_useEventCallback)(() => {
     const currentFocusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     if (!currentFocusedCell) {

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/pagination/gridPaginationSelector.js

@@ -8,6 +8,8 @@ var _createSelector = require("../../../utils/createSelector");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridPaginationUtils = require("./gridPaginationUtils");
+const ALL_RESULTS_PAGE_VALUE = -1;
+
 /**
  * @category Pagination
  * @ignore - do not document.
@@ -58,7 +60,7 @@ const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelecto
 const gridPaginationRowRangeSelector = exports.gridPaginationRowRangeSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.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/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);