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

package/esm/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.ts

@@ -0,0 +1,72 @@
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { FieldType, MultiInputFieldRefs, RangeFieldSeparatorProps, RangePosition } from "../../../models/index.js";
+import { PickerAnyRangeManager } from "../../models/managers.js";
+export type MultiInputRangeFieldProps<TManager extends PickerAnyRangeManager> = MultiInputFieldRefs & RangeFieldSeparatorProps & Omit<PickerManagerFieldInternalProps<TManager>, 'unstableFieldRef' | 'clearable' | 'onClear' | 'focused'> & Omit<StackProps, 'position' | keyof PickerManagerFieldInternalProps<TManager>> & {
+  /**
+   * If `true`, the field is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MultiInputRangeFieldClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MultiInputRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MultiInputRangeFieldSlotProps;
+};
+export interface MultiInputRangeFieldSlots {
+  /**
+   * Element rendered at the root.
+   * @default MultiInputRangeFieldRoot
+   */
+  root?: React.ElementType;
+  /**
+   * Form control with an input to render a date.
+   * It is rendered twice: once for the start date and once for the end date.
+   * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
+   */
+  textField?: React.ElementType;
+  /**
+   * Element rendered between the two inputs.
+   * @default MultiInputRangeFieldSeparator
+   */
+  separator?: React.ElementType;
+}
+export interface MultiInputRangeFieldSlotProps {
+  root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
+    position: RangePosition;
+  }>;
+  separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
+}
+export interface MultiInputRangeFieldClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+}
+export interface CreateMultiInputRangeFieldParameters<TManager extends PickerAnyRangeManager> {
+  name: string;
+  getUtilityClass: (slot: string) => string;
+  useManager: (params: RangeFieldSeparatorProps & {
+    enableAccessibleFieldDOMStructure: PickerManagerEnableAccessibleFieldDOMStructure<TManager>;
+  }) => TManager;
+}
+export type CreateMultiInputRangeFieldReturnValue<TManager extends PickerAnyRangeManager> = ((props: MultiInputRangeFieldProps<TManager> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  fieldType?: FieldType;
+};

package/esm/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/utils/createMultiInputRangeField/index.d.ts

@@ -0,0 +1,3 @@
+export { createMultiInputRangeField } from "./createMultiInputRangeField.js";
+export type { MultiInputRangeFieldProps, MultiInputRangeFieldSlots, MultiInputRangeFieldSlotProps, MultiInputRangeFieldClasses } from './createMultiInputRangeField.types';
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/useMultiInputRangeField.js";

package/esm/internals/utils/createMultiInputRangeField/index.js

@@ -0,0 +1,2 @@
+export { createMultiInputRangeField } from "./createMultiInputRangeField.js";
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/useMultiInputRangeField.js";

package/esm/internals/utils/createMultiInputRangeField/useTextFieldProps.d.ts

@@ -0,0 +1,12 @@
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { MultiInputRangeFieldSlotProps } from "./createMultiInputRangeField.types.js";
+export declare function useTextFieldProps({
+  slotProps,
+  ownerState,
+  position
+}: {
+  slotProps: MultiInputRangeFieldSlotProps | undefined;
+  ownerState: FieldOwnerState;
+  position: 'start' | 'end';
+}): PickersTextFieldProps;

package/esm/internals/utils/createMultiInputRangeField/useTextFieldProps.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { PickerFieldUIContext, useNullablePickerContext, mergeSlotProps } from '@mui/x-date-pickers/internals';
+import { useNullablePickerRangePositionContext } from "../../hooks/useNullablePickerRangePositionContext.js";
+export function useTextFieldProps({
+  slotProps,
+  ownerState,
+  position
+}) {
+  const pickerContext = useNullablePickerContext();
+  const translations = usePickerTranslations();
+  const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
+  const rangePositionContext = useNullablePickerRangePositionContext();
+  const textFieldProps = useSlotProps({
+    elementType: PickersTextField,
+    externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.textField, slotProps?.textField),
+    additionalProps: {
+      // TODO: Decide if we also want to set the default labels on standalone fields.
+      label: pickerContext ? translations[position] : undefined,
+      focused: pickerContext?.open ? rangePositionContext?.rangePosition === position : undefined
+    },
+    ownerState: _extends({}, ownerState, {
+      position
+    })
+  });
+  if (!textFieldProps.InputProps) {
+    textFieldProps.InputProps = {};
+  }
+  if (pickerContext && position === 'start') {
+    textFieldProps.InputProps.ref = pickerContext.triggerRef;
+  }
+  return textFieldProps;
+}

package/esm/internals/utils/date-fields-utils.d.ts

@@ -0,0 +1,23 @@
+import { FieldRangeSection } from '@mui/x-date-pickers/internals';
+export declare const splitDateRangeSections: (sections: FieldRangeSection[]) => {
+  startDate: FieldRangeSection[];
+  endDate: FieldRangeSection[];
+};
+export declare const removeLastSeparator: (dateSections: FieldRangeSection[]) => (FieldRangeSection | {
+  separator: null;
+  dateName: import("@mui/x-date-pickers/internals").RangePosition;
+  value: string;
+  format: string;
+  maxLength: number | null;
+  placeholder: string;
+  type: import("@mui/x-date-pickers").FieldSectionType;
+  contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+  hasLeadingZerosInFormat: boolean;
+  hasLeadingZerosInInput: boolean;
+  modified: boolean;
+  startSeparator: string;
+  endSeparator: string;
+})[];
+export declare function getRangeFieldType(field: React.ElementType & {
+  fieldType?: 'single-input' | 'multi-input';
+}): "single-input" | "multi-input";

package/esm/internals/utils/date-fields-utils.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export const splitDateRangeSections = sections => {
+  const startDateSections = [];
+  const endDateSections = [];
+  sections.forEach(section => {
+    if (section.dateName === 'start') {
+      startDateSections.push(section);
+    } else {
+      endDateSections.push(section);
+    }
+  });
+  return {
+    startDate: startDateSections,
+    endDate: endDateSections
+  };
+};
+export const removeLastSeparator = dateSections => dateSections.map((section, sectionIndex) => {
+  if (sectionIndex === dateSections.length - 1) {
+    return _extends({}, section, {
+      separator: null
+    });
+  }
+  return section;
+});
+export function getRangeFieldType(field) {
+  const fieldType = field.fieldType ?? 'multi-input';
+  return fieldType;
+}

package/esm/internals/utils/date-range-manager.d.ts

@@ -0,0 +1,32 @@
+import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models';
+import { PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { RangePosition } from "../../models/index.js";
+interface CalculateRangeChangeOptions {
+  utils: MuiPickersAdapter;
+  range: PickerRangeValue;
+  newDate: PickerValidDate | null;
+  rangePosition: RangePosition;
+  /**
+   * Should allow flipping range `start` and `end` dates if the `newDate` would result in a new range creation.
+   *
+   * It is used to allow dragging range `start` date past `end` date essentially becoming the new `end` date and vice versa.
+   */
+  allowRangeFlip?: boolean;
+  shouldMergeDateAndTime?: boolean;
+  referenceDate?: PickerValidDate;
+}
+interface CalculateRangeChangeResponse {
+  nextSelection: RangePosition;
+  newRange: PickerRangeValue;
+}
+export declare function calculateRangeChange({
+  utils,
+  range,
+  newDate: selectedDate,
+  rangePosition,
+  allowRangeFlip,
+  shouldMergeDateAndTime,
+  referenceDate
+}: CalculateRangeChangeOptions): CalculateRangeChangeResponse;
+export declare function calculateRangePreview(options: CalculateRangeChangeOptions): PickerRangeValue;
+export {};

package/{node → esm}/internals/utils/date-range-manager.js

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.calculateRangeChange = calculateRangeChange;
-exports.calculateRangePreview = calculateRangePreview;
-var _internals = require("@mui/x-date-pickers/internals");
-function calculateRangeChange({
+import { mergeDateAndTime } from '@mui/x-date-pickers/internals';
+export function calculateRangeChange({
   utils,
   range,
   newDate: selectedDate,
@@ -20,13 +13,13 @@ function calculateRangeChange({
   if (shouldMergeDateAndTime && selectedDate) {
     // If there is a date already selected, then we want to keep its time
     if (start && rangePosition === 'start') {
-      selectedDate = (0, _internals.mergeDateAndTime)(utils, selectedDate, start);
+      selectedDate = mergeDateAndTime(utils, selectedDate, start);
     }
     if (end && rangePosition === 'end') {
-      selectedDate = (0, _internals.mergeDateAndTime)(utils, selectedDate, end);
+      selectedDate = mergeDateAndTime(utils, selectedDate, end);
     }
   }
-  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? (0, _internals.mergeDateAndTime)(utils, selectedDate, referenceDate) : selectedDate;
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? mergeDateAndTime(utils, selectedDate, referenceDate) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',
@@ -52,7 +45,7 @@ function calculateRangeChange({
     newRange: [start, newSelectedDate]
   };
 }
-function calculateRangePreview(options) {
+export function calculateRangePreview(options) {
   if (options.newDate == null) {
     return [null, null];
   }

package/esm/internals/utils/date-utils.d.ts

@@ -0,0 +1,6 @@
+import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models';
+import { PickerRangeValue } from '@mui/x-date-pickers/internals';
+export declare const isRangeValid: (utils: MuiPickersAdapter, range: PickerRangeValue | null) => range is [PickerValidDate, PickerValidDate];
+export declare const isWithinRange: (utils: MuiPickersAdapter, day: PickerValidDate, range: PickerRangeValue | null) => boolean;
+export declare const isStartOfRange: (utils: MuiPickersAdapter, day: PickerValidDate, range: PickerRangeValue | null) => boolean;
+export declare const isEndOfRange: (utils: MuiPickersAdapter, day: PickerValidDate, range: PickerRangeValue | null) => boolean;

package/esm/internals/utils/date-utils.js

@@ -0,0 +1,12 @@
+export const isRangeValid = (utils, range) => {
+  return Boolean(range && range[0] && range[1] && !utils.isBefore(range[1], range[0]));
+};
+export const isWithinRange = (utils, day, range) => {
+  return isRangeValid(utils, range) && utils.isWithinRange(day, range);
+};
+export const isStartOfRange = (utils, day, range) => {
+  return isRangeValid(utils, range) && utils.isSameDay(day, range[0]);
+};
+export const isEndOfRange = (utils, day, range) => {
+  return isRangeValid(utils, range) && utils.isSameDay(day, range[1]);
+};

package/esm/internals/utils/releaseInfo.d.ts

@@ -0,0 +1 @@
+export declare const getReleaseInfo: () => any;

package/esm/internals/utils/releaseInfo.js

@@ -0,0 +1,13 @@
+import { ponyfillGlobal } from '@mui/utils';
+export const getReleaseInfo = () => {
+  const releaseInfo = "MTc0MDY5NzIwMDAwMA==";
+  if (process.env.NODE_ENV !== 'production') {
+    // A simple hack to set the value in the test environment (has no build step).
+    // eslint-disable-next-line no-useless-concat
+    if (releaseInfo === '__RELEASE' + '_INFO__') {
+      // eslint-disable-next-line no-underscore-dangle
+      return ponyfillGlobal.__MUI_RELEASE_INFO__;
+    }
+  }
+  return releaseInfo;
+};

package/esm/internals/utils/valueManagers.d.ts

@@ -0,0 +1,10 @@
+import { PickerValueManager, FieldValueManager, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError } from '../../models';
+type RangePickerValueManager<TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<PickerRangeValue, TError>;
+export declare const rangeValueManager: RangePickerValueManager;
+export declare const getRangeFieldValueManager: ({
+  dateSeparator
+}: {
+  dateSeparator: string | undefined;
+}) => FieldValueManager<PickerRangeValue>;
+export {};

package/{node → esm}/internals/utils/valueManagers.js

@@ -1,34 +1,27 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.rangeValueManager = exports.getRangeFieldValueManager = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _internals = require("@mui/x-date-pickers/internals");
-var _dateFieldsUtils = require("./date-fields-utils");
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "referenceDate"];
-const rangeValueManager = exports.rangeValueManager = {
+import { replaceInvalidDateByNull, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, areDatesEqual, getTodayDate, getDefaultReferenceDate } from '@mui/x-date-pickers/internals';
+import { splitDateRangeSections, removeLastSeparator } from "./date-fields-utils.js";
+export const rangeValueManager = {
   emptyValue: [null, null],
-  getTodayValue: (utils, timezone, valueType) => [(0, _internals.getTodayDate)(utils, timezone, valueType), (0, _internals.getTodayDate)(utils, timezone, valueType)],
+  getTodayValue: (utils, timezone, valueType) => [getTodayDate(utils, timezone, valueType), getTodayDate(utils, timezone, valueType)],
   getInitialReferenceValue: _ref => {
     let {
         value,
         referenceDate: referenceDateProp
       } = _ref,
-      params = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+      params = _objectWithoutPropertiesLoose(_ref, _excluded);
     const shouldKeepStartDate = params.utils.isValid(value[0]);
     const shouldKeepEndDate = params.utils.isValid(value[1]);
     if (shouldKeepStartDate && shouldKeepEndDate) {
       return value;
     }
-    const referenceDate = referenceDateProp ?? (0, _internals.getDefaultReferenceDate)(params);
+    const referenceDate = referenceDateProp ?? getDefaultReferenceDate(params);
     return [shouldKeepStartDate ? value[0] : referenceDate, shouldKeepEndDate ? value[1] : referenceDate];
   },
-  cleanValue: (utils, value) => value.map(date => (0, _internals.replaceInvalidDateByNull)(utils, date)),
-  areValuesEqual: (utils, a, b) => (0, _internals.areDatesEqual)(utils, a[0], b[0]) && (0, _internals.areDatesEqual)(utils, a[1], b[1]),
+  cleanValue: (utils, value) => value.map(date => replaceInvalidDateByNull(utils, date)),
+  areValuesEqual: (utils, a, b) => areDatesEqual(utils, a[0], b[0]) && areDatesEqual(utils, a[1], b[1]),
   isSameError: (a, b) => b !== null && a[1] === b[1] && a[0] === b[0],
   hasError: error => error[0] != null || error[1] != null,
   defaultErrorState: [null, null],
@@ -42,7 +35,7 @@ const rangeValueManager = exports.rangeValueManager = {
   },
   setTimezone: (utils, timezone, value) => [value[0] == null ? null : utils.setTimezone(value[0], timezone), value[1] == null ? null : utils.setTimezone(value[1], timezone)]
 };
-const getRangeFieldValueManager = ({
+export const getRangeFieldValueManager = ({
   dateSeparator = '–'
 }) => ({
   updateReferenceValue: (utils, value, prevReferenceValue) => {
@@ -63,7 +56,7 @@ const getRangeFieldValueManager = ({
     const separatedFallbackSections = fallbackSections == null ? {
       startDate: null,
       endDate: null
-    } : (0, _dateFieldsUtils.splitDateRangeSections)(fallbackSections);
+    } : splitDateRangeSections(fallbackSections);
     const getSections = (newDate, fallbackDateSections, position) => {
       const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!fallbackDateSections;
       if (shouldReUsePrevDateSections) {
@@ -72,13 +65,13 @@ const getRangeFieldValueManager = ({
       const sections = getSectionsFromDate(newDate);
       return sections.map((section, sectionIndex) => {
         if (sectionIndex === sections.length - 1 && position === 'start') {
-          return (0, _extends2.default)({}, section, {
+          return _extends({}, section, {
             dateName: position,
             // TODO: Check if RTL still works
             endSeparator: `${section.endSeparator} ${dateSeparator} `
           });
         }
-        return (0, _extends2.default)({}, section, {
+        return _extends({}, section, {
           dateName: position
         });
       });
@@ -86,12 +79,12 @@ const getRangeFieldValueManager = ({
     return [...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')];
   },
   getV7HiddenInputValueFromSections: sections => {
-    const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
-    return (0, _internals.createDateStrForV7HiddenInputFromSections)([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
+    const dateRangeSections = splitDateRangeSections(sections);
+    return createDateStrForV7HiddenInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
   },
   getV6InputValueFromSections: (sections, localizedDigits, isRtl) => {
-    const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
-    return (0, _internals.createDateStrForV6InputFromSections)([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRtl);
+    const dateRangeSections = splitDateRangeSections(sections);
+    return createDateStrForV6InputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRtl);
   },
   parseValueStr: (valueStr, referenceValue, parseDate) => {
     // TODO: Improve because it would not work if some section have the same separator as the dateSeparator.
@@ -110,9 +103,9 @@ const getRangeFieldValueManager = ({
       date: state.value[index],
       referenceDate: state.referenceValue[index],
       getSections: sections => {
-        const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
+        const dateRangeSections = splitDateRangeSections(sections);
         if (index === 0) {
-          return (0, _dateFieldsUtils.removeLastSeparator)(dateRangeSections.startDate);
+          return removeLastSeparator(dateRangeSections.startDate);
         }
         return dateRangeSections.endDate;
       },
@@ -122,5 +115,4 @@ const getRangeFieldValueManager = ({
       })
     };
   }
-});
-exports.getRangeFieldValueManager = getRangeFieldValueManager;
+});

package/esm/locales/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-date-pickers/locales';

package/esm/locales/index.js

@@ -0,0 +1 @@
+export * from '@mui/x-date-pickers/locales';

package/esm/managers/index.d.ts

@@ -0,0 +1,6 @@
+export { useDateRangeManager } from "./useDateRangeManager.js";
+export type { UseDateRangeManagerReturnValue, UseDateRangeManagerParameters, DateRangeManagerFieldInternalProps } from './useDateRangeManager';
+export { useTimeRangeManager } from "./useTimeRangeManager.js";
+export type { UseTimeRangeManagerReturnValue, UseTimeRangeManagerParameters, TimeRangeManagerFieldInternalProps } from './useTimeRangeManager';
+export { useDateTimeRangeManager } from "./useDateTimeRangeManager.js";
+export type { UseDateTimeRangeManagerReturnValue, UseDateTimeRangeManagerParameters, DateTimeRangeManagerFieldInternalProps } from './useDateTimeRangeManager';

package/esm/managers/index.js

@@ -0,0 +1,3 @@
+export { useDateRangeManager } from "./useDateRangeManager.js";
+export { useTimeRangeManager } from "./useTimeRangeManager.js";
+export { useDateTimeRangeManager } from "./useDateTimeRangeManager.js";

package/esm/managers/useDateRangeManager.d.ts

@@ -0,0 +1,13 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager } from '@mui/x-date-pickers/models';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { DateRangeValidationError, RangeFieldSeparatorProps } from "../models/index.js";
+import { ExportedValidateDateRangeProps, ValidateDateRangeProps } from "../validation/validateDateRange.js";
+export declare function useDateRangeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateRangeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+export interface UseDateRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
+  enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError, DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
+export interface DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {}
+interface DateRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, ValidateDateRangeProps, RangeFieldSeparatorProps {}
+export {};

package/esm/managers/useDateRangeManager.js

@@ -0,0 +1,40 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateRange } from "../validation/index.js";
+export function useDateRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date',
+    validator: validateDateRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
+      defaultDates,
+      utils,
+      internalProps
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/esm/managers/useDateTimeRangeManager.d.ts

@@ -0,0 +1,13 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager } from '@mui/x-date-pickers/models';
+import { AmPmProps, PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { DateTimeRangeValidationError, RangeFieldSeparatorProps } from "../models/index.js";
+import { ExportedValidateDateTimeRangeProps, ValidateDateTimeRangeProps } from "../validation/validateDateTimeRange.js";
+export declare function useDateTimeRangeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+export interface UseDateTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
+  enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseDateTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError, DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateTimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
+export interface DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'format'>, ExportedValidateDateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {}
+interface DateTimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, ValidateDateTimeRangeProps, RangeFieldSeparatorProps {}
+export {};

package/esm/managers/useDateTimeRangeManager.js

@@ -0,0 +1,40 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateTimeRange } from "../validation/index.js";
+export function useDateTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date-time',
+    validator: validateDateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
+      internalProps,
+      utils,
+      defaultDates
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/esm/managers/useTimeRangeManager.d.ts

@@ -0,0 +1,13 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager } from '@mui/x-date-pickers/models';
+import { AmPmProps, PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { TimeRangeValidationError, RangeFieldSeparatorProps } from "../models/index.js";
+import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps } from "../validation/validateTimeRange.js";
+export declare function useTimeRangeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+export interface UseTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
+  enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError, TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, TimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
+export interface TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'format'>, ExportedValidateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {}
+interface TimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, ValidateTimeRangeProps {}
+export {};

package/esm/managers/useTimeRangeManager.js

@@ -0,0 +1,40 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateTimeRange } from "../validation/index.js";
+export function useTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'time',
+    validator: validateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils
+    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
+      utils,
+      internalProps
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      // TODO: Use ampm prop?
+      const ampm = utils.is12HourCycleInCurrentLocale();
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], ampm ? 'fullTime12h' : 'fullTime24h') : null;
+      return localeText.openTimePickerDialogue(formattedValue);
+    }
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}