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

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

@@ -4,10 +4,11 @@ const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterCha
   _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 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 { vars } from "../../../constants/cssVariables.js";
 import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.js";
 import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.js";
 import { useGridSelector } from "../../../hooks/utils/useGridSelector.js";
@@ -36,19 +37,19 @@ const GridFilterFormRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterForm',
   overridesResolver: (props, styles) => styles.filterForm
-})(({
-  theme
-}) => ({
+})({
   display: 'flex',
-  gap: theme.spacing(1.5)
-}));
+  gap: vars.spacing(1.5)
+});
 const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
 })({
   flexShrink: 0,
-  justifyContent: 'center'
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
 });
 const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
@@ -126,10 +127,8 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
   const filterSelectorRef = React.useRef(null);
   const multiFilterOperator = filterModel.logicOperator ?? GridLogicOperator.And;
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
-  const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? false;
-  const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {};
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const {
       InputComponentProps
@@ -256,10 +255,8 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
     ownerState: rootProps
   }, other, {
     ref: ref,
-    children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, deleteIconProps, {
-      className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
+    children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({}, deleteIconProps, {
+      className: clsx(classes.deleteIcon, deleteIconProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
@@ -273,10 +270,7 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
         })
       }))
     })), /*#__PURE__*/_jsx(FilterFormLogicOperatorInput, _extends({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, logicOperatorInputProps, {
+      as: rootProps.slots.baseSelect,
       sx: [hasLogicOperatorColumn ? {
         display: 'flex'
       } : {
@@ -285,92 +279,79 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
         visibility: 'visible'
       } : {
         visibility: 'hidden'
-      }, baseFormControlProps.sx, logicOperatorInputProps.sx],
-      className: clsx(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
-      ownerState: rootProps,
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-        inputProps: {
-          'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
-        },
-        value: multiFilterOperator ?? '',
-        onChange: changeLogicOperator,
-        disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
-        native: isBaseSelectNative
-      }, rootProps.slotProps?.baseSelect, {
-        children: logicOperators.map(logicOperator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isBaseSelectNative,
-          key: logicOperator.toString(),
-          value: logicOperator.toString()
-        }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
-      }))
-    })), /*#__PURE__*/_jsxs(FilterFormColumnInput, _extends({
-      variant: "outlined",
+      }, logicOperatorInputProps.sx],
+      className: clsx(classes.logicOperatorInput, logicOperatorInputProps.className),
+      ownerState: rootProps
+    }, logicOperatorInputProps, {
       size: "small",
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, columnInputProps, {
-      className: clsx(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
-      ownerState: rootProps,
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
-        htmlFor: columnSelectId,
-        id: columnSelectLabelId,
-        children: apiRef.current.getLocaleText('filterPanelColumns')
-      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-        labelId: columnSelectLabelId,
-        id: columnSelectId,
-        label: apiRef.current.getLocaleText('filterPanelColumns'),
-        value: selectedField ?? '',
-        onChange: changeColumn,
+      slotProps: {
+        htmlInput: {
+          'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
+        }
+      },
+      value: multiFilterOperator ?? '',
+      onChange: changeLogicOperator,
+      disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
+      native: isBaseSelectNative
+    }, rootProps.slotProps?.baseSelect, {
+      children: logicOperators.map(logicOperator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
         native: isBaseSelectNative,
-        disabled: readOnly
-      }, rootProps.slotProps?.baseSelect, {
-        children: sortedFilteredColumns.map(col => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isBaseSelectNative,
-          key: col.field,
-          value: col.field
-        }), getColumnLabel(col)))
-      }))]
-    })), /*#__PURE__*/_jsxs(FilterFormOperatorInput, _extends({
-      variant: "outlined",
+        key: logicOperator.toString(),
+        value: logicOperator.toString()
+      }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
+    })), /*#__PURE__*/_jsx(FilterFormColumnInput, _extends({
+      as: rootProps.slots.baseSelect
+    }, columnInputProps, {
+      className: clsx(classes.columnInput, columnInputProps.className),
+      ownerState: rootProps,
       size: "small",
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, operatorInputProps, {
-      className: clsx(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
+      labelId: columnSelectLabelId,
+      id: columnSelectId,
+      label: apiRef.current.getLocaleText('filterPanelColumns'),
+      value: selectedField ?? '',
+      onChange: changeColumn,
+      native: isBaseSelectNative,
+      disabled: readOnly
+    }, rootProps.slotProps?.baseSelect, {
+      children: sortedFilteredColumns.map(col => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isBaseSelectNative,
+        key: col.field,
+        value: col.field
+      }), getColumnLabel(col)))
+    })), /*#__PURE__*/_jsx(FilterFormOperatorInput, _extends({
+      as: rootProps.slots.baseSelect,
+      size: "small"
+    }, operatorInputProps, {
+      className: clsx(classes.operatorInput, operatorInputProps.className),
       ownerState: rootProps,
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
-        htmlFor: operatorSelectId,
-        id: operatorSelectLabelId,
-        children: apiRef.current.getLocaleText('filterPanelOperator')
-      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-        labelId: operatorSelectLabelId,
-        label: apiRef.current.getLocaleText('filterPanelOperator'),
-        id: operatorSelectId,
-        value: item.operator,
-        onChange: changeOperator,
+      labelId: operatorSelectLabelId,
+      label: apiRef.current.getLocaleText('filterPanelOperator'),
+      id: operatorSelectId,
+      value: item.operator,
+      onChange: changeOperator,
+      native: isBaseSelectNative,
+      inputRef: filterSelectorRef,
+      disabled: readOnly
+    }, rootProps.slotProps?.baseSelect, {
+      children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
         native: isBaseSelectNative,
-        inputRef: filterSelectorRef,
-        disabled: readOnly
-      }, rootProps.slotProps?.baseSelect, {
-        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isBaseSelectNative,
-          key: operator.value,
-          value: operator.value
-        }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
-      }))]
-    })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, valueInputPropsOther, {
-      className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
+        key: operator.value,
+        value: operator.value
+      }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
+    })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({}, valueInputPropsOther, {
+      className: clsx(classes.valueInput, valueInputPropsOther.className),
       ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
-        variant: "outlined",
-        size: "small",
         apiRef: apiRef,
         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.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TextFieldProps } from "../../../models/gridBaseSlots.js";
+import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+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/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "label", "variant", "InputProps", "InputLabelProps", "sx"];
+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';
@@ -15,10 +15,7 @@ function GridFilterInputBoolean(props) {
       headerFilterMenu,
       clearButton,
       tabIndex,
-      label: labelProp,
-      variant = 'outlined',
-      InputProps,
-      sx
+      slotProps
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
@@ -38,46 +35,38 @@ function GridFilterInputBoolean(props) {
   React.useEffect(() => {
     setFilterValueState(sanitizeFilterItemValue(item.value));
   }, [item.value]);
-  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  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, {
+    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
       fullWidth: true,
-      sx: sx,
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
-        id: labelId,
-        shrink: true,
-        variant: variant,
-        children: label
-      })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
-        labelId: labelId,
-        id: selectId,
-        label: label,
-        value: filterValueState === undefined ? '' : String(filterValueState),
-        onChange: onFilterChange,
-        variant: variant,
-        notched: variant === 'outlined' ? true : undefined,
-        native: isSelectNative,
-        displayEmpty: true,
-        inputProps: _extends({
+      labelId: labelId,
+      id: selectId,
+      label: label,
+      value: filterValueState === undefined ? '' : String(filterValueState),
+      onChange: onFilterChange,
+      native: isSelectNative,
+      slotProps: {
+        htmlInput: _extends({
           ref: focusElementRef,
           tabIndex
-        }, InputProps?.inputProps)
-      }, baseSelectProps, others /* FIXME: typing error */, {
-        children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isSelectNative,
-          value: "",
-          children: apiRef.current.getLocaleText('filterValueAny')
-        })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isSelectNative,
-          value: "true",
-          children: apiRef.current.getLocaleText('filterValueTrue')
-        })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isSelectNative,
-          value: "false",
-          children: apiRef.current.getLocaleText('filterValueFalse')
-        }))]
+        }, rootSlotProps?.htmlInput)
+      }
+    }, baseSelectProps, others, slotProps?.root, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "",
+        children: apiRef.current.getLocaleText('filterValueAny')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "true",
+        children: apiRef.current.getLocaleText('filterValueTrue')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "false",
+        children: apiRef.current.getLocaleText('filterValueFalse')
       }))]
-    }), headerFilterMenu, clearButton]
+    })), headerFilterMenu, clearButton]
   });
 }
 export function sanitizeFilterItemValue(value) {
@@ -98,9 +87,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`)
@@ -111,6 +113,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.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+import { TextFieldProps } from "../../../models/gridBaseSlots.js";
+export type GridFilterInputDateProps = GridFilterInputValueProps<TextFieldProps> & {
+  type?: 'date' | 'datetime-local';
+};
+declare function GridFilterInputDate(props: GridFilterInputDateProps): React.JSX.Element;
+declare namespace GridFilterInputDate {
+  var propTypes: any;
+}
+export { GridFilterInputDate };

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

@@ -1,6 +1,6 @@
 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", "headerFilterMenu", "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';
@@ -34,13 +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);
@@ -71,25 +72,22 @@ function GridFilterInputDate(props) {
       placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
       value: filterValueState,
       onChange: onFilterChange,
-      variant: "standard",
       type: type || 'text',
       disabled: disabled,
-      InputLabelProps: {
-        shrink: true
-      },
       inputRef: focusElementRef,
-      InputProps: _extends({
-        endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
-          fontSize: "small",
-          color: "action"
-        }) : null
-      }, InputProps, {
-        inputProps: _extends({
+      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
-        }, InputProps?.inputProps)
+        }, rootSlotProps?.htmlInput)
       })
-    }, rootProps.slotProps?.baseTextField, other)), headerFilterMenu, clearButton]
+    }, rootProps.slotProps?.baseTextField, other, slotProps?.root)), headerFilterMenu, clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
@@ -101,9 +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`)
@@ -114,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 };

package/modern/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
+import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+import type { ValueOptions } from '../../../models/colDef/gridColDef';
+export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
+  type?: 'singleSelect';
+};
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;
+declare namespace GridFilterInputMultipleSingleSelect {
+  var propTypes: any;
+}
+export { GridFilterInputMultipleSingleSelect };

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

@@ -1,35 +1,22 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"],
-  _excluded2 = ["key"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { unstable_useId as useId } from '@mui/utils';
-import { getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const filter = createFilterOptions();
 function GridFilterInputMultipleSingleSelect(props) {
   const {
       item,
       applyValue,
+      type,
       apiRef,
       focusElementRef,
-      color,
-      error,
-      helperText,
-      size,
-      variant = 'outlined'
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const TextFieldProps = {
-    color,
-    error,
-    helperText,
-    size,
-    variant
-  };
   const id = useId();
   const rootProps = useGridRootProps();
   let resolvedColumn = null;
@@ -65,39 +52,24 @@ function GridFilterInputMultipleSingleSelect(props) {
       value: value.map(getOptionValue)
     }));
   }, [applyValue, item, getOptionValue]);
-  return /*#__PURE__*/_jsx(Autocomplete, _extends({
+  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
+  return /*#__PURE__*/_jsx(BaseAutocomplete, _extends({
     multiple: true,
     options: resolvedValueOptions,
     isOptionEqualToValue: isOptionEqualToValue,
-    filterOptions: filter,
     id: id,
     value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
-    renderTags: (value, getTagProps) => value.map((option, index) => {
-      const _getTagProps = getTagProps({
-          index
-        }),
-        {
-          key
-        } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded2);
-      return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
-        variant: "outlined",
-        size: "small",
-        label: getOptionLabel(option)
-      }, tagProps), key);
-    }),
-    renderInput: params => /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
-      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-      InputLabelProps: _extends({}, params.InputLabelProps, {
-        shrink: true
-      }),
-      inputRef: focusElementRef,
-      type: "singleSelect"
-    }, TextFieldProps, rootProps.slotProps?.baseTextField))
-  }, other));
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    slotProps: {
+      textField: {
+        type: type || 'text',
+        inputRef: focusElementRef
+      }
+    }
+  }, other, slotProps?.root));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -108,13 +80,37 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
     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`)
+   */
+  isFilterActive: PropTypes.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
   }).isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  slotProps: PropTypes.object,
+  tabIndex: PropTypes.number,
   type: PropTypes.oneOf(['singleSelect'])
 } : void 0;
 export { GridFilterInputMultipleSingleSelect };

package/modern/components/panel/filterPanel/GridFilterInputMultipleValue.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
+import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+export type GridFilterInputMultipleValueProps = GridFilterInputValueProps<Omit<AutocompleteProps<string, true, false, true>, 'options'>> & {
+  type?: 'text' | 'number' | 'date' | 'datetime-local';
+};
+declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): React.JSX.Element;
+declare namespace GridFilterInputMultipleValue {
+  var propTypes: any;
+}
+export { GridFilterInputMultipleValue };