@salutejs/plasma-new-hope 0.322.0-canary.1933.14614537450.0 → 0.322.0-canary.1939.14642328722.0

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

@@ -10,12 +10,13 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { createRef, forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx, noop } from "../../../utils";
-import { formatCalendarValue, formatInputValue, getDateFormatDelimiter, getDateFromFormat } from "../utils/dateHelper";
+import { getDateFormatDelimiter } from "../utils/dateHelper";
 import { useDatePicker } from "../hooks/useDatePicker";
 import { classes } from "../DatePicker.tokens";
 import { keys, useKeyNavigation } from "../hooks/useKeyboardNavigation";
 import { InputHidden } from "../DatePickerBase.styles";
 import { getSortedValues } from "../../Calendar/utils";
+import { getFormattedDates } from "../utils";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
@@ -113,14 +114,13 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _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__*/createRef();
     var rootRef = useRef(null);
     var innerRefFirst = useRef(null);
     var innerRefSecond = useRef(null);
-    var _ref2 = externalValue || [],
-      _ref3 = _slicedToArray(_ref2, 2),
-      startExternalValue = _ref3[0],
-      endExternalValue = _ref3[1];
     var _useState = 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],
@@ -133,38 +133,69 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = useState(formatCalendarValue(startExternalValue || defaultFirstDate, format, lang)),
+    var dateFormatDelimiter = useCallback(function () {
+      return getDateFormatDelimiter(format);
+    }, [format]);
+    var _ref2 = externalValue || [],
+      _ref3 = _slicedToArray(_ref2, 2),
+      startExternalValue = _ref3[0],
+      endExternalValue = _ref3[1];
+    var startInitialValues = getFormattedDates({
+      value: startExternalValue || defaultFirstDate,
+      delimiter: dateFormatDelimiter(),
+      lang: lang,
+      format: format,
+      includeEdgeDates: includeEdgeDates,
+      min: min,
+      max: max
+    });
+    var endInitialValues = getFormattedDates({
+      value: endExternalValue || defaultSecondDate,
+      delimiter: dateFormatDelimiter(),
+      lang: lang,
+      format: format,
+      includeEdgeDates: includeEdgeDates,
+      min: min,
+      max: max
+    });
+    var _useState7 = useState({
+        calendar: startInitialValues.originalDate,
+        input: startInitialValues.formattedDate
+      }),
       _useState8 = _slicedToArray(_useState7, 2),
-      calendarFirstValue = _useState8[0],
-      setCalendarFirstValue = _useState8[1];
-    var _useState9 = useState(formatInputValue({
-        value: startExternalValue || defaultFirstDate,
-        format: format,
-        lang: lang
-      })),
+      correctStartDates = _useState8[0],
+      setCorrectStartDates = _useState8[1];
+    var _useState9 = useState({
+        calendar: endInitialValues.originalDate,
+        input: endInitialValues.formattedDate
+      }),
       _useState10 = _slicedToArray(_useState9, 2),
-      inputFirstValue = _useState10[0],
-      setInputFirstValue = _useState10[1];
-    var _useState11 = useState(formatCalendarValue(endExternalValue || defaultSecondDate, format, lang)),
+      correctEndDates = _useState10[0],
+      setCorrectEndDates = _useState10[1];
+    var _useState11 = useState(startInitialValues.originalDate),
       _useState12 = _slicedToArray(_useState11, 2),
-      calendarSecondValue = _useState12[0],
-      setCalendarSecondValue = _useState12[1];
-    var _useState13 = useState(formatInputValue({
-        value: endExternalValue || defaultSecondDate,
-        format: format,
-        lang: lang
-      })),
+      calendarFirstValue = _useState12[0],
+      setCalendarFirstValue = _useState12[1];
+    var _useState13 = useState(startInitialValues.formattedDate),
       _useState14 = _slicedToArray(_useState13, 2),
-      inputSecondValue = _useState14[0],
-      setInputSecondValue = _useState14[1];
-    var _useState15 = useState(Boolean(calendarFirstValue && calendarSecondValue)),
+      inputFirstValue = _useState14[0],
+      setInputFirstValue = _useState14[1];
+    var _useState15 = useState(endInitialValues.originalDate),
       _useState16 = _slicedToArray(_useState15, 2),
-      fullDateEntered = _useState16[0],
-      setFullDateEntered = _useState16[1];
-    var _useState17 = useState(false),
+      calendarSecondValue = _useState16[0],
+      setCalendarSecondValue = _useState16[1];
+    var _useState17 = useState(endInitialValues.formattedDate),
       _useState18 = _slicedToArray(_useState17, 2),
-      secondTextFieldClicked = _useState18[0],
-      setSecondTextFieldClicked = _useState18[1];
+      inputSecondValue = _useState18[0],
+      setInputSecondValue = _useState18[1];
+    var _useState19 = useState(Boolean(calendarFirstValue && calendarSecondValue)),
+      _useState20 = _slicedToArray(_useState19, 2),
+      fullDateEntered = _useState20[0],
+      setFullDateEntered = _useState20[1];
+    var _useState21 = useState(false),
+      _useState22 = _slicedToArray(_useState21, 2),
+      secondTextFieldClicked = _useState22[0],
+      setSecondTextFieldClicked = _useState22[1];
     var rangeErrorClass = firstValueError || secondValueError ? classes.datePickerError : undefined;
     var rangeSuccessClass = firstValueSuccess || secondValueSuccess ? classes.datePickerSuccess : undefined;
     var setFirstInputValue = function setFirstInputValue(value) {
@@ -189,14 +220,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         });
       }
     };
-    var dateFormatDelimiter = useCallback(function () {
-      return getDateFormatDelimiter(format);
-    }, [format]);
     var _useDatePicker = useDatePicker({
         currentValue: inputFirstValue,
-        setInputValue: setFirstInputValue,
-        setCalendarValue: setCalendarFirstValue,
-        dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
         disabled: disabled,
@@ -205,17 +230,23 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         valueError: firstValueError,
         valueSuccess: firstValueSuccess,
         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 = useDatePicker({
         currentValue: inputSecondValue,
-        setInputValue: setSecondInputValue,
-        setCalendarValue: setCalendarSecondValue,
-        dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
         disabled: disabled,
@@ -223,11 +254,21 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         maskWithFormat: maskWithFormat,
         valueError: secondValueError,
         valueSuccess: secondValueSuccess,
+        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;
@@ -240,7 +281,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
           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();
         }
@@ -266,44 +307,75 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         outerHandler === null || outerHandler === void 0 || outerHandler(event);
         return;
       }
-      var _getDateFromFormat = getDateFromFormat(inputFirstValue, format, lang),
-        firstDate = _getDateFromFormat.value,
-        firstIsSuccess = _getDateFromFormat.isSuccess;
-      var _getDateFromFormat2 = getDateFromFormat(inputSecondValue, format, lang),
-        secondDate = _getDateFromFormat2.value,
-        secondIsSuccess = _getDateFromFormat2.isSuccess;
-      if (!firstIsSuccess || !secondIsSuccess) {
-        outerHandler === null || outerHandler === void 0 || outerHandler(event);
-        return;
+      var _getFormattedDates = getFormattedDates({
+          value: inputFirstValue,
+          delimiter: dateFormatDelimiter(),
+          lang: lang,
+          format: format,
+          includeEdgeDates: includeEdgeDates,
+          min: min,
+          max: max
+        }),
+        startOriginalDate = _getFormattedDates.originalDate;
+      var _getFormattedDates2 = 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 = getSortedValues([new Date(firstDate), new Date(secondDate)]),
+      if (!calendarSecondValue && correctEndDates.calendar) {
+        endOriginalDate = new Date(correctEndDates.calendar);
+      }
+      var _getSortedValues = getSortedValues([startOriginalDate, endOriginalDate]),
         _getSortedValues2 = _slicedToArray(_getSortedValues, 2),
         startValue = _getSortedValues2[0],
         endValue = _getSortedValues2[1];
-      setFirstInputValue(formatInputValue({
-        value: startValue,
-        format: format,
-        lang: lang
-      }));
-      setSecondInputValue(formatInputValue({
-        value: endValue,
-        format: format,
-        lang: lang
-      }));
-      setCalendarFirstValue(formatCalendarValue(startValue, format, lang));
-      setCalendarSecondValue(formatCalendarValue(endValue, format, lang));
+      var _getFormattedDates3 = getFormattedDates({
+          value: startValue || null,
+          delimiter: dateFormatDelimiter(),
+          lang: lang,
+          format: format,
+          includeEdgeDates: includeEdgeDates,
+          min: min,
+          max: max
+        }),
+        startFormattedDate = _getFormattedDates3.formattedDate;
+      var _getFormattedDates4 = 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 = 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;
@@ -311,8 +383,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         _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);
       }
@@ -322,10 +394,10 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         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);
@@ -364,14 +436,14 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       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();
@@ -403,13 +475,17 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       }
     }, [calendarFirstValue, calendarSecondValue]);
     useLayoutEffect(function () {
-      var externalDate = startExternalValue || defaultFirstDate;
-      updateExternalFirstDate(externalDate, setFirstInputValue, setCalendarFirstValue);
-    }, [startExternalValue, defaultFirstDate, format, lang]);
+      updateExternalFirstDate(startExternalValue || undefined);
+    }, [startExternalValue, format, lang]);
+    useLayoutEffect(function () {
+      updateExternalSecondDate(endExternalValue || undefined);
+    }, [endExternalValue, format, lang]);
+    useLayoutEffect(function () {
+      !startExternalValue && updateExternalFirstDate(defaultFirstDate);
+    }, [defaultFirstDate, format, lang]);
     useLayoutEffect(function () {
-      var externalDate = endExternalValue || defaultSecondDate;
-      updateExternalSecondDate(externalDate, setSecondInputValue, setCalendarSecondValue);
-    }, [endExternalValue, defaultSecondDate, format, lang]);
+      !endExternalValue && updateExternalSecondDate(defaultSecondDate);
+    }, [defaultSecondDate, format, lang]);
     var RootWrapper = useCallback(function (_ref6) {
       var children = _ref6.children;
       return /*#__PURE__*/React.createElement(Root, {

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { calendarDoubleConfig, calendarBaseTokens, withRange, calendarBaseConfig } from "../../../Calendar";
-import { tokens } from "../../DatePicker.tokens";
 import { component, mergeConfig } from "../../../../engines";
+import { tokens } from "../../DatePicker.tokens";
 import { baseCalendarTokens } from "../../DatePickerBase.styles";
 var mergedCalendarDoubleConfig = /*#__PURE__*/mergeConfig(calendarDoubleConfig);
 var CalendarDouble = /*#__PURE__*/component(mergedCalendarDoubleConfig);

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

@@ -10,11 +10,12 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx, getPlacements, noop } from "../../../utils";
-import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from "../utils/dateHelper";
+import { getDateFormatDelimiter } from "../utils/dateHelper";
 import { useDatePicker } from "../hooks/useDatePicker";
 import { classes } from "../DatePicker.tokens";
 import { InputHidden, StyledCalendar } from "../DatePickerBase.styles";
 import { keys, useKeyNavigation } from "../hooks/useKeyboardNavigation";
+import { getFormattedDates } from "../utils";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
@@ -92,32 +93,44 @@ export var 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 = useRef(null);
     var innerRef = useRef(null);
     var _useState = useState(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = useState(formatCalendarValue(value || defaultDate, format, lang)),
-      _useState4 = _slicedToArray(_useState3, 2),
-      calendarValue = _useState4[0],
-      setCalendarValue = _useState4[1];
-    var _useState5 = useState(formatInputValue({
-        value: value || defaultDate,
-        format: format,
-        lang: lang
-      })),
-      _useState6 = _slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInputValue = _useState6[1];
     var dateFormatDelimiter = useCallback(function () {
       return getDateFormatDelimiter(format);
     }, [format]);
+    var initialValues = getFormattedDates({
+      value: value || defaultDate,
+      delimiter: dateFormatDelimiter(),
+      lang: lang,
+      format: format,
+      includeEdgeDates: includeEdgeDates,
+      min: min,
+      max: max
+    });
+    var _useState3 = useState({
+        calendar: initialValues.originalDate,
+        input: initialValues.formattedDate
+      }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      correctDates = _useState4[0],
+      setCorrectDates = _useState4[1];
+    var _useState5 = useState(correctDates.calendar),
+      _useState6 = _slicedToArray(_useState5, 2),
+      calendarValue = _useState6[0],
+      setCalendarValue = _useState6[1];
+    var _useState7 = useState(correctDates.input),
+      _useState8 = _slicedToArray(_useState7, 2),
+      inputValue = _useState8[0],
+      setInputValue = _useState8[1];
     var _useDatePicker = useDatePicker({
         currentValue: inputValue,
-        setInputValue: setInputValue,
-        setCalendarValue: setCalendarValue,
-        dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
         disabled: disabled,
@@ -126,6 +139,14 @@ export var 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
@@ -133,16 +154,18 @@ export var 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 !== 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 !== keys.Escape ? true : innerOpened;
+      if (!innerOpened && !calendarValue) {
+        setCalendarValue(function (prevValue) {
+          return prevValue === undefined ? null : undefined;
+        });
       }
       if (onToggle) {
         onToggle(isCalendarOpen, event);
@@ -152,10 +175,22 @@ export var datePickerRoot = function datePickerRoot(Root) {
     };
     var _useKeyNavigation = 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.createElement(StyledInput, {
       ref: inputRef,
       className: cx(datePickerErrorClass, datePickerSuccessClass),
@@ -169,11 +204,9 @@ export var 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,
@@ -189,9 +222,13 @@ export var datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     useLayoutEffect(function () {
-      var externalDate = value || defaultDate;
-      updateExternalDate(externalDate, setInputValue, setCalendarValue);
-    }, [value, defaultDate, format, lang]);
+      updateExternalDate(value);
+    }, [value, format, lang]);
+    useLayoutEffect(function () {
+      if (!value) {
+        updateExternalDate(defaultDate);
+      }
+    }, [defaultDate, format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,
@@ -235,9 +272,7 @@ export var 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.createElement(LeftHelper, {
       className: cx(datePickerErrorClass, datePickerSuccessClass)
     }, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({