@mui/x-data-grid-pro 7.23.5 → 7.24.0

package/CHANGELOG.md

@@ -3,6 +3,165 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Chinese (Taiwan) (zh-TW) locale on the Date and Time Pickers
+- 🌍 Improve Norwegian (nb-NO) locale on the Date and Time Pickers
+- 🌍 Improve Dutch (nl-NL) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@josteinjhauge, @derek-0000, @nusr, @k-rajat19, @tomashauser.
+Following are all team members who have contributed to this release:
+@flaviendelangle, @LukasTy, @MBilalShafi, @arminmeh, @oliviertassinari, @cherniavskii.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.23.6`
+
+- [DataGrid] Improve React 19 support (#16048) @LukasTy
+- [DataGrid] Add `name` attribute to selection checkboxes (#16041) @derek-0000
+- [DataGrid] Fix number filter field formatting values while typing (#16068) @arminmeh
+- [DataGrid] Fix select all checkbox state reset with server side data (#16039) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.23.6` [![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.23.6`.
+
+#### `@mui/x-data-grid-premium@7.23.6` [![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.23.6`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.23.6`
+
+- [pickers] Improve React 19 support (#16048) @LukasTy
+- [l10n] Add Chinese (Taiwan) (zh-TW) locale (#16057) @nusr
+- [l10n] Improve Norwegian (nb-NO) locale (#16083) @josteinjhauge
+- [pickers] Support `date-fns-jalali` v4 (#16013) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.23.6` [![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.23.6`.
+
+### Charts
+
+#### `@mui/x-charts@7.23.6`
+
+- [charts] Improve React 19 support (#16048) @LukasTy
+- [charts] Fix 301 redirection in the API documentation @oliviertassinari
+
+#### `@mui/x-charts-pro@7.23.6` [![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.23.6`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.23.6`
+
+- [TreeView] Improve React 19 support (#16048) @LukasTy
+
+#### `@mui/x-tree-view-pro@7.23.6` [![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.23.6`.
+
+### Docs
+
+- [docs] Fix `EditingWithDatePickers` demo (#16047) @k-rajat19
+- [docs] Fix doc warning for automatic children selection on tree view (#16037) @flaviendelangle
+- [docs] Fix non-existing "adapter" property of `LocalizationProvider` (#16088) @tomashauser
+
+### Core
+
+- [core] Clarify the release strategy (#16012) @MBilalShafi
+- [core] Update the `release:version` docs (#16040) @cherniavskii
+
 ## 7.23.5
 
 _Dec 27, 2024_

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 { GridApiPro, GridPrivateApiPro } from '../models/gridApiPro';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
-export declare const useDataGridProComponent: (inputApiRef: React.MutableRefObject<GridApiPro> | undefined, props: DataGridProProcessedProps) => React.MutableRefObject<GridPrivateApiPro>;
+export declare const useDataGridProComponent: (inputApiRef: React.RefObject<GridApiPro> | undefined, props: DataGridProProcessedProps) => 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,11 +31,11 @@ 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);
 };
-const dateSx = {
+const emptyFieldSx = {
   [`& input[value=""]:not(:focus)`]: {
     color: 'transparent'
   }
@@ -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
@@ -238,7 +238,7 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
         disabled: isFilterReadOnly || isNoInputOperator,
         tabIndex: -1,
         InputLabelProps: null,
-        sx: colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined
+        sx: colDef.type === 'date' || colDef.type === 'dateTime' || colDef.type === 'number' ? emptyFieldSx : undefined
       }, isNoInputOperator ? {
         value: ''
       } : {}, currentOperator?.InputComponentProps, InputComponentProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderFilterMenuContainer.GridHeaderFilterMenuContainer, {
@@ -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,11 +23,11 @@ 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);
 };
-const dateSx = {
+const emptyFieldSx = {
   [`& input[value=""]:not(:focus)`]: {
     color: 'transparent'
   }
@@ -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
@@ -230,7 +230,7 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
         disabled: isFilterReadOnly || isNoInputOperator,
         tabIndex: -1,
         InputLabelProps: null,
-        sx: colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined
+        sx: colDef.type === 'date' || colDef.type === 'dateTime' || colDef.type === 'number' ? emptyFieldSx : undefined
       }, isNoInputOperator ? {
         value: ''
       } : {}, currentOperator?.InputComponentProps, InputComponentProps)), /*#__PURE__*/_jsx(GridHeaderFilterMenuContainer, {
@@ -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/hooks/features/columnReorder/useGridColumnReorder.js

@@ -37,7 +37,7 @@ export const useGridColumnReorder = (apiRef, props) => {
   });
   const originColumnIndex = React.useRef(null);
   const forbiddenIndexes = React.useRef({});
-  const removeDnDStylesTimeout = React.useRef();
+  const removeDnDStylesTimeout = React.useRef(undefined);
   const ownerState = {
     classes: props.classes
   };

package/esm/hooks/features/detailPanel/useGridDetailPanel.js

@@ -156,8 +156,8 @@ export const useGridDetailPanel = (apiRef, props) => {
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
   useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCachesAndForceUpdate);
-  const previousGetDetailPanelContentProp = React.useRef();
-  const previousGetDetailPanelHeightProp = React.useRef();
+  const previousGetDetailPanelContentProp = React.useRef(null);
+  const previousGetDetailPanelHeightProp = React.useRef(null);
   const updateCachesIfNeeded = React.useCallback(() => {
     if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current) {
       return;

package/esm/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -19,7 +19,7 @@ const InfiniteLoadingTriggerElement = styled('div')({
 export const useGridInfiniteLoader = (apiRef, props) => {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
-  const observer = React.useRef();
+  const observer = React.useRef(null);
   const updateTargetTimeout = useTimeout();
   const triggerElement = React.useRef(null);
   const isEnabled = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;