@mui/x-data-grid 6.0.0-beta.4 → 6.0.0

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

@@ -10,9 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _styles = require("@mui/material/styles");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
@@ -51,7 +48,7 @@ const GridFilterFormRoot = (0, _styles.styled)('div', {
   display: 'flex',
   padding: theme.spacing(1)
 }));
-const FilterFormDeleteIcon = (0, _styles.styled)(_FormControl.default, {
+const FilterFormDeleteIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
@@ -63,7 +60,7 @@ const FilterFormDeleteIcon = (0, _styles.styled)(_FormControl.default, {
   marginRight: theme.spacing(0.5),
   marginBottom: theme.spacing(0.2)
 }));
-const FilterFormLogicOperatorInput = (0, _styles.styled)(_FormControl.default, {
+const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
@@ -72,21 +69,21 @@ const FilterFormLogicOperatorInput = (0, _styles.styled)(_FormControl.default, {
   marginRight: 5,
   justifyContent: 'end'
 });
-const FilterFormColumnInput = (0, _styles.styled)(_FormControl.default, {
+const FilterFormColumnInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormColumnInput',
   overridesResolver: (_, styles) => styles.filterFormColumnInput
 })({
   width: 150
 });
-const FilterFormOperatorInput = (0, _styles.styled)(_FormControl.default, {
+const FilterFormOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormOperatorInput
 })({
   width: 120
 });
-const FilterFormValueInput = (0, _styles.styled)(_FormControl.default, {
+const FilterFormValueInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormValueInput',
   overridesResolver: (_, styles) => styles.filterFormValueInput
@@ -134,17 +131,15 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const operatorSelectId = (0, _utils.unstable_useId)();
   const operatorSelectLabelId = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
   const filterSelectorRef = React.useRef(null);
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
-  const baseFormControlProps = rootProps.componentsProps?.baseFormControl || {};
-  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? true;
-  const OptionComponent = isBaseSelectNative ? 'option' : _MenuItem.default;
+  const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {};
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const {
       InputComponentProps
     } = valueInputProps,
@@ -235,33 +230,36 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, (0, _extends2.default)({
     ref: ref,
     className: classes.root,
-    "data-id": item.id
+    "data-id": item.id,
+    ownerState: rootProps
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: (0, _clsx.default)(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
+      ownerState: rootProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
         size: "small"
-      }, rootProps.componentsProps?.baseIconButton, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.FilterPanelDeleteIcon, {
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelDeleteIcon, {
           fontSize: "small"
         })
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormLogicOperatorInput, (0, _extends2.default)({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
       sx: (0, _extends2.default)({
         display: hasLogicOperatorColumn ? 'flex' : 'none',
         visibility: showMultiFilterOperators ? 'visible' : 'hidden'
       }, baseFormControlProps.sx || {}, logicOperatorInputProps.sx || {}),
       className: (0, _clsx.default)(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseSelect, (0, _extends2.default)({
+      ownerState: rootProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
         inputProps: {
           'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
         },
@@ -269,44 +267,48 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeLogicOperator,
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
-      }, rootProps.componentsProps?.baseSelect, {
-        children: logicOperators.map(logicOperator => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-          value: logicOperator.toString(),
-          children: apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))
-        }, logicOperator.toString()))
+      }, rootProps.slotProps?.baseSelect, {
+        children: logicOperators.map(logicOperator => /*#__PURE__*/(0, React.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: logicOperator.toString(),
+          value: logicOperator.toString()
+        }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormColumnInput, (0, _extends2.default)({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, columnInputProps, {
       className: (0, _clsx.default)(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      ownerState: rootProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, baseInputLabelProps, {
         htmlFor: columnSelectId,
         id: columnSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelColumns')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseSelect, (0, _extends2.default)({
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
         labelId: columnSelectLabelId,
         id: columnSelectId,
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: item.field || '',
         onChange: changeColumn,
         native: isBaseSelectNative
-      }, rootProps.componentsProps?.baseSelect, {
-        children: sortedFilteredColumns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-          value: col.field,
-          children: getColumnLabel(col)
-        }, col.field))
+      }, rootProps.slotProps?.baseSelect, {
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/(0, React.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: col.field,
+          value: col.field
+        }), getColumnLabel(col)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormOperatorInput, (0, _extends2.default)({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, operatorInputProps, {
       className: (0, _clsx.default)(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      ownerState: rootProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, baseInputLabelProps, {
         htmlFor: operatorSelectId,
         id: operatorSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelOperator')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseSelect, (0, _extends2.default)({
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
         labelId: operatorSelectLabelId,
         label: apiRef.current.getLocaleText('filterPanelOperator'),
         id: operatorSelectId,
@@ -314,17 +316,19 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeOperator,
         native: isBaseSelectNative,
         inputRef: filterSelectorRef
-      }, rootProps.componentsProps?.baseSelect, {
-        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-          value: operator.value,
-          children: operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)
-        }, operator.value))
+      }, rootProps.slotProps?.baseSelect, {
+        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/(0, React.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: operator.value,
+          value: operator.value
+        }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, valueInputPropsOther, {
       className: (0, _clsx.default)(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
+      ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(currentOperator.InputComponent, (0, _extends2.default)({
         apiRef: apiRef,
         item: item,

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

@@ -8,7 +8,6 @@ exports.GridFilterInputBoolean = GridFilterInputBoolean;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
@@ -24,9 +23,9 @@ function GridFilterInputBoolean(props) {
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
-  const OptionComponent = isSelectNative ? 'option' : _MenuItem.default;
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -37,7 +36,8 @@ function GridFilterInputBoolean(props) {
   React.useEffect(() => {
     setFilterValueState(item.value || '');
   }, [item.value]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.components.BaseTextField, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseTextField, (0, _extends2.default)({
+    // TODO: use baseSelect slot
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     value: filterValueState,
     onChange: onFilterChange,
@@ -46,21 +46,24 @@ function GridFilterInputBoolean(props) {
     SelectProps: (0, _extends2.default)({
       native: isSelectNative,
       displayEmpty: true
-    }, rootProps.componentsProps?.baseSelect),
+    }, rootProps.slotProps?.baseSelect),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
-  }, others, rootProps.componentsProps?.baseTextField, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+  }, others, rootProps.slotProps?.baseTextField, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
-    })]
+    }))]
   }));
 }

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

@@ -11,7 +11,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _icons = require("../../icons");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps"];
@@ -55,7 +54,7 @@ function GridFilterInputDate(props) {
     const itemValue = item.value ?? '';
     setFilterValueState(String(itemValue));
   }, [item.value]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
@@ -68,13 +67,13 @@ function GridFilterInputDate(props) {
     },
     inputRef: focusElementRef,
     InputProps: (0, _extends2.default)({}, applying ? {
-      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridLoadIcon, {})
+      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {})
     } : {}, InputProps, {
       inputProps: (0, _extends2.default)({
         max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31'
       }, InputProps?.inputProps)
     })
-  }, other, rootProps.componentsProps?.baseTextField));
+  }, other, rootProps.slotProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   // ----------------------------- Warning --------------------------------

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

@@ -15,10 +15,9 @@ var _utils = require("@mui/utils");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant", "getOptionLabel"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant", "getOptionLabel", "getOptionValue"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const isOptionEqualToValue = (option, value) => (0, _filterPanelUtils.getValueFromOption)(option) === (0, _filterPanelUtils.getValueFromOption)(value);
 const filter = (0, _Autocomplete.createFilterOptions)();
 function GridFilterInputMultipleSingleSelect(props) {
   const {
@@ -31,7 +30,8 @@ function GridFilterInputMultipleSingleSelect(props) {
       helperText,
       size,
       variant = 'standard',
-      getOptionLabel = _filterPanelUtils.getLabelFromValueOption
+      getOptionLabel: getOptionLabelProp,
+      getOptionValue: getOptionValueProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const TextFieldProps = {
@@ -50,6 +50,9 @@ function GridFilterInputMultipleSingleSelect(props) {
       resolvedColumn = column;
     }
   }
+  const getOptionValue = getOptionValueProp || resolvedColumn?.getOptionValue;
+  const getOptionLabel = getOptionLabelProp || resolvedColumn?.getOptionLabel;
+  const isOptionEqualToValue = React.useCallback((option, value) => getOptionValue(option) === getOptionValue(value), [getOptionValue]);
   const resolvedValueOptions = React.useMemo(() => {
     if (!resolvedColumn?.valueOptions) {
       return [];
@@ -62,8 +65,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     return resolvedColumn.valueOptions;
   }, [resolvedColumn]);
   const resolvedFormattedValueOptions = React.useMemo(() => {
-    return resolvedValueOptions?.map(_filterPanelUtils.getValueFromOption);
-  }, [resolvedValueOptions]);
+    return resolvedValueOptions?.map(getOptionValue);
+  }, [resolvedValueOptions, getOptionValue]);
 
   // The value is computed from the item.value and used directly
   // If it was done by a useEffect/useState, the Autocomplete could receive incoherent value and options
@@ -73,10 +76,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     }
     if (resolvedValueOptions !== undefined) {
       const itemValueIndexes = item.value.map(element => {
-        // get the index matching between values and valueOptions
-        const formattedElement = (0, _filterPanelUtils.getValueFromOption)(element);
-        const index = resolvedFormattedValueOptions?.findIndex(formatedOption => formatedOption === formattedElement) || 0;
-        return index;
+        // Gets the index matching between values and valueOptions
+        return resolvedFormattedValueOptions?.findIndex(formatedOption => formatedOption === element);
       });
       return itemValueIndexes.filter(index => index >= 0).map(index => resolvedValueOptions[index]);
     }
@@ -86,15 +87,15 @@ function GridFilterInputMultipleSingleSelect(props) {
     if (!Array.isArray(item.value) || filteredValues.length !== item.value.length) {
       // Updates the state if the filter value has been cleaned by the component
       applyValue((0, _extends2.default)({}, item, {
-        value: filteredValues.map(_filterPanelUtils.getValueFromOption)
+        value: filteredValues.map(getOptionValue)
       }));
     }
-  }, [item, filteredValues, applyValue]);
+  }, [item, filteredValues, applyValue, getOptionValue]);
   const handleChange = React.useCallback((event, value) => {
     applyValue((0, _extends2.default)({}, item, {
-      value: [...value.map(_filterPanelUtils.getValueFromOption)]
+      value: value.map(getOptionValue)
     }));
-  }, [applyValue, item]);
+  }, [applyValue, item, getOptionValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     multiple: true,
     options: resolvedValueOptions,
@@ -111,7 +112,7 @@ function GridFilterInputMultipleSingleSelect(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({}, params, {
+    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, params, {
       label: apiRef.current.getLocaleText('filterPanelInputLabel'),
       placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
       InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
@@ -119,7 +120,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       }),
       inputRef: focusElementRef,
       type: "singleSelect"
-    }, TextFieldProps, rootProps.componentsProps?.baseTextField))
+    }, TextFieldProps, rootProps.slotProps?.baseTextField))
   }, other));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.propTypes = {
@@ -133,11 +134,17 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
-   * Used to determine the text displayed for a given value option.
+   * Used to determine the label displayed for a given value option.
    * @param {ValueOptions} value The current value option.
    * @returns {string} The text to be displayed.
    */
   getOptionLabel: _propTypes.default.func,
+  /**
+   * Used to determine the value used for a value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The value to be used.
+   */
+  getOptionValue: _propTypes.default.func,
   item: _propTypes.default.shape({
     field: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

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

@@ -71,7 +71,7 @@ function GridFilterInputMultipleValue(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({}, params, {
+    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, params, {
       label: apiRef.current.getLocaleText('filterPanelInputLabel'),
       placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
       InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
@@ -79,7 +79,7 @@ function GridFilterInputMultipleValue(props) {
       }),
       inputRef: focusElementRef,
       type: type || 'text'
-    }, TextFieldProps, rootProps.componentsProps?.baseTextField))
+    }, TextFieldProps, rootProps.slotProps?.baseTextField))
   }, other));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes = {

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

@@ -5,33 +5,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputSingleSelect = GridFilterInputSingleSelect;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const renderSingleSelectOptions = ({
-  valueOptions,
-  field
-}, OptionComponent, getOptionLabel) => {
+  column: {
+    valueOptions,
+    field
+  },
+  OptionComponent,
+  getOptionLabel,
+  getOptionValue,
+  isSelectNative,
+  baseSelectOptionProps
+}) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
   return iterableColumnValues.map(option => {
-    const isOptionTypeObject = typeof option === 'object';
-    const value = isOptionTypeObject ? option.value : option;
+    const value = getOptionValue(option);
     const label = getOptionLabel(option);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-      value: value,
-      children: label
-    }, value);
+    return /*#__PURE__*/(0, React.createElement)(OptionComponent, (0, _extends2.default)({}, baseSelectOptionProps, {
+      native: isSelectNative,
+      key: value,
+      value: value
+    }), label);
   });
 };
 function GridFilterInputSingleSelect(props) {
@@ -41,14 +47,16 @@ function GridFilterInputSingleSelect(props) {
       type,
       apiRef,
       focusElementRef,
-      getOptionLabel = _filterPanelUtils.getLabelFromValueOption
+      getOptionLabel: getOptionLabelProp,
+      getOptionValue: getOptionValueProp
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);
@@ -56,6 +64,8 @@ function GridFilterInputSingleSelect(props) {
       resolvedColumn = column;
     }
   }
+  const getOptionValue = getOptionValueProp || resolvedColumn?.getOptionValue;
+  const getOptionLabel = getOptionLabelProp || resolvedColumn?.getOptionLabel;
   const currentValueOptions = React.useMemo(() => {
     if (!resolvedColumn) {
       return undefined;
@@ -68,17 +78,17 @@ function GridFilterInputSingleSelect(props) {
     let value = event.target.value;
 
     // NativeSelect casts the value to a string.
-    value = (0, _filterPanelUtils.getValueFromValueOptions)(value, currentValueOptions);
+    value = (0, _filterPanelUtils.getValueFromValueOptions)(value, currentValueOptions, getOptionValue);
     setFilterValueState(String(value));
     applyValue((0, _extends2.default)({}, item, {
       value
     }));
-  }, [applyValue, item, currentValueOptions]);
+  }, [currentValueOptions, getOptionValue, applyValue, item]);
   React.useEffect(() => {
     let itemValue;
     if (currentValueOptions !== undefined) {
       // sanitize if valueOptions are provided
-      itemValue = (0, _filterPanelUtils.getValueFromValueOptions)(item.value, currentValueOptions);
+      itemValue = (0, _filterPanelUtils.getValueFromValueOptions)(item.value, currentValueOptions, getOptionValue);
       if (itemValue !== item.value) {
         applyValue((0, _extends2.default)({}, item, {
           value: itemValue
@@ -90,11 +100,15 @@ function GridFilterInputSingleSelect(props) {
     }
     itemValue = itemValue ?? '';
     setFilterValueState(String(itemValue));
-  }, [item, currentValueOptions, applyValue]);
+  }, [item, currentValueOptions, applyValue, getOptionValue]);
   if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({
+  if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+    // TODO: use baseSelect slot
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
@@ -109,9 +123,16 @@ function GridFilterInputSingleSelect(props) {
     select: true,
     SelectProps: (0, _extends2.default)({
       native: isSelectNative
-    }, rootProps.componentsProps?.baseSelect)
-  }, others, rootProps.componentsProps?.baseTextField, {
-    children: renderSingleSelectOptions(resolvedColumn, isSelectNative ? 'option' : _MenuItem.default, getOptionLabel)
+    }, rootProps.slotProps?.baseSelect)
+  }, others, rootProps.slotProps?.baseTextField, {
+    children: renderSingleSelectOptions({
+      column: resolvedColumn,
+      OptionComponent: rootProps.slots.baseSelectOption,
+      getOptionLabel,
+      getOptionValue,
+      isSelectNative,
+      baseSelectOptionProps
+    })
   }));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -125,11 +146,17 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
-   * Used to determine the text displayed for a given value option.
+   * Used to determine the label displayed for a given value option.
    * @param {ValueOptions} value The current value option.
    * @returns {string} The text to be displayed.
    */
   getOptionLabel: _propTypes.default.func,
+  /**
+   * Used to determine the value used for a value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The value to be used.
+   */
+  getOptionValue: _propTypes.default.func,
   item: _propTypes.default.shape({
     field: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

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

@@ -11,7 +11,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _icons = require("../../icons");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
@@ -57,9 +56,9 @@ function GridFilterInputValue(props) {
     setFilterValueState(String(itemValue));
   }, [item.value]);
   const InputProps = applying ? {
-    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridLoadIcon, {})
+    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {})
   } : others.InputProps;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
@@ -72,7 +71,7 @@ function GridFilterInputValue(props) {
       shrink: true
     },
     inputRef: focusElementRef
-  }, others, rootProps.componentsProps?.baseTextField));
+  }, others, rootProps.slotProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // ----------------------------- Warning --------------------------------