@splunk/react-ui 4.26.0 → 4.28.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.
Files changed (79) hide show
  1. package/Accordion.js +195 -212
  2. package/Box.js +45 -44
  3. package/Button.js +1 -2
  4. package/ButtonSimple.js +145 -147
  5. package/CHANGELOG.md +52 -3
  6. package/CollapsiblePanel.js +555 -325
  7. package/Color.js +3 -1
  8. package/ControlGroup.js +1 -0
  9. package/JSONTree.js +1311 -629
  10. package/MIGRATION.mdx +30 -0
  11. package/Markdown.js +521 -222
  12. package/Modal.js +26 -10
  13. package/Multiselect.js +844 -804
  14. package/Paginator.js +593 -271
  15. package/TabBar.js +487 -312
  16. package/Table.js +903 -869
  17. package/Text.js +30 -40
  18. package/TextArea.js +372 -432
  19. package/Tree.js +607 -519
  20. package/package.json +4 -2
  21. package/types/src/Accordion/Accordion.d.ts +2 -2
  22. package/types/src/Accordion/AccordionContext.d.ts +2 -3
  23. package/types/src/Box/Box.d.ts +3 -2
  24. package/types/src/CollapsiblePanel/CollapsiblePanel.d.ts +49 -15
  25. package/types/src/CollapsiblePanel/SingleOpenPanelGroup.d.ts +62 -0
  26. package/types/src/CollapsiblePanel/SingleOpenPanelGroupContext.d.ts +9 -0
  27. package/types/src/CollapsiblePanel/docs/examples/MultiControlled.d.ts +2 -2
  28. package/types/src/CollapsiblePanel/docs/examples/SingleOpenPanelGroupControlled.d.ts +2 -0
  29. package/types/src/CollapsiblePanel/docs/examples/SingleOpenPanelGroupUncontrolled.d.ts +2 -0
  30. package/types/src/CollapsiblePanel/icons/ExpandPanel.d.ts +7 -5
  31. package/types/src/File/docs/examples/FullScreen.d.ts +1 -14
  32. package/types/src/JSONTree/JSONTreeItem.d.ts +45 -0
  33. package/types/src/JSONTree/renderTreeItems.d.ts +17 -0
  34. package/types/src/Markdown/renderers/MarkdownAnchorHeading.d.ts +1 -1
  35. package/types/src/Markdown/renderers/MarkdownBlockquote.d.ts +1 -1
  36. package/types/src/Markdown/renderers/MarkdownCode.d.ts +1 -1
  37. package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts +1 -1
  38. package/types/src/Markdown/renderers/MarkdownHeading.d.ts +1 -1
  39. package/types/src/Markdown/renderers/MarkdownImage.d.ts +1 -1
  40. package/types/src/Markdown/renderers/MarkdownItem.d.ts +1 -1
  41. package/types/src/Markdown/renderers/MarkdownList.d.ts +1 -1
  42. package/types/src/Markdown/renderers/MarkdownParagraph.d.ts +1 -1
  43. package/types/src/Modal/Modal.d.ts +4 -5
  44. package/types/src/Multiselect/Normal.d.ts +1 -0
  45. package/types/src/Paginator/Button.d.ts +8 -3
  46. package/types/src/Paginator/Compact.d.ts +50 -0
  47. package/types/src/Paginator/PageControl.d.ts +37 -0
  48. package/types/src/Paginator/PageSelect.d.ts +32 -0
  49. package/types/src/Paginator/Paginator.d.ts +9 -4
  50. package/types/src/Paginator/docs/examples/Compact.d.ts +2 -0
  51. package/types/src/Paginator/docs/examples/CompactCustomLabel.d.ts +2 -0
  52. package/types/src/Paginator/docs/examples/CompactWithLabel.d.ts +2 -0
  53. package/types/src/Paginator/docs/examples/Labelled.d.ts +2 -0
  54. package/types/src/Paginator/docs/examples/PageControl.d.ts +2 -0
  55. package/types/src/Paginator/icons/ChevronLeft.d.ts +5 -0
  56. package/types/src/Paginator/icons/ChevronRight.d.ts +5 -0
  57. package/types/src/SlidingPanels/docs/examples/Modal.d.ts +1 -13
  58. package/types/src/TabBar/Tab.d.ts +12 -2
  59. package/types/src/TabBar/TabBar.d.ts +4 -3
  60. package/types/src/TabBar/TabBarContext.d.ts +6 -1
  61. package/types/src/Table/Cell.d.ts +3 -1
  62. package/types/src/Table/Head.d.ts +2 -2
  63. package/types/src/Table/HeadCell.d.ts +2 -0
  64. package/types/src/Table/Row.d.ts +4 -2
  65. package/types/src/Table/Table.d.ts +1 -1
  66. package/types/src/Table/Toggle.d.ts +4 -4
  67. package/types/src/TextArea/TextArea.d.ts +3 -2
  68. package/types/src/TextArea/icons/ClearButton.d.ts +3 -0
  69. package/types/src/TextArea/icons/SearchIcon.d.ts +1 -0
  70. package/types/src/Tree/TreeContext.d.ts +2 -1
  71. package/types/src/Tree/TreeItem.d.ts +18 -5
  72. package/types/src/fixtures/text.d.ts +1 -0
  73. package/types/src/CollapsiblePanel/docs/examples/prisma/BasicControlled.d.ts +0 -2
  74. package/types/src/CollapsiblePanel/docs/examples/prisma/BasicUncontrolled.d.ts +0 -2
  75. package/types/src/CollapsiblePanel/docs/examples/prisma/Content.d.ts +0 -1
  76. package/types/src/CollapsiblePanel/docs/examples/prisma/MultiControlled.d.ts +0 -2
  77. package/types/src/CollapsiblePanel/docs/examples/prisma/MultiUncontrolled.d.ts +0 -2
  78. package/types/src/JSONTree/JSONTreeContext.d.ts +0 -7
  79. package/types/src/JSONTree/TreeNode.d.ts +0 -44
package/Text.js CHANGED
@@ -84,8 +84,8 @@
84
84
  // CONCATENATED MODULE: external "@splunk/react-ui/ControlGroup"
85
85
  const m = require("@splunk/react-ui/ControlGroup");
86
86
  // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
87
- const v = require("@splunk/react-icons/Cross");
88
- var h = e.n(v);
87
+ const h = require("@splunk/react-icons/Cross");
88
+ var v = e.n(h);
89
89
  // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
90
90
  const b = require("@splunk/react-icons/enterprise/Close");
91
91
  var y = e.n(b);
@@ -169,10 +169,10 @@
169
169
  fill: "currentColor"
170
170
  }));
171
171
  }
172
- /* harmony default export */ const P = R;
172
+ /* harmony default export */ const $ = R;
173
173
  // CONCATENATED MODULE: ./src/Text/IconOutlinedView.tsx
174
- function $() {
175
- $ = Object.assign || function(e) {
174
+ function _() {
175
+ _ = Object.assign || function(e) {
176
176
  for (var t = 1; t < arguments.length; t++) {
177
177
  var r = arguments[t];
178
178
  for (var n in r) {
@@ -183,13 +183,13 @@
183
183
  }
184
184
  return e;
185
185
  };
186
- return $.apply(this, arguments);
186
+ return _.apply(this, arguments);
187
187
  }
188
- function _(e) {
188
+ function P(e) {
189
189
  var t = (0, A.useSplunkTheme)(), r = t.family, i = t.density;
190
190
  if (r === "enterprise") {
191
191
 
192
- return n().createElement(j(), $({
192
+ return n().createElement(j(), _({
193
193
  viewBox: "0 0 24 24",
194
194
  size: 1.2,
195
195
  screenReaderText: (0, T._)("View password")
@@ -227,7 +227,7 @@
227
227
  fill: "currentColor"
228
228
  }));
229
229
  }
230
- /* harmony default export */ const B = _;
230
+ /* harmony default export */ const B = P;
231
231
  // CONCATENATED MODULE: external "styled-components"
232
232
  const D = require("styled-components");
233
233
  var N = e.n(D);
@@ -309,7 +309,7 @@
309
309
  var U = N().span.withConfig({
310
310
  displayName: "TextStyles__StyledInputWrapper",
311
311
  componentId: "eg7n6t-3"
312
- })([ "", ";flex-grow:1;min-height:", ";position:relative;overflow:hidden;border:1px solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);padding:", ";align-items:center;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){", "}", " ", " ", " ", "" ], A.mixins.reset("inline-flex"), A.variables.inputHeight, (0,
312
+ })([ "", ";flex-grow:1;min-height:", ";position:relative;overflow:hidden;border:1px solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);padding:", ";align-items:center;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}", " ", " ", " ", "" ], A.mixins.reset("inline-flex"), A.variables.inputHeight, (0,
313
313
  A.pick)({
314
314
  enterprise: {
315
315
  light: A.variables.gray60,
@@ -337,19 +337,9 @@
337
337
  dark: A.variables.gray20
338
338
  },
339
339
  prisma: A.variables.interactiveColorBorderHover
340
- }), (0, A.pick)({
341
- enterprise: (0, D.css)([ "box-shadow:", ";color:", ";" ], A.variables.focusShadow, A.variables.textColor),
342
- prisma: (0, D.css)([ "border-color:", ";color:", ";" ], A.variables.interactiveColorPrimary, A.variables.contentColorActive)
343
- }), (function(e) {
340
+ }), A.variables.focusShadow, A.variables.contentColorActive, (function(e) {
344
341
  var t = e.$error;
345
- return t && (0, D.css)([ "&,&:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){", "}" ], (0,
346
- A.pick)({
347
- enterprise: A.variables.errorColor,
348
- prisma: A.variables.accentColorNegative
349
- }), (0, A.pick)({
350
- enterprise: (0, D.css)([ "box-shadow:", ";color:", ";" ], A.variables.focusShadow, A.variables.textColor),
351
- prisma: (0, D.css)([ "border-color:", ";color:", ";" ], A.variables.interactiveColorPrimary, A.variables.contentColorActive)
352
- }));
342
+ return t && (0, D.css)([ "&,&:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}" ], A.variables.accentColorNegative, A.variables.focusShadow, A.variables.contentColorActive);
353
343
  }), (function(e) {
354
344
  var t = e.$append;
355
345
  return t && (0, D.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
@@ -622,7 +612,7 @@
622
612
  }
623
613
  function me(e, t) {
624
614
  if (e == null) return {};
625
- var r = ve(e, t);
615
+ var r = he(e, t);
626
616
  var n, i;
627
617
  if (Object.getOwnPropertySymbols) {
628
618
  var a = Object.getOwnPropertySymbols(e);
@@ -635,7 +625,7 @@
635
625
  }
636
626
  return r;
637
627
  }
638
- function ve(e, t) {
628
+ function he(e, t) {
639
629
  if (e == null) return {};
640
630
  var r = {};
641
631
  var n = Object.keys(e);
@@ -647,7 +637,7 @@
647
637
  }
648
638
  return r;
649
639
  }
650
- function he(e, t) {
640
+ function ve(e, t) {
651
641
  if (!(e instanceof t)) {
652
642
  throw new TypeError("Cannot call a class as a function");
653
643
  }
@@ -819,7 +809,7 @@
819
809
  } ]);
820
810
  function r(e) {
821
811
  var i;
822
- he(this, r);
812
+ ve(this, r);
823
813
  i = t.call(this, e);
824
814
  Ee(ke(i), "controlledExternally", void 0);
825
815
  Ee(ke(i), "input", null);
@@ -929,7 +919,7 @@
929
919
  return n().createElement(re, m, a);
930
920
  }
931
921
  if (o && !l) {
932
- var v = i.state.hideVisibility ? n().createElement(B, null) : n().createElement(P, null);
922
+ var h = i.state.hideVisibility ? n().createElement(B, null) : n().createElement($, null);
933
923
 
934
924
  return n().createElement(re, m, n().createElement(Q, {
935
925
  appearance: p ? "secondary" : "pill",
@@ -937,7 +927,7 @@
937
927
  inline: false,
938
928
  onClick: i.handleVisibilityToggle,
939
929
  type: "button",
940
- icon: v
930
+ icon: h
941
931
  }));
942
932
  }
943
933
  var b = i.context;
@@ -964,7 +954,7 @@
964
954
  icon: u ? n().createElement(y(), {
965
955
  size: 1,
966
956
  screenReaderText: x
967
- }) : n().createElement(h(), {
957
+ }) : n().createElement(v(), {
968
958
  "aria-label": x
969
959
  }),
970
960
  onClick: i.handleClear
@@ -989,7 +979,7 @@
989
979
  icon: u ? n().createElement(y(), {
990
980
  inline: false,
991
981
  screenReaderText: x
992
- }) : n().createElement(h(), {
982
+ }) : n().createElement(v(), {
993
983
  "aria-label": x,
994
984
  height: f,
995
985
  inline: false,
@@ -1087,13 +1077,13 @@
1087
1077
  }, {
1088
1078
  key: "render",
1089
1079
  value: function e() {
1090
- var t = this.props, r = t.append, i = t.autoCapitalize, a = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, p = t.className, u = t.classNamePrivate, m = t.disabled, v = t.describedBy, h = t.elementRef, b = t.error, y = t.inline, C = t.inputClassName, g = t.inputId, x = t.labelledBy, w = t.multiline, k = t.maxLength, S = t.name, A = t.passwordVisibilityToggle, T = t.placeholder, I = t.prepend, j = t.required, M = t.spellCheck, R = t.tabIndex, P = t.title, $ = t.type, _ = t.useSyntheticPlaceholder, B = me(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder" ]);
1080
+ var t = this.props, r = t.append, i = t.autoCapitalize, a = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, p = t.className, u = t.classNamePrivate, m = t.disabled, h = t.describedBy, v = t.elementRef, b = t.error, y = t.inline, C = t.inputClassName, g = t.inputId, x = t.labelledBy, w = t.multiline, k = t.maxLength, S = t.name, A = t.passwordVisibilityToggle, T = t.placeholder, I = t.prepend, j = t.required, M = t.spellCheck, R = t.tabIndex, $ = t.title, _ = t.type, P = t.useSyntheticPlaceholder, B = me(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder" ]);
1091
1081
  var D = fe(fe({
1092
1082
  role: "textbox"
1093
1083
  }, f()(B, (function(e, t) {
1094
1084
  return t === "role" || t.indexOf("aria-") === 0;
1095
1085
  }))), {}, {
1096
- "aria-describedby": v,
1086
+ "aria-describedby": h,
1097
1087
  "aria-labelledby": x,
1098
1088
  "aria-invalid": b || undefined
1099
1089
  });
@@ -1106,7 +1096,7 @@
1106
1096
  $prepend: I || undefined
1107
1097
  };
1108
1098
  var W = this.state.hideVisibility ? "password" : "text";
1109
- var z = A ? W : $;
1099
+ var z = A ? W : _;
1110
1100
  var Z = fe(fe({}, D), {}, {
1111
1101
  "data-test": "textbox",
1112
1102
  autoCapitalize: i,
@@ -1115,7 +1105,7 @@
1115
1105
  autoFocus: l,
1116
1106
  id: g,
1117
1107
  maxLength: k,
1118
- placeholder: T && !_ ? T : undefined,
1108
+ placeholder: T && !P ? T : undefined,
1119
1109
  name: S,
1120
1110
  onChange: this.handleInputChange,
1121
1111
  onKeyDown: this.handleInputKeyDown,
@@ -1129,17 +1119,17 @@
1129
1119
  style: {
1130
1120
  height: this.state.height
1131
1121
  },
1132
- title: P,
1122
+ title: $,
1133
1123
  tabIndex: R,
1134
1124
  type: z,
1135
1125
  value: q,
1136
1126
  $error: b
1137
1127
  });
1138
- var F = _ && T && !q;
1128
+ var F = P && T && !q;
1139
1129
  // Do not render value in DOM when type is password, or passwordVisibilityToggle is enabled
1140
- var H = $ === "password" || A ? undefined : q;
1130
+ var H = _ === "password" || A ? undefined : q;
1141
1131
  // Firefox hack (SUI-2716). Remove when fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1427173
1142
- var K = $ === "time";
1132
+ var K = _ === "time";
1143
1133
  var Q = !!this.renderEndAdornment();
1144
1134
  var Y = !!this.renderStartAdornment();
1145
1135
  if (w) {
@@ -1153,7 +1143,7 @@
1153
1143
  className: (0, O.toClassName)(p, u),
1154
1144
  "data-test": "text",
1155
1145
  "data-test-value": H,
1156
- elementRef: h,
1146
+ elementRef: v,
1157
1147
  flex: true,
1158
1148
  inline: y
1159
1149
  }, N), this.renderStartAdornment(), n().createElement(U, ae({
@@ -1169,7 +1159,7 @@
1169
1159
  readOnly: true,
1170
1160
  type: z,
1171
1161
  value: q,
1172
- placeholder: T && !_ ? T : undefined
1162
+ placeholder: T && !P ? T : undefined
1173
1163
  }, D)) : n().createElement(J, ae({}, Z, {
1174
1164
  onClick: this.handleInputClick
1175
1165
  })), F && n().createElement(L(), null, T), F && n().createElement(X, {