@splunk/react-ui 5.3.0 → 5.5.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 (114) hide show
  1. package/Accordion.js +31 -31
  2. package/Avatar.js +13 -13
  3. package/Badge.js +154 -0
  4. package/Breadcrumbs.js +66 -63
  5. package/ButtonSimple.js +52 -52
  6. package/CHANGELOG.md +43 -0
  7. package/CardLayout.js +39 -36
  8. package/Clickable.js +5 -6
  9. package/Code.js +917 -424
  10. package/CollapsiblePanel.js +1 -1
  11. package/Color.js +904 -1025
  12. package/ComboBox.js +6 -5
  13. package/DefinitionList.js +1 -1
  14. package/FormRows.js +13 -11
  15. package/JSONTree.js +682 -1408
  16. package/Link.js +74 -44
  17. package/MIGRATION.md +32 -1
  18. package/Markdown.js +9 -5
  19. package/Menu.js +100 -97
  20. package/Multiselect.js +1223 -2858
  21. package/Number.js +3 -3
  22. package/PhoneNumber.d.ts +2 -0
  23. package/PhoneNumber.js +769 -0
  24. package/Popover.js +235 -232
  25. package/RadioList.js +166 -151
  26. package/Resize.js +11 -8
  27. package/ResultsMenu.js +911 -1030
  28. package/ScreenReaderContent.js +86 -130
  29. package/Scroll.js +366 -425
  30. package/Select.js +267 -1947
  31. package/SelectBase.d.ts +2 -0
  32. package/SelectBase.js +1681 -0
  33. package/Slider.js +202 -199
  34. package/SlidingPanels.js +170 -175
  35. package/StepBar.js +123 -97
  36. package/Switch.js +137 -118
  37. package/TabBar.js +296 -295
  38. package/TabLayout.js +14 -14
  39. package/Table.js +1562 -1516
  40. package/TextArea.js +596 -684
  41. package/TransitionOpen.js +82 -74
  42. package/Tree.js +638 -682
  43. package/docker-compose.yml +99 -52
  44. package/package.json +16 -12
  45. package/stubs-splunkui.d.ts +0 -86
  46. package/test-runner-jest.config.js +1 -0
  47. package/types/src/Badge/Badge.d.ts +29 -0
  48. package/types/src/Badge/docs/examples/Basic.d.ts +5 -0
  49. package/types/src/Badge/docs/examples/Count.d.ts +6 -0
  50. package/types/src/Badge/docs/examples/CustomColors.d.ts +8 -0
  51. package/types/src/Badge/docs/examples/Icon.d.ts +6 -0
  52. package/types/src/Badge/index.d.ts +2 -0
  53. package/types/src/Breadcrumbs/Breadcrumbs.d.ts +1 -5
  54. package/types/src/Breadcrumbs/BreadcrumbsContext.d.ts +7 -0
  55. package/types/src/Breadcrumbs/Item.d.ts +1 -1
  56. package/types/src/ButtonSimple/mixin.d.ts +1 -1
  57. package/types/src/Code/Code.d.ts +4 -3
  58. package/types/src/Code/index.d.ts +1 -0
  59. package/types/src/JSONTree/JSONTreeItem.d.ts +1 -1
  60. package/types/src/JSONTree/renderTreeItems.d.ts +1 -1
  61. package/types/src/Link/Link.d.ts +4 -0
  62. package/types/src/Link/LinkContext.d.ts +14 -0
  63. package/types/src/Link/docs/examples/Visited.d.ts +7 -0
  64. package/types/src/Link/index.d.ts +1 -0
  65. package/types/src/Modal/ModalContext.d.ts +1 -1
  66. package/types/src/Multiselect/Compact.d.ts +3 -3
  67. package/types/src/Multiselect/Multiselect.d.ts +1 -1
  68. package/types/src/Multiselect/Normal.d.ts +2 -2
  69. package/types/src/Number/utils.d.ts +1 -1
  70. package/types/src/PhoneNumber/PhoneNumber.d.ts +139 -0
  71. package/types/src/PhoneNumber/docs/examples/Controlled.d.ts +7 -0
  72. package/types/src/PhoneNumber/docs/examples/DefaultCountry.d.ts +7 -0
  73. package/types/src/PhoneNumber/docs/examples/Disabled.d.ts +6 -0
  74. package/types/src/PhoneNumber/docs/examples/Error.d.ts +6 -0
  75. package/types/src/PhoneNumber/docs/examples/Inline.d.ts +7 -0
  76. package/types/src/PhoneNumber/docs/examples/Uncontrolled.d.ts +7 -0
  77. package/types/src/PhoneNumber/index.d.ts +2 -0
  78. package/types/src/PhoneNumber/utils.d.ts +47 -0
  79. package/types/src/Popover/getPlacement.d.ts +1 -1
  80. package/types/src/RadioList/Option.d.ts +7 -2
  81. package/types/src/RadioList/RadioListContext.d.ts +1 -1
  82. package/types/src/RadioList/docs/examples/Description.d.ts +6 -0
  83. package/types/src/Select/Option.d.ts +8 -3
  84. package/types/src/Select/Select.d.ts +1 -1
  85. package/types/src/{Select → SelectBase}/OptionBase.d.ts +8 -2
  86. package/types/src/{Select → SelectBase}/SelectBase.d.ts +3 -1
  87. package/types/src/SelectBase/index.d.ts +2 -0
  88. package/types/src/StepBar/StepBar.d.ts +4 -1
  89. package/types/src/StepBar/StepBarContext.d.ts +1 -0
  90. package/types/src/StepBar/docs/examples/Vertical.d.ts +6 -0
  91. package/types/src/Switch/Switch.d.ts +10 -1
  92. package/types/src/TabBar/Tab.d.ts +3 -1
  93. package/types/src/TabBar/docs/examples/Icons.d.ts +4 -0
  94. package/types/src/TabBar/docs/examples/Tooltips.d.ts +3 -0
  95. package/types/src/TabLayout/Panel.d.ts +2 -0
  96. package/types/src/Table/Body.d.ts +6 -1
  97. package/types/src/Table/Cell.d.ts +5 -1
  98. package/types/src/Table/Head.d.ts +6 -2
  99. package/types/src/Table/HeadCell.d.ts +5 -1
  100. package/types/src/Table/Row.d.ts +5 -1
  101. package/types/src/Table/Table.d.ts +21 -1
  102. package/types/src/Table/TableContext.d.ts +1 -0
  103. package/types/src/Table/docs/examples/HorizontalOverflowScroll.d.ts +8 -0
  104. package/types/src/Table/docs/examples/PinActionColumn.d.ts +7 -0
  105. package/types/src/TransitionOpen/TransitionOpen.d.ts +3 -1
  106. package/types/src/Tree/TreeContext.d.ts +1 -1
  107. package/types/src/useResizeObserver/useResizeObserver.d.ts +2 -0
  108. package/types/src/useRovingFocus/useRovingFocus.d.ts +8 -1
  109. package/useControlled.js +61 -97
  110. package/usePrevious.d.ts +2 -0
  111. package/usePrevious.js +30 -62
  112. package/useResizeObserver.js +71 -136
  113. package/useRovingFocus.js +96 -41
  114. /package/types/src/{Select → SelectBase}/SelectAllOption.d.ts +0 -0
package/Slider.js CHANGED
@@ -8,27 +8,27 @@
8
8
  /******/ /* webpack/runtime/compat get default export */
9
9
  /******/ (() => {
10
10
  /******/ // getDefaultExport function for compatibility with non-harmony modules
11
- /******/ e.n = r => {
12
- /******/ var t = r && r.__esModule ?
13
- /******/ () => r["default"]
14
- /******/ : () => r
11
+ /******/ e.n = t => {
12
+ /******/ var r = t && t.__esModule ?
13
+ /******/ () => t["default"]
14
+ /******/ : () => t
15
15
  /******/;
16
- e.d(t, {
17
- a: t
16
+ e.d(r, {
17
+ a: r
18
18
  });
19
- /******/ return t;
19
+ /******/ return r;
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, t) => {
27
- /******/ for (var n in t) {
28
- /******/ if (e.o(t, n) && !e.o(r, n)) {
29
- /******/ Object.defineProperty(r, n, {
26
+ /******/ e.d = (t, r) => {
27
+ /******/ for (var n in r) {
28
+ /******/ if (e.o(r, n) && !e.o(t, n)) {
29
+ /******/ Object.defineProperty(t, n, {
30
30
  enumerable: true,
31
- get: t[n]
31
+ get: r[n]
32
32
  });
33
33
  /******/ }
34
34
  /******/ }
@@ -37,7 +37,7 @@
37
37
  /******/
38
38
  /******/ /* webpack/runtime/hasOwnProperty shorthand */
39
39
  /******/ (() => {
40
- /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
40
+ /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
41
41
  /******/;
42
42
  })();
43
43
  /******/
@@ -56,16 +56,16 @@
56
56
  /******/ };
57
57
  /******/ })();
58
58
  /******/
59
- /************************************************************************/ var r = {};
59
+ /************************************************************************/ var t = {};
60
60
  // ESM COMPAT FLAG
61
- e.r(r);
61
+ e.r(t);
62
62
  // EXPORTS
63
- e.d(r, {
64
- default: () => /* reexport */ te
63
+ e.d(t, {
64
+ default: () => /* reexport */ re
65
65
  });
66
66
  // CONCATENATED MODULE: external "react"
67
- const t = require("react");
68
- var n = e.n(t);
67
+ const r = require("react");
68
+ var n = e.n(r);
69
69
  // CONCATENATED MODULE: external "decimal.js-light"
70
70
  const a = require("decimal.js-light");
71
71
  var i = e.n(a);
@@ -93,13 +93,13 @@
93
93
  * a stylelint `Unknown word CssSyntaxError` */
94
94
  /* getStepMarksBackground generates the multiple radial gradient backgrounds for step marks */
95
95
  function h(e) {
96
- var r = e.stepWidth, t = e.thumbPosition, n = t === void 0 ? 0 : t, a = e.beforeThumbStepColor, i = e.afterThumbStepColor;
97
- /* need to subtract 1 to avoid extra step at the end */ var o = Math.floor(100 / r) - 1;
96
+ var t = e.stepWidth, r = e.thumbPosition, n = r === void 0 ? 0 : r, a = e.beforeThumbStepColor, i = e.afterThumbStepColor;
97
+ /* need to subtract 1 to avoid extra step at the end */ var o = Math.floor(100 / t) - 1;
98
98
  var l = new Array(o).fill(false);
99
- return (0, m.css)([ "background:", ";" ], l.map((function(e, t) {
100
- var o = (t + 1) * r;
99
+ return (0, m.css)([ "background:", ";" ], l.map((function(e, r) {
100
+ var o = (r + 1) * t;
101
101
  var u = o <= n ? a : i;
102
- /* css doesn't allow trailing comma */ var s = t < l.length - 1 ? "," : "";
102
+ /* css doesn't allow trailing comma */ var s = r < l.length - 1 ? "," : "";
103
103
  return (0, m.css)([ "radial-gradient(circle,", " 0%,", " 3px,transparent 3px) calc(", "% - 1.5px) center no-repeat ", "" ], u, u, o, s);
104
104
  })));
105
105
  }
@@ -108,14 +108,14 @@
108
108
  var g = 8;
109
109
  var w = 1;
110
110
  var S = 24;
111
- var C = b().div.withConfig({
111
+ var x = b().div.withConfig({
112
112
  displayName: "SliderStyles__StyledSliderWrapper",
113
113
  componentId: "sc-16ooit4-0"
114
114
  })([ "", ";gap:", ";width:100%;", "" ], p.mixins.reset("flex"), p.variables.spacingLarge, (function(e) {
115
- var r = e.$inline;
116
- return r && (0, m.css)([ "width:300px;" ]);
115
+ var t = e.$inline;
116
+ return t && (0, m.css)([ "width:300px;" ]);
117
117
  }));
118
- var x = b().div.withConfig({
118
+ var C = b().div.withConfig({
119
119
  displayName: "SliderStyles__StyledSliderBar",
120
120
  componentId: "sc-16ooit4-1"
121
121
  })([ "position:relative;left:0;height:", "px;width:100%;border-radius:10px;background-color:", ";border:", "px solid;border-color:", ";", " ", "" ], g, (0,
@@ -128,16 +128,16 @@
128
128
  error: p.variables.interactiveColorBorder,
129
129
  disabled: "transparent"
130
130
  }), (function(e) {
131
- var r = e.$thumbPosition;
132
- return r && (0, m.css)([ "&::before{position:absolute;border-radius:", ";content:'';height:calc( ", "px + ", "px );top:-", "px;left:-", "px;width:", "%;background-color:", ";}" ], p.variables.borderRadius, g, w * 2, w, w, r, (0,
131
+ var t = e.$thumbPosition;
132
+ return (t || t === 0) && (0, m.css)([ "&::before{position:absolute;border-radius:", ";content:'';height:calc( ", "px + ", "px );top:-", "px;left:-", "px;width:", "%;background-color:", ";}" ], p.variables.borderRadius, g, w * 2, w, w, t, (0,
133
133
  p.pickVariant)("$state", {
134
134
  default: p.variables.interactiveColorAccent,
135
135
  error: p.variables.interactiveColorAccentError,
136
136
  disabled: p.variables.neutral300
137
137
  }));
138
138
  }), (function(e) {
139
- var r = e.$stepWidth, t = e.$thumbPosition;
140
- return r && (0, m.css)([ "&::after{position:absolute;top:0;left:0;width:100%;height:100%;", ";background-size:8px 8px;}" ], y({
139
+ var t = e.$stepWidth, r = e.$thumbPosition;
140
+ return t && (0, m.css)([ "&::after{position:absolute;top:0;left:0;width:100%;height:100%;", ";background-size:8px 8px;}" ], y({
141
141
  beforeThumbStepColor: (0, p.pickVariant)("$state", {
142
142
  default: p.variables.contentColorAccentWeak,
143
143
  error: p.variables.contentColorNegativeWeak,
@@ -148,14 +148,14 @@
148
148
  error: p.variables.contentColorDefault,
149
149
  disabled: p.variables.contentColorDisabled
150
150
  }),
151
- stepWidth: r,
152
- thumbPosition: t
151
+ stepWidth: t,
152
+ thumbPosition: r
153
153
  }));
154
154
  }));
155
155
  var k = b().button.withConfig({
156
156
  displayName: "SliderStyles__StyledSliderThumb",
157
157
  componentId: "sc-16ooit4-2"
158
- })([ "display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:50%;background-color:", ";border:2px solid ", ";left:", "%;margin-left:-", "px;", " ", "" ], S, S, (0,
158
+ })([ "display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:50%;background-color:", ";border:2px solid ", ";left:", "%;margin-left:-", "px;", ";", " ", "" ], S, S, (0,
159
159
  p.pickVariant)("$state", {
160
160
  default: p.variables.white,
161
161
  error: p.variables.interactiveColorAccentError,
@@ -165,14 +165,17 @@
165
165
  error: p.variables.interactiveColorAccentErrorStrong,
166
166
  disabled: p.variables.neutral300
167
167
  }), (function(e) {
168
- var r = e.$thumbPosition;
169
- return r;
170
- }), S / 2, (function(e) {
171
- var r = e.$state;
172
- return r !== "disabled" && (0, m.css)([ "&:hover,&:focus,&:active{box-shadow:", ";}" ], p.variables.focusShadow);
168
+ var t = e.$thumbPosition;
169
+ return t;
170
+ }), S / 2, (0, p.pickVariant)("$thumbPosition", {
171
+ 0: (0, m.css)([ "margin-left:0;" ]),
172
+ 100: (0, m.css)([ "margin-left:-", "px;" ], S)
173
+ }), (function(e) {
174
+ var t = e.$state;
175
+ return t !== "disabled" && (0, m.css)([ "&:hover,&:focus,&:active{box-shadow:", ";}" ], p.variables.focusShadow);
173
176
  }), (function(e) {
174
- var r = e.$state;
175
- return r === "disabled" && (0, m.css)([ "cursor:not-allowed;" ]);
177
+ var t = e.$state;
178
+ return t === "disabled" && (0, m.css)([ "cursor:not-allowed;" ]);
176
179
  }));
177
180
  var E = b().div.withConfig({
178
181
  displayName: "SliderStyles__StyledPopoverContent",
@@ -182,20 +185,20 @@
182
185
  displayName: "SliderStyles__StyledLabel",
183
186
  componentId: "sc-16ooit4-4"
184
187
  })([ "align-self:center;color:", ";" ], (function(e) {
185
- var r = e.$disabled;
186
- return r ? p.variables.contentColorDisabled : p.variables.contentColorActive;
188
+ var t = e.$disabled;
189
+ return t ? p.variables.contentColorDisabled : p.variables.contentColorActive;
187
190
  }));
188
191
  /* using content: '' to control if step marks should be shown
189
192
  * to avoid further issues with variable interpolation given the
190
193
  * complexity of the multiple radial gradient backgrounds. This also
191
- * allows us not to pass in StyledSliderTypes to StyledInput */ var A = (0, m.css)([ "", "{&::after{content:'';}}" ], /* sc-sel */ x);
194
+ * allows us not to pass in StyledSliderTypes to StyledInput */ var A = (0, m.css)([ "", "{&::after{content:'';}}" ], /* sc-sel */ C);
192
195
  var O = b().div.withConfig({
193
196
  displayName: "SliderStyles__StyledInput",
194
197
  componentId: "sc-16ooit4-5"
195
198
  })([ "width:100%;min-width:200px;display:flex;align-items:center;flex:1 0 0;position:relative;cursor:default;height:", ";max-width:100%;", " &:hover{", "{border-color:", ";}}", "" ], p.variables.inputHeight, (function(e) {
196
- var r = e.$state;
197
- return r === "disabled" && (0, m.css)([ "cursor:not-allowed;" ]);
198
- }), /* sc-sel */ x, (0, p.pickVariant)("$state", {
199
+ var t = e.$state;
200
+ return t === "disabled" && (0, m.css)([ "cursor:not-allowed;" ]);
201
+ }), /* sc-sel */ C, (0, p.pickVariant)("$state", {
199
202
  default: p.variables.interactiveColorBorderHover,
200
203
  error: p.variables.interactiveColorBorderHover,
201
204
  disabled: "transparent"
@@ -205,7 +208,7 @@
205
208
  }));
206
209
  // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
207
210
  /* eslint-disable @typescript-eslint/no-empty-function */
208
- var T = {
211
+ var V = {
209
212
  body: {
210
213
  appendChild: function e() {
211
214
  return [];
@@ -259,16 +262,16 @@
259
262
  search: ""
260
263
  }
261
264
  };
262
- function V() {
263
- var e = typeof document !== "undefined" ? document : T;
265
+ function P() {
266
+ var e = typeof document !== "undefined" ? document : V;
264
267
  return e;
265
268
  }
266
- var P = V();
267
- /* harmony default export */ const B = /* unused pure expression or super */ null && P;
269
+ var T = P();
270
+ /* harmony default export */ const B = /* unused pure expression or super */ null && T;
268
271
  // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
269
272
  /* eslint-disable @typescript-eslint/no-empty-function */
270
273
  var _ = {
271
- document: T,
274
+ document: V,
272
275
  navigator: {
273
276
  userAgent: ""
274
277
  },
@@ -308,18 +311,18 @@
308
311
  matchMedia: function e() {
309
312
  return {};
310
313
  },
311
- requestAnimationFrame: function e(r) {
314
+ requestAnimationFrame: function e(t) {
312
315
  if (typeof setTimeout === "undefined") {
313
- r();
316
+ t();
314
317
  return null;
315
318
  }
316
- return setTimeout(r, 0);
319
+ return setTimeout(t, 0);
317
320
  },
318
- cancelAnimationFrame: function e(r) {
321
+ cancelAnimationFrame: function e(t) {
319
322
  if (typeof setTimeout === "undefined") {
320
323
  return;
321
324
  }
322
- clearTimeout(r);
325
+ clearTimeout(t);
323
326
  }
324
327
  };
325
328
  function j() {
@@ -335,14 +338,14 @@
335
338
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
336
339
  * @param current - The new value of the ref.
337
340
  */
338
- function M(e, r) {
341
+ function M(e, t) {
339
342
  if (e) {
340
343
  if (typeof e === "function") {
341
- e(r);
344
+ e(t);
342
345
  } else {
343
346
  // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
344
347
  // the intention here is to signal "we will take care of setting 'current', not you".
345
- e.current = r;
348
+ e.current = t;
346
349
  // eslint-disable-line no-param-reassign
347
350
  }
348
351
  }
@@ -350,50 +353,50 @@
350
353
  // CONCATENATED MODULE: ./src/Slider/Slider.tsx
351
354
  function N() {
352
355
  return N = Object.assign ? Object.assign.bind() : function(e) {
353
- for (var r = 1; r < arguments.length; r++) {
354
- var t = arguments[r];
355
- for (var n in t) {
356
- ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
356
+ for (var t = 1; t < arguments.length; t++) {
357
+ var r = arguments[t];
358
+ for (var n in r) {
359
+ ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
357
360
  }
358
361
  }
359
362
  return e;
360
363
  }, N.apply(null, arguments);
361
364
  }
362
- function I(e, r) {
363
- return H(e) || F(e, r) || R(e, r) || D();
365
+ function I(e, t) {
366
+ return H(e) || F(e, t) || R(e, t) || D();
364
367
  }
365
368
  function D() {
366
369
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
367
370
  }
368
- function R(e, r) {
371
+ function R(e, t) {
369
372
  if (e) {
370
- if ("string" == typeof e) return W(e, r);
371
- var t = {}.toString.call(e).slice(8, -1);
372
- 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) ? W(e, r) : void 0;
373
+ if ("string" == typeof e) return W(e, t);
374
+ var r = {}.toString.call(e).slice(8, -1);
375
+ return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? W(e, t) : void 0;
373
376
  }
374
377
  }
375
- function W(e, r) {
376
- (null == r || r > e.length) && (r = e.length);
377
- for (var t = 0, n = Array(r); t < r; t++) {
378
- n[t] = e[t];
378
+ function W(e, t) {
379
+ (null == t || t > e.length) && (t = e.length);
380
+ for (var r = 0, n = Array(t); r < t; r++) {
381
+ n[r] = e[r];
379
382
  }
380
383
  return n;
381
384
  }
382
- function F(e, r) {
383
- var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
384
- if (null != t) {
385
+ function F(e, t) {
386
+ var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
387
+ if (null != r) {
385
388
  var n, a, i, o, l = [], u = !0, s = !1;
386
389
  try {
387
- if (i = (t = t.call(e)).next, 0 === r) {
388
- if (Object(t) !== t) return;
390
+ if (i = (r = r.call(e)).next, 0 === t) {
391
+ if (Object(r) !== r) return;
389
392
  u = !1;
390
- } else for (;!(u = (n = i.call(t)).done) && (l.push(n.value), l.length !== r); u = !0) {
393
+ } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
391
394
  }
392
395
  } catch (e) {
393
396
  s = !0, a = e;
394
397
  } finally {
395
398
  try {
396
- if (!u && null != t["return"] && (o = t["return"](), Object(o) !== o)) return;
399
+ if (!u && null != r["return"] && (o = r["return"](), Object(o) !== o)) return;
397
400
  } finally {
398
401
  if (s) throw a;
399
402
  }
@@ -404,27 +407,27 @@
404
407
  function H(e) {
405
408
  if (Array.isArray(e)) return e;
406
409
  }
407
- function U(e, r) {
410
+ function U(e, t) {
408
411
  if (null == e) return {};
409
- var t, n, a = z(e, r);
412
+ var r, n, a = z(e, t);
410
413
  if (Object.getOwnPropertySymbols) {
411
414
  var i = Object.getOwnPropertySymbols(e);
412
415
  for (n = 0; n < i.length; n++) {
413
- t = i[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
416
+ r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
414
417
  }
415
418
  }
416
419
  return a;
417
420
  }
418
- function z(e, r) {
421
+ function z(e, t) {
419
422
  if (null == e) return {};
420
- var t = {};
423
+ var r = {};
421
424
  for (var n in e) {
422
425
  if ({}.hasOwnProperty.call(e, n)) {
423
- if (-1 !== r.indexOf(n)) continue;
424
- t[n] = e[n];
426
+ if (-1 !== t.indexOf(n)) continue;
427
+ r[n] = e[n];
425
428
  }
426
429
  }
427
- return t;
430
+ return r;
428
431
  }
429
432
  /** @public */ var K = {
430
433
  defaultValue: l().number,
@@ -448,10 +451,10 @@
448
451
  thumbRef: l().oneOfType([ l().func, l().object ]),
449
452
  value: l().number
450
453
  };
451
- var X = function e(r) {
452
- var t = r.max, n = r.min, a = r.value;
453
- if (a > t) {
454
- return t;
454
+ var X = function e(t) {
455
+ var r = t.max, n = t.min, a = t.value;
456
+ if (a > r) {
457
+ return r;
455
458
  }
456
459
  if (a < n) {
457
460
  return n;
@@ -460,38 +463,38 @@
460
463
  };
461
464
  // If the current value is in between a step, i.e. defaultValue is not at a
462
465
  // step mark, this function handles navigating to the next correct step
463
- var G = function e(r) {
464
- var t = r.direction, n = r.min, a = r.step, o = r.value;
466
+ var G = function e(t) {
467
+ var r = t.direction, n = t.min, a = t.step, o = t.value;
465
468
  var l = new (i())(o).minus(n).modulo(a).toNumber();
466
469
  if (l > 0) {
467
- return t === "forward" ? a - l : l;
470
+ return r === "forward" ? a - l : l;
468
471
  }
469
472
  return a;
470
473
  };
471
- var J = function e(r, t) {
472
- if (t === null) {
474
+ var J = function e(t, r) {
475
+ if (r === null) {
473
476
  return undefined;
474
477
  }
475
- var n = t.getBoundingClientRect();
476
- var a = r.clientX - n.left;
478
+ var n = r.getBoundingClientRect();
479
+ var a = t.clientX - n.left;
477
480
  return X({
478
481
  max: 100,
479
482
  min: 0,
480
483
  value: a / n.width * 100
481
484
  });
482
485
  };
483
- var Q = function e(r) {
484
- var t = r.max, n = r.min, a = r.step, o = r.value;
486
+ var Q = function e(t) {
487
+ var r = t.max, n = t.min, a = t.step, o = t.value;
485
488
  // Handles if the max is in between steps but val is larger than the halfway point between last step mark and max
486
- if (o > t - (t - n) % a / 2) {
487
- return t;
489
+ if (o > r - (r - n) % a / 2) {
490
+ return r;
488
491
  }
489
492
  return new (i())(o).minus(n).div(a).todp(0).mul(a).add(n).toNumber();
490
493
  };
491
- var Y = function e(r) {
492
- var t = r.position, n = r.max, a = r.min, i = r.step;
494
+ var Y = function e(t) {
495
+ var r = t.position, n = t.max, a = t.min, i = t.step;
493
496
  var o = n - a;
494
- var l = t / 100 * o + a;
497
+ var l = r / 100 * o + a;
495
498
  return Q({
496
499
  max: n,
497
500
  min: a,
@@ -499,191 +502,191 @@
499
502
  value: l
500
503
  });
501
504
  };
502
- var Z = function e(r) {
503
- var t = r.max, n = r.min, a = r.sliderBar, i = r.step;
505
+ var Z = function e(t) {
506
+ var r = t.max, n = t.min, a = t.sliderBar, i = t.step;
504
507
  // don't render stepMarks if they are too small i.e. stepWidth is less than SliderThumb divided by 2
505
508
  // in that case, undefined is returned
506
509
  if (a === null) {
507
510
  return undefined;
508
511
  }
509
- var o = t - n;
512
+ var o = r - n;
510
513
  var l = Math.round(o / i);
511
514
  var u = a.getBoundingClientRect();
512
515
  var s = i * 100 / o;
513
516
  return u.width / l > S / 2 ? s : undefined;
514
517
  };
515
- var ee = function e(r) {
516
- var t = r.max, n = r.min, a = r.value;
518
+ var ee = function e(t) {
519
+ var r = t.max, n = t.min, a = t.value;
517
520
  if (a === undefined) {
518
521
  return undefined;
519
522
  }
520
- var i = t - n;
523
+ var i = r - n;
521
524
  return (a - n) / i * 100;
522
525
  };
523
- function re(e) {
524
- var r = e.defaultValue, a = e.describedBy, i = e.disabled, o = e.displayValue, l = e.elementRef, u = e.error, c = e.inline, f = e.labelledBy, m = e.max, b = m === void 0 ? 5 : m, p = e.maxLabel, h = e.min, y = h === void 0 ? 1 : h, g = e.minLabel, w = e.name, S = e.onChange, A = e.required, T = e.step, V = T === void 0 ? 1 : T, P = e.stepMarks, B = P === void 0 ? "focus" : P, _ = e.thumbRef, j = e.value, q = U(e, [ "defaultValue", "describedBy", "disabled", "displayValue", "elementRef", "error", "inline", "labelledBy", "max", "maxLabel", "min", "minLabel", "name", "onChange", "required", "step", "stepMarks", "thumbRef", "value" ]);
526
+ function te(e) {
527
+ var t = e.defaultValue, a = e.describedBy, i = e.disabled, o = e.displayValue, l = e.elementRef, u = e.error, c = e.inline, f = e.labelledBy, m = e.max, b = m === void 0 ? 5 : m, p = e.maxLabel, h = e.min, y = h === void 0 ? 1 : h, g = e.minLabel, w = e.name, S = e.onChange, A = e.required, V = e.step, P = V === void 0 ? 1 : V, T = e.stepMarks, B = T === void 0 ? "focus" : T, _ = e.thumbRef, j = e.value, q = U(e, [ "defaultValue", "describedBy", "disabled", "displayValue", "elementRef", "error", "inline", "labelledBy", "max", "maxLabel", "min", "minLabel", "name", "onChange", "required", "step", "stepMarks", "thumbRef", "value" ]);
525
528
  // @docs-props-type SliderPropsBase
526
529
  var D = v()({
527
530
  componentName: "Slider",
528
531
  /* eslint-disable-next-line prefer-rest-params */
529
532
  componentProps: arguments[0]
530
533
  });
531
- var R = (0, t.useState)(false), W = I(R, 2), F = W[0], H = W[1];
532
- var z = (0, t.useState)(false), K = I(z, 2), re = K[0], te = K[1];
533
- var ne = (0, t.useState)(null), ae = I(ne, 2), ie = ae[0], oe = ae[1];
534
- var le = (0, t.useState)(null), ue = I(le, 2), se = ue[0], ce = ue[1];
535
- var de = (0, t.useMemo)((function() {
534
+ var R = (0, r.useState)(false), W = I(R, 2), F = W[0], H = W[1];
535
+ var z = (0, r.useState)(false), K = I(z, 2), te = K[0], re = K[1];
536
+ var ne = (0, r.useState)(null), ae = I(ne, 2), ie = ae[0], oe = ae[1];
537
+ var le = (0, r.useState)(null), ue = I(le, 2), se = ue[0], ce = ue[1];
538
+ var de = (0, r.useMemo)((function() {
536
539
  return D ? Q({
537
540
  value: (b - y) / 2,
538
541
  min: y,
539
542
  max: b,
540
- step: V
541
- }) : r;
542
- }), [ D, r, b, y, V ]);
543
- var fe = (0, t.useState)(D ? j : de), ve = I(fe, 2), me = ve[0], be = ve[1];
544
- var pe = (0, t.useCallback)((function(e, r) {
545
- var t = r.newValue;
546
- if (me !== t) {
543
+ step: P
544
+ }) : t;
545
+ }), [ D, t, b, y, P ]);
546
+ var fe = (0, r.useState)(D ? j : de), ve = I(fe, 2), me = ve[0], be = ve[1];
547
+ var pe = (0, r.useCallback)((function(e, t) {
548
+ var r = t.newValue;
549
+ if (me !== r) {
547
550
  S === null || S === void 0 ? void 0 : S(e, {
548
- value: t,
551
+ value: r,
549
552
  name: w
550
553
  });
551
554
  if (!D) {
552
- be(t);
555
+ be(r);
553
556
  }
554
557
  }
555
558
  }), [ D, w, S, me ]);
556
559
  // handlers
557
- var he = (0, t.useCallback)((function() {
558
- te(false);
560
+ var he = (0, r.useCallback)((function() {
561
+ re(false);
559
562
  }), []);
560
- var ye = (0, t.useCallback)((function() {
561
- te(true);
563
+ var ye = (0, r.useCallback)((function() {
564
+ re(true);
562
565
  }), []);
563
- var ge = (0, t.useCallback)((function(e) {
566
+ var ge = (0, r.useCallback)((function(e) {
564
567
  oe(e);
565
568
  }), []);
566
- var we = (0, t.useCallback)((function(e) {
569
+ var we = (0, r.useCallback)((function(e) {
567
570
  ce(e);
568
571
  M(_, e);
569
572
  }), [ _ ]);
570
- var Se = (0, t.useCallback)((function(e) {
571
- var r = J(e, ie);
572
- if (r !== undefined) {
573
- var t = Y({
574
- position: r,
573
+ var Se = (0, r.useCallback)((function(e) {
574
+ var t = J(e, ie);
575
+ if (t !== undefined) {
576
+ var r = Y({
577
+ position: t,
575
578
  max: b,
576
579
  min: y,
577
- step: V
580
+ step: P
578
581
  });
579
582
  pe(e, {
580
- newValue: t
583
+ newValue: r
581
584
  });
582
585
  }
583
- }), [ b, y, pe, ie, V ]);
584
- var Ce = (0, t.useCallback)((function(e) {
585
- var r = me;
586
- if (r !== undefined) {
587
- var t = e.key;
586
+ }), [ b, y, pe, ie, P ]);
587
+ var xe = (0, r.useCallback)((function(e) {
588
+ var t = me;
589
+ if (t !== undefined) {
590
+ var r = e.key;
588
591
  var n;
589
592
  var a = G({
590
593
  direction: "forward",
591
594
  min: y,
592
- step: V,
593
- value: r
595
+ step: P,
596
+ value: t
594
597
  });
595
598
  var i = G({
596
599
  direction: "backward",
597
600
  min: y,
598
- step: V,
599
- value: r
601
+ step: P,
602
+ value: t
600
603
  });
601
- if (t === "ArrowRight") {
602
- n = r + a;
603
- } else if (t === "ArrowLeft") {
604
- n = r - i;
605
- } else if (t === "ArrowUp") {
604
+ if (r === "ArrowRight") {
605
+ n = t + a;
606
+ } else if (r === "ArrowLeft") {
607
+ n = t - i;
608
+ } else if (r === "ArrowUp") {
606
609
  e.preventDefault();
607
- n = r + a;
608
- } else if (t === "ArrowDown") {
610
+ n = t + a;
611
+ } else if (r === "ArrowDown") {
609
612
  e.preventDefault();
610
- n = r - i;
613
+ n = t - i;
611
614
  } else {
612
615
  return;
613
616
  }
614
- r = X({
617
+ t = X({
615
618
  max: b,
616
619
  min: y,
617
620
  value: n
618
621
  });
619
- r = Q({
622
+ t = Q({
620
623
  max: b,
621
624
  min: y,
622
- step: V,
623
- value: r
625
+ step: P,
626
+ value: t
624
627
  });
625
628
  pe(e, {
626
- newValue: r
629
+ newValue: t
627
630
  });
628
631
  }
629
- }), [ b, y, pe, V, me ]);
630
- var xe = (0, t.useCallback)((function(e) {
632
+ }), [ b, y, pe, P, me ]);
633
+ var Ce = (0, r.useCallback)((function(e) {
631
634
  e.preventDefault();
632
635
  se === null || se === void 0 ? void 0 : se.focus();
633
636
  H(true);
634
- te(true);
637
+ re(true);
635
638
  }), [ se ]);
636
- var ke = (0, t.useCallback)((function() {
637
- te(true);
639
+ var ke = (0, r.useCallback)((function() {
640
+ re(true);
638
641
  }), []);
639
- var Ee = (0, t.useCallback)((function() {
642
+ var Ee = (0, r.useCallback)((function() {
640
643
  if (!F) {
641
- te(false);
644
+ re(false);
642
645
  }
643
646
  }), [ F ]);
644
- var $e = (0, t.useCallback)((function(e) {
647
+ var $e = (0, r.useCallback)((function(e) {
645
648
  if (F) {
646
- var r = J(e, ie);
647
- if (r !== undefined) {
648
- var t = Y({
649
- position: r,
649
+ var t = J(e, ie);
650
+ if (t !== undefined) {
651
+ var r = Y({
652
+ position: t,
650
653
  min: y,
651
654
  max: b,
652
- step: V
655
+ step: P
653
656
  });
654
657
  pe(e, {
655
- newValue: t
658
+ newValue: r
656
659
  });
657
660
  }
658
661
  }
659
- }), [ F, b, y, pe, ie, V ]);
660
- var Ae = (0, t.useCallback)((function() {
662
+ }), [ F, b, y, pe, ie, P ]);
663
+ var Ae = (0, r.useCallback)((function() {
661
664
  H(false);
662
- te(false);
665
+ re(false);
663
666
  }), []);
664
- (0, t.useEffect)((function() {
667
+ (0, r.useEffect)((function() {
665
668
  if (false) {}
666
669
  }), [ b, y ]);
667
- (0, t.useEffect)((function() {
670
+ (0, r.useEffect)((function() {
668
671
  // keep valueState in sync with value prop when controlled
669
672
  if (D) {
670
673
  be(j);
671
674
  }
672
675
  }), [ D, j ]);
673
676
  var Oe = i && "disabled" || u && "error" || "default";
674
- var Te = ee({
677
+ var Ve = ee({
675
678
  value: me,
676
679
  min: y,
677
680
  max: b
678
681
  });
679
- var Ve = V ? Z({
682
+ var Pe = P ? Z({
680
683
  max: b,
681
684
  min: y,
682
685
  sliderBar: ie,
683
- step: V
686
+ step: P
684
687
  }) : undefined;
685
688
  /* eslint-disable jsx-a11y/no-static-element-interactions */
686
- return n().createElement(C, N({
689
+ return n().createElement(x, N({
687
690
  "data-test": "slider",
688
691
  "data-test-disabled": i ? "disabled" : undefined,
689
692
  "data-test-value": me,
@@ -704,12 +707,12 @@
704
707
  onClick: i ? undefined : Se,
705
708
  $state: Oe,
706
709
  $stepAppearance: B
707
- }, n().createElement(x, {
710
+ }, n().createElement(C, {
708
711
  "aria-required": A,
709
712
  "data-test": "bar",
710
713
  ref: ge,
711
- $thumbPosition: Te,
712
- $stepWidth: Ve,
714
+ $thumbPosition: Ve,
715
+ $stepWidth: Pe,
713
716
  $state: Oe
714
717
  }), n().createElement(k, {
715
718
  "aria-describedby": a,
@@ -722,16 +725,16 @@
722
725
  onBlur: he,
723
726
  onMouseEnter: ke,
724
727
  onMouseLeave: Ee,
725
- onKeyDown: i ? undefined : Ce,
726
- onMouseDown: i ? undefined : xe,
728
+ onKeyDown: i ? undefined : xe,
729
+ onMouseDown: i ? undefined : Ce,
727
730
  onFocus: ye,
728
731
  ref: we,
729
732
  role: "slider",
730
733
  disabled: i,
731
- $thumbPosition: Te,
734
+ $thumbPosition: Ve,
732
735
  $state: Oe
733
736
  }), n().createElement(d(), {
734
- open: re,
737
+ open: te,
735
738
  anchor: se,
736
739
  align: "center"
737
740
  }, n().createElement(E, null, o || me))), p !== null && n().createElement($, {
@@ -739,8 +742,8 @@
739
742
  $disabled: i
740
743
  }, p || b));
741
744
  }
742
- re.propTypes = K;
743
- /* harmony default export */ const te = re;
745
+ te.propTypes = K;
746
+ /* harmony default export */ const re = te;
744
747
  // CONCATENATED MODULE: ./src/Slider/index.ts
745
- module.exports = r;
748
+ module.exports = t;
746
749
  /******/})();