@mui/x-data-grid 7.23.1 → 7.23.3

package/modern/locales/koKR.js

@@ -30,15 +30,14 @@ const koKRGrid = {
   toolbarExportPrint: '프린트',
   toolbarExportExcel: 'Excel로 내보내기',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '검색',
+  columnsManagementNoColumns: '열이 없습니다.',
+  columnsManagementShowHideAllText: '모두 보기/숨기기',
+  columnsManagementReset: '초기화',
+  columnsManagementDeleteIconLabel: '제거',
   // Filter panel text
   filterPanelAddFilter: '필터 추가',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '모두 삭제',
   filterPanelDeleteIconLabel: '삭제',
   filterPanelLogicOperator: '논리 연산자',
   filterPanelOperator: '연산자',
@@ -49,9 +48,9 @@ const koKRGrid = {
   filterPanelInputPlaceholder: '값 입력',
   // Filter operators text
   filterOperatorContains: '포함하는',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '포함하지 않는',
   filterOperatorEquals: '값이 같은',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '값이 다른',
   filterOperatorStartsWith: '시작하는',
   filterOperatorEndsWith: '끝나는',
   filterOperatorIs: '~인',
@@ -63,36 +62,34 @@ const koKRGrid = {
   filterOperatorIsEmpty: '값이 없는',
   filterOperatorIsNotEmpty: '값이 있는',
   filterOperatorIsAnyOf: '값 중 하나인',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: '포함하는',
+  headerFilterOperatorDoesNotContain: '포함하지 않는',
+  headerFilterOperatorEquals: '값이 같은',
+  headerFilterOperatorDoesNotEqual: '값이 다른',
+  headerFilterOperatorStartsWith: '시작하는',
+  headerFilterOperatorEndsWith: '끝나는',
+  headerFilterOperatorIs: '~인',
+  headerFilterOperatorNot: '~아닌',
+  headerFilterOperatorAfter: '더 이후',
+  headerFilterOperatorOnOrAfter: '이후',
+  headerFilterOperatorBefore: '더 이전',
+  headerFilterOperatorOnOrBefore: '이전',
+  headerFilterOperatorIsEmpty: '값이 없는',
+  headerFilterOperatorIsNotEmpty: '값이 있는',
+  headerFilterOperatorIsAnyOf: '값 중 하나인',
+  'headerFilterOperator=': '값이 같은',
+  'headerFilterOperator!=': '값이 다른',
+  'headerFilterOperator>': '더 큰',
+  'headerFilterOperator>=': '같거나 더 큰',
+  'headerFilterOperator<': '더 작은',
+  'headerFilterOperator<=': '같거나 더 작은',
   // Filter values text
   filterValueAny: '아무값',
   filterValueTrue: '참',
@@ -100,7 +97,7 @@ const koKRGrid = {
   // Column menu text
   columnMenuLabel: '메뉴',
   columnMenuShowColumns: '열 표시',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '열 관리',
   columnMenuFilter: '필터',
   columnMenuHideColumn: '열 숨기기',
   columnMenuUnsort: '정렬 해제',

package/modern/locales/roRO.js

@@ -30,12 +30,11 @@ const roROGrid = {
   toolbarExportPrint: 'Printare',
   toolbarExportExcel: 'Download în format Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Caută',
+  columnsManagementNoColumns: 'Nicio coloană',
+  columnsManagementShowHideAllText: 'Arată/Ascunde tot',
+  columnsManagementReset: 'Resetează',
+  columnsManagementDeleteIconLabel: 'Șterge',
   // Filter panel text
   filterPanelAddFilter: 'Adăugare filtru',
   filterPanelRemoveAll: 'Șterge tot',
@@ -49,9 +48,9 @@ const roROGrid = {
   filterPanelInputPlaceholder: 'Filtrare valoare',
   // Filter operators text
   filterOperatorContains: 'conține',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'nu conține',
   filterOperatorEquals: 'este egal cu',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'nu este egal cu',
   filterOperatorStartsWith: 'începe cu',
   filterOperatorEndsWith: 'se termină cu',
   filterOperatorIs: 'este',
@@ -71,9 +70,9 @@ const roROGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Conține',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Nu conține',
   headerFilterOperatorEquals: 'Egal cu',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nu este egal cu',
   headerFilterOperatorStartsWith: 'Începe cu',
   headerFilterOperatorEndsWith: 'Se termină cu',
   headerFilterOperatorIs: 'Este',

package/modern/locales/trTR.js

@@ -34,8 +34,7 @@ const trTRGrid = {
   columnsManagementNoColumns: 'Kolon yok',
   columnsManagementShowHideAllText: 'Hepsini Göster/Gizle',
   columnsManagementReset: 'Sıfırla',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Temizle',
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
   filterPanelRemoveAll: 'Hepsini kaldır',
@@ -49,9 +48,9 @@ const trTRGrid = {
   filterPanelInputPlaceholder: 'Filtre değeri',
   // Filter operators text
   filterOperatorContains: 'içerir',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'içermiyor',
   filterOperatorEquals: 'eşittir',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'eşit değil',
   filterOperatorStartsWith: 'ile başlar',
   filterOperatorEndsWith: 'ile biter',
   filterOperatorIs: 'eşittir',

package/node/DataGrid/DataGrid.js

@@ -45,7 +45,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
       style: props.style,
       sx: props.sx,
       ref: ref
-    }, props.forwardedProps, {
+    }, props.forwardedProps, props.slotProps?.root, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
     }))
   });
@@ -102,6 +102,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: _propTypes.default.shape({
     columns: _propTypes.default.arrayOf(_propTypes.default.string),
+    disableColumnVirtualization: _propTypes.default.bool,
     expand: _propTypes.default.bool,
     includeHeaders: _propTypes.default.bool,
     includeOutliers: _propTypes.default.bool,
@@ -338,6 +339,7 @@ DataGridRaw.propTypes = {
    * If `deselect`, it will deselect all the rows under it.
    * Works only if `checkboxSelection` is enabled.
    * @default "deselect"
+   * @deprecated `select` will be the default behavior from v8 onwards
    */
   indeterminateCheckboxAction: _propTypes.default.oneOf(['deselect', 'select']),
   /**

package/node/components/GridRow.js

@@ -32,6 +32,7 @@ var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 function EmptyCell({
@@ -97,6 +98,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const editing = apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit;
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
+  const hasColumnVirtualization = (0, _useGridSelector.useGridSelector)(apiRef, _hooks.gridVirtualizationColumnEnabledSelector);
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
@@ -278,7 +280,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   if (hasVirtualFocusCellLeft) {
     cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
   }
-  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+  let firstColumnIndex;
+  let lastColumnIndex;
+  if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+    firstColumnIndex = 0;
+    lastColumnIndex = visibleColumns.length;
+  } else {
+    firstColumnIndex = renderContext.firstColumnIndex;
+    lastColumnIndex = renderContext.lastColumnIndex;
+  }
+  for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
     if (!column) {

package/node/components/cell/GridActionsCell.js

@@ -99,6 +99,13 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
+  const toggleMenu = () => {
+    if (open) {
+      hideMenu();
+    } else {
+      showMenu();
+    }
+  };
   const handleTouchRippleRef = index => instance => {
     touchRippleRefs.current[index] = instance;
   };
@@ -169,7 +176,7 @@ function GridActionsCell(props) {
       "aria-controls": open ? menuId : undefined,
       role: "menuitem",
       size: "small",
-      onClick: showMenu,
+      onClick: toggleMenu,
       touchRippleRef: handleTouchRippleRef(buttonId),
       tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
     }, rootProps.slotProps?.baseIconButton, {

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -87,8 +87,8 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }
-  const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
+  const label = apiRef.current.getLocaleText(checked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
     ref: handleRef,
     tabIndex: tabIndex,

package/node/components/columnSelection/GridHeaderCheckbox.js

@@ -100,8 +100,8 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwa
   React.useEffect(() => {
     return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
-  const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
+  const label = apiRef.current.getLocaleText(checked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
     ref: ref,
     indeterminate: isIndeterminate,

package/node/components/panel/GridColumnsPanel.js

@@ -10,13 +10,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _GridPanelWrapper = require("./GridPanelWrapper");
-var _columnsManagement = require("../columnsManagement");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridColumnsPanel(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, props, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsManagement.GridColumnsManagement, (0, _extends2.default)({}, rootProps.slotProps?.columnsManagement))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnsManagement, (0, _extends2.default)({}, rootProps.slotProps?.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {

package/node/components/virtualization/GridMainContainer.js

@@ -38,7 +38,7 @@ const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forward
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
-  }, ariaAttributes, {
+  }, ariaAttributes, rootProps.slotProps?.main, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelAnchor, {
       role: "presentation",
       "data-id": "gridPanelAnchor"

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -55,7 +55,7 @@ const useGridColumnHeaders = props => {
   const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const hasVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
+  const hasColumnVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = (0, _utils.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
@@ -95,8 +95,15 @@ const useGridColumnHeaders = props => {
       renderContext: currentContext = renderContext,
       maxLastColumn = visibleColumns.length
     } = params || {};
-    const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
+    let firstColumnToRender;
+    let lastColumnToRender;
+    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+      firstColumnToRender = 0;
+      lastColumnToRender = maxLastColumn;
+    } else {
+      firstColumnToRender = currentContext.firstColumnIndex;
+      lastColumnToRender = currentContext.lastColumnIndex;
+    }
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,

package/node/hooks/features/columnResize/gridColumnResizeApi.js

@@ -8,7 +8,8 @@ const DEFAULT_GRID_AUTOSIZE_OPTIONS = exports.DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
   includeOutliers: false,
   outliersFactor: 1.5,
-  expand: false
+  expand: false,
+  disableColumnVirtualization: true
 };
 
 /**

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -467,6 +467,7 @@ const useGridColumnResize = (apiRef, props) => {
       return;
     }
     apiRef.current.autosizeColumns((0, _extends2.default)({}, props.autosizeOptions, {
+      disableColumnVirtualization: false,
       columns: [column.field]
     }));
   });
@@ -493,8 +494,10 @@ const useGridColumnResize = (apiRef, props) => {
     options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
     const columns = options.columns.map(c => apiRef.current.state.columns.lookup[c]);
     try {
-      apiRef.current.unstable_setColumnVirtualization(false);
-      await columnVirtualizationDisabled();
+      if (!props.disableVirtualization && options.disableColumnVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(false);
+        await columnVirtualizationDisabled();
+      }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => (0, _extends2.default)({}, column, {
         width: widthByField[column.field],
@@ -526,10 +529,12 @@ const useGridColumnResize = (apiRef, props) => {
         }
       });
     } finally {
-      apiRef.current.unstable_setColumnVirtualization(true);
+      if (!props.disableVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(true);
+      }
       isAutosizingRef.current = false;
     }
-  }, [apiRef, columnVirtualizationDisabled]);
+  }, [apiRef, columnVirtualizationDisabled, props.disableVirtualization]);
 
   /**
    * EFFECTS

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -334,6 +334,7 @@ function getTotalHeaderHeight(apiRef, props) {
   const maxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);
   const isHeaderFilteringEnabled = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEnabledSelector)(apiRef);
   const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const columnGroupHeadersHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;
-  return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight;
+  return columnHeadersHeight + columnGroupHeadersHeight * maxDepth + filterHeadersHeight;
 }

package/node/hooks/features/overlays/useGridOverlays.js

@@ -9,6 +9,7 @@ var _useGridApiContext = require("../../utils/useGridApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _filter = require("../filter");
 var _rows = require("../rows");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
@@ -18,7 +19,8 @@ const useGridOverlays = () => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const totalRowCount = (0, _utils.useGridSelector)(apiRef, _rows.gridRowCountSelector);
   const visibleRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridExpandedRowCountSelector);
-  const noRows = totalRowCount === 0;
+  const pinnedRowsCount = (0, _utils.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = (0, _utils.useGridSelector)(apiRef, _rows.gridRowsLoadingSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;

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

@@ -14,6 +14,7 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
 var _useGridSelector = require("../../utils/useGridSelector");
+var _gridRowsSelector = require("./gridRowsSelector");
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 const EMPTY_STATE = {
@@ -43,7 +44,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     if (skippedFields.has(colDef.field)) {
       return;
     }
-    for (let index = rangeToProcess.firstRowIndex; index <= rangeToProcess.lastRowIndex; index += 1) {
+    for (let index = rangeToProcess.firstRowIndex; index < rangeToProcess.lastRowIndex; index += 1) {
       const row = visibleRows[index];
       if (hiddenCells[row.id]?.[colDef.field]) {
         continue;
@@ -150,7 +151,7 @@ const rowSpanningStateInitializer = (state, props, apiRef) => {
     }
     const rangeToProcess = {
       firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(rowIds.length - 1, 0))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(rowIds.length, 0))
     };
     const rows = rowIds.map(id => ({
       id,
@@ -182,10 +183,11 @@ const useGridRowSpanning = (apiRef, props) => {
   } = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
   const colDefs = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
   const processedRange = (0, _useLazyRef.default)(() => {
     return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
       firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(apiRef.current.state.rows.dataRowIds.length - 1, 0))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(apiRef.current.state.rows.dataRowIds.length, 0))
     } : EMPTY_RANGE;
   });
   const lastRange = React.useRef(EMPTY_RANGE);
@@ -213,7 +215,7 @@ const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = (0, _gridRowSpanningUtils.getUnprocessedRange)({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
+      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex + 1)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;
@@ -246,11 +248,17 @@ const useGridRowSpanning = (apiRef, props) => {
   const prevRenderContext = React.useRef(renderContext);
   const isFirstRender = React.useRef(true);
   const shouldResetState = React.useRef(false);
+  const previousTree = React.useRef(tree);
   React.useEffect(() => {
     const firstRender = isFirstRender.current;
     if (isFirstRender.current) {
       isFirstRender.current = false;
     }
+    if (tree !== previousTree.current) {
+      previousTree.current = tree;
+      updateRowSpanningState(true);
+      return;
+    }
     if (range && lastRange.current && (0, _gridRowSpanningUtils.isRowRangeUpdated)(range, lastRange.current)) {
       lastRange.current = range;
       shouldResetState.current = true;
@@ -264,6 +272,6 @@ const useGridRowSpanning = (apiRef, props) => {
       return;
     }
     updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange]);
+  }, [updateRowSpanningState, renderContext, range, lastRange, tree]);
 };
 exports.useGridRowSpanning = useGridRowSpanning;

package/node/hooks/features/sorting/gridSortingSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridSortedRowIdsSelector = exports.gridSortedRowEntriesSelector = exports.gridSortModelSelector = exports.gridSortColumnLookupSelector = void 0;
+exports.gridSortedRowIndexLookupSelector = exports.gridSortedRowIdsSelector = exports.gridSortedRowEntriesSelector = exports.gridSortModelSelector = exports.gridSortColumnLookupSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
@@ -61,4 +61,15 @@ const gridSortColumnLookupSelector = exports.gridSortColumnLookupSelector = (0,
     return res;
   }, {});
   return result;
+});
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+const gridSortedRowIndexLookupSelector = exports.gridSortedRowIndexLookupSelector = (0, _createSelector.createSelectorMemoized)(gridSortedRowIdsSelector, sortedIds => {
+  return sortedIds.reduce((acc, id, index) => {
+    acc[id] = index;
+    return acc;
+  }, Object.create(null));
 });

package/node/hooks/features/sorting/index.js

@@ -3,11 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  gridDateComparator: true,
-  gridNumberComparator: true,
-  gridStringOrNumberComparator: true
-};
 Object.defineProperty(exports, "gridDateComparator", {
   enumerable: true,
   get: function () {
@@ -20,6 +15,30 @@ Object.defineProperty(exports, "gridNumberComparator", {
     return _gridSortingUtils.gridNumberComparator;
   }
 });
+Object.defineProperty(exports, "gridSortColumnLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortColumnLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortModelSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortModelSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortedRowEntriesSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowEntriesSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortedRowIdsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowIdsSelector;
+  }
+});
 Object.defineProperty(exports, "gridStringOrNumberComparator", {
   enumerable: true,
   get: function () {
@@ -27,15 +46,4 @@ Object.defineProperty(exports, "gridStringOrNumberComparator", {
   }
 });
 var _gridSortingSelector = require("./gridSortingSelector");
-Object.keys(_gridSortingSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gridSortingSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridSortingSelector[key];
-    }
-  });
-});
 var _gridSortingUtils = require("./gridSortingUtils");

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

@@ -103,10 +103,7 @@ const useGridVirtualScroller = () => {
       return undefined;
     }
     const initialRect = node.getBoundingClientRect();
-    let lastSize = {
-      width: initialRect.width,
-      height: initialRect.height
-    };
+    let lastSize = roundDimensions(initialRect);
     apiRef.current.publishEvent('resize', lastSize);
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
@@ -116,10 +113,7 @@ const useGridVirtualScroller = () => {
       if (!entry) {
         return;
       }
-      const newSize = {
-        width: entry.contentRect.width,
-        height: entry.contentRect.height
-      };
+      const newSize = roundDimensions(entry.contentRect);
       if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
         return;
       }
@@ -796,4 +790,13 @@ function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verti
       // eslint unable to figure out enum exhaustiveness
       throw new Error('unreachable');
   }
+}
+
+// Round to avoid issues with subpixel rendering
+// https://github.com/mui/mui-x/issues/15721
+function roundDimensions(dimensions) {
+  return {
+    width: Math.round(dimensions.width * 10) / 10,
+    height: Math.round(dimensions.height * 10) / 10
+  };
 }

package/node/index.js

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

package/node/internals/index.js

@@ -71,6 +71,7 @@ var _exportNames = {
   useGridRowSelectionPreProcessors: true,
   useGridSorting: true,
   sortingStateInitializer: true,
+  gridSortedRowIndexLookupSelector: true,
   useGridScroll: true,
   useGridEvents: true,
   dimensionsStateInitializer: true,
@@ -356,6 +357,12 @@ Object.defineProperty(exports, "gridRowGroupsToFetchSelector", {
     return _gridRowsSelector.gridRowGroupsToFetchSelector;
   }
 });
+Object.defineProperty(exports, "gridSortedRowIndexLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowIndexLookupSelector;
+  }
+});
 Object.defineProperty(exports, "headerFilteringStateInitializer", {
   enumerable: true,
   get: function () {
@@ -777,6 +784,7 @@ var _useGridHeaderFiltering = require("../hooks/features/headerFiltering/useGrid
 var _useGridRowSelection = require("../hooks/features/rowSelection/useGridRowSelection");
 var _useGridRowSelectionPreProcessors = require("../hooks/features/rowSelection/useGridRowSelectionPreProcessors");
 var _useGridSorting = require("../hooks/features/sorting/useGridSorting");
+var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _useGridScroll = require("../hooks/features/scroll/useGridScroll");
 var _useGridEvents = require("../hooks/features/events/useGridEvents");
 var _useGridDimensions = require("../hooks/features/dimensions/useGridDimensions");