@mui/x-date-pickers 7.15.0 → 7.17.0

package/modern/DatePicker/DatePicker.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 { DesktopDatePicker } from '../DesktopDatePicker';
-import { MobileDatePicker } from '../MobileDatePicker';
-import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils';
+import { DesktopDatePicker } from "../DesktopDatePicker/index.js";
+import { MobileDatePicker } from "../MobileDatePicker/index.js";
+import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "../internals/utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -168,16 +170,16 @@ process.env.NODE_ENV !== "production" ? DatePicker.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.
    */
@@ -188,13 +190,13 @@ process.env.NODE_ENV !== "production" ? DatePicker.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/DatePicker/DatePickerToolbar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "onViewChange", "view"];
@@ -7,11 +9,11 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
-import { resolveDateFormat } from '../internals/utils/date-utils';
+import { PickersToolbar } from "../internals/components/PickersToolbar.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { getDatePickerToolbarUtilityClass } from "./datePickerToolbarClasses.js";
+import { resolveDateFormat } from "../internals/utils/date-utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/DatePicker/index.js

@@ -1,3 +1,3 @@
-export { DatePicker } from './DatePicker';
-export { DatePickerToolbar } from './DatePickerToolbar';
-export { datePickerToolbarClasses } from './datePickerToolbarClasses';
+export { DatePicker } from "./DatePicker.js";
+export { DatePickerToolbar } from "./DatePickerToolbar.js";
+export { datePickerToolbarClasses } from "./datePickerToolbarClasses.js";

package/modern/DatePicker/shared.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
-import { applyDefaultViewProps } from '../internals/utils/views';
-import { applyDefaultDate } from '../internals/utils/date-utils';
-import { DatePickerToolbar } from './DatePickerToolbar';
+import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
+import { applyDefaultViewProps } from "../internals/utils/views.js";
+import { applyDefaultDate } from "../internals/utils/date-utils.js";
+import { DatePickerToolbar } from "./DatePickerToolbar.js";
 export function useDatePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();

package/modern/DateTimeField/DateTimeField.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 { useDateTimeField } from './useDateTimeField';
-import { useClearableField } from '../hooks';
-import { PickersTextField } from '../PickersTextField';
-import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps';
+import { useDateTimeField } from "./useDateTimeField.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:
@@ -222,8 +224,8 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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.
    */
@@ -233,11 +235,13 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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/DateTimeField/index.js

@@ -1,2 +1,2 @@
-export { DateTimeField } from './DateTimeField';
-export { useDateTimeField as unstable_useDateTimeField } from './useDateTimeField';
+export { DateTimeField } from "./DateTimeField.js";
+export { useDateTimeField as unstable_useDateTimeField } from "./useDateTimeField.js";

package/modern/DateTimeField/useDateTimeField.js

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

package/modern/DateTimePicker/DateTimePicker.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 { DesktopDateTimePicker } from '../DesktopDateTimePicker';
-import { MobileDateTimePicker } from '../MobileDateTimePicker';
-import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils';
+import { DesktopDateTimePicker } from "../DesktopDateTimePicker/index.js";
+import { MobileDateTimePicker } from "../MobileDateTimePicker/index.js";
+import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "../internals/utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -206,16 +208,16 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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.
    */
@@ -226,13 +228,13 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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/DateTimePicker/DateTimePickerTabs.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -5,10 +7,10 @@ import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { TimeIcon, DateRangeIcon } from '../icons';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { getDateTimePickerTabsUtilityClass } from './dateTimePickerTabsClasses';
-import { isDatePickerView } from '../internals/utils/date-utils';
+import { TimeIcon, DateRangeIcon } from "../icons/index.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { getDateTimePickerTabsUtilityClass } from "./dateTimePickerTabsClasses.js";
+import { isDatePickerView } from "../internals/utils/date-utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const viewToTab = view => {
   if (isDatePickerView(view)) {

package/modern/DateTimePicker/DateTimePickerToolbar.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", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant", "toolbarTitle", "className"];
@@ -7,17 +9,17 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
-import { PickersToolbarText } from '../internals/components/PickersToolbarText';
-import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } from './dateTimePickerToolbarClasses';
-import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
-import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
-import { formatMeridiem } from '../internals/utils/date-utils';
-import { pickersToolbarTextClasses } from '../internals/components/pickersToolbarTextClasses';
-import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
+import { PickersToolbarText } from "../internals/components/PickersToolbarText.js";
+import { PickersToolbar } from "../internals/components/PickersToolbar.js";
+import { PickersToolbarButton } from "../internals/components/PickersToolbarButton.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } from "./dateTimePickerToolbarClasses.js";
+import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
+import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.js";
+import { formatMeridiem } from "../internals/utils/date-utils.js";
+import { pickersToolbarTextClasses } from "../internals/components/pickersToolbarTextClasses.js";
+import { pickersToolbarClasses } from "../internals/components/pickersToolbarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/DateTimePicker/index.js

@@ -1,5 +1,5 @@
-export { DateTimePicker } from './DateTimePicker';
-export { DateTimePickerTabs } from './DateTimePickerTabs';
-export { dateTimePickerTabsClasses } from './dateTimePickerTabsClasses';
-export { DateTimePickerToolbar } from './DateTimePickerToolbar';
-export { dateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';
+export { DateTimePicker } from "./DateTimePicker.js";
+export { DateTimePickerTabs } from "./DateTimePickerTabs.js";
+export { dateTimePickerTabsClasses } from "./dateTimePickerTabsClasses.js";
+export { DateTimePickerToolbar } from "./DateTimePickerToolbar.js";
+export { dateTimePickerToolbarClasses } from "./dateTimePickerToolbarClasses.js";

package/modern/DateTimePicker/shared.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
-import { applyDefaultDate } from '../internals/utils/date-utils';
-import { DateTimePickerTabs } from './DateTimePickerTabs';
-import { DateTimePickerToolbar } from './DateTimePickerToolbar';
-import { applyDefaultViewProps } from '../internals/utils/views';
+import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
+import { applyDefaultDate } from "../internals/utils/date-utils.js";
+import { DateTimePickerTabs } from "./DateTimePickerTabs.js";
+import { DateTimePickerToolbar } from "./DateTimePickerToolbar.js";
+import { applyDefaultViewProps } from "../internals/utils/views.js";
 export function useDateTimePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();

package/modern/DayCalendarSkeleton/DayCalendarSkeleton.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 = ["className"];
@@ -7,8 +9,8 @@ import clsx from 'clsx';
 import Skeleton from '@mui/material/Skeleton';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
-import { getDayCalendarSkeletonUtilityClass } from './dayCalendarSkeletonClasses';
+import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
+import { getDayCalendarSkeletonUtilityClass } from "./dayCalendarSkeletonClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/DayCalendarSkeleton/index.js

@@ -1,2 +1,2 @@
-export { DayCalendarSkeleton } from './DayCalendarSkeleton';
-export { dayCalendarSkeletonClasses, getDayCalendarSkeletonUtilityClass } from './dayCalendarSkeletonClasses';
+export { DayCalendarSkeleton } from "./DayCalendarSkeleton.js";
+export { dayCalendarSkeletonClasses, getDayCalendarSkeletonUtilityClass } from "./dayCalendarSkeletonClasses.js";

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -1,19 +1,21 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { validateDate } from '../internals/utils/validation/validateDate';
-import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
-import { CalendarIcon } from '../icons';
-import { DateField } from '../DateField';
-import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
-import { renderDateViewCalendar } from '../dateViewRenderers';
-import { resolveDateFormat } from '../internals/utils/date-utils';
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { useDatePickerDefaultizedProps } from "../DatePicker/shared.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { validateDate, extractValidationProps } from "../validation/index.js";
+import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
+import { CalendarIcon } from "../icons/index.js";
+import { DateField } from "../DateField/index.js";
+import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
+import { resolveDateFormat } from "../internals/utils/date-utils.js";
+import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -60,7 +62,12 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
+    getOpenDialogAriaText: buildGetOpenDialogAriaText({
+      utils,
+      formatKey: 'fullDate',
+      contextTranslation: translations.openDatePickerDialogue,
+      propsTranslation: props.localeText?.openDatePickerDialogue
+    }),
     validator: validateDate
   });
   return renderPicker();
@@ -184,16 +191,16 @@ DesktopDatePicker.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.
    */
@@ -204,13 +211,13 @@ DesktopDatePicker.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/DesktopDatePicker/index.js

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

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.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 = ["openTo", "focusedView", "timeViewsCount"];
@@ -6,24 +8,24 @@ import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
 import Divider from '@mui/material/Divider';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { DateTimeField } from '../DateTimeField';
-import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
-import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { validateDateTime } from '../internals/utils/validation/validateDateTime';
-import { CalendarIcon } from '../icons';
-import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
-import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
-import { resolveDateTimeFormat, resolveTimeViewsResponse } from '../internals/utils/date-time-utils';
-import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
-import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '../MultiSectionDigitalClock';
-import { digitalClockClasses } from '../DigitalClock';
-import { DesktopDateTimePickerLayout } from './DesktopDateTimePickerLayout';
-import { VIEW_HEIGHT } from '../internals/constants/dimensions';
-import { isInternalTimeView } from '../internals/utils/time-utils';
-import { isDatePickerView } from '../internals/utils/date-utils';
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { DateTimeField } from "../DateTimeField/index.js";
+import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
+import { renderDateViewCalendar } from "../dateViewRenderers/dateViewRenderers.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { validateDateTime, extractValidationProps } from "../validation/index.js";
+import { CalendarIcon } from "../icons/index.js";
+import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
+import { resolveDateTimeFormat, resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
+import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
+import { digitalClockClasses } from "../DigitalClock/index.js";
+import { DesktopDateTimePickerLayout } from "./DesktopDateTimePickerLayout.js";
+import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { isInternalTimeView } from "../internals/utils/time-utils.js";
+import { isDatePickerView } from "../internals/utils/date-utils.js";
+import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
   const {
@@ -146,7 +148,12 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
+    getOpenDialogAriaText: buildGetOpenDialogAriaText({
+      utils,
+      formatKey: 'fullDate',
+      contextTranslation: translations.openDatePickerDialogue,
+      propsTranslation: props.localeText?.openDatePickerDialogue
+    }),
     validator: validateDateTime,
     rendererInterceptor
   });
@@ -309,16 +316,16 @@ DesktopDateTimePicker.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.
    */
@@ -329,13 +336,13 @@ DesktopDateTimePicker.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/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useRtl } from '@mui/system/RtlProvider';
 import Divider from '@mui/material/Divider';
-import { PickersLayoutContentWrapper, PickersLayoutRoot, pickersLayoutClasses, usePickerLayout } from '../PickersLayout';
+import { PickersLayoutContentWrapper, PickersLayoutRoot, pickersLayoutClasses, usePickerLayout } from "../PickersLayout/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.

package/modern/DesktopDateTimePicker/index.js

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