@mui/x-date-pickers 7.14.0 → 7.16.0

package/modern/TimePicker/TimePicker.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
 import { refType } from '@mui/utils';
-import { DesktopTimePicker } from '../DesktopTimePicker';
-import { MobileTimePicker } from '../MobileTimePicker';
-import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils';
+import { DesktopTimePicker } from "../DesktopTimePicker/index.js";
+import { MobileTimePicker } from "../MobileTimePicker/index.js";
+import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "../internals/utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -156,16 +156,16 @@ process.env.NODE_ENV !== "production" ? TimePicker.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.
    */
@@ -176,13 +176,13 @@ process.env.NODE_ENV !== "production" ? TimePicker.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/TimePicker/TimePickerToolbar.js

@@ -7,15 +7,15 @@ import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { PickersToolbarText } from '../internals/components/PickersToolbarText';
-import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
-import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { arrayIncludes } from '../internals/utils/utils';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
-import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from './timePickerToolbarClasses';
-import { formatMeridiem } from '../internals/utils/date-utils';
+import { PickersToolbarText } from "../internals/components/PickersToolbarText.js";
+import { PickersToolbarButton } from "../internals/components/PickersToolbarButton.js";
+import { PickersToolbar } from "../internals/components/PickersToolbar.js";
+import { arrayIncludes } from "../internals/utils/utils.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
+import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
+import { formatMeridiem } from "../internals/utils/date-utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/TimePicker/index.js

@@ -1,3 +1,3 @@
-export { TimePicker } from './TimePicker';
-export { TimePickerToolbar } from './TimePickerToolbar';
-export { timePickerToolbarClasses } from './timePickerToolbarClasses';
+export { TimePicker } from "./TimePicker.js";
+export { TimePickerToolbar } from "./TimePickerToolbar.js";
+export { timePickerToolbarClasses } from "./timePickerToolbarClasses.js";

package/modern/TimePicker/shared.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useUtils } from '../internals/hooks/useUtils';
-import { TimePickerToolbar } from './TimePickerToolbar';
-import { applyDefaultViewProps } from '../internals/utils/views';
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { TimePickerToolbar } from "./TimePickerToolbar.js";
+import { applyDefaultViewProps } from "../internals/utils/views.js";
 export function useTimePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const themeProps = useThemeProps({

package/modern/YearCalendar/PickersYear.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 { getPickersYearUtilityClass, pickersYearClasses } from './pickersYearClasses';
+import { getPickersYearUtilityClass, pickersYearClasses } from "./pickersYearClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/YearCalendar/YearCalendar.js

@@ -7,14 +7,14 @@ import clsx from 'clsx';
 import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_useControlled as useControlled, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { PickersYear } from './PickersYear';
-import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
-import { getYearCalendarUtilityClass } from './yearCalendarClasses';
-import { applyDefaultDate } 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, MAX_CALENDAR_HEIGHT } from '../internals/constants/dimensions';
+import { PickersYear } from "./PickersYear.js";
+import { useUtils, useNow, useDefaultDates } from "../internals/hooks/useUtils.js";
+import { getYearCalendarUtilityClass } from "./yearCalendarClasses.js";
+import { applyDefaultDate } 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, MAX_CALENDAR_HEIGHT } from "../internals/constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/YearCalendar/index.js

@@ -1,3 +1,3 @@
-export { YearCalendar } from './YearCalendar';
-export { yearCalendarClasses, getYearCalendarUtilityClass } from './yearCalendarClasses';
-export { pickersYearClasses } from './pickersYearClasses';
+export { YearCalendar } from "./YearCalendar.js";
+export { yearCalendarClasses, getYearCalendarUtilityClass } from "./yearCalendarClasses.js";
+export { pickersYearClasses } from "./pickersYearClasses.js";

package/modern/dateViewRenderers/dateViewRenderers.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { DateCalendar } from '../DateCalendar';
-import { isDatePickerView } from '../internals/utils/date-utils';
+import { DateCalendar } from "../DateCalendar/index.js";
+import { isDatePickerView } from "../internals/utils/date-utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const renderDateViewCalendar = ({
   view,

package/modern/dateViewRenderers/index.js

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

package/modern/hooks/index.js

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

package/modern/hooks/useClearableField.js

@@ -6,8 +6,8 @@ import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
-import { ClearIcon } from '../icons';
-import { usePickersTranslations } from './usePickersTranslations';
+import { ClearIcon } from "../icons/index.js";
+import { usePickersTranslations } from "./usePickersTranslations.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useClearableField = props => {
   const translations = usePickersTranslations();

package/modern/hooks/usePickersTranslations.js

@@ -1,2 +1,2 @@
-import { useLocalizationContext } from '../internals/hooks/useUtils';
+import { useLocalizationContext } from "../internals/hooks/useUtils.js";
 export const usePickersTranslations = () => useLocalizationContext().localeText;

package/modern/icons/index.js

@@ -5,35 +5,35 @@ import * as React from 'react';
  * @ignore - internal component.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowDropDownIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
 /**
  * @ignore - internal component.
  */
-export const ArrowLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowLeftIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
 }), 'ArrowLeft');
 
 /**
  * @ignore - internal component.
  */
-export const ArrowRightIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowRightIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
 }), 'ArrowRight');
 
 /**
  * @ignore - internal component.
  */
-export const CalendarIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const CalendarIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
 }), 'Calendar');
 
 /**
  * @ignore - internal component.
  */
-export const ClockIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export const ClockIcon = createSvgIcon(/*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {
@@ -44,14 +44,14 @@ export const ClockIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
 /**
  * @ignore - internal component.
  */
-export const DateRangeIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const DateRangeIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
 }), 'DateRange');
 
 /**
  * @ignore - internal component.
  */
-export const TimeIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export const TimeIcon = createSvgIcon(/*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {
@@ -62,6 +62,6 @@ export const TimeIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
 /**
  * @ignore - internal component.
  */
-export const ClearIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ClearIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), 'Clear');

package/modern/index.js

@@ -1,59 +1,59 @@
 /**
- * @mui/x-date-pickers v7.14.0
+ * @mui/x-date-pickers v7.16.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 // Clocks
-export * from './TimeClock';
-export * from './DigitalClock';
-export * from './MultiSectionDigitalClock';
-export * from './LocalizationProvider';
-export * from './PickersDay';
-export * from './locales/utils/pickersLocaleTextApi';
+export * from "./TimeClock/index.js";
+export * from "./DigitalClock/index.js";
+export * from "./MultiSectionDigitalClock/index.js";
+export * from "./LocalizationProvider/index.js";
+export * from "./PickersDay/index.js";
+export * from "./locales/utils/pickersLocaleTextApi.js";
 
 // Fields
-export * from './DateField';
-export * from './TimeField';
-export * from './DateTimeField';
+export * from "./DateField/index.js";
+export * from "./TimeField/index.js";
+export * from "./DateTimeField/index.js";
 
 // Calendars
-export * from './DateCalendar';
-export * from './MonthCalendar';
-export * from './YearCalendar';
-export * from './DayCalendarSkeleton';
+export * from "./DateCalendar/index.js";
+export * from "./MonthCalendar/index.js";
+export * from "./YearCalendar/index.js";
+export * from "./DayCalendarSkeleton/index.js";
 
 // New Pickers
-export * from './DatePicker';
-export * from './DesktopDatePicker';
-export * from './MobileDatePicker';
-export * from './StaticDatePicker';
-export * from './TimePicker';
-export * from './DesktopTimePicker';
-export * from './MobileTimePicker';
-export * from './StaticTimePicker';
-export * from './DateTimePicker';
-export * from './DesktopDateTimePicker';
-export * from './MobileDateTimePicker';
-export * from './StaticDateTimePicker';
+export * from "./DatePicker/index.js";
+export * from "./DesktopDatePicker/index.js";
+export * from "./MobileDatePicker/index.js";
+export * from "./StaticDatePicker/index.js";
+export * from "./TimePicker/index.js";
+export * from "./DesktopTimePicker/index.js";
+export * from "./MobileTimePicker/index.js";
+export * from "./StaticTimePicker/index.js";
+export * from "./DateTimePicker/index.js";
+export * from "./DesktopDateTimePicker/index.js";
+export * from "./MobileDateTimePicker/index.js";
+export * from "./StaticDateTimePicker/index.js";
 
 // View renderers
-export * from './dateViewRenderers';
-export * from './timeViewRenderers';
+export * from "./dateViewRenderers/index.js";
+export * from "./timeViewRenderers/index.js";
 
 // Layout
-export * from './PickersLayout';
-export * from './PickersActionBar';
-export * from './PickersShortcuts';
+export * from "./PickersLayout/index.js";
+export * from "./PickersActionBar/index.js";
+export * from "./PickersShortcuts/index.js";
 
 // Other slots
-export * from './PickersCalendarHeader';
+export * from "./PickersCalendarHeader/index.js";
 
 // Field utilities
-export * from './PickersTextField';
-export * from './PickersSectionList';
-export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
-export * from './models';
-export * from './icons';
-export * from './hooks';
+export * from "./PickersTextField/index.js";
+export * from "./PickersSectionList/index.js";
+export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./internals/utils/utils.js";
+export * from "./models/index.js";
+export * from "./icons/index.js";
+export * from "./hooks/index.js";

package/modern/internals/components/PickerViewRoot/PickerViewRoot.js

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { DIALOG_WIDTH, VIEW_HEIGHT } from '../../constants/dimensions';
+import { DIALOG_WIDTH, VIEW_HEIGHT } from "../../constants/dimensions.js";
 export const PickerViewRoot = styled('div')({
   overflow: 'hidden',
   width: DIALOG_WIDTH,

package/modern/internals/components/PickerViewRoot/index.js

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

package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -11,8 +11,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import IconButton from '@mui/material/IconButton';
-import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons';
-import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
+import { ArrowLeftIcon, ArrowRightIcon } from "../../../icons/index.js";
+import { getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PickersArrowSwitcherRoot = styled('div', {
   name: 'MuiPickersArrowSwitcher',

package/modern/internals/components/PickersArrowSwitcher/index.js

@@ -1,2 +1,2 @@
-export { PickersArrowSwitcher } from './PickersArrowSwitcher';
-export { pickersArrowSwitcherClasses, getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
+export { PickersArrowSwitcher } from "./PickersArrowSwitcher.js";
+export { pickersArrowSwitcherClasses, getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.js";

package/modern/internals/components/PickersModalDialog.js

@@ -4,7 +4,7 @@ import DialogContent from '@mui/material/DialogContent';
 import Fade from '@mui/material/Fade';
 import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
 import { styled } from '@mui/material/styles';
-import { DIALOG_WIDTH } from '../constants/dimensions';
+import { DIALOG_WIDTH } from "../constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersModalDialogRoot = styled(MuiDialog)({
   [`& .${dialogClasses.container}`]: {

package/modern/internals/components/PickersPopper.js

@@ -10,9 +10,9 @@ import MuiPopper from '@mui/material/Popper';
 import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
 import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_ownerDocument as ownerDocument, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { getPickersPopperUtilityClass } from './pickersPopperClasses';
-import { getActiveElement } from '../utils/utils';
-import { useDefaultReduceAnimations } from '../hooks/useDefaultReduceAnimations';
+import { getPickersPopperUtilityClass } from "./pickersPopperClasses.js";
+import { getActiveElement } from "../utils/utils.js";
+import { useDefaultReduceAnimations } from "../hooks/useDefaultReduceAnimations.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/internals/components/PickersToolbar.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersToolbarUtilityClass } from './pickersToolbarClasses';
+import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/internals/components/PickersToolbarButton.js

@@ -6,8 +6,8 @@ import clsx from 'clsx';
 import Button from '@mui/material/Button';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { PickersToolbarText } from './PickersToolbarText';
-import { getPickersToolbarUtilityClass } from './pickersToolbarClasses';
+import { PickersToolbarText } from "./PickersToolbarText.js";
+import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/internals/components/PickersToolbarText.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from './pickersToolbarTextClasses';
+import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from "./pickersToolbarTextClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/internals/demo/DemoContainer.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import Stack, { stackClasses } from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { textFieldClasses } from '@mui/material/TextField';
-import { pickersTextFieldClasses } from '../../PickersTextField';
+import { pickersTextFieldClasses } from "../../PickersTextField/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getChildTypeFromChildName = childName => {
   if (childName.match(/^([A-Za-z]+)Range(Calendar|Clock)$/)) {
@@ -68,7 +68,7 @@ export function DemoItem(props) {
 }
 DemoItem.displayName = 'DemoItem';
 const isDemoItem = child => {
-  if ( /*#__PURE__*/React.isValidElement(child) && typeof child.type !== 'string') {
+  if (/*#__PURE__*/React.isValidElement(child) && typeof child.type !== 'string') {
     // @ts-ignore
     return child.type.displayName === 'DemoItem';
   }
@@ -165,7 +165,7 @@ export function DemoContainer(props) {
     spacing: spacing,
     sx: finalSx,
     children: React.Children.map(children, child => {
-      if ( /*#__PURE__*/React.isValidElement(child) && isDemoItem(child)) {
+      if (/*#__PURE__*/React.isValidElement(child) && isDemoItem(child)) {
         // Inject sx styles to the `DemoItem` if it is a direct child of `DemoContainer`.
         // @ts-ignore
         return /*#__PURE__*/React.cloneElement(child, {

package/modern/internals/demo/index.js

@@ -1 +1 @@
-export { DemoContainer, DemoItem } from './DemoContainer';
+export { DemoContainer, DemoItem } from "./DemoContainer.js";

package/modern/internals/hooks/date-helpers-hooks.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useUtils } from './useUtils';
-import { getMeridiem, convertToMeridiem } from '../utils/time-utils';
+import { useUtils } from "./useUtils.js";
+import { getMeridiem, convertToMeridiem } from "../utils/time-utils.js";
 export function useNextMonthDisabled(month, {
   disableFuture,
   maxDate,

package/modern/internals/hooks/defaultizedFieldProps.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { applyDefaultDate } from '../utils/date-utils';
-import { useUtils, useDefaultDates } from './useUtils';
+import { applyDefaultDate } from "../utils/date-utils.js";
+import { useUtils, useDefaultDates } from "./useUtils.js";
 export const useDefaultizedDateField = props => {
   const utils = useUtils();
   const defaultDates = useDefaultDates();

package/modern/internals/hooks/useClockReferenceDate.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { singleItemValueManager } from '../utils/valueManagers';
-import { getTodayDate } from '../utils/date-utils';
-import { SECTION_TYPE_GRANULARITY } from '../utils/getDefaultReferenceDate';
+import { singleItemValueManager } from "../utils/valueManagers.js";
+import { getTodayDate } from "../utils/date-utils.js";
+import { SECTION_TYPE_GRANULARITY } from "../utils/getDefaultReferenceDate.js";
 export const useClockReferenceDate = ({
   value,
   referenceDate: referenceDateProp,

package/modern/internals/hooks/useDesktopPicker/index.js

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

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -9,11 +9,11 @@ import MuiInputAdornment from '@mui/material/InputAdornment';
 import IconButton from '@mui/material/IconButton';
 import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
-import { PickersPopper } from '../../components/PickersPopper';
-import { useUtils } from '../useUtils';
-import { usePicker } from '../usePicker';
-import { LocalizationProvider } from '../../../LocalizationProvider';
-import { PickersLayout } from '../../../PickersLayout';
+import { PickersPopper } from "../../components/PickersPopper.js";
+import { useUtils } from "../useUtils.js";
+import { usePicker } from "../usePicker/index.js";
+import { LocalizationProvider } from "../../../LocalizationProvider/index.js";
+import { PickersLayout } from "../../../PickersLayout/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Hook managing all the single-date desktop pickers:
@@ -67,6 +67,11 @@ export const useDesktopPicker = _ref => {
     additionalViewProps: {},
     wrapperVariant: 'desktop'
   }));
+
+  // TODO v8: Apply this ownerState to all the slots in this hook.
+  const ownerStateV8 = {
+    open
+  };
   const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({
       elementType: InputAdornment,
@@ -91,6 +96,11 @@ export const useDesktopPicker = _ref => {
     }),
     openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
   const OpenPickerIcon = slots.openPickerIcon;
+  const openPickerIconProps = useSlotProps({
+    elementType: OpenPickerIcon,
+    externalSlotProps: innerSlotProps?.openPickerIcon,
+    ownerState: ownerStateV8
+  });
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
@@ -125,7 +135,7 @@ export const useDesktopPicker = _ref => {
     }, !props.disableOpenPicker && {
       [`${inputAdornmentProps.position}Adornment`]: /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
         children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
-          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, innerSlotProps?.openPickerIcon))
+          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
         }))
       }))
     });

package/modern/internals/hooks/useField/buildSectionsFromFormat.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { applyLocalizedDigits, cleanLeadingZeros, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, removeLocalizedDigits } from './useField.utils';
+import { applyLocalizedDigits, cleanLeadingZeros, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, removeLocalizedDigits } from "./useField.utils.js";
 const expandFormat = ({
   utils,
   format

package/modern/internals/hooks/useField/index.js

@@ -1,2 +1,2 @@
-export { useField } from './useField';
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from './useField.utils';
+export { useField } from "./useField.js";
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";

package/modern/internals/hooks/useField/useField.js

@@ -3,13 +3,13 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useValidation } from '../useValidation';
-import { useUtils } from '../useUtils';
-import { adjustSectionValue, getSectionOrder } from './useField.utils';
-import { useFieldState } from './useFieldState';
-import { useFieldCharacterEditing } from './useFieldCharacterEditing';
-import { useFieldV7TextField } from './useFieldV7TextField';
-import { useFieldV6TextField } from './useFieldV6TextField';
+import { useValidation } from "../useValidation.js";
+import { useUtils } from "../useUtils.js";
+import { adjustSectionValue, getSectionOrder } from "./useField.utils.js";
+import { useFieldState } from "./useFieldState.js";
+import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
+import { useFieldV7TextField } from "./useFieldV7TextField.js";
+import { useFieldV6TextField } from "./useFieldV6TextField.js";
 export const useField = params => {
   const utils = useUtils();
   const {

package/modern/internals/hooks/useField/useField.utils.js

@@ -1,4 +1,4 @@
-import { getMonthsInYear } from '../../utils/date-utils';
+import { getMonthsInYear } from "../../utils/date-utils.js";
 export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
   if (config == null) {