@mui/x-data-grid-pro 7.23.6 → 7.24.1

package/CHANGELOG.md

@@ -3,6 +3,156 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.24.1
+
+_Jan 24, 2025_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 🌍 Improve Persian (fa-IR) locale on the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@mostafaRoosta74, @lauri865.
+Following are all team members who have contributed to this release:
+@alexfauquette, @JCQuintas, @cherniavskii, @LukasTy, @arminmeh.
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.24.1`
+
+- [DataGrid] Fix toggling preference panel from toolbar (#16276) @lauri865
+- [DataGrid] Only try to mount filter button if there are filters present (#16269) @lauri865
+- [DataGrid] Revert `apiRef` to be `MutableRefObject` for React versions < 19 (#16320) @arminmeh
+- [l10n] Improve Persian (fa-IR) locale (#15964) @mostafaRoosta74
+
+#### `@mui/x-data-grid-pro@7.24.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.24.1`.
+
+#### `@mui/x-data-grid-premium@7.24.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.24.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.24.1`
+
+- [fields] Reset `all` selected state on section edit (#16232) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.24.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.24.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.24.1`
+
+- [charts] Handle case where gradient stop `offset` could be `Infinite` (@JCQuintas) (#16309) @JCQuintas
+
+#### `@mui/x-charts-pro@7.24.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.24.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.24.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.24.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.24.1`.
+
+### Docs
+
+- [docs] Fix `domainLimit` definition (#16271) @alexfauquette
+
+### Core
+
+- [core] Make `@mui/x-internals` a dependency of `@mui/x-license` (#16265) @alexfauquette
+- [test] Fix flaky column pinning tests (#16228) @cherniavskii
+- [test] Fix flaky tests (#16264) @lauri865
+
+## 7.24.0
+
+_Jan 17, 2025_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔄 Data Grid [Scroll restoration](https://next.mui.com/x/react-data-grid/scrolling/#scroll-restoration)
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865, @AxharKhan.
+Following are all team members who have contributed to this release:
+@KenanYusuf, @arminmeh, @cherniavskii, @michelengelen, @samuelsycamore, @LukasTy.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.24.0`
+
+- [DataGrid] Fix resizing right pinned column (#16193) @KenanYusuf
+- [DataGrid] Improve scrollbar deadzone with overlay scrollbars (#16212) @lauri865
+- [DataGrid] Scroll restoration (#16208) @lauri865
+- [DataGrid] Fix row, cell and header memoizations (#16195) @lauri865
+- [l10n] Improve Urdu (ur-PK) locale (#16081) @AxharKhan
+
+#### `@mui/x-data-grid-pro@7.24.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.24.0`, plus:
+
+- [DataGridPro] Add test for column pinning with disabled column virtualization (#16196) @cherniavskii
+- [DataGridPro] Fix width of right-pinned column group during resize (#16207) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.24.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.24.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.24.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@7.24.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.24.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.24.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@7.24.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.24.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.24.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.24.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.24.0`.
+
+### Docs
+
+- [docs] Copyedit the Data Grid cell selection page (#16213) @samuelsycamore
+- [docs] Fix demo rendering issue on Codesandbox (#16129) @arminmeh
+
+### Core
+
+- [core] Type all references as `RefObject` (#16125) @arminmeh
+- [code-infra] Refactor `react` and `react-dom` definitions to simplify dep resolving (#16214) @LukasTy
+- [infra] Improve cherry-pick action target list (#16188) @michelengelen
+- [test] Fix flaky column pinning unit test (#16209) @cherniavskii
+
 ## 7.23.6
 
 _Jan 9, 2025_

package/DataGridPro/DataGridPro.js

@@ -39,18 +39,16 @@ const DataGridProRaw = (0, _forwardRef.forwardRef)(function DataGridPro(inProps,
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGrid.GridRoot, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
       sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
       ref: ref,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridBody, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
-          packageName: "x-data-grid-pro",
-          releaseInfo: releaseInfo
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridFooterPlaceholder, {})]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
+        packageName: "x-data-grid-pro",
+        releaseInfo: releaseInfo
+      })
     }))
   });
 });

package/DataGridPro/useDataGridProComponent.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridApiPro, GridPrivateApiPro } from '../models/gridApiPro';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
-export declare const useDataGridProComponent: (inputApiRef: React.RefObject<GridApiPro> | undefined, props: DataGridProProcessedProps) => React.RefObject<GridPrivateApiPro>;
+export declare const useDataGridProComponent: (inputApiRef: RefObject<GridApiPro> | undefined, props: DataGridProProcessedProps) => import("react").RefObject<GridPrivateApiPro>;

package/DataGridPro/useDataGridProComponent.js

@@ -51,6 +51,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_useGridColumnPinning.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridRowPinning.rowPinningStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.editingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
@@ -61,7 +62,6 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.densityStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridColumnReorder.columnReorderStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnResizeStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnGroupsStateInitializer, apiRef, props);

package/components/headerFiltering/GridHeaderFilterCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GridFilterItem, GridFilterOperator, GridColDef, GridPinnedColumnPosition } from '@mui/x-data-grid';
-import { GridStateColDef } from '@mui/x-data-grid/internals';
+import { GridFilterItem, GridFilterOperator, GridColDef } from '@mui/x-data-grid';
+import { PinnedColumnPosition, GridStateColDef } from '@mui/x-data-grid/internals';
 export interface GridRenderHeaderFilterProps extends GridHeaderFilterCellProps {
     inputRef: React.RefObject<unknown>;
 }
@@ -12,15 +12,15 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
     tabIndex: 0 | -1;
     width: number;
     colDef: GridColDef;
-    headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
+    headerFilterMenuRef: React.RefObject<HTMLButtonElement | null>;
     item: GridFilterItem;
     showClearIcon?: boolean;
     InputComponentProps: GridFilterOperator['InputComponentProps'];
-    pinnedPosition?: GridPinnedColumnPosition;
+    pinnedPosition?: PinnedColumnPosition;
+    pinnedOffset?: number;
     style?: React.CSSProperties;
-    indexInSection: number;
-    sectionLength: number;
-    gridHasFiller: boolean;
+    showLeftBorder: boolean;
+    showRightBorder: boolean;
 }
 declare const Memoized: React.ForwardRefExoticComponent<GridHeaderFilterCellProps> | React.ForwardRefExoticComponent<GridHeaderFilterCellProps & React.RefAttributes<HTMLDivElement>>;
 export { Memoized as GridHeaderFilterCell };

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -15,12 +15,13 @@ var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridHeaderFilterMenuContainer = require("./GridHeaderFilterMenuContainer");
 var _GridHeaderFilterClearButton = require("./GridHeaderFilterClearButton");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength", "gridHasFiller"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "pinnedOffset", "style", "showLeftBorder", "showRightBorder"];
 const useUtilityClasses = ownerState => {
   const {
     colDef,
@@ -30,7 +31,7 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', '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', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _internals.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _internals.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight']
   };
   return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
 };
@@ -62,13 +63,14 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
       InputComponentProps,
       showClearIcon = true,
       pinnedPosition,
+      pinnedOffset,
       style: styleProp,
-      indexInSection,
-      sectionLength,
-      gridHasFiller
+      showLeftBorder,
+      showRightBorder
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _internals.useGridPrivateApiContext)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const columnFields = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisibleColumnFieldsSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const cellRef = React.useRef(null);
@@ -183,8 +185,6 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
     onMouseDown: publish('headerFilterMouseDown', onMouseDown),
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
-  const showLeftBorder = (0, _internals.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _internals.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, rootProps, {
     pinnedPosition,
     colDef,
@@ -198,10 +198,10 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, headerClassName),
-    style: (0, _extends2.default)({
+    style: (0, _internals.attachPinnedStyle)((0, _extends2.default)({
       height,
       width
-    }, styleProp),
+    }, styleProp), isRtl, pinnedPosition, pinnedOffset),
     role: "columnheader",
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
@@ -260,7 +260,6 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   // ----------------------------------------------------------------------
   colDef: _propTypes.default.object.isRequired,
   colIndex: _propTypes.default.number.isRequired,
-  gridHasFiller: _propTypes.default.bool.isRequired,
   hasFocus: _propTypes.default.bool,
   /**
    * Class name added to the column header cell.
@@ -270,7 +269,6 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
     current: _propTypes.default.object
   }).isRequired,
   height: _propTypes.default.number.isRequired,
-  indexInSection: _propTypes.default.number.isRequired,
   InputComponentProps: _propTypes.default.object,
   item: _propTypes.default.shape({
     field: _propTypes.default.string.isRequired,
@@ -278,9 +276,11 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
     operator: _propTypes.default.string.isRequired,
     value: _propTypes.default.any
   }).isRequired,
-  pinnedPosition: _propTypes.default.oneOf(['left', 'right']),
-  sectionLength: _propTypes.default.number.isRequired,
+  pinnedOffset: _propTypes.default.number,
+  pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]),
   showClearIcon: _propTypes.default.bool,
+  showLeftBorder: _propTypes.default.bool.isRequired,
+  showRightBorder: _propTypes.default.bool.isRequired,
   sortIndex: _propTypes.default.number,
   style: _propTypes.default.object,
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,

package/components/headerFiltering/GridHeaderFilterMenuContainer.d.ts

@@ -5,7 +5,7 @@ declare function GridHeaderFilterMenuContainer(props: {
     field: GridColDef['field'];
     item: GridFilterItem;
     applyFilterChanges: (item: GridFilterItem) => void;
-    headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
+    headerFilterMenuRef: React.RefObject<HTMLButtonElement | null>;
     buttonRef: React.Ref<HTMLButtonElement>;
     disabled?: boolean;
 }): React.JSX.Element | null;

package/esm/DataGridPro/DataGridPro.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid';
+import { GridRoot, GridContextProvider } from '@mui/x-data-grid';
 import { validateProps } from '@mui/x-data-grid/internals';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridProComponent } from "./useDataGridProComponent.js";
@@ -13,7 +13,7 @@ import { getReleaseInfo } from "../utils/releaseInfo.js";
 import { propValidatorsDataGridPro } from "../internals/propValidation.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useGridAriaAttributes,
@@ -32,18 +32,16 @@ const DataGridProRaw = forwardRef(function DataGridPro(inProps, ref) {
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
+    children: /*#__PURE__*/_jsx(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
       ref: ref,
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        children: /*#__PURE__*/_jsx(Watermark, {
-          packageName: "x-data-grid-pro",
-          releaseInfo: releaseInfo
-        })
-      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+      children: /*#__PURE__*/_jsx(Watermark, {
+        packageName: "x-data-grid-pro",
+        releaseInfo: releaseInfo
+      })
     }))
   });
 });

package/esm/DataGridPro/useDataGridProComponent.js

@@ -44,6 +44,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -54,7 +55,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);

package/esm/components/headerFiltering/GridHeaderFilterCell.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength", "gridHasFiller"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "pinnedOffset", "style", "showLeftBorder", "showRightBorder"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, GridFilterInputValue, GridFilterInputDate, GridFilterInputBoolean, GridFilterInputSingleSelect, gridFilterModelSelector, gridFilterableColumnLookupSelector } from '@mui/x-data-grid';
-import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/internals';
+import { PinnedColumnPosition, useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, attachPinnedStyle } from '@mui/x-data-grid/internals';
+import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridHeaderFilterMenuContainer } from "./GridHeaderFilterMenuContainer.js";
@@ -22,7 +23,7 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', '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', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -54,13 +55,14 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
       InputComponentProps,
       showClearIcon = true,
       pinnedPosition,
+      pinnedOffset,
       style: styleProp,
-      indexInSection,
-      sectionLength,
-      gridHasFiller
+      showLeftBorder,
+      showRightBorder
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
+  const isRtl = useRtl();
   const columnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   const rootProps = useGridRootProps();
   const cellRef = React.useRef(null);
@@ -175,8 +177,6 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
     onMouseDown: publish('headerFilterMouseDown', onMouseDown),
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
-  const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = _extends({}, rootProps, {
     pinnedPosition,
     colDef,
@@ -190,10 +190,10 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/_jsxs("div", _extends({
     className: clsx(classes.root, headerClassName),
-    style: _extends({
+    style: attachPinnedStyle(_extends({
       height,
       width
-    }, styleProp),
+    }, styleProp), isRtl, pinnedPosition, pinnedOffset),
     role: "columnheader",
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
@@ -252,7 +252,6 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
   colIndex: PropTypes.number.isRequired,
-  gridHasFiller: PropTypes.bool.isRequired,
   hasFocus: PropTypes.bool,
   /**
    * Class name added to the column header cell.
@@ -262,7 +261,6 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
     current: PropTypes.object
   }).isRequired,
   height: PropTypes.number.isRequired,
-  indexInSection: PropTypes.number.isRequired,
   InputComponentProps: PropTypes.object,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
@@ -270,9 +268,11 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
   }).isRequired,
-  pinnedPosition: PropTypes.oneOf(['left', 'right']),
-  sectionLength: PropTypes.number.isRequired,
+  pinnedOffset: PropTypes.number,
+  pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]),
   showClearIcon: PropTypes.bool,
+  showLeftBorder: PropTypes.bool.isRequired,
+  showRightBorder: PropTypes.bool.isRequired,
   sortIndex: PropTypes.number,
   style: PropTypes.object,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,

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

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["getColumnsToRender", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "getCellOffsetStyle"];
+const _excluded = ["getColumnsToRender", "getPinnedCellOffset", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "columnPositions"];
 import * as React from 'react';
-import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridPinnedColumnPosition, gridDimensionsSelector } from '@mui/x-data-grid';
-import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow } from '@mui/x-data-grid/internals';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, gridDimensionsSelector } from '@mui/x-data-grid';
+import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow, shouldCellShowLeftBorder, shouldCellShowRightBorder, PinnedColumnPosition } from '@mui/x-data-grid/internals';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,12 +31,13 @@ export const useGridColumnHeaders = props => {
     })),
     {
       getColumnsToRender,
+      getPinnedCellOffset,
       renderContext,
       leftRenderContext,
       rightRenderContext,
       pinnedColumns,
       visibleColumns,
-      getCellOffsetStyle
+      columnPositions
     } = _useGridColumnHeaders,
     otherProps = _objectWithoutPropertiesLoose(_useGridColumnHeaders, _excluded);
   const headerFiltersRef = React.useRef(null);
@@ -86,11 +87,12 @@ export const useGridColumnHeaders = props => {
       }) : colDef.headerClassName;
       const item = getFilterItem(colDef);
       const pinnedPosition = params?.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: colDef.computedWidth
-      });
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       filters.push(/*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
         colIndex: columnIndex,
         height: dimensions.headerFilterHeight,
@@ -103,10 +105,9 @@ export const useGridColumnHeaders = props => {
         "data-field": colDef.field,
         item: item,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: i,
-        sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
       }, rootProps.slotProps?.headerFilterCell), `${colDef.field}-filter`));
     }
     return otherProps.getFillers(params, filters, 0, true);
@@ -122,14 +123,14 @@ export const useGridColumnHeaders = props => {
       "aria-rowindex": headerGroupingMaxDepth + 2,
       ownerState: rootProps,
       children: [leftRenderContext && getColumnFilters({
-        position: GridPinnedColumnPosition.LEFT,
+        position: PinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }), getColumnFilters({
         renderContext,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnFilters({
-        position: GridPinnedColumnPosition.RIGHT,
+        position: PinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
         maxLastColumn: rightRenderContext.lastColumnIndex
       })]

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNjM3NzIwMDAwMA==";
+  const releaseInfo = "MTczNzY1ODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -14,7 +14,7 @@ var _internals = require("@mui/x-data-grid/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["getColumnsToRender", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "getCellOffsetStyle"];
+const _excluded = ["getColumnsToRender", "getPinnedCellOffset", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "columnPositions"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -39,12 +39,13 @@ const useGridColumnHeaders = props => {
     })),
     {
       getColumnsToRender,
+      getPinnedCellOffset,
       renderContext,
       leftRenderContext,
       rightRenderContext,
       pinnedColumns,
       visibleColumns,
-      getCellOffsetStyle
+      columnPositions
     } = _useGridColumnHeaders,
     otherProps = (0, _objectWithoutPropertiesLoose2.default)(_useGridColumnHeaders, _excluded);
   const headerFiltersRef = React.useRef(null);
@@ -94,11 +95,12 @@ const useGridColumnHeaders = props => {
       }) : colDef.headerClassName;
       const item = getFilterItem(colDef);
       const pinnedPosition = params?.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: colDef.computedWidth
-      });
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = (0, _internals.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+      const showRightBorder = (0, _internals.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       filters.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.headerFilterCell, (0, _extends2.default)({
         colIndex: columnIndex,
         height: dimensions.headerFilterHeight,
@@ -111,10 +113,9 @@ const useGridColumnHeaders = props => {
         "data-field": colDef.field,
         item: item,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: i,
-        sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
       }, rootProps.slotProps?.headerFilterCell), `${colDef.field}-filter`));
     }
     return otherProps.getFillers(params, filters, 0, true);
@@ -130,14 +131,14 @@ const useGridColumnHeaders = props => {
       "aria-rowindex": headerGroupingMaxDepth + 2,
       ownerState: rootProps,
       children: [leftRenderContext && getColumnFilters({
-        position: _xDataGrid.GridPinnedColumnPosition.LEFT,
+        position: _internals.PinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }), getColumnFilters({
         renderContext,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnFilters({
-        position: _xDataGrid.GridPinnedColumnPosition.RIGHT,
+        position: _internals.PinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
         maxLastColumn: rightRenderContext.lastColumnIndex
       })]

package/hooks/features/columnPinning/useGridColumnPinning.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedColumns' | 'initialState'>>;
-export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnPinning" | "initialState" | "pinnedColumns" | "onPinnedColumnsChange" | "slotProps" | "slots">) => void;
+export declare const useGridColumnPinning: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnPinning" | "initialState" | "pinnedColumns" | "onPinnedColumnsChange" | "slotProps" | "slots">) => void;

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridColumnPinningPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;
+export declare const useGridColumnPinningPreProcessors: (apiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/hooks/features/columnReorder/useGridColumnReorder.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
@@ -6,4 +6,4 @@ export declare const columnReorderStateInitializer: GridStateInitializer;
 /**
  * @requires useGridColumns (method)
  */
-export declare const useGridColumnReorder: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnReorder" | "keepColumnPositionIfDraggedOutside" | "classes" | "onColumnOrderChange">) => void;
+export declare const useGridColumnReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnReorder" | "keepColumnPositionIfDraggedOutside" | "classes" | "onColumnOrderChange">) => void;

package/hooks/features/dataSource/useGridDataSource.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const dataSourceStateInitializer: GridStateInitializer;
-export declare const useGridDataSource: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "unstable_dataSource" | "unstable_dataSourceCache" | "unstable_onDataSourceError" | "sortingMode" | "filterMode" | "paginationMode" | "treeData">) => void;
+export declare const useGridDataSource: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "unstable_dataSource" | "unstable_dataSourceCache" | "unstable_onDataSourceError" | "sortingMode" | "filterMode" | "paginationMode" | "treeData">) => void;

package/hooks/features/dataSource/utils.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
 import { GridRowId } from '@mui/x-data-grid';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 export declare const runIfServerMode: (modeProp: "server" | "client", fn: Function) => () => void;
@@ -18,7 +19,7 @@ export declare class NestedDataManager {
     private settledRequests;
     private api;
     private maxConcurrentRequests;
-    constructor(privateApiRef: React.MutableRefObject<GridPrivateApiPro>, maxConcurrentRequests?: number);
+    constructor(privateApiRef: RefObject<GridPrivateApiPro>, maxConcurrentRequests?: number);
     private processQueue;
     queue: (ids: GridRowId[]) => Promise<void>;
     setRequestSettled: (id: GridRowId) => void;

package/hooks/features/detailPanel/useGridDetailPanel.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const detailPanelStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'initialState' | 'detailPanelExpandedRowIds'>>;
-export declare const useGridDetailPanel: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "getDetailPanelContent" | "getDetailPanelHeight" | "detailPanelExpandedRowIds" | "onDetailPanelExpandedRowIdsChange">) => void;
+export declare const useGridDetailPanel: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "getDetailPanelContent" | "getDetailPanelHeight" | "detailPanelExpandedRowIds" | "onDetailPanelExpandedRowIdsChange">) => void;

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridDetailPanelPreProcessors: (privateApiRef: React.MutableRefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;
+export declare const useGridDetailPanelPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/hooks/features/infiniteLoader/useGridInfiniteLoader.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 /**
@@ -6,4 +6,4 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridInfiniteLoader: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onRowsScrollEnd" | "pagination" | "paginationMode" | "rowsLoadingMode" | "scrollEndThreshold">) => void;
+export declare const useGridInfiniteLoader: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onRowsScrollEnd" | "pagination" | "paginationMode" | "rowsLoadingMode" | "scrollEndThreshold">) => void;

package/hooks/features/lazyLoader/useGridLazyLoader.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 /**
@@ -7,4 +7,4 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridLazyLoader: (privateApiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onFetchRows" | "rowsLoadingMode" | "pagination" | "paginationMode" | "experimentalFeatures">) => void;
+export declare const useGridLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onFetchRows" | "rowsLoadingMode" | "pagination" | "paginationMode" | "experimentalFeatures">) => void;

package/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const GRID_SKELETON_ROW_ROOT_ID = "auto-generated-skeleton-row-root";
-export declare const useGridLazyLoaderPreProcessors: (privateApiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowCount" | "rowsLoadingMode" | "experimentalFeatures">) => void;
+export declare const useGridLazyLoaderPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowCount" | "rowsLoadingMode" | "experimentalFeatures">) => void;

package/hooks/features/rowPinning/useGridRowPinning.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const rowPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId' | 'experimentalFeatures'>>;
-export declare const useGridRowPinning: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "pinnedRows" | "getRowId">) => void;
+export declare const useGridRowPinning: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "pinnedRows" | "getRowId">) => void;

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridHydrateRowsValue } from '@mui/x-data-grid/internals';
 import { GridRowId, GridRowModel } from '@mui/x-data-grid';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
@@ -9,7 +9,7 @@ export declare function addPinnedRow({ groupingParams, rowModel, rowId, position
     rowModel: GridRowModel;
     rowId: GridRowId;
     position: GridPinnedRowPosition;
-    apiRef: React.MutableRefObject<GridPrivateApiPro>;
+    apiRef: RefObject<GridPrivateApiPro>;
     isAutoGenerated: boolean;
 }): {
     dataRowIdToModelLookup: {
@@ -30,5 +30,5 @@ export declare function addPinnedRow({ groupingParams, rowModel, rowId, position
         pinnedRows?: import("@mui/x-data-grid/internals").GridPinnedRowsState;
     } | undefined;
 };
-export declare const useGridRowPinningPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPro>) => void;
+export declare const useGridRowPinningPreProcessors: (apiRef: RefObject<GridPrivateApiPro>) => void;
 export {};

package/hooks/features/rowReorder/useGridRowReorder.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 /**
  * Only available in DataGridPro
  * @requires useGridRows (method)
  */
-export declare const useGridRowReorder: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes">) => void;
+export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes">) => void;

package/hooks/features/rowReorder/useGridRowReorderPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridRowReorderPreProcessors: (privateApiRef: React.MutableRefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;
+export declare const useGridRowReorderPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridDataSourceTreeDataPreProcessors: (privateApiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "treeData" | "groupingColDef" | "disableChildrenSorting" | "disableChildrenFiltering" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridDataSourceTreeDataPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "treeData" | "groupingColDef" | "disableChildrenSorting" | "disableChildrenFiltering" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/features/treeData/gridTreeDataUtils.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
 import { GridRowTreeConfig, GridFilterState, GridFilterModel } from '@mui/x-data-grid';
 import { GridAggregatedFilterItemApplier } from '@mui/x-data-grid/internals';
 import type { GridPrivateApiPro } from '../../../models/gridApiPro';
@@ -6,7 +7,7 @@ interface FilterRowTreeFromTreeDataParams {
     disableChildrenFiltering: boolean;
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
     filterModel: GridFilterModel;
-    apiRef: React.MutableRefObject<GridPrivateApiPro>;
+    apiRef: RefObject<GridPrivateApiPro>;
 }
 export declare enum TreeDataStrategy {
     Default = "tree-data",

package/hooks/features/treeData/useGridTreeData.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
-export declare const useGridTreeData: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, "unstable_dataSource">) => void;
+export declare const useGridTreeData: (apiRef: RefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, "unstable_dataSource">) => void;

package/hooks/features/treeData/useGridTreeDataPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridTreeDataPreProcessors: (privateApiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "treeData" | "groupingColDef" | "getTreeDataPath" | "disableChildrenSorting" | "disableChildrenFiltering" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridTreeDataPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "treeData" | "groupingColDef" | "getTreeDataPath" | "disableChildrenSorting" | "disableChildrenFiltering" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/utils/useGridApiContext.d.ts

@@ -1,2 +1,2 @@
 import { GridApiPro } from '../../models/gridApiPro';
-export declare const useGridApiContext: () => import("react").MutableRefObject<GridApiPro>;
+export declare const useGridApiContext: () => import("react").RefObject<GridApiPro>;

package/hooks/utils/useGridPrivateApiContext.d.ts

@@ -1,2 +1,2 @@
 import { GridPrivateApiPro } from '../../models/gridApiPro';
-export declare const useGridPrivateApiContext: () => import("react").MutableRefObject<GridPrivateApiPro>;
+export declare const useGridPrivateApiContext: () => import("react").RefObject<GridPrivateApiPro>;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.23.6
+ * @mui/x-data-grid-pro v7.24.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/models/dataGridProProps.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel, GridGroupNode, GridFeatureMode, GridListColDef } from '@mui/x-data-grid';
 import type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, GridPinnedColumnFields, DataGridProSharedPropsWithDefaultValue, DataGridProSharedPropsWithoutDefaultValue, GridDataSourceCache, GridGetRowsParams } from '@mui/x-data-grid/internals';
 import type { GridPinnedRowsProp } from '../hooks/features/rowPinning';
@@ -123,7 +124,7 @@ export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel
     /**
      * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
-    apiRef?: React.MutableRefObject<GridApiPro>;
+    apiRef?: RefObject<GridApiPro>;
     /**
      * The initial state of the DataGridPro.
      * The data in it will be set in the state on initialization but will not be controlled.

package/modern/DataGridPro/DataGridPro.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid';
+import { GridRoot, GridContextProvider } from '@mui/x-data-grid';
 import { validateProps } from '@mui/x-data-grid/internals';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridProComponent } from "./useDataGridProComponent.js";
@@ -13,7 +13,7 @@ import { getReleaseInfo } from "../utils/releaseInfo.js";
 import { propValidatorsDataGridPro } from "../internals/propValidation.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useGridAriaAttributes,
@@ -32,18 +32,16 @@ const DataGridProRaw = forwardRef(function DataGridPro(inProps, ref) {
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
+    children: /*#__PURE__*/_jsx(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
       ref: ref,
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        children: /*#__PURE__*/_jsx(Watermark, {
-          packageName: "x-data-grid-pro",
-          releaseInfo: releaseInfo
-        })
-      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+      children: /*#__PURE__*/_jsx(Watermark, {
+        packageName: "x-data-grid-pro",
+        releaseInfo: releaseInfo
+      })
     }))
   });
 });

package/modern/DataGridPro/useDataGridProComponent.js

@@ -44,6 +44,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -54,7 +55,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);

package/modern/components/headerFiltering/GridHeaderFilterCell.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength", "gridHasFiller"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "pinnedOffset", "style", "showLeftBorder", "showRightBorder"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, GridFilterInputValue, GridFilterInputDate, GridFilterInputBoolean, GridFilterInputSingleSelect, gridFilterModelSelector, gridFilterableColumnLookupSelector } from '@mui/x-data-grid';
-import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/internals';
+import { PinnedColumnPosition, useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, attachPinnedStyle } from '@mui/x-data-grid/internals';
+import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridHeaderFilterMenuContainer } from "./GridHeaderFilterMenuContainer.js";
@@ -22,7 +23,7 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', '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', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -54,13 +55,14 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
       InputComponentProps,
       showClearIcon = true,
       pinnedPosition,
+      pinnedOffset,
       style: styleProp,
-      indexInSection,
-      sectionLength,
-      gridHasFiller
+      showLeftBorder,
+      showRightBorder
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
+  const isRtl = useRtl();
   const columnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   const rootProps = useGridRootProps();
   const cellRef = React.useRef(null);
@@ -175,8 +177,6 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
     onMouseDown: publish('headerFilterMouseDown', onMouseDown),
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
-  const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = _extends({}, rootProps, {
     pinnedPosition,
     colDef,
@@ -190,10 +190,10 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/_jsxs("div", _extends({
     className: clsx(classes.root, headerClassName),
-    style: _extends({
+    style: attachPinnedStyle(_extends({
       height,
       width
-    }, styleProp),
+    }, styleProp), isRtl, pinnedPosition, pinnedOffset),
     role: "columnheader",
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
@@ -252,7 +252,6 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
   colIndex: PropTypes.number.isRequired,
-  gridHasFiller: PropTypes.bool.isRequired,
   hasFocus: PropTypes.bool,
   /**
    * Class name added to the column header cell.
@@ -262,7 +261,6 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
     current: PropTypes.object
   }).isRequired,
   height: PropTypes.number.isRequired,
-  indexInSection: PropTypes.number.isRequired,
   InputComponentProps: PropTypes.object,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
@@ -270,9 +268,11 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
   }).isRequired,
-  pinnedPosition: PropTypes.oneOf(['left', 'right']),
-  sectionLength: PropTypes.number.isRequired,
+  pinnedOffset: PropTypes.number,
+  pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]),
   showClearIcon: PropTypes.bool,
+  showLeftBorder: PropTypes.bool.isRequired,
+  showRightBorder: PropTypes.bool.isRequired,
   sortIndex: PropTypes.number,
   style: PropTypes.object,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,

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

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["getColumnsToRender", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "getCellOffsetStyle"];
+const _excluded = ["getColumnsToRender", "getPinnedCellOffset", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "columnPositions"];
 import * as React from 'react';
-import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridPinnedColumnPosition, gridDimensionsSelector } from '@mui/x-data-grid';
-import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow } from '@mui/x-data-grid/internals';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, gridDimensionsSelector } from '@mui/x-data-grid';
+import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow, shouldCellShowLeftBorder, shouldCellShowRightBorder, PinnedColumnPosition } from '@mui/x-data-grid/internals';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,12 +31,13 @@ export const useGridColumnHeaders = props => {
     })),
     {
       getColumnsToRender,
+      getPinnedCellOffset,
       renderContext,
       leftRenderContext,
       rightRenderContext,
       pinnedColumns,
       visibleColumns,
-      getCellOffsetStyle
+      columnPositions
     } = _useGridColumnHeaders,
     otherProps = _objectWithoutPropertiesLoose(_useGridColumnHeaders, _excluded);
   const headerFiltersRef = React.useRef(null);
@@ -86,11 +87,12 @@ export const useGridColumnHeaders = props => {
       }) : colDef.headerClassName;
       const item = getFilterItem(colDef);
       const pinnedPosition = params?.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: colDef.computedWidth
-      });
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       filters.push(/*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
         colIndex: columnIndex,
         height: dimensions.headerFilterHeight,
@@ -103,10 +105,9 @@ export const useGridColumnHeaders = props => {
         "data-field": colDef.field,
         item: item,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: i,
-        sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
       }, rootProps.slotProps?.headerFilterCell), `${colDef.field}-filter`));
     }
     return otherProps.getFillers(params, filters, 0, true);
@@ -122,14 +123,14 @@ export const useGridColumnHeaders = props => {
       "aria-rowindex": headerGroupingMaxDepth + 2,
       ownerState: rootProps,
       children: [leftRenderContext && getColumnFilters({
-        position: GridPinnedColumnPosition.LEFT,
+        position: PinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }), getColumnFilters({
         renderContext,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnFilters({
-        position: GridPinnedColumnPosition.RIGHT,
+        position: PinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
         maxLastColumn: rightRenderContext.lastColumnIndex
       })]

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.23.6
+ * @mui/x-data-grid-pro v7.24.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNjM3NzIwMDAwMA==";
+  const releaseInfo = "MTczNzY1ODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.23.6",
+  "version": "7.24.1",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -39,9 +39,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-data-grid": "7.23.6",
-    "@mui/x-internals": "7.23.6",
-    "@mui/x-license": "7.23.6"
+    "@mui/x-internals": "7.24.1",
+    "@mui/x-license": "7.24.1",
+    "@mui/x-data-grid": "7.24.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczNjM3NzIwMDAwMA==";
+  const releaseInfo = "MTczNzY1ODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat