react-complex-tree - npm Package Compare versions

Comparing version 2.3.4 to 2.3.5-alpha.0

lib/cjs/controlledEnvironment/ControlledTreeEnvironment.js

@@ -41,3 +41,3 @@ "use strict";
 var InteractionManagerProvider_1 = require("./InteractionManagerProvider");
-var DragAndDropProvider_1 = require("./DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var EnvironmentActionsProvider_1 = require("../environmentActions/EnvironmentActionsProvider");
@@ -44,0 +44,0 @@ var useControlledTreeEnvironmentProps_1 = require("./useControlledTreeEnvironmentProps");

lib/cjs/controlledEnvironment/useControlledTreeEnvironmentProps.js

@@ -43,6 +43,7 @@ "use strict";
     }, [trees, items, treeIds, viewState]);
-    var onFocusItemHandler = (0, react_1.useCallback)(function (item, treeId) {
+    var onFocusItemHandler = (0, react_1.useCallback)(function (item, treeId, setDomFocus) {
         var _a, _b, _c, _d, _e, _f, _g;
-        var newItem = (_a = (0, utils_1.getDocument)()) === null || _a === void 0 ? void 0 : _a.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id=\"").concat(item.index, "\"]"));
-        if (autoFocus !== null && autoFocus !== void 0 ? autoFocus : true) {
+        if (setDomFocus === void 0) { setDomFocus = true; }
+        if ((autoFocus !== null && autoFocus !== void 0 ? autoFocus : true) && setDomFocus) {
+            var newItem = (_a = (0, utils_1.getDocument)()) === null || _a === void 0 ? void 0 : _a.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id=\"").concat(item.index, "\"]"));
             if (((_d = (_c = (_b = (0, utils_1.getDocument)()) === null || _b === void 0 ? void 0 : _b.activeElement) === null || _c === void 0 ? void 0 : _c.attributes.getNamedItem('data-rct-search-input')) === null || _d === void 0 ? void 0 : _d.value) !== 'true') {
@@ -49,0 +50,0 @@ // Move DOM focus to item if the current focus is not on the search input

lib/cjs/environmentActions/EnvironmentActionsProvider.js

@@ -74,3 +74,3 @@ "use strict";
 var react_1 = require("react");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
@@ -117,4 +117,5 @@ var useCreatedEnvironmentRef_1 = require("./useCreatedEnvironmentRef");
     }, [items, onExpandItem]);
-    var focusItem = (0, react_1.useCallback)(function (itemId, treeId) {
-        onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(items[itemId], treeId);
+    var focusItem = (0, react_1.useCallback)(function (itemId, treeId, setDomFocus) {
+        if (setDomFocus === void 0) { setDomFocus = true; }
+        onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(items[itemId], treeId, setDomFocus);
     }, [items, onFocusItem]);
@@ -121,0 +122,0 @@ var focusTree = (0, react_1.useCallback)(function (treeId, autoFocus) {

lib/cjs/environmentActions/useCreatedEnvironmentRef.js

@@ -17,3 +17,3 @@ "use strict";
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var useCreatedEnvironmentRef = function (ref, actions) {
@@ -20,0 +20,0 @@ var environment = (0, ControlledTreeEnvironment_1.useTreeEnvironment)();

lib/cjs/interactionMode/ClickArrowToExpandInteractionManager.js

@@ -17,3 +17,3 @@ "use strict";
                 if (e.shiftKey) {
-                    actions.selectUpTo(!e.ctrlKey);
+                    actions.selectUpTo(!(0, isControlKey_1.isControlKey)(e));
                 }
@@ -20,0 +20,0 @@ else if ((0, isControlKey_1.isControlKey)(e)) {

lib/cjs/interactionMode/ClickItemToExpandInteractionManager.js

@@ -17,3 +17,3 @@ "use strict";
                 if (e.shiftKey) {
-                    actions.selectUpTo(!e.ctrlKey);
+                    actions.selectUpTo(!(0, isControlKey_1.isControlKey)(e));
                 }
@@ -20,0 +20,0 @@ else if ((0, isControlKey_1.isControlKey)(e)) {

lib/cjs/interactionMode/DoubleClickItemToExpandInteractionManager.js

@@ -17,3 +17,3 @@ "use strict";
                 if (e.shiftKey) {
-                    actions.selectUpTo(!e.ctrlKey);
+                    actions.selectUpTo(!(0, isControlKey_1.isControlKey)(e));
                 }
@@ -20,0 +20,0 @@ else if ((0, isControlKey_1.isControlKey)(e)) {

lib/cjs/tree/DragBetweenLine.js

@@ -29,3 +29,3 @@ "use strict";
 var Tree_1 = require("./Tree");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var DragBetweenLine = function (_a) {
@@ -32,0 +32,0 @@ var _b;

lib/cjs/tree/LiveDescription.js

@@ -32,3 +32,3 @@ "use strict";
 var Tree_1 = require("./Tree");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var resolveLiveDescriptor_1 = require("./resolveLiveDescriptor");
@@ -35,0 +35,0 @@ var useKeyboardBindings_1 = require("../hotkeys/useKeyboardBindings");

lib/cjs/tree/TreeManager.js

@@ -47,3 +47,3 @@ "use strict";
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var MaybeLiveDescription_1 = require("./MaybeLiveDescription");
@@ -66,3 +66,3 @@ var TreeManager = function () {
         React.createElement(MaybeLiveDescription_1.MaybeLiveDescription, null),
-        React.createElement(TreeItemChildren_1.TreeItemChildren, { depth: 0, parentId: treeId }, rootChildren !== null && rootChildren !== void 0 ? rootChildren : []),
+        React.createElement(TreeItemChildren_1.TreeItemChildren, { depth: 0, parentId: rootItem }, rootChildren !== null && rootChildren !== void 0 ? rootChildren : []),
         React.createElement(DragBetweenLine_1.DragBetweenLine, { treeId: treeId }),
@@ -69,0 +69,0 @@ React.createElement(SearchInput_1.SearchInput, { containerRef: containerRef.current })));

lib/cjs/tree/useCreatedTreeInformation.js

@@ -6,3 +6,3 @@ "use strict";
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var useCreatedTreeInformation = function (tree, renamingItem, search) {
@@ -9,0 +9,0 @@ var _a;

lib/cjs/tree/useTreeKeyboardBindings.js

@@ -19,3 +19,3 @@ "use strict";
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var useSelectUpTo_1 = require("./useSelectUpTo");
@@ -22,0 +22,0 @@ var useLinearItems_1 = require("../controlledEnvironment/useLinearItems");

lib/cjs/treeActions/TreeActionsProvider.d.ts

 import * as React from 'react';
-import { TreeRef } from '../types';
-export declare const useTreeActions: () => import("../types").TreeChangeActions;
+import { TreeChangeActions, TreeRef } from '../types';
+export declare const useTreeActions: () => TreeChangeActions;
 export declare const TreeActionsProvider: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<Record<string, unknown>>, string> & React.RefAttributes<TreeRef<any>>>;

lib/cjs/treeActions/TreeActionsProvider.js

@@ -29,3 +29,3 @@ "use strict";
 var react_1 = require("react");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
@@ -61,4 +61,5 @@ var useCreatedTreeRef_1 = require("./useCreatedTreeRef");
         },
-        focusItem: function (itemId) {
-            envActions.focusItem(itemId, tree.treeId);
+        focusItem: function (itemId, setDomFocus) {
+            if (setDomFocus === void 0) { setDomFocus = true; }
+            envActions.focusItem(itemId, tree.treeId, setDomFocus);
         },
@@ -65,0 +66,0 @@ focusTree: function (autoFocus) {

lib/cjs/treeActions/useCreatedTreeRef.js

@@ -17,3 +17,3 @@ "use strict";
 var ControlledTreeEnvironment_1 = require("../controlledEnvironment/ControlledTreeEnvironment");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var Tree_1 = require("../tree/Tree");
@@ -20,0 +20,0 @@ var useCreatedTreeRef = function (ref, actions) {

lib/cjs/treeItem/TreeItemElement.js

@@ -35,5 +35,5 @@ "use strict";
 var TreeItemElement = function (props) {
-    var _a, _b;
-    var _c = (0, react_1.useState)(false), hasBeenRequested = _c[0], setHasBeenRequested = _c[1];
-    var _d = (0, Tree_1.useTree)(), renderers = _d.renderers, treeInformation = _d.treeInformation, renamingItem = _d.renamingItem;
+    var _a, _b, _c, _d;
+    var _e = (0, react_1.useState)(false), hasBeenRequested = _e[0], setHasBeenRequested = _e[1];
+    var _f = (0, Tree_1.useTree)(), renderers = _f.renderers, treeInformation = _f.treeInformation, renamingItem = _f.renamingItem;
     var environment = (0, ControlledTreeEnvironment_1.useTreeEnvironment)();
@@ -51,3 +51,4 @@ var viewState = (0, useViewState_1.useViewState)();
     }
-    var children = item.isFolder && isExpanded && item.children && (react_1.default.createElement(TreeItemChildren_1.TreeItemChildren, { depth: props.depth + 1, parentId: props.itemIndex }, item.children));
+    var shouldRenderChildren = (_c = (_b = environment.shouldRenderChildren) === null || _b === void 0 ? void 0 : _b.call(environment, item, renderContext)) !== null && _c !== void 0 ? _c : (item.isFolder && isExpanded);
+    var children = item.children && shouldRenderChildren && (react_1.default.createElement(TreeItemChildren_1.TreeItemChildren, { depth: props.depth + 1, parentId: props.itemIndex }, item.children));
     var title = environment.getItemTitle(item);
@@ -65,3 +66,3 @@ var titleComponent = renamingItem === props.itemIndex ? (react_1.default.createElement(TreeItemRenamingInput_1.TreeItemRenamingInput, { itemIndex: props.itemIndex })) : (renderers.renderItemTitle({
     });
-    return ((_b = renderers.renderItem({
+    return ((_d = renderers.renderItem({
         item: environment.items[props.itemIndex],
@@ -74,4 +75,4 @@ depth: props.depth,
         children: children,
-    })) !== null && _b !== void 0 ? _b : null); // Type to use AllTreeRenderProps
+    })) !== null && _d !== void 0 ? _d : null); // Type to use AllTreeRenderProps
 };
 exports.TreeItemElement = TreeItemElement;

lib/cjs/treeItem/useTreeItemRenderContext.d.ts

@@ -1,32 +0,2 @@
-import { HTMLProps } from 'react';
-import { TreeItem } from '../types';
-export declare const useTreeItemRenderContext: (item?: TreeItem) => {
-    interactiveElementProps: HTMLProps<HTMLElement>;
-    itemContainerWithChildrenProps: HTMLProps<HTMLElement>;
-    itemContainerWithoutChildrenProps: HTMLProps<HTMLElement>;
-    arrowProps: HTMLProps<HTMLElement>;
-    viewStateFlags: {
-        [key: string]: boolean;
-    };
-    isSelected?: boolean | undefined;
-    isExpanded?: boolean | undefined;
-    isFocused?: boolean | undefined;
-    isRenaming?: boolean | undefined;
-    isDraggingOver?: boolean | undefined;
-    isDraggingOverParent?: boolean | undefined;
-    isSearchMatching?: boolean | undefined;
-    canDrag?: boolean | undefined;
-    canDropOn?: boolean | undefined;
-    primaryAction: () => void;
-    startRenamingItem: () => void;
-    stopRenamingItem: () => void;
-    expandItem: () => void;
-    collapseItem: () => void;
-    toggleExpandedState: () => void;
-    selectItem: () => void;
-    unselectItem: () => void;
-    addToSelectedItems: () => void;
-    selectUpTo: (overrideOldSelection?: boolean | undefined) => void;
-    startDragging: () => void;
-    focusItem: () => void;
-} | undefined;
+import { TreeItem, TreeItemRenderContext } from '../types';
+export declare const useTreeItemRenderContext: (item?: TreeItem) => TreeItemRenderContext<never> | undefined;

lib/cjs/treeItem/useTreeItemRenderContext.js

@@ -29,3 +29,3 @@ "use strict";
 var InteractionManagerProvider_1 = require("../controlledEnvironment/InteractionManagerProvider");
-var DragAndDropProvider_1 = require("../controlledEnvironment/DragAndDropProvider");
+var DragAndDropProvider_1 = require("../drag/DragAndDropProvider");
 var useSelectUpTo_1 = require("../tree/useSelectUpTo");
@@ -119,5 +119,6 @@ var useGetOriginalItemOrder_1 = require("../useGetOriginalItemOrder");
             },
-            focusItem: function () {
+            focusItem: function (setDomFocus) {
                 var _a;
-                (_a = environment.onFocusItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
+                if (setDomFocus === void 0) { setDomFocus = true; }
+                (_a = environment.onFocusItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId, setDomFocus);
             },
@@ -124,0 +125,0 @@ startDragging: function () {

lib/cjs/types.d.ts

@@ -28,3 +28,4 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     startDragging: () => void;
-    focusItem: () => void;
+    /** @param setDomFocus - Defaults to true. */
+    focusItem: (setDomFocus?: boolean) => void;
 }
@@ -141,2 +142,3 @@ export interface TreeItemRenderFlags {
     showLiveDescription?: boolean;
+    shouldRenderChildren?: (item: TreeItem<T>, context: TreeItemRenderContext<C>) => boolean;
     /**
@@ -177,3 +179,3 @@ * See Issue #148 or the sample at
     onSelectItems?: (items: TreeItemIndex[], treeId: string) => void;
-    onFocusItem?: (item: TreeItem<T>, treeId: string) => void;
+    onFocusItem?: (item: TreeItem<T>, treeId: string, setDomFocus?: boolean) => void;
     onDrop?: (items: TreeItem<T>[], target: DraggingPosition) => void;
@@ -195,3 +197,4 @@ onPrimaryAction?: (items: TreeItem<T>, treeId: string) => void;
     invokePrimaryAction: (itemId: TreeItemIndex, treeID: string) => void;
-    focusItem: (itemId: TreeItemIndex, treeId: string) => void;
+    /** @param setDomFocus - Defaults to true. */
+    focusItem: (itemId: TreeItemIndex, treeId: string, setDomFocus?: boolean) => void;
     moveFocusUp: (treeId: string) => void;
@@ -316,3 +319,4 @@ moveFocusDown: (treeId: string) => void;
     toggleItemSelectStatus: (itemId: TreeItemIndex) => void;
-    focusItem: (itemId: TreeItemIndex) => void;
+    /** @param setDomFocus - Defaults to true. */
+    focusItem: (itemId: TreeItemIndex, setDomFocus?: boolean) => void;
     moveFocusUp: () => void;
@@ -404,1 +408,6 @@ moveFocusDown: () => void;
 }
+export type HoveringPosition = {
+    linearIndex: number;
+    offset: 'bottom' | 'top' | undefined;
+    indentation: number | undefined;
+};

lib/cjs/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -137,7 +137,2 @@ "use strict";
             (_a = props.onExpandItem) === null || _a === void 0 ? void 0 : _a.call(props, item, treeId);
-            // const itemsToLoad = item.children?.filter(itemId => currentItems[itemId] === undefined) ?? [];
-            // dataProvider.getTreeItems(itemsToLoad).then(items => {
-            //  writeItems(items.map(item => ({ [item.index]: item })).reduce((a, b) => ({...a, ...b}), {}));
-            //  setViewState(viewState => ({ ...viewState, expandedItems: [...viewState.expandedItems ?? [], item.index] }));
-            // });
         }, onCollapseItem: function (item, treeId) {
@@ -144,0 +139,0 @@ var _a;

lib/esm/controlledEnvironment/ControlledTreeEnvironment.js

@@ -15,3 +15,3 @@ var __assign = (this && this.__assign) || function () {
 import { InteractionManagerProvider } from './InteractionManagerProvider';
-import { DragAndDropProvider } from './DragAndDropProvider';
+import { DragAndDropProvider } from '../drag/DragAndDropProvider';
 import { EnvironmentActionsProvider } from '../environmentActions/EnvironmentActionsProvider';
@@ -18,0 +18,0 @@ import { useControlledTreeEnvironmentProps } from './useControlledTreeEnvironmentProps';

lib/esm/controlledEnvironment/useControlledTreeEnvironmentProps.js

@@ -40,6 +40,7 @@ var __assign = (this && this.__assign) || function () {
     }, [trees, items, treeIds, viewState]);
-    var onFocusItemHandler = useCallback(function (item, treeId) {
+    var onFocusItemHandler = useCallback(function (item, treeId, setDomFocus) {
         var _a, _b, _c, _d, _e, _f, _g;
-        var newItem = (_a = getDocument()) === null || _a === void 0 ? void 0 : _a.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id=\"").concat(item.index, "\"]"));
-        if (autoFocus !== null && autoFocus !== void 0 ? autoFocus : true) {
+        if (setDomFocus === void 0) { setDomFocus = true; }
+        if ((autoFocus !== null && autoFocus !== void 0 ? autoFocus : true) && setDomFocus) {
+            var newItem = (_a = getDocument()) === null || _a === void 0 ? void 0 : _a.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id=\"").concat(item.index, "\"]"));
             if (((_d = (_c = (_b = getDocument()) === null || _b === void 0 ? void 0 : _b.activeElement) === null || _c === void 0 ? void 0 : _c.attributes.getNamedItem('data-rct-search-input')) === null || _d === void 0 ? void 0 : _d.value) !== 'true') {
@@ -46,0 +47,0 @@ // Move DOM focus to item if the current focus is not on the search input

lib/esm/environmentActions/EnvironmentActionsProvider.js

@@ -48,3 +48,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import { useCallback, useMemo } from 'react';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
@@ -90,4 +90,5 @@ import { useCreatedEnvironmentRef } from './useCreatedEnvironmentRef';
     }, [items, onExpandItem]);
-    var focusItem = useCallback(function (itemId, treeId) {
-        onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(items[itemId], treeId);
+    var focusItem = useCallback(function (itemId, treeId, setDomFocus) {
+        if (setDomFocus === void 0) { setDomFocus = true; }
+        onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(items[itemId], treeId, setDomFocus);
     }, [items, onFocusItem]);
@@ -94,0 +95,0 @@ var focusTree = useCallback(function (treeId, autoFocus) {

lib/esm/environmentActions/useCreatedEnvironmentRef.js

@@ -14,3 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 export var useCreatedEnvironmentRef = function (ref, actions) {
@@ -17,0 +17,0 @@ var environment = useTreeEnvironment();

lib/esm/interactionMode/ClickArrowToExpandInteractionManager.js

@@ -14,3 +14,3 @@ import { InteractionMode, } from '../types';
                 if (e.shiftKey) {
-                    actions.selectUpTo(!e.ctrlKey);
+                    actions.selectUpTo(!isControlKey(e));
                 }
@@ -17,0 +17,0 @@ else if (isControlKey(e)) {

lib/esm/interactionMode/ClickItemToExpandInteractionManager.js

@@ -14,3 +14,3 @@ import { InteractionMode, } from '../types';
                 if (e.shiftKey) {
-                    actions.selectUpTo(!e.ctrlKey);
+                    actions.selectUpTo(!isControlKey(e));
                 }
@@ -17,0 +17,0 @@ else if (isControlKey(e)) {

lib/esm/interactionMode/DoubleClickItemToExpandInteractionManager.js

@@ -14,3 +14,3 @@ import { InteractionMode, } from '../types';
                 if (e.shiftKey) {
-                    actions.selectUpTo(!e.ctrlKey);
+                    actions.selectUpTo(!isControlKey(e));
                 }
@@ -17,0 +17,0 @@ else if (isControlKey(e)) {

lib/esm/tree/DragBetweenLine.js

 import * as React from 'react';
 import { useTree } from './Tree';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 export var DragBetweenLine = function (_a) {
@@ -5,0 +5,0 @@ var _b;

lib/esm/tree/LiveDescription.js

@@ -6,3 +6,3 @@ import * as React from 'react';
 import { useTree } from './Tree';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { resolveLiveDescriptor } from './resolveLiveDescriptor';
@@ -9,0 +9,0 @@ import { useKeyboardBindings } from '../hotkeys/useKeyboardBindings';

lib/esm/tree/TreeManager.js

@@ -21,3 +21,3 @@ var __assign = (this && this.__assign) || function () {
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { MaybeLiveDescription } from './MaybeLiveDescription';
@@ -40,3 +40,3 @@ export var TreeManager = function () {
         React.createElement(MaybeLiveDescription, null),
-        React.createElement(TreeItemChildren, { depth: 0, parentId: treeId }, rootChildren !== null && rootChildren !== void 0 ? rootChildren : []),
+        React.createElement(TreeItemChildren, { depth: 0, parentId: rootItem }, rootChildren !== null && rootChildren !== void 0 ? rootChildren : []),
         React.createElement(DragBetweenLine, { treeId: treeId }),
@@ -43,0 +43,0 @@ React.createElement(SearchInput, { containerRef: containerRef.current })));

lib/esm/tree/useCreatedTreeInformation.js

 import { useMemo } from 'react';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 export var useCreatedTreeInformation = function (tree, renamingItem, search) {
@@ -5,0 +5,0 @@ var _a;

lib/esm/tree/useTreeKeyboardBindings.js

@@ -16,3 +16,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useSelectUpTo } from './useSelectUpTo';
@@ -19,0 +19,0 @@ import { useLinearItems } from '../controlledEnvironment/useLinearItems';

lib/esm/treeActions/TreeActionsProvider.d.ts

 import * as React from 'react';
-import { TreeRef } from '../types';
-export declare const useTreeActions: () => import("../types").TreeChangeActions;
+import { TreeChangeActions, TreeRef } from '../types';
+export declare const useTreeActions: () => TreeChangeActions;
 export declare const TreeActionsProvider: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<Record<string, unknown>>, string> & React.RefAttributes<TreeRef<any>>>;

lib/esm/treeActions/TreeActionsProvider.js

 import * as React from 'react';
 import { useMemo } from 'react';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
@@ -33,4 +33,5 @@ import { useCreatedTreeRef } from './useCreatedTreeRef';
         },
-        focusItem: function (itemId) {
-            envActions.focusItem(itemId, tree.treeId);
+        focusItem: function (itemId, setDomFocus) {
+            if (setDomFocus === void 0) { setDomFocus = true; }
+            envActions.focusItem(itemId, tree.treeId, setDomFocus);
         },
@@ -37,0 +38,0 @@ focusTree: function (autoFocus) {

lib/esm/treeActions/useCreatedTreeRef.js

@@ -14,3 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useTree } from '../tree/Tree';
@@ -17,0 +17,0 @@ export var useCreatedTreeRef = function (ref, actions) {

lib/esm/treeItem/TreeItemElement.js

@@ -9,5 +9,5 @@ import React, { useMemo, useState } from 'react';
 export var TreeItemElement = function (props) {
-    var _a, _b;
-    var _c = useState(false), hasBeenRequested = _c[0], setHasBeenRequested = _c[1];
-    var _d = useTree(), renderers = _d.renderers, treeInformation = _d.treeInformation, renamingItem = _d.renamingItem;
+    var _a, _b, _c, _d;
+    var _e = useState(false), hasBeenRequested = _e[0], setHasBeenRequested = _e[1];
+    var _f = useTree(), renderers = _f.renderers, treeInformation = _f.treeInformation, renamingItem = _f.renamingItem;
     var environment = useTreeEnvironment();
@@ -25,3 +25,4 @@ var viewState = useViewState();
     }
-    var children = item.isFolder && isExpanded && item.children && (React.createElement(TreeItemChildren, { depth: props.depth + 1, parentId: props.itemIndex }, item.children));
+    var shouldRenderChildren = (_c = (_b = environment.shouldRenderChildren) === null || _b === void 0 ? void 0 : _b.call(environment, item, renderContext)) !== null && _c !== void 0 ? _c : (item.isFolder && isExpanded);
+    var children = item.children && shouldRenderChildren && (React.createElement(TreeItemChildren, { depth: props.depth + 1, parentId: props.itemIndex }, item.children));
     var title = environment.getItemTitle(item);
@@ -39,3 +40,3 @@ var titleComponent = renamingItem === props.itemIndex ? (React.createElement(TreeItemRenamingInput, { itemIndex: props.itemIndex })) : (renderers.renderItemTitle({
     });
-    return ((_b = renderers.renderItem({
+    return ((_d = renderers.renderItem({
         item: environment.items[props.itemIndex],
@@ -48,3 +49,3 @@ depth: props.depth,
         children: children,
-    })) !== null && _b !== void 0 ? _b : null); // Type to use AllTreeRenderProps
+    })) !== null && _d !== void 0 ? _d : null); // Type to use AllTreeRenderProps
 };

lib/esm/treeItem/useTreeItemRenderContext.d.ts

@@ -1,32 +0,2 @@
-import { HTMLProps } from 'react';
-import { TreeItem } from '../types';
-export declare const useTreeItemRenderContext: (item?: TreeItem) => {
-    interactiveElementProps: HTMLProps<HTMLElement>;
-    itemContainerWithChildrenProps: HTMLProps<HTMLElement>;
-    itemContainerWithoutChildrenProps: HTMLProps<HTMLElement>;
-    arrowProps: HTMLProps<HTMLElement>;
-    viewStateFlags: {
-        [key: string]: boolean;
-    };
-    isSelected?: boolean | undefined;
-    isExpanded?: boolean | undefined;
-    isFocused?: boolean | undefined;
-    isRenaming?: boolean | undefined;
-    isDraggingOver?: boolean | undefined;
-    isDraggingOverParent?: boolean | undefined;
-    isSearchMatching?: boolean | undefined;
-    canDrag?: boolean | undefined;
-    canDropOn?: boolean | undefined;
-    primaryAction: () => void;
-    startRenamingItem: () => void;
-    stopRenamingItem: () => void;
-    expandItem: () => void;
-    collapseItem: () => void;
-    toggleExpandedState: () => void;
-    selectItem: () => void;
-    unselectItem: () => void;
-    addToSelectedItems: () => void;
-    selectUpTo: (overrideOldSelection?: boolean | undefined) => void;
-    startDragging: () => void;
-    focusItem: () => void;
-} | undefined;
+import { TreeItem, TreeItemRenderContext } from '../types';
+export declare const useTreeItemRenderContext: (item?: TreeItem) => TreeItemRenderContext<never> | undefined;

lib/esm/treeItem/useTreeItemRenderContext.js

@@ -26,3 +26,3 @@ var __assign = (this && this.__assign) || function () {
 import { useInteractionManager } from '../controlledEnvironment/InteractionManagerProvider';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useSelectUpTo } from '../tree/useSelectUpTo';
@@ -116,5 +116,6 @@ import { useGetOriginalItemOrder } from '../useGetOriginalItemOrder';
             },
-            focusItem: function () {
+            focusItem: function (setDomFocus) {
                 var _a;
-                (_a = environment.onFocusItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
+                if (setDomFocus === void 0) { setDomFocus = true; }
+                (_a = environment.onFocusItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId, setDomFocus);
             },
@@ -121,0 +122,0 @@ startDragging: function () {

lib/esm/types.d.ts

@@ -28,3 +28,4 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     startDragging: () => void;
-    focusItem: () => void;
+    /** @param setDomFocus - Defaults to true. */
+    focusItem: (setDomFocus?: boolean) => void;
 }
@@ -141,2 +142,3 @@ export interface TreeItemRenderFlags {
     showLiveDescription?: boolean;
+    shouldRenderChildren?: (item: TreeItem<T>, context: TreeItemRenderContext<C>) => boolean;
     /**
@@ -177,3 +179,3 @@ * See Issue #148 or the sample at
     onSelectItems?: (items: TreeItemIndex[], treeId: string) => void;
-    onFocusItem?: (item: TreeItem<T>, treeId: string) => void;
+    onFocusItem?: (item: TreeItem<T>, treeId: string, setDomFocus?: boolean) => void;
     onDrop?: (items: TreeItem<T>[], target: DraggingPosition) => void;
@@ -195,3 +197,4 @@ onPrimaryAction?: (items: TreeItem<T>, treeId: string) => void;
     invokePrimaryAction: (itemId: TreeItemIndex, treeID: string) => void;
-    focusItem: (itemId: TreeItemIndex, treeId: string) => void;
+    /** @param setDomFocus - Defaults to true. */
+    focusItem: (itemId: TreeItemIndex, treeId: string, setDomFocus?: boolean) => void;
     moveFocusUp: (treeId: string) => void;
@@ -316,3 +319,4 @@ moveFocusDown: (treeId: string) => void;
     toggleItemSelectStatus: (itemId: TreeItemIndex) => void;
-    focusItem: (itemId: TreeItemIndex) => void;
+    /** @param setDomFocus - Defaults to true. */
+    focusItem: (itemId: TreeItemIndex, setDomFocus?: boolean) => void;
     moveFocusUp: () => void;
@@ -404,1 +408,6 @@ moveFocusDown: () => void;
 }
+export type HoveringPosition = {
+    linearIndex: number;
+    offset: 'bottom' | 'top' | undefined;
+    indentation: number | undefined;
+};

lib/esm/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -111,7 +111,2 @@ var __assign = (this && this.__assign) || function () {
             (_a = props.onExpandItem) === null || _a === void 0 ? void 0 : _a.call(props, item, treeId);
-            // const itemsToLoad = item.children?.filter(itemId => currentItems[itemId] === undefined) ?? [];
-            // dataProvider.getTreeItems(itemsToLoad).then(items => {
-            //  writeItems(items.map(item => ({ [item.index]: item })).reduce((a, b) => ({...a, ...b}), {}));
-            //  setViewState(viewState => ({ ...viewState, expandedItems: [...viewState.expandedItems ?? [], item.index] }));
-            // });
         }, onCollapseItem: function (item, treeId) {
@@ -118,0 +113,0 @@ var _a;

lib/esnext/controlledEnvironment/ControlledTreeEnvironment.js

@@ -15,3 +15,3 @@ var __assign = (this && this.__assign) || function () {
 import { InteractionManagerProvider } from './InteractionManagerProvider';
-import { DragAndDropProvider } from './DragAndDropProvider';
+import { DragAndDropProvider } from '../drag/DragAndDropProvider';
 import { EnvironmentActionsProvider } from '../environmentActions/EnvironmentActionsProvider';
@@ -18,0 +18,0 @@ import { useControlledTreeEnvironmentProps } from './useControlledTreeEnvironmentProps';

lib/esnext/controlledEnvironment/useControlledTreeEnvironmentProps.js

@@ -40,6 +40,7 @@ var __assign = (this && this.__assign) || function () {
     }, [trees, items, treeIds, viewState]);
-    var onFocusItemHandler = useCallback(function (item, treeId) {
+    var onFocusItemHandler = useCallback(function (item, treeId, setDomFocus) {
         var _a, _b, _c, _d, _e, _f, _g;
-        var newItem = (_a = getDocument()) === null || _a === void 0 ? void 0 : _a.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id=\"").concat(item.index, "\"]"));
-        if (autoFocus !== null && autoFocus !== void 0 ? autoFocus : true) {
+        if (setDomFocus === void 0) { setDomFocus = true; }
+        if ((autoFocus !== null && autoFocus !== void 0 ? autoFocus : true) && setDomFocus) {
+            var newItem = (_a = getDocument()) === null || _a === void 0 ? void 0 : _a.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id=\"").concat(item.index, "\"]"));
             if (((_d = (_c = (_b = getDocument()) === null || _b === void 0 ? void 0 : _b.activeElement) === null || _c === void 0 ? void 0 : _c.attributes.getNamedItem('data-rct-search-input')) === null || _d === void 0 ? void 0 : _d.value) !== 'true') {
@@ -46,0 +47,0 @@ // Move DOM focus to item if the current focus is not on the search input

lib/esnext/environmentActions/EnvironmentActionsProvider.js

@@ -48,3 +48,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import { useCallback, useMemo } from 'react';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
@@ -90,4 +90,5 @@ import { useCreatedEnvironmentRef } from './useCreatedEnvironmentRef';
     }, [items, onExpandItem]);
-    var focusItem = useCallback(function (itemId, treeId) {
-        onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(items[itemId], treeId);
+    var focusItem = useCallback(function (itemId, treeId, setDomFocus) {
+        if (setDomFocus === void 0) { setDomFocus = true; }
+        onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(items[itemId], treeId, setDomFocus);
     }, [items, onFocusItem]);
@@ -94,0 +95,0 @@ var focusTree = useCallback(function (treeId, autoFocus) {

lib/esnext/environmentActions/useCreatedEnvironmentRef.js

@@ -14,3 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 export var useCreatedEnvironmentRef = function (ref, actions) {
@@ -17,0 +17,0 @@ var environment = useTreeEnvironment();

lib/esnext/interactionMode/ClickArrowToExpandInteractionManager.js

@@ -14,3 +14,3 @@ import { InteractionMode, } from '../types';
                 if (e.shiftKey) {
-                    actions.selectUpTo(!e.ctrlKey);
+                    actions.selectUpTo(!isControlKey(e));
                 }
@@ -17,0 +17,0 @@ else if (isControlKey(e)) {

lib/esnext/interactionMode/ClickItemToExpandInteractionManager.js

@@ -14,3 +14,3 @@ import { InteractionMode, } from '../types';
                 if (e.shiftKey) {
-                    actions.selectUpTo(!e.ctrlKey);
+                    actions.selectUpTo(!isControlKey(e));
                 }
@@ -17,0 +17,0 @@ else if (isControlKey(e)) {

lib/esnext/interactionMode/DoubleClickItemToExpandInteractionManager.js

@@ -14,3 +14,3 @@ import { InteractionMode, } from '../types';
                 if (e.shiftKey) {
-                    actions.selectUpTo(!e.ctrlKey);
+                    actions.selectUpTo(!isControlKey(e));
                 }
@@ -17,0 +17,0 @@ else if (isControlKey(e)) {

lib/esnext/tree/DragBetweenLine.js

 import * as React from 'react';
 import { useTree } from './Tree';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 export var DragBetweenLine = function (_a) {
@@ -5,0 +5,0 @@ var _b;

lib/esnext/tree/LiveDescription.js

@@ -6,3 +6,3 @@ import * as React from 'react';
 import { useTree } from './Tree';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { resolveLiveDescriptor } from './resolveLiveDescriptor';
@@ -9,0 +9,0 @@ import { useKeyboardBindings } from '../hotkeys/useKeyboardBindings';

lib/esnext/tree/TreeManager.js

@@ -21,3 +21,3 @@ var __assign = (this && this.__assign) || function () {
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { MaybeLiveDescription } from './MaybeLiveDescription';
@@ -40,3 +40,3 @@ export var TreeManager = function () {
         React.createElement(MaybeLiveDescription, null),
-        React.createElement(TreeItemChildren, { depth: 0, parentId: treeId }, rootChildren !== null && rootChildren !== void 0 ? rootChildren : []),
+        React.createElement(TreeItemChildren, { depth: 0, parentId: rootItem }, rootChildren !== null && rootChildren !== void 0 ? rootChildren : []),
         React.createElement(DragBetweenLine, { treeId: treeId }),
@@ -43,0 +43,0 @@ React.createElement(SearchInput, { containerRef: containerRef.current })));

lib/esnext/tree/useCreatedTreeInformation.js

 import { useMemo } from 'react';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 export var useCreatedTreeInformation = function (tree, renamingItem, search) {
@@ -5,0 +5,0 @@ var _a;

lib/esnext/tree/useTreeKeyboardBindings.js

@@ -16,3 +16,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useSelectUpTo } from './useSelectUpTo';
@@ -19,0 +19,0 @@ import { useLinearItems } from '../controlledEnvironment/useLinearItems';

lib/esnext/treeActions/TreeActionsProvider.d.ts

 import * as React from 'react';
-import { TreeRef } from '../types';
-export declare const useTreeActions: () => import("../types").TreeChangeActions;
+import { TreeChangeActions, TreeRef } from '../types';
+export declare const useTreeActions: () => TreeChangeActions;
 export declare const TreeActionsProvider: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<Record<string, unknown>>, string> & React.RefAttributes<TreeRef<any>>>;

lib/esnext/treeActions/TreeActionsProvider.js

 import * as React from 'react';
 import { useMemo } from 'react';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
@@ -33,4 +33,5 @@ import { useCreatedTreeRef } from './useCreatedTreeRef';
         },
-        focusItem: function (itemId) {
-            envActions.focusItem(itemId, tree.treeId);
+        focusItem: function (itemId, setDomFocus) {
+            if (setDomFocus === void 0) { setDomFocus = true; }
+            envActions.focusItem(itemId, tree.treeId, setDomFocus);
         },
@@ -37,0 +38,0 @@ focusTree: function (autoFocus) {

lib/esnext/treeActions/useCreatedTreeRef.js

@@ -14,3 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useTree } from '../tree/Tree';
@@ -17,0 +17,0 @@ export var useCreatedTreeRef = function (ref, actions) {

lib/esnext/treeItem/TreeItemElement.js

@@ -9,5 +9,5 @@ import React, { useMemo, useState } from 'react';
 export var TreeItemElement = function (props) {
-    var _a, _b;
-    var _c = useState(false), hasBeenRequested = _c[0], setHasBeenRequested = _c[1];
-    var _d = useTree(), renderers = _d.renderers, treeInformation = _d.treeInformation, renamingItem = _d.renamingItem;
+    var _a, _b, _c, _d;
+    var _e = useState(false), hasBeenRequested = _e[0], setHasBeenRequested = _e[1];
+    var _f = useTree(), renderers = _f.renderers, treeInformation = _f.treeInformation, renamingItem = _f.renamingItem;
     var environment = useTreeEnvironment();
@@ -25,3 +25,4 @@ var viewState = useViewState();
     }
-    var children = item.isFolder && isExpanded && item.children && (React.createElement(TreeItemChildren, { depth: props.depth + 1, parentId: props.itemIndex }, item.children));
+    var shouldRenderChildren = (_c = (_b = environment.shouldRenderChildren) === null || _b === void 0 ? void 0 : _b.call(environment, item, renderContext)) !== null && _c !== void 0 ? _c : (item.isFolder && isExpanded);
+    var children = item.children && shouldRenderChildren && (React.createElement(TreeItemChildren, { depth: props.depth + 1, parentId: props.itemIndex }, item.children));
     var title = environment.getItemTitle(item);
@@ -39,3 +40,3 @@ var titleComponent = renamingItem === props.itemIndex ? (React.createElement(TreeItemRenamingInput, { itemIndex: props.itemIndex })) : (renderers.renderItemTitle({
     });
-    return ((_b = renderers.renderItem({
+    return ((_d = renderers.renderItem({
         item: environment.items[props.itemIndex],
@@ -48,3 +49,3 @@ depth: props.depth,
         children: children,
-    })) !== null && _b !== void 0 ? _b : null); // Type to use AllTreeRenderProps
+    })) !== null && _d !== void 0 ? _d : null); // Type to use AllTreeRenderProps
 };

lib/esnext/treeItem/useTreeItemRenderContext.d.ts

@@ -1,32 +0,2 @@
-import { HTMLProps } from 'react';
-import { TreeItem } from '../types';
-export declare const useTreeItemRenderContext: (item?: TreeItem) => {
-    interactiveElementProps: HTMLProps<HTMLElement>;
-    itemContainerWithChildrenProps: HTMLProps<HTMLElement>;
-    itemContainerWithoutChildrenProps: HTMLProps<HTMLElement>;
-    arrowProps: HTMLProps<HTMLElement>;
-    viewStateFlags: {
-        [key: string]: boolean;
-    };
-    isSelected?: boolean | undefined;
-    isExpanded?: boolean | undefined;
-    isFocused?: boolean | undefined;
-    isRenaming?: boolean | undefined;
-    isDraggingOver?: boolean | undefined;
-    isDraggingOverParent?: boolean | undefined;
-    isSearchMatching?: boolean | undefined;
-    canDrag?: boolean | undefined;
-    canDropOn?: boolean | undefined;
-    primaryAction: () => void;
-    startRenamingItem: () => void;
-    stopRenamingItem: () => void;
-    expandItem: () => void;
-    collapseItem: () => void;
-    toggleExpandedState: () => void;
-    selectItem: () => void;
-    unselectItem: () => void;
-    addToSelectedItems: () => void;
-    selectUpTo: (overrideOldSelection?: boolean | undefined) => void;
-    startDragging: () => void;
-    focusItem: () => void;
-} | undefined;
+import { TreeItem, TreeItemRenderContext } from '../types';
+export declare const useTreeItemRenderContext: (item?: TreeItem) => TreeItemRenderContext<never> | undefined;

lib/esnext/treeItem/useTreeItemRenderContext.js

@@ -26,3 +26,3 @@ var __assign = (this && this.__assign) || function () {
 import { useInteractionManager } from '../controlledEnvironment/InteractionManagerProvider';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useSelectUpTo } from '../tree/useSelectUpTo';
@@ -116,5 +116,6 @@ import { useGetOriginalItemOrder } from '../useGetOriginalItemOrder';
             },
-            focusItem: function () {
+            focusItem: function (setDomFocus) {
                 var _a;
-                (_a = environment.onFocusItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
+                if (setDomFocus === void 0) { setDomFocus = true; }
+                (_a = environment.onFocusItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId, setDomFocus);
             },
@@ -121,0 +122,0 @@ startDragging: function () {

lib/esnext/types.d.ts

@@ -28,3 +28,4 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     startDragging: () => void;
-    focusItem: () => void;
+    /** @param setDomFocus - Defaults to true. */
+    focusItem: (setDomFocus?: boolean) => void;
 }
@@ -141,2 +142,3 @@ export interface TreeItemRenderFlags {
     showLiveDescription?: boolean;
+    shouldRenderChildren?: (item: TreeItem<T>, context: TreeItemRenderContext<C>) => boolean;
     /**
@@ -177,3 +179,3 @@ * See Issue #148 or the sample at
     onSelectItems?: (items: TreeItemIndex[], treeId: string) => void;
-    onFocusItem?: (item: TreeItem<T>, treeId: string) => void;
+    onFocusItem?: (item: TreeItem<T>, treeId: string, setDomFocus?: boolean) => void;
     onDrop?: (items: TreeItem<T>[], target: DraggingPosition) => void;
@@ -195,3 +197,4 @@ onPrimaryAction?: (items: TreeItem<T>, treeId: string) => void;
     invokePrimaryAction: (itemId: TreeItemIndex, treeID: string) => void;
-    focusItem: (itemId: TreeItemIndex, treeId: string) => void;
+    /** @param setDomFocus - Defaults to true. */
+    focusItem: (itemId: TreeItemIndex, treeId: string, setDomFocus?: boolean) => void;
     moveFocusUp: (treeId: string) => void;
@@ -316,3 +319,4 @@ moveFocusDown: (treeId: string) => void;
     toggleItemSelectStatus: (itemId: TreeItemIndex) => void;
-    focusItem: (itemId: TreeItemIndex) => void;
+    /** @param setDomFocus - Defaults to true. */
+    focusItem: (itemId: TreeItemIndex, setDomFocus?: boolean) => void;
     moveFocusUp: () => void;
@@ -404,1 +408,6 @@ moveFocusDown: () => void;
 }
+export type HoveringPosition = {
+    linearIndex: number;
+    offset: 'bottom' | 'top' | undefined;
+    indentation: number | undefined;
+};

lib/esnext/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -111,7 +111,2 @@ var __assign = (this && this.__assign) || function () {
             (_a = props.onExpandItem) === null || _a === void 0 ? void 0 : _a.call(props, item, treeId);
-            // const itemsToLoad = item.children?.filter(itemId => currentItems[itemId] === undefined) ?? [];
-            // dataProvider.getTreeItems(itemsToLoad).then(items => {
-            //  writeItems(items.map(item => ({ [item.index]: item })).reduce((a, b) => ({...a, ...b}), {}));
-            //  setViewState(viewState => ({ ...viewState, expandedItems: [...viewState.expandedItems ?? [], item.index] }));
-            // });
         }, onCollapseItem: function (item, treeId) {
@@ -118,0 +113,0 @@ var _a;

package.json

 {
   "name": "react-complex-tree",
-  "version": "2.3.4",
+  "version": "2.3.5-alpha.0",
   "main": "lib/cjs/index.js",
@@ -37,3 +37,3 @@ "module": "lib/esm/index.js",
     "cpy-cli": "^3.1.1",
-    "demodata": "^2.3.4",
+    "demodata": "^2.3.5-alpha.0",
     "jest": "^29.2.2",
@@ -70,3 +70,3 @@ "jest-dom": "^4.0.0",
   },
-  "gitHead": "980446ef632af2af571ead44ea888889b60e4bb5"
+  "gitHead": "5b7c81c35903830329d9003a009b9d5609d196e5"
 }

src/controlledEnvironment/useControlledTreeEnvironmentProps.ts

@@ -48,8 +48,8 @@ import { useCallback, useMemo, useState } from 'react';
   >(
-    (item, treeId) => {
-      const newItem = getDocument()?.querySelector(
-        `[data-rct-tree="${treeId}"] [data-rct-item-id="${item.index}"]`
-      );
+    (item, treeId, setDomFocus = true) => {
+      if ((autoFocus ?? true) && setDomFocus) {
+        const newItem = getDocument()?.querySelector(
+          `[data-rct-tree="${treeId}"] [data-rct-item-id="${item.index}"]`
+        );
 
-      if (autoFocus ?? true) {
         if (
@@ -56,0 +56,0 @@ getDocument()?.activeElement?.attributes.getNamedItem(

src/environmentActions/useCreatedEnvironmentRef.ts

 import { Ref, useImperativeHandle } from 'react';
 import { TreeEnvironmentChangeActions, TreeEnvironmentRef } from '../types';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 
@@ -6,0 +6,0 @@ export const useCreatedEnvironmentRef = (

src/interactionMode/ClickArrowToExpandInteractionManager.ts

@@ -33,3 +33,3 @@ import { HTMLProps } from 'react';
         if (e.shiftKey) {
-          actions.selectUpTo(!e.ctrlKey);
+          actions.selectUpTo(!isControlKey(e));
         } else if (isControlKey(e)) {
@@ -36,0 +36,0 @@ if (renderFlags.isSelected) {

src/interactionMode/ClickItemToExpandInteractionManager.ts

@@ -31,3 +31,3 @@ import { HTMLProps } from 'react';
         if (e.shiftKey) {
-          actions.selectUpTo(!e.ctrlKey);
+          actions.selectUpTo(!isControlKey(e));
         } else if (isControlKey(e)) {
@@ -34,0 +34,0 @@ if (renderFlags.isSelected) {

src/interactionMode/DoubleClickItemToExpandInteractionManager.ts

@@ -33,3 +33,3 @@ import { HTMLProps } from 'react';
         if (e.shiftKey) {
-          actions.selectUpTo(!e.ctrlKey);
+          actions.selectUpTo(!isControlKey(e));
         } else if (isControlKey(e)) {
@@ -36,0 +36,0 @@ if (renderFlags.isSelected) {

src/tree/useCreatedTreeInformation.ts

 import { useMemo } from 'react';
 import { TreeInformation, TreeItemIndex, TreeProps } from '../types';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 
@@ -6,0 +6,0 @@ export const useCreatedTreeInformation = (

src/tree/useTreeKeyboardBindings.ts

@@ -7,3 +7,3 @@ import { useKey } from '../hotkeys/useKey';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useSelectUpTo } from './useSelectUpTo';
@@ -10,0 +10,0 @@ import { useLinearItems } from '../controlledEnvironment/useLinearItems';

src/treeActions/useCreatedTreeRef.ts

 import { Ref, useImperativeHandle } from 'react';
 import { TreeChangeActions, TreeRef } from '../types';
 import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useTree } from '../tree/Tree';
@@ -6,0 +6,0 @@

src/treeItem/useTreeItemRenderContext.ts

 import { HTMLProps, useMemo } from 'react';
-import { TreeItem, TreeItemActions, TreeItemRenderFlags } from '../types';
+import {
+  TreeItem,
+  TreeItemActions,
+  TreeItemRenderContext,
+  TreeItemRenderFlags,
+} from '../types';
 import { defaultMatcher } from '../search/defaultMatcher';
@@ -7,3 +12,3 @@ import { useTree } from '../tree/Tree';
 import { useInteractionManager } from '../controlledEnvironment/InteractionManagerProvider';
-import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
+import { useDragAndDrop } from '../drag/DragAndDropProvider';
 import { useSelectUpTo } from '../tree/useSelectUpTo';
@@ -41,3 +46,3 @@ import { useGetOriginalItemOrder } from '../useGetOriginalItemOrder';
 
-  return useMemo(() => {
+  return useMemo<TreeItemRenderContext | undefined>(() => {
     if (!item) {
@@ -124,4 +129,4 @@ return undefined;
       },
-      focusItem: () => {
-        environment.onFocusItem?.(item, treeId);
+      focusItem: (setDomFocus = true) => {
+        environment.onFocusItem?.(item, treeId, setDomFocus);
       },
@@ -128,0 +133,0 @@ startDragging: () => {

src/types.ts

@@ -38,3 +38,5 @@ import React, {
   startDragging: () => void;
-  focusItem: () => void;
+
+  /** @param setDomFocus - Defaults to true. */
+  focusItem: (setDomFocus?: boolean) => void;
   // toggleSelectedState: () => void;
@@ -180,2 +182,6 @@ }
   showLiveDescription?: boolean;
+  shouldRenderChildren?: (
+    item: TreeItem<T>,
+    context: TreeItemRenderContext<C>
+  ) => boolean;
 
@@ -221,3 +227,7 @@ /**
   onSelectItems?: (items: TreeItemIndex[], treeId: string) => void; // TODO TreeItem instead of just index
-  onFocusItem?: (item: TreeItem<T>, treeId: string) => void;
+  onFocusItem?: (
+    item: TreeItem<T>,
+    treeId: string,
+    setDomFocus?: boolean
+  ) => void;
   onDrop?: (items: TreeItem<T>[], target: DraggingPosition) => void;
@@ -240,3 +250,10 @@ onPrimaryAction?: (items: TreeItem<T>, treeId: string) => void;
   invokePrimaryAction: (itemId: TreeItemIndex, treeID: string) => void;
-  focusItem: (itemId: TreeItemIndex, treeId: string) => void;
+
+  /** @param setDomFocus - Defaults to true. */
+  focusItem: (
+    itemId: TreeItemIndex,
+    treeId: string,
+    setDomFocus?: boolean
+  ) => void;
+
   moveFocusUp: (treeId: string) => void;
@@ -403,3 +420,6 @@ moveFocusDown: (treeId: string) => void;
   toggleItemSelectStatus: (itemId: TreeItemIndex) => void;
-  focusItem: (itemId: TreeItemIndex) => void;
+
+  /** @param setDomFocus - Defaults to true. */
+  focusItem: (itemId: TreeItemIndex, setDomFocus?: boolean) => void;
+
   moveFocusUp: () => void;
@@ -507,1 +527,9 @@ moveFocusDown: () => void;
 }
+
+export type HoveringPosition = {
+  linearIndex: number;
+  offset: 'bottom' | 'top' | undefined;
+
+  // is undefined if tree renderDepthOffset is not set or zero
+  indentation: number | undefined;
+};

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1303315

increased by3.37%

Number of package files

485

increased by1.46%

Lines of code

20243

increased by3.66%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes