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

package/locales/zhCN.mjs

@@ -0,0 +1,76 @@
+import { getPickersLocalization } from "./utils/getPickersLocalization.mjs";
+const views = {
+  hours: '小时',
+  minutes: '分钟',
+  seconds: '秒',
+  meridiem: '十二小时制'
+};
+const zhCNPickers = {
+  // Calendar navigation
+  previousMonth: '上个月',
+  nextMonth: '下个月',
+  // View navigation
+  openPreviousView: '前一个视图',
+  openNextView: '下一个视图',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? '年视图已打开，切换为日历视图' : '日历视图已打开，切换为年视图',
+  // DateRange labels
+  start: '开始',
+  end: '结束',
+  startDate: '开始日期',
+  startTime: '开始时间',
+  endDate: '结束日期',
+  endTime: '结束时间',
+  // Action bar
+  cancelButtonLabel: '取消',
+  clearButtonLabel: '清除',
+  okButtonLabel: '确认',
+  todayButtonLabel: '今天',
+  nextStepButtonLabel: '下个',
+  // Toolbar titles
+  datePickerToolbarTitle: '选择日期',
+  dateTimePickerToolbarTitle: '选择日期和时间',
+  timePickerToolbarTitle: '选择时间',
+  dateRangePickerToolbarTitle: '选择日期范围',
+  timeRangePickerToolbarTitle: '选择时间范围',
+  // Clock labels
+  clockLabelText: (view, formattedTime) => `选择 ${views[view]}. ${!formattedTime ? '未选择时间' : `已选择${formattedTime}`}`,
+  hoursClockNumberText: hours => `${hours}小时`,
+  minutesClockNumberText: minutes => `${minutes}分钟`,
+  secondsClockNumberText: seconds => `${seconds}秒`,
+  // Digital clock labels
+  selectViewText: view => `选择 ${views[view]}`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: '周数',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}周`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
+  // Open Picker labels
+  openDatePickerDialogue: formattedDate => formattedDate ? `选择日期，已选择${formattedDate}` : '选择日期',
+  openTimePickerDialogue: formattedTime => formattedTime ? `选择时间，已选择${formattedTime}` : '选择时间',
+  openRangePickerDialogue: formattedRange => formattedRange ? `选择范围，已选范围是 ${formattedRange}` : '选择范围',
+  fieldClearLabel: '清除',
+  // Table labels
+  timeTableLabel: '选择时间',
+  dateTableLabel: '选择日期',
+  // Field section placeholders
+  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'hh',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa',
+  // View names
+  year: '年份',
+  month: '月份',
+  day: '日期',
+  weekDay: '星期',
+  hours: '时',
+  minutes: '分',
+  seconds: '秒',
+  meridiem: '十二小时制',
+  // Common
+  empty: '空'
+};
+export const zhCN = getPickersLocalization(zhCNPickers);

package/locales/zhHK.d.mts

@@ -0,0 +1,83 @@
+import { TimeViewWithMeridiem } from "../internals/models/index.mjs";
+export declare const zhHK: {
+  components: {
+    MuiLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          previousMonth?: string | undefined;
+          nextMonth?: string | undefined;
+          calendarWeekNumberHeaderLabel?: string | undefined;
+          calendarWeekNumberHeaderText?: string | undefined;
+          calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
+          calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
+          openPreviousView?: string | undefined;
+          openNextView?: string | undefined;
+          calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers/models").DateView) => string) | undefined;
+          start?: string | undefined;
+          end?: string | undefined;
+          startDate?: string | undefined;
+          startTime?: string | undefined;
+          endDate?: string | undefined;
+          endTime?: string | undefined;
+          cancelButtonLabel?: string | undefined;
+          clearButtonLabel?: string | undefined;
+          okButtonLabel?: string | undefined;
+          todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
+          clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
+          hoursClockNumberText?: ((hours: string) => string) | undefined;
+          minutesClockNumberText?: ((minutes: string) => string) | undefined;
+          secondsClockNumberText?: ((seconds: string) => string) | undefined;
+          selectViewText?: ((view: TimeViewWithMeridiem) => string) | undefined;
+          openDatePickerDialogue?: ((formattedDate: string | null) => string) | undefined;
+          openTimePickerDialogue?: ((formattedTime: string | null) => string) | undefined;
+          openRangePickerDialogue?: ((formattedRange: string | null) => string) | undefined;
+          fieldClearLabel?: string | undefined;
+          timeTableLabel?: string | undefined;
+          dateTableLabel?: string | undefined;
+          fieldYearPlaceholder?: ((params: {
+            digitAmount: number;
+            format: string;
+          }) => string) | undefined;
+          fieldMonthPlaceholder?: ((params: {
+            contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
+            format: string;
+          }) => string) | undefined;
+          fieldDayPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          fieldWeekDayPlaceholder?: ((params: {
+            contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
+            format: string;
+          }) => string) | undefined;
+          fieldHoursPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          fieldMinutesPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          fieldSecondsPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          fieldMeridiemPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          year?: string | undefined;
+          month?: string | undefined;
+          day?: string | undefined;
+          weekDay?: string | undefined;
+          hours?: string | undefined;
+          minutes?: string | undefined;
+          seconds?: string | undefined;
+          meridiem?: string | undefined;
+          empty?: string | undefined;
+          datePickerToolbarTitle?: string | undefined;
+          timePickerToolbarTitle?: string | undefined;
+          dateTimePickerToolbarTitle?: string | undefined;
+          dateRangePickerToolbarTitle?: string | undefined;
+          timeRangePickerToolbarTitle?: string | undefined;
+        };
+      };
+    };
+  };
+};

package/locales/zhHK.mjs

@@ -0,0 +1,76 @@
+import { getPickersLocalization } from "./utils/getPickersLocalization.mjs";
+const views = {
+  hours: '小時',
+  minutes: '分鐘',
+  seconds: '秒',
+  meridiem: '子午線'
+};
+const zhHKPickers = {
+  // Calendar navigation
+  previousMonth: '上個月',
+  nextMonth: '下個月',
+  // View navigation
+  openPreviousView: '前一個檢視表',
+  openNextView: '下一個檢視表',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? '年份檢視表已打開，切換以檢視日曆' : '日曆檢視表已打開，切換以檢視年份',
+  // DateRange labels
+  start: '開始',
+  end: '結束',
+  startDate: '開始日期',
+  startTime: '開始時間',
+  endDate: '結束日期',
+  endTime: '結束時間',
+  // Action bar
+  cancelButtonLabel: '取消',
+  clearButtonLabel: '清除',
+  okButtonLabel: '確認',
+  todayButtonLabel: '今日',
+  nextStepButtonLabel: '下個',
+  // Toolbar titles
+  datePickerToolbarTitle: '選擇日期',
+  dateTimePickerToolbarTitle: '選擇日期和時間',
+  timePickerToolbarTitle: '選擇時間',
+  dateRangePickerToolbarTitle: '選擇日期範圍',
+  timeRangePickerToolbarTitle: '選擇時間範圍',
+  // Clock labels
+  clockLabelText: (view, formattedTime) => `選擇 ${views[view]}. ${!formattedTime ? '未選擇時間' : `已選擇${formattedTime}`}`,
+  hoursClockNumberText: hours => `${hours}小時`,
+  minutesClockNumberText: minutes => `${minutes}分鐘`,
+  secondsClockNumberText: seconds => `${seconds}秒`,
+  // Digital clock labels
+  selectViewText: view => `選擇 ${views[view]}`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: '週數',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}週`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
+  // Open Picker labels
+  openDatePickerDialogue: formattedDate => formattedDate ? `選擇日期，已選擇${formattedDate}` : '選擇日期',
+  openTimePickerDialogue: formattedTime => formattedTime ? `選擇時間，已選擇${formattedTime}` : '選擇時間',
+  openRangePickerDialogue: formattedRange => formattedRange ? `選擇範圍，已選擇嘅範圍係 ${formattedRange}` : '選擇範圍',
+  fieldClearLabel: '清除',
+  // Table labels
+  timeTableLabel: '選擇時間',
+  dateTableLabel: '選擇日期',
+  // Field section placeholders
+  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'hh',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa',
+  // View names
+  year: '年',
+  month: '月',
+  day: '日',
+  weekDay: '星期',
+  hours: '小時',
+  minutes: '分鐘',
+  seconds: '秒',
+  meridiem: '子午線',
+  // Common
+  empty: '空值'
+};
+export const zhHK = getPickersLocalization(zhHKPickers);

package/locales/zhTW.d.mts

@@ -0,0 +1,83 @@
+import { TimeViewWithMeridiem } from "../internals/models/index.mjs";
+export declare const zhTW: {
+  components: {
+    MuiLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          previousMonth?: string | undefined;
+          nextMonth?: string | undefined;
+          calendarWeekNumberHeaderLabel?: string | undefined;
+          calendarWeekNumberHeaderText?: string | undefined;
+          calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
+          calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
+          openPreviousView?: string | undefined;
+          openNextView?: string | undefined;
+          calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers/models").DateView) => string) | undefined;
+          start?: string | undefined;
+          end?: string | undefined;
+          startDate?: string | undefined;
+          startTime?: string | undefined;
+          endDate?: string | undefined;
+          endTime?: string | undefined;
+          cancelButtonLabel?: string | undefined;
+          clearButtonLabel?: string | undefined;
+          okButtonLabel?: string | undefined;
+          todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
+          clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
+          hoursClockNumberText?: ((hours: string) => string) | undefined;
+          minutesClockNumberText?: ((minutes: string) => string) | undefined;
+          secondsClockNumberText?: ((seconds: string) => string) | undefined;
+          selectViewText?: ((view: TimeViewWithMeridiem) => string) | undefined;
+          openDatePickerDialogue?: ((formattedDate: string | null) => string) | undefined;
+          openTimePickerDialogue?: ((formattedTime: string | null) => string) | undefined;
+          openRangePickerDialogue?: ((formattedRange: string | null) => string) | undefined;
+          fieldClearLabel?: string | undefined;
+          timeTableLabel?: string | undefined;
+          dateTableLabel?: string | undefined;
+          fieldYearPlaceholder?: ((params: {
+            digitAmount: number;
+            format: string;
+          }) => string) | undefined;
+          fieldMonthPlaceholder?: ((params: {
+            contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
+            format: string;
+          }) => string) | undefined;
+          fieldDayPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          fieldWeekDayPlaceholder?: ((params: {
+            contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
+            format: string;
+          }) => string) | undefined;
+          fieldHoursPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          fieldMinutesPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          fieldSecondsPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          fieldMeridiemPlaceholder?: ((params: {
+            format: string;
+          }) => string) | undefined;
+          year?: string | undefined;
+          month?: string | undefined;
+          day?: string | undefined;
+          weekDay?: string | undefined;
+          hours?: string | undefined;
+          minutes?: string | undefined;
+          seconds?: string | undefined;
+          meridiem?: string | undefined;
+          empty?: string | undefined;
+          datePickerToolbarTitle?: string | undefined;
+          timePickerToolbarTitle?: string | undefined;
+          dateTimePickerToolbarTitle?: string | undefined;
+          dateRangePickerToolbarTitle?: string | undefined;
+          timeRangePickerToolbarTitle?: string | undefined;
+        };
+      };
+    };
+  };
+};

package/locales/zhTW.mjs

@@ -0,0 +1,76 @@
+import { getPickersLocalization } from "./utils/getPickersLocalization.mjs";
+const views = {
+  hours: '小時',
+  minutes: '分鐘',
+  seconds: '秒',
+  meridiem: '十二小時制'
+};
+const zhTWPickers = {
+  // Calendar navigation
+  previousMonth: '上個月',
+  nextMonth: '下個月',
+  // View navigation
+  openPreviousView: '前一個視圖',
+  openNextView: '下一個視圖',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? '年視圖已打開，切換為日曆視圖' : '日曆視圖已打開，切換為年視圖',
+  // DateRange labels
+  start: '開始',
+  end: '結束',
+  startDate: '開始日期',
+  startTime: '開始時間',
+  endDate: '結束日期',
+  endTime: '結束時間',
+  // Action bar
+  cancelButtonLabel: '取消',
+  clearButtonLabel: '清除',
+  okButtonLabel: '確認',
+  todayButtonLabel: '今天',
+  nextStepButtonLabel: '下個',
+  // Toolbar titles
+  datePickerToolbarTitle: '選擇日期',
+  dateTimePickerToolbarTitle: '選擇日期和時間',
+  timePickerToolbarTitle: '選擇時間',
+  dateRangePickerToolbarTitle: '選擇日期範圍',
+  timeRangePickerToolbarTitle: '選擇時間範圍',
+  // Clock labels
+  clockLabelText: (view, formattedTime) => `選擇 ${views[view]}. ${!formattedTime ? '未選擇時間' : `已選擇${formattedTime}`}`,
+  hoursClockNumberText: hours => `${hours}小時`,
+  minutesClockNumberText: minutes => `${minutes}分鐘`,
+  secondsClockNumberText: seconds => `${seconds}秒`,
+  // Digital clock labels
+  selectViewText: view => `選擇 ${views[view]}`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: '週數',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}週`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
+  // Open Picker labels
+  openDatePickerDialogue: formattedDate => formattedDate ? `選擇日期，已選擇${formattedDate}` : '選擇日期',
+  openTimePickerDialogue: formattedTime => formattedTime ? `選擇時間，已選擇${formattedTime}` : '選擇時間',
+  openRangePickerDialogue: formattedRange => formattedRange ? `選擇範圍，已選擇的範圍是 ${formattedRange}` : '選擇範圍',
+  fieldClearLabel: '清除',
+  // Table labels
+  timeTableLabel: '選擇時間',
+  dateTableLabel: '選擇日期',
+  // Field section placeholders
+  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'hh',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa',
+  // View names
+  year: '年份',
+  month: '月份',
+  day: '日期',
+  weekDay: '星期',
+  hours: '時',
+  minutes: '分',
+  seconds: '秒',
+  meridiem: '十二小時制',
+  // Common
+  empty: '空'
+};
+export const zhTW = getPickersLocalization(zhTWPickers);

package/managers/index.d.mts

@@ -0,0 +1,6 @@
+export { useDateManager } from "./useDateManager.mjs";
+export type { UseDateManagerReturnValue, UseDateManagerParameters, DateManagerFieldInternalProps } from "./useDateManager.mjs";
+export { useTimeManager } from "./useTimeManager.mjs";
+export type { UseTimeManagerReturnValue, UseTimeManagerParameters, TimeManagerFieldInternalProps } from "./useTimeManager.mjs";
+export { useDateTimeManager } from "./useDateTimeManager.mjs";
+export type { UseDateTimeManagerReturnValue, UseDateTimeManagerParameters, DateTimeManagerFieldInternalProps } from "./useDateTimeManager.mjs";

package/managers/index.mjs

@@ -0,0 +1,3 @@
+export { useDateManager } from "./useDateManager.mjs";
+export { useTimeManager } from "./useTimeManager.mjs";
+export { useDateTimeManager } from "./useDateTimeManager.mjs";

package/managers/useDateManager.d.mts

@@ -0,0 +1,14 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager, DateValidationError } from "../models/index.mjs";
+import { UseFieldInternalProps } from "../internals/hooks/useField/index.mjs";
+import { ExportedValidateDateProps, ValidateDateProps } from "../validation/validateDate.mjs";
+import { PickerValue } from "../internals/models/index.mjs";
+export declare function useDateManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+type SharedDateAndDateRangeValidationProps = 'disablePast' | 'disableFuture' | 'minDate' | 'maxDate';
+export declare function useApplyDefaultValuesToDateValidationProps(props: Pick<ExportedValidateDateProps, SharedDateAndDateRangeValidationProps>): Pick<ValidateDateProps, SharedDateAndDateRangeValidationProps>;
+export interface UseDateManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> {
+  enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseDateManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError, ValidateDateProps, DateManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
+export interface DateManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps {}
+export {};

package/managers/useDateManager.mjs

@@ -0,0 +1,48 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { applyDefaultDate } from "../internals/utils/date-utils.mjs";
+import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.mjs";
+import { validateDate } from "../validation/index.mjs";
+import { useDefaultDates } from "../internals/hooks/useUtils.mjs";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.mjs";
+export function useDateManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date',
+    validator: validateDate,
+    internal_valueManager: singleItemValueManager,
+    internal_fieldValueManager: singleItemFieldValueManager,
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateFieldInternalProps,
+    internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
+  }), [enableAccessibleFieldDOMStructure]);
+}
+function useOpenPickerButtonAriaLabel(value) {
+  const adapter = usePickerAdapter();
+  const translations = usePickerTranslations();
+  return React.useMemo(() => {
+    const formattedValue = adapter.isValid(value) ? adapter.format(value, 'fullDate') : null;
+    return translations.openDatePickerDialogue(formattedValue);
+  }, [value, translations, adapter]);
+}
+function useApplyDefaultValuesToDateFieldInternalProps(internalProps) {
+  const adapter = usePickerAdapter();
+  const validationProps = useApplyDefaultValuesToDateValidationProps(internalProps);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? adapter.formats.keyboardDate
+  }), [internalProps, validationProps, adapter]);
+}
+export function useApplyDefaultValuesToDateValidationProps(props) {
+  const adapter = usePickerAdapter();
+  const defaultDates = useDefaultDates();
+  return React.useMemo(() => ({
+    disablePast: props.disablePast ?? false,
+    disableFuture: props.disableFuture ?? false,
+    minDate: applyDefaultDate(adapter, props.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(adapter, props.maxDate, defaultDates.maxDate)
+  }), [props.minDate, props.maxDate, props.disableFuture, props.disablePast, adapter, defaultDates]);
+}

package/managers/useDateTimeManager.d.mts

@@ -0,0 +1,15 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager, DateTimeValidationError } from "../models/index.mjs";
+import { UseFieldInternalProps } from "../internals/hooks/useField/index.mjs";
+import { AmPmProps } from "../internals/models/props/time.mjs";
+import { ExportedValidateDateTimeProps, ValidateDateTimeProps } from "../validation/validateDateTime.mjs";
+import { PickerValue } from "../internals/models/index.mjs";
+export declare function useDateTimeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateTimeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+type SharedDateTimeAndDateTimeRangeValidationProps = 'disablePast' | 'disableFuture' | 'minTime' | 'maxTime' | 'minDate' | 'maxDate';
+export declare function useApplyDefaultValuesToDateTimeValidationProps(props: Pick<ExportedValidateDateTimeProps, SharedDateTimeAndDateTimeRangeValidationProps | 'minDateTime' | 'maxDateTime'>): Pick<ValidateDateTimeProps, SharedDateTimeAndDateTimeRangeValidationProps>;
+export interface UseDateTimeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> {
+  enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseDateTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError, ValidateDateTimeProps, DateTimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
+export interface DateTimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, AmPmProps {}
+export {};

package/managers/useDateTimeManager.mjs

@@ -0,0 +1,53 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { applyDefaultDate } from "../internals/utils/date-utils.mjs";
+import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.mjs";
+import { validateDateTime } from "../validation/index.mjs";
+import { useDefaultDates } from "../internals/hooks/useUtils.mjs";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.mjs";
+export function useDateTimeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date-time',
+    validator: validateDateTime,
+    internal_valueManager: singleItemValueManager,
+    internal_fieldValueManager: singleItemFieldValueManager,
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateTimeFieldInternalProps,
+    internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
+  }), [enableAccessibleFieldDOMStructure]);
+}
+function useOpenPickerButtonAriaLabel(value) {
+  const adapter = usePickerAdapter();
+  const translations = usePickerTranslations();
+  return React.useMemo(() => {
+    const formattedValue = adapter.isValid(value) ? adapter.format(value, 'fullDate') : null;
+    return translations.openDatePickerDialogue(formattedValue);
+  }, [value, translations, adapter]);
+}
+function useApplyDefaultValuesToDateTimeFieldInternalProps(internalProps) {
+  const adapter = usePickerAdapter();
+  const validationProps = useApplyDefaultValuesToDateTimeValidationProps(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? adapter.is12HourCycleInCurrentLocale(), [internalProps.ampm, adapter]);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? adapter.formats.keyboardDateTime12h : adapter.formats.keyboardDateTime24h)
+  }), [internalProps, validationProps, ampm, adapter]);
+}
+export function useApplyDefaultValuesToDateTimeValidationProps(props) {
+  const adapter = usePickerAdapter();
+  const defaultDates = useDefaultDates();
+  return React.useMemo(() => ({
+    disablePast: props.disablePast ?? false,
+    disableFuture: props.disableFuture ?? false,
+    // TODO: Explore if we can remove it from the public API
+    disableIgnoringDatePartForTimeValidation: !!props.minDateTime || !!props.maxDateTime || !!props.disableFuture || !!props.disablePast,
+    minDate: applyDefaultDate(adapter, props.minDateTime ?? props.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(adapter, props.maxDateTime ?? props.maxDate, defaultDates.maxDate),
+    minTime: props.minDateTime ?? props.minTime,
+    maxTime: props.maxDateTime ?? props.maxTime
+  }), [props.minDateTime, props.maxDateTime, props.minTime, props.maxTime, props.minDate, props.maxDate, props.disableFuture, props.disablePast, adapter, defaultDates]);
+}

package/managers/useTimeManager.d.mts

@@ -0,0 +1,15 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager, TimeValidationError } from "../models/index.mjs";
+import { UseFieldInternalProps } from "../internals/hooks/useField/index.mjs";
+import { AmPmProps } from "../internals/models/props/time.mjs";
+import { ExportedValidateTimeProps, ValidateTimeProps } from "../validation/validateTime.mjs";
+import { PickerValue } from "../internals/models/index.mjs";
+export declare function useTimeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseTimeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+type SharedTimeAndTimeRangeValidationProps = 'disablePast' | 'disableFuture';
+export declare function useApplyDefaultValuesToTimeValidationProps(props: Pick<ExportedValidateTimeProps, SharedTimeAndTimeRangeValidationProps>): Pick<ValidateTimeProps, SharedTimeAndTimeRangeValidationProps>;
+export interface UseTimeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends AmPmProps {
+  enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError, ValidateTimeProps, TimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
+export interface TimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, ExportedValidateTimeProps, AmPmProps {}
+export {};

package/managers/useTimeManager.mjs

@@ -0,0 +1,47 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.mjs";
+import { validateTime } from "../validation/index.mjs";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.mjs";
+export function useTimeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    ampm
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'time',
+    validator: validateTime,
+    internal_valueManager: singleItemValueManager,
+    internal_fieldValueManager: singleItemFieldValueManager,
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToTimeFieldInternalProps,
+    internal_useOpenPickerButtonAriaLabel: createUseOpenPickerButtonAriaLabel(ampm)
+  }), [ampm, enableAccessibleFieldDOMStructure]);
+}
+function createUseOpenPickerButtonAriaLabel(ampm) {
+  return function useOpenPickerButtonAriaLabel(value) {
+    const adapter = usePickerAdapter();
+    const translations = usePickerTranslations();
+    return React.useMemo(() => {
+      const formatKey = ampm ?? adapter.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
+      const formattedValue = adapter.isValid(value) ? adapter.format(value, formatKey) : null;
+      return translations.openTimePickerDialogue(formattedValue);
+    }, [value, translations, adapter]);
+  };
+}
+function useApplyDefaultValuesToTimeFieldInternalProps(internalProps) {
+  const adapter = usePickerAdapter();
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? adapter.is12HourCycleInCurrentLocale(), [internalProps.ampm, adapter]);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? adapter.formats.fullTime12h : adapter.formats.fullTime24h)
+  }), [internalProps, validationProps, ampm, adapter]);
+}
+export function useApplyDefaultValuesToTimeValidationProps(props) {
+  return React.useMemo(() => ({
+    disablePast: props.disablePast ?? false,
+    disableFuture: props.disableFuture ?? false
+  }), [props.disablePast, props.disableFuture]);
+}