@splunk/react-ui 4.33.0 → 4.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Breadcrumbs.js +20 -29
- package/Button.js +20 -23
- package/ButtonGroup.js +20 -23
- package/ButtonSimple.js +33 -34
- package/CHANGELOG.md +56 -1
- package/Card.js +129 -113
- package/Chip.js +75 -82
- package/CollapsiblePanel.js +281 -264
- package/Color.js +103 -93
- package/ComboBox.js +3 -2
- package/Concertina.js +139 -138
- package/ControlGroup.js +43 -39
- package/DualListbox.js +8 -11
- package/File.js +25 -30
- package/FormRows.js +53 -53
- package/Image.js +13 -13
- package/JSONTree.js +87 -85
- package/List.js +9 -13
- package/MIGRATION.mdx +100 -0
- package/Markdown.js +12 -12
- package/Menu.js +492 -699
- package/Message.js +192 -194
- package/MessageBar.js +104 -104
- package/Modal.js +2 -2
- package/Monogram.js +140 -94
- package/Multiselect.js +45 -49
- package/Paginator.js +8 -8
- package/Popover.js +53 -54
- package/Progress.js +45 -46
- package/RadioBar.js +117 -115
- package/RadioList.js +8 -5
- package/ResultsMenu.js +272 -279
- package/Search.js +197 -199
- package/Select.js +86 -84
- package/Slider.js +9 -9
- package/SplitButton.js +1 -4
- package/StaticContent.js +1 -1
- package/StepBar.js +92 -88
- package/Switch.js +217 -211
- package/TabBar.js +13 -5
- package/Table.js +714 -717
- package/Text.js +94 -83
- package/TextArea.js +162 -163
- package/Tooltip.js +1 -1
- package/package.json +8 -8
- package/stubs-splunkui.d.ts +11 -0
- package/types/src/Breadcrumbs/Breadcrumbs.d.ts +0 -1
- package/types/src/Breadcrumbs/Item.d.ts +0 -1
- package/types/src/Card/Card.d.ts +3 -1
- package/types/src/Card/Header.d.ts +22 -5
- package/types/src/Chip/Chip.d.ts +2 -4
- package/types/src/CollapsiblePanel/CollapsiblePanel.d.ts +5 -0
- package/types/src/CollapsiblePanel/icons/ExpandPanel.d.ts +1 -3
- package/types/src/Color/Color.d.ts +5 -5
- package/types/src/ComboBox/Option.d.ts +0 -1
- package/types/src/List/List.d.ts +2 -4
- package/types/src/Menu/Heading.d.ts +1 -1
- package/types/src/Menu/Item.d.ts +10 -5
- package/types/src/Menu/Menu.d.ts +18 -26
- package/types/src/Menu/MenuContext.d.ts +3 -2
- package/types/src/Menu/docs/examples/Dimmed.d.ts +2 -0
- package/types/src/Monogram/Monogram.d.ts +5 -6
- package/types/src/Multiselect/Option.d.ts +0 -1
- package/types/src/Progress/Progress.d.ts +4 -1
- package/types/src/RadioBar/Option.d.ts +4 -1
- package/types/src/RadioBar/RadioBar.d.ts +6 -4
- package/types/src/RadioBar/docs/examples/MenuBar.d.ts +2 -0
- package/types/src/ResultsMenu/ResultsMenu.d.ts +13 -28
- package/types/src/ResultsMenu/VirtualizedResultsMenu/VirtualizedResultsMenu.d.ts +3 -5
- package/types/src/Search/Option.d.ts +19 -6
- package/types/src/Search/docs/examples/OptionsLinks.d.ts +2 -0
- package/types/src/Select/Option.d.ts +0 -1
- package/types/src/Select/OptionBase.d.ts +2 -3
- package/types/src/Select/Select.d.ts +2 -2
- package/types/src/Select/SelectBase.d.ts +2 -2
- package/types/src/Table/Body.d.ts +0 -4
- package/types/src/Table/DragHandle.d.ts +1 -2
- package/types/src/Text/Text.d.ts +2 -0
- package/useRovingFocus.js +26 -40
- package/types/src/Select/docs/examples/prisma/Appearance.d.ts +0 -14
package/Switch.js
CHANGED
|
@@ -9,26 +9,26 @@
|
|
|
9
9
|
/******/ (() => {
|
|
10
10
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
11
11
|
/******/ e.n = r => {
|
|
12
|
-
/******/ var
|
|
12
|
+
/******/ var t = r && r.__esModule ?
|
|
13
13
|
/******/ () => r["default"]
|
|
14
14
|
/******/ : () => r
|
|
15
15
|
/******/;
|
|
16
|
-
e.d(
|
|
17
|
-
a
|
|
16
|
+
e.d(t, {
|
|
17
|
+
a: t
|
|
18
18
|
});
|
|
19
|
-
/******/ return
|
|
19
|
+
/******/ return t;
|
|
20
20
|
/******/ };
|
|
21
21
|
/******/ })();
|
|
22
22
|
/******/
|
|
23
23
|
/******/ /* webpack/runtime/define property getters */
|
|
24
24
|
/******/ (() => {
|
|
25
25
|
/******/ // define getter functions for harmony exports
|
|
26
|
-
/******/ e.d = (r,
|
|
27
|
-
/******/ for (var
|
|
28
|
-
/******/ if (e.o(
|
|
29
|
-
/******/ Object.defineProperty(r,
|
|
26
|
+
/******/ e.d = (r, t) => {
|
|
27
|
+
/******/ for (var a in t) {
|
|
28
|
+
/******/ if (e.o(t, a) && !e.o(r, a)) {
|
|
29
|
+
/******/ Object.defineProperty(r, a, {
|
|
30
30
|
enumerable: true,
|
|
31
|
-
get: a
|
|
31
|
+
get: t[a]
|
|
32
32
|
});
|
|
33
33
|
/******/ }
|
|
34
34
|
/******/ }
|
|
@@ -61,11 +61,11 @@
|
|
|
61
61
|
e.r(r);
|
|
62
62
|
// EXPORTS
|
|
63
63
|
e.d(r, {
|
|
64
|
-
default: () => /* reexport */
|
|
64
|
+
default: () => /* reexport */ ee
|
|
65
65
|
});
|
|
66
66
|
// CONCATENATED MODULE: external "react"
|
|
67
|
-
const
|
|
68
|
-
var
|
|
67
|
+
const t = require("react");
|
|
68
|
+
var a = e.n(t);
|
|
69
69
|
// CONCATENATED MODULE: external "prop-types"
|
|
70
70
|
const i = require("prop-types");
|
|
71
71
|
var o = e.n(i);
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
var e = (0, b.useSplunkTheme)(), r = e.family;
|
|
88
88
|
if (r === "enterprise") {
|
|
89
89
|
|
|
90
|
-
return
|
|
90
|
+
return a().createElement(u(), {
|
|
91
91
|
inline: false,
|
|
92
92
|
size: "12px",
|
|
93
93
|
screenReaderText: null,
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
});
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
return
|
|
101
|
+
return a().createElement("svg", {
|
|
102
102
|
width: "12",
|
|
103
103
|
height: "12",
|
|
104
104
|
viewBox: "-1 -2 11 10",
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
display: "block"
|
|
107
107
|
},
|
|
108
108
|
xmlns: "http://www.w3.org/2000/svg"
|
|
109
|
-
},
|
|
109
|
+
}, a().createElement("path", {
|
|
110
110
|
d: "M8.70711 0.292893C9.09763 0.683417 9.09763 1.31658 8.70711 1.70711L4.32132 6.0929C3.73559 6.67862 2.78596 6.67869 2.20015 6.09305L0.292997 4.18646C-0.0975845 3.79599 -0.0976776 3.16282 0.292789 2.77224C0.683256 2.38166 1.31642 2.38157 1.707 2.77203L3.26061 4.32518L7.29289 0.292893C7.68342 -0.0976311 8.31658 -0.0976311 8.70711 0.292893Z",
|
|
111
111
|
fill: "currentColor"
|
|
112
112
|
}));
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
var w = h()(m()).withConfig({
|
|
127
127
|
displayName: "SwitchStyles__StyledBox",
|
|
128
128
|
componentId: "sc-844ieu-0"
|
|
129
|
-
})([ "display:inline;position:relative;color:", ";flex-shrink:0;
|
|
129
|
+
})([ "display:inline;position:relative;color:", ";flex-shrink:0;", ";[data-inline] + &{margin-left:", ";}" ], (0,
|
|
130
130
|
b.pickVariant)("$switchState", {
|
|
131
131
|
error: {
|
|
132
132
|
enterprise: b.variables.errorColor,
|
|
@@ -137,25 +137,22 @@
|
|
|
137
137
|
prisma: b.variables.contentColorDisabled
|
|
138
138
|
}
|
|
139
139
|
}), (0, b.pick)({
|
|
140
|
-
enterprise: (0, f.css)([ "calc((", " - ", ") / 2) 0" ], b.variables.inputHeight, x),
|
|
140
|
+
enterprise: (0, f.css)([ "padding:calc((", " - ", ") / 2) 0;" ], b.variables.inputHeight, x),
|
|
141
141
|
prisma: {
|
|
142
|
-
compact: "6px 0",
|
|
143
|
-
comfortable: "10px 0"
|
|
142
|
+
compact: (0, f.css)([ "padding:6px 0;" ]),
|
|
143
|
+
comfortable: (0, f.css)([ "padding:10px 0;" ])
|
|
144
144
|
}
|
|
145
|
-
}),
|
|
146
|
-
|
|
147
|
-
prisma: b.variables.spacingSmall
|
|
148
|
-
}));
|
|
149
|
-
var S = h()(k()).withConfig({
|
|
150
|
-
displayName: "SwitchStyles__StyledCheckboxClickable",
|
|
151
|
-
componentId: "sc-844ieu-1"
|
|
152
|
-
})([ "", " position:relative;width:", ";height:", ";line-height:", ";padding:2px;border-radius:2px;cursor:pointer;flex:0 0 auto;border:", ";color:", ";", " &:focus{box-shadow:", ";}", " ", " &[disabled]{cursor:not-allowed;border-color:", ";", "}" ], b.mixins.reset("inline"), x, x, x, (0,
|
|
145
|
+
}), b.variables.spacingSmall);
|
|
146
|
+
var S = (0, f.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";padding:2px;border-radius:2px;cursor:pointer;flex:0 0 auto;border-color:", ";border-style:solid;border-width:", ";color:", ";", " &:focus{box-shadow:", ";}", " ", " &[disabled]{cursor:not-allowed;border-color:", ";", "}" ], b.mixins.reset("inline"), x, x, x, (0,
|
|
153
147
|
b.pick)({
|
|
154
148
|
enterprise: (0, b.pick)({
|
|
155
|
-
light:
|
|
156
|
-
dark:
|
|
149
|
+
light: b.variables.gray45,
|
|
150
|
+
dark: b.variables.gray80
|
|
157
151
|
}),
|
|
158
|
-
prisma:
|
|
152
|
+
prisma: b.variables.contentColorMuted
|
|
153
|
+
}), (0, b.pick)({
|
|
154
|
+
enterprise: "1px",
|
|
155
|
+
prisma: "2px"
|
|
159
156
|
}), (0, b.pick)({
|
|
160
157
|
enterprise: (0, b.pick)({
|
|
161
158
|
light: b.variables.gray45,
|
|
@@ -191,7 +188,7 @@
|
|
|
191
188
|
var r = e.$selected;
|
|
192
189
|
return r && (0, f.css)([ "border-color:", ";" ], b.variables.errorColor);
|
|
193
190
|
})),
|
|
194
|
-
dark: (0, f.css)([ "border-color:", ";
|
|
191
|
+
dark: (0, f.css)([ "border-color:", ";" ], b.variables.errorColor)
|
|
195
192
|
}),
|
|
196
193
|
prisma: (0, f.css)([ "&:not([disabled]){border-color:", ";", "}" ], b.variables.accentColorNegative, (function(e) {
|
|
197
194
|
var r = e.$selected;
|
|
@@ -210,24 +207,28 @@
|
|
|
210
207
|
prisma: (0, f.css)([ "border-color:transparent;background-color:", ";" ], b.variables.interactiveColorBackgroundDisabled)
|
|
211
208
|
});
|
|
212
209
|
}));
|
|
213
|
-
var O =
|
|
214
|
-
|
|
215
|
-
|
|
210
|
+
var O = h()(k()).withConfig({
|
|
211
|
+
displayName: "SwitchStyles__StyledCheckboxClickable",
|
|
212
|
+
componentId: "sc-844ieu-1"
|
|
213
|
+
})([ "", "" ], S);
|
|
214
|
+
var $ = h().span.withConfig({
|
|
215
|
+
displayName: "SwitchStyles__StyledCheckboxSpan",
|
|
216
216
|
componentId: "sc-844ieu-2"
|
|
217
|
-
})([ "
|
|
217
|
+
})([ "", "" ], S);
|
|
218
|
+
var _ = h().div.withConfig({
|
|
219
|
+
displayName: "SwitchStyles__StyledSome",
|
|
220
|
+
componentId: "sc-844ieu-3"
|
|
221
|
+
})([ "display:block;margin:", ";", " background:currentColor;border-radius:1px;" ], (0,
|
|
218
222
|
b.pick)({
|
|
219
223
|
enterprise: "2px",
|
|
220
224
|
prisma: "5px 2px"
|
|
221
225
|
}), (0, b.pick)({
|
|
222
|
-
enterprise: (0, f.css)([ "calc(", " - 10px);" ], x),
|
|
223
|
-
prisma: "2px"
|
|
224
|
-
}), (0, b.pick)({
|
|
225
|
-
enterprise: (0, f.css)([ "calc(", " - 10px);" ], x),
|
|
226
|
-
prisma: "8px"
|
|
226
|
+
enterprise: (0, f.css)([ "height:calc(", " - 10px);width:calc(", " - 10px);" ], x, x),
|
|
227
|
+
prisma: (0, f.css)([ "height:2px;width:8px;" ])
|
|
227
228
|
}));
|
|
228
|
-
var
|
|
229
|
+
var P = h().div.withConfig({
|
|
229
230
|
displayName: "SwitchStyles__StyledIndicator",
|
|
230
|
-
componentId: "sc-844ieu-
|
|
231
|
+
componentId: "sc-844ieu-4"
|
|
231
232
|
})([ "background-color:", ";border-color:", ";box-sizing:border-box;border-radius:50%;border-width:1px;position:absolute;left:-1px;top:-1px;", ";", " ", " ", "" ], (0,
|
|
232
233
|
b.pick)({
|
|
233
234
|
enterprise: {
|
|
@@ -264,20 +265,20 @@
|
|
|
264
265
|
}));
|
|
265
266
|
}), (function(e) {
|
|
266
267
|
var r = e.$selected;
|
|
267
|
-
return r && (0, f.css)([ "
|
|
268
|
-
enterprise: (0, f.css)([ "calc(100% - ", " + 1px)" ], x),
|
|
269
|
-
prisma: (0, f.css)([ "calc(100% - ", " + 1px)" ], C)
|
|
268
|
+
return r && (0, f.css)([ "", ";" ], (0, b.pick)({
|
|
269
|
+
enterprise: (0, f.css)([ "left:calc(100% - ", " + 1px);" ], x),
|
|
270
|
+
prisma: (0, f.css)([ "left:calc(100% - ", " + 1px);" ], C)
|
|
270
271
|
}));
|
|
271
272
|
}));
|
|
272
|
-
var
|
|
273
|
+
var E = h().div.withConfig({
|
|
273
274
|
displayName: "SwitchStyles__StyledToggleOutline",
|
|
274
|
-
componentId: "sc-844ieu-
|
|
275
|
-
})([ "position:absolute;border:1px solid transparent;", ";
|
|
275
|
+
componentId: "sc-844ieu-5"
|
|
276
|
+
})([ "position:absolute;border:1px solid transparent;", ";", ";top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:1;", " ", "" ], (function(e) {
|
|
276
277
|
var r = e.$delay;
|
|
277
278
|
return r && (0, f.css)([ "transition:border-color ", ";" ], r);
|
|
278
279
|
}), (0, b.pick)({
|
|
279
|
-
enterprise: (0, f.css)([ "calc(", " * 0.5)" ], x),
|
|
280
|
-
prisma: "15px"
|
|
280
|
+
enterprise: (0, f.css)([ "border-radius:calc(", " * 0.5);" ], x),
|
|
281
|
+
prisma: "border-radius: 15px"
|
|
281
282
|
}), (0, b.pick)({
|
|
282
283
|
prisma: (0, f.css)([ "margin:-6px;" ])
|
|
283
284
|
}), (function(e) {
|
|
@@ -287,10 +288,7 @@
|
|
|
287
288
|
prisma: b.variables.transparent
|
|
288
289
|
}));
|
|
289
290
|
}));
|
|
290
|
-
var
|
|
291
|
-
displayName: "SwitchStyles__StyledToggleClickable",
|
|
292
|
-
componentId: "sc-844ieu-5"
|
|
293
|
-
})([ "position:relative;", " border-radius:", ";transition:background-color ", ";flex:0 0 auto;border:1px solid ", ";", " &:not([disabled]){&:focus{outline:0;box-shadow:", ";", "}&:hover ", "{background-color:", ";}&:hover ", "{background-color:", ";}};&[disabled]{border:1px solid ", ";background-color:", ";", " ", "}", ";", "" ], (0,
|
|
291
|
+
var L = (0, f.css)([ "position:relative;", " border-radius:", ";transition:background-color ", ";flex:0 0 auto;border:1px solid ", ";", " &:not([disabled]){&:focus{outline:0;", ";", "}&:hover ", "{background-color:", ";}&:hover ", "{background-color:", ";}}&[disabled]{border:1px solid ", ";background-color:", ";", " ", "}", ";", "" ], (0,
|
|
294
292
|
b.pick)({
|
|
295
293
|
enterprise: (0, b.pick)({
|
|
296
294
|
light: (0, f.css)([ "width:calc(", " * 2);background-color:", ";height:", ";" ], x, b.variables.gray98, x),
|
|
@@ -308,15 +306,15 @@
|
|
|
308
306
|
}), (0, b.pick)({
|
|
309
307
|
enterprise: (0, f.css)([ "box-shadow:inset 0 2px 0 rgba(0,0,0,0.1);" ])
|
|
310
308
|
}), (0, b.pick)({
|
|
311
|
-
enterprise: (0, f.css)([ "", ",inset 0 2px 0 rgba(0,0,0,0.1);" ], b.variables.focusShadow),
|
|
312
|
-
prisma: b.variables.focusShadow
|
|
309
|
+
enterprise: (0, f.css)([ "box-shadow:", ",inset 0 2px 0 rgba(0,0,0,0.1);" ], b.variables.focusShadow),
|
|
310
|
+
prisma: (0, f.css)([ "box-shadow:", ";" ], b.variables.focusShadow)
|
|
313
311
|
}), (0, b.pick)({
|
|
314
312
|
enterprise: (0, f.css)([ "> ", "{border-color:", ";}" ],
|
|
315
313
|
/* sc-sel */
|
|
316
|
-
|
|
314
|
+
E, b.mixins.colorWithAlpha(b.variables.focusColor, .8))
|
|
317
315
|
}),
|
|
318
316
|
/* sc-sel */
|
|
319
|
-
|
|
317
|
+
P, (0, b.pick)({
|
|
320
318
|
enterprise: (0, b.pick)({
|
|
321
319
|
light: b.variables.gray96,
|
|
322
320
|
dark: "#b1bcc7"
|
|
@@ -324,7 +322,7 @@
|
|
|
324
322
|
prisma: b.variables.white
|
|
325
323
|
}),
|
|
326
324
|
/* sc-sel */
|
|
327
|
-
|
|
325
|
+
E, (0, b.pick)({
|
|
328
326
|
prisma: b.variables.interactiveColorOverlayHover
|
|
329
327
|
}), (0, b.pick)({
|
|
330
328
|
enterprise: {
|
|
@@ -370,93 +368,100 @@
|
|
|
370
368
|
prisma: (0, f.css)([ "background-color:", ";" ], b.variables.accentColorNegative)
|
|
371
369
|
}));
|
|
372
370
|
}));
|
|
373
|
-
var
|
|
374
|
-
|
|
375
|
-
displayName: "SwitchStyles__StyledLabel",
|
|
371
|
+
var j = h()(k()).withConfig({
|
|
372
|
+
displayName: "SwitchStyles__StyledToggleClickable",
|
|
376
373
|
componentId: "sc-844ieu-6"
|
|
374
|
+
})([ "", "" ], L);
|
|
375
|
+
var I = h().span.withConfig({
|
|
376
|
+
displayName: "SwitchStyles__StyledToggleSpan",
|
|
377
|
+
componentId: "sc-844ieu-7"
|
|
378
|
+
})([ "", "" ], L);
|
|
379
|
+
var D = h().label.withConfig({
|
|
380
|
+
displayName: "SwitchStyles__StyledLabel",
|
|
381
|
+
componentId: "sc-844ieu-8"
|
|
377
382
|
})([ "", " flex:1 1 auto;padding-left:", ";color:inherit;", ";" ], b.mixins.reset("inline-block"), (0,
|
|
378
383
|
b.pick)({
|
|
379
|
-
enterprise: (0, f.css)([ "", ";" ], b.variables.
|
|
384
|
+
enterprise: (0, f.css)([ "", ";" ], b.variables.spacingXSmall),
|
|
380
385
|
prisma: "8px"
|
|
381
386
|
}), (function(e) {
|
|
382
387
|
var r = e.$disabled;
|
|
383
388
|
return !r && (0, f.css)([ "cursor:pointer;" ]);
|
|
384
389
|
}));
|
|
385
390
|
// CONCATENATED MODULE: ./src/Switch/Switch.tsx
|
|
386
|
-
function
|
|
391
|
+
function q(e) {
|
|
387
392
|
"@babel/helpers - typeof";
|
|
388
393
|
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
389
|
-
|
|
394
|
+
q = function e(r) {
|
|
390
395
|
return typeof r;
|
|
391
396
|
};
|
|
392
397
|
} else {
|
|
393
|
-
|
|
398
|
+
q = function e(r) {
|
|
394
399
|
return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
|
|
395
400
|
};
|
|
396
401
|
}
|
|
397
|
-
return
|
|
402
|
+
return q(e);
|
|
398
403
|
}
|
|
399
|
-
function
|
|
400
|
-
|
|
404
|
+
function T() {
|
|
405
|
+
T = Object.assign || function(e) {
|
|
401
406
|
for (var r = 1; r < arguments.length; r++) {
|
|
402
|
-
var
|
|
403
|
-
for (var
|
|
404
|
-
if (Object.prototype.hasOwnProperty.call(
|
|
405
|
-
e[
|
|
407
|
+
var t = arguments[r];
|
|
408
|
+
for (var a in t) {
|
|
409
|
+
if (Object.prototype.hasOwnProperty.call(t, a)) {
|
|
410
|
+
e[a] = t[a];
|
|
406
411
|
}
|
|
407
412
|
}
|
|
408
413
|
}
|
|
409
414
|
return e;
|
|
410
415
|
};
|
|
411
|
-
return
|
|
416
|
+
return T.apply(this, arguments);
|
|
412
417
|
}
|
|
413
|
-
function
|
|
418
|
+
function N(e, r) {
|
|
414
419
|
if (e == null) return {};
|
|
415
|
-
var
|
|
416
|
-
var
|
|
420
|
+
var t = R(e, r);
|
|
421
|
+
var a, i;
|
|
417
422
|
if (Object.getOwnPropertySymbols) {
|
|
418
423
|
var o = Object.getOwnPropertySymbols(e);
|
|
419
424
|
for (i = 0; i < o.length; i++) {
|
|
420
|
-
|
|
421
|
-
if (r.indexOf(
|
|
422
|
-
if (!Object.prototype.propertyIsEnumerable.call(e,
|
|
423
|
-
a
|
|
425
|
+
a = o[i];
|
|
426
|
+
if (r.indexOf(a) >= 0) continue;
|
|
427
|
+
if (!Object.prototype.propertyIsEnumerable.call(e, a)) continue;
|
|
428
|
+
t[a] = e[a];
|
|
424
429
|
}
|
|
425
430
|
}
|
|
426
|
-
return
|
|
431
|
+
return t;
|
|
427
432
|
}
|
|
428
|
-
function
|
|
433
|
+
function R(e, r) {
|
|
429
434
|
if (e == null) return {};
|
|
430
|
-
var
|
|
431
|
-
var
|
|
435
|
+
var t = {};
|
|
436
|
+
var a = Object.keys(e);
|
|
432
437
|
var i, o;
|
|
433
|
-
for (o = 0; o <
|
|
434
|
-
i =
|
|
438
|
+
for (o = 0; o < a.length; o++) {
|
|
439
|
+
i = a[o];
|
|
435
440
|
if (r.indexOf(i) >= 0) continue;
|
|
436
|
-
|
|
441
|
+
t[i] = e[i];
|
|
437
442
|
}
|
|
438
|
-
return
|
|
443
|
+
return t;
|
|
439
444
|
}
|
|
440
|
-
function
|
|
445
|
+
function B(e, r) {
|
|
441
446
|
if (!(e instanceof r)) {
|
|
442
447
|
throw new TypeError("Cannot call a class as a function");
|
|
443
448
|
}
|
|
444
449
|
}
|
|
445
|
-
function
|
|
446
|
-
for (var
|
|
447
|
-
var
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
if ("value" in
|
|
451
|
-
Object.defineProperty(e,
|
|
450
|
+
function M(e, r) {
|
|
451
|
+
for (var t = 0; t < r.length; t++) {
|
|
452
|
+
var a = r[t];
|
|
453
|
+
a.enumerable = a.enumerable || false;
|
|
454
|
+
a.configurable = true;
|
|
455
|
+
if ("value" in a) a.writable = true;
|
|
456
|
+
Object.defineProperty(e, a.key, a);
|
|
452
457
|
}
|
|
453
458
|
}
|
|
454
|
-
function
|
|
455
|
-
if (r)
|
|
456
|
-
if (
|
|
459
|
+
function A(e, r, t) {
|
|
460
|
+
if (r) M(e.prototype, r);
|
|
461
|
+
if (t) M(e, t);
|
|
457
462
|
return e;
|
|
458
463
|
}
|
|
459
|
-
function
|
|
464
|
+
function W(e, r) {
|
|
460
465
|
if (typeof r !== "function" && r !== null) {
|
|
461
466
|
throw new TypeError("Super expression must either be null or a function");
|
|
462
467
|
}
|
|
@@ -467,41 +472,41 @@
|
|
|
467
472
|
configurable: true
|
|
468
473
|
}
|
|
469
474
|
});
|
|
470
|
-
if (r)
|
|
475
|
+
if (r) z(e, r);
|
|
471
476
|
}
|
|
472
|
-
function
|
|
473
|
-
|
|
474
|
-
r.__proto__ =
|
|
477
|
+
function z(e, r) {
|
|
478
|
+
z = Object.setPrototypeOf || function e(r, t) {
|
|
479
|
+
r.__proto__ = t;
|
|
475
480
|
return r;
|
|
476
481
|
};
|
|
477
|
-
return
|
|
482
|
+
return z(e, r);
|
|
478
483
|
}
|
|
479
|
-
function
|
|
480
|
-
var r =
|
|
481
|
-
return function
|
|
482
|
-
var
|
|
484
|
+
function F(e) {
|
|
485
|
+
var r = V();
|
|
486
|
+
return function t() {
|
|
487
|
+
var a = X(e), i;
|
|
483
488
|
if (r) {
|
|
484
|
-
var o =
|
|
485
|
-
i = Reflect.construct(
|
|
489
|
+
var o = X(this).constructor;
|
|
490
|
+
i = Reflect.construct(a, arguments, o);
|
|
486
491
|
} else {
|
|
487
|
-
i =
|
|
492
|
+
i = a.apply(this, arguments);
|
|
488
493
|
}
|
|
489
|
-
return
|
|
494
|
+
return H(this, i);
|
|
490
495
|
};
|
|
491
496
|
}
|
|
492
|
-
function
|
|
493
|
-
if (r && (
|
|
497
|
+
function H(e, r) {
|
|
498
|
+
if (r && (q(r) === "object" || typeof r === "function")) {
|
|
494
499
|
return r;
|
|
495
500
|
}
|
|
496
|
-
return
|
|
501
|
+
return U(e);
|
|
497
502
|
}
|
|
498
|
-
function
|
|
503
|
+
function U(e) {
|
|
499
504
|
if (e === void 0) {
|
|
500
505
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
501
506
|
}
|
|
502
507
|
return e;
|
|
503
508
|
}
|
|
504
|
-
function
|
|
509
|
+
function V() {
|
|
505
510
|
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
|
506
511
|
if (Reflect.construct.sham) return false;
|
|
507
512
|
if (typeof Proxy === "function") return true;
|
|
@@ -512,26 +517,26 @@
|
|
|
512
517
|
return false;
|
|
513
518
|
}
|
|
514
519
|
}
|
|
515
|
-
function
|
|
516
|
-
|
|
520
|
+
function X(e) {
|
|
521
|
+
X = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
|
|
517
522
|
return r.__proto__ || Object.getPrototypeOf(r);
|
|
518
523
|
};
|
|
519
|
-
return
|
|
524
|
+
return X(e);
|
|
520
525
|
}
|
|
521
|
-
function
|
|
526
|
+
function Z(e, r, t) {
|
|
522
527
|
if (r in e) {
|
|
523
528
|
Object.defineProperty(e, r, {
|
|
524
|
-
value:
|
|
529
|
+
value: t,
|
|
525
530
|
enumerable: true,
|
|
526
531
|
configurable: true,
|
|
527
532
|
writable: true
|
|
528
533
|
});
|
|
529
534
|
} else {
|
|
530
|
-
e[r] =
|
|
535
|
+
e[r] = t;
|
|
531
536
|
}
|
|
532
537
|
return e;
|
|
533
538
|
}
|
|
534
|
-
var
|
|
539
|
+
var G = {
|
|
535
540
|
appearance: o().oneOf([ "checkbox", "toggle" ]),
|
|
536
541
|
children: o().node,
|
|
537
542
|
disabled: o().bool,
|
|
@@ -551,7 +556,7 @@
|
|
|
551
556
|
unselectedLabel: o().string,
|
|
552
557
|
value: o().any
|
|
553
558
|
};
|
|
554
|
-
var
|
|
559
|
+
var J = {
|
|
555
560
|
appearance: "checkbox",
|
|
556
561
|
disabled: false,
|
|
557
562
|
error: false,
|
|
@@ -560,50 +565,50 @@
|
|
|
560
565
|
selected: false
|
|
561
566
|
};
|
|
562
567
|
// unclear why the manual ref is needed here (only for styled-components)
|
|
563
|
-
var
|
|
564
|
-
checkbox: S,
|
|
565
|
-
toggle: E
|
|
566
|
-
};
|
|
567
|
-
var J = {
|
|
568
|
+
var K = {
|
|
568
569
|
checkbox: O,
|
|
569
|
-
toggle:
|
|
570
|
+
toggle: j
|
|
571
|
+
};
|
|
572
|
+
var Q = {
|
|
573
|
+
checkbox: $,
|
|
574
|
+
toggle: I
|
|
570
575
|
};
|
|
571
576
|
/**
|
|
572
577
|
* `Switch` is a basic form control with an on/off state.
|
|
573
|
-
*/ var
|
|
574
|
-
|
|
575
|
-
var r =
|
|
576
|
-
|
|
578
|
+
*/ var Y = function(e) {
|
|
579
|
+
W(t, e);
|
|
580
|
+
var r = F(t);
|
|
581
|
+
A(t, null, [ {
|
|
577
582
|
key: "validateProps",
|
|
578
583
|
// @docs-props-type SwitchPropsBase
|
|
579
584
|
value: function e(r) {
|
|
580
|
-
var
|
|
585
|
+
var t = r.selected, a = r.appearance;
|
|
581
586
|
if (false) {}
|
|
582
587
|
}
|
|
583
588
|
} ]);
|
|
584
|
-
function
|
|
585
|
-
var
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
U(
|
|
589
|
-
U(
|
|
590
|
-
U(
|
|
591
|
-
U(
|
|
592
|
-
U(
|
|
593
|
-
var r,
|
|
594
|
-
var i =
|
|
595
|
-
(r = (
|
|
589
|
+
function t(e) {
|
|
590
|
+
var a;
|
|
591
|
+
B(this, t);
|
|
592
|
+
a = r.call(this, e);
|
|
593
|
+
Z(U(a), "clickableId", void 0);
|
|
594
|
+
Z(U(a), "labelId", void 0);
|
|
595
|
+
Z(U(a), "toggle", null);
|
|
596
|
+
Z(U(a), "componentDidUpdate", t.validateProps);
|
|
597
|
+
Z(U(a), "handleContainerClick", (function(e) {
|
|
598
|
+
var r, t;
|
|
599
|
+
var i = a.props, o = i.value, n = i.selected;
|
|
600
|
+
(r = (t = a.props).onClick) === null || r === void 0 ? void 0 : r.call(t, e, {
|
|
596
601
|
value: o,
|
|
597
602
|
// @ts-expect-error - safe due to individual prop interfaces
|
|
598
603
|
selected: n
|
|
599
604
|
});
|
|
600
605
|
}));
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
return
|
|
606
|
+
a.labelId = (0, d.createDOMID)("label");
|
|
607
|
+
a.clickableId = (0, d.createDOMID)("clickable");
|
|
608
|
+
t.validateProps(e);
|
|
609
|
+
return a;
|
|
605
610
|
}
|
|
606
|
-
|
|
611
|
+
A(t, [ {
|
|
607
612
|
key: "focus",
|
|
608
613
|
/**
|
|
609
614
|
* Place focus on the toggle.
|
|
@@ -616,100 +621,101 @@
|
|
|
616
621
|
key: "render",
|
|
617
622
|
value: function e() {
|
|
618
623
|
var r = this;
|
|
619
|
-
var
|
|
620
|
-
var
|
|
624
|
+
var t = this.props, i = t.appearance, o = t.children, n = t.disabled, s = t.elementRef, d = t.error, p = t.id, u = t.inline, b = t.interactive, f = t.labelledBy, h = t.onClick, g = t.required, m = t.selected, y = t.selectedLabel, k = t.someSelectedLabel, x = t.unselectedLabel, C = t.value, S = N(t, [ "appearance", "children", "disabled", "elementRef", "error", "id", "inline", "interactive", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "unselectedLabel", "value" ]);
|
|
625
|
+
var O = f;
|
|
621
626
|
// consumer defined external label
|
|
622
|
-
var
|
|
627
|
+
var $ = p;
|
|
623
628
|
// consumer defined id
|
|
624
629
|
// if has internal label defined with children....
|
|
625
630
|
if (o) {
|
|
626
|
-
|
|
631
|
+
O = this.labelId;
|
|
627
632
|
// must use generated labelId
|
|
628
|
-
|
|
633
|
+
$ = p || this.clickableId;
|
|
629
634
|
// must have an id
|
|
630
635
|
}
|
|
631
|
-
var
|
|
632
|
-
var
|
|
633
|
-
true:
|
|
634
|
-
false:
|
|
635
|
-
some:
|
|
636
|
+
var L = m === "some" ? "mixed" : m;
|
|
637
|
+
var j = {
|
|
638
|
+
true: y,
|
|
639
|
+
false: x,
|
|
640
|
+
some: k
|
|
636
641
|
};
|
|
637
642
|
var I = {
|
|
638
643
|
disabled: n,
|
|
639
|
-
$interactive:
|
|
640
|
-
$error:
|
|
641
|
-
$selected:
|
|
642
|
-
"aria-labelledby":
|
|
643
|
-
"aria-checked":
|
|
644
|
-
"aria-invalid":
|
|
645
|
-
"aria-required":
|
|
646
|
-
id:
|
|
647
|
-
ref: function e(
|
|
648
|
-
r.toggle =
|
|
644
|
+
$interactive: b,
|
|
645
|
+
$error: d,
|
|
646
|
+
$selected: m === "some" || m,
|
|
647
|
+
"aria-labelledby": b ? O : undefined,
|
|
648
|
+
"aria-checked": b ? L : undefined,
|
|
649
|
+
"aria-invalid": d ? true : undefined,
|
|
650
|
+
"aria-required": g,
|
|
651
|
+
id: $,
|
|
652
|
+
ref: function e(t) {
|
|
653
|
+
r.toggle = t;
|
|
649
654
|
},
|
|
650
|
-
onClick: n || !
|
|
655
|
+
onClick: n || !b ? undefined : this.handleContainerClick,
|
|
651
656
|
"data-test": "button",
|
|
652
|
-
"data-selected":
|
|
657
|
+
"data-selected": m
|
|
653
658
|
};
|
|
654
|
-
var
|
|
655
|
-
var
|
|
656
|
-
var
|
|
659
|
+
var q = K[i];
|
|
660
|
+
var R = Q[i];
|
|
661
|
+
var B = function e(r) {
|
|
657
662
|
return function() {
|
|
658
|
-
var e =
|
|
663
|
+
var e = a().createElement(a().Fragment, null, a().createElement(P, {
|
|
659
664
|
$delay: r,
|
|
660
665
|
$disabled: n,
|
|
661
|
-
$error: !n &&
|
|
662
|
-
$selected:
|
|
663
|
-
}),
|
|
666
|
+
$error: !n && d,
|
|
667
|
+
$selected: m
|
|
668
|
+
}), a().createElement(E, {
|
|
664
669
|
$delay: r,
|
|
665
|
-
$error: !n &&
|
|
670
|
+
$error: !n && d
|
|
666
671
|
}));
|
|
667
|
-
return
|
|
672
|
+
return b ? a().createElement(q, T({
|
|
668
673
|
role: "switch"
|
|
669
674
|
}, I, {
|
|
670
675
|
$delay: r
|
|
671
|
-
}), e) :
|
|
676
|
+
}), e) : a().createElement(R, T({}, I, {
|
|
672
677
|
$delay: r
|
|
673
678
|
}), e);
|
|
674
679
|
};
|
|
675
680
|
};
|
|
676
|
-
var
|
|
677
|
-
var r =
|
|
678
|
-
return
|
|
681
|
+
var M = function e() {
|
|
682
|
+
var r = a().createElement(a().Fragment, null, m === true && i === "checkbox" && a().createElement(v, null), m === "some" && i === "checkbox" && a().createElement(_, null));
|
|
683
|
+
return b ? a().createElement(q, T({
|
|
679
684
|
"data-clickable": true,
|
|
680
685
|
role: i
|
|
681
|
-
}, I), r) :
|
|
686
|
+
}, I), r) : a().createElement(R, I, r);
|
|
682
687
|
};
|
|
683
|
-
var
|
|
684
|
-
var
|
|
688
|
+
var A = n && "disabled" || d && "error" || null;
|
|
689
|
+
var W = !!y || !!k || !!x;
|
|
685
690
|
|
|
686
|
-
return
|
|
691
|
+
return a().createElement(w, T({
|
|
687
692
|
flex: true,
|
|
688
|
-
inline:
|
|
693
|
+
inline: u,
|
|
689
694
|
"data-test": "switch",
|
|
690
|
-
"data-test-selected":
|
|
691
|
-
"data-test-value":
|
|
692
|
-
"data-test-error":
|
|
693
|
-
"data-error":
|
|
695
|
+
"data-test-selected": m,
|
|
696
|
+
"data-test-value": C,
|
|
697
|
+
"data-test-error": d ? true : undefined,
|
|
698
|
+
"data-error": d ? true : undefined,
|
|
694
699
|
"data-disabled": n ? true : undefined,
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
+
elementRef: s,
|
|
701
|
+
$switchState: A
|
|
702
|
+
}, S), i === "toggle" && a().createElement(l(), {
|
|
703
|
+
on: B("200ms"),
|
|
704
|
+
off: B()
|
|
705
|
+
}), i !== "toggle" && M(), b && W && a().createElement(c(), null, j["".concat(m)]), o && a().createElement(D, {
|
|
700
706
|
$disabled: n,
|
|
701
707
|
"data-test": "label",
|
|
702
|
-
id:
|
|
703
|
-
htmlFor:
|
|
708
|
+
id: O,
|
|
709
|
+
htmlFor: $,
|
|
704
710
|
"data-disabled": n || null
|
|
705
711
|
}, o));
|
|
706
712
|
}
|
|
707
713
|
} ]);
|
|
708
|
-
return
|
|
709
|
-
}(
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
/* harmony default export */ const
|
|
714
|
+
return t;
|
|
715
|
+
}(t.Component);
|
|
716
|
+
Z(Y, "propTypes", G);
|
|
717
|
+
Z(Y, "defaultProps", J);
|
|
718
|
+
/* harmony default export */ const ee = Y;
|
|
713
719
|
// CONCATENATED MODULE: ./src/Switch/index.ts
|
|
714
720
|
module.exports = r;
|
|
715
721
|
/******/})();
|