@mui/x-date-pickers 6.18.6 → 6.18.7

package/AdapterLuxon/AdapterLuxon.d.ts

@@ -38,14 +38,14 @@ export declare class AdapterLuxon implements MuiPickersAdapter<DateTime, string>
     formatTokenMap: FieldFormatTokenMap;
     constructor({ locale, formats }?: AdapterOptions<string, never>);
     private setLocaleToValue;
-    date: (value?: any) => DateTime | null;
-    dateWithTimezone: <T extends string | null | undefined>(value: T, timezone: PickersTimezone) => DateBuilderReturnType<T, DateTime>;
+    date: (value?: any) => DateTime<true> | DateTime<false> | null;
+    dateWithTimezone: <T extends string | null | undefined>(value: T, timezone: PickersTimezone) => DateBuilderReturnType<T, DateTime<boolean>>;
     getTimezone: (value: DateTime) => string;
     setTimezone: (value: DateTime, timezone: PickersTimezone) => DateTime;
     toJsDate: (value: DateTime) => Date;
-    parseISO: (isoString: string) => DateTime;
+    parseISO: (isoString: string) => DateTime<true> | DateTime<false>;
     toISO: (value: DateTime) => string;
-    parse: (value: string, formatString: string) => DateTime | null;
+    parse: (value: string, formatString: string) => DateTime<true> | DateTime<false> | null;
     getCurrentLocaleCode: () => string;
     is12HourCycleInCurrentLocale: () => boolean;
     expandFormat: (format: string) => string;
@@ -68,21 +68,21 @@ export declare class AdapterLuxon implements MuiPickersAdapter<DateTime, string>
     isBeforeYear: (value: DateTime, comparing: DateTime) => boolean;
     isBeforeDay: (value: DateTime, comparing: DateTime) => boolean;
     isWithinRange: (value: DateTime, [start, end]: [DateTime, DateTime]) => boolean;
-    startOfYear: (value: DateTime) => DateTime;
-    startOfMonth: (value: DateTime) => DateTime;
-    startOfWeek: (value: DateTime) => DateTime;
-    startOfDay: (value: DateTime) => DateTime;
-    endOfYear: (value: DateTime) => DateTime;
-    endOfMonth: (value: DateTime) => DateTime;
-    endOfWeek: (value: DateTime) => DateTime;
-    endOfDay: (value: DateTime) => DateTime;
-    addYears: (value: DateTime, amount: number) => DateTime;
-    addMonths: (value: DateTime, amount: number) => DateTime;
-    addWeeks: (value: DateTime, amount: number) => DateTime;
-    addDays: (value: DateTime, amount: number) => DateTime;
-    addHours: (value: DateTime, amount: number) => DateTime;
-    addMinutes: (value: DateTime, amount: number) => DateTime;
-    addSeconds: (value: DateTime, amount: number) => DateTime;
+    startOfYear: (value: DateTime) => DateTime<boolean>;
+    startOfMonth: (value: DateTime) => DateTime<boolean>;
+    startOfWeek: (value: DateTime) => DateTime<boolean>;
+    startOfDay: (value: DateTime) => DateTime<boolean>;
+    endOfYear: (value: DateTime) => DateTime<boolean>;
+    endOfMonth: (value: DateTime) => DateTime<boolean>;
+    endOfWeek: (value: DateTime) => DateTime<boolean>;
+    endOfDay: (value: DateTime) => DateTime<boolean>;
+    addYears: (value: DateTime, amount: number) => DateTime<boolean>;
+    addMonths: (value: DateTime, amount: number) => DateTime<boolean>;
+    addWeeks: (value: DateTime, amount: number) => DateTime<boolean>;
+    addDays: (value: DateTime, amount: number) => DateTime<boolean>;
+    addHours: (value: DateTime, amount: number) => DateTime<boolean>;
+    addMinutes: (value: DateTime, amount: number) => DateTime<boolean>;
+    addSeconds: (value: DateTime, amount: number) => DateTime<boolean>;
     getYear: (value: DateTime) => number;
     getMonth: (value: DateTime) => number;
     getDate: (value: DateTime) => number;
@@ -90,21 +90,21 @@ export declare class AdapterLuxon implements MuiPickersAdapter<DateTime, string>
     getMinutes: (value: DateTime) => number;
     getSeconds: (value: DateTime) => number;
     getMilliseconds: (value: DateTime) => number;
-    setYear: (value: DateTime, year: number) => DateTime;
-    setMonth: (value: DateTime, month: number) => DateTime;
-    setDate: (value: DateTime, date: number) => DateTime;
-    setHours: (value: DateTime, hours: number) => DateTime;
-    setMinutes: (value: DateTime, minutes: number) => DateTime;
-    setSeconds: (value: DateTime, seconds: number) => DateTime;
-    setMilliseconds: (value: DateTime, milliseconds: number) => DateTime;
+    setYear: (value: DateTime, year: number) => DateTime<boolean>;
+    setMonth: (value: DateTime, month: number) => DateTime<boolean>;
+    setDate: (value: DateTime, date: number) => DateTime<boolean>;
+    setHours: (value: DateTime, hours: number) => DateTime<boolean>;
+    setMinutes: (value: DateTime, minutes: number) => DateTime<boolean>;
+    setSeconds: (value: DateTime, seconds: number) => DateTime<boolean>;
+    setMilliseconds: (value: DateTime, milliseconds: number) => DateTime<boolean>;
     getDaysInMonth: (value: DateTime) => import("luxon").PossibleDaysInMonth;
-    getNextMonth: (value: DateTime) => DateTime;
-    getPreviousMonth: (value: DateTime) => DateTime;
-    getMonthArray: (value: DateTime) => DateTime[];
-    mergeDateAndTime: (dateParam: DateTime, timeParam: DateTime) => DateTime;
+    getNextMonth: (value: DateTime) => DateTime<boolean>;
+    getPreviousMonth: (value: DateTime) => DateTime<boolean>;
+    getMonthArray: (value: DateTime) => DateTime<boolean>[];
+    mergeDateAndTime: (dateParam: DateTime, timeParam: DateTime) => DateTime<boolean>;
     getWeekdays: () => string[];
-    getWeekArray: (value: DateTime) => DateTime[][];
+    getWeekArray: (value: DateTime) => DateTime<boolean>[][];
     getWeekNumber: (value: DateTime) => number;
-    getYearRange: (start: DateTime, end: DateTime) => DateTime[];
+    getYearRange: (start: DateTime, end: DateTime) => DateTime<boolean>[];
     getMeridiemText: (ampm: 'am' | 'pm') => string;
 }

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.7
+
+_Jan 5, 2024_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Czech (cs-CZ) locale on Data Grid (#11429) @wensiet
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.7`
+
+- [DataGrid] Don't evaluate `hasEval` when `disableEval` is set (#11553) @reihwald
+- [l10n] Update Czech (cs-CZ) locale (#11498) @fdebef
+
+#### `@mui/x-data-grid-pro@6.18.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.7`.
+
+#### `@mui/x-data-grid-premium@6.18.7` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.7`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.7`
+
+- [pickers] Fix views management (@LukasTy) (#11572)
+
+#### `@mui/x-date-pickers-pro@6.18.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.7`.
+
+### Charts / `@mui/x-charts@6.18.7`
+
+- [charts] Fix `null` in line chart using dataset (@alexfauquette) (#11561)
+
+### Docs
+
+- [docs] Clarify Pickers usage with Luxon (#11566) @LukasTy
+
 ## 6.18.6
 
 _Dec 22, 2023_
@@ -37,7 +79,7 @@ Same changes as in `@mui/x-data-grid-pro@6.18.6`.
 
 Same changes as in `@mui/x-date-pickers@6.18.6`.
 
-### Charts / `@mui/x-charts@6.18.6`
+### Charts / `@mui/x-charts@6.18.4`
 
 - [charts] Allow percentage values for pie chart center and radius (#11464) @alexfauquette
 - [charts] Make error message more explicit (#11457) @alexfauquette

package/DateCalendar/DateCalendar.js

@@ -258,9 +258,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   const handleSelectedDayChange = useEventCallback(day => {
     if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange(mergeDateAndTime(utils, day, value != null ? value : referenceDate), 'finish');
+      return handleValueChange(mergeDateAndTime(utils, day, value != null ? value : referenceDate), 'finish', view);
     }
-    return handleValueChange(day, 'finish');
+    return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
     if (value != null && utils.isValid(value)) {
@@ -449,9 +449,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   monthsPerRow: PropTypes.oneOf([3, 4]),
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: PropTypes.func,
   /**

package/DateCalendar/DateCalendar.types.d.ts

@@ -6,7 +6,6 @@ import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeade
 import { DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, ExportedDayCalendarProps } from './DayCalendar';
 import { DateCalendarClasses } from './dateCalendarClasses';
 import { BaseDateValidationProps, YearValidationProps, MonthValidationProps, DayValidationProps } from '../internals/models/validation';
-import { PickerSelectionState } from '../internals/hooks/usePicker/usePickerValue.types';
 import { ExportedUseViewsOptions } from '../internals/hooks/useViews';
 import { DateView, TimezoneProps } from '../models';
 import { DefaultizedProps } from '../internals/models/helpers';
@@ -80,13 +79,6 @@ export interface DateCalendarProps<TDate> extends ExportedDateCalendarProps<TDat
      * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
      */
     referenceDate?: TDate;
-    /**
-     * Callback fired when the value changes.
-     * @template TDate
-     * @param {TDate | null} value The new value.
-     * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
-     */
-    onChange?: (value: TDate | null, selectionState?: PickerSelectionState) => void;
     className?: string;
     classes?: Partial<DateCalendarClasses>;
     /**

package/DigitalClock/DigitalClock.js

@@ -340,8 +340,9 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -125,7 +125,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
   }, [ampm, inViews]);
   const {
     view,
-    setValueAndGoToView,
+    setValueAndGoToNextView,
     focusedView
   } = useViews({
     view: inView,
@@ -137,7 +137,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     onFocusedViewChange
   });
   const handleMeridiemValueChange = useEventCallback(newValue => {
-    setValueAndGoToView(newValue, null, 'meridiem');
+    setValueAndGoToNextView(newValue, 'finish', 'meridiem');
   });
   const {
     meridiemMode,
@@ -221,11 +221,6 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const handleSectionChange = useEventCallback((sectionView, newValue) => {
-    const viewIndex = views.indexOf(sectionView);
-    const nextView = views[viewIndex + 1];
-    setValueAndGoToView(newValue, nextView, sectionView);
-  });
   const buildViewProps = React.useCallback(viewToBuild => {
     switch (viewToBuild) {
       case 'hours':
@@ -233,7 +228,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
           return {
             onChange: hours => {
               const valueWithMeridiem = convertValueToMeridiem(hours, meridiemMode, ampm);
-              handleSectionChange('hours', utils.setHours(valueOrReferenceDate, valueWithMeridiem));
+              setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), 'finish', 'hours');
             },
             items: getHourSectionOptions({
               now,
@@ -250,7 +245,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: minutes => {
-              handleSectionChange('minutes', utils.setMinutes(valueOrReferenceDate, minutes));
+              setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minutes), 'finish', 'minutes');
             },
             items: getTimeSectionOptions({
               value: utils.getMinutes(valueOrReferenceDate),
@@ -267,7 +262,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: seconds => {
-              handleSectionChange('seconds', utils.setSeconds(valueOrReferenceDate, seconds));
+              setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, seconds), 'finish', 'seconds');
             },
             items: getTimeSectionOptions({
               value: utils.getSeconds(valueOrReferenceDate),
@@ -302,7 +297,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       default:
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
-  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, handleSectionChange, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
+  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
       return _extends({}, result, {
@@ -412,8 +407,9 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -89,7 +89,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
   var _slots$digitalClockSe;
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
-  const previousSelected = React.useRef(null);
+  const previousActive = React.useRef(null);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -116,19 +116,15 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     if (containerRef.current === null) {
       return;
     }
-    const selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
-    if (!selectedItem || previousSelected.current === selectedItem) {
-      // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousSelected.current !== selectedItem) {
-        previousSelected.current = selectedItem;
-      }
-      return;
+    const activeItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
+    if (active && autoFocus && activeItem) {
+      activeItem.focus();
     }
-    previousSelected.current = selectedItem;
-    if (active && autoFocus) {
-      selectedItem.focus();
+    if (!activeItem || previousActive.current === activeItem) {
+      return;
     }
-    const offsetTop = selectedItem.offsetTop;
+    previousActive.current = activeItem;
+    const offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;

package/TimeClock/TimeClock.js

@@ -404,8 +404,9 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/index.js

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

package/internals/hooks/useViews.d.ts

@@ -5,7 +5,8 @@ export type PickerOnChangeFn<TDate> = (date: TDate | null, selectionState?: Pick
 export interface UseViewsOptions<TValue, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Callback fired when the value changes.
-     * @template TValue
+     * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+     * @template TView The view type. Will be one of date or time views.
      * @param {TValue} value The new value.
      * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
      * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
@@ -52,7 +53,7 @@ export interface UseViewsOptions<TValue, TView extends DateOrTimeViewWithMeridie
      */
     onFocusedViewChange?: (view: TView, hasFocus: boolean) => void;
 }
-export interface ExportedUseViewsOptions<TView extends DateOrTimeViewWithMeridiem> extends MakeOptional<Omit<UseViewsOptions<any, TView>, 'onChange'>, 'openTo' | 'views'> {
+export interface ExportedUseViewsOptions<TView extends DateOrTimeViewWithMeridiem> extends MakeOptional<UseViewsOptions<any, TView>, 'onChange' | 'openTo' | 'views'> {
 }
 interface UseViewsResponse<TValue, TView extends DateOrTimeViewWithMeridiem> {
     view: TView;
@@ -63,8 +64,7 @@ interface UseViewsResponse<TValue, TView extends DateOrTimeViewWithMeridiem> {
     previousView: TView | null;
     defaultView: TView;
     goToNextView: () => void;
-    setValueAndGoToNextView: (value: TValue, currentViewSelectionState?: PickerSelectionState) => void;
-    setValueAndGoToView: (value: TValue, newView: TView | null, selectedView: TView) => void;
+    setValueAndGoToNextView: (value: TValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView) => void;
 }
 export declare function useViews<TValue, TView extends DateOrTimeViewWithMeridiem>({ onChange, onViewChange, openTo, view: inView, views, autoFocus, focusedView: inFocusedView, onFocusedViewChange, }: UseViewsOptions<TValue, TView>): UseViewsResponse<TValue, TView>;
 export {};

package/internals/hooks/useViews.js

@@ -65,11 +65,12 @@ export function useViews({
     onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
   });
   const handleChangeView = useEventCallback(newView => {
+    // always keep the focused view in sync
+    handleFocusedViewChange(newView, true);
     if (newView === view) {
       return;
     }
     setView(newView);
-    handleFocusedViewChange(newView, true);
     if (onViewChange) {
       onViewChange(newView);
     }
@@ -78,7 +79,6 @@ export function useViews({
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   const setValueAndGoToNextView = useEventCallback((value, currentViewSelectionState, selectedView) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -87,18 +87,19 @@ export function useViews({
     // but we it's not the final view given all `views` -> overall selection state should be `partial`.
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
-    onChange(value, globalSelectionState);
-    if (isSelectionFinishedOnCurrentView) {
+    onChange(value, globalSelectionState, selectedView);
+    // Detects if the selected view is not the active one.
+    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    if (selectedView && selectedView !== view) {
+      const nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
+      if (nextViewAfterSelected) {
+        // move to next view after the selected one
+        handleChangeView(nextViewAfterSelected);
+      }
+    } else if (isSelectionFinishedOnCurrentView) {
       goToNextView();
     }
   });
-  const setValueAndGoToView = useEventCallback((value, newView, selectedView) => {
-    onChange(value, newView ? 'partial' : 'finish', selectedView);
-    if (newView) {
-      handleChangeView(newView);
-      handleFocusedViewChange(newView, true);
-    }
-  });
   return {
     view,
     setView: handleChangeView,
@@ -109,7 +110,6 @@ export function useViews({
     // Always return up to date default view instead of the initial one (i.e. defaultView.current)
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
-    setValueAndGoToNextView,
-    setValueAndGoToView
+    setValueAndGoToNextView
   };
 }

package/internals/models/props/clock.d.ts

@@ -1,6 +1,5 @@
 import { SxProps, Theme } from '@mui/material/styles';
 import { BaseTimeValidationProps, TimeValidationProps } from '../validation';
-import { PickerSelectionState } from '../../hooks/usePicker/usePickerValue.types';
 import { TimeStepOptions, TimezoneProps } from '../../../models';
 import type { ExportedDigitalClockProps } from '../../../DigitalClock/DigitalClock.types';
 import type { ExportedMultiSectionDigitalClockProps } from '../../../MultiSectionDigitalClock/MultiSectionDigitalClock.types';
@@ -29,14 +28,6 @@ export interface BaseClockProps<TDate, TView extends TimeViewWithMeridiem> exten
      * Used when the component is not controlled.
      */
     defaultValue?: TDate | null;
-    /**
-     * Callback fired when the value changes.
-     * @template TDate, TView
-     * @param {TDate | null} value The new value.
-     * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
-     * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
-     */
-    onChange?: (value: TDate | null, selectionState?: PickerSelectionState, selectedView?: TView) => void;
     /**
      * If `true`, the picker views and text field are disabled.
      * @default false

package/legacy/DateCalendar/DateCalendar.js

@@ -259,9 +259,9 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
   var handleSelectedDayChange = useEventCallback(function (day) {
     if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange(mergeDateAndTime(utils, day, value != null ? value : referenceDate), 'finish');
+      return handleValueChange(mergeDateAndTime(utils, day, value != null ? value : referenceDate), 'finish', view);
     }
-    return handleValueChange(day, 'finish');
+    return handleValueChange(day, 'finish', view);
   });
   React.useEffect(function () {
     if (value != null && utils.isValid(value)) {
@@ -458,9 +458,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   monthsPerRow: PropTypes.oneOf([3, 4]),
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: PropTypes.func,
   /**

package/legacy/DigitalClock/DigitalClock.js

@@ -357,8 +357,9 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -143,10 +143,10 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
       onFocusedViewChange: onFocusedViewChange
     }),
     view = _useViews.view,
-    setValueAndGoToView = _useViews.setValueAndGoToView,
+    setValueAndGoToNextView = _useViews.setValueAndGoToNextView,
     focusedView = _useViews.focusedView;
   var handleMeridiemValueChange = useEventCallback(function (newValue) {
-    setValueAndGoToView(newValue, null, 'meridiem');
+    setValueAndGoToNextView(newValue, 'finish', 'meridiem');
   });
   var _useMeridiemMode = useMeridiemMode(valueOrReferenceDate, ampm, handleMeridiemValueChange, 'finish'),
     meridiemMode = _useMeridiemMode.meridiemMode,
@@ -229,11 +229,6 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  var handleSectionChange = useEventCallback(function (sectionView, newValue) {
-    var viewIndex = views.indexOf(sectionView);
-    var nextView = views[viewIndex + 1];
-    setValueAndGoToView(newValue, nextView, sectionView);
-  });
   var buildViewProps = React.useCallback(function (viewToBuild) {
     switch (viewToBuild) {
       case 'hours':
@@ -241,7 +236,7 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
           return {
             onChange: function onChange(hours) {
               var valueWithMeridiem = convertValueToMeridiem(hours, meridiemMode, ampm);
-              handleSectionChange('hours', utils.setHours(valueOrReferenceDate, valueWithMeridiem));
+              setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), 'finish', 'hours');
             },
             items: getHourSectionOptions({
               now: now,
@@ -260,7 +255,7 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
         {
           return {
             onChange: function onChange(minutes) {
-              handleSectionChange('minutes', utils.setMinutes(valueOrReferenceDate, minutes));
+              setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minutes), 'finish', 'minutes');
             },
             items: getTimeSectionOptions({
               value: utils.getMinutes(valueOrReferenceDate),
@@ -281,7 +276,7 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
         {
           return {
             onChange: function onChange(seconds) {
-              handleSectionChange('seconds', utils.setSeconds(valueOrReferenceDate, seconds));
+              setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, seconds), 'finish', 'seconds');
             },
             items: getTimeSectionOptions({
               value: utils.getSeconds(valueOrReferenceDate),
@@ -324,7 +319,7 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
       default:
         throw new Error("Unknown view: ".concat(viewToBuild, " found."));
     }
-  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, handleSectionChange, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
+  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
   var viewTimeOptions = React.useMemo(function () {
     return views.reduce(function (result, currentView) {
       return _extends({}, result, _defineProperty({}, currentView, buildViewProps(currentView)));
@@ -437,8 +432,9 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -93,7 +93,7 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
   var _slots$digitalClockSe;
   var containerRef = React.useRef(null);
   var handleRef = useForkRef(ref, containerRef);
-  var previousSelected = React.useRef(null);
+  var previousActive = React.useRef(null);
   var props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -120,19 +120,15 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
     if (containerRef.current === null) {
       return;
     }
-    var selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
-    if (!selectedItem || previousSelected.current === selectedItem) {
-      // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousSelected.current !== selectedItem) {
-        previousSelected.current = selectedItem;
-      }
-      return;
+    var activeItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
+    if (active && autoFocus && activeItem) {
+      activeItem.focus();
     }
-    previousSelected.current = selectedItem;
-    if (active && autoFocus) {
-      selectedItem.focus();
+    if (!activeItem || previousActive.current === activeItem) {
+      return;
     }
-    var offsetTop = selectedItem.offsetTop;
+    previousActive.current = activeItem;
+    var offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;

package/legacy/TimeClock/TimeClock.js

@@ -416,8 +416,9 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/legacy/index.js

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

package/legacy/internals/hooks/useViews.js

@@ -75,11 +75,12 @@ export function useViews(_ref) {
     onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
   });
   var handleChangeView = useEventCallback(function (newView) {
+    // always keep the focused view in sync
+    handleFocusedViewChange(newView, true);
     if (newView === view) {
       return;
     }
     setView(newView);
-    handleFocusedViewChange(newView, true);
     if (onViewChange) {
       onViewChange(newView);
     }
@@ -88,7 +89,6 @@ export function useViews(_ref) {
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   var setValueAndGoToNextView = useEventCallback(function (value, currentViewSelectionState, selectedView) {
     var isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -97,18 +97,19 @@ export function useViews(_ref) {
     // but we it's not the final view given all `views` -> overall selection state should be `partial`.
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     var globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
-    onChange(value, globalSelectionState);
-    if (isSelectionFinishedOnCurrentView) {
+    onChange(value, globalSelectionState, selectedView);
+    // Detects if the selected view is not the active one.
+    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    if (selectedView && selectedView !== view) {
+      var nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
+      if (nextViewAfterSelected) {
+        // move to next view after the selected one
+        handleChangeView(nextViewAfterSelected);
+      }
+    } else if (isSelectionFinishedOnCurrentView) {
       goToNextView();
     }
   });
-  var setValueAndGoToView = useEventCallback(function (value, newView, selectedView) {
-    onChange(value, newView ? 'partial' : 'finish', selectedView);
-    if (newView) {
-      handleChangeView(newView);
-      handleFocusedViewChange(newView, true);
-    }
-  });
   return {
     view: view,
     setView: handleChangeView,
@@ -119,7 +120,6 @@ export function useViews(_ref) {
     // Always return up to date default view instead of the initial one (i.e. defaultView.current)
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView: goToNextView,
-    setValueAndGoToNextView: setValueAndGoToNextView,
-    setValueAndGoToView: setValueAndGoToView
+    setValueAndGoToNextView: setValueAndGoToNextView
   };
 }

package/modern/DateCalendar/DateCalendar.js

@@ -256,9 +256,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   const handleSelectedDayChange = useEventCallback(day => {
     if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange(mergeDateAndTime(utils, day, value ?? referenceDate), 'finish');
+      return handleValueChange(mergeDateAndTime(utils, day, value ?? referenceDate), 'finish', view);
     }
-    return handleValueChange(day, 'finish');
+    return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
     if (value != null && utils.isValid(value)) {
@@ -447,9 +447,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   monthsPerRow: PropTypes.oneOf([3, 4]),
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: PropTypes.func,
   /**

package/modern/DigitalClock/DigitalClock.js

@@ -339,8 +339,9 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -125,7 +125,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
   }, [ampm, inViews]);
   const {
     view,
-    setValueAndGoToView,
+    setValueAndGoToNextView,
     focusedView
   } = useViews({
     view: inView,
@@ -137,7 +137,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     onFocusedViewChange
   });
   const handleMeridiemValueChange = useEventCallback(newValue => {
-    setValueAndGoToView(newValue, null, 'meridiem');
+    setValueAndGoToNextView(newValue, 'finish', 'meridiem');
   });
   const {
     meridiemMode,
@@ -221,11 +221,6 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const handleSectionChange = useEventCallback((sectionView, newValue) => {
-    const viewIndex = views.indexOf(sectionView);
-    const nextView = views[viewIndex + 1];
-    setValueAndGoToView(newValue, nextView, sectionView);
-  });
   const buildViewProps = React.useCallback(viewToBuild => {
     switch (viewToBuild) {
       case 'hours':
@@ -233,7 +228,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
           return {
             onChange: hours => {
               const valueWithMeridiem = convertValueToMeridiem(hours, meridiemMode, ampm);
-              handleSectionChange('hours', utils.setHours(valueOrReferenceDate, valueWithMeridiem));
+              setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), 'finish', 'hours');
             },
             items: getHourSectionOptions({
               now,
@@ -250,7 +245,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: minutes => {
-              handleSectionChange('minutes', utils.setMinutes(valueOrReferenceDate, minutes));
+              setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minutes), 'finish', 'minutes');
             },
             items: getTimeSectionOptions({
               value: utils.getMinutes(valueOrReferenceDate),
@@ -267,7 +262,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: seconds => {
-              handleSectionChange('seconds', utils.setSeconds(valueOrReferenceDate, seconds));
+              setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, seconds), 'finish', 'seconds');
             },
             items: getTimeSectionOptions({
               value: utils.getSeconds(valueOrReferenceDate),
@@ -302,7 +297,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       default:
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
-  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, handleSectionChange, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
+  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
       return _extends({}, result, {
@@ -412,8 +407,9 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -88,7 +88,7 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
 export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
-  const previousSelected = React.useRef(null);
+  const previousActive = React.useRef(null);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -115,19 +115,15 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     if (containerRef.current === null) {
       return;
     }
-    const selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
-    if (!selectedItem || previousSelected.current === selectedItem) {
-      // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousSelected.current !== selectedItem) {
-        previousSelected.current = selectedItem;
-      }
-      return;
+    const activeItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
+    if (active && autoFocus && activeItem) {
+      activeItem.focus();
     }
-    previousSelected.current = selectedItem;
-    if (active && autoFocus) {
-      selectedItem.focus();
+    if (!activeItem || previousActive.current === activeItem) {
+      return;
     }
-    const offsetTop = selectedItem.offsetTop;
+    previousActive.current = activeItem;
+    const offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;

package/modern/TimeClock/TimeClock.js

@@ -404,8 +404,9 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/modern/index.js

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

package/modern/internals/hooks/useViews.js

@@ -64,11 +64,12 @@ export function useViews({
     onFocusedViewChange?.(viewToFocus, hasFocus);
   });
   const handleChangeView = useEventCallback(newView => {
+    // always keep the focused view in sync
+    handleFocusedViewChange(newView, true);
     if (newView === view) {
       return;
     }
     setView(newView);
-    handleFocusedViewChange(newView, true);
     if (onViewChange) {
       onViewChange(newView);
     }
@@ -77,7 +78,6 @@ export function useViews({
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   const setValueAndGoToNextView = useEventCallback((value, currentViewSelectionState, selectedView) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -86,18 +86,19 @@ export function useViews({
     // but we it's not the final view given all `views` -> overall selection state should be `partial`.
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
-    onChange(value, globalSelectionState);
-    if (isSelectionFinishedOnCurrentView) {
+    onChange(value, globalSelectionState, selectedView);
+    // Detects if the selected view is not the active one.
+    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    if (selectedView && selectedView !== view) {
+      const nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
+      if (nextViewAfterSelected) {
+        // move to next view after the selected one
+        handleChangeView(nextViewAfterSelected);
+      }
+    } else if (isSelectionFinishedOnCurrentView) {
       goToNextView();
     }
   });
-  const setValueAndGoToView = useEventCallback((value, newView, selectedView) => {
-    onChange(value, newView ? 'partial' : 'finish', selectedView);
-    if (newView) {
-      handleChangeView(newView);
-      handleFocusedViewChange(newView, true);
-    }
-  });
   return {
     view,
     setView: handleChangeView,
@@ -108,7 +109,6 @@ export function useViews({
     // Always return up to date default view instead of the initial one (i.e. defaultView.current)
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
-    setValueAndGoToNextView,
-    setValueAndGoToView
+    setValueAndGoToNextView
   };
 }

package/node/DateCalendar/DateCalendar.js

@@ -264,9 +264,9 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
   const handleSelectedDayChange = (0, _utils2.unstable_useEventCallback)(day => {
     if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange((0, _dateUtils.mergeDateAndTime)(utils, day, value ?? referenceDate), 'finish');
+      return handleValueChange((0, _dateUtils.mergeDateAndTime)(utils, day, value ?? referenceDate), 'finish', view);
     }
-    return handleValueChange(day, 'finish');
+    return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
     if (value != null && utils.isValid(value)) {
@@ -455,9 +455,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: _propTypes.default.func,
   /**

package/node/DigitalClock/DigitalClock.js

@@ -348,8 +348,9 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   minutesStep: _propTypes.default.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -134,7 +134,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
   }, [ampm, inViews]);
   const {
     view,
-    setValueAndGoToView,
+    setValueAndGoToNextView,
     focusedView
   } = (0, _useViews.useViews)({
     view: inView,
@@ -146,7 +146,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
     onFocusedViewChange
   });
   const handleMeridiemValueChange = (0, _useEventCallback.default)(newValue => {
-    setValueAndGoToView(newValue, null, 'meridiem');
+    setValueAndGoToNextView(newValue, 'finish', 'meridiem');
   });
   const {
     meridiemMode,
@@ -230,11 +230,6 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const handleSectionChange = (0, _useEventCallback.default)((sectionView, newValue) => {
-    const viewIndex = views.indexOf(sectionView);
-    const nextView = views[viewIndex + 1];
-    setValueAndGoToView(newValue, nextView, sectionView);
-  });
   const buildViewProps = React.useCallback(viewToBuild => {
     switch (viewToBuild) {
       case 'hours':
@@ -242,7 +237,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
           return {
             onChange: hours => {
               const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(hours, meridiemMode, ampm);
-              handleSectionChange('hours', utils.setHours(valueOrReferenceDate, valueWithMeridiem));
+              setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), 'finish', 'hours');
             },
             items: (0, _MultiSectionDigitalClock.getHourSectionOptions)({
               now,
@@ -259,7 +254,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         {
           return {
             onChange: minutes => {
-              handleSectionChange('minutes', utils.setMinutes(valueOrReferenceDate, minutes));
+              setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minutes), 'finish', 'minutes');
             },
             items: (0, _MultiSectionDigitalClock.getTimeSectionOptions)({
               value: utils.getMinutes(valueOrReferenceDate),
@@ -276,7 +271,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         {
           return {
             onChange: seconds => {
-              handleSectionChange('seconds', utils.setSeconds(valueOrReferenceDate, seconds));
+              setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, seconds), 'finish', 'seconds');
             },
             items: (0, _MultiSectionDigitalClock.getTimeSectionOptions)({
               value: utils.getSeconds(valueOrReferenceDate),
@@ -311,7 +306,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
       default:
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
-  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, handleSectionChange, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
+  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
       return (0, _extends2.default)({}, result, {
@@ -421,8 +416,9 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   minutesStep: _propTypes.default.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -97,7 +97,7 @@ const MultiSectionDigitalClockSectionItem = (0, _styles.styled)(_MenuItem.defaul
 const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
   const containerRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, containerRef);
-  const previousSelected = React.useRef(null);
+  const previousActive = React.useRef(null);
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -124,19 +124,15 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
     if (containerRef.current === null) {
       return;
     }
-    const selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
-    if (!selectedItem || previousSelected.current === selectedItem) {
-      // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousSelected.current !== selectedItem) {
-        previousSelected.current = selectedItem;
-      }
-      return;
+    const activeItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
+    if (active && autoFocus && activeItem) {
+      activeItem.focus();
     }
-    previousSelected.current = selectedItem;
-    if (active && autoFocus) {
-      selectedItem.focus();
+    if (!activeItem || previousActive.current === activeItem) {
+      return;
     }
-    const offsetTop = selectedItem.offsetTop;
+    previousActive.current = activeItem;
+    const offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;

package/node/TimeClock/TimeClock.js

@@ -412,8 +412,9 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   minutesStep: _propTypes.default.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/node/index.js

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

package/node/internals/hooks/useViews.js

@@ -73,11 +73,12 @@ function useViews({
     onFocusedViewChange?.(viewToFocus, hasFocus);
   });
   const handleChangeView = (0, _useEventCallback.default)(newView => {
+    // always keep the focused view in sync
+    handleFocusedViewChange(newView, true);
     if (newView === view) {
       return;
     }
     setView(newView);
-    handleFocusedViewChange(newView, true);
     if (onViewChange) {
       onViewChange(newView);
     }
@@ -86,7 +87,6 @@ function useViews({
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   const setValueAndGoToNextView = (0, _useEventCallback.default)((value, currentViewSelectionState, selectedView) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -95,18 +95,19 @@ function useViews({
     // but we it's not the final view given all `views` -> overall selection state should be `partial`.
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
-    onChange(value, globalSelectionState);
-    if (isSelectionFinishedOnCurrentView) {
+    onChange(value, globalSelectionState, selectedView);
+    // Detects if the selected view is not the active one.
+    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    if (selectedView && selectedView !== view) {
+      const nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
+      if (nextViewAfterSelected) {
+        // move to next view after the selected one
+        handleChangeView(nextViewAfterSelected);
+      }
+    } else if (isSelectionFinishedOnCurrentView) {
       goToNextView();
     }
   });
-  const setValueAndGoToView = (0, _useEventCallback.default)((value, newView, selectedView) => {
-    onChange(value, newView ? 'partial' : 'finish', selectedView);
-    if (newView) {
-      handleChangeView(newView);
-      handleFocusedViewChange(newView, true);
-    }
-  });
   return {
     view,
     setView: handleChangeView,
@@ -117,7 +118,6 @@ function useViews({
     // Always return up to date default view instead of the initial one (i.e. defaultView.current)
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
-    setValueAndGoToNextView,
-    setValueAndGoToView
+    setValueAndGoToNextView
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "6.18.6",
+  "version": "6.18.7",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",