@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridSelector } from "../../../../hooks/utils/useGridSelector.js";
 import { gridSortModelSelector } from "../../../../hooks/features/sorting/gridSortingSelector.js";
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
@@ -36,31 +34,24 @@ function GridColumnMenuSortItem(props) {
     return typeof label === 'function' ? label(colDef) : label;
   };
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "asc",
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortAscendingIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: getLabel('columnMenuSortAsc')
-      })]
-    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortAscendingIcon, {
+        fontSize: "small"
+      }),
+      children: getLabel('columnMenuSortAsc')
+    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "desc",
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortDescendingIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: getLabel('columnMenuSortDesc')
-      })]
-    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortDescendingIcon, {
+        fontSize: "small"
+      }),
+      children: getLabel('columnMenuSortDesc')
+    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {}), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('columnMenuUnsort')
-      })]
+      iconStart: "",
+      children: apiRef.current.getLocaleText('columnMenuUnsort')
     }) : null]
   });
 }

package/components/panel/GridColumnsPanel.js

@@ -2,13 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridPanelWrapper } from "./GridPanelWrapper.js";
-import { GridColumnsManagement } from "../columnsManagement/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnsPanel(props) {
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsx(GridPanelWrapper, _extends({}, props, {
-    children: /*#__PURE__*/_jsx(GridColumnsManagement, _extends({}, rootProps.slotProps?.columnsManagement))
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnsManagement, _extends({}, rootProps.slotProps?.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {

package/components/panel/GridPanel.d.ts

@@ -16,8 +16,8 @@ export interface GridPanelProps extends Partial<React.ComponentProps<typeof Grid
     open: boolean;
 }
 export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
-declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").PopperProps & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "component" | "sx" | "components" | "componentsProps" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").PopperProps & React.RefAttributes<HTMLDivElement>, "id" | "children" | "tabIndex" | "color" | "content" | "translate" | "container" | "transition" | "slot" | "style" | "title" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "slotProps" | "component" | "components" | "componentsProps" | "open" | "placement" | "slots" | "anchorEl" | "disablePortal" | "keepMounted" | "modifiers" | "popperOptions" | "popperRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     ownerState: OwnerState;
 }, {}, {}>;
-declare const GridPanel: React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const GridPanel: React.ForwardRefExoticComponent<GridPanelProps> | React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { GridPanel };

package/components/panel/GridPanel.js

@@ -9,6 +9,7 @@ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,7 +37,7 @@ const GridPaperRoot = styled(Paper, {
   maxWidth: `calc(100vw - ${theme.spacing(0.5)})`,
   overflow: 'auto'
 }));
-const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridPanel = forwardRef((props, ref) => {
   const {
       children,
       className
@@ -82,15 +83,16 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     return null;
   }
   return /*#__PURE__*/_jsx(GridPanelRoot, _extends({
-    ref: ref,
     placement: "bottom-start",
     className: clsx(classes.panel, className),
     ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers
   }, other, {
+    ref: ref,
     children: /*#__PURE__*/_jsx(ClickAwayListener, {
-      mouseEvent: "onMouseUp",
+      mouseEvent: "onPointerUp",
+      touchEvent: false,
       onClickAway: handleClickAway,
       children: /*#__PURE__*/_jsx(GridPaperRoot, {
         className: classes.paper,

package/components/panel/GridPanelContent.js

@@ -22,13 +22,17 @@ const GridPanelContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PanelContent',
   overridesResolver: (props, styles) => styles.panelContent
-})({
+})(({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
-  maxHeight: 400
-});
+  maxHeight: 400,
+  padding: theme.spacing(2.5, 1.5, 2, 1),
+  gap: theme.spacing(2.5)
+}));
 function GridPanelContent(props) {
   const {
       className

package/components/panel/GridPanelFooter.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/system';
+import { SxProps, Theme } from '@mui/material/styles';
 declare function GridPanelFooter(props: React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 }): React.JSX.Element;

package/components/panel/GridPanelFooter.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -25,9 +25,10 @@ const GridPanelFooterRoot = styled('div', {
 })(({
   theme
 }) => ({
-  padding: theme.spacing(0.5),
+  padding: theme.spacing(1),
   display: 'flex',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  borderTop: `1px solid ${theme.palette.divider}`
 }));
 function GridPanelFooter(props) {
   const {

package/components/panel/GridPanelWrapper.d.ts

@@ -7,5 +7,5 @@ export interface GridPanelWrapperProps extends React.PropsWithChildren<React.HTM
         TrapFocus?: TrapFocusProps;
     };
 }
-declare const GridPanelWrapper: React.ForwardRefExoticComponent<GridPanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridPanelWrapper: React.ForwardRefExoticComponent<GridPanelWrapperProps> | React.ForwardRefExoticComponent<GridPanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
 export { GridPanelWrapper };

package/components/panel/GridPanelWrapper.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import FocusTrap from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -32,7 +33,7 @@ const GridPanelWrapperRoot = styled('div', {
   }
 });
 const isEnabled = () => true;
-const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
+const GridPanelWrapper = forwardRef(function GridPanelWrapper(props, ref) {
   const {
       className,
       slotProps = {}
@@ -46,11 +47,12 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     isEnabled: isEnabled
   }, slotProps.TrapFocus, {
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
-      ref: ref,
       tabIndex: -1,
       className: clsx(classes.root, className),
       ownerState: rootProps
-    }, other))
+    }, other, {
+      ref: ref
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {

package/components/panel/filterPanel/GridFilterForm.d.ts

@@ -96,7 +96,7 @@ export interface GridFilterFormProps {
      */
     children?: React.ReactNode;
 }
-declare const GridFilterForm: React.ForwardRefExoticComponent<GridFilterFormProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridFilterForm: React.ForwardRefExoticComponent<GridFilterFormProps> | React.ForwardRefExoticComponent<GridFilterFormProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Demos:
  * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)

package/components/panel/filterPanel/GridFilterForm.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.js";
 import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.js";
 import { useGridSelector } from "../../../hooks/utils/useGridSelector.js";
@@ -39,27 +40,22 @@ const GridFilterFormRoot = styled('div', {
   theme
 }) => ({
   display: 'flex',
-  padding: theme.spacing(1)
+  gap: theme.spacing(1.5)
 }));
 const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
-})(({
-  theme
-}) => ({
+})({
   flexShrink: 0,
-  justifyContent: 'flex-end',
-  marginRight: theme.spacing(0.5),
-  marginBottom: theme.spacing(0.2)
-}));
+  justifyContent: 'center'
+});
 const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
 })({
-  minWidth: 55,
-  marginRight: 5,
+  minWidth: 75,
   justifyContent: 'end'
 });
 const FilterFormColumnInput = styled('div', {
@@ -95,7 +91,7 @@ const getLogicOperatorLocaleKey = logicOperator => {
 };
 const getColumnLabel = col => col.headerName || col.field;
 const collator = new Intl.Collator();
-const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
+const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
   const {
       item,
       hasMultipleFilters,
@@ -255,13 +251,12 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     }
   }), [currentOperator]);
   return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
-    ref: ref,
     className: classes.root,
     "data-id": item.id,
     ownerState: rootProps
   }, other, {
+    ref: ref,
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
-      variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
@@ -278,7 +273,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         })
       }))
     })), /*#__PURE__*/_jsx(FilterFormLogicOperatorInput, _extends({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
       sx: [hasLogicOperatorColumn ? {
@@ -308,7 +304,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
       }))
     })), /*#__PURE__*/_jsxs(FilterFormColumnInput, _extends({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, columnInputProps, {
       className: clsx(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
@@ -333,7 +330,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         }), getColumnLabel(col)))
       }))]
     })), /*#__PURE__*/_jsxs(FilterFormOperatorInput, _extends({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, operatorInputProps, {
       className: clsx(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
@@ -359,7 +357,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
       }))]
     })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, valueInputPropsOther, {
       className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
@@ -369,7 +368,12 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef,
-        disabled: readOnly
+        disabled: readOnly,
+        slotProps: {
+          root: {
+            size: 'small'
+          }
+        }
       }, currentOperator.InputComponentProps, InputComponentProps), item.field) : null
     }))]
   }));

package/components/panel/filterPanel/GridFilterInputBoolean.d.ts

@@ -1,17 +1,10 @@
 import * as React from 'react';
-import { TextFieldProps } from '@mui/material/TextField';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
-export type GridFilterInputBooleanProps = GridFilterInputValueProps & TextFieldProps & {
-    clearButton?: React.ReactNode | null;
-    /**
-     * It is `true` if the filter either has a value or an operator with no value
-     * required is selected (for example `isEmpty`)
-     */
-    isFilterActive?: boolean;
-};
-export declare const sanitizeFilterItemValue: (value: any) => boolean | undefined;
+import { TextFieldProps } from '../../../models/gridBaseSlots';
+import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent';
+export type GridFilterInputBooleanProps = GridFilterInputValueProps<TextFieldProps>;
 declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): React.JSX.Element;
 declare namespace GridFilterInputBoolean {
     var propTypes: any;
 }
+export declare function sanitizeFilterItemValue(value: any): boolean | undefined;
 export { GridFilterInputBoolean };

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,39 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType, unstable_useId as useId } from '@mui/utils';
-import { styled } from '@mui/material/styles';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const sanitizeFilterItemValue = value => {
-  if (String(value).toLowerCase() === 'true') {
-    return true;
-  }
-  if (String(value).toLowerCase() === 'false') {
-    return false;
-  }
-  return undefined;
-};
-const BooleanOperatorContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px'
-  }
-});
 function GridFilterInputBoolean(props) {
   const {
       item,
       applyValue,
       apiRef,
       focusElementRef,
+      headerFilterMenu,
       clearButton,
       tabIndex,
-      label: labelProp,
-      variant = 'standard'
+      slotProps
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
@@ -53,14 +35,15 @@ function GridFilterInputBoolean(props) {
   React.useEffect(() => {
     setFilterValueState(sanitizeFilterItemValue(item.value));
   }, [item.value]);
-  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/_jsxs(BooleanOperatorContainer, {
+  const label = slotProps?.root.label ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  const rootSlotProps = slotProps?.root.slotProps;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
       fullWidth: true,
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
-        variant: variant,
+        variant: "outlined",
         children: label
       })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
         labelId: labelId,
@@ -68,15 +51,15 @@ function GridFilterInputBoolean(props) {
         label: label,
         value: filterValueState === undefined ? '' : String(filterValueState),
         onChange: onFilterChange,
-        variant: variant,
-        notched: variant === 'outlined' ? true : undefined,
+        variant: "outlined",
+        notched: true,
         native: isSelectNative,
         displayEmpty: true,
-        inputProps: {
+        inputProps: _extends({
           ref: focusElementRef,
           tabIndex
-        }
-      }, others /* FIXME: typing error */, baseSelectProps, {
+        }, rootSlotProps?.htmlInput)
+      }, baseSelectProps, others /* FIXME: typing error */, slotProps?.root, {
         children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isSelectNative,
           value: "",
@@ -91,9 +74,18 @@ function GridFilterInputBoolean(props) {
           children: apiRef.current.getLocaleText('filterValueFalse')
         }))]
       }))]
-    }), clearButton]
+    }), headerFilterMenu, clearButton]
   });
 }
+export function sanitizeFilterItemValue(value) {
+  if (String(value).toLowerCase() === 'true') {
+    return true;
+  }
+  if (String(value).toLowerCase() === 'false') {
+    return false;
+  }
+  return undefined;
+}
 process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -103,8 +95,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  className: PropTypes.string,
   clearButton: PropTypes.node,
+  disabled: PropTypes.bool,
   focusElementRef: refType,
+  headerFilterMenu: PropTypes.node,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: (props, propName) => {
+      if (props[propName] == null) {
+        return null;
+      }
+      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error(`Expected prop '${propName}' to be of type Element`);
+      }
+      return null;
+    }
+  })]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
@@ -115,6 +121,10 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
-  }).isRequired
+  }).isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  slotProps: PropTypes.object,
+  tabIndex: PropTypes.number
 } : void 0;
 export { GridFilterInputBoolean };

package/components/panel/filterPanel/GridFilterInputDate.d.ts

@@ -1,14 +1,8 @@
 import * as React from 'react';
-import { TextFieldProps } from '@mui/material/TextField';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
-export type GridFilterInputDateProps = GridFilterInputValueProps & TextFieldProps & {
+import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent';
+import { TextFieldProps } from '../../../models/gridBaseSlots';
+export type GridFilterInputDateProps = GridFilterInputValueProps<TextFieldProps> & {
     type?: 'date' | 'datetime-local';
-    clearButton?: React.ReactNode | null;
-    /**
-     * It is `true` if the filter either has a value or an operator with no value
-     * required is selected (for example `isEmpty`)
-     */
-    isFilterActive?: boolean;
 };
 declare function GridFilterInputDate(props: GridFilterInputDateProps): React.JSX.Element;
 declare namespace GridFilterInputDate {