@mui/x-date-pickers 8.0.0-alpha.0 → 8.0.0-alpha.10

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,38 +65,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  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']),
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -111,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'],
@@ -149,20 +148,24 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });
   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 {
     /**

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -8,14 +8,12 @@ import { refType } from '@mui/utils';
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { DateTimeField } from "../DateTimeField/index.js";
 import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { extractValidationProps, validateDateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { renderTimeViewClock } from "../timeViewRenderers/index.js";
 import { resolveDateTimeFormat } from "../internals/utils/date-time-utils.js";
-import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -27,7 +25,6 @@ import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalizat
  * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
  */
 const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  const translations = usePickerTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all date time pickers
@@ -51,9 +48,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
       field: DateTimeField
     }, 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,
         ampmInClock
@@ -66,15 +61,10 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
   const {
     renderPicker
   } = useMobilePicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: buildGetOpenDialogAriaText({
-      utils,
-      formatKey: 'fullDate',
-      contextTranslation: translations.openDatePickerDialogue,
-      propsTranslation: props.localeText?.openDatePickerDialogue
-    }),
     validator: validateDateTime
   });
   return renderPicker();
@@ -103,8 +93,8 @@ MobileDateTimePicker.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/MobileDateTimePicker/MobileDateTimePicker.types.d.ts

@@ -3,19 +3,19 @@ import { UseMobilePickerSlots, ExportedUseMobilePickerSlotProps, MobileOnlyPicke
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from '../DateTimePicker/shared';
 import { DateOrTimeView } from '../models';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-export interface MobileDateTimePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends BaseDateTimePickerSlots, MakeOptional<UseMobilePickerSlots<TView>, 'field'> {
+export interface MobileDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {
 }
-export interface MobileDateTimePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure> {
+export interface MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
 export interface MobileDateTimePickerProps<TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps<TView>, MobileOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: MobileDateTimePickerSlots<TView>;
+    slots?: MobileDateTimePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileDateTimePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }