@khanacademy/wonder-blocks-tooltip 2.0.5 → 2.0.7

package/dist/index.js

@@ -16,21 +16,21 @@ 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]; }
+    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);
+    }
+    n["default"] = e;
+    return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
@@ -38,30 +38,15 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var Colors__default = /*#__PURE__*/_interopDefaultLegacy(Colors);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 
-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) {
@@ -71,11 +56,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.");
     }
@@ -85,59 +70,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__namespace.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__namespace.findDOMNode(this);
     if (anchorNode instanceof Text) {
       throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.");
@@ -152,13 +132,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();
     }
@@ -173,8 +153,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;
@@ -192,19 +172,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) {
@@ -232,27 +212,26 @@ let TooltipAnchor = function (_ref) {
         this._setActiveState(active, true);
       }, delay);
     }
-  };
-  _proto._renderAnchorableChildren = function _renderAnchorableChildren() {
+  }
+  _renderAnchorableChildren() {
     const {
       children
     } = this.props;
     return typeof children === "string" ? React__namespace.createElement(wonderBlocksCore.Text, null, children) : children;
-  };
-  _proto._renderAccessibleChildren = function _renderAccessibleChildren(ids) {
+  }
+  _renderAccessibleChildren(ids) {
     const anchorableChildren = this._renderAnchorableChildren();
     return React__namespace.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__namespace.Component);
+  }
+}
 TooltipAnchor.defaultProps = {
   forceAnchorFocusivity: true
 };
@@ -274,13 +253,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__namespace.Component {
+  _calculateDimensionsFromPlacement() {
     const {
       placement
     } = this.props;
@@ -317,8 +291,8 @@ let TooltipTail = function (_React$Component) {
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  };
-  _proto._getFilterPositioning = function _getFilterPositioning() {
+  }
+  _getFilterPositioning() {
     const {
       placement
     } = this.props;
@@ -346,8 +320,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;
@@ -383,14 +357,14 @@ let TooltipTail = function (_React$Component) {
       stroke: Colors__default["default"].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;
@@ -424,8 +398,8 @@ let TooltipTail = function (_React$Component) {
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  };
-  _proto._getArrowStyle = function _getArrowStyle() {
+  }
+  _getArrowStyle() {
     const {
       placement
     } = this.props;
@@ -457,8 +431,8 @@ let TooltipTail = function (_React$Component) {
       default:
         throw new Error(`Unknown placement: ${placement}`);
     }
-  };
-  _proto._renderArrow = function _renderArrow() {
+  }
+  _renderArrow() {
     const {
       trimlinePoints,
       points,
@@ -486,8 +460,8 @@ let TooltipTail = function (_React$Component) {
       stroke: Colors__default["default"][color],
       points: trimlinePoints.join(" ")
     }));
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       offset,
       placement,
@@ -498,9 +472,8 @@ let TooltipTail = function (_React$Component) {
       "data-placement": placement,
       ref: updateRef
     }, this._renderArrow());
-  };
-  return TooltipTail;
-}(React__namespace.Component);
+  }
+}
 TooltipTail.defaultProps = {
   color: "white"
 };
@@ -518,30 +491,26 @@ const styles$2 = aphrodite.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__namespace.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,
@@ -567,9 +536,8 @@ let TooltipBubble = function (_React$Component) {
       placement: placement,
       offset: tailOffset
     }));
-  };
-  return TooltipBubble;
-}(React__namespace.Component);
+  }
+}
 const styles$1 = aphrodite.StyleSheet.create({
   bubble: {
     position: "absolute"
@@ -602,13 +570,8 @@ const styles$1 = aphrodite.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__namespace.Component {
+  _renderTitle() {
     const {
       title
     } = this.props;
@@ -620,8 +583,8 @@ let TooltipContent = function (_React$Component) {
       }
     }
     return null;
-  };
-  _proto._renderChildren = function _renderChildren() {
+  }
+  _renderChildren() {
     const {
       children
     } = this.props;
@@ -630,8 +593,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;
@@ -640,9 +603,8 @@ let TooltipContent = function (_React$Component) {
     }, title, title && children && React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: Spacing__default["default"].xxxSmall_4
     }), children);
-  };
-  return TooltipContent;
-}(React__namespace.Component);
+  }
+}
 const styles = aphrodite.StyleSheet.create({
   withoutTitle: {
     padding: `10px ${Spacing__default["default"].medium_16}px`
@@ -652,43 +614,41 @@ const styles = aphrodite.StyleSheet.create({
   }
 });
 
-let RefTracker = function RefTracker() {
-  this._lastRef = void 0;
-  this._targetFn = void 0;
-  this.updateRef = ref => {
-    if (ref) {
-      const domNode = ReactDOM__namespace.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__namespace.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__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this._bubbleRefTracker = new RefTracker();
+    this._tailRefTracker = new RefTracker();
+  }
+  _renderPositionedContent(popperProps) {
     const {
       children
     } = this.props;
@@ -717,8 +677,8 @@ let TooltipPopper = function (_React$Component) {
       isReferenceHidden: popperProps.isReferenceHidden
     };
     return children(bubbleProps);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       anchorElement,
       placement
@@ -734,36 +694,31 @@ let TooltipPopper = function (_React$Component) {
         }
       }]
     }, props => this._renderPositionedContent(props));
-  };
-  return TooltipPopper;
-}(React__namespace.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__namespace.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
@@ -779,8 +734,8 @@ let Tooltip = function (_React$Component) {
     } else {
       return content;
     }
-  };
-  _proto._renderPopper = function _renderPopper(ids) {
+  }
+  _renderPopper(ids) {
     const {
       id
     } = this.props;
@@ -806,14 +761,14 @@ let Tooltip = function (_React$Component) {
         activeBubble: active
       })
     }, this._renderBubbleContent()));
-  };
-  _proto._getHost = function _getHost() {
+  }
+  _getHost() {
     const {
       anchorElement
     } = this.state;
     return wonderBlocksModal.maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
-  };
-  _proto._renderTooltipAnchor = function _renderTooltipAnchor(ids) {
+  }
+  _renderTooltipAnchor(ids) {
     const {
       children,
       forceAnchorFocusivity
@@ -831,8 +786,8 @@ let Tooltip = function (_React$Component) {
       }),
       ids: ids
     }, children), popperHost && (active || activeBubble) && ReactDOM__namespace.createPortal(this._renderPopper(ids), popperHost));
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       id
     } = this.props;
@@ -844,9 +799,8 @@ let Tooltip = function (_React$Component) {
         mockOnFirstRender: true
       }, ids => this._renderTooltipAnchor(ids));
     }
-  };
-  return Tooltip;
-}(React__namespace.Component);
+  }
+}
 Tooltip.defaultProps = {
   forceAnchorFocusivity: true,
   placement: "top"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,11 +17,11 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.0.3",
-    "@khanacademy/wonder-blocks-layout": "^2.0.5",
-    "@khanacademy/wonder-blocks-modal": "^4.0.5",
+    "@khanacademy/wonder-blocks-core": "^5.0.4",
+    "@khanacademy/wonder-blocks-layout": "^2.0.7",
+    "@khanacademy/wonder-blocks-modal": "^4.0.7",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-typography": "^2.0.5"
+    "@khanacademy/wonder-blocks-typography": "^2.0.7"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -31,6 +31,6 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.4"
+    "wb-dev-build-settings": "^0.9.6"
   }
 }