@megafon/ui-core 4.7.0 → 4.8.1

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

@@ -6,6 +6,8 @@
           transition-duration: 0.3s;
   -webkit-transition-property: opacity, visibility;
   transition-property: opacity, visibility;
+  font-size: 12px;
+  line-height: 18px;
   pointer-events: none;
 }
 .mfui-tooltip_open {
@@ -14,7 +16,7 @@
   pointer-events: all;
 }
 .mfui-tooltip_paddings_small .mfui-tooltip__content {
-  padding: 8px 16px;
+  padding: 16px;
 }
 .mfui-tooltip_paddings_medium .mfui-tooltip__content {
   padding: 24px;
@@ -22,102 +24,271 @@
 .mfui-tooltip__content {
   position: relative;
   z-index: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 8px;
 }
 .mfui-tooltip__content-shadow {
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: -1;
 }
-.mfui-tooltip__arrow {
-  width: 12px;
-  height: 12px;
+.mfui-tooltip__arrow-container {
   position: absolute;
 }
-.mfui-tooltip__arrow:before {
-  width: 12px;
+.mfui-tooltip__arrow-wrap {
+  width: 42px;
   height: 12px;
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  background-color: var(--base);
 }
-.mfui-tooltip__arrow-shadow {
-  width: 12px;
+.mfui-tooltip__arrow {
+  width: 42px;
   height: 12px;
   position: absolute;
-  z-index: -1;
 }
-.mfui-tooltip__arrow-shadow:before {
-  width: 12px;
-  height: 12px;
-  content: '';
+.mfui-tooltip__arrow-inner {
+  -webkit-filter: drop-shadow(0 2px 9px rgba(0, 0, 0, 0.15));
+          filter: drop-shadow(0 2px 9px rgba(0, 0, 0, 0.15));
+  fill: var(--base);
+}
+.mfui-tooltip__text {
+  font-size: 12px;
+  line-height: 18px;
+}
+.mfui-tooltip__button,
+.mfui-tooltip__close-button {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+.mfui-tooltip__button {
+  font-family: inherit;
+  color: var(--brandGreen);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+  background-color: transparent;
+  -webkit-transition: 300ms;
+  transition: 300ms;
+}
+.mfui-tooltip__button:hover {
+  color: var(--buttonHoverGreen);
+}
+.mfui-tooltip__button:hover .mfui-tooltip__button-arrow {
+  fill: var(--buttonHoverGreen);
+}
+.mfui-tooltip__button:active {
+  color: var(--buttonDown);
+}
+.mfui-tooltip__button:active .mfui-tooltip__button-arrow {
+  fill: var(--buttonDown);
+}
+.mfui-tooltip__close-button {
   position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  -webkit-box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.15);
-          box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.15);
+  top: 10px;
+  right: 10px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: 24px;
+  border-radius: 12px;
+  background-color: var(--spbSky0);
+  -webkit-transition: 300ms;
+  transition: 300ms;
 }
-.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow,
-.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-shadow {
-  right: calc(100% - 20px);
+.mfui-tooltip__close-button:hover {
+  background-color: var(--spbSky1);
 }
-.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content {
-  -webkit-transform: translateX(14px);
-          transform: translateX(14px);
+.mfui-tooltip__close-button:active {
+  background-color: var(--spbSky2);
 }
-.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content-shadow {
-  top: 0;
-  right: -14px;
-  bottom: 0;
-  left: 14px;
+.mfui-tooltip__close-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
+  fill: var(--content);
 }
-.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow,
-.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-shadow {
-  left: calc(100% - 20px);
+.mfui-tooltip__button-arrow {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  margin-bottom: -2px;
+  -webkit-transition: 300ms;
+  transition: 300ms;
+  fill: var(--brandGreen);
 }
-.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content {
-  -webkit-transform: translateX(-14px);
-          transform: translateX(-14px);
+.mfui-tooltip_small .mfui-tooltip__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  gap: 18px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
-.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content-shadow {
-  top: 0;
-  right: 14px;
-  bottom: 0;
-  left: -14px;
+.mfui-tooltip_small .mfui-tooltip__text {
+  font-weight: 500;
 }
-.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow,
-.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-shadow {
-  top: calc(100% - 20px);
+.mfui-tooltip_small .mfui-tooltip__close-button {
+  position: static;
+  margin-left: 0;
 }
-.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content {
-  -webkit-transform: translateY(-14px);
-          transform: translateY(-14px);
+.mfui-tooltip_theme_red .mfui-tooltip__content,
+.mfui-tooltip_theme_blue .mfui-tooltip__content,
+.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,
+.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,
+.mfui-tooltip_theme_red .mfui-tooltip__title,
+.mfui-tooltip_theme_blue .mfui-tooltip__title,
+.mfui-tooltip_theme_red .mfui-tooltip__button,
+.mfui-tooltip_theme_blue .mfui-tooltip__button {
+  color: var(--stcWhite);
 }
-.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content-shadow {
-  top: -14px;
-  right: 0;
-  bottom: 14px;
-  left: 0;
+.mfui-tooltip_theme_red .mfui-tooltip__button-arrow,
+.mfui-tooltip_theme_blue .mfui-tooltip__button-arrow {
+  fill: var(--stcWhite);
 }
-.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow,
-.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow-shadow {
-  bottom: calc(100% - 20px);
+.mfui-tooltip_theme_red .mfui-tooltip__button:hover,
+.mfui-tooltip_theme_blue .mfui-tooltip__button:hover {
+  color: var(--buttonHoverGrey);
 }
-.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content {
-  -webkit-transform: translateY(14px);
-          transform: translateY(14px);
+.mfui-tooltip_theme_red .mfui-tooltip__button:hover .mfui-tooltip__button-arrow,
+.mfui-tooltip_theme_blue .mfui-tooltip__button:hover .mfui-tooltip__button-arrow {
+  fill: var(--buttonHoverGrey);
 }
-.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content-shadow {
-  top: 14px;
-  right: 0;
-  bottom: -14px;
-  left: 0;
+.mfui-tooltip_theme_red .mfui-tooltip__button:active,
+.mfui-tooltip_theme_blue .mfui-tooltip__button:active {
+  color: var(--buttonDown);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__button:active .mfui-tooltip__button-arrow,
+.mfui-tooltip_theme_blue .mfui-tooltip__button:active .mfui-tooltip__button-arrow {
+  fill: var(--buttonDown);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__close-button,
+.mfui-tooltip_theme_blue .mfui-tooltip__close-button {
+  background-color: var(--stcWhite10);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__close-button:hover,
+.mfui-tooltip_theme_blue .mfui-tooltip__close-button:hover {
+  background-color: var(--stcWhite20);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__close-button:active,
+.mfui-tooltip_theme_blue .mfui-tooltip__close-button:active {
+  background-color: var(--stcWhite50);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__close-icon,
+.mfui-tooltip_theme_blue .mfui-tooltip__close-icon {
+  opacity: 1;
+  fill: var(--stcWhite);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__content,
+.mfui-tooltip_theme_red .mfui-tooltip__content-shadow,
+.mfui-tooltip_theme_red .mfui-tooltip__arrow:before {
+  background-color: var(--fury80);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__arrow-inner {
+  fill: var(--fury80);
+}
+.mfui-tooltip_theme_blue .mfui-tooltip__content,
+.mfui-tooltip_theme_blue .mfui-tooltip__content-shadow,
+.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before {
+  background-color: var(--reflexBlue80);
+}
+.mfui-tooltip_theme_blue .mfui-tooltip__arrow-inner {
+  fill: var(--reflexBlue80);
+}
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow-container {
+  left: -12px;
+  width: 12px;
+  height: 100%;
+}
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow-wrap {
+  left: -15px;
+}
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow-shadow {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow-container {
+  right: -12px;
+  width: 12px;
+  height: 100%;
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow-wrap {
+  right: -15px;
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow-shadow {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow-container {
+  bottom: -12px;
+  width: 100%;
+  height: 12px;
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow-wrap {
+  top: 0;
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow-shadow {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='bottom-start'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='bottom-end'] .mfui-tooltip__arrow-container {
+  top: -12px;
+  width: 100%;
+  height: 12px;
 }
-.mfui-tooltip[data-popper-escaped='true'] {
+.mfui-tooltip[data-popper-escaped='true'].mfui-tooltip_has-escape {
   visibility: hidden;
   pointer-events: none;
 }

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

@@ -1,11 +1,20 @@
 import React from 'react';
+import { AccessibilityEventType } from '@megafon/ui-helpers';
 import type { AccessibilityEventTypeNative } from '@megafon/ui-helpers';
 import './Tooltip.less';
 export declare const Placement: {
     readonly LEFT: "left";
+    readonly LEFT_START: "left-start";
+    readonly LEFT_END: "left-end";
     readonly TOP: "top";
+    readonly TOP_START: "top-start";
+    readonly TOP_END: "top-end";
     readonly RIGHT: "right";
+    readonly RIGHT_START: "right-start";
+    readonly RIGHT_END: "right-end";
     readonly BOTTOM: "bottom";
+    readonly BOTTOM_START: "bottom-start";
+    readonly BOTTOM_END: "bottom-end";
 };
 declare type PlacementType = typeof Placement[keyof typeof Placement];
 export declare const Paddings: {
@@ -20,7 +29,30 @@ export declare const TriggerEvent: {
     readonly CONTROLLED: "controlled";
 };
 declare type TriggerEventType = typeof TriggerEvent[keyof typeof TriggerEvent];
+export declare const ColorTheme: {
+    readonly WHITE: "white";
+    readonly BLUE: "blue";
+    readonly RED: "red";
+};
+declare type ColorThemeType = typeof ColorTheme[keyof typeof ColorTheme];
+export declare const Size: {
+    readonly SMALL: "small";
+    readonly BIG: "big";
+};
+declare type SizeType = typeof Size[keyof typeof Size];
 export interface ITooltipProps {
+    /** Цветовая тема */
+    colorTheme?: ColorThemeType;
+    /** Размер тултипа */
+    size?: SizeType;
+    /** Заголовок */
+    title?: string;
+    /** Текст кнопки */
+    buttonText?: string;
+    /** Текст */
+    text?: string;
+    /** Наличие кнопки-крестика "Закрыть" */
+    hasCloseButton?: boolean;
     /** Позиционирование относительно триггер-элемента */
     placement?: PlacementType;
     /** Направления перестроения тултипа при переполнении */
@@ -53,12 +85,18 @@ export interface ITooltipProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        close?: Record<string, string>;
+        button?: Record<string, string>;
         content?: Record<string, string>;
     };
     /** Обработчик на открытие */
     onOpen?: (e: AccessibilityEventTypeNative) => void;
     /** Обработчик на закрытие */
     onClose?: (e: AccessibilityEventTypeNative | FocusEvent) => void;
+    /** Обработчик на клик по кнопке закрытия */
+    onCloseButtonClick?: (e: AccessibilityEventType) => void;
+    /** Обработчик клика по кнопке */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }
 declare const Tooltip: React.FC<ITooltipProps>;
 export default Tooltip;