@splunk/react-ui 4.28.2 → 4.30.0

package/RadioBar.js

@@ -79,10 +79,10 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
     const s = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const f = require("@splunk/themes");
+    const d = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const d = require("@splunk/react-ui/Button");
-    var p =  e.n(d);
+    const f = require("@splunk/react-ui/Button");
+    var p =  e.n(f);
     // CONCATENATED MODULE: external "styled-components"
     const v = require("styled-components");
     var b =  e.n(v);
@@ -93,22 +93,22 @@
     var g = b()(h()).withConfig({
         displayName: "OptionStyles__StyledClickable",
         componentId: "fyq77p-0"
-    })([ "border-radius:3px;flex:1 1 auto;display:flex;justify-content:center;align-items:center;color:", ";padding:2px 12px;height:calc(", " - 6px);position:relative;gap:", ";& + &{margin-left:2px;}", " ", " &:focus{color:", ";box-shadow:", ";z-index:2;&:active{background-color:", ";}}", " ", "" ], f.variables.contentColorDefault, f.variables.inputHeight, f.variables.spacingXSmall, (function(e) {
+    })([ "border-radius:3px;flex:1 1 auto;display:flex;justify-content:center;align-items:center;color:", ";padding:2px 12px;height:calc(", " - 6px);position:relative;gap:", ";& + &{margin-left:2px;}", " ", " &:focus{color:", ";box-shadow:", ";z-index:2;&:active{background-color:", ";}}", " ", "" ], d.variables.contentColorDefault, d.variables.inputHeight, d.variables.spacingXSmall, (function(e) {
         var r = e.$selected;
-        return r && (0, v.css)([ "color:", ";background-color:", ";box-shadow:", ";" ], f.variables.contentColorActive, (0, 
-        f.pick)({
-            dark: f.variables.interactiveColorOverlaySelected,
-            light: f.variables.white
-        }), f.variables.embossShadow);
+        return r && (0, v.css)([ "color:", ";background-color:", ";box-shadow:", ";" ], d.variables.contentColorActive, (0, 
+        d.pick)({
+            dark: d.variables.interactiveColorOverlaySelected,
+            light: d.variables.white
+        }), d.variables.embossShadow);
     }), (function(e) {
         var r = e.$selected, t = e.disabled;
-        return r && t && (0, v.css)([ "background-color:", ";" ], f.variables.backgroundColorPage);
-    }), f.variables.contentColorActive, f.variables.focusShadow, f.variables.interactiveColorOverlayActive, (function(e) {
+        return r && t && (0, v.css)([ "background-color:", ";" ], d.variables.backgroundColorPage);
+    }), d.variables.contentColorActive, d.variables.focusShadow, d.variables.interactiveColorOverlayActive, (function(e) {
         var r = e.$selected, t = e.disabled;
-        return !r && !t && (0, v.css)([ "&:hover{color:", ";background-color:", ";}&:active{background-color:", ";}" ], f.variables.contentColorActive, f.variables.interactiveColorOverlayHover, f.variables.interactiveColorOverlayActive);
+        return !r && !t && (0, v.css)([ "&:hover{color:", ";background-color:", ";}&:active{background-color:", ";}" ], d.variables.contentColorActive, d.variables.interactiveColorOverlayHover, d.variables.interactiveColorOverlayActive);
     }), (function(e) {
         var r = e.disabled;
-        return r && (0, v.css)([ "color:", ";" ], f.variables.contentColorDisabled);
+        return r && (0, v.css)([ "color:", ";" ], d.variables.contentColorDisabled);
     }));
     var m = b().div.withConfig({
         displayName: "OptionStyles__StyledIcon",
@@ -117,14 +117,14 @@
     var O = b().div.withConfig({
         displayName: "OptionStyles__StyledLabel",
         componentId: "fyq77p-2"
-    })([ "", " flex:0 1 auto;", "" ], f.mixins.ellipsis, (0, f.pick)({
-        enterprise: (0, v.css)([ "&:not(:first-child){margin-left:", ";}" ], f.variables.spacingXSmall)
+    })([ "", " flex:0 1 auto;", "" ], d.mixins.ellipsis, (0, d.pick)({
+        enterprise: (0, v.css)([ "&:not(:first-child){margin-left:", ";}" ], d.variables.spacingXSmall)
     }));
     var x = b().div.withConfig({
         displayName: "OptionStyles__StyledAdornment",
         componentId: "fyq77p-3"
-    })([ "flex:0 0 auto;", "" ], (0, f.pick)({
-        enterprise: (0, v.css)([ "&:not(:first-child){margin-left:", ";}" ], f.variables.spacingXSmall)
+    })([ "flex:0 0 auto;", "" ], (0, d.pick)({
+        enterprise: (0, v.css)([ "&:not(:first-child){margin-left:", ";}" ], d.variables.spacingXSmall)
     }));
     // CONCATENATED MODULE: ./src/RadioBar/RadioBarContext.tsx
     var k =  (0, t.createContext)({});
@@ -173,12 +173,16 @@
         return t;
     }
     var P = {
+        /** @private Set by `RadioBar`. */
+        append: l().bool,
         disabled: l().bool,
         startAdornment: l().node,
         endAdornment: l().node,
         icon: l().node,
         label: l().string,
         /** @private Set by `RadioBar`. */
+        prepend: l().bool,
+        /** @private Set by `RadioBar`. */
         selected: l().bool,
         /** The value of the `Option`. */
         value: l().any.isRequired
@@ -186,7 +190,7 @@
     function E(e) {
         var r = e.disabled, a = e.icon, l = e.label, o = e.selected, i = e.startAdornment, u = e.endAdornment, c = e.value, s = S(e, [ "disabled", "icon", "label", "selected", "startAdornment", "endAdornment", "value" ]);
         // @docs-props-type OptionPropsBase
-                var f = (0, t.useContext)(w), d = f.onClick, v = f.appearance, b = f.error, y = f.onKeyDown, h = f.firstValue, k = f.selectedValue;
+                var d = (0, t.useContext)(w), f = d.onClick, v = d.appearance, b = d.error, y = d.onKeyDown, h = d.firstValue, k = d.selectedValue;
         if (false) {}
         var j = -1;
         if (k) {
@@ -204,7 +208,7 @@
                 "data-test-value": c
             }, s, {
                 onClick: o ? undefined : function(e) {
-                    return d === null || d === void 0 ? void 0 : d(e, {
+                    return f === null || f === void 0 ? void 0 : f(e, {
                         value: c,
                         label: l
                     });
@@ -234,7 +238,7 @@
             error: b
         }, s, {
             onClick: o ? undefined : function(e) {
-                return d === null || d === void 0 ? void 0 : d(e, {
+                return f === null || f === void 0 ? void 0 : f(e, {
                     value: c,
                     label: l
                 });
@@ -259,18 +263,18 @@
     var D = b()(q()).withConfig({
         displayName: "RadioBarStyles__StyledRadioBar",
         componentId: "gg1b79-0"
-    })([ "height:", ";", " [data-inline] + &{margin-left:", ";}" ], f.variables.inputHeight, (0, 
-    f.pick)({
-        prisma: (0, v.css)([ "padding:2px;border-radius:", ";border:1px solid ", ";background:", ";" ], f.variables.borderRadius, (function(e) {
+    })([ "height:", ";", " [data-inline] + &{margin-left:", ";}" ], d.variables.inputHeight, (0, 
+    d.pick)({
+        prisma: (0, v.css)([ "padding:2px;border-radius:", ";border:1px solid ", ";background:", ";" ], d.variables.borderRadius, (function(e) {
             var r = e.$error;
-            return r ? f.variables.accentColorNegative : "transparent";
+            return r ? d.variables.accentColorNegative : "transparent";
         }), (function(e) {
             var r = e.$disabled;
-            return r ? f.variables.interactiveColorBackgroundDisabled : f.variables.interactiveColorBackground;
+            return r ? d.variables.interactiveColorBackgroundDisabled : d.variables.interactiveColorBackground;
         }))
-    }), (0, f.pick)({
-        enterprise: f.variables.spacingHalf,
-        prisma: f.variables.spacingSmall
+    }), (0, d.pick)({
+        enterprise: d.variables.spacingHalf,
+        prisma: d.variables.spacingSmall
     }));
     // CONCATENATED MODULE: ./src/RadioBar/RadioBar.tsx
     function R(e) {
@@ -496,8 +500,8 @@
                 var c = t.filteredValues.indexOf(n);
                 if (l === "down" || l === "right") {
                     e.preventDefault();
-                    var f = t.getNextTarget("forward", o, c), d = f.nextTargetRes, p = f.nextIndexRes;
-                    i = d;
+                    var d = t.getNextTarget("forward", o, c), f = d.nextTargetRes, p = d.nextIndexRes;
+                    i = f;
                     u = p;
                 } else if (l === "up" || l === "left") {
                     e.preventDefault();
@@ -561,13 +565,13 @@
                 var s = n + a;
                 while (u !== t && c === null) {
                     if (u === null) {
-                        var f;
-                        u = (f = t.parentElement) === null || f === void 0 ? void 0 : f[o];
+                        var d;
+                        u = (d = t.parentElement) === null || d === void 0 ? void 0 : d[o];
                         s = i;
                     }
                     if (u.disabled) {
-                        var d = u[l];
-                        u = d;
+                        var f = u[l];
+                        u = f;
                         s += a;
                     } else {
                         c = u;
@@ -582,10 +586,10 @@
             key: "render",
             value: function e() {
                 var r = this;
-                var a = this.props, l = a.appearance, o = a.children, i = a.describedBy, u = a.error, s = a.labelledBy, f = a.splunkTheme, d = a.value, p = a.required, v = A(a, [ "appearance", "children", "describedBy", "error", "labelledBy", "splunkTheme", "value", "required" ]);
+                var a = this.props, l = a.appearance, o = a.children, i = a.describedBy, u = a.error, s = a.labelledBy, d = a.splunkTheme, f = a.value, p = a.required, v = A(a, [ "appearance", "children", "describedBy", "error", "labelledBy", "splunkTheme", "value", "required" ]);
                 if (false) {}
-                var b = this.isControlled() ? d : this.state.value;
-                var y = f.isPrisma;
+                var b = this.isControlled() ? f : this.state.value;
+                var y = d.isPrisma;
                 var h = true;
                 this.filteredValues = [];
                 var g = t.Children.toArray(o).filter(t.isValidElement).map((function(e, n, a) {
@@ -603,7 +607,7 @@
                     });
                 }));
                 var m = this.filteredValues[0];
-                var O = d == null || this.filteredValues.includes(b);
+                var O = f == null || this.filteredValues.includes(b);
                 if (false) {}
                 var x = {
                     appearance: y ? "prisma" : l,
@@ -634,7 +638,7 @@
     J(Y, "propTypes", Q);
     J(Y, "defaultProps", W);
     J(Y, "Option", _);
-    var Z = (0, f.withSplunkTheme)(Y);
+    var Z = (0, d.withSplunkTheme)(Y);
     var ee = Z;
     ee.propTypes = Y.propTypes;
     ee.Option = _;

package/ResultsMenu.js

@@ -311,7 +311,8 @@
         onScrollBottom: i().func,
         /** @private */
         onUpKeyPress: i().func,
-        placement: i().string
+        placement: i().string,
+        menuId: i().string
     };
     var N = {
         animateLoading: false,
@@ -453,15 +454,15 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, i = t.animateLoading, u = t.children, l = t.controlledExternally, c = t.childrenStart, s = t.isLoading, d = t.loadingMessage, p = t.noOptionsMessage, y = t.onDownKeyPress, h = t.onEndKeyPress, b = t.onHomeKeyPress, g = t.onScrollBottom, S = t.onUpKeyPress, E = t.placement, j = t.style, k = t.tabIndex;
-                var R = f()(this.props, a()(o.propTypes));
+                var t = this.props, i = t.animateLoading, u = t.children, l = t.controlledExternally, c = t.childrenStart, s = t.isLoading, d = t.loadingMessage, p = t.noOptionsMessage, y = t.onDownKeyPress, h = t.onEndKeyPress, b = t.onHomeKeyPress, g = t.onScrollBottom, S = t.onUpKeyPress, E = t.placement, j = t.style, k = t.tabIndex, R = t.menuId, T = t["aria-multiselectable"];
+                var C = f()(this.props, a()(o.propTypes));
                 // Assumption: that you cannot be filtered if you are a result
-                                var T = r.Children.toArray(u).filter(r.isValidElement).some((function(e) {
+                                var A = r.Children.toArray(u).filter(r.isValidElement).some((function(e) {
                     var t = e.type;
                     return !(t === v.Divider && t.filterFirst || (t === v.Divider || t === v.Heading) && (t.filterLast || t.filterConsecutive));
                 }));
-                var C = this.checkFullHeight();
-                var A = z(this.state.scrollBottomTriggered ? this.state.numberOfItemsLoaded * this.itemMinHeight || 0 : 0);
+                var _ = this.checkFullHeight();
+                var K = z(this.state.scrollBottomTriggered ? this.state.numberOfItemsLoaded * this.itemMinHeight || 0 : 0);
                 /* eslint-disable jsx-a11y/aria-role */                
                 return n().createElement(O, I({
                     key: "wrapper",
@@ -469,7 +470,7 @@
                     onWheel: g ? this.handleWheelMenu : undefined,
                     onMouseEnter: g ? this.handleMouseEnter : undefined,
                     onMouseLeave: g ? this.handleMouseLeave : undefined
-                }, f()(R, "tabIndex"), {
+                }, f()(C, "tabIndex", "aria-multiselectable", "menuId"), {
                     style: j
                 }), E !== "above" && c, E === "above" && this.renderFooterMessage(),  n().createElement(v.MenuContext.Provider, {
                     value: U
@@ -483,16 +484,18 @@
                     onScroll: this.handleScroll,
                     onUpKeyPress: S,
                     stopScrollPropagation: true,
-                    tabIndex: k
-                }, !T && p && !s &&  n().createElement(m().Item, {
+                    tabIndex: k,
+                    "aria-multiselectable": T,
+                    id: R
+                }, !A && p && !s &&  n().createElement(m().Item, {
                     "data-test": "no-results-message",
                     disabled: true
-                }, p), u, g && !C && 
+                }, p), u, g && !_ && 
                 
                 // Bottom spacer fills in the space of new items being loaded by using the minimum possible height x menuItems.
                 n().createElement("div", {
                     "data-test": "results-menu-bottom-spacer",
-                    style: A
+                    style: K
                 }), s &&  n().createElement(M, null, i &&  n().createElement(P, null),  n().createElement(x, null, d)))), E !== "above" && this.renderFooterMessage(), E === "above" && c);
             }
         } ]);