@mui/x-data-grid 8.0.0-alpha.0 → 8.0.0-alpha.10

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { GridPreferencePanelsValue } from "../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnMenuManageItem(props) {
   const {
     onClick
@@ -19,15 +17,12 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('columnMenuManageColumns')
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuManageColumns')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuManageItem.propTypes = {

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/components/panel/filterPanel/GridFilterInputDate.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import { useTimeout } from "../../../hooks/utils/useTimeout.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function convertFilterItemValueToInputValue(itemValue, inputType) {
   if (itemValue == null) {
     return '';
@@ -34,12 +34,14 @@ function GridFilterInputDate(props) {
       type,
       apiRef,
       focusElementRef,
-      InputProps,
+      slotProps,
+      headerFilterMenu,
       clearButton,
       tabIndex,
       disabled
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootSlotProps = slotProps?.root.slotProps;
   const filterTimeout = useTimeout();
   const [filterValueState, setFilterValueState] = React.useState(() => convertFilterItemValueToInputValue(item.value, type));
   const [applying, setIsApplying] = React.useState(false);
@@ -62,33 +64,31 @@ function GridFilterInputDate(props) {
     const value = convertFilterItemValueToInputValue(item.value, type);
     setFilterValueState(value);
   }, [item.value, type]);
-  return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
-    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: _extends({}, applying || clearButton ? {
-      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
-        fontSize: "small",
-        color: "action"
-      }) : clearButton
-    } : {}, {
-      disabled
-    }, InputProps, {
-      inputProps: _extends({
-        max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
-        tabIndex
-      }, InputProps?.inputProps)
-    })
-  }, other, rootProps.slotProps?.baseTextField));
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+      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: _extends({}, rootSlotProps, {
+        input: _extends({
+          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+            fontSize: "small",
+            color: "action"
+          }) : null
+        }, rootSlotProps?.input),
+        htmlInput: _extends({
+          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 --------------------------------
@@ -99,8 +99,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  className: PropTypes.string,
   clearButton: PropTypes.node,
+  disabled: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  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`)
@@ -111,6 +125,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.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,
+  type: PropTypes.oneOf(['date', 'datetime-local'])
 } : void 0;
 export { GridFilterInputDate };