@splunk/react-ui 4.14.0 → 4.15.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.
- package/.dockerignore +2 -0
- package/Accordion.js +41 -16
- package/Anchor.js +9 -9
- package/Animation.js +6 -6
- package/AnimationToggle.js +2 -2
- package/Box.js +9 -9
- package/Button.js +35 -34
- package/ButtonGroup.js +9 -9
- package/ButtonSimple.js +14 -14
- package/CHANGELOG.md +30 -0
- package/Calendar.js +124 -106
- package/Card.js +68 -68
- package/CardLayout.js +9 -9
- package/Chip.js +23 -23
- package/Clickable.js +38 -14
- package/CloseButton.js +23 -23
- package/Code.js +484 -436
- package/CollapsiblePanel.js +59 -34
- package/Color.js +297 -187
- package/ColumnLayout.js +18 -17
- package/ComboBox.js +81 -32
- package/Concertina.js +88 -27
- package/ControlGroup.js +81 -24
- package/Date.js +44 -31
- package/DefinitionList.js +14 -8
- package/Divider.d.ts +2 -0
- package/Divider.js +9 -9
- package/Dockerfile.enterprise.storybook +7 -0
- package/Dockerfile.prisma.storybook +7 -0
- package/Dockerfile.visual +10 -0
- package/Dropdown.js +78 -18
- package/EventListener.js +17 -17
- package/File.js +96 -43
- package/FormRows.js +38 -37
- package/Heading.js +83 -55
- package/Image.js +67 -42
- package/JSONTree.js +106 -21
- package/Layer.js +59 -34
- package/Link.js +17 -17
- package/List.js +3 -3
- package/Markdown.js +71 -65
- package/Menu.js +155 -121
- package/Message.js +129 -129
- package/MessageBar.js +136 -136
- package/Modal.js +57 -32
- package/ModalLayer.js +15 -15
- package/Monogram.js +18 -17
- package/Multiselect.js +2793 -2315
- package/Number.js +74 -37
- package/Paginator.js +99 -86
- package/Paragraph.js +10 -10
- package/Popover.js +191 -54
- package/Progress.js +23 -22
- package/RadioBar.js +32 -14
- package/RadioList.js +17 -11
- package/Resize.js +33 -20
- package/ResultsMenu.js +36 -23
- package/ScreenReaderContent.js +9 -9
- package/Scroll.js +50 -25
- package/ScrollContainerContext.js +48 -48
- package/Search.js +68 -31
- package/Select.js +347 -69
- package/SidePanel.js +37 -24
- package/Slider.js +54 -24
- package/SlidingPanels.js +52 -14
- package/SplitButton.js +23 -22
- package/StaticContent.js +9 -9
- package/StepBar.js +22 -22
- package/Switch.js +18 -13
- package/TabBar.js +22 -22
- package/TabLayout.js +43 -18
- package/Table.js +371 -162
- package/Text.js +91 -49
- package/TextArea.d.ts +2 -0
- package/TextArea.js +127 -49
- package/Tooltip.js +236 -59
- package/TransitionOpen.js +39 -26
- package/Typography.d.ts +2 -0
- package/Typography.js +17 -16
- package/WaitSpinner.js +15 -15
- package/docker-compose.yml +42 -0
- package/package.json +12 -10
- package/test-runner-jest.config.js +11 -6
- package/types/src/Accordion/AccordionContext.d.ts +1 -0
- package/types/src/Button/docs/examples/Selected.d.ts +2 -2
- package/types/src/ButtonGroup/ButtonGroupContext.d.ts +1 -0
- package/types/src/Calendar/Calendar.d.ts +2 -0
- package/types/src/CardLayout/CardLayoutContext.d.ts +1 -0
- package/types/src/Concertina/ConcertinaContext.d.ts +1 -0
- package/types/src/ControlGroup/ControlGroup.d.ts +15 -8
- package/types/src/ControlGroup/docs/examples/HelpWithErrorText.d.ts +2 -0
- package/types/src/ControlGroup/docs/examples/Required.d.ts +2 -0
- package/types/src/File/File.d.ts +4 -2
- package/types/src/File/FileContext.d.ts +1 -0
- package/types/src/FormRows/FormRowsContext.d.ts +1 -0
- package/types/src/Markdown/renderers/MarkdownLink.d.ts +1 -1
- package/types/src/Menu/MenuContext.d.ts +1 -0
- package/types/src/Modal/ModalContext.d.ts +1 -0
- package/types/src/Multiselect/Compact.d.ts +10 -1
- package/types/src/Multiselect/Multiselect.d.ts +12 -1
- package/types/src/Multiselect/Normal.d.ts +2 -0
- package/types/src/Popover/Popover.d.ts +25 -5
- package/types/src/Popover/PopoverContext.d.ts +1 -0
- package/types/src/RadioBar/RadioBar.d.ts +5 -3
- package/types/src/RadioBar/RadioBarContext.d.ts +1 -0
- package/types/src/RadioList/RadioList.d.ts +5 -1
- package/types/src/RadioList/RadioListContext.d.ts +1 -0
- package/types/src/Select/SelectBase.d.ts +2 -0
- package/types/src/Slider/Slider.d.ts +5 -3
- package/types/src/StepBar/StepBarContext.d.ts +1 -0
- package/types/src/Switch/Switch.d.ts +2 -0
- package/types/src/TabBar/TabBarContext.d.ts +1 -0
- package/types/src/Table/Head.d.ts +2 -0
- package/types/src/Table/TableContext.d.ts +1 -0
- package/types/src/Text/Text.d.ts +5 -3
- package/types/src/TextArea/TextArea.d.ts +5 -3
- package/types/src/Tooltip/Tooltip.d.ts +16 -4
- package/types/src/useForceUpdate/useForceUpdate.d.ts +1 -0
- package/useForceUpdate.js +9 -9
- package/useKeyPress.js +2 -2
- package/usePrevious.js +9 -9
- package/.storybook-visual/config/snapshotResolver.js +0 -29
- package/.storybook-visual/main.js +0 -22
- package/.storybook-visual/preview.jsx +0 -31
- package/.storybook-visual/scripts/test.sh +0 -108
- 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 =
|
|
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
|
-
/***/
|
|
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
|
-
/***/
|
|
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
|
-
/***/
|
|
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
|
|
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__(
|
|
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__(
|
|
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__(
|
|
177
|
+
var id_ = __webpack_require__(13);
|
|
159
178
|
|
|
160
179
|
// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
|
|
161
|
-
var i18n_ = __webpack_require__(
|
|
180
|
+
var i18n_ = __webpack_require__(4);
|
|
162
181
|
|
|
163
182
|
// EXTERNAL MODULE: external "@splunk/react-icons/SVG"
|
|
164
|
-
var SVG_ = __webpack_require__(
|
|
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__(
|
|
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:
|
|
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
|
|
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.
|
|
373
|
-
_this.state.
|
|
396
|
+
} else if (_this.state.anchorEl) {
|
|
397
|
+
_this.state.anchorEl.removeEventListener('mouseenter', _this.handleMouseEnter);
|
|
374
398
|
|
|
375
|
-
_this.state.
|
|
399
|
+
_this.state.anchorEl.removeEventListener('mouseleave', _this.handleMouseLeave);
|
|
376
400
|
}
|
|
377
401
|
|
|
378
402
|
_this.setState({
|
|
379
|
-
|
|
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
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
});
|
|
409
|
-
}
|
|
458
|
+
_this.handleRequestOpen(e, {
|
|
459
|
+
reason: 'mouseEnterPopover'
|
|
460
|
+
});
|
|
410
461
|
});
|
|
411
462
|
|
|
412
|
-
_defineProperty(_assertThisInitialized(_this), "
|
|
413
|
-
_this.
|
|
414
|
-
reason: '
|
|
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: '
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
657
|
+
anchorEl: null,
|
|
499
658
|
open: false,
|
|
500
659
|
popoverEl: null,
|
|
501
|
-
|
|
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", "
|
|
706
|
+
otherProps = _objectWithoutProperties(_this$props3, ["appearance", "children", "content", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "splunkTheme", "contentRelationship"]);
|
|
539
707
|
|
|
540
|
-
var
|
|
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 =
|
|
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(
|
|
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:
|
|
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
|
-
/***/
|
|
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
|
-
/***/
|
|
810
|
+
/***/ 3:
|
|
627
811
|
/***/ (function(module, exports) {
|
|
628
812
|
|
|
629
|
-
module.exports = require("
|
|
813
|
+
module.exports = require("styled-components");
|
|
630
814
|
|
|
631
815
|
/***/ }),
|
|
632
816
|
|
|
633
|
-
/***/
|
|
817
|
+
/***/ 31:
|
|
634
818
|
/***/ (function(module, exports) {
|
|
635
819
|
|
|
636
|
-
module.exports = require("
|
|
820
|
+
module.exports = require("lodash/throttle");
|
|
637
821
|
|
|
638
822
|
/***/ }),
|
|
639
823
|
|
|
640
|
-
/***/
|
|
824
|
+
/***/ 32:
|
|
641
825
|
/***/ (function(module, exports) {
|
|
642
826
|
|
|
643
|
-
module.exports = require("
|
|
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 =
|
|
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
|
-
/***/
|
|
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
|
|
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__(
|
|
145
|
+
var Animation_ = __webpack_require__(43);
|
|
127
146
|
|
|
128
147
|
// EXTERNAL MODULE: external "@splunk/ui-utils/focus"
|
|
129
|
-
var focus_ = __webpack_require__(
|
|
148
|
+
var focus_ = __webpack_require__(35);
|
|
130
149
|
|
|
131
150
|
// EXTERNAL MODULE: external "@splunk/ui-utils/style"
|
|
132
|
-
var style_ = __webpack_require__(
|
|
151
|
+
var style_ = __webpack_require__(40);
|
|
133
152
|
|
|
134
153
|
// EXTERNAL MODULE: external "react-spring"
|
|
135
|
-
var external_react_spring_ = __webpack_require__(
|
|
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
|
-
},
|
|
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
|
-
},
|
|
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
|
-
/***/
|
|
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
|
-
/***/
|
|
520
|
+
/***/ 3:
|
|
508
521
|
/***/ (function(module, exports) {
|
|
509
522
|
|
|
510
|
-
module.exports = require("
|
|
523
|
+
module.exports = require("styled-components");
|
|
511
524
|
|
|
512
525
|
/***/ }),
|
|
513
526
|
|
|
514
|
-
/***/
|
|
527
|
+
/***/ 35:
|
|
515
528
|
/***/ (function(module, exports) {
|
|
516
529
|
|
|
517
|
-
module.exports = require("
|
|
530
|
+
module.exports = require("@splunk/ui-utils/focus");
|
|
518
531
|
|
|
519
532
|
/***/ }),
|
|
520
533
|
|
|
521
|
-
/***/
|
|
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
|
-
/***/
|
|
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
|
-
/***/
|
|
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
|
|
package/Typography.d.ts
ADDED