@skbkontur/react-ui 5.6.9-5e213.0 → 5.6.9

package/components/Tooltip/Tooltip/Tooltip.js

@@ -1,14 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _Tooltip;
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 import React from 'react';
 import warning from 'warning';
 import { globalObject } from '@skbkontur/global-object';
@@ -47,11 +39,10 @@ var DefaultPositions = ['right bottom', 'right middle', 'right top', 'top right'
 export var Tooltip = rootNode(_class = withSize(_class = (_Tooltip = /*#__PURE__*/function (_React$PureComponent) {
   function Tooltip() {
     var _this;
-    _classCallCheck(this, Tooltip);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, Tooltip, [].concat(args));
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
     _this.getProps = createPropsGetter(Tooltip.defaultProps);
     _this.state = {
       opened: false,
@@ -75,7 +66,7 @@ export var Tooltip = rootNode(_class = withSize(_class = (_Tooltip = /*#__PURE__
     };
     _this.getAnchorElement = function () {
       var _this$popupRef$curren;
-      return (_this$popupRef$curren = _this.popupRef.current) === null || _this$popupRef$curren === void 0 ? void 0 : _this$popupRef$curren.anchorElement;
+      return (_this$popupRef$curren = _this.popupRef.current) == null ? void 0 : _this$popupRef$curren.anchorElement;
     };
     _this.getPositions = function () {
       return _this.props.allowedPositions ? _this.props.allowedPositions.filter(function (item) {
@@ -192,7 +183,7 @@ export var Tooltip = rootNode(_class = withSize(_class = (_Tooltip = /*#__PURE__
             margin: _this.theme.tooltipMarginLarge
           };
         default:
-          console.error("Can't get size variables: invalid value in size prop '".concat(_this.size, "'. Returning default"));
+          console.error("Can't get size variables: invalid value in size prop '" + _this.size + "'. Returning default");
           return {
             closeButtonStyle: styles.closeButtonSmall(_this.theme),
             contentStyle: styles.tooltipContentSmall(_this.theme),
@@ -206,249 +197,220 @@ export var Tooltip = rootNode(_class = withSize(_class = (_Tooltip = /*#__PURE__
     };
     return _this;
   }
-  _inherits(Tooltip, _React$PureComponent);
-  return _createClass(Tooltip, [{
-    key: "validateProps",
-    value: function validateProps(props) {
-      warning(props.children || props.anchorElement, "[Tooltip]: you must provide either 'children' or 'anchorElement' prop for Tooltip to work properly");
-    }
-  }, {
-    key: "getAllowedPositions",
-    value: function getAllowedPositions() {
-      return this.props.allowedPositions ? this.props.allowedPositions : DefaultPositions;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.validateProps(this.getProps());
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$getProps = this.getProps(),
-        trigger = _this$getProps.trigger;
-      this.validateProps(this.getProps());
-      if (trigger === 'closed' && this.state.opened) {
-        this.close();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.clearHoverTimeout();
+  _inheritsLoose(Tooltip, _React$PureComponent);
+  var _proto = Tooltip.prototype;
+  _proto.validateProps = function validateProps(props) {
+    warning(props.children || props.anchorElement, "[Tooltip]: you must provide either 'children' or 'anchorElement' prop for Tooltip to work properly");
+  };
+  _proto.getAllowedPositions = function getAllowedPositions() {
+    return this.props.allowedPositions ? this.props.allowedPositions : DefaultPositions;
+  };
+  _proto.componentDidMount = function componentDidMount() {
+    this.validateProps(this.getProps());
+  };
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    var _this$getProps = this.getProps(),
+      trigger = _this$getProps.trigger;
+    this.validateProps(this.getProps());
+    if (trigger === 'closed' && this.state.opened) {
+      this.close();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
-        _this2.featureFlags = getFullReactUIFlagsContext(flags);
-        return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-          _this2.theme = theme;
-          _this2.sizeVariables = _this2.getSizeVariables();
-          return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-            value: ThemeFactory.create({
-              popupBackground: theme.tooltipBg,
-              popupBorder: theme.tooltipBorder,
-              popupBorderRadius: _this2.sizeVariables.borderRadius,
-              popupPinSize: _this2.sizeVariables.pinSize,
-              popupPinOffsetX: _this2.sizeVariables.pinOffsetX,
-              popupPinOffsetY: _this2.sizeVariables.pinOffsetY,
-              popupMargin: _this2.sizeVariables.margin
-            }, theme)
-          }, _this2.renderMain());
-        });
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.clearHoverTimeout();
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.featureFlags = getFullReactUIFlagsContext(flags);
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        _this2.sizeVariables = _this2.getSizeVariables();
+        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+          value: ThemeFactory.create({
+            popupBackground: theme.tooltipBg,
+            popupBorder: theme.tooltipBorder,
+            popupBorderRadius: _this2.sizeVariables.borderRadius,
+            popupPinSize: _this2.sizeVariables.pinSize,
+            popupPinOffsetX: _this2.sizeVariables.pinOffsetX,
+            popupPinOffsetY: _this2.sizeVariables.pinOffsetY,
+            popupMargin: _this2.sizeVariables.margin
+          }, theme)
+        }, _this2.renderMain());
       });
+    });
+  };
+  _proto.renderCloseButton = function renderCloseButton() {
+    var hasCross = this.props.closeButton === undefined ? !Tooltip.triggersWithoutCloseButton.includes(this.getProps().trigger) : this.props.closeButton;
+    if (!hasCross) {
+      return null;
     }
-  }, {
-    key: "renderCloseButton",
-    value: function renderCloseButton() {
-      var hasCross = this.props.closeButton === undefined ? !Tooltip.triggersWithoutCloseButton.includes(this.getProps().trigger) : this.props.closeButton;
-      if (!hasCross) {
-        return null;
-      }
-      var icon = /*#__PURE__*/React.createElement(CloseButtonIcon, {
-        tabbable: false,
-        side: parseInt(this.theme.tooltipCloseBtnSide),
-        color: this.theme.tooltipCloseBtnColor,
-        colorHover: this.theme.tooltipCloseBtnHoverColor
-      });
-      return /*#__PURE__*/React.createElement("div", {
-        className: cx(styles.closeButton(this.theme), this.sizeVariables.closeButtonStyle),
-        onClick: this.handleCloseButtonClick,
-        "data-tid": TooltipDataTids.crossIcon
-      }, icon);
+    var icon = /*#__PURE__*/React.createElement(CloseButtonIcon, {
+      tabbable: false,
+      side: parseInt(this.theme.tooltipCloseBtnSide),
+      color: this.theme.tooltipCloseBtnColor,
+      colorHover: this.theme.tooltipCloseBtnHoverColor
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.closeButton(this.theme), this.sizeVariables.closeButtonStyle),
+      onClick: this.handleCloseButtonClick,
+      "data-tid": TooltipDataTids.crossIcon
+    }, icon);
+  }; /**
+     * Программно открывает тултип.
+     * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
+     * @public
+     */
+  _proto.show = function show() {
+    if (this.state.opened) {
+      return;
+    }
+    var trigger = this.getProps().trigger;
+    if (trigger === 'opened' || trigger === 'closed') {
+      warning(true, "Function 'show' is not supported with trigger specified '" + trigger + "'");
+      return;
     }
-  }, {
-    key: "show",
-    value:
-    /**
-    * Программно открывает тултип.
+    this.open();
+  } /**
+    * Программно закрывает тултип.
     * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
     * @public
-    */
-    function show() {
-      if (this.state.opened) {
-        return;
-      }
-      var trigger = this.getProps().trigger;
-      if (trigger === 'opened' || trigger === 'closed') {
-        warning(true, "Function 'show' is not supported with trigger specified '".concat(trigger, "'"));
-        return;
-      }
-      this.open();
-    } /**
-      * Программно закрывает тултип.
-      * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
-      * @public
-      */
-  }, {
-    key: "hide",
-    value: function hide() {
-      var trigger = this.getProps().trigger;
-      if (trigger === 'opened' || trigger === 'closed') {
-        warning(true, "Function 'hide' is not supported with trigger specified '".concat(trigger, "'"));
-        return;
-      }
-      this.close();
+    */;
+  _proto.hide = function hide() {
+    var trigger = this.getProps().trigger;
+    if (trigger === 'opened' || trigger === 'closed') {
+      warning(true, "Function 'hide' is not supported with trigger specified '" + trigger + "'");
+      return;
     }
-  }, {
-    key: "renderMain",
-    value: function renderMain() {
-      var props = this.props;
-      var content = this.renderContent();
-      var _this$getPopupAndLaye = this.getPopupAndLayerProps(),
-        popupProps = _this$getPopupAndLaye.popupProps,
-        _this$getPopupAndLaye2 = _this$getPopupAndLaye.layerProps,
-        layerProps = _this$getPopupAndLaye2 === void 0 ? {
-          active: false
-        } : _this$getPopupAndLaye2;
-      var anchorElement = props.children || props.anchorElement;
-      var popup = this.renderPopup(anchorElement, popupProps, content);
-      return /*#__PURE__*/React.createElement(RenderLayer, _extends({}, layerProps, {
-        getAnchorElement: this.getAnchorElement
-      }), popup);
+    this.close();
+  };
+  _proto.renderMain = function renderMain() {
+    var props = this.props;
+    var content = this.renderContent();
+    var _this$getPopupAndLaye = this.getPopupAndLayerProps(),
+      popupProps = _this$getPopupAndLaye.popupProps,
+      _this$getPopupAndLaye2 = _this$getPopupAndLaye.layerProps,
+      layerProps = _this$getPopupAndLaye2 === void 0 ? {
+        active: false
+      } : _this$getPopupAndLaye2;
+    var anchorElement = props.children || props.anchorElement;
+    var popup = this.renderPopup(anchorElement, popupProps, content);
+    return /*#__PURE__*/React.createElement(RenderLayer, _extends({}, layerProps, {
+      getAnchorElement: this.getAnchorElement
+    }), popup);
+  };
+  _proto.renderPopup = function renderPopup(anchorElement, popupProps, content) {
+    var _this$getProps2 = this.getProps(),
+      disableAnimations = _this$getProps2.disableAnimations,
+      trigger = _this$getProps2.trigger;
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(Popup, _extends({
+      "data-tid": TooltipDataTids.root,
+      anchorElement: anchorElement,
+      hasPin: true,
+      hasShadow: true,
+      maxWidth: "none",
+      opened: this.state.opened,
+      disableAnimations: disableAnimations,
+      positions: isThemeGTE(this.theme, '5.4') ? this.getPositions() : this.props.allowedPositions,
+      pos: this.props.pos,
+      ignoreHover: trigger === 'hoverAnchor',
+      onOpen: this.props.onOpen,
+      onClose: this.props.onClose,
+      tryPreserveFirstRenderedPosition: true,
+      ref: this.popupRef,
+      withoutMobile: true
+    }, popupProps), content));
+  };
+  _proto.getPopupAndLayerProps = function getPopupAndLayerProps() {
+    var props = this.props;
+    var useWrapper = !!props.children && this.getProps().useWrapper;
+    var trigger = this.getProps().trigger;
+    switch (trigger) {
+      case 'opened':
+        return {
+          layerProps: {
+            active: true,
+            onClickOutside: this.handleClickOutsideAnchor
+          },
+          popupProps: {
+            opened: true,
+            useWrapper: useWrapper
+          }
+        };
+      case 'closed':
+        return {
+          popupProps: {
+            opened: false,
+            useWrapper: useWrapper
+          }
+        };
+      case 'hoverAnchor':
+      case 'hover':
+        return {
+          popupProps: {
+            onMouseEnter: this.handleMouseEnter,
+            onMouseLeave: this.handleMouseLeave,
+            useWrapper: useWrapper
+          }
+        };
+      case 'manual':
+        return {
+          popupProps: {
+            useWrapper: useWrapper
+          }
+        };
+      case 'click':
+        return {
+          layerProps: {
+            active: this.state.opened,
+            onClickOutside: this.handleClickOutsideAnchor
+          },
+          popupProps: {
+            onClick: this.handleClick,
+            useWrapper: useWrapper
+          }
+        };
+      case 'focus':
+        return {
+          popupProps: {
+            onFocus: this.handleFocus,
+            onBlur: this.handleBlur,
+            useWrapper: useWrapper
+          }
+        };
+      case 'hover&focus':
+        return {
+          layerProps: {
+            active: this.state.opened,
+            onClickOutside: this.handleClickOutsideAnchor
+          },
+          popupProps: {
+            onFocus: this.handleFocus,
+            onBlur: this.handleBlur,
+            onMouseEnter: this.handleMouseEnter,
+            onMouseLeave: this.handleMouseLeave,
+            useWrapper: useWrapper
+          }
+        };
+      default:
+        throw new Error('Unknown trigger specified: ' + trigger);
     }
-  }, {
-    key: "renderPopup",
-    value: function renderPopup(anchorElement, popupProps, content) {
-      var _this$getProps2 = this.getProps(),
-        disableAnimations = _this$getProps2.disableAnimations,
-        trigger = _this$getProps2.trigger;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: this.setRootNode
-      }, this.props), /*#__PURE__*/React.createElement(Popup, _extends({
-        "data-tid": TooltipDataTids.root,
-        anchorElement: anchorElement,
-        hasPin: true,
-        hasShadow: true,
-        maxWidth: "none",
-        opened: this.state.opened,
-        disableAnimations: disableAnimations,
-        positions: isThemeGTE(this.theme, '5.4') ? this.getPositions() : this.props.allowedPositions,
-        pos: this.props.pos,
-        ignoreHover: trigger === 'hoverAnchor',
-        onOpen: this.props.onOpen,
-        onClose: this.props.onClose,
-        tryPreserveFirstRenderedPosition: true,
-        ref: this.popupRef,
-        withoutMobile: true
-      }, popupProps), content));
+  };
+  _proto.clearHoverTimeout = function clearHoverTimeout() {
+    if (this.hoverTimeout) {
+      globalObject.clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
     }
-  }, {
-    key: "getPopupAndLayerProps",
-    value: function getPopupAndLayerProps() {
-      var props = this.props;
-      var useWrapper = !!props.children && this.getProps().useWrapper;
-      var trigger = this.getProps().trigger;
-      switch (trigger) {
-        case 'opened':
-          return {
-            layerProps: {
-              active: true,
-              onClickOutside: this.handleClickOutsideAnchor
-            },
-            popupProps: {
-              opened: true,
-              useWrapper: useWrapper
-            }
-          };
-        case 'closed':
-          return {
-            popupProps: {
-              opened: false,
-              useWrapper: useWrapper
-            }
-          };
-        case 'hoverAnchor':
-        case 'hover':
-          return {
-            popupProps: {
-              onMouseEnter: this.handleMouseEnter,
-              onMouseLeave: this.handleMouseLeave,
-              useWrapper: useWrapper
-            }
-          };
-        case 'manual':
-          return {
-            popupProps: {
-              useWrapper: useWrapper
-            }
-          };
-        case 'click':
-          return {
-            layerProps: {
-              active: this.state.opened,
-              onClickOutside: this.handleClickOutsideAnchor
-            },
-            popupProps: {
-              onClick: this.handleClick,
-              useWrapper: useWrapper
-            }
-          };
-        case 'focus':
-          return {
-            popupProps: {
-              onFocus: this.handleFocus,
-              onBlur: this.handleBlur,
-              useWrapper: useWrapper
-            }
-          };
-        case 'hover&focus':
-          return {
-            layerProps: {
-              active: this.state.opened,
-              onClickOutside: this.handleClickOutsideAnchor
-            },
-            popupProps: {
-              onFocus: this.handleFocus,
-              onBlur: this.handleBlur,
-              onMouseEnter: this.handleMouseEnter,
-              onMouseLeave: this.handleMouseLeave,
-              useWrapper: useWrapper
-            }
-          };
-        default:
-          throw new Error('Unknown trigger specified: ' + trigger);
-      }
-    }
-  }, {
-    key: "clearHoverTimeout",
-    value: function clearHoverTimeout() {
-      if (this.hoverTimeout) {
-        globalObject.clearTimeout(this.hoverTimeout);
-        this.hoverTimeout = null;
-      }
-    }
-  }, {
-    key: "isClickOutsideContent",
-    value: function isClickOutsideContent(event) {
-      if (this.contentElement && isInstanceOf(event.target, globalObject.Element)) {
-        return !containsTargetOrRenderContainer(event.target)(this.contentElement);
-      }
-      return true;
+  };
+  _proto.isClickOutsideContent = function isClickOutsideContent(event) {
+    if (this.contentElement && isInstanceOf(event.target, globalObject.Element)) {
+      return !containsTargetOrRenderContainer(event.target)(this.contentElement);
     }
-  }]);
+    return true;
+  };
+  return Tooltip;
 }(React.PureComponent), _Tooltip.__KONTUR_REACT_UI__ = 'Tooltip', _Tooltip.displayName = 'Tooltip', _Tooltip.defaultProps = {
   trigger: 'hover',
   disableAnimations: isTestEnv,