@mui/x-data-grid 7.0.0-alpha.5 → 7.0.0-alpha.6

package/modern/colDef/gridDateOperators.js

@@ -1,12 +1,15 @@
 import { GridFilterInputDate } from '../components/panel/filterPanel/GridFilterInputDate';
-const dateRegex = /(\d+)-(\d+)-(\d+)/;
-const dateTimeRegex = /(\d+)-(\d+)-(\d+)T(\d+):(\d+)/;
 function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
   if (!filterItem.value) {
     return null;
   }
-  const [year, month, day, hour, minute] = filterItem.value.match(showTime ? dateTimeRegex : dateRegex).slice(1).map(Number);
-  const time = new Date(year, month - 1, day, hour || 0, minute || 0).getTime();
+  const date = new Date(filterItem.value);
+  if (showTime) {
+    date.setSeconds(0, 0);
+  } else {
+    date.setHours(0, 0, 0, 0);
+  }
+  const time = date.getTime();
   return value => {
     if (!value) {
       return false;
@@ -17,8 +20,12 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
 
     // Make a copy of the date to not reset the hours in the original object
     const dateCopy = new Date(value);
-    const timeToCompare = dateCopy.setHours(showTime ? value.getHours() : 0, showTime ? value.getMinutes() : 0, 0, 0);
-    return compareFn(timeToCompare, time);
+    if (showTime) {
+      dateCopy.setSeconds(0, 0);
+    } else {
+      dateCopy.setHours(0, 0, 0, 0);
+    }
+    return compareFn(dateCopy.getTime(), time);
   };
 }
 export const getGridDateOperators = showTime => [{

package/modern/colDef/gridSingleSelectColDef.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
 import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
-import { isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
+import { getValueOptions, isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
 import { isObject } from '../utils/utils';
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
@@ -28,16 +28,10 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }
-    let valueOptions;
-    if (typeof colDef.valueOptions === 'function') {
-      valueOptions = colDef.valueOptions({
-        id,
-        row: id ? api.getRow(id) : null,
-        field
-      });
-    } else {
-      valueOptions = colDef.valueOptions;
-    }
+    const valueOptions = getValueOptions(colDef, {
+      id,
+      row: id ? api.getRow(id) : null
+    });
     if (value == null) {
       return '';
     }
@@ -55,10 +49,7 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   // @ts-ignore
   pastedValueParser: (value, params) => {
     const colDef = params.colDef;
-    const colDefValueOptions = colDef.valueOptions;
-    const valueOptions = typeof colDefValueOptions === 'function' ? colDefValueOptions({
-      field: colDef.field
-    }) : colDefValueOptions || [];
+    const valueOptions = getValueOptions(colDef) || [];
     const getOptionValue = colDef.getOptionValue;
     const valueOption = valueOptions.find(option => {
       if (getOptionValue(option) === value) {

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "getOptionLabel", "getOptionValue"],
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen"],
   _excluded2 = ["MenuProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,7 +9,7 @@ import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams'
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
-import { getValueFromValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
+import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,9 +27,7 @@ function GridEditSingleSelectCell(props) {
       hasFocus,
       error,
       onValueChange,
-      initialOpen = rootProps.editMode === GridEditModes.Cell,
-      getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp
+      initialOpen = rootProps.editMode === GridEditModes.Cell
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
@@ -51,21 +49,15 @@ function GridEditSingleSelectCell(props) {
   if (!isSingleSelectColDef(colDef)) {
     return null;
   }
-  let valueOptions;
-  if (typeof colDef?.valueOptions === 'function') {
-    valueOptions = colDef?.valueOptions({
-      id,
-      row,
-      field
-    });
-  } else {
-    valueOptions = colDef?.valueOptions;
-  }
+  const valueOptions = getValueOptions(colDef, {
+    id,
+    row
+  });
   if (!valueOptions) {
     return null;
   }
-  const getOptionValue = getOptionValueProp || colDef.getOptionValue;
-  const getOptionLabel = getOptionLabelProp || colDef.getOptionLabel;
+  const getOptionValue = colDef.getOptionValue;
+  const getOptionLabel = colDef.getOptionLabel;
   const handleChange = async event => {
     if (!isSingleSelectColDef(colDef) || !valueOptions) {
       return;
@@ -154,18 +146,6 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * The cell value formatted with the column valueFormatter.
    */
   formattedValue: PropTypes.any,
-  /**
-   * 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.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.func,
   /**
    * If true, the cell is the active element.
    */

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -4,6 +4,7 @@ const _excluded = ["field", "colDef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { isMultipleRowSelectionEnabled } from '../../hooks/features/rowSelection/utils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { gridRowSelectionStateSelector } from '../../hooks/features/rowSelection/gridRowSelectionSelector';
@@ -102,7 +103,8 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
       'aria-label': label
     },
     tabIndex: tabIndex,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    disabled: !isMultipleRowSelectionEnabled(rootProps)
   }, rootProps.slotProps?.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {

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

@@ -14,6 +14,7 @@ import { GridLogicOperator } from '../../../models/gridFilterItem';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../../constants/gridClasses';
+import { getValueFromValueOptions, getValueOptions } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -130,23 +131,39 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
   const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
-  const isBaseSelectNative = baseSelectProps.native ?? true;
+  const isBaseSelectNative = baseSelectProps.native ?? false;
   const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {};
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const {
       InputComponentProps
     } = valueInputProps,
     valueInputPropsOther = _objectWithoutPropertiesLoose(valueInputProps, _excluded2);
-  const filteredColumns = React.useMemo(() => {
+  const {
+    filteredColumns,
+    selectedField
+  } = React.useMemo(() => {
+    let itemField = item.field;
     if (filterColumns === undefined || typeof filterColumns !== 'function') {
-      return filterableColumns;
+      return {
+        filteredColumns: filterableColumns,
+        selectedField: itemField
+      };
     }
     const filteredFields = filterColumns({
       field: item.field,
       columns: filterableColumns,
       currentFilters: filterModel?.items || []
     });
-    return filterableColumns.filter(column => filteredFields.includes(column.field));
+    return {
+      filteredColumns: filterableColumns.filter(column => {
+        const isFieldIncluded = filteredFields.includes(column.field);
+        if (column.field === item.field && !isFieldIncluded) {
+          itemField = undefined;
+        }
+        return isFieldIncluded;
+      }),
+      selectedField: itemField
+    };
   }, [filterColumns, filterModel?.items, filterableColumns, item.field]);
   const sortedFilteredColumns = React.useMemo(() => {
     switch (columnsSort) {
@@ -177,11 +194,29 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     const newOperator = column.filterOperators.find(operator => operator.value === item.operator) || column.filterOperators[0];
 
     // Erase filter value if the input component or filtered column type is modified
-    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== currentOperator?.InputComponent || column.type !== currentColumn.type;
+    const eraseFilterValue = !newOperator.InputComponent || newOperator.InputComponent !== currentOperator?.InputComponent || column.type !== currentColumn.type;
+    let filterValue = eraseFilterValue ? undefined : item.value;
+
+    // Check filter value against the new valueOptions
+    if (column.type === 'singleSelect' && filterValue !== undefined) {
+      const colDef = column;
+      const valueOptions = getValueOptions(colDef);
+      if (Array.isArray(filterValue)) {
+        filterValue = filterValue.filter(val => {
+          return (
+            // Only keep values that are in the new value options
+            getValueFromValueOptions(val, valueOptions, colDef?.getOptionValue) !== undefined
+          );
+        });
+      } else if (getValueFromValueOptions(item.value, valueOptions, colDef?.getOptionValue) === undefined) {
+        // Reset the filter value if it is not in the new value options
+        filterValue = undefined;
+      }
+    }
     applyFilterChanges(_extends({}, item, {
       field,
       operator: newOperator.value,
-      value: eraseItemValue ? undefined : item.value
+      value: filterValue
     }));
   }, [apiRef, applyFilterChanges, item, currentColumn, currentOperator]);
   const changeOperator = React.useCallback(event => {
@@ -256,7 +291,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         inputProps: {
           'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
         },
-        value: multiFilterOperator,
+        value: multiFilterOperator ?? '',
         onChange: changeLogicOperator,
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
@@ -281,7 +316,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         labelId: columnSelectLabelId,
         id: columnSelectId,
         label: apiRef.current.getLocaleText('filterPanelColumns'),
-        value: item.field || '',
+        value: selectedField ?? '',
         onChange: changeColumn,
         native: isBaseSelectNative
       }, rootProps.slotProps?.baseSelect, {
@@ -327,7 +362,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef
-      }, currentOperator.InputComponentProps, InputComponentProps)) : null
+      }, currentOperator.InputComponentProps, InputComponentProps), item.field) : null
     }))]
   }));
 });

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

@@ -32,7 +32,7 @@ function GridFilterInputBoolean(props) {
   const labelId = useId();
   const selectId = useId();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
-  const isSelectNative = baseSelectProps.native ?? true;
+  const isSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;

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

@@ -7,6 +7,23 @@ import { unstable_useId as useId } from '@mui/utils';
 import { useTimeout } from '../../../hooks/utils/useTimeout';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
+function convertFilterItemValueToInputValue(itemValue, inputType) {
+  if (itemValue == null) {
+    return '';
+  }
+  const dateCopy = new Date(itemValue);
+  // The date picker expects the date to be in the local timezone.
+  // But .toISOString() converts it to UTC with zero offset.
+  // So we need to subtract the timezone offset.
+  dateCopy.setMinutes(dateCopy.getMinutes() - dateCopy.getTimezoneOffset());
+  if (inputType === 'date') {
+    return dateCopy.toISOString().substring(0, 10);
+  }
+  if (inputType === 'datetime-local') {
+    return dateCopy.toISOString().substring(0, 19);
+  }
+  return dateCopy.toISOString().substring(0, 10);
+}
 function GridFilterInputDate(props) {
   const {
       item,
@@ -21,25 +38,26 @@ function GridFilterInputDate(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = useTimeout();
-  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const [filterValueState, setFilterValueState] = React.useState(() => convertFilterItemValueToInputValue(item.value, type));
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
   const onFilterChange = React.useCallback(event => {
+    filterTimeout.clear();
     const value = event.target.value;
-    setFilterValueState(String(value));
+    setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       applyValue(_extends({}, item, {
-        value
+        value: new Date(value)
       }));
       setIsApplying(false);
     });
   }, [applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(() => {
-    const itemValue = item.value ?? '';
-    setFilterValueState(String(itemValue));
-  }, [item.value]);
+    const value = convertFilterItemValueToInputValue(item.value, type);
+    setFilterValueState(value);
+  }, [item.value, type]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     fullWidth: true,
     id: id,

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

@@ -1,11 +1,11 @@
 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", "getOptionLabel", "getOptionValue"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 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 { isSingleSelectColDef } from './filterPanelUtils';
+import { getValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const filter = createFilterOptions();
@@ -19,9 +19,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       error,
       helperText,
       size,
-      variant = 'standard',
-      getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp
+      variant = 'standard'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const TextFieldProps = {
@@ -40,23 +38,12 @@ function GridFilterInputMultipleSingleSelect(props) {
       resolvedColumn = column;
     }
   }
-  const getOptionValue = getOptionValueProp || resolvedColumn?.getOptionValue;
-  const getOptionLabel = getOptionLabelProp || resolvedColumn?.getOptionLabel;
+  const getOptionValue = resolvedColumn?.getOptionValue;
+  const getOptionLabel = resolvedColumn?.getOptionLabel;
   const isOptionEqualToValue = React.useCallback((option, value) => getOptionValue(option) === getOptionValue(value), [getOptionValue]);
   const resolvedValueOptions = React.useMemo(() => {
-    if (!resolvedColumn?.valueOptions) {
-      return [];
-    }
-    if (typeof resolvedColumn.valueOptions === 'function') {
-      return resolvedColumn.valueOptions({
-        field: resolvedColumn.field
-      });
-    }
-    return resolvedColumn.valueOptions;
+    return getValueOptions(resolvedColumn) || [];
   }, [resolvedColumn]);
-  const resolvedFormattedValueOptions = React.useMemo(() => {
-    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
@@ -64,23 +51,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     if (!Array.isArray(item.value)) {
       return [];
     }
-    if (resolvedValueOptions !== undefined) {
-      const itemValueIndexes = item.value.map(element => {
-        // Gets the index matching between values and valueOptions
-        return resolvedFormattedValueOptions?.findIndex(formattedOption => formattedOption === element);
-      });
-      return itemValueIndexes.filter(index => index >= 0).map(index => resolvedValueOptions[index]);
-    }
     return item.value;
-  }, [item.value, resolvedValueOptions, resolvedFormattedValueOptions]);
-  React.useEffect(() => {
-    if (!Array.isArray(item.value) || filteredValues.length !== item.value.length) {
-      // Updates the state if the filter value has been cleaned by the component
-      applyValue(_extends({}, item, {
-        value: filteredValues.map(getOptionValue)
-      }));
-    }
-  }, [item, filteredValues, applyValue, getOptionValue]);
+  }, [item.value]);
   const handleChange = React.useCallback((event, value) => {
     applyValue(_extends({}, item, {
       value: value.map(getOptionValue)
@@ -123,18 +95,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * 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.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.func,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

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

@@ -1,32 +1,30 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
-import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
+import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const renderSingleSelectOptions = ({
-  column: {
-    valueOptions,
-    field
-  },
+  column,
   OptionComponent,
   getOptionLabel,
   getOptionValue,
   isSelectNative,
   baseSelectOptionProps
 }) => {
-  const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
-    field
-  })] : ['', ...(valueOptions || [])];
+  const iterableColumnValues = ['', ...(getValueOptions(column) || [])];
   return iterableColumnValues.map(option => {
     const value = getOptionValue(option);
-    const label = getOptionLabel(option);
+    let label = getOptionLabel(option);
+    if (label === '') {
+      label = ' '; // To force the height of the empty option
+    }
     return /*#__PURE__*/_createElement(OptionComponent, _extends({}, baseSelectOptionProps, {
       native: isSelectNative,
       key: value,
@@ -49,19 +47,17 @@ function GridFilterInputSingleSelect(props) {
       type,
       apiRef,
       focusElementRef,
-      getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp,
       placeholder,
       tabIndex,
       label: labelProp,
       clearButton
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
-  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const filterValue = item.value ?? '';
   const id = useId();
   const labelId = useId();
   const rootProps = useGridRootProps();
-  const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? true;
+  const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? false;
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);
@@ -69,52 +65,27 @@ function GridFilterInputSingleSelect(props) {
       resolvedColumn = column;
     }
   }
-  const getOptionValue = getOptionValueProp || resolvedColumn?.getOptionValue;
-  const getOptionLabel = getOptionLabelProp || resolvedColumn?.getOptionLabel;
+  const getOptionValue = resolvedColumn?.getOptionValue;
+  const getOptionLabel = resolvedColumn?.getOptionLabel;
   const currentValueOptions = React.useMemo(() => {
-    if (!resolvedColumn) {
-      return undefined;
-    }
-    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
-      field: resolvedColumn.field
-    }) : resolvedColumn.valueOptions;
+    return getValueOptions(resolvedColumn);
   }, [resolvedColumn]);
   const onFilterChange = React.useCallback(event => {
     let value = event.target.value;
 
     // NativeSelect casts the value to a string.
     value = getValueFromValueOptions(value, currentValueOptions, getOptionValue);
-    setFilterValueState(String(value));
     applyValue(_extends({}, item, {
       value
     }));
   }, [currentValueOptions, getOptionValue, applyValue, item]);
-  React.useEffect(() => {
-    let itemValue;
-    if (currentValueOptions !== undefined) {
-      // sanitize if valueOptions are provided
-      itemValue = getValueFromValueOptions(item.value, currentValueOptions, getOptionValue);
-      if (itemValue !== item.value) {
-        applyValue(_extends({}, item, {
-          value: itemValue
-        }));
-        return;
-      }
-    } else {
-      itemValue = item.value;
-    }
-    itemValue = itemValue ?? '';
-    setFilterValueState(String(itemValue));
-  }, [item, currentValueOptions, applyValue, getOptionValue]);
-  if (!isSingleSelectColDef(resolvedColumn)) {
-    return null;
-  }
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
     children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      fullWidth: true,
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         htmlFor: id,
@@ -125,7 +96,7 @@ function GridFilterInputSingleSelect(props) {
         id: id,
         label: label,
         labelId: labelId,
-        value: filterValueState,
+        value: filterValue,
         onChange: onFilterChange,
         variant: "standard",
         type: type || 'text',
@@ -159,18 +130,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * 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.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.func,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

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

@@ -1,6 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 export function isSingleSelectColDef(colDef) {
   return colDef?.type === 'singleSelect';
 }
+export function getValueOptions(column, additionalParams) {
+  if (!column) {
+    return undefined;
+  }
+  return typeof column.valueOptions === 'function' ? column.valueOptions(_extends({
+    field: column.field
+  }, additionalParams)) : column.valueOptions;
+}
 export function getValueFromValueOptions(value, valueOptions, getOptionValue) {
   if (valueOptions === undefined) {
     return undefined;
@@ -10,8 +19,4 @@ export function getValueFromValueOptions(value, valueOptions, getOptionValue) {
     return String(optionValue) === String(value);
   });
   return getOptionValue(result);
-}
-export const getLabelFromValueOption = valueOption => {
-  const label = typeof valueOption === 'object' ? valueOption.label : valueOption;
-  return label != null ? String(label) : '';
-};
+}