@mui/x-data-grid 6.0.0-beta.3 → 6.0.0-beta.4

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -8,7 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
-import { getLabelFromValueOption, getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
+import { getLabelFromValueOption, getValueFromValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 function isKeyboardEvent(event) {
@@ -35,15 +35,26 @@ function GridEditSingleSelectCell(props) {
   const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current?.focus();
+    }
+  }, [hasFocus]);
+  if (!isSingleSelectColDef(colDef)) {
+    return null;
+  }
   let valueOptions;
-  if (typeof colDef.valueOptions === 'function') {
-    valueOptions = colDef.valueOptions({
+  if (typeof colDef?.valueOptions === 'function') {
+    valueOptions = colDef?.valueOptions({
       id,
       row,
       field
     });
   } else {
-    valueOptions = colDef.valueOptions;
+    valueOptions = colDef?.valueOptions;
+  }
+  if (!valueOptions) {
+    return null;
   }
   const handleChange = async event => {
     setOpen(false);
@@ -78,11 +89,6 @@ function GridEditSingleSelectCell(props) {
     }
     setOpen(true);
   };
-  useEnhancedEffect(() => {
-    if (hasFocus) {
-      inputRef.current.focus();
-    }
-  }, [hasFocus]);
   const OptionComponent = isSelectNative ? 'option' : MenuItem;
   return /*#__PURE__*/_jsx(rootProps.components.BaseSelect, _extends({
     ref: ref,

package/modern/components/panel/GridColumnsPanel.js

@@ -195,6 +195,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   disableHideAllButton: PropTypes.bool,
   disableShowAllButton: PropTypes.bool,
   searchPredicate: PropTypes.func,
+  slotProps: PropTypes.object,
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;
 export { GridColumnsPanel };

package/modern/components/panel/GridPanelWrapper.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "slotProps"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
@@ -33,7 +34,8 @@ const GridPanelWrapperRoot = styled('div', {
 const isEnabled = () => true;
 const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
-      className
+      className,
+      slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
@@ -41,15 +43,23 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TrapFocus, {
+  return /*#__PURE__*/_jsx(TrapFocus, _extends({
     open: true,
     disableEnforceFocus: true,
-    isEnabled: isEnabled,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
       ref: ref,
       tabIndex: -1,
       className: clsx(className, classes.root)
     }, other))
-  });
+  }));
 });
+process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  slotProps: PropTypes.object
+} : void 0;
 export { GridPanelWrapper };

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

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Chip from '@mui/material/Chip';
 import { unstable_useId as useId } from '@mui/utils';
-import { getLabelFromValueOption, getValueFromOption } from './filterPanelUtils';
+import { getLabelFromValueOption, getValueFromOption, isSingleSelectColDef } from './filterPanelUtils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const isOptionEqualToValue = (option, value) => getValueFromOption(option) === getValueFromOption(value);
@@ -34,7 +34,13 @@ function GridFilterInputMultipleSingleSelect(props) {
   };
   const id = useId();
   const rootProps = useGridRootProps();
-  const resolvedColumn = item.field ? apiRef.current.getColumn(item.field) : null;
+  let resolvedColumn = null;
+  if (item.field) {
+    const column = apiRef.current.getColumn(item.field);
+    if (isSingleSelectColDef(column)) {
+      resolvedColumn = column;
+    }
+  }
   const resolvedValueOptions = React.useMemo(() => {
     if (!resolvedColumn?.valueOptions) {
       return [];
@@ -52,7 +58,7 @@ function GridFilterInputMultipleSingleSelect(props) {
 
   // The value is computed from the item.value and used directly
   // If it was done by a useEffect/useState, the Autocomplete could receive incoherent value and options
-  const filterValues = React.useMemo(() => {
+  const filteredValues = React.useMemo(() => {
     if (!Array.isArray(item.value)) {
       return [];
     }
@@ -68,13 +74,13 @@ function GridFilterInputMultipleSingleSelect(props) {
     return item.value;
   }, [item.value, resolvedValueOptions, resolvedFormattedValueOptions]);
   React.useEffect(() => {
-    if (!Array.isArray(item.value) || filterValues.length !== item.value.length) {
-      // update the state if the filter value has been cleaned by the component
+    if (!Array.isArray(item.value) || filteredValues.length !== item.value.length) {
+      // Updates the state if the filter value has been cleaned by the component
       applyValue(_extends({}, item, {
-        value: filterValues.map(getValueFromOption)
+        value: filteredValues.map(getValueFromOption)
       }));
     }
-  }, [item, filterValues, applyValue]);
+  }, [item, filteredValues, applyValue]);
   const handleChange = React.useCallback((event, value) => {
     applyValue(_extends({}, item, {
       value: [...value.map(getValueFromOption)]
@@ -86,7 +92,7 @@ function GridFilterInputMultipleSingleSelect(props) {
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
-    value: filterValues,
+    value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
     renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/_jsx(Chip, _extends({

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

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
-import { getLabelFromValueOption, getValueFromValueOptions } from './filterPanelUtils';
+import { getLabelFromValueOption, getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const renderSingleSelectOptions = ({
   valueOptions,
@@ -40,15 +40,21 @@ function GridFilterInputSingleSelect(props) {
   const rootProps = useGridRootProps();
   const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
-  const currentColumn = item.field ? apiRef.current.getColumn(item.field) : null;
+  let resolvedColumn = null;
+  if (item.field) {
+    const column = apiRef.current.getColumn(item.field);
+    if (isSingleSelectColDef(column)) {
+      resolvedColumn = column;
+    }
+  }
   const currentValueOptions = React.useMemo(() => {
-    if (currentColumn === null) {
+    if (!resolvedColumn) {
       return undefined;
     }
-    return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
-      field: currentColumn.field
-    }) : currentColumn.valueOptions;
-  }, [currentColumn]);
+    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
+      field: resolvedColumn.field
+    }) : resolvedColumn.valueOptions;
+  }, [resolvedColumn]);
   const onFilterChange = React.useCallback(event => {
     let value = event.target.value;
 
@@ -76,6 +82,9 @@ function GridFilterInputSingleSelect(props) {
     itemValue = itemValue ?? '';
     setFilterValueState(String(itemValue));
   }, [item, currentValueOptions, applyValue]);
+  if (!isSingleSelectColDef(resolvedColumn)) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
@@ -93,7 +102,7 @@ function GridFilterInputSingleSelect(props) {
       native: isSelectNative
     }, rootProps.componentsProps?.baseSelect)
   }, others, rootProps.componentsProps?.baseTextField, {
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.field), isSelectNative ? 'option' : MenuItem, getOptionLabel)
+    children: renderSingleSelectOptions(resolvedColumn, isSelectNative ? 'option' : MenuItem, getOptionLabel)
   }));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {

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

@@ -1,3 +1,6 @@
+export function isSingleSelectColDef(colDef) {
+  return colDef?.type === 'singleSelect';
+}
 export function getValueFromOption(option) {
   if (typeof option === 'object' && option !== null) {
     return option.value;

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -51,6 +51,12 @@ export const getRenderableIndexes = ({
 }) => {
   return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
+const areRenderContextsEqual = (context1, context2) => {
+  if (context1 === context2) {
+    return true;
+  }
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
 export const useGridVirtualScroller = props => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -205,6 +211,10 @@ export const useGridVirtualScroller = props => {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer, theme.direction]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.0.0-beta.3
+ * @mui/x-data-grid v6.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -18,6 +18,7 @@ export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 export { passFilterLogic } from '../hooks/features/filter/gridFilterUtils';
+export { isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
 export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
 export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';

package/node/colDef/gridSingleSelectColDef.js

@@ -23,6 +23,9 @@ const GRID_SINGLE_SELECT_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.
       api
     } = params;
     const colDef = params.api.getColumn(field);
+    if (!(0, _filterPanelUtils.isSingleSelectColDef)(colDef)) {
+      return '';
+    }
     let valueOptions;
     if (typeof colDef.valueOptions === 'function') {
       valueOptions = colDef.valueOptions({

package/node/components/cell/GridEditSingleSelectCell.js

@@ -45,15 +45,26 @@ function GridEditSingleSelectCell(props) {
   const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (hasFocus) {
+      inputRef.current?.focus();
+    }
+  }, [hasFocus]);
+  if (!(0, _filterPanelUtils.isSingleSelectColDef)(colDef)) {
+    return null;
+  }
   let valueOptions;
-  if (typeof colDef.valueOptions === 'function') {
-    valueOptions = colDef.valueOptions({
+  if (typeof colDef?.valueOptions === 'function') {
+    valueOptions = colDef?.valueOptions({
       id,
       row,
       field
     });
   } else {
-    valueOptions = colDef.valueOptions;
+    valueOptions = colDef?.valueOptions;
+  }
+  if (!valueOptions) {
+    return null;
   }
   const handleChange = async event => {
     setOpen(false);
@@ -88,11 +99,6 @@ function GridEditSingleSelectCell(props) {
     }
     setOpen(true);
   };
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    if (hasFocus) {
-      inputRef.current.focus();
-    }
-  }, [hasFocus]);
   const OptionComponent = isSelectNative ? 'option' : _MenuItem.default;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseSelect, (0, _extends2.default)({
     ref: ref,

package/node/components/panel/GridColumnsPanel.js

@@ -203,5 +203,6 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   disableHideAllButton: _propTypes.default.bool,
   disableShowAllButton: _propTypes.default.bool,
   searchPredicate: _propTypes.default.func,
+  slotProps: _propTypes.default.object,
   sort: _propTypes.default.oneOf(['asc', 'desc'])
 } : void 0;

package/node/components/panel/GridPanelWrapper.js

@@ -8,6 +8,7 @@ exports.GridPanelWrapper = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
 var _styles = require("@mui/material/styles");
@@ -15,7 +16,7 @@ var _utils = require("@mui/utils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className"];
+const _excluded = ["className", "slotProps"];
 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); }
 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 useUtilityClasses = ownerState => {
@@ -42,7 +43,8 @@ const GridPanelWrapperRoot = (0, _styles.styled)('div', {
 const isEnabled = () => true;
 const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
-      className
+      className,
+      slotProps = {}
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -50,15 +52,23 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, (0, _extends2.default)({
     open: true,
     disableEnforceFocus: true,
-    isEnabled: isEnabled,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
       ref: ref,
       tabIndex: -1,
       className: (0, _clsx.default)(className, classes.root)
     }, other))
-  });
+  }));
 });
-exports.GridPanelWrapper = GridPanelWrapper;
+exports.GridPanelWrapper = GridPanelWrapper;
+process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  slotProps: _propTypes.default.object
+} : void 0;

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

@@ -43,7 +43,13 @@ function GridFilterInputMultipleSingleSelect(props) {
   };
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const resolvedColumn = item.field ? apiRef.current.getColumn(item.field) : null;
+  let resolvedColumn = null;
+  if (item.field) {
+    const column = apiRef.current.getColumn(item.field);
+    if ((0, _filterPanelUtils.isSingleSelectColDef)(column)) {
+      resolvedColumn = column;
+    }
+  }
   const resolvedValueOptions = React.useMemo(() => {
     if (!resolvedColumn?.valueOptions) {
       return [];
@@ -61,7 +67,7 @@ function GridFilterInputMultipleSingleSelect(props) {
 
   // The value is computed from the item.value and used directly
   // If it was done by a useEffect/useState, the Autocomplete could receive incoherent value and options
-  const filterValues = React.useMemo(() => {
+  const filteredValues = React.useMemo(() => {
     if (!Array.isArray(item.value)) {
       return [];
     }
@@ -77,13 +83,13 @@ function GridFilterInputMultipleSingleSelect(props) {
     return item.value;
   }, [item.value, resolvedValueOptions, resolvedFormattedValueOptions]);
   React.useEffect(() => {
-    if (!Array.isArray(item.value) || filterValues.length !== item.value.length) {
-      // update the state if the filter value has been cleaned by the component
+    if (!Array.isArray(item.value) || filteredValues.length !== item.value.length) {
+      // Updates the state if the filter value has been cleaned by the component
       applyValue((0, _extends2.default)({}, item, {
-        value: filterValues.map(_filterPanelUtils.getValueFromOption)
+        value: filteredValues.map(_filterPanelUtils.getValueFromOption)
       }));
     }
-  }, [item, filterValues, applyValue]);
+  }, [item, filteredValues, applyValue]);
   const handleChange = React.useCallback((event, value) => {
     applyValue((0, _extends2.default)({}, item, {
       value: [...value.map(_filterPanelUtils.getValueFromOption)]
@@ -95,7 +101,7 @@ function GridFilterInputMultipleSingleSelect(props) {
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
-    value: filterValues,
+    value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
     renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({

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

@@ -49,15 +49,21 @@ function GridFilterInputSingleSelect(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
-  const currentColumn = item.field ? apiRef.current.getColumn(item.field) : null;
+  let resolvedColumn = null;
+  if (item.field) {
+    const column = apiRef.current.getColumn(item.field);
+    if ((0, _filterPanelUtils.isSingleSelectColDef)(column)) {
+      resolvedColumn = column;
+    }
+  }
   const currentValueOptions = React.useMemo(() => {
-    if (currentColumn === null) {
+    if (!resolvedColumn) {
       return undefined;
     }
-    return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
-      field: currentColumn.field
-    }) : currentColumn.valueOptions;
-  }, [currentColumn]);
+    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
+      field: resolvedColumn.field
+    }) : resolvedColumn.valueOptions;
+  }, [resolvedColumn]);
   const onFilterChange = React.useCallback(event => {
     let value = event.target.value;
 
@@ -85,6 +91,9 @@ function GridFilterInputSingleSelect(props) {
     itemValue = itemValue ?? '';
     setFilterValueState(String(itemValue));
   }, [item, currentValueOptions, applyValue]);
+  if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
@@ -102,7 +111,7 @@ function GridFilterInputSingleSelect(props) {
       native: isSelectNative
     }, rootProps.componentsProps?.baseSelect)
   }, others, rootProps.componentsProps?.baseTextField, {
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.field), isSelectNative ? 'option' : _MenuItem.default, getOptionLabel)
+    children: renderSingleSelectOptions(resolvedColumn, isSelectNative ? 'option' : _MenuItem.default, getOptionLabel)
   }));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {

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

@@ -6,6 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.getLabelFromValueOption = void 0;
 exports.getValueFromOption = getValueFromOption;
 exports.getValueFromValueOptions = getValueFromValueOptions;
+exports.isSingleSelectColDef = isSingleSelectColDef;
+function isSingleSelectColDef(colDef) {
+  return colDef?.type === 'singleSelect';
+}
 function getValueFromOption(option) {
   if (typeof option === 'object' && option !== null) {
     return option.value;

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -61,6 +61,12 @@ const getRenderableIndexes = ({
   return [(0, _utils2.clamp)(firstIndex - buffer, minFirstIndex, maxLastIndex), (0, _utils2.clamp)(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
 exports.getRenderableIndexes = getRenderableIndexes;
+const areRenderContextsEqual = (context1, context2) => {
+  if (context1 === context2) {
+    return true;
+  }
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
 const useGridVirtualScroller = props => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -215,6 +221,10 @@ const useGridVirtualScroller = props => {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer, theme.direction]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.0.0-beta.3
+ * @mui/x-data-grid v6.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/index.js

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "isObject", {
     return _utils2.isObject;
   }
 });
+Object.defineProperty(exports, "isSingleSelectColDef", {
+  enumerable: true,
+  get: function () {
+    return _filterPanelUtils.isSingleSelectColDef;
+  }
+});
 Object.defineProperty(exports, "paginationStateInitializer", {
   enumerable: true,
   get: function () {
@@ -473,6 +479,7 @@ var _useGridCsvExport = require("../hooks/features/export/useGridCsvExport");
 var _useGridPrintExport = require("../hooks/features/export/useGridPrintExport");
 var _useGridFilter = require("../hooks/features/filter/useGridFilter");
 var _gridFilterUtils = require("../hooks/features/filter/gridFilterUtils");
+var _filterPanelUtils = require("../components/panel/filterPanel/filterPanelUtils");
 var _useGridFocus = require("../hooks/features/focus/useGridFocus");
 var _useGridKeyboardNavigation = require("../hooks/features/keyboardNavigation/useGridKeyboardNavigation");
 var _useGridPagination = require("../hooks/features/pagination/useGridPagination");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.4",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",