@splunk/react-ui 5.0.0 → 5.1.0

package/JSONTree.js

@@ -2,45 +2,80 @@
     // webpackBootstrap
     /******/ "use strict";
     /******/    var e = {
-        /***/ 4610: 
+        /***/ 8655: 
         /***/ (e, n, r) => {
             // EXPORTS
             r.d(n, {
-                default: () => /* reexport */ ee
+                default: () => /* reexport */ ce
             });
-            // UNUSED EXPORTS: TreeItem
+            // UNUSED EXPORTS: Item
             // EXTERNAL MODULE: external "react"
                         var t = r(9497);
             var o =  r.n(t);
             // EXTERNAL MODULE: external "prop-types"
                         var a = r(23);
             var l =  r.n(a);
+            // EXTERNAL MODULE: external "styled-components"
+                        var i = r(232);
+            var u =  r.n(i);
+            // EXTERNAL MODULE: external "@splunk/themes"
+                        var c = r(3563);
+            // CONCATENATED MODULE: ./src/Tree/ItemStyles.ts
+            var f = u().span.withConfig({
+                displayName: "ItemStyles__StyledTreeItemContentWrapper",
+                componentId: "sc-1ig9nmy-0"
+            })([ "display:inline-block;min-height:100%;" ]);
+            var d = u().span.withConfig({
+                displayName: "ItemStyles__StyledTreeItemIndent",
+                componentId: "sc-1ig9nmy-1"
+            })([ "white-space:pre;" ]);
+            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);
             // CONCATENATED MODULE: ./src/Tree/TreeContext.tsx
-            var i =  (0, t.createContext)({
+            var v =  (0, t.createContext)({
                 defaultIndent: true
             });
-            /* harmony default export */            const u = i;
-            // EXTERNAL MODULE: external "styled-components"
-                        var c = r(232);
-            var d =  r.n(c);
-            // EXTERNAL MODULE: external "@splunk/themes"
-                        var f = r(3563);
-            // CONCATENATED MODULE: ./src/Tree/TreeItemStyles.ts
-            var s = d().span.withConfig({
-                displayName: "TreeItemStyles__StyledTreeItemNode",
-                componentId: "ie7zrw-0"
-            })([ "padding:", ";&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}" ], f.variables.spacingXSmall, f.variables.focusShadowInset);
+            /* harmony default export */            const p = v;
             // CONCATENATED MODULE: ./src/Tree/TreeStyles.ts
-            var v = d().ul.withConfig({
+            var y = u().ul.withConfig({
                 displayName: "TreeStyles__StyledUnorderedList",
                 componentId: "sc-13pokwt-0"
-            })([ "", ";color:inherit;font-family:inherit;list-style:none;white-space:inherit;", ";" ], f.mixins.reset("ul"), (function(e) {
+            })([ "", ";color:inherit;font-family:inherit;list-style:none;white-space:inherit;", ";" ], c.mixins.reset("ul"), (function(e) {
                 var n = e.$defaultIndent;
-                return n && (0, c.css)([ "padding-inline-start:", ";" ], f.variables.spacingXXXLarge);
+                return n && (0, i.css)([ "padding-inline-start:", ";" ], c.variables.spacingXXXLarge);
             }));
-            // CONCATENATED MODULE: ./src/Tree/TreeItem.tsx
-            function p() {
-                return p = Object.assign ? Object.assign.bind() : function(e) {
+            // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+            /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+            function m(e, n) {
+                if (e) {
+                    if (typeof e === "function") {
+                        e(n);
+                    } else {
+                        // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                        // the intention here is to signal "we will take care of setting 'current', not you".
+                        e.current = n;
+ // eslint-disable-line no-param-reassign
+                                        }
+                }
+            }
+            // CONCATENATED MODULE: ./src/Tree/Item.tsx
+            function b(e) {
+                "@babel/helpers - typeof";
+                return b = "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;
+                }, b(e);
+            }
+            function h() {
+                return h = Object.assign ? Object.assign.bind() : function(e) {
                     for (var n = 1; n < arguments.length; n++) {
                         var r = arguments[n];
                         for (var t in r) {
@@ -48,29 +83,72 @@
                         }
                     }
                     return e;
-                }, p.apply(null, arguments);
+                }, h.apply(null, arguments);
+            }
+            function g(e, n) {
+                var r = Object.keys(e);
+                if (Object.getOwnPropertySymbols) {
+                    var t = Object.getOwnPropertySymbols(e);
+                    n && (t = t.filter((function(n) {
+                        return Object.getOwnPropertyDescriptor(e, n).enumerable;
+                    }))), r.push.apply(r, t);
+                }
+                return r;
+            }
+            function S(e) {
+                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]);
+                    })) : 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, {
+                    value: r,
+                    enumerable: !0,
+                    configurable: !0,
+                    writable: !0
+                }) : e[n] = r, e;
+            }
+            function O(e) {
+                var n = k(e, "string");
+                return "symbol" == b(n) ? n : n + "";
+            }
+            function k(e, n) {
+                if ("object" != b(e) || !e) return e;
+                var r = e[Symbol.toPrimitive];
+                if (void 0 !== r) {
+                    var t = r.call(e, n || "default");
+                    if ("object" != b(t)) return t;
+                    throw new TypeError("@@toPrimitive must return a primitive value.");
+                }
+                return ("string" === n ? String : Number)(e);
             }
-            function y(e, n) {
-                return S(e) || g(e, n) || b(e, n) || m();
+            function I(e, n) {
+                return A(e) || C(e, n) || j(e, n) || x();
             }
-            function m() {
+            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 b(e, n) {
+            function j(e, n) {
                 if (e) {
-                    if ("string" == typeof e) return h(e, n);
+                    if ("string" == typeof e) return E(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) ? h(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) ? E(e, n) : void 0;
                 }
             }
-            function h(e, n) {
+            function E(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 g(e, n) {
+            function C(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;
@@ -92,12 +170,12 @@
                     return i;
                 }
             }
-            function S(e) {
+            function A(e) {
                 if (Array.isArray(e)) return e;
             }
-            function w(e, n) {
+            function T(e, n) {
                 if (null == e) return {};
-                var r, t, o = k(e, n);
+                var r, t, o = P(e, n);
                 if (Object.getOwnPropertySymbols) {
                     var a = Object.getOwnPropertySymbols(e);
                     for (t = 0; t < a.length; t++) {
@@ -106,7 +184,7 @@
                 }
                 return o;
             }
-            function k(e, n) {
+            function P(e, n) {
                 if (null == e) return {};
                 var r = {};
                 for (var t in e) {
@@ -117,133 +195,141 @@
                 }
                 return r;
             }
-            var x = {
+            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,
-                onToggle: l().func,
-                open: l().bool,
-                toggle: l().node
+                onToggleSelection: l().func,
+                onToggleExpansion: l().func
             };
-            function O(e) {
-                var n = e.id, r = e.children, a = e.content, l = e.customIndent, i = e.endAdornment, c = e.labelledBy, d = e.onFocus, f = e.onKeyDown, m = e.onToggle, b = e.open, h = b === void 0 ? true : b, g = e.toggle, S = w(e, [ "id", "children", "content", "customIndent", "endAdornment", "labelledBy", "onFocus", "onKeyDown", "onToggle", "open", "toggle" ]);
-                var k = (0, t.useContext)(u), x = k.defaultIndent, O = x === void 0 ? true : x, I = k.onItemKeyDown, E = k.onItemClick, j = k.removeNode, C = k.setNode, A = k.itemPaths, T = k.focusedItemId;
-                var P = (0, t.useState)(h), R = y(P, 2), K = R[0], _ = R[1];
+            /** @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" ]);
+                // @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;
  // make first tree item tabbable
-                                var D = (0, t.useState)((A === null || A === void 0 ? void 0 : A.get("".concat(n))) === "0" ? 0 : -1), N = y(D, 2), V = N[0], L = N[1];
+                                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 q = (0, t.useRef)(null);
                 var M = t.Children.toArray(r).filter(t.isValidElement);
                 M.forEach((function(e, r) {
                     if (e.props.id) {
-                        if (K && C) {
-                            C("".concat(e.props.id), "".concat(A === null || A === void 0 ? void 0 : A.get("".concat(n)), "-").concat(r));
-                        } else if (j) {
-                            j(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);
                         }
                     }
                 }));
-                var $ = function e(n, r) {
-                    _(n);
-                    m === null || m === void 0 ? void 0 : m(n, r);
-                };
-                var J = function e(r) {
-                    E === null || E === void 0 ? void 0 : E(r, n);
-                };
-                var B = function e(n) {
-                    var r;
-                    n.stopPropagation();
-                    F === null || F === void 0 ? void 0 : (r = F.current) === null || r === void 0 ? void 0 : r.focus();
-                    d === null || d === void 0 ? void 0 : d(n);
-                };
-                var U = function e() {
-                    if ((A === null || A === void 0 ? void 0 : A.get("".concat(n))) === "0") {
+                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.
+                    // This allows for common handling of both click and keyboard events in the consumer.
+                                        var t = S({}, r);
+                    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 ]);
+                var J = (0, t.useCallback)((function(e) {
+                    A === null || A === void 0 ? void 0 : A(e, n);
+                }), [ n, A ]);
+                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);
                     }
-                };
+                }), [ n, K ]);
                 (0, t.useEffect)((function() {
-                    if (T === n) {
+                    if (_ === n) {
                         var e;
-                        q === null || q === void 0 ? void 0 : (e = q.current) === null || e === void 0 ? void 0 : e.focus();
+                        F === null || F === void 0 ? void 0 : (e = F.current) === null || e === void 0 ? void 0 : e.focus();
+                    }
+                }), [ _, n, F ]);
+                var G = (0, t.useCallback)((function(e) {
+                    e.stopPropagation();
+                }), []);
+                var H = (0, t.useCallback)((function(e) {
+                    e.stopPropagation();
+                    if (e.key === " ") {
+                        O === null || O === void 0 ? void 0 : O(e, {
+                            treeItemId: n
+                        });
+                        return;
                     }
-                }), [ T, q ]);
-                var X = function e(n) {
-                    n.stopPropagation();
-                };
-                var G = function e(r) {
-                    r.stopPropagation();
                     // Used to ensure first item in Tree is tab navigable, i.e. in JSONTree when focus is manually set to the root item,
                     // this allows user to tab backwards to previous item. Tab index is reset to 0 onBlur.
-                                        if (r.shiftKey && r.key === "Tab" && (A === null || A === void 0 ? void 0 : A.get("".concat(n))) === "0") {
+                                        if (e.shiftKey && e.key === "Tab" && (K === null || K === void 0 ? void 0 : K.get("".concat(n))) === "0") {
                         L(-1);
                     }
-                    I === null || I === void 0 ? void 0 : I(r, n, K, M, $);
-                    f === null || f === void 0 ? void 0 : f(r);
-                };
-                var H = function e() {
-                    if (!g) {
-                        return undefined;
-                    }
-                    
-                    return (0, t.cloneElement)(g, {
-                        onClick: function e(n) {
-                            var r, t;
-                            $(!K, n);
-                            J(n);
-                            (r = (t = g.props).onClick) === null || r === void 0 ? void 0 : r.call(t, n);
-                        },
-                        "aria-expanded": K
-                    });
-                };
+                    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 ]);
                 
-                return o().createElement("li", p({}, S, {
-                    ref: q,
+                return o().createElement("li", h({
+                    "data-test": "tree-item"
+                }, k, {
+                    id: n,
+                    ref: $,
                     tabIndex: V,
-                    onBlur: U,
-                    onFocus: B,
-                    onKeyDown: G,
+                    onBlur: X,
+                    onFocus: U,
+                    onKeyDown: H,
                     role: "treeitem",
-                    "aria-labelledby": c,
-                    "aria-expanded": M.length ? K : undefined
-                }), l,  o().createElement(s, {
-                    ref: F,
+                    "aria-labelledby": v,
+                    "aria-expanded": M.length ? c || "false" : undefined
+                }),  o().createElement(f, null,  o().createElement(d, null, l),  o().createElement(s, {
+                    "data-test": "tree-item-content",
+                    ref: q,
                     tabIndex: -1,
-                    onFocus: X,
+                    onFocus: G,
                     onClick: J
-                }, a, H(), !K && i), K &&  o().createElement(o().Fragment, null,  o().createElement(v, {
+                }, a, !c && u)), c &&  o().createElement(o().Fragment, null,  o().createElement(y, {
                     role: "group",
-                    $defaultIndent: O
-                }, r), i));
+                    $defaultIndent: E
+                }, r), u));
             }
-            O.propTypes = x;
-            /* harmony default export */            const I = O;
+            K.propTypes = R;
+            /* harmony default export */            const _ = K;
             // CONCATENATED MODULE: ./src/Tree/treeUtils.ts
-            function E(e, n) {
-                return P(e) || T(e, n) || C(e, n) || j();
+            function D(e, n) {
+                return q(e) || F(e, n) || V(e, n) || N();
             }
-            function j() {
+            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.");
             }
-            function C(e, n) {
+            function V(e, n) {
                 if (e) {
-                    if ("string" == typeof e) return A(e, n);
+                    if ("string" == typeof e) return L(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) ? A(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) ? L(e, n) : void 0;
                 }
             }
-            function A(e, n) {
+            function L(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 T(e, n) {
+            function F(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;
@@ -265,145 +351,145 @@
                     return i;
                 }
             }
-            function P(e) {
+            function q(e) {
                 if (Array.isArray(e)) return e;
             }
             /**
  * A helper function to get first key in Map that matches given value
- */            function R(e, n) {
+ */            function M(e, n) {
                 var r;
                 var t = Array.from(e.entries());
                 return (r = t.find((function(e) {
-                    var r = E(e, 2), t = r[1];
+                    var r = D(e, 2), t = r[1];
                     return t === n;
                 }))) === null || r === void 0 ? void 0 : r[0];
             }
             /**
  * A helper function to get parent path of current item path
- */            function K(e) {
+ */            function $(e) {
                 // remove last index number of the current item path string to get parent
                 return e.split("-").slice(0, -1).join("-");
             }
             /**
  * A helper function to get next path of current item path in same level
- */            function _(e, n) {
+ */            function B(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 D(e) {
+ */            function J(e) {
                 var n = e.split("-").pop();
                 if (!n) {
                     return 0;
                 }
                 return parseInt(n, 10) || 0;
             }
-            function N(e, n) {
+            function U(e, n) {
                 var r = e.get(n);
                 if (!r) {
                     return n;
                 }
-                var t = K(r);
-                return R(e, t) || n;
+                var t = $(r);
+                return M(e, t) || n;
             }
             /**
  * A helper function for getNextTreeItem
- */            function V(e, n) {
-                var r = K(n);
+ */            function X(e, n) {
+                var r = $(n);
                 if (!r) {
-                    return R(e, n);
+                    return M(e, n);
                 }
                 // get next node in the parent level
-                                var t = D(r);
-                var o = _(r, t);
-                var a = R(e, o);
+                                var t = J(r);
+                var o = B(r, t);
+                var a = M(e, o);
                 if (a) {
                     return a;
                 }
                 // continue getting parents until find next node or reach root
-                                return V(e, o);
+                                return X(e, o);
             }
-            function L(e, n) {
+            function G(e, n) {
                 var r = e.get(n);
                 if (!r) {
                     return n;
                 }
                 // case where next tree item is the first visible child
-                                var t = R(e, "".concat(r, "-0"));
+                                var t = M(e, "".concat(r, "-0"));
                 if (t) {
                     return t;
                 }
                 // case where next tree item is the next node in the same level
-                                var o = D(r);
-                var a = _(r, o);
-                var l = R(e, a);
+                                var o = J(r);
+                var a = B(r, o);
+                var l = M(e, a);
                 if (l) {
                     return l;
                 }
                 // case where next tree item is a higher level or does not exist
-                                return V(e, r) || n;
+                                return X(e, r) || n;
             }
             /**
  * A helper function for getPrevTreeItem
- */            function F(e, n) {
-                var r = R(e, "".concat(n, "-0"));
+ */            function H(e, n) {
+                var r = M(e, "".concat(n, "-0"));
                 if (!r) {
-                    return R(e, n);
+                    return M(e, n);
                 }
-                var t = R(e, n);
+                var t = M(e, n);
                 var o = "".concat(n, "-0");
                 // get the last child in current node, and continue to find its children recursively
                                 while (t) {
-                    var a = D(o);
-                    var l = _(o, a);
-                    t = R(e, l);
+                    var a = J(o);
+                    var l = B(o, a);
+                    t = M(e, l);
                     if (t) {
                         o = l;
                     }
                 }
-                return F(e, o);
+                return H(e, o);
             }
-            function q(e, n) {
+            function W(e, n) {
                 var r = e.get(n);
                 if (!r) {
                     return n;
                 }
-                var t = D(r);
+                var t = J(r);
                 // case where current is first child of parent or root item
                                 if (t === 0) {
-                    return N(e, n);
+                    return U(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));
-                return F(e, o) || n;
+                return H(e, o) || n;
             }
-            function M(e) {
-                return R(e, "0");
+            function z(e) {
+                return M(e, "0");
             }
-            function $(e) {
+            function Q(e) {
                 var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "0";
-                var r = R(e, n);
+                var r = M(e, n);
                 var t = n;
                 // find last child in current node
                                 while (r) {
-                    var o = D(t);
-                    r = R(e, _(t, o));
+                    var o = J(t);
+                    r = M(e, B(t, o));
                     if (r) {
-                        t = _(t, o);
+                        t = B(t, o);
                     }
                 }
                 // check if last child has children
-                                var a = R(e, "".concat(t, "-0"));
+                                var a = M(e, "".concat(t, "-0"));
                 if (!a) {
-                    return R(e, t);
+                    return M(e, t);
                 }
                 // continue to find its last child recursively
                                 t = "".concat(t, "-0");
-                return $(e, t);
+                return Q(e, t);
             }
             // CONCATENATED MODULE: ./src/Tree/Tree.tsx
-            function J() {
-                return J = Object.assign ? Object.assign.bind() : function(e) {
+            function Y() {
+                return Y = Object.assign ? Object.assign.bind() : function(e) {
                     for (var n = 1; n < arguments.length; n++) {
                         var r = arguments[n];
                         for (var t in r) {
@@ -411,29 +497,29 @@
                         }
                     }
                     return e;
-                }, J.apply(null, arguments);
+                }, Y.apply(null, arguments);
             }
-            function B(e, n) {
-                return z(e) || H(e, n) || X(e, n) || U();
+            function Z(e, n) {
+                return oe(e) || te(e, n) || ne(e, n) || ee();
             }
-            function U() {
+            function ee() {
                 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 X(e, n) {
+            function ne(e, n) {
                 if (e) {
-                    if ("string" == typeof e) return G(e, n);
+                    if ("string" == typeof e) return re(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) ? G(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) ? re(e, n) : void 0;
                 }
             }
-            function G(e, n) {
+            function re(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 H(e, n) {
+            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;
@@ -455,12 +541,12 @@
                     return i;
                 }
             }
-            function z(e) {
+            function oe(e) {
                 if (Array.isArray(e)) return e;
             }
-            function W(e, n) {
+            function ae(e, n) {
                 if (null == e) return {};
-                var r, t, o = Q(e, n);
+                var r, t, o = le(e, n);
                 if (Object.getOwnPropertySymbols) {
                     var a = Object.getOwnPropertySymbols(e);
                     for (t = 0; t < a.length; t++) {
@@ -469,7 +555,7 @@
                 }
                 return o;
             }
-            function Q(e, n) {
+            function le(e, n) {
                 if (null == e) return {};
                 var r = {};
                 for (var t in e) {
@@ -480,103 +566,115 @@
                 }
                 return r;
             }
-            var Y = {
+            var ie = {
                 children: l().node,
-                defaultIndent: l().bool
+                defaultIndent: l().bool,
+                elementRef: l().oneOfType([ l().func, l().object ])
             };
-            function Z(e) {
-                var n = e.children, r = e.defaultIndent, a = r === void 0 ? true : r, l = W(e, [ "children", "defaultIndent" ]);
-                var i = (0, t.useState)(), c = B(i, 2), d = c[0], f = c[1];
+            /**
+ * 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" ]);
+                // @docs-props-type TreePropsBase
+                                var u = (0, t.useState)(), c = Z(u, 2), f = c[0], d = c[1];
                 var s = new Map;
-                var p = function e(n, r, t, o, a) {
+                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) {
                       case "ArrowUp":
                         n.preventDefault();
-                        f(q(s, r));
+                        d(W(s, r));
                         break;
 
                       case "ArrowDown":
                         n.preventDefault();
-                        f(L(s, r));
+                        d(G(s, r));
                         break;
 
                       case "ArrowLeft":
                         n.preventDefault();
                         if (l) {
-                            a(false, n);
+                            a(n, {
+                                treeItemId: r
+                            });
                         } else {
-                            f(N(s, r));
+                            d(U(s, r));
                         }
                         break;
 
                       case "ArrowRight":
                         n.preventDefault();
                         if (l) {
-                            f(L(s, r));
+                            d(G(s, r));
                         } else {
-                            a(true, n);
+                            a(n, {
+                                treeItemId: r
+                            });
                         }
                         break;
 
                       case "Home":
                         n.preventDefault();
-                        f(M(s));
+                        d(z(s));
                         break;
 
                       case "End":
                         n.preventDefault();
-                        f($(s));
+                        d(Q(s));
                         break;
 
                       case "Enter":
                         n.preventDefault();
-                        a(!l, n);
+                        a(n, {
+                            treeItemId: r
+                        });
                         break;
 
                       default:
  // do nothing
                                         }
                 };
-                var y = function e(n, r) {
+                var m = function e(n, r) {
                     n.preventDefault();
-                    f(r);
+                    d(r);
                 };
-                var m = function e(n) {
+                var b = function e(n) {
                     s["delete"](n);
                 };
-                var b = function e(n, r) {
+                var h = function e(n, r) {
                     s.set(n, r);
                 };
-                var h = t.Children.toArray(n).filter(t.isValidElement);
-                h.forEach((function(e, n) {
-                    if (e.props.id && b) {
-                        b("".concat(e.props.id), "".concat(n));
+                var g = t.Children.toArray(n).filter(t.isValidElement);
+                g.forEach((function(e, n) {
+                    if (e.props.id && h) {
+                        h("".concat(e.props.id), "".concat(n));
                     }
                 }));
-                var g = (0, t.useMemo)((function() {
+                var S = (0, t.useMemo)((function() {
                     return {
                         defaultIndent: a,
-                        onItemKeyDown: p,
-                        onItemClick: y,
-                        removeNode: m,
-                        setNode: b,
+                        onItemKeyDown: v,
+                        onItemClick: m,
+                        removeNode: b,
+                        setNode: h,
                         itemPaths: s,
-                        focusedItemId: d
+                        focusedItemId: f
                     };
-                }), [ a, d, s, p, m, b ]);
+                }), [ a, f, s, v, b, h ]);
                 
-                return o().createElement(u.Provider, {
-                    value: g
-                },  o().createElement(v, J({
+                return o().createElement(p.Provider, {
+                    value: S
+                },  o().createElement(y, Y({
+                    "data-test": "tree",
+                    ref: l,
                     role: "tree",
                     $defaultIndent: a
-                }, l), n));
+                }, i), n));
             }
-            Z.propTypes = Y;
-            Z.TreeItem = I;
-            /* harmony default export */            const ee = Z;
+            ue.propTypes = ie;
+            ue.Item = _;
+            /* harmony default export */            const ce = ue;
         } // CONCATENATED MODULE: ./src/Tree/index.ts
         /***/ ,
         /***/ 3563: 
@@ -681,34 +779,34 @@
         r.r(t);
         // EXPORTS
                 r.d(t, {
-            default: () => /* reexport */ je
+            default: () => /* reexport */ Ee
         });
         // EXTERNAL MODULE: external "react"
                 var e = r(9497);
         var n =  r.n(e);
-        // EXTERNAL MODULE: external "prop-types"
-                var o = r(23);
-        var a =  r.n(o);
         // CONCATENATED MODULE: external "lodash/isString"
-        const l = require("lodash/isString");
+        const o = require("lodash/isString");
+        var a =  r.n(o);
+        // EXTERNAL MODULE: external "prop-types"
+                var l = r(23);
         var i =  r.n(l);
         // EXTERNAL MODULE: external "styled-components"
                 var u = r(232);
         var c =  r.n(u);
         // EXTERNAL MODULE: external "@splunk/themes"
-                var d = r(3563);
+                var f = r(3563);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeStyles.ts
-        var f = (0, u.css)([ "", ";", ";color:", ";" ], d.mixins.reset("block"), d.mixins.typography({
+        var d = (0, u.css)([ "", ";", ";color:", ";padding:4px;" ], f.mixins.reset("block"), f.mixins.typography({
             family: "monospace"
-        }), d.variables.syntaxGray);
+        }), f.variables.syntaxGray);
         var s = c().code.withConfig({
             displayName: "JSONTreeStyles__StyledScrollCode",
             componentId: "vrdt21-0"
-        })([ "", ";overflow-x:auto;white-space:nowrap;" ], f);
+        })([ "", ";overflow-x:auto;white-space:nowrap;" ], d);
         var v = c().code.withConfig({
             displayName: "JSONTreeStyles__StyledWrapCode",
             componentId: "vrdt21-1"
-        })([ "", ";white-space:pre-wrap;" ], f);
+        })([ "", ";white-space:pre-wrap;" ], d);
         // CONCATENATED MODULE: external "lodash/fill"
         const p = require("lodash/fill");
         var y =  r.n(p);
@@ -722,18 +820,18 @@
         const S = require("lodash/isNumber");
         var w =  r.n(S);
         // CONCATENATED MODULE: external "lodash/isObject"
-        const k = require("lodash/isObject");
-        var x =  r.n(k);
+        const O = require("lodash/isObject");
+        var k =  r.n(O);
         // CONCATENATED MODULE: external "lodash/keys"
-        const O = require("lodash/keys");
-        var I =  r.n(O);
+        const I = require("lodash/keys");
+        var x =  r.n(I);
         // CONCATENATED MODULE: external "lodash/repeat"
-        const E = require("lodash/repeat");
-        var j =  r.n(E);
+        const j = require("lodash/repeat");
+        var E =  r.n(j);
         // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
         const C = require("@splunk/ui-utils/i18n");
-        // EXTERNAL MODULE: ./src/Tree/index.ts + 6 modules
-                var A = r(4610);
+        // EXTERNAL MODULE: ./src/Tree/index.ts + 7 modules
+                var A = r(8655);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeItem.tsx
         function T() {
             return T = Object.assign ? Object.assign.bind() : function(e) {
@@ -814,48 +912,52 @@
             return r;
         }
         var F = {
-            clickableKeyRef: a().object,
-            clickableValRef: a().object,
-            hasChildren: a().bool,
-            indentArray: a().arrayOf(a().string),
-            index: a().number,
-            initialOpenState: a().bool,
-            properties: a().arrayOf(a().string),
-            propertyDataPath: a().string,
-            propertyElement: a().node,
-            renderExpandLink: a().func,
-            representation: a().node,
-            value: a().oneOfType([ a().string, a().object, a().array, a().number, a().bool ])
+            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 ])
         };
         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, d = r.properties, f = 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 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 k = function e(n) {
-                w(n);
-            };
-            var x = (0, e.useRef)(null);
-            var O = v ? v({
+            var O = (0, e.useCallback)((function() {
+                w((function(e) {
+                    return !e;
+                }));
+            }), []);
+            var k = (0, e.useRef)(null);
+            var I = v ? v({
+                onToggleExpansion: O,
                 open: S,
                 withTooltip: true,
-                expandLinkRef: x
+                expandLinkRef: k
             }) : {
                 expandLink: undefined
-            }, I = O.expandLink;
-            var E = (d === null || d === void 0 ? void 0 : d.length) && i + 1 < (d === null || d === void 0 ? void 0 : d.length) ? "," : null;
+            }, 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;
             
-            return n().createElement(A["default"].TreeItem, T({
-                content:  n().createElement(n().Fragment, null, s, a && (b()(y) ? "[" : "{"), !a &&  n().createElement(n().Fragment, null, p, E)),
+            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,
                 "data-test": a ? "node" : null,
-                "data-test-path": f,
-                endAdornment: a &&  n().createElement(n().Fragment, null, S && l, b()(y) ? "]" : "}", E),
+                "data-test-path": d,
+                endAdornment: a &&  n().createElement(n().Fragment, null, S && l, b()(y) ? "]" : "}", j),
+                expanded: S,
                 onFocus: function e(n) {
                     c === null || c === void 0 ? void 0 : c(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 === (x === null || x === void 0 ? void 0 : x.current) ? n.relatedTarget : null;
+                                        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 a;
-                        x === null || x === void 0 ? void 0 : (a = x.current) === null || a === void 0 ? void 0 : a.focus();
+                        k === null || k === void 0 ? void 0 : (a = k.current) === null || a === void 0 ? void 0 : a.focus();
                     }
                     if (!r) {
                         // if JSONTreeItem contains clickable keys/vals, focus should go there
@@ -870,10 +972,8 @@
                         r.focus();
                     }
                 },
-                onToggle: k,
-                open: u,
-                tabIndex: 0,
-                toggle: a ? I : undefined
+                onToggleExpansion: O,
+                tabIndex: 0
             }, m), a && p);
         }
         q.propTypes = F;
@@ -881,57 +981,57 @@
         const M = require("@splunk/react-ui/ButtonSimple");
         var $ =  r.n(M);
         // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-        const J = require("@splunk/react-ui/Clickable");
-        var B =  r.n(J);
+        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: d.variables.syntaxTeal,
-            number: d.variables.syntaxBlue,
-            boolean: d.variables.syntaxPurple,
-            null: d.variables.syntaxBrown,
-            object: d.variables.syntaxGray,
-            array: d.variables.syntaxGray
+            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 z = (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 W = (0, 
+        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:", ";}" ], d.variables.focusShadow, d.variables.neutral50);
+        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 : z;
-        }), W);
+            return n === "wrap" ? H : W;
+        }), z);
         var Z = c().span.withConfig({
             displayName: "JSONTreeItemStyles__StyledValue",
             componentId: "o558h3-0"
         })([ "", "" ], Y);
-        var ee = c()(B()).withConfig({
+        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:", ";" ], W, d.variables.syntaxRed);
+        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()(B()).withConfig({
+        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;}}" ], W, d.variables.spacingXSmall, d.variables.spacingXSmall, d.variables.actionColorBackgroundSubtleHover, d.variables.focusShadowInset);
+        })([ "", ";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:", ";" ], d.variables.monoFontFamily);
+        })([ "font-family:", ";" ], f.variables.monoFontFamily);
         // CONCATENATED MODULE: ./src/JSONTree/renderTreeItems.tsx
         function le(e) {
             "@babel/helpers - typeof";
@@ -942,7 +1042,7 @@
             }, le(e);
         }
         function ie(e) {
-            return fe(e) || de(e) || ce(e) || ue();
+            return de(e) || fe(e) || ce(e) || ue();
         }
         function ue() {
             throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -954,10 +1054,10 @@
                 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;
             }
         }
-        function de(e) {
+        function fe(e) {
             if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
         }
-        function fe(e) {
+        function de(e) {
             if (Array.isArray(e)) return se(e);
         }
         function se(e, n) {
@@ -968,25 +1068,25 @@
             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, d = r.renderValue, f = r.renderKey, s = r.getInitialOpenState, v = r.indentArray, p = r.renderExpandLink, y = r.onFocus;
+            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;
             var m = (0, e.useRef)(null);
             var h = (0, e.useRef)(null);
-            var S = d({
+            var S = f({
                 key: o,
                 value: l,
                 clickValueRef: m
-            }), w = S.representation, k = S.clickableValRef;
-            var O = !b()(c) ? f(o, h) : {
+            }), w = S.representation, O = S.clickableValRef;
+            var I = !b()(c) ? d(o, h) : {
                 propertyElement: undefined,
                 clickableKeyRef: undefined
-            }, I = O.propertyElement, E = O.clickableKeyRef;
-            var j = x()(l) && !g()(l) || b()(l) && l.length > 0;
+            }, x = I.propertyElement, j = I.clickableKeyRef;
+            var E = k()(l) && !g()(l) || b()(l) && l.length > 0;
             
             return n().createElement(q, {
                 id: t,
                 propertyDataPath: u,
-                propertyElement: I,
-                hasChildren: j,
+                propertyElement: x,
+                hasChildren: E,
                 initialOpenState: s(),
                 representation: w,
                 indentArray: v,
@@ -994,10 +1094,10 @@
                 index: a,
                 properties: i,
                 renderExpandLink: p,
-                clickableKeyRef: E,
-                clickableValRef: k,
+                clickableKeyRef: j,
+                clickableValRef: O,
                 onFocus: function e() {
-                    y(E, k);
+                    y(j, O);
                 }
             });
         }
@@ -1009,23 +1109,23 @@
                 clickValueRef: a
             }), i = l.representation;
             
-            return n().createElement(A["default"].TreeItem, {
+            return n().createElement(A["default"].Item, {
                 id: "0",
                 "data-test-path": ".",
                 content: i
             });
         }
         function ye(e) {
-            var r = e.defaultOpen, t = r === void 0 ? false : r, o = e.defaultExpanded, a = o === void 0 ? false : o, l = e.expandChildrenOnShiftKey, u = l === void 0 ? false : l, c = e.indent, d = c === void 0 ? 4 : c, f = e.indentLevel, s = f === void 0 ? 1 : f, v = e.obj, p = e.onClickKey, m = e.onClickValue, h = e.overflow, S = h === void 0 ? "scroll" : h, k = e.path, O = k === void 0 ? [] : k, E = e.shift, A = e.updateShift;
-            var T = y()(Array(s), j()(" ", d));
+            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;
             var K = function e() {
-                if (a && E == null) {
+                if (l && j == null) {
                     return true;
                 }
                 if (u) {
-                    return !!E;
+                    return !!j;
                 }
                 return t;
             };
@@ -1037,7 +1137,7 @@
             var D = 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(O), [ r ]) : ie(O);
+                                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, {
@@ -1048,7 +1148,7 @@
             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(O), [ r ]) : ie(O);
+                                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();
                 m === null || m === void 0 ? void 0 : m(n, {
@@ -1072,39 +1172,40 @@
                 }
             };
             var L = function e(r) {
-                var t = r.open, o = r.withTooltip, a = r.expandLinkRef;
-                var l = t ? "[-]" : "[+]";
-                var i = t ? (0, C._)("Collapse all") : (0, C._)("Shift click to expand all");
-                var c =  n().createElement(oe, {
+                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, {
                     appearance: "subtle",
-                    elementRef: a,
+                    elementRef: l,
                     tabIndex: -1,
                     onClick: function e(n) {
                         _(n);
+                        t === null || t === void 0 ? void 0 : t(n);
                     },
-                    "aria-expanded": t,
+                    "aria-expanded": o,
                     "data-test": "toggle"
-                }, l);
-                if (u && o) {
+                }, i);
+                if (u && a) {
                     return {
                         expandLink:  n().createElement(ae, {
                             contentRelationship: "description",
                             openDelay: "secondary",
                             defaultPlacement: "above",
-                            content: (0, C._)(i)
-                        }, c),
-                        expandLinkRef: a
+                            content: (0, C._)(c)
+                        }, f),
+                        expandLinkRef: l
                     };
                 }
                 return {
-                    expandLink: c,
-                    expandLinkRef: a
+                    expandLink: f,
+                    expandLinkRef: l
                 };
             };
             var F = function e(r) {
-                var t = r.value, o = r.key, l = r.clickValueRef;
+                var t = r.value, o = r.key, i = r.clickValueRef;
                 var c;
-                if (!x()(t)) {
+                if (!k()(t)) {
                     if (typeof t === "string") {
                         c = '"'.concat(t, '"');
                     } else if (typeof t === "boolean") {
@@ -1119,30 +1220,30 @@
                     c = b()(t) ? "[]" : "{}";
                 } else {
                     c = ye({
-                        defaultOpen: a === true,
-                        defaultExpanded: a,
+                        defaultOpen: l === true,
+                        defaultExpanded: l,
                         expandChildrenOnShiftKey: u,
                         onClickKey: p,
                         onClickValue: m,
                         overflow: S,
                         obj: t,
-                        path: o !== undefined ? [].concat(ie(O), [ o ]) : ie(O),
+                        path: o !== undefined ? [].concat(ie(I), [ o ]) : ie(I),
                         indentLevel: s + 1,
-                        shift: E,
+                        shift: j,
                         updateShift: A
                     });
                 }
-                if (i()(c) || w()(c)) {
-                    var d = t === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
+                if (a()(c) || w()(c)) {
+                    var f = t === null ? "null" : // TS: bigint, function, symbol are prevented by JSONElement type
                     le(t);
                     if (m) {
                         return {
                             representation:  n().createElement(ee, {
-                                elementRef: l,
-                                valueType: d,
+                                elementRef: i,
+                                valueType: f,
                                 overflowType: S,
                                 onClick: function e(n) {
-                                    P = l;
+                                    P = i;
                                     N(n, o);
                                 },
                                 onKeyDown: function e(n) {
@@ -1150,12 +1251,12 @@
                                 },
                                 tabIndex: -1
                             }, c),
-                            clickableValRef: l
+                            clickableValRef: i
                         };
                     }
                     return {
                         representation:  n().createElement(Z, {
-                            valueType: d,
+                            valueType: f,
                             overflowType: S
                         }, c)
                     };
@@ -1185,12 +1286,12 @@
                     propertyElement:  n().createElement(n().Fragment, null,  n().createElement(re, null, r), ":", " ")
                 };
             };
-            if (x()(v) && !g()(v) || b()(v) && v.length > 0) {
-                var $ = I()(v).map((function(e, r, t) {
+            if (k()(v) && !g()(v) || b()(v) && v.length > 0) {
+                var $ = x()(v).map((function(e, r, t) {
                     var o = v[e];
  // TS: should be safe based on (recursive) JSONElement type
                                         var a = b()(v) ? parseInt(e, 10) : e;
-                    var l = O.length === 0 ? ".".concat(a) : ".".concat(O.join("."), ".").concat(a);
+                    var l = I.length === 0 ? ".".concat(a) : ".".concat(I.join("."), ".").concat(a);
                     
                     return n().createElement(ve, {
                         id: l,
@@ -1212,15 +1313,15 @@
                         }
                     });
                 }));
-                if (O.length === 0) {
-                    var J = x()(v) && !g()(v) || b()(v) && v.length > 0;
+                if (I.length === 0) {
+                    var B = k()(v) && !g()(v) || b()(v) && v.length > 0;
                     
                     return n().createElement(q, {
                         id: "root",
                         propertyDataPath: ".",
                         key: ".",
-                        hasChildren: J,
-                        initialOpenState: t || a,
+                        hasChildren: B,
+                        initialOpenState: t || l,
                         value: v,
                         index: 0,
                         renderExpandLink: L,
@@ -1249,7 +1350,7 @@
             }, me.apply(null, arguments);
         }
         function be(e, n) {
-            return ke(e) || we(e, n) || ge(e, n) || he();
+            return Oe(e) || we(e, n) || ge(e, n) || he();
         }
         function he() {
             throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -1290,12 +1391,12 @@
                 return i;
             }
         }
-        function ke(e) {
+        function Oe(e) {
             if (Array.isArray(e)) return e;
         }
-        function xe(e, n) {
+        function ke(e, n) {
             if (null == e) return {};
-            var r, t, o = Oe(e, n);
+            var r, t, o = Ie(e, n);
             if (Object.getOwnPropertySymbols) {
                 var a = Object.getOwnPropertySymbols(e);
                 for (t = 0; t < a.length; t++) {
@@ -1304,7 +1405,7 @@
             }
             return o;
         }
-        function Oe(e, n) {
+        function Ie(e, n) {
             if (null == e) return {};
             var r = {};
             for (var t in e) {
@@ -1317,26 +1418,26 @@
         }
         /** @public */
         /** @public */
-        /** @public */        var Ie = {
-            elementRef: a().oneOfType([ a().func, a().object ]),
-            defaultExpanded: a().bool,
-            indent: a().number,
-            json: a().oneOfType([ a().string, a().object, a().array, a().number, a().bool ]).isRequired,
-            onClickKey: a().func,
-            onClickValue: a().func,
-            overflow: a().oneOf([ "wrap", "scroll" ]),
-            expandChildrenOnShiftKey: a().bool
+        /** @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
         };
         /**
  * Used to visualize a JSON string.
- */        function Ee(r) {
-            var t = r.elementRef, o = r.defaultExpanded, a = o === void 0 ? false : o, l = r.indent, u = l === void 0 ? 4 : l, c = r.json, d = r.onClickKey, f = r.onClickValue, p = r.overflow, y = p === void 0 ? "scroll" : p, m = r.expandChildrenOnShiftKey, b = m === void 0 ? true : m, h = xe(r, [ "elementRef", "defaultExpanded", "indent", "json", "onClickKey", "onClickValue", "overflow", "expandChildrenOnShiftKey" ]);
+ */        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" ]);
             // @docs-props-type JSONTreePropsBase
-                        var g = i()(c) ? JSON.parse(c) : c;
+                        var g = a()(c) ? JSON.parse(c) : c;
             var S = y === "wrap" ? v : s;
-            var w = (0, e.useState)(undefined), k = be(w, 2), x = k[0], O = k[1];
-            var I = function e(n) {
-                O(n);
+            var w = (0, e.useState)(undefined), O = be(w, 2), k = O[0], I = O[1];
+            var x = function e(n) {
+                I(n);
             };
             
             return n().createElement(S, me({
@@ -1348,19 +1449,19 @@
                 defaultIndent: false
             }, ye({
                 defaultOpen: true,
-                defaultExpanded: a,
+                defaultExpanded: l,
                 expandChildrenOnShiftKey: b,
                 indent: u,
                 obj: g,
-                onClickKey: d,
-                onClickValue: f,
+                onClickKey: f,
+                onClickValue: d,
                 overflow: y,
-                shift: x,
-                updateShift: I
+                shift: k,
+                updateShift: x
             })));
         }
-        Ee.propTypes = Ie;
-        /* harmony default export */        const je = Ee;
+        je.propTypes = xe;
+        /* harmony default export */        const Ee = je;
     }) // CONCATENATED MODULE: ./src/JSONTree/index.ts
     ();
     module.exports = t;