@splunk/react-ui 4.21.1 → 4.22.0

package/RadioBar.js

@@ -90,7 +90,7 @@
     const y = require("@splunk/react-ui/Clickable");
     var h =  e.n(y);
     // CONCATENATED MODULE: ./src/RadioBar/OptionStyles.ts
-    var m = b()(h()).withConfig({
+    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) {
@@ -110,7 +110,7 @@
         var r = e.disabled;
         return r && (0, v.css)([ "color:", ";" ], f.variables.contentColorDisabled);
     }));
-    var g = b().div.withConfig({
+    var m = b().div.withConfig({
         displayName: "OptionStyles__StyledIcon",
         componentId: "fyq77p-1"
     })([ "flex:0 0 auto;margin-top:-2px;font-size:15px;" ]);
@@ -120,19 +120,19 @@
     })([ "", " flex:0 1 auto;", "" ], f.mixins.ellipsis, (0, f.pick)({
         enterprise: (0, v.css)([ "&:not(:first-child){margin-left:", ";}" ], f.variables.spacingXSmall)
     }));
-    var k = b().div.withConfig({
+    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)
     }));
     // CONCATENATED MODULE: ./src/RadioBar/RadioBarContext.tsx
-    var C =  (0, t.createContext)({});
-    C.displayName = "RadioBar";
-    /* harmony default export */    const S = C;
+    var k =  (0, t.createContext)({});
+    k.displayName = "RadioBar";
+    /* harmony default export */    const w = k;
     // CONCATENATED MODULE: ./src/RadioBar/Option.tsx
-    function w() {
-        w = Object.assign || function(e) {
+    function C() {
+        C = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -143,11 +143,11 @@
             }
             return e;
         };
-        return w.apply(this, arguments);
+        return C.apply(this, arguments);
     }
-    function j(e, r) {
+    function S(e, r) {
         if (e == null) return {};
-        var t = x(e, r);
+        var t = j(e, r);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
@@ -160,7 +160,7 @@
         }
         return t;
     }
-    function x(e, r) {
+    function j(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
@@ -184,22 +184,22 @@
         value: l().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 = j(e, [ "disabled", "icon", "label", "selected", "startAdornment", "endAdornment", "value" ]);
+        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)(S), d = f.onClick, v = f.appearance, b = f.error, y = f.onKeyDown, h = f.firstValue, C = f.selectedValue;
+                var f = (0, t.useContext)(w), d = f.onClick, v = f.appearance, b = f.error, y = f.onKeyDown, h = f.firstValue, k = f.selectedValue;
         if (false) {}
-        var x = -1;
-        if (C) {
-            if (c === C) {
-                x = 0;
+        var j = -1;
+        if (k) {
+            if (c === k) {
+                j = 0;
             }
         } else if (c === h) {
-            x = 0;
+            j = 0;
         }
-        var P = x;
+        var P = j;
         if (v === "prisma") {
             
-            return n().createElement(m, w({
+            return n().createElement(g, C({
                 "data-test": "option",
                 "data-test-value": c
             }, s, {
@@ -220,10 +220,10 @@
                         label: l
                     });
                 }
-            }), a &&  n().createElement(g, null, a), i &&  n().createElement(k, null, i), l &&  n().createElement(O, null, l), u &&  n().createElement(k, null, u));
+            }), a &&  n().createElement(m, null, a), i &&  n().createElement(x, null, i), l &&  n().createElement(O, null, l), u &&  n().createElement(x, null, u));
         }
         
-        return n().createElement(p(), w({
+        return n().createElement(p(), C({
             "data-test": "option",
             "data-test-value": c,
             appearance: v,
@@ -248,15 +248,15 @@
                     label: l
                 });
             }
-        }), i &&  n().createElement(k, null, i), l &&  n().createElement(O, null, l), u &&  n().createElement(k, null, u));
+        }), i &&  n().createElement(x, null, i), l &&  n().createElement(O, null, l), u &&  n().createElement(x, null, u));
     }
     E.propTypes = P;
     /* harmony default export */    const _ = E;
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const q = require("@splunk/react-ui/Box");
-    var D =  e.n(q);
+    const T = require("@splunk/react-ui/Box");
+    var q =  e.n(T);
     // CONCATENATED MODULE: ./src/RadioBar/RadioBarStyles.ts
-    var V = b()(D()).withConfig({
+    var D = b()(q()).withConfig({
         displayName: "RadioBarStyles__StyledRadioBar",
         componentId: "gg1b79-0"
     })([ "height:", ";", " [data-inline] + &{margin-left:", ";}" ], f.variables.inputHeight, (0, 
@@ -273,21 +273,21 @@
         prisma: f.variables.spacingSmall
     }));
     // CONCATENATED MODULE: ./src/RadioBar/RadioBar.tsx
-    function T(e) {
+    function R(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            T = function e(r) {
+            R = function e(r) {
                 return typeof r;
             };
         } else {
-            T = function e(r) {
+            R = function e(r) {
                 return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
             };
         }
-        return T(e);
+        return R(e);
     }
-    function A() {
-        A = Object.assign || function(e) {
+    function V() {
+        V = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -298,11 +298,11 @@
             }
             return e;
         };
-        return A.apply(this, arguments);
+        return V.apply(this, arguments);
     }
-    function B(e, r) {
+    function A(e, r) {
         if (e == null) return {};
-        var t = R(e, r);
+        var t = B(e, r);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
@@ -315,7 +315,7 @@
         }
         return t;
     }
-    function R(e, r) {
+    function B(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
@@ -338,7 +338,7 @@
         }
         return t;
     }
-    function $(e) {
+    function N(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = arguments[r] != null ? arguments[r] : {};
             if (r % 2) {
@@ -355,7 +355,7 @@
         }
         return e;
     }
-    function N(e, r) {
+    function $(e, r) {
         if (!(e instanceof r)) {
             throw new TypeError("Cannot call a class as a function");
         }
@@ -408,7 +408,7 @@
         };
     }
     function L(e, r) {
-        if (r && (T(r) === "object" || typeof r === "function")) {
+        if (r && (R(r) === "object" || typeof r === "function")) {
             return r;
         }
         return U(e);
@@ -480,7 +480,7 @@
         // eslint-disable-line @typescript-eslint/no-explicit-any
                 function a(e) {
             var t;
-            N(this, a);
+            $(this, a);
             t = r.call(this, e);
             J(U(t), "controlledExternally", void 0);
             J(U(t), "filteredValues", []);
@@ -495,28 +495,22 @@
                 var u = 0;
                 var c = t.filteredValues.indexOf(n);
                 if (l === "down" || l === "right") {
-                    var f;
                     e.preventDefault();
-                    u = c + 1;
-                    if (u > t.filteredValues.length - 1) {
-                        u = 0;
-                    }
-                    i = o.nextSibling ? o.nextSibling : (f = o.parentElement) === null || f === void 0 ? void 0 : f.firstElementChild;
+                    var f = t.getNextTarget("forward", o, c), d = f.nextTargetRes, p = f.nextIndexRes;
+                    i = d;
+                    u = p;
                 } else if (l === "up" || l === "left") {
-                    var d;
                     e.preventDefault();
-                    u = c - 1;
-                    if (u < 0) {
-                        u = t.filteredValues.length - 1;
-                    }
-                    i = o.previousSibling ? o.previousSibling : (d = o.parentElement) === null || d === void 0 ? void 0 : d.lastElementChild;
+                    var v = t.getNextTarget("backward", o, c), b = v.nextTargetRes, y = v.nextIndexRes;
+                    i = b;
+                    u = y;
                 }
                 if (i) {
-                    var p;
-                    (p = i) === null || p === void 0 ? void 0 : p.focus();
-                    var v = t.filteredValues[u];
+                    var h;
+                    (h = i) === null || h === void 0 ? void 0 : h.focus();
+                    var g = t.filteredValues[u];
                     t.handleOnChange(e, {
-                        value: v,
+                        value: g,
                         label: a
                     });
                 }
@@ -524,7 +518,7 @@
             J(U(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 = (a = t.props).onChange) === null || n === void 0 ? void 0 : n.call(a, e, N({
                         name: t.props.name
                     }, r));
                     if (!t.isControlled()) {
@@ -554,17 +548,47 @@
             value: function e() {
                 return this.controlledExternally;
             }
+ // TODO: Once converted to a functional component, this function can be removed and RadioBar should use useRovingFocus hook
+                }, {
+            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 i = r === "forward" ? 0 : this.filteredValues.length - 1;
+                var u = t[l];
+                var c = null;
+                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];
+                        s = i;
+                    }
+                    if (u.disabled) {
+                        var d = u[l];
+                        u = d;
+                        s += a;
+                    } else {
+                        c = u;
+                    }
+                }
+                return {
+                    nextTargetRes: c,
+                    nextIndexRes: s
+                };
+            }
         }, {
             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 = B(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, f = a.splunkTheme, d = 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 h = true;
                 this.filteredValues = [];
-                var m = t.Children.toArray(o).filter(t.isValidElement).map((function(e, n, a) {
+                var g = t.Children.toArray(o).filter(t.isValidElement).map((function(e, n, a) {
                     var l = a.length;
                     r.filteredValues.push(e.props.value);
                     if (e.props && !e.props.disabled) {
@@ -578,19 +602,19 @@
                         prepend: n > 0
                     });
                 }));
-                var g = this.filteredValues[0];
+                var m = this.filteredValues[0];
                 var O = d == null || this.filteredValues.includes(b);
                 if (false) {}
-                var k = {
+                var x = {
                     appearance: y ? "prisma" : l,
                     onClick: this.handleClick,
                     error: y ? false : u,
                     onKeyDown: this.handleOnKeyDown,
-                    firstValue: g,
+                    firstValue: m,
                     selectedValue: O ? b : undefined
                 };
                 
-                return n().createElement(V, A({
+                return n().createElement(D, V({
                     flex: true,
                     $disabled: h,
                     $error: u,
@@ -600,9 +624,9 @@
                     "aria-labelledby": s,
                     "aria-describedby": i,
                     "aria-required": p
-                }, c()(v, "onChange")),  n().createElement(S.Provider, {
-                    value: k
-                }, m));
+                }, c()(v, "onChange")),  n().createElement(w.Provider, {
+                    value: x
+                }, g));
             }
         } ]);
         return a;