@splunk/react-ui 4.36.0 → 4.38.0

package/Select.js

@@ -76,10 +76,10 @@
     const a = require("lodash/has");
     var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const s = require("@splunk/ui-utils/i18n");
+    const c = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "lodash/castArray"
-    const c = require("lodash/castArray");
-    var u =  e.n(c);
+    const s = require("lodash/castArray");
+    var u =  e.n(s);
     // CONCATENATED MODULE: external "lodash/find"
     const p = require("lodash/find");
     var f =  e.n(p);
@@ -158,7 +158,7 @@
     // CONCATENATED MODULE: ./src/Select/icons/Search.tsx
     var ee = function e() {
         var t = (0, U.useSplunkTheme)(), n = t.isEnterprise, o = t.isCompact;
-        var i = (0, s._)("Search");
+        var i = (0, c._)("Search");
         var a = o ? "20px" : "24px";
         var l = n ?  r().createElement(Y(), {
             role: "presentation",
@@ -243,12 +243,12 @@
             Object.defineProperty(e, r.key, r);
         }
     }
-    function se(e, t, n) {
+    function ce(e, t, n) {
         if (t) le(e.prototype, t);
         if (n) le(e, n);
         return e;
     }
-    function ce(e, t) {
+    function se(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -360,7 +360,7 @@
  * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
  * so any elements passed to it must also be pure.
  */    var ge =  function(e) {
-        ce(n, e);
+        se(n, e);
         var t = pe(n);
         function n() {
             var e;
@@ -383,7 +383,7 @@
             }));
             return e;
         }
-        se(n, [ {
+        ce(n, [ {
             key: "scrollIntoViewIfNeeded",
             value: function e() {
                 var t;
@@ -403,13 +403,12 @@
                 var t = this.props, n = t.value, o = t.children, i = t.label, a = t.multiple, l = oe(t, [ "value", "children", "label", "multiple" ]);
                 
                 return r().createElement(T.Item, re({
-                    "aria-selected": this.props.selected,
                     "data-test-value": n,
                     "data-test": "option",
                     ref: this.handleMount
                 }, l, {
                     selectable: true,
-                    selectableAppearance: a ? "checkbox" : undefined,
+                    selectableAppearance: a ? "checkbox" : "checkmark",
                     onClick: this.handleClick,
                     role: "option",
                     value: n.toString()
@@ -631,9 +630,9 @@
         selected: i().oneOf([ false, true, "some" ])
     };
     var Fe =  r().forwardRef((function(e, t) {
-        var n = e.active, o = e.id, i = e.onClick, a = e.selectAllLabel, l = e.totalCount, c = e.changedToggle, u = e.selected;
+        var n = e.active, o = e.id, i = e.onClick, a = e.selectAllLabel, l = e.totalCount, s = e.changedToggle, u = e.selected;
         // When toggle is changed the total count is not displayed anymore so the count is now shown in the Select all menu item
-                var p = c ? " (".concat(l === null || l === void 0 ? void 0 : l.toString(), ")") : "";
+                var p = s ? " (".concat(l === null || l === void 0 ? void 0 : l.toString(), ")") : "";
         
         return r().createElement(Be, {
             label: a,
@@ -652,12 +651,12 @@
             key: "main-checkbox",
             value: "main-checkbox",
             appearance: "checkbox",
-            "aria-label": !u && (0, s._)("No options selected") || u === "some" && (0, s._)("Some options selected") || (0, 
-            s._)("All options selected"),
+            "aria-label": !u && (0, c._)("No options selected") || u === "some" && (0, c._)("Some options selected") || (0, 
+            c._)("All options selected"),
             "data-test": "select-all-switch",
-            selectedLabel: u === true ? (0, s._)("All options selected") : (0, s._)("Option selected"),
-            unselectedLabel: u === true ? (0, s._)("No options selected") : (0, s._)("Option unselected"),
-            someSelectedLabel: (0, s._)("Some options selected")
+            selectedLabel: u === true ? (0, c._)("All options selected") : (0, c._)("Option selected"),
+            unselectedLabel: u === true ? (0, c._)("No options selected") : (0, c._)("Option unselected"),
+            someSelectedLabel: (0, c._)("Some options selected")
         }),  r().createElement(je, {
             "data-test": "description"
         }, "".concat(p, " Ctrl-a")),  r().createElement(Ve, null,  r().createElement(Re, {
@@ -911,12 +910,12 @@
         return at.apply(this, arguments);
     }
     function lt(e, t) {
-        return ut(e) || ct(e, t) || dt(e, t) || st();
+        return ut(e) || st(e, t) || dt(e, t) || ct();
     }
-    function st() {
+    function ct() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function ct(e, t) {
+    function st(e, t) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var n = [];
         var r = true;
@@ -1164,8 +1163,8 @@
         isLoadingOptions: false,
         menuStyle: {},
         multiple: false,
-        noOptionsMessage: (0, s._)("No matches"),
-        placeholder: (0, s._)("Select..."),
+        noOptionsMessage: (0, c._)("No matches"),
+        placeholder: (0, c._)("Select..."),
         prepend: false,
         repositionMode: "flip",
         selectAllAppearance: "buttongroup",
@@ -1216,7 +1215,6 @@
             Et(Ct(i), "dropdown", null);
             Et(Ct(i), "firstSelectedEnabledOption", null);
             Et(Ct(i), "firstSelectedOptionIndex", void 0);
-            Et(Ct(i), "menuId", void 0);
             Et(Ct(i), "menuListboxId", void 0);
             Et(Ct(i), "previousActiveIndex", null);
             Et(Ct(i), "selectedOptionCount", void 0);
@@ -1235,14 +1233,14 @@
             }));
             Et(Ct(i), "handleSelectAll", (function(e) {
                 var t, n, o;
-                var a = i.props, l = a.name, s = a.children, c = a.multiple;
+                var a = i.props, l = a.name, c = a.children, s = a.multiple;
  // this doesn't make sense if we can't select multiple values
-                                if (!c) {
+                                if (!s) {
                     return;
                 }
                 var u = (t = i.getCurrentValues()) !== null && t !== void 0 ? t : [];
                 var p = A()(u.concat(i.displayedValues));
-                p = r().Children.toArray(s).filter((function(e) {
+                p = r().Children.toArray(c).filter((function(e) {
                     return Dt(e) && b()(p, e.props.value) && (!e.props.disabled || b()(u, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
@@ -1260,15 +1258,15 @@
             }));
             Et(Ct(i), "handleClearAll", (function(e) {
                 var t, n, o;
-                var a = i.props, l = a.name, s = a.children, c = a.multiple;
+                var a = i.props, l = a.name, c = a.children, s = a.multiple;
  // this doesn't make sense if we can't select multiple values
-                                if (!c) {
+                                if (!s) {
                     return;
                 }
                 var u = (t = i.getCurrentValues()) !== null && t !== void 0 ? t : [];
                 var p = E().apply(void 0, [ u ].concat(pt(i.displayedValues)));
  // this will unselect all selected values unless those values are disabled or hidden by the filter
-                                var f = r().Children.toArray(s).filter((function(e) {
+                                var f = r().Children.toArray(c).filter((function(e) {
                     return Dt(e) && (b()(u, e.props.value) && e.props.disabled || b()(p, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
@@ -1312,9 +1310,9 @@
                         };
                     }));
                     if (r && o) {
-                        var s;
-                        var c = n.Children.toArray(r).length - (2 + ((s = i.getCurrentValues()) !== null && s !== void 0 ? s : []).length);
-                        if (i.state.activeIndex === c) {
+                        var c;
+                        var s = n.Children.toArray(r).length - (2 + ((c = i.getCurrentValues()) !== null && c !== void 0 ? c : []).length);
+                        if (i.state.activeIndex === s) {
                             i.handleScrollBottom(e);
                         }
                     }
@@ -1376,11 +1374,11 @@
                                 a = l === r.length - 1 ? 0 : l + 1;
                             }
                         }
-                        var s = r[a];
-                        var c = i.optionRefsByKey[Lt(s.value, s.label)];
-                        if (c != null) {
+                        var c = r[a];
+                        var s = i.optionRefsByKey[Lt(c.value, c.label)];
+                        if (s != null) {
                             var u;
-                            (u = c.focus) === null || u === void 0 ? void 0 : u.call(c);
+                            (u = s.focus) === null || u === void 0 ? void 0 : u.call(s);
                         }
                     }
                     i.currentMatchOptions = r;
@@ -1477,13 +1475,13 @@
             }));
             Et(Ct(i), "createToggle", (function() {
                 var e;
-                var t = i.props, a = t.toggle, l = t.appearance, c = t.children, u = t.describedBy, p = t.disabled, d = t.elementRef, v = t.error, h = t.inline, b = t.labelledBy, m = t.labelText, y = t.multiple, g = t.placeholder, S = t.prefixLabel, w = t.required, x = t.suffixLabel, k = t.toggleContent;
+                var t = i.props, a = t.toggle, l = t.appearance, s = t.children, u = t.describedBy, p = t.disabled, d = t.elementRef, v = t.error, h = t.inline, b = t.labelledBy, m = t.labelText, y = t.multiple, g = t.placeholder, S = t.prefixLabel, w = t.required, x = t.suffixLabel, k = t.toggleContent;
                 var _;
                 var A;
                 var j = [];
  // Generate buttonLabels
                                 var E = (e = i.getCurrentValues()) !== null && e !== void 0 ? e : [];
-                var M = n.Children.toArray(c);
+                var M = n.Children.toArray(s);
                 var T = E.reduce((function(e, t, n, r) {
                     var o = f()(M, (function(e) {
                         return Dt(e) && e.props.value === t;
@@ -1502,43 +1500,34 @@
                         j.push(t.toString());
                     }
                     if (n < r.length - 1) {
-                        e.push((0, s._)(", "));
-                        j.push((0, s._)(", "));
+                        e.push((0, c._)(", "));
+                        j.push((0, c._)(", "));
                     }
                     return e;
                 }), []);
                 A = T;
  // only apply prefix / suffix if the label is not empty
                                 if (A.length > 0) {
+                    // If there's more than one item selected, read out the selected total
+                    // rather than reading out each selected item
+                    j = i.wrapLabel({
+                        prefixLabel: S,
+                        label: A.length > 1 ? [ "".concat(E.length, " items selected") ] : j,
+                        suffixLabel: x
+                    });
                     A = i.wrapLabel({
                         prefixLabel: S,
                         label: A,
                         suffixLabel: x
                     });
                 }
- // single <Select> behaviour is to show the placeholder if all parts of the the label
+ // single <Select> behaviour is to show the placeholder if all parts of the label
                 // are empty strings so we replicate this behaviour here
                                 if (A.length === 0 || !y && A.every((function(e) {
                     return e === "";
                 }))) {
                     A = Pt(g);
- // placeholder has a default value so will not be undefined
-                                        j = Pt(g);
-                }
- // If there's more than one item selected, read out the selected total
-                // rather than reading out each selected item
-                                if (A.length > 1) {
-                    j = i.wrapLabel({
-                        prefixLabel: S,
-                        label: [ "".concat(E.length, " items selected") ],
-                        suffixLabel: x
-                    });
-                } else {
-                    j = i.wrapLabel({
-                        prefixLabel: S,
-                        label: j,
-                        suffixLabel: x
-                    });
+                    j = A;
                 }
                 var P = jt({
                     "aria-describedby": u,
@@ -1547,6 +1536,7 @@
                     "aria-required": w,
                     "data-select-appearance": l,
                     "data-test": y ? "multiselect" : "select",
+                    role: "combobox",
                     disabled: p,
                     elementRef: d,
                     error: v
@@ -1576,8 +1566,6 @@
                     icon: _,
                     inline: h,
                     isMenu: true,
-                    "aria-haspopup": "listbox",
-                    "aria-owns": i.menuId,
                     onClick: i.props.onClick
                 }, I()(i.props, o.invalidLinkAppearanceProps)), !!E.length && y &&  r().createElement(Ye, {
                     "data-role": "count"
@@ -1585,7 +1573,7 @@
             }));
             Et(Ct(i), "createChildren", (function() {
                 var e = i.state, t = e.filterKeyword, o = e.textHasFocus, a = e.topValues;
-                var l = i.props, c = l.allowKeyMatching, u = l.allowNewValues, p = l.filter, d = l.multiple, h = l.selectAllAppearance, b = l.showSelectedValuesFirst, m = l.isLoadingOptions, y = l.onScrollBottom;
+                var l = i.props, s = l.allowKeyMatching, u = l.allowNewValues, p = l.filter, d = l.multiple, h = l.selectAllAppearance, b = l.showSelectedValuesFirst, m = l.isLoadingOptions, y = l.onScrollBottom;
                 var g = i.getCurrentValues();
                 i.availableOptionCount = 0;
                 i.firstSelectedOptionIndex = undefined;
@@ -1610,10 +1598,10 @@
                     }
                     var a = g && g.indexOf(t.props.value) >= 0;
                     var l = !!a && !t.props.disabled && !x;
-                    var s = c && !d && !p && !m && !y;
+                    var c = s && !d && !p && !m && !y;
                     var u = Lt(t.props.value, t.props.label);
                     var f = -1;
-                    if (s && !t.props.disabled && !t.props.hidden) {
+                    if (c && !t.props.disabled && !t.props.hidden) {
                         i.availableMatchOptions.push({
                             label: t.props.label,
                             value: t.props.value
@@ -1624,7 +1612,7 @@
                                         var v =  (0, n.cloneElement)(t, {
                         key: t.key || o,
                         onClick: i.handleMenuOptionClick,
-                        onKeyDown: s ? function(e) {
+                        onKeyDown: c ? function(e) {
                             return i.handleMenuOptionKeyDown(e, f);
                         } : undefined,
                         selected: a,
@@ -1761,14 +1749,14 @@
                     var P;
                     if (i.optionSelection === "all") {
                         if (t === "") {
-                            P = (0, s._)("Clear all");
+                            P = (0, c._)("Clear all");
                         } else {
-                            P = (0, s._)("Clear all matches");
+                            P = (0, c._)("Clear all matches");
                         }
                     } else if (t === "") {
-                        P = (0, s._)("Select all");
+                        P = (0, c._)("Select all");
                     } else {
-                        P = (0, s._)("Select all matches");
+                        P = (0, c._)("Select all matches");
                     }
                     if (i.state.activeIndex === 0 && o) {
                         i.activeValue = "selectAll";
@@ -1832,7 +1820,6 @@
             if (false) {}
             if (false) {}
             o.validateAppearance(e);
-            i.menuId = (0, M.createDOMID)("menu");
             i.menuListboxId = (0, M.createDOMID)("menu-listbox");
             i.activeItemId = (0, M.createDOMID)("active-item");
             return i;
@@ -1874,7 +1861,7 @@
                 var r, o, i;
                 var a = (r = this.getCurrentValues()) !== null && r !== void 0 ? r : [];
                 var l = a.indexOf(n);
-                var s = this.props, c = s.name, u = s.multiple;
+                var c = this.props, s = c.name, u = c.multiple;
                 var p;
                 if (u) {
                     if (l >= 0) {
@@ -1909,7 +1896,7 @@
                 }
                 (o = (i = this.props).onChange) === null || o === void 0 ? void 0 : o.call(i, t, {
                     values: p,
-                    name: c,
+                    name: s,
                     reason: "valueToggle"
                 });
             }
@@ -1926,9 +1913,9 @@
             value: function e(t) {
                 var n = t.hasChildren, o = t.placement;
                 var i = this.state.filterKeyword;
-                var a = this.props, l = a.inputId, c = a.inputRef, u = a.multiple, p = a.selectAllAppearance;
-                var f = (0, s._)("Select all options".concat(this.optionSelection === "all" ? " disabled" : ""));
-                var d = (0, s._)("Clear all options".concat(this.optionSelection === "none" ? " disabled" : ""));
+                var a = this.props, l = a.inputId, s = a.inputRef, u = a.multiple, p = a.selectAllAppearance;
+                var f = (0, c._)("Select all options".concat(this.optionSelection === "all" ? " disabled" : ""));
+                var d = (0, c._)("Clear all options".concat(this.optionSelection === "none" ? " disabled" : ""));
  // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
                                 var v =  r().createElement(Ze, {
                     $placement: o,
@@ -1938,12 +1925,12 @@
                     "aria-label": f,
                     onClick: this.handleSelectAll,
                     "data-test": "select-all"
-                }, i ? (0, s._)("Select all Matches") : (0, s._)("Select all")),  r().createElement(Qe, {
+                }, i ? (0, c._)("Select all Matches") : (0, c._)("Select all")),  r().createElement(Qe, {
                     $disabled: this.optionSelection === "none",
                     "aria-label": d,
                     onClick: this.handleClearAll,
                     "data-test": "clear-all"
-                }, i ? (0, s._)("Clear all Matches") : (0, s._)("Clear all")));
+                }, i ? (0, c._)("Clear all Matches") : (0, c._)("Clear all")));
                 return this.hasFilter() &&  r().createElement("div", {
                     key: "controls"
                 },  r().createElement(Je, {
@@ -1959,13 +1946,15 @@
                     onKeyDown: this.handleTextKeyDown,
                     onFocus: this.handleTextFocus,
                     onBlur: this.handleTextBlur,
-                    placeholder: (0, s._)("filter"),
+                    placeholder: (0, c._)("filter"),
                     role: "combobox",
                     "aria-expanded": "true",
                     "aria-controls": this.menuListboxId,
-                    "aria-label": (0, s._)("Filter"),
+                    "aria-owns": n ? this.activeItemId : undefined,
+                    "aria-label": (0, c._)("Filter"),
+                    "aria-autocomplete": "list",
                     "aria-activedescendant": this.state.textHasFocus && n ? this.activeItemId : undefined,
-                    inputRef: c,
+                    inputRef: s,
                     inputId: l,
                     canClear: true,
                     startAdornment:  r().createElement(Xe, null,  r().createElement(te, null))
@@ -1975,7 +1964,7 @@
             key: "render",
             value: function e() {
                 var t, o = this;
-                var i = this.props, a = i.children, l = i.defaultPlacement, s = i.inputId, c = i.multiple, u = i.repositionMode, p = i.virtualization;
+                var i = this.props, a = i.children, l = i.defaultPlacement, c = i.inputId, s = i.multiple, u = i.repositionMode, p = i.virtualization;
                 var d = this.hasFilter();
                 var v = (t = this.getCurrentValues()) !== null && t !== void 0 ? t : [];
                 var h = n.Children.toArray(a);
@@ -1995,22 +1984,23 @@
                         maxHeight: i,
                         menuStyle: o.props.menuStyle
                     });
-                    var s = v.length > 0 && !b && !o.hasFilter() ? 0 : undefined;
+                    var c = v.length > 0 && !b && !o.hasFilter() ? 0 : undefined;
                     var u = jt(jt({
-                        "aria-multiselectable": c || undefined,
+                        "aria-multiselectable": s || undefined,
                         childrenStart: o.renderControls({
                             placement: a,
-                            hasChildren: !!m.length
+                            hasChildren: m.some((function(e) {
+                                return Dt(e);
+                            }))
                         }),
                         focusMode: o.hasFilter() ? "never" : undefined,
-                        id: o.menuId,
                         isLoading: o.props.isLoadingOptions,
                         menuId: o.menuListboxId,
                         onScrollBottom: o.props.onScrollBottom ? o.handleScrollBottom : undefined,
                         placement: a !== null && a !== void 0 ? a : undefined
                     }, I()(o.props, "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll")), {}, {
                         style: l,
-                        tabIndex: s
+                        tabIndex: c
                     });
                     if (p) {
                         
@@ -2024,7 +2014,7 @@
                 
                 return r().createElement(V(), {
                     closeReasons: Rt,
-                    inputId: s,
+                    inputId: c,
                     toggle: y,
                     onRequestOpen: this.handleRequestOpen,
                     onRequestClose: this.handleRequestClose,
@@ -2035,7 +2025,7 @@
                     canCoverAnchor: it().innerHeight < 500,
                     ref: this.handleDropdownMount,
                     retainFocus: false,
-                    takeFocus: v.length === 0 || v.length > 0 && !b || !!d
+                    takeFocus: v.length === 0 || v.length > 0 && !b || d
                 }, g);
             }
         } ]);
@@ -2303,12 +2293,12 @@
         }
         return n;
     }
-    function sn(e, t) {
+    function cn(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function cn(e, t) {
+    function sn(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || false;
@@ -2318,8 +2308,8 @@
         }
     }
     function un(e, t, n) {
-        if (t) cn(e.prototype, t);
-        if (n) cn(e, n);
+        if (t) sn(e.prototype, t);
+        if (n) sn(e, n);
         return e;
     }
     function pn(e, t) {
@@ -2452,8 +2442,8 @@
         inline: true,
         isLoadingOptions: false,
         menuStyle: {},
-        noOptionsMessage: (0, s._)("No matches"),
-        placeholder: (0, s._)("Select..."),
+        noOptionsMessage: (0, c._)("No matches"),
+        placeholder: (0, c._)("Select..."),
         prepend: false,
         toggleContent: "optionChildren"
     };
@@ -2463,7 +2453,7 @@
         // @docs-props-type SelectPropsBase
                 function n(e) {
             var r;
-            sn(this, n);
+            cn(this, n);
             r = t.call(this, e);
             var o = {};
  // wrap defaultValue in an array once to avoid failing <SelectBase>'s defaultValues comparison check
@@ -2490,7 +2480,7 @@
             key: "render",
             value: function e() {
                 var t = this.props, n = t.defaultValue, o = t.onChange, i = t.value, a = an(t, [ "defaultValue", "onChange", "value" ]);
-                var s = {
+                var c = {
                     onChange: function e(t, n) {
                         var r = n.name, i = n.values;
                         o === null || o === void 0 ? void 0 : o(t, {
@@ -2502,16 +2492,16 @@
  // using "has" as opposed to a null check to match SelectBase
                                 if (l()(this.props, "value")) {
                     if (i != null) {
-                        s.values = [ i ];
+                        c.values = [ i ];
                     } else {
-                        s.values = [];
+                        c.values = [];
                     }
                 } else if (this.state.defaultValues != null) {
                     // using defaultValues from state in order to avoid wrapping defaultValue here
-                    s.defaultValues = this.state.defaultValues;
+                    c.defaultValues = this.state.defaultValues;
                 }
                 
-                return r().createElement(Nt, on({}, a, s, {
+                return r().createElement(Nt, on({}, a, c, {
                     multiple: false
                 }));
             }