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

package/legacy/DataGrid/DataGrid.js

@@ -41,21 +41,21 @@ DataGridRaw.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
+   * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
   apiRef: PropTypes.shape({
     current: PropTypes.object.isRequired
   }),
   /**
-   * The label of the grid.
+   * The label of the Data Grid.
    */
   'aria-label': PropTypes.string,
   /**
-   * The id of the element containing a label for the grid.
+   * The id of the element containing a label for the Data Grid.
    */
   'aria-labelledby': PropTypes.string,
   /**
-   * If `true`, the grid height is dynamic and follow the number of rows in the grid.
+   * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
    * @default false
    */
   autoHeight: PropTypes.bool,
@@ -69,7 +69,7 @@ DataGridRaw.propTypes = {
    */
   cellModesModel: PropTypes.object,
   /**
-   * If `true`, the grid get a first column with a checkbox that allows to select rows.
+   * If `true`, the Data Grid will display an extra column with checkboxes for selecting rows.
    * @default false
    */
   checkboxSelection: PropTypes.bool,
@@ -89,7 +89,7 @@ DataGridRaw.propTypes = {
   columnBuffer: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
-   * Sets the height in pixel of the column headers in the grid.
+   * Sets the height in pixel of the column headers in the Data Grid.
    * @default 56
    */
   columnHeaderHeight: PropTypes.number,
@@ -111,12 +111,12 @@ DataGridRaw.propTypes = {
    */
   columnThreshold: PropTypes.number,
   /**
-   * Set the column visibility model of the grid.
-   * If defined, the grid will ignore the `hide` property in [[GridColDef]].
+   * Set the column visibility model of the Data Grid.
+   * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
    */
   columnVisibilityModel: PropTypes.object,
   /**
-   * Set the density of the grid.
+   * Set the density of the Data Grid.
    * @default "standard"
    */
   density: PropTypes.oneOf(['comfortable', 'compact', 'standard']),
@@ -146,6 +146,12 @@ DataGridRaw.propTypes = {
    * @ignore - do not document
    */
   disableEval: PropTypes.bool,
+  /**
+   * If `true`, multiple selection using the Ctrl/CMD or Shift key is disabled.
+   * The MIT DataGrid will ignore this prop, unless `checkboxSelection` is enabled.
+   * @default false (`!props.checkboxSelection` for MIT Data Grid)
+   */
+  disableMultipleRowSelection: PropTypes.bool,
   /**
    * If `true`, the selection on click on a row or cell is disabled.
    * @default false
@@ -182,7 +188,7 @@ DataGridRaw.propTypes = {
    */
   filterMode: PropTypes.oneOf(['client', 'server']),
   /**
-   * Set the filter model of the grid.
+   * Set the filter model of the Data Grid.
    */
   filterModel: PropTypes.shape({
     items: PropTypes.arrayOf(PropTypes.shape({
@@ -197,7 +203,7 @@ DataGridRaw.propTypes = {
     quickFilterValues: PropTypes.array
   }),
   /**
-   * Forwarded props for the grid root element.
+   * Forwarded props for the Data Grid root element.
    * @ignore - do not document.
    */
   forwardedProps: PropTypes.object,
@@ -265,7 +271,7 @@ DataGridRaw.propTypes = {
    */
   ignoreDiacritics: PropTypes.bool,
   /**
-   * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
+   * If `true`, the Data Grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
    * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
    * @default false
    */
@@ -303,7 +309,7 @@ DataGridRaw.propTypes = {
    */
   loading: PropTypes.bool,
   /**
-   * Set the locale text of the grid.
+   * Set the locale text of the Data Grid.
    * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: PropTypes.object,
@@ -471,7 +477,7 @@ DataGridRaw.propTypes = {
    */
   onProcessRowUpdateError: PropTypes.func,
   /**
-   * Callback fired when the grid is resized.
+   * Callback fired when the Data Grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
@@ -529,7 +535,7 @@ DataGridRaw.propTypes = {
    */
   onSortModelChange: PropTypes.func,
   /**
-   * Callback fired when the state of the grid is updated.
+   * Callback fired when the state of the Data Grid is updated.
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
@@ -583,7 +589,7 @@ DataGridRaw.propTypes = {
    */
   rowCount: PropTypes.number,
   /**
-   * Sets the height in pixel of a row in the grid.
+   * Sets the height in pixel of a row in the Data Grid.
    * @default 52
    */
   rowHeight: PropTypes.number,
@@ -608,7 +614,7 @@ DataGridRaw.propTypes = {
    */
   rowSelection: PropTypes.bool,
   /**
-   * Sets the row selection model of the grid.
+   * Sets the row selection model of the Data Grid.
    */
   rowSelectionModel: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.string]),
   /**
@@ -622,7 +628,7 @@ DataGridRaw.propTypes = {
    */
   rowThreshold: PropTypes.number,
   /**
-   * Override the height/width of the grid inner scrollbar.
+   * Override the height/width of the Data Grid inner scrollbar.
    */
   scrollbarSize: PropTypes.number,
   /**
@@ -656,7 +662,7 @@ DataGridRaw.propTypes = {
    */
   sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
   /**
-   * Set the sort model of the grid.
+   * Set the sort model of the Data Grid.
    */
   sortModel: PropTypes.arrayOf(PropTypes.shape({
     field: PropTypes.string.isRequired,

package/legacy/DataGrid/useDataGridProps.js

@@ -8,7 +8,6 @@ import { computeSlots, useProps } from '../internals/utils';
 var DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
-  disableMultipleRowSelection: true,
   throttleRowsMs: undefined,
   hideFooterRowCount: false,
   pagination: true,

package/legacy/colDef/gridDateOperators.js

@@ -1,19 +1,15 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { GridFilterInputDate } from '../components/panel/filterPanel/GridFilterInputDate';
-var dateRegex = /(\d+)-(\d+)-(\d+)/;
-var dateTimeRegex = /(\d+)-(\d+)-(\d+)T(\d+):(\d+)/;
 function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
   if (!filterItem.value) {
     return null;
   }
-  var _slice$map = filterItem.value.match(showTime ? dateTimeRegex : dateRegex).slice(1).map(Number),
-    _slice$map2 = _slicedToArray(_slice$map, 5),
-    year = _slice$map2[0],
-    month = _slice$map2[1],
-    day = _slice$map2[2],
-    hour = _slice$map2[3],
-    minute = _slice$map2[4];
-  var time = new Date(year, month - 1, day, hour || 0, minute || 0).getTime();
+  var date = new Date(filterItem.value);
+  if (showTime) {
+    date.setSeconds(0, 0);
+  } else {
+    date.setHours(0, 0, 0, 0);
+  }
+  var time = date.getTime();
   return function (value) {
     if (!value) {
       return false;
@@ -24,8 +20,12 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
 
     // Make a copy of the date to not reset the hours in the original object
     var dateCopy = new Date(value);
-    var 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 var getGridDateOperators = function getGridDateOperators(showTime) {

package/legacy/colDef/gridSingleSelectColDef.js

@@ -3,7 +3,7 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 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';
 var isArrayOfObjects = function isArrayOfObjects(options) {
   return _typeof(options[0]) === 'object';
@@ -27,16 +27,10 @@ export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }
-    var valueOptions;
-    if (typeof colDef.valueOptions === 'function') {
-      valueOptions = colDef.valueOptions({
-        id: id,
-        row: id ? api.getRow(id) : null,
-        field: field
-      });
-    } else {
-      valueOptions = colDef.valueOptions;
-    }
+    var valueOptions = getValueOptions(colDef, {
+      id: id,
+      row: id ? api.getRow(id) : null
+    });
     if (value == null) {
       return '';
     }
@@ -56,10 +50,7 @@ export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   // @ts-ignore
   pastedValueParser: function pastedValueParser(value, params) {
     var colDef = params.colDef;
-    var colDefValueOptions = colDef.valueOptions;
-    var valueOptions = typeof colDefValueOptions === 'function' ? colDefValueOptions({
-      field: colDef.field
-    }) : colDefValueOptions || [];
+    var valueOptions = getValueOptions(colDef) || [];
     var getOptionValue = colDef.getOptionValue;
     var valueOption = valueOptions.find(function (option) {
       if (getOptionValue(option) === value) {

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "getOptionLabel", "getOptionValue"],
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen"],
   _excluded2 = ["MenuProps"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
@@ -12,7 +12,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";
@@ -41,8 +41,6 @@ function GridEditSingleSelectCell(props) {
     onValueChange = props.onValueChange,
     _props$initialOpen = props.initialOpen,
     initialOpen = _props$initialOpen === void 0 ? rootProps.editMode === GridEditModes.Cell : _props$initialOpen,
-    getOptionLabelProp = props.getOptionLabel,
-    getOptionValueProp = props.getOptionValue,
     other = _objectWithoutProperties(props, _excluded);
   var apiRef = useGridApiContext();
   var ref = React.useRef();
@@ -65,21 +63,15 @@ function GridEditSingleSelectCell(props) {
   if (!isSingleSelectColDef(colDef)) {
     return null;
   }
-  var valueOptions;
-  if (typeof (colDef == null ? void 0 : colDef.valueOptions) === 'function') {
-    valueOptions = colDef == null ? void 0 : colDef.valueOptions({
-      id: id,
-      row: row,
-      field: field
-    });
-  } else {
-    valueOptions = colDef == null ? void 0 : colDef.valueOptions;
-  }
+  var valueOptions = getValueOptions(colDef, {
+    id: id,
+    row: row
+  });
   if (!valueOptions) {
     return null;
   }
-  var getOptionValue = getOptionValueProp || colDef.getOptionValue;
-  var getOptionLabel = getOptionLabelProp || colDef.getOptionLabel;
+  var getOptionValue = colDef.getOptionValue;
+  var getOptionLabel = colDef.getOptionLabel;
   var handleChange = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
       var target, formattedTargetValue;
@@ -190,18 +182,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/legacy/components/columnSelection/GridHeaderCheckbox.js

@@ -5,6 +5,7 @@ var _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';
@@ -112,7 +113,8 @@ var GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckb
       'aria-label': label
     },
     tabIndex: tabIndex,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    disabled: !isMultipleRowSelectionEnabled(rootProps)
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {

package/legacy/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";
@@ -150,24 +151,37 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
   var hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
   var baseFormControlProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseFormControl) || {};
   var baseSelectProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {};
-  var isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
   var baseInputLabelProps = ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel) || {};
   var baseSelectOptionProps = ((_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption) || {};
   var InputComponentProps = valueInputProps.InputComponentProps,
     valueInputPropsOther = _objectWithoutProperties(valueInputProps, _excluded2);
-  var filteredColumns = React.useMemo(function () {
-    if (filterColumns === undefined || typeof filterColumns !== 'function') {
-      return filterableColumns;
-    }
-    var filteredFields = filterColumns({
-      field: item.field,
-      columns: filterableColumns,
-      currentFilters: (filterModel == null ? void 0 : filterModel.items) || []
-    });
-    return filterableColumns.filter(function (column) {
-      return filteredFields.includes(column.field);
-    });
-  }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.field]);
+  var _React$useMemo = React.useMemo(function () {
+      var itemField = item.field;
+      if (filterColumns === undefined || typeof filterColumns !== 'function') {
+        return {
+          filteredColumns: filterableColumns,
+          selectedField: itemField
+        };
+      }
+      var filteredFields = filterColumns({
+        field: item.field,
+        columns: filterableColumns,
+        currentFilters: (filterModel == null ? void 0 : filterModel.items) || []
+      });
+      return {
+        filteredColumns: filterableColumns.filter(function (column) {
+          var isFieldIncluded = filteredFields.includes(column.field);
+          if (column.field === item.field && !isFieldIncluded) {
+            itemField = undefined;
+          }
+          return isFieldIncluded;
+        }),
+        selectedField: itemField
+      };
+    }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.field]),
+    filteredColumns = _React$useMemo.filteredColumns,
+    selectedField = _React$useMemo.selectedField;
   var sortedFilteredColumns = React.useMemo(function () {
     switch (columnsSort) {
       case 'asc':
@@ -206,11 +220,29 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
     }) || column.filterOperators[0];
 
     // Erase filter value if the input component or filtered column type is modified
-    var eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
+    var eraseFilterValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
+    var filterValue = eraseFilterValue ? undefined : item.value;
+
+    // Check filter value against the new valueOptions
+    if (column.type === 'singleSelect' && filterValue !== undefined) {
+      var colDef = column;
+      var valueOptions = getValueOptions(colDef);
+      if (Array.isArray(filterValue)) {
+        filterValue = filterValue.filter(function (val) {
+          return (
+            // Only keep values that are in the new value options
+            getValueFromValueOptions(val, valueOptions, colDef == null ? void 0 : colDef.getOptionValue) !== undefined
+          );
+        });
+      } else if (getValueFromValueOptions(item.value, valueOptions, colDef == null ? void 0 : colDef.getOptionValue) === undefined) {
+        // Reset the filter value if it is not in the new value options
+        filterValue = undefined;
+      }
+    }
     applyFilterChanges(_extends({}, item, {
       field: field,
       operator: newOperator.value,
-      value: eraseItemValue ? undefined : item.value
+      value: filterValue
     }));
   }, [apiRef, applyFilterChanges, item, currentColumn, currentOperator]);
   var changeOperator = React.useCallback(function (event) {
@@ -290,7 +322,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         inputProps: {
           'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
         },
-        value: multiFilterOperator,
+        value: multiFilterOperator != null ? multiFilterOperator : '',
         onChange: changeLogicOperator,
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
@@ -317,7 +349,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         labelId: columnSelectLabelId,
         id: columnSelectId,
         label: apiRef.current.getLocaleText('filterPanelColumns'),
-        value: item.field || '',
+        value: selectedField != null ? selectedField : '',
         onChange: changeColumn,
         native: isBaseSelectNative
       }, (_rootProps$slotProps7 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps7.baseSelect, {
@@ -367,7 +399,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef
-      }, currentOperator.InputComponentProps, InputComponentProps)) : null
+      }, currentOperator.InputComponentProps, InputComponentProps), item.field) : null
     }))]
   }));
 });

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

@@ -37,7 +37,7 @@ function GridFilterInputBoolean(props) {
   var labelId = useId();
   var selectId = useId();
   var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
-  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
   var baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
   var onFilterChange = React.useCallback(function (event) {
     var value = event.target.value;

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

@@ -8,8 +8,25 @@ 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 '';
+  }
+  var 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) {
-  var _item$value, _rootProps$slotProps;
+  var _rootProps$slotProps;
   var item = props.item,
     applyValue = props.applyValue,
     type = props.type,
@@ -22,7 +39,9 @@ function GridFilterInputDate(props) {
     disabled = props.disabled,
     other = _objectWithoutProperties(props, _excluded);
   var filterTimeout = useTimeout();
-  var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
+  var _React$useState = React.useState(function () {
+      return convertFilterItemValueToInputValue(item.value, type);
+    }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     filterValueState = _React$useState2[0],
     setFilterValueState = _React$useState2[1];
@@ -33,21 +52,21 @@ function GridFilterInputDate(props) {
   var id = useId();
   var rootProps = useGridRootProps();
   var onFilterChange = React.useCallback(function (event) {
+    filterTimeout.clear();
     var value = event.target.value;
-    setFilterValueState(String(value));
+    setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, function () {
       applyValue(_extends({}, item, {
-        value: value
+        value: new Date(value)
       }));
       setIsApplying(false);
     });
   }, [applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(function () {
-    var _item$value2;
-    var itemValue = (_item$value2 = item.value) != null ? _item$value2 : '';
-    setFilterValueState(String(itemValue));
-  }, [item.value]);
+    var value = convertFilterItemValueToInputValue(item.value, type);
+    setFilterValueState(value);
+  }, [item.value, type]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     fullWidth: true,
     id: id,

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

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant", "getOptionLabel", "getOptionValue"];
+var _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";
 var filter = createFilterOptions();
@@ -22,8 +22,6 @@ function GridFilterInputMultipleSingleSelect(props) {
     size = props.size,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'standard' : _props$variant,
-    getOptionLabelProp = props.getOptionLabel,
-    getOptionValueProp = props.getOptionValue,
     other = _objectWithoutProperties(props, _excluded);
   var TextFieldProps = {
     color: color,
@@ -41,26 +39,14 @@ function GridFilterInputMultipleSingleSelect(props) {
       resolvedColumn = column;
     }
   }
-  var getOptionValue = getOptionValueProp || ((_resolvedColumn = resolvedColumn) == null ? void 0 : _resolvedColumn.getOptionValue);
-  var getOptionLabel = getOptionLabelProp || ((_resolvedColumn2 = resolvedColumn) == null ? void 0 : _resolvedColumn2.getOptionLabel);
+  var getOptionValue = (_resolvedColumn = resolvedColumn) == null ? void 0 : _resolvedColumn.getOptionValue;
+  var getOptionLabel = (_resolvedColumn2 = resolvedColumn) == null ? void 0 : _resolvedColumn2.getOptionLabel;
   var isOptionEqualToValue = React.useCallback(function (option, value) {
     return getOptionValue(option) === getOptionValue(value);
   }, [getOptionValue]);
   var resolvedValueOptions = React.useMemo(function () {
-    var _resolvedColumn3;
-    if (!((_resolvedColumn3 = resolvedColumn) != null && _resolvedColumn3.valueOptions)) {
-      return [];
-    }
-    if (typeof resolvedColumn.valueOptions === 'function') {
-      return resolvedColumn.valueOptions({
-        field: resolvedColumn.field
-      });
-    }
-    return resolvedColumn.valueOptions;
+    return getValueOptions(resolvedColumn) || [];
   }, [resolvedColumn]);
-  var resolvedFormattedValueOptions = React.useMemo(function () {
-    return resolvedValueOptions == null ? void 0 : 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
@@ -68,29 +54,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     if (!Array.isArray(item.value)) {
       return [];
     }
-    if (resolvedValueOptions !== undefined) {
-      var itemValueIndexes = item.value.map(function (element) {
-        // Gets the index matching between values and valueOptions
-        return resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(function (formattedOption) {
-          return formattedOption === element;
-        });
-      });
-      return itemValueIndexes.filter(function (index) {
-        return index >= 0;
-      }).map(function (index) {
-        return resolvedValueOptions[index];
-      });
-    }
     return item.value;
-  }, [item.value, resolvedValueOptions, resolvedFormattedValueOptions]);
-  React.useEffect(function () {
-    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]);
   var handleChange = React.useCallback(function (event, value) {
     applyValue(_extends({}, item, {
       value: value.map(getOptionValue)
@@ -140,18 +105,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]),