@mui/x-data-grid 5.7.0 → 5.10.0

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 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 Badge from '@mui/material/Badge';
@@ -22,9 +23,11 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function ColumnHeaderFilterIcon(props) {
+function GridColumnHeaderFilterIconButton(props) {
   const {
-    counter
+    counter,
+    field,
+    onClick
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -47,7 +50,11 @@ export function ColumnHeaderFilterIcon(props) {
     } else {
       apiRef.current.showFilterPanel();
     }
-  }, [apiRef]);
+
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick]);
 
   if (!counter) {
     return null;
@@ -77,4 +84,15 @@ export 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.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnHeaderFilterIconButton };

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,7 +10,6 @@ import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
 import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
-import { ColumnHeaderFilterIcon } from './ColumnHeaderFilterIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -142,9 +141,10 @@ function GridColumnHeaderItem(props) {
   const sortingOrder = column.sortingOrder ?? rootProps.sortingOrder;
 
   const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(ColumnHeaderFilterIcon, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
+      field: column.field,
       counter: filterItemsCounter
-    }), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, rootProps.componentsProps?.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -156,14 +156,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?.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
     }
-  });
+  }, [apiRef, hasFocus]);
   const headerClassName = typeof column.headerClassName === 'function' ? column.headerClassName({
     field: column.field,
     colDef: column

package/modern/components/columnHeaders/GridColumnHeaders.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["innerRef", "className"];
+const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';

package/modern/components/columnHeaders/index.js

@@ -1,4 +1,5 @@
 export * from './GridColumnHeaderItem';
 export * from './GridColumnHeaderSeparator';
 export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
 export * from './GridColumnHeaderTitle';

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -97,6 +97,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.
    */
@@ -112,16 +118,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,
@@ -144,7 +161,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.
@@ -159,7 +176,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 const GridCellCheckboxRenderer = /*#__PURE__*/React.memo(GridCellCheckboxForwardRef);

package/modern/components/containers/GridRoot.js

@@ -4,8 +4,7 @@ const _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 +27,34 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
-  apiRef.current.rootElementRef = rootContainerRef;
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: /*#__PURE__*/_jsx(GridRootStyles, _extends({
-      ref: handleRef,
-      className: clsx(className, 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 />
+
+  const [mountedState, setMountedState] = React.useState(false);
+  useEnhancedEffect(() => {
+    setMountedState(true);
+  }, []);
+  useEnhancedEffect(() => {
+    if (mountedState) {
+      apiRef.current.unstable_updateGridDimensionsRef();
+    }
+  }, [apiRef, mountedState]);
+
+  if (!mountedState) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
+    ref: handleRef,
+    className: clsx(className, 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/modern/components/containers/GridRootStyles.js

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

package/modern/components/menu/GridMenu.js

@@ -93,6 +93,7 @@ const GridMenu = props => {
       placement
     }) => /*#__PURE__*/_jsx(ClickAwayListener, {
       onClickAway: onClickAway,
+      mouseEvent: "onMouseDown",
       children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
         style: {
           transformOrigin: transformOrigin[placement]

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

@@ -30,7 +30,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__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, props, {

package/modern/components/panel/GridPanel.js

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

package/modern/components/panel/GridPreferencesPanel.js

@@ -12,7 +12,7 @@ export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridP
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   const rootProps = useGridRootProps();
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  const panelContent = apiRef.current.unstable_applyPreProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
+  const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
   return /*#__PURE__*/_jsx(rootProps.components.Panel, _extends({
     ref: ref,
     as: rootProps.components.BasePopper,

package/modern/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';
@@ -136,6 +137,9 @@ function GridFilterForm(props) {
   const filterSelectorRef = React.useRef(null);
   const hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
   const baseFormControlProps = rootProps.componentsProps?.baseFormControl || {};
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isBaseSelectNative = baseSelectProps.native ?? true;
+  const OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -245,9 +249,9 @@ function GridFilterForm(props) {
         value: multiFilterOperator,
         onChange: changeLinkOperator,
         disabled: !!disableMultiFilterOperator || linkOperators.length === 1,
-        native: true
+        native: isBaseSelectNative
       }, rootProps.componentsProps?.baseSelect, {
-        children: linkOperators.map(linkOperator => /*#__PURE__*/_jsx("option", {
+        children: linkOperators.map(linkOperator => /*#__PURE__*/_jsx(OptionComponent, {
           value: linkOperator.toString(),
           children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
         }, linkOperator.toString()))
@@ -267,9 +271,9 @@ function GridFilterForm(props) {
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: item.columnField || '',
         onChange: changeColumn,
-        native: true
+        native: isBaseSelectNative
       }, rootProps.componentsProps?.baseSelect, {
-        children: sortedFilterableColumns.map(col => /*#__PURE__*/_jsx("option", {
+        children: sortedFilterableColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -289,10 +293,10 @@ function GridFilterForm(props) {
         id: operatorSelectId,
         value: item.operatorValue,
         onChange: changeOperator,
-        native: true,
+        native: isBaseSelectNative,
         inputRef: filterSelectorRef
       }, rootProps.componentsProps?.baseSelect, {
-        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_jsx("option", {
+        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_jsx(OptionComponent, {
           value: operator.value,
           children: operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)
         }, operator.value))

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _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";
@@ -16,6 +17,9 @@ export function GridFilterInputBoolean(props) {
 
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = useGridRootProps();
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
+  const OptionComponent = isSelectNative ? 'option' : MenuItem;
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -32,21 +36,22 @@ export function GridFilterInputBoolean(props) {
     onChange: onFilterChange,
     variant: "standard",
     select: true,
-    SelectProps: {
-      native: true
-    },
+    SelectProps: _extends({
+      native: isSelectNative,
+      displayEmpty: true
+    }, rootProps.componentsProps?.baseSelect),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
   }, others, rootProps.componentsProps?.baseTextField, {
-    children: [/*#__PURE__*/_jsx("option", {
+    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/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -4,6 +4,7 @@ const _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";
@@ -12,21 +13,25 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/_jsx("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/_jsx("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
+  });
 };
 
 function GridFilterInputSingleSelect(props) {
@@ -42,6 +47,8 @@ function GridFilterInputSingleSelect(props) {
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const id = useId();
   const rootProps = useGridRootProps();
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentValueOptions = React.useMemo(() => {
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
@@ -90,11 +97,11 @@ function GridFilterInputSingleSelect(props) {
     },
     inputRef: focusElementRef,
     select: true,
-    SelectProps: {
-      native: true
-    }
+    SelectProps: _extends({
+      native: isSelectNative
+    }, rootProps.componentsProps?.baseSelect)
   }, others, rootProps.componentsProps?.baseTextField, {
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   }));
 }
 

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

@@ -4,6 +4,7 @@ const _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';
@@ -19,21 +20,25 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/_jsx("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/_jsx("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
+  });
 };
 
 export const SUBMIT_FILTER_STROKE_TIME = 500;
@@ -57,12 +62,14 @@ function GridFilterInputValue(props) {
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
   const singleSelectProps = type === 'singleSelect' ? {
     select: true,
-    SelectProps: {
-      native: true
-    },
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: _extends({
+      native: isSelectNative
+    }, rootProps.componentsProps?.baseSelect),
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   } : {};
   const onFilterChange = React.useCallback(event => {
     let value = event.target.value; // NativeSelect casts the value to a string.

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -99,7 +99,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
       "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/modern/components/virtualization/GridVirtualScroller.js

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

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -24,9 +24,7 @@ const VirtualScrollerContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
   overridesResolver: (props, styles) => styles.virtualScrollerContent
-})({
-  position: 'relative'
-});
+})({});
 const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
   const {
     className,

package/modern/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, GridDragIcon, GridColumnHeaderFilterIconButton } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -33,7 +33,8 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   GroupingCriteriaCollapseIcon: GridExpandMoreIcon,
   GroupingCriteriaExpandIcon: GridKeyboardArrowRight,
   DetailPanelExpandIcon: GridAddIcon,
-  DetailPanelCollapseIcon: GridRemoveIcon
+  DetailPanelCollapseIcon: GridRemoveIcon,
+  RowReorderIcon: GridDragIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface
@@ -49,6 +50,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay,
   Footer: GridFooter,