@khanacademy/wonder-blocks-tooltip 1.3.10 → 1.3.11

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @khanacademy/wonder-blocks-tooltip
 
+## 1.3.11
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+-   @khanacademy/wonder-blocks-layout@1.4.9
+-   @khanacademy/wonder-blocks-modal@2.3.1
+-   @khanacademy/wonder-blocks-typography@1.1.31
+
 ## 1.3.10
 
 ### Patch Changes

package/dist/es/index.js

@@ -10,36 +10,6 @@ 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 = [];
@@ -48,13 +18,6 @@ class ActiveTracker {
   _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;
@@ -62,7 +25,6 @@ class ActiveTracker {
 
     for (const anchor of this._subscribers) {
       if (anchor === who) {
-        // We don't need to notify the thief.
         continue;
       }
 
@@ -71,23 +33,10 @@ class ActiveTracker {
 
     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) {
@@ -107,31 +56,17 @@ class ActiveTracker {
 
 }
 
-/**
- * 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 React.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._stolenFromUs = this.state.active || !!this._timeoutID;
+      this._focused = false;
 
       this._setActiveState(false, true);
     };
@@ -153,20 +88,7 @@ class TooltipAnchor extends React.Component {
     };
 
     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();
 
@@ -182,8 +104,7 @@ class TooltipAnchor extends React.Component {
   }
 
   componentDidMount() {
-    const anchorNode = ReactDOM.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.
+    const anchorNode = ReactDOM.findDOMNode(this);
 
     if (anchorNode instanceof Text) {
       throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.");
@@ -195,12 +116,6 @@ class TooltipAnchor extends React.Component {
     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);
@@ -249,14 +164,9 @@ class TooltipAnchor extends React.Component {
     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;
@@ -265,7 +175,6 @@ class TooltipAnchor extends React.Component {
   }
 
   _updateActiveState(hovered, focused) {
-    // Update our stored values.
     this._hovered = hovered;
     this._focused = focused;
 
@@ -281,16 +190,10 @@ class TooltipAnchor extends React.Component {
 
   _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);
 
@@ -307,8 +210,6 @@ class TooltipAnchor extends React.Component {
       this.props.onActiveChanged(active);
 
       if (!this._stolenFromUs && !active) {
-        // Only the very last thing going inactive will giveup
-        // the stolen active state.
         TRACKER.giveup();
       }
 
@@ -327,22 +228,18 @@ class TooltipAnchor extends React.Component {
     const {
       children
     } = this.props;
-    return typeof children === "string" ? /*#__PURE__*/React.createElement(Text$1, null, children) : children;
+    return typeof children === "string" ? React.createElement(Text$1, null, children) : children;
   }
 
   _renderAccessibleChildren(ids) {
     const anchorableChildren = this._renderAnchorableChildren();
 
-    return /*#__PURE__*/React.cloneElement(anchorableChildren, {
+    return React.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);
     }
@@ -356,24 +253,13 @@ TooltipAnchor.defaultProps = {
 };
 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 React.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.
+    } = this.props;
+    const trimlineOffset = 0.5;
 
     switch (placement) {
       case "top":
@@ -427,7 +313,6 @@ class TooltipTail extends React.Component {
         };
 
       case "bottom":
-        // No shadow on the arrow as it falls "under" the bubble.
         return null;
 
       case "left":
@@ -448,17 +333,6 @@ class TooltipTail extends React.Component {
         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();
@@ -476,46 +350,23 @@ class TooltipTail extends React.Component {
       offsetShadowX
     } = position;
     const dropShadowFilterId = `tooltip-dropshadow-${placement}-${tempIdCounter++}`;
-    return [/*#__PURE__*/React.createElement("filter", {
+    return [React.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.
-      ,
+      id: dropShadowFilterId,
       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.
-      ,
+      height: "200%",
       x: x,
       y: y
-    }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+    }, React.createElement("feGaussianBlur", {
       in: "SourceAlpha",
       stdDeviation: Spacing.xxSmall_6 / 2
-    }), /*#__PURE__*/React.createElement("feComponentTransfer", null, /*#__PURE__*/React.createElement("feFuncA", {
+    }), React.createElement("feComponentTransfer", null, React.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.
-     */
-    React.createElement("g", {
+    }))), React.createElement("g", {
       key: "dropshadow",
       transform: `translate(${offsetShadowX},5.5)`
-    }, /*#__PURE__*/React.createElement("polyline", {
+    }, React.createElement("polyline", {
       fill: Colors.offBlack16,
       points: points.join(" "),
       stroke: Colors.offBlack32,
@@ -553,20 +404,6 @@ class TooltipTail extends React.Component {
     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();
 
@@ -656,23 +493,20 @@ class TooltipTail extends React.Component {
     const {
       color
     } = this.props;
-    return /*#__PURE__*/React.createElement("svg", {
+    return React.createElement("svg", {
       className: css(styles$2.arrow),
       style: this._getArrowStyle(),
       width: width,
       height: height
-    }, this._maybeRenderDropshadow(points), /*#__PURE__*/React.createElement("polyline", {
+    }, this._maybeRenderDropshadow(points), React.createElement("polyline", {
       fill: Colors[color],
       stroke: Colors[color],
       points: points.join(" ")
-    }), /*#__PURE__*/React.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.
+    }), React.createElement("polyline", {
       fill: Colors[color],
       points: points.join(" "),
       stroke: Colors.offBlack16
-    }), /*#__PURE__*/React.createElement("polyline", {
+    }), React.createElement("polyline", {
       stroke: Colors[color],
       points: trimlinePoints.join(" ")
     }));
@@ -684,7 +518,7 @@ class TooltipTail extends React.Component {
       placement,
       updateRef
     } = this.props;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       style: [styles$2.tailContainer, _extends({}, offset), this._getContainerStyle()],
       "data-placement": placement,
       ref: updateRef
@@ -692,13 +526,6 @@ class TooltipTail extends React.Component {
   }
 
 }
-/**
- * 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"
 };
@@ -707,19 +534,11 @@ const MIN_DISTANCE_FROM_CORNERS = Spacing.xSmall_8;
 const ARROW_WIDTH = Spacing.large_24;
 const ARROW_HEIGHT = Spacing.small_12;
 const styles$2 = StyleSheet.create({
-  /**
-   * Container
-   */
   tailContainer: {
     position: "relative",
     pointerEvents: "none"
   },
-
-  /**
-   * Arrow
-   */
   arrow: {
-    // Ensure the dropshadow bleeds outside our bounds.
     overflow: "visible"
   }
 });
@@ -758,7 +577,7 @@ class TooltipBubble extends React.Component {
       updateTailRef,
       tailOffset
     } = this.props;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       id: id,
       role: "tooltip",
       "data-placement": placement,
@@ -766,9 +585,9 @@ class TooltipBubble extends React.Component {
       onMouseLeave: this.handleMouseLeave,
       ref: updateBubbleRef,
       style: [isReferenceHidden && styles$1.hide, styles$1.bubble, styles$1[`content-${placement}`], style]
-    }, /*#__PURE__*/React.createElement(View, {
+    }, React.createElement(View, {
       style: styles$1.content
-    }, children), /*#__PURE__*/React.createElement(TooltipTail, {
+    }, children), React.createElement(TooltipTail, {
       updateRef: updateTailRef,
       placement: placement,
       offset: tailOffset
@@ -780,23 +599,12 @@ 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"
   },
@@ -819,10 +627,6 @@ const styles$1 = StyleSheet.create({
   }
 });
 
-/**
- * This component is used to provide the content that is to be rendered in the
- * tooltip bubble.
- */
 class TooltipContent extends React.Component {
   _renderTitle() {
     const {
@@ -831,7 +635,7 @@ class TooltipContent extends React.Component {
 
     if (title) {
       if (typeof title === "string") {
-        return /*#__PURE__*/React.createElement(HeadingSmall, null, title);
+        return React.createElement(HeadingSmall, null, title);
       } else {
         return title;
       }
@@ -846,7 +650,7 @@ class TooltipContent extends React.Component {
     } = this.props;
 
     if (typeof children === "string") {
-      return /*#__PURE__*/React.createElement(LabelMedium, null, children);
+      return React.createElement(LabelMedium, null, children);
     } else {
       return children;
     }
@@ -858,9 +662,9 @@ class TooltipContent extends React.Component {
     const children = this._renderChildren();
 
     const containerStyle = title ? styles.withTitle : styles.withoutTitle;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       style: containerStyle
-    }, title, title && children && /*#__PURE__*/React.createElement(Strut, {
+    }, title, title && children && React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }), children);
   }
@@ -875,19 +679,10 @@ const styles = StyleSheet.create({
   }
 });
 
-/**
- * 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 = ReactDOM.findDOMNode(ref);
 
         if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
@@ -914,10 +709,6 @@ class RefTracker {
 
 }
 
-/**
- * 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 React.Component {
   constructor(...args) {
     super(...args);
@@ -928,27 +719,16 @@ class TooltipPopper extends React.Component {
   _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.props;
+    const placement = popperProps.placement || this.props.placement;
 
     this._bubbleRefTracker.setCallback(popperProps.ref);
 
-    this._tailRefTracker.setCallback(popperProps.arrowProps.ref); // Here we translate from the react-popper's PropperChildrenProps
-    // to our own TooltipBubbleProps.
-
+    this._tailRefTracker.setCallback(popperProps.arrowProps.ref);
 
     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,
@@ -975,7 +755,7 @@ class TooltipPopper extends React.Component {
       anchorElement,
       placement
     } = this.props;
-    return /*#__PURE__*/React.createElement(Popper, {
+    return React.createElement(Popper, {
       referenceElement: anchorElement,
       strategy: "fixed",
       placement: placement,
@@ -990,25 +770,6 @@ class TooltipPopper extends React.Component {
 
 }
 
-/**
- * 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 React.Component {
   constructor(...args) {
     super(...args);
@@ -1034,11 +795,11 @@ class Tooltip extends React.Component {
     } = this.props;
 
     if (typeof content === "string") {
-      return /*#__PURE__*/React.createElement(TooltipContent, {
+      return React.createElement(TooltipContent, {
         title: title
       }, content);
     } else if (title) {
-      return /*#__PURE__*/React.cloneElement(content, {
+      return React.cloneElement(content, {
         title
       });
     } else {
@@ -1059,10 +820,10 @@ class Tooltip extends React.Component {
     const {
       placement
     } = this.props;
-    return /*#__PURE__*/React.createElement(TooltipPopper, {
+    return React.createElement(TooltipPopper, {
       anchorElement: this.state.anchorElement,
       placement: placement
-    }, props => /*#__PURE__*/React.createElement(TooltipBubble, {
+    }, props => React.createElement(TooltipBubble, {
       id: bubbleId,
       style: props.style,
       tailOffset: props.tailOffset,
@@ -1093,17 +854,16 @@ class Tooltip extends React.Component {
       activeBubble
     } = this.state;
 
-    const popperHost = this._getHost(); // TODO(kevinb): update to use ReactPopper's React 16-friendly syntax
-
+    const popperHost = this._getHost();
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipAnchor, {
+    return React.createElement(React.Fragment, null, React.createElement(TooltipAnchor, {
       forceAnchorFocusivity: forceAnchorFocusivity,
       anchorRef: r => this._updateAnchorElement(r),
       onActiveChanged: active => this.setState({
         active
       }),
       ids: ids
-    }, children), popperHost && (active || activeBubble) && /*#__PURE__*/ReactDOM.createPortal(this._renderPopper(ids), popperHost));
+    }, children), popperHost && (active || activeBubble) && ReactDOM.createPortal(this._renderPopper(ids), popperHost));
   }
 
   render() {
@@ -1112,11 +872,9 @@ class Tooltip extends React.Component {
     } = 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__*/React.createElement(UniqueIDProvider, {
+      return React.createElement(UniqueIDProvider, {
         scope: "tooltip",
         mockOnFirstRender: true
       }, ids => this._renderTooltipAnchor(ids));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,11 +17,11 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
-    "@khanacademy/wonder-blocks-layout": "^1.4.8",
-    "@khanacademy/wonder-blocks-modal": "^2.3.0",
+    "@khanacademy/wonder-blocks-core": "^4.3.1",
+    "@khanacademy/wonder-blocks-layout": "^1.4.9",
+    "@khanacademy/wonder-blocks-modal": "^2.3.1",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.30"
+    "@khanacademy/wonder-blocks-typography": "^1.1.31"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -31,6 +31,6 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   }
 }

package/src/util/__tests__/active-tracker.test.js

@@ -1,5 +1,6 @@
 // @flow
-import ActiveTracker, {IActiveTrackerSubscriber} from "../active-tracker.js";
+import ActiveTracker from "../active-tracker.js";
+import type {IActiveTrackerSubscriber} from "../active-tracker.js";
 
 class MockSubscriber implements IActiveTrackerSubscriber {
     activeStateStolen = jest.fn();