@splunk/react-ui 5.0.0-beta.4 → 5.0.0-rc.1

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 (88) hide show
  1. package/Button.js +3 -1
  2. package/ButtonSimple.js +92 -168
  3. package/CHANGELOG.md +4 -1
  4. package/CHANGELOG.v5.mdx +59 -0
  5. package/Card.js +29 -28
  6. package/Chip.js +171 -225
  7. package/Clickable.js +79 -76
  8. package/CollapsiblePanel.js +172 -164
  9. package/Color.js +584 -506
  10. package/ComboBox.js +1 -1
  11. package/ControlGroup.js +132 -127
  12. package/Date.js +163 -198
  13. package/Dropdown.js +97 -99
  14. package/DualListbox.js +439 -504
  15. package/File.js +449 -324
  16. package/FormRows.js +177 -175
  17. package/JSONTree.js +586 -617
  18. package/Layer.js +162 -97
  19. package/Link.js +20 -13
  20. package/MIGRATION.v5.mdx +98 -0
  21. package/Markdown.js +1 -1
  22. package/Menu.js +194 -195
  23. package/Message.js +119 -141
  24. package/MessageBar.js +109 -168
  25. package/ModalLayer.js +171 -217
  26. package/Multiselect.js +595 -602
  27. package/Number.js +103 -102
  28. package/Popover.js +195 -190
  29. package/Progress.js +68 -54
  30. package/RadioBar.js +146 -145
  31. package/RadioList.js +67 -65
  32. package/Resize.js +377 -265
  33. package/ResultsMenu.js +573 -663
  34. package/ScrollContainerContext.js +13 -9
  35. package/Search.js +50 -50
  36. package/Select.js +206 -199
  37. package/Slider.js +454 -329
  38. package/StepBar.js +2 -2
  39. package/Switch.js +220 -146
  40. package/TabBar.js +411 -409
  41. package/TabLayout.js +34 -34
  42. package/Table.js +1163 -1156
  43. package/Text.js +58 -58
  44. package/TextArea.js +278 -152
  45. package/Tooltip.js +173 -177
  46. package/Tree.js +177 -188
  47. package/Typography.js +30 -28
  48. package/WaitSpinner.js +6 -11
  49. package/cypress/support/commands.ts +14 -4
  50. package/cypress/support/index.d.ts +1 -1
  51. package/package.json +5 -5
  52. package/stubs-splunkui.d.ts +0 -4
  53. package/types/src/Card/Card.d.ts +3 -1
  54. package/types/src/Card/Header.d.ts +2 -0
  55. package/types/src/Card/docs/examples/HeadingTitle.d.ts +3 -0
  56. package/types/src/Clickable/Clickable.d.ts +11 -3
  57. package/types/src/Color/Color.d.ts +2 -2
  58. package/types/src/Layer/Layer.d.ts +2 -1
  59. package/types/src/Layer/index.d.ts +1 -0
  60. package/types/src/Link/Link.d.ts +4 -0
  61. package/types/src/Message/Message.d.ts +1 -1
  62. package/types/src/MessageBar/MessageBar.d.ts +1 -1
  63. package/types/src/ModalLayer/ModalLayer.d.ts +16 -21
  64. package/types/src/Multiselect/Multiselect.d.ts +1 -8
  65. package/types/src/Multiselect/Normal.d.ts +1 -7
  66. package/types/src/Multiselect/docs/examples/Children.d.ts +2 -9
  67. package/types/src/Multiselect/docs/examples/Controlled.d.ts +2 -9
  68. package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts +2 -9
  69. package/types/src/Multiselect/docs/examples/Disabled.d.ts +2 -9
  70. package/types/src/Multiselect/docs/examples/Error.d.ts +2 -9
  71. package/types/src/Multiselect/docs/examples/Fetching.d.ts +2 -22
  72. package/types/src/Multiselect/docs/examples/Headings.d.ts +2 -1
  73. package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts +2 -25
  74. package/types/src/Multiselect/docs/examples/NewValues.d.ts +2 -9
  75. package/types/src/Multiselect/docs/examples/TabInput.d.ts +2 -9
  76. package/types/src/Popover/Popover.d.ts +4 -2
  77. package/types/src/ResultsMenu/ResultsMenu.d.ts +23 -34
  78. package/types/src/Select/SelectBase.d.ts +2 -2
  79. package/types/src/TabBar/TabBar.d.ts +8 -5
  80. package/types/src/TabBar/TabBarContext.d.ts +1 -1
  81. package/types/src/TabLayout/TabLayout.d.ts +8 -5
  82. package/types/src/Typography/Typography.d.ts +27 -22
  83. package/useRovingFocus.js +20 -23
  84. package/types/src/Date/Icon.d.ts +0 -3
  85. package/types/src/TabBar/docs/examples/IconsAbove.d.ts +0 -3
  86. package/types/src/TabBar/docs/examples/VerticalIconsAbove.d.ts +0 -3
  87. /package/types/src/TabBar/docs/examples/{IconsLeft.d.ts → Icons.d.ts} +0 -0
  88. /package/types/src/TabBar/docs/examples/{VerticalIconsLeft.d.ts → VerticalIcons.d.ts} +0 -0
package/FormRows.js CHANGED
@@ -61,8 +61,8 @@
61
61
  e.r(n);
62
62
  // EXPORTS
63
63
  e.d(n, {
64
- Row: () => /* reexport */ Z,
65
- default: () => /* reexport */ be
64
+ Row: () => /* reexport */ ne,
65
+ default: () => /* reexport */ ye
66
66
  });
67
67
  // CONCATENATED MODULE: external "react"
68
68
  const r = require("react");
@@ -74,75 +74,74 @@
74
74
  const i = require("@splunk/react-icons/Plus");
75
75
  var l = e.n(i);
76
76
  // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
77
- const u = require("@splunk/ui-utils/i18n");
78
- // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
79
- const s = require("@splunk/ui-utils/keyboard");
77
+ const s = require("@splunk/ui-utils/i18n");
80
78
  // CONCATENATED MODULE: ./src/FormRows/FormRowsContext.tsx
81
- var d = (0, r.createContext)({
79
+ var u = (0, r.createContext)({
82
80
  disabledRemoveButton: false,
83
81
  sortable: true
84
82
  });
85
- d.displayName = "FormRows";
86
- /* harmony default export */ const c = d;
83
+ u.displayName = "FormRows";
84
+ /* harmony default export */ const d = u;
87
85
  // CONCATENATED MODULE: external "@splunk/react-icons/TrashCanCross"
88
- const f = require("@splunk/react-icons/TrashCanCross");
89
- var v = e.n(f);
86
+ const c = require("@splunk/react-icons/TrashCanCross");
87
+ var f = e.n(c);
90
88
  // CONCATENATED MODULE: external "styled-components"
91
- const p = require("styled-components");
92
- var m = e.n(p);
89
+ const v = require("styled-components");
90
+ var m = e.n(v);
93
91
  // CONCATENATED MODULE: external "@splunk/react-ui/Button"
94
- const b = require("@splunk/react-ui/Button");
95
- var g = e.n(b);
92
+ const p = require("@splunk/react-ui/Button");
93
+ var b = e.n(p);
96
94
  // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
97
- const y = require("@splunk/react-ui/ButtonSimple");
98
- var h = e.n(y);
95
+ const g = require("@splunk/react-ui/ButtonSimple");
96
+ var y = e.n(g);
99
97
  // CONCATENATED MODULE: external "@splunk/themes"
100
- const w = require("@splunk/themes");
98
+ const h = require("@splunk/themes");
101
99
  // CONCATENATED MODULE: ./src/FormRows/FormRowsStyles.ts
102
- var R = m().div.withConfig({
103
- displayName: "FormRowsStyles__StyledDiv",
100
+ var w = (0, v.css)([ "width:", ";height:", ";" ], h.variables.inputHeight, h.variables.inputHeight);
101
+ var R = m()(y()).withConfig({
102
+ displayName: "FormRowsStyles__StyledDragButton",
104
103
  componentId: "sc-1j4j7h3-0"
105
- })([ "", ";justify-content:start;grid-template-columns:[drag-handle] min-content [content] auto [remove-button] min-content;column-gap:", ";row-gap:", ";" ], w.mixins.reset("grid"), w.variables.spacingSmall, w.variables.spacingXSmall);
106
- var S = m().div.withConfig({
107
- displayName: "FormRowsStyles__StyledHeader",
104
+ })([ "", ";grid-column:drag-handle;cursor:move;user-select:none;-webkit-user-drag:element;" ], w);
105
+ var S = m()(y()).withConfig({
106
+ displayName: "FormRowsStyles__StyledRemoveButton",
108
107
  componentId: "sc-1j4j7h3-1"
109
- })([ "", ";grid-column:content;" ], w.mixins.typography("largeBody", {
110
- color: "active"
111
- }));
112
- var O = (0, p.css)([ "grid-column:content;width:min-content;margin-block-start:", ";" ], w.variables.spacingXSmall);
113
- var j = m()(g()).withConfig({
114
- displayName: "FormRowsStyles__StyledAddRowButton",
108
+ })([ "", ";grid-column:remove-button;" ], w);
109
+ var O = m().div.withConfig({
110
+ displayName: "FormRowsStyles__StyledDiv",
115
111
  componentId: "sc-1j4j7h3-2"
116
- })([ "", ";" ], O);
112
+ })([ "", ";justify-content:start;&:has(", "):has(", "){grid-template-columns:[drag-handle] min-content [content] minmax(auto,1fr) [remove-button] min-content;}&:has(", "){grid-template-columns:[drag-handle] min-content [content] minmax(auto,1fr);}&:has(", "){grid-template-columns:[content] minmax(auto,1fr) [remove-button] min-content;}grid-template-columns:[content] minmax(auto,1fr);column-gap:", ";row-gap:", ";" ], h.mixins.reset("grid"), R, S, R, S, h.variables.spacingSmall, h.variables.spacingXSmall);
117
113
  var x = m().div.withConfig({
118
- displayName: "FormRowsStyles__StyledMenuWrapper",
114
+ displayName: "FormRowsStyles__StyledHeader",
119
115
  componentId: "sc-1j4j7h3-3"
120
- })([ "", ";" ], O);
121
- var E = m()(h()).withConfig({
122
- displayName: "FormRowsStyles__StyledDragButton",
116
+ })([ "", ";grid-column:content;" ], h.mixins.typography("largeBody", {
117
+ color: "active"
118
+ }));
119
+ var j = (0, v.css)([ "grid-column:content;width:min-content;margin-block-start:", ";" ], h.variables.spacingXSmall);
120
+ var C = m()(b()).withConfig({
121
+ displayName: "FormRowsStyles__StyledAddRowButton",
123
122
  componentId: "sc-1j4j7h3-4"
124
- })([ "grid-column:drag-handle;border:none;width:", ";height:", ";cursor:move;user-select:none;-webkit-user-drag:element;" ], w.variables.inputHeight, w.variables.inputHeight);
125
- var C = m()(h()).withConfig({
126
- displayName: "FormRowsStyles__StyledRemoveButton",
123
+ })([ "", ";" ], j);
124
+ var E = m().div.withConfig({
125
+ displayName: "FormRowsStyles__StyledMenuWrapper",
127
126
  componentId: "sc-1j4j7h3-5"
128
- })([ "grid-column:remove-button;border:none;width:", ";height:", ";" ], w.variables.inputHeight, w.variables.inputHeight);
129
- var k = m().div.withConfig({
127
+ })([ "", ";" ], j);
128
+ var q = m().div.withConfig({
130
129
  displayName: "FormRowsStyles__StyledInputWrapper",
131
130
  componentId: "sc-1j4j7h3-6"
132
- })([ "display:flex;gap:", ";" ], w.variables.spacingXSmall);
133
- var q = function e(n) {
131
+ })([ "display:flex;gap:", ";" ], h.variables.spacingXSmall);
132
+ var k = function e(n) {
134
133
  return n ? "drag-handle" : "content";
135
134
  };
136
135
  /* Row includes drag handle, input, and remove button */ var P = m().div.withConfig({
137
136
  displayName: "FormRowsStyles__StyledRow",
138
137
  componentId: "sc-1j4j7h3-7"
139
- })([ "", ";grid-template-columns:subgrid;grid-column:", " / -1;padding:", " 0;border-radius:", ";&.sorting{z-index:calc(", " + 1);}&:focus{outline:0;}&:has(", ":active,", ":focus){background:", ";}&:not(:has(", ")){grid-column:", " / remove-button;padding-right:", ";}" ], w.mixins.reset("grid"), (function(e) {
138
+ })([ "", ";grid-template-columns:subgrid;grid-column:", " / -1;padding:", " 0;border-radius:", ";&.sorting{z-index:calc(", " + 1);}&:focus{outline:0;}", "" ], h.mixins.reset("grid"), (function(e) {
140
139
  var n = e.$sortable;
141
- return q(n);
142
- }), w.variables.spacingXSmall, w.variables.borderRadius, w.variables.zindexPopover, E, E, w.variables.interactiveColorOverlayDrag, C, (function(e) {
140
+ return k(n);
141
+ }), h.variables.spacingXSmall, h.variables.borderRadius, h.variables.zindexPopover, (function(e) {
143
142
  var n = e.$sortable;
144
- return q(n);
145
- }), w.variables.spacingXSmall);
143
+ return n && (0, v.css)([ "&:has(", ":active,", ":focus){background:", ";}&:not(:has(", ")){padding-inline-end:", ";}" ], R, R, h.variables.interactiveColorOverlayDrag, S, h.variables.spacingXSmall);
144
+ }));
146
145
  // CONCATENATED MODULE: ./src/FormRows/RowInternal.tsx
147
146
  function I() {
148
147
  return I = Object.assign ? Object.assign.bind() : function(e) {
@@ -177,7 +176,7 @@
177
176
  }
178
177
  return r;
179
178
  }
180
- /** @public */ var T = {
179
+ /** @public */ var A = {
181
180
  children: a().node,
182
181
  index: a().number,
183
182
  onRequestRemove: a().func,
@@ -185,44 +184,45 @@
185
184
  style: a().object,
186
185
  value: a().node
187
186
  };
187
+ var T = (0, s._)("Remove row");
188
188
  var M = t().forwardRef((function(e, n) {
189
189
  var o = e.children, a = e.index, i = e.onRequestRemove, l = e.renderDragHandle, s = _(e, [ "children", "index", "onRequestRemove", "renderDragHandle" ]);
190
- var d = (0, r.useContext)(c), f = d.disabledRemoveButton, p = d.hasOnRequestAdd, m = d.sortable;
191
- var b = (0, r.useCallback)((function(e) {
190
+ var u = (0, r.useContext)(d), c = u.disabledRemoveButton, v = u.hasOnRequestAdd, m = u.sortable;
191
+ var p = (0, r.useCallback)((function(e) {
192
192
  // FormRows remove functionality doesn't work without an index, but index is not a required prop. FormRows will throw an error
193
193
  // when rows are sortable and/or removable and index is not provided.
194
194
  i === null || i === void 0 ? void 0 : i(e, {
195
195
  index: a !== null && a !== void 0 ? a : 0
196
196
  });
197
197
  }), [ i, a ]);
198
- var g = i !== undefined;
198
+ var b = i !== undefined;
199
199
  (0, r.useEffect)((function() {
200
200
  if (false) {}
201
201
  if (false) {}
202
202
  if (false) {}
203
- }), [ p, g, m, a ]);
203
+ }), [ v, b, m, a ]);
204
204
 
205
205
  return t().createElement(P, I({
206
206
  $sortable: m,
207
207
  "data-test": "row",
208
208
  ref: n
209
- }, s), l && l(), t().createElement(k, null, o), g && t().createElement(C, {
210
- appearance: "secondary",
211
- "aria-label": (0, u._)("Remove Row"),
209
+ }, s), l && l(), t().createElement(q, null, o), b && t().createElement(S, {
210
+ appearance: "subtle",
211
+ "aria-label": T,
212
212
  "data-test": "remove",
213
- disabled: f,
214
- onClick: b
215
- }, t().createElement(v(), null)));
213
+ disabled: c,
214
+ onClick: p
215
+ }, t().createElement(f(), null)));
216
216
  }));
217
- M.propTypes = T;
217
+ M.propTypes = A;
218
218
  /* harmony default export */ const N = M;
219
219
  // CONCATENATED MODULE: external "@dnd-kit/sortable"
220
- const A = require("@dnd-kit/sortable");
220
+ const B = require("@dnd-kit/sortable");
221
221
  // CONCATENATED MODULE: external "@dnd-kit/utilities"
222
- const B = require("@dnd-kit/utilities");
222
+ const F = require("@dnd-kit/utilities");
223
223
  // CONCATENATED MODULE: external "@splunk/react-icons/ParallelDots"
224
- const F = require("@splunk/react-icons/ParallelDots");
225
- var H = e.n(F);
224
+ const H = require("@splunk/react-icons/ParallelDots");
225
+ var X = e.n(H);
226
226
  // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
227
227
  /**
228
228
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -230,7 +230,7 @@
230
230
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
231
231
  * @param current - The new value of the ref.
232
232
  */
233
- function X(e, n) {
233
+ function L(e, n) {
234
234
  if (e) {
235
235
  if (typeof e === "function") {
236
236
  e(n);
@@ -243,8 +243,8 @@
243
243
  }
244
244
  }
245
245
  // CONCATENATED MODULE: ./src/FormRows/SortableRow.tsx
246
- function L() {
247
- return L = Object.assign ? Object.assign.bind() : function(e) {
246
+ function K() {
247
+ return K = Object.assign ? Object.assign.bind() : function(e) {
248
248
  for (var n = 1; n < arguments.length; n++) {
249
249
  var r = arguments[n];
250
250
  for (var t in r) {
@@ -252,11 +252,11 @@
252
252
  }
253
253
  }
254
254
  return e;
255
- }, L.apply(null, arguments);
255
+ }, K.apply(null, arguments);
256
256
  }
257
- function K(e, n) {
257
+ function $(e, n) {
258
258
  if (null == e) return {};
259
- var r, t, o = $(e, n);
259
+ var r, t, o = z(e, n);
260
260
  if (Object.getOwnPropertySymbols) {
261
261
  var a = Object.getOwnPropertySymbols(e);
262
262
  for (t = 0; t < a.length; t++) {
@@ -265,7 +265,7 @@
265
265
  }
266
266
  return o;
267
267
  }
268
- function $(e, n) {
268
+ function z(e, n) {
269
269
  if (null == e) return {};
270
270
  var r = {};
271
271
  for (var t in e) {
@@ -276,60 +276,61 @@
276
276
  }
277
277
  return r;
278
278
  }
279
- /** @public */ var z = {
279
+ /** @public */ var U = {
280
280
  children: a().node,
281
281
  index: a().number,
282
282
  onRequestRemove: a().func,
283
283
  value: a().node
284
284
  };
285
- var W = t().forwardRef((function(e, n) {
286
- var o = e.children, a = e.index, i = K(e, [ "children", "index" ]);
285
+ var W = (0, s._)("Drag handle");
286
+ var V = t().forwardRef((function(e, n) {
287
+ var o = e.children, a = e.index, i = $(e, [ "children", "index" ]);
287
288
  // @docs-props-type RowPropsBase
288
- var l = (0, A.useSortable)({
289
+ var l = (0, B.useSortable)({
289
290
  // @dnd-kit requires "id" to be greater than 0 https://github.com/clauderic/dnd-kit/issues/1150
290
291
  // FormRows drag functionality doesn't work without an index, but index is not a required prop. FormRows will throw an error
291
292
  // when rows are sortable and/or removable and index is not provided.
292
293
  id: (a !== null && a !== void 0 ? a : 0) + 1
293
- }), s = l.attributes, d = l.listeners, f = l.setActivatorNodeRef, v = l.setNodeRef, p = l.transform, m = l.transition;
294
- var b = {
295
- transform: B.CSS.Transform.toString(p),
294
+ }), s = l.attributes, u = l.listeners, c = l.setActivatorNodeRef, f = l.setNodeRef, v = l.transform, m = l.transition;
295
+ var p = {
296
+ transform: F.CSS.Transform.toString(v),
296
297
  transition: m
297
298
  };
298
- var g = function e(r) {
299
- v(r);
300
- X(n, r);
299
+ var b = function e(r) {
300
+ f(r);
301
+ L(n, r);
301
302
  };
302
- var y = (0, r.useContext)(c), h = y.onKeyDown;
303
- var w = (0, r.useCallback)((function(e) {
303
+ var g = (0, r.useContext)(d), y = g.onKeyDown;
304
+ var h = (0, r.useCallback)((function(e) {
304
305
  // FormRows drag functionality doesn't work without an index, but index is not a required prop. FormRows will throw an error
305
306
  // when rows are sortable and/or removable and index is not provided.
306
- h === null || h === void 0 ? void 0 : h(e, {
307
+ y === null || y === void 0 ? void 0 : y(e, {
307
308
  index: a !== null && a !== void 0 ? a : 0
308
309
  });
309
- }), [ h, a ]);
310
- var R = (0, r.useCallback)((function() {
310
+ }), [ y, a ]);
311
+ var w = (0, r.useCallback)((function() {
311
312
 
312
- return t().createElement(E, L({
313
- appearance: "secondary",
314
- "aria-label": (0, u._)("Drag handle"),
313
+ return t().createElement(R, K({
314
+ appearance: "subtle",
315
+ "aria-label": W,
315
316
  "data-test": "drag-handle",
316
- onKeyDown: w,
317
- ref: f
318
- }, d), t().createElement(H(), null));
319
- }), [ w, d, f ]);
317
+ onKeyDown: h,
318
+ ref: c
319
+ }, u), t().createElement(X(), null));
320
+ }), [ h, u, c ]);
320
321
 
321
- return t().createElement(N, L({
322
+ return t().createElement(N, K({
322
323
  index: a,
323
- ref: g,
324
- renderDragHandle: R,
325
- style: b
324
+ ref: b,
325
+ renderDragHandle: w,
326
+ style: p
326
327
  }, i, s), o);
327
328
  }));
328
- W.propTypes = z;
329
- /* harmony default export */ const U = W;
329
+ V.propTypes = U;
330
+ /* harmony default export */ const G = V;
330
331
  // CONCATENATED MODULE: ./src/FormRows/Row.tsx
331
- function V() {
332
- return V = Object.assign ? Object.assign.bind() : function(e) {
332
+ function J() {
333
+ return J = Object.assign ? Object.assign.bind() : function(e) {
333
334
  for (var n = 1; n < arguments.length; n++) {
334
335
  var r = arguments[n];
335
336
  for (var t in r) {
@@ -337,11 +338,11 @@
337
338
  }
338
339
  }
339
340
  return e;
340
- }, V.apply(null, arguments);
341
+ }, J.apply(null, arguments);
341
342
  }
342
- function G(e, n) {
343
+ function Q(e, n) {
343
344
  if (null == e) return {};
344
- var r, t, o = J(e, n);
345
+ var r, t, o = Y(e, n);
345
346
  if (Object.getOwnPropertySymbols) {
346
347
  var a = Object.getOwnPropertySymbols(e);
347
348
  for (t = 0; t < a.length; t++) {
@@ -350,7 +351,7 @@
350
351
  }
351
352
  return o;
352
353
  }
353
- function J(e, n) {
354
+ function Y(e, n) {
354
355
  if (null == e) return {};
355
356
  var r = {};
356
357
  for (var t in e) {
@@ -361,62 +362,62 @@
361
362
  }
362
363
  return r;
363
364
  }
364
- /** @public */ var Q = {
365
+ /** @public */ var Z = {
365
366
  children: a().node,
366
367
  elementRef: a().oneOfType([ a().func, a().object ]),
367
368
  index: a().number,
368
369
  onRequestRemove: a().func,
369
370
  value: a().node
370
371
  };
371
- function Y(e) {
372
- var n = e.children, o = e.elementRef, a = G(e, [ "children", "elementRef" ]);
372
+ function ee(e) {
373
+ var n = e.children, o = e.elementRef, a = Q(e, [ "children", "elementRef" ]);
373
374
  // @docs-props-type RowPropsBase
374
- var i = (0, r.useContext)(c), l = i.sortable;
375
- var u = (0, r.useMemo)((function() {
376
- return l ? U : N;
375
+ var i = (0, r.useContext)(d), l = i.sortable;
376
+ var s = (0, r.useMemo)((function() {
377
+ return l ? G : N;
377
378
  }), [ l ]);
378
379
 
379
- return t().createElement(u, V({
380
+ return t().createElement(s, J({
380
381
  ref: o
381
382
  }, a), n);
382
383
  }
383
- Y.propTypes = Q;
384
- /* harmony default export */ const Z = Y;
384
+ ee.propTypes = Z;
385
+ /* harmony default export */ const ne = ee;
385
386
  // CONCATENATED MODULE: external "@dnd-kit/core"
386
- const ee = require("@dnd-kit/core");
387
+ const re = require("@dnd-kit/core");
387
388
  // CONCATENATED MODULE: external "@splunk/ui-utils/format"
388
- const ne = require("@splunk/ui-utils/format");
389
+ const te = require("@splunk/ui-utils/format");
389
390
  // CONCATENATED MODULE: ./src/FormRows/SortableList.tsx
390
- var re = function e(n, r) {
391
+ var oe = function e(n, r) {
391
392
  return n.indexOf(r) + 1;
392
393
  };
393
- var te = {
394
- draggable: (0, u._)("To pick up a sortable row, press space or enter.\n Use the up and down arrow keys to update the position of the row.")
394
+ var ae = {
395
+ draggable: (0, s._)("To pick up a sortable row, press space or enter.\n Use the up and down arrow keys to update the position of the row.")
395
396
  };
396
- var oe = function e(n) {
397
+ var ie = function e(n) {
397
398
  var o = n.children, a = n.onSortEnd;
398
- var i = (0, ee.useSensors)((0, ee.useSensor)(ee.PointerSensor), (0, ee.useSensor)(ee.MouseSensor));
399
+ var i = (0, re.useSensors)((0, re.useSensor)(re.PointerSensor), (0, re.useSensor)(re.MouseSensor));
399
400
  var l = (0, r.useRef)(true);
400
- var u = r.Children.toArray(o).filter(r.isValidElement);
401
- var s = u.map((function(e) {
401
+ var s = r.Children.toArray(o).filter(r.isValidElement);
402
+ var u = s.map((function(e) {
402
403
  return (e.props.index || 0) + 1;
403
404
  }));
404
405
  var d = (0, r.useCallback)((function(e) {
405
406
  var n = e.active, r = e.over;
406
407
  if (r && n.id !== r.id) {
407
- var t = s.indexOf(n.id);
408
- var o = s.indexOf(r.id);
408
+ var t = u.indexOf(n.id);
409
+ var o = u.indexOf(r.id);
409
410
  a({
410
411
  oldIndex: t,
411
412
  newIndex: o
412
413
  });
413
414
  }
414
- }), [ s, a ]);
415
+ }), [ u, a ]);
415
416
  var c = (0, r.useMemo)((function() {
416
417
  return {
417
418
  onDragStart: function e(n) {
418
419
  var r = n.active.id;
419
- return (0, ne.sprintf)("Picked up sortable row in position %d of %d.", re(s, r), s.length);
420
+ return (0, te.sprintf)("Picked up sortable row in position %d of %d.", oe(u, r), u.length);
420
421
  },
421
422
  onDragOver: function e(n) {
422
423
  var r = n.active, t = n.over;
@@ -427,39 +428,39 @@
427
428
  l.current = false;
428
429
  return undefined;
429
430
  }
430
- return t ? (0, ne.sprintf)("Row moved from position %d to position %d of %d.", re(s, r.id), re(s, t.id), s.length) : undefined;
431
+ return t ? (0, te.sprintf)("Row moved from position %d to position %d of %d.", oe(u, r.id), oe(u, t.id), u.length) : undefined;
431
432
  },
432
433
  onDragEnd: function e(n) {
433
434
  var r = n.over;
434
- return r ? (0, ne.sprintf)("Row dropped at position %d of %d.", re(s, r.id), s.length) : undefined;
435
+ return r ? (0, te.sprintf)("Row dropped at position %d of %d.", oe(u, r.id), u.length) : undefined;
435
436
  },
436
437
  onDragCancel: function e(n) {
437
438
  var r = n.active.id;
438
- return (0, ne.sprintf)("Row returned to it's starting position of %d.", re(s, r));
439
+ return (0, te.sprintf)("Row returned to it's starting position of %d.", oe(u, r));
439
440
  }
440
441
  };
441
- }), [ s ]);
442
+ }), [ u ]);
442
443
  var f = (0, r.useMemo)((function() {
443
444
  return {
444
- screenReaderInstructions: te,
445
+ screenReaderInstructions: ae,
445
446
  announcements: c
446
447
  };
447
448
  }), [ c ]);
448
449
 
449
- return t().createElement(ee.DndContext, {
450
+ return t().createElement(re.DndContext, {
450
451
  accessibility: f,
451
452
  sensors: i,
452
- collisionDetection: ee.closestCenter,
453
+ collisionDetection: re.closestCenter,
453
454
  onDragEnd: d
454
- }, t().createElement(A.SortableContext, {
455
- items: s,
456
- strategy: A.verticalListSortingStrategy
457
- }, u));
455
+ }, t().createElement(B.SortableContext, {
456
+ items: u,
457
+ strategy: B.verticalListSortingStrategy
458
+ }, s));
458
459
  };
459
- /* harmony default export */ const ae = oe;
460
+ /* harmony default export */ const le = ie;
460
461
  // CONCATENATED MODULE: ./src/FormRows/FormRows.tsx
461
- function ie() {
462
- return ie = Object.assign ? Object.assign.bind() : function(e) {
462
+ function se() {
463
+ return se = Object.assign ? Object.assign.bind() : function(e) {
463
464
  for (var n = 1; n < arguments.length; n++) {
464
465
  var r = arguments[n];
465
466
  for (var t in r) {
@@ -467,11 +468,11 @@
467
468
  }
468
469
  }
469
470
  return e;
470
- }, ie.apply(null, arguments);
471
+ }, se.apply(null, arguments);
471
472
  }
472
- function le(e, n) {
473
+ function ue(e, n) {
473
474
  if (null == e) return {};
474
- var r, t, o = ue(e, n);
475
+ var r, t, o = de(e, n);
475
476
  if (Object.getOwnPropertySymbols) {
476
477
  var a = Object.getOwnPropertySymbols(e);
477
478
  for (t = 0; t < a.length; t++) {
@@ -480,7 +481,7 @@
480
481
  }
481
482
  return o;
482
483
  }
483
- function ue(e, n) {
484
+ function de(e, n) {
484
485
  if (null == e) return {};
485
486
  var r = {};
486
487
  for (var t in e) {
@@ -491,7 +492,7 @@
491
492
  }
492
493
  return r;
493
494
  }
494
- /** @public */ var se = {
495
+ /** @public */ var ce = {
495
496
  addLabel: a().string,
496
497
  children: a().node,
497
498
  disabled: a().bool,
@@ -524,7 +525,7 @@
524
525
  * @param element Row element to add.
525
526
  * @param items Array of current FormRows to add to.
526
527
  * @return New array of FormRows with new Row added.
527
- */ var de = function e(n, r) {
528
+ */ var fe = function e(n, r) {
528
529
  return r.concat(n);
529
530
  };
530
531
  /**
@@ -542,7 +543,7 @@
542
543
  * @param toIndex New index to move row to.
543
544
  * @param items Array of current FormRows.
544
545
  * @return New array of FormRows arranged in new order.
545
- */ var ce = function e(n, t, o) {
546
+ */ var ve = function e(n, t, o) {
546
547
  var a = o.filter((function(e, r) {
547
548
  return r !== n;
548
549
  }));
@@ -568,7 +569,7 @@
568
569
  * @param index Index of Row to delete.
569
570
  * @param items Array of current FormRows.
570
571
  * @return New array of FormRows with Row of given index deleted.
571
- */ var fe = function e(n, t) {
572
+ */ var me = function e(n, t) {
572
573
  return t.filter((function(e, r) {
573
574
  return r !== n;
574
575
  })).map((function(e, n) {
@@ -578,72 +579,73 @@
578
579
  });
579
580
  }));
580
581
  };
581
- var ve = t().createElement(l(), null);
582
- var pe = (0, u._)("Add row");
583
- function me(e) {
584
- var n = e.addLabel, o = n === void 0 ? pe : n, a = e.children, i = e.disabled, l = e.elementRef, u = e.header, d = e.menu, f = e.onRequestAdd, v = e.onRequestMove, p = le(e, [ "addLabel", "children", "disabled", "elementRef", "header", "menu", "onRequestAdd", "onRequestMove" ]);
582
+ var pe = t().createElement(l(), null);
583
+ var be = (0, s._)("Add row");
584
+ function ge(e) {
585
+ var n = e.addLabel, o = n === void 0 ? be : n, a = e.children, i = e.disabled, l = e.elementRef, s = e.header, u = e.menu, c = e.onRequestAdd, f = e.onRequestMove, v = ue(e, [ "addLabel", "children", "disabled", "elementRef", "header", "menu", "onRequestAdd", "onRequestMove" ]);
585
586
  // @docs-props-type FormRowsPropsBase
586
587
  var m = (0, r.useCallback)((function(e, n) {
587
588
  var r = n.index;
589
+ var o = e.key;
588
590
  if (e.currentTarget !== e.target) {
589
591
  return;
590
592
  }
591
- if ((0, s.keycode)(e.nativeEvent) === "up") {
593
+ if (o === "ArrowUp") {
592
594
  e.preventDefault();
593
595
  if (r > 0) {
594
- v === null || v === void 0 ? void 0 : v({
596
+ f === null || f === void 0 ? void 0 : f({
595
597
  fromIndex: r,
596
598
  toIndex: r - 1
597
599
  });
598
600
  }
599
- } else if ((0, s.keycode)(e.nativeEvent) === "down") {
601
+ } else if (o === "ArrowDown") {
600
602
  e.preventDefault();
601
603
  if (r < t().Children.toArray(a).length - 1) {
602
- v === null || v === void 0 ? void 0 : v({
604
+ f === null || f === void 0 ? void 0 : f({
603
605
  fromIndex: r,
604
606
  toIndex: r + 1
605
607
  });
606
608
  }
607
609
  }
608
- }), [ a, v ]);
609
- var b = (0, r.useCallback)((function(e) {
610
+ }), [ a, f ]);
611
+ var p = (0, r.useCallback)((function(e) {
610
612
  var n = e.oldIndex, r = e.newIndex;
611
- v === null || v === void 0 ? void 0 : v({
613
+ f === null || f === void 0 ? void 0 : f({
612
614
  fromIndex: n,
613
615
  toIndex: r
614
616
  });
615
- }), [ v ]);
616
- var g = v !== undefined && !i;
617
- var y = f !== undefined;
617
+ }), [ f ]);
618
+ var b = f !== undefined && !i;
619
+ var g = c !== undefined;
618
620
 
619
- return t().createElement(R, ie({
621
+ return t().createElement(O, se({
620
622
  ref: l,
621
623
  "data-test": "form-rows"
622
- }, p), t().createElement(c.Provider, {
624
+ }, v), t().createElement(d.Provider, {
623
625
  // eslint-disable-next-line react/jsx-no-constructed-context-values
624
626
  value: {
625
627
  disabledRemoveButton: i,
626
628
  onKeyDown: m,
627
- hasOnRequestAdd: y,
628
- sortable: g
629
+ hasOnRequestAdd: g,
630
+ sortable: b
629
631
  }
630
- }, u && t().createElement(S, null, u), t().createElement(ae, {
631
- onSortEnd: b
632
- }, a), d && t().createElement(x, null, d) || y && t().createElement(j, {
632
+ }, s && t().createElement(x, null, s), t().createElement(le, {
633
+ onSortEnd: p
634
+ }, a), u && t().createElement(E, null, u) || g && t().createElement(C, {
633
635
  disabled: i,
634
636
  appearance: "secondary",
635
637
  "data-test": "add-row",
636
- icon: ve,
638
+ icon: pe,
637
639
  label: o,
638
- onClick: f
640
+ onClick: c
639
641
  })));
640
642
  }
641
- me.propTypes = se;
642
- me.Row = Z;
643
- me.addRow = de;
644
- me.moveRow = ce;
645
- me.removeRow = fe;
646
- /* harmony default export */ const be = me;
643
+ ge.propTypes = ce;
644
+ ge.Row = ne;
645
+ ge.addRow = fe;
646
+ ge.moveRow = ve;
647
+ ge.removeRow = me;
648
+ /* harmony default export */ const ye = ge;
647
649
  // CONCATENATED MODULE: ./src/FormRows/index.ts
648
650
  module.exports = n;
649
651
  /******/})();