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

package/legacy/utils/tree/utils.js

@@ -1,8 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
 export var getGroupRowIdFromPath = function getGroupRowIdFromPath(path) {
   var pathStr = path.map(function (groupingCriteria) {
@@ -25,10 +25,7 @@ export var getNodePathInTree = function getNodePathInTree(_ref) {
   path.reverse();
   return path;
 };
-export var addGroupDefaultExpansion = function addGroupDefaultExpansion(_ref2) {
-  var node = _ref2.node,
-    isGroupExpandedByDefault = _ref2.isGroupExpandedByDefault,
-    defaultGroupingExpansionDepth = _ref2.defaultGroupingExpansionDepth;
+export var updateGroupDefaultExpansion = function updateGroupDefaultExpansion(node, defaultGroupingExpansionDepth, isGroupExpandedByDefault) {
   var childrenExpanded;
   if (node.id === GRID_ROOT_GROUP_ID) {
     childrenExpanded = true;
@@ -37,20 +34,15 @@ export var addGroupDefaultExpansion = function addGroupDefaultExpansion(_ref2) {
   } else {
     childrenExpanded = defaultGroupingExpansionDepth === -1 || defaultGroupingExpansionDepth > node.depth;
   }
-  return _extends({}, node, {
-    childrenExpanded: childrenExpanded
-  });
+  node.childrenExpanded = childrenExpanded;
+  return node;
 };
 
 /**
  * Insert a node in the tree
  */
-export var insertNodeInTree = function insertNodeInTree(_ref3) {
+export var insertNodeInTree = function insertNodeInTree(node, tree, treeDepths, previousTree) {
   var _treeDepths$node$dept;
-  var node = _ref3.node,
-    previousTree = _ref3.previousTree,
-    tree = _ref3.tree,
-    treeDepths = _ref3.treeDepths;
   // 1. Insert node in the tree.
   tree[node.id] = node;
 
@@ -59,11 +51,7 @@ export var insertNodeInTree = function insertNodeInTree(_ref3) {
 
   // 3. Register the new node in its parent.
   var parentNode = tree[node.parent];
-  if (node.type === 'footer') {
-    // For footers,
-    // Register the node from its parent `footerId` property.
-    parentNode.footerId = node.id;
-  } else if (node.type === 'group' || node.type === 'leaf') {
+  if (node.type === 'group' || node.type === 'leaf') {
     var _groupingField, _groupingKey, _parentNode$childrenF;
     // For groups and leaves,
     // Register the node from its parents `children` and `childrenFromPath` properties.
@@ -80,16 +68,20 @@ export var insertNodeInTree = function insertNodeInTree(_ref3) {
     } else {
       groupingField[groupingKeyName.toString()] = node.id;
     }
+  } else if (node.type === 'footer') {
+    // For footers,
+    // Register the node from its parent `footerId` property.
+    parentNode.footerId = node.id;
   }
 };
 
 /**
  * Removes a node from the tree
  */
-export var removeNodeFromTree = function removeNodeFromTree(_ref4) {
-  var node = _ref4.node,
-    tree = _ref4.tree,
-    treeDepths = _ref4.treeDepths;
+export var removeNodeFromTree = function removeNodeFromTree(_ref2) {
+  var node = _ref2.node,
+    tree = _ref2.tree,
+    treeDepths = _ref2.treeDepths;
   // 1. Remove node from the tree.
   delete tree[node.id];
 
@@ -117,10 +109,10 @@ export var removeNodeFromTree = function removeNodeFromTree(_ref4) {
     var _groupingField2, _groupingKey2, _parentNode$childrenF3, _parentNode$childrenF4;
     var groupingField = (_groupingField2 = node.groupingField) != null ? _groupingField2 : '__no_field__';
     var groupingKey = (_groupingKey2 = node.groupingKey) != null ? _groupingKey2 : '__no_key__';
-    var _ref5 = (_parentNode$childrenF3 = (_parentNode$childrenF4 = parentNode.childrenFromPath) == null ? void 0 : _parentNode$childrenF4[groupingField]) != null ? _parentNode$childrenF3 : {},
+    var _ref3 = (_parentNode$childrenF3 = (_parentNode$childrenF4 = parentNode.childrenFromPath) == null ? void 0 : _parentNode$childrenF4[groupingField]) != null ? _parentNode$childrenF3 : {},
       _groupingKey$toString = groupingKey.toString(),
-      childrenToRemove = _ref5[_groupingKey$toString],
-      newChildrenFromPathWithField = _objectWithoutProperties(_ref5, [_groupingKey$toString].map(_toPropertyKey));
+      childrenToRemove = _ref3[_groupingKey$toString],
+      newChildrenFromPathWithField = _objectWithoutProperties(_ref3, [_groupingKey$toString].map(_toPropertyKey));
 
     // TODO rows v6: Can we avoid this linear complexity ?
     var children = parentNode.children.filter(function (childId) {
@@ -142,12 +134,12 @@ export var removeNodeFromTree = function removeNodeFromTree(_ref4) {
 /**
  * Updates the `id` and `isAutoGenerated` properties of a group node.
  */
-export var updateGroupNodeIdAndAutoGenerated = function updateGroupNodeIdAndAutoGenerated(_ref6) {
-  var node = _ref6.node,
-    updatedNode = _ref6.updatedNode,
-    previousTree = _ref6.previousTree,
-    tree = _ref6.tree,
-    treeDepths = _ref6.treeDepths;
+export var updateGroupNodeIdAndAutoGenerated = function updateGroupNodeIdAndAutoGenerated(_ref4) {
+  var node = _ref4.node,
+    updatedNode = _ref4.updatedNode,
+    previousTree = _ref4.previousTree,
+    tree = _ref4.tree,
+    treeDepths = _ref4.treeDepths;
   // 1. Set the new parent for all children from the old group
   node.children.forEach(function (childId) {
     tree[childId] = _extends({}, tree[childId], {
@@ -164,12 +156,7 @@ export var updateGroupNodeIdAndAutoGenerated = function updateGroupNodeIdAndAuto
 
   // 3. Add the new group in the tree
   var groupNode = _extends({}, node, updatedNode);
-  insertNodeInTree({
-    previousTree: previousTree,
-    node: groupNode,
-    tree: tree,
-    treeDepths: treeDepths
-  });
+  insertNodeInTree(groupNode, tree, treeDepths, previousTree);
 };
 export var createUpdatedGroupsManager = function createUpdatedGroupsManager() {
   return {
@@ -182,9 +169,9 @@ export var createUpdatedGroupsManager = function createUpdatedGroupsManager() {
     }
   };
 };
-export var getVisibleRowsLookup = function getVisibleRowsLookup(_ref7) {
-  var tree = _ref7.tree,
-    filteredRowsLookup = _ref7.filteredRowsLookup;
+export var getVisibleRowsLookup = function getVisibleRowsLookup(_ref5) {
+  var tree = _ref5.tree,
+    filteredRowsLookup = _ref5.filteredRowsLookup;
   if (!filteredRowsLookup) {
     return {};
   }

package/material/icons.d.ts

@@ -4,6 +4,3 @@ export declare const GridPushPinRightIcon: import("@mui/material/OverridableComp
 export declare const GridPushPinLeftIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
     muiName: string;
 };
-export declare const GridHighlightOffIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};

package/material/icons.js

@@ -14,7 +14,4 @@ export const GridPushPinLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("g", {
     d: "M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z",
     fillRule: "evenodd"
   })
-}), 'PushPinLeft');
-export const GridHighlightOffIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
-  d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-}), 'HighlightOff');
+}), 'PushPinLeft');

package/material/index.d.ts

@@ -2,6 +2,5 @@
 declare const materialSlots: {
     ColumnMenuPinLeftIcon: import("react").JSXElementConstructor<any>;
     ColumnMenuPinRightIcon: import("react").JSXElementConstructor<any>;
-    HeaderFilterClearIcon: import("react").JSXElementConstructor<any>;
 };
 export default materialSlots;

package/material/index.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridPushPinRightIcon, GridPushPinLeftIcon, GridHighlightOffIcon } from './icons';
+import { GridPushPinRightIcon, GridPushPinLeftIcon } from './icons';
 const iconSlots = {
   ColumnMenuPinRightIcon: GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: GridPushPinLeftIcon,
-  HeaderFilterClearIcon: GridHighlightOffIcon
+  ColumnMenuPinLeftIcon: GridPushPinLeftIcon
 };
 const materialSlots = _extends({}, iconSlots);
 export default materialSlots;

package/models/gridProIconSlotsComponent.d.ts

@@ -10,9 +10,4 @@ export interface GridProIconSlotsComponent {
      * @default GridPushPinRightIcon
      */
     ColumnMenuPinRightIcon: React.JSXElementConstructor<any>;
-    /**
-     * Component responsible for clear icon in header filter
-     * @default GridHighlightOffIcon
-     */
-    HeaderFilterClearIcon: React.JSXElementConstructor<any>;
 }

package/modern/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,12 +23,16 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const dateSx = {
+  [`& input[value=""]:not(:focus)`]: {
+    color: 'transparent'
+  }
+};
 const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       colIndex,
       height,
       hasFocus,
-      headerFilterComponent,
       filterOperators,
       width,
       headerClassName,
@@ -60,6 +64,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"]');
@@ -129,7 +137,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
@@ -154,30 +163,35 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == 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?.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?.InputComponentProps, InputComponentProps)) : null]
+      })]
+    }) : null]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
@@ -202,7 +216,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/modern/components/headerFiltering/GridHeaderFilterClearButton.js

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

package/modern/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, {
@@ -46,7 +43,7 @@ function GridHeaderFilterMenu({
       onKeyDown: handleListKeyDown,
       children: operators.map((op, i) => {
         const label = op?.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(op.value)}`);
-        return /*#__PURE__*/_jsxs(MenuItem, {
+        return /*#__PURE__*/_jsx(MenuItem, {
           onClick: () => {
             applyFilterChanges(_extends({}, item, {
               operator: op.value
@@ -55,14 +52,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.js → modern/components/headerFiltering/GridHeaderFilterMenuContainer.js}

@@ -7,16 +7,14 @@ 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) {
-  var _rootProps$slotProps, _OPERATOR_SYMBOL_MAPP;
+function GridHeaderFilterMenuContainer(props) {
   const {
       operators,
       item,
@@ -38,35 +36,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 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
-        children: (_OPERATOR_SYMBOL_MAPP = OPERATOR_SYMBOL_MAPPING[item == null ? void 0 : item.operator]) != null ? _OPERATOR_SYMBOL_MAPP : '='
-      }))
-    }), /*#__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?.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"  |
@@ -96,4 +93,4 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterAdornment.propTypes = {
     value: PropTypes.string.isRequired
   })).isRequired
 } : void 0;
-export { GridHeaderFilterAdornment };
+export { GridHeaderFilterMenuContainer };

package/modern/components/headerFiltering/index.js

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

package/modern/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);
@@ -61,10 +73,6 @@ export const useGridColumnHeaders = props => {
       const isFirstColumn = columnIndex === 0;
       const tabIndexField = 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
@@ -81,7 +89,6 @@ export const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         headerFilterMenuRef: headerFilterMenuRef,
-        headerFilterComponent: headerFilterComponent,
         headerClassName: headerClassName,
         filterOperators: filterOperators,
         "data-field": colDef.field,
@@ -91,6 +98,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/modern/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -9,11 +9,11 @@ export const useGridLazyLoaderPreProcessors = (privateApiRef, props) => {
     lazyLoading
   } = props.experimentalFeatures ?? {};
   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/modern/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -25,12 +25,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/modern/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

package/modern/material/icons.js

@@ -14,7 +14,4 @@ export const GridPushPinLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("g", {
     d: "M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z",
     fillRule: "evenodd"
   })
-}), 'PushPinLeft');
-export const GridHighlightOffIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
-  d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-}), 'HighlightOff');
+}), 'PushPinLeft');

package/modern/material/index.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridPushPinRightIcon, GridPushPinLeftIcon, GridHighlightOffIcon } from './icons';
+import { GridPushPinRightIcon, GridPushPinLeftIcon } from './icons';
 const iconSlots = {
   ColumnMenuPinRightIcon: GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: GridPushPinLeftIcon,
-  HeaderFilterClearIcon: GridHighlightOffIcon
+  ColumnMenuPinLeftIcon: GridPushPinLeftIcon
 };
 const materialSlots = _extends({}, iconSlots);
 export default materialSlots;

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4NTU3MDQwMDAwMA==";
+  const releaseInfo = "MTY4NjI2MTYwMDAwMA==";
   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