@mui/x-data-grid 5.12.3 → 5.14.0

package/legacy/colDef/gridStringOperators.js

@@ -13,6 +13,7 @@ export var getGridStringQuickFilterFn = function getGridStringQuickFilterFn(valu
   };
 };
 export var getGridStringOperators = function getGridStringOperators() {
+  var disableTrim = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return [{
     value: 'contains',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
@@ -20,7 +21,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
-      var filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
       return function (_ref2) {
         var value = _ref2.value;
         return value != null ? filterRegex.test(value.toString()) : false;
@@ -34,13 +36,14 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
       var collator = new Intl.Collator(undefined, {
         sensitivity: 'base',
         usage: 'search'
       });
       return function (_ref3) {
         var value = _ref3.value;
-        return value != null ? collator.compare(filterItem.value, value.toString()) === 0 : false;
+        return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
       };
     },
     InputComponent: GridFilterInputValue
@@ -51,7 +54,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
-      var filterRegex = new RegExp("^".concat(escapeRegExp(filterItem.value), ".*$"), 'i');
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var filterRegex = new RegExp("^".concat(escapeRegExp(filterItemValue), ".*$"), 'i');
       return function (_ref4) {
         var value = _ref4.value;
         return value != null ? filterRegex.test(value.toString()) : false;
@@ -65,7 +69,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
-      var filterRegex = new RegExp(".*".concat(escapeRegExp(filterItem.value), "$"), 'i');
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var filterRegex = new RegExp(".*".concat(escapeRegExp(filterItemValue), "$"), 'i');
       return function (_ref5) {
         var value = _ref5.value;
         return value != null ? filterRegex.test(value.toString()) : false;
@@ -79,7 +84,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         var value = _ref6.value;
         return value === '' || value == null;
       };
-    }
+    },
+    requiresFilterValue: false
   }, {
     value: 'isNotEmpty',
     getApplyFilterFn: function getApplyFilterFn() {
@@ -87,7 +93,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         var value = _ref7.value;
         return value !== '' && value != null;
       };
-    }
+    },
+    requiresFilterValue: false
   }, {
     value: 'isAnyOf',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
@@ -95,13 +102,16 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.map(function (val) {
+        return val.trim();
+      });
       var collator = new Intl.Collator(undefined, {
         sensitivity: 'base',
         usage: 'search'
       });
       return function (_ref8) {
         var value = _ref8.value;
-        return value != null ? filterItem.value.some(function (filterValue) {
+        return value != null ? filterItemValue.some(function (filterValue) {
           return collator.compare(filterValue, value.toString() || '') === 0;
         }) : false;
       };

package/legacy/components/GridRow.js

@@ -112,7 +112,7 @@ function GridRow(props) {
       // Fallback for IE
       apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
     }
-  });
+  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(function () {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the

package/legacy/components/base/GridOverlays.js

@@ -50,7 +50,10 @@ function GridOverlayWrapper(props) {
       width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0,
       position: 'absolute',
       top: headerHeight,
-      bottom: height === 'auto' ? 0 : undefined
+      bottom: height === 'auto' ? 0 : undefined,
+      zIndex: 3,
+      // should be above pinned columns and detail panel
+      pointerEvents: 'none'
     }
   }, props));
 }

package/legacy/components/cell/GridBooleanCell.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "getValue"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -16,7 +17,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export var GridBooleanCell = /*#__PURE__*/React.memo(function (props) {
+var GridBooleanCellRaw = function GridBooleanCellRaw(props) {
   var id = props.id,
       value = props.value,
       formattedValue = props.formattedValue,
@@ -47,7 +48,97 @@ export var GridBooleanCell = /*#__PURE__*/React.memo(function (props) {
     titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
     "data-value": Boolean(value)
   }, other));
-});
+};
+
+process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
+   */
+  api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
+} : void 0;
+var GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+export { GridBooleanCell };
 export var renderBooleanCell = function renderBooleanCell(params) {
   if (params.rowNode.isAutoGenerated) {
     return '';

package/legacy/components/cell/GridEditDateCell.js

@@ -9,10 +9,14 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import InputBase from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+var StyledInputBase = styled(InputBase)({
+  fontSize: 'inherit'
+});
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -153,7 +157,7 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(StyledInputBase, _extends({
     inputRef: inputRef,
     fullWidth: true,
     className: classes.root,

package/legacy/components/cell/index.js

@@ -1,4 +1,5 @@
 export * from './GridCell';
+export * from './GridBooleanCell';
 export * from './GridEditBooleanCell';
 export * from './GridEditDateCell';
 export * from './GridEditInputCell';

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -81,7 +81,12 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
       apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   }, [apiRef, props]);
-  var isSelectable = !rootProps.isRowSelectable || rootProps.isRowSelectable(apiRef.current.getRowParams(id));
+
+  if (rowNode.position === 'footer') {
+    return null;
+  }
+
+  var isSelectable = apiRef.current.isRowSelectable(id);
   var label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
     ref: handleRef,

package/legacy/components/containers/GridRootStyles.js

@@ -6,13 +6,13 @@ export var GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
-    return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
+    return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
     _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
-})(function (_ref46) {
+})(function (_ref51) {
   var _$concat2, _$concat3, _extends2;
 
-  var theme = _ref46.theme;
+  var theme = _ref51.theme;
   var borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
 
   var gridStyle = _extends({

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
+var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+    _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -164,6 +165,10 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
   var baseSelectProps = ((_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect) || {};
   var isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
+
+  var InputComponentProps = valueInputProps.InputComponentProps,
+      valueInputPropsOther = _objectWithoutProperties(valueInputProps, _excluded2);
+
   var sortedFilterableColumns = React.useMemo(function () {
     switch (columnsSort) {
       case 'asc':
@@ -352,14 +357,14 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
     })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl
-    }, baseFormControlProps, valueInputProps, {
-      className: clsx(classes.valueInput, baseFormControlProps.className, valueInputProps.className),
+    }, baseFormControlProps, valueInputPropsOther, {
+      className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
       children: currentOperator != null && currentOperator.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef
-      }, currentOperator.InputComponentProps)) : null
+      }, currentOperator.InputComponentProps, InputComponentProps)) : null
     }))]
   }));
 });

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

@@ -39,8 +39,8 @@ export function GridFilterInputBoolean(props) {
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     value: filterValueState,
     onChange: onFilterChange,
-    variant: "standard",
     select: true,
+    variant: "standard",
     SelectProps: _extends({
       native: isSelectNative,
       displayEmpty: true

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

@@ -64,8 +64,8 @@ function GridFilterInputDate(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -85,7 +85,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

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

@@ -2,14 +2,14 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+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 Chip from '@mui/material/Chip';
-import TextField from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/material/utils';
 import { getValueFromOption } from './filterPanelUtils';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var isOptionEqualToValue = function isOptionEqualToValue(option, value) {
@@ -24,9 +24,23 @@ function GridFilterInputMultipleSingleSelect(props) {
       type = props.type,
       apiRef = props.apiRef,
       focusElementRef = props.focusElementRef,
+      color = props.color,
+      error = props.error,
+      helperText = props.helperText,
+      size = props.size,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'standard' : _props$variant,
       other = _objectWithoutProperties(props, _excluded);
 
+  var TextFieldProps = {
+    color: color,
+    error: error,
+    helperText: helperText,
+    size: size,
+    variant: variant
+  };
   var id = useId();
+  var rootProps = useGridRootProps();
   var resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   var resolvedValueOptions = React.useMemo(function () {
     if (!(resolvedColumn != null && resolvedColumn.valueOptions)) {
@@ -70,7 +84,7 @@ function GridFilterInputMultipleSingleSelect(props) {
 
     if (resolvedValueOptions !== undefined) {
       var itemValueIndexes = item.value.map(function (element) {
-        // get the index matching between values and valueoptions
+        // get the index matching between values and valueOptions
         var formattedElement = getValueFromOption(element);
         var index = (resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(function (formatedOption) {
           return formatedOption === formattedElement;
@@ -120,16 +134,17 @@ function GridFilterInputMultipleSingleSelect(props) {
       });
     },
     renderInput: function renderInput(params) {
-      return /*#__PURE__*/_jsx(TextField, _extends({}, params, {
+      var _rootProps$components;
+
+      return /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({}, params, {
         label: apiRef.current.getLocaleText('filterPanelInputLabel'),
         placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
         InputLabelProps: _extends({}, params.InputLabelProps, {
           shrink: true
         }),
         inputRef: focusElementRef,
-        type: 'singleSelect',
-        variant: "standard"
-      }));
+        type: "singleSelect"
+      }, TextFieldProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
     }
   }, other));
 }

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

@@ -2,13 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
 import Chip from '@mui/material/Chip';
-import TextField from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/material/utils';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function GridFilterInputMultipleValue(props) {
@@ -17,14 +17,28 @@ function GridFilterInputMultipleValue(props) {
       type = props.type,
       apiRef = props.apiRef,
       focusElementRef = props.focusElementRef,
+      color = props.color,
+      error = props.error,
+      helperText = props.helperText,
+      size = props.size,
+      variant = props.variant,
       other = _objectWithoutProperties(props, _excluded);
 
+  var TextFieldProps = {
+    color: color,
+    error: error,
+    helperText: helperText,
+    size: size,
+    variant: variant
+  };
+
   var _React$useState = React.useState(item.value || []),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       filterValueState = _React$useState2[0],
       setFilterValueState = _React$useState2[1];
 
   var id = useId();
+  var rootProps = useGridRootProps();
   React.useEffect(function () {
     var _item$value;
 
@@ -61,16 +75,17 @@ function GridFilterInputMultipleValue(props) {
       });
     },
     renderInput: function renderInput(params) {
-      return /*#__PURE__*/_jsx(TextField, _extends({}, params, {
+      var _rootProps$components;
+
+      return /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({}, params, {
         label: apiRef.current.getLocaleText('filterPanelInputLabel'),
         placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
         InputLabelProps: _extends({}, params.InputLabelProps, {
           shrink: true
         }),
         inputRef: focusElementRef,
-        type: type || 'text',
-        variant: "standard"
-      }));
+        type: type || 'text'
+      }, TextFieldProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
     }
   }, other));
 }
@@ -80,7 +95,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes =
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

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

@@ -57,6 +57,10 @@ function GridFilterInputSingleSelect(props) {
   var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   var currentValueOptions = React.useMemo(function () {
+    if (currentColumn === null) {
+      return undefined;
+    }
+
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
       field: currentColumn.field
     }) : currentColumn.valueOptions;
@@ -98,8 +102,8 @@ function GridFilterInputSingleSelect(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -118,7 +122,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

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

@@ -124,8 +124,8 @@ function GridFilterInputValue(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputProps: InputProps,
     InputLabelProps: {
       shrink: true
@@ -139,7 +139,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

package/legacy/components/toolbar/GridToolbarExport.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["csvOptions", "printOptions", "excelOptions"];
+var _excluded = ["hideMenu", "options"],
+    _excluded2 = ["hideMenu", "options"],
+    _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
@@ -9,27 +11,35 @@ import { GridToolbarExportContainer } from './GridToolbarExportContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var GridCsvExportMenuItem = function GridCsvExportMenuItem(props) {
   var apiRef = useGridApiContext();
+
   var hideMenu = props.hideMenu,
-      options = props.options;
-  return /*#__PURE__*/_jsx(MenuItem, {
+      options = props.options,
+      other = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: function onClick() {
       apiRef.current.exportDataAsCsv(options);
       hideMenu == null ? void 0 : hideMenu();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
-  });
+  }));
 };
 export var GridPrintExportMenuItem = function GridPrintExportMenuItem(props) {
   var apiRef = useGridApiContext();
+
   var hideMenu = props.hideMenu,
-      options = props.options;
-  return /*#__PURE__*/_jsx(MenuItem, {
+      options = props.options,
+      other = _objectWithoutProperties(props, _excluded2);
+
+  return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: function onClick() {
       apiRef.current.exportDataAsPrint(options);
       hideMenu == null ? void 0 : hideMenu();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportPrint')
-  });
+  }));
 };
 var GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   var _props$csvOptions = props.csvOptions,
@@ -37,7 +47,7 @@ var GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport
       _props$printOptions = props.printOptions,
       printOptions = _props$printOptions === void 0 ? {} : _props$printOptions,
       excelOptions = props.excelOptions,
-      other = _objectWithoutProperties(props, _excluded);
+      other = _objectWithoutProperties(props, _excluded3);
 
   var apiRef = useGridApiContext();
   var preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {