@mui/x-data-grid 6.3.0 → 6.3.1

package/legacy/joy/joySlots.js

@@ -2,9 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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';
@@ -13,6 +17,9 @@ 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 { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function convertColor(color) {
@@ -35,13 +42,17 @@ function convertSize(size) {
   }[size] : size;
 }
 function convertVariant(variant) {
-  return variant ? {
+  var defaultVariant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'plain';
+  if (!variant) {
+    return defaultVariant;
+  }
+  return {
+    standard: 'outlined',
     outlined: 'outlined',
     contained: 'solid',
     text: 'plain',
-    standard: 'plain',
     filled: 'soft'
-  }[variant] : variant;
+  }[variant] || defaultVariant;
 }
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var touchRippleRef = _ref.touchRippleRef,
@@ -66,58 +77,67 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 var TextField = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _props$InputProps, _props$inputProps;
   var onChange = _ref2.onChange,
     label = _ref2.label,
     placeholder = _ref2.placeholder,
     value = _ref2.value,
     inputRef = _ref2.inputRef,
-    type = _ref2.type;
+    type = _ref2.type,
+    size = _ref2.size,
+    variant = _ref2.variant,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var rootRef = useForkRef(ref, (_props$InputProps = props.InputProps) == null ? void 0 : _props$InputProps.ref);
+  var inputForkRef = useForkRef(inputRef, props == null ? void 0 : (_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.ref);
+  var _ref3 = props.InputProps || {},
+    startAdornment = _ref3.startAdornment,
+    endAdornment = _ref3.endAdornment;
   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
     })]
   });
 });
-var Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
-  var _convertVariant;
-  var startIcon = _ref3.startIcon,
-    color = _ref3.color,
-    endIcon = _ref3.endIcon,
-    size = _ref3.size,
-    sx = _ref3.sx,
-    variant = _ref3.variant,
-    props = _objectWithoutProperties(_ref3, _excluded2);
+var Button = /*#__PURE__*/React.forwardRef(function Button(_ref4, ref) {
+  var startIcon = _ref4.startIcon,
+    color = _ref4.color,
+    endIcon = _ref4.endIcon,
+    size = _ref4.size,
+    sx = _ref4.sx,
+    variant = _ref4.variant,
+    props = _objectWithoutProperties(_ref4, _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
   }));
 });
-var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
+var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref5, ref) {
   var _convertColor;
-  var color = _ref4.color,
-    size = _ref4.size,
-    sx = _ref4.sx,
-    props = _objectWithoutProperties(_ref4, _excluded3);
+  var color = _ref5.color,
+    size = _ref5.size,
+    sx = _ref5.sx,
+    touchRippleRef = _ref5.touchRippleRef,
+    props = _objectWithoutProperties(_ref5, _excluded4);
   return /*#__PURE__*/_jsx(JoyIconButton, _extends({}, props, {
     size: convertSize(size),
     color: (_convertColor = convertColor(color)) != null ? _convertColor : 'neutral',
@@ -126,22 +146,22 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
     sx: sx
   }));
 });
-var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref5, ref) {
-  var name = _ref5.name,
-    checkedIcon = _ref5.checkedIcon,
-    colorProp = _ref5.color,
-    disableRipple = _ref5.disableRipple,
-    disableFocusRipple = _ref5.disableFocusRipple,
-    disableTouchRipple = _ref5.disableTouchRipple,
-    edge = _ref5.edge,
-    icon = _ref5.icon,
-    inputProps = _ref5.inputProps,
-    inputRef = _ref5.inputRef,
-    size = _ref5.size,
-    sx = _ref5.sx,
-    onChange = _ref5.onChange,
-    onClick = _ref5.onClick,
-    props = _objectWithoutProperties(_ref5, _excluded4);
+var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref6, ref) {
+  var name = _ref6.name,
+    checkedIcon = _ref6.checkedIcon,
+    colorProp = _ref6.color,
+    disableRipple = _ref6.disableRipple,
+    disableFocusRipple = _ref6.disableFocusRipple,
+    disableTouchRipple = _ref6.disableTouchRipple,
+    edge = _ref6.edge,
+    icon = _ref6.icon,
+    inputProps = _ref6.inputProps,
+    inputRef = _ref6.inputRef,
+    size = _ref6.size,
+    sx = _ref6.sx,
+    onChange = _ref6.onChange,
+    onClick = _ref6.onClick,
+    props = _objectWithoutProperties(_ref6, _excluded5);
   return /*#__PURE__*/_jsx(JoySwitch, _extends({}, props, {
     onChange: onChange,
     size: convertSize(size),
@@ -164,15 +184,100 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref5, ref) {
     })].concat(_toConsumableArray(Array.isArray(sx) ? sx : [sx]))
   }));
 });
+var Select = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
+  var open = _ref7.open,
+    onOpen = _ref7.onOpen,
+    value = _ref7.value,
+    onChange = _ref7.onChange,
+    size = _ref7.size,
+    color = _ref7.color,
+    variant = _ref7.variant,
+    inputProps = _ref7.inputProps,
+    MenuProps = _ref7.MenuProps,
+    inputRef = _ref7.inputRef,
+    error = _ref7.error,
+    native = _ref7.native,
+    fullWidth = _ref7.fullWidth,
+    labelId = _ref7.labelId,
+    props = _objectWithoutProperties(_ref7, _excluded6);
+  var handleChange = function 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.
+      var nativeEvent = event.nativeEvent || event;
+      // @ts-ignore The nativeEvent is function, not object
+      var 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: function 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
+        }
+      }
+    }
+  }));
+});
+var Option = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
+  var native = _ref8.native,
+    props = _objectWithoutProperties(_ref8, _excluded7);
+  return /*#__PURE__*/_jsx(JoyOption, _extends({}, props, {
+    ref: ref
+  }));
+});
+var InputLabel = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
+  var shrink = _ref9.shrink,
+    variant = _ref9.variant,
+    sx = _ref9.sx,
+    props = _objectWithoutProperties(_ref9, _excluded8);
+  return /*#__PURE__*/_jsx(JoyFormLabel, _extends({}, props, {
+    ref: ref,
+    sx: sx
+  }));
+});
 var joySlots = {
   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,
 };

package/material/index.d.ts

@@ -15,7 +15,8 @@ declare const materialSlots: {
     BaseButton: import("@mui/material").ExtendButtonBase<import("@mui/material/Button").ButtonTypeMap<{}, "button">>;
     BaseIconButton: import("@mui/material").ExtendButtonBase<import("@mui/material/IconButton").IconButtonTypeMap<{}, "button">>;
     BaseTooltip: typeof MUITooltip;
-    BasePopper: import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperProps<"div", {}>, "direction"> & {
+    BasePopper: import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
+        component?: import("react").ElementType<any> | undefined;
         components?: {
             Root?: import("react").ElementType<any> | undefined;
         } | undefined;

package/modern/components/GridPagination.js

@@ -41,7 +41,8 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(paginationModel.pageSize)) {
+    const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }

package/modern/components/base/GridBody.js

@@ -18,7 +18,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
   const {
     VirtualScrollerComponent,
-    ColumnHeadersProps
+    ColumnHeadersProps,
+    children
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -119,7 +120,7 @@ function GridBody(props) {
     , {
       ref: virtualScrollerRef,
       disableVirtualization: isVirtualizationDisabled
-    })]
+    }), children]
   });
 }
 process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
@@ -127,6 +128,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/modern/components/toolbar/GridToolbarFilterButton.js

@@ -68,7 +68,9 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
         children: activeFilters.map((item, index) => _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.field].headerName || item.field}
                   ${getOperatorLabel(item)}
-                  ${item.value ? getFilterItemValue(item) : ''}`
+                  ${
+          // implicit check for null and undefined
+          item.value != null ? getFilterItemValue(item) : ''}`
         }, index)))
       })]
     });

package/modern/hooks/features/focus/useGridFocus.js

@@ -298,9 +298,9 @@ export const useGridFocus = (apiRef, props) => {
   useGridApiMethod(apiRef, focusPrivateApi, 'private');
   React.useEffect(() => {
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
-    doc.addEventListener('click', handleDocumentClick);
+    doc.addEventListener('mouseup', handleDocumentClick);
     return () => {
-      doc.removeEventListener('click', handleDocumentClick);
+      doc.removeEventListener('mouseup', handleDocumentClick);
     };
   }, [apiRef, handleDocumentClick]);
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);

package/modern/index.js

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

package/modern/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,9 @@ 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 { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function convertColor(color) {
@@ -33,14 +40,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,36 +71,46 @@ 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) => {
+  let {
+      onChange,
+      label,
+      placeholder,
+      value,
+      inputRef,
+      type,
+      size,
+      variant
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const rootRef = useForkRef(ref, props.InputProps?.ref);
+  const inputForkRef = useForkRef(inputRef, 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?.inputProps, {
+          ref: inputForkRef
+        })
+      },
+      startDecorator: startAdornment,
+      endDecorator: endAdornment
     })]
   });
 });
-const Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
   let {
       startIcon,
       color,
@@ -98,25 +118,25 @@ 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(variant) ?? '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) {
   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(color) ?? 'neutral',
@@ -125,7 +145,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,
@@ -137,8 +157,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),
@@ -161,15 +181,96 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
     }), ...(Array.isArray(sx) ? sx : [sx])]
   }));
 });
+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?.({});
+      } else {
+        MenuProps?.onClose?.({}, 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
+  }));
+});
 const joySlots = {
   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,
 };

package/node/components/GridPagination.js

@@ -50,7 +50,8 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(paginationModel.pageSize)) {
+    const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }

package/node/components/base/GridBody.js

@@ -26,7 +26,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function GridBody(props) {
   const {
     VirtualScrollerComponent,
-    ColumnHeadersProps
+    ColumnHeadersProps,
+    children
   } = props;
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -127,7 +128,7 @@ function GridBody(props) {
     , {
       ref: virtualScrollerRef,
       disableVirtualization: isVirtualizationDisabled
-    })]
+    }), children]
   });
 }
 process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
@@ -135,6 +136,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.default.node,
   ColumnHeadersProps: _propTypes.default.object,
   VirtualScrollerComponent: _propTypes.default.elementType.isRequired
 } : void 0;