@splunk/react-ui 4.19.0 → 4.21.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/Accordion.js +114 -230
- package/Anchor.js +74 -150
- package/Animation.js +52 -124
- package/AnimationToggle.js +86 -146
- package/Box.js +77 -153
- package/Breadcrumbs.d.ts +2 -0
- package/Breadcrumbs.js +207 -0
- package/Button.js +168 -316
- package/ButtonGroup.js +84 -168
- package/ButtonSimple.js +224 -324
- package/CHANGELOG.md +35 -0
- package/Calendar.js +264 -462
- package/Card.js +223 -371
- package/CardLayout.js +87 -163
- package/Chip.js +199 -323
- package/Clickable.js +132 -248
- package/CloseButton.js +92 -200
- package/Code.js +188 -251
- package/CollapsiblePanel.js +214 -370
- package/Color.js +267 -495
- package/ColumnLayout.js +152 -254
- package/ComboBox.js +197 -371
- package/Concertina.js +214 -374
- package/ControlGroup.js +164 -288
- package/Date.js +154 -304
- package/DefinitionList.js +104 -180
- package/Divider.js +80 -156
- package/Dropdown.js +121 -263
- package/DualListbox.js +408 -601
- package/EventListener.js +70 -138
- package/File.js +343 -547
- package/FormRows.js +232 -414
- package/Heading.js +94 -164
- package/Image.js +167 -323
- package/JSONTree.js +166 -314
- package/Layer.js +221 -388
- package/Link.js +133 -239
- package/List.js +85 -161
- package/Markdown.js +230 -355
- package/Menu.js +396 -647
- package/Message.js +248 -437
- package/MessageBar.js +220 -408
- package/Modal.js +201 -365
- package/ModalLayer.js +96 -196
- package/Monogram.js +112 -204
- package/Multiselect.js +2675 -2807
- package/Number.js +178 -334
- package/Paginator.js +170 -336
- package/Paragraph.js +77 -153
- package/Popover.js +436 -623
- package/Progress.js +139 -255
- package/RadioBar.js +156 -280
- package/RadioList.js +182 -282
- package/Resize.js +173 -307
- package/ResultsMenu.js +183 -304
- package/ScreenReaderContent.js +75 -151
- package/Scroll.js +125 -267
- package/ScrollContainerContext.js +129 -201
- package/Search.js +188 -354
- package/Select.js +1243 -1248
- package/SidePanel.js +106 -214
- package/Slider.js +198 -348
- package/SlidingPanels.js +138 -280
- package/SplitButton.js +141 -273
- package/StaticContent.js +84 -168
- package/StepBar.js +138 -246
- package/Switch.js +261 -385
- package/TabBar.js +261 -398
- package/TabLayout.js +122 -238
- package/Table.js +975 -1447
- package/Text.js +335 -549
- package/TextArea.js +315 -537
- package/Tooltip.js +152 -292
- package/TransitionOpen.js +118 -242
- package/Typography.js +81 -157
- package/WaitSpinner.js +117 -209
- package/package.json +20 -21
- package/stubs-splunkui.d.ts +4 -1
- package/types/src/Breadcrumbs/Breadcrumbs.d.ts +25 -0
- package/types/src/Breadcrumbs/Item.d.ts +42 -0
- package/types/src/Breadcrumbs/docs/examples/Adornments.d.ts +2 -0
- package/types/src/Breadcrumbs/docs/examples/Basic.d.ts +2 -0
- package/types/src/Breadcrumbs/index.d.ts +2 -0
- package/types/src/Code/Code.d.ts +1 -1
- package/types/src/ComboBox/Option.d.ts +1 -1
- package/types/src/Concertina/Concertina.d.ts +4 -0
- package/types/src/Link/Link.d.ts +12 -3
- package/types/src/Link/docs/examples/NewWindow.d.ts +2 -0
- package/types/src/Markdown/Markdown.d.ts +1 -1
- package/types/src/Markdown/renderers/MarkdownHeading.d.ts +1 -1
- package/types/src/Menu/Item.d.ts +1 -1
- package/types/src/Menu/Menu.d.ts +1 -0
- package/types/src/MessageBar/docs/examples/WithActions.d.ts +2 -0
- package/types/src/Multiselect/Compact.d.ts +4 -0
- package/types/src/Multiselect/Multiselect.d.ts +5 -0
- package/types/src/Multiselect/Option.d.ts +1 -1
- package/types/src/Multiselect/docs/examples/CompactSelectAll.d.ts +2 -0
- package/types/src/Search/Option.d.ts +1 -1
- package/types/src/Select/Option.d.ts +1 -1
- package/types/src/Select/OptionBase.d.ts +1 -1
- package/types/src/Select/SelectAllOption.d.ts +14 -0
- package/types/src/Select/SelectBase.d.ts +11 -3
- package/types/src/Table/Table.d.ts +4 -0
- package/types/src/Text/Text.d.ts +3 -3
- package/types/src/TextArea/TextArea.d.ts +3 -3
- package/types/src/fixtures/FetchOptions.d.ts +2 -8
- package/useForceUpdate.js +46 -110
- package/useKeyPress.js +50 -107
- package/usePrevious.js +47 -111
- package/useRovingFocus.js +53 -133
- package/types/src/Link/docs/examples/NewTab.d.ts +0 -2
- package/types/src/Typography/docs/examples/Variants.d.ts +0 -2
- /package/types/src/Table/docs/examples/{DockedHeader.d.ts → DockedHeaderScrollbar.d.ts} +0 -0
- /package/types/src/Table/docs/examples/prisma/{DockedHeader.d.ts → DockedHeaderScrollbar.d.ts} +0 -0
package/TabBar.js
CHANGED
|
@@ -1,226 +1,119 @@
|
|
|
1
|
-
|
|
2
|
-
/******/
|
|
3
|
-
/******/ // The
|
|
4
|
-
/******/ var
|
|
5
|
-
/******/
|
|
6
|
-
|
|
7
|
-
/******/
|
|
8
|
-
/******/
|
|
9
|
-
/******/ //
|
|
10
|
-
/******/
|
|
11
|
-
/******/
|
|
12
|
-
/******/
|
|
13
|
-
/******/
|
|
14
|
-
/******/
|
|
15
|
-
/******/
|
|
16
|
-
/******/
|
|
17
|
-
/******/
|
|
1
|
+
/******/ (() => { // webpackBootstrap
|
|
2
|
+
/******/ "use strict";
|
|
3
|
+
/******/ // The require scope
|
|
4
|
+
/******/ var __webpack_require__ = {};
|
|
5
|
+
/******/
|
|
6
|
+
/************************************************************************/
|
|
7
|
+
/******/ /* webpack/runtime/compat get default export */
|
|
8
|
+
/******/ (() => {
|
|
9
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
10
|
+
/******/ __webpack_require__.n = (module) => {
|
|
11
|
+
/******/ var getter = module && module.__esModule ?
|
|
12
|
+
/******/ () => (module['default']) :
|
|
13
|
+
/******/ () => (module);
|
|
14
|
+
/******/ __webpack_require__.d(getter, { a: getter });
|
|
15
|
+
/******/ return getter;
|
|
16
|
+
/******/ };
|
|
17
|
+
/******/ })();
|
|
18
|
+
/******/
|
|
19
|
+
/******/ /* webpack/runtime/define property getters */
|
|
20
|
+
/******/ (() => {
|
|
21
|
+
/******/ // define getter functions for harmony exports
|
|
22
|
+
/******/ __webpack_require__.d = (exports, definition) => {
|
|
23
|
+
/******/ for(var key in definition) {
|
|
24
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
25
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
26
|
+
/******/ }
|
|
27
|
+
/******/ }
|
|
28
|
+
/******/ };
|
|
29
|
+
/******/ })();
|
|
30
|
+
/******/
|
|
31
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
32
|
+
/******/ (() => {
|
|
33
|
+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
34
|
+
/******/ })();
|
|
35
|
+
/******/
|
|
36
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
37
|
+
/******/ (() => {
|
|
38
|
+
/******/ // define __esModule on exports
|
|
39
|
+
/******/ __webpack_require__.r = (exports) => {
|
|
40
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
41
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
42
|
+
/******/ }
|
|
43
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
18
44
|
/******/ };
|
|
19
|
-
/******/
|
|
20
|
-
/******/
|
|
21
|
-
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
22
|
-
/******/
|
|
23
|
-
/******/ // Flag the module as loaded
|
|
24
|
-
/******/ module.l = true;
|
|
25
|
-
/******/
|
|
26
|
-
/******/ // Return the exports of the module
|
|
27
|
-
/******/ return module.exports;
|
|
28
|
-
/******/ }
|
|
29
|
-
/******/
|
|
30
|
-
/******/
|
|
31
|
-
/******/ // expose the modules object (__webpack_modules__)
|
|
32
|
-
/******/ __webpack_require__.m = modules;
|
|
33
|
-
/******/
|
|
34
|
-
/******/ // expose the module cache
|
|
35
|
-
/******/ __webpack_require__.c = installedModules;
|
|
36
|
-
/******/
|
|
37
|
-
/******/ // define getter function for harmony exports
|
|
38
|
-
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
39
|
-
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
40
|
-
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
|
41
|
-
/******/ }
|
|
42
|
-
/******/ };
|
|
43
|
-
/******/
|
|
44
|
-
/******/ // define __esModule on exports
|
|
45
|
-
/******/ __webpack_require__.r = function(exports) {
|
|
46
|
-
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
47
|
-
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
48
|
-
/******/ }
|
|
49
|
-
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
50
|
-
/******/ };
|
|
51
|
-
/******/
|
|
52
|
-
/******/ // create a fake namespace object
|
|
53
|
-
/******/ // mode & 1: value is a module id, require it
|
|
54
|
-
/******/ // mode & 2: merge all properties of value into the ns
|
|
55
|
-
/******/ // mode & 4: return value when already ns object
|
|
56
|
-
/******/ // mode & 8|1: behave like require
|
|
57
|
-
/******/ __webpack_require__.t = function(value, mode) {
|
|
58
|
-
/******/ if(mode & 1) value = __webpack_require__(value);
|
|
59
|
-
/******/ if(mode & 8) return value;
|
|
60
|
-
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
|
61
|
-
/******/ var ns = Object.create(null);
|
|
62
|
-
/******/ __webpack_require__.r(ns);
|
|
63
|
-
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
|
64
|
-
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
|
65
|
-
/******/ return ns;
|
|
66
|
-
/******/ };
|
|
67
|
-
/******/
|
|
68
|
-
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
69
|
-
/******/ __webpack_require__.n = function(module) {
|
|
70
|
-
/******/ var getter = module && module.__esModule ?
|
|
71
|
-
/******/ function getDefault() { return module['default']; } :
|
|
72
|
-
/******/ function getModuleExports() { return module; };
|
|
73
|
-
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
74
|
-
/******/ return getter;
|
|
75
|
-
/******/ };
|
|
76
|
-
/******/
|
|
77
|
-
/******/ // Object.prototype.hasOwnProperty.call
|
|
78
|
-
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
79
|
-
/******/
|
|
80
|
-
/******/ // __webpack_public_path__
|
|
81
|
-
/******/ __webpack_require__.p = "";
|
|
82
|
-
/******/
|
|
83
|
-
/******/
|
|
84
|
-
/******/ // Load entry module and return exports
|
|
85
|
-
/******/ return __webpack_require__(__webpack_require__.s = 184);
|
|
86
|
-
/******/ })
|
|
45
|
+
/******/ })();
|
|
46
|
+
/******/
|
|
87
47
|
/************************************************************************/
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
/***/ 0:
|
|
91
|
-
/***/ (function(module, exports) {
|
|
92
|
-
|
|
93
|
-
module.exports = require("@splunk/themes");
|
|
94
|
-
|
|
95
|
-
/***/ }),
|
|
96
|
-
|
|
97
|
-
/***/ 1:
|
|
98
|
-
/***/ (function(module, exports) {
|
|
99
|
-
|
|
100
|
-
module.exports = require("prop-types");
|
|
101
|
-
|
|
102
|
-
/***/ }),
|
|
103
|
-
|
|
104
|
-
/***/ 10:
|
|
105
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
106
|
-
|
|
107
|
-
"use strict";
|
|
108
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
|
|
109
|
-
/**
|
|
110
|
-
* Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
|
|
111
|
-
*
|
|
112
|
-
* @param ref - The React callback or object ref. Can be `null` or `undefined`.
|
|
113
|
-
* @param current - The new value of the ref.
|
|
114
|
-
*/
|
|
115
|
-
function updateReactRef(ref, current) {
|
|
116
|
-
if (ref) {
|
|
117
|
-
if (typeof ref === 'function') {
|
|
118
|
-
ref(current);
|
|
119
|
-
} else {
|
|
120
|
-
// the public signature of this util uses React.Ref<T> to mirror the way React types refs.
|
|
121
|
-
// the intention here is to signal "we will take care of setting 'current', not you".
|
|
122
|
-
ref.current = current; // eslint-disable-line no-param-reassign
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
/***/ }),
|
|
130
|
-
|
|
131
|
-
/***/ 12:
|
|
132
|
-
/***/ (function(module, exports) {
|
|
133
|
-
|
|
134
|
-
module.exports = require("@splunk/react-ui/Clickable");
|
|
135
|
-
|
|
136
|
-
/***/ }),
|
|
137
|
-
|
|
138
|
-
/***/ 14:
|
|
139
|
-
/***/ (function(module, exports) {
|
|
140
|
-
|
|
141
|
-
module.exports = require("@splunk/react-ui/ScreenReaderContent");
|
|
142
|
-
|
|
143
|
-
/***/ }),
|
|
144
|
-
|
|
145
|
-
/***/ 184:
|
|
146
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
147
|
-
|
|
148
|
-
"use strict";
|
|
48
|
+
var __webpack_exports__ = {};
|
|
149
49
|
// ESM COMPAT FLAG
|
|
150
50
|
__webpack_require__.r(__webpack_exports__);
|
|
151
51
|
|
|
152
52
|
// EXPORTS
|
|
153
|
-
__webpack_require__.d(__webpack_exports__,
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
var
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
var Styled = external_styled_components_default.a.div.withConfig({
|
|
53
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
54
|
+
Tab: () => (/* reexport */ TabBar_Tab),
|
|
55
|
+
"default": () => (/* reexport */ TabBar_TabBar)
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
;// CONCATENATED MODULE: external "react"
|
|
59
|
+
const external_react_namespaceObject = require("react");
|
|
60
|
+
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
|
|
61
|
+
;// CONCATENATED MODULE: external "prop-types"
|
|
62
|
+
const external_prop_types_namespaceObject = require("prop-types");
|
|
63
|
+
var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
|
|
64
|
+
;// CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
|
|
65
|
+
const keyboard_namespaceObject = require("@splunk/ui-utils/keyboard");
|
|
66
|
+
;// CONCATENATED MODULE: external "styled-components"
|
|
67
|
+
const external_styled_components_namespaceObject = require("styled-components");
|
|
68
|
+
var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
|
|
69
|
+
;// CONCATENATED MODULE: external "@splunk/themes"
|
|
70
|
+
const themes_namespaceObject = require("@splunk/themes");
|
|
71
|
+
;// CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
var Styled = external_styled_components_default().div.withConfig({
|
|
178
75
|
displayName: "TabBarStyles__Styled",
|
|
179
76
|
componentId: "sc-1t85fen-0"
|
|
180
|
-
})(["", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";"],
|
|
181
|
-
enterprise:
|
|
182
|
-
prisma:
|
|
183
|
-
}),
|
|
77
|
+
})(["", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";"], themes_namespaceObject.mixins.reset('flex'), (0,themes_namespaceObject.pick)({
|
|
78
|
+
enterprise: themes_namespaceObject.variables.borderLightColor,
|
|
79
|
+
prisma: themes_namespaceObject.variables.neutral200
|
|
80
|
+
}), (0,themes_namespaceObject.pickVariant)('$layout', {
|
|
184
81
|
horizontal: {
|
|
185
|
-
prisma:
|
|
82
|
+
prisma: (0,themes_namespaceObject.pickVariant)('$withUnderline', {
|
|
186
83
|
/* context appearance is only supported for Prisma */
|
|
187
|
-
"true":
|
|
84
|
+
"true": (0,external_styled_components_namespaceObject.css)(["&::before{border-bottom-width:1px;}"])
|
|
188
85
|
}),
|
|
189
|
-
enterprise:
|
|
86
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["&::before{border-bottom-width:1px;}"])
|
|
190
87
|
},
|
|
191
88
|
vertical: {
|
|
192
|
-
enterprise:
|
|
193
|
-
prisma:
|
|
89
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["display:inline-block;&::before{border-right-width:1px;}"]),
|
|
90
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["display:inline-block;&::before{border-right-width:1px;}"])
|
|
194
91
|
}
|
|
195
92
|
}));
|
|
196
93
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
var Popover_default = /*#__PURE__*/__webpack_require__.n(
|
|
94
|
+
;// CONCATENATED MODULE: external "@splunk/react-ui/Popover"
|
|
95
|
+
const Popover_namespaceObject = require("@splunk/react-ui/Popover");
|
|
96
|
+
var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_namespaceObject);
|
|
97
|
+
;// CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
|
|
98
|
+
const ScreenReaderContent_namespaceObject = require("@splunk/react-ui/ScreenReaderContent");
|
|
99
|
+
var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_namespaceObject);
|
|
100
|
+
;// CONCATENATED MODULE: external "@splunk/ui-utils/id"
|
|
101
|
+
const id_namespaceObject = require("@splunk/ui-utils/id");
|
|
102
|
+
;// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
|
|
103
|
+
const Clickable_namespaceObject = require("@splunk/react-ui/Clickable");
|
|
104
|
+
var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_namespaceObject);
|
|
105
|
+
;// CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
|
|
200
106
|
|
|
201
|
-
// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
|
|
202
|
-
var ScreenReaderContent_ = __webpack_require__(14);
|
|
203
|
-
var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
|
|
204
107
|
|
|
205
|
-
// EXTERNAL MODULE: external "@splunk/ui-utils/id"
|
|
206
|
-
var id_ = __webpack_require__(8);
|
|
207
108
|
|
|
208
|
-
|
|
209
|
-
var Clickable_ = __webpack_require__(12);
|
|
210
|
-
var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
|
|
211
|
-
|
|
212
|
-
// CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
var StyledClickable = external_styled_components_default()(Clickable_default.a).withConfig({
|
|
109
|
+
var StyledClickable = external_styled_components_default()((Clickable_default())).withConfig({
|
|
217
110
|
displayName: "TabStyles__StyledClickable",
|
|
218
111
|
componentId: "sc-1ry8mzj-0"
|
|
219
|
-
})(["flex:0 1 auto;display:block;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";", ";&[aria-selected='true']{cursor:default;", "}&[aria-selected='false']{box-shadow:none;font-weight:", ";", " &:hover:not([disabled]){", "}}&:focus{box-shadow:", ";", "}"],
|
|
112
|
+
})(["flex:0 1 auto;display:block;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";", ";&[aria-selected='true']{cursor:default;", "}&[aria-selected='false']{box-shadow:none;font-weight:", ";", " &:hover:not([disabled]){", "}}&:focus{box-shadow:", ";", "}"], (0,themes_namespaceObject.pick)({
|
|
220
113
|
enterprise: '24px',
|
|
221
114
|
prisma: '20px'
|
|
222
|
-
}),
|
|
223
|
-
horizontal:
|
|
115
|
+
}), themes_namespaceObject.variables.contentColorDefault, (0,themes_namespaceObject.pickVariant)('$layout', {
|
|
116
|
+
horizontal: (0,external_styled_components_namespaceObject.css)(["padding:", ";margin-bottom:1px;"], (0,themes_namespaceObject.pick)({
|
|
224
117
|
enterprise: '3px 20px',
|
|
225
118
|
prisma: {
|
|
226
119
|
comfortable: '0 20px',
|
|
@@ -228,117 +121,117 @@ var StyledClickable = external_styled_components_default()(Clickable_default.a).
|
|
|
228
121
|
}
|
|
229
122
|
})),
|
|
230
123
|
vertical: {
|
|
231
|
-
enterprise:
|
|
124
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["width:100%;text-align:left;right:1px;padding:10px 20px;", ""], function (_ref) {
|
|
232
125
|
var $icon = _ref.$icon;
|
|
233
|
-
return $icon &&
|
|
126
|
+
return $icon && (0,external_styled_components_namespaceObject.css)(["text-align:center;"]);
|
|
234
127
|
}),
|
|
235
|
-
prisma:
|
|
128
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["width:100%;right:1px;padding:", ";"], (0,themes_namespaceObject.pick)({
|
|
236
129
|
comfortable: '0 20px',
|
|
237
130
|
compact: '0 16px'
|
|
238
131
|
}))
|
|
239
132
|
}
|
|
240
|
-
}),
|
|
241
|
-
enterprise:
|
|
242
|
-
prisma:
|
|
243
|
-
}),
|
|
133
|
+
}), (0,themes_namespaceObject.pick)({
|
|
134
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["font-weight:", ";"], themes_namespaceObject.variables.fontWeightBold),
|
|
135
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";font-weight:", ";"], themes_namespaceObject.variables.contentColorActive, themes_namespaceObject.variables.fontWeightBold)
|
|
136
|
+
}), (0,themes_namespaceObject.pick)({
|
|
244
137
|
enterprise: 'normal',
|
|
245
|
-
prisma:
|
|
246
|
-
}),
|
|
247
|
-
prisma:
|
|
248
|
-
}),
|
|
249
|
-
prisma:
|
|
250
|
-
}),
|
|
251
|
-
prisma:
|
|
138
|
+
prisma: themes_namespaceObject.variables.fontWeightSemiBold
|
|
139
|
+
}), (0,themes_namespaceObject.pick)({
|
|
140
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["&::after{display:block;content:attr(title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}"], themes_namespaceObject.variables.fontWeightBold)
|
|
141
|
+
}), (0,themes_namespaceObject.pick)({
|
|
142
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";"], themes_namespaceObject.variables.contentColorActive)
|
|
143
|
+
}), themes_namespaceObject.variables.focusShadowInset, (0,themes_namespaceObject.pick)({
|
|
144
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";"], themes_namespaceObject.variables.contentColorActive)
|
|
252
145
|
}));
|
|
253
|
-
var StyledUnderline = external_styled_components_default.
|
|
146
|
+
var StyledUnderline = external_styled_components_default().div.withConfig({
|
|
254
147
|
displayName: "TabStyles__StyledUnderline",
|
|
255
148
|
componentId: "sc-1ry8mzj-1"
|
|
256
|
-
})(["position:absolute;", " ", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]) > &&{", ";}"],
|
|
257
|
-
enterprise:
|
|
258
|
-
}),
|
|
259
|
-
horizontal:
|
|
260
|
-
enterprise:
|
|
149
|
+
})(["position:absolute;", " ", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]) > &&{", ";}"], (0,themes_namespaceObject.pick)({
|
|
150
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["background:", ";"], themes_namespaceObject.variables.borderLightColor)
|
|
151
|
+
}), (0,themes_namespaceObject.pickVariant)('$layout', {
|
|
152
|
+
horizontal: (0,external_styled_components_namespaceObject.css)(["height:0;box-sizing:border-box;width:", ";", " transition:height 0.2s;"], (0,themes_namespaceObject.pick)({
|
|
153
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["calc(100% - 20px * 2)"]),
|
|
261
154
|
prisma: {
|
|
262
|
-
comfortable:
|
|
263
|
-
compact:
|
|
155
|
+
comfortable: (0,external_styled_components_namespaceObject.css)(["calc(100% - 20px * 2)"]),
|
|
156
|
+
compact: (0,external_styled_components_namespaceObject.css)(["calc(100% - 16px * 2)"])
|
|
264
157
|
}
|
|
265
|
-
}),
|
|
266
|
-
enterprise:
|
|
158
|
+
}), (0,themes_namespaceObject.pick)({
|
|
159
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["bottom:-1px;"])
|
|
267
160
|
})),
|
|
268
161
|
vertical: {
|
|
269
|
-
enterprise:
|
|
270
|
-
prisma:
|
|
162
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["width:0;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;"]),
|
|
163
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["width:1px;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;box-sizing:border-box;"])
|
|
271
164
|
}
|
|
272
|
-
}),
|
|
273
|
-
enterprise:
|
|
274
|
-
prisma:
|
|
275
|
-
}),
|
|
165
|
+
}), (0,themes_namespaceObject.pick)({
|
|
166
|
+
enterprise: themes_namespaceObject.variables.accentColor,
|
|
167
|
+
prisma: themes_namespaceObject.variables.contentColorActive
|
|
168
|
+
}), (0,themes_namespaceObject.pickVariant)('$layout', {
|
|
276
169
|
horizontal: {
|
|
277
|
-
enterprise:
|
|
278
|
-
prisma:
|
|
170
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["height:3px;"]),
|
|
171
|
+
prisma: (0,themes_namespaceObject.pickVariant)('$withUnderline', {
|
|
279
172
|
// context appearance is only supported for Prisma
|
|
280
|
-
"true":
|
|
173
|
+
"true": (0,external_styled_components_namespaceObject.css)(["height:1px;"])
|
|
281
174
|
})
|
|
282
175
|
},
|
|
283
176
|
vertical: {
|
|
284
|
-
enterprise:
|
|
285
|
-
prisma:
|
|
177
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["width:3px;"]),
|
|
178
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["width:1px;"])
|
|
286
179
|
}
|
|
287
|
-
}), StyledClickable,
|
|
180
|
+
}), StyledClickable, (0,themes_namespaceObject.pickVariant)('$layout', {
|
|
288
181
|
horizontal: {
|
|
289
|
-
enterprise:
|
|
182
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["height:3px;"])
|
|
290
183
|
},
|
|
291
184
|
vertical: {
|
|
292
|
-
enterprise:
|
|
185
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["width:3px;"])
|
|
293
186
|
}
|
|
294
187
|
}));
|
|
295
|
-
var StyledIcon = external_styled_components_default.
|
|
188
|
+
var StyledIcon = external_styled_components_default().span.withConfig({
|
|
296
189
|
displayName: "TabStyles__StyledIcon",
|
|
297
190
|
componentId: "sc-1ry8mzj-2"
|
|
298
|
-
})(["", ";"],
|
|
299
|
-
inline:
|
|
300
|
-
prisma:
|
|
301
|
-
}),
|
|
191
|
+
})(["", ";"], (0,themes_namespaceObject.pickVariant)('$iconSize', {
|
|
192
|
+
inline: (0,external_styled_components_namespaceObject.css)(["", " text-align:left;padding-right:", ";> svg{transform:translateY(-1px);}"], (0,themes_namespaceObject.pick)({
|
|
193
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["display:inline-block;width:16px;height:16px;"])
|
|
194
|
+
}), (0,themes_namespaceObject.pick)({
|
|
302
195
|
enterprise: '0.4em',
|
|
303
196
|
prisma: '8px'
|
|
304
197
|
})),
|
|
305
|
-
small:
|
|
306
|
-
large:
|
|
198
|
+
small: (0,external_styled_components_namespaceObject.css)(["font-size:24px;height:24px;text-align:center;display:block;padding:4px 0;"]),
|
|
199
|
+
large: (0,external_styled_components_namespaceObject.css)(["font-size:48px;height:48px;text-align:center;display:block;padding:8px 0 0;"])
|
|
307
200
|
}));
|
|
308
|
-
var StyledLabel = external_styled_components_default.
|
|
201
|
+
var StyledLabel = external_styled_components_default().div.withConfig({
|
|
309
202
|
displayName: "TabStyles__StyledLabel",
|
|
310
203
|
componentId: "sc-1ry8mzj-3"
|
|
311
|
-
})(["overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";"],
|
|
204
|
+
})(["overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";"], (0,themes_namespaceObject.pick)({
|
|
312
205
|
enterprise: '0',
|
|
313
206
|
prisma: {
|
|
314
207
|
comfortable: '16px 0',
|
|
315
208
|
compact: '10px 0'
|
|
316
209
|
}
|
|
317
210
|
}));
|
|
318
|
-
var StyledCount = external_styled_components_default.
|
|
211
|
+
var StyledCount = external_styled_components_default().div.withConfig({
|
|
319
212
|
displayName: "TabStyles__StyledCount",
|
|
320
213
|
componentId: "sc-1ry8mzj-4"
|
|
321
|
-
})(["", " display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:4px 6px;margin-left:", ";", " &[disabled]{background:", ";color:", ";}"],
|
|
214
|
+
})(["", " display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:4px 6px;margin-left:", ";", " &[disabled]{background:", ";color:", ";}"], themes_namespaceObject.mixins.reset('inlne-block'), themes_namespaceObject.variables.contentColorDefault, (0,themes_namespaceObject.pick)({
|
|
322
215
|
enterprise: 'inherit',
|
|
323
216
|
prisma: '10px'
|
|
324
|
-
}),
|
|
217
|
+
}), (0,themes_namespaceObject.pick)({
|
|
325
218
|
enterprise: '0',
|
|
326
219
|
prisma: '8px'
|
|
327
|
-
}),
|
|
328
|
-
enterprise:
|
|
329
|
-
prisma:
|
|
330
|
-
}),
|
|
331
|
-
var StyledTooltipContent = external_styled_components_default.
|
|
220
|
+
}), (0,themes_namespaceObject.pick)({
|
|
221
|
+
enterprise: (0,external_styled_components_namespaceObject.css)(["&::before{content:'(';}&::after{content:')';}"]),
|
|
222
|
+
prisma: (0,external_styled_components_namespaceObject.css)(["background:", ";"], themes_namespaceObject.variables.neutral100)
|
|
223
|
+
}), themes_namespaceObject.variables.interactiveColorBackgroundDisabled, themes_namespaceObject.variables.contentColorDisabled);
|
|
224
|
+
var StyledTooltipContent = external_styled_components_default().div.withConfig({
|
|
332
225
|
displayName: "TabStyles__StyledTooltipContent",
|
|
333
226
|
componentId: "sc-1ry8mzj-5"
|
|
334
|
-
})(["padding:8px;font-size:", ";"],
|
|
227
|
+
})(["padding:8px;font-size:", ";"], themes_namespaceObject.variables.fontSizeSmall);
|
|
335
228
|
|
|
336
|
-
|
|
229
|
+
;// CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
|
|
337
230
|
|
|
338
|
-
var TabBarContext = /*#__PURE__*/
|
|
231
|
+
var TabBarContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)({});
|
|
339
232
|
TabBarContext.displayName = 'TabBar';
|
|
340
|
-
/* harmony default export */
|
|
341
|
-
|
|
233
|
+
/* harmony default export */ const TabBar_TabBarContext = (TabBarContext);
|
|
234
|
+
;// CONCATENATED MODULE: ./src/utils/getCountValue.ts
|
|
342
235
|
// A utility for max count
|
|
343
236
|
var maxCountValue = function maxCountValue(count, maxCount) {
|
|
344
237
|
if (count > maxCount) {
|
|
@@ -347,10 +240,27 @@ var maxCountValue = function maxCountValue(count, maxCount) {
|
|
|
347
240
|
|
|
348
241
|
return count;
|
|
349
242
|
};
|
|
350
|
-
|
|
351
|
-
|
|
243
|
+
;// CONCATENATED MODULE: ./src/utils/updateReactRef.ts
|
|
244
|
+
/**
|
|
245
|
+
* Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
|
|
246
|
+
*
|
|
247
|
+
* @param ref - The React callback or object ref. Can be `null` or `undefined`.
|
|
248
|
+
* @param current - The new value of the ref.
|
|
249
|
+
*/
|
|
250
|
+
function updateReactRef(ref, current) {
|
|
251
|
+
if (ref) {
|
|
252
|
+
if (typeof ref === 'function') {
|
|
253
|
+
ref(current);
|
|
254
|
+
} else {
|
|
255
|
+
// the public signature of this util uses React.Ref<T> to mirror the way React types refs.
|
|
256
|
+
// the intention here is to signal "we will take care of setting 'current', not you".
|
|
257
|
+
ref.current = current; // eslint-disable-line no-param-reassign
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
}
|
|
352
261
|
|
|
353
|
-
|
|
262
|
+
|
|
263
|
+
;// CONCATENATED MODULE: ./src/TabBar/Tab.tsx
|
|
354
264
|
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); }
|
|
355
265
|
|
|
356
266
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -392,29 +302,29 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
392
302
|
|
|
393
303
|
var propTypes = {
|
|
394
304
|
/** @private. Is the tab active. */
|
|
395
|
-
active: external_prop_types_default.
|
|
396
|
-
ariaControls: external_prop_types_default.
|
|
397
|
-
count: external_prop_types_default.
|
|
398
|
-
disabled: external_prop_types_default.
|
|
399
|
-
elementRef: external_prop_types_default.
|
|
400
|
-
icon: external_prop_types_default.
|
|
401
|
-
id: external_prop_types_default.
|
|
402
|
-
label: external_prop_types_default.
|
|
305
|
+
active: (external_prop_types_default()).bool,
|
|
306
|
+
ariaControls: (external_prop_types_default()).string,
|
|
307
|
+
count: (external_prop_types_default()).number,
|
|
308
|
+
disabled: (external_prop_types_default()).bool,
|
|
309
|
+
elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
|
|
310
|
+
icon: (external_prop_types_default()).node,
|
|
311
|
+
id: (external_prop_types_default()).string,
|
|
312
|
+
label: external_prop_types_default().oneOfType([(external_prop_types_default()).string, (external_prop_types_default()).element]),
|
|
403
313
|
|
|
404
314
|
/** @private Maximum count number in tab label */
|
|
405
|
-
maxCount: external_prop_types_default.
|
|
406
|
-
tabId: external_prop_types_default.
|
|
315
|
+
maxCount: (external_prop_types_default()).number,
|
|
316
|
+
tabId: (external_prop_types_default()).string,
|
|
407
317
|
|
|
408
318
|
/** @private. The internal key of the tab */
|
|
409
|
-
tabKey: external_prop_types_default.
|
|
410
|
-
to: external_prop_types_default.
|
|
411
|
-
tooltip: external_prop_types_default.
|
|
319
|
+
tabKey: (external_prop_types_default()).number,
|
|
320
|
+
to: (external_prop_types_default()).string,
|
|
321
|
+
tooltip: (external_prop_types_default()).node
|
|
412
322
|
};
|
|
413
323
|
var defaultProps = {
|
|
414
324
|
active: false
|
|
415
325
|
};
|
|
416
326
|
|
|
417
|
-
var
|
|
327
|
+
var Tab = /*#__PURE__*/function (_Component) {
|
|
418
328
|
_inherits(Tab, _Component);
|
|
419
329
|
|
|
420
330
|
var _super = _createSuper(Tab);
|
|
@@ -436,7 +346,7 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
|
|
|
436
346
|
anchor: el
|
|
437
347
|
});
|
|
438
348
|
|
|
439
|
-
|
|
349
|
+
updateReactRef(_this.props.elementRef, el);
|
|
440
350
|
});
|
|
441
351
|
|
|
442
352
|
_defineProperty(_assertThisInitialized(_this), "handleTooltipOpen", function () {
|
|
@@ -485,8 +395,8 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
|
|
|
485
395
|
});
|
|
486
396
|
});
|
|
487
397
|
|
|
488
|
-
_this.popoverId =
|
|
489
|
-
_this.ariaId =
|
|
398
|
+
_this.popoverId = (0,id_namespaceObject.createDOMID)('popover');
|
|
399
|
+
_this.ariaId = (0,id_namespaceObject.createDOMID)('aria-id');
|
|
490
400
|
_this.state = {
|
|
491
401
|
open: false,
|
|
492
402
|
anchor: null
|
|
@@ -538,7 +448,7 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
|
|
|
538
448
|
// TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
|
|
539
449
|
// eslint-disable-next-line
|
|
540
450
|
// @ts-ignore-next-line
|
|
541
|
-
external_react_default.
|
|
451
|
+
external_react_default().createElement(StyledClickable, _extends({
|
|
542
452
|
"aria-controls": ariaControls,
|
|
543
453
|
"aria-selected": active,
|
|
544
454
|
"aria-labelledby": this.ariaId,
|
|
@@ -559,18 +469,18 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
|
|
|
559
469
|
role: "tab",
|
|
560
470
|
tabIndex: active ? undefined : -1,
|
|
561
471
|
to: to
|
|
562
|
-
}), /*#__PURE__*/external_react_default.
|
|
472
|
+
}), /*#__PURE__*/external_react_default().createElement(StyledLabel, {
|
|
563
473
|
"data-test": "label",
|
|
564
474
|
$withUnderline: appearance === 'navigation'
|
|
565
|
-
}, icon && /*#__PURE__*/external_react_default.
|
|
475
|
+
}, icon && /*#__PURE__*/external_react_default().createElement(StyledIcon, {
|
|
566
476
|
$iconSize: iconSizeValue
|
|
567
|
-
}, icon), label, (count === 0 || count) && /*#__PURE__*/external_react_default.
|
|
477
|
+
}, icon), label, (count === 0 || count) && /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/external_react_default().createElement((ScreenReaderContent_default()), null, "\xA0"), /*#__PURE__*/external_react_default().createElement(StyledCount, {
|
|
568
478
|
"data-test": "count",
|
|
569
479
|
disabled: disabledValue
|
|
570
|
-
}, maxCount ? maxCountValue(count, maxCount) : count)), /*#__PURE__*/external_react_default.
|
|
480
|
+
}, maxCount ? maxCountValue(count, maxCount) : count))), /*#__PURE__*/external_react_default().createElement(StyledUnderline, {
|
|
571
481
|
$layout: layoutValue,
|
|
572
482
|
$withUnderline: appearance === 'navigation'
|
|
573
|
-
}), !disabled && tooltip && /*#__PURE__*/external_react_default.
|
|
483
|
+
}), !disabled && tooltip && /*#__PURE__*/external_react_default().createElement((Popover_default()), {
|
|
574
484
|
role: "tooltip",
|
|
575
485
|
anchor: anchor // override Popover's default animation to make it faster
|
|
576
486
|
// this keeps the overall amount of time the Tooltip is on-screen the same
|
|
@@ -585,7 +495,7 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
|
|
|
585
495
|
id: this.popoverId,
|
|
586
496
|
open: !!anchor && open,
|
|
587
497
|
align: "center"
|
|
588
|
-
}, /*#__PURE__*/external_react_default.
|
|
498
|
+
}, /*#__PURE__*/external_react_default().createElement(StyledTooltipContent, null, tooltip)), tooltip && /*#__PURE__*/external_react_default().createElement((ScreenReaderContent_default()), {
|
|
589
499
|
"aria-hidden": "true",
|
|
590
500
|
id: this.ariaId
|
|
591
501
|
}, tooltip))
|
|
@@ -594,19 +504,47 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
|
|
|
594
504
|
}]);
|
|
595
505
|
|
|
596
506
|
return Tab;
|
|
597
|
-
}(
|
|
507
|
+
}(external_react_namespaceObject.Component);
|
|
508
|
+
|
|
509
|
+
_defineProperty(Tab, "propTypes", propTypes);
|
|
510
|
+
|
|
511
|
+
_defineProperty(Tab, "defaultProps", defaultProps);
|
|
512
|
+
|
|
513
|
+
_defineProperty(Tab, "contextType", TabBar_TabBarContext);
|
|
514
|
+
|
|
515
|
+
/* harmony default export */ const TabBar_Tab = (Tab);
|
|
516
|
+
;// CONCATENATED MODULE: ./src/utils/navigateList.ts
|
|
517
|
+
// A utility for keyboard navigation of lists
|
|
518
|
+
function getNextListItem(refs, currentIndex, nextIndex) {
|
|
519
|
+
for (var i = 0; i < refs.length; i += 1) {
|
|
520
|
+
var _refs$pointer$current;
|
|
598
521
|
|
|
599
|
-
|
|
522
|
+
var pointer = (i + nextIndex) % refs.length;
|
|
600
523
|
|
|
601
|
-
|
|
524
|
+
if (((_refs$pointer$current = refs[pointer].current) === null || _refs$pointer$current === void 0 ? void 0 : _refs$pointer$current.props.disabled) !== true) {
|
|
525
|
+
return refs[pointer];
|
|
526
|
+
}
|
|
527
|
+
}
|
|
602
528
|
|
|
603
|
-
|
|
529
|
+
return refs[currentIndex];
|
|
530
|
+
}
|
|
604
531
|
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
var
|
|
532
|
+
function getPrevListItem(refs, currentIndex, prevIndex) {
|
|
533
|
+
for (var i = refs.length; i > 0; i -= 1) {
|
|
534
|
+
var _refs$pointer$current2;
|
|
535
|
+
|
|
536
|
+
var pointer = (i + prevIndex) % refs.length;
|
|
608
537
|
|
|
609
|
-
|
|
538
|
+
if (((_refs$pointer$current2 = refs[pointer].current) === null || _refs$pointer$current2 === void 0 ? void 0 : _refs$pointer$current2.props.disabled) !== true) {
|
|
539
|
+
return refs[pointer];
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
return refs[currentIndex];
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
|
|
547
|
+
;// CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
|
|
610
548
|
function TabBar_extends() { TabBar_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return TabBar_extends.apply(this, arguments); }
|
|
611
549
|
|
|
612
550
|
function TabBar_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = TabBar_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
@@ -624,18 +562,18 @@ var minTabWidth = 50;
|
|
|
624
562
|
/** @public */
|
|
625
563
|
|
|
626
564
|
var TabBar_propTypes = {
|
|
627
|
-
autoActivate: external_prop_types_default.
|
|
628
|
-
activeTabId: external_prop_types_default.
|
|
629
|
-
appearance: external_prop_types_default.
|
|
630
|
-
children: external_prop_types_default.
|
|
565
|
+
autoActivate: (external_prop_types_default()).bool,
|
|
566
|
+
activeTabId: (external_prop_types_default()).string,
|
|
567
|
+
appearance: external_prop_types_default().oneOf(['navigation', 'context']),
|
|
568
|
+
children: (external_prop_types_default()).node,
|
|
631
569
|
|
|
632
570
|
/** @private */
|
|
633
|
-
disabled: external_prop_types_default.
|
|
634
|
-
elementRef: external_prop_types_default.
|
|
635
|
-
iconSize: external_prop_types_default.
|
|
636
|
-
layout: external_prop_types_default.
|
|
637
|
-
onChange: external_prop_types_default.
|
|
638
|
-
tabWidth: external_prop_types_default.
|
|
571
|
+
disabled: (external_prop_types_default()).bool,
|
|
572
|
+
elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
|
|
573
|
+
iconSize: external_prop_types_default().oneOf(['inline', 'small', 'large']),
|
|
574
|
+
layout: external_prop_types_default().oneOf(['horizontal', 'vertical']),
|
|
575
|
+
onChange: (external_prop_types_default()).func,
|
|
576
|
+
tabWidth: (external_prop_types_default()).number
|
|
639
577
|
};
|
|
640
578
|
|
|
641
579
|
function TabBar(_ref) {
|
|
@@ -656,12 +594,12 @@ function TabBar(_ref) {
|
|
|
656
594
|
otherProps = TabBar_objectWithoutProperties(_ref, ["activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth"]);
|
|
657
595
|
|
|
658
596
|
// @docs-props-type TabBarPropsBase
|
|
659
|
-
var focusedTabIndex =
|
|
597
|
+
var focusedTabIndex = (0,external_react_namespaceObject.useRef)(0);
|
|
660
598
|
var tabRefs = [];
|
|
661
|
-
var nextTabKey =
|
|
599
|
+
var nextTabKey = (0,external_react_namespaceObject.useMemo)(function () {
|
|
662
600
|
return layout === 'vertical' ? 'down' : 'right';
|
|
663
601
|
}, [layout]);
|
|
664
|
-
var previousTabKey =
|
|
602
|
+
var previousTabKey = (0,external_react_namespaceObject.useMemo)(function () {
|
|
665
603
|
return layout === 'vertical' ? 'up' : 'left';
|
|
666
604
|
}, [layout]);
|
|
667
605
|
|
|
@@ -686,13 +624,13 @@ function TabBar(_ref) {
|
|
|
686
624
|
};
|
|
687
625
|
|
|
688
626
|
var tabKeyCounter = 0;
|
|
689
|
-
var clonedChildren =
|
|
627
|
+
var clonedChildren = external_react_namespaceObject.Children.toArray(children).filter(external_react_namespaceObject.isValidElement).map(function (child) {
|
|
690
628
|
// <TabBar> allows non-<Tab> children, pass them through without any modification
|
|
691
629
|
if (typeof child.type === 'string' || child.type.name !== TabBar_Tab.name) {
|
|
692
630
|
return child;
|
|
693
631
|
}
|
|
694
632
|
|
|
695
|
-
var ref = /*#__PURE__*/external_react_default.
|
|
633
|
+
var ref = /*#__PURE__*/external_react_default().createRef();
|
|
696
634
|
tabRefs.push(ref);
|
|
697
635
|
var childProps = {
|
|
698
636
|
active: activeTabId === child.props.tabId,
|
|
@@ -700,22 +638,22 @@ function TabBar(_ref) {
|
|
|
700
638
|
ref: ref
|
|
701
639
|
};
|
|
702
640
|
tabKeyCounter += 1;
|
|
703
|
-
return /*#__PURE__*/
|
|
641
|
+
return /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(child, childProps);
|
|
704
642
|
});
|
|
705
643
|
var widthContext = tabWidth && tabWidth > minTabWidth ? tabWidth : null;
|
|
706
644
|
|
|
707
645
|
var handleOnKeyDown = function handleOnKeyDown(e) {
|
|
708
|
-
var key =
|
|
646
|
+
var key = (0,keyboard_namespaceObject.keycode)(e.nativeEvent);
|
|
709
647
|
var tabToFocusRef;
|
|
710
648
|
|
|
711
649
|
if (key === nextTabKey) {
|
|
712
|
-
tabToFocusRef =
|
|
650
|
+
tabToFocusRef = getNextListItem(tabRefs, focusedTabIndex.current, focusedTabIndex.current + 1);
|
|
713
651
|
} else if (key === previousTabKey) {
|
|
714
|
-
tabToFocusRef =
|
|
652
|
+
tabToFocusRef = getPrevListItem(tabRefs, focusedTabIndex.current, focusedTabIndex.current - 1);
|
|
715
653
|
} else if (key === 'home') {
|
|
716
|
-
tabToFocusRef =
|
|
654
|
+
tabToFocusRef = getNextListItem(tabRefs, focusedTabIndex.current, 0);
|
|
717
655
|
} else if (key === 'end') {
|
|
718
|
-
tabToFocusRef =
|
|
656
|
+
tabToFocusRef = getPrevListItem(tabRefs, focusedTabIndex.current, tabRefs.length - 1);
|
|
719
657
|
}
|
|
720
658
|
|
|
721
659
|
if (tabToFocusRef != null) {
|
|
@@ -726,7 +664,7 @@ function TabBar(_ref) {
|
|
|
726
664
|
}
|
|
727
665
|
};
|
|
728
666
|
|
|
729
|
-
return /*#__PURE__*/external_react_default.
|
|
667
|
+
return /*#__PURE__*/external_react_default().createElement(Styled, TabBar_extends({
|
|
730
668
|
"data-tab-layout": layout,
|
|
731
669
|
"data-test-active-tab-id": activeTabId,
|
|
732
670
|
"data-test": "tab-bar",
|
|
@@ -735,7 +673,7 @@ function TabBar(_ref) {
|
|
|
735
673
|
$layout: layout,
|
|
736
674
|
$withUnderline: appearance === 'navigation',
|
|
737
675
|
onKeyDown: handleOnKeyDown
|
|
738
|
-
}, otherProps), /*#__PURE__*/external_react_default.
|
|
676
|
+
}, otherProps), /*#__PURE__*/external_react_default().createElement(TabBar_TabBarContext.Provider, {
|
|
739
677
|
value: {
|
|
740
678
|
appearance: appearance,
|
|
741
679
|
disabled: disabled,
|
|
@@ -750,86 +688,11 @@ function TabBar(_ref) {
|
|
|
750
688
|
|
|
751
689
|
TabBar.propTypes = TabBar_propTypes;
|
|
752
690
|
TabBar.Tab = TabBar_Tab;
|
|
753
|
-
/* harmony default export */
|
|
754
|
-
|
|
755
|
-
// CONCATENATED MODULE: ./src/TabBar/index.ts
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
/***/ }),
|
|
760
|
-
|
|
761
|
-
/***/ 2:
|
|
762
|
-
/***/ (function(module, exports) {
|
|
763
|
-
|
|
764
|
-
module.exports = require("react");
|
|
765
|
-
|
|
766
|
-
/***/ }),
|
|
767
|
-
|
|
768
|
-
/***/ 21:
|
|
769
|
-
/***/ (function(module, exports) {
|
|
770
|
-
|
|
771
|
-
module.exports = require("@splunk/react-ui/Popover");
|
|
772
|
-
|
|
773
|
-
/***/ }),
|
|
774
|
-
|
|
775
|
-
/***/ 3:
|
|
776
|
-
/***/ (function(module, exports) {
|
|
777
|
-
|
|
778
|
-
module.exports = require("styled-components");
|
|
779
|
-
|
|
780
|
-
/***/ }),
|
|
781
|
-
|
|
782
|
-
/***/ 57:
|
|
783
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
784
|
-
|
|
785
|
-
"use strict";
|
|
786
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getNextListItem; });
|
|
787
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getPrevListItem; });
|
|
788
|
-
// A utility for keyboard navigation of lists
|
|
789
|
-
function getNextListItem(refs, currentIndex, nextIndex) {
|
|
790
|
-
for (var i = 0; i < refs.length; i += 1) {
|
|
791
|
-
var _refs$pointer$current;
|
|
792
|
-
|
|
793
|
-
var pointer = (i + nextIndex) % refs.length;
|
|
794
|
-
|
|
795
|
-
if (((_refs$pointer$current = refs[pointer].current) === null || _refs$pointer$current === void 0 ? void 0 : _refs$pointer$current.props.disabled) !== true) {
|
|
796
|
-
return refs[pointer];
|
|
797
|
-
}
|
|
798
|
-
}
|
|
799
|
-
|
|
800
|
-
return refs[currentIndex];
|
|
801
|
-
}
|
|
802
|
-
|
|
803
|
-
function getPrevListItem(refs, currentIndex, prevIndex) {
|
|
804
|
-
for (var i = refs.length; i > 0; i -= 1) {
|
|
805
|
-
var _refs$pointer$current2;
|
|
806
|
-
|
|
807
|
-
var pointer = (i + prevIndex) % refs.length;
|
|
808
|
-
|
|
809
|
-
if (((_refs$pointer$current2 = refs[pointer].current) === null || _refs$pointer$current2 === void 0 ? void 0 : _refs$pointer$current2.props.disabled) !== true) {
|
|
810
|
-
return refs[pointer];
|
|
811
|
-
}
|
|
812
|
-
}
|
|
813
|
-
|
|
814
|
-
return refs[currentIndex];
|
|
815
|
-
}
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
/***/ }),
|
|
820
|
-
|
|
821
|
-
/***/ 7:
|
|
822
|
-
/***/ (function(module, exports) {
|
|
823
|
-
|
|
824
|
-
module.exports = require("@splunk/ui-utils/keyboard");
|
|
825
|
-
|
|
826
|
-
/***/ }),
|
|
827
|
-
|
|
828
|
-
/***/ 8:
|
|
829
|
-
/***/ (function(module, exports) {
|
|
691
|
+
/* harmony default export */ const TabBar_TabBar = (TabBar);
|
|
830
692
|
|
|
831
|
-
|
|
693
|
+
;// CONCATENATED MODULE: ./src/TabBar/index.ts
|
|
832
694
|
|
|
833
|
-
/***/ })
|
|
834
695
|
|
|
835
|
-
|
|
696
|
+
module.exports = __webpack_exports__;
|
|
697
|
+
/******/ })()
|
|
698
|
+
;
|