@mui/x-data-grid 8.0.0-alpha.7 → 8.0.0-alpha.8

package/node/components/cell/GridCell.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPinnedColumnPositionLookup = exports.PinnedPosition = exports.GridCell = void 0;
+exports.gridPinnedColumnPositionLookup = exports.GridCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -22,24 +22,18 @@ var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
-var _cellBorderUtils = require("../../utils/cellBorderUtils");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
+var _constants = require("../../internals/constants");
 var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
+var _utils2 = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
-let PinnedPosition = exports.PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
-  PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
-  PinnedPosition[PinnedPosition["LEFT"] = 1] = "LEFT";
-  PinnedPosition[PinnedPosition["RIGHT"] = 2] = "RIGHT";
-  PinnedPosition[PinnedPosition["VIRTUAL"] = 3] = "VIRTUAL";
-  return PinnedPosition;
-}({});
 const gridPinnedColumnPositionLookup = exports.gridPinnedColumnPositionLookup = {
-  [PinnedPosition.LEFT]: _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT,
-  [PinnedPosition.RIGHT]: _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT,
-  [PinnedPosition.NONE]: undefined,
-  [PinnedPosition.VIRTUAL]: undefined
+  [_constants.PinnedColumnPosition.LEFT]: _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT,
+  [_constants.PinnedColumnPosition.RIGHT]: _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT,
+  [_constants.PinnedColumnPosition.NONE]: undefined,
+  [_constants.PinnedColumnPosition.VIRTUAL]: undefined
 };
 const EMPTY_CELL_PARAMS = {
   id: -1,
@@ -77,7 +71,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
+    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -100,9 +94,8 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
       isNotVisible,
       pinnedOffset,
       pinnedPosition,
-      sectionIndex,
-      sectionLength,
-      gridHasFiller,
+      showRightBorder,
+      showLeftBorder,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -169,9 +162,6 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
   const focusElementRef = React.useRef(null);
   const isSelectionMode = rootProps.cellSelection ?? false;
-  const position = gridPinnedColumnPositionLookup[pinnedPosition];
-  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(position, sectionIndex);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = {
     align,
     showLeftBorder,
@@ -220,18 +210,11 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
         border: 0
       };
     }
-    const cellStyle = (0, _extends2.default)({
+    const cellStyle = (0, _utils2.attachPinnedStyle)((0, _extends2.default)({
       '--width': `${width}px`
-    }, styleProp);
-    const isLeftPinned = pinnedPosition === PinnedPosition.LEFT;
-    const isRightPinned = pinnedPosition === PinnedPosition.RIGHT;
-    if (isLeftPinned || isRightPinned) {
-      let side = isLeftPinned ? 'left' : 'right';
-      if (isRtl) {
-        side = isLeftPinned ? 'right' : 'left';
-      }
-      cellStyle[side] = pinnedOffset;
-    }
+    }, styleProp), isRtl, pinnedPosition, pinnedOffset);
+    const isLeftPinned = pinnedPosition === _constants.PinnedColumnPosition.LEFT;
+    const isRightPinned = pinnedPosition === _constants.PinnedColumnPosition.RIGHT;
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;
       cellStyle.zIndex = 5;
@@ -361,13 +344,12 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: _propTypes.default.bool,
     value: _propTypes.default.any
   }),
-  gridHasFiller: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
-  pinnedOffset: _propTypes.default.number.isRequired,
+  pinnedOffset: _propTypes.default.number,
   pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  sectionIndex: _propTypes.default.number.isRequired,
-  sectionLength: _propTypes.default.number.isRequired,
+  showLeftBorder: _propTypes.default.bool.isRequired,
+  showRightBorder: _propTypes.default.bool.isRequired,
   width: _propTypes.default.number.isRequired
 } : void 0;
 const MemoizedGridCell = exports.GridCell = (0, _fastMemo.fastMemo)(GridCell);

package/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -9,6 +9,7 @@ exports.GridColumnGroupHeader = GridColumnGroupHeader;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gridColumnGroupsSelector");
@@ -16,7 +17,8 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
-var _cellBorderUtils = require("../../utils/cellBorderUtils");
+var _constants = require("../../internals/constants");
+var _utils2 = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -30,7 +32,7 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -50,12 +52,10 @@ function GridColumnGroupHeader(props) {
     tabIndex,
     isLastColumn,
     pinnedPosition,
-    style,
-    indexInSection,
-    sectionLength,
-    gridHasFiller
+    pinnedOffset
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const headerCellRef = React.useRef(null);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const columnGroupsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsLookupSelector);
@@ -80,12 +80,8 @@ function GridColumnGroupHeader(props) {
   if (groupId && render) {
     headerComponent = render(renderParams);
   }
-  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
-    showLeftBorder,
-    showRightBorder,
     headerAlign,
     depth,
     isDragging: false
@@ -118,6 +114,7 @@ function GridColumnGroupHeader(props) {
     onBlur: publish('columnGroupHeaderBlur')
   }), [publish]);
   const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
+  const style = React.useMemo(() => (0, _utils2.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
@@ -19,7 +20,8 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
-var _cellBorderUtils = require("../../utils/cellBorderUtils");
+var _constants = require("../../internals/constants");
+var _utils2 = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -39,7 +41,7 @@ const useUtilityClasses = ownerState => {
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', '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', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
     // TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
     // See https://github.com/mui/mui-x/pull/14559
     isLastUnpinned && 'columnHeader--lastUnpinned', isSiblingFocused && 'columnHeader--siblingFocused'],
@@ -64,14 +66,14 @@ function GridColumnHeaderItem(props) {
     tabIndex,
     disableReorder,
     separatorSide,
-    style,
+    showLeftBorder,
+    showRightBorder,
     pinnedPosition,
-    indexInSection,
-    sectionLength,
-    gridHasFiller
+    pinnedOffset
   } = props;
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const headerCellRef = React.useRef(null);
   const columnMenuId = (0, _utils.unstable_useId)();
   const columnMenuButtonId = (0, _utils.unstable_useId)();
@@ -82,8 +84,6 @@ function GridColumnHeaderItem(props) {
   if (colDef.renderHeader) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
   }
-  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
     showRightBorder,
@@ -179,6 +179,7 @@ function GridColumnHeaderItem(props) {
     colDef
   }) : colDef.headerClassName;
   const label = colDef.headerName ?? colDef.field;
+  const style = React.useMemo(() => (0, _utils2.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,
@@ -217,18 +218,18 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   columnMenuOpen: _propTypes.default.bool.isRequired,
   disableReorder: _propTypes.default.bool,
   filterItemsCounter: _propTypes.default.number,
-  gridHasFiller: _propTypes.default.bool.isRequired,
   hasFocus: _propTypes.default.bool,
   headerHeight: _propTypes.default.number.isRequired,
-  indexInSection: _propTypes.default.number.isRequired,
   isDragging: _propTypes.default.bool.isRequired,
   isLast: _propTypes.default.bool.isRequired,
   isLastUnpinned: _propTypes.default.bool.isRequired,
   isResizing: _propTypes.default.bool.isRequired,
   isSiblingFocused: _propTypes.default.bool.isRequired,
-  pinnedPosition: _propTypes.default.oneOf(['left', 'right']),
-  sectionLength: _propTypes.default.number.isRequired,
+  pinnedOffset: _propTypes.default.number,
+  pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]),
   separatorSide: _propTypes.default.oneOf(['left', 'right']),
+  showLeftBorder: _propTypes.default.bool.isRequired,
+  showRightBorder: _propTypes.default.bool.isRequired,
   sortDirection: _propTypes.default.oneOf(['asc', 'desc']),
   sortIndex: _propTypes.default.number,
   style: _propTypes.default.object,

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -84,7 +84,7 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
   const {
     isIndeterminate,
     isChecked
-  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector);
+  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector, undefined, _useGridSelector.objectShallowCompare);
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }

package/node/components/containers/GridRoot.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridRootStyles = require("./GridRootStyles");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -19,8 +20,10 @@ var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiCont
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
+var _GridHeader = require("../GridHeader");
+var _base = require("../base");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className"];
+const _excluded = ["className", "children"];
 const useUtilityClasses = (ownerState, density) => {
   const {
     autoHeight,
@@ -32,10 +35,11 @@ const useUtilityClasses = (ownerState, density) => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridRoot = exports.GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
+const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
-      className
+      className,
+      children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -53,11 +57,14 @@ const GridRoot = exports.GridRoot = (0, _forwardRef.forwardRef)(function GridRoo
   if (!mountedState) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
-    ref: handleRef
+    ref: handleRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeader.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridBody, {
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridFooterPlaceholder, {})]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
@@ -69,4 +76,5 @@ process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
-} : void 0;
+} : void 0;
+const MemoizedGridRoot = exports.GridRoot = (0, _fastMemo.fastMemo)(GridRoot);

package/node/components/containers/GridRootStyles.js

@@ -338,6 +338,13 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       display: 'flex',
       alignItems: 'center'
     },
+    [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingRight: 5,
+      minHeight: 'min-content',
+      overflow: 'hidden'
+    },
     [`& .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}`]: {
       overflow: 'hidden'
     },

package/node/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -12,28 +12,22 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
-const BooleanOperatorContainer = (0, _styles.styled)('div')({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px'
-  }
-});
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "label", "variant", "InputProps", "InputLabelProps", "sx"];
 function GridFilterInputBoolean(props) {
   const {
       item,
       applyValue,
       apiRef,
       focusElementRef,
+      headerFilterMenu,
       clearButton,
       tabIndex,
       label: labelProp,
-      variant = 'standard'
+      variant = 'outlined',
+      InputProps,
+      sx
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
@@ -54,9 +48,10 @@ function GridFilterInputBoolean(props) {
     setFilterValueState(sanitizeFilterItemValue(item.value));
   }, [item.value]);
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BooleanOperatorContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
       fullWidth: true,
+      sx: sx,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
@@ -72,11 +67,11 @@ function GridFilterInputBoolean(props) {
         notched: variant === 'outlined' ? true : undefined,
         native: isSelectNative,
         displayEmpty: true,
-        inputProps: {
+        inputProps: (0, _extends2.default)({
           ref: focusElementRef,
           tabIndex
-        }
-      }, others /* FIXME: typing error */, baseSelectProps, {
+        }, InputProps?.inputProps)
+      }, baseSelectProps, others /* FIXME: typing error */, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
           native: isSelectNative,
           value: "",
@@ -91,7 +86,7 @@ function GridFilterInputBoolean(props) {
           children: apiRef.current.getLocaleText('filterValueFalse')
         }))]
       }))]
-    }), clearButton]
+    }), headerFilterMenu, clearButton]
   });
 }
 function sanitizeFilterItemValue(value) {
@@ -114,6 +109,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   applyValue: _propTypes.default.func.isRequired,
   clearButton: _propTypes.default.node,
   focusElementRef: _utils.refType,
+  headerFilterMenu: _propTypes.default.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

package/node/components/panel/filterPanel/GridFilterInputDate.js

@@ -14,7 +14,7 @@ var _utils = require("@mui/utils");
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "clearButton", "tabIndex", "disabled"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "disabled"];
 function convertFilterItemValueToInputValue(itemValue, inputType) {
   if (itemValue == null) {
     return '';
@@ -43,6 +43,7 @@ function GridFilterInputDate(props) {
       apiRef,
       focusElementRef,
       InputProps,
+      headerFilterMenu,
       clearButton,
       tabIndex,
       disabled
@@ -70,33 +71,34 @@ function GridFilterInputDate(props) {
     const value = convertFilterItemValueToInputValue(item.value, type);
     setFilterValueState(value);
   }, [item.value, type]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
-    fullWidth: true,
-    id: id,
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    variant: "standard",
-    type: type || 'text',
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef,
-    InputProps: (0, _extends2.default)({}, applying || clearButton ? {
-      endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
-        fontSize: "small",
-        color: "action"
-      }) : clearButton
-    } : {}, {
-      disabled
-    }, InputProps, {
-      inputProps: (0, _extends2.default)({
-        max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
-        tabIndex
-      }, InputProps?.inputProps)
-    })
-  }, other, rootProps.slotProps?.baseTextField));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+      fullWidth: true,
+      id: id,
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      value: filterValueState,
+      onChange: onFilterChange,
+      variant: "standard",
+      type: type || 'text',
+      disabled: disabled,
+      InputLabelProps: {
+        shrink: true
+      },
+      inputRef: focusElementRef,
+      InputProps: (0, _extends2.default)({
+        endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+          fontSize: "small",
+          color: "action"
+        }) : null
+      }, InputProps, {
+        inputProps: (0, _extends2.default)({
+          max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+          tabIndex
+        }, InputProps?.inputProps)
+      })
+    }, rootProps.slotProps?.baseTextField, other)), headerFilterMenu, clearButton]
+  });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -109,6 +111,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   applyValue: _propTypes.default.func.isRequired,
   clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

package/node/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -28,7 +28,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       error,
       helperText,
       size,
-      variant = 'standard'
+      variant = 'outlined'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const TextFieldProps = {

package/node/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -27,7 +27,7 @@ function GridFilterInputMultipleValue(props) {
       error,
       helperText,
       size,
-      variant = 'standard'
+      variant = 'outlined'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const TextFieldProps = {

package/node/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -12,11 +12,10 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "headerFilterMenu", "InputProps", "InputLabelProps", "sx"];
 const renderSingleSelectOptions = ({
   column,
   OptionComponent,
@@ -39,14 +38,6 @@ const renderSingleSelectOptions = ({
     }), label);
   });
 };
-const SingleSelectOperatorContainer = (0, _styles.styled)('div')({
-  display: 'flex',
-  alignItems: 'flex-end',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px'
-  }
-});
 function GridFilterInputSingleSelect(props) {
   const {
       item,
@@ -57,8 +48,11 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
-      variant = 'standard',
-      clearButton
+      variant = 'outlined',
+      clearButton,
+      headerFilterMenu,
+      InputProps,
+      sx
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterValue = item.value ?? '';
@@ -91,9 +85,10 @@ function GridFilterInputSingleSelect(props) {
     return null;
   }
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SingleSelectOperatorContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
       fullWidth: true,
+      sx: sx,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         htmlFor: id,
@@ -108,14 +103,14 @@ function GridFilterInputSingleSelect(props) {
         onChange: onFilterChange,
         variant: variant,
         type: type || 'text',
-        inputProps: {
+        inputProps: (0, _extends2.default)({
           tabIndex,
           ref: focusElementRef,
           placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-        },
+        }, InputProps?.inputProps),
         native: isSelectNative,
         notched: variant === 'outlined' ? true : undefined
-      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
+      }, rootProps.slotProps?.baseSelect, others /* FIXME: typing error */, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,
@@ -125,7 +120,7 @@ function GridFilterInputSingleSelect(props) {
           baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
         })
       }))]
-    }), clearButton]
+    }), headerFilterMenu, clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -139,6 +134,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   applyValue: _propTypes.default.func.isRequired,
   clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)