@splunk/react-ui 5.0.0-beta.2 → 5.0.0-beta.4

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 (187) hide show
  1. package/Accordion.js +185 -243
  2. package/Animation.js +2 -2
  3. package/Button.js +4 -4
  4. package/ButtonGroup.js +10 -11
  5. package/ButtonSimple.js +48 -42
  6. package/CHANGELOG.md +26 -0
  7. package/CHANGELOG.v5.mdx +81 -0
  8. package/Calendar.js +352 -469
  9. package/Card.js +178 -321
  10. package/Chip.js +154 -296
  11. package/Clickable.js +30 -30
  12. package/Code.js +64 -49
  13. package/Color.js +546 -462
  14. package/ComboBox.js +575 -767
  15. package/Date.js +144 -136
  16. package/Divider.js +29 -26
  17. package/DualListbox.js +441 -444
  18. package/File.js +707 -981
  19. package/FormRows.js +260 -286
  20. package/Image.js +124 -251
  21. package/JSONTree.js +129 -129
  22. package/Layout.d.ts +2 -0
  23. package/Link.js +12 -12
  24. package/MIGRATION.mdx +22 -1
  25. package/MIGRATION.v5.mdx +12 -1
  26. package/Menu.js +76 -76
  27. package/Message.js +77 -100
  28. package/MessageBar.js +141 -251
  29. package/Modal.js +42 -40
  30. package/ModalLayer.js +12 -12
  31. package/Multiselect.js +1989 -2362
  32. package/NonInteractiveCheckbox.js +30 -118
  33. package/Number.js +75 -73
  34. package/Popover.js +348 -350
  35. package/Progress.js +1 -1
  36. package/RadioBar.js +136 -136
  37. package/Resize.js +62 -65
  38. package/Scroll.js +2 -2
  39. package/Select.js +281 -283
  40. package/SidePanel.js +53 -55
  41. package/Slider.js +370 -364
  42. package/SlidingPanels.js +100 -102
  43. package/SplitButton.js +170 -343
  44. package/StaticContent.js +15 -13
  45. package/StepBar.js +61 -60
  46. package/Switch.js +150 -164
  47. package/TabBar.js +544 -417
  48. package/Table.js +1711 -1540
  49. package/Text.js +28 -26
  50. package/TextArea.js +26 -26
  51. package/Tooltip.js +416 -562
  52. package/TransitionOpen.js +179 -158
  53. package/Tree.d.ts +2 -0
  54. package/WaitSpinner.js +1 -1
  55. package/package.json +7 -9
  56. package/types/src/Accordion/Accordion.d.ts +14 -21
  57. package/types/src/Accordion/AccordionContext.d.ts +0 -1
  58. package/types/src/Animation/Animation.d.ts +2 -3
  59. package/types/src/AnimationToggle/docs/examples/Provider.d.ts +2 -2
  60. package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts +2 -2
  61. package/types/src/AnimationToggle/useAnimationToggle.d.ts +1 -1
  62. package/types/src/Button/Button.d.ts +2 -2
  63. package/types/src/ButtonGroup/ButtonGroupContext.d.ts +0 -1
  64. package/types/src/ButtonSimple/ButtonSimple.d.ts +1 -3
  65. package/types/src/ButtonSimple/mixin.d.ts +1 -1
  66. package/types/src/Calendar/Calendar.d.ts +2 -2
  67. package/types/src/Calendar/{DateTable.d.ts → DateGrid.d.ts} +9 -9
  68. package/types/src/Calendar/Day.d.ts +8 -4
  69. package/types/src/Card/Card.d.ts +27 -14
  70. package/types/src/CardLayout/CardLayoutContext.d.ts +0 -1
  71. package/types/src/CardLayout/docs/examples/Interactive.d.ts +2 -2
  72. package/types/src/Clickable/Clickable.d.ts +1 -1
  73. package/types/src/CollapsiblePanel/SingleOpenPanelGroupContext.d.ts +0 -1
  74. package/types/src/Color/Color.d.ts +3 -3
  75. package/types/src/Color/ColorInput.d.ts +27 -0
  76. package/types/src/Color/Palette.d.ts +11 -18
  77. package/types/src/Color/Swatch.d.ts +3 -1
  78. package/types/src/ComboBox/ComboBox.d.ts +46 -50
  79. package/types/src/ComboBox/Option.d.ts +34 -18
  80. package/types/src/ControlGroup/docs/examples/CustomizedLabelTarget.d.ts +2 -2
  81. package/types/src/Date/Date.d.ts +3 -2
  82. package/types/src/Date/docs/examples/Controlled.d.ts +2 -2
  83. package/types/src/Date/docs/examples/HighlightToday.d.ts +2 -2
  84. package/types/src/DefinitionList/DefinitionListContext.d.ts +0 -1
  85. package/types/src/Divider/Divider.d.ts +14 -6
  86. package/types/src/Divider/docs/examples/Appearance.d.ts +3 -0
  87. package/types/src/DualListbox/DualListbox.d.ts +5 -1
  88. package/types/src/File/File.d.ts +6 -6
  89. package/types/src/File/FileContext.d.ts +0 -1
  90. package/types/src/File/Item.d.ts +11 -3
  91. package/types/src/File/ItemIcon.d.ts +7 -0
  92. package/types/src/File/docs/examples/Disabled.d.ts +2 -2
  93. package/types/src/File/docs/examples/DropAnywhere.d.ts +2 -2
  94. package/types/src/File/docs/examples/Multi.d.ts +2 -2
  95. package/types/src/File/docs/examples/Single.d.ts +2 -2
  96. package/types/src/FormRows/FormRows.d.ts +8 -8
  97. package/types/src/FormRows/FormRowsContext.d.ts +1 -2
  98. package/types/src/FormRows/Row.d.ts +2 -2
  99. package/types/src/FormRows/RowInternal.d.ts +1 -1
  100. package/types/src/FormRows/SortableRow.d.ts +3 -3
  101. package/types/src/FormRows/docs/examples/Basic.d.ts +2 -2
  102. package/types/src/FormRows/docs/examples/Header.d.ts +2 -2
  103. package/types/src/FormRows/docs/examples/Menu.d.ts +2 -2
  104. package/types/src/FormRows/docs/examples/ReorderOnly.d.ts +2 -2
  105. package/types/src/Image/Image.d.ts +1 -4
  106. package/types/src/JSONTree/docs/examples/Events.d.ts +2 -2
  107. package/types/src/Layout/Layout.d.ts +1 -0
  108. package/types/src/Link/icons/External.d.ts +1 -2
  109. package/types/src/Menu/Divider.d.ts +1 -1
  110. package/types/src/Menu/MenuContext.d.ts +0 -1
  111. package/types/src/MessageBar/MessageBar.d.ts +5 -1
  112. package/types/src/Modal/ModalContext.d.ts +0 -1
  113. package/types/src/Multiselect/Compact.d.ts +49 -21
  114. package/types/src/Multiselect/Multiselect.d.ts +73 -30
  115. package/types/src/Multiselect/Normal.d.ts +46 -57
  116. package/types/src/Multiselect/Option.d.ts +42 -18
  117. package/types/src/Multiselect/docs/examples/Children.d.ts +2 -2
  118. package/types/src/Multiselect/docs/examples/Controlled.d.ts +2 -2
  119. package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts +2 -2
  120. package/types/src/Multiselect/docs/examples/Disabled.d.ts +2 -2
  121. package/types/src/Multiselect/docs/examples/Error.d.ts +2 -2
  122. package/types/src/Multiselect/docs/examples/Fetching.d.ts +2 -2
  123. package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts +2 -2
  124. package/types/src/Multiselect/docs/examples/NewValues.d.ts +2 -2
  125. package/types/src/Multiselect/docs/examples/TabInput.d.ts +2 -2
  126. package/types/src/NonInteractiveCheckbox/NonInteractiveCheckbox.d.ts +9 -8
  127. package/types/src/Number/Number.d.ts +1 -0
  128. package/types/src/Number/docs/examples/Basic.d.ts +2 -2
  129. package/types/src/Number/docs/examples/Limits.d.ts +2 -2
  130. package/types/src/Number/docs/examples/Locale.d.ts +2 -2
  131. package/types/src/Popover/Popover.d.ts +1 -1
  132. package/types/src/Popover/PopoverMenuContext.d.ts +0 -1
  133. package/types/src/RadioBar/RadioBar.d.ts +1 -1
  134. package/types/src/RadioBar/RadioBarContext.d.ts +0 -1
  135. package/types/src/RadioList/RadioListContext.d.ts +0 -1
  136. package/types/src/Scroll/Inner.d.ts +1 -1
  137. package/types/src/Scroll/docs/examples/Controlled.d.ts +2 -2
  138. package/types/src/Search/Search.d.ts +2 -2
  139. package/types/src/Select/SelectBase.d.ts +2 -2
  140. package/types/src/SidePanel/SidePanel.d.ts +8 -3
  141. package/types/src/Slider/Slider.d.ts +1 -1
  142. package/types/src/Slider/docs/examples/Controlled.d.ts +2 -2
  143. package/types/src/Slider/docs/examples/CustomLabels.d.ts +2 -2
  144. package/types/src/Slider/getStepMarksBackground.d.ts +8 -0
  145. package/types/src/SlidingPanels/Panel.d.ts +2 -2
  146. package/types/src/SlidingPanels/SlidingPanels.d.ts +2 -2
  147. package/types/src/SlidingPanels/docs/examples/Basic.d.ts +2 -2
  148. package/types/src/SlidingPanels/docs/examples/Dropdown.d.ts +2 -2
  149. package/types/src/SplitButton/Item.d.ts +34 -20
  150. package/types/src/SplitButton/SplitButton.d.ts +4 -1
  151. package/types/src/StaticContent/StaticContent.d.ts +3 -1
  152. package/types/src/StepBar/Step.d.ts +1 -1
  153. package/types/src/StepBar/StepBar.d.ts +1 -1
  154. package/types/src/StepBar/StepBarContext.d.ts +0 -1
  155. package/types/src/Switch/Switch.d.ts +1 -9
  156. package/types/src/Switch/docs/examples/Basic.d.ts +2 -2
  157. package/types/src/Switch/docs/examples/Disabled.d.ts +2 -2
  158. package/types/src/TabBar/Tab.d.ts +12 -5
  159. package/types/src/TabBar/TabBar.d.ts +4 -3
  160. package/types/src/TabBar/TabBarContext.d.ts +7 -2
  161. package/types/src/Table/Head.d.ts +4 -15
  162. package/types/src/Table/HeadCell.d.ts +23 -25
  163. package/types/src/Table/HeadDropdownCell.d.ts +23 -26
  164. package/types/src/Table/HeadInner.d.ts +4 -10
  165. package/types/src/Table/Row.d.ts +6 -6
  166. package/types/src/Table/Table.d.ts +3 -8
  167. package/types/src/Table/TableContext.d.ts +0 -1
  168. package/types/src/Table/Toggle.d.ts +1 -1
  169. package/types/src/Text/Text.d.ts +5 -1
  170. package/types/src/Tooltip/Tooltip.d.ts +26 -58
  171. package/types/src/Tooltip/docs/examples/Controlled.d.ts +2 -2
  172. package/types/src/TransitionOpen/TransitionOpen.d.ts +6 -1
  173. package/types/src/Tree/TreeContext.d.ts +0 -1
  174. package/types/src/useForceUpdate/useForceUpdate.d.ts +0 -1
  175. package/types/src/useResizeObserver/useResizeObserver.d.ts +2 -1
  176. package/types/src/utils/types.d.ts +2 -3
  177. package/useResizeObserver.js +26 -19
  178. package/types/src/File/Icon.d.ts +0 -3
  179. package/types/src/File/IconCloud.d.ts +0 -3
  180. package/types/src/File/PaperClip.d.ts +0 -3
  181. package/types/src/File/Retry.d.ts +0 -2
  182. package/types/src/File/Trash.d.ts +0 -3
  183. package/types/src/FormRows/icons/FormRowsPlusIcon.d.ts +0 -3
  184. package/types/src/Image/icons/Cross.d.ts +0 -3
  185. package/types/src/Multiselect/docs/examples/CompactSelectAll.d.ts +0 -3
  186. package/types/src/Table/docs/examples/prisma/DockedHeaderScrollbar.d.ts +0 -3
  187. package/types/src/Tooltip/InfoIcon.d.ts +0 -4
package/Progress.js CHANGED
@@ -88,7 +88,7 @@
88
88
  var y = c().div.withConfig({
89
89
  displayName: "ProgressStyles__StyledProgressWrapper",
90
90
  componentId: "csowex-0"
91
- })([ "height:", ";position:relative;border:1px solid ", ";border-radius:", ";background:", ";&::before{display:block;position:absolute;top:-1px;left:-1px;content:'';border-radius:", ";height:100%;", " ", "}" ], b, d.variables.interactiveColorBorder, d.variables.borderRadius, d.variables.neutral100, d.variables.borderRadius, (function(e) {
91
+ })([ "", " height:", ";position:relative;border:1px solid ", ";border-radius:", ";background:", ";&::before{display:block;position:absolute;top:-1px;left:-1px;content:'';border-radius:", ";height:100%;", " ", "}" ], d.mixins.reset("block"), b, d.variables.interactiveColorBorder, d.variables.borderRadius, d.variables.neutral100, d.variables.borderRadius, (function(e) {
92
92
  var r = e.$animated, t = e.$type;
93
93
  // Animated is only supported for the info type.
94
94
  // This is enforced in the component and duplicating here
package/RadioBar.js CHANGED
@@ -61,8 +61,8 @@
61
61
  e.r(r);
62
62
  // EXPORTS
63
63
  e.d(r, {
64
- Option: () => /* reexport */ A,
65
- default: () => /* reexport */ Q
64
+ Option: () => /* reexport */ B,
65
+ default: () => /* reexport */ G
66
66
  });
67
67
  // CONCATENATED MODULE: external "react"
68
68
  const t = require("react");
@@ -71,8 +71,8 @@
71
71
  const o = require("prop-types");
72
72
  var a = e.n(o);
73
73
  // CONCATENATED MODULE: external "lodash/omit"
74
- const l = require("lodash/omit");
75
- var i = e.n(l);
74
+ const i = require("lodash/omit");
75
+ var l = e.n(i);
76
76
  // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
77
77
  const u = require("@splunk/ui-utils/keyboard");
78
78
  // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
@@ -88,30 +88,29 @@
88
88
  var p = e.n(f);
89
89
  // CONCATENATED MODULE: ./src/RadioBar/OptionStyles.ts
90
90
  var y = 10;
91
- var m = "2px";
92
- var g = v()(p()).withConfig({
91
+ var m = v()(p()).withConfig({
93
92
  displayName: "OptionStyles__StyledButton",
94
93
  componentId: "fyq77p-0"
95
- })([ "border:", " solid ", ";border-radius:0;flex-grow:0;height:", ";min-height:", ";min-width:0;padding:", " ", ";z-index:", ";&&{color:", ";}&:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}&:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:not(:last-child){margin-right:-", ";}&&:focus{background-color:", ";border:0;box-shadow:", ";color:", ";z-index:", ";}&:not([disabled],[aria-disabled='true']){", "}&[disabled],&[aria-disabled='true']{background-color:", ";color:", ";z-index:0;}" ], m, b.variables.borderColor, b.variables.inputHeight, b.variables.inputHeight, b.variables.spacingXSmall, b.variables.spacingSmall, y, b.variables.contentColorDefault, b.variables.borderRadius, b.variables.borderRadius, b.variables.borderRadius, b.variables.borderRadius, m, b.variables.actionColorBackgroundSecondaryActive, b.variables.focusShadowInset, b.variables.contentColorActive, y * 5, (0,
94
+ })([ "border:", " solid ", ";border-radius:0;height:", ";min-height:", ";min-width:0;padding:", " ", ";z-index:", ";&&{color:", ";}&:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}&:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:not(:last-child){margin-right:-", ";}&&:focus{background-color:", ";box-shadow:", ";color:", ";z-index:", ";border:0;span{padding:0 ", ";}}&:not([disabled],[aria-disabled='true']){", "}&[disabled],&[aria-disabled='true']{background-color:", ";color:", ";z-index:0;}" ], b.variables.inputBorderWidth, b.variables.borderColor, b.variables.inputHeight, b.variables.inputHeight, b.variables.spacingXSmall, b.variables.spacingSmall, y, b.variables.contentColorDefault, b.variables.borderRadius, b.variables.borderRadius, b.variables.borderRadius, b.variables.borderRadius, b.variables.inputBorderWidth, b.variables.actionColorBackgroundSecondaryActive, b.variables.focusShadowInset, b.variables.contentColorActive, y * 5, b.variables.inputBorderWidth, (0,
96
95
  b.pickVariant)("$optionSelected", {
97
- true: (0, s.css)([ "background-color:", ";border-color:", ";border-width:", ";color:", ";margin-left:-", ";z-index:", ";" ], b.variables.actionColorBackgroundSecondaryActive, b.variables.actionColorBorderSecondaryActive, m, b.variables.contentColorActive, m, y * 4),
96
+ true: (0, s.css)([ "background-color:", ";border-color:", ";border-width:", ";color:", ";z-index:", ";" ], b.variables.actionColorBackgroundSecondaryActive, b.variables.actionColorBorderSecondaryActive, b.variables.inputBorderWidth, b.variables.contentColorActive, y * 4),
98
97
  false: (0, s.css)([ "&:hover{background-color:", ";border-color:", ";color:", ";z-index:", ";}" ], b.variables.actionColorBackgroundSecondaryHover, b.variables.borderColor, b.variables.contentColorActive, y * 3)
99
98
  }), b.variables.actionColorBackgroundSecondaryDisabled, b.variables.contentColorDisabled);
100
- var h = v().div.withConfig({
99
+ var g = v().div.withConfig({
101
100
  displayName: "OptionStyles__StyledLabel",
102
101
  componentId: "fyq77p-1"
103
102
  })([ "", " flex:0 1 auto;" ], b.mixins.ellipsis);
104
- var O = v().div.withConfig({
103
+ var h = v().div.withConfig({
105
104
  displayName: "OptionStyles__StyledAdornment",
106
105
  componentId: "fyq77p-2"
107
106
  })([ "display:flex;" ]);
108
107
  // CONCATENATED MODULE: ./src/RadioBar/RadioBarContext.tsx
109
- var S = (0, t.createContext)({});
110
- S.displayName = "RadioBar";
111
- /* harmony default export */ const w = S;
108
+ var O = (0, t.createContext)({});
109
+ O.displayName = "RadioBar";
110
+ /* harmony default export */ const S = O;
112
111
  // CONCATENATED MODULE: ./src/RadioBar/Option.tsx
113
- function C() {
114
- return C = Object.assign ? Object.assign.bind() : function(e) {
112
+ function w() {
113
+ return w = Object.assign ? Object.assign.bind() : function(e) {
115
114
  for (var r = 1; r < arguments.length; r++) {
116
115
  var t = arguments[r];
117
116
  for (var n in t) {
@@ -119,11 +118,11 @@
119
118
  }
120
119
  }
121
120
  return e;
122
- }, C.apply(null, arguments);
121
+ }, w.apply(null, arguments);
123
122
  }
124
- function j(e, r) {
123
+ function C(e, r) {
125
124
  if (null == e) return {};
126
- var t, n, o = k(e, r);
125
+ var t, n, o = j(e, r);
127
126
  if (Object.getOwnPropertySymbols) {
128
127
  var a = Object.getOwnPropertySymbols(e);
129
128
  for (n = 0; n < a.length; n++) {
@@ -132,7 +131,7 @@
132
131
  }
133
132
  return o;
134
133
  }
135
- function k(e, r) {
134
+ function j(e, r) {
136
135
  if (null == e) return {};
137
136
  var t = {};
138
137
  for (var n in e) {
@@ -143,7 +142,7 @@
143
142
  }
144
143
  return t;
145
144
  }
146
- var x = {
145
+ var k = {
147
146
  disabled: a().bool,
148
147
  startAdornment: a().node,
149
148
  endAdornment: a().node,
@@ -155,19 +154,19 @@
155
154
  /** The value of the `Option`. */
156
155
  value: a().any.isRequired
157
156
  };
158
- function P(e) {
159
- var r = e.disabled, o = e.label, a = e.selected, l = e.startAdornment, i = e.endAdornment, u = e.value, d = e.role, c = d === void 0 ? "radio" : d, s = j(e, [ "disabled", "label", "selected", "startAdornment", "endAdornment", "value", "role" ]);
157
+ function x(e) {
158
+ var r = e.disabled, o = e.label, a = e.selected, i = e.startAdornment, l = e.endAdornment, u = e.value, d = e.role, c = d === void 0 ? "radio" : d, s = C(e, [ "disabled", "label", "selected", "startAdornment", "endAdornment", "value", "role" ]);
160
159
  // @docs-props-type OptionPropsBase
161
- var v = (0, t.useContext)(w), b = v.onClick, f = v.error, p = v.onKeyDown, y = v.firstValue, m = v.selectedValue;
162
- var S = -1;
163
- if (m) {
164
- if (u === m) {
165
- S = 0;
160
+ var v = (0, t.useContext)(S), b = v.onClick, f = v.error, p = v.onKeyDown, y = v.firstValue, O = v.selectedValue;
161
+ var j = -1;
162
+ if (O) {
163
+ if (u === O) {
164
+ j = 0;
166
165
  }
167
166
  } else if (u === y) {
168
- S = 0;
167
+ j = 0;
169
168
  }
170
- var k = S;
169
+ var k = j;
171
170
  var x = (0, t.useCallback)((function(e) {
172
171
  if (!a) {
173
172
  b === null || b === void 0 ? void 0 : b(e, {
@@ -176,14 +175,14 @@
176
175
  });
177
176
  }
178
177
  }), [ o, b, a, u ]);
179
- var P = (0, t.useCallback)((function(e) {
178
+ var B = (0, t.useCallback)((function(e) {
180
179
  return p === null || p === void 0 ? void 0 : p(e, {
181
180
  value: u,
182
181
  label: o
183
182
  });
184
183
  }), [ o, p, u ]);
185
184
 
186
- return n().createElement(g, C({
185
+ return n().createElement(m, w({
187
186
  "aria-invalid": f,
188
187
  "data-test": "option",
189
188
  "data-test-value": u,
@@ -196,33 +195,33 @@
196
195
  role: c,
197
196
  "aria-checked": a,
198
197
  tabIndex: k,
199
- onKeyDown: P
200
- }), l && n().createElement(O, null, l), o && n().createElement(h, null, o), i && n().createElement(O, null, i));
198
+ onKeyDown: B
199
+ }), i && n().createElement(h, null, i), o && n().createElement(g, null, o), l && n().createElement(h, null, l));
201
200
  }
202
- P.propTypes = x;
203
- /* harmony default export */ const A = P;
201
+ x.propTypes = k;
202
+ /* harmony default export */ const B = x;
204
203
  // CONCATENATED MODULE: external "@splunk/react-ui/Box"
205
- const B = require("@splunk/react-ui/Box");
206
- var E = e.n(B);
204
+ const P = require("@splunk/react-ui/Box");
205
+ var A = e.n(P);
207
206
  // CONCATENATED MODULE: ./src/RadioBar/RadioBarStyles.ts
208
- var q = v()(E()).withConfig({
207
+ var E = v()(A()).withConfig({
209
208
  displayName: "RadioBarStyles__StyledRadioBar",
210
209
  componentId: "gg1b79-0"
211
210
  })([ "height:", ";", "" ], b.variables.inputHeight, (function(e) {
212
211
  var r = e.$error;
213
- return r && (0, s.css)([ "& > ", "{border-color:", ";:not([disabled],[aria-disabled='true']){&:hover{border-color:", ";}&[aria-checked='true']{background-color:", ";border-color:", ";}}}" ], g, b.variables.actionColorBorderDestructiveSecondary, b.variables.actionColorBorderDestructiveSecondary, b.variables.actionColorBackgroundDestructiveSecondaryActive, b.variables.actionColorBorderDestructiveSecondaryActive);
212
+ return r && (0, s.css)([ "& > ", "{border-color:", ";:not([disabled],[aria-disabled='true']){&:hover{border-color:", ";}&[aria-checked='true']{background-color:", ";border-color:", ";}}}" ], m, b.variables.actionColorBorderDestructiveSecondary, b.variables.actionColorBorderDestructiveSecondary, b.variables.actionColorBackgroundDestructiveSecondaryActive, b.variables.actionColorBorderDestructiveSecondaryActive);
214
213
  }));
215
214
  // CONCATENATED MODULE: ./src/RadioBar/RadioBar.tsx
216
- function D(e) {
215
+ function R(e) {
217
216
  "@babel/helpers - typeof";
218
- return D = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
217
+ return R = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
219
218
  return typeof e;
220
219
  } : function(e) {
221
220
  return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
222
- }, D(e);
221
+ }, R(e);
223
222
  }
224
- function R() {
225
- return R = Object.assign ? Object.assign.bind() : function(e) {
223
+ function q() {
224
+ return q = Object.assign ? Object.assign.bind() : function(e) {
226
225
  for (var r = 1; r < arguments.length; r++) {
227
226
  var t = arguments[r];
228
227
  for (var n in t) {
@@ -230,9 +229,9 @@
230
229
  }
231
230
  }
232
231
  return e;
233
- }, R.apply(null, arguments);
232
+ }, q.apply(null, arguments);
234
233
  }
235
- function I(e, r) {
234
+ function D(e, r) {
236
235
  var t = Object.keys(e);
237
236
  if (Object.getOwnPropertySymbols) {
238
237
  var n = Object.getOwnPropertySymbols(e);
@@ -242,87 +241,87 @@
242
241
  }
243
242
  return t;
244
243
  }
245
- function _(e) {
244
+ function I(e) {
246
245
  for (var r = 1; r < arguments.length; r++) {
247
246
  var t = null != arguments[r] ? arguments[r] : {};
248
- r % 2 ? I(Object(t), !0).forEach((function(r) {
249
- T(e, r, t[r]);
250
- })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : I(Object(t)).forEach((function(r) {
247
+ r % 2 ? D(Object(t), !0).forEach((function(r) {
248
+ _(e, r, t[r]);
249
+ })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : D(Object(t)).forEach((function(r) {
251
250
  Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
252
251
  }));
253
252
  }
254
253
  return e;
255
254
  }
256
- function T(e, r, t) {
257
- return (r = V(r)) in e ? Object.defineProperty(e, r, {
255
+ function _(e, r, t) {
256
+ return (r = T(r)) in e ? Object.defineProperty(e, r, {
258
257
  value: t,
259
258
  enumerable: !0,
260
259
  configurable: !0,
261
260
  writable: !0
262
261
  }) : e[r] = t, e;
263
262
  }
264
- function V(e) {
265
- var r = M(e, "string");
266
- return "symbol" == D(r) ? r : r + "";
263
+ function T(e) {
264
+ var r = V(e, "string");
265
+ return "symbol" == R(r) ? r : r + "";
267
266
  }
268
- function M(e, r) {
269
- if ("object" != D(e) || !e) return e;
267
+ function V(e, r) {
268
+ if ("object" != R(e) || !e) return e;
270
269
  var t = e[Symbol.toPrimitive];
271
270
  if (void 0 !== t) {
272
271
  var n = t.call(e, r || "default");
273
- if ("object" != D(n)) return n;
272
+ if ("object" != R(n)) return n;
274
273
  throw new TypeError("@@toPrimitive must return a primitive value.");
275
274
  }
276
275
  return ("string" === r ? String : Number)(e);
277
276
  }
278
- function N(e, r) {
279
- return F(e) || K(e, r) || z(e, r) || $();
277
+ function M(e, r) {
278
+ return W(e) || H(e, r) || $(e, r) || N();
280
279
  }
281
- function $() {
280
+ function N() {
282
281
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
283
282
  }
284
- function z(e, r) {
283
+ function $(e, r) {
285
284
  if (e) {
286
- if ("string" == typeof e) return H(e, r);
285
+ if ("string" == typeof e) return z(e, r);
287
286
  var t = {}.toString.call(e).slice(8, -1);
288
- return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? H(e, r) : void 0;
287
+ 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) ? z(e, r) : void 0;
289
288
  }
290
289
  }
291
- function H(e, r) {
290
+ function z(e, r) {
292
291
  (null == r || r > e.length) && (r = e.length);
293
292
  for (var t = 0, n = Array(r); t < r; t++) {
294
293
  n[t] = e[t];
295
294
  }
296
295
  return n;
297
296
  }
298
- function K(e, r) {
297
+ function H(e, r) {
299
298
  var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
300
299
  if (null != t) {
301
- var n, o, a, l, i = [], u = !0, d = !1;
300
+ var n, o, a, i, l = [], u = !0, d = !1;
302
301
  try {
303
302
  if (a = (t = t.call(e)).next, 0 === r) {
304
303
  if (Object(t) !== t) return;
305
304
  u = !1;
306
- } else for (;!(u = (n = a.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
305
+ } else for (;!(u = (n = a.call(t)).done) && (l.push(n.value), l.length !== r); u = !0) {
307
306
  }
308
307
  } catch (e) {
309
308
  d = !0, o = e;
310
309
  } finally {
311
310
  try {
312
- if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
311
+ if (!u && null != t["return"] && (i = t["return"](), Object(i) !== i)) return;
313
312
  } finally {
314
313
  if (d) throw o;
315
314
  }
316
315
  }
317
- return i;
316
+ return l;
318
317
  }
319
318
  }
320
- function F(e) {
319
+ function W(e) {
321
320
  if (Array.isArray(e)) return e;
322
321
  }
323
- function L(e, r) {
322
+ function K(e, r) {
324
323
  if (null == e) return {};
325
- var t, n, o = U(e, r);
324
+ var t, n, o = F(e, r);
326
325
  if (Object.getOwnPropertySymbols) {
327
326
  var a = Object.getOwnPropertySymbols(e);
328
327
  for (n = 0; n < a.length; n++) {
@@ -331,7 +330,7 @@
331
330
  }
332
331
  return o;
333
332
  }
334
- function U(e, r) {
333
+ function F(e, r) {
335
334
  if (null == e) return {};
336
335
  var t = {};
337
336
  for (var n in e) {
@@ -342,7 +341,7 @@
342
341
  }
343
342
  return t;
344
343
  }
345
- /** @public */ var X = {
344
+ /** @public */ var L = {
346
345
  children: a().node,
347
346
  defaultValue: a().any,
348
347
  describedBy: a().string,
@@ -358,22 +357,22 @@
358
357
  value: a().any
359
358
  };
360
359
  // TODO(SUI-7012): Once converted to a functional component, this function can be removed and RadioBar should use useRovingFocus hook
361
- var G = function e(r, t, n, o) {
360
+ var U = function e(r, t, n, o) {
362
361
  var a = r === "forward" ? 1 : -1;
363
- var l = r === "forward" ? "nextSibling" : "previousSibling";
364
- var i = r === "forward" ? "firstElementChild" : "lastElementChild";
362
+ var i = r === "forward" ? "nextSibling" : "previousSibling";
363
+ var l = r === "forward" ? "firstElementChild" : "lastElementChild";
365
364
  var u = r === "forward" ? 0 : t - 1;
366
- var d = n[l];
365
+ var d = n[i];
367
366
  var c = null;
368
367
  var s = o + a;
369
368
  while (d !== n && c === null) {
370
369
  if (d === null) {
371
370
  var v;
372
- d = (v = n.parentElement) === null || v === void 0 ? void 0 : v[i];
371
+ d = (v = n.parentElement) === null || v === void 0 ? void 0 : v[l];
373
372
  s = u;
374
373
  }
375
374
  if (d.disabled) {
376
- var b = d[l];
375
+ var b = d[i];
377
376
  d = b;
378
377
  s += a;
379
378
  } else {
@@ -387,17 +386,17 @@
387
386
  };
388
387
  /**
389
388
  * RadioBar is a form control that provides the ability to select one option out of a group.
390
- */ function J(e) {
391
- var r = e.children, o = e.defaultValue, a = e.describedBy, l = e.error, d = e.labelledBy, s = e.name, v = e.onChange, b = e.required, f = e.role, p = f === void 0 ? "radiogroup" : f, y = e.value, m = L(e, [ "children", "defaultValue", "describedBy", "error", "labelledBy", "name", "onChange", "required", "role", "value" ]);
389
+ */ function X(e) {
390
+ var r = e.children, o = e.defaultValue, a = e.describedBy, i = e.elementRef, d = e.error, s = e.labelledBy, v = e.name, b = e.onChange, f = e.required, p = e.role, y = p === void 0 ? "radiogroup" : p, m = e.value, g = K(e, [ "children", "defaultValue", "describedBy", "elementRef", "error", "labelledBy", "name", "onChange", "required", "role", "value" ]);
392
391
  // @docs-props-type RadioBarPropsBase
393
- var g = c()({
392
+ var h = c()({
394
393
  componentName: "RadioBar",
395
394
  /* eslint-disable-next-line prefer-rest-params */
396
395
  componentProps: arguments[0]
397
396
  });
398
- var h = (0, t.useState)(o), O = N(h, 2), S = O[0], C = O[1];
399
- var j = g ? y : S;
400
- var k = (0, t.useMemo)((function() {
397
+ var O = (0, t.useState)(o), w = M(O, 2), C = w[0], j = w[1];
398
+ var k = h ? m : C;
399
+ var x = (0, t.useMemo)((function() {
401
400
  // Everything in here is grouped because together they are based on children changing
402
401
  var e = t.Children.toArray(r).filter(t.isValidElement);
403
402
  var n = e.map((function(e) {
@@ -410,9 +409,9 @@
410
409
  var a = e.map((function(e, r) {
411
410
 
412
411
  return (0, t.cloneElement)(e, {
413
- selected: e.props.value === j,
412
+ selected: e.props.value === k,
414
413
  key: e.key || r,
415
- role: p === "radiogroup" ? "radio" : "menuitemradio"
414
+ role: y === "radiogroup" ? "radio" : "menuitemradio"
416
415
  });
417
416
  }));
418
417
  return {
@@ -420,81 +419,82 @@
420
419
  disabled: o,
421
420
  filteredValues: n
422
421
  };
423
- }), [ r, p, j ]), x = k.childrenFormatted, P = k.disabled, A = k.filteredValues;
424
- var B = A[0];
425
- var E = (0, t.useMemo)((function() {
426
- return y == null || A.includes(j);
427
- }), [ A, j, y ]);
422
+ }), [ r, y, k ]), B = x.childrenFormatted, P = x.disabled, A = x.filteredValues;
423
+ var R = A[0];
424
+ var D = (0, t.useMemo)((function() {
425
+ return m == null || A.includes(k);
426
+ }), [ A, k, m ]);
428
427
  (0, t.useEffect)((function() {
429
428
  if (false) {}
430
- }), [ A, j, E ]);
431
- var D = (0, t.useCallback)((function(e, r) {
432
- if (y !== r.value) {
433
- v === null || v === void 0 ? void 0 : v(e, _({
434
- name: s
429
+ }), [ A, k, D ]);
430
+ var _ = (0, t.useCallback)((function(e, r) {
431
+ if (m !== r.value) {
432
+ b === null || b === void 0 ? void 0 : b(e, I({
433
+ name: v
435
434
  }, r));
436
- if (!g) {
437
- C(r.value);
435
+ if (!h) {
436
+ j(r.value);
438
437
  }
439
438
  }
440
- }), [ g, s, v, y ]);
441
- var I = (0, t.useCallback)((function(e, r) {
439
+ }), [ h, v, b, m ]);
440
+ var T = (0, t.useCallback)((function(e, r) {
442
441
  var t = r.value, n = r.label;
443
442
  var o = (0, u.keycode)(e.nativeEvent);
444
443
  var a = e.currentTarget;
445
- var l = null;
446
- var i = 0;
444
+ var i = null;
445
+ var l = 0;
447
446
  var d = A.indexOf(t);
448
447
  if (o === "down" || o === "right") {
449
448
  e.preventDefault();
450
- var c = G("forward", A.length, a, d), s = c.nextTargetRes, v = c.nextIndexRes;
451
- l = s;
452
- i = v;
449
+ var c = U("forward", A.length, a, d), s = c.nextTargetRes, v = c.nextIndexRes;
450
+ i = s;
451
+ l = v;
453
452
  } else if (o === "up" || o === "left") {
454
453
  e.preventDefault();
455
- var b = G("backward", A.length, a, d), f = b.nextTargetRes, p = b.nextIndexRes;
456
- l = f;
457
- i = p;
454
+ var b = U("backward", A.length, a, d), f = b.nextTargetRes, p = b.nextIndexRes;
455
+ i = f;
456
+ l = p;
458
457
  }
459
- if (l) {
458
+ if (i) {
460
459
  var y;
461
- (y = l) === null || y === void 0 ? void 0 : y.focus();
462
- var m = A[i];
463
- D(e, {
460
+ (y = i) === null || y === void 0 ? void 0 : y.focus();
461
+ var m = A[l];
462
+ _(e, {
464
463
  value: m,
465
464
  label: n
466
465
  });
467
466
  }
468
- }), [ A, D ]);
469
- var T = (0, t.useMemo)((function() {
467
+ }), [ A, _ ]);
468
+ var V = (0, t.useMemo)((function() {
470
469
  return {
471
- error: l,
472
- firstValue: B,
473
- onClick: D,
474
- onKeyDown: I,
475
- selectedValue: E ? j : undefined
470
+ error: d,
471
+ firstValue: R,
472
+ onClick: _,
473
+ onKeyDown: T,
474
+ selectedValue: D ? k : undefined
476
475
  };
477
- }), [ l, B, D, I, E, j ]);
476
+ }), [ d, R, _, T, D, k ]);
478
477
 
479
- return n().createElement(q, R({
478
+ return n().createElement(E, q({
480
479
  flex: true,
481
480
  $disabled: P,
482
- $error: l,
481
+ $error: d,
482
+ elementRef: i,
483
483
  "data-test": "radio-bar",
484
- "data-test-value": j,
485
- role: p,
486
- "aria-labelledby": d,
484
+ "data-test-value": k,
485
+ role: y,
486
+ "aria-labelledby": s,
487
487
  "aria-describedby": a,
488
488
  "aria-disabled": P || undefined,
489
- "aria-required": b,
490
- "aria-invalid": p === "radiogroup" ? l : undefined
491
- }, i()(m, "onChange")), n().createElement(w.Provider, {
492
- value: T
493
- }, x));
489
+ "aria-required": f,
490
+ "aria-invalid": y === "radiogroup" ? d : undefined
491
+ }, l()(g, "onChange")), n().createElement(S.Provider, {
492
+ value: V
493
+ }, B));
494
494
  }
495
- J.Option = A;
496
- J.propTypes = X;
497
- /* harmony default export */ const Q = J;
495
+ X.Option = B;
496
+ X.propTypes = L;
497
+ /* harmony default export */ const G = X;
498
498
  // only for styled components using RadioBar
499
499
  // CONCATENATED MODULE: ./src/RadioBar/index.ts
500
500
  module.exports = r;