@splunk/react-ui 5.1.0 → 5.3.0

package/JSONTree.js

@@ -14,10 +14,10 @@
             var o =  r.n(t);
             // EXTERNAL MODULE: external "prop-types"
                         var a = r(23);
-            var l =  r.n(a);
+            var i =  r.n(a);
             // EXTERNAL MODULE: external "styled-components"
-                        var i = r(232);
-            var u =  r.n(i);
+                        var l = r(232);
+            var u =  r.n(l);
             // EXTERNAL MODULE: external "@splunk/themes"
                         var c = r(3563);
             // CONCATENATED MODULE: ./src/Tree/ItemStyles.ts
@@ -32,7 +32,10 @@
             var s = u().span.withConfig({
                 displayName: "ItemStyles__StyledTreeItemContent",
                 componentId: "sc-1ig9nmy-2"
-            })([ "min-height:100%;&:focus{outline:3px solid ", ";outline-offset:1px;&:active{outline:none;}}&:hover{background-color:", ";cursor:pointer;}" ], c.variables.focusColor, c.variables.actionColorBackgroundSecondaryHover);
+            })([ "display:", ";min-height:100%;&:focus{outline:3px solid ", ";outline-offset:1px;&:active{outline:none;}}&:hover{background-color:", ";cursor:pointer;}" ], (function(e) {
+                var n = e.$hasCustomIndent;
+                return n ? "inline" : "inline-block";
+            }), c.variables.focusColor, c.variables.actionColorBackgroundSecondaryHover);
             // CONCATENATED MODULE: ./src/Tree/TreeContext.tsx
             var v =  (0, t.createContext)({
                 defaultIndent: true
@@ -42,9 +45,9 @@
             var y = u().ul.withConfig({
                 displayName: "TreeStyles__StyledUnorderedList",
                 componentId: "sc-13pokwt-0"
-            })([ "", ";color:inherit;font-family:inherit;list-style:none;white-space:inherit;", ";" ], c.mixins.reset("ul"), (function(e) {
+            })([ "", ";list-style:none;white-space:inherit;", ";" ], c.mixins.reset("ul"), (function(e) {
                 var n = e.$defaultIndent;
-                return n && (0, i.css)([ "padding-inline-start:", ";" ], c.variables.spacingXXXLarge);
+                return n && (0, l.css)([ "padding-inline-start:", ";" ], c.variables.spacingXXXLarge);
             }));
             // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
             /**
@@ -99,22 +102,22 @@
                 for (var n = 1; n < arguments.length; n++) {
                     var r = null != arguments[n] ? arguments[n] : {};
                     n % 2 ? g(Object(r), !0).forEach((function(n) {
-                        w(e, n, r[n]);
+                        O(e, n, r[n]);
                     })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : g(Object(r)).forEach((function(n) {
                         Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
                     }));
                 }
                 return e;
             }
-            function w(e, n, r) {
-                return (n = O(n)) in e ? Object.defineProperty(e, n, {
+            function O(e, n, r) {
+                return (n = w(n)) in e ? Object.defineProperty(e, n, {
                     value: r,
                     enumerable: !0,
                     configurable: !0,
                     writable: !0
                 }) : e[n] = r, e;
             }
-            function O(e) {
+            function w(e) {
                 var n = k(e, "string");
                 return "symbol" == b(n) ? n : n + "";
             }
@@ -129,57 +132,57 @@
                 return ("string" === n ? String : Number)(e);
             }
             function I(e, n) {
-                return A(e) || C(e, n) || j(e, n) || x();
+                return T(e) || E(e, n) || j(e, n) || x();
             }
             function x() {
                 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 j(e, n) {
                 if (e) {
-                    if ("string" == typeof e) return E(e, n);
+                    if ("string" == typeof e) return C(e, n);
                     var r = {}.toString.call(e).slice(8, -1);
-                    return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? E(e, n) : void 0;
+                    return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? C(e, n) : void 0;
                 }
             }
-            function E(e, n) {
+            function C(e, n) {
                 (null == n || n > e.length) && (n = e.length);
                 for (var r = 0, t = Array(n); r < n; r++) {
                     t[r] = e[r];
                 }
                 return t;
             }
-            function C(e, n) {
+            function E(e, n) {
                 var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
                 if (null != r) {
-                    var t, o, a, l, i = [], u = !0, c = !1;
+                    var t, o, a, i, l = [], u = !0, c = !1;
                     try {
                         if (a = (r = r.call(e)).next, 0 === n) {
                             if (Object(r) !== r) return;
                             u = !1;
-                        } else for (;!(u = (t = a.call(r)).done) && (i.push(t.value), i.length !== n); u = !0) {
+                        } else for (;!(u = (t = a.call(r)).done) && (l.push(t.value), l.length !== n); u = !0) {
                         }
                     } catch (e) {
                         c = !0, o = e;
                     } finally {
                         try {
-                            if (!u && null != r["return"] && (l = r["return"](), Object(l) !== l)) return;
+                            if (!u && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
                         } finally {
                             if (c) throw o;
                         }
                     }
-                    return i;
+                    return l;
                 }
             }
-            function A(e) {
+            function T(e) {
                 if (Array.isArray(e)) return e;
             }
-            function T(e, n) {
+            function A(e, n) {
                 if (null == e) return {};
                 var r, t, o = P(e, n);
                 if (Object.getOwnPropertySymbols) {
                     var a = Object.getOwnPropertySymbols(e);
                     for (t = 0; t < a.length; t++) {
-                        r = a[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+                        r = a[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
                     }
                 }
                 return o;
@@ -189,50 +192,49 @@
                 var r = {};
                 for (var t in e) {
                     if ({}.hasOwnProperty.call(e, t)) {
-                        if (n.includes(t)) continue;
+                        if (-1 !== n.indexOf(t)) continue;
                         r[t] = e[t];
                     }
                 }
                 return r;
             }
             var R = {
-                id: l().string,
-                children: l().node,
-                content: l().node,
-                customIndent: l().node,
-                elementRef: l().oneOfType([ l().func, l().object ]),
-                endAdornment: l().node,
-                expanded: l().bool,
-                labelledBy: l().string,
-                onFocus: l().func,
-                onKeyDown: l().func,
-                onToggleSelection: l().func,
-                onToggleExpansion: l().func
+                id: i().string,
+                children: i().node,
+                content: i().node,
+                customIndent: i().node,
+                elementRef: i().oneOfType([ i().func, i().object ]),
+                endAdornment: i().node,
+                expanded: i().bool,
+                onFocus: i().func,
+                onKeyDown: i().func,
+                onToggleSelection: i().func,
+                onToggleExpansion: i().func
             };
             /** @public */
-            /** @public */            function K(e) {
-                var n = e.id, r = e.children, a = e.content, l = e.customIndent, i = e.elementRef, u = e.endAdornment, c = e.expanded, v = e.labelledBy, b = e.onFocus, g = e.onKeyDown, w = e.onToggleExpansion, O = e.onToggleSelection, k = T(e, [ "id", "children", "content", "customIndent", "elementRef", "endAdornment", "expanded", "labelledBy", "onFocus", "onKeyDown", "onToggleExpansion", "onToggleSelection" ]);
+            /** @public */            function _(e) {
+                var n = e.id, r = e.children, a = e.content, i = e.customIndent, l = e.elementRef, u = e.endAdornment, c = e.expanded, v = e.onFocus, b = e.onKeyDown, g = e.onToggleExpansion, O = e.onToggleSelection, w = A(e, [ "id", "children", "content", "customIndent", "elementRef", "endAdornment", "expanded", "onFocus", "onKeyDown", "onToggleExpansion", "onToggleSelection" ]);
                 // @docs-props-type TreeItemPropsBase
-                                var x = (0, t.useContext)(p), j = x.defaultIndent, E = j === void 0 ? true : j, C = x.onItemKeyDown, A = x.onItemClick, P = x.removeNode, R = x.setNode, K = x.itemPaths, _ = x.focusedItemId;
+                                var k = (0, t.useContext)(p), x = k.defaultIndent, j = x === void 0 ? true : x, C = k.onItemKeyDown, E = k.onItemClick, T = k.removeNode, P = k.setNode, R = k.itemPaths, _ = k.focusedItemId;
  // make first tree item tabbable
-                                var D = (0, t.useState)((K === null || K === void 0 ? void 0 : K.get("".concat(n))) === "0" ? 0 : -1), N = I(D, 2), V = N[0], L = N[1];
-                var F = (0, t.useRef)(null);
+                                var K = (0, t.useState)((R === null || R === void 0 ? void 0 : R.get("".concat(n))) === "0" ? 0 : -1), D = I(K, 2), N = D[0], V = D[1];
+                var L = (0, t.useRef)(null);
                 var q = (0, t.useRef)(null);
-                var M = t.Children.toArray(r).filter(t.isValidElement);
-                M.forEach((function(e, r) {
+                var F = t.Children.toArray(r).filter(t.isValidElement);
+                F.forEach((function(e, r) {
                     if (e.props.id) {
-                        if (c && R) {
-                            R("".concat(e.props.id), "".concat(K === null || K === void 0 ? void 0 : K.get("".concat(n)), "-").concat(r));
-                        } else if (P) {
-                            P(e.props.id);
+                        if (c && P) {
+                            P("".concat(e.props.id), "".concat(R === null || R === void 0 ? void 0 : R.get("".concat(n)), "-").concat(r));
+                        } else if (T) {
+                            T(e.props.id);
                         }
                     }
                 }));
+                var M = (0, t.useCallback)((function(e) {
+                    m(L, e);
+                    m(l, e);
+                }), [ l ]);
                 var $ = (0, t.useCallback)((function(e) {
-                    m(F, e);
-                    m(i, e);
-                }), [ i ]);
-                var B = (0, t.useCallback)((function(e) {
                     var n;
                     var r = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
                     // For consistency, if not provided but found in the event then add it to `data` on callback.
@@ -241,34 +243,35 @@
                     if (!r.treeItemId && ((n = e.currentTarget) === null || n === void 0 ? void 0 : n.id)) {
                         t.treeItemId = e.currentTarget.id;
                     }
-                    w === null || w === void 0 ? void 0 : w(e, t);
-                }), [ w ]);
+                    g === null || g === void 0 ? void 0 : g(e, t);
+                }), [ g ]);
                 var J = (0, t.useCallback)((function(e) {
-                    A === null || A === void 0 ? void 0 : A(e, n);
-                }), [ n, A ]);
+                    E === null || E === void 0 ? void 0 : E(e, n);
+                }), [ n, E ]);
                 var U = (0, t.useCallback)((function(e) {
                     var n;
                     e.stopPropagation();
                     q === null || q === void 0 ? void 0 : (n = q.current) === null || n === void 0 ? void 0 : n.focus();
-                    b === null || b === void 0 ? void 0 : b(e);
-                }), [ b ]);
-                var X = (0, t.useCallback)((function() {
-                    if ((K === null || K === void 0 ? void 0 : K.get("".concat(n))) === "0") {
-                        L(0);
+                    v === null || v === void 0 ? void 0 : v(e);
+                }), [ v ]);
+                var B = (0, t.useCallback)((function() {
+                    if ((R === null || R === void 0 ? void 0 : R.get("".concat(n))) === "0") {
+                        V(0);
                     }
-                }), [ n, K ]);
+                }), [ n, R ]);
                 (0, t.useEffect)((function() {
                     if (_ === n) {
                         var e;
-                        F === null || F === void 0 ? void 0 : (e = F.current) === null || e === void 0 ? void 0 : e.focus();
+                        L === null || L === void 0 ? void 0 : (e = L.current) === null || e === void 0 ? void 0 : e.focus();
                     }
-                }), [ _, n, F ]);
-                var G = (0, t.useCallback)((function(e) {
+                }), [ _, n, L ]);
+                var X = (0, t.useCallback)((function(e) {
                     e.stopPropagation();
                 }), []);
-                var H = (0, t.useCallback)((function(e) {
+                var G = (0, t.useCallback)((function(e) {
                     e.stopPropagation();
                     if (e.key === " ") {
+                        e.preventDefault();
                         O === null || O === void 0 ? void 0 : O(e, {
                             treeItemId: n
                         });
@@ -276,41 +279,41 @@
                     }
                     // 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 (e.shiftKey && e.key === "Tab" && (K === null || K === void 0 ? void 0 : K.get("".concat(n))) === "0") {
-                        L(-1);
+                                        if (e.shiftKey && e.key === "Tab" && (R === null || R === void 0 ? void 0 : R.get("".concat(n))) === "0") {
+                        V(-1);
                     }
-                    C === null || C === void 0 ? void 0 : C(e, n, c, M, B);
-                    g === null || g === void 0 ? void 0 : g(e);
-                }), [ M, c, B, n, K, C, g, O ]);
+                    C === null || C === void 0 ? void 0 : C(e, n, c, F, $);
+                    b === null || b === void 0 ? void 0 : b(e);
+                }), [ F, c, $, n, R, C, b, O ]);
                 
                 return o().createElement("li", h({
                     "data-test": "tree-item"
-                }, k, {
+                }, w, {
                     id: n,
-                    ref: $,
-                    tabIndex: V,
-                    onBlur: X,
+                    ref: M,
+                    tabIndex: N,
+                    onBlur: B,
                     onFocus: U,
-                    onKeyDown: H,
+                    onKeyDown: G,
                     role: "treeitem",
-                    "aria-labelledby": v,
-                    "aria-expanded": M.length ? c || "false" : undefined
-                }),  o().createElement(f, null,  o().createElement(d, null, l),  o().createElement(s, {
+                    "aria-expanded": F.length ? c || "false" : undefined
+                }),  o().createElement(f, null,  o().createElement(d, null, i),  o().createElement(s, {
+                    $hasCustomIndent: !!i,
                     "data-test": "tree-item-content",
                     ref: q,
                     tabIndex: -1,
-                    onFocus: G,
+                    onFocus: X,
                     onClick: J
                 }, a, !c && u)), c &&  o().createElement(o().Fragment, null,  o().createElement(y, {
                     role: "group",
-                    $defaultIndent: E
+                    $defaultIndent: j
                 }, r), u));
             }
-            K.propTypes = R;
-            /* harmony default export */            const _ = K;
+            _.propTypes = R;
+            /* harmony default export */            const K = _;
             // CONCATENATED MODULE: ./src/Tree/treeUtils.ts
             function D(e, n) {
-                return q(e) || F(e, n) || V(e, n) || N();
+                return F(e) || q(e, n) || V(e, n) || N();
             }
             function N() {
                 throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -329,29 +332,29 @@
                 }
                 return t;
             }
-            function F(e, n) {
+            function q(e, n) {
                 var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
                 if (null != r) {
-                    var t, o, a, l, i = [], u = !0, c = !1;
+                    var t, o, a, i, l = [], u = !0, c = !1;
                     try {
                         if (a = (r = r.call(e)).next, 0 === n) {
                             if (Object(r) !== r) return;
                             u = !1;
-                        } else for (;!(u = (t = a.call(r)).done) && (i.push(t.value), i.length !== n); u = !0) {
+                        } else for (;!(u = (t = a.call(r)).done) && (l.push(t.value), l.length !== n); u = !0) {
                         }
                     } catch (e) {
                         c = !0, o = e;
                     } finally {
                         try {
-                            if (!u && null != r["return"] && (l = r["return"](), Object(l) !== l)) return;
+                            if (!u && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
                         } finally {
                             if (c) throw o;
                         }
                     }
-                    return i;
+                    return l;
                 }
             }
-            function q(e) {
+            function F(e) {
                 if (Array.isArray(e)) return e;
             }
             /**
@@ -372,19 +375,19 @@
             }
             /**
  * A helper function to get next path of current item path in same level
- */            function B(e, n) {
+ */            function J(e, n) {
                 return e === null || e === void 0 ? void 0 : e.replace(/([^-]*)$/, "".concat(n + 1));
             }
             /**
  * A helper function to get the last index number of an item path string
- */            function J(e) {
+ */            function U(e) {
                 var n = e.split("-").pop();
                 if (!n) {
                     return 0;
                 }
                 return parseInt(n, 10) || 0;
             }
-            function U(e, n) {
+            function B(e, n) {
                 var r = e.get(n);
                 if (!r) {
                     return n;
@@ -400,8 +403,8 @@
                     return M(e, n);
                 }
                 // get next node in the parent level
-                                var t = J(r);
-                var o = B(r, t);
+                                var t = U(r);
+                var o = J(r, t);
                 var a = M(e, o);
                 if (a) {
                     return a;
@@ -420,11 +423,11 @@
                     return t;
                 }
                 // case where next tree item is the next node in the same level
-                                var o = J(r);
-                var a = B(r, o);
-                var l = M(e, a);
-                if (l) {
-                    return l;
+                                var o = U(r);
+                var a = J(r, o);
+                var i = M(e, a);
+                if (i) {
+                    return i;
                 }
                 // case where next tree item is a higher level or does not exist
                                 return X(e, r) || n;
@@ -440,11 +443,11 @@
                 var o = "".concat(n, "-0");
                 // get the last child in current node, and continue to find its children recursively
                                 while (t) {
-                    var a = J(o);
-                    var l = B(o, a);
-                    t = M(e, l);
+                    var a = U(o);
+                    var i = J(o, a);
+                    t = M(e, i);
                     if (t) {
-                        o = l;
+                        o = i;
                     }
                 }
                 return H(e, o);
@@ -454,10 +457,10 @@
                 if (!r) {
                     return n;
                 }
-                var t = J(r);
+                var t = U(r);
                 // case where current is first child of parent or root item
                                 if (t === 0) {
-                    return U(e, n);
+                    return B(e, n);
                 }
                 // case where previous tree item is or is a child of previous node in same level
                                 var o = r.replace(/[^-]+$/, "".concat(t - 1));
@@ -472,10 +475,10 @@
                 var t = n;
                 // find last child in current node
                                 while (r) {
-                    var o = J(t);
-                    r = M(e, B(t, o));
+                    var o = U(t);
+                    r = M(e, J(t, o));
                     if (r) {
-                        t = B(t, o);
+                        t = J(t, o);
                     }
                 }
                 // check if last child has children
@@ -522,23 +525,23 @@
             function te(e, n) {
                 var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
                 if (null != r) {
-                    var t, o, a, l, i = [], u = !0, c = !1;
+                    var t, o, a, i, l = [], u = !0, c = !1;
                     try {
                         if (a = (r = r.call(e)).next, 0 === n) {
                             if (Object(r) !== r) return;
                             u = !1;
-                        } else for (;!(u = (t = a.call(r)).done) && (i.push(t.value), i.length !== n); u = !0) {
+                        } else for (;!(u = (t = a.call(r)).done) && (l.push(t.value), l.length !== n); u = !0) {
                         }
                     } catch (e) {
                         c = !0, o = e;
                     } finally {
                         try {
-                            if (!u && null != r["return"] && (l = r["return"](), Object(l) !== l)) return;
+                            if (!u && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
                         } finally {
                             if (c) throw o;
                         }
                     }
-                    return i;
+                    return l;
                 }
             }
             function oe(e) {
@@ -546,105 +549,107 @@
             }
             function ae(e, n) {
                 if (null == e) return {};
-                var r, t, o = le(e, n);
+                var r, t, o = ie(e, n);
                 if (Object.getOwnPropertySymbols) {
                     var a = Object.getOwnPropertySymbols(e);
                     for (t = 0; t < a.length; t++) {
-                        r = a[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+                        r = a[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
                     }
                 }
                 return o;
             }
-            function le(e, n) {
+            function ie(e, n) {
                 if (null == e) return {};
                 var r = {};
                 for (var t in e) {
                     if ({}.hasOwnProperty.call(e, t)) {
-                        if (n.includes(t)) continue;
+                        if (-1 !== n.indexOf(t)) continue;
                         r[t] = e[t];
                     }
                 }
                 return r;
             }
-            var ie = {
-                children: l().node,
-                defaultIndent: l().bool,
-                elementRef: l().oneOfType([ l().func, l().object ])
+            var le = {
+                children: i().node,
+                defaultIndent: i().bool,
+                elementRef: i().oneOfType([ i().func, i().object ])
             };
             /**
  * Used to present a hierarchical list.
  */            function ue(e) {
-                var n = e.children, r = e.defaultIndent, a = r === void 0 ? true : r, l = e.elementRef, i = ae(e, [ "children", "defaultIndent", "elementRef" ]);
+                var n = e.children, r = e.defaultIndent, a = r === void 0 ? true : r, i = e.elementRef, l = ae(e, [ "children", "defaultIndent", "elementRef" ]);
                 // @docs-props-type TreePropsBase
                                 var u = (0, t.useState)(), c = Z(u, 2), f = c[0], d = c[1];
-                var s = new Map;
-                var v = function e(n, r, t, o, a) {
-                    n.stopPropagation();
-                    var l = t && (o === null || o === void 0 ? void 0 : o.length);
-                    switch (n.key) {
+                var s = (0, t.useMemo)((function() {
+                    return new Map;
+                }), []);
+                var v = (0, t.useCallback)((function(e, n, r, t, o) {
+                    e.stopPropagation();
+                    var a = r && (t === null || t === void 0 ? void 0 : t.length);
+                    switch (e.key) {
                       case "ArrowUp":
-                        n.preventDefault();
-                        d(W(s, r));
+                        e.preventDefault();
+                        d(W(s, n));
                         break;
 
                       case "ArrowDown":
-                        n.preventDefault();
-                        d(G(s, r));
+                        e.preventDefault();
+                        d(G(s, n));
                         break;
 
                       case "ArrowLeft":
-                        n.preventDefault();
-                        if (l) {
-                            a(n, {
-                                treeItemId: r
+                        e.preventDefault();
+                        if (a) {
+                            o(e, {
+                                treeItemId: n
                             });
                         } else {
-                            d(U(s, r));
+                            d(B(s, n));
                         }
                         break;
 
                       case "ArrowRight":
-                        n.preventDefault();
-                        if (l) {
-                            d(G(s, r));
+                        e.preventDefault();
+                        if (a) {
+                            d(G(s, n));
                         } else {
-                            a(n, {
-                                treeItemId: r
+                            o(e, {
+                                treeItemId: n
                             });
                         }
                         break;
 
                       case "Home":
-                        n.preventDefault();
+                        e.preventDefault();
                         d(z(s));
                         break;
 
                       case "End":
-                        n.preventDefault();
+                        e.preventDefault();
                         d(Q(s));
                         break;
 
                       case "Enter":
-                        n.preventDefault();
-                        a(n, {
-                            treeItemId: r
+                        e.preventDefault();
+                        o(e, {
+                            treeItemId: n
                         });
                         break;
 
                       default:
  // do nothing
                                         }
-                };
+                }), [ s ]);
                 var m = function e(n, r) {
                     n.preventDefault();
                     d(r);
                 };
-                var b = function e(n) {
-                    s["delete"](n);
-                };
-                var h = function e(n, r) {
-                    s.set(n, r);
-                };
+                var b = (0, t.useCallback)((function(e) {
+                    s["delete"](e);
+                }), [ s ]);
+                var h = (0, t.useCallback)((function(e, n) {
+                    s.set(e, n);
+                }), [ s ]);
                 var g = t.Children.toArray(n).filter(t.isValidElement);
                 g.forEach((function(e, n) {
                     if (e.props.id && h) {
@@ -667,13 +672,13 @@
                     value: S
                 },  o().createElement(y, Y({
                     "data-test": "tree",
-                    ref: l,
+                    ref: i,
                     role: "tree",
                     $defaultIndent: a
-                }, i), n));
+                }, l), n));
             }
-            ue.propTypes = ie;
-            ue.Item = _;
+            ue.propTypes = le;
+            ue.Item = K;
             /* harmony default export */            const ce = ue;
         } // CONCATENATED MODULE: ./src/Tree/index.ts
         /***/ ,
@@ -779,7 +784,7 @@
         r.r(t);
         // EXPORTS
                 r.d(t, {
-            default: () => /* reexport */ Ee
+            default: () => /* reexport */ Re
         });
         // EXTERNAL MODULE: external "react"
                 var e = r(9497);
@@ -788,53 +793,119 @@
         const o = require("lodash/isString");
         var a =  r.n(o);
         // EXTERNAL MODULE: external "prop-types"
-                var l = r(23);
-        var i =  r.n(l);
+                var i = r(23);
+        var l =  r.n(i);
+        // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+        const u = require("@splunk/ui-utils/id");
         // EXTERNAL MODULE: external "styled-components"
-                var u = r(232);
-        var c =  r.n(u);
+                var c = r(232);
+        var f =  r.n(c);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Tree"
+        const d = require("@splunk/react-ui/Tree");
+        var s =  r.n(d);
         // EXTERNAL MODULE: external "@splunk/themes"
-                var f = r(3563);
+                var v = r(3563);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeStyles.ts
-        var d = (0, u.css)([ "", ";", ";color:", ";padding:4px;" ], f.mixins.reset("block"), f.mixins.typography({
+        var p = (0, c.css)([ "", ";", ";color:", ";padding:4px;" ], v.mixins.reset("block"), v.mixins.typography({
             family: "monospace"
-        }), f.variables.syntaxGray);
-        var s = c().code.withConfig({
+        }), v.variables.syntaxGray);
+        var y = f().code.withConfig({
             displayName: "JSONTreeStyles__StyledScrollCode",
             componentId: "vrdt21-0"
-        })([ "", ";overflow-x:auto;white-space:nowrap;" ], d);
-        var v = c().code.withConfig({
-            displayName: "JSONTreeStyles__StyledWrapCode",
+        })([ "", ";overflow-x:auto;white-space:nowrap;" ], p);
+        var m = f()(s()).withConfig({
+            displayName: "JSONTreeStyles__StyledTree",
             componentId: "vrdt21-1"
-        })([ "", ";white-space:pre-wrap;" ], d);
+        })([ "font-family:inherit;ul{font-family:inherit;}" ]);
+        var b = f().code.withConfig({
+            displayName: "JSONTreeStyles__StyledWrapCode",
+            componentId: "vrdt21-2"
+        })([ "", ";white-space:pre-wrap;" ], p);
         // CONCATENATED MODULE: external "lodash/fill"
-        const p = require("lodash/fill");
-        var y =  r.n(p);
+        const h = require("lodash/fill");
+        var g =  r.n(h);
         // CONCATENATED MODULE: external "lodash/isArray"
-        const m = require("lodash/isArray");
-        var b =  r.n(m);
+        const S = require("lodash/isArray");
+        var O =  r.n(S);
         // CONCATENATED MODULE: external "lodash/isEmpty"
-        const h = require("lodash/isEmpty");
-        var g =  r.n(h);
+        const w = require("lodash/isEmpty");
+        var k =  r.n(w);
         // CONCATENATED MODULE: external "lodash/isNumber"
-        const S = require("lodash/isNumber");
-        var w =  r.n(S);
+        const I = require("lodash/isNumber");
+        var x =  r.n(I);
         // CONCATENATED MODULE: external "lodash/isObject"
-        const O = require("lodash/isObject");
-        var k =  r.n(O);
+        const j = require("lodash/isObject");
+        var C =  r.n(j);
         // CONCATENATED MODULE: external "lodash/keys"
-        const I = require("lodash/keys");
-        var x =  r.n(I);
+        const E = require("lodash/keys");
+        var T =  r.n(E);
         // CONCATENATED MODULE: external "lodash/repeat"
-        const j = require("lodash/repeat");
-        var E =  r.n(j);
+        const A = require("lodash/repeat");
+        var P =  r.n(A);
         // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-        const C = require("@splunk/ui-utils/i18n");
-        // EXTERNAL MODULE: ./src/Tree/index.ts + 7 modules
-                var A = r(8655);
+        const R = require("@splunk/ui-utils/i18n");
+        // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
+        const _ = require("@splunk/react-ui/ButtonSimple");
+        var K =  r.n(_);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+        const D = require("@splunk/react-ui/Clickable");
+        var N =  r.n(D);
+        // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
+        const V = require("@splunk/react-ui/Tooltip");
+        var L =  r.n(V);
+        // CONCATENATED MODULE: ./src/JSONTree/JSONTreeItemStyles.ts
+        var q = {
+            string: v.variables.syntaxTeal,
+            number: v.variables.syntaxBlue,
+            boolean: v.variables.syntaxPurple,
+            null: v.variables.syntaxBrown,
+            object: v.variables.syntaxGray,
+            array: v.variables.syntaxGray
+        };
+        var F = (0, c.css)([ "word-break:break-word;word-wrap:break-word;" ]);
+        var M = (0, c.css)([ "white-space:nowrap;" ]);
+        /* Using this magic number to set the height to be at least the minimum target size of 24 by 24 */        var $ = (0, 
+        c.css)([ "padding-block:2px;" ]);
+        var J = (0, c.css)([ "font-family:inherit;&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], v.variables.focusShadow, v.variables.neutral50);
+        var U = (0, c.css)([ "color:", ";", ";", "" ], (function(e) {
+            var n = e.valueType;
+            return q[n];
+        }), (function(e) {
+            var n = e.overflowType;
+            return n === "wrap" ? F : M;
+        }), $);
+        var B = f().span.withConfig({
+            displayName: "JSONTreeItemStyles__StyledContentWrapper",
+            componentId: "o558h3-0"
+        })([ "color:", ";" ], v.variables.syntaxGray);
+        var X = f().span.withConfig({
+            displayName: "JSONTreeItemStyles__StyledValue",
+            componentId: "o558h3-1"
+        })([ "", "" ], U);
+        var G = f()(N()).withConfig({
+            displayName: "JSONTreeItemStyles__StyledValueInteractiveClickable",
+            componentId: "o558h3-2"
+        })([ "", " ", " min-width:24px;text-align:center;" ], U, J);
+        var H = (0, c.css)([ "", " color:", ";" ], $, v.variables.syntaxRed);
+        var W = f().span.withConfig({
+            displayName: "JSONTreeItemStyles__StyledProperty",
+            componentId: "o558h3-3"
+        })([ "", "" ], H);
+        var z = f()(N()).withConfig({
+            displayName: "JSONTreeItemStyles__StyledPropertyInteractiveClickable",
+            componentId: "o558h3-4"
+        })([ "", " ", "" ], H, J);
+        var Q = f()(K()).withConfig({
+            displayName: "JSONTreeItemStyles__StyledExpandLinkClickable",
+            componentId: "o558h3-5"
+        })([ "", ";border:none;border-radius:0;font-family:inherit;padding:1px ", " 3px ", ";&:hover{background-color:", ";text-decoration:none;}&:focus{box-shadow:", ";&:active{box-shadow:none;}}" ], $, v.variables.spacingXSmall, v.variables.spacingXSmall, v.variables.actionColorBackgroundSubtleHover, v.variables.focusShadowInset);
+        var Y = f()(L()).withConfig({
+            displayName: "JSONTreeItemStyles__StyledTooltip",
+            componentId: "o558h3-6"
+        })([ "font-family:", ";" ], v.variables.monoFontFamily);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeItem.tsx
-        function T() {
-            return T = Object.assign ? Object.assign.bind() : function(e) {
+        function Z() {
+            return Z = Object.assign ? Object.assign.bind() : function(e) {
                 for (var n = 1; n < arguments.length; n++) {
                     var r = arguments[n];
                     for (var t in r) {
@@ -842,489 +913,440 @@
                     }
                 }
                 return e;
-            }, T.apply(null, arguments);
+            }, Z.apply(null, arguments);
         }
-        function P(e, n) {
-            return N(e) || D(e, n) || K(e, n) || R();
+        function ee(e, n) {
+            return ae(e) || oe(e, n) || re(e, n) || ne();
         }
-        function R() {
+        function ne() {
             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 K(e, n) {
+        function re(e, n) {
             if (e) {
-                if ("string" == typeof e) return _(e, n);
+                if ("string" == typeof e) return te(e, n);
                 var r = {}.toString.call(e).slice(8, -1);
-                return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? _(e, n) : void 0;
+                return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? te(e, n) : void 0;
             }
         }
-        function _(e, n) {
+        function te(e, n) {
             (null == n || n > e.length) && (n = e.length);
             for (var r = 0, t = Array(n); r < n; r++) {
                 t[r] = e[r];
             }
             return t;
         }
-        function D(e, n) {
+        function oe(e, n) {
             var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != r) {
-                var t, o, a, l, i = [], u = !0, c = !1;
+                var t, o, a, i, l = [], u = !0, c = !1;
                 try {
                     if (a = (r = r.call(e)).next, 0 === n) {
                         if (Object(r) !== r) return;
                         u = !1;
-                    } else for (;!(u = (t = a.call(r)).done) && (i.push(t.value), i.length !== n); u = !0) {
+                    } else for (;!(u = (t = a.call(r)).done) && (l.push(t.value), l.length !== n); u = !0) {
                     }
                 } catch (e) {
                     c = !0, o = e;
                 } finally {
                     try {
-                        if (!u && null != r["return"] && (l = r["return"](), Object(l) !== l)) return;
+                        if (!u && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
                     } finally {
                         if (c) throw o;
                     }
                 }
-                return i;
+                return l;
             }
         }
-        function N(e) {
+        function ae(e) {
             if (Array.isArray(e)) return e;
         }
-        function V(e, n) {
+        function ie(e, n) {
             if (null == e) return {};
-            var r, t, o = L(e, n);
+            var r, t, o = le(e, n);
             if (Object.getOwnPropertySymbols) {
                 var a = Object.getOwnPropertySymbols(e);
                 for (t = 0; t < a.length; t++) {
-                    r = a[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+                    r = a[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
                 }
             }
             return o;
         }
-        function L(e, n) {
+        function le(e, n) {
             if (null == e) return {};
             var r = {};
             for (var t in e) {
                 if ({}.hasOwnProperty.call(e, t)) {
-                    if (n.includes(t)) continue;
+                    if (-1 !== n.indexOf(t)) continue;
                     r[t] = e[t];
                 }
             }
             return r;
         }
-        var F = {
-            clickableKeyRef: i().object,
-            clickableValRef: i().object,
-            hasChildren: i().bool,
-            indentArray: i().arrayOf(i().string),
-            index: i().number,
-            initialOpenState: i().bool,
-            properties: i().arrayOf(i().string),
-            propertyDataPath: i().string,
-            propertyElement: i().node,
-            renderExpandLink: i().func,
-            representation: i().node,
-            value: i().oneOfType([ i().string, i().object, i().array, i().number, i().bool ])
+        var ue = {
+            clickableKeyRef: l().object,
+            clickableValRef: l().object,
+            hasChildren: l().bool,
+            indentArray: l().arrayOf(l().string),
+            index: l().number,
+            initialOpenState: l().bool,
+            isRoot: l().bool,
+            properties: l().arrayOf(l().string),
+            propertyDataPath: l().string,
+            propertyElement: l().node,
+            renderExpandLink: l().func,
+            representation: l().node,
+            value: l().oneOfType([ l().string, l().object, l().array, l().number, l().bool ])
         };
-        function q(r) {
-            var t = r.clickableKeyRef, o = r.clickableValRef, a = r.hasChildren, l = r.indentArray, i = r.index, u = r.initialOpenState, c = r.onFocus, f = r.properties, d = r.propertyDataPath, s = r.propertyElement, v = r.renderExpandLink, p = r.representation, y = r.value, m = V(r, [ "clickableKeyRef", "clickableValRef", "hasChildren", "indentArray", "index", "initialOpenState", "onFocus", "properties", "propertyDataPath", "propertyElement", "renderExpandLink", "representation", "value" ]);
-            var h = (0, e.useState)(u), g = P(h, 2), S = g[0], w = g[1];
-            var O = (0, e.useCallback)((function() {
-                w((function(e) {
+        function ce(r) {
+            var t = r.clickableKeyRef, o = r.clickableValRef, a = r.hasChildren, i = r.indentArray, l = r.index, u = r.initialOpenState, c = r.isRoot, f = r.onFocus, d = r.properties, v = r.propertyDataPath, p = r.propertyElement, y = r.renderExpandLink, m = r.representation, b = r.value, h = ie(r, [ "clickableKeyRef", "clickableValRef", "hasChildren", "indentArray", "index", "initialOpenState", "isRoot", "onFocus", "properties", "propertyDataPath", "propertyElement", "renderExpandLink", "representation", "value" ]);
+            // @docs-props-type JSONTreeItemPropsBase
+                        var g = (0, e.useState)(u), S = ee(g, 2), w = S[0], k = S[1];
+            var I = (0, e.useCallback)((function() {
+                k((function(e) {
                     return !e;
                 }));
             }), []);
-            var k = (0, e.useRef)(null);
-            var I = v ? v({
-                onToggleExpansion: O,
-                open: S,
+            var x = (0, e.useRef)(null);
+            var j = y ? y({
+                onToggleExpansion: I,
+                open: w,
                 withTooltip: true,
-                expandLinkRef: k
+                expandLinkRef: x
             }) : {
                 expandLink: undefined
-            }, x = I.expandLink;
-            var j = (f === null || f === void 0 ? void 0 : f.length) && i + 1 < (f === null || f === void 0 ? void 0 : f.length) ? "," : null;
+            }, C = j.expandLink;
+            var E = (d === null || d === void 0 ? void 0 : d.length) && l + 1 < (d === null || d === void 0 ? void 0 : d.length) ? "," : null;
             
-            return n().createElement(A["default"].Item, T({
-                content:  n().createElement(n().Fragment, null, s, a && (b()(y) ? "[" : "{"), !a &&  n().createElement(n().Fragment, null, p, j), a && x),
-                customIndent: l,
+            return n().createElement(s().Item, Z({
+                content:  n().createElement(B, null, p, a && (O()(b) ? "[" : "{"), !a &&  n().createElement(n().Fragment, null, m, E), a && C),
+                customIndent: i,
                 "data-test": a ? "node" : null,
-                "data-test-path": d,
-                endAdornment: a &&  n().createElement(n().Fragment, null, S && l, b()(y) ? "]" : "}", j),
-                expanded: S,
+                "data-test-path": v,
+                endAdornment: a &&  n().createElement(B, null, w && i, O()(b) ? "]" : "}", E),
+                expanded: w,
                 onFocus: function e(n) {
-                    c === null || c === void 0 ? void 0 : c(n);
+                    f === null || f === void 0 ? void 0 : f(n);
                     // check if onFocus was triggered by a click event or expand link
-                                        var r = n.relatedTarget === (t === null || t === void 0 ? void 0 : t.current) || n.relatedTarget === (o === null || o === void 0 ? void 0 : o.current) || n.relatedTarget === (k === null || k === void 0 ? void 0 : k.current) ? n.relatedTarget : null;
-                    if (m.id === "root") {
+                                        var r = n.relatedTarget === (t === null || t === void 0 ? void 0 : t.current) || n.relatedTarget === (o === null || o === void 0 ? void 0 : o.current) || n.relatedTarget === (x === null || x === void 0 ? void 0 : x.current) ? n.relatedTarget : null;
+                    if (c) {
                         var a;
-                        k === null || k === void 0 ? void 0 : (a = k.current) === null || a === void 0 ? void 0 : a.focus();
+                        x === null || x === void 0 ? void 0 : (a = x.current) === null || a === void 0 ? void 0 : a.focus();
                     }
                     if (!r) {
                         // if JSONTreeItem contains clickable keys/vals, focus should go there
-                        if (s && (t === null || t === void 0 ? void 0 : t.current)) {
-                            var l;
-                            (l = t.current) === null || l === void 0 ? void 0 : l.focus();
-                        } else if (o === null || o === void 0 ? void 0 : o.current) {
+                        if (p && (t === null || t === void 0 ? void 0 : t.current)) {
                             var i;
-                            (i = o.current) === null || i === void 0 ? void 0 : i.focus();
+                            (i = t.current) === null || i === void 0 ? void 0 : i.focus();
+                        } else if (o === null || o === void 0 ? void 0 : o.current) {
+                            var l;
+                            (l = o.current) === null || l === void 0 ? void 0 : l.focus();
                         }
                     } else {
                         r.focus();
                     }
                 },
-                onToggleExpansion: O,
+                onToggleExpansion: I,
                 tabIndex: 0
-            }, m), a && p);
+            }, h), a && m);
         }
-        q.propTypes = F;
-        // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-        const M = require("@splunk/react-ui/ButtonSimple");
-        var $ =  r.n(M);
-        // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-        const B = require("@splunk/react-ui/Clickable");
-        var J =  r.n(B);
-        // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-        const U = require("@splunk/react-ui/Tooltip");
-        var X =  r.n(U);
-        // CONCATENATED MODULE: ./src/JSONTree/JSONTreeItemStyles.ts
-        var G = {
-            string: f.variables.syntaxTeal,
-            number: f.variables.syntaxBlue,
-            boolean: f.variables.syntaxPurple,
-            null: f.variables.syntaxBrown,
-            object: f.variables.syntaxGray,
-            array: f.variables.syntaxGray
-        };
-        var H = (0, u.css)([ "word-break:break-word;word-wrap:break-word;" ]);
-        var W = (0, u.css)([ "white-space:nowrap;" ]);
-        /* Using this magic number to set the height to be at least the minimum target size of 24 by 24 */        var z = (0, 
-        u.css)([ "padding-block:2px;" ]);
-        var Q = (0, u.css)([ "font-family:inherit;&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], f.variables.focusShadow, f.variables.neutral50);
-        var Y = (0, u.css)([ "color:", ";", ";", "" ], (function(e) {
-            var n = e.valueType;
-            return G[n];
-        }), (function(e) {
-            var n = e.overflowType;
-            return n === "wrap" ? H : W;
-        }), z);
-        var Z = c().span.withConfig({
-            displayName: "JSONTreeItemStyles__StyledValue",
-            componentId: "o558h3-0"
-        })([ "", "" ], Y);
-        var ee = c()(J()).withConfig({
-            displayName: "JSONTreeItemStyles__StyledValueInteractiveClickable",
-            componentId: "o558h3-1"
-        })([ "", " ", " min-width:24px;text-align:center;" ], Y, Q);
-        var ne = (0, u.css)([ "", " color:", ";" ], z, f.variables.syntaxRed);
-        var re = c().span.withConfig({
-            displayName: "JSONTreeItemStyles__StyledProperty",
-            componentId: "o558h3-2"
-        })([ "", "" ], ne);
-        var te = c()(J()).withConfig({
-            displayName: "JSONTreeItemStyles__StyledPropertyInteractiveClickable",
-            componentId: "o558h3-3"
-        })([ "", " ", "" ], ne, Q);
-        var oe = c()($()).withConfig({
-            displayName: "JSONTreeItemStyles__StyledExpandLinkClickable",
-            componentId: "o558h3-4"
-        })([ "", ";border:none;border-radius:0;font-family:inherit;padding:1px ", " 3px ", ";&:hover{background-color:", ";text-decoration:none;}&:focus{box-shadow:", ";&:active{box-shadow:none;}}" ], z, f.variables.spacingXSmall, f.variables.spacingXSmall, f.variables.actionColorBackgroundSubtleHover, f.variables.focusShadowInset);
-        var ae = c()(X()).withConfig({
-            displayName: "JSONTreeItemStyles__StyledTooltip",
-            componentId: "o558h3-5"
-        })([ "font-family:", ";" ], f.variables.monoFontFamily);
+        ce.propTypes = ue;
+        // EXTERNAL MODULE: ./src/Tree/index.ts + 7 modules
+                var fe = r(8655);
         // CONCATENATED MODULE: ./src/JSONTree/renderTreeItems.tsx
-        function le(e) {
+        function de(e) {
             "@babel/helpers - typeof";
-            return le = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return de = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
                 return typeof e;
             } : function(e) {
                 return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-            }, le(e);
+            }, de(e);
         }
-        function ie(e) {
-            return de(e) || fe(e) || ce(e) || ue();
+        function se(e) {
+            return me(e) || ye(e) || pe(e) || ve();
         }
-        function ue() {
+        function ve() {
             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 ce(e, n) {
+        function pe(e, n) {
             if (e) {
-                if ("string" == typeof e) return se(e, n);
+                if ("string" == typeof e) return be(e, n);
                 var r = {}.toString.call(e).slice(8, -1);
-                return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? se(e, n) : void 0;
+                return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? be(e, n) : void 0;
             }
         }
-        function fe(e) {
+        function ye(e) {
             if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
         }
-        function de(e) {
-            if (Array.isArray(e)) return se(e);
+        function me(e) {
+            if (Array.isArray(e)) return be(e);
         }
-        function se(e, n) {
+        function be(e, n) {
             (null == n || n > e.length) && (n = e.length);
             for (var r = 0, t = Array(n); r < n; r++) {
                 t[r] = e[r];
             }
             return t;
         }
-        function ve(r) {
-            var t = r.id, o = r.childKey, a = r.index, l = r.value, i = r.properties, u = r.propertyDataPath, c = r.obj, f = r.renderValue, d = r.renderKey, s = r.getInitialOpenState, v = r.indentArray, p = r.renderExpandLink, y = r.onFocus;
+        function he(r) {
+            var t = r.id, o = r.childKey, a = r.index, i = r.value, l = r.properties, u = r.propertyDataPath, c = r.obj, f = r.renderValue, d = r.renderKey, s = r.getInitialOpenState, v = r.indentArray, p = r.renderExpandLink, y = r.onFocus;
             var m = (0, e.useRef)(null);
-            var h = (0, e.useRef)(null);
-            var S = f({
+            var b = (0, e.useRef)(null);
+            var h = f({
                 key: o,
-                value: l,
+                value: i,
                 clickValueRef: m
-            }), w = S.representation, O = S.clickableValRef;
-            var I = !b()(c) ? d(o, h) : {
+            }), g = h.representation, S = h.clickableValRef;
+            var w = !O()(c) ? d(o, b) : {
                 propertyElement: undefined,
                 clickableKeyRef: undefined
-            }, x = I.propertyElement, j = I.clickableKeyRef;
-            var E = k()(l) && !g()(l) || b()(l) && l.length > 0;
+            }, I = w.propertyElement, x = w.clickableKeyRef;
+            var j = C()(i) && !k()(i) || O()(i) && i.length > 0;
             
-            return n().createElement(q, {
+            return n().createElement(ce, {
                 id: t,
                 propertyDataPath: u,
-                propertyElement: x,
-                hasChildren: E,
+                propertyElement: I,
+                hasChildren: j,
                 initialOpenState: s(),
-                representation: w,
+                representation: g,
                 indentArray: v,
-                value: l,
+                value: i,
                 index: a,
-                properties: i,
+                properties: l,
                 renderExpandLink: p,
-                clickableKeyRef: j,
-                clickableValRef: O,
+                clickableKeyRef: x,
+                clickableValRef: S,
                 onFocus: function e() {
-                    y(j, O);
+                    y(x, S);
                 }
             });
         }
-        function pe(r) {
-            var t = r.renderValue, o = r.obj;
-            var a = (0, e.useRef)(null);
-            var l = t({
-                value: o,
-                clickValueRef: a
-            }), i = l.representation;
+        function ge(r) {
+            var t = r.baseId, o = r.renderValue, a = r.obj;
+            var i = (0, e.useRef)(null);
+            var l = o({
+                value: a,
+                clickValueRef: i
+            }), u = l.representation;
             
-            return n().createElement(A["default"].Item, {
-                id: "0",
+            return n().createElement(fe["default"].Item, {
+                id: "".concat(t, "-0"),
                 "data-test-path": ".",
-                content: i
+                content: u
             });
         }
-        function ye(e) {
-            var r = e.defaultOpen, t = r === void 0 ? false : r, o = e.defaultExpanded, l = 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, s = d === void 0 ? 1 : d, v = e.obj, p = e.onClickKey, m = e.onClickValue, h = e.overflow, S = h === void 0 ? "scroll" : h, O = e.path, I = O === void 0 ? [] : O, j = e.shift, A = e.updateShift;
-            var T = y()(Array(s), E()(" ", f));
-            var P;
-            var R;
+        function Se(e) {
+            var r = e.baseId, t = e.defaultOpen, o = t === void 0 ? false : t, i = e.defaultExpanded, l = i === void 0 ? false : i, u = e.expandChildrenOnShiftKey, c = u === void 0 ? false : u, f = e.indent, d = f === void 0 ? 4 : f, s = e.indentLevel, v = s === void 0 ? 1 : s, p = e.obj, y = e.onClickKey, m = e.onClickValue, b = e.overflow, h = b === void 0 ? "scroll" : b, S = e.path, w = S === void 0 ? [] : S, I = e.shift, j = e.updateShift;
+            var E = g()(Array(v), P()(" ", d));
+            var A;
+            var _;
             var K = function e() {
-                if (l && j == null) {
+                if (l && I == null) {
                     return true;
                 }
-                if (u) {
-                    return !!j;
+                if (c) {
+                    return !!I;
                 }
-                return t;
+                return o;
             };
-            var _ = function e(n) {
-                if (u && A != null) {
-                    A(n.shiftKey);
+            var D = function e(n) {
+                if (c && j != null) {
+                    j(n.shiftKey);
                 }
             };
-            var D = function e(n, r) {
+            var N = function e(n, r) {
                 var t, o;
                 // When rendering a single value key is not present, here we prevent `[undefined]` in path
-                                var a = r !== undefined ? [].concat(ie(I), [ r ]) : ie(I);
-                var l = ".".concat(a.join("."));
-                (t = R) === 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(n, {
-                    key: l,
+                                var a = r !== undefined ? [].concat(se(w), [ r ]) : se(w);
+                var i = ".".concat(a.join("."));
+                (t = _) === null || t === void 0 ? void 0 : (o = t.current) === null || o === void 0 ? void 0 : o.focus();
+                y === null || y === void 0 ? void 0 : y(n, {
+                    key: i,
                     keyPath: a
                 });
             };
-            var N = function e(n, r) {
+            var V = function e(n, r) {
                 var t, o;
                 // When rendering a single value key is not present, here we prevent `[undefined]` in path
-                                var a = r !== undefined ? [].concat(ie(I), [ r ]) : ie(I);
-                var l = ".".concat(a.join("."));
-                (t = P) === null || t === void 0 ? void 0 : (o = t.current) === null || o === void 0 ? void 0 : o.focus();
+                                var a = r !== undefined ? [].concat(se(w), [ r ]) : se(w);
+                var i = ".".concat(a.join("."));
+                (t = A) === null || t === void 0 ? void 0 : (o = t.current) === null || o === void 0 ? void 0 : o.focus();
                 m === null || m === void 0 ? void 0 : m(n, {
-                    key: l,
+                    key: i,
                     keyPath: a,
                     value: n.target.textContent
                 });
             };
-            var V = function e(n, r) {
+            var L = function e(n, r) {
                 var t, o;
                 var a = n.key;
-                if (a === "ArrowLeft" && p && ((t = R) === null || t === void 0 ? void 0 : t.current) && !r) {
-                    var l;
+                if (a === "ArrowLeft" && y && ((t = _) === null || t === void 0 ? void 0 : t.current) && !r) {
+                    var i;
                     n.stopPropagation();
-                    (l = R.current) === null || l === void 0 ? void 0 : l.focus();
+                    (i = _.current) === null || i === void 0 ? void 0 : i.focus();
                 }
-                if (a === "ArrowRight" && m && ((o = P) === null || o === void 0 ? void 0 : o.current) && r) {
-                    var i;
+                if (a === "ArrowRight" && m && ((o = A) === null || o === void 0 ? void 0 : o.current) && r) {
+                    var l;
                     n.stopPropagation();
-                    (i = P.current) === null || i === void 0 ? void 0 : i.focus();
+                    (l = A.current) === null || l === void 0 ? void 0 : l.focus();
                 }
             };
-            var L = function e(r) {
-                var t = r.onToggleExpansion, o = r.open, a = r.withTooltip, l = r.expandLinkRef;
-                var i = o ? "[-]" : "[+]";
-                var c = o ? (0, C._)("Collapse all") : (0, C._)("Shift click to expand all");
-                var f =  n().createElement(oe, {
+            var q = function e(r) {
+                var t = r.onToggleExpansion, o = r.open, a = r.withTooltip, i = r.expandLinkRef;
+                var l = o ? "[-]" : "[+]";
+                var u = o ? (0, R._)("Collapse all") : (0, R._)("Shift click to expand all");
+                var f =  n().createElement(Q, {
                     appearance: "subtle",
-                    elementRef: l,
+                    elementRef: i,
                     tabIndex: -1,
                     onClick: function e(n) {
-                        _(n);
+                        D(n);
                         t === null || t === void 0 ? void 0 : t(n);
                     },
                     "aria-expanded": o,
                     "data-test": "toggle"
-                }, i);
-                if (u && a) {
+                }, l);
+                if (c && a) {
                     return {
-                        expandLink:  n().createElement(ae, {
+                        expandLink:  n().createElement(Y, {
                             contentRelationship: "description",
                             openDelay: "secondary",
                             defaultPlacement: "above",
-                            content: (0, C._)(c)
+                            content: (0, R._)(u)
                         }, f),
-                        expandLinkRef: l
+                        expandLinkRef: i
                     };
                 }
                 return {
                     expandLink: f,
-                    expandLinkRef: l
+                    expandLinkRef: i
                 };
             };
-            var F = function e(r) {
-                var t = r.value, o = r.key, i = r.clickValueRef;
-                var c;
-                if (!k()(t)) {
-                    if (typeof t === "string") {
-                        c = '"'.concat(t, '"');
-                    } else if (typeof t === "boolean") {
-                        c = t.toString();
-                    } else if (t === null) {
-                        c = "null";
+            var F = function e(t) {
+                var o = t.value, i = t.key, u = t.clickValueRef;
+                var f;
+                if (!C()(o)) {
+                    if (typeof o === "string") {
+                        f = '"'.concat(o, '"');
+                    } else if (typeof o === "boolean") {
+                        f = o.toString();
+                    } else if (o === null) {
+                        f = "null";
                     } else {
-                        c = t;
+                        f = o;
                     }
-                } else if (g()(t)) {
+                } else if (k()(o)) {
                     // isObject is true for arrays
-                    c = b()(t) ? "[]" : "{}";
+                    f = O()(o) ? "[]" : "{}";
                 } else {
-                    c = ye({
+                    f = Se({
+                        baseId: r,
                         defaultOpen: l === true,
                         defaultExpanded: l,
-                        expandChildrenOnShiftKey: u,
-                        onClickKey: p,
+                        expandChildrenOnShiftKey: c,
+                        onClickKey: y,
                         onClickValue: m,
-                        overflow: S,
-                        obj: t,
-                        path: o !== undefined ? [].concat(ie(I), [ o ]) : ie(I),
-                        indentLevel: s + 1,
-                        shift: j,
-                        updateShift: A
+                        overflow: h,
+                        obj: o,
+                        path: i !== undefined ? [].concat(se(w), [ i ]) : se(w),
+                        indentLevel: v + 1,
+                        shift: I,
+                        updateShift: j
                     });
                 }
-                if (a()(c) || w()(c)) {
-                    var f = t === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
-                    le(t);
+                if (a()(f) || x()(f)) {
+                    var d = o === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
+                    de(o);
                     if (m) {
                         return {
-                            representation:  n().createElement(ee, {
-                                elementRef: i,
-                                valueType: f,
-                                overflowType: S,
+                            representation:  n().createElement(G, {
+                                elementRef: u,
+                                valueType: d,
+                                overflowType: h,
                                 onClick: function e(n) {
-                                    P = i;
-                                    N(n, o);
+                                    A = u;
+                                    V(n, i);
                                 },
                                 onKeyDown: function e(n) {
-                                    V(n, false);
+                                    L(n, false);
                                 },
                                 tabIndex: -1
-                            }, c),
-                            clickableValRef: i
+                            }, f),
+                            clickableValRef: u
                         };
                     }
                     return {
-                        representation:  n().createElement(Z, {
-                            valueType: f,
-                            overflowType: S
-                        }, c)
+                        representation:  n().createElement(X, {
+                            valueType: d,
+                            overflowType: h
+                        }, f)
                     };
                 }
                 return {
-                    representation: c
+                    representation: f
                 };
             };
             var M = function e(r, t) {
-                if (p) {
+                if (y) {
                     return {
-                        propertyElement:  n().createElement(n().Fragment, null,  n().createElement(te, {
+                        propertyElement:  n().createElement(n().Fragment, null,  n().createElement(z, {
                             elementRef: t,
                             tabIndex: -1,
                             onClick: function e(n) {
-                                R = t;
-                                D(n, r);
+                                _ = t;
+                                N(n, r);
                             },
                             onKeyDown: function e(n) {
-                                V(n, true);
+                                L(n, true);
                             }
                         }, r), ":", " "),
                         clickableKeyRef: t
                     };
                 }
                 return {
-                    propertyElement:  n().createElement(n().Fragment, null,  n().createElement(re, null, r), ":", " ")
+                    propertyElement:  n().createElement(n().Fragment, null,  n().createElement(W, null, r), ":", " ")
                 };
             };
-            if (k()(v) && !g()(v) || b()(v) && v.length > 0) {
-                var $ = x()(v).map((function(e, r, t) {
-                    var o = v[e];
+            if (C()(p) && !k()(p) || O()(p) && p.length > 0) {
+                var $ = T()(p).map((function(e, t, o) {
+                    var a = p[e];
  // TS: should be safe based on (recursive) JSONElement type
-                                        var a = b()(v) ? parseInt(e, 10) : e;
-                    var l = I.length === 0 ? ".".concat(a) : ".".concat(I.join("."), ".").concat(a);
+                                        var i = O()(p) ? parseInt(e, 10) : e;
+                    var l = w.length === 0 ? ".".concat(i) : ".".concat(w.join("."), ".").concat(i);
                     
-                    return n().createElement(ve, {
-                        id: l,
+                    return n().createElement(he, {
+                        id: "".concat(r, "-").concat(l),
                         key: l,
                         propertyDataPath: l,
-                        childKey: a,
-                        index: r,
-                        value: o,
-                        properties: t,
-                        obj: v,
+                        childKey: i,
+                        index: t,
+                        value: a,
+                        properties: o,
+                        obj: p,
                         renderValue: F,
                         renderKey: M,
                         getInitialOpenState: K,
-                        indentArray: T,
-                        renderExpandLink: L,
+                        indentArray: E,
+                        renderExpandLink: q,
                         onFocus: function e(n, r) {
-                            R = n;
-                            P = r;
+                            _ = n;
+                            A = r;
                         }
                     });
                 }));
-                if (I.length === 0) {
-                    var B = k()(v) && !g()(v) || b()(v) && v.length > 0;
+                if (w.length === 0) {
+                    var J = C()(p) && !k()(p) || O()(p) && p.length > 0;
                     
-                    return n().createElement(q, {
-                        id: "root",
+                    return n().createElement(ce, {
+                        id: "".concat(r, "-root"),
+                        isRoot: true,
                         propertyDataPath: ".",
                         key: ".",
-                        hasChildren: B,
-                        initialOpenState: t || l,
-                        value: v,
+                        hasChildren: J,
+                        initialOpenState: o || l,
+                        value: p,
                         index: 0,
-                        renderExpandLink: L,
+                        renderExpandLink: q,
                         representation: $
                     });
                 }
@@ -1332,14 +1354,15 @@
             }
             // edge case: a single number/string/boolean being rendered (still valid JSON)
                         
-            return n().createElement(pe, {
-                obj: v,
+            return n().createElement(ge, {
+                baseId: r,
+                obj: p,
                 renderValue: F
             });
         }
         // CONCATENATED MODULE: ./src/JSONTree/JSONTree.tsx
-        function me() {
-            return me = Object.assign ? Object.assign.bind() : function(e) {
+        function Oe() {
+            return Oe = Object.assign ? Object.assign.bind() : function(e) {
                 for (var n = 1; n < arguments.length; n++) {
                     var r = arguments[n];
                     for (var t in r) {
@@ -1347,70 +1370,70 @@
                     }
                 }
                 return e;
-            }, me.apply(null, arguments);
+            }, Oe.apply(null, arguments);
         }
-        function be(e, n) {
-            return Oe(e) || we(e, n) || ge(e, n) || he();
+        function we(e, n) {
+            return Ce(e) || je(e, n) || Ie(e, n) || ke();
         }
-        function he() {
+        function ke() {
             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 ge(e, n) {
+        function Ie(e, n) {
             if (e) {
-                if ("string" == typeof e) return Se(e, n);
+                if ("string" == typeof e) return xe(e, n);
                 var r = {}.toString.call(e).slice(8, -1);
-                return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? Se(e, n) : void 0;
+                return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? xe(e, n) : void 0;
             }
         }
-        function Se(e, n) {
+        function xe(e, n) {
             (null == n || n > e.length) && (n = e.length);
             for (var r = 0, t = Array(n); r < n; r++) {
                 t[r] = e[r];
             }
             return t;
         }
-        function we(e, n) {
+        function je(e, n) {
             var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != r) {
-                var t, o, a, l, i = [], u = !0, c = !1;
+                var t, o, a, i, l = [], u = !0, c = !1;
                 try {
                     if (a = (r = r.call(e)).next, 0 === n) {
                         if (Object(r) !== r) return;
                         u = !1;
-                    } else for (;!(u = (t = a.call(r)).done) && (i.push(t.value), i.length !== n); u = !0) {
+                    } else for (;!(u = (t = a.call(r)).done) && (l.push(t.value), l.length !== n); u = !0) {
                     }
                 } catch (e) {
                     c = !0, o = e;
                 } finally {
                     try {
-                        if (!u && null != r["return"] && (l = r["return"](), Object(l) !== l)) return;
+                        if (!u && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
                     } finally {
                         if (c) throw o;
                     }
                 }
-                return i;
+                return l;
             }
         }
-        function Oe(e) {
+        function Ce(e) {
             if (Array.isArray(e)) return e;
         }
-        function ke(e, n) {
+        function Ee(e, n) {
             if (null == e) return {};
-            var r, t, o = Ie(e, n);
+            var r, t, o = Te(e, n);
             if (Object.getOwnPropertySymbols) {
                 var a = Object.getOwnPropertySymbols(e);
                 for (t = 0; t < a.length; t++) {
-                    r = a[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+                    r = a[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
                 }
             }
             return o;
         }
-        function Ie(e, n) {
+        function Te(e, n) {
             if (null == e) return {};
             var r = {};
             for (var t in e) {
                 if ({}.hasOwnProperty.call(e, t)) {
-                    if (n.includes(t)) continue;
+                    if (-1 !== n.indexOf(t)) continue;
                     r[t] = e[t];
                 }
             }
@@ -1418,50 +1441,57 @@
         }
         /** @public */
         /** @public */
-        /** @public */        var xe = {
-            elementRef: i().oneOfType([ i().func, i().object ]),
-            defaultExpanded: i().bool,
-            indent: i().number,
-            json: i().oneOfType([ i().string, i().object, i().array, i().number, i().bool ]).isRequired,
-            onClickKey: i().func,
-            onClickValue: i().func,
-            overflow: i().oneOf([ "wrap", "scroll" ]),
-            expandChildrenOnShiftKey: i().bool
+        /** @public */        var Ae = {
+            elementRef: l().oneOfType([ l().func, l().object ]),
+            defaultExpanded: l().bool,
+            indent: l().number,
+            json: l().oneOfType([ l().string, l().object, l().array, l().number, l().bool ]).isRequired,
+            onClickKey: l().func,
+            onClickValue: l().func,
+            overflow: l().oneOf([ "wrap", "scroll" ]),
+            expandChildrenOnShiftKey: l().bool
         };
         /**
  * Used to visualize a JSON string.
- */        function je(r) {
-            var t = r.elementRef, o = r.defaultExpanded, l = o === void 0 ? false : o, i = r.indent, u = i === void 0 ? 4 : i, c = r.json, f = r.onClickKey, d = r.onClickValue, p = r.overflow, y = p === void 0 ? "scroll" : p, m = r.expandChildrenOnShiftKey, b = m === void 0 ? true : m, h = ke(r, [ "elementRef", "defaultExpanded", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
+ */        function Pe(r) {
+            var t = r.elementRef, o = r.defaultExpanded, i = o === void 0 ? false : o, l = r.indent, c = l === void 0 ? 4 : l, f = r.json, d = r.onClickKey, s = r.onClickValue, v = r.overflow, p = v === void 0 ? "scroll" : v, h = r.expandChildrenOnShiftKey, g = h === void 0 ? true : h, S = Ee(r, [ "elementRef", "defaultExpanded", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
             // @docs-props-type JSONTreePropsBase
-                        var g = a()(c) ? JSON.parse(c) : c;
-            var S = y === "wrap" ? v : s;
-            var w = (0, e.useState)(undefined), O = be(w, 2), k = O[0], I = O[1];
-            var x = function e(n) {
-                I(n);
-            };
+                        var O = (0, e.useMemo)((function() {
+                return S.id || (0, u.createDOMID)("json-tree");
+            }), [ S.id ]);
+            var w = a()(f) ? JSON.parse(f) : f;
+            var k = p === "wrap" ? b : y;
+            var I = (0, e.useState)(undefined), x = we(I, 2), j = x[0], C = x[1];
+            var E = (0, e.useCallback)((function(e) {
+                C(e);
+            }), []);
+            var T = (0, e.useMemo)((function() {
+                return Se({
+                    baseId: O,
+                    defaultOpen: true,
+                    defaultExpanded: i,
+                    expandChildrenOnShiftKey: g,
+                    indent: c,
+                    obj: w,
+                    onClickKey: d,
+                    onClickValue: s,
+                    overflow: p,
+                    shift: j,
+                    updateShift: E
+                });
+            }), [ O, i, g, c, w, d, s, p, j, E ]);
             
-            return n().createElement(S, me({
+            return n().createElement(k, Oe({
                 "data-language": "language-json",
                 "data-test": "json-tree",
                 ref: t,
                 role: "tree"
-            }, h),  n().createElement(A["default"], {
+            }, S),  n().createElement(m, {
                 defaultIndent: false
-            }, ye({
-                defaultOpen: true,
-                defaultExpanded: l,
-                expandChildrenOnShiftKey: b,
-                indent: u,
-                obj: g,
-                onClickKey: f,
-                onClickValue: d,
-                overflow: y,
-                shift: k,
-                updateShift: x
-            })));
+            }, T));
         }
-        je.propTypes = xe;
-        /* harmony default export */        const Ee = je;
+        Pe.propTypes = Ae;
+        /* harmony default export */        const Re = Pe;
     }) // CONCATENATED MODULE: ./src/JSONTree/index.ts
     ();
     module.exports = t;