@mui/x-date-pickers-pro 7.15.0 → 7.17.0

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
@@ -13,17 +15,18 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, warnOnce, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
-import { getReleaseInfo } from '../internals/utils/releaseInfo';
-import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
-import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internals/utils/date-utils';
-import { calculateRangeChange, calculateRangePreview } from '../internals/utils/date-range-manager';
-import { DateRangePickerDay, dateRangePickerDayClasses as dayClasses } from '../DateRangePickerDay';
-import { rangeValueManager } from '../internals/utils/valueManagers';
-import { useDragRange } from './useDragRange';
-import { useRangePosition } from '../internals/hooks/useRangePosition';
-import { DAY_RANGE_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
-import { PickersRangeCalendarHeader } from '../PickersRangeCalendarHeader';
+import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
+import { warnOnce } from '@mui/x-internals/warning';
+import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
+import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
+import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from "../internals/utils/date-utils.js";
+import { calculateRangeChange, calculateRangePreview } from "../internals/utils/date-range-manager.js";
+import { DateRangePickerDay, dateRangePickerDayClasses as dayClasses } from "../DateRangePickerDay/index.js";
+import { rangeValueManager } from "../internals/utils/valueManagers.js";
+import { useDragRange } from "./useDragRange.js";
+import { useRangePosition } from "../internals/hooks/useRangePosition.js";
+import { DAY_RANGE_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
+import { PickersRangeCalendarHeader } from "../PickersRangeCalendarHeader/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 const DateRangeCalendarRoot = styled('div', {
@@ -321,7 +324,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     if (disableAutoMonthSwitching && prevDate && utils.isEqual(prevDate, date)) {
       return;
     }
-    const displayingMonthRange = calendars - 1;
+    const displayingMonthRange = calendars - currentMonthCalendarPosition;
     const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
     const requestedMonthNumber = utils.getMonth(date);
     if (!utils.isSameYear(calendarState.currentMonth, date) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
@@ -587,7 +590,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.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 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 TView The view type. Will be one of date or time views.
    * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.

package/modern/DateRangeCalendar/index.js

@@ -1,2 +1,2 @@
-export { DateRangeCalendar } from './DateRangeCalendar';
-export { getDateRangeCalendarUtilityClass, dateRangeCalendarClasses } from './dateRangeCalendarClasses';
+export { DateRangeCalendar } from "./DateRangeCalendar.js";
+export { getDateRangeCalendarUtilityClass, dateRangeCalendarClasses } from "./dateRangeCalendarClasses.js";

package/modern/DateRangeCalendar/useDragRange.js

@@ -1,7 +1,9 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { isEndOfRange, isStartOfRange } from '../internals/utils/date-utils';
+import { isEndOfRange, isStartOfRange } from "../internals/utils/date-utils.js";
 const resolveDateFromTarget = (target, utils, timezone) => {
   const timestampString = target.dataset.timestamp;
   if (!timestampString) {

package/modern/DateRangePicker/DateRangePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["desktopModeMediaQuery"];
@@ -6,8 +8,8 @@ import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
 import { refType } from '@mui/utils';
-import { DesktopDateRangePicker } from '../DesktopDateRangePicker';
-import { MobileDateRangePicker } from '../MobileDateRangePicker';
+import { DesktopDateRangePicker } from "../DesktopDateRangePicker/index.js";
+import { MobileDateRangePicker } from "../MobileDateRangePicker/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -191,16 +193,16 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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.
    */
@@ -211,13 +213,13 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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/DateRangePicker/DateRangePickerToolbar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "onViewChange", "view", "views"];
@@ -9,7 +11,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbar, PickersToolbarButton, useUtils } from '@mui/x-date-pickers/internals';
 import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
-import { getDateRangePickerToolbarUtilityClass } from './dateRangePickerToolbarClasses';
+import { getDateRangePickerToolbarUtilityClass } from "./dateRangePickerToolbarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/DateRangePicker/index.js

@@ -1,3 +1,3 @@
-export { DateRangePicker } from './DateRangePicker';
-export { DateRangePickerToolbar } from './DateRangePickerToolbar';
-export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
+export { DateRangePicker } from "./DateRangePicker.js";
+export { DateRangePickerToolbar } from "./DateRangePickerToolbar.js";
+export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses } from "./dateRangePickerToolbarClasses.js";

package/modern/DateRangePicker/shared.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { useDefaultDates, useUtils, applyDefaultDate } from '@mui/x-date-pickers/internals';
-import { DateRangePickerToolbar } from './DateRangePickerToolbar';
+import { DateRangePickerToolbar } from "./DateRangePickerToolbar.js";
 export function useDateRangePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();

package/modern/DateRangePickerDay/DateRangePickerDay.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "day", "outsideCurrentMonth", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "selected", "isVisuallySelected", "sx", "draggable", "isFirstVisibleCell", "isLastVisibleCell"];
@@ -9,8 +11,8 @@ import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { useUtils } from '@mui/x-date-pickers/internals';
 import { PickersDay } from '@mui/x-date-pickers/PickersDay';
-import { getDateRangePickerDayUtilityClass, dateRangePickerDayClasses } from './dateRangePickerDayClasses';
-import { getReleaseInfo } from '../internals/utils/releaseInfo';
+import { getDateRangePickerDayUtilityClass, dateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";
+import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 const useUtilityClasses = ownerState => {

package/modern/DateRangePickerDay/index.js

@@ -1,2 +1,2 @@
-export { DateRangePickerDay } from './DateRangePickerDay';
-export { getDateRangePickerDayUtilityClass, dateRangePickerDayClasses } from './dateRangePickerDayClasses';
+export { DateRangePickerDay } from "./DateRangePickerDay.js";
+export { getDateRangePickerDayUtilityClass, dateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";

package/modern/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["desktopModeMediaQuery"];
@@ -6,8 +8,8 @@ import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
-import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker';
-import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker';
+import { DesktopDateTimeRangePicker } from "../DesktopDateTimeRangePicker/index.js";
+import { MobileDateTimeRangePicker } from "../MobileDateTimeRangePicker/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -224,16 +226,16 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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.
    */
@@ -244,13 +246,13 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -9,7 +11,7 @@ import { isDatePickerView } from '@mui/x-date-pickers/internals';
 import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
-import { getDateTimeRangePickerTabsUtilityClass } from './dateTimeRangePickerTabsClasses';
+import { getDateTimeRangePickerTabsUtilityClass } from "./dateTimeRangePickerTabsClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const viewToTab = (view, rangePosition) => {
   if (isDatePickerView(view)) {

package/modern/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["rangePosition", "onRangePositionChange", "viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
 import { isInternalTimeView, useUtils } from '@mui/x-date-pickers/internals';
-import { isRangeValid } from '../internals/utils/date-utils';
-import { calculateRangeChange } from '../internals/utils/date-range-manager';
+import { isRangeValid } from "../internals/utils/date-utils.js";
+import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
 /**
  * @ignore - internal component.
  */

package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view", "isLandscape", "views", "ampm", "disabled", "readOnly", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
@@ -9,8 +11,8 @@ import composeClasses from '@mui/utils/composeClasses';
 import { useUtils } from '@mui/x-date-pickers/internals';
 import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
-import { getDateTimeRangePickerToolbarUtilityClass } from './dateTimeRangePickerToolbarClasses';
-import { calculateRangeChange } from '../internals/utils/date-range-manager';
+import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
+import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/DateTimeRangePicker/index.js

@@ -1,5 +1,5 @@
-export { DateTimeRangePicker } from './DateTimeRangePicker';
-export { DateTimeRangePickerTabs } from './DateTimeRangePickerTabs';
-export { getDateTimeRangePickerTabsUtilityClass, dateTimeRangePickerTabsClasses } from './dateTimeRangePickerTabsClasses';
-export { DateTimeRangePickerToolbar } from './DateTimeRangePickerToolbar';
-export { getDateTimeRangePickerToolbarUtilityClass, dateTimeRangePickerToolbarClasses } from './dateTimeRangePickerToolbarClasses';
+export { DateTimeRangePicker } from "./DateTimeRangePicker.js";
+export { DateTimeRangePickerTabs } from "./DateTimeRangePickerTabs.js";
+export { getDateTimeRangePickerTabsUtilityClass, dateTimeRangePickerTabsClasses } from "./dateTimeRangePickerTabsClasses.js";
+export { DateTimeRangePickerToolbar } from "./DateTimeRangePickerToolbar.js";
+export { getDateTimeRangePickerToolbarUtilityClass, dateTimeRangePickerToolbarClasses } from "./dateTimeRangePickerToolbarClasses.js";

package/modern/DateTimeRangePicker/shared.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useThemeProps } from '@mui/material/styles';
 import { useDefaultDates, useUtils, applyDefaultDate, applyDefaultViewProps, resolveTimeViewsResponse } from '@mui/x-date-pickers/internals';
-import { DateTimeRangePickerToolbar } from './DateTimeRangePickerToolbar';
-import { DateTimeRangePickerTabs } from './DateTimeRangePickerTabs';
+import { DateTimeRangePickerToolbar } from "./DateTimeRangePickerToolbar.js";
+import { DateTimeRangePickerTabs } from "./DateTimeRangePickerTabs.js";
 export function useDateTimeRangePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -1,15 +1,17 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { extractValidationProps } from '@mui/x-date-pickers/internals';
+import { extractValidationProps } from '@mui/x-date-pickers/validation';
 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 { useDesktopRangePicker } from '../internals/hooks/useDesktopRangePicker';
-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 { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
+import { validateDateRange } from "../validation/index.js";
 /**
  * Demos:
  *
@@ -196,16 +198,16 @@ DesktopDateRangePicker.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.
    */
@@ -216,13 +218,13 @@ DesktopDateRangePicker.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/DesktopDateRangePicker/index.js

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

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -1,9 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { extractValidationProps, isDatePickerView, isInternalTimeView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
+import { isDatePickerView, isInternalTimeView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
+import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
@@ -11,14 +14,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 "../validation/index.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 {
@@ -304,16 +307,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 +327,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

@@ -1,15 +1,17 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { extractValidationProps } from '@mui/x-date-pickers/internals';
+import { extractValidationProps } from '@mui/x-date-pickers/validation';
 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 "../validation/index.js";
 /**
  * Demos:
  *
@@ -192,16 +194,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 +214,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";