From f955ebb69b1a9dd4dbda8221ee7dde6be6e37224 Mon Sep 17 00:00:00 2001 From: Caio Lins Date: Tue, 5 Nov 2024 18:20:42 +0900 Subject: [PATCH 1/4] [charts] Allow `SeriesValueFormatter` to return `null` value (#15057) --- packages/x-charts/src/models/seriesType/common.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/x-charts/src/models/seriesType/common.ts b/packages/x-charts/src/models/seriesType/common.ts index 471e06a7367f3..356c8a4b4b23b 100644 --- a/packages/x-charts/src/models/seriesType/common.ts +++ b/packages/x-charts/src/models/seriesType/common.ts @@ -13,7 +13,7 @@ export type SeriesValueFormatterContext = { export type SeriesValueFormatter = ( value: TValue, context: SeriesValueFormatterContext, -) => string; +) => string | null; export type CommonSeriesType = { id?: SeriesId; @@ -22,7 +22,7 @@ export type CommonSeriesType = { * Formatter used to render values in tooltip or other data display. * @param {TValue} value The series' value to render. * @param {SeriesValueFormatterContext} context The rendering context of the value. - * @returns {string} The string to display. + * @returns {string | null} The string to display or null if the value should not be shown. */ valueFormatter?: SeriesValueFormatter; /** From 4c11e44d04ec34c5941eda83b7c9dd14e34b163b Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Tue, 5 Nov 2024 11:02:23 +0100 Subject: [PATCH 2/4] [charts] Remove deprecated highlight properties (#15191) --- docs/data/charts/bars/BarAnimation.tsx | 5 +-- .../highlighting/ControlledHighlight.js | 16 +++++----- .../highlighting/ControlledHighlight.tsx | 16 +++++----- .../charts/highlighting/ElementHighlights.js | 32 +++++++++---------- .../charts/highlighting/ElementHighlights.tsx | 32 +++++++++---------- packages/x-charts/src/PieChart/PieArc.tsx | 15 --------- packages/x-charts/src/PieChart/PieArcPlot.tsx | 3 -- .../HighlightedProvider/HighlightedContext.ts | 8 ----- .../HighlightedProvider.tsx | 11 +------ 9 files changed, 52 insertions(+), 86 deletions(-) diff --git a/docs/data/charts/bars/BarAnimation.tsx b/docs/data/charts/bars/BarAnimation.tsx index 9bdd402a65e7f..13694483bb7b5 100644 --- a/docs/data/charts/bars/BarAnimation.tsx +++ b/docs/data/charts/bars/BarAnimation.tsx @@ -5,6 +5,7 @@ import Slider from '@mui/material/Slider'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import { BarChart } from '@mui/x-charts/BarChart'; +import { HighlightScope } from '@mui/x-charts/context'; export default function BarAnimation() { const [seriesNb, setSeriesNb] = React.useState(2); @@ -67,10 +68,10 @@ export default function BarAnimation() { ); } -const highlightScope = { +const highlightScope: HighlightScope = { highlight: 'series', fade: 'global', -} as const; +}; const series = [ { diff --git a/docs/data/charts/highlighting/ControlledHighlight.js b/docs/data/charts/highlighting/ControlledHighlight.js index 6106b70cd9d81..e7b0a1fa951ec 100644 --- a/docs/data/charts/highlighting/ControlledHighlight.js +++ b/docs/data/charts/highlighting/ControlledHighlight.js @@ -18,8 +18,8 @@ export default function ControlledHighlight() { seriesId: 'A', dataIndex: 0, }); - const [highlighted, setHighlighted] = React.useState('item'); - const [faded, setFaded] = React.useState('global'); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); const handleHighLightedSeries = (event, newHighLightedSeries) => { if (newHighLightedSeries !== null) { @@ -80,8 +80,8 @@ export default function ControlledHighlight() { series={barChartsProps.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} highlightedItem={highlightedItem} @@ -98,8 +98,8 @@ export default function ControlledHighlight() { setHighlighted(event.target.value)} + value={highlight} + onChange={(event) => setHighlight(event.target.value)} sx={{ minWidth: 150 }} > none @@ -109,8 +109,8 @@ export default function ControlledHighlight() { setFaded(event.target.value)} + value={fade} + onChange={(event) => setFade(event.target.value)} sx={{ minWidth: 150 }} > none diff --git a/docs/data/charts/highlighting/ControlledHighlight.tsx b/docs/data/charts/highlighting/ControlledHighlight.tsx index 4de4eb1b81ae2..b29d70302bbc3 100644 --- a/docs/data/charts/highlighting/ControlledHighlight.tsx +++ b/docs/data/charts/highlighting/ControlledHighlight.tsx @@ -19,8 +19,8 @@ export default function ControlledHighlight() { seriesId: 'A', dataIndex: 0, }); - const [highlighted, setHighlighted] = React.useState('item'); - const [faded, setFaded] = React.useState('global'); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); const handleHighLightedSeries = (event: any, newHighLightedSeries: string) => { if (newHighLightedSeries !== null) { @@ -81,8 +81,8 @@ export default function ControlledHighlight() { series={barChartsProps.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} highlightedItem={highlightedItem} @@ -99,8 +99,8 @@ export default function ControlledHighlight() { setHighlighted(event.target.value)} + value={highlight} + onChange={(event) => setHighlight(event.target.value)} sx={{ minWidth: 150 }} > none @@ -110,8 +110,8 @@ export default function ControlledHighlight() { setFaded(event.target.value)} + value={fade} + onChange={(event) => setFade(event.target.value)} sx={{ minWidth: 150 }} > none diff --git a/docs/data/charts/highlighting/ElementHighlights.js b/docs/data/charts/highlighting/ElementHighlights.js index 7379647649bd9..fe1f78527ae41 100644 --- a/docs/data/charts/highlighting/ElementHighlights.js +++ b/docs/data/charts/highlighting/ElementHighlights.js @@ -88,8 +88,8 @@ const pieChartsParams = { export default function ElementHighlights() { const [chartType, setChartType] = React.useState('bar'); const [withArea, setWithArea] = React.useState(false); - const [highlighted, setHighlighted] = React.useState('item'); - const [faded, setFaded] = React.useState('global'); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); const handleChartType = (event, newChartType) => { if (newChartType !== null) { @@ -123,8 +123,8 @@ export default function ElementHighlights() { series={barChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} /> @@ -137,8 +137,8 @@ export default function ElementHighlights() { ...series, area: withArea, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} /> @@ -150,8 +150,8 @@ export default function ElementHighlights() { series={scatterChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} /> @@ -163,8 +163,8 @@ export default function ElementHighlights() { series={pieChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} /> @@ -179,9 +179,9 @@ export default function ElementHighlights() { > setHighlighted(event.target.value)} + label="highlight" + value={highlight} + onChange={(event) => setHighlight(event.target.value)} sx={{ minWidth: 150 }} > none @@ -190,9 +190,9 @@ export default function ElementHighlights() { setFaded(event.target.value)} + label="fade" + value={fade} + onChange={(event) => setFade(event.target.value)} sx={{ minWidth: 150 }} > none diff --git a/docs/data/charts/highlighting/ElementHighlights.tsx b/docs/data/charts/highlighting/ElementHighlights.tsx index d576ed201c501..b961f5ccfd0c0 100644 --- a/docs/data/charts/highlighting/ElementHighlights.tsx +++ b/docs/data/charts/highlighting/ElementHighlights.tsx @@ -89,8 +89,8 @@ const pieChartsParams = { export default function ElementHighlights() { const [chartType, setChartType] = React.useState('bar'); const [withArea, setWithArea] = React.useState(false); - const [highlighted, setHighlighted] = React.useState('item'); - const [faded, setFaded] = React.useState('global'); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); const handleChartType = (event: any, newChartType: string) => { if (newChartType !== null) { @@ -124,8 +124,8 @@ export default function ElementHighlights() { series={barChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} /> @@ -138,8 +138,8 @@ export default function ElementHighlights() { ...series, area: withArea, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} /> @@ -151,8 +151,8 @@ export default function ElementHighlights() { series={scatterChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} /> @@ -164,8 +164,8 @@ export default function ElementHighlights() { series={pieChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} /> @@ -180,9 +180,9 @@ export default function ElementHighlights() { > setHighlighted(event.target.value)} + label="highlight" + value={highlight} + onChange={(event) => setHighlight(event.target.value)} sx={{ minWidth: 150 }} > none @@ -191,9 +191,9 @@ export default function ElementHighlights() { setFaded(event.target.value)} + label="fade" + value={fade} + onChange={(event) => setFade(event.target.value)} sx={{ minWidth: 150 }} > none diff --git a/packages/x-charts/src/PieChart/PieArc.tsx b/packages/x-charts/src/PieChart/PieArc.tsx index 6919b17363ed7..99c7eda9f856f 100644 --- a/packages/x-charts/src/PieChart/PieArc.tsx +++ b/packages/x-charts/src/PieChart/PieArc.tsx @@ -9,7 +9,6 @@ import { styled } from '@mui/material/styles'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; import { PieItemId } from '../models'; -import { HighlightScope } from '../context'; export interface PieArcClasses { /** Styles applied to the root element. */ @@ -64,10 +63,6 @@ export type PieArcProps = Omit, 'ref' | 'id'> & PieArcOwnerState & { cornerRadius: SpringValue; endAngle: SpringValue; - /** - * @deprecated Use the `isFaded` or `isHighlighted` props instead. - */ - highlightScope?: Partial; innerRadius: SpringValue; onClick?: (event: React.MouseEvent) => void; outerRadius: SpringValue; @@ -90,7 +85,6 @@ function PieArc(props: PieArcProps) { outerRadius, paddingAngle, startAngle, - highlightScope, ...other } = props; @@ -137,15 +131,6 @@ PieArc.propTypes = { // ---------------------------------------------------------------------- classes: PropTypes.object, dataIndex: PropTypes.number.isRequired, - /** - * @deprecated Use the `isFaded` or `isHighlighted` props instead. - */ - highlightScope: PropTypes.shape({ - fade: PropTypes.oneOf(['global', 'none', 'series']), - faded: PropTypes.oneOf(['global', 'none', 'series']), - highlight: PropTypes.oneOf(['item', 'none', 'series']), - highlighted: PropTypes.oneOf(['item', 'none', 'series']), - }), id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, isFaded: PropTypes.bool.isRequired, isHighlighted: PropTypes.bool.isRequired, diff --git a/packages/x-charts/src/PieChart/PieArcPlot.tsx b/packages/x-charts/src/PieChart/PieArcPlot.tsx index 13e233d5b642a..c2c7279a9ef97 100644 --- a/packages/x-charts/src/PieChart/PieArcPlot.tsx +++ b/packages/x-charts/src/PieChart/PieArcPlot.tsx @@ -15,7 +15,6 @@ import { ValueWithHighlight, useTransformData, } from './dataTransform/useTransformData'; -import { useHighlighted } from '../context'; export interface PieArcPlotSlots { pieArc?: React.JSXElementConstructor; @@ -95,7 +94,6 @@ function PieArcPlot(props: PieArcPlotProps) { ...defaultTransitionConfig, immediate: skipAnimation, }); - const { highlightScope } = useHighlighted(); if (data.length === 0) { return null; @@ -133,7 +131,6 @@ function PieArcPlot(props: PieArcPlotProps) { id={id} color={item.color} dataIndex={index} - highlightScope={highlightScope} isFaded={item.isFaded} isHighlighted={item.isHighlighted} onClick={ diff --git a/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts b/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts index 335b8ba592239..f89055efd50b4 100644 --- a/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts +++ b/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts @@ -34,10 +34,6 @@ export type HighlightOptions = 'none' | 'item' | 'series'; export type FadeOptions = 'none' | 'series' | 'global'; export type HighlightScope = { - /** - * @deprecated Use `highlight` instead. - */ - highlighted?: HighlightOptions; /** * The scope of highlighted elements. * - 'none': no highlight. @@ -46,10 +42,6 @@ export type HighlightScope = { * @default 'none' */ highlight?: HighlightOptions; - /** - * @deprecated Use `fade` instead. - */ - faded?: FadeOptions; /** * The scope of faded elements. * - 'none': no fading. diff --git a/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx b/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx index 23a99d9b3e39e..a5e097e067f6d 100644 --- a/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx +++ b/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx @@ -29,15 +29,6 @@ export type HighlightedProviderProps = { onHighlightChange?: (highlightedItem: HighlightItemData | null) => void; }; -const mergeDeprecatedOptions = (options?: Partial): HighlightScope => { - const { highlighted, faded, ...other } = options ?? {}; - return { - highlight: highlighted, - fade: faded, - ...other, - }; -}; - function HighlightedProvider({ children, highlightedItem: highlightedItemProps, @@ -58,7 +49,7 @@ function HighlightedProvider({ const seriesData = series[seriesType as ChartSeriesType]; Object.keys(seriesData?.series ?? {}).forEach((seriesId) => { const seriesItem = seriesData?.series[seriesId]; - map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope)); + map.set(seriesId, seriesItem?.highlightScope); }); }); return map; From 8acff87f504ea4c9cbfa3ca3d42775b69795d110 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Tue, 5 Nov 2024 11:02:59 +0100 Subject: [PATCH 3/4] [DataGrid] Set default overlay height in flex parent layout (#15202) --- ...oHeightOverlay.js => GridOverlayHeight.js} | 5 +- ...eightOverlay.tsx => GridOverlayHeight.tsx} | 5 +- ....preview => GridOverlayHeight.tsx.preview} | 1 - docs/data/data-grid/layout/layout.md | 22 +-- .../src/components/base/GridOverlays.tsx | 20 +-- .../src/hooks/features/rows/gridRowsUtils.ts | 6 +- .../virtualization/useGridVirtualScroller.tsx | 15 +- .../regressions/data-grid/DataGridOverlays.js | 168 ++++++++++++++++++ 8 files changed, 198 insertions(+), 44 deletions(-) rename docs/data/data-grid/layout/{AutoHeightOverlay.js => GridOverlayHeight.js} (95%) rename docs/data/data-grid/layout/{AutoHeightOverlay.tsx => GridOverlayHeight.tsx} (95%) rename docs/data/data-grid/layout/{AutoHeightOverlay.tsx.preview => GridOverlayHeight.tsx.preview} (93%) create mode 100644 test/regressions/data-grid/DataGridOverlays.js diff --git a/docs/data/data-grid/layout/AutoHeightOverlay.js b/docs/data/data-grid/layout/GridOverlayHeight.js similarity index 95% rename from docs/data/data-grid/layout/AutoHeightOverlay.js rename to docs/data/data-grid/layout/GridOverlayHeight.js index f1ffdc2f6344f..385ed124616a7 100644 --- a/docs/data/data-grid/layout/AutoHeightOverlay.js +++ b/docs/data/data-grid/layout/GridOverlayHeight.js @@ -56,11 +56,10 @@ function CustomNoRowsOverlay() { ); } -export default function AutoHeightOverlay() { +export default function GridOverlayHeight() { return ( - + + { function GridOverlayWrapper(props: React.PropsWithChildren) { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); - const currentPage = useGridVisibleRows(apiRef, rootProps); const dimensions = useGridSelector(apiRef, gridDimensionsSelector); - let height: React.CSSProperties['height'] = + let height: React.CSSProperties['height'] = Math.max( dimensions.viewportOuterSize.height - - dimensions.topContainerHeight - - dimensions.bottomContainerHeight - - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0); + dimensions.topContainerHeight - + dimensions.bottomContainerHeight - + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0), + 0, + ); - if ((rootProps.autoHeight && currentPage.rows.length === 0) || height === 0) { - height = getMinimalContentHeight(apiRef); + if (height === 0) { + height = minimalContentHeight; } const classes = useUtilityClasses({ ...props, classes: rootProps.classes }); diff --git a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts index 5630a73d551d4..86be1ee376470 100644 --- a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts @@ -25,7 +25,6 @@ import { GridRowsPartialUpdateAction, } from './gridRowsInterfaces'; import { gridPinnedRowsSelector } from './gridRowsSelector'; -import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors'; export const GRID_ROOT_GROUP_ID: GridRowId = `auto-generated-group-node-root`; export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated'); @@ -401,10 +400,7 @@ export function calculatePinnedRowsHeight(apiRef: React.MutableRefObject) { - const dimensions = gridDimensionsSelector(apiRef.current.state); - return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`; -} +export const minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))'; export function computeRowsUpdates( apiRef: React.MutableRefObject, diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index b5ae34dc7fc4d..86435660917e7 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -36,7 +36,6 @@ import type { import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector'; import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector'; import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; -import { getMinimalContentHeight } from '../rows/gridRowsUtils'; import { GridRowProps } from '../../../components/GridRow'; import { GridInfiniteLoaderPrivateApi } from '../../../models/api/gridInfiniteLoaderApi'; import { @@ -47,6 +46,7 @@ import { import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization'; import { gridRowSpanningHiddenCellsOriginMapSelector } from '../rows/gridRowSpanningSelectors'; import { gridListColumnSelector } from '../listView/gridListViewSelectors'; +import { minimalContentHeight } from '../rows/gridRowsUtils'; const MINIMUM_COLUMN_WIDTH = 50; @@ -538,19 +538,12 @@ export const useGridVirtualScroller = () => { flexShrink: 0, }; - if (rootProps.autoHeight && currentPage.rows.length === 0) { - size.flexBasis = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows. + if (size.flexBasis === 0) { + size.flexBasis = minimalContentHeight; // Give room to show the overlay when there no rows. } return size; - }, [ - apiRef, - columnsTotalWidth, - contentHeight, - needsHorizontalScrollbar, - rootProps.autoHeight, - currentPage.rows.length, - ]); + }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]); React.useEffect(() => { apiRef.current.publishEvent('virtualScrollerContentSizeChange'); diff --git a/test/regressions/data-grid/DataGridOverlays.js b/test/regressions/data-grid/DataGridOverlays.js new file mode 100644 index 0000000000000..a3afeee84d5bd --- /dev/null +++ b/test/regressions/data-grid/DataGridOverlays.js @@ -0,0 +1,168 @@ +/* eslint-disable react/prop-types */ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; + +function FlexParent({ children, style }) { + return
{children}
; +} + +function FlexParentNoRowsOverlay() { + return ( +
+ FlexParentNoRowsOverlay + + + +
+ ); +} + +function FlexParentMinHeightNoRowsOverlay() { + return ( +
+ FlexParentMinHeightNoRowsOverlay + + + +
+ ); +} + +function FlexParentMaxHeightNoRowsOverlay() { + return ( +
+ FlexParentMaxHeightNoRowsOverlay + + + +
+ ); +} + +function AutoHeightNoRowsOverlay() { + return ( +
+ AutoHeightNoRowsOverlay +
+ +
+
+ ); +} + +function AutoHeightLoadingOverlay() { + return ( +
+ AutoHeightLoadingOverlay +
+ +
+
+ ); +} + +function PredefinedSizeNoRowsLoadingOverlay() { + return ( +
+ PredefinedSizeNoRowsLoadingOverlay +
+ +
+
+ ); +} + +function FlexParentSkeletonOverlay() { + return ( +
+ FlexParentSkeletonOverlay + + + +
+ ); +} + +function FlexParentMinHeightSkeletonOverlay() { + return ( +
+ FlexParentMinHeightSkeletonOverlay + + + +
+ ); +} + +function FlexParentMaxHeightSkeletonOverlay() { + return ( +
+ FlexParentMaxHeightSkeletonOverlay + + + +
+ ); +} + +function AutoHeightSkeletonOverlay() { + return ( +
+ AutoHeightSkeletonOverlay +
+ +
+
+ ); +} + +function PredefinedSizeSkeletonOverlay() { + return ( +
+ PredefinedSizeSkeletonOverlay +
+ +
+
+ ); +} + +export default function DataGridFlexParentOverlay() { + return ( +
+ + + + + + + + + + + + +
+ ); +} From f50938c40ac76dba7a02ea883c54b685c9503a74 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 5 Nov 2024 18:04:51 +0500 Subject: [PATCH 4/4] [DataGrid] Fix failing CI (#15273) --- .../src/hooks/features/rowSelection/useGridRowSelection.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts index c197b147205a5..7fc8dd13d2ccf 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts +++ b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts @@ -339,8 +339,8 @@ export const useGridRowSelection = ( } const currentLookup = selectedIdsLookupSelector(apiRef); if ( - newSelection.length === Object.keys(currentLookup).length && - newSelection.every((id) => currentLookup[id] === id) + newSelection.size === Object.keys(currentLookup).length && + Array.from(newSelection).every((id) => currentLookup[id] === id) ) { return; } @@ -504,11 +504,10 @@ export const useGridRowSelection = ( // Example: A parent whose de-selected children are filtered out should now be selected const shouldReapplyPropagation = isNestedData && - !sortModelUpdated && props.rowSelectionPropagation?.parents && Object.keys(selectionLookup).length > 0; - if (hasChanged || shouldReapplyPropagation) { + if (hasChanged || (shouldReapplyPropagation && !sortModelUpdated)) { const newSelection = Object.values(selectionLookup); if (shouldReapplyPropagation) { apiRef.current.selectRows(newSelection, true, true);