@mui/x-data-grid 8.2.0 → 8.3.1

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.2.0
+ * @mui/x-data-grid v8.3.1
  *
  * @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/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/index.js

@@ -9,19 +9,19 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded7 = ["material"],
   _excluded8 = ["material"],
   _excluded9 = ["material"],
+  _excluded0 = ["material"],
+  _excluded1 = ["material"],
   _excluded10 = ["material"],
-  _excluded11 = ["material"],
+  _excluded11 = ["material", "label", "className"],
   _excluded12 = ["material"],
-  _excluded13 = ["material", "label", "className"],
-  _excluded14 = ["material"],
-  _excluded15 = ["inert", "iconStart", "iconEnd", "children", "material"],
-  _excluded16 = ["slotProps", "material"],
-  _excluded17 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
-  _excluded18 = ["key"],
-  _excluded19 = ["inputProps", "InputProps", "InputLabelProps"],
-  _excluded20 = ["slotProps", "material"],
-  _excluded21 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
-  _excluded22 = ["native"];
+  _excluded13 = ["inert", "iconStart", "iconEnd", "children", "material"],
+  _excluded14 = ["slotProps", "material"],
+  _excluded15 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
+  _excluded16 = ["key"],
+  _excluded17 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded18 = ["slotProps", "material"],
+  _excluded19 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
+  _excluded20 = ["native"];
 import * as React from 'react';
 import clsx from 'clsx';
 import useForkRef from '@mui/utils/useForkRef';
@@ -327,7 +327,7 @@ const BaseIconButton = forwardRef(function BaseIconButton(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded10);
+    rest = _objectWithoutPropertiesLoose(props, _excluded0);
   return /*#__PURE__*/_jsx(MUIIconButton, _extends({}, rest, material, {
     ref: ref
   }));
@@ -336,7 +336,7 @@ const BaseTooltip = forwardRef(function BaseTooltip(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded11);
+    rest = _objectWithoutPropertiesLoose(props, _excluded1);
   return /*#__PURE__*/_jsx(MUITooltip, _extends({}, rest, material, {
     ref: ref
   }));
@@ -345,7 +345,7 @@ const BaseSkeleton = forwardRef(function BaseSkeleton(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded12);
+    rest = _objectWithoutPropertiesLoose(props, _excluded10);
   return /*#__PURE__*/_jsx(MUISkeleton, _extends({}, rest, material, {
     ref: ref
   }));
@@ -356,7 +356,7 @@ const BaseSwitch = forwardRef(function BaseSwitch(props, ref) {
       label,
       className
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded13);
+    rest = _objectWithoutPropertiesLoose(props, _excluded11);
   if (!label) {
     return /*#__PURE__*/_jsx(MUISwitch, _extends({}, rest, material, {
       className: className,
@@ -375,7 +375,7 @@ const BaseMenuList = forwardRef(function BaseMenuList(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded14);
+    rest = _objectWithoutPropertiesLoose(props, _excluded12);
   return /*#__PURE__*/_jsx(MUIMenuList, _extends({}, rest, material, {
     ref: ref
   }));
@@ -388,7 +388,7 @@ function BaseMenuItem(props) {
       children,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded15);
+    other = _objectWithoutPropertiesLoose(props, _excluded13);
   if (inert) {
     other.disableRipple = true;
   }
@@ -407,7 +407,7 @@ function BaseTextField(props) {
       slotProps,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded16);
+    rest = _objectWithoutPropertiesLoose(props, _excluded14);
   return /*#__PURE__*/_jsx(MUITextField, _extends({
     variant: "outlined"
   }, rest, material, {
@@ -434,7 +434,7 @@ function BaseAutocomplete(props) {
       slotProps,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded17);
+    rest = _objectWithoutPropertiesLoose(props, _excluded15);
   return /*#__PURE__*/_jsx(MUIAutocomplete, _extends({
     id: id,
     multiple: multiple,
@@ -451,7 +451,7 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded18);
+        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded16);
       return /*#__PURE__*/_jsx(MUIChip, _extends({
         variant: "outlined",
         size: "small",
@@ -464,7 +464,7 @@ function BaseAutocomplete(props) {
           InputProps,
           InputLabelProps
         } = params,
-        inputRest = _objectWithoutPropertiesLoose(params, _excluded19);
+        inputRest = _objectWithoutPropertiesLoose(params, _excluded17);
       return /*#__PURE__*/_jsx(MUITextField, _extends({}, inputRest, {
         label: label,
         placeholder: placeholder,
@@ -488,7 +488,7 @@ function transformInputProps(props, wrapAdornments = true) {
       slotProps,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded20);
+    rest = _objectWithoutPropertiesLoose(props, _excluded18);
   const result = rest;
   if (wrapAdornments) {
     if (result.startAdornment) {
@@ -537,7 +537,7 @@ function BasePopper(props) {
       placement,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded21);
+    rest = _objectWithoutPropertiesLoose(props, _excluded19);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -635,7 +635,7 @@ function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded22);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded20);
   if (native) {
     return /*#__PURE__*/_jsx("option", _extends({}, props));
   }

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

@@ -400,6 +400,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/cleanupTracking/TimerBasedCleanupTracking.d.ts

@@ -1,6 +1,6 @@
 import { CleanupTracking, UnregisterToken, UnsubscribeFn } from "./CleanupTracking.js";
 export declare class TimerBasedCleanupTracking implements CleanupTracking {
-  timeouts?: Map<number, NodeJS.Timeout> | undefined;
+  timeouts?: Map<number, number> | undefined;
   cleanupTimeout: number;
   constructor(timeout?: number);
   register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;

package/esm/utils/css/context.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLASSNAME_PREFIX = 'MuiDataGridVariables';
@@ -25,19 +26,21 @@ export function GridPortalWrapper({
 }
 export function GridCSSVariablesContext(props) {
   const config = useGridConfiguration();
+  const rootProps = useGridRootProps();
   const description = config.hooks.useCSSVariables();
   const context = React.useMemo(() => {
     const className = `${CLASSNAME_PREFIX}-${description.id}`;
     const cssString = `.${className}{${variablesToString(description.variables)}}`;
     const tag = /*#__PURE__*/_jsx("style", {
       href: `/${className}`,
+      nonce: rootProps.nonce,
       children: cssString
     });
     return {
       className,
       tag
     };
-  }, [description]);
+  }, [rootProps.nonce, description]);
   return /*#__PURE__*/_jsx(CSSVariablesContext.Provider, {
     value: context,
     children: props.children

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/editing/useGridCellEditing.js

@@ -13,6 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _warning = require("@mui/x-internals/warning");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -338,7 +339,7 @@ const useGridCellEditing = (apiRef, props) => {
     }
     const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field);
     if (props.dataSource?.updateRow) {
-      if (row[field] === rowUpdate[field]) {
+      if ((0, _isDeepEqual.isDeepEqual)(row, rowUpdate)) {
         finishCellEditMode();
         return;
       }

package/hooks/features/editing/useGridRowEditing.js

@@ -321,8 +321,9 @@ const useGridRowEditing = (apiRef, props) => {
       initialValue
     } = params;
     const row = apiRef.current.getRow(id);
-    const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
-    const newProps = columnFields.reduce((acc, field) => {
+    const columns = (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef);
+    const newProps = columns.reduce((acc, col) => {
+      const field = col.field;
       const cellParams = apiRef.current.getCellParams(id, field);
       if (!cellParams.isEditable) {
         return acc;
@@ -339,7 +340,7 @@ const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: !!column.preProcessEditCellProps && deleteValue
+        isProcessingProps: column.editable && !!column.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -348,8 +349,8 @@ const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-    columnFields.filter(field => !!apiRef.current.getColumn(field).preProcessEditCellProps && deleteValue).forEach(field => {
-      const column = apiRef.current.getColumn(field);
+    columns.filter(column => column.editable && !!column.preProcessEditCellProps && deleteValue).forEach(column => {
+      const field = column.field;
       const value = apiRef.current.getCellValue(id, field);
       const newValue = deleteValue ? (0, _utils2.getDefaultCellValue)(column) : initialValue ?? value;
       Promise.resolve(column.preProcessEditCellProps({