@mui/x-date-pickers 7.15.0 → 7.17.0

package/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/StaticDatePicker/index.js

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

package/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/StaticDateTimePicker/index.js

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

package/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/StaticTimePicker/index.js

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

package/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/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/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/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 {

package/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/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/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/TimeField/TimeField.types.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { MakeOptional } from '../internals/models/helpers';
+import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
 import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
-import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps } from '../models';
+import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps, BaseSingleInputFieldProps } from '../models';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 export interface UseTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, ExportedUseClearableFieldProps {
     /**
@@ -13,6 +13,11 @@ export interface UseTimeFieldProps<TDate extends PickerValidDate, TEnableAccessi
      */
     ampm?: boolean;
 }
+/**
+ * Props the field can receive when used inside a time picker.
+ * (`TimePicker`, `DesktopTimePicker` or `MobileTimePicker` component).
+ */
+export type TimeFieldInPickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DefaultizedProps<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, TimeValidationError>;
 export type UseTimeFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
 export type TimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseTimeFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**

package/TimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { TimeField } from './TimeField';
 export { useTimeField as unstable_useTimeField } from './useTimeField';
-export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, } from './TimeField.types';
+export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, TimeFieldInPickerProps, } from './TimeField.types';

package/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/TimeField/useTimeField.d.ts

@@ -1,3 +1,3 @@
 import { UseTimeFieldProps } from './TimeField.types';
 import { PickerValidDate } from '../models';
-export declare const useTimeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals/hooks/useField").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, keyof UseTimeFieldProps<any, TEnableAccessibleFieldDOMStructure>>>;
+export declare const useTimeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals/hooks/useField").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "ampm" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps<any> | "dateSeparator">>;

package/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/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/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/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/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/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 {