@mui/x-date-pickers 7.14.0 → 7.16.0

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -3,18 +3,18 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { TimeField } from '../TimeField';
-import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { validateTime } from '../internals/utils/validation/validateTime';
-import { ClockIcon } from '../icons';
-import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
-import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
-import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
-import { resolveTimeFormat } from '../internals/utils/time-utils';
-import { resolveTimeViewsResponse } from '../internals/utils/date-time-utils';
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { TimeField } from "../TimeField/index.js";
+import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { validateTime } from "../internals/utils/validation/validateTime.js";
+import { ClockIcon } from "../icons/index.js";
+import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
+import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
+import { resolveTimeFormat } from "../internals/utils/time-utils.js";
+import { resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
 /**
  * Demos:
  *
@@ -193,16 +193,16 @@ DesktopTimePicker.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.
    */
@@ -213,13 +213,13 @@ DesktopTimePicker.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/DesktopTimePicker/index.js

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

package/modern/DigitalClock/DigitalClock.js

@@ -11,16 +11,16 @@ import composeClasses from '@mui/utils/composeClasses';
 import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import useForkRef from '@mui/utils/useForkRef';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
-import { createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
-import { PickerViewRoot } from '../internals/components/PickerViewRoot';
-import { getDigitalClockUtilityClass } from './digitalClockClasses';
-import { useViews } from '../internals/hooks/useViews';
-import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils, useNow } from "../internals/hooks/useUtils.js";
+import { createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
+import { PickerViewRoot } from "../internals/components/PickerViewRoot/index.js";
+import { getDigitalClockUtilityClass } from "./digitalClockClasses.js";
+import { useViews } from "../internals/hooks/useViews.js";
+import { DIGITAL_CLOCK_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -336,7 +336,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.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 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/DigitalClock/index.js

@@ -1,2 +1,2 @@
-export { DigitalClock } from './DigitalClock';
-export { digitalClockClasses, getDigitalClockUtilityClass } from './digitalClockClasses';
+export { DigitalClock } from "./DigitalClock.js";
+export { digitalClockClasses, getDigitalClockUtilityClass } from "./digitalClockClasses.js";

package/modern/LocalizationProvider/index.js

@@ -1 +1 @@
-export { LocalizationProvider, MuiPickersAdapterContext } from './LocalizationProvider';
+export { LocalizationProvider, MuiPickersAdapterContext } from "./LocalizationProvider.js";

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -3,16 +3,16 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
-import { useMobilePicker } from '../internals/hooks/useMobilePicker';
-import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { validateDate } from '../internals/utils/validation/validateDate';
-import { DateField } from '../DateField';
-import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { renderDateViewCalendar } from '../dateViewRenderers';
-import { resolveDateFormat } from '../internals/utils/date-utils';
+import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
+import { useDatePickerDefaultizedProps } from "../DatePicker/shared.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { validateDate } from "../internals/utils/validation/validateDate.js";
+import { DateField } from "../DateField/index.js";
+import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
+import { resolveDateFormat } from "../internals/utils/date-utils.js";
 /**
  * Demos:
  *
@@ -181,16 +181,16 @@ MobileDatePicker.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.
    */
@@ -201,13 +201,13 @@ MobileDatePicker.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/MobileDatePicker/index.js

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

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -3,17 +3,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { DateTimeField } from '../DateTimeField';
-import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { validateDateTime } from '../internals/utils/validation/validateDateTime';
-import { useMobilePicker } from '../internals/hooks/useMobilePicker';
-import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
-import { renderDateViewCalendar } from '../dateViewRenderers';
-import { renderTimeViewClock } from '../timeViewRenderers';
-import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { DateTimeField } from "../DateTimeField/index.js";
+import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { validateDateTime } from "../internals/utils/validation/validateDateTime.js";
+import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
+import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
+import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
+import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { resolveDateTimeFormat } from "../internals/utils/date-time-utils.js";
 /**
  * Demos:
  *
@@ -229,16 +229,16 @@ MobileDateTimePicker.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.
    */
@@ -249,13 +249,13 @@ MobileDateTimePicker.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/MobileDateTimePicker/index.js

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

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -3,16 +3,16 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { TimeField } from '../TimeField';
-import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { validateTime } from '../internals/utils/validation/validateTime';
-import { useMobilePicker } from '../internals/hooks/useMobilePicker';
-import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
-import { renderTimeViewClock } from '../timeViewRenderers';
-import { resolveTimeFormat } from '../internals/utils/time-utils';
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { TimeField } from "../TimeField/index.js";
+import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { validateTime } from "../internals/utils/validation/validateTime.js";
+import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
+import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
+import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { resolveTimeFormat } from "../internals/utils/time-utils.js";
 /**
  * Demos:
  *
@@ -172,16 +172,16 @@ MobileTimePicker.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.
    */
@@ -192,13 +192,13 @@ MobileTimePicker.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/MobileTimePicker/index.js

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

package/modern/MonthCalendar/MonthCalendar.js

@@ -7,14 +7,14 @@ import clsx from 'clsx';
 import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useControlled as useControlled, unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { PickersMonth } from './PickersMonth';
-import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
-import { getMonthCalendarUtilityClass } from './monthCalendarClasses';
-import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
-import { DIALOG_WIDTH } from '../internals/constants/dimensions';
+import { PickersMonth } from "./PickersMonth.js";
+import { useUtils, useNow, useDefaultDates } from "../internals/hooks/useUtils.js";
+import { getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
+import { applyDefaultDate, getMonthsInYear } from "../internals/utils/date-utils.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
+import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
+import { DIALOG_WIDTH } from "../internals/constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/MonthCalendar/PickersMonth.js

@@ -7,7 +7,7 @@ import { styled, alpha, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { getPickersMonthUtilityClass, pickersMonthClasses } from './pickersMonthClasses';
+import { getPickersMonthUtilityClass, pickersMonthClasses } from "./pickersMonthClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/MonthCalendar/index.js

@@ -1,3 +1,3 @@
-export { MonthCalendar } from './MonthCalendar';
-export { monthCalendarClasses, getMonthCalendarUtilityClass } from './monthCalendarClasses';
-export { pickersMonthClasses } from './pickersMonthClasses';
+export { MonthCalendar } from "./MonthCalendar.js";
+export { monthCalendarClasses, getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
+export { pickersMonthClasses } from "./pickersMonthClasses.js";

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -8,19 +8,19 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
-import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
-import { useViews } from '../internals/hooks/useViews';
-import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
-import { PickerViewRoot } from '../internals/components/PickerViewRoot';
-import { getMultiSectionDigitalClockUtilityClass } from './multiSectionDigitalClockClasses';
-import { MultiSectionDigitalClockSection } from './MultiSectionDigitalClockSection';
-import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigitalClock.utils';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
-import { formatMeridiem } from '../internals/utils/date-utils';
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils, useNow } from "../internals/hooks/useUtils.js";
+import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
+import { useViews } from "../internals/hooks/useViews.js";
+import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
+import { PickerViewRoot } from "../internals/components/PickerViewRoot/index.js";
+import { getMultiSectionDigitalClockUtilityClass } from "./multiSectionDigitalClockClasses.js";
+import { MultiSectionDigitalClockSection } from "./MultiSectionDigitalClockSection.js";
+import { getHourSectionOptions, getTimeSectionOptions } from "./MultiSectionDigitalClock.utils.js";
+import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
+import { formatMeridiem } from "../internals/utils/date-utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -303,11 +303,11 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       return views;
     }
     const digitViews = views.filter(v => v !== 'meridiem');
-    const result = digitViews.toReversed();
+    digitViews.reverse();
     if (views.includes('meridiem')) {
-      result.push('meridiem');
+      digitViews.push('meridiem');
     }
-    return result;
+    return digitViews;
   }, [isRtl, views]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
@@ -406,7 +406,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.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 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/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -8,8 +8,8 @@ import composeClasses from '@mui/utils/composeClasses';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import useForkRef from '@mui/utils/useForkRef';
-import { getMultiSectionDigitalClockSectionUtilityClass } from './multiSectionDigitalClockSectionClasses';
-import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
+import { getMultiSectionDigitalClockSectionUtilityClass } from "./multiSectionDigitalClockSectionClasses.js";
+import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/MultiSectionDigitalClock/index.js

@@ -1,3 +1,3 @@
-export { MultiSectionDigitalClock } from './MultiSectionDigitalClock';
-export { multiSectionDigitalClockSectionClasses } from './multiSectionDigitalClockSectionClasses';
-export { multiSectionDigitalClockClasses, getMultiSectionDigitalClockUtilityClass } from './multiSectionDigitalClockClasses';
+export { MultiSectionDigitalClock } from "./MultiSectionDigitalClock.js";
+export { multiSectionDigitalClockSectionClasses } from "./multiSectionDigitalClockSectionClasses.js";
+export { multiSectionDigitalClockClasses, getMultiSectionDigitalClockUtilityClass } from "./multiSectionDigitalClockClasses.js";

package/modern/PickersActionBar/PickersActionBar.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:

package/modern/PickersActionBar/index.js

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

package/modern/PickersCalendarHeader/PickersCalendarHeader.js

@@ -10,13 +10,13 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import IconButton from '@mui/material/IconButton';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup';
-import { ArrowDropDownIcon } from '../icons';
-import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
-import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
-import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { PickersFadeTransitionGroup } from "../DateCalendar/PickersFadeTransitionGroup.js";
+import { ArrowDropDownIcon } from "../icons/index.js";
+import { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.js";
+import { usePreviousMonthDisabled, useNextMonthDisabled } from "../internals/hooks/date-helpers-hooks.js";
+import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/PickersCalendarHeader/index.js

@@ -1,2 +1,2 @@
-export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
-export { PickersCalendarHeader } from './PickersCalendarHeader';
+export { pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.js";
+export { PickersCalendarHeader } from "./PickersCalendarHeader.js";

package/modern/PickersDay/PickersDay.js

@@ -7,9 +7,9 @@ import clsx from 'clsx';
 import ButtonBase from '@mui/material/ButtonBase';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
-import { useUtils } from '../internals/hooks/useUtils';
-import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
-import { getPickersDayUtilityClass, pickersDayClasses } from './pickersDayClasses';
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
+import { getPickersDayUtilityClass, pickersDayClasses } from "./pickersDayClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/PickersDay/index.js

@@ -1,2 +1,2 @@
-export { PickersDay } from './PickersDay';
-export { pickersDayClasses, getPickersDayUtilityClass } from './pickersDayClasses';
+export { PickersDay } from "./PickersDay.js";
+export { pickersDayClasses, getPickersDayUtilityClass } from "./pickersDayClasses.js";

package/modern/PickersLayout/PickersLayout.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { pickersLayoutClasses, getPickersLayoutUtilityClass } from './pickersLayoutClasses';
-import usePickerLayout from './usePickerLayout';
+import { pickersLayoutClasses, getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
+import usePickerLayout from "./usePickerLayout.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/PickersLayout/index.js

@@ -1,3 +1,3 @@
-export { PickersLayout, PickersLayoutRoot, PickersLayoutContentWrapper } from './PickersLayout';
-export { default as usePickerLayout } from './usePickerLayout';
-export { pickersLayoutClasses } from './pickersLayoutClasses';
+export { PickersLayout, PickersLayoutRoot, PickersLayoutContentWrapper } from "./PickersLayout.js";
+export { default as usePickerLayout } from "./usePickerLayout.js";
+export { pickersLayoutClasses } from "./pickersLayoutClasses.js";

package/modern/PickersLayout/usePickerLayout.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { PickersActionBar } from '../PickersActionBar';
-import { getPickersLayoutUtilityClass } from './pickersLayoutClasses';
-import { PickersShortcuts } from '../PickersShortcuts';
+import { PickersActionBar } from "../PickersActionBar/index.js";
+import { getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
+import { PickersShortcuts } from "../PickersShortcuts/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;

package/modern/PickersSectionList/PickersSectionList.js

@@ -7,7 +7,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { getPickersSectionListUtilityClass, pickersSectionListClasses } from './pickersSectionListClasses';
+import { getPickersSectionListUtilityClass, pickersSectionListClasses } from "./pickersSectionListClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PickersSectionListRoot = styled('div', {
   name: 'MuiPickersSectionList',