@mui/x-data-grid 5.12.3 → 5.14.0

package/node/colDef/gridStringOperators.js

@@ -26,14 +26,15 @@ const getGridStringQuickFilterFn = value => {
 
 exports.getGridStringQuickFilterFn = getGridStringQuickFilterFn;
 
-const getGridStringOperators = () => [{
+const getGridStringOperators = (disableTrim = false) => [{
   value: 'contains',
   getApplyFilterFn: filterItem => {
     if (!filterItem.value) {
       return null;
     }
 
-    const filterRegex = new RegExp((0, _utils.escapeRegExp)(filterItem.value), 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp((0, _utils.escapeRegExp)(filterItemValue), 'i');
     return ({
       value
     }) => {
@@ -48,6 +49,7 @@ const getGridStringOperators = () => [{
       return null;
     }
 
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const collator = new Intl.Collator(undefined, {
       sensitivity: 'base',
       usage: 'search'
@@ -55,7 +57,7 @@ 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.GridFilterInputValue
@@ -66,7 +68,8 @@ const getGridStringOperators = () => [{
       return null;
     }
 
-    const filterRegex = new RegExp(`^${(0, _utils.escapeRegExp)(filterItem.value)}.*$`, 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`^${(0, _utils.escapeRegExp)(filterItemValue)}.*$`, 'i');
     return ({
       value
     }) => {
@@ -81,7 +84,8 @@ const getGridStringOperators = () => [{
       return null;
     }
 
-    const filterRegex = new RegExp(`.*${(0, _utils.escapeRegExp)(filterItem.value)}$`, 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`.*${(0, _utils.escapeRegExp)(filterItemValue)}$`, 'i');
     return ({
       value
     }) => {
@@ -97,7 +101,8 @@ const getGridStringOperators = () => [{
     }) => {
       return value === '' || value == null;
     };
-  }
+  },
+  requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
   getApplyFilterFn: () => {
@@ -106,7 +111,8 @@ const getGridStringOperators = () => [{
     }) => {
       return value !== '' && value != null;
     };
-  }
+  },
+  requiresFilterValue: false
 }, {
   value: 'isAnyOf',
   getApplyFilterFn: filterItem => {
@@ -114,13 +120,14 @@ 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/node/components/GridRow.js

@@ -139,7 +139,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/node/components/base/GridOverlays.js

@@ -66,7 +66,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/node/components/cell/GridBooleanCell.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _material = require("@mui/material");
 
 var _gridClasses = require("../../constants/gridClasses");
@@ -39,7 +41,7 @@ const useUtilityClasses = ownerState => {
   return (0, _material.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 
-const GridBooleanCell = /*#__PURE__*/React.memo(props => {
+const GridBooleanCellRaw = props => {
   const {
     value
   } = props,
@@ -57,7 +59,96 @@ const GridBooleanCell = /*#__PURE__*/React.memo(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.default.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: _propTypes.default.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: _propTypes.default.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.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focus: _propTypes.default.func.isRequired
+    })
+  })]),
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: _propTypes.default.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.default.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: _propTypes.default.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: _propTypes.default.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: _propTypes.default.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: _propTypes.default.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: _propTypes.default.any
+} : void 0;
+const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 exports.GridBooleanCell = GridBooleanCell;
 
 const renderBooleanCell = params => {

package/node/components/cell/GridEditDateCell.js

@@ -22,6 +22,8 @@ var _utils = require("@mui/material/utils");
 
 var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
 
+var _styles = require("@mui/material/styles");
+
 var _gridClasses = require("../../constants/gridClasses");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -36,6 +38,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const StyledInputBase = (0, _styles.styled)(_InputBase.default)({
+  fontSize: 'inherit'
+});
+
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -140,7 +146,7 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInputBase, (0, _extends2.default)({
     inputRef: inputRef,
     fullWidth: true,
     className: classes.root,

package/node/components/cell/index.js

@@ -17,6 +17,19 @@ Object.keys(_GridCell).forEach(function (key) {
   });
 });
 
+var _GridBooleanCell = require("./GridBooleanCell");
+
+Object.keys(_GridBooleanCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridBooleanCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridBooleanCell[key];
+    }
+  });
+});
+
 var _GridEditBooleanCell = require("./GridEditBooleanCell");
 
 Object.keys(_GridEditBooleanCell).forEach(function (key) {

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -52,6 +52,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     field,
     id,
     value: isChecked,
+    rowNode,
     hasFocus,
     tabIndex
   } = props,
@@ -100,7 +101,12 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   }, [apiRef, props]);
-  const isSelectable = !rootProps.isRowSelectable || rootProps.isRowSelectable(apiRef.current.getRowParams(id));
+
+  if (rowNode.position === 'footer') {
+    return null;
+  }
+
+  const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseCheckbox, (0, _extends2.default)({
     ref: handleRef,

package/node/components/containers/GridRootStyles.js

@@ -18,6 +18,16 @@ const GridRootStyles = (0, _styles.styled)('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => [{
     [`&.${_gridClasses.gridClasses.autoHeight}`]: styles.autoHeight
+  }, {
+    [`&.${_gridClasses.gridClasses.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+  }, {
+    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+  }, {
+    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+  }, {
+    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+  }, {
+    [`&.${_gridClasses.gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
   }, {
     [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
   }, {

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

@@ -45,7 +45,8 @@ var _gridClasses = require("../../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -175,6 +176,10 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const baseSelectProps = ((_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect) || {};
   const isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   const OptionComponent = isBaseSelectNative ? 'option' : _MenuItem.default;
+  const {
+    InputComponentProps
+  } = valueInputProps,
+        valueInputPropsOther = (0, _objectWithoutPropertiesLoose2.default)(valueInputProps, _excluded2);
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -345,14 +350,14 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
       variant: "standard",
       as: rootProps.components.BaseFormControl
-    }, baseFormControlProps, valueInputProps, {
-      className: (0, _clsx.default)(classes.valueInput, baseFormControlProps.className, valueInputProps.className),
+    }, baseFormControlProps, valueInputPropsOther, {
+      className: (0, _clsx.default)(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
       children: currentOperator != null && currentOperator.InputComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(currentOperator.InputComponent, (0, _extends2.default)({
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef
-      }, currentOperator.InputComponentProps)) : null
+      }, currentOperator.InputComponentProps, InputComponentProps)) : null
     }))]
   }));
 });

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

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

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

@@ -79,8 +79,8 @@ function GridFilterInputDate(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -100,7 +100,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.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */

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

@@ -19,15 +19,15 @@ var _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"
 
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-
 var _utils = require("@mui/material/utils");
 
 var _filterPanelUtils = require("./filterPanelUtils");
 
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -42,10 +42,23 @@ function GridFilterInputMultipleSingleSelect(props) {
     item,
     applyValue,
     apiRef,
-    focusElementRef
+    focusElementRef,
+    color,
+    error,
+    helperText,
+    size,
+    variant = 'standard'
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
   const id = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const resolvedValueOptions = React.useMemo(() => {
     if (!(resolvedColumn != null && resolvedColumn.valueOptions)) {
@@ -89,7 +102,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 = (0, _filterPanelUtils.getValueFromOption)(element);
         const index = (resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(formatedOption => formatedOption === formattedElement)) || 0;
         return index;
@@ -128,16 +141,19 @@ function GridFilterInputMultipleSingleSelect(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, params, {
-      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-      InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
-        shrink: true
-      }),
-      inputRef: focusElementRef,
-      type: 'singleSelect',
-      variant: "standard"
-    }))
+    renderInput: params => {
+      var _rootProps$components;
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({}, params, {
+        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+        InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
+          shrink: true
+        }),
+        inputRef: focusElementRef,
+        type: "singleSelect"
+      }, TextFieldProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+    }
   }, other));
 }
 

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

@@ -19,13 +19,13 @@ var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete")
 
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-
 var _utils = require("@mui/material/utils");
 
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -37,11 +37,24 @@ function GridFilterInputMultipleValue(props) {
     applyValue,
     type,
     apiRef,
-    focusElementRef
+    focusElementRef,
+    color,
+    error,
+    helperText,
+    size,
+    variant
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const TextFieldProps = {
+    color,
+    error,
+    helperText,
+    size,
+    variant
+  };
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const id = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   React.useEffect(() => {
     var _item$value;
 
@@ -75,16 +88,19 @@ function GridFilterInputMultipleValue(props) {
     }, getTagProps({
       index
     })))),
-    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, params, {
-      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-      InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
-        shrink: true
-      }),
-      inputRef: focusElementRef,
-      type: type || 'text',
-      variant: "standard"
-    }))
+    renderInput: params => {
+      var _rootProps$components;
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({}, params, {
+        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+        InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
+          shrink: true
+        }),
+        inputRef: focusElementRef,
+        type: type || 'text'
+      }, TextFieldProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+    }
   }, other));
 }
 
@@ -93,7 +109,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.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */

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

@@ -74,6 +74,10 @@ function GridFilterInputSingleSelect(props) {
   const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : 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;
@@ -115,8 +119,8 @@ function GridFilterInputSingleSelect(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -135,7 +139,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.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */

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

@@ -141,8 +141,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
@@ -156,7 +156,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.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */