@splunk/react-ui 4.35.0 → 4.36.0

package/JSONTree.js

@@ -60,7 +60,7 @@
                 return b.apply(this, arguments);
             }
             function m(e, r) {
-                return k(e) || w(e, r) || g(e, r) || h();
+                return w(e) || k(e, r) || g(e, r) || h();
             }
             function h() {
                 throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -80,7 +80,7 @@
                 }
                 return t;
             }
-            function w(e, r) {
+            function k(e, r) {
                 if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
                 var n = [];
                 var t = true;
@@ -103,7 +103,7 @@
                 }
                 return n;
             }
-            function k(e) {
+            function w(e) {
                 if (Array.isArray(e)) return e;
             }
             function O(e, r) {
@@ -133,7 +133,7 @@
                 }
                 return n;
             }
-            var C = {
+            var I = {
                 id: i().string,
                 children: i().node,
                 content: i().node,
@@ -146,19 +146,19 @@
                 open: i().bool,
                 toggle: i().node
             };
-            function I(e) {
-                var r = e.id, n = e.children, a = e.content, i = e.customIndent, l = e.endAdornment, u = e.labelledBy, f = e.onFocus, d = e.onKeyDown, v = e.onToggle, h = e.open, g = h === void 0 ? true : h, S = e.toggle, w = O(e, [ "id", "children", "content", "customIndent", "endAdornment", "labelledBy", "onFocus", "onKeyDown", "onToggle", "open", "toggle" ]);
-                var k = (0, t.useContext)(c), x = k.defaultIndent, C = x === void 0 ? true : x, I = k.onItemKeyDown, j = k.onItemClick, E = k.removeNode, T = k.setNode, A = k.itemPaths, P = k.focusedItemId;
+            function C(e) {
+                var r = e.id, n = e.children, a = e.content, i = e.customIndent, l = e.endAdornment, u = e.labelledBy, f = e.onFocus, d = e.onKeyDown, v = e.onToggle, h = e.open, g = h === void 0 ? true : h, S = e.toggle, k = O(e, [ "id", "children", "content", "customIndent", "endAdornment", "labelledBy", "onFocus", "onKeyDown", "onToggle", "open", "toggle" ]);
+                var w = (0, t.useContext)(c), x = w.defaultIndent, I = x === void 0 ? true : x, C = w.onItemKeyDown, j = w.onItemClick, E = w.removeNode, A = w.setNode, T = w.itemPaths, P = w.focusedItemId;
                 var R = (0, t.useState)(g), K = m(R, 2), _ = K[0], N = K[1];
  // make first tree item tabbable
-                                var D = (0, t.useState)((A === null || A === void 0 ? void 0 : A.get("".concat(r))) === "0" ? 0 : -1), L = m(D, 2), q = L[0], V = L[1];
+                                var D = (0, t.useState)((T === null || T === void 0 ? void 0 : T.get("".concat(r))) === "0" ? 0 : -1), V = m(D, 2), L = V[0], q = V[1];
                 var F = (0, t.useRef)(null);
                 var M = (0, t.useRef)(null);
                 var $ = t.Children.toArray(n).filter(t.isValidElement);
                 $.forEach((function(e, n) {
                     if (e.props.id) {
-                        if (_ && T) {
-                            T("".concat(e.props.id), "".concat(A === null || A === void 0 ? void 0 : A.get("".concat(r)), "-").concat(n));
+                        if (_ && A) {
+                            A("".concat(e.props.id), "".concat(T === null || T === void 0 ? void 0 : T.get("".concat(r)), "-").concat(n));
                         } else if (E) {
                             E(e.props.id);
                         }
@@ -178,8 +178,8 @@
                     f === null || f === void 0 ? void 0 : f(r);
                 };
                 var H = function e() {
-                    if ((A === null || A === void 0 ? void 0 : A.get("".concat(r))) === "0") {
-                        V(0);
+                    if ((T === null || T === void 0 ? void 0 : T.get("".concat(r))) === "0") {
+                        q(0);
                     }
                 };
                 (0, t.useEffect)((function() {
@@ -195,10 +195,10 @@
                     n.stopPropagation();
  // Used to ensure first item in Tree is tab navigable, i.e. in JSONTree when focus is manually set to the root item,
                     // this allows user to tab backwards to previous item. Tab index is reset to 0 onBlur.
-                                        if (n.shiftKey && n.key === "Tab" && (A === null || A === void 0 ? void 0 : A.get("".concat(r))) === "0") {
-                        V(-1);
+                                        if (n.shiftKey && n.key === "Tab" && (T === null || T === void 0 ? void 0 : T.get("".concat(r))) === "0") {
+                        q(-1);
                     }
-                    I === null || I === void 0 ? void 0 : I(n, r, _, $, J);
+                    C === null || C === void 0 ? void 0 : C(n, r, _, $, J);
                     d === null || d === void 0 ? void 0 : d(n);
                 };
                 var W = function e() {
@@ -217,9 +217,9 @@
                     });
                 };
                 
-                return o().createElement("li", b({}, w, {
+                return o().createElement("li", b({}, k, {
                     ref: M,
-                    tabIndex: q,
+                    tabIndex: L,
                     onBlur: H,
                     onFocus: B,
                     onKeyDown: z,
@@ -233,19 +233,19 @@
                     onClick: U
                 },  o().createElement(s, null, a), W(), !_ && l), _ &&  o().createElement(o().Fragment, null,  o().createElement(y, {
                     role: "group",
-                    $defaultIndent: C
+                    $defaultIndent: I
                 }, n), l));
             }
-            I.propTypes = C;
-            /* harmony default export */            const j = I;
+            C.propTypes = I;
+            /* harmony default export */            const j = C;
             // CONCATENATED MODULE: ./src/Tree/treeUtils.ts
             function E(e, r) {
-                return K(e) || R(e, r) || A(e, r) || T();
+                return K(e) || R(e, r) || T(e, r) || A();
             }
-            function T() {
+            function A() {
                 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 A(e, r) {
+            function T(e, r) {
                 if (!e) return;
                 if (typeof e === "string") return P(e, r);
                 var n = Object.prototype.toString.call(e).slice(8, -1);
@@ -309,14 +309,14 @@
             }
             /**
  * A helper function to get the last index number of an item path string
- */            function L(e) {
+ */            function V(e) {
                 var r = e.split("-").pop();
                 if (!r) {
                     return 0;
                 }
                 return parseInt(r, 10) || 0;
             }
-            function q(e, r) {
+            function L(e, r) {
                 var n = e.get(r);
                 if (!n) {
                     return r;
@@ -326,20 +326,20 @@
             }
             /**
  * A helper function for getNextTreeItem
- */            function V(e, r) {
+ */            function q(e, r) {
                 var n = N(r);
                 if (!n) {
                     return _(e, r);
                 }
  // get next node in the parent level
-                                var t = L(n);
+                                var t = V(n);
                 var o = D(n, t);
                 var a = _(e, o);
                 if (a) {
                     return a;
                 }
  // continue getting parents until find next node or reach root
-                                return V(e, o);
+                                return q(e, o);
             }
             function F(e, r) {
                 var n = e.get(r);
@@ -352,14 +352,14 @@
                     return t;
                 }
  // case where next tree item is the next node in the same level
-                                var o = L(n);
+                                var o = V(n);
                 var a = D(n, o);
                 var i = _(e, a);
                 if (i) {
                     return i;
                 }
  // case where next tree item is a higher level or does not exist
-                                return V(e, n) || r;
+                                return q(e, n) || r;
             }
             /**
  * A helper function for getPrevTreeItem
@@ -372,7 +372,7 @@
                 var o = "".concat(r, "-0");
  // get the last child in current node, and continue to find its children recursively
                                 while (t) {
-                    var a = L(o);
+                    var a = V(o);
                     var i = D(o, a);
                     t = _(e, i);
                     if (t) {
@@ -386,10 +386,10 @@
                 if (!n) {
                     return r;
                 }
-                var t = L(n);
+                var t = V(n);
  // case where current is first child of parent or root item
                                 if (t === 0) {
-                    return q(e, r);
+                    return L(e, r);
                 }
  // case where previous tree item is or is a child of previous node in same level
                                 var o = n.replace(/[^-]+$/, "".concat(t - 1));
@@ -404,7 +404,7 @@
                 var t = r;
  // find last child in current node
                                 while (n) {
-                    var o = L(t);
+                    var o = V(t);
                     n = _(e, D(t, o));
                     if (n) {
                         t = D(t, o);
@@ -535,7 +535,7 @@
                         if (t && (o === null || o === void 0 ? void 0 : o.length)) {
                             a(false, r);
                         } else {
-                            v(q(s, n));
+                            v(L(s, n));
                         }
                         break;
 
@@ -705,7 +705,7 @@
         n.r(t);
         // EXPORTS
                 n.d(t, {
-            default: () => /* reexport */ ke
+            default: () => /* reexport */ xe
         });
         // EXTERNAL MODULE: external "react"
                 var e = n(9497);
@@ -744,22 +744,22 @@
         var g =  n.n(h);
         // CONCATENATED MODULE: external "lodash/isNumber"
         const S = require("lodash/isNumber");
-        var w =  n.n(S);
+        var k =  n.n(S);
         // CONCATENATED MODULE: external "lodash/isObject"
-        const k = require("lodash/isObject");
-        var O =  n.n(k);
+        const w = require("lodash/isObject");
+        var O =  n.n(w);
         // CONCATENATED MODULE: external "lodash/keys"
         const x = require("lodash/keys");
-        var C =  n.n(x);
+        var I =  n.n(x);
         // CONCATENATED MODULE: external "lodash/repeat"
-        const I = require("lodash/repeat");
-        var j =  n.n(I);
+        const C = require("lodash/repeat");
+        var j =  n.n(C);
         // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
         const E = require("@splunk/ui-utils/i18n");
         // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
-                var T = n(5295);
+                var A = n(5295);
         // EXTERNAL MODULE: ./src/Tree/index.ts + 6 modules
-                var A = n(4610);
+                var T = n(4610);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeItem.tsx
         function P() {
             P = Object.assign || function(e) {
@@ -776,7 +776,7 @@
             return P.apply(this, arguments);
         }
         function R(e, r) {
-            return L(e) || D(e, r) || _(e, r) || K();
+            return V(e) || D(e, r) || _(e, r) || K();
         }
         function K() {
             throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -819,12 +819,12 @@
             }
             return n;
         }
-        function L(e) {
+        function V(e) {
             if (Array.isArray(e)) return e;
         }
-        function q(e, r) {
+        function L(e, r) {
             if (e == null) return {};
-            var n = V(e, r);
+            var n = q(e, r);
             var t, o;
             if (Object.getOwnPropertySymbols) {
                 var a = Object.getOwnPropertySymbols(e);
@@ -837,7 +837,7 @@
             }
             return n;
         }
-        function V(e, r) {
+        function q(e, r) {
             if (e == null) return {};
             var n = {};
             var t = Object.keys(e);
@@ -864,33 +864,34 @@
             value: a().oneOfType([ a().string, a().object, a().array, a().number, a().bool ])
         };
         function M(n) {
-            var t = n.clickableKeyRef, o = n.clickableValRef, a = n.hasChildren, i = n.indentArray, l = n.index, u = n.initialOpenState, c = n.onFocus, f = n.properties, d = n.propertyDataPath, v = n.propertyElement, s = n.renderExpandLink, p = n.representation, y = n.value, b = q(n, [ "clickableKeyRef", "clickableValRef", "hasChildren", "indentArray", "index", "initialOpenState", "onFocus", "properties", "propertyDataPath", "propertyElement", "renderExpandLink", "representation", "value" ]);
-            var h = (0, e.useState)(u), g = R(h, 2), S = g[0], w = g[1];
-            var k = function e(r) {
-                w(r);
+            var t = n.clickableKeyRef, o = n.clickableValRef, a = n.hasChildren, i = n.indentArray, l = n.index, u = n.initialOpenState, c = n.onFocus, f = n.properties, d = n.propertyDataPath, v = n.propertyElement, s = n.renderExpandLink, p = n.representation, y = n.value, b = L(n, [ "clickableKeyRef", "clickableValRef", "hasChildren", "indentArray", "index", "initialOpenState", "onFocus", "properties", "propertyDataPath", "propertyElement", "renderExpandLink", "representation", "value" ]);
+            var h = (0, e.useState)(u), g = R(h, 2), S = g[0], k = g[1];
+            var w = function e(r) {
+                k(r);
             };
-            var O = s ? s({
+            var O = (0, e.useRef)(null);
+            var x = s ? s({
                 open: S,
-                withTooltip: true
+                withTooltip: true,
+                expandLinkRef: O
             }) : {
-                expandLink: undefined,
-                expandLinkRef: undefined
-            }, x = O.expandLink, C = O.expandLinkRef;
-            var I = (f === null || f === void 0 ? void 0 : f.length) && l + 1 < (f === null || f === void 0 ? void 0 : f.length) ? "," : null;
+                expandLink: undefined
+            }, I = x.expandLink;
+            var C = (f === null || f === void 0 ? void 0 : f.length) && l + 1 < (f === null || f === void 0 ? void 0 : f.length) ? "," : null;
             
-            return r().createElement(A["default"].TreeItem, P({
-                content:  r().createElement(r().Fragment, null, v, a && (m()(y) ? "[" : "{"), !a &&  r().createElement(r().Fragment, null, p, I)),
+            return r().createElement(T["default"].TreeItem, P({
+                content:  r().createElement(r().Fragment, null, v, a && (m()(y) ? "[" : "{"), !a &&  r().createElement(r().Fragment, null, p, C)),
                 customIndent: i,
                 "data-test": a ? "node" : null,
                 "data-test-path": d,
-                endAdornment: a &&  r().createElement(r().Fragment, null, S && i, m()(y) ? "]" : "}", I),
+                endAdornment: a &&  r().createElement(r().Fragment, null, S && i, m()(y) ? "]" : "}", C),
                 onFocus: function e(r) {
                     c === null || c === void 0 ? void 0 : c(r);
  // check if onFocus was triggered by a click event or expand link
-                                        var n = r.relatedTarget === (t === null || t === void 0 ? void 0 : t.current) || r.relatedTarget === (o === null || o === void 0 ? void 0 : o.current) || r.relatedTarget === (C === null || C === void 0 ? void 0 : C.current) ? r.relatedTarget : null;
+                                        var n = r.relatedTarget === (t === null || t === void 0 ? void 0 : t.current) || r.relatedTarget === (o === null || o === void 0 ? void 0 : o.current) || r.relatedTarget === (O === null || O === void 0 ? void 0 : O.current) ? r.relatedTarget : null;
                     if (b.id === "root") {
                         var a;
-                        C === null || C === void 0 ? void 0 : (a = C.current) === null || a === void 0 ? void 0 : a.focus();
+                        O === null || O === void 0 ? void 0 : (a = O.current) === null || a === void 0 ? void 0 : a.focus();
                     }
                     if (!n) {
                         // if JSONTreeItem contains clickable keys/vals, focus should go there
@@ -905,10 +906,10 @@
                         n.focus();
                     }
                 },
-                onToggle: k,
+                onToggle: w,
                 open: u,
                 tabIndex: 0,
-                toggle: a ? x : undefined
+                toggle: a ? I : undefined
             }, b), a && p);
         }
         M.propTypes = F;
@@ -1028,33 +1029,81 @@
             return t;
         }
         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 _;
-            var N;
-            var D = function e() {
-                if (i === true) {
-                    return o;
+            var t = n.id, o = n.childKey, a = n.index, i = n.value, l = n.properties, u = n.propertyDataPath, c = n.obj, f = n.renderValue, d = n.renderKey, v = n.getInitialOpenState, s = n.indentArray, p = n.renderExpandLink, y = n.onFocus;
+            var b = (0, e.useRef)(null);
+            var h = (0, e.useRef)(null);
+            var S = f({
+                key: o,
+                value: i,
+                clickValueRef: b
+            }), k = S.representation, w = S.clickableValRef;
+            var x = !m()(c) ? d(o, h) : {
+                propertyElement: undefined,
+                clickableKeyRef: undefined
+            }, I = x.propertyElement, C = x.clickableKeyRef;
+            var j = O()(i) && !g()(i) || m()(i) && i.length > 0;
+            
+            return r().createElement(M, {
+                id: t,
+                propertyDataPath: u,
+                propertyElement: I,
+                hasChildren: j,
+                initialOpenState: v(),
+                representation: k,
+                indentArray: s,
+                value: i,
+                index: a,
+                properties: l,
+                renderExpandLink: p,
+                clickableKeyRef: C,
+                clickableValRef: w,
+                onFocus: function e() {
+                    y(C, w);
+                }
+            });
+        }
+        function de(n) {
+            var t = n.renderValue, o = n.obj;
+            var a = (0, e.useRef)(null);
+            var i = t({
+                value: o,
+                clickValueRef: a
+            }), l = i.representation;
+            
+            return r().createElement(T["default"].TreeItem, {
+                id: "0",
+                "data-test-path": ".",
+                content: l
+            });
+        }
+        function ve(e) {
+            var n = e.defaultOpen, t = n === void 0 ? false : n, o = e.expandChildren, a = o === void 0 ? false : o, i = e.expandChildrenOnShiftKey, u = i === void 0 ? false : i, c = e.indent, f = c === void 0 ? 4 : c, d = e.indentLevel, v = d === void 0 ? 1 : d, s = e.obj, p = e.onClickKey, b = e.onClickValue, h = e.overflow, S = h === void 0 ? "scroll" : h, w = e.path, x = w === void 0 ? [] : w, C = e.shift, T = e.updateShift;
+            var P = y()(Array(v), j()(" ", f));
+            var R;
+            var K;
+            var _ = function e() {
+                if (a === true) {
+                    return t;
                 }
-                if (i === "withShiftModifier" || c) {
-                    return !!P;
+                if (a === "withShiftModifier" || u) {
+                    return !!C;
                 }
                 return false;
             };
-            var L = function e(r) {
-                if (i === "withShiftModifier" || c) {
-                    if (R != null) {
-                        R(r.shiftKey);
+            var N = function e(r) {
+                if (a === "withShiftModifier" || u) {
+                    if (T != null) {
+                        T(r.shiftKey);
                     }
                 }
             };
-            var q = function e(r, n) {
+            var D = 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(oe(I), [ n ]) : oe(I);
+                                var a = n !== undefined ? [].concat(oe(x), [ n ]) : oe(x);
                 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, {
+                (t = K) === null || t === void 0 ? void 0 : (o = t.current) === null || o === void 0 ? void 0 : o.focus();
+                p === null || p === void 0 ? void 0 : p(r, {
                     key: i,
                     keyPath: a
                 });
@@ -1062,212 +1111,196 @@
             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(oe(I), [ n ]) : oe(I);
+                                var a = n !== undefined ? [].concat(oe(x), [ n ]) : oe(x);
                 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, {
+                (t = R) === 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, {
                     key: i,
                     keyPath: a,
                     value: r.target.textContent
                 });
             };
-            var F = function e(r, n) {
+            var L = function e(r, n) {
                 var t, o;
-                var a = (0, T.keycode)(r.nativeEvent);
-                if (a === "left" && b && ((t = N) === null || t === void 0 ? void 0 : t.current) && !n) {
+                var a = (0, A.keycode)(r.nativeEvent);
+                if (a === "left" && p && ((t = K) === null || t === void 0 ? void 0 : t.current) && !n) {
                     var i;
                     r.stopPropagation();
-                    (i = N.current) === null || i === void 0 ? void 0 : i.focus();
+                    (i = K.current) === null || i === void 0 ? void 0 : i.focus();
                 }
-                if (a === "right" && h && ((o = _) === null || o === void 0 ? void 0 : o.current) && n) {
+                if (a === "right" && b && ((o = R) === null || o === void 0 ? void 0 : o.current) && n) {
                     var l;
                     r.stopPropagation();
-                    (l = _.current) === null || l === void 0 ? void 0 : l.focus();
+                    (l = R.current) === null || l === void 0 ? void 0 : l.focus();
                 }
             };
-            var $ = function n(t) {
-                var o = t.open, a = t.withTooltip;
-                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(re, {
-                    elementRef: u,
+            var q = function e(n) {
+                var t = n.open, o = n.withTooltip, a = n.expandLinkRef;
+                var i = t ? "[-]" : "[+]";
+                var l = t ? (0, E._)("Collapse all") : (0, E._)("Shift click to expand all");
+                var c =  r().createElement(re, {
+                    elementRef: a,
                     tabIndex: -1,
                     onClick: function e(r) {
-                        L(r);
+                        N(r);
                     },
-                    "aria-expanded": o,
+                    "aria-expanded": t,
                     "data-test": "toggle"
                 }, " ", i, " ");
-                if (c && a) {
+                if (u && o) {
                     return {
                         expandLink:  r().createElement(ne, {
                             contentRelationship: "description",
                             openDelay: "secondary",
                             defaultPlacement: "above",
                             content: (0, E._)(l)
-                        }, f),
-                        expandLinkRef: u
+                        }, c),
+                        expandLinkRef: a
                     };
                 }
                 return {
-                    expandLink: f,
-                    expandLinkRef: u
+                    expandLink: c,
+                    expandLinkRef: a
                 };
             };
-            var J = function n(t) {
-                var o = t.value, a = t.key;
-                var u;
-                var f = (0, e.useRef)(null);
-                if (!O()(o)) {
-                    if (typeof o === "string") {
-                        u = '"'.concat(o, '"');
-                    } else if (typeof o === "boolean") {
-                        u = o.toString();
-                    } else if (o === null) {
-                        u = "null";
+            var F = function e(n) {
+                var t = n.value, o = n.key, i = n.clickValueRef;
+                var c;
+                if (!O()(t)) {
+                    if (typeof t === "string") {
+                        c = '"'.concat(t, '"');
+                    } else if (typeof t === "boolean") {
+                        c = t.toString();
+                    } else if (t === null) {
+                        c = "null";
                     } else {
-                        u = o;
+                        c = t;
                     }
-                } else if (g()(o)) {
+                } else if (g()(t)) {
                     // isObject is true for arrays
-                    u = m()(o) ? "[]" : "{}";
+                    c = m()(t) ? "[]" : "{}";
                 } else {
-                    u = fe({
-                        defaultOpen: i === true,
-                        expandChildren: i,
-                        expandChildrenOnShiftKey: c,
-                        onClickKey: b,
-                        onClickValue: h,
-                        overflow: k,
-                        obj: o,
-                        path: a !== undefined ? [].concat(oe(I), [ a ]) : oe(I),
-                        indentLevel: s + 1,
-                        shift: P,
-                        updateShift: R
+                    c = ve({
+                        defaultOpen: a === true,
+                        expandChildren: a,
+                        expandChildrenOnShiftKey: u,
+                        onClickKey: p,
+                        onClickValue: b,
+                        overflow: S,
+                        obj: t,
+                        path: o !== undefined ? [].concat(oe(x), [ o ]) : oe(x),
+                        indentLevel: v + 1,
+                        shift: C,
+                        updateShift: T
                     });
                 }
-                if (l()(u) || w()(u)) {
-                    var d = o === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
-                    te(o);
-                    if (h) {
+                if (l()(c) || k()(c)) {
+                    var f = t === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
+                    te(t);
+                    if (b) {
                         return {
                             representation:  r().createElement(Q, {
-                                elementRef: f,
-                                valueType: d,
-                                overflowType: k,
+                                elementRef: i,
+                                valueType: f,
+                                overflowType: S,
                                 onClick: function e(r) {
-                                    _ = f;
-                                    V(r, a);
+                                    R = i;
+                                    V(r, o);
                                 },
                                 onKeyDown: function e(r) {
-                                    F(r, false);
+                                    L(r, false);
                                 },
                                 tabIndex: -1
-                            }, u),
-                            clickableValRef: f
+                            }, c),
+                            clickableValRef: i
                         };
                     }
                     return {
                         representation:  r().createElement(G, {
-                            valueType: d,
-                            overflowType: k
-                        }, u)
+                            valueType: f,
+                            overflowType: S
+                        }, c)
                     };
                 }
                 return {
-                    representation: u
+                    representation: c
                 };
             };
-            var U = function n(t) {
-                var o = (0, e.useRef)(null);
-                if (b) {
+            var $ = function e(n, t) {
+                if (p) {
                     return {
                         propertyElement:  r().createElement("span", null,  r().createElement(ee, {
-                            elementRef: o,
+                            elementRef: t,
                             tabIndex: -1,
                             onClick: function e(r) {
-                                N = o;
-                                q(r, t);
+                                K = t;
+                                D(r, n);
                             },
                             onKeyDown: function e(r) {
-                                F(r, true);
+                                L(r, true);
                             }
-                        }, t), ":", " "),
-                        clickableKeyRef: o
+                        }, n), ":", " "),
+                        clickableKeyRef: t
                     };
                 }
                 return {
-                    propertyElement:  r().createElement("span", null,  r().createElement(Z, null, t), ":", " ")
+                    propertyElement:  r().createElement("span", null,  r().createElement(Z, null, n), ":", " ")
                 };
             };
-            if (O()(p) && !g()(p) || m()(p) && p.length > 0) {
-                var B = C()(p).map((function(e, n, t) {
-                    var o = p[e];
+            if (O()(s) && !g()(s) || m()(s) && s.length > 0) {
+                var J = I()(s).map((function(e, n, t) {
+                    var o = s[e];
  // TS: should be safe based on (recursive) JSONElement type
-                                        var a = m()(p) ? parseInt(e, 10) : e;
-                    var i = I.length === 0 ? ".".concat(a) : ".".concat(I.join("."), ".").concat(a);
-                    var l = J({
-                        key: a,
-                        value: o
-                    }), u = l.representation, c = l.clickableValRef;
-                    var f = !m()(p) ? U(a) : {
-                        propertyElement: undefined,
-                        clickableKeyRef: undefined
-                    }, d = f.propertyElement, v = f.clickableKeyRef;
-                    var s = O()(o) && !g()(o) || m()(o) && o.length > 0;
+                                        var a = m()(s) ? parseInt(e, 10) : e;
+                    var i = x.length === 0 ? ".".concat(a) : ".".concat(x.join("."), ".").concat(a);
                     
-                    return r().createElement(M, {
+                    return r().createElement(fe, {
                         id: i,
                         key: i,
                         propertyDataPath: i,
-                        propertyElement: d,
-                        hasChildren: s,
-                        initialOpenState: D(),
-                        representation: u,
-                        indentArray: K,
-                        value: o,
+                        childKey: a,
                         index: n,
+                        value: o,
                         properties: t,
-                        renderExpandLink: $,
-                        clickableKeyRef: v,
-                        clickableValRef: c,
-                        onFocus: function e() {
-                            N = v;
-                            _ = c;
+                        obj: s,
+                        renderValue: F,
+                        renderKey: $,
+                        getInitialOpenState: _,
+                        indentArray: P,
+                        renderExpandLink: q,
+                        onFocus: function e(r, n) {
+                            K = r;
+                            R = n;
                         }
                     });
                 }));
-                if (I.length === 0) {
-                    var H = O()(p) && !g()(p) || m()(p) && p.length > 0;
+                if (x.length === 0) {
+                    var U = O()(s) && !g()(s) || m()(s) && s.length > 0;
                     
                     return r().createElement(M, {
                         id: "root",
                         propertyDataPath: ".",
-                        hasChildren: H,
-                        initialOpenState: o,
-                        value: p,
+                        key: ".",
+                        hasChildren: U,
+                        initialOpenState: t,
+                        value: s,
                         index: 0,
-                        renderExpandLink: $,
-                        representation: B
+                        renderExpandLink: q,
+                        representation: J
                     });
                 }
-                return B;
+                return J;
             }
  // edge case: a single number/string/boolean being rendered (still valid JSON)
-                        var X = J({
-                value: p
-            }), z = X.representation;
-            
-            return r().createElement(A["default"].TreeItem, {
-                id: "0",
-                "data-test-path": ".",
-                content: z
+                        
+            return r().createElement(de, {
+                obj: s,
+                renderValue: F
             });
         }
         // CONCATENATED MODULE: ./src/JSONTree/JSONTree.tsx
-        function de() {
-            de = Object.assign || function(e) {
+        function se() {
+            se = Object.assign || function(e) {
                 for (var r = 1; r < arguments.length; r++) {
                     var n = arguments[r];
                     for (var t in n) {
@@ -1278,30 +1311,30 @@
                 }
                 return e;
             };
-            return de.apply(this, arguments);
+            return se.apply(this, arguments);
         }
-        function ve(e, r) {
-            return me(e) || be(e, r) || pe(e, r) || se();
+        function pe(e, r) {
+            return ge(e) || he(e, r) || be(e, r) || ye();
         }
-        function se() {
+        function ye() {
             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 pe(e, r) {
+        function be(e, r) {
             if (!e) return;
-            if (typeof e === "string") return ye(e, r);
+            if (typeof e === "string") return me(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 ye(e, r);
+            if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return me(e, r);
         }
-        function ye(e, r) {
+        function me(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 be(e, r) {
+        function he(e, r) {
             if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
             var n = [];
             var t = true;
@@ -1324,12 +1357,12 @@
             }
             return n;
         }
-        function me(e) {
+        function ge(e) {
             if (Array.isArray(e)) return e;
         }
-        function he(e, r) {
+        function Se(e, r) {
             if (e == null) return {};
-            var n = ge(e, r);
+            var n = ke(e, r);
             var t, o;
             if (Object.getOwnPropertySymbols) {
                 var a = Object.getOwnPropertySymbols(e);
@@ -1342,7 +1375,7 @@
             }
             return n;
         }
-        function ge(e, r) {
+        function ke(e, r) {
             if (e == null) return {};
             var n = {};
             var t = Object.keys(e);
@@ -1354,7 +1387,7 @@
             }
             return n;
         }
-        var Se = {
+        var we = {
             elementRef: a().oneOfType([ a().func, a().object ]),
             expandChildren: a().oneOfType([ a().bool, a().oneOf([ "withShiftModifier" ]) ]),
             indent: a().number,
@@ -1366,24 +1399,24 @@
         };
         /**
  * Used to visualize a JSON string.
- */        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" ]);
+ */        function Oe(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 = Se(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 = ve(w, 2), O = k[0], x = k[1];
-            var C = function e(r) {
+            var k = (0, e.useState)(undefined), w = pe(k, 2), O = w[0], x = w[1];
+            var I = function e(r) {
                 x(r);
             };
             
-            return r().createElement(S, de({
+            return r().createElement(S, se({
                 "data-language": "language-json",
                 "data-test": "json-tree",
                 ref: t,
                 role: "tree"
-            }, h),  r().createElement(A["default"], {
+            }, h),  r().createElement(T["default"], {
                 defaultIndent: false
-            }, fe({
+            }, ve({
                 defaultOpen: true,
                 expandChildren: a,
                 expandChildrenOnShiftKey: m,
@@ -1393,11 +1426,11 @@
                 onClickValue: d,
                 overflow: y,
                 shift: O,
-                updateShift: C
+                updateShift: I
             })));
         }
-        we.propTypes = Se;
-        /* harmony default export */        const ke = we;
+        Oe.propTypes = we;
+        /* harmony default export */        const xe = Oe;
     }) // CONCATENATED MODULE: ./src/JSONTree/index.ts
     ();
     module.exports = t;