@mui/x-data-grid-pro 6.6.0 → 6.7.0

package/CHANGELOG.md

@@ -3,6 +3,78 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.7.0
+
+_Jun 9, 2023_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Improve the default `format` prop value on the pickers.
+
+  Here are a few examples:
+
+  ```tsx
+  <TimePicker views={['hours', 'minutes', 'seconds']} ampm />
+  // Format before v6.7.0: `hh:mm aa`
+  // Format after v6.7.0: `hh:mm:ss aa`
+ 
+  <DatePicker views={['year']} />
+  // Format before v6.7.0: `MM/DD/YYYY`
+  // Format after v6.7.0: `YYYY`
+  
+  <DateTimePicker views={['day', 'hours', 'minutes']} ampm />
+  // Format before v6.7.0: `MM/DD/YYYY hh:mm aa`
+  // Format after v6.7.0: `DD hh:mm aa`
+  ```
+
+- 🌍 Add Romanian (ro-RO) locale on the pickers
+- 🌍 Improve German (de-DE) locale on the pickers
+- 🌍 Improve Czech (cs-CZ), German (de-DE) and Turkish (tr-TR) locales on the data grid
+- 🚀 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.7.0` / `@mui/x-data-grid-pro@v6.7.0` / `@mui/x-data-grid-premium@v6.7.0`
+
+#### Changes
+
+- [DataGrid] Allow overflowing grid root element (#9179) @cherniavskii
+- [DataGrid] Fix module augmentation error when using `@mui/lab` (#9235) @cherniavskii
+- [DataGrid] Fix row with ids matching `Object` prototype (#9265) @romgrk
+- [DataGrid] Fix `sortModel` and `filterModel` resetting when columns change (#9239) @alexgonch
+- [DataGrid] Improve grouping performance for large datasets (#9200) @romgrk
+- [DataGrid] Increase threshold to trigger memory leak warning (#9263) @m4theushw
+- [DataGrid] Update data grid migration guide to include updated type (#9272) @MBilalShafi
+- [DataGridPro] Improve header filter menu visuals (#9181) @MBilalShafi
+- [DataGridPremium] Remove last line break on clipboard paste (#9163) @cherniavskii
+- [l10n] Improve Czech (cs-CZ) locale (#9266) @MartinSkarpa
+- [l10n] Improve German (de-DE) locale (#9259) @ximex
+- [l10n] Improve Turkish (tr-TR) locale (#9237) @MCErtan
+
+### `@mui/x-date-pickers@v6.7.0` / `@mui/x-date-pickers-pro@v6.7.0`
+
+#### Changes
+
+- [l10n] Add Romanian (ro-RO) locale (#9257) @ximex
+- [l10n] Improve German (de-DE) locale (#9258) @ximex
+- [pickers] Apply dynamic default format depending on views for all desktop and mobile pickers (#9126) @flaviendelangle
+- [pickers] Update `DateRangePickerDay` props JSDoc (#9191) @stevus
+
+### Docs
+
+- [docs] Fix missing props on the `GridFilterPanel` API page (#9180) @cherniavskii
+- [docs] Fix overview page typo (#9230) @LukasTy
+- [docs] Fix version redirect (#9273) @alexfauquette
+
+### Core
+
+- [core] Temporarily remove the Argos upload on the regression testing (#9267) @flaviendelangle
+- [charts] Add clip-path to avoid charts overflow (#9012) @alexfauquette
+- [charts] Add style customization on bar (#8935) @alexfauquette
+- [charts] Enforce axis `min`/`max` over the `nice()` method (#9189) @alexfauquette
+- [charts] Improve axis label and ticks label alignements (#9190) @alexfauquette
+- [charts] Simplify the switch between responsive and fix dimensions (#9151) @alexfauquette
+
 ## 6.6.0
 
 _Jun 1, 2023_

package/components/headerFiltering/GridHeaderFilterCell.d.ts

@@ -7,7 +7,6 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
     sortIndex?: number;
     hasFocus?: boolean;
     tabIndex: 0 | -1;
-    headerFilterComponent?: React.ReactNode;
     filterOperators?: GridFilterOperator[];
     width: number;
     colDef: GridColDef;

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colIndex", "height", "hasFocus", "headerFilterComponent", "filterOperators", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
+const _excluded = ["colIndex", "height", "hasFocus", "filterOperators", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -8,7 +8,7 @@ import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeCl
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { useGridPrivateApiContext, unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridHeaderFilterAdornment } from './GridHeaderFilterAdornment';
+import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
 import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,13 +23,17 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const dateSx = {
+  [`& input[value=""]:not(:focus)`]: {
+    color: 'transparent'
+  }
+};
 const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _filterOperators$find, _currentOperator$head, _colDef$headerName;
   const {
       colIndex,
       height,
       hasFocus,
-      headerFilterComponent,
       filterOperators,
       width,
       headerClassName,
@@ -61,6 +65,10 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const clearFilterItem = React.useCallback(() => {
     apiRef.current.deleteFilterItem(item);
   }, [apiRef, item]);
+  let headerFilterComponent;
+  if (colDef.renderHeaderFilter) {
+    headerFilterComponent = colDef.renderHeaderFilter(props);
+  }
   React.useLayoutEffect(() => {
     if (hasFocus && !isMenuOpen) {
       let focusableElement = cellRef.current.querySelector('[tabindex="0"]');
@@ -131,7 +139,8 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const mouseEventsHandlers = React.useMemo(() => ({
     onKeyDown: publish('headerFilterKeyDown', onKeyDown),
     onClick: publish('headerFilterClick'),
-    onMouseDown: publish('headerFilterMouseDown', onMouseDown)
+    onMouseDown: publish('headerFilterMouseDown', onMouseDown),
+    onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
   const ownerState = _extends({}, rootProps, {
     colDef
@@ -156,30 +165,35 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field : undefined
   }, other, mouseEventsHandlers, {
-    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsx(InputComponent, _extends({
-      apiRef: apiRef,
-      item: item,
-      inputRef: inputRef,
-      applyValue: applyFilterChanges,
-      onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
-      onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
-      placeholder: apiRef.current.getLocaleText('columnMenuFilter'),
-      label: isFilterActive ? capitalize(label) : ' ',
-      isFilterActive: isFilterActive,
-      headerFilterMenu: /*#__PURE__*/_jsx(GridHeaderFilterAdornment, {
+    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(InputComponent, _extends({
+        apiRef: apiRef,
+        item: item,
+        inputRef: inputRef,
+        applyValue: applyFilterChanges,
+        onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
+        onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
+        label: capitalize(label),
+        placeholder: "",
+        isFilterActive: isFilterActive,
+        clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
+          onClick: clearFilterItem
+        }) : null,
+        disabled: isNoInputOperator,
+        tabIndex: -1,
+        InputLabelProps: null,
+        sx: colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined
+      }, isNoInputOperator ? {
+        value: ''
+      } : {}, currentOperator == null ? void 0 : currentOperator.InputComponentProps, InputComponentProps)), /*#__PURE__*/_jsx(GridHeaderFilterMenuContainer, {
         operators: filterOperators,
         item: item,
         field: colDef.field,
         applyFilterChanges: applyFilterChanges,
         headerFilterMenuRef: headerFilterMenuRef,
         buttonRef: buttonRef
-      }),
-      clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
-        onClick: clearFilterItem
-      }) : null,
-      disabled: isNoInputOperator,
-      tabIndex: -1
-    }, currentOperator == null ? void 0 : currentOperator.InputComponentProps, InputComponentProps)) : null]
+      })]
+    }) : null]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
@@ -204,7 +218,6 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
    * Class name that will be added in the column header cell.
    */
   headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  headerFilterComponent: PropTypes.node,
   headerFilterMenuRef: PropTypes.shape({
     current: PropTypes.object
   }).isRequired,

package/components/headerFiltering/GridHeaderFilterClearButton.js

@@ -17,7 +17,7 @@ function GridHeaderFilterClearButton({
     onClick: onClick,
     sx: sx
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
-    children: /*#__PURE__*/_jsx(rootProps.slots.headerFilterClearIcon, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuClearIcon, {
       fontSize: "inherit"
     })
   }));

package/components/headerFiltering/GridHeaderFilterMenu.d.ts

@@ -8,7 +8,10 @@ interface GridHeaderFilterMenuProps {
     open: boolean;
     id: string;
     labelledBy: string;
-    targetRef: React.MutableRefObject<HTMLElement | null>;
+    target: HTMLElement | null;
+}
+declare function GridHeaderFilterMenu({ open, field, target, applyFilterChanges, operators, item, id, labelledBy, }: GridHeaderFilterMenuProps): React.JSX.Element | null;
+declare namespace GridHeaderFilterMenu {
+    var propTypes: any;
 }
-declare function GridHeaderFilterMenu({ open, field, targetRef, applyFilterChanges, operators, item, id, labelledBy, }: GridHeaderFilterMenuProps): React.JSX.Element | null;
 export { GridHeaderFilterMenu };

package/components/headerFiltering/GridHeaderFilterMenu.js

@@ -1,18 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import { unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_capitalize as capitalize, HTMLElementType } from '@mui/utils';
 import { useGridApiContext, GridMenu } from '@mui/x-data-grid';
-import { OPERATOR_SYMBOL_MAPPING } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridHeaderFilterMenu({
   open,
   field,
-  targetRef,
+  target,
   applyFilterChanges,
   operators,
   item,
@@ -31,13 +28,13 @@ function GridHeaderFilterMenu({
       hideMenu();
     }
   }, [hideMenu]);
-  if (!targetRef.current) {
+  if (!target) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridMenu, {
-    placement: "bottom-start",
+    placement: "bottom-end",
     open: open,
-    target: targetRef.current,
+    target: target,
     onClickAway: hideMenu,
     onExited: hideMenu,
     children: /*#__PURE__*/_jsx(MenuList, {
@@ -47,7 +44,7 @@ function GridHeaderFilterMenu({
       children: operators.map((op, i) => {
         var _op$headerLabel;
         const label = (_op$headerLabel = op == null ? void 0 : op.headerLabel) != null ? _op$headerLabel : apiRef.current.getLocaleText(`headerFilterOperator${capitalize(op.value)}`);
-        return /*#__PURE__*/_jsxs(MenuItem, {
+        return /*#__PURE__*/_jsx(MenuItem, {
           onClick: () => {
             applyFilterChanges(_extends({}, item, {
               operator: op.value
@@ -56,14 +53,38 @@ function GridHeaderFilterMenu({
           },
           autoFocus: i === 0 ? open : false,
           selected: op.value === item.operator,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: OPERATOR_SYMBOL_MAPPING[op.value]
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            children: label
-          })]
+          children: label
         }, `${field}-${op.value}`);
       })
     })
   });
 }
+process.env.NODE_ENV !== "production" ? GridHeaderFilterMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  applyFilterChanges: PropTypes.func.isRequired,
+  field: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired,
+  labelledBy: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
+  operators: PropTypes.arrayOf(PropTypes.shape({
+    getApplyFilterFn: PropTypes.func.isRequired,
+    getValueAsString: PropTypes.func,
+    headerLabel: PropTypes.string,
+    InputComponent: PropTypes.elementType,
+    InputComponentProps: PropTypes.object,
+    label: PropTypes.string,
+    requiresFilterValue: PropTypes.bool,
+    value: PropTypes.string.isRequired
+  })).isRequired,
+  target: HTMLElementType
+} : void 0;
 export { GridHeaderFilterMenu };

package/components/headerFiltering/{GridHeaderFilterAdornment.d.ts → GridHeaderFilterMenuContainer.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridFilterItem, GridFilterOperator, GridColDef } from '@mui/x-data-grid';
-declare function GridHeaderFilterAdornment(props: {
+declare function GridHeaderFilterMenuContainer(props: {
     operators: GridFilterOperator<any, any, any>[];
     field: GridColDef['field'];
     item: GridFilterItem;
@@ -8,7 +8,7 @@ declare function GridHeaderFilterAdornment(props: {
     headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
     buttonRef: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element | null;
-declare namespace GridHeaderFilterAdornment {
+declare namespace GridHeaderFilterMenuContainer {
     var propTypes: any;
 }
-export { GridHeaderFilterAdornment };
+export { GridHeaderFilterMenuContainer };

package/{modern/components/headerFiltering/GridHeaderFilterAdornment.js → components/headerFiltering/GridHeaderFilterMenuContainer.js}

@@ -7,15 +7,15 @@ import { useGridApiContext } from '@mui/x-data-grid';
 import { unstable_useId as useId } from '@mui/utils';
 import { unstable_gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { OPERATOR_SYMBOL_MAPPING } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const sx = {
   width: 22,
   height: 22,
-  padding: '0px 0px 2px 2px'
+  margin: 'auto 0 10px 5px'
 };
-function GridHeaderFilterAdornment(props) {
+function GridHeaderFilterMenuContainer(props) {
+  var _rootProps$slotProps;
   const {
       operators,
       item,
@@ -37,35 +37,34 @@ function GridHeaderFilterAdornment(props) {
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-      position: "start",
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-        id: buttonId,
-        ref: buttonRef,
-        "aria-label": apiRef.current.getLocaleText('filterPanelOperator'),
-        title: apiRef.current.getLocaleText('filterPanelOperator'),
-        "aria-controls": menuId,
-        "aria-expanded": open ? 'true' : undefined,
-        "aria-haspopup": "true",
-        tabIndex: -1,
-        size: "small",
-        onClick: handleClick,
-        sx: sx
-      }, rootProps.slotProps?.baseIconButton, {
-        children: OPERATOR_SYMBOL_MAPPING[item?.operator] ?? '='
-      }))
-    }), /*#__PURE__*/_jsx(rootProps.slots.headerFilterMenu, _extends({
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      id: buttonId,
+      ref: buttonRef,
+      "aria-label": apiRef.current.getLocaleText('filterPanelOperator'),
+      title: apiRef.current.getLocaleText('filterPanelOperator'),
+      "aria-controls": menuId,
+      "aria-expanded": open ? 'true' : undefined,
+      "aria-haspopup": "true",
+      tabIndex: -1,
+      size: "small",
+      onClick: handleClick,
+      sx: sx
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {
+        fontSize: "small"
+      })
+    })), /*#__PURE__*/_jsx(rootProps.slots.headerFilterMenu, _extends({
       field: field,
       open: open,
       item: item,
-      targetRef: headerFilterMenuRef,
+      target: headerFilterMenuRef.current,
       operators: operators,
       labelledBy: buttonId,
       id: menuId
     }, others))]
   });
 }
-process.env.NODE_ENV !== "production" ? GridHeaderFilterAdornment.propTypes = {
+process.env.NODE_ENV !== "production" ? GridHeaderFilterMenuContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
@@ -95,4 +94,4 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterAdornment.propTypes = {
     value: PropTypes.string.isRequired
   })).isRequired
 } : void 0;
-export { GridHeaderFilterAdornment };
+export { GridHeaderFilterMenuContainer };

package/components/headerFiltering/index.d.ts

@@ -1,2 +1,3 @@
-export * from './GridHeaderFilterAdornment';
+export * from './GridHeaderFilterMenuContainer';
 export * from './GridHeaderFilterCell';
+export * from './GridHeaderFilterMenu';

package/components/headerFiltering/index.js

@@ -1,2 +1,3 @@
-export * from './GridHeaderFilterAdornment';
-export * from './GridHeaderFilterCell';
+export * from './GridHeaderFilterMenuContainer';
+export * from './GridHeaderFilterCell';
+export * from './GridHeaderFilterMenu';

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -2,18 +2,29 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["getColumnsToRender", "getRootProps"];
 import * as React from 'react';
-import { unstable_gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, unstable_gridTabIndexColumnHeaderFilterSelector } from '@mui/x-data-grid';
+import { unstable_gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, unstable_gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { styled } from '@mui/system';
 import { useGridColumnHeaders as useGridColumnHeadersCommunity, getTotalHeaderHeight, useGridPrivateApiContext, getGridFilter } from '@mui/x-data-grid/internals';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  return React.useMemo(() => {
+    const slots = {
+      headerFilterRow: ['headerFilterRow']
+    };
+    return composeClasses(slots, getDataGridUtilityClass, classes);
+  }, [classes]);
+};
 const GridHeaderFilterRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'HeaderFilterRow',
   overridesResolver: (props, styles) => styles.headerFilterRow
 })(() => ({
-  display: 'flex',
-  borderTop: '1px solid rgba(224, 224, 224, 1)'
+  display: 'flex'
 }));
 export const useGridColumnHeaders = props => {
   const apiRef = useGridPrivateApiContext();
@@ -36,6 +47,7 @@ export const useGridColumnHeaders = props => {
   });
   const headerFilterMenuRef = React.useRef(null);
   const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
   const disableHeaderFiltering = !rootProps.unstable_headerFilters;
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
@@ -62,10 +74,6 @@ export const useGridColumnHeaders = props => {
       const isFirstColumn = columnIndex === 0;
       const tabIndexField = columnHeaderFilterTabIndexState == null ? void 0 : columnHeaderFilterTabIndexState.field;
       const tabIndex = tabIndexField === colDef.field || isFirstColumn && !props.hasOtherElementInTabSequence ? 0 : -1;
-      let headerFilterComponent;
-      if (colDef.renderHeaderFilter) {
-        headerFilterComponent = colDef.renderHeaderFilter(apiRef.current.getColumnHeaderParams(colDef.field));
-      }
       const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
         field: colDef.field,
         colDef
@@ -82,7 +90,6 @@ export const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         headerFilterMenuRef: headerFilterMenuRef,
-        headerFilterComponent: headerFilterComponent,
         headerClassName: headerClassName,
         filterOperators: filterOperators,
         "data-field": colDef.field,
@@ -92,6 +99,7 @@ export const useGridColumnHeaders = props => {
     return /*#__PURE__*/_jsx(GridHeaderFilterRow, {
       ref: headerFiltersRef,
       ownerState: rootProps,
+      className: classes.headerFilterRow,
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 2,
       children: filters

package/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -10,11 +10,11 @@ export const useGridLazyLoaderPreProcessors = (privateApiRef, props) => {
     lazyLoading
   } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
   const addSkeletonRows = React.useCallback(groupingParams => {
-    const tree = _extends({}, groupingParams.tree);
-    const rootGroup = tree[GRID_ROOT_GROUP_ID];
+    const rootGroup = groupingParams.tree[GRID_ROOT_GROUP_ID];
     if (!lazyLoading || props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
       return groupingParams;
     }
+    const tree = _extends({}, groupingParams.tree);
     const rootGroupChildren = [...rootGroup.children];
     for (let i = 0; i < props.rowCount - rootGroup.children.length; i += 1) {
       const skeletonId = getSkeletonRowId(i);

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -26,12 +26,7 @@ export function addPinnedRow({
     parent: GRID_ROOT_GROUP_ID,
     isAutoGenerated
   };
-  insertNodeInTree({
-    previousTree: null,
-    node,
-    tree,
-    treeDepths
-  });
+  insertNodeInTree(node, tree, treeDepths, null);
   if (!isAutoGenerated) {
     dataRowIdToModelLookup[rowId] = rowModel;
     dataRowIdToIdLookup[rowId] = rowId;

package/index.js

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