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

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/DatePicker/DatePickerToolbar.js

@@ -26,10 +26,6 @@ var DatePickerToolbarRoot = styled(PickersToolbar, {
     return styles.root;
   }
 })({});
-
-/**
- * @ignore - do not document.
- */
 var DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
@@ -52,7 +48,7 @@ var DatePickerToolbarTitle = styled(Typography, {
  *
  * - [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/)
  */
-var DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
+export var DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
   var props = useThemeProps({
     props: inProps,
     name: 'MuiDatePickerToolbar'
@@ -136,5 +132,4 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
-} : void 0;
-export { DatePickerToolbar };
+} : void 0;

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.
    */
@@ -436,6 +437,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   view: PropTypes.oneOf(['hours']),
   /**
    * Available views.
+   * @default ['hours']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours']))
 } : void 0;

package/legacy/LocalizationProvider/LocalizationProvider.js

@@ -59,7 +59,7 @@ export var LocalizationProvider = function LocalizationProvider(inProps) {
       instance: dateLibInstance
     });
     if (!adapter.isMUIAdapter) {
-      throw new Error(['MUI: The date adapter should be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`, not from `@date-io`', "For example, `import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'` instead of `import AdapterDayjs from '@date-io/dayjs'`", 'More information on the installation documentation: https://mui.com/x/react-date-pickers/getting-started/#installation'].join("\n"));
+      throw new Error(['MUI X: The date adapter should be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`, not from `@date-io`', "For example, `import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'` instead of `import AdapterDayjs from '@date-io/dayjs'`", 'More information on the installation documentation: https://mui.com/x/react-date-pickers/getting-started/#installation'].join("\n"));
     }
     return adapter;
   }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentUtils]);

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.
    */
@@ -519,6 +515,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Available views.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired)
 } : void 0;

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

@@ -121,7 +121,7 @@ var PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionLi
   var handleRootRef = useForkRef(ref, rootRef);
   var _getRoot = function getRoot(methodName) {
     if (!rootRef.current) {
-      throw new Error("MUI: Cannot call sectionListRef.".concat(methodName, " before the mount of the component"));
+      throw new Error("MUI X: Cannot call sectionListRef.".concat(methodName, " before the mount of the component."));
     }
     return rootRef.current;
   };

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.
    */
@@ -474,6 +475,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * Available views.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/legacy/hooks/useClearableField.js

@@ -42,8 +42,8 @@ export var useClearableField = function useClearableField(props) {
   });
   return _extends({}, other, {
     InputProps: _extends({}, InputProps, {
-      endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(InputAdornment, {
+      endAdornment: /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [clearable && /*#__PURE__*/_jsx(InputAdornment, {
           position: "end",
           sx: {
             marginRight: InputProps != null && InputProps.endAdornment ? -1 : -1.5
@@ -55,7 +55,7 @@ export var useClearableField = function useClearableField(props) {
             }, endClearIconProps))
           }))
         }), InputProps == null ? void 0 : InputProps.endAdornment]
-      }) : InputProps == null ? void 0 : InputProps.endAdornment
+      })
     }),
     sx: [{
       '& .clearButton': {

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.8
  *
  * @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/PickersInput.js

@@ -2,7 +2,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "inputProps", "inputRef", "sectionListRef"];
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import { useFormControl } from '@mui/material/FormControl';
 import { styled } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
@@ -16,7 +15,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var round = function round(value) {
   return Math.round(value * 1e5) / 1e5;
 };
-export var PickersInputRoot = styled(Box, {
+export var PickersInputRoot = styled('div', {
   name: 'MuiPickersInput',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
@@ -180,7 +179,7 @@ export var PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(pr
   var handleInputRef = useForkRef(inputProps == null ? void 0 : inputProps.ref, inputRef);
   var muiFormControl = useFormControl();
   if (!muiFormControl) {
-    throw new Error('MUI: PickersInput should always be used inside a PickersTextField component');
+    throw new Error('MUI X: PickersInput should always be used inside a PickersTextField component');
   }
   var handleInputFocus = function handleInputFocus(event) {
     var _muiFormControl$onFoc;

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/useField/useField.utils.js

@@ -4,7 +4,7 @@ import { getMonthsInYear } from '../../utils/date-utils';
 export var getDateSectionConfigFromFormatToken = function getDateSectionConfigFromFormatToken(utils, formatToken) {
   var config = utils.formatTokenMap[formatToken];
   if (config == null) {
-    throw new Error(["MUI: The token \"".concat(formatToken, "\" is not supported by the Date and Time Pickers."), 'Please try using another token or open an issue on https://github.com/mui/mui-x/issues/new/choose if you think it should be supported.'].join('\n'));
+    throw new Error(["MUI X: The token \"".concat(formatToken, "\" is not supported by the Date and Time Pickers."), 'Please try using another token or open an issue on https://github.com/mui/mui-x/issues/new/choose if you think it should be supported.'].join('\n'));
   }
   if (typeof config === 'string') {
     return {
@@ -87,7 +87,7 @@ export var cleanLeadingZeros = function cleanLeadingZeros(utils, valueStr, size)
 export var cleanDigitSectionValue = function cleanDigitSectionValue(utils, timezone, value, sectionBoundaries, section) {
   if (process.env.NODE_ENV !== 'production') {
     if (section.type !== 'day' && section.contentType === 'digit-with-letter') {
-      throw new Error(["MUI: The token \"".concat(section.format, "\" is a digit format with letter in it.'\n             This type of format is only supported for 'day' sections")].join('\n'));
+      throw new Error(["MUI X: The token \"".concat(section.format, "\" is a digit format with letter in it.'\n             This type of format is only supported for 'day' sections")].join('\n'));
     }
   }
   if (section.type === 'day' && section.contentType === 'digit-with-letter') {
@@ -367,7 +367,7 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
         maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
       } else {
         if (sectionConfig.maxLength == null) {
-          throw new Error("MUI: The token ".concat(token, " should have a 'maxDigitNumber' property on it's adapter"));
+          throw new Error("MUI X: The token ".concat(token, " should have a 'maxDigitNumber' property on it's adapter"));
         }
         maxLength = sectionConfig.maxLength;
         if (isValidDate) {
@@ -398,7 +398,7 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
     nextFormat = utils.expandFormat(prevFormat);
     formatExpansionOverflow -= 1;
     if (formatExpansionOverflow < 0) {
-      throw new Error('MUI: The format expansion seems to be  enter in an infinite loop. Please open an issue with the format passed to the picker component');
+      throw new Error('MUI X: The format expansion seems to be  enter in an infinite loop. Please open an issue with the format passed to the picker component.');
     }
   }
   var expandedFormat = nextFormat;
@@ -633,7 +633,7 @@ export var validateSections = function validateSections(sections, valueType) {
         return !supportedSections.includes(section.type);
       });
       if (invalidSection) {
-        console.warn("MUI: The field component you are using is not compatible with the \"".concat(invalidSection.type, "\" date section."), "The supported date sections are [\"".concat(supportedSections.join('", "'), "\"]`."));
+        console.warn("MUI X: The field component you are using is not compatible with the \"".concat(invalidSection.type, "\" date section."), "The supported date sections are [\"".concat(supportedSections.join('", "'), "\"]`."));
         warnedOnceInvalidSection = true;
       }
     }

package/legacy/internals/hooks/usePicker/usePickerValue.js

@@ -129,12 +129,12 @@ export var usePickerValue = function usePickerValue(_ref) {
   if (process.env.NODE_ENV !== 'production') {
     React.useEffect(function () {
       if (isControlled !== (inValue !== undefined)) {
-        console.error(["MUI: A component is changing the ".concat(isControlled ? '' : 'un', "controlled value of a picker to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', "Decide between using a controlled or uncontrolled value" + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        console.error(["MUI X: A component is changing the ".concat(isControlled ? '' : 'un', "controlled value of a picker to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', "Decide between using a controlled or uncontrolled value" + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
     }, [inValue]);
     React.useEffect(function () {
       if (!isControlled && defaultValue !== inDefaultValue) {
-        console.error(["MUI: A component is changing the defaultValue of an uncontrolled picker after being initialized. " + "To suppress this warning opt to use a controlled value."].join('\n'));
+        console.error(["MUI X: A component is changing the defaultValue of an uncontrolled picker after being initialized. " + "To suppress this warning opt to use a controlled value."].join('\n'));
       }
     }, [JSON.stringify(defaultValue)]);
   }

package/legacy/internals/hooks/useUtils.js

@@ -5,10 +5,10 @@ import { DEFAULT_LOCALE } from '../../locales/enUS';
 export var useLocalizationContext = function useLocalizationContext() {
   var localization = React.useContext(MuiPickersAdapterContext);
   if (localization === null) {
-    throw new Error(['MUI: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
+    throw new Error(['MUI X: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
   }
   if (localization.utils === null) {
-    throw new Error(['MUI: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
+    throw new Error(['MUI X: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
   }
   var localeText = React.useMemo(function () {
     return _extends({}, DEFAULT_LOCALE, localization.localeText);

package/legacy/internals/hooks/useViews.js

@@ -16,11 +16,11 @@ export function useViews(_ref) {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceNotValidView) {
       if (inView != null && !views.includes(inView)) {
-        console.warn("MUI: `view=\"".concat(inView, "\"` is not a valid prop."), "It must be an element of `views=[\"".concat(views.join('", "'), "\"]`."));
+        console.warn("MUI X: `view=\"".concat(inView, "\"` is not a valid prop."), "It must be an element of `views=[\"".concat(views.join('", "'), "\"]`."));
         warnedOnceNotValidView = true;
       }
       if (inView == null && openTo != null && !views.includes(openTo)) {
-        console.warn("MUI: `openTo=\"".concat(openTo, "\"` is not a valid prop."), "It must be an element of `views=[\"".concat(views.join('", "'), "\"]`."));
+        console.warn("MUI X: `openTo=\"".concat(openTo, "\"` is not a valid prop."), "It must be an element of `views=[\"".concat(views.join('", "'), "\"]`."));
         warnedOnceNotValidView = true;
       }
     }
@@ -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/legacy/internals/index.js

@@ -14,10 +14,12 @@ export { useField, createDateStrForInputFromSections, addPositionPropertiesToSec
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
+export { useViews } from './hooks/useViews';
 export { useValidation } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
-export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem } from './utils/date-utils';
+export { resolveTimeViewsResponse } from './utils/date-time-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
@@ -26,6 +28,8 @@ export { extractValidationProps } from './utils/validation/extractValidationProp
 export { validateDate } from './utils/validation/validateDate';
 export { validateDateTime } from './utils/validation/validateDateTime';
 export { validateTime } from './utils/validation/validateTime';
+export { applyDefaultViewProps } from './utils/views';
 export { buildDeprecatedPropsWarning, buildWarning } from './utils/warning';
 export { DayCalendar } from '../DateCalendar/DayCalendar';
-export { useCalendarState } from '../DateCalendar/useCalendarState';
+export { useCalendarState } from '../DateCalendar/useCalendarState';
+export { isTimeView } from './utils/time-utils';

package/legacy/internals/utils/views.js

@@ -20,7 +20,7 @@ export var applyDefaultViewProps = function applyDefaultViewProps(_ref) {
   } else if (viewsWithDefault.length > 0) {
     openToWithDefault = viewsWithDefault[0];
   } else {
-    throw new Error('MUI: The `views` prop must contain at least one view');
+    throw new Error('MUI X: The `views` prop must contain at least one view.');
   }
   return {
     views: viewsWithDefault,

package/legacy/locales/index.js

@@ -1,6 +1,7 @@
 export * from './beBY';
 export * from './caES';
 export * from './csCZ';
+export * from './daDK';
 export * from './deDE';
 export * from './elGR';
 export * from './enUS';

package/locales/enUS.d.ts

@@ -24,7 +24,7 @@ export declare const enUS: {
                     hoursClockNumberText?: ((hours: string) => string) | undefined;
                     minutesClockNumberText?: ((minutes: string) => string) | undefined;
                     secondsClockNumberText?: ((seconds: string) => string) | undefined;
-                    selectViewText?: ((view: import("../internals/models").TimeViewWithMeridiem) => string) | undefined;
+                    selectViewText?: ((view: import("../internals").TimeViewWithMeridiem) => string) | undefined;
                     openDatePickerDialogue?: ((date: any, utils: import("..").MuiPickersAdapter<any, any>) => string) | undefined;
                     openTimePickerDialogue?: ((date: any, utils: import("..").MuiPickersAdapter<any, any>) => string) | undefined;
                     fieldClearLabel?: string | undefined;

package/locales/index.d.ts

@@ -1,6 +1,7 @@
 export * from './beBY';
 export * from './caES';
 export * from './csCZ';
+export * from './daDK';
 export * from './deDE';
 export * from './elGR';
 export * from './enUS';

package/locales/index.js

@@ -1,6 +1,7 @@
 export * from './beBY';
 export * from './caES';
 export * from './csCZ';
+export * from './daDK';
 export * from './deDE';
 export * from './elGR';
 export * from './enUS';

package/locales/mk.d.ts

@@ -22,7 +22,7 @@ export declare const mk: {
                     hoursClockNumberText?: ((hours: string) => string) | undefined;
                     minutesClockNumberText?: ((minutes: string) => string) | undefined;
                     secondsClockNumberText?: ((seconds: string) => string) | undefined;
-                    selectViewText?: ((view: import("../internals/models").TimeViewWithMeridiem) => string) | undefined;
+                    selectViewText?: ((view: import("../internals").TimeViewWithMeridiem) => string) | undefined;
                     openDatePickerDialogue?: ((date: any, utils: import("..").MuiPickersAdapter<any, any>) => string) | undefined;
                     openTimePickerDialogue?: ((date: any, utils: import("..").MuiPickersAdapter<any, any>) => string) | undefined;
                     fieldClearLabel?: string | undefined;

package/locales/utils/getPickersLocalization.d.ts

@@ -23,7 +23,7 @@ export declare const getPickersLocalization: (pickersTranslations: Partial<Picke
                     hoursClockNumberText?: ((hours: string) => string) | undefined;
                     minutesClockNumberText?: ((minutes: string) => string) | undefined;
                     secondsClockNumberText?: ((seconds: string) => string) | undefined;
-                    selectViewText?: ((view: import("../../internals/models").TimeViewWithMeridiem) => string) | undefined;
+                    selectViewText?: ((view: import("../../internals").TimeViewWithMeridiem) => string) | undefined;
                     openDatePickerDialogue?: ((date: any, utils: import("../..").MuiPickersAdapter<any, any>) => string) | undefined;
                     openTimePickerDialogue?: ((date: any, utils: import("../..").MuiPickersAdapter<any, any>) => string) | undefined;
                     fieldClearLabel?: string | undefined;