@splunk/react-ui 5.0.0-beta.5 → 5.0.0-rc.2
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/ButtonSimple.js +92 -168
- package/{CHANGELOG.v5.mdx → CHANGELOG.v5.md} +43 -0
- package/Calendar.js +148 -151
- package/Card.js +139 -139
- package/Code.js +197 -167
- package/CollapsiblePanel.js +172 -164
- package/Color.js +584 -506
- package/ComboBox.js +51 -51
- package/ControlGroup.js +132 -127
- package/Date.js +137 -150
- package/Dropdown.js +97 -96
- package/DualListbox.js +468 -469
- package/FetchOptions.d.ts +2 -2
- package/FormRows.js +158 -157
- package/JSONTree.js +354 -360
- package/{MIGRATION.mdx → MIGRATION.md} +13 -43
- package/{MIGRATION.v5.mdx → MIGRATION.v5.md} +67 -1
- package/Markdown.js +3 -4
- package/Menu.js +194 -195
- package/Modal.js +18 -18
- package/ModalLayer.js +171 -217
- package/Multiselect.js +785 -778
- package/Number.js +103 -102
- package/Popover.js +48 -46
- package/RadioBar.js +144 -146
- package/Resize.js +149 -151
- package/ResultsMenu.js +112 -114
- package/Search.js +49 -49
- package/Select.js +455 -457
- package/Slider.js +328 -331
- package/Switch.js +251 -178
- package/TabBar.js +277 -280
- package/Table.js +1212 -1178
- package/Text.js +45 -46
- package/Tooltip.js +192 -189
- package/Tree.js +177 -188
- package/package.json +10 -9
- package/types/src/Code/Code.d.ts +1 -1
- package/types/src/Color/Color.d.ts +2 -2
- package/types/src/ControlGroup/ControlGroup.d.ts +1 -2
- package/types/src/Dropdown/Dropdown.d.ts +5 -2
- package/types/src/Layer/Layer.d.ts +2 -1
- package/types/src/Layer/index.d.ts +1 -0
- package/types/src/ModalLayer/ModalLayer.d.ts +16 -21
- package/types/src/Number/Number.d.ts +1 -1
- package/types/src/Popover/Popover.d.ts +5 -2
- package/types/src/Table/HeadCell.d.ts +6 -1
- package/types/src/Table/HeadInner.d.ts +3 -1
- package/types/src/Tooltip/Tooltip.d.ts +7 -7
- package/types/src/fixtures/useFetchOptions.d.ts +33 -0
- package/useRovingFocus.js +20 -23
- package/types/src/fixtures/FetchOptions.d.ts +0 -76
package/Text.js
CHANGED
|
@@ -80,10 +80,10 @@
|
|
|
80
80
|
var d = e.n(c);
|
|
81
81
|
// CONCATENATED MODULE: external "@splunk/react-ui/Button"
|
|
82
82
|
const v = require("@splunk/react-ui/Button");
|
|
83
|
-
var
|
|
83
|
+
var p = e.n(v);
|
|
84
84
|
// CONCATENATED MODULE: external "@splunk/react-icons/Cross"
|
|
85
|
-
const
|
|
86
|
-
var f = e.n(
|
|
85
|
+
const b = require("@splunk/react-icons/Cross");
|
|
86
|
+
var f = e.n(b);
|
|
87
87
|
// CONCATENATED MODULE: external "@splunk/react-ui/ControlGroup"
|
|
88
88
|
const m = require("@splunk/react-ui/ControlGroup");
|
|
89
89
|
// CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
|
|
@@ -124,10 +124,10 @@
|
|
|
124
124
|
height: i
|
|
125
125
|
});
|
|
126
126
|
}
|
|
127
|
-
/* harmony default export */ const
|
|
127
|
+
/* harmony default export */ const A = E;
|
|
128
128
|
// CONCATENATED MODULE: external "styled-components"
|
|
129
|
-
const
|
|
130
|
-
var B = e.n(
|
|
129
|
+
const T = require("styled-components");
|
|
130
|
+
var B = e.n(T);
|
|
131
131
|
// CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
|
|
132
132
|
const I = require("@splunk/react-ui/ButtonSimple");
|
|
133
133
|
// CONCATENATED MODULE: external "@splunk/react-ui/Box"
|
|
@@ -135,28 +135,27 @@
|
|
|
135
135
|
var q = e.n(P);
|
|
136
136
|
// CONCATENATED MODULE: ./src/Text/TextStyles.ts
|
|
137
137
|
var $ = "230px";
|
|
138
|
-
var D = B()(
|
|
138
|
+
var D = B()(p()).withConfig({
|
|
139
139
|
displayName: "TextStyles__StyledClearButton",
|
|
140
140
|
componentId: "eg7n6t-0"
|
|
141
141
|
})([ "display:none;visibility:hidden;" ]);
|
|
142
142
|
var _ = B()(q()).withConfig({
|
|
143
143
|
displayName: "TextStyles__StyledBox",
|
|
144
144
|
componentId: "eg7n6t-1"
|
|
145
|
-
})([ "display:flex;justify-content:space-between;flex-grow:1;flex-shrink:1;gap:", ";padding-inline:", ";min-height:", ";overflow:hidden;border:", " solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);align-items:center;cursor:text;&:
|
|
146
|
-
var r = e.$error;
|
|
147
|
-
return r && (0, A.css)([ "border-color:", ";&:hover:not([disabled]){border-color:", ";}" ], k.variables.interactiveColorAccentError, k.variables.interactiveColorAccentErrorStrong);
|
|
148
|
-
}), (function(e) {
|
|
145
|
+
})([ "display:flex;justify-content:space-between;flex-grow:1;flex-shrink:1;gap:", ";padding-inline:", ";min-height:", ";overflow:hidden;border:", " solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);align-items:center;cursor:text;&:has(> input:focus){box-shadow:", ";}", " ", " ", " &[data-inline]{width:", ";flex-basis:", ";}", "" ], k.variables.spacingXSmall, k.variables.spacingSmall, k.variables.inputHeight, k.variables.inputBorderWidth, k.variables.interactiveColorBorder, k.variables.borderRadius, k.variables.interactiveColorBackground, k.variables.focusShadow, (function(e) {
|
|
149
146
|
var r = e.$append;
|
|
150
|
-
return r && (0,
|
|
147
|
+
return r && (0, T.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
|
|
151
148
|
}), (function(e) {
|
|
152
149
|
var r = e.$prepend;
|
|
153
|
-
return r && (0,
|
|
150
|
+
return r && (0, T.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
|
|
154
151
|
}), (function(e) {
|
|
155
|
-
var r = e.$disabled;
|
|
156
|
-
return r
|
|
152
|
+
var r = e.$disabled, t = e.$error;
|
|
153
|
+
return r ? (0, T.css)([ "border-color:", ";box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);background-color:", ";cursor:not-allowed;" ], t ? k.variables.interactiveColorAccentErrorWeak : k.variables.interactiveColorBorderDisabled, k.variables.interactiveColorBackgroundDisabled) : (0,
|
|
154
|
+
T.css)([ "", " &:hover{border-color:", ";background-color:", ";}", "{visibility:visible;display:block;}" ], t && (0,
|
|
155
|
+
T.css)([ "border-color:", ";" ], k.variables.interactiveColorAccentError), t ? k.variables.interactiveColorAccentErrorStrong : k.variables.interactiveColorBorderHover, k.variables.interactiveColorOverlayHover, /* sc-sel */ D);
|
|
157
156
|
}), $, $, (function(e) {
|
|
158
157
|
var r = e.$isTimeInput;
|
|
159
|
-
return r && (0,
|
|
158
|
+
return r && (0, T.css)([ "@media screen and (min--moz-device-pixel-ratio:0){", "{display:none;}}" ], /* sc-sel */ D);
|
|
160
159
|
}));
|
|
161
160
|
/* Some of these need greater specificity than input[type=text] */ var N = B().input.withConfig({
|
|
162
161
|
displayName: "TextStyles__StyledInput",
|
|
@@ -169,10 +168,10 @@
|
|
|
169
168
|
displayName: "TextStyles__StyledAdornment",
|
|
170
169
|
componentId: "eg7n6t-3"
|
|
171
170
|
})([ "display:inline-flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;color:", ";", " ", ";& > button{", "}& > button:focus,& > a:focus{box-shadow:", ";}" ], k.variables.contentColorMuted, (function() {
|
|
172
|
-
return (0,
|
|
171
|
+
return (0, T.css)([ "height:calc(", " - 2px);" ], k.variables.inputHeight);
|
|
173
172
|
}), (function(e) {
|
|
174
173
|
var r = e.$disabled;
|
|
175
|
-
return r && (0,
|
|
174
|
+
return r && (0, T.css)([ "color:", ";" ], k.variables.contentColorDisabled);
|
|
176
175
|
}), (0, I.buttonMixin)({
|
|
177
176
|
borderColor: k.variables.transparent,
|
|
178
177
|
borderColorHover: k.variables.transparent,
|
|
@@ -235,22 +234,22 @@
|
|
|
235
234
|
for (var r = 1; r < arguments.length; r++) {
|
|
236
235
|
var t = null != arguments[r] ? arguments[r] : {};
|
|
237
236
|
r % 2 ? L(Object(t), !0).forEach((function(r) {
|
|
238
|
-
|
|
237
|
+
W(e, r, t[r]);
|
|
239
238
|
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : L(Object(t)).forEach((function(r) {
|
|
240
239
|
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
241
240
|
}));
|
|
242
241
|
}
|
|
243
242
|
return e;
|
|
244
243
|
}
|
|
245
|
-
function
|
|
246
|
-
return (r =
|
|
244
|
+
function W(e, r, t) {
|
|
245
|
+
return (r = U(r)) in e ? Object.defineProperty(e, r, {
|
|
247
246
|
value: t,
|
|
248
247
|
enumerable: !0,
|
|
249
248
|
configurable: !0,
|
|
250
249
|
writable: !0
|
|
251
250
|
}) : e[r] = t, e;
|
|
252
251
|
}
|
|
253
|
-
function
|
|
252
|
+
function U(e) {
|
|
254
253
|
var r = X(e, "string");
|
|
255
254
|
return "symbol" == H(r) ? r : r + "";
|
|
256
255
|
}
|
|
@@ -391,7 +390,7 @@
|
|
|
391
390
|
});
|
|
392
391
|
/** Note: Text places role and aria props onto the input. All other props are placed on the wrapper. */ function le(e) {
|
|
393
392
|
var r;
|
|
394
|
-
var o = e.append, a = o === void 0 ? false : o, i = e.autoCapitalize, u = e.autoComplete, c = e.autoCorrect, v = e.autoFocus,
|
|
393
|
+
var o = e.append, a = o === void 0 ? false : o, i = e.autoCapitalize, u = e.autoComplete, c = e.autoCorrect, v = e.autoFocus, b = v === void 0 ? false : v, f = e.canClear, y = f === void 0 ? false : f, C = e.children, x = e.defaultValue, k = e.disabled, w = k === void 0 ? false : k, O = e.describedBy, j = e.elementRef, E = e.endAdornment, T = e.error, B = T === void 0 ? false : T, I = e.inline, P = I === void 0 ? false : I, q = e.inputClassName, $ = e.inputId, H = e.inputRef, z = e.labelledBy, V = e.maxLength, K = e.name, L = e.onBlur, W = e.onChange, U = e.onClick, X = e.onFocus, Y = e.onKeyDown, Z = e.onSelect, ee = e.passwordVisibilityToggle, re = ee === void 0 ? false : ee, te = e.placeholder, oe = e.prepend, ae = oe === void 0 ? false : oe, le = e.required, ue = e.spellCheck, se = e.startAdornment, ce = e.tabIndex, de = ce === void 0 ? 0 : ce, ve = e.title, pe = e.type, be = pe === void 0 ? "text" : pe, fe = e.value, me = ne(e, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "canClear", "children", "defaultValue", "disabled", "describedBy", "elementRef", "endAdornment", "error", "inline", "inputClassName", "inputId", "inputRef", "labelledBy", "maxLength", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onSelect", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "startAdornment", "tabIndex", "title", "type", "value" ]);
|
|
395
394
|
// @docs-props-type TextPropsBase
|
|
396
395
|
var ye = (0, t.useContext)(m.ControlGroupContext);
|
|
397
396
|
var ge = g()({
|
|
@@ -402,10 +401,10 @@
|
|
|
402
401
|
var he = (0, t.useRef)(null);
|
|
403
402
|
var Ce = (0, t.useState)(x || ""), xe = Q(Ce, 2), ke = xe[0], we = xe[1];
|
|
404
403
|
var Se = (0, t.useState)(true), Oe = Q(Se, 2), je = Oe[0], Ee = Oe[1];
|
|
405
|
-
var
|
|
404
|
+
var Ae = (0, t.useMemo)((function() {
|
|
406
405
|
return ge ? fe : ke;
|
|
407
406
|
}), [ ge, fe, ke ]);
|
|
408
|
-
var
|
|
407
|
+
var Te = (0, t.useCallback)((function(e) {
|
|
409
408
|
var r = e.target.value;
|
|
410
409
|
L === null || L === void 0 ? void 0 : L(e, {
|
|
411
410
|
value: r,
|
|
@@ -417,11 +416,11 @@
|
|
|
417
416
|
if (!ge) {
|
|
418
417
|
we(r);
|
|
419
418
|
}
|
|
420
|
-
|
|
419
|
+
W === null || W === void 0 ? void 0 : W(e, {
|
|
421
420
|
value: r,
|
|
422
421
|
name: K
|
|
423
422
|
});
|
|
424
|
-
}), [ ge, K,
|
|
423
|
+
}), [ ge, K, W ]);
|
|
425
424
|
var Ie = (0, t.useCallback)((function(e) {
|
|
426
425
|
var r;
|
|
427
426
|
e.preventDefault();
|
|
@@ -430,22 +429,22 @@
|
|
|
430
429
|
we(t);
|
|
431
430
|
}
|
|
432
431
|
he === null || he === void 0 ? void 0 : (r = he.current) === null || r === void 0 ? void 0 : r.focus();
|
|
433
|
-
|
|
432
|
+
W === null || W === void 0 ? void 0 : W(e, {
|
|
434
433
|
value: t,
|
|
435
434
|
name: K
|
|
436
435
|
});
|
|
437
|
-
}), [ ge, K,
|
|
436
|
+
}), [ ge, K, W ]);
|
|
438
437
|
var Pe = (0, t.useCallback)((function(e) {
|
|
439
|
-
|
|
438
|
+
U === null || U === void 0 ? void 0 : U(e);
|
|
440
439
|
e.stopPropagation();
|
|
441
|
-
}), [
|
|
440
|
+
}), [ U ]);
|
|
442
441
|
var qe = (0, t.useCallback)((function(e) {
|
|
443
442
|
if (document.activeElement !== he.current) {
|
|
444
443
|
var r;
|
|
445
444
|
(r = he.current) === null || r === void 0 ? void 0 : r.focus();
|
|
446
445
|
}
|
|
447
|
-
|
|
448
|
-
}), [
|
|
446
|
+
U === null || U === void 0 ? void 0 : U(e);
|
|
447
|
+
}), [ U ]);
|
|
449
448
|
var $e = (0, t.useCallback)((function(e) {
|
|
450
449
|
e.stopPropagation();
|
|
451
450
|
}), []);
|
|
@@ -483,10 +482,10 @@
|
|
|
483
482
|
}, r), E);
|
|
484
483
|
}
|
|
485
484
|
if (re && !w) {
|
|
486
|
-
var t = je ? n().createElement(
|
|
485
|
+
var t = je ? n().createElement(A, null) : n().createElement(S, null);
|
|
487
486
|
var o = je ? (0, h._)("Show password") : (0, h._)("Hide password");
|
|
488
487
|
|
|
489
|
-
return n().createElement(R, r, n().createElement(
|
|
488
|
+
return n().createElement(R, r, n().createElement(p(), {
|
|
490
489
|
appearance: "secondary",
|
|
491
490
|
"data-test": "password-toggle",
|
|
492
491
|
inline: false,
|
|
@@ -498,7 +497,7 @@
|
|
|
498
497
|
}
|
|
499
498
|
var a = (e = ye.labelAttrs) === null || e === void 0 ? void 0 : e.text;
|
|
500
499
|
var i = a ? (0, h._)("Clear ".concat(a, " text field")) : (0, h._)("Clear text field");
|
|
501
|
-
if (!!
|
|
500
|
+
if (!!Ae && y) {
|
|
502
501
|
|
|
503
502
|
return n().createElement(R, r, !w && n().createElement(D, {
|
|
504
503
|
"data-test": "clear",
|
|
@@ -509,7 +508,7 @@
|
|
|
509
508
|
}));
|
|
510
509
|
}
|
|
511
510
|
return undefined;
|
|
512
|
-
}), [ y, (r = ye.labelAttrs) === null || r === void 0 ? void 0 : r.text, w,
|
|
511
|
+
}), [ y, (r = ye.labelAttrs) === null || r === void 0 ? void 0 : r.text, w, Ae, E, $e, Ie, Fe, je, re ]);
|
|
513
512
|
var Me = (0, t.useCallback)((function() {
|
|
514
513
|
var e = {
|
|
515
514
|
$disabled: !!w,
|
|
@@ -545,13 +544,13 @@
|
|
|
545
544
|
$prepend: ae || undefined
|
|
546
545
|
}, s()(me, [ "inputRef", "onBlur", "onClick", "onChange", "onFocus", "onKeyDown", "onSelect" ].concat(M(l()(ze)))));
|
|
547
546
|
var Ke = je ? "password" : "text";
|
|
548
|
-
var Le = re ? Ke :
|
|
547
|
+
var Le = re ? Ke : be;
|
|
549
548
|
var Ge = G(G({}, ze), {}, {
|
|
550
549
|
"data-test": "textbox",
|
|
551
550
|
autoCapitalize: i,
|
|
552
551
|
autoComplete: u,
|
|
553
552
|
autoCorrect: c,
|
|
554
|
-
autoFocus:
|
|
553
|
+
autoFocus: b,
|
|
555
554
|
className: q,
|
|
556
555
|
id: $,
|
|
557
556
|
maxLength: V,
|
|
@@ -561,7 +560,7 @@
|
|
|
561
560
|
onSelect: Re,
|
|
562
561
|
onClick: Pe,
|
|
563
562
|
onFocus: De,
|
|
564
|
-
onBlur:
|
|
563
|
+
onBlur: Te,
|
|
565
564
|
placeholder: te,
|
|
566
565
|
ref: Ne,
|
|
567
566
|
required: le,
|
|
@@ -569,19 +568,19 @@
|
|
|
569
568
|
title: ve,
|
|
570
569
|
tabIndex: de,
|
|
571
570
|
type: Le,
|
|
572
|
-
value:
|
|
571
|
+
value: Ae,
|
|
573
572
|
$error: B
|
|
574
573
|
});
|
|
575
574
|
// Do not render value in DOM when type is password, or passwordVisibilityToggle is enabled
|
|
576
|
-
var
|
|
575
|
+
var We = be === "password" || re ? undefined : Ae;
|
|
577
576
|
// Firefox hack (SUI-2716). Remove when fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1427173
|
|
578
|
-
var
|
|
577
|
+
var Ue = be === "time";
|
|
579
578
|
|
|
580
579
|
return n().createElement(_, J({
|
|
581
580
|
tabIndex: -1,
|
|
582
|
-
$isTimeInput:
|
|
581
|
+
$isTimeInput: Ue,
|
|
583
582
|
"data-test": "text",
|
|
584
|
-
"data-test-value":
|
|
583
|
+
"data-test-value": We,
|
|
585
584
|
"data-test-disabled": w === "dimmed" && "dimmed" || w && "disabled" || undefined,
|
|
586
585
|
elementRef: j,
|
|
587
586
|
flex: true,
|
|
@@ -595,7 +594,7 @@
|
|
|
595
594
|
placeholder: te,
|
|
596
595
|
readOnly: true,
|
|
597
596
|
type: Le,
|
|
598
|
-
value:
|
|
597
|
+
value: Ae
|
|
599
598
|
}, ze)) : n().createElement(N, J({}, Ge, {
|
|
600
599
|
onClick: Pe
|
|
601
600
|
})), C, He());
|