@mui/x-date-pickers 9.0.0-alpha.1 → 9.0.0-alpha.2

package/StaticTimePicker/StaticTimePicker.mjs

@@ -0,0 +1,255 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTimePickerDefaultizedProps } from "../TimePicker/shared.mjs";
+import { renderTimeViewClock } from "../timeViewRenderers/index.mjs";
+import { singleItemValueManager } from "../internals/utils/valueManagers.mjs";
+import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.mjs";
+import { validateTime } from "../validation/index.mjs";
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [StaticTimePicker API](https://mui.com/x/api/date-pickers/static-time-picker/)
+ */
+const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker(inProps, ref) {
+  const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiStaticTimePicker');
+  const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
+  const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop';
+  const viewRenderers = _extends({
+    hours: renderTimeViewClock,
+    minutes: renderTimeViewClock,
+    seconds: renderTimeViewClock
+  }, defaultizedProps.viewRenderers);
+
+  // Props with the default values specific to the static variant
+  const props = _extends({}, defaultizedProps, {
+    viewRenderers,
+    displayStaticWrapperAs,
+    ampmInClock,
+    slotProps: _extends({}, defaultizedProps.slotProps, {
+      toolbar: _extends({
+        hidden: displayStaticWrapperAs === 'desktop',
+        ampmInClock
+      }, defaultizedProps.slotProps?.toolbar)
+    })
+  });
+  const {
+    renderPicker
+  } = useStaticPicker({
+    ref,
+    props,
+    valueManager: singleItemValueManager,
+    valueType: 'time',
+    validator: validateTime,
+    steps: null
+  });
+  return renderPicker();
+});
+if (process.env.NODE_ENV !== "production") StaticTimePicker.displayName = "StaticTimePicker";
+StaticTimePicker.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm: PropTypes.bool,
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock: PropTypes.bool,
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue: PropTypes.object,
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: PropTypes.bool,
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation: PropTypes.bool,
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: PropTypes.bool,
+  /**
+   * Force static wrapper inner components to be rendered in mobile or desktop mode.
+   * @default "mobile"
+   */
+  displayStaticWrapperAs: PropTypes.oneOf(['desktop', 'mobile']),
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText: PropTypes.object,
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime: PropTypes.object,
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime: PropTypes.object,
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep: PropTypes.number,
+  /**
+   * Callback fired when the value is accepted.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
+   * - `validationError`: validation result of the current value
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
+   * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
+   */
+  onAccept: PropTypes.func,
+  /**
+   * Callback fired when the value changes.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TValue} value The new value.
+   * @param {FieldChangeHandlerContext<TError>} context Context about this change:
+   * - `validationError`: validation result of the current value
+   * - `source`: source of the change. One of 'field' | 'view' | 'unknown'
+   * - `shortcut` (optional): the shortcut metadata if the change was triggered by a shortcut selection
+   */
+  onChange: PropTypes.func,
+  /**
+   * Callback fired when component requests to be closed.
+   * Can be fired when selecting (by default on `desktop` mode) or clearing a value.
+   * @deprecated Please avoid using as it will be removed in next major version.
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
+   */
+  onError: PropTypes.func,
+  /**
+   * Callback fired on view change.
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
+   * @param {TView} view The new view.
+   */
+  onViewChange: PropTypes.func,
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  /**
+   * 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,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: PropTypes.object,
+  /**
+   * Disable specific time.
+   * @param {PickerValidDate} value The value to check.
+   * @param {TimeView} view The clock type of the timeValue.
+   * @returns {boolean} If `true` the time will be disabled.
+   */
+  shouldDisableTime: PropTypes.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * 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]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value: PropTypes.object,
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers: PropTypes.shape({
+    hours: PropTypes.func,
+    minutes: PropTypes.func,
+    seconds: PropTypes.func
+  }),
+  /**
+   * Available views.
+   */
+  views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
+};
+export { StaticTimePicker };

package/StaticTimePicker/StaticTimePicker.types.d.mts

@@ -0,0 +1,18 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from "../TimePicker/shared.mjs";
+import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.mjs";
+import { TimeView } from "../models/index.mjs";
+export interface StaticTimePickerSlots extends BaseTimePickerSlots, UseStaticPickerSlots {}
+export interface StaticTimePickerSlotProps extends BaseTimePickerSlotProps, UseStaticPickerSlotProps {}
+export interface StaticTimePickerProps extends BaseTimePickerProps<TimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: StaticTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: StaticTimePickerSlotProps;
+}

package/StaticTimePicker/index.d.mts

@@ -0,0 +1,2 @@
+export { StaticTimePicker } from "./StaticTimePicker.mjs";
+export type { StaticTimePickerProps, StaticTimePickerSlots, StaticTimePickerSlotProps } from "./StaticTimePicker.types.mjs";

package/StaticTimePicker/index.mjs

@@ -0,0 +1 @@
+export { StaticTimePicker } from "./StaticTimePicker.mjs";

package/TimeClock/Clock.d.mts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { PickerSelectionState } from "../internals/hooks/usePicker/index.mjs";
+import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.mjs";
+import { PickerOwnerState, PickerValidDate, TimeView } from "../models/index.mjs";
+import { ClockClasses } from "./clockClasses.mjs";
+import { Meridiem } from "../internals/utils/time-utils.mjs";
+import { FormProps } from "../internals/models/formProps.mjs";
+export interface ClockProps extends ReturnType<typeof useMeridiemMode>, FormProps {
+  ampm: boolean;
+  ampmInClock: boolean;
+  autoFocus?: boolean;
+  children: readonly React.ReactNode[];
+  isTimeDisabled: (timeValue: number, type: TimeView) => boolean;
+  minutesStep?: number;
+  onChange: (value: number, isFinish?: PickerSelectionState) => void;
+  /**
+   * DOM id that the selected option should have
+   * Should only be `undefined` on the server
+   */
+  selectedId: string | undefined;
+  type: TimeView;
+  /**
+   * The numeric value of the current view.
+   */
+  viewValue: number;
+  /**
+   * The current full date value.
+   */
+  value: PickerValidDate | null;
+  /**
+   * Minimum and maximum value of the clock.
+   */
+  viewRange: [number, number];
+  className?: string;
+  classes?: Partial<ClockClasses>;
+}
+export interface ClockOwnerState extends PickerOwnerState {
+  /**
+   * `true` if the clock is disabled, `false` otherwise.
+   */
+  isClockDisabled: boolean;
+  /**
+   * The current meridiem mode of the clock.
+   */
+  clockMeridiemMode: Meridiem | null;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function Clock(inProps: ClockProps): import("react/jsx-runtime").JSX.Element;

package/TimeClock/Clock.mjs

@@ -0,0 +1,348 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { styled, useThemeProps } from '@mui/material/styles';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import composeClasses from '@mui/utils/composeClasses';
+import { ClockPointer } from "./ClockPointer.mjs";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.mjs";
+import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from "./shared.mjs";
+import { getClockUtilityClass } from "./clockClasses.mjs";
+import { formatMeridiem } from "../internals/utils/date-utils.mjs";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = (classes, ownerState) => {
+  const slots = {
+    root: ['root'],
+    clock: ['clock'],
+    wrapper: ['wrapper'],
+    squareMask: ['squareMask'],
+    pin: ['pin'],
+    amButton: ['amButton', ownerState.clockMeridiemMode === 'am' && 'selected'],
+    pmButton: ['pmButton', ownerState.clockMeridiemMode === 'pm' && 'selected'],
+    meridiemText: ['meridiemText']
+  };
+  return composeClasses(slots, getClockUtilityClass, classes);
+};
+const ClockRoot = styled('div', {
+  name: 'MuiClock',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: theme.spacing(2)
+}));
+const ClockClock = styled('div', {
+  name: 'MuiClock',
+  slot: 'Clock'
+})({
+  backgroundColor: 'rgba(0,0,0,.07)',
+  borderRadius: '50%',
+  height: 220,
+  width: 220,
+  flexShrink: 0,
+  position: 'relative',
+  pointerEvents: 'none'
+});
+const ClockWrapper = styled('div', {
+  name: 'MuiClock',
+  slot: 'Wrapper'
+})({
+  '&:focus': {
+    outline: 'none'
+  }
+});
+const ClockSquareMask = styled('div', {
+  name: 'MuiClock',
+  slot: 'SquareMask'
+})({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'auto',
+  outline: 0,
+  // Disable scroll capabilities.
+  touchAction: 'none',
+  userSelect: 'none',
+  variants: [{
+    props: {
+      isClockDisabled: false
+    },
+    style: {
+      '@media (pointer: fine)': {
+        cursor: 'pointer',
+        borderRadius: '50%'
+      },
+      '&:active': {
+        cursor: 'move'
+      }
+    }
+  }]
+});
+const ClockPin = styled('div', {
+  name: 'MuiClock',
+  slot: 'Pin'
+})(({
+  theme
+}) => ({
+  width: 6,
+  height: 6,
+  borderRadius: '50%',
+  backgroundColor: (theme.vars || theme).palette.primary.main,
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+}));
+const meridiemButtonCommonStyles = (theme, clockMeridiemMode) => ({
+  zIndex: 1,
+  bottom: 8,
+  paddingLeft: 4,
+  paddingRight: 4,
+  width: CLOCK_HOUR_WIDTH,
+  variants: [{
+    props: {
+      clockMeridiemMode
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primary.main,
+      color: (theme.vars || theme).palette.primary.contrastText,
+      '&:hover': {
+        backgroundColor: (theme.vars || theme).palette.primary.light
+      }
+    }
+  }]
+});
+const ClockAmButton = styled(IconButton, {
+  name: 'MuiClock',
+  slot: 'AmButton'
+})(({
+  theme
+}) => _extends({}, meridiemButtonCommonStyles(theme, 'am'), {
+  // keeping it here to make TS happy
+  position: 'absolute',
+  left: 8
+}));
+const ClockPmButton = styled(IconButton, {
+  name: 'MuiClock',
+  slot: 'PmButton'
+})(({
+  theme
+}) => _extends({}, meridiemButtonCommonStyles(theme, 'pm'), {
+  // keeping it here to make TS happy
+  position: 'absolute',
+  right: 8
+}));
+const ClockMeridiemText = styled(Typography, {
+  name: 'MuiClock',
+  slot: 'MeridiemText'
+})({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+});
+
+/**
+ * @ignore - internal component.
+ */
+export function Clock(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiClock'
+  });
+  const {
+    ampm,
+    ampmInClock,
+    autoFocus,
+    children,
+    value,
+    handleMeridiemChange,
+    isTimeDisabled,
+    meridiemMode,
+    minutesStep = 1,
+    onChange,
+    selectedId,
+    type,
+    viewValue,
+    viewRange: [minViewValue, maxViewValue],
+    disabled = false,
+    readOnly,
+    className,
+    classes: classesProp
+  } = props;
+  const adapter = usePickerAdapter();
+  const translations = usePickerTranslations();
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isClockDisabled: disabled,
+    clockMeridiemMode: meridiemMode
+  });
+  const isMoving = React.useRef(false);
+  const classes = useUtilityClasses(classesProp, ownerState);
+  const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
+  const isPointerInner = !ampm && type === 'hours' && (viewValue < 1 || viewValue > 12);
+  const handleValueChange = (newValue, isFinish) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    if (isTimeDisabled(newValue, type)) {
+      return;
+    }
+    onChange(newValue, isFinish);
+  };
+  const setTime = (event, isFinish) => {
+    let {
+      offsetX,
+      offsetY
+    } = event;
+    if (offsetX === undefined) {
+      const rect = event.target.getBoundingClientRect();
+      offsetX = event.changedTouches[0].clientX - rect.left;
+      offsetY = event.changedTouches[0].clientY - rect.top;
+    }
+    const newSelectedValue = type === 'seconds' || type === 'minutes' ? getMinutes(offsetX, offsetY, minutesStep) : getHours(offsetX, offsetY, Boolean(ampm));
+    handleValueChange(newSelectedValue, isFinish);
+  };
+  const handleTouchSelection = event => {
+    isMoving.current = true;
+    setTime(event, 'shallow');
+  };
+  const handleTouchEnd = event => {
+    if (isMoving.current) {
+      setTime(event, 'finish');
+      isMoving.current = false;
+    }
+    event.preventDefault();
+  };
+  const handleMouseMove = event => {
+    // event.buttons & PRIMARY_MOUSE_BUTTON
+    if (event.buttons > 0) {
+      setTime(event.nativeEvent, 'shallow');
+    }
+  };
+  const handleMouseUp = event => {
+    if (isMoving.current) {
+      isMoving.current = false;
+    }
+    setTime(event.nativeEvent, 'finish');
+  };
+  const isPointerBetweenTwoClockValues = type === 'hours' ? false : viewValue % 5 !== 0;
+  const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
+  const listboxRef = React.useRef(null);
+  // Since this is rendered when a Popper is opened we can't use passive effects.
+  // Focusing in passive effects in Popper causes scroll jump.
+  useEnhancedEffect(() => {
+    if (autoFocus) {
+      // The ref not being resolved would be a bug in MUI.
+      listboxRef.current.focus();
+    }
+  }, [autoFocus]);
+  const clampValue = newValue => Math.max(minViewValue, Math.min(maxViewValue, newValue));
+  const circleValue = newValue => (newValue + (maxViewValue + 1)) % (maxViewValue + 1);
+  const handleKeyDown = event => {
+    // TODO: Why this early exit?
+    if (isMoving.current) {
+      return;
+    }
+    switch (event.key) {
+      case 'Home':
+        // reset both hours and minutes
+        handleValueChange(minViewValue, 'partial');
+        event.preventDefault();
+        break;
+      case 'End':
+        handleValueChange(maxViewValue, 'partial');
+        event.preventDefault();
+        break;
+      case 'ArrowUp':
+        handleValueChange(circleValue(viewValue + keyboardControlStep), 'partial');
+        event.preventDefault();
+        break;
+      case 'ArrowDown':
+        handleValueChange(circleValue(viewValue - keyboardControlStep), 'partial');
+        event.preventDefault();
+        break;
+      case 'PageUp':
+        handleValueChange(clampValue(viewValue + 5), 'partial');
+        event.preventDefault();
+        break;
+      case 'PageDown':
+        handleValueChange(clampValue(viewValue - 5), 'partial');
+        event.preventDefault();
+        break;
+      case 'Enter':
+      case ' ':
+        handleValueChange(viewValue, 'finish');
+        event.preventDefault();
+        break;
+      default:
+      // do nothing
+    }
+  };
+  return /*#__PURE__*/_jsxs(ClockRoot, {
+    className: clsx(classes.root, className),
+    children: [/*#__PURE__*/_jsxs(ClockClock, {
+      className: classes.clock,
+      children: [/*#__PURE__*/_jsx(ClockSquareMask, {
+        onTouchMove: handleTouchSelection,
+        onTouchStart: handleTouchSelection,
+        onTouchEnd: handleTouchEnd,
+        onMouseUp: handleMouseUp,
+        onMouseMove: handleMouseMove,
+        ownerState: ownerState,
+        className: classes.squareMask
+      }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(ClockPin, {
+          className: classes.pin
+        }), value != null && /*#__PURE__*/_jsx(ClockPointer, {
+          type: type,
+          viewValue: viewValue,
+          isInner: isPointerInner,
+          isBetweenTwoClockValues: isPointerBetweenTwoClockValues
+        })]
+      }), /*#__PURE__*/_jsx(ClockWrapper, {
+        "aria-activedescendant": selectedId,
+        "aria-label": translations.clockLabelText(type, value == null ? null : adapter.format(value, ampm ? 'fullTime12h' : 'fullTime24h')),
+        ref: listboxRef,
+        role: "listbox",
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        className: classes.wrapper,
+        children: children
+      })]
+    }), ampm && ampmInClock && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(ClockAmButton, {
+        onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
+        disabled: disabled || meridiemMode === null,
+        ownerState: ownerState,
+        className: classes.amButton,
+        title: formatMeridiem(adapter, 'am'),
+        children: /*#__PURE__*/_jsx(ClockMeridiemText, {
+          variant: "caption",
+          className: classes.meridiemText,
+          children: formatMeridiem(adapter, 'am')
+        })
+      }), /*#__PURE__*/_jsx(ClockPmButton, {
+        disabled: disabled || meridiemMode === null,
+        onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
+        ownerState: ownerState,
+        className: classes.pmButton,
+        title: formatMeridiem(adapter, 'pm'),
+        children: /*#__PURE__*/_jsx(ClockMeridiemText, {
+          variant: "caption",
+          className: classes.meridiemText,
+          children: formatMeridiem(adapter, 'pm')
+        })
+      })]
+    })]
+  });
+}