@megafon/ui-core 6.4.4 → 6.6.0

package/dist/es/components/Search/Search.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.parse-float.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.string.split.js";
@@ -11,10 +12,12 @@ import "core-js/modules/es.object.values.js";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
+import throttle from 'lodash.throttle';
 import * as PropTypes from 'prop-types';
 import Caption from "../Caption/Caption";
 import Header from "../Header/Header";
 import Preloader from "../Preloader/Preloader";
+import throttleTime from "../../constants/throttleTime";
 import "./Search.css";
 
 var SearchIcon16 = function SearchIcon16(props) {
@@ -42,8 +45,26 @@ var ClearIcon = function ClearIcon(props) {
   }));
 };
 
+var ResizeIcon = function ResizeIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 12,
+    height: 12
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M1 11L11 1M7 11l4-4"
+  }));
+};
+
+var DEFAULT_ROW_COUNT = 3;
+var MAX_ROW_COUNT = 6;
+var TEXTAREA_ROW_HEIGHT = 24;
+var TEXTAREA_MAX_HEIGHT = TEXTAREA_ROW_HEIGHT * MAX_ROW_COUNT;
+var DEFAULT_LABEL_TOP_POSITION = 16;
 var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
 var MAX_POPULAR_ITEMS_LENGTH = 5;
+export var MinTextareaHeight = {
+  ONE_ROW: TEXTAREA_ROW_HEIGHT,
+  THREE_ROWS: TEXTAREA_ROW_HEIGHT * DEFAULT_ROW_COUNT
+};
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -75,6 +96,7 @@ var Search = function Search(_ref) {
       classes = _ref.classes,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'textfield' : _ref$type,
+      textarea = _ref.textarea,
       showLoader = _ref.showLoader,
       showNotFound = _ref.showNotFound,
       textNotFound = _ref.textNotFound,
@@ -82,6 +104,9 @@ var Search = function Search(_ref) {
       popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
       popularTitle = _ref.popularTitle,
       listRef = _ref.listRef,
+      _ref$minTextareaHeigh = _ref.minTextareaHeight,
+      minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
+      showResizer = _ref.showResizer,
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit,
       onBlur = _ref.onBlur,
@@ -108,19 +133,68 @@ var Search = function Search(_ref) {
       popularActiveIndex = _React$useState8[0],
       setPopularActiveIndex = _React$useState8[1];
 
+  var _React$useState9 = React.useState(TEXTAREA_ROW_HEIGHT),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      textareaHeight = _React$useState10[0],
+      setTextareaHeight = _React$useState10[1];
+
+  var _React$useState11 = React.useState(false),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      isTextareaResizing = _React$useState12[0],
+      setIsTextareaResizing = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      isTextareaResized = _React$useState14[0],
+      setIsTextareaResized = _React$useState14[1];
+
   var debouncedOnChange = React.useRef(debounce(function (inputValue) {
     return onChange && onChange(inputValue);
   }, changeDelay));
   var highlightedItem = React.useRef(null);
-  var fieldNode = React.useRef(null);
+  var containerRef = React.useRef(null);
+  var fieldRef = React.useRef(null);
+  var labelRef = React.useRef(null);
+  var resizerRef = React.useRef(null);
   var correctPopularItems = React.useMemo(function () {
     return popularItems.slice(0, MAX_POPULAR_ITEMS_LENGTH);
   }, [popularItems]);
   var isCompact = type === 'compact';
+  var isTextarea = textarea && !isCompact;
   var showClearIcon = isCompact && !!searchQuery;
   var showTextFieldSubmit = !hideIcon && !isCompact && !showLoader;
   var showAdditionalElement = !hideIcon || showLoader || showClearIcon;
   var showPopularItems = !!correctPopularItems.length;
+
+  var getFieldRef = function getFieldRef(node) {
+    if (!node) {
+      return;
+    }
+
+    fieldRef.current = node;
+  };
+
+  var textareaResize = React.useCallback(function () {
+    if (!isTextarea || !fieldRef.current || !containerRef.current || isTextareaResized) {
+      return;
+    }
+
+    fieldRef.current.style.height = "".concat(minTextareaHeight, "px");
+    var scrollHeight = fieldRef.current.scrollHeight;
+
+    var _window$getComputedSt = window.getComputedStyle(fieldRef.current),
+        paddingTop = _window$getComputedSt.paddingTop,
+        paddingBottom = _window$getComputedSt.paddingBottom;
+
+    var innerHeight = scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
+
+    if (innerHeight >= TEXTAREA_MAX_HEIGHT) {
+      fieldRef.current.style.height = "".concat(TEXTAREA_MAX_HEIGHT, "px");
+      return;
+    }
+
+    fieldRef.current.style.height = "".concat(innerHeight, "px");
+  }, [isTextareaResized, minTextareaHeight, isTextarea]);
   var handleChange = React.useCallback(function (e) {
     var _e$target$value = e.target.value,
         inputValue = _e$target$value === void 0 ? '' : _e$target$value;
@@ -134,7 +208,9 @@ var Search = function Search(_ref) {
       // @ts-ignore
       debouncedOnChange.current(inputValue);
     }
-  }, [changeDelay, onChange]);
+
+    textareaResize();
+  }, [changeDelay, onChange, textareaResize]);
   var handleHoverItem = React.useCallback(function (index) {
     return function () {
       setActiveIndex(index);
@@ -185,7 +261,7 @@ var Search = function Search(_ref) {
     var _a;
 
     var chosenValue = popularItems[popularActiveIndex].title;
-    (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.blur();
+    (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     onPopularItemClick === null || onPopularItemClick === void 0 ? void 0 : onPopularItemClick(chosenValue);
   }, [onPopularItemClick, popularActiveIndex, popularItems]);
   var handleKeyDownPopularItems = React.useCallback(function (e) {
@@ -210,6 +286,7 @@ var Search = function Search(_ref) {
         {
           var currentHref = (_a = popularItems[popularActiveIndex]) === null || _a === void 0 ? void 0 : _a.href;
           handlePopularItemMouseUp();
+          e.preventDefault();
 
           if (currentHref) {
             window.location.href = currentHref;
@@ -246,7 +323,12 @@ var Search = function Search(_ref) {
         break;
 
       case e.key === 'Enter' && activeIndex === -1:
+        if (isTextarea && e.shiftKey) {
+          return false;
+        }
+
         handleSearchSubmit();
+        e.preventDefault();
         break;
 
       default:
@@ -254,7 +336,7 @@ var Search = function Search(_ref) {
     }
 
     return false;
-  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length]);
+  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length, isTextarea]);
   var handleKeyDown = React.useCallback(function (e) {
     if (showNotFound && showPopularItems) {
       return handleKeyDownPopularItems(e);
@@ -272,9 +354,68 @@ var Search = function Search(_ref) {
     !!debouncedOnChange.current && debouncedOnChange.current.cancel();
     onChange === null || onChange === void 0 ? void 0 : onChange('');
     setSearchQuery('');
-    (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.focus();
+    (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
   };
 
+  var handleTextareaScroll = function handleTextareaScroll() {
+    if (!(fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) || !(labelRef === null || labelRef === void 0 ? void 0 : labelRef.current)) {
+      return;
+    }
+
+    var scrollTop = fieldRef.current.scrollTop;
+
+    if (!scrollTop) {
+      labelRef.current.style.top = '';
+      return;
+    }
+
+    labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
+  };
+
+  React.useEffect(function () {
+    textareaResize();
+  }, [textareaResize]);
+  React.useEffect(function () {
+    if (!resizerRef.current || !isTextarea || !showResizer) {
+      return;
+    }
+
+    var originalHeight;
+    var originalCoordinateY;
+    var handleResize = throttle(function (moveEvent) {
+      var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
+      var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
+      var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
+      setTextareaHeight(updatedHeight);
+      setIsTextareaResized(true);
+    }, throttleTime.resizeTextarea);
+
+    var handleResizeCancel = function handleResizeCancel() {
+      setIsTextareaResizing(false);
+      window.removeEventListener('mousemove', handleResize);
+      window.removeEventListener('touchmove', handleResize);
+      window.removeEventListener('mouseup', handleResizeCancel);
+      window.removeEventListener('touchend', handleResizeCancel);
+    };
+
+    var handleStartResize = function handleStartResize(event) {
+      if (!fieldRef.current) {
+        return;
+      }
+
+      setIsTextareaResizing(true);
+      event.preventDefault();
+      originalHeight = parseFloat(getComputedStyle(fieldRef.current).getPropertyValue('height').replace('px', ''));
+      originalCoordinateY = event.clientY || event.touches[0].clientY;
+      window.addEventListener('mousemove', handleResize);
+      window.addEventListener('touchmove', handleResize);
+      window.addEventListener('mouseup', handleResizeCancel);
+      window.addEventListener('touchend', handleResizeCancel);
+    };
+
+    resizerRef.current.addEventListener('mousedown', handleStartResize);
+    resizerRef.current.addEventListener('touchstart', handleStartResize);
+  }, [isTextarea, minTextareaHeight, showResizer]);
   React.useEffect(function () {
     return setSearchQuery(value);
   }, [value]);
@@ -407,17 +548,14 @@ var Search = function Search(_ref) {
     }, popularTitle || 'Популярные действия'), renderPopularItems())));
   };
 
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn({
-      open: isFocused,
-      disabled: disabled,
-      type: type,
-      error: verification === Verification.ERROR,
-      success: verification === Verification.VALID
-    }, [className])
-  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
-    className: cn('control', [classes === null || classes === void 0 ? void 0 : classes.control])
-  }), isCompact && renderSubmitButton(), /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
+  var renderLabel = /*#__PURE__*/React.createElement("label", {
+    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
+    htmlFor: searchId,
+    ref: labelRef
+  }, label, required && /*#__PURE__*/React.createElement("span", {
+    className: cn('require-mark')
+  }, "*"));
+  var renderInput = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
     id: searchId,
     className: cn('field', {
       filled: !!searchQuery,
@@ -433,13 +571,48 @@ var Search = function Search(_ref) {
     disabled: disabled,
     type: "text",
     autoComplete: "off",
-    ref: fieldNode
-  })), label && /*#__PURE__*/React.createElement("label", {
-    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
-    htmlFor: searchId
-  }, label, required && /*#__PURE__*/React.createElement("span", {
-    className: cn('require-mark')
-  }, "*")), showAdditionalElement && /*#__PURE__*/React.createElement("div", {
+    ref: getFieldRef
+  })), label && renderLabel);
+  var renderTextarea = /*#__PURE__*/React.createElement(React.Fragment, null, showResizer && /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('resizer', [classes === null || classes === void 0 ? void 0 : classes.resizer]),
+    ref: resizerRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.resizer)), /*#__PURE__*/React.createElement(ResizeIcon, null)), /*#__PURE__*/React.createElement("div", {
+    className: cn('textarea-wrapper')
+  }, /*#__PURE__*/React.createElement("textarea", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
+    id: searchId,
+    className: cn('field', {
+      filled: !!searchQuery,
+      labeled: !!label
+    }, [classes === null || classes === void 0 ? void 0 : classes.input]),
+    style: {
+      height: "".concat(textareaHeight, "px")
+    },
+    placeholder: placeholder,
+    value: searchQuery,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    onScroll: handleTextareaScroll,
+    autoComplete: "off",
+    ref: getFieldRef
+  })), label && renderLabel));
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      open: isFocused,
+      disabled: disabled,
+      type: type,
+      textarea: isTextarea,
+      error: verification === Verification.ERROR,
+      success: verification === Verification.VALID
+    }, [className])
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
+    className: cn('control', {
+      focused: isTextareaResizing
+    }, [classes === null || classes === void 0 ? void 0 : classes.control]),
+    ref: containerRef
+  }), isCompact && renderSubmitButton(), isTextarea ? renderTextarea : renderInput, showAdditionalElement && /*#__PURE__*/React.createElement("div", {
     className: cn('icons')
   }, showTextFieldSubmit && renderSubmitButton(), showLoader && /*#__PURE__*/React.createElement(Preloader, {
     delay: false,
@@ -462,9 +635,12 @@ Search.propTypes = {
     item: PropTypes.objectOf(PropTypes.string.isRequired),
     itemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
     notice: PropTypes.objectOf(PropTypes.string.isRequired),
-    popularItem: PropTypes.objectOf(PropTypes.string.isRequired)
+    popularItem: PropTypes.objectOf(PropTypes.string.isRequired),
+    resizer: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   value: PropTypes.string,
+  type: PropTypes.oneOf(['textfield', 'compact']),
+  textarea: PropTypes.bool,
   label: PropTypes.string,
   searchId: PropTypes.string,
   placeholder: PropTypes.string,
@@ -489,7 +665,8 @@ Search.propTypes = {
     icon: PropTypes.string,
     textNotFound: PropTypes.string,
     popularTitle: PropTypes.string,
-    popularItem: PropTypes.string
+    popularItem: PropTypes.string,
+    resizer: PropTypes.string
   }),
   showNotFound: PropTypes.bool,
   textNotFound: PropTypes.string,
@@ -502,6 +679,8 @@ Search.propTypes = {
   listRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
+  minTextareaHeight: PropTypes.oneOf([MinTextareaHeight.ONE_ROW, MinTextareaHeight.THREE_ROWS]),
+  showResizer: PropTypes.bool,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,
   onBlur: PropTypes.func,

package/dist/es/components/Search/i/textarea-resizer.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 11L11 1"  stroke-opacity="0.2" stroke-width="2" stroke-linecap="round"/>
+<path d="M7 11L11 7" stroke-opacity="0.2" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/dist/es/components/Tooltip/Tooltip.css

@@ -269,6 +269,20 @@
   -webkit-transform: rotate(-90deg);
           transform: rotate(-90deg);
 }
+.mfui-v6-tooltip_offset_small[data-popper-placement='right'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='right-start'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='right-end'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='right'] .mfui-v6-tooltip__content-shadow,
+.mfui-v6-tooltip_offset_small[data-popper-placement='right-start'] .mfui-v6-tooltip__content-shadow,
+.mfui-v6-tooltip_offset_small[data-popper-placement='right-end'] .mfui-v6-tooltip__content-shadow {
+  -webkit-transform: translateX(15px);
+          transform: translateX(15px);
+}
+.mfui-v6-tooltip_offset_small[data-popper-placement='right'] .mfui-v6-tooltip__arrow-wrap,
+.mfui-v6-tooltip_offset_small[data-popper-placement='right-start'] .mfui-v6-tooltip__arrow-wrap,
+.mfui-v6-tooltip_offset_small[data-popper-placement='right-end'] .mfui-v6-tooltip__arrow-wrap {
+  left: -6px;
+}
 .mfui-v6-tooltip[data-popper-placement='left'] .mfui-v6-tooltip__content,
 .mfui-v6-tooltip[data-popper-placement='left-start'] .mfui-v6-tooltip__content,
 .mfui-v6-tooltip[data-popper-placement='left-end'] .mfui-v6-tooltip__content,
@@ -292,6 +306,20 @@
   -webkit-transform: rotate(90deg);
           transform: rotate(90deg);
 }
+.mfui-v6-tooltip_offset_small[data-popper-placement='left'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='left-start'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='left-end'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='left'] .mfui-v6-tooltip__content-shadow,
+.mfui-v6-tooltip_offset_small[data-popper-placement='left-start'] .mfui-v6-tooltip__content-shadow,
+.mfui-v6-tooltip_offset_small[data-popper-placement='left-end'] .mfui-v6-tooltip__content-shadow {
+  -webkit-transform: translateX(-15px);
+          transform: translateX(-15px);
+}
+.mfui-v6-tooltip_offset_small[data-popper-placement='left'] .mfui-v6-tooltip__arrow-wrap,
+.mfui-v6-tooltip_offset_small[data-popper-placement='left-start'] .mfui-v6-tooltip__arrow-wrap,
+.mfui-v6-tooltip_offset_small[data-popper-placement='left-end'] .mfui-v6-tooltip__arrow-wrap {
+  right: -6px;
+}
 .mfui-v6-tooltip[data-popper-placement='top'] .mfui-v6-tooltip__content,
 .mfui-v6-tooltip[data-popper-placement='top-start'] .mfui-v6-tooltip__content,
 .mfui-v6-tooltip[data-popper-placement='top-end'] .mfui-v6-tooltip__content,
@@ -315,6 +343,20 @@
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
+.mfui-v6-tooltip_offset_small[data-popper-placement='top'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='top-start'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='top-end'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='top'] .mfui-v6-tooltip__content-shadow,
+.mfui-v6-tooltip_offset_small[data-popper-placement='top-start'] .mfui-v6-tooltip__content-shadow,
+.mfui-v6-tooltip_offset_small[data-popper-placement='top-end'] .mfui-v6-tooltip__content-shadow {
+  -webkit-transform: translateY(-15px);
+          transform: translateY(-15px);
+}
+.mfui-v6-tooltip_offset_small[data-popper-placement='top'] .mfui-v6-tooltip__arrow-wrap,
+.mfui-v6-tooltip_offset_small[data-popper-placement='top-start'] .mfui-v6-tooltip__arrow-wrap,
+.mfui-v6-tooltip_offset_small[data-popper-placement='top-end'] .mfui-v6-tooltip__arrow-wrap {
+  bottom: 4px;
+}
 .mfui-v6-tooltip[data-popper-placement='bottom'] .mfui-v6-tooltip__content,
 .mfui-v6-tooltip[data-popper-placement='bottom-start'] .mfui-v6-tooltip__content,
 .mfui-v6-tooltip[data-popper-placement='bottom-end'] .mfui-v6-tooltip__content,
@@ -329,6 +371,20 @@
 .mfui-v6-tooltip[data-popper-placement='bottom-end'] .mfui-v6-tooltip__arrow-wrap {
   top: 13px;
 }
+.mfui-v6-tooltip_offset_small[data-popper-placement='bottom'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='bottom-start'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='bottom-end'] .mfui-v6-tooltip__content,
+.mfui-v6-tooltip_offset_small[data-popper-placement='bottom'] .mfui-v6-tooltip__content-shadow,
+.mfui-v6-tooltip_offset_small[data-popper-placement='bottom-start'] .mfui-v6-tooltip__content-shadow,
+.mfui-v6-tooltip_offset_small[data-popper-placement='bottom-end'] .mfui-v6-tooltip__content-shadow {
+  -webkit-transform: translateY(15px);
+          transform: translateY(15px);
+}
+.mfui-v6-tooltip_offset_small[data-popper-placement='bottom'] .mfui-v6-tooltip__arrow-wrap,
+.mfui-v6-tooltip_offset_small[data-popper-placement='bottom-start'] .mfui-v6-tooltip__arrow-wrap,
+.mfui-v6-tooltip_offset_small[data-popper-placement='bottom-end'] .mfui-v6-tooltip__arrow-wrap {
+  top: 4px;
+}
 .mfui-v6-tooltip[data-popper-escaped='true'].mfui-v6-tooltip_has-escape {
   visibility: hidden;
   pointer-events: none;

package/dist/es/components/Tooltip/Tooltip.d.ts

@@ -23,6 +23,10 @@ export declare const Paddings: {
     readonly MEDIUM: "medium";
 };
 declare type PaddingsType = typeof Paddings[keyof typeof Paddings];
+export declare const Offset: {
+    readonly SMALL: "small";
+};
+declare type OffsetType = typeof Offset[keyof typeof Offset];
 export declare const TriggerEvent: {
     readonly HOVER: "hover";
     readonly CLICK: "click";
@@ -55,6 +59,8 @@ export interface ITooltipProps {
     hasCloseButton?: boolean;
     /** Позиционирование относительно триггер-элемента */
     placement?: PlacementType;
+    /** Смещение тултипа относительно триггер-элемента */
+    offset?: OffsetType;
     /** Направления перестроения тултипа при переполнении */
     fallbackPlacements?: PlacementType[];
     /** Размер отступов от контента */
@@ -69,6 +75,8 @@ export interface ITooltipProps {
     targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
+    /** Пересчет позиции тултипа в скрытом состоянии при изменении размера окна */
+    isHiddenResize?: boolean;
     /** Отрендерить компонент в корневой элементе страницы body */
     isPortal?: boolean;
     /** Рендеринг компонента в указанном селекторе */

package/dist/es/components/Tooltip/Tooltip.js

@@ -62,6 +62,9 @@ export var Paddings = {
   SMALL: 'small',
   MEDIUM: 'medium'
 };
+export var Offset = {
+  SMALL: 'small'
+};
 export var TriggerEvent = {
   HOVER: 'hover',
   CLICK: 'click',
@@ -95,6 +98,7 @@ var Tooltip = function Tooltip(_ref) {
       fallbackPlacements = _ref$fallbackPlacemen === void 0 ? ['left', 'right', 'top', 'bottom'] : _ref$fallbackPlacemen,
       _ref$paddings = _ref.paddings,
       paddings = _ref$paddings === void 0 ? 'small' : _ref$paddings,
+      offset = _ref.offset,
       _ref$triggerEvent = _ref.triggerEvent,
       triggerEvent = _ref$triggerEvent === void 0 ? 'hover' : _ref$triggerEvent,
       boundaryElement = _ref.boundaryElement,
@@ -104,6 +108,8 @@ var Tooltip = function Tooltip(_ref) {
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
       _ref$isPortal = _ref.isPortal,
       isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
+      _ref$isHiddenResize = _ref.isHiddenResize,
+      isHiddenResize = _ref$isHiddenResize === void 0 ? false : _ref$isHiddenResize,
       portalSelector = _ref.portalSelector,
       children = _ref.children,
       _ref$classes = _ref.classes;
@@ -180,7 +186,7 @@ var Tooltip = function Tooltip(_ref) {
         name: 'eventListeners',
         options: {
           scroll: isOpen,
-          resize: isOpen
+          resize: isHiddenResize || isOpen
         }
       }, {
         name: 'preventOverflow',
@@ -189,7 +195,7 @@ var Tooltip = function Tooltip(_ref) {
         }
       }]
     };
-  }, [placement, arrowElement, currentBoundary, isOpen, fallbackPlacements]);
+  }, [placement, arrowElement, fallbackPlacements, isOpen, isHiddenResize, currentBoundary]);
 
   var _usePopper = usePopper(currentTarget, popperElement, options),
       styles = _usePopper.styles,
@@ -335,6 +341,7 @@ var Tooltip = function Tooltip(_ref) {
     className: cn({
       theme: theme,
       paddings: paddings,
+      offset: offset,
       open: isOpen,
       small: !isBigSize,
       'has-escape': !targetElement
@@ -399,6 +406,7 @@ Tooltip.propTypes = {
   placement: PropTypes.oneOf(Object.values(Placement)),
   fallbackPlacements: PropTypes.arrayOf(PropTypes.oneOf(Object.values(Placement)).isRequired),
   paddings: PropTypes.oneOf(Object.values(Paddings)),
+  offset: PropTypes.oneOf(Object.values(Offset)),
   triggerEvent: PropTypes.oneOf(Object.values(TriggerEvent)),
   boundaryElement: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
@@ -424,6 +432,7 @@ Tooltip.propTypes = {
   }), PropTypes.any])]),
   isOpened: PropTypes.bool,
   isPortal: PropTypes.bool,
+  isHiddenResize: PropTypes.bool,
   portalSelector: PropTypes.string,
   className: PropTypes.string,
   classes: PropTypes.shape({

package/dist/lib/components/Banner/Banner.css

@@ -154,6 +154,9 @@
     bottom: 72px;
   }
 }
+.mfui-v6-banner_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-banner_radius_rounded .mfui-v6-banner__swiper {
   border-radius: 24px;
 }

package/dist/lib/components/Banner/Banner.d.ts

@@ -69,6 +69,8 @@ export interface IBannerProps {
     noIncreaseAutoplayDelay?: boolean;
     /** Показать часть следующего слайда */
     showNextSlide?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */

package/dist/lib/components/Banner/Banner.js

@@ -97,6 +97,8 @@ var Banner = function Banner(_ref) {
       autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
       noIncreaseAutoplayDelay = _ref.noIncreaseAutoplayDelay,
       showNextSlide = _ref.showNextSlide,
+      _ref$hasMarginTop = _ref.hasMarginTop,
+      hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop,
       _ref$children = _ref.children,
       children = _ref$children === void 0 ? [] : _ref$children,
       getSwiper = _ref.getSwiper,
@@ -299,7 +301,8 @@ var Banner = function Banner(_ref) {
       'background-color': backgroundColor,
       'no-touch': !isTouch,
       radius: radius,
-      'show-next-slide': showNextSlide
+      'show-next-slide': showNextSlide,
+      'margin-top': hasMarginTop
     }, className),
     ref: rootRef
   }), /*#__PURE__*/React.createElement("div", {
@@ -361,6 +364,7 @@ Banner.propTypes = {
   noIncreaseAutoplayDelay: PropTypes.bool,
   showNextSlide: PropTypes.bool,
   getSwiper: PropTypes.func,
+  hasMarginTop: PropTypes.bool,
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,
   onDotClick: PropTypes.func,

package/dist/lib/components/Calendar/Calendar.css

@@ -5,16 +5,15 @@
 }
 .mfui-v6-calendar_modern {
   display: block;
-  width: 364px;
+  width: 100%;
   height: 304px;
   overflow-x: hidden;
   overflow-y: scroll;
 }
 .mfui-v6-calendar_modern::-webkit-scrollbar {
-  width: 16px;
+  width: 4px;
 }
 .mfui-v6-calendar_modern::-webkit-scrollbar-thumb {
-  border: 6px solid transparent;
   border-radius: 16px;
   background-color: #D8D8D8;
   background-clip: padding-box;

package/dist/lib/components/Calendar/Calendar.js

@@ -406,14 +406,14 @@ var Calendar = function Calendar(_ref) {
       var isNextMonthDisabled = !!maxBookingDate && (0, _isSameMonth["default"])(new Date(year, month, 1), maxBookingDate);
       var isCurrentMonth = new Date().getFullYear() === year && new Date().getMonth() === month;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        ref: isCurrentMonth ? currentMonthRef : null
+        ref: isCurrentMonth ? currentMonthRef : null,
+        key: "".concat(year, "-").concat(month)
       }, /*#__PURE__*/_react["default"].createElement(_Month["default"], {
         dataAttrs: {
           root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.month,
           arrowLeft: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft,
           arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
         },
-        key: "".concat(year, "-").concat(month),
         year: year,
         weekdayLabels: weekdayLabels,
         monthLabel: monthLabel,