@splunk/react-ui 4.34.0 → 4.35.0

package/ControlGroup.js

@@ -577,8 +577,11 @@
                 var A = r.Children.toArray(i).filter(r.isValidElement);
                 var G = A.length;
                 var B = D;
+                var N = typeof a === "string";
+                var z = N && a !== "";
+                var R = N || a === true;
  // Clean the Children
-                                var N = function e(n, o) {
+                                var W = function e(n, o) {
                     var i = {
                         key: n.key || o
                     };
@@ -636,32 +639,35 @@
                             i.id = n.props.id || t.getChildID("id", o);
                         }
                     }
+                    if (z && n.props.error === true) {
+                        i["aria-errormessage"] = t.errorId;
+                    }
                     
                     return (0, r.cloneElement)(n, i);
                 };
-                var z = A.map(N);
-                var R = this.getLinkedId(z);
+                var F = A.map(W);
+                var J = this.getLinkedId(F);
                 if (a) {
                     B["aria-invalid"] = true;
                 }
-                var W = y === "left" ? {
+                var H = y === "left" ? {
                     width: h
                 } : undefined;
-                var F = p()(h) ? "".concat(h, "px") : h;
-                var J = V ? "16px" : "20px";
-                var H = y === "left" ? {
-                    marginLeft: "calc(".concat(F, " + ").concat(J, ")")
+                var U = p()(h) ? "".concat(h, "px") : h;
+                var X = V ? "16px" : "20px";
+                var K = y === "left" ? {
+                    marginLeft: "calc(".concat(U, " + ").concat(X, ")")
                 } : undefined;
-                var U = l === "stack" ? S : d();
-                var X = y === "left" ? I : x;
-                var K =  n().createElement(X, {
-                    style: W,
+                var Q = l === "stack" ? S : d();
+                var Y = y === "left" ? I : x;
+                var Z =  n().createElement(Y, {
+                    style: H,
                     $labelPosition: y
                 },  n().createElement(C, {
                     "data-size": v,
                     "data-test": "label",
                     id: this.labelId,
-                    htmlFor: f || R,
+                    htmlFor: f || J,
                     $tooltip: !!_
                 }, m &&  n().createElement(P, {
                     "aria-hidden": "true"
@@ -672,28 +678,26 @@
                     defaultPlacement: T,
                     "aria-hidden": "true"
                 }));
-                var Q = typeof a === "string" || a === true;
-                var Y = typeof a === "boolean";
                 
                 return n().createElement(O, E({
                     "data-test": "control-group",
                     "data-test-required": m,
-                    $error: Q
+                    $error: R
                 }, B),  n().createElement(L.Provider, {
                     value: this.getContextValue()
-                }, c ?  n().createElement(b(), null, K) : K,  n().createElement(U, {
+                }, c ?  n().createElement(b(), null, Z) : Z,  n().createElement(Q, {
                     "data-test": "controls",
                     flex: l !== "none",
-                    style: H
-                }, z), s &&  n().createElement(w, {
+                    style: K
+                }, F), s &&  n().createElement(w, {
                     "data-test": "help",
                     id: this.helpId,
-                    style: H,
-                    $error: Q && Y
-                }, s), Q && !Y &&  n().createElement(j, {
+                    style: K,
+                    $error: R && !z
+                }, s), z &&  n().createElement(j, {
                     "data-test": "error",
                     id: this.errorId,
-                    style: H,
+                    style: K,
                     $help: !!s
                 }, a)));
             }

package/JSONTree.js

@@ -705,7 +705,7 @@
         n.r(t);
         // EXPORTS
                 n.d(t, {
-            default: () => /* reexport */ Se
+            default: () => /* reexport */ ke
         });
         // EXTERNAL MODULE: external "react"
                 var e = n(9497);
@@ -928,43 +928,45 @@
         };
         var X = (0, u.css)([ "word-break:break-word;word-wrap:break-word;" ]);
         var z = (0, u.css)([ "white-space:nowrap;" ]);
-        var W = c().span.withConfig({
-            displayName: "JSONTreeItemStyles__StyledValue",
-            componentId: "o558h3-0"
-        })([ "color:", ";", ";" ], (function(e) {
+        var W = (0, u.css)([ "color:", ";", ";" ], (function(e) {
             var r = e.valueType;
             return H[r];
         }), (function(e) {
             var r = e.overflowType;
             return r === "wrap" ? X : z;
         }));
-        var G = c()(W.withComponent(J())).withConfig({
+        var G = c().span.withConfig({
+            displayName: "JSONTreeItemStyles__StyledValue",
+            componentId: "o558h3-0"
+        })([ "", "" ], W);
+        var Q = c()(J()).withConfig({
             displayName: "JSONTreeItemStyles__StyledValueInteractiveClickable",
             componentId: "o558h3-1"
-        })([ "font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], f.variables.focusColor, (0, 
+        })([ "", " font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], W, f.variables.focusColor, (0, 
         f.pick)({
             enterprise: f.variables.backgroundColorHover,
             prisma: f.variables.interactiveColorOverlayHover
         }));
-        var Q = c().span.withConfig({
-            displayName: "JSONTreeItemStyles__StyledProperty",
-            componentId: "o558h3-2"
-        })([ "font-weight:bold;color:", ";" ], (0, f.pick)({
+        var Y = (0, u.css)([ "font-weight:bold;color:", ";" ], (0, f.pick)({
             enterprise: {
                 dark: "#ec9f98",
                 light: f.variables.syntaxRed
             },
             prisma: f.variables.syntaxRed
         }));
-        var Y = c()(Q.withComponent(J())).withConfig({
+        var Z = c().span.withConfig({
+            displayName: "JSONTreeItemStyles__StyledProperty",
+            componentId: "o558h3-2"
+        })([ "", "" ], Y);
+        var ee = c()(J()).withConfig({
             displayName: "JSONTreeItemStyles__StyledPropertyInteractiveClickable",
             componentId: "o558h3-3"
-        })([ "font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], f.variables.focusColor, (0, 
+        })([ "", " font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], Y, f.variables.focusColor, (0, 
         f.pick)({
             enterprise: f.variables.backgroundColorHover,
             prisma: f.variables.interactiveColorOverlayHover
         }));
-        var Z = c()(J()).withConfig({
+        var re = c()(J()).withConfig({
             displayName: "JSONTreeItemStyles__StyledExpandLinkClickable",
             componentId: "o558h3-4"
         })([ "cursor:pointer;color:", ";font-family:inherit;&:hover{background-color:", ";text-decoration:none;}&:focus{box-shadow:", ";&:active{box-shadow:none;}}", "" ], (0, 
@@ -980,52 +982,52 @@
         }), f.variables.focusShadowInset, (0, f.pick)({
             prisma: (0, u.css)([ "border-radius:", ";" ], f.variables.borderRadius)
         }));
-        var ee = c()(B()).withConfig({
+        var ne = c()(B()).withConfig({
             displayName: "JSONTreeItemStyles__StyledTooltip",
             componentId: "o558h3-5"
         })([ "font-family:", ";" ], f.variables.monoFontFamily);
         // CONCATENATED MODULE: ./src/JSONTree/renderTreeItems.tsx
-        function re(e) {
+        function te(e) {
             "@babel/helpers - typeof";
             if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-                re = function e(r) {
+                te = function e(r) {
                     return typeof r;
                 };
             } else {
-                re = function e(r) {
+                te = function e(r) {
                     return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
                 };
             }
-            return re(e);
+            return te(e);
         }
-        function ne(e) {
-            return ie(e) || ae(e) || oe(e) || te();
+        function oe(e) {
+            return ue(e) || le(e) || ie(e) || ae();
         }
-        function te() {
+        function ae() {
             throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
-        function oe(e, r) {
+        function ie(e, r) {
             if (!e) return;
-            if (typeof e === "string") return le(e, r);
+            if (typeof e === "string") return ce(e, r);
             var n = Object.prototype.toString.call(e).slice(8, -1);
             if (n === "Object" && e.constructor) n = e.constructor.name;
             if (n === "Map" || n === "Set") return Array.from(e);
-            if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return le(e, r);
+            if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ce(e, r);
         }
-        function ae(e) {
+        function le(e) {
             if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
         }
-        function ie(e) {
-            if (Array.isArray(e)) return le(e);
+        function ue(e) {
+            if (Array.isArray(e)) return ce(e);
         }
-        function le(e, r) {
+        function ce(e, r) {
             if (r == null || r > e.length) r = e.length;
             for (var n = 0, t = new Array(r); n < r; n++) {
                 t[n] = e[n];
             }
             return t;
         }
-        function ue(n) {
+        function fe(n) {
             var t = n.defaultOpen, o = t === void 0 ? false : t, a = n.expandChildren, i = a === void 0 ? false : a, u = n.expandChildrenOnShiftKey, c = u === void 0 ? false : u, f = n.indent, d = f === void 0 ? 4 : f, v = n.indentLevel, s = v === void 0 ? 1 : v, p = n.obj, b = n.onClickKey, h = n.onClickValue, S = n.overflow, k = S === void 0 ? "scroll" : S, x = n.path, I = x === void 0 ? [] : x, P = n.shift, R = n.updateShift;
             var K = y()(Array(s), j()(" ", d));
             var _;
@@ -1049,7 +1051,7 @@
             var q = function e(r, n) {
                 var t, o;
                 // When rendering a single value key is not present, here we prevent `[undefined]` in path
-                                var a = n !== undefined ? [].concat(ne(I), [ n ]) : ne(I);
+                                var a = n !== undefined ? [].concat(oe(I), [ n ]) : oe(I);
                 var i = ".".concat(a.join("."));
                 (t = N) === null || t === void 0 ? void 0 : (o = t.current) === null || o === void 0 ? void 0 : o.focus();
                 b === null || b === void 0 ? void 0 : b(r, {
@@ -1060,7 +1062,7 @@
             var V = function e(r, n) {
                 var t, o;
                 // When rendering a single value key is not present, here we prevent `[undefined]` in path
-                                var a = n !== undefined ? [].concat(ne(I), [ n ]) : ne(I);
+                                var a = n !== undefined ? [].concat(oe(I), [ n ]) : oe(I);
                 var i = ".".concat(a.join("."));
                 (t = _) === null || t === void 0 ? void 0 : (o = t.current) === null || o === void 0 ? void 0 : o.focus();
                 h === null || h === void 0 ? void 0 : h(r, {
@@ -1088,7 +1090,7 @@
                 var i = o ? "[-]" : "[+]";
                 var l = o ? (0, E._)("Collapse all") : (0, E._)("Shift click to expand all");
                 var u = (0, e.useRef)(null);
-                var f =  r().createElement(Z, {
+                var f =  r().createElement(re, {
                     elementRef: u,
                     tabIndex: -1,
                     onClick: function e(r) {
@@ -1099,7 +1101,7 @@
                 }, " ", i, " ");
                 if (c && a) {
                     return {
-                        expandLink:  r().createElement(ee, {
+                        expandLink:  r().createElement(ne, {
                             contentRelationship: "description",
                             openDelay: "secondary",
                             defaultPlacement: "above",
@@ -1131,7 +1133,7 @@
                     // isObject is true for arrays
                     u = m()(o) ? "[]" : "{}";
                 } else {
-                    u = ue({
+                    u = fe({
                         defaultOpen: i === true,
                         expandChildren: i,
                         expandChildrenOnShiftKey: c,
@@ -1139,7 +1141,7 @@
                         onClickValue: h,
                         overflow: k,
                         obj: o,
-                        path: a !== undefined ? [].concat(ne(I), [ a ]) : ne(I),
+                        path: a !== undefined ? [].concat(oe(I), [ a ]) : oe(I),
                         indentLevel: s + 1,
                         shift: P,
                         updateShift: R
@@ -1147,10 +1149,10 @@
                 }
                 if (l()(u) || w()(u)) {
                     var d = o === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
-                    re(o);
+                    te(o);
                     if (h) {
                         return {
-                            representation:  r().createElement(G, {
+                            representation:  r().createElement(Q, {
                                 elementRef: f,
                                 valueType: d,
                                 overflowType: k,
@@ -1167,7 +1169,7 @@
                         };
                     }
                     return {
-                        representation:  r().createElement(W, {
+                        representation:  r().createElement(G, {
                             valueType: d,
                             overflowType: k
                         }, u)
@@ -1181,7 +1183,7 @@
                 var o = (0, e.useRef)(null);
                 if (b) {
                     return {
-                        propertyElement:  r().createElement("span", null,  r().createElement(Y, {
+                        propertyElement:  r().createElement("span", null,  r().createElement(ee, {
                             elementRef: o,
                             tabIndex: -1,
                             onClick: function e(r) {
@@ -1196,7 +1198,7 @@
                     };
                 }
                 return {
-                    propertyElement:  r().createElement("span", null,  r().createElement(Q, null, t), ":", " ")
+                    propertyElement:  r().createElement("span", null,  r().createElement(Z, null, t), ":", " ")
                 };
             };
             if (O()(p) && !g()(p) || m()(p) && p.length > 0) {
@@ -1264,8 +1266,8 @@
             });
         }
         // CONCATENATED MODULE: ./src/JSONTree/JSONTree.tsx
-        function ce() {
-            ce = Object.assign || function(e) {
+        function de() {
+            de = Object.assign || function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var n = arguments[r];
                     for (var t in n) {
@@ -1276,30 +1278,30 @@
                 }
                 return e;
             };
-            return ce.apply(this, arguments);
+            return de.apply(this, arguments);
         }
-        function fe(e, r) {
-            return ye(e) || pe(e, r) || ve(e, r) || de();
+        function ve(e, r) {
+            return me(e) || be(e, r) || pe(e, r) || se();
         }
-        function de() {
+        function se() {
             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 ve(e, r) {
+        function pe(e, r) {
             if (!e) return;
-            if (typeof e === "string") return se(e, r);
+            if (typeof e === "string") return ye(e, r);
             var n = Object.prototype.toString.call(e).slice(8, -1);
             if (n === "Object" && e.constructor) n = e.constructor.name;
             if (n === "Map" || n === "Set") return Array.from(e);
-            if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return se(e, r);
+            if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ye(e, r);
         }
-        function se(e, r) {
+        function ye(e, r) {
             if (r == null || r > e.length) r = e.length;
             for (var n = 0, t = new Array(r); n < r; n++) {
                 t[n] = e[n];
             }
             return t;
         }
-        function pe(e, r) {
+        function be(e, r) {
             if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
             var n = [];
             var t = true;
@@ -1322,12 +1324,12 @@
             }
             return n;
         }
-        function ye(e) {
+        function me(e) {
             if (Array.isArray(e)) return e;
         }
-        function be(e, r) {
+        function he(e, r) {
             if (e == null) return {};
-            var n = me(e, r);
+            var n = ge(e, r);
             var t, o;
             if (Object.getOwnPropertySymbols) {
                 var a = Object.getOwnPropertySymbols(e);
@@ -1340,7 +1342,7 @@
             }
             return n;
         }
-        function me(e, r) {
+        function ge(e, r) {
             if (e == null) return {};
             var n = {};
             var t = Object.keys(e);
@@ -1352,7 +1354,7 @@
             }
             return n;
         }
-        var he = {
+        var Se = {
             elementRef: a().oneOfType([ a().func, a().object ]),
             expandChildren: a().oneOfType([ a().bool, a().oneOf([ "withShiftModifier" ]) ]),
             indent: a().number,
@@ -1364,24 +1366,24 @@
         };
         /**
  * Used to visualize a JSON string.
- */        function ge(n) {
-            var t = n.elementRef, o = n.expandChildren, a = o === void 0 ? false : o, i = n.indent, u = i === void 0 ? 4 : i, c = n.json, f = n.onClickKey, d = n.onClickValue, p = n.overflow, y = p === void 0 ? "scroll" : p, b = n.expandChildrenOnShiftKey, m = b === void 0 ? false : b, h = be(n, [ "elementRef", "expandChildren", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
+ */        function we(n) {
+            var t = n.elementRef, o = n.expandChildren, a = o === void 0 ? false : o, i = n.indent, u = i === void 0 ? 4 : i, c = n.json, f = n.onClickKey, d = n.onClickValue, p = n.overflow, y = p === void 0 ? "scroll" : p, b = n.expandChildrenOnShiftKey, m = b === void 0 ? false : b, h = he(n, [ "elementRef", "expandChildren", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
             // @docs-props-type JSONTreePropsBase
                         var g = l()(c) ? JSON.parse(c) : c;
             var S = y === "wrap" ? s : v;
-            var w = (0, e.useState)(undefined), k = fe(w, 2), O = k[0], x = k[1];
+            var w = (0, e.useState)(undefined), k = ve(w, 2), O = k[0], x = k[1];
             var C = function e(r) {
                 x(r);
             };
             
-            return r().createElement(S, ce({
+            return r().createElement(S, de({
                 "data-language": "language-json",
                 "data-test": "json-tree",
                 ref: t,
                 role: "tree"
             }, h),  r().createElement(A["default"], {
                 defaultIndent: false
-            }, ue({
+            }, fe({
                 defaultOpen: true,
                 expandChildren: a,
                 expandChildrenOnShiftKey: m,
@@ -1394,8 +1396,8 @@
                 updateShift: C
             })));
         }
-        ge.propTypes = he;
-        /* harmony default export */        const Se = ge;
+        we.propTypes = Se;
+        /* harmony default export */        const ke = we;
     }) // CONCATENATED MODULE: ./src/JSONTree/index.ts
     ();
     module.exports = t;

package/List.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(t, {
         Item: () => /* reexport */ v,
-        default: () => /* reexport */ P
+        default: () => /* reexport */ S
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -194,26 +194,22 @@
         ordered: i().bool,
         type: i().oneOf([ "disc", "decimal", "lower-alpha", "upper-alpha" ])
     };
-    var j = {
-        type: "disc"
-    };
-    function S(e) {
-        var t = e.children, r = e.elementRef, o = e.type, i = e.ordered, l = O(e, [ "children", "elementRef", "type", "ordered" ]);
+    function j(e) {
+        var t = e.children, r = e.elementRef, o = e.type, i = o === void 0 ? "disc" : o, l = e.ordered, a = O(e, [ "children", "elementRef", "type", "ordered" ]);
         // @docs-props-type ListPropsBase
         // Default prop value is "disc", we cannot determine if user or defaultProps is setting the value
                 if (false) {}
         
         return n().createElement(f, b({
-            as: i || o !== "disc" ? "ol" : "ul",
+            as: l || i !== "disc" ? "ol" : "ul",
             "data-test": "list",
             ref: r,
-            $listStyleType: i ? "decimal" : o
-        }, l), t);
+            $listStyleType: l ? "decimal" : i
+        }, a), t);
     }
-    S.propTypes = g;
-    S.defaultProps = j;
-    S.Item = v;
-    /* harmony default export */    const P = S;
+    j.propTypes = g;
+    j.Item = v;
+    /* harmony default export */    const S = j;
     // CONCATENATED MODULE: ./src/List/index.ts
     module.exports = t;
     /******/})();

package/MIGRATION.mdx

@@ -5,6 +5,30 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.35.0
+
+### Deprecated `Menu`'s `retainFocus` prop
+
+#### Change
+
+`Menu`'s `retainFocus` prop is deprecated and will be removed in the next major version.
+
+#### Context
+
+To provide more control over the focus behavior of `Menu`, including the option to opt out of focus management, a new `focusMode` prop has been introduced with the following values:
+- `never`: The menu will never take focus, and the active menu item will not have a focus-like appearance.
+- `normal`: Opts out of focus management. The menu and its children follow the normal focus order of DOM without any interference (no loop, no arrow keys, multiple tab stops).
+- `roving` (original `retainFocus={false}`): Does not retain focus inside the menu. There is one tab stop of menu. Uses up/down arrow keys to navigate and loop inside the menu.
+
+The original `retainFocus={true}` is no longer supported due to its poor user experience and accessibility issues:
+* If the Menu is used standalone, it traps the tab navigation within the Menu, preventing the user from accessing the next element via keyboard navigation.
+* If the Menu is used in a `Dropdown`, it creates multiple tab stops, making navigation inefficient.
+
+#### Migration steps
+
+* Replace `retainFocus={false}` with `focusMode="roving"`.
+* If `retainFocus={true}` was used, replace it with `focusMode="roving"`. Additionally, convert the corresponding tests with multiple tabs to use arrow key navigation.
+
 ## 4.34.0
 
 ### Deprecated `Select`'s `appearance` values of `"flat"`, `"pill"`, and `"toggle"`