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

package/TimeClock/ClockPointer.js

@@ -1,17 +1,17 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "hasSelected", "isInner", "type", "viewValue"];
+const _excluded = ["className", "classes", "isBetweenTwoClockValues", "isInner", "type", "viewValue"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from "./shared.js";
 import { getClockPointerUtilityClass } from "./clockPointerClasses.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'],
     thumb: ['thumb']
@@ -33,7 +33,7 @@ const ClockPointerRoot = styled('div', {
   transformOrigin: 'center bottom 0px',
   variants: [{
     props: {
-      shouldAnimate: true
+      isClockPointerAnimated: true
     },
     style: {
       transition: theme.transitions.create(['transform', 'height'])
@@ -58,7 +58,7 @@ const ClockPointerThumb = styled('div', {
   boxSizing: 'content-box',
   variants: [{
     props: {
-      hasSelected: true
+      isBetweenTwoClockValues: false
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main
@@ -76,6 +76,8 @@ export function ClockPointer(inProps) {
   });
   const {
       className,
+      classes: classesProp,
+      isBetweenTwoClockValues,
       isInner,
       type,
       viewValue
@@ -85,10 +87,14 @@ export function ClockPointer(inProps) {
   React.useEffect(() => {
     previousType.current = type;
   }, [type]);
-  const ownerState = _extends({}, props, {
-    shouldAnimate: previousType.current !== type
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isClockPointerAnimated: previousType.current !== type,
+    isClockPointerBetweenTwoValues: isBetweenTwoClockValues
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const getAngleStyle = () => {
     const max = type === 'hours' ? 12 : 60;
     let angle = 360 / max * viewValue;

package/TimeClock/TimeClock.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -21,11 +21,9 @@ import { getHourNumbers, getMinutesNumbers } from "./ClockNumbers.js";
 import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     arrowSwitcher: ['arrowSwitcher']
@@ -93,6 +91,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       focusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       timezone: timezoneProp
@@ -120,6 +119,10 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
   });
   const translations = usePickerTranslations();
   const now = useNow(timezone);
+  const selectedId = useId();
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const {
     view,
     setView,
@@ -183,6 +186,9 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         {
           const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
           const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
+          if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
+            return true;
+          }
           const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
           const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({
@@ -214,7 +220,6 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const selectedId = useId();
   const viewProps = React.useMemo(() => {
     switch (view) {
       case 'hours':
@@ -223,9 +228,20 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
             const valueWithMeridiem = convertValueToMeridiem(hourValue, meridiemMode, ampm);
             setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
           };
+          const viewValue = utils.getHours(valueOrReferenceDate);
+          let viewRange;
+          if (ampm) {
+            if (viewValue > 12) {
+              viewRange = [12, 23];
+            } else {
+              viewRange = [0, 11];
+            }
+          } else {
+            viewRange = [0, 23];
+          }
           return {
             onChange: handleHoursChange,
-            viewValue: utils.getHours(valueOrReferenceDate),
+            viewValue,
             children: getHourNumbers({
               value,
               utils,
@@ -234,7 +250,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
               getClockNumberText: translations.hoursClockNumberText,
               isDisabled: hourValue => disabled || isTimeDisabled(hourValue, 'hours'),
               selectedId
-            })
+            }),
+            viewRange
           };
         }
       case 'minutes':
@@ -253,7 +270,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
               getClockNumberText: translations.minutesClockNumberText,
               isDisabled: minuteValue => disabled || isTimeDisabled(minuteValue, 'minutes'),
               selectedId
-            })
+            }),
+            viewRange: [0, 59]
           };
         }
       case 'seconds':
@@ -272,15 +290,15 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
               getClockNumberText: translations.secondsClockNumberText,
               isDisabled: secondValue => disabled || isTimeDisabled(secondValue, 'seconds'),
               selectedId
-            })
+            }),
+            viewRange: [0, 59]
           };
         }
       default:
         throw new Error('You must provide the type for ClockView');
     }
   }, [view, utils, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsxs(TimeClockRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),

package/TimeField/TimeField.js

@@ -1,18 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
 import { useTimeField } from "./useTimeField.js";
-import { useClearableField } from "../hooks/index.js";
-import { PickersTextField } from "../PickersTextField/index.js";
-import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { PickerFieldUI, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
+import { ClockIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -31,33 +27,21 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRe
   });
   const {
       slots,
-      slotProps,
-      InputProps,
-      inputProps
+      slotProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
-  const textFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    externalForwardedProps: other,
-    ownerState,
-    additionalProps: {
-      ref: inRef
-    }
+  const textFieldProps = useFieldTextFieldProps({
+    slotProps,
+    ref: inRef,
+    externalForwardedProps: other
   });
-
-  // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
-  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   const fieldResponse = useTimeField(textFieldProps);
-  const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
-  const processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
-    slots,
-    slotProps
-  }));
-  return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
+  return /*#__PURE__*/_jsx(PickerFieldUI, {
+    slots: slots,
+    slotProps: slotProps,
+    fieldResponse: fieldResponse,
+    defaultOpenPickerIcon: ClockIcon
+  });
 });
 process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -80,6 +64,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default false
    */
   clearable: PropTypes.bool,
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition: PropTypes.oneOf(['end', 'start']),
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
@@ -233,6 +223,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldSelectedSections} newValue The new selected sections.
    */
   onSelectedSectionsChange: PropTypes.func,
+  /**
+   * The position at which the opening button is placed.
+   * If there is no picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition: PropTypes.oneOf(['end', 'start']),
   /**
    * If `true`, the component is read-only.
    * When read-only, the value cannot be changed but the user can interact with the interface.
@@ -268,10 +264,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   shouldDisableTime: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/TimeField/TimeField.types.d.ts

@@ -1,13 +1,11 @@
-import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
 import { MakeOptional } from '@mui/x-internals/types';
-import TextField from '@mui/material/TextField';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps } from '../models';
-import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
+import { TimeValidationError, BuiltInFieldTextFieldProps } from '../models';
 import { ExportedValidateTimeProps } from '../validation/validateTime';
 import { AmPmProps } from '../internals/models/props/time';
-export interface UseTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, ExportedValidateTimeProps, ExportedUseClearableFieldProps, AmPmProps {
+import { PickerValue } from '../internals/models';
+import { ExportedPickerFieldUIProps, PickerFieldUISlotProps, PickerFieldUISlots } from '../internals/components/PickerFieldUI';
+export interface UseTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, ExportedValidateTimeProps, ExportedPickerFieldUIProps, AmPmProps {
 }
 export type TimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseTimeFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
@@ -19,16 +17,9 @@ export type TimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean =
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TimeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: TimeFieldSlotProps;
 };
-export type TimeFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = TimeFieldProps<TEnableAccessibleFieldDOMStructure>;
-export interface TimeFieldSlots extends UseClearableFieldSlots {
-    /**
-     * Form control with an input to render the value.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
-     */
-    textField?: React.ElementType;
+export interface TimeFieldSlots extends PickerFieldUISlots {
 }
-export interface TimeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, TimeFieldOwnerState<TEnableAccessibleFieldDOMStructure>>;
+export interface TimeFieldSlotProps extends PickerFieldUISlotProps {
 }

package/TimeField/useTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseTimeFieldProps } from './TimeField.types';
-export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "timezone" | "unstableFieldRef" | "referenceDate" | "shouldRespectLeadingZeros" | "ampm" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps | "dateSeparator">>;
+export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "ampm" | "timezone" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/TimeField/useTimeField.js

@@ -1,22 +1,25 @@
 'use client';
 
-import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { useField } from "../internals/hooks/useField/index.js";
-import { validateTime } from "../validation/index.js";
+import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
 import { useSplitFieldProps } from "../hooks/index.js";
-import { useDefaultizedTimeField } from "../internals/hooks/defaultizedFieldProps.js";
-export const useTimeField = inProps => {
-  const props = useDefaultizedTimeField(inProps);
+import { useTimeManager } from "../managers/index.js";
+export const useTimeField = props => {
+  const manager = useTimeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'time');
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: singleItemValueManager,
-    fieldValueManager: singleItemFieldValueManager,
-    validator: validateTime,
-    valueType: 'time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType,
+    getOpenPickerButtonAriaLabel: manager.internal_getOpenPickerButtonAriaLabel
   });
 };

package/TimePicker/TimePicker.js

@@ -69,8 +69,8 @@ process.env.NODE_ENV !== "production" ? TimePicker.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/TimePicker/TimePicker.types.d.ts

@@ -1,11 +1,10 @@
 import { DesktopTimePickerProps, DesktopTimePickerSlots, DesktopTimePickerSlotProps } from '../DesktopTimePicker';
-import { BaseSingleInputFieldProps, TimeViewWithMeridiem } from '../internals/models';
+import { BaseSingleInputFieldProps, PickerValue, TimeViewWithMeridiem } from '../internals/models';
 import { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps } from '../MobileTimePicker';
-import { FieldSection, PickerValidDate, TimeValidationError } from '../models';
 import { ValidateTimeProps } from '../validation/validateTime';
-export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots<TimeViewWithMeridiem> {
+export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots {
 }
-export interface TimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileTimePickerSlotProps<TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
+export interface TimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
 export interface TimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopTimePickerProps<TEnableAccessibleFieldDOMStructure>, Omit<MobileTimePickerProps<TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
     /**
@@ -28,4 +27,4 @@ export interface TimePickerProps<TEnableAccessibleFieldDOMStructure extends bool
 /**
  * Props the field can receive when used inside a time picker (<TimePicker />, <DesktopTimePicker /> or <MobileTimePicker /> component).
  */
-export type TimePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateTimeProps & BaseSingleInputFieldProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>;
+export type TimePickerFieldProps = ValidateTimeProps & BaseSingleInputFieldProps<PickerValue>;

package/TimePicker/TimePickerToolbar.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { TimePickerToolbarClasses } from './timePickerToolbarClasses';
-import { TimeViewWithMeridiem } from '../internals/models';
-import { PickerValidDate } from '../models';
-export interface TimePickerToolbarProps extends BaseToolbarProps<PickerValidDate | null, TimeViewWithMeridiem>, ExportedTimePickerToolbarProps {
+export interface TimePickerToolbarProps extends BaseToolbarProps, ExportedTimePickerToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
 }

package/TimePicker/TimePickerToolbar.js

@@ -2,11 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
+const _excluded = ["ampm", "ampmInClock", "className", "classes"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbarText } from "../internals/components/PickersToolbarText.js";
@@ -19,18 +18,18 @@ import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
 import { usePickerContext } from "../hooks/index.js";
+import { useToolbarOwnerState } from "../internals/hooks/useToolbarOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    isLandscape,
-    classes,
-    isRtl
+    pickerOrientation,
+    toolbarDirection
   } = ownerState;
   const slots = {
     root: ['root'],
     separator: ['separator'],
-    hourMinuteLabel: ['hourMinuteLabel', isLandscape && 'hourMinuteLabelLandscape', isRtl && 'hourMinuteLabelReverse'],
-    ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
+    hourMinuteLabel: ['hourMinuteLabel', pickerOrientation === 'landscape' && 'hourMinuteLabelLandscape', toolbarDirection === 'rtl' && 'hourMinuteLabelReverse'],
+    ampmSelection: ['ampmSelection', pickerOrientation === 'landscape' && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
   };
   return composeClasses(slots, getTimePickerToolbarUtilityClass, classes);
@@ -62,14 +61,14 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
   alignItems: 'flex-end',
   variants: [{
     props: {
-      isRtl: true
+      toolbarDirection: 'rtl'
     },
     style: {
       flexDirection: 'row-reverse'
     }
   }, {
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       marginTop: 'auto'
@@ -94,7 +93,7 @@ const TimePickerToolbarAmPmSelection = styled('div', {
   },
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       margin: '4px 0 auto',
@@ -123,32 +122,36 @@ function TimePickerToolbar(inProps) {
   const {
       ampm,
       ampmInClock,
-      value,
-      isLandscape,
-      onChange,
-      view,
-      onViewChange,
-      views,
-      className
+      className,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
   const translations = usePickerTranslations();
-  const isRtl = useRtl();
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp, ownerState);
   const {
+    value,
+    setValue,
     disabled,
-    readOnly
+    readOnly,
+    view,
+    setView,
+    views
   } = usePickerContext();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
     handleMeridiemChange
-  } = useMeridiemMode(value, ampm, onChange);
-  const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
-  const ownerState = _extends({}, props, {
-    isRtl
-  });
-  const classes = useUtilityClasses(ownerState);
+  } = useMeridiemMode(value, ampm, newValue => setValue(newValue, {
+    changeImportance: 'set'
+  }));
+  const formatSection = format => {
+    if (!utils.isValid(value)) {
+      return '--';
+    }
+    return utils.format(value, format);
+  };
   const separator = /*#__PURE__*/_jsx(TimePickerToolbarSeparator, {
     tabIndex: -1,
     value: ":",
@@ -159,7 +162,6 @@ function TimePickerToolbar(inProps) {
   return /*#__PURE__*/_jsxs(TimePickerToolbarRoot, _extends({
     landscapeDirection: "row",
     toolbarTitle: translations.timePickerToolbarTitle,
-    isLandscape: isLandscape,
     ownerState: ownerState,
     className: clsx(classes.root, className)
   }, other, {
@@ -169,20 +171,20 @@ function TimePickerToolbar(inProps) {
       children: [arrayIncludes(views, 'hours') && /*#__PURE__*/_jsx(PickersToolbarButton, {
         tabIndex: -1,
         variant: "h3",
-        onClick: () => onViewChange('hours'),
+        onClick: () => setView('hours'),
         selected: view === 'hours',
-        value: value ? formatHours(value) : '--'
+        value: formatSection(ampm ? 'hours12h' : 'hours24h')
       }), arrayIncludes(views, ['hours', 'minutes']) && separator, arrayIncludes(views, 'minutes') && /*#__PURE__*/_jsx(PickersToolbarButton, {
         tabIndex: -1,
         variant: "h3",
-        onClick: () => onViewChange('minutes'),
+        onClick: () => setView('minutes'),
         selected: view === 'minutes',
-        value: value ? utils.format(value, 'minutes') : '--'
+        value: formatSection('minutes')
       }), arrayIncludes(views, ['minutes', 'seconds']) && separator, arrayIncludes(views, 'seconds') && /*#__PURE__*/_jsx(PickersToolbarButton, {
         variant: "h3",
-        onClick: () => onViewChange('seconds'),
+        onClick: () => setView('seconds'),
         selected: view === 'seconds',
-        value: value ? utils.format(value, 'seconds') : '--'
+        value: formatSection('seconds')
       })]
     }), showAmPmControl && /*#__PURE__*/_jsxs(TimePickerToolbarAmPmSelection, {
       className: classes.ampmSelection,
@@ -224,14 +226,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  isLandscape: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -245,15 +239,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
+  toolbarPlaceholder: PropTypes.node
 } : void 0;
 export { TimePickerToolbar };

package/TimePicker/shared.d.ts

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { TimeClockSlots, TimeClockSlotProps } from '../TimeClock/TimeClock.types';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
-import { BaseTimeValidationProps } from '../internals/models/validation';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from './TimePickerToolbar';
-import { PickerValidDate, TimeValidationError } from '../models';
+import { TimeValidationError } from '../models';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time';
-import { TimeViewWithMeridiem } from '../internals/models';
+import { PickerValue, TimeViewWithMeridiem } from '../internals/models';
+import { ValidateTimePropsToDefault } from '../validation/validateTime';
 export interface BaseTimePickerSlots extends TimeClockSlots {
     /**
      * Custom component for the toolbar rendered above the views.
@@ -20,8 +20,8 @@ export interface BaseTimePickerSlots extends TimeClockSlots {
 export interface BaseTimePickerSlotProps extends TimeClockSlotProps {
     toolbar?: ExportedTimePickerToolbarProps;
 }
-export type TimePickerViewRenderers<TView extends TimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValidDate | null, TView, TimeViewRendererProps<TView, BaseClockProps<TView>>, TAdditionalProps>;
-export interface BaseTimePickerProps<TView extends TimeViewWithMeridiem> extends BasePickerInputProps<PickerValidDate | null, TView, TimeValidationError>, ExportedBaseClockProps {
+export type TimePickerViewRenderers<TView extends TimeViewWithMeridiem> = PickerViewRendererLookup<PickerValue, TView, TimeViewRendererProps<TView, BaseClockProps<TView>>>;
+export interface BaseTimePickerProps<TView extends TimeViewWithMeridiem> extends BasePickerInputProps<PickerValue, TView, TimeValidationError>, ExportedBaseClockProps {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default true on desktop, false on mobile
@@ -44,6 +44,6 @@ export interface BaseTimePickerProps<TView extends TimeViewWithMeridiem> extends
      */
     viewRenderers?: Partial<TimePickerViewRenderers<TView>>;
 }
-type UseTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>>;
+type UseTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | ValidateTimePropsToDefault>>;
 export declare function useTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TView, Props>;
 export {};