react-complex-tree - npm Package Compare versions

Comparing version 2.3.2 to 2.3.3

lib/cjs/controlledEnvironment/DragAndDropProvider.js

@@ -37,3 +37,4 @@ "use strict";
 var layoutUtils_1 = require("./layoutUtils");
-var use_stable_handler_1 = require("../use-stable-handler");
+var useStableHandler_1 = require("../useStableHandler");
+var useGetOriginalItemOrder_1 = require("../useGetOriginalItemOrder");
 var DragAndDropContext = React.createContext(null);
@@ -55,2 +56,3 @@ var useDragAndDrop = function () { return React.useContext(DragAndDropContext); };
     var callSoon = (0, useCallSoon_1.useCallSoon)();
+    var getOriginalItemOrder = (0, useGetOriginalItemOrder_1.useGetOriginalItemOrder)();
     var resetProgrammaticDragIndexForCurrentTree = (0, react_1.useCallback)(function (viableDragPositions, draggingItems) {
@@ -137,3 +139,3 @@ var _a;
     var onDragOverTreeHandler = (0, useOnDragOverTreeHandler_1.useOnDragOverTreeHandler)(dragCode, setDragCode, draggingItems, itemHeight, setDraggingPosition, performDrag);
-    var onDropHandler = (0, use_stable_handler_1.useStableHandler)(function () {
+    var onDropHandler = (0, useStableHandler_1.useStableHandler)(function () {
         if (draggingItems && draggingPosition && environment.onDrop) {
@@ -176,3 +178,3 @@ environment.onDrop(draggingItems, draggingPosition);
             }
-            var resolvedDraggingItems = draggingItems_1.map(function (id) { return environment.items[id]; });
+            var resolvedDraggingItems = getOriginalItemOrder(environment.activeTreeId, draggingItems_1.map(function (id) { return environment.items[id]; }));
             if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
@@ -187,3 +189,3 @@ return;
         }
-    }, [onStartDraggingItems, environment]);
+    }, [environment, getOriginalItemOrder, onStartDraggingItems]);
     var abortProgrammaticDrag = (0, react_1.useCallback)(function () {
@@ -190,0 +192,0 @@ resetState();

lib/cjs/controlledEnvironment/useOnDragOverTreeHandler.js

@@ -7,3 +7,3 @@ "use strict";
 var layoutUtils_1 = require("./layoutUtils");
-var use_stable_handler_1 = require("../use-stable-handler");
+var useStableHandler_1 = require("../useStableHandler");
 var getHoveringPosition = function (clientY, treeTop, itemHeight, linearItems, treeId, items, canDropOnFolder, canDropOnNonFolder, canReorderItems) {
@@ -54,3 +54,3 @@ var hoveringPosition = (clientY - treeTop) / itemHeight;
     var isDescendant = useIsDescendant();
-    return (0, use_stable_handler_1.useStableHandler)(function (e, treeId, containerRef) {
+    return (0, useStableHandler_1.useStableHandler)(function (e, treeId, containerRef) {
         var _a, _b, _c, _d;
@@ -57,0 +57,0 @@ if (!draggingItems) {

lib/cjs/index.d.ts

@@ -7,1 +7,14 @@ export * from './controlledEnvironment/ControlledTreeEnvironment';
 export * from './renderers';
+export * from './treeItem/useTreeItemRenderContext';
+export * from './controlledEnvironment/useControlledTreeEnvironmentProps';
+export declare const INTERNALS: {
+    TreeItemElement: (props: {
+        itemIndex: import("./types").TreeItemIndex;
+        depth: number;
+    }) => JSX.Element;
+    TreeItemChildren: (props: {
+        children: import("./types").TreeItemIndex[];
+        depth: number;
+        parentId: import("./types").TreeItemIndex;
+    }) => JSX.Element;
+};

lib/cjs/index.js

@@ -17,2 +17,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.INTERNALS = void 0;
+var TreeItemElement_1 = require("./treeItem/TreeItemElement");
+var TreeItemChildren_1 = require("./treeItem/TreeItemChildren");
 __exportStar(require("./controlledEnvironment/ControlledTreeEnvironment"), exports);
@@ -24,1 +27,7 @@ __exportStar(require("./tree/Tree"), exports);
 __exportStar(require("./renderers"), exports);
+__exportStar(require("./treeItem/useTreeItemRenderContext"), exports);
+__exportStar(require("./controlledEnvironment/useControlledTreeEnvironmentProps"), exports);
+exports.INTERNALS = {
+    TreeItemElement: TreeItemElement_1.TreeItemElement,
+    TreeItemChildren: TreeItemChildren_1.TreeItemChildren,
+};

lib/cjs/tree/useMoveFocusToIndex.js

@@ -8,3 +8,3 @@ "use strict";
 var useLinearItems_1 = require("../controlledEnvironment/useLinearItems");
-var use_stable_handler_1 = require("../use-stable-handler");
+var useStableHandler_1 = require("../useStableHandler");
 var useMoveFocusToIndex = function () {
@@ -15,3 +15,3 @@ var treeId = (0, Tree_1.useTree)().treeId;
     var viewState = (0, useViewState_1.useViewState)();
-    return (0, use_stable_handler_1.useStableHandler)(function (computeNewIndex) {
+    return (0, useStableHandler_1.useStableHandler)(function (computeNewIndex) {
         var _a;
@@ -18,0 +18,0 @@ var currentIndex = (_a = linearItems.findIndex(function (item) { return item.item === viewState.focusedItem; })) !== null && _a !== void 0 ? _a : 0;

lib/cjs/treeItem/TreeItemChildren.js

@@ -8,3 +8,3 @@ "use strict";
 var react_1 = __importDefault(require("react"));
-var TreeItem_1 = require("./TreeItem");
+var TreeItemElement_1 = require("./TreeItemElement");
 var Tree_1 = require("../tree/Tree");
@@ -16,3 +16,3 @@ var TreeItemChildren = function (props) {
         var child = _b[_i];
-        childElements.push(react_1.default.createElement(TreeItem_1.TreeItem, { key: child, itemIndex: child, depth: props.depth }));
+        childElements.push(react_1.default.createElement(TreeItemElement_1.TreeItemElement, { key: child, itemIndex: child, depth: props.depth }));
     }
@@ -19,0 +19,0 @@ if (childElements.length === 0) {

lib/cjs/treeItem/useTreeItemRenderContext.js

@@ -31,2 +31,3 @@ "use strict";
 var useSelectUpTo_1 = require("../tree/useSelectUpTo");
+var useGetOriginalItemOrder_1 = require("../useGetOriginalItemOrder");
 // TODO restructure file. Everything into one hook file without helper methods, let all props be generated outside (InteractionManager and AccessibilityPropsManager), ...
@@ -41,2 +42,3 @@ var useTreeItemRenderContext = function (item) {
     var itemTitle = item && environment.getItemTitle(item);
+    var getOriginalItemOrder = (0, useGetOriginalItemOrder_1.useGetOriginalItemOrder)();
     var isSearchMatching = (0, react_1.useMemo)(function () {
@@ -130,3 +132,4 @@ var _a;
                 if (canDrag) {
-                    dnd.onStartDraggingItems(selectedItems.map(function (id) { return environment.items[id]; }), treeId);
+                    var orderedItems = getOriginalItemOrder(treeId, selectedItems.map(function (id) { return environment.items[id]; }));
+                    dnd.onStartDraggingItems(orderedItems, treeId);
                 }
@@ -181,3 +184,2 @@ },
             tabIndex: -1,
-            // TODO alternative interaction modes
         };
@@ -206,4 +208,5 @@ var viewStateFlags = !viewState
         setRenamingItem,
+        getOriginalItemOrder,
     ]);
 };
 exports.useTreeItemRenderContext = useTreeItemRenderContext;

lib/cjs/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -184,3 +184,3 @@ "use strict";
         }); }, onDrop: function (items, target) { return __awaiter(void 0, void 0, void 0, function () {
-            var promises, _loop_1, _i, items_1, item, state_1;
+            var promises, orderedItems, _loop_1, _i, orderedItems_1, item, state_1;
             var _a, _b, _c, _d, _e;
@@ -191,2 +191,3 @@ return __generator(this, function (_f) {
                         promises = [];
+                        orderedItems = target.targetType === 'between-items' ? __spreadArray([], items, true).reverse() : items;
                         _loop_1 = function (item) {
@@ -229,4 +230,4 @@ var parent_1 = Object.values(currentItems).find(function (potentialParent) { var _a; return (_a = potentialParent.children) === null || _a === void 0 ? void 0 : _a.includes(item.index); });
                         };
-                        for (_i = 0, items_1 = items; _i < items_1.length; _i++) {
-                            item = items_1[_i];
+                        for (_i = 0, orderedItems_1 = orderedItems; _i < orderedItems_1.length; _i++) {
+                            item = orderedItems_1[_i];
                             state_1 = _loop_1(item);
@@ -233,0 +234,0 @@ if (typeof state_1 === "object")

lib/cjs/useHtmlElementEventListener.js

@@ -5,5 +5,5 @@ "use strict";
 var react_1 = require("react");
-var use_stable_handler_1 = require("./use-stable-handler");
+var useStableHandler_1 = require("./useStableHandler");
 var useHtmlElementEventListener = function (element, type, listener) {
-    var stableListener = (0, use_stable_handler_1.useStableHandler)(listener);
+    var stableListener = (0, useStableHandler_1.useStableHandler)(listener);
     (0, react_1.useEffect)(function () {
@@ -10,0 +10,0 @@ if (element) {

lib/esm/controlledEnvironment/DragAndDropProvider.js

@@ -11,3 +11,4 @@ import * as React from 'react';
 import { computeItemHeight } from './layoutUtils';
-import { useStableHandler } from '../use-stable-handler';
+import { useStableHandler } from '../useStableHandler';
+import { useGetOriginalItemOrder } from '../useGetOriginalItemOrder';
 var DragAndDropContext = React.createContext(null);
@@ -28,2 +29,3 @@ export var useDragAndDrop = function () { return React.useContext(DragAndDropContext); };
     var callSoon = useCallSoon();
+    var getOriginalItemOrder = useGetOriginalItemOrder();
     var resetProgrammaticDragIndexForCurrentTree = useCallback(function (viableDragPositions, draggingItems) {
@@ -148,3 +150,3 @@ var _a;
             }
-            var resolvedDraggingItems = draggingItems_1.map(function (id) { return environment.items[id]; });
+            var resolvedDraggingItems = getOriginalItemOrder(environment.activeTreeId, draggingItems_1.map(function (id) { return environment.items[id]; }));
             if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
@@ -159,3 +161,3 @@ return;
         }
-    }, [onStartDraggingItems, environment]);
+    }, [environment, getOriginalItemOrder, onStartDraggingItems]);
     var abortProgrammaticDrag = useCallback(function () {
@@ -162,0 +164,0 @@ resetState();

lib/esm/controlledEnvironment/useOnDragOverTreeHandler.js

 import { useTreeEnvironment } from './ControlledTreeEnvironment';
 import { useGetGetParentOfLinearItem } from './useGetParentOfLinearItem';
 import { isOutsideOfContainer } from './layoutUtils';
-import { useStableHandler } from '../use-stable-handler';
+import { useStableHandler } from '../useStableHandler';
 var getHoveringPosition = function (clientY, treeTop, itemHeight, linearItems, treeId, items, canDropOnFolder, canDropOnNonFolder, canReorderItems) {
@@ -6,0 +6,0 @@ var hoveringPosition = (clientY - treeTop) / itemHeight;

lib/esm/index.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 export * from './controlledEnvironment/ControlledTreeEnvironment';
@@ -7,1 +8,14 @@ export * from './tree/Tree';
 export * from './renderers';
+export * from './treeItem/useTreeItemRenderContext';
+export * from './controlledEnvironment/useControlledTreeEnvironmentProps';
+export declare const INTERNALS: {
+    TreeItemElement: (props: {
+        itemIndex: import("./types").TreeItemIndex;
+        depth: number;
+    }) => JSX.Element;
+    TreeItemChildren: (props: {
+        children: import("./types").TreeItemIndex[];
+        depth: number;
+        parentId: import("./types").TreeItemIndex;
+    }) => JSX.Element;
+};

lib/esm/index.js

@@ -0,1 +1,3 @@
+import { TreeItemElement } from './treeItem/TreeItemElement';
+import { TreeItemChildren } from './treeItem/TreeItemChildren';
 export * from './controlledEnvironment/ControlledTreeEnvironment';
@@ -7,1 +9,7 @@ export * from './tree/Tree';
 export * from './renderers';
+export * from './treeItem/useTreeItemRenderContext';
+export * from './controlledEnvironment/useControlledTreeEnvironmentProps';
+export var INTERNALS = {
+    TreeItemElement: TreeItemElement,
+    TreeItemChildren: TreeItemChildren,
+};

lib/esm/tree/useMoveFocusToIndex.js

@@ -5,3 +5,3 @@ import { useViewState } from './useViewState';
 import { useLinearItems } from '../controlledEnvironment/useLinearItems';
-import { useStableHandler } from '../use-stable-handler';
+import { useStableHandler } from '../useStableHandler';
 export var useMoveFocusToIndex = function () {
@@ -8,0 +8,0 @@ var treeId = useTree().treeId;

lib/esm/treeItem/TreeItemChildren.js

 import React from 'react';
-import { TreeItem } from './TreeItem';
+import { TreeItemElement } from './TreeItemElement';
 import { useTree } from '../tree/Tree';
@@ -9,3 +9,3 @@ export var TreeItemChildren = function (props) {
         var child = _b[_i];
-        childElements.push(React.createElement(TreeItem, { key: child, itemIndex: child, depth: props.depth }));
+        childElements.push(React.createElement(TreeItemElement, { key: child, itemIndex: child, depth: props.depth }));
     }
@@ -12,0 +12,0 @@ if (childElements.length === 0) {

lib/esm/treeItem/useTreeItemRenderContext.js

@@ -28,2 +28,3 @@ var __assign = (this && this.__assign) || function () {
 import { useSelectUpTo } from '../tree/useSelectUpTo';
+import { useGetOriginalItemOrder } from '../useGetOriginalItemOrder';
 // TODO restructure file. Everything into one hook file without helper methods, let all props be generated outside (InteractionManager and AccessibilityPropsManager), ...
@@ -38,2 +39,3 @@ export var useTreeItemRenderContext = function (item) {
     var itemTitle = item && environment.getItemTitle(item);
+    var getOriginalItemOrder = useGetOriginalItemOrder();
     var isSearchMatching = useMemo(function () {
@@ -127,3 +129,4 @@ var _a;
                 if (canDrag) {
-                    dnd.onStartDraggingItems(selectedItems.map(function (id) { return environment.items[id]; }), treeId);
+                    var orderedItems = getOriginalItemOrder(treeId, selectedItems.map(function (id) { return environment.items[id]; }));
+                    dnd.onStartDraggingItems(orderedItems, treeId);
                 }
@@ -178,3 +181,2 @@ },
             tabIndex: -1,
-            // TODO alternative interaction modes
         };
@@ -203,3 +205,4 @@ var viewStateFlags = !viewState
         setRenamingItem,
+        getOriginalItemOrder,
     ]);
 };

lib/esm/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -158,3 +158,3 @@ var __assign = (this && this.__assign) || function () {
         }); }, onDrop: function (items, target) { return __awaiter(void 0, void 0, void 0, function () {
-            var promises, _loop_1, _i, items_1, item, state_1;
+            var promises, orderedItems, _loop_1, _i, orderedItems_1, item, state_1;
             var _a, _b, _c, _d, _e;
@@ -165,2 +165,3 @@ return __generator(this, function (_f) {
                         promises = [];
+                        orderedItems = target.targetType === 'between-items' ? __spreadArray([], items, true).reverse() : items;
                         _loop_1 = function (item) {
@@ -203,4 +204,4 @@ var parent_1 = Object.values(currentItems).find(function (potentialParent) { var _a; return (_a = potentialParent.children) === null || _a === void 0 ? void 0 : _a.includes(item.index); });
                         };
-                        for (_i = 0, items_1 = items; _i < items_1.length; _i++) {
-                            item = items_1[_i];
+                        for (_i = 0, orderedItems_1 = orderedItems; _i < orderedItems_1.length; _i++) {
+                            item = orderedItems_1[_i];
                             state_1 = _loop_1(item);
@@ -207,0 +208,0 @@ if (typeof state_1 === "object")

lib/esm/useHtmlElementEventListener.js

 import { useEffect } from 'react';
-import { useStableHandler } from './use-stable-handler';
+import { useStableHandler } from './useStableHandler';
 export var useHtmlElementEventListener = function (element, type, listener) {
@@ -4,0 +4,0 @@ var stableListener = useStableHandler(listener);

lib/esnext/controlledEnvironment/DragAndDropProvider.js

@@ -11,3 +11,4 @@ import * as React from 'react';
 import { computeItemHeight } from './layoutUtils';
-import { useStableHandler } from '../use-stable-handler';
+import { useStableHandler } from '../useStableHandler';
+import { useGetOriginalItemOrder } from '../useGetOriginalItemOrder';
 var DragAndDropContext = React.createContext(null);
@@ -28,2 +29,3 @@ export var useDragAndDrop = function () { return React.useContext(DragAndDropContext); };
     var callSoon = useCallSoon();
+    var getOriginalItemOrder = useGetOriginalItemOrder();
     var resetProgrammaticDragIndexForCurrentTree = useCallback(function (viableDragPositions, draggingItems) {
@@ -148,3 +150,3 @@ var _a;
             }
-            var resolvedDraggingItems = draggingItems_1.map(function (id) { return environment.items[id]; });
+            var resolvedDraggingItems = getOriginalItemOrder(environment.activeTreeId, draggingItems_1.map(function (id) { return environment.items[id]; }));
             if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
@@ -159,3 +161,3 @@ return;
         }
-    }, [onStartDraggingItems, environment]);
+    }, [environment, getOriginalItemOrder, onStartDraggingItems]);
     var abortProgrammaticDrag = useCallback(function () {
@@ -162,0 +164,0 @@ resetState();

lib/esnext/controlledEnvironment/useOnDragOverTreeHandler.js

 import { useTreeEnvironment } from './ControlledTreeEnvironment';
 import { useGetGetParentOfLinearItem } from './useGetParentOfLinearItem';
 import { isOutsideOfContainer } from './layoutUtils';
-import { useStableHandler } from '../use-stable-handler';
+import { useStableHandler } from '../useStableHandler';
 var getHoveringPosition = function (clientY, treeTop, itemHeight, linearItems, treeId, items, canDropOnFolder, canDropOnNonFolder, canReorderItems) {
@@ -6,0 +6,0 @@ var hoveringPosition = (clientY - treeTop) / itemHeight;

lib/esnext/index.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 export * from './controlledEnvironment/ControlledTreeEnvironment';
@@ -7,1 +8,14 @@ export * from './tree/Tree';
 export * from './renderers';
+export * from './treeItem/useTreeItemRenderContext';
+export * from './controlledEnvironment/useControlledTreeEnvironmentProps';
+export declare const INTERNALS: {
+    TreeItemElement: (props: {
+        itemIndex: import("./types").TreeItemIndex;
+        depth: number;
+    }) => JSX.Element;
+    TreeItemChildren: (props: {
+        children: import("./types").TreeItemIndex[];
+        depth: number;
+        parentId: import("./types").TreeItemIndex;
+    }) => JSX.Element;
+};

lib/esnext/index.js

@@ -0,1 +1,3 @@
+import { TreeItemElement } from './treeItem/TreeItemElement';
+import { TreeItemChildren } from './treeItem/TreeItemChildren';
 export * from './controlledEnvironment/ControlledTreeEnvironment';
@@ -7,1 +9,7 @@ export * from './tree/Tree';
 export * from './renderers';
+export * from './treeItem/useTreeItemRenderContext';
+export * from './controlledEnvironment/useControlledTreeEnvironmentProps';
+export var INTERNALS = {
+    TreeItemElement: TreeItemElement,
+    TreeItemChildren: TreeItemChildren,
+};

lib/esnext/tree/useMoveFocusToIndex.js

@@ -5,3 +5,3 @@ import { useViewState } from './useViewState';
 import { useLinearItems } from '../controlledEnvironment/useLinearItems';
-import { useStableHandler } from '../use-stable-handler';
+import { useStableHandler } from '../useStableHandler';
 export var useMoveFocusToIndex = function () {
@@ -8,0 +8,0 @@ var treeId = useTree().treeId;

lib/esnext/treeItem/TreeItemChildren.js

 import React from 'react';
-import { TreeItem } from './TreeItem';
+import { TreeItemElement } from './TreeItemElement';
 import { useTree } from '../tree/Tree';
@@ -9,3 +9,3 @@ export var TreeItemChildren = function (props) {
         var child = _b[_i];
-        childElements.push(React.createElement(TreeItem, { key: child, itemIndex: child, depth: props.depth }));
+        childElements.push(React.createElement(TreeItemElement, { key: child, itemIndex: child, depth: props.depth }));
     }
@@ -12,0 +12,0 @@ if (childElements.length === 0) {

lib/esnext/treeItem/useTreeItemRenderContext.js

@@ -28,2 +28,3 @@ var __assign = (this && this.__assign) || function () {
 import { useSelectUpTo } from '../tree/useSelectUpTo';
+import { useGetOriginalItemOrder } from '../useGetOriginalItemOrder';
 // TODO restructure file. Everything into one hook file without helper methods, let all props be generated outside (InteractionManager and AccessibilityPropsManager), ...
@@ -38,2 +39,3 @@ export var useTreeItemRenderContext = function (item) {
     var itemTitle = item && environment.getItemTitle(item);
+    var getOriginalItemOrder = useGetOriginalItemOrder();
     var isSearchMatching = useMemo(function () {
@@ -127,3 +129,4 @@ var _a;
                 if (canDrag) {
-                    dnd.onStartDraggingItems(selectedItems.map(function (id) { return environment.items[id]; }), treeId);
+                    var orderedItems = getOriginalItemOrder(treeId, selectedItems.map(function (id) { return environment.items[id]; }));
+                    dnd.onStartDraggingItems(orderedItems, treeId);
                 }
@@ -178,3 +181,2 @@ },
             tabIndex: -1,
-            // TODO alternative interaction modes
         };
@@ -203,3 +205,4 @@ var viewStateFlags = !viewState
         setRenamingItem,
+        getOriginalItemOrder,
     ]);
 };

lib/esnext/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -158,3 +158,3 @@ var __assign = (this && this.__assign) || function () {
         }); }, onDrop: function (items, target) { return __awaiter(void 0, void 0, void 0, function () {
-            var promises, _loop_1, _i, items_1, item, state_1;
+            var promises, orderedItems, _loop_1, _i, orderedItems_1, item, state_1;
             var _a, _b, _c, _d, _e;
@@ -165,2 +165,3 @@ return __generator(this, function (_f) {
                         promises = [];
+                        orderedItems = target.targetType === 'between-items' ? __spreadArray([], items, true).reverse() : items;
                         _loop_1 = function (item) {
@@ -203,4 +204,4 @@ var parent_1 = Object.values(currentItems).find(function (potentialParent) { var _a; return (_a = potentialParent.children) === null || _a === void 0 ? void 0 : _a.includes(item.index); });
                         };
-                        for (_i = 0, items_1 = items; _i < items_1.length; _i++) {
-                            item = items_1[_i];
+                        for (_i = 0, orderedItems_1 = orderedItems; _i < orderedItems_1.length; _i++) {
+                            item = orderedItems_1[_i];
                             state_1 = _loop_1(item);
@@ -207,0 +208,0 @@ if (typeof state_1 === "object")

lib/esnext/useHtmlElementEventListener.js

 import { useEffect } from 'react';
-import { useStableHandler } from './use-stable-handler';
+import { useStableHandler } from './useStableHandler';
 export var useHtmlElementEventListener = function (element, type, listener) {
@@ -4,0 +4,0 @@ var stableListener = useStableHandler(listener);

package.json

 {
   "name": "react-complex-tree",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "main": "lib/cjs/index.js",
@@ -37,3 +37,3 @@ "module": "lib/esm/index.js",
     "cpy-cli": "^3.1.1",
-    "demodata": "^2.3.2",
+    "demodata": "^2.3.3",
     "jest": "^29.2.2",
@@ -70,3 +70,3 @@ "jest-dom": "^4.0.0",
   },
-  "gitHead": "da00eeeca6d01566eaa16f5f0e1501e054a7012e"
+  "gitHead": "6f8f50d2d56326397c03a9a7b889d458286929a0"
 }

src/controlledEnvironment/useOnDragOverTreeHandler.ts

@@ -11,3 +11,3 @@ import * as React from 'react';
 import { isOutsideOfContainer } from './layoutUtils';
-import { useStableHandler } from '../use-stable-handler';
+import { useStableHandler } from '../useStableHandler';
 
@@ -14,0 +14,0 @@ const getHoveringPosition = (

src/index.ts

@@ -0,1 +1,4 @@
+import { TreeItemElement } from './treeItem/TreeItemElement';
+import { TreeItemChildren } from './treeItem/TreeItemChildren';
+
 export * from './controlledEnvironment/ControlledTreeEnvironment';
@@ -7,1 +10,8 @@ export * from './tree/Tree';
 export * from './renderers';
+export * from './treeItem/useTreeItemRenderContext';
+export * from './controlledEnvironment/useControlledTreeEnvironmentProps';
+
+export const INTERNALS = {
+  TreeItemElement,
+  TreeItemChildren,
+};

src/tree/useMoveFocusToIndex.ts

@@ -6,3 +6,3 @@ import { useViewState } from './useViewState';
 import { LinearItem } from '../types';
-import { useStableHandler } from '../use-stable-handler';
+import { useStableHandler } from '../useStableHandler';
 
@@ -9,0 +9,0 @@ export const useMoveFocusToIndex = () => {

src/treeItem/useTreeItemRenderContext.ts

@@ -9,2 +9,3 @@ import { HTMLProps, useMemo } from 'react';
 import { useSelectUpTo } from '../tree/useSelectUpTo';
+import { useGetOriginalItemOrder } from '../useGetOriginalItemOrder';
 
@@ -20,2 +21,3 @@ // TODO restructure file. Everything into one hook file without helper methods, let all props be generated outside (InteractionManager and AccessibilityPropsManager), ...
   const itemTitle = item && environment.getItemTitle(item);
+  const getOriginalItemOrder = useGetOriginalItemOrder();
 
@@ -134,6 +136,7 @@ const isSearchMatching = useMemo(
         if (canDrag) {
-          dnd.onStartDraggingItems(
-            selectedItems.map(id => environment.items[id]),
-            treeId
+          const orderedItems = getOriginalItemOrder(
+            treeId,
+            selectedItems.map(id => environment.items[id])
           );
+          dnd.onStartDraggingItems(orderedItems, treeId);
         }
@@ -205,3 +208,2 @@ },
       tabIndex: -1,
-      // TODO alternative interaction modes
     };
@@ -239,3 +241,4 @@
     setRenamingItem,
+    getOriginalItemOrder,
   ]);
 };

src/useHtmlElementEventListener.ts

 import { useEffect } from 'react';
-import { useStableHandler } from './use-stable-handler';
+import { useStableHandler } from './useStableHandler';
 
@@ -4,0 +4,0 @@ export const useHtmlElementEventListener = <

No alert changes

Improved metrics

Total package byte prevSize

1255490

increased by1.11%

Number of package files

477

increased by1.49%

Lines of code

19382

increased by1.08%

No dependency changes