@mui/x-data-grid 8.10.2 → 8.11.1

package/components/containers/GridRootStyles.js

@@ -547,6 +547,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         opacity: 0.5
       }
     },
+    // Hide the column separator when the column has border and it is not resizable
+    // In this case, this column separator may block interaction with the separator from the adjacent column that is resizable
+    [`& .${_gridClasses.gridClasses['columnHeader--withLeftBorder']} .${_gridClasses.gridClasses['columnSeparator--sideLeft']}:not(.${_gridClasses.gridClasses['columnSeparator--resizable']}), & .${_gridClasses.gridClasses['columnHeader--withRightBorder']} .${_gridClasses.gridClasses['columnSeparator--sideRight']}:not(.${_gridClasses.gridClasses['columnSeparator--resizable']})`]: {
+      display: 'none'
+    },
     [`& .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: {
       left: columnSeparatorOffset
     },
@@ -796,7 +801,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
       display: 'none'
     },
-    [`& .${_gridClasses.gridClasses['columnHeader--dragging']}, & .${_gridClasses.gridClasses['row--dragging']}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--dragging']}`]: {
       background: _cssVariables.vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
@@ -806,8 +811,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       background: _cssVariables.vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: _cssVariables.vars.colors.interactive.disabledOpacity,
+      border: '1px solid var(--DataGrid-rowBorderColor)',
+      color: _cssVariables.vars.colors.foreground.base,
+      transform: 'translateZ(0)',
       [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
+        padding: '0 6px',
         display: 'flex'
       }
     },
@@ -883,6 +891,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['row--dropAbove']}`]: {
       position: 'relative',
       '&::before': {
+        pointerEvents: 'none',
         content: '""',
         position: 'absolute',
         top: 0,
@@ -894,7 +903,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses['row--dropBelow']}`]: {
       position: 'relative',
-      '&::before': {
+      '&::after': {
+        zIndex: 100,
+        pointerEvents: 'none',
         content: '""',
         position: 'absolute',
         bottom: '-2px',
@@ -904,14 +915,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         backgroundColor: _cssVariables.vars.colors.interactive.selected
       },
       [`&.${_gridClasses.gridClasses['row--lastVisible']}`]: {
-        '&::before': {
+        '&::after': {
           bottom: 'calc(var(--DataGrid-hasScrollY) * 0px + (1 - var(--DataGrid-hasScrollY)) * -2px)'
         }
       }
     },
     [`& .${_gridClasses.gridClasses['row--beingDragged']}`]: {
-      backgroundColor: _cssVariables.vars.colors.background.overlay,
-      color: _cssVariables.vars.colors.foreground.disabled
+      color: _cssVariables.vars.colors.foreground.disabled,
+      '&:hover': {
+        backgroundColor: 'transparent'
+      }
     }
   };
   return gridStyle;

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -32,8 +32,9 @@ function GridColumnMenuSortItem(props) {
   const onSortMenuItemClick = React.useCallback(event => {
     onClick(event);
     const direction = event.currentTarget.getAttribute('data-value') || null;
-    apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction);
-  }, [apiRef, colDef, onClick, sortDirection]);
+    const allowMultipleSorting = rootProps.multipleColumnsSortingMode === 'always';
+    apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction, allowMultipleSorting);
+  }, [apiRef, colDef, onClick, sortDirection, rootProps.multipleColumnsSortingMode]);
   if (rootProps.disableColumnSorting || !colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
     return null;
   }

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -5,7 +5,7 @@ import type { ValueOptions } from "../../../models/colDef/gridColDef.js";
 export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };
-declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element | null;
 declare namespace GridFilterInputMultipleSingleSelect {
   var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -27,15 +27,9 @@ function GridFilterInputMultipleSingleSelect(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  let resolvedColumn = null;
-  if (item.field) {
-    const column = apiRef.current.getColumn(item.field);
-    if ((0, _filterPanelUtils.isSingleSelectColDef)(column)) {
-      resolvedColumn = column;
-    }
-  }
-  const getOptionValue = resolvedColumn?.getOptionValue;
-  const getOptionLabel = resolvedColumn?.getOptionLabel;
+  const resolvedColumn = apiRef.current.getColumn(item.field);
+  const getOptionValue = resolvedColumn.getOptionValue;
+  const getOptionLabel = resolvedColumn.getOptionLabel;
   const isOptionEqualToValue = React.useCallback((option, value) => getOptionValue(option) === getOptionValue(value), [getOptionValue]);
   const resolvedValueOptions = React.useMemo(() => {
     return (0, _filterPanelUtils.getValueOptions)(resolvedColumn) || [];
@@ -60,6 +54,9 @@ function GridFilterInputMultipleSingleSelect(props) {
       value: value.map(getOptionValue)
     }));
   }, [applyValue, item, getOptionValue]);
+  if (!resolvedColumn || !(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
+    return null;
+  }
   const BaseAutocomplete = rootProps.slots.baseAutocomplete;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseAutocomplete, (0, _extends2.default)({
     multiple: true,

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -56,15 +56,9 @@ function GridFilterInputSingleSelect(props) {
   const labelId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? false;
-  let resolvedColumn = null;
-  if (item.field) {
-    const column = apiRef.current.getColumn(item.field);
-    if ((0, _filterPanelUtils.isSingleSelectColDef)(column)) {
-      resolvedColumn = column;
-    }
-  }
-  const getOptionValue = resolvedColumn?.getOptionValue;
-  const getOptionLabel = resolvedColumn?.getOptionLabel;
+  const resolvedColumn = apiRef.current.getColumn(item.field);
+  const getOptionValue = resolvedColumn.getOptionValue;
+  const getOptionLabel = resolvedColumn.getOptionLabel;
   const currentValueOptions = React.useMemo(() => {
     return (0, _filterPanelUtils.getValueOptions)(resolvedColumn);
   }, [resolvedColumn]);
@@ -77,7 +71,7 @@ function GridFilterInputSingleSelect(props) {
       value
     }));
   }, [currentValueOptions, getOptionValue, applyValue, item]);
-  if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
+  if (!resolvedColumn || !(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
     return null;
   }
   const label = slotProps?.root.label ?? apiRef.current.getLocaleText('filterPanelInputLabel');

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -13,10 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _rows = require("../../hooks/features/rows");
-var _virtualization = require("../../hooks/features/virtualization");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -44,14 +41,10 @@ const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = (0
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const offsetTop = (0, _useGridSelector.useGridSelector)(apiRef, () => {
-    const renderContext = (0, _virtualization.gridRenderContextSelector)(apiRef);
-    const rowsMeta = (0, _rows.gridRowsMetaSelector)(apiRef);
-    return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
-  });
+  const offsetTop = apiRef.current.virtualizer.api.useVirtualization().getters.getOffsetTop();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,

package/esm/DataGrid/DataGrid.js

@@ -7,6 +7,7 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRoot } from "../components/index.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
+import { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
 import { GridContextProvider } from "../context/GridContextProvider.js";
 import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
@@ -19,13 +20,14 @@ const configuration = {
     useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
     useGridRowAriaAttributes,
+    useGridRowsOverridableMethods,
     useCellAggregationResult: () => null
   }
 };
 const DataGridRaw = function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useGridApiInitialization(props.apiRef, props);
-  useDataGridComponent(privateApiRef, props);
+  useDataGridComponent(privateApiRef, props, configuration);
   if (process.env.NODE_ENV !== 'production') {
     validateProps(props, propValidatorsDataGrid);
   }
@@ -580,7 +582,7 @@ DataGridRaw.propTypes = {
    */
   onPreferencePanelOpen: PropTypes.func,
   /**
-   * Callback called when `processRowUpdate` throws an error or rejects.
+   * Callback called when `processRowUpdate()` throws an error or rejects.
    * @param {any} error The error thrown.
    */
   onProcessRowUpdateError: PropTypes.func,

package/esm/DataGrid/useDataGridComponent.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../models/props/DataGridProps.js";
 import { GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
-export declare const useDataGridComponent: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;
+import { GridConfiguration } from "../models/configuration/gridConfiguration.js";
+export declare const useDataGridComponent: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps, configuration: GridConfiguration) => void;

package/esm/DataGrid/useDataGridComponent.js

@@ -35,7 +35,7 @@ import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/featur
 import { listViewStateInitializer, useGridListView } from "../hooks/features/listView/useGridListView.js";
 import { propsStateInitializer } from "../hooks/core/useGridProps.js";
 import { useGridDataSource } from "../hooks/features/dataSource/useGridDataSource.js";
-export const useDataGridComponent = (apiRef, props) => {
+export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridInitialization(apiRef, props);
 
   /**
@@ -70,7 +70,7 @@ export const useDataGridComponent = (apiRef, props) => {
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
-  useGridRows(apiRef, props);
+  useGridRows(apiRef, props, configuration);
   useGridRowSpanning(apiRef, props);
   useGridParamsApi(apiRef, props);
   useGridColumnSpanning(apiRef);

package/esm/colDef/gridDateColDef.js

@@ -4,6 +4,7 @@ import { getGridDateOperators } from "./gridDateOperators.js";
 import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
 import { renderEditDateCell } from "../components/cell/GridEditDateCell.js";
 import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
+import { isAutogeneratedRow } from "../hooks/features/rows/gridRowsUtils.js";
 function throwIfNotDateObject({
   value,
   columnType,
@@ -19,6 +20,9 @@ export const gridDateFormatter = (value, row, column, apiRef) => {
     return '';
   }
   const rowId = gridRowIdSelector(apiRef, row);
+  if (isAutogeneratedRow(row) && !(value instanceof Date)) {
+    return value;
+  }
   throwIfNotDateObject({
     value,
     columnType: 'date',
@@ -32,6 +36,9 @@ export const gridDateTimeFormatter = (value, row, column, apiRef) => {
     return '';
   }
   const rowId = gridRowIdSelector(apiRef, row);
+  if (isAutogeneratedRow(row) && !(value instanceof Date)) {
+    return value;
+  }
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',

package/esm/components/GridColumnSortButton.js

@@ -10,7 +10,6 @@ import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../constants/gridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { vars } from "../constants/cssVariables.js";
-import { GridColumnUnsortedIcon } from "./GridColumnUnsortedIcon.js";
 import { NotRendered } from "../utils/assert.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -40,7 +39,7 @@ function getIcon(icons, direction, className, sortingOrder) {
   } else if (direction === 'desc') {
     Icon = icons.columnSortedDescendingIcon;
   } else {
-    Icon = GridColumnUnsortedIcon;
+    Icon = icons.columnUnsortedIcon;
     iconProps.sortingOrder = sortingOrder;
   }
   return Icon ? /*#__PURE__*/_jsx(Icon, _extends({

package/esm/components/GridColumnUnsortedIcon.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { GridBaseIconProps } from "../models/gridSlotsComponentsProps.js";
 import { GridSortDirection } from "../models/gridSortModel.js";
-interface GridColumnUnsortedIconProps extends GridBaseIconProps {
+export interface GridColumnUnsortedIconProps extends GridBaseIconProps {
   sortingOrder: GridSortDirection[];
 }
-export declare const GridColumnUnsortedIcon: React.NamedExoticComponent<GridColumnUnsortedIconProps>;
-export {};
+export declare const GridColumnUnsortedIcon: React.NamedExoticComponent<GridColumnUnsortedIconProps>;

package/esm/components/GridRow.js

@@ -23,7 +23,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelection
 import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from "../internals/constants.js";
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
-import { gridRowMaximumTreeDepthSelector, gridRowNodeSelector } from "../hooks/features/rows/gridRowsSelector.js";
+import { gridRowNodeSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "../hooks/features/editing/gridEditingSelectors.js";
 import { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
 import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
@@ -32,8 +32,11 @@ import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { createSelector } from "../utils/createSelector.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const isRowReorderingEnabledSelector = createSelector(gridEditRowsStateSelector, (editRows, rowReordering) => {
-  if (!rowReordering) {
+const isRowReorderingEnabledSelector = createSelector(gridEditRowsStateSelector, (editRows, {
+  rowReordering,
+  treeData
+}) => {
+  if (!rowReordering || treeData) {
     return false;
   }
   const isEditingRows = !isObjectEmpty(editRows);
@@ -75,10 +78,13 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const rootProps = useGridRootProps();
   const currentPage = useGridVisibleRows(apiRef, rootProps);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const rowReordering = rootProps.rowReordering;
-  const isRowReorderingEnabled = useGridSelector(apiRef, isRowReorderingEnabledSelector, rowReordering);
+  const treeData = rootProps.treeData;
+  const isRowReorderingEnabled = useGridSelector(apiRef, isRowReorderingEnabledSelector, {
+    rowReordering,
+    treeData
+  });
   const isRowDragActive = useGridSelector(apiRef, gridIsRowDragActiveSelector);
   const handleRef = useForkRef(ref, refProp);
   const rowNode = gridRowNodeSelector(apiRef, rowId);
@@ -231,7 +237,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     // fixes https://github.com/mui/mui-x/issues/11126
     const isReorderCell = column.field === '__reorder__';
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
-    const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
+    const canReorderRow = isRowReorderingEnabled && !sortModel.length;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
     const cellIsNotVisible = pinnedPosition === PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);

package/esm/components/cell/GridActionsCell.js

@@ -141,13 +141,17 @@ function GridActionsCell(props) {
       setFocusedButtonIndex(newIndex);
     }
   };
+
+  // role="menu" requires at least one child element
+  const attributes = numberOfButtons > 0 ? {
+    role: 'menu',
+    onKeyDown: handleRootKeyDown
+  } : undefined;
   return /*#__PURE__*/_jsxs("div", _extends({
-    role: "menu",
     ref: rootRef,
     tabIndex: -1,
-    className: gridClasses.actionsCell,
-    onKeyDown: handleRootKeyDown
-  }, other, {
+    className: gridClasses.actionsCell
+  }, attributes, other, {
     children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
       key: index,
       touchRippleRef: handleTouchRippleRef(index),

package/esm/components/cell/GridCell.js

@@ -125,7 +125,7 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     isEditable = false,
     value
   } = cellParams;
-  const canManageOwnFocus = column.type === 'actions' && column.getActions?.(apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled);
+  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 {
     classes: rootClasses,

package/esm/components/columnHeaders/GridColumnGroupHeader.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import useId from '@mui/utils/useId';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
+import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridColumnGroupsLookupSelector } from "../../hooks/features/columnGrouping/gridColumnGroupsSelector.js";
@@ -89,7 +90,18 @@ function GridColumnGroupHeader(props) {
     if (hasFocus) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus?.focus();
+      if (!elementToFocus) {
+        return;
+      }
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        const scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
     }
   }, [apiRef, hasFocus]);
   const publish = React.useCallback(eventName => event => {

package/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -8,6 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
+import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { ColumnHeaderMenuIcon } from "./ColumnHeaderMenuIcon.js";
 import { GridColumnHeaderMenu } from "../menu/columnMenu/GridColumnHeaderMenu.js";
@@ -167,9 +168,17 @@ function GridColumnHeaderItem(props) {
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus?.focus();
-      if (apiRef.current.columnHeadersContainerRef?.current) {
-        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (!elementToFocus) {
+        return;
+      }
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        const scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
       }
     }
   }, [apiRef, hasFocus]);

package/esm/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -7,7 +7,6 @@ import * as React from 'react';
 import clsx from 'clsx';
 import useForkRef from '@mui/utils/useForkRef';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { GridColumnHeaderTitle } from "./GridColumnHeaderTitle.js";
 import { GridColumnHeaderSeparator } from "./GridColumnHeaderSeparator.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -19,7 +18,6 @@ const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderI
       height,
       isResizing,
       sortDirection,
-      hasFocus,
       tabIndex,
       separatorSide,
       isDraggable,
@@ -37,7 +35,6 @@ const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderI
       style
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const headerCellRef = React.useRef(null);
   const handleRef = useForkRef(headerCellRef, ref);
@@ -45,17 +42,6 @@ const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderI
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
   }
-  React.useLayoutEffect(() => {
-    const columnMenuState = apiRef.current.state.columnMenu;
-    if (hasFocus && !columnMenuState.open) {
-      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
-      const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus?.focus();
-      if (apiRef.current.columnHeadersContainerRef?.current) {
-        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-      }
-    }
-  }, [apiRef, hasFocus]);
   return /*#__PURE__*/_jsxs("div", _extends({
     className: clsx(classes.root, headerClassName),
     style: _extends({}, style, {

package/esm/components/columnsManagement/GridColumnsManagement.js

@@ -178,7 +178,8 @@ function GridColumnsManagement(props) {
       children: /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
         className: classes.root,
         ownerState: rootProps,
-        children: [currentColumns.map(column => /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+        children: [currentColumns.map(column => /*#__PURE__*/_jsx(GridColumnsManagementRow, _extends({
+          as: rootProps.slots.baseCheckbox,
           className: classes.row,
           disabled: column.hideable === false || pivotActive,
           checked: columnVisibilityModel[column.field] !== false,
@@ -309,4 +310,8 @@ const GridColumnsManagementEmptyText = styled('div', {
   alignSelf: 'center',
   font: vars.typography.font.body
 });
+const GridColumnsManagementRow = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementRow'
+})();
 export { GridColumnsManagement };

package/esm/components/containers/GridRootStyles.js

@@ -541,6 +541,11 @@ export const GridRootStyles = styled('div', {
         opacity: 0.5
       }
     },
+    // Hide the column separator when the column has border and it is not resizable
+    // In this case, this column separator may block interaction with the separator from the adjacent column that is resizable
+    [`& .${c['columnHeader--withLeftBorder']} .${c['columnSeparator--sideLeft']}:not(.${c['columnSeparator--resizable']}), & .${c['columnHeader--withRightBorder']} .${c['columnSeparator--sideRight']}:not(.${c['columnSeparator--resizable']})`]: {
+      display: 'none'
+    },
     [`& .${c['columnSeparator--sideLeft']}`]: {
       left: columnSeparatorOffset
     },
@@ -790,7 +795,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.rowReorderCellPlaceholder}`]: {
       display: 'none'
     },
-    [`& .${c['columnHeader--dragging']}, & .${c['row--dragging']}`]: {
+    [`& .${c['columnHeader--dragging']}`]: {
       background: vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
@@ -800,8 +805,11 @@ export const GridRootStyles = styled('div', {
       background: vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: vars.colors.interactive.disabledOpacity,
+      border: '1px solid var(--DataGrid-rowBorderColor)',
+      color: vars.colors.foreground.base,
+      transform: 'translateZ(0)',
       [`& .${c.rowReorderCellPlaceholder}`]: {
+        padding: '0 6px',
         display: 'flex'
       }
     },
@@ -877,6 +885,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c['row--dropAbove']}`]: {
       position: 'relative',
       '&::before': {
+        pointerEvents: 'none',
         content: '""',
         position: 'absolute',
         top: 0,
@@ -888,7 +897,9 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['row--dropBelow']}`]: {
       position: 'relative',
-      '&::before': {
+      '&::after': {
+        zIndex: 100,
+        pointerEvents: 'none',
         content: '""',
         position: 'absolute',
         bottom: '-2px',
@@ -898,14 +909,16 @@ export const GridRootStyles = styled('div', {
         backgroundColor: vars.colors.interactive.selected
       },
       [`&.${c['row--lastVisible']}`]: {
-        '&::before': {
+        '&::after': {
           bottom: 'calc(var(--DataGrid-hasScrollY) * 0px + (1 - var(--DataGrid-hasScrollY)) * -2px)'
         }
       }
     },
     [`& .${c['row--beingDragged']}`]: {
-      backgroundColor: vars.colors.background.overlay,
-      color: vars.colors.foreground.disabled
+      color: vars.colors.foreground.disabled,
+      '&:hover': {
+        backgroundColor: 'transparent'
+      }
     }
   };
   return gridStyle;

package/esm/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -24,8 +24,9 @@ function GridColumnMenuSortItem(props) {
   const onSortMenuItemClick = React.useCallback(event => {
     onClick(event);
     const direction = event.currentTarget.getAttribute('data-value') || null;
-    apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction);
-  }, [apiRef, colDef, onClick, sortDirection]);
+    const allowMultipleSorting = rootProps.multipleColumnsSortingMode === 'always';
+    apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction, allowMultipleSorting);
+  }, [apiRef, colDef, onClick, sortDirection, rootProps.multipleColumnsSortingMode]);
   if (rootProps.disableColumnSorting || !colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
     return null;
   }

package/esm/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -5,7 +5,7 @@ import type { ValueOptions } from "../../../models/colDef/gridColDef.js";
 export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };
-declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element | null;
 declare namespace GridFilterInputMultipleSingleSelect {
   var propTypes: any;
 }

package/esm/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -19,15 +19,9 @@ function GridFilterInputMultipleSingleSelect(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const rootProps = useGridRootProps();
-  let resolvedColumn = null;
-  if (item.field) {
-    const column = apiRef.current.getColumn(item.field);
-    if (isSingleSelectColDef(column)) {
-      resolvedColumn = column;
-    }
-  }
-  const getOptionValue = resolvedColumn?.getOptionValue;
-  const getOptionLabel = resolvedColumn?.getOptionLabel;
+  const resolvedColumn = apiRef.current.getColumn(item.field);
+  const getOptionValue = resolvedColumn.getOptionValue;
+  const getOptionLabel = resolvedColumn.getOptionLabel;
   const isOptionEqualToValue = React.useCallback((option, value) => getOptionValue(option) === getOptionValue(value), [getOptionValue]);
   const resolvedValueOptions = React.useMemo(() => {
     return getValueOptions(resolvedColumn) || [];
@@ -52,6 +46,9 @@ function GridFilterInputMultipleSingleSelect(props) {
       value: value.map(getOptionValue)
     }));
   }, [applyValue, item, getOptionValue]);
+  if (!resolvedColumn || !isSingleSelectColDef(resolvedColumn)) {
+    return null;
+  }
   const BaseAutocomplete = rootProps.slots.baseAutocomplete;
   return /*#__PURE__*/_jsx(BaseAutocomplete, _extends({
     multiple: true,