@splunk/react-ui 5.0.0-beta.4 → 5.0.0-beta.5
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/Button.js +3 -1
- package/CHANGELOG.md +4 -1
- package/CHANGELOG.v5.mdx +35 -0
- package/Card.js +163 -162
- package/Chip.js +171 -225
- package/Clickable.js +79 -76
- package/ComboBox.js +1 -1
- package/Date.js +160 -184
- package/DualListbox.js +439 -504
- package/File.js +449 -324
- package/FormRows.js +143 -142
- package/JSONTree.js +496 -521
- package/Layer.js +162 -97
- package/Link.js +20 -13
- package/MIGRATION.v5.mdx +47 -0
- package/Markdown.js +1 -1
- package/Message.js +119 -141
- package/MessageBar.js +109 -168
- package/Multiselect.js +595 -602
- package/Popover.js +194 -190
- package/Progress.js +68 -54
- package/RadioBar.js +4 -1
- package/RadioList.js +67 -65
- package/Resize.js +377 -265
- package/ResultsMenu.js +573 -661
- package/ScrollContainerContext.js +13 -9
- package/Search.js +1 -1
- package/Select.js +206 -199
- package/Slider.js +455 -329
- package/StepBar.js +2 -2
- package/Switch.js +88 -87
- package/TabBar.js +322 -317
- package/TabLayout.js +34 -34
- package/Table.js +548 -525
- package/Text.js +20 -19
- package/TextArea.js +278 -152
- package/Tooltip.js +173 -177
- package/Tree.js +2 -2
- package/Typography.js +30 -28
- package/WaitSpinner.js +6 -11
- package/cypress/support/commands.ts +14 -4
- package/cypress/support/index.d.ts +1 -1
- package/package.json +5 -5
- package/stubs-splunkui.d.ts +0 -4
- package/types/src/Card/Card.d.ts +3 -1
- package/types/src/Card/Header.d.ts +2 -0
- package/types/src/Card/docs/examples/HeadingTitle.d.ts +3 -0
- package/types/src/Clickable/Clickable.d.ts +11 -3
- package/types/src/Link/Link.d.ts +4 -0
- package/types/src/Message/Message.d.ts +1 -1
- package/types/src/MessageBar/MessageBar.d.ts +1 -1
- package/types/src/Multiselect/Multiselect.d.ts +1 -8
- package/types/src/Multiselect/Normal.d.ts +1 -7
- package/types/src/Multiselect/docs/examples/Children.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Controlled.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Disabled.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Error.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/Fetching.d.ts +2 -22
- package/types/src/Multiselect/docs/examples/Headings.d.ts +2 -1
- package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts +2 -25
- package/types/src/Multiselect/docs/examples/NewValues.d.ts +2 -9
- package/types/src/Multiselect/docs/examples/TabInput.d.ts +2 -9
- package/types/src/ResultsMenu/ResultsMenu.d.ts +23 -34
- package/types/src/Select/SelectBase.d.ts +2 -2
- package/types/src/TabBar/TabBar.d.ts +8 -5
- package/types/src/TabBar/TabBarContext.d.ts +1 -1
- package/types/src/TabLayout/TabLayout.d.ts +8 -5
- package/types/src/Typography/Typography.d.ts +27 -22
- package/types/src/Date/Icon.d.ts +0 -3
- package/types/src/TabBar/docs/examples/IconsAbove.d.ts +0 -3
- package/types/src/TabBar/docs/examples/VerticalIconsAbove.d.ts +0 -3
- /package/types/src/TabBar/docs/examples/{IconsLeft.d.ts → Icons.d.ts} +0 -0
- /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 */
|
|
65
|
-
default: () => /* reexport */
|
|
64
|
+
Row: () => /* reexport */ ee,
|
|
65
|
+
default: () => /* reexport */ ge
|
|
66
66
|
});
|
|
67
67
|
// CONCATENATED MODULE: external "react"
|
|
68
68
|
const r = require("react");
|
|
@@ -74,9 +74,9 @@
|
|
|
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
|
|
77
|
+
const s = require("@splunk/ui-utils/i18n");
|
|
78
78
|
// CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
|
|
79
|
-
const
|
|
79
|
+
const u = require("@splunk/ui-utils/keyboard");
|
|
80
80
|
// CONCATENATED MODULE: ./src/FormRows/FormRowsContext.tsx
|
|
81
81
|
var d = (0, r.createContext)({
|
|
82
82
|
disabledRemoveButton: false,
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
const f = require("@splunk/react-icons/TrashCanCross");
|
|
89
89
|
var v = e.n(f);
|
|
90
90
|
// CONCATENATED MODULE: external "styled-components"
|
|
91
|
-
const
|
|
92
|
-
var
|
|
91
|
+
const m = require("styled-components");
|
|
92
|
+
var p = e.n(m);
|
|
93
93
|
// CONCATENATED MODULE: external "@splunk/react-ui/Button"
|
|
94
94
|
const b = require("@splunk/react-ui/Button");
|
|
95
95
|
var g = e.n(b);
|
|
@@ -99,53 +99,54 @@
|
|
|
99
99
|
// CONCATENATED MODULE: external "@splunk/themes"
|
|
100
100
|
const w = require("@splunk/themes");
|
|
101
101
|
// CONCATENATED MODULE: ./src/FormRows/FormRowsStyles.ts
|
|
102
|
-
var R = m(
|
|
103
|
-
|
|
102
|
+
var R = (0, m.css)([ "border:none;width:", ";height:", ";" ], w.variables.inputHeight, w.variables.inputHeight);
|
|
103
|
+
var S = p()(h()).withConfig({
|
|
104
|
+
displayName: "FormRowsStyles__StyledDragButton",
|
|
104
105
|
componentId: "sc-1j4j7h3-0"
|
|
105
|
-
})([ "", ";
|
|
106
|
-
var
|
|
107
|
-
displayName: "
|
|
106
|
+
})([ "", ";grid-column:drag-handle;cursor:move;user-select:none;-webkit-user-drag:element;" ], R);
|
|
107
|
+
var O = p()(h()).withConfig({
|
|
108
|
+
displayName: "FormRowsStyles__StyledRemoveButton",
|
|
108
109
|
componentId: "sc-1j4j7h3-1"
|
|
110
|
+
})([ "", ";grid-column:remove-button;" ], R);
|
|
111
|
+
var x = p().div.withConfig({
|
|
112
|
+
displayName: "FormRowsStyles__StyledDiv",
|
|
113
|
+
componentId: "sc-1j4j7h3-2"
|
|
114
|
+
})([ "", ";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:", ";" ], w.mixins.reset("grid"), S, O, S, O, w.variables.spacingSmall, w.variables.spacingXSmall);
|
|
115
|
+
var j = p().div.withConfig({
|
|
116
|
+
displayName: "FormRowsStyles__StyledHeader",
|
|
117
|
+
componentId: "sc-1j4j7h3-3"
|
|
109
118
|
})([ "", ";grid-column:content;" ], w.mixins.typography("largeBody", {
|
|
110
119
|
color: "active"
|
|
111
120
|
}));
|
|
112
|
-
var
|
|
113
|
-
var
|
|
121
|
+
var E = (0, m.css)([ "grid-column:content;width:min-content;margin-block-start:", ";" ], w.variables.spacingXSmall);
|
|
122
|
+
var C = p()(g()).withConfig({
|
|
114
123
|
displayName: "FormRowsStyles__StyledAddRowButton",
|
|
115
|
-
componentId: "sc-1j4j7h3-2"
|
|
116
|
-
})([ "", ";" ], O);
|
|
117
|
-
var x = m().div.withConfig({
|
|
118
|
-
displayName: "FormRowsStyles__StyledMenuWrapper",
|
|
119
|
-
componentId: "sc-1j4j7h3-3"
|
|
120
|
-
})([ "", ";" ], O);
|
|
121
|
-
var E = m()(h()).withConfig({
|
|
122
|
-
displayName: "FormRowsStyles__StyledDragButton",
|
|
123
124
|
componentId: "sc-1j4j7h3-4"
|
|
124
|
-
})([ "
|
|
125
|
-
var
|
|
126
|
-
displayName: "
|
|
125
|
+
})([ "", ";" ], E);
|
|
126
|
+
var k = p().div.withConfig({
|
|
127
|
+
displayName: "FormRowsStyles__StyledMenuWrapper",
|
|
127
128
|
componentId: "sc-1j4j7h3-5"
|
|
128
|
-
})([ "
|
|
129
|
-
var
|
|
129
|
+
})([ "", ";" ], E);
|
|
130
|
+
var q = p().div.withConfig({
|
|
130
131
|
displayName: "FormRowsStyles__StyledInputWrapper",
|
|
131
132
|
componentId: "sc-1j4j7h3-6"
|
|
132
133
|
})([ "display:flex;gap:", ";" ], w.variables.spacingXSmall);
|
|
133
|
-
var
|
|
134
|
+
var P = function e(n) {
|
|
134
135
|
return n ? "drag-handle" : "content";
|
|
135
136
|
};
|
|
136
|
-
/* Row includes drag handle, input, and remove button */ var
|
|
137
|
+
/* Row includes drag handle, input, and remove button */ var I = p().div.withConfig({
|
|
137
138
|
displayName: "FormRowsStyles__StyledRow",
|
|
138
139
|
componentId: "sc-1j4j7h3-7"
|
|
139
|
-
})([ "", ";grid-template-columns:subgrid;grid-column:", " / -1;padding:", " 0;border-radius:", ";&.sorting{z-index:calc(", " + 1);}&:focus{outline:0;}
|
|
140
|
+
})([ "", ";grid-template-columns:subgrid;grid-column:", " / -1;padding:", " 0;border-radius:", ";&.sorting{z-index:calc(", " + 1);}&:focus{outline:0;}", "" ], w.mixins.reset("grid"), (function(e) {
|
|
140
141
|
var n = e.$sortable;
|
|
141
|
-
return
|
|
142
|
-
}), w.variables.spacingXSmall, w.variables.borderRadius, w.variables.zindexPopover,
|
|
142
|
+
return P(n);
|
|
143
|
+
}), w.variables.spacingXSmall, w.variables.borderRadius, w.variables.zindexPopover, (function(e) {
|
|
143
144
|
var n = e.$sortable;
|
|
144
|
-
return
|
|
145
|
-
})
|
|
145
|
+
return n && (0, m.css)([ "&:has(", ":active,", ":focus){background:", ";}&:not(:has(", ")){padding-inline-end:", ";}" ], S, S, w.variables.interactiveColorOverlayDrag, O, w.variables.spacingXSmall);
|
|
146
|
+
}));
|
|
146
147
|
// CONCATENATED MODULE: ./src/FormRows/RowInternal.tsx
|
|
147
|
-
function
|
|
148
|
-
return
|
|
148
|
+
function _() {
|
|
149
|
+
return _ = Object.assign ? Object.assign.bind() : function(e) {
|
|
149
150
|
for (var n = 1; n < arguments.length; n++) {
|
|
150
151
|
var r = arguments[n];
|
|
151
152
|
for (var t in r) {
|
|
@@ -153,11 +154,11 @@
|
|
|
153
154
|
}
|
|
154
155
|
}
|
|
155
156
|
return e;
|
|
156
|
-
},
|
|
157
|
+
}, _.apply(null, arguments);
|
|
157
158
|
}
|
|
158
|
-
function
|
|
159
|
+
function D(e, n) {
|
|
159
160
|
if (null == e) return {};
|
|
160
|
-
var r, t, o =
|
|
161
|
+
var r, t, o = T(e, n);
|
|
161
162
|
if (Object.getOwnPropertySymbols) {
|
|
162
163
|
var a = Object.getOwnPropertySymbols(e);
|
|
163
164
|
for (t = 0; t < a.length; t++) {
|
|
@@ -166,7 +167,7 @@
|
|
|
166
167
|
}
|
|
167
168
|
return o;
|
|
168
169
|
}
|
|
169
|
-
function
|
|
170
|
+
function T(e, n) {
|
|
170
171
|
if (null == e) return {};
|
|
171
172
|
var r = {};
|
|
172
173
|
for (var t in e) {
|
|
@@ -177,7 +178,7 @@
|
|
|
177
178
|
}
|
|
178
179
|
return r;
|
|
179
180
|
}
|
|
180
|
-
/** @public */ var
|
|
181
|
+
/** @public */ var M = {
|
|
181
182
|
children: a().node,
|
|
182
183
|
index: a().number,
|
|
183
184
|
onRequestRemove: a().func,
|
|
@@ -185,9 +186,9 @@
|
|
|
185
186
|
style: a().object,
|
|
186
187
|
value: a().node
|
|
187
188
|
};
|
|
188
|
-
var
|
|
189
|
-
var o = e.children, a = e.index, i = e.onRequestRemove, l = e.renderDragHandle,
|
|
190
|
-
var d = (0, r.useContext)(c), f = d.disabledRemoveButton,
|
|
189
|
+
var N = t().forwardRef((function(e, n) {
|
|
190
|
+
var o = e.children, a = e.index, i = e.onRequestRemove, l = e.renderDragHandle, u = D(e, [ "children", "index", "onRequestRemove", "renderDragHandle" ]);
|
|
191
|
+
var d = (0, r.useContext)(c), f = d.disabledRemoveButton, m = d.hasOnRequestAdd, p = d.sortable;
|
|
191
192
|
var b = (0, r.useCallback)((function(e) {
|
|
192
193
|
// FormRows remove functionality doesn't work without an index, but index is not a required prop. FormRows will throw an error
|
|
193
194
|
// when rows are sortable and/or removable and index is not provided.
|
|
@@ -200,29 +201,29 @@
|
|
|
200
201
|
if (false) {}
|
|
201
202
|
if (false) {}
|
|
202
203
|
if (false) {}
|
|
203
|
-
}), [
|
|
204
|
+
}), [ m, g, p, a ]);
|
|
204
205
|
|
|
205
|
-
return t().createElement(
|
|
206
|
-
$sortable:
|
|
206
|
+
return t().createElement(I, _({
|
|
207
|
+
$sortable: p,
|
|
207
208
|
"data-test": "row",
|
|
208
209
|
ref: n
|
|
209
|
-
},
|
|
210
|
+
}, u), l && l(), t().createElement(q, null, o), g && t().createElement(O, {
|
|
210
211
|
appearance: "secondary",
|
|
211
|
-
"aria-label": (0,
|
|
212
|
+
"aria-label": (0, s._)("Remove Row"),
|
|
212
213
|
"data-test": "remove",
|
|
213
214
|
disabled: f,
|
|
214
215
|
onClick: b
|
|
215
216
|
}, t().createElement(v(), null)));
|
|
216
217
|
}));
|
|
217
|
-
|
|
218
|
-
/* harmony default export */ const
|
|
218
|
+
N.propTypes = M;
|
|
219
|
+
/* harmony default export */ const A = N;
|
|
219
220
|
// CONCATENATED MODULE: external "@dnd-kit/sortable"
|
|
220
|
-
const
|
|
221
|
+
const B = require("@dnd-kit/sortable");
|
|
221
222
|
// CONCATENATED MODULE: external "@dnd-kit/utilities"
|
|
222
|
-
const
|
|
223
|
+
const F = require("@dnd-kit/utilities");
|
|
223
224
|
// CONCATENATED MODULE: external "@splunk/react-icons/ParallelDots"
|
|
224
|
-
const
|
|
225
|
-
var
|
|
225
|
+
const H = require("@splunk/react-icons/ParallelDots");
|
|
226
|
+
var X = e.n(H);
|
|
226
227
|
// CONCATENATED MODULE: ./src/utils/updateReactRef.ts
|
|
227
228
|
/**
|
|
228
229
|
* Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
|
|
@@ -230,7 +231,7 @@
|
|
|
230
231
|
* @param ref - The React callback or object ref. Can be `null` or `undefined`.
|
|
231
232
|
* @param current - The new value of the ref.
|
|
232
233
|
*/
|
|
233
|
-
function
|
|
234
|
+
function L(e, n) {
|
|
234
235
|
if (e) {
|
|
235
236
|
if (typeof e === "function") {
|
|
236
237
|
e(n);
|
|
@@ -243,8 +244,8 @@
|
|
|
243
244
|
}
|
|
244
245
|
}
|
|
245
246
|
// CONCATENATED MODULE: ./src/FormRows/SortableRow.tsx
|
|
246
|
-
function
|
|
247
|
-
return
|
|
247
|
+
function K() {
|
|
248
|
+
return K = Object.assign ? Object.assign.bind() : function(e) {
|
|
248
249
|
for (var n = 1; n < arguments.length; n++) {
|
|
249
250
|
var r = arguments[n];
|
|
250
251
|
for (var t in r) {
|
|
@@ -252,11 +253,11 @@
|
|
|
252
253
|
}
|
|
253
254
|
}
|
|
254
255
|
return e;
|
|
255
|
-
},
|
|
256
|
+
}, K.apply(null, arguments);
|
|
256
257
|
}
|
|
257
|
-
function
|
|
258
|
+
function $(e, n) {
|
|
258
259
|
if (null == e) return {};
|
|
259
|
-
var r, t, o =
|
|
260
|
+
var r, t, o = z(e, n);
|
|
260
261
|
if (Object.getOwnPropertySymbols) {
|
|
261
262
|
var a = Object.getOwnPropertySymbols(e);
|
|
262
263
|
for (t = 0; t < a.length; t++) {
|
|
@@ -265,7 +266,7 @@
|
|
|
265
266
|
}
|
|
266
267
|
return o;
|
|
267
268
|
}
|
|
268
|
-
function
|
|
269
|
+
function z(e, n) {
|
|
269
270
|
if (null == e) return {};
|
|
270
271
|
var r = {};
|
|
271
272
|
for (var t in e) {
|
|
@@ -276,28 +277,28 @@
|
|
|
276
277
|
}
|
|
277
278
|
return r;
|
|
278
279
|
}
|
|
279
|
-
/** @public */ var
|
|
280
|
+
/** @public */ var W = {
|
|
280
281
|
children: a().node,
|
|
281
282
|
index: a().number,
|
|
282
283
|
onRequestRemove: a().func,
|
|
283
284
|
value: a().node
|
|
284
285
|
};
|
|
285
|
-
var
|
|
286
|
-
var o = e.children, a = e.index, i =
|
|
286
|
+
var U = 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,
|
|
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
|
-
}),
|
|
294
|
+
}), u = l.attributes, d = l.listeners, f = l.setActivatorNodeRef, v = l.setNodeRef, m = l.transform, p = l.transition;
|
|
294
295
|
var b = {
|
|
295
|
-
transform:
|
|
296
|
-
transition:
|
|
296
|
+
transform: F.CSS.Transform.toString(m),
|
|
297
|
+
transition: p
|
|
297
298
|
};
|
|
298
299
|
var g = function e(r) {
|
|
299
300
|
v(r);
|
|
300
|
-
|
|
301
|
+
L(n, r);
|
|
301
302
|
};
|
|
302
303
|
var y = (0, r.useContext)(c), h = y.onKeyDown;
|
|
303
304
|
var w = (0, r.useCallback)((function(e) {
|
|
@@ -309,27 +310,27 @@
|
|
|
309
310
|
}), [ h, a ]);
|
|
310
311
|
var R = (0, r.useCallback)((function() {
|
|
311
312
|
|
|
312
|
-
return t().createElement(
|
|
313
|
+
return t().createElement(S, K({
|
|
313
314
|
appearance: "secondary",
|
|
314
|
-
"aria-label": (0,
|
|
315
|
+
"aria-label": (0, s._)("Drag handle"),
|
|
315
316
|
"data-test": "drag-handle",
|
|
316
317
|
onKeyDown: w,
|
|
317
318
|
ref: f
|
|
318
|
-
}, d), t().createElement(
|
|
319
|
+
}, d), t().createElement(X(), null));
|
|
319
320
|
}), [ w, d, f ]);
|
|
320
321
|
|
|
321
|
-
return t().createElement(
|
|
322
|
+
return t().createElement(A, K({
|
|
322
323
|
index: a,
|
|
323
324
|
ref: g,
|
|
324
325
|
renderDragHandle: R,
|
|
325
326
|
style: b
|
|
326
|
-
}, i,
|
|
327
|
+
}, i, u), o);
|
|
327
328
|
}));
|
|
328
|
-
|
|
329
|
-
/* harmony default export */ const
|
|
329
|
+
U.propTypes = W;
|
|
330
|
+
/* harmony default export */ const V = U;
|
|
330
331
|
// CONCATENATED MODULE: ./src/FormRows/Row.tsx
|
|
331
|
-
function
|
|
332
|
-
return
|
|
332
|
+
function G() {
|
|
333
|
+
return G = 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
|
-
},
|
|
341
|
+
}, G.apply(null, arguments);
|
|
341
342
|
}
|
|
342
|
-
function
|
|
343
|
+
function J(e, n) {
|
|
343
344
|
if (null == e) return {};
|
|
344
|
-
var r, t, o =
|
|
345
|
+
var r, t, o = Q(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
|
|
354
|
+
function Q(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
|
|
365
|
+
/** @public */ var Y = {
|
|
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
|
|
372
|
-
var n = e.children, o = e.elementRef, a =
|
|
372
|
+
function Z(e) {
|
|
373
|
+
var n = e.children, o = e.elementRef, a = J(e, [ "children", "elementRef" ]);
|
|
373
374
|
// @docs-props-type RowPropsBase
|
|
374
375
|
var i = (0, r.useContext)(c), l = i.sortable;
|
|
375
|
-
var
|
|
376
|
-
return l ?
|
|
376
|
+
var s = (0, r.useMemo)((function() {
|
|
377
|
+
return l ? V : A;
|
|
377
378
|
}), [ l ]);
|
|
378
379
|
|
|
379
|
-
return t().createElement(
|
|
380
|
+
return t().createElement(s, G({
|
|
380
381
|
ref: o
|
|
381
382
|
}, a), n);
|
|
382
383
|
}
|
|
383
|
-
|
|
384
|
-
/* harmony default export */ const
|
|
384
|
+
Z.propTypes = Y;
|
|
385
|
+
/* harmony default export */ const ee = Z;
|
|
385
386
|
// CONCATENATED MODULE: external "@dnd-kit/core"
|
|
386
|
-
const
|
|
387
|
+
const ne = require("@dnd-kit/core");
|
|
387
388
|
// CONCATENATED MODULE: external "@splunk/ui-utils/format"
|
|
388
|
-
const
|
|
389
|
+
const re = require("@splunk/ui-utils/format");
|
|
389
390
|
// CONCATENATED MODULE: ./src/FormRows/SortableList.tsx
|
|
390
|
-
var
|
|
391
|
+
var te = function e(n, r) {
|
|
391
392
|
return n.indexOf(r) + 1;
|
|
392
393
|
};
|
|
393
|
-
var
|
|
394
|
-
draggable: (0,
|
|
394
|
+
var oe = {
|
|
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
|
|
397
|
+
var ae = function e(n) {
|
|
397
398
|
var o = n.children, a = n.onSortEnd;
|
|
398
|
-
var i = (0,
|
|
399
|
+
var i = (0, ne.useSensors)((0, ne.useSensor)(ne.PointerSensor), (0, ne.useSensor)(ne.MouseSensor));
|
|
399
400
|
var l = (0, r.useRef)(true);
|
|
400
|
-
var
|
|
401
|
-
var
|
|
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 =
|
|
408
|
-
var o =
|
|
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
|
-
}), [
|
|
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,
|
|
420
|
+
return (0, re.sprintf)("Picked up sortable row in position %d of %d.", te(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,
|
|
431
|
+
return t ? (0, re.sprintf)("Row moved from position %d to position %d of %d.", te(u, r.id), te(u, t.id), u.length) : undefined;
|
|
431
432
|
},
|
|
432
433
|
onDragEnd: function e(n) {
|
|
433
434
|
var r = n.over;
|
|
434
|
-
return r ? (0,
|
|
435
|
+
return r ? (0, re.sprintf)("Row dropped at position %d of %d.", te(u, r.id), u.length) : undefined;
|
|
435
436
|
},
|
|
436
437
|
onDragCancel: function e(n) {
|
|
437
438
|
var r = n.active.id;
|
|
438
|
-
return (0,
|
|
439
|
+
return (0, re.sprintf)("Row returned to it's starting position of %d.", te(u, r));
|
|
439
440
|
}
|
|
440
441
|
};
|
|
441
|
-
}), [
|
|
442
|
+
}), [ u ]);
|
|
442
443
|
var f = (0, r.useMemo)((function() {
|
|
443
444
|
return {
|
|
444
|
-
screenReaderInstructions:
|
|
445
|
+
screenReaderInstructions: oe,
|
|
445
446
|
announcements: c
|
|
446
447
|
};
|
|
447
448
|
}), [ c ]);
|
|
448
449
|
|
|
449
|
-
return t().createElement(
|
|
450
|
+
return t().createElement(ne.DndContext, {
|
|
450
451
|
accessibility: f,
|
|
451
452
|
sensors: i,
|
|
452
|
-
collisionDetection:
|
|
453
|
+
collisionDetection: ne.closestCenter,
|
|
453
454
|
onDragEnd: d
|
|
454
|
-
}, t().createElement(
|
|
455
|
-
items:
|
|
456
|
-
strategy:
|
|
457
|
-
},
|
|
455
|
+
}, t().createElement(B.SortableContext, {
|
|
456
|
+
items: u,
|
|
457
|
+
strategy: B.verticalListSortingStrategy
|
|
458
|
+
}, s));
|
|
458
459
|
};
|
|
459
|
-
/* harmony default export */ const
|
|
460
|
+
/* harmony default export */ const ie = ae;
|
|
460
461
|
// CONCATENATED MODULE: ./src/FormRows/FormRows.tsx
|
|
461
|
-
function
|
|
462
|
-
return
|
|
462
|
+
function le() {
|
|
463
|
+
return le = 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,9 +468,9 @@
|
|
|
467
468
|
}
|
|
468
469
|
}
|
|
469
470
|
return e;
|
|
470
|
-
},
|
|
471
|
+
}, le.apply(null, arguments);
|
|
471
472
|
}
|
|
472
|
-
function
|
|
473
|
+
function se(e, n) {
|
|
473
474
|
if (null == e) return {};
|
|
474
475
|
var r, t, o = ue(e, n);
|
|
475
476
|
if (Object.getOwnPropertySymbols) {
|
|
@@ -491,7 +492,7 @@
|
|
|
491
492
|
}
|
|
492
493
|
return r;
|
|
493
494
|
}
|
|
494
|
-
/** @public */ var
|
|
495
|
+
/** @public */ var de = {
|
|
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
|
|
528
|
+
*/ var ce = 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
|
|
546
|
+
*/ var fe = 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
|
|
572
|
+
*/ var ve = function e(n, t) {
|
|
572
573
|
return t.filter((function(e, r) {
|
|
573
574
|
return r !== n;
|
|
574
575
|
})).map((function(e, n) {
|
|
@@ -578,17 +579,17 @@
|
|
|
578
579
|
});
|
|
579
580
|
}));
|
|
580
581
|
};
|
|
581
|
-
var
|
|
582
|
-
var pe = (0,
|
|
583
|
-
function
|
|
584
|
-
var n = e.addLabel, o = n === void 0 ? pe : n, a = e.children, i = e.disabled, l = e.elementRef,
|
|
582
|
+
var me = t().createElement(l(), null);
|
|
583
|
+
var pe = (0, s._)("Add row");
|
|
584
|
+
function be(e) {
|
|
585
|
+
var n = e.addLabel, o = n === void 0 ? pe : n, a = e.children, i = e.disabled, l = e.elementRef, s = e.header, d = e.menu, f = e.onRequestAdd, v = e.onRequestMove, m = se(e, [ "addLabel", "children", "disabled", "elementRef", "header", "menu", "onRequestAdd", "onRequestMove" ]);
|
|
585
586
|
// @docs-props-type FormRowsPropsBase
|
|
586
|
-
var
|
|
587
|
+
var p = (0, r.useCallback)((function(e, n) {
|
|
587
588
|
var r = n.index;
|
|
588
589
|
if (e.currentTarget !== e.target) {
|
|
589
590
|
return;
|
|
590
591
|
}
|
|
591
|
-
if ((0,
|
|
592
|
+
if ((0, u.keycode)(e.nativeEvent) === "up") {
|
|
592
593
|
e.preventDefault();
|
|
593
594
|
if (r > 0) {
|
|
594
595
|
v === null || v === void 0 ? void 0 : v({
|
|
@@ -596,7 +597,7 @@
|
|
|
596
597
|
toIndex: r - 1
|
|
597
598
|
});
|
|
598
599
|
}
|
|
599
|
-
} else if ((0,
|
|
600
|
+
} else if ((0, u.keycode)(e.nativeEvent) === "down") {
|
|
600
601
|
e.preventDefault();
|
|
601
602
|
if (r < t().Children.toArray(a).length - 1) {
|
|
602
603
|
v === null || v === void 0 ? void 0 : v({
|
|
@@ -616,34 +617,34 @@
|
|
|
616
617
|
var g = v !== undefined && !i;
|
|
617
618
|
var y = f !== undefined;
|
|
618
619
|
|
|
619
|
-
return t().createElement(
|
|
620
|
+
return t().createElement(x, le({
|
|
620
621
|
ref: l,
|
|
621
622
|
"data-test": "form-rows"
|
|
622
|
-
},
|
|
623
|
+
}, m), t().createElement(c.Provider, {
|
|
623
624
|
// eslint-disable-next-line react/jsx-no-constructed-context-values
|
|
624
625
|
value: {
|
|
625
626
|
disabledRemoveButton: i,
|
|
626
|
-
onKeyDown:
|
|
627
|
+
onKeyDown: p,
|
|
627
628
|
hasOnRequestAdd: y,
|
|
628
629
|
sortable: g
|
|
629
630
|
}
|
|
630
|
-
},
|
|
631
|
+
}, s && t().createElement(j, null, s), t().createElement(ie, {
|
|
631
632
|
onSortEnd: b
|
|
632
|
-
}, a), d && t().createElement(
|
|
633
|
+
}, a), d && t().createElement(k, null, d) || y && t().createElement(C, {
|
|
633
634
|
disabled: i,
|
|
634
635
|
appearance: "secondary",
|
|
635
636
|
"data-test": "add-row",
|
|
636
|
-
icon:
|
|
637
|
+
icon: me,
|
|
637
638
|
label: o,
|
|
638
639
|
onClick: f
|
|
639
640
|
})));
|
|
640
641
|
}
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
/* harmony default export */ const
|
|
642
|
+
be.propTypes = de;
|
|
643
|
+
be.Row = ee;
|
|
644
|
+
be.addRow = ce;
|
|
645
|
+
be.moveRow = fe;
|
|
646
|
+
be.removeRow = ve;
|
|
647
|
+
/* harmony default export */ const ge = be;
|
|
647
648
|
// CONCATENATED MODULE: ./src/FormRows/index.ts
|
|
648
649
|
module.exports = n;
|
|
649
650
|
/******/})();
|