@splunk/react-ui 5.0.0-beta.4 → 5.0.0-beta.5
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/Button.js +3 -1
- package/CHANGELOG.md +4 -1
- package/CHANGELOG.v5.mdx +35 -0
- package/Card.js +163 -162
- package/Chip.js +171 -225
- package/Clickable.js +79 -76
- package/ComboBox.js +1 -1
- package/Date.js +160 -184
- package/DualListbox.js +439 -504
- package/File.js +449 -324
- package/FormRows.js +143 -142
- package/JSONTree.js +496 -521
- package/Layer.js +162 -97
- package/Link.js +20 -13
- package/MIGRATION.v5.mdx +47 -0
- package/Markdown.js +1 -1
- package/Message.js +119 -141
- package/MessageBar.js +109 -168
- package/Multiselect.js +595 -602
- package/Popover.js +194 -190
- package/Progress.js +68 -54
- package/RadioBar.js +4 -1
- package/RadioList.js +67 -65
- package/Resize.js +377 -265
- package/ResultsMenu.js +573 -661
- package/ScrollContainerContext.js +13 -9
- package/Search.js +1 -1
- package/Select.js +206 -199
- package/Slider.js +455 -329
- package/StepBar.js +2 -2
- package/Switch.js +88 -87
- package/TabBar.js +322 -317
- package/TabLayout.js +34 -34
- package/Table.js +548 -525
- package/Text.js +20 -19
- package/TextArea.js +278 -152
- package/Tooltip.js +173 -177
- package/Tree.js +2 -2
- package/Typography.js +30 -28
- package/WaitSpinner.js +6 -11
- package/cypress/support/commands.ts +14 -4
- package/cypress/support/index.d.ts +1 -1
- package/package.json +5 -5
- package/stubs-splunkui.d.ts +0 -4
- package/types/src/Card/Card.d.ts +3 -1
- package/types/src/Card/Header.d.ts +2 -0
- package/types/src/Card/docs/examples/HeadingTitle.d.ts +3 -0
- package/types/src/Clickable/Clickable.d.ts +11 -3
- package/types/src/Link/Link.d.ts +4 -0
- package/types/src/Message/Message.d.ts +1 -1
- package/types/src/MessageBar/MessageBar.d.ts +1 -1
- package/types/src/Multiselect/Multiselect.d.ts +1 -8
- package/types/src/Multiselect/Normal.d.ts +1 -7
- package/types/src/Multiselect/docs/examples/Children.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Controlled.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Disabled.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Error.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Fetching.d.ts +2 -22
- package/types/src/Multiselect/docs/examples/Headings.d.ts +2 -1
- package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts +2 -25
- package/types/src/Multiselect/docs/examples/NewValues.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/TabInput.d.ts +2 -9
- package/types/src/ResultsMenu/ResultsMenu.d.ts +23 -34
- package/types/src/Select/SelectBase.d.ts +2 -2
- package/types/src/TabBar/TabBar.d.ts +8 -5
- package/types/src/TabBar/TabBarContext.d.ts +1 -1
- package/types/src/TabLayout/TabLayout.d.ts +8 -5
- package/types/src/Typography/Typography.d.ts +27 -22
- package/types/src/Date/Icon.d.ts +0 -3
- package/types/src/TabBar/docs/examples/IconsAbove.d.ts +0 -3
- package/types/src/TabBar/docs/examples/VerticalIconsAbove.d.ts +0 -3
- /package/types/src/TabBar/docs/examples/{IconsLeft.d.ts → Icons.d.ts} +0 -0
- /package/types/src/TabBar/docs/examples/{VerticalIconsLeft.d.ts → VerticalIcons.d.ts} +0 -0
package/TabLayout.js
CHANGED
|
@@ -161,8 +161,8 @@
|
|
|
161
161
|
I.propTypes = O;
|
|
162
162
|
/* harmony default export */ const S = I;
|
|
163
163
|
// CONCATENATED MODULE: ./src/TabLayout/TabLayout.tsx
|
|
164
|
-
function
|
|
165
|
-
return
|
|
164
|
+
function T() {
|
|
165
|
+
return T = Object.assign ? Object.assign.bind() : function(e) {
|
|
166
166
|
for (var t = 1; t < arguments.length; t++) {
|
|
167
167
|
var n = arguments[t];
|
|
168
168
|
for (var r in n) {
|
|
@@ -170,15 +170,15 @@
|
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
172
|
return e;
|
|
173
|
-
},
|
|
173
|
+
}, T.apply(null, arguments);
|
|
174
174
|
}
|
|
175
|
-
function
|
|
176
|
-
return
|
|
175
|
+
function j(e, t) {
|
|
176
|
+
return x(e) || C(e, t) || A(e, t) || w();
|
|
177
177
|
}
|
|
178
|
-
function
|
|
178
|
+
function w() {
|
|
179
179
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
180
180
|
}
|
|
181
|
-
function
|
|
181
|
+
function A(e, t) {
|
|
182
182
|
if (e) {
|
|
183
183
|
if ("string" == typeof e) return q(e, t);
|
|
184
184
|
var n = {}.toString.call(e).slice(8, -1);
|
|
@@ -214,12 +214,12 @@
|
|
|
214
214
|
return i;
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
|
-
function
|
|
217
|
+
function x(e) {
|
|
218
218
|
if (Array.isArray(e)) return e;
|
|
219
219
|
}
|
|
220
|
-
function
|
|
220
|
+
function E(e, t) {
|
|
221
221
|
if (null == e) return {};
|
|
222
|
-
var n, r, a =
|
|
222
|
+
var n, r, a = _(e, t);
|
|
223
223
|
if (Object.getOwnPropertySymbols) {
|
|
224
224
|
var l = Object.getOwnPropertySymbols(e);
|
|
225
225
|
for (r = 0; r < l.length; r++) {
|
|
@@ -228,7 +228,7 @@
|
|
|
228
228
|
}
|
|
229
229
|
return a;
|
|
230
230
|
}
|
|
231
|
-
function
|
|
231
|
+
function _(e, t) {
|
|
232
232
|
if (null == e) return {};
|
|
233
233
|
var n = {};
|
|
234
234
|
for (var r in e) {
|
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
}
|
|
240
240
|
return n;
|
|
241
241
|
}
|
|
242
|
-
/** @public */ var
|
|
242
|
+
/** @public */ var k = {
|
|
243
243
|
autoActivate: l().bool,
|
|
244
244
|
activePanelId: l().string,
|
|
245
245
|
children: l().node,
|
|
@@ -247,14 +247,14 @@
|
|
|
247
247
|
elementRef: l().oneOfType([ l().func, l().object ]),
|
|
248
248
|
iconPosition: l().oneOf([ "above", "left" ]),
|
|
249
249
|
layout: l().oneOf([ "horizontal", "vertical" ]),
|
|
250
|
-
|
|
251
|
-
|
|
250
|
+
maxTabWidth: l().number,
|
|
251
|
+
onChange: l().func
|
|
252
252
|
};
|
|
253
253
|
/**
|
|
254
254
|
* The `TabLayout` is a group of managed `Panels`. Only one panel can be open at a time.
|
|
255
255
|
* `TabLayout` supports both the controlled and uncontrolled patterns.
|
|
256
|
-
*/ function
|
|
257
|
-
var t = e.autoActivate, a = e.activePanelId, l = e.children, i = e.defaultActivePanelId, c = e.elementRef, d = e.iconPosition, f = e.layout, v = f === void 0 ? "horizontal" : f, p = e.
|
|
256
|
+
*/ function R(e) {
|
|
257
|
+
var t = e.autoActivate, a = e.activePanelId, l = e.children, i = e.defaultActivePanelId, c = e.elementRef, d = e.iconPosition, f = e.layout, v = f === void 0 ? "horizontal" : f, p = e.maxTabWidth, b = e.onChange, y = E(e, [ "autoActivate", "activePanelId", "children", "defaultActivePanelId", "elementRef", "iconPosition", "layout", "maxTabWidth", "onChange" ]);
|
|
258
258
|
// @docs-props-type TabLayoutPropsBase
|
|
259
259
|
var g = s()({
|
|
260
260
|
componentName: "TabLayout",
|
|
@@ -264,28 +264,28 @@
|
|
|
264
264
|
defaultValuePropName: "defaultActivePanelId",
|
|
265
265
|
valuePropName: "activePanelId"
|
|
266
266
|
});
|
|
267
|
-
var h = (0, n.useState)(), P =
|
|
268
|
-
var S = (0, n.useState)(g ? undefined : i),
|
|
267
|
+
var h = (0, n.useState)(), P = j(h, 2), O = P[0], I = P[1];
|
|
268
|
+
var S = (0, n.useState)(g ? undefined : i), w = j(S, 2), A = w[0], q = w[1];
|
|
269
269
|
// Could use activePanelIdProp for isControlled route but chose not to b/c we always favor direct prop access in below logic in that scenario
|
|
270
270
|
var C = (0, n.useMemo)((function() {
|
|
271
|
-
return g ? a :
|
|
272
|
-
}), [ g, a,
|
|
273
|
-
var
|
|
274
|
-
var
|
|
271
|
+
return g ? a : A;
|
|
272
|
+
}), [ g, a, A ]);
|
|
273
|
+
var x = (0, n.useState)((0, o.createGUID)()), _ = j(x, 1), k = _[0];
|
|
274
|
+
var R = (0, n.useCallback)((function(e, t) {
|
|
275
275
|
var n = t.selectedTabId;
|
|
276
276
|
if (!g) {
|
|
277
277
|
q(n);
|
|
278
278
|
}
|
|
279
|
-
|
|
279
|
+
b === null || b === void 0 ? void 0 : b(e, {
|
|
280
280
|
activePanelId: n
|
|
281
281
|
});
|
|
282
|
-
}), [ g,
|
|
282
|
+
}), [ g, b ]);
|
|
283
283
|
var M = (0, n.useMemo)((function() {
|
|
284
284
|
var e = null;
|
|
285
285
|
var t = n.Children.toArray(l).filter(n.isValidElement).map((function(t) {
|
|
286
286
|
var a = t.props;
|
|
287
|
-
var l = "".concat(
|
|
288
|
-
var o = "".concat(
|
|
287
|
+
var l = "".concat(k, "-").concat(a.panelId);
|
|
288
|
+
var o = "".concat(k, "-").concat(a.panelId, "-tab");
|
|
289
289
|
if (a.panelId === C) {
|
|
290
290
|
e = (0, n.cloneElement)(t, {
|
|
291
291
|
"aria-labelledby": o,
|
|
@@ -299,7 +299,7 @@
|
|
|
299
299
|
i["data-title"] = c;
|
|
300
300
|
}
|
|
301
301
|
|
|
302
|
-
return r().createElement(u().Tab,
|
|
302
|
+
return r().createElement(u().Tab, T({
|
|
303
303
|
count: a.count,
|
|
304
304
|
icon: a.icon,
|
|
305
305
|
key: a.panelId,
|
|
@@ -313,12 +313,12 @@
|
|
|
313
313
|
}));
|
|
314
314
|
I(e);
|
|
315
315
|
return t;
|
|
316
|
-
}), [ C, l,
|
|
316
|
+
}), [ C, l, k ]);
|
|
317
317
|
(0, n.useEffect)((function() {
|
|
318
318
|
if (false) {}
|
|
319
319
|
}), [ O ]);
|
|
320
320
|
|
|
321
|
-
return r().createElement(m,
|
|
321
|
+
return r().createElement(m, T({
|
|
322
322
|
"data-test-active-panel-id": C,
|
|
323
323
|
"data-test": "tab-layout",
|
|
324
324
|
ref: c,
|
|
@@ -328,13 +328,13 @@
|
|
|
328
328
|
activeTabId: C,
|
|
329
329
|
iconPosition: d,
|
|
330
330
|
layout: v,
|
|
331
|
-
|
|
332
|
-
|
|
331
|
+
maxTabWidth: p,
|
|
332
|
+
onChange: R
|
|
333
333
|
}, M), O);
|
|
334
334
|
}
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
/* harmony default export */ const M =
|
|
335
|
+
R.Panel = S;
|
|
336
|
+
R.propTypes = k;
|
|
337
|
+
/* harmony default export */ const M = R;
|
|
338
338
|
// CONCATENATED MODULE: ./src/TabLayout/index.ts
|
|
339
339
|
module.exports = t;
|
|
340
340
|
/******/})();
|