@mui/x-data-grid 7.16.0 → 7.18.0

package/modern/locales/ukUA.js

@@ -63,7 +63,9 @@ const ukUAGrid = {
   filterPanelInputPlaceholder: 'Значення фільтра',
   // Filter operators text
   filterOperatorContains: 'містить',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'дорівнює',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'починається з',
   filterOperatorEndsWith: 'закінчується на',
   filterOperatorIs: 'дорівнює',
@@ -83,7 +85,9 @@ const ukUAGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Містить',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'Дорівнює',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'Починається з',
   headerFilterOperatorEndsWith: 'Закінчується на',
   headerFilterOperatorIs: 'Дорівнює',

package/modern/locales/urPK.js

@@ -48,7 +48,9 @@ const urPKGrid = {
   filterPanelInputPlaceholder: 'ویلیو کو فلٹر کریں',
   // Filter operators text
   filterOperatorContains: 'شامل ہے',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'برابر ہے',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'شروع ہوتا ہے',
   filterOperatorEndsWith: 'ختم ہوتا ہے',
   filterOperatorIs: 'ہے',
@@ -68,7 +70,9 @@ const urPKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'شامل ہے',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'برابر ہے',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'شروع ہوتا ہے',
   headerFilterOperatorEndsWith: 'ختم ہوتا ہے',
   headerFilterOperatorIs: 'ہے',

package/modern/locales/viVN.js

@@ -47,7 +47,9 @@ const viVNGrid = {
   filterPanelInputPlaceholder: 'Lọc giá trị',
   // Filter operators text
   filterOperatorContains: 'Chứa',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'Bằng',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'Bắt đầu bằng',
   filterOperatorEndsWith: 'Kết thúc bằng',
   filterOperatorIs: 'Là',
@@ -67,7 +69,9 @@ const viVNGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Chứa',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'Bằng',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'Bắt đầu với',
   headerFilterOperatorEndsWith: 'Kết thúc với',
   headerFilterOperatorIs: 'là',

package/modern/locales/zhCN.js

@@ -47,7 +47,9 @@ const zhCNGrid = {
   filterPanelInputPlaceholder: '筛选值',
   // Filter operators text
   filterOperatorContains: '包含',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: '等于',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: '开始于',
   filterOperatorEndsWith: '结束于',
   filterOperatorIs: '是',
@@ -67,7 +69,9 @@ const zhCNGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: '等于',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: '开始于',
   headerFilterOperatorEndsWith: '结束于',
   headerFilterOperatorIs: '是',

package/modern/locales/zhHK.js

@@ -48,7 +48,9 @@ const zhHKGrid = {
   filterPanelInputPlaceholder: '過濾值',
   // Filter operators text
   filterOperatorContains: '包含',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: '等於',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: '以。。開始',
   filterOperatorEndsWith: '以。。結束',
   filterOperatorIs: '是',
@@ -68,7 +70,9 @@ const zhHKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: '等於',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: '以。。開始',
   headerFilterOperatorEndsWith: '以。。結束',
   headerFilterOperatorIs: '是',

package/modern/locales/zhTW.js

@@ -48,7 +48,9 @@ const zhTWGrid = {
   filterPanelInputPlaceholder: '篩選值',
   // Filter operators text
   filterOperatorContains: '包含',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: '等於',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: '以...開頭',
   filterOperatorEndsWith: '以...結束',
   filterOperatorIs: '為',
@@ -68,7 +70,9 @@ const zhTWGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: '等於',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: '以...開頭',
   headerFilterOperatorEndsWith: '以...結束',
   headerFilterOperatorIs: '為',

package/modern/utils/createSelector.js

@@ -1,5 +1,5 @@
 import { lruMemoize, createSelectorCreator } from 'reselect';
-import { warnOnce } from "../internals/utils/warning.js";
+import { warnOnce } from '@mui/x-internals/warning';
 const reselectCreateSelector = createSelectorCreator({
   memoize: lruMemoize,
   memoizeOptions: {

package/modern/utils/domUtils.js

@@ -120,22 +120,22 @@ const findPinnedCells = ({
   });
   return cells;
 };
-export function findLeftPinnedCellsAfterCol(api, col) {
+export function findLeftPinnedCellsAfterCol(api, col, isRtl) {
   const colIndex = parseCellColIndex(col);
   return findPinnedCells({
     api,
     colIndex,
-    position: 'left',
-    filterFn: index => index > colIndex
+    position: isRtl ? 'right' : 'left',
+    filterFn: index => isRtl ? index < colIndex : index > colIndex
   });
 }
-export function findRightPinnedCellsBeforeCol(api, col) {
+export function findRightPinnedCellsBeforeCol(api, col, isRtl) {
   const colIndex = parseCellColIndex(col);
   return findPinnedCells({
     api,
     colIndex,
-    position: 'right',
-    filterFn: index => index < colIndex
+    position: isRtl ? 'left' : 'right',
+    filterFn: index => isRtl ? index > colIndex : index < colIndex
   });
 }
 const findPinnedHeaders = ({
@@ -159,22 +159,22 @@ const findPinnedHeaders = ({
   });
   return elements;
 };
-export function findLeftPinnedHeadersAfterCol(api, col) {
+export function findLeftPinnedHeadersAfterCol(api, col, isRtl) {
   const colIndex = parseCellColIndex(col);
   return findPinnedHeaders({
     api,
-    position: 'left',
+    position: isRtl ? 'right' : 'left',
     colIndex,
-    filterFn: index => index > colIndex
+    filterFn: index => isRtl ? index < colIndex : index > colIndex
   });
 }
-export function findRightPinnedHeadersBeforeCol(api, col) {
+export function findRightPinnedHeadersBeforeCol(api, col, isRtl) {
   const colIndex = parseCellColIndex(col);
   return findPinnedHeaders({
     api,
-    position: 'right',
+    position: isRtl ? 'left' : 'right',
     colIndex,
-    filterFn: index => index < colIndex
+    filterFn: index => isRtl ? index > colIndex : index < colIndex
   });
 }
 export function findGridHeader(api, field) {

package/node/DataGrid/DataGrid.js

@@ -125,6 +125,11 @@ DataGridRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: _propTypes.default.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: _propTypes.default.number,
   columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -750,5 +755,10 @@ DataGridRaw.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])
+  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]),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  unstable_rowSpanning: _propTypes.default.bool
 };

package/node/DataGrid/useDataGridComponent.js

@@ -33,6 +33,7 @@ var _useGridColumnSpanning = require("../hooks/features/columns/useGridColumnSpa
 var _useGridColumnGrouping = require("../hooks/features/columnGrouping/useGridColumnGrouping");
 var _virtualization = require("../hooks/features/virtualization");
 var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
+var _useGridRowSpanning = require("../hooks/features/rows/useGridRowSpanning");
 const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = (0, _useGridInitialization.useGridInitialization)(inputApiRef, props);
 
@@ -54,6 +55,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridSorting.sortingStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPreferencesPanel.preferencePanelStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridFilter.filterStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSpanning.rowSpanningStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
@@ -65,6 +67,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props);
+  (0, _useGridRowSpanning.useGridRowSpanning)(apiRef, props);
   (0, _useGridParamsApi.useGridParamsApi)(apiRef);
   (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);
   (0, _useGridColumnGrouping.useGridColumnGrouping)(apiRef, props);

package/node/DataGrid/useDataGridProps.js

@@ -81,7 +81,8 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   showColumnVerticalBorder: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
-  throttleRowsMs: 0
+  throttleRowsMs: 0,
+  unstable_rowSpanning: false
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {

package/node/colDef/gridStringOperators.js

@@ -22,34 +22,58 @@ const getGridStringQuickFilterFn = value => {
   };
 };
 exports.getGridStringQuickFilterFn = getGridStringQuickFilterFn;
+const createContainsFilterFn = (disableTrim, negate) => filterItem => {
+  if (!filterItem.value) {
+    return null;
+  }
+  const trimmedValue = disableTrim ? filterItem.value : filterItem.value.trim();
+  const filterRegex = new RegExp((0, _utils.escapeRegExp)(trimmedValue), 'i');
+  return value => {
+    if (value == null) {
+      return negate;
+    }
+    const matches = filterRegex.test(String(value));
+    return negate ? !matches : matches;
+  };
+};
+const createEqualityFilterFn = (disableTrim, negate) => filterItem => {
+  if (!filterItem.value) {
+    return null;
+  }
+  const trimmedValue = disableTrim ? filterItem.value : filterItem.value.trim();
+  const collator = new Intl.Collator(undefined, {
+    sensitivity: 'base',
+    usage: 'search'
+  });
+  return value => {
+    if (value == null) {
+      return negate;
+    }
+    const isEqual = collator.compare(trimmedValue, value.toString()) === 0;
+    return negate ? !isEqual : isEqual;
+  };
+};
+const createEmptyFilterFn = negate => () => {
+  return value => {
+    const isEmpty = value === '' || value == null;
+    return negate ? !isEmpty : isEmpty;
+  };
+};
 const getGridStringOperators = (disableTrim = false) => [{
   value: 'contains',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
-      return null;
-    }
-    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
-    const filterRegex = new RegExp((0, _utils.escapeRegExp)(filterItemValue), 'i');
-    return value => {
-      return value != null ? filterRegex.test(String(value)) : false;
-    };
-  },
+  getApplyFilterFn: createContainsFilterFn(disableTrim, false),
+  InputComponent: _GridFilterInputValue.GridFilterInputValue
+}, {
+  value: 'doesNotContain',
+  getApplyFilterFn: createContainsFilterFn(disableTrim, true),
   InputComponent: _GridFilterInputValue.GridFilterInputValue
 }, {
   value: 'equals',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
-      return null;
-    }
-    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
-    const collator = new Intl.Collator(undefined, {
-      sensitivity: 'base',
-      usage: 'search'
-    });
-    return value => {
-      return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
-    };
-  },
+  getApplyFilterFn: createEqualityFilterFn(disableTrim, false),
+  InputComponent: _GridFilterInputValue.GridFilterInputValue
+}, {
+  value: 'doesNotEqual',
+  getApplyFilterFn: createEqualityFilterFn(disableTrim, true),
   InputComponent: _GridFilterInputValue.GridFilterInputValue
 }, {
   value: 'startsWith',
@@ -79,19 +103,11 @@ const getGridStringOperators = (disableTrim = false) => [{
   InputComponent: _GridFilterInputValue.GridFilterInputValue
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return value => {
-      return value === '' || value == null;
-    };
-  },
+  getApplyFilterFn: createEmptyFilterFn(false),
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return value => {
-      return value !== '' && value != null;
-    };
-  },
+  getApplyFilterFn: createEmptyFilterFn(true),
   requiresFilterValue: false
 }, {
   value: 'isAnyOf',

package/node/components/GridRow.js

@@ -346,6 +346,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
       height: _propTypes.default.number.isRequired,
       width: _propTypes.default.number.isRequired
     }).isRequired,
+    groupHeaderHeight: _propTypes.default.number.isRequired,
     hasScrollX: _propTypes.default.bool.isRequired,
     hasScrollY: _propTypes.default.bool.isRequired,
     headerFilterHeight: _propTypes.default.number.isRequired,

package/node/components/cell/GridCell.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");
@@ -23,6 +24,7 @@ var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusState
 var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _cellBorderUtils = require("../../utils/cellBorderUtils");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
+var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
@@ -114,6 +116,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const field = column.field;
   const cellParams = (0, _useGridSelector.useGridSelector)(apiRef, () => {
     // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
@@ -134,6 +137,8 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     id: rowId,
     field
   }));
+  const hiddenCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector);
+  const spannedCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningSpannedCellsSelector);
   const {
     cellMode,
     hasFocus,
@@ -206,6 +211,8 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       propHandler(event);
     }
   }, [apiRef, field, rowId]);
+  const isCellRowSpanned = hiddenCells[rowId]?.[field] ?? false;
+  const rowSpan = spannedCells[rowId]?.[field] ?? 1;
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -218,14 +225,21 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     const cellStyle = (0, _extends2.default)({
       '--width': `${width}px`
     }, styleProp);
-    if (pinnedPosition === PinnedPosition.LEFT) {
-      cellStyle.left = pinnedOffset;
+    const isLeftPinned = pinnedPosition === PinnedPosition.LEFT;
+    const isRightPinned = pinnedPosition === PinnedPosition.RIGHT;
+    if (isLeftPinned || isRightPinned) {
+      let side = isLeftPinned ? 'left' : 'right';
+      if (isRtl) {
+        side = isLeftPinned ? 'right' : 'left';
+      }
+      cellStyle[side] = pinnedOffset;
     }
-    if (pinnedPosition === PinnedPosition.RIGHT) {
-      cellStyle.right = pinnedOffset;
+    if (rowSpan > 1) {
+      cellStyle.height = `calc(var(--height) * ${rowSpan})`;
+      cellStyle.zIndex = 5;
     }
     return cellStyle;
-  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;
@@ -245,6 +259,16 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       }
     }
   }, [hasFocus, cellMode, apiRef]);
+  if (isCellRowSpanned) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-colindex": colIndex,
+      role: "presentation",
+      style: (0, _extends2.default)({}, style, {
+        minWidth: 'var(--width)',
+        maxWidth: 'var(--width)'
+      })
+    });
+  }
   if (cellParams === EMPTY_CELL_PARAMS) {
     return null;
   }
@@ -305,6 +329,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,
     "aria-colspan": colSpan,
+    "aria-rowspan": rowSpan,
     style: style,
     title: title,
     tabIndex: tabIndex,

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -30,14 +30,19 @@ const useUtilityClasses = ownerState => {
     showRightBorder,
     showLeftBorder,
     filterItemsCounter,
-    pinnedPosition
+    pinnedPosition,
+    isLastUnpinned,
+    isSiblingFocused
   } = ownerState;
   const isColumnSorted = sortDirection != null;
   const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight'],
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight',
+    // TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
+    // See https://github.com/mui/mui-x/pull/14559
+    isLastUnpinned && 'columnHeader--lastUnpinned', isSiblingFocused && 'columnHeader--siblingFocused'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -217,7 +222,9 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   indexInSection: _propTypes.default.number.isRequired,
   isDragging: _propTypes.default.bool.isRequired,
   isLast: _propTypes.default.bool.isRequired,
+  isLastUnpinned: _propTypes.default.bool.isRequired,
   isResizing: _propTypes.default.bool.isRequired,
+  isSiblingFocused: _propTypes.default.bool.isRequired,
   pinnedPosition: _propTypes.default.oneOf(['left', 'right']),
   sectionLength: _propTypes.default.number.isRequired,
   separatorSide: _propTypes.default.oneOf(['left', 'right']),

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -17,7 +17,7 @@ var _domUtils = require("../../utils/domUtils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className"];
+const _excluded = ["className", "aria-label"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -39,6 +39,8 @@ const GridColumnHeaderTitleRoot = (0, _system.styled)('div', {
   lineHeight: 'normal'
 });
 const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+  // Tooltip adds aria-label to the props, which is not needed since the children prop is a string
+  // See https://github.com/mui/mui-x/pull/14482
   const {
       className
     } = props,

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -71,8 +71,7 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort,
-    "aria-label": headerComponent == null ? label : undefined
+    "aria-sort": ariaSort
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
       className: classes.draggableContainer,

package/node/components/containers/GridRootStyles.js

@@ -287,12 +287,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     // - the column has a left or right border
     // - the next column is pinned right and has a left border
     [`& .${_gridClasses.gridClasses.columnHeader}:focus,
-      & .${_gridClasses.gridClasses.columnHeader}:focus-within,
-      & .${_gridClasses.gridClasses.columnHeader}:has(+ .${_gridClasses.gridClasses.columnHeader}:focus),
-      & .${_gridClasses.gridClasses.columnHeader}:has(+ .${_gridClasses.gridClasses.columnHeader}:focus-within),
       & .${_gridClasses.gridClasses['columnHeader--withLeftBorder']},
       & .${_gridClasses.gridClasses['columnHeader--withRightBorder']},
-      & .${_gridClasses.gridClasses.columnHeader}:has(+ .${_gridClasses.gridClasses.filler} + .${_gridClasses.gridClasses['columnHeader--withLeftBorder']}),
+      & .${_gridClasses.gridClasses['columnHeader--siblingFocused']},
+      & .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--lastUnpinned']},
       & .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}
       `]: {
       [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
@@ -407,9 +405,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     '@media (hover: none)': {
       [`& .${_gridClasses.gridClasses.columnHeader}`]: columnHeaderStyles,
       [`& .${_gridClasses.gridClasses.columnHeader}:focus,
-        & .${_gridClasses.gridClasses.columnHeader}:focus-within,
-        & .${_gridClasses.gridClasses.columnHeader}:has(+ .${_gridClasses.gridClasses.columnHeader}:focus),
-        & .${_gridClasses.gridClasses.columnHeader}:has(+ .${_gridClasses.gridClasses.columnHeader}:focus-within)`]: {
+        & .${_gridClasses.gridClasses['columnHeader--siblingFocused']}`]: {
         [`.${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {
           color: (t.vars || t).palette.primary.main
         }

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

@@ -82,7 +82,7 @@ const FilterFormOperatorInput = (0, _styles.styled)('div', {
   slot: 'FilterFormOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormOperatorInput
 })({
-  width: 120
+  width: 150
 });
 const FilterFormValueInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',

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--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', '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--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/constants/localeTextConstants.js

@@ -51,7 +51,9 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   filterPanelInputPlaceholder: 'Filter value',
   // Filter operators text
   filterOperatorContains: 'contains',
+  filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'equals',
+  filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'starts with',
   filterOperatorEndsWith: 'ends with',
   filterOperatorIs: 'is',
@@ -71,7 +73,9 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Contains',
+  headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'Equals',
+  headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'Starts with',
   headerFilterOperatorEndsWith: 'Ends with',
   headerFilterOperatorIs: 'Is',