@khanacademy/wonder-blocks-tooltip 1.4.3 → 1.4.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-tooltip
 
+## 1.4.5
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-modal@3.0.6
+
+## 1.4.4
+
+### Patch Changes
+
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-core@4.6.2
+    -   @khanacademy/wonder-blocks-modal@3.0.5
+    -   @khanacademy/wonder-blocks-layout@1.4.15
+    -   @khanacademy/wonder-blocks-typography@1.1.37
+
 ## 1.4.3
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,913 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
+var aphrodite = require('aphrodite');
+var Colors = require('@khanacademy/wonder-blocks-color');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var _extends = require('@babel/runtime/helpers/extends');
+var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var reactPopper = require('react-popper');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var Colors__default = /*#__PURE__*/_interopDefaultLegacy(Colors);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+
+class ActiveTracker {
+  constructor() {
+    this._subscribers = [];
+  }
+
+  _getIndex(who) {
+    return this._subscribers.findIndex(v => v === who);
+  }
+
+  steal(who) {
+    const wasActive = !!this._active;
+    this._active = true;
+
+    for (const anchor of this._subscribers) {
+      if (anchor === who) {
+        continue;
+      }
+
+      anchor.activeStateStolen();
+    }
+
+    return wasActive;
+  }
+
+  giveup() {
+    this._active = false;
+  }
+
+  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;
+  }
+
+}
+
+const TooltipAppearanceDelay = 100;
+const TooltipDisappearanceDelay = 75;
+
+const TRACKER = new ActiveTracker();
+class TooltipAnchor extends React__namespace.Component {
+  constructor(props) {
+    super(props);
+
+    this.activeStateStolen = () => {
+      this._stolenFromUs = this.state.active || !!this._timeoutID;
+      this._focused = false;
+
+      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 => {
+      if (e.key === "Escape" && this.state.active) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this._updateActiveState(false, false);
+      }
+    };
+
+    this._focused = false;
+    this._hovered = false;
+    this.state = {
+      active: false
+    };
+  }
+
+  componentDidMount() {
+    const anchorNode = ReactDOM__namespace.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);
+      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) {
+      anchorNode.setAttribute("tabindex", "0");
+      this._weSetFocusivity = true;
+    } else if (!forceAnchorFocusivity && currentTabIndex) {
+      if (this._weSetFocusivity) {
+        anchorNode.removeAttribute("tabindex");
+        this._weSetFocusivity = false;
+      }
+    }
+  }
+
+  _updateActiveState(hovered, focused) {
+    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) {
+      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() {
+    const {
+      children
+    } = this.props;
+    return typeof children === "string" ? React__namespace.createElement(wonderBlocksCore.Text, null, children) : children;
+  }
+
+  _renderAccessibleChildren(ids) {
+    const anchorableChildren = this._renderAnchorableChildren();
+
+    return React__namespace.cloneElement(anchorableChildren, {
+      "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
+    });
+  }
+
+  render() {
+    if (this.props.ids) {
+      return this._renderAccessibleChildren(this.props.ids);
+    }
+
+    return this._renderAnchorableChildren();
+  }
+
+}
+TooltipAnchor.defaultProps = {
+  forceAnchorFocusivity: true
+};
+TooltipAnchor.ariaContentId = "aria-content";
+
+let tempIdCounter = 0;
+class TooltipTail extends React__namespace.Component {
+  _calculateDimensionsFromPlacement() {
+    const {
+      placement
+    } = this.props;
+    const trimlineOffset = 0.5;
+
+    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":
+        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) {
+    const position = this._getFilterPositioning();
+
+    if (!position) {
+      return null;
+    }
+
+    const {
+      placement
+    } = this.props;
+    const {
+      y,
+      x,
+      offsetShadowX
+    } = position;
+    const dropShadowFilterId = `tooltip-dropshadow-${placement}-${tempIdCounter++}`;
+    return [React__namespace.createElement("filter", {
+      key: "filter",
+      id: dropShadowFilterId,
+      width: "200%",
+      height: "200%",
+      x: x,
+      y: y
+    }, React__namespace.createElement("feGaussianBlur", {
+      in: "SourceAlpha",
+      stdDeviation: Spacing__default["default"].xxSmall_6 / 2
+    }), React__namespace.createElement("feComponentTransfer", null, React__namespace.createElement("feFuncA", {
+      type: "linear",
+      slope: "0.3"
+    }))), React__namespace.createElement("g", {
+      key: "dropshadow",
+      transform: `translate(${offsetShadowX},5.5)`
+    }, React__namespace.createElement("polyline", {
+      fill: Colors__default["default"].offBlack16,
+      points: points.join(" "),
+      stroke: Colors__default["default"].offBlack32,
+      filter: `url(#${dropShadowFilterId})`
+    }))];
+  }
+
+  _getFullTailWidth() {
+    return ARROW_WIDTH + 2 * MIN_DISTANCE_FROM_CORNERS;
+  }
+
+  _getFullTailHeight() {
+    return ARROW_HEIGHT + DISTANCE_FROM_ANCHOR;
+  }
+
+  _getContainerStyle() {
+    const {
+      placement
+    } = this.props;
+
+    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 React__namespace.createElement("svg", {
+      className: aphrodite.css(styles$2.arrow),
+      style: this._getArrowStyle(),
+      width: width,
+      height: height,
+      "aria-hidden": true
+    }, this._maybeRenderDropshadow(points), React__namespace.createElement("polyline", {
+      fill: Colors__default["default"][color],
+      stroke: Colors__default["default"][color],
+      points: points.join(" ")
+    }), React__namespace.createElement("polyline", {
+      fill: Colors__default["default"][color],
+      points: points.join(" "),
+      stroke: Colors__default["default"].offBlack16
+    }), React__namespace.createElement("polyline", {
+      stroke: Colors__default["default"][color],
+      points: trimlinePoints.join(" ")
+    }));
+  }
+
+  render() {
+    const {
+      offset,
+      placement,
+      updateRef
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$2.tailContainer, _extends__default["default"]({}, offset), this._getContainerStyle()],
+      "data-placement": placement,
+      ref: updateRef
+    }, this._renderArrow());
+  }
+
+}
+TooltipTail.defaultProps = {
+  color: "white"
+};
+const DISTANCE_FROM_ANCHOR = Spacing__default["default"].xSmall_8;
+const MIN_DISTANCE_FROM_CORNERS = Spacing__default["default"].xSmall_8;
+const ARROW_WIDTH = Spacing__default["default"].large_24;
+const ARROW_HEIGHT = Spacing__default["default"].small_12;
+const styles$2 = aphrodite.StyleSheet.create({
+  tailContainer: {
+    position: "relative",
+    pointerEvents: "none"
+  },
+  arrow: {
+    overflow: "visible"
+  }
+});
+
+class TooltipBubble extends React__namespace.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 React__namespace.createElement(wonderBlocksCore.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]
+    }, React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$1.content
+    }, children), React__namespace.createElement(TooltipTail, {
+      updateRef: updateTailRef,
+      placement: placement,
+      offset: tailOffset
+    }));
+  }
+
+}
+const styles$1 = aphrodite.StyleSheet.create({
+  bubble: {
+    position: "absolute"
+  },
+  hide: {
+    pointerEvents: "none",
+    opacity: 0,
+    backgroundColor: "transparent",
+    color: "transparent"
+  },
+  "content-top": {
+    flexDirection: "column"
+  },
+  "content-right": {
+    flexDirection: "row-reverse"
+  },
+  "content-bottom": {
+    flexDirection: "column-reverse"
+  },
+  "content-left": {
+    flexDirection: "row"
+  },
+  content: {
+    maxWidth: 472,
+    borderRadius: Spacing__default["default"].xxxSmall_4,
+    border: `solid 1px ${Colors__default["default"].offBlack16}`,
+    backgroundColor: Colors__default["default"].white,
+    boxShadow: `0 ${Spacing__default["default"].xSmall_8}px ${Spacing__default["default"].xSmall_8}px 0 ${Colors__default["default"].offBlack8}`,
+    justifyContent: "center"
+  }
+});
+
+class TooltipContent extends React__namespace.Component {
+  _renderTitle() {
+    const {
+      title
+    } = this.props;
+
+    if (title) {
+      if (typeof title === "string") {
+        return React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, title);
+      } else {
+        return title;
+      }
+    }
+
+    return null;
+  }
+
+  _renderChildren() {
+    const {
+      children
+    } = this.props;
+
+    if (typeof children === "string") {
+      return React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, children);
+    } else {
+      return children;
+    }
+  }
+
+  render() {
+    const title = this._renderTitle();
+
+    const children = this._renderChildren();
+
+    const containerStyle = title ? styles.withTitle : styles.withoutTitle;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      style: containerStyle
+    }, title, title && children && React__namespace.createElement(wonderBlocksLayout.Strut, {
+      size: Spacing__default["default"].xxxSmall_4
+    }), children);
+  }
+
+}
+const styles = aphrodite.StyleSheet.create({
+  withoutTitle: {
+    padding: `10px ${Spacing__default["default"].medium_16}px`
+  },
+  withTitle: {
+    padding: Spacing__default["default"].medium_16
+  }
+});
+
+class RefTracker {
+  constructor() {
+    this.updateRef = ref => {
+      if (ref) {
+        const domNode = ReactDOM__namespace.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);
+        }
+      }
+    };
+  }
+
+}
+
+class TooltipPopper extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this._bubbleRefTracker = new RefTracker();
+    this._tailRefTracker = new RefTracker();
+  }
+
+  _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: {
+        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 React__namespace.createElement(reactPopper.Popper, {
+      referenceElement: anchorElement,
+      strategy: "fixed",
+      placement: placement,
+      modifiers: [{
+        name: "preventOverflow",
+        options: {
+          rootBoundary: "viewport"
+        }
+      }]
+    }, props => this._renderPositionedContent(props));
+  }
+
+}
+
+class Tooltip extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      active: false,
+      activeBubble: false,
+      anchorElement: null
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    return {
+      active: typeof props.opened === "boolean" ? props.opened : state.active
+    };
+  }
+
+  _updateAnchorElement(ref) {
+    if (ref && ref !== this.state.anchorElement) {
+      this.setState({
+        anchorElement: ref
+      });
+    }
+  }
+
+  _renderBubbleContent() {
+    const {
+      title,
+      content
+    } = this.props;
+
+    if (typeof content === "string") {
+      return React__namespace.createElement(TooltipContent, {
+        title: title
+      }, content);
+    } else if (title) {
+      return React__namespace.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 React__namespace.createElement(TooltipPopper, {
+      anchorElement: this.state.anchorElement,
+      placement: placement
+    }, props => React__namespace.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 wonderBlocksModal.maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
+  }
+
+  _renderTooltipAnchor(ids) {
+    const {
+      children,
+      forceAnchorFocusivity
+    } = this.props;
+    const {
+      active,
+      activeBubble
+    } = this.state;
+
+    const popperHost = this._getHost();
+
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(TooltipAnchor, {
+      forceAnchorFocusivity: forceAnchorFocusivity,
+      anchorRef: r => this._updateAnchorElement(r),
+      onActiveChanged: active => this.setState({
+        active
+      }),
+      ids: ids
+    }, children), popperHost && (active || activeBubble) && ReactDOM__namespace.createPortal(this._renderPopper(ids), popperHost));
+  }
+
+  render() {
+    const {
+      id
+    } = this.props;
+
+    if (id) {
+      return this._renderTooltipAnchor();
+    } else {
+      return React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
+        scope: "tooltip",
+        mockOnFirstRender: true
+      }, ids => this._renderTooltipAnchor(ids));
+    }
+  }
+
+}
+Tooltip.defaultProps = {
+  forceAnchorFocusivity: true,
+  placement: "top"
+};
+Tooltip.ariaContentId = "aria-content";
+
+exports.TooltipContent = TooltipContent;
+exports.TooltipPopper = TooltipPopper;
+exports.TooltipTail = TooltipTail;
+exports["default"] = Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,11 +17,11 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.1",
-    "@khanacademy/wonder-blocks-layout": "^1.4.14",
-    "@khanacademy/wonder-blocks-modal": "^3.0.4",
+    "@khanacademy/wonder-blocks-core": "^4.6.2",
+    "@khanacademy/wonder-blocks-layout": "^1.4.15",
+    "@khanacademy/wonder-blocks-modal": "^3.0.6",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.36"
+    "@khanacademy/wonder-blocks-typography": "^1.1.37"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -31,6 +31,6 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.6.0"
+    "wb-dev-build-settings": "^0.7.0"
   }
 }