@mui/x-data-grid 5.7.0 → 5.10.0

package/node/components/cell/GridEditSingleSelectCell.js

@@ -28,6 +28,8 @@ var _gridEditRowModel = require("../../models/gridEditRowModel");
 
 var _gridEvents = require("../../models/events/gridEvents");
 
+var _filterPanelUtils = require("../panel/filterPanel/filterPanelUtils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
@@ -36,16 +38,19 @@ 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 renderSingleSelectOptions = option => typeof option === 'object' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-  value: option.value,
-  children: option.label
-}, option.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-  value: option,
-  children: option
-}, option);
+const renderSingleSelectOptions = (option, OptionComponent) => {
+  const isOptionTypeObject = typeof option === 'object';
+  const key = isOptionTypeObject ? option.value : option;
+  const value = isOptionTypeObject ? option.value : option;
+  const content = isOptionTypeObject ? option.label : option;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+    value: value,
+    children: content
+  }, key);
+};
 
 function GridEditSingleSelectCell(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
 
   const {
     id,
@@ -62,6 +67,8 @@ function GridEditSingleSelectCell(props) {
   const inputRef = React.useRef();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const [open, setOpen] = React.useState(rootProps.editMode === 'cell');
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
   let valueOptionsFormatted;
 
   if (typeof colDef.valueOptions === 'function') {
@@ -96,11 +103,13 @@ function GridEditSingleSelectCell(props) {
     var _rootProps$experiment;
 
     setOpen(false);
-    const target = event.target;
+    const target = event.target; // NativeSelect casts the value to a string.
+
+    const formattedTargetValue = (0, _filterPanelUtils.getValueFromValueOptions)(target.value, valueOptionsFormatted);
     const isValid = await api.setEditCellValue({
       id,
       field,
-      value: target.value
+      value: formattedTargetValue
     }, event);
 
     if ((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi) {
@@ -169,9 +178,10 @@ function GridEditSingleSelectCell(props) {
       onClose: handleClose
     },
     error: error,
+    native: isSelectNative,
     fullWidth: true
-  }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect, {
-    children: valueOptionsFormatted.map(renderSingleSelectOptions)
+  }, other, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
+    children: valueOptionsFormatted.map(valueOptions => renderSingleSelectOptions(valueOptions, isSelectNative ? 'option' : _MenuItem.default))
   }));
 }
 
@@ -205,13 +215,13 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: _propTypes.default.any.isRequired,
+  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 {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: _propTypes.default.func.isRequired,
@@ -236,7 +246,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.any.isRequired,
+  row: _propTypes.default.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/columnHeaders/{ColumnHeaderFilterIcon.js → GridColumnHeaderFilterIconButton.js}

@@ -5,12 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColumnHeaderFilterIcon = ColumnHeaderFilterIcon;
+exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButton;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _material = require("@mui/material");
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -45,11 +47,13 @@ const useUtilityClasses = ownerState => {
   return (0, _material.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 
-function ColumnHeaderFilterIcon(props) {
+function GridColumnHeaderFilterIconButton(props) {
   var _rootProps$components;
 
   const {
-    counter
+    counter,
+    field,
+    onClick
   } = props;
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -70,7 +74,11 @@ function ColumnHeaderFilterIcon(props) {
     } else {
       apiRef.current.showFilterPanel();
     }
-  }, [apiRef]);
+
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick]);
 
   if (!counter) {
     return null;
@@ -99,4 +107,14 @@ function ColumnHeaderFilterIcon(props) {
       }), counter === 1 && iconButton]
     })
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: _propTypes.default.number,
+  field: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func
+} : void 0;

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -31,8 +31,6 @@ var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
 
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 
-var _ColumnHeaderFilterIcon = require("./ColumnHeaderFilterIcon");
-
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
 
 var _gridClasses = require("../../constants/gridClasses");
@@ -68,7 +66,7 @@ const useUtilityClasses = ownerState => {
 };
 
 function GridColumnHeaderItem(props) {
-  var _apiRef$current$getRo, _column$sortingOrder, _column$headerName, _rootProps$components;
+  var _apiRef$current$getRo, _column$sortingOrder, _rootProps$components, _column$headerName, _rootProps$components2;
 
   const {
     column,
@@ -167,9 +165,10 @@ function GridColumnHeaderItem(props) {
   });
   const sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
   const columnTitleIconButtons = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnHeaderFilterIcon.ColumnHeaderFilterIcon, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnHeaderFilterIconButton, (0, _extends2.default)({
+      field: column.field,
       counter: filterItemsCounter
-    }), column.sortable && !column.hideSortIcons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -180,14 +179,11 @@ function GridColumnHeaderItem(props) {
 
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
-
-      if (focusableElement) {
-        focusableElement.focus();
-      } else {
-        headerCellRef.current.focus();
-      }
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
     }
-  });
+  }, [apiRef, hasFocus]);
   const headerClassName = typeof column.headerClassName === 'function' ? column.headerClassName({
     field: column.field,
     colDef: column
@@ -234,7 +230,7 @@ function GridColumnHeaderItem(props) {
       open: columnMenuOpen,
       target: iconButtonRef.current,
       ContentComponent: rootProps.components.ColumnMenu,
-      contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+      contentComponentProps: (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnMenu,
       onExited: handleExited
     })]
   }));

package/node/components/columnHeaders/GridColumnHeaders.js

@@ -25,7 +25,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["innerRef", "className"];
+const _excluded = ["className"];
 
 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); }
 

package/node/components/columnHeaders/index.js

@@ -43,6 +43,19 @@ Object.keys(_GridColumnHeaderSortIcon).forEach(function (key) {
   });
 });
 
+var _GridColumnHeaderFilterIconButton = require("./GridColumnHeaderFilterIconButton");
+
+Object.keys(_GridColumnHeaderFilterIconButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnHeaderFilterIconButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnHeaderFilterIconButton[key];
+    }
+  });
+});
+
 var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
 
 Object.keys(_GridColumnHeaderTitle).forEach(function (key) {

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -31,7 +31,7 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue"];
+const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue", "api"];
 
 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); }
 
@@ -126,6 +126,12 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // | 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.
    */
@@ -141,16 +147,27 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    */
   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.isRequired,
+  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 {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: _propTypes.default.func.isRequired,
@@ -173,7 +190,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.any.isRequired,
+  row: _propTypes.default.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.
@@ -188,7 +205,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: _propTypes.default.any.isRequired
+  value: _propTypes.default.any
 } : void 0;
 const GridCellCheckboxRenderer = /*#__PURE__*/React.memo(GridCellCheckboxForwardRef);
 exports.GridCellCheckboxRenderer = GridCellCheckboxRenderer;

package/node/components/containers/GridRoot.js

@@ -19,8 +19,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/material/utils");
 
-var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
-
 var _GridRootStyles = require("./GridRootStyles");
 
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
@@ -57,21 +55,34 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = (0, _utils.useForkRef)(rootContainerRef, ref);
-  apiRef.current.rootElementRef = rootContainerRef;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
-      ref: handleRef,
-      className: (0, _clsx.default)(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, _gridClasses.gridClasses.root, rootProps.autoHeight && _gridClasses.gridClasses.autoHeight),
-      role: "grid",
-      "aria-colcount": visibleColumns.length,
-      "aria-rowcount": totalRowCount,
-      "aria-multiselectable": !rootProps.disableMultipleSelection,
-      "aria-label": rootProps['aria-label'],
-      "aria-labelledby": rootProps['aria-labelledby']
-    }, other, {
-      children: children
-    }))
-  });
+  apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
+
+  const [mountedState, setMountedState] = React.useState(false);
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    setMountedState(true);
+  }, []);
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (mountedState) {
+      apiRef.current.unstable_updateGridDimensionsRef();
+    }
+  }, [apiRef, mountedState]);
+
+  if (!mountedState) {
+    return null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
+    ref: handleRef,
+    className: (0, _clsx.default)(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, _gridClasses.gridClasses.root, rootProps.autoHeight && _gridClasses.gridClasses.autoHeight),
+    role: "grid",
+    "aria-colcount": visibleColumns.length,
+    "aria-rowcount": totalRowCount,
+    "aria-multiselectable": !rootProps.disableMultipleSelection,
+    "aria-label": rootProps['aria-label'],
+    "aria-labelledby": rootProps['aria-labelledby']
+  }, other, {
+    children: children
+  }));
 });
 exports.GridRoot = GridRoot;
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {

package/node/components/containers/GridRootStyles.js

@@ -85,8 +85,16 @@ const GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['row--editable']}`]: styles['row--editable']
   }, {
     [`& .${_gridClasses.gridClasses['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--dragging']}`]: styles['row--dragging']
   }, {
     [`& .${_gridClasses.gridClasses.row}`]: styles.row
+  }, {
+    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+  }, {
+    [`& .${_gridClasses.gridClasses.rowReorderCell}`]: styles.rowReorderCell
+  }, {
+    [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
   }, {
     [`& .${_gridClasses.gridClasses.sortIcon}`]: styles.sortIcon
   }, {
@@ -320,6 +328,21 @@ const GridRootStyles = (0, _styles.styled)('div', {
       alignItems: 'center',
       gridGap: theme.spacing(1)
     },
+    [`& .${_gridClasses.gridClasses.rowReorderCell}`]: {
+      display: 'inline-flex',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: theme.palette.action.disabledOpacity
+    },
+    [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: {
+      cursor: 'move',
+      opacity: 1
+    },
+    [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: {
+      padding: 0,
+      alignItems: 'stretch'
+    },
     [`& .${_gridClasses.gridClasses.withBorder}`]: {
       borderRight: `1px solid ${borderColor}`
     },
@@ -336,12 +359,24 @@ const GridRootStyles = (0, _styles.styled)('div', {
       display: 'flex',
       width: '100%'
     },
-    [`& .${_gridClasses.gridClasses['columnHeader--dragging']}`]: {
+    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
+      display: 'none'
+    },
+    [`& .${_gridClasses.gridClasses['columnHeader--dragging']}, & .${_gridClasses.gridClasses['row--dragging']}`]: {
       background: theme.palette.background.paper,
       padding: '0 12px',
       borderRadius: theme.shape.borderRadius,
       opacity: theme.palette.action.disabledOpacity
     },
+    [`& .${_gridClasses.gridClasses['row--dragging']}`]: {
+      background: theme.palette.background.paper,
+      padding: '0 12px',
+      borderRadius: theme.shape.borderRadius,
+      opacity: theme.palette.action.disabledOpacity,
+      [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
+        display: 'flex'
+      }
+    },
     [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: {
       display: 'flex',
       alignItems: 'center',

package/node/components/menu/GridMenu.js

@@ -122,6 +122,7 @@ const GridMenu = props => {
       placement
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
       onClickAway: onClickAway,
+      mouseEvent: "onMouseDown",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grow.default, (0, _extends2.default)({}, TransitionProps, {
         style: {
           transformOrigin: transformOrigin[placement]

package/node/components/menu/columnMenu/GridColumnMenu.js

@@ -53,7 +53,7 @@ const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(pro
     onClick: hideMenu,
     column: currentColumn
   })];
-  const preProcessedButtons = apiRef.current.unstable_applyPreProcessors('columnMenu', defaultButtons, currentColumn);
+  const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('columnMenu', defaultButtons, currentColumn);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuContainer.GridColumnMenuContainer, (0, _extends2.default)({
     ref: ref
   }, props, {

package/node/components/panel/GridPanel.js

@@ -109,6 +109,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     modifiers: modifiers
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
+      mouseEvent: "onMouseUp",
       onClickAway: handleClickAway,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaperRoot, {
         className: classes.paper,

package/node/components/panel/GridPreferencesPanel.js

@@ -36,7 +36,7 @@ const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferen
   const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const preferencePanelState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
-  const panelContent = apiRef.current.unstable_applyPreProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : _gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
+  const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : _gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Panel, (0, _extends2.default)({
     ref: ref,
     as: rootProps.components.BasePopper,

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

@@ -17,6 +17,8 @@ var _material = require("@mui/material");
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
@@ -131,7 +133,7 @@ const getColumnLabel = col => col.headerName || col.field;
 const collator = new Intl.Collator();
 
 function GridFilterForm(props) {
-  var _rootProps$components, _rootProps$components2, _rootProps$components3, _rootProps$components4, _currentColumn$filter2;
+  var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _currentColumn$filter2;
 
   const {
     item,
@@ -166,6 +168,9 @@ function GridFilterForm(props) {
   const filterSelectorRef = React.useRef(null);
   const hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
   const baseFormControlProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseFormControl) || {};
+  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 sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -279,9 +284,9 @@ function GridFilterForm(props) {
         value: multiFilterOperator,
         onChange: changeLinkOperator,
         disabled: !!disableMultiFilterOperator || linkOperators.length === 1,
-        native: true
-      }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
-        children: linkOperators.map(linkOperator => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        native: isBaseSelectNative
+      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
+        children: linkOperators.map(linkOperator => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: linkOperator.toString(),
           children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
         }, linkOperator.toString()))
@@ -301,9 +306,9 @@ function GridFilterForm(props) {
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: item.columnField || '',
         onChange: changeColumn,
-        native: true
-      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
-        children: sortedFilterableColumns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        native: isBaseSelectNative
+      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
+        children: sortedFilterableColumns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -323,10 +328,10 @@ function GridFilterForm(props) {
         id: operatorSelectId,
         value: item.operatorValue,
         onChange: changeOperator,
-        native: true,
+        native: isBaseSelectNative,
         inputRef: filterSelectorRef
-      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
-        children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+      }, (_rootProps$components5 = rootProps.componentsProps) == null ? void 0 : _rootProps$components5.baseSelect, {
+        children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: operator.value,
           children: operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.capitalize)(operator.value)}`)
         }, operator.value))

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

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,7 +26,7 @@ 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; }
 
 function GridFilterInputBoolean(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   const {
     item,
@@ -35,6 +37,9 @@ function GridFilterInputBoolean(props) {
         others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  const OptionComponent = isSelectNative ? 'option' : _MenuItem.default;
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -51,21 +56,22 @@ function GridFilterInputBoolean(props) {
     onChange: onFilterChange,
     variant: "standard",
     select: true,
-    SelectProps: {
-      native: true
-    },
+    SelectProps: (0, _extends2.default)({
+      native: isSelectNative,
+      displayEmpty: true
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
-  }, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
     })]