@mui/x-date-pickers 8.17.0 → 8.19.0

package/esm/DesktopDatePicker/DesktopDatePicker.js

@@ -187,7 +187,10 @@ DesktopDatePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -195,7 +198,10 @@ DesktopDatePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -309,7 +309,10 @@ DesktopDateTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -317,7 +320,10 @@ DesktopDateTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/DesktopTimePicker/DesktopTimePicker.js

@@ -191,7 +191,10 @@ DesktopTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -199,7 +202,10 @@ DesktopTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/MobileDatePicker/MobileDatePicker.js

@@ -185,7 +185,10 @@ MobileDatePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -193,7 +196,10 @@ MobileDatePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/MobileDateTimePicker/MobileDateTimePicker.js

@@ -275,7 +275,10 @@ MobileDateTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -283,7 +286,10 @@ MobileDateTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/MobileTimePicker/MobileTimePicker.js

@@ -176,7 +176,10 @@ MobileTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -184,7 +187,10 @@ MobileTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/PickersShortcuts/PickersShortcuts.js

@@ -52,7 +52,8 @@ function PickersShortcuts(props) {
       onClick: () => {
         setValue(newValue, {
           changeImportance,
-          shortcut: item
+          shortcut: item,
+          source: 'view'
         });
       },
       disabled: !isValidValue(newValue)

package/esm/StaticDatePicker/StaticDatePicker.js

@@ -142,7 +142,10 @@ StaticDatePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -150,7 +153,10 @@ StaticDatePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/StaticDateTimePicker/StaticDateTimePicker.js

@@ -229,7 +229,10 @@ StaticDateTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -237,7 +240,10 @@ StaticDateTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/StaticTimePicker/StaticTimePicker.js

@@ -132,7 +132,10 @@ StaticTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -140,7 +143,10 @@ StaticTimePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/TimePicker/TimePicker.js

@@ -164,7 +164,10 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @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: PropTypes.func,
   /**
@@ -172,7 +175,10 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @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: PropTypes.func,
   /**

package/esm/TimePicker/TimePickerToolbar.js

@@ -139,7 +139,8 @@ function TimePickerToolbar(inProps) {
     meridiemMode,
     handleMeridiemChange
   } = useMeridiemMode(value, ampm, newValue => setValue(newValue, {
-    changeImportance: 'set'
+    changeImportance: 'set',
+    source: 'view'
   }));
   const formatSection = format => {
     if (!adapter.isValid(value)) {

package/esm/index.js

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

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

@@ -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/hooks/useDesktopPicker/useDesktopPicker.js

@@ -75,8 +75,8 @@ export const useDesktopPicker = _ref => {
   });
   const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-      slots: slots,
-      slotProps: slotProps,
+      slots: _extends({}, slots, fieldProps.slots),
+      slotProps: _extends({}, slotProps, fieldProps.slotProps),
       inputRef: inputRef
     })), /*#__PURE__*/_jsx(PickerPopper, {
       slots: slots,

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.js

@@ -75,8 +75,8 @@ export const useMobilePicker = _ref => {
   });
   const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-      slots: slots,
-      slotProps: slotProps,
+      slots: _extends({}, slots, fieldProps.slots),
+      slotProps: _extends({}, slotProps, fieldProps.slotProps),
       inputRef: inputRef
     })), /*#__PURE__*/_jsx(PickersModalDialog, {
       slots: slots,

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

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

package/internals/components/PickerProvider.d.ts

@@ -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/hooks/useDesktopPicker/useDesktopPicker.js

@@ -81,8 +81,8 @@ const useDesktopPicker = _ref => {
   });
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
-      slots: slots,
-      slotProps: slotProps,
+      slots: (0, _extends2.default)({}, slots, fieldProps.slots),
+      slotProps: (0, _extends2.default)({}, slotProps, fieldProps.slotProps),
       inputRef: inputRef
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPopper.PickerPopper, {
       slots: slots,

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.js

@@ -81,8 +81,8 @@ const useMobilePicker = _ref => {
   });
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
-      slots: slots,
-      slotProps: slotProps,
+      slots: (0, _extends2.default)({}, slots, fieldProps.slots),
+      slotProps: (0, _extends2.default)({}, slotProps, fieldProps.slotProps),
       inputRef: inputRef
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
       slots: slots,