@splunk/react-ui 5.2.0 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/Accordion.js +31 -31
  2. package/Avatar.js +64 -59
  3. package/Box.js +2 -1
  4. package/Breadcrumbs.js +66 -63
  5. package/ButtonSimple.js +52 -52
  6. package/CHANGELOG.md +47 -0
  7. package/Calendar.js +8 -4
  8. package/CardLayout.js +39 -36
  9. package/Checkbox.d.ts +2 -0
  10. package/Checkbox.js +350 -0
  11. package/Clickable.js +5 -6
  12. package/Code.js +451 -536
  13. package/CollapsiblePanel.js +184 -210
  14. package/Color.js +903 -1023
  15. package/ControlGroup.js +2 -1
  16. package/Date.js +123 -119
  17. package/DefinitionList.js +100 -77
  18. package/Dropdown.js +2 -2
  19. package/DualListbox.js +409 -353
  20. package/File.js +102 -99
  21. package/FormRows.js +13 -11
  22. package/JSONTree.js +679 -1391
  23. package/Link.js +7 -7
  24. package/MIGRATION.md +27 -0
  25. package/Markdown.js +171 -156
  26. package/Menu.js +107 -100
  27. package/Modal.js +3 -3
  28. package/Multiselect.js +2698 -2767
  29. package/Paginator.js +2 -1
  30. package/Popover.js +201 -196
  31. package/Resize.js +11 -8
  32. package/ResultsMenu.js +913 -1029
  33. package/ScreenReaderContent.js +86 -130
  34. package/Scroll.js +366 -424
  35. package/Search.js +131 -127
  36. package/Select.js +1741 -1831
  37. package/Slider.js +1 -1
  38. package/SlidingPanels.js +129 -127
  39. package/StepBar.js +123 -97
  40. package/Switch.js +214 -242
  41. package/TabBar.js +10 -10
  42. package/Table.js +1255 -1248
  43. package/Text.js +180 -206
  44. package/TextArea.js +596 -675
  45. package/Tooltip.js +144 -139
  46. package/Tree.js +638 -682
  47. package/package.json +15 -16
  48. package/tsconfig.check-docs.json +8 -0
  49. package/types/src/Avatar/docs/examples/Basic.d.ts +1 -1
  50. package/types/src/Breadcrumbs/Breadcrumbs.d.ts +1 -5
  51. package/types/src/Breadcrumbs/BreadcrumbsContext.d.ts +7 -0
  52. package/types/src/Breadcrumbs/Item.d.ts +1 -1
  53. package/types/src/ButtonSimple/mixin.d.ts +1 -1
  54. package/types/src/Checkbox/Checkbox.d.ts +90 -0
  55. package/types/src/Checkbox/docs/examples/Basic.d.ts +7 -0
  56. package/types/src/Checkbox/docs/examples/Disabled.d.ts +6 -0
  57. package/types/src/Checkbox/docs/examples/Error.d.ts +6 -0
  58. package/types/src/Checkbox/docs/examples/Uncontrolled.d.ts +7 -0
  59. package/types/src/Checkbox/index.d.ts +2 -0
  60. package/types/src/Code/Code.d.ts +4 -1
  61. package/types/src/Code/LineHighlights.d.ts +1 -0
  62. package/types/src/Code/LineNumbers.d.ts +2 -1
  63. package/types/src/Code/docs/examples/CustomizeContainer.d.ts +7 -0
  64. package/types/src/ControlGroup/docs/examples/CustomizedLabelTarget.d.ts +3 -3
  65. package/types/src/Date/Date.d.ts +7 -1
  66. package/types/src/DefinitionList/DefinitionList.d.ts +7 -2
  67. package/types/src/DefinitionList/DefinitionListContext.d.ts +1 -1
  68. package/types/src/DefinitionList/docs/examples/StackedLayout.d.ts +6 -0
  69. package/types/src/DualListbox/DualListbox.d.ts +1 -1
  70. package/types/src/DualListbox/Label.d.ts +7 -7
  71. package/types/src/DualListbox/Listbox.d.ts +2 -2
  72. package/types/src/DualListbox/ListboxContext.d.ts +1 -1
  73. package/types/src/File/File.d.ts +7 -1
  74. package/types/src/JSONTree/JSONTreeItem.d.ts +5 -3
  75. package/types/src/JSONTree/renderTreeItems.d.ts +3 -2
  76. package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts +2 -1
  77. package/types/src/Menu/docs/examples/Dimmed.d.ts +1 -1
  78. package/types/src/Menu/docs/examples/Disabled.d.ts +1 -0
  79. package/types/src/Modal/ModalContext.d.ts +1 -1
  80. package/types/src/Multiselect/Compact.d.ts +9 -3
  81. package/types/src/Multiselect/Multiselect.d.ts +7 -1
  82. package/types/src/Multiselect/Normal.d.ts +9 -3
  83. package/types/src/Number/utils.d.ts +1 -1
  84. package/types/src/Popover/getPlacement.d.ts +1 -1
  85. package/types/src/RadioList/Option.d.ts +1 -1
  86. package/types/src/RadioList/RadioListContext.d.ts +1 -1
  87. package/types/src/Search/Search.d.ts +5 -1
  88. package/types/src/StepBar/StepBar.d.ts +4 -1
  89. package/types/src/StepBar/StepBarContext.d.ts +1 -0
  90. package/types/src/StepBar/docs/examples/Vertical.d.ts +6 -0
  91. package/types/src/Switch/Switch.d.ts +13 -1
  92. package/types/src/Switch/docs/examples/Basic.d.ts +2 -10
  93. package/types/src/Switch/docs/examples/Disabled.d.ts +2 -9
  94. package/types/src/TabBar/Tab.d.ts +3 -1
  95. package/types/src/TabBar/docs/examples/Icons.d.ts +4 -0
  96. package/types/src/TabBar/docs/examples/Tooltips.d.ts +3 -0
  97. package/types/src/TabLayout/Panel.d.ts +2 -0
  98. package/types/src/Table/ExpandButton.d.ts +1 -1
  99. package/types/src/Table/Head.d.ts +1 -1
  100. package/types/src/Table/Row.d.ts +1 -1
  101. package/types/src/Table/Table.d.ts +1 -0
  102. package/types/src/Tooltip/Tooltip.d.ts +14 -1
  103. package/types/src/Tree/TreeContext.d.ts +1 -1
  104. package/useControlled.js +61 -97
  105. package/usePrevious.js +30 -62
  106. package/useResizeObserver.js +95 -127
  107. package/NonInteractiveCheckbox.js +0 -101
  108. package/types/src/CollapsiblePanel/icons/ExpandPanel.d.ts +0 -12
  109. package/types/src/NonInteractiveCheckbox/NonInteractiveCheckbox.d.ts +0 -22
  110. package/types/src/NonInteractiveCheckbox/index.d.ts +0 -1
  111. package/types/src/Switch/docs/examples/Error.d.ts +0 -6
  112. package/types/src/Text/IconOutlinedHide.d.ts +0 -3
  113. package/types/src/Text/IconOutlinedView.d.ts +0 -3
  114. /package/cypress/{tsconfig.cypress.json → tsconfig.check-cypress.json} +0 -0
package/Accordion.js CHANGED
@@ -76,26 +76,26 @@
76
76
  // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
77
77
  const u = require("@splunk/react-ui/usePrevious");
78
78
  var c = e.n(u);
79
+ // CONCATENATED MODULE: ./src/Accordion/AccordionContext.tsx
80
+ var s = (0, r.createContext)({});
81
+ s.displayName = "Accordion";
82
+ /* harmony default export */ const f = s;
79
83
  // CONCATENATED MODULE: external "styled-components"
80
- const s = require("styled-components");
81
- var f = e.n(s);
82
- // CONCATENATED MODULE: external "@splunk/react-ui/Box"
83
- const d = require("@splunk/react-ui/Box");
84
+ const d = require("styled-components");
84
85
  var p = e.n(d);
86
+ // CONCATENATED MODULE: external "@splunk/react-ui/Box"
87
+ const v = require("@splunk/react-ui/Box");
88
+ var m = e.n(v);
85
89
  // CONCATENATED MODULE: external "@splunk/themes"
86
- const v = require("@splunk/themes");
90
+ const y = require("@splunk/themes");
87
91
  // CONCATENATED MODULE: ./src/Accordion/AccordionStyles.ts
88
- var m = f()(p()).withConfig({
92
+ var b = p()(m()).withConfig({
89
93
  displayName: "AccordionStyles__StyledBox",
90
94
  componentId: "m39hyh-0"
91
- })([ "", ";flex-direction:column;margin-bottom:0;" ], v.mixins.reset("flex"));
95
+ })([ "", ";flex-direction:column;margin-bottom:0;" ], y.mixins.reset("flex"));
92
96
  // CONCATENATED MODULE: external "@splunk/react-ui/CollapsiblePanel"
93
- const y = require("@splunk/react-ui/CollapsiblePanel");
94
- var b = e.n(y);
95
- // CONCATENATED MODULE: ./src/Accordion/AccordionContext.tsx
96
- var g = (0, r.createContext)({});
97
- g.displayName = "Accordion";
98
- /* harmony default export */ const h = g;
97
+ const g = require("@splunk/react-ui/CollapsiblePanel");
98
+ var h = e.n(g);
99
99
  // CONCATENATED MODULE: ./src/Accordion/Panel.tsx
100
100
  function O() {
101
101
  return O = Object.assign ? Object.assign.bind() : function(e) {
@@ -145,25 +145,25 @@
145
145
  */ function C(e) {
146
146
  var n = e.panelId, a = e.inset, o = P(e, [ "panelId", "inset" ]);
147
147
  // @docs-props-type AccordionPanelPropsBase
148
- var l = (0, r.useContext)(g), i = l.onChange, u = l.openPanelId, c = l.inset;
149
- var s = u === n;
150
- var f = a !== undefined ? a : c;
148
+ var l = (0, r.useContext)(s), i = l.onChange, u = l.openPanelId, c = l.inset;
149
+ var f = u === n;
150
+ var d = a !== undefined ? a : c;
151
151
  // Props are different based on controlled/uncontrolled
152
152
  // For controlled, onChange required prop for controlled cases and must be defined.
153
- var d = i ? {
153
+ var p = i ? {
154
154
  onChange: i,
155
- open: s
155
+ open: f
156
156
  } : {
157
157
  onChange: undefined
158
158
  };
159
159
 
160
- return t().createElement(b(), O({
160
+ return t().createElement(h(), O({
161
161
  panelId: n,
162
162
  "data-test": "panel",
163
- inset: f,
163
+ inset: d,
164
164
  "data-test-panel-id": n,
165
165
  style: S
166
- }, o, d));
166
+ }, o, p));
167
167
  }
168
168
  C.propTypes = j;
169
169
  /* harmony default export */ const x = C;
@@ -278,17 +278,17 @@
278
278
  * @deprecated
279
279
  * Accordion has been deprecated and will be removed in a future major version. Use Collapsible Panel's SingleOpenPanelGroup API instead.
280
280
  */ function z(e) {
281
- var n = e.children, a = e.defaultOpenPanelId, o = e.elementRef, l = e.inset, u = l === void 0 ? true : l, s = e.onChange, f = e.openPanelId, d = B(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
281
+ var n = e.children, a = e.defaultOpenPanelId, o = e.elementRef, l = e.inset, u = l === void 0 ? true : l, s = e.onChange, d = e.openPanelId, p = B(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
282
282
  // @docs-props-type AccordionPropsBase
283
283
  A({
284
284
  additionalMessage: "Use Collapsible Panel instead.",
285
285
  componentName: "Accordion"
286
286
  });
287
- var p = c()(a);
287
+ var v = c()(a);
288
288
  (0, r.useEffect)((function() {
289
289
  if (false) {}
290
- }), [ a, p ]);
291
- var v = i()({
290
+ }), [ a, v ]);
291
+ var m = i()({
292
292
  componentName: "Accordion",
293
293
  /* eslint-disable-next-line prefer-rest-params */
294
294
  componentProps: arguments[0],
@@ -296,15 +296,15 @@
296
296
  defaultValuePropName: "defaultOpenPanelId",
297
297
  valuePropName: "openPanelId"
298
298
  });
299
- var y = (0, r.useState)(a), b = M(y, 2), g = b[0], O = b[1];
300
- var P = v ? f : g;
299
+ var y = (0, r.useState)(a), g = M(y, 2), h = g[0], O = g[1];
300
+ var P = m ? d : h;
301
301
  var I = r.Children.toArray(n).filter(r.isValidElement);
302
302
  // remove false, null, 0, etc
303
303
  var j = (0, r.useCallback)((function(e, n) {
304
304
  var r = n.panelId, t = n.reason;
305
305
  // if the open panel is clicked on, collapse it
306
306
  var a = P === r ? undefined : r;
307
- if (!v) {
307
+ if (!m) {
308
308
  O(a);
309
309
  }
310
310
  s === null || s === void 0 ? void 0 : s(e, {
@@ -312,7 +312,7 @@
312
312
  panelId: a,
313
313
  reason: t
314
314
  });
315
- }), [ v, s, P ]);
315
+ }), [ m, s, P ]);
316
316
  var S = (0, r.useMemo)((function() {
317
317
  return {
318
318
  inset: u,
@@ -321,11 +321,11 @@
321
321
  };
322
322
  }), [ j, u, P ]);
323
323
 
324
- return t().createElement(m, q({
324
+ return t().createElement(b, q({
325
325
  "data-test": "accordion",
326
326
  "data-test-open-panel-id": P,
327
327
  elementRef: o
328
- }, d), t().createElement(h.Provider, {
328
+ }, p), t().createElement(f.Provider, {
329
329
  value: S
330
330
  }, I));
331
331
  }
package/Avatar.js CHANGED
@@ -115,12 +115,10 @@
115
115
  var m = s().text.withConfig({
116
116
  displayName: "AvatarStyles__StyledText",
117
117
  componentId: "sc-1t4nch-3"
118
- })([ "", ";text-transform:capitalize;text-anchor:middle;dominant-baseline:middle;alignment-baseline:middle;fill:", ";transform:translate(50%,54%);" ], u.mixins.typography({
119
- weight: "bold"
120
- }), (function(e) {
118
+ })([ "font-weight:", ";text-transform:capitalize;text-anchor:middle;dominant-baseline:central;fill:", ";font-size:", ";" ], u.variables.fontWeightBold, (function(e) {
121
119
  var r = e.$textColor;
122
120
  return r;
123
- }));
121
+ }), u.variables.fontSize);
124
122
  // CONCATENATED MODULE: ./src/Avatar/getInitials.ts
125
123
  /**
126
124
  * Returns a suitable set of initials for a name. Uses the first character of each
@@ -184,13 +182,13 @@
184
182
  function k(e) {
185
183
  if (Array.isArray(e)) return e;
186
184
  }
187
- var P = "lightText";
188
- var A = "darkText";
185
+ var A = "lightText";
186
+ var P = "darkText";
189
187
  function E(e) {
190
188
  var r = S(e, 3), t = r[0], n = r[1], o = r[2];
191
189
  var i = (t * 299 + n * 587 + o * 114) / 1e3;
192
190
  // formula from https://www.w3.org/TR/AERT/#color-contrast
193
- return i > 125 ? A : P;
191
+ return i > 125 ? P : A;
194
192
  }
195
193
  /**
196
194
  * Determines if light or dark text should be used over a specific background color by determining the color brightness of a
@@ -244,7 +242,7 @@
244
242
  * TODO: Convert theme variable color variables.neutral200 to rgb dynamically and memoize it (SUI-5731).
245
243
  */
246
244
  // backgroundColor is either not provided or an accepted representation of color
247
- return e ? A : P;
245
+ return e ? P : A;
248
246
  }
249
247
  // CONCATENATED MODULE: ./src/Avatar/Avatar.tsx
250
248
  function I(e) {
@@ -255,7 +253,7 @@
255
253
  return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
256
254
  }, I(e);
257
255
  }
258
- function _(e, r) {
256
+ function z(e, r) {
259
257
  var t = Object.keys(e);
260
258
  if (Object.getOwnPropertySymbols) {
261
259
  var n = Object.getOwnPropertySymbols(e);
@@ -265,18 +263,18 @@
265
263
  }
266
264
  return t;
267
265
  }
268
- function R(e) {
266
+ function _(e) {
269
267
  for (var r = 1; r < arguments.length; r++) {
270
268
  var t = null != arguments[r] ? arguments[r] : {};
271
- r % 2 ? _(Object(t), !0).forEach((function(r) {
272
- z(e, r, t[r]);
273
- })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : _(Object(t)).forEach((function(r) {
269
+ r % 2 ? z(Object(t), !0).forEach((function(r) {
270
+ R(e, r, t[r]);
271
+ })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : z(Object(t)).forEach((function(r) {
274
272
  Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
275
273
  }));
276
274
  }
277
275
  return e;
278
276
  }
279
- function z(e, r, t) {
277
+ function R(e, r, t) {
280
278
  return (r = q(r)) in e ? Object.defineProperty(e, r, {
281
279
  value: t,
282
280
  enumerable: !0,
@@ -310,26 +308,26 @@
310
308
  }, H.apply(null, arguments);
311
309
  }
312
310
  function M(e, r) {
313
- return L(e) || B(e, r) || D(e, r) || N();
311
+ return V(e) || L(e, r) || B(e, r) || N();
314
312
  }
315
313
  function N() {
316
314
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
317
315
  }
318
- function D(e, r) {
316
+ function B(e, r) {
319
317
  if (e) {
320
- if ("string" == typeof e) return V(e, r);
318
+ if ("string" == typeof e) return D(e, r);
321
319
  var t = {}.toString.call(e).slice(8, -1);
322
- 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) ? V(e, r) : void 0;
320
+ 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) ? D(e, r) : void 0;
323
321
  }
324
322
  }
325
- function V(e, r) {
323
+ function D(e, r) {
326
324
  (null == r || r > e.length) && (r = e.length);
327
325
  for (var t = 0, n = Array(r); t < r; t++) {
328
326
  n[t] = e[t];
329
327
  }
330
328
  return n;
331
329
  }
332
- function B(e, r) {
330
+ function L(e, r) {
333
331
  var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
334
332
  if (null != t) {
335
333
  var n, o, i, a, l = [], u = !0, c = !1;
@@ -351,12 +349,12 @@
351
349
  return l;
352
350
  }
353
351
  }
354
- function L(e) {
352
+ function V(e) {
355
353
  if (Array.isArray(e)) return e;
356
354
  }
357
- function U(e, r) {
355
+ function G(e, r) {
358
356
  if (null == e) return {};
359
- var t, n, o = G(e, r);
357
+ var t, n, o = U(e, r);
360
358
  if (Object.getOwnPropertySymbols) {
361
359
  var i = Object.getOwnPropertySymbols(e);
362
360
  for (n = 0; n < i.length; n++) {
@@ -365,7 +363,7 @@
365
363
  }
366
364
  return o;
367
365
  }
368
- function G(e, r) {
366
+ function U(e, r) {
369
367
  if (null == e) return {};
370
368
  var t = {};
371
369
  for (var n in e) {
@@ -389,24 +387,23 @@
389
387
  textColor: l().oneOfType([ l().oneOf([ "auto" ]), l().string, l().func ]),
390
388
  value: l().string
391
389
  };
392
- function F(e) {
390
+ function W(e) {
393
391
  return !!e.onClick || !!e.to;
394
392
  }
395
- function J(e) {
396
- var r = e.backgroundColor, t = e.initials, n = e.label, o = e.size, i = U(e, [ "backgroundColor", "initials", "label", "size" ]);
397
- var a = r == null ? u.variables.neutral200 : r;
398
- var l = {
399
- "aria-label": n,
393
+ function F(e) {
394
+ var r = e.backgroundColor, t = e.label, n = e.size, o = G(e, [ "backgroundColor", "label", "size" ]);
395
+ var i = r == null ? u.variables.neutral200 : r;
396
+ var a = {
397
+ "aria-label": t,
400
398
  "data-test": "avatar",
401
- $backgroundColor: a,
402
- $initials: t,
403
- $size: o
399
+ $backgroundColor: i,
400
+ $size: n
404
401
  };
405
- return [ l, i ];
402
+ return [ a, o ];
406
403
  }
407
- function Q(e) {
408
- var r = J(e), o = M(r, 2), a = o[0], l = o[1];
409
- var u = l.children, c = l.elementRef, s = l.value, f = l.onClick, d = l.to, v = U(l, [ "children", "elementRef", "value", "onClick", "to" ]);
404
+ function J(e) {
405
+ var r = F(e), o = M(r, 2), a = o[0], l = o[1];
406
+ var u = l.children, c = l.elementRef, s = l.value, f = l.onClick, d = l.to, v = G(l, [ "children", "elementRef", "value", "onClick", "to" ]);
410
407
  var b = (0, t.useCallback)((function(e) {
411
408
  f === null || f === void 0 ? void 0 : f(e, {
412
409
  value: s
@@ -419,57 +416,65 @@
419
416
  to: d
420
417
  }, a, i()(v, Object.keys(K))), u);
421
418
  }
422
- function W(e) {
423
- var r = J(e), t = M(r, 2), o = t[0], a = t[1];
424
- var l = a.children, u = a.elementRef, c = U(a, [ "children", "elementRef" ]);
419
+ function Q(e) {
420
+ var r = F(e), t = M(r, 2), o = t[0], a = t[1];
421
+ var l = a.children, u = a.elementRef, c = G(a, [ "children", "elementRef" ]);
425
422
 
426
423
  return n().createElement(b, H({
427
424
  ref: u
428
425
  }, o, i()(c, Object.keys(K))), l);
429
426
  }
430
427
  function X(e) {
431
- var r = e.backgroundColor, o = e.textColor, i = o === void 0 ? "auto" : o, a = e.initials, l = e.image, c = e.size, s = c === void 0 ? "medium" : c, f = U(e, [ "backgroundColor", "textColor", "initials", "image", "size" ]);
428
+ var r = e.backgroundColor, o = e.textColor, i = o === void 0 ? "auto" : o, a = e.initials, l = e.image, c = e.size, s = c === void 0 ? "medium" : c, f = G(e, [ "backgroundColor", "textColor", "initials", "image", "size" ]);
432
429
  // @docs-props-type AvatarPropsBase
433
430
  var d = (0, u.useSplunkTheme)(), v = d.isLight;
434
431
  var b = i;
435
432
  if (i === "auto") {
436
433
  var y = T(v, r);
437
- b = y === A ? u.variables.black : u.variables.white;
434
+ b = y === P ? u.variables.black : u.variables.white;
438
435
  }
439
- var g = n().createElement(p, {
436
+ // SVG attributes to improve rendering of text when initials are longer than 2 characters
437
+ var g = a.length > 2 ? {
438
+ textLength: "90%",
439
+ lengthAdjust: "spacingAndGlyphs"
440
+ } : {};
441
+ var h = n().createElement(p, {
440
442
  viewBox: "0 0 32 32"
441
- }, n().createElement(m, {
443
+ }, n().createElement(m, H({
442
444
  "data-test": "initials",
445
+ x: "50%",
446
+ y: "50%",
447
+ dy: "-0.5",
443
448
  $textColor: b
444
- }, a));
445
- var h = l !== null && l !== void 0 ? l : g;
446
- var O = (0, t.useState)("loading"), S = M(O, 2), w = S[0], x = S[1];
449
+ }, g), a));
450
+ var O = l !== null && l !== void 0 ? l : h;
451
+ var S = (0, t.useState)("loading"), w = M(S, 2), x = w[0], j = w[1];
447
452
  if ( (0, t.isValidElement)(l)) {
448
453
  if (l.type === "img") {
449
- var j = l.props, C = j.src, k = j.alt, P = j.onError, E = U(j, [ "src", "alt", "onError" ]);
450
- var I = n().createElement("img", H({
451
- src: C,
452
- alt: k,
454
+ var C = l.props, k = C.src, A = C.alt, E = C.onError, I = G(C, [ "src", "alt", "onError" ]);
455
+ var z = n().createElement("img", H({
456
+ src: k,
457
+ alt: A,
453
458
  onError: function e() {
454
- x("error");
455
- if (P) {
456
- P();
459
+ j("error");
460
+ if (E) {
461
+ E();
457
462
  }
458
463
  }
459
- }, E));
460
- h = I;
464
+ }, I));
465
+ O = z;
461
466
  }
462
467
  }
463
468
  // fallback to initials if img fails to load
464
- var _ = w !== "error" ? h : g;
465
- var z = R({
469
+ var R = x !== "error" ? O : h;
470
+ var q = _({
466
471
  backgroundColor: r,
467
472
  size: s,
468
473
  initials: a,
469
474
  image: l,
470
475
  textColor: i
471
476
  }, f);
472
- return F(z) ? n().createElement(Q, z, _) : n().createElement(W, z, _);
477
+ return W(q) ? n().createElement(J, q, R) : n().createElement(Q, q, R);
473
478
  }
474
479
  X.propTypes = K;
475
480
  /* harmony default export */ const Y = X;
package/Box.js CHANGED
@@ -123,7 +123,8 @@
123
123
  * Box is a utility component to normalize and abstract common layout styles.
124
124
  */ function y(e) {
125
125
  var n = e.children, t = e.elementRef, l = e.flex, i = l === void 0 ? false : l, o = e.tag, a = o === void 0 ? "div" : o, f = e.inline, u = f === void 0 ? false : f, p = c(e, [ "children", "elementRef", "flex", "tag", "inline" ]);
126
-
126
+ // @docs-props-type BoxPropsBase
127
+
127
128
  return r().createElement(d, s({
128
129
  as: a,
129
130
  ref: t
package/Breadcrumbs.js CHANGED
@@ -61,9 +61,9 @@
61
61
  e.r(r);
62
62
  // EXPORTS
63
63
  e.d(r, {
64
- BreadcrumbsContext: () => /* reexport */ j,
65
- Item: () => /* reexport */ h,
66
- default: () => /* reexport */ _
64
+ BreadcrumbsContext: () => /* reexport */ c,
65
+ Item: () => /* reexport */ S,
66
+ default: () => /* reexport */ E
67
67
  });
68
68
  // CONCATENATED MODULE: external "react"
69
69
  const n = require("react");
@@ -73,35 +73,39 @@
73
73
  var l = e.n(a);
74
74
  // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
75
75
  const o = require("@splunk/ui-utils/i18n");
76
+ // CONCATENATED MODULE: ./src/Breadcrumbs/BreadcrumbsContext.tsx
77
+ var i = (0, n.createContext)({});
78
+ i.displayName = "Breadcrumbs";
79
+ /* harmony default export */ const c = i;
76
80
  // CONCATENATED MODULE: external "styled-components"
77
- const i = require("styled-components");
78
- var c = e.n(i);
81
+ const u = require("styled-components");
82
+ var s = e.n(u);
79
83
  // CONCATENATED MODULE: external "@splunk/themes"
80
- const u = require("@splunk/themes");
84
+ const d = require("@splunk/themes");
81
85
  // CONCATENATED MODULE: ./src/Breadcrumbs/BreadcrumbsStyles.ts
82
- var s = c().ol.withConfig({
86
+ var f = s().ol.withConfig({
83
87
  displayName: "BreadcrumbsStyles__StyledList",
84
88
  componentId: "sc-1maeyfk-0"
85
- })([ "", " flex-wrap:wrap;" ], u.mixins.reset("flex"));
86
- var d = c().li.withConfig({
89
+ })([ "", " flex-wrap:wrap;" ], d.mixins.reset("flex"));
90
+ var p = s().li.withConfig({
87
91
  displayName: "BreadcrumbsStyles__StyledListItem",
88
92
  componentId: "sc-1maeyfk-1"
89
- })([ "display:flex;min-width:max-content;a[aria-current]{font-weight:", ";color:", ";cursor:default;}" ], u.variables.fontWeightSemiBold, u.variables.contentColorActive);
90
- var f = c().span.withConfig({
93
+ })([ "display:flex;min-width:max-content;a[aria-current]{font-weight:", ";color:", ";cursor:default;}" ], d.variables.fontWeightSemiBold, d.variables.contentColorActive);
94
+ var m = s().span.withConfig({
91
95
  displayName: "BreadcrumbsStyles__StyledSeparator",
92
96
  componentId: "sc-1maeyfk-2"
93
- })([ "cursor:default;padding:0 ", ";color:", ";" ], u.variables.spacingSmall, u.variables.contentColorDefault);
97
+ })([ "cursor:default;padding:0 ", ";color:", ";" ], d.variables.spacingSmall, d.variables.contentColorDefault);
94
98
  // CONCATENATED MODULE: external "@splunk/react-ui/Link"
95
- const p = require("@splunk/react-ui/Link");
96
- var m = e.n(p);
99
+ const b = require("@splunk/react-ui/Link");
100
+ var v = e.n(b);
97
101
  // CONCATENATED MODULE: ./src/Breadcrumbs/ItemStyles.ts
98
- var b = c()(m()).withConfig({
102
+ var y = s()(v()).withConfig({
99
103
  displayName: "ItemStyles__StyledLink",
100
104
  componentId: "sc-1ywtawf-0"
101
- })([ "display:flex;align-items:center;gap:", ";white-space:nowrap;color:", ";&:where(:hover,:focus):not([disabled],[aria-disabled='true']){color:", ";}" ], u.variables.spacingXSmall, u.variables.contentColorDefault, u.variables.contentColorActive);
105
+ })([ "display:flex;align-items:center;gap:", ";white-space:nowrap;color:", ";&:where(:hover,:focus):not([disabled],[aria-disabled='true']){color:", ";}" ], d.variables.spacingXSmall, d.variables.contentColorDefault, d.variables.contentColorActive);
102
106
  // CONCATENATED MODULE: ./src/Breadcrumbs/Item.tsx
103
- function v() {
104
- return v = Object.assign ? Object.assign.bind() : function(e) {
107
+ function g() {
108
+ return g = Object.assign ? Object.assign.bind() : function(e) {
105
109
  for (var r = 1; r < arguments.length; r++) {
106
110
  var n = arguments[r];
107
111
  for (var t in n) {
@@ -109,11 +113,11 @@
109
113
  }
110
114
  }
111
115
  return e;
112
- }, v.apply(null, arguments);
116
+ }, g.apply(null, arguments);
113
117
  }
114
- function y(e, r) {
118
+ function C(e, r) {
115
119
  if (null == e) return {};
116
- var n, t, a = g(e, r);
120
+ var n, t, a = O(e, r);
117
121
  if (Object.getOwnPropertySymbols) {
118
122
  var l = Object.getOwnPropertySymbols(e);
119
123
  for (t = 0; t < l.length; t++) {
@@ -122,7 +126,7 @@
122
126
  }
123
127
  return a;
124
128
  }
125
- function g(e, r) {
129
+ function O(e, r) {
126
130
  if (null == e) return {};
127
131
  var n = {};
128
132
  for (var t in e) {
@@ -133,7 +137,7 @@
133
137
  }
134
138
  return n;
135
139
  }
136
- var C = {
140
+ var h = {
137
141
  elementRef: l().oneOfType([ l().func, l().object ]),
138
142
  enableCurrentPage: l().bool,
139
143
  endAdornment: l().node,
@@ -143,43 +147,43 @@
143
147
  startAdornment: l().node,
144
148
  to: l().string.isRequired
145
149
  };
146
- function O(e) {
147
- var r = e.enableCurrentPage, a = e.endAdornment, l = e.isCurrent, o = e.label, i = e.onClick, c = e.startAdornment, u = e.to, s = y(e, [ "enableCurrentPage", "endAdornment", "isCurrent", "label", "onClick", "startAdornment", "to" ]);
150
+ function w(e) {
151
+ var r = e.enableCurrentPage, a = e.endAdornment, l = e.isCurrent, o = e.label, i = e.onClick, u = e.startAdornment, s = e.to, d = C(e, [ "enableCurrentPage", "endAdornment", "isCurrent", "label", "onClick", "startAdornment", "to" ]);
148
152
  // @docs-props-type ItemPropsBase
149
- var d = (0, n.useContext)(j), f = d.onClick;
150
- var p = {
151
- to: u
153
+ var f = (0, n.useContext)(c), p = f.onClick;
154
+ var m = {
155
+ to: s
152
156
  };
153
- var m = (0, n.useCallback)((function(e) {
157
+ var b = (0, n.useCallback)((function(e) {
154
158
  i === null || i === void 0 ? void 0 : i(e, {
155
159
  label: o,
156
- to: u
160
+ to: s
157
161
  });
158
- f === null || f === void 0 ? void 0 : f(e, {
162
+ p === null || p === void 0 ? void 0 : p(e, {
159
163
  label: o,
160
- to: u
164
+ to: s
161
165
  });
162
- }), [ i, f, o, u ]);
166
+ }), [ i, p, o, s ]);
163
167
  if (l) {
164
- p["aria-current"] = "page";
168
+ m["aria-current"] = "page";
165
169
  if (!r) {
166
- p.disabled = true;
170
+ m.disabled = true;
167
171
  }
168
172
  }
169
- var g = i || f ? {
170
- onClick: m
173
+ var v = i || p ? {
174
+ onClick: b
171
175
  } : {};
172
176
 
173
- return t().createElement(b, v({
177
+ return t().createElement(y, g({
174
178
  appearance: "standalone",
175
179
  "data-test": "item"
176
- }, g, p, s), c && c, o, a && a);
180
+ }, v, m, d), u && u, o, a && a);
177
181
  }
178
- O.propTypes = C;
179
- /* harmony default export */ const h = O;
182
+ w.propTypes = h;
183
+ /* harmony default export */ const S = w;
180
184
  // CONCATENATED MODULE: ./src/Breadcrumbs/Breadcrumbs.tsx
181
- function w() {
182
- return w = Object.assign ? Object.assign.bind() : function(e) {
185
+ function P() {
186
+ return P = Object.assign ? Object.assign.bind() : function(e) {
183
187
  for (var r = 1; r < arguments.length; r++) {
184
188
  var n = arguments[r];
185
189
  for (var t in n) {
@@ -187,11 +191,11 @@
187
191
  }
188
192
  }
189
193
  return e;
190
- }, w.apply(null, arguments);
194
+ }, P.apply(null, arguments);
191
195
  }
192
- function S(e, r) {
196
+ function k(e, r) {
193
197
  if (null == e) return {};
194
- var n, t, a = P(e, r);
198
+ var n, t, a = j(e, r);
195
199
  if (Object.getOwnPropertySymbols) {
196
200
  var l = Object.getOwnPropertySymbols(e);
197
201
  for (t = 0; t < l.length; t++) {
@@ -200,7 +204,7 @@
200
204
  }
201
205
  return a;
202
206
  }
203
- function P(e, r) {
207
+ function j(e, r) {
204
208
  if (null == e) return {};
205
209
  var n = {};
206
210
  for (var t in e) {
@@ -211,18 +215,17 @@
211
215
  }
212
216
  return n;
213
217
  }
214
- /** @public */ var k = {
218
+ /** @public */ var x = {
215
219
  children: l().node.isRequired,
216
220
  elementRef: l().oneOfType([ l().func, l().object ]),
217
221
  enableCurrentPage: l().bool,
218
222
  onClick: l().func
219
223
  };
220
- var j = t().createContext({});
221
- function x(e) {
222
- var r = e.children, a = e.elementRef, l = e.enableCurrentPage, i = e.onClick, c = S(e, [ "children", "elementRef", "enableCurrentPage", "onClick" ]);
224
+ function _(e) {
225
+ var r = e.children, a = e.elementRef, l = e.enableCurrentPage, i = e.onClick, u = k(e, [ "children", "elementRef", "enableCurrentPage", "onClick" ]);
223
226
  // @docs-props-type BreadcrumbsPropsBase
224
- var u;
225
- var p = n.Children.toArray(r).filter(n.isValidElement).map((function(e, a) {
227
+ var s;
228
+ var d = n.Children.toArray(r).filter(n.isValidElement).map((function(e, a) {
226
229
  if (false) {}
227
230
  if (false) {}
228
231
  // Set the last child as the current Breadcrumbs.Item
@@ -232,29 +235,29 @@
232
235
  enableCurrentPage: l
233
236
  });
234
237
 
235
- return t().createElement(d, {
238
+ return t().createElement(p, {
236
239
  key: e.props.to
237
- }, i, !o && t().createElement(f, {
240
+ }, i, !o && t().createElement(m, {
238
241
  "aria-hidden": "true"
239
242
  }, "/"));
240
243
  }));
241
- var m = (0, n.useMemo)((function() {
244
+ var b = (0, n.useMemo)((function() {
242
245
  return {
243
246
  onClick: i
244
247
  };
245
248
  }), [ i ]);
246
249
 
247
- return t().createElement(j.Provider, {
248
- value: m
249
- }, t().createElement("nav", w({
250
+ return t().createElement(c.Provider, {
251
+ value: b
252
+ }, t().createElement("nav", P({
250
253
  "data-test": "breadcrumbs",
251
254
  "aria-label": (0, o._)("Breadcrumbs"),
252
255
  ref: a
253
- }, c), t().createElement(s, null, p)));
256
+ }, u), t().createElement(f, null, d)));
254
257
  }
255
- x.propTypes = k;
256
- x.Item = h;
257
- /* harmony default export */ const _ = x;
258
+ _.propTypes = x;
259
+ _.Item = S;
260
+ /* harmony default export */ const E = _;
258
261
  // CONCATENATED MODULE: ./src/Breadcrumbs/index.ts
259
262
  module.exports = r;
260
263
  /******/})();