@salutejs/plasma-new-hope 0.88.0-canary.1224.9413433725.0 → 0.88.0-canary.1224.9512430427.0

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "isOpenFirst", "isOpenSecond", "isDoubleCalendar", "isOpenDouble", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "type", "placement", "closeOnOverlayClick", "offset", "onToggleDouble", "onToggleFirst", "onToggleSecond", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "isDoubleCalendar", "isOpen", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "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."); }
@@ -13,24 +13,20 @@ import { cx } from '../../../utils';
 import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
 import { useDatePicker } from '../hooks/useDatePicker';
 import { classes } from '../DatePicker.tokens';
-import { StyledCalendar } from '../DatePickerBase.styles';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_readonly/base';
-import { StyledRange, base } from './DatePicker.styles';
-import { RangeDoubleDate } from './RangeDoubleDate/RangeDoubleDate';
+import { LeftHelper, StyledLabel, StyledRange, base } from './DatePicker.styles';
+import { RangeDatePopover } from './RangeDatePopover/RangeDatePopover';
 export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var _rangeRef$current, _rangeRef$current2;
     var className = _ref.className,
-      _ref$isOpenFirst = _ref.isOpenFirst,
-      isOpenFirst = _ref$isOpenFirst === void 0 ? false : _ref$isOpenFirst,
-      _ref$isOpenSecond = _ref.isOpenSecond,
-      isOpenSecond = _ref$isOpenSecond === void 0 ? false : _ref$isOpenSecond,
       _ref$isDoubleCalendar = _ref.isDoubleCalendar,
       isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
-      isOpenDouble = _ref.isOpenDouble,
+      _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
       label = _ref.label,
       leftHelper = _ref.leftHelper,
       contentLeft = _ref.contentLeft,
@@ -77,10 +73,10 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       placement = _ref$placement === void 0 ? ['top', 'bottom'] : _ref$placement,
       _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
       closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
+      _ref$closeOnEsc = _ref.closeOnEsc,
+      closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
       offset = _ref.offset,
-      onToggleDouble = _ref.onToggleDouble,
-      onToggleFirst = _ref.onToggleFirst,
-      onToggleSecond = _ref.onToggleSecond,
+      onToggle = _ref.onToggle,
       onChangeFirstValue = _ref.onChangeFirstValue,
       onChangeSecondValue = _ref.onChangeSecondValue,
       onCommitFirstDate = _ref.onCommitFirstDate,
@@ -100,34 +96,26 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState4 = _slicedToArray(_useState3, 2),
       secondInputRef = _useState4[0],
       setSecondInputRef = _useState4[1];
-    var _useState5 = useState(isOpenFirst),
+    var _useState5 = useState(isOpen),
       _useState6 = _slicedToArray(_useState5, 2),
-      isInnerOpenFirst = _useState6[0],
-      setIsInnerOpenFirst = _useState6[1];
-    var _useState7 = useState(isOpenSecond),
+      isInnerOpen = _useState6[0],
+      setIsInnerOpen = _useState6[1];
+    var _useState7 = useState(formatCalendarValue(defaultFirstDate, format)),
       _useState8 = _slicedToArray(_useState7, 2),
-      isInnerOpenSecond = _useState8[0],
-      setIsInnerOpenSecond = _useState8[1];
-    var _useState9 = useState(isOpenDouble),
+      calendarFirstValue = _useState8[0],
+      setCalendarFirstValue = _useState8[1];
+    var _useState9 = useState(formatInputValue(defaultFirstDate, format)),
       _useState10 = _slicedToArray(_useState9, 2),
-      isInnerOpenDouble = _useState10[0],
-      setIsInnerOpenDouble = _useState10[1];
-    var _useState11 = useState(formatCalendarValue(defaultFirstDate, format)),
+      inputFirstValue = _useState10[0],
+      setInputFirstValue = _useState10[1];
+    var _useState11 = useState(formatCalendarValue(defaultSecondDate, format)),
       _useState12 = _slicedToArray(_useState11, 2),
-      calendarFirstValue = _useState12[0],
-      setCalendarFirstValue = _useState12[1];
-    var _useState13 = useState(formatInputValue(defaultFirstDate, format)),
+      calendarSecondValue = _useState12[0],
+      setCalendarSecondValue = _useState12[1];
+    var _useState13 = useState(formatInputValue(defaultSecondDate, format)),
       _useState14 = _slicedToArray(_useState13, 2),
-      inputFirstValue = _useState14[0],
-      setInputFirstValue = _useState14[1];
-    var _useState15 = useState(formatCalendarValue(defaultSecondDate, format)),
-      _useState16 = _slicedToArray(_useState15, 2),
-      calendarSecondValue = _useState16[0],
-      setCalendarSecondValue = _useState16[1];
-    var _useState17 = useState(formatInputValue(defaultSecondDate, format)),
-      _useState18 = _slicedToArray(_useState17, 2),
-      inputSecondValue = _useState18[0],
-      setInputSecondValue = _useState18[1];
+      inputSecondValue = _useState14[0],
+      setInputSecondValue = _useState14[1];
     var dateFormatDelimiter = useCallback(function () {
       return getDateFormatDelimiter(format);
     }, [format]);
@@ -135,7 +123,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         currentValue: inputFirstValue,
         setInputValue: setInputFirstValue,
         setCalendarValue: setCalendarFirstValue,
-        setIsInnerOpen: setIsInnerOpenFirst,
+        setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         disabled: disabled,
@@ -144,18 +132,16 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         valueError: firstValueError,
         valueSuccess: firstValueSuccess,
         inputRef: firstInputRef,
-        onToggle: onToggleFirst,
         onChangeValue: onChangeFirstValue,
         onCommitDate: onCommitFirstDate
       }),
-      handleToggleFirst = _useDatePicker.handleToggle,
       handleChangeFirstValue = _useDatePicker.handleChangeValue,
       handleCommitFirstDate = _useDatePicker.handleCommitDate;
     var _useDatePicker2 = useDatePicker({
         currentValue: inputSecondValue,
         setInputValue: setInputSecondValue,
         setCalendarValue: setCalendarSecondValue,
-        setIsInnerOpen: setIsInnerOpenSecond,
+        setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         disabled: disabled,
@@ -164,63 +150,23 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         valueError: secondValueError,
         valueSuccess: secondValueSuccess,
         inputRef: secondInputRef,
-        onToggle: onToggleSecond,
         onChangeValue: onChangeSecondValue,
         onCommitDate: onCommitSecondDate
       }),
-      handleToggleSecond = _useDatePicker2.handleToggle,
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
       handleCommitSecondDate = _useDatePicker2.handleCommitDate;
-    var handleToggleDouble = function handleToggleDouble(opened, event) {
+    var handleToggle = function handleToggle(opened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
       if (disabled || readOnly) {
         return;
       }
       var isCalendarOpen = firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains(event.target || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains(event.target || null) ? true : opened;
-      if (onToggleDouble) {
-        return onToggleDouble(isCalendarOpen, event);
+      if (onToggle) {
+        return onToggle(isCalendarOpen, event);
       }
-      setIsInnerOpenDouble(isCalendarOpen);
+      setIsInnerOpen(isCalendarOpen);
     };
-    var FirstCalendar = /*#__PURE__*/React.createElement(StyledCalendar, {
-      value: calendarFirstValue,
-      type: type,
-      eventList: eventList,
-      disabledList: disabledList,
-      min: min,
-      max: calendarSecondValue || max,
-      includeEdgeDates: includeEdgeDates,
-      isRange: false,
-      onChangeValue: function onChangeValue(date) {
-        handleCommitFirstDate(date, false, true);
-        setIsInnerOpenFirst(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();
-          setIsInnerOpenSecond(true);
-        }
-      }
-    });
-    var SecondCalendar = /*#__PURE__*/React.createElement(StyledCalendar, {
-      value: calendarSecondValue,
-      type: type,
-      eventList: eventList,
-      disabledList: disabledList,
-      min: calendarFirstValue || min,
-      max: max,
-      includeEdgeDates: includeEdgeDates,
-      isRange: false,
-      onChangeValue: function onChangeValue(date) {
-        handleCommitSecondDate(date, false, true);
-        setIsInnerOpenSecond(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();
-          setIsInnerOpenFirst(true);
-        }
-      }
-    });
-    var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, _extends({
+    var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
       ref: rangeRef,
       dividerIcon: dividerIcon,
       dividerVariant: dividerVariant,
@@ -228,8 +174,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       readOnly: !disabled && readOnly,
       firstPlaceholder: firstPlaceholder,
       secondPlaceholder: secondPlaceholder,
-      label: label,
-      leftHelper: leftHelper,
       contentLeft: contentLeft,
       contentRight: contentRight,
       firstTextfieldTextBefore: firstTextfieldTextBefore,
@@ -249,67 +193,67 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       onChangeFirstValue: handleChangeFirstValue,
       onChangeSecondValue: handleChangeSecondValue,
       onSearchFirstValue: function onSearchFirstValue(_, date) {
-        return handleCommitFirstDate(String(date), true, false);
+        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) {
-        return handleCommitSecondDate(String(date), true, false);
+        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();
+        }
       },
       onFocusFirstTextfield: onFocusFirstTextfield,
       onFocusSecondTextfield: onFocusSecondTextfield,
       onBlurFirstTextfield: onBlurFirstTextfield,
       onBlurSecondTextfield: onBlurSecondTextfield
-    }, !isDoubleCalendar && {
-      isOpenFirst: isOpenFirst || isInnerOpenFirst,
-      isOpenSecond: isOpenSecond || isInnerOpenSecond,
-      onToggleFirst: handleToggleFirst,
-      onToggleSecond: handleToggleSecond,
-      firstInputPopoverContent: FirstCalendar,
-      secondInputPopoverContent: SecondCalendar,
-      offset: offset,
-      placement: placement,
-      closeOnOverlayClick: closeOnOverlayClick
-    })));
+    }));
     useEffect(function () {
       var _rangeRef$current5, _rangeRef$current6;
       setFirstInputRef((_rangeRef$current5 = rangeRef.current) === null || _rangeRef$current5 === void 0 ? void 0 : _rangeRef$current5.firstTextField());
       setSecondInputRef((_rangeRef$current6 = rangeRef.current) === null || _rangeRef$current6 === void 0 ? void 0 : _rangeRef$current6.secondTextField());
     }, [rangeRef.current]);
-    if (isDoubleCalendar) {
-      return /*#__PURE__*/React.createElement(Root, _extends({
-        ref: rootRef,
-        view: view,
-        size: size,
-        className: cx(classes.datePickerRoot, className),
-        disabled: disabled,
-        readOnly: !disabled && readOnly
-      }, rest), /*#__PURE__*/React.createElement(RangeDoubleDate, {
-        calendarValue: [calendarFirstValue, calendarSecondValue],
-        target: RangeComponent,
-        isOpen: isOpenDouble || isInnerOpenDouble,
-        onToggle: handleToggleDouble,
-        onChangeStartOfRange: function onChangeStartOfRange(firstDate) {
-          handleCommitFirstDate(firstDate, false, true);
-          handleCommitSecondDate('');
-        },
-        onChangeValue: function onChangeValue(_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 2),
-            firstDate = _ref3[0],
-            secondDate = _ref3[1];
-          firstDate && handleCommitFirstDate(firstDate, false, true);
-          secondDate && handleCommitSecondDate(secondDate, false, true);
-          if (firstDate && secondDate && !firstValueError && !secondValueError) {
-            setIsInnerOpenDouble(false);
-          }
-        }
-      }));
-    }
     return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: rootRef,
       view: view,
       size: size,
       className: cx(classes.datePickerRoot, className),
       disabled: disabled,
       readOnly: !disabled && readOnly
-    }, rest), RangeComponent);
+    }, rest), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(RangeDatePopover, {
+      calendarValue: [calendarFirstValue, calendarSecondValue],
+      target: RangeComponent,
+      isOpen: isOpen || isInnerOpen,
+      includeEdgeDates: includeEdgeDates,
+      eventList: eventList,
+      disabledList: disabledList,
+      min: min,
+      max: max,
+      placement: placement,
+      closeOnOverlayClick: closeOnOverlayClick,
+      closeOnEsc: closeOnEsc,
+      offset: offset,
+      type: type,
+      onToggle: handleToggle,
+      isDoubleCalendar: isDoubleCalendar,
+      onChangeStartOfRange: function onChangeStartOfRange(firstDate) {
+        handleCommitFirstDate(firstDate, false, true);
+        handleCommitSecondDate('');
+      },
+      onChangeValue: function onChangeValue(_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          firstDate = _ref3[0],
+          secondDate = _ref3[1];
+        firstDate && handleCommitFirstDate(firstDate, false, true);
+        secondDate && handleCommitSecondDate(secondDate, false, true);
+        if (firstDate && secondDate && !firstValueError && !secondValueError) {
+          setIsInnerOpen(false);
+        }
+      }
+    }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper));
   });
 };
 export var datePickerRangeConfig = {

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

@@ -16,4 +16,10 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
 export var StyledRange = /*#__PURE__*/styled(Range).withConfig({
   componentId: "plasma-new-hope__sc-zxqgpy-1"
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], rangeTokens.background, tokens.background, rangeTokens.backgroundError, tokens.backgroundError, rangeTokens.backgroundSuccess, tokens.backgroundSuccess, rangeTokens.borderColor, tokens.borderColor, rangeTokens.borderColorError, tokens.borderColorError, rangeTokens.borderColorSuccess, tokens.borderColorSuccess, rangeTokens.borderWidth, tokens.textFieldBorderWidth, rangeTokens.dividerColor, tokens.dividerColor, rangeTokens.labelColor, tokens.labelColor, rangeTokens.leftHelperColor, tokens.leftHelperColor, rangeTokens.textFieldColor, tokens.textFieldColor, rangeTokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColor, rangeTokens.textFieldCaretColor, tokens.textFieldCaretColor, rangeTokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundColorFocus, rangeTokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColor, rangeTokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundErrorColorFocus, rangeTokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColor, rangeTokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldBackgroundSuccessColorFocus, rangeTokens.textFieldBorderWidth, tokens.textFieldBorderWidth, rangeTokens.textFieldBorderColorFocus, tokens.textFieldBorderColorFocus, rangeTokens.textFieldBorderColorError, tokens.textFieldBorderColorError, rangeTokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorErrorFocus, rangeTokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccess, rangeTokens.textFieldBorderColorSuccessFocus, tokens.textFieldBorderColorSuccessFocus, rangeTokens.textFieldTextBeforeColor, tokens.textFieldTextBeforeColor, rangeTokens.textFieldTextAfterColor, tokens.textFieldTextAfterColor, rangeTokens.focusColor, tokens.focusColor, rangeTokens.borderRadius, tokens.borderRadius, rangeTokens.dividerPadding, tokens.dividerPadding, rangeTokens.dividerFontFamily, tokens.dividerFontFamily, rangeTokens.dividerFontStyle, tokens.dividerFontStyle, rangeTokens.dividerFontSize, tokens.dividerFontSize, rangeTokens.dividerFontWeight, tokens.dividerFontWeight, rangeTokens.dividerLetterSpacing, tokens.dividerLetterSpacing, rangeTokens.dividerLineHeight, tokens.dividerLineHeight, rangeTokens.leftContentMargin, tokens.leftContentMargin, rangeTokens.rightContentMargin, tokens.rightContentMargin, rangeTokens.labelOffset, tokens.labelOffset, rangeTokens.labelFontFamily, tokens.labelFontFamily, rangeTokens.labelFontStyle, tokens.labelFontStyle, rangeTokens.labelFontSize, tokens.labelFontSize, rangeTokens.labelFontWeight, tokens.labelFontWeight, rangeTokens.labelLetterSpacing, tokens.labelLetterSpacing, rangeTokens.labelLineHeight, tokens.labelLineHeight, rangeTokens.textFieldHeight, tokens.textFieldHeight, rangeTokens.textFieldBorderRadius, tokens.textFieldBorderRadius, rangeTokens.textFieldPadding, tokens.textFieldPadding, rangeTokens.textFieldFontFamily, tokens.textFieldFontFamily, rangeTokens.textFieldFontStyle, tokens.textFieldFontStyle, rangeTokens.textFieldFontSize, tokens.textFieldFontSize, rangeTokens.textFieldFontWeight, tokens.textFieldFontWeight, rangeTokens.textFieldLetterSpacing, tokens.textFieldLetterSpacing, rangeTokens.textFieldLineHeight, tokens.textFieldLineHeight, rangeTokens.leftHelperOffset, tokens.leftHelperOffset, rangeTokens.leftHelperFontFamily, tokens.leftHelperFontFamily, rangeTokens.leftHelperFontStyle, tokens.leftHelperFontStyle, rangeTokens.leftHelperFontSize, tokens.leftHelperFontSize, rangeTokens.leftHelperFontWeight, tokens.leftHelperFontWeight, rangeTokens.leftHelperLetterSpacing, tokens.leftHelperLetterSpacing, rangeTokens.leftHelperLineHeight, tokens.leftHelperLineHeight, rangeTokens.textFieldLeftContentMargin, tokens.textFieldLeftContentMargin, rangeTokens.textFieldRightContentMargin, tokens.textFieldRightContentMargin, rangeTokens.textFieldTextBeforeMargin, tokens.textFieldTextBeforeMargin, rangeTokens.textFieldTextAfterMargin, tokens.textFieldTextAfterMargin, rangeTokens.backgroundReadOnly, tokens.backgroundReadOnly, rangeTokens.labelColorReadOnly, tokens.labelColorReadOnly, rangeTokens.leftHelperColorReadOnly, tokens.leftHelperColorReadOnly, rangeTokens.dividerColorReadOnly, tokens.dividerColorReadOnly, rangeTokens.textFieldColorReadOnly, tokens.textFieldColorReadOnly, rangeTokens.textFieldBackgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, rangeTokens.textFieldPlaceholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly);
-export var base = /*#__PURE__*/css([""]);
+export var base = /*#__PURE__*/css(["display:inline-block;"]);
+export var StyledLabel = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-zxqgpy-2"
+})([""]);
+export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-zxqgpy-3"
+})([""]);

package/styled-components/es/components/DatePicker/RangeDate/{RangeDoubleDate/RangeDoubleDate.js → RangeDatePopover/RangeDatePopover.js}

@@ -1,10 +1,11 @@
 import React from 'react';
 import { getPlacements } from '../../../../utils';
 import { StyledPopover } from '../DatePicker.styles';
-import { StyledCalendar } from './RangeDoubleDate.styles';
-export var RangeDoubleDate = function RangeDoubleDate(_ref) {
+import { StyledCalendar, StyledCalendarDouble } from './RangeDatePopover.styles';
+export var RangeDatePopover = function RangeDatePopover(_ref) {
   var target = _ref.target,
     isOpen = _ref.isOpen,
+    isDoubleCalendar = _ref.isDoubleCalendar,
     calendarValue = _ref.calendarValue,
     min = _ref.min,
     max = _ref.max,
@@ -15,10 +16,37 @@ export var RangeDoubleDate = function RangeDoubleDate(_ref) {
     placement = _ref$placement === void 0 ? ['top', 'bottom'] : _ref$placement,
     _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
     closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
+    closeOnEsc = _ref.closeOnEsc,
     offset = _ref.offset,
+    type = _ref.type,
+    size = _ref.size,
     onChangeValue = _ref.onChangeValue,
     onChangeStartOfRange = _ref.onChangeStartOfRange,
     onToggle = _ref.onToggle;
+  if (isDoubleCalendar) {
+    return /*#__PURE__*/React.createElement(StyledPopover, {
+      isOpen: isOpen,
+      usePortal: false,
+      onToggle: onToggle,
+      offset: offset,
+      placement: getPlacements(placement),
+      trigger: "click",
+      closeOnOverlayClick: closeOnOverlayClick,
+      isFocusTrapped: false,
+      target: target,
+      preventOverflow: false
+    }, /*#__PURE__*/React.createElement(StyledCalendarDouble, {
+      size: size,
+      value: calendarValue,
+      eventList: eventList,
+      disabledList: disabledList,
+      min: min,
+      max: max,
+      includeEdgeDates: includeEdgeDates,
+      onChangeValue: onChangeValue,
+      onChangeStartOfRange: onChangeStartOfRange
+    }));
+  }
   return /*#__PURE__*/React.createElement(StyledPopover, {
     isOpen: isOpen,
     usePortal: false,
@@ -29,13 +57,16 @@ export var RangeDoubleDate = function RangeDoubleDate(_ref) {
     closeOnOverlayClick: closeOnOverlayClick,
     isFocusTrapped: false,
     target: target,
-    preventOverflow: false
+    preventOverflow: false,
+    closeOnEsc: closeOnEsc
   }, /*#__PURE__*/React.createElement(StyledCalendar, {
+    size: size,
     value: calendarValue,
     eventList: eventList,
     disabledList: disabledList,
     min: min,
     max: max,
+    type: type,
     includeEdgeDates: includeEdgeDates,
     onChangeValue: onChangeValue,
     onChangeStartOfRange: onChangeStartOfRange

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { calendarDoubleConfig, calendarBaseTokens, withRange, calendarBaseConfig } from '../../../Calendar';
+import { tokens } from '../../DatePicker.tokens';
+import { component, mergeConfig } from '../../../../engines';
+import { baseCalendarTokens } from '../../DatePickerBase.styles';
+var mergedCalendarDoubleConfig = /*#__PURE__*/mergeConfig(calendarDoubleConfig);
+var CalendarDouble = /*#__PURE__*/component(mergedCalendarDoubleConfig);
+var mergedCalendarConfig = /*#__PURE__*/mergeConfig(calendarBaseConfig);
+var Calendar = /*#__PURE__*/component(mergedCalendarConfig);
+var CalendarDoubleRange = /*#__PURE__*/withRange(CalendarDouble);
+var CalendarRange = /*#__PURE__*/withRange(Calendar);
+
+// NOTE: переопределение токенов Calendar
+export var StyledCalendarDouble = /*#__PURE__*/styled(CalendarDoubleRange).withConfig({
+  componentId: "plasma-new-hope__sc-vflcna-0"
+})(["", ":var(", ");", " ", ":calc(var(", ") * 2 + 2.063rem);"], calendarBaseTokens.calendarSeparatorBackground, tokens.calendarSeparatorBackground, baseCalendarTokens, calendarBaseTokens.calendarWidth, tokens.calendarWidth);
+export var StyledCalendar = /*#__PURE__*/styled(CalendarRange).withConfig({
+  componentId: "plasma-new-hope__sc-vflcna-1"
+})(["", ""], baseCalendarTokens);

package/styled-components/es/components/DatePicker/RangeDate/variations/_readonly/base.js

@@ -1,3 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../../../DatePicker.tokens';
-export var base = /*#__PURE__*/css(["&[readonly]{", ":transparent;}"], tokens.textFieldBackgroundColorReadOnly);
+import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+export var base = /*#__PURE__*/css(["&[readonly]{cursor:default;", ":transparent;", "{display:block;color:var(", ");}", "{color:var(", ");}}"], tokens.textFieldBackgroundColorReadOnly, StyledLabel, tokens.labelColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly);

package/styled-components/es/components/DatePicker/RangeDate/variations/_size/base.js

@@ -1,3 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../../../DatePicker.tokens';
-export var base = /*#__PURE__*/css(["width:var(", ");"], tokens.width);
+import { StyledLabel, LeftHelper } from '../../DatePicker.styles';
+export var base = /*#__PURE__*/css(["width:var(", ");", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], tokens.width, StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);

package/styled-components/es/components/DatePicker/RangeDate/variations/_view/base.js

@@ -1,2 +1,4 @@
 import { css } from 'styled-components';
-export var base = /*#__PURE__*/css([""]);
+import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+import { tokens } from '../../../DatePicker.tokens';
+export var base = /*#__PURE__*/css(["", "{display:block;color:var(", ");}", "{color:var(", ");}"], StyledLabel, tokens.labelColor, LeftHelper, tokens.leftHelperColor);

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

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import { component, mergeConfig } from '../../../engines';
 import { textFieldConfig, textFieldTokens } from '../../TextField';
 import { classes, tokens } from '../DatePicker.tokens';
-import { popoverClasses, popoverConfig } from '../../Popover';
+import { popoverConfig } from '../../Popover';
 var mergedTextFieldConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
 var TextField = /*#__PURE__*/component(mergedTextFieldConfig);
 var mergedPopoverConfig = /*#__PURE__*/mergeConfig(popoverConfig);
@@ -16,7 +16,7 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
 export var StyledInput = /*#__PURE__*/styled(TextField).withConfig({
   componentId: "plasma-new-hope__sc-1ohdd6s-1"
 })(["         ", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.borderColor, textFieldTokens.borderColorHover, tokens.borderColorHover, textFieldTokens.borderColorFocus, tokens.borderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.datePickerError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.datePickerSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
-export var base = /*#__PURE__*/css([".", "{display:block;}.", "{display:flex;flex-direction:column;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
+export var base = /*#__PURE__*/css(["display:inline-block;"]);
 export var StyledLabel = /*#__PURE__*/styled.label.withConfig({
   componentId: "plasma-new-hope__sc-1ohdd6s-2"
 })([""]);

package/styled-components/es/components/Dropdown/Dropdown.js

@@ -154,7 +154,8 @@ export var dropdownRoot = function dropdownRoot(Root) {
         onItemClick: onItemClick,
         listWidth: listWidth,
         variant: variant,
-        hasArrow: hasArrow
+        hasArrow: hasArrow,
+        size: size
       });
     }))));
   });

package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -19,7 +19,8 @@ var DropdownInner = function DropdownInner(_ref) {
     onItemClick = _ref.onItemClick,
     listWidth = _ref.listWidth,
     variant = _ref.variant,
-    hasArrow = _ref.hasArrow;
+    hasArrow = _ref.hasArrow,
+    size = _ref.size;
   var handleToggle = function handleToggle(opened) {
     if (opened) {
       dispatchPath({
@@ -58,7 +59,8 @@ var DropdownInner = function DropdownInner(_ref) {
         ariaControls: listId,
         ariaExpanded: isCurrentListOpen,
         ariaLevel: nextLevel,
-        ariaLabel: item.label
+        ariaLabel: item.label,
+        size: size
       }),
       onToggle: handleToggle,
       isFocusTrapped: false,
@@ -90,7 +92,8 @@ var DropdownInner = function DropdownInner(_ref) {
         onItemClick: onItemClick,
         listWidth: listWidth,
         variant: variant,
-        hasArrow: hasArrow
+        hasArrow: hasArrow,
+        size: size
       });
     })));
   }
@@ -105,7 +108,8 @@ var DropdownInner = function DropdownInner(_ref) {
     onHover: onHover,
     onItemSelect: onItemSelect,
     onItemClick: onItemClick,
-    variant: variant
+    variant: variant,
+    size: size
   });
 };
 export { DropdownInner };

package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -1,4 +1,3 @@
-var _DisclosureIconWrappe;
 import React, { useEffect, useRef } from 'react';
 import { classes } from '../../Dropdown.tokens';
 import { cx } from '../../../../utils';
@@ -22,7 +21,8 @@ export var DropdownItem = function DropdownItem(_ref) {
     ariaLevel = _ref.ariaLevel,
     ariaLabel = _ref.ariaLabel,
     variant = _ref.variant,
-    hasArrow = _ref.hasArrow;
+    hasArrow = _ref.hasArrow,
+    size = _ref.size;
   var value = item.value,
     label = item.label,
     disabled = item.disabled,
@@ -30,6 +30,7 @@ export var DropdownItem = function DropdownItem(_ref) {
     contentLeft = item.contentLeft,
     contentRight = item.contentRight;
   var ref = useRef(null);
+  var disclosureIconSize = size === 'xs' ? 'xs' : 's';
   var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
   var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? classes.dropdownItemIsActive : undefined;
@@ -75,8 +76,8 @@ export var DropdownItem = function DropdownItem(_ref) {
     "aria-haspopup": ariaHasPopup,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel
-  }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && (_DisclosureIconWrappe || (_DisclosureIconWrappe = /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
-    size: "xs",
+  }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
+    size: disclosureIconSize,
     color: "inherit"
-  })))));
+  })));
 };