@mui/x-data-grid 8.18.0 → 8.20.0

package/esm/components/cell/GridActionsCell.js

@@ -2,25 +2,26 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
+const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "children", "suppressChildrenValidation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';
 import useId from '@mui/utils/useId';
+import { warnOnce } from '@mui/x-internals/warning';
 import { gridClasses } from "../../constants/gridClasses.js";
 import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { GridActionsCellItem } from "./GridActionsCellItem.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
   const {
-      colDef,
-      id,
       hasFocus,
       tabIndex,
       position = 'bottom-end',
-      focusElementRef
+      children,
+      suppressChildrenValidation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [focusedButtonIndex, setFocusedButtonIndex] = React.useState(-1);
@@ -34,12 +35,27 @@ function GridActionsCell(props) {
   const menuId = useId();
   const buttonId = useId();
   const rootProps = useGridRootProps();
-  if (!hasActions(colDef)) {
-    throw new Error('MUI X: Missing the `getActions` property in the `GridColDef`.');
-  }
-  const options = colDef.getActions(apiRef.current.getRowParams(id));
-  const iconButtons = options.filter(option => !option.props.showInMenu);
-  const menuButtons = options.filter(option => option.props.showInMenu);
+  const actions = [];
+  React.Children.forEach(children, child => {
+    // Unwrap React.Fragment
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      if (child.type === React.Fragment) {
+        React.Children.forEach(child.props.children, fragChild => {
+          if (/*#__PURE__*/React.isValidElement(fragChild)) {
+            actions.push(fragChild);
+          }
+        });
+      } else if (child.type === GridActionsCellItem || suppressChildrenValidation) {
+        actions.push(child);
+      } else {
+        const childType = typeof child.type === 'function' ? child.type.name : child.type;
+        warnOnce(`MUI X: Invalid child type in \`GridActionsCell\`. Expected \`GridActionsCellItem\` or \`React.Fragment\`, got \`${childType}\`.
+If this is intentional, you can suppress this warning by passing the \`suppressChildrenValidation\` prop to \`GridActionsCell\`.`, 'error');
+      }
+    }
+  });
+  const iconButtons = actions.filter(option => !option.props.showInMenu);
+  const menuButtons = actions.filter(option => option.props.showInMenu);
   const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
   React.useLayoutEffect(() => {
     if (!hasFocus) {
@@ -62,22 +78,16 @@ function GridActionsCell(props) {
       preventScroll: true
     });
   }, [focusedButtonIndex]);
+  const firstFocusableButtonIndex = actions.findIndex(o => !o.props.disabled);
   React.useEffect(() => {
+    if (hasFocus && focusedButtonIndex === -1) {
+      setFocusedButtonIndex(firstFocusableButtonIndex);
+    }
     if (!hasFocus) {
       setFocusedButtonIndex(-1);
       ignoreCallToFocus.current = false;
     }
-  }, [hasFocus]);
-  React.useImperativeHandle(focusElementRef, () => ({
-    focus() {
-      // If ignoreCallToFocus is true, then one of the buttons was clicked and the focus is already set
-      if (!ignoreCallToFocus.current) {
-        // find the first focusable button and pass the index to the state
-        const focusableButtonIndex = options.findIndex(o => !o.props.disabled);
-        setFocusedButtonIndex(focusableButtonIndex);
-      }
-    }
-  }), [options]);
+  }, [hasFocus, focusedButtonIndex, firstFocusableButtonIndex]);
   React.useEffect(() => {
     if (focusedButtonIndex >= numberOfButtons) {
       setFocusedButtonIndex(numberOfButtons - 1);
@@ -115,7 +125,7 @@ function GridActionsCell(props) {
       return;
     }
     const getNewIndex = (index, direction) => {
-      if (index < 0 || index > options.length) {
+      if (index < 0 || index > actions.length) {
         return index;
       }
 
@@ -124,7 +134,7 @@ function GridActionsCell(props) {
       const indexMod = (direction === 'left' ? -1 : 1) * rtlMod;
 
       // if the button that should receive focus is disabled go one more step
-      return options[index + indexMod]?.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
+      return actions[index + indexMod]?.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
     };
     let newIndex = focusedButtonIndex;
     if (event.key === 'ArrowRight') {
@@ -201,6 +211,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * The column of the row that the current cell belongs to.
    */
@@ -209,16 +220,6 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */
@@ -255,5 +256,25 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridActionsCell };
-export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));
+
+// Temporary wrapper for backward compatibility.
+// Only used to support `getActions` method in `GridColDef`.
+// TODO(v9): Remove this wrapper and the default `renderCell` in gridActionsColDef
+function GridActionsCellWrapper(props) {
+  const {
+    colDef,
+    id
+  } = props;
+  const apiRef = useGridApiContext();
+  if (!hasActions(colDef)) {
+    throw new Error('MUI X: Missing the `getActions` property in the `GridColDef`.');
+  }
+  const actions = colDef.getActions(apiRef.current.getRowParams(id));
+  return /*#__PURE__*/_jsx(GridActionsCell, _extends({
+    suppressChildrenValidation: true
+  }, props, {
+    children: actions
+  }));
+}
+export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCellWrapper, _extends({}, params));
 if (process.env.NODE_ENV !== "production") renderActionsCell.displayName = "renderActionsCell";

package/esm/components/cell/GridBooleanCell.js

@@ -69,16 +69,6 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/components/cell/GridCell.js

@@ -16,6 +16,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useStore } from '@mui/x-internals/store';
 import { Rowspan } from '@mui/x-virtualizer';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { GridCellModes } from "../../models/index.js";
@@ -135,8 +136,7 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     isEditable = false,
     value
   } = cellParams;
-  const canManageOwnFocus = column.type === 'actions' && 'getActions' in column && typeof column.getActions === 'function' && column.getActions(apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled);
-  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParams.tabIndex : -1;
+  const tabIndex = (cellMode === 'view' || !isEditable) && column.type !== 'actions' ? cellParams.tabIndex : -1;
   const {
     classes: rootClasses,
     getCellClassName
@@ -160,7 +160,6 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   const valueToRender = cellParams.formattedValue ?? value;
   const cellRef = React.useRef(null);
   const handleRef = useForkRef(ref, cellRef);
-  const focusElementRef = React.useRef(null);
   const isSelectionMode = rootProps.cellSelection ?? false;
   const ownerState = {
     align,
@@ -224,14 +223,14 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     }
     return cellStyle;
   }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
     }
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
-      const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
+      const elementToFocus = focusableElement || cellRef.current;
       if (doesSupportPreventScroll()) {
         elementToFocus.focus({
           preventScroll: true
@@ -292,11 +291,6 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     children = valueString;
     title = valueString;
   }
-  if (/*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
-    children = /*#__PURE__*/React.cloneElement(children, {
-      focusElementRef
-    });
-  }
   const draggableEventHandlers = disableDragEvents ? null : {
     onDragEnter: publish('cellDragEnter', onDragEnter),
     onDragOver: publish('cellDragOver', onDragOver)

package/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -78,7 +78,7 @@ function GridColumnHeaderItem(props) {
   const columnMenuButtonId = useId();
   const iconButtonRef = React.useRef(null);
   const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
-  const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder, [rootProps.disableColumnReorder, disableReorder, colDef.disableReorder]);
+  const isDraggable = !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder;
   let headerComponent;
   if (colDef.renderHeader) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
@@ -124,7 +124,7 @@ function GridColumnHeaderItem(props) {
     onDoubleClick: publish('columnSeparatorDoubleClick')
   }), [publish]);
   React.useEffect(() => {
-    if (!showColumnMenuIcon) {
+    if (!showColumnMenuIcon && columnMenuOpen) {
       setShowColumnMenuIcon(columnMenuOpen);
     }
   }, [showColumnMenuIcon, columnMenuOpen]);

package/esm/components/columnSelection/GridCellCheckboxRenderer.js

@@ -5,7 +5,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -36,7 +38,19 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const {
+    isIndeterminate,
+    isChecked,
+    isSelectable
+  } = useGridSelector(apiRef, checkboxPropsSelector, {
+    groupId: id,
+    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+  });
+  const disabled = !isSelectable;
   const handleChange = event => {
+    if (disabled) {
+      return;
+    }
     const params = {
       value: event.target.checked,
       id
@@ -51,20 +65,26 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
       }
     }
   }, [apiRef, tabIndex, id, field]);
-  const handleKeyDown = React.useCallback(event => {
+  const handleKeyDown = useEventCallback(event => {
     if (event.key === ' ') {
       // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
       // TODO: Remove and add a check inside useGridKeyboardNavigation
       event.stopPropagation();
     }
-  }, []);
-  const isSelectable = apiRef.current.isRowSelectable(id);
-  const {
-    isIndeterminate,
-    isChecked
-  } = useGridSelector(apiRef, checkboxPropsSelector, {
-    groupId: id,
-    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+    if (disabled) {
+      return;
+    }
+  });
+  const handleClick = useEventCallback(event => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+  });
+  const handleMouseDown = useEventCallback(() => {
+    if (disabled) {
+      return;
+    }
   });
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
@@ -74,16 +94,21 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     tabIndex: tabIndex,
     checked: isChecked && !isIndeterminate,
     onChange: handleChange,
-    className: classes.root,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    className: clsx(classes.root, disabled && 'Mui-disabled'),
+    material: {
+      disableRipple: disabled
+    },
     slotProps: {
       htmlInput: {
+        'aria-disabled': disabled || undefined,
         'aria-label': label,
         name: 'select_row'
       }
     },
     onKeyDown: handleKeyDown,
-    indeterminate: isIndeterminate,
-    disabled: !isSelectable
+    indeterminate: isIndeterminate
   }, rootProps.slotProps?.baseCheckbox, other, {
     ref: ref
   }));
@@ -110,16 +135,6 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/components/containers/GridRootStyles.js

@@ -15,7 +15,7 @@ const separatorIconDragStyles = {
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
-const shouldShowBorderTopRightRadiusSelector = apiRef => apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
+const shouldShowBorderTopRightRadiusSelector = apiRef => !apiRef.current.state.dimensions.isReady ? apiRef.current.state.dimensions.scrollbarSize === 0 : apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -233,10 +233,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
   }, {
     [`& .${c.withBorderColor}`]: styles.withBorderColor
-  }, {
-    [`& .${c['row--dropAbove']}`]: styles['row--dropAbove']
-  }, {
-    [`& .${c['row--dropBelow']}`]: styles['row--dropBelow']
   }, {
     [`& .${c['row--beingDragged']}`]: styles['row--beingDragged']
   }]
@@ -414,6 +410,9 @@ export const GridRootStyles = styled('div', {
       alignItems: 'center',
       backgroundColor: headerBackground
     },
+    [`& .${c.columnHeader} .${c.sortButton}`]: {
+      backgroundColor: vars.header.background.base
+    },
     [`& .${c['columnHeader--filter']}`]: {
       paddingTop: 8,
       paddingBottom: 8,
@@ -513,7 +512,16 @@ export const GridRootStyles = styled('div', {
       [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}:focus-visible`]: {
-        opacity: 0.5
+        opacity: 1
+      },
+      // Add opacity only to the button content to avoid affecting the background color
+      [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortButton} > *,
+        & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}):hover .${c.sortButton} > *,
+        & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}:focus-visible > *`]: {
+        opacity: 0.78
+      },
+      [`& .${c.pivotPanelFieldActionContainer} button:hover`]: {
+        backgroundColor: vars.colors.background.base
       }
     },
     '@media (hover: none)': {
@@ -528,7 +536,7 @@ export const GridRootStyles = styled('div', {
         }
       },
       [`& .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}`]: {
-        opacity: 0.5
+        opacity: 0.78
       }
     },
     // Hide the column separator when the column has border and it is not resizable
@@ -622,7 +630,8 @@ export const GridRootStyles = styled('div', {
       [`&.${c.rowSkeleton}:hover`]: {
         backgroundColor: 'transparent'
       },
-      '&.Mui-selected': selectedStyles
+      '&.Mui-selected': selectedStyles,
+      position: 'relative'
     },
     /* Cell styles */
     [`& .${c.cell}`]: {
@@ -867,38 +876,6 @@ export const GridRootStyles = styled('div', {
         display: 'none'
       }
     },
-    [`& .${c['row--dropAbove']}`]: {
-      position: 'relative',
-      '&::before': {
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: vars.colors.interactive.selected
-      }
-    },
-    [`& .${c['row--dropBelow']}`]: {
-      position: 'relative',
-      '&::after': {
-        zIndex: 100,
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        bottom: '-2px',
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: vars.colors.interactive.selected
-      },
-      [`&.${c['row--lastVisible']}`]: {
-        '&::after': {
-          bottom: 'calc(var(--DataGrid-hasScrollY) * 0px + (1 - var(--DataGrid-hasScrollY)) * -2px)'
-        }
-      }
-    },
     [`& .${c['row--beingDragged']}`]: {
       color: vars.colors.foreground.disabled,
       '&:hover': {

package/esm/components/toolbarV8/Toolbar.js

@@ -29,7 +29,7 @@ const ToolbarRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Toolbar'
 })({
-  flex: 0,
+  flex: '0 1 1px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'end',

package/esm/components/virtualization/GridVirtualScrollbar.d.ts

@@ -7,6 +7,7 @@ type GridVirtualScrollbarProps = {
     top: number;
   }>;
 };
+export declare const scrollbarSizeCssExpression = "calc(max(var(--DataGrid-scrollbarSize), 14px))";
 export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, {}, {}>;
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/esm/components/virtualization/GridVirtualScrollbar.js

@@ -22,6 +22,12 @@ const useUtilityClasses = (ownerState, position) => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+
+// In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
+// their size to be 0px throughout all the calculations, but the floating scrollbar container does need
+// to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
+// don't have a method to find the required size for scrollbars on those platforms.
+export const scrollbarSizeCssExpression = 'calc(max(var(--DataGrid-scrollbarSize), 14px))';
 const Scrollbar = styled('div')({
   position: 'absolute',
   display: 'inline-block',
@@ -29,11 +35,7 @@ const Scrollbar = styled('div')({
   '&:hover': {
     zIndex: 70
   },
-  // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
-  // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
-  // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
-  // don't have a method to find the required size for scrollbars on those platforms.
-  '--size': 'calc(max(var(--DataGrid-scrollbarSize), 14px))'
+  '--size': scrollbarSizeCssExpression
 });
 const ScrollbarVertical = styled(Scrollbar)({
   width: 'var(--size)',
@@ -65,7 +67,10 @@ export const ScrollbarCorner = styled(Scrollbar)({
   height: 'var(--size)',
   right: 0,
   bottom: 0,
-  overflow: 'scroll'
+  overflow: 'scroll',
+  '@media print': {
+    display: 'none'
+  }
 });
 const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = useGridPrivateApiContext();
@@ -94,7 +99,7 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
       return;
     }
     isLocked.current = true;
-    scrollbar[propertyScroll] = scrollPosition[propertyScrollPosition];
+    scrollbar[propertyScroll] = props.scrollPosition.current[propertyScrollPosition];
   });
   const onScrollbarScroll = useEventCallback(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;

package/esm/components/virtualization/GridVirtualScroller.js

@@ -19,6 +19,7 @@ import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScroll
 import { GridVirtualScrollbar as Scrollbar, ScrollbarCorner } from "./GridVirtualScrollbar.js";
 import { GridScrollShadows as ScrollShadows } from "../GridScrollShadows.js";
 import { GridOverlayWrapper } from "../base/GridOverlays.js";
+import { useGridVirtualizer } from "../../hooks/core/useGridVirtualizer.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -82,7 +83,7 @@ function GridVirtualScroller(props) {
     loadingOverlayVariant
   };
   const classes = useUtilityClasses(ownerState);
-  const virtualScroller = apiRef.current.virtualizer.api.useVirtualization().getters;
+  const virtualScroller = useGridVirtualizer().api.getters;
   const {
     getContainerProps,
     getScrollerProps,

package/esm/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -36,7 +36,7 @@ const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRen
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const offsetTop = apiRef.current.virtualizer.api.useVirtualization().getters.getOffsetTop();
+  const offsetTop = apiRef.current.virtualizer.api.getters.getOffsetTop();
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: rootProps,

package/esm/constants/dataGridPropsDefaultValues.js

@@ -57,5 +57,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  virtualizeColumnsWithAutoRowHeight: false
+  virtualizeColumnsWithAutoRowHeight: false,
+  tabNavigation: 'none'
 };

package/esm/constants/gridClasses.d.ts

@@ -572,14 +572,6 @@ export interface GridClasses {
    * Styles applied to the floating special row reorder cell element when it is dragged.
    */
   'row--dragging': string;
-  /**
-   * Styles applied to the row element when it is a drop target above.
-   */
-  'row--dropAbove': string;
-  /**
-   * Styles applied to the row element when it is a drop target below.
-   */
-  'row--dropBelow': string;
   /**
    * Styles applied to the row element when it is being dragged (entire row).
    */

package/esm/constants/gridClasses.js

@@ -5,4 +5,4 @@ export function getDataGridUtilityClass(slot) {
 }
 export const gridClasses = generateUtilityClasses('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
 // TODO v9: Rename to `cell--dragging`
-'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+'row--dragging', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/esm/hooks/core/gridPropsSelectors.d.ts

@@ -6,4 +6,5 @@ import type { GridRowId } from "../../models/gridRows.js";
  * @param {GridRowModel} row - The row to get the id for
  * @returns {GridRowId} The row id
  */
-export declare const gridRowIdSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridValidRowModel, GridRowId>;
+export declare const gridRowIdSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridValidRowModel, GridRowId>;
+export declare const gridRowSelectableSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, ((params: import("@mui/x-data-grid").GridRowParams<any>) => boolean) | undefined>;

package/esm/hooks/core/gridPropsSelectors.js

@@ -12,4 +12,7 @@ export const gridRowIdSelector = createRootSelector((state, row) => {
     return row[GRID_ID_AUTOGENERATED];
   }
   return state.props.getRowId ? state.props.getRowId(row) : row.id;
+});
+export const gridRowSelectableSelector = createRootSelector(state => {
+  return state.props.isRowSelectable;
 });

package/esm/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -8,6 +8,7 @@ import { GridHydrateRowsValue } from "../../features/rows/gridRowsInterfaces.js"
 import { GridPreferencePanelsValue } from "../../features/preferencesPanel/index.js";
 import { GridGetRowsParams, GridGetRowsResponse } from "../../../models/gridDataSource.js";
 import { HeightEntry } from "../../features/rows/gridRowsMetaInterfaces.js";
+import type { RowReorderDropPosition } from "../../../models/api/gridRowApi.js";
 export type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
 export interface GridPipeProcessingLookup {
   columnMenu: {
@@ -97,12 +98,12 @@ export interface GridPipeProcessingLookup {
    *   - For example before first row is `0` and after the last row is `rows.length`.
    * If the reorder is invalid, it returns `-1`.
    */
-  getRowReorderTargetIndex: {
-    value: number;
+  isRowReorderValid: {
+    value: boolean;
     context: {
       sourceRowId: GridRowId;
       targetRowId: GridRowId;
-      dropPosition: 'above' | 'below';
+      dropPosition: RowReorderDropPosition;
       dragDirection: 'up' | 'down';
     };
   };