@splunk/react-ui 4.33.0 → 4.35.0

package/RadioBar.js

@@ -69,10 +69,10 @@
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
-    var l =  e.n(a);
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "lodash/has"
-    const o = require("lodash/has");
-    var i =  e.n(o);
+    const l = require("lodash/has");
+    var i =  e.n(l);
     // CONCATENATED MODULE: external "lodash/omit"
     const u = require("lodash/omit");
     var c =  e.n(u);
@@ -127,9 +127,9 @@
         enterprise: (0, v.css)([ "&:not(:first-child){margin-left:", ";}" ], d.variables.spacingXSmall)
     }));
     // CONCATENATED MODULE: ./src/RadioBar/RadioBarContext.tsx
-    var k =  (0, t.createContext)({});
-    k.displayName = "RadioBar";
-    /* harmony default export */    const w = k;
+    var w =  (0, t.createContext)({});
+    w.displayName = "RadioBar";
+    /* harmony default export */    const k = w;
     // CONCATENATED MODULE: ./src/RadioBar/Option.tsx
     function C() {
         C = Object.assign || function(e) {
@@ -150,9 +150,9 @@
         var t = j(e, r);
         var n, a;
         if (Object.getOwnPropertySymbols) {
-            var l = Object.getOwnPropertySymbols(e);
-            for (a = 0; a < l.length; a++) {
-                n = l[a];
+            var o = Object.getOwnPropertySymbols(e);
+            for (a = 0; a < o.length; a++) {
+                n = o[a];
                 if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 t[n] = e[n];
@@ -164,9 +164,9 @@
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
-        var a, l;
-        for (l = 0; l < n.length; l++) {
-            a = n[l];
+        var a, o;
+        for (o = 0; o < n.length; o++) {
+            a = n[o];
             if (r.indexOf(a) >= 0) continue;
             t[a] = e[a];
         }
@@ -174,85 +174,87 @@
     }
     var P = {
         /** @private Set by `RadioBar`. */
-        append: l().bool,
-        disabled: l().bool,
-        startAdornment: l().node,
-        endAdornment: l().node,
-        icon: l().node,
-        label: l().string,
+        append: o().bool,
+        disabled: o().bool,
+        startAdornment: o().node,
+        endAdornment: o().node,
+        icon: o().node,
+        label: o().string,
         /** @private Set by `RadioBar`. */
-        prepend: l().bool,
+        prepend: o().bool,
         /** @private Set by `RadioBar`. */
-        selected: l().bool,
+        role: o().oneOf([ "radio", "menuitemradio" ]),
+        /** @private Set by `Radiobar`. */
+        selected: o().bool,
         /** The value of the `Option`. */
-        value: l().any.isRequired
+        value: o().any.isRequired
     };
     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" ]);
+        var r = e.disabled, a = e.icon, o = e.label, l = e.selected, i = e.startAdornment, u = e.endAdornment, c = e.value, s = e.role, d = s === void 0 ? "radio" : s, f = S(e, [ "disabled", "icon", "label", "selected", "startAdornment", "endAdornment", "value", "role" ]);
         // @docs-props-type OptionPropsBase
-                var d = (0, t.useContext)(w), f = d.onClick, v = d.appearance, b = d.error, y = d.onKeyDown, h = d.firstValue, k = d.selectedValue;
+                var v = (0, t.useContext)(k), b = v.onClick, y = v.appearance, h = v.error, w = v.onKeyDown, j = v.firstValue, P = v.selectedValue;
         if (false) {}
-        var j = -1;
-        if (k) {
-            if (c === k) {
-                j = 0;
+        var E = -1;
+        if (P) {
+            if (c === P) {
+                E = 0;
             }
-        } else if (c === h) {
-            j = 0;
+        } else if (c === j) {
+            E = 0;
         }
-        var P = j;
-        if (v === "prisma") {
+        var _ = E;
+        if (y === "prisma") {
             
             return n().createElement(g, C({
                 "data-test": "option",
                 "data-test-value": c
-            }, s, {
-                onClick: o ? undefined : function(e) {
-                    return f === null || f === void 0 ? void 0 : f(e, {
+            }, f, {
+                onClick: l ? undefined : function(e) {
+                    return b === null || b === void 0 ? void 0 : b(e, {
                         value: c,
-                        label: l
+                        label: o
                     });
                 },
-                role: "radio",
-                "aria-checked": o,
-                $selected: o,
-                tabIndex: P,
+                role: d,
+                "aria-checked": l,
+                $selected: l,
+                tabIndex: _,
                 disabled: r,
                 onKeyDown: function e(r) {
-                    return y === null || y === void 0 ? void 0 : y(r, {
+                    return w === null || w === void 0 ? void 0 : w(r, {
                         value: c,
-                        label: l
+                        label: o
                     });
                 }
-            }), a &&  n().createElement(m, null, a), i &&  n().createElement(x, null, i), l &&  n().createElement(O, null, l), u &&  n().createElement(x, null, u));
+            }), a &&  n().createElement(m, null, a), i &&  n().createElement(x, null, i), o &&  n().createElement(O, null, o), u &&  n().createElement(x, null, u));
         }
         
         return n().createElement(p(), C({
             "data-test": "option",
             "data-test-value": c,
-            appearance: v,
+            appearance: y,
             disabled: r,
             icon: a,
-            selected: o,
+            selected: l,
             value: c,
-            error: b
-        }, s, {
-            onClick: o ? undefined : function(e) {
-                return f === null || f === void 0 ? void 0 : f(e, {
+            error: h
+        }, f, {
+            onClick: l ? undefined : function(e) {
+                return b === null || b === void 0 ? void 0 : b(e, {
                     value: c,
-                    label: l
+                    label: o
                 });
             },
-            role: "radio",
-            "aria-checked": o,
-            tabIndex: P,
+            role: d,
+            "aria-checked": l,
+            tabIndex: _,
             onKeyDown: function e(r) {
-                return y === null || y === void 0 ? void 0 : y(r, {
+                return w === null || w === void 0 ? void 0 : w(r, {
                     value: c,
-                    label: l
+                    label: o
                 });
             }
-        }), i &&  n().createElement(x, null, i), l &&  n().createElement(O, null, l), u &&  n().createElement(x, null, u));
+        }), i &&  n().createElement(x, null, i), o &&  n().createElement(O, null, o), u &&  n().createElement(x, null, u));
     }
     E.propTypes = P;
     /* harmony default export */    const _ = E;
@@ -272,10 +274,7 @@
             var r = e.$disabled;
             return r ? d.variables.interactiveColorBackgroundDisabled : d.variables.interactiveColorBackground;
         }))
-    }), (0, d.pick)({
-        enterprise: d.variables.spacingHalf,
-        prisma: d.variables.spacingSmall
-    }));
+    }), d.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/RadioBar/RadioBar.tsx
     function R(e) {
         "@babel/helpers - typeof";
@@ -309,9 +308,9 @@
         var t = B(e, r);
         var n, a;
         if (Object.getOwnPropertySymbols) {
-            var l = Object.getOwnPropertySymbols(e);
-            for (a = 0; a < l.length; a++) {
-                n = l[a];
+            var o = Object.getOwnPropertySymbols(e);
+            for (a = 0; a < o.length; a++) {
+                n = o[a];
                 if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 t[n] = e[n];
@@ -323,9 +322,9 @@
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
-        var a, l;
-        for (l = 0; l < n.length; l++) {
-            a = n[l];
+        var a, o;
+        for (o = 0; o < n.length; o++) {
+            a = n[o];
             if (r.indexOf(a) >= 0) continue;
             t[a] = e[a];
         }
@@ -403,8 +402,8 @@
         return function t() {
             var n = G(e), a;
             if (r) {
-                var l = G(this).constructor;
-                a = Reflect.construct(n, arguments, l);
+                var o = G(this).constructor;
+                a = Reflect.construct(n, arguments, o);
             } else {
                 a = n.apply(this, arguments);
             }
@@ -454,26 +453,28 @@
         return e;
     }
     /** @public */    var Q = {
-        appearance: l().oneOf([ "default", "pill" ]),
-        children: l().node,
-        defaultValue: l().any,
-        describedBy: l().string,
-        elementRef: l().oneOfType([ l().func, l().object ]),
-        error: l().bool,
-        inline: l().bool,
-        labelledBy: l().string,
-        name: l().string,
-        onChange: l().func,
+        appearance: o().oneOf([ "default", "pill" ]),
+        children: o().node,
+        defaultValue: o().any,
+        describedBy: o().string,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        error: o().bool,
+        inline: o().bool,
+        labelledBy: o().string,
+        name: o().string,
+        onChange: o().func,
         /** @private. */
-        required: l().bool,
+        required: o().bool,
+        role: o().oneOf([ "radiogroup", "menubar" ]),
         /** @private */
-        splunkTheme: l().object,
-        value: l().any
+        splunkTheme: o().object,
+        value: o().any
     };
     var W = {
         appearance: "default",
         error: false,
-        inline: false
+        inline: false,
+        role: "radiogroup"
     };
     /**
  * RadioBar is a form control that provides the ability to select one option out of a group.
@@ -493,19 +494,19 @@
             }));
             J(U(t), "handleOnKeyDown", (function(e, r) {
                 var n = r.value, a = r.label;
-                var l = (0, s.keycode)(e.nativeEvent);
-                var o = e.currentTarget;
+                var o = (0, s.keycode)(e.nativeEvent);
+                var l = e.currentTarget;
                 var i = null;
                 var u = 0;
                 var c = t.filteredValues.indexOf(n);
-                if (l === "down" || l === "right") {
+                if (o === "down" || o === "right") {
                     e.preventDefault();
-                    var d = t.getNextTarget("forward", o, c), f = d.nextTargetRes, p = d.nextIndexRes;
+                    var d = t.getNextTarget("forward", l, c), f = d.nextTargetRes, p = d.nextIndexRes;
                     i = f;
                     u = p;
-                } else if (l === "up" || l === "left") {
+                } else if (o === "up" || o === "left") {
                     e.preventDefault();
-                    var v = t.getNextTarget("backward", o, c), b = v.nextTargetRes, y = v.nextIndexRes;
+                    var v = t.getNextTarget("backward", l, c), b = v.nextTargetRes, y = v.nextIndexRes;
                     i = b;
                     u = y;
                 }
@@ -557,20 +558,20 @@
             key: "getNextTarget",
             value: function e(r, t, n) {
                 var a = r === "forward" ? 1 : -1;
-                var l = r === "forward" ? "nextSibling" : "previousSibling";
-                var o = r === "forward" ? "firstElementChild" : "lastElementChild";
+                var o = r === "forward" ? "nextSibling" : "previousSibling";
+                var l = r === "forward" ? "firstElementChild" : "lastElementChild";
                 var i = r === "forward" ? 0 : this.filteredValues.length - 1;
-                var u = t[l];
+                var u = t[o];
                 var c = null;
                 var s = n + a;
                 while (u !== t && c === null) {
                     if (u === null) {
                         var d;
-                        u = (d = t.parentElement) === null || d === void 0 ? void 0 : d[o];
+                        u = (d = t.parentElement) === null || d === void 0 ? void 0 : d[l];
                         s = i;
                     }
                     if (u.disabled) {
-                        var f = u[l];
+                        var f = u[o];
                         u = f;
                         s += a;
                     } else {
@@ -586,51 +587,52 @@
             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, d = a.splunkTheme, f = a.value, p = a.required, v = A(a, [ "appearance", "children", "describedBy", "error", "labelledBy", "splunkTheme", "value", "required" ]);
+                var a = this.props, o = a.appearance, l = a.children, i = a.describedBy, u = a.error, s = a.labelledBy, d = a.splunkTheme, f = a.value, p = a.required, v = a.role, b = A(a, [ "appearance", "children", "describedBy", "error", "labelledBy", "splunkTheme", "value", "required", "role" ]);
                 if (false) {}
-                var b = this.isControlled() ? f : this.state.value;
-                var y = d.isPrisma;
-                var h = true;
+                var y = this.isControlled() ? f : this.state.value;
+                var h = d.isPrisma;
+                var g = true;
                 this.filteredValues = [];
-                var g = t.Children.toArray(o).filter(t.isValidElement).map((function(e, n, a) {
-                    var l = a.length;
+                var m = t.Children.toArray(l).filter(t.isValidElement).map((function(e, n, a) {
+                    var o = a.length;
                     r.filteredValues.push(e.props.value);
                     if (e.props && !e.props.disabled) {
-                        h = false;
+                        g = false;
                     }
                     
                     return (0, t.cloneElement)(e, {
-                        selected: e.props.value === b,
+                        selected: e.props.value === y,
                         key: e.key || n,
-                        append: n < l - 1,
-                        prepend: n > 0
+                        append: n < o - 1,
+                        prepend: n > 0,
+                        role: v === "radiogroup" ? "radio" : "menuitemradio"
                     });
                 }));
-                var m = this.filteredValues[0];
-                var O = f == null || this.filteredValues.includes(b);
+                var O = this.filteredValues[0];
+                var x = f == null || this.filteredValues.includes(y);
                 if (false) {}
-                var x = {
-                    appearance: y ? "prisma" : l,
+                var w = {
+                    appearance: h ? "prisma" : o,
                     onClick: this.handleClick,
-                    error: y ? false : u,
+                    error: h ? false : u,
                     onKeyDown: this.handleOnKeyDown,
-                    firstValue: m,
-                    selectedValue: O ? b : undefined
+                    firstValue: O,
+                    selectedValue: x ? y : undefined
                 };
                 
                 return n().createElement(D, V({
                     flex: true,
-                    $disabled: h,
+                    $disabled: g,
                     $error: u,
                     "data-test": "radio-bar",
-                    "data-test-value": b,
-                    role: "radiogroup",
+                    "data-test-value": y,
+                    role: v,
                     "aria-labelledby": s,
                     "aria-describedby": i,
                     "aria-required": p
-                }, c()(v, "onChange")),  n().createElement(w.Provider, {
-                    value: x
-                }, g));
+                }, c()(b, "onChange")),  n().createElement(k.Provider, {
+                    value: w
+                }, m));
             }
         } ]);
         return a;

package/RadioList.js

@@ -98,18 +98,21 @@
     var f = b().label.withConfig({
         displayName: "OptionStyles__StyledLabel",
         componentId: "imaqjt-1"
-    })([ "", ";", ";position:relative;flex:1 1 auto;padding-left:", ";margin-left:", ";cursor:pointer;&::before,&::after{display:block;content:'';position:absolute;border-radius:50%;}&::before{box-sizing:border-box;top:0;border:", ";", "}&::after{opacity:0;width:8px;height:8px;", " background-color:", ";}", " ", "" ], p.mixins.reset("block"), (0, 
+    })([ "", ";", ";position:relative;flex:1 1 auto;padding-left:", ";margin-left:", ";cursor:pointer;&::before,&::after{display:block;content:'';position:absolute;border-radius:50%;}&::before{box-sizing:border-box;top:0;border-color:", ";border-style:solid;border-width:", ";", "}&::after{opacity:0;width:8px;height:8px;", " background-color:", ";}", " ", "" ], p.mixins.reset("block"), (0, 
     p.pick)({
         prisma: (0, u.css)([ "color:", ";" ], p.variables.contentColorActive)
     }), (0, p.pick)({
         prisma: "10px",
-        enterprise: p.variables.spacingQuarter
+        enterprise: p.variables.spacingXSmall
     }), (0, p.pick)({
         prisma: "20px",
         enterprise: "18px"
     }), (0, p.pick)({
-        prisma: (0, u.css)([ "2px solid ", "" ], p.variables.contentColorMuted),
-        enterprise: (0, u.css)([ "1px solid ", "" ], p.variables.gray80)
+        prisma: p.variables.contentColorMuted,
+        enterprise: p.variables.gray80
+    }), (0, p.pick)({
+        prisma: "2px",
+        enterprise: "1px"
     }), (0, p.pick)({
         prisma: (0, u.css)([ "width:20px;height:20px;left:-20px;" ]),
         enterprise: (0, u.css)([ "width:18px;height:18px;left:-18px;" ])
@@ -127,7 +130,7 @@
             enterprise: (0, u.css)([ "font-size:", ";" ], p.variables.fontSizeSmall)
         }
     }), (0, p.pick)({
-        prisma: (0, u.css)([ "&:hover{&::before{box-shadow:", ";border-color:", ";background-color:", ";}" ], p.variables.hoverShadow, p.variables.contentColorDefault, p.mixins.overlayColors(p.variables.backgroundColorPage, p.variables.interactiveColorOverlayHover))
+        prisma: (0, u.css)([ "&:hover{&::before{box-shadow:", ";border-color:", ";background-color:", ";}}" ], p.variables.hoverShadow, p.variables.contentColorDefault, p.mixins.overlayColors(p.variables.backgroundColorPage, p.variables.interactiveColorOverlayHover))
     }));
     var y = b().input.withConfig({
         displayName: "OptionStyles__StyledRadioInput",