@salutejs/plasma-new-hope 0.166.0-canary.1475.11347015087.0 → 0.166.1-canary.1444.11348071542.0

package/styled-components/cjs/components/DatePicker/hooks/useDatePicker.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDatePicker = void 0;
 var _DatePicker = /*#__PURE__*/require("../DatePicker.tokens");
 var _dateHelper = /*#__PURE__*/require("../utils/dateHelper");
+var _datejs = /*#__PURE__*/require("../../../utils/datejs");
 var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
   var currentValue = _ref.currentValue,
     setInputValue = _ref.setInputValue,
     setCalendarValue = _ref.setCalendarValue,
+    setIsInnerOpen = _ref.setIsInnerOpen,
     dateFormatDelimiter = _ref.dateFormatDelimiter,
     format = _ref.format,
     _ref$lang = _ref.lang,
@@ -19,12 +21,24 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     maskWithFormat = _ref.maskWithFormat,
     valueError = _ref.valueError,
     valueSuccess = _ref.valueSuccess,
+    inputRef = _ref.inputRef,
     name = _ref.name,
+    onToggle = _ref.onToggle,
     onChangeValue = _ref.onChangeValue,
     onCommitDate = _ref.onCommitDate,
     onChange = _ref.onChange;
   var datePickerErrorClass = valueError ? _DatePicker.classes.datePickerError : undefined;
   var datePickerSuccessClass = valueSuccess ? _DatePicker.classes.datePickerSuccess : undefined;
+  var handleToggle = function handleToggle(opened, event) {
+    if (disabled || readOnly) {
+      return;
+    }
+    var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) ? true : opened;
+    if (onToggle) {
+      return onToggle(isCalendarOpen, event);
+    }
+    setIsInnerOpen(isCalendarOpen);
+  };
   var handleChangeValue = function handleChangeValue(event) {
     if (disabled || readOnly) {
       return;
@@ -47,14 +61,24 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       });
       return;
     }
-    var _validateDateWithFull = (0, _dateHelper.validateDateWithFullMonth)({
-        currentValue: newValue,
-        format: format,
-        lang: lang
-      }),
-      hasMonthFullName = _validateDateWithFull.hasMonthFullName,
-      isValidMonth = _validateDateWithFull.isValidMonth,
-      isLengthEqual = _validateDateWithFull.isLengthEqual;
+
+    /**
+     * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
+     * нужно дополнительно проводить валидацию на полноту введенной даты.
+     * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
+     */
+    var hasMonthFullName = /M{3,4}/g.test(format);
+    var isValidMonth;
+    var isLengthEqual;
+    if (hasMonthFullName) {
+      _datejs.customDayjs.locale(lang);
+      var firstIndexOfMonth = format.indexOf('M');
+      var lastIndexOfMonth = newValue.indexOf(dateFormatDelimiter(), firstIndexOfMonth);
+      var fullMonthName = !lastIndexOfMonth ? newValue.slice(firstIndexOfMonth) : newValue.slice(firstIndexOfMonth, lastIndexOfMonth);
+      var monthFormatting = format.replace(/[^M]/g, '');
+      isValidMonth = (0, _datejs.customDayjs)("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
+      isLengthEqual = format.length - monthFormatting.length === newValue.length - fullMonthName.length;
+    }
     if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format, lang));
     }
@@ -84,18 +108,20 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
     if (isCalendarValue) {
-      var _formattedInputValue = (0, _dateHelper.formatInputValue)({
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)({
         value: date,
         format: format,
         lang: lang
-      });
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
-      setInputValue(_formattedInputValue);
+      }));
       onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
-      onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, _formattedInputValue);
       onChange === null || onChange === void 0 || onChange({
         target: {
-          value: _formattedInputValue,
+          value: (0, _dateHelper.formatInputValue)({
+            value: date,
+            format: format,
+            lang: lang
+          }),
           name: name
         }
       });
@@ -106,18 +132,19 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       newDate = _getDateFromFormat.value,
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
-    var formattedInputValue = (0, _dateHelper.formatInputValue)({
+    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
+    setInputValue((0, _dateHelper.formatInputValue)({
       value: newDate,
       format: format,
       lang: lang
-    });
-    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
-    setInputValue(formattedInputValue);
+    }));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
-    onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, formattedInputValue);
     onChange === null || onChange === void 0 || onChange({
       target: {
-        value: formattedInputValue,
+        value: (0, _dateHelper.formatInputValue)({
+          value: date,
+          format: format
+        }),
         name: name
       }
     });
@@ -125,6 +152,7 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
   return {
     datePickerErrorClass: datePickerErrorClass,
     datePickerSuccessClass: datePickerSuccessClass,
+    handleToggle: handleToggle,
     handleChangeValue: handleChangeValue,
     handleCommitDate: handleCommitDate
   };

package/styled-components/cjs/components/DatePicker/hooks/useKeyboardNavigation.js

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useKeyNavigation = exports.keys = void 0;
 var keys = exports.keys = {
-  Space: 'Space',
-  Escape: 'Escape'
+  Space: 'Space'
 };
 var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref) {
   var isCalendarOpen = _ref.isCalendarOpen,
-    closeOnEsc = _ref.closeOnEsc,
     onToggle = _ref.onToggle;
   var onKeyDown = function onKeyDown(event) {
     switch (event.code) {
@@ -22,14 +20,6 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
           }
           break;
         }
-      case keys.Escape:
-        {
-          if (isCalendarOpen && closeOnEsc) {
-            event.preventDefault();
-            onToggle(false, event);
-          }
-          break;
-        }
       default:
         {
           break;

package/styled-components/cjs/components/DatePicker/utils/dateHelper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateDateWithFullMonth = exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
+exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
 var _datejs = /*#__PURE__*/require("../../../utils/datejs");
 var formatInputValue = exports.formatInputValue = function formatInputValue(_ref) {
   var value = _ref.value,
@@ -84,34 +84,4 @@ var getMaskedDateOnInput = exports.getMaskedDateOnInput = function getMaskedDate
     return value + delimiter;
   }
   return value;
-};
-var validateDateWithFullMonth = exports.validateDateWithFullMonth = function validateDateWithFullMonth(_ref2) {
-  var currentValue = _ref2.currentValue,
-    format = _ref2.format,
-    lang = _ref2.lang;
-  /**
-   * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
-   * нужно дополнительно проводить валидацию на полноту введенной даты.
-   * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
-   */
-  var hasMonthFullName = /M{3,4}/g.test(format);
-  if (!hasMonthFullName) {
-    return {
-      hasMonthFullName: hasMonthFullName,
-      isValidMonth: false,
-      isLengthEqual: false
-    };
-  }
-  _datejs.customDayjs.locale(lang);
-  var firstIndexOfMonth = format.indexOf('M');
-  var lastIndexOfMonth = currentValue.indexOf(getDateFormatDelimiter(format), firstIndexOfMonth);
-  var fullMonthName = !lastIndexOfMonth ? currentValue.slice(firstIndexOfMonth) : currentValue.slice(firstIndexOfMonth, lastIndexOfMonth);
-  var monthFormatting = format.replace(/[^M]/g, '');
-  var isValidMonth = (0, _datejs.customDayjs)("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
-  var isLengthEqual = format.length - monthFormatting.length === currentValue.length - fullMonthName.length;
-  return {
-    hasMonthFullName: hasMonthFullName,
-    isValidMonth: isValidMonth,
-    isLengthEqual: isLengthEqual
-  };
 };

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

@@ -164,6 +164,17 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       }
       onChange === null || onChange === void 0 || onChange(event);
     }, [value, onChange]);
+    var handleTextAreaFocus = function handleTextAreaFocus() {
+      if (readOnly || disabled || !(outerRef !== null && outerRef !== void 0 && outerRef.current)) {
+        return;
+      }
+      outerRef.current.scrollTo({
+        top: 0,
+        left: outerRef.current.offsetLeft,
+        behavior: 'smooth'
+      });
+      outerRef.current.focus();
+    };
     var dynamicLabelClasses = getDynamicLabelClasses({
       size: size,
       readOnly: readOnly,
@@ -182,7 +193,8 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       style: _objectSpread({
         width: helperWidth
       }, style),
-      className: (0, _utils.cx)(clearClass, hasDividerClass, className)
+      className: (0, _utils.cx)(clearClass, hasDividerClass, className),
+      onClick: handleTextAreaFocus
     }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, required && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
       className: (0, _utils.cx)(_TextArea2.classes.outerLabelPlacement, requiredPlacementClass)
     }), label, optionalTextNode), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContainer, {

package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.js

@@ -8,4 +8,5 @@ var _engines = /*#__PURE__*/require("../../../../engines");
 var _ = /*#__PURE__*/require("../../../..");
 var _Combobox = /*#__PURE__*/require("./Combobox.config");
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_.comboboxNewConfig, _Combobox.config);
-var Combobox = exports.Combobox = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var ComboboxComponent = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var Combobox = exports.Combobox = ComboboxComponent;

package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx

@@ -332,7 +332,6 @@ const SingleStory = (args: StorySelectProps) => {
                 value={value}
                 onChange={setValue}
                 contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
-                autoComplete="off"
             />
         </div>
     );
@@ -362,7 +361,6 @@ const MultipleStory = (args: StorySelectProps) => {
                 value={value}
                 onChange={setValue}
                 contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
-                autoComplete="off"
             />
         </div>
     );

package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.js

@@ -8,4 +8,5 @@ var _engines = /*#__PURE__*/require("../../../../engines");
 var _ = /*#__PURE__*/require("../../../..");
 var _Combobox = /*#__PURE__*/require("./Combobox.config");
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_.comboboxNewConfig, _Combobox.config);
-var Combobox = exports.Combobox = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var ComboboxComponent = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var Combobox = exports.Combobox = ComboboxComponent;

package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx

@@ -332,7 +332,6 @@ const SingleStory = (args: StorySelectProps) => {
                 value={value}
                 onChange={setValue}
                 contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
-                autoComplete="off"
             />
         </div>
     );
@@ -362,7 +361,6 @@ const MultipleStory = (args: StorySelectProps) => {
                 value={value}
                 onChange={setValue}
                 contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
-                autoComplete="off"
             />
         </div>
     );

package/styled-components/es/components/Combobox/ComboboxNew/utils/filterItems.js

@@ -13,15 +13,15 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 // Не мутирует исходные данные.
 export var filterItems = function filterItems(items, textValue, currentLabel, customFilter) {
   if (!textValue || textValue === currentLabel) return items;
-  var defaultFilter = function defaultFilter(label, value) {
-    return label.toLowerCase().includes(value.toLowerCase());
+  var defaultFilter = function defaultFilter(item, value) {
+    return item.label.toLowerCase().includes(value.toLowerCase());
   };
   var filter = customFilter || defaultFilter;
   var dfs = function dfs(items) {
     var newItems = [];
     items.forEach(function (item) {
       if (item.items) {
-        if (filter(item.label, textValue)) {
+        if (filter(item, textValue)) {
           newItems.push(item);
           return;
         }
@@ -31,12 +31,11 @@ export var filterItems = function filterItems(items, textValue, currentLabel, cu
             items: res
           }));
         }
-      } else if (filter(item.label, textValue)) {
+      } else if (filter(item, textValue)) {
         newItems.push(item);
       }
     });
     return newItems;
   };
-  dfs(items);
   return dfs(items);
 };

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -10,12 +10,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { createRef, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { cx, noop } from '../../../utils';
-import { formatCalendarValue, formatInputValue, getDateFormatDelimiter, getDateFromFormat } from '../utils/dateHelper';
+import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
 import { useDatePicker } from '../hooks/useDatePicker';
 import { classes } from '../DatePicker.tokens';
-import { keys, useKeyNavigation } from '../hooks/useKeyboardNavigation';
+import { useKeyNavigation } from '../hooks/useKeyboardNavigation';
 import { InputHidden } from '../DatePickerBase.styles';
-import { getSortedValues } from '../../Calendar/utils';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
@@ -81,10 +80,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       disabledYearList = _ref.disabledYearList,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'Days' : _ref$type,
-      _ref$frame = _ref.frame,
-      frame = _ref$frame === void 0 ? 'document' : _ref$frame,
-      _ref$usePortal = _ref.usePortal,
-      usePortal = _ref$usePortal === void 0 ? false : _ref$usePortal,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? ['top', 'bottom'] : _ref$placement,
       _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
@@ -100,8 +95,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       onCommitSecondDate = _ref.onCommitSecondDate,
       onFocusFirstTextfield = _ref.onFocusFirstTextfield,
       onFocusSecondTextfield = _ref.onFocusSecondTextfield,
-      _onBlurFirstTextfield = _ref.onBlurFirstTextfield,
-      _onBlurSecondTextfield = _ref.onBlurSecondTextfield,
+      onBlurFirstTextfield = _ref.onBlurFirstTextfield,
+      onBlurSecondTextfield = _ref.onBlurSecondTextfield,
       rest = _objectWithoutProperties(_ref, _excluded);
     var rangeRef = ref && 'current' in ref ? ref : /*#__PURE__*/createRef();
     var rootRef = useRef(null);
@@ -172,6 +167,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         currentValue: inputFirstValue,
         setInputValue: setFirstInputValue,
         setCalendarValue: setCalendarFirstValue,
+        setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
@@ -180,6 +176,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         maskWithFormat: maskWithFormat,
         valueError: firstValueError,
         valueSuccess: firstValueSuccess,
+        inputRef: firstInputRef,
         name: name,
         onChangeValue: onChangeFirstValue,
         onCommitDate: onCommitFirstDate
@@ -190,6 +187,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         currentValue: inputSecondValue,
         setInputValue: setSecondInputValue,
         setCalendarValue: setCalendarSecondValue,
+        setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
@@ -198,6 +196,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         maskWithFormat: maskWithFormat,
         valueError: secondValueError,
         valueSuccess: secondValueSuccess,
+        inputRef: secondInputRef,
         onChangeValue: onChangeSecondValue,
         onCommitDate: onCommitSecondDate
       }),
@@ -208,59 +207,15 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       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)) && event.code !== keys.Escape ? true : opened;
-      if (!isCalendarOpen) {
-        if (calendarFirstValue && !calendarSecondValue) {
-          var _secondInputRef$curre2;
-          secondInputRef === null || secondInputRef === void 0 || (_secondInputRef$curre2 = secondInputRef.current) === null || _secondInputRef$curre2 === void 0 || _secondInputRef$curre2.focus();
-        }
-        if (calendarSecondValue || !calendarFirstValue) {
-          var _firstInputRef$curren2;
-          firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
-        }
-      }
+      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 (onToggle) {
         return onToggle(isCalendarOpen, event);
       }
       setIsInnerOpen(isCalendarOpen);
     };
-    var handleBlur = function handleBlur(event, outerHandler) {
-      if (!inputFirstValue || !inputSecondValue) {
-        outerHandler === null || outerHandler === void 0 || outerHandler(event);
-        return;
-      }
-      var _getDateFromFormat = getDateFromFormat(inputFirstValue, format, lang),
-        firstDate = _getDateFromFormat.value,
-        firstIsSuccess = _getDateFromFormat.isSuccess;
-      var _getDateFromFormat2 = getDateFromFormat(inputSecondValue, format, lang),
-        secondDate = _getDateFromFormat2.value,
-        secondIsSuccess = _getDateFromFormat2.isSuccess;
-      if (!firstIsSuccess || !secondIsSuccess) {
-        outerHandler === null || outerHandler === void 0 || outerHandler(event);
-        return;
-      }
-      var _getSortedValues = getSortedValues([new Date(firstDate), new Date(secondDate)]),
-        _getSortedValues2 = _slicedToArray(_getSortedValues, 2),
-        startValue = _getSortedValues2[0],
-        endValue = _getSortedValues2[1];
-      setFirstInputValue(formatInputValue({
-        value: startValue,
-        format: format,
-        lang: lang
-      }));
-      setSecondInputValue(formatInputValue({
-        value: endValue,
-        format: format,
-        lang: lang
-      }));
-      setCalendarFirstValue(formatCalendarValue(startValue, format, lang));
-      setCalendarSecondValue(formatCalendarValue(endValue, format, lang));
-      outerHandler === null || outerHandler === void 0 || outerHandler(event);
-    };
     var _useKeyNavigation = useKeyNavigation({
         isCalendarOpen: isInnerOpen,
-        onToggle: handleToggle,
-        closeOnEsc: closeOnEsc
+        onToggle: handleToggle
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
     var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
@@ -306,12 +261,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       },
       onFocusFirstTextfield: onFocusFirstTextfield,
       onFocusSecondTextfield: onFocusSecondTextfield,
-      onBlurFirstTextfield: function onBlurFirstTextfield(event) {
-        return handleBlur(event, _onBlurFirstTextfield);
-      },
-      onBlurSecondTextfield: function onBlurSecondTextfield(event) {
-        return handleBlur(event, _onBlurSecondTextfield);
-      },
+      onBlurFirstTextfield: onBlurFirstTextfield,
+      onBlurSecondTextfield: onBlurSecondTextfield,
       onKeyDown: onKeyDown
     }));
     useEffect(function () {
@@ -354,16 +305,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         lang: lang
       }));
     }, [format, lang]);
-    var RootWrapper = useCallback(function (_ref2) {
-      var children = _ref2.children;
-      return /*#__PURE__*/React.createElement(Root, {
-        view: view,
-        size: size,
-        className: cx(classes.datePickerRoot, className),
-        disabled: disabled,
-        readOnly: !disabled && readOnly
-      }, children);
-    }, [view, size, disabled, readOnly]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: rootRef,
       view: view,
@@ -386,8 +327,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       disabledYearList: disabledYearList,
       min: min,
       max: max,
-      frame: frame,
-      usePortal: usePortal,
       placement: placement,
       closeOnOverlayClick: closeOnOverlayClick,
       closeOnEsc: closeOnEsc,
@@ -396,15 +335,14 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       onToggle: handleToggle,
       lang: lang,
       isDoubleCalendar: isDoubleCalendar,
-      rootWrapper: RootWrapper,
       onChangeStartOfRange: function onChangeStartOfRange(firstDate, dateInfo) {
         handleCommitFirstDate(firstDate, false, true, dateInfo);
         handleCommitSecondDate('');
       },
-      onChangeValue: function onChangeValue(_ref3, dateInfo) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-          firstDate = _ref4[0],
-          secondDate = _ref4[1];
+      onChangeValue: function onChangeValue(_ref2, dateInfo) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          firstDate = _ref3[0],
+          secondDate = _ref3[1];
         firstDate && handleCommitFirstDate(firstDate, false, true, dateInfo);
         secondDate && handleCommitSecondDate(secondDate, false, true, dateInfo);
         if (firstDate && secondDate && !firstValueError && !secondValueError) {

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

@@ -3,8 +3,7 @@ import { getPlacements } from '../../../../utils';
 import { StyledPopover } from '../RangeDate.styles';
 import { StyledCalendar, StyledCalendarDouble } from './RangeDatePopover.styles';
 export var RangeDatePopover = function RangeDatePopover(_ref) {
-  var Root = _ref.rootWrapper,
-    target = _ref.target,
+  var target = _ref.target,
     isOpen = _ref.isOpen,
     opened = _ref.opened,
     isDoubleCalendar = _ref.isDoubleCalendar,
@@ -20,10 +19,6 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
     disabledQuarterList = _ref.disabledQuarterList,
     eventYearList = _ref.eventYearList,
     disabledYearList = _ref.disabledYearList,
-    _ref$frame = _ref.frame,
-    frame = _ref$frame === void 0 ? 'document' : _ref$frame,
-    _ref$usePortal = _ref.usePortal,
-    usePortal = _ref$usePortal === void 0 ? false : _ref$usePortal,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? ['top', 'bottom'] : _ref$placement,
     _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
@@ -41,8 +36,7 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
   if (isDoubleCalendar) {
     return /*#__PURE__*/React.createElement(StyledPopover, {
       opened: innerIsOpen,
-      frame: frame,
-      usePortal: usePortal,
+      usePortal: false,
       onToggle: onToggle,
       offset: offset,
       placement: getPlacements(placement),
@@ -51,7 +45,7 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
       isFocusTrapped: false,
       target: target,
       preventOverflow: false
-    }, /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(StyledCalendarDouble, {
+    }, /*#__PURE__*/React.createElement(StyledCalendarDouble, {
       size: size,
       value: calendarValue,
       eventList: eventList,
@@ -68,12 +62,11 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
       includeEdgeDates: includeEdgeDates,
       onChangeValue: onChangeValue,
       onChangeStartOfRange: onChangeStartOfRange
-    })));
+    }));
   }
   return /*#__PURE__*/React.createElement(StyledPopover, {
     opened: innerIsOpen,
-    frame: frame,
-    usePortal: usePortal,
+    usePortal: false,
     onToggle: onToggle,
     offset: offset,
     placement: getPlacements(placement),
@@ -83,7 +76,7 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
     target: target,
     preventOverflow: false,
     closeOnEsc: closeOnEsc
-  }, /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(StyledCalendar, {
+  }, /*#__PURE__*/React.createElement(StyledCalendar, {
     size: size,
     value: calendarValue,
     eventList: eventList,
@@ -101,5 +94,5 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
     includeEdgeDates: includeEdgeDates,
     onChangeValue: onChangeValue,
     onChangeStartOfRange: onChangeStartOfRange
-  })));
+  }));
 };

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../../../DatePicker.tokens';
 import { StyledLabel, LeftHelper } from '../../RangeDate.styles';
-export var base = /*#__PURE__*/css(["", "{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(", ");}"], 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);
+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);