@splunk/react-ui 5.7.0 → 5.8.0

package/JSONTree.js

@@ -89,7 +89,7 @@
     var y = d().code.withConfig({
         displayName: "JSONTreeStyles__StyledScrollCode",
         componentId: "vrdt21-0"
-    })([ "", ";overflow-x:auto;white-space:nowrap;" ], v);
+    })([ "", ";overflow-x:auto;white-space:pre;" ], v);
     var b = d()(f()).withConfig({
         displayName: "JSONTreeStyles__StyledTree",
         componentId: "vrdt21-1"
@@ -115,10 +115,10 @@
     var I =  e.n(E);
     // CONCATENATED MODULE: external "lodash/keys"
     const j = require("lodash/keys");
-    var T =  e.n(j);
+    var R =  e.n(j);
     // CONCATENATED MODULE: external "lodash/repeat"
-    const R = require("lodash/repeat");
-    var A =  e.n(R);
+    const T = require("lodash/repeat");
+    var A =  e.n(T);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const P = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
@@ -139,8 +139,8 @@
         object: p.variables.syntaxGray,
         array: p.variables.syntaxGray
     };
-    var F = (0, c.css)([ "word-break:break-word;word-wrap:break-word;" ]);
-    var J = (0, c.css)([ "white-space:nowrap;" ]);
+    var J = (0, c.css)([ "word-break:break-word;word-wrap:break-word;" ]);
+    var F = (0, c.css)([ "white-space:pre;" ]);
     /* Using this magic number to set the height to be at least the minimum target size of 24 by 24 */    var M = (0, 
     c.css)([ "padding-block:2px;" ]);
     var B = (0, c.css)([ "font-family:inherit;&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], p.variables.focusShadow, p.variables.neutral50);
@@ -149,7 +149,7 @@
         return D[n];
     }), (function(e) {
         var n = e.overflowType;
-        return n === "wrap" ? F : J;
+        return n === "wrap" ? J : F;
     }), M);
     var U = d().span.withConfig({
         displayName: "JSONTreeItemStyles__StyledContentWrapper",
@@ -411,11 +411,11 @@
         });
     }
     function ge(e) {
-        var n = e.baseId, r = e.defaultOpen, a = r === void 0 ? false : r, l = e.defaultExpanded, i = l === void 0 ? false : l, u = e.expandChildrenOnShiftKey, c = u === void 0 ? false : u, d = e.indent, s = d === void 0 ? 4 : d, f = e.indentLevel, p = f === void 0 ? 1 : f, v = e.obj, y = e.onClickKey, b = e.onClickValue, m = e.overflow, h = m === void 0 ? "scroll" : m, S = e.path, x = S === void 0 ? [] : S, w = e.shift, E = e.updateShift;
-        var j = g()(Array(p), A()(" ", s));
-        var R;
-        var _;
-        var K = function e() {
+        var n = e.baseId, r = e.defaultOpen, a = r === void 0 ? false : r, l = e.defaultExpanded, i = l === void 0 ? false : l, u = e.expandChildrenOnShiftKey, c = u === void 0 ? false : u, d = e.indent, s = d === void 0 ? 4 : d, f = e.indentLevel, p = f === void 0 ? 1 : f, v = e.obj, y = e.onClickKey, b = e.onClickValue, m = e.overflow, h = m === void 0 ? "scroll" : m, S = e.path, x = S === void 0 ? [] : S, w = e.shift, E = e.stringRenderer, j = E === void 0 ? "literal" : E, T = e.updateShift;
+        var _ = g()(Array(p), A()(" ", s));
+        var K;
+        var N;
+        var V = function e() {
             if (i && w == null) {
                 return true;
             }
@@ -424,49 +424,49 @@
             }
             return a;
         };
-        var N = function e(n) {
-            if (c && E != null) {
-                E(n.shiftKey);
+        var q = function e(n) {
+            if (c && T != null) {
+                T(n.shiftKey);
             }
         };
-        var V = function e(n, r) {
+        var L = function e(n, r) {
             var t, a;
             // When rendering a single value key is not present, here we prevent `[undefined]` in path
                         var o = r !== undefined ? [].concat(se(x), [ r ]) : se(x);
             var l = ".".concat(o.join("."));
-            (t = _) === null || t === void 0 ? void 0 : (a = t.current) === null || a === void 0 ? void 0 : a.focus();
+            (t = N) === null || t === void 0 ? void 0 : (a = t.current) === null || a === void 0 ? void 0 : a.focus();
             y === null || y === void 0 ? void 0 : y(n, {
                 key: l,
                 keyPath: o
             });
         };
-        var q = function e(n, r) {
+        var D = function e(n, r) {
             var t, a;
             // When rendering a single value key is not present, here we prevent `[undefined]` in path
                         var o = r !== undefined ? [].concat(se(x), [ r ]) : se(x);
             var l = ".".concat(o.join("."));
-            (t = R) === null || t === void 0 ? void 0 : (a = t.current) === null || a === void 0 ? void 0 : a.focus();
+            (t = K) === null || t === void 0 ? void 0 : (a = t.current) === null || a === void 0 ? void 0 : a.focus();
             b === null || b === void 0 ? void 0 : b(n, {
                 key: l,
                 keyPath: o,
                 value: n.target.textContent
             });
         };
-        var L = function e(n, r) {
+        var J = function e(n, r) {
             var t, a;
             var o = n.key;
-            if (o === "ArrowLeft" && y && ((t = _) === null || t === void 0 ? void 0 : t.current) && !r) {
+            if (o === "ArrowLeft" && y && ((t = N) === null || t === void 0 ? void 0 : t.current) && !r) {
                 var l;
                 n.stopPropagation();
-                (l = _.current) === null || l === void 0 ? void 0 : l.focus();
+                (l = N.current) === null || l === void 0 ? void 0 : l.focus();
             }
-            if (o === "ArrowRight" && b && ((a = R) === null || a === void 0 ? void 0 : a.current) && r) {
+            if (o === "ArrowRight" && b && ((a = K) === null || a === void 0 ? void 0 : a.current) && r) {
                 var i;
                 n.stopPropagation();
-                (i = R.current) === null || i === void 0 ? void 0 : i.focus();
+                (i = K.current) === null || i === void 0 ? void 0 : i.focus();
             }
         };
-        var D = function e(n) {
+        var F = function e(n) {
             var r = n.onToggleExpansion, a = n.open, o = n.withTooltip, l = n.expandLinkRef;
             var i = a ? "[-]" : "[+]";
             var u = a ? (0, P._)("Collapse all") : (0, P._)("Shift click to expand all");
@@ -475,7 +475,7 @@
                 elementRef: l,
                 tabIndex: -1,
                 onClick: function e(n) {
-                    N(n);
+                    q(n);
                     r === null || r === void 0 ? void 0 : r(n);
                 },
                 "aria-expanded": a,
@@ -497,12 +497,12 @@
                 expandLinkRef: l
             };
         };
-        var F = function e(r) {
+        var M = function e(r) {
             var a = r.value, l = r.key, u = r.clickValueRef;
             var d;
             if (!I()(a)) {
                 if (typeof a === "string") {
-                    d = '"'.concat(a, '"');
+                    d = j === "stringify" ? JSON.stringify(a) : '"'.concat(a, '"');
                 } else if (typeof a === "boolean") {
                     d = a.toString();
                 } else if (a === null) {
@@ -526,7 +526,7 @@
                     path: l !== undefined ? [].concat(se(x), [ l ]) : se(x),
                     indentLevel: p + 1,
                     shift: w,
-                    updateShift: E
+                    updateShift: T
                 });
             }
             if (o()(d) || C()(d)) {
@@ -539,11 +539,11 @@
                             valueType: s,
                             overflowType: h,
                             onClick: function e(n) {
-                                R = u;
-                                q(n, l);
+                                K = u;
+                                D(n, l);
                             },
                             onKeyDown: function e(n) {
-                                L(n, false);
+                                J(n, false);
                             },
                             tabIndex: -1
                         }, d),
@@ -561,18 +561,18 @@
                 representation: d
             };
         };
-        var J = function e(n, r) {
+        var B = function e(n, r) {
             if (y) {
                 return {
                     propertyElement:  t().createElement(t().Fragment, null,  t().createElement(z, {
                         elementRef: r,
                         tabIndex: -1,
                         onClick: function e(t) {
-                            _ = r;
-                            V(t, n);
+                            N = r;
+                            L(t, n);
                         },
                         onKeyDown: function e(n) {
-                            L(n, true);
+                            J(n, true);
                         }
                     }, n), ":", " "),
                     clickableKeyRef: r
@@ -583,7 +583,7 @@
             };
         };
         if (I()(v) && !O()(v) || k()(v) && v.length > 0) {
-            var M = T()(v).map((function(e, r, a) {
+            var G = R()(v).map((function(e, r, a) {
                 var o = v[e];
  // TS: should be safe based on (recursive) JSONElement type
                                 var l = k()(v) ? parseInt(e, 10) : e;
@@ -598,41 +598,41 @@
                     value: o,
                     properties: a,
                     obj: v,
-                    renderValue: F,
-                    renderKey: J,
-                    getInitialOpenState: K,
-                    indentArray: j,
-                    renderExpandLink: D,
+                    renderValue: M,
+                    renderKey: B,
+                    getInitialOpenState: V,
+                    indentArray: _,
+                    renderExpandLink: F,
                     onFocus: function e(n, r) {
-                        _ = n;
-                        R = r;
+                        N = n;
+                        K = r;
                     }
                 });
             }));
             if (x.length === 0) {
-                var B = I()(v) && !O()(v) || k()(v) && v.length > 0;
+                var U = I()(v) && !O()(v) || k()(v) && v.length > 0;
                 
                 return t().createElement(ce, {
                     id: "".concat(n, "-root"),
                     isRoot: true,
                     propertyDataPath: ".",
                     key: ".",
-                    hasChildren: B,
+                    hasChildren: U,
                     initialOpenState: a || i,
                     value: v,
                     index: 0,
-                    renderExpandLink: D,
-                    representation: M
+                    renderExpandLink: F,
+                    representation: G
                 });
             }
-            return M;
+            return G;
         }
         // edge case: a single number/string/boolean being rendered (still valid JSON)
                 
         return t().createElement(he, {
             baseId: n,
             obj: v,
-            renderValue: F
+            renderValue: M
         });
     }
     // CONCATENATED MODULE: ./src/JSONTree/JSONTree.tsx
@@ -716,7 +716,7 @@
     }
     /** @public */
     /** @public */
-    /** @public */    var Te = {
+    /** @public */    var Re = {
         elementRef: i().oneOfType([ i().func, i().object ]),
         defaultExpanded: i().bool,
         indent: i().number,
@@ -728,45 +728,46 @@
     };
     /**
  * Used to visualize a JSON string.
- */    function Re(e) {
-        var n = e.elementRef, a = e.defaultExpanded, l = a === void 0 ? false : a, i = e.indent, c = i === void 0 ? 4 : i, d = e.json, s = e.onClickKey, f = e.onClickValue, p = e.overflow, v = p === void 0 ? "scroll" : p, h = e.expandChildrenOnShiftKey, g = h === void 0 ? true : h, S = Ie(e, [ "elementRef", "defaultExpanded", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
+ */    function Te(e) {
+        var n = e.elementRef, a = e.defaultExpanded, l = a === void 0 ? false : a, i = e.indent, c = i === void 0 ? 4 : i, d = e.json, s = e.onClickKey, f = e.onClickValue, p = e.overflow, v = p === void 0 ? "scroll" : p, h = e.expandChildrenOnShiftKey, g = h === void 0 ? true : h, S = e.stringRenderer, k = S === void 0 ? "literal" : S, x = Ie(e, [ "elementRef", "defaultExpanded", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey", "stringRenderer" ]);
         // @docs-props-type JSONTreePropsBase
-                var k = (0, r.useMemo)((function() {
-            return S.id || (0, u.createDOMID)("json-tree");
-        }), [ S.id ]);
-        var x = o()(d) ? JSON.parse(d) : d;
-        var O = v === "wrap" ? m : y;
-        var w = (0, r.useState)(undefined), C = ke(w, 2), E = C[0], I = C[1];
-        var j = (0, r.useCallback)((function(e) {
-            I(e);
+                var O = (0, r.useMemo)((function() {
+            return x.id || (0, u.createDOMID)("json-tree");
+        }), [ x.id ]);
+        var w = o()(d) ? JSON.parse(d) : d;
+        var C = v === "wrap" ? m : y;
+        var E = (0, r.useState)(undefined), I = ke(E, 2), j = I[0], R = I[1];
+        var T = (0, r.useCallback)((function(e) {
+            R(e);
         }), []);
-        var T = (0, r.useMemo)((function() {
+        var A = (0, r.useMemo)((function() {
             return ge({
-                baseId: k,
+                baseId: O,
                 defaultOpen: true,
                 defaultExpanded: l,
                 expandChildrenOnShiftKey: g,
                 indent: c,
-                obj: x,
+                obj: w,
                 onClickKey: s,
                 onClickValue: f,
                 overflow: v,
-                shift: E,
-                updateShift: j
+                shift: j,
+                stringRenderer: k,
+                updateShift: T
             });
-        }), [ k, l, g, c, x, s, f, v, E, j ]);
+        }), [ O, l, g, c, w, s, f, v, j, k, T ]);
         
-        return t().createElement(O, Se({
+        return t().createElement(C, Se({
             "data-language": "language-json",
             "data-test": "json-tree",
             ref: n,
             role: "tree"
-        }, S),  t().createElement(b, {
+        }, x),  t().createElement(b, {
             defaultIndent: false
-        }, T));
+        }, A));
     }
-    Re.propTypes = Te;
-    /* harmony default export */    const Ae = Re;
+    Te.propTypes = Re;
+    /* harmony default export */    const Ae = Te;
     // CONCATENATED MODULE: ./src/JSONTree/index.ts
     module.exports = n;
     /******/})();

package/Link.js

@@ -117,11 +117,11 @@
     var w = c()(S()).withConfig({
         displayName: "LinkStyles__StyledClickable",
         componentId: "sc-1hhltcf-0"
-    })([ "", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;color:", ";", " &:not([disabled],[aria-disabled='true']){cursor:pointer;&:hover,&:active,&:focus{color:", ";text-decoration:underline;text-decoration-thickness:2px;}&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}", "" ], v.mixins.reset("inline"), v.variables.contentColorLink, (0, 
+    })([ "", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;color:", ";", " &:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}&:not([disabled],[aria-disabled='true']){cursor:pointer;&:hover,&:active,&:focus{color:", ";text-decoration:underline;text-decoration-thickness:2px;}}&[disabled],&[aria-disabled='true']{color:", ";}", "" ], v.mixins.reset("inline"), v.variables.contentColorLink, (0, 
     v.pickVariant)("$appearance", {
         inline: (0, d.css)([ "text-decoration:underline;" ]),
         standalone: (0, d.css)([ "font-weight:", ";" ], v.variables.fontWeightSemiBold)
-    }), v.variables.contentColorLink, v.variables.focusShadow, v.variables.contentColorLinkDisabled, (function(e) {
+    }), v.variables.focusShadow, v.variables.contentColorLink, v.variables.contentColorLinkDisabled, (function(e) {
         var n = e.$enableVisitedStyling;
         return n && (0, d.css)([ "&:visited{color:", ";}&:where([disabled],[aria-disabled='true']):visited{color:", ";}" ], v.variables.contentColorLinkVisited, v.variables.contentColorLinkVisitedDisabled);
     }));

package/MIGRATION.md

@@ -155,6 +155,16 @@ is equivalent to
 
 Remove `width="100%" height="100%"` from the icon.
 
+### Change to `Modal` overlay click behavior
+
+Modals no longer close when clicking on the overlay by default.
+
+This change was made to improve accessibility and prevent accidental data loss.
+
+#### Migration steps
+
+First, evaluate whether enabling `closeOnClickAway` aligns with the [Modal usage guidelines](./Modal). If closing a modal by clicking outside of it is required, explicitly enable this behavior by setting `closeOnClickAway={true}` on `Modal`.
+
 ### Changes to `Modal` and `Modal.Header` `onRequestClose` prop
 
 `Modal.Header` now uses the `onRequestClose` prop from `Modal` and no longer supports its own `onRequestClose`.