@splunk/react-ui 4.34.0 → 4.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/Breadcrumbs.js +20 -29
  2. package/Button.js +1 -1
  3. package/CHANGELOG.md +26 -2
  4. package/Card.js +86 -82
  5. package/Chip.js +73 -76
  6. package/CollapsiblePanel.js +1 -1
  7. package/Color.js +23 -15
  8. package/ComboBox.js +3 -2
  9. package/Concertina.js +136 -135
  10. package/ControlGroup.js +27 -23
  11. package/JSONTree.js +66 -64
  12. package/List.js +9 -13
  13. package/MIGRATION.mdx +24 -0
  14. package/Menu.js +352 -345
  15. package/Message.js +16 -19
  16. package/Monogram.js +140 -94
  17. package/Multiselect.js +9 -10
  18. package/ResultsMenu.js +124 -126
  19. package/Search.js +182 -181
  20. package/Select.js +55 -56
  21. package/StepBar.js +91 -87
  22. package/Switch.js +105 -97
  23. package/Table.js +686 -687
  24. package/Text.js +78 -58
  25. package/package.json +6 -6
  26. package/types/src/Breadcrumbs/Breadcrumbs.d.ts +0 -1
  27. package/types/src/Breadcrumbs/Item.d.ts +0 -1
  28. package/types/src/Card/Header.d.ts +0 -2
  29. package/types/src/Chip/Chip.d.ts +2 -4
  30. package/types/src/Color/Color.d.ts +5 -5
  31. package/types/src/ComboBox/Option.d.ts +0 -1
  32. package/types/src/List/List.d.ts +2 -4
  33. package/types/src/Menu/Heading.d.ts +1 -1
  34. package/types/src/Menu/Item.d.ts +7 -5
  35. package/types/src/Menu/Menu.d.ts +13 -16
  36. package/types/src/Menu/docs/examples/Dimmed.d.ts +2 -0
  37. package/types/src/Monogram/Monogram.d.ts +5 -6
  38. package/types/src/Multiselect/Option.d.ts +0 -1
  39. package/types/src/Progress/Progress.d.ts +4 -1
  40. package/types/src/ResultsMenu/ResultsMenu.d.ts +11 -9
  41. package/types/src/ResultsMenu/VirtualizedResultsMenu/VirtualizedResultsMenu.d.ts +3 -5
  42. package/types/src/Search/Option.d.ts +19 -6
  43. package/types/src/Search/docs/examples/OptionsLinks.d.ts +2 -0
  44. package/types/src/Select/Option.d.ts +0 -1
  45. package/types/src/Select/OptionBase.d.ts +2 -3
  46. package/types/src/Table/DragHandle.d.ts +1 -2
  47. package/types/src/Text/Text.d.ts +2 -0
package/Menu.js CHANGED
@@ -61,11 +61,11 @@
61
61
  e.r(t);
62
62
  // EXPORTS
63
63
  e.d(t, {
64
- Divider: () => /* reexport */ k,
65
- Heading: () => /* reexport */ N,
66
- Item: () => /* reexport */ Le,
67
- MenuContext: () => /* reexport */ m,
68
- default: () => /* reexport */ Ze
64
+ Divider: () => /* reexport */ w,
65
+ Heading: () => /* reexport */ F,
66
+ Item: () => /* reexport */ Ke,
67
+ MenuContext: () => /* reexport */ y,
68
+ default: () => /* reexport */ nt
69
69
  });
70
70
  // CONCATENATED MODULE: external "react"
71
71
  const r = require("react");
@@ -84,31 +84,31 @@
84
84
  const p = require("@splunk/ui-utils/focus");
85
85
  // CONCATENATED MODULE: external "styled-components"
86
86
  const u = require("styled-components");
87
- var d = e.n(u);
87
+ var f = e.n(u);
88
+ // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
89
+ const d = require("@splunk/react-ui/Divider");
90
+ var v = e.n(d);
88
91
  // CONCATENATED MODULE: external "@splunk/themes"
89
- const f = require("@splunk/themes");
92
+ const b = require("@splunk/themes");
90
93
  // CONCATENATED MODULE: ./src/Menu/DividerStyles.ts
91
- var v = d().div.withConfig({
94
+ var m = f()(v()).withConfig({
92
95
  displayName: "DividerStyles__Styled",
93
96
  componentId: "l3zfh3-0"
94
- })([ "border-top:1px solid ", ";", "" ], (0, f.pick)({
95
- enterprise: f.variables.borderColor,
96
- prisma: f.variables.neutral200
97
- }), (0, f.pick)({
97
+ })([ "", "" ], (0, b.pick)({
98
98
  prisma: {
99
99
  comfortable: (0, u.css)([ "margin:8px 0;" ]),
100
100
  compact: (0, u.css)([ "margin:6px 0;" ])
101
101
  }
102
102
  }));
103
103
  // CONCATENATED MODULE: ./src/Menu/MenuContext.tsx
104
- var b = (0, r.createContext)({
104
+ var h = (0, r.createContext)({
105
105
  role: "menu",
106
106
  preventFocus: false
107
107
  });
108
- /* harmony default export */ const m = b;
108
+ /* harmony default export */ const y = h;
109
109
  // CONCATENATED MODULE: ./src/Menu/Divider.tsx
110
- function h() {
111
- h = Object.assign || function(e) {
110
+ function g() {
111
+ g = Object.assign || function(e) {
112
112
  for (var t = 1; t < arguments.length; t++) {
113
113
  var r = arguments[t];
114
114
  for (var n in r) {
@@ -119,58 +119,72 @@
119
119
  }
120
120
  return e;
121
121
  };
122
- return h.apply(this, arguments);
122
+ return g.apply(this, arguments);
123
123
  }
124
- var y = {};
124
+ var k = {};
125
125
  /**
126
126
  * A non-interactive menu item used to visually separate groups of items in the menu.
127
- */ function g(e) {
128
- var t = h({}, e);
127
+ */ function x(e) {
128
+ var t = g({}, e);
129
129
  // @docs-props-type DividerPropsBase
130
- var i = (0, r.useContext)(m), a = i.role;
130
+ var i = (0, r.useContext)(y), a = i.role;
131
131
 
132
- return n().createElement(v, h({
132
+ return n().createElement(m, g({
133
133
  "aria-hidden": a === "listbox",
134
134
  "data-test": "divider",
135
135
  role: "separator"
136
136
  }, t));
137
137
  }
138
- g.propTypes = y;
139
- /* Remove the item if it is the first item after filtering */ g.filterFirst = true;
140
- /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */ g.filterConsecutive = true;
141
- /* Remove the item if it is the last item after filtering. */ g.filterLast = true;
142
- /* Tag the item as Divider */ g.as = "Divider";
143
- /* harmony default export */ const k = g;
138
+ x.propTypes = k;
139
+ /* Remove the item if it is the first item after filtering */ x.filterFirst = true;
140
+ /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */ x.filterConsecutive = true;
141
+ /* Remove the item if it is the last item after filtering. */ x.filterLast = true;
142
+ /* Tag the item as Divider */ x.as = "Divider";
143
+ /* harmony default export */ const w = x;
144
144
  // CONCATENATED MODULE: external "@splunk/react-ui/Heading"
145
- const x = require("@splunk/react-ui/Heading");
146
- var w = e.n(x);
147
- // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
148
- const S = require("@splunk/themes/useSplunkTheme");
145
+ const S = require("@splunk/react-ui/Heading");
149
146
  var O = e.n(S);
147
+ // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
148
+ const C = require("@splunk/themes/useSplunkTheme");
149
+ var I = e.n(C);
150
150
  // CONCATENATED MODULE: ./src/Menu/HeadingStyles.ts
151
- var C = d().div.withConfig({
151
+ var P = f().div.withConfig({
152
152
  displayName: "HeadingStyles__Styled",
153
153
  componentId: "mcd2ws-0"
154
- })([ "", " border-top:1px solid transparent;", ";&:not(:first-child){", ";}" ], f.mixins.reset("block"), (0,
155
- f.pick)({
156
- enterprise: (0, u.css)([ "padding:", " ", " 6px;" ], f.variables.spacingXSmall, f.variables.spacingSmall),
154
+ })([ "", " border-top:1px solid transparent;", ";&:not(:first-child){", ";}" ], b.mixins.reset("block"), (0,
155
+ b.pick)({
156
+ enterprise: (0, u.css)([ "padding:", " ", " 6px;" ], b.variables.spacingXSmall, b.variables.spacingSmall),
157
157
  prisma: {
158
158
  comfortable: "padding: 13px 16px 10px 16px",
159
159
  compact: "padding: 9px 16px 6px 16px"
160
160
  }
161
- }), (0, f.pick)({
162
- enterprise: (0, u.css)([ "border-top:", ";" ], f.variables.border),
161
+ }), (0, b.pick)({
162
+ enterprise: (0, u.css)([ "border-top:", ";" ], b.variables.border),
163
163
  prisma: {
164
- comfortable: (0, u.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:19px;" ], f.variables.neutral200),
165
- compact: (0, u.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:15px;" ], f.variables.neutral200)
164
+ comfortable: (0, u.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:19px;" ], b.variables.neutral200),
165
+ compact: (0, u.css)([ "border-top:1px solid ", ";margin-top:6px;padding-top:15px;" ], b.variables.neutral200)
166
166
  }
167
167
  }));
168
- var I = d().h5.withConfig({
168
+ var _ = f().h5.withConfig({
169
169
  displayName: "HeadingStyles__PrismaSectionTitle",
170
170
  componentId: "mcd2ws-1"
171
- })([ "", " font-size:", ";line-height:", ";font-weight:", ";letter-spacing:0.02em;" ], f.mixins.reset("block"), f.variables.fontSizeSmall, f.variables.lineHeight, f.variables.fontWeightBold);
171
+ })([ "", " font-size:", ";line-height:", ";font-weight:", ";letter-spacing:0.02em;" ], b.mixins.reset("block"), b.variables.fontSizeSmall, b.variables.lineHeight, b.variables.fontWeightBold);
172
172
  // CONCATENATED MODULE: ./src/Menu/Heading.tsx
173
- function P(e, t) {
173
+ function j() {
174
+ j = Object.assign || function(e) {
175
+ for (var t = 1; t < arguments.length; t++) {
176
+ var r = arguments[t];
177
+ for (var n in r) {
178
+ if (Object.prototype.hasOwnProperty.call(r, n)) {
179
+ e[n] = r[n];
180
+ }
181
+ }
182
+ }
183
+ return e;
184
+ };
185
+ return j.apply(this, arguments);
186
+ }
187
+ function E(e, t) {
174
188
  var r = Object.keys(e);
175
189
  if (Object.getOwnPropertySymbols) {
176
190
  var n = Object.getOwnPropertySymbols(e);
@@ -181,24 +195,24 @@
181
195
  }
182
196
  return r;
183
197
  }
184
- function E(e) {
198
+ function T(e) {
185
199
  for (var t = 1; t < arguments.length; t++) {
186
200
  var r = arguments[t] != null ? arguments[t] : {};
187
201
  if (t % 2) {
188
- P(Object(r), true).forEach((function(t) {
189
- _(e, t, r[t]);
202
+ E(Object(r), true).forEach((function(t) {
203
+ D(e, t, r[t]);
190
204
  }));
191
205
  } else if (Object.getOwnPropertyDescriptors) {
192
206
  Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
193
207
  } else {
194
- P(Object(r)).forEach((function(t) {
208
+ E(Object(r)).forEach((function(t) {
195
209
  Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
196
210
  }));
197
211
  }
198
212
  }
199
213
  return e;
200
214
  }
201
- function _(e, t, r) {
215
+ function D(e, t, r) {
202
216
  if (t in e) {
203
217
  Object.defineProperty(e, t, {
204
218
  value: r,
@@ -211,23 +225,9 @@
211
225
  }
212
226
  return e;
213
227
  }
214
- function j() {
215
- j = Object.assign || function(e) {
216
- for (var t = 1; t < arguments.length; t++) {
217
- var r = arguments[t];
218
- for (var n in r) {
219
- if (Object.prototype.hasOwnProperty.call(r, n)) {
220
- e[n] = r[n];
221
- }
222
- }
223
- }
224
- return e;
225
- };
226
- return j.apply(this, arguments);
227
- }
228
- function T(e, t) {
228
+ function q(e, t) {
229
229
  if (e == null) return {};
230
- var r = D(e, t);
230
+ var r = R(e, t);
231
231
  var n, i;
232
232
  if (Object.getOwnPropertySymbols) {
233
233
  var a = Object.getOwnPropertySymbols(e);
@@ -240,7 +240,7 @@
240
240
  }
241
241
  return r;
242
242
  }
243
- function D(e, t) {
243
+ function R(e, t) {
244
244
  if (e == null) return {};
245
245
  var r = {};
246
246
  var n = Object.keys(e);
@@ -252,117 +252,120 @@
252
252
  }
253
253
  return r;
254
254
  }
255
- var R = {
255
+ var N = {
256
256
  children: a().node,
257
257
  title: a().bool,
258
258
  outerStyle: a().object
259
259
  };
260
260
  /**
261
261
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
262
- */ function q(e) {
263
- var t = e.children, i = e.title, a = e.outerStyle, o = T(e, [ "children", "title", "outerStyle" ]);
264
- var l = (0, r.useContext)(m), s = l.role;
265
- var c = O()(), p = c.family;
266
- var u = p === "prisma" ? n().createElement(I, j({
267
- as: i ? "h4" : "h5",
268
- style: a,
269
- "data-test": "heading"
270
- }, o), t) : n().createElement(w(), j({
271
- style: E(E({}, a), {}, {
262
+ */ function H(e) {
263
+ var t = e.children, i = e.outerStyle, a = e.title, o = q(e, [ "children", "outerStyle", "title" ]);
264
+ var l = (0, r.useContext)(y), s = l.role;
265
+ var c = I()(), p = c.family;
266
+ var u = (0, r.useMemo)((function() {
267
+ return T(T({}, i), {}, {
272
268
  margin: 0
273
- }),
274
- level: i ? 4 : "ss",
275
- "data-test": "heading"
269
+ });
270
+ }), [ i ]);
271
+ var f = p === "prisma" ? n().createElement(_, j({
272
+ as: a ? "h4" : "h5",
273
+ "data-test": "heading",
274
+ style: i
275
+ }, o), t) : n().createElement(O(), j({
276
+ "data-test": "heading",
277
+ level: a ? 4 : "ss",
278
+ style: u
276
279
  }, o), t);
277
280
  // headings are not supported in role="listbox"
278
281
  // this causes Firefox to incorrectly read the total number
279
282
  // of items in the list if it contains a heading or divider
280
283
  // so we set them to aria-hidden to prevent that
281
284
 
282
- return n().createElement(C, {
285
+ return n().createElement(P, {
283
286
  "aria-hidden": s === "listbox"
284
- }, u);
287
+ }, f);
285
288
  }
286
- q.propTypes = R;
287
- /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */ q.filterConsecutive = true;
288
- /* Remove the item if it is the last item after filtering. */ q.filterLast = true;
289
- /* Tag the item as a Heading */ q.as = "Heading";
290
- /* harmony default export */ const N = q;
289
+ H.propTypes = N;
290
+ /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */ H.filterConsecutive = true;
291
+ /* Remove the item if it is the last item after filtering. */ H.filterLast = true;
292
+ /* Tag the item as a Heading */ H.as = "Heading";
293
+ /* harmony default export */ const F = H;
291
294
  // CONCATENATED MODULE: external "lodash/isString"
292
- const F = require("lodash/isString");
293
- var H = e.n(F);
294
- // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
295
- const $ = require("@splunk/react-icons/ChevronRight");
295
+ const $ = require("lodash/isString");
296
296
  var A = e.n($);
297
- // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
298
- const M = require("@splunk/react-icons/Checkmark");
297
+ // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
298
+ const M = require("@splunk/react-icons/ChevronRight");
299
299
  var L = e.n(M);
300
- // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Check"
301
- const z = require("@splunk/react-icons/enterprise/Check");
300
+ // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
301
+ const z = require("@splunk/react-icons/Checkmark");
302
302
  var K = e.n(z);
303
- // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
304
- const W = require("@splunk/react-icons/enterprise/ChevronRight");
303
+ // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Check"
304
+ const W = require("@splunk/react-icons/enterprise/Check");
305
305
  var B = e.n(W);
306
- // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
307
- const G = require("@splunk/react-ui/Clickable");
306
+ // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
307
+ const G = require("@splunk/react-icons/enterprise/ChevronRight");
308
308
  var V = e.n(G);
309
- // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
310
- const U = require("@splunk/react-ui/Switch");
309
+ // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
310
+ const U = require("@splunk/react-ui/Clickable");
311
311
  var X = e.n(U);
312
+ // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
313
+ const Y = require("@splunk/react-ui/Switch");
314
+ var J = e.n(Y);
312
315
  // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
313
- var Y = (0, u.css)([ "color:", ";font-size:", ";line-height:", ";overflow:inherit;white-space:inherit;text-overflow:inherit;" ], (0,
314
- f.pick)({
315
- prisma: f.variables.contentColorDefault,
316
- enterprise: f.variables.textGray
317
- }), f.variables.fontSizeSmall, (0, f.pick)({
316
+ var Q = (0, u.css)([ "color:", ";font-size:", ";line-height:", ";overflow:inherit;white-space:inherit;text-overflow:inherit;" ], (0,
317
+ b.pick)({
318
+ prisma: b.variables.contentColorDefault,
319
+ enterprise: b.variables.textGray
320
+ }), b.variables.fontSizeSmall, (0, b.pick)({
318
321
  prisma: "16px"
319
322
  }));
320
- var J = d().span.withConfig({
323
+ var Z = f().span.withConfig({
321
324
  displayName: "ItemStyles__StyledItemDescriptionBottom",
322
325
  componentId: "sc-4kc053-0"
323
- })([ "", ";display:block;" ], Y);
324
- var Q = d().span.withConfig({
326
+ })([ "", ";display:block;" ], Q);
327
+ var ee = f().span.withConfig({
325
328
  displayName: "ItemStyles__StyledItemDescriptionRight",
326
329
  componentId: "sc-4kc053-1"
327
- })([ "", ";float:right;", " max-width:50%;text-align:right;box-sizing:border-box;" ], Y, (0,
328
- f.pick)({
329
- enterprise: (0, u.css)([ "padding-left:", ";" ], f.variables.spacingLarge)
330
+ })([ "", ";float:right;", " max-width:50%;text-align:right;box-sizing:border-box;" ], Q, (0,
331
+ b.pick)({
332
+ enterprise: (0, u.css)([ "padding-left:", ";" ], b.variables.spacingLarge)
330
333
  }));
331
- var Z = d().div.withConfig({
334
+ var te = f().div.withConfig({
332
335
  displayName: "ItemStyles__StyledItemSelectedIcon",
333
336
  componentId: "sc-4kc053-2"
334
- })([ "position:absolute;", " color:", ";" ], (0, f.pick)({
337
+ })([ "position:absolute;", " color:", ";" ], (0, b.pick)({
335
338
  prisma: (0, u.css)([ "right:16px;" ]),
336
339
  enterprise: (0, u.css)([ "right:3px;left:8px;" ])
337
- }), (0, f.pick)({
338
- prisma: f.variables.contentColorActive,
339
- enterprise: f.variables.accentColorL10
340
+ }), (0, b.pick)({
341
+ prisma: b.variables.contentColorActive,
342
+ enterprise: b.variables.accentColorL10
340
343
  }));
341
- var ee = d().span.withConfig({
344
+ var re = f().span.withConfig({
342
345
  displayName: "ItemStyles__StyledItemIcon",
343
346
  componentId: "sc-4kc053-3"
344
347
  })([ "flex:0 0 auto;padding-right:", ";min-width:10px;display:inline-block;text-align:center;vertical-align:", ";", "" ], (0,
345
- f.pick)({
348
+ b.pick)({
346
349
  prisma: "8px",
347
350
  enterprise: "3px"
348
- }), (0, f.pick)({
351
+ }), (0, b.pick)({
349
352
  prisma: "initial",
350
353
  enterprise: "middle"
351
- }), (0, f.pick)({
352
- prisma: (0, u.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], f.variables.contentColorMuted),
354
+ }), (0, b.pick)({
355
+ prisma: (0, u.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], b.variables.contentColorMuted),
353
356
  enterprise: (0, u.css)([ "transform:translateY(-1px);" ])
354
357
  }));
355
- var te = d()(V()).withConfig({
358
+ var ne = f()(X()).withConfig({
356
359
  displayName: "ItemStyles__StyledClickable",
357
360
  componentId: "sc-4kc053-4"
358
- })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled]){&:hover{background:", ";", "}&:focus{outline:0;box-shadow:", ";", "}", " ", "}&[disabled]{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0,
359
- f.pick)({
360
- prisma: f.variables.contentColorActive,
361
+ })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}", " ", "}&:focus{outline:0;box-shadow:", ";", "}&[disabled],&[aria-disabled='true']{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0,
362
+ b.pick)({
363
+ prisma: b.variables.contentColorActive,
361
364
  enterprise: {
362
- dark: f.variables.gray96,
363
- light: f.variables.gray22
365
+ dark: b.variables.gray96,
366
+ light: b.variables.gray22
364
367
  }
365
- }), (0, f.pick)({
368
+ }), (0, b.pick)({
366
369
  prisma: {
367
370
  comfortable: "10px 16px",
368
371
  compact: "6px 16px"
@@ -370,7 +373,7 @@
370
373
  enterprise: "6px 10px"
371
374
  }), (function(e) {
372
375
  var t = e.$isSelectable, r = e.$selectableAppearance;
373
- return t && (0, f.pick)({
376
+ return t && (0, b.pick)({
374
377
  prisma: (0, u.css)([ "padding-right:44px;", "" ], (function() {
375
378
  return r === "checkbox" && "padding-left: 42px;";
376
379
  })),
@@ -380,142 +383,142 @@
380
383
  });
381
384
  }), (function(e) {
382
385
  var t = e.$active, r = e.$preventFocus;
383
- return t && !r && (0, u.css)([ "box-shadow:", ";" ], f.variables.focusShadowInset);
386
+ return t && !r && (0, u.css)([ "box-shadow:", ";" ], b.variables.focusShadowInset);
384
387
  }), (function(e) {
385
388
  var t = e.$active;
386
- return t && (0, u.css)([ "background:", ";font-weight:", ";" ], (0, f.pick)({
389
+ return t && (0, u.css)([ "background:", ";font-weight:", ";" ], (0, b.pick)({
387
390
  enterprise: {
388
- light: f.variables.gray92,
389
- dark: f.variables.gray22
391
+ light: b.variables.gray92,
392
+ dark: b.variables.gray22
390
393
  },
391
- prisma: f.variables.neutral100
392
- }), f.variables.fontWeightBold);
393
- }), (0, f.pick)({
394
- prisma: f.variables.interactiveColorOverlayHover,
395
- enterprise: f.variables.backgroundColorHover
394
+ prisma: b.variables.neutral100
395
+ }), b.variables.fontWeightBold);
396
+ }), (0, b.pick)({
397
+ prisma: b.variables.interactiveColorOverlayHover,
398
+ enterprise: b.variables.backgroundColorHover
396
399
  }), (function(e) {
397
400
  var t = e.$selected;
398
- return t && (0, f.pick)({
399
- prisma: (0, u.css)([ "background:", ";" ], f.mixins.overlayColors(f.variables.interactiveColorOverlaySelected, f.variables.interactiveColorOverlayHover))
401
+ return t && (0, b.pick)({
402
+ prisma: (0, u.css)([ "background:", ";" ], b.mixins.overlayColors(b.variables.interactiveColorOverlaySelected, b.variables.interactiveColorOverlayHover))
400
403
  });
401
- }), f.variables.focusShadowInset, (0, f.pick)({
402
- prisma: (0, u.css)([ "background:", ";" ], f.variables.interactiveColorOverlayHover)
403
- }), (0, f.pick)({
404
- prisma: (0, u.css)([ "&:active{background:", ";}" ], f.variables.interactiveColorOverlayActive)
404
+ }), (0, b.pick)({
405
+ prisma: (0, u.css)([ "&:active{background:", ";}" ], b.variables.interactiveColorOverlayActive)
405
406
  }), (function(e) {
406
407
  var t = e.$selected;
407
- return t && (0, f.pick)({
408
- prisma: (0, u.css)([ "background:", ";&:active{background:", ";}" ], f.variables.interactiveColorOverlaySelected, f.mixins.overlayColors(f.variables.interactiveColorOverlaySelected, f.variables.interactiveColorOverlayActive))
408
+ return t && (0, b.pick)({
409
+ prisma: (0, u.css)([ "background:", ";&:active{background:", ";}" ], b.variables.interactiveColorOverlaySelected, b.mixins.overlayColors(b.variables.interactiveColorOverlaySelected, b.variables.interactiveColorOverlayActive))
409
410
  });
410
- }), (0, f.pick)({
411
+ }), b.variables.focusShadowInset, (0, b.pick)({
412
+ prisma: (0, u.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
413
+ }), (0, b.pick)({
411
414
  enterprise: {
412
- light: f.variables.gray45,
413
- dark: f.variables.contentColorDisabled
415
+ light: b.variables.gray45,
416
+ dark: b.variables.contentColorDisabled
414
417
  },
415
- prisma: f.variables.contentColorDisabled
418
+ prisma: b.variables.contentColorDisabled
416
419
  }),
417
420
  /* sc-sel */
418
- J,
421
+ Z,
419
422
  /* sc-sel */
420
- Q,
423
+ ee,
421
424
  /* sc-sel */
422
- Z, (0, f.pick)({
423
- prisma: f.variables.contentColorDisabled,
424
- enterprise: f.variables.gray80
425
- }), (0, f.pick)({
425
+ te, (0, b.pick)({
426
+ prisma: b.variables.contentColorDisabled,
427
+ enterprise: b.variables.gray80
428
+ }), (0, b.pick)({
426
429
  prisma: (0, u.css)([ "& > * > ", "{color:", ";}" ],
427
430
  /* sc-sel */
428
- ee, f.variables.contentColorDisabled)
431
+ re, b.variables.contentColorDisabled)
429
432
  }), (function(e) {
430
433
  var t = e.$selected;
431
- return t && (0, f.pick)({
434
+ return t && (0, b.pick)({
432
435
  prisma: (0, u.css)([ "", "{color:", ";}" ],
433
436
  /* sc-sel */
434
- ee, f.variables.contentColorActive)
437
+ re, b.variables.contentColorActive)
435
438
  });
436
439
  }));
437
- var re = d()(X()).withConfig({
440
+ var ie = f()(J()).withConfig({
438
441
  displayName: "ItemStyles__StyledSwitch",
439
442
  componentId: "sc-4kc053-5"
440
- })([ "position:absolute;left:", ";top:", ";" ], (0, f.pick)({
443
+ })([ "position:absolute;left:", ";top:", ";" ], (0, b.pick)({
441
444
  prisma: "16px",
442
445
  enterprise: "8px"
443
- }), (0, f.pick)({
446
+ }), (0, b.pick)({
444
447
  prisma: "0px",
445
448
  enterprise: {
446
449
  comfortable: "-1px",
447
450
  compact: "2px"
448
451
  }
449
452
  }));
450
- var ne = d().span.withConfig({
453
+ var ae = f().span.withConfig({
451
454
  displayName: "ItemStyles__StyledInnerWrapper",
452
455
  componentId: "sc-4kc053-6"
453
456
  })([ "display:flex;align-items:flex-start;" ]);
454
- var ie = d().span.withConfig({
457
+ var oe = f().span.withConfig({
455
458
  displayName: "ItemStyles__StyledTitleAndDescriptionWrapper",
456
459
  componentId: "sc-4kc053-7"
457
460
  })([ "display:flex;flex-wrap:wrap;flex-direction:column;max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
458
461
  var t = e.$truncate;
459
462
  return t && (0, u.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
460
463
  }));
461
- var ae = d().div.withConfig({
464
+ var le = f().div.withConfig({
462
465
  displayName: "ItemStyles__StyledLabel",
463
466
  componentId: "sc-4kc053-8"
464
467
  })([ "overflow:inherit;white-space:inherit;text-overflow:inherit;max-width:100%;min-height:20px;", "" ], (function(e) {
465
468
  var t = e.$truncate;
466
469
  return t && (0, u.css)([ "display:block;clear:both;" ]);
467
470
  }));
468
- var oe = d().span.withConfig({
471
+ var se = f().span.withConfig({
469
472
  displayName: "ItemStyles__StyledMatch",
470
473
  componentId: "sc-4kc053-9"
471
- })([ "border-bottom:1px solid ", ";" ], (0, f.pick)({
472
- prisma: f.variables.contentColorActive,
474
+ })([ "border-bottom:1px solid ", ";" ], (0, b.pick)({
475
+ prisma: b.variables.contentColorActive,
473
476
  enterprise: {
474
- dark: f.variables.gray96,
475
- light: f.variables.gray45
477
+ dark: b.variables.gray96,
478
+ light: b.variables.gray45
476
479
  }
477
480
  }));
478
- var le = d().span.withConfig({
481
+ var ce = f().span.withConfig({
479
482
  displayName: "ItemStyles__StyledSubmenu",
480
483
  componentId: "sc-4kc053-10"
481
- })([ "float:right;padding-left:", ";color:", ";", "" ], f.variables.spacingSmall, (0,
482
- f.pick)({
484
+ })([ "float:right;padding-left:", ";color:", ";", "" ], b.variables.spacingSmall, (0,
485
+ b.pick)({
483
486
  prisma: "inherit",
484
- enterprise: f.variables.textGray
485
- }), (0, f.pick)({
487
+ enterprise: b.variables.textGray
488
+ }), (0, b.pick)({
486
489
  prisma: (0, u.css)([ "& > svg{width:20px;height:20px;}" ])
487
490
  }));
488
491
  // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRight"
489
- const se = require("@splunk/react-icons/ArrowSquareTopRight");
490
- var ce = e.n(se);
491
- // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/External"
492
- const pe = require("@splunk/react-icons/enterprise/External");
492
+ const pe = require("@splunk/react-icons/ArrowSquareTopRight");
493
493
  var ue = e.n(pe);
494
+ // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/External"
495
+ const fe = require("@splunk/react-icons/enterprise/External");
496
+ var de = e.n(fe);
494
497
  // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
495
- const de = require("@splunk/ui-utils/i18n");
498
+ const ve = require("@splunk/ui-utils/i18n");
496
499
  // CONCATENATED MODULE: ./src/Menu/icons/External.tsx
497
- var fe = (0, de._)("Open externally");
498
- var ve = (0, u.css)([ "width:0.8em;height:0.8em;vertical-align:baseline;" ]);
499
- var be = d()(ue()).withConfig({
500
+ var be = (0, ve._)("Open externally");
501
+ var me = (0, u.css)([ "width:0.8em;height:0.8em;vertical-align:baseline;" ]);
502
+ var he = f()(de()).withConfig({
500
503
  displayName: "External__StyledEnterprise",
501
504
  componentId: "sc-1turs2s-0"
502
- })([ "", " margin:0 0 0 3px;" ], ve);
503
- var me = d()(ce()).withConfig({
505
+ })([ "", " margin:0 0 0 3px;" ], me);
506
+ var ye = f()(ue()).withConfig({
504
507
  displayName: "External__StyledPrisma",
505
508
  componentId: "sc-1turs2s-1"
506
- })([ "", " margin:0 0 0 4px;" ], ve);
507
- function he() {
508
- var e = (0, f.useSplunkTheme)(), t = e.isEnterprise, r = e.isCompact;
509
+ })([ "", " margin:0 0 0 4px;" ], me);
510
+ function ge() {
511
+ var e = (0, b.useSplunkTheme)(), t = e.isEnterprise, r = e.isCompact;
509
512
  var i = r ? "20px" : "24px";
510
- return t ? n().createElement(be, {
511
- screenReaderText: fe
512
- }) : n().createElement(me, {
513
- "aria-label": fe,
513
+ return t ? n().createElement(he, {
514
+ screenReaderText: be
515
+ }) : n().createElement(ye, {
516
+ "aria-label": be,
514
517
  height: i,
515
518
  width: i
516
- }, n().createElement("title", null, fe));
519
+ }, n().createElement("title", null, be));
517
520
  }
518
- /* harmony default export */ const ye = he;
521
+ /* harmony default export */ const ke = ge;
519
522
  // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
520
523
  /**
521
524
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -523,7 +526,7 @@
523
526
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
524
527
  * @param current - The new value of the ref.
525
528
  */
526
- function ge(e, t) {
529
+ function xe(e, t) {
527
530
  if (e) {
528
531
  if (typeof e === "function") {
529
532
  e(t);
@@ -537,7 +540,7 @@
537
540
  }
538
541
  // CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
539
542
  // A utility that attempts to move an element into view by scrolling it's derived parent.
540
- var ke = function e(t) {
543
+ var we = function e(t) {
541
544
  if (!t) {
542
545
  return;
543
546
  }
@@ -554,21 +557,21 @@
554
557
  }
555
558
  };
556
559
  // CONCATENATED MODULE: ./src/Menu/Item.tsx
557
- function xe(e) {
560
+ function Se(e) {
558
561
  "@babel/helpers - typeof";
559
562
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
560
- xe = function e(t) {
563
+ Se = function e(t) {
561
564
  return typeof t;
562
565
  };
563
566
  } else {
564
- xe = function e(t) {
567
+ Se = function e(t) {
565
568
  return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
566
569
  };
567
570
  }
568
- return xe(e);
571
+ return Se(e);
569
572
  }
570
- function we() {
571
- we = Object.assign || function(e) {
573
+ function Oe() {
574
+ Oe = Object.assign || function(e) {
572
575
  for (var t = 1; t < arguments.length; t++) {
573
576
  var r = arguments[t];
574
577
  for (var n in r) {
@@ -579,11 +582,11 @@
579
582
  }
580
583
  return e;
581
584
  };
582
- return we.apply(this, arguments);
585
+ return Oe.apply(this, arguments);
583
586
  }
584
- function Se(e, t) {
587
+ function Ce(e, t) {
585
588
  if (e == null) return {};
586
- var r = Oe(e, t);
589
+ var r = Ie(e, t);
587
590
  var n, i;
588
591
  if (Object.getOwnPropertySymbols) {
589
592
  var a = Object.getOwnPropertySymbols(e);
@@ -596,7 +599,7 @@
596
599
  }
597
600
  return r;
598
601
  }
599
- function Oe(e, t) {
602
+ function Ie(e, t) {
600
603
  if (e == null) return {};
601
604
  var r = {};
602
605
  var n = Object.keys(e);
@@ -608,12 +611,12 @@
608
611
  }
609
612
  return r;
610
613
  }
611
- function Ce(e, t) {
614
+ function Pe(e, t) {
612
615
  if (!(e instanceof t)) {
613
616
  throw new TypeError("Cannot call a class as a function");
614
617
  }
615
618
  }
616
- function Ie(e, t) {
619
+ function _e(e, t) {
617
620
  for (var r = 0; r < t.length; r++) {
618
621
  var n = t[r];
619
622
  n.enumerable = n.enumerable || false;
@@ -622,9 +625,9 @@
622
625
  Object.defineProperty(e, n.key, n);
623
626
  }
624
627
  }
625
- function Pe(e, t, r) {
626
- if (t) Ie(e.prototype, t);
627
- if (r) Ie(e, r);
628
+ function je(e, t, r) {
629
+ if (t) _e(e.prototype, t);
630
+ if (r) _e(e, r);
628
631
  return e;
629
632
  }
630
633
  function Ee(e, t) {
@@ -638,41 +641,41 @@
638
641
  configurable: true
639
642
  }
640
643
  });
641
- if (t) _e(e, t);
644
+ if (t) Te(e, t);
642
645
  }
643
- function _e(e, t) {
644
- _e = Object.setPrototypeOf || function e(t, r) {
646
+ function Te(e, t) {
647
+ Te = Object.setPrototypeOf || function e(t, r) {
645
648
  t.__proto__ = r;
646
649
  return t;
647
650
  };
648
- return _e(e, t);
651
+ return Te(e, t);
649
652
  }
650
- function je(e) {
651
- var t = Re();
653
+ function De(e) {
654
+ var t = Ne();
652
655
  return function r() {
653
- var n = qe(e), i;
656
+ var n = He(e), i;
654
657
  if (t) {
655
- var a = qe(this).constructor;
658
+ var a = He(this).constructor;
656
659
  i = Reflect.construct(n, arguments, a);
657
660
  } else {
658
661
  i = n.apply(this, arguments);
659
662
  }
660
- return Te(this, i);
663
+ return qe(this, i);
661
664
  };
662
665
  }
663
- function Te(e, t) {
664
- if (t && (xe(t) === "object" || typeof t === "function")) {
666
+ function qe(e, t) {
667
+ if (t && (Se(t) === "object" || typeof t === "function")) {
665
668
  return t;
666
669
  }
667
- return De(e);
670
+ return Re(e);
668
671
  }
669
- function De(e) {
672
+ function Re(e) {
670
673
  if (e === void 0) {
671
674
  throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
672
675
  }
673
676
  return e;
674
677
  }
675
- function Re() {
678
+ function Ne() {
676
679
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
677
680
  if (Reflect.construct.sham) return false;
678
681
  if (typeof Proxy === "function") return true;
@@ -683,13 +686,13 @@
683
686
  return false;
684
687
  }
685
688
  }
686
- function qe(e) {
687
- qe = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
689
+ function He(e) {
690
+ He = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
688
691
  return t.__proto__ || Object.getPrototypeOf(t);
689
692
  };
690
- return qe(e);
693
+ return He(e);
691
694
  }
692
- function Ne(e, t, r) {
695
+ function Fe(e, t, r) {
693
696
  if (t in e) {
694
697
  Object.defineProperty(e, t, {
695
698
  value: r,
@@ -702,12 +705,12 @@
702
705
  }
703
706
  return e;
704
707
  }
705
- var Fe = {
708
+ var $e = {
706
709
  active: a().bool,
707
710
  children: a().node,
708
711
  description: a().string,
709
712
  descriptionPosition: a().oneOf([ "right", "bottom" ]),
710
- disabled: a().bool,
713
+ disabled: a().oneOfType([ a().bool, a().oneOf([ "dimmed" ]) ]),
711
714
  elementRef: a().oneOfType([ a().func, a().object ]),
712
715
  hasSubmenu: a().bool,
713
716
  icon: a().node,
@@ -732,10 +735,9 @@
732
735
  to: a().string,
733
736
  truncate: a().bool
734
737
  };
735
- var He = {
738
+ var Ae = {
736
739
  active: false,
737
740
  descriptionPosition: "bottom",
738
- disabled: false,
739
741
  hasSubmenu: false,
740
742
  openInNewContext: false,
741
743
  preventFocus: false,
@@ -744,10 +746,10 @@
744
746
  selected: false,
745
747
  truncate: false
746
748
  };
747
- var $e = function(e) {
749
+ var Me = function(e) {
748
750
  Ee(r, e);
749
- var t = je(r);
750
- Pe(r, null, [ {
751
+ var t = De(r);
752
+ je(r, null, [ {
751
753
  key: "validateProps",
752
754
  // @docs-props-type ItemPropsBase
753
755
  value: function e(t) {
@@ -756,23 +758,23 @@
756
758
  } ]);
757
759
  function r(e) {
758
760
  var n;
759
- Ce(this, r);
761
+ Pe(this, r);
760
762
  n = t.call(this, e);
761
- Ne(De(n), "el", null);
762
- Ne(De(n), "handleFocus", (function(e) {
763
+ Fe(Re(n), "el", null);
764
+ Fe(Re(n), "handleFocus", (function(e) {
763
765
  var t = n.props, r = t.onFocus, i = t.itemKey;
764
766
  r === null || r === void 0 ? void 0 : r(e, {
765
767
  itemKey: i
766
768
  });
767
769
  }));
768
- Ne(De(n), "handleMount", (function(e) {
770
+ Fe(Re(n), "handleMount", (function(e) {
769
771
  n.el = e;
770
- ge(n.props.elementRef, e);
772
+ xe(n.props.elementRef, e);
771
773
  }));
772
774
  r.validateProps(e);
773
775
  return n;
774
776
  }
775
- Pe(r, [ {
777
+ je(r, [ {
776
778
  key: "componentDidUpdate",
777
779
  value: function e() {
778
780
  r.validateProps(this.props);
@@ -786,13 +788,13 @@
786
788
  }, {
787
789
  key: "scrollIntoViewIfNeeded",
788
790
  value: function e() {
789
- ke(this.el);
791
+ we(this.el);
790
792
  }
791
793
  }, {
792
794
  key: "renderLabel",
793
795
  value: function e() {
794
796
  var t = this.props, r = t.children, i = t.matchRanges;
795
- if (!i || !H()(r)) {
797
+ if (!i || !A()(r)) {
796
798
  return r;
797
799
  }
798
800
  var a = [];
@@ -802,7 +804,7 @@
802
804
  a.push(
803
805
 
804
806
  // eslint-disable-next-line react/no-array-index-key
805
- n().createElement(oe, {
807
+ n().createElement(se, {
806
808
  key: t,
807
809
  "data-test": "match"
808
810
  }, r.substring(e.start, e.end)));
@@ -817,7 +819,7 @@
817
819
  }, {
818
820
  key: "render",
819
821
  value: function e() {
820
- var t = this.props, r = t.active, i = t.children, a = t.hasSubmenu, o = t.selectable, s = t.selectableAppearance, c = t.selected, p = t.icon, u = t.description, d = t.disabled, f = t.onClick, v = t.role, b = t.splunkTheme, m = t.to, h = t.truncate, y = t.descriptionPosition, g = t.openInNewContext, k = Se(t, [ "active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext" ]);
822
+ var t = this.props, r = t.active, i = t.children, a = t.hasSubmenu, o = t.selectable, s = t.selectableAppearance, c = t.selected, p = t.icon, u = t.description, f = t.disabled, d = t.onClick, v = t.role, b = t.splunkTheme, m = t.to, h = t.truncate, y = t.descriptionPosition, g = t.openInNewContext, k = Ce(t, [ "active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext" ]);
821
823
  var x = b.isEnterprise, w = b.isPrisma;
822
824
  var S = this.context.preventFocus;
823
825
  var O = o || c;
@@ -832,20 +834,20 @@
832
834
  "aria-checked": s === "checkmark" && c ? true : undefined
833
835
  };
834
836
  var P = w ? "right" : "left";
835
- var E = u && y === "right";
836
- var _ = u && !E;
837
- var j = c && s === "checkmark" && n().createElement(Z, null, w ? n().createElement(L(), {
837
+ var _ = u && y === "right";
838
+ var j = u && !_;
839
+ var E = c && s === "checkmark" && n().createElement(te, null, w ? n().createElement(K(), {
838
840
  inline: true,
839
841
  height: "16",
840
842
  width: "16"
841
- }) : n().createElement(K(), {
843
+ }) : n().createElement(B(), {
842
844
  hideDefaultTooltip: true,
843
845
  inline: true,
844
846
  screenReaderText: null,
845
847
  size: .85
846
848
  }));
847
849
 
848
- return n().createElement(te, we({
850
+ return n().createElement(ne, Oe({
849
851
  $isSelectable: O,
850
852
  $selectableAppearance: s,
851
853
  $selected: c,
@@ -854,8 +856,8 @@
854
856
  "data-test-selected": O ? c : null,
855
857
  "data-test": "item",
856
858
  "data-has-icon": !!p,
857
- disabled: d,
858
- onClick: f,
859
+ disabled: f,
860
+ onClick: d,
859
861
  onFocus: this.handleFocus,
860
862
  onMouseDown: function e(t) {
861
863
  if (S) {
@@ -865,72 +867,73 @@
865
867
  role: v || C,
866
868
  tabIndex: S ? -1 : undefined,
867
869
  to: m,
868
- title: h && H()(i) ? i : undefined,
870
+ title: h && A()(i) ? i : undefined,
869
871
  openInNewContext: g
870
872
  }, I, l()(k, "onFocus"), {
871
873
  elementRef: this.handleMount
872
- }), o && s === "checkbox" && n().createElement(re, {
874
+ }), o && s === "checkbox" && n().createElement(ie, {
873
875
  interactive: false,
874
876
  selected: c,
875
877
  selectedLabel: "Selected",
876
878
  value: "menu-item"
877
- }), a && n().createElement(le, null, x ? n().createElement(B(), {
879
+ }), a && n().createElement(ce, null, x ? n().createElement(V(), {
878
880
  hideDefaultTooltip: true,
879
881
  screenReaderText: null
880
- }) : n().createElement(A(), null)), E && n().createElement(Q, {
882
+ }) : n().createElement(L(), null)), _ && n().createElement(ee, {
881
883
  "data-test": "description"
882
- }, u), n().createElement(ne, null, p && n().createElement(ee, null, p), n().createElement(ie, {
884
+ }, u), n().createElement(ae, null, p && n().createElement(re, null, p), n().createElement(oe, {
883
885
  $truncate: h
884
- }, P === "left" && j, n().createElement(ae, {
886
+ }, P === "left" && E, n().createElement(le, {
885
887
  $truncate: h,
886
888
  "data-test": "label"
887
- }, this.renderLabel(), g && n().createElement(ye, null)), _ && n().createElement(J, {
889
+ }, this.renderLabel(), g && n().createElement(ke, null)), j && n().createElement(Z, {
888
890
  "data-test": "description"
889
- }, u), P === "right" && j)));
891
+ }, u), P === "right" && E)));
890
892
  }
891
893
  } ]);
892
894
  return r;
893
895
  }(r.Component);
894
- Ne($e, "propTypes", Fe);
895
- Ne($e, "defaultProps", He);
896
- Ne($e, "as", void 0);
897
- Ne($e, "contextType", m);
898
- var Ae = (0, f.withSplunkTheme)($e);
899
- var Me = Ae;
900
- Me.propTypes = $e.propTypes;
901
- Me.as = "Item";
902
- /* harmony default export */ const Le = Me;
896
+ Fe(Me, "propTypes", $e);
897
+ Fe(Me, "defaultProps", Ae);
898
+ Fe(Me, "as", void 0);
899
+ Fe(Me, "contextType", y);
900
+ var Le = (0, b.withSplunkTheme)(Me);
901
+ var ze = Le;
902
+ ze.propTypes = Me.propTypes;
903
+ ze.as = "Item";
904
+ /* harmony default export */ const Ke = ze;
903
905
  // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
904
- const ze = require("@splunk/react-ui/Scroll");
905
- var Ke = e.n(ze);
906
+ const We = require("@splunk/react-ui/Scroll");
907
+ var Be = e.n(We);
906
908
  // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
907
- var We = (0, u.css)([ "border-top:1px solid ", ";" ], (0, f.pick)({
908
- enterprise: f.variables.gray60,
909
- prisma: f.variables.neutral200
909
+ var Ge = (0, u.css)([ "border-top:1px solid ", ";" ], (0, b.pick)({
910
+ enterprise: b.variables.gray60,
911
+ prisma: b.variables.neutral200
910
912
  }));
911
- var Be = d().div.withConfig({
913
+ var Ve = (0, u.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;", " &:focus{outline:0;box-shadow:", ";", "}& + &{", "}" ], b.mixins.reset("block"), (0,
914
+ b.pick)({
915
+ enterprise: b.variables.backgroundColor,
916
+ prisma: b.variables.backgroundColorPopup
917
+ }), b.variables.borderRadius, (0, b.pick)({
918
+ prisma: (0, u.css)([ "padding:8px 0;" ])
919
+ }), b.variables.focusShadowInset, (0, b.pick)({
920
+ prisma: (0, u.css)([ "background:", ";" ], b.variables.interactiveColorOverlayHover)
921
+ }), Ge);
922
+ var Ue = f().div.withConfig({
912
923
  displayName: "MenuStyles__Styled",
913
924
  componentId: "sc-1olffp9-0"
914
- })([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;", " &:focus{outline:0;box-shadow:", ";", "}& + &{", "}" ], f.mixins.reset("block"), (0,
915
- f.pick)({
916
- enterprise: f.variables.backgroundColor,
917
- prisma: f.variables.backgroundColorPopup
918
- }), f.variables.borderRadius, (0, f.pick)({
919
- prisma: (0, u.css)([ "padding:8px 0;" ])
920
- }), f.variables.focusShadowInset, (0, f.pick)({
921
- prisma: (0, u.css)([ "background:", ";" ], f.variables.interactiveColorOverlayHover)
922
- }), We);
923
- var Ge = d()(Be.withComponent(Ke())).withConfig({
925
+ })([ "", "" ], Ve);
926
+ var Xe = f()(Be()).withConfig({
924
927
  displayName: "MenuStyles__StyledScroll",
925
928
  componentId: "sc-1olffp9-1"
926
- })([ "", " + &,& + ", "{", "}" ],
929
+ })([ "", " ", " + &,& + ", "{", "}" ], Ve,
927
930
  /* sc-sel */
928
- Be,
931
+ Ue,
929
932
  /* sc-sel */
930
- Be, We);
933
+ Ue, Ge);
931
934
  // CONCATENATED MODULE: ./src/Menu/Menu.tsx
932
- function Ve() {
933
- Ve = Object.assign || function(e) {
935
+ function Ye() {
936
+ Ye = Object.assign || function(e) {
934
937
  for (var t = 1; t < arguments.length; t++) {
935
938
  var r = arguments[t];
936
939
  for (var n in r) {
@@ -941,11 +944,11 @@
941
944
  }
942
945
  return e;
943
946
  };
944
- return Ve.apply(this, arguments);
947
+ return Ye.apply(this, arguments);
945
948
  }
946
- function Ue(e, t) {
949
+ function Je(e, t) {
947
950
  if (e == null) return {};
948
- var r = Xe(e, t);
951
+ var r = Qe(e, t);
949
952
  var n, i;
950
953
  if (Object.getOwnPropertySymbols) {
951
954
  var a = Object.getOwnPropertySymbols(e);
@@ -958,7 +961,7 @@
958
961
  }
959
962
  return r;
960
963
  }
961
- function Xe(e, t) {
964
+ function Qe(e, t) {
962
965
  if (e == null) return {};
963
966
  var r = {};
964
967
  var n = Object.keys(e);
@@ -970,17 +973,15 @@
970
973
  }
971
974
  return r;
972
975
  }
973
- var Ye = {
976
+ var Ze = {
974
977
  children: a().node,
975
- /** @private */
976
- controlledExternally: a().bool,
977
978
  elementRef: a().oneOfType([ a().func, a().object ]),
979
+ focusMode: a().oneOf([ "roving", "normal", "never" ]),
978
980
  retainFocus: a().bool,
979
- stopScrollPropagation: a().bool,
980
- disableFocusControl: a().bool
981
+ stopScrollPropagation: a().bool
981
982
  };
982
983
  // the default focus control for Menu: loop, verticalArrows(up/down keys), home/end keys
983
- var Je = function e(t) {
984
+ var et = function e(t) {
984
985
  return {
985
986
  enableLoop: true,
986
987
  orientation: "vertical",
@@ -988,19 +989,30 @@
988
989
  enableHomeEnd: true
989
990
  };
990
991
  };
991
- function Qe(e) {
992
- var t = e.children, i = e.controlledExternally, a = e.elementRef, o = e.retainFocus, u = e.stopScrollPropagation, d = e.disableFocusControl, f = Ue(e, [ "children", "controlledExternally", "elementRef", "retainFocus", "stopScrollPropagation", "disableFocusControl" ]);
992
+ var tt = function e(t) {
993
+ var r = (0, c.keycode)(t.nativeEvent);
994
+ // Handle special case for tab navigation
995
+ if (r === "tab" && (0, p.isTabKey)(t)) {
996
+ return t.shiftKey ? "tabShift" : "tab";
997
+ }
998
+ return r;
999
+ };
1000
+ function rt(e) {
1001
+ var t = e.children, i = e.elementRef, a = e.focusMode, o = e.retainFocus, c = e.stopScrollPropagation, u = Je(e, [ "children", "elementRef", "focusMode", "retainFocus", "stopScrollPropagation" ]);
993
1002
  // @docs-props-type MenuPropsBase
994
- var v = (0, r.useContext)(m), b = v.role, h = b === void 0 ? "menu" : b;
995
- var y = (0, r.useContext)(s.PopoverContext), g = y.retainFocus;
996
- var k = (0, r.useRef)(null);
997
- var x = true;
1003
+ if (false) {}
1004
+ var f = (0, r.useContext)(y), d = f.role, v = d === void 0 ? "menu" : d;
1005
+ var b = (0, r.useContext)(s.PopoverContext), m = b.retainFocus;
1006
+ var h = (0, r.useRef)(null);
1007
+ var g = true;
998
1008
  if (o != null) {
999
- x = o;
1000
- } else if (g != null) {
1001
- x = g;
1009
+ g = o;
1010
+ } else if (a === "roving") {
1011
+ g = false;
1012
+ } else if (m != null) {
1013
+ g = m;
1002
1014
  }
1003
- var w = r.Children.toArray(t).filter(r.isValidElement).reduce((function(e, t, r, n) {
1015
+ var k = r.Children.toArray(t).filter(r.isValidElement).reduce((function(e, t, r, n) {
1004
1016
  /* Filter out initial Dividers
1005
1017
  * Requires reduce() over filter() because a Heading may have been
1006
1018
  * before the Divider.
@@ -1023,27 +1035,22 @@
1023
1035
  e.push(t);
1024
1036
  return e;
1025
1037
  }), []);
1038
+ var x = (0, r.useCallback)((function(e) {
1039
+ h.current = e;
1040
+ xe(i, e);
1041
+ }), [ i ]);
1042
+ var w = et(g);
1026
1043
  var S = (0, r.useCallback)((function(e) {
1027
- k.current = e;
1028
- ge(a, e);
1029
- }), [ a ]);
1030
- var O = Je(x);
1031
- var C = (0, r.useCallback)((function(e) {
1032
- var t = (0, c.keycode)(e.nativeEvent);
1033
- if (t === "tab" && (0, p.isTabKey)(e) && e.shiftKey) {
1034
- t = "tabShift";
1035
- } else if (t === "tab" && (0, p.isTabKey)(e)) {
1036
- t = "tab";
1037
- }
1044
+ var t = tt(e);
1038
1045
  var r = t === "tab" || t === "tabShift";
1039
1046
  var n = t === "enter";
1040
1047
  // Allow default behavior for the enter key.
1041
1048
  // If tab navigation is enabled, prevent default behavior for all other keys.
1042
1049
  // If tab navigation is disabled, allow default behavior for tab and tab+shift key
1043
- if (!n && (O.enableTab || !r)) {
1050
+ if (!n && (w.enableTab || !r)) {
1044
1051
  e.preventDefault();
1045
1052
  }
1046
- var i = k.current;
1053
+ var i = h.current;
1047
1054
  var a = [];
1048
1055
  if (i) {
1049
1056
  a = (0, p.getSortedTabbableElements)(i, {
@@ -1053,35 +1060,35 @@
1053
1060
  var o = (e === null || e === void 0 ? void 0 : e.target) instanceof Element ? e.target : null;
1054
1061
  var l = i === null || i === void 0 ? void 0 : i.querySelector(":focus");
1055
1062
  var s = o || l;
1056
- var u = s ? a.indexOf(s) : -1;
1057
- (0, p.handleFocus)(t, a, u, O);
1058
- }), [ O ]);
1059
- var I = function e() {
1063
+ var c = s ? a.indexOf(s) : -1;
1064
+ (0, p.handleFocus)(t, a, c, w);
1065
+ }), [ w ]);
1066
+ var O = function e() {
1060
1067
  return {
1061
1068
  role: "menu",
1062
- preventFocus: i
1069
+ preventFocus: a === "never"
1063
1070
  };
1064
1071
  };
1065
- var P = !d && !i ? C : undefined;
1066
- var E = {
1072
+ var C = a === "normal" || a === "never" ? undefined : S;
1073
+ var I = {
1067
1074
  "data-test": "menu",
1068
- onKeyDown: P,
1069
- role: h
1075
+ onKeyDown: C,
1076
+ role: v
1070
1077
  };
1071
- return u ? n().createElement(Ge, Ve({}, E, {
1072
- elementRef: S,
1078
+ return c ? n().createElement(Xe, Ye({}, I, {
1079
+ elementRef: x,
1073
1080
  stopScrollPropagation: true
1074
- }, l()(f, "tagName")), w) : n().createElement(Be, Ve({}, E, {
1075
- ref: S
1076
- }, f), n().createElement(m.Provider, {
1077
- value: I()
1078
- }, w));
1081
+ }, l()(u, "tagName")), k) : n().createElement(Ue, Ye({}, I, {
1082
+ ref: x
1083
+ }, u), n().createElement(y.Provider, {
1084
+ value: O()
1085
+ }, k));
1079
1086
  }
1080
- Qe.propTypes = Ye;
1081
- Qe.Item = Le;
1082
- Qe.Divider = k;
1083
- Qe.Heading = N;
1084
- /* harmony default export */ const Ze = Qe;
1087
+ rt.propTypes = Ze;
1088
+ rt.Item = Ke;
1089
+ rt.Divider = w;
1090
+ rt.Heading = F;
1091
+ /* harmony default export */ const nt = rt;
1085
1092
  // CONCATENATED MODULE: ./src/Menu/index.ts
1086
1093
  module.exports = t;
1087
1094
  /******/})();