@splunk/react-ui 5.7.1 → 5.8.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 (138) hide show
  1. package/Accordion.js +6 -6
  2. package/Box.js +83 -34
  3. package/CHANGELOG.md +29 -0
  4. package/CollapsiblePanel.js +11 -11
  5. package/ComboBox.js +31 -27
  6. package/ControlGroup.js +92 -91
  7. package/DefinitionList.js +9 -9
  8. package/Drawer.d.ts +2 -0
  9. package/Drawer.js +679 -0
  10. package/DualListbox.js +1 -1
  11. package/JSONTree.js +73 -72
  12. package/Link.js +2 -2
  13. package/MIGRATION.md +10 -0
  14. package/Menu.js +338 -240
  15. package/Modal.js +127 -109
  16. package/Multiselect.js +437 -351
  17. package/Paginator.js +14 -12
  18. package/Popover.js +4 -1
  19. package/README.md +11 -0
  20. package/RadioBar.js +1 -1
  21. package/Search.js +103 -88
  22. package/Select.js +42 -40
  23. package/SelectBase.js +374 -328
  24. package/SidePanel.js +346 -167
  25. package/SlidingPanels.js +11 -11
  26. package/StepBar.js +7 -7
  27. package/Switch.js +5 -5
  28. package/Text.js +24 -24
  29. package/TextArea.js +7 -7
  30. package/TransitionOpen.js +188 -169
  31. package/docs-llm/Accordion.md +267 -0
  32. package/docs-llm/Anchor Menu.md +115 -0
  33. package/docs-llm/Anchor.md +54 -0
  34. package/docs-llm/AnimationToggle.md +254 -0
  35. package/docs-llm/Avatar.md +298 -0
  36. package/docs-llm/Badge.md +212 -0
  37. package/docs-llm/Breadcrumbs.md +306 -0
  38. package/docs-llm/Button Group.md +53 -0
  39. package/docs-llm/Button.md +361 -0
  40. package/docs-llm/Card Layout.md +286 -0
  41. package/docs-llm/Card.md +619 -0
  42. package/docs-llm/Checkbox.md +218 -0
  43. package/docs-llm/Chip.md +291 -0
  44. package/docs-llm/Clickable.md +160 -0
  45. package/docs-llm/Code.md +292 -0
  46. package/docs-llm/Collapsible Panel.md +744 -0
  47. package/docs-llm/Color.md +253 -0
  48. package/docs-llm/Column Layout.md +391 -0
  49. package/docs-llm/Combo Box.md +540 -0
  50. package/docs-llm/Control Group.md +594 -0
  51. package/docs-llm/Date.md +270 -0
  52. package/docs-llm/Definition List.md +278 -0
  53. package/docs-llm/Divider.md +216 -0
  54. package/docs-llm/Drawer.md +414 -0
  55. package/docs-llm/Dropdown.md +472 -0
  56. package/docs-llm/Dual Listbox.md +325 -0
  57. package/docs-llm/File.md +653 -0
  58. package/docs-llm/Form Rows.md +374 -0
  59. package/docs-llm/Heading.md +179 -0
  60. package/docs-llm/Image.md +109 -0
  61. package/docs-llm/JSON Tree.md +260 -0
  62. package/docs-llm/Layer.md +74 -0
  63. package/docs-llm/Layout.md +50 -0
  64. package/docs-llm/Link.md +318 -0
  65. package/docs-llm/List.md +189 -0
  66. package/docs-llm/Markdown.md +179 -0
  67. package/docs-llm/Menu.md +735 -0
  68. package/docs-llm/Message Bar.md +236 -0
  69. package/docs-llm/Message.md +248 -0
  70. package/docs-llm/Modal.md +443 -0
  71. package/docs-llm/Monogram.md +159 -0
  72. package/docs-llm/Multiselect.md +937 -0
  73. package/docs-llm/Number.md +298 -0
  74. package/docs-llm/Paginator.md +395 -0
  75. package/docs-llm/Paragraph.md +148 -0
  76. package/docs-llm/Phone Number.md +254 -0
  77. package/docs-llm/Popover.md +166 -0
  78. package/docs-llm/Progress.md +141 -0
  79. package/docs-llm/Radio Bar.md +303 -0
  80. package/docs-llm/Radio List.md +350 -0
  81. package/docs-llm/Resize.md +362 -0
  82. package/docs-llm/Screen Reader Content.md +73 -0
  83. package/docs-llm/Scroll Container Context.md +155 -0
  84. package/docs-llm/Scroll.md +152 -0
  85. package/docs-llm/Search.md +381 -0
  86. package/docs-llm/Select.md +985 -0
  87. package/docs-llm/Side Panel.md +777 -0
  88. package/docs-llm/Slider.md +339 -0
  89. package/docs-llm/Sliding Panels.md +340 -0
  90. package/docs-llm/Split Button.md +295 -0
  91. package/docs-llm/Static Content.md +90 -0
  92. package/docs-llm/Step Bar.md +292 -0
  93. package/docs-llm/Switch.md +268 -0
  94. package/docs-llm/Tab Bar.md +439 -0
  95. package/docs-llm/Tab Layout.md +398 -0
  96. package/docs-llm/Table.md +2642 -0
  97. package/docs-llm/Text Area.md +253 -0
  98. package/docs-llm/Text.md +339 -0
  99. package/docs-llm/Tooltip.md +325 -0
  100. package/docs-llm/Transition Open.md +406 -0
  101. package/docs-llm/Tree.md +586 -0
  102. package/docs-llm/Typography.md +125 -0
  103. package/docs-llm/Wait Spinner.md +121 -0
  104. package/docs-llm/llms.txt +97 -0
  105. package/package.json +6 -5
  106. package/types/src/Box/Box.d.ts +2 -10
  107. package/types/src/Drawer/Body.d.ts +17 -0
  108. package/types/src/Drawer/Drawer.d.ts +114 -0
  109. package/types/src/Drawer/DrawerContext.d.ts +11 -0
  110. package/types/src/Drawer/Footer.d.ts +25 -0
  111. package/types/src/Drawer/Header.d.ts +41 -0
  112. package/types/src/Drawer/docs/examples/Basic.d.ts +6 -0
  113. package/types/src/Drawer/docs/examples/ContainerPosition.d.ts +7 -0
  114. package/types/src/Drawer/docs/examples/InitialFocus.d.ts +9 -0
  115. package/types/src/Drawer/docs/examples/InlinePosition.d.ts +7 -0
  116. package/types/src/Drawer/docs/examples/PagePosition.d.ts +7 -0
  117. package/types/src/Drawer/index.d.ts +2 -0
  118. package/types/src/JSONTree/JSONTree.d.ts +12 -5
  119. package/types/src/JSONTree/renderTreeItems.d.ts +2 -1
  120. package/types/src/Menu/Item.d.ts +2 -1
  121. package/types/src/Menu/docs/examples/SelectableCheckbox.d.ts +7 -0
  122. package/types/src/Modal/Modal.d.ts +1 -2
  123. package/types/src/Select/Option.d.ts +6 -3
  124. package/types/src/Select/Select.d.ts +8 -5
  125. package/types/src/Select/docs/examples/Dimmed.d.ts +7 -0
  126. package/types/src/SelectBase/OptionBase.d.ts +6 -3
  127. package/types/src/SelectBase/SelectBase.d.ts +8 -3
  128. package/types/src/SidePanel/SidePanel.d.ts +43 -2
  129. package/types/src/SidePanel/docs/examples/DockLayout.d.ts +17 -0
  130. package/types/src/SidePanel/docs/examples/InitialFocus.d.ts +9 -0
  131. package/types/src/TransitionOpen/TransitionOpen.d.ts +29 -4
  132. package/types/src/useKeyPress/index.d.ts +9 -2
  133. package/types/src/useOnClickOutside/index.d.ts +2 -0
  134. package/types/src/useOnClickOutside/useOnClickOutside.d.ts +4 -0
  135. package/useKeyPress.js +23 -18
  136. package/useOnClickOutside.d.ts +2 -0
  137. package/useOnClickOutside.js +79 -0
  138. package/types/src/RadioList/docs/examples/Row.d.ts +0 -6
package/Paginator.js CHANGED
@@ -500,8 +500,8 @@
500
500
  }), [ d ]);
501
501
  // Can't show more links than total number of pages.
502
502
  var h = Math.min(g, v);
503
- var P = Math.ceil(h / 2);
504
- var O = Math.ceil(v - h / 2);
503
+ var P = h;
504
+ var O = v - h + 1;
505
505
  var C = [];
506
506
  if (v <= 1) {
507
507
  return null;
@@ -512,20 +512,22 @@
512
512
  * firstPageNearbyCurrent and lastPageNearbyCurrent refer to the page number of the first and last of these buttons.
513
513
  */ var w;
514
514
  var k;
515
- if (u <= P + 1) {
516
- // + 1 to avoid ellipsis between 1 and 2
515
+ if (u < P) {
517
516
  w = 1;
518
- k = w + Math.min(v, h) - 1;
519
- } else if (u > P && u < O) {
520
- k = Math.ceil(u + (h - 2) / 2);
521
- w = k - h + 2;
517
+ k = h;
518
+ } else if (u >= P && u <= O) {
519
+ w = u - Math.floor((h - 2) / 2);
520
+ k = u + 1 === v ? v : u + Math.ceil((h - 2) / 2);
522
521
  } else {
523
- // include page #1 to avoid ellipsis between 1 and 2
524
- w = v - h === 1 ? 1 : v - h + 1;
522
+ w = O;
525
523
  k = v;
526
524
  }
527
525
  // bump up the last page to avoid ellipsis
528
526
  k = t && k + 1 === v ? v : k;
527
+ // check to avoid ellipsis between 1 and 2
528
+ if (w === 2) {
529
+ w = 1;
530
+ }
529
531
  var E = u - 1;
530
532
  C.push( r().createElement(S, ne({}, l === null || l === void 0 ? void 0 : l({
531
533
  page: E
@@ -537,7 +539,7 @@
537
539
  onClick: y,
538
540
  page: E
539
541
  }), r().createElement(i(), null), (0, p._)("Prev")));
540
- if (u > P && v > h && w !== 1) {
542
+ if (u >= P && v > h && w !== 1) {
541
543
  var _ = 1;
542
544
  C.push( r().createElement(S, ne({}, l === null || l === void 0 ? void 0 : l({
543
545
  page: _
@@ -567,7 +569,7 @@
567
569
  page: x
568
570
  }), String(x)));
569
571
  }
570
- if (u <= O && v > h && k !== v) {
572
+ if (v > h && k !== v) {
571
573
  C.push( r().createElement(ee, {
572
574
  "data-test": "page",
573
575
  key: "nextEllipsis"
package/Popover.js CHANGED
@@ -422,6 +422,8 @@
422
422
  w = f - r.left;
423
423
  }
424
424
  }
425
+ // SUI-8136: Set container width as min-width if it fits within viewport, otherwise allow it to shrink to fit
426
+ var R = (S === "above" || S === "below") && i.offsetWidth <= w ? i.offsetWidth : 0;
425
427
  return {
426
428
  placement: S,
427
429
  maxHeight: P,
@@ -429,7 +431,8 @@
429
431
  outerContainerStyle: {
430
432
  top: b,
431
433
  left: g,
432
- bottom: y
434
+ bottom: y,
435
+ minWidth: R
433
436
  }
434
437
  };
435
438
  }
package/README.md CHANGED
@@ -128,3 +128,14 @@ Further reading:
128
128
  * [styled-components and SC_ATTR](https://styled-components.com/docs/advanced#avoiding-conflicts-with-thirdparty-styles-and-scripts)
129
129
  * [styled-components "several instances" warning](https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page)
130
130
  * [Duplicate React](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react)
131
+
132
+
133
+ ## LLM Documentation
134
+
135
+ This package includes AI-optimized documentation in the `docs-llm/` directory for use with AI assistants and tools like MCP servers. These markdown files provide comprehensive component documentation suitable for LLM consumption.
136
+
137
+ - **Location:** `node_modules/@splunk/react-ui/docs-llm/`
138
+ - **Contents:** Component documentation, usage examples, API reference, accessibility guidelines
139
+ - **Format:** Markdown files optimized for AI/LLM processing
140
+
141
+ The LLM documentation mirrors the standard documentation but is formatted specifically for machine consumption, enabling AI assistants to provide accurate guidance on component usage, props, and best practices.
package/RadioBar.js CHANGED
@@ -492,7 +492,7 @@
492
492
  flex: true,
493
493
  $disabled: W,
494
494
  $error: b,
495
- elementRef: s,
495
+ ref: s,
496
496
  "data-test": "radio-bar",
497
497
  "data-test-value": A,
498
498
  "data-test-disabled": W ? "disabled" : undefined,
package/Search.js CHANGED
@@ -101,9 +101,9 @@
101
101
  // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
102
102
  const C = require("@splunk/ui-utils/i18n");
103
103
  // CONCATENATED MODULE: external "@splunk/ui-utils/id"
104
- const j = require("@splunk/ui-utils/id");
104
+ const k = require("@splunk/ui-utils/id");
105
105
  // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
106
- const k = require("@splunk/ui-utils/keyboard");
106
+ const j = require("@splunk/ui-utils/keyboard");
107
107
  // CONCATENATED MODULE: external "@splunk/ui-utils/scroll"
108
108
  const P = require("@splunk/ui-utils/scroll");
109
109
  // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
@@ -113,7 +113,7 @@
113
113
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
114
114
  * @param current - The new value of the ref.
115
115
  */
116
- function I(e, n) {
116
+ function R(e, n) {
117
117
  if (e) {
118
118
  if (typeof e === "function") {
119
119
  e(n);
@@ -126,8 +126,8 @@
126
126
  }
127
127
  }
128
128
  // CONCATENATED MODULE: ./src/Search/Option.tsx
129
- function R() {
130
- return R = Object.assign ? Object.assign.bind() : function(e) {
129
+ function I() {
130
+ return I = Object.assign ? Object.assign.bind() : function(e) {
131
131
  for (var n = 1; n < arguments.length; n++) {
132
132
  var r = arguments[n];
133
133
  for (var t in r) {
@@ -135,7 +135,7 @@
135
135
  }
136
136
  }
137
137
  return e;
138
- }, R.apply(null, arguments);
138
+ }, I.apply(null, arguments);
139
139
  }
140
140
  function M(e, n) {
141
141
  if (null == e) return {};
@@ -193,11 +193,11 @@
193
193
  }
194
194
  }), [ l, f, m, g ]);
195
195
  var S = (0, r.useCallback)((function(e) {
196
- I(u, e);
196
+ R(u, e);
197
197
  }), [ u ]);
198
198
  var w = s === undefined ? g : s;
199
199
 
200
- return t().createElement(p.Item, R({
200
+ return t().createElement(p.Item, I({
201
201
  active: n,
202
202
  "data-test": "search-option",
203
203
  "data-test-value": g,
@@ -413,7 +413,7 @@
413
413
  }));
414
414
  var oe = (0, C._)("Search");
415
415
  function ae(e) {
416
- var n = e.animateLoading, o = n === void 0 ? false : n, a = e.append, i = e.children, l = e.defaultPlacement, u = e.defaultValue, s = e.describedBy, f = e.disabled, v = f === void 0 ? false : f, p = e.elementRef, b = e.error, y = b === void 0 ? false : b, h = e.footerMessage, S = e.inline, R = S === void 0 ? false : S, M = e.inputRef, A = e.isLoadingOptions, q = A === void 0 ? false : A, x = e.labelledBy, D = e.loadingMessage, E = e.menuStyle, B = E === void 0 ? {} : E, T = e.name, H = e.noOptionsMessage, L = e.onChange, N = e.onClose, K = e.onFocus, W = e.onKeyDown, U = e.onOpen, $ = e.placeholder, X = $ === void 0 ? (0,
416
+ var n = e.animateLoading, o = n === void 0 ? false : n, a = e.append, i = e.children, l = e.defaultPlacement, u = e.defaultValue, s = e.describedBy, f = e.disabled, v = f === void 0 ? false : f, p = e.elementRef, b = e.error, y = b === void 0 ? false : b, h = e.footerMessage, S = e.inline, I = S === void 0 ? false : S, M = e.inputRef, A = e.isLoadingOptions, q = A === void 0 ? false : A, x = e.labelledBy, D = e.loadingMessage, E = e.menuStyle, B = E === void 0 ? {} : E, T = e.name, H = e.noOptionsMessage, L = e.onChange, N = e.onClose, K = e.onFocus, W = e.onKeyDown, U = e.onOpen, $ = e.placeholder, X = $ === void 0 ? (0,
417
417
  C._)("Search...") : $, Y = e.prepend, G = e.value, J = Z(e, [ "animateLoading", "append", "children", "defaultPlacement", "defaultValue", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFocus", "onKeyDown", "onOpen", "placeholder", "prepend", "value" ]);
418
418
  // @docs-props-type SearchPropsBase
419
419
  var Q = !!i || q;
@@ -424,33 +424,34 @@
424
424
  var be = (0, r.useState)(u || ""), me = z(be, 2), ye = me[0], ge = me[1];
425
425
  var he = (0, r.useState)((function() {
426
426
  return {
427
- popoverId: (0, j.createDOMID)("popover"),
428
- menuId: (0, j.createDOMID)("menu"),
429
- activeItemId: (0, j.createDOMID)("active-item")
427
+ popoverId: (0, k.createDOMID)("popover"),
428
+ menuId: (0, k.createDOMID)("menu"),
429
+ activeItemId: (0, k.createDOMID)("active-item")
430
430
  };
431
- })), Oe = z(he, 1), Se = Oe[0], we = Se.popoverId, Ce = Se.menuId, je = Se.activeItemId;
431
+ })), Oe = z(he, 1), Se = Oe[0], we = Se.popoverId, Ce = Se.menuId, ke = Se.activeItemId;
432
432
  // previous state
433
- var ke = w()(ae);
433
+ var je = w()(ae);
434
434
  // refs
435
435
  var Pe = (0, r.useRef)(null);
436
- var Ie = (0, r.useRef)(null);
437
- var Re = (0, r.useRef)(G !== undefined && G !== null);
436
+ var Re = (0, r.useRef)(null);
437
+ var Ie = (0, r.useRef)(G !== undefined && G !== null);
438
438
  var Me = (0, r.useRef)([]);
439
- var Ae = (0, r.useRef)(ke);
440
- var qe = (0, r.useRef)(undefined);
441
- var xe = function e(n) {
442
- I(Pe, n);
443
- I(p, n);
444
- };
439
+ var Ae = (0, r.useRef)(je);
440
+ var qe = (0, r.useRef)(0);
441
+ var xe = (0, r.useRef)(undefined);
445
442
  var De = function e(n) {
446
- I(Ie, n);
447
- I(M, n);
443
+ R(Pe, n);
444
+ R(p, n);
448
445
  };
449
- var Ee = function e() {
450
- return Re.current ? G : ye;
446
+ var Ee = function e(n) {
447
+ R(Re, n);
448
+ R(M, n);
451
449
  };
452
450
  var Be = function e() {
453
- var n = Ee();
451
+ return Ie.current ? G : ye;
452
+ };
453
+ var Te = function e() {
454
+ var n = Be();
454
455
  var t = r.Children.toArray(i).filter(r.isValidElement);
455
456
  var o = !ve && t.find((function(e) {
456
457
  return e.props.label !== undefined && e.props.value === n;
@@ -460,27 +461,27 @@
460
461
  }
461
462
  return n;
462
463
  };
463
- var Te = function e() {
464
+ var He = function e() {
464
465
  se(true);
465
466
  ie(-1);
466
467
  U === null || U === void 0 ? void 0 : U();
467
468
  };
468
- var He = function e() {
469
+ var Le = function e() {
469
470
  se(false);
470
471
  Ae.current = null;
471
472
  N === null || N === void 0 ? void 0 : N();
472
473
  };
473
- var Le = function e() {
474
+ var _e = function e() {
474
475
  var n;
475
- (n = Ie.current) === null || n === void 0 ? void 0 : n.focus();
476
+ (n = Re.current) === null || n === void 0 ? void 0 : n.focus();
476
477
  };
477
- var _e = function e(n, r) {
478
- Te();
478
+ var Ne = function e(n, r) {
479
+ He();
479
480
  K === null || K === void 0 ? void 0 : K(n, r);
480
481
  };
481
- var Ne = function e(n, r) {
482
+ var Ve = function e(n, r) {
482
483
  var t = r.value;
483
- if (!Re.current) {
484
+ if (!Ie.current) {
484
485
  ge(t);
485
486
  }
486
487
  ie(-1);
@@ -490,13 +491,13 @@
490
491
  name: T
491
492
  });
492
493
  };
493
- var Ve = function e(n, r) {
494
- Ne(n, F({}, r));
494
+ var Ke = function e(n, r) {
495
+ Ve(n, F({}, r));
496
+ _e();
495
497
  Le();
496
- He();
497
498
  };
498
- var Ke = function e(n) {
499
- var r = Me.current.length;
499
+ var Fe = function e(n) {
500
+ var r = qe.current;
500
501
  var t = n.key;
501
502
  if (ce) {
502
503
  switch (t) {
@@ -506,86 +507,100 @@
506
507
  // triggering onClick so that links can be activated with the keyboard
507
508
  // since the menu items themselves never receive focus
508
509
  // this will implicitly call handleSelectOption()
509
- (o = document.getElementById(je)) === null || o === void 0 ? void 0 : o.click();
510
+ (o = document.getElementById(ke)) === null || o === void 0 ? void 0 : o.click();
510
511
  break;
511
512
  }
512
513
 
513
514
  case "Tab":
514
- He();
515
+ Le();
515
516
  break;
516
517
 
517
518
  case "ArrowDown":
518
- ie(Math.min(ae + 1, r - 1));
519
+ if (r <= 0) {
520
+ break;
521
+ }
522
+ ie((function(e) {
523
+ return Math.min(e + 1, r - 1);
524
+ }));
519
525
  break;
520
526
 
521
527
  case "ArrowUp":
522
- ie(Math.max(ae - 1, 0));
528
+ if (r <= 0) {
529
+ break;
530
+ }
531
+ ie((function(e) {
532
+ return Math.max(e - 1, 0);
533
+ }));
523
534
  break;
524
535
 
525
536
  default:
526
537
  // do nothing
527
538
  }
528
- } else if ((0, k.addsCharacter)(n.nativeEvent) !== false ||
539
+ } else if ((0, j.addsCharacter)(n.nativeEvent) !== false ||
529
540
  // Safari 9.0 returns undefined
530
541
  t === "Enter" || t === "Backspace" || t === "ArrowDown" || t === "ArrowUp") {
531
- Te();
542
+ He();
532
543
  }
533
544
  W === null || W === void 0 ? void 0 : W(n);
534
545
  };
535
- var Fe = function e() {
546
+ var We = function e() {
536
547
  if (!ce && !v) {
537
- Te();
548
+ He();
538
549
  }
539
550
  };
540
- var We = function e(n) {
551
+ var Ue = function e(n) {
541
552
  var r = n.event, t = n.reason;
542
553
  var o = t === "offScreen" || t === "escapeKey" || t === "clickAway" && Pe.current && !re(Pe.current, r);
543
554
  if (o) {
544
- He();
555
+ Le();
545
556
  }
546
557
  };
547
- var Ue = function e(n) {
558
+ var $e = function e(n) {
548
559
  if (Ae.current !== ae) {
549
560
  if (n) {
550
561
  (0, P.scrollIntoViewIfNeeded)(n);
551
562
  }
552
563
  }
553
564
  };
554
- var $e = function e(n) {
565
+ var ze = function e(n) {
555
566
  var a = n.anchorWidth, l = n.maxHeight;
556
567
  var u = r.Children.toArray(i).filter(r.isValidElement);
557
568
  // Highlight Active
558
- qe.current = undefined;
569
+ xe.current = undefined;
570
+ qe.current = 0;
559
571
  // Only update the menu options if they are valid and the dropdown is open.
560
572
  // This is necessary to handle the outro animation of the dropdown.
561
573
  if (Q && ce) {
562
- Me.current = u.map((function(e, n) {
574
+ Me.current = u.map((function(e) {
563
575
  if (e.type.as !== "Item") {
564
576
  // ignore non-Option items such as Headings and Dividers
565
577
  return e;
566
578
  }
567
- var t = function n(r, t) {
579
+ var n = function n(r, t) {
568
580
  var o, a;
569
581
  var i = (o = (a = e.props).onClick) === null || o === void 0 ? void 0 : o.call(a, r, t);
570
582
  if (i !== false) {
571
- Ve(r, t);
583
+ Ke(r, t);
572
584
  }
573
585
  };
574
- if (n === ae) {
575
- if (!e.props.disabled) {
576
- qe.current = e.props.value;
577
- }
586
+ if (e.props.disabled) {
587
+ return e;
588
+ }
589
+ var t = qe.current === ae;
590
+ qe.current += 1;
591
+ if (t) {
592
+ xe.current = e.props.value;
578
593
 
579
594
  return (0, r.cloneElement)(e, {
580
- elementRef: Ue,
581
- id: je,
582
- onClick: t,
595
+ elementRef: $e,
596
+ id: ke,
597
+ onClick: n,
583
598
  active: true
584
599
  });
585
600
  }
586
601
 
587
602
  return (0, r.cloneElement)(e, {
588
- onClick: t
603
+ onClick: n
589
604
  });
590
605
  }));
591
606
  }
@@ -607,16 +622,16 @@
607
622
  menuId: Ce
608
623
  }), Me.current);
609
624
  };
610
- var ze = Ee();
611
625
  var Xe = Be();
612
- var Ye = ce && !!Pe.current && Q;
613
- var Ge = Q ? "combobox" : "searchbox";
614
- var Je = {
615
- "aria-activedescendant": Ye && ae > -1 ? je : undefined,
626
+ var Ye = Te();
627
+ var Ge = ce && !!Pe.current && Q;
628
+ var Je = Q ? "combobox" : "searchbox";
629
+ var Qe = {
630
+ "aria-activedescendant": Ge && ae > -1 ? ke : undefined,
616
631
  "aria-expanded": Q ? ce && !!Pe.current : undefined,
617
- "aria-controls": Ye ? Ce : undefined
632
+ "aria-controls": Ge ? Ce : undefined
618
633
  };
619
- var Qe = t().createElement(_, {
634
+ var Ze = t().createElement(_, {
620
635
  $disabled: v,
621
636
  "aria-label": oe,
622
637
  "data-test": "search-icon"
@@ -631,28 +646,28 @@
631
646
  autoCorrect: "off",
632
647
  canClear: true,
633
648
  "data-test-popover-id": we,
634
- "data-test-label": Xe,
635
- "data-test-value": ze,
636
- "data-test-open": Ye,
649
+ "data-test-label": Ye,
650
+ "data-test-value": Xe,
651
+ "data-test-open": Ge,
637
652
  describedBy: s,
638
653
  disabled: v,
639
- elementRef: xe,
654
+ elementRef: De,
640
655
  error: y,
641
- inline: R,
642
- inputRef: De,
656
+ inline: I,
657
+ inputRef: Ee,
643
658
  labelledBy: x,
644
659
  name: T,
645
- onFocus: _e,
646
- onClick: Fe,
647
- onChange: Ne,
648
- onKeyDown: Ke,
660
+ onFocus: Ne,
661
+ onClick: We,
662
+ onChange: Ve,
663
+ onKeyDown: Fe,
649
664
  placeholder: X,
650
665
  prepend: Y,
651
666
  spellCheck: false,
652
- startAdornment: Qe,
653
- value: Xe,
654
- role: Ge
655
- }, Je), t().createElement(m(), {
667
+ startAdornment: Ze,
668
+ value: Ye,
669
+ role: Je
670
+ }, Qe), t().createElement(m(), {
656
671
  anchor: function() {
657
672
  return Pe.current;
658
673
  }(),
@@ -660,10 +675,10 @@
660
675
  canCoverAnchor: false,
661
676
  defaultPlacement: l,
662
677
  id: we,
663
- onRequestClose: We,
664
- open: Ye,
678
+ onRequestClose: Ue,
679
+ open: Ge,
665
680
  repositionMode: "flip"
666
- }, $e));
681
+ }, ze));
667
682
  }
668
683
  ae.propTypes = ne;
669
684
  ae.Option = D;
package/Select.js CHANGED
@@ -77,12 +77,12 @@
77
77
  var l = e.n(i);
78
78
  // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
79
79
  const u = require("@splunk/react-ui/useControlled");
80
- var c = e.n(u);
80
+ var d = e.n(u);
81
81
  // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
82
82
  const s = require("@splunk/ui-utils/i18n");
83
83
  // CONCATENATED MODULE: ./src/Select/Option.tsx
84
- function d() {
85
- return d = Object.assign ? Object.assign.bind() : function(e) {
84
+ function c() {
85
+ return c = Object.assign ? Object.assign.bind() : function(e) {
86
86
  for (var n = 1; n < arguments.length; n++) {
87
87
  var o = arguments[n];
88
88
  for (var t in o) {
@@ -90,7 +90,7 @@
90
90
  }
91
91
  }
92
92
  return e;
93
- }, d.apply(null, arguments);
93
+ }, c.apply(null, arguments);
94
94
  }
95
95
  function f(e, n) {
96
96
  if (null == e) return {};
@@ -114,13 +114,13 @@
114
114
  }
115
115
  return o;
116
116
  }
117
- var v = {
117
+ var b = {
118
118
  /** @private */
119
119
  active: a().bool,
120
120
  children: a().node,
121
121
  description: a().string,
122
122
  descriptionPosition: a().oneOf([ "right", "bottom" ]),
123
- disabled: a().bool,
123
+ disabled: a().oneOfType([ a().bool, a().oneOf([ "dimmed", "disabled" ]) ]),
124
124
  elementRef: a().oneOfType([ a().func, a().object ]),
125
125
  /** @private */
126
126
  endAdornment: a().node,
@@ -142,21 +142,22 @@
142
142
  };
143
143
  /**
144
144
  * An option within a `Select`. Any elements passed to it should be memoized.
145
- */ function b(e) {
146
- var n = e.children, o = e.descriptionPosition, r = o === void 0 ? "bottom" : o, a = e.elementRef, l = e.label, u = f(e, [ "children", "descriptionPosition", "elementRef", "label" ]);
145
+ */ function v(e) {
146
+ var n = e.children, o = e.descriptionPosition, r = o === void 0 ? "bottom" : o, a = e.disabled, l = e.elementRef, u = e.label, d = f(e, [ "children", "descriptionPosition", "disabled", "elementRef", "label" ]);
147
147
  // @docs-props-type OptionPropsBase
148
148
 
149
- return t().createElement(i.Option, d({
149
+ return t().createElement(i.Option, c({
150
150
  descriptionPosition: r,
151
- label: l
152
- }, u, {
153
- elementRef: a,
151
+ disabled: a,
152
+ label: u
153
+ }, d, {
154
+ elementRef: l,
154
155
  multiple: false
155
- }), n || l);
156
+ }), n || u);
156
157
  }
157
- var g = (0, o.memo)(b);
158
+ var g = (0, o.memo)(v);
158
159
  // @ts-expect-error Need to set propTypes on OptionMemoized so that javascript propType validation will work
159
- g.propTypes = v;
160
+ g.propTypes = b;
160
161
  /* harmony default export */ const m = g;
161
162
  // CONCATENATED MODULE: ./src/utils/useDeprecate.tsx
162
163
  var O = "is deprecated and will be removed in the next major version.";
@@ -223,7 +224,7 @@
223
224
  defaultPlacement: a().oneOf([ "above", "below", "vertical" ]),
224
225
  defaultValue: a().oneOfType([ a().string, a().number, a().bool ]),
225
226
  describedBy: a().string,
226
- disabled: a().bool,
227
+ disabled: a().oneOfType([ a().bool, a().oneOf([ "dimmed", "disabled" ]) ]),
227
228
  elementRef: a().oneOfType([ a().func, a().object ]),
228
229
  error: a().bool,
229
230
  filter: a().oneOf([ false, true, "controlled" ]),
@@ -257,9 +258,9 @@
257
258
  virtualization: a().number
258
259
  };
259
260
  var C = (0, s._)("No matches");
260
- var R = (0, s._)("Select...");
261
- function T(e) {
262
- var n = e.allowKeyMatching, r = n === void 0 ? true : n, a = e.appearance, i = a === void 0 ? "default" : a, u = e.defaultPlacement, s = u === void 0 ? "vertical" : u, d = e.defaultValue, f = e.inline, p = f === void 0 ? true : f, v = e.noOptionsMessage, b = v === void 0 ? C : v, g = e.onChange, m = e.placeholder, O = m === void 0 ? R : m, y = e.toggleContent, h = y === void 0 ? "optionChildren" : y, S = e.value, w = j(e, [ "allowKeyMatching", "appearance", "defaultPlacement", "defaultValue", "inline", "noOptionsMessage", "onChange", "placeholder", "toggleContent", "value" ]);
261
+ var T = (0, s._)("Select...");
262
+ function R(e) {
263
+ var n = e.allowKeyMatching, r = n === void 0 ? true : n, a = e.appearance, i = a === void 0 ? "default" : a, u = e.defaultPlacement, s = u === void 0 ? "vertical" : u, c = e.defaultValue, f = e.disabled, p = e.inline, b = p === void 0 ? true : p, v = e.noOptionsMessage, g = v === void 0 ? C : v, m = e.onChange, O = e.placeholder, y = O === void 0 ? T : O, h = e.toggleContent, S = h === void 0 ? "optionChildren" : h, w = e.value, R = j(e, [ "allowKeyMatching", "appearance", "defaultPlacement", "defaultValue", "disabled", "inline", "noOptionsMessage", "onChange", "placeholder", "toggleContent", "value" ]);
263
264
  // @docs-props-type SelectPropsBase
264
265
  P({
265
266
  componentName: "Select",
@@ -267,24 +268,24 @@
267
268
  propName: "appearance",
268
269
  propValue: i
269
270
  });
270
- var T = c()({
271
+ var x = d()({
271
272
  componentName: "Select",
272
273
  /* eslint-disable-next-line prefer-rest-params */
273
274
  componentProps: arguments[0]
274
275
  });
275
- var x = (0, o.useMemo)((function() {
276
+ var q = (0, o.useMemo)((function() {
276
277
  // wrap defaultValue in an array once to avoid failing <SelectBase>'s defaultValues comparison check
277
- if (d != null) {
278
- return [ d ];
278
+ if (c != null) {
279
+ return [ c ];
279
280
  }
280
281
  return [];
281
- }), [ d ]);
282
+ }), [ c ]);
282
283
  // Converts the provided props into a structure suitable for SelectBase.
283
- var q = (0, o.useMemo)((function() {
284
- var e = T ? undefined : x;
284
+ var N = (0, o.useMemo)((function() {
285
+ var e = x ? undefined : q;
285
286
  var n = function e(n, o) {
286
287
  var t = o.name, r = o.values;
287
- g === null || g === void 0 ? void 0 : g(n, {
288
+ m === null || m === void 0 ? void 0 : m(n, {
288
289
  name: t,
289
290
  value: r[0]
290
291
  });
@@ -292,31 +293,32 @@
292
293
  var o = {
293
294
  onChange: n
294
295
  };
295
- if (T) {
296
- o.values = S != null ? [ S ] : [];
296
+ if (x) {
297
+ o.values = w != null ? [ w ] : [];
297
298
  } else if (e != null) {
298
299
  o.defaultValues = e;
299
300
  }
300
301
  return o;
301
- }), [ x, g, T, S ]);
302
+ }), [ q, m, x, w ]);
302
303
 
303
304
  return t().createElement(l(), M({
304
305
  allowKeyMatching: r,
305
306
  appearance: i,
306
307
  defaultPlacement: s,
307
- inline: p,
308
- noOptionsMessage: b,
309
- placeholder: O,
310
- toggleContent: h
311
- }, w, q, {
308
+ disabled: f,
309
+ inline: b,
310
+ noOptionsMessage: g,
311
+ placeholder: y,
312
+ toggleContent: S
313
+ }, R, N, {
312
314
  multiple: false
313
315
  }));
314
316
  }
315
- T.propTypes = w;
316
- T.Option = m;
317
- T.Heading = i.Heading;
318
- T.Divider = i.Divider;
319
- /* harmony default export */ const x = T;
317
+ R.propTypes = w;
318
+ R.Option = m;
319
+ R.Heading = i.Heading;
320
+ R.Divider = i.Divider;
321
+ /* harmony default export */ const x = R;
320
322
  // CONCATENATED MODULE: ./src/Select/index.ts
321
323
  module.exports = n;
322
324
  /******/})();