@splunk/react-ui 4.29.0 → 4.31.0

package/Select.js

@@ -99,8 +99,8 @@
     const S = require("lodash/memoize");
     var w =  e.n(S);
     // CONCATENATED MODULE: external "lodash/omit"
-    const k = require("lodash/omit");
-    var x =  e.n(k);
+    const x = require("lodash/omit");
+    var k =  e.n(x);
     // CONCATENATED MODULE: external "lodash/pick"
     const C = require("lodash/pick");
     var I =  e.n(C);
@@ -131,8 +131,8 @@
     const K = require("@splunk/react-ui/Text");
     var F =  e.n(K);
     // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
-    const $ = require("@splunk/react-icons/CaretSmallDown");
-    var H =  e.n($);
+    const H = require("@splunk/react-icons/CaretSmallDown");
+    var $ =  e.n(H);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Caret"
     const z = require("@splunk/react-icons/enterprise/Caret");
     var W =  e.n(z);
@@ -145,7 +145,7 @@
             screenReaderText: null,
             hideDefaultTooltip: true,
             size: .5
-        }) :  r().createElement(H(), null);
+        }) :  r().createElement($(), null);
         return o;
     };
     /* harmony default export */    const J = G;
@@ -426,8 +426,8 @@
     const Se = require("styled-components");
     var we =  e.n(Se);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const ke = require("@splunk/react-ui/Clickable");
-    var xe =  e.n(ke);
+    const xe = require("@splunk/react-ui/Clickable");
+    var ke =  e.n(xe);
     // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
     const Ce = require("@splunk/react-ui/Switch");
     var Ie =  e.n(Ce);
@@ -452,7 +452,7 @@
         componentId: "sc-4kc053-2"
     })([ "position:absolute;", " color:", ";" ], (0, U.pick)({
         prisma: (0, Se.css)([ "right:16px;" ]),
-        enterprise: (0, Se.css)([ "top:5px;right:3px;left:8px;" ])
+        enterprise: (0, Se.css)([ "right:3px;left:8px;" ])
     }), (0, U.pick)({
         prisma: U.variables.contentColorActive,
         enterprise: U.variables.accentColorL10
@@ -471,7 +471,7 @@
         prisma: (0, Se.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], U.variables.contentColorMuted),
         enterprise: (0, Se.css)([ "transform:translateY(-1px);" ])
     }));
-    var Te = we()(xe()).withConfig({
+    var Te = we()(ke()).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, 
@@ -573,7 +573,7 @@
     var Re = we().span.withConfig({
         displayName: "ItemStyles__StyledTitleAndDescriptionWrapper",
         componentId: "sc-4kc053-7"
-    })([ "max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
+    })([ "display:flex;flex-wrap:wrap;flex-direction:column;max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
         var t = e.$truncate;
         return t && (0, Se.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
@@ -664,10 +664,10 @@
         }, a))));
     }));
     Fe.propTypes = Ke;
-    /* harmony default export */    const $e = Fe;
+    /* harmony default export */    const He = Fe;
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const He = require("@splunk/react-ui/Button");
-    var ze =  e.n(He);
+    const $e = require("@splunk/react-ui/Button");
+    var ze =  e.n($e);
     // CONCATENATED MODULE: ./src/Select/SelectBaseStyles.ts
     var We = we()(ze()).withConfig({
         displayName: "SelectBaseStyles__StyledButton",
@@ -1018,16 +1018,16 @@
             } else {
                 o = r.apply(this, arguments);
             }
-            return kt(this, o);
+            return xt(this, o);
         };
     }
-    function kt(e, t) {
+    function xt(e, t) {
         if (t && (_t(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return xt(e);
+        return kt(e);
     }
-    function xt(e) {
+    function kt(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
@@ -1206,31 +1206,32 @@
             var i;
             mt(this, o);
             i = t.call(this, e);
-            Et(xt(i), "activeItemId", void 0);
-            Et(xt(i), "activeValue", void 0);
-            Et(xt(i), "availableOptionCount", void 0);
-            Et(xt(i), "controlledExternally", void 0);
-            Et(xt(i), "displayedValues", void 0);
-            Et(xt(i), "dropdown", null);
-            Et(xt(i), "firstSelectedEnabledOption", null);
-            Et(xt(i), "firstSelectedOptionIndex", void 0);
-            Et(xt(i), "menuId", void 0);
-            Et(xt(i), "previousActiveIndex", null);
-            Et(xt(i), "selectedOptionCount", void 0);
-            Et(xt(i), "optionRefsByKey", void 0);
-            Et(xt(i), "matchCharacter", void 0);
-            Et(xt(i), "matchTimeout", void 0);
-            Et(xt(i), "currentMatchOptions", void 0);
-            Et(xt(i), "availableMatchOptions", void 0);
-            Et(xt(i), "optionSelection", void 0);
-            Et(xt(i), "resetMatches", (function() {
+            Et(kt(i), "activeItemId", void 0);
+            Et(kt(i), "activeValue", void 0);
+            Et(kt(i), "availableOptionCount", void 0);
+            Et(kt(i), "controlledExternally", void 0);
+            Et(kt(i), "displayedValues", void 0);
+            Et(kt(i), "dropdown", null);
+            Et(kt(i), "firstSelectedEnabledOption", null);
+            Et(kt(i), "firstSelectedOptionIndex", void 0);
+            Et(kt(i), "menuId", void 0);
+            Et(kt(i), "menuListboxId", void 0);
+            Et(kt(i), "previousActiveIndex", null);
+            Et(kt(i), "selectedOptionCount", void 0);
+            Et(kt(i), "optionRefsByKey", void 0);
+            Et(kt(i), "matchCharacter", void 0);
+            Et(kt(i), "matchTimeout", void 0);
+            Et(kt(i), "currentMatchOptions", void 0);
+            Et(kt(i), "availableMatchOptions", void 0);
+            Et(kt(i), "optionSelection", void 0);
+            Et(kt(i), "resetMatches", (function() {
                 i.matchCharacter = null;
                 i.currentMatchOptions = [];
                 if (i.matchTimeout) {
                     clearTimeout(i.matchTimeout);
                 }
             }));
-            Et(xt(i), "handleSelectAll", (function(e) {
+            Et(kt(i), "handleSelectAll", (function(e) {
                 var t, n, o;
                 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
@@ -1255,7 +1256,7 @@
                     reason: "selectAll"
                 });
             }));
-            Et(xt(i), "handleClearAll", (function(e) {
+            Et(kt(i), "handleClearAll", (function(e) {
                 var t, n, o;
                 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
@@ -1281,7 +1282,7 @@
                     reason: "clearAll"
                 });
             }));
-            Et(xt(i), "handleTextKeyDown", (function(e) {
+            Et(kt(i), "handleTextKeyDown", (function(e) {
                 var t = i.props, r = t.children, o = t.onScrollBottom, a = t.tabConfirmsNewValue;
                 var l = (0, R.keycode)(e.nativeEvent);
                 if (l === "tab") {
@@ -1337,7 +1338,7 @@
                     }
                 }
             }));
-            Et(xt(i), "handleMenuOptionClick", (function(e, t) {
+            Et(kt(i), "handleMenuOptionClick", (function(e, t) {
                 var n = t.value;
                 e.preventDefault();
                 if (!i.state.open) {
@@ -1345,7 +1346,7 @@
                 }
                 i.toggleValue(e, n);
             }));
-            Et(xt(i), "handleMenuOptionKeyDown", (function(e, t) {
+            Et(kt(i), "handleMenuOptionKeyDown", (function(e, t) {
                 var n = e.nativeEvent.key;
  // Checking for a single character to avoid complications from double-byte languages and emojis.
                                 if (n.length === 1) {
@@ -1390,7 +1391,7 @@
                     e.stopPropagation();
                 }
             }));
-            Et(xt(i), "handleTextChange", (function(e, t) {
+            Et(kt(i), "handleTextChange", (function(e, t) {
                 var n, r;
                 var o = t.value;
                 i.setState({
@@ -1402,17 +1403,17 @@
                     keyword: o
                 });
             }));
-            Et(xt(i), "handleTextFocus", (function() {
+            Et(kt(i), "handleTextFocus", (function() {
                 i.setState({
                     textHasFocus: true
                 });
             }));
-            Et(xt(i), "handleTextBlur", (function() {
+            Et(kt(i), "handleTextBlur", (function() {
                 i.setState({
                     textHasFocus: false
                 });
             }));
-            Et(xt(i), "handleRequestOpen", (function(e) {
+            Et(kt(i), "handleRequestOpen", (function(e) {
                 var t = {
                     open: true,
                     topValues: i.getTopValues()
@@ -1441,7 +1442,7 @@
                     }
                 }));
             }));
-            Et(xt(i), "handleRequestClose", (function() {
+            Et(kt(i), "handleRequestClose", (function() {
                 i.setState({
                     open: false,
                     activeIndex: 0
@@ -1451,18 +1452,18 @@
                     (e = (t = i.props).onClose) === null || e === void 0 ? void 0 : e.call(t);
                 }));
             }));
-            Et(xt(i), "handleScrollBottom", (function(e) {
+            Et(kt(i), "handleScrollBottom", (function(e) {
                 if (i.state.open && !i.props.isLoadingOptions) {
                     var t, n;
                     (t = (n = i.props).onScrollBottom) === null || t === void 0 ? void 0 : t.call(n, e);
                 }
             }));
-            Et(xt(i), "handleActiveOptionMount", (function(e) {
+            Et(kt(i), "handleActiveOptionMount", (function(e) {
                 if (i.previousActiveIndex !== i.state.activeIndex) {
                     e === null || e === void 0 ? void 0 : e.scrollIntoViewIfNeeded();
                 }
             }));
-            Et(xt(i), "handleOptionMount", (function(e, t, n) {
+            Et(kt(i), "handleOptionMount", (function(e, t, n) {
                 if (n) {
                     i.firstSelectedEnabledOption = e;
                 }
@@ -1472,9 +1473,9 @@
                     i.optionRefsByKey[t] = e;
                 }
             }));
-            Et(xt(i), "createToggle", (function() {
+            Et(kt(i), "createToggle", (function() {
                 var e;
-                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, k = t.suffixLabel;
+                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;
                 var C;
                 var _;
  // Generate buttonLabels
@@ -1505,7 +1506,7 @@
                     _ = i.wrapLabel({
                         prefixLabel: S,
                         label: _,
-                        suffixLabel: k
+                        suffixLabel: x
                     });
                 }
  // single <Select> behaviour is to show the placeholder if all parts of the the label
@@ -1522,21 +1523,20 @@
                     M = i.wrapLabel({
                         prefixLabel: S,
                         label: [ "".concat(A.length, " items selected") ],
-                        suffixLabel: k
+                        suffixLabel: x
                     });
                 }
                 var T = jt({
                     "aria-describedby": u,
                     "aria-label": "".concat(m ? "".concat(m, ", ") : "").concat(M),
                     "aria-labelledby": m ? undefined : b,
-                    "aria-multiselectable": y || undefined,
                     "aria-required": w,
                     "data-select-appearance": l,
                     "data-test": y ? "multiselect" : "select",
                     disabled: p,
                     elementRef: d,
                     error: v
-                }, x()(i.props, O()(o.propTypes)));
+                }, k()(i.props, O()(o.propTypes)));
                 if (y) {
                     T["data-test-values"] = JSON.stringify(A);
                 } else {
@@ -1569,7 +1569,7 @@
                     "data-role": "count"
                 }, "(", A.length, ")"));
             }));
-            Et(xt(i), "createChildren", (function() {
+            Et(kt(i), "createChildren", (function() {
                 var e = i.state, t = e.filterKeyword, o = e.textHasFocus, a = e.topValues;
                 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();
@@ -1582,8 +1582,8 @@
                 var S = 0;
                 var w = false;
  // used to avoid overwriting the selected item ref in multiple mode
-                                var k;
-                var x = b === "immediately" ? i.getTopValues() : a;
+                                var x;
+                var k = b === "immediately" ? i.getTopValues() : a;
                 var C = n.Children.toArray(i.props.children).reduce((function(e, t, o) {
                     // ignore Headings and Dividers
                     if (!Dt(t)) {
@@ -1595,7 +1595,7 @@
                         O = true;
                     }
                     var a = g && g.indexOf(t.props.value) >= 0;
-                    var l = !!a && !t.props.disabled && !k;
+                    var l = !!a && !t.props.disabled && !x;
                     var c = s && !d && !p && !m && !y;
                     var u = qt(t.props.value, t.props.label);
                     var f = -1;
@@ -1621,9 +1621,9 @@
                         }
                     });
                     if (l) {
-                        k = true;
+                        x = true;
                     }
-                    if (x && x.indexOf(t.props.value) >= 0) {
+                    if (k && k.indexOf(t.props.value) >= 0) {
                         if (S === 0) {
                             e.splice(S, 0,  r().createElement(T.Divider, {
                                 key: "topDivider"
@@ -1647,8 +1647,8 @@
                             if (e === i.state.filterKeyword) {
                                 O = true;
                             }
-                            var n = x && x.indexOf(e) >= 0;
-                            var o = x.length;
+                            var n = k && k.indexOf(e) >= 0;
+                            var o = k.length;
                             if (S === 0) {
                                 C.splice(0, 0,  r().createElement(T.Divider, {
                                     key: "topDivider"
@@ -1759,7 +1759,7 @@
                     if (i.state.activeIndex === 0 && o) {
                         i.activeValue = "selectAll";
                     }
-                    C.unshift( r().createElement($e, {
+                    C.unshift( r().createElement(He, {
                         key: "selectAllOption",
                         selected: i.optionSelection === "all" || i.optionSelection !== "none" && "some",
                         selectAllLabel: P,
@@ -1782,7 +1782,7 @@
                 }), []);
                 return C;
             }));
-            Et(xt(i), "wrapLabel", (function(e) {
+            Et(kt(i), "wrapLabel", (function(e) {
                 var t = e.prefixLabel, n = e.label, r = e.suffixLabel;
                 var o = n;
                 if (t) {
@@ -1793,7 +1793,7 @@
                 }
                 return o;
             }));
-            Et(xt(i), "handleDropdownMount", (function(e) {
+            Et(kt(i), "handleDropdownMount", (function(e) {
                 i.dropdown = e;
             }));
             i.state = {
@@ -1819,6 +1819,7 @@
             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;
         }
@@ -1947,8 +1948,9 @@
                     placeholder: (0, c._)("filter"),
                     role: "combobox",
                     "aria-expanded": "true",
+                    "aria-controls": this.menuListboxId,
                     "aria-label": (0, c._)("Filter"),
-                    "aria-activedescendant": this.activeItemId,
+                    "aria-activedescendant": this.state.textHasFocus && n ? this.activeItemId : undefined,
                     inputRef: s,
                     inputId: l,
                     canClear: true,
@@ -1991,7 +1993,8 @@
                         onScrollBottom: o.props.onScrollBottom ? o.handleScrollBottom : undefined,
                         "data-test": "results-menu",
                         isLoading: o.props.isLoadingOptions,
-                        id: o.menuId
+                        id: o.menuId,
+                        menuId: o.menuListboxId
                     }, I()(o.props, "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll")), {}, {
                         style: l,
                         tabIndex: c
@@ -2065,7 +2068,7 @@
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function $t(e, t) {
+    function Ht(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || false;
@@ -2074,9 +2077,9 @@
             Object.defineProperty(e, r.key, r);
         }
     }
-    function Ht(e, t, n) {
-        if (t) $t(e.prototype, t);
-        if (n) $t(e, n);
+    function $t(e, t, n) {
+        if (t) Ht(e.prototype, t);
+        if (n) Ht(e, n);
         return e;
     }
     function zt(e, t) {
@@ -2203,7 +2206,7 @@
             }));
             return e;
         }
-        Ht(n, [ {
+        $t(n, [ {
             key: "scrollIntoViewIfNeeded",
             value: function e() {
                 var t;
@@ -2416,6 +2419,8 @@
         prefixLabel: i().string,
         prepend: i().bool,
         suffixLabel: i().string,
+        /** @private. */
+        toggle: i().node,
         value: i().oneOfType([ i().string, i().number, i().bool ]),
         /** @private. */
         virtualization: i().number

package/SidePanel.js

@@ -364,7 +364,7 @@
             value: function e() {
                 var t = this.props, r = t.open, o = t.onRequestClose, i = t.useLayerForClickAway;
                 var a = this.state.panelAnimating;
-                var l = i ? "interactive" : "visible";
+                var l = i ? "interactive" : "hidden";
                 
                 return n().createElement(f(), {
                     childrenInAnimation: a,

package/StepBar.js

@@ -118,7 +118,7 @@
             prisma: (0, c.css)([ "color:", ";&::before{color:", ";background:", ";border:1px solid ", ";}" ], m.variables.contentColorActive, m.variables.contentColorInverted, m.variables.contentColorActive, m.variables.contentColorActive)
         },
         next: {
-            enterprise: (0, c.css)([ "color:", ";" ], m.variables.textDisabledColor),
+            enterprise: (0, c.css)([ "color:", ";" ], m.variables.textColor),
             prisma: (0, c.css)([ "color:", ";&::before{color:", ";border:1px solid ", ";}" ], m.variables.contentColorMuted, m.variables.contentColorMuted, m.variables.contentColorMuted)
         },
         prev: {