@mui/material 5.10.11 → 5.10.13

package/esm/Input/Input.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "type"];
+const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
@@ -111,6 +111,8 @@ const InputInput = styled(InputBaseInput, {
   overridesResolver: inputBaseInputOverridesResolver
 })({});
 const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
+  var _ref, _slots$root, _ref2, _slots$input;
+
   const props = useThemeProps({
     props: inProps,
     name: 'MuiInput'
@@ -123,6 +125,8 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     fullWidth = false,
     inputComponent = 'input',
     multiline = false,
+    slotProps,
+    slots = {},
     type = 'text'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -136,13 +140,15 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       ownerState
     }
   };
-  const componentsProps = componentsPropsProp ? deepmerge(componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : InputRoot;
+  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : InputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: InputRoot,
-      Input: InputInput
-    }, components),
-    componentsProps: componentsProps,
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
+    slotProps: componentsProps,
     fullWidth: fullWidth,
     inputComponent: inputComponent,
     multiline: multiline,
@@ -188,8 +194,11 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -198,7 +207,12 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Input.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -320,6 +334,31 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/esm/InputBase/InputBase.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
+const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -215,6 +215,8 @@ const inputGlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
 
 
 const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
+  var _slotProps$input;
+
   const props = useThemeProps({
     props: inProps,
     name: 'MuiInputBase'
@@ -250,6 +252,8 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     readOnly,
     renderSuffix,
     rows,
+    slotProps = {},
+    slots = {},
     startAdornment,
     type = 'text',
     value: valueProp
@@ -453,10 +457,10 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   });
 
   const classes = useUtilityClasses(ownerState);
-  const Root = components.Root || InputBaseRoot;
-  const rootProps = componentsProps.root || {};
-  const Input = components.Input || InputBaseComponent;
-  inputProps = _extends({}, inputProps, componentsProps.input);
+  const Root = slots.root || components.Root || InputBaseRoot;
+  const rootProps = slotProps.root || componentsProps.root || {};
+  const Input = slots.input || components.Input || InputBaseComponent;
+  inputProps = _extends({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
@@ -548,8 +552,11 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -558,7 +565,12 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Input.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -726,6 +738,31 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/esm/ListItem/ListItem.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className"],
-      _excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"];
+      _excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -159,17 +159,19 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     divider = false,
     focusVisibleClassName,
     secondaryAction,
-    selected = false
+    selected = false,
+    slotProps = {},
+    slots = {}
   } = props,
         ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded),
         other = _objectWithoutPropertiesLoose(props, _excluded2);
 
   const context = React.useContext(ListContext);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {
@@ -199,8 +201,8 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
   const handleRef = useForkRef(listItemRef, ref);
-  const Root = components.Root || ListItemRoot;
-  const rootProps = componentsProps.root || {};
+  const Root = slots.root || components.Root || ListItemRoot;
+  const rootProps = slotProps.root || componentsProps.root || {};
 
   const componentProps = _extends({
     className: clsx(classes.root, rootProps.className, className),
@@ -250,8 +252,7 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     value: childContext,
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       as: Component,
-      ref: handleRef,
-      ownerState: ownerState
+      ref: handleRef
     }, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
     }, componentProps, {
@@ -334,8 +335,11 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -343,7 +347,12 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Input.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -413,6 +422,29 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    */
   selected: PropTypes.bool,
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/ListItemButton/ListItemButton.js

@@ -121,11 +121,11 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const context = React.useContext(ListContext);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {

package/esm/MenuItem/MenuItem.js

@@ -144,10 +144,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const context = React.useContext(ListContext);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     disableGutters
-  };
+  }), [context.dense, dense, disableGutters]);
   const menuItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {

package/esm/Modal/Modal.js

@@ -188,8 +188,11 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for each slot inside the Modal.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -198,7 +201,12 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Modal.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({

package/esm/NativeSelect/NativeSelectInput.js

@@ -41,12 +41,14 @@ export const nativeSelectSelectStyles = ({
   borderRadius: 0,
   // Reset
   cursor: 'pointer',
-  '&:focus': {
-    // Show that it's not an text input
-    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
+  '&:focus': _extends({}, theme.vars ? {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
+  } : {
+    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
+  }, {
     borderRadius: 0 // Reset Chrome style
 
-  },
+  }),
   // Remove IE11 arrow
   '&::-ms-expand': {
     display: 'none'
@@ -58,7 +60,7 @@ export const nativeSelectSelectStyles = ({
     height: 'auto'
   },
   '&:not([multiple]) option, &:not([multiple]) optgroup': {
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   },
   // Bump specificity to allow extending custom inputs
   '&&&': {
@@ -71,9 +73,9 @@ export const nativeSelectSelectStyles = ({
     paddingRight: 32
   }
 }, ownerState.variant === 'outlined' && {
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
   '&:focus': {
-    borderRadius: theme.shape.borderRadius // Reset the reset for Chrome style
+    borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
 
   },
   '&&&': {
@@ -105,9 +107,9 @@ export const nativeSelectIconStyles = ({
   // Center vertically, height is 1em
   pointerEvents: 'none',
   // Don't block pointer events on the select under the icon.
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   [`&.${nativeSelectClasses.disabled}`]: {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }, ownerState.open && {
   transform: 'rotate(180deg)'

package/esm/OutlinedInput/OutlinedInput.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"];
+const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -119,7 +119,7 @@ const OutlinedInputInput = styled(InputBaseInput, {
   paddingRight: 0
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _React$Fragment;
+  var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
 
   const props = useThemeProps({
     props: inProps,
@@ -133,6 +133,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     label,
     multiline = false,
     notched,
+    slots = {},
     type = 'text'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -158,11 +159,13 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     type
   });
 
+  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : OutlinedInputRoot;
+  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : OutlinedInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: OutlinedInputRoot,
-      Input: OutlinedInputInput
-    }, components),
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
     renderSuffix: state => /*#__PURE__*/_jsx(NotchedOutlineRoot, {
       ownerState: ownerState,
       className: classes.notchedOutline,
@@ -218,8 +221,11 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -347,6 +353,18 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/esm/PaginationItem/PaginationItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "type", "variant"];
+const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -216,17 +216,13 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     className,
     color = 'standard',
     component,
-    components = {
-      first: FirstPageIcon,
-      last: LastPageIcon,
-      next: NavigateNextIcon,
-      previous: NavigateBeforeIcon
-    },
+    components = {},
     disabled = false,
     page,
     selected = false,
     shape = 'circular',
     size = 'medium',
+    slots = {},
     type = 'page',
     variant = 'text'
   } = props,
@@ -245,15 +241,15 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
   const theme = useTheme();
   const classes = useUtilityClasses(ownerState);
   const normalizedIcons = theme.direction === 'rtl' ? {
-    previous: components.next || NavigateNextIcon,
-    next: components.previous || NavigateBeforeIcon,
-    last: components.first || FirstPageIcon,
-    first: components.last || LastPageIcon
+    previous: slots.next || components.next || NavigateNextIcon,
+    next: slots.previous || components.previous || NavigateBeforeIcon,
+    last: slots.first || components.first || FirstPageIcon,
+    first: slots.last || components.last || LastPageIcon
   } : {
-    previous: components.previous || NavigateBeforeIcon,
-    next: components.next || NavigateNextIcon,
-    first: components.first || FirstPageIcon,
-    last: components.last || LastPageIcon
+    previous: slots.previous || components.previous || NavigateBeforeIcon,
+    next: slots.next || components.next || NavigateNextIcon,
+    first: slots.first || components.first || FirstPageIcon,
+    last: slots.last || components.last || LastPageIcon
   };
   const Icon = normalizedIcons[type];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, {
@@ -315,13 +311,12 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for first, last, next & previous item type
-   * @default {
-   *   first: FirstPageIcon,
-   *   last: LastPageIcon,
-   *   next: NavigateNextIcon,
-   *   previous: NavigateBeforeIcon,
-   * }
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
    */
   components: PropTypes.shape({
     first: PropTypes.elementType,
@@ -361,6 +356,20 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
 
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    first: PropTypes.elementType,
+    last: PropTypes.elementType,
+    next: PropTypes.elementType,
+    previous: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Radio/Radio.js

@@ -42,7 +42,8 @@ const RadioRoot = styled(SwitchBase, {
   theme,
   ownerState
 }) => _extends({
-  color: (theme.vars || theme).palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary
+}, !ownerState.disableRipple && {
   '&:hover': {
     backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity

package/esm/RadioGroup/RadioGroup.js

@@ -42,22 +42,22 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     }
   }), []);
   const handleRef = useForkRef(ref, rootRef);
+  const name = useId(nameProp);
+  const contextValue = React.useMemo(() => ({
+    name,
 
-  const handleChange = event => {
-    setValueState(event.target.value);
+    onChange(event) {
+      setValueState(event.target.value);
 
-    if (onChange) {
-      onChange(event, event.target.value);
-    }
-  };
+      if (onChange) {
+        onChange(event, event.target.value);
+      }
+    },
 
-  const name = useId(nameProp);
+    value
+  }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
-    value: {
-      name,
-      onChange: handleChange,
-      value
-    },
+    value: contextValue,
     children: /*#__PURE__*/_jsx(FormGroup, _extends({
       role: "radiogroup",
       ref: handleRef

package/esm/Select/Select.js

@@ -244,14 +244,14 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    *
    * @param {SelectChangeEvent<T>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
-   * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.
+   * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
    * @param {object} [child] The react element that was selected when `native` is `false` (default).
    */
   onChange: PropTypes.func,
 
   /**
    * Callback fired when the component requests to be closed.
-   * Use in controlled mode (see open).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapes).
    *
    * @param {object} event The event source of the callback.
    */
@@ -259,7 +259,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
 
   /**
    * Callback fired when the component requests to be opened.
-   * Use in controlled mode (see open).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select expands).
    *
    * @param {object} event The event source of the callback.
    */