@megafon/ui-core 2.0.0-beta.97 → 2.1.0

package/dist/lib/components/TextLink/TextLink.js

@@ -2,121 +2,51 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.date.to-string");
-
-require("core-js/modules/es.object.to-string");
-
-require("core-js/modules/es.reflect.construct");
-
-require("core-js/modules/es.regexp.to-string");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-require("core-js/modules/es.date.to-string");
-
-require("core-js/modules/es.object.to-string");
-
-require("core-js/modules/es.reflect.construct");
-
-require("core-js/modules/es.regexp.to-string");
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var React = _interopRequireWildcard(require("react"));
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 var _Link = _interopRequireDefault(require("../Link/Link"));
 
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _createSuper(Derived) {
-  return function () {
-    var Super = (0, _getPrototypeOf2["default"])(Derived),
-        result;
-
-    if (_isNativeReflectConstruct()) {
-      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return (0, _possibleConstructorReturn2["default"])(this, result);
-  };
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-var cn = (0, _cnCreate["default"])('mfui-beta-text-link');
-
-var TextLink = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(TextLink, _React$Component);
-
-  var _super = _createSuper(TextLink);
-
-  function TextLink() {
-    (0, _classCallCheck2["default"])(this, TextLink);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(TextLink, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          underlineVisibility = _this$props.underlineVisibility,
-          underlineStyle = _this$props.underlineStyle,
-          color = _this$props.color,
-          className = _this$props.className,
-          target = _this$props.target,
-          href = _this$props.href,
-          onClick = _this$props.onClick,
-          children = _this$props.children,
-          download = _this$props.download;
-      return /*#__PURE__*/React.createElement(_Link["default"], {
-        target: target,
-        href: href,
-        onClick: onClick,
-        children: children,
-        className: cn('', {
-          'underline-visibility': underlineVisibility,
-          'underline-style': underlineStyle,
-          color: color
-        }, className),
-        download: download
-      });
-    }
-  }]);
-  return TextLink;
-}(React.Component);
+var cn = (0, _uiHelpers.cnCreate)('mfui-text-link');
+
+var TextLink = function TextLink(_ref) {
+  var underlineVisibility = _ref.underlineVisibility,
+      underlineStyle = _ref.underlineStyle,
+      color = _ref.color,
+      className = _ref.className,
+      target = _ref.target,
+      href = _ref.href,
+      rel = _ref.rel,
+      onClick = _ref.onClick,
+      children = _ref.children,
+      download = _ref.download;
+  return /*#__PURE__*/React.createElement(_Link["default"], {
+    target: target,
+    href: href,
+    rel: rel,
+    onClick: onClick,
+    className: cn('', {
+      'underline-visibility': underlineVisibility,
+      'underline-style': underlineStyle,
+      color: color
+    }, className),
+    download: download
+  }, children);
+};
 
 TextLink.propTypes = {
   color: PropTypes.oneOf(['white', 'black', 'gray', 'blue', 'green', 'inherit']),

package/dist/lib/components/Tile/Tile.css

@@ -5,44 +5,45 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-tile {
+.mfui-tile {
   background-color: #FFFFFF;
 }
-.mfui-beta-tile_radius_rounded {
+.mfui-tile_radius_rounded {
   border-radius: 8px;
 }
-.mfui-beta-tile_pointer {
+.mfui-tile_pointer {
   cursor: pointer;
 }
-.mfui-beta-tile_theme_light.mfui-beta-tile_shadow_low {
+.mfui-tile_theme_light.mfui-tile_shadow_low {
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
 }
-.mfui-beta-tile_theme_light.mfui-beta-tile_shadow_high {
+.mfui-tile_theme_light.mfui-tile_shadow_high {
   -webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
           box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
 }
-.mfui-beta-tile_theme_light.mfui-beta-tile_shadow_hover {
+.mfui-tile_theme_light.mfui-tile_shadow_hover,
+.mfui-tile_theme_light.mfui-tile_interactive:hover {
   -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
           box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
 }
-.mfui-beta-tile_theme_dark.mfui-beta-tile_shadow_low {
+.mfui-tile_theme_dark.mfui-tile_shadow_low {
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.45);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.45);
 }
-.mfui-beta-tile_theme_dark.mfui-beta-tile_shadow_high {
+.mfui-tile_theme_dark.mfui-tile_shadow_high {
   -webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25);
           box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25);
 }
-.mfui-beta-tile_theme_dark.mfui-beta-tile_shadow_hover {
+.mfui-tile_theme_dark.mfui-tile_shadow_hover,
+.mfui-tile_theme_dark.mfui-tile_interactive:hover {
   -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
           box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
 }
-.mfui-beta-tile__link {
+.mfui-tile__link {
   color: inherit;
 }
-.mfui-beta-tile__link,
-.mfui-beta-tile__link:hover {
+.mfui-tile__link,
+.mfui-tile__link:hover {
   text-decoration: none;
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Tile.less';
-import { IDataAttributes } from './../../utils/dataAttrs';
 export declare const Theme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
@@ -18,7 +18,7 @@ export declare const Shadow: {
     readonly HOVER: "hover";
 };
 declare type ShadowType = typeof Shadow[keyof typeof Shadow];
-export interface ITileProps extends IDataAttributes {
+export interface ITileProps extends IFilterDataAttrs {
     /** Ссылка */
     href?: string;
     /** Тема */

package/dist/lib/components/Tile/Tile.js

@@ -1,7 +1,5 @@
 "use strict";
 
-require("core-js/modules/es.object.values");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,15 +9,11 @@ require("core-js/modules/es.object.values");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
+var _uiHelpers = require("@megafon/ui-helpers");
 
-var _dataAttrs = _interopRequireDefault(require("./../../utils/dataAttrs"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -40,7 +34,7 @@ var Shadow = {
   HOVER: 'hover'
 };
 exports.Shadow = Shadow;
-var cn = (0, _cnCreate["default"])('mfui-beta-tile');
+var cn = (0, _uiHelpers.cnCreate)('mfui-tile');
 
 var Tile = function Tile(_ref) {
   var href = _ref.href,
@@ -57,34 +51,21 @@ var Tile = function Tile(_ref) {
       onClick = _ref.onClick,
       dataAttrs = _ref.dataAttrs;
 
-  var _React$useState = _react["default"].useState(shadowLevel),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      currentShadow = _React$useState2[0],
-      setCurrentShadow = _React$useState2[1];
-
   var handleClick = function handleClick(e) {
     onClick && onClick(e);
   };
 
-  var handleHoverTile = function handleHoverTile() {
-    isInteractive && setCurrentShadow(Shadow.HOVER);
-  };
-
-  var handleMouseLeave = function handleMouseLeave() {
-    setCurrentShadow(shadowLevel);
-  };
-
+  var isPointer = !!href || isInteractive;
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: cn({
       theme: theme,
       radius: radius,
-      shadow: currentShadow,
-      pointer: !!href
+      shadow: shadowLevel,
+      pointer: isPointer,
+      interactive: isInteractive
     }, className),
-    onClick: handleClick,
-    onMouseEnter: handleHoverTile,
-    onMouseLeave: handleMouseLeave
-  }, (0, _dataAttrs["default"])(dataAttrs)), href && /*#__PURE__*/_react["default"].createElement("a", {
+    onClick: handleClick
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), href && /*#__PURE__*/_react["default"].createElement("a", {
     href: href,
     className: cn('link')
   }, children), !href && children);

package/dist/lib/components/Tooltip/Tooltip.css

@@ -5,30 +5,43 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-tooltip {
-  padding: 14px;
-  pointer-events: none;
-  visibility: hidden;
+.mfui-tooltip {
   z-index: 100;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+  -webkit-transition-property: opacity, visibility;
+  transition-property: opacity, visibility;
+  pointer-events: none;
 }
-.mfui-beta-tooltip_open {
+.mfui-tooltip_open {
   visibility: visible;
+  opacity: 1;
   pointer-events: all;
 }
-.mfui-beta-tooltip_size_small .mfui-beta-tooltip__content {
+.mfui-tooltip_paddings_small .mfui-tooltip__content {
   padding: 8px 16px;
 }
-.mfui-beta-tooltip_size_medium .mfui-beta-tooltip__content {
+.mfui-tooltip_paddings_medium .mfui-tooltip__content {
   padding: 24px;
 }
-.mfui-beta-tooltip__arrow {
-  height: 12px;
-  width: 12px;
+.mfui-tooltip__content {
+  position: relative;
+  z-index: 1;
+}
+.mfui-tooltip__content-shadow {
   position: absolute;
+  z-index: -1;
 }
-.mfui-beta-tooltip__arrow:before {
+.mfui-tooltip__arrow {
+  width: 12px;
   height: 12px;
+  position: absolute;
+}
+.mfui-tooltip__arrow:before {
   width: 12px;
+  height: 12px;
   content: '';
   position: absolute;
   top: 0;
@@ -37,15 +50,15 @@ h5 {
           transform: rotate(45deg);
   background-color: #FFFFFF;
 }
-.mfui-beta-tooltip__arrow-shadow {
-  height: 12px;
+.mfui-tooltip__arrow-shadow {
   width: 12px;
+  height: 12px;
   position: absolute;
   z-index: -1;
 }
-.mfui-beta-tooltip__arrow-shadow:before {
-  height: 12px;
+.mfui-tooltip__arrow-shadow:before {
   width: 12px;
+  height: 12px;
   content: '';
   position: absolute;
   top: 0;
@@ -55,23 +68,63 @@ h5 {
   -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);
 }
-.mfui-beta-tooltip[data-popper-placement='right'] > .mfui-beta-tooltip__arrow,
-.mfui-beta-tooltip[data-popper-placement='right'] > .mfui-beta-tooltip__arrow-shadow {
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-shadow {
   right: calc(100% - 20px);
 }
-.mfui-beta-tooltip[data-popper-placement='left'] > .mfui-beta-tooltip__arrow,
-.mfui-beta-tooltip[data-popper-placement='left'] > .mfui-beta-tooltip__arrow-shadow {
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content {
+  -webkit-transform: translateX(14px);
+          transform: translateX(14px);
+}
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content-shadow {
+  top: 0;
+  right: -14px;
+  bottom: 0;
+  left: 14px;
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-shadow {
   left: calc(100% - 20px);
 }
-.mfui-beta-tooltip[data-popper-placement='top'] > .mfui-beta-tooltip__arrow,
-.mfui-beta-tooltip[data-popper-placement='top'] > .mfui-beta-tooltip__arrow-shadow {
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content {
+  -webkit-transform: translateX(-14px);
+          transform: translateX(-14px);
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content-shadow {
+  top: 0;
+  right: 14px;
+  bottom: 0;
+  left: -14px;
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-shadow {
   top: calc(100% - 20px);
 }
-.mfui-beta-tooltip[data-popper-placement='bottom'] > .mfui-beta-tooltip__arrow,
-.mfui-beta-tooltip[data-popper-placement='bottom'] > .mfui-beta-tooltip__arrow-shadow {
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content {
+  -webkit-transform: translateY(-14px);
+          transform: translateY(-14px);
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content-shadow {
+  top: -14px;
+  right: 0;
+  bottom: 14px;
+  left: 0;
+}
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow-shadow {
   bottom: calc(100% - 20px);
 }
-.mfui-beta-tooltip[data-popper-escaped='true'] {
-  pointer-events: none;
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content {
+  -webkit-transform: translateY(14px);
+          transform: translateY(14px);
+}
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content-shadow {
+  top: 14px;
+  right: 0;
+  bottom: -14px;
+  left: 0;
+}
+.mfui-tooltip[data-popper-escaped='true'] {
   visibility: hidden;
+  pointer-events: none;
 }

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

@@ -7,11 +7,12 @@ export declare const Placement: {
     readonly BOTTOM: "bottom";
 };
 declare type PlacementType = typeof Placement[keyof typeof Placement];
-export declare const Size: {
+export declare const Paddings: {
+    readonly NONE: "none";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
 };
-declare type SizeType = typeof Size[keyof typeof Size];
+declare type PaddingsType = typeof Paddings[keyof typeof Paddings];
 export declare const TriggerEvent: {
     readonly HOVER: "hover";
     readonly CLICK: "click";
@@ -21,20 +22,33 @@ declare type TriggerEventType = typeof TriggerEvent[keyof typeof TriggerEvent];
 export interface ITooltipProps {
     /** Позиционирование относительно триггер-элемента */
     placement?: PlacementType;
+    /** Направления перестроения тултипа при переполнении */
+    fallbackPlacements?: PlacementType[];
     /** Размер отступов от контента */
-    size?: SizeType;
+    paddings?: PaddingsType;
     /** Тип взаимодействия с триггер-элементом для показа тултипа */
     triggerEvent?: TriggerEventType;
-    /** Триггер-элемент */
+    /** Реф на элемент, за границы которого тултип не сможет выйти. По умолчанию viewport  */
+    boundaryElement?: React.RefObject<HTMLElement>;
+    /** Реф на триггер-элемент */
     triggerElement: React.RefObject<HTMLElement>;
+    /** Реф элемента, на который указывает стрелка тултипа. По умолчанию стрелка указывает на triggerElement. */
+    targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        arrow?: string;
+        content?: string;
+        contentShadow?: string;
+    };
     /** Обработчик на открытие */
     onOpen?: (e: MouseEvent) => void;
     /** Обработчик на закрытие */
-    onClose?: (e: MouseEvent) => void;
+    onClose?: (e: MouseEvent | FocusEvent) => void;
 }
 declare const Tooltip: React.FC<ITooltipProps>;
 export default Tooltip;