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

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -15,6 +15,7 @@ import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridClasses } from '../../../constants/gridClasses';
 import { isEventTargetInPortal } from '../../../utils/domUtils';
+import { isMultipleRowSelectionEnabled } from './utils';
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
     return selectionModelProp;
@@ -57,11 +58,10 @@ export const useGridRowSelection = (apiRef, props) => {
   });
   const {
     checkboxSelection,
-    disableMultipleRowSelection,
     disableRowSelectionOnClick,
     isRowSelectable: propIsRowSelectable
   } = props;
-  const canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
+  const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
   const visibleRows = useGridVisibleRows(apiRef, props);
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
@@ -91,7 +91,7 @@ export const useGridRowSelection = (apiRef, props) => {
    * API METHODS
    */
   const setRowSelectionModel = React.useCallback(model => {
-    if (props.signature === GridSignature.DataGrid && !props.checkboxSelection && Array.isArray(model) && model.length > 1) {
+    if (props.signature === GridSignature.DataGrid && !canHaveMultipleSelection && Array.isArray(model) && model.length > 1) {
       throw new Error(['MUI: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
     const currentModel = gridRowSelectionStateSelector(apiRef.current.state);
@@ -102,7 +102,7 @@ export const useGridRowSelection = (apiRef, props) => {
       }));
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, logger, props.rowSelection, props.signature, props.checkboxSelection]);
+  }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   const isRowSelected = React.useCallback(id => gridRowSelectionStateSelector(apiRef.current.state).includes(id), [apiRef]);
   const isRowSelectable = React.useCallback(id => {
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
@@ -253,24 +253,24 @@ export const useGridRowSelection = (apiRef, props) => {
     if (rowNode.type === 'pinnedRow') {
       return;
     }
-    if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
+    if (event.shiftKey && canHaveMultipleSelection) {
       expandMouseRowRangeSelection(params.id);
     } else {
       handleSingleRowSelection(params.id, event);
     }
-  }, [disableRowSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
+  }, [disableRowSelectionOnClick, canHaveMultipleSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
   const preventSelectionOnShift = React.useCallback((params, event) => {
     if (canHaveMultipleSelection && event.shiftKey) {
       window.getSelection()?.removeAllRanges();
     }
   }, [canHaveMultipleSelection]);
   const handleRowSelectionCheckboxChange = React.useCallback((params, event) => {
-    if (event.nativeEvent.shiftKey) {
+    if (canHaveMultipleSelection && event.nativeEvent.shiftKey) {
       expandMouseRowRangeSelection(params.id);
     } else {
-      apiRef.current.selectRow(params.id, params.value);
+      apiRef.current.selectRow(params.id, params.value, !canHaveMultipleSelection);
     }
-  }, [apiRef, expandMouseRowRangeSelection]);
+  }, [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
     const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef);

package/modern/hooks/features/rowSelection/utils.js

@@ -0,0 +1,8 @@
+import { GridSignature } from '../../utils/useGridApiEventHandler';
+export function isMultipleRowSelectionEnabled(props) {
+  if (props.signature === GridSignature.DataGrid) {
+    // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.
+    return props.checkboxSelection && props.disableMultipleRowSelection !== true;
+  }
+  return !props.disableMultipleRowSelection;
+}

package/modern/hooks/utils/useGridAriaAttributes.js

@@ -4,6 +4,7 @@ import { useGridRootProps } from './useGridRootProps';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../features/columnGrouping/gridColumnGroupsSelector';
 import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../features/rows/gridRowsSelector';
 import { useGridPrivateApiContext } from './useGridPrivateApiContext';
+import { isMultipleRowSelectionEnabled } from '../features/rowSelection/utils';
 export const useGridAriaAttributes = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -19,6 +20,6 @@ export const useGridAriaAttributes = () => {
     role,
     'aria-colcount': visibleColumns.length,
     'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
-    'aria-multiselectable': !rootProps.disableMultipleRowSelection
+    'aria-multiselectable': isMultipleRowSelectionEnabled(rootProps)
   };
 };

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-alpha.5
+ * @mui/x-data-grid v7.0.0-alpha.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/DataGrid/DataGrid.js

@@ -49,21 +49,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.default.shape({
     current: _propTypes.default.object.isRequired
   }),
   /**
-   * The label of the grid.
+   * The label of the Data Grid.
    */
   'aria-label': _propTypes.default.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.default.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.default.bool,
@@ -77,7 +77,7 @@ DataGridRaw.propTypes = {
    */
   cellModesModel: _propTypes.default.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.default.bool,
@@ -97,7 +97,7 @@ DataGridRaw.propTypes = {
   columnBuffer: _propTypes.default.number,
   columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.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.default.number,
@@ -117,12 +117,12 @@ DataGridRaw.propTypes = {
    */
   columnThreshold: _propTypes.default.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.default.object,
   /**
-   * Set the density of the grid.
+   * Set the density of the Data Grid.
    * @default "standard"
    */
   density: _propTypes.default.oneOf(['comfortable', 'compact', 'standard']),
@@ -152,6 +152,12 @@ DataGridRaw.propTypes = {
    * @ignore - do not document
    */
   disableEval: _propTypes.default.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.default.bool,
   /**
    * If `true`, the selection on click on a row or cell is disabled.
    * @default false
@@ -188,7 +194,7 @@ DataGridRaw.propTypes = {
    */
   filterMode: _propTypes.default.oneOf(['client', 'server']),
   /**
-   * Set the filter model of the grid.
+   * Set the filter model of the Data Grid.
    */
   filterModel: _propTypes.default.shape({
     items: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -203,7 +209,7 @@ DataGridRaw.propTypes = {
     quickFilterValues: _propTypes.default.array
   }),
   /**
-   * Forwarded props for the grid root element.
+   * Forwarded props for the Data Grid root element.
    * @ignore - do not document.
    */
   forwardedProps: _propTypes.default.object,
@@ -271,7 +277,7 @@ DataGridRaw.propTypes = {
    */
   ignoreDiacritics: _propTypes.default.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
    */
@@ -309,7 +315,7 @@ DataGridRaw.propTypes = {
    */
   loading: _propTypes.default.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.default.object,
@@ -477,7 +483,7 @@ DataGridRaw.propTypes = {
    */
   onProcessRowUpdateError: _propTypes.default.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.
@@ -535,7 +541,7 @@ DataGridRaw.propTypes = {
    */
   onSortModelChange: _propTypes.default.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.
@@ -589,7 +595,7 @@ DataGridRaw.propTypes = {
    */
   rowCount: _propTypes.default.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.default.number,
@@ -614,7 +620,7 @@ DataGridRaw.propTypes = {
    */
   rowSelection: _propTypes.default.bool,
   /**
-   * Sets the row selection model of the grid.
+   * Sets the row selection model of the Data Grid.
    */
   rowSelectionModel: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired), _propTypes.default.number, _propTypes.default.string]),
   /**
@@ -628,7 +634,7 @@ DataGridRaw.propTypes = {
    */
   rowThreshold: _propTypes.default.number,
   /**
-   * Override the height/width of the grid inner scrollbar.
+   * Override the height/width of the Data Grid inner scrollbar.
    */
   scrollbarSize: _propTypes.default.number,
   /**
@@ -662,7 +668,7 @@ DataGridRaw.propTypes = {
    */
   sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])),
   /**
-   * Set the sort model of the grid.
+   * Set the sort model of the Data Grid.
    */
   sortModel: _propTypes.default.arrayOf(_propTypes.default.shape({
     field: _propTypes.default.string.isRequired,

package/node/DataGrid/useDataGridProps.js

@@ -17,7 +17,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
-  disableMultipleRowSelection: true,
   throttleRowsMs: undefined,
   hideFooterRowCount: false,
   pagination: true,

package/node/colDef/gridDateOperators.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getGridDateOperators = void 0;
 var _GridFilterInputDate = require("../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;
@@ -23,8 +26,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);
   };
 }
 const getGridDateOperators = showTime => [{

package/node/colDef/gridSingleSelectColDef.js

@@ -35,16 +35,10 @@ const GRID_SINGLE_SELECT_COL_DEF = exports.GRID_SINGLE_SELECT_COL_DEF = (0, _ext
     if (!(0, _filterPanelUtils.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 = (0, _filterPanelUtils.getValueOptions)(colDef, {
+      id,
+      row: id ? api.getRow(id) : null
+    });
     if (value == null) {
       return '';
     }
@@ -62,10 +56,7 @@ const GRID_SINGLE_SELECT_COL_DEF = exports.GRID_SINGLE_SELECT_COL_DEF = (0, _ext
   // @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 = (0, _filterPanelUtils.getValueOptions)(colDef) || [];
     const getOptionValue = colDef.getOptionValue;
     const valueOption = valueOptions.find(option => {
       if (getOptionValue(option) === value) {

package/node/components/cell/GridEditSingleSelectCell.js

@@ -19,7 +19,7 @@ var _gridEditRowModel = require("../../models/gridEditRowModel");
 var _filterPanelUtils = require("../panel/filterPanel/filterPanelUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -37,9 +37,7 @@ function GridEditSingleSelectCell(props) {
       hasFocus,
       error,
       onValueChange,
-      initialOpen = rootProps.editMode === _gridEditRowModel.GridEditModes.Cell,
-      getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp
+      initialOpen = rootProps.editMode === _gridEditRowModel.GridEditModes.Cell
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -61,21 +59,15 @@ function GridEditSingleSelectCell(props) {
   if (!(0, _filterPanelUtils.isSingleSelectColDef)(colDef)) {
     return null;
   }
-  let valueOptions;
-  if (typeof colDef?.valueOptions === 'function') {
-    valueOptions = colDef?.valueOptions({
-      id,
-      row,
-      field
-    });
-  } else {
-    valueOptions = colDef?.valueOptions;
-  }
+  const valueOptions = (0, _filterPanelUtils.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 (!(0, _filterPanelUtils.isSingleSelectColDef)(colDef) || !valueOptions) {
       return;
@@ -164,18 +156,6 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * The cell value formatted with the column valueFormatter.
    */
   formattedValue: _propTypes.default.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.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,
   /**
    * If true, the cell is the active element.
    */

package/node/components/columnSelection/GridHeaderCheckbox.js

@@ -10,6 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _utils2 = require("../../hooks/features/rowSelection/utils");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _gridRowSelectionSelector = require("../../hooks/features/rowSelection/gridRowSelectionSelector");
@@ -111,7 +112,8 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwa
       'aria-label': label
     },
     tabIndex: tabIndex,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    disabled: !(0, _utils2.isMultipleRowSelectionEnabled)(rootProps)
   }, rootProps.slotProps?.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {

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

@@ -20,6 +20,7 @@ var _gridFilterItem = require("../../../models/gridFilterItem");
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../../constants/gridClasses");
+var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
   _excluded2 = ["InputComponentProps"];
@@ -138,23 +139,39 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
   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 = (0, _objectWithoutPropertiesLoose2.default)(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) {
@@ -185,11 +202,29 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
     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 = (0, _filterPanelUtils.getValueOptions)(colDef);
+      if (Array.isArray(filterValue)) {
+        filterValue = filterValue.filter(val => {
+          return (
+            // Only keep values that are in the new value options
+            (0, _filterPanelUtils.getValueFromValueOptions)(val, valueOptions, colDef?.getOptionValue) !== undefined
+          );
+        });
+      } else if ((0, _filterPanelUtils.getValueFromValueOptions)(item.value, valueOptions, colDef?.getOptionValue) === undefined) {
+        // Reset the filter value if it is not in the new value options
+        filterValue = undefined;
+      }
+    }
     applyFilterChanges((0, _extends2.default)({}, item, {
       field,
       operator: newOperator.value,
-      value: eraseItemValue ? undefined : item.value
+      value: filterValue
     }));
   }, [apiRef, applyFilterChanges, item, currentColumn, currentOperator]);
   const changeOperator = React.useCallback(event => {
@@ -264,7 +299,7 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         inputProps: {
           'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
         },
-        value: multiFilterOperator,
+        value: multiFilterOperator ?? '',
         onChange: changeLogicOperator,
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
@@ -289,7 +324,7 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         labelId: columnSelectLabelId,
         id: columnSelectId,
         label: apiRef.current.getLocaleText('filterPanelColumns'),
-        value: item.field || '',
+        value: selectedField ?? '',
         onChange: changeColumn,
         native: isBaseSelectNative
       }, rootProps.slotProps?.baseSelect, {
@@ -335,7 +370,7 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef
-      }, currentOperator.InputComponentProps, InputComponentProps)) : null
+      }, currentOperator.InputComponentProps, InputComponentProps), item.field) : null
     }))]
   }));
 });

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

@@ -40,7 +40,7 @@ function GridFilterInputBoolean(props) {
   const labelId = (0, _utils.unstable_useId)();
   const selectId = (0, _utils.unstable_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/node/components/panel/filterPanel/GridFilterInputDate.js

@@ -16,6 +16,23 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "clearButton", "tabIndex", "disabled"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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,
@@ -30,25 +47,26 @@ function GridFilterInputDate(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterTimeout = (0, _useTimeout.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 = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.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((0, _extends2.default)({}, 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__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
     fullWidth: true,
     id: id,