@mui/x-date-pickers 7.0.0-alpha.6 → 7.0.0-alpha.7

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -140,10 +140,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,
@@ -223,11 +223,6 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, 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':
@@ -235,7 +230,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,
@@ -255,7 +250,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),
@@ -276,7 +271,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),
@@ -325,7 +320,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)));
@@ -426,8 +421,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

@@ -47,7 +47,7 @@ var MultiSectionDigitalClockSectionRoot = styled(MenuList, {
     '&:not(:first-of-type)': {
       borderLeft: "1px solid ".concat((theme.vars || theme).palette.divider)
     },
-    '&:after': {
+    '&::after': {
       display: 'block',
       content: '""',
       // subtracting the height of one item, extra margin and borders to make sure the max height is correct
@@ -121,17 +121,13 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
       return;
     }
     var activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
+    if (active && autoFocus && activeItem) {
+      activeItem.focus();
+    }
     if (!activeItem || previousActive.current === activeItem) {
-      // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousActive.current !== activeItem) {
-        previousActive.current = activeItem;
-      }
       return;
     }
     previousActive.current = activeItem;
-    if (active && autoFocus) {
-      activeItem.focus();
-    }
     var offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item

package/legacy/TimeClock/TimeClock.js

@@ -395,8 +395,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 v7.0.0-alpha.6
+ * @mui/x-date-pickers v7.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/components/PickersInput/PickersFilledInput.js

@@ -44,7 +44,7 @@ var FilledInputRoot = styled(PickersInputRoot, {
   }), "&.".concat(pickersFilledInputClasses.disabled), {
     backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
   }), !ownerState.disableUnderline && _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    '&:after': {
+    '&::after': {
       borderBottom: "2px solid ".concat((_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main),
       left: 0,
       bottom: 0,
@@ -67,7 +67,7 @@ var FilledInputRoot = styled(PickersInputRoot, {
     '&:before, &:after': {
       borderBottomColor: (theme.vars || theme).palette.error.main
     }
-  }), '&:before', {
+  }), '&::before', {
     borderBottom: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputUnderline, ")") : bottomLineColor),
     left: 0,
     bottom: 0,

package/legacy/internals/components/PickersInput/PickersStandardInput.js

@@ -28,7 +28,7 @@ var StandardInputRoot = styled(PickersInputRoot, {
       marginTop: 16
     }
   }, !ownerState.disableUnderline && _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    '&:after': {
+    '&::after': {
       background: 'red',
       borderBottom: "2px solid ".concat((theme.vars || theme).palette[ownerState.color].main),
       left: 0,
@@ -52,7 +52,7 @@ var StandardInputRoot = styled(PickersInputRoot, {
     '&:before, &:after': {
       borderBottomColor: (theme.vars || theme).palette.error.main
     }
-  }), '&:before', {
+  }), '&::before', {
     borderBottom: "1px solid ".concat(bottomLineColor),
     left: 0,
     bottom: 0,

package/legacy/internals/hooks/useViews.js

@@ -74,11 +74,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);
     }
@@ -87,7 +88,6 @@ export function useViews(_ref) {
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   var setValueAndGoToNextView = useEventCallback(function (value, currentViewSelectionState, selectedView) {
     var isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -96,18 +96,19 @@ export function useViews(_ref) {
     // but when 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,
@@ -118,7 +119,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

@@ -252,9 +252,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)) {
@@ -423,9 +423,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

@@ -327,8 +327,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

@@ -122,7 +122,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
   }, [ampm, inViews]);
   const {
     view,
-    setValueAndGoToView,
+    setValueAndGoToNextView,
     focusedView
   } = useViews({
     view: inView,
@@ -134,7 +134,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     onFocusedViewChange
   });
   const handleMeridiemValueChange = useEventCallback(newValue => {
-    setValueAndGoToView(newValue, null, 'meridiem');
+    setValueAndGoToNextView(newValue, 'finish', 'meridiem');
   });
   const {
     meridiemMode,
@@ -215,11 +215,6 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, 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':
@@ -227,7 +222,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,
@@ -245,7 +240,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),
@@ -262,7 +257,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),
@@ -299,7 +294,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, {
@@ -397,8 +392,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

@@ -47,7 +47,7 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   '&:not(:first-of-type)': {
     borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
   },
-  '&:after': {
+  '&::after': {
     display: 'block',
     content: '""',
     // subtracting the height of one item, extra margin and borders to make sure the max height is correct
@@ -116,17 +116,13 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       return;
     }
     const activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
+    if (active && autoFocus && activeItem) {
+      activeItem.focus();
+    }
     if (!activeItem || previousActive.current === activeItem) {
-      // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousActive.current !== activeItem) {
-        previousActive.current = activeItem;
-      }
       return;
     }
     previousActive.current = activeItem;
-    if (active && autoFocus) {
-      activeItem.focus();
-    }
     const offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item

package/modern/TimeClock/TimeClock.js

@@ -383,8 +383,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 v7.0.0-alpha.6
+ * @mui/x-date-pickers v7.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickersInput/PickersFilledInput.js

@@ -43,7 +43,7 @@ const FilledInputRoot = styled(PickersInputRoot, {
       backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
     }
   }, !ownerState.disableUnderline && {
-    '&:after': {
+    '&::after': {
       borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color || 'primary']?.main}`,
       left: 0,
       bottom: 0,
@@ -68,7 +68,7 @@ const FilledInputRoot = styled(PickersInputRoot, {
         borderBottomColor: (theme.vars || theme).palette.error.main
       }
     },
-    '&:before': {
+    '&::before': {
       borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
       left: 0,
       bottom: 0,

package/modern/internals/components/PickersInput/PickersStandardInput.js

@@ -26,7 +26,7 @@ const StandardInputRoot = styled(PickersInputRoot, {
       marginTop: 16
     }
   }, !ownerState.disableUnderline && {
-    '&:after': {
+    '&::after': {
       background: 'red',
       borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
       left: 0,
@@ -52,7 +52,7 @@ const StandardInputRoot = styled(PickersInputRoot, {
         borderBottomColor: (theme.vars || theme).palette.error.main
       }
     },
-    '&:before': {
+    '&::before': {
       borderBottom: `1px solid ${bottomLineColor}`,
       left: 0,
       bottom: 0,

package/modern/internals/hooks/useViews.js

@@ -63,11 +63,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);
     }
@@ -76,7 +77,6 @@ export function useViews({
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   const setValueAndGoToNextView = useEventCallback((value, currentViewSelectionState, selectedView) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -85,18 +85,19 @@ export function useViews({
     // but when 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,
@@ -107,7 +108,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

@@ -260,9 +260,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)) {
@@ -431,9 +431,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

@@ -336,8 +336,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

@@ -131,7 +131,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
   }, [ampm, inViews]);
   const {
     view,
-    setValueAndGoToView,
+    setValueAndGoToNextView,
     focusedView
   } = (0, _useViews.useViews)({
     view: inView,
@@ -143,7 +143,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
     onFocusedViewChange
   });
   const handleMeridiemValueChange = (0, _useEventCallback.default)(newValue => {
-    setValueAndGoToView(newValue, null, 'meridiem');
+    setValueAndGoToNextView(newValue, 'finish', 'meridiem');
   });
   const {
     meridiemMode,
@@ -224,11 +224,6 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, 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':
@@ -236,7 +231,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,
@@ -254,7 +249,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),
@@ -271,7 +266,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),
@@ -308,7 +303,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, {
@@ -406,8 +401,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

@@ -56,7 +56,7 @@ const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.defaul
   '&:not(:first-of-type)': {
     borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
   },
-  '&:after': {
+  '&::after': {
     display: 'block',
     content: '""',
     // subtracting the height of one item, extra margin and borders to make sure the max height is correct
@@ -125,17 +125,13 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
       return;
     }
     const activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
+    if (active && autoFocus && activeItem) {
+      activeItem.focus();
+    }
     if (!activeItem || previousActive.current === activeItem) {
-      // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousActive.current !== activeItem) {
-        previousActive.current = activeItem;
-      }
       return;
     }
     previousActive.current = activeItem;
-    if (active && autoFocus) {
-      activeItem.focus();
-    }
     const offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item