@salutejs/plasma-new-hope 0.322.0-canary.1933.14596920222.0 → 0.322.0-canary.1939.14616445713.0

package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -13,6 +13,7 @@ var _DatePicker = /*#__PURE__*/require("../DatePicker.tokens");
 var _useKeyboardNavigation = /*#__PURE__*/require("../hooks/useKeyboardNavigation");
 var _DatePickerBase = /*#__PURE__*/require("../DatePickerBase.styles");
 var _utils2 = /*#__PURE__*/require("../../Calendar/utils");
+var _utils3 = /*#__PURE__*/require("../utils");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
@@ -122,14 +123,13 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _onBlurFirstTextfield = _ref.onBlurFirstTextfield,
       _onBlurSecondTextfield = _ref.onBlurSecondTextfield,
       rest = _objectWithoutProperties(_ref, _excluded);
+    if (externalValue !== null && externalValue !== void 0 && externalValue.length && (defaultFirstDate || defaultSecondDate)) {
+      console.error("Controlled DatePicker can't have `default{First|Second}Date`, use `value` instead");
+    }
     var rangeRef = ref && 'current' in ref ? ref : /*#__PURE__*/(0, _react.createRef)();
     var rootRef = (0, _react.useRef)(null);
     var innerRefFirst = (0, _react.useRef)(null);
     var innerRefSecond = (0, _react.useRef)(null);
-    var _ref2 = externalValue || [],
-      _ref3 = _slicedToArray(_ref2, 2),
-      startExternalValue = _ref3[0],
-      endExternalValue = _ref3[1];
     var _useState = (0, _react.useState)(rangeRef === null || rangeRef === void 0 || (_rangeRef$current = rangeRef.current) === null || _rangeRef$current === void 0 ? void 0 : _rangeRef$current.firstTextField()),
       _useState2 = _slicedToArray(_useState, 2),
       firstInputRef = _useState2[0],
@@ -142,38 +142,69 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(startExternalValue || defaultFirstDate, format, lang)),
+    var dateFormatDelimiter = (0, _react.useCallback)(function () {
+      return (0, _dateHelper.getDateFormatDelimiter)(format);
+    }, [format]);
+    var _ref2 = externalValue || [],
+      _ref3 = _slicedToArray(_ref2, 2),
+      startExternalValue = _ref3[0],
+      endExternalValue = _ref3[1];
+    var startInitialValues = (0, _utils3.getFormattedDates)({
+      value: startExternalValue || defaultFirstDate,
+      delimiter: dateFormatDelimiter(),
+      lang: lang,
+      format: format,
+      includeEdgeDates: includeEdgeDates,
+      min: min,
+      max: max
+    });
+    var endInitialValues = (0, _utils3.getFormattedDates)({
+      value: endExternalValue || defaultSecondDate,
+      delimiter: dateFormatDelimiter(),
+      lang: lang,
+      format: format,
+      includeEdgeDates: includeEdgeDates,
+      min: min,
+      max: max
+    });
+    var _useState7 = (0, _react.useState)({
+        calendar: startInitialValues.originalDate,
+        input: startInitialValues.formattedDate
+      }),
       _useState8 = _slicedToArray(_useState7, 2),
-      calendarFirstValue = _useState8[0],
-      setCalendarFirstValue = _useState8[1];
-    var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
-        value: startExternalValue || defaultFirstDate,
-        format: format,
-        lang: lang
-      })),
+      correctStartDates = _useState8[0],
+      setCorrectStartDates = _useState8[1];
+    var _useState9 = (0, _react.useState)({
+        calendar: endInitialValues.originalDate,
+        input: endInitialValues.formattedDate
+      }),
       _useState10 = _slicedToArray(_useState9, 2),
-      inputFirstValue = _useState10[0],
-      setInputFirstValue = _useState10[1];
-    var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(endExternalValue || defaultSecondDate, format, lang)),
+      correctEndDates = _useState10[0],
+      setCorrectEndDates = _useState10[1];
+    var _useState11 = (0, _react.useState)(startInitialValues.originalDate),
       _useState12 = _slicedToArray(_useState11, 2),
-      calendarSecondValue = _useState12[0],
-      setCalendarSecondValue = _useState12[1];
-    var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
-        value: endExternalValue || defaultSecondDate,
-        format: format,
-        lang: lang
-      })),
+      calendarFirstValue = _useState12[0],
+      setCalendarFirstValue = _useState12[1];
+    var _useState13 = (0, _react.useState)(startInitialValues.formattedDate),
       _useState14 = _slicedToArray(_useState13, 2),
-      inputSecondValue = _useState14[0],
-      setInputSecondValue = _useState14[1];
-    var _useState15 = (0, _react.useState)(Boolean(calendarFirstValue && calendarSecondValue)),
+      inputFirstValue = _useState14[0],
+      setInputFirstValue = _useState14[1];
+    var _useState15 = (0, _react.useState)(endInitialValues.originalDate),
       _useState16 = _slicedToArray(_useState15, 2),
-      fullDateEntered = _useState16[0],
-      setFullDateEntered = _useState16[1];
-    var _useState17 = (0, _react.useState)(false),
+      calendarSecondValue = _useState16[0],
+      setCalendarSecondValue = _useState16[1];
+    var _useState17 = (0, _react.useState)(endInitialValues.formattedDate),
       _useState18 = _slicedToArray(_useState17, 2),
-      secondTextFieldClicked = _useState18[0],
-      setSecondTextFieldClicked = _useState18[1];
+      inputSecondValue = _useState18[0],
+      setInputSecondValue = _useState18[1];
+    var _useState19 = (0, _react.useState)(Boolean(calendarFirstValue && calendarSecondValue)),
+      _useState20 = _slicedToArray(_useState19, 2),
+      fullDateEntered = _useState20[0],
+      setFullDateEntered = _useState20[1];
+    var _useState21 = (0, _react.useState)(false),
+      _useState22 = _slicedToArray(_useState21, 2),
+      secondTextFieldClicked = _useState22[0],
+      setSecondTextFieldClicked = _useState22[1];
     var rangeErrorClass = firstValueError || secondValueError ? _DatePicker.classes.datePickerError : undefined;
     var rangeSuccessClass = firstValueSuccess || secondValueSuccess ? _DatePicker.classes.datePickerSuccess : undefined;
     var setFirstInputValue = function setFirstInputValue(value) {
@@ -198,45 +229,55 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         });
       }
     };
-    var dateFormatDelimiter = (0, _react.useCallback)(function () {
-      return (0, _dateHelper.getDateFormatDelimiter)(format);
-    }, [format]);
     var _useDatePicker = (0, _useDatePicker3.useDatePicker)({
         currentValue: inputFirstValue,
-        setInputValue: setFirstInputValue,
-        setCalendarValue: setCalendarFirstValue,
-        dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
         valueError: firstValueError,
-        valueSuccess: firstValueSuccess,
+        valueSuccess: firstValueError,
         name: name,
+        type: type,
+        min: min,
+        max: max,
+        includeEdgeDates: includeEdgeDates,
+        setCorrectDates: setCorrectStartDates,
+        setInputValue: setFirstInputValue,
+        setCalendarValue: setCalendarFirstValue,
         onChangeValue: onChangeFirstValue,
-        onCommitDate: onCommitFirstDate
+        onCommitDate: onCommitFirstDate,
+        dateFormatDelimiter: dateFormatDelimiter
       }),
       handleChangeFirstValue = _useDatePicker.handleChangeValue,
-      handleCommitFirstDate = _useDatePicker.handleCommitDate,
+      handleFirstCalendarPick = _useDatePicker.handleCalendarPick,
+      handleSearchFirst = _useDatePicker.handleSearch,
       updateExternalFirstDate = _useDatePicker.updateExternalDate;
     var _useDatePicker2 = (0, _useDatePicker3.useDatePicker)({
         currentValue: inputSecondValue,
-        setInputValue: setSecondInputValue,
-        setCalendarValue: setCalendarSecondValue,
-        dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
         valueError: secondValueError,
-        valueSuccess: secondValueSuccess,
+        valueSuccess: secondValueError,
+        name: name,
+        type: type,
+        min: min,
+        max: max,
+        includeEdgeDates: includeEdgeDates,
+        setCorrectDates: setCorrectEndDates,
+        setInputValue: setSecondInputValue,
+        setCalendarValue: setCalendarSecondValue,
         onChangeValue: onChangeSecondValue,
-        onCommitDate: onCommitSecondDate
+        onCommitDate: onCommitSecondDate,
+        dateFormatDelimiter: dateFormatDelimiter
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
-      handleCommitSecondDate = _useDatePicker2.handleCommitDate,
+      handleSecondCalendarPick = _useDatePicker2.handleCalendarPick,
+      handleSearchSecond = _useDatePicker2.handleSearch,
       updateExternalSecondDate = _useDatePicker2.updateExternalDate;
     var handleToggle = function handleToggle(currentOpened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
@@ -249,7 +290,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
           var _secondInputRef$curre2;
           secondInputRef === null || secondInputRef === void 0 || (_secondInputRef$curre2 = secondInputRef.current) === null || _secondInputRef$curre2 === void 0 || _secondInputRef$curre2.focus();
         }
-        if (calendarSecondValue || !calendarFirstValue) {
+        if (calendarSecondValue && !calendarFirstValue) {
           var _firstInputRef$curren2;
           firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
         }
@@ -275,44 +316,75 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         outerHandler === null || outerHandler === void 0 || outerHandler(event);
         return;
       }
-      var _getDateFromFormat = (0, _dateHelper.getDateFromFormat)(inputFirstValue, format, lang),
-        firstDate = _getDateFromFormat.value,
-        firstIsSuccess = _getDateFromFormat.isSuccess;
-      var _getDateFromFormat2 = (0, _dateHelper.getDateFromFormat)(inputSecondValue, format, lang),
-        secondDate = _getDateFromFormat2.value,
-        secondIsSuccess = _getDateFromFormat2.isSuccess;
-      if (!firstIsSuccess || !secondIsSuccess) {
-        outerHandler === null || outerHandler === void 0 || outerHandler(event);
-        return;
+      var _getFormattedDates = (0, _utils3.getFormattedDates)({
+          value: inputFirstValue,
+          delimiter: dateFormatDelimiter(),
+          lang: lang,
+          format: format,
+          includeEdgeDates: includeEdgeDates,
+          min: min,
+          max: max
+        }),
+        startOriginalDate = _getFormattedDates.originalDate;
+      var _getFormattedDates2 = (0, _utils3.getFormattedDates)({
+          value: inputSecondValue,
+          delimiter: dateFormatDelimiter(),
+          lang: lang,
+          format: format,
+          includeEdgeDates: includeEdgeDates,
+          min: min,
+          max: max
+        }),
+        endOriginalDate = _getFormattedDates2.originalDate;
+      if (!calendarFirstValue && correctStartDates.calendar) {
+        startOriginalDate = new Date(correctStartDates.calendar);
       }
-      var _getSortedValues = (0, _utils2.getSortedValues)([new Date(firstDate), new Date(secondDate)]),
+      if (!calendarSecondValue && correctEndDates.calendar) {
+        endOriginalDate = new Date(correctEndDates.calendar);
+      }
+      var _getSortedValues = (0, _utils2.getSortedValues)([startOriginalDate, endOriginalDate]),
         _getSortedValues2 = _slicedToArray(_getSortedValues, 2),
         startValue = _getSortedValues2[0],
         endValue = _getSortedValues2[1];
-      setFirstInputValue((0, _dateHelper.formatInputValue)({
-        value: startValue,
-        format: format,
-        lang: lang
-      }));
-      setSecondInputValue((0, _dateHelper.formatInputValue)({
-        value: endValue,
-        format: format,
-        lang: lang
-      }));
-      setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(startValue, format, lang));
-      setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(endValue, format, lang));
+      var _getFormattedDates3 = (0, _utils3.getFormattedDates)({
+          value: startValue || null,
+          delimiter: dateFormatDelimiter(),
+          lang: lang,
+          format: format,
+          includeEdgeDates: includeEdgeDates,
+          min: min,
+          max: max
+        }),
+        startFormattedDate = _getFormattedDates3.formattedDate;
+      var _getFormattedDates4 = (0, _utils3.getFormattedDates)({
+          value: endValue || null,
+          delimiter: dateFormatDelimiter(),
+          lang: lang,
+          format: format,
+          includeEdgeDates: includeEdgeDates,
+          min: min,
+          max: max
+        }),
+        endFormattedDate = _getFormattedDates4.formattedDate;
+      setFirstInputValue(startFormattedDate);
+      setSecondInputValue(endFormattedDate);
+      setCalendarFirstValue(startOriginalDate);
+      setCalendarSecondValue(endOriginalDate);
       outerHandler === null || outerHandler === void 0 || outerHandler(event);
     };
     var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
         isCalendarOpen: isInnerOpen,
-        onToggle: handleToggle,
-        closeOnEsc: closeOnEsc
+        format: format,
+        maskWithFormat: maskWithFormat,
+        delimiter: dateFormatDelimiter(),
+        closeOnEsc: closeOnEsc,
+        onToggle: handleToggle
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
     var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
       if (!fullDateEntered) {
-        handleCommitFirstDate(chosenDate, false, true, dateInfo);
-        handleCommitSecondDate('');
+        handleFirstCalendarPick(chosenDate, dateInfo);
+        handleSecondCalendarPick(undefined);
         return;
       }
       var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
@@ -320,8 +392,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         _getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
         first = _getSortedValues4[0],
         second = _getSortedValues4[1];
-      handleCommitFirstDate(first, false, true, dateInfo);
-      handleCommitSecondDate(second, false, true, dateInfo);
+      handleFirstCalendarPick(first, dateInfo);
+      handleSecondCalendarPick(second, dateInfo);
       if (!firstValueError && !secondValueError && closeAfterDateSelect) {
         handleToggle(false);
       }
@@ -331,10 +403,10 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         firstDate = _ref5[0],
         secondDate = _ref5[1];
       if (firstDate) {
-        handleCommitFirstDate(firstDate, false, true, dateInfo);
+        handleFirstCalendarPick(firstDate, dateInfo);
       }
       if (secondDate) {
-        handleCommitSecondDate(secondDate, false, true, dateInfo);
+        handleSecondCalendarPick(secondDate, dateInfo);
       }
       if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
         handleToggle(false);
@@ -373,14 +445,14 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       onChangeSecondValue: handleChangeSecondValue,
       name: name,
       onSearchFirstValue: function onSearchFirstValue(_, date) {
-        handleCommitFirstDate(String(date), true, false);
+        handleSearchFirst(String(date));
         if (!calendarSecondValue || secondValueError) {
           var _rangeRef$current3;
           rangeRef === null || rangeRef === void 0 || (_rangeRef$current3 = rangeRef.current) === null || _rangeRef$current3 === void 0 || (_rangeRef$current3 = _rangeRef$current3.secondTextField()) === null || _rangeRef$current3 === void 0 || (_rangeRef$current3 = _rangeRef$current3.current) === null || _rangeRef$current3 === void 0 || _rangeRef$current3.focus();
         }
       },
       onSearchSecondValue: function onSearchSecondValue(_, date) {
-        handleCommitSecondDate(String(date), true, false);
+        handleSearchSecond(String(date));
         if (!calendarFirstValue || firstValueError) {
           var _rangeRef$current4;
           rangeRef === null || rangeRef === void 0 || (_rangeRef$current4 = rangeRef.current) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.firstTextField()) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.current) === null || _rangeRef$current4 === void 0 || _rangeRef$current4.focus();
@@ -412,13 +484,17 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       }
     }, [calendarFirstValue, calendarSecondValue]);
     (0, _react.useLayoutEffect)(function () {
-      var externalDate = startExternalValue || defaultFirstDate;
-      updateExternalFirstDate(externalDate, setFirstInputValue, setCalendarFirstValue);
-    }, [startExternalValue, defaultFirstDate, format, lang]);
+      updateExternalFirstDate(startExternalValue || undefined);
+    }, [startExternalValue, format, lang]);
+    (0, _react.useLayoutEffect)(function () {
+      updateExternalSecondDate(endExternalValue || undefined);
+    }, [endExternalValue, format, lang]);
+    (0, _react.useLayoutEffect)(function () {
+      !startExternalValue && updateExternalFirstDate(defaultFirstDate);
+    }, [defaultFirstDate, format, lang]);
     (0, _react.useLayoutEffect)(function () {
-      var externalDate = endExternalValue || defaultSecondDate;
-      updateExternalSecondDate(externalDate, setSecondInputValue, setCalendarSecondValue);
-    }, [endExternalValue, defaultSecondDate, format, lang]);
+      !endExternalValue && updateExternalSecondDate(defaultSecondDate);
+    }, [defaultSecondDate, format, lang]);
     var RootWrapper = (0, _react.useCallback)(function (_ref6) {
       var children = _ref6.children;
       return /*#__PURE__*/_react["default"].createElement(Root, {

package/styled-components/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledCalendarDouble = exports.StyledCalendar = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
 var _Calendar = /*#__PURE__*/require("../../../Calendar");
-var _DatePicker = /*#__PURE__*/require("../../DatePicker.tokens");
 var _engines = /*#__PURE__*/require("../../../../engines");
+var _DatePicker = /*#__PURE__*/require("../../DatePicker.tokens");
 var _DatePickerBase = /*#__PURE__*/require("../../DatePickerBase.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var mergedCalendarDoubleConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Calendar.calendarDoubleConfig);

package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js

@@ -12,6 +12,7 @@ var _useDatePicker2 = /*#__PURE__*/require("../hooks/useDatePicker");
 var _DatePicker = /*#__PURE__*/require("../DatePicker.tokens");
 var _DatePickerBase = /*#__PURE__*/require("../DatePickerBase.styles");
 var _useKeyboardNavigation = /*#__PURE__*/require("../hooks/useKeyboardNavigation");
+var _utils2 = /*#__PURE__*/require("../utils");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
@@ -101,32 +102,44 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       onChange = _ref.onChange,
       autoComplete = _ref.autoComplete,
       rest = _objectWithoutProperties(_ref, _excluded);
+    if (value && defaultDate) {
+      console.error("Controlled DatePicker can't have `defaultDate`, use `value` instead");
+    }
     var inputRef = (0, _react.useRef)(null);
     var innerRef = (0, _react.useRef)(null);
     var _useState = (0, _react.useState)(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(value || defaultDate, format, lang)),
-      _useState4 = _slicedToArray(_useState3, 2),
-      calendarValue = _useState4[0],
-      setCalendarValue = _useState4[1];
-    var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
-        value: value || defaultDate,
-        format: format,
-        lang: lang
-      })),
-      _useState6 = _slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInputValue = _useState6[1];
     var dateFormatDelimiter = (0, _react.useCallback)(function () {
       return (0, _dateHelper.getDateFormatDelimiter)(format);
     }, [format]);
+    var initialValues = (0, _utils2.getFormattedDates)({
+      value: value || defaultDate,
+      delimiter: dateFormatDelimiter(),
+      lang: lang,
+      format: format,
+      includeEdgeDates: includeEdgeDates,
+      min: min,
+      max: max
+    });
+    var _useState3 = (0, _react.useState)({
+        calendar: initialValues.originalDate,
+        input: initialValues.formattedDate
+      }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      correctDates = _useState4[0],
+      setCorrectDates = _useState4[1];
+    var _useState5 = (0, _react.useState)(correctDates.calendar),
+      _useState6 = _slicedToArray(_useState5, 2),
+      calendarValue = _useState6[0],
+      setCalendarValue = _useState6[1];
+    var _useState7 = (0, _react.useState)(correctDates.input),
+      _useState8 = _slicedToArray(_useState7, 2),
+      inputValue = _useState8[0],
+      setInputValue = _useState8[1];
     var _useDatePicker = (0, _useDatePicker2.useDatePicker)({
         currentValue: inputValue,
-        setInputValue: setInputValue,
-        setCalendarValue: setCalendarValue,
-        dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
         disabled: disabled,
@@ -135,6 +148,14 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
         valueError: valueError,
         valueSuccess: valueSuccess,
         name: name,
+        type: type,
+        min: min,
+        max: max,
+        includeEdgeDates: includeEdgeDates,
+        setCorrectDates: setCorrectDates,
+        setInputValue: setInputValue,
+        setCalendarValue: setCalendarValue,
+        dateFormatDelimiter: dateFormatDelimiter,
         onChangeValue: onChangeValue,
         onCommitDate: onCommitDate,
         onChange: onChange
@@ -142,16 +163,18 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       datePickerErrorClass = _useDatePicker.datePickerErrorClass,
       datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
       handleChangeValue = _useDatePicker.handleChangeValue,
-      handleCommitDate = _useDatePicker.handleCommitDate,
+      handleCalendarPick = _useDatePicker.handleCalendarPick,
+      handleSearch = _useDatePicker.handleSearch,
       updateExternalDate = _useDatePicker.updateExternalDate;
-    var handleToggle = function handleToggle(opened, event) {
+    var handleToggle = function handleToggle(innerOpened, event) {
       if (disabled || readOnly) {
         return;
       }
-      var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && event.code !== _useKeyboardNavigation.keys.Escape ? true : opened;
-      if (!isCalendarOpen && inputValue) {
-        var _inputRef$current;
-        inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && event.code !== _useKeyboardNavigation.keys.Escape ? true : innerOpened;
+      if (!innerOpened && !calendarValue) {
+        setCalendarValue(function (prevValue) {
+          return prevValue === undefined ? null : undefined;
+        });
       }
       if (onToggle) {
         onToggle(isCalendarOpen, event);
@@ -161,10 +184,22 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     };
     var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
         isCalendarOpen: isInnerOpen,
-        onToggle: handleToggle,
-        closeOnEsc: closeOnEsc
+        format: format,
+        maskWithFormat: maskWithFormat,
+        delimiter: dateFormatDelimiter(),
+        closeOnEsc: closeOnEsc,
+        onToggle: handleToggle
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
+    var handleBlur = function handleBlur(event) {
+      if (!calendarValue && correctDates.calendar) {
+        setCalendarValue(new Date(correctDates.calendar));
+        setInputValue(correctDates.input);
+      }
+      if (onBlur) {
+        onBlur(event);
+      }
+    };
     var DatePickerInput = /*#__PURE__*/_react["default"].createElement(_SingleDate.StyledInput, {
       ref: inputRef,
       className: (0, _utils.cx)(datePickerErrorClass, datePickerSuccessClass),
@@ -178,11 +213,9 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       textBefore: textBefore,
       textAfter: textAfter,
       onChange: handleChangeValue,
-      onSearch: function onSearch(date) {
-        return handleCommitDate(date, true, false);
-      },
+      onSearch: handleSearch,
       onFocus: onFocus,
-      onBlur: onBlur,
+      onBlur: handleBlur,
       onKeyDown: onKeyDown,
       required: required,
       requiredPlacement: requiredPlacement,
@@ -198,9 +231,11 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     (0, _react.useLayoutEffect)(function () {
-      var externalDate = value || defaultDate;
-      updateExternalDate(externalDate, setInputValue, setCalendarValue);
-    }, [value, defaultDate, format, lang]);
+      updateExternalDate(value);
+    }, [value, format, lang]);
+    (0, _react.useLayoutEffect)(function () {
+      !value && updateExternalDate(defaultDate);
+    }, [defaultDate, format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       size: size,
@@ -244,9 +279,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       includeEdgeDates: includeEdgeDates,
       isRange: false,
       locale: lang,
-      onChangeValue: function onChangeValue(date, dateInfo) {
-        return handleCommitDate(date, false, true, dateInfo);
-      }
+      onChangeValue: handleCalendarPick
     }))), leftHelper && /*#__PURE__*/_react["default"].createElement(_SingleDate.LeftHelper, {
       className: (0, _utils.cx)(datePickerErrorClass, datePickerSuccessClass)
     }, leftHelper), /*#__PURE__*/_react["default"].createElement(_DatePickerBase.InputHidden, _extends({