@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

package/node/components/virtualization/GridVirtualScrollerContent.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,16 +27,24 @@ const useUtilityClasses = (props, overflowedContent) => {
 const VirtualScrollerContentRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
-  overridesResolver: (props, styles) => styles.virtualScrollerContent
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
+  }
 })({});
-const GridVirtualScrollerContent = exports.GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
+const GridVirtualScrollerContent = exports.GridVirtualScrollerContent = (0, _forwardRef.forwardRef)(function GridVirtualScrollerContent(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerContentRoot, (0, _extends2.default)({
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerContentRoot, (0, _extends2.default)({}, props, {
+    ownerState: ownerState,
+    className: (0, _clsx.default)(classes.root, props.className),
     ref: ref
-  }, props, {
-    ownerState: rootProps,
-    className: (0, _clsx.default)(classes.root, props.className)
   }));
 });

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _rows = require("../../hooks/features/rows");
@@ -39,7 +40,7 @@ const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   // Prevents margin collapsing when using `getRowSpacing`
   flexDirection: 'column'
 });
-const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
+const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = (0, _forwardRef.forwardRef)(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
@@ -53,11 +54,12 @@ const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*
     return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,
     style: {
       transform: `translate3d(0, ${offsetTop}px, 0)`
     }
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });

package/node/constants/dataGridPropsDefaultValues.js

@@ -40,8 +40,6 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
   ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
   keepColumnPositionIfDraggedOutside: false,
   keepNonExistentRowsSelected: false,
   loading: false,
@@ -53,14 +51,14 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,
-  rowPositionsDebounceMs: 166,
   rows: [],
   rowSelection: true,
   rowSpacingType: 'margin',
+  rowSpanning: false,
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  virtualizeColumnsWithAutoRowHeight: false
 };

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', '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', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom']);

package/node/constants/index.js

@@ -35,4 +35,15 @@ Object.keys(_gridClasses).forEach(function (key) {
       return _gridClasses[key];
     }
   });
+});
+var _signature = require("./signature");
+Object.keys(_signature).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _signature[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _signature[key];
+    }
+  });
 });

package/node/constants/localeTextConstants.js

@@ -32,7 +32,6 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
   toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
   toolbarPromptControlLabel: 'Prompt input',
-  toolbarPromptControlDeleteIconLabel: 'Clear',
   toolbarPromptControlRecordButtonDefaultLabel: 'Record',
   toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
   toolbarPromptControlSendActionLabel: 'Send',
@@ -105,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/constants/signature.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridSignature = void 0;
+/**
+ * Signal to the underlying logic what version of the public component API
+ * of the Data Grid is exposed.
+ */
+let GridSignature = exports.GridSignature = /*#__PURE__*/function (GridSignature) {
+  GridSignature["DataGrid"] = "DataGrid";
+  GridSignature["DataGridPro"] = "DataGridPro";
+  GridSignature["DataGridPremium"] = "DataGridPremium";
+  return GridSignature;
+}({});

package/node/context/GridRootPropsContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/node/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -8,7 +8,7 @@ exports.useGridRegisterPipeApplier = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useFirstRender = require("../../utils/useFirstRender");
 const useGridRegisterPipeApplier = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeApplier(group, id.current, callback);

package/node/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -7,20 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRegisterPipeProcessor = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useFirstRender = require("../../utils/useFirstRender");
-const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+const useGridRegisterPipeProcessor = (apiRef, group, callback, enabled = true) => {
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   (0, _useFirstRender.useFirstRender)(() => {
-    registerPreProcessor();
+    if (enabled) {
+      registerPreProcessor();
+    }
   });
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
-    } else {
+    } else if (enabled) {
       registerPreProcessor();
     }
     return () => {
@@ -29,6 +31,6 @@ const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
         cleanup.current = null;
       }
     };
-  }, [registerPreProcessor]);
+  }, [registerPreProcessor, enabled]);
 };
 exports.useGridRegisterPipeProcessor = useGridRegisterPipeProcessor;

package/node/hooks/core/strategyProcessing/gridStrategyProcessingApi.js

@@ -2,4 +2,10 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.GridStrategyGroup = void 0;
+let GridStrategyGroup = exports.GridStrategyGroup = /*#__PURE__*/function (GridStrategyGroup) {
+  GridStrategyGroup["DataSource"] = "dataSource";
+  GridStrategyGroup["RowTree"] = "rowTree";
+  return GridStrategyGroup;
+}({});

package/node/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -9,13 +9,15 @@ exports.useGridStrategyProcessing = exports.GRID_STRATEGIES_PROCESSORS = exports
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
 var React = _interopRequireWildcard(require("react"));
+var _gridStrategyProcessingApi = require("./gridStrategyProcessingApi");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 const GRID_DEFAULT_STRATEGY = exports.GRID_DEFAULT_STRATEGY = 'none';
 const GRID_STRATEGIES_PROCESSORS = exports.GRID_STRATEGIES_PROCESSORS = {
-  rowTreeCreation: 'rowTree',
-  filtering: 'rowTree',
-  sorting: 'rowTree',
-  visibleRowsLookupCreation: 'rowTree'
+  dataSourceRowsUpdate: _gridStrategyProcessingApi.GridStrategyGroup.DataSource,
+  rowTreeCreation: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
+  filtering: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
+  sorting: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
+  visibleRowsLookupCreation: _gridStrategyProcessingApi.GridStrategyGroup.RowTree
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
@@ -52,10 +54,7 @@ const GRID_STRATEGIES_PROCESSORS = exports.GRID_STRATEGIES_PROCESSORS = {
  * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
- * For now, there is only one strategy group named `rowTree` which customize
- * - row tree creation algorithm.
- * - sorting algorithm.
- * - filtering algorithm.
+ * There are two active groups named `rowTree` and `dataSource`.
  */
 const useGridStrategyProcessing = apiRef => {
   const availableStrategies = React.useRef(new Map());

package/node/hooks/core/useGridApiInitialization.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _EventManager = require("@mui/x-internals/EventManager");
 var _Store = require("../../utils/Store");
 var _useGridApiMethod = require("../utils/useGridApiMethod");
-var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
+var _signature = require("../../constants/signature");
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
@@ -76,8 +76,8 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 function useGridApiInitialization(inputApiRef, props) {
-  const publicApiRef = React.useRef();
-  const privateApiRef = React.useRef();
+  const publicApiRef = React.useRef(null);
+  const privateApiRef = React.useRef(null);
   if (!privateApiRef.current) {
     privateApiRef.current = createPrivateAPI(publicApiRef);
   }
@@ -90,7 +90,7 @@ function useGridApiInitialization(inputApiRef, props) {
     if (isSyntheticEvent(event) && event.isPropagationStopped()) {
       return;
     }
-    const details = props.signature === _useGridApiEventHandler.GridSignature.DataGridPro || props.signature === _useGridApiEventHandler.GridSignature.DataGridPremium ? {
+    const details = props.signature === _signature.GridSignature.DataGridPro || props.signature === _signature.GridSignature.DataGridPremium ? {
       api: privateApiRef.current.getPublicApi()
     } : {};
     privateApiRef.current.eventManager.emit(name, params, event, details);

package/node/hooks/core/useGridStateInitialization.js

@@ -12,7 +12,6 @@ var _utils = require("../utils");
 var _utils2 = require("../../utils/utils");
 const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
-  const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
     controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
@@ -32,8 +31,8 @@ const useGridStateInitialization = apiRef => {
     const updatedControlStateIds = [];
     Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
-      const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
-      const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const oldSubState = controlState.stateSelector(apiRef.current.state, undefined, apiRef.current.instanceId);
+      const newSubState = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
@@ -65,7 +64,7 @@ const useGridStateInitialization = apiRef => {
         hasPropChanged
       } = updatedControlStateIds[0];
       const controlState = controlStateMapRef.current[stateId];
-      const model = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const model = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,
@@ -87,7 +86,9 @@ const useGridStateInitialization = apiRef => {
       });
     }, reason);
   }, [apiRef]);
-  const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
+  const forceUpdate = React.useCallback(() => {
+    // @deprecated - do nothing
+  }, []);
   const publicStateApi = {
     setState,
     forceUpdate

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

@@ -10,13 +10,12 @@ 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");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
-var _dimensions = require("../dimensions");
+var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _virtualization = require("../virtualization");
 var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
@@ -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,22 +53,18 @@ 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 hasVirtualization = (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);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnLookupSelector);
   const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length);
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-  React.useEffect(() => {
-    if (apiRef.current.columnHeadersContainerRef.current) {
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-    }
-  }, [apiRef]);
+  const columnsTotalWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
+  const gridHasFiller = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
+  const headerHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHeaderHeightSelector);
+  const groupHeaderHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridGroupHeaderHeightSelector);
+  const scrollbarWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridVerticalScrollbarWidthSelector);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -92,11 +89,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 || {};
     const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
+    const lastColumnToRender = currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,
@@ -105,7 +101,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;
@@ -126,33 +122,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,
@@ -167,18 +136,18 @@ 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 pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, 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,
-        headerHeight: dimensions.headerHeight,
+        headerHeight: headerHeight,
         isDragging: colDef.field === dragCol,
         colDef: colDef,
         colIndex: columnIndex,
@@ -187,12 +156,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);
@@ -204,18 +172,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
@@ -274,14 +239,10 @@ const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: headerInfo.width
-      });
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, headerInfo.width, columnIndex, columnPositions, 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;
       }
@@ -293,14 +254,13 @@ const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.groupHeaderHeight,
+        height: groupHeaderHeight,
         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);
@@ -318,7 +278,7 @@ const useGridColumnHeaders = props => {
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: _columns.GridPinnedColumnPosition.LEFT,
+            position: _constants.PinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
@@ -330,7 +290,7 @@ const useGridColumnHeaders = props => {
         }), rightRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: _columns.GridPinnedColumnPosition.RIGHT,
+            position: _constants.PinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
@@ -345,11 +305,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/columnMenu/useGridColumnMenu.js

@@ -49,7 +49,6 @@ const useGridColumnMenu = apiRef => {
         });
       });
       apiRef.current.hidePreferences();
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const hideColumnMenu = React.useCallback(() => {
@@ -91,7 +90,6 @@ const useGridColumnMenu = apiRef => {
           columnMenu: newState
         });
       });
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const toggleColumnMenu = React.useCallback(field => {

package/node/hooks/features/columnResize/gridColumnResizeApi.js

@@ -8,7 +8,8 @@ const DEFAULT_GRID_AUTOSIZE_OPTIONS = exports.DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
   includeOutliers: false,
   outliersFactor: 1.5,
-  expand: false
+  expand: false,
+  disableColumnVirtualization: true
 };
 
 /**