@splunk/react-ui 4.34.0 → 4.36.0

package/RadioBar.js

@@ -61,8 +61,8 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Option: () => /* reexport */ _,
-        default: () => /* reexport */ re
+        Option: () => /* reexport */ P,
+        default: () => /* reexport */ Z
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -75,64 +75,53 @@
     var i =  e.n(l);
     // CONCATENATED MODULE: external "lodash/omit"
     const u = require("lodash/omit");
-    var c =  e.n(u);
+    var s =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const s = require("@splunk/ui-utils/keyboard");
+    const c = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const d = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const f = require("@splunk/react-ui/Button");
-    var p =  e.n(f);
+    const f = require("@splunk/themes");
     // CONCATENATED MODULE: external "styled-components"
-    const v = require("styled-components");
+    const d = require("styled-components");
+    var p =  e.n(d);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Button"
+    const v = require("@splunk/react-ui/Button");
     var b =  e.n(v);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const y = require("@splunk/react-ui/Clickable");
-    var h =  e.n(y);
     // CONCATENATED MODULE: ./src/RadioBar/OptionStyles.ts
-    var g = b()(h()).withConfig({
-        displayName: "OptionStyles__StyledClickable",
+    var y = p()(b()).withConfig({
+        displayName: "OptionStyles__StyledButton",
         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:", ";}}", " ", "" ], 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:", ";" ], 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:", ";" ], 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:", ";}" ], d.variables.contentColorActive, d.variables.interactiveColorOverlayHover, d.variables.interactiveColorOverlayActive);
-    }), (function(e) {
-        var r = e.disabled;
-        return r && (0, v.css)([ "color:", ";" ], d.variables.contentColorDisabled);
+    })([ "", "" ], (0, f.pick)({
+        prisma: (0, d.css)([ "border-radius:3px;font-weight:initial;height:calc(", " - 6px);min-height:calc(", " - 6px);padding:2px 12px;> span{gap:", ";}& + &{margin-left:2px;}", " &:not([disabled],[aria-disabled='true']){", "}" ], f.variables.inputHeight, f.variables.inputHeight, f.variables.spacingXSmall, (function(e) {
+            var r = e.selected;
+            return r && (0, d.css)([ "box-shadow:", ";&[disabled],&[aria-disabled='true']{background-color:", ";}" ], f.variables.embossShadow, f.variables.backgroundColorPage);
+        }), (function(e) {
+            var r = e.selected;
+            return !r && (0, d.css)([ "color:", ";" ], f.variables.contentColorDefault);
+        }))
     }));
-    var m = b().div.withConfig({
-        displayName: "OptionStyles__StyledIcon",
+    var h = p().div.withConfig({
+        displayName: "OptionStyles__StyledPrismaIconWrapper",
         componentId: "fyq77p-1"
     })([ "flex:0 0 auto;margin-top:-2px;font-size:15px;" ]);
-    var O = b().div.withConfig({
+    var g = p().div.withConfig({
         displayName: "OptionStyles__StyledLabel",
         componentId: "fyq77p-2"
-    })([ "", " flex:0 1 auto;", "" ], d.mixins.ellipsis, (0, d.pick)({
-        enterprise: (0, v.css)([ "&:not(:first-child){margin-left:", ";}" ], d.variables.spacingXSmall)
+    })([ "", " flex:0 1 auto;", "" ], f.mixins.ellipsis, (0, f.pick)({
+        enterprise: (0, d.css)([ "&:not(:first-child){margin-left:", ";}" ], f.variables.spacingXSmall)
     }));
-    var x = b().div.withConfig({
+    var m = p().div.withConfig({
         displayName: "OptionStyles__StyledAdornment",
         componentId: "fyq77p-3"
-    })([ "flex:0 0 auto;", "" ], (0, d.pick)({
-        enterprise: (0, v.css)([ "&:not(:first-child){margin-left:", ";}" ], d.variables.spacingXSmall)
+    })([ "flex:0 0 auto;", "" ], (0, f.pick)({
+        enterprise: (0, d.css)([ "&:not(:first-child){margin-left:", ";}" ], f.variables.spacingXSmall)
     }));
     // CONCATENATED MODULE: ./src/RadioBar/RadioBarContext.tsx
-    var w =  (0, t.createContext)({});
-    w.displayName = "RadioBar";
-    /* harmony default export */    const k = w;
+    var O =  (0, t.createContext)({});
+    O.displayName = "RadioBar";
+    /* harmony default export */    const w = O;
     // CONCATENATED MODULE: ./src/RadioBar/Option.tsx
-    function C() {
-        C = Object.assign || function(e) {
+    function x() {
+        x = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -143,7 +132,7 @@
             }
             return e;
         };
-        return C.apply(this, arguments);
+        return x.apply(this, arguments);
     }
     function S(e, r) {
         if (e == null) return {};
@@ -172,7 +161,7 @@
         }
         return t;
     }
-    var P = {
+    var k = {
         /** @private Set by `RadioBar`. */
         append: o().bool,
         disabled: o().bool,
@@ -189,108 +178,84 @@
         /** The value of the `Option`. */
         value: o().any.isRequired
     };
-    function E(e) {
-        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" ]);
+    function C(e) {
+        var r = e.disabled, a = e.icon, o = e.label, l = e.selected, i = e.startAdornment, u = e.endAdornment, s = e.value, c = e.role, d = c === void 0 ? "radio" : c, p = S(e, [ "disabled", "icon", "label", "selected", "startAdornment", "endAdornment", "value", "role" ]);
         // @docs-props-type OptionPropsBase
-                var v = (0, t.useContext)(k), b = v.onClick, y = v.appearance, h = v.error, w = v.onKeyDown, j = v.firstValue, P = v.selectedValue;
+                var v = (0, t.useContext)(w), b = v.onClick, O = v.appearance, j = v.error, k = v.onKeyDown, C = v.firstValue, P = v.selectedValue;
+        var E = (0, f.useSplunkTheme)(), _ = E.isPrisma;
         if (false) {}
-        var E = -1;
+        var T = -1;
         if (P) {
-            if (c === P) {
-                E = 0;
+            if (s === P) {
+                T = 0;
             }
-        } else if (c === j) {
-            E = 0;
-        }
-        var _ = E;
-        if (y === "prisma") {
-            
-            return n().createElement(g, C({
-                "data-test": "option",
-                "data-test-value": c
-            }, f, {
-                onClick: l ? undefined : function(e) {
-                    return b === null || b === void 0 ? void 0 : b(e, {
-                        value: c,
-                        label: o
-                    });
-                },
-                role: d,
-                "aria-checked": l,
-                $selected: l,
-                tabIndex: _,
-                disabled: r,
-                onKeyDown: function e(r) {
-                    return w === null || w === void 0 ? void 0 : w(r, {
-                        value: c,
-                        label: o
-                    });
-                }
-            }), a &&  n().createElement(m, null, a), i &&  n().createElement(x, null, i), o &&  n().createElement(O, null, o), u &&  n().createElement(x, null, u));
+        } else if (s === C) {
+            T = 0;
         }
+        var q = T;
         
-        return n().createElement(p(), C({
+        return n().createElement(y, x({
             "data-test": "option",
-            "data-test-value": c,
-            appearance: y,
+            "data-test-value": s,
+            appearance: O,
             disabled: r,
-            icon: a,
-            selected: l,
-            value: c,
-            error: h
-        }, f, {
+            icon: !_ ? a : null,
+            selected: l || false,
+            value: s,
+            error: j
+        }, p, {
             onClick: l ? undefined : function(e) {
                 return b === null || b === void 0 ? void 0 : b(e, {
-                    value: c,
+                    value: s,
                     label: o
                 });
             },
             role: d,
             "aria-checked": l,
-            tabIndex: _,
+            tabIndex: q,
             onKeyDown: function e(r) {
-                return w === null || w === void 0 ? void 0 : w(r, {
-                    value: c,
+                return k === null || k === void 0 ? void 0 : k(r, {
+                    value: s,
                     label: o
                 });
             }
-        }), i &&  n().createElement(x, null, i), o &&  n().createElement(O, null, o), u &&  n().createElement(x, null, u));
+        }), _ && a &&  n().createElement(h, null, a), i &&  n().createElement(m, null, i), o &&  n().createElement(g, null, o), u &&  n().createElement(m, null, u));
     }
-    E.propTypes = P;
-    /* harmony default export */    const _ = E;
+    C.propTypes = k;
+    /* harmony default export */    const P = C;
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const T = require("@splunk/react-ui/Box");
-    var q =  e.n(T);
+    const E = require("@splunk/react-ui/Box");
+    var _ =  e.n(E);
     // CONCATENATED MODULE: ./src/RadioBar/RadioBarStyles.ts
-    var D = b()(q()).withConfig({
+    var T = p()(_()).withConfig({
         displayName: "RadioBarStyles__StyledRadioBar",
         componentId: "gg1b79-0"
-    })([ "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) {
+    })([ "height:", ";", " [data-inline] + &{margin-left:", ";}" ], f.variables.inputHeight, (0, 
+    f.pick)({
+        prisma: (0, d.css)([ "padding:2px;border-radius:", ";border:1px solid ", ";background:", ";" ], f.variables.borderRadius, (function(e) {
             var r = e.$error;
-            return r ? d.variables.accentColorNegative : "transparent";
+            return r ? f.variables.accentColorNegative : "transparent";
         }), (function(e) {
             var r = e.$disabled;
-            return r ? d.variables.interactiveColorBackgroundDisabled : d.variables.interactiveColorBackground;
+            return r ? f.variables.interactiveColorBackgroundDisabled : f.variables.interactiveColorBackground;
         }))
-    }), d.variables.spacingSmall);
+    }), f.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/RadioBar/RadioBar.tsx
-    function R(e) {
+    function q(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            R = function e(r) {
+            q = function e(r) {
                 return typeof r;
             };
         } else {
-            R = function e(r) {
+            q = function e(r) {
                 return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
             };
         }
-        return R(e);
+        return q(e);
     }
-    function V() {
-        V = Object.assign || function(e) {
+    function R() {
+        R = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -301,11 +266,11 @@
             }
             return e;
         };
-        return V.apply(this, arguments);
+        return R.apply(this, arguments);
     }
-    function A(e, r) {
+    function D(e, r) {
         if (e == null) return {};
-        var t = B(e, r);
+        var t = V(e, r);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -318,7 +283,7 @@
         }
         return t;
     }
-    function B(e, r) {
+    function V(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
@@ -330,7 +295,7 @@
         }
         return t;
     }
-    function I(e, r) {
+    function B(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -341,29 +306,29 @@
         }
         return t;
     }
-    function N(e) {
+    function I(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = arguments[r] != null ? arguments[r] : {};
             if (r % 2) {
-                I(Object(t), true).forEach((function(r) {
-                    J(e, r, t[r]);
+                B(Object(t), true).forEach((function(r) {
+                    W(e, r, t[r]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
                 Object.defineProperties(e, Object.getOwnPropertyDescriptors(t));
             } else {
-                I(Object(t)).forEach((function(r) {
+                B(Object(t)).forEach((function(r) {
                     Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
                 }));
             }
         }
         return e;
     }
-    function $(e, r) {
+    function N(e, r) {
         if (!(e instanceof r)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function K(e, r) {
+    function A(e, r) {
         for (var t = 0; t < r.length; t++) {
             var n = r[t];
             n.enumerable = n.enumerable || false;
@@ -372,12 +337,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function H(e, r, t) {
-        if (r) K(e.prototype, r);
-        if (t) K(e, t);
+    function K(e, r, t) {
+        if (r) A(e.prototype, r);
+        if (t) A(e, t);
         return e;
     }
-    function M(e, r) {
+    function $(e, r) {
         if (typeof r !== "function" && r !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -388,41 +353,41 @@
                 configurable: true
             }
         });
-        if (r) X(e, r);
+        if (r) H(e, r);
     }
-    function X(e, r) {
-        X = Object.setPrototypeOf || function e(r, t) {
+    function H(e, r) {
+        H = Object.setPrototypeOf || function e(r, t) {
             r.__proto__ = t;
             return r;
         };
-        return X(e, r);
+        return H(e, r);
     }
-    function z(e) {
-        var r = F();
+    function M(e) {
+        var r = L();
         return function t() {
-            var n = G(e), a;
+            var n = U(e), a;
             if (r) {
-                var o = G(this).constructor;
+                var o = U(this).constructor;
                 a = Reflect.construct(n, arguments, o);
             } else {
                 a = n.apply(this, arguments);
             }
-            return L(this, a);
+            return X(this, a);
         };
     }
-    function L(e, r) {
-        if (r && (R(r) === "object" || typeof r === "function")) {
+    function X(e, r) {
+        if (r && (q(r) === "object" || typeof r === "function")) {
             return r;
         }
-        return U(e);
+        return z(e);
     }
-    function U(e) {
+    function z(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function F() {
+    function L() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -433,13 +398,13 @@
             return false;
         }
     }
-    function G(e) {
-        G = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
+    function U(e) {
+        U = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
             return r.__proto__ || Object.getPrototypeOf(r);
         };
-        return G(e);
+        return U(e);
     }
-    function J(e, r, t) {
+    function W(e, r, t) {
         if (r in e) {
             Object.defineProperty(e, r, {
                 value: t,
@@ -452,7 +417,7 @@
         }
         return e;
     }
-    /** @public */    var Q = {
+    /** @public */    var F = {
         appearance: o().oneOf([ "default", "pill" ]),
         children: o().node,
         defaultValue: o().any,
@@ -470,7 +435,7 @@
         splunkTheme: o().object,
         value: o().any
     };
-    var W = {
+    var G = {
         appearance: "default",
         error: false,
         inline: false,
@@ -478,35 +443,35 @@
     };
     /**
  * RadioBar is a form control that provides the ability to select one option out of a group.
- */    var Y =  function(e) {
-        M(a, e);
-        var r = z(a);
+ */    var J =  function(e) {
+        $(a, e);
+        var r = M(a);
         // @docs-props-type RadioBarPropsBase
         // eslint-disable-line @typescript-eslint/no-explicit-any
                 function a(e) {
             var t;
-            $(this, a);
+            N(this, a);
             t = r.call(this, e);
-            J(U(t), "controlledExternally", void 0);
-            J(U(t), "filteredValues", []);
-            J(U(t), "handleClick", (function(e, r) {
+            W(z(t), "controlledExternally", void 0);
+            W(z(t), "filteredValues", []);
+            W(z(t), "handleClick", (function(e, r) {
                 t.handleOnChange(e, r);
             }));
-            J(U(t), "handleOnKeyDown", (function(e, r) {
+            W(z(t), "handleOnKeyDown", (function(e, r) {
                 var n = r.value, a = r.label;
-                var o = (0, s.keycode)(e.nativeEvent);
+                var o = (0, c.keycode)(e.nativeEvent);
                 var l = e.currentTarget;
                 var i = null;
                 var u = 0;
-                var c = t.filteredValues.indexOf(n);
+                var s = t.filteredValues.indexOf(n);
                 if (o === "down" || o === "right") {
                     e.preventDefault();
-                    var d = t.getNextTarget("forward", l, c), f = d.nextTargetRes, p = d.nextIndexRes;
-                    i = f;
+                    var f = t.getNextTarget("forward", l, s), d = f.nextTargetRes, p = f.nextIndexRes;
+                    i = d;
                     u = p;
                 } else if (o === "up" || o === "left") {
                     e.preventDefault();
-                    var v = t.getNextTarget("backward", l, c), b = v.nextTargetRes, y = v.nextIndexRes;
+                    var v = t.getNextTarget("backward", l, s), b = v.nextTargetRes, y = v.nextIndexRes;
                     i = b;
                     u = y;
                 }
@@ -520,10 +485,10 @@
                     });
                 }
             }));
-            J(U(t), "handleOnChange", (function(e, r) {
+            W(z(t), "handleOnChange", (function(e, r) {
                 if (t.props.value !== r.value) {
                     var n, a;
-                    (n = (a = t.props).onChange) === null || n === void 0 ? void 0 : n.call(a, e, N({
+                    (n = (a = t.props).onChange) === null || n === void 0 ? void 0 : n.call(a, e, I({
                         name: t.props.name
                     }, r));
                     if (!t.isControlled()) {
@@ -542,7 +507,7 @@
             if (false) {}
             return t;
         }
-        H(a, [ {
+        K(a, [ {
             key: "componentDidUpdate",
             value: function e(r) {
                 if (false) {}
@@ -562,35 +527,35 @@
                 var l = r === "forward" ? "firstElementChild" : "lastElementChild";
                 var i = r === "forward" ? 0 : this.filteredValues.length - 1;
                 var u = t[o];
-                var c = null;
-                var s = n + a;
-                while (u !== t && c === null) {
+                var s = null;
+                var c = n + a;
+                while (u !== t && s === null) {
                     if (u === null) {
-                        var d;
-                        u = (d = t.parentElement) === null || d === void 0 ? void 0 : d[l];
-                        s = i;
+                        var f;
+                        u = (f = t.parentElement) === null || f === void 0 ? void 0 : f[l];
+                        c = i;
                     }
                     if (u.disabled) {
-                        var f = u[o];
-                        u = f;
-                        s += a;
+                        var d = u[o];
+                        u = d;
+                        c += a;
                     } else {
-                        c = u;
+                        s = u;
                     }
                 }
                 return {
-                    nextTargetRes: c,
-                    nextIndexRes: s
+                    nextTargetRes: s,
+                    nextIndexRes: c
                 };
             }
         }, {
             key: "render",
             value: function e() {
                 var r = this;
-                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" ]);
+                var a = this.props, o = a.appearance, l = a.children, i = a.describedBy, u = a.error, c = a.labelledBy, f = a.splunkTheme, d = a.value, p = a.required, v = a.role, b = D(a, [ "appearance", "children", "describedBy", "error", "labelledBy", "splunkTheme", "value", "required", "role" ]);
                 if (false) {}
-                var y = this.isControlled() ? f : this.state.value;
-                var h = d.isPrisma;
+                var y = this.isControlled() ? d : this.state.value;
+                var h = f.isEnterprise;
                 var g = true;
                 this.filteredValues = [];
                 var m = t.Children.toArray(l).filter(t.isValidElement).map((function(e, n, a) {
@@ -609,42 +574,43 @@
                     });
                 }));
                 var O = this.filteredValues[0];
-                var x = f == null || this.filteredValues.includes(y);
+                var x = d == null || this.filteredValues.includes(y);
                 if (false) {}
-                var w = {
-                    appearance: h ? "prisma" : o,
+                var S = h && o === "default" ? "default" : "subtle";
+                var j = {
+                    appearance: S,
                     onClick: this.handleClick,
-                    error: h ? false : u,
+                    error: h ? u : false,
                     onKeyDown: this.handleOnKeyDown,
                     firstValue: O,
                     selectedValue: x ? y : undefined
                 };
                 
-                return n().createElement(D, V({
+                return n().createElement(T, R({
                     flex: true,
                     $disabled: g,
                     $error: u,
                     "data-test": "radio-bar",
                     "data-test-value": y,
                     role: v,
-                    "aria-labelledby": s,
+                    "aria-labelledby": c,
                     "aria-describedby": i,
                     "aria-required": p
-                }, c()(b, "onChange")),  n().createElement(k.Provider, {
-                    value: w
+                }, s()(b, "onChange")),  n().createElement(w.Provider, {
+                    value: j
                 }, m));
             }
         } ]);
         return a;
     }(t.Component);
-    J(Y, "propTypes", Q);
-    J(Y, "defaultProps", W);
-    J(Y, "Option", _);
-    var Z = (0, d.withSplunkTheme)(Y);
-    var ee = Z;
-    ee.propTypes = Y.propTypes;
-    ee.Option = _;
-    /* harmony default export */    const re = ee;
+    W(J, "propTypes", F);
+    W(J, "defaultProps", G);
+    W(J, "Option", P);
+    var Q = (0, f.withSplunkTheme)(J);
+    var Y = Q;
+    Y.propTypes = J.propTypes;
+    Y.Option = P;
+    /* harmony default export */    const Z = Y;
     // only for styled components using RadioBar
         // CONCATENATED MODULE: ./src/RadioBar/index.ts
     module.exports = r;