@splunk/react-ui 5.0.0-beta.5 → 5.0.0-rc.2
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/ButtonSimple.js +92 -168
- package/{CHANGELOG.v5.mdx → CHANGELOG.v5.md} +43 -0
- package/Calendar.js +148 -151
- package/Card.js +139 -139
- package/Code.js +197 -167
- package/CollapsiblePanel.js +172 -164
- package/Color.js +584 -506
- package/ComboBox.js +51 -51
- package/ControlGroup.js +132 -127
- package/Date.js +137 -150
- package/Dropdown.js +97 -96
- package/DualListbox.js +468 -469
- package/FetchOptions.d.ts +2 -2
- package/FormRows.js +158 -157
- package/JSONTree.js +354 -360
- package/{MIGRATION.mdx → MIGRATION.md} +13 -43
- package/{MIGRATION.v5.mdx → MIGRATION.v5.md} +67 -1
- package/Markdown.js +3 -4
- package/Menu.js +194 -195
- package/Modal.js +18 -18
- package/ModalLayer.js +171 -217
- package/Multiselect.js +785 -778
- package/Number.js +103 -102
- package/Popover.js +48 -46
- package/RadioBar.js +144 -146
- package/Resize.js +149 -151
- package/ResultsMenu.js +112 -114
- package/Search.js +49 -49
- package/Select.js +455 -457
- package/Slider.js +328 -331
- package/Switch.js +251 -178
- package/TabBar.js +277 -280
- package/Table.js +1212 -1178
- package/Text.js +45 -46
- package/Tooltip.js +192 -189
- package/Tree.js +177 -188
- package/package.json +10 -9
- package/types/src/Code/Code.d.ts +1 -1
- package/types/src/Color/Color.d.ts +2 -2
- package/types/src/ControlGroup/ControlGroup.d.ts +1 -2
- package/types/src/Dropdown/Dropdown.d.ts +5 -2
- package/types/src/Layer/Layer.d.ts +2 -1
- package/types/src/Layer/index.d.ts +1 -0
- package/types/src/ModalLayer/ModalLayer.d.ts +16 -21
- package/types/src/Number/Number.d.ts +1 -1
- package/types/src/Popover/Popover.d.ts +5 -2
- package/types/src/Table/HeadCell.d.ts +6 -1
- package/types/src/Table/HeadInner.d.ts +3 -1
- package/types/src/Tooltip/Tooltip.d.ts +7 -7
- package/types/src/fixtures/useFetchOptions.d.ts +33 -0
- package/useRovingFocus.js +20 -23
- package/types/src/fixtures/FetchOptions.d.ts +0 -76
package/RadioBar.js
CHANGED
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
e.r(r);
|
|
62
62
|
// EXPORTS
|
|
63
63
|
e.d(r, {
|
|
64
|
-
Option: () => /* reexport */
|
|
65
|
-
default: () => /* reexport */
|
|
64
|
+
Option: () => /* reexport */ x,
|
|
65
|
+
default: () => /* reexport */ X
|
|
66
66
|
});
|
|
67
67
|
// CONCATENATED MODULE: external "react"
|
|
68
68
|
const t = require("react");
|
|
@@ -73,47 +73,45 @@
|
|
|
73
73
|
// CONCATENATED MODULE: external "lodash/omit"
|
|
74
74
|
const i = require("lodash/omit");
|
|
75
75
|
var l = e.n(i);
|
|
76
|
-
// CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
|
|
77
|
-
const u = require("@splunk/ui-utils/keyboard");
|
|
78
76
|
// CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
|
|
79
77
|
const d = require("@splunk/react-ui/useControlled");
|
|
80
|
-
var
|
|
78
|
+
var u = e.n(d);
|
|
81
79
|
// CONCATENATED MODULE: external "styled-components"
|
|
82
|
-
const
|
|
83
|
-
var
|
|
80
|
+
const c = require("styled-components");
|
|
81
|
+
var s = e.n(c);
|
|
84
82
|
// CONCATENATED MODULE: external "@splunk/themes"
|
|
85
|
-
const
|
|
83
|
+
const v = require("@splunk/themes");
|
|
86
84
|
// CONCATENATED MODULE: external "@splunk/react-ui/Button"
|
|
87
|
-
const
|
|
88
|
-
var
|
|
85
|
+
const b = require("@splunk/react-ui/Button");
|
|
86
|
+
var f = e.n(b);
|
|
89
87
|
// CONCATENATED MODULE: ./src/RadioBar/OptionStyles.ts
|
|
90
|
-
var
|
|
91
|
-
var
|
|
88
|
+
var p = 10;
|
|
89
|
+
var y = s()(f()).withConfig({
|
|
92
90
|
displayName: "OptionStyles__StyledButton",
|
|
93
91
|
componentId: "fyq77p-0"
|
|
94
|
-
})([ "border:", " solid ", ";border-radius:0;height:", ";min-height:", ";min-width:0;padding:", " ", ";z-index:", ";&&{color:", ";}&:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}&:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:not(:last-child){margin-right:-", ";}&&:focus{background-color:", ";box-shadow:", ";color:", ";z-index:", ";border:0;span{padding:0 ", ";}}&:not([disabled],[aria-disabled='true']){", "}&[disabled],&[aria-disabled='true']{background-color:", ";color:", ";z-index:0;}" ],
|
|
95
|
-
|
|
96
|
-
true: (0,
|
|
92
|
+
})([ "border:", " solid ", ";border-radius:0;height:", ";min-height:", ";min-width:0;padding:", " ", ";z-index:", ";&&{color:", ";}&:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}&:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:not(:last-child){margin-right:-", ";}&&:focus{background-color:", ";box-shadow:", ";color:", ";z-index:", ";border:0;span{padding:0 ", ";}}&:not([disabled],[aria-disabled='true']){", "}&[disabled],&[aria-disabled='true']{background-color:", ";color:", ";z-index:0;}" ], v.variables.inputBorderWidth, v.variables.borderColor, v.variables.inputHeight, v.variables.inputHeight, v.variables.spacingXSmall, v.variables.spacingSmall, p, v.variables.contentColorDefault, v.variables.borderRadius, v.variables.borderRadius, v.variables.borderRadius, v.variables.borderRadius, v.variables.inputBorderWidth, v.variables.actionColorBackgroundSecondaryActive, v.variables.focusShadowInset, v.variables.contentColorActive, p * 5, v.variables.inputBorderWidth, (0,
|
|
93
|
+
v.pickVariant)("$optionSelected", {
|
|
94
|
+
true: (0, c.css)([ "", ";background-color:", ";border-color:", ";border-width:", ";z-index:", ";" ], v.mixins.typography({
|
|
97
95
|
weight: "bold",
|
|
98
96
|
color: "active"
|
|
99
|
-
}),
|
|
100
|
-
false: (0,
|
|
101
|
-
}),
|
|
102
|
-
var
|
|
97
|
+
}), v.variables.actionColorBackgroundSecondaryActive, v.variables.actionColorBorderSecondaryActive, v.variables.inputBorderWidth, p * 4),
|
|
98
|
+
false: (0, c.css)([ "&:hover{background-color:", ";border-color:", ";color:", ";z-index:", ";}" ], v.variables.actionColorBackgroundSecondaryHover, v.variables.borderColor, v.variables.contentColorActive, p * 3)
|
|
99
|
+
}), v.variables.actionColorBackgroundSecondaryDisabled, v.variables.contentColorDisabled);
|
|
100
|
+
var m = s().div.withConfig({
|
|
103
101
|
displayName: "OptionStyles__StyledLabel",
|
|
104
102
|
componentId: "fyq77p-1"
|
|
105
|
-
})([ "", " flex:0 1 auto;" ],
|
|
106
|
-
var
|
|
103
|
+
})([ "", " flex:0 1 auto;" ], v.mixins.ellipsis);
|
|
104
|
+
var g = s().div.withConfig({
|
|
107
105
|
displayName: "OptionStyles__StyledAdornment",
|
|
108
106
|
componentId: "fyq77p-2"
|
|
109
107
|
})([ "display:flex;" ]);
|
|
110
108
|
// CONCATENATED MODULE: ./src/RadioBar/RadioBarContext.tsx
|
|
111
|
-
var
|
|
112
|
-
|
|
113
|
-
/* harmony default export */ const
|
|
109
|
+
var h = (0, t.createContext)({});
|
|
110
|
+
h.displayName = "RadioBar";
|
|
111
|
+
/* harmony default export */ const O = h;
|
|
114
112
|
// CONCATENATED MODULE: ./src/RadioBar/Option.tsx
|
|
115
|
-
function
|
|
116
|
-
return
|
|
113
|
+
function S() {
|
|
114
|
+
return S = Object.assign ? Object.assign.bind() : function(e) {
|
|
117
115
|
for (var r = 1; r < arguments.length; r++) {
|
|
118
116
|
var t = arguments[r];
|
|
119
117
|
for (var n in t) {
|
|
@@ -121,11 +119,11 @@
|
|
|
121
119
|
}
|
|
122
120
|
}
|
|
123
121
|
return e;
|
|
124
|
-
},
|
|
122
|
+
}, S.apply(null, arguments);
|
|
125
123
|
}
|
|
126
|
-
function
|
|
124
|
+
function w(e, r) {
|
|
127
125
|
if (null == e) return {};
|
|
128
|
-
var t, n, o =
|
|
126
|
+
var t, n, o = C(e, r);
|
|
129
127
|
if (Object.getOwnPropertySymbols) {
|
|
130
128
|
var a = Object.getOwnPropertySymbols(e);
|
|
131
129
|
for (n = 0; n < a.length; n++) {
|
|
@@ -134,7 +132,7 @@
|
|
|
134
132
|
}
|
|
135
133
|
return o;
|
|
136
134
|
}
|
|
137
|
-
function
|
|
135
|
+
function C(e, r) {
|
|
138
136
|
if (null == e) return {};
|
|
139
137
|
var t = {};
|
|
140
138
|
for (var n in e) {
|
|
@@ -145,7 +143,7 @@
|
|
|
145
143
|
}
|
|
146
144
|
return t;
|
|
147
145
|
}
|
|
148
|
-
var
|
|
146
|
+
var j = {
|
|
149
147
|
disabled: a().bool,
|
|
150
148
|
startAdornment: a().node,
|
|
151
149
|
endAdornment: a().node,
|
|
@@ -157,62 +155,62 @@
|
|
|
157
155
|
/** The value of the `Option`. */
|
|
158
156
|
value: a().any.isRequired
|
|
159
157
|
};
|
|
160
|
-
function
|
|
161
|
-
var r = e.disabled, o = e.label, a = e.selected, i = e.startAdornment, l = e.endAdornment,
|
|
158
|
+
function k(e) {
|
|
159
|
+
var r = e.disabled, o = e.label, a = e.selected, i = e.startAdornment, l = e.endAdornment, d = e.value, u = e.role, c = u === void 0 ? "radio" : u, s = w(e, [ "disabled", "label", "selected", "startAdornment", "endAdornment", "value", "role" ]);
|
|
162
160
|
// @docs-props-type OptionPropsBase
|
|
163
|
-
var v = (0, t.useContext)(
|
|
161
|
+
var v = (0, t.useContext)(O), b = v.onClick, f = v.error, p = v.onKeyDown, h = v.firstValue, C = v.selectedValue;
|
|
164
162
|
var j = -1;
|
|
165
|
-
if (
|
|
166
|
-
if (
|
|
163
|
+
if (C) {
|
|
164
|
+
if (d === C) {
|
|
167
165
|
j = 0;
|
|
168
166
|
}
|
|
169
|
-
} else if (
|
|
167
|
+
} else if (d === h) {
|
|
170
168
|
j = 0;
|
|
171
169
|
}
|
|
172
170
|
var k = j;
|
|
173
171
|
var x = (0, t.useCallback)((function(e) {
|
|
174
172
|
if (!a) {
|
|
175
173
|
b === null || b === void 0 ? void 0 : b(e, {
|
|
176
|
-
value:
|
|
174
|
+
value: d,
|
|
177
175
|
label: o
|
|
178
176
|
});
|
|
179
177
|
}
|
|
180
|
-
}), [ o, b, a,
|
|
178
|
+
}), [ o, b, a, d ]);
|
|
181
179
|
var B = (0, t.useCallback)((function(e) {
|
|
182
180
|
return p === null || p === void 0 ? void 0 : p(e, {
|
|
183
|
-
value:
|
|
181
|
+
value: d,
|
|
184
182
|
label: o
|
|
185
183
|
});
|
|
186
|
-
}), [ o, p,
|
|
184
|
+
}), [ o, p, d ]);
|
|
187
185
|
|
|
188
|
-
return n().createElement(
|
|
186
|
+
return n().createElement(y, S({
|
|
189
187
|
"aria-invalid": f,
|
|
190
188
|
"data-test": "option",
|
|
191
|
-
"data-test-value":
|
|
189
|
+
"data-test-value": d,
|
|
192
190
|
appearance: "default",
|
|
193
191
|
disabled: r ? "disabled" : undefined,
|
|
194
192
|
$optionSelected: a,
|
|
195
|
-
value:
|
|
193
|
+
value: d
|
|
196
194
|
}, s, {
|
|
197
195
|
onClick: x,
|
|
198
196
|
role: c,
|
|
199
197
|
"aria-checked": a,
|
|
200
198
|
tabIndex: k,
|
|
201
199
|
onKeyDown: B
|
|
202
|
-
}), i && n().createElement(
|
|
200
|
+
}), i && n().createElement(g, null, i), o && n().createElement(m, null, o), l && n().createElement(g, null, l));
|
|
203
201
|
}
|
|
204
|
-
|
|
205
|
-
/* harmony default export */ const
|
|
202
|
+
k.propTypes = j;
|
|
203
|
+
/* harmony default export */ const x = k;
|
|
206
204
|
// CONCATENATED MODULE: external "@splunk/react-ui/Box"
|
|
207
|
-
const
|
|
208
|
-
var A = e.n(
|
|
205
|
+
const B = require("@splunk/react-ui/Box");
|
|
206
|
+
var A = e.n(B);
|
|
209
207
|
// CONCATENATED MODULE: ./src/RadioBar/RadioBarStyles.ts
|
|
210
|
-
var
|
|
208
|
+
var P = s()(A()).withConfig({
|
|
211
209
|
displayName: "RadioBarStyles__StyledRadioBar",
|
|
212
210
|
componentId: "gg1b79-0"
|
|
213
|
-
})([ "height:", ";", "" ],
|
|
211
|
+
})([ "height:", ";", "" ], v.variables.inputHeight, (function(e) {
|
|
214
212
|
var r = e.$error;
|
|
215
|
-
return r && (0,
|
|
213
|
+
return r && (0, c.css)([ "& > ", "{border-color:", ";:not([disabled],[aria-disabled='true']){&:hover{border-color:", ";}&[aria-checked='true']{background-color:", ";border-color:", ";}}}" ], y, v.variables.actionColorBorderDestructiveSecondary, v.variables.actionColorBorderDestructiveSecondary, v.variables.actionColorBackgroundDestructiveSecondaryActive, v.variables.actionColorBorderDestructiveSecondaryActive);
|
|
216
214
|
}));
|
|
217
215
|
// CONCATENATED MODULE: ./src/RadioBar/RadioBar.tsx
|
|
218
216
|
function R(e) {
|
|
@@ -223,8 +221,8 @@
|
|
|
223
221
|
return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
|
|
224
222
|
}, R(e);
|
|
225
223
|
}
|
|
226
|
-
function
|
|
227
|
-
return
|
|
224
|
+
function E() {
|
|
225
|
+
return E = Object.assign ? Object.assign.bind() : function(e) {
|
|
228
226
|
for (var r = 1; r < arguments.length; r++) {
|
|
229
227
|
var t = arguments[r];
|
|
230
228
|
for (var n in t) {
|
|
@@ -232,7 +230,7 @@
|
|
|
232
230
|
}
|
|
233
231
|
}
|
|
234
232
|
return e;
|
|
235
|
-
},
|
|
233
|
+
}, E.apply(null, arguments);
|
|
236
234
|
}
|
|
237
235
|
function D(e, r) {
|
|
238
236
|
var t = Object.keys(e);
|
|
@@ -244,30 +242,30 @@
|
|
|
244
242
|
}
|
|
245
243
|
return t;
|
|
246
244
|
}
|
|
247
|
-
function
|
|
245
|
+
function q(e) {
|
|
248
246
|
for (var r = 1; r < arguments.length; r++) {
|
|
249
247
|
var t = null != arguments[r] ? arguments[r] : {};
|
|
250
248
|
r % 2 ? D(Object(t), !0).forEach((function(r) {
|
|
251
|
-
|
|
249
|
+
I(e, r, t[r]);
|
|
252
250
|
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : D(Object(t)).forEach((function(r) {
|
|
253
251
|
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
254
252
|
}));
|
|
255
253
|
}
|
|
256
254
|
return e;
|
|
257
255
|
}
|
|
258
|
-
function
|
|
259
|
-
return (r =
|
|
256
|
+
function I(e, r, t) {
|
|
257
|
+
return (r = _(r)) in e ? Object.defineProperty(e, r, {
|
|
260
258
|
value: t,
|
|
261
259
|
enumerable: !0,
|
|
262
260
|
configurable: !0,
|
|
263
261
|
writable: !0
|
|
264
262
|
}) : e[r] = t, e;
|
|
265
263
|
}
|
|
266
|
-
function
|
|
267
|
-
var r =
|
|
264
|
+
function _(e) {
|
|
265
|
+
var r = T(e, "string");
|
|
268
266
|
return "symbol" == R(r) ? r : r + "";
|
|
269
267
|
}
|
|
270
|
-
function
|
|
268
|
+
function T(e, r) {
|
|
271
269
|
if ("object" != R(e) || !e) return e;
|
|
272
270
|
var t = e[Symbol.toPrimitive];
|
|
273
271
|
if (void 0 !== t) {
|
|
@@ -277,54 +275,54 @@
|
|
|
277
275
|
}
|
|
278
276
|
return ("string" === r ? String : Number)(e);
|
|
279
277
|
}
|
|
280
|
-
function
|
|
281
|
-
return
|
|
278
|
+
function V(e, r) {
|
|
279
|
+
return H(e) || z(e, r) || N(e, r) || M();
|
|
282
280
|
}
|
|
283
|
-
function
|
|
281
|
+
function M() {
|
|
284
282
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
285
283
|
}
|
|
286
|
-
function
|
|
284
|
+
function N(e, r) {
|
|
287
285
|
if (e) {
|
|
288
|
-
if ("string" == typeof e) return
|
|
286
|
+
if ("string" == typeof e) return $(e, r);
|
|
289
287
|
var t = {}.toString.call(e).slice(8, -1);
|
|
290
|
-
return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ?
|
|
288
|
+
return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? $(e, r) : void 0;
|
|
291
289
|
}
|
|
292
290
|
}
|
|
293
|
-
function
|
|
291
|
+
function $(e, r) {
|
|
294
292
|
(null == r || r > e.length) && (r = e.length);
|
|
295
293
|
for (var t = 0, n = Array(r); t < r; t++) {
|
|
296
294
|
n[t] = e[t];
|
|
297
295
|
}
|
|
298
296
|
return n;
|
|
299
297
|
}
|
|
300
|
-
function
|
|
298
|
+
function z(e, r) {
|
|
301
299
|
var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
|
|
302
300
|
if (null != t) {
|
|
303
|
-
var n, o, a, i, l = [],
|
|
301
|
+
var n, o, a, i, l = [], d = !0, u = !1;
|
|
304
302
|
try {
|
|
305
303
|
if (a = (t = t.call(e)).next, 0 === r) {
|
|
306
304
|
if (Object(t) !== t) return;
|
|
307
|
-
|
|
308
|
-
} else for (;!(
|
|
305
|
+
d = !1;
|
|
306
|
+
} else for (;!(d = (n = a.call(t)).done) && (l.push(n.value), l.length !== r); d = !0) {
|
|
309
307
|
}
|
|
310
308
|
} catch (e) {
|
|
311
|
-
|
|
309
|
+
u = !0, o = e;
|
|
312
310
|
} finally {
|
|
313
311
|
try {
|
|
314
|
-
if (!
|
|
312
|
+
if (!d && null != t["return"] && (i = t["return"](), Object(i) !== i)) return;
|
|
315
313
|
} finally {
|
|
316
|
-
if (
|
|
314
|
+
if (u) throw o;
|
|
317
315
|
}
|
|
318
316
|
}
|
|
319
317
|
return l;
|
|
320
318
|
}
|
|
321
319
|
}
|
|
322
|
-
function
|
|
320
|
+
function H(e) {
|
|
323
321
|
if (Array.isArray(e)) return e;
|
|
324
322
|
}
|
|
325
|
-
function
|
|
323
|
+
function W(e, r) {
|
|
326
324
|
if (null == e) return {};
|
|
327
|
-
var t, n, o =
|
|
325
|
+
var t, n, o = K(e, r);
|
|
328
326
|
if (Object.getOwnPropertySymbols) {
|
|
329
327
|
var a = Object.getOwnPropertySymbols(e);
|
|
330
328
|
for (n = 0; n < a.length; n++) {
|
|
@@ -333,7 +331,7 @@
|
|
|
333
331
|
}
|
|
334
332
|
return o;
|
|
335
333
|
}
|
|
336
|
-
function
|
|
334
|
+
function K(e, r) {
|
|
337
335
|
if (null == e) return {};
|
|
338
336
|
var t = {};
|
|
339
337
|
for (var n in e) {
|
|
@@ -344,7 +342,7 @@
|
|
|
344
342
|
}
|
|
345
343
|
return t;
|
|
346
344
|
}
|
|
347
|
-
/** @public */ var
|
|
345
|
+
/** @public */ var F = {
|
|
348
346
|
children: a().node,
|
|
349
347
|
defaultValue: a().any,
|
|
350
348
|
describedBy: a().string,
|
|
@@ -360,26 +358,26 @@
|
|
|
360
358
|
value: a().any
|
|
361
359
|
};
|
|
362
360
|
// TODO(SUI-7012): Once converted to a functional component, this function can be removed and RadioBar should use useRovingFocus hook
|
|
363
|
-
var
|
|
361
|
+
var L = function e(r, t, n, o) {
|
|
364
362
|
var a = r === "forward" ? 1 : -1;
|
|
365
363
|
var i = r === "forward" ? "nextSibling" : "previousSibling";
|
|
366
364
|
var l = r === "forward" ? "firstElementChild" : "lastElementChild";
|
|
367
|
-
var
|
|
368
|
-
var
|
|
365
|
+
var d = r === "forward" ? 0 : t - 1;
|
|
366
|
+
var u = n[i];
|
|
369
367
|
var c = null;
|
|
370
368
|
var s = o + a;
|
|
371
|
-
while (
|
|
372
|
-
if (
|
|
369
|
+
while (u !== n && c === null) {
|
|
370
|
+
if (u === null) {
|
|
373
371
|
var v;
|
|
374
|
-
|
|
375
|
-
s =
|
|
372
|
+
u = (v = n.parentElement) === null || v === void 0 ? void 0 : v[l];
|
|
373
|
+
s = d;
|
|
376
374
|
}
|
|
377
|
-
if (
|
|
378
|
-
var b =
|
|
379
|
-
|
|
375
|
+
if (u.disabled) {
|
|
376
|
+
var b = u[i];
|
|
377
|
+
u = b;
|
|
380
378
|
s += a;
|
|
381
379
|
} else {
|
|
382
|
-
c =
|
|
380
|
+
c = u;
|
|
383
381
|
}
|
|
384
382
|
}
|
|
385
383
|
return {
|
|
@@ -389,17 +387,17 @@
|
|
|
389
387
|
};
|
|
390
388
|
/**
|
|
391
389
|
* RadioBar is a form control that provides the ability to select one option out of a group.
|
|
392
|
-
*/ function
|
|
393
|
-
var r = e.children, o = e.defaultValue, a = e.describedBy, i = e.elementRef, d = e.error,
|
|
390
|
+
*/ function U(e) {
|
|
391
|
+
var r = e.children, o = e.defaultValue, a = e.describedBy, i = e.elementRef, d = e.error, c = e.labelledBy, s = e.name, v = e.onChange, b = e.required, f = e.role, p = f === void 0 ? "radiogroup" : f, y = e.value, m = W(e, [ "children", "defaultValue", "describedBy", "elementRef", "error", "labelledBy", "name", "onChange", "required", "role", "value" ]);
|
|
394
392
|
// @docs-props-type RadioBarPropsBase
|
|
395
|
-
var
|
|
393
|
+
var g = u()({
|
|
396
394
|
componentName: "RadioBar",
|
|
397
395
|
/* eslint-disable-next-line prefer-rest-params */
|
|
398
396
|
componentProps: arguments[0]
|
|
399
397
|
});
|
|
400
|
-
var
|
|
401
|
-
var
|
|
402
|
-
var
|
|
398
|
+
var h = (0, t.useState)(o), S = V(h, 2), w = S[0], C = S[1];
|
|
399
|
+
var j = g ? y : w;
|
|
400
|
+
var k = (0, t.useMemo)((function() {
|
|
403
401
|
// Everything in here is grouped because together they are based on children changing
|
|
404
402
|
var e = t.Children.toArray(r).filter(t.isValidElement);
|
|
405
403
|
var n = e.map((function(e) {
|
|
@@ -412,9 +410,9 @@
|
|
|
412
410
|
var a = e.map((function(e, r) {
|
|
413
411
|
|
|
414
412
|
return (0, t.cloneElement)(e, {
|
|
415
|
-
selected: e.props.value ===
|
|
413
|
+
selected: e.props.value === j,
|
|
416
414
|
key: e.key || r,
|
|
417
|
-
role:
|
|
415
|
+
role: p === "radiogroup" ? "radio" : "menuitemradio"
|
|
418
416
|
});
|
|
419
417
|
}));
|
|
420
418
|
return {
|
|
@@ -422,82 +420,82 @@
|
|
|
422
420
|
disabled: o,
|
|
423
421
|
filteredValues: n
|
|
424
422
|
};
|
|
425
|
-
}), [ r,
|
|
423
|
+
}), [ r, p, j ]), x = k.childrenFormatted, B = k.disabled, A = k.filteredValues;
|
|
426
424
|
var R = A[0];
|
|
427
425
|
var D = (0, t.useMemo)((function() {
|
|
428
|
-
return
|
|
429
|
-
}), [ A,
|
|
426
|
+
return y == null || A.includes(j);
|
|
427
|
+
}), [ A, j, y ]);
|
|
430
428
|
(0, t.useEffect)((function() {
|
|
431
429
|
if (false) {}
|
|
432
|
-
}), [ A,
|
|
433
|
-
var
|
|
434
|
-
if (
|
|
435
|
-
|
|
436
|
-
name:
|
|
430
|
+
}), [ A, j, D ]);
|
|
431
|
+
var I = (0, t.useCallback)((function(e, r) {
|
|
432
|
+
if (y !== r.value) {
|
|
433
|
+
v === null || v === void 0 ? void 0 : v(e, q({
|
|
434
|
+
name: s
|
|
437
435
|
}, r));
|
|
438
|
-
if (!
|
|
439
|
-
|
|
436
|
+
if (!g) {
|
|
437
|
+
C(r.value);
|
|
440
438
|
}
|
|
441
439
|
}
|
|
442
|
-
}), [
|
|
443
|
-
var
|
|
440
|
+
}), [ g, s, v, y ]);
|
|
441
|
+
var _ = (0, t.useCallback)((function(e, r) {
|
|
444
442
|
var t = r.value, n = r.label;
|
|
445
|
-
var o =
|
|
443
|
+
var o = e.key;
|
|
446
444
|
var a = e.currentTarget;
|
|
447
445
|
var i = null;
|
|
448
446
|
var l = 0;
|
|
449
447
|
var d = A.indexOf(t);
|
|
450
|
-
if (o === "
|
|
448
|
+
if (o === "ArrowDown" || o === "ArrowRight") {
|
|
451
449
|
e.preventDefault();
|
|
452
|
-
var
|
|
453
|
-
i =
|
|
454
|
-
l =
|
|
455
|
-
} else if (o === "
|
|
450
|
+
var u = L("forward", A.length, a, d), c = u.nextTargetRes, s = u.nextIndexRes;
|
|
451
|
+
i = c;
|
|
452
|
+
l = s;
|
|
453
|
+
} else if (o === "ArrowUp" || o === "ArrowLeft") {
|
|
456
454
|
e.preventDefault();
|
|
457
|
-
var
|
|
458
|
-
i =
|
|
459
|
-
l =
|
|
455
|
+
var v = L("backward", A.length, a, d), b = v.nextTargetRes, f = v.nextIndexRes;
|
|
456
|
+
i = b;
|
|
457
|
+
l = f;
|
|
460
458
|
}
|
|
461
459
|
if (i) {
|
|
462
|
-
var
|
|
463
|
-
(
|
|
464
|
-
var
|
|
465
|
-
|
|
466
|
-
value:
|
|
460
|
+
var p;
|
|
461
|
+
(p = i) === null || p === void 0 ? void 0 : p.focus();
|
|
462
|
+
var y = A[l];
|
|
463
|
+
I(e, {
|
|
464
|
+
value: y,
|
|
467
465
|
label: n
|
|
468
466
|
});
|
|
469
467
|
}
|
|
470
|
-
}), [ A,
|
|
471
|
-
var
|
|
468
|
+
}), [ A, I ]);
|
|
469
|
+
var T = (0, t.useMemo)((function() {
|
|
472
470
|
return {
|
|
473
471
|
error: d,
|
|
474
472
|
firstValue: R,
|
|
475
|
-
onClick:
|
|
476
|
-
onKeyDown:
|
|
477
|
-
selectedValue: D ?
|
|
473
|
+
onClick: I,
|
|
474
|
+
onKeyDown: _,
|
|
475
|
+
selectedValue: D ? j : undefined
|
|
478
476
|
};
|
|
479
|
-
}), [ d, R,
|
|
477
|
+
}), [ d, R, I, _, D, j ]);
|
|
480
478
|
|
|
481
|
-
return n().createElement(
|
|
479
|
+
return n().createElement(P, E({
|
|
482
480
|
flex: true,
|
|
483
|
-
$disabled:
|
|
481
|
+
$disabled: B,
|
|
484
482
|
$error: d,
|
|
485
483
|
elementRef: i,
|
|
486
484
|
"data-test": "radio-bar",
|
|
487
|
-
"data-test-value":
|
|
488
|
-
role:
|
|
489
|
-
"aria-labelledby":
|
|
485
|
+
"data-test-value": j,
|
|
486
|
+
role: p,
|
|
487
|
+
"aria-labelledby": c,
|
|
490
488
|
"aria-describedby": a,
|
|
491
|
-
"aria-disabled":
|
|
492
|
-
"aria-required":
|
|
493
|
-
"aria-invalid":
|
|
494
|
-
}, l()(
|
|
495
|
-
value:
|
|
496
|
-
},
|
|
489
|
+
"aria-disabled": B || undefined,
|
|
490
|
+
"aria-required": b,
|
|
491
|
+
"aria-invalid": p === "radiogroup" ? d : undefined
|
|
492
|
+
}, l()(m, "onChange")), n().createElement(O.Provider, {
|
|
493
|
+
value: T
|
|
494
|
+
}, x));
|
|
497
495
|
}
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
/* harmony default export */ const
|
|
496
|
+
U.Option = x;
|
|
497
|
+
U.propTypes = F;
|
|
498
|
+
/* harmony default export */ const X = U;
|
|
501
499
|
// only for styled components using RadioBar
|
|
502
500
|
// CONCATENATED MODULE: ./src/RadioBar/index.ts
|
|
503
501
|
module.exports = r;
|