@khanacademy/wonder-blocks-tooltip 2.0.5 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/es/index.js +157 -203
  3. package/dist/index.js +170 -216
  4. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @khanacademy/wonder-blocks-tooltip
2
2
 
3
+ ## 2.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - c20f48f3: Don't transpile classes when building bundles
8
+ - Updated dependencies [c20f48f3]
9
+ - @khanacademy/wonder-blocks-core@5.0.4
10
+ - @khanacademy/wonder-blocks-layout@2.0.6
11
+ - @khanacademy/wonder-blocks-modal@4.0.6
12
+ - @khanacademy/wonder-blocks-typography@2.0.6
13
+
3
14
  ## 2.0.5
4
15
 
5
16
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -2,37 +2,22 @@ import * as React from 'react';
2
2
  import * as ReactDOM from 'react-dom';
3
3
  import { Text as Text$1, View, UniqueIDProvider } from '@khanacademy/wonder-blocks-core';
4
4
  import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
5
- import { css, StyleSheet } from 'aphrodite';
5
+ import { StyleSheet, css } from 'aphrodite';
6
6
  import Colors from '@khanacademy/wonder-blocks-color';
7
7
  import Spacing from '@khanacademy/wonder-blocks-spacing';
8
8
  import { Strut } from '@khanacademy/wonder-blocks-layout';
9
9
  import { HeadingSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
10
10
  import { Popper } from 'react-popper';
11
11
 
12
- function _setPrototypeOf(o, p) {
13
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
14
- o.__proto__ = p;
15
- return o;
16
- };
17
- return _setPrototypeOf(o, p);
18
- }
19
-
20
- function _inheritsLoose(subClass, superClass) {
21
- subClass.prototype = Object.create(superClass.prototype);
22
- subClass.prototype.constructor = subClass;
23
- _setPrototypeOf(subClass, superClass);
24
- }
25
-
26
- let ActiveTracker = function () {
27
- function ActiveTracker() {
12
+ class ActiveTracker {
13
+ constructor() {
28
14
  this._subscribers = [];
29
15
  this._active = void 0;
30
16
  }
31
- var _proto = ActiveTracker.prototype;
32
- _proto._getIndex = function _getIndex(who) {
17
+ _getIndex(who) {
33
18
  return this._subscribers.findIndex(v => v === who);
34
- };
35
- _proto.steal = function steal(who) {
19
+ }
20
+ steal(who) {
36
21
  const wasActive = !!this._active;
37
22
  this._active = true;
38
23
  for (const anchor of this._subscribers) {
@@ -42,11 +27,11 @@ let ActiveTracker = function () {
42
27
  anchor.activeStateStolen();
43
28
  }
44
29
  return wasActive;
45
- };
46
- _proto.giveup = function giveup() {
30
+ }
31
+ giveup() {
47
32
  this._active = false;
48
- };
49
- _proto.subscribe = function subscribe(who) {
33
+ }
34
+ subscribe(who) {
50
35
  if (this._getIndex(who) >= 0) {
51
36
  throw new Error("Already subscribed.");
52
37
  }
@@ -56,59 +41,54 @@ let ActiveTracker = function () {
56
41
  this._subscribers.splice(index, 1);
57
42
  };
58
43
  return unsubscribe;
59
- };
60
- return ActiveTracker;
61
- }();
44
+ }
45
+ }
62
46
 
63
47
  const TooltipAppearanceDelay = 100;
64
48
  const TooltipDisappearanceDelay = 75;
65
49
 
66
50
  const TRACKER = new ActiveTracker();
67
- let TooltipAnchor = function (_ref) {
68
- _inheritsLoose(TooltipAnchor, _ref);
69
- function TooltipAnchor(props) {
70
- var _this;
71
- _this = _ref.call(this, props) || this;
72
- _this._weSetFocusivity = void 0;
73
- _this._anchorNode = void 0;
74
- _this._focused = void 0;
75
- _this._hovered = void 0;
76
- _this._stolenFromUs = void 0;
77
- _this._unsubscribeFromTracker = void 0;
78
- _this._timeoutID = void 0;
79
- _this.activeStateStolen = () => {
80
- _this._stolenFromUs = _this.state.active || !!_this._timeoutID;
81
- _this._focused = false;
82
- _this._setActiveState(false, true);
51
+ class TooltipAnchor extends React.Component {
52
+ constructor(props) {
53
+ super(props);
54
+ this._weSetFocusivity = void 0;
55
+ this._anchorNode = void 0;
56
+ this._focused = void 0;
57
+ this._hovered = void 0;
58
+ this._stolenFromUs = void 0;
59
+ this._unsubscribeFromTracker = void 0;
60
+ this._timeoutID = void 0;
61
+ this.activeStateStolen = () => {
62
+ this._stolenFromUs = this.state.active || !!this._timeoutID;
63
+ this._focused = false;
64
+ this._setActiveState(false, true);
83
65
  };
84
- _this._handleFocusIn = () => {
85
- _this._updateActiveState(_this._hovered, true);
66
+ this._handleFocusIn = () => {
67
+ this._updateActiveState(this._hovered, true);
86
68
  };
87
- _this._handleFocusOut = () => {
88
- _this._updateActiveState(_this._hovered, false);
69
+ this._handleFocusOut = () => {
70
+ this._updateActiveState(this._hovered, false);
89
71
  };
90
- _this._handleMouseEnter = () => {
91
- _this._updateActiveState(true, _this._focused);
72
+ this._handleMouseEnter = () => {
73
+ this._updateActiveState(true, this._focused);
92
74
  };
93
- _this._handleMouseLeave = () => {
94
- _this._updateActiveState(false, _this._focused);
75
+ this._handleMouseLeave = () => {
76
+ this._updateActiveState(false, this._focused);
95
77
  };
96
- _this._handleKeyUp = e => {
97
- if (e.key === "Escape" && _this.state.active) {
78
+ this._handleKeyUp = e => {
79
+ if (e.key === "Escape" && this.state.active) {
98
80
  e.preventDefault();
99
81
  e.stopPropagation();
100
- _this._updateActiveState(false, false);
82
+ this._updateActiveState(false, false);
101
83
  }
102
84
  };
103
- _this._focused = false;
104
- _this._hovered = false;
105
- _this.state = {
85
+ this._focused = false;
86
+ this._hovered = false;
87
+ this.state = {
106
88
  active: false
107
89
  };
108
- return _this;
109
90
  }
110
- var _proto = TooltipAnchor.prototype;
111
- _proto.componentDidMount = function componentDidMount() {
91
+ componentDidMount() {
112
92
  const anchorNode = ReactDOM.findDOMNode(this);
113
93
  if (anchorNode instanceof Text) {
114
94
  throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.");
@@ -123,13 +103,13 @@ let TooltipAnchor = function (_ref) {
123
103
  anchorNode.addEventListener("mouseleave", this._handleMouseLeave);
124
104
  this.props.anchorRef(this._anchorNode);
125
105
  }
126
- };
127
- _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
106
+ }
107
+ componentDidUpdate(prevProps) {
128
108
  if (prevProps.forceAnchorFocusivity !== this.props.forceAnchorFocusivity || prevProps.children !== this.props.children) {
129
109
  this._updateFocusivity();
130
110
  }
131
- };
132
- _proto.componentWillUnmount = function componentWillUnmount() {
111
+ }
112
+ componentWillUnmount() {
133
113
  if (this._unsubscribeFromTracker) {
134
114
  this._unsubscribeFromTracker();
135
115
  }
@@ -144,8 +124,8 @@ let TooltipAnchor = function (_ref) {
144
124
  if (this.state.active) {
145
125
  document.removeEventListener("keyup", this._handleKeyUp);
146
126
  }
147
- };
148
- _proto._updateFocusivity = function _updateFocusivity() {
127
+ }
128
+ _updateFocusivity() {
149
129
  const anchorNode = this._anchorNode;
150
130
  if (!anchorNode) {
151
131
  return;
@@ -163,19 +143,19 @@ let TooltipAnchor = function (_ref) {
163
143
  this._weSetFocusivity = false;
164
144
  }
165
145
  }
166
- };
167
- _proto._updateActiveState = function _updateActiveState(hovered, focused) {
146
+ }
147
+ _updateActiveState(hovered, focused) {
168
148
  this._hovered = hovered;
169
149
  this._focused = focused;
170
150
  this._setActiveState(hovered || focused);
171
- };
172
- _proto._clearPendingAction = function _clearPendingAction() {
151
+ }
152
+ _clearPendingAction() {
173
153
  if (this._timeoutID) {
174
154
  clearTimeout(this._timeoutID);
175
155
  this._timeoutID = null;
176
156
  }
177
- };
178
- _proto._setActiveState = function _setActiveState(active, instant) {
157
+ }
158
+ _setActiveState(active, instant) {
179
159
  if (this._stolenFromUs || active !== this.state.active || !this.state.active && this._timeoutID) {
180
160
  this._clearPendingAction();
181
161
  } else if (active === this.state.active && !this._timeoutID) {
@@ -203,27 +183,26 @@ let TooltipAnchor = function (_ref) {
203
183
  this._setActiveState(active, true);
204
184
  }, delay);
205
185
  }
206
- };
207
- _proto._renderAnchorableChildren = function _renderAnchorableChildren() {
186
+ }
187
+ _renderAnchorableChildren() {
208
188
  const {
209
189
  children
210
190
  } = this.props;
211
191
  return typeof children === "string" ? React.createElement(Text$1, null, children) : children;
212
- };
213
- _proto._renderAccessibleChildren = function _renderAccessibleChildren(ids) {
192
+ }
193
+ _renderAccessibleChildren(ids) {
214
194
  const anchorableChildren = this._renderAnchorableChildren();
215
195
  return React.cloneElement(anchorableChildren, {
216
196
  "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
217
197
  });
218
- };
219
- _proto.render = function render() {
198
+ }
199
+ render() {
220
200
  if (this.props.ids) {
221
201
  return this._renderAccessibleChildren(this.props.ids);
222
202
  }
223
203
  return this._renderAnchorableChildren();
224
- };
225
- return TooltipAnchor;
226
- }(React.Component);
204
+ }
205
+ }
227
206
  TooltipAnchor.defaultProps = {
228
207
  forceAnchorFocusivity: true
229
208
  };
@@ -245,13 +224,8 @@ function _extends() {
245
224
  }
246
225
 
247
226
  let tempIdCounter = 0;
248
- let TooltipTail = function (_React$Component) {
249
- _inheritsLoose(TooltipTail, _React$Component);
250
- function TooltipTail() {
251
- return _React$Component.apply(this, arguments) || this;
252
- }
253
- var _proto = TooltipTail.prototype;
254
- _proto._calculateDimensionsFromPlacement = function _calculateDimensionsFromPlacement() {
227
+ class TooltipTail extends React.Component {
228
+ _calculateDimensionsFromPlacement() {
255
229
  const {
256
230
  placement
257
231
  } = this.props;
@@ -288,8 +262,8 @@ let TooltipTail = function (_React$Component) {
288
262
  default:
289
263
  throw new Error(`Unknown placement: ${placement}`);
290
264
  }
291
- };
292
- _proto._getFilterPositioning = function _getFilterPositioning() {
265
+ }
266
+ _getFilterPositioning() {
293
267
  const {
294
268
  placement
295
269
  } = this.props;
@@ -317,8 +291,8 @@ let TooltipTail = function (_React$Component) {
317
291
  default:
318
292
  throw new Error(`Unknown placement: ${placement}`);
319
293
  }
320
- };
321
- _proto._maybeRenderDropshadow = function _maybeRenderDropshadow(points) {
294
+ }
295
+ _maybeRenderDropshadow(points) {
322
296
  const position = this._getFilterPositioning();
323
297
  if (!position) {
324
298
  return null;
@@ -354,14 +328,14 @@ let TooltipTail = function (_React$Component) {
354
328
  stroke: Colors.offBlack32,
355
329
  filter: `url(#${dropShadowFilterId})`
356
330
  }))];
357
- };
358
- _proto._getFullTailWidth = function _getFullTailWidth() {
331
+ }
332
+ _getFullTailWidth() {
359
333
  return ARROW_WIDTH + 2 * MIN_DISTANCE_FROM_CORNERS;
360
- };
361
- _proto._getFullTailHeight = function _getFullTailHeight() {
334
+ }
335
+ _getFullTailHeight() {
362
336
  return ARROW_HEIGHT + DISTANCE_FROM_ANCHOR;
363
- };
364
- _proto._getContainerStyle = function _getContainerStyle() {
337
+ }
338
+ _getContainerStyle() {
365
339
  const {
366
340
  placement
367
341
  } = this.props;
@@ -395,8 +369,8 @@ let TooltipTail = function (_React$Component) {
395
369
  default:
396
370
  throw new Error(`Unknown placement: ${placement}`);
397
371
  }
398
- };
399
- _proto._getArrowStyle = function _getArrowStyle() {
372
+ }
373
+ _getArrowStyle() {
400
374
  const {
401
375
  placement
402
376
  } = this.props;
@@ -428,8 +402,8 @@ let TooltipTail = function (_React$Component) {
428
402
  default:
429
403
  throw new Error(`Unknown placement: ${placement}`);
430
404
  }
431
- };
432
- _proto._renderArrow = function _renderArrow() {
405
+ }
406
+ _renderArrow() {
433
407
  const {
434
408
  trimlinePoints,
435
409
  points,
@@ -457,8 +431,8 @@ let TooltipTail = function (_React$Component) {
457
431
  stroke: Colors[color],
458
432
  points: trimlinePoints.join(" ")
459
433
  }));
460
- };
461
- _proto.render = function render() {
434
+ }
435
+ render() {
462
436
  const {
463
437
  offset,
464
438
  placement,
@@ -469,9 +443,8 @@ let TooltipTail = function (_React$Component) {
469
443
  "data-placement": placement,
470
444
  ref: updateRef
471
445
  }, this._renderArrow());
472
- };
473
- return TooltipTail;
474
- }(React.Component);
446
+ }
447
+ }
475
448
  TooltipTail.defaultProps = {
476
449
  color: "white"
477
450
  };
@@ -489,30 +462,26 @@ const styles$2 = StyleSheet.create({
489
462
  }
490
463
  });
491
464
 
492
- let TooltipBubble = function (_React$Component) {
493
- _inheritsLoose(TooltipBubble, _React$Component);
494
- function TooltipBubble(...args) {
495
- var _this;
496
- _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
497
- _this.state = {
465
+ class TooltipBubble extends React.Component {
466
+ constructor(...args) {
467
+ super(...args);
468
+ this.state = {
498
469
  active: false
499
470
  };
500
- _this.handleMouseEnter = () => {
501
- _this._setActiveState(true);
471
+ this.handleMouseEnter = () => {
472
+ this._setActiveState(true);
502
473
  };
503
- _this.handleMouseLeave = () => {
504
- _this.props.onActiveChanged(false);
474
+ this.handleMouseLeave = () => {
475
+ this.props.onActiveChanged(false);
505
476
  };
506
- return _this;
507
477
  }
508
- var _proto = TooltipBubble.prototype;
509
- _proto._setActiveState = function _setActiveState(active) {
478
+ _setActiveState(active) {
510
479
  this.setState({
511
480
  active
512
481
  });
513
482
  this.props.onActiveChanged(active);
514
- };
515
- _proto.render = function render() {
483
+ }
484
+ render() {
516
485
  const {
517
486
  id,
518
487
  children,
@@ -538,9 +507,8 @@ let TooltipBubble = function (_React$Component) {
538
507
  placement: placement,
539
508
  offset: tailOffset
540
509
  }));
541
- };
542
- return TooltipBubble;
543
- }(React.Component);
510
+ }
511
+ }
544
512
  const styles$1 = StyleSheet.create({
545
513
  bubble: {
546
514
  position: "absolute"
@@ -573,13 +541,8 @@ const styles$1 = StyleSheet.create({
573
541
  }
574
542
  });
575
543
 
576
- let TooltipContent = function (_React$Component) {
577
- _inheritsLoose(TooltipContent, _React$Component);
578
- function TooltipContent() {
579
- return _React$Component.apply(this, arguments) || this;
580
- }
581
- var _proto = TooltipContent.prototype;
582
- _proto._renderTitle = function _renderTitle() {
544
+ class TooltipContent extends React.Component {
545
+ _renderTitle() {
583
546
  const {
584
547
  title
585
548
  } = this.props;
@@ -591,8 +554,8 @@ let TooltipContent = function (_React$Component) {
591
554
  }
592
555
  }
593
556
  return null;
594
- };
595
- _proto._renderChildren = function _renderChildren() {
557
+ }
558
+ _renderChildren() {
596
559
  const {
597
560
  children
598
561
  } = this.props;
@@ -601,8 +564,8 @@ let TooltipContent = function (_React$Component) {
601
564
  } else {
602
565
  return children;
603
566
  }
604
- };
605
- _proto.render = function render() {
567
+ }
568
+ render() {
606
569
  const title = this._renderTitle();
607
570
  const children = this._renderChildren();
608
571
  const containerStyle = title ? styles.withTitle : styles.withoutTitle;
@@ -611,9 +574,8 @@ let TooltipContent = function (_React$Component) {
611
574
  }, title, title && children && React.createElement(Strut, {
612
575
  size: Spacing.xxxSmall_4
613
576
  }), children);
614
- };
615
- return TooltipContent;
616
- }(React.Component);
577
+ }
578
+ }
617
579
  const styles = StyleSheet.create({
618
580
  withoutTitle: {
619
581
  padding: `10px ${Spacing.medium_16}px`
@@ -623,43 +585,41 @@ const styles = StyleSheet.create({
623
585
  }
624
586
  });
625
587
 
626
- let RefTracker = function RefTracker() {
627
- this._lastRef = void 0;
628
- this._targetFn = void 0;
629
- this.updateRef = ref => {
630
- if (ref) {
631
- const domNode = ReactDOM.findDOMNode(ref);
632
- if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
633
- var _this$_targetFn;
634
- this._lastRef = domNode;
635
- (_this$_targetFn = this._targetFn) == null ? void 0 : _this$_targetFn.call(this, domNode);
636
- }
637
- }
638
- };
639
- this.setCallback = targetFn => {
640
- if (this._targetFn !== targetFn) {
641
- if (targetFn && typeof targetFn !== "function") {
642
- throw new Error("targetFn must be a function");
588
+ class RefTracker {
589
+ constructor() {
590
+ this._lastRef = void 0;
591
+ this._targetFn = void 0;
592
+ this.updateRef = ref => {
593
+ if (ref) {
594
+ const domNode = ReactDOM.findDOMNode(ref);
595
+ if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
596
+ var _this$_targetFn;
597
+ this._lastRef = domNode;
598
+ (_this$_targetFn = this._targetFn) == null ? void 0 : _this$_targetFn.call(this, domNode);
599
+ }
643
600
  }
644
- this._targetFn = targetFn || null;
645
- if (this._lastRef && this._targetFn) {
646
- this._targetFn(this._lastRef);
601
+ };
602
+ this.setCallback = targetFn => {
603
+ if (this._targetFn !== targetFn) {
604
+ if (targetFn && typeof targetFn !== "function") {
605
+ throw new Error("targetFn must be a function");
606
+ }
607
+ this._targetFn = targetFn || null;
608
+ if (this._lastRef && this._targetFn) {
609
+ this._targetFn(this._lastRef);
610
+ }
647
611
  }
648
- }
649
- };
650
- };
612
+ };
613
+ }
614
+ }
651
615
 
652
- let TooltipPopper = function (_React$Component) {
653
- _inheritsLoose(TooltipPopper, _React$Component);
654
- function TooltipPopper(...args) {
655
- var _this;
656
- _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
657
- _this._bubbleRefTracker = new RefTracker();
658
- _this._tailRefTracker = new RefTracker();
659
- return _this;
660
- }
661
- var _proto = TooltipPopper.prototype;
662
- _proto._renderPositionedContent = function _renderPositionedContent(popperProps) {
616
+ class TooltipPopper extends React.Component {
617
+ constructor(...args) {
618
+ super(...args);
619
+ this._bubbleRefTracker = new RefTracker();
620
+ this._tailRefTracker = new RefTracker();
621
+ }
622
+ _renderPositionedContent(popperProps) {
663
623
  const {
664
624
  children
665
625
  } = this.props;
@@ -688,8 +648,8 @@ let TooltipPopper = function (_React$Component) {
688
648
  isReferenceHidden: popperProps.isReferenceHidden
689
649
  };
690
650
  return children(bubbleProps);
691
- };
692
- _proto.render = function render() {
651
+ }
652
+ render() {
693
653
  const {
694
654
  anchorElement,
695
655
  placement
@@ -705,36 +665,31 @@ let TooltipPopper = function (_React$Component) {
705
665
  }
706
666
  }]
707
667
  }, props => this._renderPositionedContent(props));
708
- };
709
- return TooltipPopper;
710
- }(React.Component);
668
+ }
669
+ }
711
670
 
712
- let Tooltip = function (_React$Component) {
713
- _inheritsLoose(Tooltip, _React$Component);
714
- function Tooltip(...args) {
715
- var _this;
716
- _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
717
- _this.state = {
671
+ class Tooltip extends React.Component {
672
+ constructor(...args) {
673
+ super(...args);
674
+ this.state = {
718
675
  active: false,
719
676
  activeBubble: false,
720
677
  anchorElement: null
721
678
  };
722
- return _this;
723
679
  }
724
- Tooltip.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
680
+ static getDerivedStateFromProps(props, state) {
725
681
  return {
726
682
  active: typeof props.opened === "boolean" ? props.opened : state.active
727
683
  };
728
- };
729
- var _proto = Tooltip.prototype;
730
- _proto._updateAnchorElement = function _updateAnchorElement(ref) {
684
+ }
685
+ _updateAnchorElement(ref) {
731
686
  if (ref && ref !== this.state.anchorElement) {
732
687
  this.setState({
733
688
  anchorElement: ref
734
689
  });
735
690
  }
736
- };
737
- _proto._renderBubbleContent = function _renderBubbleContent() {
691
+ }
692
+ _renderBubbleContent() {
738
693
  const {
739
694
  title,
740
695
  content
@@ -750,8 +705,8 @@ let Tooltip = function (_React$Component) {
750
705
  } else {
751
706
  return content;
752
707
  }
753
- };
754
- _proto._renderPopper = function _renderPopper(ids) {
708
+ }
709
+ _renderPopper(ids) {
755
710
  const {
756
711
  id
757
712
  } = this.props;
@@ -777,14 +732,14 @@ let Tooltip = function (_React$Component) {
777
732
  activeBubble: active
778
733
  })
779
734
  }, this._renderBubbleContent()));
780
- };
781
- _proto._getHost = function _getHost() {
735
+ }
736
+ _getHost() {
782
737
  const {
783
738
  anchorElement
784
739
  } = this.state;
785
740
  return maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
786
- };
787
- _proto._renderTooltipAnchor = function _renderTooltipAnchor(ids) {
741
+ }
742
+ _renderTooltipAnchor(ids) {
788
743
  const {
789
744
  children,
790
745
  forceAnchorFocusivity
@@ -802,8 +757,8 @@ let Tooltip = function (_React$Component) {
802
757
  }),
803
758
  ids: ids
804
759
  }, children), popperHost && (active || activeBubble) && ReactDOM.createPortal(this._renderPopper(ids), popperHost));
805
- };
806
- _proto.render = function render() {
760
+ }
761
+ render() {
807
762
  const {
808
763
  id
809
764
  } = this.props;
@@ -815,9 +770,8 @@ let Tooltip = function (_React$Component) {
815
770
  mockOnFirstRender: true
816
771
  }, ids => this._renderTooltipAnchor(ids));
817
772
  }
818
- };
819
- return Tooltip;
820
- }(React.Component);
773
+ }
774
+ }
821
775
  Tooltip.defaultProps = {
822
776
  forceAnchorFocusivity: true,
823
777
  placement: "top"
package/dist/index.js CHANGED
@@ -16,21 +16,21 @@ var reactPopper = require('react-popper');
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
17
 
18
18
  function _interopNamespace(e) {
19
- if (e && e.__esModule) return e;
20
- var n = Object.create(null);
21
- if (e) {
22
- Object.keys(e).forEach(function (k) {
23
- if (k !== 'default') {
24
- var d = Object.getOwnPropertyDescriptor(e, k);
25
- Object.defineProperty(n, k, d.get ? d : {
26
- enumerable: true,
27
- get: function () { return e[k]; }
19
+ if (e && e.__esModule) return e;
20
+ var n = Object.create(null);
21
+ if (e) {
22
+ Object.keys(e).forEach(function (k) {
23
+ if (k !== 'default') {
24
+ var d = Object.getOwnPropertyDescriptor(e, k);
25
+ Object.defineProperty(n, k, d.get ? d : {
26
+ enumerable: true,
27
+ get: function () { return e[k]; }
28
+ });
29
+ }
28
30
  });
29
- }
30
- });
31
- }
32
- n["default"] = e;
33
- return Object.freeze(n);
31
+ }
32
+ n["default"] = e;
33
+ return Object.freeze(n);
34
34
  }
35
35
 
36
36
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
@@ -38,30 +38,15 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
38
38
  var Colors__default = /*#__PURE__*/_interopDefaultLegacy(Colors);
39
39
  var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
40
40
 
41
- function _setPrototypeOf(o, p) {
42
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
43
- o.__proto__ = p;
44
- return o;
45
- };
46
- return _setPrototypeOf(o, p);
47
- }
48
-
49
- function _inheritsLoose(subClass, superClass) {
50
- subClass.prototype = Object.create(superClass.prototype);
51
- subClass.prototype.constructor = subClass;
52
- _setPrototypeOf(subClass, superClass);
53
- }
54
-
55
- let ActiveTracker = function () {
56
- function ActiveTracker() {
41
+ class ActiveTracker {
42
+ constructor() {
57
43
  this._subscribers = [];
58
44
  this._active = void 0;
59
45
  }
60
- var _proto = ActiveTracker.prototype;
61
- _proto._getIndex = function _getIndex(who) {
46
+ _getIndex(who) {
62
47
  return this._subscribers.findIndex(v => v === who);
63
- };
64
- _proto.steal = function steal(who) {
48
+ }
49
+ steal(who) {
65
50
  const wasActive = !!this._active;
66
51
  this._active = true;
67
52
  for (const anchor of this._subscribers) {
@@ -71,11 +56,11 @@ let ActiveTracker = function () {
71
56
  anchor.activeStateStolen();
72
57
  }
73
58
  return wasActive;
74
- };
75
- _proto.giveup = function giveup() {
59
+ }
60
+ giveup() {
76
61
  this._active = false;
77
- };
78
- _proto.subscribe = function subscribe(who) {
62
+ }
63
+ subscribe(who) {
79
64
  if (this._getIndex(who) >= 0) {
80
65
  throw new Error("Already subscribed.");
81
66
  }
@@ -85,59 +70,54 @@ let ActiveTracker = function () {
85
70
  this._subscribers.splice(index, 1);
86
71
  };
87
72
  return unsubscribe;
88
- };
89
- return ActiveTracker;
90
- }();
73
+ }
74
+ }
91
75
 
92
76
  const TooltipAppearanceDelay = 100;
93
77
  const TooltipDisappearanceDelay = 75;
94
78
 
95
79
  const TRACKER = new ActiveTracker();
96
- let TooltipAnchor = function (_ref) {
97
- _inheritsLoose(TooltipAnchor, _ref);
98
- function TooltipAnchor(props) {
99
- var _this;
100
- _this = _ref.call(this, props) || this;
101
- _this._weSetFocusivity = void 0;
102
- _this._anchorNode = void 0;
103
- _this._focused = void 0;
104
- _this._hovered = void 0;
105
- _this._stolenFromUs = void 0;
106
- _this._unsubscribeFromTracker = void 0;
107
- _this._timeoutID = void 0;
108
- _this.activeStateStolen = () => {
109
- _this._stolenFromUs = _this.state.active || !!_this._timeoutID;
110
- _this._focused = false;
111
- _this._setActiveState(false, true);
80
+ class TooltipAnchor extends React__namespace.Component {
81
+ constructor(props) {
82
+ super(props);
83
+ this._weSetFocusivity = void 0;
84
+ this._anchorNode = void 0;
85
+ this._focused = void 0;
86
+ this._hovered = void 0;
87
+ this._stolenFromUs = void 0;
88
+ this._unsubscribeFromTracker = void 0;
89
+ this._timeoutID = void 0;
90
+ this.activeStateStolen = () => {
91
+ this._stolenFromUs = this.state.active || !!this._timeoutID;
92
+ this._focused = false;
93
+ this._setActiveState(false, true);
112
94
  };
113
- _this._handleFocusIn = () => {
114
- _this._updateActiveState(_this._hovered, true);
95
+ this._handleFocusIn = () => {
96
+ this._updateActiveState(this._hovered, true);
115
97
  };
116
- _this._handleFocusOut = () => {
117
- _this._updateActiveState(_this._hovered, false);
98
+ this._handleFocusOut = () => {
99
+ this._updateActiveState(this._hovered, false);
118
100
  };
119
- _this._handleMouseEnter = () => {
120
- _this._updateActiveState(true, _this._focused);
101
+ this._handleMouseEnter = () => {
102
+ this._updateActiveState(true, this._focused);
121
103
  };
122
- _this._handleMouseLeave = () => {
123
- _this._updateActiveState(false, _this._focused);
104
+ this._handleMouseLeave = () => {
105
+ this._updateActiveState(false, this._focused);
124
106
  };
125
- _this._handleKeyUp = e => {
126
- if (e.key === "Escape" && _this.state.active) {
107
+ this._handleKeyUp = e => {
108
+ if (e.key === "Escape" && this.state.active) {
127
109
  e.preventDefault();
128
110
  e.stopPropagation();
129
- _this._updateActiveState(false, false);
111
+ this._updateActiveState(false, false);
130
112
  }
131
113
  };
132
- _this._focused = false;
133
- _this._hovered = false;
134
- _this.state = {
114
+ this._focused = false;
115
+ this._hovered = false;
116
+ this.state = {
135
117
  active: false
136
118
  };
137
- return _this;
138
119
  }
139
- var _proto = TooltipAnchor.prototype;
140
- _proto.componentDidMount = function componentDidMount() {
120
+ componentDidMount() {
141
121
  const anchorNode = ReactDOM__namespace.findDOMNode(this);
142
122
  if (anchorNode instanceof Text) {
143
123
  throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.");
@@ -152,13 +132,13 @@ let TooltipAnchor = function (_ref) {
152
132
  anchorNode.addEventListener("mouseleave", this._handleMouseLeave);
153
133
  this.props.anchorRef(this._anchorNode);
154
134
  }
155
- };
156
- _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
135
+ }
136
+ componentDidUpdate(prevProps) {
157
137
  if (prevProps.forceAnchorFocusivity !== this.props.forceAnchorFocusivity || prevProps.children !== this.props.children) {
158
138
  this._updateFocusivity();
159
139
  }
160
- };
161
- _proto.componentWillUnmount = function componentWillUnmount() {
140
+ }
141
+ componentWillUnmount() {
162
142
  if (this._unsubscribeFromTracker) {
163
143
  this._unsubscribeFromTracker();
164
144
  }
@@ -173,8 +153,8 @@ let TooltipAnchor = function (_ref) {
173
153
  if (this.state.active) {
174
154
  document.removeEventListener("keyup", this._handleKeyUp);
175
155
  }
176
- };
177
- _proto._updateFocusivity = function _updateFocusivity() {
156
+ }
157
+ _updateFocusivity() {
178
158
  const anchorNode = this._anchorNode;
179
159
  if (!anchorNode) {
180
160
  return;
@@ -192,19 +172,19 @@ let TooltipAnchor = function (_ref) {
192
172
  this._weSetFocusivity = false;
193
173
  }
194
174
  }
195
- };
196
- _proto._updateActiveState = function _updateActiveState(hovered, focused) {
175
+ }
176
+ _updateActiveState(hovered, focused) {
197
177
  this._hovered = hovered;
198
178
  this._focused = focused;
199
179
  this._setActiveState(hovered || focused);
200
- };
201
- _proto._clearPendingAction = function _clearPendingAction() {
180
+ }
181
+ _clearPendingAction() {
202
182
  if (this._timeoutID) {
203
183
  clearTimeout(this._timeoutID);
204
184
  this._timeoutID = null;
205
185
  }
206
- };
207
- _proto._setActiveState = function _setActiveState(active, instant) {
186
+ }
187
+ _setActiveState(active, instant) {
208
188
  if (this._stolenFromUs || active !== this.state.active || !this.state.active && this._timeoutID) {
209
189
  this._clearPendingAction();
210
190
  } else if (active === this.state.active && !this._timeoutID) {
@@ -232,27 +212,26 @@ let TooltipAnchor = function (_ref) {
232
212
  this._setActiveState(active, true);
233
213
  }, delay);
234
214
  }
235
- };
236
- _proto._renderAnchorableChildren = function _renderAnchorableChildren() {
215
+ }
216
+ _renderAnchorableChildren() {
237
217
  const {
238
218
  children
239
219
  } = this.props;
240
220
  return typeof children === "string" ? React__namespace.createElement(wonderBlocksCore.Text, null, children) : children;
241
- };
242
- _proto._renderAccessibleChildren = function _renderAccessibleChildren(ids) {
221
+ }
222
+ _renderAccessibleChildren(ids) {
243
223
  const anchorableChildren = this._renderAnchorableChildren();
244
224
  return React__namespace.cloneElement(anchorableChildren, {
245
225
  "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
246
226
  });
247
- };
248
- _proto.render = function render() {
227
+ }
228
+ render() {
249
229
  if (this.props.ids) {
250
230
  return this._renderAccessibleChildren(this.props.ids);
251
231
  }
252
232
  return this._renderAnchorableChildren();
253
- };
254
- return TooltipAnchor;
255
- }(React__namespace.Component);
233
+ }
234
+ }
256
235
  TooltipAnchor.defaultProps = {
257
236
  forceAnchorFocusivity: true
258
237
  };
@@ -274,13 +253,8 @@ function _extends() {
274
253
  }
275
254
 
276
255
  let tempIdCounter = 0;
277
- let TooltipTail = function (_React$Component) {
278
- _inheritsLoose(TooltipTail, _React$Component);
279
- function TooltipTail() {
280
- return _React$Component.apply(this, arguments) || this;
281
- }
282
- var _proto = TooltipTail.prototype;
283
- _proto._calculateDimensionsFromPlacement = function _calculateDimensionsFromPlacement() {
256
+ class TooltipTail extends React__namespace.Component {
257
+ _calculateDimensionsFromPlacement() {
284
258
  const {
285
259
  placement
286
260
  } = this.props;
@@ -317,8 +291,8 @@ let TooltipTail = function (_React$Component) {
317
291
  default:
318
292
  throw new Error(`Unknown placement: ${placement}`);
319
293
  }
320
- };
321
- _proto._getFilterPositioning = function _getFilterPositioning() {
294
+ }
295
+ _getFilterPositioning() {
322
296
  const {
323
297
  placement
324
298
  } = this.props;
@@ -346,8 +320,8 @@ let TooltipTail = function (_React$Component) {
346
320
  default:
347
321
  throw new Error(`Unknown placement: ${placement}`);
348
322
  }
349
- };
350
- _proto._maybeRenderDropshadow = function _maybeRenderDropshadow(points) {
323
+ }
324
+ _maybeRenderDropshadow(points) {
351
325
  const position = this._getFilterPositioning();
352
326
  if (!position) {
353
327
  return null;
@@ -383,14 +357,14 @@ let TooltipTail = function (_React$Component) {
383
357
  stroke: Colors__default["default"].offBlack32,
384
358
  filter: `url(#${dropShadowFilterId})`
385
359
  }))];
386
- };
387
- _proto._getFullTailWidth = function _getFullTailWidth() {
360
+ }
361
+ _getFullTailWidth() {
388
362
  return ARROW_WIDTH + 2 * MIN_DISTANCE_FROM_CORNERS;
389
- };
390
- _proto._getFullTailHeight = function _getFullTailHeight() {
363
+ }
364
+ _getFullTailHeight() {
391
365
  return ARROW_HEIGHT + DISTANCE_FROM_ANCHOR;
392
- };
393
- _proto._getContainerStyle = function _getContainerStyle() {
366
+ }
367
+ _getContainerStyle() {
394
368
  const {
395
369
  placement
396
370
  } = this.props;
@@ -424,8 +398,8 @@ let TooltipTail = function (_React$Component) {
424
398
  default:
425
399
  throw new Error(`Unknown placement: ${placement}`);
426
400
  }
427
- };
428
- _proto._getArrowStyle = function _getArrowStyle() {
401
+ }
402
+ _getArrowStyle() {
429
403
  const {
430
404
  placement
431
405
  } = this.props;
@@ -457,8 +431,8 @@ let TooltipTail = function (_React$Component) {
457
431
  default:
458
432
  throw new Error(`Unknown placement: ${placement}`);
459
433
  }
460
- };
461
- _proto._renderArrow = function _renderArrow() {
434
+ }
435
+ _renderArrow() {
462
436
  const {
463
437
  trimlinePoints,
464
438
  points,
@@ -486,8 +460,8 @@ let TooltipTail = function (_React$Component) {
486
460
  stroke: Colors__default["default"][color],
487
461
  points: trimlinePoints.join(" ")
488
462
  }));
489
- };
490
- _proto.render = function render() {
463
+ }
464
+ render() {
491
465
  const {
492
466
  offset,
493
467
  placement,
@@ -498,9 +472,8 @@ let TooltipTail = function (_React$Component) {
498
472
  "data-placement": placement,
499
473
  ref: updateRef
500
474
  }, this._renderArrow());
501
- };
502
- return TooltipTail;
503
- }(React__namespace.Component);
475
+ }
476
+ }
504
477
  TooltipTail.defaultProps = {
505
478
  color: "white"
506
479
  };
@@ -518,30 +491,26 @@ const styles$2 = aphrodite.StyleSheet.create({
518
491
  }
519
492
  });
520
493
 
521
- let TooltipBubble = function (_React$Component) {
522
- _inheritsLoose(TooltipBubble, _React$Component);
523
- function TooltipBubble(...args) {
524
- var _this;
525
- _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
526
- _this.state = {
494
+ class TooltipBubble extends React__namespace.Component {
495
+ constructor(...args) {
496
+ super(...args);
497
+ this.state = {
527
498
  active: false
528
499
  };
529
- _this.handleMouseEnter = () => {
530
- _this._setActiveState(true);
500
+ this.handleMouseEnter = () => {
501
+ this._setActiveState(true);
531
502
  };
532
- _this.handleMouseLeave = () => {
533
- _this.props.onActiveChanged(false);
503
+ this.handleMouseLeave = () => {
504
+ this.props.onActiveChanged(false);
534
505
  };
535
- return _this;
536
506
  }
537
- var _proto = TooltipBubble.prototype;
538
- _proto._setActiveState = function _setActiveState(active) {
507
+ _setActiveState(active) {
539
508
  this.setState({
540
509
  active
541
510
  });
542
511
  this.props.onActiveChanged(active);
543
- };
544
- _proto.render = function render() {
512
+ }
513
+ render() {
545
514
  const {
546
515
  id,
547
516
  children,
@@ -567,9 +536,8 @@ let TooltipBubble = function (_React$Component) {
567
536
  placement: placement,
568
537
  offset: tailOffset
569
538
  }));
570
- };
571
- return TooltipBubble;
572
- }(React__namespace.Component);
539
+ }
540
+ }
573
541
  const styles$1 = aphrodite.StyleSheet.create({
574
542
  bubble: {
575
543
  position: "absolute"
@@ -602,13 +570,8 @@ const styles$1 = aphrodite.StyleSheet.create({
602
570
  }
603
571
  });
604
572
 
605
- let TooltipContent = function (_React$Component) {
606
- _inheritsLoose(TooltipContent, _React$Component);
607
- function TooltipContent() {
608
- return _React$Component.apply(this, arguments) || this;
609
- }
610
- var _proto = TooltipContent.prototype;
611
- _proto._renderTitle = function _renderTitle() {
573
+ class TooltipContent extends React__namespace.Component {
574
+ _renderTitle() {
612
575
  const {
613
576
  title
614
577
  } = this.props;
@@ -620,8 +583,8 @@ let TooltipContent = function (_React$Component) {
620
583
  }
621
584
  }
622
585
  return null;
623
- };
624
- _proto._renderChildren = function _renderChildren() {
586
+ }
587
+ _renderChildren() {
625
588
  const {
626
589
  children
627
590
  } = this.props;
@@ -630,8 +593,8 @@ let TooltipContent = function (_React$Component) {
630
593
  } else {
631
594
  return children;
632
595
  }
633
- };
634
- _proto.render = function render() {
596
+ }
597
+ render() {
635
598
  const title = this._renderTitle();
636
599
  const children = this._renderChildren();
637
600
  const containerStyle = title ? styles.withTitle : styles.withoutTitle;
@@ -640,9 +603,8 @@ let TooltipContent = function (_React$Component) {
640
603
  }, title, title && children && React__namespace.createElement(wonderBlocksLayout.Strut, {
641
604
  size: Spacing__default["default"].xxxSmall_4
642
605
  }), children);
643
- };
644
- return TooltipContent;
645
- }(React__namespace.Component);
606
+ }
607
+ }
646
608
  const styles = aphrodite.StyleSheet.create({
647
609
  withoutTitle: {
648
610
  padding: `10px ${Spacing__default["default"].medium_16}px`
@@ -652,43 +614,41 @@ const styles = aphrodite.StyleSheet.create({
652
614
  }
653
615
  });
654
616
 
655
- let RefTracker = function RefTracker() {
656
- this._lastRef = void 0;
657
- this._targetFn = void 0;
658
- this.updateRef = ref => {
659
- if (ref) {
660
- const domNode = ReactDOM__namespace.findDOMNode(ref);
661
- if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
662
- var _this$_targetFn;
663
- this._lastRef = domNode;
664
- (_this$_targetFn = this._targetFn) == null ? void 0 : _this$_targetFn.call(this, domNode);
665
- }
666
- }
667
- };
668
- this.setCallback = targetFn => {
669
- if (this._targetFn !== targetFn) {
670
- if (targetFn && typeof targetFn !== "function") {
671
- throw new Error("targetFn must be a function");
617
+ class RefTracker {
618
+ constructor() {
619
+ this._lastRef = void 0;
620
+ this._targetFn = void 0;
621
+ this.updateRef = ref => {
622
+ if (ref) {
623
+ const domNode = ReactDOM__namespace.findDOMNode(ref);
624
+ if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
625
+ var _this$_targetFn;
626
+ this._lastRef = domNode;
627
+ (_this$_targetFn = this._targetFn) == null ? void 0 : _this$_targetFn.call(this, domNode);
628
+ }
672
629
  }
673
- this._targetFn = targetFn || null;
674
- if (this._lastRef && this._targetFn) {
675
- this._targetFn(this._lastRef);
630
+ };
631
+ this.setCallback = targetFn => {
632
+ if (this._targetFn !== targetFn) {
633
+ if (targetFn && typeof targetFn !== "function") {
634
+ throw new Error("targetFn must be a function");
635
+ }
636
+ this._targetFn = targetFn || null;
637
+ if (this._lastRef && this._targetFn) {
638
+ this._targetFn(this._lastRef);
639
+ }
676
640
  }
677
- }
678
- };
679
- };
641
+ };
642
+ }
643
+ }
680
644
 
681
- let TooltipPopper = function (_React$Component) {
682
- _inheritsLoose(TooltipPopper, _React$Component);
683
- function TooltipPopper(...args) {
684
- var _this;
685
- _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
686
- _this._bubbleRefTracker = new RefTracker();
687
- _this._tailRefTracker = new RefTracker();
688
- return _this;
689
- }
690
- var _proto = TooltipPopper.prototype;
691
- _proto._renderPositionedContent = function _renderPositionedContent(popperProps) {
645
+ class TooltipPopper extends React__namespace.Component {
646
+ constructor(...args) {
647
+ super(...args);
648
+ this._bubbleRefTracker = new RefTracker();
649
+ this._tailRefTracker = new RefTracker();
650
+ }
651
+ _renderPositionedContent(popperProps) {
692
652
  const {
693
653
  children
694
654
  } = this.props;
@@ -717,8 +677,8 @@ let TooltipPopper = function (_React$Component) {
717
677
  isReferenceHidden: popperProps.isReferenceHidden
718
678
  };
719
679
  return children(bubbleProps);
720
- };
721
- _proto.render = function render() {
680
+ }
681
+ render() {
722
682
  const {
723
683
  anchorElement,
724
684
  placement
@@ -734,36 +694,31 @@ let TooltipPopper = function (_React$Component) {
734
694
  }
735
695
  }]
736
696
  }, props => this._renderPositionedContent(props));
737
- };
738
- return TooltipPopper;
739
- }(React__namespace.Component);
697
+ }
698
+ }
740
699
 
741
- let Tooltip = function (_React$Component) {
742
- _inheritsLoose(Tooltip, _React$Component);
743
- function Tooltip(...args) {
744
- var _this;
745
- _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
746
- _this.state = {
700
+ class Tooltip extends React__namespace.Component {
701
+ constructor(...args) {
702
+ super(...args);
703
+ this.state = {
747
704
  active: false,
748
705
  activeBubble: false,
749
706
  anchorElement: null
750
707
  };
751
- return _this;
752
708
  }
753
- Tooltip.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
709
+ static getDerivedStateFromProps(props, state) {
754
710
  return {
755
711
  active: typeof props.opened === "boolean" ? props.opened : state.active
756
712
  };
757
- };
758
- var _proto = Tooltip.prototype;
759
- _proto._updateAnchorElement = function _updateAnchorElement(ref) {
713
+ }
714
+ _updateAnchorElement(ref) {
760
715
  if (ref && ref !== this.state.anchorElement) {
761
716
  this.setState({
762
717
  anchorElement: ref
763
718
  });
764
719
  }
765
- };
766
- _proto._renderBubbleContent = function _renderBubbleContent() {
720
+ }
721
+ _renderBubbleContent() {
767
722
  const {
768
723
  title,
769
724
  content
@@ -779,8 +734,8 @@ let Tooltip = function (_React$Component) {
779
734
  } else {
780
735
  return content;
781
736
  }
782
- };
783
- _proto._renderPopper = function _renderPopper(ids) {
737
+ }
738
+ _renderPopper(ids) {
784
739
  const {
785
740
  id
786
741
  } = this.props;
@@ -806,14 +761,14 @@ let Tooltip = function (_React$Component) {
806
761
  activeBubble: active
807
762
  })
808
763
  }, this._renderBubbleContent()));
809
- };
810
- _proto._getHost = function _getHost() {
764
+ }
765
+ _getHost() {
811
766
  const {
812
767
  anchorElement
813
768
  } = this.state;
814
769
  return wonderBlocksModal.maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
815
- };
816
- _proto._renderTooltipAnchor = function _renderTooltipAnchor(ids) {
770
+ }
771
+ _renderTooltipAnchor(ids) {
817
772
  const {
818
773
  children,
819
774
  forceAnchorFocusivity
@@ -831,8 +786,8 @@ let Tooltip = function (_React$Component) {
831
786
  }),
832
787
  ids: ids
833
788
  }, children), popperHost && (active || activeBubble) && ReactDOM__namespace.createPortal(this._renderPopper(ids), popperHost));
834
- };
835
- _proto.render = function render() {
789
+ }
790
+ render() {
836
791
  const {
837
792
  id
838
793
  } = this.props;
@@ -844,9 +799,8 @@ let Tooltip = function (_React$Component) {
844
799
  mockOnFirstRender: true
845
800
  }, ids => this._renderTooltipAnchor(ids));
846
801
  }
847
- };
848
- return Tooltip;
849
- }(React__namespace.Component);
802
+ }
803
+ }
850
804
  Tooltip.defaultProps = {
851
805
  forceAnchorFocusivity: true,
852
806
  placement: "top"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-tooltip",
3
- "version": "2.0.5",
3
+ "version": "2.0.6",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -17,11 +17,11 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.18.6",
19
19
  "@khanacademy/wonder-blocks-color": "^2.0.1",
20
- "@khanacademy/wonder-blocks-core": "^5.0.3",
21
- "@khanacademy/wonder-blocks-layout": "^2.0.5",
22
- "@khanacademy/wonder-blocks-modal": "^4.0.5",
20
+ "@khanacademy/wonder-blocks-core": "^5.0.4",
21
+ "@khanacademy/wonder-blocks-layout": "^2.0.6",
22
+ "@khanacademy/wonder-blocks-modal": "^4.0.6",
23
23
  "@khanacademy/wonder-blocks-spacing": "^4.0.1",
24
- "@khanacademy/wonder-blocks-typography": "^2.0.5"
24
+ "@khanacademy/wonder-blocks-typography": "^2.0.6"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "@popperjs/core": "^2.10.1",
@@ -31,6 +31,6 @@
31
31
  "react-popper": "^2.0.0"
32
32
  },
33
33
  "devDependencies": {
34
- "wb-dev-build-settings": "^0.9.4"
34
+ "wb-dev-build-settings": "^0.9.5"
35
35
  }
36
36
  }