@mui/x-date-pickers 7.16.0 → 7.18.0

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,6 +1,8 @@
+'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"];
+const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -86,6 +88,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
+      yearsOrder = 'asc',
       yearsPerRow,
       timezone: timezoneProp,
       gridLabelId,
@@ -175,22 +178,24 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
   React.useEffect(() => {
     setFocusedYear(prevFocusedYear => selectedYear !== null && prevFocusedYear !== selectedYear ? selectedYear : prevFocusedYear);
   }, [selectedYear]);
+  const verticalDirection = yearsOrder !== 'desc' ? yearsPerRow * 1 : yearsPerRow * -1;
+  const horizontalDirection = isRtl || yearsOrder === 'desc' ? -1 : 1;
   const handleKeyDown = useEventCallback((event, year) => {
     switch (event.key) {
       case 'ArrowUp':
-        focusYear(year - yearsPerRow);
+        focusYear(year - verticalDirection);
         event.preventDefault();
         break;
       case 'ArrowDown':
-        focusYear(year + yearsPerRow);
+        focusYear(year + verticalDirection);
         event.preventDefault();
         break;
       case 'ArrowLeft':
-        focusYear(year + (isRtl ? 1 : -1));
+        focusYear(year - horizontalDirection);
         event.preventDefault();
         break;
       case 'ArrowRight':
-        focusYear(year + (isRtl ? -1 : 1));
+        focusYear(year + horizontalDirection);
         event.preventDefault();
         break;
       default:
@@ -228,6 +233,10 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     }
     scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
   }, [autoFocus]);
+  const yearRange = utils.getYearRange([minDate, maxDate]);
+  if (yearsOrder === 'desc') {
+    yearRange.reverse();
+  }
   return /*#__PURE__*/_jsx(YearCalendarRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
@@ -235,7 +244,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     role: "radiogroup",
     "aria-labelledby": gridLabelId
   }, other, {
-    children: utils.getYearRange([minDate, maxDate]).map(year => {
+    children: yearRange.map(year => {
       const yearNumber = utils.getYear(year);
       const isSelected = yearNumber === selectedYear;
       const isDisabled = disabled || isYearDisabled(year);
@@ -356,6 +365,12 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * Used when the component is controlled.
    */
   value: PropTypes.object,
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/YearCalendar/YearCalendar.types.d.ts

@@ -8,7 +8,7 @@ import type { PickersYearProps } from './PickersYear';
 import { SlotComponentPropsFromProps } from '../internals/models/helpers';
 export interface YearCalendarSlots {
     /**
-     * Button displayed to render a single year in the "year" view.
+     * Button displayed to render a single year in the `year` view.
      * @default YearCalendarButton
      */
     yearButton?: React.ElementType;
@@ -19,6 +19,12 @@ export interface YearCalendarSlotProps {
     }, {}, PickersYearProps>;
 }
 export interface ExportedYearCalendarProps {
+    /**
+     * Years are displayed in ascending (chronological) order by default.
+     * If `desc`, years are displayed in descending order.
+     * @default 'asc'
+     */
+    yearsOrder?: 'asc' | 'desc';
     /**
      * Years rendered per row.
      * @default 3

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -8,4 +8,4 @@ export interface DateViewRendererProps<TDate extends PickerValidDate, TView exte
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsOrder, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;

package/dateViewRenderers/dateViewRenderers.js

@@ -25,6 +25,7 @@ export const renderDateViewCalendar = ({
   onMonthChange,
   monthsPerRow,
   onYearChange,
+  yearsOrder,
   yearsPerRow,
   slots,
   slotProps,
@@ -63,6 +64,7 @@ export const renderDateViewCalendar = ({
   onMonthChange: onMonthChange,
   monthsPerRow: monthsPerRow,
   onYearChange: onYearChange,
+  yearsOrder: yearsOrder,
   yearsPerRow: yearsPerRow,
   slots: slots,
   slotProps: 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.18.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);
   };

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

@@ -1,8 +1,7 @@
 import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
-import { InferError, Validator } from '../useValidation';
-import { UseFieldValidationProps } from '../useField/useField.types';
+import { Validator } from '../../../validation';
 import { WrapperVariant } from '../../models/common';
-import { FieldSection, FieldValueType, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate } from '../../../models';
+import { FieldSection, FieldValueType, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError } from '../../../models';
 import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate';
 import { PickerShortcutChangeImportance, PickersShortcutsItemContext } from '../../../PickersShortcuts';
 export interface PickerValueManager<TValue, TDate extends PickerValidDate, TError> {
@@ -170,7 +169,7 @@ export type PickerValueUpdateAction<TValue, TError> = {
 /**
  * Props used to handle the value that are common to all pickers.
  */
-export interface UsePickerValueBaseProps<TValue, TError> {
+export interface UsePickerValueBaseProps<TValue, TError> extends OnErrorProps<TValue, TError> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -197,16 +196,6 @@ export interface UsePickerValueBaseProps<TValue, TError> {
      * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
      */
     onAccept?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;
-    /**
-     * 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;
 }
 /**
  * Props used to handle the value of non-static pickers.
@@ -243,7 +232,7 @@ export interface UsePickerValueParams<TValue, TDate extends PickerValidDate, TEx
     valueManager: PickerValueManager<TValue, TDate, InferError<TExternalProps>>;
     valueType: FieldValueType;
     wrapperVariant: WrapperVariant;
-    validator: Validator<TValue, TDate, InferError<TExternalProps>, UseFieldValidationProps<TValue, TExternalProps>>;
+    validator: Validator<TValue, TDate, InferError<TExternalProps>, TExternalProps>;
 }
 export interface UsePickerValueActions {
     onAccept: () => void;

package/internals/index.d.ts

@@ -35,8 +35,6 @@ export type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotPr
 export { useLocalizationContext, useDefaultDates, useUtils, useNow } from './hooks/useUtils';
 export type { ExportedUseViewsOptions, UseViewsOptions } from './hooks/useViews';
 export { useViews } from './hooks/useViews';
-export { useValidation } from './hooks/useValidation';
-export type { ValidationProps, Validator, InferError } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
 export type { BaseFieldProps } from './models/fields';
 export type { BasePickerProps, BasePickerInputProps, BaseNonStaticPickerProps, } from './models/props/basePickerProps';
@@ -49,17 +47,11 @@ export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationPr
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem, } from './utils/date-utils';
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from './utils/date-time-utils';
-export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';
 export { useDefaultizedDateField, useDefaultizedTimeField, useDefaultizedDateTimeField, } from './hooks/defaultizedFieldProps';
 export { useDefaultReduceAnimations } from './hooks/useDefaultReduceAnimations';
-export { extractValidationProps } from './utils/validation/extractValidationProps';
-export { validateDate } from './utils/validation/validateDate';
-export { validateDateTime } from './utils/validation/validateDateTime';
-export { validateTime } from './utils/validation/validateTime';
 export { applyDefaultViewProps } from './utils/views';
-export { warnOnce } from './utils/warning';
 export { DayCalendar } from '../DateCalendar/DayCalendar';
 export type { DayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, ExportedDayCalendarProps, } from '../DateCalendar/DayCalendar';
 export type { ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';