@mui/x-data-grid 7.16.0 → 7.18.0

package/modern/DataGrid/useDataGridComponent.js

@@ -27,6 +27,7 @@ import { useGridColumnSpanning } from "../hooks/features/columns/useGridColumnSp
 import { useGridColumnGrouping, columnGroupsStateInitializer } from "../hooks/features/columnGrouping/useGridColumnGrouping.js";
 import { useGridVirtualization, virtualizationStateInitializer } from "../hooks/features/virtualization/index.js";
 import { columnResizeStateInitializer, useGridColumnResize } from "../hooks/features/columnResize/useGridColumnResize.js";
+import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/features/rows/useGridRowSpanning.js";
 export const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -48,6 +49,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
   useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
   useGridInitializeState(paginationStateInitializer, apiRef, props);
@@ -59,6 +61,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
+  useGridRowSpanning(apiRef, props);
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);

package/modern/DataGrid/useDataGridProps.js

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

package/modern/colDef/gridStringOperators.js

@@ -15,34 +15,58 @@ export const getGridStringQuickFilterFn = value => {
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
 };
+const createContainsFilterFn = (disableTrim, negate) => filterItem => {
+  if (!filterItem.value) {
+    return null;
+  }
+  const trimmedValue = disableTrim ? filterItem.value : filterItem.value.trim();
+  const filterRegex = new RegExp(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;
+  };
+};
 export 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(escapeRegExp(filterItemValue), 'i');
-    return value => {
-      return value != null ? filterRegex.test(String(value)) : false;
-    };
-  },
+  getApplyFilterFn: createContainsFilterFn(disableTrim, false),
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'doesNotContain',
+  getApplyFilterFn: createContainsFilterFn(disableTrim, true),
   InputComponent: 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
+}, {
+  value: 'doesNotEqual',
+  getApplyFilterFn: createEqualityFilterFn(disableTrim, true),
   InputComponent: GridFilterInputValue
 }, {
   value: 'startsWith',
@@ -72,19 +96,11 @@ export const getGridStringOperators = (disableTrim = false) => [{
   InputComponent: 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/modern/components/GridRow.js

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

package/modern/components/cell/GridCell.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { useRtl } from '@mui/system/RtlProvider';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { GridCellModes } from "../../models/index.js";
@@ -17,6 +18,7 @@ import { gridFocusCellSelector } from "../../hooks/features/focus/gridFocusState
 import { MissingRowIdError } from "../../hooks/features/rows/useGridParamsApi.js";
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../utils/cellBorderUtils.js";
 import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
+import { gridRowSpanningHiddenCellsSelector, gridRowSpanningSpannedCellsSelector } from "../../hooks/features/rows/gridRowSpanningSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
@@ -106,6 +108,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const isRtl = useRtl();
   const field = column.field;
   const cellParams = useGridSelector(apiRef, () => {
     // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
@@ -126,6 +129,8 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     id: rowId,
     field
   }));
+  const hiddenCells = useGridSelector(apiRef, gridRowSpanningHiddenCellsSelector);
+  const spannedCells = useGridSelector(apiRef, gridRowSpanningSpannedCellsSelector);
   const {
     cellMode,
     hasFocus,
@@ -198,6 +203,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 {
@@ -210,14 +217,21 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     const cellStyle = _extends({
       '--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 === GridCellModes.Edit) {
       return;
@@ -237,6 +251,16 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       }
     }
   }, [hasFocus, cellMode, apiRef]);
+  if (isCellRowSpanned) {
+    return /*#__PURE__*/_jsx("div", {
+      "data-colindex": colIndex,
+      role: "presentation",
+      style: _extends({}, style, {
+        minWidth: 'var(--width)',
+        maxWidth: 'var(--width)'
+      })
+    });
+  }
   if (cellParams === EMPTY_CELL_PARAMS) {
     return null;
   }
@@ -297,6 +321,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/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -22,14 +22,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']
@@ -209,7 +214,9 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   indexInSection: PropTypes.number.isRequired,
   isDragging: PropTypes.bool.isRequired,
   isLast: PropTypes.bool.isRequired,
+  isLastUnpinned: PropTypes.bool.isRequired,
   isResizing: PropTypes.bool.isRequired,
+  isSiblingFocused: PropTypes.bool.isRequired,
   pinnedPosition: PropTypes.oneOf(['left', 'right']),
   sectionLength: PropTypes.number.isRequired,
   separatorSide: PropTypes.oneOf(['left', 'right']),

package/modern/components/columnHeaders/GridColumnHeaderTitle.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "aria-label"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -31,6 +31,8 @@ const GridColumnHeaderTitleRoot = 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/modern/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -63,8 +63,7 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort,
-    "aria-label": headerComponent == null ? label : undefined
+    "aria-sort": ariaSort
   }, other, {
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,

package/modern/components/containers/GridRootStyles.js

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

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

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

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--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']);
+export const gridClasses = 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/modern/constants/localeTextConstants.js

@@ -45,7 +45,9 @@ export const 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',
@@ -65,7 +67,9 @@ export const 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',

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -53,7 +53,7 @@ export const useGridColumnHeaders = props => {
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
-  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
+  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
@@ -83,7 +83,6 @@ export const useGridColumnHeaders = props => {
   const getColumnsToRender = params => {
     const {
       renderContext: currentContext = renderContext,
-      // TODO: `minFirstColumn` is not used anymore, could be refactored out.
       maxLastColumn = visibleColumns.length
     } = params || {};
     const firstColumnToRender = currentContext.firstColumnIndex;
@@ -123,16 +122,22 @@ export const useGridColumnHeaders = props => {
     computedWidth
   }) => {
     let style;
-    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+    const isLeftPinned = pinnedPosition === GridPinnedColumnPosition.LEFT;
+    const isRightPinned = pinnedPosition === GridPinnedColumnPosition.RIGHT;
+    if (isLeftPinned || isRightPinned) {
       const pinnedOffset = getPinnedCellOffset(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
+      let side = isLeftPinned ? 'left' : 'right';
+      if (isRtl) {
+        side = isLeftPinned ? 'right' : 'left';
+      }
       if (pinnedPosition === 'left') {
         style = {
-          left: pinnedOffset
+          [side]: pinnedOffset
         };
       }
       if (pinnedPosition === 'right') {
         style = {
-          right: pinnedOffset
+          [side]: pinnedOffset
         };
       }
     }
@@ -157,6 +162,9 @@ export const useGridColumnHeaders = props => {
         columnIndex,
         computedWidth: colDef.computedWidth
       });
+      const siblingWithBorderingSeparator = pinnedPosition === GridPinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
+      const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -172,7 +180,9 @@ export const useGridColumnHeaders = props => {
         style: style,
         indexInSection: i,
         sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller
+        gridHasFiller: gridHasFiller,
+        isLastUnpinned: isLastUnpinned,
+        isSiblingFocused: isSiblingFocused
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -186,18 +196,15 @@ export const useGridColumnHeaders = props => {
       children: [leftRenderContext && getColumnHeaders({
         position: GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
       }), getColumnHeaders({
         renderContext,
-        minFirstColumn: pinnedColumns.left.length,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnHeaders({
         position: GridPinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       }, {
         disableReorder: true,
@@ -277,7 +284,7 @@ export const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.headerHeight,
+        height: dimensions.groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
@@ -304,7 +311,6 @@ export const useGridColumnHeaders = props => {
           params: {
             position: GridPinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
-            minFirstColumn: leftRenderContext.firstColumnIndex,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
         }), getColumnGroupHeaders({
@@ -317,7 +323,6 @@ export const useGridColumnHeaders = props => {
           params: {
             position: GridPinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
-            minFirstColumn: rightRenderContext.firstColumnIndex,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
         })]

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -302,13 +302,13 @@ export const useGridColumnResize = (apiRef, props) => {
     }
     refs.groupHeaderElements = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
     refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current);
-    refs.fillerLeft = findGridElement(apiRef.current, 'filler--pinnedLeft');
-    refs.fillerRight = findGridElement(apiRef.current, 'filler--pinnedRight');
+    refs.fillerLeft = findGridElement(apiRef.current, isRtl ? 'filler--pinnedRight' : 'filler--pinnedLeft');
+    refs.fillerRight = findGridElement(apiRef.current, isRtl ? 'filler--pinnedLeft' : 'filler--pinnedRight');
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
-    refs.leftPinnedCellsAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, refs.columnHeaderElement);
-    refs.rightPinnedCellsBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, refs.columnHeaderElement);
-    refs.leftPinnedHeadersAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, refs.columnHeaderElement);
-    refs.rightPinnedHeadersBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement);
+    refs.leftPinnedCellsAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedCellsBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.leftPinnedHeadersAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedHeadersBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement, isRtl);
     resizeDirection.current = getResizeDirection(separator, isRtl);
     initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -29,6 +29,7 @@ const EMPTY_DIMENSIONS = {
   hasScrollY: false,
   scrollbarSize: 0,
   headerHeight: 0,
+  groupHeaderHeight: 0,
   headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
@@ -55,6 +56,7 @@ export function useGridDimensions(apiRef, props) {
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
   const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
   const headersTotalHeight = getTotalHeaderHeight(apiRef, props);
@@ -175,6 +177,7 @@ export function useGridDimensions(apiRef, props) {
       hasScrollY,
       scrollbarSize,
       headerHeight,
+      groupHeaderHeight,
       headerFilterHeight,
       rowWidth,
       rowHeight,
@@ -191,7 +194,7 @@ export function useGridDimensions(apiRef, props) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
     resize,
     getRootDimensions

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -5,15 +5,16 @@ const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import * as React from 'react';
 import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
-import { warnOnce } from "../../../internals/utils/warning.js";
 import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";
+import { getDefaultCellValue } from "./utils.js";
 export const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);
@@ -249,24 +250,7 @@ export const useGridCellEditing = (apiRef, props) => {
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
     if (deleteValue) {
-      const fieldType = apiRef.current.getColumn(field).type;
-      switch (fieldType) {
-        case 'boolean':
-          newValue = false;
-          break;
-        case 'date':
-        case 'dateTime':
-        case 'number':
-          newValue = undefined;
-          break;
-        case 'singleSelect':
-          newValue = null;
-          break;
-        case 'string':
-        default:
-          newValue = '';
-          break;
-      }
+      newValue = getDefaultCellValue(apiRef.current.getColumn(field));
     } else if (initialValue) {
       newValue = initialValue;
     }

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -5,17 +5,18 @@ const _excluded = ["id"],
   _excluded2 = ["id"];
 import * as React from 'react';
 import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridEditModes, GridRowModes } from "../../../models/gridEditRowModel.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
-import { warnOnce } from "../../../internals/utils/warning.js";
 import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridRowEditStopReasons, GridRowEditStartReasons } from "../../../models/params/gridRowParams.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
+import { getDefaultCellValue } from "./utils.js";
 export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
@@ -319,7 +320,11 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
-        newValue = deleteValue ? '' : initialValue;
+        if (deleteValue) {
+          newValue = getDefaultCellValue(apiRef.current.getColumn(field));
+        } else if (initialValue) {
+          newValue = initialValue;
+        }
       }
       acc[field] = {
         value: newValue,

package/modern/hooks/features/editing/utils.js

@@ -0,0 +1,15 @@
+export const getDefaultCellValue = colDef => {
+  switch (colDef.type) {
+    case 'boolean':
+      return false;
+    case 'date':
+    case 'dateTime':
+    case 'number':
+      return undefined;
+    case 'singleSelect':
+      return null;
+    case 'string':
+    default:
+      return '';
+  }
+};