[pickers] Stop using WrapperVariantContext in Clock

docs/pages/x/api/date-pickers/date-time-picker.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
-    "ampmInClock": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" }, "default": "true" },
     "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {

docs/pages/x/api/date-pickers/desktop-date-time-picker.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
-    "ampmInClock": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" }, "default": "true" },
     "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {

docs/pages/x/api/date-pickers/desktop-time-picker.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
-    "ampmInClock": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {

docs/pages/x/api/date-pickers/mobile-date-time-picker.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
-    "ampmInClock": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" }, "default": "true" },
     "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {

docs/pages/x/api/date-pickers/mobile-time-picker.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
-    "ampmInClock": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {

docs/pages/x/api/date-pickers/static-date-time-picker.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
-    "ampmInClock": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" }, "default": "true" },
     "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "components": {

docs/pages/x/api/date-pickers/static-time-picker.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
-    "ampmInClock": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "components": {

docs/pages/x/api/date-pickers/time-picker.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
-    "ampmInClock": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {

packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx

@@ -41,7 +41,7 @@ DateTimePicker.propTypes = {
   ampm: PropTypes.bool,
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
-   * @default false
+   * @default true
    */
   ampmInClock: PropTypes.bool,
   /**

packages/x-date-pickers/src/DateTimePicker/shared.tsx

@@ -69,11 +69,13 @@ export interface BaseDateTimePickerProps<TDate>
   extends BasePickerInputProps<TDate | null, TDate, DateOrTimeView, DateTimeValidationError>,
     Omit<ExportedDateCalendarProps<TDate>, 'onViewChange'>,
     ExportedTimeClockProps<TDate> {
+  // TODO: Change default to be false on mobile, when `DateTimePickerToolbar` will support `ampm` buttons
+  // https://github.com/mui/mui-x/issues/7279
   /**
-   * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true
    */
-  ampm?: boolean;
+  ampmInClock?: boolean;
   /**
    * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
    */

packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx

@@ -37,12 +37,14 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker<TD
     seconds: null,
     ...defaultizedProps.viewRenderers,
   };
+  const ampmInClock = defaultizedProps.ampmInClock ?? true;
 
   // Props with the default values specific to the desktop variant
   const props = {
     ...defaultizedProps,
     viewRenderers,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
+    ampmInClock,
     slots: {
       field: DateTimeField,
       openPickerIcon: Calendar,
@@ -58,6 +60,7 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker<TD
       }),
       toolbar: {
         hidden: true,
+        ampmInClock,
         ...defaultizedProps.slotProps?.toolbar,
       },
       tabs: {
@@ -89,7 +92,7 @@ DesktopDateTimePicker.propTypes = {
   ampm: PropTypes.bool,
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
-   * @default false
+   * @default true
    */
   ampmInClock: PropTypes.bool,
   /**

packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx

@@ -34,9 +34,12 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker<TDate>(
     ...defaultizedProps.viewRenderers,
   };
 
+  const ampmInClock = defaultizedProps.ampmInClock ?? true;
+
   // Props with the default values specific to the desktop variant
   const props = {
     ...defaultizedProps,
+    ampmInClock,
     viewRenderers,
     slots: {
       field: TimeField,
@@ -53,6 +56,7 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker<TDate>(
       }),
       toolbar: {
         hidden: true,
+        ampmInClock,
         ...defaultizedProps.slotProps?.toolbar,
       },
     },
@@ -80,7 +84,7 @@ DesktopTimePicker.propTypes = {
   ampm: PropTypes.bool,
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
-   * @default false
+   * @default true on desktop, false on mobile
    */
   ampmInClock: PropTypes.bool,
   /**

packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx

@@ -41,11 +41,13 @@ const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker<TDat
     seconds: renderTimeViewClock,
     ...defaultizedProps.viewRenderers,
   };
+  const ampmInClock = defaultizedProps.ampmInClock ?? false;
 
   // Props with the default values specific to the mobile variant
   const props = {
     ...defaultizedProps,
     viewRenderers,
+    ampmInClock,
     slots: {
       field: DateTimeField,
       ...defaultizedProps.slots,
@@ -60,6 +62,7 @@ const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker<TDat
       }),
       toolbar: {
         hidden: false,
+        ampmInClock,
         ...defaultizedProps.slotProps?.toolbar,
       },
       tabs: {
@@ -91,7 +94,7 @@ MobileDateTimePicker.propTypes = {
   ampm: PropTypes.bool,
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
-   * @default false
+   * @default true
    */
   ampmInClock: PropTypes.bool,
   /**

packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx

@@ -32,10 +32,12 @@ const MobileTimePicker = React.forwardRef(function MobileTimePicker<TDate>(
     seconds: renderTimeViewClock,
     ...defaultizedProps.viewRenderers,
   };
+  const ampmInClock = defaultizedProps.ampmInClock ?? false;
 
   // Props with the default values specific to the mobile variant
   const props = {
     ...defaultizedProps,
+    ampmInClock,
     viewRenderers,
     slots: {
       field: TimeField,
@@ -51,6 +53,7 @@ const MobileTimePicker = React.forwardRef(function MobileTimePicker<TDate>(
       }),
       toolbar: {
         hidden: false,
+        ampmInClock,
         ...defaultizedProps.slotProps?.toolbar,
       },
     },
@@ -78,7 +81,7 @@ MobileTimePicker.propTypes = {
   ampm: PropTypes.bool,
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
-   * @default false
+   * @default true on desktop, false on mobile
    */
   ampmInClock: PropTypes.bool,
   /**

packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx

@@ -24,6 +24,7 @@ const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker<TDat
   >(inProps, 'MuiStaticDateTimePicker');
 
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
+  const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop';
 
   const viewRenderers: PickerViewRendererLookup<TDate | null, DateOrTimeView, any, {}> = {
     day: renderDateViewCalendar,
@@ -40,6 +41,7 @@ const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker<TDat
     ...defaultizedProps,
     viewRenderers,
     displayStaticWrapperAs,
+    ampmInClock,
     yearsPerRow: defaultizedProps.yearsPerRow ?? (displayStaticWrapperAs === 'mobile' ? 3 : 4),
     slotProps: {
       ...defaultizedProps.slotProps,
@@ -49,6 +51,7 @@ const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker<TDat
       },
       toolbar: {
         hidden: displayStaticWrapperAs === 'desktop',
+        ampmInClock,
         ...defaultizedProps.slotProps?.toolbar,
       },
     },
@@ -76,7 +79,7 @@ StaticDateTimePicker.propTypes = {
   ampm: PropTypes.bool,
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
-   * @default false
+   * @default true
    */
   ampmInClock: PropTypes.bool,
   /**

packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx

@@ -23,6 +23,7 @@ const StaticTimePicker = React.forwardRef(function StaticTimePicker<TDate>(
   );
 
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
+  const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop';
 
   const viewRenderers: PickerViewRendererLookup<TDate | null, TimeView, any, {}> = {
     hours: renderTimeViewClock,
@@ -36,10 +37,12 @@ const StaticTimePicker = React.forwardRef(function StaticTimePicker<TDate>(
     ...defaultizedProps,
     viewRenderers,
     displayStaticWrapperAs,
+    ampmInClock,
     slotProps: {
       ...defaultizedProps.slotProps,
       toolbar: {
         hidden: displayStaticWrapperAs === 'desktop',
+        ampmInClock,
         ...defaultizedProps.slotProps?.toolbar,
       },
     },
@@ -67,7 +70,7 @@ StaticTimePicker.propTypes = {
   ampm: PropTypes.bool,
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
-   * @default false
+   * @default true on desktop, false on mobile
    */
   ampmInClock: PropTypes.bool,
   /**

packages/x-date-pickers/src/TimeClock/Clock.tsx

@@ -9,7 +9,6 @@ import {
 } from '@mui/utils';
 import { ClockPointer } from './ClockPointer';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
-import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
 import type { PickerSelectionState } from '../internals/hooks/usePicker';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { getHours, getMinutes } from './shared';
@@ -203,7 +202,6 @@ export function Clock<TDate>(inProps: ClockProps<TDate>) {
 
   const utils = useUtils<TDate>();
   const localeText = useLocaleText<TDate>();
-  const wrapperVariant = React.useContext(WrapperVariantContext);
   const isMoving = React.useRef(false);
   const classes = useUtilityClasses(ownerState);
 
@@ -352,7 +350,7 @@ export function Clock<TDate>(inProps: ClockProps<TDate>) {
           {children}
         </ClockWrapper>
       </ClockClock>
-      {ampm && (wrapperVariant === 'desktop' || ampmInClock) && (
+      {ampm && ampmInClock && (
         <React.Fragment>
           <ClockAmButton
             data-mui-test="in-clock-am-btn"

packages/x-date-pickers/src/TimePicker/TimePicker.tsx

@@ -41,7 +41,7 @@ TimePicker.propTypes = {
   ampm: PropTypes.bool,
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
-   * @default false
+   * @default true on desktop, false on mobile
    */
   ampmInClock: PropTypes.bool,
   /**

packages/x-date-pickers/src/TimePicker/shared.tsx

@@ -38,10 +38,10 @@ export interface BaseTimePickerProps<TDate>
   extends BasePickerInputProps<TDate | null, TDate, TimeView, TimeValidationError>,
     ExportedTimeClockProps<TDate> {
   /**
-   * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
    */
-  ampm?: boolean;
+  ampmInClock?: boolean;
   /**
    * Overrideable components.
    * @default {}