@khanacademy/wonder-blocks-tooltip 1.3.0

package/dist/es/index.js

@@ -0,0 +1,1133 @@
+import { Component, createElement, cloneElement, Fragment } from 'react';
+import { findDOMNode, createPortal } 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 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';
+
+/**
+ * This interface should be implemented by types that are interested in the
+ * notifications of active state being stolen. Generally, this would also be
+ * subscribers that may also steal active state, but not necessarily.
+ *
+ * Once implemented, the type must call subscribe on a tracker to begin
+ * receiving notifications.
+ */
+
+/**
+ * This class is used to track the concept of active state (though technically
+ * that could be any boolean state). The tracker has a variety of subscribers
+ * that receive notifications of state theft and can steal the state.
+ *
+ * For the tooltip, this enables us to have a single tooltip active at any one
+ * time. The tracker allows tooltip anchors to coordinate which of them is
+ * active, and to ensure that if a different one becomes active, all the others
+ * know that they aren't.
+ *
+ * - When notified that the state has been stolen, subscribers can immediately
+ * reflect that theft (in the case of a tooltip, they would hide themselves).
+ * - The thief does not get notified if they were the one who stole the state
+ * since they should already know that they did that (this avoids having to have
+ * checks for reentrancy, for example).
+ * - When the subscriber that owns the state no longer needs it, it can
+ * voluntarily give it up.
+ * - If the state is stolen while a subscriber owns the
+ * state, that subscriber does not give up the state, as it doesn't have it
+ * anymore (it was stolen).
+ */
+class ActiveTracker {
+  constructor() {
+    this._subscribers = [];
+  }
+
+  _getIndex(who) {
+    return this._subscribers.findIndex(v => v === who);
+  }
+  /**
+   * Called when a tooltip anchor becomes active so that it can tell all other
+   * anchors that they are no longer the active tooltip. Returns true if
+   * the there was a steal of active state from another anchor; otherwise, if
+   * no other anchor had been active, returns false.
+   */
+
+
+  steal(who) {
+    const wasActive = !!this._active;
+    this._active = true;
+
+    for (const anchor of this._subscribers) {
+      if (anchor === who) {
+        // We don't need to notify the thief.
+        continue;
+      }
+
+      anchor.activeStateStolen();
+    }
+
+    return wasActive;
+  }
+  /**
+   * Called if a tooltip doesn't want to be active anymore.
+   * Should not be called when being told the active spot was stolen by
+   * another anchor, only when the anchor is unhovered and unfocused and they
+   * were active.
+   */
+
+
+  giveup() {
+    this._active = false;
+  }
+  /**
+   * Subscribes a tooltip anchor to the tracker so that it can be notified of
+   * steals. Returns a method that can be used to unsubscribe the anchor from
+   * notifications.
+   */
+
+
+  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;
+  }
+
+}
+
+/**
+ * The attribute used to identify a tooltip portal.
+ */
+const TooltipAppearanceDelay = 100;
+const TooltipDisappearanceDelay = 75;
+
+/**
+ * This component turns the given content into an accessible anchor for
+ * positioning and displaying tooltips.
+ */
+const TRACKER = new ActiveTracker();
+class TooltipAnchor extends Component {
+  constructor(props) {
+    super(props);
+
+    this.activeStateStolen = () => {
+      // Something wants the active state.
+      // Do we have it? If so, let's remember that.
+      // If we are already active, or we're inactive but have a timeoutID,
+      // then it was stolen from us.
+      this._stolenFromUs = this.state.active || !!this._timeoutID; // Let's first tell ourselves we're not focused (otherwise the tooltip
+      // will be sticky on the next hover of this anchor and that just looks
+      // weird).
+
+      this._focused = false; // Now update our actual state.
+
+      this._setActiveState(false, true);
+    };
+
+    this._handleFocusIn = () => {
+      this._updateActiveState(this._hovered, true);
+    };
+
+    this._handleFocusOut = () => {
+      this._updateActiveState(this._hovered, false);
+    };
+
+    this._handleMouseEnter = () => {
+      this._updateActiveState(true, this._focused);
+    };
+
+    this._handleMouseLeave = () => {
+      this._updateActiveState(false, this._focused);
+    };
+
+    this._handleKeyUp = e => {
+      // We check the key as that's keyboard layout agnostic and also avoids
+      // the minefield of deprecated number type properties like keyCode and
+      // which, with the replacement code, which uses a string instead.
+      if (e.key === "Escape" && this.state.active) {
+        // Stop the event going any further.
+        // For cancellation events, like the Escape key, we generally should
+        // air on the side of caution and only allow it to cancel one thing.
+        // So, it's polite for us to stop propagation of the event.
+        // Otherwise, we end up with UX where one Escape key press
+        // unexpectedly cancels multiple things.
+        //
+        // For example, using Escape to close a tooltip or a dropdown while
+        // displaying a modal and having the modal close as well. This would
+        // be annoyingly bad UX.
+        e.preventDefault();
+        e.stopPropagation();
+
+        this._updateActiveState(false, false);
+      }
+    };
+
+    this._focused = false;
+    this._hovered = false;
+    this.state = {
+      active: false
+    };
+  }
+
+  componentDidMount() {
+    const anchorNode = findDOMNode(this); // This should never happen, but we have this check here to make flow
+    // happy and ensure that if this does happen, we'll know about it.
+
+    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) {
+      /**
+       * TODO(somewhatabstract): Work out how to allow pointer to go over
+       * the tooltip content to keep it active. This likely requires
+       * pointer events but that would break the obscurement checks we do.
+       * So, careful consideration required. See WB-302.
+       */
+      anchorNode.addEventListener("focusin", this._handleFocusIn);
+      anchorNode.addEventListener("focusout", this._handleFocusOut);
+      anchorNode.addEventListener("mouseenter", this._handleMouseEnter);
+      anchorNode.addEventListener("mouseleave", this._handleMouseLeave);
+      this.props.anchorRef(this._anchorNode);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.forceAnchorFocusivity !== this.props.forceAnchorFocusivity || prevProps.children !== this.props.children) {
+      this._updateFocusivity();
+    }
+  }
+
+  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() {
+    const anchorNode = this._anchorNode;
+
+    if (!anchorNode) {
+      return;
+    }
+
+    const {
+      forceAnchorFocusivity
+    } = this.props;
+    const currentTabIndex = anchorNode.getAttribute("tabindex");
+
+    if (forceAnchorFocusivity && !currentTabIndex) {
+      // Ensure that the anchor point is keyboard focusable so that
+      // we can show the tooltip for visually impaired users that don't
+      // use pointer devices nor assistive technology like screen readers.
+      anchorNode.setAttribute("tabindex", "0");
+      this._weSetFocusivity = true;
+    } else if (!forceAnchorFocusivity && currentTabIndex) {
+      // We may not be forcing it, but we also want to ensure that if we
+      // did before, we remove it.
+      if (this._weSetFocusivity) {
+        anchorNode.removeAttribute("tabindex");
+        this._weSetFocusivity = false;
+      }
+    }
+  }
+
+  _updateActiveState(hovered, focused) {
+    // Update our stored values.
+    this._hovered = hovered;
+    this._focused = focused;
+
+    this._setActiveState(hovered || focused);
+  }
+
+  _clearPendingAction() {
+    if (this._timeoutID) {
+      clearTimeout(this._timeoutID);
+      this._timeoutID = null;
+    }
+  }
+
+  _setActiveState(active, instant) {
+    if (this._stolenFromUs || active !== this.state.active || !this.state.active && this._timeoutID) {
+      // If we are about to lose active state or change it, we need to
+      // cancel any pending action to show ourselves.
+      // So, if active is stolen from us, we are changing active state,
+      // or we are inactive and have a timer, clear the action.
+      this._clearPendingAction();
+    } else if (active === this.state.active && !this._timeoutID) {
+      // Nothing to do if we're already active.
+      return;
+    } // Determine if we are doing things immediately or not.
+
+
+    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) {
+        // Only the very last thing going inactive will giveup
+        // the stolen active state.
+        TRACKER.giveup();
+      }
+
+      this._stolenFromUs = false;
+    } else {
+      const delay = active ? TooltipAppearanceDelay : TooltipDisappearanceDelay;
+      this._timeoutID = setTimeout(() => {
+        this._timeoutID = null;
+
+        this._setActiveState(active, true);
+      }, delay);
+    }
+  }
+
+  _renderAnchorableChildren() {
+    const {
+      children
+    } = this.props;
+    return typeof children === "string" ? /*#__PURE__*/createElement(Text$1, null, children) : children;
+  }
+
+  _renderAccessibleChildren(ids) {
+    const anchorableChildren = this._renderAnchorableChildren();
+
+    return /*#__PURE__*/cloneElement(anchorableChildren, {
+      "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
+    });
+  }
+
+  render() {
+    // We need to make sure we can anchor on our content.
+    // If the content is just a string, we wrap it in a Text element
+    // so as not to affect styling or layout but still have an element
+    // to anchor to.
+    if (this.props.ids) {
+      return this._renderAccessibleChildren(this.props.ids);
+    }
+
+    return this._renderAnchorableChildren();
+  }
+
+}
+TooltipAnchor.defaultProps = {
+  forceAnchorFocusivity: true
+};
+TooltipAnchor.ariaContentId = "aria-content";
+
+// TODO(somewhatabstract): Replace this really basic unique ID work with
+// something SSR-friendly and more robust.
+let tempIdCounter = 0;
+class TooltipTail extends Component {
+  _calculateDimensionsFromPlacement() {
+    const {
+      placement
+    } = this.props; // The trimline, which we draw to make the tail flush to the bubble,
+    // has a thickness of 1. Since the line is drawn centered to the
+    // coordinates, we use an offset of 0.5 so that it properly covers what
+    // we want it to.
+
+    const trimlineOffset = 0.5; // Calculate the three points of the arrow. Depending on the tail's
+    // direction (i.e., the tooltip's "side"), we choose different points,
+    // and set our SVG's bounds differently.
+    //
+    // Note that when the tail points to the left or right, the width/height
+    // are inverted.
+
+    switch (placement) {
+      case "top":
+        return {
+          trimlinePoints: [`0,-${trimlineOffset}`, `${ARROW_WIDTH},-${trimlineOffset}`],
+          points: ["0,0", `${ARROW_WIDTH / 2},${ARROW_HEIGHT}`, `${ARROW_WIDTH},0`],
+          height: ARROW_HEIGHT,
+          width: ARROW_WIDTH
+        };
+
+      case "right":
+        return {
+          trimlinePoints: [`${ARROW_HEIGHT + trimlineOffset},0`, `${ARROW_HEIGHT + trimlineOffset},${ARROW_WIDTH}`],
+          points: [`${ARROW_HEIGHT},0`, `0,${ARROW_WIDTH / 2}`, `${ARROW_HEIGHT},${ARROW_WIDTH}`],
+          width: ARROW_HEIGHT,
+          height: ARROW_WIDTH
+        };
+
+      case "bottom":
+        return {
+          trimlinePoints: [`0, ${ARROW_HEIGHT + trimlineOffset}`, `${ARROW_WIDTH},${ARROW_HEIGHT + trimlineOffset}`],
+          points: [`0, ${ARROW_HEIGHT}`, `${ARROW_WIDTH / 2},0`, `${ARROW_WIDTH},${ARROW_HEIGHT}`],
+          width: ARROW_WIDTH,
+          height: ARROW_HEIGHT
+        };
+
+      case "left":
+        return {
+          trimlinePoints: [`-${trimlineOffset},0`, `-${trimlineOffset},${ARROW_WIDTH}`],
+          points: [`0,0`, `${ARROW_HEIGHT},${ARROW_WIDTH / 2}`, `0,${ARROW_WIDTH}`],
+          width: ARROW_HEIGHT,
+          height: ARROW_WIDTH
+        };
+
+      default:
+        throw new Error(`Unknown placement: ${placement}`);
+    }
+  }
+
+  _getFilterPositioning() {
+    const {
+      placement
+    } = this.props;
+
+    switch (placement) {
+      case "top":
+        return {
+          y: "-50%",
+          x: "-50%",
+          offsetShadowX: 0
+        };
+
+      case "bottom":
+        // No shadow on the arrow as it falls "under" the bubble.
+        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}`);
+    }
+  }
+  /**
+   * Create an SVG filter that applies a blur to an element.
+   * We'll apply it to a dark shape outlining the tooltip, which
+   * will produce the overall effect of a drop-shadow.
+   *
+   * Also, scope its ID by side, so that tooltips with other
+   * "side" values don't end up using the wrong filter from
+   * elsewhere in the document. (The `height` value depends on
+   * which way the arrow is turned!)
+   */
+
+
+  _maybeRenderDropshadow(points) {
+    const position = this._getFilterPositioning();
+
+    if (!position) {
+      return null;
+    }
+
+    const {
+      placement
+    } = this.props;
+    const {
+      y,
+      x,
+      offsetShadowX
+    } = position;
+    const dropShadowFilterId = `tooltip-dropshadow-${placement}-${tempIdCounter++}`;
+    return [/*#__PURE__*/createElement("filter", {
+      key: "filter",
+      id: dropShadowFilterId // Height and width tell the filter how big of a canvas to
+      // draw based on its parent size. i.e. 2 times bigger.
+      // This is so that the diffuse gaussian blur has space to
+      // bleed into.
+      ,
+      width: "200%",
+      height: "200%" // The x and y values tell the filter where, relative to its
+      // parent, it should begin showing its canvas. Without these
+      // the filter would clip at 0,0, which would look really
+      // strange.
+      ,
+      x: x,
+      y: y
+    }, /*#__PURE__*/createElement("feGaussianBlur", {
+      in: "SourceAlpha",
+      stdDeviation: Spacing.xxSmall_6 / 2
+    }), /*#__PURE__*/createElement("feComponentTransfer", null, /*#__PURE__*/createElement("feFuncA", {
+      type: "linear",
+      slope: "0.3"
+    }))),
+    /*#__PURE__*/
+
+    /**
+     * Draw the tooltip arrow and apply the blur filter we created
+     * above, to produce a drop shadow effect.
+     * We move it down a bit with a translation, so that it is what
+     * we want.
+     *
+     * We offset the shadow on the X-axis because for left/right
+     * tails, we move the tail 1px toward the bubble. If we didn't
+     * offset the shadow, it would crash the bubble outline.
+     *
+     * See styles below for why we offset the arrow.
+     */
+    createElement("g", {
+      key: "dropshadow",
+      transform: `translate(${offsetShadowX},5.5)`
+    }, /*#__PURE__*/createElement("polyline", {
+      fill: Colors.offBlack16,
+      points: points.join(" "),
+      stroke: Colors.offBlack32,
+      filter: `url(#${dropShadowFilterId})`
+    }))];
+  }
+
+  _minDistanceFromCorners(placement) {
+    const minDistanceFromCornersForTopBottom = Spacing.medium_16;
+    const minDistanceFromCornersForLeftRight = 7;
+
+    switch (placement) {
+      case "top":
+      case "bottom":
+        return minDistanceFromCornersForTopBottom;
+
+      case "left":
+      case "right":
+        return minDistanceFromCornersForLeftRight;
+
+      default:
+        throw new Error(`Unknown placement: ${placement}`);
+    }
+  }
+
+  _getFullTailWidth() {
+    return ARROW_WIDTH + 2 * MIN_DISTANCE_FROM_CORNERS;
+  }
+
+  _getFullTailHeight() {
+    return ARROW_HEIGHT + DISTANCE_FROM_ANCHOR;
+  }
+
+  _getContainerStyle() {
+    const {
+      placement
+    } = this.props;
+    /**
+     * Ensure the container is sized properly for us to be placed correctly
+     * by the Popper.js code.
+     *
+     * Here we offset the arrow 1px toward the bubble. This ensures the arrow
+     * outline meets the bubble outline and allows the arrow to erase the bubble
+     * outline between the ends of the arrow outline. We do this so that the
+     * arrow outline and bubble outline create a single, seamless outline of
+     * the callout.
+     *
+     * NOTE: The widths and heights refer to the downward-pointing tail
+     * (i.e. placement="top"). When the tail points to the left or right
+     * instead, the width/height are inverted.
+     */
+
+    const fullTailWidth = this._getFullTailWidth();
+
+    const fullTailHeight = this._getFullTailHeight();
+
+    switch (placement) {
+      case "top":
+        return {
+          top: -1,
+          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() {
+    const {
+      placement
+    } = this.props;
+
+    switch (placement) {
+      case "top":
+        return {
+          marginLeft: MIN_DISTANCE_FROM_CORNERS,
+          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() {
+    const {
+      trimlinePoints,
+      points,
+      height,
+      width
+    } = this._calculateDimensionsFromPlacement();
+
+    const {
+      color
+    } = this.props;
+    return /*#__PURE__*/createElement("svg", {
+      className: css(styles.arrow),
+      style: this._getArrowStyle(),
+      width: width,
+      height: height
+    }, this._maybeRenderDropshadow(points), /*#__PURE__*/createElement("polyline", {
+      fill: Colors[color],
+      stroke: Colors[color],
+      points: points.join(" ")
+    }), /*#__PURE__*/createElement("polyline", {
+      // Redraw the stroke on top of the background color,
+      // so that the ends aren't extra dark where they meet
+      // the border of the tooltip.
+      fill: Colors[color],
+      points: points.join(" "),
+      stroke: Colors.offBlack16
+    }), /*#__PURE__*/createElement("polyline", {
+      stroke: Colors[color],
+      points: trimlinePoints.join(" ")
+    }));
+  }
+
+  render() {
+    const {
+      offset,
+      placement,
+      updateRef
+    } = this.props;
+    return /*#__PURE__*/createElement(View, {
+      style: [styles.tailContainer, _extends({}, offset), this._getContainerStyle()],
+      "data-placement": placement,
+      ref: updateRef
+    }, this._renderArrow());
+  }
+
+}
+/**
+ * Some constants to make style generation easier to understand.
+ * NOTE: The widths and heights refer to the downward-pointing tail
+ * (i.e. placement="top"). When the tail points to the left or right instead,
+ * the width/height are inverted.
+ */
+
+TooltipTail.defaultProps = {
+  color: "white"
+};
+const DISTANCE_FROM_ANCHOR = Spacing.xSmall_8;
+const MIN_DISTANCE_FROM_CORNERS = Spacing.xSmall_8;
+const ARROW_WIDTH = Spacing.large_24;
+const ARROW_HEIGHT = Spacing.small_12;
+const styles = StyleSheet.create({
+  /**
+   * Container
+   */
+  tailContainer: {
+    position: "relative",
+    pointerEvents: "none"
+  },
+
+  /**
+   * Arrow
+   */
+  arrow: {
+    // Ensure the dropshadow bleeds outside our bounds.
+    overflow: "visible"
+  }
+});
+
+class TooltipBubble extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      active: false
+    };
+
+    this.handleMouseEnter = () => {
+      this._setActiveState(true);
+    };
+
+    this.handleMouseLeave = () => {
+      this.props.onActiveChanged(false);
+    };
+  }
+
+  _setActiveState(active) {
+    this.setState({
+      active
+    });
+    this.props.onActiveChanged(active);
+  }
+
+  render() {
+    const {
+      id,
+      children,
+      updateBubbleRef,
+      placement,
+      isReferenceHidden,
+      style,
+      updateTailRef,
+      tailOffset
+    } = this.props;
+    return /*#__PURE__*/createElement(View, {
+      id: id,
+      role: "tooltip",
+      "data-placement": placement,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      ref: updateBubbleRef,
+      style: [isReferenceHidden && styles$1.hide, styles$1.bubble, styles$1[`content-${placement}`], style]
+    }, /*#__PURE__*/createElement(View, {
+      style: styles$1.content
+    }, children), /*#__PURE__*/createElement(TooltipTail, {
+      updateRef: updateTailRef,
+      placement: placement,
+      offset: tailOffset
+    }));
+  }
+
+}
+const styles$1 = StyleSheet.create({
+  bubble: {
+    position: "absolute"
+  },
+
+  /**
+   * The hide style ensures that the bounds of the bubble stay unchanged.
+   * This is because popper.js calculates the bubble position based off its
+   * bounds and if we stopped rendering it entirely, it wouldn't know where to
+   * place it when it reappeared.
+   */
+  hide: {
+    pointerEvents: "none",
+    opacity: 0,
+    backgroundColor: "transparent",
+    color: "transparent"
+  },
+
+  /**
+   * Ensure the content and tail are properly arranged.
+   */
+  "content-top": {
+    flexDirection: "column"
+  },
+  "content-right": {
+    flexDirection: "row-reverse"
+  },
+  "content-bottom": {
+    flexDirection: "column-reverse"
+  },
+  "content-left": {
+    flexDirection: "row"
+  },
+  content: {
+    maxWidth: 472,
+    borderRadius: Spacing.xxxSmall_4,
+    border: `solid 1px ${Colors.offBlack16}`,
+    backgroundColor: Colors.white,
+    boxShadow: `0 ${Spacing.xSmall_8}px ${Spacing.xSmall_8}px 0 ${Colors.offBlack8}`,
+    justifyContent: "center"
+  }
+});
+
+/**
+ * This component is used to provide the content that is to be rendered in the
+ * tooltip bubble.
+ */
+class TooltipContent extends Component {
+  _renderTitle() {
+    const {
+      title
+    } = this.props;
+
+    if (title) {
+      if (typeof title === "string") {
+        return /*#__PURE__*/createElement(HeadingSmall, null, title);
+      } else {
+        return title;
+      }
+    }
+
+    return null;
+  }
+
+  _renderChildren() {
+    const {
+      children
+    } = this.props;
+
+    if (typeof children === "string") {
+      return /*#__PURE__*/createElement(LabelMedium, null, children);
+    } else {
+      return children;
+    }
+  }
+
+  render() {
+    const title = this._renderTitle();
+
+    const children = this._renderChildren();
+
+    const containerStyle = title ? styles$2.withTitle : styles$2.withoutTitle;
+    return /*#__PURE__*/createElement(View, {
+      style: containerStyle
+    }, title, title && children && /*#__PURE__*/createElement(Strut, {
+      size: Spacing.xxxSmall_4
+    }), children);
+  }
+
+}
+const styles$2 = StyleSheet.create({
+  withoutTitle: {
+    padding: `10px ${Spacing.medium_16}px`
+  },
+  withTitle: {
+    padding: Spacing.medium_16
+  }
+});
+
+/**
+ * This is a little helper that we can use to wrap the react-popper reference
+ * update methods so that we can convert a regular React ref into a DOM node
+ * as react-popper expects, and also ensure we only update react-popper
+ * on actual changes, and not just renders of the same thing.
+ */
+class RefTracker {
+  constructor() {
+    this.updateRef = ref => {
+      if (ref) {
+        // We only want to update the reference if it is
+        // actually changed. Otherwise, we can trigger another render that
+        // would then update the reference again and just keep looping.
+        const domNode = findDOMNode(ref);
+
+        if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
+          this._lastRef = domNode;
+          this._targetFn && this._targetFn(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 component is a light wrapper for react-popper, allowing us to position
+ * and control the tooltip bubble location and visibility as we need.
+ */
+class TooltipPopper extends Component {
+  constructor(...args) {
+    super(...args);
+    this._bubbleRefTracker = new RefTracker();
+    this._tailRefTracker = new RefTracker();
+  }
+
+  _renderPositionedContent(popperProps) {
+    const {
+      children
+    } = this.props; // We'll hide some complexity from the children here and ensure
+    // that our placement always has a value.
+
+    const placement = // We know that popperProps.placement will only be one of our
+    // supported values, so just cast it.
+    popperProps.placement || this.props.placement; // Just in case the callbacks have changed, let's update our reference
+    // trackers.
+
+    this._bubbleRefTracker.setCallback(popperProps.ref);
+
+    this._tailRefTracker.setCallback(popperProps.arrowProps.ref); // Here we translate from the react-popper's PropperChildrenProps
+    // to our own TooltipBubbleProps.
+
+
+    const bubbleProps = {
+      placement,
+      style: {
+        // NOTE(jeresig): We can't just use `popperProps.style` here
+        // as the Flow type doesn't match Aphrodite's CSS flow props
+        // (as it doesn't camelCase props). So we just copy over the
+        // props that we need, instead.
+        top: popperProps.style.top,
+        left: popperProps.style.left,
+        bottom: popperProps.style.bottom,
+        right: popperProps.style.right,
+        position: popperProps.style.position,
+        transform: popperProps.style.transform
+      },
+      updateBubbleRef: this._bubbleRefTracker.updateRef,
+      tailOffset: {
+        bottom: popperProps.arrowProps.style.bottom,
+        right: popperProps.arrowProps.style.right,
+        top: popperProps.arrowProps.style.top,
+        left: popperProps.arrowProps.style.left,
+        transform: popperProps.arrowProps.style.transform
+      },
+      updateTailRef: this._tailRefTracker.updateRef,
+      isReferenceHidden: popperProps.isReferenceHidden
+    };
+    return children(bubbleProps);
+  }
+
+  render() {
+    const {
+      anchorElement,
+      placement
+    } = this.props;
+    return /*#__PURE__*/createElement(Popper, {
+      referenceElement: anchorElement,
+      placement: placement,
+      modifiers: [{
+        name: "preventOverflow",
+        options: {
+          rootBoundary: "document"
+        }
+      }]
+    }, props => this._renderPositionedContent(props));
+  }
+
+}
+
+/**
+ * The Tooltip component provides the means to anchor some additional
+ * information to some content. The additional information is shown in a
+ * callout that hovers above the page content. This additional information is
+ * invoked by hovering over the anchored content, or focusing all or part of the
+ * anchored content.
+ *
+ * This component is structured as follows:
+ *
+ * Tooltip (this component)
+ * - TooltipAnchor (provides hover/focus behaviors on anchored content)
+ *   - TooltipPortalMounter (creates portal into which the callout is rendered)
+ * --------------------------- [PORTAL BOUNDARY] ------------------------------
+ * - TooltipPopper (provides positioning for the callout using react-popper)
+ *   - TooltipBubble (renders the callout borders, background and shadow)
+ *     - TooltipContent (renders the callout content; the actual information)
+ *     - TooltipTail (renders the callout tail and shadow that points from the
+ *                     callout to the anchor content)
+ */
+class Tooltip extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      active: false,
+      activeBubble: false,
+      anchorElement: null
+    };
+  }
+
+  _updateAnchorElement(ref) {
+    if (ref && ref !== this.state.anchorElement) {
+      this.setState({
+        anchorElement: ref
+      });
+    }
+  }
+
+  _renderBubbleContent() {
+    const {
+      title,
+      content
+    } = this.props;
+
+    if (typeof content === "string") {
+      return /*#__PURE__*/createElement(TooltipContent, {
+        title: title
+      }, content);
+    } else if (title) {
+      return /*#__PURE__*/cloneElement(content, {
+        title
+      });
+    } else {
+      return content;
+    }
+  }
+
+  _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;
+    return /*#__PURE__*/createElement(TooltipPopper, {
+      anchorElement: this.state.anchorElement,
+      placement: placement
+    }, props => /*#__PURE__*/createElement(TooltipBubble, {
+      id: bubbleId,
+      style: props.style,
+      tailOffset: props.tailOffset,
+      isReferenceHidden: props.isReferenceHidden,
+      placement: props.placement,
+      updateTailRef: props.updateTailRef,
+      updateBubbleRef: props.updateBubbleRef,
+      onActiveChanged: active => this.setState({
+        activeBubble: active
+      })
+    }, this._renderBubbleContent()));
+  }
+
+  _getHost() {
+    const {
+      anchorElement
+    } = this.state;
+    return maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
+  }
+
+  _renderTooltipAnchor(ids) {
+    const {
+      children,
+      forceAnchorFocusivity
+    } = this.props;
+    const {
+      active,
+      activeBubble
+    } = this.state;
+
+    const popperHost = this._getHost(); // TODO(kevinb): update to use ReactPopper's React 16-friendly syntax
+
+
+    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(TooltipAnchor, {
+      forceAnchorFocusivity: forceAnchorFocusivity,
+      anchorRef: r => this._updateAnchorElement(r),
+      onActiveChanged: active => this.setState({
+        active
+      }),
+      ids: ids
+    }, children), popperHost && (active || activeBubble) && /*#__PURE__*/createPortal(this._renderPopper(ids), popperHost));
+  }
+
+  render() {
+    const {
+      id
+    } = this.props;
+
+    if (id) {
+      // Let's bypass the extra weight of an id provider since we don't
+      // need it.
+      return this._renderTooltipAnchor();
+    } else {
+      return /*#__PURE__*/createElement(UniqueIDProvider, {
+        scope: "tooltip",
+        mockOnFirstRender: true
+      }, ids => this._renderTooltipAnchor(ids));
+    }
+  }
+
+}
+Tooltip.defaultProps = {
+  forceAnchorFocusivity: true,
+  placement: "top"
+};
+Tooltip.ariaContentId = "aria-content";
+
+export default Tooltip;
+export { TooltipContent, TooltipPopper, TooltipTail };