@salutejs/plasma-new-hope 0.325.0-canary.1962.15244720089.0 → 0.325.0-canary.1967.15291487889.0

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.datePickerRangeRoot = exports.datePickerRangeConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
+var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
 var _utils = /*#__PURE__*/require("../../../utils");
 var _dateHelper = /*#__PURE__*/require("../utils/dateHelper");
 var _useDatePicker3 = /*#__PURE__*/require("../hooks/useDatePicker");
@@ -20,10 +21,14 @@ 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", "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", "hasRequiredIndicator", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "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", "hasRequiredIndicator", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -112,6 +117,9 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _ref$closeAfterDateSe = _ref.closeAfterDateSelect,
       closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
       offset = _ref.offset,
+      calendarContainerWidth = _ref.calendarContainerWidth,
+      calendarContainerHeight = _ref.calendarContainerHeight,
+      stretched = _ref.stretched,
       onToggle = _ref.onToggle,
       onChange = _ref.onChange,
       onChangeFirstValue = _ref.onChangeFirstValue,
@@ -493,21 +501,25 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
     (0, _react.useLayoutEffect)(function () {
       updateExternalSecondDate(defaultSecondDate);
     }, [defaultSecondDate, format, lang]);
-    var RootWrapper = (0, _react.useCallback)(function (_ref6) {
-      var children = _ref6.children;
+    var RootWrapper = (0, _react.useCallback)(/*#__PURE__*/(0, _react.forwardRef)(function (_ref6, rootWrapperRef) {
+      var children = _ref6.children,
+        rootWrapperClassName = _ref6.className,
+        onClick = _ref6.onClick;
       return /*#__PURE__*/_react["default"].createElement(Root, {
+        ref: rootWrapperRef,
         view: view,
         size: size,
-        className: (0, _utils.cx)(_DatePicker.classes.datePickerRoot, className),
+        className: rootWrapperClassName,
         disabled: disabled,
-        readOnly: !disabled && readOnly
+        readOnly: !disabled && readOnly,
+        onClick: onClick
       }, children);
-    }, [view, size, disabled, readOnly]);
+    }), [view, size, disabled, readOnly]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: rootRef,
       view: view,
       size: size,
-      className: (0, _utils.cx)(_DatePicker.classes.datePickerRoot, className),
+      className: (0, _classnames["default"])(_DatePicker.classes.datePickerRoot, className, _defineProperty({}, _DatePicker.classes.datePickerstretched, stretched)),
       disabled: disabled,
       readOnly: !disabled && readOnly
     }, rest), /*#__PURE__*/_react["default"].createElement(_RangeDatePopover.RangeDatePopover, {
@@ -532,15 +544,19 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       closeOnOverlayClick: closeOnOverlayClick,
       closeOnEsc: closeOnEsc,
       offset: offset,
+      stretched: stretched,
+      calendarContainerWidth: calendarContainerWidth,
+      calendarContainerHeight: calendarContainerHeight,
       type: type,
       onToggle: handleToggle,
       lang: lang,
       isDoubleCalendar: isDoubleCalendar,
       rootWrapper: RootWrapper,
       onChangeStartOfRange: handleChangeStartOfRange,
-      onChangeValue: handleChangeCalendarValue
+      onChangeValue: handleChangeCalendarValue,
+      setIsInnerOpen: setIsInnerOpen
     }), leftHelper && /*#__PURE__*/_react["default"].createElement(_RangeDate.LeftHelper, {
-      className: (0, _utils.cx)(rangeErrorClass, rangeSuccessClass)
+      className: (0, _classnames["default"])(rangeErrorClass, rangeSuccessClass)
     }, leftHelper), /*#__PURE__*/_react["default"].createElement(_DatePickerBase.InputHidden, _extends({
       name: name,
       type: "hidden",

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

@@ -24,7 +24,7 @@ var StyledPopover = exports.StyledPopover = /*#__PURE__*/(0, _styledComponents["
 var StyledRange = exports.StyledRange = /*#__PURE__*/(0, _styledComponents["default"])(Range).withConfig({
   componentId: "plasma-new-hope__sc-14j95rs-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(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Range.rangeTokens.background, _DatePicker.tokens.background, _Range.rangeTokens.backgroundError, _DatePicker.tokens.backgroundError, _Range.rangeTokens.backgroundSuccess, _DatePicker.tokens.backgroundSuccess, _Range.rangeTokens.borderColor, _DatePicker.tokens.borderColor, _Range.rangeTokens.borderColorError, _DatePicker.tokens.borderColorError, _Range.rangeTokens.borderColorSuccess, _DatePicker.tokens.borderColorSuccess, _Range.rangeTokens.borderWidth, _DatePicker.tokens.textFieldBorderWidth, _Range.rangeTokens.dividerColor, _DatePicker.tokens.dividerColor, _Range.rangeTokens.labelColor, _DatePicker.tokens.labelColor, _Range.rangeTokens.leftHelperColor, _DatePicker.tokens.leftHelperColor, _Range.rangeTokens.textFieldColor, _DatePicker.tokens.textFieldColor, _Range.rangeTokens.textFieldPlaceholderColor, _DatePicker.tokens.textFieldPlaceholderColor, _Range.rangeTokens.textFieldPlaceholderColorFocus, _DatePicker.tokens.textFieldPlaceholderColorFocus, _Range.rangeTokens.textFieldCaretColor, _DatePicker.tokens.textFieldCaretColor, _Range.rangeTokens.textFieldBackgroundColorFocus, _DatePicker.tokens.textFieldBackgroundColorFocus, _Range.rangeTokens.textFieldBackgroundErrorColor, _DatePicker.tokens.textFieldBackgroundErrorColor, _Range.rangeTokens.textFieldBackgroundErrorColorFocus, _DatePicker.tokens.textFieldBackgroundErrorColorFocus, _Range.rangeTokens.textFieldBackgroundSuccessColor, _DatePicker.tokens.textFieldBackgroundSuccessColor, _Range.rangeTokens.textFieldBackgroundSuccessColorFocus, _DatePicker.tokens.textFieldBackgroundSuccessColorFocus, _Range.rangeTokens.textFieldBorderWidth, _DatePicker.tokens.textFieldBorderWidth, _Range.rangeTokens.textFieldBorderColorFocus, _DatePicker.tokens.textFieldBorderColorFocus, _Range.rangeTokens.textFieldBorderColorError, _DatePicker.tokens.textFieldBorderColorError, _Range.rangeTokens.textFieldBorderColorErrorFocus, _DatePicker.tokens.textFieldBorderColorErrorFocus, _Range.rangeTokens.textFieldBorderColorSuccess, _DatePicker.tokens.textFieldBorderColorSuccess, _Range.rangeTokens.textFieldBorderColorSuccessFocus, _DatePicker.tokens.textFieldBorderColorSuccessFocus, _Range.rangeTokens.textFieldTextBeforeColor, _DatePicker.tokens.textFieldTextBeforeColor, _Range.rangeTokens.textFieldTextAfterColor, _DatePicker.tokens.textFieldTextAfterColor, _Range.rangeTokens.focusColor, _DatePicker.tokens.focusColor, _Range.rangeTokens.borderRadius, _DatePicker.tokens.borderRadius, _Range.rangeTokens.dividerPadding, _DatePicker.tokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _DatePicker.tokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _DatePicker.tokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _DatePicker.tokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _DatePicker.tokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _DatePicker.tokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _DatePicker.tokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _DatePicker.tokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _DatePicker.tokens.rightContentMargin, _Range.rangeTokens.labelOffset, _DatePicker.tokens.labelOffset, _Range.rangeTokens.labelFontFamily, _DatePicker.tokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _DatePicker.tokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _DatePicker.tokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _DatePicker.tokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _DatePicker.tokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _DatePicker.tokens.labelLineHeight, _Range.rangeTokens.indicatorColor, _DatePicker.tokens.indicatorColor, _Range.rangeTokens.indicatorSize, _DatePicker.tokens.indicatorSize, _Range.rangeTokens.indicatorSizeOuter, _DatePicker.tokens.indicatorSizeOuter, _Range.rangeTokens.indicatorPlacement, _DatePicker.tokens.indicatorPlacement, _Range.rangeTokens.indicatorOuterPlacement, _DatePicker.tokens.indicatorOuterPlacement, _Range.rangeTokens.indicatorPlacementRight, _DatePicker.tokens.indicatorPlacementRight, _Range.rangeTokens.indicatorOuterPlacementRight, _DatePicker.tokens.indicatorOuterPlacementRight, _Range.rangeTokens.textFieldHeight, _DatePicker.tokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _DatePicker.tokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _DatePicker.tokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _DatePicker.tokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _DatePicker.tokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _DatePicker.tokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _DatePicker.tokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _DatePicker.tokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _DatePicker.tokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _DatePicker.tokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _DatePicker.tokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _DatePicker.tokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _DatePicker.tokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _DatePicker.tokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _DatePicker.tokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _DatePicker.tokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _DatePicker.tokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _DatePicker.tokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _DatePicker.tokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin, _DatePicker.tokens.textFieldTextAfterMargin, _Range.rangeTokens.backgroundReadOnly, _DatePicker.tokens.backgroundReadOnly, _Range.rangeTokens.labelColorReadOnly, _DatePicker.tokens.labelColorReadOnly, _Range.rangeTokens.leftHelperColorReadOnly, _DatePicker.tokens.leftHelperColorReadOnly, _Range.rangeTokens.dividerColorReadOnly, _DatePicker.tokens.dividerColorReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _DatePicker.tokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _DatePicker.tokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly, _DatePicker.tokens.textFieldPlaceholderColorReadOnly);
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:inline-block;"]);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:inline-block;.", ",.", "{width:inherit;}&.", "{width:100%;.", ",", "{width:100%;}}"], _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target, _DatePicker.classes.datePickerstretched, _Popover.popoverClasses.root, StyledRange);
 var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-14j95rs-2"
 })(["color:var(", ");&.", "{color:var(", ");}&.", "{color:var(", ");}"], _DatePicker.tokens.leftHelperColor, _DatePicker.classes.datePickerError, _DatePicker.tokens.leftHelperColorError, _DatePicker.classes.datePickerSuccess, _DatePicker.tokens.leftHelperColorSuccess);

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

@@ -4,11 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RangeDatePopover = void 0;
-var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
+var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
+var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
 var _utils = /*#__PURE__*/require("../../../../utils");
 var _RangeDate = /*#__PURE__*/require("../RangeDate.styles");
+var _DatePicker = /*#__PURE__*/require("../../DatePicker.tokens");
 var _RangeDatePopover = /*#__PURE__*/require("./RangeDatePopover.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref) {
   var Root = _ref.rootWrapper,
     target = _ref.target,
@@ -38,14 +46,36 @@ var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref
     closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
     closeOnEsc = _ref.closeOnEsc,
     offset = _ref.offset,
+    calendarContainerWidth = _ref.calendarContainerWidth,
+    calendarContainerHeight = _ref.calendarContainerHeight,
+    stretched = _ref.stretched,
     type = _ref.type,
     size = _ref.size,
     _ref$lang = _ref.lang,
     lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    setIsInnerOpen = _ref.setIsInnerOpen,
     onChangeValue = _ref.onChangeValue,
     onChangeStartOfRange = _ref.onChangeStartOfRange,
     onToggle = _ref.onToggle;
   var innerIsOpen = Boolean(isOpen || opened);
+  var calendarRootRef = (0, _react.useRef)(null);
+  var doubleCalendarRootRef = (0, _react.useRef)(null);
+  var calendarContainerWidthValue = calendarContainerWidth ? (0, _utils.getSizeValueFromProp)(calendarContainerWidth, 'rem') : undefined;
+  var calendarContainerHeightValue = calendarContainerHeight ? (0, _utils.getSizeValueFromProp)(calendarContainerHeight, 'rem') : undefined;
+  var handleCalendarRootClick = function handleCalendarRootClick(event) {
+    if (disabled || readOnly) {
+      return;
+    }
+    var isRootClicked = event.target === (calendarRootRef === null || calendarRootRef === void 0 ? void 0 : calendarRootRef.current) || event.target === (doubleCalendarRootRef === null || doubleCalendarRootRef === void 0 ? void 0 : doubleCalendarRootRef.current);
+    if (innerIsOpen && stretched && isRootClicked) {
+      setIsInnerOpen(false);
+      if (onToggle) {
+        onToggle(false, event);
+      }
+    }
+  };
   if (isDoubleCalendar) {
     return /*#__PURE__*/_react["default"].createElement(_RangeDate.StyledPopover, {
       opened: innerIsOpen,
@@ -59,7 +89,14 @@ var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref
       isFocusTrapped: false,
       target: target,
       preventOverflow: false
-    }, /*#__PURE__*/_react["default"].createElement(Root, null, /*#__PURE__*/_react["default"].createElement(_RangeDatePopover.StyledCalendarDouble, {
+    }, /*#__PURE__*/_react["default"].createElement(Root, {
+      ref: doubleCalendarRootRef,
+      className: (0, _classnames["default"])(_DatePicker.classes.datePickerRoot, _defineProperty({}, _DatePicker.classes.datePickerstretched, stretched)),
+      onClick: handleCalendarRootClick
+    }, /*#__PURE__*/_react["default"].createElement(_RangeDatePopover.StyledCalendarDouble, {
+      className: (0, _classnames["default"])(_defineProperty({}, _DatePicker.classes.datePickerCalendarstretched, stretched)),
+      innerWidth: calendarContainerWidthValue,
+      innerHeight: calendarContainerHeightValue,
       size: size,
       value: calendarValue,
       eventList: eventList,
@@ -93,7 +130,14 @@ var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref
     target: target,
     preventOverflow: false,
     closeOnEsc: closeOnEsc
-  }, /*#__PURE__*/_react["default"].createElement(Root, null, /*#__PURE__*/_react["default"].createElement(_RangeDatePopover.StyledCalendar, {
+  }, /*#__PURE__*/_react["default"].createElement(Root, {
+    ref: calendarRootRef,
+    className: (0, _classnames["default"])(_DatePicker.classes.datePickerRoot, _defineProperty({}, _DatePicker.classes.datePickerstretched, stretched)),
+    onClick: handleCalendarRootClick
+  }, /*#__PURE__*/_react["default"].createElement(_RangeDatePopover.StyledCalendar, {
+    className: (0, _classnames["default"])(_defineProperty({}, _DatePicker.classes.datePickerCalendarstretched, stretched)),
+    innerWidth: calendarContainerWidthValue,
+    innerHeight: calendarContainerHeightValue,
     size: size,
     value: calendarValue,
     eventList: eventList,

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

@@ -20,7 +20,19 @@ var CalendarRange = /*#__PURE__*/(0, _Calendar.withRange)(Calendar);
 // NOTE: переопределение токенов Calendar
 var StyledCalendarDouble = exports.StyledCalendarDouble = /*#__PURE__*/(0, _styledComponents["default"])(CalendarDoubleRange).withConfig({
   componentId: "plasma-new-hope__sc-vflcna-0"
-})(["", ":var(", ");", " ", ":calc(var(", ") * 2 + 2.063rem);"], _Calendar.calendarBaseTokens.calendarSeparatorBackground, _DatePicker.tokens.calendarSeparatorBackground, _DatePickerBase.baseCalendarTokens, _Calendar.calendarBaseTokens.calendarWidth, _DatePicker.tokens.calendarWidth);
+})(["", ":var(", ");", " ", ":calc(var(", ") * 2 + 2.063rem);width:", ";height:", ";"], _Calendar.calendarBaseTokens.calendarSeparatorBackground, _DatePicker.tokens.calendarSeparatorBackground, _DatePickerBase.baseCalendarTokens, _DatePicker.pivateTokens.calendarDoubleWidth, _DatePicker.tokens.calendarContainerWidth, function (_ref) {
+  var innerWidth = _ref.innerWidth;
+  return innerWidth || "var(".concat(_DatePicker.pivateTokens.calendarDoubleWidth, ")");
+}, function (_ref2) {
+  var innerHeight = _ref2.innerHeight;
+  return innerHeight || "var(".concat(_DatePicker.tokens.calendarContainerHeight, ")");
+});
 var StyledCalendar = exports.StyledCalendar = /*#__PURE__*/(0, _styledComponents["default"])(CalendarRange).withConfig({
   componentId: "plasma-new-hope__sc-vflcna-1"
-})(["", ""], _DatePickerBase.baseCalendarTokens);
+})(["", " width:", ";height:", ";"], _DatePickerBase.baseCalendarTokens, function (_ref3) {
+  var innerWidth = _ref3.innerWidth;
+  return innerWidth || "var(".concat(_DatePicker.tokens.calendarContainerWidth, ")");
+}, function (_ref4) {
+  var innerHeight = _ref4.innerHeight;
+  return innerHeight || "var(".concat(_DatePicker.tokens.calendarContainerHeight, ")");
+});

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.datePickerRoot = exports.datePickerConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
+var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
 var _utils = /*#__PURE__*/require("../../../utils");
 var _dateHelper = /*#__PURE__*/require("../utils/dateHelper");
 var _useDatePicker2 = /*#__PURE__*/require("../hooks/useDatePicker");
@@ -18,10 +19,14 @@ 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", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
+var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -94,6 +99,9 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       _ref$closeOnEsc = _ref.closeOnEsc,
       closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
       offset = _ref.offset,
+      calendarContainerWidth = _ref.calendarContainerWidth,
+      calendarContainerHeight = _ref.calendarContainerHeight,
+      stretched = _ref.stretched,
       onChangeValue = _ref.onChangeValue,
       onCommitDate = _ref.onCommitDate,
       onToggle = _ref.onToggle,
@@ -107,6 +115,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     }
     var inputRef = (0, _react.useRef)(null);
     var innerRef = (0, _react.useRef)(null);
+    var calendarRootRef = (0, _react.useRef)(null);
     var _useState = (0, _react.useState)(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
@@ -136,6 +145,8 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       inputValue = _useState8[0],
       setInputValue = _useState8[1];
+    var calendarContainerWidthValue = calendarContainerWidth ? (0, _utils.getSizeValueFromProp)(calendarContainerWidth, 'rem') : undefined;
+    var calendarContainerHeightValue = calendarContainerHeight ? (0, _utils.getSizeValueFromProp)(calendarContainerHeight, 'rem') : undefined;
     var _useDatePicker = (0, _useDatePicker2.useDatePicker)({
         currentValue: inputValue,
         format: format,
@@ -180,6 +191,17 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       }
       setIsInnerOpen(isCalendarOpen);
     };
+    var handleCalendarRootClick = function handleCalendarRootClick(event) {
+      if (disabled || readOnly) {
+        return;
+      }
+      if (isInnerOpen && stretched && event.target === (calendarRootRef === null || calendarRootRef === void 0 ? void 0 : calendarRootRef.current)) {
+        setIsInnerOpen(false);
+        if (onToggle) {
+          onToggle(false, event);
+        }
+      }
+    };
     var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
         isCalendarOpen: isInnerOpen,
         format: format,
@@ -200,7 +222,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     };
     var DatePickerInput = /*#__PURE__*/_react["default"].createElement(_SingleDate.StyledInput, {
       ref: inputRef,
-      className: (0, _utils.cx)(datePickerErrorClass, datePickerSuccessClass),
+      className: (0, _classnames["default"])(datePickerErrorClass, datePickerSuccessClass),
       value: inputValue,
       size: size,
       readOnly: readOnly,
@@ -237,7 +259,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       size: size,
-      className: (0, _utils.cx)(_DatePicker.classes.datePickerRoot, className),
+      className: (0, _classnames["default"])(_DatePicker.classes.datePickerRoot, className, _defineProperty({}, _DatePicker.classes.datePickerstretched, stretched)),
       disabled: disabled,
       readOnly: !disabled && readOnly,
       ref: ref
@@ -254,12 +276,17 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       target: DatePickerInput,
       preventOverflow: false
     }, /*#__PURE__*/_react["default"].createElement(Root, {
+      ref: calendarRootRef,
       view: view,
       size: size,
-      className: (0, _utils.cx)(_DatePicker.classes.datePickerRoot, className),
+      className: (0, _classnames["default"])(_DatePicker.classes.datePickerRoot, className, _defineProperty({}, _DatePicker.classes.datePickerstretched, stretched)),
       disabled: disabled,
-      readOnly: !disabled && readOnly
+      readOnly: !disabled && readOnly,
+      onClick: handleCalendarRootClick
     }, /*#__PURE__*/_react["default"].createElement(_DatePickerBase.StyledCalendar, {
+      className: (0, _classnames["default"])(_defineProperty({}, _DatePicker.classes.datePickerCalendarstretched, stretched)),
+      innerWidth: calendarContainerWidthValue,
+      innerHeight: calendarContainerHeightValue,
       size: size,
       value: calendarValue,
       type: type,
@@ -279,7 +306,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       locale: lang,
       onChangeValue: handleCalendarPick
     }))), leftHelper && /*#__PURE__*/_react["default"].createElement(_SingleDate.LeftHelper, {
-      className: (0, _utils.cx)(datePickerErrorClass, datePickerSuccessClass)
+      className: (0, _classnames["default"])(datePickerErrorClass, datePickerSuccessClass)
     }, leftHelper), /*#__PURE__*/_react["default"].createElement(_DatePickerBase.InputHidden, _extends({
       type: "hidden",
       datatype: "datepicker-single",

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

@@ -24,7 +24,7 @@ var StyledPopover = exports.StyledPopover = /*#__PURE__*/(0, _styledComponents["
 var StyledInput = exports.StyledInput = /*#__PURE__*/(0, _styledComponents["default"])(TextField).withConfig({
   componentId: "plasma-new-hope__sc-1ye0xbz-1"
 })(["width:100%;", ":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(", ");", ":var(", ");", ":var(", ");}"], _TextField.textFieldTokens.color, _DatePicker.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _DatePicker.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.placeholderColorFocus, _DatePicker.tokens.textFieldPlaceholderColorFocus, _TextField.textFieldTokens.caretColor, _DatePicker.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _DatePicker.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _DatePicker.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _DatePicker.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePicker.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.borderColor, _DatePicker.tokens.borderColor, _TextField.textFieldTokens.borderColorHover, _DatePicker.tokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _DatePicker.tokens.borderColorFocus, _TextField.textFieldTokens.colorReadOnly, _DatePicker.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _DatePicker.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _DatePicker.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _DatePicker.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.height, _DatePicker.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _DatePicker.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _DatePicker.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _DatePicker.tokens.textFieldPadding, _TextField.textFieldTokens.labelInnerPadding, _DatePicker.tokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _DatePicker.tokens.contentLabelInnerPadding, _TextField.textFieldTokens.labelOffset, _DatePicker.tokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _DatePicker.tokens.labelFontFamily, _TextField.textFieldTokens.labelFontStyle, _DatePicker.tokens.labelFontStyle, _TextField.textFieldTokens.labelFontSize, _DatePicker.tokens.labelFontSize, _TextField.textFieldTokens.labelFontWeight, _DatePicker.tokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _DatePicker.tokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _DatePicker.tokens.labelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _DatePicker.tokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _DatePicker.tokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _DatePicker.tokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _DatePicker.tokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _DatePicker.tokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _DatePicker.tokens.labelInnerLineHeight, _TextField.textFieldTokens.labelColorReadOnly, _DatePicker.tokens.labelColorReadOnly, _TextField.textFieldTokens.indicatorColor, _DatePicker.tokens.indicatorColor, _TextField.textFieldTokens.indicatorSizeInner, _DatePicker.tokens.indicatorSize, _TextField.textFieldTokens.indicatorSizeOuter, _DatePicker.tokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _DatePicker.tokens.indicatorPlacement, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _DatePicker.tokens.indicatorOuterPlacement, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _DatePicker.tokens.indicatorPlacementRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _DatePicker.tokens.indicatorOuterPlacementRight, _TextField.textFieldTokens.leftContentMargin, _DatePicker.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _DatePicker.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _DatePicker.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _DatePicker.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _DatePicker.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _DatePicker.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _DatePicker.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _DatePicker.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _DatePicker.tokens.disabledOpacity, _TextField.textFieldTokens.textBeforeColor, _DatePicker.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _DatePicker.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _DatePicker.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _DatePicker.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.contentSlotColor, _DatePicker.tokens.textFieldContentSlotColor, _DatePicker.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotRightColor, _DatePicker.tokens.textFieldContentRightSlotColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotRightColorHover, _DatePicker.tokens.textFieldContentRightSlotColorHover, _TextField.textFieldTokens.contentSlotRightColor, _DatePicker.classes.datePickerError, _TextField.textFieldTokens.backgroundColor, _DatePicker.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _DatePicker.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePicker.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _DatePicker.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _DatePicker.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _DatePicker.tokens.textFieldBorderColorErrorFocus, _DatePicker.classes.datePickerSuccess, _TextField.textFieldTokens.backgroundColor, _DatePicker.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _DatePicker.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePicker.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _DatePicker.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _DatePicker.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _DatePicker.tokens.textFieldBorderColorSuccessFocus);
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:inline-block;.", ",.", "{width:inherit;}"], /*#__PURE__*/String(_Popover.popoverClasses.wrapper), /*#__PURE__*/String(_Popover.popoverClasses.target));
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:inline-block;.", ",.", "{width:inherit;}&.", "{width:100%;.", "{width:100%;}}"], _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target, _DatePicker.classes.datePickerstretched, _Popover.popoverClasses.root);
 var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ye0xbz-2"
 })(["color:var(", ");&.", "{color:var(", ");}&.", "{color:var(", ");}"], _DatePicker.tokens.leftHelperColor, _DatePicker.classes.datePickerError, _DatePicker.tokens.leftHelperColorError, _DatePicker.classes.datePickerSuccess, _DatePicker.tokens.leftHelperColorSuccess);

package/styled-components/cjs/components/Notification/Notification.js

@@ -17,7 +17,7 @@ var _base4 = /*#__PURE__*/require("./variations/_closeIconType/base");
 var _Notification2 = /*#__PURE__*/require("./Notification.types");
 var _Notification3 = /*#__PURE__*/require("./Notification.styles");
 var _utils2 = /*#__PURE__*/require("./utils");
-var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "textColor", "titleColor", "backgroundColor", "onCloseButtonClick"];
+var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "textColor", "titleColor", "backgroundColor", "width", "maxWidth", "onCloseButtonClick"];
 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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -45,6 +45,8 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
       textColor = props.textColor,
       titleColor = props.titleColor,
       backgroundColor = props.backgroundColor,
+      width = props.width,
+      maxWidth = props.maxWidth,
       onCloseButtonClick = props.onCloseButtonClick,
       rest = _objectWithoutProperties(props, _excluded);
     var ariaLive = 'polite';
@@ -72,6 +74,8 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
       "aria-atomic": ariaAtomic
     }, rest), /*#__PURE__*/_react["default"].createElement(_Notification3.Wrapper, {
       backgroundColor: backgroundColor,
+      width: width,
+      maxWidth: maxWidth,
       className: (0, _utils.cx)(_Notification.classes.wrapper, (0, _utils2.getLayoutClass)(layout), oneLineClass, withoutCloseIconClass)
     }, /*#__PURE__*/_react["default"].createElement(_Notification3.ContentBox, {
       iconPlacement: IconPlacementInternal,

package/styled-components/cjs/components/Notification/Notification.styles.js

@@ -23,57 +23,64 @@ var CloseIconWrapper = exports.CloseIconWrapper = /*#__PURE__*/(0, _styledCompon
 })(["position:absolute;width:var(", ");height:var(", ");align-self:var(", ");color:var(", ");:hover{color:var(", ");}&.", "{position:relative;}"], _Notification.tokens.closeIconButtonSize, _Notification.tokens.closeIconButtonSize, _Notification.tokens.horisontalIconCloseAlignSelf, _Notification.tokens.closeIconColor, _Notification.tokens.closeIconColorOnHover, _Notification.classes.horizontal);
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-1"
-})(["position:relative;box-sizing:border-box;background:", ";border-radius:var(", ");border:var(", ") solid var(", ");&.", "{display:flex;align-items:center;gap:var(", ");}"], function (_ref) {
-  var backgroundColor = _ref.backgroundColor;
+})(["position:relative;width:", ";max-width:", ";border-radius:var(", ");border:var(", ") solid var(", ");background:", ";box-sizing:border-box;&.", "{display:flex;align-items:center;gap:var(", ");}"], function (_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "var(".concat(_Notification.tokens.width, ")") : _ref$width;
+  return width;
+}, function (_ref2) {
+  var maxWidth = _ref2.maxWidth;
+  return maxWidth || 'unset';
+}, _Notification.tokens.borderRadius, _Notification.tokens.borderWidth, _Notification.tokens.borderColor, function (_ref3) {
+  var backgroundColor = _ref3.backgroundColor;
   return backgroundColor || "var(".concat(_Notification.tokens.background, ")");
-}, _Notification.tokens.borderRadius, _Notification.tokens.borderWidth, _Notification.tokens.borderColor, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutGap);
+}, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutGap);
 var ButtonsWrapper = exports.ButtonsWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-2"
-})(["margin-top:var(", ");margin-left:", ";align-self:var(", ");&.", "{margin-top:unset;margin-left:unset;}"], _Notification.tokens.buttonsMarginTop, function (_ref2) {
-  var iconPlacement = _ref2.iconPlacement;
+})(["margin-top:var(", ");margin-left:", ";align-self:var(", ");&.", "{margin-top:unset;margin-left:unset;}"], _Notification.tokens.buttonsMarginTop, function (_ref4) {
+  var iconPlacement = _ref4.iconPlacement;
   return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.buttonsMarginLeft, ")") : 'unset';
 }, _Notification.tokens.horisontalActionsAlignSelf, _Notification.classes.horizontal);
 var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-3"
-})(["width:var(", ");height:var(", ");align-self:var(", ");color:", ";margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (_ref3) {
-  var iconColor = _ref3.iconColor;
+})(["width:var(", ");height:var(", ");align-self:var(", ");color:", ";margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (_ref5) {
+  var iconColor = _ref5.iconColor;
   return iconColor || "var(".concat(_Notification.tokens.contentLeftIconColor, ")");
-}, function (_ref4) {
-  var iconPlacement = _ref4.iconPlacement;
+}, function (_ref6) {
+  var iconPlacement = _ref6.iconPlacement;
   return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.contentLeftIconMargin, ")") : 'unset';
-}, function (_ref5) {
-  var iconPlacement = _ref5.iconPlacement;
+}, function (_ref7) {
+  var iconPlacement = _ref7.iconPlacement;
   return iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.contentTopIconMargin, ")") : 'unset';
 }, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutLeftIconMargin);
 var ContentBox = exports.ContentBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-4"
-})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (_ref6) {
-  var iconPlacement = _ref6.iconPlacement;
+})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (_ref8) {
+  var iconPlacement = _ref8.iconPlacement;
   return iconPlacement === _Notification2.placements.left ? 'flex' : 'block';
-}, function (_ref7) {
-  var iconPlacement = _ref7.iconPlacement;
+}, function (_ref9) {
+  var iconPlacement = _ref9.iconPlacement;
   return iconPlacement ? "var(".concat(_Notification.tokens.contentPaddingTop, ")") : "var(".concat(_Notification.tokens.contentPaddingTopWithoutIcon, ")");
 }, _Notification.classes.horizontal);
 var TextBox = exports.TextBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-5"
-})(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (_ref8) {
-  var iconPlacement = _ref8.iconPlacement;
+})(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (_ref10) {
+  var iconPlacement = _ref10.iconPlacement;
   return !iconPlacement || iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingTopWithTopIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingTop, ")");
-}, function (_ref9) {
-  var showCloseIcon = _ref9.showCloseIcon,
-    iconPlacement = _ref9.iconPlacement;
+}, function (_ref11) {
+  var showCloseIcon = _ref11.showCloseIcon,
+    iconPlacement = _ref11.iconPlacement;
   return showCloseIcon && iconPlacement !== _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingRightWithCloseIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingRight, ")");
 }, _Notification.tokens.textboxGap, _Notification.classes.horizontal);
 var StyledTitle = exports.StyledTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-6"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref10) {
-  var textColor = _ref10.textColor;
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref12) {
+  var textColor = _ref12.textColor;
   return textColor || "var(".concat(_Notification.tokens.titleColor, ")");
 });
 var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-7"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref11) {
-  var textColor = _ref11.textColor;
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref13) {
+  var textColor = _ref13.textColor;
   return textColor || "var(".concat(_Notification.tokens.contentColor, ")");
 });
 var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -81,7 +88,7 @@ var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponen
 })(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;&.", "{animation:0.4s showLeftToRightAnimation ease-out;}&.", "{animation:0.4s showTopToCenterAnimation ease-out;}&.", "{animation:0.4s showBottomToCenterAnimation ease-out;}}&&.", "{animation:0.4s hideAnimation ease-out;&.", "{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showTopToCenterAnimation{0%{transform:translateY(-100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@keyframes showBottomToCenterAnimation{0%{transform:translateY(100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@keyframes showLeftToRightAnimation{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideLeftToRightAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(-100%);opacity:0;}}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], _Notification.classes.notificationItemOpened, _Notification.classes.notificationLeftToRightAnimation, _Notification.classes.notificationTopToCenterAnimation, _Notification.classes.notificationBottomToCenterAnimation, _Notification.classes.notificationItemHidden, _Notification.classes.notificationLeftToRightAnimation);
 var StyledRoot = exports.StyledRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-9"
-})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref12) {
-  var placement = _ref12.placement;
+})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref14) {
+  var placement = _ref14.placement;
   return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
 });

package/styled-components/cjs/components/Notification/Notification.template-doc.mdx

@@ -133,3 +133,47 @@ export function App() {
     );
 }
 ```
+
+## Управление шириной уведомления
+
+Для управления шириной компонента доступны следующие свойства:
+
+- `width` — устанавливает ширину компонента.
+- `maxWidth` — устанавливает максимальную ширину компонента.
+
+Оба свойства принимает любые действительные CSS значения для [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width#syntax) и [maxWidth](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
+
+```jsx live
+import React, { useCallback } from 'react';
+import { IconBell } from '@salutejs/plasma-icons';
+import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
+
+export function App() {
+    const handleShow = useCallback(() => {
+        addNotification({
+            id: 'incoming-call',
+            title: 'Входящий вызов',
+            icon: <IconBell color="inherit" size="xs" />,
+            children: 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.',
+            view: 'positive',
+            textColor: 'black',
+            titleColor: 'blue',
+            width: 'fit-content',
+            maxWidth: '30rem'
+        }, 3000);
+    }, []);
+
+    const handleHide = useCallback(() => {
+        closeNotification('incoming-call');
+    }, []);
+
+    return (
+        <NotificationsProvider>
+            <ButtonGroup>
+                <Button text="Показать оповещение" onClick={handleShow} />
+                <Button text="Скрыть оповещение" onClick={handleHide} />
+            </ButtonGroup>
+        </NotificationsProvider>
+    );
+}
+```

package/styled-components/cjs/components/Notification/variations/_layout/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Notification = /*#__PURE__*/require("../../Notification.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{width:var(", ");padding:var(", ");}.", ".", "{padding:var(", ");&.", "{padding-right:var(", ");}}.", ".", ".", "{padding:var(", ");}"], _Notification.classes.wrapper, _Notification.tokens.width, _Notification.tokens.padding, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutPadding, _Notification.classes.withoutCloseIcon, _Notification.tokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.classes.oneLine, _Notification.tokens.paddingOneLineTextbox);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{padding:var(", ");}.", ".", "{padding:var(", ");&.", "{padding-right:var(", ");}}.", ".", ".", "{padding:var(", ");}"], _Notification.classes.wrapper, _Notification.tokens.padding, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutPadding, _Notification.classes.withoutCloseIcon, _Notification.tokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.classes.oneLine, _Notification.tokens.paddingOneLineTextbox);

package/styled-components/cjs/components/NumberInput/ui/Input/Input.js

@@ -140,14 +140,11 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
       }
       return;
     }
-    console.log('here');
     var isValid = _utils2.numberSchema.test(cleanValue);
     if (!isValid) {
-      console.log('not valid', cleanValue);
       setValues(event, lastValidValue);
       return;
     }
-    console.log('valid!', cleanValue);
     if (textWrapperRef !== null && textWrapperRef !== void 0 && textWrapperRef.current && wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && (textWrapperRef === null || textWrapperRef === void 0 || (_textWrapperRef$curre = textWrapperRef.current) === null || _textWrapperRef$curre === void 0 ? void 0 : _textWrapperRef$curre.clientWidth) > (wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientWidth)) {
       wrapperRef.current.scrollLeft = textWrapperRef.current.offsetWidth - textWrapperRef.current.offsetLeft || 0;
     }