@mui/lab 5.0.0-alpha.60 → 5.0.0-alpha.64

package/LoadingButton/LoadingButton.js

@@ -1,10 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "disabled", "loading", "loadingIndicator", "loadingPosition", "variant"];
+const _excluded = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
-import { capitalize } from '@mui/material/utils';
+import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
@@ -112,12 +112,6 @@ const LoadingButtonLoadingIndicator = styled('div', {
   position: 'relative',
   right: -10
 }));
-
-const LoadingIndicator = /*#__PURE__*/_jsx(CircularProgress, {
-  color: "inherit",
-  size: 16
-});
-
 const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -127,13 +121,21 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
   const {
     children,
     disabled = false,
+    id: idProp,
     loading = false,
-    loadingIndicator = LoadingIndicator,
+    loadingIndicator: loadingIndicatorProp,
     loadingPosition = 'center',
     variant = 'text'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp != null ? loadingIndicatorProp : /*#__PURE__*/_jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
+
   const ownerState = _extends({}, props, {
     disabled,
     loading,
@@ -145,6 +147,7 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(LoadingButtonRoot, _extends({
     disabled: disabled || loading,
+    id: id,
     ref: ref
   }, other, {
     variant: variant,
@@ -189,6 +192,11 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
    */
   disabled: PropTypes.bool,
 
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+
   /**
    * If `true`, the loading indicator is shown.
    * @default false
@@ -197,6 +205,8 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
 
   /**
    * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default we render a `CircularProgress` that is labelled by the button itself.
    * @default <CircularProgress color="inherit" size={16} />
    */
   loadingIndicator: PropTypes.node,

package/MobileDatePicker/MobileDatePicker.js

@@ -132,7 +132,11 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -174,7 +174,11 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -144,7 +144,11 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/StaticDatePicker/StaticDatePicker.js

@@ -106,7 +106,11 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/StaticDateRangePicker/StaticDateRangePicker.js

@@ -149,7 +149,11 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -118,7 +118,11 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.60
+/** @license MUI v5.0.0-alpha.64
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/ClockPicker/ClockPicker.js

@@ -28,7 +28,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 
 var ClockPickerArrowSwitcher = styled(PickersArrowSwitcher, {
   name: 'MuiClockPicker',
-  slot: 'ArrowSwticher',
+  slot: 'ArrowSwitcher',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.arrowSwitcher;
   }
@@ -305,7 +305,10 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes
   /**
    * The props used for each slot inside.
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object
+  }),
 
   /**
    * Selected date @DateIOType.

package/legacy/DatePicker/DatePicker.js

@@ -126,7 +126,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/DateRangePicker/DateRangePicker.js

@@ -182,7 +182,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/DateTimePicker/DateTimePicker.js

@@ -138,7 +138,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -121,7 +121,11 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -166,7 +166,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -131,7 +131,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/legacy/LoadingButton/LoadingButton.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
-import { capitalize } from '@mui/material/utils';
+import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
@@ -103,12 +103,6 @@ var LoadingButtonLoadingIndicator = styled('div', {
     right: -10
   });
 });
-
-var LoadingIndicator = /*#__PURE__*/_jsx(CircularProgress, {
-  color: "inherit",
-  size: 16
-});
-
 var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
   var props = useThemeProps({
     props: inProps,
@@ -118,15 +112,22 @@ var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps
   var children = props.children,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      idProp = props.id,
       _props$loading = props.loading,
       loading = _props$loading === void 0 ? false : _props$loading,
-      _props$loadingIndicat = props.loadingIndicator,
-      loadingIndicator = _props$loadingIndicat === void 0 ? LoadingIndicator : _props$loadingIndicat,
+      loadingIndicatorProp = props.loadingIndicator,
       _props$loadingPositio = props.loadingPosition,
       loadingPosition = _props$loadingPositio === void 0 ? 'center' : _props$loadingPositio,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'text' : _props$variant,
-      other = _objectWithoutProperties(props, ["children", "disabled", "loading", "loadingIndicator", "loadingPosition", "variant"]);
+      other = _objectWithoutProperties(props, ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"]);
+
+  var id = useId(idProp);
+  var loadingIndicator = loadingIndicatorProp != null ? loadingIndicatorProp : /*#__PURE__*/_jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
 
   var ownerState = _extends({}, props, {
     disabled: disabled,
@@ -139,6 +140,7 @@ var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(LoadingButtonRoot, _extends({
     disabled: disabled || loading,
+    id: id,
     ref: ref
   }, other, {
     variant: variant,
@@ -183,6 +185,11 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
    */
   disabled: PropTypes.bool,
 
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+
   /**
    * If `true`, the loading indicator is shown.
    * @default false
@@ -191,6 +198,8 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
 
   /**
    * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default we render a `CircularProgress` that is labelled by the button itself.
    * @default <CircularProgress color="inherit" size={16} />
    */
   loadingIndicator: PropTypes.node,

package/legacy/MobileDatePicker/MobileDatePicker.js

@@ -135,7 +135,11 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -180,7 +180,11 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -147,7 +147,11 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/legacy/StaticDatePicker/StaticDatePicker.js

@@ -110,7 +110,11 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/StaticDateRangePicker/StaticDateRangePicker.js

@@ -156,7 +156,11 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/StaticDateTimePicker/StaticDateTimePicker.js

@@ -122,7 +122,11 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.60
+/** @license MUI v5.0.0-alpha.64
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/ClockPicker/ClockPicker.js

@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
 
 const ClockPickerArrowSwitcher = styled(PickersArrowSwitcher, {
   name: 'MuiClockPicker',
-  slot: 'ArrowSwticher',
+  slot: 'ArrowSwitcher',
   overridesResolver: (props, styles) => styles.arrowSwitcher
 })({
   position: 'absolute',
@@ -266,7 +266,10 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes
   /**
    * The props used for each slot inside.
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object
+  }),
 
   /**
    * Selected date @DateIOType.

package/modern/DatePicker/DatePicker.js

@@ -128,7 +128,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/modern/DateRangePicker/DateRangePicker.js

@@ -176,7 +176,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/modern/DateTimePicker/DateTimePicker.js

@@ -140,7 +140,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -119,7 +119,11 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -160,7 +160,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -129,7 +129,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/modern/LoadingButton/LoadingButton.js

@@ -1,10 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "disabled", "loading", "loadingIndicator", "loadingPosition", "variant"];
+const _excluded = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
-import { capitalize } from '@mui/material/utils';
+import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
@@ -112,12 +112,6 @@ const LoadingButtonLoadingIndicator = styled('div', {
   position: 'relative',
   right: -10
 }));
-
-const LoadingIndicator = /*#__PURE__*/_jsx(CircularProgress, {
-  color: "inherit",
-  size: 16
-});
-
 const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -127,13 +121,22 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
   const {
     children,
     disabled = false,
+    id: idProp,
     loading = false,
-    loadingIndicator = LoadingIndicator,
+    loadingIndicator: loadingIndicatorProp,
     loadingPosition = 'center',
     variant = 'text'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const id = useId(idProp);
+
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
+
   const ownerState = _extends({}, props, {
     disabled,
     loading,
@@ -145,6 +148,7 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(LoadingButtonRoot, _extends({
     disabled: disabled || loading,
+    id: id,
     ref: ref
   }, other, {
     variant: variant,
@@ -189,6 +193,11 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
    */
   disabled: PropTypes.bool,
 
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+
   /**
    * If `true`, the loading indicator is shown.
    * @default false
@@ -197,6 +206,8 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
 
   /**
    * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default we render a `CircularProgress` that is labelled by the button itself.
    * @default <CircularProgress color="inherit" size={16} />
    */
   loadingIndicator: PropTypes.node,

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -132,7 +132,11 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -174,7 +174,11 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.