@khanacademy/wonder-blocks-tooltip 2.0.4 → 2.0.6

package/dist/es/index.js

@@ -2,37 +2,22 @@ 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 { css, StyleSheet } from 'aphrodite';
+import { StyleSheet, css } from 'aphrodite';
 import Colors from '@khanacademy/wonder-blocks-color';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { HeadingSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { Popper } from 'react-popper';
 
-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() {
+class ActiveTracker {
+  constructor() {
     this._subscribers = [];
     this._active = void 0;
   }
-  var _proto = ActiveTracker.prototype;
-  _proto._getIndex = function _getIndex(who) {
+  _getIndex(who) {
     return this._subscribers.findIndex(v => v === who);
-  };
-  _proto.steal = function steal(who) {
+  }
+  steal(who) {
     const wasActive = !!this._active;
     this._active = true;
     for (const anchor of this._subscribers) {
@@ -42,11 +27,11 @@ let ActiveTracker = function () {
       anchor.activeStateStolen();
     }
     return wasActive;
-  };
-  _proto.giveup = function giveup() {
+  }
+  giveup() {
     this._active = false;
-  };
-  _proto.subscribe = function subscribe(who) {
+  }
+  subscribe(who) {
     if (this._getIndex(who) >= 0) {
       throw new Error("Already subscribed.");
     }
@@ -56,59 +41,54 @@ let ActiveTracker = function () {
       this._subscribers.splice(index, 1);
     };
     return unsubscribe;
-  };
-  return ActiveTracker;
-}();
+  }
+}
 
 const TooltipAppearanceDelay = 100;
 const TooltipDisappearanceDelay = 75;
 
 const TRACKER = new ActiveTracker();
-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);
+class TooltipAnchor extends React.Component {
+  constructor(props) {
+    super(props);
+    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;
   }
-  var _proto = TooltipAnchor.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  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.");
@@ -123,13 +103,13 @@ let TooltipAnchor = function (_ref) {
       anchorNode.addEventListener("mouseleave", this._handleMouseLeave);
       this.props.anchorRef(this._anchorNode);
     }
-  };
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+  }
+  componentDidUpdate(prevProps) {
     if (prevProps.forceAnchorFocusivity !== this.props.forceAnchorFocusivity || prevProps.children !== this.props.children) {
       this._updateFocusivity();
     }
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  }
+  componentWillUnmount() {
     if (this._unsubscribeFromTracker) {
       this._unsubscribeFromTracker();
     }
@@ -144,8 +124,8 @@ let TooltipAnchor = function (_ref) {
     if (this.state.active) {
       document.removeEventListener("keyup", this._handleKeyUp);
     }
-  };
-  _proto._updateFocusivity = function _updateFocusivity() {
+  }
+  _updateFocusivity() {
     const anchorNode = this._anchorNode;
     if (!anchorNode) {
       return;
@@ -163,19 +143,19 @@ let TooltipAnchor = function (_ref) {
         this._weSetFocusivity = false;
       }
     }
-  };
-  _proto._updateActiveState = function _updateActiveState(hovered, focused) {
+  }
+  _updateActiveState(hovered, focused) {
     this._hovered = hovered;
     this._focused = focused;
     this._setActiveState(hovered || focused);
-  };
-  _proto._clearPendingAction = function _clearPendingAction() {
+  }
+  _clearPendingAction() {
     if (this._timeoutID) {
       clearTimeout(this._timeoutID);
       this._timeoutID = null;
     }
-  };
-  _proto._setActiveState = function _setActiveState(active, instant) {
+  }
+  _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) {
@@ -203,27 +183,26 @@ let TooltipAnchor = function (_ref) {
         this._setActiveState(active, true);
       }, delay);
     }
-  };
-  _proto._renderAnchorableChildren = function _renderAnchorableChildren() {
+  }
+  _renderAnchorableChildren() {
     const {
       children
     } = this.props;
     return typeof children === "string" ? React.createElement(Text$1, null, children) : children;
-  };
-  _proto._renderAccessibleChildren = function _renderAccessibleChildren(ids) {
+  }
+  _renderAccessibleChildren(ids) {
     const anchorableChildren = this._renderAnchorableChildren();
     return React.cloneElement(anchorableChildren, {
       "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
     });
-  };
-  _proto.render = function render() {
+  }
+  render() {
     if (this.props.ids) {
       return this._renderAccessibleChildren(this.props.ids);
     }
     return this._renderAnchorableChildren();
-  };
-  return TooltipAnchor;
-}(React.Component);
+  }
+}
 TooltipAnchor.defaultProps = {
   forceAnchorFocusivity: true
 };
@@ -245,13 +224,8 @@ function _extends() {
 }
 
 let tempIdCounter = 0;
-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() {
+class TooltipTail extends React.Component {
+  _calculateDimensionsFromPlacement() {
     const {
       placement
     } = this.props;
@@ -288,8 +262,8 @@ let TooltipTail = function (_React$Component) {
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  };
-  _proto._getFilterPositioning = function _getFilterPositioning() {
+  }
+  _getFilterPositioning() {
     const {
       placement
     } = this.props;
@@ -317,8 +291,8 @@ let TooltipTail = function (_React$Component) {
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  };
-  _proto._maybeRenderDropshadow = function _maybeRenderDropshadow(points) {
+  }
+  _maybeRenderDropshadow(points) {
     const position = this._getFilterPositioning();
     if (!position) {
       return null;
@@ -354,14 +328,14 @@ let TooltipTail = function (_React$Component) {
       stroke: Colors.offBlack32,
       filter: `url(#${dropShadowFilterId})`
     }))];
-  };
-  _proto._getFullTailWidth = function _getFullTailWidth() {
+  }
+  _getFullTailWidth() {
     return ARROW_WIDTH + 2 * MIN_DISTANCE_FROM_CORNERS;
-  };
-  _proto._getFullTailHeight = function _getFullTailHeight() {
+  }
+  _getFullTailHeight() {
     return ARROW_HEIGHT + DISTANCE_FROM_ANCHOR;
-  };
-  _proto._getContainerStyle = function _getContainerStyle() {
+  }
+  _getContainerStyle() {
     const {
       placement
     } = this.props;
@@ -395,8 +369,8 @@ let TooltipTail = function (_React$Component) {
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  };
-  _proto._getArrowStyle = function _getArrowStyle() {
+  }
+  _getArrowStyle() {
     const {
       placement
     } = this.props;
@@ -428,8 +402,8 @@ let TooltipTail = function (_React$Component) {
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  };
-  _proto._renderArrow = function _renderArrow() {
+  }
+  _renderArrow() {
     const {
       trimlinePoints,
       points,
@@ -457,8 +431,8 @@ let TooltipTail = function (_React$Component) {
       stroke: Colors[color],
       points: trimlinePoints.join(" ")
     }));
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       offset,
       placement,
@@ -469,9 +443,8 @@ let TooltipTail = function (_React$Component) {
       "data-placement": placement,
       ref: updateRef
     }, this._renderArrow());
-  };
-  return TooltipTail;
-}(React.Component);
+  }
+}
 TooltipTail.defaultProps = {
   color: "white"
 };
@@ -489,30 +462,26 @@ const styles$2 = StyleSheet.create({
   }
 });
 
-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 = {
+class TooltipBubble extends React.Component {
+  constructor(...args) {
+    super(...args);
+    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;
   }
-  var _proto = TooltipBubble.prototype;
-  _proto._setActiveState = function _setActiveState(active) {
+  _setActiveState(active) {
     this.setState({
       active
     });
     this.props.onActiveChanged(active);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       id,
       children,
@@ -538,9 +507,8 @@ let TooltipBubble = function (_React$Component) {
       placement: placement,
       offset: tailOffset
     }));
-  };
-  return TooltipBubble;
-}(React.Component);
+  }
+}
 const styles$1 = StyleSheet.create({
   bubble: {
     position: "absolute"
@@ -573,13 +541,8 @@ const styles$1 = StyleSheet.create({
   }
 });
 
-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() {
+class TooltipContent extends React.Component {
+  _renderTitle() {
     const {
       title
     } = this.props;
@@ -591,8 +554,8 @@ let TooltipContent = function (_React$Component) {
       }
     }
     return null;
-  };
-  _proto._renderChildren = function _renderChildren() {
+  }
+  _renderChildren() {
     const {
       children
     } = this.props;
@@ -601,8 +564,8 @@ let TooltipContent = function (_React$Component) {
     } else {
       return children;
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const title = this._renderTitle();
     const children = this._renderChildren();
     const containerStyle = title ? styles.withTitle : styles.withoutTitle;
@@ -611,9 +574,8 @@ let TooltipContent = function (_React$Component) {
     }, 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`
@@ -623,43 +585,41 @@ const styles = StyleSheet.create({
   }
 });
 
-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");
+class RefTracker {
+  constructor() {
+    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._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");
+        }
+        this._targetFn = targetFn || null;
+        if (this._lastRef && this._targetFn) {
+          this._targetFn(this._lastRef);
+        }
       }
-    }
-  };
-};
+    };
+  }
+}
 
-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) {
+class TooltipPopper extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this._bubbleRefTracker = new RefTracker();
+    this._tailRefTracker = new RefTracker();
+  }
+  _renderPositionedContent(popperProps) {
     const {
       children
     } = this.props;
@@ -688,8 +648,8 @@ let TooltipPopper = function (_React$Component) {
       isReferenceHidden: popperProps.isReferenceHidden
     };
     return children(bubbleProps);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       anchorElement,
       placement
@@ -705,36 +665,31 @@ let TooltipPopper = function (_React$Component) {
         }
       }]
     }, props => this._renderPositionedContent(props));
-  };
-  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 = {
+class Tooltip extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       active: false,
       activeBubble: false,
       anchorElement: null
     };
-    return _this;
   }
-  Tooltip.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props, state) {
     return {
       active: typeof props.opened === "boolean" ? props.opened : state.active
     };
-  };
-  var _proto = Tooltip.prototype;
-  _proto._updateAnchorElement = function _updateAnchorElement(ref) {
+  }
+  _updateAnchorElement(ref) {
     if (ref && ref !== this.state.anchorElement) {
       this.setState({
         anchorElement: ref
       });
     }
-  };
-  _proto._renderBubbleContent = function _renderBubbleContent() {
+  }
+  _renderBubbleContent() {
     const {
       title,
       content
@@ -750,8 +705,8 @@ let Tooltip = function (_React$Component) {
     } else {
       return content;
     }
-  };
-  _proto._renderPopper = function _renderPopper(ids) {
+  }
+  _renderPopper(ids) {
     const {
       id
     } = this.props;
@@ -777,14 +732,14 @@ let Tooltip = function (_React$Component) {
         activeBubble: active
       })
     }, this._renderBubbleContent()));
-  };
-  _proto._getHost = function _getHost() {
+  }
+  _getHost() {
     const {
       anchorElement
     } = this.state;
     return maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
-  };
-  _proto._renderTooltipAnchor = function _renderTooltipAnchor(ids) {
+  }
+  _renderTooltipAnchor(ids) {
     const {
       children,
       forceAnchorFocusivity
@@ -802,8 +757,8 @@ let Tooltip = function (_React$Component) {
       }),
       ids: ids
     }, children), popperHost && (active || activeBubble) && ReactDOM.createPortal(this._renderPopper(ids), popperHost));
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       id
     } = this.props;
@@ -815,9 +770,8 @@ let Tooltip = function (_React$Component) {
         mockOnFirstRender: true
       }, ids => this._renderTooltipAnchor(ids));
     }
-  };
-  return Tooltip;
-}(React.Component);
+  }
+}
 Tooltip.defaultProps = {
   forceAnchorFocusivity: true,
   placement: "top"