@mui/x-date-pickers 6.2.0 → 6.3.0

package/TimeField/TimeField.js

@@ -55,11 +55,13 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
+    InputProps: _extends({}, fieldProps.InputProps, {
+      readOnly
+    }),
     inputProps: _extends({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste,
       inputMode,
-      readOnly
+      onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -268,11 +270,27 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} 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,
+  /**
+   * 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`)
+   *
+   * 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°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, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   *
+   * @default `false`
+   */
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The size of the component.
    */

package/TimeField/TimeField.types.d.ts

@@ -3,8 +3,9 @@ import { SlotComponentProps } from '@mui/base/utils';
 import TextField from '@mui/material/TextField';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
 import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
-import { BaseTimeValidationProps, TimeValidationProps } from '../internals/hooks/validation/models';
-import { FieldsTextFieldProps, UncapitalizeObjectKeys } from '../internals';
+import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
+import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
+import { FieldsTextFieldProps } from '../internals/models/fields';
 import { FieldSection, TimeValidationError } from '../models';
 export interface UseTimeFieldParams<TDate, TChildProps extends {}> {
     props: UseTimeFieldComponentProps<TDate, TChildProps>;

package/TimeField/useTimeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
-import { validateTime } from '../internals/hooks/validation/useTimeValidation';
+import { validateTime } from '../internals/utils/validation/validateTime';
 import { useUtils } from '../internals/hooks/useUtils';
 const useDefaultizedTimeField = props => {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
@@ -26,6 +26,7 @@ export const useTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -51,6 +52,7 @@ export const useTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,

package/TimePicker/TimePicker.js

@@ -207,7 +207,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  openTo: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Force rendering in particular orientation.
    */
@@ -236,11 +236,17 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} 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,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -255,6 +261,22 @@ process.env.NODE_ENV !== "production" ? TimePicker.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]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -265,7 +287,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -273,6 +295,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   viewRenderers: PropTypes.shape({
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     seconds: PropTypes.func
   }),

package/TimePicker/TimePicker.types.d.ts

@@ -1,11 +1,12 @@
 import { DesktopTimePickerProps, DesktopTimePickerSlotsComponent, DesktopTimePickerSlotsComponentsProps } from '../DesktopTimePicker';
+import { TimeViewWithMeridiem } from '../internals/models';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { MobileTimePickerProps, MobileTimePickerSlotsComponent, MobileTimePickerSlotsComponentsProps } from '../MobileTimePicker';
-export interface TimePickerSlotsComponents<TDate> extends DesktopTimePickerSlotsComponent<TDate>, MobileTimePickerSlotsComponent<TDate> {
+export interface TimePickerSlotsComponents<TDate> extends DesktopTimePickerSlotsComponent<TDate>, MobileTimePickerSlotsComponent<TDate, TimeViewWithMeridiem> {
 }
-export interface TimePickerSlotsComponentsProps<TDate> extends DesktopTimePickerSlotsComponentsProps<TDate>, MobileTimePickerSlotsComponentsProps<TDate> {
+export interface TimePickerSlotsComponentsProps<TDate> extends DesktopTimePickerSlotsComponentsProps<TDate>, MobileTimePickerSlotsComponentsProps<TDate, TimeViewWithMeridiem> {
 }
-export interface TimePickerProps<TDate> extends DesktopTimePickerProps<TDate>, MobileTimePickerProps<TDate> {
+export interface TimePickerProps<TDate> extends DesktopTimePickerProps<TDate>, Omit<MobileTimePickerProps<TDate, TimeViewWithMeridiem>, 'views'> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'

package/TimePicker/TimePickerToolbar.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { TimePickerToolbarClasses } from './timePickerToolbarClasses';
-import { TimeView } from '../models';
-export interface TimePickerToolbarProps<TDate> extends BaseToolbarProps<TDate | null, TimeView> {
+import { TimeViewWithMeridiem } from '../internals/models';
+export interface TimePickerToolbarProps<TDate> extends BaseToolbarProps<TDate | null, TimeViewWithMeridiem> {
     ampm?: boolean;
     ampmInClock?: boolean;
     classes?: Partial<TimePickerToolbarClasses>;

package/TimePicker/TimePickerToolbar.js

@@ -240,7 +240,7 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   /**
    * Currently visible picker view.
    */
-  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired,
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
+  view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
 } : void 0;
 export { TimePickerToolbar };

package/TimePicker/shared.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { DefaultizedProps } from '../internals/models/helpers';
-import { TimeClockSlotsComponent, TimeClockSlotsComponentsProps, ExportedTimeClockProps } from '../TimeClock/TimeClock.types';
+import { TimeClockSlotsComponent, TimeClockSlotsComponentsProps } from '../TimeClock/TimeClock.types';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
-import { BaseTimeValidationProps } from '../internals/hooks/validation/models';
+import { BaseTimeValidationProps } from '../internals/models/validation';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from './TimePickerToolbar';
-import { TimeValidationError, TimeView } from '../models';
+import { TimeValidationError } from '../models';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
+import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
+import { TimeViewWithMeridiem } from '../internals/models';
 export interface BaseTimePickerSlotsComponent<TDate> extends TimeClockSlotsComponent {
     /**
      * Custom component for the toolbar rendered above the views.
@@ -19,7 +21,7 @@ export interface BaseTimePickerSlotsComponent<TDate> extends TimeClockSlotsCompo
 export interface BaseTimePickerSlotsComponentsProps extends TimeClockSlotsComponentsProps {
     toolbar?: ExportedTimePickerToolbarProps;
 }
-export interface BaseTimePickerProps<TDate> extends BasePickerInputProps<TDate | null, TDate, TimeView, TimeValidationError>, ExportedTimeClockProps<TDate> {
+export interface BaseTimePickerProps<TDate, TView extends TimeViewWithMeridiem> extends BasePickerInputProps<TDate | null, TDate, TView, TimeValidationError>, ExportedBaseClockProps<TDate> {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default true on desktop, false on mobile
@@ -52,8 +54,8 @@ export interface BaseTimePickerProps<TDate> extends BasePickerInputProps<TDate |
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be the used.
      */
-    viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, TimeView, TimeViewRendererProps<TDate, TimeView>, {}>>;
+    viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, TView, TimeViewRendererProps<TView, BaseClockProps<TDate, TView>>, {}>>;
 }
-type UseTimePickerDefaultizedProps<TDate, Props extends BaseTimePickerProps<TDate>> = LocalizedComponent<TDate, Omit<DefaultizedProps<Props, 'views' | 'openTo' | keyof BaseTimeValidationProps>, 'components' | 'componentsProps'>>;
-export declare function useTimePickerDefaultizedProps<TDate, Props extends BaseTimePickerProps<TDate>>(props: Props, name: string): UseTimePickerDefaultizedProps<TDate, Props>;
+type UseTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, Omit<DefaultizedProps<Props, 'views' | 'openTo' | keyof BaseTimeValidationProps>, 'components' | 'componentsProps'>>;
+export declare function useTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TDate, TView, Props>;
 export {};

package/YearCalendar/YearCalendar.types.d.ts

@@ -1,7 +1,7 @@
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { YearCalendarClasses } from './yearCalendarClasses';
-import { BaseDateValidationProps, YearValidationProps } from '../internals/hooks/validation/models';
+import { BaseDateValidationProps, YearValidationProps } from '../internals/models/validation';
 export interface ExportedYearCalendarProps {
     /**
      * Years rendered per row.

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { DateCalendarProps } from '../DateCalendar';
-import { DateOrTimeView } from '../models';
-export interface DateViewRendererProps<TDate, TView extends DateOrTimeView> extends Omit<DateCalendarProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView'> {
+import { DateOrTimeViewWithMeridiem } from '../internals/models';
+export interface DateViewRendererProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends Omit<DateCalendarProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView'> {
     view: TView;
     onViewChange?: (view: TView) => void;
     views: readonly TView[];

package/index.d.ts

@@ -1,4 +1,6 @@
 export * from './TimeClock';
+export * from './DigitalClock';
+export * from './MultiSectionDigitalClock';
 export * from './LocalizationProvider';
 export * from './PickersDay';
 export * from './locales';

package/index.js

@@ -1,11 +1,14 @@
 /**
- * @mui/x-date-pickers v6.2.0
+ * @mui/x-date-pickers v6.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// Clocks
 export * from './TimeClock';
+export * from './DigitalClock';
+export * from './MultiSectionDigitalClock';
 export * from './LocalizationProvider';
 export * from './PickersDay';
 export * from './locales';

package/internals/components/PickersToolbar.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { BaseToolbarProps } from '../models/props/toolbar';
 import { PickersToolbarClasses } from './pickersToolbarClasses';
-import { DateOrTimeView } from '../../models';
-export interface PickersToolbarProps<TValue, TView extends DateOrTimeView> extends Pick<BaseToolbarProps<TValue, TView>, 'isLandscape' | 'hidden' | 'titleId'> {
+import { DateOrTimeViewWithMeridiem } from '../models';
+export interface PickersToolbarProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends Pick<BaseToolbarProps<TValue, TView>, 'isLandscape' | 'hidden' | 'titleId'> {
     className?: string;
     landscapeDirection?: 'row' | 'column';
     toolbarTitle: React.ReactNode;
     classes?: Partial<PickersToolbarClasses>;
 }
-type PickersToolbarComponent = (<TValue, TView extends DateOrTimeView>(props: React.PropsWithChildren<PickersToolbarProps<TValue, TView>> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type PickersToolbarComponent = (<TValue, TView extends DateOrTimeViewWithMeridiem>(props: React.PropsWithChildren<PickersToolbarProps<TValue, TView>> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 export declare const PickersToolbar: PickersToolbarComponent;

package/internals/constants/dimensions.d.ts

@@ -2,3 +2,4 @@ export declare const DAY_SIZE = 36;
 export declare const DAY_MARGIN = 2;
 export declare const DIALOG_WIDTH = 320;
 export declare const VIEW_HEIGHT = 358;
+export declare const DIGITAL_CLOCK_VIEW_HEIGHT = 232;

package/internals/constants/dimensions.js

@@ -1,4 +1,5 @@
 export const DAY_SIZE = 36;
 export const DAY_MARGIN = 2;
 export const DIALOG_WIDTH = 320;
-export const VIEW_HEIGHT = 358;
+export const VIEW_HEIGHT = 358;
+export const DIGITAL_CLOCK_VIEW_HEIGHT = 232;

package/internals/demo/DemoContainer.js

@@ -9,6 +9,9 @@ const getChildTypeFromChildName = childName => {
   if (childName.match(/^([A-Za-z]+)Range(Calendar|Clock)$/)) {
     return 'multi-panel-UI-view';
   }
+  if (childName.match(/^([A-Za-z]*)(DigitalClock)$/)) {
+    return 'Tall-UI-view';
+  }
   if (childName.match(/^Static([A-Za-z]+)/) || childName.match(/^([A-Za-z]+)(Calendar|Clock)$/)) {
     return 'UI-view';
   }
@@ -73,7 +76,7 @@ export function DemoContainer(props) {
   });
   const getSpacing = direction => {
     if (direction === 'row') {
-      return childrenTypes.has('UI-view') ? 3 : 2;
+      return childrenTypes.has('UI-view') || childrenTypes.has('Tall-UI-view') ? 3 : 2;
     }
     return childrenTypes.has('UI-view') ? 4 : 3;
   };

package/internals/hooks/date-helpers-hooks.d.ts

@@ -1,4 +1,5 @@
 import { PickerOnChangeFn } from './useViews';
+import { PickerSelectionState } from './usePicker';
 interface MonthValidationOptions<TDate> {
     disablePast?: boolean;
     disableFuture?: boolean;
@@ -7,8 +8,8 @@ interface MonthValidationOptions<TDate> {
 }
 export declare function useNextMonthDisabled<TDate>(month: TDate, { disableFuture, maxDate }: Pick<MonthValidationOptions<TDate>, 'disableFuture' | 'maxDate'>): boolean;
 export declare function usePreviousMonthDisabled<TDate>(month: TDate, { disablePast, minDate }: Pick<MonthValidationOptions<TDate>, 'disablePast' | 'minDate'>): boolean;
-export declare function useMeridiemMode<TDate>(date: TDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn<TDate>): {
-    meridiemMode: "am" | "pm" | null;
+export declare function useMeridiemMode<TDate>(date: TDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn<TDate>, selectionState?: PickerSelectionState): {
+    meridiemMode: import("../utils/time-utils").Meridiem | null;
     handleMeridiemChange: (mode: 'am' | 'pm') => void;
 };
 export {};

package/internals/hooks/date-helpers-hooks.js

@@ -23,13 +23,13 @@ export function usePreviousMonthDisabled(month, {
     return !utils.isBefore(firstEnabledMonth, month);
   }, [disablePast, minDate, month, utils]);
 }
-export function useMeridiemMode(date, ampm, onChange) {
+export function useMeridiemMode(date, ampm, onChange, selectionState) {
   const utils = useUtils();
   const meridiemMode = getMeridiem(date, utils);
   const handleMeridiemChange = React.useCallback(mode => {
     const timeWithMeridiem = date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils);
-    onChange(timeWithMeridiem, 'partial');
-  }, [ampm, date, onChange, utils]);
+    onChange(timeWithMeridiem, selectionState != null ? selectionState : 'partial');
+  }, [ampm, date, onChange, selectionState, utils]);
   return {
     meridiemMode,
     handleMeridiemChange

package/internals/hooks/useDesktopPicker/useDesktopPicker.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { UseDesktopPickerParams, UseDesktopPickerProps } from './useDesktopPicker.types';
-import { DateOrTimeView } from '../../../models';
+import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
  * Hook managing all the single-date desktop pickers:
  * - DesktopDatePicker
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export declare const useDesktopPicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>>({ props, valueManager, getOpenDialogAriaText, validator, }: UseDesktopPickerParams<TDate, TView, TExternalProps>) => {
+export declare const useDesktopPicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TDate, TView, TExternalProps>) => {
     renderPicker: () => JSX.Element;
 };

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ownerState"],
-  _excluded2 = ["ownerState"];
+const _excluded = ["props", "getOpenDialogAriaText"],
+  _excluded2 = ["ownerState"],
+  _excluded3 = ["ownerState"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import MuiInputAdornment from '@mui/material/InputAdornment';
@@ -21,13 +22,13 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export const useDesktopPicker = ({
-  props,
-  valueManager,
-  getOpenDialogAriaText,
-  validator
-}) => {
+export const useDesktopPicker = _ref => {
   var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$inputAdornment, _slots$openPickerButt, _slots$layout;
+  let {
+      props,
+      getOpenDialogAriaText
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     slots,
     slotProps: innerSlotProps,
@@ -55,15 +56,13 @@ export const useDesktopPicker = ({
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps
-  } = usePicker({
+  } = usePicker(_extends({}, pickerParams, {
     props,
     inputRef: internalInputRef,
-    valueManager,
-    validator,
     autoFocusView: true,
     additionalViewProps: {},
     wrapperVariant: 'desktop'
-  });
+  }));
   const InputAdornment = (_slots$inputAdornment = slots.inputAdornment) != null ? _slots$inputAdornment : MuiInputAdornment;
   const _useSlotProps = useSlotProps({
       elementType: InputAdornment,
@@ -73,7 +72,7 @@ export const useDesktopPicker = ({
       },
       ownerState: props
     }),
-    inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+    inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const OpenPickerButton = (_slots$openPickerButt = slots.openPickerButton) != null ? _slots$openPickerButt : IconButton;
   const _useSlotProps2 = useSlotProps({
       elementType: OpenPickerButton,
@@ -86,7 +85,7 @@ export const useDesktopPicker = ({
       },
       ownerState: props
     }),
-    openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded2);
+    openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
   const OpenPickerIcon = slots.openPickerIcon;
   const Field = slots.field;
   const fieldProps = useSlotProps({
@@ -102,7 +101,8 @@ export const useDesktopPicker = ({
       format,
       formatDensity,
       label,
-      autoFocus: autoFocus && !props.open
+      autoFocus: autoFocus && !props.open,
+      focused: open ? true : undefined
     }),
     ownerState: props
   });

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -6,12 +6,13 @@ import { SlotComponentProps } from '@mui/base/utils';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps } from '../../components/PickersPopper';
 import { UsePickerParams, UsePickerProps } from '../usePicker';
-import { BaseSingleInputFieldProps, FieldSection, DateOrTimeView, MuiPickersAdapter } from '../../../models';
+import { BaseSingleInputFieldProps, FieldSection, MuiPickersAdapter } from '../../../models';
 import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps, PickersLayoutSlotsComponentsProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { UncapitalizeObjectKeys } from '../../utils/slots-migration';
-export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeView> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView> {
+import { DateOrTimeViewWithMeridiem } from '../../models';
+export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView> {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -37,9 +38,9 @@ export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeV
      */
     OpenPickerIcon: React.ElementType;
 }
-export interface UseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
+export interface UseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
-export interface ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
+export interface ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
     field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, any, FieldSection, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
     inputAdornment?: Partial<InputAdornmentProps>;
@@ -52,7 +53,7 @@ export interface DesktopOnlyPickerProps<TDate> extends BaseNonStaticPickerProps,
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TDate, TView extends DateOrTimeView, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, DesktopOnlyPickerProps<TDate> {
+export interface UseDesktopPickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, DesktopOnlyPickerProps<TDate> {
     /**
      * Overridable component slots.
      * @default {}
@@ -64,7 +65,7 @@ export interface UseDesktopPickerProps<TDate, TView extends DateOrTimeView, TErr
      */
     slotProps?: UseDesktopPickerSlotsComponentsProps<TDate, TView>;
 }
-export interface UseDesktopPickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'validator'> {
+export interface UseDesktopPickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
 }

package/internals/hooks/useField/useField.js

@@ -6,7 +6,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import { useTheme } from '@mui/material/styles';
-import { useValidation } from '../validation/useValidation';
+import { useValidation } from '../useValidation';
 import { useUtils } from '../useUtils';
 import { adjustSectionValue, isAndroid, cleanString, getSectionOrder } from './useField.utils';
 import { useFieldState } from './useFieldState';
@@ -26,15 +26,6 @@ export const useField = params => {
     sectionsValueBoundaries,
     placeholder
   } = useFieldState(params);
-  const {
-    applyCharacterEditing,
-    resetCharacterQuery
-  } = useFieldCharacterEditing({
-    sections: state.sections,
-    updateSectionValue,
-    sectionsValueBoundaries,
-    setTempAndroidValueStr
-  });
   const {
       inputRef: inputRefProp,
       internalProps,
@@ -56,6 +47,15 @@ export const useField = params => {
       validator
     } = params,
     otherForwardedProps = _objectWithoutPropertiesLoose(params.forwardedProps, _excluded);
+  const {
+    applyCharacterEditing,
+    resetCharacterQuery
+  } = useFieldCharacterEditing({
+    sections: state.sections,
+    updateSectionValue,
+    sectionsValueBoundaries,
+    setTempAndroidValueStr
+  });
   const inputRef = React.useRef(null);
   const handleRef = useForkRef(inputRefProp, inputRef);
   const focusTimeoutRef = React.useRef(undefined);
@@ -121,7 +121,8 @@ export const useField = params => {
       const activeSection = state.sections[selectedSectionIndexes.startIndex];
       const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
       const digitsOnly = /^[0-9]+$/.test(pastedValue);
-      const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly;
+      const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
+      const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
       if (isValidPastedValue) {
         // Early return to let the paste update section, value
         return;

package/internals/hooks/useField/useField.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter } from '../../../models';
+import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, FieldSectionContentType, FieldValueType } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
-import { InferError, Validator } from '../validation/useValidation';
+import { InferError, Validator } from '../useValidation';
 export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>> {
     inputRef?: React.Ref<HTMLInputElement>;
     forwardedProps: TForwardedProps;
@@ -47,6 +47,21 @@ export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TE
      * @default "dense"
      */
     formatDensity?: 'dense' | 'spacious';
+    /**
+     * 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`)
+     *
+     * 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°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, '')`.
+     *
+     * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+     * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+     *
+     * @default `false`
+     */
+    shouldRespectLeadingZeros?: boolean;
     /**
      * It prevents the user from changing the value of the field
      * (not from interacting with the field).
@@ -119,7 +134,7 @@ export type FieldSectionsValueBoundaries<TDate> = {
     [SectionType in FieldSectionType]: (params: {
         currentDate: TDate | null;
         format: string;
-        contentType: 'digit' | 'letter';
+        contentType: FieldSectionContentType;
     }) => FieldSectionValueBoundaries<TDate, SectionType>;
 };
 export type FieldChangeHandler<TValue, TError> = (value: TValue, context: FieldChangeHandlerContext<TError>) => void;
@@ -180,7 +195,7 @@ export interface FieldValueManager<TValue, TDate, TSection extends FieldSection>
      * Creates the string value to render in the input based on the current section list.
      * @template TSection
      * @param {TSection[]} sections The current section list.
-     * @param {boolean} isRTL `true` is the current orientation is "right to left"
+     * @param {boolean} isRTL `true` if the current orientation is "right to left"
      * @returns {string} The string value to render in the input.
      */
     getValueStrFromSections: (sections: TSection[], isRTL: boolean) => string;
@@ -249,7 +264,6 @@ export type UseFieldValidationProps<TValue, TInternalProps extends {
     value: TValue;
 };
 export type AvailableAdjustKeyCode = 'ArrowUp' | 'ArrowDown' | 'PageUp' | 'PageDown' | 'Home' | 'End';
-export type FieldValueType = 'date' | 'time' | 'date-time';
 export type SectionNeighbors = {
     [sectionIndex: number]: {
         /**