@splunk/react-ui 4.32.0 → 4.34.0

package/Multiselect.js

@@ -565,11 +565,11 @@
     z(G, "defaultProps", U);
     /* harmony default export */    const J = G;
     // CONCATENATED MODULE: external "lodash/castArray"
-    const Q = require("lodash/castArray");
-    var X =  e.n(Q);
+    const X = require("lodash/castArray");
+    var Y =  e.n(X);
     // CONCATENATED MODULE: external "lodash/find"
-    const Y = require("lodash/find");
-    var Z =  e.n(Y);
+    const Q = require("lodash/find");
+    var Z =  e.n(Q);
     // CONCATENATED MODULE: external "lodash/forEachRight"
     const ee = require("lodash/forEachRight");
     var te =  e.n(ee);
@@ -680,7 +680,10 @@
     var Ge = Fe().span.withConfig({
         displayName: "ItemStyles__StyledItemDescriptionRight",
         componentId: "sc-4kc053-1"
-    })([ "", ";float:right;padding-left:", ";max-width:50%;text-align:right;box-sizing:border-box;" ], We, Ae.variables.spacing);
+    })([ "", ";float:right;", " max-width:50%;text-align:right;box-sizing:border-box;" ], We, (0, 
+    Ae.pick)({
+        enterprise: (0, Le.css)([ "padding-left:", ";" ], Ae.variables.spacingLarge)
+    }));
     var Je = Fe().div.withConfig({
         displayName: "ItemStyles__StyledItemSelectedIcon",
         componentId: "sc-4kc053-2"
@@ -691,7 +694,7 @@
         prisma: Ae.variables.contentColorActive,
         enterprise: Ae.variables.accentColorL10
     }));
-    var Qe = Fe().span.withConfig({
+    var Xe = Fe().span.withConfig({
         displayName: "ItemStyles__StyledItemIcon",
         componentId: "sc-4kc053-3"
     })([ "flex:0 0 auto;padding-right:", ";min-width:10px;display:inline-block;text-align:center;vertical-align:", ";", "" ], (0, 
@@ -705,7 +708,7 @@
         prisma: (0, Le.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], Ae.variables.contentColorMuted),
         enterprise: (0, Le.css)([ "transform:translateY(-1px);" ])
     }));
-    var Xe = Fe()($e()).withConfig({
+    var Ye = Fe()($e()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-4"
     })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled]){&:hover{background:", ";", "}&:focus{outline:0;box-shadow:", ";", "}", " ", "}&[disabled]{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0, 
@@ -778,16 +781,16 @@
     }), (0, Ae.pick)({
         prisma: (0, Le.css)([ "& > * > ", "{color:", ";}" ], 
         /* sc-sel */
-        Qe, Ae.variables.contentColorDisabled)
+        Xe, Ae.variables.contentColorDisabled)
     }), (function(e) {
         var t = e.$selected;
         return t && (0, Ae.pick)({
             prisma: (0, Le.css)([ "", "{color:", ";}" ], 
             /* sc-sel */
-            Qe, Ae.variables.contentColorActive)
+            Xe, Ae.variables.contentColorActive)
         });
     }));
-    var Ye = Fe()(ze()).withConfig({
+    var Qe = Fe()(ze()).withConfig({
         displayName: "ItemStyles__StyledSwitch",
         componentId: "sc-4kc053-5"
     })([ "position:absolute;left:", ";top:", ";" ], (0, Ae.pick)({
@@ -877,7 +880,7 @@
             active: n,
             ref: t,
             tabIndex: -1
-        },  r().createElement(Ye, {
+        },  r().createElement(Qe, {
             interactive: false,
             selected: c === "some" && "some" || c,
             key: "main-checkbox",
@@ -944,10 +947,7 @@
     var bt = Fe().span.withConfig({
         displayName: "SelectBaseStyles__StyledCount",
         componentId: "sc-16cj7sk-5"
-    })([ "padding-right:", ";" ], (0, Ae.pick)({
-        enterprise: Ae.variables.spacingQuarter,
-        prisma: Ae.variables.spacingXSmall
-    }));
+    })([ "padding-right:", ";" ], Ae.variables.spacingXSmall);
     var yt = Fe()(Se()).withConfig({
         displayName: "SelectBaseStyles__StyledControlsLink",
         componentId: "sc-16cj7sk-6"
@@ -1338,11 +1338,11 @@
         }
         return e;
     }
-    var Qt = {
+    var Xt = {
         allowKeyMatching: a().bool,
         allowNewValues: a().bool,
         animateLoading: a().bool,
-        appearance: a().oneOf([ "default", "link", "primary", "pill", "toggle", "flat" ]),
+        appearance: a().oneOf([ "default", "link", "primary", "pill", "toggle", "flat", "subtle" ]),
         append: a().bool,
         children: a().node,
         defaultPlacement: a().oneOf([ "above", "below", "vertical" ]),
@@ -1380,11 +1380,12 @@
         showSelectedValuesFirst: a().oneOf([ "nextOpen", "immediately", "never" ]),
         suffixLabel: a().string,
         tabConfirmsNewValue: a().bool,
+        toggleContent: a().oneOf([ "optionChildren", "optionLabel" ]),
         values: a().array,
         /** @private. */
         virtualization: a().number
     };
-    var Xt = {
+    var Yt = {
         allowKeyMatching: true,
         allowNewValues: false,
         animateLoading: false,
@@ -1402,9 +1403,10 @@
         prepend: false,
         repositionMode: "flip",
         selectAllAppearance: "buttongroup",
-        tabConfirmsNewValue: false
+        tabConfirmsNewValue: false,
+        toggleContent: "optionChildren"
     };
-    var Yt = ce()((function(e) {
+    var Qt = ce()((function(e) {
         return [ e ];
     }));
  // preserve separate widths for single vs. multi mode
@@ -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 = Qt(g);
+ // placeholder has a default value so will not be undefined
+                                        I = Qt(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(k.length, " items selected") ],
+                        label: [ "".concat(_.length, " items selected") ],
+                        suffixLabel: S
+                    });
+                } else {
+                    I = a.wrapLabel({
+                        prefixLabel: O,
+                        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;
@@ -2023,7 +2037,7 @@
                     o = [ "".concat(t, ": ") ].concat(o);
                 }
                 if (r) {
-                    o = X()(o).concat(" ".concat(r));
+                    o = Y()(o).concat(" ".concat(r));
                 }
                 return o;
             }));
@@ -2262,8 +2276,8 @@
         } ]);
         return o;
     }(n.Component);
-    Jt(rn, "propTypes", Qt);
-    Jt(rn, "defaultProps", Xt);
+    Jt(rn, "propTypes", Xt);
+    Jt(rn, "defaultProps", Yt);
     Jt(rn, "Option", M);
     Jt(rn, "Divider", p.Divider);
     Jt(rn, "Heading", p.Heading);
@@ -2598,10 +2612,7 @@
     }), (function(e) {
         var t = e.$popoverOpen;
         return t && (0, Le.css)([ "position:relative;z-index:calc(", " - 2);" ], Ae.variables.zindexFixedNavbar);
-    }), (0, Ae.pick)({
-        enterprise: Ae.variables.spacingHalf,
-        prisma: Ae.variables.spacingSmall
-    }));
+    }), Ae.variables.spacingSmall);
     var Un = Fe().span.withConfig({
         displayName: "NormalStyles__StyledButtonsWrapper",
         componentId: "sc-1uwwpco-1"
@@ -2612,7 +2623,7 @@
     })([ "", ";flex:1 0 auto;max-width:100%;line-height:12px;", "" ], Ae.mixins.reset("block"), (0, 
     Ae.pick)({
         enterprise: {
-            comfortable: (0, Le.css)([ "padding:", ";" ], Ae.variables.spacingQuarter),
+            comfortable: (0, Le.css)([ "padding:", ";" ], Ae.variables.spacingXSmall),
             compact: (0, Le.css)([ "padding:3px;" ])
         },
         prisma: {
@@ -2634,7 +2645,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function Qn(e, t) {
+    function Xn(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -2647,20 +2658,20 @@
         }
     }
     // CONCATENATED MODULE: ./src/Multiselect/Normal.tsx
-    function Xn(e) {
+    function Yn(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            Xn = function e(t) {
+            Yn = function e(t) {
                 return typeof t;
             };
         } else {
-            Xn = function e(t) {
+            Yn = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return Xn(e);
+        return Yn(e);
     }
-    function Yn(e) {
+    function Qn(e) {
         return nr(e) || tr(e) || er(e) || Zn();
     }
     function Zn() {
@@ -2809,7 +2820,7 @@
         };
     }
     function hr(e, t) {
-        if (t && (Xn(t) === "object" || typeof t === "function")) {
+        if (t && (Yn(t) === "object" || typeof t === "function")) {
             return t;
         }
         return br(e);
@@ -3097,11 +3108,11 @@
                 a.setState({
                     el: e
                 });
-                Qn(a.props.elementRef, e);
+                Xn(a.props.elementRef, e);
             }));
             gr(br(a), "handleInputMount", (function(e) {
                 a.input = e;
-                Qn(a.props.inputRef, e);
+                Xn(a.props.inputRef, e);
             }));
             gr(br(a), "handleActiveOptionMount", (function(e) {
                 if (a.previousActiveIndex !== a.state.activeIndex) {
@@ -3384,7 +3395,7 @@
                     "data-test-values": JSON.stringify(I),
                     inline: b,
                     $hasfocus: this.state.hasFocus
-                }, c().apply(void 0, [ C, "animateLoading", "controlledFilter", "defaultValues", "footerMessage", "inputRef", "isLoadingOptions", "labelledBy", "menuStyle", "noOptionsMessage", "onChange", "onFilterChange", "onScroll", "onScrollBottom", "onClose", "onOpen", "values", "useClickawayOverlay" ].concat(Yn(le()(x)))), {
+                }, c().apply(void 0, [ C, "animateLoading", "controlledFilter", "defaultValues", "footerMessage", "inputRef", "isLoadingOptions", "labelledBy", "menuStyle", "noOptionsMessage", "onChange", "onFilterChange", "onScroll", "onScrollBottom", "onClose", "onOpen", "values", "useClickawayOverlay" ].concat(Qn(le()(x)))), {
                     onClick: v ? undefined : this.handleClick,
                     $disabled: v,
                     $error: h,

package/Paginator.js

@@ -155,7 +155,7 @@
         }));
     }), (0, v.pick)({
         enterprise: {
-            comfortable: (0, x.css)([ "padding:", ";" ], v.variables.spacingQuarter),
+            comfortable: (0, x.css)([ "padding:", ";" ], v.variables.spacingXSmall),
             compact: (0, x.css)([ "padding:3px;" ])
         },
         prisma: (0, x.css)([ "padding:", ";& + &{margin-left:8px;}" ], (0, v.pick)({
@@ -360,8 +360,8 @@
     const $ = require("@splunk/react-ui/Select");
     var A =  e.n($);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const Q = require("@splunk/react-ui/ScreenReaderContent");
-    var V =  e.n(Q);
+    const V = require("@splunk/react-ui/ScreenReaderContent");
+    var X =  e.n(V);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
     const F = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: ./src/Paginator/PageSelectStyles.ts
@@ -373,12 +373,12 @@
         displayName: "PageSelectStyles__StyledCount",
         componentId: "haycz4-1"
     })([ "align-items:center;display:flex;flex-wrap:wrap;margin:0 ", ";" ], v.variables.spacingSmall);
-    var U = P()(A()).withConfig({
+    var Q = P()(A()).withConfig({
         displayName: "PageSelectStyles__StyledSelect",
         componentId: "haycz4-2"
     })([ "flex:0 0 auto;" ]);
     // CONCATENATED MODULE: ./src/Paginator/PageSelect.tsx
-    function X(e, t) {
+    function U(e, t) {
         if (e == null) return {};
         var r = Y(e, t);
         var n, a;
@@ -411,7 +411,7 @@
         totalPages: l().number
     };
     function ee(e) {
-        var t = e.onChange, a = e.current, l = a === void 0 ? 1 : a, i = e.totalPages, o = X(e, [ "onChange", "current", "totalPages" ]);
+        var t = e.onChange, a = e.current, l = a === void 0 ? 1 : a, i = e.totalPages, o = U(e, [ "onChange", "current", "totalPages" ]);
         // @docs-props-type PaginatorPageSelectPropsBase
                 var u = (0, r.useRef)((0, F.createDOMID)("pages"));
         var p = (0, r.useRef)((0, F.createDOMID)("totalPages"));
@@ -431,11 +431,11 @@
         }
         var g = (0, c.sprintf)((0, s._)("of %d pages"), i);
         
-        return n().createElement(J, o,  n().createElement(U, {
+        return n().createElement(J, o,  n().createElement(Q, {
             value: l,
             onChange: f,
             "aria-labelledby": "".concat(u.current, " ").concat(p.current)
-        }, d),  n().createElement(V(), {
+        }, d),  n().createElement(X(), {
             id: u.current,
             "aria-hidden": true
         }, l),  n().createElement(K, {