@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.
Files changed (52) hide show
  1. package/ButtonSimple.js +92 -168
  2. package/{CHANGELOG.v5.mdx → CHANGELOG.v5.md} +43 -0
  3. package/Calendar.js +148 -151
  4. package/Card.js +139 -139
  5. package/Code.js +197 -167
  6. package/CollapsiblePanel.js +172 -164
  7. package/Color.js +584 -506
  8. package/ComboBox.js +51 -51
  9. package/ControlGroup.js +132 -127
  10. package/Date.js +137 -150
  11. package/Dropdown.js +97 -96
  12. package/DualListbox.js +468 -469
  13. package/FetchOptions.d.ts +2 -2
  14. package/FormRows.js +158 -157
  15. package/JSONTree.js +354 -360
  16. package/{MIGRATION.mdx → MIGRATION.md} +13 -43
  17. package/{MIGRATION.v5.mdx → MIGRATION.v5.md} +67 -1
  18. package/Markdown.js +3 -4
  19. package/Menu.js +194 -195
  20. package/Modal.js +18 -18
  21. package/ModalLayer.js +171 -217
  22. package/Multiselect.js +785 -778
  23. package/Number.js +103 -102
  24. package/Popover.js +48 -46
  25. package/RadioBar.js +144 -146
  26. package/Resize.js +149 -151
  27. package/ResultsMenu.js +112 -114
  28. package/Search.js +49 -49
  29. package/Select.js +455 -457
  30. package/Slider.js +328 -331
  31. package/Switch.js +251 -178
  32. package/TabBar.js +277 -280
  33. package/Table.js +1212 -1178
  34. package/Text.js +45 -46
  35. package/Tooltip.js +192 -189
  36. package/Tree.js +177 -188
  37. package/package.json +10 -9
  38. package/types/src/Code/Code.d.ts +1 -1
  39. package/types/src/Color/Color.d.ts +2 -2
  40. package/types/src/ControlGroup/ControlGroup.d.ts +1 -2
  41. package/types/src/Dropdown/Dropdown.d.ts +5 -2
  42. package/types/src/Layer/Layer.d.ts +2 -1
  43. package/types/src/Layer/index.d.ts +1 -0
  44. package/types/src/ModalLayer/ModalLayer.d.ts +16 -21
  45. package/types/src/Number/Number.d.ts +1 -1
  46. package/types/src/Popover/Popover.d.ts +5 -2
  47. package/types/src/Table/HeadCell.d.ts +6 -1
  48. package/types/src/Table/HeadInner.d.ts +3 -1
  49. package/types/src/Tooltip/Tooltip.d.ts +7 -7
  50. package/types/src/fixtures/useFetchOptions.d.ts +33 -0
  51. package/useRovingFocus.js +20 -23
  52. 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 b = e.n(v);
83
+ var p = e.n(v);
84
84
  // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
85
- const p = require("@splunk/react-icons/Cross");
86
- var f = e.n(p);
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 T = E;
127
+ /* harmony default export */ const A = E;
128
128
  // CONCATENATED MODULE: external "styled-components"
129
- const A = require("styled-components");
130
- var B = e.n(A);
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()(b()).withConfig({
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;&:hover:not([disabled]){border-color:", ";background-color:", "}&:not([disabled]):has(> input:focus){box-shadow:", ";}&:not([disabled]){", "{visibility:visible;display:block;}}", " ", " ", " ", " &[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.interactiveColorBorderHover, k.variables.interactiveColorOverlayHover, k.variables.focusShadow, /* sc-sel */ D, (function(e) {
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, A.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
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, A.css)([ "border-top-left-radius:0;border-bottom-left-radius: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 && (0, A.css)([ "border-color:", ";box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);background-color:", ";cursor:not-allowed;" ], k.variables.interactiveColorBorderDisabled, k.variables.interactiveColorBackgroundDisabled);
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, A.css)([ "@media screen and (min--moz-device-pixel-ratio:0){", "{display:none;}}" ], /* sc-sel */ D);
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, A.css)([ "height:calc(", " - 2px);" ], k.variables.inputHeight);
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, A.css)([ "color:", ";" ], k.variables.contentColorDisabled);
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
- U(e, r, t[r]);
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 U(e, r, t) {
246
- return (r = W(r)) in e ? Object.defineProperty(e, 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 W(e) {
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, p = 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, A = e.error, B = A === void 0 ? false : A, 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, U = e.onChange, W = 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, be = e.type, pe = be === void 0 ? "text" : be, 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" ]);
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 Te = (0, t.useMemo)((function() {
404
+ var Ae = (0, t.useMemo)((function() {
406
405
  return ge ? fe : ke;
407
406
  }), [ ge, fe, ke ]);
408
- var Ae = (0, t.useCallback)((function(e) {
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
- U === null || U === void 0 ? void 0 : U(e, {
419
+ W === null || W === void 0 ? void 0 : W(e, {
421
420
  value: r,
422
421
  name: K
423
422
  });
424
- }), [ ge, K, U ]);
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
- U === null || U === void 0 ? void 0 : U(e, {
432
+ W === null || W === void 0 ? void 0 : W(e, {
434
433
  value: t,
435
434
  name: K
436
435
  });
437
- }), [ ge, K, U ]);
436
+ }), [ ge, K, W ]);
438
437
  var Pe = (0, t.useCallback)((function(e) {
439
- W === null || W === void 0 ? void 0 : W(e);
438
+ U === null || U === void 0 ? void 0 : U(e);
440
439
  e.stopPropagation();
441
- }), [ W ]);
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
- W === null || W === void 0 ? void 0 : W(e);
448
- }), [ W ]);
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(T, null) : n().createElement(S, null);
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(b(), {
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 (!!Te && y) {
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, Te, E, $e, Ie, Fe, je, re ]);
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 : pe;
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: p,
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: Ae,
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: Te,
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 Ue = pe === "password" || re ? undefined : Te;
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 We = pe === "time";
577
+ var Ue = be === "time";
579
578
 
580
579
  return n().createElement(_, J({
581
580
  tabIndex: -1,
582
- $isTimeInput: We,
581
+ $isTimeInput: Ue,
583
582
  "data-test": "text",
584
- "data-test-value": Ue,
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: Te
597
+ value: Ae
599
598
  }, ze)) : n().createElement(N, J({}, Ge, {
600
599
  onClick: Pe
601
600
  })), C, He());