@mui/x-data-grid 6.16.0 → 6.16.2

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -350,11 +350,17 @@ export const useGridVirtualScroller = props => {
     }
     return -1;
   }, [cellFocus, currentPage.rows]);
-  useGridApiEventHandler(apiRef, 'rowMouseEnter', params => {
+  useGridApiEventHandler(apiRef, 'rowMouseOver', (params, event) => {
     var _params$id;
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId((_params$id = params.id) != null ? _params$id : null);
   });
-  useGridApiEventHandler(apiRef, 'rowMouseLeave', () => {
+  useGridApiEventHandler(apiRef, 'rowMouseOut', (params, event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId(null);
   });
   const getRows = (params = {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.16.0
+ * @mui/x-data-grid v6.16.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/DataGrid/DataGrid.js

@@ -27,6 +27,13 @@ var DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref)
     }))
   });
 });
+/**
+ * Demos:
+ * - [DataGrid](https://mui.com/x/react-data-grid/demo/)
+ *
+ * API:
+ * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
+ */
 export var DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
 
 /**
@@ -662,7 +669,7 @@ DataGridRaw.propTypes = {
   /**
    * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
    * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
-   * @default: false
+   * @default false
    */
   unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
     clipboardExport: PropTypes.bool,

package/legacy/colDef/gridDateColDef.js

@@ -48,8 +48,6 @@ export var GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined,
-  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: function pastedValueParser(value) {
     return new Date(value);
@@ -61,8 +59,6 @@ export var GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined,
-  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: function pastedValueParser(value) {
     return new Date(value);

package/legacy/components/GridRow.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -78,6 +78,8 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     onDoubleClick = props.onDoubleClick,
     onMouseEnter = props.onMouseEnter,
     onMouseLeave = props.onMouseLeave,
+    onMouseOut = props.onMouseOut,
+    onMouseOver = props.onMouseOver,
     other = _objectWithoutProperties(props, _excluded);
   var apiRef = useGridApiContext();
   var ref = React.useRef(null);
@@ -328,7 +330,9 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     onClick: publishClick,
     onDoubleClick: publish('rowDoubleClick', onDoubleClick),
     onMouseEnter: publish('rowMouseEnter', onMouseEnter),
-    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave),
+    onMouseOut: publish('rowMouseOut', onMouseOut),
+    onMouseOver: publish('rowMouseOver', onMouseOver)
   } : null;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: handleRef,

package/legacy/components/cell/GridCell.js

@@ -47,9 +47,10 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     showRightBorder = ownerState.showRightBorder,
     isEditable = ownerState.isEditable,
     isSelected = ownerState.isSelected,
+    isSelectionMode = ownerState.isSelectionMode,
     classes = ownerState.classes;
   var slots = {
-    root: ['cell', "cell--text".concat(capitalize(align)), isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', 'withBorderColor'],
+    root: ['cell', "cell--text".concat(capitalize(align)), isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', isSelectionMode && !isEditable && 'cell--selectionMode', 'withBorderColor'],
     content: ['cellContent']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -386,7 +387,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
 } : void 0;
 export { MemoizedCellWrapper as GridCellWrapper, GridCell };
 var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _rootProps$experiment3, _rootProps$experiment4;
+  var _rootProps$unstable_c, _rootProps$experiment3, _rootProps$experiment4;
   var column = props.column,
     rowId = props.rowId,
     editCellState = props.editCellState,
@@ -460,12 +461,15 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var cellRef = React.useRef(null);
   var handleRef = useForkRef(ref, cellRef);
   var focusElementRef = React.useRef(null);
+  // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature
+  var isSelectionMode = (_rootProps$unstable_c = rootProps.unstable_cellSelection) != null ? _rootProps$unstable_c : false;
   var ownerState = {
     align: align,
     showRightBorder: showRightBorder,
     isEditable: isEditable,
     classes: rootProps.classes,
-    isSelected: isSelected
+    isSelected: isSelected,
+    isSelectionMode: isSelectionMode
   };
   var classes = useUtilityClasses(ownerState);
   var publishMouseUp = React.useCallback(function (eventName) {

package/legacy/components/containers/GridRootStyles.js

@@ -27,12 +27,12 @@ export var GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
-    return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), styles['root--disableUserSelection']), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
+    return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), styles['root--disableUserSelection']), _defineProperty({}, "&.".concat(gridClasses.autosizing), styles.autosizing), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
     _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses['cell--rangeTop']), styles['cell--rangeTop']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeBottom']), styles['cell--rangeBottom']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeLeft']), styles['cell--rangeLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeRight']), styles['cell--rangeRight']), _defineProperty({}, "& .".concat(gridClasses['cell--withRightBorder']), styles['cell--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--withRightBorder']), styles['columnHeader--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.headerFilterRow), styles.headerFilterRow), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorderColor), styles.withBorderColor), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
-})(function (_ref60) {
-  var _mediaHoverHover, _mediaHoverNone, _$concat2, _extends2;
-  var theme = _ref60.theme;
+})(function (_ref61) {
+  var _$concat2, _mediaHoverHover, _mediaHoverNone, _$concat3, _extends2;
+  var theme = _ref61.theme;
   var borderColor = getBorderColor(theme);
   var radius = theme.shape.borderRadius;
   var gridStyle = _extends({
@@ -61,7 +61,11 @@ export var GridRootStyles = styled('div', {
     height: 'auto'
   }, "& .".concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
     borderBottomColor: 'transparent'
-  })), _defineProperty(_extends2, "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
+  })), _defineProperty(_extends2, "&.".concat(gridClasses.autosizing), (_$concat2 = {}, _defineProperty(_$concat2, "& .".concat(gridClasses.columnHeaderTitleContainerContent, " > *"), {
+    overflow: 'visible !important'
+  }), _defineProperty(_$concat2, "& .".concat(gridClasses.cell, " > *"), {
+    overflow: 'visible !important'
+  }), _$concat2)), _defineProperty(_extends2, "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
     borderBottomColor: 'transparent'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ", & .").concat(gridClasses.cell), {
     WebkitTapHighlightColor: 'transparent',
@@ -145,7 +149,7 @@ export var GridRootStyles = styled('div', {
     left: -12
   }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--sideRight']), {
     right: -12
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--resizable']), (_$concat2 = {
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--resizable']), (_$concat3 = {
     cursor: 'col-resize',
     touchAction: 'none',
     '&:hover': {
@@ -155,11 +159,11 @@ export var GridRootStyles = styled('div', {
         color: borderColor
       }
     }
-  }, _defineProperty(_$concat2, "&.".concat(gridClasses['columnSeparator--resizing']), {
+  }, _defineProperty(_$concat3, "&.".concat(gridClasses['columnSeparator--resizing']), {
     color: (theme.vars || theme).palette.text.primary
-  }), _defineProperty(_$concat2, '& svg', {
+  }), _defineProperty(_$concat3, '& svg', {
     pointerEvents: 'none'
-  }), _$concat2)), _defineProperty(_extends2, "& .".concat(gridClasses.iconSeparator), {
+  }), _$concat3)), _defineProperty(_extends2, "& .".concat(gridClasses.iconSeparator), {
     color: 'inherit'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.menuIcon), {
     width: 0,
@@ -215,6 +219,8 @@ export var GridRootStyles = styled('div', {
   }), _defineProperty(_extends2, "& .".concat(gridClasses.cellContent), {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--selectionMode']), {
+    cursor: 'default'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--editing']), {
     padding: 1,
     display: 'flex',

package/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -468,4 +468,12 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    */
   valueInputProps: PropTypes.any
 } : void 0;
+
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterForm API](https://mui.com/x/api/data-grid/grid-filter-form/)
+ */
 export { GridFilterForm };

package/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -224,4 +224,12 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
+
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
+ */
 export { GridFilterPanel, getGridFilter };

package/legacy/components/toolbar/GridToolbarQuickFilter.js

@@ -149,4 +149,13 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    */
   quickFilterParser: PropTypes.func
 } : void 0;
+
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ * - [Filtering - quick filter](https://mui.com/x/react-data-grid/filtering/quick-filter/)
+ *
+ * API:
+ * - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/)
+ */
 export { GridToolbarQuickFilter };

package/legacy/components/virtualization/GridVirtualScroller.js

@@ -26,8 +26,10 @@ var VirtualScrollerRoot = styled('div', {
   position: 'relative',
   '@media print': {
     overflow: 'hidden'
-  }
+  },
+  zIndex: 0 // See https://github.com/mui/mui-x/issues/10547
 });
+
 var GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualScroller(props, ref) {
   var rootProps = useGridRootProps();
   var classes = useUtilityClasses(rootProps);

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/legacy/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -33,7 +33,7 @@ export var unwrapGroupingColumnModel = function unwrapGroupingColumnModel(column
   });
   return unwrappedSubTree;
 };
-export var getColumnGroupsHeaderStructure = function getColumnGroupsHeaderStructure(orderedColumns, unwrappedGroupingModel) {
+export var getColumnGroupsHeaderStructure = function getColumnGroupsHeaderStructure(orderedColumns, unwrappedGroupingModel, pinnedFields) {
   var getParents = function getParents(field) {
     var _unwrappedGroupingMod;
     return (_unwrappedGroupingMod = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod : [];
@@ -45,6 +45,15 @@ export var getColumnGroupsHeaderStructure = function getColumnGroupsHeaderStruct
   var haveSameParents = function haveSameParents(field1, field2, depth) {
     return isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
   };
+  var haveDifferentContainers = function haveDifferentContainers(field1, field2) {
+    if (pinnedFields != null && pinnedFields.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
+      return true;
+    }
+    if (pinnedFields != null && pinnedFields.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
+      return true;
+    }
+    return false;
+  };
   var _loop = function _loop(depth) {
     var depthStructure = orderedColumns.reduce(function (structure, newField) {
       var _getParents$depth;
@@ -58,7 +67,9 @@ export var getColumnGroupsHeaderStructure = function getColumnGroupsHeaderStruct
       var lastGroup = structure[structure.length - 1];
       var prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
       var prevGroupId = lastGroup.groupId;
-      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth)) {
+      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth) ||
+      // Fix for https://github.com/mui/mui-x/issues/7041
+      haveDifferentContainers(prevField, newField)) {
         // It's a new group
         return [].concat(_toConsumableArray(structure), [{
           columnFields: [newField],

package/legacy/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -37,7 +37,7 @@ var createGroupLookup = function createGroupLookup(columnGroupingModel) {
   return _extends({}, groupLookup);
 };
 export var columnGroupsStateInitializer = function columnGroupsStateInitializer(state, props, apiRef) {
-  var _props$experimentalFe, _props$columnGrouping, _props$columnGrouping2;
+  var _props$experimentalFe, _props$columnGrouping, _props$columnGrouping2, _apiRef$current$state;
   if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
     return state;
   }
@@ -45,7 +45,8 @@ export var columnGroupsStateInitializer = function columnGroupsStateInitializer(
   var visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   var groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
   var unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
-  var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+  var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, // @ts-expect-error Move this part to `Pro` package
+  (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
   var maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max.apply(Math, _toConsumableArray(visibleColumnFields.map(function (field) {
     var _unwrappedGroupingMod, _unwrappedGroupingMod2;
     return (_unwrappedGroupingMod = (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod2.length) != null ? _unwrappedGroupingMod : 0;
@@ -87,9 +88,12 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
     var _props$columnGrouping3;
     var unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping3 = props.columnGroupingModel) != null ? _props$columnGrouping3 : []);
     apiRef.current.setState(function (state) {
-      var _state$columns$ordere, _state$columns;
+      var _state$columns$ordere, _state$columns, _state$pinnedColumns;
       var orderedFields = (_state$columns$ordere = (_state$columns = state.columns) == null ? void 0 : _state$columns.orderedFields) != null ? _state$columns$ordere : [];
-      var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel);
+
+      // @ts-expect-error Move this logic to `Pro` package
+      var pinnedColumns = (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : {};
+      var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
         columnGrouping: _extends({}, state.columnGrouping, {
           headerStructure: columnGroupsHeaderStructure
@@ -98,15 +102,17 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
     });
   }, [apiRef, props.columnGroupingModel]);
   var updateColumnGroupingState = React.useCallback(function (columnGroupingModel) {
-    var _props$experimentalFe2;
+    var _props$experimentalFe2, _apiRef$current$getPi, _apiRef$current$getPi2, _apiRef$current;
     if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
       return;
     }
+    // @ts-expect-error Move this logic to `Pro` package
+    var pinnedColumns = (_apiRef$current$getPi = (_apiRef$current$getPi2 = (_apiRef$current = apiRef.current).getPinnedColumns) == null ? void 0 : _apiRef$current$getPi2.call(_apiRef$current)) != null ? _apiRef$current$getPi : {};
     var columnFields = gridColumnFieldsSelector(apiRef);
     var visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
     var groupLookup = createGroupLookup(columnGroupingModel != null ? columnGroupingModel : []);
     var unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel != null ? columnGroupingModel : []);
-    var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+    var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, pinnedColumns);
     var maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max.apply(Math, _toConsumableArray(visibleColumnFields.map(function (field) {
       var _unwrappedGroupingMod4, _unwrappedGroupingMod5;
       return (_unwrappedGroupingMod4 = (_unwrappedGroupingMod5 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod5.length) != null ? _unwrappedGroupingMod4 : 0;

package/legacy/hooks/features/columns/gridColumnsUtils.js

@@ -54,7 +54,6 @@ export function computeFlexColumnsWidth(_ref) {
     for (var i = 0; i < flexColumns.length; i += 1) {
       var column = flexColumns[i];
       if (flexColumnsLookup.all[column.field] && flexColumnsLookup.all[column.field].frozen === true) {
-        // eslint-disable-next-line no-continue
         continue;
       }
 

package/legacy/hooks/features/filter/gridFilterUtils.js

@@ -177,14 +177,14 @@ export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterIte
 
   // We generate a new function with `eval()` to avoid expensive patterns for JS engines
   // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
-  var filterItemTemplate = "(function filterItem$$(appliers, row, shouldApplyFilter) {\n      ".concat(appliers.map(function (applier, i) {
+  var filterItemTemplate = "(function filterItem$$(getRowId, appliers, row, shouldApplyFilter) {\n      ".concat(appliers.map(function (applier, i) {
     return "const shouldApply".concat(i, " = !shouldApplyFilter || shouldApplyFilter(").concat(JSON.stringify(applier.item.field), ");");
   }).join('\n'), "\n\n      const result$$ = {\n      ").concat(appliers.map(function (applier, i) {
     return "".concat(JSON.stringify(String(applier.item.id)), ":\n          !shouldApply").concat(i, " ?\n            false :\n            ").concat(applier.v7 ? "appliers[".concat(i, "].fn(row)") : "appliers[".concat(i, "].fn(").concat(getRowId ? 'getRowId(row)' : 'row.id', ")"), ",\n      ");
   }).join('\n'), "};\n\n      return result$$;\n    })");
   var filterItemCore = evalCode(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
   var filterItem = function filterItem(row, shouldApplyItem) {
-    return filterItemCore(appliers, row, shouldApplyItem);
+    return filterItemCore(getRowId, appliers, row, shouldApplyItem);
   };
   filterItemsApplierId += 1;
   return filterItem;
@@ -238,7 +238,7 @@ export var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilt
     var result = {};
     var usedCellParams = {};
 
-    /* eslint-disable no-restricted-syntax, no-labels, no-continue */
+    /* eslint-disable no-restricted-syntax, no-labels */
     outer: for (var v = 0; v < quickFilterValues.length; v += 1) {
       var filterValue = quickFilterValues[v];
       for (var i = 0; i < appliersPerField.length; i += 1) {
@@ -273,7 +273,7 @@ export var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilt
       }
       result[filterValue] = false;
     }
-    /* eslint-enable no-restricted-syntax, no-labels, no-continue */
+    /* eslint-enable no-restricted-syntax, no-labels */
 
     return result;
   };

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -376,11 +376,17 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     }
     return -1;
   }, [cellFocus, currentPage.rows]);
-  useGridApiEventHandler(apiRef, 'rowMouseEnter', function (params) {
+  useGridApiEventHandler(apiRef, 'rowMouseOver', function (params, event) {
     var _params$id;
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId((_params$id = params.id) != null ? _params$id : null);
   });
-  useGridApiEventHandler(apiRef, 'rowMouseLeave', function () {
+  useGridApiEventHandler(apiRef, 'rowMouseOut', function (params, event) {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId(null);
   });
   var getRows = function getRows() {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.16.0
+ * @mui/x-data-grid v6.16.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/locales/arSD.js

@@ -39,7 +39,7 @@ var arSDGrid = {
   columnsPanelHideAllButton: 'إخفاء الكل',
   // Filter panel text
   filterPanelAddFilter: 'إضافة مرشِح',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'حذف الكل',
   filterPanelDeleteIconLabel: 'حذف',
   filterPanelLogicOperator: 'عامل منطقي',
   filterPanelOperator: 'عامل',
@@ -62,34 +62,32 @@ var arSDGrid = {
   filterOperatorIsEmpty: 'خالي',
   filterOperatorIsNotEmpty: 'غير خالي',
   filterOperatorIsAnyOf: 'أي من',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'يحتوي على',
+  headerFilterOperatorEquals: 'يساوي',
+  headerFilterOperatorStartsWith: 'يبدأ ب',
+  headerFilterOperatorEndsWith: 'ينتهي ب',
+  headerFilterOperatorIs: 'هو',
+  headerFilterOperatorNot: 'هو ليس',
+  headerFilterOperatorAfter: 'يقع بعد',
+  headerFilterOperatorOnOrAfter: 'هو على او بعد',
+  headerFilterOperatorBefore: 'يقع قبل',
+  headerFilterOperatorOnOrBefore: 'هو على او بعد',
+  headerFilterOperatorIsEmpty: 'هو فارغ',
+  headerFilterOperatorIsNotEmpty: 'هو ليس فارغ',
+  headerFilterOperatorIsAnyOf: 'هو أي من',
+  'headerFilterOperator=': 'يساوي',
+  'headerFilterOperator!=': 'لا يساوي',
+  'headerFilterOperator>': 'أكبر من',
+  'headerFilterOperator>=': 'أكبر من او يساوي',
+  'headerFilterOperator<': 'اصغر من',
+  'headerFilterOperator<=': 'اصغر من او يساوي',
   // Filter values text
   filterValueAny: 'أي',
   filterValueTrue: 'صائب',

package/legacy/locales/roRO.js

@@ -76,7 +76,7 @@ var roROGrid = {
   headerFilterOperatorIs: 'Este',
   headerFilterOperatorNot: 'Nu este',
   headerFilterOperatorAfter: 'Este după',
-  headerFilterOperatorOnOrAfter: 'Este la sau „după”',
+  headerFilterOperatorOnOrAfter: 'Este la sau după',
   headerFilterOperatorBefore: 'Este înainte de',
   headerFilterOperatorOnOrBefore: 'este la sau înainte de',
   headerFilterOperatorIsEmpty: 'Este gol',

package/locales/arSD.js

@@ -37,7 +37,7 @@ const arSDGrid = {
   columnsPanelHideAllButton: 'إخفاء الكل',
   // Filter panel text
   filterPanelAddFilter: 'إضافة مرشِح',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'حذف الكل',
   filterPanelDeleteIconLabel: 'حذف',
   filterPanelLogicOperator: 'عامل منطقي',
   filterPanelOperator: 'عامل',
@@ -60,34 +60,32 @@ const arSDGrid = {
   filterOperatorIsEmpty: 'خالي',
   filterOperatorIsNotEmpty: 'غير خالي',
   filterOperatorIsAnyOf: 'أي من',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'يحتوي على',
+  headerFilterOperatorEquals: 'يساوي',
+  headerFilterOperatorStartsWith: 'يبدأ ب',
+  headerFilterOperatorEndsWith: 'ينتهي ب',
+  headerFilterOperatorIs: 'هو',
+  headerFilterOperatorNot: 'هو ليس',
+  headerFilterOperatorAfter: 'يقع بعد',
+  headerFilterOperatorOnOrAfter: 'هو على او بعد',
+  headerFilterOperatorBefore: 'يقع قبل',
+  headerFilterOperatorOnOrBefore: 'هو على او بعد',
+  headerFilterOperatorIsEmpty: 'هو فارغ',
+  headerFilterOperatorIsNotEmpty: 'هو ليس فارغ',
+  headerFilterOperatorIsAnyOf: 'هو أي من',
+  'headerFilterOperator=': 'يساوي',
+  'headerFilterOperator!=': 'لا يساوي',
+  'headerFilterOperator>': 'أكبر من',
+  'headerFilterOperator>=': 'أكبر من او يساوي',
+  'headerFilterOperator<': 'اصغر من',
+  'headerFilterOperator<=': 'اصغر من او يساوي',
   // Filter values text
   filterValueAny: 'أي',
   filterValueTrue: 'صائب',