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

package/internals/components/PickersInput/pickersInputClasses.d.ts

@@ -0,0 +1,84 @@
+export interface PickersInputClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if focused. */
+    focused: string;
+    /** State class applied to the root element if `disabled=true`. */
+    disabled: string;
+    /** State class applied to the root element if `readOnly=true`. */
+    readOnly: string;
+    /** State class applied to the root element if `error=true`. */
+    error: string;
+    /** Styles applied to the NotchedOutline element. */
+    notchedOutline: string;
+    /** Styles applied to the real hidden input element. */
+    input: string;
+    /** Styles applied to the container of the sections. */
+    sectionsContainer: string;
+    /** Styles applied to the content of a section. */
+    sectionContent: string;
+    /** Styles applied to the separator before a section */
+    sectionBefore: string;
+    /** Styles applied to the separator after a section */
+    sectionAfter: string;
+    /** Styles applied to the root if there is a startAdornment present */
+    adornedStart: string;
+    /** Styles applied to the root if there is an endAdornment present */
+    adornedEnd: string;
+    /** Styles applied to the root element unless `disableUnderline={true}`. */
+    underline?: string;
+}
+export type PickersInputClassKey = keyof PickersInputClasses;
+export declare function getPickersInputUtilityClass(slot: string): string;
+export declare function getPickersOutlinedInputUtilityClass(slot: string): string;
+export declare function getPickersFilledInputUtilityClass(slot: string): string;
+export declare function getPickersStandardInputUtilityClass(slot: string): string;
+export declare const pickersInputClasses: Record<keyof PickersInputClasses, string>;
+export declare const pickersOutlinedInputClasses: {
+    underline: string;
+    disabled: string;
+    input: string;
+    readOnly: string;
+    error: string;
+    focused: string;
+    root: string;
+    adornedStart: string;
+    adornedEnd: string;
+    notchedOutline: string;
+    sectionContent: string;
+    sectionsContainer: string;
+    sectionBefore: string;
+    sectionAfter: string;
+};
+export declare const pickersFilledInputClasses: {
+    underline: string;
+    disabled: string;
+    input: string;
+    readOnly: string;
+    error: string;
+    focused: string;
+    root: string;
+    adornedStart: string;
+    adornedEnd: string;
+    notchedOutline: string;
+    sectionContent: string;
+    sectionsContainer: string;
+    sectionBefore: string;
+    sectionAfter: string;
+};
+export declare const pickersStandardInputClasses: {
+    underline: string;
+    disabled: string;
+    input: string;
+    readOnly: string;
+    error: string;
+    focused: string;
+    root: string;
+    adornedStart: string;
+    adornedEnd: string;
+    notchedOutline: string;
+    sectionContent: string;
+    sectionsContainer: string;
+    sectionBefore: string;
+    sectionAfter: string;
+};

package/internals/components/PickersInput/pickersInputClasses.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getPickersInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersInput', slot);
+}
+export function getPickersOutlinedInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersOutlinedInput', slot);
+}
+export function getPickersFilledInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersFilledInput', slot);
+}
+export function getPickersStandardInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersStandardInput', slot);
+}
+export const pickersInputClasses = generateUtilityClasses('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input']);
+export const pickersOutlinedInputClasses = _extends({}, pickersInputClasses, generateUtilityClasses('MuiPickersOutlinedInput', ['root', 'notchedOutline', 'input']));
+export const pickersFilledInputClasses = _extends({}, pickersInputClasses, generateUtilityClasses('MuiPickersFilledInput', ['root', 'underline', 'input']));
+export const pickersStandardInputClasses = _extends({}, pickersInputClasses, generateUtilityClasses('MuiPickersStandardInput', ['root', 'underline', 'input']));

package/internals/components/PickersTextField/PickersTextField.d.ts

@@ -1,3 +1,2 @@
 import * as React from 'react';
-import { PickersTextFieldProps } from './PickersTextField.types';
-export declare const PickersTextField: React.ForwardRefExoticComponent<Omit<PickersTextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PickersTextField: React.ForwardRefExoticComponent<(Omit<import("./PickersTextField.types").PickersStandardTextFieldProps, "ref"> | Omit<import("./PickersTextField.types").PickersOutlinedTextFieldProps, "ref"> | Omit<import("./PickersTextField.types").PickersFilledTextFieldProps, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/internals/components/PickersTextField/PickersTextField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "required", "variant", "InputProps", "inputProps", "inputRef", "sectionsContainerRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
@@ -10,9 +10,16 @@ import InputLabel from '@mui/material/InputLabel';
 import FormHelperText from '@mui/material/FormHelperText';
 import FormControl from '@mui/material/FormControl';
 import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
-import { PickersInput } from './PickersInput';
+import { PickersOutlinedInput } from '../PickersInput/PickersOutlinedInput';
+import { PickersFilledInput } from '../PickersInput/PickersFilledInput';
+import { PickersStandardInput } from '../PickersInput/PickersStandardInput';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const VARIANT_COMPONENT = {
+  standard: PickersStandardInput,
+  filled: PickersFilledInput,
+  outlined: PickersOutlinedInput
+};
 const PickersTextFieldRoot = styled(FormControl, {
   name: 'MuiPickersTextField',
   slot: 'Root',
@@ -39,13 +46,13 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
       color = 'primary',
       disabled = false,
       error = false,
-      required = false,
       variant = 'outlined',
+      required = false,
       // Props used by PickersInput
       InputProps,
       inputProps,
       inputRef,
-      sectionsContainerRef,
+      sectionListRef,
       elements,
       areAllSectionsEmpty,
       onClick,
@@ -83,6 +90,7 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
     variant
   });
   const classes = useUtilityClasses(ownerState);
+  const PickersInputComponent = VARIANT_COMPONENT[variant];
   return /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
     className: clsx(classes.root, className),
     ref: handleRootRef,
@@ -93,6 +101,7 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
     variant: variant,
     error: error,
     color: color,
+    fullWidth: fullWidth,
     required: required,
     ownerState: ownerState
   }, other, {
@@ -101,7 +110,7 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
       id: inputLabelId
     }, InputLabelProps, {
       children: label
-    })), /*#__PURE__*/_jsx(PickersInput, _extends({
+    })), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
       elements: elements,
       areAllSectionsEmpty: areAllSectionsEmpty,
       onClick: onClick,
@@ -118,7 +127,7 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
       fullWidth: fullWidth,
       inputProps: inputProps,
       inputRef: inputRef,
-      sectionsContainerRef: sectionsContainerRef,
+      sectionListRef: sectionListRef,
       label: label
     }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
       id: helperTextId

package/internals/components/PickersTextField/PickersTextField.types.d.ts

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { FormControlProps } from '@mui/material/FormControl';
 import { FormHelperTextProps } from '@mui/material/FormHelperText';
 import { InputLabelProps } from '@mui/material/InputLabel';
-import { PickersInputOtherProps, PickersInputPropsUsedByField } from './PickersInput.types';
+import { TextFieldVariants } from '@mui/material/TextField';
+import { PickersFilledInputProps, PickersInputPropsUsedByField, PickersOutlinedInputProps, PickersStandardInputProps } from '../PickersInput/PickersInput.types';
 interface PickersTextFieldPropsUsedByField {
     onFocus: React.FocusEventHandler<HTMLDivElement>;
     onBlur: React.FocusEventHandler<HTMLDivElement>;
     disabled: boolean;
     error: boolean;
 }
-export interface PickersTextFieldProps extends PickersInputPropsUsedByField, PickersTextFieldPropsUsedByField, Omit<FormControlProps, keyof PickersInputPropsUsedByField | keyof PickersTextFieldPropsUsedByField> {
-    InputProps?: PickersInputOtherProps;
+export interface PickersBaseTextFieldProps extends PickersInputPropsUsedByField, PickersTextFieldPropsUsedByField, Omit<FormControlProps, keyof PickersInputPropsUsedByField | keyof PickersTextFieldPropsUsedByField> {
     FormHelperTextProps?: Partial<FormHelperTextProps>;
     InputLabelProps?: Partial<InputLabelProps>;
     /**
@@ -18,4 +18,47 @@ export interface PickersTextFieldProps extends PickersInputPropsUsedByField, Pic
      */
     helperText?: React.ReactNode;
 }
+export interface PickersStandardTextFieldProps extends PickersBaseTextFieldProps {
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: 'standard';
+    /**
+     * Props applied to the Input element.
+     * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+     * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+     * component depending on the `variant` prop value.
+     */
+    InputProps?: Partial<PickersStandardInputProps>;
+}
+export interface PickersOutlinedTextFieldProps extends PickersBaseTextFieldProps {
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: 'outlined';
+    /**
+     * Props applied to the Input element.
+     * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+     * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+     * component depending on the `variant` prop value.
+     */
+    InputProps?: Partial<PickersOutlinedInputProps>;
+}
+export interface PickersFilledTextFieldProps extends PickersBaseTextFieldProps {
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: 'filled';
+    /**
+     * Props applied to the Input element.
+     * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+     * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+     * component depending on the `variant` prop value.
+     */
+    InputProps?: Partial<PickersFilledInputProps>;
+}
+export type PickersTextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> = Variant extends 'filled' ? PickersFilledTextFieldProps : Variant extends 'standard' ? PickersStandardTextFieldProps : PickersOutlinedTextFieldProps;
 export {};

package/internals/components/PickersTextField/pickersTextFieldClasses.d.ts

@@ -13,34 +13,3 @@ export interface PickersTextFieldClasses {
 export type PickersTextFieldClassKey = keyof PickersTextFieldClasses;
 export declare function getPickersTextFieldUtilityClass(slot: string): string;
 export declare const pickersTextFieldClasses: Record<keyof PickersTextFieldClasses, string>;
-export interface PickersInputClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if focused. */
-    focused: string;
-    /** State class applied to the root element if `disabled=true`. */
-    disabled: string;
-    /** State class applied to the root element if `readOnly=true`. */
-    readOnly: string;
-    /** State class applied to the root element if `error=true`. */
-    error: string;
-    /** Styles applied to the NotchedOutline element. */
-    notchedOutline: string;
-    /** Styles applied to the real hidden input element. */
-    input: string;
-    /** Styles applied to the container of the sections. */
-    sectionsContainer: string;
-    /** Styles applied to the content of a section. */
-    sectionContent: string;
-    /** Styles applied to the separator before a section */
-    sectionBefore: string;
-    /** Styles applied to the separator after a section */
-    sectionAfter: string;
-    /** Styles applied to the root if there is a startAdornment present */
-    adornedStart: string;
-    /** Styles applied to the root if there is an endAdornment present */
-    adornedEnd: string;
-}
-export type PickersInputClassKey = keyof PickersInputClasses;
-export declare function getPickersInputUtilityClass(slot: string): string;
-export declare const pickersInputClasses: Record<keyof PickersInputClasses, string>;

package/internals/components/PickersTextField/pickersTextFieldClasses.js

@@ -1,9 +1,6 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPickersTextFieldUtilityClass(slot) {
   return generateUtilityClass('MuiPickersTextField', slot);
 }
-export const pickersTextFieldClasses = generateUtilityClasses('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);
-export function getPickersInputUtilityClass(slot) {
-  return generateUtilityClass('MuiPickersInput', slot);
-}
-export const pickersInputClasses = generateUtilityClasses('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'adornedStart', 'adornedEnd', 'input', 'sectionsContainer', 'sectionContent', 'sectionBefore', 'sectionAfter']);
+export const pickersTextFieldClasses = generateUtilityClasses('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);

package/internals/hooks/useField/useField.js

@@ -143,7 +143,14 @@ export const useField = params => {
       const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
       const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
       if (isValidPastedValue) {
-        // Early return to let the paste update section, value
+        resetCharacterQuery();
+        updateSectionValue({
+          activeSection,
+          newSectionValue: pastedValue,
+          shouldGoToNextSection: true
+        });
+        // prevent default to avoid the input change handler being called
+        event.preventDefault();
         return;
       }
       if (lettersOnly || digitsOnly) {

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

@@ -64,11 +64,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);
     }
@@ -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 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,
@@ -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/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

@@ -255,9 +255,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)) {
@@ -434,9 +434,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

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

@@ -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