@mui/x-date-pickers 7.15.0 → 7.16.0

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.15.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) {

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useUtils } from '../useUtils';
-import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions, applyLocalizedDigits, removeLocalizedDigits, isStringNumber } from './useField.utils';
+import { useUtils } from "../useUtils.js";
+import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions, applyLocalizedDigits, removeLocalizedDigits, isStringNumber } from "./useField.utils.js";
 
 /**
  * The letter editing and the numeric editing each define a `CharacterEditingApplier`.

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

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import { useRtl } from '@mui/system/RtlProvider';
-import { usePickersTranslations } from '../../../hooks/usePickersTranslations';
-import { useUtils, useLocalizationContext } from '../useUtils';
-import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from './useField.utils';
-import { buildSectionsFromFormat } from './buildSectionsFromFormat';
-import { useValueWithTimezone } from '../useValueWithTimezone';
-import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
+import { usePickersTranslations } from "../../../hooks/usePickersTranslations.js";
+import { useUtils, useLocalizationContext } from "../useUtils.js";
+import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from "./useField.utils.js";
+import { buildSectionsFromFormat } from "./buildSectionsFromFormat.js";
+import { useValueWithTimezone } from "../useValueWithTimezone.js";
+import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
 export const useFieldState = params => {
   const utils = useUtils();
   const translations = usePickersTranslations();

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

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
-import { getActiveElement } from '../../utils/utils';
-import { getSectionVisibleValue, isAndroid } from './useField.utils';
+import { getActiveElement } from "../../utils/utils.js";
+import { getSectionVisibleValue, isAndroid } from "./useField.utils.js";
 const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl) => {
   let position = 0;

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

@@ -3,10 +3,10 @@ import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useId from '@mui/utils/useId';
-import { getSectionValueNow, getSectionValueText, parseSelectedSections } from './useField.utils';
-import { getActiveElement } from '../../utils/utils';
-import { usePickersTranslations } from '../../../hooks/usePickersTranslations';
-import { useUtils } from '../useUtils';
+import { getSectionValueNow, getSectionValueText, parseSelectedSections } from "./useField.utils.js";
+import { getActiveElement } from "../../utils/utils.js";
+import { usePickersTranslations } from "../../../hooks/usePickersTranslations.js";
+import { useUtils } from "../useUtils.js";
 export const useFieldV7TextField = params => {
   const {
     internalProps: {

package/modern/internals/hooks/useIsLandscape.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { arrayIncludes } from '../utils/utils';
+import { arrayIncludes } from "../utils/utils.js";
 function getOrientation() {
   if (typeof window === 'undefined') {
     return 'portrait';

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

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

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -5,12 +5,12 @@ import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
-import { PickersModalDialog } from '../../components/PickersModalDialog';
-import { usePicker } from '../usePicker';
-import { onSpaceOrEnter } from '../../utils/utils';
-import { useUtils } from '../useUtils';
-import { LocalizationProvider } from '../../../LocalizationProvider';
-import { PickersLayout } from '../../../PickersLayout';
+import { PickersModalDialog } from "../../components/PickersModalDialog.js";
+import { usePicker } from "../usePicker/index.js";
+import { onSpaceOrEnter } from "../../utils/utils.js";
+import { useUtils } from "../useUtils.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 mobile pickers:

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

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

package/modern/internals/hooks/usePicker/usePicker.js

@@ -1,7 +1,7 @@
-import { usePickerValue } from './usePickerValue';
-import { usePickerViews } from './usePickerViews';
-import { usePickerLayoutProps } from './usePickerLayoutProps';
-import { warnOnce } from '../../utils/warning';
+import { usePickerValue } from "./usePickerValue.js";
+import { usePickerViews } from "./usePickerViews.js";
+import { usePickerLayoutProps } from "./usePickerLayoutProps.js";
+import { warnOnce } from "../../utils/warning.js";
 export const usePicker = ({
   props,
   valueManager,

package/modern/internals/hooks/usePicker/usePickerLayoutProps.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useRtl } from '@mui/system/RtlProvider';
-import { useIsLandscape } from '../useIsLandscape';
+import { useIsLandscape } from "../useIsLandscape.js";
 
 /**
  * Props used to create the layout of the views.

package/modern/internals/hooks/usePicker/usePickerValue.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useOpenState } from '../useOpenState';
-import { useLocalizationContext, useUtils } from '../useUtils';
-import { useValidation } from '../useValidation';
-import { useValueWithTimezone } from '../useValueWithTimezone';
+import { useOpenState } from "../useOpenState.js";
+import { useLocalizationContext, useUtils } from "../useUtils.js";
+import { useValidation } from "../useValidation.js";
+import { useValueWithTimezone } from "../useValueWithTimezone.js";
 
 /**
  * Decide if the new value should be published

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -4,8 +4,8 @@ const _excluded = ["className", "sx"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useViews } from '../useViews';
-import { isTimeView } from '../../utils/time-utils';
+import { useViews } from "../useViews.js";
+import { isTimeView } from "../../utils/time-utils.js";
 
 /**
  * Props used to handle the views that are common to all pickers.

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

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

package/modern/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -4,10 +4,10 @@ const _excluded = ["props", "ref"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { usePicker } from '../usePicker';
-import { LocalizationProvider } from '../../../LocalizationProvider';
-import { PickersLayout } from '../../../PickersLayout';
-import { DIALOG_WIDTH } from '../../constants/dimensions';
+import { usePicker } from "../usePicker/index.js";
+import { LocalizationProvider } from "../../../LocalizationProvider/index.js";
+import { PickersLayout } from "../../../PickersLayout/index.js";
+import { DIALOG_WIDTH } from "../../constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout)(({
   theme