@mui/x-date-pickers-pro 7.14.0 → 7.16.0

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -11,14 +11,14 @@ import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses
 import Divider from '@mui/material/Divider';
 import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock';
 import { DesktopDateTimePickerLayout } from '@mui/x-date-pickers/DesktopDateTimePicker';
-import { rangeValueManager } from '../internals/utils/valueManagers';
-import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
-import { useDesktopRangePicker } from '../internals/hooks/useDesktopRangePicker';
-import { validateDateTimeRange } from '../internals/utils/validation/validateDateTimeRange';
-import { useDateTimeRangePickerDefaultizedProps } from '../DateTimeRangePicker/shared';
-import { MultiInputDateTimeRangeField } from '../MultiInputDateTimeRangeField';
-import { DateTimeRangePickerTimeWrapper } from '../DateTimeRangePicker/DateTimeRangePickerTimeWrapper';
-import { RANGE_VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { rangeValueManager } from "../internals/utils/valueManagers.js";
+import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
+import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
+import { validateDateTimeRange } from "../internals/utils/validation/validateDateTimeRange.js";
+import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/shared.js";
+import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
+import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
+import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
   const {
@@ -93,7 +93,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   const props = _extends({}, defaultizedProps, {
     views,
     viewRenderers,
-    format: resolveDateTimeFormat(utils, defaultizedProps),
+    format: resolveDateTimeFormat(utils, defaultizedProps, true),
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,
@@ -304,16 +304,16 @@ DesktopDateTimeRangePicker.propTypes = {
   name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
@@ -324,13 +324,13 @@ DesktopDateTimeRangePicker.propTypes = {
    */
   onClose: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * If the error has a non-null value, then the `TextField` will be rendered in `error` state.
-   *
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error describing why the current value is not valid.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   /**

package/modern/DesktopDateTimeRangePicker/index.js

@@ -1 +1 @@
-export { DesktopDateTimeRangePicker } from './DesktopDateTimeRangePicker';
+export { DesktopDateTimeRangePicker } from "./DesktopDateTimeRangePicker.js";

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
 import { extractValidationProps } from '@mui/x-date-pickers/internals';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
-import { rangeValueManager } from '../internals/utils/valueManagers';
-import { useDateRangePickerDefaultizedProps } from '../DateRangePicker/shared';
-import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
-import { MultiInputDateRangeField } from '../MultiInputDateRangeField';
-import { useMobileRangePicker } from '../internals/hooks/useMobileRangePicker';
-import { validateDateRange } from '../internals/utils/validation/validateDateRange';
+import { rangeValueManager } from "../internals/utils/valueManagers.js";
+import { useDateRangePickerDefaultizedProps } from "../DateRangePicker/shared.js";
+import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
+import { MultiInputDateRangeField } from "../MultiInputDateRangeField/index.js";
+import { useMobileRangePicker } from "../internals/hooks/useMobileRangePicker/index.js";
+import { validateDateRange } from "../internals/utils/validation/validateDateRange.js";
 /**
  * Demos:
  *
@@ -192,16 +192,16 @@ MobileDateRangePicker.propTypes = {
   name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
@@ -212,13 +212,13 @@ MobileDateRangePicker.propTypes = {
    */
   onClose: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * If the error has a non-null value, then the `TextField` will be rendered in `error` state.
-   *
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error describing why the current value is not valid.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   /**

package/modern/MobileDateRangePicker/index.js

@@ -1 +1 @@
-export { MobileDateRangePicker } from './MobileDateRangePicker';
+export { MobileDateRangePicker } from "./MobileDateRangePicker.js";

package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -9,14 +9,14 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
 import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock';
-import { rangeValueManager } from '../internals/utils/valueManagers';
-import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
-import { useMobileRangePicker } from '../internals/hooks/useMobileRangePicker';
-import { validateDateTimeRange } from '../internals/utils/validation/validateDateTimeRange';
-import { useDateTimeRangePickerDefaultizedProps } from '../DateTimeRangePicker/shared';
-import { MultiInputDateTimeRangeField } from '../MultiInputDateTimeRangeField';
-import { DateTimeRangePickerTimeWrapper } from '../DateTimeRangePicker/DateTimeRangePickerTimeWrapper';
-import { RANGE_VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { rangeValueManager } from "../internals/utils/valueManagers.js";
+import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
+import { useMobileRangePicker } from "../internals/hooks/useMobileRangePicker/index.js";
+import { validateDateTimeRange } from "../internals/utils/validation/validateDateTimeRange.js";
+import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/shared.js";
+import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
+import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
+import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
   const {
@@ -95,7 +95,7 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    format: resolveDateTimeFormat(utils, defaultizedProps),
+    format: resolveDateTimeFormat(utils, defaultizedProps, true),
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer
@@ -298,16 +298,16 @@ MobileDateTimeRangePicker.propTypes = {
   name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
@@ -318,13 +318,13 @@ MobileDateTimeRangePicker.propTypes = {
    */
   onClose: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * If the error has a non-null value, then the `TextField` will be rendered in `error` state.
-   *
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error describing why the current value is not valid.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   /**

package/modern/MobileDateTimeRangePicker/index.js

@@ -1 +1 @@
-export { MobileDateTimeRangePicker } from './MobileDateTimeRangePicker';
+export { MobileDateTimeRangePicker } from "./MobileDateTimeRangePicker.js";

package/modern/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -12,7 +12,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 import { splitFieldInternalAndForwardedProps, convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
-import { useMultiInputDateRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField';
+import { useMultiInputDateRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputDateRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateRangeField', ['root', 'separator']);
 export const getMultiInputDateRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateRangeField', slot);
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getMultiInputDateRangeFieldUtilityClass, classes);
 };
-const MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
+const MultiInputDateRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
   ref: ref,
   spacing: 2,
   direction: "row",
@@ -200,18 +200,20 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   minDate: PropTypes.object,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   /**

package/modern/MultiInputDateRangeField/index.js

@@ -1,2 +1,2 @@
-export { MultiInputDateRangeField, getMultiInputDateRangeFieldUtilityClass, multiInputDateRangeFieldClasses } from './MultiInputDateRangeField';
-export { useMultiInputDateRangeField as unstable_useMultiInputDateRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField';
+export { MultiInputDateRangeField, getMultiInputDateRangeFieldUtilityClass, multiInputDateRangeFieldClasses } from "./MultiInputDateRangeField.js";
+export { useMultiInputDateRangeField as unstable_useMultiInputDateRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js";

package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -12,7 +12,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 import { splitFieldInternalAndForwardedProps, convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
-import { useMultiInputDateTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField';
+import { useMultiInputDateTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputDateTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateTimeRangeField', ['root', 'separator']);
 export const getMultiInputDateTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateTimeRangeField', slot);
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getMultiInputDateTimeRangeFieldUtilityClass, classes);
 };
-const MultiInputDateTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
+const MultiInputDateTimeRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
   ref: ref,
   spacing: 2,
   direction: "row",
@@ -233,18 +233,20 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   /**

package/modern/MultiInputDateTimeRangeField/index.js

@@ -1,2 +1,2 @@
-export { MultiInputDateTimeRangeField, getMultiInputDateTimeRangeFieldUtilityClass, multiInputDateTimeRangeFieldClasses } from './MultiInputDateTimeRangeField';
-export { useMultiInputDateTimeRangeField as unstable_useMultiInputDateTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField';
+export { MultiInputDateTimeRangeField, getMultiInputDateTimeRangeFieldUtilityClass, multiInputDateTimeRangeFieldClasses } from "./MultiInputDateTimeRangeField.js";
+export { useMultiInputDateTimeRangeField as unstable_useMultiInputDateTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js";

package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -12,7 +12,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 import { splitFieldInternalAndForwardedProps, convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
-import { useMultiInputTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField';
+import { useMultiInputTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputTimeRangeField', ['root', 'separator']);
 export const getMultiInputTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputTimeRangeField', slot);
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getMultiInputTimeRangeFieldUtilityClass, classes);
 };
-const MultiInputTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
+const MultiInputTimeRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
   ref: ref,
   spacing: 2,
   direction: "row",
@@ -215,18 +215,20 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   /**

package/modern/MultiInputTimeRangeField/index.js

@@ -1,2 +1,2 @@
-export { MultiInputTimeRangeField, getMultiInputTimeRangeFieldUtilityClass, multiInputTimeRangeFieldClasses } from './MultiInputTimeRangeField';
-export { useMultiInputTimeRangeField as unstable_useMultiInputTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField';
+export { MultiInputTimeRangeField, getMultiInputTimeRangeFieldUtilityClass, multiInputTimeRangeFieldClasses } from "./MultiInputTimeRangeField.js";
+export { useMultiInputTimeRangeField as unstable_useMultiInputTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js";

package/modern/PickersRangeCalendarHeader/index.js

@@ -1 +1 @@
-export { PickersRangeCalendarHeader } from './PickersRangeCalendarHeader';
+export { PickersRangeCalendarHeader } from "./PickersRangeCalendarHeader.js";

package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -10,7 +10,7 @@ import { refType } from '@mui/utils';
 import { useClearableField } from '@mui/x-date-pickers/hooks';
 import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
-import { useSingleInputDateRangeField } from './useSingleInputDateRangeField';
+import { useSingleInputDateRangeField } from "./useSingleInputDateRangeField.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -195,8 +195,8 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
   onBlur: PropTypes.func,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
@@ -206,11 +206,13 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    */
   onClear: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   onFocus: PropTypes.func,

package/modern/SingleInputDateRangeField/index.js

@@ -1,2 +1,2 @@
-export { SingleInputDateRangeField } from './SingleInputDateRangeField';
-export { useSingleInputDateRangeField as unstable_useSingleInputDateRangeField } from './useSingleInputDateRangeField';
+export { SingleInputDateRangeField } from "./SingleInputDateRangeField.js";
+export { useSingleInputDateRangeField as unstable_useSingleInputDateRangeField } from "./useSingleInputDateRangeField.js";

package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useField, splitFieldInternalAndForwardedProps, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
-import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
-import { validateDateRange } from '../internals/utils/validation/validateDateRange';
+import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateRange } from "../internals/utils/validation/validateDateRange.js";
 export const useSingleInputDateRangeField = inProps => {
   const props = useDefaultizedDateField(inProps);
   const {

package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -10,7 +10,7 @@ import { useThemeProps } from '@mui/material/styles';
 import { refType } from '@mui/utils';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useClearableField } from '@mui/x-date-pickers/hooks';
-import { useSingleInputDateTimeRangeField } from './useSingleInputDateTimeRangeField';
+import { useSingleInputDateTimeRangeField } from "./useSingleInputDateTimeRangeField.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -228,8 +228,8 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
   onBlur: PropTypes.func,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
@@ -239,11 +239,13 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    */
   onClear: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   onFocus: PropTypes.func,

package/modern/SingleInputDateTimeRangeField/index.js

@@ -1,2 +1,2 @@
-export { SingleInputDateTimeRangeField } from './SingleInputDateTimeRangeField';
-export { useSingleInputDateTimeRangeField as unstable_useSingleInputDateTimeRangeField } from './useSingleInputDateTimeRangeField';
+export { SingleInputDateTimeRangeField } from "./SingleInputDateTimeRangeField.js";
+export { useSingleInputDateTimeRangeField as unstable_useSingleInputDateTimeRangeField } from "./useSingleInputDateTimeRangeField.js";

package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useField, splitFieldInternalAndForwardedProps, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
-import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
-import { validateDateTimeRange } from '../internals/utils/validation/validateDateTimeRange';
+import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateTimeRange } from "../internals/utils/validation/validateDateTimeRange.js";
 export const useSingleInputDateTimeRangeField = inProps => {
   const props = useDefaultizedDateTimeField(inProps);
   const {

package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -10,7 +10,7 @@ import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
-import { useSingleInputTimeRangeField } from './useSingleInputTimeRangeField';
+import { useSingleInputTimeRangeField } from "./useSingleInputTimeRangeField.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -210,8 +210,8 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
   onBlur: PropTypes.func,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
@@ -221,11 +221,13 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    */
   onClear: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   onFocus: PropTypes.func,

package/modern/SingleInputTimeRangeField/index.js

@@ -1,2 +1,2 @@
-export { SingleInputTimeRangeField } from './SingleInputTimeRangeField';
-export { useSingleInputTimeRangeField as unstable_useSingleInputTimeRangeField } from './useSingleInputTimeRangeField';
+export { SingleInputTimeRangeField } from "./SingleInputTimeRangeField.js";
+export { useSingleInputTimeRangeField as unstable_useSingleInputTimeRangeField } from "./useSingleInputTimeRangeField.js";

package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useField, splitFieldInternalAndForwardedProps, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
-import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
-import { validateTimeRange } from '../internals/utils/validation/validateTimeRange';
+import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
+import { validateTimeRange } from "../internals/utils/validation/validateTimeRange.js";
 export const useSingleInputTimeRangeField = inProps => {
   const props = useDefaultizedTimeField(inProps);
   const {