@mui/x-data-grid 6.16.1 → 6.16.2

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -132,4 +132,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/modern/components/virtualization/GridVirtualScroller.js

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

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const 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', '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 const 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/modern/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -34,11 +34,20 @@ export const unwrapGroupingColumnModel = columnGroupingModel => {
   });
   return unwrappedSubTree;
 };
-export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel) => {
+export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
   const getParents = field => unwrappedGroupingModel[field] ?? [];
   const groupingHeaderStructure = [];
   const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
   const haveSameParents = (field1, field2, depth) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
+  const haveDifferentContainers = (field1, field2) => {
+    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
+      return true;
+    }
+    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
+      return true;
+    }
+    return false;
+  };
   for (let depth = 0; depth < maxDepth; depth += 1) {
     const depthStructure = orderedColumns.reduce((structure, newField) => {
       const groupId = getParents(newField)[depth] ?? null;
@@ -51,7 +60,9 @@ export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGrouping
       const lastGroup = structure[structure.length - 1];
       const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
       const 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 [...structure, {
           columnFields: [newField],

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

@@ -46,7 +46,9 @@ export const columnGroupsStateInitializer = (state, props, apiRef) => {
   const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
   const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
-  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel,
+  // @ts-expect-error Move this part to `Pro` package
+  apiRef.current.state.pinnedColumns ?? {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
   return _extends({}, state, {
     columnGrouping: {
@@ -83,7 +85,10 @@ export const useGridColumnGrouping = (apiRef, props) => {
     const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
     apiRef.current.setState(state => {
       const orderedFields = state.columns?.orderedFields ?? [];
-      const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel);
+
+      // @ts-expect-error Move this logic to `Pro` package
+      const pinnedColumns = state.pinnedColumns ?? {};
+      const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
         columnGrouping: _extends({}, state.columnGrouping, {
           headerStructure: columnGroupsHeaderStructure
@@ -95,11 +100,13 @@ export const useGridColumnGrouping = (apiRef, props) => {
     if (!props.experimentalFeatures?.columnGrouping) {
       return;
     }
+    // @ts-expect-error Move this logic to `Pro` package
+    const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = gridColumnFieldsSelector(apiRef);
     const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
     const groupLookup = createGroupLookup(columnGroupingModel ?? []);
     const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel ?? []);
-    const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+    const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, pinnedColumns);
     const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
     apiRef.current.setState(state => {
       return _extends({}, state, {

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

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

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

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

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

@@ -348,10 +348,16 @@ export const useGridVirtualScroller = props => {
     }
     return -1;
   }, [cellFocus, currentPage.rows]);
-  useGridApiEventHandler(apiRef, 'rowMouseEnter', params => {
+  useGridApiEventHandler(apiRef, 'rowMouseOver', (params, event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId(params.id ?? null);
   });
-  useGridApiEventHandler(apiRef, 'rowMouseLeave', () => {
+  useGridApiEventHandler(apiRef, 'rowMouseOut', (params, event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId(null);
   });
   const getRows = (params = {

package/modern/index.js

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

package/modern/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: 'صائب',

package/modern/locales/roRO.js

@@ -74,7 +74,7 @@ const 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/node/DataGrid/DataGrid.js

@@ -35,6 +35,13 @@ const 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/)
+ */
 const DataGrid = exports.DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
 
 /**
@@ -668,7 +675,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.default.oneOfType([_propTypes.default.shape({
     clipboardExport: _propTypes.default.bool,

package/node/colDef/gridDateColDef.js

@@ -60,8 +60,6 @@ const GRID_DATE_COL_DEF = exports.GRID_DATE_COL_DEF = (0, _extends2.default)({},
   valueFormatter: gridDateFormatter,
   filterOperators: (0, _gridDateOperators.getGridDateOperators)(),
   renderEditCell: _GridEditDateCell.renderEditDateCell,
-  getApplyQuickFilterFn: undefined,
-  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
 });
@@ -71,8 +69,6 @@ const GRID_DATETIME_COL_DEF = exports.GRID_DATETIME_COL_DEF = (0, _extends2.defa
   valueFormatter: gridDateTimeFormatter,
   filterOperators: (0, _gridDateOperators.getGridDateOperators)(true),
   renderEditCell: _GridEditDateCell.renderEditDateCell,
-  getApplyQuickFilterFn: undefined,
-  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
 });

package/node/components/GridRow.js

@@ -30,7 +30,7 @@ var _utils2 = require("../utils/utils");
 var _GridCell = require("./cell/GridCell");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+const _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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -84,7 +84,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       onClick,
       onDoubleClick,
       onMouseEnter,
-      onMouseLeave
+      onMouseLeave,
+      onMouseOut,
+      onMouseOver
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -329,7 +331,9 @@ const 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__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: handleRef,

package/node/components/cell/GridCell.js

@@ -57,10 +57,11 @@ const useUtilityClasses = ownerState => {
     showRightBorder,
     isEditable,
     isSelected,
+    isSelectionMode,
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', 'withBorderColor'],
+    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', isSelectionMode && !isEditable && 'cell--selectionMode', 'withBorderColor'],
     content: ['cellContent']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
@@ -466,12 +467,15 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
   const cellRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
   const focusElementRef = React.useRef(null);
+  // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature
+  const isSelectionMode = rootProps.unstable_cellSelection ?? false;
   const ownerState = {
     align,
     showRightBorder,
     isEditable,
     classes: rootProps.classes,
-    isSelected
+    isSelected,
+    isSelectionMode
   };
   const classes = useUtilityClasses(ownerState);
   const publishMouseUp = React.useCallback(eventName => event => {

package/node/components/containers/GridRootStyles.js

@@ -402,6 +402,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       overflow: 'hidden',
       textOverflow: 'ellipsis'
     },
+    [`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['cell--selectionMode']}`]: {
+      cursor: 'default'
+    },
     [`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['cell--editing']}`]: {
       padding: 1,
       display: 'flex',

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

@@ -435,4 +435,12 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    * @default {}
    */
   valueInputProps: _propTypes.default.any
-} : void 0;
+} : 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/)
+ */

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

@@ -219,4 +219,12 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
-} : void 0;
+} : 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/)
+ */

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -140,4 +140,13 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    * @returns {any[]} The array of value on which quick filter is applied
    */
   quickFilterParser: _propTypes.default.func
-} : void 0;
+} : 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/)
+ */

package/node/components/virtualization/GridVirtualScroller.js

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

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_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', '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']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_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/node/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -41,11 +41,20 @@ const unwrapGroupingColumnModel = columnGroupingModel => {
   return unwrappedSubTree;
 };
 exports.unwrapGroupingColumnModel = unwrapGroupingColumnModel;
-const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel) => {
+const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
   const getParents = field => unwrappedGroupingModel[field] ?? [];
   const groupingHeaderStructure = [];
   const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
   const haveSameParents = (field1, field2, depth) => (0, _utils.isDeepEqual)(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
+  const haveDifferentContainers = (field1, field2) => {
+    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
+      return true;
+    }
+    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
+      return true;
+    }
+    return false;
+  };
   for (let depth = 0; depth < maxDepth; depth += 1) {
     const depthStructure = orderedColumns.reduce((structure, newField) => {
       const groupId = getParents(newField)[depth] ?? null;
@@ -58,7 +67,9 @@ const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel)
       const lastGroup = structure[structure.length - 1];
       const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
       const 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 [...structure, {
           columnFields: [newField],

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

@@ -55,7 +55,9 @@ const columnGroupsStateInitializer = (state, props, apiRef) => {
   const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
   const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
   const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
-  const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel);
+  const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel,
+  // @ts-expect-error Move this part to `Pro` package
+  apiRef.current.state.pinnedColumns ?? {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
   return (0, _extends2.default)({}, state, {
     columnGrouping: {
@@ -93,7 +95,10 @@ const useGridColumnGrouping = (apiRef, props) => {
     const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
     apiRef.current.setState(state => {
       const orderedFields = state.columns?.orderedFields ?? [];
-      const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(orderedFields, unwrappedGroupingModel);
+
+      // @ts-expect-error Move this logic to `Pro` package
+      const pinnedColumns = state.pinnedColumns ?? {};
+      const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return (0, _extends2.default)({}, state, {
         columnGrouping: (0, _extends2.default)({}, state.columnGrouping, {
           headerStructure: columnGroupsHeaderStructure
@@ -105,11 +110,13 @@ const useGridColumnGrouping = (apiRef, props) => {
     if (!props.experimentalFeatures?.columnGrouping) {
       return;
     }
+    // @ts-expect-error Move this logic to `Pro` package
+    const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
     const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
     const groupLookup = createGroupLookup(columnGroupingModel ?? []);
     const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(columnGroupingModel ?? []);
-    const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel);
+    const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel, pinnedColumns);
     const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
     apiRef.current.setState(state => {
       return (0, _extends2.default)({}, state, {

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

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

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

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

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

@@ -359,10 +359,16 @@ const useGridVirtualScroller = props => {
     }
     return -1;
   }, [cellFocus, currentPage.rows]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowMouseEnter', params => {
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowMouseOver', (params, event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId(params.id ?? null);
   });
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowMouseLeave', () => {
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowMouseOut', (params, event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId(null);
   });
   const getRows = (params = {

package/node/index.js

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