@khanacademy/wonder-blocks-tooltip 1.4.5 → 1.4.7

package/dist/es/index.js

@@ -2,119 +2,120 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Text as Text$1, View, UniqueIDProvider } from '@khanacademy/wonder-blocks-core';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
-import { StyleSheet, css } from 'aphrodite';
+import { css, StyleSheet } from 'aphrodite';
 import Colors from '@khanacademy/wonder-blocks-color';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
-import _extends from '@babel/runtime/helpers/extends';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { HeadingSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { Popper } from 'react-popper';
 
-class ActiveTracker {
-  constructor() {
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
+let ActiveTracker = function () {
+  function ActiveTracker() {
     this._subscribers = [];
+    this._active = void 0;
   }
-
-  _getIndex(who) {
+  var _proto = ActiveTracker.prototype;
+  _proto._getIndex = function _getIndex(who) {
     return this._subscribers.findIndex(v => v === who);
-  }
-
-  steal(who) {
+  };
+  _proto.steal = function steal(who) {
     const wasActive = !!this._active;
     this._active = true;
-
     for (const anchor of this._subscribers) {
       if (anchor === who) {
         continue;
       }
-
       anchor.activeStateStolen();
     }
-
     return wasActive;
-  }
-
-  giveup() {
+  };
+  _proto.giveup = function giveup() {
     this._active = false;
-  }
-
-  subscribe(who) {
+  };
+  _proto.subscribe = function subscribe(who) {
     if (this._getIndex(who) >= 0) {
       throw new Error("Already subscribed.");
     }
-
     this._subscribers.push(who);
-
     const unsubscribe = () => {
       const index = this._getIndex(who);
-
       this._subscribers.splice(index, 1);
     };
-
     return unsubscribe;
-  }
-
-}
+  };
+  return ActiveTracker;
+}();
 
 const TooltipAppearanceDelay = 100;
 const TooltipDisappearanceDelay = 75;
 
 const TRACKER = new ActiveTracker();
-class TooltipAnchor extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.activeStateStolen = () => {
-      this._stolenFromUs = this.state.active || !!this._timeoutID;
-      this._focused = false;
-
-      this._setActiveState(false, true);
+let TooltipAnchor = function (_ref) {
+  _inheritsLoose(TooltipAnchor, _ref);
+  function TooltipAnchor(props) {
+    var _this;
+    _this = _ref.call(this, props) || this;
+    _this._weSetFocusivity = void 0;
+    _this._anchorNode = void 0;
+    _this._focused = void 0;
+    _this._hovered = void 0;
+    _this._stolenFromUs = void 0;
+    _this._unsubscribeFromTracker = void 0;
+    _this._timeoutID = void 0;
+    _this.activeStateStolen = () => {
+      _this._stolenFromUs = _this.state.active || !!_this._timeoutID;
+      _this._focused = false;
+      _this._setActiveState(false, true);
     };
-
-    this._handleFocusIn = () => {
-      this._updateActiveState(this._hovered, true);
+    _this._handleFocusIn = () => {
+      _this._updateActiveState(_this._hovered, true);
     };
-
-    this._handleFocusOut = () => {
-      this._updateActiveState(this._hovered, false);
+    _this._handleFocusOut = () => {
+      _this._updateActiveState(_this._hovered, false);
     };
-
-    this._handleMouseEnter = () => {
-      this._updateActiveState(true, this._focused);
+    _this._handleMouseEnter = () => {
+      _this._updateActiveState(true, _this._focused);
     };
-
-    this._handleMouseLeave = () => {
-      this._updateActiveState(false, this._focused);
+    _this._handleMouseLeave = () => {
+      _this._updateActiveState(false, _this._focused);
     };
-
-    this._handleKeyUp = e => {
-      if (e.key === "Escape" && this.state.active) {
+    _this._handleKeyUp = e => {
+      if (e.key === "Escape" && _this.state.active) {
         e.preventDefault();
         e.stopPropagation();
-
-        this._updateActiveState(false, false);
+        _this._updateActiveState(false, false);
       }
     };
-
-    this._focused = false;
-    this._hovered = false;
-    this.state = {
+    _this._focused = false;
+    _this._hovered = false;
+    _this.state = {
       active: false
     };
+    return _this;
   }
-
-  componentDidMount() {
+  var _proto = TooltipAnchor.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const anchorNode = ReactDOM.findDOMNode(this);
-
     if (anchorNode instanceof Text) {
       throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.");
     }
-
     this._unsubscribeFromTracker = TRACKER.subscribe(this);
     this._anchorNode = anchorNode;
-
     this._updateFocusivity();
-
     if (anchorNode) {
       anchorNode.addEventListener("focusin", this._handleFocusIn);
       anchorNode.addEventListener("focusout", this._handleFocusOut);
@@ -122,47 +123,37 @@ class TooltipAnchor extends React.Component {
       anchorNode.addEventListener("mouseleave", this._handleMouseLeave);
       this.props.anchorRef(this._anchorNode);
     }
-  }
-
-  componentDidUpdate(prevProps) {
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     if (prevProps.forceAnchorFocusivity !== this.props.forceAnchorFocusivity || prevProps.children !== this.props.children) {
       this._updateFocusivity();
     }
-  }
-
-  componentWillUnmount() {
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
     if (this._unsubscribeFromTracker) {
       this._unsubscribeFromTracker();
     }
-
     this._clearPendingAction();
-
     const anchorNode = this._anchorNode;
-
     if (anchorNode) {
       anchorNode.removeEventListener("focusin", this._handleFocusIn);
       anchorNode.removeEventListener("focusout", this._handleFocusOut);
       anchorNode.removeEventListener("mouseenter", this._handleMouseEnter);
       anchorNode.removeEventListener("mouseleave", this._handleMouseLeave);
     }
-
     if (this.state.active) {
       document.removeEventListener("keyup", this._handleKeyUp);
     }
-  }
-
-  _updateFocusivity() {
+  };
+  _proto._updateFocusivity = function _updateFocusivity() {
     const anchorNode = this._anchorNode;
-
     if (!anchorNode) {
       return;
     }
-
     const {
       forceAnchorFocusivity
     } = this.props;
     const currentTabIndex = anchorNode.getAttribute("tabindex");
-
     if (forceAnchorFocusivity && !currentTabIndex) {
       anchorNode.setAttribute("tabindex", "0");
       this._weSetFocusivity = true;
@@ -172,95 +163,99 @@ class TooltipAnchor extends React.Component {
         this._weSetFocusivity = false;
       }
     }
-  }
-
-  _updateActiveState(hovered, focused) {
+  };
+  _proto._updateActiveState = function _updateActiveState(hovered, focused) {
     this._hovered = hovered;
     this._focused = focused;
-
     this._setActiveState(hovered || focused);
-  }
-
-  _clearPendingAction() {
+  };
+  _proto._clearPendingAction = function _clearPendingAction() {
     if (this._timeoutID) {
       clearTimeout(this._timeoutID);
       this._timeoutID = null;
     }
-  }
-
-  _setActiveState(active, instant) {
+  };
+  _proto._setActiveState = function _setActiveState(active, instant) {
     if (this._stolenFromUs || active !== this.state.active || !this.state.active && this._timeoutID) {
       this._clearPendingAction();
     } else if (active === this.state.active && !this._timeoutID) {
       return;
     }
-
     instant = instant || active && TRACKER.steal(this);
-
     if (instant) {
       if (active) {
         document.addEventListener("keyup", this._handleKeyUp);
       } else {
         document.removeEventListener("keyup", this._handleKeyUp);
       }
-
       this.setState({
         active
       });
       this.props.onActiveChanged(active);
-
       if (!this._stolenFromUs && !active) {
         TRACKER.giveup();
       }
-
       this._stolenFromUs = false;
     } else {
       const delay = active ? TooltipAppearanceDelay : TooltipDisappearanceDelay;
       this._timeoutID = setTimeout(() => {
         this._timeoutID = null;
-
         this._setActiveState(active, true);
       }, delay);
     }
-  }
-
-  _renderAnchorableChildren() {
+  };
+  _proto._renderAnchorableChildren = function _renderAnchorableChildren() {
     const {
       children
     } = this.props;
     return typeof children === "string" ? React.createElement(Text$1, null, children) : children;
-  }
-
-  _renderAccessibleChildren(ids) {
+  };
+  _proto._renderAccessibleChildren = function _renderAccessibleChildren(ids) {
     const anchorableChildren = this._renderAnchorableChildren();
-
     return React.cloneElement(anchorableChildren, {
       "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
     });
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     if (this.props.ids) {
       return this._renderAccessibleChildren(this.props.ids);
     }
-
     return this._renderAnchorableChildren();
-  }
-
-}
+  };
+  return TooltipAnchor;
+}(React.Component);
 TooltipAnchor.defaultProps = {
   forceAnchorFocusivity: true
 };
 TooltipAnchor.ariaContentId = "aria-content";
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 let tempIdCounter = 0;
-class TooltipTail extends React.Component {
-  _calculateDimensionsFromPlacement() {
+let TooltipTail = function (_React$Component) {
+  _inheritsLoose(TooltipTail, _React$Component);
+  function TooltipTail() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = TooltipTail.prototype;
+  _proto._calculateDimensionsFromPlacement = function _calculateDimensionsFromPlacement() {
     const {
       placement
     } = this.props;
     const trimlineOffset = 0.5;
-
     switch (placement) {
       case "top":
         return {
@@ -269,7 +264,6 @@ class TooltipTail extends React.Component {
           height: ARROW_HEIGHT,
           width: ARROW_WIDTH
         };
-
       case "right":
         return {
           trimlinePoints: [`${ARROW_HEIGHT + trimlineOffset},0`, `${ARROW_HEIGHT + trimlineOffset},${ARROW_WIDTH}`],
@@ -277,7 +271,6 @@ class TooltipTail extends React.Component {
           width: ARROW_HEIGHT,
           height: ARROW_WIDTH
         };
-
       case "bottom":
         return {
           trimlinePoints: [`0, ${ARROW_HEIGHT + trimlineOffset}`, `${ARROW_WIDTH},${ARROW_HEIGHT + trimlineOffset}`],
@@ -285,7 +278,6 @@ class TooltipTail extends React.Component {
           width: ARROW_WIDTH,
           height: ARROW_HEIGHT
         };
-
       case "left":
         return {
           trimlinePoints: [`-${trimlineOffset},0`, `-${trimlineOffset},${ARROW_WIDTH}`],
@@ -293,17 +285,14 @@ class TooltipTail extends React.Component {
           width: ARROW_HEIGHT,
           height: ARROW_WIDTH
         };
-
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  }
-
-  _getFilterPositioning() {
+  };
+  _proto._getFilterPositioning = function _getFilterPositioning() {
     const {
       placement
     } = this.props;
-
     switch (placement) {
       case "top":
         return {
@@ -311,36 +300,29 @@ class TooltipTail extends React.Component {
           x: "-50%",
           offsetShadowX: 0
         };
-
       case "bottom":
         return null;
-
       case "left":
         return {
           y: "-50%",
           x: "0%",
           offsetShadowX: 1
         };
-
       case "right":
         return {
           y: "-50%",
           x: "-100%",
           offsetShadowX: -1
         };
-
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  }
-
-  _maybeRenderDropshadow(points) {
+  };
+  _proto._maybeRenderDropshadow = function _maybeRenderDropshadow(points) {
     const position = this._getFilterPositioning();
-
     if (!position) {
       return null;
     }
-
     const {
       placement
     } = this.props;
@@ -372,25 +354,19 @@ class TooltipTail extends React.Component {
       stroke: Colors.offBlack32,
       filter: `url(#${dropShadowFilterId})`
     }))];
-  }
-
-  _getFullTailWidth() {
+  };
+  _proto._getFullTailWidth = function _getFullTailWidth() {
     return ARROW_WIDTH + 2 * MIN_DISTANCE_FROM_CORNERS;
-  }
-
-  _getFullTailHeight() {
+  };
+  _proto._getFullTailHeight = function _getFullTailHeight() {
     return ARROW_HEIGHT + DISTANCE_FROM_ANCHOR;
-  }
-
-  _getContainerStyle() {
+  };
+  _proto._getContainerStyle = function _getContainerStyle() {
     const {
       placement
     } = this.props;
-
     const fullTailWidth = this._getFullTailWidth();
-
     const fullTailHeight = this._getFullTailHeight();
-
     switch (placement) {
       case "top":
         return {
@@ -398,38 +374,32 @@ class TooltipTail extends React.Component {
           width: fullTailWidth,
           height: fullTailHeight
         };
-
       case "right":
         return {
           left: 1,
           width: fullTailHeight,
           height: fullTailWidth
         };
-
       case "bottom":
         return {
           top: 1,
           width: fullTailWidth,
           height: fullTailHeight
         };
-
       case "left":
         return {
           left: -1,
           width: fullTailHeight,
           height: fullTailWidth
         };
-
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  }
-
-  _getArrowStyle() {
+  };
+  _proto._getArrowStyle = function _getArrowStyle() {
     const {
       placement
     } = this.props;
-
     switch (placement) {
       case "top":
         return {
@@ -437,41 +407,35 @@ class TooltipTail extends React.Component {
           marginRight: MIN_DISTANCE_FROM_CORNERS,
           paddingBottom: DISTANCE_FROM_ANCHOR
         };
-
       case "right":
         return {
           marginTop: MIN_DISTANCE_FROM_CORNERS,
           marginBottom: MIN_DISTANCE_FROM_CORNERS,
           paddingLeft: DISTANCE_FROM_ANCHOR
         };
-
       case "bottom":
         return {
           marginLeft: MIN_DISTANCE_FROM_CORNERS,
           marginRight: MIN_DISTANCE_FROM_CORNERS,
           paddingTop: DISTANCE_FROM_ANCHOR
         };
-
       case "left":
         return {
           marginTop: MIN_DISTANCE_FROM_CORNERS,
           marginBottom: MIN_DISTANCE_FROM_CORNERS,
           paddingRight: DISTANCE_FROM_ANCHOR
         };
-
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  }
-
-  _renderArrow() {
+  };
+  _proto._renderArrow = function _renderArrow() {
     const {
       trimlinePoints,
       points,
       height,
       width
     } = this._calculateDimensionsFromPlacement();
-
     const {
       color
     } = this.props;
@@ -493,9 +457,8 @@ class TooltipTail extends React.Component {
       stroke: Colors[color],
       points: trimlinePoints.join(" ")
     }));
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       offset,
       placement,
@@ -506,9 +469,9 @@ class TooltipTail extends React.Component {
       "data-placement": placement,
       ref: updateRef
     }, this._renderArrow());
-  }
-
-}
+  };
+  return TooltipTail;
+}(React.Component);
 TooltipTail.defaultProps = {
   color: "white"
 };
@@ -526,30 +489,30 @@ const styles$2 = StyleSheet.create({
   }
 });
 
-class TooltipBubble extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
+let TooltipBubble = function (_React$Component) {
+  _inheritsLoose(TooltipBubble, _React$Component);
+  function TooltipBubble(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.state = {
       active: false
     };
-
-    this.handleMouseEnter = () => {
-      this._setActiveState(true);
+    _this.handleMouseEnter = () => {
+      _this._setActiveState(true);
     };
-
-    this.handleMouseLeave = () => {
-      this.props.onActiveChanged(false);
+    _this.handleMouseLeave = () => {
+      _this.props.onActiveChanged(false);
     };
+    return _this;
   }
-
-  _setActiveState(active) {
+  var _proto = TooltipBubble.prototype;
+  _proto._setActiveState = function _setActiveState(active) {
     this.setState({
       active
     });
     this.props.onActiveChanged(active);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       id,
       children,
@@ -575,9 +538,9 @@ class TooltipBubble extends React.Component {
       placement: placement,
       offset: tailOffset
     }));
-  }
-
-}
+  };
+  return TooltipBubble;
+}(React.Component);
 const styles$1 = StyleSheet.create({
   bubble: {
     position: "absolute"
@@ -610,12 +573,16 @@ const styles$1 = StyleSheet.create({
   }
 });
 
-class TooltipContent extends React.Component {
-  _renderTitle() {
+let TooltipContent = function (_React$Component) {
+  _inheritsLoose(TooltipContent, _React$Component);
+  function TooltipContent() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = TooltipContent.prototype;
+  _proto._renderTitle = function _renderTitle() {
     const {
       title
     } = this.props;
-
     if (title) {
       if (typeof title === "string") {
         return React.createElement(HeadingSmall, null, title);
@@ -623,36 +590,30 @@ class TooltipContent extends React.Component {
         return title;
       }
     }
-
     return null;
-  }
-
-  _renderChildren() {
+  };
+  _proto._renderChildren = function _renderChildren() {
     const {
       children
     } = this.props;
-
     if (typeof children === "string") {
       return React.createElement(LabelMedium, null, children);
     } else {
       return children;
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const title = this._renderTitle();
-
     const children = this._renderChildren();
-
     const containerStyle = title ? styles.withTitle : styles.withoutTitle;
     return React.createElement(View, {
       style: containerStyle
     }, title, title && children && React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }), children);
-  }
-
-}
+  };
+  return TooltipContent;
+}(React.Component);
 const styles = StyleSheet.create({
   withoutTitle: {
     padding: `10px ${Spacing.medium_16}px`
@@ -662,53 +623,49 @@ const styles = StyleSheet.create({
   }
 });
 
-class RefTracker {
-  constructor() {
-    this.updateRef = ref => {
-      if (ref) {
-        const domNode = ReactDOM.findDOMNode(ref);
-
-        if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
-          this._lastRef = domNode;
-          this._targetFn && this._targetFn(domNode);
-        }
+let RefTracker = function RefTracker() {
+  this._lastRef = void 0;
+  this._targetFn = void 0;
+  this.updateRef = ref => {
+    if (ref) {
+      const domNode = ReactDOM.findDOMNode(ref);
+      if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
+        var _this$_targetFn;
+        this._lastRef = domNode;
+        (_this$_targetFn = this._targetFn) == null ? void 0 : _this$_targetFn.call(this, domNode);
       }
-    };
-
-    this.setCallback = targetFn => {
-      if (this._targetFn !== targetFn) {
-        if (targetFn && typeof targetFn !== "function") {
-          throw new Error("targetFn must be a function");
-        }
-
-        this._targetFn = targetFn || null;
-
-        if (this._lastRef && this._targetFn) {
-          this._targetFn(this._lastRef);
-        }
+    }
+  };
+  this.setCallback = targetFn => {
+    if (this._targetFn !== targetFn) {
+      if (targetFn && typeof targetFn !== "function") {
+        throw new Error("targetFn must be a function");
       }
-    };
-  }
-
-}
-
-class TooltipPopper extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this._bubbleRefTracker = new RefTracker();
-    this._tailRefTracker = new RefTracker();
-  }
+      this._targetFn = targetFn || null;
+      if (this._lastRef && this._targetFn) {
+        this._targetFn(this._lastRef);
+      }
+    }
+  };
+};
 
-  _renderPositionedContent(popperProps) {
+let TooltipPopper = function (_React$Component) {
+  _inheritsLoose(TooltipPopper, _React$Component);
+  function TooltipPopper(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this._bubbleRefTracker = new RefTracker();
+    _this._tailRefTracker = new RefTracker();
+    return _this;
+  }
+  var _proto = TooltipPopper.prototype;
+  _proto._renderPositionedContent = function _renderPositionedContent(popperProps) {
     const {
       children
     } = this.props;
     const placement = popperProps.placement || this.props.placement;
-
     this._bubbleRefTracker.setCallback(popperProps.ref);
-
     this._tailRefTracker.setCallback(popperProps.arrowProps.ref);
-
     const bubbleProps = {
       placement,
       style: {
@@ -731,9 +688,8 @@ class TooltipPopper extends React.Component {
       isReferenceHidden: popperProps.isReferenceHidden
     };
     return children(bubbleProps);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       anchorElement,
       placement
@@ -749,40 +705,40 @@ class TooltipPopper extends React.Component {
         }
       }]
     }, props => this._renderPositionedContent(props));
-  }
-
-}
-
-class Tooltip extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
+  };
+  return TooltipPopper;
+}(React.Component);
+
+let Tooltip = function (_React$Component) {
+  _inheritsLoose(Tooltip, _React$Component);
+  function Tooltip(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.state = {
       active: false,
       activeBubble: false,
       anchorElement: null
     };
+    return _this;
   }
-
-  static getDerivedStateFromProps(props, state) {
+  Tooltip.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
     return {
       active: typeof props.opened === "boolean" ? props.opened : state.active
     };
-  }
-
-  _updateAnchorElement(ref) {
+  };
+  var _proto = Tooltip.prototype;
+  _proto._updateAnchorElement = function _updateAnchorElement(ref) {
     if (ref && ref !== this.state.anchorElement) {
       this.setState({
         anchorElement: ref
       });
     }
-  }
-
-  _renderBubbleContent() {
+  };
+  _proto._renderBubbleContent = function _renderBubbleContent() {
     const {
       title,
       content
     } = this.props;
-
     if (typeof content === "string") {
       return React.createElement(TooltipContent, {
         title: title
@@ -794,18 +750,15 @@ class Tooltip extends React.Component {
     } else {
       return content;
     }
-  }
-
-  _renderPopper(ids) {
+  };
+  _proto._renderPopper = function _renderPopper(ids) {
     const {
       id
     } = this.props;
     const bubbleId = ids ? ids.get(Tooltip.ariaContentId) : id;
-
     if (!bubbleId) {
       throw new Error("Did not get an identifier factory nor a id prop");
     }
-
     const {
       placement
     } = this.props;
@@ -824,16 +777,14 @@ class Tooltip extends React.Component {
         activeBubble: active
       })
     }, this._renderBubbleContent()));
-  }
-
-  _getHost() {
+  };
+  _proto._getHost = function _getHost() {
     const {
       anchorElement
     } = this.state;
     return maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
-  }
-
-  _renderTooltipAnchor(ids) {
+  };
+  _proto._renderTooltipAnchor = function _renderTooltipAnchor(ids) {
     const {
       children,
       forceAnchorFocusivity
@@ -842,9 +793,7 @@ class Tooltip extends React.Component {
       active,
       activeBubble
     } = this.state;
-
     const popperHost = this._getHost();
-
     return React.createElement(React.Fragment, null, React.createElement(TooltipAnchor, {
       forceAnchorFocusivity: forceAnchorFocusivity,
       anchorRef: r => this._updateAnchorElement(r),
@@ -853,13 +802,11 @@ class Tooltip extends React.Component {
       }),
       ids: ids
     }, children), popperHost && (active || activeBubble) && ReactDOM.createPortal(this._renderPopper(ids), popperHost));
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       id
     } = this.props;
-
     if (id) {
       return this._renderTooltipAnchor();
     } else {
@@ -868,9 +815,9 @@ class Tooltip extends React.Component {
         mockOnFirstRender: true
       }, ids => this._renderTooltipAnchor(ids));
     }
-  }
-
-}
+  };
+  return Tooltip;
+}(React.Component);
 Tooltip.defaultProps = {
   forceAnchorFocusivity: true,
   placement: "top"