@mui/x-data-grid 8.3.0 → 8.4.0

package/hooks/features/rowSelection/utils.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findRowsToSelect = exports.findRowsToDeselect = exports.ROW_SELECTION_PROPAGATION_DEFAULT = void 0;
-exports.getCheckboxPropsSelector = getCheckboxPropsSelector;
+exports.findRowsToSelect = exports.findRowsToDeselect = exports.checkboxPropsSelector = exports.ROW_SELECTION_PROPAGATION_DEFAULT = void 0;
 exports.isMultipleRowSelectionEnabled = isMultipleRowSelectionEnabled;
 var _signature = require("../../../constants/signature");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
@@ -35,41 +34,42 @@ function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   }
   return descendants;
 }
-
-// TODO v8: Use `createSelectorV8`
-function getCheckboxPropsSelector(groupId, autoSelectParents) {
-  return (0, _createSelector.createSelector)(_gridRowsSelector.gridRowTreeSelector, _gridSortingSelector.gridSortedRowIdsSelector, _gridFilterSelector.gridFilteredRowsLookupSelector, _gridRowSelectionSelector.gridRowSelectionManagerSelector, (rowTree, sortedRowIds, filteredRowsLookup, rowSelectionManager) => {
-    const groupNode = rowTree[groupId];
-    if (!groupNode || groupNode.type !== 'group') {
-      return {
-        isIndeterminate: false,
-        isChecked: rowSelectionManager.has(groupId)
-      };
+const checkboxPropsSelector = exports.checkboxPropsSelector = (0, _createSelector.createSelector)(_gridRowsSelector.gridRowTreeSelector, _gridFilterSelector.gridFilteredRowsLookupSelector, _gridRowSelectionSelector.gridRowSelectionManagerSelector, (rowTree, filteredRowsLookup, rowSelectionManager, {
+  groupId,
+  autoSelectParents
+}) => {
+  const groupNode = rowTree[groupId];
+  if (!groupNode || groupNode.type !== 'group' || rowSelectionManager.has(groupId)) {
+    return {
+      isIndeterminate: false,
+      isChecked: rowSelectionManager.has(groupId)
+    };
+  }
+  let hasSelectedDescendant = false;
+  let hasUnSelectedDescendant = false;
+  const traverseDescendants = itemToTraverseId => {
+    if (filteredRowsLookup[itemToTraverseId] === false ||
+    // Perf: Skip checking the rest of the descendants if we already
+    // know that there is a selected and an unselected descendant
+    hasSelectedDescendant && hasUnSelectedDescendant) {
+      return;
     }
-    if (rowSelectionManager.has(groupId)) {
-      return {
-        isIndeterminate: false,
-        isChecked: true
-      };
+    const node = rowTree[itemToTraverseId];
+    if (node?.type === 'group') {
+      node.children.forEach(traverseDescendants);
     }
-    let selectableDescendantsCount = 0;
-    let selectedDescendantsCount = 0;
-    const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
-    for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
-      const id = sortedRowIds[index];
-      if (filteredRowsLookup[id] !== false) {
-        selectableDescendantsCount += 1;
-        if (rowSelectionManager.has(id)) {
-          selectedDescendantsCount += 1;
-        }
-      }
+    if (rowSelectionManager.has(itemToTraverseId)) {
+      hasSelectedDescendant = true;
+    } else {
+      hasUnSelectedDescendant = true;
     }
-    return {
-      isIndeterminate: selectedDescendantsCount > 0 && (selectedDescendantsCount < selectableDescendantsCount || !rowSelectionManager.has(groupId)),
-      isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionManager.has(groupId)
-    };
-  });
-}
+  };
+  traverseDescendants(groupId);
+  return {
+    isIndeterminate: hasSelectedDescendant && hasUnSelectedDescendant,
+    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false
+  };
+});
 function isMultipleRowSelectionEnabled(props) {
   if (props.signature === _signature.GridSignature.DataGrid) {
     // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -229,12 +229,13 @@ const useGridVirtualScroller = () => {
     scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
-
-    // Prevents batching render context changes
-    ReactDOM.flushSync(() => {
-      updateRenderContext(nextRenderContext);
-    });
-    scrollTimeout.start(1000, triggerUpdateRenderContext);
+    if (!areRenderContextsEqual(nextRenderContext, renderContext)) {
+      // Prevents batching render context changes
+      ReactDOM.flushSync(() => {
+        updateRenderContext(nextRenderContext);
+      });
+      scrollTimeout.start(1000, triggerUpdateRenderContext);
+    }
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {

package/hooks/utils/useGridPrivateApiContext.js

@@ -8,9 +8,7 @@ exports.GridPrivateApiContext = void 0;
 exports.useGridPrivateApiContext = useGridPrivateApiContext;
 var React = _interopRequireWildcard(require("react"));
 const GridPrivateApiContext = exports.GridPrivateApiContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridPrivateApiContext.displayName = 'GridPrivateApiContext';
-}
+if (process.env.NODE_ENV !== "production") GridPrivateApiContext.displayName = "GridPrivateApiContext";
 function useGridPrivateApiContext() {
   const privateApiRef = React.useContext(GridPrivateApiContext);
   if (privateApiRef === undefined) {

package/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/index.js

@@ -1,5 +1,5 @@
 /**
- * @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
@@ -61,6 +61,7 @@ Object.defineProperty(exports, "useGridRootProps", {
     return _useGridRootProps.useGridRootProps;
   }
 });
+require("./material");
 var _useGridApiContext = require("./hooks/utils/useGridApiContext");
 var _useGridApiRef = require("./hooks/utils/useGridApiRef");
 var _useGridRootProps = require("./hooks/utils/useGridRootProps");

package/locales/isIS.js

@@ -64,11 +64,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',
@@ -86,11 +86,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/locales/koKR.js

@@ -9,10 +9,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: '행 간격',
@@ -39,11 +38,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: '열이 없습니다.',
@@ -105,15 +102,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: '필터',
@@ -162,18 +158,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 '첫 번째 페이지로 이동';
@@ -197,61 +193,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}`;
@@ -264,13 +256,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})`
 };
 const koKR = exports.koKR = (0, _getGridLocalization.getGridLocalization)(koKRGrid);

package/locales/nbNO.js

@@ -9,8 +9,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
@@ -49,8 +49,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',
@@ -64,9 +63,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',
@@ -86,9 +85,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',
@@ -106,15 +105,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',
@@ -163,18 +161,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/material/variables.js

@@ -99,5 +99,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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.3.0",
+  "version": "8.4.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
@@ -45,7 +45,7 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.3.0"
+    "@mui/x-internals": "8.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/css/context.js

@@ -19,6 +19,7 @@ const CSSVariablesContext = /*#__PURE__*/React.createContext({
     href: "/unset"
   })
 });
+if (process.env.NODE_ENV !== "production") CSSVariablesContext.displayName = "CSSVariablesContext";
 function useCSSVariablesClass() {
   return React.useContext(CSSVariablesContext).className;
 }
@@ -59,7 +60,7 @@ 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]};`;
     }
   }