@splunk/react-ui 4.46.0 → 4.47.1

package/Tree.js

@@ -26,27 +26,27 @@
     };
     /************************************************************************/
     /******/ // The module cache
-    /******/    var r = {};
+    /******/    var t = {};
     /******/
     /******/ // The require function
-    /******/    function n(t) {
+    /******/    function n(r) {
         /******/ // Check if module is in cache
-        /******/ var o = r[t];
+        /******/ var o = t[r];
         /******/        if (o !== undefined) {
             /******/ return o.exports;
             /******/        }
         /******/ // Create a new module (and put it into the cache)
-        /******/        var a = r[t] = {
+        /******/        var i = t[r] = {
             /******/ // no module.id needed
             /******/ // no module.loaded needed
             /******/ exports: {}
             /******/        };
         /******/
         /******/ // Execute the module function
-        /******/        e[t](a, a.exports, n);
+        /******/        e[r](i, i.exports, n);
         /******/
         /******/ // Return the exports of the module
-        /******/        return a.exports;
+        /******/        return i.exports;
         /******/    }
     /******/
     /************************************************************************/
@@ -54,26 +54,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ n.n = e => {
-            /******/ var r = e && e.__esModule ? 
+            /******/ var t = e && e.__esModule ? 
             /******/ () => e["default"]
             /******/ : () => e
             /******/;
-            n.d(r, {
-                a: r
+            n.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ n.d = (e, r) => {
-            /******/ for (var t in r) {
-                /******/ if (n.o(r, t) && !n.o(e, t)) {
-                    /******/ Object.defineProperty(e, t, {
+        /******/ n.d = (e, t) => {
+            /******/ for (var r in t) {
+                /******/ if (n.o(t, r) && !n.o(e, r)) {
+                    /******/ Object.defineProperty(e, r, {
                         enumerable: true,
-                        get: r[t]
+                        get: t[r]
                     });
                     /******/                }
                 /******/            }
@@ -82,7 +82,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ n.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ n.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
         /******/;
     })();
     /******/
@@ -101,24 +101,24 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
         (() => {
         // ESM COMPAT FLAG
-        n.r(t);
+        n.r(r);
         // EXPORTS
-                n.d(t, {
-            Item: () => /* reexport */ x,
-            default: () => /* reexport */ re
+                n.d(r, {
+            Item: () => /* reexport */ $,
+            default: () => /* reexport */ ce
         });
         // EXTERNAL MODULE: external "react"
                 var e = n(9497);
-        var r =  n.n(e);
+        var t =  n.n(e);
         // EXTERNAL MODULE: external "prop-types"
                 var o = n(23);
-        var a =  n.n(o);
+        var i =  n.n(o);
         // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
-                var i = n(5295);
+                var a = n(5295);
         // CONCATENATED MODULE: ./src/Tree/TreeContext.tsx
         var l =  (0, e.createContext)({
             defaultIndent: true
@@ -128,71 +128,151 @@
                 var c = n(232);
         var f =  n.n(c);
         // EXTERNAL MODULE: external "@splunk/themes"
-                var d = n(3563);
+                var s = n(3563);
         // CONCATENATED MODULE: ./src/Tree/ItemStyles.ts
-        var v = f().span.withConfig({
-            displayName: "ItemStyles__StyledTreeItemContent",
+        var d = f().span.withConfig({
+            displayName: "ItemStyles__StyledTreeItemContentWrapper",
             componentId: "sc-1ig9nmy-0"
-        })([ "font-family:inherit;" ]);
-        var s = f().span.withConfig({
-            displayName: "ItemStyles__StyledTreeItemNode",
+        })([ "display:inline-block;min-height:100%;" ]);
+        var v = f().span.withConfig({
+            displayName: "ItemStyles__StyledTreeItemIndent",
             componentId: "sc-1ig9nmy-1"
-        })([ "&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}" ], d.variables.focusShadow);
+        })([ "display:inline;white-space:pre;" ]);
+        var p = f().span.withConfig({
+            displayName: "ItemStyles__StyledTreeItemContent",
+            componentId: "sc-1ig9nmy-2"
+        })([ "display:", ";min-height:100%;&:focus{outline:3px solid ", ";outline-offset:1px;&:active{outline:none;}}&:hover{background-color:", ";cursor:pointer;}" ], (function(e) {
+            var t = e.$hasCustomIndent;
+            return t ? "inline" : "inline-block";
+        }), s.variables.focusColor, (0, s.pick)({
+            dark: "rgba(255, 255, 255, 0.05)",
+            light: "rgba(0, 0, 0, 0.03)"
+        }));
         // CONCATENATED MODULE: ./src/Tree/TreeStyles.ts
-        var p = f().ul.withConfig({
+        var y = f().ul.withConfig({
             displayName: "TreeStyles__StyledUnorderedList",
             componentId: "sc-13pokwt-0"
-        })([ "", ";font-family:inherit;list-style:none;white-space:inherit;", ";" ], d.mixins.reset("ul"), (function(e) {
-            var r = e.$defaultIndent;
-            return r && (0, c.css)([ "padding-left:", ";" ], d.variables.spacingXXXLarge);
+        })([ "", ";font-family:inherit;list-style:none;white-space:inherit;", ";" ], s.mixins.reset("ul"), (function(e) {
+            var t = e.$defaultIndent;
+            return t && (0, c.css)([ "padding-left:", ";" ], s.variables.spacingXXXLarge);
         }));
+        // 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, t) {
+            if (e) {
+                if (typeof e === "function") {
+                    e(t);
+                } 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 = t;
+ // eslint-disable-line no-param-reassign
+                                }
+            }
+        }
         // CONCATENATED MODULE: ./src/Tree/Item.tsx
-        function y() {
-            return y = Object.assign ? Object.assign.bind() : function(e) {
-                for (var r = 1; r < arguments.length; r++) {
-                    var n = arguments[r];
-                    for (var t in n) {
-                        ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
+        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 g() {
+            return g = Object.assign ? Object.assign.bind() : function(e) {
+                for (var t = 1; t < arguments.length; t++) {
+                    var n = arguments[t];
+                    for (var r in n) {
+                        ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                     }
                 }
                 return e;
-            }, y.apply(null, arguments);
+            }, g.apply(null, arguments);
         }
-        function m(e, r) {
-            return w(e) || I(e, r) || g(e, r) || b();
+        function h(e, t) {
+            var n = Object.keys(e);
+            if (Object.getOwnPropertySymbols) {
+                var r = Object.getOwnPropertySymbols(e);
+                t && (r = r.filter((function(t) {
+                    return Object.getOwnPropertyDescriptor(e, t).enumerable;
+                }))), n.push.apply(n, r);
+            }
+            return n;
         }
-        function b() {
+        function I(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var n = null != arguments[t] ? arguments[t] : {};
+                t % 2 ? h(Object(n), !0).forEach((function(t) {
+                    O(e, t, n[t]);
+                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : h(Object(n)).forEach((function(t) {
+                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
+                }));
+            }
+            return e;
+        }
+        function O(e, t, n) {
+            return (t = S(t)) in e ? Object.defineProperty(e, t, {
+                value: n,
+                enumerable: !0,
+                configurable: !0,
+                writable: !0
+            }) : e[t] = n, e;
+        }
+        function S(e) {
+            var t = w(e, "string");
+            return "symbol" == b(t) ? t : t + "";
+        }
+        function w(e, t) {
+            if ("object" != b(e) || !e) return e;
+            var n = e[Symbol.toPrimitive];
+            if (void 0 !== n) {
+                var r = n.call(e, t || "default");
+                if ("object" != b(r)) return r;
+                throw new TypeError("@@toPrimitive must return a primitive value.");
+            }
+            return ("string" === t ? String : Number)(e);
+        }
+        function j(e, t) {
+            return E(e) || C(e, t) || P(e, t) || 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 g(e, r) {
+        function P(e, t) {
             if (e) {
-                if ("string" == typeof e) return h(e, r);
+                if ("string" == typeof e) return x(e, t);
                 var n = {}.toString.call(e).slice(8, -1);
-                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? h(e, r) : void 0;
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? x(e, t) : void 0;
             }
         }
-        function h(e, r) {
-            (null == r || r > e.length) && (r = e.length);
-            for (var n = 0, t = Array(r); n < r; n++) {
-                t[n] = e[n];
+        function x(e, t) {
+            (null == t || t > e.length) && (t = e.length);
+            for (var n = 0, r = Array(t); n < t; n++) {
+                r[n] = e[n];
             }
-            return t;
+            return r;
         }
-        function I(e, r) {
+        function C(e, t) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
-                var t, o, a, i, l = [], u = !0, c = !1;
+                var r, o, i, a, l = [], u = !0, c = !1;
                 try {
-                    if (a = (n = n.call(e)).next, 0 === r) {
+                    if (i = (n = n.call(e)).next, 0 === t) {
                         if (Object(n) !== n) return;
                         u = !1;
-                    } else for (;!(u = (t = a.call(n)).done) && (l.push(t.value), l.length !== r); u = !0) {
+                    } else for (;!(u = (r = i.call(n)).done) && (l.push(r.value), l.length !== t); u = !0) {
                     }
                 } catch (e) {
                     c = !0, o = e;
                 } finally {
                     try {
-                        if (!u && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
+                        if (!u && null != n["return"] && (a = n["return"](), Object(a) !== a)) return;
                     } finally {
                         if (c) throw o;
                     }
@@ -200,172 +280,180 @@
                 return l;
             }
         }
-        function w(e) {
+        function E(e) {
             if (Array.isArray(e)) return e;
         }
-        function S(e, r) {
+        function A(e, t) {
             if (null == e) return {};
-            var n, t, o = O(e, r);
+            var n, r, o = T(e, t);
             if (Object.getOwnPropertySymbols) {
-                var a = Object.getOwnPropertySymbols(e);
-                for (t = 0; t < a.length; t++) {
-                    n = a[t], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
+                var i = Object.getOwnPropertySymbols(e);
+                for (r = 0; r < i.length; r++) {
+                    n = i[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
                 }
             }
             return o;
         }
-        function O(e, r) {
+        function T(e, t) {
             if (null == e) return {};
             var n = {};
-            for (var t in e) {
-                if ({}.hasOwnProperty.call(e, t)) {
-                    if (r.includes(t)) continue;
-                    n[t] = e[t];
+            for (var r in e) {
+                if ({}.hasOwnProperty.call(e, r)) {
+                    if (t.includes(r)) continue;
+                    n[r] = e[r];
                 }
             }
             return n;
         }
-        var j = {
-            id: a().string,
-            children: a().node,
-            content: a().node,
-            customIndent: a().node,
-            endAdornment: a().node,
-            labelledBy: a().string,
-            onFocus: a().func,
-            onKeyDown: a().func,
-            onToggle: a().func,
-            open: a().bool,
-            toggle: a().node
+        var D = {
+            id: i().string,
+            children: i().node,
+            content: i().node,
+            customIndent: i().node,
+            elementRef: i().oneOfType([ i().func, i().object ]),
+            endAdornment: i().node,
+            expanded: i().bool,
+            onFocus: i().func,
+            onKeyDown: i().func,
+            onToggleSelection: i().func,
+            onToggleExpansion: i().func
         };
-        function A(n) {
-            var t = n.id, o = n.children, a = n.content, i = n.customIndent, l = n.endAdornment, c = n.labelledBy, f = n.onFocus, d = n.onKeyDown, b = n.onToggle, g = n.open, h = g === void 0 ? true : g, I = n.toggle, w = S(n, [ "id", "children", "content", "customIndent", "endAdornment", "labelledBy", "onFocus", "onKeyDown", "onToggle", "open", "toggle" ]);
-            var O = (0, e.useContext)(u), j = O.defaultIndent, A = j === void 0 ? true : j, x = O.onItemKeyDown, E = O.onItemClick, P = O.removeNode, k = O.setNode, C = O.itemPaths, D = O.focusedItemId;
-            var T = (0, e.useState)(h), _ = m(T, 2), M = _[0], N = _[1];
+        /** @public */
+        /** @public */        function _(n) {
+            var r = n.id, o = n.children, i = n.content, a = n.customIndent, l = n.elementRef, c = n.endAdornment, f = n.expanded, s = n.onFocus, b = n.onKeyDown, h = n.onToggleExpansion, O = n.onToggleSelection, S = A(n, [ "id", "children", "content", "customIndent", "elementRef", "endAdornment", "expanded", "onFocus", "onKeyDown", "onToggleExpansion", "onToggleSelection" ]);
+            // @docs-props-type TreeItemPropsBase
+                        var w = (0, e.useContext)(u), k = w.defaultIndent, P = k === void 0 ? true : k, x = w.onItemKeyDown, C = w.onItemClick, E = w.removeNode, T = w.setNode, D = w.itemPaths, _ = w.focusedItemId;
  // make first tree item tabbable
-                        var $ = (0, e.useState)((C === null || C === void 0 ? void 0 : C.get("".concat(t))) === "0" ? 0 : -1), K = m($, 2), F = K[0], q = K[1];
-            var B = (0, e.useRef)(null);
-            var U = (0, e.useRef)(null);
-            var X = e.Children.toArray(o).filter(e.isValidElement);
-            X.forEach((function(e, r) {
+                        var $ = (0, e.useState)((D === null || D === void 0 ? void 0 : D.get("".concat(r))) === "0" ? 0 : -1), N = j($, 2), M = N[0], R = N[1];
+            var K = (0, e.useRef)(null);
+            var F = (0, e.useRef)(null);
+            var q = e.Children.toArray(o).filter(e.isValidElement);
+            q.forEach((function(e, t) {
                 if (e.props.id) {
-                    if (M && k) {
-                        k("".concat(e.props.id), "".concat(C === null || C === void 0 ? void 0 : C.get("".concat(t)), "-").concat(r));
-                    } else if (P) {
-                        P(e.props.id);
+                    if (f && T) {
+                        T("".concat(e.props.id), "".concat(D === null || D === void 0 ? void 0 : D.get("".concat(r)), "-").concat(t));
+                    } else if (E) {
+                        E(e.props.id);
                     }
                 }
             }));
-            var L = function e(r, n) {
-                N(r);
-                b === null || b === void 0 ? void 0 : b(r, n);
-            };
-            var R = function e(r) {
-                E === null || E === void 0 ? void 0 : E(r, t);
-            };
-            var V = function e(r) {
-                var n;
-                r.stopPropagation();
-                B === null || B === void 0 ? void 0 : (n = B.current) === null || n === void 0 ? void 0 : n.focus();
-                f === null || f === void 0 ? void 0 : f(r);
-            };
-            var z = function e() {
-                if ((C === null || C === void 0 ? void 0 : C.get("".concat(t))) === "0") {
-                    q(0);
+            var U = (0, e.useCallback)((function(e) {
+                m(K, e);
+                m(l, e);
+            }), [ l ]);
+            var X = (0, e.useCallback)((function(e) {
+                var t;
+                var n = 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 r = I({}, n);
+                if (!n.treeItemId && ((t = e.currentTarget) === null || t === void 0 ? void 0 : t.id)) {
+                    r.treeItemId = e.currentTarget.id;
                 }
-            };
+                h === null || h === void 0 ? void 0 : h(e, r);
+            }), [ h ]);
+            var L = (0, e.useCallback)((function(e) {
+                C === null || C === void 0 ? void 0 : C(e, r);
+            }), [ r, C ]);
+            var V = (0, e.useCallback)((function(e) {
+                var t;
+                e.stopPropagation();
+                F === null || F === void 0 ? void 0 : (t = F.current) === null || t === void 0 ? void 0 : t.focus();
+                s === null || s === void 0 ? void 0 : s(e);
+            }), [ s ]);
+            var B = (0, e.useCallback)((function() {
+                if ((D === null || D === void 0 ? void 0 : D.get("".concat(r))) === "0") {
+                    R(0);
+                }
+            }), [ r, D ]);
             (0, e.useEffect)((function() {
-                if (D === t) {
+                if (_ === r) {
                     var e;
-                    U === null || U === void 0 ? void 0 : (e = U.current) === null || e === void 0 ? void 0 : e.focus();
+                    K === null || K === void 0 ? void 0 : (e = K.current) === null || e === void 0 ? void 0 : e.focus();
+                }
+            }), [ _, r, K ]);
+            var W = (0, e.useCallback)((function(e) {
+                e.stopPropagation();
+            }), []);
+            var z = (0, e.useCallback)((function(e) {
+                e.stopPropagation();
+                if (e.key === " ") {
+                    e.preventDefault();
+                    O === null || O === void 0 ? void 0 : O(e, {
+                        treeItemId: r
+                    });
+                    return;
                 }
-            }), [ D, U ]);
-            var G = function e(r) {
-                r.stopPropagation();
-            };
-            var H = 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" && (C === null || C === void 0 ? void 0 : C.get("".concat(t))) === "0") {
-                    q(-1);
+                                if (e.shiftKey && e.key === "Tab" && (D === null || D === void 0 ? void 0 : D.get("".concat(r))) === "0") {
+                    R(-1);
                 }
-                x === null || x === void 0 ? void 0 : x(r, t, M, X, L);
-                d === null || d === void 0 ? void 0 : d(r);
-            };
-            var J = function r() {
-                if (!I) {
-                    return undefined;
-                }
-                
-                return (0, e.cloneElement)(I, {
-                    onClick: function e(r) {
-                        var n, t;
-                        L(!M, r);
-                        R(r);
-                        (n = (t = I.props).onClick) === null || n === void 0 ? void 0 : n.call(t, r);
-                    },
-                    "aria-expanded": M
-                });
-            };
+                x === null || x === void 0 ? void 0 : x(e, r, f, q, X);
+                b === null || b === void 0 ? void 0 : b(e);
+            }), [ q, f, X, r, D, x, b, O ]);
             
-            return r().createElement("li", y({}, w, {
+            return t().createElement("li", g({
+                "data-test": "tree-item"
+            }, S, {
+                id: r,
                 ref: U,
-                tabIndex: F,
-                onBlur: z,
+                tabIndex: M,
+                onBlur: B,
                 onFocus: V,
-                onKeyDown: H,
+                onKeyDown: z,
                 role: "treeitem",
-                "aria-labelledby": c,
-                "aria-expanded": X.length ? M : undefined
-            }), i,  r().createElement(s, {
-                ref: B,
+                "aria-expanded": q.length ? f || "false" : undefined
+            }),  t().createElement(d, null,  t().createElement(v, null, a),  t().createElement(p, {
+                $hasCustomIndent: !!a,
+                "data-test": "tree-item-content",
+                ref: F,
                 tabIndex: -1,
-                onFocus: G,
-                onClick: R
-            },  r().createElement(v, null, a), J(), !M && l), M &&  r().createElement(r().Fragment, null,  r().createElement(p, {
+                onFocus: W,
+                onClick: L
+            }, i, !f && c)), f &&  t().createElement(t().Fragment, null,  t().createElement(y, {
                 role: "group",
-                $defaultIndent: A
-            }, o), l));
+                $defaultIndent: P
+            }, o), c));
         }
-        A.propTypes = j;
-        /* harmony default export */        const x = A;
+        _.propTypes = D;
+        /* harmony default export */        const $ = _;
         // CONCATENATED MODULE: ./src/Tree/treeUtils.ts
-        function E(e, r) {
-            return T(e) || D(e, r) || k(e, r) || P();
+        function N(e, t) {
+            return q(e) || F(e, t) || R(e, t) || M();
         }
-        function P() {
+        function M() {
             throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
-        function k(e, r) {
+        function R(e, t) {
             if (e) {
-                if ("string" == typeof e) return C(e, r);
+                if ("string" == typeof e) return K(e, t);
                 var n = {}.toString.call(e).slice(8, -1);
-                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? C(e, r) : void 0;
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? K(e, t) : void 0;
             }
         }
-        function C(e, r) {
-            (null == r || r > e.length) && (r = e.length);
-            for (var n = 0, t = Array(r); n < r; n++) {
-                t[n] = e[n];
+        function K(e, t) {
+            (null == t || t > e.length) && (t = e.length);
+            for (var n = 0, r = Array(t); n < t; n++) {
+                r[n] = e[n];
             }
-            return t;
+            return r;
         }
-        function D(e, r) {
+        function F(e, t) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
-                var t, o, a, i, l = [], u = !0, c = !1;
+                var r, o, i, a, l = [], u = !0, c = !1;
                 try {
-                    if (a = (n = n.call(e)).next, 0 === r) {
+                    if (i = (n = n.call(e)).next, 0 === t) {
                         if (Object(n) !== n) return;
                         u = !1;
-                    } else for (;!(u = (t = a.call(n)).done) && (l.push(t.value), l.length !== r); u = !0) {
+                    } else for (;!(u = (r = i.call(n)).done) && (l.push(r.value), l.length !== t); u = !0) {
                     }
                 } catch (e) {
                     c = !0, o = e;
                 } finally {
                     try {
-                        if (!u && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
+                        if (!u && null != n["return"] && (a = n["return"](), Object(a) !== a)) return;
                     } finally {
                         if (c) throw o;
                     }
@@ -373,189 +461,189 @@
                 return l;
             }
         }
-        function T(e) {
+        function q(e) {
             if (Array.isArray(e)) return e;
         }
         /**
  * A helper function to get first key in Map that matches given value
- */        function _(e, r) {
+ */        function U(e, t) {
             var n;
-            var t = Array.from(e.entries());
-            return (n = t.find((function(e) {
-                var n = E(e, 2), t = n[1];
-                return t === r;
+            var r = Array.from(e.entries());
+            return (n = r.find((function(e) {
+                var n = N(e, 2), r = n[1];
+                return r === t;
             }))) === null || n === void 0 ? void 0 : n[0];
         }
         /**
  * A helper function to get parent path of current item path
- */        function M(e) {
+ */        function X(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 N(e, r) {
-            return e === null || e === void 0 ? void 0 : e.replace(/([^-]*)$/, "".concat(r + 1));
+ */        function L(e, t) {
+            return e === null || e === void 0 ? void 0 : e.replace(/([^-]*)$/, "".concat(t + 1));
         }
         /**
  * A helper function to get the last index number of an item path string
- */        function $(e) {
-            var r = e.split("-").pop();
-            if (!r) {
+ */        function V(e) {
+            var t = e.split("-").pop();
+            if (!t) {
                 return 0;
             }
-            return parseInt(r, 10) || 0;
+            return parseInt(t, 10) || 0;
         }
-        function K(e, r) {
-            var n = e.get(r);
+        function B(e, t) {
+            var n = e.get(t);
             if (!n) {
-                return r;
+                return t;
             }
-            var t = M(n);
-            return _(e, t) || r;
+            var r = X(n);
+            return U(e, r) || t;
         }
         /**
  * A helper function for getNextTreeItem
- */        function F(e, r) {
-            var n = M(r);
+ */        function W(e, t) {
+            var n = X(t);
             if (!n) {
-                return _(e, r);
+                return U(e, t);
             }
             // get next node in the parent level
-                        var t = $(n);
-            var o = N(n, t);
-            var a = _(e, o);
-            if (a) {
-                return a;
+                        var r = V(n);
+            var o = L(n, r);
+            var i = U(e, o);
+            if (i) {
+                return i;
             }
             // continue getting parents until find next node or reach root
-                        return F(e, o);
+                        return W(e, o);
         }
-        function q(e, r) {
-            var n = e.get(r);
+        function z(e, t) {
+            var n = e.get(t);
             if (!n) {
-                return r;
+                return t;
             }
             // case where next tree item is the first visible child
-                        var t = _(e, "".concat(n, "-0"));
-            if (t) {
-                return t;
+                        var r = U(e, "".concat(n, "-0"));
+            if (r) {
+                return r;
             }
             // case where next tree item is the next node in the same level
-                        var o = $(n);
-            var a = N(n, o);
-            var i = _(e, a);
-            if (i) {
-                return i;
+                        var o = V(n);
+            var i = L(n, o);
+            var a = U(e, i);
+            if (a) {
+                return a;
             }
             // case where next tree item is a higher level or does not exist
-                        return F(e, n) || r;
+                        return W(e, n) || t;
         }
         /**
  * A helper function for getPrevTreeItem
- */        function B(e, r) {
-            var n = _(e, "".concat(r, "-0"));
+ */        function G(e, t) {
+            var n = U(e, "".concat(t, "-0"));
             if (!n) {
-                return _(e, r);
+                return U(e, t);
             }
-            var t = _(e, r);
-            var o = "".concat(r, "-0");
+            var r = U(e, t);
+            var o = "".concat(t, "-0");
             // get the last child in current node, and continue to find its children recursively
-                        while (t) {
-                var a = $(o);
-                var i = N(o, a);
-                t = _(e, i);
-                if (t) {
-                    o = i;
+                        while (r) {
+                var i = V(o);
+                var a = L(o, i);
+                r = U(e, a);
+                if (r) {
+                    o = a;
                 }
             }
-            return B(e, o);
+            return G(e, o);
         }
-        function U(e, r) {
-            var n = e.get(r);
+        function H(e, t) {
+            var n = e.get(t);
             if (!n) {
-                return r;
+                return t;
             }
-            var t = $(n);
+            var r = V(n);
             // case where current is first child of parent or root item
-                        if (t === 0) {
-                return K(e, r);
+                        if (r === 0) {
+                return B(e, t);
             }
             // case where previous tree item is or is a child of previous node in same level
-                        var o = n.replace(/[^-]+$/, "".concat(t - 1));
-            return B(e, o) || r;
+                        var o = n.replace(/[^-]+$/, "".concat(r - 1));
+            return G(e, o) || t;
         }
-        function X(e) {
-            return _(e, "0");
+        function J(e) {
+            return U(e, "0");
         }
-        function L(e) {
-            var r = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "0";
-            var n = _(e, r);
-            var t = r;
+        function Q(e) {
+            var t = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "0";
+            var n = U(e, t);
+            var r = t;
             // find last child in current node
                         while (n) {
-                var o = $(t);
-                n = _(e, N(t, o));
+                var o = V(r);
+                n = U(e, L(r, o));
                 if (n) {
-                    t = N(t, o);
+                    r = L(r, o);
                 }
             }
             // check if last child has children
-                        var a = _(e, "".concat(t, "-0"));
-            if (!a) {
-                return _(e, t);
+                        var i = U(e, "".concat(r, "-0"));
+            if (!i) {
+                return U(e, r);
             }
             // continue to find its last child recursively
-                        t = "".concat(t, "-0");
-            return L(e, t);
+                        r = "".concat(r, "-0");
+            return Q(e, r);
         }
         // CONCATENATED MODULE: ./src/Tree/Tree.tsx
-        function R() {
-            return R = Object.assign ? Object.assign.bind() : function(e) {
-                for (var r = 1; r < arguments.length; r++) {
-                    var n = arguments[r];
-                    for (var t in n) {
-                        ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
+        function Y() {
+            return Y = Object.assign ? Object.assign.bind() : function(e) {
+                for (var t = 1; t < arguments.length; t++) {
+                    var n = arguments[t];
+                    for (var r in n) {
+                        ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                     }
                 }
                 return e;
-            }, R.apply(null, arguments);
+            }, Y.apply(null, arguments);
         }
-        function V(e, r) {
-            return Q(e) || J(e, r) || G(e, r) || z();
+        function Z(e, t) {
+            return oe(e) || re(e, t) || te(e, t) || ee();
         }
-        function z() {
+        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 G(e, r) {
+        function te(e, t) {
             if (e) {
-                if ("string" == typeof e) return H(e, r);
+                if ("string" == typeof e) return ne(e, t);
                 var n = {}.toString.call(e).slice(8, -1);
-                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? H(e, r) : void 0;
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? ne(e, t) : void 0;
             }
         }
-        function H(e, r) {
-            (null == r || r > e.length) && (r = e.length);
-            for (var n = 0, t = Array(r); n < r; n++) {
-                t[n] = e[n];
+        function ne(e, t) {
+            (null == t || t > e.length) && (t = e.length);
+            for (var n = 0, r = Array(t); n < t; n++) {
+                r[n] = e[n];
             }
-            return t;
+            return r;
         }
-        function J(e, r) {
+        function re(e, t) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
-                var t, o, a, i, l = [], u = !0, c = !1;
+                var r, o, i, a, l = [], u = !0, c = !1;
                 try {
-                    if (a = (n = n.call(e)).next, 0 === r) {
+                    if (i = (n = n.call(e)).next, 0 === t) {
                         if (Object(n) !== n) return;
                         u = !1;
-                    } else for (;!(u = (t = a.call(n)).done) && (l.push(t.value), l.length !== r); u = !0) {
+                    } else for (;!(u = (r = i.call(n)).done) && (l.push(r.value), l.length !== t); u = !0) {
                     }
                 } catch (e) {
                     c = !0, o = e;
                 } finally {
                     try {
-                        if (!u && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
+                        if (!u && null != n["return"] && (a = n["return"](), Object(a) !== a)) return;
                     } finally {
                         if (c) throw o;
                     }
@@ -563,130 +651,142 @@
                 return l;
             }
         }
-        function Q(e) {
+        function oe(e) {
             if (Array.isArray(e)) return e;
         }
-        function W(e, r) {
+        function ie(e, t) {
             if (null == e) return {};
-            var n, t, o = Y(e, r);
+            var n, r, o = ae(e, t);
             if (Object.getOwnPropertySymbols) {
-                var a = Object.getOwnPropertySymbols(e);
-                for (t = 0; t < a.length; t++) {
-                    n = a[t], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
+                var i = Object.getOwnPropertySymbols(e);
+                for (r = 0; r < i.length; r++) {
+                    n = i[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
                 }
             }
             return o;
         }
-        function Y(e, r) {
+        function ae(e, t) {
             if (null == e) return {};
             var n = {};
-            for (var t in e) {
-                if ({}.hasOwnProperty.call(e, t)) {
-                    if (r.includes(t)) continue;
-                    n[t] = e[t];
+            for (var r in e) {
+                if ({}.hasOwnProperty.call(e, r)) {
+                    if (t.includes(r)) continue;
+                    n[r] = e[r];
                 }
             }
             return n;
         }
-        var Z = {
-            children: a().node,
-            defaultIndent: a().bool
+        var le = {
+            children: i().node,
+            defaultIndent: i().bool,
+            elementRef: i().oneOfType([ i().func, i().object ])
         };
-        function ee(n) {
-            var t = n.children, o = n.defaultIndent, a = o === void 0 ? true : o, l = W(n, [ "children", "defaultIndent" ]);
-            var c = (0, e.useState)(), f = V(c, 2), d = f[0], v = f[1];
-            var s = new Map;
-            var y = function e(r, n, t, o, a) {
-                r.stopPropagation();
-                var l = (0, i.keycode)(r.nativeEvent);
-                var u = t && (o === null || o === void 0 ? void 0 : o.length);
+        /**
+ * Used to present a hierarchical list.
+ */        function ue(n) {
+            var r = n.children, o = n.defaultIndent, i = o === void 0 ? true : o, l = n.elementRef, c = ie(n, [ "children", "defaultIndent", "elementRef" ]);
+            // @docs-props-type TreePropsBase
+                        var f = (0, e.useState)(), s = Z(f, 2), d = s[0], v = s[1];
+            var p = new Map;
+            var m = function e(t, n, r, o, i) {
+                t.stopPropagation();
+                var l = (0, a.keycode)(t.nativeEvent);
+                var u = r && (o === null || o === void 0 ? void 0 : o.length);
                 switch (l) {
                   case "up":
-                    r.preventDefault();
-                    v(U(s, n));
+                    t.preventDefault();
+                    v(H(p, n));
                     break;
 
                   case "down":
-                    r.preventDefault();
-                    v(q(s, n));
+                    t.preventDefault();
+                    v(z(p, n));
                     break;
 
                   case "left":
-                    r.preventDefault();
+                    t.preventDefault();
                     if (u) {
-                        a(false, r);
+                        i(t, {
+                            treeItemId: n
+                        });
                     } else {
-                        v(K(s, n));
+                        v(B(p, n));
                     }
                     break;
 
                   case "right":
-                    r.preventDefault();
+                    t.preventDefault();
                     if (u) {
-                        v(q(s, n));
+                        v(z(p, n));
                     } else {
-                        a(true, r);
+                        i(t, {
+                            treeItemId: n
+                        });
                     }
                     break;
 
                   case "home":
-                    r.preventDefault();
-                    v(X(s));
+                    t.preventDefault();
+                    v(J(p));
                     break;
 
                   case "end":
-                    r.preventDefault();
-                    v(L(s));
+                    t.preventDefault();
+                    v(Q(p));
                     break;
 
                   case "enter":
-                    r.preventDefault();
-                    a(!u, r);
+                    t.preventDefault();
+                    i(t, {
+                        treeItemId: n
+                    });
                     break;
 
                   default:
  // do nothing
                                 }
             };
-            var m = function e(r, n) {
-                r.preventDefault();
+            var b = function e(t, n) {
+                t.preventDefault();
                 v(n);
             };
-            var b = function e(r) {
-                s["delete"](r);
+            var g = function e(t) {
+                p["delete"](t);
             };
-            var g = function e(r, n) {
-                s.set(r, n);
+            var h = function e(t, n) {
+                p.set(t, n);
             };
-            var h = e.Children.toArray(t).filter(e.isValidElement);
-            h.forEach((function(e, r) {
-                if (e.props.id && g) {
-                    g("".concat(e.props.id), "".concat(r));
+            var I = e.Children.toArray(r).filter(e.isValidElement);
+            I.forEach((function(e, t) {
+                if (e.props.id && h) {
+                    h("".concat(e.props.id), "".concat(t));
                 }
             }));
-            var I = (0, e.useMemo)((function() {
+            var O = (0, e.useMemo)((function() {
                 return {
-                    defaultIndent: a,
-                    onItemKeyDown: y,
-                    onItemClick: m,
-                    removeNode: b,
-                    setNode: g,
-                    itemPaths: s,
+                    defaultIndent: i,
+                    onItemKeyDown: m,
+                    onItemClick: b,
+                    removeNode: g,
+                    setNode: h,
+                    itemPaths: p,
                     focusedItemId: d
                 };
-            }), [ a, d, s, y, b, g ]);
+            }), [ i, d, p, m, g, h ]);
             
-            return r().createElement(u.Provider, {
-                value: I
-            },  r().createElement(p, R({
+            return t().createElement(u.Provider, {
+                value: O
+            },  t().createElement(y, Y({
+                "data-test": "tree",
+                ref: l,
                 role: "tree",
-                $defaultIndent: a
-            }, l), t));
+                $defaultIndent: i
+            }, c), r));
         }
-        ee.propTypes = Z;
-        ee.Item = x;
-        /* harmony default export */        const re = ee;
+        ue.propTypes = le;
+        ue.Item = $;
+        /* harmony default export */        const ce = ue;
     }) // CONCATENATED MODULE: ./src/Tree/index.ts
     ();
-    module.exports = t;
+    module.exports = r;
     /******/})();