@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/DesktopDatePicker/DesktopDatePicker.js

@@ -7,15 +7,14 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useDatePickerDefaultizedProps } from "../DatePicker/shared.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { validateDate, extractValidationProps } from "../validation/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
-import { CalendarIcon } from "../icons/index.js";
 import { DateField } from "../DateField/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
-import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
+const emptyActions = [];
+
 /**
  * Demos:
  *
@@ -27,7 +26,6 @@ import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalizat
  * - [DesktopDatePicker API](https://mui.com/x/api/date-pickers/desktop-date-picker/)
  */
 const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
-  const translations = usePickerTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all date pickers
@@ -40,34 +38,30 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
+    closeOnSelect: defaultizedProps.closeOnSelect ?? true,
     viewRenderers,
     format: resolveDateFormat(utils, defaultizedProps, false),
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     slots: _extends({
-      openPickerIcon: CalendarIcon,
       field: DateField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       toolbar: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.toolbar)
+      }, defaultizedProps.slotProps?.toolbar),
+      actionBar: ownerState => _extends({
+        actions: emptyActions
+      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
     })
   });
   const {
     renderPicker
   } = useDesktopPicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: buildGetOpenDialogAriaText({
-      utils,
-      formatKey: 'fullDate',
-      contextTranslation: translations.openDatePickerDialogue,
-      propsTranslation: props.localeText?.openDatePickerDialogue
-    }),
     validator: validateDate
   });
   return renderPicker();
@@ -86,8 +80,8 @@ DesktopDatePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default true
    */
   closeOnSelect: PropTypes.bool,
   /**

package/DesktopDatePicker/DesktopDatePicker.types.d.ts

@@ -1,11 +1,10 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopPickerSlots, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
 import { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from '../DatePicker/shared';
-import { DateView } from '../models';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
-export interface DesktopDatePickerSlots extends BaseDatePickerSlots, MakeOptional<UseDesktopPickerSlots<DateView>, 'field' | 'openPickerIcon'> {
+export interface DesktopDatePickerSlots extends BaseDatePickerSlots, MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'> {
 }
-export interface DesktopDatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDatePickerSlotProps, ExportedUseDesktopPickerSlotProps<DateView, TEnableAccessibleFieldDOMStructure> {
+export interface DesktopDatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDatePickerSlotProps, ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
 export interface DesktopDatePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDatePickerProps, DesktopOnlyPickerProps, ExportedYearCalendarProps {
     /**
@@ -23,4 +22,9 @@ export interface DesktopDatePickerProps<TEnableAccessibleFieldDOMStructure exten
      * @default 4
      */
     yearsPerRow?: 3 | 4;
+    /**
+     * If `true`, the Picker will close after submitting the full date.
+     * @default true
+     */
+    closeOnSelect?: boolean;
 }

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -12,10 +12,8 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { DateTimeField } from "../DateTimeField/index.js";
 import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/dateViewRenderers.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { validateDateTime, extractValidationProps } from "../validation/index.js";
-import { CalendarIcon } from "../icons/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
 import { resolveDateTimeFormat, resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
@@ -25,9 +23,13 @@ import { DesktopDateTimePickerLayout } from "./DesktopDateTimePickerLayout.js";
 import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { isInternalTimeView } from "../internals/utils/time-utils.js";
 import { isDatePickerView } from "../internals/utils/date-utils.js";
-import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
+const rendererInterceptor = function RendererInterceptor(props) {
+  const {
+    viewRenderers,
+    popperView,
+    rendererProps
+  } = props;
   const {
       openTo,
       focusedView,
@@ -46,8 +48,10 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     }]
   });
   const isTimeViewActive = isInternalTimeView(popperView);
+  const dateView = isTimeViewActive ? 'day' : popperView;
+  const timeView = isTimeViewActive ? popperView : 'hours';
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [inViewRenderers[!isTimeViewActive ? popperView : 'day']?.(_extends({}, rendererProps, {
+    children: [viewRenderers[dateView]?.(_extends({}, rendererProps, {
       view: !isTimeViewActive ? popperView : 'day',
       focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
       views: rendererProps.views.filter(isDatePickerView),
@@ -60,7 +64,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
         sx: {
           gridColumn: 2
         }
-      }), inViewRenderers[isTimeViewActive ? popperView : 'hours']?.(_extends({}, finalProps, {
+      }), viewRenderers[timeView]?.(_extends({}, finalProps, {
         view: isTimeViewActive ? popperView : 'hours',
         focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
         openTo: isInternalTimeView(openTo) ? openTo : 'hours',
@@ -83,7 +87,6 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)
  */
 const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  const translations = usePickerTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all date time pickers
@@ -108,7 +111,6 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
-  const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
@@ -122,38 +124,26 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
     shouldRenderTimeInASingleColumn,
     slots: _extends({
       field: DateTimeField,
-      layout: DesktopDateTimePickerLayout,
-      openPickerIcon: CalendarIcon
+      layout: DesktopDateTimePickerLayout
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       toolbar: _extends({
         hidden: true,
-        ampmInClock,
-        toolbarVariant: 'desktop'
+        ampmInClock
       }, defaultizedProps.slotProps?.toolbar),
       tabs: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.tabs),
-      actionBar: ownerState => _extends({
-        actions: actionBarActions
-      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
+      }, defaultizedProps.slotProps?.tabs)
     })
   });
   const {
     renderPicker
   } = useDesktopPicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: buildGetOpenDialogAriaText({
-      utils,
-      formatKey: 'fullDate',
-      contextTranslation: translations.openDatePickerDialogue,
-      propsTranslation: props.localeText?.openDatePickerDialogue
-    }),
     validator: validateDateTime,
     rendererInterceptor
   });
@@ -183,8 +173,8 @@ DesktopDateTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts

@@ -7,9 +7,9 @@ import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '../MultiSectionDigitalClock';
 import { DigitalClockSlots, DigitalClockSlotProps } from '../DigitalClock';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
-export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseDesktopPickerSlots<DateOrTimeViewWithMeridiem>, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {
+export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {
 }
-export interface DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+export interface DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
 }
 export interface DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps<DateOrTimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps, ExportedYearCalendarProps {
     /**

package/DesktopDateTimePicker/DesktopDateTimePickerLayout.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PickersLayoutProps } from '../PickersLayout';
-import { DateOrTimeViewWithMeridiem } from '../internals/models/common';
-type DesktopDateTimePickerLayoutComponent = (<TValue, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+import { PickerValidValue } from '../internals/models';
+type DesktopDateTimePickerLayoutComponent = (<TValue extends PickerValidValue>(props: PickersLayoutProps<TValue> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -1,33 +1,31 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useRtl } from '@mui/system/RtlProvider';
 import Divider from '@mui/material/Divider';
 import { PickersLayoutContentWrapper, PickersLayoutRoot, pickersLayoutClasses, usePickerLayout } from "../PickersLayout/index.js";
+import { usePickerContext } from "../hooks/usePickerContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
 const DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function DesktopDateTimePickerLayout(props, ref) {
-  const isRtl = useRtl();
   const {
     toolbar,
     tabs,
     content,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = usePickerLayout(props);
+  const {
+    orientation
+  } = usePickerContext();
   const {
     sx,
     className,
-    isLandscape,
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
-  const ownerState = _extends({}, props, {
-    isRtl
-  });
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
     ref: ref,
     className: clsx(pickersLayoutClasses.root, classes?.root, className),
@@ -41,8 +39,9 @@ const DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function Deskt
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
     ownerState: ownerState,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsxs(PickersLayoutContentWrapper, {
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/_jsxs(PickersLayoutContentWrapper, {
       className: clsx(pickersLayoutClasses.contentWrapper, classes?.contentWrapper),
+      ownerState: ownerState,
       sx: {
         display: 'grid'
       },
@@ -66,26 +65,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  isLandscape: PropTypes.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: PropTypes.bool.isRequired,
-  isValid: PropTypes.func.isRequired,
-  onAccept: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onDismiss: PropTypes.func.isRequired,
-  onOpen: PropTypes.func.isRequired,
-  onSelectShortcut: PropTypes.func.isRequired,
-  onSetToday: PropTypes.func.isRequired,
-  onViewChange: PropTypes.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: PropTypes.oneOf(['landscape', 'portrait']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -99,10 +78,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  value: PropTypes.any,
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: PropTypes.oneOf(['desktop', 'mobile'])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { DesktopDateTimePickerLayout };

package/DesktopTimePicker/DesktopTimePicker.js

@@ -8,15 +8,12 @@ import { refType } from '@mui/utils';
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { TimeField } from "../TimeField/index.js";
 import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { extractValidationProps, validateTime } from "../validation/index.js";
-import { ClockIcon } from "../icons/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { resolveTimeFormat } from "../internals/utils/time-utils.js";
 import { resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
-import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -28,7 +25,6 @@ import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalizat
  * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/)
  */
 const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  const translations = usePickerTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all time pickers
@@ -46,7 +42,6 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
-  const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
@@ -61,34 +56,23 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     // Allows for easy view lifecycle management
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: _extends({
-      field: TimeField,
-      openPickerIcon: ClockIcon
+      field: TimeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       toolbar: _extends({
         hidden: true,
         ampmInClock
-      }, defaultizedProps.slotProps?.toolbar),
-      actionBar: _extends({
-        actions: actionBarActions
-      }, defaultizedProps.slotProps?.actionBar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
     renderPicker
   } = useDesktopPicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: buildGetOpenDialogAriaText({
-      utils,
-      formatKey: 'fullTime',
-      contextTranslation: translations.openTimePickerDialogue,
-      propsTranslation: props.localeText?.openTimePickerDialogue
-    }),
     validator: validateTime
   });
   return renderPicker();
@@ -117,8 +101,8 @@ DesktopTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/DesktopTimePicker/DesktopTimePicker.types.d.ts

@@ -6,9 +6,9 @@ import { DesktopOnlyTimePickerProps } from '../internals/models/props/time';
 import { DigitalClockSlots, DigitalClockSlotProps } from '../DigitalClock';
 import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '../MultiSectionDigitalClock';
 import { TimeView } from '../models';
-export interface DesktopTimePickerSlots extends BaseTimePickerSlots, MakeOptional<UseDesktopPickerSlots<TimeViewWithMeridiem>, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {
+export interface DesktopTimePickerSlots extends BaseTimePickerSlots, MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {
 }
-export interface DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+export interface DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
 }
 export interface DesktopTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseTimePickerProps<TimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps {
     /**

package/DigitalClock/DigitalClock.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
+const _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -24,11 +24,9 @@ import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithT
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
 import { getFocusedListItemIndex } from "../internals/utils/utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     list: ['list'],
@@ -49,7 +47,7 @@ const DigitalClockRoot = styled(PickerViewRoot, {
   maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
   variants: [{
     props: {
-      alreadyRendered: true
+      hasDigitalClockAlreadyBeenRendered: true
     },
     style: {
       '@media (prefers-reduced-motion: no-preference)': {
@@ -133,6 +131,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       focusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       views = ['hours'],
@@ -155,15 +154,18 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
   });
   const translations = usePickerTranslations();
   const now = useNow(timezone);
-  const ownerState = React.useMemo(() => _extends({}, props, {
-    alreadyRendered: !!containerRef.current
-  }), [props]);
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
+  });
+  const classes = useUtilityClasses(classesProp);
   const ClockItem = slots?.digitalClockItem ?? DigitalClockItem;
   const clockItemProps = useSlotProps({
     elementType: ClockItem,
     externalSlotProps: slotProps?.digitalClockItem,
-    ownerState: {},
+    ownerState,
     className: classes.item
   });
   const valueOrReferenceDate = useClockReferenceDate({

package/DigitalClock/DigitalClock.types.d.ts

@@ -3,7 +3,7 @@ import { SlotComponentProps } from '@mui/utils';
 import MenuItem from '@mui/material/MenuItem';
 import { DigitalClockClasses } from './digitalClockClasses';
 import { BaseClockProps, DigitalClockOnlyProps, ExportedBaseClockProps } from '../internals/models/props/time';
-import { TimeView } from '../models';
+import { PickerOwnerState, TimeView } from '../models';
 export interface ExportedDigitalClockProps extends ExportedBaseClockProps, DigitalClockOnlyProps {
 }
 export interface DigitalClockSlots {
@@ -14,7 +14,7 @@ export interface DigitalClockSlots {
     digitalClockItem?: React.ElementType;
 }
 export interface DigitalClockSlotProps {
-    digitalClockItem?: SlotComponentProps<typeof MenuItem, {}, Record<string, any>>;
+    digitalClockItem?: SlotComponentProps<typeof MenuItem, {}, DigitalClockOwnerState>;
 }
 export interface DigitalClockProps extends ExportedDigitalClockProps, BaseClockProps<Extract<TimeView, 'hours'>> {
     /**
@@ -37,3 +37,9 @@ export interface DigitalClockProps extends ExportedDigitalClockProps, BaseClockP
      */
     slotProps?: DigitalClockSlotProps;
 }
+export interface DigitalClockOwnerState extends PickerOwnerState {
+    /**
+     * `true` if this is not the initial render of the digital clock.
+     */
+    hasDigitalClockAlreadyBeenRendered: boolean;
+}

package/MobileDatePicker/MobileDatePicker.js

@@ -7,14 +7,12 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
 import { useDatePickerDefaultizedProps } from "../DatePicker/shared.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { extractValidationProps, validateDate } from "../validation/index.js";
 import { DateField } from "../DateField/index.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
-import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -26,7 +24,6 @@ import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalizat
  * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/)
  */
 const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
-  const translations = usePickerTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all date pickers
@@ -45,9 +42,7 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
       field: DateField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       toolbar: _extends({
         hidden: false
       }, defaultizedProps.slotProps?.toolbar)
@@ -56,15 +51,10 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
   const {
     renderPicker
   } = useMobilePicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: buildGetOpenDialogAriaText({
-      utils,
-      formatKey: 'fullDate',
-      contextTranslation: translations.openDatePickerDialogue,
-      propsTranslation: props.localeText?.openDatePickerDialogue
-    }),
     validator: validateDate
   });
   return renderPicker();
@@ -83,8 +73,8 @@ MobileDatePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/MobileDatePicker/MobileDatePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobilePickerSlots, MobileOnlyPickerProps, ExportedUseMobilePickerSlotProps } from '../internals/hooks/useMobilePicker';
 import { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from '../DatePicker/shared';
-import { DateView } from '../models';
-export interface MobileDatePickerSlots extends BaseDatePickerSlots, MakeOptional<UseMobilePickerSlots<DateView>, 'field'> {
+export interface MobileDatePickerSlots extends BaseDatePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {
 }
-export interface MobileDatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDatePickerSlotProps, ExportedUseMobilePickerSlotProps<DateView, TEnableAccessibleFieldDOMStructure> {
+export interface MobileDatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDatePickerSlotProps, ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
 export interface MobileDatePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDatePickerProps, MobileOnlyPickerProps {
     /**