@mui/x-data-grid 8.0.0-alpha.4 → 8.0.0-alpha.6

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputBoolean = GridFilterInputBoolean;
-exports.sanitizeFilterItemValue = void 0;
+exports.sanitizeFilterItemValue = sanitizeFilterItemValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -16,16 +16,6 @@ var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
-const sanitizeFilterItemValue = value => {
-  if (String(value).toLowerCase() === 'true') {
-    return true;
-  }
-  if (String(value).toLowerCase() === 'false') {
-    return false;
-  }
-  return undefined;
-};
-exports.sanitizeFilterItemValue = sanitizeFilterItemValue;
 const BooleanOperatorContainer = (0, _styles.styled)('div')({
   display: 'flex',
   alignItems: 'center',
@@ -104,6 +94,15 @@ function GridFilterInputBoolean(props) {
     }), clearButton]
   });
 }
+function sanitizeFilterItemValue(value) {
+  if (String(value).toLowerCase() === 'true') {
+    return true;
+  }
+  if (String(value).toLowerCase() === 'false') {
+    return false;
+  }
+  return undefined;
+}
 process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

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

@@ -30,19 +30,17 @@ function GridFilterInputValue(props) {
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterTimeout = (0, _useTimeout.useTimeout)();
-  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value, type));
   const [applying, setIsApplying] = React.useState(false);
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const onFilterChange = React.useCallback(event => {
-    const {
-      value
-    } = event.target;
-    setFilterValueState(String(value));
+    const value = sanitizeFilterItemValue(event.target.value, type);
+    setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       const newItem = (0, _extends2.default)({}, item, {
-        value: type === 'number' ? Number(value) : value,
+        value,
         fromInput: id
       });
       applyValue(newItem);
@@ -51,15 +49,15 @@ function GridFilterInputValue(props) {
   }, [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue]);
   React.useEffect(() => {
     const itemPlusTag = item;
-    if (itemPlusTag.fromInput !== id || item.value === undefined) {
-      setFilterValueState(String(item.value ?? ''));
+    if (itemPlusTag.fromInput !== id || item.value == null) {
+      setFilterValueState(sanitizeFilterItemValue(item.value, type));
     }
-  }, [id, item]);
+  }, [id, item, type]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState,
+    value: filterValueState === undefined ? '' : String(filterValueState),
     onChange: onFilterChange,
     variant: variant,
     type: type || 'text',
@@ -81,6 +79,15 @@ function GridFilterInputValue(props) {
     inputRef: focusElementRef
   }, others, rootProps.slotProps?.baseTextField));
 }
+function sanitizeFilterItemValue(value, type) {
+  if (value == null || value === '') {
+    return undefined;
+  }
+  if (type === 'number') {
+    return Number(value);
+  }
+  return String(value);
+}
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

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

@@ -10,6 +10,7 @@ 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 _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridFilterItem = require("../../../models/gridFilterItem");
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
 var _GridPanelContent = require("../GridPanelContent");
@@ -28,7 +29,7 @@ const getGridFilter = col => ({
   id: Math.round(Math.random() * 1e5)
 });
 exports.getGridFilter = getGridFilter;
-const GridFilterPanel = exports.GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
+const GridFilterPanel = exports.GridFilterPanel = (0, _forwardRef.forwardRef)(function GridFilterPanel(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
@@ -150,9 +151,8 @@ const GridFilterPanel = exports.GridFilterPanel = /*#__PURE__*/React.forwardRef(
       lastFilterRef.current.focus();
     }
   }, [validFilters.length]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelContent.GridPanelContent, {
       children: [readOnlyFilters.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
         item: item,

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

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  GridFilterInputBoolean: true,
   GridFilterPanel: true
 };
+Object.defineProperty(exports, "GridFilterInputBoolean", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterInputBoolean.GridFilterInputBoolean;
+  }
+});
 Object.defineProperty(exports, "GridFilterPanel", {
   enumerable: true,
   get: function () {
@@ -61,17 +68,6 @@ Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
   });
 });
 var _GridFilterInputBoolean = require("./GridFilterInputBoolean");
-Object.keys(_GridFilterInputBoolean).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _GridFilterInputBoolean[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridFilterInputBoolean[key];
-    }
-  });
-});
 var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
 Object.keys(_GridFilterInputValueProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/components/toolbar/GridToolbar.js

@@ -10,6 +10,7 @@ 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 _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridToolbarContainer = require("../containers/GridToolbarContainer");
 var _GridToolbarColumnsButton = require("./GridToolbarColumnsButton");
 var _GridToolbarDensitySelector = require("./GridToolbarDensitySelector");
@@ -19,7 +20,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
-const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
   const _ref = props,
@@ -35,9 +36,8 @@ const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarContainer.GridToolbarContainer, (0, _extends2.default)({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarContainer.GridToolbarContainer, (0, _extends2.default)({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -10,13 +10,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forwardRef.forwardRef)(function GridToolbarColumnsButton(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -46,7 +47,6 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-      ref: ref,
       id: columnButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
@@ -56,6 +56,7 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {}),
       onClick: showColumns
     }, rootProps.slotProps?.baseButton, buttonProps, {
+      ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -19,7 +19,7 @@ var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _forwardRef.forwardRef)(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -80,12 +80,11 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   if (rootProps.disableDensitySelector) {
     return null;
   }
-  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: () => handleDensityUpdate(option.value),
     selected: option.value === density,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: option.icon
-    }), option.label]
+    iconStart: option.icon,
+    children: option.label
   }, index));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
@@ -93,7 +92,6 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
       enterDelay: 1000
     }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-        ref: handleRef,
         size: "small",
         startIcon: startIcon,
         "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
@@ -103,6 +101,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
         id: densityButtonId,
         onClick: handleDensitySelectorOpen
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {

package/node/components/toolbar/GridToolbarExport.js

@@ -12,6 +12,7 @@ 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 _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridToolbarExportContainer = require("./GridToolbarExportContainer");
@@ -93,7 +94,7 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     pageStyle: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
   })
 } : void 0;
-const GridToolbarExport = exports.GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
+const GridToolbarExport = exports.GridToolbarExport = (0, _forwardRef.forwardRef)(function GridToolbarExport(props, ref) {
   const _ref = props,
     {
       csvOptions = {},

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -10,13 +10,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _forwardRef.forwardRef)(function GridToolbarExportContainer(props, ref) {
   const {
     children,
     slotProps = {}
@@ -52,7 +53,6 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
       enterDelay: 1000
     }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-        ref: handleRef,
         size: "small",
         startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.exportIcon, {}),
         "aria-expanded": open,
@@ -62,6 +62,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
         id: exportButtonId,
         onClick: handleMenuOpen
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
@@ -39,7 +40,10 @@ const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   margin: theme.spacing(1, 1, 0.5),
   padding: theme.spacing(0, 1)
 }));
-const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
+
+// FIXME(v8:romgrk): override slotProps
+
+const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRef.forwardRef)(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -105,7 +109,6 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-      ref: ref,
       id: filterButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
@@ -120,6 +123,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
       })),
       onClick: toggleFilter
     }, rootProps.slotProps?.baseButton, buttonProps, {
+      ref: ref,
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -15,6 +15,7 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _OutlinedInput = require("@mui/material/OutlinedInput");
 var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -39,13 +40,8 @@ const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
 })(({
   theme
 }) => ({
-  width: 'auto',
-  paddingBottom: theme.spacing(0.5),
-  '& input': {
-    marginLeft: theme.spacing(0.5)
-  },
-  '& .MuiInput-underline:before': {
-    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+  [`.${_OutlinedInput.outlinedInputClasses.root}`]: {
+    fontSize: theme.typography.body2.fontSize
   },
   [`& input[type="search"]::-webkit-search-decoration,
   & input[type="search"]::-webkit-search-cancel-button,
@@ -99,7 +95,8 @@ function GridToolbarQuickFilter(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
     as: rootProps.slots.baseTextField,
     ownerState: rootProps,
-    variant: "standard",
+    variant: "outlined",
+    size: "small",
     value: searchValue,
     onChange: handleSearchValueChange,
     className: (0, _clsx.default)(classes.root, className),
@@ -108,23 +105,30 @@ function GridToolbarQuickFilter(props) {
     type: "search"
   }, other, {
     InputProps: (0, _extends2.default)({
-      startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
-        fontSize: "small"
-      }),
-      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-        size: "small",
-        sx: [searchValue ? {
-          visibility: 'visible'
-        } : {
-          visibility: 'hidden'
-        }],
-        onClick: handleSearchReset
-      }, rootProps.slotProps?.baseIconButton, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
+      startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
+        position: "start",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
           fontSize: "small"
         })
-      }))
+      }),
+      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
+        position: "end",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+          size: "small",
+          edge: "end",
+          sx: [searchValue ? {
+            visibility: 'visible'
+          } : {
+            visibility: 'hidden'
+          }],
+          onClick: handleSearchReset
+        }, rootProps.slotProps?.baseIconButton, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
     }, other.InputProps)
   }, rootProps.slotProps?.baseTextField));
 }

package/node/components/virtualization/GridMainContainer.js

@@ -9,6 +9,7 @@ exports.GridMainContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -29,16 +30,16 @@ const Element = (0, _system.styled)('div', {
   display: 'flex',
   flexDirection: 'column'
 });
-const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridMainContainer = exports.GridMainContainer = (0, _forwardRef.forwardRef)((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const configuration = (0, _useGridConfiguration.useGridConfiguration)();
   const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, (0, _extends2.default)({
-    ref: ref,
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
-  }, ariaAttributes, {
+  }, ariaAttributes, rootProps.slotProps?.main, {
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelAnchor, {
       role: "presentation",
       "data-id": "gridPanelAnchor"

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -8,6 +8,7 @@ exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useOnMount = require("../../hooks/utils/useOnMount");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _hooks = require("../../hooks");
@@ -59,7 +60,7 @@ const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
   },
   bottom: '0px'
 });
-const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
+const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forwardRef)(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isLocked = React.useRef(false);

package/node/components/virtualization/GridVirtualScrollerContent.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,14 +29,13 @@ const VirtualScrollerContentRoot = (0, _system.styled)('div', {
   slot: 'VirtualScrollerContent',
   overridesResolver: (props, styles) => styles.virtualScrollerContent
 })({});
-const GridVirtualScrollerContent = exports.GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
+const GridVirtualScrollerContent = exports.GridVirtualScrollerContent = (0, _forwardRef.forwardRef)(function GridVirtualScrollerContent(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerContentRoot, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerContentRoot, (0, _extends2.default)({}, props, {
     ownerState: rootProps,
-    className: (0, _clsx.default)(classes.root, props.className)
+    className: (0, _clsx.default)(classes.root, props.className),
+    ref: ref
   }));
 });

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _rows = require("../../hooks/features/rows");
@@ -39,7 +40,7 @@ const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   // Prevents margin collapsing when using `getRowSpacing`
   flexDirection: 'column'
 });
-const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
+const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = (0, _forwardRef.forwardRef)(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
@@ -53,11 +54,12 @@ const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*
     return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,
     style: {
       transform: `translate3d(0, ${offsetTop}px, 0)`
     }
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -55,7 +55,7 @@ const useGridColumnHeaders = props => {
   const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const hasVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
+  const hasColumnVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = (0, _utils.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
@@ -95,8 +95,15 @@ const useGridColumnHeaders = props => {
       renderContext: currentContext = renderContext,
       maxLastColumn = visibleColumns.length
     } = params || {};
-    const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
+    let firstColumnToRender;
+    let lastColumnToRender;
+    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+      firstColumnToRender = 0;
+      lastColumnToRender = maxLastColumn;
+    } else {
+      firstColumnToRender = currentContext.firstColumnIndex;
+      lastColumnToRender = currentContext.lastColumnIndex;
+    }
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,

package/node/hooks/features/columnResize/gridColumnResizeApi.js

@@ -8,7 +8,8 @@ const DEFAULT_GRID_AUTOSIZE_OPTIONS = exports.DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
   includeOutliers: false,
   outliersFactor: 1.5,
-  expand: false
+  expand: false,
+  disableColumnVirtualization: true
 };
 
 /**

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -469,6 +469,7 @@ const useGridColumnResize = (apiRef, props) => {
       return;
     }
     apiRef.current.autosizeColumns((0, _extends2.default)({}, props.autosizeOptions, {
+      disableColumnVirtualization: false,
       columns: [column.field]
     }));
   });
@@ -495,8 +496,10 @@ const useGridColumnResize = (apiRef, props) => {
     options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
     const columns = options.columns.map(c => apiRef.current.state.columns.lookup[c]);
     try {
-      apiRef.current.unstable_setColumnVirtualization(false);
-      await columnVirtualizationDisabled();
+      if (!props.disableVirtualization && options.disableColumnVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(false);
+        await columnVirtualizationDisabled();
+      }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => (0, _extends2.default)({}, column, {
         width: widthByField[column.field],
@@ -528,10 +531,12 @@ const useGridColumnResize = (apiRef, props) => {
         }
       });
     } finally {
-      apiRef.current.unstable_setColumnVirtualization(true);
+      if (!props.disableVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(true);
+      }
       isAutosizingRef.current = false;
     }
-  }, [apiRef, columnVirtualizationDisabled]);
+  }, [apiRef, columnVirtualizationDisabled, props.disableVirtualization]);
 
   /**
    * EFFECTS

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -334,6 +334,7 @@ function getTotalHeaderHeight(apiRef, props) {
   const maxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);
   const isHeaderFilteringEnabled = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEnabledSelector)(apiRef);
   const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const columnGroupHeadersHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;
-  return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight;
+  return columnHeadersHeight + columnGroupHeadersHeight * maxDepth + filterHeadersHeight;
 }