@salutejs/plasma-new-hope 0.254.0-dev.0 → 0.255.0-canary.1720.13074481962.0

package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -19,7 +19,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _RangeDate = /*#__PURE__*/require("./RangeDate.styles");
 var _RangeDatePopover = /*#__PURE__*/require("./RangeDatePopover/RangeDatePopover");
-var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "value", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -40,6 +40,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
       _ref$opened = _ref.opened,
       opened = _ref$opened === void 0 ? false : _ref$opened,
+      externalValue = _ref.value,
       label = _ref.label,
       leftHelper = _ref.leftHelper,
       contentLeft = _ref.contentLeft,
@@ -122,6 +123,10 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
     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],
@@ -134,24 +139,24 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang)),
+    var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(startExternalValue || defaultFirstDate, format, lang)),
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
     var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
-        value: defaultFirstDate,
+        value: startExternalValue || defaultFirstDate,
         format: format,
         lang: lang
       })),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
-    var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang)),
+    var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(endExternalValue || defaultSecondDate, format, lang)),
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
     var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
-        value: defaultSecondDate,
+        value: endExternalValue || defaultSecondDate,
         format: format,
         lang: lang
       })),
@@ -208,7 +213,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         onCommitDate: onCommitFirstDate
       }),
       handleChangeFirstValue = _useDatePicker.handleChangeValue,
-      handleCommitFirstDate = _useDatePicker.handleCommitDate;
+      handleCommitFirstDate = _useDatePicker.handleCommitDate,
+      updateExternalFirstDate = _useDatePicker.updateExternalDate;
     var _useDatePicker2 = (0, _useDatePicker3.useDatePicker)({
         currentValue: inputSecondValue,
         setInputValue: setSecondInputValue,
@@ -225,7 +231,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         onCommitDate: onCommitSecondDate
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
-      handleCommitSecondDate = _useDatePicker2.handleCommitDate;
+      handleCommitSecondDate = _useDatePicker2.handleCommitDate,
+      updateExternalSecondDate = _useDatePicker2.updateExternalDate;
     var handleToggle = function handleToggle(currentOpened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
       if (disabled || readOnly) {
@@ -314,10 +321,10 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         handleToggle(false);
       }
     };
-    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        firstDate = _ref3[0],
-        secondDate = _ref3[1];
+    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref4, dateInfo) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        firstDate = _ref5[0],
+        secondDate = _ref5[1];
       if (firstDate) {
         handleCommitFirstDate(firstDate, false, true, dateInfo);
       }
@@ -393,43 +400,21 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         return prevOpen !== opened && opened;
       });
     }, [opened]);
-    (0, _react.useEffect)(function () {
-      setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
-      setInputFirstValue((0, _dateHelper.formatInputValue)({
-        value: defaultFirstDate,
-        format: format,
-        lang: lang
-      }));
-    }, [defaultFirstDate]);
-    (0, _react.useEffect)(function () {
-      setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
-      setInputSecondValue((0, _dateHelper.formatInputValue)({
-        value: defaultSecondDate,
-        format: format,
-        lang: lang
-      }));
-    }, [defaultSecondDate]);
-    (0, _react.useEffect)(function () {
-      setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
-      setInputFirstValue((0, _dateHelper.formatInputValue)({
-        value: defaultFirstDate,
-        format: format,
-        lang: lang
-      }));
-      setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
-      setInputSecondValue((0, _dateHelper.formatInputValue)({
-        value: defaultSecondDate,
-        format: format,
-        lang: lang
-      }));
-    }, [format, lang]);
     (0, _react.useEffect)(function () {
       if (calendarFirstValue && calendarSecondValue) {
         setFullDateEntered(true);
       }
     }, [calendarFirstValue, calendarSecondValue]);
-    var RootWrapper = (0, _react.useCallback)(function (_ref4) {
-      var children = _ref4.children;
+    (0, _react.useLayoutEffect)(function () {
+      var externalDate = startExternalValue || defaultFirstDate;
+      updateExternalFirstDate(externalDate, setFirstInputValue, setCalendarFirstValue);
+    }, [startExternalValue, defaultFirstDate, format, lang]);
+    (0, _react.useLayoutEffect)(function () {
+      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, {
         view: view,
         size: size,

package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js

@@ -17,7 +17,7 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _SingleDate = /*#__PURE__*/require("./SingleDate.styles");
-var _excluded = ["className", "opened", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
+var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -34,6 +34,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     var className = _ref.className,
       _ref$opened = _ref.opened,
       opened = _ref$opened === void 0 ? false : _ref$opened,
+      value = _ref.value,
       label = _ref.label,
       _ref$labelPlacement = _ref.labelPlacement,
       labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
@@ -102,12 +103,12 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang)),
+    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: defaultDate,
+        value: value || defaultDate,
         format: format,
         lang: lang
       })),
@@ -137,7 +138,8 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       datePickerErrorClass = _useDatePicker.datePickerErrorClass,
       datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
       handleChangeValue = _useDatePicker.handleChangeValue,
-      handleCommitDate = _useDatePicker.handleCommitDate;
+      handleCommitDate = _useDatePicker.handleCommitDate,
+      updateExternalDate = _useDatePicker.updateExternalDate;
     var handleToggle = function handleToggle(opened, event) {
       if (disabled || readOnly) {
         return;
@@ -189,22 +191,10 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
         return prevOpen !== opened && opened;
       });
     }, [opened]);
-    (0, _react.useEffect)(function () {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
-      setInputValue((0, _dateHelper.formatInputValue)({
-        value: defaultDate,
-        format: format,
-        lang: lang
-      }));
-    }, [defaultDate]);
-    (0, _react.useEffect)(function () {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
-      setInputValue((0, _dateHelper.formatInputValue)({
-        value: defaultDate,
-        format: format,
-        lang: lang
-      }));
-    }, [format, lang]);
+    (0, _react.useLayoutEffect)(function () {
+      var externalDate = value || defaultDate;
+      updateExternalDate(externalDate, setInputValue, setCalendarValue);
+    }, [value, defaultDate, format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       size: size,

package/emotion/cjs/components/DatePicker/hooks/useDatePicker.js

@@ -122,10 +122,32 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       }
     });
   };
+  var updateExternalDate = function updateExternalDate(externalDate, inputSetter, calendarSetter) {
+    inputSetter((0, _dateHelper.formatInputValue)({
+      value: externalDate,
+      format: format,
+      lang: lang
+    }));
+    if (!format) {
+      calendarSetter((0, _dateHelper.formatCalendarValue)(externalDate, undefined, lang));
+      return;
+    }
+    if (!externalDate) {
+      calendarSetter(undefined);
+      return;
+    }
+    var _getDateFromFormat2 = (0, _dateHelper.getDateFromFormat)(externalDate, undefined, lang),
+      newDate = _getDateFromFormat2.value,
+      isError = _getDateFromFormat2.isError;
+    if (!isError) {
+      calendarSetter((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
+    }
+  };
   return {
     datePickerErrorClass: datePickerErrorClass,
     datePickerSuccessClass: datePickerSuccessClass,
     handleChangeValue: handleChangeValue,
-    handleCommitDate: handleCommitDate
+    handleCommitDate: handleCommitDate,
+    updateExternalDate: updateExternalDate
   };
 };

package/emotion/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -136,6 +136,14 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
         });
         setPrevValue(value);
       }
+      if (!value) {
+        dispatch({
+          type: ActionType.UPDATE_DATE,
+          payload: {
+            value: min || new Date()
+          }
+        });
+      }
     }, [value, prevValue]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: outerRootRef,

package/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -190,6 +190,14 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
         }
         setPrevValue(value);
       }
+      if (!value) {
+        dispatch({
+          type: ActionType.UPDATE_DATE,
+          payload: {
+            value: min || new Date()
+          }
+        });
+      }
     }, [value, prevValue]);
     useEffect(function () {
       setFirstDate(date);

package/emotion/es/components/DatePicker/RangeDate/RangeDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "value", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { createRef, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+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 { useDatePicker } from '../hooks/useDatePicker';
@@ -31,6 +31,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
       _ref$opened = _ref.opened,
       opened = _ref$opened === void 0 ? false : _ref$opened,
+      externalValue = _ref.value,
       label = _ref.label,
       leftHelper = _ref.leftHelper,
       contentLeft = _ref.contentLeft,
@@ -113,6 +114,10 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
     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],
@@ -125,24 +130,24 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = useState(formatCalendarValue(defaultFirstDate, format, lang)),
+    var _useState7 = useState(formatCalendarValue(startExternalValue || defaultFirstDate, format, lang)),
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
     var _useState9 = useState(formatInputValue({
-        value: defaultFirstDate,
+        value: startExternalValue || defaultFirstDate,
         format: format,
         lang: lang
       })),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
-    var _useState11 = useState(formatCalendarValue(defaultSecondDate, format, lang)),
+    var _useState11 = useState(formatCalendarValue(endExternalValue || defaultSecondDate, format, lang)),
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
     var _useState13 = useState(formatInputValue({
-        value: defaultSecondDate,
+        value: endExternalValue || defaultSecondDate,
         format: format,
         lang: lang
       })),
@@ -199,7 +204,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         onCommitDate: onCommitFirstDate
       }),
       handleChangeFirstValue = _useDatePicker.handleChangeValue,
-      handleCommitFirstDate = _useDatePicker.handleCommitDate;
+      handleCommitFirstDate = _useDatePicker.handleCommitDate,
+      updateExternalFirstDate = _useDatePicker.updateExternalDate;
     var _useDatePicker2 = useDatePicker({
         currentValue: inputSecondValue,
         setInputValue: setSecondInputValue,
@@ -216,7 +222,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         onCommitDate: onCommitSecondDate
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
-      handleCommitSecondDate = _useDatePicker2.handleCommitDate;
+      handleCommitSecondDate = _useDatePicker2.handleCommitDate,
+      updateExternalSecondDate = _useDatePicker2.updateExternalDate;
     var handleToggle = function handleToggle(currentOpened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
       if (disabled || readOnly) {
@@ -305,10 +312,10 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         handleToggle(false);
       }
     };
-    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        firstDate = _ref3[0],
-        secondDate = _ref3[1];
+    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref4, dateInfo) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        firstDate = _ref5[0],
+        secondDate = _ref5[1];
       if (firstDate) {
         handleCommitFirstDate(firstDate, false, true, dateInfo);
       }
@@ -384,43 +391,21 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         return prevOpen !== opened && opened;
       });
     }, [opened]);
-    useEffect(function () {
-      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue({
-        value: defaultFirstDate,
-        format: format,
-        lang: lang
-      }));
-    }, [defaultFirstDate]);
-    useEffect(function () {
-      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue({
-        value: defaultSecondDate,
-        format: format,
-        lang: lang
-      }));
-    }, [defaultSecondDate]);
-    useEffect(function () {
-      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue({
-        value: defaultFirstDate,
-        format: format,
-        lang: lang
-      }));
-      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue({
-        value: defaultSecondDate,
-        format: format,
-        lang: lang
-      }));
-    }, [format, lang]);
     useEffect(function () {
       if (calendarFirstValue && calendarSecondValue) {
         setFullDateEntered(true);
       }
     }, [calendarFirstValue, calendarSecondValue]);
-    var RootWrapper = useCallback(function (_ref4) {
-      var children = _ref4.children;
+    useLayoutEffect(function () {
+      var externalDate = startExternalValue || defaultFirstDate;
+      updateExternalFirstDate(externalDate, setFirstInputValue, setCalendarFirstValue);
+    }, [startExternalValue, defaultFirstDate, format, lang]);
+    useLayoutEffect(function () {
+      var externalDate = endExternalValue || defaultSecondDate;
+      updateExternalSecondDate(externalDate, setSecondInputValue, setCalendarSecondValue);
+    }, [endExternalValue, defaultSecondDate, format, lang]);
+    var RootWrapper = useCallback(function (_ref6) {
+      var children = _ref6.children;
       return /*#__PURE__*/React.createElement(Root, {
         view: view,
         size: size,

package/emotion/es/components/DatePicker/SingleDate/SingleDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "opened", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
+var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx, getPlacements, noop } from '../../../utils';
 import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
 import { useDatePicker } from '../hooks/useDatePicker';
@@ -25,6 +25,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
     var className = _ref.className,
       _ref$opened = _ref.opened,
       opened = _ref$opened === void 0 ? false : _ref$opened,
+      value = _ref.value,
       label = _ref.label,
       _ref$labelPlacement = _ref.labelPlacement,
       labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
@@ -93,12 +94,12 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = useState(formatCalendarValue(defaultDate, format, lang)),
+    var _useState3 = useState(formatCalendarValue(value || defaultDate, format, lang)),
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
     var _useState5 = useState(formatInputValue({
-        value: defaultDate,
+        value: value || defaultDate,
         format: format,
         lang: lang
       })),
@@ -128,7 +129,8 @@ export var datePickerRoot = function datePickerRoot(Root) {
       datePickerErrorClass = _useDatePicker.datePickerErrorClass,
       datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
       handleChangeValue = _useDatePicker.handleChangeValue,
-      handleCommitDate = _useDatePicker.handleCommitDate;
+      handleCommitDate = _useDatePicker.handleCommitDate,
+      updateExternalDate = _useDatePicker.updateExternalDate;
     var handleToggle = function handleToggle(opened, event) {
       if (disabled || readOnly) {
         return;
@@ -180,22 +182,10 @@ export var datePickerRoot = function datePickerRoot(Root) {
         return prevOpen !== opened && opened;
       });
     }, [opened]);
-    useEffect(function () {
-      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue({
-        value: defaultDate,
-        format: format,
-        lang: lang
-      }));
-    }, [defaultDate]);
-    useEffect(function () {
-      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue({
-        value: defaultDate,
-        format: format,
-        lang: lang
-      }));
-    }, [format, lang]);
+    useLayoutEffect(function () {
+      var externalDate = value || defaultDate;
+      updateExternalDate(externalDate, setInputValue, setCalendarValue);
+    }, [value, defaultDate, format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,

package/emotion/es/components/DatePicker/hooks/useDatePicker.js

@@ -116,10 +116,32 @@ export var useDatePicker = function useDatePicker(_ref) {
       }
     });
   };
+  var updateExternalDate = function updateExternalDate(externalDate, inputSetter, calendarSetter) {
+    inputSetter(formatInputValue({
+      value: externalDate,
+      format: format,
+      lang: lang
+    }));
+    if (!format) {
+      calendarSetter(formatCalendarValue(externalDate, undefined, lang));
+      return;
+    }
+    if (!externalDate) {
+      calendarSetter(undefined);
+      return;
+    }
+    var _getDateFromFormat2 = getDateFromFormat(externalDate, undefined, lang),
+      newDate = _getDateFromFormat2.value,
+      isError = _getDateFromFormat2.isError;
+    if (!isError) {
+      calendarSetter(formatCalendarValue(newDate, format, lang));
+    }
+  };
   return {
     datePickerErrorClass: datePickerErrorClass,
     datePickerSuccessClass: datePickerSuccessClass,
     handleChangeValue: handleChangeValue,
-    handleCommitDate: handleCommitDate
+    handleCommitDate: handleCommitDate,
+    updateExternalDate: updateExternalDate
   };
 };

package/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -135,6 +135,14 @@ var calendarBaseRoot = function calendarBaseRoot(Root) {
         });
         setPrevValue(value);
       }
+      if (!value) {
+        dispatch({
+          type: ActionType.UPDATE_DATE,
+          payload: {
+            value: min || new Date()
+          }
+        });
+      }
     }, [value, prevValue]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: outerRootRef,