@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.
Files changed (88) hide show
  1. package/Button.js +3 -1
  2. package/ButtonSimple.js +92 -168
  3. package/CHANGELOG.md +4 -1
  4. package/CHANGELOG.v5.mdx +59 -0
  5. package/Card.js +29 -28
  6. package/Chip.js +171 -225
  7. package/Clickable.js +79 -76
  8. package/CollapsiblePanel.js +172 -164
  9. package/Color.js +584 -506
  10. package/ComboBox.js +1 -1
  11. package/ControlGroup.js +132 -127
  12. package/Date.js +163 -198
  13. package/Dropdown.js +97 -99
  14. package/DualListbox.js +439 -504
  15. package/File.js +449 -324
  16. package/FormRows.js +177 -175
  17. package/JSONTree.js +586 -617
  18. package/Layer.js +162 -97
  19. package/Link.js +20 -13
  20. package/MIGRATION.v5.mdx +98 -0
  21. package/Markdown.js +1 -1
  22. package/Menu.js +194 -195
  23. package/Message.js +119 -141
  24. package/MessageBar.js +109 -168
  25. package/ModalLayer.js +171 -217
  26. package/Multiselect.js +595 -602
  27. package/Number.js +103 -102
  28. package/Popover.js +195 -190
  29. package/Progress.js +68 -54
  30. package/RadioBar.js +146 -145
  31. package/RadioList.js +67 -65
  32. package/Resize.js +377 -265
  33. package/ResultsMenu.js +573 -663
  34. package/ScrollContainerContext.js +13 -9
  35. package/Search.js +50 -50
  36. package/Select.js +206 -199
  37. package/Slider.js +454 -329
  38. package/StepBar.js +2 -2
  39. package/Switch.js +220 -146
  40. package/TabBar.js +411 -409
  41. package/TabLayout.js +34 -34
  42. package/Table.js +1163 -1156
  43. package/Text.js +58 -58
  44. package/TextArea.js +278 -152
  45. package/Tooltip.js +173 -177
  46. package/Tree.js +177 -188
  47. package/Typography.js +30 -28
  48. package/WaitSpinner.js +6 -11
  49. package/cypress/support/commands.ts +14 -4
  50. package/cypress/support/index.d.ts +1 -1
  51. package/package.json +5 -5
  52. package/stubs-splunkui.d.ts +0 -4
  53. package/types/src/Card/Card.d.ts +3 -1
  54. package/types/src/Card/Header.d.ts +2 -0
  55. package/types/src/Card/docs/examples/HeadingTitle.d.ts +3 -0
  56. package/types/src/Clickable/Clickable.d.ts +11 -3
  57. package/types/src/Color/Color.d.ts +2 -2
  58. package/types/src/Layer/Layer.d.ts +2 -1
  59. package/types/src/Layer/index.d.ts +1 -0
  60. package/types/src/Link/Link.d.ts +4 -0
  61. package/types/src/Message/Message.d.ts +1 -1
  62. package/types/src/MessageBar/MessageBar.d.ts +1 -1
  63. package/types/src/ModalLayer/ModalLayer.d.ts +16 -21
  64. package/types/src/Multiselect/Multiselect.d.ts +1 -8
  65. package/types/src/Multiselect/Normal.d.ts +1 -7
  66. package/types/src/Multiselect/docs/examples/Children.d.ts +2 -9
  67. package/types/src/Multiselect/docs/examples/Controlled.d.ts +2 -9
  68. package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts +2 -9
  69. package/types/src/Multiselect/docs/examples/Disabled.d.ts +2 -9
  70. package/types/src/Multiselect/docs/examples/Error.d.ts +2 -9
  71. package/types/src/Multiselect/docs/examples/Fetching.d.ts +2 -22
  72. package/types/src/Multiselect/docs/examples/Headings.d.ts +2 -1
  73. package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts +2 -25
  74. package/types/src/Multiselect/docs/examples/NewValues.d.ts +2 -9
  75. package/types/src/Multiselect/docs/examples/TabInput.d.ts +2 -9
  76. package/types/src/Popover/Popover.d.ts +4 -2
  77. package/types/src/ResultsMenu/ResultsMenu.d.ts +23 -34
  78. package/types/src/Select/SelectBase.d.ts +2 -2
  79. package/types/src/TabBar/TabBar.d.ts +8 -5
  80. package/types/src/TabBar/TabBarContext.d.ts +1 -1
  81. package/types/src/TabLayout/TabLayout.d.ts +8 -5
  82. package/types/src/Typography/Typography.d.ts +27 -22
  83. package/useRovingFocus.js +20 -23
  84. package/types/src/Date/Icon.d.ts +0 -3
  85. package/types/src/TabBar/docs/examples/IconsAbove.d.ts +0 -3
  86. package/types/src/TabBar/docs/examples/VerticalIconsAbove.d.ts +0 -3
  87. /package/types/src/TabBar/docs/examples/{IconsLeft.d.ts → Icons.d.ts} +0 -0
  88. /package/types/src/TabBar/docs/examples/{VerticalIconsLeft.d.ts → VerticalIcons.d.ts} +0 -0
package/StepBar.js CHANGED
@@ -96,9 +96,9 @@
96
96
  var h = c().li.withConfig({
97
97
  displayName: "StepStyles__Styled",
98
98
  componentId: "sc-756fxp-1"
99
- })([ "display:grid;gap:", ";grid-template-rows:auto 1fr;justify-items:center;min-width:min-content;position:relative;overflow:hidden;", ";text-align:center;color:", ";counter-increment:", ";&:not(:first-of-type){", "{&::before{box-shadow:inset 500px 0 ", ";width:calc(50% - ", ");}}}&:not(:last-of-type){", "{&::after{width:50%;position:absolute;top:0;box-shadow:inset 500px 0 ", ";left:calc(50% + ", ");}}}" ], v.variables.spacingXSmall, v.mixins.typography("body", {
99
+ })([ "", ";display:grid;gap:", ";grid-template-rows:auto 1fr;justify-items:center;min-width:min-content;position:relative;overflow:hidden;text-align:center;color:", ";counter-increment:", ";&:not(:first-of-type){", "{&::before{box-shadow:inset 500px 0 ", ";width:calc(50% - ", ");}}}&:not(:last-of-type){", "{&::after{width:50%;position:absolute;top:0;box-shadow:inset 500px 0 ", ";left:calc(50% + ", ");}}}" ], v.mixins.typography("body", {
100
100
  weight: "semiBold"
101
- }), (0, v.pickVariant)("$status", {
101
+ }), v.variables.spacingXSmall, (0, v.pickVariant)("$status", {
102
102
  error: v.variables.contentColorActive,
103
103
  active: v.variables.contentColorAccent,
104
104
  next: v.variables.contentColorDefault,
package/Switch.js CHANGED
@@ -24,11 +24,11 @@
24
24
  /******/ (() => {
25
25
  /******/ // define getter functions for harmony exports
26
26
  /******/ e.d = (r, a) => {
27
- /******/ for (var o in a) {
28
- /******/ if (e.o(a, o) && !e.o(r, o)) {
29
- /******/ Object.defineProperty(r, o, {
27
+ /******/ for (var t in a) {
28
+ /******/ if (e.o(a, t) && !e.o(r, t)) {
29
+ /******/ Object.defineProperty(r, t, {
30
30
  enumerable: true,
31
- get: a[o]
31
+ get: a[t]
32
32
  });
33
33
  /******/ }
34
34
  /******/ }
@@ -61,16 +61,16 @@
61
61
  e.r(r);
62
62
  // EXPORTS
63
63
  e.d(r, {
64
- default: () => /* reexport */ W
64
+ default: () => /* reexport */ Q
65
65
  });
66
66
  // CONCATENATED MODULE: external "react"
67
67
  const a = require("react");
68
- var o = e.n(a);
68
+ var t = e.n(a);
69
69
  // CONCATENATED MODULE: external "prop-types"
70
- const l = require("prop-types");
71
- var t = e.n(l);
70
+ const i = require("prop-types");
71
+ var o = e.n(i);
72
72
  // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
73
- const i = require("@splunk/react-ui/AnimationToggle");
73
+ const l = require("@splunk/react-ui/AnimationToggle");
74
74
  // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
75
75
  const n = require("@splunk/react-ui/ScreenReaderContent");
76
76
  var c = e.n(n);
@@ -88,23 +88,24 @@
88
88
  // CONCATENATED MODULE: external "@splunk/themes"
89
89
  const g = require("@splunk/themes");
90
90
  // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxCompleted"
91
- const h = require("@splunk/react-icons/CheckBoxCompleted");
92
- var m = e.n(h);
91
+ const y = require("@splunk/react-icons/CheckBoxCompleted");
92
+ var m = e.n(y);
93
93
  // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxIndeterminate"
94
- const k = require("@splunk/react-icons/CheckBoxIndeterminate");
95
- var y = e.n(k);
94
+ const h = require("@splunk/react-icons/CheckBoxIndeterminate");
95
+ var k = e.n(h);
96
96
  // CONCATENATED MODULE: ./src/Switch/SwitchStyles.ts
97
97
  var C = "20px";
98
- var w = "12px";
99
- var S = "2px";
100
- var x = u()(v()).withConfig({
98
+ var S = "12px";
99
+ var w = "4px";
100
+ // diameter - toggleIndicatorDiameter / 2
101
+ var O = u()(v()).withConfig({
101
102
  displayName: "SwitchStyles__StyledBox",
102
103
  componentId: "sc-844ieu-0"
103
104
  })([ "display:inline;position:relative;flex-shrink:0;gap:", ";min-height:", ";align-items:center;color:", ";", "" ], g.variables.spacingSmall, g.variables.inputHeight, g.variables.contentColorActive, (function(e) {
104
105
  var r = e.$disabled;
105
106
  return r && (0, d.css)([ "color:", ";" ], g.variables.contentColorDisabled);
106
107
  }));
107
- var B = (0, d.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:", " solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:not([disabled]){&:focus{box-shadow:", ";}color:", ";", "}&[disabled]{border-color:", ";background-color:", ";color:", ";cursor:not-allowed;", ";}" ], g.mixins.reset("inline"), C, C, C, g.variables.borderRadius, g.variables.inputBorderWidth, g.variables.interactiveColorBorder, g.variables.interactiveColorBackground, g.variables.focusShadow, (0,
108
+ var x = (0, d.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:", " solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:not([disabled]){&:focus{box-shadow:", ";}color:", ";", "}&[disabled]{border-color:", ";background-color:", ";color:", ";cursor:not-allowed;", ";}" ], g.mixins.reset("inline"), C, C, C, g.variables.borderRadius, g.variables.inputBorderWidth, g.variables.interactiveColorBorder, g.variables.interactiveColorBackground, g.variables.focusShadow, (0,
108
109
  g.pick)({
109
110
  light: g.variables.white,
110
111
  dark: g.variables.black
@@ -124,35 +125,35 @@
124
125
  var r = e.$selected;
125
126
  return r && (0, d.css)([ "border:none;background-color:", ";" ], g.variables.neutral100);
126
127
  }));
127
- var O = u()(p()).withConfig({
128
+ var B = u()(p()).withConfig({
128
129
  displayName: "SwitchStyles__StyledCheckboxClickable",
129
130
  componentId: "sc-844ieu-1"
130
- })([ "", "" ], B);
131
- var $ = (0, d.css)([ "display:block;height:", ";width:", ";" ], C, C);
132
- var _ = u()(m()).withConfig({
131
+ })([ "", "" ], x);
132
+ var j = (0, d.css)([ "display:block;height:", ";width:", ";" ], C, C);
133
+ var $ = u()(m()).withConfig({
133
134
  displayName: "SwitchStyles__StyledCheck",
134
135
  componentId: "sc-844ieu-2"
135
- })([ "", "" ], $);
136
- var E = u()(y()).withConfig({
136
+ })([ "", "" ], j);
137
+ var I = u()(k()).withConfig({
137
138
  displayName: "SwitchStyles__StyledSome",
138
139
  componentId: "sc-844ieu-3"
139
- })([ "", "" ], $);
140
+ })([ "", "" ], j);
140
141
  var q = u().div.withConfig({
141
142
  displayName: "SwitchStyles__StyledToggleIndicator",
142
143
  componentId: "sc-844ieu-4"
143
- })([ "background-color:", ";border-radius:50%;box-sizing:border-box;width:", ";height:", ";position:absolute;left:", ";top:", ";", ";", " ", " ", ";" ], (0,
144
+ })([ "--toggle-indicator-margin:calc(", " - ", ");background-color:", ";border-radius:50%;box-sizing:border-box;width:", ";height:", ";position:absolute;left:var(--toggle-indicator-margin);top:var(--toggle-indicator-margin);", ";", " ", " ", ";" ], w, g.variables.inputBorderWidth, (0,
144
145
  g.pick)({
145
146
  light: g.variables.black,
146
147
  dark: g.variables.white
147
- }), w, w, S, S, (function(e) {
148
+ }), S, S, (function(e) {
148
149
  var r = e.$delay;
149
150
  return r && (0, d.css)([ "transition:left ", ";" ], r);
150
151
  }), (0, g.pick)({
151
152
  prisma: (0, d.css)([ "box-shadow:", ";" ], g.variables.embossShadow)
152
153
  }), (function(e) {
153
154
  var r = e.$selected, a = e.$disabled;
154
- return (0, d.css)([ "", " ", "" ], r && (0, d.css)([ "left:calc(100% - (", " + ", " * 2));" ], w, S), !a && r && (0,
155
- d.css)([ "left:calc(100% - (", " + ", "));background-color:", ";" ], w, S, (0, g.pick)({
155
+ return (0, d.css)([ "", " ", "" ], r && (0, d.css)([ "left:calc(100% - (", " + var(--toggle-indicator-margin)));" ], S), !a && r && (0,
156
+ d.css)([ "background-color:", ";" ], (0, g.pick)({
156
157
  light: g.variables.white,
157
158
  dark: g.variables.black
158
159
  })));
@@ -160,7 +161,7 @@
160
161
  var r = e.$disabled;
161
162
  return r && (0, d.css)([ "background-color:", ";" ], g.variables.neutral400);
162
163
  }));
163
- var I = (0, d.css)([ "position:relative;width:calc(", " * 2);height:", ";background-color:", ";transition:background-color ", ";flex:0 0 auto;border-radius:calc(", " / 2);border:", " solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{border:", " solid ", ";background-color:", ";", "}" ], C, C, g.variables.interactiveColorBackground, (function(e) {
164
+ var E = (0, d.css)([ "position:relative;width:calc(", " * 2);height:", ";background-color:", ";transition:background-color ", ";flex:0 0 auto;border-radius:calc(", " / 2);border:", " solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{border:", " solid ", ";background-color:", ";", "}" ], C, C, g.variables.interactiveColorBackground, (function(e) {
164
165
  return e.$delay;
165
166
  }), C, g.variables.inputBorderWidth, g.variables.interactiveColorBorder, g.variables.focusShadow, (function(e) {
166
167
  var r = e.$selected;
@@ -172,11 +173,11 @@
172
173
  var r = e.$selected;
173
174
  return r && (0, d.css)([ "background-color:", ";" ], g.variables.neutral100);
174
175
  }));
175
- var j = u()(p()).withConfig({
176
+ var P = u()(p()).withConfig({
176
177
  displayName: "SwitchStyles__StyledToggleClickable",
177
178
  componentId: "sc-844ieu-5"
178
- })([ "", "" ], I);
179
- var D = u().label.withConfig({
179
+ })([ "", "" ], E);
180
+ var _ = u().label.withConfig({
180
181
  displayName: "SwitchStyles__StyledLabel",
181
182
  componentId: "sc-844ieu-6"
182
183
  })([ "", " flex:1 1 auto;color:inherit;line-height:", ";", ";" ], g.mixins.reset("inline-block"), g.variables.lineHeight, (function(e) {
@@ -190,7 +191,7 @@
190
191
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
191
192
  * @param current - The new value of the ref.
192
193
  */
193
- function L(e, r) {
194
+ function R(e, r) {
194
195
  if (e) {
195
196
  if (typeof e === "function") {
196
197
  e(r);
@@ -203,146 +204,220 @@
203
204
  }
204
205
  }
205
206
  // CONCATENATED MODULE: ./src/Switch/Switch.tsx
206
- function R() {
207
- return R = Object.assign ? Object.assign.bind() : function(e) {
208
- for (var r = 1; r < arguments.length; r++) {
209
- var a = arguments[r];
210
- for (var o in a) {
211
- ({}).hasOwnProperty.call(a, o) && (e[o] = a[o]);
212
- }
213
- }
214
- return e;
215
- }, R.apply(null, arguments);
207
+ function D(e) {
208
+ "@babel/helpers - typeof";
209
+ return D = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
210
+ return typeof e;
211
+ } : function(e) {
212
+ return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
213
+ }, D(e);
216
214
  }
217
- function T(e, r) {
218
- if (null == e) return {};
219
- var a, o, l = A(e, r);
215
+ function L(e, r) {
216
+ var a = Object.keys(e);
220
217
  if (Object.getOwnPropertySymbols) {
221
218
  var t = Object.getOwnPropertySymbols(e);
222
- for (o = 0; o < t.length; o++) {
223
- a = t[o], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (l[a] = e[a]);
219
+ r && (t = t.filter((function(r) {
220
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
221
+ }))), a.push.apply(a, t);
222
+ }
223
+ return a;
224
+ }
225
+ function T(e) {
226
+ for (var r = 1; r < arguments.length; r++) {
227
+ var a = null != arguments[r] ? arguments[r] : {};
228
+ r % 2 ? L(Object(a), !0).forEach((function(r) {
229
+ A(e, r, a[r]);
230
+ })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(a)) : L(Object(a)).forEach((function(r) {
231
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(a, r));
232
+ }));
233
+ }
234
+ return e;
235
+ }
236
+ function A(e, r, a) {
237
+ return (r = H(r)) in e ? Object.defineProperty(e, r, {
238
+ value: a,
239
+ enumerable: !0,
240
+ configurable: !0,
241
+ writable: !0
242
+ }) : e[r] = a, e;
243
+ }
244
+ function H(e) {
245
+ var r = N(e, "string");
246
+ return "symbol" == D(r) ? r : r + "";
247
+ }
248
+ function N(e, r) {
249
+ if ("object" != D(e) || !e) return e;
250
+ var a = e[Symbol.toPrimitive];
251
+ if (void 0 !== a) {
252
+ var t = a.call(e, r || "default");
253
+ if ("object" != D(t)) return t;
254
+ throw new TypeError("@@toPrimitive must return a primitive value.");
255
+ }
256
+ return ("string" === r ? String : Number)(e);
257
+ }
258
+ function M(e, r) {
259
+ if (null == e) return {};
260
+ var a, t, i = W(e, r);
261
+ if (Object.getOwnPropertySymbols) {
262
+ var o = Object.getOwnPropertySymbols(e);
263
+ for (t = 0; t < o.length; t++) {
264
+ a = o[t], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (i[a] = e[a]);
224
265
  }
225
266
  }
226
- return l;
267
+ return i;
227
268
  }
228
- function A(e, r) {
269
+ function W(e, r) {
229
270
  if (null == e) return {};
230
271
  var a = {};
231
- for (var o in e) {
232
- if ({}.hasOwnProperty.call(e, o)) {
233
- if (r.includes(o)) continue;
234
- a[o] = e[o];
272
+ for (var t in e) {
273
+ if ({}.hasOwnProperty.call(e, t)) {
274
+ if (r.includes(t)) continue;
275
+ a[t] = e[t];
235
276
  }
236
277
  }
237
278
  return a;
238
279
  }
239
- /** @public */
240
- /** @public */ var H = {
241
- appearance: t().oneOf([ "checkbox", "toggle" ]),
242
- children: t().node,
243
- disabled: t().bool,
244
- elementRef: t().oneOfType([ t().func, t().object ]),
245
- error: t().bool,
246
- id: t().string,
247
- inline: t().bool,
248
- labelledBy: t().string,
249
- onClick: t().func,
280
+ function F() {
281
+ return F = Object.assign ? Object.assign.bind() : function(e) {
282
+ for (var r = 1; r < arguments.length; r++) {
283
+ var a = arguments[r];
284
+ for (var t in a) {
285
+ ({}).hasOwnProperty.call(a, t) && (e[t] = a[t]);
286
+ }
287
+ }
288
+ return e;
289
+ }, F.apply(null, arguments)
290
+ /** @public */
291
+ /** @public */;
292
+ }
293
+ var z = {
294
+ appearance: o().oneOf([ "checkbox", "toggle" ]),
295
+ children: o().node,
296
+ disabled: o().bool,
297
+ elementRef: o().oneOfType([ o().func, o().object ]),
298
+ error: o().bool,
299
+ id: o().string,
300
+ inline: o().bool,
301
+ labelledBy: o().string,
302
+ onClick: o().func,
250
303
  /** @private. */
251
- required: t().bool,
252
- selected: t().oneOf([ true, false, "some" ]),
253
- selectedLabel: t().string,
254
- toggleRef: t().oneOfType([ t().func, t().object ]),
255
- someSelectedLabel: t().string,
256
- unselectedLabel: t().string,
257
- value: t().any
304
+ required: o().bool,
305
+ selected: o().oneOf([ true, false, "some" ]),
306
+ selectedLabel: o().string,
307
+ toggleRef: o().oneOfType([ o().func, o().object ]),
308
+ someSelectedLabel: o().string,
309
+ unselectedLabel: o().string,
310
+ value: o().any
258
311
  };
259
- var P = function e(r) {
260
- var a = r.disabled, l = r.selected, t = T(r, [ "disabled", "selected" ]);
261
- var n = a === true ? "disabled" : undefined;
262
- var c = (0, i.useAnimationToggle)();
263
- var s = c === "on" ? "200ms" : undefined;
264
- var d = o().createElement(q, {
265
- $delay: s,
266
- $disabled: !!n,
267
- $selected: l
312
+ var G = function e(r) {
313
+ var a = r.ariaChecked, i = r.ariaInvalid, o = r.ariaLabelledBy, n = r.ariaRequired, c = r.dataTest, s = r.dataSelected, d = r.disabled, u = r.elementRef, b = r.id, v = r.onClick, f = r.selected;
314
+ var p = d === true ? "disabled" : undefined;
315
+ var g = (0, l.useAnimationToggle)();
316
+ var y = g === "on" ? "200ms" : undefined;
317
+ var m = t().createElement(q, {
318
+ $delay: y,
319
+ $disabled: !!p,
320
+ $selected: f
268
321
  });
269
322
 
270
- return o().createElement(j, R({
323
+ return t().createElement(P, {
271
324
  role: "switch",
272
- $delay: s,
273
- disabled: n,
274
- $selected: l || false
275
- }, t), d);
325
+ "aria-checked": a,
326
+ "aria-invalid": i,
327
+ "aria-labelledby": o,
328
+ "aria-required": n,
329
+ "data-selected": s,
330
+ "data-test": c,
331
+ disabled: p,
332
+ elementRef: u,
333
+ id: b,
334
+ onClick: v,
335
+ $delay: y,
336
+ $selected: f || false
337
+ }, m);
276
338
  };
277
- var N = function e(r) {
278
- var a = r.appearance, l = r.disabled, t = r.error, i = r.role, n = r.selected, c = T(r, [ "appearance", "disabled", "error", "role", "selected" ]);
339
+ var J = function e(r) {
340
+ var a = r.ariaChecked, i = r.ariaInvalid, o = r.ariaLabelledBy, l = r.ariaRequired, n = r.dataTest, c = r.dataSelected, s = r.disabled, d = r.error, u = r.id, b = r.elementRef, v = r.onClick, f = r.role, p = r.selected, g = r.tabIndex;
279
341
  /* Setting viewbox to rescale the icons to appear larger. Cannot directly adjust svg
280
342
  * width and height without the svg being larger than the checkbox and box-model.
281
- */ var s = "4 4 16 16";
282
- var d = o().createElement(o().Fragment, null, n === true && o().createElement(_, {
283
- viewBox: s
284
- }), n === "some" && o().createElement(E, {
285
- viewBox: s
343
+ */ var y = "4 4 16 16";
344
+ var m = t().createElement(t().Fragment, null, p === true && t().createElement($, {
345
+ viewBox: y
346
+ }), p === "some" && t().createElement(I, {
347
+ viewBox: y
286
348
  }));
287
- var u = l === true ? "disabled" : undefined;
349
+ var h = s === true ? "disabled" : undefined;
288
350
 
289
- return o().createElement(O, R({
290
- as: i === "presentation" ? "div" : undefined,
291
- role: i || a,
292
- disabled: u,
293
- $error: t || false,
294
- $selected: n === "some" || n || false
351
+ return t().createElement(B, F({
352
+ as: f === "presentation" ? "div" : undefined,
353
+ "aria-checked": a,
354
+ "aria-invalid": i,
355
+ "aria-labelledby": o,
356
+ "aria-required": l,
357
+ "data-selected": c,
358
+ "data-test": n,
359
+ disabled: h
360
+ }, {
361
+ elementRef: f === "presentation" ? undefined : b
362
+ }, {
363
+ id: u,
364
+ onClick: v,
365
+ role: f || "checkbox",
366
+ tabIndex: g,
367
+ $error: d || false,
368
+ $selected: p === "some" || p || false
295
369
  }, {
296
- inert: i === "presentation" ? "true" : undefined
297
- }, c), d);
370
+ inert: f === "presentation" ? "true" : undefined
371
+ }), m);
298
372
  };
299
373
  /**
300
374
  * `Switch` is a basic form control with an on/off state.
301
- */ function M(e) {
302
- var r = e.appearance, l = r === void 0 ? "checkbox" : r, t = e.children, i = e.disabled, n = e.elementRef, d = e.error, u = e.id, b = e.inline, v = e.labelledBy, f = e.onClick, p = e.required, g = e.selected, h = e.selectedLabel, m = e.someSelectedLabel, k = e.toggleRef, y = e.unselectedLabel, C = e.value, w = T(e, [ "appearance", "children", "disabled", "elementRef", "error", "id", "inline", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "toggleRef", "unselectedLabel", "value" ]);
375
+ */ function K(e) {
376
+ var r = e.appearance, i = r === void 0 ? "checkbox" : r, o = e.children, l = e.disabled, n = e.elementRef, d = e.error, u = e.id, b = e.inline, v = e.labelledBy, f = e.onClick, p = e.required, g = e.selected, y = e.selectedLabel, m = e.someSelectedLabel, h = e.toggleRef, k = e.unselectedLabel, C = e.value, S = M(e, [ "appearance", "children", "disabled", "elementRef", "error", "id", "inline", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "toggleRef", "unselectedLabel", "value" ]);
303
377
  // @docs-props-type SwitchPropsBase
304
378
  /* If has internal label defined with children, must have an id and must use generated labelId.
305
379
  * Otherwise, use customer defined id and external label.
306
- */ var S = t && u == null ? (0, s.createDOMID)("clickable") : u;
307
- var B = t ? (0, s.createDOMID)("label") : v;
380
+ */ var w = o && u == null ? (0, s.createDOMID)("clickable") : u;
381
+ var x = o ? (0, s.createDOMID)("label") : v;
308
382
  (0, a.useEffect)((function() {
309
383
  if (false) {}
310
384
  if (false) {}
311
- }), [ g, l, d ]);
312
- var O = (0, a.useCallback)((function(e) {
385
+ }), [ g, i, d ]);
386
+ var B = (0, a.useCallback)((function(e) {
313
387
  f === null || f === void 0 ? void 0 : f(e, {
314
388
  value: C,
315
389
  // @ts-expect-error - safe due to individual prop interfaces
316
390
  selected: g
317
391
  });
318
392
  }), [ f, C, g ]);
319
- var $ = (0, a.useCallback)((function(e) {
320
- L(k, e);
321
- }), [ k ]);
322
- var _ = g === "some" ? "mixed" : g;
323
- var E = {
324
- true: h,
325
- false: y,
393
+ var j = (0, a.useCallback)((function(e) {
394
+ R(h, e);
395
+ }), [ h ]);
396
+ var $ = g === "some" ? "mixed" : g;
397
+ var I = {
398
+ true: y,
399
+ false: k,
326
400
  some: m
327
401
  };
328
- var q = {
329
- id: S,
330
- onClick: i || O,
331
- elementRef: $,
332
- "aria-labelledby": B,
333
- "aria-checked": _,
334
- "aria-invalid": d ? true : undefined,
335
- "aria-required": p,
402
+ var q = T(T({
403
+ id: w,
404
+ onClick: l ? undefined : B,
405
+ elementRef: j,
406
+ ariaLabelledBy: x,
407
+ ariaChecked: $,
408
+ ariaInvalid: d ? true : undefined,
409
+ ariaRequired: p,
336
410
  // TODO(SUI-7658): Hopefully handled cleaner when Checkbox is removed out of Switch and NonInteractiveCheckbox uptakes that. For now intentionally not spread like others and access directly from otherProps to stress not specific to Switch but base HTML element props.
337
- "data-test": w.role === "presentation" ? "presentation-toggle" : "toggle",
338
- "data-selected": g,
339
- // TODO(SUI-7658): Hopefully handled cleaner when Checkbox is removed out of Switch and NonInteractiveCheckbox uptakes that. For now intentionally not spread like others and access directly from otherProps to stress not specific to Switch but base HTML element props.
340
- role: w.role,
341
- tabIndex: w.tabIndex
342
- };
343
- var I = !!h || !!m || !!y;
411
+ dataTest: S.role === "presentation" ? "presentation-toggle" : "toggle",
412
+ dataSelected: g
413
+ }, S.role != null && {
414
+ role: S.role
415
+ }), S.tabIndex != null && {
416
+ tabIndex: S.tabIndex
417
+ });
418
+ var E = !!y || !!m || !!k;
344
419
 
345
- return o().createElement(x, R({
420
+ return t().createElement(O, F({
346
421
  flex: true,
347
422
  inline: b,
348
423
  "data-test": "switch",
@@ -350,27 +425,26 @@
350
425
  "data-test-value": C,
351
426
  "data-test-error": d ? true : undefined,
352
427
  "data-error": d ? true : undefined,
353
- "data-disabled": i ? true : undefined,
428
+ "data-test-disabled": l ? "disabled" : undefined,
354
429
  elementRef: n,
355
- $disabled: i || false
356
- }, w), l === "toggle" ? o().createElement(P, R({
357
- disabled: i || false,
430
+ $disabled: l || false
431
+ }, S), i === "toggle" ? t().createElement(G, F({
432
+ disabled: l || false,
358
433
  selected: !!g
359
- }, q)) : o().createElement(N, R({
360
- appearance: "checkbox",
434
+ }, q)) : t().createElement(J, F({
361
435
  error: d || false,
362
- disabled: i || false,
436
+ disabled: l || false,
363
437
  selected: g
364
- }, q)), I && o().createElement(c(), null, E["".concat(g)]), t && o().createElement(D, {
365
- $disabled: i || false,
438
+ }, q)), E && t().createElement(c(), null, I["".concat(g)]), o && t().createElement(_, {
439
+ $disabled: l || false,
366
440
  "data-test": "label",
367
- id: B,
368
- htmlFor: S,
369
- "data-disabled": i || null
370
- }, t));
441
+ id: x,
442
+ htmlFor: w,
443
+ "data-disabled": l || null
444
+ }, o));
371
445
  }
372
- M.propTypes = H;
373
- /* harmony default export */ const W = M;
446
+ K.propTypes = z;
447
+ /* harmony default export */ const Q = K;
374
448
  // CONCATENATED MODULE: ./src/Switch/index.ts
375
449
  module.exports = r;
376
450
  /******/})();