@splunk/react-ui 4.22.1 → 4.24.0

package/JSONTree.js

@@ -61,7 +61,7 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ ke
+        default: () => /* reexport */ we
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -76,168 +76,163 @@
     var u =  (0, t.createContext)({});
     u.displayName = "JSONTree";
     /* harmony default export */    const c = u;
-    // CONCATENATED MODULE: external "lodash/fill"
-    const s = require("lodash/fill");
+    // CONCATENATED MODULE: external "styled-components"
+    const s = require("styled-components");
     var f =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const p = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/JSONTree/JSONTreeStyles.ts
+    var d = (0, s.css)([ "", ";font-family:", ";" ], p.mixins.reset("block"), p.variables.monoFontFamily);
+    var v = f().code.withConfig({
+        displayName: "JSONTreeStyles__StyledScrollCode",
+        componentId: "vrdt21-0"
+    })([ "", ";overflow-x:auto;white-space:nowrap;" ], d);
+    var y = f().code.withConfig({
+        displayName: "JSONTreeStyles__StyledWrapCode",
+        componentId: "vrdt21-1"
+    })([ "", ";white-space:pre-wrap;" ], d);
+    // CONCATENATED MODULE: external "lodash/fill"
+    const h = require("lodash/fill");
+    var b =  e.n(h);
     // CONCATENATED MODULE: external "lodash/isArray"
-    const p = require("lodash/isArray");
-    var d =  e.n(p);
+    const m = require("lodash/isArray");
+    var C =  e.n(m);
     // CONCATENATED MODULE: external "lodash/isEmpty"
-    const v = require("lodash/isEmpty");
-    var y =  e.n(v);
+    const S = require("lodash/isEmpty");
+    var O =  e.n(S);
     // CONCATENATED MODULE: external "lodash/isNumber"
-    const b = require("lodash/isNumber");
-    var h =  e.n(b);
+    const k = require("lodash/isNumber");
+    var w =  e.n(k);
     // CONCATENATED MODULE: external "lodash/isObject"
-    const m = require("lodash/isObject");
-    var k =  e.n(m);
+    const g = require("lodash/isObject");
+    var x =  e.n(g);
     // CONCATENATED MODULE: external "lodash/keys"
-    const g = require("lodash/keys");
-    var w =  e.n(g);
+    const j = require("lodash/keys");
+    var T =  e.n(j);
     // CONCATENATED MODULE: external "lodash/repeat"
-    const C = require("lodash/repeat");
-    var S =  e.n(C);
-    // CONCATENATED MODULE: external "styled-components"
-    const O = require("styled-components");
-    var x =  e.n(O);
+    const _ = require("lodash/repeat");
+    var E =  e.n(_);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const K = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const j = require("@splunk/react-ui/Clickable");
-    var T =  e.n(j);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const E = require("@splunk/themes");
+    const N = require("@splunk/react-ui/Clickable");
+    var I =  e.n(N);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
+    const P = require("@splunk/react-ui/Tooltip");
+    var q =  e.n(P);
     // CONCATENATED MODULE: ./src/JSONTree/TreeNodeStyles.ts
-    var _ = {
-        string: (0, E.pick)({
-            enterprise: {
-                dark: "#00b0b3",
-                light: "#00787A"
-            },
-            prisma: E.variables.syntaxTeal
-        }),
-        number: (0, E.pick)({
-            enterprise: {
-                dark: "#8bacfd",
-                light: "#1f5df9"
-            },
-            prisma: E.variables.syntaxBlue
-        }),
-        boolean: (0, E.pick)({
-            enterprise: {
-                dark: "#af8aff",
-                light: E.variables.syntaxPurple
-            },
-            prisma: E.variables.syntaxPurple
-        }),
-        null: (0, E.pick)({
-            enterprise: {
-                dark: "#f0b375",
-                light: "#ad5700"
-            },
-            prisma: E.variables.syntaxBrown
-        }),
-        object: E.variables.contentColorDefault
+    var A = {
+        string: p.variables.syntaxTeal,
+        number: p.variables.syntaxBlue,
+        boolean: p.variables.syntaxPurple,
+        null: p.variables.syntaxBrown,
+        object: p.variables.contentColorDefault
     };
-    var I = (0, O.css)([ "word-break:break-word;word-wrap:break-word;" ]);
-    var P = (0, O.css)([ "white-space:nowrap;" ]);
-    var N = x().span.withConfig({
+    var R = (0, s.css)([ "word-break:break-word;word-wrap:break-word;" ]);
+    var V = (0, s.css)([ "white-space:nowrap;" ]);
+    var L = f().span.withConfig({
         displayName: "TreeNodeStyles__StyledValue",
         componentId: "sc-1rdul18-0"
     })([ "color:", ";", ";" ], (function(e) {
         var r = e.valueType;
-        return _[r];
+        return A[r];
     }), (function(e) {
         var r = e.overflowType;
-        return r === "wrap" ? I : P;
+        return r === "wrap" ? R : V;
     }));
-    var A = x()(N.withComponent(T())).withConfig({
+    var M = f()(L.withComponent(I())).withConfig({
         displayName: "TreeNodeStyles__StyledValueInteractiveClickable",
         componentId: "sc-1rdul18-1"
-    })([ "font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], E.variables.focusColor, (0, 
-    E.pick)({
-        enterprise: E.variables.backgroundColorHover,
-        prisma: E.variables.interactiveColorOverlayHover
+    })([ "font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], p.variables.focusColor, (0, 
+    p.pick)({
+        enterprise: p.variables.backgroundColorHover,
+        prisma: p.variables.interactiveColorOverlayHover
     }));
-    var q = x().span.withConfig({
+    var J = f().span.withConfig({
         displayName: "TreeNodeStyles__StyledProperty",
         componentId: "sc-1rdul18-2"
-    })([ "font-weight:bold;color:", ";" ], (0, E.pick)({
+    })([ "font-weight:bold;color:", ";" ], (0, p.pick)({
         enterprise: {
             dark: "#ec9f98",
-            light: E.variables.syntaxRed
+            light: p.variables.syntaxRed
         },
-        prisma: E.variables.syntaxRed
+        prisma: p.variables.syntaxRed
     }));
-    var K = x()(q.withComponent(T())).withConfig({
+    var H = f()(J.withComponent(I())).withConfig({
         displayName: "TreeNodeStyles__StyledPropertyInteractiveClickable",
         componentId: "sc-1rdul18-3"
-    })([ "font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], E.variables.focusColor, (0, 
-    E.pick)({
-        enterprise: E.variables.backgroundColorHover,
-        prisma: E.variables.interactiveColorOverlayHover
+    })([ "font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], p.variables.focusColor, (0, 
+    p.pick)({
+        enterprise: p.variables.backgroundColorHover,
+        prisma: p.variables.interactiveColorOverlayHover
     }));
-    var V = x()(T()).withConfig({
+    var D = f()(I()).withConfig({
         displayName: "TreeNodeStyles__StyledExpandLinkClickable",
         componentId: "sc-1rdul18-4"
     })([ "cursor:pointer;color:", ";font-family:inherit;&:hover{background-color:", ";text-decoration:none;}&:focus{box-shadow:", ";&:active{box-shadow:none;}}", "" ], (0, 
-    E.pick)({
+    p.pick)({
         enterprise: {
-            dark: E.variables.accentColorL20,
-            light: E.variables.accentColorD20
+            dark: p.variables.accentColorL20,
+            light: p.variables.accentColorD20
         },
-        prisma: E.variables.interactiveColorPrimary
-    }), (0, E.pick)({
-        enterprise: E.variables.backgroundColorHover,
-        prisma: E.variables.interactiveColorOverlayHover
-    }), E.variables.focusShadowInset, (0, E.pick)({
-        prisma: (0, O.css)([ "border-radius:", ";" ], E.variables.borderRadius)
+        prisma: p.variables.interactiveColorPrimary
+    }), (0, p.pick)({
+        enterprise: p.variables.backgroundColorHover,
+        prisma: p.variables.interactiveColorOverlayHover
+    }), p.variables.focusShadowInset, (0, p.pick)({
+        prisma: (0, s.css)([ "border-radius:", ";" ], p.variables.borderRadius)
     }));
+    var F = f()(q()).withConfig({
+        displayName: "TreeNodeStyles__StyledTooltip",
+        componentId: "sc-1rdul18-5"
+    })([ "font-family:", ";" ], p.variables.monoFontFamily);
     // CONCATENATED MODULE: ./src/JSONTree/TreeNode.tsx
-    function R(e) {
+    function B(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            R = function e(r) {
+            B = function e(r) {
                 return typeof r;
             };
         } else {
-            R = function e(r) {
+            B = function e(r) {
                 return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
             };
         }
-        return R(e);
+        return B(e);
     }
-    function L(e) {
-        return J(e) || D(e) || H(e) || M();
+    function U(e) {
+        return G(e) || z(e) || W(e) || $();
     }
-    function M() {
+    function $() {
         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 H(e, r) {
+    function W(e, r) {
         if (!e) return;
-        if (typeof e === "string") return B(e, r);
+        if (typeof e === "string") return Q(e, r);
         var t = Object.prototype.toString.call(e).slice(8, -1);
         if (t === "Object" && e.constructor) t = e.constructor.name;
         if (t === "Map" || t === "Set") return Array.from(e);
-        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return B(e, r);
+        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return Q(e, r);
     }
-    function D(e) {
+    function z(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function J(e) {
-        if (Array.isArray(e)) return B(e);
+    function G(e) {
+        if (Array.isArray(e)) return Q(e);
     }
-    function B(e, r) {
+    function Q(e, r) {
         if (r == null || r > e.length) r = e.length;
         for (var t = 0, n = new Array(r); t < r; t++) {
             n[t] = e[t];
         }
         return n;
     }
-    function F(e, r) {
+    function X(e, r) {
         if (!(e instanceof r)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function U(e, r) {
+    function Y(e, r) {
         for (var t = 0; t < r.length; t++) {
             var n = r[t];
             n.enumerable = n.enumerable || false;
@@ -246,12 +241,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function $(e, r, t) {
-        if (r) U(e.prototype, r);
-        if (t) U(e, t);
+    function Z(e, r, t) {
+        if (r) Y(e.prototype, r);
+        if (t) Y(e, t);
         return e;
     }
-    function W(e, r) {
+    function ee(e, r) {
         if (typeof r !== "function" && r !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -262,41 +257,41 @@
                 configurable: true
             }
         });
-        if (r) z(e, r);
+        if (r) re(e, r);
     }
-    function z(e, r) {
-        z = Object.setPrototypeOf || function e(r, t) {
+    function re(e, r) {
+        re = Object.setPrototypeOf || function e(r, t) {
             r.__proto__ = t;
             return r;
         };
-        return z(e, r);
+        return re(e, r);
     }
-    function G(e) {
-        var r = Y();
+    function te(e) {
+        var r = ae();
         return function t() {
-            var n = Z(e), o;
+            var n = ie(e), o;
             if (r) {
-                var a = Z(this).constructor;
+                var a = ie(this).constructor;
                 o = Reflect.construct(n, arguments, a);
             } else {
                 o = n.apply(this, arguments);
             }
-            return Q(this, o);
+            return ne(this, o);
         };
     }
-    function Q(e, r) {
-        if (r && (R(r) === "object" || typeof r === "function")) {
+    function ne(e, r) {
+        if (r && (B(r) === "object" || typeof r === "function")) {
             return r;
         }
-        return X(e);
+        return oe(e);
     }
-    function X(e) {
+    function oe(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function Y() {
+    function ae() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -307,13 +302,13 @@
             return false;
         }
     }
-    function Z(e) {
-        Z = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
+    function ie(e) {
+        ie = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
             return r.__proto__ || Object.getPrototypeOf(r);
         };
-        return Z(e);
+        return ie(e);
     }
-    function ee(e, r, t) {
+    function le(e, r, t) {
         if (r in e) {
             Object.defineProperty(e, r, {
                 value: t,
@@ -326,7 +321,7 @@
         }
         return e;
     }
-    var re = {
+    var ue = {
         path: a().arrayOf(a().oneOfType([ a().number, a().string ])),
         defaultOpen: a().bool,
         expandChildren: a().oneOfType([ a().bool, a().oneOf([ "withShiftModifier" ]) ]),
@@ -336,30 +331,32 @@
         onClickKey: a().func,
         onClickValue: a().func,
         overflow: a().oneOf([ "wrap", "scroll" ]),
-        shift: a().bool
+        shift: a().bool,
+        expandChildrenOnShiftKey: a().bool
     };
-    var te = {
+    var ce = {
         path: [],
         defaultOpen: false,
         expandChildren: false,
         indent: 4,
         indentLevel: 1,
-        overflow: "scroll"
+        overflow: "scroll",
+        expandChildrenOnShiftKey: false
     };
     /**
  * An internal container class for expandable tree nodes (objects and arrays).
- */    var ne =  function(e) {
-        W(t, e);
-        var r = G(t);
+ */    var se =  function(e) {
+        ee(t, e);
+        var r = te(t);
         function t(e) {
             var n;
-            F(this, t);
+            X(this, t);
             n = r.call(this, e);
-            ee(X(n), "regularIndent", void 0);
-            ee(X(n), "closingIndent", void 0);
-            ee(X(n), "mutableShift", void 0);
-            ee(X(n), "handleExpandClick", (function(e) {
-                if (n.props.expandChildren === "withShiftModifier") {
+            le(oe(n), "regularIndent", void 0);
+            le(oe(n), "closingIndent", void 0);
+            le(oe(n), "mutableShift", void 0);
+            le(oe(n), "handleExpandClick", (function(e) {
+                if (n.props.expandChildren === "withShiftModifier" || n.props.expandChildrenOnShiftKey) {
                     var r = n.context.updateShift;
                     if (r != null) {
                         n.mutableShift = e.shiftKey;
@@ -372,22 +369,22 @@
                     };
                 }));
             }));
-            ee(X(n), "handleClickKey", (function(e, r) {
+            le(oe(n), "handleClickKey", (function(e, r) {
                 var t, o;
                 var a = n.props.path;
  // When rendering a single value key is not present, here we prevent `[undefined]` in path
-                                var i = r !== undefined ? [].concat(L(a), [ r ]) : L(a);
+                                var i = r !== undefined ? [].concat(U(a), [ r ]) : U(a);
                 var l = ".".concat(i.join("."));
                 (t = (o = n.props).onClickKey) === null || t === void 0 ? void 0 : t.call(o, e, {
                     key: l,
                     keyPath: i
                 });
             }));
-            ee(X(n), "handleClickValue", (function(e, r) {
+            le(oe(n), "handleClickValue", (function(e, r) {
                 var t, o;
                 var a = n.props.path;
  // When rendering a single value key is not present, here we prevent `[undefined]` in path
-                                var i = r !== undefined ? [].concat(L(a), [ r ]) : L(a);
+                                var i = r !== undefined ? [].concat(U(a), [ r ]) : U(a);
                 var l = ".".concat(i.join("."));
                 (t = (o = n.props).onClickValue) === null || t === void 0 ? void 0 : t.call(o, e, {
                     key: l,
@@ -397,7 +394,11 @@
             }));
             var o = n.props.shift;
             n.mutableShift = o;
-            if (n.props.expandChildren === "withShiftModifier" && n.mutableShift != null) {
+            if (n.props.expandChildren === true) {
+                n.state = {
+                    open: e.defaultOpen
+                };
+            } else if ((n.props.expandChildren === "withShiftModifier" || n.props.expandChildrenOnShiftKey) && n.mutableShift != null) {
                 n.state = n.mutableShift ? {
                     open: true
                 } : {
@@ -408,81 +409,94 @@
                     open: e.defaultOpen
                 };
             }
-            n.regularIndent = f()(Array(e.indentLevel), S()(" ", e.indent));
-            n.closingIndent = f()(Array(e.indentLevel - 1), S()(" ", e.indent));
+            n.regularIndent = b()(Array(e.indentLevel), E()(" ", e.indent));
+            n.closingIndent = b()(Array(e.indentLevel - 1), E()(" ", e.indent));
             return n;
         }
-        $(t, [ {
+        Z(t, [ {
             key: "renderExpandLink",
-            value: function e() {
-                var r = this;
-                
-                return n().createElement(V, {
-                    onClick: function e(t) {
-                        r.handleExpandClick(t);
+            value: function e(r) {
+                var t = this;
+                var o = r.withTooltip;
+                var a = this.state.open ? "[-]" : "[+]";
+                var i = this.state.open ? (0, K._)("Shift click to collapse all") : (0, K._)("Shift click to expand all");
+                var l =  n().createElement(D, {
+                    onClick: function e(r) {
+                        t.handleExpandClick(r);
                     },
                     "aria-expanded": this.state.open,
                     "data-test": "toggle"
-                }, " ", this.state.open ? "[-]" : "[+]", " ");
+                }, " ", a, " ");
+                if (this.props.expandChildrenOnShiftKey && o) {
+                    
+                    return n().createElement(F, {
+                        contentRelationship: "description",
+                        openDelay: "secondary",
+                        defaultPlacement: "above",
+                        content: (0, K._)(i)
+                    }, l);
+                }
+                return l;
             }
         }, {
             key: "renderValue",
             value: function e(r) {
                 var o = this;
                 var a = r.value, i = r.key;
-                var u = this.props, c = u.expandChildren, s = u.indent, f = u.indentLevel, p = u.onClickKey, v = u.onClickValue, b = u.overflow, m = u.path, g = u.shift;
-                var w = null;
+                var u = this.props, c = u.expandChildren, s = u.indent, f = u.indentLevel, p = u.onClickKey, d = u.onClickValue, v = u.overflow, y = u.path, h = u.shift, b = u.expandChildrenOnShiftKey;
+                var m = null;
  // determine if value should be represented as a simple string
                 // or as a child node
-                                if (!k()(a)) {
+                                if (!x()(a)) {
                     // isObject is true for arrays
                     if (typeof a === "string") {
-                        w = '"'.concat(a, '"');
+                        m = '"'.concat(a, '"');
                     } else if (typeof a === "boolean") {
-                        w = a.toString();
+                        m = a.toString();
                     } else if (a === null) {
-                        w = "null";
+                        m = "null";
                     } else {
-                        w = a;
+                        m = a;
                     }
-                } else if (y()(a)) {
+                } else if (O()(a)) {
                     // isObject is true for arrays
-                    w = d()(a) ? "[]" : "{}";
+                    m = C()(a) ? "[]" : "{}";
                 } else {
-                    w =  n().createElement(t, {
+                    m =  n().createElement(t, {
                         obj: a,
-                        path: i !== undefined ? [].concat(L(m), [ i ]) : L(m),
+                        path: i !== undefined ? [].concat(U(y), [ i ]) : U(y),
                         defaultOpen: c === true,
                         expandChildren: c,
                         onClickKey: p,
-                        onClickValue: v,
+                        onClickValue: d,
                         indent: s,
                         indentLevel: f + 1,
-                        overflow: b,
-                        shift: g
+                        overflow: v,
+                        shift: h,
+                        expandChildrenOnShiftKey: b
                     });
                 }
  // for string or number representations, apply styles and optional interactivity
-                                if (l()(w) || h()(w)) {
-                    var C = a === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
-                    R(a);
-                    if (v) {
+                                if (l()(m) || w()(m)) {
+                    var S = a === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
+                    B(a);
+                    if (d) {
                         
-                        return n().createElement(A, {
-                            valueType: C,
-                            overflowType: b,
+                        return n().createElement(M, {
+                            valueType: S,
+                            overflowType: v,
                             onClick: function e(r) {
                                 o.handleClickValue(r, i);
                             }
-                        }, w);
+                        }, m);
                     }
                     
-                    return n().createElement(N, {
-                        valueType: C,
-                        overflowType: b
-                    }, w);
+                    return n().createElement(L, {
+                        valueType: S,
+                        overflowType: v
+                    }, m);
                 }
-                return w;
+                return m;
             }
         }, {
             key: "renderKey",
@@ -491,80 +505,82 @@
                 var o = this.props.onClickKey;
                 if (o) {
                     
-                    return n().createElement("span", null,  n().createElement(K, {
+                    return n().createElement("span", null,  n().createElement(H, {
                         onClick: function e(n) {
                             t.handleClickKey(n, r);
                         }
                     }, r), ":", " ");
                 }
                 
-                return n().createElement("span", null,  n().createElement(q, null, r), ":", " ");
+                return n().createElement("span", null,  n().createElement(J, null, r), ":", " ");
             }
         }, {
             key: "renderObject",
             value: function e() {
                 var r = this;
-                var t = this.props, o = t.obj, a = t.path;
-                if (k()(o) || d()(o)) {
-                    return w()(o).map((function(e, t, i) {
-                        var l = o[e];
+                var o = this.props, a = o.obj, i = o.path;
+                var l = false;
+                if (x()(a) || C()(a)) {
+                    return {
+                        nodes: T()(a).map((function(e, o, u) {
+                            var c = a[e];
  // TS: should be safe based on (recursive) JSONElement type
-                                                var u = d()(o) ? parseInt(e, 10) : e;
-                        var c = a.length === 0 ? ".".concat(u) : ".".concat(a.join("."), ".").concat(u);
-                        var s = r.renderValue({
-                            key: u,
-                            value: l
-                        });
-                        var f = !d()(o) ? r.renderKey(u) : undefined;
-                        
-                        return n().createElement("div", {
-                            key: c,
-                            role: "treeitem",
-                            "data-test-path": c
-                        }, r.regularIndent, f, s, t + 1 < i.length ? "," : null);
-                    }));
+                                                        var s = C()(a) ? parseInt(e, 10) : e;
+                            var f = i.length === 0 ? ".".concat(s) : ".".concat(i.join("."), ".").concat(s);
+                            var p = r.renderValue({
+                                key: s,
+                                value: c
+                            });
+                            l = // eslint-disable-next-line dot-notation
+                            "type" in p && p["type"] === t;
+                            var d = !C()(a) ? r.renderKey(s) : undefined;
+                            
+                            return n().createElement("div", {
+                                key: f,
+                                role: "treeitem",
+                                "data-test-path": f
+                            }, r.regularIndent, d, p, o + 1 < u.length ? "," : null);
+                        })),
+                        isJSONTreeNode: l
+                    };
                 }
- // edge case: a single number/string/boolean being rendered (still valid JSON)
-                                
-                return n().createElement("div", {
+                var u =  n().createElement("div", {
                     role: "treeitem",
                     "data-test-path": "."
                 }, this.renderValue({
-                    value: o
+                    value: a
                 }));
+ // keyless value case: a single number/string/boolean being rendered (still valid JSON)
+                                return {
+                    nodes: [ u ],
+                    isJSONTreeNode: l
+                };
             }
         }, {
             key: "render",
             value: function e() {
                 var r = this.state.open;
                 var t = this.props.obj;
-                var o = k()(t) && !y()(t) || d()(t) && t.length > 0;
+                var o = x()(t) && !O()(t) || C()(t) && t.length > 0;
+                var a = this.renderObject(), i = a.nodes, l = a.isJSONTreeNode;
                 
                 return n().createElement("span", {
                     "data-test": o ? "node" : null,
                     "data-test-expanded": o ? this.state.open : null
-                }, o && (d()(t) ? "[" : "{"), o && this.renderExpandLink(), !o || r ? this.renderObject() : null, !o || r ? this.closingIndent : null, o && (d()(t) ? "]" : "}"));
+                }, o && (C()(t) ? "[" : "{"), o && this.renderExpandLink({
+                    withTooltip: l
+                }), !o || r ? i : null, !o || r ? this.closingIndent : null, o && (C()(t) ? "]" : "}"));
             }
         } ]);
         return t;
     }(t.Component);
-    ee(ne, "contextType", c);
-    ee(ne, "propTypes", re);
-    ee(ne, "defaultProps", te);
-    /* harmony default export */    const oe = ne;
-    // CONCATENATED MODULE: ./src/JSONTree/JSONTreeStyles.ts
-    var ae = (0, O.css)([ "", ";font-family:", ";" ], E.mixins.reset("block"), E.variables.monoFontFamily);
-    var ie = x().code.withConfig({
-        displayName: "JSONTreeStyles__StyledScrollCode",
-        componentId: "vrdt21-0"
-    })([ "", ";overflow-x:auto;white-space:nowrap;" ], ae);
-    var le = x().code.withConfig({
-        displayName: "JSONTreeStyles__StyledWrapCode",
-        componentId: "vrdt21-1"
-    })([ "", ";white-space:pre-wrap;" ], ae);
+    le(se, "contextType", c);
+    le(se, "propTypes", ue);
+    le(se, "defaultProps", ce);
+    /* harmony default export */    const fe = se;
     // CONCATENATED MODULE: ./src/JSONTree/JSONTree.tsx
-    function ue() {
-        ue = Object.assign || function(e) {
+    function pe() {
+        pe = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -575,30 +591,30 @@
             }
             return e;
         };
-        return ue.apply(this, arguments);
+        return pe.apply(this, arguments);
     }
-    function ce(e, r) {
-        return ve(e) || de(e, r) || fe(e, r) || se();
+    function de(e, r) {
+        return me(e) || be(e, r) || ye(e, r) || ve();
     }
-    function se() {
+    function ve() {
         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 fe(e, r) {
+    function ye(e, r) {
         if (!e) return;
-        if (typeof e === "string") return pe(e, r);
+        if (typeof e === "string") return he(e, r);
         var t = Object.prototype.toString.call(e).slice(8, -1);
         if (t === "Object" && e.constructor) t = e.constructor.name;
         if (t === "Map" || t === "Set") return Array.from(e);
-        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return pe(e, r);
+        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return he(e, r);
     }
-    function pe(e, r) {
+    function he(e, r) {
         if (r == null || r > e.length) r = e.length;
         for (var t = 0, n = new Array(r); t < r; t++) {
             n[t] = e[t];
         }
         return n;
     }
-    function de(e, r) {
+    function be(e, r) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var t = [];
         var n = true;
@@ -621,12 +637,12 @@
         }
         return t;
     }
-    function ve(e) {
+    function me(e) {
         if (Array.isArray(e)) return e;
     }
-    function ye(e, r) {
+    function Ce(e, r) {
         if (e == null) return {};
-        var t = be(e, r);
+        var t = Se(e, r);
         var n, o;
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
@@ -639,7 +655,7 @@
         }
         return t;
     }
-    function be(e, r) {
+    function Se(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
@@ -651,52 +667,54 @@
         }
         return t;
     }
-    var he = {
+    var Oe = {
         elementRef: a().oneOfType([ a().func, a().object ]),
-        json: a().oneOfType([ a().string, a().object, a().array, a().number, a().bool ]).isRequired,
+        expandChildren: a().oneOfType([ a().bool, a().oneOf([ "withShiftModifier" ]) ]),
         indent: a().number,
+        json: a().oneOfType([ a().string, a().object, a().array, a().number, a().bool ]).isRequired,
         onClickKey: a().func,
         onClickValue: a().func,
-        expandChildren: a().oneOfType([ a().bool, a().oneOf([ "withShiftModifier" ]) ]),
-        overflow: a().oneOf([ "wrap", "scroll" ])
+        overflow: a().oneOf([ "wrap", "scroll" ]),
+        expandChildrenOnShiftKey: a().bool
     };
     /**
  * Used to visualize a JSON string.
- */    function me(e) {
-        var r = e.elementRef, o = e.expandChildren, a = o === void 0 ? false : o, i = e.indent, u = i === void 0 ? 4 : i, s = e.json, f = e.onClickKey, p = e.onClickValue, d = e.overflow, v = d === void 0 ? "scroll" : d, y = ye(e, [ "elementRef", "expandChildren", "indent", "json", "onClickKey", "onClickValue", "overflow" ]);
+ */    function ke(e) {
+        var r = e.elementRef, o = e.expandChildren, a = o === void 0 ? false : o, i = e.indent, u = i === void 0 ? 4 : i, s = e.json, f = e.onClickKey, p = e.onClickValue, d = e.overflow, h = d === void 0 ? "scroll" : d, b = e.expandChildrenOnShiftKey, m = b === void 0 ? false : b, C = Ce(e, [ "elementRef", "expandChildren", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
         // @docs-props-type JSONTreePropsBase
-                var b = l()(s) ? JSON.parse(s) : s;
-        var h = v === "wrap" ? le : ie;
-        var m = (0, t.useState)(undefined), k = ce(m, 2), g = k[0], w = k[1];
-        var C = function e(r) {
-            w(r);
+                var S = l()(s) ? JSON.parse(s) : s;
+        var O = h === "wrap" ? y : v;
+        var k = (0, t.useState)(undefined), w = de(k, 2), g = w[0], x = w[1];
+        var j = function e(r) {
+            x(r);
         };
  // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
-                var S = {
+                var T = {
             shift: g,
-            updateShift: C
+            updateShift: j
         };
         
-        return n().createElement(h, ue({
+        return n().createElement(O, pe({
             "data-language": "language-json",
             "data-test": "json-tree",
             ref: r,
             role: "tree"
-        }, y),  n().createElement(c.Provider, {
-            value: S
-        },  n().createElement(oe, {
+        }, C),  n().createElement(c.Provider, {
+            value: T
+        },  n().createElement(fe, {
             defaultOpen: true,
             expandChildren: a,
             indent: u,
-            obj: b,
+            obj: S,
             onClickKey: f,
             onClickValue: p,
-            overflow: v,
+            overflow: h,
+            expandChildrenOnShiftKey: m,
             shift: g
         })));
     }
-    me.propTypes = he;
-    /* harmony default export */    const ke = me;
+    ke.propTypes = Oe;
+    /* harmony default export */    const we = ke;
     // CONCATENATED MODULE: ./src/JSONTree/index.ts
     module.exports = r;
     /******/})();