@splunk/react-ui 4.47.0 → 4.47.1

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 Change Log
 ============
 
+4.47.1 - September 2, 2025
+----------
+Bug Fixes:
+* `JSONTreeItem` now uses unique DOM `id`s by default (SUI-8159).
+
 4.47.0 - July 3, 2025
 ----------
 New Features:

package/JSONTree.js

@@ -47,7 +47,7 @@
                 light: "rgba(0, 0, 0, 0.03)"
             }));
             // CONCATENATED MODULE: ./src/Tree/TreeStyles.ts
-            var m = d().ul.withConfig({
+            var b = d().ul.withConfig({
                 displayName: "TreeStyles__StyledUnorderedList",
                 componentId: "sc-13pokwt-0"
             })([ "", ";font-family:inherit;list-style:none;white-space:inherit;", ";" ], s.mixins.reset("ul"), (function(e) {
@@ -61,7 +61,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-            function b(e, n) {
+            function m(e, n) {
                 if (e) {
                     if (typeof e === "function") {
                         e(n);
@@ -203,7 +203,7 @@
                 }
                 return r;
             }
-            var K = {
+            var D = {
                 id: i().string,
                 children: i().node,
                 content: i().node,
@@ -217,12 +217,12 @@
                 onToggleExpansion: i().func
             };
             /** @public */
-            /** @public */            function D(e) {
+            /** @public */            function K(e) {
                 var n = e.id, r = e.children, a = e.content, i = e.customIndent, l = e.elementRef, u = e.endAdornment, f = e.expanded, d = e.onFocus, s = e.onKeyDown, h = e.onToggleExpansion, S = e.onToggleSelection, O = A(e, [ "id", "children", "content", "customIndent", "elementRef", "endAdornment", "expanded", "onFocus", "onKeyDown", "onToggleExpansion", "onToggleSelection" ]);
                 // @docs-props-type TreeItemPropsBase
-                                var w = (0, t.useContext)(c), I = w.defaultIndent, C = I === void 0 ? true : I, j = w.onItemKeyDown, E = w.onItemClick, T = w.removeNode, P = w.setNode, R = w.itemPaths, K = w.focusedItemId;
+                                var w = (0, t.useContext)(c), I = w.defaultIndent, C = I === void 0 ? true : I, j = w.onItemKeyDown, E = w.onItemClick, T = w.removeNode, P = w.setNode, R = w.itemPaths, D = w.focusedItemId;
  // make first tree item tabbable
-                                var D = (0, t.useState)((R === null || R === void 0 ? void 0 : R.get("".concat(n))) === "0" ? 0 : -1), _ = x(D, 2), N = _[0], V = _[1];
+                                var K = (0, t.useState)((R === null || R === void 0 ? void 0 : R.get("".concat(n))) === "0" ? 0 : -1), _ = x(K, 2), N = _[0], V = _[1];
                 var L = (0, t.useRef)(null);
                 var q = (0, t.useRef)(null);
                 var F = t.Children.toArray(r).filter(t.isValidElement);
@@ -236,8 +236,8 @@
                     }
                 }));
                 var M = (0, t.useCallback)((function(e) {
-                    b(L, e);
-                    b(l, e);
+                    m(L, e);
+                    m(l, e);
                 }), [ l ]);
                 var $ = (0, t.useCallback)((function(e) {
                     var n;
@@ -265,11 +265,11 @@
                     }
                 }), [ n, R ]);
                 (0, t.useEffect)((function() {
-                    if (K === n) {
+                    if (D === n) {
                         var e;
                         L === null || L === void 0 ? void 0 : (e = L.current) === null || e === void 0 ? void 0 : e.focus();
                     }
-                }), [ K, n, L ]);
+                }), [ D, n, L ]);
                 var B = (0, t.useCallback)((function(e) {
                     e.stopPropagation();
                 }), []);
@@ -309,13 +309,13 @@
                     tabIndex: -1,
                     onFocus: B,
                     onClick: J
-                }, a, !f && u)), f &&  o().createElement(o().Fragment, null,  o().createElement(m, {
+                }, a, !f && u)), f &&  o().createElement(o().Fragment, null,  o().createElement(b, {
                     role: "group",
                     $defaultIndent: C
                 }, r), u));
             }
-            D.propTypes = K;
-            /* harmony default export */            const _ = D;
+            K.propTypes = D;
+            /* harmony default export */            const _ = K;
             // CONCATENATED MODULE: ./src/Tree/treeUtils.ts
             function N(e, n) {
                 return M(e) || F(e, n) || L(e, n) || V();
@@ -644,7 +644,7 @@
  // do nothing
                                         }
                 };
-                var b = function e(n, r) {
+                var m = function e(n, r) {
                     n.preventDefault();
                     v(r);
                 };
@@ -664,7 +664,7 @@
                     return {
                         defaultIndent: a,
                         onItemKeyDown: y,
-                        onItemClick: b,
+                        onItemClick: m,
                         removeNode: h,
                         setNode: g,
                         itemPaths: p,
@@ -674,7 +674,7 @@
                 
                 return o().createElement(c.Provider, {
                     value: k
-                },  o().createElement(m, Z({
+                },  o().createElement(b, Z({
                     "data-test": "tree",
                     ref: i,
                     role: "tree",
@@ -792,7 +792,7 @@
         r.r(t);
         // EXPORTS
                 r.d(t, {
-            default: () => /* reexport */ Ie
+            default: () => /* reexport */ xe
         });
         // EXTERNAL MODULE: external "react"
                 var e = r(9497);
@@ -803,53 +803,55 @@
         // CONCATENATED MODULE: external "lodash/isString"
         const i = require("lodash/isString");
         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);
         // EXTERNAL MODULE: external "@splunk/themes"
-                var f = r(3563);
+                var d = r(3563);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeStyles.ts
-        var d = (0, u.css)([ "", ";", ";" ], f.mixins.reset("block"), f.mixins.typography({
+        var s = (0, c.css)([ "", ";", ";" ], d.mixins.reset("block"), d.mixins.typography({
             family: "monospace"
         }));
-        var s = c().code.withConfig({
+        var v = f().code.withConfig({
             displayName: "JSONTreeStyles__StyledScrollCode",
             componentId: "vrdt21-0"
-        })([ "", ";overflow-x:auto;white-space:nowrap;" ], d);
-        var v = c().code.withConfig({
+        })([ "", ";overflow-x:auto;white-space:nowrap;" ], s);
+        var p = f().code.withConfig({
             displayName: "JSONTreeStyles__StyledWrapCode",
             componentId: "vrdt21-1"
-        })([ "", ";white-space:pre-wrap;" ], d);
+        })([ "", ";white-space:pre-wrap;" ], s);
         // CONCATENATED MODULE: external "lodash/fill"
-        const p = require("lodash/fill");
-        var y =  r.n(p);
+        const y = require("lodash/fill");
+        var b =  r.n(y);
         // CONCATENATED MODULE: external "lodash/isArray"
         const m = require("lodash/isArray");
-        var b =  r.n(m);
+        var h =  r.n(m);
         // CONCATENATED MODULE: external "lodash/isEmpty"
-        const h = require("lodash/isEmpty");
-        var g =  r.n(h);
+        const g = require("lodash/isEmpty");
+        var S =  r.n(g);
         // CONCATENATED MODULE: external "lodash/isNumber"
-        const S = require("lodash/isNumber");
-        var k =  r.n(S);
+        const k = require("lodash/isNumber");
+        var O =  r.n(k);
         // CONCATENATED MODULE: external "lodash/isObject"
-        const O = require("lodash/isObject");
-        var w =  r.n(O);
+        const w = require("lodash/isObject");
+        var I =  r.n(w);
         // CONCATENATED MODULE: external "lodash/keys"
-        const I = require("lodash/keys");
-        var x =  r.n(I);
+        const x = require("lodash/keys");
+        var C =  r.n(x);
         // CONCATENATED MODULE: external "lodash/repeat"
-        const C = require("lodash/repeat");
-        var j =  r.n(C);
+        const j = require("lodash/repeat");
+        var E =  r.n(j);
         // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-        const E = require("@splunk/ui-utils/i18n");
+        const T = require("@splunk/ui-utils/i18n");
         // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
-                var T = r(5295);
+                var P = r(5295);
         // EXTERNAL MODULE: ./src/Tree/index.ts + 7 modules
-                var P = r(8655);
+                var A = r(8655);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeItem.tsx
-        function A() {
-            return A = Object.assign ? Object.assign.bind() : function(e) {
+        function R() {
+            return R = Object.assign ? Object.assign.bind() : function(e) {
                 for (var n = 1; n < arguments.length; n++) {
                     var r = arguments[n];
                     for (var t in r) {
@@ -857,29 +859,29 @@
                     }
                 }
                 return e;
-            }, A.apply(null, arguments);
+            }, R.apply(null, arguments);
         }
-        function R(e, n) {
-            return V(e) || N(e, n) || D(e, n) || K();
+        function D(e, n) {
+            return L(e) || V(e, n) || _(e, n) || 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.");
         }
-        function D(e, n) {
+        function _(e, n) {
             if (e) {
-                if ("string" == typeof e) return _(e, n);
+                if ("string" == typeof e) return N(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) ? N(e, n) : void 0;
             }
         }
-        function _(e, n) {
+        function N(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 N(e, n) {
+        function V(e, n) {
             var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != r) {
                 var t, o, a, i, l = [], u = !0, c = !1;
@@ -901,12 +903,12 @@
                 return l;
             }
         }
-        function V(e) {
+        function L(e) {
             if (Array.isArray(e)) return e;
         }
-        function L(e, n) {
+        function q(e, n) {
             if (null == e) return {};
-            var r, t, o = q(e, n);
+            var r, t, o = F(e, n);
             if (Object.getOwnPropertySymbols) {
                 var a = Object.getOwnPropertySymbols(e);
                 for (t = 0; t < a.length; t++) {
@@ -915,7 +917,7 @@
             }
             return o;
         }
-        function q(e, n) {
+        function F(e, n) {
             if (null == e) return {};
             var r = {};
             for (var t in e) {
@@ -926,13 +928,14 @@
             }
             return r;
         }
-        var F = {
+        var M = {
             clickableKeyRef: a().object,
             clickableValRef: a().object,
             hasChildren: a().bool,
             indentArray: a().arrayOf(a().string),
             index: a().number,
             initialOpenState: a().bool,
+            isRoot: a().bool,
             properties: a().arrayOf(a().string),
             propertyDataPath: a().string,
             propertyElement: a().node,
@@ -940,43 +943,43 @@
             representation: a().node,
             value: a().oneOfType([ a().string, a().object, a().array, a().number, a().bool ])
         };
-        function M(r) {
-            var t = r.clickableKeyRef, o = r.clickableValRef, a = r.hasChildren, i = r.indentArray, l = 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 = L(r, [ "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 O = (0, e.useCallback)((function() {
-                k((function(e) {
+        function $(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, s = r.propertyDataPath, v = r.propertyElement, p = r.renderExpandLink, y = r.representation, b = r.value, m = q(r, [ "clickableKeyRef", "clickableValRef", "hasChildren", "indentArray", "index", "initialOpenState", "isRoot", "onFocus", "properties", "propertyDataPath", "propertyElement", "renderExpandLink", "representation", "value" ]);
+            var g = (0, e.useState)(u), S = D(g, 2), k = S[0], O = S[1];
+            var w = (0, e.useCallback)((function() {
+                O((function(e) {
                     return !e;
                 }));
             }), []);
-            var w = (0, e.useRef)(null);
-            var I = v ? v({
-                onToggleExpansion: O,
-                open: S,
+            var I = (0, e.useRef)(null);
+            var x = p ? p({
+                onToggleExpansion: w,
+                open: k,
                 withTooltip: true,
-                expandLinkRef: w
+                expandLinkRef: I
             }) : {
                 expandLink: undefined
-            }, x = I.expandLink;
-            var C = (f === null || f === void 0 ? void 0 : f.length) && l + 1 < (f === null || f === void 0 ? void 0 : f.length) ? "," : null;
+            }, C = x.expandLink;
+            var j = (d === null || d === void 0 ? void 0 : d.length) && l + 1 < (d === null || d === void 0 ? void 0 : d.length) ? "," : null;
             
-            return n().createElement(P["default"].Item, A({
-                content:  n().createElement(n().Fragment, null, s, a && (b()(y) ? "[" : "{"), !a &&  n().createElement(n().Fragment, null, p, C), a && x),
+            return n().createElement(A["default"].Item, R({
+                content:  n().createElement(n().Fragment, null, v, a && (h()(b) ? "[" : "{"), !a &&  n().createElement(n().Fragment, null, y, j), a && C),
                 customIndent: i,
                 "data-test": a ? "node" : null,
-                "data-test-path": d,
-                endAdornment: a &&  n().createElement(n().Fragment, null, S && i, b()(y) ? "]" : "}", C),
-                expanded: S,
+                "data-test-path": s,
+                endAdornment: a &&  n().createElement(n().Fragment, null, k && i, h()(b) ? "]" : "}", j),
+                expanded: k,
                 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 === (w === null || w === void 0 ? void 0 : w.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 === (I === null || I === void 0 ? void 0 : I.current) ? n.relatedTarget : null;
+                    if (c) {
                         var a;
-                        w === null || w === void 0 ? void 0 : (a = w.current) === null || a === void 0 ? void 0 : a.focus();
+                        I === null || I === void 0 ? void 0 : (a = I.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)) {
+                        if (v && (t === null || t === void 0 ? void 0 : t.current)) {
                             var i;
                             (i = t.current) === null || i === void 0 ? void 0 : i.focus();
                         } else if (o === null || o === void 0 ? void 0 : o.current) {
@@ -987,136 +990,136 @@
                         r.focus();
                     }
                 },
-                onToggleExpansion: O,
+                onToggleExpansion: w,
                 tabIndex: 0
-            }, m), a && p);
+            }, m), a && y);
         }
-        M.propTypes = F;
+        $.propTypes = M;
         // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-        const $ = require("@splunk/react-ui/Clickable");
-        var J =  r.n($);
+        const J = require("@splunk/react-ui/Clickable");
+        var U =  r.n(J);
         // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-        const U = require("@splunk/react-ui/Tooltip");
-        var H =  r.n(U);
+        const H = require("@splunk/react-ui/Tooltip");
+        var B =  r.n(H);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeItemStyles.ts
-        var B = {
-            string: f.variables.syntaxTeal,
-            number: f.variables.syntaxBlue,
-            boolean: f.variables.syntaxPurple,
-            null: f.variables.syntaxBrown,
-            object: f.variables.contentColorDefault
+        var X = {
+            string: d.variables.syntaxTeal,
+            number: d.variables.syntaxBlue,
+            boolean: d.variables.syntaxPurple,
+            null: d.variables.syntaxBrown,
+            object: d.variables.contentColorDefault
         };
-        var X = (0, u.css)([ "word-break:break-word;word-wrap:break-word;" ]);
-        var W = (0, u.css)([ "white-space:nowrap;" ]);
-        var z = (0, u.css)([ "color:", ";", ";" ], (function(e) {
+        var W = (0, c.css)([ "word-break:break-word;word-wrap:break-word;" ]);
+        var z = (0, c.css)([ "white-space:nowrap;" ]);
+        var G = (0, c.css)([ "color:", ";", ";" ], (function(e) {
             var n = e.valueType;
-            return B[n];
+            return X[n];
         }), (function(e) {
             var n = e.overflowType;
-            return n === "wrap" ? X : W;
+            return n === "wrap" ? W : z;
         }));
-        var G = c().span.withConfig({
+        var Q = f().span.withConfig({
             displayName: "JSONTreeItemStyles__StyledValue",
             componentId: "o558h3-0"
-        })([ "", "" ], z);
-        var Q = c()(J()).withConfig({
+        })([ "", "" ], G);
+        var Y = f()(U()).withConfig({
             displayName: "JSONTreeItemStyles__StyledValueInteractiveClickable",
             componentId: "o558h3-1"
-        })([ "", " font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], z, f.variables.focusColor, (0, 
-        f.pick)({
-            enterprise: f.variables.backgroundColorHover,
-            prisma: f.variables.interactiveColorOverlayHover
+        })([ "", " font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], G, d.variables.focusColor, (0, 
+        d.pick)({
+            enterprise: d.variables.backgroundColorHover,
+            prisma: d.variables.interactiveColorOverlayHover
         }));
-        var Y = (0, u.css)([ "font-weight:bold;color:", ";" ], (0, f.pick)({
+        var Z = (0, c.css)([ "font-weight:bold;color:", ";" ], (0, d.pick)({
             enterprise: {
                 dark: "#ec9f98",
-                light: f.variables.syntaxRed
+                light: d.variables.syntaxRed
             },
-            prisma: f.variables.syntaxRed
+            prisma: d.variables.syntaxRed
         }));
-        var Z = c().span.withConfig({
+        var ee = f().span.withConfig({
             displayName: "JSONTreeItemStyles__StyledProperty",
             componentId: "o558h3-2"
-        })([ "", "" ], Y);
-        var ee = c()(J()).withConfig({
+        })([ "", "" ], Z);
+        var ne = f()(U()).withConfig({
             displayName: "JSONTreeItemStyles__StyledPropertyInteractiveClickable",
             componentId: "o558h3-3"
-        })([ "", " font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], Y, f.variables.focusColor, (0, 
-        f.pick)({
-            enterprise: f.variables.backgroundColorHover,
-            prisma: f.variables.interactiveColorOverlayHover
+        })([ "", " font-family:inherit;&:focus{box-shadow:0 0 1px 3px ", ";outline:0;&:active{box-shadow:none;}}&:hover{background-color:", ";}" ], Z, d.variables.focusColor, (0, 
+        d.pick)({
+            enterprise: d.variables.backgroundColorHover,
+            prisma: d.variables.interactiveColorOverlayHover
         }));
-        var ne = c()(J()).withConfig({
+        var re = f()(U()).withConfig({
             displayName: "JSONTreeItemStyles__StyledExpandLinkClickable",
             componentId: "o558h3-4"
         })([ "cursor:pointer;color:", ";font-family:inherit;&:hover{background-color:", ";text-decoration:none;}&:focus{box-shadow:", ";&:active{box-shadow:none;}}", "" ], (0, 
-        f.pick)({
+        d.pick)({
             enterprise: {
-                dark: f.variables.accentColorL20,
-                light: f.variables.accentColorD20
+                dark: d.variables.accentColorL20,
+                light: d.variables.accentColorD20
             },
-            prisma: f.variables.interactiveColorPrimary
-        }), (0, f.pick)({
-            enterprise: f.variables.backgroundColorHover,
-            prisma: f.variables.interactiveColorOverlayHover
-        }), f.variables.focusShadowInset, (0, f.pick)({
-            prisma: (0, u.css)([ "border-radius:", ";" ], f.variables.borderRadius)
+            prisma: d.variables.interactiveColorPrimary
+        }), (0, d.pick)({
+            enterprise: d.variables.backgroundColorHover,
+            prisma: d.variables.interactiveColorOverlayHover
+        }), d.variables.focusShadowInset, (0, d.pick)({
+            prisma: (0, c.css)([ "border-radius:", ";" ], d.variables.borderRadius)
         }));
-        var re = c()(H()).withConfig({
+        var te = f()(B()).withConfig({
             displayName: "JSONTreeItemStyles__StyledTooltip",
             componentId: "o558h3-5"
-        })([ "font-family:", ";" ], f.variables.monoFontFamily);
+        })([ "font-family:", ";" ], d.variables.monoFontFamily);
         // CONCATENATED MODULE: ./src/JSONTree/renderTreeItems.tsx
-        function te(e) {
+        function oe(e) {
             "@babel/helpers - typeof";
-            return te = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return oe = "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;
-            }, te(e);
+            }, oe(e);
         }
-        function oe(e) {
-            return ue(e) || le(e) || ie(e) || ae();
+        function ae(e) {
+            return ce(e) || ue(e) || le(e) || ie();
         }
-        function ae() {
+        function ie() {
             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 ie(e, n) {
+        function le(e, n) {
             if (e) {
-                if ("string" == typeof e) return ce(e, n);
+                if ("string" == typeof e) return fe(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) ? ce(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) ? fe(e, n) : void 0;
             }
         }
-        function le(e) {
+        function ue(e) {
             if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
         }
-        function ue(e) {
-            if (Array.isArray(e)) return ce(e);
+        function ce(e) {
+            if (Array.isArray(e)) return fe(e);
         }
-        function ce(e, n) {
+        function fe(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 fe(r) {
+        function de(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 b = (0, e.useRef)(null);
             var m = (0, e.useRef)(null);
-            var h = (0, e.useRef)(null);
-            var S = f({
+            var g = f({
                 key: o,
                 value: i,
-                clickValueRef: m
-            }), k = S.representation, O = S.clickableValRef;
-            var I = !b()(c) ? d(o, h) : {
+                clickValueRef: b
+            }), k = g.representation, O = g.clickableValRef;
+            var w = !h()(c) ? d(o, m) : {
                 propertyElement: undefined,
                 clickableKeyRef: undefined
-            }, x = I.propertyElement, C = I.clickableKeyRef;
-            var j = w()(i) && !g()(i) || b()(i) && i.length > 0;
+            }, x = w.propertyElement, C = w.clickableKeyRef;
+            var j = I()(i) && !S()(i) || h()(i) && i.length > 0;
             
-            return n().createElement(M, {
+            return n().createElement($, {
                 id: t,
                 propertyDataPath: u,
                 propertyElement: x,
@@ -1135,99 +1138,99 @@
                 }
             });
         }
-        function de(r) {
-            var t = r.renderValue, o = r.obj;
-            var a = (0, e.useRef)(null);
-            var i = t({
-                value: o,
-                clickValueRef: a
-            }), l = i.representation;
+        function se(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(P["default"].Item, {
-                id: "0",
+            return n().createElement(A["default"].Item, {
+                id: "".concat(t, "-0"),
                 "data-test-path": ".",
-                content: l
+                content: u
             });
         }
-        function se(e) {
-            var r = e.defaultOpen, t = r === void 0 ? false : r, 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, 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, C = e.shift, P = e.updateShift;
-            var A = y()(Array(s), j()(" ", f));
-            var R;
+        function ve(e) {
+            var r = e.baseId, t = e.defaultOpen, o = t === void 0 ? false : t, a = e.expandChildren, i = a === void 0 ? false : a, 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, g = e.overflow, k = g === void 0 ? "scroll" : g, w = e.path, x = w === void 0 ? [] : w, j = e.shift, A = e.updateShift;
+            var R = b()(Array(v), E()(" ", d));
+            var D;
             var K;
-            var D = function e() {
-                if (a === true) {
-                    return t;
+            var _ = function e() {
+                if (i === true) {
+                    return o;
                 }
-                if (a === "withShiftModifier" || u) {
-                    return !!C;
+                if (i === "withShiftModifier" || c) {
+                    return !!j;
                 }
                 return false;
             };
-            var _ = function e(n) {
-                if (a === "withShiftModifier" || u) {
-                    if (P != null) {
-                        P(n.shiftKey);
+            var N = function e(n) {
+                if (i === "withShiftModifier" || c) {
+                    if (A != null) {
+                        A(n.shiftKey);
                     }
                 }
             };
-            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(oe(I), [ r ]) : oe(I);
+                                var a = r !== undefined ? [].concat(ae(x), [ r ]) : ae(x);
                 var i = ".".concat(a.join("."));
                 (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(n, {
+                y === null || y === void 0 ? void 0 : y(n, {
                     key: i,
                     keyPath: a
                 });
             };
-            var V = function e(n, r) {
+            var L = 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(oe(I), [ r ]) : oe(I);
+                                var a = r !== undefined ? [].concat(ae(x), [ r ]) : ae(x);
                 var i = ".".concat(a.join("."));
-                (t = R) === null || t === void 0 ? void 0 : (o = t.current) === null || o === void 0 ? void 0 : o.focus();
+                (t = D) === 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: i,
                     keyPath: a,
                     value: n.target.textContent
                 });
             };
-            var L = function e(n, r) {
+            var q = function e(n, r) {
                 var t, o;
-                var a = (0, T.keycode)(n.nativeEvent);
-                if (a === "left" && p && ((t = K) === null || t === void 0 ? void 0 : t.current) && !r) {
+                var a = (0, P.keycode)(n.nativeEvent);
+                if (a === "left" && y && ((t = K) === null || t === void 0 ? void 0 : t.current) && !r) {
                     var i;
                     n.stopPropagation();
                     (i = K.current) === null || i === void 0 ? void 0 : i.focus();
                 }
-                if (a === "right" && m && ((o = R) === null || o === void 0 ? void 0 : o.current) && r) {
+                if (a === "right" && m && ((o = D) === null || o === void 0 ? void 0 : o.current) && r) {
                     var l;
                     n.stopPropagation();
-                    (l = R.current) === null || l === void 0 ? void 0 : l.focus();
+                    (l = D.current) === null || l === void 0 ? void 0 : l.focus();
                 }
             };
-            var q = function e(r) {
+            var F = function e(r) {
                 var t = r.onToggleExpansion, o = r.open, a = r.withTooltip, i = r.expandLinkRef;
                 var l = o ? "[-]" : "[+]";
-                var c = o ? (0, E._)("Collapse all") : (0, E._)("Shift click to expand all");
-                var f =  n().createElement(ne, {
+                var u = o ? (0, T._)("Collapse all") : (0, T._)("Shift click to expand all");
+                var f =  n().createElement(re, {
                     elementRef: i,
                     tabIndex: -1,
                     onClick: function e(n) {
-                        _(n);
+                        N(n);
                         t === null || t === void 0 ? void 0 : t(n);
                     },
                     "aria-expanded": o,
                     "data-test": "toggle"
                 }, " ", l, " ");
-                if (u && a) {
+                if (c && a) {
                     return {
-                        expandLink:  n().createElement(re, {
+                        expandLink:  n().createElement(te, {
                             contentRelationship: "description",
                             openDelay: "secondary",
                             defaultPlacement: "above",
-                            content: (0, E._)(c)
+                            content: (0, T._)(u)
                         }, f),
                         expandLinkRef: i
                     };
@@ -1237,144 +1240,147 @@
                     expandLinkRef: i
                 };
             };
-            var F = function e(r) {
-                var t = r.value, o = r.key, i = r.clickValueRef;
-                var c;
-                if (!w()(t)) {
-                    if (typeof t === "string") {
-                        c = '"'.concat(t, '"');
-                    } else if (typeof t === "boolean") {
-                        c = t.toString();
-                    } else if (t === null) {
-                        c = "null";
+            var M = function e(t) {
+                var o = t.value, a = t.key, u = t.clickValueRef;
+                var f;
+                if (!I()(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 (S()(o)) {
                     // isObject is true for arrays
-                    c = b()(t) ? "[]" : "{}";
+                    f = h()(o) ? "[]" : "{}";
                 } else {
-                    c = se({
-                        defaultOpen: a === true,
-                        expandChildren: a,
-                        expandChildrenOnShiftKey: u,
-                        onClickKey: p,
+                    f = ve({
+                        baseId: r,
+                        defaultOpen: i === true,
+                        expandChildren: i,
+                        expandChildrenOnShiftKey: c,
+                        onClickKey: y,
                         onClickValue: m,
-                        overflow: S,
-                        obj: t,
-                        path: o !== undefined ? [].concat(oe(I), [ o ]) : oe(I),
-                        indentLevel: s + 1,
-                        shift: C,
-                        updateShift: P
+                        overflow: k,
+                        obj: o,
+                        path: a !== undefined ? [].concat(ae(x), [ a ]) : ae(x),
+                        indentLevel: v + 1,
+                        shift: j,
+                        updateShift: A
                     });
                 }
-                if (l()(c) || k()(c)) {
-                    var f = t === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
-                    te(t);
+                if (l()(f) || O()(f)) {
+                    var d = o === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
+                    oe(o);
                     if (m) {
                         return {
-                            representation:  n().createElement(Q, {
-                                elementRef: i,
-                                valueType: f,
-                                overflowType: S,
+                            representation:  n().createElement(Y, {
+                                elementRef: u,
+                                valueType: d,
+                                overflowType: k,
                                 onClick: function e(n) {
-                                    R = i;
-                                    V(n, o);
+                                    D = u;
+                                    L(n, a);
                                 },
                                 onKeyDown: function e(n) {
-                                    L(n, false);
+                                    q(n, false);
                                 },
                                 tabIndex: -1
-                            }, c),
-                            clickableValRef: i
+                            }, f),
+                            clickableValRef: u
                         };
                     }
                     return {
-                        representation:  n().createElement(G, {
-                            valueType: f,
-                            overflowType: S
-                        }, c)
+                        representation:  n().createElement(Q, {
+                            valueType: d,
+                            overflowType: k
+                        }, f)
                     };
                 }
                 return {
-                    representation: c
+                    representation: f
                 };
             };
-            var $ = function e(r, t) {
-                if (p) {
+            var J = function e(r, t) {
+                if (y) {
                     return {
-                        propertyElement:  n().createElement("span", null,  n().createElement(ee, {
+                        propertyElement:  n().createElement("span", null,  n().createElement(ne, {
                             elementRef: t,
                             tabIndex: -1,
                             onClick: function e(n) {
                                 K = t;
-                                N(n, r);
+                                V(n, r);
                             },
                             onKeyDown: function e(n) {
-                                L(n, true);
+                                q(n, true);
                             }
                         }, r), ":", " "),
                         clickableKeyRef: t
                     };
                 }
                 return {
-                    propertyElement:  n().createElement("span", null,  n().createElement(Z, null, r), ":", " ")
+                    propertyElement:  n().createElement("span", null,  n().createElement(ee, null, r), ":", " ")
                 };
             };
-            if (w()(v) && !g()(v) || b()(v) && v.length > 0) {
-                var J = x()(v).map((function(e, r, t) {
-                    var o = v[e];
+            if (I()(p) && !S()(p) || h()(p) && p.length > 0) {
+                var U = C()(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 i = I.length === 0 ? ".".concat(a) : ".".concat(I.join("."), ".").concat(a);
+                                        var i = h()(p) ? parseInt(e, 10) : e;
+                    var l = x.length === 0 ? ".".concat(i) : ".".concat(x.join("."), ".").concat(i);
                     
-                    return n().createElement(fe, {
-                        id: i,
-                        key: i,
-                        propertyDataPath: i,
-                        childKey: a,
-                        index: r,
-                        value: o,
-                        properties: t,
-                        obj: v,
-                        renderValue: F,
-                        renderKey: $,
-                        getInitialOpenState: D,
-                        indentArray: A,
-                        renderExpandLink: q,
+                    return n().createElement(de, {
+                        id: "".concat(r, "-").concat(l),
+                        key: l,
+                        propertyDataPath: l,
+                        childKey: i,
+                        index: t,
+                        value: a,
+                        properties: o,
+                        obj: p,
+                        renderValue: M,
+                        renderKey: J,
+                        getInitialOpenState: _,
+                        indentArray: R,
+                        renderExpandLink: F,
                         onFocus: function e(n, r) {
                             K = n;
-                            R = r;
+                            D = r;
                         }
                     });
                 }));
-                if (I.length === 0) {
-                    var U = w()(v) && !g()(v) || b()(v) && v.length > 0;
+                if (x.length === 0) {
+                    var H = I()(p) && !S()(p) || h()(p) && p.length > 0;
                     
-                    return n().createElement(M, {
-                        id: "root",
+                    return n().createElement($, {
+                        id: "".concat(r, "-root"),
+                        isRoot: true,
                         propertyDataPath: ".",
                         key: ".",
-                        hasChildren: U,
-                        initialOpenState: t,
-                        value: v,
+                        hasChildren: H,
+                        initialOpenState: o,
+                        value: p,
                         index: 0,
-                        renderExpandLink: q,
-                        representation: J
+                        renderExpandLink: F,
+                        representation: U
                     });
                 }
-                return J;
+                return U;
             }
             // edge case: a single number/string/boolean being rendered (still valid JSON)
                         
-            return n().createElement(de, {
-                obj: v,
-                renderValue: F
+            return n().createElement(se, {
+                baseId: r,
+                obj: p,
+                renderValue: M
             });
         }
         // CONCATENATED MODULE: ./src/JSONTree/JSONTree.tsx
-        function ve() {
-            return ve = Object.assign ? Object.assign.bind() : function(e) {
+        function pe() {
+            return pe = Object.assign ? Object.assign.bind() : function(e) {
                 for (var n = 1; n < arguments.length; n++) {
                     var r = arguments[n];
                     for (var t in r) {
@@ -1382,29 +1388,29 @@
                     }
                 }
                 return e;
-            }, ve.apply(null, arguments);
+            }, pe.apply(null, arguments);
         }
-        function pe(e, n) {
-            return ge(e) || he(e, n) || me(e, n) || ye();
+        function ye(e, n) {
+            return Se(e) || ge(e, n) || me(e, n) || be();
         }
-        function ye() {
+        function be() {
             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 me(e, n) {
             if (e) {
-                if ("string" == typeof e) return be(e, n);
+                if ("string" == typeof e) return he(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) ? be(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) ? he(e, n) : void 0;
             }
         }
-        function be(e, n) {
+        function he(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 he(e, n) {
+        function ge(e, n) {
             var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != r) {
                 var t, o, a, i, l = [], u = !0, c = !1;
@@ -1426,12 +1432,12 @@
                 return l;
             }
         }
-        function ge(e) {
+        function Se(e) {
             if (Array.isArray(e)) return e;
         }
-        function Se(e, n) {
+        function ke(e, n) {
             if (null == e) return {};
-            var r, t, o = ke(e, n);
+            var r, t, o = Oe(e, n);
             if (Object.getOwnPropertySymbols) {
                 var a = Object.getOwnPropertySymbols(e);
                 for (t = 0; t < a.length; t++) {
@@ -1440,7 +1446,7 @@
             }
             return o;
         }
-        function ke(e, n) {
+        function Oe(e, n) {
             if (null == e) return {};
             var r = {};
             for (var t in e) {
@@ -1453,7 +1459,7 @@
         }
         /** @public */
         /** @public */
-        /** @public */        var Oe = {
+        /** @public */        var we = {
             elementRef: a().oneOfType([ a().func, a().object ]),
             expandChildren: a().oneOfType([ a().bool, a().oneOf([ "withShiftModifier" ]) ]),
             indent: a().number,
@@ -1465,38 +1471,45 @@
         };
         /**
  * Used to visualize a JSON string.
- */        function we(r) {
-            var t = r.elementRef, o = r.expandChildren, a = 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 ? false : m, h = Se(r, [ "elementRef", "expandChildren", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
+ */        function Ie(r) {
+            var t = r.elementRef, o = r.expandChildren, a = o === void 0 ? false : o, i = r.indent, c = i === void 0 ? 4 : i, f = r.json, d = r.onClickKey, s = r.onClickValue, y = r.overflow, b = y === void 0 ? "scroll" : y, m = r.expandChildrenOnShiftKey, h = m === void 0 ? false : m, g = ke(r, [ "elementRef", "expandChildren", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
             // @docs-props-type JSONTreePropsBase
-                        var g = l()(c) ? JSON.parse(c) : c;
-            var S = y === "wrap" ? v : s;
-            var k = (0, e.useState)(undefined), O = pe(k, 2), w = O[0], I = O[1];
-            var x = function e(n) {
-                I(n);
-            };
+                        var S = (0, e.useMemo)((function() {
+                return g.id || (0, u.createDOMID)("json-tree");
+            }), [ g.id ]);
+            var k = l()(f) ? JSON.parse(f) : f;
+            var O = b === "wrap" ? p : v;
+            var w = (0, e.useState)(undefined), I = ye(w, 2), x = I[0], C = I[1];
+            var j = (0, e.useCallback)((function(e) {
+                C(e);
+            }), []);
+            var E = (0, e.useMemo)((function() {
+                return ve({
+                    baseId: S,
+                    defaultOpen: true,
+                    expandChildren: a,
+                    expandChildrenOnShiftKey: h,
+                    indent: c,
+                    obj: k,
+                    onClickKey: d,
+                    onClickValue: s,
+                    overflow: b,
+                    shift: x,
+                    updateShift: j
+                });
+            }), [ S, a, h, c, k, d, s, b, x, j ]);
             
-            return n().createElement(S, ve({
+            return n().createElement(O, pe({
                 "data-language": "language-json",
                 "data-test": "json-tree",
                 ref: t,
                 role: "tree"
-            }, h),  n().createElement(P["default"], {
+            }, g),  n().createElement(A["default"], {
                 defaultIndent: false
-            }, se({
-                defaultOpen: true,
-                expandChildren: a,
-                expandChildrenOnShiftKey: b,
-                indent: u,
-                obj: g,
-                onClickKey: f,
-                onClickValue: d,
-                overflow: y,
-                shift: w,
-                updateShift: x
-            })));
+            }, E));
         }
-        we.propTypes = Oe;
-        /* harmony default export */        const Ie = we;
+        Ie.propTypes = we;
+        /* harmony default export */        const xe = Ie;
     }) // CONCATENATED MODULE: ./src/JSONTree/index.ts
     ();
     module.exports = t;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.47.0",
+  "version": "4.47.1",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",

package/types/src/JSONTree/JSONTreeItem.d.ts

@@ -20,6 +20,7 @@ interface JSONTreeItemPropsBase extends TreeItemPropsBase {
     indentArray?: string[];
     index: number;
     initialOpenState: boolean;
+    isRoot?: boolean;
     properties?: string[];
     propertyDataPath: string;
     propertyElement?: JSX.Element | undefined;
@@ -28,7 +29,7 @@ interface JSONTreeItemPropsBase extends TreeItemPropsBase {
     value?: JSONElement;
 }
 type JSONTreeItemProps = ComponentProps<JSONTreeItemPropsBase, 'li'>;
-export declare function JSONTreeItem({ clickableKeyRef, clickableValRef, hasChildren, indentArray, index, initialOpenState, onFocus, properties, propertyDataPath, propertyElement, renderExpandLink, representation, value, ...otherProps }: JSONTreeItemProps): JSX.Element;
+export declare function JSONTreeItem({ clickableKeyRef, clickableValRef, hasChildren, indentArray, index, initialOpenState, isRoot, onFocus, properties, propertyDataPath, propertyElement, renderExpandLink, representation, value, ...otherProps }: JSONTreeItemProps): JSX.Element;
 export declare namespace JSONTreeItem {
     var propTypes: {
         clickableKeyRef: PropTypes.Requireable<object>;
@@ -37,6 +38,7 @@ export declare namespace JSONTreeItem {
         indentArray: PropTypes.Requireable<(string | null | undefined)[]>;
         index: PropTypes.Requireable<number>;
         initialOpenState: PropTypes.Requireable<boolean>;
+        isRoot: PropTypes.Requireable<boolean>;
         properties: PropTypes.Requireable<(string | null | undefined)[]>;
         propertyDataPath: PropTypes.Requireable<string>;
         propertyElement: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/JSONTree/renderTreeItems.d.ts

@@ -1,5 +1,6 @@
 import { JSONElement, JSONTreeClickKeyHandler, JSONTreeClickValueHandler } from './JSONTree';
 type RenderTreeItemsProps = {
+    baseId: string;
     defaultOpen?: boolean;
     expandChildren?: boolean | 'withShiftModifier';
     expandChildrenOnShiftKey?: boolean;
@@ -13,5 +14,5 @@ type RenderTreeItemsProps = {
     shift?: boolean;
     updateShift: ((newShift: boolean) => void) | undefined;
 };
-export declare function renderTreeItems({ defaultOpen, expandChildren, expandChildrenOnShiftKey, indent, indentLevel, obj, onClickKey, onClickValue, overflow, path, shift, updateShift, }: RenderTreeItemsProps): JSX.Element | JSX.Element[];
+export declare function renderTreeItems({ baseId, defaultOpen, expandChildren, expandChildrenOnShiftKey, indent, indentLevel, obj, onClickKey, onClickValue, overflow, path, shift, updateShift, }: RenderTreeItemsProps): JSX.Element | JSX.Element[];
 export {};