@splunk/react-ui 5.7.0 → 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 +34 -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 +204 -185
  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/SelectBase.js CHANGED
@@ -61,13 +61,13 @@
61
61
  e.r(r);
62
62
  // EXPORTS
63
63
  e.d(r, {
64
- Controls: () => /* reexport */ sr,
64
+ Controls: () => /* reexport */ fr,
65
65
  Divider: () => /* reexport */ w.Divider,
66
66
  Heading: () => /* reexport */ w.Heading,
67
67
  Option: () => /* reexport */ U,
68
68
  SelectAllOption: () => /* reexport */ oe,
69
- default: () => /* reexport */ mr,
70
- isOption: () => /* reexport */ tr
69
+ default: () => /* reexport */ yr,
70
+ isOption: () => /* reexport */ nr
71
71
  });
72
72
  // CONCATENATED MODULE: external "react"
73
73
  const t = require("react");
@@ -108,8 +108,8 @@
108
108
  const x = require("@splunk/react-ui/ScreenReaderContent");
109
109
  var j = e.n(x);
110
110
  // CONCATENATED MODULE: external "@splunk/react-ui/Text"
111
- const P = require("@splunk/react-ui/Text");
112
- var E = e.n(P);
111
+ const E = require("@splunk/react-ui/Text");
112
+ var P = e.n(E);
113
113
  // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
114
114
  const A = require("@splunk/react-ui/useControlled");
115
115
  var L = e.n(A);
@@ -119,9 +119,9 @@
119
119
  // CONCATENATED MODULE: external "@splunk/ui-utils/filter"
120
120
  const M = require("@splunk/ui-utils/filter");
121
121
  // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
122
- const q = require("@splunk/ui-utils/i18n");
122
+ const T = require("@splunk/ui-utils/i18n");
123
123
  // CONCATENATED MODULE: external "@splunk/ui-utils/id"
124
- const T = require("@splunk/ui-utils/id");
124
+ const q = require("@splunk/ui-utils/id");
125
125
  // CONCATENATED MODULE: external "@splunk/ui-utils/scroll"
126
126
  const D = require("@splunk/ui-utils/scroll");
127
127
  // CONCATENATED MODULE: ./src/SelectBase/OptionBase.tsx
@@ -215,7 +215,7 @@
215
215
  children: p().node,
216
216
  description: p().string,
217
217
  descriptionPosition: p().oneOf([ "right", "bottom" ]),
218
- disabled: p().bool,
218
+ disabled: p().oneOfType([ p().bool, p().oneOf([ "dimmed", "disabled" ]) ]),
219
219
  elementRef: p().oneOfType([ p().func, p().object ]),
220
220
  endAdornment: p().node,
221
221
  hidden: p().bool,
@@ -243,17 +243,25 @@
243
243
  */ function X(e) {
244
244
  var r = e.children, l = e.descriptionPosition, a = l === void 0 ? "bottom" : l, o = e.disabled, i = e.elementRef, u = e.endAdornment, c = e.icon, s = e.label, f = e.multiple, d = e.onClick, p = e.role, v = p === void 0 ? "option" : p, b = e.value, m = z(e, [ "children", "descriptionPosition", "disabled", "elementRef", "endAdornment", "icon", "label", "multiple", "onClick", "role", "value" ]);
245
245
  // @docs-props-type OptionPropsBase
246
- var y = (0, t.useCallback)((function(e) {
247
- if (!o) {
246
+ // TODO (SUI-8600): `disabled` prop should default to 'dimmed' for data entry components
247
+ var y;
248
+ if (o === "dimmed") {
249
+ y = "dimmed";
250
+ } else if (o === true || o === "disabled") {
251
+ y = "disabled";
252
+ }
253
+ var g = (0, t.useCallback)((function(e) {
254
+ if (!y) {
248
255
  d === null || d === void 0 ? void 0 : d(e, {
249
256
  value: b
250
257
  });
251
258
  }
252
- }), [ o, d, b ]);
253
- var g = b.toString();
254
- var h = V({
259
+ }), [ y, d, b ]);
260
+ var h = b.toString();
261
+ var S = V({
255
262
  descriptionPosition: a,
256
- disabled: o ? "disabled" : undefined
263
+ disabled: y,
264
+ "data-test-disabled": y
257
265
  }, m);
258
266
 
259
267
  return n().createElement(w.Item, B({
@@ -261,13 +269,13 @@
261
269
  "data-test": "option",
262
270
  elementRef: i,
263
271
  endAdornment: u
264
- }, h, {
272
+ }, S, {
265
273
  selectable: true,
266
274
  selectableAppearance: f ? "checkbox" : "checkmark",
267
275
  startAdornment: c,
268
- onClick: y,
276
+ onClick: g,
269
277
  role: v,
270
- value: g
278
+ value: h
271
279
  }), r || s);
272
280
  }
273
281
  X.propTypes = $;
@@ -540,10 +548,10 @@
540
548
  return e;
541
549
  }
542
550
  var je = xe();
543
- /* harmony default export */ const Pe = /* unused pure expression or super */ null && je;
551
+ /* harmony default export */ const Ee = /* unused pure expression or super */ null && je;
544
552
  // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
545
553
  /* eslint-disable @typescript-eslint/no-empty-function */
546
- var Ee = {
554
+ var Pe = {
547
555
  document: ke,
548
556
  navigator: {
549
557
  userAgent: ""
@@ -599,7 +607,7 @@
599
607
  }
600
608
  };
601
609
  function Ae() {
602
- var e = typeof window !== "undefined" ? window : Ee;
610
+ var e = typeof window !== "undefined" ? window : Pe;
603
611
  return e;
604
612
  }
605
613
  var Le = Ae();
@@ -625,12 +633,12 @@
625
633
  }
626
634
  // CONCATENATED MODULE: ./src/SelectBase/SelectBase.tsx
627
635
  function Me(e) {
628
- return De(e) || Te(e) || Ve(e) || qe();
636
+ return De(e) || qe(e) || Ve(e) || Te();
629
637
  }
630
- function qe() {
638
+ function Te() {
631
639
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
632
640
  }
633
- function Te(e) {
641
+ function qe(e) {
634
642
  if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
635
643
  }
636
644
  function De(e) {
@@ -765,7 +773,10 @@
765
773
  }
766
774
  return ("string" === r ? String : Number)(e);
767
775
  }
768
- var Ye = {
776
+ var Ye = function e(r) {
777
+ return r === true || r === "dimmed" || r === "disabled";
778
+ };
779
+ var Ze = {
769
780
  allowKeyMatching: p().bool,
770
781
  allowNewValues: p().bool,
771
782
  animateLoading: p().bool,
@@ -775,7 +786,7 @@
775
786
  defaultPlacement: p().oneOf([ "above", "below", "vertical" ]),
776
787
  defaultValues: p().array,
777
788
  describedBy: p().string,
778
- disabled: p().bool,
789
+ disabled: p().oneOfType([ p().bool, p().oneOf([ "dimmed", "disabled" ]) ]),
779
790
  elementRef: p().oneOfType([ p().func, p().object ]),
780
791
  error: p().bool,
781
792
  filter: p().oneOf([ false, true, "controlled" ]),
@@ -816,11 +827,11 @@
816
827
  /** @private. */
817
828
  virtualization: p().number
818
829
  };
819
- var Ze = c()((function(e) {
830
+ var er = c()((function(e) {
820
831
  return [ e ];
821
832
  }));
822
833
  // preserve separate widths for single vs. multi mode
823
- var er = c()((function(e) {
834
+ var rr = c()((function(e) {
824
835
  var r = e.anchorWidth, t = e.isMultiple, n = e.maxHeight, l = e.menuStyle;
825
836
  return t ? Ue({
826
837
  width: Math.max(r !== null && r !== void 0 ? r : 0, 200),
@@ -831,23 +842,23 @@
831
842
  maxHeight: n
832
843
  }, l);
833
844
  }));
834
- var rr = [ "clickAway", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
835
- function tr(e) {
845
+ var tr = [ "clickAway", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
846
+ function nr(e) {
836
847
  return e && i()(e.props, "value");
837
848
  }
838
- function nr(e, r) {
849
+ function lr(e, r) {
839
850
  return "".concat($e(e), "-").concat(e, "-").concat(r);
840
851
  }
841
- var lr = [ "append", "error", "prepend" ];
842
- var ar = (0, q._)("No matches");
843
- var or = (0, q._)("Select...");
844
- var ir = 30;
845
- var ur = {};
846
- var cr = n().createElement(y(), null);
847
- var sr = function e(r) {
852
+ var ar = [ "append", "error", "prepend" ];
853
+ var or = (0, T._)("No matches");
854
+ var ir = (0, T._)("Select...");
855
+ var ur = 30;
856
+ var cr = {};
857
+ var sr = n().createElement(y(), null);
858
+ var fr = function e(r) {
848
859
  var t = r.activeItemId, l = r.filterA11yId, a = r.filterKeyword, o = r.hasChildren, i = r.inputId, u = r.inputRef, c = r.menuListboxId, s = r.multiple, f = r.onClearAll, d = r.onSelectAll, p = r.onTextBlur, v = r.onTextChange, b = r.onTextFocus, m = r.onTextKeyDown, y = r.optionSelection, g = r.placement, h = r.selectAllAppearance, S = r.textHasFocus;
849
- var O = (0, q._)("Select all options".concat(y.current === "all" ? " disabled" : ""));
850
- var w = (0, q._)("Clear all options".concat(y.current === "none" ? " disabled" : ""));
860
+ var O = (0, T._)("Select all options".concat(y.current === "all" ? " disabled" : ""));
861
+ var w = (0, T._)("Clear all options".concat(y.current === "none" ? " disabled" : ""));
851
862
  // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
852
863
  var C = n().createElement(Se, {
853
864
  key: "selectAll"
@@ -858,23 +869,23 @@
858
869
  onClick: d,
859
870
  "data-test": "select-all",
860
871
  tag: "button"
861
- }, a ? (0, q._)("Select all Matches") : (0, q._)("Select all")), n().createElement(he, {
872
+ }, a ? (0, T._)("Select all Matches") : (0, T._)("Select all")), n().createElement(he, {
862
873
  disabled: y.current === "none",
863
874
  appearance: "standalone",
864
875
  "aria-label": w,
865
876
  onClick: f,
866
877
  "data-test": "clear-all",
867
878
  tag: "button"
868
- }, a ? (0, q._)("Clear all Matches") : (0, q._)("Clear all")));
879
+ }, a ? (0, T._)("Clear all Matches") : (0, T._)("Clear all")));
869
880
 
870
881
  return n().createElement("div", {
871
882
  key: "controls"
872
883
  }, l && n().createElement(j(), {
873
884
  id: l
874
- }, (0, q._)("Type to filter")), g === "above" && n().createElement(Oe, null), n().createElement(ye, {
885
+ }, (0, T._)("Type to filter")), g === "above" && n().createElement(Oe, null), n().createElement(ye, {
875
886
  key: "filter",
876
887
  "data-test": "filter"
877
- }, n().createElement(E(), {
888
+ }, n().createElement(P(), {
878
889
  value: a,
879
890
  autoCapitalize: "off",
880
891
  autoComplete: "off",
@@ -884,21 +895,21 @@
884
895
  onKeyDown: m,
885
896
  onFocus: b,
886
897
  onBlur: p,
887
- placeholder: (0, q._)("Filter"),
898
+ placeholder: (0, T._)("Filter"),
888
899
  role: "combobox",
889
900
  "aria-expanded": "true",
890
901
  "aria-controls": c,
891
902
  "aria-owns": S && o ? t : undefined,
892
- "aria-label": (0, q._)("Filter"),
903
+ "aria-label": (0, T._)("Filter"),
893
904
  "aria-autocomplete": "list",
894
905
  "aria-activedescendant": S && o ? t : undefined,
895
906
  inputRef: u,
896
907
  inputId: i,
897
908
  canClear: true,
898
- startAdornment: cr
909
+ startAdornment: sr
899
910
  })), s && o && h === "buttongroup" && C, g === "below" && n().createElement(Oe, null));
900
911
  };
901
- var fr = function e(r) {
912
+ var dr = function e(r) {
902
913
  var t = r.prefixLabel, n = r.label, l = r.suffixLabel;
903
914
  var o = n;
904
915
  if (t) {
@@ -909,15 +920,15 @@
909
920
  }
910
921
  return o;
911
922
  };
912
- var dr = [];
913
- var pr = n().forwardRef((function(e, r) {
914
- var l = e.appearance, a = l === void 0 ? "default" : l, o = e.append, i = e.children, u = e.currentValues, c = u === void 0 ? dr : u, s = e.describedBy, d = e.disabled, p = e.elementRef, v = e.error, m = e.inline, y = e.labelText, g = e.labelledBy, h = e.multiple, S = e.onClick, w = e.placeholder, C = e.prefixLabel, k = e.prepend, x = e.required, j = e.suffixLabel, P = e.toggle, E = e.toggleContent, A = e.maxLabelItems, L = A === void 0 ? ir : A, I = ze(e, [ "appearance", "append", "children", "currentValues", "describedBy", "disabled", "elementRef", "error", "inline", "labelText", "labelledBy", "multiple", "onClick", "placeholder", "prefixLabel", "prepend", "required", "suffixLabel", "toggle", "toggleContent", "maxLabelItems" ]);
923
+ var pr = [];
924
+ var vr = n().forwardRef((function(e, r) {
925
+ var l = e.appearance, a = l === void 0 ? "default" : l, o = e.append, i = e.children, u = e.currentValues, c = u === void 0 ? pr : u, s = e.describedBy, d = e.disabled, p = e.elementRef, v = e.error, m = e.inline, y = e.labelText, g = e.labelledBy, h = e.multiple, S = e.onClick, w = e.placeholder, C = e.prefixLabel, k = e.prepend, x = e.required, j = e.suffixLabel, E = e.toggle, P = e.toggleContent, A = e.maxLabelItems, L = A === void 0 ? ur : A, I = ze(e, [ "appearance", "append", "children", "currentValues", "describedBy", "disabled", "elementRef", "error", "inline", "labelText", "labelledBy", "multiple", "onClick", "placeholder", "prefixLabel", "prepend", "required", "suffixLabel", "toggle", "toggleContent", "maxLabelItems" ]);
915
926
  var R = (0, t.useMemo)((function() {
916
927
  var e = t.Children.toArray(i);
917
928
  var r = new Map;
918
929
  for (var n = 0; n < e.length; n += 1) {
919
930
  var l = e[n];
920
- if (tr(l)) {
931
+ if (nr(l)) {
921
932
  r.set(l.props.value, l);
922
933
  }
923
934
  }
@@ -935,7 +946,7 @@
935
946
  var l = R.get(n);
936
947
  if (l) {
937
948
  var a = l.props, o = a.children, i = a.icon, u = a.label;
938
- var s = E !== "optionLabel" && o ? o : u;
949
+ var s = P !== "optionLabel" && o ? o : u;
939
950
  e.label.push(s);
940
951
  e.ariaLabel.push(u);
941
952
  // if not in multiple mode, add the icon
@@ -948,24 +959,24 @@
948
959
  e.ariaLabel.push(n.toString());
949
960
  }
950
961
  if (t < r - 1) {
951
- e.label.push((0, q._)(", "));
952
- e.ariaLabel.push((0, q._)(", "));
962
+ e.label.push((0, T._)(", "));
963
+ e.ariaLabel.push((0, T._)(", "));
953
964
  }
954
965
  }
955
966
  if (h && c.length > r && e.label.length) {
956
967
  // add visual ellipsis to ensure truncation is shown
957
- e.label.push((0, q._)("..."));
968
+ e.label.push((0, T._)("..."));
958
969
  }
959
970
  // only apply prefix / suffix if the label is not empty
960
971
  if (e.label.length > 0) {
961
972
  // If there's more than one item selected, read out the selected total
962
973
  // rather than reading out each selected item
963
- e.ariaLabel = fr({
974
+ e.ariaLabel = dr({
964
975
  prefixLabel: C,
965
976
  label: e.label.length > 1 ? [ "".concat(c.length, " items selected") ] : e.ariaLabel,
966
977
  suffixLabel: j
967
978
  });
968
- e.label = fr({
979
+ e.label = dr({
969
980
  prefixLabel: C,
970
981
  label: e.label,
971
982
  suffixLabel: j
@@ -976,14 +987,22 @@
976
987
  if (!e.label.length || !h && e.label.every((function(e) {
977
988
  return e === "";
978
989
  }))) {
979
- e.label = Ze(w);
990
+ e.label = er(w);
980
991
  e.ariaLabel = e.label;
981
992
  }
982
993
  return e;
983
- }), [ c, L, h, R, w, C, j, E ]), T = M.label, D = M.ariaLabel, _ = M.icon;
994
+ }), [ c, L, h, R, w, C, j, P ]), q = M.label, D = M.ariaLabel, _ = M.icon;
984
995
  var B = "aria-labelledby" in I;
985
- var N = Ue({
996
+ // TODO (SUI-8600): `disabled` prop should default to 'dimmed' for data entry components
997
+ var N;
998
+ if (d === "dimmed") {
999
+ N = "dimmed";
1000
+ } else if (d === true || d === "disabled") {
1001
+ N = "disabled";
1002
+ }
1003
+ var V = Ue({
986
1004
  "aria-describedby": s,
1005
+ "aria-disabled": d === "dimmed" || undefined,
987
1006
  "aria-label": g || B ? undefined : "".concat(y ? "".concat(y, ", ") : "").concat(D.join("")),
988
1007
  // aria-labelledby takes precedence over aria-label, so existence of both is redundant
989
1008
  "aria-labelledby": g,
@@ -993,55 +1012,56 @@
993
1012
  prepend: k,
994
1013
  onClick: S,
995
1014
  role: "combobox",
996
- disabled: d ? "disabled" : undefined,
1015
+ disabled: a === "link" ? d === true || d === "disabled" : N,
997
1016
  elementRef: p,
998
1017
  error: v,
999
1018
  ref: r
1000
1019
  }, I);
1001
1020
  if (h) {
1002
- N["data-test-values"] = JSON.stringify(c);
1021
+ V["data-test-values"] = JSON.stringify(c);
1003
1022
  } else {
1004
- var V = Be(c, 1), F = V[0];
1005
- N["data-test-value"] = F;
1023
+ var F = Be(c, 1), K = F[0];
1024
+ V["data-test-value"] = K;
1006
1025
  }
1007
- if (P) {
1026
+ V["data-test-disabled"] = N;
1027
+ if (E) {
1008
1028
 
1009
- return (0, t.cloneElement)(P, N);
1029
+ return (0, t.cloneElement)(E, V);
1010
1030
  }
1011
1031
  if (a === "link") {
1012
1032
 
1013
1033
  return n().createElement(O(), _e({
1014
1034
  tag: "button",
1015
1035
  appearance: "standalone"
1016
- }, N, {
1036
+ }, V, {
1017
1037
  "data-select-appearance": "link"
1018
- }), !!_ && n().createElement(be, null, _), T || w, n().createElement(me, null, n().createElement(b(), null)));
1038
+ }), !!_ && n().createElement(be, null, _), q || w, n().createElement(me, null, n().createElement(b(), null)));
1019
1039
  }
1020
1040
  // Using Button's secondary appearance as Select's default appearance.
1021
- var K = a === "default" ? "secondary" : a;
1041
+ var H = a === "default" ? "secondary" : a;
1022
1042
 
1023
- return n().createElement(ve, _e({}, N, {
1043
+ return n().createElement(ve, _e({}, V, {
1024
1044
  $multiple: h,
1025
- appearance: K,
1026
- label: T,
1045
+ appearance: H,
1046
+ label: q,
1027
1047
  error: v,
1028
1048
  icon: _,
1029
1049
  inline: m,
1030
1050
  isMenu: true,
1031
1051
  onClick: S
1032
- }, f()(I, lr)), !!c.length && h && n().createElement(ge, {
1052
+ }, f()(I, ar)), !!c.length && h && n().createElement(ge, {
1033
1053
  "data-role": "count"
1034
1054
  }, "(", c.length, ")"));
1035
1055
  }));
1036
- function vr(e) {
1056
+ function br(e) {
1037
1057
  var r = e.currentValues, t = e.multiple;
1038
1058
  if (t || !(r === null || r === void 0 ? void 0 : r.length)) {
1039
1059
  return r !== null && r !== void 0 ? r : [];
1040
1060
  }
1041
1061
  return [ r[0] ];
1042
1062
  }
1043
- function br(e) {
1044
- var r = e.allowKeyMatching, l = r === void 0 ? true : r, a = e.animateLoading, o = e.appearance, i = o === void 0 ? "default" : o, u = e.append, c = e.allowNewValues, s = e.children, f = e.defaultPlacement, d = f === void 0 ? "vertical" : f, p = e.defaultValues, v = e.describedBy, b = e.disabled, m = e.elementRef, y = e.error, g = e.filter, S = e.footerMessage, O = e.inline, x = e.inputId, j = e.inputRef, P = e.isLoadingOptions, E = e.labelledBy, A = e.labelText, I = e.loadingMessage, _ = e.menuStyle, B = _ === void 0 ? ur : _, N = e.multiple, V = e.name, F = e.noOptionsMessage, K = F === void 0 ? ar : F, H = e.onChange, z = e.onScroll, W = e.onScrollBottom, $ = e.onFilterChange, X = e.onClick, J = e.onClose, G = e.onOpen, Q = e.required, Y = e.placeholder, Z = Y === void 0 ? or : Y, ee = e.prefixLabel, re = e.prepend, te = e.repositionMode, ne = te === void 0 ? "flip" : te, le = e.selectAllAppearance, ae = le === void 0 ? "buttongroup" : le, ie = e.showSelectedValuesFirst, ue = e.suffixLabel, ce = e.tabConfirmsNewValue, se = e.values, fe = e.virtualization, de = e.toggle, pe = e.toggleContent, ve = pe === void 0 ? "optionChildren" : pe, be = e.maxLabelItems, me = be === void 0 ? ir : be, ye = ze(e, [ "allowKeyMatching", "animateLoading", "appearance", "append", "allowNewValues", "children", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "labelText", "loadingMessage", "menuStyle", "multiple", "name", "noOptionsMessage", "onChange", "onScroll", "onScrollBottom", "onFilterChange", "onClick", "onClose", "onOpen", "required", "placeholder", "prefixLabel", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "suffixLabel", "tabConfirmsNewValue", "values", "virtualization", "toggle", "toggleContent", "maxLabelItems" ]);
1063
+ function mr(e) {
1064
+ var r = e.allowKeyMatching, l = r === void 0 ? true : r, a = e.animateLoading, o = e.appearance, i = o === void 0 ? "default" : o, u = e.append, c = e.allowNewValues, s = e.children, f = e.defaultPlacement, d = f === void 0 ? "vertical" : f, p = e.defaultValues, v = e.describedBy, b = e.disabled, m = e.elementRef, y = e.error, g = e.filter, S = e.footerMessage, O = e.inline, x = e.inputId, j = e.inputRef, E = e.isLoadingOptions, P = e.labelledBy, A = e.labelText, I = e.loadingMessage, _ = e.menuStyle, B = _ === void 0 ? cr : _, N = e.multiple, V = e.name, F = e.noOptionsMessage, K = F === void 0 ? or : F, H = e.onChange, z = e.onScroll, W = e.onScrollBottom, $ = e.onFilterChange, X = e.onClick, J = e.onClose, G = e.onOpen, Q = e.required, Y = e.placeholder, Z = Y === void 0 ? ir : Y, ee = e.prefixLabel, re = e.prepend, te = e.repositionMode, ne = te === void 0 ? "flip" : te, le = e.selectAllAppearance, ae = le === void 0 ? "buttongroup" : le, ie = e.showSelectedValuesFirst, ue = e.suffixLabel, ce = e.tabConfirmsNewValue, se = e.values, fe = e.virtualization, de = e.toggle, pe = e.toggleContent, ve = pe === void 0 ? "optionChildren" : pe, be = e.maxLabelItems, me = be === void 0 ? ur : be, ye = ze(e, [ "allowKeyMatching", "animateLoading", "appearance", "append", "allowNewValues", "children", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "labelText", "loadingMessage", "menuStyle", "multiple", "name", "noOptionsMessage", "onChange", "onScroll", "onScrollBottom", "onFilterChange", "onClick", "onClose", "onOpen", "required", "placeholder", "prefixLabel", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "suffixLabel", "tabConfirmsNewValue", "values", "virtualization", "toggle", "toggleContent", "maxLabelItems" ]);
1045
1065
  // @docs-props-type SelectBasePropsBase
1046
1066
  var ge = L()({
1047
1067
  componentName: "SelectBase",
@@ -1054,92 +1074,96 @@
1054
1074
  // states
1055
1075
  var he = (0, t.useState)((function() {
1056
1076
  return {
1057
- activeItemId: (0, T.createDOMID)("active-item"),
1058
- menuListboxId: (0, T.createDOMID)("menu-listbox")
1077
+ activeItemId: (0, q.createDOMID)("active-item"),
1078
+ menuListboxId: (0, q.createDOMID)("menu-listbox")
1059
1079
  };
1060
1080
  })), Se = Be(he, 1), Oe = Se[0], we = Oe.activeItemId, ke = Oe.menuListboxId;
1061
- var xe = (0, t.useState)(0), je = Be(xe, 2), Pe = je[0], Ee = je[1];
1062
- var Le = (0, t.useState)(""), Ie = Be(Le, 2), qe = Ie[0], Te = Ie[1];
1081
+ var xe = (0, t.useState)(0), je = Be(xe, 2), Ee = je[0], Pe = je[1];
1082
+ var Le = (0, t.useState)(""), Ie = Be(Le, 2), Te = Ie[0], qe = Ie[1];
1063
1083
  var De = (0, t.useState)(false), Ne = Be(De, 2), Ve = Ne[0], Fe = Ne[1];
1064
1084
  var Ke = (0, t.useState)(false), He = Be(Ke, 2), We = He[0], $e = He[1];
1065
1085
  var Xe = (0, t.useState)([]), Ue = Be(Xe, 2), Je = Ue[0], Ge = Ue[1];
1066
- var Qe = (0, t.useState)(p || []), Ye = Be(Qe, 2), Ze = Ye[0], lr = Ye[1];
1086
+ var Qe = (0, t.useState)(p || []), Ze = Be(Qe, 2), er = Ze[0], ar = Ze[1];
1067
1087
  // previous state
1068
- var cr = R()(Pe);
1088
+ var sr = R()(Ee);
1069
1089
  // refs
1070
- var fr = (0, t.useRef)(null);
1071
- var dr = (0, t.useRef)(null);
1072
- var br = (0, t.useRef)(null);
1073
- var mr = (0, t.useRef)([]);
1090
+ var dr = (0, t.useRef)(null);
1091
+ var pr = (0, t.useRef)(null);
1092
+ var mr = (0, t.useRef)(null);
1074
1093
  var yr = (0, t.useRef)([]);
1075
- var gr = (0, t.useRef)(cr);
1076
- var hr = (0, t.useRef)();
1077
- var Sr = (0, t.useRef)({});
1078
- var Or = (0, t.useRef)(0);
1079
- var wr = (0, t.useRef)([]);
1080
- var Cr = (0, t.useRef)(null);
1081
- var kr = (0, t.useRef)();
1082
- var xr = (0, t.useRef)(0);
1083
- var jr = (0, t.useRef)("none");
1084
- var Pr = (0, t.useState)(g ? (0, T.createDOMID)("filter") : undefined), Er = Be(Pr, 1), Ar = Er[0];
1094
+ var gr = (0, t.useRef)([]);
1095
+ var hr = (0, t.useRef)(sr);
1096
+ var Sr = (0, t.useRef)();
1097
+ var Or = (0, t.useRef)({});
1098
+ var wr = (0, t.useRef)(0);
1099
+ var Cr = (0, t.useRef)([]);
1100
+ var kr = (0, t.useRef)(null);
1101
+ var xr = (0, t.useRef)();
1102
+ var jr = (0, t.useRef)(0);
1103
+ var Er = (0, t.useRef)("none");
1104
+ var Pr = (0, t.useState)(g ? (0, q.createDOMID)("filter") : undefined), Ar = Be(Pr, 1), Lr = Ar[0];
1105
+ var Ir = b === true || b === "dimmed" || b === "disabled";
1085
1106
  (0, t.useEffect)((function() {
1086
1107
  if (false) {}
1087
1108
  }), [ i, u, y, re ]);
1088
- var Lr = (0, t.useMemo)((function() {
1109
+ var Rr = (0, t.useMemo)((function() {
1089
1110
  var e = n().Children.toArray(s);
1090
1111
  var r = new Map;
1091
1112
  for (var t = 0; t < e.length; t += 1) {
1092
1113
  var l = e[t];
1093
- if (tr(l)) {
1114
+ if (nr(l)) {
1094
1115
  r.set(l.props.value, l);
1095
1116
  }
1096
1117
  }
1097
1118
  return [ e, r ];
1098
- }), [ s ]), Ir = Be(Lr, 2), Rr = Ir[0], Mr = Ir[1];
1099
- var qr = vr({
1100
- currentValues: ge ? se : Ze,
1119
+ }), [ s ]), Mr = Be(Rr, 2), Tr = Mr[0], qr = Mr[1];
1120
+ var Dr = br({
1121
+ currentValues: ge ? se : er,
1101
1122
  multiple: N
1102
1123
  });
1103
1124
  // mutable object reference to currentValues to permit idempotent callbacks
1104
- var Tr = (0, t.useRef)(null);
1105
- Tr.current = qr;
1106
- var Dr = (0, t.useCallback)((function() {
1125
+ var _r = (0, t.useRef)(null);
1126
+ _r.current = Dr;
1127
+ var Br = (0, t.useCallback)((function() {
1107
1128
  // in non-multiple mode, don't move values to the top of the list
1108
- return N && ie !== "never" ? Tr.current : [];
1129
+ return N && ie !== "never" ? _r.current : [];
1109
1130
  }), [ N, ie ]);
1110
- var _r = (0, t.useCallback)((function(e) {
1111
- var r = qe;
1131
+ var Nr = (0, t.useCallback)((function(e) {
1132
+ if (Ir) {
1133
+ return;
1134
+ }
1135
+ var r = Te;
1112
1136
  Fe(true);
1113
- Ge(Dr());
1137
+ Ge(Br());
1114
1138
  // SUI-3234: preserve existing behavior difference between <Select> and <Multiselect.Compact>
1115
1139
  if (N) {
1116
- Te("");
1140
+ qe("");
1117
1141
  }
1118
- if (r !== qe) {
1142
+ if (r !== Te) {
1119
1143
  $ === null || $ === void 0 ? void 0 : $(e, {
1120
- keyword: qe
1144
+ keyword: Te
1121
1145
  });
1122
1146
  }
1123
- }), [ qe, Dr, N, $ ]);
1147
+ }), [ Ir, Te, Br, N, $ ]);
1124
1148
  (0, t.useEffect)((function() {
1125
1149
  if (Ve) {
1126
1150
  G === null || G === void 0 ? void 0 : G();
1127
- if (Cr.current && !g) {
1128
- Cr.current.focus();
1151
+ if (kr.current && !g) {
1152
+ kr.current.focus();
1129
1153
  } else {
1130
1154
  var e;
1131
- Ee((e = kr.current) !== null && e !== void 0 ? e : 0);
1155
+ Pe((e = xr.current) !== null && e !== void 0 ? e : 0);
1132
1156
  }
1133
1157
  }
1134
- }), [ G, Ve, Je, qe, g ]);
1135
- var Br = (0, t.useCallback)((function() {
1158
+ }), [ G, Ve, Je, Te, g ]);
1159
+ var Vr = (0, t.useCallback)((function() {
1136
1160
  Fe(false);
1137
- Ee(0);
1138
- gr.current = null;
1161
+ Pe(0);
1162
+ hr.current = null;
1139
1163
  J === null || J === void 0 ? void 0 : J();
1140
1164
  }), [ J ]);
1141
- var Nr = (0, t.useCallback)((function(e, r) {
1142
- var t = new Set(Tr.current);
1165
+ var Fr = (0, t.useCallback)((function(e, r) {
1166
+ var t = new Set(_r.current);
1143
1167
  var n;
1144
1168
  if (N) {
1145
1169
  if (t.has(r)) {
@@ -1154,7 +1178,7 @@
1154
1178
  }
1155
1179
  var l = !ge;
1156
1180
  if (l) {
1157
- lr(n);
1181
+ ar(n);
1158
1182
  }
1159
1183
  if (N) {
1160
1184
  // in uncontrolled multiple mode, keep the menu open
@@ -1165,143 +1189,160 @@
1165
1189
  var a;
1166
1190
  // non-multiple mode only supports a single selection
1167
1191
  // so close the menu once a selection is made
1168
- Br({
1192
+ Vr({
1169
1193
  reason: "contentClick"
1170
1194
  });
1171
- (a = fr.current) === null || a === void 0 ? void 0 : a.focus();
1195
+ (a = dr.current) === null || a === void 0 ? void 0 : a.focus();
1172
1196
  }
1173
1197
  H === null || H === void 0 ? void 0 : H(e, {
1174
1198
  values: n,
1175
1199
  name: V,
1176
1200
  reason: "valueToggle"
1177
1201
  });
1178
- }), [ Br, ge, N, V, H ]);
1179
- var Vr = function e() {
1180
- dr.current = null;
1181
- mr.current = [];
1182
- if (br.current) {
1183
- clearTimeout(br.current);
1202
+ }), [ Vr, ge, N, V, H ]);
1203
+ var Kr = function e() {
1204
+ pr.current = null;
1205
+ yr.current = [];
1206
+ if (mr.current) {
1207
+ clearTimeout(mr.current);
1184
1208
  }
1185
1209
  };
1186
- var Fr = (0, t.useCallback)((function(e) {
1210
+ var Hr = (0, t.useCallback)((function(e) {
1187
1211
  // this doesn't make sense if we can't select multiple values
1188
1212
  if (!N) {
1189
1213
  return;
1190
1214
  }
1191
- var r = Tr.current;
1215
+ var r = _r.current;
1192
1216
  var t = new Set(r);
1193
- var n = new Set([].concat(Me(r), Me(wr.current)));
1217
+ var n = new Set([].concat(Me(r), Me(Cr.current)));
1194
1218
  // to keep track of custom values we create a copy of selected values and remove
1195
1219
  // items as they are accounted for in children, leaving only custom values
1196
1220
  var l = new Set(n);
1197
1221
  var a = new Set;
1198
- Rr.forEach((function(e) {
1199
- if (tr(e)) {
1222
+ Tr.forEach((function(e) {
1223
+ if (nr(e)) {
1200
1224
  // this value is being represented in children so it is not custom
1201
1225
  l["delete"](e.props.value);
1202
- }
1203
- if (tr(e) && n.has(e.props.value) && (!e.props.disabled || t.has(e.props.value))) {
1204
- a.add(e.props.value);
1226
+ var r = Ye(e.props.disabled);
1227
+ if (n.has(e.props.value) && (!r || t.has(e.props.value))) {
1228
+ a.add(e.props.value);
1229
+ }
1205
1230
  }
1206
1231
  }));
1207
1232
  var o = [].concat(Me(Array.from(l)), Me(Array.from(a)));
1208
1233
  if (!ge) {
1209
- lr(o);
1234
+ ar(o);
1210
1235
  }
1211
1236
  H === null || H === void 0 ? void 0 : H(e, {
1212
1237
  values: o,
1213
1238
  name: V,
1214
1239
  reason: "selectAll"
1215
1240
  });
1216
- }), [ Rr, ge, N, V, H ]);
1217
- var Kr = (0, t.useCallback)((function(e) {
1241
+ }), [ Tr, ge, N, V, H ]);
1242
+ var zr = (0, t.useCallback)((function(e) {
1218
1243
  // this doesn't make sense if we can't select multiple values
1219
1244
  if (!N) {
1220
1245
  return;
1221
1246
  }
1222
- var r = new Set(Tr.current);
1223
- var t = new Set(Tr.current);
1224
- for (var n = 0; n < wr.current.length; n += 1) {
1225
- t["delete"](wr.current[n]);
1247
+ var r = new Set(_r.current);
1248
+ // Preserve hidden values only when "Clear matches" semantics apply
1249
+ var t = Te !== "";
1250
+ var n = new Set;
1251
+ if (t) {
1252
+ n = new Set(_r.current);
1253
+ Cr.current.forEach((function(e) {
1254
+ n["delete"](e);
1255
+ }));
1226
1256
  }
1227
1257
  var l = new Set;
1228
- for (var a = 0; a < Rr.length; a += 1) {
1229
- var o = Rr[a];
1258
+ for (var a = 0; a < Tr.length; a += 1) {
1259
+ var o = Tr[a];
1230
1260
  // this will unselect all selected values unless those values are disabled or hidden by the filter
1231
- if (tr(o) && (r.has(o.props.value) && o.props.disabled || t.has(o.props.value))) {
1232
- l.add(o.props.value);
1261
+ if (nr(o)) {
1262
+ var i = Ye(o.props.disabled);
1263
+ if (r.has(o.props.value) && i || n.has(o.props.value)) {
1264
+ l.add(o.props.value);
1265
+ }
1233
1266
  }
1234
1267
  }
1235
- var i = Array.from(l);
1268
+ var u = Array.from(l);
1236
1269
  if (!ge) {
1237
- lr(i);
1270
+ ar(u);
1238
1271
  }
1239
1272
  H === null || H === void 0 ? void 0 : H(e, {
1240
- values: i,
1273
+ values: u,
1241
1274
  name: V,
1242
1275
  reason: "clearAll"
1243
1276
  });
1244
- }), [ Rr, ge, N, V, H ]);
1245
- var Hr = (0, t.useCallback)((function(e) {
1246
- if (Ve && !P) {
1277
+ }), [ Tr, Te, ge, N, V, H ]);
1278
+ var Wr = (0, t.useCallback)((function(e) {
1279
+ if (Ve && !E) {
1247
1280
  W === null || W === void 0 ? void 0 : W(e);
1248
1281
  }
1249
- }), [ Ve, P, W ]);
1250
- var zr = (0, t.useCallback)((function(e) {
1251
- var r = e.key;
1252
- if (r === "Tab") {
1253
- if (ce && hr.current && Or.current <= 1) {
1254
- e.preventDefault();
1255
- Nr(e, hr.current);
1282
+ }), [ Ve, E, W ]);
1283
+ var $r = (0, t.useCallback)((function(e) {
1284
+ var r = wr.current;
1285
+ var n = e.key;
1286
+ var l = Sr.current !== null && Sr.current !== undefined ? qr.get(Sr.current) : undefined;
1287
+ var a = Ye(l === null || l === void 0 ? void 0 : l.props.disabled);
1288
+ if (n === "Tab") {
1289
+ if (ce && Sr.current && wr.current <= 1) {
1290
+ if (!a) {
1291
+ e.preventDefault();
1292
+ Fr(e, Sr.current);
1293
+ }
1256
1294
  }
1257
1295
  }
1258
1296
  if (e.shiftKey || e.metaKey || e.ctrlKey) {
1259
- if (r === "a" && (e.ctrlKey || e.metaKey)) {
1297
+ if (n === "a" && (e.ctrlKey || e.metaKey)) {
1260
1298
  // handle control + A
1261
- if (jr.current === "all") {
1262
- Kr(e);
1299
+ if (Er.current === "all") {
1300
+ zr(e);
1263
1301
  } else {
1264
- Fr(e);
1302
+ Hr(e);
1265
1303
  }
1266
1304
  }
1267
1305
  return;
1268
1306
  }
1269
- if (r === "ArrowDown") {
1307
+ if (n === "ArrowDown") {
1270
1308
  e.preventDefault();
1271
- Ee(Math.min(Pe + 1, ae === "checkbox" ? Or.current : Or.current - 1));
1309
+ var o = ae === "checkbox" ? r : r - 1;
1310
+ if (o >= 0) {
1311
+ Pe(Math.min(Ee + 1, o));
1312
+ }
1272
1313
  if (s && W) {
1273
- var n = t.Children.toArray(s).length - (2 + Tr.current.length);
1274
- if (Pe === n) {
1275
- Hr(e);
1314
+ var i = t.Children.toArray(s).length - (2 + _r.current.length);
1315
+ if (Ee === i) {
1316
+ Wr(e);
1276
1317
  }
1277
1318
  }
1278
1319
  }
1279
- if (r === "ArrowUp") {
1320
+ if (n === "ArrowUp") {
1280
1321
  e.preventDefault();
1281
- Ee(Math.max(Pe - 1, 0));
1322
+ Pe(Math.max(Ee - 1, 0));
1282
1323
  }
1283
- if (r === "Enter" && hr.current && Ve) {
1284
- if (hr.current === "selectAll") {
1285
- if (jr.current === "all") {
1286
- Kr(e);
1324
+ if (n === "Enter" && Sr.current && Ve) {
1325
+ if (Sr.current === "selectAll") {
1326
+ if (Er.current === "all") {
1327
+ zr(e);
1287
1328
  } else {
1288
- Fr(e);
1329
+ Hr(e);
1289
1330
  }
1290
- } else {
1331
+ } else if (!a) {
1291
1332
  e.preventDefault();
1292
- Nr(e, hr.current);
1333
+ Fr(e, Sr.current);
1293
1334
  }
1294
1335
  }
1295
- }), [ Pe, s, Kr, Hr, Fr, W, Ve, ae, ce, Nr ]);
1296
- var Wr = (0, t.useCallback)((function(e, r) {
1336
+ }), [ Ee, s, zr, Wr, Hr, qr, W, Ve, ae, ce, Fr ]);
1337
+ var Xr = (0, t.useCallback)((function(e, r) {
1297
1338
  var t = r.value;
1298
1339
  e.preventDefault();
1299
1340
  if (!Ve) {
1300
1341
  return;
1301
1342
  }
1302
- Nr(e, t);
1303
- }), [ Ve, Nr ]);
1304
- var $r = (0, t.useCallback)((function(e, r) {
1343
+ Fr(e, t);
1344
+ }), [ Ve, Fr ]);
1345
+ var Ur = (0, t.useCallback)((function(e, r) {
1305
1346
  var t = e.nativeEvent.key;
1306
1347
  // Checking for a single character to avoid complications from double-byte languages and emojis.
1307
1348
  if (t.length === 1) {
@@ -1310,89 +1351,90 @@
1310
1351
  index: 0,
1311
1352
  value: t
1312
1353
  };
1313
- if (!dr.current) {
1354
+ if (!pr.current) {
1314
1355
  if (t === " ") {
1315
- Vr();
1356
+ Kr();
1316
1357
  return;
1317
1358
  }
1359
+ n = Ce(gr.current, l);
1360
+ } else if (yr.current.length > 1) {
1361
+ l.index = pr.current.index + 1;
1318
1362
  n = Ce(yr.current, l);
1319
- } else if (mr.current.length > 1) {
1320
- l.index = dr.current.index + 1;
1321
- n = Ce(mr.current, l);
1322
1363
  }
1323
1364
  if (n.length) {
1324
1365
  var a;
1325
1366
  var o = 0;
1326
1367
  // If the active option is a first character match, cycle to the next matching option.
1327
1368
  if (l.index === 0 && n.length > 1) {
1328
- var i = n.indexOf(yr.current[r]);
1369
+ var i = n.indexOf(gr.current[r]);
1329
1370
  if (i >= 0) {
1330
1371
  o = i === n.length - 1 ? 0 : i + 1;
1331
1372
  }
1332
1373
  }
1333
1374
  var u = n[o];
1334
1375
  var c = u.value, s = u.label;
1335
- var f = Sr.current[nr(c, s)];
1376
+ var f = Or.current[lr(c, s)];
1336
1377
  f === null || f === void 0 ? void 0 : (a = f.focus) === null || a === void 0 ? void 0 : a.call(f);
1337
1378
  }
1338
- mr.current = n;
1339
- dr.current = l;
1340
- if (br.current) {
1341
- clearTimeout(br.current);
1379
+ yr.current = n;
1380
+ pr.current = l;
1381
+ if (mr.current) {
1382
+ clearTimeout(mr.current);
1342
1383
  }
1343
- br.current = setTimeout(Vr, 500);
1384
+ mr.current = setTimeout(Kr, 500);
1344
1385
  e.preventDefault();
1345
1386
  e.stopPropagation();
1346
1387
  }
1347
1388
  }), []);
1348
- var Xr = (0, t.useCallback)((function(e, r) {
1389
+ var Jr = (0, t.useCallback)((function(e, r) {
1349
1390
  var t = r.value;
1350
- Te(t);
1391
+ qe(t);
1351
1392
  Fe(true);
1352
- Ee(0);
1393
+ Pe(0);
1353
1394
  $ === null || $ === void 0 ? void 0 : $(e, {
1354
1395
  keyword: t
1355
1396
  });
1356
1397
  }), [ $ ]);
1357
- var Ur = (0, t.useCallback)((function() {
1398
+ var Gr = (0, t.useCallback)((function() {
1358
1399
  $e(true);
1359
1400
  }), []);
1360
- var Jr = (0, t.useCallback)((function() {
1401
+ var Qr = (0, t.useCallback)((function() {
1361
1402
  $e(false);
1362
1403
  }), []);
1363
- var Gr = (0, t.useCallback)((function(e) {
1364
- if (gr.current !== Pe) {
1404
+ var Yr = (0, t.useCallback)((function(e) {
1405
+ if (hr.current !== Ee) {
1365
1406
  (0, D.scrollIntoViewIfNeeded)(e);
1366
1407
  }
1367
- }), [ Pe ]);
1368
- var Qr = (0, t.useCallback)((function(e, r, t) {
1408
+ }), [ Ee ]);
1409
+ var Zr = (0, t.useCallback)((function(e, r, t) {
1369
1410
  if (t) {
1370
- Cr.current = e;
1411
+ kr.current = e;
1371
1412
  }
1372
1413
  if (e == null) {
1373
- delete Sr.current[r];
1414
+ delete Or.current[r];
1374
1415
  } else {
1375
- Sr.current[r] = e;
1416
+ Or.current[r] = e;
1376
1417
  }
1377
- }), [ Sr ]);
1378
- var Yr = (0, t.useCallback)((function(e) {
1379
- fr.current = e;
1418
+ }), [ Or ]);
1419
+ var et = (0, t.useCallback)((function(e) {
1420
+ dr.current = e;
1380
1421
  Re(m, e);
1381
- }), [ m, fr ]);
1382
- var Zr = qr.some((function(e) {
1383
- var r = Mr.get(e);
1384
- return r && !r.props.disabled;
1422
+ }), [ m, dr ]);
1423
+ var rt = Dr.some((function(e) {
1424
+ var r = qr.get(e);
1425
+ var t = Ye(r === null || r === void 0 ? void 0 : r.props.disabled);
1426
+ return r && !t;
1385
1427
  }));
1386
- var et = ie === "immediately" ? Dr() : Je;
1387
- var rt = (0, t.useMemo)((function() {
1388
- Or.current = 0;
1389
- kr.current = undefined;
1390
- xr.current = 0;
1391
- hr.current = undefined;
1392
- yr.current = [];
1428
+ var tt = ie === "immediately" ? Br() : Je;
1429
+ var nt = (0, t.useMemo)((function() {
1430
+ wr.current = 0;
1431
+ xr.current = undefined;
1432
+ jr.current = 0;
1433
+ Sr.current = undefined;
1434
+ gr.current = [];
1393
1435
  var e = function e(r, t) {
1394
1436
  return function(e) {
1395
- return Qr(e, r, t);
1437
+ return Zr(e, r, t);
1396
1438
  };
1397
1439
  };
1398
1440
  var r;
@@ -1400,38 +1442,38 @@
1400
1442
  var o = false;
1401
1443
  // used to avoid overwriting the selected item ref in multiple mode
1402
1444
  var i;
1403
- var u = new Set(qr);
1404
- var s = new Set(et !== null && et !== void 0 ? et : []);
1405
- var f = Rr.reduce((function(c, f, d) {
1445
+ var u = new Set(Dr);
1446
+ var s = new Set(tt !== null && tt !== void 0 ? tt : []);
1447
+ var f = Tr.reduce((function(c, f, d) {
1406
1448
  // ignore Headings and Dividers
1407
- if (!tr(f)) {
1449
+ if (!nr(f)) {
1408
1450
  c.push(f);
1409
1451
  return c;
1410
1452
  }
1411
1453
  var p = f.props, v = p.disabled, b = p.hidden, m = p.label, y = p.value;
1412
1454
  // Find out if the search string exactly matches a value
1413
- if (y === qe) {
1455
+ if (y === Te) {
1414
1456
  r = true;
1415
1457
  }
1416
1458
  var h = u.has(y);
1417
- var S = !!h && !v && !i;
1418
- var O = l && !N && !g && !P && !W;
1419
- var C = nr(y, m);
1459
+ var S = !!h && v !== true && v !== "disabled" && !i;
1460
+ var O = l && !N && !g && !E && !W;
1461
+ var C = lr(y, m);
1420
1462
  var k = -1;
1421
- if (O && !v && !b) {
1422
- yr.current.push({
1463
+ if (O && v !== true && v !== "disabled" && !b) {
1464
+ gr.current.push({
1423
1465
  label: m,
1424
1466
  value: y
1425
1467
  });
1426
- k = yr.current.length - 1;
1468
+ k = gr.current.length - 1;
1427
1469
  }
1428
1470
  // Format the Menu.Item
1429
1471
  var x = (0, t.cloneElement)(f, {
1430
1472
  elementRef: e(C, S),
1431
1473
  key: f.key || d,
1432
- onClick: Wr,
1474
+ onClick: Xr,
1433
1475
  onKeyDown: O ? function(e) {
1434
- return $r(e, k);
1476
+ return Ur(e, k);
1435
1477
  } : undefined,
1436
1478
  selected: h,
1437
1479
  multiple: N,
@@ -1456,15 +1498,15 @@
1456
1498
  }), []);
1457
1499
  // In multiple mode, add missing items
1458
1500
  if (N) {
1459
- for (var d = qr.length - 1; d >= 0; d -= 1) {
1460
- var p = qr[d];
1461
- var v = Mr.get(p);
1501
+ for (var d = Dr.length - 1; d >= 0; d -= 1) {
1502
+ var p = Dr[d];
1503
+ var v = qr.get(p);
1462
1504
  if (!v) {
1463
- if (p === qe) {
1505
+ if (p === Te) {
1464
1506
  r = true;
1465
1507
  }
1466
1508
  var b = s.has(p);
1467
- var m = et.length;
1509
+ var m = tt.length;
1468
1510
  if (a === 0) {
1469
1511
  f.splice(0, 0, n().createElement(w.Divider, {
1470
1512
  key: "topDivider"
@@ -1473,13 +1515,13 @@
1473
1515
  o = true;
1474
1516
  }
1475
1517
  var y = String(p);
1476
- var h = nr(p, y);
1518
+ var h = lr(p, y);
1477
1519
  f.splice(b ? 0 : m + 1, 0, n().createElement(U, {
1478
1520
  elementRef: e(h),
1479
1521
  label: y,
1480
1522
  value: p,
1481
1523
  key: "missing-value-".concat(p),
1482
- onClick: Wr,
1524
+ onClick: Xr,
1483
1525
  multiple: N,
1484
1526
  selected: true
1485
1527
  }));
@@ -1491,15 +1533,15 @@
1491
1533
  }
1492
1534
  var S = g === "controlled";
1493
1535
  // Filter the items
1494
- var O = (0, M.stringToKeywords)(qe);
1536
+ var O = (0, M.stringToKeywords)(Te);
1495
1537
  f = S ? f : f.filter((function(e) {
1496
- if (tr(e)) {
1538
+ if (nr(e)) {
1497
1539
  return (0, M.testPhrase)(e.props.label, O);
1498
1540
  }
1499
1541
  return true;
1500
1542
  // Keep all headers and non-interactive options
1501
1543
  })).map((function(e) {
1502
- if (!tr(e)) {
1544
+ if (!nr(e)) {
1503
1545
  return e;
1504
1546
  }
1505
1547
  // highlight matched text
@@ -1510,26 +1552,26 @@
1510
1552
  });
1511
1553
  }));
1512
1554
  // Add the option to add the new value
1513
- if (c && !r && qe) {
1555
+ if (c && !r && Te) {
1514
1556
  var C = o ? a + 1 : a;
1515
- var k = "".concat(qe, " (new value)");
1516
- var x = nr(qe, k);
1557
+ var k = "".concat(Te, " (new value)");
1558
+ var x = lr(Te, k);
1517
1559
  f.splice(C, 0, n().createElement(U, {
1518
1560
  elementRef: e(x),
1519
1561
  label: k,
1520
- value: qe,
1562
+ value: Te,
1521
1563
  key: "newValue",
1522
1564
  multiple: N,
1523
- onClick: Wr
1565
+ onClick: Xr
1524
1566
  }));
1525
1567
  }
1526
1568
  // When selectAll is a menu item, add an offset so that activeItem accounts for the extra selectAll option.
1527
1569
  var j = ae === "checkbox" && N && f.length > 1 ? 1 : 0;
1528
- var E = true;
1570
+ var P = true;
1529
1571
  // Highlight the selected Items and remove hidden
1530
1572
  f = f.reduce((function(e, r) {
1531
1573
  // ignore Dividers & Headings
1532
- if (!tr(r)) {
1574
+ if (!nr(r)) {
1533
1575
  e.push(r);
1534
1576
  return e;
1535
1577
  }
@@ -1537,111 +1579,115 @@
1537
1579
  if (r.props && r.props.hidden) {
1538
1580
  return e;
1539
1581
  }
1540
- if (r.props.selected && !r.props.disabled && kr.current == null) {
1541
- kr.current = Or.current;
1582
+ if (r.props.selected && r.props.disabled !== true && r.props.disabled !== "disabled" && xr.current == null) {
1583
+ xr.current = wr.current;
1542
1584
  }
1543
- var n = j === Pe;
1585
+ var n = r.props.disabled;
1586
+ if (n === true || n === "disabled") {
1587
+ e.push(r);
1588
+ return e;
1589
+ }
1590
+ var l = j === Ee;
1544
1591
  j += 1;
1545
- Or.current += 1;
1546
- xr.current += r.props.selected ? 1 : 0;
1547
- if (r.key !== "newValue" && !r.props.disabled && !r.props.selected) {
1548
- E = false;
1592
+ wr.current += 1;
1593
+ // Dimmed Options can receive focus but are not selectable
1594
+ jr.current += r.props.selected && n !== "dimmed" ? 1 : 0;
1595
+ if (r.key !== "newValue" && n !== "dimmed" && !r.props.selected) {
1596
+ P = false;
1549
1597
  }
1550
- if (!n || !We) {
1598
+ if (!l || !We) {
1551
1599
  e.push(r);
1552
1600
  return e;
1553
1601
  }
1554
- if (!r.props.disabled) {
1555
- hr.current = r.props.value;
1556
- }
1557
- var l = (0, t.cloneElement)(r, {
1558
- active: n,
1559
- elementRef: Gr,
1602
+ Sr.current = r.props.value;
1603
+ var a = (0, t.cloneElement)(r, {
1604
+ active: l,
1605
+ elementRef: Yr,
1560
1606
  id: we
1561
1607
  });
1562
- e.push(l);
1608
+ e.push(a);
1563
1609
  return e;
1564
1610
  }), []);
1565
- jr.current = xr.current === 0 && "none" || E && "all" || "some";
1611
+ Er.current = jr.current === 0 && "none" || P && "all" || "some";
1566
1612
  // add select all option
1567
- if (ae === "checkbox" && N && Or.current > 0) {
1568
- var A = Pe === 0 && !!g;
1613
+ if (ae === "checkbox" && N && wr.current > 0) {
1614
+ var A = Ee === 0 && !!g;
1569
1615
  var L;
1570
- if (jr.current === "all") {
1571
- if (qe === "") {
1572
- L = (0, q._)("Clear all");
1616
+ if (Er.current === "all") {
1617
+ if (Te === "") {
1618
+ L = (0, T._)("Clear all");
1573
1619
  } else {
1574
- L = (0, q._)("Clear all matches");
1620
+ L = (0, T._)("Clear all matches");
1575
1621
  }
1576
- } else if (qe === "") {
1577
- L = (0, q._)("Select all");
1622
+ } else if (Te === "") {
1623
+ L = (0, T._)("Select all");
1578
1624
  } else {
1579
- L = (0, q._)("Select all matches");
1625
+ L = (0, T._)("Select all matches");
1580
1626
  }
1581
1627
  if (A) {
1582
- hr.current = "selectAll";
1628
+ Sr.current = "selectAll";
1583
1629
  }
1584
1630
  f.unshift( n().createElement(oe, {
1585
1631
  key: "select-all-option",
1586
1632
  active: A,
1587
- elementRef: Gr,
1633
+ elementRef: Yr,
1588
1634
  id: A ? we : undefined,
1589
- onClick: jr.current === "all" ? Kr : Fr,
1635
+ onClick: Er.current === "all" ? zr : Hr,
1590
1636
  label: L,
1591
- selected: jr.current === "all" || jr.current !== "none" && "some",
1592
- totalCount: !!de && qr.length || undefined,
1637
+ selected: Er.current === "all" || Er.current !== "none" && "some",
1638
+ totalCount: !!de && Dr.length || undefined,
1593
1639
  tabIndex: g ? -1 : undefined
1594
1640
  }), n().createElement(w.Divider, {
1595
1641
  key: "selectAllDivider"
1596
1642
  }));
1597
1643
  }
1598
- wr.current = f.reduce((function(e, r) {
1599
- if (tr(r)) {
1644
+ Cr.current = f.reduce((function(e, r) {
1645
+ if (nr(r)) {
1600
1646
  e.push(r.props.value);
1601
1647
  }
1602
1648
  return e;
1603
1649
  }), []);
1604
1650
  return f;
1605
- }), [ Pe, we, l, c, Rr, Mr, qr, g, qe, Gr, Kr, Wr, $r, Qr, Fr, P, N, et, W, ae, We, de ]);
1606
- var tt = function e(r) {
1651
+ }), [ Ee, we, l, c, Tr, qr, Dr, g, Te, Yr, zr, Xr, Ur, Zr, Hr, E, N, tt, W, ae, We, de ]);
1652
+ var lt = function e(r) {
1607
1653
  var t = r.anchorWidth, l = r.maxHeight, o = r.placement, i = r.toggleId;
1608
- var u = er({
1654
+ var u = rr({
1609
1655
  anchorWidth: t,
1610
1656
  isMultiple: N,
1611
1657
  maxHeight: l,
1612
1658
  menuStyle: B
1613
1659
  });
1614
- var c = qr.length > 0 && !Zr && !g ? 0 : undefined;
1660
+ var c = Dr.length > 0 && !rt && !g ? 0 : undefined;
1615
1661
  var s = {
1616
1662
  "aria-multiselectable": N || undefined,
1617
- childrenStart: !!g && n().createElement(sr, {
1663
+ childrenStart: !!g && n().createElement(fr, {
1618
1664
  activeItemId: we,
1619
- filterA11yId: Ar,
1620
- filterKeyword: qe,
1621
- hasChildren: rt.some((function(e) {
1622
- return tr(e);
1665
+ filterA11yId: Lr,
1666
+ filterKeyword: Te,
1667
+ hasChildren: nt.some((function(e) {
1668
+ return nr(e);
1623
1669
  })),
1624
1670
  inputId: x,
1625
1671
  inputRef: j,
1626
1672
  menuListboxId: ke,
1627
1673
  multiple: N,
1628
- onClearAll: Kr,
1629
- onSelectAll: Fr,
1630
- onTextBlur: Jr,
1631
- onTextChange: Xr,
1632
- onTextFocus: Ur,
1633
- onTextKeyDown: zr,
1634
- optionSelection: jr,
1674
+ onClearAll: zr,
1675
+ onSelectAll: Hr,
1676
+ onTextBlur: Qr,
1677
+ onTextChange: Jr,
1678
+ onTextFocus: Gr,
1679
+ onTextKeyDown: $r,
1680
+ optionSelection: Er,
1635
1681
  placement: o,
1636
1682
  selectAllAppearance: ae,
1637
1683
  textHasFocus: We
1638
1684
  }),
1639
1685
  focusMode: g ? "never" : undefined,
1640
- isLoading: P,
1641
- labelledBy: "".concat(Ar !== null && Ar !== void 0 ? Ar : "", " ").concat(i !== null && i !== void 0 ? i : "").trim(),
1686
+ isLoading: E,
1687
+ labelledBy: "".concat(Lr !== null && Lr !== void 0 ? Lr : "", " ").concat(i !== null && i !== void 0 ? i : "").trim(),
1642
1688
  // NVDA ignores aria-labelledby attribute on popover, but reads it on menu
1643
1689
  menuId: ke,
1644
- onScrollBottom: W ? Hr : undefined,
1690
+ onScrollBottom: W ? Wr : undefined,
1645
1691
  placement: o !== null && o !== void 0 ? o : undefined,
1646
1692
  noOptionsMessage: K,
1647
1693
  footerMessage: S,
@@ -1655,27 +1701,27 @@
1655
1701
 
1656
1702
  return n().createElement(C.VirtualizedResultsMenu, _e({
1657
1703
  virtualization: fe
1658
- }, s), rt);
1704
+ }, s), nt);
1659
1705
  }
1660
1706
 
1661
- return n().createElement(k(), s, rt);
1707
+ return n().createElement(k(), s, nt);
1662
1708
  };
1663
- var nt = (0, t.useMemo)((function() {
1709
+ var at = (0, t.useMemo)((function() {
1664
1710
 
1665
- return n().createElement(pr, _e({
1711
+ return n().createElement(vr, _e({
1666
1712
  appearance: i,
1667
1713
  append: u,
1668
- currentValues: qr,
1714
+ currentValues: Dr,
1669
1715
  "data-test": N ? "multiselect" : "select",
1670
1716
  describedBy: v,
1671
1717
  disabled: b,
1672
- elementRef: Yr,
1718
+ elementRef: et,
1673
1719
  error: y,
1674
1720
  inline: O,
1675
1721
  labelText: A,
1676
- labelledBy: E,
1722
+ labelledBy: P,
1677
1723
  multiple: N,
1678
- onClick: X,
1724
+ onClick: Ir ? undefined : X,
1679
1725
  placeholder: Z,
1680
1726
  prefixLabel: ee,
1681
1727
  prepend: re,
@@ -1685,30 +1731,30 @@
1685
1731
  toggleContent: ve,
1686
1732
  maxLabelItems: me
1687
1733
  }, ye), s);
1688
- }), [ i, u, qr, N, v, b, Yr, y, O, A, E, X, Z, ee, re, Q, ue, de, ve, me, ye, s ]);
1734
+ }), [ i, u, Dr, N, v, b, et, y, O, A, P, Ir, X, Z, ee, re, Q, ue, de, ve, me, ye, s ]);
1689
1735
 
1690
1736
  return n().createElement(h(), {
1691
- closeReasons: rr,
1737
+ closeReasons: tr,
1692
1738
  inputId: x,
1693
- "aria-labelledby": Ar,
1694
- toggle: nt,
1695
- onRequestOpen: _r,
1696
- onRequestClose: Br,
1739
+ "aria-labelledby": Lr,
1740
+ toggle: at,
1741
+ onRequestOpen: Nr,
1742
+ onRequestClose: Vr,
1697
1743
  open: Ve,
1698
- openWithArrowKeys: true,
1744
+ openWithArrowKeys: !Ir,
1699
1745
  repositionMode: ne,
1700
1746
  defaultPlacement: d,
1701
1747
  canCoverAnchor: Ae().innerHeight < 500,
1702
1748
  retainFocus: false,
1703
- takeFocus: qr.length === 0 || qr.length > 0 && !Zr || !!g
1704
- }, tt);
1749
+ takeFocus: Dr.length === 0 || Dr.length > 0 && !rt || !!g
1750
+ }, lt);
1705
1751
  }
1706
- br.propTypes = Ye;
1707
- br.componentType = "SelectBase";
1708
- br.Option = U;
1709
- br.Divider = w.Divider;
1710
- br.Heading = w.Heading;
1711
- /* harmony default export */ const mr = br;
1752
+ mr.propTypes = Ze;
1753
+ mr.componentType = "SelectBase";
1754
+ mr.Option = U;
1755
+ mr.Divider = w.Divider;
1756
+ mr.Heading = w.Heading;
1757
+ /* harmony default export */ const yr = mr;
1712
1758
  // CONCATENATED MODULE: ./src/SelectBase/index.ts
1713
1759
  module.exports = r;
1714
1760
  /******/})();