@mui/x-data-grid-pro 7.0.0-beta.6 → 7.0.0-beta.7

package/CHANGELOG.md

@@ -3,6 +3,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦥 The Lazy loading feature is now stable and the `lazyLoading` feature flag was removed from the `experimentalFeatures` prop.
+- 🌍 Improve Japanese (ja-JP) locale for the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`.
+- The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
+- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.
+  The pinned column headers now use `position: 'sticky'` and are rendered in the same row element as the regular column headers.
+
+#### `@mui/x-data-grid@7.0.0-beta.7`
+
+- [DataGrid] Fix focus visible style on scrollbar (#12402) @oliviertassinari
+- [DataGrid] Fix the issue where pressing the Delete key resets various cell values to an empty string. (#12216) @sooster910
+- [DataGrid] Make `rowCount` part of the state (#12381) @MBilalShafi
+- [DataGrid] Make column resizing and autosizing available in Community plan (#12420) @cherniavskii
+- [DataGrid] Remove `baseSwitch` slot (#12439) @romgrk
+- [l10n] Improve Japanese (ja-JP) locale (#12398) @makoto14
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.7` [![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.0.0-beta.7`, plus:
+
+- [DataGridPro] Add `inputRef` to the props passed to `colDef.renderHeaderFilter` (#12328) @vovarudomanenko
+- [DataGridPro] Fix filler rendered for no reason when there are pinned columns (#12440) @cherniavskii
+- [DataGridPro] Make lazy loading feature stable (#12421) @cherniavskii
+- [DataGridPro] Render pinned and non-pinned column headers in one row (#12376) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.7` [![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.0.0-beta.7`, plus:
+
+- [DataGridPremium] Fix auto-scroll not working when selecting cell range (#12267) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.7`
+
+- [fields] Fix `tabIndex` on accessible field DOM structure (#12311) @flaviendelangle
+- [fields] Fix items alignment on multi input range fields (#12312) @flaviendelangle
+- [pickers] Improve the customization of the range picker calendar header (#11988) @flaviendelangle
+- [pickers] Keep the existing time when looking for closest enabled date (#12377) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.7` [![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.0.0-beta.7`.
+
+### Charts
+
+#### `@mui/x-charts@7.0.0-beta.7`
+
+- [charts] Fix axis highlight when axis is reversed (#12407) @alexfauquette
+
+### Tree View
+
+#### Breaking changes
+
+The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
+
+```diff
+ <SimpleTreeView
+-  onNodeFocus={onNodeFocus}
++  onItemFocus={onItemFocus}
+ />
+```
+
+#### `@mui/x-tree-view@7.0.0-beta.7`
+
+- [TreeView] Clean the usage of the term "item" and "node" in API introduced during v7 (#12368) @noraleonte
+- [TreeView] Introduce a new `TreeItem2` component and a new `useTreeItem2` hook (#11721) @flaviendelangle
+- [TreeView] Rename `onNodeFocus` to `onItemFocus` (#12419) @noraleonte
+
+### Docs
+
+- [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
+- [docs] Add missing luxon `Info` import (#12427) @LukasTy
+- [docs] Improve slots definitions for charts (#12408) @alexfauquette
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
+- [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
+
+### Core
+
+- [core] Fix CI (#12414) @flaviendelangle
+- [core] Fix PR deploy link for Tree View doc pages (#12411) @flaviendelangle
+
 ## 7.0.0-beta.6
 
 _Mar 8, 2024_
@@ -1731,7 +1827,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.3`, plus:
   The Firefox browser currently does not support this behavior because the [getWeekInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) API is not yet implemented.
 
   ```ts
-  import { Settings } from 'luxon';
+  import { Settings, Info } from 'luxon';
 
   Settings.defaultWeekSettings = {
     firstDay: 1,
@@ -2521,6 +2617,26 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to @LukasTy who made this release possible.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.7`
+
+- [pickers] Keep the existing time when looking for closest enabled date (#12410) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.7` [![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@6.19.7`.
+
+### Docs
+
+- [docs] Add Pickers custom start of week section (#12425) @LukasTy
+
 ## 6.19.6
 
 _Mar 1, 2024_

package/DataGridPro/DataGridPro.js

@@ -255,7 +255,6 @@ DataGridProRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
-    lazyLoading: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
   /**
@@ -650,6 +649,11 @@ DataGridProRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowClick: _propTypes.default.func,
+  /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: _propTypes.default.func,
   /**
    * Callback fired when a double click event comes from a row container element.
    * @param {GridRowParams} params With all properties from [[RowParams]].

package/DataGridPro/useDataGridProComponent.js

@@ -7,7 +7,6 @@ exports.useDataGridProComponent = void 0;
 var _internals = require("@mui/x-data-grid/internals");
 var _useGridInfiniteLoader = require("../hooks/features/infiniteLoader/useGridInfiniteLoader");
 var _useGridColumnReorder = require("../hooks/features/columnReorder/useGridColumnReorder");
-var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _useGridTreeData = require("../hooks/features/treeData/useGridTreeData");
 var _useGridTreeDataPreProcessors = require("../hooks/features/treeData/useGridTreeDataPreProcessors");
 var _useGridColumnPinning = require("../hooks/features/columnPinning/useGridColumnPinning");
@@ -57,7 +56,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.filterStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.densityStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridColumnReorder.columnReorderStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, 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);
@@ -82,7 +81,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridSorting)(apiRef, props);
   (0, _internals.useGridDensity)(apiRef, props);
   (0, _useGridColumnReorder.useGridColumnReorder)(apiRef, props);
-  (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);
+  (0, _internals.useGridColumnResize)(apiRef, props);
   (0, _internals.useGridPagination)(apiRef, props);
   (0, _internals.useGridRowsMeta)(apiRef, props);
   (0, _useGridRowReorder.useGridRowReorder)(apiRef, props);

package/components/GridColumnHeaders.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { UseGridColumnHeadersProps } from '@mui/x-data-grid/internals';
-interface DataGridProColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, Omit<UseGridColumnHeadersProps, 'innerRef'> {
-    innerRef?: React.Ref<HTMLDivElement>;
+interface DataGridProColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
 }
 declare const GridColumnHeaders: React.ForwardRefExoticComponent<DataGridProColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
 export { GridColumnHeaders };

package/components/GridColumnHeaders.js

@@ -5,85 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridColumnHeaders = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
-var _GridScrollArea = require("./GridScrollArea");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["style", "className", "innerRef", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["style", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useUtilityClasses = ownerState => {
-  const {
-    leftPinnedColumns,
-    rightPinnedColumns,
-    classes
-  } = ownerState;
-  const slots = {
-    leftPinnedColumns: ['pinnedColumnHeaders', leftPinnedColumns && leftPinnedColumns.length > 0 && `pinnedColumnHeaders--left`],
-    rightPinnedColumns: ['pinnedColumnHeaders', rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`, 'withBorderColor']
-  };
-  return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
-};
-const GridColumnHeadersPinnedColumnHeaders = (0, _styles.styled)('div', {
-  name: 'MuiDataGrid',
-  slot: 'PinnedColumnHeaders',
-  overridesResolver: (_, styles) => [{
-    [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--left']}`]: styles['pinnedColumnHeaders--left']
-  }, {
-    [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right']
-  }, styles.pinnedColumnHeaders]
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  position: 'sticky',
-  zIndex: 5,
-  top: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  backgroundColor: 'var(--DataGrid-pinnedBackground)'
-}, ownerState.side === _xDataGrid.GridPinnedColumnPosition.LEFT && {
-  left: 0
-}, ownerState.side === _xDataGrid.GridPinnedColumnPosition.RIGHT && {
-  right: 0
-}, {
-  [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--left']}`]: {
-    left: 0,
-    '& > [role="row"] > [role="columnheader"]:last-of-type': {
-      borderRight: '1px solid var(--DataGrid-rowBorderColor)'
-    }
-  },
-  [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--right']}`]: {
-    right: 0,
-    '& > [role="row"] > [role="columnheader"]:first-of-type': {
-      borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
-    }
-  }
-}));
 const Filler = (0, _styles.styled)('div')({
   flex: 1,
   backgroundColor: 'var(--DataGrid-containerBackground)'
 });
-GridColumnHeadersPinnedColumnHeaders.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  ownerState: _propTypes.default.object.isRequired
-};
 const GridColumnHeaders = exports.GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className,
-      innerRef,
       visibleColumns,
       sortColumnLookup,
       filterColumnLookup,
@@ -98,18 +37,12 @@ const GridColumnHeaders = exports.GridColumnHeaders = /*#__PURE__*/React.forward
       hasOtherElementInTabSequence
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const visiblePinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisiblePinnedColumnDefinitionsSelector);
   const {
-    isDragging,
-    renderContext,
     getInnerProps,
-    getColumnHeaders,
-    getColumnFilters,
-    getColumnGroupHeaders
+    getColumnHeadersRow,
+    getColumnFiltersRow,
+    getColumnGroupHeadersRows
   } = (0, _useGridColumnHeaders.useGridColumnHeaders)({
-    innerRef,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
@@ -123,100 +56,11 @@ const GridColumnHeaders = exports.GridColumnHeaders = /*#__PURE__*/React.forward
     columnVisibility,
     columnGroupsHeaderStructure
   });
-  const ownerState = (0, _extends2.default)({}, rootProps, {
-    leftPinnedColumns: visiblePinnedColumns.left.map(c => c.field),
-    rightPinnedColumns: visiblePinnedColumns.right.map(c => c.field),
-    classes: rootProps.classes
-  });
-  const classes = useUtilityClasses(ownerState);
-  const leftRenderContext = renderContext && visiblePinnedColumns.left.length ? (0, _extends2.default)({}, renderContext, {
-    firstColumnIndex: 0,
-    lastColumnIndex: visiblePinnedColumns.left.length
-  }) : null;
-  const rightRenderContext = renderContext && visiblePinnedColumns.right.length ? (0, _extends2.default)({}, renderContext, {
-    firstColumnIndex: visibleColumns.length - visiblePinnedColumns.right.length,
-    lastColumnIndex: visibleColumns.length
-  }) : null;
-  const innerProps = getInnerProps();
-  const pinnedColumnHeadersProps = {
-    role: innerProps.role
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridBaseColumnHeaders, (0, _extends2.default)({
     ref: ref,
     className: className
-  }, other, {
-    children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
-      className: classes.leftPinnedColumns,
-      ownerState: (0, _extends2.default)({}, ownerState, {
-        side: _xDataGrid.GridPinnedColumnPosition.LEFT,
-        showCellVerticalBorder: rootProps.showCellVerticalBorder
-      })
-    }, pinnedColumnHeadersProps, {
-      children: [getColumnGroupHeaders({
-        position: _xDataGrid.GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      }), getColumnHeaders({
-        position: _xDataGrid.GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      }, {
-        disableReorder: true
-      }), getColumnFilters({
-        position: _xDataGrid.GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      })]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
-      scrollDirection: "left"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
-      isDragging: isDragging
-    }, innerProps, {
-      children: [getColumnGroupHeaders({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      }), getColumnHeaders({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      }), getColumnFilters({
-        renderContext,
-        minFirstColumn: visiblePinnedColumns.left.length,
-        maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length
-      })]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
-      scrollDirection: "right"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Filler, {}), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
-      ownerState: (0, _extends2.default)({}, ownerState, {
-        side: _xDataGrid.GridPinnedColumnPosition.RIGHT,
-        showCellVerticalBorder: rootProps.showCellVerticalBorder
-      }),
-      className: classes.rightPinnedColumns
-    }, pinnedColumnHeadersProps, {
-      children: [getColumnGroupHeaders({
-        position: _xDataGrid.GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      }), getColumnHeaders({
-        position: _xDataGrid.GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      }, {
-        disableReorder: true,
-        separatorSide: _xDataGrid.GridColumnHeaderSeparatorSides.Left
-      }), getColumnFilters({
-        position: _xDataGrid.GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      })]
-    }))]
+  }, other, getInnerProps(), {
+    children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/(0, _jsxRuntime.jsx)(Filler, {})]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
@@ -250,7 +94,6 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   filterColumnLookup: _propTypes.default.object.isRequired,
   hasOtherElementInTabSequence: _propTypes.default.bool.isRequired,
   headerGroupingMaxDepth: _propTypes.default.number.isRequired,
-  innerRef: _utils.refType,
   sortColumnLookup: _propTypes.default.object.isRequired,
   visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 } : void 0;

package/components/headerFiltering/GridHeaderFilterCell.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { GridFilterItem, GridFilterOperator, GridColDef } from '@mui/x-data-grid';
+import { GridFilterItem, GridFilterOperator, GridColDef, GridPinnedColumnPosition } from '@mui/x-data-grid';
 import { GridStateColDef } from '@mui/x-data-grid/internals';
+export interface GridRenderHeaderFilterProps extends GridHeaderFilterCellProps {
+    inputRef: React.RefObject<unknown>;
+}
 export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'headerClassName'> {
     colIndex: number;
     height: number;
@@ -13,6 +16,10 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
     item: GridFilterItem;
     showClearIcon?: boolean;
     InputComponentProps: GridFilterOperator['InputComponentProps'];
+    pinnedPosition?: GridPinnedColumnPosition;
+    style?: React.CSSProperties;
+    indexInSection: number;
+    sectionLength: number;
 }
 declare const Memoized: React.ForwardRefExoticComponent<GridHeaderFilterCellProps & React.RefAttributes<HTMLDivElement>>;
 export { Memoized as GridHeaderFilterCell };

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -13,21 +13,24 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
+var _cellBorderUtils = require("@mui/x-data-grid/utils/cellBorderUtils");
 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"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     colDef,
     classes,
-    showColumnVerticalBorder
+    showRightBorder,
+    showLeftBorder,
+    pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showColumnVerticalBorder && 'columnHeader--withRightBorder']
+    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']
   };
   return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
 };
@@ -47,7 +50,11 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       item,
       headerFilterMenuRef,
       InputComponentProps,
-      showClearIcon = true
+      showClearIcon = true,
+      pinnedPosition,
+      style: styleProp,
+      indexInSection,
+      sectionLength
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _internals.useGridPrivateApiContext)();
@@ -87,7 +94,9 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef, item]);
   let headerFilterComponent;
   if (colDef.renderHeaderFilter) {
-    headerFilterComponent = colDef.renderHeaderFilter(props);
+    headerFilterComponent = colDef.renderHeaderFilter((0, _extends2.default)({}, props, {
+      inputRef
+    }));
   }
   React.useLayoutEffect(() => {
     if (hasFocus && !isMenuOpen) {
@@ -97,7 +106,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
       const elementToFocus = focusableElement || cellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
     }
   }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
   const onKeyDown = React.useCallback(event => {
@@ -163,8 +172,13 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     onMouseDown: publish('headerFilterMouseDown', onMouseDown),
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
+  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
   const ownerState = (0, _extends2.default)({}, rootProps, {
-    colDef
+    pinnedPosition,
+    colDef,
+    showLeftBorder,
+    showRightBorder
   });
   const classes = useUtilityClasses(ownerState);
   const isNoInputOperator = filterOperators?.find(({
@@ -176,12 +190,12 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, headerClassName),
     ref: handleRef,
-    style: {
+    style: (0, _extends2.default)({
       height,
       width,
       minWidth: width,
       maxWidth: width
-    },
+    }, styleProp),
     role: "columnheader",
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
@@ -248,6 +262,7 @@ 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,
@@ -255,8 +270,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,
   showClearIcon: _propTypes.default.bool,
   sortIndex: _propTypes.default.number,
+  style: _propTypes.default.object,
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
   width: _propTypes.default.number.isRequired
 } : void 0;

package/esm/DataGridPro/DataGridPro.js

@@ -248,7 +248,6 @@ DataGridProRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    lazyLoading: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -643,6 +642,11 @@ DataGridProRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowClick: PropTypes.func,
+  /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a row container element.
    * @param {GridRowParams} params With all properties from [[RowParams]].

package/esm/DataGridPro/useDataGridProComponent.js

@@ -1,8 +1,7 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
-import { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 import { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
 import { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';