@mui/x-date-pickers-pro 8.0.0-alpha.8 → 8.0.0-beta.0

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

@@ -0,0 +1,73 @@
+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;
+  allowTriggerShifting?: boolean;
+}
+export type CreateMultiInputRangeFieldReturnValue<TManager extends PickerAnyRangeManager> = ((props: MultiInputRangeFieldProps<TManager> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  fieldType?: FieldType;
+};

package/modern/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/modern/internals/utils/createMultiInputRangeField/useTextFieldProps.d.ts

@@ -0,0 +1,14 @@
+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,
+  allowTriggerShifting
+}: {
+  slotProps: MultiInputRangeFieldSlotProps | undefined;
+  ownerState: FieldOwnerState;
+  position: 'start' | 'end';
+  allowTriggerShifting?: boolean;
+}): PickersTextFieldProps;

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

@@ -0,0 +1,43 @@
+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,
+  allowTriggerShifting
+}) {
+  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) {
+    if (!allowTriggerShifting) {
+      if (position === 'start') {
+        textFieldProps.InputProps.ref = pickerContext.triggerRef;
+      }
+    } else if (rangePositionContext?.rangePosition === position) {
+      textFieldProps.InputProps.ref = pickerContext.triggerRef;
+    }
+  }
+  return textFieldProps;
+}

package/modern/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/modern/internals/utils/date-fields-utils.js

@@ -21,4 +21,8 @@ export const removeLastSeparator = dateSections => dateSections.map((section, se
     });
   }
   return section;
-});
+});
+export function getRangeFieldType(field) {
+  const fieldType = field.fieldType ?? 'multi-input';
+  return fieldType;
+}

package/modern/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/modern/internals/utils/date-utils.d.ts

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

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

@@ -1,5 +1,5 @@
 export const isRangeValid = (utils, range) => {
-  return Boolean(range && range[0] && range[1] && !utils.isBefore(range[1], range[0]));
+  return utils.isValid(range[0]) && utils.isValid(range[1]) && !utils.isBefore(range[1], range[0]);
 };
 export const isWithinRange = (utils, day, range) => {
   return isRangeValid(utils, range) && utils.isWithinRange(day, range);
@@ -9,4 +9,10 @@ export const isStartOfRange = (utils, day, range) => {
 };
 export const isEndOfRange = (utils, day, range) => {
   return isRangeValid(utils, range) && utils.isSameDay(day, range[1]);
+};
+export const formatRange = (utils, range, formatKey) => {
+  if (!isRangeValid(utils, range)) {
+    return null;
+  }
+  return `${utils.format(range[0], formatKey)} - ${utils.format(range[1], formatKey)}`;
 };

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

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

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNjk4MjAwMDAwMA==";
+  const releaseInfo = "MTc0MjI0ODgwMDAwMA==";
   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

package/modern/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/modern/internals/utils/valueManagers.js

@@ -52,16 +52,8 @@ export const getRangeFieldValueManager = ({
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: (utils, [start, end], fallbackSections, getSectionsFromDate) => {
-    const separatedFallbackSections = fallbackSections == null ? {
-      startDate: null,
-      endDate: null
-    } : splitDateRangeSections(fallbackSections);
-    const getSections = (newDate, fallbackDateSections, position) => {
-      const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!fallbackDateSections;
-      if (shouldReUsePrevDateSections) {
-        return fallbackDateSections;
-      }
+  getSectionsFromValue: ([start, end], getSectionsFromDate) => {
+    const getSections = (newDate, position) => {
       const sections = getSectionsFromDate(newDate);
       return sections.map((section, sectionIndex) => {
         if (sectionIndex === sections.length - 1 && position === 'start') {
@@ -76,7 +68,7 @@ export const getRangeFieldValueManager = ({
         });
       });
     };
-    return [...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')];
+    return [...getSections(start, 'start'), ...getSections(end, 'end')];
   },
   getV7HiddenInputValueFromSections: sections => {
     const dateRangeSections = splitDateRangeSections(sections);
@@ -96,23 +88,32 @@ export const getRangeFieldValueManager = ({
       return parseDate(dateStr.trim(), referenceValue[index]);
     });
   },
-  getActiveDateManager: (utils, state, activeSection) => {
-    const index = activeSection.dateName === 'start' ? 0 : 1;
-    const updateDateInRange = (newDate, prevDateRange) => index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate];
-    return {
-      date: state.value[index],
-      referenceDate: state.referenceValue[index],
-      getSections: sections => {
-        const dateRangeSections = splitDateRangeSections(sections);
-        if (index === 0) {
-          return removeLastSeparator(dateRangeSections.startDate);
-        }
-        return dateRangeSections.endDate;
-      },
-      getNewValuesFromNewActiveDate: newActiveDate => ({
-        value: updateDateInRange(newActiveDate, state.value),
-        referenceValue: !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
-      })
-    };
+  getDateFromSection: (value, activeSection) => value[getActiveDateIndex(activeSection)],
+  getDateSectionsFromValue: (sections, activeSection) => {
+    const dateRangeSections = splitDateRangeSections(sections);
+    if (getActiveDateIndex(activeSection) === 0) {
+      return removeLastSeparator(dateRangeSections.startDate);
+    }
+    return dateRangeSections.endDate;
+  },
+  updateDateInValue: (value, activeSection, activeDate) => {
+    if (getActiveDateIndex(activeSection) === 0) {
+      return [activeDate, value[1]];
+    }
+    return [value[0], activeDate];
+  },
+  clearDateSections: (sections, activeSection) => {
+    const dateRangeSections = splitDateRangeSections(sections);
+    if (getActiveDateIndex(activeSection) === 0) {
+      return [...dateRangeSections.startDate.map(section => _extends({}, section, {
+        value: ''
+      })), ...dateRangeSections.endDate];
+    }
+    return [...dateRangeSections.startDate, ...dateRangeSections.endDate.map(section => _extends({}, section, {
+      value: ''
+    }))];
   }
-});
+});
+function getActiveDateIndex(activeSection) {
+  return activeSection == null || activeSection.dateName === 'start' ? 0 : 1;
+}

package/modern/locales/index.d.ts

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

package/modern/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/modern/managers/useDateRangeManager.d.ts

@@ -0,0 +1,11 @@
+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, ValidateDateRangeProps, DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
+export interface DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {}

package/modern/managers/useDateRangeManager.js

@@ -2,9 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { getDateFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { getDateFieldInternalPropsDefaults, useUtils } from '@mui/x-date-pickers/internals';
 import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
 import { validateDateRange } from "../validation/index.js";
+import { formatRange } from "../internals/utils/date-utils.js";
 export function useDateRangeManager(parameters = {}) {
   const {
     enableAccessibleFieldDOMStructure = true,
@@ -27,7 +29,13 @@ export function useDateRangeManager(parameters = {}) {
       utils,
       internalProps
     })),
-    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}
+function useOpenPickerButtonAriaLabel() {
+  const utils = useUtils();
+  const translations = usePickerTranslations();
+  return React.useCallback(value => {
+    return translations.openRangePickerDialogue(formatRange(utils, value, 'fullDate'));
+  }, [translations, utils]);
 }

package/modern/managers/useDateTimeRangeManager.d.ts

@@ -0,0 +1,11 @@
+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, ValidateDateTimeRangeProps, DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
+export interface DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'format'>, ExportedValidateDateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {}

package/modern/managers/useDateTimeRangeManager.js

@@ -2,9 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { getDateTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { getDateTimeFieldInternalPropsDefaults, useUtils } from '@mui/x-date-pickers/internals';
 import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
 import { validateDateTimeRange } from "../validation/index.js";
+import { formatRange } from "../internals/utils/date-utils.js";
 export function useDateTimeRangeManager(parameters = {}) {
   const {
     enableAccessibleFieldDOMStructure = true,
@@ -27,7 +29,13 @@ export function useDateTimeRangeManager(parameters = {}) {
       utils,
       defaultDates
     })),
-    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}
+function useOpenPickerButtonAriaLabel() {
+  const utils = useUtils();
+  const translations = usePickerTranslations();
+  return React.useCallback(value => {
+    return translations.openRangePickerDialogue(formatRange(utils, value, 'fullDate'));
+  }, [translations, utils]);
 }

package/modern/managers/useTimeRangeManager.d.ts

@@ -0,0 +1,11 @@
+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, AmPmProps {
+  enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError, ValidateTimeRangeProps, TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
+export interface TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'format'>, ExportedValidateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {}

package/modern/managers/useTimeRangeManager.js

@@ -2,13 +2,16 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { getTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { getTimeFieldInternalPropsDefaults, useUtils } from '@mui/x-date-pickers/internals';
 import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
 import { validateTimeRange } from "../validation/index.js";
+import { formatRange } from "../internals/utils/date-utils.js";
 export function useTimeRangeManager(parameters = {}) {
   const {
     enableAccessibleFieldDOMStructure = true,
-    dateSeparator
+    dateSeparator,
+    ampm
   } = parameters;
   return React.useMemo(() => ({
     valueType: 'time',
@@ -25,7 +28,16 @@ export function useTimeRangeManager(parameters = {}) {
       utils,
       internalProps
     })),
-    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
-  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+    internal_useOpenPickerButtonAriaLabel: createUseOpenPickerButtonAriaLabel(ampm)
+  }), [enableAccessibleFieldDOMStructure, dateSeparator, ampm]);
+}
+function createUseOpenPickerButtonAriaLabel(ampm) {
+  return function useOpenPickerButtonAriaLabel() {
+    const utils = useUtils();
+    const translations = usePickerTranslations();
+    return React.useCallback(value => {
+      const formatKey = ampm ?? utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
+      return translations.openRangePickerDialogue(formatRange(utils, value, formatKey));
+    }, [translations, utils]);
+  };
 }

package/modern/models/fields.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { PickerValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { FieldRef, PickerFieldSlotProps } from '@mui/x-date-pickers/models';
+import type { UseMultiInputRangeFieldTextFieldProps } from '../hooks/useMultiInputRangeField';
+export type { FieldRangeSection } from '@mui/x-date-pickers/internals';
+export type FieldType = 'single-input' | 'multi-input';
+/**
+ * Props the `textField` slot of the multi input field can receive when used inside a picker.
+ */
+export type MultiInputFieldSlotTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseMultiInputRangeFieldTextFieldProps<TEnableAccessibleFieldDOMStructure, {
+  label?: React.ReactNode;
+  focused?: boolean;
+}>;
+/**
+ * Props the `root` slot of the multi input field can receive when used inside a picker.
+ */
+export interface MultiInputFieldSlotRootProps {
+  onBlur?: React.FocusEventHandler;
+}
+export interface MultiInputFieldRefs {
+  unstableStartFieldRef?: React.Ref<FieldRef<PickerValue>>;
+  unstableEndFieldRef?: React.Ref<FieldRef<PickerValue>>;
+}
+export interface RangeFieldSeparatorProps {
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator?: string;
+}
+/**
+ * Props the `slotProps.field` of a range picker component can receive.
+ */
+export type PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;

package/modern/models/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./fields.js";
+export * from "./range.js";
+export * from "./validation.js";
+export type { RangePosition } from '@mui/x-date-pickers/internals';

package/modern/models/range.d.ts

@@ -0,0 +1,2 @@
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+export type DateRange<TDate extends PickerValidDate> = [TDate | null, TDate | null];

package/modern/models/validation.d.ts

@@ -0,0 +1,6 @@
+import { DateTimeValidationError, DateValidationError, TimeValidationError } from '@mui/x-date-pickers/models';
+type RangeValidation<ItemError extends string | null> = [ItemError | 'invalidRange', ItemError | 'invalidRange'];
+export type DateRangeValidationError = RangeValidation<DateValidationError>;
+export type TimeRangeValidationError = RangeValidation<TimeValidationError>;
+export type DateTimeRangeValidationError = RangeValidation<DateTimeValidationError>;
+export {};

package/modern/package.json

@@ -0,0 +1 @@
+{"type":"module","sideEffects":false}

package/modern/themeAugmentation/components.d.ts

@@ -0,0 +1,79 @@
+import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
+export interface PickersProComponents<Theme = unknown> {
+  MuiDateRangeCalendar?: {
+    defaultProps?: ComponentsProps['MuiDateRangeCalendar'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiDateRangeCalendar'];
+  };
+  MuiDateRangePickerDay?: {
+    defaultProps?: ComponentsProps['MuiDateRangePickerDay'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiDateRangePickerDay'];
+  };
+  MuiDateTimeRangePickerTabs?: {
+    defaultProps?: ComponentsProps['MuiDateTimeRangePickerTabs'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiDateTimeRangePickerTabs'];
+  };
+  MuiDateRangePickerToolbar?: {
+    defaultProps?: ComponentsProps['MuiDateRangePickerToolbar'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiDateRangePickerToolbar'];
+  };
+  MuiDateTimeRangePickerToolbar?: {
+    defaultProps?: ComponentsProps['MuiDateTimeRangePickerToolbar'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiDateTimeRangePickerToolbar'];
+  };
+  MuiPickersRangeCalendarHeader?: {
+    defaultProps?: ComponentsProps['MuiPickersRangeCalendarHeader'];
+  };
+
+  // Multi input range fields
+  MuiMultiInputDateRangeField?: {
+    defaultProps?: ComponentsProps['MuiMultiInputDateRangeField'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiInputDateRangeField'];
+  };
+  MuiMultiInputDateTimeRangeField?: {
+    defaultProps?: ComponentsProps['MuiMultiInputDateTimeRangeField'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiInputDateTimeRangeField'];
+  };
+  MuiMultiInputTimeRangeField?: {
+    defaultProps?: ComponentsProps['MuiMultiInputTimeRangeField'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiInputTimeRangeField'];
+  };
+
+  // Single input range fields
+  MuiSingleInputDateRangeField?: {
+    defaultProps?: ComponentsProps['MuiSingleInputDateRangeField'];
+  };
+  MuiSingleInputDateTimeRangeField?: {
+    defaultProps?: ComponentsProps['MuiSingleInputDateTimeRangeField'];
+  };
+  MuiSingleInputTimeRangeField?: {
+    defaultProps?: ComponentsProps['MuiSingleInputTimeRangeField'];
+  };
+
+  // Date Range Pickers
+  MuiDateRangePicker?: {
+    defaultProps?: ComponentsProps['MuiDateRangePicker'];
+  };
+  MuiDesktopDateRangePicker?: {
+    defaultProps?: ComponentsProps['MuiDesktopDateRangePicker'];
+  };
+  MuiMobileDateRangePicker?: {
+    defaultProps?: ComponentsProps['MuiMobileDateRangePicker'];
+  };
+  MuiStaticDateRangePicker?: {
+    defaultProps?: ComponentsProps['MuiStaticDateRangePicker'];
+  };
+
+  // Date Time Range Pickers
+  MuiDateTimeRangePicker?: {
+    defaultProps?: ComponentsProps['MuiDateTimeRangePicker'];
+  };
+  MuiDesktopDateTimeRangePicker?: {
+    defaultProps?: ComponentsProps['MuiDesktopDateTimeRangePicker'];
+  };
+  MuiMobileDateTimeRangePicker?: {
+    defaultProps?: ComponentsProps['MuiMobileDateTimeRangePicker'];
+  };
+}
+declare module '@mui/material/styles' {
+  interface Components<Theme = unknown> extends PickersProComponents<Theme> {}
+}

package/modern/themeAugmentation/index.d.ts

@@ -0,0 +1,4 @@
+export * from '@mui/x-date-pickers/themeAugmentation';
+export type * from './overrides';
+export type * from './props';
+export type * from './components';