@mui/x-date-pickers 7.15.0 → 7.17.0

package/modern/TimeClock/TimeClock.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
@@ -6,19 +8,19 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
-import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
-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 { getTimeClockUtilityClass } from './timeClockClasses';
-import { Clock } from './Clock';
-import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
-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 { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.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 { getTimeClockUtilityClass } from "./timeClockClasses.js";
+import { Clock } from "./Clock.js";
+import { getHourNumbers, getMinutesNumbers } from "./ClockNumbers.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, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -383,7 +385,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.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/TimeClock/index.js

@@ -1,5 +1,5 @@
-export { TimeClock } from './TimeClock';
-export { clockClasses } from './clockClasses';
-export { clockNumberClasses } from './clockNumberClasses';
-export { timeClockClasses, getTimeClockUtilityClass } from './timeClockClasses';
-export { clockPointerClasses } from './clockPointerClasses';
+export { TimeClock } from "./TimeClock.js";
+export { clockClasses } from "./clockClasses.js";
+export { clockNumberClasses } from "./clockNumberClasses.js";
+export { timeClockClasses, getTimeClockUtilityClass } from "./timeClockClasses.js";
+export { clockPointerClasses } from "./clockPointerClasses.js";

package/modern/TimeField/TimeField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
@@ -7,10 +9,10 @@ import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
-import { useTimeField } from './useTimeField';
-import { useClearableField } from '../hooks';
-import { PickersTextField } from '../PickersTextField';
-import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps';
+import { useTimeField } from "./useTimeField.js";
+import { useClearableField } from "../hooks/index.js";
+import { PickersTextField } from "../PickersTextField/index.js";
+import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -204,8 +206,8 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   onBlur: PropTypes.func,
   /**
    * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
@@ -215,11 +217,13 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   onClear: PropTypes.func,
   /**
-   * Callback fired when the error associated to the current value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   onFocus: PropTypes.func,

package/modern/TimeField/index.js

@@ -1,2 +1,2 @@
-export { TimeField } from './TimeField';
-export { useTimeField as unstable_useTimeField } from './useTimeField';
+export { TimeField } from "./TimeField.js";
+export { useTimeField as unstable_useTimeField } from "./useTimeField.js";

package/modern/TimeField/useTimeField.js

@@ -1,14 +1,16 @@
-import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
-import { useField } from '../internals/hooks/useField';
-import { validateTime } from '../internals/utils/validation/validateTime';
-import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields';
-import { useDefaultizedTimeField } from '../internals/hooks/defaultizedFieldProps';
+'use client';
+
+import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { useField } from "../internals/hooks/useField/index.js";
+import { validateTime } from "../validation/index.js";
+import { useSplitFieldProps } from "../hooks/index.js";
+import { useDefaultizedTimeField } from "../internals/hooks/defaultizedFieldProps.js";
 export const useTimeField = inProps => {
   const props = useDefaultizedTimeField(inProps);
   const {
     forwardedProps,
     internalProps
-  } = splitFieldInternalAndForwardedProps(props, 'time');
+  } = useSplitFieldProps(props, 'time');
   return useField({
     forwardedProps,
     internalProps,

package/modern/TimePicker/TimePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["desktopModeMediaQuery"];
@@ -6,9 +8,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 +158,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 +178,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

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
@@ -7,15 +9,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

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
@@ -7,14 +9,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,3 @@
-export { useClearableField } from './useClearableField';
-export { usePickersTranslations } from './usePickersTranslations';
+export { useClearableField } from "./useClearableField.js";
+export { usePickersTranslations } from "./usePickersTranslations.js";
+export { useSplitFieldProps } from "./useSplitFieldProps.js";

package/modern/hooks/useClearableField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["clearable", "onClear", "InputProps", "sx", "slots", "slotProps"],
@@ -6,8 +8,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,4 @@
-import { useLocalizationContext } from '../internals/hooks/useUtils';
+'use client';
+
+import { useLocalizationContext } from "../internals/hooks/useUtils.js";
 export const usePickersTranslations = () => useLocalizationContext().localeText;

package/modern/hooks/useSplitFieldProps.js

@@ -0,0 +1,43 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator'];
+/**
+ * Split the props received by the field component into:
+ * - `internalProps` which are used by the various hooks called by the field component.
+ * - `forwardedProps` which are passed to the underlying component.
+ * Note that some forwarded props might be used by the hooks as well.
+ * For instance, hooks like `useDateField` need props like `autoFocus` to know how to behave.
+ * @template TProps, TValueType
+ * @param {TProps} props The props received by the field component.
+ * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
+ */
+export const useSplitFieldProps = (props, valueType) => {
+  return React.useMemo(() => {
+    const forwardedProps = _extends({}, props);
+    const internalProps = {};
+    const extractProp = propName => {
+      if (forwardedProps.hasOwnProperty(propName)) {
+        // @ts-ignore
+        internalProps[propName] = forwardedProps[propName];
+        delete forwardedProps[propName];
+      }
+    };
+    SHARED_FIELD_INTERNAL_PROP_NAMES.forEach(extractProp);
+    if (valueType === 'date') {
+      DATE_VALIDATION_PROP_NAMES.forEach(extractProp);
+    } else if (valueType === 'time') {
+      TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+    } else if (valueType === 'date-time') {
+      DATE_VALIDATION_PROP_NAMES.forEach(extractProp);
+      TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+      DATE_TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+    }
+    return {
+      forwardedProps,
+      internalProps
+    };
+  }, [props, valueType]);
+};

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,60 @@
 /**
- * @mui/x-date-pickers v7.15.0
+ * @mui/x-date-pickers v7.17.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";
+export * from "./validation/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}`]: {