@splunk/react-ui 4.32.0 → 4.33.0

package/Multiselect.js

@@ -1380,6 +1380,7 @@
         showSelectedValuesFirst: a().oneOf([ "nextOpen", "immediately", "never" ]),
         suffixLabel: a().string,
         tabConfirmsNewValue: a().bool,
+        toggleContent: a().oneOf([ "optionChildren", "optionLabel" ]),
         values: a().array,
         /** @private. */
         virtualization: a().number
@@ -1402,7 +1403,8 @@
         prepend: false,
         repositionMode: "flip",
         selectAllAppearance: "buttongroup",
-        tabConfirmsNewValue: false
+        tabConfirmsNewValue: false,
+        toggleContent: "optionChildren"
     };
     var Yt = ce()((function(e) {
         return [ e ];
@@ -1709,60 +1711,72 @@
             }));
             Jt($t(a), "createToggle", (function() {
                 var e;
-                var t = a.props, i = t.toggle, l = t.appearance, s = t.children, p = t.describedBy, f = t.disabled, d = t.elementRef, v = t.error, h = t.inline, b = t.labelledBy, y = t.labelText, m = t.multiple, g = t.placeholder, O = t.prefixLabel, w = t.required, S = t.suffixLabel;
-                var C;
+                var t = a.props, i = t.toggle, l = t.appearance, s = t.children, p = t.describedBy, f = t.disabled, d = t.elementRef, v = t.error, h = t.inline, b = t.labelledBy, y = t.labelText, m = t.multiple, g = t.placeholder, O = t.prefixLabel, w = t.required, S = t.suffixLabel, C = t.toggleContent;
                 var x;
+                var k;
+                var I = [];
  // Generate buttonLabels
-                                var k = (e = a.getCurrentValues()) !== null && e !== void 0 ? e : [];
-                var I = n.Children.toArray(s);
-                var _ = k.reduce((function(e, t, n, r) {
-                    var o = Z()(I, (function(e) {
+                                var _ = (e = a.getCurrentValues()) !== null && e !== void 0 ? e : [];
+                var j = n.Children.toArray(s);
+                var E = _.reduce((function(e, t, n, r) {
+                    var o = Z()(j, (function(e) {
                         return tn(e) && e.props.value === t;
                     }));
                     if (o) {
-                        e.push(o.props.children || o.props.label);
+                        var a = C !== "optionLabel" && o.props.children ? o.props.children : o.props.label;
+                        e.push(a);
+                        I.push(o.props.label);
  // if not in multiple mode, add the icon
-                                                if (!m && k.length === 1) {
-                            C = o.props.icon;
+                                                if (!m && _.length === 1) {
+                            x = o.props.icon;
                         }
                     } else if (m) {
                         // only add values that don't match an option in "multiple" mode to preserve old behaviour
                         e.push(t);
+                        I.push(t.toString());
                     }
                     if (n < r.length - 1) {
                         e.push((0, u._)(", "));
+                        I.push((0, u._)(", "));
                     }
                     return e;
                 }), []);
-                x = _;
+                k = E;
  // only apply prefix / suffix if the label is not empty
-                                if (x.length > 0) {
-                    x = a.wrapLabel({
+                                if (k.length > 0) {
+                    k = a.wrapLabel({
                         prefixLabel: O,
-                        label: x,
+                        label: k,
                         suffixLabel: S
                     });
                 }
  // single <Select> behaviour is to show the placeholder if all parts of the the label
                 // are empty strings so we replicate this behaviour here
-                                if (x.length === 0 || !m && x.every((function(e) {
+                                if (k.length === 0 || !m && k.every((function(e) {
                     return e === "";
                 }))) {
-                    x = Yt(g);
+                    k = Yt(g);
+ // placeholder has a default value so will not be undefined
+                                        I = Yt(g);
                 }
-                var j = x;
  // If there's more than one item selected, read out the selected total
                 // rather than reading out each selected item
-                                if (x.length > 1) {
-                    j = a.wrapLabel({
+                                if (k.length > 1) {
+                    I = a.wrapLabel({
+                        prefixLabel: O,
+                        label: [ "".concat(_.length, " items selected") ],
+                        suffixLabel: S
+                    });
+                } else {
+                    I = a.wrapLabel({
                         prefixLabel: O,
-                        label: [ "".concat(k.length, " items selected") ],
+                        label: I,
                         suffixLabel: S
                     });
                 }
-                var E = Gt({
+                var M = Gt({
                     "aria-describedby": p,
-                    "aria-label": "".concat(y ? "".concat(y, ", ") : "").concat(j),
+                    "aria-label": "".concat(y ? "".concat(y, ", ") : "").concat(I.join("")),
                     "aria-labelledby": y ? undefined : b,
                     "aria-required": w,
                     "data-select-appearance": l,
@@ -1772,36 +1786,36 @@
                     error: v
                 }, c()(a.props, le()(o.propTypes)));
                 if (m) {
-                    E["data-test-values"] = JSON.stringify(k);
+                    M["data-test-values"] = JSON.stringify(_);
                 } else {
-                    var M = It(k, 1), A = M[0];
-                    E["data-test-value"] = A;
+                    var A = It(_, 1), P = A[0];
+                    M["data-test-value"] = P;
                 }
                 if (i) {
                     
-                    return (0, n.cloneElement)(i, E);
+                    return (0, n.cloneElement)(i, M);
                 }
                 if (l === "link") {
                     
-                    return r().createElement(Se(), kt({}, E, {
+                    return r().createElement(Se(), kt({}, M, {
                         "data-select-appearance": "link"
-                    }), !!C &&  r().createElement(ft, null, C), x || g,  r().createElement(dt, null,  r().createElement(Ve, null)));
+                    }), !!x &&  r().createElement(ft, null, x), k || g,  r().createElement(dt, null,  r().createElement(Ve, null)));
                 }
                 
-                return r().createElement(pt, kt({}, E, {
+                return r().createElement(pt, kt({}, M, {
                     $multiple: m,
                     appearance: l,
-                    label: x,
+                    label: k,
                     error: v,
-                    icon: C,
+                    icon: x,
                     inline: h,
                     isMenu: true,
                     "aria-haspopup": "listbox",
                     "aria-owns": a.menuId,
                     onClick: a.props.onClick
-                }, pe()(a.props, o.invalidLinkAppearanceProps)), !!k.length && m &&  r().createElement(bt, {
+                }, pe()(a.props, o.invalidLinkAppearanceProps)), !!_.length && m &&  r().createElement(bt, {
                     "data-role": "count"
-                }, "(", k.length, ")"));
+                }, "(", _.length, ")"));
             }));
             Jt($t(a), "createChildren", (function() {
                 var e = a.state, t = e.filterKeyword, o = e.textHasFocus, i = e.topValues;