@mui/x-date-pickers 5.0.2 → 6.0.0-alpha.0

package/DesktopDatePicker/DesktopDatePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onChange", "PopperProps", "PaperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps"];
+const _excluded = ["onChange", "PopperProps", "PaperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps", "localeText"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps, datePickerValueManager } from '../DatePicker/shared';
@@ -37,7 +37,8 @@ export const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopD
     ToolbarComponent = DatePickerToolbar,
     TransitionComponent,
     components,
-    componentsProps
+    componentsProps,
+    localeText
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -56,6 +57,7 @@ export const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopD
     TransitionComponent: TransitionComponent,
     components: components,
     componentsProps: componentsProps,
+    localeText: localeText,
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
       autoFocus: true,
       toolbarTitle: props.label || props.toolbarTitle,
@@ -161,14 +163,6 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
    * @default (date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`
    */
   getOpenDialogAriaText: PropTypes.func,
-
-  /**
-   * Get aria-label text for switching between views button.
-   * @param {CalendarPickerView} currentView The view from which we want to get the button text.
-   * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,
 
   /**
@@ -190,12 +184,6 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
-  /**
-   * Left arrow icon aria-label text.
-   * @deprecated
-   */
-  leftArrowButtonText: PropTypes.string,
-
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -203,6 +191,11 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */
@@ -360,12 +353,6 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
    */
   rifmFormatter: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -403,6 +390,11 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
    */
   showToolbar: PropTypes.bool,
 
+  /**
+   * 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]),
+
   /**
    * Component that will replace default toolbar renderer.
    * @default DatePickerToolbar

package/DesktopDateTimePicker/DesktopDateTimePicker.d.ts

@@ -7,7 +7,7 @@ export interface DesktopDateTimePickerSlotsComponent extends DesktopWrapperSlots
 }
 export interface DesktopDateTimePickerSlotsComponentsProps extends DesktopWrapperSlotsComponentsProps, CalendarOrClockPickerSlotsComponentsProps {
 }
-export interface DesktopDateTimePickerProps<TInputDate, TDate> extends BaseDateTimePickerProps<TInputDate, TDate>, DesktopWrapperProps {
+export interface DesktopDateTimePickerProps<TInputDate, TDate> extends BaseDateTimePickerProps<TInputDate, TDate>, DesktopWrapperProps<TDate> {
     /**
      * Overrideable components.
      * @default {}

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onChange", "PaperProps", "PopperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps", "hideTabs"];
+const _excluded = ["onChange", "PaperProps", "PopperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps", "localeText", "hideTabs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps, dateTimePickerValueManager } from '../DateTimePicker/shared';
@@ -39,6 +39,7 @@ export const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function Desk
     TransitionComponent,
     components: providedComponents,
     componentsProps,
+    localeText,
     hideTabs = true
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -62,6 +63,7 @@ export const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function Desk
     TransitionComponent: TransitionComponent,
     components: components,
     componentsProps: componentsProps,
+    localeText: localeText,
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
       autoFocus: true,
       toolbarTitle: props.label || props.toolbarTitle,
@@ -182,25 +184,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    */
   disablePast: PropTypes.bool,
 
-  /**
-   * Accessible text that helps user to understand which time and view is selected.
-   * @template TDate
-   * @param {ClockPickerView} view The current view rendered.
-   * @param {TDate | null} time The current time.
-   * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
-   * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   * @default <TDate extends any>(
-   *   view: ClockView,
-   *   time: TDate | null,
-   *   adapter: MuiPickersAdapter<TDate>,
-   * ) =>
-   *   `Select ${view}. ${
-   *     time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
-   *   }`
-   */
-  getClockLabelText: PropTypes.func,
-
   /**
    * Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType
    * @template TInputDate, TDate
@@ -211,14 +194,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    */
   getOpenDialogAriaText: PropTypes.func,
 
-  /**
-   * Get aria-label text for switching between views button.
-   * @param {CalendarPickerView} currentView The view from which we want to get the button text.
-   * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getViewSwitchingButtonText: PropTypes.func,
-
   /**
    * Toggles visibility of date time switching tabs
    * @default false for mobile, true for desktop
@@ -245,12 +220,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
-  /**
-   * Left arrow icon aria-label text.
-   * @deprecated
-   */
-  leftArrowButtonText: PropTypes.string,
-
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -258,6 +227,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */
@@ -443,12 +417,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    */
   rifmFormatter: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -495,6 +463,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    */
   showToolbar: PropTypes.bool,
 
+  /**
+   * 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]),
+
   /**
    * Time tab icon.
    */

package/DesktopTimePicker/DesktopTimePicker.d.ts

@@ -7,7 +7,7 @@ export interface DesktopTimePickerSlotsComponent extends DesktopWrapperSlotsComp
 }
 export interface DesktopTimePickerSlotsComponentsProps extends DesktopWrapperSlotsComponentsProps, ClockPickerSlotsComponentsProps {
 }
-export interface DesktopTimePickerProps<TInputDate, TDate> extends BaseTimePickerProps<TInputDate, TDate>, DesktopWrapperProps {
+export interface DesktopTimePickerProps<TInputDate, TDate> extends BaseTimePickerProps<TInputDate, TDate>, DesktopWrapperProps<TDate> {
     /**
      * Overrideable components.
      * @default {}

package/DesktopTimePicker/DesktopTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onChange", "PaperProps", "PopperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps"];
+const _excluded = ["onChange", "PaperProps", "PopperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps", "localeText"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTimePickerDefaultizedProps, timePickerValueManager } from '../TimePicker/shared';
@@ -37,7 +37,8 @@ export const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopT
     ToolbarComponent = TimePickerToolbar,
     TransitionComponent,
     components,
-    componentsProps
+    componentsProps,
+    localeText
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -56,6 +57,7 @@ export const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopT
     TransitionComponent: TransitionComponent,
     components: components,
     componentsProps: componentsProps,
+    localeText: localeText,
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
       autoFocus: true,
       toolbarTitle: props.label || props.toolbarTitle,
@@ -138,25 +140,6 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes = {
    */
   disableOpenPicker: PropTypes.bool,
 
-  /**
-   * Accessible text that helps user to understand which time and view is selected.
-   * @template TDate
-   * @param {ClockPickerView} view The current view rendered.
-   * @param {TDate | null} time The current time.
-   * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
-   * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   * @default <TDate extends any>(
-   *   view: ClockView,
-   *   time: TDate | null,
-   *   adapter: MuiPickersAdapter<TDate>,
-   * ) =>
-   *   `Select ${view}. ${
-   *     time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
-   *   }`
-   */
-  getClockLabelText: PropTypes.func,
-
   /**
    * Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType
    * @template TInputDate, TDate
@@ -187,6 +170,11 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */

package/LocalizationProvider/LocalizationProvider.d.ts

@@ -1,20 +1,23 @@
 import * as React from 'react';
 import { DateIOFormats } from '@date-io/core/IUtils';
 import { MuiPickersAdapter } from '../internals/models';
-import { PickersLocaleText } from '../locales';
+import { PickersInputLocaleText } from '../locales';
 export interface MuiPickersAdapterContextValue<TDate> {
     defaultDates: {
         minDate: TDate;
         maxDate: TDate;
     };
     utils: MuiPickersAdapter<TDate>;
-    localeText: PickersLocaleText<TDate>;
+    localeText: PickersInputLocaleText<TDate> | undefined;
 }
-export declare const MuiPickersAdapterContext: React.Context<MuiPickersAdapterContextValue<unknown> | null>;
-export interface LocalizationProviderProps {
+export declare type MuiPickersAdapterContextNullableValue<TDate> = {
+    [K in keyof MuiPickersAdapterContextValue<TDate>]: MuiPickersAdapterContextValue<TDate>[K] | null;
+};
+export declare const MuiPickersAdapterContext: React.Context<MuiPickersAdapterContextNullableValue<any> | null>;
+export interface LocalizationProviderProps<TDate> {
     children?: React.ReactNode;
     /** DateIO adapter class function */
-    dateAdapter: new (...args: any) => MuiPickersAdapter<unknown>;
+    dateAdapter?: new (...args: any) => MuiPickersAdapter<TDate>;
     /** Formats that are used for any child pickers */
     dateFormats?: Partial<DateIOFormats>;
     /**
@@ -24,22 +27,18 @@ export interface LocalizationProviderProps {
      * ```
      */
     dateLibInstance?: any;
-    /** Locale for the date library you are using
-     * @deprecated Use `adapterLocale` instead
-     */
-    locale?: string | object;
     /** Locale for the date library you are using
      */
     adapterLocale?: string | object;
     /**
      * Locale for components texts
      */
-    localeText?: Partial<PickersLocaleText<unknown>>;
+    localeText?: PickersInputLocaleText<TDate>;
 }
 /**
  * @ignore - do not document.
  */
-export declare function LocalizationProvider(inProps: LocalizationProviderProps): JSX.Element;
+export declare function LocalizationProvider<TDate>(inProps: LocalizationProviderProps<TDate>): JSX.Element;
 export declare namespace LocalizationProvider {
     var propTypes: any;
 }

package/LocalizationProvider/LocalizationProvider.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { DEFAULT_LOCALE } from '../locales';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const MuiPickersAdapterContext = /*#__PURE__*/React.createContext(null);
 
@@ -10,39 +9,53 @@ if (process.env.NODE_ENV !== 'production') {
   MuiPickersAdapterContext.displayName = 'MuiPickersAdapterContext';
 }
 
-let warnedOnce = false;
 /**
  * @ignore - do not document.
  */
-
 export function LocalizationProvider(inProps) {
+  var _React$useContext;
+
+  const {
+    utils: parentUtils,
+    localeText: parentLocaleText
+  } = (_React$useContext = React.useContext(MuiPickersAdapterContext)) != null ? _React$useContext : {
+    utils: undefined,
+    localeText: undefined
+  };
   const props = useThemeProps({
-    props: inProps,
+    props: _extends({
+      localeText: parentLocaleText
+    }, inProps),
     name: 'MuiLocalizationProvider'
   });
   const {
     children,
-    dateAdapter: Utils,
+    dateAdapter: DateAdapter,
     dateFormats,
     dateLibInstance,
-    locale,
     adapterLocale,
     localeText
   } = props;
+  const utils = React.useMemo(() => {
+    if (!DateAdapter) {
+      if (parentUtils) {
+        return parentUtils;
+      }
 
-  if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce && locale !== undefined) {
-      warnedOnce = true;
-      console.warn("LocalizationProvider's prop `locale` is deprecated and replaced by `adapterLocale`");
+      return null;
     }
-  }
 
-  const utils = React.useMemo(() => new Utils({
-    locale: adapterLocale != null ? adapterLocale : locale,
-    formats: dateFormats,
-    instance: dateLibInstance
-  }), [Utils, locale, adapterLocale, dateFormats, dateLibInstance]);
+    return new DateAdapter({
+      locale: adapterLocale,
+      formats: dateFormats,
+      instance: dateLibInstance
+    });
+  }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentUtils]);
   const defaultDates = React.useMemo(() => {
+    if (!utils) {
+      return null;
+    }
+
     return {
       minDate: utils.date('1900-01-01T00:00:00.000'),
       maxDate: utils.date('2099-12-31T00:00:00.000')
@@ -52,7 +65,7 @@ export function LocalizationProvider(inProps) {
     return {
       utils,
       defaultDates,
-      localeText: _extends({}, DEFAULT_LOCALE, localeText != null ? localeText : {})
+      localeText
     };
   }, [defaultDates, utils, localeText]);
   return /*#__PURE__*/_jsx(MuiPickersAdapterContext.Provider, {
@@ -75,7 +88,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
   /**
    * DateIO adapter class function
    */
-  dateAdapter: PropTypes.func.isRequired,
+  dateAdapter: PropTypes.func,
 
   /**
    * Formats that are used for any child pickers
@@ -118,12 +131,6 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
    */
   dateLibInstance: PropTypes.any,
 
-  /**
-   * Locale for the date library you are using
-   * @deprecated Use `adapterLocale` instead
-   */
-  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-
   /**
    * Locale for components texts
    */

package/MobileDatePicker/MobileDatePicker.d.ts

@@ -6,7 +6,7 @@ export interface MobileDatePickerSlotsComponent extends MobileWrapperSlotsCompon
 }
 export interface MobileDatePickerSlotsComponentsProps extends MobileWrapperSlotsComponentsProps, CalendarPickerSlotsComponentsProps {
 }
-export interface MobileDatePickerProps<TInputDate, TDate> extends BaseDatePickerProps<TInputDate, TDate>, MobileWrapperProps {
+export interface MobileDatePickerProps<TInputDate, TDate> extends BaseDatePickerProps<TInputDate, TDate>, MobileWrapperProps<TDate> {
     /**
      * Overrideable components.
      * @default {}

package/MobileDatePicker/MobileDatePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps"];
+const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps", "localeText"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps, datePickerValueManager } from '../DatePicker/shared';
@@ -35,7 +35,8 @@ export const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDat
   const {
     ToolbarComponent = DatePickerToolbar,
     components,
-    componentsProps
+    componentsProps,
+    localeText
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -51,6 +52,7 @@ export const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDat
     PureDateInputComponent: PureDateInput,
     components: components,
     componentsProps: componentsProps,
+    localeText: localeText,
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
       autoFocus: true,
       toolbarTitle: props.label || props.toolbarTitle,
@@ -161,14 +163,6 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
    * @default (date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`
    */
   getOpenDialogAriaText: PropTypes.func,
-
-  /**
-   * Get aria-label text for switching between views button.
-   * @param {CalendarPickerView} currentView The view from which we want to get the button text.
-   * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,
 
   /**
@@ -190,12 +184,6 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
-  /**
-   * Left arrow icon aria-label text.
-   * @deprecated
-   */
-  leftArrowButtonText: PropTypes.string,
-
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -203,6 +191,11 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */
@@ -350,12 +343,6 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
    */
   rifmFormatter: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -393,6 +380,11 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
    */
   showToolbar: PropTypes.bool,
 
+  /**
+   * 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]),
+
   /**
    * Component that will replace default toolbar renderer.
    * @default DatePickerToolbar

package/MobileDateTimePicker/MobileDateTimePicker.d.ts

@@ -7,7 +7,7 @@ export interface MobileDateTimePickerSlotsComponent extends MobileWrapperSlotsCo
 }
 export interface MobileDateTimePickerSlotsComponentsProps extends MobileWrapperSlotsComponentsProps, CalendarOrClockPickerSlotsComponentsProps {
 }
-export interface MobileDateTimePickerProps<TInputDate, TDate> extends BaseDateTimePickerProps<TInputDate, TDate>, MobileWrapperProps {
+export interface MobileDateTimePickerProps<TInputDate, TDate> extends BaseDateTimePickerProps<TInputDate, TDate>, MobileWrapperProps<TDate> {
     /**
      * Overrideable components.
      * @default {}

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps", "hideTabs"];
+const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps", "localeText", "hideTabs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps, dateTimePickerValueManager } from '../DateTimePicker/shared';
@@ -37,6 +37,7 @@ export const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function Mobil
     ToolbarComponent = DateTimePickerToolbar,
     components: providedComponents,
     componentsProps,
+    localeText,
     hideTabs = false
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -57,6 +58,7 @@ export const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function Mobil
     PureDateInputComponent: PureDateInput,
     components: components,
     componentsProps: componentsProps,
+    localeText: localeText,
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
       autoFocus: true,
       toolbarTitle: props.label || props.toolbarTitle,
@@ -182,25 +184,6 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
    */
   disablePast: PropTypes.bool,
 
-  /**
-   * Accessible text that helps user to understand which time and view is selected.
-   * @template TDate
-   * @param {ClockPickerView} view The current view rendered.
-   * @param {TDate | null} time The current time.
-   * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
-   * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   * @default <TDate extends any>(
-   *   view: ClockView,
-   *   time: TDate | null,
-   *   adapter: MuiPickersAdapter<TDate>,
-   * ) =>
-   *   `Select ${view}. ${
-   *     time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
-   *   }`
-   */
-  getClockLabelText: PropTypes.func,
-
   /**
    * Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType
    * @template TInputDate, TDate
@@ -211,14 +194,6 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
    */
   getOpenDialogAriaText: PropTypes.func,
 
-  /**
-   * Get aria-label text for switching between views button.
-   * @param {CalendarPickerView} currentView The view from which we want to get the button text.
-   * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getViewSwitchingButtonText: PropTypes.func,
-
   /**
    * Toggles visibility of date time switching tabs
    * @default false for mobile, true for desktop
@@ -245,12 +220,6 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
-  /**
-   * Left arrow icon aria-label text.
-   * @deprecated
-   */
-  leftArrowButtonText: PropTypes.string,
-
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -258,6 +227,11 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */
@@ -433,12 +407,6 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
    */
   rifmFormatter: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -485,6 +453,11 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
    */
   showToolbar: PropTypes.bool,
 
+  /**
+   * 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]),
+
   /**
    * Time tab icon.
    */

package/MobileTimePicker/MobileTimePicker.d.ts

@@ -7,7 +7,7 @@ export interface MobileTimePickerSlotsComponent extends MobileWrapperSlotsCompon
 }
 export interface MobileTimePickerSlotsComponentsProps extends MobileWrapperSlotsComponentsProps, ClockPickerSlotsComponentsProps {
 }
-export interface MobileTimePickerProps<TInputDate, TDate> extends BaseTimePickerProps<TInputDate, TDate>, MobileWrapperProps {
+export interface MobileTimePickerProps<TInputDate, TDate> extends BaseTimePickerProps<TInputDate, TDate>, MobileWrapperProps<TDate> {
     /**
      * Overrideable components.
      * @default {}