@mui/x-data-grid 7.21.0 → 7.22.1

package/modern/joy/joySlots.js

@@ -1,14 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
-  _excluded2 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
-  _excluded3 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
-  _excluded4 = ["color", "size", "sx", "touchRippleRef"],
-  _excluded5 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
-  _excluded6 = ["native"],
-  _excluded7 = ["shrink", "variant", "sx"];
+const _excluded = ["slotProps", "variant", "color", "sx"],
+  _excluded2 = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
+  _excluded3 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
+  _excluded4 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
+  _excluded5 = ["color", "size", "sx", "touchRippleRef"],
+  _excluded6 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
+  _excluded7 = ["native"],
+  _excluded8 = ["shrink", "variant", "sx"];
 import * as React from 'react';
+import JoyBadge from '@mui/joy/Badge';
 import JoyCheckbox from '@mui/joy/Checkbox';
+import JoyDivider from '@mui/joy/Divider';
 import JoyInput from '@mui/joy/Input';
 import JoyFormControl from '@mui/joy/FormControl';
 import JoyFormLabel from '@mui/joy/FormLabel';
@@ -58,14 +61,27 @@ function convertVariant(variant, defaultVariant = 'plain') {
     filled: 'soft'
   }[variant] || defaultVariant;
 }
-const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      color,
+      sx
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(JoyBadge, _extends({}, props, {
+    color: convertColor(color),
+    variant: "plain",
+    sx: sx,
+    ref: ref
+  }));
+});
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
       inputProps,
       onChange,
       checked,
       inputRef
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return /*#__PURE__*/_jsx(JoyCheckbox, _extends({}, props, {
     slotProps: {
       input: _extends({}, inputProps, {
@@ -77,7 +93,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: onChange
   }));
 });
-const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const TextField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
       onChange,
       label,
@@ -87,8 +103,8 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       type,
       size,
       variant
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   const rootRef = useForkRef(ref, props.InputProps?.ref);
   const inputForkRef = useForkRef(inputRef, props?.inputProps?.ref);
   const {
@@ -116,7 +132,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     })]
   });
 });
-const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref4, ref) {
   let {
       startIcon,
       color,
@@ -124,8 +140,8 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
       size,
       sx,
       variant
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return /*#__PURE__*/_jsx(JoyButton, _extends({}, props, {
     size: convertSize(size),
     color: convertColor(color),
@@ -136,13 +152,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
     sx: sx
   }));
 });
-const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref5, ref) {
   let {
       color,
       size,
       sx
-    } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   return /*#__PURE__*/_jsx(JoyIconButton, _extends({}, props, {
     size: convertSize(size),
     color: convertColor(color) ?? 'neutral',
@@ -151,7 +167,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref)
     sx: sx
   }));
 });
-const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
       open,
       onOpen,
@@ -163,8 +179,8 @@ const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       MenuProps,
       inputRef,
       labelId
-    } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
   const handleChange = (event, newValue) => {
     if (event && onChange) {
       // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300
@@ -215,17 +231,17 @@ const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     }
   }));
 });
-const Option = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+const Option = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
   return /*#__PURE__*/_jsx(JoyOption, _extends({}, props, {
     ref: ref
   }));
 });
-const InputLabel = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const InputLabel = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
       sx
-    } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+    } = _ref8,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
   return /*#__PURE__*/_jsx(JoyFormLabel, _extends({}, props, {
     ref: ref,
     sx: sx
@@ -351,7 +367,9 @@ const LoadingOverlay = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 const joySlots = _extends({}, joyIconSlots, {
+  baseBadge: Badge,
   baseCheckbox: Checkbox,
+  baseDivider: JoyDivider,
   baseTextField: TextField,
   baseButton: Button,
   baseIconButton: IconButton,

package/modern/locales/daDK.js

@@ -33,8 +33,7 @@ const daDKGrid = {
   columnsManagementSearchTitle: 'Søg',
   columnsManagementNoColumns: 'Ingen søjler',
   columnsManagementShowHideAllText: 'Vis/Skjul Alle',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Nulstil',
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelRemoveAll: 'Fjern alle',
@@ -48,9 +47,9 @@ const daDKGrid = {
   filterPanelInputPlaceholder: 'Filterværdi',
   // Filter operators text
   filterOperatorContains: 'indeholder',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'indeholder ikke',
   filterOperatorEquals: 'lig med',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'ikke lig med',
   filterOperatorStartsWith: 'begynder med',
   filterOperatorEndsWith: 'ender med',
   filterOperatorIs: 'er lig med',
@@ -70,9 +69,9 @@ const daDKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Indeholder',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Indeholder ikke',
   headerFilterOperatorEquals: 'Lig med',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Ikke lig med',
   headerFilterOperatorStartsWith: 'Begynder med',
   headerFilterOperatorEndsWith: 'Ender med',
   headerFilterOperatorIs: 'Er lig med',

package/modern/locales/itIT.js

@@ -30,11 +30,10 @@ const itITGrid = {
   toolbarExportPrint: 'Stampa',
   toolbarExportExcel: 'Scarica come Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Cerca',
+  columnsManagementNoColumns: 'Nessuna colonna',
+  columnsManagementShowHideAllText: 'Mostra/Nascondi Tutto',
+  columnsManagementReset: 'Resetta',
   // Filter panel text
   filterPanelAddFilter: 'Aggiungi un filtro',
   filterPanelRemoveAll: 'Rimuovi filtri',
@@ -48,13 +47,13 @@ const itITGrid = {
   filterPanelInputPlaceholder: 'Filtra il valore',
   // Filter operators text
   filterOperatorContains: 'contiene',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'non contiene',
   filterOperatorEquals: 'uguale a',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'diverso da',
   filterOperatorStartsWith: 'comincia per',
   filterOperatorEndsWith: 'termina per',
   filterOperatorIs: 'uguale a',
-  filterOperatorNot: 'diversa da',
+  filterOperatorNot: 'diverso da',
   filterOperatorAfter: 'dopo il',
   filterOperatorOnOrAfter: 'a partire dal',
   filterOperatorBefore: 'prima del',
@@ -70,26 +69,26 @@ const itITGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Contiene',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
-  headerFilterOperatorEquals: 'uguale a',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  headerFilterOperatorStartsWith: 'comincia per',
-  headerFilterOperatorEndsWith: 'termina per',
-  headerFilterOperatorIs: 'uguale a',
-  headerFilterOperatorNot: 'diversa da',
-  headerFilterOperatorAfter: 'dopo il',
-  headerFilterOperatorOnOrAfter: 'a partire dal',
-  headerFilterOperatorBefore: 'prima del',
-  headerFilterOperatorOnOrBefore: 'fino al',
-  headerFilterOperatorIsEmpty: 'è vuoto',
-  headerFilterOperatorIsNotEmpty: 'non è vuoto',
-  headerFilterOperatorIsAnyOf: 'è uno tra',
-  'headerFilterOperator=': 'uguale a',
-  'headerFilterOperator!=': 'diverso da',
-  'headerFilterOperator>': 'maggiore di',
-  'headerFilterOperator>=': 'maggiore o uguale a',
-  'headerFilterOperator<': 'minore di',
-  'headerFilterOperator<=': 'minore o uguale a',
+  headerFilterOperatorDoesNotContain: 'Non contiene',
+  headerFilterOperatorEquals: 'Uguale a',
+  headerFilterOperatorDoesNotEqual: 'Diverso da',
+  headerFilterOperatorStartsWith: 'Comincia per',
+  headerFilterOperatorEndsWith: 'Termina per',
+  headerFilterOperatorIs: 'Uguale a',
+  headerFilterOperatorNot: 'Diverso da',
+  headerFilterOperatorAfter: 'Dopo il',
+  headerFilterOperatorOnOrAfter: 'A partire dal',
+  headerFilterOperatorBefore: 'Prima del',
+  headerFilterOperatorOnOrBefore: 'Fino al',
+  headerFilterOperatorIsEmpty: 'È vuoto',
+  headerFilterOperatorIsNotEmpty: 'Non è vuoto',
+  headerFilterOperatorIsAnyOf: 'È uno tra',
+  'headerFilterOperator=': 'Uguale a',
+  'headerFilterOperator!=': 'Diverso da',
+  'headerFilterOperator>': 'Maggiore di',
+  'headerFilterOperator>=': 'Maggiore o uguale a',
+  'headerFilterOperator<': 'Minore di',
+  'headerFilterOperator<=': 'Minore o uguale a',
   // Filter values text
   filterValueAny: 'qualunque',
   filterValueTrue: 'vero',

package/modern/locales/ptBR.js

@@ -47,9 +47,9 @@ const ptBRGrid = {
   filterPanelInputPlaceholder: 'Filtrar valor',
   // Filter operators text
   filterOperatorContains: 'contém',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'não contém',
   filterOperatorEquals: 'é igual a',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'não é igual a',
   filterOperatorStartsWith: 'começa com',
   filterOperatorEndsWith: 'termina com',
   filterOperatorIs: 'é',
@@ -69,9 +69,9 @@ const ptBRGrid = {
   'filterOperator<=': 'menor ou igual que',
   // Header filter operators text
   headerFilterOperatorContains: 'Contém',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Não contém',
   headerFilterOperatorEquals: 'Igual',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Não é igual a',
   headerFilterOperatorStartsWith: 'Começa com',
   headerFilterOperatorEndsWith: 'Termina com',
   headerFilterOperatorIs: 'É',

package/modern/material/index.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
+import MUIDivider from '@mui/material/Divider';
 import MUITextField from '@mui/material/TextField';
 import MUIFormControl from '@mui/material/FormControl';
 import MUISelect from '@mui/material/Select';
@@ -51,7 +53,9 @@ const iconSlots = {
   columnReorderIcon: GridDragIcon
 };
 const materialSlots = _extends({}, iconSlots, {
+  baseBadge: MUIBadge,
   baseCheckbox: MUICheckbox,
+  baseDivider: MUIDivider,
   baseTextField: MUITextField,
   baseFormControl: MUIFormControl,
   baseSelect: MUISelect,

package/node/components/GridRow.js

@@ -23,7 +23,7 @@ var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 var _domUtils = require("../utils/domUtils");
 var _gridCheckboxSelectionColDef = require("../colDef/gridCheckboxSelectionColDef");
 var _gridActionsColDef = require("../colDef/gridActionsColDef");
-var _gridDetailPanelToggleField = require("../constants/gridDetailPanelToggleField");
+var _constants = require("../internals/constants");
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
@@ -145,7 +145,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       }
 
       // User opened a detail panel
-      if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+      if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
         return;
       }
 

package/node/components/cell/GridBooleanCell.js

@@ -11,10 +11,13 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _gridRowsSelector = require("../../hooks/features/rows/gridRowsSelector");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
+var _constants = require("../../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 const useUtilityClasses = ownerState => {
@@ -28,7 +31,8 @@ const useUtilityClasses = ownerState => {
 };
 function GridBooleanCellRaw(props) {
   const {
-      value
+      value,
+      rowNode
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -37,7 +41,14 @@ function GridBooleanCellRaw(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const maxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
+  const isServerSideRowGroupingRow =
+  // @ts-expect-error - Access tree data prop
+  maxDepth > 0 && rowNode.type === 'group' && rootProps.treeData === false;
   const Icon = React.useMemo(() => value ? rootProps.slots.booleanCellTrueIcon : rootProps.slots.booleanCellFalseIcon, [rootProps.slots.booleanCellFalseIcon, rootProps.slots.booleanCellTrueIcon, value]);
+  if (isServerSideRowGroupingRow && value === undefined) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({
     fontSize: "small",
     className: classes.root,
@@ -113,7 +124,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 } : void 0;
 const GridBooleanCell = exports.GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 const renderBooleanCell = params => {
-  if (params.field !== '__row_group_by_columns_group__' && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
+  if (params.field !== _constants.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridBooleanCell, (0, _extends2.default)({}, params));

package/node/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -10,7 +10,6 @@ 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 _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _hooks = require("../../hooks");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -84,7 +83,7 @@ function GridColumnHeaderFilterIconButton(props) {
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridIconButtonContainer.GridIconButtonContainer, {
-      children: [counter > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+      children: [counter > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
         badgeContent: counter,
         color: "default",
         children: iconButton

package/node/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -71,7 +70,7 @@ function GridColumnHeaderSortIconRaw(props) {
     children: iconElement
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridIconButtonContainer.GridIconButtonContainer, {
-    children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+    children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
       badgeContent: index,
       color: "default",
       overlap: "circular",

package/node/components/containers/GridRootStyles.js

@@ -159,6 +159,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
   }, {
     [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
   }, {
     [`& .${_gridClasses.gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
   }, {
@@ -692,7 +694,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
     },
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}, .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -725,7 +727,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       }
     },
     [`& .${_gridClasses.gridClasses.filler}`]: {
-      flex: 1
+      flex: '1 0 auto'
     },
     [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'

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

@@ -46,7 +46,7 @@ function GridFilterInputBoolean(props) {
     const value = event.target.value;
     setFilterValueState(value);
     applyValue((0, _extends2.default)({}, item, {
-      value
+      value: Boolean(value)
     }));
   }, [applyValue, item]);
   React.useEffect(() => {

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

@@ -47,9 +47,9 @@ function GridFilterInputMultipleValue(props) {
   const handleChange = React.useCallback((event, value) => {
     setFilterValueState(value.map(String));
     applyValue((0, _extends2.default)({}, item, {
-      value: [...value]
+      value: [...value.map(filterItemValue => type === 'number' ? Number(filterItemValue) : filterItemValue)]
     }));
-  }, [applyValue, item]);
+  }, [applyValue, item, type]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     multiple: true,
     freeSolo: true,

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

@@ -42,13 +42,13 @@ function GridFilterInputValue(props) {
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       const newItem = (0, _extends2.default)({}, item, {
-        value,
+        value: type === 'number' ? Number(value) : value,
         fromInput: id
       });
       applyValue(newItem);
       setIsApplying(false);
     });
-  }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
+  }, [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue]);
   React.useEffect(() => {
     const itemPlusTag = item;
     if (itemPlusTag.fromInput !== id || item.value === undefined) {

package/node/components/toolbar/GridToolbar.js

@@ -10,7 +10,6 @@ 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 _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _GridToolbarContainer = require("../containers/GridToolbarContainer");
 var _GridToolbarColumnsButton = require("./GridToolbarColumnsButton");
 var _GridToolbarDensitySelector = require("./GridToolbarDensitySelector");
@@ -44,8 +43,8 @@ const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function
       // TODO: remove the reference to excelOptions in community package
       ,
       excelOptions: excelOptions
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      sx: {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
         flex: 1
       }
     }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]

package/node/components/toolbar/GridToolbarExport.js

@@ -88,19 +88,7 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     hideFooter: _propTypes.default.bool,
     hideToolbar: _propTypes.default.bool,
     includeCheckboxes: _propTypes.default.bool,
-    pageStyle: _propTypes.default.oneOfType([_propTypes.default.shape({
-      '__@hasInstance@646': _propTypes.default.func.isRequired,
-      '__@metadata@648': _propTypes.default.any,
-      apply: _propTypes.default.func.isRequired,
-      arguments: _propTypes.default.any.isRequired,
-      bind: _propTypes.default.func.isRequired,
-      call: _propTypes.default.func.isRequired,
-      caller: _propTypes.default.object.isRequired,
-      length: _propTypes.default.number.isRequired,
-      name: _propTypes.default.string.isRequired,
-      prototype: _propTypes.default.any.isRequired,
-      toString: _propTypes.default.func.isRequired
-    }), _propTypes.default.string])
+    pageStyle: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
   })
 } : void 0;
 const GridToolbarExport = exports.GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
-var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
@@ -112,7 +111,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
         badgeContent: activeFilters.length,
         color: "primary",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {})

package/node/components/virtualization/GridBottomContainer.js

@@ -12,9 +12,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
-var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = () => {
   const slots = {
@@ -29,22 +26,8 @@ const Element = (0, _system.styled)('div')({
 });
 function GridBottomContainer(props) {
   const classes = useUtilityClasses();
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const {
-    viewportOuterSize,
-    minimumSize,
-    hasScrollX,
-    scrollbarSize
-  } = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
-  const scrollHeight = hasScrollX ? scrollbarSize : 0;
-  const offset = Math.max(viewportOuterSize.height - minimumSize.height -
-  // Subtract scroll height twice to account for GridVirtualScrollerFiller and horizontal scrollbar
-  2 * scrollHeight, 0);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
     className: (0, _clsx.default)(classes.root, _gridClasses.gridClasses['container--bottom']),
-    style: {
-      transform: `translateY(${offset}px)`
-    },
     role: "presentation"
   }));
 }

package/node/components/virtualization/GridMainContainer.js

@@ -15,7 +15,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 const GridPanelAnchor = (0, _system.styled)('div')({
   position: 'absolute',
   top: `var(--DataGrid-headersTotalHeight)`,
-  left: 0
+  left: 0,
+  width: 'calc(100% - (var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))'
 });
 const Element = (0, _system.styled)('div', {
   name: 'MuiDataGrid',

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -80,6 +80,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
     if (scroller[propertyScroll] === lastPosition.current) {
       return;
     }
+    lastPosition.current = scroller[propertyScroll];
     if (isLocked.current) {
       isLocked.current = false;
       return;
@@ -87,7 +88,6 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
     isLocked.current = true;
     const value = scroller[propertyScroll] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
-    lastPosition.current = scroller[propertyScroll];
   });
   const onScrollbarScroll = (0, _utils.unstable_useEventCallback)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;

package/node/components/virtualization/GridVirtualScroller.js

@@ -48,6 +48,8 @@ const Scroller = (0, _system.styled)('div', {
   flexGrow: 1,
   overflow: 'scroll',
   scrollbarWidth: 'none' /* Firefox */,
+  display: 'flex',
+  flexDirection: 'column',
   '&::-webkit-scrollbar': {
     display: 'none' /* Safari and Chrome */
   },