react-complex-tree - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

lib/cjs/controlledEnvironment/ControlledTreeEnvironment.js

@@ -36,7 +36,6 @@ "use strict";
 var react_1 = require("react");
-var createDefaultRenderers_1 = require("../renderers/createDefaultRenderers");
-var scrollIntoView_1 = require("../tree/scrollIntoView");
 var InteractionManagerProvider_1 = require("./InteractionManagerProvider");
 var DragAndDropProvider_1 = require("./DragAndDropProvider");
 var EnvironmentActionsProvider_1 = require("../environmentActions/EnvironmentActionsProvider");
+var useControlledTreeEnvironmentProps_1 = require("./useControlledTreeEnvironmentProps");
 var TreeEnvironmentContext = React.createContext(null);
@@ -47,8 +46,7 @@ var useTreeEnvironment = function () { return react_1.useContext(TreeEnvironmentContext); };
     var _a, _b, _c;
-    var _d = react_1.useState({}), trees = _d[0], setTrees = _d[1];
-    var _e = react_1.useState(), activeTreeId = _e[0], setActiveTreeId = _e[1];
+    var environmentContextProps = useControlledTreeEnvironmentProps_1.useControlledTreeEnvironmentProps(props);
     var viewState = props.viewState;
     // Make sure that every tree view state has a focused item
-    for (var _i = 0, _f = Object.keys(trees); _i < _f.length; _i++) {
-        var treeId = _f[_i];
+    for (var _i = 0, _d = Object.keys(environmentContextProps.trees); _i < _d.length; _i++) {
+        var treeId = _d[_i];
         // TODO if the focus item is dragged out of the tree and is not within the expanded items
@@ -58,59 +56,6 @@ // TODO of that tree, the tree does not show any focus item anymore.
         // information when the viewstate changes
-        if (!((_a = viewState[treeId]) === null || _a === void 0 ? void 0 : _a.focusedItem) && trees[treeId]) {
-            viewState[treeId] = __assign(__assign({}, viewState[treeId]), { focusedItem: (_c = (_b = props.items[trees[treeId].rootItem]) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c[0] });
+        if (!((_a = viewState[treeId]) === null || _a === void 0 ? void 0 : _a.focusedItem) && environmentContextProps.trees[treeId]) {
+            viewState[treeId] = __assign(__assign({}, viewState[treeId]), { focusedItem: (_c = (_b = props.items[environmentContextProps.trees[treeId].rootItem]) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c[0] });
         }
     }
-    var environmentContextProps = __assign(__assign(__assign({}, createDefaultRenderers_1.createDefaultRenderers(props)), props), { onFocusItem: function (item, treeId) {
-            var _a, _b, _c, _d, _e, _f;
-            (_a = props.onFocusItem) === null || _a === void 0 ? void 0 : _a.call(props, item, treeId);
-            var newItem = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-id=\"" + item.index + "\"]");
-            if ((_b = props.autoFocus) !== null && _b !== void 0 ? _b : true) {
-                if (((_d = (_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.attributes.getNamedItem('data-rct-search-input')) === null || _d === void 0 ? void 0 : _d.value) !== 'true') {
-                    // Move DOM focus to item if the current focus is not on the search input
-                    (_f = (_e = newItem) === null || _e === void 0 ? void 0 : _e.focus) === null || _f === void 0 ? void 0 : _f.call(_e);
-                }
-                else {
-                    // Otherwise just manually scroll into view
-                    scrollIntoView_1.scrollIntoView(newItem);
-                }
-            }
-        }, registerTree: function (tree) {
-            var _a;
-            setTrees(function (trees) {
-                var _a;
-                return (__assign(__assign({}, trees), (_a = {}, _a[tree.treeId] = tree, _a)));
-            });
-            (_a = props.onRegisterTree) === null || _a === void 0 ? void 0 : _a.call(props, tree);
-        }, unregisterTree: function (treeId) {
-            var _a;
-            (_a = props.onUnregisterTree) === null || _a === void 0 ? void 0 : _a.call(props, trees[treeId]);
-            delete trees[treeId];
-            setTrees(trees);
-        }, setActiveTree: function (treeIdOrSetStateFunction, autoFocus) {
-            if (autoFocus === void 0) { autoFocus = true; }
-            var focusTree = function (treeId) {
-                var _a, _b, _c, _d;
-                if (autoFocus &&
-                    ((_a = props.autoFocus) !== null && _a !== void 0 ? _a : true) &&
-                    treeId &&
-                    !((_b = document.querySelector("[data-rct-tree=\"" + treeId + "\"]")) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement))) {
-                    var focusItem = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-focus=\"true\"]");
-                    (_d = (_c = focusItem) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
-                }
-            };
-            if (typeof treeIdOrSetStateFunction === 'function') {
-                setActiveTreeId(function (oldValue) {
-                    var treeId = treeIdOrSetStateFunction(oldValue);
-                    if (treeId !== oldValue) {
-                        focusTree(treeId);
-                    }
-                    return treeId;
-                });
-            }
-            else {
-                var treeId = treeIdOrSetStateFunction;
-                setActiveTreeId(treeId);
-                focusTree(treeId);
-            }
-        }, treeIds: Object.keys(trees), trees: trees, activeTreeId: activeTreeId });
     return (React.createElement(TreeEnvironmentContext.Provider, { value: environmentContextProps },
@@ -117,0 +62,0 @@ React.createElement(InteractionManagerProvider_1.InteractionManagerProvider, null,

lib/cjs/controlledEnvironment/DragAndDropProvider.js

@@ -41,2 +41,3 @@ "use strict";
 var useGetViableDragPositions_1 = require("./useGetViableDragPositions");
+var useSideEffect_1 = require("../useSideEffect");
 var DragAndDropContext = React.createContext(null);
@@ -63,3 +64,4 @@ var useDragAndDrop = function () { return React.useContext(DragAndDropContext); };
     var _h = react_1.useState('_nodrag'), dragCode = _h[0], setDragCode = _h[1];
-    var resetProgrammaticDragIndexForCurrentTree = function (viableDragPositions, linearItems, draggingItems) {
+    var getViableDragPositions = useGetViableDragPositions_1.useGetViableDragPositions();
+    var resetProgrammaticDragIndexForCurrentTree = react_1.useCallback(function (viableDragPositions, linearItems, draggingItems) {
         var _a;
@@ -90,4 +92,4 @@ if (environment.activeTreeId &&
         }
-    };
-    var resetState = function () {
+    }, [environment.activeTreeId, environment.items, environment.viewState, getViableDragPositions]);
+    var resetState = react_1.useCallback(function () {
         setIsProgrammaticallyDragging(false);
@@ -101,4 +103,4 @@ setItemHeight(4);
         setDragCode('_nodrag');
-    };
-    react_1.useEffect(function () {
+    }, []);
+    useSideEffect_1.useSideEffect(function () {
         if (environment.activeTreeId &&
@@ -109,8 +111,14 @@ linearItems[environment.activeTreeId] &&
         }
-    }, [environment.activeTreeId]);
-    react_1.useEffect(function () {
+    }, [
+        draggingItems,
+        environment.activeTreeId,
+        linearItems,
+        resetProgrammaticDragIndexForCurrentTree,
+        viableDragPositions,
+    ], [environment.activeTreeId]);
+    useSideEffect_1.useSideEffect(function () {
         if (isProgrammaticallyDragging && environment.activeTreeId) {
             setDraggingPosition(viableDragPositions[environment.activeTreeId][programmaticDragIndex]);
         }
-    }, [programmaticDragIndex, environment.activeTreeId]);
+    }, [programmaticDragIndex, environment.activeTreeId, isProgrammaticallyDragging, viableDragPositions], [programmaticDragIndex, environment.activeTreeId]);
     var canDropAt = useCanDropAt_1.useCanDropAt();
@@ -130,3 +138,2 @@ var performDrag = function (draggingPosition) {
     var onDragOverTreeHandler = useOnDragOverTreeHandler_1.useOnDragOverTreeHandler(dragCode, setDragCode, itemHeight, linearItems, setDraggingPosition, performDrag);
-    var getViableDragPositions = useGetViableDragPositions_1.useGetViableDragPositions();
     var onDropHandler = react_1.useMemo(function () { return function () {
@@ -141,62 +148,72 @@ if (draggingItems && draggingPosition && environment.onDrop) {
         }
-    }; }, [draggingPosition, draggingItems, environment.onDrop, environment.onFocusItem]);
-    react_1.useEffect(function () {
-        window.addEventListener('dragend', onDropHandler);
-        return function () { return window.removeEventListener('dragend', onDropHandler); };
-    }, [onDropHandler]);
-    var dnd = {
-        onStartDraggingItems: function (items, treeId) {
-            var _a, _b;
-            var treeLinearItems = buildMapForTrees(environment.treeIds, function (treeId) { var _a; return getItemsLinearly_1.getItemsLinearly(environment.trees[treeId].rootItem, (_a = environment.viewState[treeId]) !== null && _a !== void 0 ? _a : {}, environment.items); });
-            var treeViableDragPositions = buildMapForTrees(environment.treeIds, function (treeId) {
-                return getViableDragPositions(treeId, items, treeLinearItems[treeId]);
-            });
-            // TODO what if trees have different heights and drag target changes?
-            var height = (_b = (_a = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-container=\"true\"]")) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 5;
-            setItemHeight(height);
-            setDraggingItems(items);
-            setLinearItems(treeLinearItems);
-            setViableDragPositions(treeViableDragPositions);
-            if (environment.activeTreeId) {
-                resetProgrammaticDragIndexForCurrentTree(treeViableDragPositions[environment.activeTreeId], treeLinearItems[environment.activeTreeId], items);
+    }; }, [draggingItems, draggingPosition, environment, resetState]);
+    var onStartDraggingItems = react_1.useCallback(function (items, treeId) {
+        var _a, _b;
+        var treeLinearItems = buildMapForTrees(environment.treeIds, function (treeId) { var _a; return getItemsLinearly_1.getItemsLinearly(environment.trees[treeId].rootItem, (_a = environment.viewState[treeId]) !== null && _a !== void 0 ? _a : {}, environment.items); });
+        var treeViableDragPositions = buildMapForTrees(environment.treeIds, function (treeId) {
+            return getViableDragPositions(treeId, items, treeLinearItems[treeId]);
+        });
+        // TODO what if trees have different heights and drag target changes?
+        var height = (_b = (_a = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-container=\"true\"]")) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 5;
+        setItemHeight(height);
+        setDraggingItems(items);
+        setLinearItems(treeLinearItems);
+        setViableDragPositions(treeViableDragPositions);
+        if (environment.activeTreeId) {
+            resetProgrammaticDragIndexForCurrentTree(treeViableDragPositions[environment.activeTreeId], treeLinearItems[environment.activeTreeId], items);
+        }
+    }, [
+        environment.activeTreeId,
+        environment.items,
+        environment.treeIds,
+        environment.trees,
+        environment.viewState,
+        getViableDragPositions,
+        resetProgrammaticDragIndexForCurrentTree,
+    ]);
+    var startProgrammaticDrag = react_1.useCallback(function () {
+        var _a, _b, _c;
+        if (!environment.canDragAndDrop) {
+            return;
+        }
+        if (environment.activeTreeId) {
+            var draggingItems_1 = (_b = (_a = environment.viewState[environment.activeTreeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) !== null && _b !== void 0 ? _b : [(_c = environment.viewState[environment.activeTreeId]) === null || _c === void 0 ? void 0 : _c.focusedItem];
+            if (draggingItems_1.length === 0 || draggingItems_1[0] === undefined) {
+                return;
             }
-        },
-        startProgrammaticDrag: function () {
-            var _a, _b, _c;
-            if (!environment.canDragAndDrop) {
+            var resolvedDraggingItems = draggingItems_1.map(function (id) { return environment.items[id]; });
+            if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
                 return;
             }
-            if (environment.activeTreeId) {
-                var draggingItems_1 = (_b = (_a = environment.viewState[environment.activeTreeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) !== null && _b !== void 0 ? _b : [(_c = environment.viewState[environment.activeTreeId]) === null || _c === void 0 ? void 0 : _c.focusedItem];
-                if (draggingItems_1.length === 0 || draggingItems_1[0] === undefined) {
-                    return;
-                }
-                var resolvedDraggingItems = draggingItems_1.map(function (id) { return environment.items[id]; });
-                if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
-                    return;
-                }
-                dnd.onStartDraggingItems(resolvedDraggingItems, environment.activeTreeId);
-                setTimeout(function () {
-                    setIsProgrammaticallyDragging(true);
-                    // Needs to be done after onStartDraggingItems was called, so that viableDragPositions is populated
-                });
-            }
-        },
-        abortProgrammaticDrag: function () {
-            resetState();
-        },
-        completeProgrammaticDrag: function () {
-            onDropHandler();
-            resetState();
-        },
-        programmaticDragUp: function () {
-            setProgrammaticDragIndex(function (oldIndex) { return Math.max(0, oldIndex - 1); });
-        },
-        programmaticDragDown: function () {
-            if (environment.activeTreeId) {
-                setProgrammaticDragIndex(function (oldIndex) {
-                    return Math.min(viableDragPositions[environment.activeTreeId].length, oldIndex + 1);
-                });
-            }
-        },
+            onStartDraggingItems(resolvedDraggingItems, environment.activeTreeId);
+            setTimeout(function () {
+                setIsProgrammaticallyDragging(true);
+                // Needs to be done after onStartDraggingItems was called, so that viableDragPositions is populated
+            });
+        }
+    }, [onStartDraggingItems, environment]);
+    var abortProgrammaticDrag = react_1.useCallback(function () {
+        resetState();
+    }, [resetState]);
+    var completeProgrammaticDrag = react_1.useCallback(function () {
+        onDropHandler();
+        resetState();
+    }, [onDropHandler, resetState]);
+    var programmaticDragUp = react_1.useCallback(function () {
+        setProgrammaticDragIndex(function (oldIndex) { return Math.max(0, oldIndex - 1); });
+    }, []);
+    var programmaticDragDown = react_1.useCallback(function () {
+        if (environment.activeTreeId) {
+            setProgrammaticDragIndex(function (oldIndex) {
+                return Math.min(viableDragPositions[environment.activeTreeId].length, oldIndex + 1);
+            });
+        }
+    }, [environment.activeTreeId, viableDragPositions]);
+    var dnd = {
+        onStartDraggingItems: onStartDraggingItems,
+        startProgrammaticDrag: startProgrammaticDrag,
+        abortProgrammaticDrag: abortProgrammaticDrag,
+        completeProgrammaticDrag: completeProgrammaticDrag,
+        programmaticDragUp: programmaticDragUp,
+        programmaticDragDown: programmaticDragDown,
         draggingItems: draggingItems,
@@ -209,4 +226,8 @@ draggingPosition: draggingPosition,
     };
+    react_1.useEffect(function () {
+        window.addEventListener('dragend', onDropHandler);
+        return function () { return window.removeEventListener('dragend', onDropHandler); };
+    }, [onDropHandler]);
     return React.createElement(DragAndDropContext.Provider, { value: dnd }, props.children);
 };
 exports.DragAndDropProvider = DragAndDropProvider;

lib/cjs/controlledEnvironment/InteractionManagerProvider.js

@@ -46,2 +46,3 @@ "use strict";
         return buildInteractionMode_1.buildInteractionMode((_a = defaultInteractionMode) !== null && _a !== void 0 ? _a : types_1.InteractionMode.ClickItemToExpand, environment);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // TODO make sure that environment does not need to be refreshed
@@ -48,0 +49,0 @@ return (React.createElement(InteractionManagerContext.Provider, { value: interactionManager }, props.children));

lib/cjs/hotkeys/useHotkey.js

@@ -11,3 +11,2 @@ "use strict";
 var react_1 = require("react");
-var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
 var useKeyboardBindings_1 = require("./useKeyboardBindings");
@@ -17,6 +16,5 @@ var elementsThatCanTakeText = ['input', 'textarea'];
     if (activatableWhileFocusingInput === void 0) { activatableWhileFocusingInput = false; }
-    var environment = ControlledTreeEnvironment_1.useTreeEnvironment();
     var pressedKeys = react_1.useRef([]);
     var keyboardBindings = useKeyboardBindings_1.useKeyboardBindings();
-    var possibleCombinations = react_1.useMemo(function () { return keyboardBindings[combinationName].map(function (combination) { return combination.split('+'); }); }, [combinationName, environment.keyboardBindings]);
+    var possibleCombinations = react_1.useMemo(function () { return keyboardBindings[combinationName].map(function (combination) { return combination.split('+'); }); }, [combinationName, keyboardBindings]);
     useHtmlElementEventListener_1.useHtmlElementEventListener(document, 'keydown', function (e) {
@@ -23,0 +21,0 @@ if (active === false) {

lib/cjs/renderers/createDefaultRenderers.d.ts

@@ -1,2 +0,2 @@
-import { AllTreeRenderProps, TreeRenderProps } from '../types';
-export declare const createDefaultRenderers: (renderers: TreeRenderProps) => AllTreeRenderProps;
+import { AllTreeRenderProps } from '../types';
+export declare const createDefaultRenderers: (renderDepthOffset: number) => AllTreeRenderProps;

lib/cjs/renderers/createDefaultRenderers.js

@@ -26,4 +26,5 @@ "use strict";
 };
-var createDefaultRenderers = function (renderers) {
-    var newRenderers = __assign({ renderItemTitle: function (_a) {
+var createDefaultRenderers = function (renderDepthOffset) {
+    return {
+        renderItemTitle: function (_a) {
             var title = _a.title, context = _a.context, info = _a.info;
@@ -40,3 +41,4 @@ if (!info.isSearching || !context.isSearchMatching) {
             }
-        }, renderItemArrow: function (_a) {
+        },
+        renderItemArrow: function (_a) {
             var item = _a.item, context = _a.context;
@@ -52,13 +54,15 @@ // Icons from https://blueprintjs.com/docs/#icons
                             react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.71,7.29l-4-4C6.53,3.11,6.28,3,6,3C5.45,3,5,3.45,5,4\n                      c0,0.28,0.11,0.53,0.29,0.71L8.59,8l-3.29,3.29C5.11,11.47,5,11.72,5,12c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l4-4\n                      C10.89,8.53,11,8.28,11,8C11,7.72,10.89,7.47,10.71,7.29z", className: "rct-tree-item-arrow-path" }))))))));
-        }, renderItem: function (_a) {
-            var _b;
+        },
+        renderItem: function (_a) {
             var item = _a.item, depth = _a.depth, children = _a.children, title = _a.title, context = _a.context, arrow = _a.arrow;
             var InteractiveComponent = context.isRenaming ? 'div' : 'button';
+            var type = context.isRenaming ? undefined : 'button';
             // TODO have only root li component create all the classes
             return (react_1.default.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { className: cx('rct-tree-item-li', item.hasChildren && 'rct-tree-item-li-hasChildren', context.isSelected && 'rct-tree-item-li-selected', context.isExpanded && 'rct-tree-item-li-expanded', context.isFocused && 'rct-tree-item-li-focused', context.isDraggingOver && 'rct-tree-item-li-dragging-over', context.isSearchMatching && 'rct-tree-item-li-search-match') }),
-                react_1.default.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { paddingLeft: (depth + 1) * ((_b = renderers.renderDepthOffset) !== null && _b !== void 0 ? _b : 10) + "px" }, className: cx('rct-tree-item-title-container', item.hasChildren && 'rct-tree-item-title-container-hasChildren', context.isSelected && 'rct-tree-item-title-container-selected', context.isExpanded && 'rct-tree-item-title-container-expanded', context.isFocused && 'rct-tree-item-title-container-focused', context.isDraggingOver && 'rct-tree-item-title-container-dragging-over', context.isSearchMatching && 'rct-tree-item-title-container-search-match') }),
+                react_1.default.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { paddingLeft: (depth + 1) * renderDepthOffset + "px" }, className: cx('rct-tree-item-title-container', item.hasChildren && 'rct-tree-item-title-container-hasChildren', context.isSelected && 'rct-tree-item-title-container-selected', context.isExpanded && 'rct-tree-item-title-container-expanded', context.isFocused && 'rct-tree-item-title-container-focused', context.isDraggingOver && 'rct-tree-item-title-container-dragging-over', context.isSearchMatching && 'rct-tree-item-title-container-search-match') }),
                     arrow,
-                    react_1.default.createElement(InteractiveComponent, __assign({}, context.interactiveElementProps, { className: cx('rct-tree-item-button', item.hasChildren && 'rct-tree-item-button-hasChildren', context.isSelected && 'rct-tree-item-button-selected', context.isExpanded && 'rct-tree-item-button-expanded', context.isFocused && 'rct-tree-item-button-focused', context.isDraggingOver && 'rct-tree-item-button-dragging-over', context.isSearchMatching && 'rct-tree-item-button-search-match') }), title)),
+                    react_1.default.createElement(InteractiveComponent, __assign({ type: type }, context.interactiveElementProps, { className: cx('rct-tree-item-button', item.hasChildren && 'rct-tree-item-button-hasChildren', context.isSelected && 'rct-tree-item-button-selected', context.isExpanded && 'rct-tree-item-button-expanded', context.isFocused && 'rct-tree-item-button-focused', context.isDraggingOver && 'rct-tree-item-button-dragging-over', context.isSearchMatching && 'rct-tree-item-button-search-match') }), title)),
                 children));
-        }, renderRenameInput: function (_a) {
+        },
+        renderRenameInput: function (_a) {
             var inputProps = _a.inputProps, inputRef = _a.inputRef, submitButtonProps = _a.submitButtonProps, submitButtonRef = _a.submitButtonRef, formProps = _a.formProps;
@@ -68,17 +72,21 @@ return (react_1.default.createElement("form", __assign({}, formProps, { className: "rct-tree-item-renaming-form" }),
                 react_1.default.createElement("input", __assign({}, submitButtonProps, { ref: submitButtonRef, type: "submit", className: "rct-tree-item-renaming-submit-button", value: "\uD83D\uDDF8" }))));
-        }, renderDraggingItem: function () {
+        },
+        renderDraggingItem: function () {
             return react_1.default.createElement("div", null);
-        }, renderDraggingItemTitle: function () {
+        },
+        renderDraggingItemTitle: function () {
             return react_1.default.createElement("div", null);
-        }, renderTreeContainer: function (_a) {
+        },
+        renderTreeContainer: function (_a) {
             var children = _a.children, containerProps = _a.containerProps, info = _a.info;
             return (react_1.default.createElement("div", { className: cx('rct-tree-root', info.isFocused && 'rct-tree-root-focus', info.isRenaming && 'rct-tree-root-renaming', info.areItemsSelected && 'rct-tree-root-itemsselected') },
                 react_1.default.createElement("div", __assign({}, containerProps), children)));
-        }, renderItemsContainer: function (_a) {
+        },
+        renderItemsContainer: function (_a) {
             var children = _a.children, containerProps = _a.containerProps;
             return (react_1.default.createElement("ul", __assign({}, containerProps, { className: "rct-tree-items-container" }), children));
-        }, renderDragBetweenLine: function (_a) {
-            var _b;
+        },
+        renderDragBetweenLine: function (_a) {
             var draggingPosition = _a.draggingPosition, lineProps = _a.lineProps;
-            return (react_1.default.createElement("div", __assign({}, lineProps, { style: { left: draggingPosition.depth * ((_b = renderers.renderDepthOffset) !== null && _b !== void 0 ? _b : 10) + "px" }, className: cx('rct-tree-drag-between-line', draggingPosition.targetType === 'between-items' &&
+            return (react_1.default.createElement("div", __assign({}, lineProps, { style: { left: draggingPosition.depth * renderDepthOffset + "px" }, className: cx('rct-tree-drag-between-line', draggingPosition.targetType === 'between-items' &&
                     draggingPosition.linePosition === 'top' &&
@@ -88,7 +96,9 @@ 'rct-tree-drag-between-line-top', draggingPosition.targetType === 'between-items' &&
                     'rct-tree-drag-between-line-bottom') })));
-        }, renderSearchInput: function (_a) {
+        },
+        renderSearchInput: function (_a) {
             var inputProps = _a.inputProps;
             return (react_1.default.createElement("div", { className: cx('rct-tree-search-input-container') },
                 react_1.default.createElement("input", __assign({}, inputProps, { className: cx('rct-tree-search-input') }))));
-        }, renderLiveDescriptorContainer: function (_a) {
+        },
+        renderLiveDescriptorContainer: function (_a) {
             var tree = _a.tree, children = _a.children;
@@ -104,15 +114,6 @@ return (react_1.default.createElement("div", { id: "rct-livedescription-" + tree.treeId, style: {
                 } }, children));
-        }, renderDepthOffset: 4 }, renderers);
-    newRenderers.renderItem.displayName = 'RenderItem';
-    newRenderers.renderItemTitle.displayName = 'RenderItemTitle';
-    newRenderers.renderItemArrow.displayName = 'RenderItemArrow';
-    newRenderers.renderRenameInput.displayName = 'RenderRenameInput';
-    newRenderers.renderDraggingItem.displayName = 'RenderDraggingItem';
-    newRenderers.renderDraggingItemTitle.displayName = 'RenderDraggingItemTitle';
-    newRenderers.renderItemsContainer.displayName = 'RenderItemsContainer';
-    newRenderers.renderTreeContainer.displayName = 'RenderTreeContainer';
-    newRenderers.renderDragBetweenLine.displayName = 'RenderDragBetweenLine';
-    newRenderers.renderSearchInput.displayName = 'RenderSearchInput';
-    return newRenderers;
+        },
+        renderDepthOffset: 10,
+    };
 };
 exports.createDefaultRenderers = createDefaultRenderers;

lib/cjs/search/useSearchMatchFocus.js

@@ -5,6 +5,6 @@ "use strict";
 var Tree_1 = require("../tree/Tree");
-var react_1 = require("react");
 var useGetLinearItems_1 = require("../tree/useGetLinearItems");
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
 var defaultMatcher_1 = require("./defaultMatcher");
+var useSideEffect_1 = require("../useSideEffect");
 var useSearchMatchFocus = function () {
@@ -14,3 +14,3 @@ var _a = ControlledTreeEnvironment_1.useTreeEnvironment(), doesSearchMatchItem = _a.doesSearchMatchItem, items = _a.items, getItemTitle = _a.getItemTitle, onFocusItem = _a.onFocusItem;
     var getLinearItems = useGetLinearItems_1.useGetLinearItems();
-    react_1.useEffect(function () {
+    useSideEffect_1.useSideEffect(function () {
         if (search && search.length > 0) {
@@ -27,4 +27,4 @@ requestAnimationFrame(function () {
         }
-    }, [search]);
+    }, [doesSearchMatchItem, getItemTitle, getLinearItems, items, onFocusItem, search, treeId], [search]);
 };
 exports.useSearchMatchFocus = useSearchMatchFocus;

lib/cjs/tree/LiveDescription.js

@@ -32,3 +32,2 @@ "use strict";
 var LiveDescription = function () {
-    var _a;
     var env = ControlledTreeEnvironment_1.useTreeEnvironment();
@@ -38,6 +37,3 @@ var tree = Tree_1.useTree();
     var keys = useKeyboardBindings_1.useKeyboardBindings();
-    if (!((_a = env.showLiveDescription) !== null && _a !== void 0 ? _a : true)) {
-        return null;
-    }
-    var descriptors = react_1.useMemo(function () { var _a; return (_a = env.liveDescriptors) !== null && _a !== void 0 ? _a : defaultLiveDescriptors_1.defaultLiveDescriptors; }, []);
+    var descriptors = react_1.useMemo(function () { var _a; return (_a = env.liveDescriptors) !== null && _a !== void 0 ? _a : defaultLiveDescriptors_1.defaultLiveDescriptors; }, [env.liveDescriptors]);
     var LiveWrapper = react_1.useMemo(function () {
@@ -44,0 +40,0 @@ return function (_a) {

lib/cjs/tree/resolveLiveDescriptor.js

@@ -6,3 +6,3 @@ "use strict";
     var getItemTitle = function (index) { return environment.getItemTitle(environment.items[index]); };
-    return descriptor.replace(/(\{[^\s\}]+)\}/g, function (variableNameWithBrackets) {
+    return descriptor.replace(/({[^\s}]+)}/g, function (variableNameWithBrackets) {
         var _a, _b, _c;
@@ -9,0 +9,0 @@ var variableName = variableNameWithBrackets.slice(1, -1);

lib/cjs/tree/Tree.js

@@ -58,2 +58,4 @@ "use strict";
         return function () { return environment.unregisterTree(props.treeId); };
+        // TODO should be able to remove soon, and add environment.registerTree, environment.unregisterTree as deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.treeId, props.rootItem]);
@@ -60,0 +62,0 @@ var treeInformation = useCreatedTreeInformation_1.useCreatedTreeInformation(props, renamingItem, search);

lib/cjs/tree/TreeManager.js

@@ -44,3 +44,3 @@ "use strict";
 var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
-var LiveDescription_1 = require("./LiveDescription");
+var MaybeLiveDescription_1 = require("./MaybeLiveDescription");
 var TreeManager = function () {
@@ -66,3 +66,3 @@ var _a;
     var treeChildren = (React.createElement(React.Fragment, null,
-        React.createElement(LiveDescription_1.LiveDescription, null),
+        React.createElement(MaybeLiveDescription_1.MaybeLiveDescription, null),
         React.createElement(TreeItemChildren_1.TreeItemChildren, { depth: 0, parentId: treeId }, rootChildren),
@@ -69,0 +69,0 @@ React.createElement(DragBetweenLine_1.DragBetweenLine, { treeId: treeId }),

lib/cjs/tree/useCreatedTreeInformation.js

@@ -11,11 +11,12 @@ "use strict";
     var dnd = DragAndDropProvider_1.useDragAndDrop();
+    var selectedItems = (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems;
     return react_1.useMemo(function () {
-        var _a, _b, _c, _d;
+        var _a, _b;
         return ({
             isFocused: environment.activeTreeId === tree.treeId,
             isRenaming: !!renamingItem,
-            areItemsSelected: ((_c = (_b = (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0,
+            areItemsSelected: ((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) !== null && _a !== void 0 ? _a : 0) > 0,
             isSearching: search !== null,
             search: search,
-            isProgrammaticallyDragging: (_d = dnd.isProgrammaticallyDragging) !== null && _d !== void 0 ? _d : false,
+            isProgrammaticallyDragging: (_b = dnd.isProgrammaticallyDragging) !== null && _b !== void 0 ? _b : false,
             treeId: tree.treeId,
@@ -26,5 +27,6 @@ rootItem: tree.rootItem,
         environment.activeTreeId,
-        (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems,
+        tree.treeId,
+        tree.rootItem,
         renamingItem,
-        tree.treeId,
+        selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length,
         search,
@@ -31,0 +33,0 @@ dnd.isProgrammaticallyDragging,

lib/cjs/tree/useMoveFocusToIndex.js

@@ -8,9 +8,10 @@ "use strict";
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
+var react_1 = require("react");
 var useMoveFocusToIndex = function () {
     var treeId = Tree_1.useTree().treeId;
-    var environment = ControlledTreeEnvironment_1.useTreeEnvironment();
+    var _a = ControlledTreeEnvironment_1.useTreeEnvironment(), onFocusItem = _a.onFocusItem, items = _a.items;
     var getLinearItems = useGetLinearItems_1.useGetLinearItems();
     var viewState = useViewState_1.useViewState();
-    return function (computeNewIndex) {
-        var _a, _b;
+    return react_1.useCallback(function (computeNewIndex) {
+        var _a;
         var linearItems = getLinearItems();
@@ -20,7 +21,7 @@ var currentIndex = (_a = linearItems.findIndex(function (item) { return item.item === viewState.focusedItem; })) !== null && _a !== void 0 ? _a : 0;
         var newIndexBounded = Math.max(0, Math.min(linearItems.length - 1, newIndex));
-        var newFocusItem = environment.items[linearItems[newIndexBounded].item];
-        (_b = environment.onFocusItem) === null || _b === void 0 ? void 0 : _b.call(environment, newFocusItem, treeId);
+        var newFocusItem = items[linearItems[newIndexBounded].item];
+        onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(newFocusItem, treeId);
         return newFocusItem;
-    };
+    }, [onFocusItem, items, getLinearItems, treeId, viewState.focusedItem]);
 };
 exports.useMoveFocusToIndex = useMoveFocusToIndex;

lib/cjs/tree/useTreeKeyboardBindings.js

@@ -18,6 +18,7 @@ "use strict";
 var useSelectUpTo_1 = require("./useSelectUpTo");
+var react_1 = require("react");
 var useTreeKeyboardBindings = function () {
     var _a;
     var environment = ControlledTreeEnvironment_1.useTreeEnvironment();
-    var _b = Tree_1.useTree(), treeId = _b.treeId, setRenamingItem = _b.setRenamingItem, setSearch = _b.setSearch;
+    var _b = Tree_1.useTree(), treeId = _b.treeId, setRenamingItem = _b.setRenamingItem, setSearch = _b.setSearch, renamingItem = _b.renamingItem;
     var dnd = DragAndDropProvider_1.useDragAndDrop();
@@ -29,3 +30,4 @@ var viewState = useViewState_1.useViewState();
     var isActiveTree = environment.activeTreeId === treeId;
-    useKey_1.useKey('arrowdown', function (e) {
+    var isRenaming = !!renamingItem;
+    useKey_1.useKey('arrowdown', react_1.useCallback(function (e) {
         e.preventDefault();
@@ -41,4 +43,4 @@ if (dnd.isProgrammaticallyDragging) {
         }
-    }, isActiveTree);
-    useKey_1.useKey('arrowup', function (e) {
+    }, [dnd, moveFocusToIndex, selectUpTo]), isActiveTree && !isRenaming);
+    useKey_1.useKey('arrowup', react_1.useCallback(function (e) {
         e.preventDefault();
@@ -54,12 +56,12 @@ if (dnd.isProgrammaticallyDragging) {
         }
-    }, isActiveTree);
-    useHotkey_1.useHotkey('moveFocusToFirstItem', function (e) {
+    }, [dnd, moveFocusToIndex, selectUpTo]), isActiveTree && !isRenaming);
+    useHotkey_1.useHotkey('moveFocusToFirstItem', react_1.useCallback(function (e) {
         e.preventDefault();
         moveFocusToIndex(function () { return 0; });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey_1.useHotkey('moveFocusToLastItem', function (e) {
+    }, [moveFocusToIndex]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey_1.useHotkey('moveFocusToLastItem', react_1.useCallback(function (e) {
         e.preventDefault();
         moveFocusToIndex(function (currentIndex, linearItems) { return linearItems.length - 1; });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useKey_1.useKey('arrowright', function (e) {
+    }, [moveFocusToIndex]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useKey_1.useKey('arrowright', react_1.useCallback(function (e) {
         e.preventDefault();
@@ -79,4 +81,4 @@ moveFocusToIndex(function (currentIndex, linearItems) {
         });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useKey_1.useKey('arrowleft', function (e) {
+    }, [environment, moveFocusToIndex, treeId, viewState.expandedItems]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useKey_1.useKey('arrowleft', react_1.useCallback(function (e) {
         e.preventDefault();
@@ -98,4 +100,4 @@ moveFocusToIndex(function (currentIndex, linearItems) {
         });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey_1.useHotkey('primaryAction', function (e) {
+    }, [environment, moveFocusToIndex, treeId, viewState.expandedItems]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey_1.useHotkey('primaryAction', react_1.useCallback(function (e) {
         var _a, _b;
@@ -107,4 +109,4 @@ e.preventDefault();
         }
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey_1.useHotkey('toggleSelectItem', function (e) {
+    }, [environment, treeId, viewState.focusedItem]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey_1.useHotkey('toggleSelectItem', react_1.useCallback(function (e) {
         var _a, _b, _c;
@@ -120,4 +122,4 @@ e.preventDefault();
         }
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey_1.useHotkey('selectAll', function (e) {
+    }, [environment, treeId, viewState.focusedItem, viewState.selectedItems]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey_1.useHotkey('selectAll', react_1.useCallback(function (e) {
         var _a;
@@ -129,4 +131,4 @@ e.preventDefault();
         }), treeId);
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey_1.useHotkey('renameItem', function (e) {
+    }, [environment, getLinearItems, treeId]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey_1.useHotkey('renameItem', react_1.useCallback(function (e) {
         var _a;
@@ -139,4 +141,4 @@ if (viewState.focusedItem) {
         }
-    }, isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true));
-    useHotkey_1.useHotkey('startSearch', function (e) {
+    }, [environment, setRenamingItem, treeId, viewState.focusedItem]), isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true) && !isRenaming);
+    useHotkey_1.useHotkey('startSearch', react_1.useCallback(function (e) {
         var _a, _b;
@@ -146,16 +148,16 @@ e.preventDefault();
         (_b = (_a = document.querySelector('[data-rct-search-input="true"]')) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey_1.useHotkey('startProgrammaticDnd', function (e) {
+    }, [setSearch]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey_1.useHotkey('startProgrammaticDnd', react_1.useCallback(function (e) {
         e.preventDefault();
         dnd.startProgrammaticDrag();
-    }, isActiveTree);
-    useHotkey_1.useHotkey('completeProgrammaticDnd', function (e) {
+    }, [dnd]), isActiveTree && !isRenaming);
+    useHotkey_1.useHotkey('completeProgrammaticDnd', react_1.useCallback(function (e) {
         e.preventDefault();
         dnd.completeProgrammaticDrag();
-    }, isActiveTree && dnd.isProgrammaticallyDragging);
-    useHotkey_1.useHotkey('abortProgrammaticDnd', function (e) {
+    }, [dnd]), isActiveTree && dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey_1.useHotkey('abortProgrammaticDnd', react_1.useCallback(function (e) {
         e.preventDefault();
         dnd.abortProgrammaticDrag();
-    }, isActiveTree && dnd.isProgrammaticallyDragging);
+    }, [dnd]), isActiveTree && dnd.isProgrammaticallyDragging && !isRenaming);
 };
 exports.useTreeKeyboardBindings = useTreeKeyboardBindings;

lib/cjs/treeItem/TreeItemRenamingInput.js

@@ -8,2 +8,3 @@ "use strict";
 var useHotkey_1 = require("../hotkeys/useHotkey");
+var useSideEffect_1 = require("../useSideEffect");
 var TreeItemRenamingInput = function (props) {
@@ -32,3 +33,3 @@ var _a = Tree_1.useTree(), renderers = _a.renderers, treeInformation = _a.treeInformation, setRenamingItem = _a.setRenamingItem, treeId = _a.treeId;
     };
-    react_1.useEffect(function () {
+    useSideEffect_1.useSideEffect(function () {
         var _a, _b, _c;
@@ -40,3 +41,3 @@ environment.setActiveTree(treeId);
         }
-    }, [inputRef.current]);
+    }, [environment, treeId], []);
     useHotkey_1.useHotkey('abortRenameItem', function () {
@@ -43,0 +44,0 @@ abort();

lib/cjs/treeItem/useTreeItemRenderContext.js

@@ -29,4 +29,4 @@ "use strict";
 var useTreeItemRenderContext = function (item) {
-    var _a, _b, _c;
-    var _d = Tree_1.useTree(), treeId = _d.treeId, search = _d.search, renamingItem = _d.renamingItem;
+    var _a, _b, _c, _d;
+    var _e = Tree_1.useTree(), treeId = _e.treeId, search = _e.search, renamingItem = _e.renamingItem;
     var environment = ControlledTreeEnvironment_1.useTreeEnvironment();
@@ -42,6 +42,9 @@ var interactionManager = InteractionManagerProvider_1.useInteractionManager();
             : ((_a = environment.doesSearchMatchItem) !== null && _a !== void 0 ? _a : defaultMatcher_1.defaultMatcher)(search, item, itemTitle);
-    }, [search, itemTitle]);
+    }, [search, item, itemTitle, environment.doesSearchMatchItem]);
+    var isSelected = item && ((_b = (_a = environment.viewState[treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) === null || _b === void 0 ? void 0 : _b.includes(item.index));
+    var isExpanded = item && ((_d = (_c = environment.viewState[treeId]) === null || _c === void 0 ? void 0 : _c.expandedItems) === null || _d === void 0 ? void 0 : _d.includes(item.index));
+    var isRenaming = item && renamingItem === item.index;
     return react_1.useMemo(function () {
         var _a, _b;
-        var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!item) {
@@ -76,8 +79,8 @@ return undefined;
             toggleExpandedState: function () {
-                var _a, _b, _c;
-                if ((_a = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _a === void 0 ? void 0 : _a.includes(item.index)) {
-                    (_b = environment.onCollapseItem) === null || _b === void 0 ? void 0 : _b.call(environment, item, treeId);
+                var _a, _b;
+                if (isExpanded) {
+                    (_a = environment.onCollapseItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
                 }
                 else {
-                    (_c = environment.onExpandItem) === null || _c === void 0 ? void 0 : _c.call(environment, item, treeId);
+                    (_b = environment.onExpandItem) === null || _b === void 0 ? void 0 : _b.call(environment, item, treeId);
                 }
@@ -121,6 +124,6 @@ },
         var renderFlags = {
-            isSelected: (_m = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _m === void 0 ? void 0 : _m.includes(item.index),
-            isExpanded: (_o = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _o === void 0 ? void 0 : _o.includes(item.index),
+            isSelected: isSelected,
+            isExpanded: isExpanded,
             isFocused: (viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) === item.index,
-            isRenaming: renamingItem === item.index,
+            isRenaming: isRenaming,
             isDraggingOver: dnd.draggingPosition &&
@@ -165,14 +168,19 @@ dnd.draggingPosition.targetType === 'item' &&
         };
-        return __assign(__assign(__assign({}, actions), renderFlags), { interactiveElementProps: interactiveElementProps, itemContainerWithChildrenProps: itemContainerWithChildrenProps, itemContainerWithoutChildrenProps: itemContainerWithoutChildrenProps, arrowProps: arrowProps });
+        return __assign(__assign(__assign({}, actions), renderFlags), { interactiveElementProps: interactiveElementProps,
+            itemContainerWithChildrenProps: itemContainerWithChildrenProps,
+            itemContainerWithoutChildrenProps: itemContainerWithoutChildrenProps,
+            arrowProps: arrowProps });
     }, [
+        item,
         environment,
-        (_a = environment.viewState[treeId]) === null || _a === void 0 ? void 0 : _a.expandedItems,
-        (_b = environment.viewState[treeId]) === null || _b === void 0 ? void 0 : _b.selectedItems,
-        renamingItem && renamingItem === (item === null || item === void 0 ? void 0 : item.index),
-        (_c = item === null || item === void 0 ? void 0 : item.index) !== null && _c !== void 0 ? _c : '___no_item',
         treeId,
+        dnd,
+        isSelected,
+        isExpanded,
+        isRenaming,
         isSearchMatching,
-        dnd.draggingPosition,
+        interactionManager,
+        selectUpTo,
     ]);
 };
 exports.useTreeItemRenderContext = useTreeItemRenderContext;

lib/cjs/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -112,3 +112,3 @@ "use strict";
         return dispose;
-    }, [dataProvider]);
+    }, [dataProvider, writeItems]);
     return (React.createElement(ControlledTreeEnvironment_1.ControlledTreeEnvironment, __assign({}, props, { ref: ref, viewState: viewState, items: currentItems, onExpandItem: function (item, treeId) {
@@ -115,0 +115,0 @@ var _a;

lib/cjs/useHtmlElementEventListener.js

@@ -17,4 +17,5 @@ "use strict";
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, __spreadArray([element, listener, type], deps));
 };
 exports.useHtmlElementEventListener = useHtmlElementEventListener;

lib/esm/controlledEnvironment/ControlledTreeEnvironment.js

@@ -13,8 +13,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
-import { useContext, useState } from 'react';
-import { createDefaultRenderers } from '../renderers/createDefaultRenderers';
-import { scrollIntoView } from '../tree/scrollIntoView';
+import { useContext } from 'react';
 import { InteractionManagerProvider } from './InteractionManagerProvider';
 import { DragAndDropProvider } from './DragAndDropProvider';
 import { EnvironmentActionsProvider } from '../environmentActions/EnvironmentActionsProvider';
+import { useControlledTreeEnvironmentProps } from './useControlledTreeEnvironmentProps';
 var TreeEnvironmentContext = React.createContext(null);
@@ -24,8 +23,7 @@ export var useTreeEnvironment = function () { return useContext(TreeEnvironmentContext); };
     var _a, _b, _c;
-    var _d = useState({}), trees = _d[0], setTrees = _d[1];
-    var _e = useState(), activeTreeId = _e[0], setActiveTreeId = _e[1];
+    var environmentContextProps = useControlledTreeEnvironmentProps(props);
     var viewState = props.viewState;
     // Make sure that every tree view state has a focused item
-    for (var _i = 0, _f = Object.keys(trees); _i < _f.length; _i++) {
-        var treeId = _f[_i];
+    for (var _i = 0, _d = Object.keys(environmentContextProps.trees); _i < _d.length; _i++) {
+        var treeId = _d[_i];
         // TODO if the focus item is dragged out of the tree and is not within the expanded items
@@ -35,59 +33,6 @@ // TODO of that tree, the tree does not show any focus item anymore.
         // information when the viewstate changes
-        if (!((_a = viewState[treeId]) === null || _a === void 0 ? void 0 : _a.focusedItem) && trees[treeId]) {
-            viewState[treeId] = __assign(__assign({}, viewState[treeId]), { focusedItem: (_c = (_b = props.items[trees[treeId].rootItem]) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c[0] });
+        if (!((_a = viewState[treeId]) === null || _a === void 0 ? void 0 : _a.focusedItem) && environmentContextProps.trees[treeId]) {
+            viewState[treeId] = __assign(__assign({}, viewState[treeId]), { focusedItem: (_c = (_b = props.items[environmentContextProps.trees[treeId].rootItem]) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c[0] });
         }
     }
-    var environmentContextProps = __assign(__assign(__assign({}, createDefaultRenderers(props)), props), { onFocusItem: function (item, treeId) {
-            var _a, _b, _c, _d, _e, _f;
-            (_a = props.onFocusItem) === null || _a === void 0 ? void 0 : _a.call(props, item, treeId);
-            var newItem = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-id=\"" + item.index + "\"]");
-            if ((_b = props.autoFocus) !== null && _b !== void 0 ? _b : true) {
-                if (((_d = (_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.attributes.getNamedItem('data-rct-search-input')) === null || _d === void 0 ? void 0 : _d.value) !== 'true') {
-                    // Move DOM focus to item if the current focus is not on the search input
-                    (_f = (_e = newItem) === null || _e === void 0 ? void 0 : _e.focus) === null || _f === void 0 ? void 0 : _f.call(_e);
-                }
-                else {
-                    // Otherwise just manually scroll into view
-                    scrollIntoView(newItem);
-                }
-            }
-        }, registerTree: function (tree) {
-            var _a;
-            setTrees(function (trees) {
-                var _a;
-                return (__assign(__assign({}, trees), (_a = {}, _a[tree.treeId] = tree, _a)));
-            });
-            (_a = props.onRegisterTree) === null || _a === void 0 ? void 0 : _a.call(props, tree);
-        }, unregisterTree: function (treeId) {
-            var _a;
-            (_a = props.onUnregisterTree) === null || _a === void 0 ? void 0 : _a.call(props, trees[treeId]);
-            delete trees[treeId];
-            setTrees(trees);
-        }, setActiveTree: function (treeIdOrSetStateFunction, autoFocus) {
-            if (autoFocus === void 0) { autoFocus = true; }
-            var focusTree = function (treeId) {
-                var _a, _b, _c, _d;
-                if (autoFocus &&
-                    ((_a = props.autoFocus) !== null && _a !== void 0 ? _a : true) &&
-                    treeId &&
-                    !((_b = document.querySelector("[data-rct-tree=\"" + treeId + "\"]")) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement))) {
-                    var focusItem = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-focus=\"true\"]");
-                    (_d = (_c = focusItem) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
-                }
-            };
-            if (typeof treeIdOrSetStateFunction === 'function') {
-                setActiveTreeId(function (oldValue) {
-                    var treeId = treeIdOrSetStateFunction(oldValue);
-                    if (treeId !== oldValue) {
-                        focusTree(treeId);
-                    }
-                    return treeId;
-                });
-            }
-            else {
-                var treeId = treeIdOrSetStateFunction;
-                setActiveTreeId(treeId);
-                focusTree(treeId);
-            }
-        }, treeIds: Object.keys(trees), trees: trees, activeTreeId: activeTreeId });
     return (React.createElement(TreeEnvironmentContext.Provider, { value: environmentContextProps },
@@ -94,0 +39,0 @@ React.createElement(InteractionManagerProvider, null,

lib/esm/controlledEnvironment/DragAndDropProvider.js

@@ -13,3 +13,3 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTreeEnvironment } from './ControlledTreeEnvironment';
@@ -20,2 +20,3 @@ import { getItemsLinearly } from '../tree/getItemsLinearly';
 import { useGetViableDragPositions } from './useGetViableDragPositions';
+import { useSideEffect } from '../useSideEffect';
 var DragAndDropContext = React.createContext(null);
@@ -41,3 +42,4 @@ export var useDragAndDrop = function () { return React.useContext(DragAndDropContext); };
     var _h = useState('_nodrag'), dragCode = _h[0], setDragCode = _h[1];
-    var resetProgrammaticDragIndexForCurrentTree = function (viableDragPositions, linearItems, draggingItems) {
+    var getViableDragPositions = useGetViableDragPositions();
+    var resetProgrammaticDragIndexForCurrentTree = useCallback(function (viableDragPositions, linearItems, draggingItems) {
         var _a;
@@ -68,4 +70,4 @@ if (environment.activeTreeId &&
         }
-    };
-    var resetState = function () {
+    }, [environment.activeTreeId, environment.items, environment.viewState, getViableDragPositions]);
+    var resetState = useCallback(function () {
         setIsProgrammaticallyDragging(false);
@@ -79,4 +81,4 @@ setItemHeight(4);
         setDragCode('_nodrag');
-    };
-    useEffect(function () {
+    }, []);
+    useSideEffect(function () {
         if (environment.activeTreeId &&
@@ -87,8 +89,14 @@ linearItems[environment.activeTreeId] &&
         }
-    }, [environment.activeTreeId]);
-    useEffect(function () {
+    }, [
+        draggingItems,
+        environment.activeTreeId,
+        linearItems,
+        resetProgrammaticDragIndexForCurrentTree,
+        viableDragPositions,
+    ], [environment.activeTreeId]);
+    useSideEffect(function () {
         if (isProgrammaticallyDragging && environment.activeTreeId) {
             setDraggingPosition(viableDragPositions[environment.activeTreeId][programmaticDragIndex]);
         }
-    }, [programmaticDragIndex, environment.activeTreeId]);
+    }, [programmaticDragIndex, environment.activeTreeId, isProgrammaticallyDragging, viableDragPositions], [programmaticDragIndex, environment.activeTreeId]);
     var canDropAt = useCanDropAt();
@@ -108,3 +116,2 @@ var performDrag = function (draggingPosition) {
     var onDragOverTreeHandler = useOnDragOverTreeHandler(dragCode, setDragCode, itemHeight, linearItems, setDraggingPosition, performDrag);
-    var getViableDragPositions = useGetViableDragPositions();
     var onDropHandler = useMemo(function () { return function () {
@@ -119,62 +126,72 @@ if (draggingItems && draggingPosition && environment.onDrop) {
         }
-    }; }, [draggingPosition, draggingItems, environment.onDrop, environment.onFocusItem]);
-    useEffect(function () {
-        window.addEventListener('dragend', onDropHandler);
-        return function () { return window.removeEventListener('dragend', onDropHandler); };
-    }, [onDropHandler]);
-    var dnd = {
-        onStartDraggingItems: function (items, treeId) {
-            var _a, _b;
-            var treeLinearItems = buildMapForTrees(environment.treeIds, function (treeId) { var _a; return getItemsLinearly(environment.trees[treeId].rootItem, (_a = environment.viewState[treeId]) !== null && _a !== void 0 ? _a : {}, environment.items); });
-            var treeViableDragPositions = buildMapForTrees(environment.treeIds, function (treeId) {
-                return getViableDragPositions(treeId, items, treeLinearItems[treeId]);
-            });
-            // TODO what if trees have different heights and drag target changes?
-            var height = (_b = (_a = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-container=\"true\"]")) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 5;
-            setItemHeight(height);
-            setDraggingItems(items);
-            setLinearItems(treeLinearItems);
-            setViableDragPositions(treeViableDragPositions);
-            if (environment.activeTreeId) {
-                resetProgrammaticDragIndexForCurrentTree(treeViableDragPositions[environment.activeTreeId], treeLinearItems[environment.activeTreeId], items);
+    }; }, [draggingItems, draggingPosition, environment, resetState]);
+    var onStartDraggingItems = useCallback(function (items, treeId) {
+        var _a, _b;
+        var treeLinearItems = buildMapForTrees(environment.treeIds, function (treeId) { var _a; return getItemsLinearly(environment.trees[treeId].rootItem, (_a = environment.viewState[treeId]) !== null && _a !== void 0 ? _a : {}, environment.items); });
+        var treeViableDragPositions = buildMapForTrees(environment.treeIds, function (treeId) {
+            return getViableDragPositions(treeId, items, treeLinearItems[treeId]);
+        });
+        // TODO what if trees have different heights and drag target changes?
+        var height = (_b = (_a = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-container=\"true\"]")) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 5;
+        setItemHeight(height);
+        setDraggingItems(items);
+        setLinearItems(treeLinearItems);
+        setViableDragPositions(treeViableDragPositions);
+        if (environment.activeTreeId) {
+            resetProgrammaticDragIndexForCurrentTree(treeViableDragPositions[environment.activeTreeId], treeLinearItems[environment.activeTreeId], items);
+        }
+    }, [
+        environment.activeTreeId,
+        environment.items,
+        environment.treeIds,
+        environment.trees,
+        environment.viewState,
+        getViableDragPositions,
+        resetProgrammaticDragIndexForCurrentTree,
+    ]);
+    var startProgrammaticDrag = useCallback(function () {
+        var _a, _b, _c;
+        if (!environment.canDragAndDrop) {
+            return;
+        }
+        if (environment.activeTreeId) {
+            var draggingItems_1 = (_b = (_a = environment.viewState[environment.activeTreeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) !== null && _b !== void 0 ? _b : [(_c = environment.viewState[environment.activeTreeId]) === null || _c === void 0 ? void 0 : _c.focusedItem];
+            if (draggingItems_1.length === 0 || draggingItems_1[0] === undefined) {
+                return;
             }
-        },
-        startProgrammaticDrag: function () {
-            var _a, _b, _c;
-            if (!environment.canDragAndDrop) {
+            var resolvedDraggingItems = draggingItems_1.map(function (id) { return environment.items[id]; });
+            if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
                 return;
             }
-            if (environment.activeTreeId) {
-                var draggingItems_1 = (_b = (_a = environment.viewState[environment.activeTreeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) !== null && _b !== void 0 ? _b : [(_c = environment.viewState[environment.activeTreeId]) === null || _c === void 0 ? void 0 : _c.focusedItem];
-                if (draggingItems_1.length === 0 || draggingItems_1[0] === undefined) {
-                    return;
-                }
-                var resolvedDraggingItems = draggingItems_1.map(function (id) { return environment.items[id]; });
-                if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
-                    return;
-                }
-                dnd.onStartDraggingItems(resolvedDraggingItems, environment.activeTreeId);
-                setTimeout(function () {
-                    setIsProgrammaticallyDragging(true);
-                    // Needs to be done after onStartDraggingItems was called, so that viableDragPositions is populated
-                });
-            }
-        },
-        abortProgrammaticDrag: function () {
-            resetState();
-        },
-        completeProgrammaticDrag: function () {
-            onDropHandler();
-            resetState();
-        },
-        programmaticDragUp: function () {
-            setProgrammaticDragIndex(function (oldIndex) { return Math.max(0, oldIndex - 1); });
-        },
-        programmaticDragDown: function () {
-            if (environment.activeTreeId) {
-                setProgrammaticDragIndex(function (oldIndex) {
-                    return Math.min(viableDragPositions[environment.activeTreeId].length, oldIndex + 1);
-                });
-            }
-        },
+            onStartDraggingItems(resolvedDraggingItems, environment.activeTreeId);
+            setTimeout(function () {
+                setIsProgrammaticallyDragging(true);
+                // Needs to be done after onStartDraggingItems was called, so that viableDragPositions is populated
+            });
+        }
+    }, [onStartDraggingItems, environment]);
+    var abortProgrammaticDrag = useCallback(function () {
+        resetState();
+    }, [resetState]);
+    var completeProgrammaticDrag = useCallback(function () {
+        onDropHandler();
+        resetState();
+    }, [onDropHandler, resetState]);
+    var programmaticDragUp = useCallback(function () {
+        setProgrammaticDragIndex(function (oldIndex) { return Math.max(0, oldIndex - 1); });
+    }, []);
+    var programmaticDragDown = useCallback(function () {
+        if (environment.activeTreeId) {
+            setProgrammaticDragIndex(function (oldIndex) {
+                return Math.min(viableDragPositions[environment.activeTreeId].length, oldIndex + 1);
+            });
+        }
+    }, [environment.activeTreeId, viableDragPositions]);
+    var dnd = {
+        onStartDraggingItems: onStartDraggingItems,
+        startProgrammaticDrag: startProgrammaticDrag,
+        abortProgrammaticDrag: abortProgrammaticDrag,
+        completeProgrammaticDrag: completeProgrammaticDrag,
+        programmaticDragUp: programmaticDragUp,
+        programmaticDragDown: programmaticDragDown,
         draggingItems: draggingItems,
@@ -187,3 +204,7 @@ draggingPosition: draggingPosition,
     };
+    useEffect(function () {
+        window.addEventListener('dragend', onDropHandler);
+        return function () { return window.removeEventListener('dragend', onDropHandler); };
+    }, [onDropHandler]);
     return React.createElement(DragAndDropContext.Provider, { value: dnd }, props.children);
 };

lib/esm/controlledEnvironment/InteractionManagerProvider.js

@@ -23,4 +23,5 @@ import * as React from 'react';
         return buildInteractionMode((_a = defaultInteractionMode) !== null && _a !== void 0 ? _a : InteractionMode.ClickItemToExpand, environment);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // TODO make sure that environment does not need to be refreshed
     return (React.createElement(InteractionManagerContext.Provider, { value: interactionManager }, props.children));
 };

lib/esm/hotkeys/useHotkey.js

@@ -8,3 +8,2 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import { useMemo, useRef } from 'react';
-import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
 import { useKeyboardBindings } from './useKeyboardBindings';
@@ -14,6 +13,5 @@ var elementsThatCanTakeText = ['input', 'textarea'];
     if (activatableWhileFocusingInput === void 0) { activatableWhileFocusingInput = false; }
-    var environment = useTreeEnvironment();
     var pressedKeys = useRef([]);
     var keyboardBindings = useKeyboardBindings();
-    var possibleCombinations = useMemo(function () { return keyboardBindings[combinationName].map(function (combination) { return combination.split('+'); }); }, [combinationName, environment.keyboardBindings]);
+    var possibleCombinations = useMemo(function () { return keyboardBindings[combinationName].map(function (combination) { return combination.split('+'); }); }, [combinationName, keyboardBindings]);
     useHtmlElementEventListener(document, 'keydown', function (e) {
@@ -20,0 +18,0 @@ if (active === false) {

lib/esm/renderers/createDefaultRenderers.d.ts

@@ -1,2 +0,2 @@
-import { AllTreeRenderProps, TreeRenderProps } from '../types';
-export declare const createDefaultRenderers: (renderers: TreeRenderProps) => AllTreeRenderProps;
+import { AllTreeRenderProps } from '../types';
+export declare const createDefaultRenderers: (renderDepthOffset: number) => AllTreeRenderProps;

lib/esm/renderers/createDefaultRenderers.js

@@ -20,4 +20,5 @@ var __assign = (this && this.__assign) || function () {
 };
-export var createDefaultRenderers = function (renderers) {
-    var newRenderers = __assign({ renderItemTitle: function (_a) {
+export var createDefaultRenderers = function (renderDepthOffset) {
+    return {
+        renderItemTitle: function (_a) {
             var title = _a.title, context = _a.context, info = _a.info;
@@ -34,3 +35,4 @@ if (!info.isSearching || !context.isSearchMatching) {
             }
-        }, renderItemArrow: function (_a) {
+        },
+        renderItemArrow: function (_a) {
             var item = _a.item, context = _a.context;
@@ -46,13 +48,15 @@ // Icons from https://blueprintjs.com/docs/#icons
                             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.71,7.29l-4-4C6.53,3.11,6.28,3,6,3C5.45,3,5,3.45,5,4\n                      c0,0.28,0.11,0.53,0.29,0.71L8.59,8l-3.29,3.29C5.11,11.47,5,11.72,5,12c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l4-4\n                      C10.89,8.53,11,8.28,11,8C11,7.72,10.89,7.47,10.71,7.29z", className: "rct-tree-item-arrow-path" }))))))));
-        }, renderItem: function (_a) {
-            var _b;
+        },
+        renderItem: function (_a) {
             var item = _a.item, depth = _a.depth, children = _a.children, title = _a.title, context = _a.context, arrow = _a.arrow;
             var InteractiveComponent = context.isRenaming ? 'div' : 'button';
+            var type = context.isRenaming ? undefined : 'button';
             // TODO have only root li component create all the classes
             return (React.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { className: cx('rct-tree-item-li', item.hasChildren && 'rct-tree-item-li-hasChildren', context.isSelected && 'rct-tree-item-li-selected', context.isExpanded && 'rct-tree-item-li-expanded', context.isFocused && 'rct-tree-item-li-focused', context.isDraggingOver && 'rct-tree-item-li-dragging-over', context.isSearchMatching && 'rct-tree-item-li-search-match') }),
-                React.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { paddingLeft: (depth + 1) * ((_b = renderers.renderDepthOffset) !== null && _b !== void 0 ? _b : 10) + "px" }, className: cx('rct-tree-item-title-container', item.hasChildren && 'rct-tree-item-title-container-hasChildren', context.isSelected && 'rct-tree-item-title-container-selected', context.isExpanded && 'rct-tree-item-title-container-expanded', context.isFocused && 'rct-tree-item-title-container-focused', context.isDraggingOver && 'rct-tree-item-title-container-dragging-over', context.isSearchMatching && 'rct-tree-item-title-container-search-match') }),
+                React.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { paddingLeft: (depth + 1) * renderDepthOffset + "px" }, className: cx('rct-tree-item-title-container', item.hasChildren && 'rct-tree-item-title-container-hasChildren', context.isSelected && 'rct-tree-item-title-container-selected', context.isExpanded && 'rct-tree-item-title-container-expanded', context.isFocused && 'rct-tree-item-title-container-focused', context.isDraggingOver && 'rct-tree-item-title-container-dragging-over', context.isSearchMatching && 'rct-tree-item-title-container-search-match') }),
                     arrow,
-                    React.createElement(InteractiveComponent, __assign({}, context.interactiveElementProps, { className: cx('rct-tree-item-button', item.hasChildren && 'rct-tree-item-button-hasChildren', context.isSelected && 'rct-tree-item-button-selected', context.isExpanded && 'rct-tree-item-button-expanded', context.isFocused && 'rct-tree-item-button-focused', context.isDraggingOver && 'rct-tree-item-button-dragging-over', context.isSearchMatching && 'rct-tree-item-button-search-match') }), title)),
+                    React.createElement(InteractiveComponent, __assign({ type: type }, context.interactiveElementProps, { className: cx('rct-tree-item-button', item.hasChildren && 'rct-tree-item-button-hasChildren', context.isSelected && 'rct-tree-item-button-selected', context.isExpanded && 'rct-tree-item-button-expanded', context.isFocused && 'rct-tree-item-button-focused', context.isDraggingOver && 'rct-tree-item-button-dragging-over', context.isSearchMatching && 'rct-tree-item-button-search-match') }), title)),
                 children));
-        }, renderRenameInput: function (_a) {
+        },
+        renderRenameInput: function (_a) {
             var inputProps = _a.inputProps, inputRef = _a.inputRef, submitButtonProps = _a.submitButtonProps, submitButtonRef = _a.submitButtonRef, formProps = _a.formProps;
@@ -62,17 +66,21 @@ return (React.createElement("form", __assign({}, formProps, { className: "rct-tree-item-renaming-form" }),
                 React.createElement("input", __assign({}, submitButtonProps, { ref: submitButtonRef, type: "submit", className: "rct-tree-item-renaming-submit-button", value: "\uD83D\uDDF8" }))));
-        }, renderDraggingItem: function () {
+        },
+        renderDraggingItem: function () {
             return React.createElement("div", null);
-        }, renderDraggingItemTitle: function () {
+        },
+        renderDraggingItemTitle: function () {
             return React.createElement("div", null);
-        }, renderTreeContainer: function (_a) {
+        },
+        renderTreeContainer: function (_a) {
             var children = _a.children, containerProps = _a.containerProps, info = _a.info;
             return (React.createElement("div", { className: cx('rct-tree-root', info.isFocused && 'rct-tree-root-focus', info.isRenaming && 'rct-tree-root-renaming', info.areItemsSelected && 'rct-tree-root-itemsselected') },
                 React.createElement("div", __assign({}, containerProps), children)));
-        }, renderItemsContainer: function (_a) {
+        },
+        renderItemsContainer: function (_a) {
             var children = _a.children, containerProps = _a.containerProps;
             return (React.createElement("ul", __assign({}, containerProps, { className: "rct-tree-items-container" }), children));
-        }, renderDragBetweenLine: function (_a) {
-            var _b;
+        },
+        renderDragBetweenLine: function (_a) {
             var draggingPosition = _a.draggingPosition, lineProps = _a.lineProps;
-            return (React.createElement("div", __assign({}, lineProps, { style: { left: draggingPosition.depth * ((_b = renderers.renderDepthOffset) !== null && _b !== void 0 ? _b : 10) + "px" }, className: cx('rct-tree-drag-between-line', draggingPosition.targetType === 'between-items' &&
+            return (React.createElement("div", __assign({}, lineProps, { style: { left: draggingPosition.depth * renderDepthOffset + "px" }, className: cx('rct-tree-drag-between-line', draggingPosition.targetType === 'between-items' &&
                     draggingPosition.linePosition === 'top' &&
@@ -82,7 +90,9 @@ 'rct-tree-drag-between-line-top', draggingPosition.targetType === 'between-items' &&
                     'rct-tree-drag-between-line-bottom') })));
-        }, renderSearchInput: function (_a) {
+        },
+        renderSearchInput: function (_a) {
             var inputProps = _a.inputProps;
             return (React.createElement("div", { className: cx('rct-tree-search-input-container') },
                 React.createElement("input", __assign({}, inputProps, { className: cx('rct-tree-search-input') }))));
-        }, renderLiveDescriptorContainer: function (_a) {
+        },
+        renderLiveDescriptorContainer: function (_a) {
             var tree = _a.tree, children = _a.children;
@@ -98,14 +108,5 @@ return (React.createElement("div", { id: "rct-livedescription-" + tree.treeId, style: {
                 } }, children));
-        }, renderDepthOffset: 4 }, renderers);
-    newRenderers.renderItem.displayName = 'RenderItem';
-    newRenderers.renderItemTitle.displayName = 'RenderItemTitle';
-    newRenderers.renderItemArrow.displayName = 'RenderItemArrow';
-    newRenderers.renderRenameInput.displayName = 'RenderRenameInput';
-    newRenderers.renderDraggingItem.displayName = 'RenderDraggingItem';
-    newRenderers.renderDraggingItemTitle.displayName = 'RenderDraggingItemTitle';
-    newRenderers.renderItemsContainer.displayName = 'RenderItemsContainer';
-    newRenderers.renderTreeContainer.displayName = 'RenderTreeContainer';
-    newRenderers.renderDragBetweenLine.displayName = 'RenderDragBetweenLine';
-    newRenderers.renderSearchInput.displayName = 'RenderSearchInput';
-    return newRenderers;
+        },
+        renderDepthOffset: 10,
+    };
 };

lib/esm/search/useSearchMatchFocus.js

 import { useTree } from '../tree/Tree';
-import { useEffect } from 'react';
 import { useGetLinearItems } from '../tree/useGetLinearItems';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
 import { defaultMatcher } from './defaultMatcher';
+import { useSideEffect } from '../useSideEffect';
 export var useSearchMatchFocus = function () {
@@ -10,3 +10,3 @@ var _a = useTreeEnvironment(), doesSearchMatchItem = _a.doesSearchMatchItem, items = _a.items, getItemTitle = _a.getItemTitle, onFocusItem = _a.onFocusItem;
     var getLinearItems = useGetLinearItems();
-    useEffect(function () {
+    useSideEffect(function () {
         if (search && search.length > 0) {
@@ -23,3 +23,3 @@ requestAnimationFrame(function () {
         }
-    }, [search]);
+    }, [doesSearchMatchItem, getItemTitle, getLinearItems, items, onFocusItem, search, treeId], [search]);
 };

lib/esm/tree/LiveDescription.js

@@ -10,3 +10,2 @@ import * as React from 'react';
 export var LiveDescription = function () {
-    var _a;
     var env = useTreeEnvironment();
@@ -16,6 +15,3 @@ var tree = useTree();
     var keys = useKeyboardBindings();
-    if (!((_a = env.showLiveDescription) !== null && _a !== void 0 ? _a : true)) {
-        return null;
-    }
-    var descriptors = useMemo(function () { var _a; return (_a = env.liveDescriptors) !== null && _a !== void 0 ? _a : defaultLiveDescriptors; }, []);
+    var descriptors = useMemo(function () { var _a; return (_a = env.liveDescriptors) !== null && _a !== void 0 ? _a : defaultLiveDescriptors; }, [env.liveDescriptors]);
     var LiveWrapper = useMemo(function () {
@@ -22,0 +18,0 @@ return function (_a) {

lib/esm/tree/resolveLiveDescriptor.js

 export var resolveLiveDescriptor = function (descriptor, environment, dnd, tree, keyboardBindings) {
     var getItemTitle = function (index) { return environment.getItemTitle(environment.items[index]); };
-    return descriptor.replace(/(\{[^\s\}]+)\}/g, function (variableNameWithBrackets) {
+    return descriptor.replace(/({[^\s}]+)}/g, function (variableNameWithBrackets) {
         var _a, _b, _c;
@@ -5,0 +5,0 @@ var variableName = variableNameWithBrackets.slice(1, -1);

lib/esm/tree/Tree.js

@@ -35,2 +35,4 @@ var __assign = (this && this.__assign) || function () {
         return function () { return environment.unregisterTree(props.treeId); };
+        // TODO should be able to remove soon, and add environment.registerTree, environment.unregisterTree as deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.treeId, props.rootItem]);
@@ -37,0 +39,0 @@ var treeInformation = useCreatedTreeInformation(props, renamingItem, search);

lib/esm/tree/TreeManager.js

@@ -22,3 +22,3 @@ var __assign = (this && this.__assign) || function () {
 import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
-import { LiveDescription } from './LiveDescription';
+import { MaybeLiveDescription } from './MaybeLiveDescription';
 export var TreeManager = function () {
@@ -44,3 +44,3 @@ var _a;
     var treeChildren = (React.createElement(React.Fragment, null,
-        React.createElement(LiveDescription, null),
+        React.createElement(MaybeLiveDescription, null),
         React.createElement(TreeItemChildren, { depth: 0, parentId: treeId }, rootChildren),
@@ -47,0 +47,0 @@ React.createElement(DragBetweenLine, { treeId: treeId }),

lib/esm/tree/useCreatedTreeInformation.js

@@ -8,11 +8,12 @@ import { useMemo } from 'react';
     var dnd = useDragAndDrop();
+    var selectedItems = (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems;
     return useMemo(function () {
-        var _a, _b, _c, _d;
+        var _a, _b;
         return ({
             isFocused: environment.activeTreeId === tree.treeId,
             isRenaming: !!renamingItem,
-            areItemsSelected: ((_c = (_b = (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0,
+            areItemsSelected: ((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) !== null && _a !== void 0 ? _a : 0) > 0,
             isSearching: search !== null,
             search: search,
-            isProgrammaticallyDragging: (_d = dnd.isProgrammaticallyDragging) !== null && _d !== void 0 ? _d : false,
+            isProgrammaticallyDragging: (_b = dnd.isProgrammaticallyDragging) !== null && _b !== void 0 ? _b : false,
             treeId: tree.treeId,
@@ -23,5 +24,6 @@ rootItem: tree.rootItem,
         environment.activeTreeId,
-        (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems,
+        tree.treeId,
+        tree.rootItem,
         renamingItem,
-        tree.treeId,
+        selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length,
         search,
@@ -28,0 +30,0 @@ dnd.isProgrammaticallyDragging,

lib/esm/tree/useMoveFocusToIndex.js

@@ -5,9 +5,10 @@ import { useGetLinearItems } from './useGetLinearItems';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
+import { useCallback } from 'react';
 export var useMoveFocusToIndex = function () {
     var treeId = useTree().treeId;
-    var environment = useTreeEnvironment();
+    var _a = useTreeEnvironment(), onFocusItem = _a.onFocusItem, items = _a.items;
     var getLinearItems = useGetLinearItems();
     var viewState = useViewState();
-    return function (computeNewIndex) {
-        var _a, _b;
+    return useCallback(function (computeNewIndex) {
+        var _a;
         var linearItems = getLinearItems();
@@ -17,6 +18,6 @@ var currentIndex = (_a = linearItems.findIndex(function (item) { return item.item === viewState.focusedItem; })) !== null && _a !== void 0 ? _a : 0;
         var newIndexBounded = Math.max(0, Math.min(linearItems.length - 1, newIndex));
-        var newFocusItem = environment.items[linearItems[newIndexBounded].item];
-        (_b = environment.onFocusItem) === null || _b === void 0 ? void 0 : _b.call(environment, newFocusItem, treeId);
+        var newFocusItem = items[linearItems[newIndexBounded].item];
+        onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(newFocusItem, treeId);
         return newFocusItem;
-    };
+    }, [onFocusItem, items, getLinearItems, treeId, viewState.focusedItem]);
 };

lib/esm/tree/useTreeKeyboardBindings.js

@@ -15,6 +15,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import { useSelectUpTo } from './useSelectUpTo';
+import { useCallback } from 'react';
 export var useTreeKeyboardBindings = function () {
     var _a;
     var environment = useTreeEnvironment();
-    var _b = useTree(), treeId = _b.treeId, setRenamingItem = _b.setRenamingItem, setSearch = _b.setSearch;
+    var _b = useTree(), treeId = _b.treeId, setRenamingItem = _b.setRenamingItem, setSearch = _b.setSearch, renamingItem = _b.renamingItem;
     var dnd = useDragAndDrop();
@@ -26,3 +27,4 @@ var viewState = useViewState();
     var isActiveTree = environment.activeTreeId === treeId;
-    useKey('arrowdown', function (e) {
+    var isRenaming = !!renamingItem;
+    useKey('arrowdown', useCallback(function (e) {
         e.preventDefault();
@@ -38,4 +40,4 @@ if (dnd.isProgrammaticallyDragging) {
         }
-    }, isActiveTree);
-    useKey('arrowup', function (e) {
+    }, [dnd, moveFocusToIndex, selectUpTo]), isActiveTree && !isRenaming);
+    useKey('arrowup', useCallback(function (e) {
         e.preventDefault();
@@ -51,12 +53,12 @@ if (dnd.isProgrammaticallyDragging) {
         }
-    }, isActiveTree);
-    useHotkey('moveFocusToFirstItem', function (e) {
+    }, [dnd, moveFocusToIndex, selectUpTo]), isActiveTree && !isRenaming);
+    useHotkey('moveFocusToFirstItem', useCallback(function (e) {
         e.preventDefault();
         moveFocusToIndex(function () { return 0; });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('moveFocusToLastItem', function (e) {
+    }, [moveFocusToIndex]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('moveFocusToLastItem', useCallback(function (e) {
         e.preventDefault();
         moveFocusToIndex(function (currentIndex, linearItems) { return linearItems.length - 1; });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useKey('arrowright', function (e) {
+    }, [moveFocusToIndex]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useKey('arrowright', useCallback(function (e) {
         e.preventDefault();
@@ -76,4 +78,4 @@ moveFocusToIndex(function (currentIndex, linearItems) {
         });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useKey('arrowleft', function (e) {
+    }, [environment, moveFocusToIndex, treeId, viewState.expandedItems]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useKey('arrowleft', useCallback(function (e) {
         e.preventDefault();
@@ -95,4 +97,4 @@ moveFocusToIndex(function (currentIndex, linearItems) {
         });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('primaryAction', function (e) {
+    }, [environment, moveFocusToIndex, treeId, viewState.expandedItems]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('primaryAction', useCallback(function (e) {
         var _a, _b;
@@ -104,4 +106,4 @@ e.preventDefault();
         }
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('toggleSelectItem', function (e) {
+    }, [environment, treeId, viewState.focusedItem]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('toggleSelectItem', useCallback(function (e) {
         var _a, _b, _c;
@@ -117,4 +119,4 @@ e.preventDefault();
         }
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('selectAll', function (e) {
+    }, [environment, treeId, viewState.focusedItem, viewState.selectedItems]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('selectAll', useCallback(function (e) {
         var _a;
@@ -126,4 +128,4 @@ e.preventDefault();
         }), treeId);
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('renameItem', function (e) {
+    }, [environment, getLinearItems, treeId]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('renameItem', useCallback(function (e) {
         var _a;
@@ -136,4 +138,4 @@ if (viewState.focusedItem) {
         }
-    }, isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true));
-    useHotkey('startSearch', function (e) {
+    }, [environment, setRenamingItem, treeId, viewState.focusedItem]), isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true) && !isRenaming);
+    useHotkey('startSearch', useCallback(function (e) {
         var _a, _b;
@@ -143,15 +145,15 @@ e.preventDefault();
         (_b = (_a = document.querySelector('[data-rct-search-input="true"]')) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('startProgrammaticDnd', function (e) {
+    }, [setSearch]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('startProgrammaticDnd', useCallback(function (e) {
         e.preventDefault();
         dnd.startProgrammaticDrag();
-    }, isActiveTree);
-    useHotkey('completeProgrammaticDnd', function (e) {
+    }, [dnd]), isActiveTree && !isRenaming);
+    useHotkey('completeProgrammaticDnd', useCallback(function (e) {
         e.preventDefault();
         dnd.completeProgrammaticDrag();
-    }, isActiveTree && dnd.isProgrammaticallyDragging);
-    useHotkey('abortProgrammaticDnd', function (e) {
+    }, [dnd]), isActiveTree && dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('abortProgrammaticDnd', useCallback(function (e) {
         e.preventDefault();
         dnd.abortProgrammaticDrag();
-    }, isActiveTree && dnd.isProgrammaticallyDragging);
+    }, [dnd]), isActiveTree && dnd.isProgrammaticallyDragging && !isRenaming);
 };

lib/esm/treeItem/TreeItemRenamingInput.js

 import { useTree } from '../tree/Tree';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useHotkey } from '../hotkeys/useHotkey';
+import { useSideEffect } from '../useSideEffect';
 export var TreeItemRenamingInput = function (props) {
@@ -28,3 +29,3 @@ var _a = useTree(), renderers = _a.renderers, treeInformation = _a.treeInformation, setRenamingItem = _a.setRenamingItem, treeId = _a.treeId;
     };
-    useEffect(function () {
+    useSideEffect(function () {
         var _a, _b, _c;
@@ -36,3 +37,3 @@ environment.setActiveTree(treeId);
         }
-    }, [inputRef.current]);
+    }, [environment, treeId], []);
     useHotkey('abortRenameItem', function () {
@@ -39,0 +40,0 @@ abort();

lib/esm/treeItem/useTreeItemRenderContext.js

@@ -26,4 +26,4 @@ var __assign = (this && this.__assign) || function () {
 export var useTreeItemRenderContext = function (item) {
-    var _a, _b, _c;
-    var _d = useTree(), treeId = _d.treeId, search = _d.search, renamingItem = _d.renamingItem;
+    var _a, _b, _c, _d;
+    var _e = useTree(), treeId = _e.treeId, search = _e.search, renamingItem = _e.renamingItem;
     var environment = useTreeEnvironment();
@@ -39,6 +39,9 @@ var interactionManager = useInteractionManager();
             : ((_a = environment.doesSearchMatchItem) !== null && _a !== void 0 ? _a : defaultMatcher)(search, item, itemTitle);
-    }, [search, itemTitle]);
+    }, [search, item, itemTitle, environment.doesSearchMatchItem]);
+    var isSelected = item && ((_b = (_a = environment.viewState[treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) === null || _b === void 0 ? void 0 : _b.includes(item.index));
+    var isExpanded = item && ((_d = (_c = environment.viewState[treeId]) === null || _c === void 0 ? void 0 : _c.expandedItems) === null || _d === void 0 ? void 0 : _d.includes(item.index));
+    var isRenaming = item && renamingItem === item.index;
     return useMemo(function () {
         var _a, _b;
-        var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!item) {
@@ -73,8 +76,8 @@ return undefined;
             toggleExpandedState: function () {
-                var _a, _b, _c;
-                if ((_a = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _a === void 0 ? void 0 : _a.includes(item.index)) {
-                    (_b = environment.onCollapseItem) === null || _b === void 0 ? void 0 : _b.call(environment, item, treeId);
+                var _a, _b;
+                if (isExpanded) {
+                    (_a = environment.onCollapseItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
                 }
                 else {
-                    (_c = environment.onExpandItem) === null || _c === void 0 ? void 0 : _c.call(environment, item, treeId);
+                    (_b = environment.onExpandItem) === null || _b === void 0 ? void 0 : _b.call(environment, item, treeId);
                 }
@@ -118,6 +121,6 @@ },
         var renderFlags = {
-            isSelected: (_m = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _m === void 0 ? void 0 : _m.includes(item.index),
-            isExpanded: (_o = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _o === void 0 ? void 0 : _o.includes(item.index),
+            isSelected: isSelected,
+            isExpanded: isExpanded,
             isFocused: (viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) === item.index,
-            isRenaming: renamingItem === item.index,
+            isRenaming: isRenaming,
             isDraggingOver: dnd.draggingPosition &&
@@ -162,13 +165,18 @@ dnd.draggingPosition.targetType === 'item' &&
         };
-        return __assign(__assign(__assign({}, actions), renderFlags), { interactiveElementProps: interactiveElementProps, itemContainerWithChildrenProps: itemContainerWithChildrenProps, itemContainerWithoutChildrenProps: itemContainerWithoutChildrenProps, arrowProps: arrowProps });
+        return __assign(__assign(__assign({}, actions), renderFlags), { interactiveElementProps: interactiveElementProps,
+            itemContainerWithChildrenProps: itemContainerWithChildrenProps,
+            itemContainerWithoutChildrenProps: itemContainerWithoutChildrenProps,
+            arrowProps: arrowProps });
     }, [
+        item,
         environment,
-        (_a = environment.viewState[treeId]) === null || _a === void 0 ? void 0 : _a.expandedItems,
-        (_b = environment.viewState[treeId]) === null || _b === void 0 ? void 0 : _b.selectedItems,
-        renamingItem && renamingItem === (item === null || item === void 0 ? void 0 : item.index),
-        (_c = item === null || item === void 0 ? void 0 : item.index) !== null && _c !== void 0 ? _c : '___no_item',
         treeId,
+        dnd,
+        isSelected,
+        isExpanded,
+        isRenaming,
         isSearchMatching,
-        dnd.draggingPosition,
+        interactionManager,
+        selectUpTo,
     ]);
 };

lib/esm/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -90,3 +90,3 @@ var __assign = (this && this.__assign) || function () {
         return dispose;
-    }, [dataProvider]);
+    }, [dataProvider, writeItems]);
     return (React.createElement(ControlledTreeEnvironment, __assign({}, props, { ref: ref, viewState: viewState, items: currentItems, onExpandItem: function (item, treeId) {
@@ -93,0 +93,0 @@ var _a;

lib/esm/useHtmlElementEventListener.js

@@ -14,3 +14,4 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, __spreadArray([element, listener, type], deps));
 };

lib/esnext/controlledEnvironment/ControlledTreeEnvironment.js

@@ -13,8 +13,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
-import { useContext, useState } from 'react';
-import { createDefaultRenderers } from '../renderers/createDefaultRenderers';
-import { scrollIntoView } from '../tree/scrollIntoView';
+import { useContext } from 'react';
 import { InteractionManagerProvider } from './InteractionManagerProvider';
 import { DragAndDropProvider } from './DragAndDropProvider';
 import { EnvironmentActionsProvider } from '../environmentActions/EnvironmentActionsProvider';
+import { useControlledTreeEnvironmentProps } from './useControlledTreeEnvironmentProps';
 var TreeEnvironmentContext = React.createContext(null);
@@ -24,8 +23,7 @@ export var useTreeEnvironment = function () { return useContext(TreeEnvironmentContext); };
     var _a, _b, _c;
-    var _d = useState({}), trees = _d[0], setTrees = _d[1];
-    var _e = useState(), activeTreeId = _e[0], setActiveTreeId = _e[1];
+    var environmentContextProps = useControlledTreeEnvironmentProps(props);
     var viewState = props.viewState;
     // Make sure that every tree view state has a focused item
-    for (var _i = 0, _f = Object.keys(trees); _i < _f.length; _i++) {
-        var treeId = _f[_i];
+    for (var _i = 0, _d = Object.keys(environmentContextProps.trees); _i < _d.length; _i++) {
+        var treeId = _d[_i];
         // TODO if the focus item is dragged out of the tree and is not within the expanded items
@@ -35,59 +33,6 @@ // TODO of that tree, the tree does not show any focus item anymore.
         // information when the viewstate changes
-        if (!((_a = viewState[treeId]) === null || _a === void 0 ? void 0 : _a.focusedItem) && trees[treeId]) {
-            viewState[treeId] = __assign(__assign({}, viewState[treeId]), { focusedItem: (_c = (_b = props.items[trees[treeId].rootItem]) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c[0] });
+        if (!((_a = viewState[treeId]) === null || _a === void 0 ? void 0 : _a.focusedItem) && environmentContextProps.trees[treeId]) {
+            viewState[treeId] = __assign(__assign({}, viewState[treeId]), { focusedItem: (_c = (_b = props.items[environmentContextProps.trees[treeId].rootItem]) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c[0] });
         }
     }
-    var environmentContextProps = __assign(__assign(__assign({}, createDefaultRenderers(props)), props), { onFocusItem: function (item, treeId) {
-            var _a, _b, _c, _d, _e, _f;
-            (_a = props.onFocusItem) === null || _a === void 0 ? void 0 : _a.call(props, item, treeId);
-            var newItem = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-id=\"" + item.index + "\"]");
-            if ((_b = props.autoFocus) !== null && _b !== void 0 ? _b : true) {
-                if (((_d = (_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.attributes.getNamedItem('data-rct-search-input')) === null || _d === void 0 ? void 0 : _d.value) !== 'true') {
-                    // Move DOM focus to item if the current focus is not on the search input
-                    (_f = (_e = newItem) === null || _e === void 0 ? void 0 : _e.focus) === null || _f === void 0 ? void 0 : _f.call(_e);
-                }
-                else {
-                    // Otherwise just manually scroll into view
-                    scrollIntoView(newItem);
-                }
-            }
-        }, registerTree: function (tree) {
-            var _a;
-            setTrees(function (trees) {
-                var _a;
-                return (__assign(__assign({}, trees), (_a = {}, _a[tree.treeId] = tree, _a)));
-            });
-            (_a = props.onRegisterTree) === null || _a === void 0 ? void 0 : _a.call(props, tree);
-        }, unregisterTree: function (treeId) {
-            var _a;
-            (_a = props.onUnregisterTree) === null || _a === void 0 ? void 0 : _a.call(props, trees[treeId]);
-            delete trees[treeId];
-            setTrees(trees);
-        }, setActiveTree: function (treeIdOrSetStateFunction, autoFocus) {
-            if (autoFocus === void 0) { autoFocus = true; }
-            var focusTree = function (treeId) {
-                var _a, _b, _c, _d;
-                if (autoFocus &&
-                    ((_a = props.autoFocus) !== null && _a !== void 0 ? _a : true) &&
-                    treeId &&
-                    !((_b = document.querySelector("[data-rct-tree=\"" + treeId + "\"]")) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement))) {
-                    var focusItem = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-focus=\"true\"]");
-                    (_d = (_c = focusItem) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
-                }
-            };
-            if (typeof treeIdOrSetStateFunction === 'function') {
-                setActiveTreeId(function (oldValue) {
-                    var treeId = treeIdOrSetStateFunction(oldValue);
-                    if (treeId !== oldValue) {
-                        focusTree(treeId);
-                    }
-                    return treeId;
-                });
-            }
-            else {
-                var treeId = treeIdOrSetStateFunction;
-                setActiveTreeId(treeId);
-                focusTree(treeId);
-            }
-        }, treeIds: Object.keys(trees), trees: trees, activeTreeId: activeTreeId });
     return (React.createElement(TreeEnvironmentContext.Provider, { value: environmentContextProps },
@@ -94,0 +39,0 @@ React.createElement(InteractionManagerProvider, null,

lib/esnext/controlledEnvironment/DragAndDropProvider.js

@@ -13,3 +13,3 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTreeEnvironment } from './ControlledTreeEnvironment';
@@ -20,2 +20,3 @@ import { getItemsLinearly } from '../tree/getItemsLinearly';
 import { useGetViableDragPositions } from './useGetViableDragPositions';
+import { useSideEffect } from '../useSideEffect';
 var DragAndDropContext = React.createContext(null);
@@ -41,3 +42,4 @@ export var useDragAndDrop = function () { return React.useContext(DragAndDropContext); };
     var _h = useState('_nodrag'), dragCode = _h[0], setDragCode = _h[1];
-    var resetProgrammaticDragIndexForCurrentTree = function (viableDragPositions, linearItems, draggingItems) {
+    var getViableDragPositions = useGetViableDragPositions();
+    var resetProgrammaticDragIndexForCurrentTree = useCallback(function (viableDragPositions, linearItems, draggingItems) {
         var _a;
@@ -68,4 +70,4 @@ if (environment.activeTreeId &&
         }
-    };
-    var resetState = function () {
+    }, [environment.activeTreeId, environment.items, environment.viewState, getViableDragPositions]);
+    var resetState = useCallback(function () {
         setIsProgrammaticallyDragging(false);
@@ -79,4 +81,4 @@ setItemHeight(4);
         setDragCode('_nodrag');
-    };
-    useEffect(function () {
+    }, []);
+    useSideEffect(function () {
         if (environment.activeTreeId &&
@@ -87,8 +89,14 @@ linearItems[environment.activeTreeId] &&
         }
-    }, [environment.activeTreeId]);
-    useEffect(function () {
+    }, [
+        draggingItems,
+        environment.activeTreeId,
+        linearItems,
+        resetProgrammaticDragIndexForCurrentTree,
+        viableDragPositions,
+    ], [environment.activeTreeId]);
+    useSideEffect(function () {
         if (isProgrammaticallyDragging && environment.activeTreeId) {
             setDraggingPosition(viableDragPositions[environment.activeTreeId][programmaticDragIndex]);
         }
-    }, [programmaticDragIndex, environment.activeTreeId]);
+    }, [programmaticDragIndex, environment.activeTreeId, isProgrammaticallyDragging, viableDragPositions], [programmaticDragIndex, environment.activeTreeId]);
     var canDropAt = useCanDropAt();
@@ -108,3 +116,2 @@ var performDrag = function (draggingPosition) {
     var onDragOverTreeHandler = useOnDragOverTreeHandler(dragCode, setDragCode, itemHeight, linearItems, setDraggingPosition, performDrag);
-    var getViableDragPositions = useGetViableDragPositions();
     var onDropHandler = useMemo(function () { return function () {
@@ -119,62 +126,72 @@ if (draggingItems && draggingPosition && environment.onDrop) {
         }
-    }; }, [draggingPosition, draggingItems, environment.onDrop, environment.onFocusItem]);
-    useEffect(function () {
-        window.addEventListener('dragend', onDropHandler);
-        return function () { return window.removeEventListener('dragend', onDropHandler); };
-    }, [onDropHandler]);
-    var dnd = {
-        onStartDraggingItems: function (items, treeId) {
-            var _a, _b;
-            var treeLinearItems = buildMapForTrees(environment.treeIds, function (treeId) { var _a; return getItemsLinearly(environment.trees[treeId].rootItem, (_a = environment.viewState[treeId]) !== null && _a !== void 0 ? _a : {}, environment.items); });
-            var treeViableDragPositions = buildMapForTrees(environment.treeIds, function (treeId) {
-                return getViableDragPositions(treeId, items, treeLinearItems[treeId]);
-            });
-            // TODO what if trees have different heights and drag target changes?
-            var height = (_b = (_a = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-container=\"true\"]")) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 5;
-            setItemHeight(height);
-            setDraggingItems(items);
-            setLinearItems(treeLinearItems);
-            setViableDragPositions(treeViableDragPositions);
-            if (environment.activeTreeId) {
-                resetProgrammaticDragIndexForCurrentTree(treeViableDragPositions[environment.activeTreeId], treeLinearItems[environment.activeTreeId], items);
+    }; }, [draggingItems, draggingPosition, environment, resetState]);
+    var onStartDraggingItems = useCallback(function (items, treeId) {
+        var _a, _b;
+        var treeLinearItems = buildMapForTrees(environment.treeIds, function (treeId) { var _a; return getItemsLinearly(environment.trees[treeId].rootItem, (_a = environment.viewState[treeId]) !== null && _a !== void 0 ? _a : {}, environment.items); });
+        var treeViableDragPositions = buildMapForTrees(environment.treeIds, function (treeId) {
+            return getViableDragPositions(treeId, items, treeLinearItems[treeId]);
+        });
+        // TODO what if trees have different heights and drag target changes?
+        var height = (_b = (_a = document.querySelector("[data-rct-tree=\"" + treeId + "\"] [data-rct-item-container=\"true\"]")) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 5;
+        setItemHeight(height);
+        setDraggingItems(items);
+        setLinearItems(treeLinearItems);
+        setViableDragPositions(treeViableDragPositions);
+        if (environment.activeTreeId) {
+            resetProgrammaticDragIndexForCurrentTree(treeViableDragPositions[environment.activeTreeId], treeLinearItems[environment.activeTreeId], items);
+        }
+    }, [
+        environment.activeTreeId,
+        environment.items,
+        environment.treeIds,
+        environment.trees,
+        environment.viewState,
+        getViableDragPositions,
+        resetProgrammaticDragIndexForCurrentTree,
+    ]);
+    var startProgrammaticDrag = useCallback(function () {
+        var _a, _b, _c;
+        if (!environment.canDragAndDrop) {
+            return;
+        }
+        if (environment.activeTreeId) {
+            var draggingItems_1 = (_b = (_a = environment.viewState[environment.activeTreeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) !== null && _b !== void 0 ? _b : [(_c = environment.viewState[environment.activeTreeId]) === null || _c === void 0 ? void 0 : _c.focusedItem];
+            if (draggingItems_1.length === 0 || draggingItems_1[0] === undefined) {
+                return;
             }
-        },
-        startProgrammaticDrag: function () {
-            var _a, _b, _c;
-            if (!environment.canDragAndDrop) {
+            var resolvedDraggingItems = draggingItems_1.map(function (id) { return environment.items[id]; });
+            if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
                 return;
             }
-            if (environment.activeTreeId) {
-                var draggingItems_1 = (_b = (_a = environment.viewState[environment.activeTreeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) !== null && _b !== void 0 ? _b : [(_c = environment.viewState[environment.activeTreeId]) === null || _c === void 0 ? void 0 : _c.focusedItem];
-                if (draggingItems_1.length === 0 || draggingItems_1[0] === undefined) {
-                    return;
-                }
-                var resolvedDraggingItems = draggingItems_1.map(function (id) { return environment.items[id]; });
-                if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
-                    return;
-                }
-                dnd.onStartDraggingItems(resolvedDraggingItems, environment.activeTreeId);
-                setTimeout(function () {
-                    setIsProgrammaticallyDragging(true);
-                    // Needs to be done after onStartDraggingItems was called, so that viableDragPositions is populated
-                });
-            }
-        },
-        abortProgrammaticDrag: function () {
-            resetState();
-        },
-        completeProgrammaticDrag: function () {
-            onDropHandler();
-            resetState();
-        },
-        programmaticDragUp: function () {
-            setProgrammaticDragIndex(function (oldIndex) { return Math.max(0, oldIndex - 1); });
-        },
-        programmaticDragDown: function () {
-            if (environment.activeTreeId) {
-                setProgrammaticDragIndex(function (oldIndex) {
-                    return Math.min(viableDragPositions[environment.activeTreeId].length, oldIndex + 1);
-                });
-            }
-        },
+            onStartDraggingItems(resolvedDraggingItems, environment.activeTreeId);
+            setTimeout(function () {
+                setIsProgrammaticallyDragging(true);
+                // Needs to be done after onStartDraggingItems was called, so that viableDragPositions is populated
+            });
+        }
+    }, [onStartDraggingItems, environment]);
+    var abortProgrammaticDrag = useCallback(function () {
+        resetState();
+    }, [resetState]);
+    var completeProgrammaticDrag = useCallback(function () {
+        onDropHandler();
+        resetState();
+    }, [onDropHandler, resetState]);
+    var programmaticDragUp = useCallback(function () {
+        setProgrammaticDragIndex(function (oldIndex) { return Math.max(0, oldIndex - 1); });
+    }, []);
+    var programmaticDragDown = useCallback(function () {
+        if (environment.activeTreeId) {
+            setProgrammaticDragIndex(function (oldIndex) {
+                return Math.min(viableDragPositions[environment.activeTreeId].length, oldIndex + 1);
+            });
+        }
+    }, [environment.activeTreeId, viableDragPositions]);
+    var dnd = {
+        onStartDraggingItems: onStartDraggingItems,
+        startProgrammaticDrag: startProgrammaticDrag,
+        abortProgrammaticDrag: abortProgrammaticDrag,
+        completeProgrammaticDrag: completeProgrammaticDrag,
+        programmaticDragUp: programmaticDragUp,
+        programmaticDragDown: programmaticDragDown,
         draggingItems: draggingItems,
@@ -187,3 +204,7 @@ draggingPosition: draggingPosition,
     };
+    useEffect(function () {
+        window.addEventListener('dragend', onDropHandler);
+        return function () { return window.removeEventListener('dragend', onDropHandler); };
+    }, [onDropHandler]);
     return React.createElement(DragAndDropContext.Provider, { value: dnd }, props.children);
 };

lib/esnext/controlledEnvironment/InteractionManagerProvider.js

@@ -23,4 +23,5 @@ import * as React from 'react';
         return buildInteractionMode((_a = defaultInteractionMode) !== null && _a !== void 0 ? _a : InteractionMode.ClickItemToExpand, environment);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // TODO make sure that environment does not need to be refreshed
     return (React.createElement(InteractionManagerContext.Provider, { value: interactionManager }, props.children));
 };

lib/esnext/hotkeys/useHotkey.js

@@ -8,3 +8,2 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import { useMemo, useRef } from 'react';
-import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
 import { useKeyboardBindings } from './useKeyboardBindings';
@@ -14,6 +13,5 @@ var elementsThatCanTakeText = ['input', 'textarea'];
     if (activatableWhileFocusingInput === void 0) { activatableWhileFocusingInput = false; }
-    var environment = useTreeEnvironment();
     var pressedKeys = useRef([]);
     var keyboardBindings = useKeyboardBindings();
-    var possibleCombinations = useMemo(function () { return keyboardBindings[combinationName].map(function (combination) { return combination.split('+'); }); }, [combinationName, environment.keyboardBindings]);
+    var possibleCombinations = useMemo(function () { return keyboardBindings[combinationName].map(function (combination) { return combination.split('+'); }); }, [combinationName, keyboardBindings]);
     useHtmlElementEventListener(document, 'keydown', function (e) {
@@ -20,0 +18,0 @@ if (active === false) {

lib/esnext/renderers/createDefaultRenderers.d.ts

@@ -1,2 +0,2 @@
-import { AllTreeRenderProps, TreeRenderProps } from '../types';
-export declare const createDefaultRenderers: (renderers: TreeRenderProps) => AllTreeRenderProps;
+import { AllTreeRenderProps } from '../types';
+export declare const createDefaultRenderers: (renderDepthOffset: number) => AllTreeRenderProps;

lib/esnext/renderers/createDefaultRenderers.js

@@ -20,4 +20,5 @@ var __assign = (this && this.__assign) || function () {
 };
-export var createDefaultRenderers = function (renderers) {
-    var newRenderers = __assign({ renderItemTitle: function (_a) {
+export var createDefaultRenderers = function (renderDepthOffset) {
+    return {
+        renderItemTitle: function (_a) {
             var title = _a.title, context = _a.context, info = _a.info;
@@ -34,3 +35,4 @@ if (!info.isSearching || !context.isSearchMatching) {
             }
-        }, renderItemArrow: function (_a) {
+        },
+        renderItemArrow: function (_a) {
             var item = _a.item, context = _a.context;
@@ -46,13 +48,15 @@ // Icons from https://blueprintjs.com/docs/#icons
                             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.71,7.29l-4-4C6.53,3.11,6.28,3,6,3C5.45,3,5,3.45,5,4\n                      c0,0.28,0.11,0.53,0.29,0.71L8.59,8l-3.29,3.29C5.11,11.47,5,11.72,5,12c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l4-4\n                      C10.89,8.53,11,8.28,11,8C11,7.72,10.89,7.47,10.71,7.29z", className: "rct-tree-item-arrow-path" }))))))));
-        }, renderItem: function (_a) {
-            var _b;
+        },
+        renderItem: function (_a) {
             var item = _a.item, depth = _a.depth, children = _a.children, title = _a.title, context = _a.context, arrow = _a.arrow;
             var InteractiveComponent = context.isRenaming ? 'div' : 'button';
+            var type = context.isRenaming ? undefined : 'button';
             // TODO have only root li component create all the classes
             return (React.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { className: cx('rct-tree-item-li', item.hasChildren && 'rct-tree-item-li-hasChildren', context.isSelected && 'rct-tree-item-li-selected', context.isExpanded && 'rct-tree-item-li-expanded', context.isFocused && 'rct-tree-item-li-focused', context.isDraggingOver && 'rct-tree-item-li-dragging-over', context.isSearchMatching && 'rct-tree-item-li-search-match') }),
-                React.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { paddingLeft: (depth + 1) * ((_b = renderers.renderDepthOffset) !== null && _b !== void 0 ? _b : 10) + "px" }, className: cx('rct-tree-item-title-container', item.hasChildren && 'rct-tree-item-title-container-hasChildren', context.isSelected && 'rct-tree-item-title-container-selected', context.isExpanded && 'rct-tree-item-title-container-expanded', context.isFocused && 'rct-tree-item-title-container-focused', context.isDraggingOver && 'rct-tree-item-title-container-dragging-over', context.isSearchMatching && 'rct-tree-item-title-container-search-match') }),
+                React.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { paddingLeft: (depth + 1) * renderDepthOffset + "px" }, className: cx('rct-tree-item-title-container', item.hasChildren && 'rct-tree-item-title-container-hasChildren', context.isSelected && 'rct-tree-item-title-container-selected', context.isExpanded && 'rct-tree-item-title-container-expanded', context.isFocused && 'rct-tree-item-title-container-focused', context.isDraggingOver && 'rct-tree-item-title-container-dragging-over', context.isSearchMatching && 'rct-tree-item-title-container-search-match') }),
                     arrow,
-                    React.createElement(InteractiveComponent, __assign({}, context.interactiveElementProps, { className: cx('rct-tree-item-button', item.hasChildren && 'rct-tree-item-button-hasChildren', context.isSelected && 'rct-tree-item-button-selected', context.isExpanded && 'rct-tree-item-button-expanded', context.isFocused && 'rct-tree-item-button-focused', context.isDraggingOver && 'rct-tree-item-button-dragging-over', context.isSearchMatching && 'rct-tree-item-button-search-match') }), title)),
+                    React.createElement(InteractiveComponent, __assign({ type: type }, context.interactiveElementProps, { className: cx('rct-tree-item-button', item.hasChildren && 'rct-tree-item-button-hasChildren', context.isSelected && 'rct-tree-item-button-selected', context.isExpanded && 'rct-tree-item-button-expanded', context.isFocused && 'rct-tree-item-button-focused', context.isDraggingOver && 'rct-tree-item-button-dragging-over', context.isSearchMatching && 'rct-tree-item-button-search-match') }), title)),
                 children));
-        }, renderRenameInput: function (_a) {
+        },
+        renderRenameInput: function (_a) {
             var inputProps = _a.inputProps, inputRef = _a.inputRef, submitButtonProps = _a.submitButtonProps, submitButtonRef = _a.submitButtonRef, formProps = _a.formProps;
@@ -62,17 +66,21 @@ return (React.createElement("form", __assign({}, formProps, { className: "rct-tree-item-renaming-form" }),
                 React.createElement("input", __assign({}, submitButtonProps, { ref: submitButtonRef, type: "submit", className: "rct-tree-item-renaming-submit-button", value: "\uD83D\uDDF8" }))));
-        }, renderDraggingItem: function () {
+        },
+        renderDraggingItem: function () {
             return React.createElement("div", null);
-        }, renderDraggingItemTitle: function () {
+        },
+        renderDraggingItemTitle: function () {
             return React.createElement("div", null);
-        }, renderTreeContainer: function (_a) {
+        },
+        renderTreeContainer: function (_a) {
             var children = _a.children, containerProps = _a.containerProps, info = _a.info;
             return (React.createElement("div", { className: cx('rct-tree-root', info.isFocused && 'rct-tree-root-focus', info.isRenaming && 'rct-tree-root-renaming', info.areItemsSelected && 'rct-tree-root-itemsselected') },
                 React.createElement("div", __assign({}, containerProps), children)));
-        }, renderItemsContainer: function (_a) {
+        },
+        renderItemsContainer: function (_a) {
             var children = _a.children, containerProps = _a.containerProps;
             return (React.createElement("ul", __assign({}, containerProps, { className: "rct-tree-items-container" }), children));
-        }, renderDragBetweenLine: function (_a) {
-            var _b;
+        },
+        renderDragBetweenLine: function (_a) {
             var draggingPosition = _a.draggingPosition, lineProps = _a.lineProps;
-            return (React.createElement("div", __assign({}, lineProps, { style: { left: draggingPosition.depth * ((_b = renderers.renderDepthOffset) !== null && _b !== void 0 ? _b : 10) + "px" }, className: cx('rct-tree-drag-between-line', draggingPosition.targetType === 'between-items' &&
+            return (React.createElement("div", __assign({}, lineProps, { style: { left: draggingPosition.depth * renderDepthOffset + "px" }, className: cx('rct-tree-drag-between-line', draggingPosition.targetType === 'between-items' &&
                     draggingPosition.linePosition === 'top' &&
@@ -82,7 +90,9 @@ 'rct-tree-drag-between-line-top', draggingPosition.targetType === 'between-items' &&
                     'rct-tree-drag-between-line-bottom') })));
-        }, renderSearchInput: function (_a) {
+        },
+        renderSearchInput: function (_a) {
             var inputProps = _a.inputProps;
             return (React.createElement("div", { className: cx('rct-tree-search-input-container') },
                 React.createElement("input", __assign({}, inputProps, { className: cx('rct-tree-search-input') }))));
-        }, renderLiveDescriptorContainer: function (_a) {
+        },
+        renderLiveDescriptorContainer: function (_a) {
             var tree = _a.tree, children = _a.children;
@@ -98,14 +108,5 @@ return (React.createElement("div", { id: "rct-livedescription-" + tree.treeId, style: {
                 } }, children));
-        }, renderDepthOffset: 4 }, renderers);
-    newRenderers.renderItem.displayName = 'RenderItem';
-    newRenderers.renderItemTitle.displayName = 'RenderItemTitle';
-    newRenderers.renderItemArrow.displayName = 'RenderItemArrow';
-    newRenderers.renderRenameInput.displayName = 'RenderRenameInput';
-    newRenderers.renderDraggingItem.displayName = 'RenderDraggingItem';
-    newRenderers.renderDraggingItemTitle.displayName = 'RenderDraggingItemTitle';
-    newRenderers.renderItemsContainer.displayName = 'RenderItemsContainer';
-    newRenderers.renderTreeContainer.displayName = 'RenderTreeContainer';
-    newRenderers.renderDragBetweenLine.displayName = 'RenderDragBetweenLine';
-    newRenderers.renderSearchInput.displayName = 'RenderSearchInput';
-    return newRenderers;
+        },
+        renderDepthOffset: 10,
+    };
 };

lib/esnext/search/useSearchMatchFocus.js

 import { useTree } from '../tree/Tree';
-import { useEffect } from 'react';
 import { useGetLinearItems } from '../tree/useGetLinearItems';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
 import { defaultMatcher } from './defaultMatcher';
+import { useSideEffect } from '../useSideEffect';
 export var useSearchMatchFocus = function () {
@@ -10,3 +10,3 @@ var _a = useTreeEnvironment(), doesSearchMatchItem = _a.doesSearchMatchItem, items = _a.items, getItemTitle = _a.getItemTitle, onFocusItem = _a.onFocusItem;
     var getLinearItems = useGetLinearItems();
-    useEffect(function () {
+    useSideEffect(function () {
         if (search && search.length > 0) {
@@ -23,3 +23,3 @@ requestAnimationFrame(function () {
         }
-    }, [search]);
+    }, [doesSearchMatchItem, getItemTitle, getLinearItems, items, onFocusItem, search, treeId], [search]);
 };

lib/esnext/tree/LiveDescription.js

@@ -10,3 +10,2 @@ import * as React from 'react';
 export var LiveDescription = function () {
-    var _a;
     var env = useTreeEnvironment();
@@ -16,6 +15,3 @@ var tree = useTree();
     var keys = useKeyboardBindings();
-    if (!((_a = env.showLiveDescription) !== null && _a !== void 0 ? _a : true)) {
-        return null;
-    }
-    var descriptors = useMemo(function () { var _a; return (_a = env.liveDescriptors) !== null && _a !== void 0 ? _a : defaultLiveDescriptors; }, []);
+    var descriptors = useMemo(function () { var _a; return (_a = env.liveDescriptors) !== null && _a !== void 0 ? _a : defaultLiveDescriptors; }, [env.liveDescriptors]);
     var LiveWrapper = useMemo(function () {
@@ -22,0 +18,0 @@ return function (_a) {

lib/esnext/tree/resolveLiveDescriptor.js

 export var resolveLiveDescriptor = function (descriptor, environment, dnd, tree, keyboardBindings) {
     var getItemTitle = function (index) { return environment.getItemTitle(environment.items[index]); };
-    return descriptor.replace(/(\{[^\s\}]+)\}/g, function (variableNameWithBrackets) {
+    return descriptor.replace(/({[^\s}]+)}/g, function (variableNameWithBrackets) {
         var _a, _b, _c;
@@ -5,0 +5,0 @@ var variableName = variableNameWithBrackets.slice(1, -1);

lib/esnext/tree/Tree.js

@@ -35,2 +35,4 @@ var __assign = (this && this.__assign) || function () {
         return function () { return environment.unregisterTree(props.treeId); };
+        // TODO should be able to remove soon, and add environment.registerTree, environment.unregisterTree as deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.treeId, props.rootItem]);
@@ -37,0 +39,0 @@ var treeInformation = useCreatedTreeInformation(props, renamingItem, search);

lib/esnext/tree/TreeManager.js

@@ -22,3 +22,3 @@ var __assign = (this && this.__assign) || function () {
 import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
-import { LiveDescription } from './LiveDescription';
+import { MaybeLiveDescription } from './MaybeLiveDescription';
 export var TreeManager = function () {
@@ -44,3 +44,3 @@ var _a;
     var treeChildren = (React.createElement(React.Fragment, null,
-        React.createElement(LiveDescription, null),
+        React.createElement(MaybeLiveDescription, null),
         React.createElement(TreeItemChildren, { depth: 0, parentId: treeId }, rootChildren),
@@ -47,0 +47,0 @@ React.createElement(DragBetweenLine, { treeId: treeId }),

lib/esnext/tree/useCreatedTreeInformation.js

@@ -8,11 +8,12 @@ import { useMemo } from 'react';
     var dnd = useDragAndDrop();
+    var selectedItems = (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems;
     return useMemo(function () {
-        var _a, _b, _c, _d;
+        var _a, _b;
         return ({
             isFocused: environment.activeTreeId === tree.treeId,
             isRenaming: !!renamingItem,
-            areItemsSelected: ((_c = (_b = (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0,
+            areItemsSelected: ((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) !== null && _a !== void 0 ? _a : 0) > 0,
             isSearching: search !== null,
             search: search,
-            isProgrammaticallyDragging: (_d = dnd.isProgrammaticallyDragging) !== null && _d !== void 0 ? _d : false,
+            isProgrammaticallyDragging: (_b = dnd.isProgrammaticallyDragging) !== null && _b !== void 0 ? _b : false,
             treeId: tree.treeId,
@@ -23,5 +24,6 @@ rootItem: tree.rootItem,
         environment.activeTreeId,
-        (_a = environment.viewState[tree.treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems,
+        tree.treeId,
+        tree.rootItem,
         renamingItem,
-        tree.treeId,
+        selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length,
         search,
@@ -28,0 +30,0 @@ dnd.isProgrammaticallyDragging,

lib/esnext/tree/useMoveFocusToIndex.js

@@ -5,9 +5,10 @@ import { useGetLinearItems } from './useGetLinearItems';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
+import { useCallback } from 'react';
 export var useMoveFocusToIndex = function () {
     var treeId = useTree().treeId;
-    var environment = useTreeEnvironment();
+    var _a = useTreeEnvironment(), onFocusItem = _a.onFocusItem, items = _a.items;
     var getLinearItems = useGetLinearItems();
     var viewState = useViewState();
-    return function (computeNewIndex) {
-        var _a, _b;
+    return useCallback(function (computeNewIndex) {
+        var _a;
         var linearItems = getLinearItems();
@@ -17,6 +18,6 @@ var currentIndex = (_a = linearItems.findIndex(function (item) { return item.item === viewState.focusedItem; })) !== null && _a !== void 0 ? _a : 0;
         var newIndexBounded = Math.max(0, Math.min(linearItems.length - 1, newIndex));
-        var newFocusItem = environment.items[linearItems[newIndexBounded].item];
-        (_b = environment.onFocusItem) === null || _b === void 0 ? void 0 : _b.call(environment, newFocusItem, treeId);
+        var newFocusItem = items[linearItems[newIndexBounded].item];
+        onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(newFocusItem, treeId);
         return newFocusItem;
-    };
+    }, [onFocusItem, items, getLinearItems, treeId, viewState.focusedItem]);
 };

lib/esnext/tree/useTreeKeyboardBindings.js

@@ -15,6 +15,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import { useSelectUpTo } from './useSelectUpTo';
+import { useCallback } from 'react';
 export var useTreeKeyboardBindings = function () {
     var _a;
     var environment = useTreeEnvironment();
-    var _b = useTree(), treeId = _b.treeId, setRenamingItem = _b.setRenamingItem, setSearch = _b.setSearch;
+    var _b = useTree(), treeId = _b.treeId, setRenamingItem = _b.setRenamingItem, setSearch = _b.setSearch, renamingItem = _b.renamingItem;
     var dnd = useDragAndDrop();
@@ -26,3 +27,4 @@ var viewState = useViewState();
     var isActiveTree = environment.activeTreeId === treeId;
-    useKey('arrowdown', function (e) {
+    var isRenaming = !!renamingItem;
+    useKey('arrowdown', useCallback(function (e) {
         e.preventDefault();
@@ -38,4 +40,4 @@ if (dnd.isProgrammaticallyDragging) {
         }
-    }, isActiveTree);
-    useKey('arrowup', function (e) {
+    }, [dnd, moveFocusToIndex, selectUpTo]), isActiveTree && !isRenaming);
+    useKey('arrowup', useCallback(function (e) {
         e.preventDefault();
@@ -51,12 +53,12 @@ if (dnd.isProgrammaticallyDragging) {
         }
-    }, isActiveTree);
-    useHotkey('moveFocusToFirstItem', function (e) {
+    }, [dnd, moveFocusToIndex, selectUpTo]), isActiveTree && !isRenaming);
+    useHotkey('moveFocusToFirstItem', useCallback(function (e) {
         e.preventDefault();
         moveFocusToIndex(function () { return 0; });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('moveFocusToLastItem', function (e) {
+    }, [moveFocusToIndex]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('moveFocusToLastItem', useCallback(function (e) {
         e.preventDefault();
         moveFocusToIndex(function (currentIndex, linearItems) { return linearItems.length - 1; });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useKey('arrowright', function (e) {
+    }, [moveFocusToIndex]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useKey('arrowright', useCallback(function (e) {
         e.preventDefault();
@@ -76,4 +78,4 @@ moveFocusToIndex(function (currentIndex, linearItems) {
         });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useKey('arrowleft', function (e) {
+    }, [environment, moveFocusToIndex, treeId, viewState.expandedItems]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useKey('arrowleft', useCallback(function (e) {
         e.preventDefault();
@@ -95,4 +97,4 @@ moveFocusToIndex(function (currentIndex, linearItems) {
         });
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('primaryAction', function (e) {
+    }, [environment, moveFocusToIndex, treeId, viewState.expandedItems]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('primaryAction', useCallback(function (e) {
         var _a, _b;
@@ -104,4 +106,4 @@ e.preventDefault();
         }
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('toggleSelectItem', function (e) {
+    }, [environment, treeId, viewState.focusedItem]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('toggleSelectItem', useCallback(function (e) {
         var _a, _b, _c;
@@ -117,4 +119,4 @@ e.preventDefault();
         }
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('selectAll', function (e) {
+    }, [environment, treeId, viewState.focusedItem, viewState.selectedItems]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('selectAll', useCallback(function (e) {
         var _a;
@@ -126,4 +128,4 @@ e.preventDefault();
         }), treeId);
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('renameItem', function (e) {
+    }, [environment, getLinearItems, treeId]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('renameItem', useCallback(function (e) {
         var _a;
@@ -136,4 +138,4 @@ if (viewState.focusedItem) {
         }
-    }, isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true));
-    useHotkey('startSearch', function (e) {
+    }, [environment, setRenamingItem, treeId, viewState.focusedItem]), isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true) && !isRenaming);
+    useHotkey('startSearch', useCallback(function (e) {
         var _a, _b;
@@ -143,15 +145,15 @@ e.preventDefault();
         (_b = (_a = document.querySelector('[data-rct-search-input="true"]')) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }, isActiveTree && !dnd.isProgrammaticallyDragging);
-    useHotkey('startProgrammaticDnd', function (e) {
+    }, [setSearch]), isActiveTree && !dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('startProgrammaticDnd', useCallback(function (e) {
         e.preventDefault();
         dnd.startProgrammaticDrag();
-    }, isActiveTree);
-    useHotkey('completeProgrammaticDnd', function (e) {
+    }, [dnd]), isActiveTree && !isRenaming);
+    useHotkey('completeProgrammaticDnd', useCallback(function (e) {
         e.preventDefault();
         dnd.completeProgrammaticDrag();
-    }, isActiveTree && dnd.isProgrammaticallyDragging);
-    useHotkey('abortProgrammaticDnd', function (e) {
+    }, [dnd]), isActiveTree && dnd.isProgrammaticallyDragging && !isRenaming);
+    useHotkey('abortProgrammaticDnd', useCallback(function (e) {
         e.preventDefault();
         dnd.abortProgrammaticDrag();
-    }, isActiveTree && dnd.isProgrammaticallyDragging);
+    }, [dnd]), isActiveTree && dnd.isProgrammaticallyDragging && !isRenaming);
 };

lib/esnext/treeItem/TreeItemRenamingInput.js

 import { useTree } from '../tree/Tree';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useHotkey } from '../hotkeys/useHotkey';
+import { useSideEffect } from '../useSideEffect';
 export var TreeItemRenamingInput = function (props) {
@@ -28,3 +29,3 @@ var _a = useTree(), renderers = _a.renderers, treeInformation = _a.treeInformation, setRenamingItem = _a.setRenamingItem, treeId = _a.treeId;
     };
-    useEffect(function () {
+    useSideEffect(function () {
         var _a, _b, _c;
@@ -36,3 +37,3 @@ environment.setActiveTree(treeId);
         }
-    }, [inputRef.current]);
+    }, [environment, treeId], []);
     useHotkey('abortRenameItem', function () {
@@ -39,0 +40,0 @@ abort();

lib/esnext/treeItem/useTreeItemRenderContext.js

@@ -26,4 +26,4 @@ var __assign = (this && this.__assign) || function () {
 export var useTreeItemRenderContext = function (item) {
-    var _a, _b, _c;
-    var _d = useTree(), treeId = _d.treeId, search = _d.search, renamingItem = _d.renamingItem;
+    var _a, _b, _c, _d;
+    var _e = useTree(), treeId = _e.treeId, search = _e.search, renamingItem = _e.renamingItem;
     var environment = useTreeEnvironment();
@@ -39,6 +39,9 @@ var interactionManager = useInteractionManager();
             : ((_a = environment.doesSearchMatchItem) !== null && _a !== void 0 ? _a : defaultMatcher)(search, item, itemTitle);
-    }, [search, itemTitle]);
+    }, [search, item, itemTitle, environment.doesSearchMatchItem]);
+    var isSelected = item && ((_b = (_a = environment.viewState[treeId]) === null || _a === void 0 ? void 0 : _a.selectedItems) === null || _b === void 0 ? void 0 : _b.includes(item.index));
+    var isExpanded = item && ((_d = (_c = environment.viewState[treeId]) === null || _c === void 0 ? void 0 : _c.expandedItems) === null || _d === void 0 ? void 0 : _d.includes(item.index));
+    var isRenaming = item && renamingItem === item.index;
     return useMemo(function () {
         var _a, _b;
-        var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!item) {
@@ -73,8 +76,8 @@ return undefined;
             toggleExpandedState: function () {
-                var _a, _b, _c;
-                if ((_a = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _a === void 0 ? void 0 : _a.includes(item.index)) {
-                    (_b = environment.onCollapseItem) === null || _b === void 0 ? void 0 : _b.call(environment, item, treeId);
+                var _a, _b;
+                if (isExpanded) {
+                    (_a = environment.onCollapseItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
                 }
                 else {
-                    (_c = environment.onExpandItem) === null || _c === void 0 ? void 0 : _c.call(environment, item, treeId);
+                    (_b = environment.onExpandItem) === null || _b === void 0 ? void 0 : _b.call(environment, item, treeId);
                 }
@@ -118,6 +121,6 @@ },
         var renderFlags = {
-            isSelected: (_m = viewState === null || viewState === void 0 ? void 0 : viewState.selectedItems) === null || _m === void 0 ? void 0 : _m.includes(item.index),
-            isExpanded: (_o = viewState === null || viewState === void 0 ? void 0 : viewState.expandedItems) === null || _o === void 0 ? void 0 : _o.includes(item.index),
+            isSelected: isSelected,
+            isExpanded: isExpanded,
             isFocused: (viewState === null || viewState === void 0 ? void 0 : viewState.focusedItem) === item.index,
-            isRenaming: renamingItem === item.index,
+            isRenaming: isRenaming,
             isDraggingOver: dnd.draggingPosition &&
@@ -162,13 +165,18 @@ dnd.draggingPosition.targetType === 'item' &&
         };
-        return __assign(__assign(__assign({}, actions), renderFlags), { interactiveElementProps: interactiveElementProps, itemContainerWithChildrenProps: itemContainerWithChildrenProps, itemContainerWithoutChildrenProps: itemContainerWithoutChildrenProps, arrowProps: arrowProps });
+        return __assign(__assign(__assign({}, actions), renderFlags), { interactiveElementProps: interactiveElementProps,
+            itemContainerWithChildrenProps: itemContainerWithChildrenProps,
+            itemContainerWithoutChildrenProps: itemContainerWithoutChildrenProps,
+            arrowProps: arrowProps });
     }, [
+        item,
         environment,
-        (_a = environment.viewState[treeId]) === null || _a === void 0 ? void 0 : _a.expandedItems,
-        (_b = environment.viewState[treeId]) === null || _b === void 0 ? void 0 : _b.selectedItems,
-        renamingItem && renamingItem === (item === null || item === void 0 ? void 0 : item.index),
-        (_c = item === null || item === void 0 ? void 0 : item.index) !== null && _c !== void 0 ? _c : '___no_item',
         treeId,
+        dnd,
+        isSelected,
+        isExpanded,
+        isRenaming,
         isSearchMatching,
-        dnd.draggingPosition,
+        interactionManager,
+        selectUpTo,
     ]);
 };

lib/esnext/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -90,3 +90,3 @@ var __assign = (this && this.__assign) || function () {
         return dispose;
-    }, [dataProvider]);
+    }, [dataProvider, writeItems]);
     return (React.createElement(ControlledTreeEnvironment, __assign({}, props, { ref: ref, viewState: viewState, items: currentItems, onExpandItem: function (item, treeId) {
@@ -93,0 +93,0 @@ var _a;

lib/esnext/useHtmlElementEventListener.js

@@ -14,3 +14,4 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, __spreadArray([element, listener, type], deps));
 };

package.json

 {
   "name": "react-complex-tree",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "lib/cjs/index.js",
@@ -29,9 +29,5 @@ "module": "lib/esm/index.js",
     "@lukasbach/tsconfig": "^0.1.0",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "^6.2.9",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
     "@welldone-software/why-did-you-render": "^6.2.0",
@@ -41,3 +37,3 @@ "babel-jest": "^26.6.3",
     "cpy-cli": "^3.1.1",
-    "demodata": "^1.0.0",
+    "demodata": "^1.1.4",
     "jest": "^26.6.3",
@@ -51,3 +47,3 @@ "loader-utils": "^2.0.0",
     "ts-node": "^9.1.1",
-    "typescript": "^4.3.4",
+    "typescript": "4.2.2",
     "webpack-cli": "^4.7.2"
@@ -64,3 +60,3 @@ },
   },
-  "gitHead": "ab53f8e788237e42a460ded68162907cc7324b55"
+  "gitHead": "9716969a3cd259caf5ee18a22a6bc052fba2595d"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

973048

increased by4.61%

Dev dependency count

23

decreased by-14.81%

Number of package files

354

increased by9.26%

Lines of code

11775

increased by4.54%

No dependency changes