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

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

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuSortItem = GridColumnMenuSortItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridSelector = require("../../../../hooks/utils/useGridSelector");
 var _gridSortingSelector = require("../../../../hooks/features/sorting/gridSortingSelector");
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
@@ -44,31 +42,24 @@ function GridColumnMenuSortItem(props) {
     return typeof label === 'function' ? label(colDef) : label;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "asc",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuSortAscendingIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: getLabel('columnMenuSortAsc')
-      })]
-    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+      iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuSortAscendingIcon, {
+        fontSize: "small"
+      }),
+      children: getLabel('columnMenuSortAsc')
+    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "desc",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuSortDescendingIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: getLabel('columnMenuSortDesc')
-      })]
-    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+      iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuSortDescendingIcon, {
+        fontSize: "small"
+      }),
+      children: getLabel('columnMenuSortDesc')
+    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: apiRef.current.getLocaleText('columnMenuUnsort')
-      })]
+      iconStart: "",
+      children: apiRef.current.getLocaleText('columnMenuUnsort')
     }) : null]
   });
 }

package/node/components/panel/GridColumnsPanel.js

@@ -10,13 +10,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _GridPanelWrapper = require("./GridPanelWrapper");
-var _columnsManagement = require("../columnsManagement");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridColumnsPanel(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, props, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsManagement.GridColumnsManagement, (0, _extends2.default)({}, rootProps.slotProps?.columnsManagement))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnsManagement, (0, _extends2.default)({}, rootProps.slotProps?.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {

package/node/components/panel/GridPanel.js

@@ -16,6 +16,7 @@ var _utils = require("@mui/utils");
 var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -44,7 +45,7 @@ const GridPaperRoot = (0, _styles.styled)(_Paper.default, {
   maxWidth: `calc(100vw - ${theme.spacing(0.5)})`,
   overflow: 'auto'
 }));
-const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) => {
   const {
       children,
       className
@@ -90,15 +91,16 @@ const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref)
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelRoot, (0, _extends2.default)({
-    ref: ref,
     placement: "bottom-start",
     className: (0, _clsx.default)(classes.panel, className),
     ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers
   }, other, {
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
-      mouseEvent: "onMouseUp",
+      mouseEvent: "onPointerUp",
+      touchEvent: false,
       onClickAway: handleClickAway,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaperRoot, {
         className: classes.paper,

package/node/components/panel/GridPanelContent.js

@@ -30,13 +30,17 @@ const GridPanelContentRoot = (0, _system.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/node/components/panel/GridPanelFooter.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -26,16 +26,17 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridPanelFooterRoot = (0, _system.styled)('div', {
+const GridPanelFooterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelFooter',
   overridesResolver: (props, styles) => styles.panelFooter
 })(({
   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/node/components/panel/GridPanelWrapper.js

@@ -14,6 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -40,7 +41,7 @@ const GridPanelWrapperRoot = (0, _styles.styled)('div', {
   }
 });
 const isEnabled = () => true;
-const GridPanelWrapper = exports.GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
+const GridPanelWrapper = exports.GridPanelWrapper = (0, _forwardRef.forwardRef)(function GridPanelWrapper(props, ref) {
   const {
       className,
       slotProps = {}
@@ -54,11 +55,12 @@ const GridPanelWrapper = exports.GridPanelWrapper = /*#__PURE__*/React.forwardRe
     isEnabled: isEnabled
   }, slotProps.TrapFocus, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
-      ref: ref,
       tabIndex: -1,
       className: (0, _clsx.default)(classes.root, className),
       ownerState: rootProps
-    }, other))
+    }, other, {
+      ref: ref
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {

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

@@ -14,6 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
 var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
 var _useGridSelector = require("../../../hooks/utils/useGridSelector");
@@ -47,27 +48,22 @@ const GridFilterFormRoot = (0, _styles.styled)('div', {
   theme
 }) => ({
   display: 'flex',
-  padding: theme.spacing(1)
+  gap: theme.spacing(1.5)
 }));
 const FilterFormDeleteIcon = (0, _styles.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 = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
 })({
-  minWidth: 55,
-  marginRight: 5,
+  minWidth: 75,
   justifyContent: 'end'
 });
 const FilterFormColumnInput = (0, _styles.styled)('div', {
@@ -103,7 +99,7 @@ const getLogicOperatorLocaleKey = logicOperator => {
 };
 const getColumnLabel = col => col.headerName || col.field;
 const collator = new Intl.Collator();
-const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
+const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(function GridFilterForm(props, ref) {
   const {
       item,
       hasMultipleFilters,
@@ -263,13 +259,12 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
     }
   }), [currentOperator]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, (0, _extends2.default)({
-    ref: ref,
     className: classes.root,
     "data-id": item.id,
     ownerState: rootProps
   }, other, {
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
-      variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: (0, _clsx.default)(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
@@ -286,7 +281,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         })
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormLogicOperatorInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
       sx: [hasLogicOperatorColumn ? {
@@ -316,7 +312,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormColumnInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, columnInputProps, {
       className: (0, _clsx.default)(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
@@ -341,7 +338,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         }), getColumnLabel(col)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormOperatorInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, operatorInputProps, {
       className: (0, _clsx.default)(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
@@ -367,7 +365,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, valueInputPropsOther, {
       className: (0, _clsx.default)(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
@@ -377,7 +376,12 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef,
-        disabled: readOnly
+        disabled: readOnly,
+        slotProps: {
+          root: {
+            size: 'small'
+          }
+        }
       }, currentOperator.InputComponentProps, InputComponentProps), item.field) : null
     }))]
   }));

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

@@ -6,44 +6,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputBoolean = GridFilterInputBoolean;
-exports.sanitizeFilterItemValue = void 0;
+exports.sanitizeFilterItemValue = sanitizeFilterItemValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
-const sanitizeFilterItemValue = value => {
-  if (String(value).toLowerCase() === 'true') {
-    return true;
-  }
-  if (String(value).toLowerCase() === 'false') {
-    return false;
-  }
-  return undefined;
-};
-exports.sanitizeFilterItemValue = sanitizeFilterItemValue;
-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", "slotProps"];
 function GridFilterInputBoolean(props) {
   const {
       item,
       applyValue,
       apiRef,
       focusElementRef,
+      headerFilterMenu,
       clearButton,
       tabIndex,
-      label: labelProp,
-      variant = 'standard'
+      slotProps
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
@@ -63,14 +44,15 @@ function GridFilterInputBoolean(props) {
   React.useEffect(() => {
     setFilterValueState(sanitizeFilterItemValue(item.value));
   }, [item.value]);
-  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BooleanOperatorContainer, {
+  const label = slotProps?.root.label ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  const rootSlotProps = slotProps?.root.slotProps;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
       fullWidth: true,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
-        variant: variant,
+        variant: "outlined",
         children: label
       })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
         labelId: labelId,
@@ -78,15 +60,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: (0, _extends2.default)({
           ref: focusElementRef,
           tabIndex
-        }
-      }, others /* FIXME: typing error */, baseSelectProps, {
+        }, rootSlotProps?.htmlInput)
+      }, baseSelectProps, others /* FIXME: typing error */, slotProps?.root, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
           native: isSelectNative,
           value: "",
@@ -101,9 +83,18 @@ function GridFilterInputBoolean(props) {
           children: apiRef.current.getLocaleText('filterValueFalse')
         }))]
       }))]
-    }), clearButton]
+    }), headerFilterMenu, clearButton]
   });
 }
+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 |
@@ -113,8 +104,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
     current: _propTypes.default.object.isRequired
   }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
+  className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
+  disabled: _propTypes.default.bool,
   focusElementRef: _utils.refType,
+  headerFilterMenu: _propTypes.default.node,
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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`)
@@ -125,5 +130,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     operator: _propTypes.default.string.isRequired,
     value: _propTypes.default.any
-  }).isRequired
+  }).isRequired,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  slotProps: _propTypes.default.object,
+  tabIndex: _propTypes.default.number
 } : void 0;

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", "slotProps", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "disabled"];
 function convertFilterItemValueToInputValue(itemValue, inputType) {
   if (itemValue == null) {
     return '';
@@ -42,12 +42,14 @@ function GridFilterInputDate(props) {
       type,
       apiRef,
       focusElementRef,
-      InputProps,
+      slotProps,
+      headerFilterMenu,
       clearButton,
       tabIndex,
       disabled
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootSlotProps = slotProps?.root.slotProps;
   const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(() => convertFilterItemValueToInputValue(item.value, type));
   const [applying, setIsApplying] = React.useState(false);
@@ -70,33 +72,31 @@ 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,
+      type: type || 'text',
+      disabled: disabled,
+      inputRef: focusElementRef,
+      slotProps: (0, _extends2.default)({}, rootSlotProps, {
+        input: (0, _extends2.default)({
+          endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+            fontSize: "small",
+            color: "action"
+          }) : null
+        }, rootSlotProps?.input),
+        htmlInput: (0, _extends2.default)({
+          max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+          tabIndex
+        }, rootSlotProps?.htmlInput)
+      })
+    }, rootProps.slotProps?.baseTextField, other, slotProps?.root)), headerFilterMenu, clearButton]
+  });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -107,8 +107,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
     current: _propTypes.default.object.isRequired
   }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
+  className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
+  disabled: _propTypes.default.bool,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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`)
@@ -119,5 +133,10 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     operator: _propTypes.default.string.isRequired,
     value: _propTypes.default.any
-  }).isRequired
+  }).isRequired,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  slotProps: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  type: _propTypes.default.oneOf(['date', 'datetime-local'])
 } : void 0;