@mui/x-data-grid 5.6.1 → 5.9.0

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue"];
+var _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue", "api"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -35,6 +35,7 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
       hasFocus = props.hasFocus,
       tabIndex = props.tabIndex,
       getValue = props.getValue,
+      api = props.api,
       other = _objectWithoutProperties(props, _excluded);
 
   var apiRef = useGridApiContext();
@@ -104,6 +105,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.any.isRequired,
+
   /**
    * The mode of the cell.
    */
@@ -119,16 +126,27 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    */
   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.isRequired,
+  formattedValue: PropTypes.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.func.isRequired,
@@ -151,7 +169,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.
@@ -166,7 +184,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes.any
 } : void 0;
 export { GridCellCheckboxForwardRef };
 export var GridCellCheckboxRenderer = /*#__PURE__*/React.memo(GridCellCheckboxForwardRef);

package/legacy/components/containers/GridOverlay.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
@@ -34,7 +35,7 @@ var GridOverlayRoot = styled('div', {
     backgroundColor: alpha(theme.palette.background.default, theme.palette.action.disabledOpacity)
   };
 });
-export var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
   var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -47,4 +48,12 @@ export var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(prop
     ref: ref,
     className: clsx(classes.root, className)
   }, other));
-});
+});
+process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridOverlay };

package/legacy/components/containers/GridRoot.js

@@ -1,11 +1,11 @@
 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 = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useForkRef } from '@mui/material/utils';
-import NoSsr from '@mui/material/NoSsr';
+import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { GridRootStyles } from './GridRootStyles';
 import { gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -28,21 +28,38 @@ var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   var totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   var rootContainerRef = React.useRef(null);
   var handleRef = useForkRef(rootContainerRef, ref);
-  apiRef.current.rootElementRef = rootContainerRef;
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: /*#__PURE__*/_jsx(GridRootStyles, _extends({
-      ref: handleRef,
-      className: clsx(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, gridClasses.root, rootProps.autoHeight && 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 />
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      mountedState = _React$useState2[0],
+      setMountedState = _React$useState2[1];
+
+  useEnhancedEffect(function () {
+    setMountedState(true);
+  }, []);
+  useEnhancedEffect(function () {
+    if (mountedState) {
+      apiRef.current.unstable_updateGridDimensionsRef();
+    }
+  }, [apiRef, mountedState]);
+
+  if (!mountedState) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
+    ref: handleRef,
+    className: clsx(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, gridClasses.root, rootProps.autoHeight && 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
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/legacy/components/containers/GridRootStyles.js

@@ -30,9 +30,9 @@ export var GridRootStyles = styled('div', {
   }, _defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
     height: 'auto'
   }, "& .".concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
-    borderColor: 'transparent'
+    borderBottomColor: 'transparent'
   })), _defineProperty(_extends2, "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
-    borderColor: 'transparent'
+    borderBottomColor: 'transparent'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ", & .").concat(gridClasses.cell), {
     WebkitTapHighlightColor: 'transparent',
     lineHeight: null,

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

@@ -28,7 +28,7 @@ var GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props
     onClick: hideMenu,
     column: currentColumn
   })];
-  var preProcessedButtons = apiRef.current.unstable_applyPreProcessors('columnMenu', defaultButtons, currentColumn);
+  var preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('columnMenu', defaultButtons, currentColumn);
   return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, props, {

package/legacy/components/panel/GridColumnsPanel.js

@@ -60,7 +60,7 @@ var GridColumnsPanelRowRoot = styled('div', {
 var GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel() {
+export function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
   var apiRef = useGridApiContext();
@@ -114,7 +114,7 @@ export function GridColumnsPanel() {
   React.useEffect(function () {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, props, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -171,5 +171,5 @@ export function GridColumnsPanel() {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]
     })]
-  });
+  }));
 }

package/legacy/components/panel/GridPanel.js

@@ -97,6 +97,7 @@ var GridPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     modifiers: modifiers
   }, other, {
     children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      mouseEvent: "onMouseUp",
       onClickAway: handleClickAway,
       children: /*#__PURE__*/_jsx(GridPaperRoot, {
         className: classes.paper,

package/legacy/components/panel/GridPreferencesPanel.js

@@ -7,21 +7,19 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export var GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
-  var _rootProps$components, _rootProps$components2, _rootProps$components3, _rootProps$components4;
+  var _preferencePanelState, _rootProps$components, _rootProps$components2;
 
   var apiRef = useGridApiContext();
   var columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   var rootProps = useGridRootProps();
   var preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  var isColumnsTabOpen = preferencePanelState.openedPanelValue === GridPreferencePanelsValue.columns;
-  var isFiltersTabOpen = !preferencePanelState.openedPanelValue || !isColumnsTabOpen;
-  return /*#__PURE__*/_jsxs(rootProps.components.Panel, _extends({
+  var panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : GridPreferencePanelsValue.filters);
+  return /*#__PURE__*/_jsx(rootProps.components.Panel, _extends({
     ref: ref,
     as: rootProps.components.BasePopper,
     open: columns.length > 0 && preferencePanelState.open
   }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.panel, props, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.basePopper, {
-    children: [!rootProps.disableColumnSelector && isColumnsTabOpen && /*#__PURE__*/_jsx(rootProps.components.ColumnsPanel, _extends({}, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.columnsPanel)), !rootProps.disableColumnFilter && isFiltersTabOpen && /*#__PURE__*/_jsx(rootProps.components.FilterPanel, _extends({}, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.filterPanel))]
+    children: panelContent
   }));
 });

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import { capitalize, unstable_useId as useId } from '@mui/material/utils';
@@ -117,7 +118,7 @@ var getColumnLabel = function getColumnLabel(col) {
 var 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;
 
   var item = props.item,
       hasMultipleFilters = props.hasMultipleFilters,
@@ -156,6 +157,9 @@ function GridFilterForm(props) {
   var filterSelectorRef = React.useRef(null);
   var hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
   var baseFormControlProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseFormControl) || {};
+  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 sortedFilterableColumns = React.useMemo(function () {
     switch (columnsSort) {
       case 'asc':
@@ -281,10 +285,10 @@ function GridFilterForm(props) {
         value: multiFilterOperator,
         onChange: changeLinkOperator,
         disabled: !!disableMultiFilterOperator || linkOperators.length === 1,
-        native: true
-      }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
+        native: isBaseSelectNative
+      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
         children: linkOperators.map(function (linkOperator) {
-          return /*#__PURE__*/_jsx("option", {
+          return /*#__PURE__*/_jsx(OptionComponent, {
             value: linkOperator.toString(),
             children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
           }, linkOperator.toString());
@@ -305,10 +309,10 @@ 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, {
+        native: isBaseSelectNative
+      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
         children: sortedFilterableColumns.map(function (col) {
-          return /*#__PURE__*/_jsx("option", {
+          return /*#__PURE__*/_jsx(OptionComponent, {
             value: col.field,
             children: getColumnLabel(col)
           }, col.field);
@@ -329,11 +333,11 @@ 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, {
+      }, (_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(function (operator) {
-          return /*#__PURE__*/_jsx("option", {
+          return /*#__PURE__*/_jsx(OptionComponent, {
             value: operator.value,
             children: operator.label || apiRef.current.getLocaleText("filterOperator".concat(capitalize(operator.value)))
           }, operator.value);

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

@@ -3,11 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
 import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function GridFilterInputBoolean(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   var item = props.item,
       applyValue = props.applyValue,
@@ -21,6 +22,9 @@ export function GridFilterInputBoolean(props) {
       setFilterValueState = _React$useState2[1];
 
   var rootProps = useGridRootProps();
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var OptionComponent = isSelectNative ? 'option' : MenuItem;
   var onFilterChange = React.useCallback(function (event) {
     var value = event.target.value;
     setFilterValueState(value);
@@ -37,21 +41,22 @@ export function GridFilterInputBoolean(props) {
     onChange: onFilterChange,
     variant: "standard",
     select: true,
-    SelectProps: {
-      native: true
-    },
+    SelectProps: _extends({
+      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__*/_jsx("option", {
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: [/*#__PURE__*/_jsx(OptionComponent, {
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/_jsx("option", {
+    }), /*#__PURE__*/_jsx(OptionComponent, {
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/_jsx("option", {
+    }), /*#__PURE__*/_jsx(OptionComponent, {
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
     })]

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

@@ -7,11 +7,12 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
+import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
+var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api, OptionComponent) {
   var valueOptions = _ref.valueOptions,
       valueFormatter = _ref.valueFormatter,
       field = _ref.field;
@@ -19,22 +20,24 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
     field: field
   }))) : [''].concat(_toConsumableArray(valueOptions || []));
   return iterableColumnValues.map(function (option) {
-    return _typeof(option) === 'object' ? /*#__PURE__*/_jsx("option", {
-      value: option.value,
-      children: option.label
-    }, option.value) : /*#__PURE__*/_jsx("option", {
+    var isOptionTypeObject = _typeof(option) === 'object';
+    var key = isOptionTypeObject ? option.value : option;
+    var value = isOptionTypeObject ? option.value : option;
+    var formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
-      children: valueFormatter && option !== '' ? valueFormatter({
-        value: option,
-        field: field,
-        api: api
-      }) : option
-    }, option);
+      field: field,
+      api: api
+    }) : option;
+    var content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
   });
 };
 
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   var item = props.item,
       applyValue = props.applyValue,
@@ -50,6 +53,8 @@ function GridFilterInputSingleSelect(props) {
 
   var id = useId();
   var rootProps = useGridRootProps();
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  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 () {
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
@@ -100,11 +105,11 @@ function GridFilterInputSingleSelect(props) {
     },
     inputRef: focusElementRef,
     select: true,
-    SelectProps: {
-      native: true
-    }
-  }, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField, {
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: _extends({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect)
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   }));
 }
 

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

@@ -7,6 +7,7 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
+import MenuItem from '@mui/material/MenuItem';
 import { GridLoadIcon } from '../../icons';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
@@ -18,7 +19,7 @@ function warnDeprecatedTypeSupport(type) {
   warnedOnce[type] = true;
 }
 
-var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
+var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api, OptionComponent) {
   var valueOptions = _ref.valueOptions,
       valueFormatter = _ref.valueFormatter,
       field = _ref.field;
@@ -26,24 +27,26 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
     field: field
   }))) : [''].concat(_toConsumableArray(valueOptions || []));
   return iterableColumnValues.map(function (option) {
-    return _typeof(option) === 'object' ? /*#__PURE__*/_jsx("option", {
-      value: option.value,
-      children: option.label
-    }, option.value) : /*#__PURE__*/_jsx("option", {
+    var isOptionTypeObject = _typeof(option) === 'object';
+    var key = isOptionTypeObject ? option.value : option;
+    var value = isOptionTypeObject ? option.value : option;
+    var formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
-      children: valueFormatter && option !== '' ? valueFormatter({
-        value: option,
-        field: field,
-        api: api
-      }) : option
-    }, option);
+      field: field,
+      api: api
+    }) : option;
+    var content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
   });
 };
 
 export var SUBMIT_FILTER_STROKE_TIME = 500;
 
 function GridFilterInputValue(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   var item = props.item,
       applyValue = props.applyValue,
@@ -70,12 +73,14 @@ function GridFilterInputValue(props) {
 
   var id = useId();
   var rootProps = useGridRootProps();
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var singleSelectProps = type === 'singleSelect' ? {
     select: true,
-    SelectProps: {
-      native: true
-    },
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: _extends({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   } : {};
   var onFilterChange = React.useCallback(function (event) {
     var value = event.target.value; // NativeSelect casts the value to a string.
@@ -126,7 +131,7 @@ function GridFilterInputValue(props) {
       shrink: true
     },
     inputRef: focusElementRef
-  }, singleSelectProps, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+  }, singleSelectProps, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField));
 }
 
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -111,7 +111,7 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "menu",
-      "aria-labelledby": densityMenuId,
+      "aria-controls": densityMenuId,
       id: densityButtonId
     }, other, {
       onClick: handleDensitySelectorOpen

package/legacy/components/virtualization/GridVirtualScroller.js

@@ -25,6 +25,8 @@ var VirtualScrollerRoot = styled('div', {
   }
 })({
   overflow: 'auto',
+  // See https://github.com/mui/mui-x/issues/4360
+  position: 'relative',
   '@media print': {
     overflow: 'hidden'
   }

package/legacy/components/virtualization/GridVirtualScrollerContent.js

@@ -24,9 +24,7 @@ var VirtualScrollerContentRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.virtualScrollerContent;
   }
-})({
-  position: 'relative'
-});
+})({});
 var GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
   var className = props.className,
       style = props.style,

package/legacy/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridColumnHeaderFilterIconButton } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -49,6 +49,7 @@ export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON_S
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay: ErrorOverlay,
   Footer: GridFooter,

package/legacy/constants/gridDetailPanelToggleField.js

@@ -0,0 +1,2 @@
+// Can't import from pro package - hence duplication
+export var GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/legacy/hooks/core/pipeProcessing/index.js

@@ -0,0 +1,4 @@
+export * from './gridPipeProcessingApi';
+export * from './useGridPipeProcessing';
+export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeApplier';