@mui/x-data-grid 9.0.0-rc.0 → 9.0.1

package/components/containers/GridRootStyles.js

@@ -471,6 +471,26 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       textOverflow: 'ellipsis',
       '&.Mui-selected': selectedStyles
     },
+    /* Default range border styles using box-shadow to avoid layout shift */
+    [`& .${_gridClasses.gridClasses.cell}.Mui-selected`]: {
+      '--range-top': '0 0 0 0 transparent',
+      '--range-bottom': '0 0 0 0 transparent',
+      '--range-left': '0 0 0 0 transparent',
+      '--range-right': '0 0 0 0 transparent',
+      boxShadow: 'var(--range-top), var(--range-bottom), var(--range-left), var(--range-right)'
+    },
+    [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: {
+      '--range-top': `inset 0 2px 0 0 ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--rangeBottom']}`]: {
+      '--range-bottom': `inset 0 -2px 0 0 ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--rangeLeft']}`]: {
+      '--range-left': `inset 2px 0 0 0 ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--rangeRight']}`]: {
+      '--range-right': `inset -2px 0 0 0 ${_cssVariables.vars.colors.interactive.focus}`
+    },
     [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
       borderTopColor: 'transparent'
     },
@@ -701,6 +721,36 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         display: 'none'
       }
     },
+    /* Fill handle styles */
+    [`& .${_gridClasses.gridClasses['cell--withFillHandle']}`]: {
+      position: 'relative',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        bottom: 0,
+        insetInlineEnd: 0,
+        width: 7,
+        height: 7,
+        backgroundColor: _cssVariables.vars.colors.interactive.focus,
+        cursor: 'crosshair',
+        zIndex: 50
+      }
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreview']}`]: {
+      backgroundColor: `color-mix(in srgb, ${_cssVariables.vars.colors.interactive.focus} 8%, transparent)`
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreviewTop']}`]: {
+      borderTop: `1px dashed ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreviewBottom']}`]: {
+      borderBottom: `1px dashed ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreviewLeft']}`]: {
+      borderLeft: `1px dashed ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreviewRight']}`]: {
+      borderRight: `1px dashed ${_cssVariables.vars.colors.interactive.focus}`
+    },
     [`& .${_gridClasses.gridClasses['row--beingDragged']}`]: {
       color: _cssVariables.vars.colors.foreground.disabled,
       '&:hover': {

package/components/containers/GridRootStyles.mjs

@@ -465,6 +465,26 @@ export const GridRootStyles = styled('div', {
       textOverflow: 'ellipsis',
       '&.Mui-selected': selectedStyles
     },
+    /* Default range border styles using box-shadow to avoid layout shift */
+    [`& .${c.cell}.Mui-selected`]: {
+      '--range-top': '0 0 0 0 transparent',
+      '--range-bottom': '0 0 0 0 transparent',
+      '--range-left': '0 0 0 0 transparent',
+      '--range-right': '0 0 0 0 transparent',
+      boxShadow: 'var(--range-top), var(--range-bottom), var(--range-left), var(--range-right)'
+    },
+    [`& .${c['cell--rangeTop']}`]: {
+      '--range-top': `inset 0 2px 0 0 ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--rangeBottom']}`]: {
+      '--range-bottom': `inset 0 -2px 0 0 ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--rangeLeft']}`]: {
+      '--range-left': `inset 2px 0 0 0 ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--rangeRight']}`]: {
+      '--range-right': `inset -2px 0 0 0 ${vars.colors.interactive.focus}`
+    },
     [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
       borderTopColor: 'transparent'
     },
@@ -695,6 +715,36 @@ export const GridRootStyles = styled('div', {
         display: 'none'
       }
     },
+    /* Fill handle styles */
+    [`& .${c['cell--withFillHandle']}`]: {
+      position: 'relative',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        bottom: 0,
+        insetInlineEnd: 0,
+        width: 7,
+        height: 7,
+        backgroundColor: vars.colors.interactive.focus,
+        cursor: 'crosshair',
+        zIndex: 50
+      }
+    },
+    [`& .${c['cell--fillPreview']}`]: {
+      backgroundColor: `color-mix(in srgb, ${vars.colors.interactive.focus} 8%, transparent)`
+    },
+    [`& .${c['cell--fillPreviewTop']}`]: {
+      borderTop: `1px dashed ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--fillPreviewBottom']}`]: {
+      borderBottom: `1px dashed ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--fillPreviewLeft']}`]: {
+      borderLeft: `1px dashed ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--fillPreviewRight']}`]: {
+      borderRight: `1px dashed ${vars.colors.interactive.focus}`
+    },
     [`& .${c['row--beingDragged']}`]: {
       color: vars.colors.foreground.disabled,
       '&:hover': {

package/constants/gridClasses.d.mts

@@ -136,6 +136,30 @@ export interface GridClasses {
    * Styles applied to the cell element if it is at the right edge of a cell selection range.
    */
   'cell--rangeRight': string;
+  /**
+   * Styles applied to the cell element when it displays the fill handle.
+   */
+  'cell--withFillHandle': string;
+  /**
+   * Styles applied to the cell element when it is in the fill preview range.
+   */
+  'cell--fillPreview': string;
+  /**
+   * Styles applied to the cell element if it is at the top edge of the fill preview range.
+   */
+  'cell--fillPreviewTop': string;
+  /**
+   * Styles applied to the cell element if it is at the bottom edge of the fill preview range.
+   */
+  'cell--fillPreviewBottom': string;
+  /**
+   * Styles applied to the cell element if it is at the left edge of the fill preview range.
+   */
+  'cell--fillPreviewLeft': string;
+  /**
+   * Styles applied to the cell element if it is at the right edge of the fill preview range.
+   */
+  'cell--fillPreviewRight': string;
   /**
    * Styles applied to the cell element if it is pinned to the left.
    */
@@ -989,6 +1013,6 @@ export declare function getDataGridUtilityClass(slot: string): string;
  */
 export declare const gridClassesOverrides: {
   readonly root: ["autoHeight", "autosizing", "root--densityStandard", "root--densityComfortable", "root--densityCompact", "root--disableUserSelection", "root--noToolbar", "withVerticalBorder"];
-  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
+  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--withFillHandle", "cell--fillPreview", "cell--fillPreviewTop", "cell--fillPreviewBottom", "cell--fillPreviewLeft", "cell--fillPreviewRight", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
 };
 export declare const gridClasses: Record<keyof GridClasses, string>;

package/constants/gridClasses.d.ts

@@ -136,6 +136,30 @@ export interface GridClasses {
    * Styles applied to the cell element if it is at the right edge of a cell selection range.
    */
   'cell--rangeRight': string;
+  /**
+   * Styles applied to the cell element when it displays the fill handle.
+   */
+  'cell--withFillHandle': string;
+  /**
+   * Styles applied to the cell element when it is in the fill preview range.
+   */
+  'cell--fillPreview': string;
+  /**
+   * Styles applied to the cell element if it is at the top edge of the fill preview range.
+   */
+  'cell--fillPreviewTop': string;
+  /**
+   * Styles applied to the cell element if it is at the bottom edge of the fill preview range.
+   */
+  'cell--fillPreviewBottom': string;
+  /**
+   * Styles applied to the cell element if it is at the left edge of the fill preview range.
+   */
+  'cell--fillPreviewLeft': string;
+  /**
+   * Styles applied to the cell element if it is at the right edge of the fill preview range.
+   */
+  'cell--fillPreviewRight': string;
   /**
    * Styles applied to the cell element if it is pinned to the left.
    */
@@ -989,6 +1013,6 @@ export declare function getDataGridUtilityClass(slot: string): string;
  */
 export declare const gridClassesOverrides: {
   readonly root: ["autoHeight", "autosizing", "root--densityStandard", "root--densityComfortable", "root--densityCompact", "root--disableUserSelection", "root--noToolbar", "withVerticalBorder"];
-  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
+  readonly children: ["actionsCell", "booleanCell", "cell", "cell--editable", "cell--editing", "cell--flex", "cell--pinnedLeft", "cell--pinnedRight", "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", "cell--rangeTop", "cell--withFillHandle", "cell--fillPreview", "cell--fillPreviewTop", "cell--fillPreviewBottom", "cell--fillPreviewLeft", "cell--fillPreviewRight", "cell--selectionMode", "cell--textCenter", "cell--textLeft", "cell--textRight", "cell--withLeftBorder", "cell--withRightBorder", "cellCheckbox", "cellEmpty", "cellOffsetLeft", "cellSkeleton", "checkboxInput", "columnHeader", "columnHeader--alignCenter", "columnHeader--alignLeft", "columnHeader--alignRight", "columnHeader--dragging", "columnHeader--emptyGroup", "columnHeader--filledGroup", "columnHeader--filtered", "columnHeader--last", "columnHeader--moving", "columnHeader--numeric", "columnHeader--pinnedLeft", "columnHeader--pinnedRight", "columnHeader--siblingFocused", "columnHeader--sortable", "columnHeader--sorted", "columnHeader--withLeftBorder", "columnHeader--withRightBorder", "columnHeaderCheckbox", "columnHeaderDraggableContainer", "columnHeaderTitleContainer", "columnHeaderTitleContainerContent", "columnSeparator", "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", "container--bottom", "container--top", "detailPanelToggleCell", "detailPanelToggleCell--expanded", "editBooleanCell", "filterIcon", "filler--borderBottom", "filler--pinnedLeft", "filler--pinnedRight", "groupingCriteriaCell", "groupingCriteriaCellLoadingContainer", "groupingCriteriaCellToggle", "headerFilterRow", "iconSeparator", "menuIcon", "menuIconButton", "menuList", "menuOpen", "overlayWrapperInner", "pinnedRows", "pinnedRows--bottom", "pinnedRows--top", "row", "row--borderBottom", "row--detailPanelExpanded", "row--dragging", "row--dynamicHeight", "row--editable", "row--editing", "row--firstVisible", "row--lastVisible", "rowReorderCell", "rowReorderCell--draggable", "rowReorderCellContainer", "rowReorderCellPlaceholder", "rowSkeleton", "scrollbar", "scrollbar--horizontal", "scrollbar--vertical", "scrollbarFiller", "scrollbarFiller--pinnedRight", "sortIcon", "treeDataGroupingCell", "treeDataGroupingCellLoadingContainer", "treeDataGroupingCellToggle", "withBorderColor", "row--beingDragged"];
 };
 export declare const gridClasses: Record<keyof GridClasses, string>;

package/constants/gridClasses.js

@@ -26,7 +26,7 @@ function getDataGridUtilityClass(slot) {
  */
 const gridClassesOverrides = exports.gridClassesOverrides = {
   root: ['autoHeight', 'autosizing', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'withVerticalBorder'],
-  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
+  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--withFillHandle', 'cell--fillPreview', 'cell--fillPreviewTop', 'cell--fillPreviewBottom', 'cell--fillPreviewLeft', 'cell--fillPreviewRight', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };

package/constants/gridClasses.mjs

@@ -18,7 +18,7 @@ export function getDataGridUtilityClass(slot) {
  */
 export const gridClassesOverrides = {
   root: ['autoHeight', 'autosizing', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'withVerticalBorder'],
-  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
+  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--withFillHandle', 'cell--fillPreview', 'cell--fillPreviewTop', 'cell--fillPreviewBottom', 'cell--fillPreviewLeft', 'cell--fillPreviewRight', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded',
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };

package/hooks/features/editing/useGridRowEditing.js

@@ -411,7 +411,7 @@ const useGridRowEditing = (apiRef, props) => {
       updateRowInRowModesModel(id, null);
       delete prevRowValuesLookup.current[id];
     };
-    if (ignoreModifications && apiRef.current.getRow(id)) {
+    if (ignoreModifications) {
       finishRowEditMode();
       return;
     }

package/hooks/features/editing/useGridRowEditing.mjs

@@ -404,7 +404,7 @@ export const useGridRowEditing = (apiRef, props) => {
       updateRowInRowModesModel(id, null);
       delete prevRowValuesLookup.current[id];
     };
-    if (ignoreModifications && apiRef.current.getRow(id)) {
+    if (ignoreModifications) {
       finishRowEditMode();
       return;
     }

package/hooks/features/focus/useGridFocus.js

@@ -301,6 +301,10 @@ const useGridFocus = (apiRef, props) => {
     if (event.relatedTarget?.getAttribute('class')?.includes(_gridClasses.gridClasses.columnHeader)) {
       return;
     }
+    // Don't clear focus when it moves to a body cell — setCellFocus already set it
+    if (event.relatedTarget?.getAttribute('class')?.includes(_gridClasses.gridClasses.cell)) {
+      return;
+    }
     logger.debug(`Clearing focus`);
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       focus: {

package/hooks/features/focus/useGridFocus.mjs

@@ -293,6 +293,10 @@ export const useGridFocus = (apiRef, props) => {
     if (event.relatedTarget?.getAttribute('class')?.includes(gridClasses.columnHeader)) {
       return;
     }
+    // Don't clear focus when it moves to a body cell — setCellFocus already set it
+    if (event.relatedTarget?.getAttribute('class')?.includes(gridClasses.cell)) {
+      return;
+    }
     logger.debug(`Clearing focus`);
     apiRef.current.setState(state => _extends({}, state, {
       focus: {

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -334,6 +334,21 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
       ids: new Set(currentSelection.ids)
     };
     const selectionManager = (0, _gridRowSelectionManager.createRowSelectionManager)(newSelectionModel);
+    const isOrHasSelectableDescendant = nodeId => {
+      const node = rowTree[nodeId];
+      if (!node) {
+        return false;
+      }
+
+      // Only consider nodes that are present (not filtered out) when using client-side filtering.
+      if (props.filterMode !== 'server' && filteredRowsLookup[nodeId] === false) {
+        return false;
+      }
+      if (node.type !== 'group') {
+        return Boolean(rowsLookup[nodeId]) && apiRef.current.isRowSelectable(nodeId);
+      }
+      return node.children.some(childId => isOrHasSelectableDescendant(childId));
+    };
     let hasChanged = false;
     for (const id of currentSelection.ids) {
       if (isNonExistent(id)) {
@@ -356,7 +371,8 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
           continue;
         }
         // Keep previously selected tree data parents selected if all their children are filtered out
-        if (!node.children.every(childId => filteredRowsLookup[childId] === false)) {
+        // or not selectable.
+        if (node.children.some(childId => filteredRowsLookup[childId] !== false && isOrHasSelectableDescendant(childId))) {
           selectionManager.unselect(id);
           hasChanged = true;
         }

package/hooks/features/rowSelection/useGridRowSelection.mjs

@@ -326,6 +326,21 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
       ids: new Set(currentSelection.ids)
     };
     const selectionManager = createRowSelectionManager(newSelectionModel);
+    const isOrHasSelectableDescendant = nodeId => {
+      const node = rowTree[nodeId];
+      if (!node) {
+        return false;
+      }
+
+      // Only consider nodes that are present (not filtered out) when using client-side filtering.
+      if (props.filterMode !== 'server' && filteredRowsLookup[nodeId] === false) {
+        return false;
+      }
+      if (node.type !== 'group') {
+        return Boolean(rowsLookup[nodeId]) && apiRef.current.isRowSelectable(nodeId);
+      }
+      return node.children.some(childId => isOrHasSelectableDescendant(childId));
+    };
     let hasChanged = false;
     for (const id of currentSelection.ids) {
       if (isNonExistent(id)) {
@@ -348,7 +363,8 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
           continue;
         }
         // Keep previously selected tree data parents selected if all their children are filtered out
-        if (!node.children.every(childId => filteredRowsLookup[childId] === false)) {
+        // or not selectable.
+        if (node.children.some(childId => filteredRowsLookup[childId] !== false && isOrHasSelectableDescendant(childId))) {
           selectionManager.unselect(id);
           hasChanged = true;
         }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v9.0.0-rc.0
+ * @mui/x-data-grid v9.0.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v9.0.0-rc.0
+ * @mui/x-data-grid v9.0.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.mts

@@ -103,8 +103,8 @@ export * from "../utils/rtlFlipSide.mjs";
 export { NotRendered } from "../utils/assert.mjs";
 export { createSelector, createRootSelector, createSelectorMemoized } from "../utils/createSelector.mjs";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.mjs";
-export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from "../utils/domUtils.mjs";
-export { isNavigationKey, isPasteShortcut, isCopyShortcut, isUndoShortcut, isRedoShortcut } from "../utils/keyboardUtils.mjs";
+export { findParentElementFromClassName, getActiveElement, getGridCellElement, isEventTargetInPortal } from "../utils/domUtils.mjs";
+export { isNavigationKey, isPasteShortcut, isCopyShortcut, isUndoShortcut, isRedoShortcut, isFillDownShortcut, isFillRightShortcut } from "../utils/keyboardUtils.mjs";
 export * from "../utils/utils.mjs";
 export { exportAs } from "../utils/exportAs.mjs";
 export * from "../utils/getPublicApiRef.mjs";

package/internals/index.d.ts

@@ -103,8 +103,8 @@ export * from "../utils/rtlFlipSide.js";
 export { NotRendered } from "../utils/assert.js";
 export { createSelector, createRootSelector, createSelectorMemoized } from "../utils/createSelector.js";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.js";
-export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from "../utils/domUtils.js";
-export { isNavigationKey, isPasteShortcut, isCopyShortcut, isUndoShortcut, isRedoShortcut } from "../utils/keyboardUtils.js";
+export { findParentElementFromClassName, getActiveElement, getGridCellElement, isEventTargetInPortal } from "../utils/domUtils.js";
+export { isNavigationKey, isPasteShortcut, isCopyShortcut, isUndoShortcut, isRedoShortcut, isFillDownShortcut, isFillRightShortcut } from "../utils/keyboardUtils.js";
 export * from "../utils/utils.js";
 export { exportAs } from "../utils/exportAs.js";
 export * from "../utils/getPublicApiRef.js";

package/internals/index.js

@@ -118,12 +118,15 @@ var _exportNames = {
   createSelectorMemoized: true,
   findParentElementFromClassName: true,
   getActiveElement: true,
+  getGridCellElement: true,
   isEventTargetInPortal: true,
   isNavigationKey: true,
   isPasteShortcut: true,
   isCopyShortcut: true,
   isUndoShortcut: true,
   isRedoShortcut: true,
+  isFillDownShortcut: true,
+  isFillRightShortcut: true,
   exportAs: true,
   useGridPrivateApiContext: true,
   serializeCellValue: true,
@@ -359,6 +362,12 @@ Object.defineProperty(exports, "getColumnsToExport", {
     return _utils3.getColumnsToExport;
   }
 });
+Object.defineProperty(exports, "getGridCellElement", {
+  enumerable: true,
+  get: function () {
+    return _domUtils.getGridCellElement;
+  }
+});
 Object.defineProperty(exports, "getGridFilter", {
   enumerable: true,
   get: function () {
@@ -503,6 +512,18 @@ Object.defineProperty(exports, "isEventTargetInPortal", {
     return _domUtils.isEventTargetInPortal;
   }
 });
+Object.defineProperty(exports, "isFillDownShortcut", {
+  enumerable: true,
+  get: function () {
+    return _keyboardUtils.isFillDownShortcut;
+  }
+});
+Object.defineProperty(exports, "isFillRightShortcut", {
+  enumerable: true,
+  get: function () {
+    return _keyboardUtils.isFillRightShortcut;
+  }
+});
 Object.defineProperty(exports, "isNavigationKey", {
   enumerable: true,
   get: function () {

package/internals/index.mjs

@@ -82,8 +82,8 @@ export * from "../utils/rtlFlipSide.mjs";
 export { NotRendered } from "../utils/assert.mjs";
 export { createSelector, createRootSelector, createSelectorMemoized } from "../utils/createSelector.mjs";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.mjs";
-export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from "../utils/domUtils.mjs";
-export { isNavigationKey, isPasteShortcut, isCopyShortcut, isUndoShortcut, isRedoShortcut } from "../utils/keyboardUtils.mjs";
+export { findParentElementFromClassName, getActiveElement, getGridCellElement, isEventTargetInPortal } from "../utils/domUtils.mjs";
+export { isNavigationKey, isPasteShortcut, isCopyShortcut, isUndoShortcut, isRedoShortcut, isFillDownShortcut, isFillRightShortcut } from "../utils/keyboardUtils.mjs";
 export * from "../utils/utils.mjs";
 export { exportAs } from "../utils/exportAs.mjs";
 export * from "../utils/getPublicApiRef.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "9.0.0-rc.0",
+  "version": "9.0.1",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -38,18 +38,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@mui/utils": "9.0.0-beta.1",
+    "@mui/utils": "9.0.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "9.0.0-rc.0",
-    "@mui/x-virtualizer": "1.0.0-rc.0"
+    "@mui/x-internals": "^9.0.0",
+    "@mui/x-virtualizer": "9.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^7.3.0 || ^9.0.0-beta.0 || ^9.0.0",
-    "@mui/system": "^7.3.0 || ^9.0.0-beta.1",
+    "@mui/material": "^7.3.0 || ^9.0.0",
+    "@mui/system": "^7.3.0 || ^9.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },

package/utils/keyboardUtils.d.mts

@@ -6,4 +6,6 @@ export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => key is
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;
 export declare function isCopyShortcut(event: KeyboardEvent): boolean;
 export declare function isUndoShortcut(event: React.KeyboardEvent): boolean;
+export declare function isFillDownShortcut(event: React.KeyboardEvent): boolean;
+export declare function isFillRightShortcut(event: React.KeyboardEvent): boolean;
 export declare function isRedoShortcut(event: React.KeyboardEvent): boolean;

package/utils/keyboardUtils.d.ts

@@ -6,4 +6,6 @@ export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => key is
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;
 export declare function isCopyShortcut(event: KeyboardEvent): boolean;
 export declare function isUndoShortcut(event: React.KeyboardEvent): boolean;
+export declare function isFillDownShortcut(event: React.KeyboardEvent): boolean;
+export declare function isFillRightShortcut(event: React.KeyboardEvent): boolean;
 export declare function isRedoShortcut(event: React.KeyboardEvent): boolean;

package/utils/keyboardUtils.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isCopyShortcut = isCopyShortcut;
+exports.isFillDownShortcut = isFillDownShortcut;
+exports.isFillRightShortcut = isFillRightShortcut;
 exports.isNavigationKey = exports.isKeyboardEvent = exports.isHideMenuKey = void 0;
 exports.isPasteShortcut = isPasteShortcut;
 exports.isPrintableKey = isPrintableKey;
@@ -45,6 +47,12 @@ function isCopyShortcut(event) {
 function isUndoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'Z' && !event.shiftKey && !event.altKey;
 }
+function isFillDownShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'D' && !event.shiftKey && !event.altKey;
+}
+function isFillRightShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'R' && !event.shiftKey && !event.altKey;
+}
 function isRedoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && (String.fromCharCode(event.keyCode) === 'Z' && event.shiftKey || String.fromCharCode(event.keyCode) === 'Y' && !event.shiftKey) && !event.altKey;
 }

package/utils/keyboardUtils.mjs

@@ -31,6 +31,12 @@ export function isCopyShortcut(event) {
 export function isUndoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'Z' && !event.shiftKey && !event.altKey;
 }
+export function isFillDownShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'D' && !event.shiftKey && !event.altKey;
+}
+export function isFillRightShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'R' && !event.shiftKey && !event.altKey;
+}
 export function isRedoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && (String.fromCharCode(event.keyCode) === 'Z' && event.shiftKey || String.fromCharCode(event.keyCode) === 'Y' && !event.shiftKey) && !event.altKey;
 }