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

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

@@ -13,7 +13,6 @@ 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");
@@ -123,13 +122,14 @@ 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,69 +142,38 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    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
-      }),
+    var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(startExternalValue || defaultFirstDate, format, lang)),
       _useState8 = _slicedToArray(_useState7, 2),
-      correctStartDates = _useState8[0],
-      setCorrectStartDates = _useState8[1];
-    var _useState9 = (0, _react.useState)({
-        calendar: endInitialValues.originalDate,
-        input: endInitialValues.formattedDate
-      }),
+      calendarFirstValue = _useState8[0],
+      setCalendarFirstValue = _useState8[1];
+    var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
+        value: startExternalValue || defaultFirstDate,
+        format: format,
+        lang: lang
+      })),
       _useState10 = _slicedToArray(_useState9, 2),
-      correctEndDates = _useState10[0],
-      setCorrectEndDates = _useState10[1];
-    var _useState11 = (0, _react.useState)(startInitialValues.originalDate),
+      inputFirstValue = _useState10[0],
+      setInputFirstValue = _useState10[1];
+    var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(endExternalValue || defaultSecondDate, format, lang)),
       _useState12 = _slicedToArray(_useState11, 2),
-      calendarFirstValue = _useState12[0],
-      setCalendarFirstValue = _useState12[1];
-    var _useState13 = (0, _react.useState)(startInitialValues.formattedDate),
+      calendarSecondValue = _useState12[0],
+      setCalendarSecondValue = _useState12[1];
+    var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
+        value: endExternalValue || defaultSecondDate,
+        format: format,
+        lang: lang
+      })),
       _useState14 = _slicedToArray(_useState13, 2),
-      inputFirstValue = _useState14[0],
-      setInputFirstValue = _useState14[1];
-    var _useState15 = (0, _react.useState)(endInitialValues.originalDate),
+      inputSecondValue = _useState14[0],
+      setInputSecondValue = _useState14[1];
+    var _useState15 = (0, _react.useState)(Boolean(calendarFirstValue && calendarSecondValue)),
       _useState16 = _slicedToArray(_useState15, 2),
-      calendarSecondValue = _useState16[0],
-      setCalendarSecondValue = _useState16[1];
-    var _useState17 = (0, _react.useState)(endInitialValues.formattedDate),
+      fullDateEntered = _useState16[0],
+      setFullDateEntered = _useState16[1];
+    var _useState17 = (0, _react.useState)(false),
       _useState18 = _slicedToArray(_useState17, 2),
-      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];
+      secondTextFieldClicked = _useState18[0],
+      setSecondTextFieldClicked = _useState18[1];
     var rangeErrorClass = firstValueError || secondValueError ? _DatePicker.classes.datePickerError : undefined;
     var rangeSuccessClass = firstValueSuccess || secondValueSuccess ? _DatePicker.classes.datePickerSuccess : undefined;
     var setFirstInputValue = function setFirstInputValue(value) {
@@ -229,55 +198,45 @@ 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: firstValueError,
+        valueSuccess: firstValueSuccess,
         name: name,
-        type: type,
-        min: min,
-        max: max,
-        includeEdgeDates: includeEdgeDates,
-        setCorrectDates: setCorrectStartDates,
-        setInputValue: setFirstInputValue,
-        setCalendarValue: setCalendarFirstValue,
         onChangeValue: onChangeFirstValue,
-        onCommitDate: onCommitFirstDate,
-        dateFormatDelimiter: dateFormatDelimiter
+        onCommitDate: onCommitFirstDate
       }),
       handleChangeFirstValue = _useDatePicker.handleChangeValue,
-      handleFirstCalendarPick = _useDatePicker.handleCalendarPick,
-      handleSearchFirst = _useDatePicker.handleSearch,
+      handleCommitFirstDate = _useDatePicker.handleCommitDate,
       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: secondValueError,
-        name: name,
-        type: type,
-        min: min,
-        max: max,
-        includeEdgeDates: includeEdgeDates,
-        setCorrectDates: setCorrectEndDates,
-        setInputValue: setSecondInputValue,
-        setCalendarValue: setCalendarSecondValue,
+        valueSuccess: secondValueSuccess,
         onChangeValue: onChangeSecondValue,
-        onCommitDate: onCommitSecondDate,
-        dateFormatDelimiter: dateFormatDelimiter
+        onCommitDate: onCommitSecondDate
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
-      handleSecondCalendarPick = _useDatePicker2.handleCalendarPick,
-      handleSearchSecond = _useDatePicker2.handleSearch,
+      handleCommitSecondDate = _useDatePicker2.handleCommitDate,
       updateExternalSecondDate = _useDatePicker2.updateExternalDate;
     var handleToggle = function handleToggle(currentOpened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
@@ -290,7 +249,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();
         }
@@ -316,75 +275,44 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         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);
-      }
-      if (!calendarSecondValue && correctEndDates.calendar) {
-        endOriginalDate = new Date(correctEndDates.calendar);
+      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 _getSortedValues = (0, _utils2.getSortedValues)([startOriginalDate, endOriginalDate]),
+      var _getSortedValues = (0, _utils2.getSortedValues)([new Date(firstDate), new Date(secondDate)]),
         _getSortedValues2 = _slicedToArray(_getSortedValues, 2),
         startValue = _getSortedValues2[0],
         endValue = _getSortedValues2[1];
-      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);
+      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));
       outerHandler === null || outerHandler === void 0 || outerHandler(event);
     };
     var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
         isCalendarOpen: isInnerOpen,
-        format: format,
-        maskWithFormat: maskWithFormat,
-        delimiter: dateFormatDelimiter(),
-        closeOnEsc: closeOnEsc,
-        onToggle: handleToggle
+        onToggle: handleToggle,
+        closeOnEsc: closeOnEsc
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
     var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
       if (!fullDateEntered) {
-        handleFirstCalendarPick(chosenDate, dateInfo);
-        handleSecondCalendarPick(undefined);
+        handleCommitFirstDate(chosenDate, false, true, dateInfo);
+        handleCommitSecondDate('');
         return;
       }
       var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
@@ -392,8 +320,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         _getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
         first = _getSortedValues4[0],
         second = _getSortedValues4[1];
-      handleFirstCalendarPick(first, dateInfo);
-      handleSecondCalendarPick(second, dateInfo);
+      handleCommitFirstDate(first, false, true, dateInfo);
+      handleCommitSecondDate(second, false, true, dateInfo);
       if (!firstValueError && !secondValueError && closeAfterDateSelect) {
         handleToggle(false);
       }
@@ -403,10 +331,10 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         firstDate = _ref5[0],
         secondDate = _ref5[1];
       if (firstDate) {
-        handleFirstCalendarPick(firstDate, dateInfo);
+        handleCommitFirstDate(firstDate, false, true, dateInfo);
       }
       if (secondDate) {
-        handleSecondCalendarPick(secondDate, dateInfo);
+        handleCommitSecondDate(secondDate, false, true, dateInfo);
       }
       if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
         handleToggle(false);
@@ -445,14 +373,14 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       onChangeSecondValue: handleChangeSecondValue,
       name: name,
       onSearchFirstValue: function onSearchFirstValue(_, date) {
-        handleSearchFirst(String(date));
+        handleCommitFirstDate(String(date), true, false);
         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) {
-        handleSearchSecond(String(date));
+        handleCommitSecondDate(String(date), true, false);
         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();
@@ -484,17 +412,13 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       }
     }, [calendarFirstValue, calendarSecondValue]);
     (0, _react.useLayoutEffect)(function () {
-      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]);
+      var externalDate = startExternalValue || defaultFirstDate;
+      updateExternalFirstDate(externalDate, setFirstInputValue, setCalendarFirstValue);
+    }, [startExternalValue, defaultFirstDate, format, lang]);
     (0, _react.useLayoutEffect)(function () {
-      !endExternalValue && updateExternalSecondDate(defaultSecondDate);
-    }, [defaultSecondDate, format, lang]);
+      var externalDate = endExternalValue || defaultSecondDate;
+      updateExternalSecondDate(externalDate, setSecondInputValue, setCalendarSecondValue);
+    }, [endExternalValue, 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 _engines = /*#__PURE__*/require("../../../../engines");
 var _DatePicker = /*#__PURE__*/require("../../DatePicker.tokens");
+var _engines = /*#__PURE__*/require("../../../../engines");
 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,7 +12,6 @@ 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");
@@ -102,44 +101,32 @@ 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,
@@ -148,14 +135,6 @@ 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
@@ -163,18 +142,16 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       datePickerErrorClass = _useDatePicker.datePickerErrorClass,
       datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
       handleChangeValue = _useDatePicker.handleChangeValue,
-      handleCalendarPick = _useDatePicker.handleCalendarPick,
-      handleSearch = _useDatePicker.handleSearch,
+      handleCommitDate = _useDatePicker.handleCommitDate,
       updateExternalDate = _useDatePicker.updateExternalDate;
-    var handleToggle = function handleToggle(innerOpened, event) {
+    var handleToggle = function handleToggle(opened, event) {
       if (disabled || readOnly) {
         return;
       }
-      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;
-        });
+      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();
       }
       if (onToggle) {
         onToggle(isCalendarOpen, event);
@@ -184,22 +161,10 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     };
     var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
         isCalendarOpen: isInnerOpen,
-        format: format,
-        maskWithFormat: maskWithFormat,
-        delimiter: dateFormatDelimiter(),
-        closeOnEsc: closeOnEsc,
-        onToggle: handleToggle
+        onToggle: handleToggle,
+        closeOnEsc: closeOnEsc
       }),
       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),
@@ -213,9 +178,11 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       textBefore: textBefore,
       textAfter: textAfter,
       onChange: handleChangeValue,
-      onSearch: handleSearch,
+      onSearch: function onSearch(date) {
+        return handleCommitDate(date, true, false);
+      },
       onFocus: onFocus,
-      onBlur: handleBlur,
+      onBlur: onBlur,
       onKeyDown: onKeyDown,
       required: required,
       requiredPlacement: requiredPlacement,
@@ -231,11 +198,9 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     (0, _react.useLayoutEffect)(function () {
-      updateExternalDate(value);
-    }, [value, format, lang]);
-    (0, _react.useLayoutEffect)(function () {
-      !value && updateExternalDate(defaultDate);
-    }, [defaultDate, format, lang]);
+      var externalDate = value || defaultDate;
+      updateExternalDate(externalDate, setInputValue, setCalendarValue);
+    }, [value, defaultDate, format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       size: size,
@@ -279,7 +244,9 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       includeEdgeDates: includeEdgeDates,
       isRange: false,
       locale: lang,
-      onChangeValue: handleCalendarPick
+      onChangeValue: function onChangeValue(date, dateInfo) {
+        return handleCommitDate(date, false, true, dateInfo);
+      }
     }))), leftHelper && /*#__PURE__*/_react["default"].createElement(_SingleDate.LeftHelper, {
       className: (0, _utils.cx)(datePickerErrorClass, datePickerSuccessClass)
     }, leftHelper), /*#__PURE__*/_react["default"].createElement(_DatePickerBase.InputHidden, _extends({