react-complex-tree - npm Package Compare versions

Comparing version 2.4.2 to 2.4.3

lib/cjs/controlledEnvironment/useControlledTreeEnvironmentProps.js

@@ -44,9 +44,9 @@ "use strict";
     var onFocusItemHandler = (0, react_1.useCallback)(function (item, treeId, setDomFocus) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         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') {
+            var newItem = (_b = (_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, "\"]"))) !== null && _b !== void 0 ? _b : (_c = (0, utils_1.getDocument)()) === null || _c === void 0 ? void 0 : _c.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id]"));
+            if (((_f = (_e = (_d = (0, utils_1.getDocument)()) === null || _d === void 0 ? void 0 : _d.activeElement) === null || _e === void 0 ? void 0 : _e.attributes.getNamedItem('data-rct-search-input')) === null || _f === void 0 ? void 0 : _f.value) !== 'true') {
                 // Move DOM focus to item if the current focus is not on the search input
-                (_e = newItem === null || newItem === void 0 ? void 0 : newItem.focus) === null || _e === void 0 ? void 0 : _e.call(newItem);
+                (_g = newItem === null || newItem === void 0 ? void 0 : newItem.focus) === null || _g === void 0 ? void 0 : _g.call(newItem);
             }
@@ -58,6 +58,6 @@ else {
         }
-        if (((_f = viewStateRef.current[treeId]) === null || _f === void 0 ? void 0 : _f.focusedItem) === item.index) {
+        if (((_h = viewStateRef.current[treeId]) === null || _h === void 0 ? void 0 : _h.focusedItem) === item.index) {
             return;
         }
-        (_g = onFocusItemRef.current) === null || _g === void 0 ? void 0 : _g.call(onFocusItemRef, item, treeId);
+        (_j = onFocusItemRef.current) === null || _j === void 0 ? void 0 : _j.call(onFocusItemRef, item, treeId);
     }, [autoFocus, onFocusItemRef, viewStateRef]);
@@ -64,0 +64,0 @@ var registerTree = (0, react_1.useCallback)(function (tree) {

lib/cjs/drag/DraggingPositionEvaluation.js

@@ -193,3 +193,3 @@ "use strict";
         var _a = this.getParentOfLinearItem(itemLinearIndex, treeId), parentLinearIndex = _a.parentLinearIndex, parent = _a.parent;
-        if (potentialParents.find(function (p) { return p.index === parent.item; })) {
+        if (potentialParents.some(function (p) { return p.index === parent.item; })) {
             return true;
@@ -196,0 +196,0 @@ }

lib/cjs/drag/useCanDropAt.js

@@ -23,3 +23,4 @@ "use strict";
                 (!environment.canDropOnFolder && resolvedItem.isFolder) ||
-                (!environment.canDropOnNonFolder && !resolvedItem.isFolder)) {
+                (!environment.canDropOnNonFolder && !resolvedItem.isFolder) ||
+                draggingItems.some(function (draggingItem) { return draggingItem.index === draggingPosition.targetItem; })) {
                 return false;
@@ -26,0 +27,0 @@ }

lib/cjs/drag/useGetViableDragPositions.js

 "use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGetViableDragPositions = void 0;
+/* eslint-disable no-continue */
 var react_1 = require("react");
@@ -21,13 +13,36 @@ var useGetParentOfLinearItem_1 = require("./useGetParentOfLinearItem");
     var canDropAt = (0, useCanDropAt_1.useCanDropAt)();
+    var isDescendant = (0, react_1.useCallback)(function (treeId, itemLinearIndex, potentialParents) {
+        // based on DraggingPositionEvaluation.isDescendant()
+        var _a = getParentOfLinearItem(itemLinearIndex, treeId), parent = _a.parent, parentLinearIndex = _a.parentLinearIndex;
+        if (potentialParents.some(function (p) { return p.index === parent.item; }))
+            return true;
+        if (parent.depth === 0)
+            return false;
+        return isDescendant(treeId, parentLinearIndex, potentialParents);
+    }, [getParentOfLinearItem]);
     return (0, react_1.useCallback)(function (treeId, draggingItems) {
+        var _a, _b;
         var linearItems = environment.linearItems[treeId];
-        return linearItems
-            .map(function (_a, linearIndex) {
-            var _b, _c;
-            var item = _a.item, depth = _a.depth;
-            var parent = getParentOfLinearItem(linearIndex, treeId).parent;
-            var childIndex = environment.items[parent.item].children.indexOf(item);
+        var targets = [];
+        var skipUntilDepthIsLowerThan = -1;
+        for (var linearIndex = 0; linearIndex < linearItems.length; 
+        // eslint-disable-next-line no-plusplus
+        linearIndex++) {
+            var _c = linearItems[linearIndex], item = _c.item, depth = _c.depth;
+            if (skipUntilDepthIsLowerThan !== -1 &&
+                depth > skipUntilDepthIsLowerThan) {
+                continue;
+            }
+            else {
+                skipUntilDepthIsLowerThan = -1;
+            }
+            var parent_1 = getParentOfLinearItem(linearIndex, treeId).parent;
+            var childIndex = environment.items[parent_1.item].children.indexOf(item);
+            if (isDescendant(treeId, linearIndex, draggingItems)) {
+                skipUntilDepthIsLowerThan = depth + 1;
+                continue;
+            }
             var itemPosition = {
                 targetType: 'item',
-                parentItem: parent.item,
+                parentItem: parent_1.item,
                 targetItem: item,
@@ -40,3 +55,3 @@ linearIndex: linearIndex,
                 targetType: 'between-items',
-                parentItem: parent.item,
+                parentItem: parent_1.item,
                 linePosition: 'top',
@@ -50,3 +65,3 @@ childIndex: childIndex,
                 targetType: 'between-items',
-                parentItem: parent.item,
+                parentItem: parent_1.item,
                 linePosition: 'bottom',
@@ -58,10 +73,14 @@ linearIndex: linearIndex + 1,
             };
-            var skipTopPosition = depth === ((_c = (_b = linearItems[linearIndex - 1]) === null || _b === void 0 ? void 0 : _b.depth) !== null && _c !== void 0 ? _c : -1);
-            if (skipTopPosition) {
-                return [itemPosition, bottomPosition];
+            var skipTopPosition = depth === ((_b = (_a = linearItems[linearIndex - 1]) === null || _a === void 0 ? void 0 : _a.depth) !== null && _b !== void 0 ? _b : -1);
+            if (!skipTopPosition && canDropAt(topPosition, draggingItems)) {
+                targets.push(topPosition);
             }
-            return [topPosition, itemPosition, bottomPosition];
-        })
-            .reduce(function (a, b) { return __spreadArray(__spreadArray([], a, true), b, true); }, [])
-            .filter(function (position) { return canDropAt(position, draggingItems); });
+            if (canDropAt(itemPosition, draggingItems)) {
+                targets.push(itemPosition);
+            }
+            if (canDropAt(bottomPosition, draggingItems)) {
+                targets.push(bottomPosition);
+            }
+        }
+        return targets;
     }, [
@@ -72,4 +91,5 @@ canDropAt,
         getParentOfLinearItem,
+        isDescendant,
     ]);
 };
 exports.useGetViableDragPositions = useGetViableDragPositions;

lib/cjs/index.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export * from './controlledEnvironment/ControlledTreeEnvironment';
@@ -3,0 +2,0 @@ export * from './tree/Tree';

lib/cjs/renderers/createDefaultRenderers.d.ts

 import { AllTreeRenderProps } from '../types';
-export declare const createDefaultRenderers: (renderDepthOffset: number) => AllTreeRenderProps;
+export declare const createDefaultRenderers: (renderDepthOffset: number, rtl?: boolean) => AllTreeRenderProps;

lib/cjs/renderers/createDefaultRenderers.js

@@ -26,3 +26,3 @@ "use strict";
 };
-var createDefaultRenderers = function (renderDepthOffset) { return ({
+var createDefaultRenderers = function (renderDepthOffset, rtl) { return ({
     renderItemTitle: function (_a) {
@@ -43,3 +43,3 @@ var title = _a.title, context = _a.context, info = _a.info;
         // Icons from https://blueprintjs.com/docs/#icons
-        react_1.default.createElement("div", __assign({ className: cx(item.isFolder && 'rct-tree-item-arrow-isFolder', 'rct-tree-item-arrow') }, context.arrowProps), item.isFolder &&
+        react_1.default.createElement("div", __assign({ className: cx(item.isFolder && 'rct-tree-item-arrow-isFolder', context.isExpanded && 'rct-tree-item-arrow-expanded', 'rct-tree-item-arrow') }, context.arrowProps), item.isFolder &&
             (context.isExpanded ? (react_1.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
@@ -59,3 +59,3 @@ react_1.default.createElement("g", null,
         return (react_1.default.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { className: cx('rct-tree-item-li', item.isFolder && 'rct-tree-item-li-isFolder', 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: "".concat((depth + 1) * renderDepthOffset, "px") }, className: cx('rct-tree-item-title-container', item.isFolder && 'rct-tree-item-title-container-isFolder', 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 &&
+            react_1.default.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { '--depthOffset': "".concat((depth + 1) * renderDepthOffset, "px") }, className: cx('rct-tree-item-title-container', item.isFolder && 'rct-tree-item-title-container-isFolder', 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 &&
@@ -75,3 +75,3 @@ 'rct-tree-item-title-container-search-match') }),
         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') },
+        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', rtl && 'rct-rtl') },
             react_1.default.createElement("div", __assign({}, containerProps, { style: __assign({ minHeight: '30px' }, containerProps.style) }), children)));
@@ -78,0 +78,0 @@ },

lib/cjs/tree/TreeManager.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export declare const TreeManager: () => JSX.Element;

lib/cjs/treeItem/TreeItemChildren.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { TreeItemIndex } from '../types';
@@ -3,0 +2,0 @@ export declare const TreeItemChildren: (props: {

lib/cjs/treeItem/TreeItemElement.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { TreeItemIndex } from '../types';
@@ -3,0 +2,0 @@ export declare const TreeItemElement: (props: {

lib/cjs/treeItem/TreeItemRenamingInput.js

@@ -51,3 +51,3 @@ "use strict";
         onBlur: function (e) {
-            if (e.relatedTarget !== submitButtonRef.current) {
+            if (!e.relatedTarget || e.relatedTarget !== submitButtonRef.current) {
                 abort();
@@ -54,0 +54,0 @@ }

lib/cjs/useIsMounted.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export declare const useIsMounted: () => import("react").MutableRefObject<boolean>;

lib/esm/controlledEnvironment/useControlledTreeEnvironmentProps.js

@@ -41,9 +41,9 @@ var __assign = (this && this.__assign) || function () {
     var onFocusItemHandler = useCallback(function (item, treeId, setDomFocus) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         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') {
+            var newItem = (_b = (_a = getDocument()) === null || _a === void 0 ? void 0 : _a.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id=\"").concat(item.index, "\"]"))) !== null && _b !== void 0 ? _b : (_c = getDocument()) === null || _c === void 0 ? void 0 : _c.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id]"));
+            if (((_f = (_e = (_d = getDocument()) === null || _d === void 0 ? void 0 : _d.activeElement) === null || _e === void 0 ? void 0 : _e.attributes.getNamedItem('data-rct-search-input')) === null || _f === void 0 ? void 0 : _f.value) !== 'true') {
                 // Move DOM focus to item if the current focus is not on the search input
-                (_e = newItem === null || newItem === void 0 ? void 0 : newItem.focus) === null || _e === void 0 ? void 0 : _e.call(newItem);
+                (_g = newItem === null || newItem === void 0 ? void 0 : newItem.focus) === null || _g === void 0 ? void 0 : _g.call(newItem);
             }
@@ -55,6 +55,6 @@ else {
         }
-        if (((_f = viewStateRef.current[treeId]) === null || _f === void 0 ? void 0 : _f.focusedItem) === item.index) {
+        if (((_h = viewStateRef.current[treeId]) === null || _h === void 0 ? void 0 : _h.focusedItem) === item.index) {
             return;
         }
-        (_g = onFocusItemRef.current) === null || _g === void 0 ? void 0 : _g.call(onFocusItemRef, item, treeId);
+        (_j = onFocusItemRef.current) === null || _j === void 0 ? void 0 : _j.call(onFocusItemRef, item, treeId);
     }, [autoFocus, onFocusItemRef, viewStateRef]);
@@ -61,0 +61,0 @@ var registerTree = useCallback(function (tree) {

lib/esm/drag/DraggingPositionEvaluation.js

@@ -190,3 +190,3 @@ var DraggingPositionEvaluation = /** @class */ (function () {
         var _a = this.getParentOfLinearItem(itemLinearIndex, treeId), parentLinearIndex = _a.parentLinearIndex, parent = _a.parent;
-        if (potentialParents.find(function (p) { return p.index === parent.item; })) {
+        if (potentialParents.some(function (p) { return p.index === parent.item; })) {
             return true;
@@ -193,0 +193,0 @@ }

lib/esm/drag/useCanDropAt.js

@@ -20,3 +20,4 @@ import { useCallback } from 'react';
                 (!environment.canDropOnFolder && resolvedItem.isFolder) ||
-                (!environment.canDropOnNonFolder && !resolvedItem.isFolder)) {
+                (!environment.canDropOnNonFolder && !resolvedItem.isFolder) ||
+                draggingItems.some(function (draggingItem) { return draggingItem.index === draggingPosition.targetItem; })) {
                 return false;
@@ -23,0 +24,0 @@ }

lib/esm/drag/useGetViableDragPositions.js

@@ -1,10 +0,2 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
+/* eslint-disable no-continue */
 import { useCallback } from 'react';
@@ -18,13 +10,36 @@ import { useGetGetParentOfLinearItem } from './useGetParentOfLinearItem';
     var canDropAt = useCanDropAt();
+    var isDescendant = useCallback(function (treeId, itemLinearIndex, potentialParents) {
+        // based on DraggingPositionEvaluation.isDescendant()
+        var _a = getParentOfLinearItem(itemLinearIndex, treeId), parent = _a.parent, parentLinearIndex = _a.parentLinearIndex;
+        if (potentialParents.some(function (p) { return p.index === parent.item; }))
+            return true;
+        if (parent.depth === 0)
+            return false;
+        return isDescendant(treeId, parentLinearIndex, potentialParents);
+    }, [getParentOfLinearItem]);
     return useCallback(function (treeId, draggingItems) {
+        var _a, _b;
         var linearItems = environment.linearItems[treeId];
-        return linearItems
-            .map(function (_a, linearIndex) {
-            var _b, _c;
-            var item = _a.item, depth = _a.depth;
-            var parent = getParentOfLinearItem(linearIndex, treeId).parent;
-            var childIndex = environment.items[parent.item].children.indexOf(item);
+        var targets = [];
+        var skipUntilDepthIsLowerThan = -1;
+        for (var linearIndex = 0; linearIndex < linearItems.length; 
+        // eslint-disable-next-line no-plusplus
+        linearIndex++) {
+            var _c = linearItems[linearIndex], item = _c.item, depth = _c.depth;
+            if (skipUntilDepthIsLowerThan !== -1 &&
+                depth > skipUntilDepthIsLowerThan) {
+                continue;
+            }
+            else {
+                skipUntilDepthIsLowerThan = -1;
+            }
+            var parent_1 = getParentOfLinearItem(linearIndex, treeId).parent;
+            var childIndex = environment.items[parent_1.item].children.indexOf(item);
+            if (isDescendant(treeId, linearIndex, draggingItems)) {
+                skipUntilDepthIsLowerThan = depth + 1;
+                continue;
+            }
             var itemPosition = {
                 targetType: 'item',
-                parentItem: parent.item,
+                parentItem: parent_1.item,
                 targetItem: item,
@@ -37,3 +52,3 @@ linearIndex: linearIndex,
                 targetType: 'between-items',
-                parentItem: parent.item,
+                parentItem: parent_1.item,
                 linePosition: 'top',
@@ -47,3 +62,3 @@ childIndex: childIndex,
                 targetType: 'between-items',
-                parentItem: parent.item,
+                parentItem: parent_1.item,
                 linePosition: 'bottom',
@@ -55,10 +70,14 @@ linearIndex: linearIndex + 1,
             };
-            var skipTopPosition = depth === ((_c = (_b = linearItems[linearIndex - 1]) === null || _b === void 0 ? void 0 : _b.depth) !== null && _c !== void 0 ? _c : -1);
-            if (skipTopPosition) {
-                return [itemPosition, bottomPosition];
+            var skipTopPosition = depth === ((_b = (_a = linearItems[linearIndex - 1]) === null || _a === void 0 ? void 0 : _a.depth) !== null && _b !== void 0 ? _b : -1);
+            if (!skipTopPosition && canDropAt(topPosition, draggingItems)) {
+                targets.push(topPosition);
             }
-            return [topPosition, itemPosition, bottomPosition];
-        })
-            .reduce(function (a, b) { return __spreadArray(__spreadArray([], a, true), b, true); }, [])
-            .filter(function (position) { return canDropAt(position, draggingItems); });
+            if (canDropAt(itemPosition, draggingItems)) {
+                targets.push(itemPosition);
+            }
+            if (canDropAt(bottomPosition, draggingItems)) {
+                targets.push(bottomPosition);
+            }
+        }
+        return targets;
     }, [
@@ -69,3 +88,4 @@ canDropAt,
         getParentOfLinearItem,
+        isDescendant,
     ]);
 };

lib/esm/renderers/createDefaultRenderers.d.ts

 import { AllTreeRenderProps } from '../types';
-export declare const createDefaultRenderers: (renderDepthOffset: number) => AllTreeRenderProps;
+export declare const createDefaultRenderers: (renderDepthOffset: number, rtl?: boolean) => AllTreeRenderProps;

lib/esm/renderers/createDefaultRenderers.js

@@ -20,3 +20,3 @@ var __assign = (this && this.__assign) || function () {
 };
-export var createDefaultRenderers = function (renderDepthOffset) { return ({
+export var createDefaultRenderers = function (renderDepthOffset, rtl) { return ({
     renderItemTitle: function (_a) {
@@ -37,3 +37,3 @@ var title = _a.title, context = _a.context, info = _a.info;
         // Icons from https://blueprintjs.com/docs/#icons
-        React.createElement("div", __assign({ className: cx(item.isFolder && 'rct-tree-item-arrow-isFolder', 'rct-tree-item-arrow') }, context.arrowProps), item.isFolder &&
+        React.createElement("div", __assign({ className: cx(item.isFolder && 'rct-tree-item-arrow-isFolder', context.isExpanded && 'rct-tree-item-arrow-expanded', 'rct-tree-item-arrow') }, context.arrowProps), item.isFolder &&
             (context.isExpanded ? (React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
@@ -53,3 +53,3 @@ React.createElement("g", null,
         return (React.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { className: cx('rct-tree-item-li', item.isFolder && 'rct-tree-item-li-isFolder', 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: "".concat((depth + 1) * renderDepthOffset, "px") }, className: cx('rct-tree-item-title-container', item.isFolder && 'rct-tree-item-title-container-isFolder', 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 &&
+            React.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { '--depthOffset': "".concat((depth + 1) * renderDepthOffset, "px") }, className: cx('rct-tree-item-title-container', item.isFolder && 'rct-tree-item-title-container-isFolder', 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 &&
@@ -69,3 +69,3 @@ 'rct-tree-item-title-container-search-match') }),
         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') },
+        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', rtl && 'rct-rtl') },
             React.createElement("div", __assign({}, containerProps, { style: __assign({ minHeight: '30px' }, containerProps.style) }), children)));
@@ -72,0 +72,0 @@ },

lib/esm/treeItem/TreeItemRenamingInput.js

@@ -48,3 +48,3 @@ import { useRef, useState, } from 'react';
         onBlur: function (e) {
-            if (e.relatedTarget !== submitButtonRef.current) {
+            if (!e.relatedTarget || e.relatedTarget !== submitButtonRef.current) {
                 abort();
@@ -51,0 +51,0 @@ }

lib/esnext/controlledEnvironment/useControlledTreeEnvironmentProps.js

@@ -41,9 +41,9 @@ var __assign = (this && this.__assign) || function () {
     var onFocusItemHandler = useCallback(function (item, treeId, setDomFocus) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         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') {
+            var newItem = (_b = (_a = getDocument()) === null || _a === void 0 ? void 0 : _a.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id=\"").concat(item.index, "\"]"))) !== null && _b !== void 0 ? _b : (_c = getDocument()) === null || _c === void 0 ? void 0 : _c.querySelector("[data-rct-tree=\"".concat(treeId, "\"] [data-rct-item-id]"));
+            if (((_f = (_e = (_d = getDocument()) === null || _d === void 0 ? void 0 : _d.activeElement) === null || _e === void 0 ? void 0 : _e.attributes.getNamedItem('data-rct-search-input')) === null || _f === void 0 ? void 0 : _f.value) !== 'true') {
                 // Move DOM focus to item if the current focus is not on the search input
-                (_e = newItem === null || newItem === void 0 ? void 0 : newItem.focus) === null || _e === void 0 ? void 0 : _e.call(newItem);
+                (_g = newItem === null || newItem === void 0 ? void 0 : newItem.focus) === null || _g === void 0 ? void 0 : _g.call(newItem);
             }
@@ -55,6 +55,6 @@ else {
         }
-        if (((_f = viewStateRef.current[treeId]) === null || _f === void 0 ? void 0 : _f.focusedItem) === item.index) {
+        if (((_h = viewStateRef.current[treeId]) === null || _h === void 0 ? void 0 : _h.focusedItem) === item.index) {
             return;
         }
-        (_g = onFocusItemRef.current) === null || _g === void 0 ? void 0 : _g.call(onFocusItemRef, item, treeId);
+        (_j = onFocusItemRef.current) === null || _j === void 0 ? void 0 : _j.call(onFocusItemRef, item, treeId);
     }, [autoFocus, onFocusItemRef, viewStateRef]);
@@ -61,0 +61,0 @@ var registerTree = useCallback(function (tree) {

lib/esnext/drag/DraggingPositionEvaluation.js

@@ -190,3 +190,3 @@ var DraggingPositionEvaluation = /** @class */ (function () {
         var _a = this.getParentOfLinearItem(itemLinearIndex, treeId), parentLinearIndex = _a.parentLinearIndex, parent = _a.parent;
-        if (potentialParents.find(function (p) { return p.index === parent.item; })) {
+        if (potentialParents.some(function (p) { return p.index === parent.item; })) {
             return true;
@@ -193,0 +193,0 @@ }

lib/esnext/drag/useCanDropAt.js

@@ -20,3 +20,4 @@ import { useCallback } from 'react';
                 (!environment.canDropOnFolder && resolvedItem.isFolder) ||
-                (!environment.canDropOnNonFolder && !resolvedItem.isFolder)) {
+                (!environment.canDropOnNonFolder && !resolvedItem.isFolder) ||
+                draggingItems.some(function (draggingItem) { return draggingItem.index === draggingPosition.targetItem; })) {
                 return false;
@@ -23,0 +24,0 @@ }

lib/esnext/drag/useGetViableDragPositions.js

@@ -1,10 +0,2 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
+/* eslint-disable no-continue */
 import { useCallback } from 'react';
@@ -18,13 +10,36 @@ import { useGetGetParentOfLinearItem } from './useGetParentOfLinearItem';
     var canDropAt = useCanDropAt();
+    var isDescendant = useCallback(function (treeId, itemLinearIndex, potentialParents) {
+        // based on DraggingPositionEvaluation.isDescendant()
+        var _a = getParentOfLinearItem(itemLinearIndex, treeId), parent = _a.parent, parentLinearIndex = _a.parentLinearIndex;
+        if (potentialParents.some(function (p) { return p.index === parent.item; }))
+            return true;
+        if (parent.depth === 0)
+            return false;
+        return isDescendant(treeId, parentLinearIndex, potentialParents);
+    }, [getParentOfLinearItem]);
     return useCallback(function (treeId, draggingItems) {
+        var _a, _b;
         var linearItems = environment.linearItems[treeId];
-        return linearItems
-            .map(function (_a, linearIndex) {
-            var _b, _c;
-            var item = _a.item, depth = _a.depth;
-            var parent = getParentOfLinearItem(linearIndex, treeId).parent;
-            var childIndex = environment.items[parent.item].children.indexOf(item);
+        var targets = [];
+        var skipUntilDepthIsLowerThan = -1;
+        for (var linearIndex = 0; linearIndex < linearItems.length; 
+        // eslint-disable-next-line no-plusplus
+        linearIndex++) {
+            var _c = linearItems[linearIndex], item = _c.item, depth = _c.depth;
+            if (skipUntilDepthIsLowerThan !== -1 &&
+                depth > skipUntilDepthIsLowerThan) {
+                continue;
+            }
+            else {
+                skipUntilDepthIsLowerThan = -1;
+            }
+            var parent_1 = getParentOfLinearItem(linearIndex, treeId).parent;
+            var childIndex = environment.items[parent_1.item].children.indexOf(item);
+            if (isDescendant(treeId, linearIndex, draggingItems)) {
+                skipUntilDepthIsLowerThan = depth + 1;
+                continue;
+            }
             var itemPosition = {
                 targetType: 'item',
-                parentItem: parent.item,
+                parentItem: parent_1.item,
                 targetItem: item,
@@ -37,3 +52,3 @@ linearIndex: linearIndex,
                 targetType: 'between-items',
-                parentItem: parent.item,
+                parentItem: parent_1.item,
                 linePosition: 'top',
@@ -47,3 +62,3 @@ childIndex: childIndex,
                 targetType: 'between-items',
-                parentItem: parent.item,
+                parentItem: parent_1.item,
                 linePosition: 'bottom',
@@ -55,10 +70,14 @@ linearIndex: linearIndex + 1,
             };
-            var skipTopPosition = depth === ((_c = (_b = linearItems[linearIndex - 1]) === null || _b === void 0 ? void 0 : _b.depth) !== null && _c !== void 0 ? _c : -1);
-            if (skipTopPosition) {
-                return [itemPosition, bottomPosition];
+            var skipTopPosition = depth === ((_b = (_a = linearItems[linearIndex - 1]) === null || _a === void 0 ? void 0 : _a.depth) !== null && _b !== void 0 ? _b : -1);
+            if (!skipTopPosition && canDropAt(topPosition, draggingItems)) {
+                targets.push(topPosition);
             }
-            return [topPosition, itemPosition, bottomPosition];
-        })
-            .reduce(function (a, b) { return __spreadArray(__spreadArray([], a, true), b, true); }, [])
-            .filter(function (position) { return canDropAt(position, draggingItems); });
+            if (canDropAt(itemPosition, draggingItems)) {
+                targets.push(itemPosition);
+            }
+            if (canDropAt(bottomPosition, draggingItems)) {
+                targets.push(bottomPosition);
+            }
+        }
+        return targets;
     }, [
@@ -69,3 +88,4 @@ canDropAt,
         getParentOfLinearItem,
+        isDescendant,
     ]);
 };

lib/esnext/renderers/createDefaultRenderers.d.ts

 import { AllTreeRenderProps } from '../types';
-export declare const createDefaultRenderers: (renderDepthOffset: number) => AllTreeRenderProps;
+export declare const createDefaultRenderers: (renderDepthOffset: number, rtl?: boolean) => AllTreeRenderProps;

lib/esnext/renderers/createDefaultRenderers.js

@@ -20,3 +20,3 @@ var __assign = (this && this.__assign) || function () {
 };
-export var createDefaultRenderers = function (renderDepthOffset) { return ({
+export var createDefaultRenderers = function (renderDepthOffset, rtl) { return ({
     renderItemTitle: function (_a) {
@@ -37,3 +37,3 @@ var title = _a.title, context = _a.context, info = _a.info;
         // Icons from https://blueprintjs.com/docs/#icons
-        React.createElement("div", __assign({ className: cx(item.isFolder && 'rct-tree-item-arrow-isFolder', 'rct-tree-item-arrow') }, context.arrowProps), item.isFolder &&
+        React.createElement("div", __assign({ className: cx(item.isFolder && 'rct-tree-item-arrow-isFolder', context.isExpanded && 'rct-tree-item-arrow-expanded', 'rct-tree-item-arrow') }, context.arrowProps), item.isFolder &&
             (context.isExpanded ? (React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
@@ -53,3 +53,3 @@ React.createElement("g", null,
         return (React.createElement("li", __assign({}, context.itemContainerWithChildrenProps, { className: cx('rct-tree-item-li', item.isFolder && 'rct-tree-item-li-isFolder', 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: "".concat((depth + 1) * renderDepthOffset, "px") }, className: cx('rct-tree-item-title-container', item.isFolder && 'rct-tree-item-title-container-isFolder', 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 &&
+            React.createElement("div", __assign({}, context.itemContainerWithoutChildrenProps, { style: { '--depthOffset': "".concat((depth + 1) * renderDepthOffset, "px") }, className: cx('rct-tree-item-title-container', item.isFolder && 'rct-tree-item-title-container-isFolder', 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 &&
@@ -69,3 +69,3 @@ 'rct-tree-item-title-container-search-match') }),
         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') },
+        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', rtl && 'rct-rtl') },
             React.createElement("div", __assign({}, containerProps, { style: __assign({ minHeight: '30px' }, containerProps.style) }), children)));
@@ -72,0 +72,0 @@ },

lib/esnext/treeItem/TreeItemRenamingInput.js

@@ -48,3 +48,3 @@ import { useRef, useState, } from 'react';
         onBlur: function (e) {
-            if (e.relatedTarget !== submitButtonRef.current) {
+            if (!e.relatedTarget || e.relatedTarget !== submitButtonRef.current) {
                 abort();
@@ -51,0 +51,0 @@ }

package.json

 {
   "name": "react-complex-tree",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "main": "lib/cjs/index.js",
@@ -38,3 +38,3 @@ "module": "lib/esm/index.js",
     "cpy-cli": "^3.1.1",
-    "demodata": "^2.4.2",
+    "demodata": "^2.4.3",
     "jest": "^29.2.2",
@@ -71,3 +71,3 @@ "jest-dom": "^4.0.0",
   },
-  "gitHead": "02ef31193f926ead10d15ead6332b864aff21ca1"
+  "gitHead": "da481d50021582c9c7c5cb39a031d81b6689c858"
 }

src/controlledEnvironment/useControlledTreeEnvironmentProps.ts

@@ -50,5 +50,9 @@ import { useCallback, useMemo, useState } from 'react';
       if ((autoFocus ?? true) && setDomFocus) {
-        const newItem = getDocument()?.querySelector(
-          `[data-rct-tree="${treeId}"] [data-rct-item-id="${item.index}"]`
-        );
+        const newItem =
+          getDocument()?.querySelector(
+            `[data-rct-tree="${treeId}"] [data-rct-item-id="${item.index}"]`
+          ) ??
+          getDocument()?.querySelector(
+            `[data-rct-tree="${treeId}"] [data-rct-item-id]`
+          );
 
@@ -55,0 +59,0 @@ if (

src/drag/DraggingPositionEvaluation.ts

@@ -301,3 +301,3 @@ import {
 
-    if (potentialParents.find(p => p.index === parent.item)) {
+    if (potentialParents.some(p => p.index === parent.item)) {
       return true;
@@ -304,0 +304,0 @@ }

src/drag/useCanDropAt.ts

@@ -23,3 +23,6 @@ import { useCallback } from 'react';
           (!environment.canDropOnFolder && resolvedItem.isFolder) ||
-          (!environment.canDropOnNonFolder && !resolvedItem.isFolder)
+          (!environment.canDropOnNonFolder && !resolvedItem.isFolder) ||
+          draggingItems.some(
+            draggingItem => draggingItem.index === draggingPosition.targetItem
+          )
         ) {
@@ -26,0 +29,0 @@ return false;

src/drag/useGetViableDragPositions.ts

@@ -0,1 +1,2 @@
+/* eslint-disable no-continue */
 import { useCallback } from 'react';
@@ -12,50 +13,92 @@ import { DraggingPosition, TreeItem } from '../types';
 
+  const isDescendant = useCallback(
+    (treeId: string, itemLinearIndex: number, potentialParents: TreeItem[]) => {
+      // based on DraggingPositionEvaluation.isDescendant()
+      const { parent, parentLinearIndex } = getParentOfLinearItem(
+        itemLinearIndex,
+        treeId
+      );
+      if (potentialParents.some(p => p.index === parent.item)) return true;
+      if (parent.depth === 0) return false;
+      return isDescendant(treeId, parentLinearIndex, potentialParents);
+    },
+    [getParentOfLinearItem]
+  );
+
   return useCallback(
     (treeId: string, draggingItems: TreeItem[]) => {
       const linearItems = environment.linearItems[treeId];
-      return linearItems
-        .map<DraggingPosition[]>(({ item, depth }, linearIndex) => {
-          const { parent } = getParentOfLinearItem(linearIndex, treeId);
-          const childIndex =
-            environment.items[parent.item].children!.indexOf(item);
+      const targets: DraggingPosition[] = [];
+      let skipUntilDepthIsLowerThan = -1;
 
-          const itemPosition: DraggingPosition = {
-            targetType: 'item',
-            parentItem: parent.item,
-            targetItem: item,
-            linearIndex,
-            depth,
-            treeId,
-          };
+      for (
+        let linearIndex = 0;
+        linearIndex < linearItems.length;
+        // eslint-disable-next-line no-plusplus
+        linearIndex++
+      ) {
+        const { item, depth } = linearItems[linearIndex];
 
-          const topPosition: DraggingPosition = {
-            targetType: 'between-items',
-            parentItem: parent.item,
-            linePosition: 'top',
-            childIndex,
-            depth,
-            treeId,
-            linearIndex,
-          };
+        if (
+          skipUntilDepthIsLowerThan !== -1 &&
+          depth > skipUntilDepthIsLowerThan
+        ) {
+          continue;
+        } else {
+          skipUntilDepthIsLowerThan = -1;
+        }
 
-          const bottomPosition: DraggingPosition = {
-            targetType: 'between-items',
-            parentItem: parent.item,
-            linePosition: 'bottom',
-            linearIndex: linearIndex + 1,
-            childIndex: childIndex + 1,
-            depth,
-            treeId,
-          };
+        const { parent } = getParentOfLinearItem(linearIndex, treeId);
+        const childIndex =
+          environment.items[parent.item].children!.indexOf(item);
 
-          const skipTopPosition =
-            depth === (linearItems[linearIndex - 1]?.depth ?? -1);
+        if (isDescendant(treeId, linearIndex, draggingItems)) {
+          skipUntilDepthIsLowerThan = depth + 1;
+          continue;
+        }
 
-          if (skipTopPosition) {
-            return [itemPosition, bottomPosition];
-          }
-          return [topPosition, itemPosition, bottomPosition];
-        })
-        .reduce((a, b) => [...a, ...b], [])
-        .filter(position => canDropAt(position, draggingItems));
+        const itemPosition: DraggingPosition = {
+          targetType: 'item',
+          parentItem: parent.item,
+          targetItem: item,
+          linearIndex,
+          depth,
+          treeId,
+        };
+
+        const topPosition: DraggingPosition = {
+          targetType: 'between-items',
+          parentItem: parent.item,
+          linePosition: 'top',
+          childIndex,
+          depth,
+          treeId,
+          linearIndex,
+        };
+
+        const bottomPosition: DraggingPosition = {
+          targetType: 'between-items',
+          parentItem: parent.item,
+          linePosition: 'bottom',
+          linearIndex: linearIndex + 1,
+          childIndex: childIndex + 1,
+          depth,
+          treeId,
+        };
+
+        const skipTopPosition =
+          depth === (linearItems[linearIndex - 1]?.depth ?? -1);
+
+        if (!skipTopPosition && canDropAt(topPosition, draggingItems)) {
+          targets.push(topPosition);
+        }
+        if (canDropAt(itemPosition, draggingItems)) {
+          targets.push(itemPosition);
+        }
+        if (canDropAt(bottomPosition, draggingItems)) {
+          targets.push(bottomPosition);
+        }
+      }
+
+      return targets;
     },
@@ -67,4 +110,5 @@ [
       getParentOfLinearItem,
+      isDescendant,
     ]
   );
 };

No alert changes

Improved metrics

Total package byte prevSize

1319258

increased by0.69%

Lines of code

20515

increased by0.9%

No dependency changes