@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.5

package/RadioBar.js

@@ -61,8 +61,8 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Option: () => /* reexport */ A,
-        default: () => /* reexport */ Q
+        Option: () => /* reexport */ B,
+        default: () => /* reexport */ G
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -71,8 +71,8 @@
     const o = require("prop-types");
     var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/omit"
-    const l = require("lodash/omit");
-    var i =  e.n(l);
+    const i = require("lodash/omit");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
     const u = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
@@ -88,30 +88,32 @@
     var p =  e.n(f);
     // CONCATENATED MODULE: ./src/RadioBar/OptionStyles.ts
     var y = 10;
-    var m = "2px";
-    var g = v()(p()).withConfig({
+    var m = v()(p()).withConfig({
         displayName: "OptionStyles__StyledButton",
         componentId: "fyq77p-0"
-    })([ "border:", " solid ", ";border-radius:0;height:", ";min-height:", ";min-width:0;padding:", " ", ";z-index:", ";&&{color:", ";}&:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}&:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:not(:last-child){margin-right:-", ";}&&:focus{background-color:", ";box-shadow:", ";color:", ";z-index:", ";border:0;span{padding:0 ", ";}}&:not([disabled],[aria-disabled='true']){", "}&[disabled],&[aria-disabled='true']{background-color:", ";color:", ";z-index:0;}" ], m, b.variables.borderColor, b.variables.inputHeight, b.variables.inputHeight, b.variables.spacingXSmall, b.variables.spacingSmall, y, b.variables.contentColorDefault, b.variables.borderRadius, b.variables.borderRadius, b.variables.borderRadius, b.variables.borderRadius, m, b.variables.actionColorBackgroundSecondaryActive, b.variables.focusShadowInset, b.variables.contentColorActive, y * 5, m, (0, 
+    })([ "border:", " solid ", ";border-radius:0;height:", ";min-height:", ";min-width:0;padding:", " ", ";z-index:", ";&&{color:", ";}&:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}&:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:not(:last-child){margin-right:-", ";}&&:focus{background-color:", ";box-shadow:", ";color:", ";z-index:", ";border:0;span{padding:0 ", ";}}&:not([disabled],[aria-disabled='true']){", "}&[disabled],&[aria-disabled='true']{background-color:", ";color:", ";z-index:0;}" ], b.variables.inputBorderWidth, b.variables.borderColor, b.variables.inputHeight, b.variables.inputHeight, b.variables.spacingXSmall, b.variables.spacingSmall, y, b.variables.contentColorDefault, b.variables.borderRadius, b.variables.borderRadius, b.variables.borderRadius, b.variables.borderRadius, b.variables.inputBorderWidth, b.variables.actionColorBackgroundSecondaryActive, b.variables.focusShadowInset, b.variables.contentColorActive, y * 5, b.variables.inputBorderWidth, (0, 
     b.pickVariant)("$optionSelected", {
-        true: (0, s.css)([ "background-color:", ";border-color:", ";border-width:", ";color:", ";z-index:", ";" ], b.variables.actionColorBackgroundSecondaryActive, b.variables.actionColorBorderSecondaryActive, m, b.variables.contentColorActive, y * 4),
+        true: (0, s.css)([ "", ";background-color:", ";border-color:", ";border-width:", ";z-index:", ";" ], b.mixins.typography({
+            weight: "bold",
+            color: "active"
+        }), b.variables.actionColorBackgroundSecondaryActive, b.variables.actionColorBorderSecondaryActive, b.variables.inputBorderWidth, y * 4),
         false: (0, s.css)([ "&:hover{background-color:", ";border-color:", ";color:", ";z-index:", ";}" ], b.variables.actionColorBackgroundSecondaryHover, b.variables.borderColor, b.variables.contentColorActive, y * 3)
     }), b.variables.actionColorBackgroundSecondaryDisabled, b.variables.contentColorDisabled);
-    var h = v().div.withConfig({
+    var g = v().div.withConfig({
         displayName: "OptionStyles__StyledLabel",
         componentId: "fyq77p-1"
     })([ "", " flex:0 1 auto;" ], b.mixins.ellipsis);
-    var O = v().div.withConfig({
+    var h = v().div.withConfig({
         displayName: "OptionStyles__StyledAdornment",
         componentId: "fyq77p-2"
     })([ "display:flex;" ]);
     // CONCATENATED MODULE: ./src/RadioBar/RadioBarContext.tsx
-    var S =  (0, t.createContext)({});
-    S.displayName = "RadioBar";
-    /* harmony default export */    const w = S;
+    var O =  (0, t.createContext)({});
+    O.displayName = "RadioBar";
+    /* harmony default export */    const S = O;
     // CONCATENATED MODULE: ./src/RadioBar/Option.tsx
-    function C() {
-        return C = Object.assign ? Object.assign.bind() : function(e) {
+    function w() {
+        return w = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -119,11 +121,11 @@
                 }
             }
             return e;
-        }, C.apply(null, arguments);
+        }, w.apply(null, arguments);
     }
-    function j(e, r) {
+    function C(e, r) {
         if (null == e) return {};
-        var t, n, o = k(e, r);
+        var t, n, o = j(e, r);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (n = 0; n < a.length; n++) {
@@ -132,7 +134,7 @@
         }
         return o;
     }
-    function k(e, r) {
+    function j(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -143,7 +145,7 @@
         }
         return t;
     }
-    var x = {
+    var k = {
         disabled: a().bool,
         startAdornment: a().node,
         endAdornment: a().node,
@@ -155,19 +157,19 @@
         /** The value of the `Option`. */
         value: a().any.isRequired
     };
-    function P(e) {
-        var r = e.disabled, o = e.label, a = e.selected, l = e.startAdornment, i = e.endAdornment, u = e.value, d = e.role, c = d === void 0 ? "radio" : d, s = j(e, [ "disabled", "label", "selected", "startAdornment", "endAdornment", "value", "role" ]);
+    function x(e) {
+        var r = e.disabled, o = e.label, a = e.selected, i = e.startAdornment, l = e.endAdornment, u = e.value, d = e.role, c = d === void 0 ? "radio" : d, s = C(e, [ "disabled", "label", "selected", "startAdornment", "endAdornment", "value", "role" ]);
         // @docs-props-type OptionPropsBase
-                var v = (0, t.useContext)(w), b = v.onClick, f = v.error, p = v.onKeyDown, y = v.firstValue, m = v.selectedValue;
-        var S = -1;
-        if (m) {
-            if (u === m) {
-                S = 0;
+                var v = (0, t.useContext)(S), b = v.onClick, f = v.error, p = v.onKeyDown, y = v.firstValue, O = v.selectedValue;
+        var j = -1;
+        if (O) {
+            if (u === O) {
+                j = 0;
             }
         } else if (u === y) {
-            S = 0;
+            j = 0;
         }
-        var k = S;
+        var k = j;
         var x = (0, t.useCallback)((function(e) {
             if (!a) {
                 b === null || b === void 0 ? void 0 : b(e, {
@@ -176,14 +178,14 @@
                 });
             }
         }), [ o, b, a, u ]);
-        var P = (0, t.useCallback)((function(e) {
+        var B = (0, t.useCallback)((function(e) {
             return p === null || p === void 0 ? void 0 : p(e, {
                 value: u,
                 label: o
             });
         }), [ o, p, u ]);
         
-        return n().createElement(g, C({
+        return n().createElement(m, w({
             "aria-invalid": f,
             "data-test": "option",
             "data-test-value": u,
@@ -196,33 +198,33 @@
             role: c,
             "aria-checked": a,
             tabIndex: k,
-            onKeyDown: P
-        }), l &&  n().createElement(O, null, l), o &&  n().createElement(h, null, o), i &&  n().createElement(O, null, i));
+            onKeyDown: B
+        }), i &&  n().createElement(h, null, i), o &&  n().createElement(g, null, o), l &&  n().createElement(h, null, l));
     }
-    P.propTypes = x;
-    /* harmony default export */    const A = P;
+    x.propTypes = k;
+    /* harmony default export */    const B = x;
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const B = require("@splunk/react-ui/Box");
-    var E =  e.n(B);
+    const P = require("@splunk/react-ui/Box");
+    var A =  e.n(P);
     // CONCATENATED MODULE: ./src/RadioBar/RadioBarStyles.ts
-    var q = v()(E()).withConfig({
+    var E = v()(A()).withConfig({
         displayName: "RadioBarStyles__StyledRadioBar",
         componentId: "gg1b79-0"
     })([ "height:", ";", "" ], b.variables.inputHeight, (function(e) {
         var r = e.$error;
-        return r && (0, s.css)([ "& > ", "{border-color:", ";:not([disabled],[aria-disabled='true']){&:hover{border-color:", ";}&[aria-checked='true']{background-color:", ";border-color:", ";}}}" ], g, b.variables.actionColorBorderDestructiveSecondary, b.variables.actionColorBorderDestructiveSecondary, b.variables.actionColorBackgroundDestructiveSecondaryActive, b.variables.actionColorBorderDestructiveSecondaryActive);
+        return r && (0, s.css)([ "& > ", "{border-color:", ";:not([disabled],[aria-disabled='true']){&:hover{border-color:", ";}&[aria-checked='true']{background-color:", ";border-color:", ";}}}" ], m, b.variables.actionColorBorderDestructiveSecondary, b.variables.actionColorBorderDestructiveSecondary, b.variables.actionColorBackgroundDestructiveSecondaryActive, b.variables.actionColorBorderDestructiveSecondaryActive);
     }));
     // CONCATENATED MODULE: ./src/RadioBar/RadioBar.tsx
-    function D(e) {
+    function R(e) {
         "@babel/helpers - typeof";
-        return D = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return R = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, D(e);
+        }, R(e);
     }
-    function R() {
-        return R = Object.assign ? Object.assign.bind() : function(e) {
+    function q() {
+        return q = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -230,9 +232,9 @@
                 }
             }
             return e;
-        }, R.apply(null, arguments);
+        }, q.apply(null, arguments);
     }
-    function I(e, r) {
+    function D(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -242,87 +244,87 @@
         }
         return t;
     }
-    function _(e) {
+    function I(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? I(Object(t), !0).forEach((function(r) {
-                T(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : I(Object(t)).forEach((function(r) {
+            r % 2 ? D(Object(t), !0).forEach((function(r) {
+                _(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : D(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
         return e;
     }
-    function T(e, r, t) {
-        return (r = V(r)) in e ? Object.defineProperty(e, r, {
+    function _(e, r, t) {
+        return (r = T(r)) in e ? Object.defineProperty(e, r, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[r] = t, e;
     }
-    function V(e) {
-        var r = M(e, "string");
-        return "symbol" == D(r) ? r : r + "";
+    function T(e) {
+        var r = V(e, "string");
+        return "symbol" == R(r) ? r : r + "";
     }
-    function M(e, r) {
-        if ("object" != D(e) || !e) return e;
+    function V(e, r) {
+        if ("object" != R(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var n = t.call(e, r || "default");
-            if ("object" != D(n)) return n;
+            if ("object" != R(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === r ? String : Number)(e);
     }
-    function N(e, r) {
-        return F(e) || K(e, r) || z(e, r) || $();
+    function M(e, r) {
+        return W(e) || H(e, r) || $(e, r) || N();
     }
-    function $() {
+    function N() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function z(e, r) {
+    function $(e, r) {
         if (e) {
-            if ("string" == typeof e) return H(e, r);
+            if ("string" == typeof e) return z(e, r);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? H(e, r) : void 0;
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? z(e, r) : void 0;
         }
     }
-    function H(e, r) {
+    function z(e, r) {
         (null == r || r > e.length) && (r = e.length);
         for (var t = 0, n = Array(r); t < r; t++) {
             n[t] = e[t];
         }
         return n;
     }
-    function K(e, r) {
+    function H(e, r) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
-            var n, o, a, l, i = [], u = !0, d = !1;
+            var n, o, a, i, l = [], u = !0, d = !1;
             try {
                 if (a = (t = t.call(e)).next, 0 === r) {
                     if (Object(t) !== t) return;
                     u = !1;
-                } else for (;!(u = (n = a.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
+                } else for (;!(u = (n = a.call(t)).done) && (l.push(n.value), l.length !== r); u = !0) {
                 }
             } catch (e) {
                 d = !0, o = e;
             } finally {
                 try {
-                    if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
+                    if (!u && null != t["return"] && (i = t["return"](), Object(i) !== i)) return;
                 } finally {
                     if (d) throw o;
                 }
             }
-            return i;
+            return l;
         }
     }
-    function F(e) {
+    function W(e) {
         if (Array.isArray(e)) return e;
     }
-    function L(e, r) {
+    function K(e, r) {
         if (null == e) return {};
-        var t, n, o = U(e, r);
+        var t, n, o = F(e, r);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (n = 0; n < a.length; n++) {
@@ -331,7 +333,7 @@
         }
         return o;
     }
-    function U(e, r) {
+    function F(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -342,7 +344,7 @@
         }
         return t;
     }
-    /** @public */    var X = {
+    /** @public */    var L = {
         children: a().node,
         defaultValue: a().any,
         describedBy: a().string,
@@ -358,22 +360,22 @@
         value: a().any
     };
     // TODO(SUI-7012): Once converted to a functional component, this function can be removed and RadioBar should use useRovingFocus hook
-        var G = function e(r, t, n, o) {
+        var U = function e(r, t, n, o) {
         var a = r === "forward" ? 1 : -1;
-        var l = r === "forward" ? "nextSibling" : "previousSibling";
-        var i = r === "forward" ? "firstElementChild" : "lastElementChild";
+        var i = r === "forward" ? "nextSibling" : "previousSibling";
+        var l = r === "forward" ? "firstElementChild" : "lastElementChild";
         var u = r === "forward" ? 0 : t - 1;
-        var d = n[l];
+        var d = n[i];
         var c = null;
         var s = o + a;
         while (d !== n && c === null) {
             if (d === null) {
                 var v;
-                d = (v = n.parentElement) === null || v === void 0 ? void 0 : v[i];
+                d = (v = n.parentElement) === null || v === void 0 ? void 0 : v[l];
                 s = u;
             }
             if (d.disabled) {
-                var b = d[l];
+                var b = d[i];
                 d = b;
                 s += a;
             } else {
@@ -387,17 +389,17 @@
     };
     /**
  * RadioBar is a form control that provides the ability to select one option out of a group.
- */    function J(e) {
-        var r = e.children, o = e.defaultValue, a = e.describedBy, l = e.error, d = e.labelledBy, s = e.name, v = e.onChange, b = e.required, f = e.role, p = f === void 0 ? "radiogroup" : f, y = e.value, m = L(e, [ "children", "defaultValue", "describedBy", "error", "labelledBy", "name", "onChange", "required", "role", "value" ]);
+ */    function X(e) {
+        var r = e.children, o = e.defaultValue, a = e.describedBy, i = e.elementRef, d = e.error, s = e.labelledBy, v = e.name, b = e.onChange, f = e.required, p = e.role, y = p === void 0 ? "radiogroup" : p, m = e.value, g = K(e, [ "children", "defaultValue", "describedBy", "elementRef", "error", "labelledBy", "name", "onChange", "required", "role", "value" ]);
         // @docs-props-type RadioBarPropsBase
-                var g = c()({
+                var h = c()({
             componentName: "RadioBar",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0]
         });
-        var h = (0, t.useState)(o), O = N(h, 2), S = O[0], C = O[1];
-        var j = g ? y : S;
-        var k = (0, t.useMemo)((function() {
+        var O = (0, t.useState)(o), w = M(O, 2), C = w[0], j = w[1];
+        var k = h ? m : C;
+        var x = (0, t.useMemo)((function() {
             // Everything in here is grouped because together they are based on children changing
             var e = t.Children.toArray(r).filter(t.isValidElement);
             var n = e.map((function(e) {
@@ -410,9 +412,9 @@
             var a = e.map((function(e, r) {
                 
                 return (0, t.cloneElement)(e, {
-                    selected: e.props.value === j,
+                    selected: e.props.value === k,
                     key: e.key || r,
-                    role: p === "radiogroup" ? "radio" : "menuitemradio"
+                    role: y === "radiogroup" ? "radio" : "menuitemradio"
                 });
             }));
             return {
@@ -420,81 +422,82 @@
                 disabled: o,
                 filteredValues: n
             };
-        }), [ r, p, j ]), x = k.childrenFormatted, P = k.disabled, A = k.filteredValues;
-        var B = A[0];
-        var E = (0, t.useMemo)((function() {
-            return y == null || A.includes(j);
-        }), [ A, j, y ]);
+        }), [ r, y, k ]), B = x.childrenFormatted, P = x.disabled, A = x.filteredValues;
+        var R = A[0];
+        var D = (0, t.useMemo)((function() {
+            return m == null || A.includes(k);
+        }), [ A, k, m ]);
         (0, t.useEffect)((function() {
             if (false) {}
-        }), [ A, j, E ]);
-        var D = (0, t.useCallback)((function(e, r) {
-            if (y !== r.value) {
-                v === null || v === void 0 ? void 0 : v(e, _({
-                    name: s
+        }), [ A, k, D ]);
+        var _ = (0, t.useCallback)((function(e, r) {
+            if (m !== r.value) {
+                b === null || b === void 0 ? void 0 : b(e, I({
+                    name: v
                 }, r));
-                if (!g) {
-                    C(r.value);
+                if (!h) {
+                    j(r.value);
                 }
             }
-        }), [ g, s, v, y ]);
-        var I = (0, t.useCallback)((function(e, r) {
+        }), [ h, v, b, m ]);
+        var T = (0, t.useCallback)((function(e, r) {
             var t = r.value, n = r.label;
             var o = (0, u.keycode)(e.nativeEvent);
             var a = e.currentTarget;
-            var l = null;
-            var i = 0;
+            var i = null;
+            var l = 0;
             var d = A.indexOf(t);
             if (o === "down" || o === "right") {
                 e.preventDefault();
-                var c = G("forward", A.length, a, d), s = c.nextTargetRes, v = c.nextIndexRes;
-                l = s;
-                i = v;
+                var c = U("forward", A.length, a, d), s = c.nextTargetRes, v = c.nextIndexRes;
+                i = s;
+                l = v;
             } else if (o === "up" || o === "left") {
                 e.preventDefault();
-                var b = G("backward", A.length, a, d), f = b.nextTargetRes, p = b.nextIndexRes;
-                l = f;
-                i = p;
+                var b = U("backward", A.length, a, d), f = b.nextTargetRes, p = b.nextIndexRes;
+                i = f;
+                l = p;
             }
-            if (l) {
+            if (i) {
                 var y;
-                (y = l) === null || y === void 0 ? void 0 : y.focus();
-                var m = A[i];
-                D(e, {
+                (y = i) === null || y === void 0 ? void 0 : y.focus();
+                var m = A[l];
+                _(e, {
                     value: m,
                     label: n
                 });
             }
-        }), [ A, D ]);
-        var T = (0, t.useMemo)((function() {
+        }), [ A, _ ]);
+        var V = (0, t.useMemo)((function() {
             return {
-                error: l,
-                firstValue: B,
-                onClick: D,
-                onKeyDown: I,
-                selectedValue: E ? j : undefined
+                error: d,
+                firstValue: R,
+                onClick: _,
+                onKeyDown: T,
+                selectedValue: D ? k : undefined
             };
-        }), [ l, B, D, I, E, j ]);
+        }), [ d, R, _, T, D, k ]);
         
-        return n().createElement(q, R({
+        return n().createElement(E, q({
             flex: true,
             $disabled: P,
-            $error: l,
+            $error: d,
+            elementRef: i,
             "data-test": "radio-bar",
-            "data-test-value": j,
-            role: p,
-            "aria-labelledby": d,
+            "data-test-value": k,
+            role: y,
+            "aria-labelledby": s,
             "aria-describedby": a,
             "aria-disabled": P || undefined,
-            "aria-required": b,
-            "aria-invalid": p === "radiogroup" ? l : undefined
-        }, i()(m, "onChange")),  n().createElement(w.Provider, {
-            value: T
-        }, x));
+            "aria-required": f,
+            "aria-invalid": y === "radiogroup" ? d : undefined
+        }, l()(g, "onChange")),  n().createElement(S.Provider, {
+            value: V
+        }, B));
     }
-    J.Option = A;
-    J.propTypes = X;
-    /* harmony default export */    const Q = J;
+    X.Option = B;
+    X.propTypes = L;
+    /* harmony default export */    const G = X;
     // only for styled components using RadioBar
         // CONCATENATED MODULE: ./src/RadioBar/index.ts
     module.exports = r;