@megafon/ui-core 6.4.4 → 6.6.0

package/dist/lib/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/lib/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/lib/components/Tooltip/Tooltip.js

@@ -5,7 +5,7 @@ function _typeof3(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "funct
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.testIdPrefix = exports.Size = exports.ColorTheme = exports.TriggerEvent = exports.Paddings = exports.Placement = void 0;
+exports["default"] = exports.testIdPrefix = exports.Size = exports.ColorTheme = exports.TriggerEvent = exports.Offset = exports.Paddings = exports.Placement = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -89,6 +89,10 @@ var Paddings = {
   MEDIUM: 'medium'
 };
 exports.Paddings = Paddings;
+var Offset = {
+  SMALL: 'small'
+};
+exports.Offset = Offset;
 var TriggerEvent = {
   HOVER: 'hover',
   CLICK: 'click',
@@ -126,6 +130,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,
@@ -135,6 +140,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;
@@ -213,7 +220,7 @@ var Tooltip = function Tooltip(_ref) {
         name: 'eventListeners',
         options: {
           scroll: isOpen,
-          resize: isOpen
+          resize: isHiddenResize || isOpen
         }
       }, {
         name: 'preventOverflow',
@@ -222,7 +229,7 @@ var Tooltip = function Tooltip(_ref) {
         }
       }]
     };
-  }, [placement, arrowElement, currentBoundary, isOpen, fallbackPlacements]);
+  }, [placement, arrowElement, fallbackPlacements, isOpen, isHiddenResize, currentBoundary]);
 
   var _usePopper = (0, _reactPopper.usePopper)(currentTarget, popperElement, options),
       styles = _usePopper.styles,
@@ -369,6 +376,7 @@ var Tooltip = function Tooltip(_ref) {
     className: cn({
       theme: theme,
       paddings: paddings,
+      offset: offset,
       open: isOpen,
       small: !isBigSize,
       'has-escape': !targetElement
@@ -434,6 +442,7 @@ Tooltip.propTypes = {
   placement: _propTypes["default"].oneOf(Object.values(Placement)),
   fallbackPlacements: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(Object.values(Placement)).isRequired),
   paddings: _propTypes["default"].oneOf(Object.values(Paddings)),
+  offset: _propTypes["default"].oneOf(Object.values(Offset)),
   triggerEvent: _propTypes["default"].oneOf(Object.values(TriggerEvent)),
   boundaryElement: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
     current: _propTypes["default"].elementType
@@ -459,6 +468,7 @@ Tooltip.propTypes = {
   }), _propTypes["default"].any])]),
   isOpened: _propTypes["default"].bool,
   isPortal: _propTypes["default"].bool,
+  isHiddenResize: _propTypes["default"].bool,
   portalSelector: _propTypes["default"].string,
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "6.4.4",
+    "version": "6.6.0",
     "files": [
         "dist",
         "styles"
@@ -99,5 +99,5 @@
         "react-popper": "^2.2.3",
         "swiper": "^6.5.6"
     },
-    "gitHead": "cb2d3e9827cb0754536a50f64c09a3b4a37af255"
+    "gitHead": "4210e85614d7e10a1d7c6b9af974dc82c4beadb7"
 }