@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.
- package/Button.js +3 -1
- package/ButtonSimple.js +92 -168
- package/CHANGELOG.md +4 -1
- package/CHANGELOG.v5.mdx +59 -0
- package/Card.js +29 -28
- package/Chip.js +171 -225
- package/Clickable.js +79 -76
- package/CollapsiblePanel.js +172 -164
- package/Color.js +584 -506
- package/ComboBox.js +1 -1
- package/ControlGroup.js +132 -127
- package/Date.js +163 -198
- package/Dropdown.js +97 -99
- package/DualListbox.js +439 -504
- package/File.js +449 -324
- package/FormRows.js +177 -175
- package/JSONTree.js +586 -617
- package/Layer.js +162 -97
- package/Link.js +20 -13
- package/MIGRATION.v5.mdx +98 -0
- package/Markdown.js +1 -1
- package/Menu.js +194 -195
- package/Message.js +119 -141
- package/MessageBar.js +109 -168
- package/ModalLayer.js +171 -217
- package/Multiselect.js +595 -602
- package/Number.js +103 -102
- package/Popover.js +195 -190
- package/Progress.js +68 -54
- package/RadioBar.js +146 -145
- package/RadioList.js +67 -65
- package/Resize.js +377 -265
- package/ResultsMenu.js +573 -663
- package/ScrollContainerContext.js +13 -9
- package/Search.js +50 -50
- package/Select.js +206 -199
- package/Slider.js +454 -329
- package/StepBar.js +2 -2
- package/Switch.js +220 -146
- package/TabBar.js +411 -409
- package/TabLayout.js +34 -34
- package/Table.js +1163 -1156
- package/Text.js +58 -58
- package/TextArea.js +278 -152
- package/Tooltip.js +173 -177
- package/Tree.js +177 -188
- 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/Color/Color.d.ts +2 -2
- package/types/src/Layer/Layer.d.ts +2 -1
- package/types/src/Layer/index.d.ts +1 -0
- 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/ModalLayer/ModalLayer.d.ts +16 -21
- 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/Popover/Popover.d.ts +4 -2
- 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/useRovingFocus.js +20 -23
- 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 */ 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
|
|
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
|
|
79
|
+
var u = (0, r.createContext)({
|
|
82
80
|
disabledRemoveButton: false,
|
|
83
81
|
sortable: true
|
|
84
82
|
});
|
|
85
|
-
|
|
86
|
-
/* harmony default export */ const
|
|
83
|
+
u.displayName = "FormRows";
|
|
84
|
+
/* harmony default export */ const d = u;
|
|
87
85
|
// CONCATENATED MODULE: external "@splunk/react-icons/TrashCanCross"
|
|
88
|
-
const
|
|
89
|
-
var
|
|
86
|
+
const c = require("@splunk/react-icons/TrashCanCross");
|
|
87
|
+
var f = e.n(c);
|
|
90
88
|
// CONCATENATED MODULE: external "styled-components"
|
|
91
|
-
const
|
|
92
|
-
var m = e.n(
|
|
89
|
+
const v = require("styled-components");
|
|
90
|
+
var m = e.n(v);
|
|
93
91
|
// CONCATENATED MODULE: external "@splunk/react-ui/Button"
|
|
94
|
-
const
|
|
95
|
-
var
|
|
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
|
|
98
|
-
var
|
|
95
|
+
const g = require("@splunk/react-ui/ButtonSimple");
|
|
96
|
+
var y = e.n(g);
|
|
99
97
|
// CONCATENATED MODULE: external "@splunk/themes"
|
|
100
|
-
const
|
|
98
|
+
const h = require("@splunk/themes");
|
|
101
99
|
// CONCATENATED MODULE: ./src/FormRows/FormRowsStyles.ts
|
|
102
|
-
var
|
|
103
|
-
|
|
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
|
-
})([ "", ";
|
|
106
|
-
var S = m().
|
|
107
|
-
displayName: "
|
|
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:
|
|
110
|
-
|
|
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
|
-
})([ "", ";" ],
|
|
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: "
|
|
114
|
+
displayName: "FormRowsStyles__StyledHeader",
|
|
119
115
|
componentId: "sc-1j4j7h3-3"
|
|
120
|
-
})([ "", ";" ],
|
|
121
|
-
|
|
122
|
-
|
|
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
|
-
})([ "
|
|
125
|
-
var
|
|
126
|
-
displayName: "
|
|
123
|
+
})([ "", ";" ], j);
|
|
124
|
+
var E = m().div.withConfig({
|
|
125
|
+
displayName: "FormRowsStyles__StyledMenuWrapper",
|
|
127
126
|
componentId: "sc-1j4j7h3-5"
|
|
128
|
-
})([ "
|
|
129
|
-
var
|
|
127
|
+
})([ "", ";" ], j);
|
|
128
|
+
var q = m().div.withConfig({
|
|
130
129
|
displayName: "FormRowsStyles__StyledInputWrapper",
|
|
131
130
|
componentId: "sc-1j4j7h3-6"
|
|
132
|
-
})([ "display:flex;gap:", ";" ],
|
|
133
|
-
var
|
|
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;}
|
|
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
|
|
142
|
-
}),
|
|
140
|
+
return k(n);
|
|
141
|
+
}), h.variables.spacingXSmall, h.variables.borderRadius, h.variables.zindexPopover, (function(e) {
|
|
143
142
|
var n = e.$sortable;
|
|
144
|
-
return
|
|
145
|
-
})
|
|
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
|
|
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
|
|
191
|
-
var
|
|
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
|
|
198
|
+
var b = i !== undefined;
|
|
199
199
|
(0, r.useEffect)((function() {
|
|
200
200
|
if (false) {}
|
|
201
201
|
if (false) {}
|
|
202
202
|
if (false) {}
|
|
203
|
-
}), [
|
|
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(
|
|
210
|
-
appearance: "
|
|
211
|
-
"aria-label":
|
|
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:
|
|
214
|
-
onClick:
|
|
215
|
-
}, t().createElement(
|
|
213
|
+
disabled: c,
|
|
214
|
+
onClick: p
|
|
215
|
+
}, t().createElement(f(), null)));
|
|
216
216
|
}));
|
|
217
|
-
M.propTypes =
|
|
217
|
+
M.propTypes = A;
|
|
218
218
|
/* harmony default export */ const N = M;
|
|
219
219
|
// CONCATENATED MODULE: external "@dnd-kit/sortable"
|
|
220
|
-
const
|
|
220
|
+
const B = require("@dnd-kit/sortable");
|
|
221
221
|
// CONCATENATED MODULE: external "@dnd-kit/utilities"
|
|
222
|
-
const
|
|
222
|
+
const F = require("@dnd-kit/utilities");
|
|
223
223
|
// CONCATENATED MODULE: external "@splunk/react-icons/ParallelDots"
|
|
224
|
-
const
|
|
225
|
-
var
|
|
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
|
|
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
|
|
247
|
-
return
|
|
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
|
-
},
|
|
255
|
+
}, K.apply(null, arguments);
|
|
256
256
|
}
|
|
257
|
-
function
|
|
257
|
+
function $(e, n) {
|
|
258
258
|
if (null == e) return {};
|
|
259
|
-
var r, t, o =
|
|
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
|
|
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
|
|
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 =
|
|
286
|
-
|
|
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,
|
|
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,
|
|
294
|
-
var
|
|
295
|
-
transform:
|
|
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
|
|
299
|
-
|
|
300
|
-
|
|
299
|
+
var b = function e(r) {
|
|
300
|
+
f(r);
|
|
301
|
+
L(n, r);
|
|
301
302
|
};
|
|
302
|
-
var
|
|
303
|
-
var
|
|
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
|
-
|
|
307
|
+
y === null || y === void 0 ? void 0 : y(e, {
|
|
307
308
|
index: a !== null && a !== void 0 ? a : 0
|
|
308
309
|
});
|
|
309
|
-
}), [
|
|
310
|
-
var
|
|
310
|
+
}), [ y, a ]);
|
|
311
|
+
var w = (0, r.useCallback)((function() {
|
|
311
312
|
|
|
312
|
-
return t().createElement(
|
|
313
|
-
appearance: "
|
|
314
|
-
"aria-label":
|
|
313
|
+
return t().createElement(R, K({
|
|
314
|
+
appearance: "subtle",
|
|
315
|
+
"aria-label": W,
|
|
315
316
|
"data-test": "drag-handle",
|
|
316
|
-
onKeyDown:
|
|
317
|
-
ref:
|
|
318
|
-
},
|
|
319
|
-
}), [
|
|
317
|
+
onKeyDown: h,
|
|
318
|
+
ref: c
|
|
319
|
+
}, u), t().createElement(X(), null));
|
|
320
|
+
}), [ h, u, c ]);
|
|
320
321
|
|
|
321
|
-
return t().createElement(N,
|
|
322
|
+
return t().createElement(N, K({
|
|
322
323
|
index: a,
|
|
323
|
-
ref:
|
|
324
|
-
renderDragHandle:
|
|
325
|
-
style:
|
|
324
|
+
ref: b,
|
|
325
|
+
renderDragHandle: w,
|
|
326
|
+
style: p
|
|
326
327
|
}, i, s), o);
|
|
327
328
|
}));
|
|
328
|
-
|
|
329
|
-
/* harmony default export */ const
|
|
329
|
+
V.propTypes = U;
|
|
330
|
+
/* harmony default export */ const G = V;
|
|
330
331
|
// CONCATENATED MODULE: ./src/FormRows/Row.tsx
|
|
331
|
-
function
|
|
332
|
-
return
|
|
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
|
-
},
|
|
341
|
+
}, J.apply(null, arguments);
|
|
341
342
|
}
|
|
342
|
-
function
|
|
343
|
+
function Q(e, n) {
|
|
343
344
|
if (null == e) return {};
|
|
344
|
-
var r, t, o =
|
|
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
|
|
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
|
|
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
|
|
372
|
-
var n = e.children, o = e.elementRef, a =
|
|
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)(
|
|
375
|
-
var
|
|
376
|
-
return l ?
|
|
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(
|
|
380
|
+
return t().createElement(s, J({
|
|
380
381
|
ref: o
|
|
381
382
|
}, a), n);
|
|
382
383
|
}
|
|
383
|
-
|
|
384
|
-
/* harmony default export */ const
|
|
384
|
+
ee.propTypes = Z;
|
|
385
|
+
/* harmony default export */ const ne = ee;
|
|
385
386
|
// CONCATENATED MODULE: external "@dnd-kit/core"
|
|
386
|
-
const
|
|
387
|
+
const re = require("@dnd-kit/core");
|
|
387
388
|
// CONCATENATED MODULE: external "@splunk/ui-utils/format"
|
|
388
|
-
const
|
|
389
|
+
const te = require("@splunk/ui-utils/format");
|
|
389
390
|
// CONCATENATED MODULE: ./src/FormRows/SortableList.tsx
|
|
390
|
-
var
|
|
391
|
+
var oe = function e(n, r) {
|
|
391
392
|
return n.indexOf(r) + 1;
|
|
392
393
|
};
|
|
393
|
-
var
|
|
394
|
-
draggable: (0,
|
|
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
|
|
397
|
+
var ie = function e(n) {
|
|
397
398
|
var o = n.children, a = n.onSortEnd;
|
|
398
|
-
var i = (0,
|
|
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
|
|
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, 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,
|
|
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,
|
|
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,
|
|
439
|
+
return (0, te.sprintf)("Row returned to it's starting position of %d.", oe(u, r));
|
|
439
440
|
}
|
|
440
441
|
};
|
|
441
|
-
}), [
|
|
442
|
+
}), [ u ]);
|
|
442
443
|
var f = (0, r.useMemo)((function() {
|
|
443
444
|
return {
|
|
444
|
-
screenReaderInstructions:
|
|
445
|
+
screenReaderInstructions: ae,
|
|
445
446
|
announcements: c
|
|
446
447
|
};
|
|
447
448
|
}), [ c ]);
|
|
448
449
|
|
|
449
|
-
return t().createElement(
|
|
450
|
+
return t().createElement(re.DndContext, {
|
|
450
451
|
accessibility: f,
|
|
451
452
|
sensors: i,
|
|
452
|
-
collisionDetection:
|
|
453
|
+
collisionDetection: re.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 le = ie;
|
|
460
461
|
// CONCATENATED MODULE: ./src/FormRows/FormRows.tsx
|
|
461
|
-
function
|
|
462
|
-
return
|
|
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
|
-
},
|
|
471
|
+
}, se.apply(null, arguments);
|
|
471
472
|
}
|
|
472
|
-
function
|
|
473
|
+
function ue(e, n) {
|
|
473
474
|
if (null == e) return {};
|
|
474
|
-
var r, t, o =
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
582
|
-
var
|
|
583
|
-
function
|
|
584
|
-
var n = e.addLabel, o = n === void 0 ?
|
|
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 (
|
|
593
|
+
if (o === "ArrowUp") {
|
|
592
594
|
e.preventDefault();
|
|
593
595
|
if (r > 0) {
|
|
594
|
-
|
|
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 (
|
|
601
|
+
} else if (o === "ArrowDown") {
|
|
600
602
|
e.preventDefault();
|
|
601
603
|
if (r < t().Children.toArray(a).length - 1) {
|
|
602
|
-
|
|
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,
|
|
609
|
-
var
|
|
610
|
+
}), [ a, f ]);
|
|
611
|
+
var p = (0, r.useCallback)((function(e) {
|
|
610
612
|
var n = e.oldIndex, r = e.newIndex;
|
|
611
|
-
|
|
613
|
+
f === null || f === void 0 ? void 0 : f({
|
|
612
614
|
fromIndex: n,
|
|
613
615
|
toIndex: r
|
|
614
616
|
});
|
|
615
|
-
}), [
|
|
616
|
-
var
|
|
617
|
-
var
|
|
617
|
+
}), [ f ]);
|
|
618
|
+
var b = f !== undefined && !i;
|
|
619
|
+
var g = c !== undefined;
|
|
618
620
|
|
|
619
|
-
return t().createElement(
|
|
621
|
+
return t().createElement(O, se({
|
|
620
622
|
ref: l,
|
|
621
623
|
"data-test": "form-rows"
|
|
622
|
-
},
|
|
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:
|
|
628
|
-
sortable:
|
|
629
|
+
hasOnRequestAdd: g,
|
|
630
|
+
sortable: b
|
|
629
631
|
}
|
|
630
|
-
},
|
|
631
|
-
onSortEnd:
|
|
632
|
-
}, a),
|
|
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:
|
|
638
|
+
icon: pe,
|
|
637
639
|
label: o,
|
|
638
|
-
onClick:
|
|
640
|
+
onClick: c
|
|
639
641
|
})));
|
|
640
642
|
}
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
/* harmony default export */ const
|
|
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
|
/******/})();
|