@mui/x-date-pickers 8.16.0 → 8.18.0

package/esm/internals/components/PickerFieldUI.d.ts

@@ -22,7 +22,7 @@ export declare const PickerFieldUIContext: React.Context<PickerFieldUIContextVal
  * Adds the button to open the Picker and the button to clear the value of the field.
  * @ignore - internal component.
  */
-export declare function PickerFieldUI<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(props: PickerFieldUIProps<TEnableAccessibleFieldDOMStructure, TProps>): React.JSX.Element;
+export declare function PickerFieldUI<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(props: PickerFieldUIProps<TEnableAccessibleFieldDOMStructure, TProps>): import("react/jsx-runtime").JSX.Element;
 export interface ExportedPickerFieldUIProps {
   /**
    * If `true`, a clear button will be shown in the field allowing value clearing.
@@ -123,7 +123,7 @@ interface UseFieldTextFieldPropsParameters {
   ref: React.Ref<HTMLDivElement>;
   externalForwardedProps: any;
 }
-export declare function PickerFieldUIContextProvider(props: PickerFieldUIContextProviderProps): React.JSX.Element;
+export declare function PickerFieldUIContextProvider(props: PickerFieldUIContextProviderProps): import("react/jsx-runtime").JSX.Element;
 interface PickerFieldUIContextProviderProps {
   children: React.ReactNode;
   inputRef: React.Ref<HTMLInputElement> | undefined;

package/esm/internals/components/PickerPopper/PickerPopper.d.ts

@@ -64,4 +64,4 @@ export interface PickerPopperProps extends ExportedPickerPopperProps {
   slots?: PickerPopperSlots;
   slotProps?: PickerPopperSlotProps;
 }
-export declare function PickerPopper(inProps: PickerPopperProps): React.JSX.Element;
+export declare function PickerPopper(inProps: PickerPopperProps): import("react/jsx-runtime").JSX.Element;

package/esm/internals/components/PickerProvider.d.ts

@@ -16,7 +16,7 @@ export declare const PickerPrivateContext: React.Context<PickerPrivateContextVal
  *
  * @ignore - do not document.
  */
-export declare function PickerProvider<TValue extends PickerValidValue>(props: PickerProviderProps<TValue>): React.JSX.Element;
+export declare function PickerProvider<TValue extends PickerValidValue>(props: PickerProviderProps<TValue>): import("react/jsx-runtime").JSX.Element;
 export interface PickerProviderProps<TValue extends PickerValidValue> {
   contextValue: PickerContextValue<any, any, any>;
   actionsContextValue: PickerActionsContextValue<any, any, any>;
@@ -232,6 +232,14 @@ export interface SetValueActionOptions<TError = string | null> {
    * It should not be defined if the change does not come from a shortcut.
    */
   shortcut?: PickersShortcutsItemContext;
+  /**
+   * Source of the change.
+   * Simplified to one of the following values:
+   * - 'field' (changes coming from the text field)
+   * - 'view' (any interaction inside the picker UI: views, toolbar, action bar, shortcuts, etc.)
+   * - 'unknown' (unspecified or third-party triggers)
+   */
+  source?: 'field' | 'view' | 'unknown';
   /**
    * Whether the value should call `onChange` and `onAccept` when the value is not controlled and has never been modified.
    * If `true`, the `onChange` and `onAccept` callback will only be fired if the value has been modified (and is not equal to the last published value).

package/esm/internals/components/PickersModalDialog.d.ts

@@ -45,4 +45,4 @@ export interface PickersModalDialogProps {
    */
   slotProps?: PickersModalDialogSlotProps;
 }
-export declare function PickersModalDialog(props: React.PropsWithChildren<PickersModalDialogProps>): React.JSX.Element;
+export declare function PickersModalDialog(props: React.PropsWithChildren<PickersModalDialogProps>): import("react/jsx-runtime").JSX.Element;

package/esm/internals/demo/DemoContainer.d.ts

@@ -14,7 +14,7 @@ interface DemoItemProps extends Omit<StackProps, 'component'> {
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
  * Please do not use it in your application.
  */
-export declare function DemoItem(props: DemoItemProps): React.JSX.Element;
+export declare function DemoItem(props: DemoItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DemoItem {
   var displayName: string;
 }
@@ -22,5 +22,5 @@ export declare namespace DemoItem {
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
  * Please do not use it in your application.
  */
-export declare function DemoContainer(props: DemoGridProps): React.JSX.Element;
+export declare function DemoContainer(props: DemoGridProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { UseDesktopPickerParams, UseDesktopPickerProps } from "./useDesktopPicker.types.js";
 import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
 /**
@@ -12,5 +11,5 @@ export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem
   steps,
   ...pickerParams
 }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
-  renderPicker: () => React.JSX.Element;
+  renderPicker: () => import("react/jsx-runtime").JSX.Element;
 };

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
-import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
 import { usePicker } from "../usePicker/index.js";

package/esm/internals/hooks/useField/useFieldState.js

@@ -68,14 +68,6 @@ export const useFieldState = parameters => {
     value,
     onError: internalPropsWithDefaults.onError
   });
-  const error = 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 (errorProp !== undefined) {
-      return errorProp;
-    }
-    return hasValidationError;
-  }, [hasValidationError, errorProp]);
   const localizedDigits = React.useMemo(() => getLocalizedDigits(adapter), [adapter]);
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(adapter, localizedDigits, timezone), [adapter, localizedDigits, timezone]);
   const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => buildSectionsFromFormat({
@@ -130,6 +122,22 @@ export const useFieldState = parameters => {
   const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
   const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
   const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
+
+  // When the field loses focus (no active section), consider partially filled sections as invalid.
+  // This enforces that the field must be entirely filled or entirely empty on blur.
+  const hasPartiallyFilledSectionsOnBlur = React.useMemo(() => {
+    if (activeSectionIndex != null) {
+      return false;
+    }
+    const filledSections = state.sections.filter(s => s.value !== '');
+    return filledSections.length > 0 && state.sections.length - filledSections.length > 0;
+  }, [state.sections, activeSectionIndex]);
+  const error = React.useMemo(() => {
+    if (errorProp !== undefined) {
+      return errorProp;
+    }
+    return hasValidationError || hasPartiallyFilledSectionsOnBlur;
+  }, [hasValidationError, hasPartiallyFilledSectionsOnBlur, errorProp]);
   const publishValue = newValue => {
     const context = {
       validationError: validator({
@@ -278,11 +286,12 @@ export const useFieldState = parameters => {
 
     /**
      * If the previous date is not null,
-     * Then we publish the date as `null`.
+     * Then we publish the date as `newActiveDate to prevent error state oscillation`.
+     * @link: https://github.com/mui/mui-x/issues/17967
      */
     if (activeDate != null) {
       setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
-      return publishValue(fieldValueManager.updateDateInValue(value, section, null));
+      publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
     }
 
     /**

package/esm/internals/hooks/useField/useFieldV6TextField.js

@@ -384,6 +384,7 @@ export const useFieldV6TextField = parameters => {
   }));
   return _extends({}, forwardedProps, {
     error,
+    'aria-invalid': error,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled),
     onBlur: handleContainerBlur,
     onClick: handleInputClick,

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.js";
 import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
 /**
@@ -12,5 +11,5 @@ export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem,
   steps,
   ...pickerParams
 }: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
-  renderPicker: () => React.JSX.Element;
+  renderPicker: () => import("react/jsx-runtime").JSX.Element;
 };

package/esm/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
-import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { PickersModalDialog } from "../../components/PickersModalDialog.js";
 import { usePicker } from "../usePicker/index.js";

package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.js

@@ -105,6 +105,7 @@ export function useValueAndOpenStates(parameters) {
       skipPublicationIfPristine = false,
       validationError,
       shortcut,
+      source,
       shouldClose = changeImportance === 'accept'
     } = options ?? {};
     let shouldFireOnChange;
@@ -127,8 +128,18 @@ export function useValueAndOpenStates(parameters) {
     let cachedContext = null;
     const getContext = () => {
       if (!cachedContext) {
+        let inferredSource;
+        if (source) {
+          inferredSource = source;
+        } else if (shortcut) {
+          inferredSource = 'view';
+        } else {
+          // Default to unknown when not explicitly tagged by a picker call site
+          inferredSource = 'unknown';
+        }
         cachedContext = {
-          validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError
+          validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError,
+          source: inferredSource
         };
         if (shortcut) {
           cachedContext.shortcut = shortcut;
@@ -165,7 +176,8 @@ export function useValueAndOpenStates(parameters) {
       return;
     }
     setValue(newValue, {
-      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'
+      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set',
+      source: 'view'
     });
   });
 

package/esm/internals/hooks/usePicker/usePicker.js

@@ -111,15 +111,23 @@ export const usePicker = ({
     autoFocus: autoFocusView,
     getStepNavigation
   });
-  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
-  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType)));
-  const acceptValueChanges = useEventCallback(() => setValue(value));
+  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue, {
+    source: 'view'
+  }));
+  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType), {
+    source: 'view'
+  }));
+  const acceptValueChanges = useEventCallback(() => setValue(value, {
+    source: 'view'
+  }));
   const cancelValueChanges = useEventCallback(() => setValue(state.lastCommittedValue, {
-    skipPublicationIfPristine: true
+    skipPublicationIfPristine: true,
+    source: 'view'
   }));
   const dismissViews = useEventCallback(() => {
     setValue(value, {
-      skipPublicationIfPristine: true
+      skipPublicationIfPristine: true,
+      source: 'view'
     });
   });
   const {

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

@@ -28,7 +28,10 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
    * @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.
+   * @param {FieldChangeHandlerContext<TError>} context Context about this change:
+   * - `validationError`: validation result of the current value
+   * - `source`: source of the change. One of 'field' | 'view' | 'unknown'
+   * - `shortcut` (optional): the shortcut metadata if the change was triggered by a shortcut selection
    */
   onChange?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;
   /**
@@ -36,7 +39,10 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
    * @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.
+   * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
+   * - `validationError`: validation result of the current value
+   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;
   /**

package/esm/internals/hooks/useStaticPicker/useStaticPicker.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { UseStaticPickerParams, UseStaticPickerProps } from "./useStaticPicker.types.js";
 import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
 /**
@@ -12,5 +11,5 @@ export declare const useStaticPicker: <TView extends DateOrTimeViewWithMeridiem,
   steps,
   ...pickerParams
 }: UseStaticPickerParams<TView, TExternalProps>) => {
-  renderPicker: () => React.JSX.Element;
+  renderPicker: () => import("react/jsx-runtime").JSX.Element;
 };

package/esm/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["props", "steps"];
-import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { usePicker } from "../usePicker/index.js";

package/esm/models/pickers.d.ts

@@ -2,6 +2,14 @@ import { PickerOrientation, PickerVariant } from "../internals/models/common.js"
 import type { PickersShortcutsItemContext } from "../PickersShortcuts/index.js";
 export interface PickerChangeHandlerContext<TError> {
   validationError: TError;
+  /**
+   * Source of the change that triggered `onChange` or `onAccept`.
+   * Simplified to one of the following values:
+   * - 'field' (changes coming from the text field)
+   * - 'view' (any interaction inside the picker UI: views, toolbar, action bar, shortcuts, etc.)
+   * - 'unknown' (unspecified or third-party triggers)
+   */
+  source: 'field' | 'view' | 'unknown';
   /**
    * Shortcut causing this `onChange` or `onAccept` call.
    * If the call has not been caused by a shortcut selection, this property will be `undefined`.

package/esm/timeViewRenderers/timeViewRenderers.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { TimeClockProps } from "../TimeClock/index.js";
 import { TimeView } from "../models/index.js";
 import { DigitalClockProps } from "../DigitalClock/index.js";
@@ -40,7 +39,7 @@ export declare const renderTimeViewClock: ({
   showViewSwitcher,
   disableIgnoringDatePartForTimeValidation,
   timezone
-}: TimeViewRendererProps<TimeView, TimeClockProps<TimeView>>) => React.JSX.Element;
+}: TimeViewRendererProps<TimeView, TimeClockProps<TimeView>>) => import("react/jsx-runtime").JSX.Element;
 export declare const renderDigitalClockTimeView: ({
   view,
   onViewChange,
@@ -70,7 +69,7 @@ export declare const renderDigitalClockTimeView: ({
   timeSteps,
   skipDisabled,
   timezone
-}: TimeViewRendererProps<Extract<TimeView, "hours">, Omit<DigitalClockProps, "timeStep"> & Pick<TimePickerProps, "timeSteps">>) => React.JSX.Element;
+}: TimeViewRendererProps<Extract<TimeView, "hours">, Omit<DigitalClockProps, "timeStep"> & Pick<TimePickerProps, "timeSteps">>) => import("react/jsx-runtime").JSX.Element;
 export declare const renderMultiSectionDigitalClockTimeView: ({
   view,
   onViewChange,
@@ -100,4 +99,4 @@ export declare const renderMultiSectionDigitalClockTimeView: ({
   timeSteps,
   skipDisabled,
   timezone
-}: TimeViewRendererProps<TimeViewWithMeridiem, MultiSectionDigitalClockProps>) => React.JSX.Element;
+}: TimeViewRendererProps<TimeViewWithMeridiem, MultiSectionDigitalClockProps>) => import("react/jsx-runtime").JSX.Element;

package/esm/timeViewRenderers/timeViewRenderers.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { TimeClock } from "../TimeClock/index.js";
 import { DigitalClock } from "../DigitalClock/index.js";
 import { MultiSectionDigitalClock } from "../MultiSectionDigitalClock/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.16.0
+ * @mui/x-date-pickers v8.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickerFieldUI.d.ts

@@ -22,7 +22,7 @@ export declare const PickerFieldUIContext: React.Context<PickerFieldUIContextVal
  * Adds the button to open the Picker and the button to clear the value of the field.
  * @ignore - internal component.
  */
-export declare function PickerFieldUI<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(props: PickerFieldUIProps<TEnableAccessibleFieldDOMStructure, TProps>): React.JSX.Element;
+export declare function PickerFieldUI<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(props: PickerFieldUIProps<TEnableAccessibleFieldDOMStructure, TProps>): import("react/jsx-runtime").JSX.Element;
 export interface ExportedPickerFieldUIProps {
   /**
    * If `true`, a clear button will be shown in the field allowing value clearing.
@@ -123,7 +123,7 @@ interface UseFieldTextFieldPropsParameters {
   ref: React.Ref<HTMLDivElement>;
   externalForwardedProps: any;
 }
-export declare function PickerFieldUIContextProvider(props: PickerFieldUIContextProviderProps): React.JSX.Element;
+export declare function PickerFieldUIContextProvider(props: PickerFieldUIContextProviderProps): import("react/jsx-runtime").JSX.Element;
 interface PickerFieldUIContextProviderProps {
   children: React.ReactNode;
   inputRef: React.Ref<HTMLInputElement> | undefined;

package/internals/components/PickerPopper/PickerPopper.d.ts

@@ -64,4 +64,4 @@ export interface PickerPopperProps extends ExportedPickerPopperProps {
   slots?: PickerPopperSlots;
   slotProps?: PickerPopperSlotProps;
 }
-export declare function PickerPopper(inProps: PickerPopperProps): React.JSX.Element;
+export declare function PickerPopper(inProps: PickerPopperProps): import("react/jsx-runtime").JSX.Element;

package/internals/components/PickerProvider.d.ts

@@ -16,7 +16,7 @@ export declare const PickerPrivateContext: React.Context<PickerPrivateContextVal
  *
  * @ignore - do not document.
  */
-export declare function PickerProvider<TValue extends PickerValidValue>(props: PickerProviderProps<TValue>): React.JSX.Element;
+export declare function PickerProvider<TValue extends PickerValidValue>(props: PickerProviderProps<TValue>): import("react/jsx-runtime").JSX.Element;
 export interface PickerProviderProps<TValue extends PickerValidValue> {
   contextValue: PickerContextValue<any, any, any>;
   actionsContextValue: PickerActionsContextValue<any, any, any>;
@@ -232,6 +232,14 @@ export interface SetValueActionOptions<TError = string | null> {
    * It should not be defined if the change does not come from a shortcut.
    */
   shortcut?: PickersShortcutsItemContext;
+  /**
+   * Source of the change.
+   * Simplified to one of the following values:
+   * - 'field' (changes coming from the text field)
+   * - 'view' (any interaction inside the picker UI: views, toolbar, action bar, shortcuts, etc.)
+   * - 'unknown' (unspecified or third-party triggers)
+   */
+  source?: 'field' | 'view' | 'unknown';
   /**
    * Whether the value should call `onChange` and `onAccept` when the value is not controlled and has never been modified.
    * If `true`, the `onChange` and `onAccept` callback will only be fired if the value has been modified (and is not equal to the last published value).

package/internals/components/PickersModalDialog.d.ts

@@ -45,4 +45,4 @@ export interface PickersModalDialogProps {
    */
   slotProps?: PickersModalDialogSlotProps;
 }
-export declare function PickersModalDialog(props: React.PropsWithChildren<PickersModalDialogProps>): React.JSX.Element;
+export declare function PickersModalDialog(props: React.PropsWithChildren<PickersModalDialogProps>): import("react/jsx-runtime").JSX.Element;

package/internals/demo/DemoContainer.d.ts

@@ -14,7 +14,7 @@ interface DemoItemProps extends Omit<StackProps, 'component'> {
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
  * Please do not use it in your application.
  */
-export declare function DemoItem(props: DemoItemProps): React.JSX.Element;
+export declare function DemoItem(props: DemoItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DemoItem {
   var displayName: string;
 }
@@ -22,5 +22,5 @@ export declare namespace DemoItem {
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
  * Please do not use it in your application.
  */
-export declare function DemoContainer(props: DemoGridProps): React.JSX.Element;
+export declare function DemoContainer(props: DemoGridProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { UseDesktopPickerParams, UseDesktopPickerProps } from "./useDesktopPicker.types.js";
 import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
 /**
@@ -12,5 +11,5 @@ export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem
   steps,
   ...pickerParams
 }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
-  renderPicker: () => React.JSX.Element;
+  renderPicker: () => import("react/jsx-runtime").JSX.Element;
 };

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,14 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDesktopPicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _PickerPopper = require("../../components/PickerPopper/PickerPopper");
 var _usePicker = require("../usePicker");

package/internals/hooks/useField/useFieldState.js

@@ -75,14 +75,6 @@ const useFieldState = parameters => {
     value,
     onError: internalPropsWithDefaults.onError
   });
-  const error = 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 (errorProp !== undefined) {
-      return errorProp;
-    }
-    return hasValidationError;
-  }, [hasValidationError, errorProp]);
   const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(adapter), [adapter]);
   const sectionsValueBoundaries = React.useMemo(() => (0, _useField.getSectionsBoundaries)(adapter, localizedDigits, timezone), [adapter, localizedDigits, timezone]);
   const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
@@ -137,6 +129,22 @@ const useFieldState = parameters => {
   const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
   const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
   const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
+
+  // When the field loses focus (no active section), consider partially filled sections as invalid.
+  // This enforces that the field must be entirely filled or entirely empty on blur.
+  const hasPartiallyFilledSectionsOnBlur = React.useMemo(() => {
+    if (activeSectionIndex != null) {
+      return false;
+    }
+    const filledSections = state.sections.filter(s => s.value !== '');
+    return filledSections.length > 0 && state.sections.length - filledSections.length > 0;
+  }, [state.sections, activeSectionIndex]);
+  const error = React.useMemo(() => {
+    if (errorProp !== undefined) {
+      return errorProp;
+    }
+    return hasValidationError || hasPartiallyFilledSectionsOnBlur;
+  }, [hasValidationError, hasPartiallyFilledSectionsOnBlur, errorProp]);
   const publishValue = newValue => {
     const context = {
       validationError: validator({
@@ -285,11 +293,12 @@ const useFieldState = parameters => {
 
     /**
      * If the previous date is not null,
-     * Then we publish the date as `null`.
+     * Then we publish the date as `newActiveDate to prevent error state oscillation`.
+     * @link: https://github.com/mui/mui-x/issues/17967
      */
     if (activeDate != null) {
       setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
-      return publishValue(fieldValueManager.updateDateInValue(value, section, null));
+      publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
     }
 
     /**

package/internals/hooks/useField/useFieldV6TextField.js

@@ -392,6 +392,7 @@ const useFieldV6TextField = parameters => {
   }));
   return (0, _extends2.default)({}, forwardedProps, {
     error,
+    'aria-invalid': error,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled),
     onBlur: handleContainerBlur,
     onClick: handleInputClick,

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.js";
 import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
 /**
@@ -12,5 +11,5 @@ export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem,
   steps,
   ...pickerParams
 }: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
-  renderPicker: () => React.JSX.Element;
+  renderPicker: () => import("react/jsx-runtime").JSX.Element;
 };

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -1,14 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useMobilePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _PickersModalDialog = require("../../components/PickersModalDialog");
 var _usePicker = require("../usePicker");

package/internals/hooks/usePicker/hooks/useValueAndOpenStates.js

@@ -112,6 +112,7 @@ function useValueAndOpenStates(parameters) {
       skipPublicationIfPristine = false,
       validationError,
       shortcut,
+      source,
       shouldClose = changeImportance === 'accept'
     } = options ?? {};
     let shouldFireOnChange;
@@ -134,8 +135,18 @@ function useValueAndOpenStates(parameters) {
     let cachedContext = null;
     const getContext = () => {
       if (!cachedContext) {
+        let inferredSource;
+        if (source) {
+          inferredSource = source;
+        } else if (shortcut) {
+          inferredSource = 'view';
+        } else {
+          // Default to unknown when not explicitly tagged by a picker call site
+          inferredSource = 'unknown';
+        }
         cachedContext = {
-          validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError
+          validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError,
+          source: inferredSource
         };
         if (shortcut) {
           cachedContext.shortcut = shortcut;
@@ -172,7 +183,8 @@ function useValueAndOpenStates(parameters) {
       return;
     }
     setValue(newValue, {
-      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'
+      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set',
+      source: 'view'
     });
   });
 

package/internals/hooks/usePicker/usePicker.js

@@ -118,15 +118,23 @@ const usePicker = ({
     autoFocus: autoFocusView,
     getStepNavigation
   });
-  const clearValue = (0, _useEventCallback.default)(() => setValue(valueManager.emptyValue));
-  const setValueToToday = (0, _useEventCallback.default)(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType)));
-  const acceptValueChanges = (0, _useEventCallback.default)(() => setValue(value));
+  const clearValue = (0, _useEventCallback.default)(() => setValue(valueManager.emptyValue, {
+    source: 'view'
+  }));
+  const setValueToToday = (0, _useEventCallback.default)(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType), {
+    source: 'view'
+  }));
+  const acceptValueChanges = (0, _useEventCallback.default)(() => setValue(value, {
+    source: 'view'
+  }));
   const cancelValueChanges = (0, _useEventCallback.default)(() => setValue(state.lastCommittedValue, {
-    skipPublicationIfPristine: true
+    skipPublicationIfPristine: true,
+    source: 'view'
   }));
   const dismissViews = (0, _useEventCallback.default)(() => {
     setValue(value, {
-      skipPublicationIfPristine: true
+      skipPublicationIfPristine: true,
+      source: 'view'
     });
   });
   const {