@mui/x-data-grid 7.23.1 → 7.23.3

package/CHANGELOG.md

@@ -3,6 +3,135 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.23.3
+
+_Dec 19, 2024_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Korean (ko-KR) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@k-rajat19, @good-jinu.
+Following are all team members who have contributed to this release:
+@KenanYusuf, @MBilalShafi, @arminmeh, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.23.3`
+
+- [DataGrid] Allow passing custom props to `.main` element (#15919) @MBilalShafi
+- [DataGrid] Consider `columnGroupHeaderHeight` prop in `getTotalHeaderHeight` method (#15927) @k-rajat19
+- [DataGrid] Deprecate `indeterminateCheckboxAction` prop (#15862) @MBilalShafi
+- [DataGrid] Fix `aria-label` value for group checkboxes (#15861) @MBilalShafi
+- [DataGrid] Fix autosizing with virtualized columns (#15929) @k-rajat19
+- [DataGrid] Round dimensions to avoid subpixel rendering error (#15873) @KenanYusuf
+- [DataGrid] Toggle menu on click in `<GridActionsCell />` (#15871) @k-rajat19
+- [DataGrid] Trigger row spanning computation on rows update (#15872) @MBilalShafi
+- [l10n] Improve Korean (ko-KR) locale (#15906) @good-jinu
+
+#### `@mui/x-data-grid-pro@7.23.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.23.3`.
+
+#### `@mui/x-data-grid-premium@7.23.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.23.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.23.3`
+
+- [pickers] Add verification to disable skipped hours in spring forward DST (#15918) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.23.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.23.3`.
+
+## 7.23.2
+
+_Dec 12, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Romanian and Turkish locales on the Data Grid
+- 🌍 Improve Romanian locale on the Pickers
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@ihsanberkozcan, @k-rajat19, @lhilgert9, @nusr, @rares985.
+
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.23.2`
+
+- [DataGrid] Fix "No rows" displaying when all rows are pinned (#15851) @nusr
+- [DataGrid] Use `columnsManagement` slot (#15821) @k-rajat19
+- [l10n] Improve Romanian (ro-RO) locale (#15751) @rares985
+- [l10n] Improve Turkish (tr-TR) locale (#15748) @ihsanberkozcan
+
+#### `@mui/x-data-grid-pro@7.23.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.23.2`, plus:
+
+- [DataGridPro] Make Row reordering work with pagination (#15782) @k-rajat19
+
+#### `@mui/x-data-grid-premium@7.23.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.23.2`, plus:
+
+- [DataGridPremium] Fix group column ignoring `valueOptions` for `singleSelect` column type (#15754) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.23.2`
+
+- [l10n] Improve Romanian (ro-RO) locale (#15751) @rares985
+
+#### `@mui/x-date-pickers-pro@7.23.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.23.2`.
+
+### Charts
+
+#### `@mui/x-charts@7.23.2`
+
+- [charts] Fix key generation for the ChartsGrid (#15864) @alexfauquette
+- [charts] Fix scatter dataset with missing data (#15804) @alexfauquette
+
+#### `@mui/x-charts-pro@7.23.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.23.2`.
+
+#### `@mui/x-tree-view@v7.23.2`
+
+No changes, releasing to keep the versions in sync.
+
+#### `@mui/x-tree-view-pro@7.23.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Releasing to benefit from license package fix (#15818).
+
+### Docs
+
+- [docs] Fix typo in charts axis documentation (#15746) @JCQuintas
+- [docs] Improve Pickers accessible DOM structure description (#15752) @LukasTy
+- [docs] Use `updateRows` method for list view demos (#15824) @KenanYusuf
+- [docs] Use date library version from package dev dependencies for sandboxes (#15767) @LukasTy
+
+### Core
+
+- [core] Add `@mui/x-tree-view-pro` to `releaseChangelog` (#15747) @flaviendelangle
+- [license] Use `console.log` for the error message on Codesandbox to avoid rendering error (#15818) @arminmeh
+
 ## 7.23.1
 
 _Dec 5, 2024_

package/DataGrid/DataGrid.js

@@ -38,7 +38,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__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     }))
   });
@@ -95,6 +95,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,
@@ -331,6 +332,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.oneOf(['deselect', 'select']),
   /**

package/components/GridRow.js

@@ -25,6 +25,7 @@ import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFille
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { gridVirtualizationColumnEnabledSelector } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyCell({
   width
@@ -89,6 +90,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const editing = apiRef.current.getRowMode(rowId) === GridRowModes.Edit;
   const editable = rootProps.editMode === GridEditModes.Row;
+  const hasColumnVirtualization = useGridSelector(apiRef, 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;
@@ -270,7 +272,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   if (hasVirtualFocusCellLeft) {
     cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, 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/components/cell/GridActionsCell.js

@@ -90,6 +90,13 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
+  const toggleMenu = () => {
+    if (open) {
+      hideMenu();
+    } else {
+      showMenu();
+    }
+  };
   const handleTouchRippleRef = index => instance => {
     touchRippleRefs.current[index] = instance;
   };
@@ -160,7 +167,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/components/columnSelection/GridCellCheckboxRenderer.js

@@ -79,8 +79,8 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   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__*/_jsx(rootProps.slots.baseCheckbox, _extends({
     ref: handleRef,
     tabIndex: tabIndex,

package/components/columnSelection/GridHeaderCheckbox.js

@@ -92,8 +92,8 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
   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__*/_jsx(rootProps.slots.baseCheckbox, _extends({
     ref: ref,
     indeterminate: isIndeterminate,

package/components/panel/GridColumnsPanel.js

@@ -2,13 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridPanelWrapper } from "./GridPanelWrapper.js";
-import { GridColumnsManagement } from "../columnsManagement/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnsPanel(props) {
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsx(GridPanelWrapper, _extends({}, props, {
-    children: /*#__PURE__*/_jsx(GridColumnsManagement, _extends({}, rootProps.slotProps?.columnsManagement))
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnsManagement, _extends({}, rootProps.slotProps?.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {

package/components/virtualization/GridMainContainer.js

@@ -30,7 +30,7 @@ export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
-  }, ariaAttributes, {
+  }, ariaAttributes, rootProps.slotProps?.main, {
     children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
       role: "presentation",
       "data-id": "gridPanelAnchor"

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -47,7 +47,7 @@ export const useGridColumnHeaders = props => {
   const isRtl = useRtl();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
+  const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
@@ -87,8 +87,15 @@ export 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/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -4,6 +4,7 @@ export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
     includeOutliers: boolean;
     outliersFactor: number;
     expand: boolean;
+    disableColumnVirtualization: boolean;
 };
 export type GridAutosizeOptions = {
     /**
@@ -30,6 +31,11 @@ export type GridAutosizeOptions = {
      * @default false
      */
     expand?: boolean;
+    /**
+     * If false, column virtualization is not disabled while resizing.
+     * @default true
+     */
+    disableColumnVirtualization?: boolean;
 };
 /**
  * The Resize API interface that is available in the grid `apiRef`.

package/hooks/features/columnResize/gridColumnResizeApi.js

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

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -7,4 +7,4 @@ export declare const columnResizeStateInitializer: GridStateInitializer;
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange">) => void;
+export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -458,6 +458,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
     apiRef.current.autosizeColumns(_extends({}, props.autosizeOptions, {
+      disableColumnVirtualization: false,
       columns: [column.field]
     }));
   });
@@ -484,8 +485,10 @@ export 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 => _extends({}, column, {
         width: widthByField[column.field],
@@ -517,10 +520,12 @@ export 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/hooks/features/columns/gridColumnsUtils.d.ts

@@ -53,4 +53,4 @@ export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender,
     lastRowToRender: number;
     visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView'>): number;
+export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight'>): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -319,6 +319,7 @@ export function getTotalHeaderHeight(apiRef, props) {
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
   const isHeaderFilteringEnabled = 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/hooks/features/overlays/useGridOverlays.js

@@ -3,6 +3,7 @@ import { useGridApiContext } from "../../utils/useGridApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { gridExpandedRowCountSelector } from "../filter/index.js";
 import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
+import { gridPinnedRowsCountSelector } from "../rows/gridRowsSelector.js";
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
@@ -12,7 +13,8 @@ export const useGridOverlays = () => {
   const rootProps = useGridRootProps();
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
-  const noRows = totalRowCount === 0;
+  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;

package/hooks/features/rows/useGridRowSpanning.js

@@ -6,6 +6,7 @@ import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSele
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
+import { gridRowTreeSelector } from "./gridRowsSelector.js";
 import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
 import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 const EMPTY_STATE = {
@@ -35,7 +36,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;
@@ -142,7 +143,7 @@ export 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,
@@ -173,10 +174,11 @@ export const useGridRowSpanning = (apiRef, props) => {
   } = useGridVisibleRows(apiRef, props);
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const colDefs = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const tree = useGridSelector(apiRef, gridRowTreeSelector);
   const processedRange = useLazyRef(() => {
     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);
@@ -204,7 +206,7 @@ export const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = 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;
@@ -237,11 +239,17 @@ export 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 && isRowRangeUpdated(range, lastRange.current)) {
       lastRange.current = range;
       shouldResetState.current = true;
@@ -255,5 +263,5 @@ export const useGridRowSpanning = (apiRef, props) => {
       return;
     }
     updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange]);
+  }, [updateRowSpanningState, renderContext, range, lastRange, tree]);
 };

package/hooks/features/sorting/gridSortingSelector.d.ts

@@ -1,11 +1,11 @@
 import { GridSortDirection, GridSortModel } from '../../../models/gridSortModel';
 import type { GridStateCommunity } from '../../../models/gridStateCommunity';
-import type { GridValidRowModel, GridRowEntry } from '../../../models/gridRows';
+import type { GridValidRowModel, GridRowEntry, GridRowId } from '../../../models/gridRows';
 /**
  * Get the id of the rows after the sorting process.
  * @category Sorting
  */
-export declare const gridSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
+export declare const gridSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, GridRowId[]>;
 /**
  * Get the id and the model of the rows after the sorting process.
  * @category Sorting
@@ -25,3 +25,8 @@ export type GridSortColumnLookup = Record<string, {
  * @ignore - do not document.
  */
 export declare const gridSortColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridSortColumnLookup>;
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+export declare const gridSortedRowIndexLookupSelector: import("../../..").OutputSelector<GridStateCommunity, Record<GridRowId, number>>;

package/hooks/features/sorting/gridSortingSelector.js

@@ -55,4 +55,15 @@ export const gridSortColumnLookupSelector = createSelectorMemoized(gridSortModel
     return res;
   }, {});
   return result;
+});
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+export const gridSortedRowIndexLookupSelector = createSelectorMemoized(gridSortedRowIdsSelector, sortedIds => {
+  return sortedIds.reduce((acc, id, index) => {
+    acc[id] = index;
+    return acc;
+  }, Object.create(null));
 });

package/hooks/features/sorting/index.d.ts

@@ -1,3 +1,4 @@
-export * from './gridSortingSelector';
+export { gridSortedRowIdsSelector, gridSortedRowEntriesSelector, gridSortModelSelector, gridSortColumnLookupSelector, } from './gridSortingSelector';
+export type { GridSortColumnLookup } from './gridSortingSelector';
 export type { GridSortingState, GridSortingInitialState } from './gridSortingState';
 export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator, } from './gridSortingUtils';

package/hooks/features/sorting/index.js

@@ -1,2 +1,2 @@
-export * from "./gridSortingSelector.js";
+export { gridSortedRowIdsSelector, gridSortedRowEntriesSelector, gridSortModelSelector, gridSortColumnLookupSelector } from "./gridSortingSelector.js";
 export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator } from "./gridSortingUtils.js";

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -92,10 +92,7 @@ export 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;
@@ -105,10 +102,7 @@ export 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;
       }
@@ -784,4 +778,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/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/internals/index.d.ts

@@ -57,6 +57,7 @@ export { useGridRowSelection, rowSelectionStateInitializer, } from '../hooks/fea
 export { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection/useGridRowSelectionPreProcessors';
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 export type { GridSortingModelApplier } from '../hooks/features/sorting/gridSortingState';
+export { gridSortedRowIndexLookupSelector } from '../hooks/features/sorting/gridSortingSelector';
 export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { dimensionsStateInitializer, useGridDimensions, } from '../hooks/features/dimensions/useGridDimensions';

package/internals/index.js

@@ -46,6 +46,7 @@ export { calculatePinnedRowsHeight } from "../hooks/features/rows/gridRowsUtils.
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
+export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 export { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
 export { useGridEvents } from "../hooks/features/events/useGridEvents.js";
 export { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";

package/internals/utils/useProps.js

@@ -2,6 +2,9 @@ import * as React from 'react';
 
 /** Gathers props for the root element into a single `.forwardedProps` field */
 function groupForwardedProps(props) {
+  if (props.slotProps?.root) {
+    return props;
+  }
   const keys = Object.keys(props);
   if (!keys.some(key => key.startsWith('aria-') || key.startsWith('data-'))) {
     return props;