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

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]),

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

@@ -1,33 +1,31 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
-import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
+import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
-  var _ref$column = _ref.column,
-    valueOptions = _ref$column.valueOptions,
-    field = _ref$column.field,
+  var column = _ref.column,
     OptionComponent = _ref.OptionComponent,
     getOptionLabel = _ref.getOptionLabel,
     getOptionValue = _ref.getOptionValue,
     isSelectNative = _ref.isSelectNative,
     baseSelectOptionProps = _ref.baseSelectOptionProps;
-  var iterableColumnValues = typeof valueOptions === 'function' ? [''].concat(_toConsumableArray(valueOptions({
-    field: field
-  }))) : [''].concat(_toConsumableArray(valueOptions || []));
+  var iterableColumnValues = [''].concat(_toConsumableArray(getValueOptions(column) || []));
   return iterableColumnValues.map(function (option) {
     var value = getOptionValue(option);
     var label = getOptionLabel(option);
+    if (label === '') {
+      label = ' '; // To force the height of the empty option
+    }
     return /*#__PURE__*/_createElement(OptionComponent, _extends({}, baseSelectOptionProps, {
       native: isSelectNative,
       key: value,
@@ -49,8 +47,6 @@ function GridFilterInputSingleSelect(props) {
     type = props.type,
     apiRef = props.apiRef,
     focusElementRef = props.focusElementRef,
-    getOptionLabelProp = props.getOptionLabel,
-    getOptionValueProp = props.getOptionValue,
     placeholder = props.placeholder,
     tabIndex = props.tabIndex,
     labelProp = props.label,
@@ -58,14 +54,11 @@ function GridFilterInputSingleSelect(props) {
     clearButton = props.clearButton,
     InputLabelProps = props.InputLabelProps,
     others = _objectWithoutProperties(props, _excluded);
-  var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    filterValueState = _React$useState2[0],
-    setFilterValueState = _React$useState2[1];
+  var filterValue = (_item$value = item.value) != null ? _item$value : '';
   var id = useId();
   var labelId = useId();
   var rootProps = useGridRootProps();
-  var isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null || (_rootProps$slotProps = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps.native) != null ? _rootProps$slotProps$ : true;
+  var isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null || (_rootProps$slotProps = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps.native) != null ? _rootProps$slotProps$ : false;
   var resolvedColumn = null;
   if (item.field) {
     var column = apiRef.current.getColumn(item.field);
@@ -73,53 +66,27 @@ function GridFilterInputSingleSelect(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 currentValueOptions = React.useMemo(function () {
-    if (!resolvedColumn) {
-      return undefined;
-    }
-    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
-      field: resolvedColumn.field
-    }) : resolvedColumn.valueOptions;
+    return getValueOptions(resolvedColumn);
   }, [resolvedColumn]);
   var onFilterChange = React.useCallback(function (event) {
     var value = event.target.value;
 
     // NativeSelect casts the value to a string.
     value = getValueFromValueOptions(value, currentValueOptions, getOptionValue);
-    setFilterValueState(String(value));
     applyValue(_extends({}, item, {
       value: value
     }));
   }, [currentValueOptions, getOptionValue, applyValue, item]);
-  React.useEffect(function () {
-    var _itemValue;
-    var itemValue;
-    if (currentValueOptions !== undefined) {
-      // sanitize if valueOptions are provided
-      itemValue = getValueFromValueOptions(item.value, currentValueOptions, getOptionValue);
-      if (itemValue !== item.value) {
-        applyValue(_extends({}, item, {
-          value: itemValue
-        }));
-        return;
-      }
-    } else {
-      itemValue = item.value;
-    }
-    itemValue = (_itemValue = itemValue) != null ? _itemValue : '';
-    setFilterValueState(String(itemValue));
-  }, [item, currentValueOptions, applyValue, getOptionValue]);
-  if (!isSingleSelectColDef(resolvedColumn)) {
-    return null;
-  }
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
   var label = labelProp != null ? labelProp : apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
     children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      fullWidth: true,
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
         id: labelId,
         htmlFor: id,
@@ -130,7 +97,7 @@ function GridFilterInputSingleSelect(props) {
         id: id,
         label: label,
         labelId: labelId,
-        value: filterValueState,
+        value: filterValue,
         onChange: onFilterChange,
         variant: "standard",
         type: type || 'text',
@@ -164,18 +131,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * Used to determine the label displayed for a given value option.
-   * @param {ValueOptions} value The current value option.
-   * @returns {string} The text to be displayed.
-   */
-  getOptionLabel: PropTypes.func,
-  /**
-   * Used to determine the value used for a value option.
-   * @param {ValueOptions} value The current value option.
-   * @returns {string} The value to be used.
-   */
-  getOptionValue: PropTypes.func,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

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

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

package/legacy/hooks/features/filter/gridFilterUtils.js

@@ -4,15 +4,17 @@ import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
 import { getPublicApiRef } from '../../../utils/getPublicApiRef';
 import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from '../columns';
-
-// Fixes https://github.com/mui/mui-x/issues/10056
-var globalScope = typeof window === 'undefined' ? globalThis : window;
-var evalCode = globalScope[atob('ZXZhbA==')];
 var hasEval;
-try {
-  hasEval = evalCode('true');
-} catch (_) {
-  hasEval = false;
+function getHasEval() {
+  if (hasEval !== undefined) {
+    return hasEval;
+  }
+  try {
+    hasEval = new Function('return true')();
+  } catch (_) {
+    hasEval = false;
+  }
+  return hasEval;
 }
 /**
  * Adds default values to the optional fields of a filter items.
@@ -154,7 +156,7 @@ var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsAppli
   if (appliers.length === 0) {
     return null;
   }
-  if (!hasEval || disableEval) {
+  if (disableEval || !getHasEval()) {
     // This is the original logic, which is used if `eval()` is not supported (aka prevented by CSP).
     return function (row, shouldApplyFilter) {
       var resultPerItemId = {};
@@ -168,18 +170,19 @@ var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsAppli
     };
   }
 
-  // We generate a new function with `eval()` to avoid expensive patterns for JS engines
+  // We generate a new function with `new Function()` to avoid expensive patterns for JS engines
   // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
-  var filterItemTemplate = "(function filterItem$$(getRowId, appliers, row, shouldApplyFilter) {\n      ".concat(appliers.map(function (applier, i) {
+  var filterItemCore = new Function('appliers', 'row', 'shouldApplyFilter', "\"use strict\";\n".concat(appliers.map(function (applier, i) {
     return "const shouldApply".concat(i, " = !shouldApplyFilter || shouldApplyFilter(").concat(JSON.stringify(applier.item.field), ");");
-  }).join('\n'), "\n\n      const result$$ = {\n      ").concat(appliers.map(function (applier, i) {
-    return "".concat(JSON.stringify(String(applier.item.id)), ":\n          !shouldApply").concat(i, " ?\n            false :\n            appliers[").concat(i, "].fn(row),\n      ");
-  }).join('\n'), "};\n\n      return result$$;\n    })");
-  var filterItemCore = evalCode(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
+  }).join('\n'), "\n\nconst result$$ = {\n").concat(appliers.map(function (applier, i) {
+    return "  ".concat(JSON.stringify(String(applier.item.id)), ": !shouldApply").concat(i, " ? false : appliers[").concat(i, "].fn(row),");
+  }).join('\n'), "\n};\n\nreturn result$$;").replaceAll('$$', String(filterItemsApplierId)));
+  filterItemsApplierId += 1;
+
+  // Assign to the arrow function a name to help debugging
   var filterItem = function filterItem(row, shouldApplyItem) {
-    return filterItemCore(apiRef.current.getRowId, appliers, row, shouldApplyItem);
+    return filterItemCore(appliers, row, shouldApplyItem);
   };
-  filterItemsApplierId += 1;
   return filterItem;
 };
 export var shouldQuickFilterExcludeHiddenColumns = function shouldQuickFilterExcludeHiddenColumns(filterModel) {

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

@@ -16,6 +16,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';
 var getSelectionModelPropValue = function getSelectionModelPropValue(selectionModelProp, prevSelectionModel) {
   if (selectionModelProp == null) {
     return selectionModelProp;
@@ -62,10 +63,9 @@ export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
     changeEvent: 'rowSelectionChange'
   });
   var checkboxSelection = props.checkboxSelection,
-    disableMultipleRowSelection = props.disableMultipleRowSelection,
     disableRowSelectionOnClick = props.disableRowSelectionOnClick,
     propIsRowSelectable = props.isRowSelectable;
-  var canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
+  var canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
   var visibleRows = useGridVisibleRows(apiRef, props);
   var expandMouseRowRangeSelection = React.useCallback(function (id) {
     var _lastRowToggled$curre;
@@ -100,7 +100,7 @@ export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
    * API METHODS
    */
   var setRowSelectionModel = React.useCallback(function (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'));
     }
     var currentModel = gridRowSelectionStateSelector(apiRef.current.state);
@@ -113,7 +113,7 @@ export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
       });
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, logger, props.rowSelection, props.signature, props.checkboxSelection]);
+  }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   var isRowSelected = React.useCallback(function (id) {
     return gridRowSelectionStateSelector(apiRef.current.state).includes(id);
   }, [apiRef]);
@@ -281,12 +281,12 @@ export var useGridRowSelection = function 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]);
   var preventSelectionOnShift = React.useCallback(function (params, event) {
     if (canHaveMultipleSelection && event.shiftKey) {
       var _window$getSelection;
@@ -294,12 +294,12 @@ export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
     }
   }, [canHaveMultipleSelection]);
   var handleRowSelectionCheckboxChange = React.useCallback(function (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]);
   var handleHeaderSelectionCheckboxChange = React.useCallback(function (params) {
     var shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
     var rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef);

package/legacy/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/legacy/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 var useGridAriaAttributes = function useGridAriaAttributes() {
   var _rootProps$experiment;
   var apiRef = useGridPrivateApiContext();
@@ -20,6 +21,6 @@ export var useGridAriaAttributes = function useGridAriaAttributes() {
     role: role,
     'aria-colcount': visibleColumns.length,
     'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
-    'aria-multiselectable': !rootProps.disableMultipleRowSelection
+    'aria-multiselectable': isMultipleRowSelectionEnabled(rootProps)
   };
 };

package/legacy/index.js

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