@mui/x-date-pickers 6.5.0 → 6.6.0

package/legacy/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -0,0 +1,147 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import Divider from '@mui/material/Divider';
+import { resolveComponentProps } from '@mui/base/utils';
+import { DateCalendar } from '../DateCalendar';
+import { MultiSectionDigitalClock, multiSectionDigitalClockSectionClasses } from '../MultiSectionDigitalClock';
+import { DateTimeViewWrapper } from '../internals/components/DateTimeViewWrapper';
+import { isInternalTimeView } from '../internals/utils/time-utils';
+import { isDatePickerView } from '../internals/utils/date-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref) {
+  var _resolveComponentProp, _resolveComponentProp2, _slotProps$actionBar;
+  var view = _ref.view,
+    onViewChange = _ref.onViewChange,
+    views = _ref.views,
+    focusedView = _ref.focusedView,
+    onFocusedViewChange = _ref.onFocusedViewChange,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    classes = _ref.classes,
+    disableFuture = _ref.disableFuture,
+    disablePast = _ref.disablePast,
+    minDate = _ref.minDate,
+    minTime = _ref.minTime,
+    maxDate = _ref.maxDate,
+    maxTime = _ref.maxTime,
+    shouldDisableDate = _ref.shouldDisableDate,
+    shouldDisableMonth = _ref.shouldDisableMonth,
+    shouldDisableYear = _ref.shouldDisableYear,
+    shouldDisableTime = _ref.shouldDisableTime,
+    shouldDisableClock = _ref.shouldDisableClock,
+    reduceAnimations = _ref.reduceAnimations,
+    minutesStep = _ref.minutesStep,
+    ampm = _ref.ampm,
+    onMonthChange = _ref.onMonthChange,
+    monthsPerRow = _ref.monthsPerRow,
+    onYearChange = _ref.onYearChange,
+    yearsPerRow = _ref.yearsPerRow,
+    defaultCalendarMonth = _ref.defaultCalendarMonth,
+    components = _ref.components,
+    componentsProps = _ref.componentsProps,
+    slots = _ref.slots,
+    slotProps = _ref.slotProps,
+    loading = _ref.loading,
+    renderLoading = _ref.renderLoading,
+    disableHighlightToday = _ref.disableHighlightToday,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    showDaysOutsideCurrentMonth = _ref.showDaysOutsideCurrentMonth,
+    dayOfWeekFormatter = _ref.dayOfWeekFormatter,
+    sx = _ref.sx,
+    autoFocus = _ref.autoFocus,
+    fixedWeekNumber = _ref.fixedWeekNumber,
+    displayWeekNumber = _ref.displayWeekNumber,
+    disableIgnoringDatePartForTimeValidation = _ref.disableIgnoringDatePartForTimeValidation,
+    timeSteps = _ref.timeSteps,
+    skipDisabled = _ref.skipDisabled,
+    timeViewsCount = _ref.timeViewsCount;
+  var isActionBarVisible = !!((_resolveComponentProp = resolveComponentProps((_slotProps$actionBar = slotProps == null ? void 0 : slotProps.actionBar) != null ? _slotProps$actionBar : componentsProps == null ? void 0 : componentsProps.actionBar, {})) != null && (_resolveComponentProp2 = _resolveComponentProp.actions) != null && _resolveComponentProp2.length);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs(DateTimeViewWrapper, {
+      children: [/*#__PURE__*/_jsx(DateCalendar, {
+        view: isDatePickerView(view) ? view : 'day',
+        onViewChange: onViewChange,
+        views: views.filter(isDatePickerView),
+        focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
+        onFocusedViewChange: onFocusedViewChange,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: onChange,
+        className: className,
+        classes: classes,
+        disableFuture: disableFuture,
+        disablePast: disablePast,
+        minDate: minDate,
+        maxDate: maxDate,
+        shouldDisableDate: shouldDisableDate,
+        shouldDisableMonth: shouldDisableMonth,
+        shouldDisableYear: shouldDisableYear,
+        reduceAnimations: reduceAnimations,
+        onMonthChange: onMonthChange,
+        monthsPerRow: monthsPerRow,
+        onYearChange: onYearChange,
+        yearsPerRow: yearsPerRow,
+        defaultCalendarMonth: defaultCalendarMonth,
+        components: components,
+        componentsProps: componentsProps,
+        slots: slots,
+        slotProps: slotProps,
+        loading: loading,
+        renderLoading: renderLoading,
+        disableHighlightToday: disableHighlightToday,
+        readOnly: readOnly,
+        disabled: disabled,
+        showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
+        dayOfWeekFormatter: dayOfWeekFormatter,
+        sx: sx,
+        autoFocus: autoFocus,
+        fixedWeekNumber: fixedWeekNumber,
+        displayWeekNumber: displayWeekNumber
+      }), timeViewsCount > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Divider, {
+          orientation: "vertical"
+        }), /*#__PURE__*/_jsx(MultiSectionDigitalClock, {
+          view: isInternalTimeView(view) ? view : 'hours',
+          onViewChange: onViewChange,
+          focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
+          onFocusedViewChange: onFocusedViewChange,
+          views: views.filter(isInternalTimeView),
+          value: value,
+          defaultValue: defaultValue,
+          onChange: onChange,
+          className: className,
+          classes: classes,
+          disableFuture: disableFuture,
+          disablePast: disablePast,
+          minTime: minTime,
+          maxTime: maxTime,
+          shouldDisableTime: shouldDisableTime,
+          shouldDisableClock: shouldDisableClock,
+          minutesStep: minutesStep,
+          ampm: ampm,
+          components: components,
+          componentsProps: componentsProps,
+          slots: slots,
+          slotProps: slotProps,
+          readOnly: readOnly,
+          disabled: disabled,
+          sx: _extends(_defineProperty({
+            borderBottom: 0,
+            width: 'auto'
+          }, ".".concat(multiSectionDigitalClockSectionClasses.root), {
+            maxHeight: '100%'
+          }), Array.isArray(sx) ? sx : [sx]),
+          autoFocus: autoFocus,
+          disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
+          timeSteps: timeSteps,
+          skipDisabled: skipDisabled
+        })]
+      })]
+    }), isActionBarVisible && /*#__PURE__*/_jsx(Divider, {})]
+  });
+};

package/legacy/dateTimeViewRenderers/index.js

@@ -0,0 +1 @@
+export { renderDesktopDateTimeView } from './dateTimeViewRenderers';

package/legacy/dateViewRenderers/dateViewRenderers.js

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { DateCalendar } from '../DateCalendar';
+import { isDatePickerView } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-var isDatePickerView = function isDatePickerView(view) {
-  return view === 'year' || view === 'month' || view === 'day';
-};
 export var renderDateViewCalendar = function renderDateViewCalendar(_ref) {
   var view = _ref.view,
     onViewChange = _ref.onViewChange,
@@ -47,7 +45,7 @@ export var renderDateViewCalendar = function renderDateViewCalendar(_ref) {
     view: view,
     onViewChange: onViewChange,
     views: views.filter(isDatePickerView),
-    focusedView: focusedView,
+    focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
     onFocusedViewChange: onFocusedViewChange,
     value: value,
     defaultValue: defaultValue,

package/legacy/{internals/components/icons → icons}/index.js

@@ -6,35 +6,35 @@ import * as React from 'react';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ArrowDropDown = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
 /**
  * @ignore - internal component.
  */
-export var ArrowLeft = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var ArrowLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
 }), 'ArrowLeft');
 
 /**
  * @ignore - internal component.
  */
-export var ArrowRight = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var ArrowRightIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
 }), 'ArrowRight');
 
 /**
  * @ignore - internal component.
  */
-export var Calendar = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var CalendarIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
 }), 'Calendar');
 
 /**
  * @ignore - internal component.
  */
-export var Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export var ClockIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {
@@ -45,14 +45,14 @@ export var Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
 /**
  * @ignore - internal component.
  */
-export var DateRange = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var DateRangeIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
 }), 'DateRange');
 
 /**
  * @ignore - internal component.
  */
-export var Time = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export var TimeIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.5.0
+ * @mui/x-date-pickers v6.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -47,4 +47,5 @@ export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
-export * from './models';
+export * from './models';
+export * from './icons';

package/legacy/internals/components/DateTimeViewWrapper/DateTimeViewWrapper.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+export var DateTimeViewWrapper = styled('div')({
+  display: 'flex',
+  margin: '0 auto'
+});

package/legacy/internals/components/DateTimeViewWrapper/index.js

@@ -0,0 +1 @@
+export { DateTimeViewWrapper } from './DateTimeViewWrapper';

package/legacy/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -11,7 +11,7 @@ import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useSlotProps } from '@mui/base/utils';
 import IconButton from '@mui/material/IconButton';
-import { ArrowLeft, ArrowRight } from '../icons';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons';
 import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -130,7 +130,7 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
     }),
     className: classes.button
   });
-  var LeftArrowIcon = (_slots$leftArrowIcon = slots == null ? void 0 : slots.leftArrowIcon) != null ? _slots$leftArrowIcon : ArrowLeft;
+  var LeftArrowIcon = (_slots$leftArrowIcon = slots == null ? void 0 : slots.leftArrowIcon) != null ? _slots$leftArrowIcon : ArrowLeftIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   var _useSlotProps = useSlotProps({
       elementType: LeftArrowIcon,
@@ -142,7 +142,7 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
     }),
     leftArrowIconOwnerState = _useSlotProps.ownerState,
     leftArrowIconProps = _objectWithoutProperties(_useSlotProps, _excluded2);
-  var RightArrowIcon = (_slots$rightArrowIcon = slots == null ? void 0 : slots.rightArrowIcon) != null ? _slots$rightArrowIcon : ArrowRight;
+  var RightArrowIcon = (_slots$rightArrowIcon = slots == null ? void 0 : slots.rightArrowIcon) != null ? _slots$rightArrowIcon : ArrowRightIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   var _useSlotProps2 = useSlotProps({
       elementType: RightArrowIcon,

package/legacy/internals/components/PickersToolbarButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant"];
+var _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Button from '@mui/material/Button';
@@ -38,13 +38,18 @@ export var PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Pickers
     typographyClassName = props.typographyClassName,
     value = props.value,
     variant = props.variant,
+    width = props.width,
     other = _objectWithoutProperties(props, _excluded);
   var classes = useUtilityClasses(props);
   return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
     variant: "text",
     ref: ref,
     className: clsx(className, classes.root)
-  }, other, {
+  }, width ? {
+    sx: {
+      width: width
+    }
+  } : {}, other, {
     children: /*#__PURE__*/_jsx(PickersToolbarText, {
       align: align,
       className: typographyClassName,

package/legacy/internals/constants/dimensions.js

@@ -2,4 +2,5 @@ export var DAY_SIZE = 36;
 export var DAY_MARGIN = 2;
 export var DIALOG_WIDTH = 320;
 export var VIEW_HEIGHT = 358;
-export var DIGITAL_CLOCK_VIEW_HEIGHT = 232;
+export var DIGITAL_CLOCK_VIEW_HEIGHT = 232;
+export var MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/legacy/internals/hooks/useField/useField.js

@@ -168,7 +168,7 @@ export var useField = function useField(params) {
       return;
     }
     var keyPressed;
-    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
+    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1 && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
       var prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
@@ -191,7 +191,7 @@ export var useField = function useField(params) {
 
       // The active section being selected, the browser has replaced its value with the key pressed by the user.
       var activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
-      keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+      keyPressed = cleanValueStr.slice(activeSection.start + cleanString(activeSection.startSeparator || '').length, activeSectionEndRelativeToNewValue);
     }
     if (isAndroid() && keyPressed.length === 0) {
       setTempAndroidValueStr(valueStr);
@@ -307,7 +307,12 @@ export var useField = function useField(params) {
     if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
       // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
       var currentScrollTop = inputRef.current.scrollTop;
-      inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      // On multi input range pickers we want to update selection range only for the active input
+      // This helps avoiding the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
+      // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
+      if (inputRef.current && inputRef.current === getActiveElement(document)) {
+        inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      }
       // Even reading this variable seems to do the trick, but also setting it just to make use of it
       inputRef.current.scrollTop = currentScrollTop;
     }

package/legacy/internals/hooks/useField/useFieldState.js

@@ -6,6 +6,7 @@ import useControlled from '@mui/utils/useControlled';
 import { useTheme } from '@mui/material/styles';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
 import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySectionIfPossible, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
+import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
 export var useFieldState = function useFieldState(params) {
   var _ref;
   var utils = useUtils();
@@ -21,6 +22,7 @@ export var useFieldState = function useFieldState(params) {
     _params$internalProps = params.internalProps,
     valueProp = _params$internalProps.value,
     defaultValue = _params$internalProps.defaultValue,
+    referenceDateProp = _params$internalProps.referenceDate,
     onChange = _params$internalProps.onChange,
     format = _params$internalProps.format,
     _params$internalProps2 = _params$internalProps.formatDensity,
@@ -46,12 +48,24 @@ export var useFieldState = function useFieldState(params) {
   var _React$useState = React.useState(function () {
       var sections = getSectionsFromValue(valueFromTheOutside);
       validateSections(sections, valueType);
-      return {
+      var stateWithoutReferenceDate = {
         sections: sections,
         value: valueFromTheOutside,
-        referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, valueManager.getTodayValue(utils, valueType)),
+        referenceValue: valueManager.emptyValue,
         tempValueStrAndroid: null
       };
+      var granularity = getSectionTypeGranularity(sections);
+      var referenceValue = valueManager.getInitialReferenceValue({
+        referenceDate: referenceDateProp,
+        value: valueFromTheOutside,
+        valueType: valueType,
+        utils: utils,
+        props: internalProps,
+        granularity: granularity
+      });
+      return _extends({}, stateWithoutReferenceDate, {
+        referenceValue: referenceValue
+      });
     }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     state = _React$useState2[0],
@@ -271,7 +285,13 @@ export var useFieldState = function useFieldState(params) {
     });
   };
   React.useEffect(function () {
+    var shouldUpdate = false;
     if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
+      shouldUpdate = true;
+    } else {
+      shouldUpdate = valueManager.getTimezone(utils, state.value) !== valueManager.getTimezone(utils, valueFromTheOutside);
+    }
+    if (shouldUpdate) {
       setState(function (prevState) {
         return _extends({}, prevState, {
           value: valueFromTheOutside,

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

@@ -80,14 +80,13 @@ export var usePickerViews = function usePickerViews(_ref) {
     }, [disableOpenPicker, viewRenderers, views]),
     hasUIView = _React$useMemo.hasUIView,
     viewModeLookup = _React$useMemo.viewModeLookup;
-  var hasMultipleUITimeView = React.useMemo(function () {
-    var numberUITimeViews = views.reduce(function (acc, viewForReduce) {
+  var timeViewsCount = React.useMemo(function () {
+    return views.reduce(function (acc, viewForReduce) {
       if (viewRenderers[viewForReduce] != null && isTimeView(viewForReduce)) {
         return acc + 1;
       }
       return acc;
     }, 0);
-    return numberUITimeViews > 1;
   }, [viewRenderers, views]);
   var currentViewMode = viewModeLookup[view];
   var shouldRestoreFocus = useEventCallback(function () {
@@ -155,7 +154,8 @@ export var usePickerViews = function usePickerViews(_ref) {
         onViewChange: setView,
         focusedView: focusedView,
         onFocusedViewChange: setFocusedView,
-        showViewSwitcher: hasMultipleUITimeView
+        showViewSwitcher: timeViewsCount > 1,
+        timeViewsCount: timeViewsCount
       }));
     }
   };

package/legacy/internals/hooks/useViews.js

@@ -60,15 +60,6 @@ export function useViews(_ref) {
   var viewIndex = views.indexOf(view);
   var previousView = (_views = views[viewIndex - 1]) != null ? _views : null;
   var nextView = (_views2 = views[viewIndex + 1]) != null ? _views2 : null;
-  var handleChangeView = useEventCallback(function (newView) {
-    if (newView === view) {
-      return;
-    }
-    setView(newView);
-    if (onViewChange) {
-      onViewChange(newView);
-    }
-  });
   var handleFocusedViewChange = useEventCallback(function (viewToFocus, hasFocus) {
     if (hasFocus) {
       // Focus event
@@ -83,6 +74,16 @@ export function useViews(_ref) {
 
     onFocusedViewChange == null ? void 0 : onFocusedViewChange(viewToFocus, hasFocus);
   });
+  var handleChangeView = useEventCallback(function (newView) {
+    if (newView === view) {
+      return;
+    }
+    setView(newView);
+    handleFocusedViewChange(newView, true);
+    if (onViewChange) {
+      onViewChange(newView);
+    }
+  });
   var goToNextView = useEventCallback(function () {
     if (nextView) {
       handleChangeView(nextView);

package/legacy/internals/index.js

@@ -15,8 +15,9 @@ export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
 export { useValidation } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate } from './utils/date-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
+export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';

package/legacy/internals/utils/date-utils.js

@@ -86,4 +86,11 @@ export var mergeDateAndTime = function mergeDateAndTime(utils, dateParam, timePa
   mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
   mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
   return mergedDate;
+};
+export var getTodayDate = function getTodayDate(utils, valueType) {
+  return valueType === 'date' ? utils.startOfDay(utils.date()) : utils.date();
+};
+var dateViews = ['year', 'month', 'day'];
+export var isDatePickerView = function isDatePickerView(view) {
+  return dateViews.includes(view);
 };

package/legacy/internals/utils/fields.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from './validation/extractValidationProps';
-var SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'format', 'formatDensity', 'onChange', 'readOnly', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef'];
+var SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'readOnly', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef'];
 export var splitFieldInternalAndForwardedProps = function splitFieldInternalAndForwardedProps(props, valueType) {
   var forwardedProps = _extends({}, props);
   var internalProps = {};

package/legacy/internals/utils/getDefaultReferenceDate.js

@@ -0,0 +1,64 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { createIsAfterIgnoreDatePart } from './time-utils';
+import { mergeDateAndTime, getTodayDate } from './date-utils';
+var SECTION_TYPE_GRANULARITY = {
+  year: 1,
+  month: 2,
+  day: 3,
+  hours: 4,
+  minutes: 5,
+  seconds: 6,
+  milliseconds: 7
+};
+export var getSectionTypeGranularity = function getSectionTypeGranularity(sections) {
+  return Math.max.apply(Math, _toConsumableArray(sections.map(function (section) {
+    var _SECTION_TYPE_GRANULA;
+    return (_SECTION_TYPE_GRANULA = SECTION_TYPE_GRANULARITY[section.type]) != null ? _SECTION_TYPE_GRANULA : 1;
+  })));
+};
+var roundDate = function roundDate(utils, granularity, date) {
+  if (granularity === SECTION_TYPE_GRANULARITY.year) {
+    return utils.startOfYear(date);
+  }
+  if (granularity === SECTION_TYPE_GRANULARITY.month) {
+    return utils.startOfMonth(date);
+  }
+  if (granularity === SECTION_TYPE_GRANULARITY.day) {
+    return utils.startOfDay(date);
+  }
+
+  // We don't have startOfHour / startOfMinute / startOfSecond
+  var roundedDate = date;
+  if (granularity < SECTION_TYPE_GRANULARITY.minutes) {
+    roundedDate = utils.setMinutes(roundedDate, 0);
+  }
+  if (granularity < SECTION_TYPE_GRANULARITY.seconds) {
+    roundedDate = utils.setSeconds(roundedDate, 0);
+  }
+  if (granularity < SECTION_TYPE_GRANULARITY.milliseconds) {
+    roundedDate = utils.setMilliseconds(roundedDate, 0);
+  }
+  return roundedDate;
+};
+export var getDefaultReferenceDate = function getDefaultReferenceDate(_ref) {
+  var _props$disableIgnorin;
+  var props = _ref.props,
+    utils = _ref.utils,
+    valueType = _ref.valueType,
+    granularity = _ref.granularity;
+  var referenceDate = roundDate(utils, granularity, getTodayDate(utils, valueType));
+  if (props.minDate != null && utils.isAfterDay(props.minDate, referenceDate)) {
+    referenceDate = roundDate(utils, granularity, props.minDate);
+  }
+  if (props.maxDate != null && utils.isBeforeDay(props.maxDate, referenceDate)) {
+    referenceDate = roundDate(utils, granularity, props.maxDate);
+  }
+  var isAfter = createIsAfterIgnoreDatePart((_props$disableIgnorin = props.disableIgnoringDatePartForTimeValidation) != null ? _props$disableIgnorin : false, utils);
+  if (props.minTime != null && isAfter(props.minTime, referenceDate)) {
+    referenceDate = roundDate(utils, granularity, props.disableIgnoringDatePartForTimeValidation ? props.minTime : mergeDateAndTime(utils, referenceDate, props.minTime));
+  }
+  if (props.maxTime != null && isAfter(referenceDate, props.maxTime)) {
+    referenceDate = roundDate(utils, granularity, props.disableIgnoringDatePartForTimeValidation ? props.maxTime : mergeDateAndTime(utils, referenceDate, props.maxTime));
+  }
+  return referenceDate;
+};

package/legacy/internals/utils/time-utils.js

@@ -2,6 +2,9 @@ var timeViews = ['hours', 'minutes', 'seconds'];
 export var isTimeView = function isTimeView(view) {
   return timeViews.includes(view);
 };
+export var isInternalTimeView = function isInternalTimeView(view) {
+  return timeViews.includes(view) || view === 'meridiem';
+};
 export var getMeridiem = function getMeridiem(date, utils) {
   if (!date) {
     return null;

package/legacy/internals/utils/valueManagers.js

@@ -1,9 +1,22 @@
-import { areDatesEqual, replaceInvalidDateByNull } from './date-utils';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "referenceDate"];
+import { areDatesEqual, getTodayDate, replaceInvalidDateByNull } from './date-utils';
+import { getDefaultReferenceDate } from './getDefaultReferenceDate';
 import { addPositionPropertiesToSections, createDateStrForInputFromSections } from '../hooks/useField/useField.utils';
 export var singleItemValueManager = {
   emptyValue: null,
-  getTodayValue: function getTodayValue(utils, valueType) {
-    return valueType === 'date' ? utils.startOfDay(utils.date()) : utils.date();
+  getTodayValue: getTodayDate,
+  getInitialReferenceValue: function getInitialReferenceValue(_ref) {
+    var value = _ref.value,
+      referenceDate = _ref.referenceDate,
+      params = _objectWithoutProperties(_ref, _excluded);
+    if (value != null && params.utils.isValid(value)) {
+      return value;
+    }
+    if (referenceDate != null) {
+      return referenceDate;
+    }
+    return getDefaultReferenceDate(params);
   },
   cleanValue: replaceInvalidDateByNull,
   areValuesEqual: areDatesEqual,
@@ -13,7 +26,10 @@ export var singleItemValueManager = {
   hasError: function hasError(error) {
     return error != null;
   },
-  defaultErrorState: null
+  defaultErrorState: null,
+  getTimezone: function getTimezone(utils, value) {
+    return value == null ? null : utils.getTimezone(value);
+  }
 };
 export var singleItemFieldValueManager = {
   updateReferenceValue: function updateReferenceValue(utils, value, prevReferenceValue) {

package/legacy/locales/index.js

@@ -25,4 +25,5 @@ export * from './beBY';
 export * from './ruRU';
 export * from './heIL';
 export * from './skSK';
+export * from './viVN';
 export * from './utils/pickersLocaleTextApi';