@mui/x-data-grid 8.3.0 → 8.4.0

package/esm/hooks/utils/useGridPrivateApiContext.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
 export const GridPrivateApiContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridPrivateApiContext.displayName = 'GridPrivateApiContext';
-}
+if (process.env.NODE_ENV !== "production") GridPrivateApiContext.displayName = "GridPrivateApiContext";
 export function useGridPrivateApiContext() {
   const privateApiRef = React.useContext(GridPrivateApiContext);
   if (privateApiRef === undefined) {

package/esm/index.d.ts

@@ -1,5 +1,6 @@
 import { GridApiCommunity } from "./models/api/gridApiCommunity.js";
 import { GridInitialStateCommunity, GridStateCommunity } from "./models/gridStateCommunity.js";
+import "./material/index.js";
 export { useGridApiContext } from "./hooks/utils/useGridApiContext.js";
 export { useGridApiRef } from "./hooks/utils/useGridApiRef.js";
 export { useGridRootProps } from "./hooks/utils/useGridRootProps.js";

package/esm/index.js

@@ -1,10 +1,11 @@
 /**
- * @mui/x-data-grid v8.3.0
+ * @mui/x-data-grid v8.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import "./material/index.js";
 export { useGridApiContext } from "./hooks/utils/useGridApiContext.js";
 export { useGridApiRef } from "./hooks/utils/useGridApiRef.js";
 export { useGridRootProps } from "./hooks/utils/useGridRootProps.js";

package/esm/locales/isIS.js

@@ -58,11 +58,11 @@ const isISGrid = {
   filterPanelInputPlaceholder: 'Síu gildi',
   // Filter operators text
   filterOperatorContains: 'inniheldur',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'inniheldur ekki',
   filterOperatorEquals: 'jafnt og',
-  // filterOperatorDoesNotEqual: 'does not equal',
-  filterOperatorStartsWith: 'byrjar með',
-  filterOperatorEndsWith: 'endar með',
+  filterOperatorDoesNotEqual: 'ekki jafnt og',
+  filterOperatorStartsWith: 'byrjar á',
+  filterOperatorEndsWith: 'endar á',
   filterOperatorIs: 'er líka með',
   filterOperatorNot: 'er ekki líka með',
   filterOperatorAfter: 'eftir',
@@ -80,11 +80,11 @@ const isISGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Inniheldur',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Inniheldur ekki',
   headerFilterOperatorEquals: 'Jafnt og',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  headerFilterOperatorStartsWith: 'Byrjar með',
-  headerFilterOperatorEndsWith: 'Endar með',
+  headerFilterOperatorDoesNotEqual: 'Ekki jafnt og',
+  headerFilterOperatorStartsWith: 'Byrjar á',
+  headerFilterOperatorEndsWith: 'Endar á',
   headerFilterOperatorIs: 'Er jafnt og',
   headerFilterOperatorNot: 'Er ekki jafnt og',
   headerFilterOperatorAfter: 'Eftir',

package/esm/locales/koKR.js

@@ -3,10 +3,9 @@ const koKRGrid = {
   // Root
   noRowsLabel: '행이 없습니다.',
   noResultsOverlayLabel: '결과값이 없습니다.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
-  // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
-
+  noColumnsOverlayLabel: '열이 없습니다',
+  noColumnsOverlayManageColumns: '열 관리하기',
+  emptyPivotOverlayLabel: '행, 열, 값을 추가하여 피벗 테이블을 만듭니다.',
   // Density selector toolbar button text
   toolbarDensity: '행 간격',
   toolbarDensityLabel: '행 간격',
@@ -33,11 +32,9 @@ const koKRGrid = {
   toolbarExportPrint: '프린트',
   toolbarExportExcel: 'Excel로 내보내기',
   // Toolbar pivot button
-  // toolbarPivot: 'Pivot',
-
+  toolbarPivot: '피벗',
   // Toolbar AI Assistant button
-  // toolbarAssistant: 'AI Assistant',
-
+  toolbarAssistant: 'AI 어시스턴트',
   // Columns management text
   columnsManagementSearchTitle: '검색',
   columnsManagementNoColumns: '열이 없습니다.',
@@ -99,15 +96,14 @@ const koKRGrid = {
   'headerFilterOperator>=': '같거나 더 큰',
   'headerFilterOperator<': '더 작은',
   'headerFilterOperator<=': '같거나 더 작은',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: '필터 초기화',
   // Filter values text
   filterValueAny: '아무값',
   filterValueTrue: '참',
   filterValueFalse: '거짓',
   // Column menu text
   columnMenuLabel: '메뉴',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} 열 메뉴`,
   columnMenuShowColumns: '열 표시',
   columnMenuManageColumns: '열 관리',
   columnMenuFilter: '필터',
@@ -156,18 +152,18 @@ const koKRGrid = {
   collapseDetailPanel: '접기',
   // Pagination
   paginationRowsPerPage: '페이지 당 행:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} of ${count !== -1 ? count : `${to} 이상`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `약 ${estimated}` : `${to} 이상`;
+    return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return '첫 번째 페이지로 이동';
@@ -191,61 +187,57 @@ const koKRGrid = {
   aggregationFunctionLabelMax: '최대값',
   aggregationFunctionLabelSize: '크기',
   // Pivot panel
-  // pivotToggleLabel: 'Pivot',
-  // pivotRows: 'Rows',
-  // pivotColumns: 'Columns',
-  // pivotValues: 'Values',
-  // pivotCloseButton: 'Close pivot settings',
-  // pivotSearchButton: 'Search fields',
-  // pivotSearchControlPlaceholder: 'Search fields',
-  // pivotSearchControlLabel: 'Search fields',
-  // pivotSearchControlClear: 'Clear search',
-  // pivotNoFields: 'No fields',
-  // pivotMenuMoveUp: 'Move up',
-  // pivotMenuMoveDown: 'Move down',
-  // pivotMenuMoveToTop: 'Move to top',
-  // pivotMenuMoveToBottom: 'Move to bottom',
-  // pivotMenuRows: 'Rows',
-  // pivotMenuColumns: 'Columns',
-  // pivotMenuValues: 'Values',
-  // pivotMenuOptions: 'Field options',
-  // pivotMenuAddToRows: 'Add to Rows',
-  // pivotMenuAddToColumns: 'Add to Columns',
-  // pivotMenuAddToValues: 'Add to Values',
-  // pivotMenuRemove: 'Remove',
-  // pivotDragToRows: 'Drag here to create rows',
-  // pivotDragToColumns: 'Drag here to create columns',
-  // pivotDragToValues: 'Drag here to create values',
-  // pivotYearColumnHeaderName: '(Year)',
-  // pivotQuarterColumnHeaderName: '(Quarter)',
-
+  pivotToggleLabel: '피벗',
+  pivotRows: '행',
+  pivotColumns: '열',
+  pivotValues: '값',
+  pivotCloseButton: '피벗 설정 닫기',
+  pivotSearchButton: '필드 검색',
+  pivotSearchControlPlaceholder: '필드 검색',
+  pivotSearchControlLabel: '필드 검색',
+  pivotSearchControlClear: '검색 초기화',
+  pivotNoFields: '필드가 없습니다.',
+  pivotMenuMoveUp: '위로 이동',
+  pivotMenuMoveDown: '아래로 이동',
+  pivotMenuMoveToTop: '위로 이동',
+  pivotMenuMoveToBottom: '아래로 이동',
+  pivotMenuRows: '행',
+  pivotMenuColumns: '열',
+  pivotMenuValues: '값',
+  pivotMenuOptions: '필드 옵션',
+  pivotMenuAddToRows: '행에 추가',
+  pivotMenuAddToColumns: '열에 추가',
+  pivotMenuAddToValues: '값에 추가',
+  pivotMenuRemove: '제거',
+  pivotDragToRows: '행 생성',
+  pivotDragToColumns: '열 생성',
+  pivotDragToValues: '값 생성',
+  pivotYearColumnHeaderName: '(년)',
+  pivotQuarterColumnHeaderName: '(분기)',
   // AI Assistant panel
-  // aiAssistantPanelTitle: 'AI Assistant',
-  // aiAssistantPanelClose: 'Close AI Assistant',
-  // aiAssistantPanelNewConversation: 'New conversation',
-  // aiAssistantPanelConversationHistory: 'Conversation history',
-  // aiAssistantPanelEmptyConversation: 'No prompt history',
-  // aiAssistantSuggestions: 'Suggestions',
-
+  aiAssistantPanelTitle: 'AI 어시스턴트',
+  aiAssistantPanelClose: 'AI 어시스턴트 닫기',
+  aiAssistantPanelNewConversation: '새 대화',
+  aiAssistantPanelConversationHistory: '대화 기록',
+  aiAssistantPanelEmptyConversation: '프롬프트 내역이 없습니다.',
+  aiAssistantSuggestions: '제안',
   // Prompt field
   promptFieldLabel: '프롬프트 입력',
   promptFieldPlaceholder: '프롬프트 입력…',
   promptFieldPlaceholderWithRecording: '프롬프트 입력 또는 녹음…',
   promptFieldPlaceholderListening: '녹음 중…',
-  // promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
+  promptFieldSpeechRecognitionNotSupported: '이 브라우저에서 음성 인식을 지원하지 않습니다.',
   promptFieldSend: '전송',
   promptFieldRecord: '녹음',
-  promptFieldStopRecording: '녹음 정지'
-
+  promptFieldStopRecording: '녹음 정지',
   // Prompt
-  // promptRerun: 'Run again',
-  // promptProcessing: 'Processing…',
-  // promptAppliedChanges: 'Applied changes',
-
+  promptRerun: '다시 실행',
+  promptProcessing: '처리 중…',
+  promptAppliedChanges: '변경사항 적용하기',
   // Prompt changes
-  // promptChangeGroupDescription: (column: string) => `Group by ${column}`,
-  // promptChangeAggregationLabel: (column: string, aggregation: string) => `${column} (${aggregation})`,
-  // promptChangeAggregationDescription: (column: string, aggregation: string) => `Aggregate ${column} (${aggregation})`,
+  promptChangeGroupDescription: column => `${column} 값으로 그룹 생성`,
+  promptChangeAggregationLabel: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeAggregationDescription: (column, aggregation) => `${column} (${aggregation}) 집계`,
   // promptChangeFilterLabel: (column: string, operator: string, value: string) => {
   //   if (operator === 'is any of') {
   //     return `${column} is any of: ${value}`;
@@ -258,13 +250,13 @@ const koKRGrid = {
   //   }
   //   return `Filter where ${column} ${operator} ${value}`;
   // },
-  // promptChangeSortDescription: (column: string, direction: string) => `Sort by ${column} (${direction})`,
-  // promptChangePivotEnableLabel: 'Pivot',
-  // promptChangePivotEnableDescription: 'Enable pivot',
-  // promptChangePivotColumnsLabel: (count: number) => `Columns (${count})`,
-  // promptChangePivotColumnsDescription: (column: string, direction: string) => `${column}${direction ? ` (${direction})` : ''}`,
-  // promptChangePivotRowsLabel: (count: number) => `Rows (${count})`,
-  // promptChangePivotValuesLabel: (count: number) => `Values (${count})`,
-  // promptChangePivotValuesDescription: (column: string, aggregation: string) => `${column} (${aggregation})`,
+  promptChangeSortDescription: (column, direction) => `${column} (${direction}) 기준으로 정렬`,
+  promptChangePivotEnableLabel: '피벗',
+  promptChangePivotEnableDescription: '피벗 활성화',
+  promptChangePivotColumnsLabel: count => `(${count}) 개의 열`,
+  promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
+  promptChangePivotRowsLabel: count => `(${count}) 개의 행`,
+  promptChangePivotValuesLabel: count => `(${count}) 개의 값`,
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`
 };
 export const koKR = getGridLocalization(koKRGrid);

package/esm/locales/nbNO.js

@@ -3,8 +3,8 @@ const nbNOGrid = {
   // Root
   noRowsLabel: 'Ingen rader',
   noResultsOverlayLabel: 'Fant ingen resultat.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: 'Ingen kolonner',
+  noColumnsOverlayManageColumns: 'Velg kolonner',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -43,8 +43,7 @@ const nbNOGrid = {
   columnsManagementNoColumns: 'Ingen kolonner',
   columnsManagementShowHideAllText: 'Vis/skjul alle',
   columnsManagementReset: 'Nullstill',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Tøm',
   // Filter panel text
   filterPanelAddFilter: 'Legg til filter',
   filterPanelRemoveAll: 'Fjern alle',
@@ -58,9 +57,9 @@ const nbNOGrid = {
   filterPanelInputPlaceholder: 'Filter verdi',
   // Filter operators text
   filterOperatorContains: 'inneholder',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'inneholder ikke',
   filterOperatorEquals: 'er lik',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'er ikke lik',
   filterOperatorStartsWith: 'starter med',
   filterOperatorEndsWith: 'slutter med',
   filterOperatorIs: 'er',
@@ -80,9 +79,9 @@ const nbNOGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Inneholder',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
-  headerFilterOperatorEquals: 'Lik',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotContain: 'Inneholder ikke',
+  headerFilterOperatorEquals: 'Er lik',
+  headerFilterOperatorDoesNotEqual: 'Er ikke lik',
   headerFilterOperatorStartsWith: 'Starter på',
   headerFilterOperatorEndsWith: 'Slutter på',
   headerFilterOperatorIs: 'Er',
@@ -100,15 +99,14 @@ const nbNOGrid = {
   'headerFilterOperator>=': 'Større enn eller lik',
   'headerFilterOperator<': 'Mindre enn',
   'headerFilterOperator<=': 'Mindre enn eller lik',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'Tøm filter',
   // Filter values text
   filterValueAny: 'noen',
   filterValueTrue: 'sant',
   filterValueFalse: 'usant',
   // Column menu text
   columnMenuLabel: 'Meny',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} kolonnemeny`,
   columnMenuShowColumns: 'Vis kolonner',
   columnMenuManageColumns: 'Administrer kolonner',
   columnMenuFilter: 'Filter',
@@ -157,18 +155,18 @@ const nbNOGrid = {
   collapseDetailPanel: 'Kollaps',
   // Pagination
   paginationRowsPerPage: 'Rader per side:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} av ${count !== -1 ? count : `mer enn ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `omtrent ${estimated}` : `mer enn ${to}`;
+    return `${from}–${to} av ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Gå til første side';

package/esm/material/variables.js

@@ -93,5 +93,10 @@ function removeOpacity(color) {
   return setOpacity(color, 1);
 }
 function formatFont(font) {
+  // Accounts for disabled typography variants
+  // See: https://github.com/mui/mui-x/issues/17812
+  if (!font) {
+    return undefined;
+  }
   return `${font.fontWeight} ${font.fontSize} / ${font.lineHeight} ${font.fontFamily}`;
 }

package/esm/models/api/gridRowSelectionApi.d.ts

@@ -1,5 +1,6 @@
 import type { GridRowId, GridRowModel } from "../gridRows.js";
 import type { GridRowSelectionModel } from "../gridRowSelectionModel.js";
+import { GridControlledStateReasonLookup } from "../events/index.js";
 /**
  * The selection API interface that is available in the grid [[apiRef]].
  */
@@ -34,9 +35,10 @@ export interface GridRowSelectionApi {
    *
    * ⚠️ Caution: `setRowSelectionModel` doesn't apply the selection propagation automatically.
    * Pass model returned by API method `getPropagatedRowSelectionModel` instead to apply the selection propagation.
-   * @param {gridRowSelectionModel} rowSelectionModel The new row selection model
+   * @param {gridRowSelectionModel} rowSelectionModel The new row selection model.
+   * @param {string} reason The reason for the state change.
    */
-  setRowSelectionModel: (rowSelectionModel: GridRowSelectionModel) => void;
+  setRowSelectionModel: (rowSelectionModel: GridRowSelectionModel, reason?: GridControlledStateReasonLookup['rowSelection']) => void;
 }
 export interface GridRowMultiSelectionApi {
   /**

package/esm/models/events/gridEventLookup.d.ts

@@ -195,6 +195,15 @@ export interface GridColumnHeaderEventLookup {
     params: GridColumnHeaderParams;
     event: React.DragEvent<HTMLElement>;
   };
+  /**
+   * Fired when the dragging of a column header ends.
+   * Same as `columnHeaderDragEnd`, but also fires when the DOM element is unmounted.
+   * @ignore - do not document.
+   */
+  columnHeaderDragEndNative: {
+    params: GridColumnHeaderParams;
+    event: DragEvent;
+  };
   /**
    * Fired when a `dblclick` DOM event happens in the column header separator.
    * @ignore - do not document.
@@ -400,6 +409,7 @@ export interface GridControlledStateReasonLookup {
   filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState' | 'removeAllFilterItems';
   pagination: 'setPaginationModel' | 'stateRestorePreProcessing';
   rows: 'addSkeletonRows';
+  rowSelection: 'singleRowSelection' | 'multipleRowsSelection';
 }
 export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridHeaderFilterEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
   /**

package/esm/utils/css/context.js

@@ -9,6 +9,7 @@ const CSSVariablesContext = /*#__PURE__*/React.createContext({
     href: "/unset"
   })
 });
+if (process.env.NODE_ENV !== "production") CSSVariablesContext.displayName = "CSSVariablesContext";
 export function useCSSVariablesClass() {
   return React.useContext(CSSVariablesContext).className;
 }
@@ -49,7 +50,7 @@ export function GridCSSVariablesContext(props) {
 function variablesToString(variables) {
   let output = '';
   for (const key in variables) {
-    if (Object.hasOwn(variables, key)) {
+    if (Object.hasOwn(variables, key) && variables[key] !== undefined) {
       output += `${key}:${variables[key]};`;
     }
   }

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -83,7 +83,7 @@ const useGridColumnHeaders = props => {
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnResizeStart', handleColumnResizeStart);
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnResizeStop', handleColumnResizeStop);
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
-  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEndNative', handleColumnReorderStop);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
@@ -121,6 +121,7 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getFillers.displayName = "getFillers";
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -189,6 +190,7 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getColumnHeadersRow.displayName = "getColumnHeadersRow";
   const getColumnGroupHeaders = ({
     depth,
     params

package/hooks/features/columns/gridColumnsUtils.js

@@ -318,13 +318,21 @@ function getFirstNonSpannedColumnToRender({
   visibleRows
 }) {
   let firstNonSpannedColumnToRender = firstColumnToRender;
-  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
-    const row = visibleRows[i];
-    if (row) {
-      const rowId = visibleRows[i].id;
-      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
-      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
-        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+  let foundStableColumn = false;
+
+  // Keep checking columns until we find one that's not spanned in any visible row
+  while (!foundStableColumn && firstNonSpannedColumnToRender >= 0) {
+    foundStableColumn = true;
+    for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+      const row = visibleRows[i];
+      if (row) {
+        const rowId = visibleRows[i].id;
+        const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstNonSpannedColumnToRender);
+        if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan && cellColSpanInfo.leftVisibleCellIndex < firstNonSpannedColumnToRender) {
+          firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+          foundStableColumn = false;
+          break; // Check the new column index against the visible rows, because it might be spanned
+        }
       }
     }
   }

package/hooks/features/overlays/useGridOverlays.js

@@ -68,6 +68,7 @@ const useGridOverlays = () => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, overlayProps))
     }));
   };
+  if (process.env.NODE_ENV !== "production") getOverlay.displayName = "getOverlay";
   return {
     getOverlay,
     overlaysProps

package/hooks/features/pagination/useGridPaginationModel.js

@@ -147,7 +147,7 @@ const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const maximumPageSizeWithoutScrollBar = Math.max(1, Math.floor(dimensions.viewportInnerSize.height / rowHeight));
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   const handleRowCountChange = React.useCallback(newRowCount => {

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -101,7 +101,7 @@ const useGridRowSelection = (apiRef, props) => {
   /*
    * API METHODS
    */
-  const setRowSelectionModel = React.useCallback(model => {
+  const setRowSelectionModel = React.useCallback((model, reason) => {
     if (props.signature === _signature.GridSignature.DataGrid && !canHaveMultipleSelection && (model.type !== 'include' || model.ids.size > 1)) {
       throw new Error(['MUI X: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
@@ -110,7 +110,7 @@ const useGridRowSelection = (apiRef, props) => {
       logger.debug(`Setting selection model`);
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         rowSelection: props.rowSelection ? model : emptyModel
-      }));
+      }), reason);
     }
   }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   const isRowSelected = React.useCallback(id => {
@@ -151,7 +151,7 @@ const useGridRowSelection = (apiRef, props) => {
           (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
         }
       }
-      apiRef.current.setRowSelectionModel(newSelectionModel);
+      apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
     } else {
       logger.debug(`Toggling selection for row ${id}`);
       const selectionModel = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef);
@@ -177,7 +177,7 @@ const useGridRowSelection = (apiRef, props) => {
       }
       const isSelectionValid = newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2 || canHaveMultipleSelection;
       if (isSelectionValid) {
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
       }
     }
   }, [apiRef, logger, applyAutoSelection, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
@@ -244,7 +244,7 @@ const useGridRowSelection = (apiRef, props) => {
     }
     const isSelectionValid = newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2 || canHaveMultipleSelection;
     if (isSelectionValid) {
-      apiRef.current.setRowSelectionModel(newSelectionModel);
+      apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
     }
   }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, props.rowSelection]);
   const getPropagatedRowSelectionModel = React.useCallback(inputSelectionModel => {
@@ -369,7 +369,7 @@ const useGridRowSelection = (apiRef, props) => {
           apiRef.current.selectRows(Array.from(newSelectionModel.ids), true, true);
         }
       } else {
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
       }
     }
   }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree, getRowsToBeSelected]);
@@ -436,7 +436,7 @@ const useGridRowSelection = (apiRef, props) => {
   const toggleAllRows = React.useCallback(value => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
     const quickFilterModel = (0, _gridFilterSelector.gridQuickFilterValuesSelector)(apiRef);
-    const hasFilters = filterModel.items.length > 0 || (quickFilterModel?.length || 0) > 0;
+    const hasFilters = filterModel.items.length > 0 || quickFilterModel?.some(val => val.length);
     if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && applyAutoSelection && !hasFilters) {
       apiRef.current.setRowSelectionModel({
         type: value ? 'exclude' : 'include',

package/hooks/features/rowSelection/utils.d.ts

@@ -5,7 +5,10 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import { type GridRowSelectionPropagation } from "../../../models/gridRowSelectionModel.js";
 import { type RowSelectionManager } from "../../../models/gridRowSelectionManager.js";
 export declare const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation;
-export declare function getCheckboxPropsSelector(groupId: GridRowId, autoSelectParents: boolean): import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity.js").GridStateCommunity, RowSelectionManager, {
+export declare const checkboxPropsSelector: import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity.js").GridStateCommunity, {
+  groupId: GridRowId;
+  autoSelectParents: boolean;
+}, {
   isIndeterminate: boolean;
   isChecked: boolean;
 }>;