@mui/x-data-grid 5.12.1 → 5.13.0

package/modern/colDef/gridStringOperators.js

@@ -13,14 +13,15 @@ export const getGridStringQuickFilterFn = value => {
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
 };
-export const getGridStringOperators = () => [{
+export const getGridStringOperators = (disableTrim = false) => [{
   value: 'contains',
   getApplyFilterFn: filterItem => {
     if (!filterItem.value) {
       return null;
     }
 
-    const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
     return ({
       value
     }) => {
@@ -35,6 +36,7 @@ export const getGridStringOperators = () => [{
       return null;
     }
 
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const collator = new Intl.Collator(undefined, {
       sensitivity: 'base',
       usage: 'search'
@@ -42,7 +44,7 @@ export const getGridStringOperators = () => [{
     return ({
       value
     }) => {
-      return value != null ? collator.compare(filterItem.value, value.toString()) === 0 : false;
+      return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
     };
   },
   InputComponent: GridFilterInputValue
@@ -53,7 +55,8 @@ export const getGridStringOperators = () => [{
       return null;
     }
 
-    const filterRegex = new RegExp(`^${escapeRegExp(filterItem.value)}.*$`, 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`^${escapeRegExp(filterItemValue)}.*$`, 'i');
     return ({
       value
     }) => {
@@ -68,7 +71,8 @@ export const getGridStringOperators = () => [{
       return null;
     }
 
-    const filterRegex = new RegExp(`.*${escapeRegExp(filterItem.value)}$`, 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`.*${escapeRegExp(filterItemValue)}$`, 'i');
     return ({
       value
     }) => {
@@ -101,13 +105,14 @@ export const getGridStringOperators = () => [{
       return null;
     }
 
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.map(val => val.trim());
     const collator = new Intl.Collator(undefined, {
       sensitivity: 'base',
       usage: 'search'
     });
     return ({
       value
-    }) => value != null ? filterItem.value.some(filterValue => {
+    }) => value != null ? filterItemValue.some(filterValue => {
       return collator.compare(filterValue, value.toString() || '') === 0;
     }) : false;
   },

package/modern/components/GridRow.js

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

package/modern/components/cell/GridBooleanCell.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 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";
 
 const useUtilityClasses = ownerState => {
@@ -19,11 +20,11 @@ const useUtilityClasses = ownerState => {
 
 export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
   const {
-    value,
-    api
+    value
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const ownerState = {
     classes: rootProps.classes
@@ -33,7 +34,7 @@ export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/_jsx(Icon, _extends({
     fontSize: "small",
     className: classes.root,
-    titleAccess: api.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
     "data-value": Boolean(value)
   }, other));
 });

package/modern/components/cell/GridEditBooleanCell.js

@@ -8,6 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 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";
 
 const useUtilityClasses = ownerState => {
@@ -24,7 +25,6 @@ function GridEditBooleanCell(props) {
   const {
     id: idProp,
     value,
-    api,
     field,
     className,
     hasFocus,
@@ -32,6 +32,7 @@ function GridEditBooleanCell(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const inputRef = React.useRef(null);
   const id = useId();
   const [valueState, setValueState] = React.useState(value);
@@ -48,12 +49,12 @@ function GridEditBooleanCell(props) {
     }
 
     setValueState(newValue);
-    await api.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
-  }, [api, field, idProp, onValueChange]);
+  }, [apiRef, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);

package/modern/components/cell/GridEditDateCell.js

@@ -8,6 +8,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/u
 import InputBase from '@mui/material/InputBase';
 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";
 
 const useUtilityClasses = ownerState => {
@@ -24,7 +25,6 @@ function GridEditDateCell(props) {
   const {
     id,
     value: valueProp,
-    api,
     field,
     colDef,
     hasFocus,
@@ -34,6 +34,7 @@ function GridEditDateCell(props) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const isDateTime = colDef.type === 'dateTime';
+  const apiRef = useGridApiContext();
   const inputRef = React.useRef();
   const valueTransformed = React.useMemo(() => {
     let parsedDate;
@@ -93,12 +94,12 @@ function GridEditDateCell(props) {
       parsed: newParsedDate,
       formatted: newFormattedDate
     });
-    api.setEditCellValue({
+    apiRef.current.setEditCellValue({
       id,
       field,
       value: newParsedDate
     }, event);
-  }, [api, field, id, onValueChange]);
+  }, [apiRef, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(state => {
       if (valueTransformed.parsed !== state.parsed && valueTransformed.parsed?.getTime() !== state.parsed?.getTime()) {

package/modern/components/cell/GridEditInputCell.js

@@ -11,6 +11,7 @@ import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridLoadIcon } from '../icons/index';
 import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -43,7 +44,6 @@ function GridEditInputCell(props) {
   const {
     id,
     value,
-    api,
     field,
     colDef,
     hasFocus,
@@ -53,6 +53,7 @@ function GridEditInputCell(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const inputRef = React.useRef();
   const [valueState, setValueState] = React.useState(value);
   const ownerState = {
@@ -67,13 +68,13 @@ function GridEditInputCell(props) {
     }
 
     setValueState(newValue);
-    api.setEditCellValue({
+    apiRef.current.setEditCellValue({
       id,
       field,
       value: newValue,
       debounceMs
     }, event);
-  }, [api, debounceMs, field, id, onValueChange]);
+  }, [apiRef, debounceMs, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -9,6 +9,7 @@ import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const renderSingleSelectOptions = (option, OptionComponent) => {
@@ -36,6 +37,7 @@ function GridEditSingleSelectCell(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const ref = React.useRef();
   const inputRef = React.useRef();
   const rootProps = useGridRootProps();
@@ -82,7 +84,7 @@ function GridEditSingleSelectCell(props) {
       await onValueChange(event, formattedTargetValue);
     }
 
-    const isValid = await api.setEditCellValue({
+    const isValid = await apiRef.current.setEditCellValue({
       id,
       field,
       value: formattedTargetValue
@@ -97,18 +99,18 @@ function GridEditSingleSelectCell(props) {
       return;
     }
 
-    const canCommit = await Promise.resolve(api.commitCellChange({
+    const canCommit = await Promise.resolve(apiRef.current.commitCellChange({
       id,
       field
     }, event));
 
     if (canCommit) {
-      api.setCellMode(id, field, 'view');
+      apiRef.current.setCellMode(id, field, 'view');
 
       if (event.key) {
         // TODO v6: remove once we stop ignoring events fired from portals
-        const params = api.getCellParams(id, field);
-        api.publishEvent('cellNavigationKeyDown', params, event);
+        const params = apiRef.current.getCellParams(id, field);
+        apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
       }
     }
   };
@@ -121,13 +123,13 @@ function GridEditSingleSelectCell(props) {
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
       if (rootProps.experimentalFeatures?.newEditingApi) {
-        api.stopCellEditMode({
+        apiRef.current.stopCellEditMode({
           id,
           field,
           ignoreModifications: true
         });
       } else {
-        api.setCellMode(id, field, 'view');
+        apiRef.current.setCellMode(id, field, 'view');
       }
     }
   };

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -165,6 +165,7 @@ function GridColumnHeaderItem(props) {
     field: column.field,
     colDef: column
   }) : column.headerClassName;
+  const label = column.headerName ?? column.field;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: headerCellRef,
     className: clsx(classes.root, headerClassName),
@@ -177,7 +178,8 @@ function GridColumnHeaderItem(props) {
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort
+    "aria-sort": ariaSort,
+    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
   }, mouseEventsHandlers, {
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
@@ -187,8 +189,8 @@ function GridColumnHeaderItem(props) {
         className: classes.titleContainer,
         children: [/*#__PURE__*/_jsx("div", {
           className: classes.titleContainerContent,
-          children: headerComponent || /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
-            label: column.headerName ?? column.field,
+          children: column.renderHeader ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: label,
             description: column.description,
             columnWidth: width
           })

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -81,7 +81,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -109,7 +109,6 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/modern/components/containers/GridRootStyles.js

@@ -165,7 +165,7 @@ export const GridRootStyles = styled('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflowX: 'hidden'
     },
     [`& .${gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',

package/modern/components/panel/GridColumnsPanel.js

@@ -79,7 +79,7 @@ export function GridColumnsPanel(props) {
         return apiRef.current.setColumnVisibilityModel({});
       }
 
-      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(col => [col.field, false])));
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(col => col.hideable !== false).map(col => [col.field, false])));
     } // TODO v6: Remove
 
 
@@ -130,7 +130,6 @@ export function GridColumnsPanel(props) {
               checked: columnVisibilityModel[column.field] !== false,
               onClick: toggleColumn,
               name: column.field,
-              color: "primary",
               size: "small"
             }, rootProps.componentsProps?.baseSwitch)),
             label: column.headerName || column.field
@@ -146,13 +145,11 @@ export function GridColumnsPanel(props) {
       })
     }), /*#__PURE__*/_jsxs(GridPanelFooter, {
       children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
-        onClick: () => toggleAllColumns(false),
-        color: "primary"
+        onClick: () => toggleAllColumns(false)
       }, rootProps.componentsProps?.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
-        onClick: () => toggleAllColumns(true),
-        color: "primary"
+        onClick: () => toggleAllColumns(true)
       }, rootProps.componentsProps?.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
+const _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';
@@ -143,6 +144,12 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? true;
   const OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
+
+  const {
+    InputComponentProps
+  } = valueInputProps,
+        valueInputPropsOther = _objectWithoutPropertiesLoose(valueInputProps, _excluded2);
+
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -309,14 +316,14 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     })), /*#__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?.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef
-      }, currentOperator.InputComponentProps)) : null
+      }, currentOperator.InputComponentProps, InputComponentProps)) : null
     }))]
   }));
 });

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

@@ -34,8 +34,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/modern/components/panel/filterPanel/GridFilterInputDate.js

@@ -52,8 +52,8 @@ function GridFilterInputDate(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -73,7 +73,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/modern/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _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";
 
 const isOptionEqualToValue = (option, value) => getValueFromOption(option) === getValueFromOption(value);
@@ -19,16 +19,37 @@ function GridFilterInputMultipleSingleSelect(props) {
     item,
     applyValue,
     apiRef,
-    focusElementRef
+    focusElementRef,
+    color,
+    error,
+    helperText,
+    size,
+    variant = 'standard'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
   const id = useId();
+  const rootProps = useGridRootProps();
   const resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const resolvedValueOptions = React.useMemo(() => {
-    return typeof resolvedColumn?.valueOptions === 'function' ? resolvedColumn.valueOptions({
-      field: resolvedColumn.field
-    }) : resolvedColumn?.valueOptions;
+    if (!resolvedColumn?.valueOptions) {
+      return [];
+    }
+
+    if (typeof resolvedColumn.valueOptions === 'function') {
+      return resolvedColumn.valueOptions({
+        field: resolvedColumn.field
+      });
+    }
+
+    return resolvedColumn.valueOptions;
   }, [resolvedColumn]);
   const resolvedFormattedValueOptions = React.useMemo(() => {
     return resolvedValueOptions?.map(getValueFromOption);
@@ -59,7 +80,7 @@ function GridFilterInputMultipleSingleSelect(props) {
 
     if (resolvedValueOptions !== undefined) {
       const itemValueIndexes = item.value.map(element => {
-        // get the index matching between values and valueoptions
+        // get the index matching between values and valueOptions
         const formattedElement = getValueFromOption(element);
         const index = resolvedFormattedValueOptions?.findIndex(formatedOption => formatedOption === formattedElement) || 0;
         return index;
@@ -85,8 +106,7 @@ function GridFilterInputMultipleSingleSelect(props) {
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
     limitTags: 1,
-    options: resolvedValueOptions // TODO: avoid `any`?
-    ,
+    options: resolvedValueOptions,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
@@ -99,16 +119,15 @@ function GridFilterInputMultipleSingleSelect(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => /*#__PURE__*/_jsx(TextField, _extends({}, params, {
+    renderInput: params => /*#__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.componentsProps?.baseTextField))
   }, other));
 }
 

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

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _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) {
@@ -15,12 +15,25 @@ function GridFilterInputMultipleValue(props) {
     applyValue,
     type,
     apiRef,
-    focusElementRef
+    focusElementRef,
+    color,
+    error,
+    helperText,
+    size,
+    variant
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const id = useId();
+  const rootProps = useGridRootProps();
   React.useEffect(() => {
     const itemValue = item.value ?? [];
     setFilterValueState(itemValue.map(String));
@@ -52,16 +65,15 @@ function GridFilterInputMultipleValue(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => /*#__PURE__*/_jsx(TextField, _extends({}, params, {
+    renderInput: params => /*#__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.componentsProps?.baseTextField))
   }, other));
 }
 
@@ -70,7 +82,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/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -51,6 +51,10 @@ function GridFilterInputSingleSelect(props) {
   const isSelectNative = baseSelectProps.native ?? true;
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentValueOptions = React.useMemo(() => {
+    if (currentColumn === null) {
+      return undefined;
+    }
+
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
       field: currentColumn.field
     }) : currentColumn.valueOptions;
@@ -90,8 +94,8 @@ function GridFilterInputSingleSelect(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -110,7 +114,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 */