@mui/x-date-pickers-pro 8.0.0-alpha.9 → 8.0.0-beta.1

package/internals/utils/valueManagers.js

@@ -1,27 +1,34 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+"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");
 const _excluded = ["value", "referenceDate"];
-import { replaceInvalidDateByNull, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, areDatesEqual, getTodayDate, getDefaultReferenceDate } from '@mui/x-date-pickers/internals';
-import { splitDateRangeSections, removeLastSeparator } from "./date-fields-utils.js";
-export const rangeValueManager = {
+const rangeValueManager = exports.rangeValueManager = {
   emptyValue: [null, null],
-  getTodayValue: (utils, timezone, valueType) => [getTodayDate(utils, timezone, valueType), getTodayDate(utils, timezone, valueType)],
+  getTodayValue: (utils, timezone, valueType) => [(0, _internals.getTodayDate)(utils, timezone, valueType), (0, _internals.getTodayDate)(utils, timezone, valueType)],
   getInitialReferenceValue: _ref => {
     let {
         value,
         referenceDate: referenceDateProp
       } = _ref,
-      params = _objectWithoutPropertiesLoose(_ref, _excluded);
+      params = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
     const shouldKeepStartDate = params.utils.isValid(value[0]);
     const shouldKeepEndDate = params.utils.isValid(value[1]);
     if (shouldKeepStartDate && shouldKeepEndDate) {
       return value;
     }
-    const referenceDate = referenceDateProp ?? getDefaultReferenceDate(params);
+    const referenceDate = referenceDateProp ?? (0, _internals.getDefaultReferenceDate)(params);
     return [shouldKeepStartDate ? value[0] : referenceDate, shouldKeepEndDate ? value[1] : referenceDate];
   },
-  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]),
+  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]),
   isSameError: (a, b) => b !== null && a[1] === b[1] && a[0] === b[0],
   hasError: error => error[0] != null || error[1] != null,
   defaultErrorState: [null, null],
@@ -35,7 +42,7 @@ export const rangeValueManager = {
   },
   setTimezone: (utils, timezone, value) => [value[0] == null ? null : utils.setTimezone(value[0], timezone), value[1] == null ? null : utils.setTimezone(value[1], timezone)]
 };
-export const getRangeFieldValueManager = ({
+const getRangeFieldValueManager = ({
   dateSeparator = '–'
 }) => ({
   updateReferenceValue: (utils, value, prevReferenceValue) => {
@@ -52,39 +59,31 @@ 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') {
-          return _extends({}, section, {
+          return (0, _extends2.default)({}, section, {
             dateName: position,
             // TODO: Check if RTL still works
             endSeparator: `${section.endSeparator} ${dateSeparator} `
           });
         }
-        return _extends({}, section, {
+        return (0, _extends2.default)({}, section, {
           dateName: position
         });
       });
     };
-    return [...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')];
+    return [...getSections(start, 'start'), ...getSections(end, 'end')];
   },
   getV7HiddenInputValueFromSections: sections => {
-    const dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrForV7HiddenInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
+    const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
+    return (0, _internals.createDateStrForV7HiddenInputFromSections)([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
   },
   getV6InputValueFromSections: (sections, localizedDigits, isRtl) => {
-    const dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrForV6InputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRtl);
+    const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
+    return (0, _internals.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.
@@ -96,23 +95,33 @@ 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 = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
+    if (getActiveDateIndex(activeSection) === 0) {
+      return (0, _dateFieldsUtils.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 = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
+    if (getActiveDateIndex(activeSection) === 0) {
+      return [...dateRangeSections.startDate.map(section => (0, _extends2.default)({}, section, {
+        value: ''
+      })), ...dateRangeSections.endDate];
+    }
+    return [...dateRangeSections.startDate, ...dateRangeSections.endDate.map(section => (0, _extends2.default)({}, section, {
+      value: ''
+    }))];
   }
-});
+});
+exports.getRangeFieldValueManager = getRangeFieldValueManager;
+function getActiveDateIndex(activeSection) {
+  return activeSection == null || activeSection.dateName === 'start' ? 0 : 1;
+}

package/locales/index.d.ts

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

package/locales/index.js

@@ -1 +1,16 @@
-export * from '@mui/x-date-pickers/locales';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _locales = require("@mui/x-date-pickers/locales");
+Object.keys(_locales).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _locales[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _locales[key];
+    }
+  });
+});

package/managers/index.d.ts

@@ -1,6 +1,6 @@
-export { useDateRangeManager } from './useDateRangeManager';
-export type { UseDateRangeManagerReturnValue, UseDateRangeManagerParameters, DateRangeManagerFieldInternalProps, } from './useDateRangeManager';
-export { useTimeRangeManager } from './useTimeRangeManager';
-export type { UseTimeRangeManagerReturnValue, UseTimeRangeManagerParameters, TimeRangeManagerFieldInternalProps, } from './useTimeRangeManager';
-export { useDateTimeRangeManager } from './useDateTimeRangeManager';
-export type { UseDateTimeRangeManagerReturnValue, UseDateTimeRangeManagerParameters, DateTimeRangeManagerFieldInternalProps, } from './useDateTimeRangeManager';
+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/managers/index.js

@@ -1,3 +1,26 @@
-export { useDateRangeManager } from "./useDateRangeManager.js";
-export { useTimeRangeManager } from "./useTimeRangeManager.js";
-export { useDateTimeRangeManager } from "./useDateTimeRangeManager.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useDateRangeManager", {
+  enumerable: true,
+  get: function () {
+    return _useDateRangeManager.useDateRangeManager;
+  }
+});
+Object.defineProperty(exports, "useDateTimeRangeManager", {
+  enumerable: true,
+  get: function () {
+    return _useDateTimeRangeManager.useDateTimeRangeManager;
+  }
+});
+Object.defineProperty(exports, "useTimeRangeManager", {
+  enumerable: true,
+  get: function () {
+    return _useTimeRangeManager.useTimeRangeManager;
+  }
+});
+var _useDateRangeManager = require("./useDateRangeManager");
+var _useTimeRangeManager = require("./useTimeRangeManager");
+var _useDateTimeRangeManager = require("./useDateTimeRangeManager");

package/managers/useDateRangeManager.d.ts

@@ -1,15 +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';
-import { ExportedValidateDateRangeProps, ValidateDateRangeProps } from '../validation/validateDateRange';
+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;
+  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 {};
+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/managers/useDateRangeManager.js

@@ -1,20 +1,29 @@
+"use strict";
 '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 = {}) {
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDateRangeManager = useDateRangeManager;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-date-pickers/hooks");
+var _internals = require("@mui/x-date-pickers/internals");
+var _valueManagers = require("../internals/utils/valueManagers");
+var _validation = require("../validation");
+var _dateUtils = require("../internals/utils/date-utils");
+function useDateRangeManager(parameters = {}) {
   const {
     enableAccessibleFieldDOMStructure = true,
     dateSeparator
   } = parameters;
   return React.useMemo(() => ({
     valueType: 'date',
-    validator: validateDateRange,
-    internal_valueManager: rangeValueManager,
-    internal_fieldValueManager: getRangeFieldValueManager({
+    validator: _validation.validateDateRange,
+    internal_valueManager: _valueManagers.rangeValueManager,
+    internal_fieldValueManager: (0, _valueManagers.getRangeFieldValueManager)({
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
@@ -22,12 +31,18 @@ export function useDateRangeManager(parameters = {}) {
       internalProps,
       utils,
       defaultDates
-    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
+    }) => (0, _extends2.default)({}, internalProps, (0, _internals.getDateFieldInternalPropsDefaults)({
       defaultDates,
       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(value) {
+  const utils = (0, _internals.useUtils)();
+  const translations = (0, _hooks.usePickerTranslations)();
+  return React.useMemo(() => {
+    return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, 'fullDate'));
+  }, [value, translations, utils]);
 }

package/managers/useDateTimeRangeManager.d.ts

@@ -1,15 +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';
-import { ExportedValidateDateTimeRangeProps, ValidateDateTimeRangeProps } from '../validation/validateDateTimeRange';
+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;
+  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 {};
+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/managers/useDateTimeRangeManager.js

@@ -1,20 +1,29 @@
+"use strict";
 '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 = {}) {
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDateTimeRangeManager = useDateTimeRangeManager;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-date-pickers/hooks");
+var _internals = require("@mui/x-date-pickers/internals");
+var _valueManagers = require("../internals/utils/valueManagers");
+var _validation = require("../validation");
+var _dateUtils = require("../internals/utils/date-utils");
+function useDateTimeRangeManager(parameters = {}) {
   const {
     enableAccessibleFieldDOMStructure = true,
     dateSeparator
   } = parameters;
   return React.useMemo(() => ({
     valueType: 'date-time',
-    validator: validateDateTimeRange,
-    internal_valueManager: rangeValueManager,
-    internal_fieldValueManager: getRangeFieldValueManager({
+    validator: _validation.validateDateTimeRange,
+    internal_valueManager: _valueManagers.rangeValueManager,
+    internal_fieldValueManager: (0, _valueManagers.getRangeFieldValueManager)({
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
@@ -22,12 +31,18 @@ export function useDateTimeRangeManager(parameters = {}) {
       internalProps,
       utils,
       defaultDates
-    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
+    }) => (0, _extends2.default)({}, internalProps, (0, _internals.getDateTimeFieldInternalPropsDefaults)({
       internalProps,
       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(value) {
+  const utils = (0, _internals.useUtils)();
+  const translations = (0, _hooks.usePickerTranslations)();
+  return React.useMemo(() => {
+    return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, 'fullDate'));
+  }, [value, translations, utils]);
 }

package/managers/useTimeRangeManager.d.ts

@@ -1,15 +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';
-import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps } from '../validation/validateTimeRange';
+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 interface UseTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps, AmPmProps {
+  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 {};
+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/managers/useTimeRangeManager.js

@@ -1,31 +1,50 @@
+"use strict";
 '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 = {}) {
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTimeRangeManager = useTimeRangeManager;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-date-pickers/hooks");
+var _internals = require("@mui/x-date-pickers/internals");
+var _valueManagers = require("../internals/utils/valueManagers");
+var _validation = require("../validation");
+var _dateUtils = require("../internals/utils/date-utils");
+function useTimeRangeManager(parameters = {}) {
   const {
     enableAccessibleFieldDOMStructure = true,
-    dateSeparator
+    dateSeparator,
+    ampm
   } = parameters;
   return React.useMemo(() => ({
     valueType: 'time',
-    validator: validateTimeRange,
-    internal_valueManager: rangeValueManager,
-    internal_fieldValueManager: getRangeFieldValueManager({
+    validator: _validation.validateTimeRange,
+    internal_valueManager: _valueManagers.rangeValueManager,
+    internal_fieldValueManager: (0, _valueManagers.getRangeFieldValueManager)({
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
     internal_applyDefaultsToFieldInternalProps: ({
       internalProps,
       utils
-    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
+    }) => (0, _extends2.default)({}, internalProps, (0, _internals.getTimeFieldInternalPropsDefaults)({
       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(value) {
+    const utils = (0, _internals.useUtils)();
+    const translations = (0, _hooks.usePickerTranslations)();
+    return React.useMemo(() => {
+      const formatKey = ampm ?? utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
+      return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, formatKey));
+    }, [value, translations, utils]);
+  };
 }

package/models/fields.d.ts

@@ -1,47 +1,34 @@
 import * as React from 'react';
-import { UseFieldResponse, FormProps, PickerValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
+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 interface MultiInputFieldSlotTextFieldProps extends FormProps {
-    label?: React.ReactNode;
-    id?: string;
-    onKeyDown?: React.KeyboardEventHandler;
-    onClick?: React.MouseEventHandler;
-    onFocus?: React.FocusEventHandler;
-    focused?: boolean;
-    InputProps?: {
-        ref?: React.Ref<any>;
-        endAdornment?: React.ReactNode;
-        startAdornment?: React.ReactNode;
-    };
-}
+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;
+  onBlur?: React.FocusEventHandler;
 }
 export interface MultiInputFieldRefs {
-    unstableStartFieldRef?: React.Ref<FieldRef<PickerValue>>;
-    unstableEndFieldRef?: React.Ref<FieldRef<PickerValue>>;
+  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;
+  /**
+   * 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;
-/**
- * Props the text field receives when used with a multi input picker.
- * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.textField`.
- */
-export type BaseMultiInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = Omit<UseFieldResponse<TEnableAccessibleFieldDOMStructure, MultiInputFieldSlotTextFieldProps>, 'slots' | 'slotProps' | 'clearable' | 'onClear' | 'openPickerButtonPosition' | 'clearButtonPosition' | 'openPickerAriaLabel'>;
+export type PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;

package/models/fields.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/index.d.ts

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

package/models/index.js

@@ -1,4 +1,38 @@
-export * from "./fields.js";
-export * from "./range.js";
-export * from "./validation.js";
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _fields = require("./fields");
+Object.keys(_fields).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _fields[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _fields[key];
+    }
+  });
+});
+var _range = require("./range");
+Object.keys(_range).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _range[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _range[key];
+    }
+  });
+});
+var _validation = require("./validation");
+Object.keys(_validation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _validation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _validation[key];
+    }
+  });
+});

package/models/range.d.ts

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

package/models/range.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});