@mui/x-data-grid 6.3.0 → 6.4.0

package/joy/joySlots.js

@@ -1,9 +1,13 @@
 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 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
-  _excluded3 = ["color", "size", "sx"],
-  _excluded4 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"];
+  _excluded2 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
+  _excluded3 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
+  _excluded4 = ["color", "size", "sx", "touchRippleRef"],
+  _excluded5 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"],
+  _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 JoyCheckbox from '@mui/joy/Checkbox';
 import JoyInput from '@mui/joy/Input';
@@ -12,6 +16,15 @@ import JoyFormLabel from '@mui/joy/FormLabel';
 import JoyButton from '@mui/joy/Button';
 import JoyIconButton from '@mui/joy/IconButton';
 import JoySwitch from '@mui/joy/Switch';
+import JoySelect from '@mui/joy/Select';
+import JoyOption from '@mui/joy/Option';
+import JoyBox from '@mui/joy/Box';
+import JoyTypography from '@mui/joy/Typography';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import joyIconSlots, { GridKeyboardArrowRight, GridKeyboardArrowLeft } from './icons';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridFilteredTopLevelRowCountSelector, gridPaginationModelSelector } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function convertColor(color) {
@@ -33,14 +46,17 @@ function convertSize(size) {
     large: 'lg'
   }[size] : size;
 }
-function convertVariant(variant) {
-  return variant ? {
+function convertVariant(variant, defaultVariant = 'plain') {
+  if (!variant) {
+    return defaultVariant;
+  }
+  return {
+    standard: 'outlined',
     outlined: 'outlined',
     contained: 'solid',
     text: 'plain',
-    standard: 'plain',
     filled: 'soft'
-  }[variant] : variant;
+  }[variant] || defaultVariant;
 }
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -61,37 +77,47 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: onChange
   }));
 });
-const TextField = /*#__PURE__*/React.forwardRef(({
-  onChange,
-  label,
-  placeholder,
-  value,
-  inputRef,
-  type
-}, ref) => {
+const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  var _props$InputProps, _props$inputProps;
+  let {
+      onChange,
+      label,
+      placeholder,
+      value,
+      inputRef,
+      type,
+      size,
+      variant
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const rootRef = useForkRef(ref, (_props$InputProps = props.InputProps) == null ? void 0 : _props$InputProps.ref);
+  const inputForkRef = useForkRef(inputRef, props == null ? void 0 : (_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.ref);
+  const {
+    startAdornment,
+    endAdornment
+  } = props.InputProps || {};
   return /*#__PURE__*/_jsxs(JoyFormControl, {
-    ref: ref,
+    ref: rootRef,
     children: [/*#__PURE__*/_jsx(JoyFormLabel, {
-      sx: {
-        fontSize: 12
-      },
       children: label
     }), /*#__PURE__*/_jsx(JoyInput, {
       type: type,
       value: value,
       onChange: onChange,
       placeholder: placeholder,
-      size: "sm",
+      variant: convertVariant(variant, 'outlined'),
+      size: convertSize(size),
       slotProps: {
-        input: {
-          ref: inputRef
-        }
-      }
+        input: _extends({}, props == null ? void 0 : props.inputProps, {
+          ref: inputForkRef
+        })
+      },
+      startDecorator: startAdornment,
+      endDecorator: endAdornment
     })]
   });
 });
-const Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
-  var _convertVariant;
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
   let {
       startIcon,
       color,
@@ -99,26 +125,26 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
       size,
       sx,
       variant
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   return /*#__PURE__*/_jsx(JoyButton, _extends({}, props, {
     size: convertSize(size),
     color: convertColor(color),
-    variant: (_convertVariant = convertVariant(variant)) != null ? _convertVariant : 'plain',
+    variant: convertVariant(variant),
     ref: ref,
     startDecorator: startIcon,
     endDecorator: endIcon,
     sx: sx
   }));
 });
-const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref3, ref) {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
   var _convertColor;
   let {
       color,
       size,
       sx
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return /*#__PURE__*/_jsx(JoyIconButton, _extends({}, props, {
     size: convertSize(size),
     color: (_convertColor = convertColor(color)) != null ? _convertColor : 'neutral',
@@ -127,7 +153,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref3, ref)
     sx: sx
   }));
 });
-const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref5, ref) {
   let {
       name,
       color: colorProp,
@@ -139,8 +165,8 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
       sx,
       onChange,
       onClick
-    } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   return /*#__PURE__*/_jsx(JoySwitch, _extends({}, props, {
     onChange: onChange,
     size: convertSize(size),
@@ -163,17 +189,203 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
     }), ...(Array.isArray(sx) ? sx : [sx])]
   }));
 });
-const joySlots = {
+const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+      open,
+      onOpen,
+      value,
+      onChange,
+      size,
+      color,
+      variant,
+      MenuProps,
+      inputRef,
+      labelId
+    } = _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
+
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
+      // Clone the event to not override `target` of the original event.
+      const nativeEvent = event.nativeEvent || event;
+      // @ts-ignore The nativeEvent is function, not object
+      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+      Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: {
+          value: newValue,
+          name: props.name
+        }
+      });
+      onChange(clonedEvent, null);
+    }
+  };
+  return /*#__PURE__*/_jsx(JoySelect, _extends({}, props, {
+    listboxOpen: open,
+    onListboxOpenChange: isOpen => {
+      if (isOpen) {
+        onOpen == null ? void 0 : onOpen({});
+      } else {
+        var _MenuProps$onClose;
+        MenuProps == null ? void 0 : (_MenuProps$onClose = MenuProps.onClose) == null ? void 0 : _MenuProps$onClose.call(MenuProps, {}, undefined);
+      }
+    },
+    size: convertSize(size),
+    color: convertColor(color),
+    variant: convertVariant(variant, 'outlined'),
+    ref: ref,
+    value: value,
+    onChange: handleChange,
+    slotProps: {
+      button: {
+        'aria-labelledby': labelId,
+        ref: inputRef
+      },
+      listbox: {
+        disablePortal: false,
+        sx: {
+          zIndex: 1350
+        }
+      }
+    }
+  }));
+});
+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((_ref8, ref) => {
+  let {
+      sx
+    } = _ref8,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+  return /*#__PURE__*/_jsx(JoyFormLabel, _extends({}, props, {
+    ref: ref,
+    sx: sx
+  }));
+});
+function labelDisplayedRows({
+  from,
+  to,
+  count
+}) {
+  return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+}
+const getLabelDisplayedRowsTo = ({
+  page,
+  pageSize,
+  rowCount
+}) => {
+  if (rowCount === -1) {
+    return (page + 1) * pageSize;
+  }
+  return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
+};
+const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _rootProps$pageSizeOp;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const paginationModel = gridPaginationModelSelector(apiRef);
+  const visibleTopLevelRowCount = gridFilteredTopLevelRowCountSelector(apiRef);
+  const rowCount = React.useMemo(() => {
+    var _ref9, _rootProps$rowCount;
+    return (_ref9 = (_rootProps$rowCount = rootProps.rowCount) != null ? _rootProps$rowCount : visibleTopLevelRowCount) != null ? _ref9 : 0;
+  }, [rootProps.rowCount, visibleTopLevelRowCount]);
+  const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
+  const handlePageChange = React.useCallback(page => {
+    apiRef.current.setPage(page);
+  }, [apiRef]);
+  const page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
+  const pageSize = paginationModel.pageSize;
+  const pageSizeOptions = (_rootProps$pageSizeOp = rootProps.pageSizeOptions) != null && _rootProps$pageSizeOp.includes(pageSize) ? rootProps.pageSizeOptions : [];
+  const handleChangeRowsPerPage = (event, newValue) => {
+    const newPageSize = Number(newValue);
+    apiRef.current.setPageSize(newPageSize);
+  };
+  return /*#__PURE__*/_jsxs(JoyBox, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 2,
+      justifyContent: 'flex-end',
+      px: 2
+    },
+    ref: ref,
+    children: [/*#__PURE__*/_jsxs(JoyFormControl, {
+      orientation: "horizontal",
+      size: "sm",
+      children: [/*#__PURE__*/_jsx(JoyFormLabel, {
+        children: "Rows per page:"
+      }), /*#__PURE__*/_jsx(JoySelect, {
+        onChange: handleChangeRowsPerPage,
+        value: pageSize,
+        children: pageSizeOptions.map(option => {
+          return /*#__PURE__*/_jsx(Option, {
+            value: option,
+            children: option
+          }, option);
+        })
+      })]
+    }), /*#__PURE__*/_jsx(JoyTypography, {
+      textAlign: "center",
+      fontSize: "xs",
+      fontWeight: "md",
+      children: labelDisplayedRows({
+        from: rowCount === 0 ? 0 : page * pageSize + 1,
+        to: getLabelDisplayedRowsTo({
+          page,
+          pageSize,
+          rowCount
+        }),
+        count: rowCount === -1 ? -1 : rowCount
+      })
+    }), /*#__PURE__*/_jsxs(JoyBox, {
+      sx: {
+        display: 'flex',
+        gap: 0.5
+      },
+      children: [/*#__PURE__*/_jsx(JoyIconButton, {
+        size: "sm",
+        color: "neutral",
+        variant: "outlined",
+        disabled: page === 0,
+        onClick: () => handlePageChange(page - 1),
+        sx: {
+          bgcolor: 'background.surface'
+        },
+        children: /*#__PURE__*/_jsx(GridKeyboardArrowLeft, {})
+      }), /*#__PURE__*/_jsx(JoyIconButton, {
+        size: "sm",
+        color: "neutral",
+        variant: "outlined",
+        disabled: rowCount !== -1 ? page >= Math.ceil(rowCount / pageSize) - 1 : false,
+        onClick: () => handlePageChange(page + 1),
+        sx: {
+          bgcolor: 'background.surface'
+        },
+        children: /*#__PURE__*/_jsx(GridKeyboardArrowRight, {})
+      })]
+    })]
+  });
+});
+const joySlots = _extends({}, joyIconSlots, {
   baseCheckbox: Checkbox,
   baseTextField: TextField,
   baseButton: Button,
   baseIconButton: IconButton,
-  baseSwitch: Switch
-  // BaseFormControl: MUIFormControl,
-  // baseSelect: Select,
-  // baseSelectOption: Option,
+  baseSwitch: Switch,
+  baseSelect: Select,
+  baseSelectOption: Option,
+  baseInputLabel: InputLabel,
+  baseFormControl: JoyFormControl,
   // BaseTooltip: MUITooltip,
   // BasePopper: MUIPopper,
-};
-
+  pagination: Pagination
+});
 export default joySlots;

package/legacy/DataGrid/DataGrid.js

@@ -68,6 +68,11 @@ DataGridRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * The character used to separate cell values when copying to the clipboard.
+   * @default '\t'
+   */
+  clipboardCopyCellDelimiter: PropTypes.string,
   /**
    * Number of extra columns to be rendered before/after the visible slice.
    * @default 3
@@ -328,6 +333,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onCellModesModelChange: PropTypes.func,
+  /**
+   * Callback called when the data is copied to the clipboard.
+   * @param {string} data The data copied to the clipboard.
+   */
+  onClipboardCopy: PropTypes.func,
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -613,5 +623,14 @@ DataGridRaw.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
+   * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
+   * @default: false
+   */
+  unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
+    clipboardExport: PropTypes.bool,
+    csvExport: PropTypes.bool
+  }), PropTypes.bool])
 };

package/legacy/DataGrid/useDataGridComponent.js

@@ -67,9 +67,9 @@ export var useDataGridComponent = function useDataGridComponent(inputApiRef, pro
   useGridRowsMeta(privateApiRef, props);
   useGridScroll(privateApiRef, props);
   useGridColumnMenu(privateApiRef);
-  useGridCsvExport(privateApiRef);
+  useGridCsvExport(privateApiRef, props);
   useGridPrintExport(privateApiRef, props);
-  useGridClipboard(privateApiRef);
+  useGridClipboard(privateApiRef, props);
   useGridDimensions(privateApiRef, props);
   useGridEvents(privateApiRef, props);
   useGridStatePersistence(privateApiRef);

package/legacy/DataGrid/useDataGridProps.js

@@ -66,7 +66,9 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableColumnReorder: false,
   disableColumnResize: false,
   keepNonExistentRowsSelected: false,
-  keepColumnPositionIfDraggedOutside: false
+  keepColumnPositionIfDraggedOutside: false,
+  unstable_ignoreValueFormatterDuringExport: false,
+  clipboardCopyCellDelimiter: '\t'
 };
 var defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 export var useDataGridProps = function useDataGridProps(inProps) {

package/legacy/colDef/gridBooleanColDef.js

@@ -9,6 +9,22 @@ function gridBooleanFormatter(_ref) {
     api = _ref.api;
   return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
 }
+var stringToBoolean = function stringToBoolean(value) {
+  switch (value.toLowerCase().trim()) {
+    case 'true':
+    case 'yes':
+    case '1':
+      return true;
+    case 'false':
+    case 'no':
+    case '0':
+    case 'null':
+    case 'undefined':
+      return false;
+    default:
+      return undefined;
+  }
+};
 export var GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'boolean',
   align: 'center',
@@ -20,5 +36,9 @@ export var GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridBooleanOperators(),
   getApplyQuickFilterFn: undefined,
   // @ts-ignore
-  aggregable: false
+  aggregable: false,
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value) {
+    return stringToBoolean(value);
+  }
 });

package/legacy/colDef/gridDateColDef.js

@@ -48,7 +48,11 @@ export var GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value) {
+    return new Date(value);
+  }
 });
 export var GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'dateTime',
@@ -56,5 +60,9 @@ export var GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value) {
+    return new Date(value);
+  }
 });

package/legacy/colDef/gridSingleSelectColDef.js

@@ -52,5 +52,25 @@ export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
     return valueOption ? colDef.getOptionLabel(valueOption) : '';
   },
   renderEditCell: renderEditSingleSelectCell,
-  filterOperators: getGridSingleSelectOperators()
+  filterOperators: getGridSingleSelectOperators(),
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value, params) {
+    var colDef = params.colDef;
+    var colDefValueOptions = colDef.valueOptions;
+    var valueOptions = typeof colDefValueOptions === 'function' ? colDefValueOptions({
+      field: colDef.field
+    }) : colDefValueOptions || [];
+    var getOptionValue = colDef.getOptionValue;
+    var valueOption = valueOptions.find(function (option) {
+      if (getOptionValue(option) === value) {
+        return true;
+      }
+      return false;
+    });
+    if (valueOption) {
+      return value;
+    }
+    // do not paste the value if it is not in the valueOptions
+    return undefined;
+  }
 });

package/legacy/components/GridPagination.js

@@ -43,9 +43,11 @@ export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginatio
     apiRef.current.setPage(page);
   }, [apiRef]);
   if (process.env.NODE_ENV !== 'production') {
+    var _rootProps$pagination, _rootProps$pagination2;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var warnedOnceMissingInPageSizeOptions = React.useRef(false);
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(paginationModel.pageSize)) {
+    var pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
       console.warn(["MUI: The page size `".concat(paginationModel.pageSize, "` is not preset in the `pageSizeOptions`"), "Add it to show the pagination select."].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }

package/legacy/components/base/GridBody.js

@@ -18,7 +18,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
   var VirtualScrollerComponent = props.VirtualScrollerComponent,
-    ColumnHeadersProps = props.ColumnHeadersProps;
+    ColumnHeadersProps = props.ColumnHeadersProps,
+    children = props.children;
   var apiRef = useGridPrivateApiContext();
   var rootProps = useGridRootProps();
   var rootRef = React.useRef(null);
@@ -90,7 +91,8 @@ function GridBody(props) {
   apiRef.current.register('private', {
     columnHeadersContainerElementRef: columnsContainerRef,
     columnHeadersElementRef: columnHeadersRef,
-    virtualScrollerRef: virtualScrollerRef
+    virtualScrollerRef: virtualScrollerRef,
+    mainElementRef: rootRef
   });
   var hasDimensions = !!apiRef.current.getRootDimensions();
   return /*#__PURE__*/_jsxs(GridMainContainer, {
@@ -121,7 +123,7 @@ function GridBody(props) {
     , {
       ref: virtualScrollerRef,
       disableVirtualization: isVirtualizationDisabled
-    })]
+    }), children]
   });
 }
 process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
@@ -129,6 +131,7 @@ process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  children: PropTypes.node,
   ColumnHeadersProps: PropTypes.object,
   VirtualScrollerComponent: PropTypes.elementType.isRequired
 } : void 0;

package/legacy/components/containers/GridRootStyles.js

@@ -39,6 +39,7 @@ export var GridRootStyles = styled('div', {
     outline: 'none',
     height: '100%',
     display: 'flex',
+    overflow: 'hidden',
     flexDirection: 'column',
     overflowAnchor: 'none'
   }, _defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({

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

@@ -4,7 +4,6 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "col
 import * as React from 'react';
 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 { isSingleSelectColDef } from './filterPanelUtils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
@@ -108,7 +107,7 @@ function GridFilterInputMultipleSingleSelect(props) {
     getOptionLabel: getOptionLabel,
     renderTags: function renderTags(value, getTagProps) {
       return value.map(function (option, index) {
-        return /*#__PURE__*/_jsx(Chip, _extends({
+        return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
           variant: "outlined",
           size: "small",
           label: getOptionLabel(option)

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

@@ -6,7 +6,6 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "col
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
-import Chip from '@mui/material/Chip';
 import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,7 +58,7 @@ function GridFilterInputMultipleValue(props) {
     onChange: handleChange,
     renderTags: function renderTags(value, getTagProps) {
       return value.map(function (option, index) {
-        return /*#__PURE__*/_jsx(Chip, _extends({
+        return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
           variant: "outlined",
           size: "small",
           label: option

package/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -73,7 +73,9 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
         ownerState: rootProps,
         children: activeFilters.map(function (item, index) {
           return _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
-            children: "".concat(lookup[item.field].headerName || item.field, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat(item.value ? getFilterItemValue(item) : '')
+            children: "".concat(lookup[item.field].headerName || item.field, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat(
+            // implicit check for null and undefined
+            item.value != null ? getFilterItemValue(item) : '')
           }, index));
         })
       })]