@splunk/react-ui 4.41.0 → 4.43.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 (91) hide show
  1. package/ButtonGroup.js +1 -3
  2. package/CHANGELOG.md +47 -0
  3. package/Code.js +611 -426
  4. package/ComboBox.js +25 -32
  5. package/Date.js +21 -26
  6. package/Dropdown.js +33 -32
  7. package/JSONTree.js +30 -24
  8. package/Layer.js +115 -97
  9. package/Link.js +19 -21
  10. package/MIGRATION.mdx +48 -53
  11. package/Menu.js +7 -2
  12. package/MessageBar.js +54 -56
  13. package/Multiselect.js +1051 -1035
  14. package/Number.js +424 -395
  15. package/Paginator.js +269 -251
  16. package/Popover.js +595 -526
  17. package/RadioList.js +44 -43
  18. package/Resize.js +61 -61
  19. package/ResultsMenu.d.ts +2 -0
  20. package/ResultsMenu.js +4 -4
  21. package/Scroll.js +482 -475
  22. package/Search.js +56 -65
  23. package/Select.js +532 -513
  24. package/TabBar.js +4 -0
  25. package/Table.js +1519 -1437
  26. package/Text.js +29 -17
  27. package/TextArea.js +37 -37
  28. package/Tooltip.js +300 -207
  29. package/TransitionOpen.js +16 -14
  30. package/Tree.js +20 -14
  31. package/package.json +7 -7
  32. package/types/src/Button/Button.d.ts +1 -0
  33. package/types/src/ButtonGroup/ButtonGroup.d.ts +0 -4
  34. package/types/src/Code/Code.d.ts +1 -1
  35. package/types/src/ComboBox/ComboBox.d.ts +6 -3
  36. package/types/src/Date/Date.d.ts +0 -1
  37. package/types/src/Dropdown/Dropdown.d.ts +2 -1
  38. package/types/src/Dropdown/docs/examples/TooltipButtonToggle.d.ts +2 -0
  39. package/types/src/Layer/Layer.d.ts +2 -1
  40. package/types/src/Link/Link.d.ts +0 -2
  41. package/types/src/Multiselect/Multiselect.d.ts +2 -0
  42. package/types/src/Number/Number.d.ts +11 -10
  43. package/types/src/Number/utils.d.ts +29 -0
  44. package/types/src/Paginator/Paginator.d.ts +15 -2
  45. package/types/src/Paginator/docs/examples/CustomPages.d.ts +2 -0
  46. package/types/src/Popover/Popover.d.ts +18 -12
  47. package/types/src/Popover/PopoverMenuContext.d.ts +6 -0
  48. package/types/src/Popover/PopoverProvider.d.ts +23 -0
  49. package/types/src/Popover/index.d.ts +2 -1
  50. package/types/src/RadioList/RadioList.d.ts +1 -1
  51. package/types/src/Resize/Resize.d.ts +0 -11
  52. package/types/src/Scroll/Inner.d.ts +17 -19
  53. package/types/src/Select/SelectBase.d.ts +7 -5
  54. package/types/src/Select/docs/examples/Appearance.d.ts +1 -11
  55. package/types/src/Select/docs/examples/Basic.d.ts +1 -9
  56. package/types/src/Select/docs/examples/Children.d.ts +1 -9
  57. package/types/src/Select/docs/examples/Descriptions.d.ts +1 -9
  58. package/types/src/Select/docs/examples/Fetching.d.ts +1 -22
  59. package/types/src/Select/docs/examples/Filter.d.ts +1 -9
  60. package/types/src/Select/docs/examples/Headings.d.ts +1 -9
  61. package/types/src/Select/docs/examples/LoadMoreOnScrollBottom.d.ts +1 -24
  62. package/types/src/Select/docs/examples/Prefix.d.ts +1 -9
  63. package/types/src/Select/docs/examples/Truncate.d.ts +1 -9
  64. package/types/src/Table/ExpandButton.d.ts +8 -0
  65. package/types/src/Table/HeadDropdownCell.d.ts +2 -0
  66. package/types/src/Table/HeadInner.d.ts +5 -1
  67. package/types/src/Table/Row.d.ts +8 -2
  68. package/types/src/Table/docs/examples/Click.d.ts +2 -16
  69. package/types/src/Table/docs/examples/ClickRows.d.ts +2 -16
  70. package/types/src/Table/docs/examples/Complex.d.ts +2 -50
  71. package/types/src/Table/docs/examples/FilterColumnValues.d.ts +1 -13
  72. package/types/src/Table/docs/examples/HeadDropdownCell.d.ts +1 -17
  73. package/types/src/Table/docs/examples/ReorderColumns.d.ts +2 -21
  74. package/types/src/Table/docs/examples/ReorderRows.d.ts +2 -21
  75. package/types/src/Table/docs/examples/Resizable.d.ts +2 -23
  76. package/types/src/Table/docs/examples/ResizableFill.d.ts +2 -23
  77. package/types/src/Table/docs/examples/RowActions.d.ts +2 -39
  78. package/types/src/Table/docs/examples/Selectable.d.ts +2 -18
  79. package/types/src/Table/docs/examples/SortableColumns.d.ts +1 -11
  80. package/types/src/Tooltip/Tooltip.d.ts +38 -5
  81. package/types/src/Tooltip/docs/examples/CustomProps.d.ts +2 -0
  82. package/types/src/Tooltip/docs/examples/Toggletip.d.ts +2 -0
  83. package/types/src/useControlled/useControlled.d.ts +5 -4
  84. package/useControlled.js +37 -15
  85. package/usePrevious.js +62 -30
  86. package/useResizeObserver.js +122 -90
  87. package/useRovingFocus.js +5 -4
  88. package/types/src/Dropdown/docs/examples/OtherToggles.d.ts +0 -2
  89. package/types/src/Popover/PopoverContext.d.ts +0 -6
  90. package/types/src/Table/icons/ExpansionRow.d.ts +0 -6
  91. package/types/src/Tooltip/docs/examples/CustomContent.d.ts +0 -2
package/Menu.js CHANGED
@@ -866,7 +866,8 @@
866
866
  interactive: false,
867
867
  value: "menu-item",
868
868
  selectedLabel: "Selected",
869
- selected: c
869
+ selected: c,
870
+ disabled: Boolean(d)
870
871
  }), o && n().createElement(me, null, S ? n().createElement(Y(), {
871
872
  hideDefaultTooltip: true,
872
873
  screenReaderText: null
@@ -984,7 +985,7 @@
984
985
  // @docs-props-type MenuPropsBase
985
986
  if (false) {}
986
987
  var d = (0, r.useContext)(h), f = d.role, v = f === void 0 ? "menu" : f;
987
- var m = (0, r.useContext)(s.PopoverContext), b = m.retainFocus;
988
+ var m = (0, r.useContext)(s.PopoverMenuContext), b = m.retainFocus;
988
989
  var y = (0, r.useRef)(null);
989
990
  var g = true;
990
991
  if (a != null) {
@@ -1023,6 +1024,10 @@
1023
1024
  }), [ i ]);
1024
1025
  var w = lt(g);
1025
1026
  var S = (0, r.useCallback)((function(e) {
1027
+ // if command key on Mac was pressed ignore
1028
+ if (e.nativeEvent.metaKey) {
1029
+ return;
1030
+ }
1026
1031
  var t = st(e);
1027
1032
  var r = t === "tab" || t === "tabShift";
1028
1033
  var n = t === "enter";
package/MessageBar.js CHANGED
@@ -61,7 +61,7 @@
61
61
  e.r(r);
62
62
  // EXPORTS
63
63
  e.d(r, {
64
- default: () => /* reexport */ ie
64
+ default: () => /* reexport */ se
65
65
  });
66
66
  // CONCATENATED MODULE: external "react"
67
67
  const a = require("react");
@@ -115,13 +115,11 @@
115
115
  // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
116
116
  const N = require("@splunk/react-ui/Clickable");
117
117
  var R = e.n(N);
118
- // CONCATENATED MODULE: external "@splunk/react-ui/Link"
119
- const T = require("@splunk/react-ui/Link");
120
118
  // CONCATENATED MODULE: ./src/MessageBar/MessageBarStyles.ts
121
- var W = g().div.withConfig({
119
+ var T = g().div.withConfig({
122
120
  displayName: "MessageBarStyles__MessageBarContent",
123
121
  componentId: "sc-1uyhzza-0"
124
- })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a,& ", "{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], u.mixins.reset("inline"), /* sc-sel */ T.StyledLink, u.variables.borderRadius, (0,
122
+ })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a,& button[data-test='link']{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], u.mixins.reset("inline"), u.variables.borderRadius, (0,
125
123
  u.pick)({
126
124
  enterprise: {
127
125
  dark: (0, b.css)([ "box-shadow:0 0 0 2px ", ";" ], u.variables.gray80),
@@ -137,7 +135,7 @@
137
135
  dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
138
136
  }
139
137
  }));
140
- var P = g()(R()).withConfig({
138
+ var W = g()(R()).withConfig({
141
139
  displayName: "MessageBarStyles__MessageBarCloseWrapper",
142
140
  componentId: "sc-1uyhzza-1"
143
141
  })([ "", ";border:1px solid transparent;border-radius:", ";color:inherit;cursor:pointer;padding:", ";", " &:hover,&:focus{background:", ";border:1px solid;border-color:", ";color:", ";}&:active{", ";}", "" ], u.mixins.reset("flex"), u.variables.borderRadius, (0,
@@ -175,40 +173,40 @@
175
173
  dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
176
174
  }))
177
175
  }));
178
- var $ = (0, b.css)([ "margin-left:auto;" ]);
179
- var A = g()(y()).withConfig({
176
+ var P = (0, b.css)([ "margin-left:auto;" ]);
177
+ var $ = g()(y()).withConfig({
180
178
  displayName: "MessageBarStyles__StyledCheckCircleIcon",
181
179
  componentId: "sc-1uyhzza-2"
182
- })([ "", "" ], $);
183
- var L = g()(k()).withConfig({
180
+ })([ "", "" ], P);
181
+ var A = g()(k()).withConfig({
184
182
  displayName: "MessageBarStyles__StyledExclamationCircleIcon",
185
183
  componentId: "sc-1uyhzza-3"
186
- })([ "", "" ], $);
187
- var V = g()(x()).withConfig({
184
+ })([ "", "" ], P);
185
+ var L = g()(x()).withConfig({
188
186
  displayName: "MessageBarStyles__StyledInformationCircleIcon",
189
187
  componentId: "sc-1uyhzza-4"
190
- })([ "", "" ], $);
191
- var D = g()(w()).withConfig({
188
+ })([ "", "" ], P);
189
+ var V = g()(w()).withConfig({
192
190
  displayName: "MessageBarStyles__StyledExclamationTriangleIcon",
193
191
  componentId: "sc-1uyhzza-5"
194
- })([ "", "" ], $);
195
- var H = g()(_()).withConfig({
192
+ })([ "", "" ], P);
193
+ var D = g()(_()).withConfig({
196
194
  displayName: "MessageBarStyles__StyledEnterpriseErrorIcon",
197
195
  componentId: "sc-1uyhzza-6"
198
- })([ "", " color:", ";" ], $, u.variables.errorColor);
199
- var X = g()(z()).withConfig({
196
+ })([ "", " color:", ";" ], P, u.variables.errorColor);
197
+ var H = g()(z()).withConfig({
200
198
  displayName: "MessageBarStyles__StyledEnterpriseInfoCircleIcon",
201
199
  componentId: "sc-1uyhzza-7"
202
- })([ "", " color:", ";" ], $, u.variables.infoColor);
203
- var F = g()(E()).withConfig({
200
+ })([ "", " color:", ";" ], P, u.variables.infoColor);
201
+ var X = g()(E()).withConfig({
204
202
  displayName: "MessageBarStyles__StyledEnterpriseSuccessIcon",
205
203
  componentId: "sc-1uyhzza-8"
206
- })([ "", " color:", ";" ], $, u.variables.successColor);
207
- var G = g()(B()).withConfig({
204
+ })([ "", " color:", ";" ], P, u.variables.successColor);
205
+ var F = g()(B()).withConfig({
208
206
  displayName: "MessageBarStyles__StyledEnterpriseWarningIcon",
209
207
  componentId: "sc-1uyhzza-9"
210
- })([ "", " color:", ";" ], $, u.variables.warningColor);
211
- var J = g()(j()).withConfig({
208
+ })([ "", " color:", ";" ], P, u.variables.warningColor);
209
+ var G = g()(j()).withConfig({
212
210
  displayName: "MessageBarStyles__MessageBarWrapper",
213
211
  componentId: "sc-1uyhzza-10"
214
212
  })([ "", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";", ";" ], u.mixins.reset("block"), u.variables.spacingSmall, (function(e) {
@@ -268,8 +266,8 @@
268
266
  }))
269
267
  }));
270
268
  // CONCATENATED MODULE: ./src/MessageBar/MessageBar.tsx
271
- function K() {
272
- return K = Object.assign ? Object.assign.bind() : function(e) {
269
+ function J() {
270
+ return J = Object.assign ? Object.assign.bind() : function(e) {
273
271
  for (var r = 1; r < arguments.length; r++) {
274
272
  var a = arguments[r];
275
273
  for (var s in a) {
@@ -277,11 +275,11 @@
277
275
  }
278
276
  }
279
277
  return e;
280
- }, K.apply(null, arguments);
278
+ }, J.apply(null, arguments);
281
279
  }
282
- function Q(e, r) {
280
+ function K(e, r) {
283
281
  if (null == e) return {};
284
- var a, s, i = U(e, r);
282
+ var a, s, i = Q(e, r);
285
283
  if (Object.getOwnPropertySymbols) {
286
284
  var n = Object.getOwnPropertySymbols(e);
287
285
  for (s = 0; s < n.length; s++) {
@@ -290,7 +288,7 @@
290
288
  }
291
289
  return i;
292
290
  }
293
- function U(e, r) {
291
+ function Q(e, r) {
294
292
  if (null == e) return {};
295
293
  var a = {};
296
294
  for (var s in e) {
@@ -301,39 +299,39 @@
301
299
  }
302
300
  return a;
303
301
  }
304
- var Y = {
302
+ var U = {
305
303
  children: n().node.isRequired,
306
304
  onRequestClose: n().func,
307
305
  type: n().oneOf([ "info", "success", "warning", "error" ]).isRequired
308
306
  };
309
- var Z = Object.freeze({
307
+ var Y = Object.freeze({
310
308
  info: (0, v._)("Info"),
311
309
  warning: (0, v._)("Warning"),
312
310
  error: (0, v._)("Alert"),
313
311
  success: (0, v._)("Success")
314
312
  });
315
- var ee = Object.freeze({
316
- info: X,
317
- warning: G,
318
- error: H,
319
- success: F
313
+ var Z = Object.freeze({
314
+ info: H,
315
+ warning: F,
316
+ error: D,
317
+ success: X
320
318
  });
321
- var re = Object.freeze({
322
- info: V,
323
- warning: D,
324
- error: L,
325
- success: A
319
+ var ee = Object.freeze({
320
+ info: L,
321
+ warning: V,
322
+ error: A,
323
+ success: $
326
324
  });
327
- var ae = "24px";
328
- function se(e) {
329
- var r = e.children, a = e.type, i = e.onRequestClose, n = Q(e, [ "children", "type", "onRequestClose" ]);
325
+ var re = "24px";
326
+ function ae(e) {
327
+ var r = e.children, a = e.type, i = e.onRequestClose, n = K(e, [ "children", "type", "onRequestClose" ]);
330
328
  // @docs-props-type MessageBarPropsBase
331
329
  var o = (0, u.useSplunkTheme)(), l = o.isEnterprise;
332
- var p = l && a === "error" ? "22px" : ae;
333
- var b = l && a === "warning" ? "21px" : ae;
330
+ var p = l && a === "error" ? "22px" : re;
331
+ var b = l && a === "warning" ? "21px" : re;
334
332
  var g;
335
333
  if (l) {
336
- var h = ee[a];
334
+ var h = Z[a];
337
335
  g = s().createElement(h, {
338
336
  height: b,
339
337
  width: p,
@@ -343,27 +341,27 @@
343
341
  "data-test": "icon"
344
342
  });
345
343
  } else {
346
- var y = re[a];
344
+ var y = ee[a];
347
345
  g = s().createElement(y, {
348
- height: ae,
349
- width: ae,
346
+ height: re,
347
+ width: re,
350
348
  variant: "filled",
351
349
  "aria-hidden": true,
352
350
  "data-test": "icon"
353
351
  });
354
352
  }
355
353
 
356
- return s().createElement(J, K({
354
+ return s().createElement(G, J({
357
355
  $type: a,
358
356
  "data-test": "message-bar",
359
357
  "data-test-type": a
360
358
  }, n, {
361
359
  role: "region",
362
360
  $hasCloseButton: Boolean(i)
363
- }), g, s().createElement(d(), null, Z[a]), s().createElement(W, {
361
+ }), g, s().createElement(d(), null, Y[a]), s().createElement(T, {
364
362
  $type: a,
365
363
  "data-test": "content"
366
- }, r), i && s().createElement(P, {
364
+ }, r), i && s().createElement(W, {
367
365
  $type: a,
368
366
  onClick: i
369
367
  }, l ? s().createElement(c(), {
@@ -379,8 +377,8 @@
379
377
  width: "19px"
380
378
  }), s().createElement(d(), null, (0, v._)("Close"))));
381
379
  }
382
- se.propTypes = Y;
383
- /* harmony default export */ const ie = se;
380
+ ae.propTypes = U;
381
+ /* harmony default export */ const se = ae;
384
382
  // CONCATENATED MODULE: ./src/MessageBar/index.ts
385
383
  module.exports = r;
386
384
  /******/})();