@splunk/react-ui 4.14.0 → 4.16.0

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 (137) hide show
  1. package/.dockerignore +2 -0
  2. package/Accordion.js +41 -16
  3. package/Anchor.js +9 -9
  4. package/Animation.js +6 -6
  5. package/AnimationToggle.js +2 -2
  6. package/Box.js +9 -9
  7. package/Button.js +54 -51
  8. package/ButtonGroup.js +9 -9
  9. package/ButtonSimple.js +68 -64
  10. package/CHANGELOG.md +46 -0
  11. package/Calendar.js +124 -106
  12. package/Card.js +68 -68
  13. package/CardLayout.js +9 -9
  14. package/Chip.js +22 -22
  15. package/Clickable.js +38 -14
  16. package/CloseButton.js +23 -23
  17. package/Code.js +484 -436
  18. package/CollapsiblePanel.js +59 -34
  19. package/Color.js +297 -187
  20. package/ColumnLayout.js +18 -17
  21. package/ComboBox.js +81 -32
  22. package/Concertina.js +88 -27
  23. package/ControlGroup.js +81 -24
  24. package/Date.js +54 -36
  25. package/DefinitionList.js +14 -8
  26. package/Divider.d.ts +2 -0
  27. package/Divider.js +9 -9
  28. package/Dockerfile.enterprise.storybook +7 -0
  29. package/Dockerfile.prisma.storybook +7 -0
  30. package/Dockerfile.visual +10 -0
  31. package/Dropdown.js +78 -18
  32. package/EventListener.js +17 -17
  33. package/File.js +108 -46
  34. package/FormRows.js +38 -37
  35. package/Heading.js +83 -55
  36. package/Image.js +63 -38
  37. package/JSONTree.js +106 -21
  38. package/Layer.js +59 -34
  39. package/Link.js +17 -17
  40. package/List.js +3 -3
  41. package/MIGRATION.md +21 -0
  42. package/Markdown.js +71 -65
  43. package/Menu.js +155 -121
  44. package/Message.js +129 -129
  45. package/MessageBar.js +136 -136
  46. package/Modal.js +57 -32
  47. package/ModalLayer.js +15 -15
  48. package/Monogram.js +18 -17
  49. package/Multiselect.js +2807 -2310
  50. package/Number.js +74 -37
  51. package/Paginator.js +96 -83
  52. package/Paragraph.js +10 -10
  53. package/Popover.js +191 -54
  54. package/Progress.js +23 -22
  55. package/RadioBar.js +32 -14
  56. package/RadioList.js +17 -11
  57. package/Resize.js +33 -20
  58. package/ResultsMenu.js +36 -23
  59. package/ScreenReaderContent.js +9 -9
  60. package/Scroll.js +51 -26
  61. package/ScrollContainerContext.js +48 -48
  62. package/Search.js +68 -31
  63. package/Select.js +501 -204
  64. package/SidePanel.js +37 -24
  65. package/Slider.js +54 -24
  66. package/SlidingPanels.js +52 -14
  67. package/SplitButton.js +23 -22
  68. package/StaticContent.js +9 -9
  69. package/StepBar.js +22 -22
  70. package/Switch.js +18 -13
  71. package/TabBar.js +22 -22
  72. package/TabLayout.js +46 -18
  73. package/Table.js +424 -166
  74. package/Text.js +91 -49
  75. package/TextArea.d.ts +2 -0
  76. package/TextArea.js +127 -49
  77. package/Tooltip.js +236 -59
  78. package/TransitionOpen.js +39 -26
  79. package/Typography.d.ts +2 -0
  80. package/Typography.js +18 -17
  81. package/WaitSpinner.js +15 -15
  82. package/docker-compose.yml +42 -0
  83. package/package.json +13 -12
  84. package/test-runner-jest.config.js +11 -6
  85. package/types/src/Accordion/AccordionContext.d.ts +1 -0
  86. package/types/src/Button/Button.d.ts +5 -2
  87. package/types/src/Button/docs/examples/Basic.d.ts +2 -2
  88. package/types/src/Button/docs/examples/Selected.d.ts +2 -2
  89. package/types/src/ButtonGroup/ButtonGroupContext.d.ts +1 -0
  90. package/types/src/ButtonSimple/ButtonSimple.d.ts +10 -11
  91. package/types/src/Calendar/Calendar.d.ts +2 -0
  92. package/types/src/CardLayout/CardLayoutContext.d.ts +1 -0
  93. package/types/src/Concertina/ConcertinaContext.d.ts +1 -0
  94. package/types/src/ControlGroup/ControlGroup.d.ts +15 -8
  95. package/types/src/ControlGroup/docs/examples/HelpWithErrorText.d.ts +2 -0
  96. package/types/src/ControlGroup/docs/examples/Required.d.ts +2 -0
  97. package/types/src/File/File.d.ts +4 -2
  98. package/types/src/File/FileContext.d.ts +1 -0
  99. package/types/src/FormRows/FormRowsContext.d.ts +1 -0
  100. package/types/src/Markdown/renderers/MarkdownLink.d.ts +1 -1
  101. package/types/src/Menu/MenuContext.d.ts +1 -0
  102. package/types/src/Modal/ModalContext.d.ts +1 -0
  103. package/types/src/Multiselect/Compact.d.ts +14 -1
  104. package/types/src/Multiselect/Multiselect.d.ts +15 -1
  105. package/types/src/Multiselect/Normal.d.ts +2 -0
  106. package/types/src/Popover/Popover.d.ts +25 -5
  107. package/types/src/Popover/PopoverContext.d.ts +1 -0
  108. package/types/src/RadioBar/RadioBar.d.ts +5 -3
  109. package/types/src/RadioBar/RadioBarContext.d.ts +1 -0
  110. package/types/src/RadioList/RadioList.d.ts +5 -1
  111. package/types/src/RadioList/RadioListContext.d.ts +1 -0
  112. package/types/src/Select/Select.d.ts +3 -1
  113. package/types/src/Select/SelectBase.d.ts +14 -0
  114. package/types/src/Slider/Slider.d.ts +5 -3
  115. package/types/src/StepBar/StepBarContext.d.ts +1 -0
  116. package/types/src/Switch/Switch.d.ts +2 -0
  117. package/types/src/TabBar/TabBarContext.d.ts +1 -0
  118. package/types/src/TabLayout/Panel.d.ts +3 -0
  119. package/types/src/TabLayout/TabLayout.d.ts +2 -0
  120. package/types/src/Table/Body.d.ts +2 -0
  121. package/types/src/Table/Head.d.ts +2 -0
  122. package/types/src/Table/Row.d.ts +11 -3
  123. package/types/src/Table/Table.d.ts +5 -3
  124. package/types/src/Table/TableContext.d.ts +1 -0
  125. package/types/src/Text/Text.d.ts +5 -3
  126. package/types/src/TextArea/TextArea.d.ts +5 -3
  127. package/types/src/Tooltip/Tooltip.d.ts +16 -4
  128. package/types/src/Typography/Typography.d.ts +1 -1
  129. package/types/src/useForceUpdate/useForceUpdate.d.ts +1 -0
  130. package/useForceUpdate.js +9 -9
  131. package/useKeyPress.js +2 -2
  132. package/usePrevious.js +9 -9
  133. package/.storybook-visual/config/snapshotResolver.js +0 -29
  134. package/.storybook-visual/main.js +0 -22
  135. package/.storybook-visual/preview.jsx +0 -31
  136. package/.storybook-visual/scripts/test.sh +0 -108
  137. package/.storybook-visual/test-runner.js +0 -108
package/Tooltip.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 152);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 201);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -104,25 +104,39 @@ module.exports = require("prop-types");
104
104
  /***/ 11:
105
105
  /***/ (function(module, exports) {
106
106
 
107
+ module.exports = require("lodash/has");
108
+
109
+ /***/ }),
110
+
111
+ /***/ 13:
112
+ /***/ (function(module, exports) {
113
+
107
114
  module.exports = require("@splunk/ui-utils/id");
108
115
 
109
116
  /***/ }),
110
117
 
111
- /***/ 12:
118
+ /***/ 14:
112
119
  /***/ (function(module, exports) {
113
120
 
114
121
  module.exports = require("@splunk/react-ui/Clickable");
115
122
 
116
123
  /***/ }),
117
124
 
118
- /***/ 14:
125
+ /***/ 16:
119
126
  /***/ (function(module, exports) {
120
127
 
121
128
  module.exports = require("@splunk/react-ui/ScreenReaderContent");
122
129
 
123
130
  /***/ }),
124
131
 
125
- /***/ 152:
132
+ /***/ 2:
133
+ /***/ (function(module, exports) {
134
+
135
+ module.exports = require("react");
136
+
137
+ /***/ }),
138
+
139
+ /***/ 201:
126
140
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
127
141
 
128
142
  "use strict";
@@ -140,28 +154,33 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
140
154
  var external_prop_types_ = __webpack_require__(1);
141
155
  var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
142
156
 
143
- // EXTERNAL MODULE: external "lodash"
144
- var external_lodash_ = __webpack_require__(4);
157
+ // EXTERNAL MODULE: external "lodash/has"
158
+ var has_ = __webpack_require__(11);
159
+ var has_default = /*#__PURE__*/__webpack_require__.n(has_);
160
+
161
+ // EXTERNAL MODULE: external "lodash/throttle"
162
+ var throttle_ = __webpack_require__(31);
163
+ var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
145
164
 
146
165
  // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
147
- var Popover_ = __webpack_require__(18);
166
+ var Popover_ = __webpack_require__(23);
148
167
  var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
149
168
 
150
169
  // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
151
- var ScreenReaderContent_ = __webpack_require__(14);
170
+ var ScreenReaderContent_ = __webpack_require__(16);
152
171
  var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
153
172
 
154
173
  // EXTERNAL MODULE: external "@splunk/themes"
155
174
  var themes_ = __webpack_require__(0);
156
175
 
157
176
  // EXTERNAL MODULE: external "@splunk/ui-utils/id"
158
- var id_ = __webpack_require__(11);
177
+ var id_ = __webpack_require__(13);
159
178
 
160
179
  // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
161
- var i18n_ = __webpack_require__(5);
180
+ var i18n_ = __webpack_require__(4);
162
181
 
163
182
  // EXTERNAL MODULE: external "@splunk/react-icons/SVG"
164
- var SVG_ = __webpack_require__(25);
183
+ var SVG_ = __webpack_require__(32);
165
184
  var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
166
185
 
167
186
  // CONCATENATED MODULE: ./src/Tooltip/InfoIcon.tsx
@@ -209,7 +228,7 @@ var external_styled_components_ = __webpack_require__(3);
209
228
  var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
210
229
 
211
230
  // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
212
- var Clickable_ = __webpack_require__(12);
231
+ var Clickable_ = __webpack_require__(14);
213
232
  var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
214
233
 
215
234
  // CONCATENATED MODULE: ./src/Tooltip/TooltipStyles.ts
@@ -220,11 +239,11 @@ var TooltipStyles_size = '16px';
220
239
  var Styled = external_styled_components_default.a.span.withConfig({
221
240
  displayName: "TooltipStyles__Styled",
222
241
  componentId: "sc-67fvgm-0"
223
- })(["", ";"], themes_["mixins"].reset('block'));
242
+ })(["", ";position:relative;"], themes_["mixins"].reset('block'));
224
243
  var StyledInline = external_styled_components_default.a.span.withConfig({
225
244
  displayName: "TooltipStyles__StyledInline",
226
245
  componentId: "sc-67fvgm-1"
227
- })(["", ";"], themes_["mixins"].reset('inline-block'));
246
+ })(["", ";position:relative;"], themes_["mixins"].reset('inline-block'));
228
247
  var StyledToggle = external_styled_components_default.a.span.withConfig({
229
248
  displayName: "TooltipStyles__StyledToggle",
230
249
  componentId: "sc-67fvgm-2"
@@ -264,6 +283,10 @@ var StyledButton = external_styled_components_default()(Clickable_default.a).wit
264
283
  compact: Object(external_styled_components_["css"])(["padding:6px;"])
265
284
  }
266
285
  }), themes_["variables"].focusShadow);
286
+ var StyledHitArea = external_styled_components_default.a.svg.withConfig({
287
+ displayName: "TooltipStyles__StyledHitArea",
288
+ componentId: "sc-67fvgm-6"
289
+ })(["position:absolute;pointer-events:none;path{pointer-events:auto;stroke-width:0;stroke:transparent;fill:transparent;}"]);
267
290
 
268
291
  // CONCATENATED MODULE: ./src/Tooltip/Tooltip.tsx
269
292
  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -306,6 +329,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
306
329
 
307
330
 
308
331
 
332
+
309
333
  var propTypes = {
310
334
  /** @private */
311
335
  appearance: external_prop_types_default.a.string,
@@ -329,7 +353,7 @@ var propTypes = {
329
353
  };
330
354
  var defaultProps = {
331
355
  appearance: 'inverted',
332
- closeDelay: 0,
356
+ closeDelay: 300,
333
357
  closeWhen: 'default',
334
358
  contentRelationship: 'description',
335
359
  defaultPlacement: 'theme',
@@ -363,20 +387,20 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
363
387
  _defineProperty(_assertThisInitialized(_this), "timeout", void 0);
364
388
 
365
389
  _defineProperty(_assertThisInitialized(_this), "handleMount", function (el) {
366
- // Handle mouseenter and mouseleave with native events due to current issues with how they
390
+ // Handle mouse events with native events due to current issues with how they
367
391
  // are handled by react. See https://github.com/facebook/react/issues/4251,
368
392
  // https://github.com/facebook/react/issues/19419, and SUI-1232.
369
393
  if (el) {
370
394
  el.addEventListener('mouseenter', _this.handleMouseEnter);
371
395
  el.addEventListener('mouseleave', _this.handleMouseLeave);
372
- } else if (_this.state.anchor) {
373
- _this.state.anchor.removeEventListener('mouseenter', _this.handleMouseEnter);
396
+ } else if (_this.state.anchorEl) {
397
+ _this.state.anchorEl.removeEventListener('mouseenter', _this.handleMouseEnter);
374
398
 
375
- _this.state.anchor.removeEventListener('mouseleave', _this.handleMouseLeave);
399
+ _this.state.anchorEl.removeEventListener('mouseleave', _this.handleMouseLeave);
376
400
  }
377
401
 
378
402
  _this.setState({
379
- anchor: el
403
+ anchorEl: el
380
404
  });
381
405
  });
382
406
 
@@ -392,6 +416,35 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
392
416
 
393
417
  _this.setState({
394
418
  popoverEl: el
419
+ }, function () {
420
+ return _this.updateHitArea;
421
+ });
422
+ });
423
+
424
+ _defineProperty(_assertThisInitialized(_this), "handlePopoverOuterMount", function (el) {
425
+ _this.setState({
426
+ popoverOuterEl: el
427
+ });
428
+ });
429
+
430
+ _defineProperty(_assertThisInitialized(_this), "handleHitAreaMount", function (el) {
431
+ // Handle mouse events with native events due to current issues with how they
432
+ // are handled by react. See https://github.com/facebook/react/issues/4251,
433
+ // https://github.com/facebook/react/issues/19419, and SUI-1232.
434
+ if (el) {
435
+ el.addEventListener('mouseenter', _this.handleMouseEnterHitArea);
436
+ el.addEventListener('mousemove', _this.handleMouseMoveHitArea);
437
+ el.addEventListener('mouseleave', _this.handleMouseLeaveHitArea);
438
+ } else if (_this.state.hitAreaEl) {
439
+ _this.state.hitAreaEl.removeEventListener('mouseenter', _this.handleMouseEnterHitArea);
440
+
441
+ _this.state.hitAreaEl.removeEventListener('mousemove', _this.handleMouseMoveHitArea);
442
+
443
+ _this.state.hitAreaEl.removeEventListener('mouseleave', _this.handleMouseLeaveHitArea);
444
+ }
445
+
446
+ _this.setState({
447
+ hitAreaEl: el
395
448
  });
396
449
  });
397
450
 
@@ -402,25 +455,43 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
402
455
  });
403
456
 
404
457
  _defineProperty(_assertThisInitialized(_this), "handleMouseEnterPopover", function (e) {
405
- if (_this.state.lastCloseReason !== 'mouseLeavePopover') {
406
- _this.handleRequestOpen(e, {
407
- reason: 'mouseEnterPopover'
408
- });
409
- }
458
+ _this.handleRequestOpen(e, {
459
+ reason: 'mouseEnterPopover'
460
+ });
410
461
  });
411
462
 
412
- _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (e) {
413
- _this.handleRequestClose(e, {
414
- reason: 'mouseLeaveToggle'
463
+ _defineProperty(_assertThisInitialized(_this), "handleMouseEnterHitArea", function (e) {
464
+ _this.handleRequestOpen(e, {
465
+ reason: 'mouseEnterHitArea'
415
466
  });
416
467
  });
417
468
 
469
+ _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (e) {
470
+ var reason = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'mouseLeaveToggle';
471
+
472
+ if (e.relatedTarget == null || e.relatedTarget !== _this.state.popoverEl && e.relatedTarget !== _this.state.popoverOuterEl) {
473
+ _this.handleRequestClose(e, {
474
+ reason: reason
475
+ });
476
+ }
477
+ });
478
+
418
479
  _defineProperty(_assertThisInitialized(_this), "handleMouseLeavePopover", function (e) {
480
+ _this.handleMouseLeave(e, 'mouseLeavePopover');
481
+ });
482
+
483
+ _defineProperty(_assertThisInitialized(_this), "handleMouseLeaveHitArea", function (e) {
484
+ _this.handleMouseLeave(e, 'mouseLeaveHitArea');
485
+ });
486
+
487
+ _defineProperty(_assertThisInitialized(_this), "handleMouseMoveHitAreaImpl", function (e) {
419
488
  _this.handleRequestClose(e, {
420
- reason: 'mouseLeavePopover'
489
+ reason: 'mouseStopHitArea'
421
490
  });
422
491
  });
423
492
 
493
+ _defineProperty(_assertThisInitialized(_this), "handleMouseMoveHitArea", throttle_default()(_this.handleMouseMoveHitAreaImpl, 10));
494
+
424
495
  _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
425
496
  if (_this.props.closeWhen !== 'notOnClick') {
426
497
  _this.handleRequestClose(e, {
@@ -461,10 +532,6 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
461
532
  });
462
533
  }
463
534
 
464
- _this.setState({
465
- lastCloseReason: data.reason
466
- });
467
-
468
535
  (_this$props$onRequest = (_this$props = _this.props).onRequestClose) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props, e, data);
469
536
  }, closeDelay);
470
537
  });
@@ -479,7 +546,7 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
479
546
  }
480
547
 
481
548
  _this.timeout = setTimeout(function () {
482
- var _this$props$onRequest2, _this$props2;
549
+ var wasOpen = _this.isOpen();
483
550
 
484
551
  if (!_this.isControlled()) {
485
552
  _this.setState({
@@ -487,18 +554,114 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
487
554
  });
488
555
  }
489
556
 
490
- (_this$props$onRequest2 = (_this$props2 = _this.props).onRequestOpen) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props2, e, data);
557
+ if (!wasOpen) {
558
+ var _this$props$onRequest2, _this$props2;
559
+
560
+ (_this$props$onRequest2 = (_this$props2 = _this.props).onRequestOpen) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props2, e, data);
561
+ }
491
562
  }, finalDelay);
492
563
  });
493
564
 
494
- _this.controlledExternally = Object(external_lodash_["has"])(props, 'open');
565
+ _defineProperty(_assertThisInitialized(_this), "updateHitArea", function () {
566
+ var placementInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
567
+ var placement = placementInfo.placement;
568
+
569
+ _this.setState(function (_ref) {
570
+ var anchorEl = _ref.anchorEl,
571
+ popoverEl = _ref.popoverEl,
572
+ statePopoverPlacement = _ref.popoverPlacement;
573
+ var popoverPlacement = placement != null ? placement : statePopoverPlacement;
574
+
575
+ if (anchorEl != null && popoverEl != null && popoverPlacement != null) {
576
+ var anchorRect = anchorEl.getBoundingClientRect();
577
+ var menuRect = popoverEl.getBoundingClientRect();
578
+
579
+ if (popoverPlacement === 'above' || popoverPlacement === 'below') {
580
+ var anchorLeftEdge = anchorRect.x - menuRect.x;
581
+ var verticalStart = anchorRect.height;
582
+ var verticalEnd = 0;
583
+
584
+ if (popoverPlacement === 'above') {
585
+ verticalStart = 0;
586
+ verticalEnd = anchorRect.height;
587
+ }
588
+
589
+ var menuStart = "0 ".concat(verticalStart);
590
+ var menuEnd = "".concat(menuRect.width, " ").concat(verticalStart);
591
+ var anchorStartNear = "".concat(anchorLeftEdge, " ").concat(verticalStart);
592
+ var anchorStartFar = "".concat(anchorLeftEdge, " ").concat(verticalEnd);
593
+ var anchorEndNear = "".concat(anchorLeftEdge + anchorRect.width, " ").concat(verticalStart);
594
+ var anchorEndFar = "".concat(anchorLeftEdge + anchorRect.width, " ").concat(verticalEnd);
595
+ var hitAreaPath = "\n M ".concat(menuStart, "\n S ").concat(anchorStartNear, " , ").concat(anchorStartFar, "\n L ").concat(anchorStartNear, "\n L ").concat(anchorEndNear, "\n L ").concat(anchorEndFar, "\n S ").concat(anchorEndNear, " , ").concat(menuEnd, "\n ");
596
+ return {
597
+ popoverPlacement: popoverPlacement,
598
+ hitAreaPath: hitAreaPath,
599
+ hitAreaStyle: {
600
+ left: menuRect.left - anchorRect.left,
601
+ top: 0,
602
+ width: menuRect.width,
603
+ height: anchorRect.height
604
+ }
605
+ };
606
+ }
607
+
608
+ if (popoverPlacement === 'left' || popoverPlacement === 'right') {
609
+ var anchorTopEdge = anchorRect.top - menuRect.top;
610
+ var horizontalStart = 0;
611
+ var horizontalEnd = anchorRect.width;
612
+
613
+ if (popoverPlacement === 'right') {
614
+ horizontalStart = anchorRect.width;
615
+ horizontalEnd = 0;
616
+ }
617
+
618
+ var _menuStart = "".concat(horizontalStart, " 0");
619
+
620
+ var _menuEnd = "".concat(horizontalStart, " ").concat(menuRect.height);
621
+
622
+ var _anchorStartNear = "".concat(horizontalStart, " ").concat(anchorTopEdge);
623
+
624
+ var _anchorStartFar = "".concat(horizontalEnd, " ").concat(anchorTopEdge);
625
+
626
+ var _anchorEndNear = "".concat(horizontalStart, " ").concat(anchorTopEdge + anchorRect.height);
627
+
628
+ var _anchorEndFar = "".concat(horizontalEnd, " ").concat(anchorTopEdge + anchorRect.height);
629
+
630
+ var _hitAreaPath = "\n M ".concat(_menuStart, "\n S ").concat(_anchorStartNear, " , ").concat(_anchorStartFar, "\n L ").concat(_anchorStartNear, "\n L ").concat(_anchorEndNear, "\n L ").concat(_anchorEndFar, "\n S ").concat(_anchorEndNear, " , ").concat(_menuEnd, "\n ");
631
+
632
+ return {
633
+ popoverPlacement: popoverPlacement,
634
+ hitAreaPath: _hitAreaPath,
635
+ hitAreaStyle: {
636
+ left: 0,
637
+ top: menuRect.top - anchorRect.top,
638
+ width: anchorRect.width,
639
+ height: menuRect.height
640
+ }
641
+ };
642
+ }
643
+ }
644
+
645
+ return {
646
+ popoverPlacement: popoverPlacement,
647
+ hitAreaPath: null,
648
+ hitAreaStyle: {}
649
+ };
650
+ });
651
+ });
652
+
653
+ _this.controlledExternally = has_default()(props, 'open');
495
654
  _this.popoverId = Object(id_["createDOMID"])('popover');
496
655
  _this.ariaId = Object(id_["createDOMID"])('aria-id');
497
656
  _this.state = {
498
- anchor: null,
657
+ anchorEl: null,
499
658
  open: false,
500
659
  popoverEl: null,
501
- lastCloseReason: null
660
+ popoverOuterEl: null,
661
+ popoverPlacement: null,
662
+ hitAreaEl: null,
663
+ hitAreaPath: null,
664
+ hitAreaStyle: {}
502
665
  };
503
666
  return _this;
504
667
  }
@@ -520,6 +683,12 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
520
683
  value: function isControlled() {
521
684
  return this.controlledExternally;
522
685
  }
686
+ }, {
687
+ key: "isOpen",
688
+ value: function isOpen() {
689
+ var hasContent = !!this.props.content;
690
+ return !!this.state.anchorEl && this.isControlled() ? this.props.open : hasContent && this.state.open;
691
+ }
523
692
  }, {
524
693
  key: "render",
525
694
  value: function render() {
@@ -532,14 +701,16 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
532
701
  inline = _this$props3.inline,
533
702
  onRequestClose = _this$props3.onRequestClose,
534
703
  onRequestOpen = _this$props3.onRequestOpen,
535
- open = _this$props3.open,
536
704
  splunkTheme = _this$props3.splunkTheme,
537
705
  contentRelationship = _this$props3.contentRelationship,
538
- otherProps = _objectWithoutProperties(_this$props3, ["appearance", "children", "content", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "open", "splunkTheme", "contentRelationship"]);
706
+ otherProps = _objectWithoutProperties(_this$props3, ["appearance", "children", "content", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "splunkTheme", "contentRelationship"]);
539
707
 
540
- var anchor = this.state.anchor;
708
+ var _this$state = this.state,
709
+ anchorEl = _this$state.anchorEl,
710
+ hitAreaPath = _this$state.hitAreaPath,
711
+ hitAreaStyle = _this$state.hitAreaStyle;
541
712
  var hasContent = !!content;
542
- var openRender = !!anchor && this.isControlled() ? open : hasContent && this.state.open;
713
+ var openRender = this.isOpen();
543
714
  var StyledComp = inline ? StyledInline : Styled;
544
715
  var StyledToggleComp = inline ? StyledToggleInline : StyledToggle;
545
716
  var isPrisma = splunkTheme.isPrisma;
@@ -583,17 +754,30 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
583
754
  "aria-hidden": "true"
584
755
  }, "?"), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('More info')))), hasContent && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
585
756
  id: this.ariaId
586
- }, content)), /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
757
+ }, content)), openRender && hitAreaPath != null && /*#__PURE__*/external_react_default.a.createElement(StyledHitArea, {
758
+ style: hitAreaStyle
759
+ }, /*#__PURE__*/external_react_default.a.createElement("path", {
760
+ d: hitAreaPath,
761
+ ref: this.handleHitAreaMount
762
+ })), /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
587
763
  role: "tooltip",
588
764
  align: "center",
589
- anchor: anchor,
765
+ anchor: anchorEl // override Popver's default animation to make it faster
766
+ // this keeps the overall amount of time the Tooltip is on-screen the same
767
+ // even with the increased default closeDelay to address SUI-5116
768
+ ,
769
+ animationConfig: {
770
+ tension: 400
771
+ },
590
772
  appearance: appearance,
591
773
  closeReasons: ['offScreen', 'escapeKey'],
592
774
  defaultPlacement: defaultPlacement === 'theme' ? placement : defaultPlacement,
593
775
  id: this.popoverId,
594
776
  open: openRender,
777
+ onReposition: this.updateHitArea,
595
778
  onRequestClose: this.handlePopoverOnRequestClose,
596
- elementRef: this.handlePopoverMount
779
+ elementRef: this.handlePopoverMount,
780
+ outerRef: this.handlePopoverOuterMount
597
781
  }, /*#__PURE__*/external_react_default.a.createElement(StyledContent, {
598
782
  $isLabel: contentRelationship === 'label'
599
783
  }, content)));
@@ -616,44 +800,37 @@ TooltipWithTheme.propTypes = Tooltip_Tooltip.propTypes;
616
800
 
617
801
  /***/ }),
618
802
 
619
- /***/ 18:
803
+ /***/ 23:
620
804
  /***/ (function(module, exports) {
621
805
 
622
806
  module.exports = require("@splunk/react-ui/Popover");
623
807
 
624
808
  /***/ }),
625
809
 
626
- /***/ 2:
810
+ /***/ 3:
627
811
  /***/ (function(module, exports) {
628
812
 
629
- module.exports = require("react");
813
+ module.exports = require("styled-components");
630
814
 
631
815
  /***/ }),
632
816
 
633
- /***/ 25:
817
+ /***/ 31:
634
818
  /***/ (function(module, exports) {
635
819
 
636
- module.exports = require("@splunk/react-icons/SVG");
820
+ module.exports = require("lodash/throttle");
637
821
 
638
822
  /***/ }),
639
823
 
640
- /***/ 3:
824
+ /***/ 32:
641
825
  /***/ (function(module, exports) {
642
826
 
643
- module.exports = require("styled-components");
827
+ module.exports = require("@splunk/react-icons/SVG");
644
828
 
645
829
  /***/ }),
646
830
 
647
831
  /***/ 4:
648
832
  /***/ (function(module, exports) {
649
833
 
650
- module.exports = require("lodash");
651
-
652
- /***/ }),
653
-
654
- /***/ 5:
655
- /***/ (function(module, exports) {
656
-
657
834
  module.exports = require("@splunk/ui-utils/i18n");
658
835
 
659
836
  /***/ })
package/TransitionOpen.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 180);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 229);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -101,7 +101,21 @@ module.exports = require("prop-types");
101
101
 
102
102
  /***/ }),
103
103
 
104
- /***/ 180:
104
+ /***/ 10:
105
+ /***/ (function(module, exports) {
106
+
107
+ module.exports = require("lodash/keys");
108
+
109
+ /***/ }),
110
+
111
+ /***/ 2:
112
+ /***/ (function(module, exports) {
113
+
114
+ module.exports = require("react");
115
+
116
+ /***/ }),
117
+
118
+ /***/ 229:
105
119
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
106
120
 
107
121
  "use strict";
@@ -119,20 +133,25 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
119
133
  var external_prop_types_ = __webpack_require__(1);
120
134
  var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
121
135
 
122
- // EXTERNAL MODULE: external "lodash"
123
- var external_lodash_ = __webpack_require__(4);
136
+ // EXTERNAL MODULE: external "lodash/keys"
137
+ var keys_ = __webpack_require__(10);
138
+ var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
139
+
140
+ // EXTERNAL MODULE: external "lodash/omit"
141
+ var omit_ = __webpack_require__(5);
142
+ var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
124
143
 
125
144
  // EXTERNAL MODULE: external "@splunk/react-ui/Animation"
126
- var Animation_ = __webpack_require__(34);
145
+ var Animation_ = __webpack_require__(43);
127
146
 
128
147
  // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
129
- var focus_ = __webpack_require__(28);
148
+ var focus_ = __webpack_require__(35);
130
149
 
131
150
  // EXTERNAL MODULE: external "@splunk/ui-utils/style"
132
- var style_ = __webpack_require__(32);
151
+ var style_ = __webpack_require__(40);
133
152
 
134
153
  // EXTERNAL MODULE: external "react-spring"
135
- var external_react_spring_ = __webpack_require__(21);
154
+ var external_react_spring_ = __webpack_require__(26);
136
155
 
137
156
  // EXTERNAL MODULE: external "styled-components"
138
157
  var external_styled_components_ = __webpack_require__(3);
@@ -195,6 +214,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
195
214
 
196
215
 
197
216
 
217
+
198
218
  var propTypes = {
199
219
  animation: external_prop_types_default.a.oneOf(['slideFromTop', 'slideFromRight', 'slideFromBottom', 'slideFromLeft', 'expandHeight', 'expandWidth', 'none']),
200
220
  animateOnMount: external_prop_types_default.a.bool,
@@ -342,7 +362,7 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
342
362
  id: outerId
343
363
  }, /*#__PURE__*/external_react_default.a.createElement(StyledInner, _extends({
344
364
  "data-test": "transition-open"
345
- }, Object(external_lodash_["omit"])(_this.props, Object(external_lodash_["keys"])(TransitionOpen.propTypes)), {
365
+ }, omit_default()(_this.props, keys_default()(TransitionOpen.propTypes)), {
346
366
  ref: _this.handleMount,
347
367
  tabIndex: -1,
348
368
  className: innerClassName,
@@ -364,7 +384,7 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
364
384
  id: outerId
365
385
  }, (open || animating) && /*#__PURE__*/external_react_default.a.createElement(StyledInner, _extends({
366
386
  "data-test": "transition-open"
367
- }, Object(external_lodash_["omit"])(_this.props, Object(external_lodash_["keys"])(TransitionOpen.propTypes)), {
387
+ }, omit_default()(_this.props, keys_default()(TransitionOpen.propTypes)), {
368
388
  ref: _this.handleMount,
369
389
  tabIndex: -1,
370
390
  className: innerClassName,
@@ -490,52 +510,45 @@ _defineProperty(TransitionOpen_TransitionOpen, "getDerivedStateFromProps", funct
490
510
 
491
511
  /***/ }),
492
512
 
493
- /***/ 2:
494
- /***/ (function(module, exports) {
495
-
496
- module.exports = require("react");
497
-
498
- /***/ }),
499
-
500
- /***/ 21:
513
+ /***/ 26:
501
514
  /***/ (function(module, exports) {
502
515
 
503
516
  module.exports = require("react-spring");
504
517
 
505
518
  /***/ }),
506
519
 
507
- /***/ 28:
520
+ /***/ 3:
508
521
  /***/ (function(module, exports) {
509
522
 
510
- module.exports = require("@splunk/ui-utils/focus");
523
+ module.exports = require("styled-components");
511
524
 
512
525
  /***/ }),
513
526
 
514
- /***/ 3:
527
+ /***/ 35:
515
528
  /***/ (function(module, exports) {
516
529
 
517
- module.exports = require("styled-components");
530
+ module.exports = require("@splunk/ui-utils/focus");
518
531
 
519
532
  /***/ }),
520
533
 
521
- /***/ 32:
534
+ /***/ 40:
522
535
  /***/ (function(module, exports) {
523
536
 
524
537
  module.exports = require("@splunk/ui-utils/style");
525
538
 
526
539
  /***/ }),
527
540
 
528
- /***/ 34:
541
+ /***/ 43:
529
542
  /***/ (function(module, exports) {
530
543
 
531
544
  module.exports = require("@splunk/react-ui/Animation");
532
545
 
533
546
  /***/ }),
534
547
 
535
- /***/ 4:
548
+ /***/ 5:
536
549
  /***/ (function(module, exports) {
537
550
 
538
- module.exports = require("lodash");
551
+ module.exports = require("lodash/omit");
539
552
 
540
553
  /***/ })
541
554
 
@@ -0,0 +1,2 @@
1
+ export { default } from './types/src/Typography';
2
+ export * from './types/src/Typography';