@mui/x-date-pickers 7.16.0 → 7.17.0

package/PickersLayout/usePickerLayout.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';

package/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"];

package/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"],

package/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"];

package/StaticDatePicker/StaticDatePicker.js

@@ -1,10 +1,12 @@
+'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.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
-import { validateDate } from "../internals/utils/validation/validateDate.js";
+import { validateDate } from "../validation/index.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 /**
  * Demos:

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -6,7 +8,7 @@ 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 "../internals/utils/validation/validateDateTime.js";
+import { validateDateTime } from "../validation/index.js";
 /**
  * Demos:
  *

package/StaticTimePicker/StaticTimePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -5,7 +7,7 @@ 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 "../internals/utils/validation/validateTime.js";
+import { validateTime } from "../validation/index.js";
 /**
  * Demos:
  *

package/TimeClock/Clock.js

@@ -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/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"];

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"];

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/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 @@
+'use client';
+
 import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useField } from "../internals/hooks/useField/index.js";
-import { validateTime } from "../internals/utils/validation/validateTime.js";
-import { splitFieldInternalAndForwardedProps } from "../internals/utils/fields.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"];

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"];

package/YearCalendar/YearCalendar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];

package/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useClearableField } from './useClearableField';
 export type { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, UseClearableFieldResponse, } from './useClearableField';
 export { usePickersTranslations } from './usePickersTranslations';
+export { useSplitFieldProps } from './useSplitFieldProps';

package/hooks/index.js

@@ -1,2 +1,3 @@
 export { useClearableField } from "./useClearableField.js";
-export { usePickersTranslations } from "./usePickersTranslations.js";
+export { usePickersTranslations } from "./usePickersTranslations.js";
+export { useSplitFieldProps } from "./useSplitFieldProps.js";

package/hooks/useClearableField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["clearable", "onClear", "InputProps", "sx", "slots", "slotProps"],

package/hooks/usePickersTranslations.js

@@ -1,2 +1,4 @@
+'use client';
+
 import { useLocalizationContext } from "../internals/hooks/useUtils.js";
 export const usePickersTranslations = () => useLocalizationContext().localeText;

package/hooks/useSplitFieldProps.d.ts

@@ -0,0 +1,19 @@
+import { FieldValueType } from '../models';
+import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from '../validation/extractValidationProps';
+declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator"];
+type InternalPropNames<TValueType extends FieldValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
+/**
+ * Split the props received by the field component into:
+ * - `internalProps` which are used by the various hooks called by the field component.
+ * - `forwardedProps` which are passed to the underlying component.
+ * Note that some forwarded props might be used by the hooks as well.
+ * For instance, hooks like `useDateField` need props like `autoFocus` to know how to behave.
+ * @template TProps, TValueType
+ * @param {TProps} props The props received by the field component.
+ * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
+ */
+export declare const useSplitFieldProps: <TValueType extends FieldValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any; }>(props: TProps, valueType: TValueType) => {
+    forwardedProps: Omit<TProps, InternalPropNames<TValueType>>;
+    internalProps: Pick<TProps, InternalPropNames<TValueType>>;
+};
+export {};

package/hooks/useSplitFieldProps.js

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

package/index.d.ts

@@ -35,3 +35,4 @@ export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
 export * from './icons';
 export * from './hooks';
+export * from './validation';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.16.0
+ * @mui/x-date-pickers v7.17.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -56,4 +56,5 @@ export * from "./PickersSectionList/index.js";
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./internals/utils/utils.js";
 export * from "./models/index.js";
 export * from "./icons/index.js";
-export * from "./hooks/index.js";
+export * from "./hooks/index.js";
+export * from "./validation/index.js";

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -10,7 +10,6 @@ import IconButton from '@mui/material/IconButton';
 import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
 import { PickersPopper } from "../../components/PickersPopper.js";
-import { useUtils } from "../useUtils.js";
 import { usePicker } from "../usePicker/index.js";
 import { LocalizationProvider } from "../../../LocalizationProvider/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
@@ -47,7 +46,6 @@ export const useDesktopPicker = _ref => {
     localeText,
     reduceAnimations
   } = props;
-  const utils = useUtils();
   const containerRef = React.useRef(null);
   const fieldRef = React.useRef(null);
   const labelId = useId();
@@ -89,7 +87,7 @@ export const useDesktopPicker = _ref => {
       additionalProps: {
         disabled: disabled || readOnly,
         onClick: open ? actions.onClose : actions.onOpen,
-        'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils),
+        'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
         edge: inputAdornmentProps.position
       },
       ownerState: props

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -6,7 +6,7 @@ import { SlotComponentProps } from '@mui/utils';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
 import { UsePickerParams, UsePickerProps } from '../usePicker';
-import { BaseSingleInputFieldProps, FieldSection, MuiPickersAdapter, PickerValidDate } from '../../../models';
+import { BaseSingleInputFieldProps, FieldSection, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
@@ -71,5 +71,5 @@ export interface UseDesktopPickerProps<TDate extends PickerValidDate, TView exte
 }
 export interface UseDesktopPickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
+    getOpenDialogAriaText: (date: TDate | null) => string;
 }

package/internals/hooks/useField/useField.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useValidation } from "../useValidation.js";
+import { useValidation } from "../../../validation/index.js";
 import { useUtils } from "../useUtils.js";
 import { adjustSectionValue, getSectionOrder } from "./useField.utils.js";
 import { useFieldState } from "./useFieldState.js";
@@ -158,18 +158,23 @@ export const useField = params => {
   useEnhancedEffect(() => {
     interactions.syncSelectionToDOM();
   });
-  const validationError = useValidation(_extends({}, internalProps, {
+  const {
+    hasValidationError
+  } = useValidation({
+    props: internalProps,
+    validator,
+    timezone,
     value: state.value,
-    timezone
-  }), validator, valueManager.isSameError, valueManager.defaultErrorState);
+    onError: internalProps.onError
+  });
   const inputError = React.useMemo(() => {
     // only override when `error` is undefined.
     // in case of multi input fields, the `error` value is provided externally and will always be defined.
     if (error !== undefined) {
       return error;
     }
-    return valueManager.hasError(validationError);
-  }, [valueManager, validationError, error]);
+    return hasValidationError;
+  }, [hasValidationError, error]);
   React.useEffect(() => {
     if (!inputError && activeSectionIndex == null) {
       resetCharacterQuery();

package/internals/hooks/useField/useField.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, FieldValueType, PickersTimezone, PickerValidDate, FieldRef } from '../../../models';
+import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, FieldValueType, PickerValidDate, FieldRef, OnErrorProps, InferError } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
-import { InferError, Validator } from '../useValidation';
+import type { Validator } from '../../../validation';
 import type { UseFieldStateResponse } from './useFieldState';
 import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing';
 import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList';
@@ -11,10 +11,10 @@ export interface UseFieldParams<TValue, TDate extends PickerValidDate, TSection
     internalProps: TInternalProps;
     valueManager: PickerValueManager<TValue, TDate, InferError<TInternalProps>>;
     fieldValueManager: FieldValueManager<TValue, TDate, TSection>;
-    validator: Validator<TValue, TDate, InferError<TInternalProps>, UseFieldValidationProps<TValue, TInternalProps>>;
+    validator: Validator<TValue, TDate, InferError<TInternalProps>, TInternalProps>;
     valueType: FieldValueType;
 }
-export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps {
+export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, OnErrorProps<TValue, TError> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -38,16 +38,6 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
      */
     onChange?: FieldChangeHandler<TValue, TError>;
-    /**
-     * 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?: (error: TError, value: TValue) => void;
     /**
      * Format of the date when rendered in the input(s).
      */
@@ -291,14 +281,6 @@ export interface UseFieldState<TValue, TSection extends FieldSection> {
      */
     tempValueStrAndroid: string | null;
 }
-export type UseFieldValidationProps<TValue, TInternalProps extends {
-    value?: TValue;
-    defaultValue?: TValue;
-    timezone?: PickersTimezone;
-}> = Omit<TInternalProps, 'value' | 'defaultValue' | 'timezone'> & {
-    value: TValue;
-    timezone: PickersTimezone;
-};
 export type AvailableAdjustKeyCode = 'ArrowUp' | 'ArrowDown' | 'PageUp' | 'PageDown' | 'Home' | 'End';
 export type SectionNeighbors = {
     [sectionIndex: number]: {

package/internals/hooks/useField/useFieldState.js

@@ -110,10 +110,8 @@ export const useFieldState = params => {
       validationError: validator({
         adapter,
         value,
-        props: _extends({}, internalProps, {
-          value,
-          timezone
-        })
+        timezone,
+        props: internalProps
       })
     };
     handleValueChange(value, context);

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -8,7 +8,6 @@ import useId from '@mui/utils/useId';
 import { PickersModalDialog } from "../../components/PickersModalDialog.js";
 import { usePicker } from "../usePicker/index.js";
 import { onSpaceOrEnter } from "../../utils/utils.js";
-import { useUtils } from "../useUtils.js";
 import { LocalizationProvider } from "../../../LocalizationProvider/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,7 +41,6 @@ export const useMobilePicker = _ref => {
     disabled,
     localeText
   } = props;
-  const utils = useUtils();
   const fieldRef = React.useRef(null);
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
@@ -89,7 +87,7 @@ export const useMobilePicker = _ref => {
 
   // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
   fieldProps.inputProps = _extends({}, fieldProps.inputProps, {
-    'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils)
+    'aria-label': getOpenDialogAriaText(pickerFieldProps.value)
   });
   const slotsForField = _extends({
     textField: slots.textField

package/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts

@@ -4,7 +4,7 @@ import { SlotComponentProps } from '@mui/utils';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersModalDialogSlots, PickersModalDialogSlotProps } from '../../components/PickersModalDialog';
 import { UsePickerParams, UsePickerProps } from '../usePicker';
-import { BaseSingleInputFieldProps, FieldSection, MuiPickersAdapter, PickerValidDate } from '../../../models';
+import { BaseSingleInputFieldProps, FieldSection, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
@@ -43,5 +43,5 @@ export interface UseMobilePickerProps<TDate extends PickerValidDate, TView exten
 }
 export interface UseMobilePickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
+    getOpenDialogAriaText: (date: TDate | null) => string;
 }

package/internals/hooks/usePicker/usePicker.d.ts

@@ -1,5 +1,4 @@
 import { UsePickerParams, UsePickerProps, UsePickerResponse } from './usePicker.types';
-import { InferError } from '../useValidation';
-import { FieldSection, PickerValidDate } from '../../../models';
+import { FieldSection, PickerValidDate, InferError } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 export declare const usePicker: <TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, wrapperVariant, additionalViewProps, validator, autoFocusView, rendererInterceptor, fieldRef, }: UsePickerParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;

package/internals/hooks/usePicker/usePicker.js

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

package/internals/hooks/usePicker/usePickerValue.d.ts

@@ -1,5 +1,4 @@
-import { InferError } from '../useValidation';
-import { FieldSection, PickerValidDate } from '../../../models';
+import { FieldSection, PickerValidDate, InferError } from '../../../models';
 import { UsePickerValueProps, UsePickerValueParams, UsePickerValueResponse } from './usePickerValue.types';
 /**
  * Manage the value lifecycle of all the pickers.

package/internals/hooks/usePicker/usePickerValue.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useOpenState } from "../useOpenState.js";
 import { useLocalizationContext, useUtils } from "../useUtils.js";
-import { useValidation } from "../useValidation.js";
+import { useValidation } from "../../../validation/index.js";
 import { useValueWithTimezone } from "../useValueWithTimezone.js";
 
 /**
@@ -180,10 +180,15 @@ export const usePickerValue = ({
       hasBeenModifiedSinceMount: false
     };
   });
-  useValidation(_extends({}, props, {
+  const {
+    getValidationErrorForNewValue
+  } = useValidation({
+    props,
+    validator,
+    timezone,
     value: dateState.draft,
-    timezone
-  }), validator, valueManager.isSameError, valueManager.defaultErrorState);
+    onError: props.onError
+  });
   const updateDate = useEventCallback(action => {
     const updaterParams = {
       action,
@@ -204,14 +209,7 @@ export const usePickerValue = ({
     let cachedContext = null;
     const getContext = () => {
       if (!cachedContext) {
-        const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
-          adapter,
-          value: action.value,
-          props: _extends({}, props, {
-            value: action.value,
-            timezone
-          })
-        });
+        const validationError = action.name === 'setValueFromField' ? action.context.validationError : getValidationErrorForNewValue(action.value);
         cachedContext = {
           validationError
         };
@@ -325,10 +323,8 @@ export const usePickerValue = ({
     const error = validator({
       adapter,
       value: testedValue,
-      props: _extends({}, props, {
-        value: testedValue,
-        timezone
-      })
+      timezone,
+      props
     });
     return !valueManager.hasError(error);
   };