@mui/x-date-pickers 7.15.0 → 7.17.0

package/modern/PickersCalendarHeader/PickersCalendarHeader.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 = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone", "format"],
@@ -10,13 +12,13 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import IconButton from '@mui/material/IconButton';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup';
-import { ArrowDropDownIcon } from '../icons';
-import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
-import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
-import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { PickersFadeTransitionGroup } from "../DateCalendar/PickersFadeTransitionGroup.js";
+import { ArrowDropDownIcon } from "../icons/index.js";
+import { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.js";
+import { usePreviousMonthDisabled, useNextMonthDisabled } from "../internals/hooks/date-helpers-hooks.js";
+import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/PickersCalendarHeader/index.js

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

package/modern/PickersDay/PickersDay.js

@@ -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", "day", "disabled", "disableHighlightToday", "disableMargin", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "outsideCurrentMonth", "selected", "showDaysOutsideCurrentMonth", "children", "today", "isFirstVisibleCell", "isLastVisibleCell"];
@@ -7,9 +9,9 @@ import clsx from 'clsx';
 import ButtonBase from '@mui/material/ButtonBase';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
-import { useUtils } from '../internals/hooks/useUtils';
-import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
-import { getPickersDayUtilityClass, pickersDayClasses } from './pickersDayClasses';
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
+import { getPickersDayUtilityClass, pickersDayClasses } from "./pickersDayClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/PickersDay/index.js

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

package/modern/PickersLayout/PickersLayout.js

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

package/modern/PickersLayout/index.js

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

package/modern/PickersLayout/usePickerLayout.js

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

package/modern/PickersSectionList/PickersSectionList.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "elements", "sectionListRef"];
@@ -7,7 +9,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { getPickersSectionListUtilityClass, pickersSectionListClasses } from './pickersSectionListClasses';
+import { getPickersSectionListUtilityClass, pickersSectionListClasses } from "./pickersSectionListClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PickersSectionListRoot = styled('div', {
   name: 'MuiPickersSectionList',

package/modern/PickersSectionList/index.js

@@ -1,2 +1,2 @@
-export { PickersSectionList as Unstable_PickersSectionList, PickersSectionListRoot as Unstable_PickersSectionListRoot, PickersSectionListSection as Unstable_PickersSectionListSection, PickersSectionListSectionSeparator as Unstable_PickersSectionListSectionSeparator, PickersSectionListSectionContent as Unstable_PickersSectionListSectionContent } from './PickersSectionList';
-export { getPickersSectionListUtilityClass, pickersSectionListClasses } from './pickersSectionListClasses';
+export { PickersSectionList as Unstable_PickersSectionList, PickersSectionListRoot as Unstable_PickersSectionListRoot, PickersSectionListSection as Unstable_PickersSectionListSection, PickersSectionListSectionSeparator as Unstable_PickersSectionListSectionSeparator, PickersSectionListSectionContent as Unstable_PickersSectionListSectionContent } from "./PickersSectionList.js";
+export { getPickersSectionListUtilityClass, pickersSectionListClasses } from "./pickersSectionListClasses.js";

package/modern/PickersShortcuts/PickersShortcuts.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 = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
@@ -7,7 +9,7 @@ import PropTypes from 'prop-types';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Chip from '@mui/material/Chip';
-import { VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:

package/modern/PickersShortcuts/index.js

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

package/modern/PickersTextField/PickersFilledInput/PickersFilledInput.js

@@ -8,9 +8,9 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
 import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { pickersFilledInputClasses, getPickersFilledInputUtilityClass } from './pickersFilledInputClasses';
-import { PickersInputBase } from '../PickersInputBase';
-import { PickersInputBaseRoot, PickersInputBaseSectionsContainer } from '../PickersInputBase/PickersInputBase';
+import { pickersFilledInputClasses, getPickersFilledInputUtilityClass } from "./pickersFilledInputClasses.js";
+import { PickersInputBase } from "../PickersInputBase/index.js";
+import { PickersInputBaseRoot, PickersInputBaseSectionsContainer } from "../PickersInputBase/PickersInputBase.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersFilledInput',

package/modern/PickersTextField/PickersFilledInput/index.js

@@ -1,2 +1,2 @@
-export { PickersFilledInput } from './PickersFilledInput';
-export { getPickersFilledInputUtilityClass, pickersFilledInputClasses } from './pickersFilledInputClasses';
+export { PickersFilledInput } from "./PickersFilledInput.js";
+export { getPickersFilledInputUtilityClass, pickersFilledInputClasses } from "./pickersFilledInputClasses.js";

package/modern/PickersTextField/PickersFilledInput/pickersFilledInputClasses.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { pickersInputBaseClasses } from '../PickersInputBase';
+import { pickersInputBaseClasses } from "../PickersInputBase/index.js";
 export function getPickersFilledInputUtilityClass(slot) {
   return generateUtilityClass('MuiPickersFilledInput', slot);
 }

package/modern/PickersTextField/PickersInput/PickersInput.js

@@ -7,9 +7,9 @@ import { useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { pickersInputClasses, getPickersInputUtilityClass } from './pickersInputClasses';
-import { PickersInputBase } from '../PickersInputBase';
-import { PickersInputBaseRoot } from '../PickersInputBase/PickersInputBase';
+import { pickersInputClasses, getPickersInputUtilityClass } from "./pickersInputClasses.js";
+import { PickersInputBase } from "../PickersInputBase/index.js";
+import { PickersInputBaseRoot } from "../PickersInputBase/PickersInputBase.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersInput',

package/modern/PickersTextField/PickersInput/index.js

@@ -1,2 +1,2 @@
-export { PickersInput } from './PickersInput';
-export { getPickersInputUtilityClass, pickersInputClasses } from './pickersInputClasses';
+export { PickersInput } from "./PickersInput.js";
+export { getPickersInputUtilityClass, pickersInputClasses } from "./pickersInputClasses.js";

package/modern/PickersTextField/PickersInput/pickersInputClasses.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { pickersInputBaseClasses } from '../PickersInputBase';
+import { pickersInputBaseClasses } from "../PickersInputBase/index.js";
 export function getPickersInputUtilityClass(slot) {
   return generateUtilityClass('MuiPickersFilledInput', slot);
 }

package/modern/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -12,8 +12,8 @@ import capitalize from '@mui/utils/capitalize';
 import useSlotProps from '@mui/utils/useSlotProps';
 import visuallyHidden from '@mui/utils/visuallyHidden';
 import { useRtl } from '@mui/system/RtlProvider';
-import { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from './pickersInputBaseClasses';
-import { Unstable_PickersSectionList as PickersSectionList, Unstable_PickersSectionListRoot as PickersSectionListRoot, Unstable_PickersSectionListSection as PickersSectionListSection, Unstable_PickersSectionListSectionSeparator as PickersSectionListSectionSeparator, Unstable_PickersSectionListSectionContent as PickersSectionListSectionContent } from '../../PickersSectionList';
+import { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from "./pickersInputBaseClasses.js";
+import { Unstable_PickersSectionList as PickersSectionList, Unstable_PickersSectionListRoot as PickersSectionListRoot, Unstable_PickersSectionListSection as PickersSectionListSection, Unstable_PickersSectionListSectionSeparator as PickersSectionListSectionSeparator, Unstable_PickersSectionListSectionContent as PickersSectionListSectionContent } from "../../PickersSectionList/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const round = value => Math.round(value * 1e5) / 1e5;
 export const PickersInputBaseRoot = styled('div', {

package/modern/PickersTextField/PickersInputBase/index.js

@@ -1,2 +1,2 @@
-export { PickersInputBase } from './PickersInputBase';
-export { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from './pickersInputBaseClasses';
+export { PickersInputBase } from "./PickersInputBase.js";
+export { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from "./pickersInputBaseClasses.js";

package/modern/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -7,10 +7,10 @@ import { useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { pickersOutlinedInputClasses, getPickersOutlinedInputUtilityClass } from './pickersOutlinedInputClasses';
-import Outline from './Outline';
-import { PickersInputBase } from '../PickersInputBase';
-import { PickersInputBaseRoot, PickersInputBaseSectionsContainer } from '../PickersInputBase/PickersInputBase';
+import { pickersOutlinedInputClasses, getPickersOutlinedInputUtilityClass } from "./pickersOutlinedInputClasses.js";
+import Outline from "./Outline.js";
+import { PickersInputBase } from "../PickersInputBase/index.js";
+import { PickersInputBaseRoot, PickersInputBaseSectionsContainer } from "../PickersInputBase/PickersInputBase.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersOutlinedInput',

package/modern/PickersTextField/PickersOutlinedInput/index.js

@@ -1,2 +1,2 @@
-export { PickersOutlinedInput } from './PickersOutlinedInput';
-export { getPickersOutlinedInputUtilityClass, pickersOutlinedInputClasses } from './pickersOutlinedInputClasses';
+export { PickersOutlinedInput } from "./PickersOutlinedInput.js";
+export { getPickersOutlinedInputUtilityClass, pickersOutlinedInputClasses } from "./pickersOutlinedInputClasses.js";

package/modern/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { pickersInputBaseClasses } from '../PickersInputBase';
+import { pickersInputBaseClasses } from "../PickersInputBase/index.js";
 export function getPickersOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiPickersOutlinedInput', slot);
 }

package/modern/PickersTextField/PickersTextField.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 = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
@@ -12,10 +14,10 @@ import useId from '@mui/utils/useId';
 import InputLabel from '@mui/material/InputLabel';
 import FormHelperText from '@mui/material/FormHelperText';
 import FormControl from '@mui/material/FormControl';
-import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
-import { PickersOutlinedInput } from './PickersOutlinedInput';
-import { PickersFilledInput } from './PickersFilledInput';
-import { PickersInput } from './PickersInput';
+import { getPickersTextFieldUtilityClass } from "./pickersTextFieldClasses.js";
+import { PickersOutlinedInput } from "./PickersOutlinedInput/index.js";
+import { PickersFilledInput } from "./PickersFilledInput/index.js";
+import { PickersInput } from "./PickersInput/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const VARIANT_COMPONENT = {
   standard: PickersInput,

package/modern/PickersTextField/index.js

@@ -1,6 +1,6 @@
-export { PickersTextField } from './PickersTextField';
-export { pickersTextFieldClasses, getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
-export * from './PickersInput';
-export * from './PickersFilledInput';
-export * from './PickersOutlinedInput';
-export * from './PickersInputBase';
+export { PickersTextField } from "./PickersTextField.js";
+export { pickersTextFieldClasses, getPickersTextFieldUtilityClass } from "./pickersTextFieldClasses.js";
+export * from "./PickersInput/index.js";
+export * from "./PickersFilledInput/index.js";
+export * from "./PickersOutlinedInput/index.js";
+export * from "./PickersInputBase/index.js";

package/modern/StaticDatePicker/StaticDatePicker.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
-import { renderDateViewCalendar } from '../dateViewRenderers';
-import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateDate } from '../internals/utils/validation/validateDate';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { useDatePickerDefaultizedProps } from "../DatePicker/shared.js";
+import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
+import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
+import { validateDate } from "../validation/index.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 /**
  * Demos:
  *
@@ -134,16 +136,16 @@ StaticDatePicker.propTypes = {
   monthsPerRow: PropTypes.oneOf([3, 4]),
   /**
    * 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.
    */
@@ -155,13 +157,13 @@ StaticDatePicker.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/StaticDatePicker/index.js

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

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -1,12 +1,14 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
-import { renderTimeViewClock } from '../timeViewRenderers';
-import { renderDateViewCalendar } from '../dateViewRenderers';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateDateTime } from '../internals/utils/validation/validateDateTime';
+import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
+import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
+import { validateDateTime } from "../validation/index.js";
 /**
  * Demos:
  *
@@ -182,16 +184,16 @@ StaticDateTimePicker.propTypes = {
   monthsPerRow: PropTypes.oneOf([3, 4]),
   /**
    * 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.
    */
@@ -203,13 +205,13 @@ StaticDateTimePicker.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/StaticDateTimePicker/index.js

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

package/modern/StaticTimePicker/StaticTimePicker.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { renderTimeViewClock } from '../timeViewRenderers';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateTime } from '../internals/utils/validation/validateTime';
+import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
+import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
+import { validateTime } from "../validation/index.js";
 /**
  * Demos:
  *
@@ -124,16 +126,16 @@ StaticTimePicker.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * 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.
    */
@@ -145,13 +147,13 @@ StaticTimePicker.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/StaticTimePicker/index.js

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

package/modern/TimeClock/Clock.js

@@ -5,12 +5,12 @@ import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses } from '@mui/utils';
-import { ClockPointer } from './ClockPointer';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils } from '../internals/hooks/useUtils';
-import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from './shared';
-import { getClockUtilityClass } from './clockClasses';
-import { formatMeridiem } from '../internals/utils/date-utils';
+import { ClockPointer } from "./ClockPointer.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from "./shared.js";
+import { getClockUtilityClass } from "./clockClasses.js";
+import { formatMeridiem } from "../internals/utils/date-utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -308,7 +308,7 @@ export function Clock(inProps) {
         })]
       }), /*#__PURE__*/_jsx(ClockWrapper, {
         "aria-activedescendant": selectedId,
-        "aria-label": translations.clockLabelText(type, value, utils),
+        "aria-label": translations.clockLabelText(type, value, utils, value == null ? null : utils.format(value, 'fullTime')),
         ref: listboxRef,
         role: "listbox",
         onKeyDown: handleKeyDown,

package/modern/TimeClock/ClockNumber.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
-import { getClockNumberUtilityClass, clockNumberClasses } from './clockNumberClasses';
+import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from "./shared.js";
+import { getClockNumberUtilityClass, clockNumberClasses } from "./clockNumberClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/TimeClock/ClockNumbers.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ClockNumber } from './ClockNumber';
+import { ClockNumber } from "./ClockNumber.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -36,7 +36,7 @@ export const getHourNumbers = ({
     const inner = !ampm && (hour === 0 || hour > 12);
     label = utils.formatNumber(label);
     const selected = isSelected(hour);
-    hourNumbers.push( /*#__PURE__*/_jsx(ClockNumber, {
+    hourNumbers.push(/*#__PURE__*/_jsx(ClockNumber, {
       id: selected ? selectedId : undefined,
       index: hour,
       inner: inner,

package/modern/TimeClock/ClockPointer.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
-import { getClockPointerUtilityClass } from './clockPointerClasses';
+import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from "./shared.js";
+import { getClockPointerUtilityClass } from "./clockPointerClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {