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

package/models/controlStateItem.d.ts

@@ -5,10 +5,7 @@ import { GridStateCommunity } from './gridStateCommunity';
 export interface GridControlStateItem<State extends GridStateCommunity, E extends keyof GridControlledStateEventLookup> {
     stateId: string;
     propModel?: GridEventLookup[E]['params'];
-    stateSelector: OutputSelector<{
-        state: State;
-        instanceId: string;
-    }, GridControlledStateEventLookup[E]['params']> | ((state: State) => GridControlledStateEventLookup[E]['params']);
+    stateSelector: OutputSelector<State, GridControlledStateEventLookup[E]['params']> | ((state: State) => GridControlledStateEventLookup[E]['params']);
     propOnChange?: (model: GridControlledStateEventLookup[E]['params'], details: GridCallbackDetails) => void;
     changeEvent: E;
 }

package/models/props/DataGridProps.d.ts

@@ -56,7 +56,7 @@ export interface DataGridProcessedProps<R extends GridValidRowModel = any> exten
  * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override.
  * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...).
  */
-export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableMultipleRowSelection' | 'disableColumnReorder' | 'disableColumnResize' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature';
+export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'disableColumnResize' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature';
 /**
  * The `DataGrid` options with a default value that must be merged with the value given through props.
  */
@@ -73,7 +73,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
      */
     slots?: Partial<GridSlotsComponent>;
     /**
-     * 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?: Partial<GridLocaleText>;
@@ -86,7 +86,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
  */
 export interface DataGridPropsWithDefaultValues {
     /**
-     * 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: boolean;
@@ -96,7 +96,7 @@ export interface DataGridPropsWithDefaultValues {
      */
     autoPageSize: boolean;
     /**
-     * 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: boolean;
@@ -132,7 +132,7 @@ export interface DataGridPropsWithDefaultValues {
      */
     columnThreshold: number;
     /**
-     * Set the density of the grid.
+     * Set the density of the Data Grid.
      * @default "standard"
      */
     density: GridDensity;
@@ -168,8 +168,9 @@ export interface DataGridPropsWithDefaultValues {
      */
     disableMultipleColumnsFiltering: boolean;
     /**
-     * If `true`, multiple selection using the Ctrl or CMD key is disabled.
-     * @default false
+     * 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: boolean;
     /**
@@ -204,7 +205,7 @@ export interface DataGridPropsWithDefaultValues {
      */
     filterDebounceMs: number;
     /**
-     * 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: number;
@@ -265,7 +266,7 @@ export interface DataGridPropsWithDefaultValues {
      */
     paginationMode: GridFeatureMode;
     /**
-     * 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: number;
@@ -305,7 +306,7 @@ export interface DataGridPropsWithDefaultValues {
      */
     sortingMode: GridFeatureMode;
     /**
-     * If positive, the Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
+     * If positive, the Data Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
      * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.
      * @default 0
      */
@@ -321,13 +322,13 @@ export interface DataGridPropsWithDefaultValues {
      */
     disableColumnResize: boolean;
     /**
-     * If `true`, moving the mouse pointer outside the grid before releasing the mouse button
+     * If `true`, moving the mouse pointer outside the Data Grid before releasing the mouse button
      * in a column re-order action will not cause the column to jump back to its original position.
      * @default false
      */
     keepColumnPositionIfDraggedOutside: boolean;
     /**
-     * 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
      */
@@ -353,17 +354,17 @@ export interface DataGridPropsWithDefaultValues {
  */
 export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends CommonProps {
     /**
-     * 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?: React.MutableRefObject<GridApiCommunity>;
     /**
-     * Forwarded props for the grid root element.
+     * Forwarded props for the Data Grid root element.
      * @ignore - do not document.
      */
     forwardedProps?: Record<string, unknown>;
     /**
      * Signal to the underlying logic what version of the public component API
-     * of the data grid is exposed [[GridSignature]].
+     * of the Data Grid is exposed [[GridSignature]].
      * @ignore - do not document.
      */
     signature?: string;
@@ -377,7 +378,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     rowCount?: number;
     /**
-     * Override the height/width of the grid inner scrollbar.
+     * Override the height/width of the Data Grid inner scrollbar.
      */
     scrollbarSize?: number;
     /**
@@ -546,14 +547,14 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onRowDoubleClick?: GridEventListener<'rowDoubleClick'>;
     /**
-     * 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.
      */
     onResize?: GridEventListener<'debouncedResize'>;
     /**
-     * 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.
@@ -619,7 +620,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onRowModesModelChange?: (rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void;
     /**
-     * Set the filter model of the grid.
+     * Set the filter model of the Data Grid.
      */
     filterModel?: GridFilterModel;
     /**
@@ -629,7 +630,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onFilterModelChange?: (model: GridFilterModel, details: GridCallbackDetails<'filter'>) => void;
     /**
-     * Sets the row selection model of the grid.
+     * Sets the row selection model of the Data Grid.
      */
     rowSelectionModel?: GridInputRowSelectionModel;
     /**
@@ -639,8 +640,8 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onRowSelectionModelChange?: (rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void;
     /**
-     * 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?: GridColumnVisibilityModel;
     /**
@@ -650,7 +651,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onColumnVisibilityModelChange?: (model: GridColumnVisibilityModel, details: GridCallbackDetails) => void;
     /**
-     * Set the sort model of the grid.
+     * Set the sort model of the Data Grid.
      */
     sortModel?: GridSortModel;
     /**
@@ -660,11 +661,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onSortModelChange?: (model: GridSortModel, details: GridCallbackDetails) => void;
     /**
-     * The label of the grid.
+     * The label of the Data Grid.
      */
     'aria-label'?: 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'?: string;
     /**

package/modern/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,
@@ -109,12 +109,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']),
@@ -144,6 +144,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
@@ -180,7 +186,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({
@@ -195,7 +201,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,
@@ -263,7 +269,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
    */
@@ -301,7 +307,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,
@@ -469,7 +475,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.
@@ -527,7 +533,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.
@@ -581,7 +587,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,
@@ -606,7 +612,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]),
   /**
@@ -620,7 +626,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,
   /**
@@ -654,7 +660,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/modern/DataGrid/useDataGridProps.js

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

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;