@splunk/react-ui 5.2.0 → 5.3.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 (77) hide show
  1. package/Avatar.js +57 -52
  2. package/Box.js +2 -1
  3. package/CHANGELOG.md +31 -0
  4. package/Calendar.js +8 -4
  5. package/Checkbox.d.ts +2 -0
  6. package/Checkbox.js +350 -0
  7. package/Code.js +151 -132
  8. package/CollapsiblePanel.js +184 -210
  9. package/Color.js +4 -2
  10. package/ControlGroup.js +2 -1
  11. package/Date.js +123 -119
  12. package/DefinitionList.js +100 -77
  13. package/Dropdown.js +2 -2
  14. package/DualListbox.js +409 -353
  15. package/File.js +102 -99
  16. package/JSONTree.js +317 -303
  17. package/Link.js +11 -11
  18. package/MIGRATION.md +27 -0
  19. package/Markdown.js +162 -151
  20. package/Menu.js +44 -42
  21. package/Modal.js +3 -3
  22. package/Multiselect.js +454 -435
  23. package/Paginator.js +2 -1
  24. package/ResultsMenu.js +2 -1
  25. package/Scroll.js +2 -1
  26. package/Search.js +131 -127
  27. package/Select.js +3 -2
  28. package/Switch.js +197 -229
  29. package/Table.js +24 -16
  30. package/Text.js +180 -206
  31. package/TextArea.js +233 -224
  32. package/Tooltip.js +144 -139
  33. package/package.json +9 -10
  34. package/tsconfig.check-docs.json +8 -0
  35. package/types/src/Avatar/docs/examples/Basic.d.ts +1 -1
  36. package/types/src/Checkbox/Checkbox.d.ts +90 -0
  37. package/types/src/Checkbox/docs/examples/Basic.d.ts +7 -0
  38. package/types/src/Checkbox/docs/examples/Disabled.d.ts +6 -0
  39. package/types/src/Checkbox/docs/examples/Error.d.ts +6 -0
  40. package/types/src/Checkbox/docs/examples/Uncontrolled.d.ts +7 -0
  41. package/types/src/Checkbox/index.d.ts +2 -0
  42. package/types/src/Code/Code.d.ts +4 -1
  43. package/types/src/Code/LineHighlights.d.ts +1 -0
  44. package/types/src/Code/LineNumbers.d.ts +2 -1
  45. package/types/src/Code/docs/examples/CustomizeContainer.d.ts +7 -0
  46. package/types/src/ControlGroup/docs/examples/CustomizedLabelTarget.d.ts +3 -3
  47. package/types/src/Date/Date.d.ts +7 -1
  48. package/types/src/DefinitionList/DefinitionList.d.ts +7 -2
  49. package/types/src/DefinitionList/DefinitionListContext.d.ts +1 -1
  50. package/types/src/DefinitionList/docs/examples/StackedLayout.d.ts +6 -0
  51. package/types/src/DualListbox/DualListbox.d.ts +1 -1
  52. package/types/src/DualListbox/Label.d.ts +7 -7
  53. package/types/src/DualListbox/Listbox.d.ts +2 -2
  54. package/types/src/DualListbox/ListboxContext.d.ts +1 -1
  55. package/types/src/File/File.d.ts +7 -1
  56. package/types/src/JSONTree/JSONTreeItem.d.ts +4 -2
  57. package/types/src/JSONTree/renderTreeItems.d.ts +2 -1
  58. package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts +2 -1
  59. package/types/src/Menu/docs/examples/Dimmed.d.ts +1 -1
  60. package/types/src/Menu/docs/examples/Disabled.d.ts +1 -0
  61. package/types/src/Multiselect/Compact.d.ts +7 -1
  62. package/types/src/Multiselect/Multiselect.d.ts +7 -1
  63. package/types/src/Multiselect/Normal.d.ts +7 -1
  64. package/types/src/Search/Search.d.ts +5 -1
  65. package/types/src/Switch/Switch.d.ts +7 -1
  66. package/types/src/Switch/docs/examples/Basic.d.ts +2 -10
  67. package/types/src/Switch/docs/examples/Disabled.d.ts +2 -9
  68. package/types/src/Table/ExpandButton.d.ts +1 -1
  69. package/types/src/Tooltip/Tooltip.d.ts +14 -1
  70. package/NonInteractiveCheckbox.js +0 -101
  71. package/types/src/CollapsiblePanel/icons/ExpandPanel.d.ts +0 -12
  72. package/types/src/NonInteractiveCheckbox/NonInteractiveCheckbox.d.ts +0 -22
  73. package/types/src/NonInteractiveCheckbox/index.d.ts +0 -1
  74. package/types/src/Switch/docs/examples/Error.d.ts +0 -6
  75. package/types/src/Text/IconOutlinedHide.d.ts +0 -3
  76. package/types/src/Text/IconOutlinedView.d.ts +0 -3
  77. /package/cypress/{tsconfig.cypress.json → tsconfig.check-cypress.json} +0 -0
@@ -61,8 +61,8 @@
61
61
  e.r(n);
62
62
  // EXPORTS
63
63
  e.d(n, {
64
- SingleOpenPanelGroup: () => /* reexport */ oe,
65
- default: () => /* reexport */ we
64
+ SingleOpenPanelGroup: () => /* reexport */ ne,
65
+ default: () => /* reexport */ he
66
66
  });
67
67
  // CONCATENATED MODULE: external "react"
68
68
  const t = require("react");
@@ -78,145 +78,119 @@
78
78
  var c = e.n(s);
79
79
  // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
80
80
  const u = require("@splunk/react-ui/usePrevious");
81
- var p = e.n(u);
81
+ var d = e.n(u);
82
82
  // CONCATENATED MODULE: external "@splunk/ui-utils/id"
83
- const d = require("@splunk/ui-utils/id");
83
+ const p = require("@splunk/ui-utils/id");
84
84
  // CONCATENATED MODULE: external "styled-components"
85
85
  const f = require("styled-components");
86
86
  var b = e.n(f);
87
- // CONCATENATED MODULE: external "@splunk/react-ui/Box"
88
- const v = require("@splunk/react-ui/Box");
87
+ // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
88
+ const v = require("@splunk/react-icons/ChevronRight");
89
89
  var y = e.n(v);
90
- // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
91
- const m = require("@splunk/react-ui/ButtonSimple");
90
+ // CONCATENATED MODULE: external "@splunk/react-ui/Box"
91
+ const m = require("@splunk/react-ui/Box");
92
92
  var g = e.n(m);
93
- // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
94
- const h = require("@splunk/react-ui/Clickable");
93
+ // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
94
+ const h = require("@splunk/react-ui/ButtonSimple");
95
95
  var S = e.n(h);
96
+ // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
97
+ const O = require("@splunk/react-ui/Clickable");
98
+ var C = e.n(O);
96
99
  // CONCATENATED MODULE: external "@splunk/themes"
97
- const O = require("@splunk/themes");
98
- // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
99
- const C = require("@splunk/react-icons/ChevronRight");
100
- var P = e.n(C);
101
- // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
102
- const w = require("@splunk/react-icons/enterprise/ChevronRight");
103
- var k = e.n(w);
104
- // CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
105
- var I = {
106
- className: l().string
107
- };
108
- var x = function e(n) {
109
- var t = n.className;
110
- var a = (0, O.useSplunkTheme)(), l = a.isEnterprise;
111
- return l ? r().createElement(k(), {
112
- className: t,
113
- hideDefaultTooltip: true,
114
- screenReaderText: null
115
- }) : r().createElement(P(), {
116
- className: t
117
- });
118
- };
119
- x.propTypes = I;
120
- /* harmony default export */ const j = x;
100
+ const P = require("@splunk/themes");
121
101
  // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
122
- var E = b()(y()).withConfig({
102
+ var w = b()(g()).withConfig({
123
103
  displayName: "CollapsiblePanelStyles__StyledBox",
124
104
  componentId: "sc-1phikbp-0"
125
105
  })([ "display:flex;flex-direction:column;flex-shrink:1;min-height:28px;background-color:", ";& + &{margin-top:1px;}" ], (0,
126
- O.pickVariant)("$appearance", {
106
+ P.pickVariant)("$appearance", {
127
107
  default: {
128
- prisma: O.variables.backgroundColorSection,
108
+ prisma: P.variables.backgroundColorSection,
129
109
  enterprise: {
130
- dark: O.variables.gray22,
131
- light: O.variables.white
110
+ dark: P.variables.gray22,
111
+ light: P.variables.white
132
112
  }
133
113
  },
134
- subtle: O.variables.transparent
114
+ subtle: P.variables.transparent
135
115
  }));
136
- var _ = b()(y()).withConfig({
116
+ var k = b()(g()).withConfig({
137
117
  displayName: "CollapsiblePanelStyles__StyledSingleOpenPanelGroupBox",
138
118
  componentId: "sc-1phikbp-1"
139
- })([ "", ";flex-direction:column;margin-bottom:0;" ], O.mixins.reset("flex"));
119
+ })([ "", ";flex-direction:column;margin-bottom:0;" ], P.mixins.reset("flex"));
140
120
  /*
141
121
  these styles are consistent for both regular and actions, but applied to different elements
142
122
  * in regular mode, they're on the SVG's span wrapper
143
123
  * in actionsMode, they're on the button
144
124
  applying them directly to the icon wrapper doesn't work because Enterprise has 1px border around the button
145
- */ var N = (0, f.css)([ "min-width:16px;" ]);
146
- var A = b().span.withConfig({
125
+ */ var I = (0, f.css)([ "min-width:16px;" ]);
126
+ var j = b().span.withConfig({
147
127
  displayName: "CollapsiblePanelStyles__StyledIconWrapper",
148
128
  componentId: "sc-1phikbp-2"
149
- })([ "display:inline-block;flex:0 auto;", "" ], N);
150
- var T = b().div.withConfig({
129
+ })([ "display:inline-block;flex:0 auto;", "" ], I);
130
+ var x = b().div.withConfig({
151
131
  displayName: "CollapsiblePanelStyles__StyledActions",
152
132
  componentId: "sc-1phikbp-3"
153
- })([ "display:flex;flex-shrink:0;border-bottom:0;gap:", ";position:relative;padding:", " ", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";background-color:", ";", "" ], O.variables.spacingSmall, O.variables.spacingXSmall, O.variables.spacingLarge, O.variables.contentColorActive, (0,
154
- O.pickVariant)("$appearance", {
155
- default: O.variables.neutral100,
156
- subtle: O.variables.transparent
133
+ })([ "display:flex;flex-shrink:0;border-bottom:0;gap:", ";position:relative;padding:", " ", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";background-color:", ";", "" ], P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingLarge, P.variables.contentColorActive, (0,
134
+ P.pickVariant)("$appearance", {
135
+ default: P.variables.neutral100,
136
+ subtle: P.variables.transparent
157
137
  }), (function(e) {
158
138
  var n = e.$disabled;
159
- return n && (0, f.css)([ "color:", ";" ], O.variables.contentColorDisabled);
139
+ return n && (0, f.css)([ "color:", ";" ], P.variables.contentColorDisabled);
160
140
  }));
161
- var $ = b()(g()).withConfig({
141
+ var E = b()(S()).withConfig({
162
142
  displayName: "CollapsiblePanelStyles__StyledToggleButton",
163
143
  componentId: "sc-1phikbp-4"
164
- })([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], O.variables.lineHeight);
165
- var q = b()(S()).withConfig({
144
+ })([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], P.variables.lineHeight);
145
+ var _ = b()(C()).withConfig({
166
146
  displayName: "CollapsiblePanelStyles__StyledTitleClickable",
167
147
  componentId: "sc-1phikbp-5"
168
- })([ "width:100%;flex-shrink:0;border-bottom:0;gap:", ";cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", " ", ";color:", ";background-color:", ";&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&:focus:not([disabled]),&:active:not([disabled],[aria-disabled='true']){box-shadow:", ";z-index:1;}&:hover:not([disabled],[aria-disabled='true']){background-color:", ";}" ], O.variables.spacingSmall, O.variables.spacingXSmall, O.variables.spacingLarge, O.variables.contentColorActive, (0,
169
- O.pickVariant)("$appearance", {
170
- default: O.variables.neutral100,
171
- subtle: O.variables.transparent
172
- }), O.variables.contentColorDisabled, O.variables.focusShadowInset, O.mixins.overlayColors(O.variables.neutral100, O.variables.interactiveColorOverlayHover));
173
- var D = b().span.withConfig({
148
+ })([ "width:100%;flex-shrink:0;border-bottom:0;gap:", ";cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", " ", ";color:", ";background-color:", ";&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&:focus:not([disabled]),&:active:not([disabled],[aria-disabled='true']){box-shadow:", ";z-index:1;}&:hover:not([disabled],[aria-disabled='true']){background-color:", ";}" ], P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingLarge, P.variables.contentColorActive, (0,
149
+ P.pickVariant)("$appearance", {
150
+ default: P.variables.neutral100,
151
+ subtle: P.variables.transparent
152
+ }), P.variables.contentColorDisabled, P.variables.focusShadowInset, P.mixins.overlayColors(P.variables.neutral100, P.variables.interactiveColorOverlayHover));
153
+ var A = b().span.withConfig({
174
154
  displayName: "CollapsiblePanelStyles__StyledHeadingContent",
175
155
  componentId: "sc-1phikbp-6"
176
- })([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], O.variables.fontWeightSemiBold, O.variables.lineHeight, (function(e) {
156
+ })([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], P.variables.fontWeightSemiBold, P.variables.lineHeight, (function(e) {
177
157
  var n = e.$disabled;
178
- return n && (0, f.css)([ "color:", ";" ], O.variables.contentColorDisabled);
158
+ return n && (0, f.css)([ "color:", ";" ], P.variables.contentColorDisabled);
179
159
  }));
180
- var R = b().span.withConfig({
160
+ var $ = b().span.withConfig({
181
161
  displayName: "CollapsiblePanelStyles__StyledHeadingActions",
182
162
  componentId: "sc-1phikbp-7"
183
- })([ "min-height:", ";flex:1 0 auto;" ], O.variables.inputHeight);
184
- var M = b().span.withConfig({
163
+ })([ "min-height:", ";flex:1 0 auto;" ], P.variables.inputHeight);
164
+ var N = b().span.withConfig({
185
165
  displayName: "CollapsiblePanelStyles__StyledDescription",
186
166
  componentId: "sc-1phikbp-8"
187
- })([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], O.variables.contentColorDefault, O.variables.fontSizeSmall, O.variables.spacingSmall, (function(e) {
167
+ })([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], P.variables.contentColorDefault, P.variables.fontSizeSmall, P.variables.spacingSmall, (function(e) {
188
168
  var n = e.$disabled;
189
- return n && (0, f.css)([ "color:", ";" ], O.variables.contentColorDisabled);
169
+ return n && (0, f.css)([ "color:", ";" ], P.variables.contentColorDisabled);
190
170
  }));
191
- var B = b().div.withConfig({
171
+ var q = b().div.withConfig({
192
172
  displayName: "CollapsiblePanelStyles__StyledInsetWrapper",
193
173
  componentId: "sc-1phikbp-9"
194
- })([ "", ";gap:", ";", "" ], O.mixins.reset("block"), O.variables.spacingSmall, (function(e) {
174
+ })([ "", ";gap:", ";", "" ], P.mixins.reset("block"), P.variables.spacingSmall, (function(e) {
195
175
  var n = e.$inset;
196
- return n && (0, f.css)([ "padding:", ";" ], O.variables.spacingLarge);
176
+ return n && (0, f.css)([ "padding:", ";" ], P.variables.spacingLarge);
197
177
  }));
198
- var L = b()(j).withConfig({
178
+ var D = b()(y()).withConfig({
199
179
  displayName: "CollapsiblePanelStyles__StyledExpandPanelIcon",
200
180
  componentId: "sc-1phikbp-10"
201
- })([ "transition:transform ", ";", " width:100%;vertical-align:", ";" ], (0, O.pick)({
202
- enterprise: "300ms",
203
- prisma: "200ms"
204
- }), (function(e) {
205
- var n = e.open;
181
+ })([ "transition:transform 200ms;", " width:100%;vertical-align:text-bottom;" ], (function(e) {
182
+ var n = e.$open;
206
183
  return n && (0, f.css)([ "transform:rotate(90deg);" ]);
207
- }), (0, O.pick)({
208
- enterprise: "baseline",
209
- prisma: "text-bottom"
210
184
  }));
211
185
  // CONCATENATED MODULE: external "lodash/omit"
212
- const W = require("lodash/omit");
213
- var H = e.n(W);
186
+ const T = require("lodash/omit");
187
+ var M = e.n(T);
214
188
  // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroupContext.tsx
215
- var V = (0, t.createContext)({});
216
- /* harmony default export */ const G = V;
189
+ var R = (0, t.createContext)({});
190
+ /* harmony default export */ const B = R;
217
191
  // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroup.tsx
218
- function U() {
219
- return U = Object.assign ? Object.assign.bind() : function(e) {
192
+ function L() {
193
+ return L = Object.assign ? Object.assign.bind() : function(e) {
220
194
  for (var n = 1; n < arguments.length; n++) {
221
195
  var t = arguments[n];
222
196
  for (var r in t) {
@@ -224,41 +198,41 @@
224
198
  }
225
199
  }
226
200
  return e;
227
- }, U.apply(null, arguments);
201
+ }, L.apply(null, arguments);
228
202
  }
229
- function z(e) {
230
- return J(e) || F(e) || Y(e) || X();
203
+ function W(e) {
204
+ return G(e) || V(e) || X(e) || H();
231
205
  }
232
- function X() {
206
+ function H() {
233
207
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
234
208
  }
235
- function F(e) {
209
+ function V(e) {
236
210
  if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
237
211
  }
238
- function J(e) {
239
- if (Array.isArray(e)) return Z(e);
212
+ function G(e) {
213
+ if (Array.isArray(e)) return F(e);
240
214
  }
241
- function K(e, n) {
242
- return ne(e) || ee(e, n) || Y(e, n) || Q();
215
+ function U(e, n) {
216
+ return K(e) || J(e, n) || X(e, n) || z();
243
217
  }
244
- function Q() {
218
+ function z() {
245
219
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
246
220
  }
247
- function Y(e, n) {
221
+ function X(e, n) {
248
222
  if (e) {
249
- if ("string" == typeof e) return Z(e, n);
223
+ if ("string" == typeof e) return F(e, n);
250
224
  var t = {}.toString.call(e).slice(8, -1);
251
- 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, n) : void 0;
225
+ 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) ? F(e, n) : void 0;
252
226
  }
253
227
  }
254
- function Z(e, n) {
228
+ function F(e, n) {
255
229
  (null == n || n > e.length) && (n = e.length);
256
230
  for (var t = 0, r = Array(n); t < n; t++) {
257
231
  r[t] = e[t];
258
232
  }
259
233
  return r;
260
234
  }
261
- function ee(e, n) {
235
+ function J(e, n) {
262
236
  var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
263
237
  if (null != t) {
264
238
  var r, a, l, o, i = [], s = !0, c = !1;
@@ -280,12 +254,12 @@
280
254
  return i;
281
255
  }
282
256
  }
283
- function ne(e) {
257
+ function K(e) {
284
258
  if (Array.isArray(e)) return e;
285
259
  }
286
- function te(e, n) {
260
+ function Q(e, n) {
287
261
  if (null == e) return {};
288
- var t, r, a = re(e, n);
262
+ var t, r, a = Y(e, n);
289
263
  if (Object.getOwnPropertySymbols) {
290
264
  var l = Object.getOwnPropertySymbols(e);
291
265
  for (r = 0; r < l.length; r++) {
@@ -294,7 +268,7 @@
294
268
  }
295
269
  return a;
296
270
  }
297
- function re(e, n) {
271
+ function Y(e, n) {
298
272
  if (null == e) return {};
299
273
  var t = {};
300
274
  for (var r in e) {
@@ -305,7 +279,7 @@
305
279
  }
306
280
  return t;
307
281
  }
308
- /** @public */ var ae = {
282
+ /** @public */ var Z = {
309
283
  children: l().node,
310
284
  defaultOpenPanelId: l().any,
311
285
  elementRef: l().oneOfType([ l().func, l().object ]),
@@ -313,10 +287,10 @@
313
287
  onChange: l().func,
314
288
  openPanelId: l().any
315
289
  };
316
- function le(e) {
317
- var n = e.children, a = e.defaultOpenPanelId, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, s = e.onChange, u = e.openPanelId, p = te(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
290
+ function ee(e) {
291
+ var n = e.children, a = e.defaultOpenPanelId, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, s = e.onChange, u = e.openPanelId, d = Q(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
318
292
  // @docs-props-type SingleOpenPanelGroupPropsBase
319
- var d = c()({
293
+ var p = c()({
320
294
  componentName: "SingleOpenPanelGroup",
321
295
  /* eslint-disable-next-line prefer-rest-params */
322
296
  componentProps: arguments[0],
@@ -324,48 +298,48 @@
324
298
  defaultValuePropName: "defaultOpenPanelId",
325
299
  valuePropName: "openPanelId"
326
300
  });
327
- var f = !d ? a : undefined;
328
- var b = (0, t.useState)(f), v = K(b, 2), y = v[0], m = v[1];
301
+ var f = !p ? a : undefined;
302
+ var b = (0, t.useState)(f), v = U(b, 2), y = v[0], m = v[1];
329
303
  var g = (0, t.useCallback)((function(e, n) {
330
304
  var t = n.panelId;
331
- var r = d ? u : y;
305
+ var r = p ? u : y;
332
306
  var a = r === t ? null : t;
333
- if (!d) {
307
+ if (!p) {
334
308
  m(a);
335
309
  }
336
310
  s === null || s === void 0 ? void 0 : s(e, n);
337
- }), [ d, u, y, s ]);
311
+ }), [ p, u, y, s ]);
338
312
  var h = t.Children.toArray(n).filter(t.isValidElement);
339
313
  // remove false, null, 0, etc
340
314
  var S = (0, t.useMemo)((function() {
341
315
  return {
342
316
  onChange: g,
343
- openPanelId: d ? u : y,
317
+ openPanelId: p ? u : y,
344
318
  inset: i
345
319
  };
346
- }), [ g, i, d, u, y ]);
320
+ }), [ g, i, p, u, y ]);
347
321
 
348
- return r().createElement(_, U({
322
+ return r().createElement(k, L({
349
323
  "data-test": "single-open-panel-group",
350
324
  "data-test-open-panel-id": u,
351
325
  elementRef: l
352
- }, H().apply(void 0, [ p ].concat(z(Object.keys(ae))))), r().createElement(G.Provider, {
326
+ }, M().apply(void 0, [ d ].concat(W(Object.keys(Z))))), r().createElement(B.Provider, {
353
327
  value: S
354
328
  }, h));
355
329
  }
356
- le.propTypes = ae;
357
- /* harmony default export */ const oe = le;
330
+ ee.propTypes = Z;
331
+ /* harmony default export */ const ne = ee;
358
332
  // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanel.tsx
359
- function ie(e) {
333
+ function te(e) {
360
334
  "@babel/helpers - typeof";
361
- return ie = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
335
+ return te = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
362
336
  return typeof e;
363
337
  } : function(e) {
364
338
  return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
365
- }, ie(e);
339
+ }, te(e);
366
340
  }
367
- function se() {
368
- return se = Object.assign ? Object.assign.bind() : function(e) {
341
+ function re() {
342
+ return re = Object.assign ? Object.assign.bind() : function(e) {
369
343
  for (var n = 1; n < arguments.length; n++) {
370
344
  var t = arguments[n];
371
345
  for (var r in t) {
@@ -373,9 +347,9 @@
373
347
  }
374
348
  }
375
349
  return e;
376
- }, se.apply(null, arguments);
350
+ }, re.apply(null, arguments);
377
351
  }
378
- function ce(e, n) {
352
+ function ae(e, n) {
379
353
  var t = Object.keys(e);
380
354
  if (Object.getOwnPropertySymbols) {
381
355
  var r = Object.getOwnPropertySymbols(e);
@@ -385,60 +359,60 @@
385
359
  }
386
360
  return t;
387
361
  }
388
- function ue(e) {
362
+ function le(e) {
389
363
  for (var n = 1; n < arguments.length; n++) {
390
364
  var t = null != arguments[n] ? arguments[n] : {};
391
- n % 2 ? ce(Object(t), !0).forEach((function(n) {
392
- pe(e, n, t[n]);
393
- })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ce(Object(t)).forEach((function(n) {
365
+ n % 2 ? ae(Object(t), !0).forEach((function(n) {
366
+ oe(e, n, t[n]);
367
+ })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ae(Object(t)).forEach((function(n) {
394
368
  Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
395
369
  }));
396
370
  }
397
371
  return e;
398
372
  }
399
- function pe(e, n, t) {
400
- return (n = de(n)) in e ? Object.defineProperty(e, n, {
373
+ function oe(e, n, t) {
374
+ return (n = ie(n)) in e ? Object.defineProperty(e, n, {
401
375
  value: t,
402
376
  enumerable: !0,
403
377
  configurable: !0,
404
378
  writable: !0
405
379
  }) : e[n] = t, e;
406
380
  }
407
- function de(e) {
408
- var n = fe(e, "string");
409
- return "symbol" == ie(n) ? n : n + "";
381
+ function ie(e) {
382
+ var n = se(e, "string");
383
+ return "symbol" == te(n) ? n : n + "";
410
384
  }
411
- function fe(e, n) {
412
- if ("object" != ie(e) || !e) return e;
385
+ function se(e, n) {
386
+ if ("object" != te(e) || !e) return e;
413
387
  var t = e[Symbol.toPrimitive];
414
388
  if (void 0 !== t) {
415
389
  var r = t.call(e, n || "default");
416
- if ("object" != ie(r)) return r;
390
+ if ("object" != te(r)) return r;
417
391
  throw new TypeError("@@toPrimitive must return a primitive value.");
418
392
  }
419
393
  return ("string" === n ? String : Number)(e);
420
394
  }
421
- function be(e, n) {
422
- return he(e) || ge(e, n) || ye(e, n) || ve();
395
+ function ce(e, n) {
396
+ return be(e) || fe(e, n) || de(e, n) || ue();
423
397
  }
424
- function ve() {
398
+ function ue() {
425
399
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
426
400
  }
427
- function ye(e, n) {
401
+ function de(e, n) {
428
402
  if (e) {
429
- if ("string" == typeof e) return me(e, n);
403
+ if ("string" == typeof e) return pe(e, n);
430
404
  var t = {}.toString.call(e).slice(8, -1);
431
- 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) ? me(e, n) : void 0;
405
+ 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) ? pe(e, n) : void 0;
432
406
  }
433
407
  }
434
- function me(e, n) {
408
+ function pe(e, n) {
435
409
  (null == n || n > e.length) && (n = e.length);
436
410
  for (var t = 0, r = Array(n); t < n; t++) {
437
411
  r[t] = e[t];
438
412
  }
439
413
  return r;
440
414
  }
441
- function ge(e, n) {
415
+ function fe(e, n) {
442
416
  var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
443
417
  if (null != t) {
444
418
  var r, a, l, o, i = [], s = !0, c = !1;
@@ -460,12 +434,12 @@
460
434
  return i;
461
435
  }
462
436
  }
463
- function he(e) {
437
+ function be(e) {
464
438
  if (Array.isArray(e)) return e;
465
439
  }
466
- function Se(e, n) {
440
+ function ve(e, n) {
467
441
  if (null == e) return {};
468
- var t, r, a = Oe(e, n);
442
+ var t, r, a = ye(e, n);
469
443
  if (Object.getOwnPropertySymbols) {
470
444
  var l = Object.getOwnPropertySymbols(e);
471
445
  for (r = 0; r < l.length; r++) {
@@ -474,7 +448,7 @@
474
448
  }
475
449
  return a;
476
450
  }
477
- function Oe(e, n) {
451
+ function ye(e, n) {
478
452
  if (null == e) return {};
479
453
  var t = {};
480
454
  for (var r in e) {
@@ -485,7 +459,7 @@
485
459
  }
486
460
  return t;
487
461
  }
488
- /** @public */ var Ce = {
462
+ /** @public */ var me = {
489
463
  innerBodyStyles: l().object,
490
464
  actions: l().node,
491
465
  appearance: l().oneOf([ "default", "subtle" ]),
@@ -503,12 +477,12 @@
503
477
  renderChildrenWhenCollapsed: l().bool,
504
478
  title: l().node.isRequired
505
479
  };
506
- function Pe(e) {
507
- var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, s = e.children, u = e.defaultOpen, f = u === void 0 ? undefined : u, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, O = S === void 0 ? "auto" : S, C = e.panelId, P = e.renderChildrenWhenCollapsed, w = e.title, k = e.inset, I = k === void 0 ? true : k, x = Se(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
480
+ function ge(e) {
481
+ var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, s = e.children, u = e.defaultOpen, f = u === void 0 ? undefined : u, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, O = S === void 0 ? "auto" : S, C = e.panelId, P = e.renderChildrenWhenCollapsed, k = e.title, I = e.inset, T = I === void 0 ? true : I, M = ve(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
508
482
  // @docs-props-type CollapsiblePanelPropsBase
509
- var j = (0, t.useContext)(G);
510
- var _ = Object.keys(j).length !== 0;
511
- var N = c()({
483
+ var R = (0, t.useContext)(B);
484
+ var L = Object.keys(R).length !== 0;
485
+ var W = c()({
512
486
  componentName: "CollapsiblePanel",
513
487
  /* eslint-disable-next-line prefer-rest-params */
514
488
  componentProps: arguments[0],
@@ -516,127 +490,127 @@
516
490
  defaultValuePropName: "defaultOpen",
517
491
  valuePropName: "open"
518
492
  });
519
- var W = (0, t.useState)("container-".concat((0, d.createGUID)())), H = be(W, 1), V = H[0];
520
- var U = (0, t.useState)("toggle-".concat((0, d.createGUID)())), z = be(U, 1), X = z[0];
521
- var F = p()(h);
522
- var J = !N ? f || false : undefined;
523
- var K = (0, t.useState)(J), Q = be(K, 2), Y = Q[0], Z = Q[1];
524
- var ee = (0, t.useState)(false), ne = be(ee, 2), te = ne[0], re = ne[1];
525
- var ae = (0, t.useMemo)((function() {
526
- if (_) {
493
+ var H = (0, t.useState)("container-".concat((0, p.createGUID)())), V = ce(H, 1), G = V[0];
494
+ var U = (0, t.useState)("toggle-".concat((0, p.createGUID)())), z = ce(U, 1), X = z[0];
495
+ var F = d()(h);
496
+ var J = !W ? f || false : undefined;
497
+ var K = (0, t.useState)(J), Q = ce(K, 2), Y = Q[0], Z = Q[1];
498
+ var ee = (0, t.useState)(false), ne = ce(ee, 2), te = ne[0], ae = ne[1];
499
+ var oe = (0, t.useMemo)((function() {
500
+ if (L) {
527
501
  /**
528
502
  * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
529
503
  * so context.openPanelId is used for both the controlled and uncontrolled case.
530
504
  */
531
- return j.openPanelId === C;
505
+ return R.openPanelId === C;
532
506
  }
533
- return N ? h : Y;
534
- }), [ j.openPanelId, _, N, h, Y, C ]);
507
+ return W ? h : Y;
508
+ }), [ R.openPanelId, L, W, h, Y, C ]);
535
509
  // SUI-7877 Must initialize openPanel with value to avoid re-render animation bug
536
- var le = (0, t.useState)(ae), oe = be(le, 2), ie = oe[0], ce = oe[1];
510
+ var ie = (0, t.useState)(oe), se = ce(ie, 2), ue = se[0], de = se[1];
537
511
  (0, t.useEffect)((function() {
538
- ce(ae);
539
- }), [ ae ]);
512
+ de(oe);
513
+ }), [ oe ]);
540
514
  // Only testing this in the scenario of a SingleOpenPanelGroup.
541
515
  (0, t.useEffect)((function() {
542
516
  if (false) {}
543
- }), [ f, _, h ]);
517
+ }), [ f, L, h ]);
544
518
  (0, t.useEffect)((function() {
545
519
  if (F != null && h !== F) {
546
- re(true);
520
+ ae(true);
547
521
  }
548
522
  }), [ h, F ]);
549
523
  var pe = (0, t.useCallback)((function(e) {
550
524
  var n;
551
- if (!N) {
552
- re(true);
553
- Z(!ie);
525
+ if (!W) {
526
+ ae(true);
527
+ Z(!ue);
554
528
  }
555
- var t = ie ? "close" : "open";
529
+ var t = ue ? "close" : "open";
556
530
  g === null || g === void 0 ? void 0 : g(e, {
557
531
  panelId: C,
558
532
  reason: "toggleClick",
559
533
  action: t
560
534
  });
561
- (n = j.onChange) === null || n === void 0 ? void 0 : n.call(j, e, {
535
+ (n = R.onChange) === null || n === void 0 ? void 0 : n.call(R, e, {
562
536
  panelId: C,
563
537
  reason: "toggleClick",
564
538
  action: t
565
539
  });
566
- }), [ j, N, ie, g, C ]);
567
- var de = (0, t.useCallback)((function() {
568
- re(false);
540
+ }), [ R, W, ue, g, C ]);
541
+ var fe = (0, t.useCallback)((function() {
542
+ ae(false);
569
543
  }), []);
570
- var fe = (0, d.createDOMID)("panel-toggle");
571
- var ve = {
544
+ var be = (0, p.createDOMID)("panel-toggle");
545
+ var ye = {
572
546
  disabled: v,
573
547
  onClick: pe,
574
548
  id: X,
575
- "aria-controls": V,
576
- "aria-expanded": ie,
549
+ "aria-controls": G,
550
+ "aria-expanded": ue,
577
551
  "data-test": "toggle"
578
552
  };
579
- var ye = (0, t.useMemo)((function() {
553
+ var me = (0, t.useMemo)((function() {
580
554
  return {
581
555
  overflow: te ? "hidden" : O
582
556
  };
583
557
  }), [ te, O ]);
584
- var me = (0, t.useMemo)((function() {
585
- return ue({
558
+ var ge = (0, t.useMemo)((function() {
559
+ return le({
586
560
  tableLayout: "fixed"
587
561
  }, n);
588
562
  }), [ n ]);
589
563
 
590
- return r().createElement(E, se({
564
+ return r().createElement(w, re({
591
565
  "data-test": "collapsible-panel",
592
566
  elementRef: y,
593
567
  $appearance: o
594
- }, x), a != null ? r().createElement(T, {
568
+ }, M), a != null ? r().createElement(x, {
595
569
  $appearance: o,
596
570
  $disabled: !!v
597
- }, r().createElement($, se({
571
+ }, r().createElement(E, re({
598
572
  appearance: "secondary",
599
- "aria-labelledby": fe
600
- }, ve), r().createElement(L, {
601
- open: !!ie
602
- })), r().createElement(D, {
573
+ "aria-labelledby": be
574
+ }, ye), r().createElement(D, {
575
+ $open: !!ue
576
+ })), r().createElement(A, {
603
577
  $disabled: !!v,
604
578
  "data-test": "title",
605
- id: fe
606
- }, w), r().createElement(R, null, a)) :
579
+ id: be
580
+ }, k), r().createElement($, null, a)) :
607
581
 
608
582
  /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
609
583
  r().createElement("span", {
610
584
  "data-test": "heading",
611
585
  role: m ? "heading" : undefined,
612
586
  "aria-level": m
613
- }, r().createElement(q, se({
587
+ }, r().createElement(_, re({
614
588
  $appearance: o
615
- }, ve), r().createElement(A, null, r().createElement(L, {
616
- open: !!ie
617
- })), r().createElement(D, {
589
+ }, ye), r().createElement(j, null, r().createElement(D, {
590
+ $open: !!ue
591
+ })), r().createElement(A, {
618
592
  $disabled: !!v
619
593
  }, r().createElement("span", {
620
594
  "data-test": "title"
621
- }, w), b && r().createElement(M, {
595
+ }, k), b && r().createElement(N, {
622
596
  $disabled: !!v,
623
597
  "data-test": "description"
624
598
  }, b)))), r().createElement(i(), {
625
- outerId: V,
599
+ outerId: G,
626
600
  "aria-labelledby": X,
627
601
  "data-test": "body",
628
- outerStyle: ye,
629
- innerStyle: me,
630
- open: ie,
631
- onAnimationEnd: de,
602
+ outerStyle: me,
603
+ innerStyle: ge,
604
+ open: ue,
605
+ onAnimationEnd: fe,
632
606
  role: a != null ? "region" : undefined,
633
607
  renderChildrenWhenCollapsed: P
634
- }, r().createElement(B, {
635
- $inset: I
608
+ }, r().createElement(q, {
609
+ $inset: T
636
610
  }, s)));
637
611
  }
638
- Pe.propTypes = Ce;
639
- /* harmony default export */ const we = Pe;
612
+ ge.propTypes = me;
613
+ /* harmony default export */ const he = ge;
640
614
  // CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
641
615
  module.exports = n;
642
616
  /******/})();