@mui/x-data-grid 7.21.0 → 7.22.1

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_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']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_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/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -231,7 +231,6 @@ const useGridColumnHeaders = props => {
       return null;
     }
     const {
-      renderedColumns,
       firstColumnToRender,
       lastColumnToRender
     } = columnsToRender;
@@ -300,7 +299,7 @@ const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: renderedColumns.length,
+        sectionLength: rowStructure.length,
         gridHasFiller: gridHasFiller
       }, index);
     });

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridKeyboardNavigation = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _constants = require("../../../internals/constants");
+var _gridRowGroupingUtils = require("../../../internals/utils/gridRowGroupingUtils");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -16,7 +18,6 @@ var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectio
 var _gridClasses = require("../../../constants/gridClasses");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
-var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
 var _focus = require("../focus");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
@@ -460,13 +461,11 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case ' ':
         {
           const field = params.field;
-          if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+          if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
             break;
           }
           const colDef = params.colDef;
-          if (colDef &&
-          // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
-          colDef.field === '__tree_data_group__') {
+          if (colDef && (colDef.field === _constants.GRID_TREE_DATA_GROUPING_FIELD || (0, _gridRowGroupingUtils.isGroupingColumn)(colDef.field))) {
             break;
           }
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {

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

@@ -9,12 +9,13 @@ exports.listViewStateInitializer = void 0;
 exports.useGridListView = useGridListView;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
 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, {
+  listViewColumn: props.unstable_listColumn ? (0, _extends2.default)({}, props.unstable_listColumn, {
     computedWidth: getListColumnWidth(apiRef)
-  })
+  }) : undefined
 });
 exports.listViewStateInitializer = listViewStateInitializer;
 function useGridListView(apiRef, props) {
@@ -58,6 +59,11 @@ function useGridListView(apiRef, props) {
       });
     }
   }, [apiRef, props.unstable_listColumn]);
+  React.useEffect(() => {
+    if (props.unstable_listView && !props.unstable_listColumn) {
+      (0, _warning.warnOnce)(['MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.', 'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.', 'For more details, see https://mui.com/x/react-data-grid/list-view/']);
+    }
+  }, [props.unstable_listView, 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

@@ -21,7 +21,7 @@ var _colDef = require("../../../colDef");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
+var _constants = require("../../../internals/constants");
 var _gridClasses = require("../../../constants/gridClasses");
 var _domUtils = require("../../../utils/domUtils");
 var _utils = require("./utils");
@@ -328,7 +328,7 @@ const useGridRowSelection = (apiRef, props) => {
       // click on checkbox should not trigger row selection
       return;
     }
-    if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+    if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
       // click to open the detail panel should not select the row
       return;
     }

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

@@ -9,11 +9,13 @@ exports.useGridRowSpanning = exports.rowSpanningStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _constants = require("../../../internals/constants");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
+var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -23,7 +25,7 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+const skippedFields = new Set([_gridCheckboxSelectionColDef.GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD]);
 /**
  * Default number of rows to process during state initialization to avoid flickering.
  * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without

package/node/hooks/features/scroll/useGridScroll.js

@@ -54,8 +54,6 @@ const useGridScroll = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
-  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef.current.state);
@@ -109,20 +107,18 @@ const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.unstable_listView]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
-      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
-      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

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

@@ -389,10 +389,11 @@ const useGridVirtualScroller = () => {
   const contentSize = React.useMemo(() => {
     const size = {
       width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      height: contentHeight
+      flexBasis: contentHeight,
+      flexShrink: 0
     };
     if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.height = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
+      size.flexBasis = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
     }
     return size;
   }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);

package/node/index.js

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

package/node/internals/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRID_TREE_DATA_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = void 0;
+const GRID_TREE_DATA_GROUPING_FIELD = exports.GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+const GRID_DETAIL_PANEL_TOGGLE_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/node/internals/index.js

@@ -879,4 +879,16 @@ Object.keys(_utils5).forEach(function (key) {
       return _utils5[key];
     }
   });
+});
+var _constants = require("./constants");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constants[key];
+    }
+  });
 });

package/node/internals/utils/gridRowGroupingUtils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isGroupingColumn = exports.getRowGroupingCriteriaFromGroupingField = void 0;
+var _constants = require("../constants");
+const getRowGroupingCriteriaFromGroupingField = groupingColDefField => {
+  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+  if (!match) {
+    return null;
+  }
+  return match[1];
+};
+exports.getRowGroupingCriteriaFromGroupingField = getRowGroupingCriteriaFromGroupingField;
+const isGroupingColumn = field => field === _constants.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD || getRowGroupingCriteriaFromGroupingField(field) !== null;
+exports.isGroupingColumn = isGroupingColumn;

package/node/internals/utils/index.js

@@ -35,4 +35,15 @@ Object.keys(_propValidation).forEach(function (key) {
       return _propValidation[key];
     }
   });
+});
+var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
+Object.keys(_gridRowGroupingUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridRowGroupingUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridRowGroupingUtils[key];
+    }
+  });
 });

package/node/joy/joySlots.js

@@ -9,7 +9,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _Badge = _interopRequireDefault(require("@mui/joy/Badge"));
 var _Checkbox = _interopRequireDefault(require("@mui/joy/Checkbox"));
+var _Divider = _interopRequireDefault(require("@mui/joy/Divider"));
 var _Input = _interopRequireDefault(require("@mui/joy/Input"));
 var _FormControl = _interopRequireDefault(require("@mui/joy/FormControl"));
 var _FormLabel = _interopRequireDefault(require("@mui/joy/FormLabel"));
@@ -28,13 +30,14 @@ var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _hooks = require("../hooks");
 var _GridOverlay = require("../components/containers/GridOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
-  _excluded2 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
-  _excluded3 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
-  _excluded4 = ["color", "size", "sx", "touchRippleRef"],
-  _excluded5 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
-  _excluded6 = ["native"],
-  _excluded7 = ["shrink", "variant", "sx"];
+const _excluded = ["slotProps", "variant", "color", "sx"],
+  _excluded2 = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
+  _excluded3 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
+  _excluded4 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
+  _excluded5 = ["color", "size", "sx", "touchRippleRef"],
+  _excluded6 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
+  _excluded7 = ["native"],
+  _excluded8 = ["shrink", "variant", "sx"];
 function convertColor(color) {
   if (color === 'secondary') {
     return 'primary';
@@ -66,14 +69,27 @@ function convertVariant(variant, defaultVariant = 'plain') {
     filled: 'soft'
   }[variant] || defaultVariant;
 }
-const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      color,
+      sx
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, (0, _extends2.default)({}, props, {
+    color: convertColor(color),
+    variant: "plain",
+    sx: sx,
+    ref: ref
+  }));
+});
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
       inputProps,
       onChange,
       checked,
       inputRef
-    } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    } = _ref2,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, props, {
     slotProps: {
       input: (0, _extends2.default)({}, inputProps, {
@@ -85,7 +101,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: onChange
   }));
 });
-const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const TextField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
       onChange,
       label,
@@ -95,8 +111,8 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       type,
       size,
       variant
-    } = _ref2,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
+    } = _ref3,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded3);
   const rootRef = (0, _utils.unstable_useForkRef)(ref, props.InputProps?.ref);
   const inputForkRef = (0, _utils.unstable_useForkRef)(inputRef, props?.inputProps?.ref);
   const {
@@ -124,7 +140,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     })]
   });
 });
-const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref4, ref) {
   let {
       startIcon,
       color,
@@ -132,8 +148,8 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
       size,
       sx,
       variant
-    } = _ref3,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded3);
+    } = _ref4,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded4);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({}, props, {
     size: convertSize(size),
     color: convertColor(color),
@@ -144,13 +160,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
     sx: sx
   }));
 });
-const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref5, ref) {
   let {
       color,
       size,
       sx
-    } = _ref4,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded4);
+    } = _ref5,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref5, _excluded5);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, props, {
     size: convertSize(size),
     color: convertColor(color) ?? 'neutral',
@@ -159,7 +175,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref)
     sx: sx
   }));
 });
-const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
       open,
       onOpen,
@@ -171,8 +187,8 @@ const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       MenuProps,
       inputRef,
       labelId
-    } = _ref5,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref5, _excluded5);
+    } = _ref6,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref6, _excluded6);
   const handleChange = (event, newValue) => {
     if (event && onChange) {
       // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300
@@ -223,17 +239,17 @@ const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     }
   }));
 });
-const Option = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  let props = (0, _objectWithoutPropertiesLoose2.default)(_ref6, _excluded6);
+const Option = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let props = (0, _objectWithoutPropertiesLoose2.default)(_ref7, _excluded7);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, (0, _extends2.default)({}, props, {
     ref: ref
   }));
 });
-const InputLabel = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const InputLabel = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
       sx
-    } = _ref7,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref7, _excluded7);
+    } = _ref8,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref8, _excluded8);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, (0, _extends2.default)({}, props, {
     ref: ref,
     sx: sx
@@ -359,7 +375,9 @@ const LoadingOverlay = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 const joySlots = (0, _extends2.default)({}, _icons.default, {
+  baseBadge: Badge,
   baseCheckbox: Checkbox,
+  baseDivider: _Divider.default,
   baseTextField: TextField,
   baseButton: Button,
   baseIconButton: IconButton,

package/node/locales/daDK.js

@@ -39,8 +39,7 @@ const daDKGrid = {
   columnsManagementSearchTitle: 'Søg',
   columnsManagementNoColumns: 'Ingen søjler',
   columnsManagementShowHideAllText: 'Vis/Skjul Alle',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Nulstil',
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelRemoveAll: 'Fjern alle',
@@ -54,9 +53,9 @@ const daDKGrid = {
   filterPanelInputPlaceholder: 'Filterværdi',
   // Filter operators text
   filterOperatorContains: 'indeholder',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'indeholder ikke',
   filterOperatorEquals: 'lig med',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'ikke lig med',
   filterOperatorStartsWith: 'begynder med',
   filterOperatorEndsWith: 'ender med',
   filterOperatorIs: 'er lig med',
@@ -76,9 +75,9 @@ const daDKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Indeholder',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Indeholder ikke',
   headerFilterOperatorEquals: 'Lig med',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Ikke lig med',
   headerFilterOperatorStartsWith: 'Begynder med',
   headerFilterOperatorEndsWith: 'Ender med',
   headerFilterOperatorIs: 'Er lig med',