@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.
Files changed (80) hide show
  1. package/Breadcrumbs.js +20 -29
  2. package/Button.js +20 -23
  3. package/ButtonGroup.js +20 -23
  4. package/ButtonSimple.js +33 -34
  5. package/CHANGELOG.md +56 -1
  6. package/Card.js +129 -113
  7. package/Chip.js +75 -82
  8. package/CollapsiblePanel.js +281 -264
  9. package/Color.js +103 -93
  10. package/ComboBox.js +3 -2
  11. package/Concertina.js +139 -138
  12. package/ControlGroup.js +43 -39
  13. package/DualListbox.js +8 -11
  14. package/File.js +25 -30
  15. package/FormRows.js +53 -53
  16. package/Image.js +13 -13
  17. package/JSONTree.js +87 -85
  18. package/List.js +9 -13
  19. package/MIGRATION.mdx +100 -0
  20. package/Markdown.js +12 -12
  21. package/Menu.js +492 -699
  22. package/Message.js +192 -194
  23. package/MessageBar.js +104 -104
  24. package/Modal.js +2 -2
  25. package/Monogram.js +140 -94
  26. package/Multiselect.js +45 -49
  27. package/Paginator.js +8 -8
  28. package/Popover.js +53 -54
  29. package/Progress.js +45 -46
  30. package/RadioBar.js +117 -115
  31. package/RadioList.js +8 -5
  32. package/ResultsMenu.js +272 -279
  33. package/Search.js +197 -199
  34. package/Select.js +86 -84
  35. package/Slider.js +9 -9
  36. package/SplitButton.js +1 -4
  37. package/StaticContent.js +1 -1
  38. package/StepBar.js +92 -88
  39. package/Switch.js +217 -211
  40. package/TabBar.js +13 -5
  41. package/Table.js +714 -717
  42. package/Text.js +94 -83
  43. package/TextArea.js +162 -163
  44. package/Tooltip.js +1 -1
  45. package/package.json +8 -8
  46. package/stubs-splunkui.d.ts +11 -0
  47. package/types/src/Breadcrumbs/Breadcrumbs.d.ts +0 -1
  48. package/types/src/Breadcrumbs/Item.d.ts +0 -1
  49. package/types/src/Card/Card.d.ts +3 -1
  50. package/types/src/Card/Header.d.ts +22 -5
  51. package/types/src/Chip/Chip.d.ts +2 -4
  52. package/types/src/CollapsiblePanel/CollapsiblePanel.d.ts +5 -0
  53. package/types/src/CollapsiblePanel/icons/ExpandPanel.d.ts +1 -3
  54. package/types/src/Color/Color.d.ts +5 -5
  55. package/types/src/ComboBox/Option.d.ts +0 -1
  56. package/types/src/List/List.d.ts +2 -4
  57. package/types/src/Menu/Heading.d.ts +1 -1
  58. package/types/src/Menu/Item.d.ts +10 -5
  59. package/types/src/Menu/Menu.d.ts +18 -26
  60. package/types/src/Menu/MenuContext.d.ts +3 -2
  61. package/types/src/Menu/docs/examples/Dimmed.d.ts +2 -0
  62. package/types/src/Monogram/Monogram.d.ts +5 -6
  63. package/types/src/Multiselect/Option.d.ts +0 -1
  64. package/types/src/Progress/Progress.d.ts +4 -1
  65. package/types/src/RadioBar/Option.d.ts +4 -1
  66. package/types/src/RadioBar/RadioBar.d.ts +6 -4
  67. package/types/src/RadioBar/docs/examples/MenuBar.d.ts +2 -0
  68. package/types/src/ResultsMenu/ResultsMenu.d.ts +13 -28
  69. package/types/src/ResultsMenu/VirtualizedResultsMenu/VirtualizedResultsMenu.d.ts +3 -5
  70. package/types/src/Search/Option.d.ts +19 -6
  71. package/types/src/Search/docs/examples/OptionsLinks.d.ts +2 -0
  72. package/types/src/Select/Option.d.ts +0 -1
  73. package/types/src/Select/OptionBase.d.ts +2 -3
  74. package/types/src/Select/Select.d.ts +2 -2
  75. package/types/src/Select/SelectBase.d.ts +2 -2
  76. package/types/src/Table/Body.d.ts +0 -4
  77. package/types/src/Table/DragHandle.d.ts +1 -2
  78. package/types/src/Text/Text.d.ts +2 -0
  79. package/useRovingFocus.js +26 -40
  80. 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 a = r && r.__esModule ?
12
+ /******/ var t = r && r.__esModule ?
13
13
  /******/ () => r["default"]
14
14
  /******/ : () => r
15
15
  /******/;
16
- e.d(a, {
17
- a
16
+ e.d(t, {
17
+ a: t
18
18
  });
19
- /******/ return a;
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, a) => {
27
- /******/ for (var t in a) {
28
- /******/ if (e.o(a, t) && !e.o(r, t)) {
29
- /******/ Object.defineProperty(r, t, {
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[t]
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 */ X
64
+ default: () => /* reexport */ ee
65
65
  });
66
66
  // CONCATENATED MODULE: external "react"
67
- const a = require("react");
68
- var t = e.n(a);
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 t().createElement(u(), {
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 t().createElement("svg", {
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
- }, t().createElement("path", {
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;padding:", ";[data-inline] + &{margin-left:", ";}" ], (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
- }), (0, b.pick)({
146
- enterprise: b.variables.spacingHalf,
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: (0, f.css)([ "1px solid ", "" ], b.variables.gray45),
156
- dark: (0, f.css)([ "1px solid ", "" ], b.variables.gray80)
149
+ light: b.variables.gray45,
150
+ dark: b.variables.gray80
157
151
  }),
158
- prisma: (0, f.css)([ "2px solid ", "" ], b.variables.contentColorMuted)
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:", ";}" ], b.variables.errorColor)
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 = S.withComponent("span");
214
- var $ = h().div.withConfig({
215
- displayName: "SwitchStyles__StyledSome",
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
- })([ "display:block;margin:", ";height:", ";width:", ";background:currentColor;border-radius:1px;" ], (0,
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 _ = h().div.withConfig({
229
+ var P = h().div.withConfig({
229
230
  displayName: "SwitchStyles__StyledIndicator",
230
- componentId: "sc-844ieu-3"
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)([ "left:", ";" ], (0, b.pick)({
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 P = h().div.withConfig({
273
+ var E = h().div.withConfig({
273
274
  displayName: "SwitchStyles__StyledToggleOutline",
274
- componentId: "sc-844ieu-4"
275
- })([ "position:absolute;border:1px solid transparent;", ";border-radius:", ";top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:1;", " ", "" ], (function(e) {
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 E = h()(k()).withConfig({
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
- P, b.mixins.colorWithAlpha(b.variables.focusColor, .8))
314
+ E, b.mixins.colorWithAlpha(b.variables.focusColor, .8))
317
315
  }),
318
316
  /* sc-sel */
319
- _, (0, b.pick)({
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
- P, (0, b.pick)({
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 L = E.withComponent("span");
374
- var j = h().label.withConfig({
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.spacingQuarter),
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 I(e) {
391
+ function q(e) {
387
392
  "@babel/helpers - typeof";
388
393
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
389
- I = function e(r) {
394
+ q = function e(r) {
390
395
  return typeof r;
391
396
  };
392
397
  } else {
393
- I = function e(r) {
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 I(e);
402
+ return q(e);
398
403
  }
399
- function D() {
400
- D = Object.assign || function(e) {
404
+ function T() {
405
+ T = Object.assign || function(e) {
401
406
  for (var r = 1; r < arguments.length; r++) {
402
- var a = arguments[r];
403
- for (var t in a) {
404
- if (Object.prototype.hasOwnProperty.call(a, t)) {
405
- e[t] = a[t];
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 D.apply(this, arguments);
416
+ return T.apply(this, arguments);
412
417
  }
413
- function q(e, r) {
418
+ function N(e, r) {
414
419
  if (e == null) return {};
415
- var a = T(e, r);
416
- var t, i;
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
- t = o[i];
421
- if (r.indexOf(t) >= 0) continue;
422
- if (!Object.prototype.propertyIsEnumerable.call(e, t)) continue;
423
- a[t] = e[t];
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 a;
431
+ return t;
427
432
  }
428
- function T(e, r) {
433
+ function R(e, r) {
429
434
  if (e == null) return {};
430
- var a = {};
431
- var t = Object.keys(e);
435
+ var t = {};
436
+ var a = Object.keys(e);
432
437
  var i, o;
433
- for (o = 0; o < t.length; o++) {
434
- i = t[o];
438
+ for (o = 0; o < a.length; o++) {
439
+ i = a[o];
435
440
  if (r.indexOf(i) >= 0) continue;
436
- a[i] = e[i];
441
+ t[i] = e[i];
437
442
  }
438
- return a;
443
+ return t;
439
444
  }
440
- function N(e, r) {
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 R(e, r) {
446
- for (var a = 0; a < r.length; a++) {
447
- var t = r[a];
448
- t.enumerable = t.enumerable || false;
449
- t.configurable = true;
450
- if ("value" in t) t.writable = true;
451
- Object.defineProperty(e, t.key, t);
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 B(e, r, a) {
455
- if (r) R(e.prototype, r);
456
- if (a) R(e, a);
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 M(e, r) {
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) A(e, r);
475
+ if (r) z(e, r);
471
476
  }
472
- function A(e, r) {
473
- A = Object.setPrototypeOf || function e(r, a) {
474
- r.__proto__ = a;
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 A(e, r);
482
+ return z(e, r);
478
483
  }
479
- function H(e) {
480
- var r = F();
481
- return function a() {
482
- var t = Q(e), i;
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 = Q(this).constructor;
485
- i = Reflect.construct(t, arguments, o);
489
+ var o = X(this).constructor;
490
+ i = Reflect.construct(a, arguments, o);
486
491
  } else {
487
- i = t.apply(this, arguments);
492
+ i = a.apply(this, arguments);
488
493
  }
489
- return W(this, i);
494
+ return H(this, i);
490
495
  };
491
496
  }
492
- function W(e, r) {
493
- if (r && (I(r) === "object" || typeof r === "function")) {
497
+ function H(e, r) {
498
+ if (r && (q(r) === "object" || typeof r === "function")) {
494
499
  return r;
495
500
  }
496
- return z(e);
501
+ return U(e);
497
502
  }
498
- function z(e) {
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 F() {
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 Q(e) {
516
- Q = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
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 Q(e);
524
+ return X(e);
520
525
  }
521
- function U(e, r, a) {
526
+ function Z(e, r, t) {
522
527
  if (r in e) {
523
528
  Object.defineProperty(e, r, {
524
- value: a,
529
+ value: t,
525
530
  enumerable: true,
526
531
  configurable: true,
527
532
  writable: true
528
533
  });
529
534
  } else {
530
- e[r] = a;
535
+ e[r] = t;
531
536
  }
532
537
  return e;
533
538
  }
534
- var V = {
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 Z = {
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 G = {
564
- checkbox: S,
565
- toggle: E
566
- };
567
- var J = {
568
+ var K = {
568
569
  checkbox: O,
569
- toggle: L
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 K = function(e) {
574
- M(a, e);
575
- var r = H(a);
576
- B(a, null, [ {
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 a = r.selected, t = r.appearance;
585
+ var t = r.selected, a = r.appearance;
581
586
  if (false) {}
582
587
  }
583
588
  } ]);
584
- function a(e) {
585
- var t;
586
- N(this, a);
587
- t = r.call(this, e);
588
- U(z(t), "clickableId", void 0);
589
- U(z(t), "labelId", void 0);
590
- U(z(t), "toggle", null);
591
- U(z(t), "componentDidUpdate", a.validateProps);
592
- U(z(t), "handleContainerClick", (function(e) {
593
- var r, a;
594
- var i = t.props, o = i.value, n = i.selected;
595
- (r = (a = t.props).onClick) === null || r === void 0 ? void 0 : r.call(a, e, {
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
- t.labelId = (0, d.createDOMID)("label");
602
- t.clickableId = (0, d.createDOMID)("clickable");
603
- a.validateProps(e);
604
- return t;
606
+ a.labelId = (0, d.createDOMID)("label");
607
+ a.clickableId = (0, d.createDOMID)("clickable");
608
+ t.validateProps(e);
609
+ return a;
605
610
  }
606
- B(a, [ {
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 a = this.props, i = a.appearance, o = a.children, n = a.disabled, s = a.error, d = a.id, p = a.inline, u = a.interactive, b = a.labelledBy, f = a.onClick, h = a.required, g = a.selected, m = a.selectedLabel, y = a.someSelectedLabel, k = a.unselectedLabel, x = a.value, C = q(a, [ "appearance", "children", "disabled", "error", "id", "inline", "interactive", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "unselectedLabel", "value" ]);
620
- var S = b;
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 O = d;
627
+ var $ = p;
623
628
  // consumer defined id
624
629
  // if has internal label defined with children....
625
630
  if (o) {
626
- S = this.labelId;
631
+ O = this.labelId;
627
632
  // must use generated labelId
628
- O = d || this.clickableId;
633
+ $ = p || this.clickableId;
629
634
  // must have an id
630
635
  }
631
- var E = g === "some" ? "mixed" : g;
632
- var L = {
633
- true: m,
634
- false: k,
635
- some: y
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: u,
640
- $error: s,
641
- $selected: g === "some" || g,
642
- "aria-labelledby": u ? S : undefined,
643
- "aria-checked": u ? E : undefined,
644
- "aria-invalid": s ? true : undefined,
645
- "aria-required": h,
646
- id: O,
647
- ref: function e(a) {
648
- r.toggle = a;
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 || !u ? undefined : this.handleContainerClick,
655
+ onClick: n || !b ? undefined : this.handleContainerClick,
651
656
  "data-test": "button",
652
- "data-selected": g
657
+ "data-selected": m
653
658
  };
654
- var T = G[i];
655
- var N = J[i];
656
- var R = function e(r) {
659
+ var q = K[i];
660
+ var R = Q[i];
661
+ var B = function e(r) {
657
662
  return function() {
658
- var e = t().createElement(t().Fragment, null, t().createElement(_, {
663
+ var e = a().createElement(a().Fragment, null, a().createElement(P, {
659
664
  $delay: r,
660
665
  $disabled: n,
661
- $error: !n && s,
662
- $selected: g
663
- }), t().createElement(P, {
666
+ $error: !n && d,
667
+ $selected: m
668
+ }), a().createElement(E, {
664
669
  $delay: r,
665
- $error: !n && s
670
+ $error: !n && d
666
671
  }));
667
- return u ? t().createElement(T, D({
672
+ return b ? a().createElement(q, T({
668
673
  role: "switch"
669
674
  }, I, {
670
675
  $delay: r
671
- }), e) : t().createElement(N, D({}, I, {
676
+ }), e) : a().createElement(R, T({}, I, {
672
677
  $delay: r
673
678
  }), e);
674
679
  };
675
680
  };
676
- var B = function e() {
677
- var r = t().createElement(t().Fragment, null, g === true && i === "checkbox" && t().createElement(v, null), g === "some" && i === "checkbox" && t().createElement($, null));
678
- return u ? t().createElement(T, D({
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) : t().createElement(N, I, r);
686
+ }, I), r) : a().createElement(R, I, r);
682
687
  };
683
- var M = n && "disabled" || s && "error" || null;
684
- var A = !!m || !!y || !!k;
688
+ var A = n && "disabled" || d && "error" || null;
689
+ var W = !!y || !!k || !!x;
685
690
 
686
- return t().createElement(w, D({
691
+ return a().createElement(w, T({
687
692
  flex: true,
688
- inline: p,
693
+ inline: u,
689
694
  "data-test": "switch",
690
- "data-test-selected": g,
691
- "data-test-value": x,
692
- "data-test-error": s ? true : undefined,
693
- "data-error": s ? true : undefined,
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
- $switchState: M
696
- }, C), i === "toggle" && t().createElement(l(), {
697
- on: R("200ms"),
698
- off: R()
699
- }), i !== "toggle" && B(), u && A && t().createElement(c(), null, L["".concat(g)]), o && t().createElement(j, {
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: S,
703
- htmlFor: O,
708
+ id: O,
709
+ htmlFor: $,
704
710
  "data-disabled": n || null
705
711
  }, o));
706
712
  }
707
713
  } ]);
708
- return a;
709
- }(a.Component);
710
- U(K, "propTypes", V);
711
- U(K, "defaultProps", Z);
712
- /* harmony default export */ const X = K;
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
  /******/})();