@mui/x-data-grid 8.0.0-alpha.7 → 8.0.0-alpha.8

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

@@ -14,7 +14,7 @@ var _utils = require("@mui/utils");
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "headerFilterMenu", "InputProps", "variant"];
 function GridFilterInputValue(props) {
   const {
       item,
@@ -25,8 +25,9 @@ function GridFilterInputValue(props) {
       tabIndex,
       disabled,
       clearButton,
+      headerFilterMenu,
       InputProps,
-      variant = 'standard'
+      variant = 'outlined'
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterTimeout = (0, _useTimeout.useTimeout)();
@@ -53,31 +54,35 @@ function GridFilterInputValue(props) {
       setFilterValueState(sanitizeFilterItemValue(item.value));
     }
   }, [id, item]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
-    id: id,
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState ?? '',
-    onChange: onFilterChange,
-    variant: variant,
-    type: type || 'text',
-    InputProps: (0, _extends2.default)({}, applying || clearButton ? {
-      endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
-        fontSize: "small",
-        color: "action"
-      }) : clearButton
-    } : {}, {
-      disabled
-    }, InputProps, {
-      inputProps: (0, _extends2.default)({
-        tabIndex
-      }, InputProps?.inputProps)
-    }),
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef
-  }, others, rootProps.slotProps?.baseTextField));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+      id: id,
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      value: filterValueState ?? '',
+      onChange: onFilterChange,
+      variant: variant,
+      type: type || 'text',
+      disabled: disabled,
+      InputProps: (0, _extends2.default)({
+        endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
+          position: "end",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+            fontSize: "small",
+            color: "action"
+          })
+        }) : null
+      }, InputProps, {
+        inputProps: (0, _extends2.default)({
+          tabIndex
+        }, InputProps?.inputProps)
+      }),
+      InputLabelProps: {
+        shrink: true
+      },
+      inputRef: focusElementRef
+    }, rootProps.slotProps?.baseTextField, others)), headerFilterMenu, clearButton]
+  });
 }
 function sanitizeFilterItemValue(value) {
   if (value == null || value === '') {
@@ -96,6 +101,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   applyValue: _propTypes.default.func.isRequired,
   clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -29,6 +29,9 @@ const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 6,
+  '&:hover': {
+    zIndex: 7
+  },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
   // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
@@ -110,19 +113,15 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   (0, _useOnMount.useOnMount)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
-    scroller.addEventListener('scroll', onScrollerScroll, {
-      capture: true
-    });
-    scrollbar.addEventListener('scroll', onScrollbarScroll, {
-      capture: true
-    });
+    const options = {
+      capture: true,
+      passive: true
+    };
+    scroller.addEventListener('scroll', onScrollerScroll, options);
+    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
     return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, {
-        capture: true
-      });
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, {
-        capture: true
-      });
+      scroller.removeEventListener('scroll', onScrollerScroll, options);
+      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
     };
   });
   React.useEffect(() => {

package/node/components/virtualization/GridVirtualScroller.js

@@ -108,10 +108,10 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
-      position: "vertical"
-    }, getScrollbarVerticalProps())), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), props.children]
+    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+      position: "vertical"
+    }, getScrollbarVerticalProps())), props.children]
   }));
 }

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', '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', 'columnsManagementSearchInput', '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', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', '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', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', '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', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/constants/localeTextConstants.js

@@ -104,6 +104,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   'headerFilterOperator>=': 'Greater than or equal to',
   'headerFilterOperator<': 'Less than',
   'headerFilterOperator<=': 'Less than or equal to',
+  headerFilterClear: 'Clear filter',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

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

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
@@ -26,6 +25,8 @@ var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerC
 var _getPinnedCellOffset = require("../../../internals/utils/getPinnedCellOffset");
 var _GridColumnHeaderSeparator = require("../../../components/columnHeaders/GridColumnHeaderSeparator");
 var _gridClasses = require("../../../constants/gridClasses");
+var _cellBorderUtils = require("../../../utils/cellBorderUtils");
+var _constants = require("../../../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
@@ -52,10 +53,8 @@ const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const hasColumnVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = (0, _utils.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
@@ -92,18 +91,10 @@ const useGridColumnHeaders = props => {
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
     const {
-      renderContext: currentContext = renderContext,
-      maxLastColumn = visibleColumns.length
+      renderContext: currentContext = renderContext
     } = params || {};
-    let firstColumnToRender;
-    let lastColumnToRender;
-    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
-      firstColumnToRender = 0;
-      lastColumnToRender = maxLastColumn;
-    } else {
-      firstColumnToRender = currentContext.firstColumnIndex;
-      lastColumnToRender = currentContext.lastColumnIndex;
-    }
+    const firstColumnToRender = currentContext.firstColumnIndex;
+    const lastColumnToRender = currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,
@@ -112,7 +103,7 @@ const useGridColumnHeaders = props => {
     };
   };
   const getFillers = (params, children, leftOverflow, borderBottom = false) => {
-    const isPinnedRight = params?.position === _columns.GridPinnedColumnPosition.RIGHT;
+    const isPinnedRight = params?.position === _constants.PinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
     const leftOffsetWidth = offsetLeft - leftOverflow;
@@ -133,33 +124,6 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
-  const getCellOffsetStyle = ({
-    pinnedPosition,
-    columnIndex,
-    computedWidth
-  }) => {
-    let style;
-    const isLeftPinned = pinnedPosition === _columns.GridPinnedColumnPosition.LEFT;
-    const isRightPinned = pinnedPosition === _columns.GridPinnedColumnPosition.RIGHT;
-    if (isLeftPinned || isRightPinned) {
-      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
-      let side = isLeftPinned ? 'left' : 'right';
-      if (isRtl) {
-        side = isLeftPinned ? 'right' : 'left';
-      }
-      if (pinnedPosition === 'left') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-      if (pinnedPosition === 'right') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-    }
-    return style;
-  };
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -174,14 +138,15 @@ const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: colDef.computedWidth
-      });
-      const siblingWithBorderingSeparator = pinnedPosition === _columns.GridPinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const siblingWithBorderingSeparator = pinnedPosition === _constants.PinnedColumnPosition.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;
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+      const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       columns.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -194,12 +159,11 @@ const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: i,
-        sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller,
+        pinnedOffset: pinnedOffset,
         isLastUnpinned: isLastUnpinned,
-        isSiblingFocused: isSiblingFocused
+        isSiblingFocused: isSiblingFocused,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -211,18 +175,15 @@ const useGridColumnHeaders = props => {
       ownerState: rootProps,
       className: _gridClasses.gridClasses['row--borderBottom'],
       children: [leftRenderContext && getColumnHeaders({
-        position: _columns.GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        maxLastColumn: leftRenderContext.lastColumnIndex
+        position: _constants.PinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext
       }, {
         disableReorder: true
       }), getColumnHeaders({
-        renderContext,
-        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+        renderContext
       }), rightRenderContext && getColumnHeaders({
-        position: _columns.GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        maxLastColumn: rightRenderContext.lastColumnIndex
+        position: _constants.PinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext
       }, {
         disableReorder: true,
         separatorSide: _GridColumnHeaderSeparator.GridColumnHeaderSeparatorSides.Left
@@ -281,14 +242,11 @@ const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: headerInfo.width
-      });
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
-      if (pinnedPosition === 'left') {
+      if (pinnedPosition === _constants.PinnedColumnPosition.LEFT) {
         // Group headers can expand to multiple columns, we need to adjust the index
         indexInSection = columnIndex - 1;
       }
@@ -304,10 +262,9 @@ const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: indexInSection,
-        sectionLength: visibleColumnGroupHeader.length,
-        gridHasFiller: gridHasFiller
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection),
+        showRightBorder: (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showCellVerticalBorder, gridHasFiller)
       }, index);
     });
     return getFillers(params, children, leftOverflow);
@@ -325,7 +282,7 @@ const useGridColumnHeaders = props => {
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: _columns.GridPinnedColumnPosition.LEFT,
+            position: _constants.PinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
@@ -337,7 +294,7 @@ const useGridColumnHeaders = props => {
         }), rightRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: _columns.GridPinnedColumnPosition.RIGHT,
+            position: _constants.PinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
@@ -352,11 +309,12 @@ const useGridColumnHeaders = props => {
     rightRenderContext,
     pinnedColumns,
     visibleColumns,
-    getCellOffsetStyle,
+    columnPositions,
     getFillers,
     getColumnHeadersRow,
     getColumnsToRender,
     getColumnGroupHeadersRows,
+    getPinnedCellOffset: _getPinnedCellOffset.getPinnedCellOffset,
     isDragging: !!dragCol,
     getInnerProps: () => ({
       role: 'rowgroup'

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

@@ -346,7 +346,7 @@ const useGridCellEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+          (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };
       try {

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

@@ -422,7 +422,7 @@ const useGridRowEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+          (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };
       try {

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

@@ -55,7 +55,12 @@ const gridFilteredDescendantCountLookupSelector = exports.gridFilteredDescendant
  * Does not contain the collapsed children.
  * @category Filtering
  */
-const gridExpandedSortedRowEntriesSelector = exports.gridExpandedSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, (visibleRowsLookup, sortedRows) => sortedRows.filter(row => visibleRowsLookup[row.id] !== false));
+const gridExpandedSortedRowEntriesSelector = exports.gridExpandedSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, gridFilterModelSelector, gridQuickFilterValuesSelector, (visibleRowsLookup, sortedRows, maxDepth, filterModel, quickFilterValues) => {
+  if (maxDepth < 2 && !filterModel.items.length && !quickFilterValues?.length) {
+    return sortedRows;
+  }
+  return sortedRows.filter(row => visibleRowsLookup[row.id] !== false);
+});
 
 /**
  * Get the id of the rows accessible after the filtering process.

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

@@ -26,7 +26,7 @@ function getHasEval() {
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
@@ -144,7 +144,7 @@ let filterItemsApplierId = 1;
 /**
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
@@ -192,7 +192,7 @@ const shouldQuickFilterExcludeHiddenColumns = filterModel => {
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 exports.shouldQuickFilterExcludeHiddenColumns = shouldQuickFilterExcludeHiddenColumns;

package/node/hooks/features/pagination/gridPaginationSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginationMetaSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
+exports.gridVisibleRowsSelector = exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginationMetaSelector = exports.gridPaginationEnabledClientSideSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
@@ -17,10 +17,16 @@ const ALL_RESULTS_PAGE_VALUE = -1;
 const gridPaginationSelector = state => state.pagination;
 
 /**
- * Get the pagination model
  * @category Pagination
+ * @ignore - do not document.
  */
 exports.gridPaginationSelector = gridPaginationSelector;
+const gridPaginationEnabledClientSideSelector = exports.gridPaginationEnabledClientSideSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.enabled && pagination.paginationMode === 'client');
+
+/**
+ * Get the pagination model
+ * @category Pagination
+ */
 const gridPaginationModelSelector = exports.gridPaginationModelSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.paginationModel);
 
 /**
@@ -57,7 +63,10 @@ const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelecto
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-const gridPaginationRowRangeSelector = exports.gridPaginationRowRangeSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+const gridPaginationRowRangeSelector = exports.gridPaginationRowRangeSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationEnabledClientSideSelector, gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.gridFilteredSortedTopLevelRowEntriesSelector, (clientSidePaginationEnabled, paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+  if (!clientSidePaginationEnabled) {
+    return null;
+  }
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE ? visibleTopLevelRowCount - 1 : Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);
@@ -119,4 +128,33 @@ const gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibl
     return [];
   }
   return visibleSortedRowIds.slice(paginationRange.firstRowIndex, paginationRange.lastRowIndex + 1);
+});
+
+/**
+ * Get the rows, range and rowIndex lookup map after filtering and sorting.
+ * Does not contain the collapsed children.
+ * @category Pagination
+ */
+const gridVisibleRowsSelector = exports.gridVisibleRowsSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationEnabledClientSideSelector, gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, (clientPaginationEnabled, paginationRowRange, paginationRows, expandedSortedRowEntries) => {
+  if (clientPaginationEnabled) {
+    return {
+      rows: paginationRows,
+      range: paginationRowRange,
+      rowToIndexMap: paginationRows.reduce((lookup, row, index) => {
+        lookup.set(row.model, index);
+        return lookup;
+      }, new Map())
+    };
+  }
+  return {
+    rows: expandedSortedRowEntries,
+    range: expandedSortedRowEntries.length === 0 ? null : {
+      firstRowIndex: 0,
+      lastRowIndex: expandedSortedRowEntries.length - 1
+    },
+    rowToIndexMap: expandedSortedRowEntries.reduce((lookup, row, index) => {
+      lookup.set(row.model, index);
+      return lookup;
+    }, new Map())
+  };
 });

package/node/hooks/features/pagination/useGridPagination.js

@@ -16,11 +16,13 @@ const paginationStateInitializer = (state, props) => {
   const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
   const meta = props.paginationMeta ?? props.initialState?.pagination?.meta ?? {};
   return (0, _extends2.default)({}, state, {
-    pagination: {
+    pagination: (0, _extends2.default)({}, state.pagination, {
       paginationModel,
       rowCount,
-      meta
-    }
+      meta,
+      enabled: props.pagination === true,
+      paginationMode: props.paginationMode
+    })
   });
 };
 

package/node/hooks/features/pagination/useGridPaginationModel.js

@@ -164,13 +164,35 @@ const useGridPaginationModel = (apiRef, props) => {
   /**
    * EFFECTS
    */
+  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (!props.pagination) {
+      return;
+    }
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, props.paginationModel)
       })
     }));
-  }, [apiRef, props.paginationModel, props.paginationMode, props.signature]);
+  }, [apiRef, props.paginationModel, props.signature, props.pagination]);
+  React.useEffect(() => {
+    apiRef.current.setState(state => {
+      const isEnabled = props.pagination === true;
+      if (state.pagination.paginationMode === props.paginationMode || state.pagination.enabled === isEnabled) {
+        return state;
+      }
+      return (0, _extends2.default)({}, state, {
+        pagination: (0, _extends2.default)({}, state.pagination, {
+          paginationMode: props.paginationMode,
+          enabled: props.pagination === true
+        })
+      });
+    });
+  }, [apiRef, props.paginationMode, props.pagination]);
   React.useEffect(handleUpdateAutoPageSize, [handleUpdateAutoPageSize]);
 };
 exports.useGridPaginationModel = useGridPaginationModel;

package/node/hooks/features/rows/gridRowsSelector.js

@@ -21,7 +21,7 @@ const gridRowMaximumTreeDepthSelector = exports.gridRowMaximumTreeDepthSelector
   if (entries.length === 0) {
     return 1;
   }
-  return entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] + 1;
+  return (entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] ?? 0) + 1;
 });
 const gridDataRowIdsSelector = exports.gridDataRowIdsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIds);
 

package/node/hooks/features/rows/useGridRows.js

@@ -49,7 +49,7 @@ const useGridRows = (apiRef, props) => {
     }
   }
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
-  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
+  const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
   const timeout = (0, _useTimeout.useTimeout)();

package/node/hooks/features/sorting/gridSortingUtils.js

@@ -28,7 +28,7 @@ const isDesc = direction => direction === 'desc';
 /**
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
 const parseSortItem = (sortItem, apiRef) => {
@@ -81,7 +81,7 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
 const buildAggregatedSortingApplier = (sortModel, apiRef) => {